/* Acabado ligado al scroll (js/scroll.js). v4: el texto partido, las entradas y los tramos fijados viven en css/sistema.css
   (.split, .entrada, .pin, .interludio). Aquí: barra de lectura, grano, eyebrows, fichas, línea del proceso, clientes y el paseo.
   Sin html.scroll-fx nada se esconde ni se mueve. */
:root{--sfx-oro:linear-gradient(90deg,#EEB73A,#D08A4E,#E0247F,#8A3BD9)} /* el degradado del logo (index.html lo redefine como --grad-h) */

/* barra de lectura: 1 px con el degradado del logo */
.sfx-barra{position:fixed;top:0;left:0;height:1px;width:100%;z-index:49;transform-origin:0 50%;transform:scaleX(var(--sfx-p,0));background:var(--grad-h,linear-gradient(90deg,#D08A4E,#E0247F,#8A3BD9));pointer-events:none;opacity:.9}
body.app-abierta .sfx-barra{display:none}

/* grano de película, muy tenue, solo sobre el fondo (z −1, después de body::before): nunca encima de fotos ni del 3D */
.sfx-grano{position:fixed;inset:0;z-index:-1;pointer-events:none;opacity:.03;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='.9' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 .5 0'/></filter><rect width='160' height='160' filter='url(%23n)'/></svg>");background-size:160px 160px}

/* eyebrows: el filete de la izquierda se dibuja al entrar */
html.scroll-fx .eyebrow.sfx-e::before{transform:scaleX(0);transform-origin:0 50%;transition:transform 1.1s var(--curva-entrada,cubic-bezier(.3,.5,.2,1)) .15s}
html.scroll-fx .eyebrow.sfx-e.in::before{transform:none}

/* llegada por salto (scroll.js, llegada()): la sección de destino y la siguiente pantalla quedan en su estado final sin
   transición; la clase dura dos cuadros */
.entra-ya,.entra-ya *,.entra-ya::before,.entra-ya::after,.entra-ya *::before,.entra-ya *::after{transition:none!important}

/* fichas: foto que se asienta al entrar (escalón de 40 ms). Una sola receta de tarjeta (secciones.css): sin filete degradado
   de marca, sin luz que sigue al cursor ni inclinación del texto */
html.scroll-fx .ficha.rev{transition-delay:calc(min(var(--i,0),3) * var(--paso-entrada,80ms))}
.ficha{position:relative}
.ficha::before,.ficha::after{content:none}
html.scroll-fx .ficha .media img{transform:scale(1.03);transition:opacity .5s var(--curva-entrada,cubic-bezier(.3,.5,.2,1)),transform 1.1s var(--curva-entrada,cubic-bezier(.3,.5,.2,1))}
html.scroll-fx .ficha.rev.in .media img{transform:none}

/* proceso: la línea se llena con el scroll sobre el filete de arriba de los pasos */
.pasos{position:relative}
.sfx-linea{position:absolute;left:0;right:0;top:-1px;height:1px;background:transparent;pointer-events:none}
.sfx-linea > i{display:block;height:100%;width:100%;background:var(--sfx-oro);transform:scaleX(var(--sfx-l,0));transform-origin:0 50%}

/* clientes: nombres en cascada corta (máx. 3 pasos de 40 ms) */
html.scroll-fx .grupo li{opacity:0;transform:translateY(10px);transition:opacity .8s var(--curva-entrada,cubic-bezier(.3,.5,.2,1)),transform .9s var(--curva-entrada,cubic-bezier(.3,.5,.2,1));transition-delay:calc(min(var(--i,0),5) * 60ms)}
html.scroll-fx .grupo.in li{opacity:1;transform:none}

@media(max-width:900px){.sfx-linea{display:none}}
@media(prefers-reduced-motion:reduce){
  html.scroll-fx .eyebrow.sfx-e::before,html.scroll-fx .ficha:not(.en3d) .media img,html.scroll-fx .grupo li,.sfx-linea > i{transition:none!important;transform:none!important;opacity:1!important}
  html.scroll-fx .ficha.en3d .media img{transition:none!important;transform:none!important;opacity:0!important}
}

/* sillas en 3D (escritorio): texto un poco más chico sobre la escena fijada */
@media(min-width:901px){
  #sillas .copy .lead{font-size:15px;max-width:440px}
}

/* Paseo en la rueda (armador): capa fija sobre el lienzo 3D; en body.inmersivo todo se oculta menos el lienzo, esta capa y el aviso (#ar-aviso) */
#paseo{position:fixed;inset:0;z-index:7;visibility:visible}
#paseo[hidden]{display:none}
/* .stage es decorativo (pointer-events none); aquí sí recibe el arrastre para mirar */
#stage-paseo{position:absolute;inset:0;pointer-events:auto;touch-action:none;cursor:grab}
/* durante el paseo se oculta toda la página (los .rev.in traen visibility propia y se saltaban el body.inmersivo) */
body.paseo > :not(#gl):not(#paseo):not(#ar-aviso),body.paseo > :not(#gl):not(#paseo):not(#ar-aviso) *{visibility:hidden!important}
body.paseo #gl{visibility:visible!important}
#stage-paseo:active{cursor:grabbing}
.paseo-hud{position:absolute;left:0;right:0;bottom:0;display:flex;justify-content:space-between;align-items:center;gap:12px;padding:max(16px,env(safe-area-inset-bottom)) max(18px,env(safe-area-inset-right)) max(16px,env(safe-area-inset-bottom)) max(18px,env(safe-area-inset-left));background:linear-gradient(180deg,rgba(18,12,43,0),rgba(18,12,43,.7));pointer-events:none}
.paseo-hud > *{pointer-events:auto}
.paseo-hud .mono{margin:0;font-family:var(--f-texto);font-size:14px;font-weight:500;line-height:1.35;letter-spacing:.01em;text-transform:none;color:rgba(243,238,227,.92);text-shadow:0 1px 8px rgba(8,5,20,.7)}
.paseo-hud .g{display:flex;gap:8px}
body.paseo{overflow:hidden}
/* celular: la barra de abajo lleva solo los botones (≤ 48 px, como las demás barras; antes medía 89 px con el aviso en tres
   renglones al lado). El aviso queda justo encima, en una placa oscura a todo lo ancho, y no recibe el dedo: debajo se
   arrastra para mirar. #ar-aviso va arriba (pantalla.css), sin cruzarse con él. */
@media(max-width:600px){
  .paseo-hud{justify-content:flex-end;padding:2px max(12px,env(safe-area-inset-right)) max(2px,env(safe-area-inset-bottom)) max(12px,env(safe-area-inset-left))}
  .paseo-hud .mono{position:fixed;left:max(14px,env(safe-area-inset-left));right:max(14px,env(safe-area-inset-right));bottom:calc(max(2px,env(safe-area-inset-bottom)) + 56px);
    padding:8px 12px;border-radius:12px;background:rgba(12,8,30,.78);text-align:center;pointer-events:none}
}