/* ================================================================
   KORE CLASES — style.css
   Arquitectura CSS: Variables → Reset → Base → Componentes → Secciones
   Empezamos siempre con variables porque si quieres cambiar
   un color, solo lo cambias en UN lugar y se actualiza en toda la página.
================================================================ */


/* ----------------------------------------------------------------
   1. VARIABLES GLOBALES (el "tema" de Kore)
   La pseudoclase :root significa "aplica esto a toda la página".
   Las variables CSS empiezan con "--" y se usan como var(--nombre).
---------------------------------------------------------------- */
:root {
  /* Paleta de colores definida en nuestra sesión */
  --color-bg:         #0A0A0F;   /* Fondo principal oscuro */
  --color-surface:    #13131A;   /* Fondo de cards y secciones */
  --color-surface-2:  #1E1E2A;   /* Bordes, inputs */
  --color-accent:     #634DFF;   /* Violeta — CTA y acciones principales */
  --color-mint:       #00D4A8;   /* Verde menta — detalles y éxito */
  --color-text:       #F5F5F7;   /* Texto principal (casi blanco) */
  --color-muted:      #8E8E9A;   /* Texto secundario (gris suave) */

  /* Tipografías */
  --font-body:  'Inter', sans-serif;    /* Texto, párrafos, labels */
  --font-title: 'Syne', sans-serif;    /* Títulos y encabezados */

  /* Espaciado consistente — usamos múltiplos de 8px (estándar en diseño) */
  --space-xs:   8px;
  --space-sm:   16px;
  --space-md:   24px;
  --space-lg:   48px;
  --space-xl:   80px;
  --space-2xl:  120px;

  /* Bordes redondeados */
  --radius-sm:  6px;
  --radius-md:  12px;
  --radius-lg:  20px;
  --radius-pill: 999px;   /* Para badges y botones redondeados */

  /* Ancho máximo del contenido — evita que se vea horrible en pantallas gigantes */
  --max-width: 1100px;
}


/* ----------------------------------------------------------------
   2. RESET BÁSICO
   Los navegadores tienen estilos por defecto que se ven diferente
   en Chrome, Firefox y Safari. Este reset los neutraliza para
   que nuestra página se vea igual en todos.
---------------------------------------------------------------- */
*, *::before, *::after {
  box-sizing: border-box;   /* Padding NO aumenta el tamaño del elemento */
  margin: 0;
  padding: 0;
}

html {
  scroll-behavior: smooth;  /* Scroll suave al hacer click en anchor links */
}

body {
  font-family: var(--font-body);
  background-color: var(--color-bg);
  color: var(--color-text);
  line-height: 1.7;         /* Espaciado entre líneas de texto — más legible */
  -webkit-font-smoothing: antialiased;  /* Texto más nítido en Mac/iOS */
}

/* Los links no tienen subrayado por defecto en nuestra página */
a {
  text-decoration: none;
  color: inherit;
}

/* Las listas no tienen bullets por defecto */
ul {
  list-style: none;
}

/* Las imágenes nunca se desbordan de su contenedor */
img {
  max-width: 100%;
  display: block;
}


/* ----------------------------------------------------------------
   3. UTILIDADES REUTILIZABLES
   Clases que usaremos en múltiples secciones.
---------------------------------------------------------------- */

/* .container centra el contenido y le pone un ancho máximo.
   El padding horizontal evita que el texto toque los bordes en móvil. */
.container {
  width: 100%;
  max-width: var(--max-width);
  margin: 0 auto;           /* auto en lados = centrado horizontal */
  padding: 0 var(--space-md);
}

/* Texto con el color de acento violeta */
.text-accent {
  color: var(--color-accent);
}

/* ----------------------------------------------------------------
   4. BOTONES — Sistema de botones reutilizable
   Tenemos 3 variantes: primario (violeta sólido), ghost (borde),
   y el estado base que comparten ambos.
---------------------------------------------------------------- */
.btn {
  display: inline-flex;
  align-items: center;
  gap: var(--space-xs);
  padding: 10px 20px;
  border-radius: var(--radius-pill);
  font-family: var(--font-body);
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
  border: 1px solid transparent;
  /* transition: hace que el hover se vea suave, no brusco */
  transition: all 0.2s ease;
  white-space: nowrap;   /* El texto del botón no se parte en dos líneas */
}

/* Botón grande para Hero y CTAs importantes */
.btn-lg {
  padding: 14px 28px;
  font-size: 15px;
}

/* Botón principal: fondo violeta sólido */
.btn-primary {
  background-color: var(--color-accent);
  color: #fff;
  border-color: var(--color-accent);
}

