/* Cruzial v8 · Intro «interruptor»: linterna en la oscuridad → clic/toque = «clac» → focos con parpadeo y polvo en los haces
   → la cámara se aleja a la carretera → la web. Configuración en assets/intro-focos.js (CRUZIAL_INTRO). Sin JS no aparece.
   Al final: escena de carretera de la portada (.v8-escena). */
.focos-on body{overflow:hidden}
.focos-on body::before{content:"";position:fixed;inset:0;z-index:199;background:#03060f} /* tapa mientras carga el JS */
.focos-ready body::before{display:none}
.fx{position:fixed;inset:0;z-index:200;overflow:hidden;background:#050a18;color:#fff;-webkit-tap-highlight-color:transparent;contain:strict;--mx:62%;--my:38%}
.fx:not(.is-run):not(.is-touch){cursor:none}
.fx-stage{position:absolute;left:0;top:0;transform-origin:0 0;will-change:transform}
.fx-stage img{position:absolute;inset:0;width:100%;height:100%;max-width:none;display:block;object-fit:cover}
.fx-on{opacity:0}
.fx-glow{position:absolute;width:9%;aspect-ratio:1;transform:translate(-50%,-50%);border-radius:50%;opacity:0;pointer-events:none;mix-blend-mode:screen;
  background:radial-gradient(circle,#fff 0%,#fff6e0 10%,rgba(255,236,200,.55) 24%,rgba(255,220,170,.18) 46%,rgba(255,220,170,0) 70%)}
.fx-glow::after{content:"";position:absolute;left:-90%;right:-90%;top:47%;height:6%;border-radius:50%;background:linear-gradient(90deg,rgba(255,240,215,0),rgba(255,240,215,.75),rgba(255,240,215,0))}
.fx-bloom{position:absolute;transform:translate(-50%,-50%);opacity:0;pointer-events:none;mix-blend-mode:screen;border-radius:50%;
  background:radial-gradient(closest-side,rgba(235,242,255,.55),rgba(235,242,255,.18) 55%,rgba(235,242,255,0))}
.fx-stage::after{content:"";position:absolute;inset:-1px;pointer-events:none;background:linear-gradient(180deg,#050a18 0%,rgba(5,10,24,0) 9%,rgba(5,10,24,0) 88%,#050a18 100%)}
/* plano de lejos (carretera) */
.fx-wide{position:absolute;inset:0;transform-origin:0 0;opacity:0;pointer-events:none;will-change:opacity;background:linear-gradient(180deg,#0a1634 0%,#0b1838 45%,#070c16 100%)}
.fx-wide-box{position:absolute;overflow:hidden}
.fx-wide-media{position:absolute;inset:0;width:100%;height:100%;max-width:none;object-fit:cover;display:block}
@media(max-aspect-ratio:1/1){.fx-wide-box{-webkit-mask-image:linear-gradient(180deg,#0000 0,#000 14%,#000 86%,#0000 100%);mask-image:linear-gradient(180deg,#0000 0,#000 14%,#000 86%,#0000 100%)}}
/* oscuridad con linterna: el cursor deja ver el monoposte apagado */
.fx-dark{position:absolute;inset:0;pointer-events:none;background:#02040b;
  -webkit-mask-image:radial-gradient(circle min(26vmax,300px) at var(--mx) var(--my),rgba(0,0,0,.06) 0,rgba(0,0,0,.35) 38%,#000 100%);
  mask-image:radial-gradient(circle min(26vmax,300px) at var(--mx) var(--my),rgba(0,0,0,.06) 0,rgba(0,0,0,.35) 38%,#000 100%)}
.fx-torch{position:absolute;inset:0;pointer-events:none;mix-blend-mode:screen;
  background:radial-gradient(circle min(18vmax,210px) at var(--mx) var(--my),rgba(255,226,180,.16) 0,rgba(255,226,180,.05) 45%,rgba(255,226,180,0) 70%)}
.fx-dust{position:absolute;inset:0;width:100%;height:100%;pointer-events:none}
.fx-flash{position:absolute;inset:0;pointer-events:none;opacity:0;background:radial-gradient(60% 50% at 66% 30%,rgba(255,248,232,.5),rgba(255,248,232,0) 70%)}
.fx-vig{position:absolute;inset:0;pointer-events:none;background:radial-gradient(120% 90% at 50% 40%,rgba(5,10,24,0) 55%,rgba(5,10,24,.55) 100%)}
/* anillo-cursor que late (solo ratón) */
.fx-ring{position:absolute;left:var(--mx);top:var(--my);width:46px;height:46px;margin:-23px 0 0 -23px;border-radius:50%;pointer-events:none;border:1.5px solid rgba(255,236,205,.85);box-shadow:0 0 22px rgba(255,220,170,.35),inset 0 0 12px rgba(255,220,170,.2)}
.fx-ring::before{content:"";position:absolute;inset:-10px;border-radius:50%;border:1px solid rgba(255,236,205,.45);animation:fxRing 1.8s cubic-bezier(.22,1,.36,1) infinite}
.fx-ring::after{content:"";position:absolute;left:50%;top:50%;width:6px;height:6px;margin:-3px;border-radius:50%;background:#fff3dd}
.fx.is-touch .fx-ring,.fx.is-run .fx-ring{display:none}
@keyframes fxRing{0%{transform:scale(.6);opacity:.9}100%{transform:scale(1.6);opacity:0}}
/* «clac» */
.fx-clac{position:absolute;width:20px;height:20px;margin:-10px 0 0 -10px;border-radius:50%;pointer-events:none;border:2px solid #fff;box-shadow:0 0 40px #fff,inset 0 0 30px rgba(255,255,255,.6);animation:fxClac .75s cubic-bezier(.16,1,.3,1) forwards}
@keyframes fxClac{0%{transform:scale(.4);opacity:1}100%{transform:scale(34);opacity:0;border-width:.2px}}
.fx.is-clac .fx-stage{animation:fxJolt .26s steps(4,end)}
@keyframes fxJolt{0%{translate:0 0}25%{translate:2px -1px}50%{translate:-2px 1px}75%{translate:1px 1px}100%{translate:0 0}}
/* interfaz */
.fx-hit{position:absolute;inset:0;z-index:1;width:100%;height:100%;padding:0;margin:0;border:0;background:transparent;cursor:inherit;color:transparent}
.fx-hit:focus{outline:none}
.fx-ui{position:absolute;inset:0;z-index:2;pointer-events:none;transition:opacity .45s ease}
.fx.is-run .fx-ui-cta{opacity:0;transform:translate(-50%,10px)}
.fx-ui-cta{position:absolute;left:50%;bottom:max(60px,10vh);transform:translate(-50%,0);display:flex;flex-direction:column;align-items:center;gap:14px;transition:opacity .45s ease,transform .45s ease;text-align:center;width:max-content;max-width:92vw}
.fx-brand{margin:0;font:600 13px/1.3 var(--sans,system-ui);letter-spacing:.16em;text-transform:uppercase;color:#dfe8fb;text-shadow:0 1px 12px rgba(0,0,0,.6)}
.fx-pill{margin:0;display:inline-flex;align-items:center;gap:14px;padding:10px 20px 10px 12px;border-radius:999px;color:#eef3ff;font:500 15px/1.2 var(--sans,system-ui);letter-spacing:-.005em;
  background:linear-gradient(180deg,rgba(255,255,255,.14),rgba(255,255,255,0) 60%),rgba(10,16,34,.55);border:1px solid rgba(255,255,255,.22);box-shadow:inset 0 1px 0 rgba(255,255,255,.14),0 14px 34px -16px rgba(0,0,0,.8);
  -webkit-backdrop-filter:saturate(160%) blur(14px);backdrop-filter:saturate(160%) blur(14px);animation:fxBreath 3.2s ease-in-out infinite}
.fx-hit:focus-visible~.fx-ui .fx-pill{outline:2px solid #9cc3ff;outline-offset:5px}
/* interruptor animado: la palanca baja y sube */
.fx-switch{position:relative;flex:none;width:40px;height:24px;border-radius:999px;background:rgba(255,255,255,.12);border:1px solid rgba(255,255,255,.35)}
.fx-switch i{position:absolute;top:3px;left:3px;width:16px;height:16px;border-radius:50%;background:#fff;box-shadow:0 2px 6px rgba(0,0,0,.5);animation:fxToggle 3.2s cubic-bezier(.65,0,.35,1) infinite}
.fx-switch::after{content:"";position:absolute;inset:-1px;border-radius:inherit;background:linear-gradient(90deg,#ffd98a,#fff3cf);opacity:0;animation:fxToggleBg 3.2s cubic-bezier(.65,0,.35,1) infinite;z-index:-1}
.fx-switch{isolation:isolate}
@keyframes fxToggle{0%,38%{transform:translateX(0)}50%,88%{transform:translateX(16px)}100%{transform:translateX(0)}}
@keyframes fxToggleBg{0%,38%{opacity:0}50%,88%{opacity:1}100%{opacity:0}}
@keyframes fxBreath{0%,100%{box-shadow:inset 0 1px 0 rgba(255,255,255,.14),0 14px 34px -16px rgba(0,0,0,.8),0 0 0 0 rgba(255,226,170,0)}50%{box-shadow:inset 0 1px 0 rgba(255,255,255,.14),0 14px 34px -16px rgba(0,0,0,.8),0 0 30px 2px rgba(255,226,170,.18)}}
.fx-skip{pointer-events:auto;position:absolute;top:max(16px,env(safe-area-inset-top));right:max(16px,env(safe-area-inset-right));min-height:44px;padding:0 18px;border-radius:999px;font:500 14px/1 var(--sans,system-ui);color:#fff;cursor:pointer;
  background:linear-gradient(180deg,rgba(255,255,255,.12),rgba(255,255,255,0) 50%),rgba(12,20,44,.55);border:1px solid rgba(255,255,255,.28);box-shadow:inset 0 1px 0 rgba(255,255,255,.16);
  -webkit-backdrop-filter:saturate(160%) blur(14px);backdrop-filter:saturate(160%) blur(14px)}
.fx-skip:hover{background:rgba(12,20,44,.75)}
.fx-skip:focus-visible{outline:2px solid #9cc3ff;outline-offset:4px}
.fx-proto{position:absolute;left:max(16px,env(safe-area-inset-left));bottom:14px;margin:0;font:400 11px/1.3 var(--sans,system-ui);color:#b4bfd6}
.fx.is-out{transition:opacity .45s ease;opacity:0}
@media(max-width:640px){.fx-pill{font-size:14px;padding:9px 18px 9px 10px}.fx-ui-cta{bottom:max(56px,9vh)}.fx-brand{font-size:11px}}
@media(prefers-reduced-motion:reduce){.fx-pill,.fx-switch i,.fx-switch::after,.fx-ring::before{animation:none}.fx.is-out{transition-duration:.6s}}
@media(prefers-reduced-transparency:reduce){.fx-pill{background:#0a1022;-webkit-backdrop-filter:none;backdrop-filter:none}.fx-skip{background:#0c142c;-webkit-backdrop-filter:none;backdrop-filter:none}}

/* ---------- Portada v8: escena de carretera en bucle ---------- */
.v8-hero .v6-sticky{background:#0a1634}
.v8-escena{overflow:hidden;background:#0a1634}
.v8-escena .v8-media{position:absolute;inset:0;width:100%;height:100%;max-width:none;object-fit:cover;object-position:var(--v8-pos,64% 50%);display:block;
  transform:translate3d(calc(var(--v8-px,0) * -14px),calc(var(--v8-py,0) * -8px),0) scale(1.035);transition:transform .9s cubic-bezier(.22,1,.36,1)}
.v8-escena .v8-video{opacity:0;transition:opacity .6s ease,transform .9s cubic-bezier(.22,1,.36,1)}
.v8-escena.has-video .v8-video{opacity:1}
.v8-pause{position:absolute;z-index:3;right:var(--gutter,22px);top:20px;width:40px;height:40px;padding:0;border-radius:50%;display:grid;place-items:center;color:#fff;cursor:pointer;
  background:linear-gradient(180deg,rgba(255,255,255,.12),rgba(255,255,255,0) 50%),rgba(12,20,44,.55);border:1px solid rgba(255,255,255,.28);box-shadow:inset 0 1px 0 rgba(255,255,255,.16),0 8px 20px -10px rgba(0,0,0,.5);
  -webkit-backdrop-filter:saturate(160%) blur(12px);backdrop-filter:saturate(160%) blur(12px)}
.v8-pause:hover{background:rgba(12,20,44,.75)}
.v8-pause:focus-visible{outline:2px solid #9cc3ff;outline-offset:3px}
.v8-pause svg{width:14px;height:14px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round}
.v8-pause .i-play{display:none;fill:currentColor;stroke:none}
.v8-pause[aria-pressed=true] .i-pause{display:none}.v8-pause[aria-pressed=true] .i-play{display:block}
.v8-hero .v6-shade{background:linear-gradient(90deg,#071230e6 0%,#071230a6 30%,#07123000 58%)!important}
@media(max-aspect-ratio:1/1){.v8-escena .v8-media{object-position:var(--v8-pos-sm,83% 60%)}}
@media(max-width:640px){
  html:not(.v6-on) .v8-hero .v8-escena{height:min(100vw,60svh)}
  .v8-escena::after{content:"";position:absolute;left:0;right:0;bottom:-1px;height:28%;background:linear-gradient(0deg,#0a1634,#0a163400);pointer-events:none}
  .v8-pause{top:calc(min(100vw,60svh) - 52px);bottom:auto;left:auto;right:12px;width:36px;height:36px}
  html:not(.v6-on) .v8-hero .v6-cap{top:8px;bottom:auto;right:auto;left:12px;color:#d0d9ea}
}
@media(prefers-reduced-motion:reduce){.v8-escena .v8-media{transform:none;transition:none}}
@media(prefers-reduced-transparency:reduce){.v8-pause{background:#0c142c;-webkit-backdrop-filter:none;backdrop-filter:none}}
/* v8 · sin scroll horizontal: el vídeo de portada (escala del parallax) y la cinta de texto quedan recortados */
html{overflow-x:hidden}
@supports (overflow:clip){html,body{overflow-x:clip}}
.v8-hero,.v8-escena,.marquee{overflow:hidden}
@supports (overflow:clip){.v8-hero,.v8-escena,.marquee{overflow-x:clip}}

/* v8b · capas nítidas del cartel: se re-rasterizan a la escala de la cámara (sin will-change:transform en .fx-wide), el texto no se pixela */
.fx-cartel,.fx-cartel-w{position:absolute;display:block;max-width:none;pointer-events:none;opacity:0;image-rendering:auto;backface-visibility:hidden}
.fx-cartel-w{opacity:1}
.v8-escena .v8-cartel{pointer-events:none}
.v8-escena .v8-cartel img{position:absolute;display:block;max-width:none;image-rendering:auto}