/* ==========================================================================
   MOVAI-X · WEB CINEMATOGRÁFICA — negro profundo, azul frío, cero saturación.
   Terafab es la referencia de EXPERIENCIA (scroll storytelling con escenario
   fijado); la identidad es 100% MOVAI-X.
   ========================================================================== */
:root{
  --negro:#000; --s1:#05070A; --s2:#090C11;
  --tx:#fff; --tx2:#D6DAE0; --muted:#A7ADB5; --faint:#6D757E;
  --azul:#8BC7FF; --glow:rgba(120,190,255,.30);
  --rojo:#FF3B5C; --verde:#2DFF88;
  --linea:rgba(255,255,255,.14); --linea2:rgba(255,255,255,.26);
  --display:"Inter Tight","Inter",system-ui,sans-serif;
  --sans:"Inter",system-ui,sans-serif;
}
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:auto}
body{background:var(--negro);color:var(--tx);font-family:var(--sans);
  overflow-x:hidden;-webkit-font-smoothing:antialiased}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}

/* ── Navegación fija, finísima ── */
.nav{position:fixed;inset:0 0 auto 0;z-index:100;display:flex;align-items:center;
  justify-content:space-between;padding:18px clamp(20px,4vw,48px);
  background:linear-gradient(180deg,rgba(0,0,0,.72),transparent);
  transition:background .4s}
.nav-marca img{width:118px;height:auto;opacity:.97}
.nav-enlaces{display:flex;align-items:center;gap:clamp(14px,2.6vw,30px);
  font-size:13px;color:var(--muted)}