.btn-primary:hover {
  background-color: #7B63FF;   /* Violeta ligeramente más claro al pasar el mouse */
  transform: translateY(-1px); /* Sube 1px — efecto de "levantamiento" sutil */
}

/* Botón fantasma: borde visible, fondo transparente */
.btn-ghost {
  background-color: transparent;
  color: var(--color-text);
  border-color: var(--color-surface-2);
}

.btn-ghost:hover {
  background-color: var(--color-surface);
  border-color: var(--color-muted);
}


/* ----------------------------------------------------------------
   5. NAVBAR
   position: sticky — se queda pegada al top al hacer scroll.
   z-index: 100 — asegura que esté encima de todo lo demás.
   backdrop-filter: blur — efecto de "vidrio esmerilado" moderno.
---------------------------------------------------------------- */
.navbar {
  position: sticky;
  top: 0;
  z-index: 100;
  padding: var(--space-sm) 0;
  border-bottom: 1px solid var(--color-surface-2);

  /* Efecto glassmorphism: fondo semitransparente + blur */
  background-color: rgba(10, 10, 15, 0.85);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);   /* Safari necesita el prefijo */
}

/* Flexbox pone los 3 elementos (logo, links, botón) en una fila
   y los distribuye con espacio entre ellos */
.nav-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-md);
}

.nav-logo {
  display: flex;
  align-items: center;
  gap: 6px;
  font-family: var(--font-title);
  font-size: 20px;
  font-weight: 700;
}

/* El símbolo ∅ del logo en violeta — mantiene conexión con EMPTY */
.logo-symbol {
  color: var(--color-accent);
  font-size: 22px;
}

.logo-text {
  color: var(--color-text);
  letter-spacing: 0.05em;
}

.nav-links {
  display: flex;
  align-items: center;
  gap: var(--space-lg);
}

.nav-links a {
  font-size: 14px;
  color: var(--color-muted);
  transition: color 0.2s ease;
}

.nav-links a:hover {
  color: var(--color-text);
}


/* ----------------------------------------------------------------
   6. HERO SECTION
   La sección estrella. Usamos position: relative para poder
   posicionar el símbolo ∅ decorativo de fondo (position: absolute).
---------------------------------------------------------------- */
.hero {
  position: relative;
  overflow: hidden;       /* El ∅ de fondo no se derrama fuera de la sección */
  padding: var(--space-2xl) 0 var(--space-xl);
  text-align: center;
}

.hero-inner {
  position: relative;    /* z-index solo funciona con position != static */
  z-index: 1;            /* El contenido queda ENCIMA del ∅ de fondo */
}

/* Badge pequeño arriba del título */
.hero-badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background-color: rgba(99, 77, 255, 0.12);
  border: 1px solid rgba(99, 77, 255, 0.3);
  color: #A395FF;
  font-size: 13px;
  padding: 6px 16px;
  border-radius: var(--radius-pill);
  margin-bottom: var(--space-md);
}

/* El punto verde parpadeante en el badge */
.badge-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background-color: var(--color-mint);
  /* Animación de pulso: se expande y vuelve */
  animation: pulse 2s infinite;
}

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

/* Título principal: grande, tipografía Syne */
.hero-title {
  font-family: var(--font-title);
  font-size: clamp(36px, 6vw, 64px);
  /* clamp(min, preferido, max): en móvil 36px, en desktop hasta 64px */
  font-weight: 700;
  line-height: 1.15;
  color: var(--color-text);
  margin-bottom: var(--space-md);
  max-width: 800px;
  margin-left: auto;
  margin-right: auto;
}

.hero-subtitle {
  font-size: clamp(15px, 2vw, 18px);
  color: var(--color-muted);
  max-width: 560px;
  margin: 0 auto var(--space-lg);
  line-height: 1.8;
}

/* Flexbox centra los botones y los pone en fila */
.hero-actions {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-sm);
  margin-bottom: var(--space-md);
  flex-wrap: wrap;   /* En móvil, los botones bajan a segunda línea si no caben */
}

.hero-social-proof {
  font-size: 13px;
  color: var(--color-muted);
  margin-top: var(--space-md);
}

/* El ∅ gigante de fondo — decorativo, da profundidad visual */
.hero-bg-symbol {
  position: absolute;   /* Se posiciona relativo al .hero */
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);   /* Centrado perfecto */
  font-size: clamp(300px, 50vw, 600px);
  font-family: var(--font-title);
  color: rgba(99, 77, 255, 0.04);   /* Casi invisible — solo textura */
  pointer-events: none;   /* No interfiere con clicks */
  user-select: none;      /* No se puede seleccionar como texto */
  z-index: 0;
}


