/* ============================================
   ÍCARO RB — Capa inmersiva 3D
   --------------------------------------------
   Se carga DESPUÉS de styles/animations/responsive y solo añade
   profundidad, perspectiva y movimiento. No reemplaza el sistema
   original: lo eleva. Todo aquí es transform/opacity/filter
   (compuesto en GPU) y todo se apaga con prefers-reduced-motion.
   ============================================ */

:root {
  /* Curvas fuertes: las de serie no tienen carácter. */
  --ease-out-strong: cubic-bezier(.23, 1, .32, 1);
  --ease-in-out-strong: cubic-bezier(.77, 0, .175, 1);
  --ease-drawer: cubic-bezier(.32, .72, 0, 1);

  /* Profundidad: sombras por capas, no una sola sombra plana. */
  --depth-1: 0 1px 2px rgba(2, 8, 23, .28), 0 4px 12px rgba(2, 8, 23, .22);
  --depth-2: 0 2px 4px rgba(2, 8, 23, .3), 0 12px 28px rgba(2, 8, 23, .3);
  --depth-3: 0 4px 8px rgba(2, 8, 23, .32), 0 24px 60px rgba(2, 8, 23, .42);
  --depth-4: 0 8px 16px rgba(2, 8, 23, .34), 0 48px 120px rgba(2, 8, 23, .55);
  --glow-orange: 0 0 0 1px rgba(251, 179, 74, .35), 0 12px 44px rgba(251, 179, 74, .28);

  --glass: rgba(12, 30, 66, .52);
  --glass-line: rgba(255, 255, 255, .14);
  --glass-line-hi: rgba(255, 255, 255, .32);
}

/* Sin el hint el navegador no promueve las capas y el parallax tiembla. */
.hero, .sky-wrap, .coverages, .contact { transform-style: preserve-3d; }

/* ============================================
   1. REVEALS CON PROFUNDIDAD
   Las clases ya existen en todas las plantillas; aquí pasan de un
   desplazamiento plano a una entrada desde el fondo de la escena.
   ============================================ */
.reveal-up {
  transform: perspective(1200px) translate3d(0, 38px, -90px) rotateX(7deg);
  transition:
    opacity .8s var(--ease-out-strong),
    transform .9s var(--ease-out-strong),
    filter .8s var(--ease-out-strong);
  filter: blur(6px);
}
.reveal-fade {
  transform: perspective(1200px) translate3d(0, 24px, -160px) rotateX(9deg) scale(.965);
  transition:
    opacity .85s var(--ease-out-strong),
    transform 1s var(--ease-out-strong),
    filter .85s var(--ease-out-strong);
  filter: blur(8px);
}
.reveal-up.is-visible,
.reveal-fade.is-visible {
  transform: perspective(1200px) translate3d(0, 0, 0) rotateX(0) scale(1);
  filter: blur(0);
}
.fade-in { transition: opacity 1.2s var(--ease-out-strong), filter 1.2s var(--ease-out-strong); filter: blur(10px); }
.fade-in.is-visible { filter: blur(0); }

/* Salida: lo que ya pasó de largo se va al fondo en vez de quedarse
   colgado. Más rápido que la entrada — el sistema responde, no decide. */
.depth-exit {
  transition:
    opacity .45s var(--ease-out-strong),
    transform .55s var(--ease-out-strong),
    filter .45s var(--ease-out-strong);
}
.depth-exit.is-gone {
  opacity: .12;
  transform: perspective(1200px) translate3d(0, -26px, -120px) rotateX(-5deg);
  filter: blur(5px);
}

