/* Tipografía principal: Nunito (títulos) + Inter (cuerpo) */
/* Selección basada en audiencia adolescente: calidez, modernidad y alta legibilidad en móvil */
@import url('https://fonts.googleapis.com/css2?family=Nunito:wght@400;600;700;800;900&family=Inter:wght@300;400;500;600&display=swap');

/* ============================================================
   NAVBAR GEN Z 2025 — EduTumaco
   Diseño glassmorphism oscuro con acento en gradiente púrpura
   ============================================================ */

.edu-navbar {
     background: rgba(15, 15, 30, 0.92);
     backdrop-filter: blur(16px);
     -webkit-backdrop-filter: blur(16px);
     border-bottom: 1px solid rgba(124, 58, 237, 0.25);
     padding: 12px 0;
     transition: background 0.3s ease, box-shadow 0.3s ease;
}

/* Sombra al hacer scroll — activada por JS si se desea */
.edu-navbar.scrolled {
     background: rgba(10, 10, 20, 0.98);
     box-shadow: 0 4px 30px rgba(124, 58, 237, 0.2);
}

/* Brand */
.edu-navbar__brand {
     display: flex;
     align-items: center;
     gap: 10px;
     text-decoration: none;
}

.edu-navbar__logo-wrap {
     width: 48px;
     height: 48px;
     border-radius: 12px;
     background: linear-gradient(135deg, #7C3AED, #EC4899);
     display: flex;
     align-items: center;
     justify-content: center;
     overflow: hidden;
     flex-shrink: 0;
}

.edu-navbar__logo-wrap img {
     width: 100%;
     height: 100%;
     object-fit: contain;
     padding: 2px;
}

.edu-navbar__brand-text {
     font-family: var(--font-principal);
     font-weight: 800;
     font-size: 1.2rem;
     color: white;
     letter-spacing: 0.3px;
}

.edu-navbar__brand-accent {
     color: #A78BFA; /* Lavender */
}

/* Toggler personalizado */
.edu-navbar__toggler {
     background: transparent;
     border: none;
     padding: 6px;
     cursor: pointer;
     display: flex;
     flex-direction: column;
     gap: 5px;
}

.edu-navbar__toggler-bar {
     display: block;
     width: 24px;
     height: 2.5px;
     background: white;
     border-radius: 4px;
     transition: all 0.3s ease;
}

/* Links de navegación */
.edu-navbar__link {
     font-family: var(--font-cuerpo);
     font-size: 0.92rem;
     font-weight: 600;
     color: rgba(255, 255, 255, 0.85) !important;
     padding: 8px 14px !important;
     border-radius: 10px;
     transition: background 0.2s ease, color 0.2s ease;
}

.edu-navbar__link:hover,
.edu-navbar__link:focus {
     background: rgba(124, 58, 237, 0.15);
     color: white !important;
}

/* Dropdown menu */
.edu-dropdown-menu {
     background: rgba(15, 15, 30, 0.97) !important;
     border: 1px solid rgba(124, 58, 237, 0.3) !important;
     border-radius: 14px !important;
     padding: 8px !important;
     backdrop-filter: blur(16px);
     box-shadow: 0 20px 60px rgba(0, 0, 0, 0.4) !important;
     min-width: 220px;
}

.edu-dropdown-item {
     font-family: var(--font-cuerpo);
     font-size: 0.9rem;
     font-weight: 500;
     color: rgba(255, 255, 255, 0.8) !important;
     padding: 10px 14px !important;
     border-radius: 10px !important;
     transition: background 0.2s ease, color 0.2s ease !important;
}

.edu-dropdown-item:hover {
     background: rgba(124, 58, 237, 0.2) !important;
     color: white !important;
}

/* Botón CTA de navbar */
.edu-navbar__cta {
     font-family: var(--font-cuerpo);
     font-size: 0.9rem;
     font-weight: 700;
     color: white !important;
     background: linear-gradient(135deg, #7C3AED, #EC4899);
     padding: 9px 20px;
     border-radius: 50px;
     text-decoration: none !important;
     box-shadow: 0 4px 14px rgba(124, 58, 237, 0.4);
     transition: transform 0.2s ease, box-shadow 0.2s ease;
     white-space: nowrap;
}

.edu-navbar__cta:hover {
     transform: scale(1.05);
     box-shadow: 0 6px 20px rgba(124, 58, 237, 0.55);
     color: white !important;
}

/* Mobile navbar */
@media (max-width: 991px) {
     .navbar-collapse {
          background: rgba(10, 10, 25, 0.98);
          border-radius: 16px;
          margin-top: 12px;
          padding: 12px;
          border: 1px solid rgba(124, 58, 237, 0.2);
     }

     .edu-navbar__link {
          display: block;
          width: 100%;
          -webkit-tap-highlight-color: transparent;
          outline: none !important;
     }

     .edu-navbar__link:focus,
     .edu-navbar__link:active {
          outline: none !important;
          box-shadow: none !important;
     }

     .edu-navbar__cta {
          display: inline-block;
          margin-top: 8px;
     }

     .edu-dropdown-menu {
          background: rgba(30, 15, 60, 0.95) !important;
          border: none !important;
          box-shadow: none !important;
          margin-left: 0 !important;
          padding: 8px !important;
          position: static !important;
          width: 100% !important;
          transform: none !important;
     }
     
     .edu-dropdown-item {
          display: block !important;
          width: 100% !important;
          white-space: normal !important;
          -webkit-tap-highlight-color: transparent;
     }
}

/* ============================================================
   FOOTER GEN Z 2025 — EduTumaco
   ============================================================ */

.edu-footer {
     background: #0F0F1A;
     color: rgba(255,255,255,0.75);
     border-top: 1px solid rgba(124, 58, 237, 0.2);
     font-family: var(--font-cuerpo);
     width: 100% !important;
     align-self: stretch !important;
}

.edu-footer__brand {
     font-family: var(--font-principal);
     font-size: 1.3rem;
     font-weight: 800;
     color: white;
}

.edu-footer__brand span {
     color: #A78BFA;
}

.edu-footer__desc {
     font-size: 0.9rem;
     line-height: 1.7;
     color: rgba(255,255,255,0.55);
     max-width: 280px;
     margin-bottom: 16px;
}

.edu-footer__badge {
     display: inline-block;
     font-size: 0.78rem;
     font-weight: 700;
     color: #A78BFA;
     background: rgba(124, 58, 237, 0.12);
     border: 1px solid rgba(124, 58, 237, 0.25);
     padding: 5px 14px;
     border-radius: 50px;
     letter-spacing: 0.3px;
}

.edu-footer__heading {
     font-family: var(--font-principal);
     font-size: 0.85rem;
     font-weight: 700;
     color: white;
     text-transform: uppercase;
     letter-spacing: 1px;
     margin-bottom: 14px;
}

.edu-footer__links {
     list-style: none;
     padding: 0;
     margin: 0;
}

.edu-footer__links li {
     margin-bottom: 8px;
}

.edu-footer__links a {
     color: rgba(255,255,255,0.55);
     text-decoration: none;
     font-size: 0.9rem;
     transition: color 0.2s ease;
}

.edu-footer__links a:hover {
     color: #A78BFA;
}

.edu-footer__inst {
     font-size: 0.85rem;
     color: rgba(255,255,255,0.45);
     line-height: 1.7;
}

.edu-footer__copy {
     font-size: 0.82rem;
     color: rgba(255,255,255,0.3);
     margin-top: 8px;
}

.edu-footer__subheading {
     display: block;
     font-size: 0.78rem;
     font-weight: 700;
     color: #A78BFA;
     text-transform: uppercase;
     letter-spacing: 0.5px;
     margin-bottom: 2px;
}

.edu-footer__text {
     font-size: 0.85rem;
     color: rgba(255, 255, 255, 0.6);
     line-height: 1.5;
     margin-bottom: 0;
}

.edu-footer__logo-box {
     width: 185px;
     height: 75px;
     padding: 8px 12px;
     background: #FFFFFF;
     border: 1px solid rgba(0, 0, 0, 0.05);
     border-radius: 8px;
     display: inline-flex;
     align-items: center;
     justify-content: center;
     transition: transform 0.2s ease, box-shadow 0.2s ease;
     box-shadow: 0 4px 10px rgba(0,0,0,0.05);
}

.edu-footer__logo-box:hover {
     background: #FFFFFF;
     transform: scale(1.05);
     box-shadow: 0 8px 20px rgba(124, 58, 237, 0.2);
}

.edu-footer__logo-img {
     max-height: 58px;
     max-width: 165px;
     object-fit: contain;
     display: block;
}

.edu-footer__bottom {
     background: rgba(0,0,0,0.3);
     border-top: 1px solid rgba(255,255,255,0.06);
     padding: 14px 0;
     text-align: center;
     font-size: 0.8rem;
     color: rgba(255,255,255,0.3);
}

/* ============================================================
   MEJORAS GLOBALES DE SECCIONES — PÁGINAS INTERNAS
   Estilos para que las páginas de módulos hereden el look
   ============================================================ */

/* Botones globales — estilo Gen Z */
.btn-primary {
     background: linear-gradient(135deg, #7C3AED, #A855F7) !important;
     border: none !important;
     font-family: var(--font-cuerpo) !important;
     font-weight: 700 !important;
     border-radius: 50px !important;
     box-shadow: 0 4px 14px rgba(124, 58, 237, 0.35) !important;
     transition: transform 0.2s ease, box-shadow 0.2s ease !important;
}

.btn-primary:hover {
     transform: translateY(-2px) !important;
     box-shadow: 0 6px 20px rgba(124, 58, 237, 0.5) !important;
}

.btn-secondary {
     background: linear-gradient(135deg, #6B7280, #9CA3AF) !important;
     border: none !important;
     font-family: var(--font-cuerpo) !important;
     font-weight: 600 !important;
     border-radius: 50px !important;
}

/* Secciones informativas internas */
.seccion-informativa {
     background: var(--edu-bg-page) !important;
}

/* Color de acento — antes era azul Bootstrap, ahora es púrpura */
.text-primary {
     color: var(--edu-purple) !important;
}

.color-edutumaco {
     color: var(--edu-purple) !important;
}

/* Carrusel del equipo en index */
.bg-dark {
     background: #0F0F1A !important;
}

/* Imágenes de sección con bordes suaves */
.contenedor-imagen {
     border-radius: 20px !important;
     overflow: hidden;
     box-shadow: 0 12px 40px rgba(0,0,0,0.12);
}

/* Forzar padding-top para compensar navbar fixed */
body > nav + *,
body > nav + section,
body > nav + div {
     padding-top: 80px;
}



/* --- RESPONSIVIDAD GENERAL --- */
/** HEADER RESPONSIVO **/
body {
     background-color: white !important;
}

/* Ajuste opcional para que las secciones principales resalten */
main.container {
     background-color: white;
}

header {
     position: relative;
     width: 100%;
     min-height: 80vh;
     /* Altura adaptable */
     background: #F9DB79;
     display: flex;
     justify-content: center;
     align-items: center;
     padding: 60px 20px;
     overflow: hidden;
}

header::before {
     content: '';
     position: absolute;
     top: 0;
     left: 0;
     width: 100%;
     height: 100%;
     background-image: url(../img/Metodos.png);
     background-repeat: no-repeat;
     background-position: center;
     background-size: contain;
     /* Evita que la imagen se corte */
     opacity: 0.2;
     /* Para que el texto sea legible */
}

header .text-content {
     text-align: center;
     z-index: 1;
}

/* Ajuste para el botón de contacto en la navbar */
.navbar-nav .btn-primary {
     white-space: nowrap !important;
     /* Evita que el texto se parta en dos líneas */
     display: inline-block;
     width: auto !important;
     /* Permite que el botón crezca según el texto */
     padding-left: 20px !important;
     padding-right: 20px !important;
     min-width: fit-content;
     /* Se ajusta al contenido real */
}


/* Tamaños de texto fluidos */
header h1 {
     font-size: clamp(3.5rem, 12vw, 7rem) !important;
     line-height: 1;
     margin: 0;
}

header h2 {
     font-size: clamp(1.5rem, 5vw, 3rem) !important;
     font-weight: 300;
     margin-bottom: -10px;
     /* Junta el texto estéticamente */
}

header h3 {
     font-size: clamp(1.2rem, 3vw, 2rem) !important;
     color: #e91e63;
     /* Un color que resalte el hashtag */
     margin-bottom: 10px;
}

/* --- MEDIA QUERY PARA MÓVILES --- */
@media (max-width: 768px) {
     header {
          min-height: 60vh;
          /* Más corto en celulares */
          padding-top: 100px;
          /* Espacio para el menú móvil */
     }

     header h1 {
          letter-spacing: 2px;
          /* Menos espacio entre letras para que quepa */
     }
}

@media (max-width: 768px) {

     /* Ajuste de las secciones con imagen y texto */
     .grid {
          display: flex;
          flex-direction: column;
          /* Apila el contenido verticalmente */
     }

     .span6 {
          width: 100% !important;
          min-height: 300px;
          /* Para que las imágenes de fondo no desaparezcan */
     }

     /** SECCIÓN LUGAR (General) **/
     .lugar {
          height: auto !important;
          min-height: 100vh;
          background-color: #f8f9fa;
          /* O el color que prefieras */
     }

     .lugar .background {
          background-image: url(../img/PrevencionV.png);
          background-size: cover;
          background-position: center;
     }

     /* --- AJUSTE PARA MÓVIL (Media Query) --- */
     @media (max-width: 768px) {
          .lugar .grid {
               display: flex !important;
               /* Forzamos flex para poder usar el reverse */
               flex-direction: column-reverse;
               /* ESTO hace que la imagen (que está abajo en el HTML) suba al principio en el móvil */
          }

          .lugar .span6 {
               width: 100% !important;
          }

          /* Altura para que la imagen no desaparezca en el celular */
          .lugar .background {
               height: 300px;
               min-height: 300px;
          }

          .lugar .text-content.lateral {
               padding: 40px 20px !important;
               text-align: center;
          }

          .lugar h1 {
               font-size: 2.5rem !important;
          }
     }

     /* Ajuste de textos */
     .text-content.lateral {
          padding: 40px 20px;
          text-align: center;
     }

     h1 {
          font-size: 1.8rem;
     }

     h2 {
          font-size: 1.4rem;
     }
}



/* EUIPO TRABAJO */
.carousel-item {
     height: 70vh;
     /* Ajusta el alto del banner principal */
     min-height: 400px;
}

.carousel-item img {
     object-fit: cover;
}

/* Ajuste para el grupo de trabajo */
/* Estilo para que el carrusel no ocupe toda la pantalla en monitores grandes */
#carouselTesti {
     background: rgba(255, 255, 255, 0.03);
     /* Un fondo muy sutil para dar forma */
     border-radius: 20px;
     padding: 30px 10px;
}

/* Control de lectura: menos ancho = más fácil de leer */
#carouselTesti p {
     max-width: 650px;
     margin: 0 auto;
}

/* Ajuste de los iconos para que no queden tan lejos del texto */
.carousel-control-prev,
.carousel-control-next {
     filter: brightness(0.8);
}


/* --- AJUSTE DEL JUEGO DE MEMORIA --- */
@media (max-width: 480px) {
     #memory-game {
          grid-template-columns: repeat(2, 1fr);
          /* Solo 2 columnas en móviles pequeños */
          gap: 10px;
     }

     .memory-card {
          width: 120px;
          height: 120px;
     }

     .concept {
          font-size: 0.8rem;
     }
}



html,
body {
     overflow-x: hidden;
}

/** VARIABLES  */
:root {
     /* === TIPOGRAFÍA === */
     /* Nunito: calidez y energía para títulos orientados a adolescentes */
     --font-principal: 'Nunito', sans-serif;
     /* Inter: máxima legibilidad en pantallas pequeñas para cuerpo de texto */
     --font-cuerpo: 'Inter', sans-serif;

     /* === ESCALA TIPOGRÁFICA === */
     --text-h1: clamp(2rem, 6vw, 3.5rem);       /* H1 fluido: impacto en pantallas grandes, legible en móvil */
     --text-h2: clamp(1.5rem, 4vw, 2.5rem);     /* H2 */
     --text-h3: clamp(1.2rem, 3vw, 1.75rem);    /* H3 */
     --text-body: 1rem;                         /* Cuerpo: 16px base */
     --text-small: 0.875rem;                    /* Etiquetas y notas */
     --line-height-heading: 1.2;                /* Interlineado compacto para títulos */
     --line-height-body: 1.7;                   /* Interlineado amplio para fácil lectura */

     /* === COLORES === */
     --gris600: #2F2E2E;
     --gris200: #706D6D;
}

/* === ESTILOS GLOBALES DE TIPOGRAFÍA === */
h1, h2, h3, h4, h5, h6 {
     font-family: var(--font-principal);
     line-height: var(--line-height-heading);
     margin-bottom: 1rem;
}

h1 {
     font-size: var(--text-h1);
     background: linear-gradient(135deg, #7C3AED, #EC4899);
     -webkit-background-clip: text;
     -webkit-text-fill-color: transparent;
     color: transparent;
     font-weight: 900;
}

h2 {
     font-size: var(--text-h2);
     color: #EC4899;
     font-weight: 800;
}

h3 {
     font-size: var(--text-h3);
     color: #A78BFA;
     font-weight: 700;
}

h4, h5, h6 {
     color: #ffffff;
     font-weight: 600;
}

p, span, li, a {
     font-family: var(--font-cuerpo);
}

/** SCROLL BAR */
body::-webkit-scrollbar {
     width: 8px;
}

body::-webkit-scrollbar-thumb {
     background-color: #0d0d0d;
     border-radius: 50px;
}





/** GENERALES */
* {
     margin: 0;
     padding: 0;
     box-sizing: border-box;
     /* Inter como fuente de cuerpo en todos los elementos base */
     font-family: var(--font-cuerpo);
     color: var(--gris600);
}

a {
     text-decoration: none;
}

/* Nunito para todos los niveles de heading: transmite cercanía y energía */
h1, h2, h3, h4, h5, h6 {
     font-family: var(--font-principal);
     line-height: var(--line-height-heading);
}

/* Escala fluida aplicada */
h1 { font-size: var(--text-h1); font-weight: 800; }
h2 { font-size: var(--text-h2); font-weight: 700; }
h3 { font-size: var(--text-h3); font-weight: 600; }

p, li {
     font-family: var(--font-cuerpo);
     font-size: var(--text-body);
     line-height: var(--line-height-body);
}


/** BOTONES */
/* --- CORRECCIÓN DEFINITIVA PARA EL BOTÓN DE CONTACTO --- */

/* 1. Anulamos las medidas fijas solo para los botones de la navegación */
.navbar-nav .nav-item .btn {
     width: auto !important;
     /* Deja que el ancho sea natural */
     height: auto !important;
     /* Deja que el alto sea natural */
     min-width: 150px;
     /* Asegura un tamaño mínimo estético */
     padding: 8px 20px !important;
     /* Espaciado interno cómodo */
     font-size: 0.9rem !important;
     /* Tamaño de fuente adecuado para menús */
     display: flex !important;
     align-items: center;
     justify-content: center;
     white-space: nowrap !important;
     /* Evita que el texto se rompa */
}

/* 2. Aseguramos que el color azul de Bootstrap se mantenga */
.navbar-nav .btn-primary {
     background-color: #0d6efd !important;
     /* Azul estándar de Bootstrap */
     border-color: #0d6efd !important;
     color: white !important;
}

/* 3. Ajuste para que no choque con los bordes en el S20 */
@media (max-width: 991px) {
     .navbar-nav .nav-item {
          width: 100%;
          display: flex;
          flex-direction: column;
          align-items: stretch;
          justify-content: center;
          padding: 5px 0;
     }
}


/** GRID */
.grid {
     display: grid;
     grid-template-columns: repeat(12, 1fr);
     width: 100%;
     height: auto;
     /* Cambiado de 100% a auto para que crezca con el texto */
}


/** SECCIÓN ESPECÍFICA .sex **/
/** 1. CONFIGURACIÓN DE SECCIÓN (CORREGIDA) **/
section.sex,
section.sexdos,
section.lugar {
     width: 100%;
     /* Eliminamos el 100vh para evitar el hueco blanco */
     height: auto !important;
     min-height: auto !important;
     display: block;
     /* Cambiamos a block para mejor flujo vertical */
     overflow: hidden;
     padding: 50px 0;
     /* Espacio uniforme arriba y abajo */
}

/** 2. EL CONTENEDOR GRID **/
.grid {
     display: grid;
     grid-template-columns: repeat(12, 1fr);
     width: 100%;
     margin: 0;
}

/** 3. LAS COLUMNAS (SPAN6) **/
.span6 {
     grid-column: span 6;
     display: flex;
     flex-direction: column;
     justify-content: center;
     align-items: center;
     /* Centra contenido horizontalmente */
     text-align: center;
}

/* Imagen de fondo */
.background {
     min-height: 400px;
     /* Altura mínima para que la imagen se vea */
     background-size: cover !important;
     background-position: center !important;
}

/* Contenedor de texto lateral */
.text-content.lateral {
     padding: 40px;
     width: 100%;
     display: flex;
     flex-direction: column;
     align-items: center;
     /* Centra el botón y títulos */
}

.text-content.lateral p {
     max-width: 600px;
     margin: 20px auto;
     font-size: 1.1rem;
     line-height: 1.6;
}

/** 4. REGLAS PARA MÓVIL (MEDIA QUERY) **/
@media (max-width: 768px) {

     /* Forzamos a que las columnas se apilen una arriba de otra */
     .grid {
          display: flex !important;
          flex-direction: column;
     }

     .span6 {
          width: 100% !important;
     }

     /* La sección de 'Mujeres en acción' suele necesitar orden inverso en móvil */
     .lugar .grid {
          flex-direction: column-reverse;
     }

     .background {
          height: 300px;
          /* Imagen más pequeña en móvil */
          min-height: 300px;
     }

     .text-content.lateral {
          padding: 40px 20px !important;
     }

     h1 {
          font-size: 2.2rem !important;
     }
}



/** SECCIONES */
section {
     position: relative;
     width: 100%;
     height: 100vh;
}

section.full::before {
     content: '';
     position: absolute;
     top: 0;
     left: 0;
     width: 100%;
     height: 100%;
     background-attachment: fixed !important;
     background-position: center !important;
}




/** CONTENEDOR BACKGROUND  */
.background {
     background-size: cover !important;
     background-position: right !important;
}



/** TEXT CONTENT */
.text-content {
     position: relative;
     width: 100%;
     height: 100%;
     display: flex;
     justify-content: center;
     align-items: center;
     flex-direction: column;
     z-index: 1;
}


/*? Full */
.text-content.full {
     grid-column: span 10;
}

.text-content.full h1,
.text-content.full h2 {
     color: #FFF;
     text-transform: uppercase;
     text-align: center;
}

.text-content.full h1 {
     font-size: 115px;
     letter-spacing: 20px;
     line-height: 1.5;
     font-family: var(--font-principal); /* Nunito para este título de impacto */
}


.text-content.full h2 {
     font-size: 50px;
     letter-spacing: 2px;
     font-weight: 100;
     line-height: 0.1;
}



/*? Lateral  */
.text-content.lateral {
     padding: 0 50px;
}

.text-content.lateral h1 {
     font-size: 55px;
     font-weight: 400;
     letter-spacing: 2px;
     line-height: 1;
     text-align: center;
}

.text-content.lateral h3 {
     font-size: 40px;
     font-weight: 600;
     text-align: center;
}

.text-content.lateral p {
     font-size: 20px;
     margin: 20px 0;
     text-align: center;
     letter-spacing: 0.5px;
}







/*? Sociales */
.sociales {
     grid-column: span 2;
     display: flex;
     justify-content: flex-end;
     width: 100%;
}

.sociales a {
     width: 30px;
     height: 30px;
     border-radius: 50%;
     background: #000;
     color: #FFF;
     display: flex;
     justify-content: center;
     align-items: center;
}



/** HEADER */
header {
     position: relative;
     width: 100%;
     height: calc(100vh + 50px);
     background: #F9DB79;
}

header::before {
     content: '';
     position: absolute;
     top: 0;
     left: 0;
     width: 100%;
     height: 100%;
     background-image: url(../img/Metodos.png);
     background-repeat: no-repeat;
     background-position: center;
}

header .grid {
     justify-items: center;
     align-items: center;
}

header .text-content {
     padding: 200px 0 0 0;
}

header .text-content h3 {
     position: absolute;
     bottom: 50px;
     right: 0;
     font-size: 50px;
     font-weight: 700;
     color: #000;
}



/** DERECHOS SEXUALES */
.sex div.background {
     background-image: url(../img/Autoestima.png);
}



/** ESPECIAL */
.especial {
     background: #B5E8D5;
}

.especial::before {
     background-image: url(../img/BannerPrincipal.png);
}



/** LUGAR  */
.lugar .background {
     background-image: url(../img/PrevencionV.png);
}



/** EVENTOS  */
.eventos {
     background: #FFBFB3;
}

.eventos::before {
     background-image: url(../img/ProyectoVida.png);
}

.eventos .btn {
     width: 200px;
}



/** POST  */
/** POST (Ajuste Responsivo) **/
.sexdos {
     height: auto !important;
     /* Permite que crezca según el texto */
     min-height: 100vh;
}

.sexdos .background {
     background-image: url(../img/Metodos.png);
     background-size: cover;
     background-position: center;
}

/* --- MEDIA QUERY --- */
@media (max-width: 768px) {
     .sexdos .grid {
          display: flex;
          flex-direction: column;
          /* Apila imagen arriba y texto abajo */
     }

     .sexdos .span6 {
          width: 100% !important;
     }

     /* Le damos una altura mínima a la imagen en móvil para que no desaparezca */
     .sexdos .background {
          height: 300px;
          min-height: 300px;
     }

     .sexdos .text-content.lateral {
          padding: 40px 20px !important;
          height: auto;
     }

     .sexdos h1 {
          font-size: 2.5rem !important;
          /* Título un poco más pequeño para móvil */
     }
}


/* --- Juego de Memoria --- */
/* Forzar que la sección no se estire */
.eventos {
     display: block !important;
     /* Cambiamos de flex a block para evitar distribución automática */
     height: auto !important;
     min-height: 0 !important;
     padding-top: 40px !important;
     padding-bottom: 40px !important;
}

/* Eliminar márgenes que empujan hacia abajo */
.eventos .text-content {
     margin-bottom: 10px !important;
     /* Espacio mínimo bajo el texto */
     padding-bottom: 0 !important;
}

.text-content p {
     margin-bottom: 5px !important;
}

/* Ajustar el contenedor del juego */
#memory-game {
     display: flex;
     flex-wrap: wrap;
     justify-content: center;
     align-items: flex-start;
     /* Pega las cartas al inicio del div */
     margin-top: 0 !important;
     /* Elimina espacio arriba del juego */
     padding-top: 0 !important;
}

.text-content h2 {
     margin-top: 0;
     margin-bottom: 10px;
     font-size: 2rem;
}

.text-content p {
     margin-bottom: 0;
}

/* Cards */
.memory-card {
     width: 150px;
     height: 150px;
     perspective: 1000px;
     cursor: pointer;
     position: relative;
     /* Eliminamos absolute de aquí para que respeten el flujo */
}

.memory-card-inner {
     position: relative;
     /* Cambiado de absolute a relative */
     width: 100%;
     height: 100%;
     transform-style: preserve-3d;
     transition: transform 0.6s;
}

.memory-card.flip .memory-card-inner {
     transform: rotateY(180deg);
}

.memory-card-front,
.memory-card-back {
     position: absolute;
     width: 100%;
     height: 100%;
     backface-visibility: hidden;
     border-radius: 10px;
     display: flex;
     align-items: center;
     justify-content: center;
     box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}

.memory-card-front {
     background: #aadbd5;
}

.memory-card-back {
     background: #ffffff;
     transform: rotateY(180deg);
}

.memory-card img {
     width: 85%;
     height: 85%;
     object-fit: contain;
     /* Evita que la imagen se estire */
     border-radius: 8px;
}



/*** --- ESCENARIO GENERAL --- */
.flipbook-wrapper {
     background: radial-gradient(circle, #444 0%, #000 100%);
     min-height: 100vh;
     display: flex;
     justify-content: center;
     align-items: center;
     perspective: 2000px;
     padding: 20px;
     /* Evita que el libro toque los bordes del navegador */
}



/* --- ESCENARIO DEL LIBRO --- */
.flipbook-wrapper {
     min-height: auto !important;
     /* Quitamos el 100vh para que no fuerce espacio extra */
     padding: 20px 0;
}

/* Contenedor principal del libro */
#flipbook-container {
     margin: 0 auto;
     /* Ajusta estos valores según la proporción de tus imágenes reales */
     /* Por ejemplo, para formato vertical tipo libro: */
     width: 100%;
     max-width: 500px;
     max-width: 500px;

}

/* Contenedor de cada página */
.page {
     background-color: white;
}

.page-content {
     width: 100%;
     height: 100%;
     display: flex;
     flex-direction: column;
     padding: 0 !important;
     margin: 0 !important;
     background-color: white;
     /* Cambia esto si el fondo de tus imágenes no es blanco */

}

/* La clave: forzar a la imagen a llenar el contenedor */
.page-content img {
     width: 100%;
     height: 100%;
     object-fit: fill;
     /* Esto estira la imagen para llenar el espacio */

}

/* Ajuste de títulos dentro del libro */
.page-content h4 {
     font-size: 1.2rem;
     margin-bottom: 15px;
     color: #0d6efd;
     /* Azul de Bootstrap */
}

/* Ajuste de párrafos (Crucial para que quepan) */
.page-content p {
     line-height: 1.5;
     text-align: justify;
     color: #333;
     /* Ajuste para pantallas pequeñas */
     font-size: clamp(0.75rem, 2vw, 0.9rem) !important;
}

/* --- IMÁGENES DENTRO DEL LIBRO --- */
.img-book,
.img-fluid {
     max-width: 100%;
     max-height: 70%;
     /* Evita que la imagen empuje el texto fuera */
     object-fit: contain;
     margin: auto;
     display: block;
}

/* --- AJUSTES PARA MÓVIL (S20 y similares) --- */
@media (max-width: 768px) {
     #flipbook-container {
          /* En móvil, el libro suele necesitar una escala menor */
          transform: scale(1);
          margin: 10px auto !important;
     }

     .page-content {
          padding: 15px;
          /* Menos espacio en móvil para ganar área de lectura */
     }

     .page-content h4 {
          font-size: 1rem;
          margin-bottom: 8px;
     }

     /* Pequeña ayuda para el scroll interno si el texto es muy largo */
     .page-content {
          overflow-y: auto;
     }
}

