/* ============================================================
   M&P — Sobrevuelo (primera pantalla)

   Una toma de dron orbitando el equipo, a pantalla completa, con
   el encuadre manejado por el scroll y las frases entrando de a
   una. Termina fundiendo a grafito para entregarle la pantalla
   a los paneles 3D.

   El material es de 848x478, así que el encuadre no se estira
   más de lo que aguanta: el momento más abierto (escala 1.0) es
   el más nítido y es donde cae el remate; cuando se cierra, el
   grade ya está oscuro y el grano tapa la compresión.

   El movimiento lo maneja el compositor con animation-timeline.
   sobrevuelo.js solo entra donde eso todavía no existe.
   ============================================================ */

.sobrevuelo {
  position: relative;
  background: #12171F;

  /* Dos cosas que vienen de style.css y hay que sacar de encima,
     sin tocar style.css:

     - section { padding: 84px 0 } metía 84px antes de la escena y
       el sticky arrancaba con la pantalla ya corrida.
     - el header ocupa 79px (76 de alto + 3 del filete rojo) y
       empujaba la escena para abajo, así que la primera pantalla
       nunca era una pantalla entera: le faltaban esos 79px y el
       pie de datos quedaba abajo del pliegue.

     Subiéndola esos 79px la escena arranca pegada al borde de
     arriba y el header, que es opaco, queda apoyado encima. */
  padding: 0;
  margin-top: -79px;
  scroll-margin-top: 79px;
}

/* El alto de la pista es el recorrido de scroll de toda la
   secuencia. 420vh = cuatro actos con aire entre uno y otro. */
.sobrevuelo-pista {
  height: 420vh;
  view-timeline-name: --sobrevuelo;
  view-timeline-axis: block;
}

.sobrevuelo-fijo {
  position: sticky;
  top: 0;
  height: 100vh;
  height: 100dvh;
  overflow: hidden;
  isolation: isolate;
  background: #12171F;
}

/* ---------- la cámara ---------- */

.sobrevuelo-camara {
  position: absolute;
  inset: 0;
  z-index: 0;
  transform: scale(1.18);
  transform-origin: 50% 42%;
  will-change: transform;
}

.sobrevuelo-camara video,
.sobrevuelo-camara img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  /* La fuente viene blanda y con poco contraste. Esto la lleva
     al gris grafito del resto del sitio y de paso disimula el
     bloqueo de la compresión. */
  filter: saturate(0.82) contrast(1.08) brightness(0.92);
}

/* ---------- capas de tratamiento ---------- */

.sobrevuelo-grade {
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  background:
    radial-gradient(125% 85% at 50% 42%, rgba(18,23,31,0) 28%, rgba(18,23,31,.42) 72%, rgba(18,23,31,.82) 100%),
    linear-gradient(180deg, rgba(18,23,31,.78) 0%, rgba(18,23,31,.10) 26%, rgba(18,23,31,.18) 52%, rgba(18,23,31,.90) 100%);
}

/* Grano. Tapa el bandeo del cielo, que es donde más se nota que
   el archivo viene recomprimido. */
.sobrevuelo-grano {
  position: absolute;
  inset: -60px;
  z-index: 3;
  pointer-events: none;
  opacity: .17;
  mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.82' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)' opacity='.55'/%3E%3C/svg%3E");
  background-size: 160px 160px;
}

/* Fundido final: le entrega la pantalla a los paneles. */
.sobrevuelo-fundido {
  position: absolute;
  inset: 0;
  z-index: 4;
  pointer-events: none;
  background: #12171F;
  opacity: 0;
}

/* ---------- actos ---------- */

.sobrevuelo-actos {
  position: absolute;
  inset: 0;
  z-index: 5;
  display: grid;
}

.sobrevuelo-acto {
  grid-area: 1 / 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 96px 24px 132px;
  width: min(1180px, 100%);
  margin-inline: auto;
  opacity: 0;
  /* Los actos que no están en pantalla no deben comerse los
     clicks del que sí está. */
  visibility: hidden;
}

/* El ancho corto es solo para los títulos: es lo que les da el
   quiebre en tres líneas. El resto se maneja solo. */
.sobrevuelo-acto h1,
.sobrevuelo-acto h2 {
  max-width: 17ch;
}

.sobrevuelo-acto .lead,
.sobrevuelo-acto p {
  max-width: 46ch;
}

