/* Cinco portadas, un mismo universo. Rotación tras tres segundos de inactividad. */
.experiences { --ink:#f5f5f1; --surface:#080909; padding:0; height:calc(100svh - 64px); min-height:660px; max-height:1040px; overflow:hidden; isolation:isolate; background:var(--surface); color:var(--ink); transition:background .5s; }
.experiences[data-scene="2"] { --surface:#b7a3f5; --ink:#171020; }
.experiences[data-scene="3"] { --surface:#eaece3; --ink:#14221b; }
.experiences[data-scene="4"] { --surface:#e2eb3a; --ink:#151608; }
.experience-panel { position:absolute; inset:0 0 88px; overflow:hidden; }
.experience-panel[hidden] { display:none; }
.experience-panel:not([hidden]) { animation:scene-in .65s var(--ease) both; }
@keyframes scene-in { from { opacity:0; transform:translateY(16px); } to { opacity:1; transform:none; } }
.experience-kicker { position:absolute; top:32px; left:4.5%; right:4.5%; display:flex; justify-content:space-between; gap:20px; font-size:11px; letter-spacing:.12em; z-index:5; }
.experience-kicker span:last-child { letter-spacing:0; opacity:.6; }
.experience-copy { position:absolute; left:8%; top:50%; transform:translateY(-43%); z-index:3; width:46%; }
.experience-copy h1,.experience-copy h2,.space-copy h2 { font-size:clamp(72px,9.4vw,150px); font-family:var(--font-d); letter-spacing:-.045em; line-height:.87; font-weight:800; margin:0 0 26px; }
.experience-copy em,.space-copy em { font-style:normal; color:inherit; }
.experience-copy p,.space-copy p { font-size:clamp(15px,1.35vw,20px); line-height:1.5; margin-bottom:24px; opacity:.72; }
.experience-cta { display:inline-flex; align-items:center; justify-content:space-between; gap:32px; padding:15px 21px; border:1px solid currentColor; border-radius:999px; color:inherit; font-size:14px; text-decoration:none; background:transparent; transition:transform .2s,background .2s; }
.experience-cta:hover { transform:translateY(-3px); background:color-mix(in srgb,currentColor 9%,transparent); }
.experience-cta span { font-size:22px; line-height:1; }
.experience-song { display:block; margin-top:14px; padding:8px 0; border:0; background:none; color:#e2eb3a; font-size:14px; font-weight:700; text-align:left; }
.experience-song:hover { text-decoration:underline; text-underline-offset:4px; }
.experience-song-status { min-height:1.25em; margin:0!important; font-size:12px!important; }
.experiences :focus-visible { outline:2px solid currentColor; outline-offset:6px; }
.experience-nav { position:absolute; bottom:0; left:4.5%; right:4.5%; height:88px; border-top:1px solid color-mix(in srgb,var(--ink) 20%,transparent); display:grid; grid-template-columns:1fr auto 1fr; align-items:center; z-index:10; }
.experience-current { font-size:12px; font-variant-numeric:tabular-nums; letter-spacing:.06em; }
.experience-current i { font-style:normal; opacity:.4; margin-left:8px; }
.experience-controls { display:flex; align-items:center; gap:25px; }
.experience-arrow { border:0; background:none; color:inherit; font-size:22px; width:40px; height:44px; opacity:.65; }
.experience-arrow:hover { opacity:1; }
.experience-dots { display:flex; align-items:center; gap:2px; }
.experience-dots button { border:0; background:none; color:inherit; width:30px; height:44px; display:grid; place-items:center; padding:0; }
.experience-dots button::after { content:''; width:6px; height:6px; border-radius:9px; background:currentColor; opacity:.3; transition:width .3s,opacity .3s; }
.experience-dots button[aria-selected="true"]::after { width:22px; opacity:1; }
.experience-scroll { justify-self:end; font-size:12px; text-decoration:none; display:flex; align-items:center; gap:20px; }
.experience-scroll span { font-size:20px; }
.scene-eye { background:radial-gradient(ellipse at 75% 47%,#171c0c 0,transparent 52%); }
.scene-eye h1 em { color:#e2eb3a; }
.hero-eye { position:absolute; right:1%; top:16%; width:55%; padding:0; background:none; border:0; color:#e2eb3a; z-index:2; transform:rotate(-13deg); }
.hero-eye svg { width:100%; overflow:visible; filter:drop-shadow(0 26px 55px #c9e0380c); }
.eye-outline { fill:#e2eb3a; }
.eye-pupil { transform:translate(var(--eye-x,0px),var(--eye-y,0px)); transition:transform .15s ease-out; }
.hero-eye.blink svg { animation:eye-blink .42s ease; }
@keyframes eye-blink { 45% { transform:scaleY(.05); } }
.eye-note { position:absolute; bottom:0; left:30%; font-size:11px; letter-spacing:.04em; transform:rotate(13deg); opacity:.65; }


.scene-space { background:#080909; }
.hero-pill-field { position:absolute; inset:0; z-index:1; }
.named-pill { display:flex; align-items:center; justify-content:center; position:absolute; padding:12px 26px; border-radius:999px; font:700 20px var(--font-d); letter-spacing:-.02em; color:#000; white-space:nowrap; background:var(--pill-color); }
.hero-pill-field .named-pill { left:var(--x); top:var(--y); transform:translate(-50%,-50%) rotate(var(--angle)); transition:transform 1.2s var(--ease),opacity .7s; }
.scene-space.is-open .named-pill { transform:translate(calc(-50% + var(--push-x)),calc(-50% + var(--push-y))) rotate(var(--angle)); opacity:.24; }
.space-copy { position:absolute; inset:0; display:flex; flex-direction:column; align-items:center; justify-content:center; text-align:center; z-index:3; pointer-events:none; padding:55px 20px 0; background:radial-gradient(ellipse at center,#080909 0%,#080909f5 22%,transparent 68%); }
.space-copy h2 { font-size:clamp(70px,9.8vw,156px); }.space-copy h2 em { color:#d851b8; }
.space-copy .experience-cta { pointer-events:auto; }
.space-copy p { max-width:320px; }
.space-word { position:absolute; inset:0; display:grid; place-items:center; font:800 52vw/.8 var(--font-d); letter-spacing:-.1em; color:#19121b; opacity:0; transition:opacity 1s; }
.scene-space.is-open .space-word { opacity:1; }
.scene-days h2 em { color:#fffaf1; }
.day-object { position:absolute; width:46%; aspect-ratio:1; right:4%; top:50%; transform:translateY(-44%); display:flex; flex-direction:column; align-items:center; justify-content:center; }
.day-number { font:800 clamp(180px,24vw,380px)/.85 var(--font-d); letter-spacing:-.065em; padding-right:.08em; z-index:1; }
.day-number.pop { animation:day-pop .4s var(--pop); }@keyframes day-pop { 50% { transform:scale(1.07); } }
.day-caption { font-size:10px; letter-spacing:.25em; margin-top:24px; }
.day-orbit { position:absolute; inset:0; border:1px solid #17102030; border-radius:50%; transform:rotate(-22deg); }
.day-orbit::after { content:''; position:absolute; inset:17px; border:1px dashed #17102030; border-radius:50%; }
.day-orbit span { position:absolute; top:8%; left:12%; padding:6px; background:#b7a3f5; font-size:10px; letter-spacing:.13em; z-index:2; transform:rotate(-25deg); }
.day-orbit i { position:absolute; width:20px; height:20px; background:#171020; border:6px solid #b7a3f5; border-radius:50%; left:50%; top:-10px; }
.day-marks { display:flex; gap:4px; margin-top:28px; width:62%; }
.day-marks i { height:16px; width:100%; background:#17102020; border-radius:2px; }
.day-marks i.on { background:#171020; }
.day-object small { position:absolute; bottom:-36px; font-size:10px; opacity:.6; }
.scene-people h2 { font-size:clamp(64px,7.6vw,124px); }.scene-people h2 em { color:#22864b; }
.people-object { position:absolute; width:53%; aspect-ratio:1; right:0; top:50%; transform:translateY(-43%); }
.people-lines { position:absolute; inset:0; width:100%; height:100%; fill:none; stroke:#14221b26; stroke-width:1; }
.people-lines path { stroke-dasharray:3 6; }
.person-you { position:absolute; left:50%; top:50%; transform:translate(-50%,-50%); border-radius:50%; width:26%; aspect-ratio:1; display:grid; place-content:center; text-align:center; background:#14221b; color:#eaece3; font:800 clamp(38px,5vw,76px)/1 var(--font-d); letter-spacing:-.08em; }
.person-you span { position:absolute; bottom:-28px; width:180px; left:50%; transform:translateX(-50%); font:500 10px var(--font); letter-spacing:0; color:#14221b90; }
.person { position:absolute; left:var(--px); top:var(--py); transform:translate(-50%,-50%); display:grid; justify-items:center; transition:left 1s var(--ease),top 1s var(--ease); }
.person span { width:clamp(48px,6vw,90px); aspect-ratio:1; display:grid; place-items:center; font-size:clamp(30px,4vw,60px); background:var(--person-color); border-radius:50%; line-height:1; }
.person b { position:absolute; top:calc(100% + 8px); font-size:10px; font-weight:500; white-space:nowrap; }
.person-a { --px:27%;--py:18%;--person-color:#b7a3f5; }.person-b { --px:79%;--py:31%;--person-color:#a3c6e5; }.person-c { --px:76%;--py:74%;--person-color:#dd98ba; }.person-d { --px:20%;--py:72%;--person-color:#e2eb3a; }
.people-object.close .person-a { left:37%;top:25%; }.people-object.close .person-b { left:73%;top:41%; }.people-object.close .person-c { left:69%;top:73%; }.people-object.close .person-d { left:27%;top:64%; }
.people-object.close .people-lines { stroke:#22864b60; }
.scene-play .experience-copy h2 { font-size:clamp(70px,8.5vw,135px); }.scene-play h2 em { color:#657012; }
.hero-games { position:absolute; right:-3%; top:50%; width:51%; display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:13px; transform:translateY(-46%) rotate(-12deg); }
.hero-game { background:var(--game-color); color:#151608; border-radius:25px; min-width:0; aspect-ratio:1.12; text-decoration:none; position:relative; display:grid; place-items:center; transition:transform .35s var(--pop),box-shadow .35s; border:1px solid #15160810; }
.hero-game:nth-child(3n+2) { transform:translateY(28px); }
.hero-game:hover { transform:translateY(-7px) rotate(8deg); box-shadow:0 16px 0 #15160815; }
.hero-game:nth-child(3n+2):hover { transform:translateY(18px) rotate(8deg); }
.hero-game svg { width:60%; height:65%; fill:none; stroke:currentColor; stroke-width:4; stroke-linecap:round; stroke-linejoin:round; }
.hero-game .glyph { font:800 clamp(26px,4.5vw,72px) var(--font-d); letter-spacing:-.06em; }
.hero-game small { position:absolute; bottom:9px; left:13px; right:10px; font-size:9px; display:flex; justify-content:space-between; }
.hero-game:last-child { grid-column:auto; }
#la-app { scroll-margin-top:64px; border-top:1px solid var(--border); }
#la-app #h1 { font-size:clamp(44px,8.5vw,84px); line-height:.96; margin-bottom:22px; }
#la-app #h1 .w { display:inline-block; }
.cierre { min-height:520px; display:grid; align-items:center; }
.closing-pills { position:absolute; inset:0; overflow:hidden; pointer-events:none; mask-image:linear-gradient(#0009,#000 30%,#000 75%,#0009); }
.closing-pills .named-pill { left:var(--x); top:var(--y); transform:translate(-50%,-50%) rotate(var(--angle)); font-size:17px; animation:closing-float 8s ease-in-out infinite alternate; animation-delay:var(--delay); }
@keyframes closing-float { to { transform:translate(-50%,calc(-50% + 22px)) rotate(calc(var(--angle) + 8deg)); } }
.cierre .wrap { z-index:2; padding:40px 25px; background:radial-gradient(ellipse,#050506 40%,#050506dd 60%,transparent 74%); }
.experiences.offscreen *,body.page-hidden .experiences *,body.page-hidden .closing-pills * { animation-play-state:paused!important; }
@media(min-width:1600px) { .experience-copy { left:calc(50% - 660px); }.hero-eye { right:6%;width:49%; } }
@media(max-width:900px) {
 .experiences { min-height:730px;max-height:1000px; }
 .experience-kicker { top:25px;left:6%;right:6%;font-size:9px; }
 .experience-kicker span:last-child { display:none; }
 .experience-copy { left:7%;top:92px;transform:none;width:88%; }
 .experience-copy h1,.experience-copy h2 { font-size:clamp(64px,10vw,95px);line-height:.89;margin-bottom:16px; }
 .experience-copy p { font-size:14px;margin-bottom:16px; }
 .experience-cta { padding:11px 17px;font-size:12px;gap:24px; }
 .hero-eye { width:62%;right:-5%;top:26%; }
 .scene-eye .experience-copy { top:19%; }
 .scene-eye h1 { font-size:clamp(96px,15vw,140px); }
 .scene-eye .experience-copy p { margin-top:30px; }
 
 .eye-note { bottom:-4%;left:20%;font-size:10px; }
 .space-copy h2 { font-size:clamp(64px,11vw,100px); }
 .space-copy p { font-size:14px; }
 .day-object { width:46%;right:3%;top:55%;transform:translateY(-30%); }
 .day-number { font-size:25vw; }.day-orbit span { display:none; }.day-caption { font-size:8px;letter-spacing:.1em;margin-top:14px; }.day-marks { margin-top:18px;gap:2px; }.day-marks i { height:10px; }.day-object small { font-size:9px;width:200px;text-align:center;bottom:-45px; }
 .people-object { width:63%;right:-7%;top:50%;transform:translateY(-12%); }.person b { font-size:9px; }
 .hero-games { width:50%;right:-2%;top:54%;transform:translateY(-23%) rotate(-12deg);gap:8px; }.hero-game { border-radius:17px; }.hero-game small { font-size:7px;left:7px;bottom:6px; }
 .experience-nav { left:6%;right:6%;height:76px; }.experience-panel { bottom:76px; }.experience-controls { gap:6px; }.experience-scroll { font-size:11px;gap:8px; }
}
@media(max-width:600px) {
 html[lang="en"] .scene-eye h1 { font-size:clamp(86px,22vw,112px); }
 html[lang="en"] .space-copy h2 { font-size:clamp(56px,14vw,82px); }
 .experiences { height:calc(100svh - 64px);min-height:680px;max-height:860px; }
 .experience-kicker { top:22px; }
 .experience-copy { top:68px; }
 .experience-copy h1,.experience-copy h2 { font-size:clamp(60px,15vw,88px); }
 .scene-eye .experience-copy { top:60px; }.scene-eye h1 { font-size:clamp(94px,24vw,126px); }.scene-eye .experience-copy p { margin-top:18px; }
 .hero-eye { width:80%;right:-3%;top:auto;bottom:55px; }.hero-eye svg { transform:rotate(8deg); }.eye-note { bottom:0;left:20%; }
 .scene-eye .experience-copy { pointer-events:none; }.scene-eye .experience-cta,.scene-eye .experience-song { pointer-events:auto; }
 .scene-eye .experience-copy p { max-width:65%; }.scene-eye .experience-cta { background:#080909; }
 .space-copy { padding-top:0; }.space-copy h2 { font-size:clamp(64px,16vw,96px); }.space-copy p { max-width:240px; }
 .hero-pill-field .named-pill { font-size:16px;padding:11px 22px; }
 .scene-days .experience-copy h2 { font-size:clamp(62px,16vw,90px); }.scene-days .experience-copy { z-index:3; }.scene-days .experience-copy p { max-width:63%;font-size:12px; }
 .day-object { width:60%;right:2%;top:auto;bottom:25px;transform:none; }.day-number { font-size:37vw; }.day-object small { bottom:-22px;font-size:8px; }.day-marks { width:60%;gap:2px; }.day-caption { margin-top:12px; }
 .scene-people .experience-copy h2 { font-size:clamp(57px,14vw,78px); }.scene-people .experience-copy p { font-size:12px; }
 .people-object { width:87%;right:-3%;top:auto;bottom:-2px;transform:none; }.person span { width:47px;font-size:31px; }.person-you { font-size:42px; }.person-you span { font-size:8px;bottom:-21px; }.person b { font-size:8px; }
 .scene-play .experience-copy h2 { font-size:clamp(64px,16vw,89px); }.scene-play .experience-copy p { font-size:12px; }.hero-games { width:63%;right:-3%;top:auto;bottom:-90px;transform:rotate(-14deg);gap:7px; }.hero-game { aspect-ratio:1.1;border-radius:15px; }.hero-game .glyph { font-size:30px; }.hero-game small { font-size:6px; }.hero-game:nth-child(3n+2) { transform:translateY(14px); }.hero-game:last-child { grid-column:auto; }
 .experience-nav { grid-template-columns:30px 1fr 30px;left:6%;right:6%; }.experience-controls { justify-content:center;gap:0; }.experience-arrow { width:32px; }.experience-dots button { width:28px; }.experience-current { font-size:10px; }.experience-current i { display:none; }.experience-scroll { font-size:0; }.experience-scroll span { font-size:21px; }
 .cierre { min-height:590px; }.closing-pills .named-pill { font-size:15px;padding:11px 22px; }
}
@media(prefers-reduced-motion:reduce) {
 .experiences,.experiences *,.closing-pills * { animation:none!important;transition:none!important; }
 .hero-eye svg { filter:none; }
}
.hero-game > span { display:grid;place-items:center;width:100%;height:100%; }
@media(max-width:600px) {
 .people-object { width:75%;bottom:0;right:-1%; }
 .hero-games { width:92%;right:4%;bottom:36px;grid-template-columns:repeat(4,minmax(0,1fr));transform:rotate(-7deg);gap:6px; }
 .hero-game:nth-child(3n+2) { transform:none; }.hero-game:nth-child(even) { transform:translateY(9px); }.hero-game:last-child { grid-column:auto; }
 .hero-game .glyph { font-size:24px; }.hero-game small { font-size:6px;bottom:4px;left:5px;right:5px; }.hero-game small>span { display:none; }
}


@media(min-width:901px) { .hero-games { width:min(47%,55svh);right:4.5%;transform:translateY(-50%) rotate(-10deg); } }
@media(max-width:600px) {
 .scene-space .space-copy { background:radial-gradient(ellipse at center,#080909 30%,#080909ed 48%,transparent 76%); }
 .hero-pill-field .named-pill:nth-child(n+9) { display:none; }
 .hero-pill-field .named-pill:nth-child(1) { left:12%;top:16%; }
 .hero-pill-field .named-pill:nth-child(2) { left:47%;top:12%; }
 .hero-pill-field .named-pill:nth-child(3) { left:82%;top:17%; }
 .hero-pill-field .named-pill:nth-child(4) { left:98%;top:48%; }
 .hero-pill-field .named-pill:nth-child(5) { left:1%;top:53%; }
 .hero-pill-field .named-pill:nth-child(6) { left:16%;top:85%; }
 .hero-pill-field .named-pill:nth-child(7) { left:53%;top:90%; }
 .hero-pill-field .named-pill:nth-child(8) { left:88%;top:84%; }
}
.experiences { touch-action:pan-y pinch-zoom; }
#la-app { overflow:clip; }
.experience-copy { pointer-events:none; }
.experience-copy a,.experience-copy button { pointer-events:auto; }
@media(min-width:601px) and (max-width:900px) {
 .hero-games { width:43%;right:6%;top:auto;bottom:45px;transform:rotate(-10deg); }
}
.experience-status { display:flex;align-items:center;gap:16px; }
.experience-autoplay { display:grid;place-items:center;width:30px;height:44px;border:0;background:none;color:inherit;font-size:18px;opacity:.7; }
.experience-autoplay:hover { opacity:1; }
@media(max-width:600px) { .experience-status .experience-current { display:none; }.experience-status { gap:0; } }

/* Los doce nombres se leen también en las tarjetas de móvil. */
.hero-game small{font-size:12px;line-height:1.1}
@media(max-width:600px){.hero-game small{font-size:12px;line-height:1.05;left:5px;right:5px;bottom:6px}.hero-game .glyph{margin-top:-15px}.hero-game svg{transform:translateY(-7px)}}