/* ============================================================================
   Open Day — ProFlight Academy · Sistema Híbrido HIG (Opción B)
   Reescrito entero el 14-sep-2026 sobre los tokens de tokens.css. Reemplaza las
   capas anteriores (sistema sep-2026 + overrides acumulados) en lugar de sumar
   más parches encima: la cascada vieja ya pisaba sus propias reglas.

   Reglas B que este archivo respeta a propósito:
   - Mate: profundidad por elevación tintada (e1–e4). Nunca vidrio ni blur de UI.
   - Botones pill con state layer (hover +8%, pressed +16%). Sin scale.
     Una sola CTA tintada por vista.
   - Cards blancas a radio 20, internos a 12. Blanco sobre blanco = hairline
     #E9ECEE + Nivel 2; sobre gris alcanza el Nivel 1.
   - Campos de línea con foco Blue.
   - Transparencia SOLO sobre foto (velo Deep Blue 60–80%). Grano SOLO sobre foto.
   - Movimiento 120/200/320ms en estados y controles.

   ANIMACIONES (revelado, títulos por palabras, telón de fotos, parallax, íconos, mapa,
   micro): kit compartido assets/animaciones.css + assets/animaciones.js, copia maestra en
   Landing pages ProFlight/UI KIT - B/animaciones. Nació acá (Edison, 14 al 17-sep-2026:
   "parece un folleto, se ve plano") y el 17-sep pasó al manual para todas las landings.
   En este archivo quedan sólo los ajustes propios (bloque ANIMACIONES, al final).
   ============================================================================ */

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body { color: var(--text-primary); font: var(--fw-regular) var(--t-body)/22px var(--font-sans); }
img { display: block; max-width: 100%; height: auto; }
a { color: var(--text-accent); text-underline-offset: 2px; }
a:hover { color: var(--dblue); }
strong, b { font-weight: var(--fw-semibold); }
em { font-style: normal; }
[id] { scroll-margin-top: 24px; }

/* ---- Accesibilidad ---------------------------------------------------------- */
.skip-link {
  position: absolute; left: -9999px; top: auto; z-index: 100;
  background: var(--dblue); color: var(--white);
  padding: 10px 18px; border-radius: var(--r-full); text-decoration: none;
}
.skip-link:focus { left: 16px; top: 16px; }
:focus-visible { outline: none; box-shadow: var(--focus-ring); }
.on-dark :focus-visible { box-shadow: var(--focus-ring-dark); }
a:not(.btn):focus-visible { border-radius: 4px; }

/* ---- Contenedores ------------------------------------------------------------- */
.wrap { max-width: 720px; margin-inline: auto; padding-inline: var(--gutter); }
.section { padding-block: clamp(56px, 8vw, 88px); }
.section-sm { padding-block: clamp(32px, 5vw, 48px); }
.section--gris { background: var(--bg-subtle); }
.on-dark { color: var(--text-inverse); }

/* El aire entre secciones NO se duplica (error ya visto en estas landings: dos
   secciones seguidas sumaban 88 + 88 y se leía como un agujero). Con el mismo
   fondo seguido, alcanza con el aire de abajo de la anterior; con cambio de
   fondo, el de arriba se reduce porque el color ya separa. */
.section:not(.section--gris) + .section:not(.section--gris),
.section--gris + .section--gris { padding-top: 0; }
.section:not(.section--gris) + .section--gris,
.section-sm + .section--gris,
.section--gris + .section:not(.section--gris) { padding-top: clamp(40px, 6vw, 56px); }

/* ---- Tipografía de la página ---------------------------------------------------- */
.eyebrow { margin: 0 0 12px; color: var(--text-secondary); }

/* Títulos de sección: Inter 300 en lugar de NHG Light (mismo criterio que MCC) */
.h2 {
  margin: 0; color: var(--text-primary); text-wrap: balance;
  font: var(--fw-light) clamp(28px, 6vw, 34px)/1.1 var(--font-sans); letter-spacing: -.01em;
}
.h2 em, .h2 strong { color: var(--blue); font-weight: var(--fw-regular); }

.lead { color: var(--text-secondary); }

/* Flujo vertical: separa hermanos sin márgenes sueltos por elemento */
.flow > * { margin-top: 0; margin-bottom: 0; }
.flow > * + * { margin-top: 16px; }
.flow > .eyebrow + * { margin-top: 12px; }
.flow > .h2 + * { margin-top: 20px; }

/* ---- Marca (logo ProFlight + logo Open Day) --------------------------------------------- */
.brand-row { display: flex; align-items: center; gap: 14px; margin-bottom: 40px; }
/* El SVG de ProFlight trae aire alrededor: la tinta ocupa el 42% del alto y deja
   ~35% del alto de margen a cada costado (medido 16-sep-2026). El margen negativo
   lo compensa, así el logo arranca alineado con el texto y queda a la misma
   distancia del divisor que el logo de Open Day. */
.pf-logo { --pf-h: 22px; height: var(--pf-h); width: auto; margin-inline: calc(var(--pf-h) * -.35); }
/* Logo oficial de Open Day (Edison, 16-sep-2026). PNG a 600 px de ancho: nítido
   hasta 3x. Sacado del archivo del reel en alta y afinado al grosor del oficial. */
.od-logo { height: 20px; width: auto; }
.brand-div { width: 1px; height: 20px; background: rgba(251, 250, 250, .3); }
/* Logos más grandes (Edison, 16-sep) */
.brand-row .pf-logo { --pf-h: 56px; }
.brand-row .od-logo { height: 30px; }
.brand-row .brand-div { height: 28px; }

/* ---- Botones pill ------------------------------------------------------------------------ */
.cta-row { display: flex; flex-wrap: wrap; gap: 14px; align-items: center; }
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 9px;
  min-height: var(--control-h); padding: 0 26px;
  border: 1px solid transparent; border-radius: var(--r-full); background: transparent;
  font: var(--fw-medium) 14px/1 var(--font-sans); letter-spacing: .01em;
  text-decoration: none; white-space: nowrap; cursor: pointer;
  transition: background-color var(--dur-micro) var(--ease), color var(--dur-micro) var(--ease),
              border-color var(--dur-micro) var(--ease), box-shadow var(--dur-micro) var(--ease);
}
.btn svg { width: 18px; height: 18px; flex-shrink: 0; }
/* Primario: Blue; state layer +8% al hover, +16% al presionar (valores del manual) */
.btn-primary { background: var(--blue); color: var(--white); }
.btn-primary:hover { background: #0B4247; color: var(--white); box-shadow: var(--e1); }
.btn-primary:active { background: var(--dblue); color: var(--white); box-shadow: none; }
/* Primario sobre oscuro: el hero pide la CTA en blanco, no Blue sobre Deep Blue */
.btn-onblue { background: var(--white); color: var(--dblue); }
.btn-onblue:hover { background: var(--grey); color: var(--dblue); }
.btn-onblue:active { background: var(--silver); color: var(--dblue); }
/* Secundario de línea */
.btn-secondary { border-color: var(--black); color: var(--black); }
.btn-secondary:hover { background: rgba(29, 29, 29, .06); color: var(--black); }
.btn-secondary:active { background: rgba(29, 29, 29, .12); }
.btn:focus-visible { box-shadow: var(--focus-ring); }
.on-dark .btn:focus-visible { box-shadow: var(--focus-ring-dark); }

/* ---- Grano de película: SOLO sobre foto -------------------------------------------------
   feTurbulence al ~16% con overlay y un flicker sutil (idéntico a MCC). El
   contenedor tiene que estar posicionado y con overflow:hidden. */
.grain::after {
  content: ""; position: absolute; inset: -8%; pointer-events: none; z-index: 1;
  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: grain .6s steps(3) infinite;
}
@keyframes grain {
  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; } }   /* en mobile el grano baja */

