/* ==========================================================================
   Crew91 — portada cinematográfica
   --------------------------------------------------------------------------
   Cada escena existe dos veces:

   · Sin la clase .motion en <html> (sin JavaScript, con "reducir movimiento"
     o para quien lee el código) es una sección normal, apilada y legible.
   · Con .motion, la escena se alarga (--alto) y su .stage queda fija en
     pantalla mientras assets/js/escenas.js mueve las capas según el scroll.

   Todo lo que se anima son transformaciones y opacidades: nada que obligue
   a recalcular el diseño de la página en cada fotograma.
   ========================================================================== */

.home main { overflow-x: clip; }

.scene { position: relative; }
.stage { position: relative; }
.capa { position: absolute; inset: 0; }
.capa picture, .capa img { width: 100%; height: 100%; object-fit: cover; }

.motion .scene { height: var(--alto, 300vh); }
/* Capas en la tarjeta gráfica sólo para la escena que está en pantalla:
   con todas a la vez, un portátil modesto se queda sin memoria de vídeo. */
.motion .escena-cerca [data-anim] { will-change: transform, opacity; }
.motion .stage {
  position: sticky;
  top: 0;
  height: 100vh;
  overflow: hidden;
}

/* Texto de una escena que se revela por umbrales: lo enciende escenas.js. */
.motion .ent {
  opacity: 0;
  transform: translate3d(0, 26px, 0);
  transition: opacity .9s var(--ease), transform 1.1s var(--ease);
}
.motion .ent.is-on { opacity: 1; transform: none; }

.motion [data-revelar] {
  opacity: 0;
  transform: translate3d(0, 34px, 0);
  transition: opacity 1s var(--ease), transform 1.2s var(--ease);
}
.motion [data-revelar].is-in { opacity: 1; transform: none; }

.nota-ilustrativa {
  font-family: var(--mono);
  font-size: .68rem;
  letter-spacing: .06em;
  color: var(--faint);
}

