/* Portada: pasillo 3D de frente (túnel de fotos) que se condensa en el punto de «sienna.» */
html,body{overscroll-behavior-y:none}
.hero{position:relative;height:560vh}
@media (max-width:759px){ .hero{height:500vh} .hint{bottom:calc(92px + env(safe-area-inset-bottom))} }
.stage{position:sticky;top:0;height:100vh;height:100svh;overflow:hidden;perspective:1000px;perspective-origin:50% 50%}
.corridor{position:absolute;inset:0;transform-style:preserve-3d}
.card{position:absolute;left:50%;top:50%;width:var(--cw,260px);height:calc(var(--cw,260px) * 1.32);margin-left:calc(var(--cw,260px) / -2);margin-top:calc(var(--cw,260px) * -.66);background:var(--arena);overflow:hidden;will-change:transform,opacity;backface-visibility:hidden;border-radius:2px}
.card:nth-child(3n+1){background:#cbbfae}
.card:nth-child(3n+2){background:var(--piedra)}
.card img{width:100%;height:100%;object-fit:cover}
.card::after{content:"";position:absolute;inset:0;box-shadow:inset 0 0 0 1px rgba(255,255,255,.18)}
.card .tint{position:absolute;inset:0;background:var(--siena);opacity:0}
.dot-fly{position:absolute;left:0;top:0;width:100px;height:100px;border-radius:50%;background:var(--siena);opacity:0;transform-origin:0 0;will-change:transform,opacity;pointer-events:none}

.finale{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:0 var(--gutter);pointer-events:none}
.word-wrap{margin:0;line-height:0}
.word{width:min(82vw, 860px);height:auto;overflow:visible}
.word #word-path{opacity:0}
.word #slot{opacity:0}
.claim-block{margin-top:clamp(26px,4vh,46px);max-width:46ch;opacity:0;transform:translateY(16px);pointer-events:auto}
.claim{font-family:var(--display);font-weight:400;font-size:clamp(1.5rem,2.7vw,2.4rem);line-height:1.08;letter-spacing:-.04em;margin:0}
.support{font-size:clamp(.95rem,1.1vw,1.05rem);color:var(--gris);margin:14px auto 26px;max-width:44ch}
.micro{display:block;margin-top:12px;font-size:12.5px;color:var(--gris)}

.hint{position:absolute;left:50%;bottom:calc(84px + env(safe-area-inset-bottom));transform:translateX(-50%);font-size:11px;letter-spacing:.3em;text-transform:uppercase;color:var(--gris);display:flex;flex-direction:column;align-items:center;gap:10px}
.hint i{display:block;width:1px;height:34px;background:linear-gradient(var(--gris),transparent);animation:drip 2s ease-in-out infinite}
@keyframes drip{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}}

/* Sin JS o con movimiento reducido: estado final */
html:not(.js) .hero, .reduce .hero{height:auto}
html:not(.js) .stage, .reduce .stage{position:relative;height:100svh;min-height:620px}
html:not(.js) .corridor, .reduce .corridor, html:not(.js) .hint, .reduce .hint{display:none}
html:not(.js) .word #word-path, .reduce .word #word-path, html:not(.js) .word #slot, .reduce .word #slot{opacity:1}
html:not(.js) .claim-block, .reduce .claim-block{opacity:1;transform:none}