/* ----------------------------------------------------------------
   7. RESPONSIVE — Móvil primero
   En pantallas menores a 768px (tablets/celulares):
   ocultamos los links del nav y ajustamos el hero.
---------------------------------------------------------------- */
@media (max-width: 768px) {
  /* Los links del nav se ocultan en móvil
     (más adelante añadiremos un menú hamburguesa con JS) */
  .nav-links {
    display: none;
  }

  .hero {
    padding: var(--space-xl) 0 var(--space-lg);
  }
}

/* ================================================================
   SECCIÓN #WHY — Estilos
   Pega esto al final de tu style.css, después del bloque @media.
================================================================ */


/* ----------------------------------------------------------------
   PATRÓN REUTILIZABLE: Encabezado de sección
   Lo usaremos en TODAS las secciones (why, packages, topics, etc.)
   Definirlo aquí una sola vez nos ahorra repetir código.
---------------------------------------------------------------- */
.section-header {
  text-align: center;
  max-width: 640px;
  margin: 0 auto var(--space-xl);  /* Espacio entre encabezado y contenido */
}

/* Pequeño texto de color arriba del título — da contexto */
.section-tag {
  display: inline-block;
  font-size: 13px;
  font-weight: 500;
  color: var(--color-accent);
  text-transform: uppercase;
  letter-spacing: 0.1em;
  margin-bottom: var(--space-sm);
}

/* Título principal de cada sección */
.section-title {
  font-family: var(--font-title);
  font-size: clamp(26px, 4vw, 40px);
  font-weight: 700;
  line-height: 1.25;
  color: var(--color-text);
  margin-bottom: var(--space-sm);
}

/* Subtítulo opcional debajo del título */
.section-subtitle {
  font-size: 16px;
  color: var(--color-muted);
  line-height: 1.7;
}


/* ----------------------------------------------------------------
   SECCIÓN WHY
---------------------------------------------------------------- */
.why {
  padding: var(--space-2xl) 0;
  /* Separador visual sutil entre el Hero y esta sección */
  border-top: 1px solid var(--color-surface-2);
}

/* CSS Grid: 3 columnas de igual tamaño con gap entre ellas.
   repeat(3, 1fr) = "repite 3 columnas, cada una toma 1 fracción del espacio" */
.why-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-md);
  align-items: start;  /* Las tarjetas se alinean desde arriba, no se estiran */
}

/* TARJETA BASE */
.why-card {
  background-color: var(--color-surface);
  border: 1px solid var(--color-surface-2);
  border-radius: var(--radius-lg);
  padding: var(--space-lg) var(--space-md);
  /* transition para el efecto hover */
  transition: border-color 0.2s ease, transform 0.2s ease;
}

.why-card:hover {
  border-color: rgba(99, 77, 255, 0.4);  /* Borde violeta sutil al pasar el mouse */
  transform: translateY(-4px);            /* Sube ligeramente — efecto "levitar" */
}

/* TARJETA DESTACADA (la del centro)
   Hereda todo de .why-card y solo sobreescribe lo diferente.
   La técnica "featured" hace que el ojo vaya primero al centro. */
.why-card--featured {
  background-color: rgba(99, 77, 255, 0.08);  /* Fondo violeta muy sutil */
  border-color: rgba(99, 77, 255, 0.35);       /* Borde violeta más visible */
  /* scale(1.02): ligeramente más grande que las otras — se "adelanta" visualmente */
  transform: scale(1.02);
}

.why-card--featured:hover {
  transform: scale(1.02) translateY(-4px);  /* Conserva el scale al hacer hover */
}

/* Contenedor del ícono emoji */
.why-icon {
  font-size: 32px;
  margin-bottom: var(--space-sm);
  /* width fijo para que todos los íconos ocupen el mismo espacio */
  width: 56px;
  height: 56px;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: var(--color-surface-2);
  border-radius: var(--radius-md);
}

.why-card-title {
  font-family: var(--font-title);
  font-size: 18px;
  font-weight: 600;
  color: var(--color-text);
  margin-bottom: var(--space-xs);
  line-height: 1.3;
}

.why-card-text {
  font-size: 14px;
  color: var(--color-muted);
  line-height: 1.8;
  margin-bottom: var(--space-md);
}

/* Tag de beneficio al final de cada tarjeta */
.why-tag {
  display: inline-block;
  font-size: 12px;
  font-weight: 500;
  color: var(--color-mint);
  background-color: rgba(0, 212, 168, 0.1);
  border: 1px solid rgba(0, 212, 168, 0.2);
  padding: 4px 12px;
  border-radius: var(--radius-pill);
}


