/* ==========================================================================
   ORGANIC ACADEMY — Secciones de la landing
   Construido sobre design-system.css. El orden sigue el wireframe:
   header · hero · casos de éxito · comunidad
   ========================================================================== */

/* --------------------------------------------------------------------------
   HEADER — logo + contador
   -------------------------------------------------------------------------- */

/* Header estático: forma parte del flujo normal, así que al bajar se va hacia
   arriba y desaparece con el resto del contenido. Sin fixed ni sticky — no
   debe acompañar al scroll ni quedarse anclado en pantalla. */
.site-header {
  position: static;
  background: #0B0A0C;
  border-bottom: 1px solid var(--c-line);
}

/* Logo y contador en una sola fila, centrados como grupo. */
.site-header__inner {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: clamp(1rem, 2.5vw, 2rem);
  min-height: 60px;
  padding-block: var(--stack-1);
}

.site-header__divider {
  width: 1px;
  align-self: stretch;
  margin-block: 0.5rem;
  background: var(--c-line);
  flex-shrink: 0;
}

/* --- Logotipo -------------------------------------------------------------
   Logotipo tipográfico, sin isotipo: dos palabras apiladas y una línea que
   las cose. Toda la jerarquía sale del contraste de tamaño y del rosa de
   marca — ni sombras, ni degradados, ni efectos.
   El ancho del bloque lo fija ORGANIC, que es la palabra más larga; la línea
   y ACADEMY se cuelgan de ese ancho en vez de medirse aparte. */
.brand {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  flex-shrink: 0;
}

/* La display condensada de marca (BE BOLD, hoy Anton): es exactamente el
   registro de grotesca condensada pesada que pide el logo. */
.brand__word {
  font-family: var(--f-display);
  font-size: 1.5rem;
  line-height: 0.94;
  letter-spacing: 0.025em;
  text-transform: uppercase;
  color: var(--c-white);
  white-space: nowrap;
}

.brand__o { color: var(--c-pink); }

/* align-self:stretch y no width:100%: en una columna flex es lo que hace que
   la línea mida justo el ancho del lockup, sin números mágicos. */
.brand__rule {
  align-self: stretch;
  height: 1px;
  margin-block: 0.3125rem;
  background: var(--c-line-strong);
}

/* ACADEMY va con el tracking calibrado para cuadrar al píxel con el ancho de
   ORGANIC (medido: 79.4px las dos). Es lo que convierte dos palabras sueltas
   en un lockup. El margen derecho negativo cancela el espacio que
   letter-spacing añade DESPUÉS de la última letra: sin él el borde derecho
   queda descuadrado.
   OJO: el valor está calibrado contra Anton. El día que entre BE BOLD hay que
   volver a medir ambas palabras y reajustarlo. */
.brand__sub {
  font-family: var(--f-body);
  font-size: 0.5625rem;
  font-weight: 700;
  letter-spacing: 0.58em;
  margin-right: -0.58em;
  line-height: 1;
  text-transform: uppercase;
  color: var(--c-pink);
  white-space: nowrap;
}

/* Contador */
.countdown {
  display: flex;
  align-items: flex-start;
  gap: 0.5rem;
}

/* Tres unidades del mismo ancho: al ser tabular-nums, un ancho fijo mantiene
   los dos puntos quietos en vez de bailar cuando cambian las cifras. */
.countdown__unit {
  min-width: 52px;
  text-align: center;
}

/* Dorado con un halo mínimo: sobre negro el oro plano se apaga, y el brillo
   lo devuelve a lectura de metal sin convertirlo en neón. */
.countdown__num {
  font-family: var(--f-display);
  font-size: 1.5rem;
  line-height: 1;
  letter-spacing: 0.02em;
  font-variant-numeric: tabular-nums;
  color: var(--c-gold);
  text-shadow: 0 0 22px rgba(212, 175, 55, 0.38);
}

.countdown__label {
  display: block;
  margin-top: 5px;
  font-size: 0.5625rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--c-fg-faint);
}

.countdown__sep {
  font-family: var(--f-display);
  font-size: 1.5rem;
  line-height: 1;
  color: rgba(212, 175, 55, 0.35);
}

/* --------------------------------------------------------------------------
   HERO
   -------------------------------------------------------------------------- */

.hero {
  padding-top: var(--stack-3);
  padding-bottom: var(--section-y);
  text-align: center;
  position: relative;
  overflow: hidden;
}

/* Halo de marca detrás del hero. Sobre negro admite bastante más intensidad
   que sobre blanco: hace de key light de toda la primera pantalla. */
.hero::before {
  content: '';
  position: absolute;
  top: -18%;
  left: 50%;
  transform: translateX(-50%);
  width: min(1100px, 130vw);
  aspect-ratio: 1;
  background: radial-gradient(circle at 50% 50%,
              rgba(255, 0, 85, 0.20) 0%,
              rgba(212, 175, 55, 0.08) 40%,
              transparent 68%);
  pointer-events: none;
  z-index: 0;
}

/* Algo más ancho que --container-narrow para que el titular caiga en 3 líneas
   en vez de 5, y el resto del hero suba. */
.hero__inner {
  position: relative;
  z-index: 1;
  max-width: 880px;
}

.hero__headline { margin-bottom: var(--stack-4); }

/* "Contenido + Live" es una fórmula, no una frase: va en línea propia y con
   la display de marca. Una manuscrita en mayúsculas no funciona — sus trazos
   están diseñados para enlazar en minúscula — así que aquí gana el impacto. */
