/* ZZZ LATAM · portada «Señal 60» (2026-10-31).
   Sólo se animan transform, translate y opacity en capas compuestas. Nada de backdrop-filter ni filtros
   animados en capas grandes. Modo ligero (html[data-fx=lite]) y movimiento reducido al final. */

@font-face{font-family:Anton;font-weight:400;font-display:swap;src:url(/fonts/Anton.woff2) format("woff2")}
@font-face{font-family:Archivo;font-weight:100 900;font-stretch:62% 125%;font-display:swap;src:url(/fonts/Archivo.woff2) format("woff2")}
@font-face{font-family:"JetBrains Mono";font-weight:500 700;font-display:swap;src:url(/fonts/JetBrainsMono.woff2) format("woff2")}
@font-face{font-family:"Mr Dafoe";font-weight:400;font-display:swap;src:url(/fonts/MrDafoe.woff2) format("woff2")}

:root{
  --ink:#0b0b0c; --ink-2:#121316; --ink-3:#1b1c21; --line:#ffffff1c;
  --paper:#f2efe6; --mute:#b4b1a7; --dim:#8f8d85;
  --y:#ffd400; --lime:#c6f432; --pink:#ff4f8b; --cyan:#29e6ff; --orange:#ff8a1f; --violet:#b69cff; --red:#ff5a4f;
  --phos:#dcf7e9; --phos-2:#86e8c0; --phos-3:#6dffd0;
  --wide:"Archivo",system-ui,sans-serif; --tall:"Anton","Archivo",Impact,sans-serif;
  --mono:"JetBrains Mono",ui-monospace,monospace; --sign:"Mr Dafoe","Segoe Script",cursive;
  --pad:clamp(16px,3.2vw,48px); --bar:56px; --gutter:max(var(--pad),calc((100% - 1440px) / 2));
  --ease:cubic-bezier(.2,.8,.2,1); --snap:cubic-bezier(.75,0,.2,1);
  --cut:polygon(0 0,calc(100% - var(--c1,18px)) 0,100% var(--c1,18px),100% 100%,var(--c1,18px) 100%,0 calc(100% - var(--c1,18px)));
  --dots:radial-gradient(circle,#0000003d 1.15px,transparent 1.55px) 0 0/8px 8px;
  --hazard:repeating-linear-gradient(-45deg,var(--y) 0 12px,var(--ink) 12px 24px);
}

/* ---------- base ---------- */
*,*::before,*::after{box-sizing:border-box}
html{background:var(--ink);color:var(--paper);-webkit-text-size-adjust:100%;text-size-adjust:100%;scroll-behavior:smooth;scroll-padding-top:calc(var(--bar) + 76px)}
html[data-motion=reduce]{scroll-behavior:auto}
body{margin:0;min-height:100vh;font:400 16px/1.6 var(--wide);overflow-x:clip;background:var(--ink);-webkit-font-smoothing:antialiased}
img,svg,video,canvas{display:block;max-width:100%}
img{height:auto}
a{color:inherit;text-underline-offset:3px}
button{font:inherit;color:inherit}
h1,h2,h3,p,figure,dl,dd,ol,ul,blockquote{margin:0}
:focus-visible{outline:2px solid var(--y);outline-offset:3px}
::selection{background:var(--y);color:var(--ink)}
.sr-only{position:absolute!important;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
.skip{position:fixed;left:12px;top:-64px;z-index:120;padding:10px 16px;background:var(--y);color:var(--ink);font-weight:800;text-decoration:none}
.skip:focus{top:12px}
.nojs{margin:0;padding:12px var(--gutter);background:var(--ink-3);font:600 12px/1.5 var(--mono);color:var(--mute)}

/* ---------- cabecera ---------- */
.bar{position:sticky;top:0;z-index:50;display:flex;align-items:center;gap:clamp(14px,1.8vw,28px);height:var(--bar);padding:0 var(--gutter);background:#09090bf0;border-bottom:1px solid #ffffff12}
.brand{display:flex;align-items:center;gap:9px;flex:none;text-decoration:none}
.brand img{width:17px}
.brand__zzz{display:inline-block;padding:4px 7px 3px;background:var(--paper);color:var(--ink);font:900 16px/1 var(--wide);font-stretch:125%;letter-spacing:-.03em}
.brand__latam{font:900 16px/1 var(--wide);font-stretch:125%;letter-spacing:.03em}
.bar__tag{flex:none;font:700 9px/1.3 var(--mono);letter-spacing:.16em;text-transform:uppercase;color:var(--dim);white-space:nowrap}
.bar__nav{display:flex;gap:clamp(14px,1.7vw,26px);margin-left:auto;font:700 11px/1 var(--mono);letter-spacing:.12em;text-transform:uppercase}
.bar__nav a{position:relative;padding:9px 0;color:#d7d4cb;text-decoration:none}
.bar__nav a::after{content:"";position:absolute;left:0;right:0;bottom:3px;height:2px;background:var(--y);transform:scaleX(0);transform-origin:left;transition:transform .25s var(--ease)}
.bar__nav a:hover::after,.bar__nav a[aria-current=page]::after{transform:scaleX(1)}
.live-pill{display:flex;align-items:center;gap:7px;flex:none;padding:7px 11px;border:1px solid #ffffff1f;font:700 10px/1 var(--mono);letter-spacing:.05em;color:var(--mute);white-space:nowrap;font-variant-numeric:tabular-nums}
.live-pill i{position:relative;width:7px;height:7px;border-radius:50%;background:#3ddc84}
.live-pill i::after{content:"";position:absolute;inset:0;border-radius:50%;background:#3ddc84;animation:ping 2.2s ease-out infinite}
.live-pill b{min-width:3ch;color:var(--paper)}
@keyframes ping{from{transform:scale(1);opacity:.75}to{transform:scale(3.2);opacity:0}}
@media (max-width:1240px){.bar__tag{display:none}}
@media (max-width:1000px){.live-pill{display:none}}

/* ---------- botones ---------- */
.btn{--b:var(--y);position:relative;display:inline-flex;align-items:center;gap:10px;padding:12px 18px;background:var(--b);color:var(--ink);font:900 12px/1 var(--wide);font-stretch:118%;letter-spacing:.03em;text-transform:uppercase;text-decoration:none;clip-path:polygon(0 0,100% 0,100% calc(100% - 10px),calc(100% - 10px) 100%,0 100%);transition:transform .2s var(--ease),background-color .2s}
.btn:hover{transform:translateY(-2px);background:#ffe14d}
.btn:active{transform:translateY(1px)}
.btn:focus-visible{outline:2px solid var(--ink);outline-offset:-6px}
.btn--sm{padding:11px 16px}
.btn--xl{display:grid;grid-template-columns:auto minmax(0,1fr);grid-template-rows:auto auto;column-gap:16px;row-gap:5px;width:min(500px,100%);padding:14px 30px 14px 14px;overflow:hidden;clip-path:polygon(0 0,calc(100% - 24px) 0,100% 24px,100% 100%,24px 100%,0 calc(100% - 24px))}
.btn__tag{grid-row:1/3;align-self:center;padding:11px 12px;background:var(--ink);color:var(--y);font:700 12px/1 var(--mono);letter-spacing:.12em}
.btn__label{font:900 clamp(20px,1.8vw,27px)/1 var(--wide);font-stretch:125%;letter-spacing:-.025em;white-space:nowrap}
.btn__sub{font:600 11px/1.2 var(--mono);letter-spacing:.05em;text-transform:none}
.btn--xl::after{content:"";position:absolute;top:-20%;bottom:-20%;left:-30%;width:22%;background:linear-gradient(100deg,transparent,#ffffffa6,transparent);transform:translateX(0) skewX(-18deg);animation:shine 5.2s var(--ease) infinite;pointer-events:none}
@keyframes shine{0%,72%{transform:translateX(0) skewX(-18deg)}100%{transform:translateX(720%) skewX(-18deg)}}

/* ---------- héroe: escenario ---------- */
.hero{--accent:#c6f432;position:relative;isolation:isolate;overflow:clip;display:grid;grid-template-columns:minmax(0,47fr) minmax(0,35fr) minmax(220px,18fr);grid-template-rows:minmax(0,1fr) auto;column-gap:clamp(16px,2vw,32px);min-height:max(640px,calc(100svh - var(--bar)));padding:clamp(24px,4.4vh,64px) var(--gutter) clamp(16px,3vh,30px);background:#08080a}
.hero__stage{position:absolute;inset:0;z-index:0;overflow:clip;pointer-events:none}
.hero__stage>*{position:absolute;margin:0}
.hero__stage::before,.hero__stage::after{content:"";position:absolute;inset:0;pointer-events:none}
.hero__stage::before{z-index:1;background:
  radial-gradient(52% 70% at 70% 44%,color-mix(in srgb,var(--accent) 24%,transparent),transparent 72%),
  linear-gradient(90deg,#08080a 0%,#08080ae6 28%,#08080a66 52%,#08080a14 100%),
  linear-gradient(0deg,#08080a 0%,transparent 24%),linear-gradient(180deg,#08080acc 0%,transparent 18%)}
.hero__stage::after{z-index:9;background:repeating-linear-gradient(0deg,transparent 0 2px,#0000001c 2px 3px),radial-gradient(130% 95% at 50% 46%,transparent 62%,#000000a8 100%)}
.hero__sky{z-index:0;inset:0;opacity:.46;will-change:transform}
.hero__sky img{width:100%;height:100%;object-fit:cover;object-position:50% 78%}
.hero__mind{z-index:2;top:-2%;right:-7%;width:74%;height:84%;opacity:.6;will-change:transform;
  -webkit-mask-image:linear-gradient(90deg,transparent 0%,#000 30%,#000 84%,transparent 100%),linear-gradient(0deg,transparent 0%,#000 42%);-webkit-mask-composite:source-in;
  mask-image:linear-gradient(90deg,transparent 0%,#000 30%,#000 84%,transparent 100%),linear-gradient(0deg,transparent 0%,#000 42%);mask-composite:intersect}
.hero__mind img{width:100%;height:100%;object-fit:cover;object-position:50% 30%}
.hero__panel{z-index:3;top:-8%;bottom:-8%;left:54.5%;width:clamp(170px,18vw,330px);background:var(--accent);transform:skewX(-13deg);will-change:translate}
.hero__panel i{position:absolute;inset:0;background:var(--dots),repeating-linear-gradient(90deg,transparent 0 26px,#00000017 26px 28px)}
.hero__panel::before{content:"";position:absolute;top:0;bottom:0;left:-26px;width:9px;background:var(--accent);opacity:.75}
.hero__panel::after{content:"";position:absolute;top:0;bottom:0;right:-16px;width:4px;background:var(--paper);opacity:.5}
.hero__name{z-index:4;top:4%;left:34%;right:-8%;white-space:nowrap;font:900 clamp(92px,min(calc(70vw / var(--len,4)),33vh),380px)/.8 var(--wide);font-stretch:125%;letter-spacing:-.06em;text-transform:uppercase;will-change:transform}
.hero__name span{position:relative;display:block;color:transparent;-webkit-text-stroke:2px color-mix(in srgb,var(--accent) 80%,#fff)}
.hero__name span::after{content:attr(data-text);position:absolute;left:.055em;top:.055em;color:color-mix(in srgb,var(--accent) 18%,transparent);-webkit-text-stroke:0}
.hero__tape{z-index:5;left:36%;right:-14%;bottom:16%;height:clamp(34px,3.4vw,50px);display:flex;align-items:center;overflow:hidden;background:var(--y);color:var(--ink);transform:rotate(-8deg);box-shadow:0 14px 34px #000b;font:400 clamp(16px,1.5vw,23px)/1 var(--tall);letter-spacing:.06em;will-change:transform}
.hero__tape::before,.hero__tape::after{content:"";position:absolute;left:0;right:0;height:5px;background:repeating-linear-gradient(-55deg,var(--ink) 0 9px,transparent 9px 18px)}
.hero__tape::before{top:0}.hero__tape::after{bottom:0}
.band-track{display:flex;width:max-content;animation:band 48s linear infinite}
.band-track>span{display:flex;align-items:center;gap:18px;padding-right:18px;white-space:nowrap}
.band-track b{padding:5px 8px 4px;border:2px solid currentColor;font:700 10px/1 var(--mono);letter-spacing:.14em}
@keyframes band{to{transform:translateX(-50%)}}
.hero__agent{z-index:6;left:39.5%;width:42%;top:3%;bottom:0;will-change:transform}
.hero__agent img,.hero__agent canvas{position:absolute;inset:0;width:100%;height:100%;max-width:none;object-fit:contain;object-position:50% 100%}
.hero__gl{opacity:0;transition:opacity .4s ease}
.hero.has-gl .hero__gl{opacity:1}
.hero.has-gl .hero__art{visibility:hidden}
.hero__static{z-index:7;inset:-192px;opacity:0;background:url(/assets/home/static.webp) 0 0/192px 192px;will-change:transform,opacity}
.hero__frame{z-index:8;inset:clamp(10px,1.3vw,20px)}
.hero__frame::before{content:"";position:absolute;left:-40px;right:-40px;top:0;height:16%;opacity:0;background:linear-gradient(180deg,transparent,#ffffff26 45%,#00000059 55%,transparent);will-change:transform}
.hero__corner{position:absolute;width:26px;height:26px;border:2px solid #f2efe680}
.hero__corner:nth-of-type(1){left:0;top:0;border-right:0;border-bottom:0}
.hero__corner:nth-of-type(2){right:0;top:0;border-left:0;border-bottom:0}
.hero__corner:nth-of-type(3){left:0;bottom:0;border-right:0;border-top:0}
.hero__corner:nth-of-type(4){right:0;bottom:0;border-left:0;border-top:0}
.hero__osd{position:absolute;right:40px;top:5px;display:flex;align-items:center;gap:8px;font:700 11px/1 var(--mono);letter-spacing:.16em;color:var(--paper);text-shadow:0 0 8px #000}
.hero__osd i{width:9px;height:9px;border-radius:50%;background:#ff3b3b;box-shadow:0 0 10px #ff3b3b;animation:rec 1.6s steps(1) infinite}
.hero__osd b{color:var(--accent)}
@keyframes rec{50%{opacity:.15}}
.hero__rail{position:absolute;right:6px;top:50%;writing-mode:vertical-rl;transform:translateY(-50%) rotate(180deg);font:700 9px/1 var(--mono);letter-spacing:.34em;color:#f2efe673}

/* ---------- héroe: copia ---------- */
.hero__copy{grid-column:1;grid-row:1/3;align-self:center;position:relative;z-index:3;max-width:680px}
.kicker{display:flex;align-items:center;gap:12px;margin-bottom:clamp(14px,2.4vh,22px);font:700 12px/1.2 var(--mono);letter-spacing:.22em;text-transform:uppercase;color:var(--cyan)}
.kicker__dot{width:46px;height:3px;background:currentColor}
.title{display:grid;justify-items:start;font-weight:900;font-stretch:125%;letter-spacing:-.05em;line-height:.86;text-transform:uppercase;font-size:clamp(44px,min(5.8vw,10vh),108px)}
.title__a,.title__b{display:block;text-shadow:0 .055em 0 #000}
.title__b{color:var(--y)}
.title__c{display:flex;align-items:stretch;margin-top:.42em;transform:rotate(-2.2deg);transform-origin:left center}
.title__c span{display:flex;align-items:center;padding:.13em .3em;background:var(--paper);color:var(--ink);font:800 .25em/1 var(--wide);font-stretch:110%;letter-spacing:-.01em;text-transform:none}
.title__c b{display:flex;align-items:center;padding:.07em .22em .03em;background:var(--accent);color:var(--ink);font:400 .5em/1 var(--tall);letter-spacing:.04em;box-shadow:.08em .08em 0 #000}
.lead{margin-top:clamp(14px,2.2vh,24px);max-width:52ch;font-size:clamp(15px,1.15vw,18px);line-height:1.6;color:#dcd9cf}
.hero__actions{display:flex;flex-wrap:wrap;align-items:center;gap:14px 26px;margin-top:clamp(16px,2.8vh,30px)}
.counter-links{display:grid;gap:6px}
.counter-links a{display:inline-flex;align-items:center;gap:10px;font:700 13px/1.2 var(--mono);text-decoration:none}
.counter-links a:hover{color:var(--y)}
.counter-links img{width:30px;height:30px;border-radius:50%;box-shadow:0 0 0 2px var(--ink),0 0 0 3px var(--accent)}
.counter-links a span{color:var(--accent)}
.data-state{font:600 10px/1.3 var(--mono);letter-spacing:.06em;color:var(--dim)}
.meters{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));max-width:640px;margin-top:clamp(18px,3vh,32px);border:1px solid #ffffff1f;border-top:3px solid var(--accent);background:#09090bd4}
.meter{padding:11px 14px 12px;border-left:1px solid #ffffff14}
.meter:first-child{border-left:0}
.meter dt{font:700 9px/1.2 var(--mono);letter-spacing:.16em;text-transform:uppercase;color:var(--dim)}
.meter dd{margin-top:7px;font:400 clamp(25px,2.2vw,36px)/1 var(--tall);letter-spacing:.02em;font-variant-numeric:tabular-nums;color:var(--paper);white-space:nowrap}
.meter dd small{margin-left:6px;font:600 10px/1 var(--mono);letter-spacing:.02em;color:var(--mute)}
.meter--on dd{color:#62f0a6}
.meter--on dt::before{content:"";display:inline-block;width:6px;height:6px;margin-right:6px;border-radius:50%;background:#3ddc84;vertical-align:1px}

/* ---------- héroe: control remoto ---------- */
.remote{grid-column:2/4;grid-row:2;justify-self:start;position:relative;z-index:4;display:flex;align-items:flex-end;gap:6px;width:max-content;max-width:100%;margin-top:clamp(14px,2.4vh,26px);padding:8px;background:#09090bc7;border:1px solid #ffffff17}
.remote__btn{position:relative;display:grid;justify-items:center;align-content:center;gap:5px;width:66px;padding:8px 4px 8px;border:1px solid #ffffff26;background:#0d0d10e6;cursor:pointer;transition:transform .22s var(--ease),border-color .22s,background-color .22s}
.remote__btn img{width:38px;height:auto;transition:transform .3s var(--ease)}
.remote__no,.remote__name{font:700 9px/1 var(--mono);letter-spacing:.08em;text-transform:uppercase;color:var(--dim)}
.remote__name{max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:var(--mute)}
.remote__btn:hover{transform:translateY(-3px);border-color:var(--accent)}
.remote__btn:hover img{transform:scale(1.08)}
.remote__btn[aria-pressed=true]{background:var(--accent);border-color:var(--accent);transform:translateY(-7px);box-shadow:4px 4px 0 #000}
.remote__btn[aria-pressed=true] .remote__no,.remote__btn[aria-pressed=true] .remote__name{color:var(--ink)}
.remote__auto{position:relative;align-self:stretch;display:grid;place-items:center;min-width:62px;margin-left:6px;padding:0 10px;overflow:hidden;border:1px dashed #ffffff3d;background:transparent;font:700 10px/1 var(--mono);letter-spacing:.14em;color:var(--mute);cursor:pointer}
.remote__auto i{position:absolute;left:0;right:0;bottom:0;height:3px;background:var(--accent);transform:scaleX(0);transform-origin:left}
.remote__auto[aria-pressed=true]{border-style:solid;color:var(--paper)}
.remote__auto[aria-pressed=false] span::before{content:"❚❚ ";letter-spacing:-.1em}
.remote__btn:focus-visible,.remote__auto:focus-visible{outline:2px solid var(--paper);outline-offset:3px}

/* ---------- héroe: ficha del agente ---------- */
.dossier{grid-column:3;grid-row:1;align-self:center;justify-self:end;position:relative;z-index:4;width:282px;max-width:none;padding:16px 18px 18px;background:#09090bdb;border:1px solid #ffffff1f;border-left:4px solid var(--accent);--c1:18px;clip-path:var(--cut)}
.dossier::before{content:"";position:absolute;right:0;top:0;width:90px;height:90px;background:radial-gradient(circle,color-mix(in srgb,var(--accent) 40%,transparent) 1.2px,transparent 1.6px) 0 0/7px 7px;-webkit-mask-image:linear-gradient(225deg,#000,transparent 70%);mask-image:linear-gradient(225deg,#000,transparent 70%)}
.dossier__ch{display:flex;justify-content:space-between;gap:8px;white-space:nowrap;font:700 9px/1.3 var(--mono);letter-spacing:.14em;text-transform:uppercase;color:var(--dim)}
.dossier__ch b{color:var(--accent)}
.dossier__sign{height:64px;margin-top:6px;font:400 60px/1.15 var(--sign);color:var(--accent);transform:rotate(-7deg);transform-origin:left center;white-space:nowrap}
.dossier__name{margin:2px 0 12px;min-height:1.15em;font:900 15px/1.15 var(--wide);font-stretch:118%;letter-spacing:.03em;text-transform:uppercase}
.dossier__tags{list-style:none;padding:0;display:flex;flex-wrap:wrap;gap:6px}
.dossier__tags li{display:flex;align-items:center;gap:6px;padding:4px 8px 4px 5px;background:#ffffff0d;border:1px solid #ffffff17;font:600 11px/1.2 var(--wide);color:#dedbd2}
.dossier__tags li:first-child{flex-basis:100%}
.dossier__tags img{width:20px;height:20px;object-fit:contain}
.dossier__tags li:first-child img{width:24px;height:24px}
.dossier__rank{padding:2px 6px!important}
.dossier__rank img{width:24px!important;height:24px!important}
.dossier__quote{margin-top:14px;padding-left:12px;border-left:2px solid color-mix(in srgb,var(--accent) 65%,transparent);font:italic 500 13.5px/1.55 var(--wide);color:#e8e4da}
.dossier__link{display:inline-flex;gap:6px;margin-top:14px;font:700 12px/1.2 var(--mono);color:var(--accent);text-decoration:none}
.dossier__link:hover{text-decoration:underline}

/* ---------- cinta bajo el héroe ---------- */
.ticker{position:relative;z-index:2;overflow:hidden;background:var(--ink)}
.ticker__band{display:flex;align-items:center;height:56px;background:var(--y);color:var(--ink);font:400 26px/1 var(--tall);letter-spacing:.06em}
.ticker__band .band-track{animation-duration:40s;animation-direction:reverse}
.ticker__band b{border-width:2px}
.ticker__stripe{height:10px;background:var(--hazard)}

/* ---------- índice de la página ---------- */
.street-nav{position:sticky;top:var(--bar);z-index:40;display:flex;align-items:center;gap:24px;height:58px;padding:0 var(--gutter);background:#0d0d10f7;border-bottom:1px solid #ffffff14;font:700 10px/1 var(--mono);letter-spacing:.14em;text-transform:uppercase}
.street-nav__place{flex:none;color:var(--dim);white-space:nowrap}
.street-nav__place b{color:var(--paper)}
.street-nav nav{display:flex;gap:26px;min-width:0;margin-left:auto;overflow-x:auto;scrollbar-width:none}
.street-nav nav::-webkit-scrollbar{display:none}
.street-nav nav a{position:relative;flex:none;padding:9px 0;color:#cfccc3;text-decoration:none}
.street-nav nav a::after{content:"";position:absolute;left:0;right:0;bottom:2px;height:2px;background:var(--y);transform:scaleX(0);transform-origin:left;transition:transform .25s var(--ease)}
.street-nav nav a:hover::after,.street-nav nav a[aria-current=location]::after{transform:scaleX(1)}
.street-nav nav a[aria-current=location]{color:var(--y)}
.street-nav__top{flex:none;display:grid;place-items:center;width:32px;height:32px;border:1px solid #ffffff26;color:var(--y);font-size:15px;text-decoration:none}
.street-nav__top:hover{border-color:var(--y)}
.reading-progress{position:absolute;left:0;right:0;bottom:-1px;height:2px;background:linear-gradient(90deg,var(--cyan),var(--y));transform:scaleX(var(--read,0));transform-origin:left;pointer-events:none}

/* ---------- secciones: base ---------- */
.modes,.counter,.shop,.community,.visit,.answers{position:relative;padding:clamp(64px,7.6vw,124px) var(--gutter)}
/* Las secciones fuera de pantalla no se maquetan hasta acercarse (primer layout más corto en móviles). */
.modes,.counter,.shop,.community,.visit,.answers,.foot{content-visibility:auto;contain-intrinsic-size:auto 1100px}
.eyebrow{display:flex;align-items:center;gap:10px;font:700 11px/1.3 var(--mono);letter-spacing:.2em;text-transform:uppercase;color:var(--y)}
.eyebrow::before{content:"";width:28px;height:2px;background:currentColor;flex:none}
.section-head{position:relative;display:grid;gap:16px;max-width:1100px;margin-bottom:clamp(40px,5vw,72px)}
.section-head::before{content:attr(data-no) / "";position:absolute;z-index:-1;left:-.05em;top:-.5em;font:900 clamp(130px,17vw,280px)/1 var(--wide);font-stretch:125%;letter-spacing:-.06em;color:transparent;-webkit-text-stroke:1.5px #ffffff14;pointer-events:none}
.section-head h2,.section-heading h2,.shop__intro h2,.visit__poster h2,.answers h2{font:900 clamp(40px,6vw,100px)/.88 var(--wide);font-stretch:125%;letter-spacing:-.05em;text-transform:uppercase}
.section-head h2 span,.section-heading h2 span,.shop__intro h2 span,.answers h2 span{color:var(--y)}
.section-head h2 span,.section-heading h2 span,.shop__intro h2 span{font-size:.64em;letter-spacing:-.04em}
.section-head>p:last-child{max-width:56ch;font-size:clamp(15px,1.2vw,18px);color:var(--mute)}

/* entradas al hacer scroll (home.js marca sólo lo que está bajo el pliegue) */
.is-pending{opacity:0;transform:translate3d(0,46px,0)}
.is-pending.is-in{opacity:1;transform:none;transition:opacity .6s var(--ease) var(--rd,0s),transform .85s var(--ease) var(--rd,0s)}

/* ---------- 01 · comisiones ---------- */
.modes{overflow:clip;background:radial-gradient(60% 50% at 85% 0%,#ffd4000d,transparent 70%),linear-gradient(180deg,#0b0b0c,#101014)}
.modes__grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:clamp(16px,1.7vw,28px);padding-top:clamp(56px,6vw,96px);perspective:1200px}
.modes__grid>:nth-child(2){--rd:.08s}.modes__grid>:nth-child(3){--rd:.16s}.modes__grid>:nth-child(4){--rd:.24s}
.mode{--c:var(--y);--c1:24px;position:relative;isolation:isolate;display:flex;flex-direction:column;justify-content:flex-end;min-height:clamp(430px,36vw,560px);padding:18px;color:var(--ink);text-decoration:none;transform-style:preserve-3d;transition:transform .45s var(--ease)}
.mode--tier{--c:var(--pink)}.mode--quiz{--c:var(--cyan)}.mode--sorter{--c:var(--violet)}
.mode::before,.mode::after{content:"";position:absolute;inset:0;clip-path:var(--cut)}
.mode::before{z-index:-2;background:var(--dots),repeating-linear-gradient(-45deg,transparent 0 18px,#ffffff14 18px 20px),linear-gradient(165deg,var(--c),color-mix(in srgb,var(--c) 78%,#000))}
.mode::after{z-index:-3;background:#000;transform:translate3d(10px,10px,0);transition:transform .45s var(--ease)}
.mode__art{position:absolute;z-index:0;left:-6%;right:-6%;top:-20%;bottom:36%;transition:transform .6s var(--ease)}
.mode__fig{position:absolute;inset:0}
.mode__fig img{position:absolute;inset:0;width:100%;height:100%;max-width:none;object-fit:cover;object-position:50% 0}
.mode__art--duo .mode__fig:first-child{right:38%}
.mode__art--duo .mode__fig:last-child{left:38%}
.mode__no{position:absolute;z-index:-1;left:18px;top:14px;font:900 66px/1 var(--wide);font-stretch:125%;letter-spacing:-.06em;color:transparent;-webkit-text-stroke:2px var(--ink)}
.mode__body{position:relative;display:grid;gap:8px;padding:18px 18px 16px;background:var(--ink);color:var(--paper);--c1:16px;clip-path:polygon(0 0,100% 0,100% calc(100% - 16px),calc(100% - 16px) 100%,0 100%)}
.mode__kicker{font:700 10px/1.3 var(--mono);letter-spacing:.16em;color:var(--c)}
.mode__title{font:400 clamp(32px,3vw,46px)/.95 var(--tall);letter-spacing:.01em;text-transform:uppercase}
.mode__text{font-size:14px;line-height:1.5;color:var(--mute)}
.mode__cta{display:flex;justify-content:space-between;align-items:center;margin-top:6px;padding-top:12px;border-top:1px solid #ffffff1c;font:700 12px/1 var(--mono);letter-spacing:.06em;color:var(--c)}
.mode__cta span{display:inline-block;font-size:18px;transition:transform .3s var(--ease)}
.mode:hover .mode__cta span,.mode:focus-visible .mode__cta span{transform:translate(4px,-4px)}
.mode:hover .mode__art,.mode:focus-visible .mode__art{transform:translate3d(0,-14px,0) scale(1.035)}
.mode:hover::after,.mode:focus-visible::after{transform:translate3d(15px,15px,0)}
.mode:focus-visible{outline:3px solid var(--paper);outline-offset:8px}
.mode__stamp{position:absolute;right:16px;top:18px;display:grid;justify-items:end;padding:7px 9px;border:3px solid var(--ink);font:700 11px/1 var(--mono);letter-spacing:.12em;transform:rotate(6deg)}
.mode__stamp b{font:400 34px/1 var(--tall)}
.mode__tiers{position:absolute;right:14px;top:16px;display:grid;gap:5px}
.mode__tiers b{display:block;padding:5px 10px 4px;background:var(--ink);color:var(--c);font:400 20px/1 var(--tall);letter-spacing:.04em;text-align:center}
.mode__tiers b:nth-child(2){transform:translateX(-10px)}.mode__tiers b:nth-child(3){transform:translateX(-20px);opacity:.75}
.mode__mark{position:absolute;right:12px;top:-6px;font:900 150px/1 var(--wide);font-stretch:125%;color:transparent;-webkit-text-stroke:3px var(--ink);transform:rotate(12deg)}
.mode__vs{position:absolute;left:50%;top:14%;z-index:1;font:400 92px/1 var(--sign);color:var(--paper);text-shadow:3px 4px 0 var(--ink);transform:translateX(-50%) rotate(-9deg)}

/* ---------- 02 · mostrador: cintas + televisor ---------- */
.counter{background:radial-gradient(60% 55% at 72% 40%,#10241dcc,transparent 70%),#0a0b0c}
.counter__rig{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:clamp(28px,3.4vw,56px);align-items:end}
.shelf{position:relative;padding-bottom:30px}
.shelf__label{display:flex;justify-content:space-between;align-items:baseline;gap:12px;margin-bottom:22px;font:700 10px/1.2 var(--mono);letter-spacing:.16em;text-transform:uppercase;color:var(--dim)}
.shelf__label b{font:900 15px/1 var(--wide);font-stretch:118%;letter-spacing:.04em;color:var(--paper)}
.tapes{display:flex;align-items:flex-end;gap:clamp(5px,.6vw,9px);height:350px;padding:0 10px}
.shelf::after{content:"";position:absolute;left:-14px;right:-14px;bottom:0;height:30px;background:linear-gradient(#3b3e45,#16181c 42%,#0b0c0f);border-top:2px solid #5d616a;box-shadow:0 24px 44px #000c}
.tape{--c:var(--y);position:relative;flex:1;min-width:0;height:310px;display:flex;flex-direction:column;align-items:center;justify-content:space-between;padding:12px 5px 10px;border:0;border-radius:5px 5px 2px 2px;background:linear-gradient(90deg,#17181c,#2b2d33 16%,#18191d 30%,#141518 72%,#27292e 88%,#121316);box-shadow:inset 0 1px 0 #ffffff21,0 10px 18px #000b;cursor:pointer;transition:transform .32s var(--ease)}
.tape[data-c=lime]{--c:var(--lime)}.tape[data-c=pink]{--c:var(--pink)}.tape[data-c=cyan]{--c:var(--cyan)}.tape[data-c=orange]{--c:var(--orange)}
.tape[data-c=paper]{--c:var(--paper)}.tape[data-c=violet]{--c:var(--violet)}.tape[data-c=red]{--c:var(--red)}
.tape__no{padding:4px 6px;background:var(--ink);border:1px solid #ffffff2e;font:700 11px/1 var(--mono);color:var(--paper)}
.tape__lbl{flex:1;display:grid;place-items:center;width:80%;margin:10px 0;background:linear-gradient(90deg,#0000001f,transparent 30%),var(--c);box-shadow:inset 0 0 0 2px #00000024}
.tape__t{writing-mode:vertical-rl;transform:rotate(180deg);font:400 clamp(17px,1.5vw,24px)/1 var(--tall);letter-spacing:.06em;text-transform:uppercase;color:var(--ink);white-space:nowrap}
.tape__g{font:700 8px/1 var(--mono);letter-spacing:.1em;text-transform:uppercase;color:var(--c);white-space:nowrap}
.tape:hover{transform:translateY(-10px)}
.tape[aria-selected=true]{transform:translateY(-36px)}
.tape[aria-selected=true]::after{content:"";position:absolute;left:50%;bottom:-22px;width:8px;height:8px;margin-left:-4px;border-radius:50%;background:var(--c);box-shadow:0 0 14px var(--c)}
.tape:focus-visible{outline:2px solid var(--paper);outline-offset:4px}
.set{position:relative}
.tv{position:relative;display:grid;grid-template-columns:minmax(0,1fr) 118px;gap:14px;padding:18px;border-radius:22px;background:linear-gradient(160deg,#3c3f46,#212329 22%,#141519 70%,#0c0d10);box-shadow:inset 0 2px 0 #ffffff26,inset 0 -4px 10px #000c,0 34px 70px #000d,0 0 0 1px #000}
.tv__screen{position:relative;height:clamp(390px,33vw,470px);border-radius:30px/24px;overflow:hidden;background:#061310;box-shadow:inset 0 0 0 3px #050606,0 0 0 4px #2b2e33,0 0 0 6px #0b0c0e}
.tv__img{position:absolute;inset:0;background:radial-gradient(120% 95% at 50% 42%,#183a31 0%,#0c1d18 55%,#050a09 100%)}
.tv[data-crt-tint=amber] .tv__img{background:radial-gradient(120% 95% at 50% 42%,#3a2a0e 0%,#1b1307 56%,#070502 100%)}
.tv[data-crt-tint=cyan] .tv__img{background:radial-gradient(120% 95% at 50% 42%,#0f2e3a 0%,#07161c 56%,#03080a 100%)}
.tv__glass{position:absolute;inset:0;z-index:3;pointer-events:none;border-radius:inherit;background:linear-gradient(155deg,#ffffff1c 0%,transparent 24%),radial-gradient(140% 100% at 50% 50%,transparent 60%,#00000085 100%),repeating-linear-gradient(0deg,#ffffff06 0 1px,transparent 1px 3px)}
.tv__static{position:absolute;inset:-192px;z-index:4;pointer-events:none;opacity:0;background:url(/assets/home/static.webp) 0 0/192px 192px}
.tv.is-tuning .tv__static{animation:tv-static .34s steps(1,end) both}
@keyframes tv-static{0%{opacity:.85;transform:translate3d(0,0,0)}20%{opacity:.7;transform:translate3d(-61px,37px,0)}40%{opacity:.5;transform:translate3d(43px,-71px,0)}60%{opacity:.32;transform:translate3d(-17px,89px,0)}80%{opacity:.14;transform:translate3d(79px,13px,0)}100%{opacity:0;transform:translate3d(0,0,0)}}
.osd{position:absolute;left:24px;right:24px;top:16px;z-index:2;display:flex;justify-content:space-between;font:700 13px/1 var(--mono);letter-spacing:.08em;color:#fff;text-shadow:2px 2px 0 #000a,0 0 6px #ffffff66}
.osd--b{top:auto;bottom:14px;color:var(--y)}
.osd__play[hidden]{display:block;visibility:hidden}
.tv__panels{position:absolute;inset:46px 24px 40px;z-index:1;overflow:auto;scrollbar-width:thin;scrollbar-color:#2f6b58 transparent;overscroll-behavior:contain}
.tv__panels:focus-visible{outline:2px solid var(--phos-3);outline-offset:4px}
.pnl{color:var(--phos);text-shadow:0 0 6px #9fffd236;animation:tune .45s var(--ease)}
.pnl[hidden]{display:none}
@keyframes tune{from{opacity:0;transform:translate3d(0,8px,0)}}
.pnl h2{margin-bottom:4px;font:900 clamp(22px,2vw,30px)/1 var(--wide);font-stretch:118%;letter-spacing:-.02em;text-transform:uppercase;color:#fff}
.pnl__lead{margin-bottom:14px;font:600 12px/1.4 var(--mono);letter-spacing:.04em;color:var(--phos-2)}
.pnl--text p{margin-top:14px;max-width:52ch;font-size:clamp(15px,1.15vw,17px)}
.pnl strong{color:#fff}
.pnl a:not(.btn){color:var(--y)}
.pnl__more{display:inline-block;margin:14px 0 0 12px;font:700 12px/1.4 var(--mono)}
.chans,.rank,.credits,.jobs,.steps{list-style:none;padding:0}
.chans li{display:grid;grid-template-columns:22px minmax(0,1fr) 30% 64px;align-items:center;gap:10px;padding:7px 0;border-bottom:1px dashed #86e8c024}
.chans__n{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:14px}
.chans svg{width:100%;height:6px}
.chans rect{fill:var(--phos-3)}
.chans b,.rank b{font:700 12px/1 var(--mono);text-align:right;color:#fff}
.rank li{display:grid;grid-template-columns:28px 30px minmax(0,1fr) auto;align-items:center;gap:10px;padding:6px 0;border-bottom:1px dashed #86e8c024}
.rank__n{font:700 11px/1 var(--mono);color:var(--phos-2)}
.rank img{width:30px;height:30px;border-radius:50%;object-fit:cover;background:#0d1e19}
.rank__name{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:14px}
.credits{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:8px}
.credits li{display:flex;align-items:center;gap:10px;min-width:0;padding:6px 8px;border:1px solid #86e8c022;background:#ffffff05}
.credits img{width:34px;height:34px;flex:none;border-radius:50%;object-fit:cover}
.credits span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:13px}
.spark{width:100%;height:130px}
.spark rect{fill:var(--phos-3)}
.spark rect:hover{fill:var(--y)}
.spark__axis{display:flex;justify-content:space-between;margin-top:6px;font:600 10px/1 var(--mono);color:var(--phos-2)}
.kv{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;margin-top:16px}
.kv div{padding:10px;border:1px solid #86e8c022}
.kv dt{font:700 9px/1.3 var(--mono);letter-spacing:.1em;text-transform:uppercase;color:var(--phos-2)}
.kv dd{margin-top:6px;font:400 24px/1 var(--tall);color:#fff}
.jobs li{display:grid;gap:4px;padding:12px 0;border-bottom:1px dashed #86e8c024}
.jobs b{font:800 16px/1.2 var(--wide);color:#fff}
.jobs span{font-size:14px;line-height:1.5}
.tag{justify-self:start;margin-top:4px;padding:3px 7px;border:1px solid var(--phos-2);font:700 10px/1.2 var(--mono);font-style:normal;color:var(--phos-2)}
.faq details{border-bottom:1px dashed #86e8c02e}
.faq summary{padding:10px 0;cursor:pointer;font-weight:700;color:#fff}
.faq p{margin:0 0 12px;font-size:14px;line-height:1.55}
.steps{counter-reset:step;display:grid;gap:10px;margin-bottom:16px}
.steps li{counter-increment:step;display:flex;gap:12px;align-items:center;font-size:15px}
.steps li::before{content:counter(step,decimal-leading-zero);flex:none;display:grid;place-items:center;width:34px;height:34px;border:1px solid var(--phos-2);font:700 12px/1 var(--mono);color:var(--phos-2)}
.tv__side{display:flex;flex-direction:column;align-items:center;gap:12px;padding:4px 0}
.tv__brand{font:900 13px/1 var(--wide);font-stretch:125%;letter-spacing:.04em;text-align:center;color:#c9c6bd}
.tv__led{min-width:66px;padding:7px 8px 6px;background:#140606;border:1px solid #000;box-shadow:inset 0 0 12px #000;font:400 30px/1 var(--tall);letter-spacing:.08em;text-align:center;color:#ff4b3e;text-shadow:0 0 10px #ff4b3e99;cursor:pointer}
.tv__quiz-banner{display:grid;justify-items:center;gap:5px;width:100%;padding:11px 6px 12px;background:#0b0b0c;border:1px solid #ffffff21;text-align:center;text-decoration:none;transition:border-color .2s,transform .2s var(--ease)}
.tv__quiz-banner:hover{border-color:var(--y);transform:translateY(-2px)}
.tv__qb-kicker{display:flex;align-items:center;gap:5px;font:700 8px/1 var(--mono);letter-spacing:.16em;color:var(--y)}
.tv__qb-kicker i{width:6px;height:6px;border-radius:50%;background:var(--red)}
.tv__qb-img{width:46px;height:50px;object-fit:contain}
.tv__qb-title{font:900 13px/1 var(--wide);font-stretch:118%;color:var(--paper)}
.tv__qb-title em{font-style:normal;color:var(--y)}
.tv__qb-sub{font:700 8px/1.35 var(--mono);color:var(--mute)}
.tv__qb-cta{padding:5px 9px;background:var(--y);color:var(--ink);font:900 10px/1 var(--wide)}
.tv__knobs{display:flex;gap:12px;margin-top:auto}
.tv__knobs i{position:relative;width:38px;height:38px;border-radius:50%;background:radial-gradient(circle at 35% 30%,#5f636b,#1c1e22 62%);box-shadow:0 3px 6px #000,inset 0 1px 0 #ffffff33;cursor:pointer;transition:transform .35s var(--ease)}
.tv__knobs i::after{content:"";position:absolute;left:50%;top:4px;width:3px;height:11px;margin-left:-1.5px;border-radius:2px;background:var(--y)}
.vcr{display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;gap:16px;margin:14px 18px 0;padding:12px 16px;border-radius:6px;background:linear-gradient(#27292e,#121317);box-shadow:inset 0 1px 0 #ffffff1f,0 16px 32px #000b}
.vcr__slot{display:flex;align-items:center;height:30px;padding:0 12px;background:#050506;border:1px solid #000;box-shadow:inset 0 2px 6px #000;font:700 10px/1 var(--mono);letter-spacing:.2em;color:#ffffff4d}
.vfd{display:flex;align-items:center;height:30px;padding:0 10px;overflow:hidden;background:#06110f;border:1px solid #000;font:700 12px/1 var(--mono);color:var(--phos-3);text-shadow:0 0 8px #6dffd080;white-space:nowrap}
.vfd__track{display:flex;width:max-content;animation:band 80s linear infinite}
.vfd__track span{padding-right:44px}
.vcr__keys{display:flex;gap:6px}
.vcr__keys button{min-width:46px;height:32px;border:1px solid #000;border-radius:3px;background:linear-gradient(#3c3f45,#1c1e22);box-shadow:inset 0 1px 0 #ffffff2e,0 2px 0 #000;font:700 12px/1 var(--mono);color:var(--paper);cursor:pointer}
.vcr__keys button:hover{color:var(--y)}
.vcr__keys button:active{transform:translateY(2px);box-shadow:inset 0 1px 0 #ffffff1f}

/* ---------- 03 · Paimon ---------- */
.shop{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:clamp(28px,4vw,64px);align-items:center;background:linear-gradient(180deg,#0a0b0c,#0c1513 55%,#0a0b0c)}
.shop__intro{display:grid;gap:18px;align-content:start}
.shop__intro>p:not(.eyebrow){max-width:46ch;color:var(--mute);font-size:clamp(15px,1.15vw,18px)}
.shop__labs{justify-self:start;display:inline-flex;gap:8px;font:700 12px/1.3 var(--mono);color:var(--y);text-decoration:none;border-bottom:1px solid #ffd40066;padding-bottom:4px}
.shop__labs:hover{border-color:var(--y)}
.shop__scene{position:relative;isolation:isolate}
.shop__scene::before{content:"";position:absolute;inset:-14px 14px 14px -14px;background:var(--hazard);opacity:.9;z-index:-1}
.shop__scene figcaption{margin-top:10px;font:600 10px/1.4 var(--mono);color:var(--dim)}
.counter-art{position:relative;isolation:isolate;overflow:hidden;aspect-ratio:4/3;background:#102321;box-shadow:0 30px 60px #000c}
.counter-art__city{position:absolute;inset:0;z-index:-5;background:linear-gradient(100deg,#09202bac,#12261b70),url(/assets/eridu-960.webp) 55% 30%/cover}
.counter-art__light{position:absolute;inset:0;z-index:-4;background:radial-gradient(ellipse at 80% 70%,#46ffbb2b,transparent 55%),radial-gradient(ellipse at 10% 20%,#ffd4002c,transparent 50%)}
.counter-art__sign{position:absolute;top:6%;left:7%;padding:10px 16px;background:var(--y);color:var(--ink);box-shadow:3px 4px 0 #070a0b;font:600 9px/1.4 var(--mono);letter-spacing:.1em;transform:rotate(-5deg)}
.counter-art__sign b{display:block;font:400 26px/1.15 var(--tall);letter-spacing:.08em}
.counter-art__agent{position:absolute;z-index:-2;left:-10%;bottom:7%;width:71%;height:85%;object-fit:contain;object-position:bottom}
.counter-art__tv{position:absolute;right:6%;bottom:14%;width:52%;height:57%;display:grid;grid-template-columns:minmax(0,1fr) 15%;gap:9px;padding:10px;border-radius:15px;background:linear-gradient(140deg,#555758,#1c2125 50%,#151a1d);box-shadow:inset 0 1px 0 #ffffff50,0 10px 20px #000b,0 0 0 1px #000;transform:rotate(3deg)}
.counter-art__screen{position:relative;overflow:hidden;display:flex;flex-direction:column;align-items:center;justify-content:center;border-radius:12%/9%;background:radial-gradient(ellipse at 50% 40%,#224239,#0a1714 85%);border:3px solid #090d0e;box-shadow:0 0 0 2px #393f41,inset 0 0 30px #0009;color:var(--phos-3)}
.counter-art__screen::after{content:"";position:absolute;inset:0;background:repeating-linear-gradient(0deg,#ffffff08 0 1px,transparent 1px 3px),linear-gradient(135deg,#ffffff18,transparent 35%);pointer-events:none}
.counter-art__osd{position:absolute;left:7%;right:7%;top:8%;display:flex;justify-content:space-between;font:700 7px/1 var(--mono);color:var(--paper)}
.counter-art__screen>img{width:60px;height:60px;margin-top:8px;border-radius:50%;box-shadow:0 0 18px #a6ffd947;object-fit:cover}
.counter-art__screen>b{margin-top:10px;font:900 clamp(20px,2.3vw,31px)/1 var(--wide);font-stretch:125%;letter-spacing:-.045em}
.counter-art__screen>span{margin-top:6px;font:700 7px/1.5 var(--mono);letter-spacing:.12em}
.counter-art__equalizer{display:flex;align-items:flex-end;gap:3px;width:65%;height:24px;margin-top:15px}
.counter-art__equalizer i{flex:1;height:38%;background:var(--phos-3);transform-origin:bottom;animation:eq 1.2s ease-in-out infinite alternate}
.counter-art__equalizer i:nth-child(3n){height:80%;animation-delay:-.4s}
.counter-art__equalizer i:nth-child(4n){height:60%;animation-delay:-.8s}
.counter-art__equalizer i:nth-child(5n){height:100%;animation-delay:-.2s}
@keyframes eq{to{transform:scaleY(.35)}}
.counter-art__speaker{display:flex;flex-direction:column;align-items:center;gap:10px;padding-block:6px}
.counter-art__speaker>span{align-self:stretch;padding:4px;background:var(--y);color:#1b2018;font:900 12px/1 var(--wide);text-align:center}
.counter-art__speaker>i{flex:1;width:100%;border-radius:5px;background:repeating-linear-gradient(0deg,#111418 0 3px,#393d42 3px 5px);border:1px solid #000}
.counter-art__speaker>b{color:#66ffb4;text-shadow:0 0 8px #66ffb4;font-size:14px}
.counter-art__desk{position:absolute;z-index:-1;left:-5%;right:-5%;bottom:-6%;height:23%;background:linear-gradient(#3c4545,#141b1b 18%);border-top:3px solid #6c757071;transform:rotate(3deg)}
.counter-art__vhs{position:absolute;left:6%;bottom:5%;width:35%;height:13%;display:flex;align-items:center;gap:9px;padding:5px 9px;background:linear-gradient(#2b2e31,#080b0e);border:1px solid #4c4e50;box-shadow:0 5px 8px #000a;font:700 7px/1.3 var(--mono);color:var(--paper);transform:rotate(-9deg)}
.counter-art__vhs>b{max-width:45%;padding:5px;background:var(--cyan);color:#101613;font:700 8px/1.3 var(--mono)}
.counter-art__vhs>i{width:18%;aspect-ratio:1;border-radius:50%;background:radial-gradient(circle,#222a2a 0 13%,#9eaca280 15% 23%,#1e2424 25% 55%,#a4aaa940 57% 61%,#080c0d 63%);border:1px solid #83888840}
.counter-art__sticker{position:absolute;right:6%;top:6%;padding:9px 12px;background:#151b1de6;border:1px solid #ffffff38;box-shadow:2px 3px 0 #0008;font:900 17px/.98 var(--wide);letter-spacing:-.03em;color:var(--paper);transform:rotate(4deg)}
.counter-art__sticker span{display:block;margin-top:6px;font:600 6px/1.3 var(--mono);letter-spacing:.08em;color:var(--cyan)}
.product-shelf{grid-column:1/-1;position:relative;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px;margin-top:22px}
.product-shelf>:nth-child(2){--rd:.08s}.product-shelf>:nth-child(3){--rd:.16s}
.product{--accent:var(--y);display:grid;grid-template-columns:42px minmax(0,1fr);border:1px solid #34373c;background:linear-gradient(135deg,#1b1e21,#101214 80%);box-shadow:0 16px 30px #0008;transition:transform .3s var(--ease),border-color .3s}
.product:hover{transform:translateY(-6px);border-color:var(--accent)}
.product--community{--accent:var(--cyan)}.product--eous{--accent:var(--orange)}
.product__spine{display:flex;flex-direction:column;justify-content:space-between;align-items:center;padding:18px 10px;background:var(--accent);color:var(--ink);border-right:4px solid #070809}
.product__spine>span{writing-mode:vertical-rl;font:700 9px/1 var(--mono);letter-spacing:.16em}
.product__spine>b{writing-mode:vertical-rl;rotate:180deg;font:400 31px/1 var(--tall);letter-spacing:.06em}
.product__body{display:flex;flex-direction:column;padding:26px 24px}
.product__head{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:28px}
.product__head>img{width:58px;height:58px;border-radius:50%;object-fit:cover;box-shadow:0 0 0 3px #101214,0 0 0 4px #ffd40050}
.product__serial{text-align:right;font:500 9px/1.7 var(--mono);letter-spacing:.06em;color:var(--mute)}
.product h3{font:900 clamp(24px,2.5vw,34px)/1.04 var(--wide);font-stretch:112%;letter-spacing:-.04em}
.product p{margin:18px 0;font-size:14px;line-height:1.75;color:var(--mute)}
.product code,.product__note{display:block;margin-bottom:26px;font:500 10.5px/1.6 var(--mono);color:var(--accent)}
.product a{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-top:auto;padding-top:16px;border-top:1px solid #ffffff18;font-weight:800;font-size:13px;text-decoration:none}
.product a>span{font-size:22px;color:var(--accent)}
.archive-mark{display:grid;gap:5px;width:50px;transform:skewY(-7deg)}
.archive-mark i{height:9px;border:1px solid var(--cyan);background:linear-gradient(90deg,#29e6ff20,transparent)}
.archive-mark i:nth-child(2){margin-left:5px}.archive-mark i:nth-child(3){margin-left:10px}
.bangboo-mark{position:relative;flex:none;display:grid;place-items:center;width:50px;height:44px;margin-top:12px;border:2px solid var(--orange);border-radius:45% 45% 35% 35%;background:#261d15}
.bangboo-mark i{position:absolute;bottom:36px;left:6px;width:13px;height:25px;border:2px solid var(--orange);border-radius:7px 7px 2px 2px;background:#261d15;rotate:-14deg}
.bangboo-mark i+i{left:auto;right:6px;rotate:14deg}
.bangboo-mark b{font:700 20px/1 var(--mono);letter-spacing:2px;color:var(--orange)}

/* ---------- 04 · comunidad ---------- */
.community{background:radial-gradient(50% 50% at 15% 20%,#29e6ff0d,transparent 70%),#0b0b0c}
.section-heading{display:flex;justify-content:space-between;align-items:flex-end;gap:24px;flex-wrap:wrap;margin-bottom:clamp(36px,4.5vw,60px)}
.section-heading>div{display:grid;gap:16px}
.section-heading>p{max-width:40ch;color:var(--mute)}
.activity-board{display:grid;grid-template-columns:minmax(0,1.7fr) minmax(280px,1fr);gap:clamp(18px,2.2vw,32px);align-items:start}
.activity-board__chart{position:relative;padding:24px;border:1px solid #ffffff1a;background:linear-gradient(#ffffff06 1px,transparent 1px) 0 0/100% 20%,#0f1013}
.board-label{display:flex;justify-content:space-between;gap:12px;flex-wrap:wrap;font:700 10px/1.3 var(--mono);letter-spacing:.12em;color:var(--dim)}
.chart-probe{margin-top:12px;min-height:1.5em;font:600 12px/1.4 var(--mono);color:var(--cyan)}
.activity-chart{width:100%;height:clamp(200px,22vw,300px);margin-top:14px}
.activity-chart rect{fill:var(--cyan);transition:fill .15s}
.activity-chart rect:hover{fill:var(--y)}
.chart-axis{display:flex;justify-content:space-between;margin-top:8px;font:600 10px/1 var(--mono);color:var(--dim)}
.activity-board__totals{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-top:22px}
.activity-board__totals div{display:grid;gap:6px;padding:14px;border:1px solid #ffffff17}
.activity-board__totals span{font:700 9px/1.3 var(--mono);letter-spacing:.12em;text-transform:uppercase;color:var(--dim)}
.activity-board__totals b{font:400 clamp(28px,3vw,44px)/1 var(--tall);letter-spacing:.02em}
.data-details{margin-top:16px;font-size:13px}
.data-details summary{cursor:pointer;font:700 11px/1.3 var(--mono);letter-spacing:.08em;color:var(--y)}
.data-scroll{max-height:240px;overflow:auto;margin-top:10px}
.data-details table{width:100%;border-collapse:collapse;font:500 12px/1.4 var(--mono)}
.data-details caption{text-align:left;padding-bottom:8px;color:var(--dim)}
.data-details th,.data-details td{padding:5px 8px;border-bottom:1px solid #ffffff12;text-align:left}
.receipt{position:relative;padding:34px 26px 30px;background:var(--paper);color:var(--ink);font:500 13px/1.55 var(--mono);transform:rotate(1.4deg);box-shadow:0 28px 50px #000c}
.receipt::before,.receipt::after{content:"";position:absolute;left:0;right:0;height:12px;background:linear-gradient(135deg,#0b0b0c 6px,transparent 0) 0 0/12px 12px,linear-gradient(225deg,#0b0b0c 6px,transparent 0) 0 0/12px 12px}
.receipt::before{top:0}
.receipt::after{bottom:0;transform:scaleY(-1)}
.receipt__top{font-size:10px;letter-spacing:.12em;text-align:center}
.receipt h3{margin:10px 0 16px;font:400 40px/1 var(--tall);letter-spacing:.04em;text-align:center}
.receipt dl{display:grid;gap:8px;padding-block:12px;border-block:2px dashed #0b0b0c4d}
.receipt dl div{display:flex;justify-content:space-between;gap:12px}
.receipt dt{font-size:11px}
.receipt dd{font-weight:700}
.receipt__date{margin:14px 0 8px;font-size:11px}
.receipt>p{font-size:11px;line-height:1.55}
.receipt a{display:block;margin-top:8px;font-weight:700;font-size:12px}
.receipt__barcode{height:46px;margin-top:18px;background:repeating-linear-gradient(90deg,#0b0b0c 0 2px,transparent 2px 4px,#0b0b0c 4px 5px,transparent 5px 8px,#0b0b0c 8px 11px,transparent 11px 13px)}

/* ---------- 05 · primera visita ---------- */
.visit{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(24px,4vw,64px);align-items:center;overflow:clip}
.visit__poster{position:relative;isolation:isolate;display:grid;gap:18px;align-content:start;min-height:500px;padding:clamp(28px,3vw,44px) 40% clamp(28px,3vw,44px) clamp(28px,3vw,44px);color:var(--ink)}
.visit__poster::before{content:"";position:absolute;inset:0;z-index:-2;background:var(--dots),linear-gradient(160deg,#ffe14d,var(--y) 40%,#e8b800);--c1:28px;clip-path:var(--cut)}
.visit__poster::after{content:"";position:absolute;inset:0;z-index:-3;background:#000;--c1:28px;clip-path:var(--cut);transform:translate(12px,12px)}
.visit__poster .eyebrow{color:var(--ink)}
.visit__poster h2{font-size:clamp(36px,4.1vw,70px)}
.answers h2{font-size:clamp(40px,5.2vw,88px)}
.visit__poster h2 span{color:#fff;text-shadow:3px 3px 0 var(--ink)}
.visit__poster>p:not(.eyebrow){max-width:40ch;font-size:15px;line-height:1.65}
.visit__poster .btn{justify-self:start;--b:var(--ink);color:var(--y)}
.visit__poster .btn:hover{background:#000}
.visit__poster .btn:focus-visible{outline-color:var(--y)}
.visit__agent{position:absolute;z-index:-1;right:-6%;bottom:0;height:116%;width:auto;max-width:62%;object-fit:contain;object-position:bottom right;pointer-events:none}
.visit__steps{list-style:none;padding:0;display:grid;gap:12px}
.visit__steps li{display:grid;grid-template-columns:52px 64px minmax(0,1fr);align-items:center;gap:16px;padding:18px 20px;border:1px solid #ffffff1a;background:#0f1013;transition:border-color .25s,transform .25s var(--ease)}
.visit__steps li:hover{border-color:#ffd40066;transform:translateX(6px)}
.visit__steps li>span{font:400 44px/1 var(--tall);color:var(--y)}
.visit__boo{width:64px;height:64px}
.visit__steps h3{margin-bottom:4px;font:900 20px/1.1 var(--wide);font-stretch:118%}
.visit__steps p{font-size:14px;color:var(--mute)}
.prize-strip{grid-column:1/-1;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.2fr);gap:24px;padding:30px 32px;border:1px solid #ffd40040;background:repeating-linear-gradient(-45deg,#ffd4000d 0 12px,transparent 12px 24px),#121216}
.prize-strip h3{margin-top:8px;font:900 clamp(26px,3vw,44px)/.95 var(--wide);font-stretch:125%;letter-spacing:-.04em}
.prize-strip h3 span{color:var(--y)}
.prize-strip p{font-size:15px;color:#d6d3c9}
.prize-strip__fine{margin-top:8px;font:600 11px/1.5 var(--mono)!important;color:var(--dim)!important}
.prize-strip a{display:inline-flex;gap:8px;margin-top:14px;font:700 12px/1.3 var(--mono);color:var(--y);text-decoration:none}

/* ---------- 06 · preguntas ---------- */
.answers{display:grid;grid-template-columns:minmax(0,4fr) minmax(0,7fr);gap:clamp(28px,4vw,72px);align-items:start}
.answers>div:first-child{position:sticky;top:calc(var(--bar) + 96px);display:grid;gap:16px}
.answers>div:first-child>p:not(.eyebrow){color:var(--mute)}
.answers>div:first-child>a{font:700 12px/1.3 var(--mono);color:var(--y);text-decoration:none}
.answers__list details{border-bottom:1px solid #ffffff1a}
.answers__list summary{display:flex;justify-content:space-between;align-items:center;gap:16px;padding:20px 4px;cursor:pointer;list-style:none;font:800 clamp(16px,1.3vw,19px)/1.3 var(--wide)}
.answers__list summary::-webkit-details-marker{display:none}
.answers__list summary::after{content:"+";flex:none;display:grid;place-items:center;width:32px;height:32px;border:1px solid #ffffff2e;font:400 22px/1 var(--mono);color:var(--y);transition:transform .25s var(--ease),background-color .25s}
.answers__list details[open] summary::after{transform:rotate(45deg);background:var(--y);color:var(--ink)}
.answers__list summary:hover{color:var(--y)}
.answers__list p{padding:0 48px 20px 4px;color:var(--mute);line-height:1.7}

/* ---------- pie ---------- */
.foot{position:relative;overflow:hidden;padding:clamp(60px,8vw,110px) var(--gutter) 104px;border-top:1px solid #ffffff14;background:#070708;font-size:13px;color:var(--mute)}
.foot::before{content:"ZZZ LATAM" / "";display:block;margin-bottom:38px;white-space:nowrap;font:900 clamp(56px,12.5vw,220px)/.82 var(--wide);font-stretch:125%;letter-spacing:-.06em;color:transparent;-webkit-text-stroke:1.5px #ffffff26}
.foot nav{display:flex;flex-wrap:wrap;gap:10px 24px;margin-bottom:24px;font:700 11px/1.4 var(--mono);letter-spacing:.1em;text-transform:uppercase}
.foot nav a{color:var(--paper);text-decoration:none}
.foot nav a:hover{color:var(--y)}
.foot p{margin:8px 0;max-width:92ch}
.foot p a{color:#e8e5db}
/* Contacto de Discord (cohere.py lo añade en todas las páginas; aquí con el estilo de la portada) */
.foot.site-footer{display:grid;grid-template-columns:minmax(0,1fr) minmax(300px,380px);column-gap:clamp(28px,4vw,72px);align-items:end}
.foot.site-footer::before{grid-column:1/-1}
.site-footer-copy{min-width:0}
.footer-contact{--c1:18px;position:relative;isolation:isolate;min-width:0;color:var(--paper)}
.footer-contact::after{content:"";position:absolute;inset:0;z-index:-1;background:var(--y);clip-path:var(--cut);transform:translate(8px,8px);opacity:.9}
.contact-card{position:relative;isolation:isolate;padding:18px 20px 0;background:linear-gradient(135deg,#ffd40017,transparent 46%),#111114;border:1px solid #ffffff21;border-top:3px solid var(--y);clip-path:var(--cut)}
.contact-card::before{content:"";position:absolute;z-index:-1;right:0;top:0;width:120px;height:120px;background:radial-gradient(circle,#ffd4004d 1.2px,transparent 1.6px) 0 0/7px 7px;-webkit-mask-image:linear-gradient(225deg,#000,transparent 70%);mask-image:linear-gradient(225deg,#000,transparent 70%)}
.contact-eyebrow{margin-bottom:16px;font:700 10.5px/1.3 var(--mono);letter-spacing:.16em;color:var(--y)}
.contact-profile{display:grid;grid-template-columns:96px minmax(0,1fr);align-items:center;gap:0 18px;color:inherit;text-decoration:none}
.contact-profile:focus-visible{outline:2px solid var(--y);outline-offset:6px}
.contact-avatar{position:relative;display:block;width:96px;height:96px}
.contact-avatar-image{width:96px;height:96px;max-width:none;border-radius:50%;object-fit:cover;box-shadow:0 0 0 3px #111114,0 0 0 5px var(--y)}
.contact-decoration{position:absolute;top:50%;left:50%;width:122%;height:122%;max-width:none;object-fit:contain;transform:translate(-50%,-50%);pointer-events:none}
.contact-identity{display:grid;justify-items:start;gap:6px;min-width:0}
.contact-name{font:900 clamp(19px,1.6vw,23px)/1.1 var(--wide);font-stretch:118%;letter-spacing:-.02em;overflow-wrap:anywhere}
.contact-username{font:600 12px/1.3 var(--mono);color:var(--mute);overflow-wrap:anywhere}
.contact-guild{display:inline-flex;align-items:center;gap:6px;padding:3px 8px 3px 4px;background:#ffffff0d;border:1px solid #ffffff1f;font:700 11px/1.2 var(--mono);letter-spacing:.06em;color:#e6e2d8}
.contact-guild img{width:18px;height:18px;object-fit:contain}
.contact-bottom{grid-column:1/-1;display:flex;align-items:center;justify-content:space-between;gap:16px;min-height:52px;margin-top:18px;border-top:1px dashed #ffffff26;font:700 12px/1.3 var(--mono);letter-spacing:.04em}
.contact-arrow{font-size:20px;color:var(--y);transition:transform .25s var(--ease)}
.contact-profile:hover .contact-arrow,.contact-profile:focus-visible .contact-arrow{transform:translate(3px,-3px)}
.contact-profile:hover .contact-name{color:var(--y)}

/* ---------- Fairy y Youkai (companions.js) ----------
   Emblemas fijos en el héroe (sin JS, modo ligero, movimiento reducido o con la casilla apagada). Con el lienzo vivo
   (html.npc-live) se desvanecen mientras las dos IA «despiertan» en el mismo sitio y salen a recorrer la página. */
.hero__npc{z-index:7;width:clamp(40px,5.6vw,62px);height:auto;border-radius:50%;transition:opacity .3s ease}
.hero__npc-fairy{left:43%;top:15%;box-shadow:0 0 22px 4px #2f5bff6b}
.hero__npc-youkai{left:88%;top:13%;box-shadow:0 0 22px 4px #ff2f946b}
.npc-live .hero__npc{opacity:0}
.npc-layer{position:fixed;inset:0;z-index:39;display:block;width:100%;height:100%;pointer-events:none}
html[data-fx=lite] .npc-layer,html[data-motion=reduce] .npc-layer{display:none}

/* ---------- radio de Sixth Street ---------- */
.street-radio{position:fixed;right:max(16px,env(safe-area-inset-right));bottom:max(16px,env(safe-area-inset-bottom));z-index:60;display:flex;flex-direction:column;align-items:flex-end;gap:10px;max-width:calc(100vw - 32px)}
.radio-toggle{display:flex;align-items:center;gap:10px;height:46px;padding:0 14px 0 8px;border:1px solid #ffffff2e;border-radius:999px;background:#0e0f12f2;color:var(--paper);box-shadow:0 10px 30px #0009;cursor:pointer;transition:transform .2s var(--ease),border-color .2s}
.radio-toggle:hover{transform:translateY(-2px);border-color:var(--y)}
.radio-disc{position:relative;flex:none;display:grid;place-items:center;width:30px;height:30px;border-radius:50%;background:repeating-radial-gradient(circle,#292e28 0 2px,#111810 2px 3px);border:1px solid #a8bd8966}
.radio-disc::before{content:"";position:absolute;inset:0;border-radius:50%;background:conic-gradient(transparent,#e3edaa35,transparent 30%,transparent 50%,#e3edaa35,transparent 80%)}
.radio-disc i{z-index:1;width:9px;height:9px;border-radius:50%;background:var(--y);border:3px solid #8b8131}
.radio-toggle__copy{font:700 8px/1.45 var(--mono);letter-spacing:.12em;text-align:left;color:var(--dim)}
.radio-toggle__copy>span{display:block;font-size:10px;letter-spacing:0;color:var(--paper)}
.radio-levels{display:flex;align-items:center;gap:3px;height:18px}
.radio-levels i{width:2px;height:4px;background:var(--phos-2);transition:height .2s}
[data-radio-state=playing] .radio-disc{animation:radio-spin 9s linear infinite}
[data-radio-state=playing] .radio-levels i{height:12px;animation:radio-wave 1.1s ease-in-out infinite alternate}
[data-radio-state=playing] .radio-levels i:nth-child(2){animation-delay:-.3s}
[data-radio-state=playing] .radio-levels i:nth-child(3){animation-delay:-.7s}
[data-radio-state=playing] .radio-levels i:nth-child(4){animation-delay:-.5s}
@keyframes radio-spin{to{rotate:360deg}}
@keyframes radio-wave{to{transform:scaleY(.3)}}
.street-radio__deck{width:260px;max-width:100%;padding:10px;border:1px solid #576c5866;border-radius:6px;background:#101613;box-shadow:0 12px 40px #000b}
.street-radio__deck[hidden]{display:none}
.street-radio__label{display:flex;justify-content:space-between;align-items:center;padding-bottom:8px;font:700 9px/1.5 var(--mono);letter-spacing:.07em;color:var(--y)}
.street-radio__label button{width:26px;height:26px;border:0;background:#262e27;color:var(--paper);font:18px/1 var(--wide);cursor:pointer}
.street-radio__deck iframe{display:block;width:100%;height:180px;border:0}
.street-radio__deck>p{display:grid;gap:3px;margin:10px 0}
.street-radio__deck>p b{font-size:12px}
.street-radio__deck>p span{font:500 9px/1.5 var(--mono);color:var(--mute)}
.street-radio__controls{display:grid;gap:6px}
.street-radio__controls label{display:flex;align-items:center;gap:10px;font:500 9px/1.5 var(--mono);color:var(--mute)}
.street-radio__controls input{flex:1;min-width:0;accent-color:var(--y)}

/* ---------- entrada (desactivada por el dueño; se conserva el marcado) ---------- */
.arrival{position:fixed;inset:0;z-index:110;display:grid;place-items:center;background:#050506}
.arrival[hidden]{display:none}
.arrival__title,.arrival__grid,.arrival__rail{display:none}
.arrival__frame{position:relative;width:min(560px,86vw)}
.arrival__frame video{width:100%;height:auto}
.arrival__serial,.arrival__frame-label{font:700 10px/1.4 var(--mono);color:var(--y)}
.arrival__bottom{position:absolute;left:var(--pad);right:var(--pad);bottom:var(--pad);display:flex;justify-content:space-between;align-items:center;font:600 12px/1.4 var(--mono)}
.arrival__bottom button{padding:10px 14px;border:1px solid #ffffff40;background:transparent;cursor:pointer}
.arrival--exit{opacity:0;transition:opacity .35s}

/* ---------- responsivo ---------- */
@media (max-width:1280px){
  .counter__rig{grid-template-columns:minmax(0,1fr);max-width:920px;margin-inline:auto}
  .tapes{height:320px}
  .tape{height:280px}
}
@media (max-width:1100px){
  .hero{grid-template-columns:minmax(0,1fr) minmax(0,.78fr);grid-template-rows:minmax(0,1fr) auto auto}
  .hero__copy{grid-column:1;grid-row:1}
  .remote{grid-column:1;grid-row:2}
  .dossier{grid-column:2;grid-row:2/4;align-self:end;max-width:270px}
  .hero__agent{left:43%;width:57%}
  .hero__panel{left:62%}
  .hero__name{left:38%}
  .hero__tape{left:30%}
  .modes__grid{grid-template-columns:repeat(2,minmax(0,1fr));row-gap:clamp(70px,9vw,100px)}
  .modes__grid>:nth-child(3){--rd:0s}.modes__grid>:nth-child(4){--rd:.08s}
  .shop{grid-template-columns:minmax(0,1fr)}
  .shop__scene{max-width:720px}
  .product-shelf{grid-template-columns:repeat(2,minmax(0,1fr))}
  .product:last-child{grid-column:1/-1}
  .activity-board{grid-template-columns:minmax(0,1fr)}
  .receipt{max-width:460px;justify-self:center;width:100%}
  .visit{grid-template-columns:minmax(0,1fr)}
  .answers{grid-template-columns:minmax(0,1fr)}
  .answers>div:first-child{position:static}
  .foot.site-footer{grid-template-columns:minmax(0,1fr);row-gap:30px}
  .footer-contact{max-width:440px}
}
@media (max-width:1000px){
  .street-nav{position:relative;top:auto}
  html{scroll-padding-top:calc(var(--bar) + 16px)}
}
@media (max-width:760px){
  .hero{display:flex;flex-direction:column;min-height:0;padding:0 var(--pad) 28px}
  .hero__copy{order:1}.remote{order:2}.dossier{order:3}
  .hero__stage::before{background:
    radial-gradient(70% 40% at 70% 22%,color-mix(in srgb,var(--accent) 26%,transparent),transparent 72%),
    linear-gradient(180deg,#08080a80 0,transparent 12svh,transparent 40svh,#08080ae6 54svh,#08080a 62svh)}
  .hero__agent{left:16%;right:-16%;width:auto;top:2svh;bottom:auto;height:min(62svh,540px)}
  .hero__panel{left:50%;width:32vw;top:-4%;bottom:auto;height:min(66svh,580px)}
  .hero__name{top:12px;left:-1%;right:auto;font-size:min(calc(100vw / var(--len,4)),150px)}
  .hero__mind{top:0;right:-34%;width:140%;height:min(56svh,480px);opacity:.5}
  .hero__tape{left:-12%;right:-12%;top:min(46svh,400px);bottom:auto;height:30px;font-size:15px}
  .hero__sky{height:min(62svh,540px);bottom:auto}
  .hero__frame{inset:8px 8px auto;height:min(58svh,500px)}
  .hero__rail,.hero__osd,.hero__corner:nth-of-type(3),.hero__corner:nth-of-type(4){display:none}
  .hero__agent{-webkit-mask-image:linear-gradient(180deg,#000 74%,transparent 98%);mask-image:linear-gradient(180deg,#000 74%,transparent 98%)}
  .hero__npc-fairy{left:6%;top:min(40svh,350px)}
  .hero__npc-youkai{left:82%;top:min(9svh,80px)}
  .hero__copy{padding-top:min(54svh,468px)}
  .btn__label{white-space:normal}
  .title{font-size:clamp(40px,12.6vw,64px)}
  .lead{font-size:15px}
  .hero__actions{gap:16px}
  .btn--xl{width:100%;padding-right:20px}
  .meters{grid-template-columns:repeat(2,minmax(0,1fr))}
  .meter:nth-child(3){border-left:0}
  .meter:nth-child(n+3){border-top:1px solid #ffffff14}
  .remote{width:auto;margin:20px calc(var(--pad) * -1) 0;padding:12px var(--pad) 4px;overflow-x:auto;scrollbar-width:none;scroll-snap-type:x proximity}
  .remote::-webkit-scrollbar{display:none}
  .remote__btn{flex:none;scroll-snap-align:start}
  .dossier{max-width:none;margin-top:16px}
  .dossier__sign{height:54px;font-size:50px}
  .ticker__band{height:46px;font-size:21px}
  .street-nav{height:auto;padding:12px var(--pad)}
  .street-nav__place{display:none}
  .street-nav nav{margin-left:0;gap:20px}
  .modes__grid{grid-template-columns:minmax(0,1fr);row-gap:76px;padding-top:60px}
  .modes__grid>*{--rd:0s!important}
  .mode{min-height:400px}
  .mode__art{top:-17%;bottom:40%}
  .tapes{height:auto;gap:8px;margin:0 calc(var(--pad) * -1);padding:44px var(--pad) 2px;overflow-x:auto;scrollbar-width:none}
  .tapes::-webkit-scrollbar{display:none}
  .tape{flex:0 0 62px;height:240px}
  .tv{grid-template-columns:minmax(0,1fr);padding:12px;border-radius:16px}
  .tv__screen{height:440px;border-radius:20px/16px}
  .tv__panels{inset:44px 16px 38px}
  .tv__side{flex-direction:row;flex-wrap:wrap;justify-content:space-between;gap:10px}
  .tv__quiz-banner{width:auto;flex:1;grid-template-columns:auto auto;align-items:center;text-align:left;justify-items:start}
  .tv__qb-img{grid-row:1/4}
  .tv__knobs{margin-top:0}
  .vcr{grid-template-columns:minmax(0,1fr);margin:12px 0 0}
  .vcr__slot{display:none}
  .vcr__keys{justify-content:center}
  .chans li{grid-template-columns:20px minmax(0,1fr) 54px}
  .chans svg{display:none}
  .kv{grid-template-columns:1fr 1fr}
  .shop__scene::before{inset:-10px 10px 10px -10px}
  .product-shelf{grid-template-columns:minmax(0,1fr)}
  .activity-board__chart{padding:16px}
  .activity-board__totals{grid-template-columns:minmax(0,1fr)}
  .visit__poster{min-height:440px;padding-right:30%}
  .visit__agent{right:-12%;max-width:58%;height:100%}
  .visit__steps li{grid-template-columns:40px 52px minmax(0,1fr);gap:12px;padding:16px}
  .visit__steps li>span{font-size:34px}
  .visit__boo{width:52px;height:52px}
  .prize-strip{grid-template-columns:minmax(0,1fr);padding:24px 20px}
  .answers__list p{padding-right:4px}
  .radio-toggle{height:42px;padding:0 10px 0 6px}
  .radio-toggle__copy{display:none}
  .footer-contact{max-width:none;margin-right:8px}
  .contact-card{padding:16px 16px 0}
  .contact-profile{grid-template-columns:84px minmax(0,1fr);gap:0 16px}
  .contact-avatar,.contact-avatar-image{width:84px;height:84px}
}
@media (max-width:420px){
  .remote__btn{width:58px}
  .remote__btn img{width:34px}
  .tv__screen{height:460px}
}

/* ---------- movimiento ligado al scroll (sólo navegadores con animation-timeline, modo completo) ---------- */
@supports (animation-timeline: scroll()){
  html[data-fx=full][data-motion=full] .hero__sky{animation:out-sky linear both;animation-timeline:scroll(root);animation-range:0 100vh}
  html[data-fx=full][data-motion=full] .hero__mind{animation:out-mind linear both;animation-timeline:scroll(root);animation-range:0 100vh}
  html[data-fx=full][data-motion=full] .hero__name{animation:out-name linear both;animation-timeline:scroll(root);animation-range:0 100vh}
  html[data-fx=full][data-motion=full] .hero__agent{animation:out-agent linear both;animation-timeline:scroll(root);animation-range:0 100vh}
  html[data-fx=full][data-motion=full] .mode__fig{animation:fig-rise linear both;animation-timeline:view();animation-range:entry 0% exit 100%}
  html[data-fx=full][data-motion=full] .section-head::before{animation:num-slide linear both;animation-timeline:view();animation-range:entry 0% exit 80%}
  html[data-fx=full][data-motion=full] .visit__agent{animation:fig-rise linear both;animation-timeline:view();animation-range:entry 0% exit 100%}
}
@keyframes out-sky{to{translate:0 16vh}}
@keyframes out-mind{to{translate:0 -9vh}}
@keyframes out-name{to{translate:-16vw 0}}
@keyframes out-agent{to{translate:0 8vh}}
@keyframes fig-rise{from{translate:0 28px}to{translate:0 -28px}}
@keyframes num-slide{from{translate:-5vw 0}to{translate:4vw 0}}

/* ---------- modo ligero: sin bucles ni capas que cambian por frame ---------- */
html[data-fx=lite] .hero__static,html[data-fx=lite] .hero__frame::before{display:none}
html[data-fx=lite] .hero__osd i,html[data-fx=lite] .live-pill i::after,html[data-fx=lite] .counter-art__equalizer i,html[data-fx=lite] .pnl{animation:none}
html[data-fx=lite] .hero__stage>*{will-change:auto}
html[data-fx=lite] .mode,html[data-fx=lite] .mode::after,html[data-fx=lite] .mode__art{transition-duration:.15s}

/* ---------- movimiento reducido ---------- */
html[data-motion=reduce] .hero__static,html[data-motion=reduce] .hero__frame::before{display:none}
html[data-motion=reduce] .tape[aria-selected=true]{transform:translateY(-36px)}
html[data-motion=reduce] .contact-arrow{transition:none}

@media print{.is-pending{opacity:1!important;transform:none!important}.street-radio,.remote,.hero__stage,.npc-layer{display:none}}


/* ===== [W1] Fairy y Youkai: reglas nuevas aquí (sólo el trabajo W1) ===== */
/* Mientras el lienzo arranca (DOMContentLoaded), los emblemas fijos flotan con CSS: el arranque no se siente muerto.
   Sólo translate, nunca opacidad: las pruebas de modo ligero/reducido leen la opacidad del emblema. */
@keyframes npc-float{50%{translate:0 -7px}}
.npc-wait .hero__npc-fairy{animation:npc-float 3.4s ease-in-out infinite}
.npc-wait .hero__npc-youkai{animation:npc-float 2.7s ease-in-out -1.2s infinite}
.npc-live .hero__npc{animation:none}
/* Motivo visible cuando no pueden animar; la casilla sigue mostrando el valor elegido pero queda desactivada. */
.site-prefs__panel [data-npc-why]:not(:empty){flex:1 1 100%;margin-left:25px;color:#8d8a82;font-size:11px;line-height:1.35}

/* ===== [/W1] ===== */

/* ===== [W2] héroe: reglas nuevas aquí (sólo el trabajo W2) ===== */
/* Señal 60: una cabecera impresa con marcas de registro y acento por canal. */
.title--signal{position:relative;isolation:isolate}
.title--signal::before{content:"";position:absolute;left:-.12em;top:.03em;width:.07em;height:1.62em;
  border-left:2px solid var(--accent);border-top:2px solid var(--accent);border-bottom:2px solid var(--accent);opacity:.9}
.title--signal .title__a,.title--signal .title__b{position:relative;z-index:0;white-space:nowrap;
  transform:skewX(-3deg);transform-origin:left bottom;
  text-shadow:0 .045em 0 #08080a,.025em .063em 0 color-mix(in srgb,var(--accent) 75%,#08080a),.045em .08em 0 #08080a}
.title--signal .title__a::after{content:"";position:absolute;top:.17em;right:-.57em;width:.45em;height:.48em;
  background:linear-gradient(90deg,var(--accent) 0 30%,transparent 30% 37%,var(--accent) 37% 53%,transparent 53% 60%,var(--paper) 60% 68%,transparent 68%);
  clip-path:polygon(15% 0,100% 0,82% 100%,0 100%);transform:skewX(-13deg);filter:drop-shadow(3px 3px 0 #08080a)}
.title--signal .title__b::after{content:"";position:absolute;bottom:-.18em;left:.03em;width:1.25em;height:.065em;
  background:repeating-linear-gradient(110deg,var(--y) 0 5px,transparent 5px 9px)}
.title--signal .title__c{margin-top:.44em;filter:drop-shadow(4px 4px 0 #000)}
.title--signal .title__c span{padding:.2em .36em}
.title--signal .title__c b{padding:.1em .25em .05em;box-shadow:none}
.title--signal .title__c::after{content:"";align-self:end;width:.52em;height:.085em;margin:0 0 .05em .08em;
  background:repeating-linear-gradient(110deg,var(--accent) 0 5px,transparent 5px 9px)}

/* La Vieja Capital queda detrás del personaje: el horizonte es la fuente de luz. */
.hero__stage::before{background:
  radial-gradient(58% 70% at 70% 44%,color-mix(in srgb,var(--accent) 10%,transparent),transparent 72%),
  linear-gradient(90deg,#08080a 0%,#08080af2 23%,#08080a9c 37%,#08080a26 57%,#08080a12 100%),
  linear-gradient(0deg,#08080afc 0%,transparent 22%),linear-gradient(180deg,#08080a88 0%,transparent 16%)}
.hero__sky{left:13%;right:auto;width:100%;opacity:1}
.hero__sky picture{display:block;width:100%;height:100%}
.hero__sky img{object-position:50% 78%}
.hero__hollow{position:absolute;inset:0;width:100%;height:100%;max-width:none;opacity:0;transition:opacity .7s ease}
.hero.has-hollow .hero__hollow{opacity:1}
.hero__mind{opacity:.2}
.hero__panel{width:clamp(145px,14vw,260px);opacity:.64}
.hero__name{opacity:.3}

/* Televisores y señal: secundarios, también incluidos en la lente animada. */
.hero__transmission{z-index:4;inset:auto -4% 7% auto;width:55%;height:55%;object-fit:contain;object-position:center;
  opacity:.25;mix-blend-mode:screen;animation:signal-drift 24s ease-in-out infinite alternate}
.hero.has-hollow .hero__transmission{visibility:hidden;animation:none}
@keyframes signal-drift{from{transform:scale(1)}to{transform:scale(1.025) translate3d(.35%,-.25%,0)}}
html[data-fx=lite] .hero__transmission,html[data-motion=reduce] .hero__transmission{animation:none}
html[data-fx=lite] .hero__transmission{mix-blend-mode:normal;opacity:.24}
@media (prefers-reduced-motion:reduce){.hero__transmission{animation:none}}

/* El cordón pertenece a la escena: deja libre la copia y enmarca al agente. */
.hero__tape{left:48%;right:-8%;top:auto;bottom:28%;height:clamp(32px,2.6vw,42px);
  transform:rotate(-6deg);clip-path:polygon(0 0,100% 0,100% 100%,0 100%,10px 50%);
  background:linear-gradient(180deg,#ffe749 0%,var(--y) 40%,#e8b800 100%);
  border-block:1px solid #0b0b0c99;box-shadow:0 8px 18px #0008;
  font-size:clamp(14px,1.15vw,18px);letter-spacing:.055em;opacity:.92}
.hero__tape::before,.hero__tape::after{height:3px;background:repeating-linear-gradient(-55deg,var(--ink) 0 7px,transparent 7px 14px)}
.hero__tape,.ticker__band{container-type:inline-size}
.hero__tape .band-track,.ticker__band .band-track{flex:0 0 auto;width:max-content;min-width:0;align-items:center}
.hero__tape .band-track>span,.ticker__band .band-track>span{flex:0 0 auto;min-width:100vw;min-width:100cqw;justify-content:space-around;gap:18px;padding-right:18px}
.hero__tape .band-track b,.ticker__band .band-track b{padding:4px 7px 3px;border-width:1px;font-size:9px;letter-spacing:.1em}
.hero__tape-label{display:none}

/* Una señal de estación fija ancla la cinta continua al final del héroe. */
.ticker{display:flex;align-items:stretch;padding-bottom:5px;background:#121214;border-top:1px solid #ffffff20}
.ticker__station{position:relative;z-index:1;display:flex;flex:none;align-items:center;gap:9px;
  padding:6px 14px 6px clamp(16px,3.2vw,48px);background:#121214;color:var(--paper);
  box-shadow:5px 0 0 #0b0b0c}
.ticker__station b{display:grid;place-items:center;min-width:32px;height:31px;background:var(--y);color:var(--ink);font:400 20px/1 var(--tall)}
.ticker__station span{white-space:nowrap;font:700 10px/1.15 var(--mono);letter-spacing:.09em}
.ticker__station small{font:600 8px/1 var(--mono);letter-spacing:.08em;color:#b9b5a9}
.ticker__band{flex:1 1 0;min-width:0;height:50px;overflow:hidden;font-size:19px;letter-spacing:.055em}
.ticker__band .band-track{animation-duration:56s}
.ticker__stripe{position:absolute;inset:auto 0 0;height:5px}
html[data-motion=reduce] .hero__tape .band-track,html[data-motion=reduce] .ticker__band .band-track{animation:none!important}
@media (prefers-reduced-motion:reduce){.hero__tape .band-track,.ticker__band .band-track{animation:none}}

/* Un pequeño banco de canales: retratos siempre reconocibles, selección y AUTO visibles. */
.hero > .remote{display:block;width:min(100%,536px);max-width:100%;padding:0;overflow:visible;
  background:#09090bef;border:1px solid #ffffff38;box-shadow:6px 6px 0 #000,0 -2px 0 color-mix(in srgb,var(--accent) 75%,transparent)}
.remote__head{height:32px;display:flex;align-items:center;gap:10px;
  padding:0 0 0 9px;border-bottom:1px solid #ffffff24;color:#d4d0c6;
  font:700 10px/1 var(--mono);letter-spacing:.1em}
.remote__caption,.remote__channel{display:flex;align-items:center;gap:7px;white-space:nowrap}
.remote__channel{margin-left:auto}
.remote__caption i{width:6px;height:6px;background:var(--accent);box-shadow:0 0 8px color-mix(in srgb,var(--accent) 70%,transparent)}
.remote__head b{color:var(--accent)}
.remote__controls{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:4px;
  align-items:stretch;padding:6px}
.remote__controls .remote__btn{width:auto;min-width:0;min-height:87px;gap:3px;padding:6px 2px 8px;overflow:hidden;
  border:1px solid #ffffff30;background:linear-gradient(155deg,#2a2a30 0,#111115 48%,#070708 100%);
  clip-path:polygon(0 0,calc(100% - 8px) 0,100% 8px,100% 100%,0 100%);
  transition:transform .2s var(--ease),border-color .2s,background .2s}
.remote__controls .remote__btn::after{content:"";position:absolute;left:0;right:0;bottom:0;height:3px;
  background:var(--accent);transform:scaleX(0);transform-origin:left;transition:transform .2s}
.remote__controls .remote__btn img{width:48px;max-width:100%;height:auto;filter:saturate(.65);transition:filter .2s,transform .2s}
.remote__controls .remote__no{font-size:10px;color:#a8a59b}
.remote__controls .remote__name{font-size:10px;letter-spacing:.025em;color:#dfdcd2}
.remote__controls .remote__btn:hover{transform:translateY(-2px);border-color:var(--accent)}
.remote__controls .remote__btn:hover::after,.remote__controls .remote__btn[aria-pressed=true]::after{transform:scaleX(1)}
.remote__controls .remote__btn:hover img,.remote__controls .remote__btn[aria-pressed=true] img{filter:none}
.remote__controls .remote__btn[aria-pressed=true]{background:var(--accent);border-color:var(--accent);
  transform:translateY(-4px);box-shadow:inset 0 -3px 0 #09090b}
.remote__controls .remote__btn[aria-pressed=true]::after{background:#09090b}
.remote__controls .remote__btn:focus-visible{clip-path:none;outline:2px solid #fff;outline-offset:-2px}
.remote__controls .remote__btn[aria-pressed=true] .remote__no,
.remote__controls .remote__btn[aria-pressed=true] .remote__name{color:#09090b}
.remote__head .remote__auto{align-self:stretch;width:64px;min-width:0;margin:0;padding:0 3px;
  border:0;border-left:1px solid #ffffff38;font-size:10px;letter-spacing:.05em}
.remote__head .remote__auto i{top:auto;left:0;right:0;bottom:0;width:auto;height:3px;
  transform:scaleX(0);transform-origin:left}

@media (max-width:1100px){.hero > .remote{width:min(100%,510px)}}
@media (min-width:761px) and (max-width:1100px){
  .hero__tape{left:58%;right:-15%;top:8%;bottom:auto;transform:rotate(-5deg)}
}
@media (min-width:761px) and (max-width:900px) and (min-height:850px){
  .hero{min-height:820px}
}
@media (max-width:760px){
  .hero__stage::before{background:radial-gradient(70% 40% at 70% 22%,color-mix(in srgb,var(--accent) 26%,transparent),transparent 72%),
    linear-gradient(180deg,#08080a80 0,transparent 10svh,transparent 26svh,#08080add 39svh,#08080a 50svh)}
  .hero__agent{height:min(45svh,390px)}
  .hero__panel{height:min(48svh,420px)}
  .hero__mind{height:min(43svh,375px)}
  .hero__sky{left:-17%;width:120%;height:min(49svh,430px)}
  .hero__transmission{inset:0 -15% auto auto;width:74%;height:min(42svh,350px);opacity:.24}
  .hero__tape{left:16px;right:auto;top:20px;bottom:auto;width:172px;height:28px;transform:rotate(-3deg)}
  .hero__tape .band-track{display:none}
  .hero__tape-label{display:flex;align-items:center;justify-content:space-between;gap:6px;width:100%;padding:4px 8px 4px 12px;
    font:700 10px/1 var(--mono);letter-spacing:.025em;white-space:nowrap}
  .hero__tape-label b{display:grid;place-items:center;width:15px;height:15px;background:var(--ink);color:var(--y);font-size:11px}
  .hero__tape-label i{padding:2px 3px;border:1px solid currentColor;font:700 8px/1 var(--mono)}
  .hero__frame{height:min(43svh,375px)}
  .hero__copy{padding-top:min(37svh,310px)}
  .hero__npc-fairy{top:min(31svh,260px)}
  .title--signal .title__c{margin-top:.4em}
  .lead{margin-top:16px}
  .hero__actions{margin-top:14px}
  .hero > .remote{width:100%;margin:20px 0 0;padding:0;overflow:visible;scroll-snap-type:none}
  .remote__controls{gap:2px;padding:4px}
  .remote__controls .remote__btn{min-height:82px}
  .remote__controls .remote__btn img{width:40px}
  .remote__controls .remote__name{font-size:9px}
  .remote__head{font-size:9px;letter-spacing:.07em}
  .remote__head .remote__auto{width:58px}
  .ticker{padding-bottom:4px}
  .ticker__station{gap:7px;padding:5px 10px 5px 16px}
  .ticker__station b{min-width:27px;height:27px;font-size:17px}
  .ticker__station span{font-size:9px}.ticker__station small{font-size:8px}
  .ticker__band{height:42px;font-size:16px}.ticker__stripe{height:4px}
}
@media (max-width:760px) and (max-height:800px){
  .hero__copy{padding-top:min(29svh,215px)}
  .hero__agent{height:min(40svh,295px)}
  .hero__panel{height:min(42svh,310px)}
}
@media (max-width:420px){
  .street-radio{right:12px;bottom:10px}
  .radio-toggle{height:36px}
}
html[data-motion=reduce] .remote__controls .remote__btn,
html[data-motion=reduce] .remote__controls .remote__btn img,
html[data-motion=reduce] .remote__controls .remote__btn::after{transition:none}
/* ===== [/W2] ===== */

/* ===== [W3] cinta, índice, títulos de sección y secciones 01-03: reglas nuevas aquí (sólo el trabajo W3) ===== */

/* ===== [/W3] ===== */

/* ===== [W4] secciones 04-06 y pie: reglas nuevas aquí (sólo el trabajo W4) ===== */

/* ===== [/W4] ===== */