/* ----------------------------------------------------------------
   RESPONSIVE para #why
   En tablets/móvil: las 3 columnas colapsan a 1.
   En tablet intermedia (600px-900px): 2 columnas funciona bien.
---------------------------------------------------------------- */
@media (max-width: 900px) {
  .why-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  /* En 2 columnas, la tarjeta featured ya no puede ir al centro.
     Quitamos el scale para que no se vea raro. */
  .why-card--featured {
    transform: scale(1);
  }
  .why-card--featured:hover {
    transform: translateY(-4px);
  }
}

@media (max-width: 600px) {
  .why-grid {
    grid-template-columns: 1fr;  /* Una columna en móvil */
  }
}

/* ================================================================
   SECCIÓN #PACKAGES — Estilos
   Pega esto al final de tu style.css, después del bloque de #why.
================================================================ */

.packages {
  padding: var(--space-2xl) 0;
  border-top: 1px solid var(--color-surface-2);
}

/* ----------------------------------------------------------------
   GRID DE 4 COLUMNAS
   repeat(4, 1fr): 4 columnas de igual ancho.
   gap más pequeño que en #why porque aquí caben 4 tarjetas, no 3 —
   necesitamos más espacio horizontal disponible para el contenido.
---------------------------------------------------------------- */
.pricing-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--space-sm);
  align-items: stretch;  /* IMPORTANTE: a diferencia de #why, aquí SÍ queremos
                             que todas las tarjetas tengan la misma altura.
                             Si una tiene más texto, las demás se estiran igual. */
}

/* ----------------------------------------------------------------
   TARJETA BASE (las 3 tarjetas normales)
   display: flex + flex-direction: column nos permite controlar
   el orden vertical y, más importante, "empujar" el botón CTA
   siempre hasta el fondo de la tarjeta sin importar cuánto texto haya arriba.
---------------------------------------------------------------- */
.price-card {
  position: relative;   /* Necesario para que el badge (position: absolute) se ancle aquí */
  background-color: var(--color-surface);
  border: 1px solid var(--color-surface-2);
  border-radius: var(--radius-lg);
  padding: var(--space-md);
  display: flex;
  flex-direction: column;
  transition: border-color 0.2s ease, transform 0.2s ease;
}

.price-card:hover {
  border-color: var(--color-muted);
  transform: translateY(-4px);
}

.price-name {
  font-family: var(--font-title);
  font-size: 20px;
  font-weight: 600;
  color: var(--color-text);
  margin-bottom: 4px;
}

.price-desc {
  font-size: 13px;
  color: var(--color-muted);
  margin-bottom: var(--space-md);
  /* min-height asegura que las descripciones de distinto largo
     no desalineen el inicio del precio entre tarjetas */
  min-height: 32px;
}

/* ----------------------------------------------------------------
   EL PRECIO — Usamos flexbox con align-items: baseline para que
   el símbolo "$", el número grande y "MXN" se alineen por su línea
   de texto base, no por su altura total (así no se ve "flotando").
---------------------------------------------------------------- */
.price-amount {
  display: flex;
  align-items: baseline;
  gap: 4px;
  margin-bottom: 4px;
}

.price-currency {
  font-size: 20px;
  color: var(--color-muted);
  font-weight: 500;
}

.price-number {
  font-family: var(--font-title);
  font-size: 40px;
  font-weight: 700;
  color: var(--color-text);
  line-height: 1;
}

.price-period {
  font-size: 13px;
  color: var(--color-muted);
}

.price-per-class {
  font-size: 13px;
  color: var(--color-mint);
  font-weight: 500;
  margin-bottom: var(--space-md);
}

/* ----------------------------------------------------------------
   LISTA DE FEATURES
   flex: 1 es la pieza clave: hace que esta lista "crezca" para
   ocupar todo el espacio sobrante disponible, empujando el botón
   CTA hasta el fondo de la tarjeta — así todos los botones quedan
   alineados en la misma altura sin importar cuántas features tenga cada una.
---------------------------------------------------------------- */
.price-features {
  flex: 1;
  margin-bottom: var(--space-md);
}

.price-features li {
  font-size: 13px;
  color: var(--color-muted);
  padding-left: 22px;
  position: relative;
  margin-bottom: 10px;
  line-height: 1.5;
}

/* Checkmark con ::before — generamos contenido visual sin usar <img>
   ni íconos externos. position: absolute lo coloca a la izquierda del texto. */
