/* ==========================================================================
   Quantum FX · Banco de durabilidad UCP

   Capa previa al hero. Todo vive bajo .fx-*: si el 3D no arranca, basta con
   que html lleve la clase fx-off y el sitio queda exactamente como antes.

   Se apoya en las variables de ucp.css para no inventar una segunda paleta.
   ========================================================================== */

/* Sin 3D: el bloque no existe. El sitio arranca en el hero de siempre. */
html.fx-off .fx{display:none}
html:not(.fx-on) .fx{display:none}

.fx{position:relative}

/* El lienzo va fijo mientras el recorrido está en pantalla. Fuera de él se
   oculta para no tapar el resto del sitio ni seguir componiendo. */
.fx-canvas{
  position:fixed;inset:0;width:100%;height:100%;display:block;z-index:0;
  opacity:0;transition:opacity .35s ease;pointer-events:none;
}
html.fx-viendo .fx-canvas{opacity:1}

/* Papel milimétrico: liga visual con el plano técnico del hero */
.fx-malla,.fx-grano,.fx-vineta{
  position:fixed;inset:0;pointer-events:none;z-index:1;
  opacity:0;transition:opacity .35s ease;
}
html.fx-viendo .fx-malla{opacity:.5}
html.fx-viendo .fx-grano{opacity:.055}
html.fx-viendo .fx-vineta{opacity:1}