/* ============================ HERO ============================ */
.hero {
  position: relative; isolation: isolate; overflow: hidden;
  background: var(--dblue); color: var(--text-inverse);
  padding-block: clamp(56px, 12vw, 96px) clamp(48px, 9vw, 72px);
  /* Mobile: 3/4 de la pantalla (Edison, 16-sep: "que se alcance a ver la sección
     siguiente"). En escritorio sigue a pantalla completa (ver el media de 900 px).
     svh: el alto con la barra del navegador visible. */
  min-height: 75vh; min-height: 75svh; display: flex; flex-direction: column;
}
.hero-media { position: absolute; inset: 0; z-index: -2; overflow: hidden; will-change: transform; }
.hero-media img { width: 100%; height: 100%; object-fit: cover; }
.hero-media picture { display: block; width: 100%; height: 100%; }
/* Velo azul verdoso + grilla de la pieza. Con 76% todo el texto blanco queda por
   encima de 6,5:1 en las dos fotos (medido 16-sep-2026 contra los píxeles de
   _DSC9938 y _DSC9865). Si se cambia una foto, volver a medir. */
.hero::before {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background-color: rgba(12, 42, 45, .76);
  background-image: var(--grilla); background-size: var(--grilla-t) var(--grilla-t); background-position: center top;
}
.hero-in { position: relative; flex: 1; display: flex; flex-direction: column; width: 100%; }
/* Mobile en tres bloques (Edison, 16-sep: "distribuí mejor la información"): logos
   arriba, fecha + título en el medio, bajada + botón + datos abajo. Los dos margin
   auto (acá y en .hero-title) reparten el espacio libre en partes iguales; en un
   celular bajo se achican a cero sin romper nada. En escritorio el hero es grid,
   el bloque no se estira, los auto valen 0 y todo queda abajo como antes. */
.hero .brand-row { margin-bottom: auto; padding-bottom: 40px; }
/* H1 como la pieza: fino, en mayúsculas y escalonado (la segunda línea corrida a
   la derecha). Cada línea sube desde una máscara que define el kit ([data-entrada-lineas]
   .line: overflow hidden con padding y margen negativos para no recortar acentos ni
   descendentes; el bug del 14-sep-2026 era una máscara sin ese aire). No repetirla acá. */
.hero-title {
  margin: 18px 0 0; color: var(--white); text-transform: uppercase;
  font: 200 clamp(40px, 4.7vw, 68px)/1.02 var(--font-sans); letter-spacing: -.02em;
}
.hero-title .line--der { padding-left: .6em; }
/* Fecha y horario destacados, sin "Open Day ProFlight" (Edison, 17-sep-2026: "menos
   información al usuario es mejor"). Íconos cian, texto blanco semibold. */
.hero-fecha { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 22px; margin: 0; color: var(--white); font: var(--fw-semibold) 15px/1.2 var(--font-sans); letter-spacing: .02em; }
.hf { display: inline-flex; align-items: center; gap: 9px; white-space: nowrap; }
.hf svg { width: 20px; height: 20px; flex: none; color: var(--cian); }
.hero-in > .hero-title { margin-bottom: auto; }
.hero-lead { margin: 20px 0 0; max-width: 52ch; color: var(--white); }
.hero .cta-row { margin-top: 32px; }
/* "Entrada gratuita · Cupos limitados" destacado (Edison, 16-sep-2026): dos datos con
   ícono cian. Sin contenedor: con borde parecían botones (pedido del mismo día). */
.hero-datos { display: flex; flex-wrap: wrap; gap: 10px 24px; margin: 24px 0 0; padding: 0; list-style: none; }
.hero-datos li { display: inline-flex; align-items: center; gap: 8px; color: var(--white); font: var(--fw-semibold) 15px/1.2 var(--font-sans); }
.hero-datos svg { width: 18px; height: 18px; color: var(--cian); flex: none; }

/* La entrada del banner (cascada + líneas del título desde su máscara) la hace el kit:
   [data-entrada] en .hero-in y [data-entrada-lineas] en el H1. */

/* ============================ FOTOS ============================ */
.photo { margin: 32px 0 0; }
.photo img { width: 100%; }
.editorial-media { position: relative; overflow: hidden; border-radius: var(--r-card); box-shadow: var(--e2); }
/* Mobile: fotos a sangre, a ras de pantalla (pedido de Edison) */
@media (max-width: 719px) {
  .editorial-media {
    margin-inline: calc(var(--gutter) * -1); width: calc(100% + var(--gutter) * 2);
    border-radius: 0; box-shadow: none;
  }
  /* Sin franja blanca entre la foto a sangre y la sección vecina (Edison, 16-sep).
     !important porque las reglas de aire entre secciones son más específicas. */
  .section.section--foto-abajo { padding-bottom: 0 !important; }
}


/* ============================ CONTENIDO ============================ */
/* Por qué participar — tres beneficios concretos en tarjeta con ícono (textos de Edison,
   17-sep-2026) y el cierre con barra Blue (patrón MCC) */
.why-list { display: grid; gap: 12px; margin: 28px 0 0; padding: 0; list-style: none; }
.why-item {
  display: flex; align-items: center; gap: 16px; padding: 16px 20px 16px 16px;
  background: var(--white); border: 1px solid var(--hairline); border-radius: var(--r-card);
  box-shadow: var(--card-top), var(--e1);
}
.why-item p { margin: 0; color: var(--text-primary); font-size: 16px; line-height: 24px; }
.why-ic { display: grid; place-items: center; flex: none; width: 48px; height: 48px; border-radius: 50%; background: rgba(15, 81, 87, .08); color: var(--blue); }
.why-ic svg { width: 22px; height: 22px; }
.note-accent {
  margin: 28px 0 0; padding-left: 16px; border-left: 3px solid var(--blue);
  color: var(--text-primary); font-size: 17px; line-height: 25px;
}

/* Sorteo: banda con la foto de la entrega de premios y el mismo tratamiento del banner
   (velo azul verdoso + grilla con cruces + grano). Velo al 82%: el texto chico queda
   arriba de 6:1 y el número cian arriba de 4,5:1 aun sobre las zonas claras de la foto. */
.sorteo {
  position: relative; isolation: isolate; overflow: hidden;
  background: var(--dblue); color: var(--white); padding-block: clamp(72px, 14vw, 120px);
}
.sorteo-media { position: absolute; inset: -15% 0; z-index: -2; overflow: hidden; will-change: transform; }
/* Foto anclada arriba: con 45% se cortaban las cabezas en escritorio (Edison, 16-sep).
   La capa es 30% más alta que la banda por el parallax (ver el script). */
.sorteo-media img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 0%; }
.sorteo::before {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background-color: rgba(12, 42, 45, .82);
  background-image: var(--grilla); background-size: var(--grilla-t) var(--grilla-t); background-position: center top;
}
.sorteo-in { position: relative; }
/* Sistema de textos del sorteo (Edison, 17-sep-2026): protagonista "Sorteo exclusivo para
   asistentes" en el registro del título del banner (fino, mayúsculas, escalonado); sin el
   15 gigante ni "¿En serio te lo vas a perder?". Las dos líneas se corren en sentidos
   opuestos con el scroll (script PARALLAX). */
.sorteo-titulo {
  margin: 0; color: var(--white); text-transform: uppercase;
  font: 200 clamp(34px, 9vw, 104px)/1 var(--font-sans); letter-spacing: -.02em;
}
/* .line y .line > span (máscara de cada línea) los define el kit para [data-anim="lineas"] */
.sorteo-titulo .line--der { padding-left: .9em; color: var(--cian); }
.sorteo-premio {
  margin: 28px 0 0; max-width: 30ch; color: var(--white); text-wrap: balance;
  font: var(--fw-light) clamp(21px, 5.4vw, 30px)/1.25 var(--font-sans); letter-spacing: -.01em;
}
.sorteo-premio strong { color: var(--cian); font-weight: var(--fw-semibold); }
.sorteo-nota { margin: 12px 0 0; color: var(--silver); font-size: 15px; line-height: 22px; }
.sorteo .cta-row { margin-top: 32px; }

/* ¿Qué vas a vivir? — cards blancas sobre gris: alcanza el Nivel 1 */
.card {
  background: var(--white); border: 1px solid var(--hairline); border-radius: var(--r-card);
  box-shadow: var(--card-top), var(--e1);
}
.agenda-list { list-style: none; margin: 28px 0 0; padding: 0; display: grid; gap: 16px; }
.agenda-card { padding: 24px; }
.num {
  margin: 0; color: var(--blue);
  font: var(--fw-light) 34px/1 var(--font-sans); letter-spacing: -.01em;
}
.agenda-title {
  margin: 18px 0 0; color: var(--text-brand);
  font: var(--fw-regular) 20px/1.2 var(--font-sans); letter-spacing: -.005em;
}
.agenda-card .text-body { margin: 8px 0 0; color: var(--text-secondary); font-size: 14px; line-height: 21px; }