.price-features li::before {
  content: "✓";
  position: absolute;
  left: 0;
  color: var(--color-mint);
  font-weight: 700;
}

/* El botón CTA siempre al fondo gracias al flex:1 de arriba */
.price-cta {
  width: 100%;
  justify-content: center;
}


/* ================================================================
   LA TARJETA DESTACADA — Aquí está la lógica de "ancla de precio"
================================================================ */
.price-card--featured {
  /* Fondo con tinte violeta sutil — la diferencia de color es la
     primera señal visual que el ojo detecta, antes de leer nada */
  background-color: rgba(99, 77, 255, 0.1);

  /* Borde de 2px (más grueso que el 1px normal) y color violeta sólido.
     Es la señal #2: "esta tarjeta es diferente a las demás" */
  border: 2px solid var(--color-accent);

  /* scale(1.05): la hace 5% más grande que sus vecinas.
     Es sutil pero el ojo humano detecta tamaño antes que color. */
  transform: scale(1.05);

  /* z-index: 2 asegura que al escalarse, la tarjeta se dibuje POR ENCIMA
     de sus vecinas en lugar de quedar "debajo" visualmente */
  z-index: 2;

  /* box-shadow con el color de marca (no negro genérico) — refuerza
     la sensación de que esta tarjeta "flota" sobre las demás */
  box-shadow: 0 20px 40px -10px rgba(99, 77, 255, 0.35);
}

/* Al hacer hover, debe conservar el scale base y solo añadir el translateY,
   o si no, "saltaría" de tamaño 1.05 a 1 y se vería con un parpadeo feo */
.price-card--featured:hover {
  transform: scale(1.05) translateY(-4px);
  border-color: var(--color-accent);
}

/* EL BADGE "Más elegido" — la pieza final de la jerarquía visual.
   position: absolute + top negativo lo saca FUERA del borde superior
   de la tarjeta, como una etiqueta que "cuelga" del borde. */
.price-badge {
  position: absolute;
  top: -14px;              /* Negativo = se sale hacia arriba del padding */
  left: 50%;
  transform: translateX(-50%);  /* Centrado horizontal exacto */

  background-color: var(--color-accent);
  color: #fff;
  font-size: 12px;
  font-weight: 600;
  padding: 6px 16px;
  border-radius: var(--radius-pill);
  white-space: nowrap;
}

/* En la tarjeta destacada, el nombre del precio usa el color violeta
   para reforzar aún más la jerarquía visual respecto a las otras 3 */
.price-card--featured .price-name {
  color: var(--color-accent);
}


/* ----------------------------------------------------------------
   NOTA DE CONFIANZA debajo del grid
---------------------------------------------------------------- */
.pricing-note {
  text-align: center;
  font-size: 13px;
  color: var(--color-muted);
  margin-top: var(--space-lg);
}


/* ================================================================
   RESPONSIVE
   La tarjeta destacada con scale(1.05) en una sola columna móvil
   se vería rara (demasiado ancha vs sus vecinas que ya no existen
   en la misma fila). Por eso quitamos el scale en pantallas chicas
   y usamos otros recursos (orden + borde) para mantenerla destacada.
================================================================ */
@media (max-width: 1024px) {
  .pricing-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  /* En 2 columnas el scale ya no tiene sentido visual */
  .price-card--featured {
    transform: scale(1);
  }
  .price-card--featured:hover {
    transform: translateY(-4px);
  }
}

@media (max-width: 600px) {
  .pricing-grid {
    grid-template-columns: 1fr;
  }

  /* En móvil, usamos "order" de flexbox/grid para que la tarjeta
     destacada aparezca PRIMERO, sin importar su posición en el HTML.
     Esto es clave: en una sola columna, quieres que el usuario vea
     primero la opción que más te conviene vender. */
  .price-card--featured {
    order: -1;
  }
}

/* ================================================================
   SECCIÓN #TOPICS — Estilos
   Pega esto al final de tu style.css, después del bloque de #packages.
================================================================ */

.topics {
  padding: var(--space-2xl) 0;
  border-top: 1px solid var(--color-surface-2);
}

/* ----------------------------------------------------------------
   NAV DE PESTAÑAS
   flex + justify-content: center agrupa los 4 botones al centro.
   El contenedor tiene un fondo "surface" para que parezca un
   selector tipo "segmented control" (como en iOS).
---------------------------------------------------------------- */
.tabs-nav {
  display: flex;
  justify-content: center;
  gap: 6px;
  background-color: var(--color-surface);
  border: 1px solid var(--color-surface-2);
  border-radius: var(--radius-pill);
  padding: 6px;
  max-width: fit-content;   /* El contenedor solo es tan ancho como su contenido */
  margin: 0 auto var(--space-xl);  /* Centrado horizontal + espacio abajo */
}