.fx-malla{
  background-image:
    linear-gradient(rgba(92,135,178,.055) 1px, transparent 1px),
    linear-gradient(90deg, rgba(92,135,178,.055) 1px, transparent 1px);
  background-size:44px 44px;
  mask-image:radial-gradient(120% 90% at 50% 45%, #000 20%, transparent 78%);
  -webkit-mask-image:radial-gradient(120% 90% at 50% 45%, #000 20%, transparent 78%);
}
.fx-grano{
  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='.85' numOctaves='2'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
}
.fx-vineta{
  background:radial-gradient(125% 95% at 50% 42%, transparent 42%, rgba(0,0,0,.82) 100%);
}

/* La altura de la pista define cuánto dura el recorrido */
.fx-pista{position:relative;z-index:2;height:640vh}

/* ---------- Capítulos ---------- */
.fx-cap{
  position:fixed;left:clamp(20px,5.5vw,84px);
  bottom:clamp(96px,17vh,168px);
  max-width:min(520px,84vw);
  opacity:0;transform:translateY(16px);
  transition:opacity .55s ease, transform .55s ease;
  pointer-events:none;z-index:3;
}
html.fx-viendo .fx-cap.on{opacity:1;transform:none}
.fx-cap .eyebrow{color:var(--rojo-claro);margin-bottom:14px}
html[data-tema="claro"] .fx-cap .eyebrow{color:var(--rojo)}
.fx-cap h2{
  font-size:clamp(30px,5.6vw,66px);line-height:.94;letter-spacing:-.025em;
  text-shadow:0 6px 44px rgba(0,0,0,.75);
}
.fx-cap h2 em{color:var(--rojo-claro);font-style:italic}
.fx-cap p{
  margin-top:15px;font-size:clamp(14px,1.75vw,17px);line-height:1.6;
  color:var(--texto-2);max-width:42ch;text-shadow:0 2px 22px rgba(0,0,0,.9);
}

.fx-cap--fin{
  left:50%;transform:translate(-50%,16px);text-align:center;
  bottom:clamp(44px,10vh,104px);max-width:min(660px,90vw);
}
html.fx-viendo .fx-cap--fin.on{transform:translate(-50%,0)}
.fx-cap--fin p{margin-left:auto;margin-right:auto}
.fx-cap--fin .btn{margin-top:22px;pointer-events:auto}

/* ---------- Instrumentos ---------- */
.fx-contador{
  position:fixed;right:clamp(16px,4vw,48px);
  top:calc(env(safe-area-inset-top,0px) + clamp(72px,10vh,110px));
  z-index:3;text-align:right;opacity:0;transition:opacity .5s ease;
}
html.fx-viendo .fx-contador.on{opacity:1}
.fx-contador b{
  display:block;font-family:var(--font-display);font-style:italic;font-weight:800;
  font-size:clamp(27px,4.2vw,46px);line-height:1;letter-spacing:-.02em;
  font-variant-numeric:tabular-nums;
}
.fx-contador span{
  display:block;margin-top:5px;font-family:var(--font-mono);font-size:10px;
  letter-spacing:.2em;text-transform:uppercase;color:var(--texto-3);
}
.fx-contador i{
  display:block;margin-top:9px;width:clamp(96px,16vw,150px);height:2px;
  background:rgba(146,168,190,.2);margin-left:auto;overflow:hidden;
}
.fx-contador i b{display:block;height:100%;width:0;background:var(--rojo);font-size:0}

.fx-sello{
  position:fixed;left:clamp(16px,4vw,48px);
  top:calc(env(safe-area-inset-top,0px) + clamp(72px,10vh,110px));
  z-index:3;font-family:var(--font-mono);font-size:11px;
  letter-spacing:.14em;text-transform:uppercase;color:var(--texto-3);
  line-height:1.7;opacity:0;transition:opacity .5s ease;
}
html.fx-viendo .fx-sello{opacity:1}
.fx-sello b{color:var(--texto);font-weight:600;letter-spacing:.1em}

/* Etiquetas de pieza, colocadas proyectando el 3D a la pantalla */
.fx-etq{
  position:fixed;z-index:3;pointer-events:none;transform:translate(-50%,-50%);
  opacity:0;transition:opacity .3s ease;
  font-family:var(--font-mono);font-size:10.5px;letter-spacing:.13em;
  text-transform:uppercase;white-space:nowrap;color:var(--texto-2);
}
html.fx-viendo .fx-etq.on{opacity:1}
.fx-etq::before{
  content:'';position:absolute;left:-7px;top:50%;width:5px;height:5px;
  margin-top:-2.5px;border-radius:50%;background:var(--rojo);
}

.fx-hint{
  position:fixed;left:50%;bottom:calc(env(safe-area-inset-bottom,0px) + 22px);
  transform:translateX(-50%);z-index:3;
  font-family:var(--font-mono);font-size:10.5px;letter-spacing:.18em;
  color:var(--texto-3);text-align:center;transition:opacity .4s;
  opacity:0;
}
html.fx-viendo .fx-hint{opacity:1}
.fx-hint i{
  display:block;width:1px;height:26px;margin:9px auto 0;
  background:linear-gradient(var(--texto-3),transparent);
  animation:fx-cae 1.9s ease-in-out infinite;
}
@keyframes fx-cae{
  0%{transform:scaleY(0);transform-origin:top}
  50%{transform:scaleY(1);transform-origin:top}
  51%{transform-origin:bottom}
  100%{transform:scaleY(0);transform-origin:bottom}
}

.fx-saltar{
  position:fixed;right:clamp(16px,4vw,48px);
  bottom:calc(env(safe-area-inset-bottom,0px) + 20px);
  z-index:4;font-family:var(--font-mono);font-size:10.5px;letter-spacing:.14em;
  text-transform:uppercase;color:var(--texto-3);
  background:rgba(10,14,20,.66);border:1px solid rgba(146,168,190,.2);
  padding:9px 15px;border-radius:100px;cursor:pointer;
  backdrop-filter:blur(8px);opacity:0;transition:opacity .4s,color .15s;
}
html.fx-viendo .fx-saltar{opacity:1}
.fx-saltar:hover{color:var(--texto);border-color:rgba(146,168,190,.45)}

/* Mientras corre el recorrido, la barra superior estorba menos translúcida */
html.fx-viendo .top{background:rgba(8,11,16,.55);backdrop-filter:blur(10px)}

@media (prefers-reduced-motion:reduce){
  .fx-cap,.fx-contador,.fx-etq,.fx-canvas{transition:none}
  .fx-hint i{animation:none}
}
@media (max-width:760px){
  .fx-pista{height:540vh}
  .fx-cap{left:18px;right:18px;max-width:none;bottom:clamp(88px,15vh,130px)}
  .fx-cap p{max-width:none}
  .fx-sello{font-size:10px}
  .fx-etq{font-size:9.5px}
}