/* Cuándo y dónde */
.when-where { display: grid; gap: 28px; }
.when-where .eyebrow { margin: 0; }
.when-value {
  margin: 8px 0 0; color: var(--text-brand);
  font: var(--fw-light) clamp(26px, 5.5vw, 32px)/1.15 var(--font-sans); letter-spacing: -.01em;
}
.when-address { margin: 8px 0 0; color: var(--text-secondary); }
.when-llegar {
  display: inline-flex; align-items: center; gap: 6px; margin-top: 14px;
  color: var(--text-accent); font: var(--fw-semibold) 14px/1.2 var(--font-sans); text-decoration: none;
}
.when-llegar svg { width: 16px; height: 16px; transition: transform var(--dur-std) var(--ease-sale); }
.when-llegar:hover { color: var(--dblue); text-decoration: underline; }
.when-llegar { padding-block: 13px; margin-block: 1px -13px; }   /* área táctil de 44 px sin mover el texto */
.when-llegar:hover svg { transform: translateY(3px); }
/* "Entrada gratuita · Cupos limitados" en Cuándo y dónde: grande y con ícono en
   círculo blanco (sobre gris alcanza el Nivel 1). Reemplaza a la frase larga. */
.datos-destacados { display: flex; flex-wrap: wrap; gap: 16px 32px; margin: 40px 0 0; padding: 0; list-style: none; }
.datos-destacados li {
  display: inline-flex; align-items: center; gap: 14px;
  color: var(--dblue); font: var(--fw-light) clamp(24px, 6.4vw, 30px)/1.1 var(--font-sans); letter-spacing: -.01em;
}
.dd-ic {
  display: grid; place-items: center; flex: none; width: 52px; height: 52px; border-radius: 50%;
  background: var(--white); color: var(--blue); box-shadow: var(--card-top), var(--e1);
}
.dd-ic svg { width: 24px; height: 24px; }
.when-form { margin-top: 32px; }
/* Título y datos clave de "Cuándo y dónde" (auditoría GEO, 17-sep-2026) */
.when-info > .h2 { margin-bottom: 16px; }
.when-intro { margin: 0 0 32px; max-width: 62ch; color: var(--text-secondary); }
.when-intro time { color: var(--text-primary); font-weight: var(--fw-semibold); }

/* ============================ FORMULARIO ============================
   Estructura igual a introduccion.proflight.com.ar (etiqueta que envuelve al
   campo, renglón de error por campo, prefijo +54 fijo); piel del sistema B:
   card a radio 20 y campos de línea con foco Blue. */
.form-card {
  position: relative; background: var(--white);
  border: 1px solid var(--hairline); border-radius: var(--r-card);
  box-shadow: var(--card-top), var(--e2);   /* blanco sobre blanco: hairline + Nivel 2 */
  padding: 24px;
}
.section--gris .form-card { box-shadow: var(--card-top), var(--e1); }   /* sobre gris: Nivel 1 */
.form-card .pc-k { margin: 0; color: var(--text-accent); }
.form-card .h3 {
  margin: 10px 0 0; color: var(--text-brand);
  font: var(--fw-semibold) var(--t-sub1)/1.1 var(--font-sans); letter-spacing: -.005em;
}
.form-card .f-intro { margin: 8px 0 0; color: var(--text-secondary); }

.f-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 20px 24px; margin-top: 24px; }
.f-wide { grid-column: 1 / -1; }
/* Un campo con [hidden] (la pregunta "¿Para quién es la formación?", 26-sep-2026) tiene que ocultarse
   aunque .f-field defina su propio display: sin esto, el display de la clase le gana al atributo. */
.f-field[hidden] { display: none; }
/* min-width:0 no es cosmético: en grid `1fr` es minmax(auto,1fr) y ese auto es el
   min-content del ítem; un <select> con opciones largas ensancha la columna y
   desborda la tarjeta (lo documentó la landing de Introducción). */
.f-field { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.f-field > span:first-child { font: var(--fw-regular) 12px/16px var(--font-sans); letter-spacing: .01em; color: var(--text-secondary); }   /* 12 y no 11 (auditoría 17-sep) */

.f-field input, .f-field select {
  width: 100%; min-height: var(--control-h); margin: 0; padding: 0;
  /* 16px y no 15: por debajo, Safari en iPhone hace zoom al tocar el campo.
     Nunca "arreglarlo" con maximum-scale=1 (bloquea el zoom de accesibilidad). */
  font: var(--fw-regular) 16px/1.3 var(--font-sans); color: var(--text-primary);
  background: transparent; border: 0; border-bottom: 1px solid var(--dgrey); border-radius: 0;
  transition: border-color var(--dur-micro) var(--ease), box-shadow var(--dur-micro) var(--ease);
}
.f-field input::placeholder { color: var(--dgrey); opacity: .85; }   /* .85 = 4.6:1 sobre blanco */
/* Completo */
.f-field input:valid, .f-field select:valid { border-bottom-color: var(--black); }
/* Foco: línea de 2px en Blue sin mover el layout */
.f-field input:focus, .f-field select:focus,
.f-field input:focus-visible, .f-field select:focus-visible {
  outline: none; border-bottom-color: var(--blue); box-shadow: inset 0 -1px 0 var(--blue);
}
/* Alerta */
.f-field input[aria-invalid="true"], .f-field select[aria-invalid="true"] { border-bottom-color: var(--alert); }

/* Picker: control nativo, con la flecha dibujada para que no dependa del navegador */
.f-field select {
  -webkit-appearance: none; appearance: none; padding-right: 28px; cursor: pointer;
  background: transparent url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%235C5B5C' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") no-repeat right 2px center / 16px 16px;
}
.f-field select:invalid { color: var(--dgrey); }
.f-field select option { color: var(--black); }

/* Desplegable propio de "¿Venís acompañado?" (Edison, 16-sep-2026). El campo cerrado
   es igual a los demás (línea, 16px); la lista abierta es un popover del sistema:
   blanco, radio 12, hairline y Nivel 3. El <select> oculto es el que se envía
   (script DESPLEGABLE, al final de la página). */
.desp { position: relative; }
.desp-btn {
  display: flex; align-items: center; gap: 10px; width: 100%; min-height: var(--control-h);
  margin: 0; padding: 0 2px 0 0; text-align: left; cursor: pointer;
  font: var(--fw-regular) 16px/1.3 var(--font-sans); color: var(--text-primary);
  background: transparent; border: 0; border-bottom: 1px solid var(--dgrey); border-radius: 0;
  -webkit-tap-highlight-color: transparent;
  transition: border-color var(--dur-micro) var(--ease), box-shadow var(--dur-micro) var(--ease);
}
.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; } }   /* a 320 px la ayuda se cortaba con "…" */
.desp:not(.is-lleno) .desp-valor { color: var(--dgrey); }
.desp.is-lleno .desp-btn { border-bottom-color: var(--black); }
.desp-btn:focus-visible,
.desp.is-abierto .desp-btn { outline: none; border-bottom-color: var(--blue); box-shadow: inset 0 -1px 0 var(--blue); }
.desp-btn[aria-invalid="true"] { border-bottom-color: var(--alert); }
.desp-flecha { width: 16px; height: 16px; flex: none; color: var(--dgrey); transition: transform var(--dur-std) var(--ease), color var(--dur-std) var(--ease); }
.desp.is-abierto .desp-flecha { transform: rotate(180deg); color: var(--blue); }