/* Libro 3 Autonomia */
/* Limitamos el ancho del libro de texto para que no se vea gigante */
#flipbook-autonomia {
     max-width: 450px;
     /* Coincide con el ancho de tu JS */
     margin: 0 auto;
     background: #fff;
}

#flipbook-autonomia .page-content {
     padding: 2rem !important;
     font-size: 0.95rem;
     /* Letra un poquito más pequeña para que quepa más texto */
}

/* En móviles, dejamos que use todo el ancho posible */
@media (max-width: 768px) {
     #flipbook-autonomia {
          max-width: 90% !important;
     }
}

/* Libro 4 embarazo */
#flipbook-embarazo-eleccion .page-content,
#flipbook-autonomia .page-content {
     font-size: 0.85rem;
     line-height: 1.4;
     overflow-y: hidden;
     /* Evita que salgan barras de scroll si el texto cabe justo */
}

/* Clase para textos muy pequeños en los casos */
.x-small {
     font-size: 0.75rem;
}

#flipbook-embarazo-eleccion h4 {
     font-size: 1.1rem;
     font-weight: 700;
}


/* POSTCAD AUTOESTIMA  */

section {
     height: auto !important;
     /* Permite que el fondo crezca con el texto */
     min-height: auto !important;
     padding: 60px 0;
     overflow: hidden;
}