.hero__headline .accent {
  display: block;
  margin-top: 0.3em;
  color: var(--c-pink);
  font-family: var(--f-display);
  font-weight: 400;
  font-size: 1.15em;
  line-height: 1.05;
  letter-spacing: var(--ls-display);
  text-transform: uppercase;
}

/* Marco de la foto: el bloque oscuro y dramático sobre el blanco.
   El degradado del ::before hace de borde de 1px sin sumar layout. */
/* Se sale del contenedor estrecho: el mockup del webinar necesita tamaño para
   que se lean las caras del grid. El centrado va en el wrapper y no en la
   figura, porque data-reveal ya usa el transform de esta última. */
/* El tercer término (vh) es el que mantiene el CTA cerca del pliegue: al ser
   una imagen 1:1, limitar el ancho por altura de pantalla evita que empuje
   el botón fuera de vista en portátiles. */
.hero__figure-wrap {
  position: relative;
  left: 50%;
  transform: translateX(-50%);
  width: min(780px, calc(100vw - 2 * var(--gutter)), 60vh);
  margin-bottom: var(--stack-4);
}

.hero__figure {
  position: relative;
  border-radius: var(--r-xl);
  padding: 1px;
  background: linear-gradient(160deg,
              rgba(255, 0, 85, 0.65),
              rgba(212, 175, 55, 0.42) 55%,
              rgba(255, 255, 255, 0.06));
  box-shadow: var(--sh-glow);
}

/* La imagen es un mockup de webinar 1:1: se muestra completa, sin recorte,
   porque el grid de asistentes es justo la prueba social que queremos. */
.hero__figure img {
  width: 100%;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  border-radius: calc(var(--r-xl) - 1px);
}

/* --- Badge "Masterclass gratuita" ---------------------------------------
   Oro sobre negro: es el mayor contraste de la paleta (9.2:1) y deja el rosa
   libre para el botón, que debe seguir siendo el elemento más llamativo. */
/* flex y no bloque de texto: el <p> centrado arrastraba el interlineado de
   1.7 del body y añadía ~10px muertos bajo la píldora. */
.hero__badge {
  display: flex;
  justify-content: center;
  line-height: 1;
  margin-bottom: var(--stack-2);
}

.badge {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.5rem 1.125rem;
  border-radius: var(--r-full);
  background: linear-gradient(180deg, rgba(212, 175, 55, 0.18), rgba(212, 175, 55, 0.07));
  border: 1px solid rgba(212, 175, 55, 0.45);
  box-shadow: 0 0 28px -10px rgba(212, 175, 55, 0.55),
              inset 0 1px 0 rgba(255, 255, 255, 0.08);
  color: #F0D77A;
  font-size: clamp(0.6875rem, 0.9vw, 0.8125rem);
  font-weight: 800;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  line-height: 1;
}

/* La fecha baja de peso 800 a 700 y de rosa a blanco: antes competía con el
   botón. Así el recorrido queda badge → fecha → botón sin empates. */
.hero__date {
  font-family: var(--f-body);
  font-weight: 700;
  font-size: clamp(0.9375rem, 1.3vw, 1.125rem);
  letter-spacing: 0.01em;
  color: var(--c-fg);
  margin-bottom: var(--stack-3);
}

.hero__date .sep { color: var(--c-gold); margin-inline: 0.4em; }

/* nowrap para que "(Hora Perú 🇵🇪)" salte entera de línea en móvil en vez de
   dejar la bandera suelta abajo. */
.hero__date .muted {
  font-weight: 600;
  white-space: nowrap;
}

.hero__cta { margin-bottom: var(--stack-4); }

/* El CTA del hero es el único botón que se alarga: min-width en vez de más
   padding horizontal, para que el ancho no dependa del largo del texto.
   330px -> 416px (+26%). La altura la siguen fijando --btn-y y el font-size,
   así que no se mueve. En móvil el min() lo deja a ancho de columna. */
.hero__cta .btn {
  min-width: min(100%, 26rem);
  animation: float-cta 3.6s ease-in-out infinite;
}

/* Al interactuar se corta la flotación: si no, su transform pisaría la
   elevación de 2px del :hover y el botón dejaría de responder al cursor.
   El corte no da tirón porque .btn ya transiciona transform. */
.hero__cta .btn:hover,
.hero__cta .btn:focus-visible,
.hero__cta .btn:active { animation: none; }

/* 4px de recorrido: suficiente para captar el ojo periférico, corto de más
   para leerse como un elemento inquieto. */
@keyframes float-cta {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-4px); }
}

/* --- Beneficios ----------------------------------------------------------
   Alineados a la izquierda aunque el hero esté centrado: una lista centrada
   no tiene eje de lectura y obliga a rastrear el inicio de cada línea. El
   bloque completo sí va centrado respecto a la página. */
.benefits {
  width: fit-content;
  max-width: 100%;
  margin-inline: auto;
  text-align: left;
}

.benefits__title {
  font-size: var(--t-small);
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--c-fg-faint);
  margin-bottom: var(--stack-2);
}

.benefits__list { display: grid; gap: var(--stack-2); }

.benefits__item {
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
  font-size: clamp(0.9375rem, 1.15vw, 1.0625rem);
  font-weight: 600;
  line-height: 1.5;
  color: var(--c-fg);
}

/* El check va en rosa de marca y no con el emoji ✅: el emoji es verde y
   rompe la paleta, además de dibujarse distinto en cada sistema. */
.benefits__check {
  width: 20px;
  height: 20px;
  flex-shrink: 0;
  margin-top: 0.15em;
  color: var(--c-pink);
}

/* --------------------------------------------------------------------------
   CASOS DE ÉXITO
   -------------------------------------------------------------------------- */