.desp-lista {
  position: absolute; left: 0; right: 0; top: calc(100% + 8px); z-index: 30;
  margin: 0; padding: 6px; list-style: none;
  background: var(--white); border: 1px solid var(--hairline); border-radius: var(--r-inner);
  box-shadow: var(--e3);
  opacity: 0; visibility: hidden; pointer-events: none; transform: translateY(-4px);
  transition: opacity var(--dur-std) var(--ease), transform var(--dur-std) var(--ease), visibility 0s linear var(--dur-std);
}
.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: 8px; cursor: pointer; color: var(--text-primary);
  font: var(--fw-regular) 16px/1.3 var(--font-sans);
  transition: background-color var(--dur-micro) var(--ease), color var(--dur-micro) var(--ease);
}
.desp-op + .desp-op { margin-top: 2px; }
.desp-ic {
  display: grid; place-items: center; width: 36px; height: 36px; flex: none;
  border-radius: var(--r-full); background: rgba(15, 81, 87, .08); color: var(--blue);
  font: var(--fw-semibold) 14px/1 var(--font-sans); letter-spacing: -.01em;
  transition: background-color var(--dur-micro) var(--ease), color var(--dur-micro) var(--ease);
}
.desp-ic svg { width: 18px; height: 18px; }
.desp-op-txt { flex: 1; min-width: 0; }
.desp-check { width: 18px; height: 18px; flex: none; color: var(--blue); opacity: 0; }
.desp-op.is-activa { background: rgba(15, 81, 87, .06); }
.desp-op[aria-selected="true"] { color: var(--blue); font-weight: var(--fw-semibold); }
.desp-op[aria-selected="true"] .desp-ic { background: var(--blue); color: var(--white); }
.desp-op[aria-selected="true"] .desp-check { opacity: 1; }
@media (prefers-reduced-motion: reduce) {
  .desp-lista, .desp-flecha { transition: none; }
}

/* Teléfono: el prefijo va pegado a la misma línea y no se edita */
.f-tel { display: flex; align-items: stretch; }
.f-tel-cc {
  display: inline-flex; align-items: center; padding-right: 10px;
  font: var(--fw-regular) 16px/1 var(--font-sans); color: var(--text-secondary);
  border-bottom: 1px solid var(--dgrey);
  transition: border-color var(--dur-micro) var(--ease), box-shadow var(--dur-micro) var(--ease);
}
.f-tel input { flex: 1; min-width: 0; }
.f-tel:has(input:valid) .f-tel-cc { border-bottom-color: var(--black); }
.f-tel:focus-within .f-tel-cc { border-bottom-color: var(--blue); box-shadow: inset 0 -1px 0 var(--blue); }
/* Código de país cambiable (26-sep-2026, como la landing del Tour): el <select> va invisible ENCIMA
   del código y es el que recibe el toque, así en el teléfono se abre el selector nativo (con buscador)
   y no hace falta una lista propia de 245 países. Lo que se ve es el código y una flecha. */
.f-tel-cc { position: relative; gap: 4px; cursor: pointer; }
.f-tel-flecha { flex: none; color: var(--text-secondary); transition: color var(--dur-micro) var(--ease); }
.f-tel-cc:hover .f-tel-flecha, .f-tel-cc:focus-within .f-tel-flecha { color: var(--blue); }
.f-field .f-tel-cc select {
  position: absolute; inset: 0; width: 100%; height: 100%; min-height: 0;
  padding: 0; margin: 0; border: 0; background: transparent; opacity: 0; cursor: pointer;
  font-size: 16px;   /* 16 px o Safari hace zoom al tocarlo, aunque no se vea */
}
.f-tel-cc:focus-within { color: var(--blue); }

/* Ayuda fija bajo el WhatsApp: el error más común era cargar el 0 o el 15 */
.f-ayuda { margin-top: 5px; color: var(--text-secondary); font: var(--fw-regular) 12px/16px var(--font-sans); }
.f-ayuda[hidden] { display: none; }
/* Campo obligatorio sin completar o mal cargado (Edison, 17-sep-2026: "hay que señalarle
   visualmente qué campo le falta llenar"): etiqueta, línea y mensaje con ícono en rojo,
   y una sacudida corta al intentar enviar. */
.f-msg { display: flex; align-items: flex-start; gap: 6px; margin-top: 6px; color: var(--alert); font: var(--fw-medium) 12.5px/17px var(--font-sans); }
.f-msg::before {
  content: ""; flex: none; width: 15px; height: 15px; margin-top: 1px; 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.5h.01'/%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.5h.01'/%3E%3C/svg%3E") center / contain no-repeat;
}
.f-msg[hidden] { display: none; }
.f-field.is-error > span:first-child { color: var(--alert); font-weight: var(--fw-semibold); }
.f-field.is-error input,
.f-field.is-error input:focus,
.f-field.is-error .f-tel-cc,
.f-field.is-error .desp-btn { border-bottom-color: var(--alert); box-shadow: inset 0 -1px 0 var(--alert); }
.f-field.sacude { animation: od-sacude .42s var(--ease); }
@keyframes od-sacude { 20% { transform: translateX(-6px); } 40% { transform: translateX(5px); } 60% { transform: translateX(-3px); } 80% { transform: translateX(2px); } }

.reg-submit { width: 100%; min-height: 48px; margin-top: 28px; font-size: 15px; }
.form-legal { margin: 14px 0 0; font-size: var(--t-small); line-height: 18px; color: var(--text-secondary); }
.form-legal a { color: var(--text-accent); text-decoration: underline; }
.form-note { margin: 14px 0 0; font-size: 13px; line-height: 19px; color: var(--text-primary); }
.form-note:not(:empty) { padding: 12px 16px; background: var(--grey); border-radius: var(--r-inner); }   /* interno a 12 */
.form-note a { color: var(--text-accent); text-decoration: underline; }
.form-note.is-error { background: rgba(180, 35, 24, .07); color: var(--alert); font-weight: var(--fw-medium); }

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

/* ============================ CIERRE ============================
   Gradiente de marca (sección institucional). Mobile: foto a sangre y el título
   debajo, sin tapar caras. Escritorio: título a la izquierda y la foto en card
   a la derecha (antes la foto vertical quedaba a 786px pegada a la izquierda y
   el resto de la franja en blanco). */
.closing { position: relative; background-color: var(--dblue); background-image: var(--grilla); background-size: var(--grilla-t) var(--grilla-t); background-position: center top; }
.closing-photo { margin: 0; position: relative; }
.closing-media { position: relative; overflow: hidden; }
.closing-media img { width: 100%; }
.closing-caption {
  padding: 32px var(--gutter) 48px;
  display: flex; flex-direction: column; gap: 16px; color: var(--white);
}
.closing-title { font: var(--fw-light) var(--t-h1)/1.04 var(--font-sans); letter-spacing: -.01em; color: var(--white); }
.closing-date { color: var(--silver); }
.closing-title em { color: var(--cian); }
.closing-caption .cta-row { margin-top: 4px; }
.closing-brand { display: flex; align-items: center; gap: 12px; }
.closing-brand .pf-logo { --pf-h: 48px; }
.closing-brand .od-logo { height: 26px; }
.closing-brand .brand-div { height: 24px; }
.br-celu { display: none; }
.closing-title .nw { white-space: nowrap; }   /* en escritorio corta "Open Day / de ProFlight.": nunca "ProFlight." sola */
/* Cierre en celular (Edison, 17-sep-2026): "Nos vemos en el / Open Day de ProFlight." y la fecha
   arriba del horario. El segundo renglón no se parte: el tamaño acompaña el ancho (a 320 px
   entra justo). Logos apenas más chicos. */
@media (max-width: 719px) {
  .br-celu { display: inline; }
  .closing-title { font-size: clamp(24px, 7.3vw, 34px); }
  .closing-title em { white-space: nowrap; }
  .closing-date .cd-dia, .closing-date .cd-hora { display: block; }
  .closing-date .cd-sep { display: none; }
  .closing-brand .pf-logo { --pf-h: 40px; }
  .closing-brand .od-logo { height: 22px; }
  .closing-brand .brand-div { height: 20px; }
}

/* ============================ GALERÍA DEL EVENTO ============================
   Carrusel de alto fijo: cada tarjeta toma el ancho de su foto (2:3 vertical,
   3:2 horizontal, 9:16 los videos) para no recortar a nadie en escritorio. En
   mobile las horizontales se limitan al ancho de pantalla y se recortan al centro.
   Scroll nativo con snap "proximity" (con "mandatory" el swipe se sentía trabado:
   ver la guía §12.8, igual que la razón para NO usar touch-action). */
.gallery-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; }
.gallery-arrows { display: none; gap: 10px; flex: none; }
.g-arrow {
  display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px;
  border: 1px solid rgba(15, 81, 87, .32); border-radius: var(--r-full); background: transparent; color: var(--blue);
  cursor: pointer; transition: background-color var(--dur-micro) var(--ease), opacity var(--dur-micro) var(--ease);
}
.g-arrow svg { width: 20px; height: 20px; }
.g-arrow:hover { background: rgba(15, 81, 87, .08); }
.g-arrow:active { background: rgba(15, 81, 87, .16); }
.g-arrow[disabled] { opacity: .35; cursor: default; background: transparent; }