/* El primer acto es el encabezado real de la página. */
.sobrevuelo-acto h1 {
  font-family: var(--font-display);
  font-size: clamp(2.1rem, 6.2vw, 4.4rem);
  line-height: 1.03;
  letter-spacing: 0.01em;
  color: #fff;
  margin: 14px 0 0;
  text-wrap: balance;
  text-shadow: 0 2px 30px rgba(18,23,31,.7);
}

.sobrevuelo-acto h2 {
  font-family: var(--font-display);
  font-size: clamp(1.6rem, 4.4vw, 3rem);
  line-height: 1.08;
  color: #fff;
  margin: 12px 0 0;
  text-wrap: balance;
  text-shadow: 0 2px 30px rgba(18,23,31,.7);
}

.sobrevuelo-acto .eyebrow {
  font-family: var(--font-mono);
  font-size: .78rem;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: #e6b9bb;
  display: flex;
  align-items: center;
  gap: 10px;
}

.sobrevuelo-acto .eyebrow::before {
  content: '';
  width: 26px;
  height: 3px;
  background: var(--rojo);
  flex: none;
}

.sobrevuelo-acto p {
  font-family: var(--font-body);
  font-size: clamp(1rem, 1.9vw, 1.22rem);
  line-height: 1.55;
  color: #d7dbe2;
  margin: 16px 0 0;
  text-shadow: 0 1px 18px rgba(18,23,31,.8);
}

.sobrevuelo-ctas {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 26px;
  max-width: none;
}

/* Dato grande de acto: el número manda, la etiqueta explica.
   Va con el selector largo porque .sobrevuelo-acto p le gana en
   especificidad y le comía el cuerpo. */
.sobrevuelo-acto p.sobrevuelo-dato {
  font-family: var(--font-mono);
  font-size: clamp(2.4rem, 6.4vw, 4.6rem);
  line-height: 1;
  letter-spacing: -0.01em;
  color: #fff;
  margin: 10px 0 0;
  max-width: none;
  text-shadow: 0 2px 30px rgba(18,23,31,.7);
}