/* Centrado para hacer eje con las estadísticas: un título a la izquierda
   sobre contenido centrado se lee como un desajuste. */
.cases__head {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--stack-2);
  margin-bottom: var(--stack-3);
}

/* Título de sección con rango propio: sube al tamaño display y se resuelve en
   degradado dorado, que sobre negro es el mayor contraste de la paleta. */
.cases__head .h2 {
  font-size: clamp(2.5rem, 6vw, 4.5rem);
  line-height: 1;
  letter-spacing: -0.03em;
  background: var(--g-gold);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.cases__head .rule { width: 100%; }

/* Una sola columna centrada: el "+" deja de ser una celda aparte y pasa a ir
   pegado a la cifra (ver .stat__value::before), que es lo que permite centrar
   número y descripción sobre el mismo eje. */
.stat {
  display: grid;
  /* minmax(0,·) y no 1fr a secas: el carril mide 100vw y con `auto` como
     mínimo estiraría la celda hasta ese ancho, descentrando el título. */
  grid-template-columns: minmax(0, 1fr);
  justify-items: center;
  text-align: center;
  padding-block: var(--stack-4);
  border-bottom: 1px solid var(--c-line);
}

.stat:last-child { border-bottom: 0; }

.stat__plus { display: none; }

.stat__body { min-width: 0; }

/* La cifra manda: sube de tamaño y la descripción baja a texto de apoyo,
   para que la jerarquía se lea de un vistazo. */
.stat__value {
  font-family: var(--f-display);
  font-size: clamp(2.25rem, 4.6vw, 3.75rem);
  line-height: 1;
  letter-spacing: -0.025em;
  text-transform: uppercase;
}

.stat__value::before {
  content: '+';
  color: var(--c-pink);
  margin-right: 0.12em;
}

.stat__label {
  display: block;
  font-family: var(--f-body);
  font-weight: 500;
  font-size: clamp(0.875rem, 1.05vw, 1rem);
  line-height: 1.5;
  letter-spacing: 0;
  text-transform: none;
  color: var(--c-fg-muted);
  margin: var(--stack-1) auto 0;
  max-width: 42ch;
}

/* Galería de medios colgando de una estadística */
.stat__media {
  grid-column: 1;
  width: 100%;
  margin-top: var(--stack-3);
}

.stat__media-caption {
  text-align: center;
  font-size: var(--t-micro);
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--c-fg-faint);
  margin-bottom: var(--stack-2);
}

/* --- Carrusel de videos virales -----------------------------------------
   Una sola fila que corre de derecha a izquierda. Se sale del contenedor a
   ancho completo de ventana: un carril que se corta en los márgenes lee como
   una rejilla recortada, no como algo en movimiento. */
.viral-rail {
  position: relative;
  left: 50%;
  transform: translateX(-50%);
  width: 100vw;
  --marquee-duration: 110s;   /* ~90px/s: se lee sin marear */
  padding-block: 0.5rem;      /* aire para que la sombra no se recorte */
}

/* Altura fija y ancho automático: las capturas no comparten proporción exacta
   (van de 0.72 a 0.79) y forzar un ancho común las deformaría. */
.viral-rail__item {
  height: clamp(190px, 22vw, 260px);
  width: auto;
  flex-shrink: 0;
  /* drop-shadow y no box-shadow: estas imágenes son recortes sin fondo, y
     drop-shadow sigue el contorno real en vez de dibujar un rectángulo. */
  filter: drop-shadow(0 18px 28px rgba(0, 0, 0, 0.55));
  transition: transform var(--d-base) var(--e-out),
              filter var(--d-base) var(--e-out);
}

.viral-rail__item:hover {
  transform: translateY(-8px) scale(1.03);
  filter: drop-shadow(0 24px 38px rgba(255, 0, 85, 0.35));
}

/* Carril de lives: corre en sentido contrario y algo más lento. Dos carriles
   en la misma dirección y a la misma velocidad se leen como un fallo. */
.viral-rail--reverse {
  --marquee-duration: 75s;
}

.viral-rail--reverse .marquee__track {
  animation-direction: reverse;
}

/* Las capturas de live son 1:1 y sí llevan fondo (no son recortes), así que
   necesitan esquinas redondeadas y borde propios. */
.viral-rail--reverse .viral-rail__item {
  border-radius: var(--r-md);
  border: 1px solid var(--c-line);
  filter: drop-shadow(0 18px 28px rgba(0, 0, 0, 0.6));
}





/* --------------------------------------------------------------------------
   COMUNIDAD — bloque oscuro editorial
   -------------------------------------------------------------------------- */

/* El panel vive dentro de una .section, así que su padding se SUMA al
   --section-y de la sección. Por eso se queda en un escalón de la escala y no
   en un valor propio: si no, el hueco sobre el título se dobla. */
.community {
  border-radius: var(--r-xl);
  overflow: hidden;
  padding-block: var(--stack-5);
}

.community__head {
  text-align: center;
  margin-bottom: var(--stack-4);
}

.community__title {
  font-family: var(--f-display);
  font-size: clamp(1.75rem, 3.6vw, 3.25rem);
  line-height: 1.08;
  letter-spacing: var(--ls-display);
  text-transform: uppercase;
}