/* ---- Utilidad: entrada escalonada de un grupo ----
   El contenedor recibe .stagger-in y data-stagger; immersive.js numera a los
   hijos en --i y aquí cada uno espera su turno. --step separa, --lead retrasa
   a todo el grupo por igual.

   Va con @keyframes y `backwards`, no con transiciones, y es a propósito: una
   transición dejaría a los hijos fijados en `transform: none` para siempre, y
   eso pisa el relieve del icono activo, el hover del botón de enviar y el
   levantado de la tarjeta al voltear. El keyframe se ejecuta una vez, la
   `backwards` sostiene el estado inicial durante la espera, y al terminar
   devuelve el elemento a su estilo normal. La entrada se dispara una sola vez
   (el observador deja de mirar), así que no hay nada que reencauzar. */
.stagger-in:not(.is-visible) > * { opacity: 0; }
.stagger-in.is-visible > * {
  animation: stagger-entra .42s var(--ease-out-strong) backwards;
  animation-delay: calc(var(--lead, 0s) + var(--i, 0) * var(--step, 50ms));
}
@keyframes stagger-entra {
  /* --rise permite acortar el recorrido cuando el contenedor TAMBIEN se mueve
     (el formulario lleva .reveal-up encima): dos viajes largos anidados se
     enturbian, uno corto dentro de uno largo se lee como asentarse. */
  from { opacity: 0; transform: translate3d(0, var(--rise, 14px), 0) scale(var(--pop, .97)); }
  to   { opacity: 1; transform: none; }
}

/* ---- Utilidad: revelado por máscara de una línea de titular ----
   El padding compensado evita que `overflow: hidden` corte los acentos
   altos (la Ó de SOLUCIÓN) del propio titular. */
.reveal-mask {
  display: block;
  overflow: hidden;
  padding-top: .12em;
  margin-top: -.12em;
  opacity: 1;
}
.reveal-mask > .reveal-mask-inner {
  display: block;
  transform: perspective(900px) translateY(112%) rotateX(-38deg);
  transform-origin: top center;
  transition: transform .64s var(--ease-out-strong);
  transition-delay: var(--delay, 0s);
}
.reveal-mask.is-visible > .reveal-mask-inner { transform: none; }

/* Título del hero: cada línea llega con su propia inclinación. */
.hero__title .reveal-line { perspective: 900px; }
.hero__title .reveal-line-inner {
  transform: translateY(112%) rotateX(-42deg);
  transform-origin: top center;
  transition: transform 1.15s var(--ease-out-strong);
}
.hero__title.is-visible .reveal-line-inner { transform: translateY(0) rotateX(0); }

/* ============================================
   2. HERO — escena con capas reales
   ============================================ */
.hero { perspective: 1400px; perspective-origin: 50% 45%; }

.hero__media {
  /* El suavizado lo hace el lerp del bucle rAF, no una transicion CSS:
     encadenar las dos convierte el parallax en gelatina. */
  transform: translate3d(var(--px, 0px), var(--py, 0px), 0) scale(1.06);
  will-change: transform;
}
/* El video se congela en su último cuadro y se asienta un punto:
   el remate del "corre una sola vez". */
.hero__video { transition: transform 1.4s var(--ease-out-strong), filter 1.4s var(--ease-out-strong); }
.hero__video.is-finished { transform: scale(1.015); }

/* La flotacion de cada nube es un keyframe sobre `transform`, asi que el
   parallax NO puede ir en .cloud--N (el keyframe gana): va en el contenedor. */
.hero__clouds {
  transform-style: preserve-3d;
  transform: translate3d(calc(var(--px, 0px) * 2.2), calc(var(--py, 0px) * 1.7), 0);
  will-change: transform;
}
.cloud--1 { opacity: .62; filter: drop-shadow(0 20px 50px rgba(2, 8, 23, .28)); }
.cloud--2 { opacity: .46; }

