/* =======================================================
   POLYGLOT COMMONWEALTH — HOJA DE ESTILOS PRINCIPAL
   Versión 2.0 — Actualizada con nuevas secciones
   Secciones:
     1.  Variables CSS
     2.  Reset y Base
     3.  Utilidades
     4.  Botones
     5.  Navbar
     6.  Hero
     7.  Publicidad
     8.  Idiomas / Programas
     9.  Test de Nivelación
    10.  Actividades / Collage
    11.  Por Qué Elegirnos
    12.  Metodología
    13.  Material de Estudio (NUEVO)
    14.  Juegos Interactivos (NUEVO)
    15.  Exámenes Internacionales (NUEVO)
    16.  Equipo
    17.  Formulario de Leads
    18.  Testimonios
    19.  Footer
    20.  Chatbot
    21.  Accesibilidad
    22.  Media Queries
======================================================= */


/* -------------------------------------------------------
   1. VARIABLES CSS
------------------------------------------------------- */
:root {
  /* Paleta de colores */
  --navy:        #0D1B3E;
  --navy-mid:    #162553;
  --navy-light:  #1E3370;
  --gold:        #C9922A;
  --gold-light:  #E0A93A;
  --gold-pale:   #F5E6C8;
  --white:       #FFFFFF;
  --gray-50:     #F8F9FB;
  --gray-100:    #EEF0F5;
  --gray-300:    #BCC3D4;
  --gray-500:    #6E7A96;
  --gray-700:    #3A4560;
  --text:        #1A2340;

  /* Bordes y sombras */
  --radius:      12px;
  --radius-lg:   20px;
  --shadow-sm:   0 2px 12px rgba(13,27,62,0.08);
  --shadow-md:   0 8px 32px rgba(13,27,62,0.14);
  --shadow-lg:   0 20px 60px rgba(13,27,62,0.18);

  /* Animaciones */
  --transition:  0.3s cubic-bezier(0.4,0,0.2,1);
}


/* -------------------------------------------------------
   2. RESET Y BASE
------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; font-size: 16px; }
body {
  font-family: 'DM Sans', sans-serif;
  color: var(--text);
  background: var(--white);
  overflow-x: hidden;
  line-height: 1.6;
}
img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
button { cursor: pointer; border: none; background: none; font-family: inherit; }
ul { list-style: none; }


/* -------------------------------------------------------
   3. UTILIDADES
------------------------------------------------------- */
.container {
  width: 100%;
  max-width: 1180px;
  margin: 0 auto;
  padding: 0 24px;
}
.section { padding: 96px 0; }
.section--alt { background: var(--gray-50); }
.text-center { text-align: center; }

/* Etiqueta tipo pill de sección */
.tag {
  display: inline-block;
  font-family: 'DM Mono', monospace;
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--gold);
  background: var(--gold-pale);
  border: 1px solid rgba(201,146,42,0.25);
  padding: 5px 14px;
  border-radius: 40px;
  margin-bottom: 18px;
}
.section-title {
  font-family: 'Playfair Display', serif;
  font-size: clamp(2rem, 4vw, 3rem);
  font-weight: 700;
  color: var(--navy);
  line-height: 1.15;
  margin-bottom: 16px;
}
.section-sub {
  font-size: 1.05rem;
  color: var(--gray-500);
  max-width: 560px;
  line-height: 1.7;
}

/* Animación de entrada por scroll */
.reveal {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 0.6s ease, transform 0.6s ease;
}
.reveal.visible {
  opacity: 1;
  transform: translateY(0);
}
.reveal-delay-1 { transition-delay: 0.1s; }
.reveal-delay-2 { transition-delay: 0.2s; }
.reveal-delay-3 { transition-delay: 0.3s; }
.reveal-delay-4 { transition-delay: 0.4s; }
.reveal-delay-5 { transition-delay: 0.5s; }
.reveal-delay-6 { transition-delay: 0.6s; }


/* -------------------------------------------------------
   4. BOTONES
------------------------------------------------------- */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 14px 28px;
  border-radius: 8px;
  font-weight: 600;
  font-size: 0.95rem;
  transition: var(--transition);
  white-space: nowrap;
}
.btn--gold {
  background: var(--gold);
  color: var(--white);
  box-shadow: 0 4px 18px rgba(201,146,42,0.35);
}
.btn--gold:hover { background: var(--gold-light); transform: translateY(-2px); box-shadow: 0 8px 28px rgba(201,146,42,0.4); }
.btn--gold:focus-visible { outline: 3px solid var(--gold-light); outline-offset: 3px; }

.btn--outline {
  border: 2px solid var(--navy);
  color: var(--navy);
}
.btn--outline:hover { background: var(--navy); color: var(--white); }

.btn--outline-white {
  border: 2px solid rgba(255,255,255,0.55);
  color: var(--white);
}
.btn--outline-white:hover { background: rgba(255,255,255,0.12); border-color: white; }

/* Botón WhatsApp con efecto pulso */
.btn--whatsapp {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  background: linear-gradient(135deg, #25D366 0%, #1eba57 100%);
  color: #fff;
  padding: 14px 26px;
  border-radius: 12px;
  font-size: 1rem;
  font-weight: 700;
  letter-spacing: 0.01em;
  position: relative;
  overflow: hidden;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
  box-shadow: 0 4px 20px rgba(37,211,102,0.35), 0 0 0 0 rgba(37,211,102,0.4);
  animation: waPulse 2.5s ease infinite;
}
.btn--whatsapp::before {
  content: '';
  position: absolute;
  top: 0; left: -75%;
  width: 50%; height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.25), transparent);
  transform: skewX(-15deg);
  transition: left 0.5s ease;
}
.btn--whatsapp:hover::before { left: 130%; }
.btn--whatsapp:hover {
  transform: translateY(-2px) scale(1.02);
  box-shadow: 0 8px 30px rgba(37,211,102,0.5), 0 0 0 4px rgba(37,211,102,0.15);
  animation: none;
}
.btn--whatsapp:active { transform: translateY(0) scale(0.98); }
@keyframes waPulse {
  0%   { box-shadow: 0 4px 20px rgba(37,211,102,0.35), 0 0 0 0 rgba(37,211,102,0.4); }
  60%  { box-shadow: 0 4px 20px rgba(37,211,102,0.35), 0 0 0 10px rgba(37,211,102,0); }
  100% { box-shadow: 0 4px 20px rgba(37,211,102,0.35), 0 0 0 0 rgba(37,211,102,0); }
}

/* -------------------------------------------------------
   5. NAVBAR — CSS COMPLETO OPTIMIZADO PARA LOGO ESCUDO
------------------------------------------------------- */

/* === NAVBAR BASE === */
.navbar {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 1000;
  background: rgba(13, 27, 62, 0.96);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  transition: var(--transition);
}

.navbar.scrolled {
  background: rgba(13, 27, 62, 0.98);
  box-shadow: 0 4px 32px rgba(0, 0, 0, 0.22);
}

/* === INNER CONTAINER === */
.navbar__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  /* CORRECCIÓN: Aumentado a 80px para dar espacio al logo grande */
  height: 80px;
  gap: 24px;
}

/* -------------------------------------------------------
   LOGO — CORRECCIONES PRINCIPALES
------------------------------------------------------- */

.navbar__logo {
  display: flex;
  align-items: center;
  gap: 14px;
  text-decoration: none;
  flex-shrink: 0;
}