/* BOTÓN DE PESTAÑA — estado normal (inactivo) */
.tab-btn {
  /* Reset de estilos nativos de <button> */
  border: none;
  background: transparent;
  font-family: var(--font-body);
  cursor: pointer;

  padding: 10px 22px;
  border-radius: var(--radius-pill);
  font-size: 14px;
  font-weight: 500;
  color: var(--color-muted);
  transition: all 0.25s ease;
  white-space: nowrap;
}

.tab-btn:hover {
  color: var(--color-text);
}

/* ESTADO ACTIVO — esta clase la añade/quita JavaScript dinámicamente.
   Es la pieza visual que le dice al usuario "estás viendo este nivel" */
.tab-btn--active {
  background-color: var(--color-accent);
  color: #fff;
}

.tab-btn--active:hover {
  color: #fff;   /* Evita que el hover normal sobreescriba el color del activo */
}


/* ----------------------------------------------------------------
   PANELES DE CONTENIDO
   Por defecto TODOS los paneles están ocultos (display: none).
   Solo el que tenga la clase --active se muestra.
   Esto es controlado por JavaScript, no por CSS puro,
   porque necesitamos reaccionar al clic del usuario.
---------------------------------------------------------------- */
.tab-panel {
  display: none;
}

.tab-panel--active {
  display: block;
  /* Animación sutil de aparición — hace que el cambio se sienta
     intencional y no un "parpadeo" brusco */
  animation: fadeIn 0.3s ease;
}

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

/* ----------------------------------------------------------------
   GRID DE TEMAS dentro de cada panel
   3 columnas en desktop — suficiente para 6 temas en 2 filas.
---------------------------------------------------------------- */
.topics-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-sm);
}

.topic-item {
  display: flex;
  align-items: center;
  gap: 12px;
  background-color: var(--color-surface);
  border: 1px solid var(--color-surface-2);
  border-radius: var(--radius-md);
  padding: 14px 16px;
  transition: border-color 0.2s ease;
}

.topic-item:hover {
  border-color: var(--color-accent);
}

.topic-icon {
  font-size: 20px;
  /* width/height fijos: todos los íconos ocupan el mismo espacio,
     así el texto de "topic-name" siempre arranca alineado en la misma X */
  width: 36px;
  height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: var(--color-surface-2);
  border-radius: var(--radius-sm);
  flex-shrink: 0;   /* Evita que el ícono se "achique" si el texto es largo */
}

.topic-name {
  font-size: 14px;
  color: var(--color-text);
  font-weight: 500;
}


/* ----------------------------------------------------------------
   RESPONSIVE
---------------------------------------------------------------- */
@media (max-width: 768px) {
  .topics-grid {
    grid-template-columns: 1fr 1fr;  /* 2 columnas en tablet */
  }
}

@media (max-width: 600px) {
  /* Las pestañas pueden no caber en una sola fila en pantallas chicas.
     overflow-x: auto permite scroll horizontal solo en esta barra,
     sin afectar el resto de la página. */
  .tabs-nav {
    max-width: 100%;
    overflow-x: auto;
    justify-content: flex-start;
  }

  .topics-grid {
    grid-template-columns: 1fr;  /* 1 columna en móvil */
  }
}


/* ================================================================
   SECCIÓN #BOOKING — Estilos
   Pega esto al final de tu style.css, después del bloque de #topics.
================================================================ */

.booking {
  padding: var(--space-2xl) 0;
  border-top: 1px solid var(--color-surface-2);
}

/* ----------------------------------------------------------------
   CONTENEDOR DEL IFRAME
   overflow: hidden es la pieza clave aquí: le decimos al contenedor
   "recorta cualquier cosa que se salga de tus bordes redondeados".
   Sin esto, el iframe (que es un rectángulo perfecto) ignoraría
   el border-radius del contenedor y se vería con esquinas cuadradas
   sobresaliendo del marco redondeado.
---------------------------------------------------------------- */
.booking-frame {
  max-width: 800px;       /* Cal.com se ve mejor en un ancho moderado, no a todo lo ancho */
  margin: 0 auto;          /* Centrado horizontal */
  border: 1px solid var(--color-surface-2);
  border-radius: var(--radius-lg);
  overflow: hidden;
  background-color: var(--color-surface);
}

/* El iframe en sí — quitamos cualquier espacio extra que el
   navegador pudiera añadir por defecto */
.booking-frame iframe {
  display: block;
  border: none;
}

