/* ============================================================================
   ORVEXIA WORLD — capa de experiencia interactiva (2.5D)  ·  v2
   ----------------------------------------------------------------------------
   Sistema modular reutilizable. NO toca ninguna regla existente del sitio:
   todos los selectores viven bajo .oxw / --oxw-*. Se puede quitar borrando
   el <link>, el <script> y la <section id="world"> sin efectos colaterales.

   Modelo espacial
     .oxw-stage  -> perspective (la "lente" de la camara)
     .oxw-scene  -> se mueve/rota (la camara: translate3d + rotateX/Y)
     .oxw-l      -> planos a distinto translateZ (parallax real por perspectiva)
     .oxw-stop   -> cada destino del recorrido, separado por --gap

   Todo lo animado usa transform/opacity: compone en GPU, sin reflow.
   ========================================================================= */

.oxw{
  --oxw-h: 620vh;              /* longitud del viaje (scroll) */
  --cx: 0px; --cy: 0px; --cz: 0px;   /* camara */
  --rx: 0deg; --ry: 0deg; --rz: 0deg;
  --gap: 1200px;               /* distancia entre destinos (la fija el JS) */
  --speed: 0;                  /* 0..1 — cuanto corre la camara ahora mismo */
  --p: 0;                      /* progreso global 0..1 */
  position: relative;
  height: var(--oxw-h);
  isolation: isolate;
}

.oxw-stage{
  position: sticky; top: 0;
  height: 100vh; height: 100svh;
  overflow: hidden;
  perspective: 1100px;
  perspective-origin: 50% 42%;
  /* Linea de suelo: el personaje pisa aqui y por debajo queda la banda de
     texto. Todo lo demas (rejilla, horizonte, sombra) se referencia a ella. */
  --floor: 40%;
  contain: layout paint;
  background:
    radial-gradient(120% 80% at 50% 118%, rgba(255,106,0,.16), transparent 62%),
    radial-gradient(80% 60% at 50% -10%, rgba(47,107,255,.07), transparent 60%);
}

/* Vineteado: enfoca el centro y disimula los bordes de los planos. */
.oxw-stage::after{
  content:""; position:absolute; inset:0; z-index:6; pointer-events:none;
  background: radial-gradient(120% 78% at 50% 50%, transparent 52%, rgba(0,0,0,.62) 100%);
}

.oxw-scene{
  position:absolute; inset:0;
  transform-style: preserve-3d;
  /* ORDEN IMPORTANTE: primero girar, despues desplazar. Asi la escena rota
     alrededor de la camara (paneo real) y no alrededor del origen del mundo,
     que lanzaria por los aires todo lo que esta lejos del centro. */
  transform: rotateX(var(--rx)) rotateY(var(--ry)) rotateZ(var(--rz))
             translate3d(var(--cx), var(--cy), var(--cz));
  will-change: transform;
}

.oxw-l{ position:absolute; inset:0; transform-style:preserve-3d; }

/* ---------------------------------------------------------------- FONDO --- */
.oxw-bg{
  transform: translateZ(-620px) scale(1.62);
  /* Desenfoque de movimiento: solo en calidad alta, solo mientras la camara
     corre de verdad. Es lo que hace que un paneo rapido se sienta rapido. */
  filter: blur(calc(var(--mb, 0) * 1px));
}