.logo-icon {
  /* CORRECCIÓN 1: Sin fondo — el escudo ya tiene su propio fondo azul */
  background: none !important;

  /* CORRECCIÓN 2: Sin border-radius — el escudo tiene su propia forma */
  border-radius: 0 !important;

  /* CORRECCIÓN 3: overflow visible para que no se corte nada */
  overflow: visible;

  /* CORRECCIÓN 4: Dimensiones grandes que respetan la proporción 3:4 del escudo */
  width: 56px;
  height: 72px;

  /* CORRECCIÓN 5: Flexbox para centrar la imagen perfectamente */
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.logo-icon__img {
  /* CORRECCIÓN 6: La imagen ocupa todo el contenedor */
  width: 100%;
  height: 100%;

  /* CORRECCIÓN 7: contain preserva proporciones sin recortar ni deformar */
  object-fit: contain;
  object-position: center;

  /* CORRECCIÓN 8: Renderizado de alta calidad — evita pixelado */
  image-rendering: -webkit-optimize-contrast;
  image-rendering: crisp-edges;

  /* CORRECCIÓN 9: Suavizado para pantallas de alta densidad (Retina) */
  -webkit-font-smoothing: antialiased;
}

/* === TEXTO DEL LOGO === */
.logo-text {
  display: flex;
  flex-direction: column;
  line-height: 1.2;
  gap: 2px;
}

.logo-text span:first-child {
  font-family: 'Playfair Display', serif;
  font-weight: 700;
  /* CORRECCIÓN: Tamaño aumentado para hacer juego con el logo más grande */
  font-size: 1.3rem;
  color: white;
  letter-spacing: 0.01em;
}

.logo-text span:last-child {
  font-size: 0.72rem;
  color: rgba(255, 255, 255, 0.65);
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

/* -------------------------------------------------------
   NAVEGACIÓN ESCRITORIO
------------------------------------------------------- */
.navbar__nav {
  display: flex;
  align-items: center;
  gap: 2px;
}

.navbar__nav a {
  padding: 8px 10px;
  color: rgba(255, 255, 255, 0.78);
  font-size: 0.83rem;
  font-weight: 500;
  border-radius: 6px;
  transition: var(--transition);
  text-decoration: none;
  white-space: nowrap;
}

.navbar__nav a:hover {
  color: white;
  background: rgba(255, 255, 255, 0.08);
}

.navbar__nav a:focus-visible {
  outline: 2px solid var(--gold);
  outline-offset: 2px;
}

/* -------------------------------------------------------
   ZONA DERECHA (idioma + CTA + hamburguesa)
------------------------------------------------------- */
.navbar__right {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-shrink: 0;
}

/* === SELECTOR DE IDIOMA === */
.lang-selector {
  position: relative;
}

.lang-btn {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 7px 12px;
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.15);
  border-radius: 8px;
  color: white;
  font-size: 0.85rem;
  font-weight: 500;
  cursor: pointer;
  transition: var(--transition);
  white-space: nowrap;
}

.lang-btn:hover {
  background: rgba(255, 255, 255, 0.14);
}

.lang-btn svg {
  width: 14px;
  height: 14px;
  transition: transform 0.2s;
}

.lang-selector.open .lang-btn svg {
  transform: rotate(180deg);
}

.lang-dropdown {
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  background: var(--navy-mid);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 10px;
  overflow: hidden;
  box-shadow: var(--shadow-lg);
  min-width: 160px;
  opacity: 0;
  transform: translateY(-8px);
  pointer-events: none;
  transition: var(--transition);
  z-index: 100;
}

.lang-selector.open .lang-dropdown {
  opacity: 1;
  transform: translateY(0);
  pointer-events: all;
}

.lang-option {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 11px 16px;
  color: rgba(255, 255, 255, 0.8);
  font-size: 0.88rem;
  cursor: pointer;
  transition: background 0.2s;
}

.lang-option:hover {
  background: rgba(255, 255, 255, 0.08);
  color: white;
}

.lang-option.active {
  color: var(--gold-light);
}

.lang-flag {
  font-size: 1.1rem;
}

/* -------------------------------------------------------
   HAMBURGUESA — CORRECCIONES MÓVIL
------------------------------------------------------- */
.hamburger {
  /* Oculto en escritorio */
  display: none;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 5px;

  /* CORRECCIÓN: Dimensiones explícitas para área táctil correcta */
  width: 44px;
  height: 44px;
  padding: 0;

  background: none;
  border: none;
  cursor: pointer;
  flex-shrink: 0;

  /* CORRECCIÓN: Siempre encima del menú desplegable */
  z-index: 1001;
}

.hamburger span {
  display: block;
  width: 24px;
  height: 2px;
  background: white;
  border-radius: 2px;
  transition: var(--transition);
  /* CORRECCIÓN: Evita que los span interfieran con el evento click del botón */
  pointer-events: none;
}

/* Animación a X cuando el menú está abierto */
.hamburger.active span:nth-child(1) {
  transform: translateY(7px) rotate(45deg);
}
.hamburger.active span:nth-child(2) {
  opacity: 0;
  transform: scaleX(0);
}
.hamburger.active span:nth-child(3) {
  transform: translateY(-7px) rotate(-45deg);
}

/* -------------------------------------------------------
   MENÚ MÓVIL DESPLEGABLE
------------------------------------------------------- */
.mobile-nav {
  /* Oculto por defecto */
  display: none;
  flex-direction: column;

  /* CORRECCIÓN: Posición absoluta para flotar bajo el navbar */
  position: absolute;
  top: 100%;
  left: 0;
  width: 100%;

  background: rgba(10, 22, 55, 0.99);
  border-top: 1px solid rgba(255, 255, 255, 0.08);
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.35);
  padding: 12px 0 20px;

  /* CORRECCIÓN: Debajo del botón hamburguesa */
  z-index: 999;
}

/* Se activa desde JS añadiendo la clase .open */
.mobile-nav.open {
  display: flex;
}

.mobile-nav a {
  padding: 13px 28px;
  color: rgba(255, 255, 255, 0.82);
  font-size: 1rem;
  font-weight: 500;
  text-decoration: none;
  text-align: center;
  transition: color 0.2s, background 0.2s;
  border-bottom: 1px solid rgba(255, 255, 255, 0.04);
}

.mobile-nav a:last-child {
  border-bottom: none;
}

.mobile-nav a:hover {
  color: white;
  background: rgba(255, 255, 255, 0.06);
}

/* -------------------------------------------------------
   MEDIA QUERY — MÓVILES (max-width: 768px)
------------------------------------------------------- */
@media screen and (max-width: 768px) {

  /* Ocultar nav de escritorio */
  .navbar__nav {
    display: none;
  }

  /* Ocultar CTA de escritorio */
  .btn--cta-desktop {
    display: none;
  }

  /* Mostrar hamburguesa */
  .hamburger {
    display: flex;
  }

  /* Navbar más compacto en móvil */
  .navbar__inner {
    height: 64px;
  }

  /* Logo más compacto pero aún visible */
  .logo-icon {
    width: 42px;
    height: 54px;
  }

  .logo-text span:first-child {
    font-size: 1rem;
  }

  .logo-text span:last-child {
    font-size: 0.65rem;
  }

  /* Menos gap en la zona derecha */
  .navbar__right {
    gap: 8px;
  }

  /* Selector de idioma más compacto */
  .lang-btn {
    padding: 6px 10px;
    font-size: 0.8rem;
  }
}

/* -------------------------------------------------------
   MEDIA QUERY — PANTALLAS MUY PEQUEÑAS (max-width: 380px)
------------------------------------------------------- */
@media screen and (max-width: 380px) {

  /* Ocultar texto del logo en pantallas muy pequeñas */
  .logo-text {
    display: none;
  }

  /* Icono del logo ligeramente más grande al estar solo */
  .logo-icon {
    width: 46px;
    height: 58px;
  }

  /* Ocultar selector de idioma para dar espacio */
  .lang-selector {
    display: none;
  }
}

/* -------------------------------------------------------
   6. HERO
------------------------------------------------------- */
.hero {
  min-height: 100vh;
  background: linear-gradient(135deg, var(--navy) 0%, var(--navy-mid) 50%, var(--navy-light) 100%);
  position: relative;
  display: flex;
  align-items: center;
  overflow: hidden;
  padding-top: 72px;
}
.hero__bg-pattern {
  position: absolute;
  inset: 0;
  background-image:
    radial-gradient(circle at 20% 50%, rgba(201,146,42,0.08) 0%, transparent 50%),
    radial-gradient(circle at 80% 20%, rgba(255,255,255,0.04) 0%, transparent 40%),
    url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cg fill='%23ffffff' fill-opacity='0.02'%3E%3Cpath d='M36 34v-4h-2v4h-4v2h4v4h2v-4h4v-2h-4zm0-30V0h-2v4h-4v2h4v4h2V6h4V4h-4zM6 34v-4H4v4H0v2h4v4h2v-4h4v-2H6zM6 4V0H4v4H0v2h4v4h2V6h4V4H6z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
}
.hero__orb {
  position: absolute;
  border-radius: 50%;
  filter: blur(80px);
  opacity: 0.35;
  pointer-events: none;
}
.hero__orb--1 { width: 500px; height: 500px; background: rgba(201,146,42,0.3); top: -100px; right: -100px; }
.hero__orb--2 { width: 400px; height: 400px; background: rgba(30,51,112,0.6); bottom: -80px; left: 10%; }

.hero__inner {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 60px;
  align-items: center;
  padding: 80px 0;
}
.hero__content { color: white; }
.hero__eyebrow { display: flex; align-items: center; gap: 12px; margin-bottom: 28px; }
.hero__line { width: 40px; height: 2px; background: var(--gold); }
.hero__eyebrow-text {
  font-family: 'DM Mono', monospace;
  font-size: 11px;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--gold-light);
}
.hero__title {
  font-family: 'Playfair Display', serif;
  font-size: clamp(2.6rem, 5vw, 4rem);
  font-weight: 900;
  line-height: 1.05;
  margin-bottom: 24px;
}
.hero__title em { font-style: italic; color: var(--gold-light); }
.hero__subtitle {
  font-size: 1.1rem;
  color: rgba(255,255,255,0.72);
  line-height: 1.75;
  margin-bottom: 40px;
  max-width: 500px;
}
.hero__ctas { display: flex; gap: 14px; flex-wrap: wrap; margin-bottom: 16px; }
.hero__stats { display: flex; gap: 36px; padding-top: 32px; border-top: 1px solid rgba(255,255,255,0.1); }
.hero__stat-num {
  font-family: 'Playfair Display', serif;
  font-size: 2.2rem;
  font-weight: 700;
  color: var(--gold-light);
  line-height: 1;
  margin-bottom: 4px;
}
.hero__stat-lbl { font-size: 0.8rem; color: rgba(255,255,255,0.55); letter-spacing: 0.04em; text-transform: uppercase; }

