@font-face{font-family:"Red Hat Display";src:url(fonts/rhd-900.woff2) format("woff2");font-weight:900;font-display:swap}
@font-face{font-family:"Red Hat Text";src:url(fonts/rht.woff2) format("woff2");font-weight:300 700;font-display:swap}

:root{
  --ink:#0B0A09;
  --char:#1C1A18;
  --bone:#F1F0EC;
  --paper:#E2E0DA;
  --stone:#B5AFA3;
  --red:#D4111E;
  --m:clamp(16px,2.2vw,32px);
  --bar:52px;
  --small:.875rem;
  --body:clamp(1.0625rem,1rem + .25vw,1.25rem);
  --lead:clamp(1.25rem,1.1rem + .7vw,1.75rem);
  --head:clamp(2.75rem,1.2rem + 8vw,7.5rem);
  --expo:cubic-bezier(.16,1,.3,1);
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;scroll-padding-top:var(--bar)}
body{margin:0;background:var(--ink);color:var(--bone);font:400 var(--body)/1.5 "Red Hat Text",system-ui,sans-serif;overflow-x:clip;-webkit-font-smoothing:antialiased}
img,canvas{display:block;max-width:100%}
img{height:auto}
figure{margin:0}
p{margin:0}
a{color:inherit}
h1,h2{font:900 var(--head)/.92 "Red Hat Display",system-ui,sans-serif;letter-spacing:-.03em;text-transform:uppercase;margin:0}
h3{font:900 var(--lead)/1.05 "Red Hat Display",system-ui,sans-serif;letter-spacing:-.02em;margin:0}
:focus-visible{outline:3px solid var(--bone);outline-offset:3px}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
.skip{position:fixed;left:var(--m);top:-80px;z-index:30;background:var(--bone);color:var(--ink);padding:12px 16px}
.skip:focus{top:8px}

/* Fotos: un solo tratamiento, blanco y negro duro como el póster */
figure img{filter:grayscale(1) contrast(1.18)}

