:root {
  --fondo: #23102A;
  --texto: #B39CCD;
  --enlaces: #9F69C8;
  --destacado: #31193f;
  --destacado-2: #47215E;
  --destacado-3: #724BE7;
}

body {
  background-color: var(--fondo);
  color: var(--texto);
  font-size: 110%;
}

p {
  line-height: 1.2;
  margin-bottom: 0.6rem !important;
}

a {
  color: var(--enlaces);
}

a:hover {
  color: #8553E8;
  text-decoration: none !important; 
}

h1 {
   color: var(--texto);
}

h2 {
  border: none;
  margin-top: 20px !important;
  margin-bottom: 6px !important;
  border-bottom-color: var(--destacado);
}

h4 {
  border: none;
  margin-top: 0px !important;
  margin-bottom: -8px !important;
  font-weight: 600;
}

hr {
  border-color: #442A54;
  opacity: 1;
  margin-top: 28px;
  margin-bottom: 28px;
}

code {
  /*background-color: #412652 !important;*/
  background-color: transparent !important;
  color: var(--texto);
  /*padding: 0px 4px !important;*/
  border-radius: 3px;
  font-family: var(--quarto-font-monospace);
}

/*estilo de listas*/

main ul {
  list-style-type: none; 
  padding-left: 6px; 
}

main ul li {
  position: relative; /* Needed for absolute positioning of the caret */
  padding-left: 20px; /* Space for the custom caret */
  line-height: 1.2;
  margin-bottom: 6px;
}

main ul li::before {
  content: '▶'; /* Use a character like a right-pointing triangle */
  position: absolute;
  left: 0;
  color: #9F69CA;
  font-size: 14px;
  line-height: 2.1;
}

.navbar-nav .nav-link.active {
  color: var(--texto) !important; 
}
.navbar-brand:hover, .nav-link:hover, .quarto-navigation-tool:hover, .navbar-brand:focus {
  color: var(--texto) !important; 
}

.icono:hover {
  filter: brightness(130%); transition: 0.4s
}

.icono_claro:hover {
  filter: brightness(90%) saturate(140%); transition: 0.4s
}

h1.title, .title.h1 { 
  margin: 24px; margin-top: 24px; margin-left: 30px; color: var(--enlaces); 
}

.quarto-title-meta-heading { display: none; }

.quarto-title-meta-contents {
  margin-left: 30px; margin-top: 6px; margin-bottom: 12px; color: var(--texto);
}

.card {
  background-color: transparent;
  border: none;
}
.card-body {
  background-color: #31193f;
  border: solid 1px #442A54;
  color: var(--texto);
  border-radius: 5px;
}

#interna .card-body {
  background-color: #432257;
  border: solid 1px #542D6A;
}

.card-body h3, h4 {
  margin-top: 0px;
}

.contenedor_libro {
  width: 180px !important; 
  margin: auto;
  margin-top: 0;
}

.libro {
  max-width: 128px; display: block; 
  margin-left: auto; margin-right: auto;
  margin-bottom: 12px;
  border-radius: 3px;
  opacity: 90%;
  border: 1px solid #31193F;
}

.libro:hover {
        transform: translateY(-4px);
        transition: transform 0.2s;
      }

.libro_titulo {
  text-align: center; 
  font-weight: bold; 
  color: var(--texto);
  text-decoration: none !important;
  font-size: 98%;
  line-height: 1;
  margin-bottom: -12px;
}


.libro_texto {
  text-align: center; 
  color: var(--texto);
  text-decoration: none !important;
  font-size: 85%;
  line-height: 1.1;
  hyphens: auto;
}


.sin_scroll {
  overflow-y: hidden;
  scrollbar-width: none;
  -ms-overflow-style: none; 
}

.sin_scroll::-webkit-scrollbar {
  display: none;
}


.contenedor_redonda {
  text-align: center; padding: 12px; margin-bottom: 18px;
}

.redonda {
  width: 50%; max-width: 200px; border-radius: 50%;
  opacity: 90%;
  border: 2px solid #442A54;
}


.sobre_subtitulo {
  font-size: 120%; margin-bottom: 12px;
}

.icono {
  margin: auto;
  font-size: 34px;
  padding: 8px;
}

.icono_mediano {
  margin: auto;
  font-size: 34px;
  padding: 8px;
  padding-top: 0;
  color: #9F69C9;
}

.icono_texto {
  margin: auto;
  font-size: 100%;
  padding: 6px;
  padding-bottom: 0;
  display: inline-block;
  margin-right: 0px;
}

.centrado {
  text-align: center;
}

.subtitulo_panel {
  margin-bottom: -8px;
  font-size: 110%;
}

.contenedor_panel_icono {
 min-height: 150px;
}

/* para ventanas pequeñas */
@media (max-width:570px) { 
  .contenedor_panel_icono {
    min-height: 0;
  }
}

.circulo {
  background-color: var(--texto);
  color: var(--fondo) !important; 
  font-weight: bold;
  width: 24px; height: 24px;
  line-height: 24px;
  padding-bottom: 2px;
  border-radius: 50%;
  text-align: center;
  display: inline-block;
  margin-right: 4px;
  vertical-align: 0.1em;
}