/* Tarjetas flotantes del hero */
.hero__visual { display: flex; flex-direction: column; gap: 16px; }
.hero__card {
  background: rgba(255,255,255,0.07);
  border: 1px solid rgba(255,255,255,0.12);
  backdrop-filter: blur(12px);
  border-radius: var(--radius-lg);
  padding: 28px;
  animation: floatUp 0.7s ease forwards;
  opacity: 0;
}
.hero__card:nth-child(1) { animation-delay: 0.2s; }
.hero__card:nth-child(2) { animation-delay: 0.4s; margin-left: 32px; }
.hero__card:nth-child(3) { animation-delay: 0.6s; }
@keyframes floatUp {
  from { opacity: 0; transform: translateY(20px); }
  to   { opacity: 1; transform: translateY(0); }
}

.hcard__top { display: flex; align-items: center; gap: 14px; margin-bottom: 12px; }
.hcard__icon {
  width: 44px; height: 44px;
  background: var(--gold);
  border-radius: 10px;
  display: flex; align-items: center; justify-content: center;
  font-size: 1.3rem;
  flex-shrink: 0;
}
.hcard__title { font-weight: 600; font-size: 0.95rem; color: white; }
.hcard__sub { font-size: 0.82rem; color: rgba(255,255,255,0.55); }
.hcard__lang-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.lang-chip {
  background: rgba(255,255,255,0.1);
  border: 1px solid rgba(255,255,255,0.15);
  color: rgba(255,255,255,0.85);
  font-size: 0.8rem;
  font-weight: 500;
  padding: 5px 12px;
  border-radius: 30px;
  display: flex; align-items: center; gap: 6px;
}
.lang-chip--gold { background: rgba(201,146,42,0.15); border-color: rgba(201,146,42,0.3) !important; color: var(--gold-light) !important; }
.hcard__progress-meta { display: flex; justify-content: space-between; font-size: 0.75rem; color: rgba(255,255,255,0.45); margin-bottom: 5px; }
.progress-bar { height: 4px; background: rgba(255,255,255,0.12); border-radius: 2px; margin-top: 8px; overflow: hidden; }
.progress-fill {
  height: 100%;
  background: linear-gradient(90deg, var(--gold), var(--gold-light));
  border-radius: 2px;
  animation: growBar 1.2s ease forwards;
  animation-delay: 0.8s;
  width: 0;
}
@keyframes growBar { to { width: var(--w, 75%); } }
.hcard__next-class { font-size: 0.78rem; color: rgba(255,255,255,0.4); margin-top: 10px; }
.hcard__cert-row { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 4px; }
.hcard__cert-note { font-size: 0.78rem; color: rgba(255,255,255,0.4); margin-top: 10px; }
.cert-badge {
  background: rgba(255,255,255,0.07);
  border: 1px solid rgba(255,255,255,0.14);
  border-radius: 6px;
  padding: 4px 10px;
  font-size: 0.75rem;
  color: rgba(255,255,255,0.75);
  font-weight: 500;
}
.hcard__live-dot {
  display: inline-block;
  width: 7px; height: 7px;
  border-radius: 50%;
  background: #25D366;
  margin-right: 5px;
  vertical-align: middle;
  animation: livePulse 1.5s infinite;
}
@keyframes livePulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.35; } }


/* -------------------------------------------------------
   7. PUBLICIDAD
------------------------------------------------------- */
#publicidad { 
  padding-top: 20px; 
  margin-top: 60px; 
}

.publicidad__grid {
  display: grid;
  /* Mantiene un diseño responsivo que adapta las cartas según el espacio */
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: 24px;
  margin-top: 40px;
}

.pub-card {
  background: transparent; /* Eliminamos fondos rígidos */
  border: 1.5px solid var(--gray-100);
  border-radius: var(--radius-lg);
  text-decoration: none;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  position: relative;
  transition: var(--transition);
  cursor: pointer;
}

/* Efecto de la línea dorada inferior al pasar el mouse */
.pub-card::before {
  content: '';
  position: absolute;
  bottom: 0; left: 0; right: 0;
  height: 3px;
  background: var(--gold);
  transform: scaleX(0);
  transition: transform var(--transition);
  transform-origin: left;
  z-index: 2;
}

.pub-card:hover { 
  border-color: var(--gold-pale); 
  box-shadow: var(--shadow-md); 
  transform: translateY(-4px); 
}

.pub-card:hover::before { 
  transform: scaleX(1); 
}

/* Contenedor adaptado para imágenes tipo póster */
.pub-card__img-container { 
  width: 100%; 
  height: auto; 
  overflow: hidden; 
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Clave: 'contain' asegura que el póster se vea completo sin recortes */
.pub-card__img { 
  width: 100%; 
  height: auto; 
  object-fit: contain; 
  display: block;
  transition: transform var(--transition); 
}

/* Efecto de zoom sutil en la imagen al hacer hover */
.pub-card:hover .pub-card__img { 
  transform: scale(1.02); 
}
/* -------------------------------------------------------
   8. IDIOMAS / PROGRAMAS
------------------------------------------------------- */
/* ==========================================================================
   SECCIÓN IDIOMAS / PROGRAMAS — TARJETAS VISUALES CON IMAGEN DE FONDO
   ========================================================================== */

#idiomas { 
  padding-top: 20px; 
  margin-top: 60px; 
}

.languages__grid {
  display: grid;
  /* Reorganiza las tarjetas de forma responsiva adaptándose al espacio */
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 24px;
  margin-top: 40px;
}

.lang-card {
  position: relative;
  width: 100%;
  height: 250px; /* Altura fija ideal para estilo póster/tarjeta de viaje */
  border-radius: var(--radius-lg);
  border: 1.5px solid var(--gray-100);
  overflow: hidden;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  justify-content: flex-end; /* Empuja el texto hacia la parte inferior */
  text-decoration: none;
  transition: var(--transition);
  box-shadow: var(--shadow-sm);
  background-color: var(--navy); /* Fondo de respaldo por seguridad */
}

/* Efectos al pasar el mouse sobre la tarjeta */
.lang-card:hover {
  box-shadow: var(--shadow-md);
  transform: translateY(-4px);
}

/* Contenedor absoluto de la imagen */
.lang-card__bg-container {
  position: absolute;
  top: 0; 
  left: 0; 
  right: 0; 
  bottom: 0;
  z-index: 1;
  overflow: hidden;
  width: 100%;
  height: 100%;
}

/* Gradiente optimizado: transparente arriba para no opacar la imagen, 
   y oscuro abajo únicamente donde se apoya el texto para garantizar lectura */
.lang-card__bg-container::after {
  content: '';
  position: absolute;
  top: 0; 
  left: 0; 
  right: 0; 
  bottom: 0;
  background: linear-gradient(to bottom, rgba(0, 0, 0, 0) 40%, rgba(0, 0, 0, 0.75) 100%);
  z-index: 2;
}

/* Ajuste forzado de la imagen de fondo */
.lang-card__bg {
  width: 100%;
  height: 100%;
  object-fit: cover; /* Llena toda la tarjeta sin dejar bordes ni espacios vacíos */
  object-position: center;
  transition: transform var(--transition);
  display: block;
}

/* Efecto de zoom suave a la imagen al hacer hover */
.lang-card:hover .lang-card__bg {
  transform: scale(1.06);
}

/* Oculta los emojis de bandera/iniciales del sistema (GB, FR, IT...) 
   para dejar limpia la imagen */
.lang-card__flag {
  display: none;
}

/* Contenedor del texto (Nombre del idioma y niveles) */
.lang-card__content {
  padding: 20px;
  color: var(--white);
  z-index: 5; /* Se posiciona por encima de la imagen y el gradiente */
  text-shadow: 1px 1px 4px rgba(0, 0, 0, 0.6); /* Sombra de respaldo para resaltar las letras */
}

.lang-card__name {
  font-family: 'Playfair Display', serif;
  font-size: 1.4rem;
  font-weight: 700;
  color: var(--white);
  margin-bottom: 6px;
}

.lang-card__levels {
  font-size: 0.9rem;
  font-weight: 400;
  color: rgba(255, 255, 255, 0.9); /* Blanco de alta visibilidad */
  line-height: 1.3;
}
/* -------------------------------------------------------
   9. TEST DE NIVELACIÓN
------------------------------------------------------- */
.test-container {
  padding: 60px 20px;
  background-color: var(--gray-50);
  display: flex;
  justify-content: center;
}
.test-card {
  background: var(--white);
  border-radius: 15px;
  padding: 40px;
  max-width: 600px;
  width: 100%;
  box-shadow: var(--shadow-md);
  text-align: center;
}
.test-card h2 { font-family: 'Playfair Display', serif; color: var(--navy); margin-bottom: 8px; }
.test-subtitle { color: var(--gray-500); margin-bottom: 25px; }

/* Barra de progreso del quiz */
.progress-bar-container {
  background-color: var(--gray-100);
  border-radius: 10px;
  height: 8px;
  width: 100%;
  margin-bottom: 35px;
  overflow: hidden;
}
.quiz-progress-fill {
  background: linear-gradient(90deg, var(--gold), var(--gold-light));
  height: 100%;
  border-radius: 10px;
  transition: width 0.4s ease;
  width: 0%;
}

/* Opciones de respuesta */
.options-grid { display: grid; grid-template-columns: 1fr; gap: 12px; margin-top: 25px; }
.option-btn {
  background: var(--white);
  border: 2px solid var(--gray-100);
  border-radius: 8px;
  padding: 14px 20px;
  font-size: 0.95rem;
  cursor: pointer;
  text-align: left;
  transition: all 0.2s ease;
  font-family: 'DM Sans', sans-serif;
}
.option-btn:hover { border-color: var(--gold); background: var(--gold-pale); transform: translateY(-1px); }
.option-btn:focus-visible { outline: 3px solid var(--gold); outline-offset: 2px; }

