/* El botón abre un viaje visual; todos los recursos funcionan sin conexión. */
.sound-control{position:absolute;top:20px;right:4vw;z-index:5;border:1px solid #8e877b;border-radius:30px;padding:10px 16px;background:transparent;color:inherit;font-size:13px;min-height:40px}
#intro{min-height:calc(100svh - 70px);padding-top:28px;gap:0}
.intro-logo{width:125px;height:95px;object-fit:contain;background:#13100e;padding:7px;border-radius:3px;margin:0 0 18px}
.time-display{display:flex;flex-direction:column;margin-bottom:23px}
.time-display>span{font-size:11px;letter-spacing:.3em;color:#716a60}
.time-display strong{font-family:'Courier New',monospace;font-size:clamp(38px,5vw,60px);font-weight:700;letter-spacing:.14em;line-height:1.15;padding-left:.14em}
#intro h1{font-size:clamp(45px,6.2vw,86px)}
#intro #trigger{width:clamp(140px,17vw,180px);height:clamp(140px,17vw,180px);margin-top:26px}
#experience{min-height:calc(100svh - 65px)}
#experience:has(#concert:not([hidden])){padding-top:55px}
.arrival-note{font-family:'Courier New',monospace;font-size:11px;letter-spacing:.07em;color:#ae9780;margin:0 0 18px}
.arrival-note span{color:#d12c30}
.traveling #experience{padding-top:80px;padding-bottom:85px;gap:25px}
.traveling .art{display:none}
.time-tunnel{position:absolute;inset:0;overflow:hidden;pointer-events:none;background:radial-gradient(ellipse at center,#080707 8%,#5b18223d 38%,#120b1033 58%,#080707 80%);z-index:0}
.vortex{position:absolute;width:150vmax;height:150vmax;left:50%;top:50%;transform:translate(-50%,-50%);border-radius:50%;background:repeating-conic-gradient(from 0deg,transparent 0deg 30deg,#ba283526 36deg,transparent 49deg 60deg);mask-image:radial-gradient(circle,transparent 6%,#000 20%,#000 60%,transparent 72%);animation:time-spin 13s linear infinite}
.vortex i{position:absolute;inset:20%;border:2px solid #db485844;border-top-color:#e4af7766;border-right-color:transparent;border-radius:44% 56% 52% 48%;box-shadow:0 0 35px #d7292d15,inset 0 0 25px #d7292d15;animation:time-ring 4s linear infinite}
.vortex i:nth-child(2){animation-delay:-.65s}.vortex i:nth-child(3){animation-delay:-1.3s}.vortex i:nth-child(4){animation-delay:-1.95s}.vortex i:nth-child(5){animation-delay:-2.6s}.vortex i:nth-child(6){animation-delay:-3.25s}
.travel-date{position:relative;z-index:2;display:flex;align-items:center;flex-direction:column;color:#ead9c1}
.travel-date>span{font-size:12px;letter-spacing:.24em;text-align:center}
.travel-date strong{font-family:'Courier New',monospace;font-weight:700;letter-spacing:.03em;font-size:clamp(65px,12vw,140px);line-height:1.2;text-shadow:0 0 35px #e94c4555;font-variant-numeric:tabular-nums}
.travel-date small{font-family:'Courier New',monospace;font-size:13px;letter-spacing:.12em;color:#b89d8c}
.traveling #message h2{font-size:clamp(37px,6vw,76px)}
.traveling #message .eyebrow{font-size:12px;margin-bottom:18px}
.arrived .travel-date strong{color:#e8b981}
.arrived .vortex{opacity:.55;transition:opacity 1.5s}
@keyframes time-spin{to{transform:translate(-50%,-50%) rotate(360deg)}}
@keyframes time-ring{from{transform:scale(.12) rotate(0deg);opacity:0}20%{opacity:.65}to{transform:scale(1.8) rotate(120deg);opacity:0}}
@media(max-width:640px){.sound-control{top:14px;right:16px;font-size:12px;padding:8px 12px}#intro{padding-top:65px}.intro-logo{width:100px;height:76px;margin-bottom:15px}.time-display{margin-bottom:18px}.traveling #experience{padding-top:70px;gap:24px}.traveling #message h2{font-size:clamp(32px,8.6vw,51px)}.arrival-note{font-size:10px;margin-bottom:20px}}
@media(prefers-reduced-motion:reduce){.vortex,.vortex i{animation:none!important}.vortex{opacity:.2}.vortex i{transform:none;opacity:.25}.arrived .vortex{transition:none}}