.texto_descargar {
  font-size: 90%; 
  line-height: 0.9;
  margin-left: 12px;
  text-decoration: none; 
  margin-bottom: -8px; margin-top: -6px; 
  text-align: center; color: #B39CCD;
}

.imagen_descargar {
  padding: 12px; padding-top: 4px; padding-bottom: 0px; 
  width: 80%; max-width: 200px; min-width: 128px;
  opacity: .9;
}

.imagen_descargar:hover {
  filter: saturate(200%) brightness(90%);
  transition: transform 0.2s;
}

.circulo_texto {
  background-color: var(--texto);
  color: var(--fondo) !important; 
  width: 18px; height: 18px; line-height: 18px;
  font-size: 10pt;
  font-weight: bold;
  border-radius: 50%;
  text-align: center;
  display: inline-block;
  margin-left: 3px; margin-right: 3px;
  vertical-align: 0.1em;
}





.scroll-horizontal {
  display: flex;
  overflow-x: auto;
  overflow-y: hidden;
  white-space: wrap;
  padding: 6px;
  gap: 16px;
}

.scroll-horizontal::-webkit-scrollbar {
  height: 8px;
}

.scroll-horizontal::-webkit-scrollbar-track {
  background: transparent;
  border-radius: 10px;
}

.scroll-horizontal::-webkit-scrollbar-thumb {
  background: #442A54;
  border-radius: 10px;
}

.scroll-horizontal::-webkit-scrollbar-thumb:hover {
  background: #9F69C9;
}

.contenedor_paquete {
  /*flex: 0 0 auto;
  display: flex;
  align-items: center;*/
  text-align: center;
  justify-content: center;
  width: 160px !important; 
  margin: auto;
  margin-top: 0;
}

.paquete {
  max-width: 128px; display: block; 
  margin-left: auto; margin-right: auto;
  margin-bottom: 12px;
  border-radius: 3px;
  opacity: 90%;
}

.paquete:hover {
  transform: translateY(-4px);
  /*opacity: 100%;
  filter: brightness(110%);*/
  transition: transform 0.2s;
}

.paquete_titulo {
  text-align: center; 
  font-weight: bold; 
  color: var(--texto);
  text-decoration: none !important;
  font-size: 98%;
  line-height: 1;
  margin-top: -4px;
}


.paquete_texto {
  display: block;
  width: 140px; 
  text-align: center; 
  color: var(--texto);
  text-decoration: none !important;
  font-size: 80%;
  line-height: 1.1;
  margin-top: -4px;
}


.parrafos_contenido {
  p {
  margin-bottom: -2px !important
}
}

.lateral_contenido {
  font-size: 90%;
}

.contenidos_titulo {
  margin-left: 6px;
  font-weight: bold;
  opacity: 90%;
}

/* para ventanas grandes */
@media (min-width:570px) { 
.lateral_contenido {
  margin-top: 18px;
  margin-left: -8px;
}
}

/* para ventanas chicas */
@media (max-width:570px) { 
.lateral_contenido {
  margin-left: 32px;
}
}


.avanzado {
  margin-top: 16px;
  /*display: flex;
  flex-direction: column;   
  justify-content: space-between;*/
  min-height: 100px;
  /*justify-content: flex-start;*/
  font-size: 85%;
  word-break: break-word;
  hyphens: auto;
}

.avanzado {
  li {
    line-height: 1.2;
    margin-bottom: 6px;
  }
  
  ul li {
  padding-left: 14px;
  }
  
  ul li::before {
   line-height: 1.9;
   font-size: .6rem;
   /*color: #A891C1;*/
  }

  a {
    /*text-decoration: none !important;*/
    text-decoration-color: #8655AA;
    color: var(--texto);
  }
}

.fondo {
  font-size: 75% !important;
  opacity: 75%;
  margin-bottom: -10px;
  /*justify-content: flex-end;*/
  margin-top: auto;
  text-align: right;
  vertical-align: bottom;
}

.imgen_curso {
  margin: auto;
  width: 100%;
}

.contenedor_cursos {
  max-width: 512px !important;
  margin: auto;
  margin-bottom: 16px;
}

.curso_imagen {
  width: 90%;
  text-align: center;
  margin: auto;
  border-radius: 5px;
  opacity: 90%;
  border: 1px solid #442A54;
}

.cursos_titulo {
  font-size: 120%;
  font-weight: bold;
  line-height: 1.2;
  color: var(--texto) !important;
  margin-bottom: -6px;
}

.contenedor_pildora{
  margin-top: 4px;
  margin-bottom: -4px;
}

.pildora {
  display: inline-block;
  padding: 2px 8px;
  border-radius: 20px;
  color: var(--fondo);
  background-color: var(--texto);
  font-family: var(--quarto-font-monospace);
  font-size: 60%;
  margin-left: 4px;
  vertical-align: 0.2em;
}


.contenedor_curso_imagen {
  margin: auto; text-align: center;
}