/* ---------- transiciones de luz entre escenas ---------- */
.transicion { height: 34vh; display: flex; flex-direction: column; }
.transicion i { flex: 1; }
.transicion--noche-dia { background: linear-gradient(var(--night), #1c2229 22%, #8e9298 62%, var(--paper)); }
.transicion--dia-noche { background: linear-gradient(var(--paper), #8e9298 38%, #1c2229 78%, var(--night)); }

/* ===================================================================
   APERTURA — hero y la red
   =================================================================== */
.scene-apertura { --alto: 470vh; background: var(--night); color: var(--ink); }

.ap-cielo {
  z-index: 1;
  /* más alto que la pantalla: al bajar durante el despegue no deja ver su borde */
  top: -18vh;
  transform-origin: 60% 60%;
  /* mientras se decodifica la foto, el mismo cielo en degradado */
  background: linear-gradient(180deg, #a3c0de 0%, #c9d9ea 34%, #e9edf1 56%, #f4ebe0 62%, #e9edf2 100%);
}
.ap-cielo img { object-position: 50% 58%; }

/* Profundidad de campo: el foco está en el jet. El cielo y las nubes de
   fondo se desenfocan un poco, las nubes cercanas mucho, y el jet pierde el
   filo de recorte y toma el aire del ambiente. Con el ratón, cada plano se
   mueve a su ritmo (--mx, --my los pone escenas.js). */
.ap-cielo picture {
  filter: blur(2.2px);
  transform: scale(1.04);
  translate: calc(var(--mx, 0) * -14px) calc(var(--my, 0) * -9px);
}
.ap-nubes--lejos picture { filter: blur(3.5px); translate: calc(var(--mx, 0) * -8px) calc(var(--my, 0) * -5px); }
.ap-nubes--cerca picture { filter: blur(8px); }
.ap-avion picture { display: block; translate: calc(var(--mx, 0) * 18px) calc(var(--my, 0) * 11px); }
.ap-avion img {
  filter: blur(.45px) saturate(.9) contrast(.93) brightness(1.04)
          drop-shadow(0 36px 46px rgba(70, 95, 130, .16));
}
.hero-inner { translate: calc(var(--mx, 0) * -5px) calc(var(--my, 0) * -3px); }
.ap-cielo picture, .ap-nubes--lejos picture, .ap-avion picture, .hero-inner {
  transition: translate .9s cubic-bezier(.2, .7, .1, 1);
}

.ap-altura {
  z-index: 2;
  top: -220%;
  bottom: auto;
  height: 220%;
  background: linear-gradient(180deg,
    #030509 0%, #05080e 26%, rgba(10, 18, 32, .86) 46%, rgba(23, 41, 68, .45) 70%, rgba(60, 90, 130, 0) 100%);
  opacity: 0;
}
/* Oscurece todo el cielo a la vez: sin esto, el horizonte claro quedaba como
   una línea recta bajo la noche que baja. */
.ap-noche { z-index: 2; background: #070a10; opacity: 0; }
.ap-estrellas {
  z-index: 2;
  opacity: 0;
  background-image:
    radial-gradient(1px 1px at 12% 18%, rgba(255, 255, 255, .8), transparent 60%),
    radial-gradient(1px 1px at 32% 8%, rgba(255, 255, 255, .6), transparent 60%),
    radial-gradient(1.2px 1.2px at 48% 26%, rgba(255, 255, 255, .7), transparent 60%),
    radial-gradient(1px 1px at 66% 12%, rgba(255, 255, 255, .55), transparent 60%),
    radial-gradient(1.4px 1.4px at 82% 30%, rgba(255, 255, 255, .7), transparent 60%),
    radial-gradient(1px 1px at 91% 7%, rgba(255, 255, 255, .5), transparent 60%),
    radial-gradient(1px 1px at 22% 38%, rgba(255, 255, 255, .4), transparent 60%),
    radial-gradient(1px 1px at 58% 44%, rgba(255, 255, 255, .35), transparent 60%);
  background-size: 640px 520px;
}

.ap-nubes { pointer-events: none; }
/* Las capas de nubes se funden por arriba y por abajo: al moverse nunca
   enseñan el borde recto de la imagen, sea cual sea la foto. */
.ap-nubes picture {
  display: block;
  height: 100%;
  -webkit-mask-image: linear-gradient(180deg, transparent 0%, #000 28%, #000 62%, transparent 100%);
  mask-image: linear-gradient(180deg, transparent 0%, #000 28%, #000 62%, transparent 100%);
}
.ap-nubes img { object-fit: cover; }
.ap-nubes--lejos { z-index: 3; top: auto; height: 46%; bottom: 14%; opacity: .5; }
.ap-nubes--cerca { z-index: 6; top: auto; height: 70%; bottom: -46%; opacity: 0; }
.ap-nubes--cerca img { transform: scaleX(-1); }

.ap-avion {
  position: absolute;
  z-index: 4;
  left: 50%;
  top: 62%;
  /* también limitado por la altura: en un portátil bajo no sube al titular */
  width: min(84vw, 1400px, 132vh);
  translate: -50% -50%;
  transform-origin: 50% 50%;
}
.ap-avion img { width: 100%; height: auto; }
.motion .ap-avion-flota { animation: flotar 7s ease-in-out infinite alternate; }
@keyframes flotar {
  from { transform: translate3d(0, -.5%, 0) rotate(-.25deg); }
  to   { transform: translate3d(0, .7%, 0) rotate(.2deg); }
}

/* --- hero --- */
.hero {
  position: relative;
  z-index: 5;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  padding: calc(var(--header-space) + 5vh) 0 clamp(26px, 5vh, 48px);
}
.hero-inner {
  flex: 1;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  grid-template-rows: auto 1fr auto;
  grid-template-areas: "titulo titulo" ". ." "lead cta";
  column-gap: 40px;
}
.hero-h1 { grid-area: titulo; display: flex; flex-direction: column; align-items: center; text-align: center; gap: 2.2vh; }
.hero-kicker {
  font-family: var(--mono);
  font-size: .76rem;
  font-weight: 450;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--ink-2);
}
.hero-display {
  font-size: clamp(3.1rem, min(9.6vw, 15.5vh), 10.4rem);
  font-weight: 500;
  letter-spacing: -.058em;
  line-height: .9;
  max-width: 11.5ch;
  color: var(--ink);
}
/* El texto de abajo va sobre cristal esmerilado: lo que pase por detrás
   (el ala del jet, una nube) se desenfoca y la letra se lee siempre. */
.hero-inner > .hero-lead {
  grid-area: lead;
  align-self: end;
  max-width: 46ch;
  padding: 18px 22px;
  border-radius: 22px;
  font-size: clamp(.98rem, 1.15vw, 1.06rem);
  line-height: 1.55;
  color: var(--ink);
  background: linear-gradient(135deg, rgba(255, 255, 255, .62), rgba(255, 255, 255, .34));
  -webkit-backdrop-filter: blur(22px) saturate(1.7);
  backdrop-filter: blur(22px) saturate(1.7);
  border: 1px solid rgba(255, 255, 255, .75);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .8), 0 18px 40px rgba(40, 60, 90, .12);
}
.hero-cta { display: flex; flex-wrap: wrap; gap: 10px; }
.hero-inner > .hero-cta { grid-area: cta; align-self: end; justify-content: flex-end; }

.hero-scroll {
  position: absolute;
  left: 50%; bottom: clamp(18px, 3.4vh, 34px);
  translate: -50% 0;
  display: flex; flex-direction: column; align-items: center; gap: 10px;
  font-family: var(--mono); font-size: .64rem; letter-spacing: .2em; text-transform: uppercase;
  color: var(--ink-2);
}
.hero-scroll i {
  width: 1px; height: 38px;
  background: linear-gradient(var(--ink-2), transparent);
  transform-origin: top;
  animation: gota 2.4s var(--ease) infinite;
}
@keyframes gota {
  0% { transform: scaleY(0); opacity: 1; }
  60% { transform: scaleY(1); opacity: 1; }
  100% { transform: scaleY(1); opacity: 0; }
}

/* --- la red --- */
.red {
  position: relative;
  z-index: 7;
  background: var(--night);
  color: var(--night-text);
  min-height: 100vh;
  overflow: hidden;
}
.red-mapa { position: absolute; inset: 0; transform-origin: 50% 70%; }
.red::before {
  content: "";
  position: absolute; inset: 0;
  z-index: 1;
  background: linear-gradient(90deg, rgba(6, 8, 11, .9) 0%, rgba(6, 8, 11, .62) 26%, rgba(6, 8, 11, 0) 52%);
  pointer-events: none;
}
.mapa { width: 100%; height: 100%; display: block; overflow: visible; }
.mapa .tierra { fill: none; stroke: rgba(169, 201, 232, .26); stroke-linecap: round; }
.mapa .nodo { opacity: 0; transition: opacity .8s var(--ease); }
.mapa .nodo.is-on { opacity: 1; }
.mapa .nodo--piloto circle { fill: #f4f7fa; }
.mapa .nodo--aeronave circle { fill: var(--ice); }
.mapa .nodo--propietario circle { fill: none; stroke: #c7cdd4; stroke-width: 1.4; }
.mapa .nodo--aviso circle.n { fill: var(--amber); }
.mapa .nodo--aviso circle.pulso { fill: none; stroke: var(--amber); stroke-width: 1; transform-box: fill-box; transform-origin: center; }
.mapa .nodo--aviso.is-on circle.pulso { animation: pulso 2.6s var(--ease) infinite; }
@keyframes pulso {
  0% { transform: scale(.6); opacity: .9; }
  100% { transform: scale(3.4); opacity: 0; }
}
.mapa .arco { fill: none; stroke: url(#arco-grad); stroke-width: 1.3; stroke-linecap: round; stroke-dasharray: 1 1; stroke-dashoffset: 1; }
.mapa .viajero { fill: #fff; opacity: 0; transition: opacity .6s; }
.mapa .viajero.is-on { opacity: 1; }
.mapa .ciudad { fill: rgba(242, 244, 246, .55); font-family: var(--mono); font-size: 7.5px; letter-spacing: .08em; opacity: 0; transition: opacity .8s; }
.mapa .ciudad.is-on { opacity: 1; }

.red-copy {
  position: relative;
  z-index: 2;
  min-height: 100vh;
  display: grid;
  grid-template-columns: minmax(0, 470px);
  grid-template-rows: auto 1fr auto auto;
  row-gap: 3vh;
  padding: calc(var(--header-space) + 5vh) 0 clamp(24px, 4vh, 40px);
}
.red-texto { grid-row: 1; }
.red .eyebrow { color: var(--night-muted); }
.red h2 { margin-top: 2.2vh; font-size: clamp(2.1rem, min(4.2vw, 7.4vh), 4.1rem); }
.red-p { margin-top: 2.2vh; color: var(--night-muted); font-size: clamp(.98rem, 1.2vw, 1.1rem); max-width: 42ch; }
.red-leyenda { margin-top: 3vh; display: grid; gap: 10px; }
.red-leyenda li { display: flex; align-items: center; gap: 12px; font-size: .9rem; color: rgba(242, 244, 246, .85); }
.red-leyenda i { width: 9px; height: 9px; border-radius: 50%; flex: none; }
.red-leyenda [data-tipo="piloto"] i { background: #f4f7fa; }
.red-leyenda [data-tipo="aeronave"] i { background: var(--ice); }
.red-leyenda [data-tipo="propietario"] i { border: 1.4px solid #c7cdd4; }
.red-leyenda [data-tipo="aviso"] i { background: var(--amber); box-shadow: 0 0 0 4px rgba(242, 178, 76, .18); }

.cifras { grid-row: 3; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 3vh 32px; }
.cifras div { display: flex; flex-direction: column-reverse; gap: 4px; border-top: 1px solid var(--night-line); padding-top: 14px; }
.cifras dd { font-family: var(--sans); font-weight: 500; font-size: clamp(1.9rem, min(3.4vw, 5.6vh), 3.2rem); letter-spacing: -.04em; line-height: 1; font-variant-numeric: tabular-nums; }
.cifras dt { font-size: .8rem; color: var(--night-muted); }
.red .nota-ilustrativa { grid-row: 4; color: rgba(154, 163, 173, .75); max-width: 60ch; }

.red-punto {
  position: absolute;
  z-index: 8;
  left: 0; top: 0;
  width: 10px; height: 10px;
  margin: -5px 0 0 -5px;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 0 0 3px rgba(255, 255, 255, .18), 0 0 24px 6px rgba(169, 201, 232, .6);
  opacity: 0;
  pointer-events: none;
}

/* --- apertura con movimiento: las dos secciones comparten escenario --- */
.motion .scene-apertura .hero { position: absolute; inset: 0; min-height: 0; }
.motion .scene-apertura .red { position: absolute; inset: 0; min-height: 0; background: transparent; opacity: 0; }
.motion .scene-apertura .red-copy { min-height: 0; height: 100%; }
.motion .red-mapa { opacity: 0; }
.motion .scene-apertura .red { perspective: 1600px; }
.motion .scene-split .split-par { perspective: 1800px; }

/* --- apertura sin movimiento: hero a pantalla completa y la red debajo --- */
html:not(.motion) .scene-apertura .stage { background: var(--night); }
html:not(.motion) .ap-cielo,
html:not(.motion) .ap-nubes--lejos { height: 100vh; bottom: auto; }
html:not(.motion) .ap-cielo { top: 0; }
html:not(.motion) .ap-nubes--lejos { top: 42vh; height: 46vh; }
html:not(.motion) .ap-altura,
html:not(.motion) .ap-noche,
html:not(.motion) .ap-estrellas,
html:not(.motion) .ap-nubes--cerca,
html:not(.motion) .red-punto { display: none; }
html:not(.motion) .ap-avion { top: 60vh; }
html:not(.motion) .hero { min-height: 100vh; }
html:not(.motion) .red { padding-bottom: 0; }
html:not(.motion) .red-mapa { position: relative; height: 70vh; order: 2; }
html:not(.motion) .red { display: flex; flex-direction: column-reverse; }
html:not(.motion) .red-copy { min-height: 0; }
html:not(.motion) .mapa .nodo,
html:not(.motion) .mapa .ciudad,
html:not(.motion) .mapa .viajero { opacity: 1; }
html:not(.motion) .mapa .arco { stroke-dashoffset: 0; }

/* ===================================================================
   QUIÉN — dos lados que se encuentran
   =================================================================== */
.quien { background: var(--paper); }
.scene-split { --alto: 250vh; }
.split-cabeza { text-align: center; padding-top: calc(var(--header-space) + 4vh); position: relative; z-index: 3; }
.split-cabeza .eyebrow { justify-content: center; }
.split-cabeza h2 { margin-top: 2vh; font-size: clamp(2.4rem, min(6vw, 10vh), 6.2rem); letter-spacing: -.05em; }
.split-p { max-width: 60ch; margin: 2.2vh auto 0; color: var(--muted); font-size: clamp(.98rem, 1.15vw, 1.1rem); }

.split-par {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: stretch;
  gap: clamp(16px, 2vw, 28px);
  margin: 6vh auto 10vh;
  width: min(100% - var(--gutter) * 2, 980px);
}
.split-lado { position: relative; flex: 1; aspect-ratio: 4 / 5; max-width: 440px; }
.split-lado .marco { position: absolute; inset: 0; border-radius: var(--r-lg); overflow: hidden; background: var(--paper-3); box-shadow: var(--shadow); }
.split-lado .marco picture, .split-lado .marco img { width: 100%; height: 100%; object-fit: cover; }
.split-lado .marco img { transform-origin: 50% 50%; }
.split-lado figcaption {
  position: absolute; left: 0; right: 0; bottom: 0;
  padding: 70px 24px 22px;
  border-radius: 0 0 var(--r-lg) var(--r-lg);
  background: linear-gradient(transparent, rgba(6, 8, 11, .62));
  color: #fff;
  display: grid; gap: 2px;
}
.split-lado figcaption strong { font-size: clamp(1.4rem, 2.2vw, 2rem); font-weight: 500; letter-spacing: -.03em; }
.split-lado figcaption span:last-child { font-size: .92rem; color: rgba(255, 255, 255, .82); }
.split-num { font-family: var(--mono); font-size: .68rem; letter-spacing: .16em; opacity: .75; }

.split-nodo { position: absolute; left: 50%; top: 50%; width: 0; height: 0; z-index: 4; }
.split-circulo {
  position: absolute; left: 0; top: 0;
  width: 64px; height: 64px; margin: -32px 0 0 -32px;
  border-radius: 50%;
  display: grid; place-items: center;
  background: rgba(255, 255, 255, .78);
  -webkit-backdrop-filter: blur(14px) saturate(1.5);
  backdrop-filter: blur(14px) saturate(1.5);
  border: 1px solid rgba(255, 255, 255, .9);
  box-shadow: 0 10px 30px rgba(11, 13, 16, .14);
  color: var(--ink);
}
.split-circulo svg { width: 26px; height: 26px; }
.split-linea { display: none; }
.split-etiqueta {
  position: absolute; top: 46px;
  font-family: var(--mono); font-size: .66rem; letter-spacing: .18em; text-transform: uppercase;
  color: var(--ink-2);
  white-space: nowrap;
}
.split-etiqueta--a { left: 14px; }
.split-etiqueta--b { right: 14px; }

.motion .scene-split .split-par {
  position: absolute;
  left: 50%; bottom: 5vh;
  margin: 0;
  translate: -50% 0;
  height: min(54vh, 560px);
  width: auto;
}
.motion .scene-split .split-lado { flex: none; height: 100%; width: auto; max-width: none; }
.motion .split-circulo { transform: scale(0); }
.motion .split-etiqueta { opacity: 0; }

/* ===================================================================
   LADOS — propietarios y pilotos
   =================================================================== */
.lado {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.25fr);
  align-items: center;
  gap: clamp(28px, 5vw, 80px);
  width: min(100% - var(--gutter) * 2, var(--wrap));
  margin-inline: auto;
  padding: clamp(60px, 9vw, 120px) 0;
}
.lado--piloto { grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); }
.lado--piloto .lado-copy { order: 2; }
.lado-copy-in { max-width: 470px; }
.lado-copy h3 { margin-top: 2.2vh; font-size: clamp(2.2rem, min(4.4vw, 7.6vh), 4.2rem); letter-spacing: -.045em; line-height: 1; }
.lado-intro { margin-top: 2.2vh; font-size: clamp(1rem, 1.3vw, 1.18rem); color: var(--ink-2); max-width: 40ch; }

.lista-fina { margin: 3.4vh 0 4vh; border-top: 1px solid var(--line); }
.lista-fina li {
  position: relative;
  padding: 1.5vh 0 1.5vh 30px;
  border-bottom: 1px solid var(--line);
  color: var(--ink-2);
  font-size: .97rem;
  line-height: 1.45;
}
.lista-fina li::before {
  content: "";
  position: absolute; left: 2px; top: calc(1.5vh + .55em);
  width: 12px; height: 1px;
  background: var(--ink);
}

/* sin movimiento: las fichas a la vista, el avión en su sitio */
html:not(.motion) .scene-prop .stage,
html:not(.motion) .scene-pil .stage { display: grid; gap: 28px; }
html:not(.motion) .prop-avion { position: relative; width: 100%; }

.prop-pista { position: relative; }
.prop-avion { position: relative; }
.prop-avion picture, .prop-avion img { width: 100%; height: auto; }
.prop-sombra {
  position: absolute; left: 10%; right: 10%; bottom: -8%; height: 16%;
  background: radial-gradient(closest-side, rgba(11, 13, 16, .2), transparent);
  filter: blur(6px);
  z-index: -1;
}
.ancla {
  position: absolute;
  left: var(--x); top: var(--y);
  width: 14px; height: 14px; margin: -7px 0 0 -7px;
  border-radius: 50%;
  background: var(--ink);
  box-shadow: 0 0 0 4px rgba(255, 255, 255, .9), 0 2px 10px rgba(11, 13, 16, .3);
  opacity: 0;
  transform: scale(.4);
  transition: opacity .6s var(--ease), transform .6s var(--ease);
}
.ancla::after {
  content: "";
  position: absolute; inset: -9px;
  border-radius: 50%;
  border: 1px solid rgba(11, 13, 16, .4);
  opacity: 0;
}
.ancla.is-on { opacity: 1; transform: none; }
.ancla.is-on::after { animation: onda 2.4s var(--ease) infinite; }
@keyframes onda {
  0% { transform: scale(.6); opacity: .9; }
  100% { transform: scale(2.2); opacity: 0; }
}

/* --- ficha (aviso o perfil) --- */
.ficha {
  position: relative;
  width: min(390px, 100%);
  padding: 22px 24px 14px;
  border-radius: var(--r-lg);
  background: rgba(255, 255, 255, .8);
  -webkit-backdrop-filter: blur(22px) saturate(1.6);
  backdrop-filter: blur(22px) saturate(1.6);
  border: 1px solid rgba(255, 255, 255, .9);
  box-shadow: var(--shadow-lg);
}
.ficha-tag {
  display: inline-flex; align-items: center; gap: 8px;
  font-family: var(--mono); font-size: .64rem; letter-spacing: .16em; text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 10px;
}
.ficha-tag::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--signal); }
.ficha dl { display: grid; }
.dato {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: baseline;
  gap: 16px;
  padding: 11px 0;
  border-top: 1px solid var(--line-soft);
}
.dato dt { font-size: .84rem; color: var(--muted); }
.dato dd { font-size: .94rem; font-weight: 500; text-align: right; font-variant-numeric: tabular-nums; }
.dato dd small { display: block; font-size: .72rem; font-weight: 400; color: var(--faint); }
.dato--grande dd { font-size: 1.9rem; letter-spacing: -.04em; line-height: 1; }
.dato--vivo dd { display: inline-flex; align-items: center; gap: 8px; justify-content: flex-end; }

.motion .ficha .dato {
  opacity: .16;
  transform: translate3d(14px, 0, 0);
  transition: opacity .7s var(--ease), transform .9s var(--ease), background-color .6s;
}
.motion .ficha .dato.is-on { opacity: 1; transform: none; }

.ficha-id { display: flex; align-items: center; gap: 14px; padding: 4px 0 16px; }
.ficha-avatar {
  width: 52px; height: 52px; border-radius: 16px;
  display: grid; place-items: center;
  font-family: var(--mono); font-weight: 500;
  background: var(--ink); color: #fff;
}
.ficha-nombre { display: block; font-size: 1.15rem; font-weight: 600; letter-spacing: -.02em; }
.ficha-base { display: block; font-size: .84rem; color: var(--muted); }
.ficha-sello {
  margin-left: auto;
  display: inline-flex; align-items: center; gap: 6px;
  padding: 5px 10px;
  border-radius: var(--r-pill);
  background: var(--green-soft);
  color: var(--green);
  font-size: .7rem; font-weight: 600; letter-spacing: .05em; text-transform: uppercase;
}
.ficha-sello svg { width: 11px; height: 11px; }

/* --- foto del piloto --- */
.pil-foto { position: relative; border-radius: var(--r-lg); overflow: hidden; aspect-ratio: 4 / 5; background: var(--paper-3); box-shadow: var(--shadow); }
.pil-foto picture, .pil-foto img { width: 100%; height: 100%; object-fit: cover; }

/* --- lados con movimiento (escritorio) --- */
@media (min-width: 761px) {
  .motion .lado {
    display: grid;
    grid-template-columns: 1fr;
    width: 100%;
    padding: 0;
    gap: 0;
  }
  .motion .lado > * { grid-area: 1 / 1; }
  .motion .lado-copy {
    position: sticky;
    top: 0;
    z-index: 3;
    align-self: start;
    height: 100vh;
    width: min(46vw, 640px);
    display: flex;
    align-items: center;
    padding: var(--header-space) clamp(24px, 3vw, 48px) 4vh var(--gutter);
    pointer-events: none;
  }
  .motion .lado-copy-in { pointer-events: auto; }
  .motion .lado--propietario .lado-copy {
    background: linear-gradient(90deg, var(--paper) 62%, rgba(245, 244, 240, .82) 80%, rgba(245, 244, 240, 0));
  }
  .motion .lado--piloto .lado-copy {
    justify-self: end;
    padding-left: clamp(24px, 3vw, 48px);
    padding-right: var(--gutter);
  }
  .motion .lado--piloto .lado-copy-in { margin-left: auto; }

  .motion .scene-prop { --alto: 300vh; }
  .motion .scene-pil { --alto: 280vh; }

  .motion .prop-pista { position: absolute; left: 0; right: 0; top: 11vh; height: 40vh; }
  .motion .prop-avion { position: absolute; left: 33vw; top: 0; width: min(61vw, 1160px); }
  .motion .ficha--avion { position: absolute; right: var(--gutter); bottom: 6vh; }

  .motion .pil-foto {
    position: absolute;
    left: var(--gutter);
    top: 50%;
    height: min(82vh, 860px);
    aspect-ratio: 4 / 5;
    translate: 0 -50%;
  }
  .motion .pil-foto img { transform-origin: 50% 40%; }
  .motion .ficha--piloto {
    position: absolute;
    left: calc(var(--gutter) + min(82vh, 860px) * .8 - 110px);
    top: 50%;
    translate: 0 -50%;
  }
}

/* ===================================================================
   ENCAJE — requisitos frente a credenciales
   =================================================================== */
.scene-encaje {
  --alto: 300vh;
  background:
    radial-gradient(900px 500px at 50% 110%, rgba(185, 207, 227, .5), transparent 70%),
    var(--paper);
}
.encaje-cabeza { position: relative; z-index: 2; padding-top: calc(var(--header-space) + 3vh); display: grid; gap: 2vh; max-width: var(--wrap); }
.encaje-cabeza h2 { font-size: clamp(2rem, min(4.4vw, 7.6vh), 4.2rem); max-width: 16ch; }
.encaje-p { max-width: 60ch; color: var(--muted); font-size: clamp(.95rem, 1.1vw, 1.05rem); }

.encaje-tablero {
  position: relative;
  width: min(100% - var(--gutter) * 2, 1180px);
  margin: 6vh auto 0;
  display: grid;
  grid-template-columns: minmax(170px, 1fr) minmax(0, 2.4fr) minmax(170px, 1fr);
  grid-template-areas: "piloto filas avion" ". indice .";
  align-items: center;
  gap: 2vh 28px;
}
.encaje-lado {
  display: flex; align-items: center; gap: 14px;
  padding: 16px 18px;
  border-radius: var(--r);
  background: var(--white);
  border: 1px solid var(--line-soft);
  box-shadow: var(--shadow);
}
.encaje-lado--piloto { grid-area: piloto; }
.encaje-lado--avion { grid-area: avion; }
.encaje-lado small { display: block; font-family: var(--mono); font-size: .62rem; letter-spacing: .14em; text-transform: uppercase; color: var(--muted); }
.encaje-lado strong { display: block; font-size: .98rem; font-weight: 600; letter-spacing: -.01em; line-height: 1.3; }
.encaje-avatar {
  width: 46px; height: 46px; flex: none;
  border-radius: 14px; display: grid; place-items: center;
  background: var(--ink); color: #fff;
  font-family: var(--mono); font-size: .82rem;
}
.encaje-avatar--avion { background: var(--sky); color: var(--accent); }
.encaje-avatar svg { width: 22px; height: 22px; }

.encaje-filas { grid-area: filas; display: grid; gap: 4px; }
.encaje-filas li {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  align-items: center;
  gap: 14px;
  padding: 1.15vh 0;
  font-variant-numeric: tabular-nums;
}
.encaje-filas li::before {
  content: "";
  position: absolute; left: 0; right: 0; top: 50%;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--line-strong) 12%, var(--line-strong) 88%, transparent);
  transform-origin: center;
}
.ef-a, .ef-b { position: relative; z-index: 1; font-weight: 500; font-size: clamp(.9rem, 1.1vw, 1.02rem); }
.ef-a { justify-self: end; background: var(--paper); padding-left: 10px; }
.ef-b { justify-self: start; background: var(--paper); padding-right: 30px; }
.ef-b::after {
  content: "";
  position: absolute; right: 2px; top: 50%;
  width: 18px; height: 18px; margin-top: -9px;
  border-radius: 50%;
  background:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6L9 17l-5-5'/%3E%3C/svg%3E") center / 11px no-repeat,
    var(--green);
}
.ef-req {
  position: relative; z-index: 1;
  padding: 5px 12px;
  border-radius: var(--r-pill);
  background: var(--white);
  border: 1px solid var(--line-soft);
  font-family: var(--mono); font-size: .64rem; letter-spacing: .1em; text-transform: uppercase;
  color: var(--muted);
  white-space: nowrap;
}

.encaje-indice { grid-area: indice; justify-self: center; position: relative; width: 112px; height: 112px; }
.encaje-indice svg { width: 100%; height: 100%; transform: rotate(-90deg); }
.anillo-fondo { fill: none; stroke: var(--line); stroke-width: 3; }
.anillo { fill: none; stroke: var(--green); stroke-width: 3; stroke-linecap: round; stroke-dasharray: 326.7; stroke-dashoffset: 0; }
.encaje-cuenta { position: absolute; inset: 0; display: grid; place-content: center; text-align: center; }
.encaje-cuenta strong { font-size: 1.7rem; font-weight: 500; letter-spacing: -.04em; line-height: 1; font-variant-numeric: tabular-nums; }
.encaje-cuenta small { font-size: .62rem; color: var(--muted); max-width: 11ch; line-height: 1.25; margin-top: 4px; }

.encaje-lema {
  width: min(100% - var(--gutter) * 2, var(--wrap));
  margin: 5vh auto 0;
  display: flex; flex-wrap: wrap; justify-content: center; gap: .2em .55em;
  font-size: clamp(1.4rem, min(2.8vw, 4.8vh), 2.6rem);
  font-weight: 500;
  letter-spacing: -.035em;
}
.encaje-lema span:nth-child(2) { color: var(--muted); }
.encaje-lema span:nth-child(3) { color: var(--signal); }
.encaje-nota { text-align: center; margin-top: 1.4vh; padding-bottom: 8vh; }

.motion .scene-encaje .encaje-lema { position: absolute; left: 0; right: 0; bottom: 8vh; margin-top: 0; }
.motion .scene-encaje .encaje-nota { position: absolute; left: 0; right: 0; bottom: 4.6vh; padding: 0; }
.motion .encaje-filas li { opacity: .2; transition: opacity .6s var(--ease); }
.motion .encaje-filas li::before { transform: scaleX(0); transition: transform 1s var(--ease); }
.motion .encaje-filas li .ef-b::after { transform: scale(0); transition: transform .5s var(--ease) .35s; }
.motion .encaje-filas li.is-on { opacity: 1; }
.motion .encaje-filas li.is-on::before { transform: none; }
.motion .encaje-filas li.is-on .ef-b::after { transform: none; }
.motion .encaje-lema span { opacity: 0; transform: translateY(18px); transition: opacity .9s var(--ease), transform 1s var(--ease); }
.motion .encaje-lema span.is-on { opacity: 1; transform: none; }

/* ===================================================================
   CÓMO FUNCIONA — tres pasos en horizontal
   =================================================================== */
.scene-como { --alto: 380vh; background: var(--night); color: var(--night-text); }
.como-fondos { position: absolute; inset: 0; }
.como-fondo { position: absolute; inset: 0; }
.como-fondo picture, .como-fondo img { width: 100%; height: 100%; object-fit: cover; }
.como-velo {
  position: absolute; inset: 0;
  background:
    linear-gradient(90deg, rgba(6, 8, 11, .82) 0%, rgba(6, 8, 11, .55) 42%, rgba(6, 8, 11, .15) 75%),
    linear-gradient(0deg, rgba(6, 8, 11, .6), transparent 40%);
}
.como-cabeza { position: relative; z-index: 2; padding-top: calc(var(--header-space) + 3vh); }
.como-cabeza .eyebrow { color: rgba(242, 244, 246, .7); }
.como-cabeza h2 { margin-top: 1.6vh; font-size: clamp(1.8rem, min(3.4vw, 6vh), 3.3rem); max-width: 18ch; }

.como-pista { position: relative; z-index: 2; }
.como-paso {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  align-items: end;
  gap: 6vw;
  width: min(100% - var(--gutter) * 2, var(--wrap));
  margin: 0 auto;
  padding: 8vh 0;
}
.como-num {
  display: block;
  font-size: clamp(5rem, min(12vw, 20vh), 12rem);
  font-weight: 300;
  letter-spacing: -.06em;
  line-height: .8;
  color: transparent;
  -webkit-text-stroke: 1px rgba(242, 244, 246, .55);
}
.como-texto h3 { margin-top: 3vh; font-size: clamp(1.8rem, min(3vw, 5.4vh), 3rem); letter-spacing: -.04em; }
.como-texto p { margin-top: 1.8vh; color: rgba(242, 244, 246, .78); max-width: 46ch; font-size: clamp(.98rem, 1.15vw, 1.1rem); }

/* maquetas de interfaz */
.como-ui {
  align-self: center;
  justify-self: end;
  width: min(420px, 100%);
  padding: 22px;
  border-radius: var(--r-lg);
  background: rgba(20, 25, 31, .72);
  border: 1px solid rgba(255, 255, 255, .16);
  box-shadow: 0 30px 80px rgba(0, 0, 0, .35);
  display: grid; gap: 14px;
  font-size: .9rem;
}
.ui-buscador {
  display: flex; align-items: center; gap: 10px;
  height: 48px; padding: 0 16px;
  border-radius: var(--r-pill);
  background: rgba(255, 255, 255, .92);
  color: var(--ink);
}
.ui-buscador svg { width: 17px; height: 17px; color: var(--muted); flex: none; }
.ui-escribe { font-family: var(--mono); font-size: .86rem; white-space: nowrap; overflow: hidden; }
.ui-cursor { width: 1.5px; height: 18px; background: var(--ink); animation: parpadeo 1s steps(1) infinite; }
@keyframes parpadeo { 50% { opacity: 0; } }
.ui-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.ui-chips span { padding: 6px 12px; border-radius: var(--r-pill); background: rgba(255, 255, 255, .14); font-size: .76rem; }
.ui-filas { display: grid; gap: 8px; }
.ui-filas i { height: 48px; border-radius: 14px; background: linear-gradient(90deg, rgba(255, 255, 255, .16), rgba(255, 255, 255, .06)); }
.ui-par { display: flex; justify-content: space-between; padding-bottom: 12px; border-bottom: 1px solid rgba(255, 255, 255, .14); }
.ui-par span { color: rgba(242, 244, 246, .7); }
.ui-barras { display: grid; gap: 10px; }
.ui-barras div { display: grid; grid-template-columns: 70px 1fr; align-items: center; gap: 12px; font-size: .78rem; color: rgba(242, 244, 246, .7); }
.ui-barras i { height: 6px; border-radius: 6px; background: rgba(255, 255, 255, .14); position: relative; overflow: hidden; }
.ui-barras i::after { content: ""; position: absolute; inset: 0; border-radius: inherit; background: #fff; transform-origin: left; transform: scaleX(var(--v)); }
.ui-boton {
  display: flex; align-items: center; justify-content: center;
  height: 50px; border-radius: var(--r-pill);
  background: #fff; color: var(--ink); font-weight: 500;
}
.ui-ok { display: flex; align-items: center; gap: 8px; color: var(--mint); font-size: .86rem; }
.ui-ok svg { width: 16px; height: 16px; }
.ui-sin { font-family: var(--mono); font-size: .7rem; letter-spacing: .12em; text-transform: uppercase; color: rgba(242, 244, 246, .62); }

.como-progreso { display: none; }

.motion .scene-como .como-pista {
  position: absolute;
  left: 0; top: 0; bottom: 0;
  display: flex;
  width: 300vw;
}
.motion .scene-como .como-paso {
  width: 100vw;
  height: 100%;
  margin: 0;
  padding: calc(var(--header-space) + 18vh) var(--gutter) 12vh;
}
.motion .como-progreso {
  position: absolute; z-index: 3;
  left: var(--gutter); bottom: 5vh;
  display: flex; gap: 8px;
}
.motion .como-progreso i { width: 56px; height: 2px; background: rgba(255, 255, 255, .2); position: relative; overflow: hidden; }
.motion .como-progreso i::after { content: ""; position: absolute; inset: 0; background: #fff; transform-origin: left; transform: scaleX(var(--f, 0)); }

/* las maquetas cobran vida cuando su paso está en pantalla */
.motion .como-ui--buscar .ui-escribe { max-width: 0; }
.motion .como-paso.is-on .como-ui--buscar .ui-escribe { max-width: 20ch; transition: max-width 1.6s steps(15) .3s; }
.motion .como-ui--buscar .ui-chips span,
.motion .como-ui--buscar .ui-filas i { opacity: 0; transform: translateY(8px); transition: opacity .6s var(--ease), transform .7s var(--ease); }
.motion .como-paso.is-on .como-ui--buscar .ui-chips span,
.motion .como-paso.is-on .como-ui--buscar .ui-filas i { opacity: 1; transform: none; }
.motion .como-paso.is-on .ui-chips span:nth-child(1) { transition-delay: 1.6s; }
.motion .como-paso.is-on .ui-chips span:nth-child(2) { transition-delay: 1.75s; }
.motion .como-paso.is-on .ui-chips span:nth-child(3) { transition-delay: 1.9s; }
.motion .como-paso.is-on .ui-filas i:nth-child(1) { transition-delay: 2.1s; }
.motion .como-paso.is-on .ui-filas i:nth-child(2) { transition-delay: 2.2s; }
.motion .como-paso.is-on .ui-filas i:nth-child(3) { transition-delay: 2.3s; }
.motion .ui-barras i::after { transform: scaleX(0); transition: transform 1.4s var(--ease); }
.motion .como-paso.is-on .ui-barras i::after { transform: scaleX(var(--v)); }
.motion .como-paso.is-on .ui-barras div:nth-child(2) i::after { transition-delay: .12s; }
.motion .como-paso.is-on .ui-barras div:nth-child(3) i::after { transition-delay: .24s; }
.motion .como-paso.is-on .ui-barras div:nth-child(4) i::after { transition-delay: .36s; }
.motion .como-ui--contacto .ui-ok { opacity: 0; transform: translateY(6px); transition: opacity .6s var(--ease) 1s, transform .7s var(--ease) 1s; }
.motion .como-paso.is-on .como-ui--contacto .ui-ok { opacity: 1; transform: none; }
.motion .como-ui--contacto .ui-boton { transition: transform .3s var(--ease) .6s, background-color .3s .6s; }
.motion .como-paso.is-on .como-ui--contacto .ui-boton { transform: scale(.97); background: #e9eef3; }

html:not(.motion) .como-paso { padding: 10vh 0; }
html:not(.motion) .scene-como .stage { padding-bottom: 6vh; }

/* ===================================================================
   DIRECTORIO — perfiles como objetos
   =================================================================== */
.directorio { padding: clamp(80px, 12vw, 150px) 0 clamp(70px, 9vw, 120px); background: var(--paper); overflow: hidden; }
.dir-cabeza { display: flex; align-items: flex-end; justify-content: space-between; gap: 30px; flex-wrap: wrap; margin-bottom: clamp(36px, 5vw, 60px); }
.dir-cabeza h2 { margin-top: 18px; max-width: 14ch; }
.dir-p { margin-top: 18px; color: var(--muted); max-width: 52ch; font-size: 1.06rem; }
.dir-acciones { display: flex; align-items: center; gap: 8px; }
.dir-flecha {
  width: 48px; height: 48px; border-radius: 50%;
  border: 1px solid var(--line-strong); background: transparent;
  display: grid; place-items: center; cursor: pointer; color: var(--ink);
  transition: background-color .2s, border-color .2s;
}
.dir-flecha:hover { background: var(--white); border-color: var(--ink); }
.dir-flecha svg { width: 20px; height: 20px; }
.dir-acciones .btn { margin-left: 8px; }

.dir-scroller {
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
  padding: 10px 0 30px;
  scroll-padding-inline: var(--gutter);
}
.dir-scroller::-webkit-scrollbar { display: none; }
.dir-pista {
  display: flex;
  gap: 18px;
  width: max-content;
  padding-inline: max(var(--gutter), calc((100vw - var(--wrap)) / 2));
}

.perfil {
  position: relative;
  flex: none;
  width: min(340px, 78vw);
  scroll-snap-align: start;
  display: flex; flex-direction: column;
  padding: 26px 26px 22px;
  border-radius: var(--r-lg);
  background: var(--white);
  border: 1px solid var(--line-soft);
  box-shadow: var(--shadow-sm);
  transition: transform .5s var(--ease), box-shadow .5s var(--ease);
  min-height: 430px;
}
a.perfil:hover { transform: translateY(-6px); box-shadow: var(--shadow-lg); }
.perfil-top { display: flex; align-items: flex-start; justify-content: space-between; }
.perfil-ini {
  font-family: var(--mono); font-size: 2.6rem; font-weight: 400; letter-spacing: -.04em; line-height: 1;
  color: var(--ink);
}
.perfil-estado { display: inline-flex; align-items: center; gap: 7px; font-size: .76rem; color: var(--muted); }
.perfil h3 { margin-top: 30px; font-size: 1.45rem; letter-spacing: -.03em; }
.perfil-meta { margin-top: 4px; font-size: .88rem; color: var(--muted); }
.perfil-horas { margin-top: auto; padding-top: 30px; }
.perfil-horas strong { display: block; font-size: 3.2rem; font-weight: 500; letter-spacing: -.05em; line-height: 1; font-variant-numeric: tabular-nums; }
.perfil-horas span { font-family: var(--mono); font-size: .64rem; letter-spacing: .16em; text-transform: uppercase; color: var(--muted); }
.perfil-pie { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-top: 18px; padding-top: 16px; border-top: 1px solid var(--line-soft); }
.perfil-pie .tags { margin-top: 0; }
.perfil-tarifa { font-family: var(--mono); font-size: .8rem; color: var(--ink-2); white-space: nowrap; }

/* sin cuenta: perfiles velados y la invitación encima */
.perfil--velado { pointer-events: none; }
.perfil--velado .perfil-ini,
.perfil--velado h3,
.perfil--velado .perfil-meta,
.perfil--velado .perfil-horas strong { filter: blur(7px); opacity: .55; }
.dir-candado {
  flex: none;
  width: min(380px, 84vw);
  scroll-snap-align: start;
  display: flex; flex-direction: column; justify-content: center; gap: 16px;
  padding: 34px 30px;
  border-radius: var(--r-lg);
  background: var(--ink);
  color: #fff;
  min-height: 430px;
}
.dir-candado h3 { font-size: 1.7rem; letter-spacing: -.035em; }
.dir-candado p { color: rgba(255, 255, 255, .72); font-size: .95rem; }
.dir-candado .acciones { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 6px; }
.dir-candado .promo-short { justify-content: flex-start; margin: 0; color: var(--amber); }

.motion .perfil, .motion .dir-candado { opacity: 0; transform: translate3d(60px, 0, 0); }
.motion .dir-pista.is-in .perfil,
.motion .dir-pista.is-in .dir-candado {
  opacity: 1; transform: none;
  transition: opacity .9s var(--ease) calc(var(--i, 0) * 90ms), transform 1.1s var(--ease) calc(var(--i, 0) * 90ms);
}
.motion .dir-pista.is-in a.perfil:hover { transform: translateY(-6px); transition-delay: 0s; }

/* ===================================================================
   AVISOS — propietarios buscando piloto
   =================================================================== */
.avisos {
  position: relative;
  background:
    radial-gradient(1000px 600px at 70% 10%, rgba(169, 201, 232, .08), transparent 60%),
    var(--night);
  color: var(--night-text);
  padding: clamp(60px, 9vw, 120px) 0 clamp(80px, 10vw, 140px);
  overflow: hidden;
}
.avisos-ruta { width: min(100% - var(--gutter) * 2, var(--wrap)); margin: 0 auto; }
.ruta-linea { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: end; gap: clamp(10px, 2vw, 30px); }
.ruta-ciudad { display: grid; gap: 6px; }
.ruta-ciudad b {
  font-size: clamp(2.6rem, 8.4vw, 8.4rem);
  font-weight: 500;
  letter-spacing: -.055em;
  line-height: .86;
  white-space: nowrap;
}
.ruta-ciudad small { font-family: var(--mono); font-size: .76rem; letter-spacing: .18em; color: var(--night-muted); }
.ruta-ciudad--b { text-align: right; }
.ruta-arco { width: 100%; height: clamp(50px, 8vw, 110px); overflow: visible; margin-bottom: clamp(18px, 2.6vw, 40px); }
.ruta-traza { fill: none; stroke: rgba(255, 255, 255, .2); stroke-width: 1; stroke-dasharray: 3 6; vector-effect: non-scaling-stroke; }
.ruta-vuelo { fill: none; stroke: var(--amber); stroke-width: 1.6; stroke-linecap: round; stroke-dasharray: 1 1; stroke-dashoffset: 1; vector-effect: non-scaling-stroke; }
.ruta-meta { margin-top: 26px; display: flex; flex-wrap: wrap; gap: 10px 22px; align-items: center; font-family: var(--mono); font-size: .76rem; letter-spacing: .12em; text-transform: uppercase; color: var(--night-muted); }
.ruta-estado { display: inline-flex; align-items: center; gap: 8px; color: var(--amber); }
.ruta-estado::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--amber); box-shadow: 0 0 0 4px rgba(242, 178, 76, .2); animation: latido 1.8s ease-in-out infinite; }
@keyframes latido { 50% { box-shadow: 0 0 0 7px rgba(242, 178, 76, 0); } }
.avisos-ruta .ruta-ciudad b, .avisos-ruta .ruta-meta span { transition: opacity .5s var(--ease), transform .6s var(--ease); }
.avisos-ruta.cambia .ruta-ciudad b, .avisos-ruta.cambia .ruta-meta span:not(.ruta-estado) { opacity: 0; transform: translateY(14px); }

.avisos-cuerpo { margin-top: clamp(70px, 9vw, 120px); }
.avisos-cabeza { display: grid; gap: 18px; max-width: 760px; }
.avisos .eyebrow { color: var(--night-muted); }
.avisos-p { color: var(--night-muted); font-size: 1.06rem; max-width: 60ch; }

.tablero { margin-top: clamp(36px, 5vw, 56px); border-top: 1px solid var(--night-line); }
.tablero-cabeza, .aviso-fila {
  display: grid;
  grid-template-columns: minmax(0, 1.5fr) minmax(0, 1.3fr) minmax(0, .8fr) minmax(0, .8fr) minmax(0, 1fr);
  align-items: center;
  gap: 18px;
}
.tablero-cabeza { padding: 14px 0; font-family: var(--mono); font-size: .64rem; letter-spacing: .16em; text-transform: uppercase; color: rgba(154, 163, 173, .8); border-bottom: 1px solid var(--night-line); }
.tablero-filas { position: relative; }
.aviso-fila {
  padding: 18px 0;
  border-bottom: 1px solid var(--night-line);
  font-size: .96rem;
  transition: background-color .3s;
}
a.aviso-fila:hover { background: rgba(255, 255, 255, .03); }
.af-ruta { display: flex; align-items: center; gap: 12px; font-family: var(--mono); font-size: .94rem; letter-spacing: .04em; min-width: 0; }
.af-ruta svg { width: 34px; height: 10px; flex: none; color: rgba(255, 255, 255, .45); }
.af-ruta small { display: block; font-family: var(--sans); font-size: .76rem; letter-spacing: 0; color: var(--night-muted); }
.af-modelo { color: rgba(242, 244, 246, .9); }
.af-rol, .af-fecha { font-family: var(--mono); font-size: .86rem; color: rgba(242, 244, 246, .82); }
.af-estado { display: inline-flex; align-items: center; gap: 8px; font-size: .84rem; color: var(--amber); }
.af-estado::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.af-estado--cubierto { color: var(--mint); }
.aviso-fila.entra { animation: entra-fila .9s var(--ease) both; }
@keyframes entra-fila {
  from { opacity: 0; transform: translateY(-14px); background: rgba(242, 178, 76, .08); }
  to { opacity: 1; transform: none; background: transparent; }
}
.aviso-fila.sale { animation: sale-fila .6s var(--ease) both; }
@keyframes sale-fila { to { opacity: 0; transform: translateY(10px); } }

.avisos-pie { margin-top: 28px; display: flex; align-items: center; justify-content: space-between; gap: 20px; flex-wrap: wrap; }
.avisos .nota-ilustrativa { color: rgba(154, 163, 173, .75); }

/* ===================================================================
   VERIFICACIÓN — capas de credenciales
   =================================================================== */
.scene-verif {
  --alto: 300vh;
  background:
    radial-gradient(800px 600px at 78% 50%, rgba(111, 211, 160, .07), transparent 65%),
    var(--night);
  color: var(--night-text);
}
.scene-verif .stage {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  align-items: center;
  gap: 5vw;
  width: min(100% - var(--gutter) * 2, var(--wrap));
  margin-inline: auto;
  padding: calc(var(--header-space) + 6vh) 0 10vh;
}
.motion .scene-verif .stage { width: 100%; padding: var(--header-space) var(--gutter) 4vh; max-width: none; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
.verif-copy { max-width: 540px; }
.verif-copy .eyebrow { color: var(--night-muted); }
.verif-copy h2 { margin-top: 2vh; font-size: clamp(2rem, min(4vw, 7vh), 3.9rem); }
.verif-p { margin-top: 2vh; color: var(--night-muted); max-width: 52ch; }
.verif-items { margin-top: 4vh; display: grid; gap: 0; border-top: 1px solid var(--night-line); }
.verif-items li { padding: 2vh 0; border-bottom: 1px solid var(--night-line); transition: opacity .6s var(--ease); }
.verif-items h3 { font-size: 1.08rem; letter-spacing: -.01em; }
.verif-items p { margin-top: 6px; color: var(--night-muted); font-size: .92rem; }
.motion .verif-items li { opacity: .32; }
.motion .verif-items li.is-on { opacity: 1; }

.verif-escena { position: relative; display: grid; justify-items: center; gap: 3vh; perspective: 1400px; }
.verif-pila {
  position: relative;
  width: min(420px, 100%);
  display: grid;
  gap: 10px;
  transform: rotateX(18deg) rotateY(-16deg) rotateZ(2deg);
  transform-style: preserve-3d;
}
.capa-v {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 16px;
  height: 64px;
  padding: 0 20px;
  border-radius: 18px;
  background: linear-gradient(135deg, #1f262e, #141a20);
  border: 1px solid rgba(255, 255, 255, .14);
  box-shadow: 0 20px 50px rgba(0, 0, 0, .35);
  font-size: 1.02rem;
}
.cv-num { font-family: var(--mono); font-size: .7rem; letter-spacing: .14em; color: var(--night-muted); }
.capa-v b { font-weight: 500; letter-spacing: -.01em; }
.cv-ok {
  width: 26px; height: 26px; border-radius: 50%;
  background:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2306080b' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6L9 17l-5-5'/%3E%3C/svg%3E") center / 13px no-repeat,
    var(--mint);
}
.verif-sello {
  display: inline-flex; align-items: center; gap: 12px;
  padding: 14px 22px 14px 16px;
  border-radius: var(--r-pill);
  background: var(--mint);
  color: var(--night);
  font-weight: 600;
  letter-spacing: -.01em;
}
.verif-sello svg { width: 24px; height: 24px; }
.verif-todo { text-align: center; font-size: clamp(1.15rem, 1.8vw, 1.6rem); font-weight: 500; letter-spacing: -.03em; max-width: 24ch; }

.motion .capa-v { opacity: 0; transform: translate3d(90px, 40px, 60px); transition: opacity .8s var(--ease), transform 1.1s var(--ease); }
.motion .capa-v.is-on { opacity: 1; transform: translate3d(0, 0, 0); }
.motion .capa-v .cv-ok { transform: scale(0); transition: transform .5s var(--ease) .45s; }
.motion .capa-v.is-on .cv-ok { transform: none; }
.motion .verif-sello, .motion .verif-todo { opacity: 0; transform: translateY(18px) scale(.96); transition: opacity .8s var(--ease), transform 1s var(--ease); }
.motion .verif-sello.is-on, .motion .verif-todo.is-on { opacity: 1; transform: none; }
.motion .verif-pila.junta { gap: 2px; transition: gap .9s var(--ease); }
.verif-pila { transition: gap .9s var(--ease); }

/* ===================================================================
   PERSONAS — galería y confianza
   =================================================================== */
.scene-humano { --alto: 360vh; background: var(--paper); }
.humano-cabeza { position: relative; z-index: 2; padding-top: calc(var(--header-space) + 4vh); }
.humano-cabeza h2 { margin-top: 2vh; font-size: clamp(2.6rem, min(7vw, 11vh), 7.2rem); letter-spacing: -.055em; max-width: 14ch; line-height: .94; }

.humano-pista { display: flex; gap: 18px; padding: 6vh var(--gutter); overflow-x: auto; scroll-snap-type: x mandatory; }
.humano-foto { flex: none; width: min(330px, 74vw); scroll-snap-align: start; }
.humano-foto .marco { position: relative; aspect-ratio: 4 / 5; border-radius: var(--r-lg); overflow: hidden; background: var(--paper-3); }
.humano-foto picture, .humano-foto img { width: 100%; height: 100%; object-fit: cover; }
.humano-foto figcaption { margin-top: 12px; font-family: var(--mono); font-size: .68rem; letter-spacing: .14em; text-transform: uppercase; color: var(--muted); }
.humano-foto--final { width: min(620px, 88vw); }
.humano-foto--final .marco { aspect-ratio: 16 / 9; }

.confianza { padding: 4vh var(--gutter) 12vh; }
.confianza-lista { display: grid; gap: .1em; }
.confianza-lista li { font-size: clamp(2rem, min(5.2vw, 8.4vh), 5.4rem); font-weight: 500; letter-spacing: -.05em; line-height: 1.02; }
.confianza-p { margin-top: 3vh; max-width: 50ch; font-size: clamp(1rem, 1.3vw, 1.2rem); color: var(--muted); }

.motion .scene-humano .humano-pista {
  position: absolute;
  left: 0; top: 0; bottom: 0;
  overflow: visible;
  padding: 0;
  align-items: center;
  gap: 2.4vh;
  width: max-content;
}
.motion .scene-humano .humano-foto { width: auto; }
.motion .scene-humano .humano-foto .marco { height: 56vh; aspect-ratio: 4 / 5; }
.motion .scene-humano .humano-foto figcaption { position: absolute; margin-top: 10px; }
.motion .humano-cabeza { pointer-events: none; }
.motion .scene-humano .humano-pista { padding-top: 22vh; }
.motion .scene-humano .humano-foto:not(.humano-foto--final) .marco img { transform-origin: 50% 50%; }

/* la última foto ocupa ya la pantalla entera, recortada con una máscara
   del tamaño de una tarjeta: abrir la máscara es la transición */
.motion .scene-humano .humano-foto--final {
  position: relative;
  width: 100vw;
  height: 100vh;
  margin-top: -22vh;
  margin-left: calc((100vw - 56vh * 16 / 9) / -2 + 2.4vh);
}
.motion .scene-humano .humano-foto--final .marco {
  position: absolute; inset: 0;
  height: auto;
  aspect-ratio: auto;
  border-radius: 0;
  /* recorte inicial = el hueco de una tarjeta más de la galería */
  --ct: calc(22vh + (100vh - 22vh - 56vh) / 2);
  --cb: calc((100vh - 22vh - 56vh) / 2);
  --ch: calc((100vw - 56vh * 16 / 9) / 2);
  --cr: 26px;
  clip-path: inset(var(--ct) var(--ch) var(--cb) var(--ch) round var(--cr));
}
.motion .scene-humano .humano-foto--final figcaption { display: none; }
.motion .scene-humano .humano-foto--final .marco::after {
  content: "";
  position: absolute; inset: 0;
  background: linear-gradient(0deg, rgba(6, 8, 11, .78) 0%, rgba(6, 8, 11, .35) 45%, rgba(6, 8, 11, .1) 100%);
  opacity: var(--velo, 0);
}

.motion .scene-humano .confianza {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  z-index: 3;
  padding: 0 var(--gutter) 9vh;
  color: #fff;
  pointer-events: none;
}
.motion .scene-humano .confianza-p { color: rgba(255, 255, 255, .8); }
.motion .confianza-lista li,
.motion .confianza-p { opacity: 0; transform: translateY(22px); transition: opacity .8s var(--ease), transform 1s var(--ease); }
.motion .confianza-lista li.is-on,
.motion .confianza-p.is-on { opacity: 1; transform: none; }

/* ===================================================================
   SECCIONES DE CONTENIDO — comparativa, precios, FAQ, legal
   =================================================================== */
#comparativa { padding-top: clamp(100px, 13vw, 180px); }

.precios-par { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.precio {
  display: flex; flex-direction: column; gap: 16px;
  min-height: 360px;
  padding: clamp(28px, 4vw, 48px);
  border-radius: var(--r-lg);
  background: var(--white);
  border: 1px solid var(--line-soft);
}
.precio-tag { font-family: var(--mono); font-size: .7rem; letter-spacing: .18em; color: var(--muted); }
.precio h3 { margin-top: auto; font-size: clamp(1.8rem, 3.2vw, 3rem); letter-spacing: -.045em; line-height: 1.02; max-width: 14ch; }
.precio p { color: var(--muted); max-width: 48ch; }
.precio--ahora {
  background:
    radial-gradient(500px 300px at 85% 0%, rgba(169, 201, 232, .22), transparent 70%),
    var(--ink);
  color: #fff;
  border-color: transparent;
}
.precio--ahora .precio-tag { color: var(--amber); }
.precio--ahora p { color: rgba(255, 255, 255, .72); }

.faq-rejilla { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.4fr); gap: clamp(30px, 6vw, 100px); align-items: start; }
.faq-cabeza { position: sticky; top: calc(var(--header-space) + 30px); }
.faq-cabeza h2 { margin-top: 20px; }

.legal-seccion { padding-top: 0; }

/* ===================================================================
   FINAL — el jet se aleja
   =================================================================== */
.scene-final { --alto: 320vh; background: var(--night); color: #fff; }
.fin-cielo { z-index: 1; transform-origin: 50% 70%; }
.fin-cielo img { object-position: 50% 70%; }
.fin-avion {
  position: absolute;
  z-index: 2;
  left: 50%; top: 64%;
  width: min(70vw, 1200px);
  translate: -50% -50%;
  transform-origin: 50% 50%;
}
.fin-avion img { width: 100%; height: auto; }
.fin-luz {
  position: absolute; z-index: 3;
  left: 50%; top: 64%;
  width: 4px; height: 4px; margin: -2px 0 0 -2px;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 0 10px 3px rgba(255, 255, 255, .8), 0 0 30px 8px rgba(169, 201, 232, .35);
  opacity: 0;
}
.fin-luz::after {
  content: "";
  position: absolute; inset: -1px;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 0 18px 6px #fff;
  animation: estrobo 1.8s steps(1) infinite;
}
@keyframes estrobo { 0%, 8% { opacity: 1; } 9%, 100% { opacity: 0; } }
.fin-velo { z-index: 3; background: linear-gradient(0deg, rgba(6, 8, 11, .7), rgba(6, 8, 11, .2) 60%, rgba(6, 8, 11, .45)); opacity: .35; }

.fin-contenido {
  position: relative;
  z-index: 4;
  min-height: 100vh;
  display: grid;
  place-items: center;
  text-align: center;
  padding: var(--header-space) 0 6vh;
}
.fin-frases { display: grid; gap: .08em; font-size: clamp(2.4rem, min(7vw, 12vh), 7.4rem); font-weight: 500; letter-spacing: -.055em; line-height: .98; }
.fin-frases span:nth-child(2) { color: rgba(255, 255, 255, .72); }
.fin-frases span:nth-child(3) { color: rgba(255, 255, 255, .5); }
.fin-cta { display: grid; justify-items: center; gap: 2vh; margin-top: 10vh; }
.fin-cta .eyebrow { color: rgba(255, 255, 255, .7); }
.fin-cta h2 { font-size: clamp(2rem, min(4.6vw, 8vh), 4.4rem); max-width: 16ch; }
.fin-p { max-width: 58ch; color: rgba(255, 255, 255, .74); }
.fin-cta .hero-cta { justify-content: center; margin-top: 1vh; }

.motion .fin-contenido {
  position: absolute; inset: 0; min-height: 0;
  /* el texto arriba, sobre el cielo; la luz del jet queda en el horizonte */
  align-items: start;
  padding-top: calc(var(--header-space) + 8vh);
}
.motion .fin-frases, .motion .fin-cta { grid-area: 1 / 1; }
.motion .fin-cta { margin-top: 0; }
.motion .fin-frases span { opacity: 0; transform: translateY(26px); transition: opacity 1s var(--ease), transform 1.2s var(--ease); }
.motion .fin-frases span.is-on { opacity: 1; transform: none; }
.motion .fin-cta { opacity: 0; transform: translateY(30px); pointer-events: none; transition: opacity 1s var(--ease), transform 1.2s var(--ease); }
.motion .fin-cta.is-on { opacity: 1; transform: none; pointer-events: auto; }
.motion .fin-frases.se-va { opacity: 0; transform: translateY(-30px) scale(.97); transition: opacity .8s var(--ease), transform 1s var(--ease); }

html:not(.motion) .fin-avion { top: 40%; }
html:not(.motion) .fin-contenido { padding-top: 40vh; }

/* ===================================================================
   MÓVIL — la misma historia, otra coreografía
   =================================================================== */
@media (max-width: 760px) {
  .scene-apertura { --alto: 400vh; }
  /* entero de punta a punta, entre el titular y el texto de abajo */
  .ap-avion { width: 112vw; top: 46%; }
  .hero { padding-top: calc(var(--header-space) + 4vh); }
  .hero-inner {
    grid-template-columns: 1fr;
    grid-template-rows: auto 1fr auto auto;
    grid-template-areas: "titulo" "." "lead" "cta";
    row-gap: 18px;
  }
  .hero-h1 { gap: 14px; }
  .hero-kicker { font-size: .66rem; letter-spacing: .14em; max-width: 30ch; line-height: 1.5; }
  .hero-display { font-size: clamp(2.9rem, 14.2vw, 4.4rem); }
  .hero-inner > .hero-lead { font-size: .92rem; text-align: center; justify-self: center; padding: 14px 16px; border-radius: 18px; }
  .hero-inner > .hero-cta { justify-content: center; }
  .hero-cta .btn { flex: 1 1 auto; }
  .hero-scroll { display: none; }

  .red::before {
    background:
      linear-gradient(180deg, rgba(6, 8, 11, .94) 0%, rgba(6, 8, 11, .8) 34%, rgba(6, 8, 11, 0) 50%),
      linear-gradient(0deg, rgba(6, 8, 11, .92) 0%, rgba(6, 8, 11, 0) 22%);
  }
  .red-copy { grid-template-columns: 1fr; padding-top: calc(var(--header-space) + 2vh); row-gap: 2vh; }
  .red h2 { font-size: clamp(1.9rem, 8.6vw, 2.6rem); }
  .red-p { font-size: .94rem; }
  .red-leyenda { grid-template-columns: 1fr 1fr; gap: 8px 14px; margin-top: 2vh; }
  .red-leyenda li { font-size: .8rem; }
  .cifras { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
  .cifras div { padding-top: 10px; }
  .cifras dd { font-size: 1.6rem; }
  .cifras dt { font-size: .66rem; line-height: 1.3; }
  .red .nota-ilustrativa { font-size: .6rem; }

  .scene-split { --alto: 230vh; }
  .split-cabeza h2 { font-size: clamp(2.3rem, 11vw, 3.2rem); }
  .split-p { font-size: .94rem; }
  .split-par { flex-direction: column; align-items: center; }
  .split-lado { width: 100%; max-width: 420px; aspect-ratio: 16 / 10; }
  .split-lado figcaption { padding: 40px 18px 14px; }
  .split-lado figcaption strong { font-size: 1.3rem; }
  .motion .scene-split .split-par { flex-direction: column; height: auto; width: calc(100vw - var(--gutter) * 2); bottom: 4vh; gap: 12px; }
  .motion .scene-split .split-lado { width: 100%; height: 26vh; aspect-ratio: auto; }
  .split-etiqueta { top: -6px; }
  .split-etiqueta--a { left: 42px; }
  .split-etiqueta--b { right: 42px; }

  .lado, .lado--piloto { display: block; width: 100%; padding: 70px 0 30px; }
  .lado-copy { padding-inline: var(--gutter); }
  .lado-copy h3 { font-size: clamp(2.2rem, 10.6vw, 3rem); }
  .motion .scene-prop { --alto: 240vh; }
  .motion .scene-pil { --alto: 240vh; }
  .scene-prop .stage, .scene-pil .stage { margin-top: 30px; }
  .motion .scene-prop .stage, .motion .scene-pil .stage { margin-top: 0; }
  .motion .prop-pista { position: absolute; left: 0; right: 0; top: calc(var(--header-space) + 4vh); height: 30vh; }
  .motion .prop-avion { position: absolute; left: -10vw; width: 140vw; top: 0; }
  .motion .ficha--avion { position: absolute; left: var(--gutter); right: var(--gutter); bottom: 4vh; width: auto; }
  .ficha { padding: 16px 18px 8px; }
  .ficha .dato { padding: 8px 0; }
  .dato dt { font-size: .78rem; }
  .dato dd { font-size: .86rem; }
  .motion .pil-foto { position: absolute; inset: 0; border-radius: 0; aspect-ratio: auto; }
  .motion .pil-foto::after { content: ""; position: absolute; inset: 0; background: linear-gradient(0deg, rgba(6, 8, 11, .55), transparent 55%); }
  .motion .ficha--piloto { position: absolute; left: var(--gutter); right: var(--gutter); bottom: 3vh; width: auto; }
  .ficha-id { padding-bottom: 10px; }
  .dato--grande dd { font-size: 1.5rem; }

  .scene-encaje { --alto: 260vh; }
  .encaje-cabeza h2 { font-size: clamp(1.8rem, 8.4vw, 2.4rem); }
  .encaje-p { display: none; }
  .encaje-tablero {
    grid-template-columns: 1fr;
    grid-template-areas: "piloto" "filas" "avion";
    gap: 10px;
    margin-top: 2.4vh;
  }
  .encaje-lado { padding: 10px 14px; }
  .encaje-avatar { width: 38px; height: 38px; border-radius: 12px; }
  .encaje-filas li { padding: .7vh 0; gap: 8px; }
  .ef-a, .ef-b { font-size: .8rem; }
  .ef-req { font-size: .54rem; padding: 4px 8px; letter-spacing: .06em; }
  .encaje-indice { position: absolute; right: 0; top: -2px; width: 64px; height: 64px; }
  .encaje-cuenta strong { font-size: 1rem; }
  .encaje-cuenta small { display: none; }
  .encaje-lema { font-size: 1.25rem; }
  .motion .scene-encaje .encaje-lema { bottom: 6vh; }
  .motion .scene-encaje .encaje-nota { bottom: 3vh; }

  .scene-como { --alto: 320vh; }
  .como-paso { grid-template-columns: 1fr; gap: 3vh; align-content: start; }
  .motion .scene-como .como-paso { padding: calc(var(--header-space) + 21vh) var(--gutter) 6vh; }
  .como-num { font-size: 3.4rem; }
  .como-ui--buscar .ui-filas { display: none; }
  .como-texto h3 { margin-top: 1.4vh; font-size: 1.8rem; }
  .como-texto p { font-size: .94rem; }
  .como-ui { justify-self: stretch; width: 100%; padding: 16px; gap: 10px; }
  .ui-filas i { height: 36px; }
  .como-velo { background: linear-gradient(0deg, rgba(6, 8, 11, .65), rgba(6, 8, 11, .55) 60%, rgba(6, 8, 11, .7)); }

  .dir-cabeza { align-items: flex-start; }
  .dir-flecha { display: none; }
  .dir-acciones .btn { margin-left: 0; }

  .ruta-ciudad b { font-size: clamp(2.2rem, 12vw, 3.4rem); }
  .ruta-linea { grid-template-columns: 1fr; gap: 4px; }
  .ruta-ciudad--b { text-align: left; }
  .ruta-arco { height: 46px; margin: 0; }
  .tablero-cabeza { display: none; }
  .aviso-fila { grid-template-columns: 1fr auto; gap: 6px 14px; padding: 16px 0; }
  .af-ruta { grid-column: 1 / -1; }
  .af-modelo { grid-column: 1; font-size: .9rem; }
  .af-rol { grid-column: 2; grid-row: 2; text-align: right; }
  .af-fecha { grid-column: 1; font-size: .8rem; color: var(--night-muted); }
  .af-estado { grid-column: 2; grid-row: 3; justify-self: end; }

  .scene-verif { --alto: 260vh; }
  .scene-verif .stage, .motion .scene-verif .stage { grid-template-columns: 1fr; align-content: start; gap: 3vh; padding-top: calc(var(--header-space) + 2vh); }
  .verif-copy h2 { font-size: clamp(1.8rem, 8.6vw, 2.4rem); }
  .verif-p { font-size: .9rem; }
  .verif-items { margin-top: 2vh; }
  .verif-items li { padding: 1.2vh 0; }
  .verif-items p { display: none; }
  .capa-v { height: 46px; font-size: .9rem; border-radius: 14px; }
  .verif-pila { gap: 6px; width: min(340px, 100%); }
  .verif-sello { padding: 10px 16px 10px 12px; font-size: .9rem; }
  .verif-todo { display: none; }

  .scene-humano { --alto: 320vh; }
  .humano-cabeza h2 { font-size: clamp(2.4rem, 11vw, 3.4rem); }
  .motion .scene-humano .humano-pista { padding-top: 20vh; gap: 14px; }
  .motion .scene-humano .humano-foto--final { margin-top: -20vh; }
  .motion .scene-humano .humano-foto:not(.humano-foto--final) .marco { height: 46vh; }
  /* en el teléfono la última tarjeta es vertical, como las demás */
  .motion .scene-humano .humano-foto--final { margin-left: calc((100vw - 46vh * .8) / -2 + 14px); }
  .motion .scene-humano .humano-foto--final .marco {
    --ct: calc(20vh + (100vh - 20vh - 46vh) / 2);
    --cb: calc((100vh - 20vh - 46vh) / 2);
    --ch: calc((100vw - 46vh * .8) / 2);
  }
  .confianza-lista li { font-size: clamp(1.9rem, 9.6vw, 2.8rem); }

  .precios-par { grid-template-columns: 1fr; }
  .precio { min-height: 280px; }
  .faq-rejilla { grid-template-columns: 1fr; }
  .faq-cabeza { position: static; }

  .scene-final { --alto: 280vh; }
  .fin-avion { width: 120vw; }
  .fin-frases { font-size: clamp(2.2rem, 11vw, 3.4rem); }
  .fin-cta .hero-cta { width: 100%; }
  .fin-cta .hero-cta .btn { flex: 1 1 auto; }
}

/* Pantallas bajas de portátil: se recorta el aire, no el contenido. */
@media (min-width: 761px) and (max-height: 760px) {
  .lista-fina li { padding-top: 1.1vh; padding-bottom: 1.1vh; font-size: .9rem; }
  .encaje-p { display: none; }
  .verif-items p { display: none; }
  .ficha .dato { padding: 8px 0; }
}

@media (prefers-reduced-motion: reduce) {
  .ap-avion-flota, .hero-scroll i, .ruta-estado::before { animation: none !important; }
}