/* Estados oculto/visible */
.hidden { display: none !important; }
.score-badge {
  margin-top: 20px;
  background: var(--gold-pale);
  color: var(--navy);
  padding: 15px;
  font-weight: 700;
  font-size: 1.25rem;
  border-radius: 8px;
  display: inline-block;
  border: 1px solid rgba(201,146,42,0.3);
}
.btn-submit {
  background: var(--gold);
  color: white;
  border: none;
  padding: 14px;
  width: 100%;
  border-radius: 8px;
  font-size: 1rem;
  cursor: pointer;
  font-weight: 700;
  font-family: 'DM Sans', sans-serif;
  transition: var(--transition);
  margin-top: 8px;
}
.btn-submit:hover { background: var(--gold-light); transform: translateY(-1px); }


/* -------------------------------------------------------
   10. ACTIVIDADES / COLLAGE
------------------------------------------------------- */
#actividades { background: var(--gray-50); }
.collage__grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-auto-rows: 220px;
  gap: 16px;
  margin-top: 40px;
}
.collage__item {
  position: relative;
  border-radius: 12px;
  overflow: hidden;
  box-shadow: var(--shadow-sm);
  background: var(--gray-100);
  transition: transform 0.4s cubic-bezier(0.165, 0.84, 0.44, 1), box-shadow 0.4s ease;
}
.collage__img { width: 100%; height: 100%; object-fit: cover; object-position: center; transition: transform 0.5s ease; }
.collage__item--big { grid-column: span 2; grid-row: span 2; }
.collage__item--tall { grid-row: span 2; }
.collage__item--wide { grid-column: span 2; }
.collage__item:hover { transform: scale(1.02); box-shadow: 0 12px 28px rgba(0,0,0,0.15); z-index: 10; }
.collage__item:hover .collage__img { transform: scale(1.05); }
.collage__caption {
  position: absolute;
  bottom: 0; left: 0;
  width: 100%;
  padding: 20px 16px;
  background: linear-gradient(to top, rgba(0,0,0,0.75), transparent);
  color: white;
  font-size: 0.9rem;
  font-weight: 500;
  opacity: 0;
  transform: translateY(10px);
  transition: opacity 0.3s ease, transform 0.3s ease;
  pointer-events: none;
}
.collage__item:hover .collage__caption { opacity: 1; transform: translateY(0); }


/* -------------------------------------------------------
   11. POR QUÉ ELEGIRNOS
------------------------------------------------------- */
.why__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 56px; align-items: center; margin-top: 60px; }
.why__features { display: flex; flex-direction: column; gap: 24px; }
.feature-item { display: flex; gap: 20px; padding: 24px; border-radius: var(--radius); transition: var(--transition); }
.feature-item:hover { background: var(--white); box-shadow: var(--shadow-sm); }
.feature-icon {
  width: 50px; height: 50px;
  background: var(--gold-pale);
  border-radius: 12px;
  display: flex; align-items: center; justify-content: center;
  font-size: 1.4rem;
  flex-shrink: 0;
}
.feature-text h4 { font-weight: 600; color: var(--navy); margin-bottom: 6px; }
.feature-text p { font-size: 0.9rem; color: var(--gray-500); line-height: 1.6; }
.why__visual { position: relative; padding-bottom: 32px; }
.why__card-main {
  background: var(--navy);
  border-radius: var(--radius-lg);
  padding: 40px;
  color: white;
  position: relative;
  overflow: hidden;
}
.why__card-main::before {
  content: '';
  position: absolute;
  top: -60px; right: -60px;
  width: 200px; height: 200px;
  background: rgba(201,146,42,0.15);
  border-radius: 50%;
}
.why__card-main h3 { font-family: 'Playfair Display', serif; font-size: 1.6rem; margin-bottom: 20px; position: relative; }
.cert-badges { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 24px; }
.why__stat-card {
  position: absolute;
  bottom: 0; right: -12px;
  background: var(--gold);
  border-radius: var(--radius);
  padding: 20px 24px;
  box-shadow: var(--shadow-lg);
  color: white;
}
.why__stat-card .num { font-family: 'Playfair Display', serif; font-size: 2.2rem; font-weight: 900; line-height: 1; }
.why__stat-card .lbl { font-size: 0.78rem; opacity: 0.85; margin-top: 4px; }


/* -------------------------------------------------------
   12. METODOLOGÍA
------------------------------------------------------- */
.method__grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 24px;
  margin-top: 48px;
}
.method-card {
  background: var(--white);
  border-radius: 12px;
  overflow: hidden;
  box-shadow: var(--shadow-sm);
  display: flex;
  flex-direction: column;
  height: 100%;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
  border: 1.5px solid var(--gray-100);
}
.method-card:hover { transform: translateY(-5px); box-shadow: var(--shadow-md); }
.method-card__bg-wrap { width: 100%; height: 200px; overflow: hidden; }
.method-card__bg { width: 100%; height: 100%; object-fit: cover; object-position: center; }
.method-card__overlay { display: none; }
.method-card__content { padding: 24px; background: var(--white); display: flex; flex-direction: column; flex-grow: 1; }
.method-card__header { display: flex; align-items: center; gap: 10px; margin-bottom: 16px; }
.method-card__icon { font-size: 1.4rem; color: var(--navy); }
.method-card__title { font-size: 0.95rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.5px; margin: 0; color: var(--navy); }
.method-card__body { font-size: 0.88rem; line-height: 1.65; color: var(--gray-500); }
.method-card__body p { margin-bottom: 10px; }
.method-card__body p:last-child { margin-bottom: 0; }
.method-card__body strong { color: var(--navy); }


/* -------------------------------------------------------
   13. MATERIAL DE ESTUDIO (NUEVO)
------------------------------------------------------- */
.recursos__filters {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin: 36px 0;
}
.filter-pill {
  padding: 8px 18px;
  border-radius: 30px;
  font-size: 0.85rem;
  font-weight: 600;
  font-family: 'DM Sans', sans-serif;
  border: 2px solid var(--gray-100);
  color: var(--gray-700);
  background: var(--white);
  cursor: pointer;
  transition: var(--transition);
}
.filter-pill:hover { border-color: var(--gold); color: var(--gold); }
.filter-pill.active { background: var(--navy); color: white; border-color: var(--navy); }
.filter-pill:focus-visible { outline: 3px solid var(--gold); outline-offset: 2px; }

.recursos__grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 24px;
  margin-top: 12px;
}

/* Tarjeta de recurso */
.resource-card {
  background: var(--white);
  border: 1.5px solid var(--gray-100);
  border-radius: var(--radius-lg);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  transition: var(--transition);
}
.resource-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-md); border-color: var(--gold-pale); }