.gallery-track {
  --wrap-max: 720px;
  --row-h: 440px;
  /* El primer y último margen coinciden con el del texto; las tarjetas del medio
     llegan hasta el borde de la pantalla */
  --pad: max(var(--gutter), calc((100% - var(--wrap-max)) / 2 + var(--gutter)));
  display: flex; gap: 12px; margin: 28px 0 0; padding: 0 var(--pad); list-style: none;
  overflow-x: auto; overscroll-behavior-x: contain;
  scroll-snap-type: x proximity; scroll-padding-inline: var(--pad);
  scrollbar-width: none;
}
.gallery-track::-webkit-scrollbar { display: none; }
.gallery-track:focus-visible { box-shadow: none; outline: 2px solid var(--blue); outline-offset: 4px; }

.g-card {
  position: relative; flex: none; height: var(--row-h); aspect-ratio: 2 / 3; overflow: hidden;
  border-radius: var(--r-card); background: var(--grey); scroll-snap-align: start;
}
.g-card--h { aspect-ratio: 3 / 2; max-width: calc(100vw - 2 * var(--gutter) - 24px); }
.g-card--video { aspect-ratio: 9 / 16; background: var(--dblue); }
.g-card img, .g-card video { display: block; width: 100%; height: 100%; object-fit: cover; }
.g-card--foco-izq img { object-position: 30% 50%; }   /* el orador está a la izquierda */
.g-card video { background: #000; }

.g-video { position: relative; display: block; width: 100%; height: 100%; color: var(--white); text-decoration: none; }
/* Botón de reproducir: pill abajo a la izquierda, así no tapa la portada (en la
   del resumen, un círculo al centro caía justo sobre el logo del edificio) */
.g-cta {
  position: absolute; left: 14px; bottom: 14px; z-index: 1;
  display: inline-flex; align-items: center; gap: 8px; min-height: 40px; padding: 0 16px 0 12px;
  border-radius: var(--r-full); background: var(--white); color: var(--dblue); box-shadow: var(--e2);
  font: var(--fw-semibold) 13px/1 var(--font-sans); white-space: nowrap;
  transition: background-color var(--dur-micro) var(--ease);
}
.g-cta svg { width: 16px; height: 16px; color: var(--blue); }
.g-video:hover .g-cta { background: var(--grey); }
.g-video:active .g-cta { background: var(--silver); }
.g-video:focus-visible { box-shadow: inset 0 0 0 3px var(--white); border-radius: var(--r-card); }

/* Indicador de posición: con 24 tarjetas los puntos no entran; una barra sí */
.gallery-progress { position: relative; height: 3px; margin-top: 20px; overflow: hidden; border-radius: var(--r-full); background: var(--silver); }
.gallery-progress span { position: absolute; top: 0; bottom: 0; left: 0; width: 20%; border-radius: inherit; background: var(--blue); }

@media (min-width: 768px) {
  .gallery-track { --row-h: 480px; gap: 16px; }
  .g-card--h { max-width: none; }
}
@media (min-width: 900px) {
  .gallery-track { --wrap-max: 1160px; --row-h: 520px; margin-top: 40px; }
}
/* Flechas donde hay mouse, en cualquier ancho (auditoría 17-sep: con la ventana
   angosta desaparecían y con mouse no hay swipe). En pantallas táctiles, swipe. */
@media (hover: hover) and (pointer: fine) { .gallery-arrows { display: flex; } }
.sin-desborde .gallery-arrows, .sin-desborde .gallery-progress { display: none; }

/* ============================ RESEÑAS ============================
   Mismo carrusel que la galería. Tarjetas blancas sobre gris: alcanza el Nivel 1.
   Estrellas en el amarillo de Google (#FBBC04), como en MCC. */
.resenas-track { align-items: stretch; }
.r-card {
  flex: none; width: min(340px, calc(100vw - 2 * var(--gutter) - 40px)); scroll-snap-align: start;
  display: flex; flex-direction: column; padding: 24px;
  background: var(--white); border: 1px solid var(--hairline); border-radius: var(--r-card);
  box-shadow: var(--card-top), var(--e1);
}
.r-stars { display: flex; gap: 2px; margin: 0; color: #FBBC04; line-height: 0; }
.r-stars svg { width: 16px; height: 16px; }
.r-texto { flex: 1; margin: 14px 0 0; }
.r-texto p { margin: 0; color: var(--text-primary); font-size: 15px; line-height: 23px; }
.r-autor { display: flex; align-items: center; gap: 12px; margin: 20px 0 0; padding-top: 16px; border-top: 1px solid var(--grey); }
.r-autor b { display: block; color: var(--dblue); font-size: 14px; line-height: 18px; }
.r-ini {
  display: grid; place-items: center; flex: none; width: 36px; height: 36px; border-radius: 50%;
  background: var(--grey); color: var(--blue); font: var(--fw-semibold) 14px/1 var(--font-sans);
}
.r-meta { display: block; color: var(--text-secondary); font-size: 12px; line-height: 16px; }
.r-fuente { margin: 16px 0 0; }
.r-fuente a { color: var(--text-accent); text-decoration: underline; }
@media (min-width: 900px) { .r-card { width: 360px; padding: 28px; } }

/* ============================ FOOTER ============================ */
.footer { padding-block: 32px; background: var(--dblue); color: var(--silver); }
.footer-in { display: flex; flex-wrap: wrap; gap: 16px 32px; align-items: center; justify-content: space-between; }
.footer-in p { margin: 0; }
.footer-in p a { color: var(--white); text-decoration: underline; }
.footer-in p a:hover { color: var(--cian); }
.footer-links { display: flex; flex-wrap: wrap; gap: 12px 24px; }
.footer-links a { color: var(--silver); font-size: 13px; text-decoration: none; }
.footer-links a:hover { color: var(--white); text-decoration: underline; }
.footer :focus-visible { box-shadow: var(--focus-ring-dark); }

/* ============================ GRACIAS ============================
   Mismo esquema que introduccion.proflight.com.ar/gracias (pedido de Edison,
   16-sep-2026): encabezado Deep Blue con la barra "casi completa" y la píldora
   "Falta un paso". Desde el 17-sep el paso obligatorio (el grupo de WhatsApp) va
   dentro del encabezado, a la vista sin bajar. Piel del sistema B. */
.gracias-top { background-color: var(--dblue); background-image: var(--grilla); background-size: var(--grilla-t) var(--grilla-t); background-position: center top; color: var(--white); text-align: center; padding-bottom: clamp(40px, 6vw, 64px); }
.gracias-nav { display: flex; align-items: center; min-height: 72px; text-align: left; }
.gracias-brand { display: flex; align-items: center; gap: 14px; text-decoration: none; }
.gracias-nav .pf-logo { --pf-h: 56px; }
.gracias-nav .od-logo { height: 30px; }
.gracias-nav .brand-div { height: 28px; }
.gracias-head { padding-top: clamp(24px, 5vw, 56px); }
/* H1 en Inter 800, como el del hero de la landing y el de MCC */
.gracias-title {
  margin: 14px 0 0; color: var(--white); text-wrap: balance;
  font: var(--fw-heavy) var(--t-h1)/1.06 var(--font-sans); letter-spacing: -.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í que en cada cuadro la parte del número que ya tapó el azul se
   ve blanca y la que sigue sobre blanco se ve azul: nunca queda azul sobre azul
   ni blanco sobre blanco (pedido de Edison: en Introducción el número blanco
   no se ve mientras la barra se llena).
   El porcentaje vive en CUATRO lugares: --pct acá y, en gracias.html,
   aria-valuenow, aria-valuetext y el texto del número. El número que cuenta lo arma el script con --pct. */
.gracias-progress { max-width: 560px; margin: 28px auto 0; }
.pbar {
  --pct: 89;
  position: relative; height: 40px; overflow: hidden;
  border-radius: var(--r-inner); background: var(--white);
}
.pbar-fill {
  position: absolute; inset: 0;
  background: var(--blue);
  clip-path: inset(0 calc(100% - var(--pct) * 1%) 0 0);
  /* Sólo se define el `from`: el estado final es el de arriba, así la barra
     queda completa aunque la animación no corra. */
  animation: pbar-fill 1.5s var(--ease) .3s both;
}
@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: var(--fw-semibold) 13px/1 var(--font-sans); font-variant-numeric: tabular-nums;
  letter-spacing: .01em; white-space: nowrap; color: var(--blue);
}
.pbar-fill .pbar-num { color: var(--white); }

/* Aviso "falta un paso": píldora blanca con punto ámbar que late */
.gracias-alert {
  display: inline-flex; align-items: center; gap: 10px; margin: 16px 0 0;
  padding: 10px 18px; border-radius: var(--r-full);
  background: var(--white); color: var(--dblue);
  font: var(--fw-semibold) clamp(15px, 1.6vw, 17px)/1.25 var(--font-sans); letter-spacing: -.005em;
}
.gracias-alert-dot { flex: none; width: 10px; height: 10px; border-radius: 50%; background: var(--warn); --late-rgb: 181, 71, 8; }   /* late: [data-late] del kit */
/* ---- La acción, dentro del encabezado (rediseño del 17-sep-2026) --------------------
   Antes el botón vivía en una tarjeta debajo del encabezado y quedaba fuera de la
   primera pantalla. Ahora va inmediatamente después de la barra: se ve sin bajar en
   celulares chicos y en notebooks de 768 px de alto. */
.gracias-fecha { justify-content: center; margin-bottom: 4px; }
.gracias-accion { max-width: 560px; margin: 28px auto 0; }
.gracias-paso {
  margin: 0; color: var(--cian);
  font: var(--fw-semibold) 12px/16px var(--font-sans); letter-spacing: .14em; text-transform: uppercase;
}
.gracias-accion .wa-btn { margin-top: 12px; }
.gracias-por { max-width: 40ch; margin: 14px auto 0; color: var(--silver); font-size: 15px; line-height: 22px; text-wrap: balance; }

/* ---- Para el día del evento: datos útiles en tarjetas blancas sobre blanco ------------ */
.gracias-info { padding-block: clamp(36px, 5vw, 56px) clamp(48px, 7vw, 72px); }
.gracias-info-titulo {
  max-width: 560px; margin: 0 auto; color: var(--text-brand); text-align: left;
  font: var(--fw-light) clamp(24px, 3vw, 30px)/1.15 var(--font-sans); letter-spacing: -.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(--white); border: 1px solid var(--hairline); border-radius: var(--r-card);
  box-shadow: var(--card-top), var(--e2);
}
.gd-ic { display: grid; place-items: center; flex: none; width: 44px; height: 44px; border-radius: 50%; background: rgba(15, 81, 87, .08); color: var(--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(--text-secondary); font-size: 14px; line-height: 21px; }
.gd-txt b { color: var(--dblue); font-size: 16px; line-height: 22px; }
/* "Ver cómo llegar y dónde estacionar": desplegable dentro de la tarjeta (Edison, 17-sep-2026).
   La tarjeta pasa a grilla para que los mapas usen todo el ancho y el link quede alineado
   con el texto. */
.gracias-datos li.gd-item--mapas { display: grid; grid-template-columns: 44px minmax(0, 1fr); column-gap: 14px; align-items: start; }
.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(--text-accent); font: var(--fw-semibold) 14px/21px var(--font-sans); text-decoration: underline;
  cursor: pointer; list-style: none; -webkit-tap-highlight-color: transparent;
}
.gd-mapas summary::-webkit-details-marker { display: none; }
.gd-mapas summary:hover { color: var(--dblue); }
.gd-mapas summary:focus-visible { border-radius: 6px; }
.gd-chevron { flex: none; width: 16px; height: 16px; transition: transform var(--dur-std) var(--ease-sale); }
.gd-mapas[open] .gd-chevron { transform: rotate(180deg); }
.gd-mapas-cuerpo { display: grid; gap: 14px; margin-top: 22px; }
.gd-mapas-txt { margin: 0; color: var(--text-secondary); font-size: 14px; line-height: 21px; }
.gd-mapa { margin: 0; }
.gd-mapa .mapa-svg { border-radius: var(--r-inner); box-shadow: none; }
.gd-mapas-links { display: flex; flex-wrap: wrap; gap: 4px 24px; }
.gd-maps-link { display: inline-flex; align-items: center; gap: 6px; justify-self: start; padding-block: 11px; margin-block: -8px; color: var(--text-accent); font-size: 13px; line-height: 18px; text-decoration: underline; }
.gd-maps-link svg { width: 14px; height: 14px; }
.gd-gmaps { position: relative; overflow: hidden; aspect-ratio: 4 / 3; border-radius: var(--r-inner); background: var(--grey); }
.gd-gmaps iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.gd-link { align-self: flex-start; margin-block: -5px -11px; padding-block: 11px; color: var(--text-accent); font-weight: var(--fw-semibold); text-decoration: underline; }   /* área táctil de 44 px */

/* ---- Botón fijo en celular (aparece al bajar, cuando el de arriba ya no se ve) ------ */
.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: var(--white); border-top: 1px solid var(--hairline); box-shadow: 0 -8px 24px rgba(12, 42, 45, .10);
  transform: translateY(110%); visibility: hidden;
  transition: transform var(--dur-enter) var(--ease-sale), visibility 0s linear var(--dur-enter);
}
.wa-fija.is-visible { transform: none; visibility: visible; transition-delay: 0s; }
.wa-fija .wa-btn { min-height: 54px; }
/* También en escritorio desde el 17-sep-2026: con los mapas de "Cómo llegar" abiertos la página
   se alarga y el botón de arriba queda fuera de pantalla. Mismo ancho que el principal. */
.wa-fija .wa-btn { max-width: 560px; margin-inline: auto; }
.gracias .footer { padding-bottom: calc(32px + 76px + env(safe-area-inset-bottom, 0px)); }

/* 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. */
.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(--r-full);
  background: #25D366; color: #06311A; text-decoration: none;
  font: var(--fw-semibold) 16px/1.3 var(--font-sans);
  transition: background-color var(--dur-micro) var(--ease), box-shadow var(--dur-micro) var(--ease);
}
.wa-btn:hover { background: #22C25E; color: #06311A; }    /* state layer +8% */
.wa-btn:active { background: #1FB156; color: #06311A; }   /* state layer +16% */
a.wa-btn:focus-visible { border-radius: var(--r-full); box-shadow: 0 0 0 3px var(--white), 0 0 0 5px var(--blue); }
.on-dark a.wa-btn:focus-visible { box-shadow: 0 0 0 3px var(--dblue), 0 0 0 5px var(--cian); }
/* El principal, en el encabezado oscuro: más alto y con un halo verde que late suave
   ([data-halo] del kit, en ::after; --halo-rgb es el color del halo) */
.wa-btn--principal { min-height: 64px; font-size: 17px; --halo-rgb: 37, 211, 102; box-shadow: 0 10px 30px rgba(37, 211, 102, .25); }
.wa-ic { flex: 0 0 40px; display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; background: var(--white); }
.wa-txt { flex: 1; min-width: 0; text-align: center; }
.wa-arr { flex: none; }

/* ============================ CÓMO LLEGAR ============================
   Edison, 17-sep-2026: estacionamiento gratuito con el mapa (réplica del de Cielos
   Abiertos con la piel del Open Day, generado por script) y el mapa de Google como en
   argentina.proflight.com.ar. */
.llegar-grid { display: grid; gap: 32px; }
.llegar-txt .cta-row { margin-top: 24px; }
/* Botones de mapas. Escritorio: los dos en la columna del texto. Celular y tablet (Edison,
   17-sep-2026): el texto queda limpio arriba del mapa, "Descargar mapa" debajo del mapa de
   estacionamiento y "Abrir en Google Maps" debajo del mapa de Google. */
.llegar-descarga { margin-top: -12px; }
.llegar-gmaps-cta { margin-top: 20px; }
@media (max-width: 899px) { .solo-escritorio { display: none !important; } }
@media (min-width: 900px) { .solo-celu { display: none !important; } }
.llegar-mapa { margin: 0; }
.mapa-svg { display: block; width: 100%; height: auto; border-radius: var(--r-card); box-shadow: var(--e3); background: var(--dblue); }
.llegar-gmaps {
  position: relative; margin-top: 32px; overflow: hidden; aspect-ratio: 4 / 3;
  border-radius: var(--r-card); background: var(--grey); box-shadow: var(--card-top), var(--e2);
}
.llegar-gmaps iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
@media (max-width: 719px) {
  /* A sangre, como las fotos: el mapa necesita todo el ancho para que se lean las calles */
  .llegar-mapa { margin-inline: calc(var(--gutter) * -1); }
  .mapa-svg { border-radius: 0; box-shadow: none; }
}
@media (min-width: 900px) {
  .llegar-grid { grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); gap: 72px; align-items: center; }
  /* Edison, 17-sep-2026: en pantallas bajas el mapa (cuadrado) no entraba entero debajo de la
     barra fija. Tope de alto = pantalla − barra fija (66) − aire (48). En pantallas altas no
     cambia nada; nunca baja de 420 px. */
  .llegar-mapa { width: 100%; max-width: max(420px, calc(100vh - 114px)); justify-self: end; }
  @supports (height: 100svh) { .llegar-mapa { max-width: max(420px, calc(100svh - 114px)); } }
  .llegar-gmaps { margin-top: 56px; aspect-ratio: 21 / 8; }
}
/* Dibujo del mapa: lo hace el kit ([data-mapa]: .mp-trazo se dibuja, .mp-tarde aparece a
   1 s + --mp-retardo). Acá sólo el orden propio de este mapa: primero las calles y las zonas
   (0,2 s), después lo prohibido (.mp-no) y lo permitido (.mp-si), al final los nombres.
   El pin rebota. */
[data-mapa] .mp-no { --mp-retardo: .45s; }
[data-mapa] .mp-si { --mp-retardo: .9s; }
[data-mapa] .mp-zona { --mp-retardo: -.8s; }
@media (prefers-reduced-motion: no-preference) {
  .mp-pin { animation: od-pin 2.4s var(--ease) infinite; }
  .mp-pin-onda { transform-box: fill-box; transform-origin: center; animation: od-onda 2.4s var(--ease) infinite; }
}
@keyframes od-pin  { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-14px); } }
@keyframes od-onda { 0%, 100% { transform: scale(1); opacity: 1; } 50% { transform: scale(.7); opacity: .5; } }

