/* Dinamismo compartido: entradas al hacer scroll, inclinación 3D y barra de progreso.
   Todo se desactiva con "reducir movimiento" y sin JavaScript la página se ve completa. */
.js [data-reveal]{opacity:0;transform:perspective(900px) translate3d(0,38px,0) rotateX(12deg);transform-origin:50% 100%;
  transition:opacity .8s cubic-bezier(.2,.7,.2,1) var(--d,0s),transform .95s cubic-bezier(.2,.7,.2,1) var(--d,0s);will-change:opacity,transform}
.js [data-reveal="left"]{transform:perspective(900px) translate3d(-50px,0,0) rotateY(10deg);transform-origin:0 50%}
.js [data-reveal="right"]{transform:perspective(900px) translate3d(50px,0,0) rotateY(-10deg);transform-origin:100% 50%}
.js [data-reveal="flip"]{transform:perspective(900px) translate3d(0,24px,0) rotateY(-70deg);transform-origin:0 50%}
.js [data-reveal="zoom"]{transform:perspective(900px) translate3d(0,0,-120px) scale(.92)}
.js [data-reveal].in{opacity:1;transform:none}
.tilt{transition:transform .35s cubic-bezier(.2,.7,.2,1),box-shadow .35s;transform-style:preserve-3d;will-change:transform;position:relative}
.tilt.moving{transition:transform .08s linear,box-shadow .35s}
.tilt::after{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;opacity:0;transition:opacity .3s;
  background:radial-gradient(420px circle at var(--gx,50%) var(--gy,0%),rgba(255,255,255,.28),transparent 55%);mix-blend-mode:soft-light}
.tilt:hover::after{opacity:1}
#prog{position:fixed;left:0;top:0;height:3px;width:100%;transform:scaleX(0);transform-origin:0 50%;background:var(--prog,#fff);z-index:100;pointer-events:none}
@media (prefers-reduced-motion:reduce){
  .js [data-reveal]{opacity:1!important;transform:none!important;transition:none!important}
  .tilt,.tilt.moving{transition:none;transform:none!important}
}

/* Azulejos con volumen: capas apiladas en Z que dan grosor, brillo que sigue al puntero y sombra proyectada */
.vol{position:relative;width:100%;aspect-ratio:1;transform-style:preserve-3d;display:block}
.vol .ly{position:absolute;inset:0;border-radius:21.9%;background:linear-gradient(135deg,var(--c1,#E9EDF1),var(--c2,#B6BFCA));box-shadow:inset 0 0 0 1px rgba(10,27,46,.10)}
.vol .shd{position:absolute;inset:0;border-radius:21.9%;background:rgba(0,0,0,.55);filter:blur(var(--blur,16px))}
.vol img.front{position:absolute;inset:0;width:100%;height:100%;display:block}
.vol .sheen{position:absolute;inset:0;border-radius:21.9%;pointer-events:none;mix-blend-mode:soft-light;
  background:linear-gradient(115deg,transparent calc(26% + var(--mx,0)*34%),rgba(255,255,255,.95) calc(44% + var(--mx,0)*34%),transparent calc(62% + var(--mx,0)*34%))}
.vol .rim{position:absolute;inset:0;border-radius:21.9%;pointer-events:none;box-shadow:inset 0 0 0 1.5px rgba(255,255,255,.7),inset 0 -10px 18px rgba(10,27,46,.10)}