/* AJUSTE DE IMÁGENES */
.img-fluid {
     max-width: 100%;
     height: auto !important;
     /* Mantiene la proporción */
}

/* CONTENEDOR MULTIMEDIA (VIDEO/AUDIO) */
.ratio-16x9 {
     position: relative;
     width: 100%;
     /* Evita que el video se haga gigante en pantallas grandes */
     max-width: 600px;
     margin: 0 auto;
}

/* AJUSTE PARA MÓVILES (Pantallas tipo S20) */
@media (max-width: 768px) {
     .container {
          padding-left: 20px !important;
          padding-right: 20px !important;
     }

     /* Centrar textos de las secciones */
     .lead {
          font-size: 1.1rem !important;
          text-align: center !important;
     }

     /* El juego del ahorcado en móvil */
     #letras {
          display: flex;
          flex-wrap: wrap;
          justify-content: center;
          gap: 5px;
          margin-top: 20px;
     }

     #letras button {
          padding: 5px 10px;
          font-size: 0.9rem;
     }

     /* Quitar márgenes laterales exagerados en la tarjeta final */
     .px-5 {
          padding-left: 15px !important;
          padding-right: 15px !important;
     }
}


/* METODOS ANTICONCEPTIVOS */
/* Corrección para el botón "Siguiente Pregunta" y similares */
#quiz-container .btn,
#quiz-container .btn-lg {
     height: auto !important;
     /* Permite que el botón crezca con el texto */
     min-height: 44px;
     /* Altura mínima ergonómica para móviles */
     white-space: normal !important;
     /* Obliga al texto a saltar de línea si no cabe */
     word-wrap: break-word;
     /* Rompe palabras si es necesario */
     padding: 10px 15px !important;
     /* Espacio interno equilibrado */
     display: inline-flex !important;
     align-items: center;
     justify-content: center;
     line-height: 1.2 !important;
     /* Ajusta el espacio entre líneas de texto */
     text-transform: uppercase;
     /* Mantiene el estilo de la imagen */
}

/* Ajuste específico para que los botones de Mito/Realidad no se vean como "RE" y "MI" */
#quiz-container .d-sm-flex .btn-lg {
     flex: 1 1 auto;
     /* Permite que los botones compartan el ancho */
     max-width: 180px;
     /* Evita que se estiren demasiado en PC */
}

@media (max-width: 576px) {
     #quiz-container .btn-lg {
          font-size: 0.85rem !important;
          /* Reduce un poco la fuente en pantallas pequeñas */
          width: 100%;
          /* En móviles muy pequeños se apilan si es necesario */
     }
}


/* PREVENCION EMBARAZO */
#simulador-card {
     transition: all 0.3s ease;
     min-height: 350px;
}

#simulador-card:hover {
     transform: translateY(-5px);
}

#mensaje-resultado h4 {
     font-weight: bold;
}

/* Ajuste para que los botones largos del simulador no se desborden en el S20 */
#opciones-container button {
     white-space: normal !important;
     height: auto !important;
     padding: 15px !important;
     font-size: 1rem;
     line-height: 1.2;
}

@media (max-width: 576px) {
     #opciones-container {
          flex-direction: column !important;
          /* En móvil uno sobre otro para mejor lectura */
     }
}


/* INFECCIONES ITS */
/* Estilo circular de los botones del semáforo */
/* Asegura que las imágenes tengan el mismo tamaño y no se estiren */
.object-fit-cover {
     object-fit: cover;
}

.card.h-100 {
     transition: transform 0.3s ease, shadow 0.3s ease;
     border-radius: 15px;
}

.card.h-100:hover {
     transform: translateY(-10px);
     box-shadow: 0 15px 30px rgba(0, 0, 0, 0.1) !important;
}

/* Ajuste para que los iconos de Bootstrap se vean bien */
.bi-x-circle-fill,
.bi-check-circle-fill {
     vertical-align: middle;
     margin-right: 5px;
}

@media (max-width: 768px) {
     .card-body {
          padding: 1.5rem !important;
     }
}

/* Ajuste para el botón final */
.btn-experto {
     font-size: 0.9rem !important;
     letter-spacing: 1px;
     font-weight: bold;
     height: auto !important;
     /* Permite que el botón crezca si el texto es largo */
     white-space: normal !important;
     /* Evita que el texto se salga del botón */
     line-height: 1.2;
     border-width: 2px;
     transition: all 0.3s ease;
}