.sobrevuelo-acto p.sobrevuelo-dato a { text-decoration: none; }
.sobrevuelo-acto p.sobrevuelo-dato a:hover { color: #fff; }

.sobrevuelo-dato small {
  display: block;
  font-family: var(--font-mono);
  font-size: .8rem;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: #9aa3b2;
  margin-top: 12px;
}

/* ---------- barra de datos al pie ---------- */

.sobrevuelo-hud {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 6;
  border-top: 1px solid rgba(255,255,255,.13);
  background: linear-gradient(180deg, rgba(18,23,31,0) 0%, rgba(18,23,31,.72) 100%);
}

.sobrevuelo-hud .container {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 26px;
  padding: 13px 24px;
  font-family: var(--font-mono);
  font-size: .76rem;
  letter-spacing: .09em;
  text-transform: uppercase;
  color: #9aa3b2;
}

.sobrevuelo-hud b { color: #e8ebef; font-weight: 500; }
.sobrevuelo-hud a { color: inherit; }
.sobrevuelo-hud a:hover { color: #fff; }

/* Señal de que hay que seguir bajando. */
.sobrevuelo-pista-scroll {
  position: absolute;
  right: 24px;
  bottom: 62px;
  z-index: 6;
  width: 2px;
  height: 54px;
  background: rgba(255,255,255,.18);
  overflow: hidden;
}

.sobrevuelo-pista-scroll i {
  position: absolute;
  inset: 0 0 auto;
  height: 18px;
  background: var(--rojo);
  animation: sobrevuelo-gota 2.1s linear infinite;
}

@keyframes sobrevuelo-gota {
  from { transform: translateY(-100%); }
  to   { transform: translateY(300%); }
}

/* ============================================================
   Movimiento guiado por scroll
   ============================================================ */

@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {

    .sobrevuelo-camara,
    .sobrevuelo-grade,
    .sobrevuelo-fundido,
    .sobrevuelo-acto,
    .sobrevuelo-hud,
    .sobrevuelo-pista-scroll {
      animation-timeline: --sobrevuelo;
      animation-range: contain 0% contain 100%;
      animation-fill-mode: both;
      animation-timing-function: linear;
      animation-duration: 1ms; /* lo real lo marca el timeline */
    }

    /* Cerrado sobre el equipo, se abre a la locación entera
       (el momento más nítido), y vuelve a cerrarse al final
       cuando ya está oscuro. */
    .sobrevuelo-camara { animation-name: sobrevuelo-camara; }

    @keyframes sobrevuelo-camara {
      0%   { transform: scale(1.18) translate3d(0, 0, 0); }
      30%  { transform: scale(1.00) translate3d(0, 0, 0); }
      62%  { transform: scale(1.09) translate3d(-3.2%, -1.6%, 0); }
      100% { transform: scale(1.26) translate3d(2.4%, -3.4%, 0); }
    }

    .sobrevuelo-grade { animation-name: sobrevuelo-grade; }

    @keyframes sobrevuelo-grade {
      0%   { opacity: 1; }
      30%  { opacity: .72; }
      100% { opacity: 1; }
    }

    .sobrevuelo-fundido { animation-name: sobrevuelo-fundido; }

    @keyframes sobrevuelo-fundido {
      0%, 86% { opacity: 0; }
      100%    { opacity: .92; }
    }

    /* La barra de datos y la señal de scroll se van cuando
       empieza el remate. */
    .sobrevuelo-hud { animation-name: sobrevuelo-hud; }

    @keyframes sobrevuelo-hud {
      0%, 68%  { opacity: 1; transform: translateY(0); }
      82%, 100%{ opacity: 0; transform: translateY(100%); }
    }

    .sobrevuelo-pista-scroll { animation-name: sobrevuelo-guia; }

    @keyframes sobrevuelo-guia {
      0%      { opacity: 1; }
      16%,100%{ opacity: 0; }
    }

    /* Cada acto entra, se queda, y sale. El texto entra
       escalonado con un retardo propio por elemento. */
    .sobrevuelo-acto[data-acto="1"] { animation-name: sobrevuelo-acto-1; }
    .sobrevuelo-acto[data-acto="2"] { animation-name: sobrevuelo-acto-2; }
    .sobrevuelo-acto[data-acto="3"] { animation-name: sobrevuelo-acto-3; }
    .sobrevuelo-acto[data-acto="4"] { animation-name: sobrevuelo-acto-4; }

    @keyframes sobrevuelo-acto-1 {
      0%,  16% { opacity: 1; visibility: visible; transform: translateY(0); }
      24%      { opacity: 0; visibility: visible; transform: translateY(-26px); }
      25%, 100%{ opacity: 0; visibility: hidden;  transform: translateY(-26px); }
    }

    @keyframes sobrevuelo-acto-2 {
      0%, 27%  { opacity: 0; visibility: hidden;  transform: translateY(26px); }
      28%      { opacity: 0; visibility: visible; transform: translateY(26px); }
      34%, 46% { opacity: 1; visibility: visible; transform: translateY(0); }
      53%      { opacity: 0; visibility: visible; transform: translateY(-26px); }
      54%, 100%{ opacity: 0; visibility: hidden;  transform: translateY(-26px); }
    }

    @keyframes sobrevuelo-acto-3 {
      0%, 56%  { opacity: 0; visibility: hidden;  transform: translateY(26px); }
      57%      { opacity: 0; visibility: visible; transform: translateY(26px); }
      63%, 74% { opacity: 1; visibility: visible; transform: translateY(0); }
      80%      { opacity: 0; visibility: visible; transform: translateY(-26px); }
      81%, 100%{ opacity: 0; visibility: hidden;  transform: translateY(-26px); }
    }

    @keyframes sobrevuelo-acto-4 {
      0%, 82%  { opacity: 0; visibility: hidden;  transform: translateY(26px); }
      83%      { opacity: 0; visibility: visible; transform: translateY(26px); }
      90%,100% { opacity: 1; visibility: visible; transform: translateY(0); }
    }

    /* Escalonado dentro del acto. */
    .sobrevuelo-acto > * {
      animation-timeline: --sobrevuelo;
      animation-range: contain 0% contain 100%;
      animation-fill-mode: both;
      animation-duration: 1ms;
      animation-name: sobrevuelo-linea;
    }

    @keyframes sobrevuelo-linea {
      from { transform: translateY(14px); }
      to   { transform: translateY(0); }
    }

    .sobrevuelo-grano { animation: sobrevuelo-grano 900ms steps(3) infinite; }

    @keyframes sobrevuelo-grano {
      0%   { transform: translate3d(0, 0, 0); }
      33%  { transform: translate3d(-14px, 9px, 0); }
      66%  { transform: translate3d(11px, -12px, 0); }
      100% { transform: translate3d(0, 0, 0); }
    }
  }
}

/* ============================================================
   Respaldo por JS (Safari y Firefox sin animation-timeline).
   sobrevuelo.js escribe --p de 0 a 1 y acá se lee con calc().
   ============================================================ */

.js-sobrevuelo .sobrevuelo-camara {
  transform:
    scale(calc(1.18 - 0.18 * var(--p-abre, 0) + 0.26 * var(--p-cierra, 0)))
    translate3d(calc(2.4% * var(--p-cierra, 0)), calc(-3.4% * var(--p-cierra, 0)), 0);
}

.js-sobrevuelo .sobrevuelo-fundido { opacity: calc(0.92 * var(--p-fin, 0)); }

.js-sobrevuelo .sobrevuelo-acto {
  transition: opacity .5s ease, transform .5s ease, visibility 0s linear .5s;
}

.js-sobrevuelo .sobrevuelo-acto.activo {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
  transition: opacity .5s ease, transform .5s ease, visibility 0s;
}

.js-sobrevuelo .sobrevuelo-acto.pasado { transform: translateY(-26px); }
.js-sobrevuelo .sobrevuelo-hud.oculta { opacity: 0; transform: translateY(100%); transition: .4s ease; }
.js-sobrevuelo .sobrevuelo-pista-scroll.oculta { opacity: 0; transition: .4s ease; }

/* ============================================================
   Celular
   ============================================================ */

@media (max-width: 860px) {
  .sobrevuelo-pista { height: 380vh; }

  .sobrevuelo-acto {
    padding: 84px 20px 120px;
    justify-content: flex-end;
  }

  .sobrevuelo-acto > * { max-width: none; }

  /* En vertical el recorte ya agranda bastante la imagen; no
     hace falta cerrar más la cámara. */
  .sobrevuelo-camara { transform: scale(1.06); }

  .sobrevuelo-pista-scroll { display: none; }

  /* El botón flotante de WhatsApp vive en la esquina de abajo a
     la derecha; sin este margen le pisa la última línea. */
  .sobrevuelo-hud .container {
    font-size: .74rem;
    gap: 6px 16px;
    padding: 11px 76px 11px 20px;
  }
}

@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) and (max-width: 860px) {
    @keyframes sobrevuelo-camara {
      0%   { transform: scale(1.10) translate3d(0, 0, 0); }
      30%  { transform: scale(1.00) translate3d(0, 0, 0); }
      62%  { transform: scale(1.05) translate3d(-2%, -1%, 0); }
      100% { transform: scale(1.14) translate3d(1.5%, -2%, 0); }
    }
  }
}