.hero__content {
  transform: translate3d(calc(var(--px, 0px) * -0.8), calc(var(--py, 0px) * -0.6), 0);
  will-change: transform;
}
/* La "pleca" que el cliente veía detrás de ESTRUCTURADO y de PARA CADA TIPO DE
   RIESGO era esto: cada línea del titular va dentro de un `.reveal-line` con
   `overflow: hidden` (lo necesita el revelado por máscara), y ese recorte
   convertía el halo difuso de `0 18px 48px` en un RECTÁNGULO oscuro del ancho
   exacto de la línea. Un desenfoque grande dentro de una caja recortada nunca
   se ve como halo: se ve como banda. Queda el relieve de 2px, que es un
   desplazamiento sólido con la forma de la letra y no pinta fondo alguno. */
.hero__title {
  text-shadow: 0 2px 0 rgba(2, 8, 23, .18);
}
.hero__title em {
  /* El acento naranja vive un plano por delante del resto del título. */
  display: inline-block;
  text-shadow: 0 2px 0 rgba(120, 60, 0, .25);
}

/* Salida del hero al hacer scroll: la escena se aleja, no se corta. */
.hero__content, .hero__media { --exit: 0; }
.hero__content { opacity: calc(1 - var(--exit) * 1.15); }

.hero__scroll-cue {
  transition: opacity .4s var(--ease-out-strong), transform .4s var(--ease-out-strong);
}
.is-scrolled-past-hero .hero__scroll-cue { opacity: 0; transform: translateX(-50%) translateY(12px); }

/* ============================================
   3. HEADER — cristal con volumen
   ============================================ */
.header { perspective: 800px; }
.header.is-scrolled {
  background: linear-gradient(180deg, rgba(6, 18, 44, .88), rgba(5, 12, 33, .72));
  border-bottom: 1px solid var(--glass-line);
  box-shadow: 0 1px 0 rgba(255, 255, 255, .06) inset, 0 18px 44px rgba(2, 8, 23, .45);
}
.logo__img {
  transition: transform .4s var(--ease-out-strong), filter .4s var(--ease-out-strong);
  transform-origin: left center;
}
@media (hover: hover) and (pointer: fine) {
  .logo:hover .logo__img { transform: perspective(600px) rotateY(-8deg) translateZ(14px); filter: drop-shadow(0 10px 24px rgba(251, 179, 74, .35)); }
}

.nav__link { transform-origin: center bottom; transition: opacity var(--dur-fast), transform .3s var(--ease-out-strong); }
@media (hover: hover) and (pointer: fine) {
  .nav__link:hover { transform: translateZ(18px) translateY(-1px); }
}
.nav__link::after { box-shadow: 0 0 12px rgba(251, 179, 74, .8); }

/* ============================================
   4. BOTONES — pastilla con grosor
   ============================================ */
.btn--orange {
  background: linear-gradient(180deg, #FDC469 0%, var(--color-orange) 45%, var(--color-orange-dark) 100%);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .55),
    inset 0 -2px 0 rgba(150, 85, 0, .35),
    var(--depth-2);
  transition:
    transform .22s var(--ease-out-strong),
    box-shadow .22s var(--ease-out-strong),
    filter .22s var(--ease-out-strong);
}
@media (hover: hover) and (pointer: fine) {
  .btn--orange:hover {
    transform: translateY(-3px) scale(1.015);
    box-shadow:
      inset 0 1px 0 rgba(255, 255, 255, .6),
      inset 0 -2px 0 rgba(150, 85, 0, .35),
      var(--depth-3), var(--glow-orange);
  }
}
.btn:active { transform: translateY(-1px) scale(.97); }

/* ============================================
   5. GLOBO — esfera con atmósfera
   ============================================ */
.globe-wrap { perspective: 1200px; transform-style: preserve-3d; }
.globe-circle {
  box-shadow:
    inset 0 0 80px rgba(0, 0, 0, .38),
    inset -30px -20px 90px rgba(2, 8, 23, .5),
    inset 26px 18px 70px rgba(160, 200, 255, .16),
    0 40px 120px rgba(2, 8, 23, .45);
  transform: translate3d(calc(var(--gx, 0px) * .5), calc(var(--gy, 0px) * .5), 0);
  will-change: transform;
}
/* Halo atmosférico: un anillo de luz al borde de la esfera. */
.globe-circle::after {
  content: "";
  position: absolute; inset: -2%;
  border-radius: 50%;
  background: radial-gradient(circle at 62% 38%, rgba(140, 195, 255, .22) 0%, rgba(140, 195, 255, 0) 62%);
  pointer-events: none;
  mix-blend-mode: screen;
}
.globe-img { filter: saturate(1.05) contrast(1.04); }

.country-pill {
  background: linear-gradient(180deg, rgba(78, 112, 178, .68), rgba(40, 66, 122, .62));
  border-color: var(--glass-line-hi);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .28),
    var(--depth-2);
  transition: box-shadow .3s var(--ease-out-strong);
}
@media (hover: hover) and (pointer: fine) {
  .country-pill:hover { box-shadow: inset 0 1px 0 rgba(255, 255, 255, .35), var(--depth-3), var(--glow-orange); }
}

