/* ============================================================================
   Charlas presenciales — estilos propios de esta landing.

   Sólo lo que NO existe ya en styles.css (que se copia del molde
   landing-general-ar y trae hero, botones, secciones, nav, footer y reveal).
   Todo sale de los tokens: ni un color, radio ni spacing hardcodeado.

   Reglas del sistema de diseño que se respetan acá:
   - Cards: borde 1px Gray Cloud O sombra, nunca las dos. Acá: borde.
   - Radio 8px (--radius-md) en cards, 4px (--radius-xs/sm) en piezas chicas.
   - Hover: cambio de color en 200ms. Sin scale, sin bounce.
   - Numerales de dos dígitos (01, 02) como recurso compositivo de jerarquía.
   - Sin emoji, sin glassmorphism, sin sombras pronunciadas.
   ============================================================================ */

/* ---- Nav ------------------------------------------------------------------
   .nav .wrap ya resuelve el flex en styles.css; acá sólo el logo. */
.nav-logo { display: inline-flex; align-items: center; line-height: 0; }
/* Logo con el lienzo ceñido (proflight-blanco-ajustado.svg): la altura de acá es la del dibujo. Con el
   archivo original (42 % de dibujo, el resto margen) a 28 px el logo se veía de 12 px. */
.nav-logo img { display: block; height: 30px; width: auto; }
@media (max-width: 699px) { .nav-logo img { height: 22px; } }

/* ---- Ciudades -------------------------------------------------------------
   Grilla que salta de 1 columna a 4 sin etapa intermedia: con 4 tarjetas, una
   grilla de 3 dejaría la última fila con un hueco. (Regla del sistema de
   diseño: no pasar por una etapa que no divide parejo.) */
.city-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-4);
  margin-top: var(--space-8);
}
@media (min-width: 700px)  { .city-grid { grid-template-columns: repeat(2, 1fr); gap: var(--space-6); } }
@media (min-width: 1080px) { .city-grid { grid-template-columns: repeat(4, 1fr); } }

.city-card {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  padding: var(--space-6);
  background: var(--bg-elevated);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-md);
  transition: border-color var(--dur-base) var(--ease-standard);
}
.city-card:hover { border-color: var(--color-blue); }
/* Toda la tarjeta se puede tocar: el enlace real es el botón (su nombre dice a dónde va) y se
   estira por encima de la tarjeta. Al pasar el mouse por la tarjeta, el botón toma su hover. */
.city-card .btn::after { content: ""; position: absolute; inset: 0; border-radius: inherit; }
.city-card:hover .btn-primary { background: var(--color-blue); border-color: var(--color-blue); }

.city-country {
  margin: 0;
  font-family: var(--font-ui);
  font-size: var(--type-label-size);
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--fg-secondary);
}

.city-name {
  margin: 0;
  font-family: var(--font-display);
  font-size: var(--type-h2-size);
  font-weight: 300;
  line-height: 1.05;
  color: var(--fg-primary);
}

/* Fecha y hora en un renglón, con peso; la sede abajo, más liviana. Antes era una tabla de tres
   filas con rótulo (Fecha / Hora / Lugar): en celular hacía cada tarjeta un 40 % más alta y en
   desktop partía las fechas en dos y tres renglones. */
.city-fecha { margin: var(--space-2) 0 0; font-size: var(--type-body-size); font-weight: 600; line-height: 1.4; color: var(--fg-primary); }
.city-lugar { margin: 0 0 var(--space-4); font-size: 14px; line-height: 1.45; color: var(--fg-secondary); }

/* El botón queda pegado abajo aunque una tarjeta tenga una sede más larga
   que las otras: así las cuatro alinean el CTA a la misma altura. */
.city-card .btn { margin-top: auto; }

.city-note {
  margin-top: var(--space-6);
  font-size: 14px;
  line-height: 1.5;
  color: var(--fg-secondary);
  text-align: center;
}
.city-note a { color: var(--fg-accent); text-decoration: underline; text-underline-offset: 3px; }
.city-note a:hover { color: var(--color-dark-blue); }

/* ---- Por qué asistir ---------------------------------------------------- */
.why-grid {
  list-style: none;
  margin: var(--space-8) 0 0;
  padding: 0;
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-6);
}
@media (min-width: 700px)  { .why-grid { grid-template-columns: repeat(2, 1fr); gap: var(--space-8); } }
@media (min-width: 1080px) { .why-grid { grid-template-columns: repeat(3, 1fr); } }

.why-item {
  display: grid;
  grid-template-columns: 38px 1fr;
  gap: var(--space-4);
  align-items: start;
  padding-top: var(--space-4);
  border-top: 1px solid var(--border-default);
}
.why-item p { margin: 0; font-size: var(--type-body-size); line-height: 1.5; color: var(--fg-primary); }
/* Numerales en azul de marca al 70 %: el plata del sistema (#D6DCDC) da 1,4:1 sobre el fondo y acá
   el número informa el orden; así queda en 4,6:1. */
.why-num {
  font-family: var(--font-display);
  font-size: var(--type-sub1-size);
  font-weight: 300;
  line-height: 1;
  color: var(--color-blue);
  opacity: 0.7;
  font-variant-numeric: tabular-nums;
}

/* ---- Footer -------------------------------------------------------------- */
.footer-inner { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-4); }
.footer-brand { margin: 0; font-size: var(--type-small-size); }
.footer-links { display: flex; flex-wrap: wrap; gap: 0 var(--space-6); }
.footer-links a { display: inline-flex; align-items: center; min-height: 44px; font-size: 13px; }
.footer-brand { font-size: 13px; line-height: 1.5; }

/* ---- Impresión: que una charla se pueda imprimir con su dirección -------- */
@media print {
  .nav, .sticky-cta, .hero-actions, .city-note { display: none !important; }
  .city-card { break-inside: avoid; border-color: var(--color-dark-grey); }
}

/* ---- Extensión semántica autorizada por el sistema de diseño ------------
   La paleta base no trae estados. El sistema recomienda, sobrio y con Gray:
   rojo #B42318. Se declara acá, una sola vez, para el error del formulario. */
:root { --color-danger: #B42318; }

/* ---- Hero compacto (gracias) ---------------------------------------------- */
.hero-compact { min-height: 0; padding-block: clamp(112px, 16vw, 176px) clamp(56px, 8vw, 96px); }

/* ---- Por qué, en dos columnas (gracias) ---------------------------------- */
@media (min-width: 700px) { .why-grid-2 { grid-template-columns: repeat(2, 1fr); } }

/* ---- Formulario de inscripción -------------------------------------------- */
.frm {
  margin: 0;
  padding: var(--space-6);
  background: var(--bg-elevated);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-md);
}
@media (min-width: 700px) { .frm { padding: var(--space-8); } }

.frm-grid { display: grid; grid-template-columns: 1fr; gap: var(--space-4); }
@media (min-width: 700px) {
  .frm-grid { grid-template-columns: 1fr 1fr; gap: var(--space-4) var(--space-6); }
  .frm-span { grid-column: 1 / -1; }
}

.frm-field label {
  display: block;
  margin-bottom: var(--space-2);
  font-family: var(--font-ui);
  font-size: var(--type-label-size);
  font-weight: 500;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--fg-secondary);
}
.frm-field input,
.frm-field select {
  width: 100%;
  min-height: 48px;
  padding: 0 var(--space-3);
  font: inherit;
  font-size: var(--type-body-size);
  color: var(--fg-primary);
  background: var(--bg-page);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-sm);
  transition: border-color var(--dur-base) var(--ease-standard), box-shadow var(--dur-base) var(--ease-standard);
}
.frm-field input::placeholder { color: var(--fg-secondary); opacity: 0.7; }
.frm-field input:focus,
.frm-field select:focus { outline: none; border-color: var(--color-blue); box-shadow: var(--focus-ring); }