/* ============================================================
   Sin movimiento: la secuencia se convierte en cuatro bloques
   legibles, uno abajo del otro, y el video no se reproduce.
   ============================================================ */

@media (prefers-reduced-motion: reduce) {
  /* acotado igual que en panels.css: el pedido expreso de la versión
     completa pesa más que la preferencia del sistema */
  html:not(.mp-movimiento) .sobrevuelo-pista { height: auto; }

  html:not(.mp-movimiento) .sobrevuelo-fijo {
    position: relative;
    height: auto;
    min-height: 100vh;
  }

  html:not(.mp-movimiento) .sobrevuelo-camara { transform: none; }
  html:not(.mp-movimiento) .sobrevuelo-grano { display: none; }
  html:not(.mp-movimiento) .sobrevuelo-fundido { display: none; }

  html:not(.mp-movimiento) .sobrevuelo-actos {
    position: relative;
    display: block;
    padding: 12vh 0 0;
  }

  html:not(.mp-movimiento) .sobrevuelo-acto {
    opacity: 1;
    visibility: visible;
    display: block;
    padding: 0 24px 8vh;
  }

  html:not(.mp-movimiento) .sobrevuelo-hud { position: relative; }
}


/* ============================================================
   Modo sobrio: la misma versión en bloques que "menos movimiento",
   encendida por la clase de inicio.html. El video no arranca (no
   se le asigna fuente) y queda el poster.
   ============================================================ */
html.mp-sobrio .sobrevuelo-pista { height: auto; }
html.mp-sobrio .sobrevuelo-fijo { position: relative; height: auto; min-height: 100vh; }
html.mp-sobrio .sobrevuelo-camara { transform: none; animation: none; }
html.mp-sobrio .sobrevuelo-grano { display: none; }
html.mp-sobrio .sobrevuelo-fundido { display: none; }
html.mp-sobrio .sobrevuelo-grade,
html.mp-sobrio .sobrevuelo-hud,
html.mp-sobrio .sobrevuelo-acto,
html.mp-sobrio .sobrevuelo-pista-scroll { animation: none; }
html.mp-sobrio .sobrevuelo-actos { position: relative; display: block; padding: 12vh 0 0; }
html.mp-sobrio .sobrevuelo-acto { opacity: 1; visibility: visible; display: block; padding: 0 24px 8vh; }
html.mp-sobrio .sobrevuelo-hud { position: relative; }