.about__text p { text-shadow: 0 2px 18px rgba(2, 8, 23, .45); }

/* ============================================
   6. MARQUESINA — logos con relieve
   ============================================ */
.marquee {
  perspective: 900px;
  background: linear-gradient(180deg, rgba(255, 255, 255, .68), rgba(255, 255, 255, .46));
  box-shadow: inset 0 12px 26px rgba(2, 8, 23, .14), inset 0 -12px 26px rgba(2, 8, 23, .14);
}
.marquee__track { transform-style: preserve-3d; }
.marquee__item {
  transition: transform .35s var(--ease-out-strong), filter .35s var(--ease-out-strong);
}
.marquee__item img { filter: drop-shadow(0 6px 12px rgba(2, 8, 23, .18)); }
@media (hover: hover) and (pointer: fine) {
  .marquee__item:hover { transform: translateZ(46px) scale(1.06); }
  .marquee__item:hover img { filter: drop-shadow(0 14px 28px rgba(2, 8, 23, .3)); }
}

/* ============================================
   7. CITA + VIDEO INSTITUCIONAL
   ============================================ */
.quote__grid { perspective: 1400px; }
.quote__line { text-shadow: 0 3px 24px rgba(2, 8, 23, .5); }
.quote__accent { text-shadow: 0 3px 24px rgba(251, 179, 74, .35); }
.quote__rule {
  background: linear-gradient(90deg, var(--color-orange), rgba(251, 179, 74, 0));
  box-shadow: 0 0 18px rgba(251, 179, 74, .55);
  opacity: 1;
}

.quote__video { perspective: 1400px; }