.btn-experto:hover {
     background-color: white !important;
     color: #212529 !important;
     transform: scale(1.05);
}

@media (max-width: 768px) {
     .btn-experto {
          width: 100% !important;
          /* En móvil ocupa todo el ancho disponible */
          margin-top: 10px;
     }
}

/* Asegura que la imagen llene su columna sin deformarse */
.object-fit-cover {
     object-fit: cover;
     object-position: center;
}

/* Ajuste de altura para que el carrusel no 'salte' al cambiar de texto */
#infoCarousel .carousel-item {
     min-height: 180px;
}

/* En móviles, añadimos una imagen pequeña arriba o solo dejamos el carrusel */
@media (max-width: 767px) {
     #infoCarousel .carousel-item {
          min-height: auto;
          text-align: center;
          /* Centramos el texto en móviles */
     }

     .carousel-indicators {
          justify-content: center !important;
     }
}

/* Fuerza a la imagen a cubrir todo el contenedor de la columna */
.img-full-height {
     width: 100%;
     height: 100%;
     min-height: 350px;
     /* Asegura un buen tamaño en tablets */
     object-fit: cover;
     /* Recorta la imagen para llenar el espacio sin estirarse */
     display: block;
}

/* Asegura que la fila de Bootstrap permita que las columnas tengan la misma altura */
.row.align-items-stretch {
     display: flex;
     flex-wrap: wrap;
}

/* En móviles, si decides mostrar la imagen, puedes ajustar la altura */
@media (max-width: 767px) {
     .img-full-height {
          height: 250px;
     }
}

.pdf-container {
     background-color: #525659;
     /* Color de fondo típico de visores PDF */
     display: flex;
     flex-direction: column;
}

/* Ajuste para que en móviles el PDF tenga una altura adecuada */
@media (max-width: 767px) {
     .pdf-container iframe {
          height: 400px;
          /* Altura más corta para celulares */
     }
}

/* En pantallas grandes, forzamos a que el PDF use todo el alto de la columna de texto */
@media (min-width: 768px) {
     .pdf-container iframe {
          height: 100%;
          min-height: 500px;
     }
}


/* RESPETO Y CONCENTIMIENTO */
.btn-concept {
     cursor: pointer;
     transition: all 0.3s ease;
     border: 2px solid transparent !important;
}

/* Cuando el usuario selecciona el concepto */
.selected {
     background-color: #0d6efd !important;
     color: white !important;
     transform: scale(1.05);
     border-color: #0044cc !important;
}

/* Cuando ya está emparejado correctamente */
.matched {
     background-color: #d1e7dd !important;
     color: #0f5132 !important;
     border-color: #198754 !important;
     cursor: default;
     pointer-events: none;
     /* Bloquea el clic */
}

.drop-zone {
     cursor: pointer;
     min-height: 70px;
     display: flex;
     align-items: center;
     justify-content: center;
     transition: background 0.3s;
}

/* Animación de destello para el acierto */
@keyframes flash-success {
     0% {
          background-color: #ffffff;
          box-shadow: 0 0 0px #198754;
     }

     50% {
          background-color: #d1e7dd;
          box-shadow: 0 0 20px #198754;
          transform: scale(1.02);
     }

     100% {
          background-color: #d1e7dd;
          box-shadow: 0 0 0px #198754;
          transform: scale(1);
     }
}

/* Efecto de destello verde para el acierto */
@keyframes glow-success {
     0% {
          box-shadow: 0 0 0px #198754;
          transform: scale(1);
     }

     50% {
          box-shadow: 0 0 20px #198754;
          transform: scale(1.03);
          background-color: #d1e7dd !important;
     }

     100% {
          box-shadow: 0 0 5px #198754;
          transform: scale(1);
          background-color: #d1e7dd !important;
     }
}

.flash-acierto {
     animation: glow-success 0.7s ease-in-out forwards;
     border-color: #198754 !important;
     color: #0f5132 !important;
     pointer-events: none;
     /* Evita que se vuelva a clickear */
}

/* Estado final del concepto seleccionado (opcional) */
.matched-concept {
     background-color: #d1e7dd !important;
     color: #0f5132 !important;
     border-color: #198754 !important;
     opacity: 0.8;
}

.transition-all {
     transition: all 0.5s ease;
}

/* Clases dinámicas que aplicará JS */
.bg-correct {
     background-color: #198754 !important;
     /* Verde éxito */
     box-shadow: inset 0 0 50px rgba(0, 0, 0, 0.2);
}

.bg-wrong {
     background-color: #dc3545 !important;
     /* Rojo error */
}

/* Animación de pulso para el icono al acertar */
@keyframes pulse-icon {
     0% {
          transform: scale(1);
     }

     50% {
          transform: scale(1.3);
     }

     100% {
          transform: scale(1);
     }
}

.animate-icon {
     animation: pulse-icon 0.5s ease;
}


/* DIVERSIDAD SEXUAL */
/* Estilos para el Rompecabezas */
.puzzle-piece {
     width: 100px;
     height: 100px;
     background-size: 300px 300px;
     /* Tamaño total de la imagen original */
     cursor: pointer;
     transition: all 0.2s ease;
}

.puzzle-piece:hover {
     filter: brightness(1.1);
}

/* Estilos para Salto de Puntos */
.dot {
     width: 80px;
     height: 80px;
     border-radius: 50%;
     color: white;
     display: flex;
     align-items: center;
     justify-content: center;
     font-size: 0.8rem;
     font-weight: bold;
     cursor: pointer;
     z-index: 2;
     transition: all 0.3s;
}

.dot:hover {
     transform: scale(1.1);
     box-shadow: 0 0 15px rgba(0, 0, 0, 0.2);
}

/* Animación de entrada para el mensaje */
@keyframes entradaMensaje {
     from {
          opacity: 0;
          transform: translateY(30px);
     }

     to {
          opacity: 1;
          transform: translateY(0);
     }
}

.mensaje-exito {
     background-color: #d1e7dd;
     color: #0f5132;
     border: 1px solid #badbcc;
     padding: 25px;
     border-radius: 20px;
     display: inline-block;
     animation: slideUp 0.5s ease-out;
}

@keyframes slideUp {
     from {
          opacity: 0;
          transform: translateY(20px);
     }

     to {
          opacity: 1;
          transform: translateY(0);
     }
}

/* SOPA DE LETRAS */

.bg-gradient-success-light {
     background: linear-gradient(180deg, #f8fff9 0%, #ffffff 100%);
}

.animate__animated {
     animation-duration: 0.6s;
}

#sopa-grid .selected {
     background-color: #198754 !important;
     color: white !important;
     font-weight: bold;
     border-radius: 4px;
}

/* Efecto para cuando se tacha una palabra de la lista lateral */
.word-found {
     text-decoration: line-through;
     color: #198754;
     font-weight: bold;
     opacity: 0.7;
}




/* CONECTAND CONCEPTOS */
.dot {
     width: 100px;
     height: 100px;
     border-radius: 50%;
     display: flex;
     align-items: center;
     justify-content: center;
     color: white;
     cursor: pointer;
     z-index: 10;
     transition: all 0.3s ease;
     font-size: 0.8rem;
     padding: 10px;
     border: 3px solid transparent;
}

/* Punto seleccionado */
.active-dot {
     border-color: gold !important;
     transform: scale(1.1);
     box-shadow: 0 0 15px rgba(255, 215, 0, 0.5);
}

/* Punto ya conectado */
.matched {
     cursor: default;
     pointer-events: none;
     border-color: white !important;
}

.animate__bounceIn {
     animation: bounceIn 0.8s;
}

@keyframes bounceIn {
     0% {
          transform: scale(0.3);
          opacity: 0;
     }

     50% {
          transform: scale(1.05);
          opacity: 1;
     }

     70% {
          transform: scale(0.9);
     }

     100% {
          transform: scale(1);
     }
}

/* Embarazo no Planeado */
.seccion-opciones {
     font-family: var(--font-cuerpo); /* Inter para contenido de secciones */
     padding: 40px 20px;
     background-color: #f9f9f9;
     color: #333;
}

.contenedor {
     max-width: 1000px;
     margin: 0 auto;
}

.hero-contenido {
     display: flex;
     align-items: center;
     gap: 30px;
     margin-bottom: 40px;
     flex-wrap: wrap;
}

.texto-principal {
     flex: 1;
     min-width: 300px;
}

.texto-principal h1 {
     color: #2c3e50;
     font-size: 2rem;
     margin-bottom: 10px;
}

.subtitulo {
     font-size: 1.2rem;
     color: #3498db;
     font-weight: bold;
     margin-bottom: 15px;
}

.imagen-alusiva {
     flex: 1;
     min-width: 300px;
     text-align: center;
}

.imagen-alusiva img {
     max-width: 100%;
     border-radius: 15px;
     box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
}

.tarjetas-grid {
     display: flex;
     gap: 20px;
     flex-wrap: wrap;
}

.tarjeta {
     flex: 1;
     min-width: 300px;
     padding: 25px;
     border-radius: 12px;
     background: white;
     box-shadow: 0 4px 6px rgba(0, 0, 0, 0.05);
     border-top: 5px solid;
}

.opcion-continuar {
     border-top-color: #2ecc71;
}

.opcion-ive {
     border-top-color: #9b59b6;
}

.tarjeta h2 {
     font-size: 1.4rem;
     margin-bottom: 15px;
}

.tarjeta ul {
     padding-left: 20px;
}

.tarjeta li {
     margin-bottom: 12px;
     line-height: 1.5;
}

.nota-importante {
     margin-top: 30px;
     padding: 20px;
     background-color: #e8f4fd;
     border-left: 5px solid #3498db;
     border-radius: 5px;
}

/* Ayuda en Tumaco */
/* Ajustes específicos para que las imágenes luzcan bien */
.icono-card {
     width: 80px;
     /* Tamaño fijo para el contenedor del icono */
     height: 80px;
     margin: 0 auto 15px auto;
     display: flex;
     align-items: center;
     justify-content: center;
}

.icono-card img {
     max-width: 100%;
     /* La imagen no se sale del círculo */
     max-height: 100%;
     object-fit: contain;
     /* Mantiene la proporción de tus logos */
}

/* Estilos de estructura general */
.seccion-ayuda {
     font-family: var(--font-cuerpo);
     padding: 50px 20px;
     background: #fff;
}

.contenedor {
     max-width: 1100px;
     margin: 0 auto;
}

.encabezado-ayuda {
     text-align: center;
     margin-bottom: 30px;
}

.alerta-riesgo {
     display: flex;
     align-items: center;
     gap: 15px;
     background: #fff5f5;
     border: 1px solid #feb2b2;
     padding: 15px;
     border-radius: 10px;
     margin-bottom: 35px;
}

.grid-contactos {
     display: flex;
     flex-wrap: wrap;
     justify-content: center;
     gap: 20px;
}

.card-contacto {
     flex: 1 1 280px;
     max-width: 380px;
     padding: 25px;
     border-radius: 15px;
     background: #f8f9fa;
     text-align: center;
     border-bottom: 5px solid #ccc;
     transition: 0.3s;
}

.hdn {
     border-bottom-color: #e74c3c;
}

.siapa {
     border-bottom-color: #27ae60;
}

.lineas {
     border-bottom-color: #3498db;
}

.ubicacion,
.tag-especial {
     font-size: 0.85rem;
     color: #666;
     font-weight: bold;
     margin-top: 10px;
     display: block;
}

.btn-info {
     margin-top: 15px;
     padding: 10px 20px;
     border: none;
     border-radius: 5px;
     background: #3498db;
     color: white;
     cursor: pointer;
}

/* Estilos contenedor PDF */
/* Eliminamos márgenes del body para que llegue a los bordes si es necesario */
.visor-pdf-max {
     width: 100%;
     margin: 0;
     padding: 0;
     background: #333;
     /* Fondo oscuro tipo lector profesional */
}

.barra-titulo {
     background: #2c3e50;
     color: white;
     padding: 10px 20px;
     display: flex;
     justify-content: space-between;
     align-items: center;
     font-family: var(--font-cuerpo);
}

.btn-mini {
     background: #27ae60;
     color: white;
     padding: 5px 12px;
     text-decoration: none;
     border-radius: 4px;
     font-size: 0.8rem;
}