.nav-enlaces a:hover{color:var(--tx)}
.nav-cta,.nav-cta-fantasma{padding:9px 18px;border-radius:999px;font-weight:500}
.nav-cta{background:#fff;color:#000}
.nav-cta:hover{color:#000;box-shadow:0 0 24px rgba(255,255,255,.25)}
.nav-cta-fantasma{border:1px solid var(--linea2);color:var(--tx2)}

/* ══════════ EL HÉROE — video de fondo, texto a la izquierda (ref. Terafab) ══ */
.heroe{position:relative;height:100vh;overflow:hidden;background:#000}
.heroe-video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  filter:saturate(1.07) contrast(1.05)}
/* Grano de cine: textura viva, sutil (el video ya es HD, no hay que disimular nada) */
.heroe::before{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;
  opacity:.12;mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/><feColorMatrix type='saturate' values='0'/></filter><rect width='160' height='160' filter='url(%23n)' opacity='0.55'/></svg>")}
.heroe-velo{position:absolute;inset:0;background:
  linear-gradient(90deg,rgba(0,0,0,.78) 0,rgba(0,0,0,.35) 46%,rgba(0,0,0,.12) 70%),
  linear-gradient(180deg,rgba(0,0,0,.5) 0,transparent 26%,transparent 70%,rgba(0,0,0,.72) 100%)}
.heroe-cont{position:absolute;left:clamp(24px,6vw,92px);top:50%;
  transform:translateY(-50%);z-index:2;max-width:min(640px,88vw)}
/* La MARCA es la imagen del logo — jamás una fuente cualquiera */
.heroe-marca{width:clamp(250px,28vw,400px);height:auto;
  filter:drop-shadow(0 2px 26px rgba(0,0,0,.85))}
.heroe-frase{margin-top:26px;font-family:var(--display);font-weight:300;
  font-size:clamp(19px,2.2vw,29px);line-height:1.35;color:var(--tx2);
  max-width:520px;text-shadow:0 1px 22px rgba(0,0,0,.85)}
.heroe-cta{display:flex;gap:14px;margin-top:34px;flex-wrap:wrap}
.heroe-cta .btn-principal,.heroe-cta .btn-fantasma{display:inline-flex;
  align-items:center;gap:10px;padding:14px 26px;font-size:14px}
.heroe-cta span{font-size:17px;line-height:1}
.heroe-cta .btn-fantasma{background:rgba(0,0,0,.35);backdrop-filter:blur(8px)}
.heroe-pie{position:absolute;left:clamp(24px,6vw,92px);bottom:30px;z-index:2;
  font-size:10.5px;letter-spacing:.3em;color:var(--faint)}
.heroe .scroll-pista{bottom:26px}
@media(max-width:760px){
  .heroe-cont{top:auto;bottom:120px;transform:none}
  .heroe-pie{display:none}
}
@media(prefers-reduced-motion:reduce){.heroe-video{display:none}
  .heroe{background:#000 url("../assets/movai-x-home-desktop-v2.webp") center/cover}}

/* Etiqueta pequeña sobre los títulos grandes (ref. Terafab) */
.bloque-etq{font-size:12px;letter-spacing:.22em;color:var(--tx2);
  margin-bottom:16px;text-shadow:0 1px 14px rgba(0,0,0,.8)}

/* ══════════ INMERSIÓN — planeta → ciudad → carro → SOS, sin un solo corte ══ */
.inmersion{position:relative;height:430vh}
.inm-escenario{position:sticky;top:0;height:100vh;overflow:hidden;background:#000}
.inm-capa{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  will-change:transform,opacity}
/* Los origenes del zoom son el ALMA de la toma continua:
   - tierra: hacia el planeta (esta a la derecha del cuadro)
   - ciudad: hacia el centro urbano
   - carro:  hacia el TELEFONO con el boton SOS (~47% 58% del cuadro) */
#inm-tierra{transform-origin:68% 45%}
#inm-ciudad{transform-origin:55% 52%;opacity:0}
#inm-carro{transform-origin:47% 58%;opacity:0}
.inm-velo{position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(180deg,rgba(0,0,0,.42) 0,transparent 24%,
    transparent 72%,rgba(0,0,0,.5) 100%)}
.inm-texto{position:absolute;left:clamp(24px,6vw,92px);top:50%;z-index:3;
  transform:translateY(-50%);text-align:left;width:min(620px,86vw)}
.inm-texto h2{font-family:var(--display);font-weight:200;line-height:1.06;
  font-size:clamp(32px,4.8vw,62px);letter-spacing:-.02em;
  text-shadow:0 2px 34px rgba(0,0,0,.9)}
.inm-sub{margin-top:16px;color:var(--tx2);font-size:clamp(13px,1.4vw,17px);
  text-shadow:0 1px 20px rgba(0,0,0,.9)}
/* Las filas con lineas finas, como la escala del mock */
.inm-filas{margin-top:36px;max-width:560px}
.inm-fila{display:grid;grid-template-columns:clamp(96px,10vw,130px) 1fr;gap:18px;
  align-items:baseline;padding:15px 0;border-top:1px solid rgba(255,255,255,.18)}
.inm-fila span{font-size:13.5px;color:var(--muted)}
.inm-fila b{font-weight:400;font-size:clamp(13.5px,1.35vw,16.5px);color:#fff;
  text-shadow:0 1px 14px rgba(0,0,0,.8)}
/* El pulso final del SOS: clavado en el mismo punto del zoom (47% 58%) */
.inm-sos{position:absolute;left:47%;top:58%;z-index:2;opacity:0}
.inm-sos i{position:absolute;left:0;top:0;width:90px;height:90px;border-radius:50%;
  transform:translate(-50%,-50%);border:1.5px solid rgba(255,59,92,.6);opacity:0;
  animation:sos-onda-inm 2s ease-out infinite}
.inm-sos i:nth-child(2){animation-delay:1s}
@keyframes sos-onda-inm{0%{opacity:.9;width:90px;height:90px}
  100%{opacity:0;width:340px;height:340px}}
@media(prefers-reduced-motion:reduce){
  .inmersion{height:auto}
  .inm-escenario{position:static;height:auto}
  .inm-capa{position:relative;opacity:1!important;transform:none!important;height:60vh}
  .inm-sos i{animation:none}}

/* ══════════ LA PELÍCULA ══════════ */
.pelicula{position:relative;height:1100vh}
.escenario{position:sticky;top:0;height:100vh;overflow:hidden;background:var(--negro)}
#estrellas{position:absolute;inset:0;width:100%;height:100%;z-index:0}

.esc{position:absolute;inset:0;z-index:1;opacity:0;visibility:hidden}
.esc-globo{opacity:1;visibility:visible}
.esc-centro{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);
  text-align:center;width:min(860px,92vw);z-index:3}
.esc-texto{position:absolute;z-index:3;max-width:min(620px,86vw)}
.esc-texto h2{font-family:var(--display);font-weight:200;line-height:1.06;
  font-size:clamp(34px,5.2vw,68px);letter-spacing:-.02em}
.esc-sub{margin-top:14px;color:var(--muted);font-size:clamp(13px,1.3vw,16px);
  line-height:1.6;font-weight:400}
.esc-hora{font-size:11px;letter-spacing:.3em;color:var(--azul);margin-bottom:14px}
.abajo-izq{left:clamp(24px,6vw,90px);bottom:clamp(70px,12vh,130px)}
.arriba-centro{left:50%;top:clamp(84px,14vh,150px);transform:translateX(-50%);text-align:center}
.izq-centro{left:clamp(24px,6vw,90px);top:50%;transform:translateY(-50%)}
.centro{left:50%;top:50%;transform:translate(-50%,-50%);text-align:center}
.rojo{color:var(--rojo);font-weight:400}
.verde{color:var(--verde);font-weight:400}

/* ── 1 · Globo ── */
.esc-globo .globo-img,.esc-globo-final .globo-img{position:absolute;left:50%;top:50%;
  width:max(100vw,177vh);transform:translate(-50%,-50%);
  will-change:transform,opacity}
.esc-globo::after,.esc-globo-final::after{content:"";position:absolute;inset:0;
  background:radial-gradient(ellipse 90% 70% at 50% 50%,transparent 40%,rgba(0,0,0,.82) 100%)}
.hero-centro{position:absolute;left:clamp(24px,6vw,92px);top:50%;z-index:3;
  transform:translateY(-50%);text-align:left;max-width:min(640px,88vw)}
.hero-titulo{font-family:var(--display);font-weight:200;line-height:1.04;
  font-size:clamp(40px,6.2vw,80px);letter-spacing:-.03em;
  text-shadow:0 2px 40px rgba(0,0,0,.9)}
/* La marca SIEMPRE es el logo: jamas el nombre en una fuente cualquiera */
.hero-titulo-logo{width:clamp(280px,30vw,430px);height:auto;margin-top:20px;
  filter:drop-shadow(0 2px 28px rgba(0,0,0,.85))}
.scroll-pista{position:absolute;left:50%;bottom:26px;transform:translateX(-50%);
  z-index:3;font-size:10px;letter-spacing:.34em;color:var(--faint);
  display:flex;flex-direction:column;align-items:center;gap:10px}
.scroll-pista span{width:1px;height:44px;background:linear-gradient(180deg,var(--azul),transparent);
  animation:pista 1.8s ease-in-out infinite}
@keyframes pista{0%{transform:scaleY(.2);transform-origin:top}50%{transform:scaleY(1)}100%{transform:scaleY(.2);transform-origin:bottom}}

/* ── Escenas con fotografía (asset o placeholder elegante) ── */
.esc-foto{background:#04060A}
/* El lienzo SIEMPRE existe: lleva el placeholder y recibe el asset real.
   Se anima el lienzo (zoom cinematografico), nunca el texto ni la nota. */
.foto-lienzo{position:absolute;inset:0;z-index:0;will-change:transform;
  background:
  radial-gradient(ellipse 70% 55% at 50% 45%,rgba(30,50,80,.35),transparent 70%),
  repeating-linear-gradient(90deg,transparent 0 79px,rgba(139,199,255,.05) 79px 80px),
  repeating-linear-gradient(0deg,transparent 0 79px,rgba(139,199,255,.05) 79px 80px)}
.con-asset .foto-lienzo{background:none}
.foto-lienzo .foto{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.esc-foto::after{content:"";position:absolute;inset:0;z-index:1;
  background:linear-gradient(180deg,rgba(0,0,0,.55) 0,transparent 30%,
    transparent 60%,rgba(0,0,0,.72) 100%)}
.esc-foto>*:not(.foto){z-index:2}
/* Nota de asset pendiente: visible, discreta, imposible de ignorar en dev */
.ph-nota{position:absolute;right:16px;top:74px;z-index:5;
  font-family:ui-monospace,monospace;font-size:10px;letter-spacing:.08em;
  color:rgba(139,199,255,.75);background:rgba(4,8,14,.8);
  border:1px dashed rgba(139,199,255,.4);border-radius:8px;padding:6px 10px}
.con-asset .ph-nota{display:none}

/* ── 2-3 · HUD del viaje ── */
.hud-ruta{position:absolute;right:clamp(20px,7vw,110px);top:50%;
  transform:translateY(-58%);width:min(400px,44vw);z-index:3;overflow:visible}
#ruta-punto{filter:drop-shadow(0 0 6px var(--azul))}
.hud-chips{position:absolute;right:clamp(20px,7vw,110px);bottom:clamp(64px,11vh,120px);
  display:flex;flex-direction:column;gap:9px;align-items:flex-end;z-index:3}
.hud-chip{display:inline-flex;align-items:center;gap:8px;padding:9px 14px;
  border-radius:999px;background:rgba(6,10,17,.78);border:1px solid var(--linea);
  backdrop-filter:blur(10px);font-size:11px;letter-spacing:.14em;color:var(--tx2)}
.punto{width:7px;height:7px;border-radius:50%}
.punto.verde{background:var(--verde);box-shadow:0 0 10px var(--verde)}

/* ── 4 · Accidente (elegante, nada gráfico) ── */
.velo-impacto{position:absolute;inset:0;z-index:2;pointer-events:none;
  background:radial-gradient(ellipse at 50% 50%,transparent 45%,rgba(255,59,92,.16) 100%)}
.txt-impacto{text-shadow:0 2px 44px rgba(0,0,0,.95)}

/* ── 5 · SOS ── */
.sos-anillos{position:absolute;left:50%;top:56%;transform:translate(-50%,-50%);z-index:3}
.sos-anillos i{position:absolute;left:50%;top:50%;width:130px;height:130px;
  transform:translate(-50%,-50%);border-radius:50%;
  border:1.5px solid rgba(255,59,92,.55);opacity:0;
  animation:sos-onda 2.2s ease-out infinite}
.sos-anillos i:nth-child(2){animation-delay:.7s}
.sos-anillos i:nth-child(3){animation-delay:1.4s}
@keyframes sos-onda{0%{opacity:.85;width:130px;height:130px}
  100%{opacity:0;width:420px;height:420px}}
.sos-disco{position:relative;display:flex;align-items:center;justify-content:center;
  width:130px;height:130px;margin-left:-65px;border-radius:50%;
  background:radial-gradient(circle at 34% 30%,#FF5C77,#C4183A 72%);
  box-shadow:0 0 60px rgba(255,59,92,.5);
  font-family:var(--display);font-weight:400;font-size:30px;letter-spacing:.1em}
.sos-cuenta{position:absolute;left:50%;bottom:clamp(56px,10vh,110px);z-index:3;
  transform:translateX(-50%);display:flex;align-items:baseline;gap:22px;
  font-family:var(--display)}
.sos-cuenta span{font-size:clamp(38px,5vw,58px);font-weight:200;color:var(--faint);opacity:0}
.sos-cuenta em{font-style:normal;font-size:13px;letter-spacing:.34em;
  color:var(--rojo);opacity:0}

/* ── 6 · Transmisión ── */
.ondas{position:absolute;left:64%;top:50%;z-index:2}
.ondas i{position:absolute;left:0;top:0;width:80px;height:80px;border-radius:50%;
  transform:translate(-50%,-50%);border:1px solid rgba(139,199,255,.5);opacity:0;
  animation:onda-azul 2.6s ease-out infinite}
.ondas i:nth-child(2){animation-delay:.85s}
.ondas i:nth-child(3){animation-delay:1.7s}
@keyframes onda-azul{0%{opacity:.8;width:80px;height:80px}
  100%{opacity:0;width:560px;height:560px}}
.tarjeta-datos{position:absolute;right:clamp(20px,7vw,110px);top:50%;
  transform:translateY(-50%);z-index:3;width:min(360px,86vw);
  background:rgba(5,8,13,.82);border:1px solid var(--linea);border-radius:18px;
  padding:10px 18px;backdrop-filter:blur(14px);
  box-shadow:0 30px 80px rgba(0,0,0,.5)}
.td-fila{display:flex;align-items:baseline;justify-content:space-between;gap:14px;
  padding:13px 0;border-bottom:1px solid rgba(255,255,255,.07)}
.td-fila:last-child{border-bottom:none}
.td-fila span{font-size:10px;letter-spacing:.22em;color:var(--faint);flex:none}
.td-fila b{font-weight:500;font-size:13.5px;color:var(--tx2);text-align:right}

/* ── 7 · La red ── */
.esc-red{background:
  radial-gradient(ellipse 80% 60% at 50% 110%,rgba(20,40,70,.5),transparent 70%),#020407}
.red-nodos{position:absolute;left:50%;bottom:clamp(70px,13vh,150px);z-index:3;
  transform:translateX(-50%);display:flex;gap:clamp(12px,3vw,28px);flex-wrap:wrap;
  justify-content:center;width:min(880px,94vw)}
.nodo{display:flex;align-items:center;gap:12px;padding:14px 20px;border-radius:16px;
  background:rgba(6,10,17,.8);border:1px solid var(--linea);backdrop-filter:blur(12px)}
.nodo i{width:10px;height:10px;border-radius:50%;background:var(--azul);
  box-shadow:0 0 14px var(--azul);animation:nodo-late 1.6s ease-in-out infinite}
@keyframes nodo-late{50%{opacity:.45}}
.nodo span{font-size:14px;color:var(--tx2)}
.nodo b{font-size:10px;letter-spacing:.2em;color:var(--verde)}

/* ── 9 · Pulsos del planeta final ── */
.pulsos i{position:absolute;width:9px;height:9px;border-radius:50%;z-index:2;
  background:var(--azul);box-shadow:0 0 16px var(--azul);
  animation:pulso-mapa 2.4s ease-out infinite}
@keyframes pulso-mapa{0%{box-shadow:0 0 0 0 rgba(139,199,255,.7)}
  100%{box-shadow:0 0 0 26px rgba(139,199,255,0)}}

/* ── 10 · Cierre ── */
.esc-cierre{background:radial-gradient(ellipse 60% 45% at 50% 42%,rgba(20,40,70,.4),transparent 70%),#000}
.cierre-lema{font-family:var(--display);font-weight:200;
  font-size:clamp(28px,4.6vw,60px);letter-spacing:.12em;text-indent:.12em}
.cierre-logo{width:clamp(150px,15vw,210px);margin:34px auto 40px;opacity:.97}
.cierre-cta{display:flex;gap:16px;justify-content:center;flex-wrap:wrap}
.btn-principal,.btn-fantasma{padding:16px 34px;border-radius:999px;font-size:14.5px;
  font-weight:500;transition:transform .15s,box-shadow .25s}
.btn-principal{background:#fff;color:#000}
.btn-principal:hover{box-shadow:0 0 40px rgba(255,255,255,.3);transform:translateY(-1px)}
.btn-fantasma{border:1px solid var(--linea2);color:var(--tx2)}
.btn-fantasma:hover{border-color:var(--azul);color:#fff;box-shadow:0 0 30px var(--glow)}

/* ══════════ FUNCIONES ══════════ */
.funciones{position:relative;padding:clamp(90px,14vh,160px) clamp(20px,6vw,90px);
  max-width:1240px;margin:0 auto}
.seccion-etq{font-size:11px;letter-spacing:.34em;color:var(--azul);margin-bottom:16px}
.funciones-titulo{font-family:var(--display);font-weight:200;
  font-size:clamp(30px,4.4vw,54px);letter-spacing:-.02em;margin-bottom:46px}
/* Lista grande con líneas finas (ref. Terafab): título a la izquierda, texto a la derecha */
.funciones-grid{display:flex;flex-direction:column;border-top:1px solid var(--linea)}
.fn{display:grid;grid-template-columns:minmax(220px,38%) 1fr;gap:clamp(18px,4vw,60px);align-items:start;
  padding:clamp(22px,3vw,34px) 0;border-bottom:1px solid var(--linea);
  opacity:0;transform:translateY(18px);transition:opacity .7s ease,transform .7s ease,border-color .3s}
.fn.visto{opacity:1;transform:none}
.fn:hover{border-bottom-color:rgba(139,199,255,.45)}
.fn h3{font-family:var(--display);font-weight:300;font-size:clamp(20px,2.3vw,30px);letter-spacing:-.01em;line-height:1.15}
.fn p{font-size:clamp(14px,1.25vw,17px);line-height:1.6;color:var(--muted);max-width:640px}
@media(max-width:760px){.fn{grid-template-columns:1fr;gap:8px}}
@media(prefers-reduced-motion:reduce){.fn{opacity:1;transform:none;transition:none}}

/* Lema de marca bajo el logo del héroe */
.heroe-lema{margin-top:14px;font-size:clamp(10px,1vw,12.5px);letter-spacing:.3em;text-indent:.3em;
  color:var(--muted);text-shadow:0 1px 14px rgba(0,0,0,.8)}
.heroe-lema b{font-weight:700;color:#fff}

/* ══════════ CIERRE ══════════ */
.cierre{position:relative;padding:clamp(110px,18vh,200px) clamp(20px,6vw,90px);text-align:center;
  background:radial-gradient(60% 50% at 50% 100%,rgba(120,190,255,.12),transparent 70%)}
.cierre h2{font-family:var(--display);font-weight:200;font-size:clamp(40px,7vw,96px);letter-spacing:-.03em;line-height:1}
.cierre-sub{margin-top:18px;color:var(--tx2);font-size:clamp(14px,1.4vw,18px)}
.cierre-cta{display:flex;gap:14px;justify-content:center;margin-top:36px;flex-wrap:wrap}
.cierre-cta .btn-principal,.cierre-cta .btn-fantasma{display:inline-flex;align-items:center;gap:10px}

/* ══════════ PIE ══════════ */
.pie{display:flex;flex-direction:column;align-items:center;gap:14px;
  padding:60px 20px 70px;border-top:1px solid var(--linea)}
.pie img{width:120px;opacity:.9}
.pie p{font-size:12px;letter-spacing:.2em;color:var(--faint)}
.pie nav{display:flex;gap:22px;font-size:13px;color:var(--muted)}
.pie nav a:hover{color:#fff}

/* ══════════ MÓVIL (adaptación digna; el pulido fino viene después) ══════════ */
@media(max-width:760px){
  .nav-cta-fantasma{display:none}
  /* En el celular no caben todos: "Funciones" está a un scroll, se oculta */
  .nav-enlaces a{white-space:nowrap}
  .nav-enlaces a[href$="#funciones"]{display:none}
  .hud-ruta{right:12px;top:24%;transform:none;width:60vw}
  .hud-chips{right:12px;left:auto}
  .tarjeta-datos{right:50%;transform:translate(50%,0);top:auto;
    bottom:calc(24px + env(safe-area-inset-bottom,0px))}
  .izq-centro{top:clamp(84px,14vh,140px);transform:none}
  .ondas{left:50%;top:38%}
  .red-nodos{flex-direction:column;align-items:center}
}

/* ══════════ MOVIMIENTO REDUCIDO: la historia entera, sin cine ══════════ */
@media(prefers-reduced-motion:reduce){
  .pelicula{height:auto}
  .escenario{position:static;height:auto;overflow:visible}
  .esc{position:relative;inset:auto;opacity:1!important;visibility:visible!important;
    min-height:88vh;transform:none!important}
  .scroll-pista span,.sos-anillos i,.ondas i,.nodo i,.pulsos i{animation:none}
}