.oxw-grid{
  position:absolute; left:-140%; right:-140%; bottom:calc(var(--floor) - 9%); height:66%;
  background:
    repeating-linear-gradient(90deg, rgba(255,106,0,.16) 0 1px, transparent 1px 84px),
    repeating-linear-gradient(0deg,  rgba(255,255,255,.07) 0 1px, transparent 1px 84px);
  transform: rotateX(74deg);
  transform-origin: 50% 100%;
  mask-image: linear-gradient(to top, #000 8%, transparent 84%);
  -webkit-mask-image: linear-gradient(to top, #000 8%, transparent 84%);
  opacity:.75;
}

.oxw-horizon{
  position:absolute; left:-140%; right:-140%; bottom:calc(var(--floor) + 17%); height:1px;
  background: linear-gradient(90deg, transparent, rgba(255,106,0,.75) 30%, rgba(255,106,0,.75) 70%, transparent);
  box-shadow: 0 0 60px 12px rgba(255,106,0,.18);
}

/* "Arquitectura" lejana: siluetas abstractas, nada figurativo. */
.oxw-towers{ position:absolute; left:-140%; right:-140%; bottom:calc(var(--floor) + 17%); height:30%; opacity:.5; }
.oxw-towers i{
  position:absolute; bottom:0; display:block; width:var(--w,44px); height:var(--h,120px);
  background: linear-gradient(180deg, rgba(255,255,255,.09), rgba(255,255,255,.02) 60%, transparent);
  border:1px solid rgba(255,255,255,.07); border-bottom:0; border-radius:3px 3px 0 0;
}
.oxw-towers i::after{
  content:""; position:absolute; inset:auto 0 0 0; height:2px;
  background: linear-gradient(90deg, transparent, rgba(255,106,0,.6), transparent);
}

/* --------------------------------------------------------------- MEDIO ---- */
.oxw-mid{ transform: translateZ(-120px) scale(1.11); }

/* Cada destino ocupa su propia "sala", separada por --gap. */
.oxw-stop{
  position:absolute; inset:0;
  transform: translateX(calc(var(--i) * var(--gap)));
  transform-style: preserve-3d;
}

/* Modulo de producto. */
.oxw-module{
  position:absolute; left:40%; top:32%;
  width: min(400px, 78vw);
  transform: translate(-50%,-50%) translateY(46px) scale(.9);
  opacity:0;
  border-radius: 22px;
  border:1px solid rgba(255,255,255,.10);
  background: linear-gradient(180deg, rgba(22,23,26,.86), rgba(12,13,15,.9));
  box-shadow: 0 40px 90px -40px rgba(0,0,0,.9), 0 0 0 1px rgba(255,106,0,.05) inset;
  backdrop-filter: blur(9px); -webkit-backdrop-filter: blur(9px);
  padding: 20px 20px 18px;
  transition: opacity .45s ease, transform .62s cubic-bezier(.16,1.02,.3,1);
}
/* El destino activo aterriza con un rebote corto. */
.oxw-stop.active .oxw-module{
  opacity:1; transform: translate(-50%,-50%) translateY(0) scale(1);
}
.oxw-stop.seen .oxw-module{ opacity:.5; transform: translate(-50%,-50%) translateY(0) scale(.96); }

.oxw-module::before{
  content:""; position:absolute; inset:-1px; border-radius:inherit; pointer-events:none;
  background: radial-gradient(120% 90% at 50% -20%, rgba(255,106,0,.34), transparent 62%);
  opacity: var(--glow, 0); transition: opacity .4s ease;
}
/* Anillo que sale disparado cuando el Boy senala este modulo. */
.oxw-module::after{
  content:""; position:absolute; inset:-2px; border-radius:inherit; pointer-events:none;
  border:2px solid rgba(255,106,0,.85); opacity:0;
}
.oxw-stop.ping .oxw-module::after{ animation: oxwPing .72s cubic-bezier(.2,.8,.3,1) 1; }
@keyframes oxwPing{
  0%  { opacity:.95; transform:scale(1);    filter:blur(0) }
  100%{ opacity:0;   transform:scale(1.16); filter:blur(3px) }
}

.oxw-mod-head{ display:flex; align-items:center; gap:12px; }
.oxw-mod-head img{ width:46px; height:46px; border-radius:12px; display:block; }
.oxw-mod-head b{ font-size:17px; letter-spacing:-.01em; color:var(--text); display:block; }
.oxw-mod-head .oxw-mod-t{ min-width:0; }
.oxw-mod-sub{ font-size:12px; color:var(--text-3); display:block; }
.oxw-badge{
  margin-left:auto; font-size:10.5px; letter-spacing:.06em; text-transform:uppercase;
  color:#ffb37a; border:1px solid rgba(255,106,0,.32); background:rgba(255,106,0,.10);
  border-radius:999px; padding:4px 9px; white-space:nowrap;
}
.oxw-mod-body{ margin:14px 0 0; display:grid; gap:8px; list-style:none; padding:0; }

/* Hotspots: el dato siempre esta escrito (nadie pierde informacion); el
   cursor solo lo resalta y hace reaccionar al personaje. */
.oxw-hot{
  display:flex; align-items:center; gap:10px; width:100%; text-align:left;
  padding:10px 12px; border-radius:12px;
  border:1px solid rgba(255,255,255,.07); background:rgba(255,255,255,.025);
  color:var(--text-2); font-family:var(--font); font-size:13px;
  transition: transform .28s cubic-bezier(.2,.7,.2,1), background .28s, border-color .28s, color .28s;
}
.oxw-hot i{
  width:8px; height:8px; border-radius:50%; background:var(--orange); flex:none;
}
.oxw-hot em{ font-style:normal; margin-left:auto; color:var(--text-4); font-size:11.5px; opacity:.62; transition:opacity .28s; }
.oxw-hot:hover{
  transform: translateX(4px) scale(1.015);
  background: rgba(255,106,0,.07); border-color: rgba(255,106,0,.28); color: var(--text);
}
.oxw-hot:hover em{ opacity:1; }
/* Al senalar, las tres lineas del modulo activo se encienden en cascada. */
.oxw-stop.ping .oxw-hot{ animation: oxwLine .5s ease both; }
.oxw-stop.ping .oxw-hot:nth-child(2){ animation-delay:.07s }
.oxw-stop.ping .oxw-hot:nth-child(3){ animation-delay:.14s }
@keyframes oxwLine{
  0%  { border-color:rgba(255,106,0,.55); background:rgba(255,106,0,.10); transform:translateX(6px) }
  100%{ border-color:rgba(255,255,255,.07); background:rgba(255,255,255,.025); transform:none }
}

/* Paneles flotantes (UI de apoyo, no decoracion vacia). */
.oxw-panel{
  position:absolute; border-radius:14px; padding:11px 13px;
  border:1px solid rgba(255,255,255,.09);
  background: linear-gradient(180deg, rgba(20,21,24,.82), rgba(12,13,15,.86));
  box-shadow: 0 24px 50px -28px rgba(0,0,0,.9);
  backdrop-filter: blur(7px); -webkit-backdrop-filter: blur(7px);
  font-family: var(--mono); font-size:11.5px; color:var(--text-3);
  opacity:0; transition: opacity .5s ease, transform .6s cubic-bezier(.16,1.02,.3,1);
}
.oxw-panel b{ color:var(--text); font-family:var(--font); font-size:12.5px; display:block; margin-bottom:5px; letter-spacing:-.01em; }
.oxw-panel .ok{ color:#4ade80; }
.oxw-panel .warn{ color:#ffb37a; }
.oxw-pa{ left:4%;  top:13%;    transform: translate3d(-26px, 16px, 60px); }
.oxw-pb{ left:66%; bottom:44%; transform: translate3d( 26px, 16px, 30px); }
.oxw-stop.active .oxw-panel{ opacity:1; }
.oxw-stop.active .oxw-pa{ transform: translate3d(0,0,60px); transition-delay:.10s; }
.oxw-stop.active .oxw-pb{ transform: translate3d(0,0,30px); transition-delay:.18s; }

/* ------------------------------------------------------ PLANO CERCANO -----
   Lo que de verdad vende la profundidad en un vuelo: cosas que pasan PEGADAS
   a la lente y se salen de cuadro. Estas columnas viven muy por delante del
   plano medio, asi que con el mismo movimiento de camara se desplazan mucho
   mas y barren la pantalla. Formas abstractas: ni una sola copiada de nada. */
.oxw-near{
  transform: translateZ(210px);
  filter: blur(calc(var(--mb, 0) * 0.55px));
}
.oxw-slab{
  position:absolute; display:block;
  left: calc(var(--sx) * var(--gap));
  bottom: calc(var(--floor) - 4%);
  width: var(--w, 90px); height: var(--h, 46%);
  background:
    linear-gradient(180deg, rgba(255,255,255,.05), rgba(255,255,255,.015) 55%, transparent),
    linear-gradient(90deg, rgba(255,106,0,.10), transparent 40%);
  border:1px solid rgba(255,255,255,.08);
  border-bottom:0; border-radius:4px 4px 0 0;
  opacity: var(--o, .5);
  transform: translateX(-50%) translateZ(var(--sz, 0px));
}
/* Filo encendido: el borde que pasa cerca es lo que se lee como velocidad. */
.oxw-slab::before{
  content:""; position:absolute; inset:auto 0 0 0; height:2px;
  background: linear-gradient(90deg, transparent, rgba(255,140,40,.75), transparent);
}
.oxw-slab::after{
  content:""; position:absolute; top:12%; bottom:0; left:6px; width:2px;
  background: linear-gradient(180deg, rgba(255,140,40,.55), transparent);
}
.oxw-slab.tall{ height: var(--h, 66%); }

/* Fogonazo al llegar a un destino: la luz que suelta el video al pasar por
   delante de una pieza. Solo dispara una vez por parada. */
.oxw-flare{
  position:absolute; left:40%; top:32%; width:min(520px,80vw); height:min(520px,80vw);
  transform: translate(-50%,-50%) scale(.2);
  border-radius:50%; pointer-events:none; opacity:0;
  background: radial-gradient(50% 50% at 50% 50%, rgba(255,190,120,.55), rgba(255,106,0,.22) 38%, transparent 68%);
}
.oxw-stop.ping .oxw-flare{ animation: oxwFlare .9s cubic-bezier(.1,.75,.25,1) 1; }
@keyframes oxwFlare{
  0%  { opacity:.95; transform:translate(-50%,-50%) scale(.18) }
  100%{ opacity:0;   transform:translate(-50%,-50%) scale(1.5) }
}

/* ----------------------------------------------------------- PRIMER PLANO - */
.oxw-fg{ transform: translateZ(40px); }

.oxw-boy{
  --boyh: clamp(178px, 29vh, 300px);   /* alto del personaje: ancla el orbe */
  position:absolute; left:50%; bottom:var(--floor);
  height: var(--boyh);
  transform: translate3d(calc(-50% + var(--bx,0px)), var(--by,0px), 0)
             scale(var(--bs,1)) rotate(var(--lean, 0deg));
  /* Sin transicion en transform: la posicion la fija el bucle en cada frame.
     Una transicion aqui haria que el personaje llegase tarde a la camara. */
  transition: opacity .55s ease;
  will-change: transform;
  filter: drop-shadow(0 26px 30px rgba(0,0,0,.55));
  opacity:0;                       /* el personaje entra en escena, no aparece */
  width:0;                         /* caja de 0px: las poses se centran en ella */
}
/* Todas las poses ocupan el mismo punto; solo cambia cual es visible.
   Asi el cambio de pose no mueve al personaje ni un pixel. */
/* Selector de hijo directo a proposito: el orbe tambien es un <img> dentro
   del personaje y no debe heredar las reglas de las poses. */
.oxw-boy > img{
  height:100%; width:auto; display:block;
  position:absolute; bottom:0; left:50%; transform:translateX(-50%);
  /* Cruce corto: durante un paneo rapido un fundido largo deja dos poses
     superpuestas y se ve el fantasma. */
  opacity:0; transition: opacity .11s ease;
  max-width:none;
}
.oxw-boy > img.on{ opacity:1; }

.oxw-boy.breathe{ animation: oxwBreathe 3.6s ease-in-out infinite; }
@keyframes oxwBreathe{
  0%,100%{ translate:0 0;    scale:1 1 }
  50%    { translate:0 -6px; scale:1 1.012 }
}
/* Caminar: rebote, balanceo y una pizca de squash — lee como pasos. */
.oxw-boy.walking{ animation: oxwWalk .44s cubic-bezier(.4,0,.5,1) infinite; }
@keyframes oxwWalk{
  0%   { translate:0 0;     rotate:-2deg;  scale:1.02 .98 }
  25%  { translate:0 -13px; rotate: 0deg;  scale:.985 1.015 }
  50%  { translate:0 0;     rotate: 2deg;  scale:1.02 .98 }
  75%  { translate:0 -13px; rotate: 0deg;  scale:.985 1.015 }
  100% { translate:0 0;     rotate:-2deg;  scale:1.02 .98 }
}
/* Senalar: golpe seco hacia el modulo y vuelta. */
.oxw-boy.pointing{ animation: oxwPoint .62s cubic-bezier(.2,1.4,.3,1) both; }
@keyframes oxwPoint{
  0%  { translate:0 0;    rotate:0deg;    scale:1 1 }
  22% { translate:-16px -6px; rotate:-7deg; scale:1.07 1.05 }
  55% { translate:-6px 0;  rotate:-3deg;  scale:1.02 1.01 }
  100%{ translate:0 0;    rotate:0deg;    scale:1 1 }
}
/* Aterrizaje al frenar tras un paneo. */
.oxw-boy.landing{ animation: oxwLand .34s cubic-bezier(.2,.9,.3,1) both; }
@keyframes oxwLand{
  0%  { scale:1.06 .9 }
  60% { scale:.97 1.05 }
  100%{ scale:1 1 }
}

/* Polvo bajo los pies mientras camina. */
.oxw-dust{
  position:absolute; bottom:2px; left:50%; width:26px; height:8px; border-radius:50%;
  background: radial-gradient(50% 50% at 50% 50%, rgba(255,150,60,.5), transparent 70%);
  opacity:0; pointer-events:none;
}
.oxw-boy.walking .oxw-dust{ animation: oxwDust .44s linear infinite; }
.oxw-boy.walking .oxw-dust.d2{ animation-delay:.22s }
@keyframes oxwDust{
  0%  { opacity:.55; translate:-50% 0    ; scale:.5 }
  100%{ opacity:0;   translate:calc(-50% + 34px) -10px; scale:1.5 }
}

/* ------------------------------------------------------------- EL ORBE ----
   El logo que sostiene en el dedo NO esta pintado en la imagen: se recorto del
   render y vive como elemento propio. Por eso gira de verdad — rotateY
   continuo con perspectiva, no un truco de escala.
   Las tres constantes (0.2868 / 0.8219 / 0.2367) salen de medir el render:
   son la posicion y el tamano exactos del orbe respecto al alto del personaje,
   asi que encaja en el dedo en cualquier tamano de pantalla. */
.oxw-orb{
  position:absolute;
  /* Recalculado sobre el render de agosto 2026 (el del calzado ORVEXIA):
     el personaje cambio de proporciones y el orbe de sitio. */
  left: calc(50% + var(--boyh) * 0.2868);
  bottom: calc(var(--boyh) * 0.8219);
  width: calc(var(--boyh) * 0.2367);
  transform: translate(-50%, 50%);
  perspective: 460px;
  opacity:0; transition: opacity .3s ease;
  pointer-events:none;
  animation: oxwOrbFloat 3.8s ease-in-out infinite;
}
.oxw-boy.has-orb .oxw-orb{ opacity:1; }

/* Halo: el orbe ilumina lo que tiene alrededor. */
.oxw-orb::before{
  content:""; position:absolute; inset:-42%; border-radius:50%;
  background: radial-gradient(50% 50% at 50% 50%, rgba(255,140,40,.42), rgba(255,106,0,.12) 46%, transparent 72%);
  animation: oxwOrbHalo 2.6s ease-in-out infinite;
}
.oxw-orb-in{ display:block; transform-style:preserve-3d; }
.oxw-orb img{
  display:block; width:100%; height:auto;
  transform-style:preserve-3d;
  animation: oxwOrbSpin 5.4s linear infinite;
  filter: drop-shadow(0 0 12px rgba(255,120,20,.55));
}
@keyframes oxwOrbSpin{ from{ transform: rotateY(0deg) } to{ transform: rotateY(360deg) } }
@keyframes oxwOrbFloat{
  0%,100%{ translate:0 0 }
  50%    { translate:0 -7px }
}
@keyframes oxwOrbHalo{
  0%,100%{ opacity:.55; scale:.94 }
  50%    { opacity:1;   scale:1.06 }
}
/* Al senalar, el orbe da una vuelta extra de golpe. */
.oxw-orb.burst .oxw-orb-in{ animation: oxwOrbBurst .95s cubic-bezier(.16,.9,.25,1) 1; }
@keyframes oxwOrbBurst{
  0%  { transform: rotateY(0deg)   scale(1) }
  35% { transform: rotateY(230deg) scale(1.16) }
  100%{ transform: rotateY(360deg) scale(1) }
}
/* En calidad baja gira igual, pero sin halo animado ni sombra de color. */
.oxw[data-q="low"] .oxw-orb::before{ animation:none; opacity:.7; }
.oxw[data-q="low"] .oxw-orb img{ filter:none; }

/* ------------------------------------------------------------- ONDAS ------
   Cada pisada abre un anillo en el suelo, como al pisar agua. Las ondas se
   quedan en el mundo (viven en el plano del personaje), asi que cuando la
   camara panea las va dejando atras — que es justo lo que hace el agua.
   Se reciclan de un pool: no se crea ni se destruye un solo nodo por paso. */
.oxw-ripples{ position:absolute; inset:0; pointer-events:none; }
.oxw-ripple{
  position:absolute; left:50%; bottom:var(--floor);
  width: clamp(78px, 10vw, 150px); height: clamp(26px, 3.4vw, 50px);
  margin-left: var(--rx, 0px);
  border-radius:50%;
  border:2px solid rgba(255,160,70,.75);
  background: radial-gradient(60% 60% at 50% 50%, rgba(255,140,40,.10), transparent 70%);
  box-shadow: 0 0 26px rgba(255,120,20,.30), inset 0 0 16px rgba(255,140,40,.22);
  opacity:0;
  transform: translate(-50%, 50%) scale(.22);
}
.oxw-ripple.go{ animation: oxwRipple 1.15s cubic-bezier(.12,.7,.28,1) forwards; }
.oxw-ripple.go.big{ animation-duration: 1.5s; }
@keyframes oxwRipple{
  0%   { opacity:1;   transform: translate(-50%,50%) scale(.18); border-width:2.6px }
  55%  { opacity:.34 }
  100% { opacity:0;   transform: translate(-50%,50%) scale(1.55); border-width:1px }
}
/* El anillo grande de aterrizaje lleva un segundo frente, mas lento. */
.oxw-ripple.big::after{
  content:""; position:absolute; inset:0; border-radius:50%;
  border:1.5px solid rgba(255,150,60,.4);
  animation: oxwRipple2 1.5s cubic-bezier(.12,.7,.28,1) .16s forwards;
}
@keyframes oxwRipple2{
  0%   { opacity:.7; transform:scale(.5) }
  100% { opacity:0;  transform:scale(1.5) }
}
/* Brillo humedo justo bajo los pies: da la lectura de "suelo mojado". */
.oxw-wet{
  position:absolute; left:50%; bottom:calc(var(--floor) - 6px);
  width: clamp(120px, 15vw, 220px); height: clamp(26px, 3vw, 44px);
  margin-left: var(--bx, 0px);
  transform: translate(-50%, 50%);
  background: radial-gradient(50% 50% at 50% 50%, rgba(255,140,50,.20), transparent 72%);
  filter: blur(6px); opacity:0; transition: opacity .35s ease;
  pointer-events:none;
}
.oxw-fg.wet .oxw-wet{ opacity:1; }

/* Sombra de contacto: ancla al personaje al suelo. */
.oxw-shadow{
  position:absolute; left:50%; bottom:calc(var(--floor) - 10px);
  width: clamp(96px, 13vw, 165px); height: 22px;
  transform: translate3d(calc(-50% + var(--bx,0px)), 0, 0) scaleX(var(--bs,1));
  background: radial-gradient(50% 50% at 50% 50%, rgba(0,0,0,.55), transparent 72%);
  filter: blur(4px);
  transition: opacity .3s;
}

/* Globo de dialogo. */
.oxw-say{
  position:absolute; left:50%; bottom: calc(var(--floor) + clamp(178px, 29vh, 300px) - 10px);
  transform: translate3d(calc(-50% + var(--bx,0px)), 0, 0);
  translate: 0 10px;
  max-width: min(300px, 74vw);
  padding:10px 14px; border-radius:14px;
  border:1px solid rgba(255,106,0,.28);
  background: linear-gradient(180deg, rgba(26,20,16,.92), rgba(14,12,12,.94));
  box-shadow: 0 20px 44px -26px rgba(0,0,0,.95);
  color: var(--text); font-size:13.5px; line-height:1.45; letter-spacing:-.01em;
  opacity:0; transition: opacity .3s ease, translate .3s cubic-bezier(.2,.9,.3,1);
  backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
  z-index:4;
}
.oxw-say.on{ opacity:1; translate: 0 0; }
.oxw-say::after{
  content:""; position:absolute; left:50%; bottom:-6px; width:11px; height:11px;
  background:inherit; border-right:1px solid rgba(255,106,0,.28); border-bottom:1px solid rgba(255,106,0,.28);
  transform: translateX(-50%) rotate(45deg);
}

/* ------------------------------------------------------------- PARTICULAS - */
.oxw-particles{ position:absolute; inset:0; z-index:2; pointer-events:none; }

/* Lineas de velocidad: aparecen solo cuando la camara corre. */
.oxw-speed{
  position:absolute; inset:0; z-index:3; pointer-events:none; opacity:var(--speed,0);
  background:
    repeating-linear-gradient(90deg,
      transparent 0 60px,
      rgba(255,150,60,.16) 60px 62px,
      transparent 62px 130px);
  mask-image: radial-gradient(70% 60% at 50% 46%, transparent 30%, #000 100%);
  -webkit-mask-image: radial-gradient(70% 60% at 50% 46%, transparent 30%, #000 100%);
  transition: opacity .18s linear;
}

/* ---------------------------------------------------------- ENTRADA / ACTO 0 */
.oxw-ignite{
  position:absolute; left:40%; top:34%; z-index:3;
  transform: translate(-50%,-50%);
  width: clamp(92px, 13vw, 148px); height: clamp(92px, 13vw, 148px);
  border-radius:50%;
  background: radial-gradient(50% 50% at 50% 50%, rgba(255,106,0,.85), rgba(255,106,0,.18) 46%, transparent 70%);
  opacity: var(--ignite, 0);
  filter: blur(2px);
  pointer-events:none;
}

/* ------------------------------------------------------------- CONTENIDO -- */
/* Texto real en el DOM: indexable, seleccionable y accesible. La experiencia
   3D lo acompana, no lo sustituye. */
.oxw-copy{
  position:absolute; inset:auto 0 0 0; z-index:5;
  padding: 0 22px calc(env(safe-area-inset-bottom, 0px) + 30px);
  display:grid; justify-items:center; text-align:center; pointer-events:none;
}
/* Velo inferior: separa la banda de texto de la escena sin taparla. */
.oxw-copy::before{
  content:""; position:absolute; left:0; right:0; bottom:0; height:200%;
  background: linear-gradient(to top, rgba(6,7,8,.94) 36%, rgba(6,7,8,.58) 64%, transparent);
  z-index:-1; pointer-events:none;
}
[data-theme="light"] .oxw-copy::before{
  background: linear-gradient(to top, rgba(247,248,250,.95) 36%, rgba(247,248,250,.6) 64%, transparent);
}
.oxw-act{
  grid-area:1/1; max-width: 780px;
  opacity:0; transform: translateY(16px); transition: opacity .45s ease, transform .45s cubic-bezier(.2,.7,.2,1);
}
.oxw-act.on{ opacity:1; transform:none; }
.oxw-act > *{ pointer-events:auto; }
.oxw-eyebrow{
  display:inline-flex; align-items:center; gap:8px; margin-bottom:12px;
  font-size:11.5px; letter-spacing:.14em; text-transform:uppercase; color:#ffb37a;
  border:1px solid rgba(255,106,0,.3); background:rgba(255,106,0,.08);
  border-radius:999px; padding:6px 12px;
}
.oxw-act h2, .oxw-act h3{
  font-size: clamp(24px, 3.5vw, 38px); line-height:1.1; letter-spacing:-.03em;
  color:var(--text); font-weight:700; margin:0;
}
.oxw-act p{
  margin-top:12px; color:var(--text-2); font-size: clamp(14px, 1.6vw, 16.5px);
  line-height:1.6; max-width: 60ch; margin-left:auto; margin-right:auto;
}
.oxw-act .oxw-cta{
  display:inline-flex; align-items:center; gap:9px; margin-top:18px;
  height:44px; padding:0 18px; border-radius:12px; text-decoration:none;
  background: linear-gradient(180deg, var(--orange-bright), var(--orange));
  color:#120a04; font-weight:640; font-size:14.5px;
  box-shadow: 0 14px 30px -16px rgba(255,106,0,.85);
  transition: transform .22s cubic-bezier(.2,.7,.2,1), box-shadow .22s;
}
.oxw-act .oxw-cta:hover{ transform: translateY(-2px); box-shadow: 0 20px 40px -18px rgba(255,106,0,.95); }
.oxw-act .oxw-cta:focus-visible{ outline:2px solid #ffb37a; outline-offset:3px; }

/* Los cuatro productos, siempre presentes; el activo se ilumina. */
.oxw-tour{
  list-style:none; padding:0; margin:16px auto 0; max-width:760px;
  display:grid; grid-template-columns:repeat(var(--n, 4), 1fr); gap:8px;
}
.oxw-tour a{
  display:block; height:100%; text-decoration:none; text-align:left;
  padding:10px 12px; border-radius:12px;
  border:1px solid var(--border); background:var(--panel-2);
  transition: border-color .3s, background .3s, transform .3s cubic-bezier(.2,.7,.2,1);
}
.oxw-tour b{ display:block; font-size:13px; color:var(--text-2); letter-spacing:-.01em; transition:color .3s; }
.oxw-tour span{
  display:block; margin-top:4px; font-size:11.5px; line-height:1.45; color:var(--text-4);
  max-height:0; opacity:0; overflow:hidden;
  transition: max-height .4s ease, opacity .3s ease;
}
.oxw-tour li.on a{
  border-color: rgba(255,106,0,.45); background: rgba(255,106,0,.09);
  transform: translateY(-3px);
}
.oxw-tour li.on b{ color: var(--text); }
.oxw-tour li.on span{ max-height:60px; opacity:1; }
.oxw-tour a:hover{ border-color: rgba(255,106,0,.45); }
.oxw-tour a:focus-visible{ outline:2px solid #ffb37a; outline-offset:2px; }
.oxw-tour-note{ font-size:12.5px !important; color:var(--text-4) !important; margin-top:12px !important; }

/* Indicador de scroll (solo acto 0). */
.oxw-scroll{
  position:absolute; left:50%; bottom:18px; z-index:5; transform:translateX(-50%);
  display:flex; flex-direction:column; align-items:center; gap:7px;
  font-size:10.5px; letter-spacing:.16em; text-transform:uppercase; color:var(--text-4);
  opacity:0; transition:opacity .4s;
}
.oxw[data-act="0"] .oxw-scroll{ opacity:1; }
.oxw-scroll span{ width:1px; height:26px; background:linear-gradient(180deg, var(--orange), transparent); animation: oxwScroll 1.9s ease-in-out infinite; }
@keyframes oxwScroll{ 0%{transform:scaleY(.25);transform-origin:top} 50%{transform:scaleY(1);transform-origin:top} 51%{transform-origin:bottom} 100%{transform:scaleY(.25);transform-origin:bottom} }

/* Boton de salto: la experiencia nunca puede ser una carcel. */
.oxw-skip{
  position:absolute; right:16px; top:calc(var(--nav-h) + 14px); z-index:7;
  font-size:11.5px; letter-spacing:.06em; color:var(--text-3);
  border:1px solid var(--border); background:var(--glass); border-radius:999px;
  padding:7px 13px; cursor:pointer; font-family:var(--font);
  backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
  opacity:0; transition:opacity .3s, color .2s, border-color .2s;
}
.oxw-skip:hover{ color:var(--text); border-color:rgba(255,106,0,.4); }
.oxw:hover .oxw-skip, .oxw-skip:focus-visible{ opacity:1; }

/* ------------------------------------------------------- TEMA CLARO -------- */
[data-theme="light"] .oxw-stage{
  background:
    radial-gradient(120% 80% at 50% 118%, rgba(255,106,0,.14), transparent 62%),
    linear-gradient(180deg, #eef1f6, #f7f8fa);
}
[data-theme="light"] .oxw-stage::after{ background: radial-gradient(120% 78% at 50% 50%, transparent 56%, rgba(10,12,20,.18) 100%); }
[data-theme="light"] .oxw-grid{ background:
    repeating-linear-gradient(90deg, rgba(255,106,0,.18) 0 1px, transparent 1px 84px),
    repeating-linear-gradient(0deg,  rgba(10,12,20,.09) 0 1px, transparent 1px 84px); }
[data-theme="light"] .oxw-towers i{ background: linear-gradient(180deg, rgba(10,12,20,.10), transparent); border-color: rgba(10,12,20,.10); }
[data-theme="light"] .oxw-module{ background: linear-gradient(180deg, rgba(255,255,255,.92), rgba(255,255,255,.86)); }
[data-theme="light"] .oxw-panel{ background: linear-gradient(180deg, rgba(255,255,255,.9), rgba(255,255,255,.84)); }
[data-theme="light"] .oxw-say{ background: linear-gradient(180deg, #fff, #fff8f3); }
[data-theme="light"] .oxw-hot{ border-color: rgba(10,12,20,.10); background: rgba(10,12,20,.02); }
/* Contraste en claro: el naranja claro y los grises finos no se leen sobre
   blanco. Se oscurecen sin cambiar la identidad. */
[data-theme="light"] .oxw-panel{ color: var(--text-2); }
[data-theme="light"] .oxw-panel .ok{ color:#0d7a44; }
[data-theme="light"] .oxw-panel .warn{ color:#b24a00; }
[data-theme="light"] .oxw-badge{ color:#a34400; border-color:rgba(255,106,0,.42); background:rgba(255,106,0,.12); }
[data-theme="light"] .oxw-eyebrow{ color:#a34400; border-color:rgba(255,106,0,.4); }
[data-theme="light"] .oxw-hot em{ color: var(--text-3); }
[data-theme="light"] .oxw-speed{ background:
    repeating-linear-gradient(90deg, transparent 0 60px, rgba(255,106,0,.14) 60px 62px, transparent 62px 130px); }

/* ----------------------------------------------------------- CALIDAD ------- */
/* Nivel bajo: fuera desenfoques y sombras caras; la identidad se mantiene. */
.oxw[data-q="low"] .oxw-module,
.oxw[data-q="low"] .oxw-panel,
.oxw[data-q="low"] .oxw-say{ backdrop-filter:none; -webkit-backdrop-filter:none; }
.oxw[data-q="low"] .oxw-boy{ filter:none; }
.oxw[data-q="low"] .oxw-shadow{ filter:none; opacity:.75; }
.oxw[data-q="low"] .oxw-particles,
.oxw[data-q="low"] .oxw-speed,
.oxw[data-q="low"] .oxw-dust,
.oxw[data-q="low"] .oxw-wet{ display:none; }
.oxw[data-q="low"] .oxw-near{ opacity:.5; filter:none; }
/* En calidad baja quedan ondas, pero menos y sin resplandor. */
.oxw[data-q="low"] .oxw-ripple{ box-shadow:none; border-color:rgba(255,150,60,.4); }
.oxw[data-q="low"] .oxw-bg,
.oxw[data-q="med"] .oxw-bg,
.oxw[data-q="low"] .oxw-near,
.oxw[data-q="med"] .oxw-near{ filter:none; }   /* el motion blur solo en calidad alta */

/* ------------------------------------------------------------- MOVIL ------- */
@media (max-width: 860px){
  .oxw{ --oxw-h: 540vh; }
  /* En pantallas estrechas la profundidad se reduce: con perspectiva fuerte,
     el plano medio crece al acercarse y se sale de pantalla. */
  .oxw-stage{ perspective: 900px; --floor: 40%; }
  .oxw-bg{ transform: translateZ(-420px) scale(1.42); }
  .oxw-mid{ transform: translateZ(-40px) scale(1.04); }
  .oxw-near{ transform: translateZ(120px); }
  .oxw-module{ width: min(268px, 73vw); padding:13px; left:50%; top:26%; }
  /* En movil el modulo tiene que caber entre la barra y el personaje:
     fuera la linea descriptiva (sigue en el HTML para lectores y buscadores). */
  .oxw-mod-sub{ position:absolute; width:1px; height:1px; overflow:hidden; clip-path:inset(50%); }
  .oxw-mod-body{ margin-top:11px; gap:6px; }
  /* El titulo no compite con la etiqueta: cada uno en su linea. */
  .oxw-mod-head{ flex-wrap:wrap; gap:10px; }
  .oxw-badge{ margin-left:auto; order:0; font-size:9.5px; padding:3px 7px; }
  .oxw-mod-head img{ width:38px; height:38px; }
  .oxw-mod-head b{ font-size:15px; }
  .oxw-hot{ font-size:12.2px; padding:8px 10px; }
  .oxw-hot em{ display:none; }
  .oxw-pa{ left:3%; top:auto; bottom:47%; } .oxw-pb{ display:none; }
  .oxw-skip{ left:14px; right:auto; }
  .oxw-boy{ height: clamp(124px, 18.5vh, 176px); }
  .oxw-say{ bottom: calc(var(--floor) + clamp(124px, 18.5vh, 176px) - 10px); font-size:12.5px; max-width:min(220px,64vw); }
  .oxw-copy{ padding-bottom: calc(env(safe-area-inset-bottom, 0px) + 18px); }
  .oxw-tour{ grid-template-columns:repeat(2, 1fr); gap:6px; }
  .oxw-tour b{ font-size:12px; }
  .oxw-tour span{ display:none; }
}
@media (max-width: 520px){
  .oxw-panel{ font-size:10.5px; padding:9px 11px; }
  .oxw-act p{ font-size:13.5px; }
}

/* --------------------------------------------------- MOVIMIENTO REDUCIDO --- */
/* Sin viaje ni pinning: el mismo contenido, en vertical y completo. */
@media (prefers-reduced-motion: reduce){
  .oxw{ height:auto !important; }
  .oxw-stage{ position:static; height:auto; padding: 64px 0 72px; perspective:none; }
  .oxw-stage::after{ display:none; }
  .oxw-scene{ position:relative; inset:auto; transform:none !important; height: 42vh; min-height:300px; }
  .oxw-l{ transform:none !important; }
  .oxw-bg{ opacity:.5; filter:none !important; }
  .oxw-stop{ transform:none !important; }
  .oxw-stop:not(:first-child){ display:none; }   /* una sola muestra, sin carrusel */
  .oxw-module{ opacity:1 !important; transform: translate(-50%,-50%) !important; left:50%; }
  .oxw-panel{ display:none; }
  .oxw-boy, .oxw-shadow, .oxw-say, .oxw-particles, .oxw-speed,
  .oxw-scroll, .oxw-skip, .oxw-ignite, .oxw-ripples, .oxw-wet,
  .oxw-near, .oxw-flare{ display:none; }
  .oxw-copy{ position:static; display:block; padding:26px 22px 0; }
  .oxw-copy::before{ display:none; }
  .oxw-act{ opacity:1 !important; transform:none !important; margin: 0 auto 34px; }
  .oxw-tour span{ max-height:none; opacity:1; }
}

/* ======================= v2.1 · ESCENAS CORTAS Y POSES SENTADAS ============ */
/* Escenas de dos destinos (paginas de producto): el viaje pide menos scroll.
   Va como clase y no como estilo en linea para que la media query de movil
   siga mandando. */
.oxw.oxw-short{ --oxw-h: 420vh; }

/* Poses recortadas a media figura (escritorio, estudio): el render acaba en la
   mesa, no en los pies. Dos cuidados:
     · la altura NO puede ser el 100% del personaje, o la cabeza sale al doble
       de tamano que en las poses de cuerpo entero. Cada pose lleva la suya,
       calculada para que la cabeza mida lo mismo que en 'point'.
     · el corte inferior se difumina y queda justo bajo la linea de piso, asi
       no se ve el borde recto ni el personaje flota.
   No hay mesa 3D: es el mismo 2.5D que el resto de la escena. */
.oxw-boy > img.seated{
  -webkit-mask-image: linear-gradient(to bottom, #000 78%, transparent 99%);
          mask-image: linear-gradient(to bottom, #000 78%, transparent 99%);
}
.oxw-boy > img.pose-desk { height:64%; bottom:-3%; }
.oxw-boy > img.pose-study{ height:78%; bottom:-3%; }
/* Sin pies apoyados no hay sombra de suelo que valga. */
.oxw-fg.seated .oxw-shadow{ opacity:0; }
/* Ni polvo de pisadas mientras esta sentado. */
.oxw-fg.seated .oxw-dust{ display:none; }

@media (max-width: 860px){
  .oxw.oxw-short{ --oxw-h: 380vh; }
}

/* Sin JS: la seccion se comporta como un bloque normal, nunca en blanco. */
.oxw.no-js{ height:auto; }
.oxw.no-js .oxw-stage{ position:static; height:auto; padding:64px 0; }
.oxw.no-js .oxw-act{ opacity:1; transform:none; position:static; }
.oxw.no-js .oxw-copy{ position:static; display:block; }
.oxw.no-js .oxw-copy::before{ display:none; }
.oxw.no-js .oxw-scene, .oxw.no-js .oxw-boy, .oxw.no-js .oxw-say,
.oxw.no-js .oxw-particles, .oxw.no-js .oxw-speed{ display:none; }
.oxw.no-js .oxw-tour span{ max-height:none; opacity:1; }