/* En móviles, ajustamos el alto para que no se pierda el control */
@media (max-width: 768px) {
     iframe {
          height: 70vh;
     }
}



/* Un tono rosado suave muy fresco */
body {
     font-family: var(--font-cuerpo); /* Reemplazado de Poppins a Inter (sistema de diseño EduTumaco) */
     background-color: #f8fafc;
}

.card-foda {
     border: none;
     border-radius: 15px;
     transition: transform 0.3s;
}

.card-foda:hover {
     transform: translateY(-5px);
}

.foda-header {
     color: white;
     border-radius: 12px 12px 0 0;
     padding: 10px;
     font-weight: bold;
     text-align: center;
}

.bg-fortalezas {
     background-color: #22c55e;
}

.bg-oportunidades {
     background-color: #3b82f6;
}

.bg-debilidades {
     background-color: #f59e0b;
}

.bg-amenazas {
     background-color: #ef4444;
}

textarea.form-control {
     border-radius: 0 0 12px 12px;
     border: 1px solid #e2e8f0;
     resize: none;
}

.btn-descarga {
     background: linear-gradient(135deg, #6366f1 0%, #a855f7 100%);
     border: none;
     padding: 15px 40px;
     font-weight: bold;
}

/* CAMBIOS PUBERTAD */
.seccion-informativa {
     background-color: #ffffff;
     overflow: hidden;
}

.contenedor-imagen {
     transition: transform 0.4s ease;
     border: 8px solid #f8f9fa;
}

.contenedor-imagen:hover {
     transform: scale(1.02);
     /* Efecto de zoom suave al pasar el mouse */
}

.text-content h1 {
     line-height: 1.2;
}

/* En celulares, la imagen siempre irá arriba del texto automáticamente */
@media (max-width: 991px) {
     .text-content {
          text-align: center;
          padding-top: 20px;
     }
}

/* Proyecto vida DOFA */
.bg-light-success {
     background-color: #f0fff4;
}

.bg-light-info {
     background-color: #ebf8ff;
}

.bg-light-warning {
     background-color: #fffaf0;
}

.bg-light-danger {
     background-color: #fff5f5;
}

.card {
     transition: transform 0.2s ease;
}

.card:hover {
     transform: scale(1.02);
}

textarea.form-control:focus {
     box-shadow: none;
     border-width: 2px;
}

/* Imagen proyecto vida */
.img-polaroid {
     transition: transform 0.3s ease;
}

.img-polaroid:hover {
     transform: rotate(0deg) scale(1.05) !important;
}

/* Estilo para las tarjetas interactivas */
/* Contenedor flexible para igualar alturas */
.card-dot {
     display: flex;
     align-items: center;
     justify-content: center;
     padding: 15px 20px;
     color: white;
     border-radius: 12px;
     cursor: pointer;
     transition: all 0.3s ease;
     box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);

     /* Esto hace que todas ocupen el mismo espacio vertical proporcional */
     flex-grow: 1;
     min-height: 80px;
     margin: 5px 0;
}

.concept {
     font-weight: bold;
     max-width: 250px;
     margin-left: auto;
     /* Alinea los conceptos hacia el centro del juego */
}

.definition {
     text-align: left;
     font-size: 0.9rem;
}

/* Animación de selección */
.card-dot.selected {
     transform: scale(1.05);
     box-shadow: 0 0 15px rgba(255, 215, 0, 0.7);
     border: 2px solid gold;
}

/* Clase para cuando ya están unidas */
.matched {
     cursor: default;
     opacity: 0.8;
     filter: grayscale(0.2);
}

/* Escencial en proyecto vida */
.custom-matriz thead th {
     font-size: 0.9rem;
     background-color: rgba(255, 255, 255, 0.2);
     padding: 15px 5px;
}

.input-matriz {
     background-color: rgba(255, 255, 255, 0.5);
     border: 2px dashed #ffffff;
     border-radius: 10px;
     color: #333;
     font-size: 0.85rem;
     resize: none;
     height: 60px;
     transition: all 0.3s ease;
}

.input-matriz:focus {
     background-color: #ffffff;
     border: 2px solid #6fb98f;
     box-shadow: none;
}

/* Estilo de la tabla para el PNG */
.custom-matriz td {
     border-top: 1px dotted #ffffff !important;
     padding: 10px 5px;
}

/* videos */

.video-card {
     border-radius: 8px;
     overflow: hidden;
     transition: transform 0.3s;
}

.video-card:hover {
     transform: translateY(-5px);
}

.video-card img {
     height: 160px;
     /* Ajusta la altura de la imagen */
     object-fit: cover;
}

.card-title {
     font-size: 1rem;
     line-height: 1.2;
}

/* Estilo para los botones al estilo de la imagen */
.btn-secondary {
     background-color: #6c757d;
     border: none;
}

/* Secciones información cruzada */
/* Efecto de elevación para las secciones */
section.container {
     transition: transform 0.3s ease, box-shadow 0.3s ease;
}

section.container:hover {
     transform: translateY(-5px);
     box-shadow: 0 1rem 3rem rgba(0, 0, 0, .1) !important;
}

/* Zoom suave en las imágenes al pasar el ratón */
.hover-zoom {
     transition: transform 0.5s ease;
}

.hover-zoom:hover {
     transform: scale(1.05);
}

/* Ajuste de texto lead para pantallas pequeñas */
.lead {
     font-size: 1.15rem;
     line-height: 1.6;
}

/* Forzar que las imágenes ocupen todo el espacio sin deformarse */
.object-fit-cover {
     object-fit: cover;
}

/*Cards de informacion*/
/* Alineación de texto */
.text-justify {
     text-align: justify;
}

/* Contenedor de la imagen: Forzamos el centrado vertical y horizontal */
.bg-light-section {
     background-color: #fdfdfd;
     /* Un gris casi blanco para resaltar la imagen */
     min-height: 400px;
     /* Asegura que tengan una altura consistente */
}

.img-container {
     padding: 30px;
     display: flex;
     align-items: center;
     justify-content: center;
     width: 100%;
     height: 100%;
}