/* Tipos de recurso */
.resource-card__type {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 18px;
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  font-family: 'DM Mono', monospace;
}
.resource-card__type--pdf    { background: #FEE2E2; color: #DC2626; }
.resource-card__type--audio  { background: #DBEAFE; color: #2563EB; }
.resource-card__type--video  { background: #EDE9FE; color: #7C3AED; }
.resource-card__type--exercise { background: #D1FAE5; color: #059669; }

.resource-card__body { padding: 20px 20px 12px; flex-grow: 1; }
.resource-card__level {
  display: inline-block;
  font-family: 'DM Mono', monospace;
  font-size: 0.72rem;
  font-weight: 500;
  color: var(--gold);
  background: var(--gold-pale);
  padding: 3px 10px;
  border-radius: 20px;
  margin-bottom: 10px;
  border: 1px solid rgba(201,146,42,0.2);
}
.resource-card__title {
  font-family: 'Playfair Display', serif;
  font-size: 1rem;
  font-weight: 700;
  color: var(--navy);
  margin-bottom: 8px;
  line-height: 1.3;
}
.resource-card__desc { font-size: 0.85rem; color: var(--gray-500); line-height: 1.5; }

.resource-card__btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  margin: 12px 20px 20px;
  padding: 11px 20px;
  background: var(--navy);
  color: white;
  border-radius: 8px;
  font-size: 0.88rem;
  font-weight: 600;
  transition: var(--transition);
  text-decoration: none;
}
.resource-card__btn:hover { background: var(--gold); }
.resource-card__btn:focus-visible { outline: 3px solid var(--gold); outline-offset: 2px; }

/* Ocultar/mostrar por filtro */
.resource-card.hidden-by-filter { display: none; }
/* -------------------------------------------------------
   14. JUEGOS INTERACTIVOS (NUEVO - COMPLETO Y CORREGIDO)
------------------------------------------------------- */

/* Tabs de juegos */
.games__tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin: 36px 0 24px;
}
.game-tab {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 11px 22px;
  border-radius: 10px;
  font-size: 0.9rem;
  font-weight: 600;
  font-family: 'DM Sans', sans-serif;
  border: 2px solid var(--gray-100);
  color: var(--gray-700);
  background: var(--white);
  cursor: pointer;
  transition: var(--transition);
}
.game-tab:hover { 
  border-color: var(--navy); 
  color: var(--navy); 
}
.game-tab.active { 
  background: var(--navy); 
  color: white; 
  border-color: var(--navy); 
}
.game-tab:focus-visible { 
  outline: 3px solid var(--gold); 
  outline-offset: 2px; 
}

/* Paneles Generales - BLINDADOS CON FONDO BLANCO */
.game-panel { 
  display: none; 
  animation: fadeIn 0.3s ease; 
  background-color: #ffffff !important; /* Fuerza el fondo del contenedor del juego */
  color: #0d1b3e !important;           /* Fuerza que las letras generales sean oscuras */
  padding: 30px !important;
  border-radius: var(--radius-lg);
  box-shadow: 0 10px 30px rgba(13, 27, 62, 0.05);
}
.game-panel.active { 
  display: block; 
}
@keyframes fadeIn { 
  from { opacity: 0; transform: translateY(8px); } 
  to { opacity: 1; transform: translateY(0); } 
}

/* ======= Flashcards ======= */
.flashcard-area {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 24px;
  padding: 24px 0;
}
.flashcard {
  width: 100%;
  max-width: 500px;
  height: 260px;
  perspective: 1200px;
  cursor: pointer;
}
.flashcard__inner {
  position: relative;
  width: 100%; height: 100%;
  transform-style: preserve-3d;
  transition: transform 0.55s cubic-bezier(0.4,0,0.2,1);
}
.flashcard.flipped .flashcard__inner { 
  transform: rotateY(180deg); 
}
.flashcard__front,
.flashcard__back {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius-lg);
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  padding: 36px;
  text-align: center;
}
.flashcard__front {
  background: var(--navy);
  border: 2px solid rgba(255,255,255,0.1);
}

/* Reverso de la Flashcard con contraste corregido */
.flashcard__back {
  background: linear-gradient(135deg, var(--gold) 0%, var(--gold-light) 100%);
  transform: rotateY(180deg);
}
.flashcard__back .flashcard__word {
  color: var(--navy) !important;
}
.flashcard__lang-tag {
  font-family: 'DM Mono', monospace;
  font-size: 0.75rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  margin-bottom: 16px;
  opacity: 0.7;
  color: white;
}
.flashcard__back .flashcard__lang-tag {
  color: var(--navy) !important;
}
.flashcard__word {
  font-family: 'Playfair Display', serif;
  font-size: 2.4rem;
  font-weight: 700;
  color: white;
  margin-bottom: 12px;
  line-height: 1.1;
}
.flashcard__hint {
  font-size: 0.8rem;
  color: rgba(255,255,255,0.55);
  font-style: italic;
}
.flashcard__back .flashcard__hint { 
  color: rgba(13, 27, 62, 0.7) !important; 
}

.flashcard__controls {
  display: flex;
  align-items: center;
  gap: 20px;
}
.flashcard__nav {
  width: 42px; height: 42px;
  border-radius: 50%;
  background: var(--gray-100);
  display: flex; align-items: center; justify-content: center;
  font-size: 0.9rem;
  color: var(--navy);
  cursor: pointer;
  border: none;
  transition: var(--transition);
}
.flashcard__nav:hover { 
  background: var(--navy); 
  color: white; 
}
.flashcard__counter { 
  font-family: 'DM Mono', monospace; 
  font-size: 0.9rem; 
  color: var(--gray-500) !important; 
}

.flashcard__score { 
  display: flex; 
  gap: 12px; 
}
.flash-score-btn {
  display: flex; 
  align-items: center; 
  gap: 8px;
  padding: 10px 20px;
  border-radius: 8px;
  font-size: 0.88rem;
  font-weight: 600;
  font-family: 'DM Sans', sans-serif;
  border: none;
  cursor: pointer;
  transition: var(--transition);
}
.flash-score-btn--wrong { background: #FEE2E2; color: #DC2626; }
.flash-score-btn--wrong:hover { background: #DC2626; color: white; }
.flash-score-btn--correct { background: #D1FAE5; color: #059669; }
.flash-score-btn--correct:hover { background: #059669; color: white; }

.flash-progress-bar {
  width: 100%;
  max-width: 500px;
  height: 6px;
  background: var(--gray-100);
  border-radius: 3px;
  overflow: hidden;
  margin: 0 auto;
}
.flash-progress-fill {
  height: 100%;
  background: linear-gradient(90deg, var(--gold), var(--gold-light));
  border-radius: 3px;
  transition: width 0.4s ease;
}

/* ======= Completar Frases (DISEÑO INTEGRADO - CERO BLANCO) ======= */
.fillin-area {
  background: #0d1b3e !important;        /* Fondo Azul Marino oficial de la academia */
  border: 2px solid #c9922a !important;   /* Borde Dorado elegante */
  border-radius: var(--radius-lg);
  padding: 36px;
  text-align: center;
  min-height: 200px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 24px;
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.15);
}

.fillin-sentence {
  font-family: 'Playfair Display', serif;
  font-size: 1.6rem !important;
  color: #ffffff !important;              /* Texto blanco (resalta sobre el fondo azul marino) */
  line-height: 1.8;
}

/* Contador "1 / 9" */
.fillin-area span, 
.fillin-sentence + span {
  font-family: 'DM Mono', monospace;
  font-size: 0.9rem;
  color: #c9922a !important;              /* Texto Dorado */
  background-color: #1e293b !important;   /* Fondo azul oscuro mate */
  border: 1px solid #c9922a !important;
  padding: 4px 12px;
  border-radius: 6px;
  display: inline-block;
  margin: 8px 0;
  font-weight: 600;
}

/* Contenedores de las opciones */
.fillin-area .options-container, 
.fillin-controls {
  display: flex;
  justify-content: center;
  gap: 12px;
  margin-top: 20px;
  flex-wrap: wrap;
}

/* Botones de opciones del juego (goes, go, gone...) */
.fillin-area button, 
.fillin-area .game-option, 
.fillin-option-btn {
  display: inline-block !important;
  padding: 12px 24px !important;
  border: 2px solid #e2e8f0 !important;   /* Borde gris claro */
  border-radius: 8px !important;
  background-color: #f1f5f9 !important;   /* Fondo gris ceniza suave (NO blanco) */
  color: #0d1b3e !important;              /* Texto Azul Marino muy legible */
  font-size: 1.05rem !important;
  font-weight: 700 !important;
  font-family: 'DM Sans', sans-serif;
  cursor: pointer;
  transition: all 0.2s ease;
}

/* Efecto Hover: Se ilumina en Dorado */
.fillin-area button:hover, 
.fillin-area .game-option:hover {
  border-color: #c9922a !important;
  background-color: #c9922a !important;   /* Fondo Dorado */
  color: #0d1b3e !important;              /* Texto Azul Marino */
}

/* Estado Seleccionado: Resalta en un dorado más brillante o azul complementario */
.fillin-area button.selected, 
.fillin-area .game-option.selected {
  background-color: #c9922a !important; 
  color: #ffffff !important;              /* Texto blanco sobre el botón dorado activo */
  border-color: #c9922a !important;
}

.fillin-input {
  display: inline-block;
  border: none;
  border-bottom: 3px solid #c9922a !important;
  font-family: 'DM Sans', sans-serif;
  font-size: 1.3rem;
  font-weight: 600;
  color: #ffffff !important;
  text-align: center;
  width: 180px;
  padding: 4px 8px;
  background: transparent;
  outline: none;
}

.fillin-hint { 
  font-size: 0.88rem; 
  color: #94a3b8 !important;              /* Gris intermedio para la pista */
  font-style: italic; 
}

.fillin-feedback {
  margin-top: 14px;
  font-size: 0.95rem;
  font-weight: 600;
  padding: 12px 20px;
  border-radius: 8px;
  min-height: 48px;
}
.fillin-feedback.correct { background: #059669; color: #ffffff; }
.fillin-feedback.incorrect { background: #dc2626; color: #ffffff; }


/* ======= Word Match (Asociar Palabras - AZUL Y DORADO) ======= */
.game-instructions {
  font-size: 1.05rem !important;
  color: #c9922a !important;              /* Instrucciones en Dorado de la marca */
  margin-bottom: 24px;
  font-weight: 600;
}

.match-area {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  max-width: 700px;
  background: #0d1b3e !important;         /* Fondo Azul Marino para la cuadrícula */
  padding: 15px;
  border-radius: var(--radius-lg);
  border: 2px solid #c9922a !important;
}

.match-word {
  padding: 14px 20px;
  border: 2px solid #e2e8f0 !important; 
  border-radius: 10px;
  font-size: 1rem !important;
  font-weight: 700;
  color: #0d1b3e !important;              /* Texto Azul Marino */
  background: #f1f5f9 !important;         /* Cajas gris ceniza suave (NO blancas) */
  cursor: pointer;
  transition: all 0.2s ease;
  text-align: center;
  font-family: 'DM Sans', sans-serif;
}

/* Hover dorado */
.match-word:hover { 
  border-color: #c9922a !important; 
  background: #c9922a !important; 
  color: #0d1b3e !important;       
}

/* Seleccionado se vuelve azul intermedio con texto dorado */
.match-word.selected { 
  background: #1e293b !important; 
  color: #c9922a !important; 
  border-color: #c9922a !important; 
}

/* Éxito (Verde corporativo opaco) */
.match-word.matched { 
  background: #10b981 !important; 
  color: #ffffff !important; 
  border-color: #10b981 !important; 
  cursor: default; 
}

/* Error (Rojo suave) */
.match-word.error { 
  background: #ef4444 !important; 
  color: #ffffff !important; 
  border-color: #ef4444 !important; 
}

.match-result { 
  margin-top: 20px; 
  font-size: 1.1rem; 
  font-weight: 700; 
  color: #c9922a !important;               /* Mensajes en Dorado */
  min-height: 28px; 
}
/* -------------------------------------------------------
   15. EXÁMENES INTERNACIONALES (NUEVO)
------------------------------------------------------- */
.exams__grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: 24px;
  margin-top: 56px;
}
.exam-card {
  background: var(--white);
  border: 1.5px solid var(--gray-100);
  border-radius: var(--radius-lg);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  transition: var(--transition);
  text-decoration: none;
  color: inherit;
  position: relative;
}
.exam-card::after {
  content: '';
  position: absolute;
  bottom: 0; left: 0; right: 0;
  height: 3px;
  transform: scaleX(0);
  transform-origin: left;
  transition: transform var(--transition);
}
.exam-card:hover { transform: translateY(-6px); box-shadow: var(--shadow-md); border-color: transparent; }
.exam-card:hover::after { transform: scaleX(1); }
.exam-card:focus-visible { outline: 3px solid var(--gold); outline-offset: 3px; }

/* Cabeceras por idioma/examen */
.exam-card__header {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 20px 24px;
  color: white;
}
.exam-card__header--cambridge { background: linear-gradient(135deg, #003474, #0052a5); }
.exam-card__header--ielts     { background: linear-gradient(135deg, #c8102e, #a00c23); }
.exam-card__header--toefl     { background: linear-gradient(135deg, #00703c, #005a30); }
.exam-card__header--delf      { background: linear-gradient(135deg, #003189, #0047c9); }
.exam-card__header--dele      { background: linear-gradient(135deg, #c60b1e, #9c0817); }
.exam-card__header--cils      { background: linear-gradient(135deg, #008c45, #006b35); }

.exam-card__header::after { background: var(--gold); }
.exam-card--cambridge::after { background: #003474; }
.exam-card--ielts::after     { background: #c8102e; }

.exam-card__flag { font-size: 2rem; }
.exam-card__org {
  font-family: 'Playfair Display', serif;
  font-size: 1.3rem;
  font-weight: 700;
}

.exam-card__body { padding: 20px 24px; flex-grow: 1; }
.exam-card__name {
  font-family: 'Playfair Display', serif;
  font-size: 1rem;
  font-weight: 700;
  color: var(--navy);
  margin-bottom: 10px;
  line-height: 1.3;
}
.exam-card__desc { font-size: 0.85rem; color: var(--gray-500); line-height: 1.6; margin-bottom: 14px; }
.exam-card__levels { display: flex; flex-wrap: wrap; gap: 6px; }
.exam-level-badge {
  font-family: 'DM Mono', monospace;
  font-size: 0.72rem;
  font-weight: 500;
  background: var(--gray-100);
  color: var(--gray-700);
  padding: 4px 10px;
  border-radius: 20px;
}

.exam-card__footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 24px;
  border-top: 1px solid var(--gray-100);
  background: var(--gray-50);
}
.exam-card__prep {
  font-size: 0.78rem;
  font-weight: 600;
  color: var(--gold);
  background: var(--gold-pale);
  padding: 4px 12px;
  border-radius: 20px;
  border: 1px solid rgba(201,146,42,0.25);
}
.exam-card__link {
  font-size: 0.8rem;
  color: var(--gray-500);
  display: flex;
  align-items: center;
  gap: 5px;
  transition: color 0.2s;
}
.exam-card:hover .exam-card__link { color: var(--navy); }

/* CTA inferior de exámenes */
.exams__cta {
  text-align: center;
  margin-top: 56px;
  padding: 40px;
  background: var(--white);
  border-radius: var(--radius-lg);
  border: 1.5px solid var(--gold-pale);
}
.exams__cta p {
  font-size: 1.05rem;
  color: var(--gray-700);
  max-width: 600px;
  margin: 0 auto 24px;
  line-height: 1.7;
}


/* -------------------------------------------------------
   16. EQUIPO DE TRABAJO
------------------------------------------------------- */
.team__grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 28px;
  margin-top: 56px;
}
.team-card {
  background: var(--white);
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--shadow-sm);
  border: 1.5px solid var(--gray-100);
  transition: var(--transition);
}
.team-card:hover { transform: translateY(-6px); box-shadow: var(--shadow-md); border-color: var(--gold-pale); }
.team-card--founder {
  grid-column: 1 / -1;
  display: flex;
  align-items: stretch;
  max-width: 780px;
  margin: 0 auto;
}
.team-card__photo { position: relative; overflow: hidden; }
.team-card--founder .team-card__photo { width: 280px; flex-shrink: 0; }
.team-card__avatar {
  width: 100%;
  aspect-ratio: 1;
  background: linear-gradient(135deg, var(--navy) 0%, var(--navy-light) 100%);
  display: flex; align-items: center; justify-content: center;
  font-family: 'Playfair Display', serif;
  font-size: 3rem; font-weight: 700;
  color: var(--gold-light);
  overflow: hidden;
}
.team-card__img { width: 100%; height: 100%; object-fit: cover; object-position: top; }
.team-card--founder .team-card__avatar { aspect-ratio: unset; height: 100%; min-height: 280px; }
.team-card__role-badge {
  position: absolute;
  bottom: 12px; left: 12px;
  background: var(--gold);
  color: white;
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  padding: 5px 12px;
  border-radius: 20px;
}
.team-card__body { padding: 28px; flex: 1; }
.team-card__name { font-family: 'Playfair Display', serif; font-size: 1.3rem; font-weight: 700; color: var(--navy); margin-bottom: 4px; }
.team-card__title { font-size: 0.85rem; color: var(--gold); font-weight: 600; margin-bottom: 14px; }
.team-card__bio { font-size: 0.88rem; color: var(--gray-500); line-height: 1.65; margin-bottom: 20px; }
.team-card__langs { display: flex; flex-wrap: wrap; gap: 6px; }
.team-lang-tag { font-size: 0.78rem; font-weight: 500; color: var(--navy); background: var(--gray-100); padding: 4px 10px; border-radius: 20px; }
.team-card__social { display: flex; gap: 10px; margin-top: 16px; }
.social-btn-sm {
  width: 34px; height: 34px;
  border-radius: 8px;
  background: var(--gray-100);
  display: flex; align-items: center; justify-content: center;
  font-size: 0.9rem;
  transition: var(--transition);
  cursor: pointer;
}
.social-btn-sm:hover { background: var(--navy); color: white; }


/* -------------------------------------------------------
   17. FORMULARIO DE LEADS
------------------------------------------------------- */
.leads {
  background: linear-gradient(135deg, var(--navy) 0%, var(--navy-mid) 50%, var(--navy-light) 100%);
  color: white;
  position: relative;
  overflow: hidden;
}
.leads__bg {
  position: absolute; inset: 0;
  background: url("data:image/svg+xml,%3Csvg width='80' height='80' viewBox='0 0 80 80' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='%23ffffff' fill-opacity='0.02'%3E%3Ccircle cx='40' cy='40' r='20'/%3E%3C/g%3E%3C/svg%3E");
}
.leads__inner {
  position: relative; z-index: 1;
  display: grid;
  grid-template-columns: 1fr 1.2fr;
  gap: 60px;
  align-items: center;
}
.leads__info h2 { font-family: 'Playfair Display', serif; font-size: clamp(2rem, 3.5vw, 2.8rem); font-weight: 700; line-height: 1.15; margin-bottom: 18px; }
.leads__info p { color: rgba(255,255,255,0.68); font-size: 1rem; line-height: 1.7; margin-bottom: 32px; }
.leads__perks { display: flex; flex-direction: column; gap: 14px; }
.perk-item { display: flex; align-items: center; gap: 12px; font-size: 0.9rem; color: rgba(255,255,255,0.8); }
.perk-dot { width: 8px; height: 8px; background: var(--gold); border-radius: 50%; flex-shrink: 0; }

.leads__form-card {
  background: var(--white);
  border-radius: var(--radius-lg);
  padding: 40px;
  box-shadow: var(--shadow-lg);
}
.leads__form-card h3 { font-family: 'Playfair Display', serif; font-size: 1.5rem; color: var(--navy); margin-bottom: 8px; }
.leads__form-card > p { font-size: 0.88rem; color: var(--gray-500); margin-bottom: 28px; }

.form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.form-group { display: flex; flex-direction: column; gap: 6px; }
.form-group--full { grid-column: 1 / -1; }
.form-group label { font-size: 0.82rem; font-weight: 600; color: var(--gray-700); }
.form-group input,
.form-group select,
.form-group textarea {
  padding: 12px 16px;
  border: 1.5px solid var(--gray-100);
  border-radius: 8px;
  font-family: 'DM Sans', sans-serif;
  font-size: 0.9rem;
  color: var(--text);
  background: var(--gray-50);
  outline: none;
  transition: border-color var(--transition);
  width: 100%;
}
.form-group input:focus,
.form-group select:focus,
.form-group textarea:focus { border-color: var(--navy); background: white; }
.form-group textarea { resize: vertical; min-height: 90px; }
.form-group select { appearance: none; cursor: pointer; }

.form-submit {
  width: 100%;
  padding: 15px;
  margin-top: 20px;
  background: var(--navy);
  color: white;
  border-radius: 8px;
  font-size: 1rem;
  font-weight: 600;
  transition: var(--transition);
  cursor: pointer;
  border: none;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  font-family: 'DM Sans', sans-serif;
}
.form-submit:hover { background: var(--gold); transform: translateY(-2px); }
.form-submit:disabled { opacity: 0.7; cursor: not-allowed; transform: none; }

.form-success { display: none; text-align: center; padding: 32px; }
.form-success.show { display: block; }
.form-success .check { font-size: 3rem; margin-bottom: 12px; }
.form-success h4 { font-family: 'Playfair Display', serif; color: var(--navy); font-size: 1.4rem; margin-bottom: 8px; }
.form-success p { color: var(--gray-500); font-size: 0.9rem; }

/* Animación del spinner del botón */
@keyframes spin { to { transform: rotate(360deg); } }


/* -------------------------------------------------------
   18. TESTIMONIOS
------------------------------------------------------- */
.testimonials__grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: 24px;
  margin-top: 56px;
}
.testimonial-card {
  background: var(--white);
  border-radius: var(--radius-lg);
  padding: 32px;
  border: 1.5px solid var(--gray-100);
  transition: var(--transition);
  position: relative;
}
.testimonial-card:hover { border-color: var(--gold-pale); box-shadow: var(--shadow-md); }
.testimonial-card::before {
  content: '"';
  position: absolute;
  top: 20px; right: 24px;
  font-family: 'Playfair Display', serif;
  font-size: 5rem;
  color: var(--gold-pale);
  line-height: 1;
  pointer-events: none;
}
.testimonial-stars { display: flex; gap: 3px; margin-bottom: 16px; color: var(--gold); font-size: 0.9rem; }
.testimonial-text { font-size: 0.92rem; color: var(--gray-700); line-height: 1.7; margin-bottom: 22px; }
.testimonial-author { display: flex; align-items: center; gap: 12px; }
.t-avatar {
  width: 42px; height: 42px;
  border-radius: 50%;
  background: var(--navy);
  display: flex; align-items: center; justify-content: center;
  font-size: 1rem; font-weight: 700;
  color: var(--gold-light);
  font-family: 'Playfair Display', serif;
  flex-shrink: 0;
}
.t-name { font-weight: 600; font-size: 0.9rem; color: var(--navy); }
.t-detail { font-size: 0.8rem; color: var(--gray-500); }


/* -------------------------------------------------------
   19. FOOTER
------------------------------------------------------- */
.footer { background: var(--navy); color: white; padding: 72px 0 0; }
.footer__grid {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr 1.5fr;
  gap: 48px;
  margin-bottom: 56px;
}
.footer__about p { color: rgba(255,255,255,0.6); font-size: 0.88rem; line-height: 1.7; margin: 16px 0 24px; max-width: 320px; }
.footer__social { display: flex; gap: 10px; }
.social-btn {
  width: 38px; height: 38px;
  border-radius: 10px;
  background: rgba(255,255,255,0.08);
  border: 1px solid rgba(255,255,255,0.1);
  display: flex; align-items: center; justify-content: center;
  font-size: 1rem;
  color: rgba(255,255,255,0.7);
  transition: var(--transition);
  text-decoration: none;
}
.social-btn:hover { background: var(--gold); border-color: var(--gold); color: white; }
.social-btn:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }

.footer__col h4 {
  font-weight: 600;
  font-size: 0.9rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.45);
  margin-bottom: 20px;
  font-family: 'DM Mono', monospace;
}
.footer__links { display: flex; flex-direction: column; gap: 11px; }
.footer__links a { color: rgba(255,255,255,0.68); font-size: 0.88rem; transition: color 0.2s; }
.footer__links a:hover { color: var(--gold-light); }

.footer__contact-items { display: flex; flex-direction: column; gap: 14px; }
.contact-item { display: flex; align-items: flex-start; gap: 12px; }
.contact-icon {
  width: 32px; height: 32px;
  background: rgba(255,255,255,0.08);
  border-radius: 8px;
  display: flex; align-items: center; justify-content: center;
  font-size: 0.9rem;
  flex-shrink: 0;
}
.contact-item a, .contact-item span { color: rgba(255,255,255,0.68); font-size: 0.85rem; line-height: 1.5; transition: color 0.2s; }
.contact-item a:hover { color: var(--gold-light); }
.wa-cta {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: #25D366;
  color: white;
  padding: 10px 18px;
  border-radius: 8px;
  font-size: 0.88rem;
  font-weight: 600;
  margin-top: 12px;
  transition: var(--transition);
}
.wa-cta:hover { background: #1db553; transform: translateY(-1px); }

.footer__bottom {
  border-top: 1px solid rgba(255,255,255,0.08);
  padding: 24px 0;
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 12px;
}
.footer__bottom p { font-size: 0.82rem; color: rgba(255,255,255,0.4); }
.footer__bottom-links { display: flex; gap: 20px; }
.footer__bottom-links a { font-size: 0.82rem; color: rgba(255,255,255,0.4); transition: color 0.2s; }
.footer__bottom-links a:hover { color: var(--gold-light); }


/* -------------------------------------------------------
   20. CHATBOT (SOLUCIÓN BLINDADA ALINEACIÓN DERECHA)
------------------------------------------------------- */

.chatbot-trigger {
  position: fixed !important;
  bottom: 28px !important; 
  right: 28px !important;     /* Fuerza la posición al extremo derecho */
  left: auto !important;      /* Cancela de golpe cualquier 'left' heredado o erróneo */
  margin: 0 !important;       /* Evita que márgenes externos lo empujen */
  z-index: 9999 !important;   /* Lo mantiene por encima de cualquier elemento (incluido el footer) */
  width: 60px; 
  height: 60px;
  border-radius: 50%;
  background: var(--gold);
  box-shadow: 0 6px 28px rgba(201,146,42,0.5);
  display: flex; 
  align-items: center; 
  justify-content: center;
  cursor: pointer;
  transition: var(--transition);
  border: 3px solid white;
}

.chatbot-trigger:hover { 
  transform: scale(1.08); 
  background: var(--gold-light); 
}

.chatbot-trigger:focus-visible { 
  outline: 3px solid var(--navy); 
  outline-offset: 3px; 
}

.chatbot-trigger svg { 
  width: 26px; 
  height: 26px; 
  color: white; 
}

.chatbot-badge {
  position: absolute;
  top: -2px; 
  right: -2px;
  width: 16px; 
  height: 16px;
  background: #ff4d4d;
  border-radius: 50%;
  border: 2px solid white;
  animation: pulse 2s infinite;
}

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

/* --- VENTANA DEL CHAT --- */
.chatbot-window {
  position: fixed !important;
  bottom: 100px !important;   /* Posicionado perfectamente arriba del botón */
  right: 28px !important;     /* Alineado con el gatillo a la derecha */
  left: auto !important;      /* Cancela cualquier desvío a la izquierda */
  z-index: 9998 !important;   /* Un nivel por debajo del gatillo, pero sobre la web */
  width: 360px;
  max-height: 500px;
  background: var(--white);
  border-radius: var(--radius-lg);
  box-shadow: 0 24px 80px rgba(13,27,62,0.25);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  border: 1px solid var(--gray-100);
  opacity: 0;
  transform: translateY(20px) scale(0.96);
  pointer-events: none;
  transition: all 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.chatbot-window.open { 
  opacity: 1; 
  transform: translateY(0) scale(1); 
  pointer-events: all; 
}

/* --- ENCABEZADO DEL CHAT --- */
.chat-header {
  background: var(--navy);
  padding: 18px 20px;
  display: flex; 
  align-items: center; 
  gap: 12px;
}

.chat-avatar { 
  width: 38px; 
  height: 38px; 
  background: var(--gold); 
  border-radius: 50%; 
  display: flex; 
  align-items: center; 
  justify-content: center; 
  font-size: 1.1rem; 
  flex-shrink: 0; 
}

.chat-header-info h4 { 
  color: white; 
  font-size: 0.92rem; 
  font-weight: 600; 
}

.chat-header-info p { 
  font-size: 0.75rem; 
  color: rgba(255,255,255,0.6); 
}

.chat-status { 
  margin-left: auto; 
  display: flex; 
  align-items: center; 
  gap: 6px; 
  font-size: 0.75rem; 
  color: #4ade80; 
}

.chat-status::before { 
  content: ''; 
  width: 7px; 
  height: 7px; 
  background: #4ade80; 
  border-radius: 50%; 
  animation: pulse 2s infinite; 
}

.chat-close { 
  background: none; 
  border: none; 
  color: rgba(255,255,255,0.6); 
  cursor: pointer; 
  font-size: 1.2rem; 
  padding: 4px; 
  display: flex; 
  align-items: center; 
  justify-content: center; 
  margin-left: 8px; 
}

.chat-close:hover { 
  color: white; 
}

/* --- ÁREA DE MENSAJES --- */
.chat-messages {
  flex: 1;
  overflow-y: auto;
  padding: 20px;
  display: flex; 
  flex-direction: column; 
  gap: 16px;
  scroll-behavior: smooth;
}

.chat-messages::-webkit-scrollbar { 
  width: 4px; 
}

.chat-messages::-webkit-scrollbar-track { 
  background: transparent; 
}

.chat-messages::-webkit-scrollbar-thumb { 
  background: var(--gray-300); 
  border-radius: 2px; 
}

.msg { 
  display: flex; 
  gap: 8px; 
  animation: msgIn 0.3s ease; 
}

@keyframes msgIn { 
  from { opacity: 0; transform: translateY(6px); } 
  to { opacity: 1; transform: translateY(0); } 
}

.msg.user { 
  flex-direction: row-reverse; 
}

.msg-avatar { 
  width: 28px; 
  height: 28px; 
  border-radius: 50%; 
  background: var(--gold); 
  display: flex; 
  align-items: center; 
  justify-content: center; 
  font-size: 0.75rem; 
  flex-shrink: 0; 
  color: white; 
  font-weight: 700; 
  margin-top: 2px; 
}

.msg.user .msg-avatar { 
  background: var(--navy); 
}

.msg-bubble { 
  max-width: 80%; 
  padding: 10px 14px; 
  border-radius: 14px; 
  font-size: 0.85rem; 
  line-height: 1.55; 
}

.msg.bot .msg-bubble  { 
  background: var(--gray-50); 
  color: var(--text); 
  border-bottom-left-radius: 4px; 
}

.msg.user .msg-bubble { 
  background: var(--navy); 
  color: white; 
  border-bottom-right-radius: 4px; 
}

/* --- RESPUESTAS RÁPIDAS --- */
.quick-replies { 
  display: flex; 
  flex-wrap: wrap; 
  gap: 8px; 
  padding: 0 20px 16px; 
}

.qr-btn {
  background: var(--white);
  border: 1.5px solid var(--gray-100);
  color: var(--navy);
  padding: 7px 14px;
  border-radius: 20px;
  font-size: 0.78rem;
  font-weight: 500;
  cursor: pointer;
  transition: var(--transition);
  font-family: 'DM Sans', sans-serif;
}

.qr-btn:hover { 
  border-color: var(--gold); 
  color: var(--gold); 
  background: var(--gold-pale); 
}

/* --- CUADRO DE ENTRADA (INPUT AREA) --- */
.chat-input-area { 
  border-top: 1px solid var(--gray-100); 
  padding: 12px 16px; 
  display: flex; 
  gap: 10px; 
  align-items: center; 
}

.chat-input {
  flex: 1;
  border: 1.5px solid var(--gray-100);
  border-radius: 24px;
  padding: 10px 16px;
  font-size: 0.85rem;
  font-family: 'DM Sans', sans-serif;
  outline: none;
  transition: border-color 0.2s;
  background: var(--gray-50);
}

.chat-input:focus { 
  border-color: var(--navy); 
  background: white; 
}

.chat-send {
  width: 38px; 
  height: 38px;
  background: var(--navy);
  border-radius: 50%;
  display: flex; 
  align-items: center; 
  justify-content: center;
  cursor: pointer;
  border: none;
  transition: var(--transition);
  flex-shrink: 0;
}

.chat-send:hover { 
  background: var(--gold); 
}

.chat-send svg { 
  width: 16px; 
  height: 16px; 
  color: white; 
}

/* --- INDICADOR DE ESCRITURA (TYPING INDICATOR) --- */
.typing-indicator { 
  display: flex; 
  gap: 4px; 
  align-items: center; 
  padding: 10px 14px; 
  background: var(--gray-50); 
  border-radius: 14px; 
  border-bottom-left-radius: 4px; 
  width: fit-content; 
}

.typing-dot { 
  width: 7px; 
  height: 7px; 
  background: var(--gray-300); 
  border-radius: 50%; 
  animation: typingDot 1.4s infinite; 
}

.typing-dot:nth-child(2) { 
  animation-delay: 0.2s; 
}

.typing-dot:nth-child(3) { 
  animation-delay: 0.4s; 
}

@keyframes typingDot { 
  0%, 60%, 100% { transform: translateY(0); } 
  30% { transform: translateY(-6px); } 
}


/* -------------------------------------------------------
   21. ACCESIBILIDAD
------------------------------------------------------- */
/* Clase para elementos visibles solo para lectores de pantalla */
.sr-only {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0,0,0,0);
  white-space: nowrap;
  border: 0;
}
/* Focus global para teclado */
:focus-visible { outline: 3px solid var(--gold); outline-offset: 3px; }


/* -------------------------------------------------------
   22. MEDIA QUERIES
------------------------------------------------------- */

/* --- Tablets (≤ 1024px) --- */
@media (max-width: 1024px) {
  .method__grid { grid-template-columns: repeat(2, 1fr); gap: 20px; }
  .collage__grid { grid-template-columns: repeat(2, 1fr); grid-auto-rows: 200px; }
}

/* --- Tablets medianas (≤ 992px) --- */
@media (max-width: 992px) {
  /* Navbar */
  .hamburger { display: flex; order: 3; }
  .navbar__right { order: 2; margin-left: auto; }
  .navbar__nav { display: none; }

  /* Hero */
  .hero { min-height: auto; padding-top: 90px; }
  .hero__inner { grid-template-columns: 1fr; gap: 40px; padding: 40px 20px; text-align: center; }
  .hero__eyebrow { justify-content: center; }
  .hero__subtitle { margin-left: auto; margin-right: auto; }
  .hero__ctas { justify-content: center; }
  .hero__stats { justify-content: center; gap: 48px; }
  .hero__card:nth-child(2) { margin-left: 0; }
  .btn--whatsapp { width: 100%; justify-content: center; }

  /* Why us */
  .why__grid { grid-template-columns: 1fr; gap: 48px; margin-top: 40px; }
  .why__visual { padding-bottom: 48px; }

  /* Leads form */
  .leads__inner { grid-template-columns: 1fr; gap: 40px; padding: 60px 20px; }
  .leads__info { text-align: center; }
  .leads__perks { align-items: center; }

  /* Footer */
  .footer { padding-top: 56px; }
  .footer__grid { grid-template-columns: 1fr 1fr; gap: 40px; margin-bottom: 40px; }
  .footer__about p { max-width: 100%; }
}

/* --- Tablets pequeñas (≤ 768px) --- */
@media (max-width: 768px) {
  .section { padding: 72px 0; }
  .team__grid { grid-template-columns: 1fr; gap: 20px; margin-top: 40px; }
  .team-card--founder { flex-direction: column; max-width: 100%; }
  .team-card--founder .team-card__photo { width: 100%; }
  .team-card--founder .team-card__avatar { aspect-ratio: 1; min-height: auto; height: auto; padding: 40px 0; }
  .testimonials__grid { grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 20px; margin-top: 40px; }
  .testimonial-card { padding: 24px; }
  .exams__grid { grid-template-columns: 1fr; }
  .match-area { grid-template-columns: 1fr; }
}

/* --- Móviles (≤ 576px) --- */
@media (max-width: 576px) {
  .hero { padding-top: 80px; }
  .hero__inner { gap: 32px; padding: 24px 16px; }
  .hero__stats { flex-direction: column; align-items: center; gap: 20px; padding-top: 24px; }
  .hero__stat-num { font-size: 2rem; }
  .hero__card { padding: 20px; }

  .why__card-main { padding: 28px 20px; }
  .why__card-main h3 { font-size: 1.4rem; }
  .why__stat-card {
    position: relative;
    bottom: auto; right: auto;
    margin-top: -16px;
    margin-left: auto; margin-right: auto;
    width: fit-content;
    text-align: center;
  }
  .cert-badges { justify-content: center; }

  .leads__form-card { padding: 28px 20px; }
  .form-grid { grid-template-columns: 1fr; gap: 12px; }
  .form-group input, .form-group select, .form-group textarea { padding: 14px 16px; font-size: 0.95rem; }

  .footer__grid { grid-template-columns: 1fr; gap: 32px; }
  .footer__col h4 { margin-bottom: 12px; }
  .wa-cta { width: 100%; justify-content: center; padding: 12px; }
  .footer__bottom { flex-direction: column; text-align: center; gap: 16px; }
  .footer__bottom-links { justify-content: center; width: 100%; }

  .chatbot-window { width: calc(100vw - 32px); right: 16px; }

  .games__tabs { gap: 8px; }
  .game-tab { padding: 9px 14px; font-size: 0.82rem; }
  .flashcard { height: 220px; }
  .flashcard__word { font-size: 1.8rem; }
  .recursos__grid { grid-template-columns: 1fr; }
  .exams__cta { padding: 28px 20px; }
}

/* --- Móviles muy pequeños (≤ 480px) --- */
@media (max-width: 480px) {
  .logo-text span:last-child { display: none; }
  .navbar__inner { gap: 12px; }
  .collage__grid { display: flex; flex-direction: column; gap: 12px; }
  .collage__item { height: 250px; }
  .collage__item--big { height: 300px; }
  .team__grid { grid-template-columns: 1fr; }
  .testimonials__grid { grid-template-columns: 1fr; gap: 16px; }
  .testimonial-card { padding: 20px; }
  .testimonial-card::before { opacity: 0.5; }
  .method__grid { grid-template-columns: 1fr; gap: 16px; }
  .method-card__bg-wrap { height: 180px; }
}