.frm-phone { display: grid; grid-template-columns: auto 1fr; }
.frm-prefijo {
  display: flex; align-items: center;
  padding: 0 var(--space-3);
  font-size: var(--type-body-size);
  color: var(--fg-primary);
  background: var(--bg-muted);
  border: 1px solid var(--border-default);
  border-right: 0;
  border-radius: var(--radius-sm) 0 0 var(--radius-sm);
  font-variant-numeric: tabular-nums;
}
.frm-phone input { border-radius: 0 var(--radius-sm) var(--radius-sm) 0; }

/* Código de país cambiable (23-sep-2026): el <select> va invisible ENCIMA del recuadro y es el que
   recibe el toque, así en el teléfono se abre el selector nativo (con buscador en iOS y Android) y
   no hace falta una lista propia de 245 países. Lo que se ve es el código y una flecha.
   El borde de foco va en el recuadro, porque el select no se ve. */
.frm-prefijo { position: relative; gap: 6px; cursor: pointer; }
.frm-prefijo-flecha { flex: none; color: var(--fg-secondary); transition: color var(--dur-base) var(--ease-standard); }
.frm-prefijo:hover .frm-prefijo-flecha,
.frm-prefijo:focus-within .frm-prefijo-flecha { color: var(--color-blue); }
.frm-field .frm-prefijo select {
  position: absolute; inset: 0;
  width: 100%; height: 100%; min-height: 0;
  padding: 0; margin: 0;
  border: 0; border-radius: 0;
  background: transparent;
  opacity: 0;
  cursor: pointer;
  font-size: 16px;   /* 16 px o Safari hace zoom al tocarlo, aunque no se vea */
}
.frm-prefijo:focus-within { border-color: var(--color-blue); box-shadow: var(--focus-ring); position: relative; z-index: 1; }

/* Trampa para bots: fuera de pantalla, nunca display:none (algunos bots lo respetan). */
.hp { position: absolute; left: -9999px; top: auto; width: 1px; height: 1px; overflow: hidden; }

.frm [hidden] { display: none !important; }
.frm-error {
  margin: var(--space-4) 0 0;
  padding: var(--space-3) var(--space-4);
  font-size: 14px;
  line-height: 1.45;
  color: var(--color-danger);
  border: 1px solid var(--color-danger);
  border-radius: var(--radius-sm);
}
.frm-fallback {
  margin-top: var(--space-4);
  padding: var(--space-4);
  background: var(--bg-muted);
  border-radius: var(--radius-sm);
}
.frm-fallback p { margin: 0 0 var(--space-3); font-size: 14px; line-height: 1.5; color: var(--fg-primary); }
.frm .btn-block { margin-top: var(--space-6); }
.frm .btn[disabled] { opacity: 0.6; cursor: progress; }

.form-legal, .form-note {
  margin: var(--space-3) 0 0;
  font-size: 13px;
  line-height: 1.5;
  color: var(--fg-secondary);
  text-align: center;
}
.form-legal a { color: var(--fg-accent); text-decoration: underline; text-underline-offset: 3px; }
.form-note { margin-top: var(--space-6); text-align: left; }

/* ---- Mobile: inputs a 16px como mínimo -------------------------------------
   Con 15px (el token de cuerpo) Safari en iPhone hace zoom en cada toque a un
   campo y la persona termina completando el formulario con la página corrida.
   Se sube el tamaño; NUNCA se "arregla" con maximum-scale=1, que bloquea el
   zoom de accesibilidad. */
.frm-field input,
.frm-field select { font-size: max(16px, var(--type-body-size)); }

/* ---- Carrusel de ediciones anteriores ---------------------------------------
   Tira a ras de pantalla en TODOS los anchos (regla de las landings: los carruseles van full-bleed,
   nunca cortados con hueco), con scroll-snap: la primera foto alinea con el contenido y la última
   asoma por el borde, que es lo que avisa que se desliza. Flechas sólo donde hay mouse; puntos
   siempre. El nombre de la ciudad va sobre la foto (antes era una caja blanca debajo). Sin
   touch-action: el scroll vertical sigue libre. Las fotos llevan el telón del kit pero NO el
   parallax: dentro de una tira que se desliza, mover además cada foto hacía el gesto más pesado. */
.gal-cabeza { display: flex; align-items: flex-end; justify-content: space-between; gap: var(--space-6); }
.gal-cabeza .section-head { margin-bottom: 0; }
.gal-nav { display: none; margin: 0; flex: none; }
@media (min-width: 900px) and (hover: hover) { .gal-nav { display: flex; } }
.gal-nav .cnav[disabled] { opacity: 0.35; cursor: default; background: #fff; }
.gallery-strip {
  /* Distancia del borde de la pantalla al eje del contenido (lo mismo que resuelve .wrap). La tira es hija
     directa de la sección, así que 100 % es el ancho real tanto en padding como en scroll-padding (ahí el
     porcentaje es sobre la propia tira). Antes se usaba 50% - 50vw: en scroll-padding daba 0 y, al soltar
     el dedo, las fotos quedaban pegadas al borde en vez de alinear con el texto. */
  --gs-pad: max(var(--gutter), calc((100% - var(--wrap)) / 2 + var(--gutter)));
  /* ancho de una foto y alto común de la tira: el video (vertical, 9:16) usa el mismo alto y sale más angosto */
  --gal-w: min(76vw, 300px);
  --gal-h: calc(var(--gal-w) * 1.25);
  display: flex;
  gap: var(--space-3);
  margin-top: var(--space-8);
  padding-inline: var(--gs-pad);
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scroll-snap-type: x mandatory;
  scroll-padding-inline: var(--gs-pad);
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
}
.gallery-strip::-webkit-scrollbar { display: none; }
.gallery-strip:focus-visible { outline: 2px solid var(--color-blue); outline-offset: 4px; }
.gallery-item {
  position: relative;
  flex: 0 0 var(--gal-w);
  height: var(--gal-h);
  margin: 0;
  overflow: hidden;
  scroll-snap-align: start;
  border-radius: var(--radius-md);
  background: var(--bg-muted);
}
@media (min-width: 900px) { .gallery-strip { gap: var(--space-4); --gal-w: clamp(280px, 25vw, 360px); } }
.gallery-media { height: 100%; overflow: hidden; border-radius: inherit; --r-foto: var(--radius-md); }
.gallery-item img { display: block; width: 100%; height: 100%; object-fit: cover; }
.gallery-item figcaption {
  position: absolute; left: 0; right: 0; bottom: 0;
  padding: var(--space-12, 48px) var(--space-4) var(--space-4);
  font-family: var(--font-ui);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #fff;
  background: linear-gradient(180deg, rgba(6,31,49,0) 0%, rgba(6,31,49,0.82) 100%);
  pointer-events: none;
}
.gal-dots { margin-top: var(--space-3); gap: 0; }
.gal-dots .dot { width: 44px; height: 44px; }   /* el punto se ve igual; el área para el dedo pasa de 32 a 44 px */
/* Monitor muy ancho: si entran las cinco fotos, assets/tour.js marca la sección y se esconden flechas y puntos */
.gal-sin-scroll .gal-nav, .gal-sin-scroll .gal-dots { display: none; }

/* ---- Banderas ------------------------------------------------------------
   SVG propios (assets/flags): las banderas emoji del original no se dibujan
   en Windows (Chrome muestra "PE" en letras). .flag-icon viene del molde. */
.flag-icon { vertical-align: -1px; margin-right: var(--space-2); }
.hero-flags { display: flex; gap: var(--space-2); margin: var(--space-3) 0 var(--space-4); }
.hero-flags .flag-icon { width: 27px; height: 18px; margin: 0; box-shadow: 0 0 0 1px rgba(255,255,255,0.28); }
.city-country { display: flex; align-items: center; }

/* ---- Hero: título más grande en celular ------------------------------------
   El molde baja el display-0 a ~27px en 375px de ancho; para un título de dos
   palabras alcanza el espacio y el original usa 42px. Se sube sin tocar el molde. */
@media (max-width: 699px) { .hero .hero-title { font-size: clamp(1.9rem, 8.9vw, 2.6rem); } }
/* El molde equilibra los renglones de los títulos (text-wrap: balance) y en el banner eso cortaba a veces
   "Conoce en / Lima el camino para". Acá el corte se decide a mano: espacios duros en "el camino para",
   en "piloto comercial." y dentro del nombre de la ciudad, y corte normal (no equilibrado). Medido en
   320–412 px para las cuatro ciudades: "Conoce en {ciudad} / el camino para / convertirte en / piloto comercial." */
.hero .hero-title { text-wrap: wrap; }

/* ---- Franja de confianza (datos verificados de marca) ---------------------- */
.trust-strip { background: var(--bg-elevated); border-block: 1px solid var(--border-default); }
.trust-strip ul { list-style: none; margin: 0; padding: var(--space-4) 0; display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-3) var(--space-6); }
@media (min-width: 900px) { .trust-strip ul { grid-template-columns: repeat(4, auto); justify-content: space-between; padding: var(--space-6) 0; } }
.trust-strip li { font-size: 13px; color: var(--fg-primary); line-height: 1.4; padding-left: 14px; position: relative; }
.trust-strip li::before { content: ""; position: absolute; left: 0; top: 0.55em; width: 6px; height: 6px; border-radius: 50%; background: var(--color-blue); }