/* Tamaño controlado para todas las imágenes */
.custom-img {
     max-height: 320px;
     /* Evita que las tablas se vean gigantes */
     width: auto;
     object-fit: contain;
     border-radius: 12px;
     transition: transform 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

/* Efectos visuales */
.hover-zoom:hover {
     transform: scale(1.08);
}

.shadow-hover {
     transition: all 0.3s ease;
}

.shadow-hover:hover {
     box-shadow: 0 1rem 3rem rgba(0, 0, 0, 0.15) !important;
     transform: translateY(-3px);
}

/* Ajustes para móviles */
@media (max-width: 767.98px) {
     .bg-light-section {
          min-height: auto;
     }

     .custom-img {
          max-height: 250px;
          margin: 20px 0;
     }

     .text-md-end {
          text-align: left !important;
     }
}

/* Tarjetas arrastrables (Ambas secciones) */
.draggable,
.draggable-repro {
     cursor: grab;
     transition: all 0.3s ease;
     border: 2px solid #f0f0f0;
     max-width: 450px;
     background-color: white;
     user-select: none;
     z-index: 10;
}

.draggable:hover,
.draggable-repro:hover {
     border-color: #0d6efd;
     transform: translateY(-2px);
     box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}

/* Estado mientras se arrastra */
.dragging,
.dragging-repro {
     opacity: 0.5;
     cursor: grabbing;
}

/* Estilo de las zonas de soltar (Ajustadas al texto) */
.dropzone,
.dropzone-repro {
     display: inline-flex;
     min-width: 280px;
     justify-content: center;
     align-items: center;
     background-color: #fafafa;
     border: 2px dashed #ccc;
     color: #555;
     transition: all 0.3s ease;
     font-size: 1.1rem;
     font-weight: 600;
     padding: 12px 25px;
     min-height: 60px;
}

/* Efecto visual al pasar por encima */
.dropzone.dragover,
.dropzone-repro.dragover {
     background-color: #e3f2fd;
     border-color: #0d6efd;
     color: #0d6efd;
     transform: scale(1.05);
}

/* Efecto de respuesta correcta (Verde y Animación) */
.dropzone.correct,
.dropzone-repro.correct {
     background-color: #d1e7dd !important;
     border-color: #198754 !important;
     color: #0f5132 !important;
     border-style: solid;
     animation: pulse-success 0.5s ease-in-out;
}

@keyframes pulse-success {
     0% {
          transform: scale(1);
     }

     50% {
          transform: scale(1.1);
     }

     100% {
          transform: scale(1);
     }
}

/* prueba de Arduino +/
/* Paleta de colores basada en la ilustración */
:root {
     --arduino-teal: #00979D;
     --arduino-orange: #E47128;
     --arduino-purple: #584D9E;
     --bg-black: #000000;
     --text-white: #ffffff;
}

body {
     font-family: var(--font-cuerpo);
     margin: 0;
     padding: 0;
     background-color: var(--bg-black);
     color: var(--text-white);
     display: flex;
     flex-direction: column;
     align-items: center;
     min-height: 100vh;
}

/* Encabezado con estilo de ilustración */
.hero {
     text-align: center;
     padding: 80px 20px 40px;
     background-image: url('https://blog.arduino.cc/wp-content/uploads/2021/03/ARD_Day_Logo_2021_Black-1.png');
     background-size: 300px;
     background-repeat: no-repeat;
     background-position: center top 20px;
     width: 100%;
}

h1 {
     font-size: 3.5rem;
     margin: 0;
     color: var(--arduino-teal);
     text-transform: uppercase;
     letter-spacing: 4px;
     text-shadow: 0 0 20px rgba(0, 151, 157, 0.5);
}

.tagline {
     font-size: 1.2rem;
     margin-top: 15px;
     color: var(--arduino-orange);
     font-weight: 300;
}

/* Contenedor de los cuadros de información */
.info-section {
     display: flex;
     justify-content: center;
     flex-wrap: wrap;
     gap: 40px;
     width: 90%;
     max-width: 1100px;
     margin: 50px 0;
}

.card {
     flex: 1;
     min-width: 280px;
     padding: 30px;
     position: relative;
}

/* Estilo específico del cuadro con borde (Fecha de inicio) */
.card.bordered {
     border: 2px solid var(--text-white);
}

/* Tipografía cursiva para los títulos como en tu imagen */
.card h3 {
     font-family: var(--font-principal); /* Nunito reemplaza a Georgia para consistencia */
     font-style: italic;
     font-weight: normal;
     font-size: 1.6rem;
     margin: 0 0 20px 0;
     color: var(--text-white);
}

.card .big-date {
     font-size: 2.5rem;
     font-weight: 800;
     display: block;
     margin-bottom: 10px;
}

.card .time {
     font-size: 1.3rem;
     display: flex;
     align-items: center;
     gap: 10px;
     color: #cccccc;
}

/* Icono de reloj minimalista */
.card .time::before {
     content: '🕒';
     font-size: 1.1rem;
}

/* Estilo para el cuadro de Lugar */
.location-content {
     line-height: 1.8;
     font-size: 1.1rem;
}

.location-content b {
     font-size: 1.3rem;
     color: var(--text-white);
}

.university {
     color: var(--arduino-teal);
     font-weight: bold;
}

/* Decoración de circuitos (basado en la imagen) */
.circuit-decoration {
     position: fixed;
     width: 100%;
     height: 100%;
     top: 0;
     left: 0;
     z-index: -1;
     opacity: 0.15;
     background-image: url('https://www.transparenttextures.com/patterns/p6.png');
     /* Textura sutil */
}

@media (max-width: 768px) {
     h1 {
          font-size: 2.2rem;
     }

     .info-section {
          flex-direction: column;
          align-items: center;
     }

     .card {
          width: 100%;
          text-align: center;
     }
}


/* PDF Planificación*/
.pdf-viewer-container {
     transition: transform 0.3s ease;
     border: 1px solid rgba(0, 0, 0, 0.05);
}

/* Efecto sutil al pasar el mouse sobre la sección */
.pdf-viewer-container:hover {
     box-shadow: 0 1rem 3rem rgba(0, 0, 0, 0.175) !important;
}

/* Ajuste para que en móviles el PDF no sea tan alto */
@media (max-width: 768px) {
     .pdf-viewer-container {
          height: 500px !important;
     }
}


/* Proyecto vida "hoja cuaderno" */
.notebook-container {
     border: 1px solid #ddd;
}

/* La hoja de papel con líneas */
.notebook-paper {
     background-color: #fff;
     /* Textura de líneas de cuaderno */
     background-image: linear-gradient(#f1f1f1 1px, transparent 1px);
     background-size: 100% 2.5rem;
     /* Altura de cada renglón */
     position: relative;
}

/* Ajuste del Textarea para que sea transparente y coincida con las líneas */
.notebook-textarea {
     background: transparent !important;
     border: none !important;
     line-height: 2.5rem !important;
     /* Debe coincidir con background-size */
     padding: 0 !important;
     font-family: var(--font-cuerpo);
     font-size: 1.1rem;
     color: #333;
     resize: none;
     /* Evita que el usuario cambie el tamaño manualmente */
}

.notebook-textarea:focus {
     box-shadow: none !important;
}

/* Margen rojo vertical de cuaderno (opcional) */
.notebook-paper::before {
     content: '';
     position: absolute;
     top: 0;
     left: 40px;
     width: 2px;
     height: 100%;
     background-color: rgba(233, 30, 99, 0.2);
     /* Línea rosada del margen */
     z-index: 0;
}

.sticker {
     cursor: grab;
     transition: transform 0.2s;
     z-index: 10;
}

.sticker:active {
     cursor: grabbing;
}

.sticker-in-paper {
     position: absolute;
     cursor: move;
}

/* Estilos del cuaderno previos */
.notebook-container {
     border: 1px solid #ddd;
     min-height: 450px;
}

.notebook-paper {
     background-color: #fff;
     background-image: linear-gradient(#f1f1f1 1px, transparent 1px);
     background-size: 100% 2.5rem;
     min-height: 450px;
}

.notebook-textarea {
     background: transparent !important;
     border: none !important;
     line-height: 2.5rem !important;
     font-size: 1.2rem;
     resize: none;
}

/* Puntos Violencia genero */

.star-icon {
     color: #cbd5e1;
     transition: all 0.3s ease;
     cursor: pointer;
}

.item-constelacion label {
     cursor: pointer;
     transition: all 0.25s ease;
     border: 2px solid rgba(148, 163, 184, 0.15) !important;
     background-color: #f8fafc !important; /* Fondo neutral slate-50 */
}

.item-constelacion label:hover {
     background-color: #f1f5f9 !important; /* Fondo slate-100 en hover */
     border-color: #94a3b8 !important; /* Borde slate-400 */
     transform: translateY(-2px);
}

/* Verde seleccionada (Bandera Saludable) */
.chk-verde:checked + label {
     background-color: #f0fdf4 !important; /* Fondo verde muy claro */
     border-color: #bbf7d0 !important; /* Borde verde suave */
     box-shadow: 0 4px 12px rgba(34, 197, 94, 0.08) !important;
}

.chk-verde:checked + label .star-icon {
     color: #22c55e !important; /* Estrella verde */
     transform: scale(1.2) rotate(15deg);
}

/* Roja seleccionada (Bandera de Peligro) */
.chk-roja:checked + label {
     background-color: #fef2f2 !important; /* Fondo rojo muy claro */
     border-color: #fecaca !important; /* Borde rojo suave */
     box-shadow: 0 4px 12px rgba(239, 68, 68, 0.08) !important;
}

.chk-roja:checked + label .star-icon {
     color: #ef4444 !important; /* Estrella roja */
     transform: scale(1.2) rotate(-15deg);
}

/* Historia en violencia genero */

/* Personalización para que se vea más "Pro" */
.carousel-item img {
     height: 500px;
     /* Ajusta la altura según tus imágenes */
     object-fit: contain;
     /* Para que la imagen no se corte y se vea completa */
     background-color: #1a1a1a;
}

/* Color rosado para los controles del carrusel */
.bg-pink-round {
     background-color: #e91e63;
     border-radius: 50%;
     padding: 20px;
     background-size: 50%;
}

/* Estilo para móviles */
@media (max-width: 768px) {
     .carousel-item img {
          height: 300px;
     }
}

/* ============================================================
   SISTEMA DE COLORES GEN Z 2025 — EduTumaco
   Paleta diseñada para audiencia adolescente (15-19 años)
   Principios: energía, calidez, inclusión, modernidad
   ============================================================ */

:root {
     /* Colores primarios por categoría */
     --edu-purple:      #7C3AED;
     --edu-purple-light:#EDE9FE;
     --edu-pink:        #DB2777; /* Rose oscuro accesible */
     --edu-pink-light:  #FDF2F8;
     --edu-teal:        #0F766E; /* Teal profundo accesible */
     --edu-teal-light:  #ECFEFF;
     --edu-coral:       #EA580C; /* Coral oscuro accesible */
     --edu-coral-light: #FFF7ED;
     --edu-amber:       #B45309; /* Ámbar oscuro accesible */
     --edu-amber-light: #FFFBEB;
     --edu-indigo:      #4F46E5;
     --edu-indigo-light:#EEF2FF;
     --edu-emerald:     #047857; /* Esmeralda oscuro accesible */
     --edu-emerald-light:#ECFDF5;
     --edu-rose:        #BE185D; /* Rose oscuro accesible */
     --edu-rose-light:  #FFF1F2;

     /* Gradientes por color */
     --grad-purple:  linear-gradient(135deg, #7C3AED, #A855F7);
     --grad-pink:    linear-gradient(135deg, #DB2777, #F472B6);
     --grad-teal:    linear-gradient(135deg, #0F766E, #06B6D4);
     --grad-coral:   linear-gradient(135deg, #EA580C, #FB923C);
     --grad-amber:   linear-gradient(135deg, #B45309, #FBBF24);
     --grad-indigo:  linear-gradient(135deg, #4F46E5, #818CF8);
     --grad-emerald: linear-gradient(135deg, #047857, #34D399);
     --grad-rose:    linear-gradient(135deg, #BE185D, #FB7185);
     --grad-hero:    linear-gradient(135deg, #7C3AED 0%, #DB2777 50%, #EA580C 100%);

     /* Background de página */
     --edu-bg-page:   #F8F7FF;
     --edu-bg-cards:  #F3F4F6;

     /* Sombras modernas */
     --shadow-card:   0 4px 24px rgba(0,0,0,0.08);
     --shadow-hover:  0 12px 40px rgba(0,0,0,0.15);
     --shadow-btn:    0 4px 14px rgba(0,0,0,0.2);

     /* Border radius Gen Z */
     --radius-card:   20px;
     --radius-btn:    50px;
     --radius-badge:  50px;
     --radius-icon:   16px;
}

/* Fondo de la página principal */
body {
     background-color: var(--edu-bg-page) !important;
}

/* ============================================================
   HERO BANNER OVERLAY
   ============================================================ */
.banner-sexual {
     position: relative;
}

.banner-overlay-text {
     position: absolute;
     bottom: 30px;
     left: 40px;
     z-index: 10;
     color: white;
}

.badge-hero {
     display: inline-block;
     background: rgba(255,255,255,0.25);
     backdrop-filter: blur(8px);
     -webkit-backdrop-filter: blur(8px);
     border: 1px solid rgba(255,255,255,0.4);
     color: white;
     font-family: var(--font-cuerpo);
     font-size: 0.85rem;
     font-weight: 600;
     padding: 6px 16px;
     border-radius: var(--radius-badge);
     margin-bottom: 12px;
     letter-spacing: 0.5px;
}

.hero-title {
     font-family: var(--font-principal) !important;
     font-size: clamp(2rem, 5vw, 3.5rem) !important;
     font-weight: 900 !important;
     line-height: 1.1;
     color: white;
     text-shadow: 0 2px 20px rgba(0,0,0,0.4);
     margin-bottom: 10px;
}

.hero-gradient-text {
     background: var(--grad-hero);
     -webkit-background-clip: text;
     -webkit-text-fill-color: transparent;
     background-clip: text;
}

.hero-subtitle {
     font-family: var(--font-cuerpo);
     font-size: 1.1rem;
     color: rgba(255,255,255,0.85);
     margin: 0;
}

@media (max-width: 576px) {
     .banner-overlay-text {
          bottom: 16px;
          left: 16px;
          right: 16px;
     }
}

/* ============================================================
   SECTION HEADER — Encabezado de sección de Módulos
   ============================================================ */
.section-header-edu {
     text-align: center;
     padding: 60px 20px 20px;
}

.section-tag {
     display: inline-block;
     background: var(--edu-purple-light);
     color: var(--edu-purple);
     font-family: var(--font-cuerpo);
     font-size: 0.85rem;
     font-weight: 700;
     padding: 6px 18px;
     border-radius: var(--radius-badge);
     margin-bottom: 16px;
     letter-spacing: 0.5px;
     text-transform: uppercase;
}

.section-title-edu {
     font-family: var(--font-principal) !important;
     font-size: clamp(2rem, 5vw, 3rem) !important;
     font-weight: 800 !important;
     color: #111827;
     margin-bottom: 12px;
     line-height: 1.2;
}

.text-gradient-edu {
     background: var(--grad-purple);
     -webkit-background-clip: text;
     -webkit-text-fill-color: transparent;
     background-clip: text;
}

.section-subtitle-edu {
     font-family: var(--font-cuerpo);
     font-size: 1.1rem;
     color: #6B7280;
     max-width: 500px;
     margin: 0 auto;
     line-height: 1.7;
}

/* ============================================================
   EDU CARDS — Tarjetas modernas Gen Z 2025
   ============================================================ */
.edu-cards-grid {
     padding-bottom: 40px !important;
}

/* Card base */
.edu-card {
     background: #ffffff;
     border-radius: var(--radius-card);
     padding: 28px 24px 24px;
     box-shadow: var(--shadow-card);
     border: 1px solid rgba(0,0,0,0.05);
     transition: transform 0.3s ease, box-shadow 0.3s ease;
     height: 100%;
     display: flex;
     flex-direction: column;
     position: relative;
     overflow: hidden;
}

/* Línea de acento superior (colored stripe) */
.edu-card::before {
     content: '';
     position: absolute;
     top: 0; left: 0; right: 0;
     height: 5px;
     border-radius: var(--radius-card) var(--radius-card) 0 0;
}

/* Hover lift effect */
.edu-card:hover {
     transform: translateY(-8px);
     box-shadow: var(--shadow-hover);
}

/* Icono circular */
.edu-card__icon-wrap {
     width: 56px;
     height: 56px;
     border-radius: var(--radius-icon);
     display: flex;
     align-items: center;
     justify-content: center;
     margin-bottom: 16px;
     font-size: 1.6rem;
     flex-shrink: 0;
}

.edu-card__icon {
     line-height: 1;
}

/* Badge de categoría */
.edu-card__badge {
     display: inline-block;
     font-family: var(--font-cuerpo);
     font-size: 0.72rem;
     font-weight: 700;
     padding: 4px 12px;
     border-radius: var(--radius-badge);
     text-transform: uppercase;
     letter-spacing: 0.6px;
     margin-bottom: 12px;
     width: fit-content;
}

/* Título */
.edu-card__title {
     font-family: var(--font-principal) !important;
     font-size: 1.05rem !important;
     font-weight: 700 !important;
     color: #111827;
     margin-bottom: 10px;
     line-height: 1.35;
}

/* Texto cuerpo */
.edu-card__text {
     font-family: var(--font-cuerpo);
     font-size: 0.9rem;
     color: #6B7280;
     line-height: 1.65;
     flex-grow: 1;
     margin-bottom: 20px;
}

/* Botón */
.edu-card__btn {
     display: inline-block;
     font-family: var(--font-cuerpo);
     font-size: 0.88rem;
     font-weight: 700;
     padding: 10px 22px;
     border-radius: var(--radius-btn);
     text-decoration: none;
     color: white !important;
     box-shadow: var(--shadow-btn);
     transition: transform 0.2s ease, box-shadow 0.2s ease, opacity 0.2s ease;
     width: fit-content;
     letter-spacing: 0.3px;
}

.edu-card__btn:hover {
     transform: scale(1.05);
     box-shadow: 0 6px 20px rgba(0,0,0,0.25);
     opacity: 0.95;
     color: white !important;
}

/* ===== VARIANTES DE COLOR POR CATEGORÍA ===== */

/* Purple */
.edu-card--purple::before { background: var(--grad-purple); }
.edu-card__icon-wrap--purple { background: var(--edu-purple-light); }
.edu-card__badge--purple { background: var(--edu-purple-light); color: var(--edu-purple); }
.edu-card__btn--purple { background: var(--grad-purple); }

/* Pink */
.edu-card--pink::before { background: var(--grad-pink); }
.edu-card__icon-wrap--pink { background: var(--edu-pink-light); }
.edu-card__badge--pink { background: var(--edu-pink-light); color: var(--edu-pink); }
.edu-card__btn--pink { background: var(--grad-pink); }

/* Teal */
.edu-card--teal::before { background: var(--grad-teal); }
.edu-card__icon-wrap--teal { background: var(--edu-teal-light); }
.edu-card__badge--teal { background: var(--edu-teal-light); color: var(--edu-teal); }
.edu-card__btn--teal { background: var(--grad-teal); }

/* Coral */
.edu-card--coral::before { background: var(--grad-coral); }
.edu-card__icon-wrap--coral { background: var(--edu-coral-light); }
.edu-card__badge--coral { background: var(--edu-coral-light); color: var(--edu-coral); }
.edu-card__btn--coral { background: var(--grad-coral); }

/* Amber */
.edu-card--amber::before { background: var(--grad-amber); }
.edu-card__icon-wrap--amber { background: var(--edu-amber-light); }
.edu-card__badge--amber { background: var(--edu-amber-light); color: var(--edu-amber); }
.edu-card__btn--amber { background: var(--grad-amber); }

/* Indigo */
.edu-card--indigo::before { background: var(--grad-indigo); }
.edu-card__icon-wrap--indigo { background: var(--edu-indigo-light); }
.edu-card__badge--indigo { background: var(--edu-indigo-light); color: var(--edu-indigo); }
.edu-card__btn--indigo { background: var(--grad-indigo); }

/* Emerald */
.edu-card--emerald::before { background: var(--grad-emerald); }
.edu-card__icon-wrap--emerald { background: var(--edu-emerald-light); }
.edu-card__badge--emerald { background: var(--edu-emerald-light); color: var(--edu-emerald); }
.edu-card__btn--emerald { background: var(--grad-emerald); }

/* Rose */
.edu-card--rose::before { background: var(--grad-rose); }
.edu-card__icon-wrap--rose { background: var(--edu-rose-light); }
.edu-card__badge--rose { background: var(--edu-rose-light); color: var(--edu-rose); }
.edu-card__btn--rose { background: var(--grad-rose); }

/* ===== RESPONSIVE CARDS ===== */
@media (max-width: 576px) {
     .edu-card {
          padding: 22px 18px 20px;
     }
     .edu-card__title {
          font-size: 1rem !important;
     }
}

/* ============================================================
   COMIC CAROUSEL — Mitos y Realidades
   ============================================================ */

.comics-section-header {
    text-align: center;
    margin-bottom: 2rem;
}

.comics-carousel-container {
    position: relative;
    width: 100%;
    margin-bottom: 2.5rem;
    padding: 0 65px; /* Space for arrow navigation */
    max-width: 1050px; /* Centered layout allowing side cards to be visible */
    margin-left: auto;
    margin-right: auto;
    overflow: hidden;
}

.comics-carousel-inner {
    display: flex;
    gap: 24px;
    overflow-x: auto;
    scroll-behavior: smooth;
    scrollbar-width: none; /* Firefox */
    -ms-overflow-style: none;  /* IE and Edge */
    padding: 20px calc(50% - 100px); /* Centrado dinámico para cartas de 200px */
    scroll-snap-type: x mandatory;
}

.comics-carousel-inner::-webkit-scrollbar {
    display: none; /* Chrome, Safari, Opera */
}

.comic-card {
    display: block; /* Show adjacent cards */
    flex: 0 0 200px;
    height: 290px;
    border-radius: 16px;
    overflow: hidden;
    position: relative;
    background-image: url('../img/comic_cover_base.png');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    box-shadow: 0 6px 16px rgba(0,0,0,0.1);
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    cursor: pointer;
    border: 3px solid transparent;
    opacity: 0.45; /* Translucent adjacent cards */
    transform: scale(0.9); /* Smaller adjacent cards */
    scroll-snap-align: center;
}

.comic-card::before {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0; bottom: 0;
    background: linear-gradient(to bottom, rgba(15,15,30,0.1) 0%, rgba(15,15,30,0.4) 50%, rgba(15,15,30,0.95) 100%);
    z-index: 1;
    transition: all 0.3s ease;
}

.comic-card:hover {
    opacity: 0.75;
    transform: translateY(-4px) scale(0.95);
    box-shadow: 0 8px 20px rgba(124, 58, 237, 0.2);
}

.comic-card.active {
    display: block;
    opacity: 1; /* Fully focused active card */
    transform: scale(1.05); /* Spotlight scale */
    border-color: var(--edu-purple);
    box-shadow: 0 12px 30px rgba(124, 58, 237, 0.5);
    z-index: 2;
}

/* Eye icon indicator for active card on hover */
.comic-card.active::after {
    content: "\f33e"; /* bi-eye */
    font-family: "bootstrap-icons" !important;
    position: absolute;
    top: 45%;
    left: 50%;
    transform: translate(-50%, -50%) scale(0.8);
    width: 60px;
    height: 60px;
    background: rgba(124, 58, 237, 0.9);
    color: white;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.8rem;
    opacity: 0;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    z-index: 3;
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.35);
}

.comic-card.active:hover::after {
    opacity: 1;
    transform: translate(-50%, -50%) scale(1);
}

.comic-card.active:hover::before {
    background: linear-gradient(to bottom, rgba(15,15,30,0.4) 0%, rgba(15,15,30,0.65) 50%, rgba(15,15,30,0.98) 100%);
}

.comic-card-badge {
    position: absolute;
    top: 12px;
    left: 12px;
    z-index: 2;
    background: var(--grad-purple);
    color: white;
    font-size: 0.7rem;
    font-weight: 800;
    padding: 3px 9px;
    border-radius: 50px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.25);
}

.comic-card-content {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    padding: 14px;
    z-index: 2;
    color: white;
}

.comic-card-title {
    font-family: var(--font-principal);
    font-weight: 800;
    font-size: 0.95rem;
    margin: 0;
    line-height: 1.2;
    text-shadow: 0 2px 4px rgba(0,0,0,0.6);
}

.carousel-nav-btn {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.9);
    border: 1px solid rgba(124, 58, 237, 0.25);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    z-index: 10;
    box-shadow: 0 4px 12px rgba(0,0,0,0.1);
    transition: all 0.2s ease;
    color: var(--edu-purple);
    font-size: 1.2rem;
}

.carousel-nav-btn:hover {
    background: var(--edu-purple);
    color: white;
    transform: translateY(-50%) scale(1.1);
    box-shadow: 0 6px 16px rgba(124, 58, 237, 0.35);
}

.carousel-nav-btn.prev {
    left: 5px;
}

.carousel-nav-btn.next {
    right: 5px;
}

/* Active Reader Container */
.active-comic-reader {
    background: #ffffff;
    border-radius: 20px;
    box-shadow: var(--shadow-card);
    border: 1px solid rgba(124, 58, 237, 0.15);
    overflow: hidden;
    transition: all 0.4s ease;
}

.pdf-wrapper {
    background-color: #525659;
    position: relative;
}

/* Mobile responsive adjustments */
@media (max-width: 768px) {
    .comics-carousel-container {
        padding: 0 50px;
        max-width: 100%;
    }
    .comics-carousel-inner {
        padding: 20px calc(50% - 82.5px); /* Centrado dinámico para cartas de 165px en móvil */
    }
    .carousel-nav-btn {
        display: flex;
        width: 36px;
        height: 36px;
        font-size: 1rem;
    }
    .comic-card {
        flex: 0 0 165px;
        height: 240px;
    }
    .comic-card-title {
        font-size: 0.82rem;
    }
    .pdf-wrapper iframe {
        height: 500px !important;
    }
}

/* ============================================================
   BLOG-STYLE MODAL — Mitos y Realidades
   ============================================================ */
.modal-blog-sidebar {
    background-color: #ffffff;
    height: 100%;
    max-height: 80vh;
    overflow-y: auto;
}

@media (max-width: 991.98px) {
    .modal-blog-sidebar {
        max-height: none;
        overflow-y: visible;
        border-bottom: 1px solid rgba(0,0,0,0.1);
    }
    .modal-body .bg-dark {
        height: 60vh !important;
    }
}

/* ============================================================
   BADGE INDICATOR FOR FLIPBOOKS — EduTumaco
   ============================================================ */
.edu-book-indicator {
     display: flex;
     justify-content: center;
     align-items: center;
     margin-bottom: 24px;
     margin-top: 16px;
}

.badge-flip-instruction {
     display: inline-flex;
     align-items: center;
     gap: 10px;
     background: rgba(124, 58, 237, 0.08);
     border: 1px solid rgba(124, 58, 237, 0.25);
     padding: 8px 18px;
     border-radius: 50px;
     font-family: var(--font-cuerpo);
     font-weight: 700;
     font-size: 0.88rem;
     color: #7C3AED;
     box-shadow: 0 4px 15px rgba(124, 58, 237, 0.1);
     animation: pulseInstruction 2s infinite ease-in-out;
     user-select: none;
}

.mini-logo-indicator {
     width: 20px;
     height: 20px;
     object-fit: contain;
}

@keyframes pulseInstruction {
     0% {
          transform: scale(1);
          box-shadow: 0 4px 15px rgba(124, 58, 237, 0.1);
     }
     50% {
          transform: scale(1.03);
          box-shadow: 0 6px 20px rgba(124, 58, 237, 0.2);
     }
     100% {
          transform: scale(1);
          box-shadow: 0 4px 15px rgba(124, 58, 237, 0.1);
     }
}

/* ============================================================
   GLOBAL PATTERNED TRANSLUCENT BACKGROUND — EduTumaco
   ============================================================ */
html {
     background-color: var(--edu-bg-page) !important;
}

body {
     background-color: transparent !important;
}

body::before {
     content: "";
     position: fixed;
     top: 0;
     left: 0;
     width: 100%;
     height: 100%;
     background-image: url('../img/fondo_tumaco.jpg');
     background-repeat: repeat;
     background-size: 450px auto; /* Escala del patrón para que se vea sutil y detallado */
     opacity: 0.07; /* Nivel óptimo de translucidez (7%) para no competir con el texto */
     z-index: -9999;
     pointer-events: none;
}

/* ============================================================
   SECCIÓN NUESTRO GRUPO DE TRABAJO — EduTumaco
   ============================================================ */
.edu-team-section {
     padding: 80px 0 60px;
     position: relative;
     background: linear-gradient(180deg, rgba(248, 247, 255, 0) 0%, rgba(237, 233, 254, 0.45) 100%);
}

.edu-team-section__title {
     font-family: var(--font-principal);
     font-weight: 800;
     font-size: clamp(2rem, 5vw, 2.6rem);
     color: #1F2937;
     margin-bottom: 15px;
     letter-spacing: -0.5px;
}

.edu-team-section__title-accent {
     background: var(--grad-purple);
     -webkit-background-clip: text;
     -webkit-text-fill-color: transparent;
     background-clip: text;
}

.edu-team-section__subtitle {
     font-family: var(--font-cuerpo);
     font-size: 1.05rem;
     color: #4B5563;
     max-width: 750px;
     margin: 0 auto;
     line-height: 1.7;
}

.edu-team-card {
     background: #ffffff;
     border-radius: var(--radius-card);
     padding: 40px 28px 32px;
     box-shadow: 0 10px 30px rgba(124, 58, 237, 0.04);
     border: 1px solid rgba(124, 58, 237, 0.08);
     text-align: center;
     transition: transform 0.4s cubic-bezier(0.165, 0.84, 0.44, 1), box-shadow 0.4s ease, border-color 0.4s ease;
     position: relative;
}

.edu-team-card:hover {
     transform: translateY(-8px);
     box-shadow: 0 20px 40px rgba(124, 58, 237, 0.12);
     border-color: rgba(124, 58, 237, 0.25);
}

.edu-team-card__img-wrap {
     width: 140px;
     height: 140px;
     border-radius: 50%;
     margin: 0 auto 24px;
     padding: 4px;
     background: linear-gradient(135deg, #7C3AED, #EC4899);
     box-shadow: 0 8px 20px rgba(124, 58, 237, 0.15);
     position: relative;
}

.edu-team-card__img {
     width: 100%;
     height: 100%;
     object-fit: cover;
     border-radius: 50%;
     background-color: #ffffff;
     display: block;
}

.edu-team-card__name {
     font-family: var(--font-principal);
     font-weight: 700;
     font-size: 1.25rem;
     color: #111827;
     margin-bottom: 10px;
     line-height: 1.3;
}

.edu-team-card__badge {
     font-family: var(--font-cuerpo);
     font-size: 0.78rem;
     font-weight: 700;
     text-transform: uppercase;
     letter-spacing: 0.8px;
     padding: 6px 14px;
     border-radius: var(--radius-badge);
     display: inline-block;
     margin-bottom: 20px;
}

.edu-team-card__badge--nurse {
     background: var(--edu-purple-light);
     color: var(--edu-purple);
}

.edu-team-card__badge--engineer {
     background: var(--edu-teal-light);
     color: var(--edu-teal);
}

.edu-team-card__badge--student-nurse {
     background: var(--edu-indigo-light);
     color: var(--edu-indigo);
}

.edu-team-card__badge--teacher {
     background: var(--edu-rose-light);
     color: var(--edu-rose);
}

.edu-team-card__badge--student-med {
     background: var(--edu-coral-light);
     color: var(--edu-coral);
}

.edu-team-card__desc {
     font-family: var(--font-cuerpo);
     font-size: 0.92rem;
     color: #4B5563;
     line-height: 1.65;
     margin: 0;
}

/* Controles y Navegación del Carrusel del Equipo */
.edu-carousel-control {
     width: 50px;
     height: 50px;
     background: rgba(124, 58, 237, 0.1);
     border-radius: 50%;
     top: 50%;
     transform: translateY(-50%);
     opacity: 0.8;
     transition: all 0.3s ease;
}

.edu-carousel-control:hover {
     background: var(--grad-purple);
     opacity: 1;
     box-shadow: 0 4px 15px rgba(124, 58, 237, 0.3);
}

.edu-carousel-control.carousel-control-prev {
     left: 10px;
}

.edu-carousel-control.carousel-control-next {
     right: 10px;
}

.edu-carousel-control .carousel-control-prev-icon,
.edu-carousel-control .carousel-control-next-icon {
     filter: invert(1) sepia(1) saturate(5) hue-rotate(240deg); /* Hace las flechas purpuras */
}

.edu-carousel-control:hover .carousel-control-prev-icon,
.edu-carousel-control:hover .carousel-control-next-icon {
     filter: invert(1) brightness(10); /* Hace las flechas blancas al pasar el mouse */
}

/* Indicadores del carrusel */
.carousel-indicators [data-bs-target] {
     width: 10px;
     height: 10px;
     border-radius: 50%;
     background-color: rgba(124, 58, 237, 0.3);
     border: none;
     margin: 0 6px;
     transition: all 0.3s ease;
}

.carousel-indicators .active {
     background-color: var(--edu-purple);
     width: 24px;
     border-radius: 50px;
}

/* ============================================================
   RESETS Y OVERRIDES DE CARRUSEL PARA EL GRUPO DE TRABAJO
   ============================================================ */
#teamCarouselDesktop .carousel-item,
#teamCarouselMobile .carousel-item {
     height: auto !important;
     min-height: 0 !important;
     background: transparent !important;
}

#teamCarouselDesktop .carousel-item .edu-team-card__img,
#teamCarouselMobile .carousel-item .edu-team-card__img {
     height: 100% !important;
     width: 100% !important;
     max-height: none !important;
     max-width: none !important;
     object-fit: cover !important;
     background-color: transparent !important;
     border-radius: 50% !important;
}

/* ============================================================
   ESTANDARIZACIÓN VISUAL Y ACCESIBILIDAD (MEJORA CONSERVADORA)
   ============================================================ */

/* 1. Tipografía y Contraste (WCAG AA Compliance) */
body {
     color: #374151 !important; /* Gris oscuro para legibilidad (contraste >= 4.5:1 en fondo claro) */
     -webkit-font-smoothing: antialiased;
     -moz-osx-font-smoothing: grayscale;
}

h1, h2, h3, h4, h5, h6 {
     color: #1F2937 !important; /* Títulos con alto contraste y peso */
}

/* 2. Estandarización de Tarjetas (.card) */
.card {
     background: #ffffff !important;
     border-radius: var(--radius-card) !important;
     border: 1px solid rgba(124, 58, 237, 0.08) !important;
     box-shadow: var(--shadow-card) !important;
     transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1), box-shadow 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
}

.card:hover {
     transform: translateY(-4px) !important;
     box-shadow: var(--shadow-hover) !important;
     border-color: rgba(124, 58, 237, 0.18) !important;
}

/* 3. Estandarización de Botones (.btn) */
.btn {
     border-radius: var(--radius-btn) !important;
     padding: 10px 24px !important;
     font-family: var(--font-cuerpo) !important;
     font-weight: 700 !important;
     transition: background-color 0.25s ease, border-color 0.25s ease, box-shadow 0.25s ease, transform 0.25s ease !important;
}

.btn:focus, .btn-check:focus + .btn {
     outline: none !important;
     box-shadow: 0 0 0 4px rgba(124, 58, 237, 0.25) !important;
}

.btn-primary {
     background: var(--grad-purple) !important;
     border: none !important;
     box-shadow: 0 4px 14px rgba(124, 58, 237, 0.3) !important;
}

.btn-primary:hover {
     transform: translateY(-2px) !important;
     box-shadow: 0 6px 20px rgba(124, 58, 237, 0.45) !important;
}

.btn-secondary {
     background: linear-gradient(135deg, #6B7280, #4B5563) !important;
     border: none !important;
     box-shadow: 0 4px 14px rgba(107, 114, 128, 0.2) !important;
}

.btn-secondary:hover {
     transform: translateY(-2px) !important;
     box-shadow: 0 6px 20px rgba(107, 114, 128, 0.3) !important;
}

/* 4. Estandarización de Campos de Formulario (.form-control, .form-select) */
.form-control, .form-select {
     border-radius: 12px !important;
     border: 1.5px solid rgba(124, 58, 237, 0.15) !important;
     padding: 12px 16px !important;
     font-family: var(--font-cuerpo) !important;
     font-size: 0.95rem !important;
     color: #374151 !important;
     background-color: #ffffff !important;
     transition: border-color 0.25s ease, box-shadow 0.25s ease !important;
}

.form-control:focus, .form-select:focus {
     border-color: var(--edu-purple) !important;
     box-shadow: 0 0 0 4px rgba(124, 58, 237, 0.12) !important;
     outline: none !important;
}

textarea.form-control {
     border-radius: 12px !important;
     resize: none !important;
}

/* Inputs tipo cuaderno (dinámicas regional, DOFA, etc.) */
.notebook-textarea {
     border-radius: 12px !important;
     border: 1.5px solid rgba(124, 58, 237, 0.15) !important;
     transition: all 0.25s ease !important;
}

.notebook-textarea:focus {
     border-color: var(--edu-purple) !important;
     box-shadow: 0 0 0 4px rgba(124, 58, 237, 0.12) !important;
}

/* 5. Transiciones e interacciones suaves globales */
a, button, .btn, .form-control, .form-select, .card, .edu-card {
     transition: background-color 0.25s ease, border-color 0.25s ease, box-shadow 0.25s ease, transform 0.25s ease, opacity 0.25s ease;
}

/* ==========================================
   6. Videojuego: Salvando a Laura
   ========================================== */
.game-card {
     border-radius: 24px !important;
     border: none !important;
     background: #ffffff;
     box-shadow: 0 10px 30px rgba(0, 0, 0, 0.08) !important;
     overflow: hidden;
}

.game-progress-wrapper {
     background-color: #f3f4f6;
     border-radius: 20px;
     height: 8px;
     overflow: hidden;
}

.game-progress-fill {
     background: linear-gradient(90deg, #ec4899, #db2777);
     height: 100%;
     width: 0%;
     transition: width 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

.mobile-chat-frame {
     max-width: 380px;
     margin: 0 auto;
     background: #1e1e24;
     border: 12px solid #2d2d35;
     border-radius: 36px;
     box-shadow: 0 20px 40px rgba(0, 0, 0, 0.25);
     position: relative;
     overflow: hidden;
}

/* Notch del teléfono */
.mobile-chat-frame::before {
     content: "";
     position: absolute;
     top: 0;
     left: 50%;
     transform: translateX(-50%);
     width: 140px;
     height: 18px;
     background: #2d2d35;
     border-bottom-left-radius: 12px;
     border-bottom-right-radius: 12px;
     z-index: 10;
}

.mobile-chat-frame img {
     width: 100%;
     height: auto;
     display: block;
     transition: filter 0.3s ease;
}

.game-btn-num {
     width: 48px;
     height: 48px;
     border-radius: 50%;
     font-size: 1.1rem;
     font-weight: 800;
     display: inline-flex;
     align-items: center;
     justify-content: center;
     border: 2px solid #d1d5db;
     background-color: #ffffff;
     color: #374151;
     cursor: pointer;
     transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
     box-shadow: 0 4px 6px rgba(0, 0, 0, 0.05);
     user-select: none;
}

.game-btn-num:hover:not(.disabled) {
     transform: scale(1.1);
     box-shadow: 0 6px 12px rgba(0, 0, 0, 0.1);
}

.game-btn-num.selected {
     background-color: #ec4899 !important;
     border-color: #db2777 !important;
     color: #ffffff !important;
     transform: scale(1.05);
     box-shadow: 0 0 12px rgba(236, 72, 153, 0.4);
}

.game-btn-num.correct {
     background-color: #10b981 !important;
     border-color: #059669 !important;
     color: #ffffff !important;
     box-shadow: 0 0 10px rgba(16, 185, 129, 0.4);
}

.game-btn-num.incorrect {
     background-color: #ef4444 !important;
     border-color: #dc2626 !important;
     color: #ffffff !important;
     box-shadow: 0 0 10px rgba(239, 68, 68, 0.4);
}

.game-btn-num.missed {
     background-color: #f59e0b !important;
     border-color: #d97706 !important;
     color: #ffffff !important;
     box-shadow: 0 0 10px rgba(245, 158, 11, 0.4);
     animation: alert-pulse 1.5s infinite;
}

.game-btn-num.disabled {
     cursor: not-allowed;
     opacity: 0.85;
}

@keyframes alert-pulse {
     0%, 100% { transform: scale(1); }
     50% { transform: scale(1.08); }
}

.feedback-card {
     background-color: #f8fafc;
     border-left: 6px solid #ec4899;
     border-radius: 12px;
     transition: all 0.3s ease;
}

.feedback-card.success-border {
     border-left-color: #10b981;
}

.feedback-card.error-border {
     border-left-color: #ef4444;
}

.pulse-badge {
     animation: alert-pulse 2s infinite;
}

/* Manglar de la Diversidad */
.mangrove-node {
     background-color: #8b5cf6;
     color: white;
     border: 2px solid rgba(139, 92, 246, 0.2);
     box-shadow: 0 4px 6px rgba(0, 0, 0, 0.05);
     transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
     cursor: pointer;
     display: flex;
     flex-direction: column;
     align-items: center;
     gap: 8px;
     min-height: 110px;
     justify-content: center;
}

.mangrove-node:hover {
     background-color: #7c3aed;
     transform: translateY(-4px) scale(1.03);
     box-shadow: 0 8px 15px rgba(124, 58, 237, 0.2);
}

.mangrove-node .node-icon {
     font-size: 2rem;
     opacity: 0.9;
}

.mangrove-modal-card {
     background-color: white;
     border: 2px solid #10b981;
     box-shadow: 0 10px 25px rgba(0,0,0,0.1);
     animation: fadeIn 0.4s ease-out;
}