/* =========================================================================
   ProFlight — Landing Campaña General · Argentina
   Construida sobre el sistema de diseño oficial (tokens.css).
   Display: Neue Haas Grotesk Display (Thin) · fallback Inter · UI: Inter.
   Paleta austera: White #FBFAFA · Dark Blue #061F31 · Blue #003C67.
   ========================================================================= */

*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; }
img, svg, video { display: block; max-width: 100%; }
button { font: inherit; color: inherit; cursor: pointer; }
ul { list-style: none; padding: 0; }

:root {
  --wrap: 1200px;
  --wrap-narrow: 920px;
  --gutter: clamp(20px, 5vw, 64px);
  --section-y: clamp(52px, 7.2vw, 104px);   /* -18% vertical rhythm */
  --nav-h: 76px;
}

html { scroll-behavior: smooth; scroll-padding-top: calc(var(--nav-h) + 12px); overflow-x: hidden; }
body {
  background: var(--bg-page);
  color: var(--fg-primary);
  font-family: var(--font-ui);
  overflow-x: hidden;
}

/* ---- Layout ------------------------------------------------------------- */
.wrap { width: 100%; max-width: var(--wrap); margin-inline: auto; padding-inline: var(--gutter); }
.wrap-narrow { max-width: var(--wrap-narrow); }
.section { padding-block: var(--section-y); }

/* ---- Typography --------------------------------------------------------- */
.display-0, .h1, .h2, .h3 {
  font-family: var(--font-display);
  font-weight: 300;
  letter-spacing: -0.01em;
  line-height: 1.02;
  color: var(--color-dark-blue);
  text-wrap: balance;
}
.display-0 { font-size: clamp(2.6rem, 7vw, 4.6rem); font-weight: 200; }
.h1 { font-size: clamp(2.2rem, 5.6vw, 3.3rem); }
.h2 { font-size: clamp(1.7rem, 4vw, 2.3rem); }
.h3 { font-size: clamp(1.3rem, 2.6vw, 1.6rem); font-weight: 400; }