.video-frame {
  transform-style: preserve-3d;
  border-radius: 28px;
  background: linear-gradient(150deg, #24406f, #0d1f3f);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .18),
    var(--depth-4);
  transform:
    perspective(1400px)
    rotateX(var(--ry, 0deg))
    rotateY(var(--rx, 0deg))
    translateZ(0);
  transition: transform .5s var(--ease-out-strong), box-shadow .5s var(--ease-out-strong);
  overflow: visible;
  will-change: transform;
}
.video-frame__stage {
  position: absolute; inset: 0;
  border-radius: 28px;
  overflow: hidden;
  transform: translateZ(0);
}
/* Brillo de cristal que sigue al puntero sobre la tarjeta. */
.video-frame__glare {
  position: absolute; inset: 0;
  background: radial-gradient(
    420px circle at var(--mx, 50%) var(--my, 50%),
    rgba(255, 255, 255, .16), rgba(255, 255, 255, 0) 62%);
  opacity: 0;
  transition: opacity .4s var(--ease-out-strong);
  pointer-events: none;
}
@media (hover: hover) and (pointer: fine) {
  .video-frame:hover { box-shadow: inset 0 1px 0 rgba(255, 255, 255, .22), var(--depth-4), 0 0 0 1px rgba(251, 179, 74, .22); }
  .video-frame:hover .video-frame__glare { opacity: 1; }
}

/* Controles: flotan por delante del plano del video. */
.video-frame__play,
.video-frame__mute {
  position: absolute;
  display: grid; place-items: center;
  border: 1px solid var(--glass-line-hi);
  background: rgba(8, 20, 45, .58);
  -webkit-backdrop-filter: blur(10px);
          backdrop-filter: blur(10px);
  color: var(--color-white);
  box-shadow: var(--depth-2), inset 0 1px 0 rgba(255, 255, 255, .22);
  transition:
    transform .24s var(--ease-out-strong),
    background .24s var(--ease-out-strong),
    opacity .24s var(--ease-out-strong),
    box-shadow .24s var(--ease-out-strong);
}
.video-frame__play {
  left: 50%; top: 50%;
  width: 84px; height: 84px;
  margin: -42px 0 0 -42px;
  border-radius: 50%;
  transform: translateZ(60px) scale(1);
  background: linear-gradient(180deg, rgba(251, 179, 74, .96), rgba(245, 166, 35, .92));
  color: var(--color-navy-solid);
  box-shadow: var(--depth-3), var(--glow-orange), inset 0 1px 0 rgba(255, 255, 255, .55);
}
.video-frame.is-playing .video-frame__play {
  opacity: 0;
  transform: translateZ(60px) scale(.94);
  pointer-events: none;
}
@media (hover: hover) and (pointer: fine) {
  .video-frame:hover .video-frame__play { opacity: 1; pointer-events: auto; transform: translateZ(70px) scale(1); }
  .video-frame__play:hover { transform: translateZ(80px) scale(1.06); }
}
.video-frame__play:active { transform: translateZ(60px) scale(.95); }

.video-frame__mute {
  right: 22px; bottom: 30px;
  width: 46px; height: 46px;
  border-radius: 50%;
  transform: translateZ(40px) translateY(8px);
  opacity: 0;
}
.video-frame.is-playing .video-frame__mute,
.video-frame:hover .video-frame__mute { opacity: 1; transform: translateZ(40px) translateY(0); }
.video-frame__mute.is-unmuted { background: var(--color-orange); color: var(--color-navy-solid); }
.video-frame--fallback .video-frame__mute,
.video-frame--fallback .video-frame__play,
.video-frame--fallback .video-frame__bar { display: none; }

.video-frame__icon { width: 26px; height: 26px; fill: currentColor; }
.video-frame__play .video-frame__icon--play { margin-left: 4px; }
.video-frame__icon--pause,
.video-frame__icon--replay,
.video-frame__icon--sound { display: none; }
.video-frame.is-playing .video-frame__play .video-frame__icon--play { display: none; }
.video-frame.is-playing .video-frame__play .video-frame__icon--pause { display: block; }
.video-frame__play.is-replay .video-frame__icon--play { display: none; }
.video-frame__play.is-replay .video-frame__icon--replay { display: block; }
.video-frame__mute .video-frame__icon { width: 22px; height: 22px; }
.video-frame__mute.is-unmuted .video-frame__icon--muted { display: none; }
.video-frame__mute.is-unmuted .video-frame__icon--sound { display: block; }

/* Barra de avance: escala en X, nunca anima `width`. */
.video-frame__bar {
  position: absolute; left: 0; right: 0; bottom: 0;
  height: 4px;
  background: rgba(255, 255, 255, .16);
  border-radius: 0 0 28px 28px;
  overflow: hidden;
  transform: translateZ(30px);
  opacity: 0;
  transition: opacity .3s var(--ease-out-strong);
}
.video-frame.is-playing .video-frame__bar,
.video-frame.is-ended .video-frame__bar { opacity: 1; }
.video-frame__bar-fill {
  display: block; width: 100%; height: 100%;
  background: linear-gradient(90deg, var(--color-orange), #FFD79B);
  transform-origin: left center;
  transform: scaleX(0);
}

/* ============================================
   8. COBERTURAS — mapa en perspectiva
   ============================================ */
.coverages { perspective: 1600px; }
.coverages__map { transform-style: preserve-3d; }
.coverages__intro h2 { text-shadow: 0 4px 28px rgba(2, 8, 23, .55); }

.coverage-pin {
  transform: perspective(900px) translate3d(0, 22px, -70px);
  transition:
    opacity .9s var(--ease-out-strong),
    transform .9s var(--ease-out-strong),
    filter .9s var(--ease-out-strong);
  filter: blur(4px);
}
.coverage-pin.is-visible {
  transform: perspective(900px) translate3d(0, 0, 0);
  filter: blur(0);
  animation: pin-bob-3d 6.5s ease-in-out infinite;
  animation-delay: .9s;
}
@keyframes pin-bob-3d {
  0%, 100% { transform: perspective(900px) translate3d(0, 0, 0); }
  50%      { transform: perspective(900px) translate3d(0, -9px, 26px); }
}

.coverage-pin__plus {
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .4), var(--depth-2);
  transition: transform .3s var(--ease-out-strong), background .3s var(--ease-out-strong), box-shadow .3s var(--ease-out-strong);
}
@media (hover: hover) and (pointer: fine) {
  .coverage-pin__plus:hover {
    transform: scale(1.18) translateZ(40px);
    background: var(--color-orange);
    color: var(--color-navy-solid);
    box-shadow: var(--depth-3), var(--glow-orange);
  }
}
.coverage-pin__plus:active { transform: scale(.97); }
.coverage-pin__label { text-shadow: 0 2px 12px rgba(2, 8, 23, .7); }

/* `plane-drift` ya ocupa el transform del avion; aqui solo se le da peso. */
.coverages__plane { filter: drop-shadow(0 24px 40px rgba(2, 8, 23, .45)); }

/* ============================================
   9. CONTACTO — formulario con volumen
   ============================================ */
.contact { perspective: 1600px; }
.contact__title { text-shadow: 0 4px 28px rgba(2, 8, 23, .5); }

.contact__form {
  position: relative;
  padding: 44px;
  border-radius: 28px;
  background: linear-gradient(160deg, rgba(12, 34, 74, .62), rgba(6, 16, 40, .52));
  border: 1px solid var(--glass-line);
  -webkit-backdrop-filter: blur(16px);
          backdrop-filter: blur(16px);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .14), var(--depth-4);
  transform-style: preserve-3d;
}