/* ---- Formulario: resumen de la ciudad elegida y ayudas -------------------- */
/* Cabeza de la tarjeta: título + cómo sigue. Reemplaza al encabezado de sección que antes se
   repetía entero arriba de cada formulario. */
.frm-cabeza { margin-bottom: var(--space-4); }
.frm-titulo { margin: 0; font-family: var(--font-display); font-size: var(--type-sub1-size); font-weight: 400; line-height: 1.2; letter-spacing: -0.01em; color: var(--color-dark-blue); text-wrap: balance; }
/* A qué charla me estoy anotando: bandera + ciudad en negrita, fecha y hora, sede. */
.frm-resumen {
  display: flex; align-items: flex-start; gap: var(--space-3);
  margin: 0 0 var(--space-6);
  padding: var(--space-3) var(--space-4);
  background: var(--bg-page);
  border: 1px solid var(--border-default);
  border-left: 3px solid var(--color-blue);
  border-radius: var(--radius-sm);
}
.frm-resumen .flag-icon { flex: none; width: 27px; height: 18px; margin: 3px 0 0; box-shadow: 0 0 0 1px rgba(6,31,49,0.12); }
.frm-resumen p { margin: 0; display: grid; gap: 2px; font-size: 14px; line-height: 1.45; color: var(--fg-secondary); }
.frm-resumen strong { font-size: var(--type-body-size); font-weight: 600; color: var(--fg-primary); }
.frm-resumen span:first-of-type { color: var(--fg-primary); }
.frm-hint { margin: var(--space-2) 0 0; font-size: 13px; line-height: 1.45; color: var(--fg-secondary); }
/* Error de un campo: borde rojo + mensaje debajo (assets/tour.js lo crea y lo borra al corregir) */
.frm-msg { display: flex; align-items: flex-start; gap: 6px; margin: var(--space-2) 0 0; font-size: 13px; line-height: 1.45; color: var(--color-danger); }
.frm-msg::before { content: ""; flex: none; width: 14px; height: 14px; margin-top: 2px; background: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round'%3E%3Ccircle cx='12' cy='12' r='9.5'/%3E%3Cpath d='M12 7.5v5.5M12 16.4v.1'/%3E%3C/svg%3E") center / contain no-repeat;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round'%3E%3Ccircle cx='12' cy='12' r='9.5'/%3E%3Cpath d='M12 7.5v5.5M12 16.4v.1'/%3E%3C/svg%3E") center / contain no-repeat; }
.frm-field input[aria-invalid="true"] { border-color: var(--color-danger); }
.frm-phone:has(input[aria-invalid="true"]) .frm-prefijo { border-color: var(--color-danger); }
.frm-field:has([aria-invalid="true"]) .frm-hint { display: none; }

/* ---- FAQ (clases del molde + apertura por JS) ----------------------------- */
.faq-list { margin-top: var(--space-6); border-top: 1px solid var(--color-silver); }
.faq-a .inner a { color: var(--fg-accent); text-decoration: underline; text-underline-offset: 3px; }

/* ---- Hero: respiración y jerarquía de los botones -------------------------
   Corrige lo que se veía en la captura de Edison: el botón pegado al texto y
   el primario azul perdido sobre el hero azul. En celular los dos botones van
   a todo el ancho, uno sobre otro, con la línea de micro-datos debajo. */
.hero .hero-actions { margin-top: var(--space-6); gap: var(--space-3); }
.hero .hero-micro { margin-top: var(--space-4); }
@media (max-width: 699px) {
  .hero .hero-actions { flex-direction: column; align-items: stretch; }
  .hero .hero-actions .btn { width: 100%; }
}

/* ---- Legibilidad en celular: etiquetas a 12px como mínimo -----------------
   El token de label (10px) sirve para metadatos; para los rótulos del
   formulario, los países y los pies de foto queda demasiado chico en pantalla. */
.frm-field label,
.city-country { font-size: max(12px, var(--type-label-size)); }

/* ---- Aire entre título, texto y botones, en TODOS los bloques de acción ----
   Captura de Edison del cierre: h2 pegado al párrafo y botones pegados al
   párrafo. Se resuelve una vez para hero, cierre y gracias. En desktop los
   botones del cierre van lado a lado; en celular, a todo el ancho. */
.hero-actions { margin-top: var(--space-6); gap: var(--space-3); }
.final .h2 { margin: 0 0 var(--space-4); }
.final .lead { margin: 0; }
.final .hero-actions { margin-top: var(--space-8); }
@media (min-width: 700px) {
  .final .hero-actions,
  .section .hero-actions { flex-direction: row; flex-wrap: wrap; align-items: center; }
}
@media (max-width: 699px) {
  .hero-actions { flex-direction: column; align-items: stretch; }
  .hero-actions .btn { width: 100%; }
}

/* ============================================================================
   LANDINGS POR CIUDAD (plantilla/ciudad.html) — 21-sep-2026
   ============================================================================ */

/* ---- Hero de la ciudad: bandera + ciudad · fecha · hora (el saludo "Hola, Lima." se sacó: a Edison no le gustó) --------------------- */
.hero-evento { display: flex; flex-wrap: nowrap; white-space: nowrap; gap: var(--space-6); margin: 0 0 var(--space-4); font-size: var(--type-body-size); font-weight: 600; color: #fff; }
.hero-evento-item { display: inline-flex; align-items: center; gap: var(--space-2); }
.hero-evento-item svg { color: #CBDCE9; flex: none; }
/* Fecha larga ("Sábado 17 de octubre") donde entra en una línea con la hora; corta ("Sábado 17/10") en celular */
.hero-evento .f-corta { display: none; }
@media (max-width: 459px) { .hero-evento .f-larga { display: none; } .hero-evento .f-corta { display: inline; } .hero-evento { gap: var(--space-4); } }

/* ---- Ciudad en el encabezado: bandera + nombre, fijos (sin desplegable) --------------------- */
.nav-ciudad { display: inline-flex; align-items: center; gap: var(--space-2); min-width: 0; margin: 0 0 0 auto; font-size: 14px; font-weight: 600; line-height: 1.2; color: #fff; }
.nav-ciudad span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.nav-ciudad .flag-icon { flex: none; width: 24px; height: 16px; margin: 0; box-shadow: 0 0 0 1px rgba(255,255,255,0.28); }
.nav .nav-ciudad + .nav-cta-btn { margin-left: var(--space-6); }
@media (max-width: 699px) { .nav-ciudad { font-size: 13px; } }

/* ---- Cuándo y dónde: lista de datos ----------------------------------------------------------
   Antes eran tres tarjetas; en la columna del bloque partido (y en celular) se lee mejor como
   lista: rótulo a la izquierda, dato a la derecha. El enlace al mapa es un renglón propio de
   44 px de alto (antes era un texto de 12 px pegado a la ciudad: 16 px de alto para el dedo). */
.evento-datos { margin: var(--space-6) 0 0; border-top: 1px solid var(--border-default); }
.evento-dato { display: grid; grid-template-columns: 92px 1fr; column-gap: var(--space-4); align-items: baseline; padding: var(--space-4) 0; border-bottom: 1px solid var(--border-default); }
.evento-dato dt { font-family: var(--font-ui); font-size: max(12px, var(--type-label-size)); font-weight: 500; letter-spacing: 0.1em; text-transform: uppercase; color: var(--fg-secondary); }
.evento-dato dd { margin: 0; font-family: var(--font-display); font-size: var(--type-sub2-size); line-height: 1.4; color: var(--fg-primary); }
.mapa-link { display: flex; align-items: center; gap: 6px; width: fit-content; min-height: 44px; margin-top: 2px; font-family: var(--font-ui); font-size: 14px; font-weight: 500; color: var(--fg-accent); text-decoration: underline; text-underline-offset: 3px; }
.mapa-link svg { flex: none; }
.mapa-link:hover { color: var(--color-dark-blue); }

/* ---- Video de la charla: primera pieza del carrusel ---------------------------------------------
   Edison, 21-sep-2026: "el video dejarlo en el mismo carrusel de las fotos". Fachada: póster + botón;
   YouTube recién al tocar. La pieza tiene el alto de las fotos y proporción vertical (9:16), así el
   reproductor no deja franjas negras. Con el video andando se esconde el rótulo, que taparía los controles. */
.gallery-item--video { flex-basis: calc(var(--gal-h) * 9 / 16); background: var(--color-black); }
.video-marco { position: relative; }
.video-marco img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }
.video-marco iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; background: var(--color-black); }
.video-marco--activo img, .video-marco--activo .video-play { display: none; }
.gallery-item--video:has(.video-marco--activo) figcaption { display: none; }
.video-play {
  position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 64px; height: 64px; padding: 0 0 0 4px;
  display: flex; align-items: center; justify-content: center; color: #fff; cursor: pointer;
  background: rgba(6, 31, 49, 0.72); border: 1px solid rgba(255,255,255,0.6); border-radius: var(--radius-full);
  transition: background-color var(--dur-base) var(--ease-standard);
}
.video-play:hover { background: var(--color-blue); }
.video-play:focus-visible { outline: none; box-shadow: var(--focus-ring); }

/* ---- Cierre: otras ciudades ---------------------------------------------------------------- */
.otras-ciudades { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-3); margin: var(--space-8) 0 0; font-size: 14px; color: rgba(255,255,255,0.8); }
.otras-ciudades > span { flex-basis: 100%; }
.otra-ciudad { display: inline-flex; align-items: center; min-height: 44px; padding: 0 var(--space-4); color: #fff; text-decoration: none; border: 1px solid rgba(255,255,255,0.4); border-radius: var(--radius-full); transition: background-color var(--dur-base) var(--ease-standard); }
.otra-ciudad:hover { background: rgba(255,255,255,0.12); color: #fff; }
.otra-ciudad .flag-icon { margin-right: var(--space-2); }


/* ============================================================================
   BANNER CON FOTO, GRANO Y PARALLAX — 21-sep-2026 (pedido de Edison)
   Foto: _DSC1684 (charla de Santiago de Chile). El parallax lo hace el kit sobre
   [data-parallax-media]; acá sólo se posiciona la foto, el grano y el velo.
   ============================================================================ */
.hero-bg--charla { overflow: hidden; will-change: transform; }
/* El público está en los dos tercios de abajo de la foto: se baja el encuadre para que se vea la sala
   llena y no el cielorraso. En celular la foto ya viene recortada en vertical sobre el público. */
.hero-bg--charla .hero-poster { object-position: 50% 78%; }
@media (max-width: 767px) { .hero-bg--charla .hero-poster { object-position: 50% 60%; } }

/* Grano de película: SOLO sobre foto (el mismo de MCC y Open Day: feTurbulence con overlay y un
   parpadeo sutil). El contenedor tiene que estar posicionado y con overflow hidden. */
.grain::after {
  content: ""; position: absolute; inset: -8%; pointer-events: none; z-index: 2;
  mix-blend-mode: overlay; opacity: .16;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  background-size: 180px 180px;
  animation: tour-grano .6s steps(3) infinite;
}
@keyframes tour-grano {
  0%   { transform: translate(0, 0); }
  33%  { transform: translate(-3%, 2%); }
  66%  { transform: translate(2%, -2%); }
  100% { transform: translate(0, 0); }
}
@media (max-width: 767px) { .grain::after { opacity: .10; } }
@media (prefers-reduced-motion: reduce) { .grain::after { animation: none; } }

/* Velo azul de marca (Deep Blue #061F31): más denso a la izquierda, donde va el texto; más liviano a
   la derecha, para que se vea la sala. Refuerzo arriba (encabezado) y abajo (cierre del banner).
   Medido el 21-sep-2026 contra los píxeles más claros de la foto: con 70 % de velo el blanco queda en
   9,8:1, la bajada en 8,3:1 y la segunda línea del título en 6,5:1. Si se cambia la foto, volver a medir. */
.hero-scrim--charla {
  background:
    linear-gradient(90deg, rgba(6,31,49,0.88) 0%, rgba(6,31,49,0.80) 38%, rgba(6,31,49,0.62) 70%, rgba(6,31,49,0.50) 100%),
    linear-gradient(180deg, rgba(6,31,49,0.55) 0%, rgba(6,31,49,0) 22%, rgba(6,31,49,0) 70%, rgba(6,31,49,0.65) 100%);
}
@media (max-width: 767px) {
  .hero-scrim--charla {
    background:
      linear-gradient(180deg, rgba(6,31,49,0.86) 0%, rgba(6,31,49,0.76) 30%, rgba(6,31,49,0.76) 72%, rgba(6,31,49,0.90) 100%);
  }
}
@media print { .hero-bg--charla, .hero-scrim--charla { display: none !important; } }

/* ============================================================================
   DESPLEGABLE DE "¿VENÍS ACOMPAÑADO?" — 21-sep-2026
   Mismo patrón e iconografía que el Open Day (Edison: "me gusta la iconografía y cómo se
   resolvió allí"). El campo cerrado es igual a los demás del formulario del tour (caja con
   borde, 48 px, 16 px de cuerpo); la lista abierta es un popover: blanco, borde fino, radio y
   sombra. Cada opción lleva un ícono en un círculo (persona, +1, +2) y la elegida, un tilde.
   El <select> oculto es el que se envía (assets/tour.js, bloque 1b).
   ============================================================================ */
.frm-label {
  display: block; margin-bottom: var(--space-2); cursor: default;
  font-family: var(--font-ui); font-size: max(12px, var(--type-label-size)); font-weight: 500;
  letter-spacing: 0.1em; text-transform: uppercase; color: var(--fg-secondary);
}
.desp { position: relative; }
.desp-btn {
  display: flex; align-items: center; gap: 10px; width: 100%; min-height: 48px;
  margin: 0; padding: 0 var(--space-3); text-align: left; cursor: pointer;
  font: inherit; font-size: max(16px, var(--type-body-size)); line-height: 1.3; color: var(--fg-primary);
  background: var(--bg-page); border: 1px solid var(--border-default); border-radius: var(--radius-sm);
  -webkit-tap-highlight-color: transparent;
  transition: border-color var(--dur-base) var(--ease-standard), box-shadow var(--dur-base) var(--ease-standard);
}
.desp-valor { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
@media (max-width: 360px) { .desp-valor { white-space: normal; padding-block: 10px; } }
.desp:not(.is-lleno) .desp-valor { color: var(--fg-secondary); opacity: 0.85; }
.desp-btn:focus-visible,
.desp.is-abierto .desp-btn { outline: none; border-color: var(--color-blue); box-shadow: var(--focus-ring); }
.desp-btn[aria-invalid="true"] { border-color: var(--color-danger); }
.desp-flecha { width: 16px; height: 16px; flex: none; color: var(--fg-secondary); transition: transform var(--dur-base) var(--ease-standard), color var(--dur-base) var(--ease-standard); }
.desp.is-abierto .desp-flecha { transform: rotate(180deg); color: var(--color-blue); }

.desp-lista {
  position: absolute; left: 0; right: 0; top: calc(100% + 8px); z-index: 30;
  margin: 0; padding: 6px; list-style: none;
  /* con muchas opciones (la edad son 55) la lista no puede tapar la pantalla */
  max-height: 44vh; overflow-y: auto; overscroll-behavior: contain;
  background: var(--bg-elevated); border: 1px solid var(--border-default); border-radius: var(--radius-md);
  box-shadow: var(--shadow-lg);
  opacity: 0; visibility: hidden; pointer-events: none; transform: translateY(-4px);
  transition: opacity var(--dur-base) var(--ease-standard), transform var(--dur-base) var(--ease-standard), visibility 0s linear var(--dur-base);
}
.desp.is-arriba .desp-lista { top: auto; bottom: calc(100% + 8px); transform: translateY(4px); }
.desp.is-abierto .desp-lista { opacity: 1; visibility: visible; pointer-events: auto; transform: none; transition-delay: 0s; }
.desp-op {
  display: flex; align-items: center; gap: 12px; min-height: 52px; padding: 8px 12px 8px 8px;
  border-radius: var(--radius-sm); cursor: pointer; color: var(--fg-primary);
  font-size: max(16px, var(--type-body-size)); line-height: 1.3;
  transition: background-color var(--dur-fast) var(--ease-standard), color var(--dur-fast) var(--ease-standard);
}
.desp-op + .desp-op { margin-top: 2px; }
.desp-ic {
  display: grid; place-items: center; width: 36px; height: 36px; flex: none;
  border-radius: var(--radius-full); background: rgba(0, 60, 103, 0.08); color: var(--color-blue);
  font-family: var(--font-ui); font-size: 14px; font-weight: 600; line-height: 1; letter-spacing: -0.01em;
  transition: background-color var(--dur-fast) var(--ease-standard), color var(--dur-fast) var(--ease-standard);
}
.desp-ic svg { width: 18px; height: 18px; }
/* Edad y género no tienen ícono (sí lo tiene "¿Vienes acompañado?"): sin esto queda un hueco. */
.desp-ic:empty { display: none; }
.desp-op-txt { flex: 1; min-width: 0; }
.desp-check { width: 18px; height: 18px; flex: none; color: var(--color-blue); opacity: 0; }
.desp-op.is-activa { background: rgba(0, 60, 103, 0.06); }
.desp-op[aria-selected="true"] { color: var(--color-blue); font-weight: 600; }
.desp-op[aria-selected="true"] .desp-ic { background: var(--color-blue); color: #fff; }
.desp-op[aria-selected="true"] .desp-check { opacity: 1; }
@media (prefers-reduced-motion: reduce) { .desp-lista, .desp-flecha { transition: none; } }

/* ============================================================================
   AUDITORIA UX/UI — 21-sep-2026
   Lo que se midió y se corrigió está en CONTEXTO-TOUR.md. Acá, lo que es de toda la página.
   ============================================================================ */

/* ---- Ritmo: bandas ---------------------------------------------------------
   Antes todas las secciones tenían el mismo fondo: no había ritmo y el relleno de dos secciones
   seguidas (hasta 208 px en desktop) se leía como un hueco. Ahora alternan, con los recursos del
   molde: claro / banda en degradé (como "roadmap" y las preguntas) / banda oscura (.on-dark). */
.banda { background: var(--gradient-01); }
/* Dos secciones claras seguidas: la segunda entra con un tercio de su relleno de arriba */
.seccion-pegada { padding-top: calc(var(--section-y) * 0.35); }
/* La tira de fotos sale a ras de pantalla con 100vw; con barra de scroll clásica (Windows, tablets
   con mouse) 100vw mide más que la página y aparecía un desborde lateral de 8 px. */
.seccion-galeria { overflow-x: clip; }

/* ---- Bloque partido (desktop) -----------------------------------------------
   Encabezado a la izquierda, contenido a la derecha. Un solo eje izquierdo para toda la página
   (antes los encabezados saltaban entre 117 y 244 px del borde según la sección) y la mitad
   derecha deja de quedar vacía. El encabezado se queda a la vista mientras se recorre la columna
   de la derecha. En celular y tablet todo se apila, en el orden del HTML. */
.partido { display: grid; grid-template-columns: minmax(0, 1fr); row-gap: var(--space-8); }
.partido > .section-head,
.partido-col > .section-head { max-width: 640px; margin-bottom: 0; }
.partido .faq-list { margin-top: 0; }
@media (min-width: 1000px) {
  .partido { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); column-gap: clamp(48px, 6vw, 96px); align-items: start; }
  .partido--form { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .partido > .section-head { position: sticky; top: calc(var(--nav-h) + var(--space-8)); }
}
/* La columna del formulario es el ancla de los botones "Reservar". El aire bajo el encabezado fijo
   ya lo da el molde (html { scroll-padding-top }): acá no se suma otro margen. */

/* ---- Encabezado más bajo en celular -------------------------------------------
   76 px de encabezado + 70 px de barra fija tapaban el 21 % de la pantalla de un celular. */
@media (max-width: 699px) { :root { --nav-h: 60px; } }
.nav-logo { min-height: 44px; }
.skip-link { display: inline-flex; align-items: center; min-height: 44px; }

/* ---- Rótulos de sección (eyebrow): 12 px como mínimo (el molde los deja en 10,8 px) ---------- */
.eyebrow { font-size: max(12px, 0.72rem); }

/* ---- Títulos de sección: que no quede una palabra sola en el último renglón ------------------ */
.h2 { text-wrap: balance; }
.lead, .why-item p, .faq-a .inner { text-wrap: pretty; }


/* ============================================================================
   MAS VISUAL — 21-sep-2026 (pedido de Edison, con la landing internacional como referencia)
   ============================================================================ */

/* ---- "Pensado para vos, que venís de afuera": tarjetas con foto -------------
   Mismo recurso que internacional.proflight.com.ar (.vp-grid): foto arriba a todo el ancho de la
   tarjeta, título y texto adentro. Allá va sobre banda oscura; acá sobre claro, porque la banda
   oscura de al lado es "En vivo y en directo". De 1 a 3 columnas sin etapa de 2 (con tres tarjetas,
   dos columnas dejan una sola abajo). El marco de la foto lleva el telón y el parallax del kit. */
.vp-grid { display: grid; grid-template-columns: 1fr; gap: var(--space-4); }
@media (min-width: 700px) { .vp-grid { grid-template-columns: repeat(3, 1fr); gap: var(--space-6); } }
.vp-item { display: flex; flex-direction: column; overflow: hidden; background: var(--bg-elevated); border: 1px solid var(--border-default); border-radius: var(--radius-md); transition: border-color var(--dur-base) var(--ease-standard); }
.vp-item:hover { border-color: var(--color-blue); }
.vp-media { aspect-ratio: 16 / 10; background: var(--bg-muted); --r-foto: 0px; }
.vp-media img { display: block; width: 100%; height: 100%; object-fit: cover; }
.vp-texto { padding: var(--space-4) var(--space-6) var(--space-6); }
.vp-titulo { margin: 0 0 var(--space-2); font-family: var(--font-display); font-size: 1.25rem; font-weight: 400; line-height: 1.2; letter-spacing: -0.01em; color: var(--color-dark-blue); text-wrap: balance; }
.vp-texto p { margin: 0; font-size: var(--type-body-size); line-height: 1.55; color: var(--fg-secondary); text-wrap: pretty; }
@media (min-width: 700px) and (max-width: 999px) { .vp-texto { padding: var(--space-4); } }

/* Ícono en círculo (el mismo del desplegable de acompañantes): lo usa "Qué vas a conocer" */
.vp-ic { display: grid; place-items: center; width: 44px; height: 44px; border-radius: var(--radius-full); background: rgba(0, 60, 103, 0.08); color: var(--color-blue); }
.vp-ic svg { width: 22px; height: 22px; }

/* ---- "En vivo y en directo": foto del expositor ---------------------------------
   Celular y tablet: título, dos renglones y el marco con el pase de fotos. Desktop: el marco a la
   izquierda, centrado con el texto. Los puntos van DEBAJO del marco: no tapan la foto. */
.dir-fila { display: grid; grid-template-columns: minmax(0, 1fr); row-gap: var(--space-8); }
.dir-fila > .section-head { max-width: 640px; margin-bottom: 0; }
.dir-foto { position: relative; margin: 0; aspect-ratio: 4 / 3; overflow: hidden; border-radius: var(--radius-md); border: 1px solid rgba(255, 255, 255, 0.16); background: var(--color-dark-blue); --r-foto: var(--radius-md); }
/* Pase de fotos: las cuatro van apiladas en el marco y se funden (la activa, opaca). --foco es el punto
   que se conserva cuando el marco es más apaisado que la foto (tablet, 16:9); cada foto trae el suyo. */
.dir-slide { position: absolute; inset: 0; display: block; width: 100%; height: 100%; object-fit: cover; object-position: var(--foco, 50% 30%); opacity: 0; transition: opacity 0.8s var(--ease-standard); }
.dir-slide.is-activa { opacity: 1; }
@media (prefers-reduced-motion: reduce) { .dir-slide { transition: none; } }
/* Velo Deep Blue suave desde la izquierda y desde abajo: en dos de las fotos hay una pantalla encendida a la
   izquierda, muy luminosa contra la banda oscura. Va por encima de las cuatro fotos. */
.dir-foto::after { content: ""; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(90deg, rgba(6,31,49,0.34) 0%, rgba(6,31,49,0.08) 40%, rgba(6,31,49,0) 64%),
              linear-gradient(180deg, rgba(6,31,49,0) 62%, rgba(6,31,49,0.32) 100%); z-index: 1; }
@media (min-width: 700px) and (max-width: 999px) { .dir-foto { aspect-ratio: 16 / 9; } }
@media (min-width: 1000px) {
  .dir-fila { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); column-gap: clamp(48px, 6vw, 96px); align-items: center; }
  .dir-galeria { grid-column: 1; grid-row: 1; }
  .dir-fila > .section-head { grid-column: 2; grid-row: 1; }
}
.dir-galeria { min-width: 0; }
.dir-ctrl { display: flex; align-items: center; justify-content: center; gap: var(--space-1, 4px); margin-top: var(--space-2); }
.dir-ctrl[hidden] { display: none; }
.dir-puntos { margin-top: 0; gap: 0; }
.dir-puntos .dot { width: 44px; height: 44px; }
@media print { .dir-galeria .dir-ctrl, .vp-media { display: none !important; } .dir-slide:not(.is-activa) { display: none; } }

/* ---- Mapa de la sede, a mapa abierto (21-sep-2026) --------------------------------------------- */
.evento-mapa { margin-top: var(--space-6); aspect-ratio: 16 / 11; overflow: hidden; border: 1px solid var(--border-default); border-radius: var(--radius-md); background: var(--bg-muted); }
.evento-mapa iframe { display: block; width: 100%; height: 100%; border: 0; }
@media (min-width: 1000px) { .evento-mapa { aspect-ratio: 16 / 10; } }
.evento-nota { margin: var(--space-3) 0 0; font-size: 14px; line-height: 1.5; color: var(--fg-secondary); }
@media print { .evento-mapa { display: none !important; } }

/* ============================================================================
   FORMULARIO SOBRE AZUL DE MARCA — 21-sep-2026
   Edison: "El formulario tiene mucho blanco sobre blanco. Duele la vista". Era tarjeta blanca sobre
   página casi blanca, con campos casi blancos y borde gris claro: tres capas sin contraste. Ahora la
   tarjeta es el degradé azul de marca (--gradient-05) y los campos son blancos: el formulario pasa a
   ser lo que más se ve de la página y cada campo se distingue de lejos. Contrastes medidos sobre el
   punto más claro del degradé (#003C67): rótulos 9,6:1, ayudas 7,4:1, errores 6,9:1.
   Va al final del archivo: pisa, para todo lo que vive dentro de .frm, las reglas claras de arriba.
   ============================================================================ */
.frm { background: var(--gradient-05); border: 0; color: #fff; box-shadow: var(--shadow-lg); }
.frm .frm-titulo { color: #fff; }
.frm .frm-resumen { background: rgba(255, 255, 255, 0.08); border-color: rgba(255, 255, 255, 0.18); border-left-color: #7FA8C8; }
.frm .frm-resumen p { color: rgba(255, 255, 255, 0.8); }
.frm .frm-resumen strong,
.frm .frm-resumen span:first-of-type { color: #fff; }
.frm .frm-resumen .flag-icon { box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.28); }
.frm .frm-field label,
.frm .frm-label { color: rgba(255, 255, 255, 0.86); }
.frm .frm-field input,
.frm .desp-btn { background: #fff; border-color: #fff; color: var(--fg-primary); }
.frm .frm-prefijo { background: #DCE5EB; border-color: #DCE5EB; color: var(--color-dark-blue); font-weight: 500; }
.frm .frm-field input:focus,
.frm .desp-btn:focus-visible,
.frm .desp.is-abierto .desp-btn { border-color: #7FA8C8; box-shadow: 0 0 0 3px rgba(127, 168, 200, 0.6); }
.frm .frm-hint { color: rgba(255, 255, 255, 0.78); }
.frm .frm-msg { color: #FFB3A7; }
.frm .frm-field input[aria-invalid="true"],
.frm .desp-btn[aria-invalid="true"] { border-color: #FF8E7E; box-shadow: 0 0 0 2px rgba(255, 142, 126, 0.55); }
.frm .frm-phone:has(input[aria-invalid="true"]) .frm-prefijo { border-color: #DCE5EB; }
.frm .frm-error { color: #FFE1DC; border-color: #FF8E7E; background: rgba(255, 142, 126, 0.12); }
.frm .frm-fallback { background: rgba(255, 255, 255, 0.08); }
.frm .frm-fallback p { color: #fff; }
.frm .btn-outline { color: #fff; border-color: rgba(255, 255, 255, 0.55); }
.frm .btn-outline:hover { background: #fff; border-color: #fff; color: var(--color-dark-blue); }
.frm .btn-on-dark:focus-visible { outline: 2px solid #fff; outline-offset: 3px; }
.frm .form-legal { color: rgba(255, 255, 255, 0.78); }
.frm .form-legal a { color: #fff; }
.frm .form-legal a:hover { color: #CBDCE9; }

/* ============================================================================
   SORTEO — 21-sep-2026 (Edison: "sumar una sección de sorteo como la de Open Day")
   Banda con la foto de una charla, velo Deep Blue al 82 % y grano; título fino en mayúsculas, en dos
   líneas escalonadas que el kit corre en sentidos opuestos (data-deriva). La foto la mueve el kit
   (data-parallax="banda": la capa es 30 % más alta que la banda). Contraste sobre el velo: texto
   chico 9:1, acento 6:1.
   ============================================================================ */
.sorteo { position: relative; isolation: isolate; overflow: hidden; background: var(--color-dark-blue); color: #fff; padding-block: clamp(72px, 14vw, 120px); }
.sorteo-media { position: absolute; inset: -15% 0; z-index: -2; overflow: hidden; will-change: transform; }
.sorteo-media img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: 50% 40%; }
.sorteo::before { content: ""; position: absolute; inset: 0; z-index: -1; background: rgba(6, 31, 49, 0.82); }
.sorteo-in { position: relative; }
.sorteo-titulo { margin: 0; color: #fff; text-transform: uppercase; text-wrap: wrap; font-family: var(--font-display); font-weight: 300; font-size: clamp(34px, 9vw, 104px); line-height: 1; letter-spacing: -0.02em; }
.sorteo-titulo .line--der { padding-left: 0.9em; color: #7FA8C8; }
.sorteo-premio { margin: 28px 0 0; max-width: 30ch; color: #fff; text-wrap: balance; font-family: var(--font-display); font-weight: 300; font-size: clamp(21px, 5.4vw, 30px); line-height: 1.25; letter-spacing: -0.01em; }
.sorteo-premio strong { color: #9CC3E0; font-weight: 600; }
.sorteo-nota { margin: 12px 0 0; color: rgba(255, 255, 255, 0.78); font-size: 15px; line-height: 22px; }
.sorteo .hero-actions { margin-top: 32px; }
@media (min-width: 900px) { .sorteo { min-height: 600px; display: grid; align-items: center; padding-block: 120px; } .sorteo-in { width: 100%; } }
@media print { .sorteo-media { display: none !important; } }

/* ============================================================================
   GRACIAS — misma resolución que la del Open Day (Edison, 21-sep-2026)
   Encabezado oscuro centrado con la barra "casi completa" y la píldora "Falta un paso"; el paso
   obligatorio (el grupo de WhatsApp de la ciudad) va dentro del encabezado, a la vista sin bajar;
   debajo, los datos para el día del evento en tarjetas. El botón acompaña fijo abajo.
   ============================================================================ */
.gracias-top { text-align: center; padding-bottom: clamp(40px, 6vw, 64px); }
.gracias-nav { display: flex; align-items: center; justify-content: space-between; gap: var(--space-4); min-height: 72px; text-align: left; }
.gracias-head { padding-top: clamp(24px, 5vw, 56px); }
.gracias-fecha { justify-content: center; margin-bottom: 4px; }
.gracias-title { margin: 14px 0 0; color: #fff; text-wrap: balance; font-family: var(--font-display); font-weight: 700; font-size: clamp(2rem, 5.4vw, 3.4rem); line-height: 1.06; letter-spacing: -0.025em; }

/* ---- Barra de progreso -----------------------------------------------------------------------
   El número está DOS veces en el mismo lugar: uno azul sobre la pista blanca y otro blanco dentro
   del relleno. El relleno recorta su propia copia con clip-path, así la parte del número que ya
   tapó el azul se ve blanca y la que sigue sobre blanco se ve azul: nunca azul sobre azul ni blanco
   sobre blanco. El porcentaje vive en CUATRO lugares: --pct acá y, en gracias.html, aria-valuenow,
   aria-valuetext y el texto del número. */
.gracias-progress { max-width: 560px; margin: 28px auto 0; }
.pbar { --pct: 89; position: relative; height: 40px; overflow: hidden; border-radius: var(--radius-sm); background: #fff; }
.pbar-fill { position: absolute; inset: 0; background: var(--color-blue); clip-path: inset(0 calc(100% - var(--pct) * 1%) 0 0); animation: pbar-fill 1.5s var(--ease-standard) 0.3s both; }
/* Sólo se define el `from`: el estado final es el de arriba, así la barra queda completa aunque la animación no corra */
@keyframes pbar-fill { from { clip-path: inset(0 100% 0 0); } }
.pbar-num { position: absolute; top: 50%; right: calc((100 - var(--pct)) * 1% + 14px); transform: translateY(-50%); font-family: var(--font-ui); font-size: 13px; font-weight: 600; line-height: 1; font-variant-numeric: tabular-nums; letter-spacing: 0.01em; white-space: nowrap; color: var(--color-blue); }
.pbar-fill .pbar-num { color: #fff; }
@media (prefers-reduced-motion: reduce) { .pbar-fill { animation: none; } }

/* Aviso "falta un paso": píldora blanca con punto ámbar que late ([data-late] del kit) */
.gracias-alert { display: inline-flex; align-items: center; gap: 10px; margin: 16px 0 0; padding: 10px 18px; border-radius: var(--radius-full); background: #fff; color: var(--color-dark-blue); font-size: clamp(15px, 1.6vw, 17px); font-weight: 600; line-height: 1.25; }
.gracias-alert-dot { flex: none; width: 10px; height: 10px; border-radius: 50%; background: #B54708; --late-rgb: 181, 71, 8; }

/* ---- La acción, dentro del encabezado ------------------------------------------------------ */
.gracias-accion { max-width: 560px; margin: 28px auto 0; }
.gracias-paso { margin: 0; color: #7FA8C8; font-size: 12px; font-weight: 600; line-height: 16px; letter-spacing: 0.14em; text-transform: uppercase; }
.gracias-accion .wa-btn { margin-top: 12px; }
.gracias-por { max-width: 40ch; margin: 14px auto 0; color: rgba(255, 255, 255, 0.78); font-size: 15px; line-height: 22px; text-wrap: balance; }

/* Botón de WhatsApp: pill verde con texto verde oscuro. Blanco sobre #25D366 da 1,98:1 (ilegible);
   #06311A da 7,2:1 en reposo y 5,1:1 presionado. Es el único verde de la landing: es el color de WhatsApp. */
.wa-btn { display: flex; align-items: center; gap: 12px; width: 100%; min-height: 60px; margin-top: 24px; padding: 10px 22px 10px 10px; border-radius: var(--radius-full); background: #25D366; color: #06311A; text-decoration: none; font-size: 16px; font-weight: 600; line-height: 1.3; transition: background-color var(--dur-fast) var(--ease-standard), box-shadow var(--dur-fast) var(--ease-standard); }
.wa-btn:hover { background: #22C25E; color: #06311A; text-decoration: none; }
.wa-btn:active { background: #1FB156; color: #06311A; }
a.wa-btn:focus-visible { outline: none; box-shadow: 0 0 0 3px #fff, 0 0 0 5px var(--color-blue); }
.on-dark a.wa-btn:focus-visible { box-shadow: 0 0 0 3px var(--color-dark-blue), 0 0 0 5px #7FA8C8; }
/* El principal: más alto y con un halo verde que late suave ([data-halo] del kit, en ::after) */
.wa-btn--principal { min-height: 64px; font-size: 17px; --halo-rgb: 37, 211, 102; box-shadow: 0 10px 30px rgba(37, 211, 102, 0.25); }
.wa-ic { flex: 0 0 40px; display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; background: #fff; }
.wa-txt { flex: 1; min-width: 0; text-align: center; }
.wa-arr { flex: none; }

/* ---- Para el día del evento: datos útiles en tarjetas ---------------------------------------- */
.gracias-info { padding-block: clamp(36px, 5vw, 56px) clamp(48px, 7vw, 72px); }
.gracias-info-titulo { max-width: 560px; margin: 0 auto; color: var(--color-dark-blue); text-align: left; font-family: var(--font-display); font-weight: 300; font-size: clamp(24px, 3vw, 30px); line-height: 1.15; letter-spacing: -0.01em; }
.gracias-datos { display: grid; gap: 12px; max-width: 560px; margin: 20px auto 0; padding: 0; list-style: none; }
.gracias-datos li { display: flex; align-items: flex-start; gap: 14px; padding: 16px 18px; background: var(--bg-elevated); border: 1px solid var(--border-default); border-radius: var(--radius-md); }
/* `hidden` no alcanza cuando una clase declara su propio display (flex, grid): sin esto, si alguien entra a
   /gracias sin ciudad se verían la bandera vacía, la fila de fecha y las tarjetas sin datos. */
.gracias [hidden] { display: none !important; }
.gd-ic { display: grid; place-items: center; flex: none; width: 44px; height: 44px; border-radius: 50%; background: rgba(0, 60, 103, 0.08); color: var(--color-blue); }
.gd-ic svg { width: 21px; height: 21px; }
.gd-txt { display: flex; flex-direction: column; gap: 2px; min-width: 0; padding-top: 2px; color: var(--fg-secondary); font-size: 14px; line-height: 21px; }
.gd-txt b { color: var(--color-dark-blue); font-size: 16px; font-weight: 600; line-height: 22px; }
/* "Ver cómo llegar": desplegable dentro de la tarjeta; la tarjeta pasa a grilla para que el mapa use todo el ancho */
.gracias-datos li.gd-item--mapas { display: grid; grid-template-columns: 44px minmax(0, 1fr); column-gap: 14px; align-items: start; }
.gracias-datos li.gd-item--mapas[hidden] { display: none; }
.gd-mapas { grid-column: 1 / -1; min-width: 0; }
.gd-mapas summary { display: inline-flex; align-items: center; gap: 6px; margin: -5px 0 -11px 58px; padding-block: 11px; color: var(--fg-accent); font-size: 14px; font-weight: 600; line-height: 21px; text-decoration: underline; text-underline-offset: 3px; cursor: pointer; list-style: none; -webkit-tap-highlight-color: transparent; }
.gd-mapas summary::-webkit-details-marker { display: none; }
.gd-mapas summary:hover { color: var(--color-dark-blue); }
.gd-mapas summary:focus-visible { outline: none; border-radius: 6px; box-shadow: var(--focus-ring); }
.gd-chevron { flex: none; width: 16px; height: 16px; transition: transform var(--dur-base) var(--ease-standard); }
.gd-mapas[open] .gd-chevron { transform: rotate(180deg); }
.gd-mapas-cuerpo { display: grid; gap: 14px; margin-top: 22px; }
.gd-gmaps { position: relative; overflow: hidden; aspect-ratio: 4 / 3; border-radius: var(--radius-sm); background: var(--bg-muted); }
.gd-gmaps iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.gd-mapas-links { display: flex; flex-wrap: wrap; gap: 4px 24px; }
.gd-maps-link { display: inline-flex; align-items: center; gap: 6px; padding-block: 11px; margin-block: -8px; color: var(--fg-accent); font-size: 13px; line-height: 18px; text-decoration: underline; text-underline-offset: 3px; }
.gd-maps-link svg { width: 14px; height: 14px; }

/* ---- Botón fijo (aparece al bajar, cuando el de arriba ya no se ve), en celular y en escritorio */
.wa-fija { position: fixed; left: 0; right: 0; bottom: 0; z-index: 50; padding: 10px 0 calc(10px + env(safe-area-inset-bottom, 0px)); background: #fff; border-top: 1px solid var(--border-default); box-shadow: 0 -8px 24px rgba(6, 31, 49, 0.10); transform: translateY(110%); visibility: hidden; transition: transform var(--dur-slow) var(--ease-standard), visibility 0s linear var(--dur-slow); }
.wa-fija.is-visible { transform: none; visibility: visible; transition-delay: 0s; }
.wa-fija .wa-btn { min-height: 54px; max-width: 560px; margin: 0 auto; }
.gracias .footer { padding-bottom: calc(32px + 76px + env(safe-area-inset-bottom, 0px)); }
@media print { .wa-fija { display: none !important; } }

/* ============================================================================
   VERSION REDUCIDA — 21-sep-2026 (Edison: "menos explicación y más claridad… el producto que estamos
   vendiendo es la charla gratuita, no toda la carrera en una sola página"). Seis bloques + sorteo + cierre.
   ============================================================================ */

/* ---- "Qué vas a conocer": cuatro ítems para leer de un vistazo (2 × 2 en desktop) ------------------- */
.conocer { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: 1fr; gap: var(--space-6); }
@media (min-width: 700px) { .conocer { grid-template-columns: 1fr 1fr; gap: var(--space-8) var(--space-8); } }
.conocer li { display: grid; grid-template-columns: 44px 1fr; column-gap: var(--space-4); align-items: start; }
.conocer h3 { margin: 2px 0 4px; font-family: var(--font-display); font-size: 1.2rem; font-weight: 400; line-height: 1.25; letter-spacing: -0.01em; color: var(--color-dark-blue); }
.conocer p { margin: 0; font-size: var(--type-body-size); line-height: 1.5; color: var(--fg-secondary); text-wrap: pretty; }

/* ---- Formulario + ubicación ---------------------------------------------------------------------
   En el HTML va primero el formulario: en celular es lo primero que se ve del bloque y es adonde llegan
   todos los botones. En desktop la grilla los cruza: datos y mapa a la izquierda, formulario a la derecha. */
@media (min-width: 1000px) {
  .partido--lugar > .frm-col { grid-column: 2; grid-row: 1; }
  .partido--lugar > .partido-col { grid-column: 1; grid-row: 1; }
}
/* El título del formulario ahora es un <h2>: que no herede márgenes de título de sección */
h2.frm-titulo { margin: 0; }

/* ---- Bandas más bajas: que la página se recorra rápido ------------------------------------------ */
.sorteo { padding-block: clamp(56px, 10vw, 96px); }
@media (min-width: 900px) { .sorteo { min-height: 460px; padding-block: 88px; } }
.final.section { padding-block: clamp(48px, 6vw, 80px); }
.final .hero-actions { margin-top: var(--space-6); }
.otras-ciudades { margin-top: var(--space-6); }
@media (min-width: 900px) { .gallery-strip { --gal-w: clamp(240px, 21vw, 300px); } }

/* ---- Cualificador según la edad (24-sep-2026) -----------------------------------------------------
   Las preguntas que dependen de la edad aparecen SIN animación, a propósito. Tuvieron un fundido de
   entrada y rompió el selector (lo vio Edison el 24-sep-2026): con la animación aplicada, cada pregunta
   era una capa aparte y el campo de abajo se pintaba ENCIMA de su lista abierta (se tapaban 2 de las 3
   opciones de "¿Para quién es la formación?"); y donde la animación no corre, la pregunta queda invisible.
   El campo con la lista abierta sube por encima de los demás (debajo del encabezado, 100, y de las barras
   fijas), así ninguna regla que lo vuelva capa puede tapar su lista. */
.frm-field:has(> .desp.is-abierto) { position: relative; z-index: 40; }