/* Barra */
.bar{position:fixed;inset:0 0 auto 0;z-index:20;height:var(--bar);padding:0 var(--m);display:flex;align-items:center;justify-content:space-between;background:var(--ink)}
.mark{display:flex;align-items:center;gap:8px;text-decoration:none;font:900 1.125rem/1 "Red Hat Display",sans-serif;letter-spacing:-.02em;min-height:44px}
.mark b{color:#FF3B46;font-weight:900}
.mark-tv{width:26px;height:26px;fill:var(--red);flex:none}
.mark-play{fill:var(--bone)}
.year{font:900 1.25rem/1 "Red Hat Display",sans-serif;font-variant-numeric:tabular-nums;color:var(--bone)}
.progress{position:absolute;left:0;right:0;bottom:0;height:4px;background:var(--red);transform:scaleX(0);transform-origin:left}

/* Botón: rectángulo plano, una sola forma en toda la página */
.btn{display:flex;align-items:center;justify-content:center;min-height:60px;padding:0 28px;background:var(--red);color:#fff;font:900 1.1875rem/1 "Red Hat Display",sans-serif;letter-spacing:-.01em;text-decoration:none;transition:transform .25s var(--expo),background-color .2s}
.btn:hover{background:#B00D18;transform:translateY(-2px)}
.btn:active{transform:scale(.97)}

/* Hero */
.hero{min-height:100svh;display:flex;flex-direction:column;position:relative;overflow:clip;background:var(--ink)}
.hero-field{flex:1;display:flex;flex-direction:column;background:var(--red);color:#fff;padding:calc(var(--bar) + 28px) var(--m) 0;position:relative}
.setup{font:900 13.6vw/.92 "Red Hat Display",sans-serif;letter-spacing:-.03em;text-transform:uppercase;color:var(--ink);margin-bottom:.22em}
.censor{position:relative;display:block;width:max-content}
.hero h1{font-size:13.6vw;line-height:.92}
.mask{display:block;overflow:clip;overflow-clip-margin:.08em}
.mask>span{display:block}
.hero-tv{margin:auto -7vw -13vw auto;padding-top:24px;width:88vw;position:relative;z-index:2;will-change:transform}
.hero-tv .tv{transform:rotate(-4deg)}
.hero-band{background:var(--ink);padding:calc(13vw + 28px) var(--m) calc(20px + env(safe-area-inset-bottom));display:grid;gap:18px}
.lead-in{max-width:40ch;font-size:max(18px,var(--body))}

/* Tele: foto del póster con estática en vivo sobre la pantalla */
.tv{position:relative;display:block;padding:0;border:0;background:none;color:inherit;font:inherit;width:100%}
.tv img{width:100%}
.noise{position:absolute;left:10.6%;top:11.8%;width:64%;height:74.5%;border-radius:9%/11%;image-rendering:pixelated;opacity:.26;pointer-events:none;transition:opacity .35s}
.tv.is-flip .noise{opacity:1;transition:none}
.osd{position:absolute;left:14%;top:15%;font:900 clamp(1.5rem,7vw,3.25rem)/1 "Red Hat Display",sans-serif;color:var(--bone);letter-spacing:-.03em;font-variant-numeric:tabular-nums;pointer-events:none}
.tv.is-flip .osd{opacity:0}
.knob{position:absolute;left:88.7%;top:21%;width:5px;height:6%;margin:-3% 0 0 -2px;background:var(--bone);transform-origin:50% 100%;transform:rotate(calc(var(--turn,0)*72deg - 144deg));transition:transform .5s var(--expo)}

/* Cinta de carpetas */
.ticker{background:var(--bone);color:var(--ink);overflow:hidden;padding:12px 0;font:900 1.25rem/1 "Red Hat Display",sans-serif;text-transform:uppercase;letter-spacing:-.02em}
.ticker-run{display:flex;width:max-content;animation:run 34s linear infinite}
.ticker-run span{padding-right:1.5em;white-space:nowrap}
.ticker-run span:nth-child(odd){color:var(--red)}
@keyframes run{to{transform:translateX(-50%)}}

/* Escalera */
.stairs{background:var(--paper);color:var(--ink);padding:72px var(--m) 64px;display:grid;gap:40px}
.stair-text{font:900 7.2vw/1.12 "Red Hat Display",sans-serif;letter-spacing:-.03em}
.stair-text p{white-space:nowrap}
.s1{padding-left:0}.s2{padding-left:2.5vw;color:#B50E19}.s3{padding-left:5vw}.s4{padding-left:7.5vw;color:#B50E19}.s5{padding-left:10vw}
.stair-pics{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.stair-pics img{aspect-ratio:3/2;width:100%;object-fit:cover}
.stair-note{max-width:34ch}

/* Canales */
.canales{background:var(--ink);padding:72px var(--m) 32px}
.canales h2{margin-bottom:32px}
.tuner{display:grid;gap:24px}
.tv-big{cursor:pointer;transition:transform .2s var(--expo)}
.tv-big:active{transform:scale(.985)}
.tv-big .noise{opacity:.2}
.dial{display:grid;grid-template-columns:repeat(5,1fr);gap:4px}
.dial button{min-height:60px;border:0;background:var(--char);color:var(--bone);font:900 1.0625rem/1 "Red Hat Display",sans-serif;font-variant-numeric:tabular-nums;cursor:pointer;transition:background-color .2s,transform .2s var(--expo)}
.dial button:active{transform:scale(.94)}
.dial button[aria-pressed=true]{background:var(--red);color:#fff}
.programs{margin-top:24px;min-height:170px}
.program{display:block}
.program+.program{margin-top:28px}
.js .program[hidden]{display:none}
.js .program+.program{margin-top:0}
.program h3{font-size:clamp(2.5rem,12vw,4.5rem);text-transform:uppercase;line-height:.95;letter-spacing:-.03em;margin-bottom:12px}
.program.is-on{animation:tune .5s var(--expo)}
@keyframes tune{from{opacity:0;transform:translateY(14px)}}

/* Cajón: hojas que se apilan como pestañas */
.drawer{background:var(--ink);padding:24px 0 0;--tab:44px;--top:var(--bar)}
.drawer>h2{padding:0 var(--m);margin-bottom:32px}
.sheets{position:relative}
.sheet{display:contents}
.sheet h3{position:sticky;top:calc(var(--top) + var(--i)*var(--tab));z-index:calc(5 + var(--i));height:var(--tab);display:flex;align-items:center;padding:0 var(--m);font-size:1.125rem;letter-spacing:-.01em;white-space:nowrap;background:var(--g);color:var(--t)}
.sheet-body{background:var(--g);color:var(--t);padding-bottom:32px}
.sheet figure{overflow:hidden}
.sheet img{width:100%;aspect-ratio:16/9;object-fit:cover}
.sheet p{padding:18px var(--m) 0;max-width:44ch}
.sh-paper{--g:var(--paper);--t:var(--ink)}
.sh-red{--g:var(--red);--t:#fff}
.sh-stone{--g:var(--stone);--t:var(--ink)}
.sh-char{--g:var(--char);--t:var(--bone)}
.sh-bone{--g:var(--bone);--t:var(--ink)}
.sh-bone .sheet-body{padding-bottom:72px}
.sh-red figure img,.sh-char figure img{object-position:50% 30%}

/* Objeto delante del tipo */
.object{background:var(--red);color:#fff;padding:72px 0 64px;overflow:clip}
.object-type{position:relative;padding:0 var(--m)}
.object-type p,.object-type h2{font:900 13.2vw/.92 "Red Hat Display",sans-serif;letter-spacing:-.03em;text-transform:uppercase;white-space:nowrap;will-change:transform}
.object-type .dim{color:var(--ink)}
.object-type p{color:var(--ink)}
.film{position:relative;width:104vw;margin:20px -8vw 0 -4vw;transform:rotate(-4deg);will-change:transform}
.film img{width:100%}
.facts{display:grid;gap:16px;padding:40px var(--m) 0;max-width:calc(46ch + 2*var(--m))}

/* Ocho carpetas: la tacha se levanta */
.carpetas{background:var(--ink);padding:72px var(--m)}
.carpetas h2{margin-bottom:36px}
.rows{list-style:none;margin:0;padding:0;display:grid;gap:18px}
.rows li{display:grid;gap:2px}
.rows b{font:900 1.5rem/1.1 "Red Hat Display",sans-serif;letter-spacing:-.02em}
.rows span{color:var(--stone);font-size:1rem}
.rows i{font-style:normal;position:relative;display:inline-block}
.js .rows i::after{content:"";position:absolute;inset:-2px -3px;background:var(--red);transform-origin:left;transition:transform .7s var(--expo);transition-delay:calc(var(--r,0)*50ms + 120ms)}
.js .rows li.is-in i::after{transform:scaleX(0);transform-origin:right;visibility:hidden;transition:transform .7s var(--expo) calc(var(--r,0)*50ms + 120ms),visibility 0s linear 1.1s}

/* Cierre invertido */
.close{background:var(--bone);color:var(--ink);min-height:62svh;padding:72px var(--m) 28px;display:flex;flex-direction:column;justify-content:space-between;gap:48px}
.close h2{font-size:13.2vw}
.close-foot{display:grid;gap:20px}

/* Pie */
.foot{background:var(--ink);padding:40px var(--m) 28px;display:grid;gap:32px}
.blocks{display:grid;grid-template-columns:repeat(8,1fr);gap:4px;grid-auto-rows:11svh;align-items:end;overflow:hidden}
.blocks span{height:var(--h);background:var(--bone);color:var(--ink);display:flex;align-items:flex-end;justify-content:center;font:900 clamp(1.5rem,7vw,5rem)/1.1 "Red Hat Display",sans-serif}
.blocks .r{background:var(--red);color:#fff}
.foot-nav{display:grid;grid-template-columns:1fr 1fr;gap:4px 16px}
.foot-nav a{display:flex;align-items:center;min-height:44px;text-decoration:none;transition:color .2s}
.foot-nav a:hover{color:#FF5A63}
.credits,.copy{font-size:var(--small);color:var(--stone)}
.credits a{text-underline-offset:2px}

/* Entradas: solo con JS, y nunca dejan contenido oculto si algo falla */
.js [data-in]{opacity:0;transform:translateY(24px);transition:opacity .7s var(--expo),transform .9s var(--expo);transition-delay:var(--d,0ms)}
.js [data-in].is-in{opacity:1;transform:none}
.js [data-stair] p{opacity:0;transform:translateX(-28px);transition:opacity .6s var(--expo),transform .9s var(--expo)}
.js [data-stair].is-in p{opacity:1;transform:none}
.js [data-stair] .s2{transition-delay:90ms}.js [data-stair] .s3{transition-delay:180ms}.js [data-stair] .s4{transition-delay:270ms}.js [data-stair] .s5{transition-delay:360ms}
.js .sheet img{transform:scale(1.12);transition:transform 1.3s var(--expo)}
.js .sheet.is-in img{transform:none}
.js .close .mask>span{transform:translateY(102%);transition:transform 1s var(--expo)}
.js .close .mask:nth-child(2)>span{transition-delay:90ms}
.js .close.is-in .mask>span{transform:none}
.js .blocks span{transform:translateY(102%);transition:transform .9s var(--expo);transition-delay:calc(var(--b,0)*35ms)}
.js .blocks.is-in span{transform:none}

/* Apertura del hero */
.js .hero .mask>span{animation:rise 1s var(--expo) both .15s}
.js .hero .mask:nth-child(2)>span{animation-delay:.27s}
@keyframes rise{from{transform:translateY(102%)}}
.js .setup{animation:fadein .5s linear both}
@keyframes fadein{from{opacity:0}}
.js .censor::after{content:"";position:absolute;inset:.02em -.08em;background:var(--ink);transform:scaleX(0);transform-origin:left;animation:censor 1.4s ease-in-out 1.2s both}
.js .c2::after{animation-delay:1.32s}
@keyframes censor{0%{transform:scaleX(0);transform-origin:left}45%{transform:scaleX(1);transform-origin:left}55%{transform:scaleX(1);transform-origin:right}100%{transform:scaleX(0);transform-origin:right}}
/* El movimiento firma: la tele se abre como obturador */
.js .tv-open{animation:shutter 1.1s var(--expo) both .35s}
.js .tv-open img{animation:settle 1.4s var(--expo) both .35s}
@keyframes shutter{from{clip-path:inset(48% 0 48% 0)}to{clip-path:inset(0)}}
@keyframes settle{from{transform:scale(1.12)}}

@media (min-width:600px){
  .rows li{grid-template-columns:5fr 7fr;align-items:baseline;gap:24px}
  .hero h1,.setup{font-size:11vw}
}

/* Pantallas bajas: que el botón siga a la vista */
@media (max-height:720px) and (max-width:899px){
  .hero-tv{width:64vw;margin-bottom:-9vw;margin-right:-4vw}
  .hero-band{padding-top:calc(9vw + 20px)}
}

/* Escritorio: misma idea con más aire */
@media (min-width:900px){
  :root{--bar:60px}
  .setup{font-size:7vw}
  .hero h1{font-size:8.4vw}
  .hero-tv{position:absolute;right:5vw;bottom:-7vw;width:41vw;margin:0}
  .hero-tv .tv{transform:rotate(4deg)}
  .hero-band{grid-template-columns:minmax(0,40ch) auto;justify-content:start;align-items:center;gap:40px;padding:28px 50vw 28px var(--m)}
  .hero-band .btn{white-space:nowrap}
  .stairs{grid-template-columns:3fr 1fr;padding:160px var(--m) 120px;align-items:start;gap:40px 32px}
  .stair-text{font-size:min(5vw,5.4rem);grid-column:1}
  .s2{padding-left:6vw}.s3{padding-left:12vw}.s4{padding-left:18vw}.s5{padding-left:24vw}
  .stair-pics{grid-column:2;grid-row:1;grid-template-columns:1fr}
  .stair-note{grid-column:1}
  .canales{padding:160px var(--m) 72px}
  .canales h2{margin-bottom:56px}
  .tuner{grid-template-columns:7fr 5fr;gap:48px;align-items:start}
  .osd{font-size:4.5vw}
  .programs{margin-top:32px}
  .program h3{font-size:5.4vw}
  .drawer{padding-top:80px;--tab:56px;--top:var(--bar)}
  .sheet h3{font-size:1.75rem}
  .sheet-body{display:grid;grid-template-columns:1fr 1fr;align-items:end;padding:0;height:68svh}
  .sheet-body figure{grid-column:2;grid-row:1;height:100%}
  .sheet figure{min-height:0}
  .sheet img{aspect-ratio:auto;height:100%}
  .sheet p{grid-column:1;grid-row:1;font-size:var(--lead);line-height:1.3;padding:0 var(--m) 40px;max-width:30ch}
  .sh-bone .sheet-body{padding-bottom:0}
  .object{padding:160px 0 120px}
  .object-type p,.object-type h2{font-size:10.5vw}
  .object-type{min-height:0}
  .film{position:absolute;right:-3vw;top:-5vw;width:46vw;margin:0}
  .facts{grid-template-columns:1fr 1fr;gap:48px;max-width:none;padding-top:72px}
  .carpetas{padding:160px var(--m)}
  .rows{gap:6px}
  .rows li{grid-template-columns:5fr 7fr;align-items:baseline;gap:32px}
  .rows b{font-size:2.25rem}
  .rows span{font-size:1.25rem}
  .close{padding:120px var(--m) 40px;min-height:66svh}
  .close h2{font-size:10vw}
  .close-foot{grid-template-columns:minmax(0,1fr) auto;align-items:end}
  .close-foot .btn{min-width:320px}
  .blocks{grid-template-columns:repeat(15,1fr);grid-auto-rows:30svh}
  .blocks span{font-size:5.4vw}
  .foot-nav{grid-template-columns:repeat(4,auto);justify-content:start;gap:0 40px}
}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation:none!important;transition:none!important}
  .js [data-in],.js [data-stair] p,.js .sheet img,.js .close .mask>span,.js .blocks span{opacity:1;transform:none}
  .js .rows i::after,.js .censor::after{display:none}
  .ticker-run{flex-wrap:wrap;width:auto}
  .ticker-run span:nth-child(n+9){display:none}
}