.community__title .script {
  display: block;
  font-size: clamp(2.25rem, 5vw, 4.25rem);
  margin-top: 0.1em;
  /* El oro plano se apaga sobre negro; el degradado le devuelve el brillo. */
  background: var(--g-gold);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

/* Mosaico 4x2: las ocho fotos son 1:1, así que una rejilla uniforme las
   respeta sin recortarlas de formas distintas. Cuatro columnas y no tres
   porque con ocho fotos un 3x3 dejaría un hueco en la última fila. */
.collage {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: clamp(0.5rem, 1vw, 0.875rem);
}

.collage__item {
  width: 100%;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  border-radius: var(--r-md);
  border: 1px solid var(--c-line);
  transition: transform var(--d-base) var(--e-out),
              box-shadow var(--d-base) var(--e-out),
              border-color var(--d-base) var(--e-out);
}

.collage__item:hover {
  transform: translateY(-6px) scale(1.02);
  border-color: rgba(255, 0, 85, 0.45);
  box-shadow: 0 26px 50px -20px rgba(0, 0, 0, 0.85),
              0 0 40px -14px rgba(255, 0, 85, 0.4);
}

/* --------------------------------------------------------------------------
   MODAL DE REGISTRO
   -------------------------------------------------------------------------- */

.overlay {
  position: fixed;
  inset: 0;
  z-index: 100;
  display: none;
  align-items: center;
  justify-content: center;
  padding: var(--s-2);
  background: rgba(13, 13, 13, 0.62);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}

.overlay.is-open { display: flex; animation: overlay-in var(--d-base) var(--e-out); }

@keyframes overlay-in { from { opacity: 0; } to { opacity: 1; } }

@keyframes modal-in {
  from { opacity: 0; transform: translateY(14px) scale(0.97); }
  to   { opacity: 1; transform: none; }
}

.modal {
  position: relative;
  width: 100%;
  max-width: 460px;
  max-height: calc(100dvh - 2rem);
  overflow-y: auto;
  background:
    radial-gradient(ellipse 90% 50% at 50% 0%, rgba(255, 0, 85, 0.12), transparent 60%),
    linear-gradient(180deg, #1A171C 0%, #100E12 100%);
  border: 1px solid var(--c-line-strong);
  border-radius: var(--r-lg);
  padding: clamp(1.75rem, 3.2vw, 2.25rem);
  box-shadow: var(--sh-glow);
  animation: modal-in var(--d-base) var(--e-out);
}

.modal::before {
  content: '';
  position: absolute;
  top: 0;
  left: 24px;
  right: 24px;
  height: 3px;
  background: var(--g-hairline);
  border-radius: 0 0 4px 4px;
}

.modal__close {
  position: absolute;
  top: 14px;
  right: 14px;
  width: 36px;
  height: 36px;
  display: grid;
  place-items: center;
  border: 1px solid var(--c-line-strong);
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.05);
  color: var(--c-fg-muted);
  cursor: pointer;
  transition: color var(--d-fast) var(--e-out),
              border-color var(--d-fast) var(--e-out),
              transform var(--d-fast) var(--e-out);
}

.modal__close:hover {
  color: var(--c-pink);
  border-color: var(--c-pink);
  transform: rotate(90deg);
}

.modal__title {
  font-family: var(--f-display);
  font-size: clamp(1.5rem, 2.4vw, 1.875rem);
  line-height: 1.1;
  text-transform: uppercase;
  text-align: center;
  margin-bottom: 0.625rem;
}

.modal__desc {
  font-size: var(--t-small);
  line-height: 1.6;
  color: var(--c-fg-muted);
  text-align: center;
  margin-bottom: var(--stack-4);
}

.modal__form { display: grid; gap: var(--stack-2); }

/* Trampa antibots: fuera de pantalla en vez de display:none, porque algunos
   bots saltan lo que está oculto y este campo tiene que parecer real. */
.honeypot {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  opacity: 0;
  pointer-events: none;
}

/* --- Campo de teléfono con selector internacional ------------------------
   El campo se comporta como un input único aunque por dentro sean un botón
   y un input: el borde y el anillo de foco viven en el contenedor, y las
   dos piezas de dentro van desnudas. */
.field--phone {
  position: relative;
  display: flex;
  align-items: stretch;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid var(--c-line-strong);
  border-radius: var(--r-sm);
  transition: border-color var(--d-fast) var(--e-out),
              box-shadow var(--d-fast) var(--e-out);
}

.field--phone:focus-within {
  border-color: var(--c-pink);
  box-shadow: 0 0 0 4px rgba(255, 0, 85, 0.12);
}

.field--phone .field__input {
  border: 0;
  padding-inline: 0.875rem 1.125rem;
  background: transparent;
  min-width: 0;              /* deja que el input encoja en móvil */
}

.field--phone .field__input:focus { box-shadow: none; }

/* Disparador: bandera + prefijo + flecha, separado del número por un filete
   que hace de frontera sin dibujar una segunda caja. */
.phone-country {
  display: inline-flex;
  align-items: center;
  gap: 0.4375rem;
  flex-shrink: 0;
  padding-inline: 0.875rem 0.75rem;
  background: transparent;
  border: 0;
  border-right: 1px solid var(--c-line-strong);
  border-radius: var(--r-sm) 0 0 var(--r-sm);
  color: var(--c-fg);
  font-weight: 600;
  line-height: 1;
  cursor: pointer;
  transition: background var(--d-fast) var(--e-out);
}

.phone-country:hover { background: rgba(255, 255, 255, 0.05); }

.phone-country__flag { font-size: 1.125rem; line-height: 1; }

/* tabular-nums para que la caja no baile de ancho al pasar de +1 a +598 */
.phone-country__dial { font-variant-numeric: tabular-nums; }

.phone-country__caret {
  color: var(--c-fg-faint);
  transition: transform var(--d-fast) var(--e-out);
}

.phone-country[aria-expanded='true'] .phone-country__caret { transform: rotate(180deg); }

/* --- Panel desplegable ---------------------------------------------------
   position:fixed y colocado por JS: dentro del modal, que tiene
   overflow-y:auto, un desplegable en flujo quedaría recortado por su scroll.
   z-index por encima del overlay (100). */
.phone-menu {
  position: fixed;
  z-index: 120;
  display: flex;
  flex-direction: column;
  max-height: min(320px, 54vh);
  background: linear-gradient(180deg, #201C24 0%, #151219 100%);
  border: 1px solid var(--c-line-strong);
  border-radius: var(--r-sm);
  box-shadow: var(--sh-lg);
  overflow: hidden;
}

.phone-menu[hidden] { display: none; }

.phone-menu__search {
  padding: 0.5rem;
  border-bottom: 1px solid var(--c-line);
  flex-shrink: 0;
}

/* 1rem exacto y no --t-small: por debajo de 16px iOS hace zoom automático al
   enfocar y descoloca el modal entero. */
.phone-menu__input {
  width: 100%;
  padding: 0.625rem 0.75rem;
  font-size: 1rem;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid var(--c-line-strong);
  border-radius: var(--r-sm);
  color: var(--c-fg);
  transition: border-color var(--d-fast) var(--e-out),
              box-shadow var(--d-fast) var(--e-out);
}

.phone-menu__input::placeholder { color: var(--c-fg-faint); }

.phone-menu__input:focus {
  outline: none;
  border-color: var(--c-pink);
  box-shadow: 0 0 0 3px rgba(255, 0, 85, 0.12);
}

/* overscroll-contain: al llegar al final de la lista el scroll no se
   transmite al modal ni a la página de detrás. */
.phone-menu__list {
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: 0.25rem;
  margin: 0;
}

.phone-option {
  display: flex;
  align-items: center;
  gap: 0.625rem;
  padding: 0.5rem 0.625rem;
  border-radius: 8px;
  font-size: var(--t-small);
  line-height: 1.35;
  cursor: pointer;
}

.phone-option[hidden] { display: none; }

.phone-option__flag { font-size: 1.0625rem; line-height: 1; flex-shrink: 0; }

/* El nombre cede el espacio: los países largos se cortan con puntos
   suspensivos antes que empujar el prefijo fuera del panel. */
.phone-option__name {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.phone-option__dial {
  flex-shrink: 0;
  color: var(--c-fg-faint);
  font-variant-numeric: tabular-nums;
}

/* .is-active es la fila que elegiría un Enter — la mueven las flechas y el
   ratón. Es distinta de [aria-selected], que es el país ya elegido. */
.phone-option:hover,
.phone-option.is-active { background: rgba(255, 255, 255, 0.07); }

.phone-option[aria-selected='true'],
.phone-option[aria-selected='true'] .phone-option__dial { color: var(--c-pink); }

.phone-menu__empty {
  padding: 1rem 0.75rem 1.25rem;
  text-align: center;
  font-size: var(--t-small);
  color: var(--c-fg-faint);
}

.modal__legal {
  font-size: 0.6875rem;
  line-height: 1.5;
  color: var(--c-fg-faint);
  text-align: center;
  margin-top: 0.25rem;
}

/* --------------------------------------------------------------------------
   PANTALLA DE GRACIAS
   -------------------------------------------------------------------------- */

/* La composición entera se apoya en DOS anchos y nada más. Cualquier bloque
   nuevo tiene que caer en uno de los dos o el eje se rompe:

     --thanks-w-frame  (880px) — piezas visuales: el video y la rejilla de pasos
     --thanks-w-read   (640px) — lectura y acción: textos, CTA y aviso

   Los dos van centrados, así que comparten eje vertical y sus bordes cuadran
   entre sí: el CTA y el aviso arrancan y terminan en la misma vertical, y el
   video y las tarjetas en otra, simétrica respecto a la primera. Antes había
   cuatro anchos distintos (60ch, 920px, 38rem y el contenedor) y ningún borde
   coincidía con ningún otro.

   El ritmo vertical se agrupa en dos escalones en vez de repartir el mismo
   hueco entre todo, que es lo que hacía que el recorrido se leyera como cinco
   islas sueltas. Lo que va junto se lee junto:

     --thanks-y-group  (1×--stack-4, ~20px) entre piezas de un mismo grupo
     --thanks-y-block  (2×--stack-4, ~41px) entre bloques distintos

   El de bloque es exactamente el hueco real que la landing deja entre secciones
   (--section-y se suma arriba y abajo), así que la pantalla de gracias respira
   al mismo ritmo que el resto de la página. Ni un valor vertical propio: los
   dos salen de --stack-4. */
.thanks {
  --thanks-w-frame: 880px;
  --thanks-w-read:  640px;

  --thanks-y-group: var(--stack-4);
  --thanks-y-block: calc(var(--stack-4) * 2);

  display: none;
}

body.is-thanks .site-main,
body.is-thanks .site-footer { display: none; }

body.is-thanks .thanks { display: block; }

/* Rejilla de una columna y no una pila de márgenes: el hueco base lo pone
   `gap`, así que ningún elemento arrastra margen propio, no hay margen
   colapsado y el ritmo se recalibra entero desde un sitio. */
.thanks__body {
  display: grid;
  justify-items: center;
  gap: var(--thanks-y-group);
  text-align: center;
  padding-block: var(--stack-5);
}

/* Los dos anchos del sistema. Todo hijo directo de .thanks__body cae en uno. */
.thanks__body > * {
  width: 100%;
  max-width: var(--thanks-w-read);
}

.thanks__video,
.thanks .steps { max-width: var(--thanks-w-frame); }

/* Los tres elementos que abren bloque suben su hueco de 1× a 2×--stack-4.
   El resto se queda en el `gap` base, y así el encabezado, el grupo de acción
   (video → CTA → aviso) y los pasos se leen como tres unidades. */
.thanks__video,
.thanks .steps,
.thanks__calendar { margin-top: var(--stack-4); }

/* --- 1 · Encabezado ------------------------------------------------------ */

.thanks__intro {
  display: grid;
  gap: var(--stack-2);
}

/* Se capa por debajo de --t-display (84px): a ese cuerpo el titular medía casi
   lo mismo que la columna entera y aplastaba todo lo que venía después. A 56px
   mantiene el salto de escala sobre el subtítulo (×2.5) sin robarle el
   protagonismo al video, que es la pieza principal de la página. */
.thanks__title {
  font-size: clamp(2.25rem, 4.6vw, 3.5rem);
}

/* Montserrat 700 y no la display: es una frase de apoyo, y la condensada en
   mayúsculas la subiría al mismo rango que "¡FELICIDADES!". */
.thanks__subtitle {
  font-family: var(--f-body);
  font-weight: 700;
  font-size: clamp(1.0625rem, 1.6vw, 1.375rem);
  line-height: 1.3;
  letter-spacing: -0.005em;
  color: var(--c-fg);
  text-wrap: balance;
}

/* Interlineado propio, por debajo del 1.7 del body: a 640px de ancho el texto
   cae en dos líneas, y con 1.7 el bloque se abría más que el hueco que lo
   separa del video. Ese era el espacio en blanco que sobraba arriba. */
.thanks__support {
  line-height: 1.55;
  text-wrap: balance;
}

/* --- 2 · Video ----------------------------------------------------------- */

/* Pieza principal de la página. El aspect-ratio va en el marco y no solo en el
   video para que reserve su sitio desde el primer pintado: así la página no da
   un salto cuando el navegador conoce las medidas reales del archivo.
   Fondo propio y no transparente: mientras el poster no ha entrado, un hueco
   negro sobre el fondo negro no se distingue del vacío. */
.thanks__video {
  position: relative;
  aspect-ratio: 16 / 9;
  border-radius: var(--r-lg);
  overflow: hidden;
  background: var(--c-surface-2);
  box-shadow: var(--sh-glow), var(--sh-lg);
}

/* object-fit: cover y no contain: el marco es 16/9 y el archivo también, así
   que no recorta nada; está por si algún día se cambia el video por uno con
   otra proporción, para que no aparezcan bandas negras dentro del marco. */
.thanks__video video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* Botón real, no adorno: activa el sonido del video (lo cablea app.js).
   Va sobre los controles nativos, de ahí el z-index. */
.thanks__sound {
  position: absolute;
  top: 14px;
  right: 14px;
  z-index: 2;
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  background: rgba(13, 13, 13, 0.78);
  -webkit-backdrop-filter: blur(6px);
          backdrop-filter: blur(6px);
  color: var(--c-white);
  border: 1px solid rgba(255, 255, 255, 0.22);
  border-radius: var(--r-sm);
  padding: 0.4375rem 0.75rem;
  font-family: var(--f-body);
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  line-height: 1;
  text-transform: uppercase;
  cursor: pointer;
  transition: border-color var(--d-fast) var(--e-out),
              background var(--d-fast) var(--e-out),
              opacity var(--d-base) var(--e-out);
}

.thanks__sound:hover {
  background: rgba(13, 13, 13, 0.92);
  border-color: var(--c-pink);
}

/* Con el sonido ya activo el botón deja de tener trabajo: se desvanece en vez
   de desaparecer de golpe, y se retira del flujo de tabulación desde el JS.
   No se oculta con display:none para que la transición pueda verse. */
.thanks__sound[aria-pressed='true'] {
  opacity: 0;
  pointer-events: none;
}

/* --- 3 · CTA principal --------------------------------------------------- */

/* El segundo botón de la landing que se sale del tamaño base (el otro es el CTA
   del hero). Ocupa la columna de lectura entera, así que sus bordes cuadran al
   píxel con los del aviso que lleva justo debajo. El texto es largo y se le
   permite partir en dos líneas: de ahí el interlineado propio. */
.thanks__cta .btn {
  width: 100%;
  line-height: 1.3;
  text-wrap: balance;
  animation: float-cta 3.6s ease-in-out infinite;
}

/* Misma razón que en el hero: la flotación pisaría la elevación del :hover. */
.thanks__cta .btn:hover,
.thanks__cta .btn:focus-visible,
.thanks__cta .btn:active { animation: none; }

/* Estado mientras no haya enlace de grupo (WHATSAPP_URL vacío en app.js).
   Se apaga la flotación y el brillo para que no invite a pulsar. */
.thanks__cta .btn[aria-disabled='true'] {
  animation: none;
  filter: grayscale(0.45);
  opacity: 0.55;
  box-shadow: none;
  cursor: not-allowed;
}
.thanks__cta .btn[aria-disabled='true']:hover { transform: none; }
.thanks__cta .btn[aria-disabled='true']::after { display: none; }

/* --- 4 · Aviso importante ------------------------------------------------ */

/* Oro y no rosa: el rosa está reservado al CTA que va justo encima y dos
   bloques rosas seguidos competirían. El oro además es el color de aviso
   natural de la paleta y da 9.2:1 sobre el fondo.
   Rejilla de dos columnas y no flex: con `auto minmax(0,1fr)` el texto arranca
   siempre en la misma vertical, mida lo que mida el icono. */
.notice {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: var(--s-2);
  text-align: left;
  padding: var(--s-3) var(--s-4);
  border: 1px solid rgba(212, 175, 55, 0.42);
  border-radius: var(--r-md);
  background:
    radial-gradient(ellipse 90% 100% at 50% 0%, rgba(212, 175, 55, 0.12), transparent 72%),
    var(--c-surface);
  box-shadow: 0 0 34px -18px rgba(212, 175, 55, 0.5);
}

/* El icono cuadra con la MAYÚSCULA del título, no con su caja: sin este ajuste
   queda flotando por encima de la primera línea. */
.notice__icon {
  color: var(--c-gold);
  margin-top: 0.1em;
}

.notice__title {
  font-size: var(--t-small);
  font-weight: 800;
  letter-spacing: 0.14em;
  line-height: 1.35;
  text-transform: uppercase;
  color: var(--c-gold);
  margin-bottom: var(--stack-1);
}

.notice__text {
  font-size: clamp(0.875rem, 1.05vw, 0.9375rem);
  line-height: 1.6;
  color: var(--c-fg-muted);
  text-wrap: pretty;
}

/* --- 5 · Los 3 pasos ----------------------------------------------------- */

.steps {
  display: grid;
  gap: var(--thanks-y-group);
}

/* Mismo tratamiento que el título "RESULTADOS": display en degradado dorado.
   Es el patrón de título de sección de la landing y aquí solo se reutiliza.
   Se queda por debajo del titular de la página (56px → 34px) para que la
   jerarquía entre los dos no admita duda. */
.steps__title {
  font-size: clamp(1.5rem, 2.8vw, 2.125rem);
  line-height: 1.15;
  letter-spacing: -0.02em;
  background: var(--g-gold);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

/* Tres columnas exactamente iguales. minmax(0,1fr) y no 1fr a secas: con `auto`
   como mínimo, la tarjeta del texto más largo se ensancharía y las tres dejarían
   de medir lo mismo. La altura la iguala el `stretch` por defecto de la rejilla. */
/* padding y list-style explícitos: es un <ol> y el reset solo neutraliza <ul>,
   así que arrastraba los 40px de sangría por defecto del navegador. Con ellos,
   las tarjetas quedaban desplazadas 40px a la derecha respecto al video —
   invisible a simple vista, pero rompía el eje de toda la composición. */
.steps__grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--stack-4);
  padding: 0;
  list-style: none;
}

/* El padding se declara aquí entero y en los cuatro lados: si se dejara el de
   .card, el override de móvil (--s-3 por debajo de 768px) cambiaría el inset
   justo en el ancho donde las tarjetas ya son más estrechas.
   align-content:start y no center: es lo que alinea los tres círculos y los
   tres "PASO n" en la misma horizontal aunque el texto de abajo mida distinto. */
.step {
  display: grid;
  justify-items: center;
  align-content: start;
  gap: var(--s-3);
  padding: var(--s-4);
  text-align: center;
}

/* El número es el ancla visual de la tarjeta: círculo con el degradado rosa de
   marca y la cifra en la display. Medida fija y no en em, para que los tres
   círculos midan exactamente lo mismo. */
.step__num {
  display: grid;
  place-items: center;
  width: 3.25rem;
  height: 3.25rem;
  border-radius: var(--r-full);
  background: var(--g-pink);
  box-shadow: var(--sh-pink);
  font-family: var(--f-display);
  font-size: 1.375rem;
  line-height: 1;
  letter-spacing: 0.02em;
  color: var(--c-white);
}

.step__body { min-width: 0; }

.step__eyebrow {
  font-size: var(--t-micro);
  font-weight: 800;
  letter-spacing: var(--ls-eyebrow);
  line-height: 1.35;
  text-transform: uppercase;
  color: var(--c-gold);
  margin-bottom: var(--stack-1);
}

/* Sin text-wrap:balance a propósito: balance repartía "Ven preparado / para la
   clase / del jueves." en tres líneas mientras las otras dos caían en dos, y
   descuadraba la fila entera. Con el ancho de columna actual las tres frases
   entran en dos líneas por sí solas.
   El min-height de dos líneas (2 × 1.5) es el seguro: si mañana un texto se
   acorta a una, la tarjeta sigue midiendo lo mismo que sus vecinas. */
.step__text {
  font-size: clamp(0.9375rem, 1.15vw, 1.0625rem);
  font-weight: 600;
  line-height: 1.5;
  min-height: 3em;
  color: var(--c-fg);
}

/* --- Acción secundaria --------------------------------------------------- */

/* Enlace de texto y no botón: cualquier botón aquí abajo le restaría peso al
   CTA de WhatsApp, que es el único que debe leerse como acción. */
.thanks__calendar {
  font-size: var(--t-small);
  line-height: 1.5;
  color: var(--c-fg-faint);
}

.thanks__calendar a {
  color: var(--c-fg-muted);
  text-decoration: underline;
  text-underline-offset: 0.25em;
  text-decoration-color: var(--c-line-strong);
  transition: color var(--d-fast) var(--e-out),
              text-decoration-color var(--d-fast) var(--e-out);
}

.thanks__calendar a:hover {
  color: var(--c-pink);
  text-decoration-color: var(--c-pink);
}

.thanks__calendar b { font-weight: 700; }

/* --------------------------------------------------------------------------
   FOOTER
   -------------------------------------------------------------------------- */

.site-footer {
  border-top: 1px solid var(--c-line);
  padding-block: var(--stack-5);
}

/* Columna centrada: logo → divisor → enlaces → aviso legal. Un solo eje
   vertical para los cuatro bloques, que es lo que da el aire editorial. */
/* Único sitio de la landing donde el ritmo sube un escalón (--stack-5 en vez
   de --stack-4): el footer está bajo el pliegue, no compite con la conversión
   y es donde el aire se lee como acabado, no como hueco muerto. */
.site-footer__inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: var(--stack-5);
}

/* El logo repite el lockup del header a mayor tamaño. Se escala en bloque
   por el MISMO factor (×7/6) las dos palabras y el margen de la línea: el
   tracking va en em, así que al escalar proporcionalmente los anchos siguen
   cuadrando solos y no hay que recalibrar nada. */
.site-footer__brand { align-items: center; }

.site-footer__brand .brand__word { font-size: 1.75rem; }
.site-footer__brand .brand__rule { margin-block: 0.3646rem; }
.site-footer__brand .brand__sub {
  font-size: 0.6563rem;
  letter-spacing: 0.58em;
  margin-right: -0.58em;
}

/* Más aire alrededor del divisor que entre el resto de bloques: es lo que
   separa el logo del pie legal y merece respirar. */
.site-footer__divider {
  width: 100%;
  margin-block: var(--stack-1);
}

.site-footer__links {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--stack-3);
  font-size: var(--t-small);
}