/* Signature two-tone: grey→blue gradient fill on display headlines */
.hl-gradient {
  background: linear-gradient(100deg, #A9BAC6 0%, #003C67 62%);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; color: transparent;
}
.hl-mute { color: #5E7080; }        /* grey lead-in — darkened for contrast (≥3:1 on light gradient) */
.on-dark .hl-gradient { background: linear-gradient(100deg, #6E8494 0%, #FBFAFA 70%); -webkit-background-clip: text; background-clip: text; }
.on-dark .hl-mute { color: #6E8494; }

.eyebrow {
  font-family: var(--font-ui); font-weight: 500;
  font-size: 0.72rem; letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--color-blue);
  display: inline-flex; align-items: center; gap: 0.7em;
}
.eyebrow::before { content: ""; width: 24px; height: 1px; background: currentColor; opacity: 0.6; }
.eyebrow.center { justify-content: center; }
.eyebrow.center::before { display: none; }

.lead { font-size: clamp(1rem, 1.6vw, 1.18rem); line-height: 1.6; color: #4A4A4B; text-wrap: pretty; }
.body { font-size: 1rem; line-height: 1.62; color: #4A4A4B; text-wrap: pretty; }

.section-head { max-width: 760px; margin-bottom: clamp(32px, 5vw, 56px); }
.section-head .h2 { margin-top: 16px; }
.section-head .lead { margin-top: 18px; }
.section-head.center { margin-inline: auto; text-align: center; }

/* ---- Buttons (design system) ------------------------------------------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 0.55em;
  font-family: var(--font-ui); font-weight: 500; font-size: 0.95rem;
  padding: 0.85em 1.6em; border-radius: var(--radius-full);
  border: 1.5px solid transparent; text-decoration: none;
  transition: background var(--dur-base) var(--ease-standard),
              color var(--dur-base) var(--ease-standard),
              border-color var(--dur-base) var(--ease-standard),
              transform var(--dur-fast) var(--ease-standard);
  white-space: nowrap;
}
.btn:hover { text-decoration: none; }
/* Ícono guía del botón (WhatsApp / agenda): no se encoge y acompaña al texto */
.btn > svg { flex: none; }

/* Primary — filled Dark Blue */
.btn-primary { background: var(--color-dark-blue); color: var(--color-white); border-color: var(--color-dark-blue); }
.btn-primary:hover { background: var(--color-blue); border-color: var(--color-blue); color: #fff; }

/* Outline — default state (Black outline) */
.btn-outline { background: transparent; color: var(--color-black); border-color: var(--color-black); }
.btn-outline:hover { background: var(--color-dark-blue); border-color: var(--color-dark-blue); color: #fff; }

/* On dark surfaces */
.on-dark .btn-outline { color: #fff; border-color: rgba(255,255,255,0.5); }
.on-dark .btn-outline:hover { background: #fff; color: var(--color-dark-blue); border-color: #fff; }
.btn-on-dark { background: #fff; color: var(--color-dark-blue); border-color: #fff; }
.btn-on-dark:hover { background: var(--color-blue); color: #fff; border-color: var(--color-blue); }

/* Subtle secondary on dark (menor contraste que el primario y que el verde) */
.btn-subtle { background: transparent; color: rgba(255,255,255,0.74); border-color: rgba(255,255,255,0.28); font-weight: 400; }
.btn-subtle:hover { background: rgba(255,255,255,0.10); color: #fff; border-color: rgba(255,255,255,0.5); }
.btn-subtle svg { opacity: 0.85; }

.btn-lg { font-size: 1.02rem; padding: 1.05em 2.2em; }
.btn-sm { font-size: 0.85rem; padding: 0.6em 1.15em; min-height: 40px; }
.btn-block { display: flex; width: 100%; }
.btn { min-height: 44px; }  /* WCAG 2.5.5 touch target */
/* Red de seguridad: un botón con texto largo (ej. "Hablar con admisiones
   internacionales") no puede achicarse con nowrap y fuerza overflow horizontal
   de TODA la página en phones chicos (y con eso, el rebote elástico deja ver
   un borde blanco al arrastrar cerca del borde, en cualquier parte del sitio).
   A partir de acá permitimos el salto de línea; los botones cortos no cambian. */
@media (max-width: 480px){
  .btn { white-space: normal; text-align: center; }
}

/* ---- Header / Nav ------------------------------------------------------- */
.nav {
  position: fixed; top: 0; left: 0; right: 0; z-index: 100;
  height: var(--nav-h);
  background: transparent;   /* transparente sobre el video del hero */
  display: flex; align-items: center;
  transition: background var(--dur-base) var(--ease-standard), box-shadow var(--dur-base) var(--ease-standard);
}
.nav.solid { background: var(--color-dark-blue); box-shadow: var(--shadow-md); }
/* Páginas de contenido (sin hero oscuro detrás, ej. /privacidad): el nav
   transparente-hasta-scroll queda invisible sobre fondo claro. Arranca sólido. */
.static-page .nav { background: var(--color-dark-blue); box-shadow: var(--shadow-md); }
/* Progreso de lectura (solo mobile): línea fina en el borde superior que se va
   completando al bajar. Va dentro del nav fijo, por eso acompaña siempre.
   Arriba el fondo siempre es oscuro (hero o nav sólido) => línea clara. */
.scroll-progress { position: absolute; top: 0; left: 0; right: 0; height: 3px; z-index: 6; background: rgba(255,255,255,0.16); overflow: hidden; }
.scroll-progress i { display: block; height: 100%; background: #fff; transform: scaleX(0); transform-origin: left center; transition: transform 90ms linear; }
@media (min-width: 900px){ .scroll-progress { display: none; } }
/* Cuando el menú móvil está abierto, el header necesita fondo sólido aunque esté arriba */
.nav:has(.mobile-menu:not([hidden])) { background: var(--color-dark-blue); }
.nav .wrap { display: flex; align-items: center; justify-content: space-between; gap: 20px; }
.brand-group { display: inline-flex; align-items: center; gap: 14px; min-width: 0; }
.brand { display: inline-flex; align-items: center; gap: 10px; flex: none; }
/* Sello de calificación de Google, junto al logo (verificado en Google Business Profile) */
.rating-badge { display: inline-flex; align-items: center; gap: 5px; flex: none; padding: 5px 10px; border-radius: var(--radius-full); background: rgba(255,255,255,0.10); border: 1px solid rgba(255,255,255,0.22); color: #fff; font-family: var(--font-ui); font-size: 0.8rem; font-weight: 700; text-decoration: none; white-space: nowrap; transition: background var(--dur-base) var(--ease-standard); }
.rating-badge:hover { background: rgba(255,255,255,0.18); color: #fff; text-decoration: none; }
.rating-badge .ic-star { color: #FFC53D; flex: none; }
@media (max-width: 420px){ .rating-badge { padding: 5px 8px; font-size: 0.76rem; } }
.brand img { height: 52px; width: auto; }
/* En mobile el logo comparte fila con el sello de calificación + hamburguesa:
   a 52px, en pantallas de 320-374px el conjunto desborda por ~17px (medido).
   Se achica el logo solo ahí; en desktop (>=900px, con nav-links visible) queda igual. */
@media (max-width: 899px){ .brand img { height: 40px; } }
.nav-links { display: none; gap: 30px; align-items: center; }
.nav-links a { color: rgba(255,255,255,0.82); font-size: 0.92rem; font-weight: 400; text-decoration: none; transition: color var(--dur-base); }
.nav-links a:hover { color: #fff; text-decoration: none; }
.nav-cta { display: flex; align-items: center; gap: 12px; }
.nav-burger { display: inline-flex; align-items: center; justify-content: center; background: none; border: 0; width: 44px; height: 44px; color: #fff; cursor: pointer; }
.nav-burger .ic-close { display: none; }
.nav-burger[aria-expanded="true"] .ic-menu { display: none; }
.nav-burger[aria-expanded="true"] .ic-close { display: block; }

@media (min-width: 900px) {
  .nav-links { display: flex; }
  .nav-burger { display: none; }
}

/* ---- Hero (video full-bleed de fondo, texto blanco encima) -------------- */
.hero {
  position: relative; overflow: hidden;
  background: var(--color-dark-blue);
  min-height: min(88vh, 820px);
  display: flex; align-items: center;
}
.hero-bg { position: absolute; inset: 0; z-index: 0; background: var(--gradient-06); }
.hero-bg picture, .hero-bg .hero-poster, .hero-bg .hero-video {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;
  /* Baja el encuadre para mostrar la parte superior de la composición (no cortar cabezas) */
  object-position: center 22%;
}
.hero-poster { z-index: 1; display: block; }
/* Video: solo desktop (ver JS). Fade-in al reproducir, tapa el poster. */
.hero-video { z-index: 2; opacity: 0; transition: opacity 0.8s var(--ease-standard); }
.hero-video.loaded { opacity: 1; }
/* Scrim mínimo: el video ya viene oscurecido desde edición. Solo un leve refuerzo
   arriba (para el nav transparente) y una insinuación a la izquierda del texto. */
.hero-scrim {
  position: absolute; inset: 0; z-index: 3;
  background:
    linear-gradient(90deg, rgba(6,31,49,0.28) 0%, rgba(6,31,49,0.06) 48%, transparent 80%),
    linear-gradient(180deg, rgba(6,31,49,0.34) 0%, transparent 18%, transparent 82%, rgba(6,31,49,0.28) 100%);
}
.hero-inner {
  position: relative; z-index: 4; width: 100%;
  padding-block: calc(var(--nav-h) + clamp(44px, 8vh, 92px)) clamp(52px, 8vh, 92px);
}
.hero-copy { max-width: min(1060px, 100%); text-shadow: 0 2px 24px rgba(0,0,0,0.32); }
.hero-eyebrow { margin-bottom: 22px; }
/* Salto de línea controlado: sólo en mobile (ver media query del hero) */
.br-mobile { display: none; }
/* H1: dos líneas + tipografía más ancha (misma familia, expandida horizontalmente).
   display:block + width:fit-content = shrink-to-fit para el scaleX PERO en bloque
   (para que el eyebrow, que es inline, quede en su propia línea arriba). */
.hero-title {
  display: block; width: fit-content; max-width: 100%;
  transform: scaleX(1.07); transform-origin: left center;
  /* Bold real (700 = el peso más pesado cargado de Inter; el 200 heredado de
     .display-0 ni existe en la familia y caía en 300). Tracking más ceñido,
     como corresponde a una display en negrita. */
  font-weight: 700; letter-spacing: -0.025em;
  font-size: clamp(2.3rem, 5.1vw, 3.9rem); line-height: 1.05;
  margin-bottom: clamp(30px, 4vw, 46px);
}
/* Bajada + botones en la MISMA columna de info, alineados al margen izquierdo del texto */
.hero-foot { display: flex; flex-direction: column; align-items: flex-start; gap: clamp(22px, 3vw, 30px); }
.hero-foot .lead { max-width: 560px; }
.hero-actions { display: flex; flex-direction: column; gap: 12px; align-items: flex-start; text-shadow: 0 2px 20px rgba(0,0,0,0.28); }
.hero-cta { display: flex; flex-direction: row; flex-wrap: wrap; align-items: stretch; gap: 14px; margin-top: 0; }
.hero-cta .btn { justify-content: center; }
.hero-actions .hero-micro { margin-top: 4px; }

@media (max-width: 899px){
  .hero { min-height: min(92vh, 700px); }
  /* En mobile el poster ya es oscuro: scrim leve, apenas para asegurar legibilidad */
  .hero-scrim { background:
    linear-gradient(180deg, rgba(6,31,49,0.36) 0%, rgba(6,31,49,0.18) 40%, rgba(6,31,49,0.34) 100%); }
  .hero-copy { max-width: 100%; }
  /* La negrita ocupa ~8% más de ancho: bajo un punto el tamaño en mobile para
     que "para convertirte en piloto." siga entrando en UNA línea (título = 2 líneas). */
  .hero-title { transform: none; width: 100%; font-size: clamp(2.1rem, 9vw, 3rem); letter-spacing: -0.03em; overflow-wrap: break-word; }
  /* Eyebrow en dos líneas: el corte va después de "Argentina". La línea
     decorativa se alinea con el primer renglón (con center quedaría en el medio). */
  .br-mobile { display: inline; }
  .hero-eyebrow { align-items: flex-start; line-height: 1.5; }
  .hero-eyebrow::before { margin-top: 0.75em; }
  /* Bajada y botones apilados */
  .hero-foot { flex-direction: column; align-items: flex-start; gap: 26px; }
  .hero-foot .lead { max-width: 100%; flex-basis: auto; }
  .hero-actions { width: 100%; align-items: flex-start; }
  .hero-cta { flex-direction: row; flex-wrap: wrap; align-items: stretch; }
}


/* ---- Roadmap — línea de tiempo con puntos numerados --------------------- */
.roadmap { background: var(--gradient-01); }
.timeline { list-style: none; position: relative; display: grid; grid-template-columns: repeat(5, 1fr); gap: 12px; margin-top: clamp(40px, 6vw, 66px); }
/* la línea que conecta los puntos */
.timeline::before { content: ""; position: absolute; top: 23px; left: 10%; right: 10%; height: 2px; background: var(--color-silver); z-index: 0; }
.tl-step { position: relative; z-index: 1; display: flex; flex-direction: column; align-items: center; text-align: center; }
.tl-node {
  position: relative;
  width: 46px; height: 46px; border-radius: 50%; flex: none;
  background: var(--color-dark-blue); color: #fff;
  display: grid; place-content: center;
  font-family: var(--font-display); font-weight: 400; font-size: 0.95rem; letter-spacing: 0.02em;
  box-shadow: var(--shadow-sm);
}
.tl-label { margin-top: 16px; font-size: 0.85rem; line-height: 1.4; color: var(--color-black); max-width: 20ch; }
/* Primer paso resaltado ("empezás acá"): halo doble tipo faro + latido sutil.
   El ::after es el segundo anillo, desfasado, para que la onda se lea mejor.
   Va position:absolute, así que no entra en el grid del nodo (no mueve el número). */
.tl-step.tl-active .tl-node { background: var(--color-blue); animation: tl-pulse 1.6s var(--ease-standard) infinite; }
.tl-step.tl-active .tl-node::after {
  content: ""; position: absolute; inset: 0; border-radius: 50%; pointer-events: none;
  animation: tl-ring 1.6s var(--ease-standard) infinite 0.55s;
}
.tl-step.tl-active .tl-label { color: var(--color-blue); font-weight: 600; }
.tl-here { display: block; margin-top: 5px; font-size: 0.66rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--color-blue); }
@keyframes tl-pulse {
  0%   { box-shadow: 0 0 0 0 rgba(0,60,103,0.75); transform: scale(1); }
  45%  { transform: scale(1.07); }
  70%  { box-shadow: 0 0 0 18px rgba(0,60,103,0); transform: scale(1); }
  100% { box-shadow: 0 0 0 0 rgba(0,60,103,0); transform: scale(1); }
}
@keyframes tl-ring {
  0%   { box-shadow: 0 0 0 0 rgba(0,60,103,0.45); }
  70%  { box-shadow: 0 0 0 15px rgba(0,60,103,0); }
  100% { box-shadow: 0 0 0 0 rgba(0,60,103,0); }
}
@media (prefers-reduced-motion: reduce){
  .tl-step.tl-active .tl-node, .tl-step.tl-active .tl-node::after { animation: none; }
}
/* Mobile: línea de tiempo vertical */
@media (max-width: 720px){
  .timeline { grid-template-columns: 1fr; gap: 0; margin-top: clamp(28px, 6vw, 40px); }
  .timeline::before { top: 23px; bottom: 23px; left: 23px; right: auto; width: 2px; height: auto; }
  .tl-step { flex-direction: row; align-items: flex-start; text-align: left; gap: 18px; padding-bottom: 28px; }
  .tl-step:last-child { padding-bottom: 0; }
  .tl-label { margin-top: 11px; max-width: none; font-size: 0.95rem; }
}

/* ---- JetSMART / gradient feature --------------------------------------- */
.jetsmart { background: var(--gradient-03); }
/* Composición centrada (acuerdo) */
.jetsmart-center { text-align: center; }
.jetsmart .h2, .jetsmart .lead { color: var(--color-dark-blue); }
.jetsmart-title { font-family: var(--font-display); font-weight: 200; font-size: clamp(2.5rem, 7vw, 4.4rem); line-height: 1.03; letter-spacing: -0.015em; color: var(--color-dark-blue); margin: 6px 0 0; }
.jetsmart-title .hl-mute { color: #6E8092; }
.jetsmart-center .lead { max-width: 60ch; margin: 24px auto 0; }
.jetsmart-cta { margin-top: clamp(28px, 4vw, 40px); }
.jetsmart-lockup { display: flex; align-items: center; gap: 18px; margin: 24px 0 10px; flex-wrap: wrap; }
.jetsmart-lockup.center { justify-content: center; margin: 0 auto clamp(26px, 4vw, 40px); }
.jetsmart .eyebrow.center { margin-bottom: 14px; }
.jetsmart-lockup .pf-mark { height: 30px; width: auto; }
.jetsmart-lockup .js-logo { height: 26px; width: auto; }   /* logo oficial JetSMART */
.jetsmart-lockup .plus { color: var(--color-dark-grey); font-size: 1.2rem; font-weight: 300; line-height: 1; }

/* ---- Indicators (icon + caption) --------------------------------------- */
.indicators { display: flex; flex-direction: column; gap: clamp(16px, 2vw, 22px); margin-top: 34px; }
.indicator { display: flex; flex-direction: row; align-items: center; gap: 14px; }
.indicator .ic { flex: none; width: 28px; height: 28px; color: var(--color-blue); }
.ind-text { display: flex; flex-direction: column; gap: 3px; }
.indicator b { font-family: var(--font-display); font-weight: 400; font-size: 1.05rem; color: var(--color-dark-blue); line-height: 1.2; }
.indicator span { font-size: 0.9rem; color: #4A4A4B; line-height: 1.35; }

/* ---- Split rows --------------------------------------------------------- */
.split { display: grid; gap: clamp(28px, 5vw, 56px); align-items: center; }
@media (min-width: 860px){ .split { grid-template-columns: 1fr 1fr; } }
.split-media { border-radius: var(--radius-md); overflow: hidden; aspect-ratio: 4/3; background: var(--gradient-05); box-shadow: var(--shadow-md); }
.split-media > img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* ---- Pricing card ------------------------------------------------------- */
.pricing { background: var(--color-white); }
.price-card {
  background: var(--gradient-01);
  border: 1px solid var(--color-silver); border-radius: var(--radius-md);
  padding: clamp(28px, 4vw, 48px); box-shadow: var(--shadow-sm);
}
.price-card .kicker { margin-bottom: 10px; }
.price-includes { margin: 26px 0; display: grid; gap: 14px; }
.price-includes li { display: flex; align-items: center; gap: 12px; font-size: 0.98rem; color: var(--color-black); }
.price-includes li svg { color: var(--color-blue); flex: none; }
.price-total { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; flex-wrap: wrap; padding-top: 22px; border-top: 1px solid var(--color-silver); }
.price-total .label { font-size: 0.72rem; letter-spacing: 0.16em; text-transform: uppercase; color: var(--fg-secondary); }
.price-total .amount { font-family: var(--font-display); font-weight: 300; font-size: clamp(2rem, 5vw, 3rem); color: var(--color-blue); letter-spacing: -0.01em; }
.price-cta { margin-top: 30px; display: flex; flex-wrap: wrap; gap: 14px; }
/* "Hablar con admisiones internacionales" no entra al lado del otro botón en
   phones (el texto largo + nowrap desbordaba el card, ver bug reportado).
   Apila full-width, mismo patrón ya probado en .conape-cta. */
@media (max-width: 560px){
  .price-cta { flex-direction: column; }
  .price-cta .btn { width: 100%; white-space: normal; }
}

/* ---- Cards grid (modalidades / requisitos) ----------------------------- */
.cards-2 { display: grid; gap: clamp(20px, 3vw, 32px); }
@media (min-width: 760px){ .cards-2 { grid-template-columns: 1fr 1fr; } }
.card {
  background: var(--bg-elevated); border: 1px solid var(--color-grey);
  border-radius: var(--radius-md); padding: clamp(24px, 3vw, 36px);
  transition: box-shadow var(--dur-base) var(--ease-standard), border-color var(--dur-base);
}
.card:hover { box-shadow: var(--shadow-md); border-color: var(--color-silver); }
.card .tag { display: inline-flex; align-items: center; gap: 8px; margin-bottom: 6px; }
.card .tag .t { font-family: var(--font-display); font-weight: 400; font-size: 1.3rem; color: var(--color-dark-blue); }
.card .tag .m { font-size: 0.72rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--fg-secondary); }
.card .body { margin: 12px 0 18px; }
.list-check li { display: flex; gap: 12px; padding: 7px 0; font-size: 0.92rem; color: var(--color-black); line-height: 1.45; }
.list-check li svg { color: var(--color-blue); flex: none; margin-top: 2px; }

/* ---- Dark sections (simulators / tech / final) ------------------------- */
.on-dark { background: var(--gradient-06); color: var(--color-white); }
.on-dark .h1, .on-dark .h2, .on-dark .h3, .on-dark .display-0 { color: #fff; }
.on-dark .lead, .on-dark .body { color: rgba(255,255,255,0.72); }
.on-dark .eyebrow { color: #7FA8C8; }

/* ---- Simuladores — lista (hover cambia la imagen) ---------------------- */
.sims-layout { display: grid; gap: clamp(28px, 4vw, 56px); align-items: center; }
@media (min-width: 900px){ .sims-layout { grid-template-columns: 0.82fr 1.18fr; } }
.sims-nav { margin-top: clamp(22px, 3vw, 38px); display: flex; flex-direction: column; gap: 2px; }
.sims-name { background: none; border: 0; text-align: left; cursor: pointer; font-family: var(--font-display); font-weight: 300; font-size: clamp(1.35rem, 2.2vw, 1.9rem); line-height: 1.3; color: rgba(255,255,255,0.4); padding: 3px 0; display: inline-flex; align-items: center; gap: 10px; transition: color var(--dur-base) var(--ease-standard); }
.sims-name:hover, .sims-name.is-active { color: #fff; }
.sims-name.is-active { text-decoration: underline; text-underline-offset: 7px; text-decoration-thickness: 1px; }
.sim-tag { display: inline-block; font-size: 0.56rem; letter-spacing: 0.1em; text-transform: uppercase; background: var(--color-blue); color: #fff; padding: 2px 7px; border-radius: var(--radius-full); vertical-align: middle; font-weight: 700; text-shadow: none; }
/* visor: slides apilados, crossfade */
.sims-viewer { display: grid; grid-template-columns: minmax(0, 1fr); }
.sims-slide { grid-area: 1 / 1; position: relative; border-radius: var(--radius-md); overflow: hidden; aspect-ratio: 4 / 3; box-shadow: var(--shadow-lg); border: 1px solid rgba(127,168,200,0.18); opacity: 0; visibility: hidden; transition: opacity var(--dur-slow) var(--ease-standard); }
.sims-slide.is-active { opacity: 1; visibility: visible; }
.sims-slide img { width: 100%; height: 100%; object-fit: cover; display: block; }
.sims-slide[data-sim="4"] img { object-position: center 34%; }
.sims-slide[data-sim="5"] img { object-position: center 42%; }
.sims-slide figcaption { display: none; }
@media (max-width: 899px){
  /* mobile: galería con scroll horizontal, se oculta la lista */
  .sims-nav { display: none; }
  .sims-viewer { display: flex; overflow-x: auto; gap: 12px; scroll-snap-type: x proximity; scrollbar-width: none; }
  .sims-viewer::-webkit-scrollbar { display: none; }
  .sims-slide { grid-area: auto; flex: 0 0 82%; opacity: 1 !important; visibility: visible !important; scroll-snap-align: start; }
  .sims-slide::after { content: ""; position: absolute; inset: 0; z-index: 1; background: linear-gradient(180deg, transparent 52%, rgba(6,31,49,0.82) 100%); }
  .sims-slide figcaption { display: block; position: absolute; z-index: 2; left: 0; bottom: 0; padding: 14px 16px; color: #fff; font-weight: 600; font-size: 0.9rem; text-shadow: 0 1px 8px rgba(0,0,0,0.6); }
}
@media (prefers-reduced-motion: reduce){ .sims-slide { transition: none; } }

/* ---- Testimonios en video (carrusel) ----------------------------------- */
/* padding-bottom achicado a propósito: la sección siguiente ya trae su propio
   padding-top completo (--section-y). Sin este recorte, los dos se suman y
   queda un vacío enorme entre los puntos del carrusel y el título de abajo
   (se notaba fuerte en mobile, ~104px solo de este lado + lo del siguiente). */
.stories { background: var(--bg-page); padding-top: clamp(30px, 4.5vw, 60px); padding-bottom: clamp(16px, 3vw, 32px); }
/* separación moderada entre la sección anterior y los testimonios en video */
.section:has(+ #testimonios) { padding-bottom: clamp(34px, 5vw, 72px); }
.stories-head { display: flex; align-items: center; gap: clamp(18px, 4vw, 44px); }
.stories-head h2 { margin-top: 8px; }
.carousel-nav { display: flex; justify-content: flex-end; gap: 10px; margin-top: clamp(18px, 3vw, 28px); margin-bottom: clamp(16px, 2.4vw, 24px); }
.cnav { width: 46px; height: 46px; border-radius: var(--radius-full); border: 1px solid var(--color-grey); color: var(--color-dark-blue); display: grid; place-content: center; background: #fff; cursor: pointer; transition: background var(--dur-base) var(--ease-standard), border-color var(--dur-base); }
.cnav:hover { background: var(--color-grey); border-color: var(--color-silver); }
.stories-grid { display: flex; gap: clamp(16px, 2vw, 24px); overflow-x: auto; scroll-snap-type: x proximity; scroll-behavior: smooth; padding-bottom: 6px; scrollbar-width: none; }
.stories-grid::-webkit-scrollbar { display: none; }
.story { flex: 0 0 clamp(320px, 38vw, 520px); scroll-snap-align: start; text-align: left; margin: 0; padding: 0; background: #fff; border: 1px solid var(--color-grey); border-radius: var(--radius-md); overflow: hidden; display: flex; flex-direction: column; cursor: pointer; transition: border-color var(--dur-base) var(--ease-standard), box-shadow var(--dur-base); }
.story:hover { border-color: var(--color-silver); box-shadow: var(--shadow-md); }
.story-media { position: relative; aspect-ratio: 16 / 9; overflow: hidden; background: var(--color-dark-blue); }
.story-media::after { content: ""; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(rgba(6,31,49,0) 38%, rgba(6,31,49,0.72) 100%); }
.story-img { width: 100%; height: 100%; object-fit: cover; display: block; }
.play { position: absolute; inset: 0; margin: auto; z-index: 4; width: 58px; height: 58px; border-radius: var(--radius-full); background: #fff; color: var(--color-dark-blue); display: grid; place-content: center; box-shadow: var(--shadow-md); transition: background var(--dur-base) var(--ease-standard), transform var(--dur-base); }
.story:hover .play { background: var(--color-grey); transform: scale(1.06); }
.play svg { margin-left: 2px; }
.story-foot { display: flex; align-items: center; justify-content: space-between; padding: 16px 18px; gap: 12px; }
.story-foot .who { font-family: var(--font-display); font-weight: 400; font-size: 1rem; color: var(--color-dark-blue); }
.story-foot .tag { font-size: 11px; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; color: var(--fg-secondary); }
@media (max-width: 560px){ .story { flex-basis: 84vw; } }

/* lightbox de video */
.lightbox { position: fixed; inset: 0; z-index: 200; display: grid; place-items: center; padding: 22px; background: rgba(6,31,49,0.62); opacity: 0; visibility: hidden; transition: opacity var(--dur-slow) var(--ease-standard), visibility var(--dur-slow); }
.lightbox[hidden] { display: none; }
.lightbox.open { opacity: 1; visibility: visible; }
.lb-card { position: relative; width: min(900px, 100%); background: var(--color-dark-blue); border: 1px solid rgba(255,255,255,0.12); border-radius: var(--radius-md); overflow: hidden; transform: translateY(14px); transition: transform var(--dur-slow) var(--ease-standard); box-shadow: var(--shadow-lg); }
.lightbox.open .lb-card { transform: none; }
.lb-stage { position: relative; aspect-ratio: 16 / 9; background: #04111c; }
.lb-stage iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; display: block; }
.lb-meta { padding: 18px 20px; color: #fff; display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; }
.lb-meta h3 { margin: 0 0 6px; font-family: var(--font-display); font-weight: 400; font-size: 1.3rem; letter-spacing: -0.02em; }
.lb-meta p { margin: 0; color: rgba(255,255,255,0.62); font-size: 0.92rem; }
.lb-meta .tag { font-size: 11px; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; color: rgba(255,255,255,0.5); flex: 0 0 auto; }
.lb-close { position: absolute; top: 13px; right: 13px; z-index: 6; width: 38px; height: 38px; border-radius: var(--radius-full); background: rgba(6,31,49,0.6); border: 1px solid rgba(255,255,255,0.14); color: #fff; display: grid; place-content: center; cursor: pointer; transition: background var(--dur-base) var(--ease-standard); }
.lb-close:hover { background: rgba(6,31,49,0.94); }
@media (prefers-reduced-motion: reduce){ .lightbox, .lb-card { transition: opacity var(--dur-base) linear; } }

/* ---- Popup CONAPE (Costa Rica, geo-segmentado) — mismo patrón que .lightbox --- */
.conape-popup { position: fixed; inset: 0; z-index: 210; display: grid; place-items: center; padding: 22px; background: rgba(6,31,49,0.62); opacity: 0; visibility: hidden; transition: opacity var(--dur-slow) var(--ease-standard), visibility var(--dur-slow); }
.conape-popup[hidden] { display: none; }
.conape-popup.open { opacity: 1; visibility: visible; }
.conape-card { position: relative; width: min(460px, 100%); max-height: min(88vh, 720px); overflow-y: auto; background: #fff; border-radius: var(--radius-md); padding: clamp(26px, 4vw, 36px); transform: translateY(14px); transition: transform var(--dur-slow) var(--ease-standard); box-shadow: var(--shadow-lg); }
.conape-popup.open .conape-card { transform: none; }
.conape-title { font-family: var(--font-display); font-weight: 400; font-size: clamp(1.3rem, 3vw, 1.6rem); color: var(--color-dark-blue); line-height: 1.15; margin-top: 12px; }
.conape-lead { font-size: 0.94rem; line-height: 1.55; color: #4A4A4B; margin-top: 12px; }
.conape-card .list-check { margin-top: 18px; }
.conape-rate { margin-top: 16px; font-weight: 600; color: var(--color-blue); font-size: 0.92rem; }
.conape-cta { margin-top: 22px; display: flex; flex-direction: column; gap: 10px; }
.conape-cta .btn { width: 100%; }
.conape-dismiss { background: none; border: 0; color: var(--fg-secondary); font-size: 0.88rem; font-weight: 500; cursor: pointer; min-height: 40px; }
.conape-dismiss:hover { color: var(--color-black); text-decoration: underline; }
.conape-close { position: absolute; top: 13px; right: 13px; z-index: 2; width: 36px; height: 36px; border-radius: var(--radius-full); background: var(--color-grey); border: 0; color: var(--color-dark-blue); display: grid; place-content: center; cursor: pointer; transition: background var(--dur-base) var(--ease-standard); }
.conape-close:hover { background: var(--color-silver); }
@media (prefers-reduced-motion: reduce){ .conape-popup, .conape-card { transition: opacity var(--dur-base) linear; } }

/* ---- Resultados de formación (institucional, texto + imagen) ----------- */
.results { background: var(--color-white); }
.results-grid { display: grid; grid-template-columns: 1fr; gap: clamp(28px, 5vw, 56px); align-items: center; }
@media (min-width: 900px){ .results-grid { grid-template-columns: 1.05fr 0.95fr; } }
.results-copy { max-width: 42ch; }
.results-media { position: relative; border-radius: var(--radius-md); overflow: hidden; aspect-ratio: 3 / 2; background: var(--color-dark-blue); box-shadow: var(--shadow-md); }
.results-media img { width: 100%; height: 100%; object-fit: cover; display: block; }
.results-media::after { content: ""; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(115deg, rgba(6,31,49,0.22) 0%, rgba(6,31,49,0) 52%); }

/* ---- Nuestros pilotos (testimonios con foto) --------------------------- */
/* Mobile: panel oscuro compacto + tarjetas debajo */
.pilots-panel { background: var(--gradient-06); color: #fff; }
.pilots-panel-inner { display: flex; flex-direction: column; max-width: var(--wrap); margin-inline: auto; padding: clamp(40px, 10vw, 60px) var(--gutter); }
.pilots-title { font-family: var(--font-display); font-weight: 300; font-size: clamp(2.1rem, 8.5vw, 3rem); line-height: 1.05; color: #fff; letter-spacing: -0.01em; }
.pilots-lead { margin-top: 16px; color: rgba(255,255,255,0.66); font-size: 0.98rem; line-height: 1.55; max-width: 38ch; }
.pilots-airlines { list-style: none; display: grid; grid-template-columns: repeat(3, 1fr); align-items: center; gap: clamp(20px, 5vw, 30px) clamp(14px, 4vw, 26px); margin-top: clamp(28px, 7vw, 44px); }
.pilots-airlines li { display: flex; align-items: center; height: clamp(24px, 6vw, 32px); }
/* En los celulares más chicos, 3 columnas dejan cada logo en ~80px: pasan a 2
   columnas más anchas para que se lean bien (son 8 logos, ninguno se saca). */
@media (max-width: 480px){
  .pilots-airlines { grid-template-columns: repeat(2, 1fr); }
  .pilots-airlines li { height: clamp(26px, 7vw, 32px); }
}
.pilots-airlines img { max-height: 100%; max-width: 100%; width: auto; object-fit: contain; object-position: left center; opacity: 0.9; }
.pilots-cards-area { padding: clamp(30px, 8vw, 52px) var(--gutter); }
.pilots-cards { display: flex; gap: clamp(14px, 3vw, 20px); overflow-x: auto; scroll-snap-type: x proximity; scrollbar-width: none; padding-bottom: 4px; margin: 0; }
.pilots-cards::-webkit-scrollbar { display: none; }

/* Desktop: split (panel + tarjetas lado a lado) */
@media (min-width: 900px){
  .pilots { max-width: var(--wrap); margin-inline: auto; padding-block: var(--section-y); padding-inline: var(--gutter); display: grid; grid-template-columns: 0.82fr 1.3fr; gap: clamp(20px, 3vw, 32px); align-items: stretch; }
  .pilots-panel { border-radius: var(--radius-md); }
  .pilots-panel-inner { min-height: 0; height: 100%; justify-content: flex-start; max-width: none; margin: 0; padding: clamp(30px, 3.2vw, 46px); }
  .pilots-title { font-size: clamp(1.9rem, 3vw, 2.8rem); }
  .pilots-airlines { margin-top: auto; padding-top: clamp(28px, 3vw, 44px); }
  /* min-width:0 es necesario: sin esto, un grid item no se achica por debajo del
     ancho mínimo de su contenido — con más de 3 tarjetas en el carrusel, esta
     columna empuja el ancho de TODA la sección y rompe el layout de desktop
     (scroll horizontal en toda la página). Ver HANDOFF-TESTIMONIOS-EXTRANJERO.md. */
  .pilots-cards-area { padding: 0; position: relative; min-width: 0; }
  .pilots-cards { padding-bottom: 0; }  /* borde inferior exacto = borde de las cards */
  /* los puntos salen del flujo para que la altura del área = altura de las cards */
  .pilots-cards-area .dots { position: absolute; left: 0; right: 0; top: 100%; margin-top: 14px; }
  /* flechas para deslizar los testimonios (2 visibles + slide a la 3ra) */
  .pilots-cards-area .pnav { display: grid; place-content: center; position: absolute; top: 34%; transform: translateY(-50%); z-index: 3; width: 44px; height: 44px; border-radius: var(--radius-full); background: #fff; border: 1px solid var(--color-grey); box-shadow: var(--shadow-md); color: var(--color-dark-blue); cursor: pointer; transition: background var(--dur-base) var(--ease-standard); }
  .pilots-cards-area .pnav:hover { background: var(--color-grey); }
  .pilots-cards-area .pnav.prev { left: 8px; }
  .pilots-cards-area .pnav.next { right: 8px; }
}

/* tarjetas de testimonio: retrato del egresado + nombre, país y cita */
.pcard { flex: 0 0 min(80%, 300px); scroll-snap-align: start; border-radius: var(--radius-md); overflow: hidden; background: #fff; border: 1px solid var(--color-grey); display: flex; flex-direction: column; }
@media (min-width: 900px){ .pcard { flex-basis: calc(50% - 10px); } }
.pnav { display: none; }
/* radio SOLO en las dos esquinas de arriba: la foto va arriba de la tarjeta y su borde
   inferior encuentra a .pcard-body, que es recto. Con `inherit` se redondeaban las cuatro
   y quedaba un escalón donde la foto toca el cuerpo. Evita además la rendija blanca de
   Android/Chrome, que venía de que la foto no acompañaba el radio del contenedor. */
.pcard-photo { aspect-ratio: 4 / 5; overflow: hidden; background: var(--color-silver); border-radius: var(--radius-md) var(--radius-md) 0 0; }
.pcard-photo img { width: 100%; height: 100%; object-fit: cover; object-position: center top; display: block; }
.pcard-body { padding: clamp(16px, 2.2vw, 22px); display: flex; flex-direction: column; }
.pcard-name { font-family: var(--font-display); font-weight: 400; font-size: 1.16rem; color: var(--color-dark-blue); line-height: 1.15; }
/* Aerolínea del egresado (sin país: bajo volumen de alumnos internacionales todavía) */
.pcard-country { font-size: 0.85rem; color: var(--fg-secondary); margin-top: 3px; margin-bottom: 12px; }
.pcard-quote { font-size: 0.94rem; line-height: 1.6; color: #4A4A4B; display: -webkit-box; -webkit-line-clamp: 4; -webkit-box-orient: vertical; overflow: hidden; }
/* el expandido in situ es solo mobile — en desktop "Ver más" abre el modal (.tmodal) en su lugar */
@media (max-width: 899px){
  .pcard.expanded .pcard-quote { -webkit-line-clamp: unset; overflow: visible; }
}
.pcard-more { align-self: flex-start; margin-top: 10px; background: none; border: 0; padding: 8px 0; color: var(--color-blue); font-weight: 500; font-size: 0.9rem; cursor: pointer; min-height: 44px; }

/* Modal de testimonio con foto (desktop): tarjeta centrada, sin foto, solo nombre/país/cita */
.tmodal { position: fixed; inset: 0; z-index: 200; display: grid; place-items: center; padding: 22px; background: rgba(6,31,49,0.62); opacity: 0; visibility: hidden; transition: opacity var(--dur-slow) var(--ease-standard), visibility var(--dur-slow); }
.tmodal[hidden] { display: none; }
.tmodal.open { opacity: 1; visibility: visible; }
.tmodal-card { position: relative; width: min(560px, 100%); max-height: min(80vh, 640px); overflow-y: auto; background: #fff; border: 1px solid var(--color-grey); border-radius: var(--radius-md); padding: clamp(28px, 4vw, 40px); transform: translateY(14px); transition: transform var(--dur-slow) var(--ease-standard); box-shadow: var(--shadow-lg); }
.tmodal.open .tmodal-card { transform: none; }
.tmodal-name { font-family: var(--font-display); font-weight: 400; font-size: 1.5rem; color: var(--color-dark-blue); line-height: 1.15; margin: 0; }
.tmodal-country { font-size: 0.92rem; color: var(--fg-secondary); margin-top: 6px; margin-bottom: 20px; }
.tmodal-quote { font-size: 1rem; line-height: 1.7; color: #4A4A4B; margin: 0; }
.tmodal-close { position: absolute; top: 14px; right: 14px; z-index: 6; width: 44px; height: 44px; border-radius: var(--radius-full); background: #fff; border: 1px solid var(--color-grey); box-shadow: var(--shadow-md); color: var(--color-dark-blue); display: grid; place-content: center; cursor: pointer; transition: background var(--dur-base) var(--ease-standard); }
.tmodal-close:hover { background: var(--color-grey); }
@media (prefers-reduced-motion: reduce){ .tmodal, .tmodal-card { transition: opacity var(--dur-base) linear; } }
.pcard-more:hover { text-decoration: underline; text-underline-offset: 3px; }

/* ---- Puntos indicadores de carrusel (compartidos) ---------------------- */
.dots { display: flex; justify-content: center; gap: 4px; margin-top: clamp(16px, 3vw, 22px); }
.dot { width: 24px; height: 24px; padding: 0; border: 0; background: none; cursor: pointer; display: grid; place-content: center; }
.dot::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: rgba(6,31,49,0.42); transition: background var(--dur-base) var(--ease-standard), transform var(--dur-base) var(--ease-standard); }
.dot.is-active::before { background: var(--color-blue); transform: scale(1.3); }
.on-dark .dot::before { background: rgba(255,255,255,0.34); }
.on-dark .dot.is-active::before { background: #fff; }
.airlines { display: flex; flex-wrap: wrap; gap: 14px 34px; align-items: center; justify-content: center; margin-top: clamp(34px, 5vw, 54px); padding-top: clamp(28px,4vw,40px); border-top: 1px solid var(--color-grey); }
.airlines span { font-family: var(--font-display); font-weight: 400; color: var(--fg-secondary); font-size: 1.05rem; letter-spacing: 0.02em; }

/* ---- FAQ ---------------------------------------------------------------- */
.faq { background: var(--gradient-01); }
.faq-list { margin-top: 10px; border-top: 1px solid var(--color-silver); }
.faq-item { border-bottom: 1px solid var(--color-silver); }
.faq-q { width: 100%; background: none; border: 0; text-align: left; display: flex; align-items: center; justify-content: space-between; gap: 20px; padding: 22px 0; font-family: var(--font-display); font-weight: 400; font-size: clamp(1.02rem, 2vw, 1.2rem); color: var(--color-dark-blue); }
.faq-q .pm { flex: none; width: 22px; height: 22px; position: relative; transition: transform var(--dur-base) var(--ease-standard); }
.faq-q .pm::before, .faq-q .pm::after { content: ""; position: absolute; background: var(--color-blue); border-radius: 2px; }
.faq-q .pm::before { top: 50%; left: 2px; right: 2px; height: 1.5px; transform: translateY(-50%); }
.faq-q .pm::after { left: 50%; top: 2px; bottom: 2px; width: 1.5px; transform: translateX(-50%); transition: opacity var(--dur-base); }
.faq-item.open .faq-q .pm::after { opacity: 0; }
.faq-a { overflow: hidden; max-height: 0; transition: max-height var(--dur-slow) var(--ease-standard); }
.faq-a .inner { padding: 0 0 22px; color: var(--fg-secondary); line-height: 1.6; font-size: 0.96rem; max-width: 70ch; }

/* ---- Final CTA ---------------------------------------------------------- */
.final { position: relative; }
.final .h1 { margin-bottom: 20px; }
.final .lead { color: rgba(255,255,255,0.8); max-width: 52ch; }
.final-cta { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 34px; }

/* ---- Footer ------------------------------------------------------------- */
.footer { background: var(--color-dark-blue); color: rgba(255,255,255,0.72); padding-block: clamp(40px, 6vw, 64px); }
.footer a { color: rgba(255,255,255,0.72); text-decoration: none; }
.footer a:hover { color: #fff; text-decoration: none; }
.footer-grid { display: grid; gap: 32px; }
@media (min-width: 760px){ .footer-grid { grid-template-columns: 1.4fr 1fr 1fr; } }
.footer-brand img { height: 52px; margin-bottom: 20px; }
.footer-brand p { font-size: 0.86rem; line-height: 1.6; max-width: 34ch; }
.footer h3, .footer h4 { color: #fff; font-family: var(--font-ui); font-size: 0.78rem; letter-spacing: 0.12em; text-transform: uppercase; margin-bottom: 14px; font-weight: 500; }
.footer-col a { display: flex; align-items: center; min-height: 44px; font-size: 0.9rem; }
.footer-bot { margin-top: clamp(30px,5vw,44px); padding-top: 24px; border-top: 1px solid rgba(255,255,255,0.12); display: flex; flex-wrap: wrap; gap: 10px; justify-content: space-between; font-size: 0.8rem; color: rgba(255,255,255,0.5); }

/* ---- Sticky mobile CTA + WhatsApp float --------------------------------- */
.sticky-cta {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 90;
  background: var(--color-dark-blue);
  /* padding-bottom suma el área segura del home-indicator en iPhone: sin esto,
     el botón queda pegado a la zona de gesto del sistema. */
  padding: 12px var(--gutter) calc(12px + env(safe-area-inset-bottom));
  display: flex; gap: 10px; box-shadow: 0 -6px 20px rgba(6,31,49,0.2);
  transform: translateY(110%); transition: transform var(--dur-slow) var(--ease-standard);
}
.sticky-cta.show { transform: translateY(0); }
.sticky-cta .btn { flex: 1; }
@media (min-width: 900px){ .sticky-cta { display: none; } }

.wa-float {
  position: fixed; right: 18px; bottom: 18px; z-index: 85;
  width: 54px; height: 54px; border-radius: 50%; background: #25D366;
  display: grid; place-content: center; box-shadow: var(--shadow-lg);
  transition: transform var(--dur-base) var(--ease-standard);
}
.wa-float:hover { transform: scale(1.06); }
.wa-float svg { width: 28px; height: 28px; }
@media (max-width: 899px){ .wa-float { bottom: calc(84px + env(safe-area-inset-bottom)); } }
/* en mobile la barra fija inferior no debe tapar el contenido final del footer */
@media (max-width: 899px){ .footer { padding-bottom: 88px; } }

/* ---- Reveal on scroll (progressive enhancement) ------------------------- */
/* Hidden state applies ONLY when JS is active (.js on <html>). If JS fails
   or the observer never fires, content stays fully visible. */
.js .reveal { opacity: 0; transform: translateY(18px); transition: opacity 0.6s var(--ease-standard), transform 0.6s var(--ease-standard); }
.js .reveal.in { opacity: 1; transform: none; }
/* La animación de entrada corre en desktop y en mobile por igual. Sigue
   protegida por el IntersectionObserver + el failsafe de 1.6s en el JS: si
   por lo que sea nunca dispara, el contenido se fuerza visible igual. */
@media (prefers-reduced-motion: reduce) {
  .js .reveal { opacity: 1; transform: none; transition: none; }
  html { scroll-behavior: auto; }
  .btn { transition: none; }
}

/* =========================================================================
   Additions — CRO optimization pass
   ========================================================================= */

/* Accessibility helpers */
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }
.skip-link { position: absolute; left: 8px; top: -60px; z-index: 200; background: var(--color-dark-blue); color: #fff; padding: 10px 16px; border-radius: var(--radius-sm); transition: top var(--dur-base) var(--ease-standard); }
.skip-link:focus { top: 8px; }

/* Focus-visible states (keyboard/touch) — solid outline works in forced-colors mode.
   --focus-radius deja que cada tipo de elemento use SU radio real: los .btn son
   píldoras (--radius-full) y no --radius-sm, si no el contorno queda desalineado
   del borde redondeado del botón (se ve como si se "despegara" un filo al tocar). */
a:focus-visible, button:focus-visible, .btn:focus-visible, .faq-q:focus-visible, .disc-q:focus-visible {
  outline: 2px solid var(--color-blue); outline-offset: 2px;
  box-shadow: 0 0 0 4px rgba(0,60,103,0.35); border-radius: var(--focus-radius, var(--radius-sm));
}
.btn:focus-visible { --focus-radius: var(--radius-full); }
.on-dark a:focus-visible, .on-dark .btn:focus-visible, .nav a:focus-visible, .nav button:focus-visible, .footer a:focus-visible {
  outline-color: #fff; box-shadow: 0 0 0 4px rgba(255,255,255,0.4);
}

/* Mobile nav menu */
.mobile-menu { position: absolute; top: var(--nav-h); left: 0; right: 0; max-height: calc(100vh - var(--nav-h)); overflow-y: auto; background: var(--color-dark-blue); border-top: 1px solid rgba(255,255,255,0.12); padding: 8px var(--gutter) calc(18px + env(safe-area-inset-bottom)); display: flex; flex-direction: column; box-shadow: var(--shadow-lg); }
.mobile-menu[hidden] { display: none; }   /* el atributo hidden debe ganarle a display:flex */
.mobile-menu a { color: rgba(255,255,255,0.86); text-decoration: none; padding: 14px 0; border-bottom: 1px solid rgba(255,255,255,0.08); font-size: 1rem; min-height: 44px; display: flex; align-items: center; }
.mobile-menu a:last-child { border-bottom: 0; }
.mobile-menu a:hover { color: #fff; }
@media (min-width: 900px){ .mobile-menu { display: none !important; } }
/* En phones ocultamos el CTA largo del header (queda logo + burger); el CTA
   principal está en el hero y en la barra fija inferior. En tablet 561–899 se muestra. */
@media (max-width: 899px){
  .nav-cta-btn { font-size: 0.82rem; padding: 0.6em 1em; }
}
@media (max-width: 560px){
  .nav-cta-btn { display: none; }
}

/* Hero micro + note */
.hero-micro { margin-top: 16px; display: flex; align-items: center; gap: 8px; font-size: 0.92rem; font-weight: 600; color: var(--color-blue); letter-spacing: 0.01em; }
.micro { font-size: 0.9rem; color: #4A4A4B; line-height: 1.5; }

/* Trust bar */
.trustbar { background: var(--color-white); border-block: 1px solid var(--color-grey); }
.trustbar-grid { display: grid; grid-template-columns: 1fr; gap: clamp(20px, 3vw, 32px); padding-block: clamp(24px, 3vw, 34px); }
@media (min-width: 760px){ .trustbar-grid { grid-template-columns: repeat(3, 1fr); } }
/* Tamaño fijo en todos los anchos (antes solo estaba arreglado en mobile):
   con align-items:stretch + svg height:100%, el ícono se agranda o achica
   según cuántas líneas ocupe la descripción de CADA item — en desktop/tablet
   (3 columnas) también puede pasar según el ancho real de cada columna, no
   solo en mobile. Tamaño fijo, desacoplado de cuánto texto haya. */
.trust-item { display: flex; flex-direction: row; align-items: flex-start; gap: 14px; }
.trust-ic { flex: none; color: var(--color-blue); }
.trust-ic svg { display: block; width: 32px; height: 32px; }
.trust-text { display: flex; flex-direction: column; gap: 3px; justify-content: center; }
.trust-item .k { font-family: var(--font-display); font-weight: 400; font-size: 1.02rem; color: var(--color-dark-blue); line-height: 1.2; }
.trust-item .d { font-size: 0.875rem; color: #4A4A4B; line-height: 1.35; }

/* Roadmap aclaración */
.ramp-note { margin-top: 26px; font-size: 0.82rem; line-height: 1.55; color: var(--fg-secondary); max-width: 78ch; }

/* Payment options (3) */
.pay-options { display: grid; gap: clamp(14px, 2vw, 20px); margin: clamp(24px, 3vw, 34px) 0 20px; }
@media (min-width: 720px){ .pay-options { grid-template-columns: repeat(3, 1fr); } }
.pay-opt { background: var(--bg-elevated); border: 1px solid var(--color-grey); border-radius: var(--radius-sm); padding: 18px 20px; }
.pay-h { font-family: var(--font-display); font-weight: 500; font-size: 1.02rem; color: var(--color-dark-blue); margin-bottom: 6px; }
.pay-opt p { font-size: 0.9rem; line-height: 1.5; color: #4A4A4B; }
.pay-hosting { font-size: 0.85rem; color: var(--fg-secondary); margin-top: 4px; }

/* Disclosure (accordion) — reuses FAQ interaction */
.disc-list { border-top: 1px solid var(--color-silver); }
.disc-item { border-bottom: 1px solid var(--color-silver); }
.disc-q { width: 100%; background: none; border: 0; text-align: left; display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 16px 0; font-family: var(--font-ui); font-weight: 500; font-size: 0.92rem; color: var(--color-dark-blue); }
.disc-q .pm { flex: none; width: 20px; height: 20px; position: relative; }
.disc-q .pm::before, .disc-q .pm::after { content: ""; position: absolute; background: var(--color-blue); border-radius: 2px; }
.disc-q .pm::before { top: 50%; left: 2px; right: 2px; height: 1.5px; transform: translateY(-50%); }
.disc-q .pm::after { left: 50%; top: 2px; bottom: 2px; width: 1.5px; transform: translateX(-50%); transition: opacity var(--dur-base); }
.disc-item.open .disc-q .pm::after { opacity: 0; }
.disc-a { overflow: hidden; max-height: 0; transition: max-height var(--dur-slow) var(--ease-standard); }
.disc-a .inner { padding: 0 0 20px; color: #4A4A4B; line-height: 1.6; font-size: 0.92rem; }
.disc-a .inner p { margin-bottom: 0; }

.faq-link { display: inline-flex; align-items: center; min-height: 44px; margin-top: 6px; color: var(--color-blue); font-weight: 500; }

.price-total-mini { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; flex-wrap: wrap; padding: 16px 0; border-bottom: 1px solid var(--color-silver); }
.price-total-mini .l { font-size: 0.9rem; color: var(--color-dark-grey); }
.price-total-mini .v { font-family: var(--font-display); font-weight: 400; font-size: clamp(1.2rem, 2.4vw, 1.5rem); color: var(--color-dark-blue); }


/* Reduce section-head bottom margin slightly (tighter rhythm) */
.section-head { margin-bottom: clamp(28px, 4vw, 48px); }

/* forced-colors: keep focus visible */
@media (forced-colors: active){
  a:focus-visible, button:focus-visible, .btn:focus-visible { outline: 2px solid CanvasText; }
}

/* ---- Tecnología — grid editorial (título + foto + descripción) ---------- */
.tech { background: var(--gradient-01); }
.tech-cols { display: grid; grid-template-columns: 1fr; gap: clamp(28px, 3vw, 36px); }
@media (min-width: 560px){ .tech-cols { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 880px){ .tech-cols { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 1120px){ .tech-cols { grid-template-columns: repeat(5, 1fr); } }
.tech-col { display: flex; flex-direction: column; }
.tech-title { font-family: var(--font-display); font-weight: 300; font-size: clamp(1.3rem, 2vw, 1.55rem); color: var(--color-dark-grey); line-height: 1.12; letter-spacing: -0.01em; margin-bottom: 16px; }
.tech-photo { border-radius: var(--radius-sm); overflow: hidden; aspect-ratio: 1 / 1; background: var(--gradient-06); margin-bottom: 16px; }
.tech-photo img { width: 100%; height: 100%; object-fit: cover; display: block; }
.tech-desc { font-size: 0.9rem; line-height: 1.58; color: #4A4A4B; }
/* mobile: las 5 tarjetas en galería horizontal */
@media (max-width: 559px){
  .tech-cols { display: flex; overflow-x: auto; gap: 14px; scroll-snap-type: x proximity; scrollbar-width: none; padding-bottom: 8px; }
  .tech-cols::-webkit-scrollbar { display: none; }
  .tech-col { flex: 0 0 80%; scroll-snap-align: start; }
  .tech-title { min-height: 2.4em; }
}

/* ---- Flota — cabecera + tarjetas de aviones ---------------------------- */
/* ---- Modalidades — foto arriba de cada tarjeta (edge-to-edge) ----------- */
.mod-card { overflow: hidden; }
.mod-photo { margin: calc(-1 * clamp(24px, 3vw, 36px)); margin-bottom: clamp(18px, 2.5vw, 26px); aspect-ratio: 4 / 3; overflow: hidden; background: var(--color-silver); }
.mod-photo img { width: 100%; height: 100%; object-fit: cover; object-position: center 45%; display: block; }

.fleet2-head { max-width: 620px; margin-bottom: clamp(34px, 5vw, 54px); }
.fleet2-grid { display: flex; overflow-x: auto; gap: 16px; scroll-snap-type: x proximity; scrollbar-width: none; padding-bottom: 4px; }
.fleet2-grid::-webkit-scrollbar { display: none; }
.fleet2-card { flex: 0 0 74%; scroll-snap-align: start; }
@media (min-width: 560px){ .fleet2-grid { display: grid; grid-template-columns: repeat(2, 1fr); overflow: visible; } .fleet2-card { flex: none; } }
@media (min-width: 960px){ .fleet2-grid { grid-template-columns: repeat(4, 1fr); gap: clamp(20px, 2.5vw, 32px); } }
/* Perú: sin el Tecnam quedan 3 aviones. Si la grilla siguiera fija en 2 o 4
   columnas, la última fila quedaría con un hueco vacío (se notaría que falta
   uno). El JS le agrega esta clase para que reacomode a 3 columnas parejas
   —fila completa, sin huecos— en vez de dejarlo en el patrón de 4. */
@media (min-width: 560px){ .fleet2-grid.fleet2-grid--3 { grid-template-columns: repeat(3, 1fr); } }

/* ---- Un gesto = una tarjeta --------------------------------------------
   scroll-snap-stop: always impide que un swipe fuerte saltee tarjetas: el
   scroll se detiene sí o sí en el siguiente anclaje. Conserva el momentum
   nativo del navegador, así que el gesto sigue siendo ágil (no lo frena). */
.story, .pcard, .fleet2-card, .tech-col, .sims-slide { scroll-snap-stop: always; }

/* ---- Mobile: carruseles a sangre ---------------------------------------
   El contenedor se extiende hasta el borde de la pantalla (margen negativo)
   y recupera el margen por dentro (padding), así la primera tarjeta sigue
   alineada al texto pero las que asoman se cortan en el borde del viewport.
   scroll-padding mantiene el snap alineado al margen de texto. */
@media (max-width: 899px){
  .stories-grid, .pilots-cards, .sims-viewer {
    margin-inline: calc(-1 * var(--gutter));
    padding-inline: var(--gutter);
    scroll-padding-inline: var(--gutter);
  }
}
@media (max-width: 559px){
  .fleet2-grid, .tech-cols {
    margin-inline: calc(-1 * var(--gutter));
    padding-inline: var(--gutter);
    scroll-padding-inline: var(--gutter);
  }
}
.fleet2-photo { aspect-ratio: 16 / 10; display: grid; place-items: center; margin-bottom: 14px; padding: 6px; }
.fleet2-photo img { max-width: 100%; max-height: 100%; width: auto; height: auto; object-fit: contain; }
.fleet2-meta { display: flex; align-items: baseline; gap: 10px; border-top: 1px solid var(--color-grey); padding-top: 14px; }
.fleet2-name { font-family: var(--font-display); font-weight: 400; font-size: clamp(1.05rem, 1.8vw, 1.25rem); color: var(--color-dark-blue); line-height: 1.1; }
.fleet2-specs { margin-top: 12px; display: flex; flex-direction: column; gap: 5px; }
.fleet2-specs li { font-size: 0.88rem; color: #4A4A4B; line-height: 1.4; }

/* ---- Hero: colores de texto sobre el video (al final para ganar a .on-dark) ---- */
.hero .lead { color: rgba(255,255,255,0.92); max-width: 50ch; }
.hero .eyebrow { color: #AECBDE; }
.hero .eyebrow::before { background: #AECBDE; }
.hero .hl-mute { color: #C6D5E0; }
.hero .hero-micro { color: #CBDCE9; }

/* ---- Propuestas de valor extranjero (visa · hospedaje · recepción) ------
   Grilla de 3 con una zona de imagen arriba. Hoy lleva un ícono centrado;
   para pasar a foto, reemplazar el <svg> por <img> dentro de .vp-media. */
.vp-grid { display: grid; gap: clamp(20px, 3vw, 32px); grid-template-columns: 1fr; }
/* Un solo salto de 1 a 3 columnas (no 2): con 3 tarjetas, una etapa intermedia
   de 2 columnas deja la 3ra sola con medio espacio vacío al lado (se veía
   justo en 768px). Mismo criterio que .trustbar-grid, que también tiene 3 items. */
@media (min-width: 700px){ .vp-grid { grid-template-columns: repeat(3, 1fr); } }
.vp-item { display: flex; flex-direction: column; }
.vp-item .h3 { margin-bottom: 8px; }
.vp-media {
  aspect-ratio: 16 / 10; border-radius: var(--radius-md); overflow: hidden;
  background: var(--gradient-05); border: 1px solid rgba(127,168,200,0.18);
  display: grid; place-items: center; margin-bottom: clamp(16px, 2vw, 20px);
}
.vp-media svg { width: 40%; max-width: 80px; height: auto; color: #fff; opacity: 0.95; }
.vp-media img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* ---- Banda de banderas: separador entre la portada y las credenciales ----
   Franja azul de marca con las banderas desplazándose. Loop sin costura: el
   track lleva los items duplicados (x2) y la animación desplaza -50% (una
   tanda exacta). Máscara para el fundido en los bordes. */
.flagband { background: var(--color-dark-blue); border-top: 1px solid rgba(255,255,255,0.10); }
.marquee { position: relative; overflow: hidden; padding-block: 15px; -webkit-mask-image: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent); mask-image: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent); }
.marquee-track { display: flex; gap: 38px; width: max-content; animation: scrollx 40s linear infinite; }
.flagchip { display: inline-flex; align-items: center; gap: 11px; flex: none; }
.flagchip .flag { width: 28px; height: 20px; border-radius: 2px; flex: none; object-fit: cover; box-shadow: inset 0 0 0 1px rgba(255,255,255,0.18); background: rgba(255,255,255,0.04); display: block; }
.flagchip span { font-size: 12px; font-weight: 500; letter-spacing: 0.1em; text-transform: uppercase; color: rgba(255,255,255,0.66); }
@keyframes scrollx { to { transform: translateX(-50%); } }
@media (prefers-reduced-motion: reduce){ .marquee-track { animation: none; } }

/* ---- Inversión: alinear el "Valor total" al pie de ambas tarjetas ---------
   Las dos licencias tienen distinta cantidad de ítems; con la card en columna y
   margin-top:auto en el precio, el "Valor total" queda a la misma altura en ambas. */
.pricing .cards-2 .card { display: flex; flex-direction: column; }
.pricing .cards-2 .price-total { margin-top: auto; }

/* ---- "Pensado para vos": cada foto + su texto como una card cohesiva -------
   En mobile no se distinguía que el texto de abajo pertenece a su foto; las
   envolvemos en una card (fondo sutil + borde + radio), con la foto arriba
   edge-to-edge y el texto adentro. Mantiene el estilo oscuro de la sección. */
.vp-item { background: rgba(255,255,255,0.05); border: 1px solid rgba(255,255,255,0.12); border-radius: var(--radius-md); overflow: hidden; }
.vp-media { border-radius: 0; border: 0; border-bottom: 1px solid rgba(255,255,255,0.08); margin-bottom: 0; }
.vp-item .h3 { margin-top: clamp(16px, 2.4vw, 20px); padding-inline: clamp(16px, 2.4vw, 20px); }
.vp-item .body { padding: 0 clamp(16px, 2.4vw, 20px) clamp(18px, 2.4vw, 22px); }