/* ============================ PREGUNTAS FRECUENTES ============================
   <details> nativo: se abre sin JS y lo indexan buscadores y asistentes de IA. Las
   respuestas también van en el JSON-LD del <head>. */
.faq-lista { margin-top: 28px; border-top: 1px solid var(--silver); }
.faq-item { border-bottom: 1px solid var(--silver); }
.faq-item summary { display: flex; align-items: center; gap: 16px; padding: 20px 0; cursor: pointer; list-style: none; -webkit-tap-highlight-color: transparent; }
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary:focus-visible { border-radius: 8px; }
.faq-q { flex: 1; margin: 0; color: var(--text-brand); font: var(--fw-medium) 17px/1.35 var(--font-sans); letter-spacing: -.005em; transition: color var(--dur-micro) var(--ease); }
.faq-item summary:hover .faq-q { color: var(--blue); }
.faq-ic {
  position: relative; flex: none; width: 34px; height: 34px; border-radius: 50%;
  background: var(--white); box-shadow: var(--card-top), var(--e1);
  transition: background-color var(--dur-std) var(--ease), transform var(--dur-enter) var(--ease-sale);
}
.faq-ic::before, .faq-ic::after {
  content: ""; position: absolute; left: 50%; top: 50%; width: 12px; height: 2px; margin: -1px 0 0 -6px;
  border-radius: 2px; background: var(--blue); transition: transform var(--dur-enter) var(--ease-sale), background-color var(--dur-std) var(--ease);
}
.faq-ic::after { transform: rotate(90deg); }
.faq-item[open] .faq-ic { background: var(--blue); transform: rotate(180deg); }
.faq-item[open] .faq-ic::before, .faq-item[open] .faq-ic::after { background: var(--white); }
.faq-item[open] .faq-ic::after { transform: rotate(0deg); }
.faq-a { padding: 0 50px 22px 0; }
.faq-a p { margin: 0; color: var(--text-secondary); font-size: 15px; line-height: 24px; }
.faq-a a { color: var(--text-accent); text-decoration: underline; }
@media (min-width: 900px) { .faq-lista { margin-top: 40px; } .faq-q { font-size: 19px; } }