.form-field input,
.form-field textarea {
  background: rgba(3, 10, 28, .55);
  border: 1px solid rgba(255, 255, 255, .12);
  border-radius: 14px;
  box-shadow: inset 0 2px 8px rgba(0, 0, 0, .35), inset 0 -1px 0 rgba(255, 255, 255, .06);
  transition:
    border-color .24s var(--ease-out-strong),
    box-shadow .24s var(--ease-out-strong),
    transform .24s var(--ease-out-strong),
    background .24s var(--ease-out-strong);
}
.form-field input:focus,
.form-field textarea:focus {
  border-color: rgba(251, 179, 74, .7);
  background: rgba(5, 16, 42, .72);
  transform: translateZ(22px);
  box-shadow:
    inset 0 2px 8px rgba(0, 0, 0, .3),
    0 0 0 3px rgba(251, 179, 74, .18),
    0 18px 40px rgba(2, 8, 23, .4);
}
.form-field label {
  transition: color .24s var(--ease-out-strong), transform .24s var(--ease-out-strong);
}
.form-field:focus-within label { color: var(--color-orange); transform: translateZ(26px); }

.contact__submit { transform: translateZ(18px); }

/* ============================================
   10. PIE
   ============================================ */
.footer { position: relative; }
.footer__nav a {
  display: inline-block;
  transition: transform .28s var(--ease-out-strong), color .28s var(--ease-out-strong);
}
@media (hover: hover) and (pointer: fine) {
  .footer__nav a:hover { transform: translateY(-2px); color: var(--color-orange); }
}