.site-footer__links a {
  color: var(--c-fg-muted);
  transition: color var(--d-fast) var(--e-out);
}

.site-footer__links a:hover,
.site-footer__links a:focus-visible { color: var(--c-pink); }

/* El punto es solo una pausa visual: al color de las líneas, no al del texto,
   para que no compita con los enlaces. */
.site-footer__sep { color: var(--c-line-strong); }

.site-footer__legal {
  font-size: var(--t-micro);
  color: var(--c-fg-faint);
}

/* --------------------------------------------------------------------------
   RESPONSIVE
   -------------------------------------------------------------------------- */

@media (max-width: 900px) {
  /* De 4 a 2 columnas directamente: con ocho fotos, 3 columnas dejaría
     hueco en la última fila. */
  .collage { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 700px) {
  /* Se mantiene en UNA fila también en móvil: quitando los segundos hay sitio
     de sobra, solo hay que encoger un punto las piezas. */
  .site-header__inner {
    gap: 0.75rem;
    padding-block: 0.5rem;
    min-height: 60px;
  }

  /* El logo encoge en bloque y el tracking se recalibra: las dos palabras no
     escalan igual, así que el 0.58em de escritorio dejaría ACADEMY más ancha
     que ORGANIC y rompería el lockup. Medido aquí: 62.8px las dos.
     Va acotado al header a propósito: el logo del footer tiene su propia
     escala y no debe encoger con esta. */
  .site-header .brand__word { font-size: 1.1875rem; }
  .site-header .brand__rule { margin-block: 0.25rem; }
  .site-header .brand__sub  { font-size: 0.5rem; letter-spacing: 0.415em; margin-right: -0.415em; }

  .countdown { gap: 0.25rem; }
  .countdown__unit { min-width: 40px; }
  .countdown__num,
  .countdown__sep { font-size: 1.25rem; }
  .countdown__label { font-size: 0.5rem; letter-spacing: 0.1em; }

  .cases__head .rule { display: none; }
}

/* --- Pantalla de gracias: tablet -----------------------------------------
   Las tres columnas aguantan hasta 760px: a 780px de ventana cada tarjeta mide
   ~228px y las tres frases siguen entrando en dos líneas. Lo único que baja es
   el inset, que a ese ancho se comía media tarjeta. La columna de lectura se
   estrecha con él para que el CTA no quede casi tan ancho como el video. */
@media (max-width: 900px) {
  .thanks { --thanks-w-read: 560px; }

  .step { padding: var(--s-3); gap: var(--stack-3); }
  .step__num { width: 3rem; height: 3rem; font-size: 1.25rem; }
}

/* --- Pantalla de gracias: móvil ------------------------------------------
   De 3 columnas a 1 de golpe: con tres tarjetas, un paso intermedio de 2
   dejaría la tercera sola en su fila. Apiladas mantienen el orden de lectura
   1 → 2 → 3, que es justo lo que la sección pide. */
@media (max-width: 760px) {
  .steps__grid { grid-template-columns: minmax(0, 1fr); }

  /* Apiladas pasan a fila —número a la izquierda, texto al lado— y ocupan la
     mitad de alto que en columna. Sigue siendo rejilla, así que el texto de las
     tres arranca en la misma vertical aunque los círculos ya no se apilen. */
  .step {
    grid-template-columns: auto minmax(0, 1fr);
    align-items: center;
    justify-items: start;
    gap: var(--s-2);
    text-align: left;
  }

  .step__num {
    width: 2.75rem;
    height: 2.75rem;
    font-size: 1.125rem;
  }

  /* En fila cada tarjeta se ajusta a su propio texto, así que reservar dos
     líneas solo añadiría hueco muerto bajo las frases cortas. */
  .step__text { min-height: 0; }

  .step__eyebrow { margin-bottom: 0.125rem; }
}

@media (max-width: 480px) {
  .collage { grid-template-columns: repeat(2, 1fr); }

  .countdown { gap: 0.25rem; }
  .countdown__unit { min-width: 36px; }
}

@media (max-width: 420px) {
  /* Los dos enlaces piden 342px en una línea y por debajo de ~382px no caben:
     partiría cada frase en dos renglones, que se lee mucho peor que apilarlos.
     Apilados, el punto separador sobra. El corte va en 420 y no en 382 para
     dejar holgura ante variaciones de renderizado de la fuente. */
  .site-footer__links {
    flex-direction: column;
    gap: var(--stack-2);
  }

  .site-footer__sep { display: none; }
}