/* ============================ CTA FIJA ============================
   Edison, 17-sep-2026. Celular: barra blanca abajo con el botón primario. Escritorio:
   barra verde petróleo arriba con logos, fecha y botón blanco. La muestra y la esconde
   el script CTA FIJA (fuera del banner y sin formulario a la vista). */
.cta-fija {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 50;
  padding: 12px 0 calc(12px + env(safe-area-inset-bottom, 0px));
  background: var(--white); border-top: 1px solid var(--hairline); box-shadow: 0 -8px 24px rgba(12, 42, 45, .10);
  transform: translateY(110%); visibility: hidden;
  transition: transform var(--dur-enter) var(--ease-sale), visibility 0s linear var(--dur-enter);
}
.cta-fija.is-visible { transform: none; visibility: visible; transition-delay: 0s; }
.cta-fija-in { display: flex; align-items: center; gap: 16px; }
.cta-fija-marca, .cta-fija-fecha { display: none; }
.cta-fija-btn { flex: 1; min-height: 50px; font-size: 16px; }
@media (max-width: 899px) {
  .cta-fija .btn-onblue { background: var(--blue); color: var(--white); }
  .cta-fija .btn-onblue:hover { background: #0B4247; color: var(--white); }
  .cta-fija .btn-onblue:active { background: var(--dblue); color: var(--white); }
  /* Que la barra no tape el final de la página */
  .footer { padding-bottom: calc(32px + 76px + env(safe-area-inset-bottom, 0px)); }
}
@media (min-width: 900px) {
  .cta-fija {
    top: 0; bottom: auto; padding: calc(10px + env(safe-area-inset-top, 0px)) 0 10px; color: var(--white);
    background-color: var(--dblue); background-image: var(--grilla); background-size: var(--grilla-t) var(--grilla-t);
    border-top: 0; box-shadow: 0 10px 28px rgba(12, 42, 45, .24);
    transform: translateY(-110%);
  }
  .cta-fija-marca { display: flex; align-items: center; gap: 12px; margin-right: auto; }
  .cta-fija-marca .pf-logo { --pf-h: 44px; }
  .cta-fija-marca .od-logo { height: 22px; }
  .cta-fija-marca .brand-div { height: 22px; }
  .cta-fija-fecha { display: inline-flex; align-items: center; gap: 9px; font: var(--fw-semibold) 15px/1 var(--font-sans); letter-spacing: .02em; white-space: nowrap; }
  .cta-fija-fecha svg { width: 18px; height: 18px; color: var(--cian); }
  .cta-fija-btn { flex: none; min-height: 46px; padding-inline: 28px; font-size: 15px; }
  [id] { scroll-margin-top: 96px; }   /* los saltos a un formulario no quedan debajo de la barra */
}

/* ============================ FECHA FIJA (celular y tablet) ============================
   Edison, 17-sep-2026: la fecha y el horario quedan fijos arriba en celular. Misma piel que
   la barra de escritorio (verde petróleo con grilla); convive con el botón fijo de abajo.
   La muestra el script FECHA FIJA cuando la fecha del banner sale de pantalla. */
.fecha-fija { display: none; }
@media (max-width: 899px) {
  .fecha-fija {
    position: fixed; top: 0; left: 0; right: 0; z-index: 50;
    display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 4px 22px;
    padding: calc(11px + env(safe-area-inset-top, 0px)) var(--gutter) 11px;
    color: var(--white); font: var(--fw-semibold) 14px/1.2 var(--font-sans); letter-spacing: .02em;
    background-color: var(--dblue); background-image: var(--grilla); background-size: var(--grilla-t) var(--grilla-t);
    box-shadow: 0 8px 22px rgba(12, 42, 45, .22);
    transform: translateY(-110%); visibility: hidden;
    transition: transform var(--dur-enter) var(--ease-sale), visibility 0s linear var(--dur-enter);
  }
  .fecha-fija.is-visible { transform: none; visibility: visible; transition-delay: 0s; }
  .fecha-fija .hf { gap: 7px; }
  .fecha-fija .hf svg { width: 17px; height: 17px; }
  /* En los celulares más angostos (320–374 px) los dos datos entraban en dos renglones */
  @media (max-width: 374px) {
    .fecha-fija { gap: 4px 14px; padding-inline: 12px; font-size: 13px; letter-spacing: 0; }
    .fecha-fija .hf { gap: 5px; }
    .fecha-fija .hf svg { width: 15px; height: 15px; }
  }
  /* Los saltos a un formulario o sección no quedan debajo de la barra */
  [id] { scroll-margin-top: 64px; }
}
@media (prefers-reduced-motion: reduce) {
  .fecha-fija, .cta-fija, .wa-fija { transition: none; }
}

/* ============================ LEGALES ============================ */
.legal-head { background-color: var(--dblue); background-image: var(--grilla); background-size: var(--grilla-t) var(--grilla-t); background-position: center top; padding-block: clamp(32px, 6vw, 56px) clamp(28px, 5vw, 48px); }
.legal-head .eyebrow { color: var(--silver); }
.legal-brand { text-decoration: none; }
.legal-brand:hover { text-decoration: none; }
.legal-title {
  margin: 0 0 12px; color: var(--white); text-wrap: balance;
  font: var(--fw-light) var(--t-h1)/1.04 var(--font-sans); letter-spacing: -.01em;
}
.legal-meta { margin: 0; color: var(--silver); }
.legal-body { font-size: var(--t-body); line-height: 24px; }
.legal-body h2 { margin: 40px 0 12px; color: var(--text-brand); font: var(--fw-semibold) var(--t-sub2)/24px var(--font-sans); }
.legal-body h2:first-of-type { margin-top: 0; }
.legal-body p { margin: 0 0 16px; }
.legal-body ol, .legal-body ul { margin: 0 0 16px; padding-left: 1.3em; }
.legal-body li { margin-bottom: 12px; }
.legal-body a { color: var(--text-accent); text-decoration: underline; }
.legal-back { margin-top: 64px; padding-top: 24px; border-top: 1px solid var(--silver); }
/* Marcas de borrador — visibles a propósito, para que no se publique sin completar */
.draft-banner {
  margin-bottom: 40px; padding: 16px 20px; border-radius: var(--r-inner);
  background: var(--white); border: 1px solid var(--hairline); border-left: 3px solid var(--warn);
  color: var(--text-primary);   /* fondo blanco: sobre gris la marca [A CONFIRMAR] bajaba de 4.5:1 */
}
.draft-banner p { margin: 0; font-size: 13px; line-height: 19px; }
.tbd {
  padding: 1px 8px; border-radius: var(--r-full); background: rgba(181, 71, 8, .10); color: var(--warn); font-weight: var(--fw-semibold);
  -webkit-box-decoration-break: clone; box-decoration-break: clone;   /* si se parte en dos renglones, cada mitad lleva su pastilla */
}

/* ============================ ANIMACIONES ============================
   El revelado, los títulos por palabras, el telón de las fotos, el parallax, los íconos que
   caen, el dibujo del mapa y las micro-animaciones son el kit compartido (animaciones.css +
   animaciones.js). Acá sólo lo propio de esta landing: el radio de cada marco de foto y lo
   que se apaga con prefers-reduced-motion además de lo que apaga el kit. */
.editorial-media { --r-foto: var(--r-card); }
.closing-media { --r-foto: 0px; }
@media (max-width: 719px) { .editorial-media { --r-foto: 0px; } }
@media (min-width: 900px) { .closing-media { --r-foto: var(--r-card); } }

@media (prefers-reduced-motion: reduce) {
  .f-field.sacude, .grain::after, .pbar-fill { animation: none; }
}

/* ============================ BREAKPOINTS ============================ */
@media (min-width: 720px) {
  .when-where { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 560px) {
  /* Título más grande en celular para ocupar el ancho: "PROFLIGHT" con su sangría
     entra a 360 px (298 de 320 útiles) y a 390 px (318 de 350) */
  .hero-title { font-size: clamp(34px, 10.2vw, 44px); line-height: 1.04; }
  /* El título nuevo ocupa 4 renglones en celular: sin sangría se lee mejor y a 360 px
     la segunda frase no se parte en tres */
  .hero-title .line--der { padding-left: 0; }
  .cta-row { flex-direction: column; align-items: stretch; }
  .cta-row .btn { width: 100%; min-height: 48px; font-size: 15px; }
  .gracias-nav { min-height: 64px; }
  .gracias-nav .pf-logo { --pf-h: 48px; }
  .gracias-nav .od-logo { height: 26px; }
  .brand-row .pf-logo { --pf-h: 48px; }
  .brand-row .od-logo { height: 26px; }
  .brand-row .brand-div { height: 24px; }
  /* A 390px el texto del botón entraba en dos renglones: la flecha es decorativa */
  .wa-btn { padding-right: 16px; font-size: 15px; }
  .wa-btn--principal { font-size: 16px; }
  .wa-arr { display: none; }
}

/* Tablet (600–899): el título ya no reparte el aire con margin auto (quedaba un hueco
   grande entre el título y la bajada); los logos quedan arriba y el resto agrupado abajo.
   La foto del cierre no ocupa la pantalla entera. (Auditoría de adaptabilidad, 17-sep.) */
@media (min-width: 600px) and (max-width: 899px) {
  .hero-in > .hero-title { margin-bottom: 0; }
  .closing-media img { max-height: 62svh; object-fit: cover; object-position: 50% 22%; }
}

/* Escritorio: grilla de 1160px, hero a pantalla completa, bloques editoriales */
@media (min-width: 900px) {
  .wrap { max-width: 1160px; }
  .wrap-narrow { max-width: 680px; }   /* después de .wrap: ancho de lectura */
  .section { padding-block: 88px; }
  .section:not(.section--gris) + .section--gris,
  .section-sm + .section--gris,
  .section--gris + .section:not(.section--gris) { padding-top: 56px; }

  .hero {
    display: grid; align-items: end;
    padding-block: 96px 88px;
    min-height: 100vh; min-height: 100svh;   /* escritorio: pantalla completa, como estaba */
  }
  .hero-in { width: 100%; flex: none; }
  .hero-lead { font-size: var(--t-sub2); line-height: 27px; }
  .hero-fecha { gap: 10px 30px; font-size: 18px; }
  .hf svg { width: 22px; height: 22px; }
  .btn-hero { min-height: 56px; padding-inline: 40px; font-size: 16px; }
  .hero-title .line--der { padding-left: 1em; }
  .sorteo { min-height: 640px; display: grid; align-items: center; padding-block: 120px; }
  .sorteo-in { width: 100%; }

  .h2 { font-size: 40px; line-height: 44px; }

  .editorial { display: grid; grid-template-columns: 1fr 1fr; gap: 72px; align-items: center; }
  .editorial-media { margin: 0; }
  .editorial-media img { max-height: 78svh; object-fit: cover; }


  .agenda-list { grid-template-columns: repeat(3, 1fr); gap: 24px; margin-top: 44px; }
  .agenda-card { padding: 28px; }

  .form-card { max-width: 640px; margin-inline: auto; padding: 40px; }

  /* Cuándo/dónde a la izquierda, formulario a la derecha */
  /* En fracciones y no con un ancho fijo: con 560px fijos, a 900px de pantalla
     la columna de la fecha quedaba en 188px */
  .when-grid { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: 72px; align-items: start; }
  .when-grid .when-where { grid-template-columns: 1fr; gap: 32px; }
  .when-grid .when-form { margin-top: 0; }
  .when-grid .form-card { max-width: none; margin-inline: 0; }
  .when-value { font-size: 34px; }

  .closing { padding-block: 88px; }
  .closing-photo {
    max-width: 1160px; margin-inline: auto; padding-inline: var(--gutter);
    display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); gap: 72px; align-items: center;
  }
  .closing-media { border-radius: var(--r-card); box-shadow: var(--e3); }
  .closing-caption { order: -1; padding: 0; gap: 24px; }
  .closing-title { font-size: clamp(48px, 5vw, var(--t-display)); line-height: 1.03; }
}