/* ----------------------------------------------------------------
   NOTA DE WHATSAPP DE RESPALDO
---------------------------------------------------------------- */
.booking-note {
  text-align: center;
  font-size: 14px;
  color: var(--color-muted);
  margin-top: var(--space-lg);
}

.booking-note-link {
  color: var(--color-mint);
  font-weight: 500;
  /* Subrayado sutil solo en este link, para diferenciarlo
     como una acción clickeable dentro del texto */
  border-bottom: 1px solid rgba(0, 212, 168, 0.3);
  transition: border-color 0.2s ease;
}

.booking-note-link:hover {
  border-color: var(--color-mint);
}


/* ----------------------------------------------------------------
   RESPONSIVE
   En móvil, el calendario de Cal.com necesita un poco más de alto
   porque su layout interno cambia de "lado a lado" a "apilado".
---------------------------------------------------------------- */
@media (max-width: 600px) {
  .booking-frame iframe {
    height: 850px;   /* Más alto en móvil para compensar el layout apilado */
  }
}


/* ================================================================
   SECCIÓN #TESTIMONIALS — Estilos
   Pega esto al final de tu style.css, después del bloque de #booking.
================================================================ */

.testimonials {
  padding: var(--space-2xl) 0;
  border-top: 1px solid var(--color-surface-2);
}

/* Mismo patrón de grid de 3 columnas que usamos en #why —
   la consistencia entre secciones es lo que hace que el sitio
   se sienta diseñado por alguien, no "pegado" por partes */
.testimonials-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-md);
}

.testimonial-card {
  background-color: var(--color-surface);
  border: 1px solid var(--color-surface-2);
  border-radius: var(--radius-lg);
  padding: var(--space-md);
  display: flex;
  flex-direction: column;
}

/* Las estrellas son texto plano con color dorado —
   no necesitamos íconos ni imágenes para esto */
.testimonial-stars {
  color: #F5B800;
  font-size: 16px;
  margin-bottom: var(--space-sm);
  letter-spacing: 2px;
}

.testimonial-text {
  font-size: 14px;
  color: var(--color-text);
  line-height: 1.8;
  margin-bottom: var(--space-md);
  flex: 1;   /* Empuja el autor hacia el fondo, igual que en #packages */
  /* font-style italic ayuda a que el ojo identifique esto como una
     cita textual, no como texto descriptivo normal de la página */
  font-style: italic;
}

/* ----------------------------------------------------------------
   FOOTER DEL TESTIMONIO: avatar + nombre + detalle
---------------------------------------------------------------- */
.testimonial-author {
  display: flex;
  align-items: center;
  gap: 12px;
  /* Línea separadora sutil entre la cita y el autor */
  padding-top: var(--space-sm);
  border-top: 1px solid var(--color-surface-2);
}

.author-avatar {
  width: 40px;
  height: 40px;
  border-radius: 50%;    /* Círculo perfecto */
  background-color: var(--color-surface-2);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
  flex-shrink: 0;
}

.author-name {
  font-size: 13px;
  font-weight: 600;
  color: var(--color-text);
}

.author-detail {
  font-size: 12px;
  color: var(--color-muted);
}


/* ----------------------------------------------------------------
   RESPONSIVE
---------------------------------------------------------------- */
@media (max-width: 768px) {
  .testimonials-grid {
    grid-template-columns: 1fr;
  }
}


/* ================================================================
   SECCIÓN #FAQ — Estilos
   Pega esto al final de tu style.css, después del bloque de #testimonials.
================================================================ */

.faq {
  padding: var(--space-2xl) 0;
  border-top: 1px solid var(--color-surface-2);
}

/* max-width + margin auto: el FAQ se ve mejor angosto y centrado,
   no a todo el ancho del contenedor — más fácil de leer */
.faq-list {
  max-width: 700px;
  margin: 0 auto;
}

.faq-item {
  border-bottom: 1px solid var(--color-surface-2);
}

/* ----------------------------------------------------------------
   EL BOTÓN DE PREGUNTA
   Reseteamos los estilos nativos de <button> (que vienen con
   fondo gris y bordes feos por defecto) y lo convertimos en
   un elemento que se ve como una fila clickeable normal.
---------------------------------------------------------------- */
.faq-question {
  /* Reset de <button> nativo */
  width: 100%;
  background: transparent;
  border: none;
  cursor: pointer;
  font-family: var(--font-body);
  text-align: left;

  /* Flexbox: el texto a la izquierda, el ícono "+" a la derecha */
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-md);

  padding: var(--space-md) 0;
  font-size: 16px;
  font-weight: 500;
  color: var(--color-text);
}

