:root { --negro: #0c0c0c; --acido: #c8ff1e; --rosa: #ff2e88; --azul: #2b3bff; --blanco: #f4f1ea; }
* { box-sizing: border-box; margin: 0; padding: 0; }
html { background: var(--negro); color: var(--blanco); }
body { font: 400 16px/1.4 "Space Mono", monospace; overflow-x: hidden; }
a { color: inherit; text-decoration: none; }

.barra { position: fixed; inset: 0 0 auto; z-index: 30; display: flex; justify-content: space-between; align-items: center; padding: 20px 3vw; font-weight: 700; font-size: 14px; mix-blend-mode: difference; }
.barra a { border: 2px solid; padding: 8px 16px; display: inline-block; }

/* hero: letras que engordan y se estiran cerca del ratón */
.hero { height: 100vh; position: relative; overflow: hidden; background: var(--acido); color: var(--negro); }
.ruido { position: absolute; left: 0; right: 0; top: 46%; transform: translateY(-50%); display: flex; justify-content: center; font: 900 34vw/0.78 Anybody, sans-serif; font-variation-settings: "wdth" 100, "wght" 900; letter-spacing: -.02em; transform-origin: center bottom; }
.ruido span { display: inline-block; font-variation-settings: inherit; will-change: font-variation-settings; }
.pie-hero { position: absolute; left: 3vw; right: 3vw; bottom: 3vh; display: flex; justify-content: space-between; align-items: flex-end; font-weight: 700; font-size: 20px; text-transform: uppercase; }
.pie-hero .num { font: 900 16vw/0.75 Anybody, sans-serif; font-variation-settings: "wdth" 50, "wght" 900; color: var(--rosa); }

/* cartel: cintas infinitas */
.cartel { padding: 14vh 0; display: grid; gap: 0; overflow: hidden; background: var(--negro); }
.fila { white-space: nowrap; overflow: hidden; padding: 1.5vh 0; }
.pista { display: inline-block; font: 900 9vw/1 Anybody, sans-serif; font-variation-settings: "wdth" 70, "wght" 900; will-change: transform; }
.f1 { color: var(--blanco); }
.f2 { background: var(--rosa); color: var(--negro); transform: rotate(-3deg) scale(1.05); margin: 3vh 0; }
.f2 .pista { font-variation-settings: "wdth" 150, "wght" 200; font-style: italic; }
.f3 { color: transparent; -webkit-text-stroke: 2px var(--acido); }

/* días: scroll horizontal */
.dias { height: 100vh; overflow: hidden; background: var(--blanco); color: var(--negro); }
.tira { display: flex; gap: 3vw; height: 100%; align-items: center; padding: 0 6vw; width: max-content; }
.dia { width: 62vw; height: 76vh; position: relative; padding: 3vw; display: flex; flex-direction: column; justify-content: space-between; border: 3px solid var(--negro); }
.d1 { background: var(--acido); } .d2 { background: var(--rosa); } .d3 { background: var(--azul); color: var(--blanco); } .d4 { background: var(--negro); color: var(--acido); }
.dia .eti { font-weight: 700; font-size: 22px; }
.dia h2 { font: 900 34vh/0.8 Anybody, sans-serif; font-variation-settings: "wdth" 50, "wght" 900; position: absolute; right: 2vw; top: 3vh; }
.dia ul { list-style: none; font: 900 4.4vw/1.02 Anybody, sans-serif; font-variation-settings: "wdth" 110, "wght" 800; }
.pegatina { position: absolute; right: 4vw; bottom: 5vh; background: var(--negro); color: var(--acido); padding: 14px 22px; font-weight: 700; font-size: 26px; transform: rotate(-12deg); border-radius: 50px; }
.d4 .pegatina { background: var(--acido); color: var(--negro); }

/* letras sueltas que se juntan */
.explota { height: 220vh; background: var(--azul); }
.volando { position: sticky; top: 0; height: 100vh; display: flex; flex-wrap: wrap; align-content: center; justify-content: center; padding: 0 4vw; font: 900 13vw/0.85 Anybody, sans-serif; font-variation-settings: "wdth" 80, "wght" 900; text-align: center; color: var(--acido); }
.volando .ch { display: inline-block; }
.volando .esp { width: .25em; }

/* final */
.final { height: 100vh; display: grid; place-items: center; background: var(--negro); }
.sello { position: relative; width: min(60vh, 70vw); aspect-ratio: 1; display: grid; place-items: center; }
.sello svg { position: absolute; inset: 0; width: 100%; fill: var(--acido); font: 700 13px "Space Mono", monospace; animation: gira 14s linear infinite; }
@keyframes gira { to { transform: rotate(360deg); } }
.boton { width: 52%; aspect-ratio: 1; border-radius: 50%; background: var(--rosa); color: var(--negro); display: grid; place-items: center; text-align: center; font: 900 4.6vh/1 Anybody, sans-serif; font-variation-settings: "wdth" 70, "wght" 900; }