/* ============================================
   11. TRANSICIÓN ENTRE PÁGINAS
   Salida al pulsar un enlace interno, entrada al cargar la nueva.
   ============================================ */
.page-veil {
  position: fixed; inset: 0; z-index: 9998;
  background: radial-gradient(circle at 50% 50%, #0b2149 0%, var(--color-navy-solid) 70%);
  opacity: 0;
  pointer-events: none;
  transition: opacity .34s var(--ease-out-strong);
}
.is-leaving .page-veil { opacity: 1; }
.is-leaving main { transition: transform .34s var(--ease-out-strong), opacity .34s var(--ease-out-strong); }
.is-leaving main { transform: perspective(1400px) translate3d(0, -18px, -120px); opacity: .4; }

/* Entrada de las páginas interiores: el contenido llega desde el fondo. */
body:not(.is-home) main {
  animation: page-in .75s var(--ease-out-strong) both;
}
@keyframes page-in {
  from { opacity: 0; transform: perspective(1400px) translate3d(0, 26px, -110px); filter: blur(7px); }
  to   { opacity: 1; transform: none; filter: blur(0); }
}

/* ============================================
   12. LUZ AMBIENTE QUE SIGUE AL PUNTERO
   ============================================ */
.ambient-light {
  position: fixed;
  width: 620px; height: 620px;
  left: 0; top: 0;
  margin: -310px 0 0 -310px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(251, 179, 74, .1) 0%, rgba(251, 179, 74, 0) 62%);
  pointer-events: none;
  z-index: 1;
  opacity: 0;
  transition: opacity .6s var(--ease-out-strong);
  will-change: transform;
  mix-blend-mode: screen;
}
.has-pointer .ambient-light { opacity: 1; }

/* ============================================
   13. PRELOADER — entrada de la escena
   ============================================ */
.preloader { background: radial-gradient(circle at 50% 45%, #0c2250 0%, var(--color-navy-solid) 70%); }
.preloader__bird { filter: drop-shadow(0 14px 40px rgba(251, 179, 74, .4)); }
.preloader.is-hidden { transform: scale(1.08); transition: opacity .7s var(--ease-out-strong), visibility .7s, transform .7s var(--ease-out-strong); }

/* ============================================
   14. MOVIMIENTO REDUCIDO
   Se conserva el fundido; desaparece todo desplazamiento, toda
   rotación y todo desenfoque.
   ============================================ */
@media (prefers-reduced-motion: reduce) {
  .reveal-up, .reveal-fade, .fade-in, .coverage-pin, .depth-exit,
  .reveal-mask > .reveal-mask-inner {
    transform: none !important;
    filter: none !important;
    transition: opacity .35s ease !important;
  }
  /* Sin escalonado ni keyframe: el grupo entero aparece de una, con fundido. */
  .stagger-in:not(.is-visible) > * { opacity: 0; }
  .stagger-in.is-visible > * {
    animation: none !important;
    opacity: 1;
    transition: opacity .35s ease;
  }
  .reveal-up.is-visible, .reveal-fade.is-visible, .coverage-pin.is-visible { transform: none !important; animation: none !important; }
  .hero__media, .hero__content, .cloud--1, .cloud--2, .globe-circle, .coverages__plane,
  .video-frame, .hero__title .reveal-line-inner, .preloader.is-hidden {
    transform: none !important;
    transition: opacity .35s ease !important;
  }
  .hero__title.is-visible .reveal-line-inner { transform: none !important; }
  .ambient-light { display: none; }
  body:not(.is-home) main { animation: none; }
  .is-leaving main { transform: none; }
}