.faq-question:hover {
  color: var(--color-accent);
}

/* El ícono "+" — transition en transform es lo que permite
   que rotar 45 grados se vea como una animación suave, no un salto */
.faq-icon {
  font-size: 22px;
  color: var(--color-accent);
  font-weight: 300;
  flex-shrink: 0;
  transition: transform 0.3s ease;
}

/* Cuando el item tiene la clase --active (añadida por JS),
   rotamos el "+" 45 grados → visualmente se convierte en una "x".
   Es un truco clásico: no necesitas 2 íconos distintos (+ y x),
   solo rotas el mismo símbolo. */
.faq-item--active .faq-icon {
  transform: rotate(45deg);
}


/* ----------------------------------------------------------------
   LA RESPUESTA — el corazón técnico del acordeón
   Este es el truco más importante de toda la sección, así que
   te lo explico a detalle:

   1. max-height: 0  → la respuesta está "comprimida" a 0 de alto,
      por lo tanto invisible, aunque su contenido siga existiendo
      en el HTML (a diferencia de display:none, que la quita
      completamente del flujo).

   2. overflow: hidden → cualquier contenido que "no quepa" en
      esos 0px de alto, simplemente no se muestra. Sin esto,
      el texto se desbordaría y se vería encima de lo demás.

   3. transition: max-height → esta es la propiedad que SÍ podemos
      animar suavemente. No podemos animar "display: none → block"
      (es un salto brusco, todo o nada), pero max-height sí puede
      ir creciendo gradualmente de 0 a su valor final.

   4. Cuando JS añade la clase --active, cambiamos max-height
      a un valor grande (300px) — suficiente para que el texto
      más largo de tus respuestas quepa completo.
---------------------------------------------------------------- */
.faq-answer {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.35s ease;
}

.faq-item--active .faq-answer {
  max-height: 300px;   /* Debe ser mayor al alto real del texto más largo */
}

.faq-answer p {
  font-size: 14px;
  color: var(--color-muted);
  line-height: 1.8;
  padding-bottom: var(--space-md);
}


/* ================================================================
   FOOTER — Estilos
   Pega esto al final de tu style.css, después del bloque de #faq.
================================================================ */

.footer {
  background-color: var(--color-surface);
  border-top: 1px solid var(--color-surface-2);
  padding-top: var(--space-xl);
}

/* ----------------------------------------------------------------
   GRID DE 3 COLUMNAS DESIGUALES
   A diferencia de los grids anteriores (1fr 1fr 1fr = iguales),
   aquí usamos "2fr 1fr 1fr": la primera columna (marca) ocupa
   el doble de espacio que las otras dos (links y contacto),
   porque el tagline de marca necesita más aire para respirar.
---------------------------------------------------------------- */
.footer-inner {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr;
  gap: var(--space-lg);
  padding-bottom: var(--space-xl);
}

.footer-tagline {
  font-size: 13px;
  color: var(--color-muted);
  line-height: 1.7;
  margin-top: var(--space-sm);
  max-width: 280px;
}

/* Título pequeño de cada columna ("Navegación", "Contacto") */
.footer-col-title {
  font-size: 13px;
  font-weight: 600;
  color: var(--color-text);
  margin-bottom: var(--space-sm);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

/* Las columnas de links son flex en columna (apilados verticalmente),
   no en fila — por eso usamos flex-direction: column aquí */
.footer-links,
.footer-contact {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.footer-links a,
.footer-contact a {
  font-size: 14px;
  color: var(--color-muted);
  transition: color 0.2s ease;
}

.footer-links a:hover,
.footer-contact a:hover {
  color: var(--color-accent);
}

/* ----------------------------------------------------------------
   BARRA INFERIOR — copyright
   Una franja separada con su propio borde superior, ligeramente
   distinta en tono para crear jerarquía visual de "esto es lo último"
---------------------------------------------------------------- */
.footer-bottom {
  border-top: 1px solid var(--color-surface-2);
  padding: var(--space-md) 0;
}

.footer-bottom-inner p {
  font-size: 12px;
  color: var(--color-muted);
  text-align: center;
}


/* ----------------------------------------------------------------
   RESPONSIVE
   En móvil, las 3 columnas desiguales se apilan en una sola columna
---------------------------------------------------------------- */
@media (max-width: 768px) {
  .footer-inner {
    grid-template-columns: 1fr;
    gap: var(--space-md);
    text-align: center;
  }

  .footer-tagline {
    margin-left: auto;
    margin-right: auto;
  }

  .nav-logo {
    justify-content: center;
  }
}