@font-face{font-family:Display;src:url('../fonts/display.woff2') format('woff2');font-display:swap}
@font-face{font-family:Mono;src:url('../fonts/mono.woff2') format('woff2');font-display:swap}

:root{
  --bg:#0b0b0d; --ink:#f2f2f2; --mute:#9a9aa2; --line:rgba(242,242,242,.14);
  --violet:#8b5cff; --blue:#2f7bff; --acc:#ff4d1a;
  --info:#3aa0ff; --fix:#ffb020; --app:#2fd68a; --test:#b07cff;
  --display:Display,"Arial Black","Helvetica Neue",Impact,sans-serif;
  --mono:Mono,ui-monospace,Consolas,monospace;
  --body:system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  --pad:clamp(20px,5vw,72px);
  --ease:cubic-bezier(.2,.75,.2,1);
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{background:var(--bg);color:var(--ink);font-family:var(--body);line-height:1.55;-webkit-font-smoothing:antialiased}
main,footer{overflow-x:clip}
img,video{display:block;max-width:100%;height:auto}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
.mono{font-family:var(--mono);font-size:.72rem;letter-spacing:.14em;text-transform:uppercase}
.mute{color:var(--mute)}
.acc{color:var(--acc)}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
::selection{background:var(--violet);color:#fff}

/* ---------- Capas globales ---------- */
.grain{position:fixed;inset:-50%;z-index:90;pointer-events:none;opacity:.07;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  animation:grain 1s steps(6) infinite}
@keyframes grain{0%{transform:translate(0,0)}20%{transform:translate(-3%,2%)}40%{transform:translate(2%,-3%)}60%{transform:translate(-2%,-1%)}80%{transform:translate(3%,3%)}100%{transform:translate(0,0)}}
.progress{position:fixed;left:0;top:0;right:0;height:2px;z-index:80}
.progress i{display:block;height:100%;width:100%;transform-origin:0 50%;transform:scaleX(0);background:linear-gradient(90deg,var(--blue),var(--violet),var(--acc))}

/* Cursor */
.cursor{position:fixed;left:0;top:0;z-index:100;width:14px;height:14px;margin:-7px 0 0 -7px;border-radius:50%;background:var(--ink);pointer-events:none;mix-blend-mode:difference;transition:width .3s var(--ease),height .3s var(--ease),margin .3s var(--ease),background .3s;display:none}
.has-cursor .cursor{display:grid;place-items:center}
.has-cursor, .has-cursor a, .has-cursor button{cursor:none}
.cursor.big{width:84px;height:84px;margin:-42px 0 0 -42px;mix-blend-mode:normal;background:var(--ink)}
.cursor-label{font-family:var(--display);font-size:.78rem;text-transform:uppercase;color:var(--bg);opacity:0;transition:opacity .2s}
.cursor.big .cursor-label{opacity:1}

/* Precarga */
.loader{position:fixed;inset:0;z-index:120;background:var(--bg);display:grid;place-items:center;transition:clip-path 1s var(--ease)}
.loader-in{text-align:center}
.loader b{display:block;font-family:var(--display);font-size:clamp(5rem,18vw,14rem);line-height:.9;letter-spacing:-.04em}
.loader-woof{color:var(--violet)}
.loaded .loader{clip-path:inset(0 0 100% 0);pointer-events:none}
html:not(.js) .loader{display:none}

/* Cabecera */
header{position:fixed;inset:0 0 auto 0;z-index:70;display:flex;align-items:center;justify-content:space-between;gap:20px;padding:18px var(--pad);transition:background .4s,padding .4s,border-color .4s;border-bottom:1px solid transparent}
header.scrolled{background:rgba(11,11,13,.78);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);padding-top:12px;padding-bottom:12px;border-color:var(--line)}
.logo{font-family:var(--display);font-size:1.35rem;letter-spacing:.04em;display:inline-flex}
.logo .ears{display:inline-block;transition:transform .4s var(--ease)}
.logo:hover .ears{transform:translateY(-4px) rotate(-8deg)}
.chapters{display:flex;gap:26px}
.chapters a{position:relative;font-family:var(--mono);font-size:.7rem;letter-spacing:.12em;text-transform:uppercase;color:#cfcfd4;padding:4px 0}
.chapters a b{color:var(--acc);font-weight:400;margin-right:6px}
.chapters a::after{content:"";position:absolute;left:0;bottom:-2px;height:1px;width:100%;background:var(--ink);transform:scaleX(0);transform-origin:right;transition:transform .4s var(--ease)}
.chapters a:hover::after,.chapters a.on::after{transform:scaleX(1);transform-origin:left}
.sound{display:flex;align-items:center;gap:10px;border:1px solid var(--line);padding:8px 12px;transition:.25s}
.sound:hover{border-color:var(--ink)}
.bars{display:flex;align-items:flex-end;gap:2px;height:12px}
.bars i{width:2px;height:3px;background:var(--ink);transition:height .2s}
.sound.on .bars i{animation:eq .9s ease-in-out infinite}
.sound.on .bars i:nth-child(2){animation-delay:.2s}.sound.on .bars i:nth-child(3){animation-delay:.4s}
@keyframes eq{0%,100%{height:3px}50%{height:12px}}

/* Botones */
.btn{position:relative;display:inline-flex;align-items:center;gap:12px;font-family:var(--display);text-transform:uppercase;letter-spacing:.04em;font-size:.9rem;padding:17px 26px;border:1.5px solid var(--c,var(--ink));overflow:hidden;isolation:isolate;transition:color .35s var(--ease),transform .2s}
.btn::before{content:"";position:absolute;inset:0;z-index:-1;background:var(--c,var(--ink));transform:translateY(101%);transition:transform .45s var(--ease)}
.btn.fill{background:var(--c,var(--ink));color:#0b0b0d}
.btn.fill::before{background:var(--ink)}
.btn.fill:hover{color:#0b0b0d}
.btn.line{color:var(--ink)}
.btn.line:hover{color:#0b0b0d}
.btn:hover::before{transform:none}
.btn .ar{transition:transform .35s var(--ease)}
.btn:hover .ar{transform:translateX(6px)}
.row{display:flex;gap:12px;flex-wrap:wrap;align-items:center}
.sticker{display:inline-block;background:var(--c,var(--ink));color:#0b0b0d;font-family:var(--display);padding:7px 13px;transform:rotate(-4deg)}

/* Reveal genérico */
.js .reveal{opacity:0;transform:translateY(46px);transition:opacity 1s var(--ease),transform 1s var(--ease)}
.js .reveal.in{opacity:1;transform:none}

/* ---------- PORTADA ---------- */
.hero{position:relative;height:220vh}
.hero-sticky{position:sticky;top:0;height:100vh;height:100svh;overflow:hidden;display:grid;place-items:center}
.hero-bg{position:absolute;inset:-6%;background:#141416 url('../img/hormigon.webp') center/cover;filter:brightness(.42) contrast(1.1)}
.neon{position:absolute;border-radius:50%;filter:blur(110px);opacity:.32;mix-blend-mode:screen;animation:float 9s ease-in-out infinite}
.n1{width:46vw;height:46vw;left:-12vw;top:10vh;background:var(--blue)}
.n2{width:40vw;height:40vw;right:-10vw;bottom:-6vh;background:var(--violet);animation-delay:-4s}
@keyframes float{50%{transform:translate(4vw,-3vh) scale(1.08)}}
.hero-word{position:absolute;z-index:1;inset:auto 0 50%;transform:translateY(50%);display:flex;justify-content:center;font-family:var(--display);font-size:clamp(6rem,27vw,30rem);line-height:.78;letter-spacing:-.05em;color:transparent;-webkit-text-stroke:1.5px rgba(242,242,242,.55);white-space:nowrap;user-select:none;pointer-events:none}
.hero-word span{display:inline-block;will-change:transform}
.poster{position:relative;z-index:2;width:min(28vw,400px);aspect-ratio:9/16;max-height:80vh;will-change:transform;transform-origin:50% 22%;box-shadow:0 40px 120px rgba(0,0,0,.6),0 0 0 1px var(--line)}
.poster img,.poster video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.poster video{z-index:1;opacity:0;transition:opacity .6s}
.poster video.ready{opacity:1}
.tag-label{position:absolute;z-index:2;left:12px;bottom:12px;display:flex;gap:6px;flex-wrap:wrap}
.tag-label span{background:var(--ink);color:var(--bg);padding:4px 7px;font-size:.62rem}
.bubble{position:absolute;z-index:4;left:calc(50% + min(17vw,220px) - 20px);top:20vh;max-width:250px;text-align:left;background:var(--ink);color:var(--bg);padding:14px 16px 12px;border-radius:18px 18px 18px 4px;box-shadow:8px 8px 0 var(--violet);transform-origin:0 100%;animation:bob 4s ease-in-out infinite;transition:transform .2s}
.bubble:hover{animation-play-state:paused}
.bubble-txt{display:block;font-family:var(--display);font-size:1.02rem;line-height:1.15;text-transform:none}
.bubble-hint{display:block;margin-top:8px;color:#55555d;font-size:.58rem}
.bubble.pop{animation:pop .45s var(--ease)}
@keyframes bob{50%{transform:translateY(-8px) rotate(-1.5deg)}}
@keyframes pop{0%{transform:scale(.6) rotate(-8deg)}100%{transform:none}}
.hero-copy{position:absolute;z-index:3;left:var(--pad);bottom:12vh;max-width:min(560px,40vw)}
.kicker{display:flex;align-items:center;gap:12px;margin-bottom:18px;color:#d8d8de}
.kicker i{display:block;width:34px;height:1px;background:var(--acc)}
.hero h1{mix-blend-mode:difference;font-family:var(--display);font-size:clamp(2.6rem,5.6vw,5.8rem);line-height:.88;letter-spacing:-.035em;text-transform:uppercase}
.split-lines span{display:block;overflow:hidden}
.split-lines em{display:block;font-style:normal;transform:translateY(105%);transition:transform 1.1s var(--ease)}
.split-lines span:nth-child(2) em{transition-delay:.12s}
.loaded .split-lines em,html:not(.js) .split-lines em{transform:none}
.o{color:transparent;-webkit-text-stroke:1.5px var(--ink)}
.hero-meta{position:absolute;z-index:3;right:var(--pad);bottom:12vh;display:flex;flex-direction:column;gap:6px;text-align:right;color:#cfcfd4}
.hero-meta span{border:1px solid var(--line);padding:5px 9px;background:rgba(11,11,13,.5)}
.scrollhint{position:absolute;z-index:3;left:50%;bottom:26px;transform:translateX(-50%);display:flex;align-items:center;gap:12px;color:#bdbdc4}
.scrollhint i{position:relative;width:1px;height:34px;background:var(--line);overflow:hidden}
.scrollhint i::after{content:"";position:absolute;left:0;top:-34px;width:1px;height:34px;background:var(--ink);animation:drop 1.8s infinite}
@keyframes drop{to{top:34px}}

/* Cinta */
.ticker{position:relative;z-index:5;background:var(--ink);color:var(--bg);overflow:hidden;white-space:nowrap;transform:rotate(-1.5deg) scale(1.03);margin:-1.5vw 0;border-block:3px solid var(--bg)}
.ticker-track{display:inline-flex;align-items:center;gap:28px;padding:14px 0;font-family:var(--display);font-size:clamp(1.1rem,2.2vw,1.8rem);text-transform:uppercase;letter-spacing:-.01em;animation:run 30s linear infinite}
.ticker-track b{color:var(--violet)}
@keyframes run{to{transform:translateX(-50%)}}

/* ---------- Capítulos ---------- */
.chapter{position:relative;padding:150px var(--pad)}
.wrap{max-width:1280px;margin:0 auto;position:relative}
.chap{display:grid;grid-template-columns:auto 1fr;gap:26px;align-items:end;margin-bottom:64px}
.chap .n{font-family:var(--display);font-size:clamp(5rem,13vw,11rem);line-height:.74;color:transparent;-webkit-text-stroke:1.5px rgba(242,242,242,.3)}
.chap h2{font-family:var(--display);font-size:clamp(2.6rem,6.4vw,6rem);line-height:.88;text-transform:uppercase;letter-spacing:-.03em}
.chap .mono{display:block;margin-bottom:12px}
p.big{font-size:clamp(1.12rem,1.7vw,1.4rem);line-height:1.5;color:#e0e0e6;max-width:600px}

/* 01 */
.manifest{font-family:var(--display);font-size:clamp(1.7rem,3.8vw,3.6rem);line-height:1.08;letter-spacing:-.02em;max-width:1150px;margin-bottom:110px}
.manifest .w{color:rgba(242,242,242,.14);transition:color .3s}
.manifest .w.lit{color:var(--ink)}
.manifest .w.hl.lit{color:var(--violet)}
.dog-grid{display:grid;grid-template-columns:1fr 1fr;gap:clamp(30px,5vw,80px);align-items:center}
.portrait{position:relative}
.portrait img{width:100%;aspect-ratio:4/5;object-fit:cover}
.portrait .cap{position:absolute;left:0;bottom:0;background:var(--bg);padding:12px 16px 0 0;color:var(--mute)}
.portrait::after{content:"";position:absolute;inset:0;box-shadow:inset 0 0 0 1px var(--line);pointer-events:none}
.care{background:#f1efe9;color:#141414;padding:34px 30px 30px;position:relative;transform:rotate(1.5deg);box-shadow:14px 14px 0 var(--violet)}
.care::before{content:"";position:absolute;top:-14px;left:50%;width:70px;height:28px;margin-left:-35px;background:rgba(255,255,255,.35);border:1px solid rgba(0,0,0,.08);transform:rotate(-3deg)}
.care-head{display:flex;flex-wrap:wrap;gap:4px 16px;justify-content:space-between;align-items:baseline;border-bottom:2px solid #141414;padding-bottom:12px;margin-bottom:6px}
.care-head b{font-family:var(--display);font-size:2rem;letter-spacing:-.02em}
.care dl div{display:grid;grid-template-columns:130px 1fr;gap:12px;padding:11px 0;border-bottom:1px dashed rgba(0,0,0,.25)}
.care dt{font-family:var(--mono);font-size:.68rem;letter-spacing:.14em;text-transform:uppercase;color:#6b6b6b;padding-top:3px}
.care dd{font-weight:600}
.care small{font-weight:400;color:#6b6b6b}
.care-icons{list-style:none;display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:20px;font-size:.62rem}
.care-icons li{display:flex;align-items:center;gap:10px}
.care-icons span{display:grid;place-items:center;width:30px;height:30px;border:1.5px solid #141414;border-radius:50%;font-size:.7rem;flex:none}
.stats{display:grid;grid-template-columns:repeat(4,1fr);margin-top:120px;border-top:1px solid var(--line);border-left:1px solid var(--line)}
.stat{padding:30px 24px;border-right:1px solid var(--line);border-bottom:1px solid var(--line);transition:background .3s}
.stat:hover{background:rgba(139,92,255,.08)}
.stat b{display:block;font-family:var(--display);font-size:clamp(3.4rem,7vw,6rem);line-height:1;letter-spacing:-.04em}
.stat span{display:block;margin-top:12px;color:var(--mute)}

/* Cita */
.quote{position:relative;padding:120px 0;overflow:hidden;background:#141416 url('../img/hormigon.webp') center/cover;isolation:isolate}
.quote::before{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(180deg,rgba(11,11,13,.78),rgba(11,11,13,.9))}
.quote-row{white-space:nowrap;font-family:var(--display);font-size:clamp(3rem,9vw,8.5rem);line-height:1;text-transform:uppercase;letter-spacing:-.04em}
.quote-row span{display:inline-block;will-change:transform}
.r1{color:transparent;-webkit-text-stroke:1.5px rgba(242,242,242,.4)}
.r2{color:transparent;-webkit-text-stroke:1.5px rgba(139,92,255,.6)}
.quote blockquote{font-family:var(--display);font-size:clamp(2.6rem,7vw,7rem);line-height:.95;text-transform:uppercase;letter-spacing:-.04em;text-align:center;margin:26px var(--pad)}
.quote blockquote em{font-style:normal;color:var(--violet)}

/* 02 Historia */
.story-grid{display:grid;grid-template-columns:1fr 1fr;gap:clamp(30px,6vw,100px)}
.story-media{position:relative}
.story-frame{position:sticky;top:12vh;height:76vh;overflow:hidden;box-shadow:0 0 0 1px var(--line)}
.story-frame img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;transform:scale(1.08);transition:opacity .9s var(--ease),transform 1.6s var(--ease)}
.story-frame img.on{opacity:1;transform:none}
.story-count{position:absolute;right:14px;bottom:14px;background:var(--bg);padding:6px 10px}
.story-count b{font-weight:400;color:var(--acc)}
.step{min-height:76vh;display:flex;flex-direction:column;justify-content:center;opacity:.22;transition:opacity .6s}
.step.on{opacity:1}
.step h3{font-family:var(--display);font-size:clamp(2rem,4vw,3.6rem);line-height:.92;text-transform:uppercase;letter-spacing:-.03em;margin:14px 0 18px}
.step p{font-size:1.12rem;color:#d6d6dc;max-width:460px}

/* 03 Horizontal */
.hscroll{position:relative;height:420vh;background:#0e0e11}
.hs-sticky{position:sticky;top:0;height:100vh;height:100svh;overflow:hidden;display:flex;align-items:center}
.hs-track{display:flex;gap:4vw;padding:0 var(--pad);will-change:transform}
.hs-panel{flex:none;height:78vh}
.hs-intro{width:min(520px,80vw);display:flex;flex-direction:column;justify-content:center;gap:22px}
.hs-intro .chap{margin-bottom:0;grid-template-columns:1fr}
.hs-intro p{font-size:1.15rem;max-width:380px}
.swipe{color:var(--acc)}
.serie{position:relative;width:min(1100px,88vw);display:grid;grid-template-columns:1fr 1fr;background:#151518;box-shadow:0 0 0 1px var(--line);overflow:hidden}
.serie-media{position:relative;overflow:hidden}
.serie-media img{width:100%;height:100%;object-fit:cover;transform:scale(1.15);will-change:transform}
.serie-media::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,transparent 60%,#151518)}
.serie-copy{position:relative;z-index:1;display:flex;flex-direction:column;justify-content:flex-end;padding:44px 40px}
.drop{align-self:flex-start;background:var(--c);color:#0b0b0d;padding:6px 10px;font-weight:700}
.serie h3{font-family:var(--display);font-size:clamp(2.2rem,4vw,3.8rem);line-height:.9;text-transform:uppercase;letter-spacing:-.03em;margin:20px 0 16px}
.serie p{color:#d8d8de;max-width:420px}
.sched{display:flex;gap:28px;margin:28px 0;border-top:1px solid var(--line);padding-top:16px}
.sched span{color:var(--mute);display:block}
.sched b{display:block;font-family:var(--display);font-size:1.8rem;color:var(--c);font-weight:400}
.serie .btn{--c:var(--ink)}
.serie .btn.fill{--c:var(--c-btn,var(--ink))}
.big-n{position:absolute;right:20px;top:4px;font-family:var(--display);font-size:clamp(7rem,14vw,13rem);line-height:1;color:transparent;-webkit-text-stroke:1.5px var(--c);opacity:.5;pointer-events:none}
.hs-outro{width:min(760px,86vw);display:flex;flex-direction:column;justify-content:center;gap:24px}
.outro-big{font-family:var(--display);font-size:clamp(3rem,8vw,7.5rem);line-height:.88;text-transform:uppercase;letter-spacing:-.04em}
.outro-big span{color:transparent;-webkit-text-stroke:1.5px var(--ink)}

/* 04 App */
.app{overflow:hidden}
.app::before{content:"";position:absolute;width:60vw;height:60vw;right:-20vw;top:10%;border-radius:50%;background:var(--app);filter:blur(140px);opacity:.14;pointer-events:none}
.app-grid{display:grid;grid-template-columns:.9fr 1.1fr;gap:clamp(30px,5vw,80px);align-items:center}
.chips{display:flex;flex-wrap:wrap;gap:8px;margin:28px 0 36px}
.chips span{font-family:var(--mono);font-size:.68rem;letter-spacing:.14em;text-transform:uppercase;border:1px solid var(--line);padding:8px 12px;transition:.25s}
.chips span:hover{border-color:var(--app);color:var(--app)}
.device{position:relative;background:#18181b;border-radius:14px;padding:0 0 0;box-shadow:0 0 0 1px var(--line),0 50px 120px rgba(0,0,0,.6);transform-style:preserve-3d;transform:perspective(1200px) rotateY(-10deg) rotateX(4deg);transition:transform .5s var(--ease)}
.device-bar{display:flex;align-items:center;gap:7px;padding:12px 14px;border-bottom:1px solid var(--line)}
.device-bar i{width:10px;height:10px;border-radius:50%;background:#3a3a40}
.device-bar i:first-child{background:#ff5f57}.device-bar i:nth-child(2){background:#febc2e}.device-bar i:nth-child(3){background:#28c840}
.device-bar span{margin-left:12px;color:var(--mute);font-size:.62rem}
.device img{border-radius:0 0 14px 14px;width:100%}
.device-glow{position:absolute;inset:auto 10% -40px;height:80px;background:var(--app);filter:blur(60px);opacity:.35;z-index:-1}

/* 05 Galería */
.gallery{display:grid;grid-template-columns:1.1fr .9fr 1fr;gap:24px;align-items:start}
.g-item{position:relative;overflow:hidden}
.g-item.off{margin-top:120px}
.g-item img{width:100%;aspect-ratio:3/4;object-fit:cover;transition:transform 1.2s var(--ease)}
.g-item:hover img{transform:scale(1.05)}
.js .clip img{clip-path:inset(100% 0 0 0);transition:clip-path 1.3s var(--ease),transform 1.2s var(--ease)}
.js .clip.in img{clip-path:inset(0 0 0 0)}
.js .clip figcaption{opacity:0;transition:opacity .6s .7s}
.js .clip.in figcaption{opacity:1}
.g-item figcaption{position:absolute;left:0;right:0;bottom:0;padding:60px 20px 20px;background:linear-gradient(0deg,rgba(11,11,13,.92),transparent);display:flex;flex-direction:column;gap:4px}
.g-item figcaption b{font-family:var(--display);font-size:1.6rem;text-transform:uppercase;line-height:1}
.g-item figcaption em{font-style:normal;color:#cfcfd4;font-size:.95rem;max-height:0;overflow:hidden;transition:max-height .5s var(--ease)}
.g-item:hover figcaption em,.g-item:focus-within figcaption em{max-height:80px}
.g-item.test{border:1.5px dashed var(--test);padding:34px;display:flex;flex-direction:column;gap:14px;margin-top:60px;background:rgba(176,124,255,.05)}
.g-item.test h3{font-family:var(--display);font-size:clamp(2rem,3.4vw,3rem);line-height:.92;text-transform:uppercase;letter-spacing:-.02em}
.g-item.test p{color:#d0d0d6}
.levels{display:flex;flex-direction:column;gap:6px;margin-top:6px}
.levels span{border:1px solid rgba(176,124,255,.5);color:var(--test);padding:7px 10px;font-size:.62rem}
.glitch{position:relative;color:var(--test);align-self:flex-start}
.glitch::before,.glitch::after{content:attr(data-text);position:absolute;left:0;top:0}
.glitch::before{color:var(--blue);animation:gl1 2.6s infinite steps(2)}
.glitch::after{color:var(--acc);animation:gl2 2.2s infinite steps(2)}
@keyframes gl1{0%,92%{transform:none;opacity:0}93%{transform:translate(-2px,1px);opacity:1}96%{transform:translate(2px,-1px);opacity:1}100%{opacity:0}}
@keyframes gl2{0%,90%{transform:none;opacity:0}91%{transform:translate(2px,0);opacity:1}95%{transform:translate(-2px,1px);opacity:1}100%{opacity:0}}

/* Pie */
footer{position:relative;padding:150px var(--pad) 40px;overflow:hidden;background:#141416 url('../img/hormigon.webp') center/cover;isolation:isolate}
footer::before{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(180deg,var(--bg),rgba(11,11,13,.82) 40%,rgba(11,11,13,.94))}
.foot-word{position:absolute;z-index:-1;left:50%;bottom:-4vw;transform:translateX(-50%);font-family:var(--display);font-size:32vw;line-height:.8;letter-spacing:-.05em;color:transparent;-webkit-text-stroke:1px rgba(139,92,255,.25);white-space:nowrap;pointer-events:none}
footer h2{font-family:var(--display);font-size:clamp(3.6rem,14vw,13rem);line-height:.8;letter-spacing:-.05em;text-transform:uppercase}
.foot-links{margin:50px 0 140px}
.foot-links .btn.fill{color:#fff}
.foot-links .btn.fill:hover{color:#0b0b0d}
.fine{display:flex;justify-content:space-between;flex-wrap:wrap;gap:12px;border-top:1px solid var(--line);padding-top:18px;color:var(--mute)}
.hint{opacity:.45}

/* Modo nini */
.nini{position:fixed;inset:0;z-index:110;display:grid;place-items:center;background:rgba(11,11,13,.9);backdrop-filter:blur(8px)}
.nini[hidden]{display:none}
.nini-in{text-align:center;max-width:620px;padding:30px;animation:pop .5s var(--ease)}
.nini-in h2{font-family:var(--display);font-size:clamp(3rem,10vw,7rem);line-height:.85;text-transform:uppercase;letter-spacing:-.04em;margin:16px 0;color:var(--fix)}
.nini-in p{color:#d8d8de;margin-bottom:28px;font-size:1.1rem}
body.nini-on main{filter:saturate(1.6) hue-rotate(-20deg)}
body.nini-on main section{transform:rotate(-.6deg)}
body.nini-on main section:nth-of-type(even){transform:rotate(.6deg)}

/* Blvnky se asoma */
.peek{position:fixed;z-index:95;right:6vw;bottom:0;width:min(300px,62vw);transform:translateY(105%);transition:transform .9s var(--ease)}
.peek[hidden]{display:block;visibility:hidden}
.peek.show{transform:translateY(8%);visibility:visible}
.peek img{width:100%;filter:drop-shadow(0 -10px 30px rgba(0,0,0,.5))}
.peek-say{position:absolute;left:-10px;top:-46px;background:var(--ink);color:var(--bg);font-family:var(--display);font-size:.95rem;padding:9px 12px;border-radius:14px 14px 14px 4px;box-shadow:5px 5px 0 var(--violet);white-space:nowrap;opacity:0;transition:opacity .3s .7s}
.peek.show .peek-say{opacity:1}

/* Huesos */
.bone{position:fixed;z-index:105;top:-40px;font-size:28px;pointer-events:none;animation:fall linear forwards}
@keyframes fall{to{transform:translateY(110vh) rotate(720deg)}}

/* ---------- Responsive ---------- */
@media (max-width:1100px){.chapters{display:none}}
@media (max-width:900px){
  .hero{height:170vh}
  .poster{width:min(58vw,340px);max-height:62vh}
  .hero-copy{left:var(--pad);right:var(--pad);max-width:none;bottom:9vh}
  .hero-meta{display:none}
  .bubble{left:auto;right:var(--pad);top:13vh;max-width:200px}
  .bubble-txt{font-size:.9rem}
  .dog-grid,.story-grid,.app-grid{grid-template-columns:1fr}
  .care{transform:none;box-shadow:10px 10px 0 var(--violet)}
  .stats{grid-template-columns:1fr 1fr}
  .story-media{display:none}
  .step{min-height:auto;opacity:1;padding:26px 0;border-top:1px solid var(--line)}
  .step::before{content:"";display:block;aspect-ratio:4/3;margin-bottom:18px;background:var(--img) center/cover}
  .hscroll{height:auto}
  .hs-sticky{position:relative;height:auto;overflow-x:auto;scroll-snap-type:x mandatory;padding:90px 0;scrollbar-width:none}
  .hs-sticky::-webkit-scrollbar{display:none}
  .hs-track{transform:none!important}
  .hs-panel{height:auto;scroll-snap-align:center}
  .serie{grid-template-columns:1fr;width:84vw}
  .serie-media{height:46vh}
  .serie-media::after{background:linear-gradient(0deg,#151518,transparent 50%)}
  .serie-copy{padding:26px 22px}
  .device{transform:none}
  .gallery{grid-template-columns:1fr 1fr}
  .g-item.off{margin-top:60px}
  .g-item.test{grid-column:1/-1;margin-top:0}
}
@media (max-width:560px){
  .chapter{padding:100px var(--pad)}
  .chap{grid-template-columns:1fr;gap:6px;margin-bottom:40px}
  .sound .mono{display:none}
  .manifest{margin-bottom:70px}
  .care dl div{grid-template-columns:1fr;gap:2px}
  .gallery{grid-template-columns:1fr}
  .g-item.off{margin-top:0}
  .g-item figcaption em{max-height:none}
  .ticker{transform:rotate(-2deg) scale(1.05)}
}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none!important;transition:none!important}
  .js .reveal,.js .clip img,.js .clip figcaption{opacity:1;transform:none;clip-path:none}
  .split-lines em{transform:none}
  .hero{height:auto}.hero-sticky{position:relative}
  .hscroll{height:auto}.hs-sticky{position:relative;height:auto;overflow-x:auto}.hs-track{transform:none!important}
  .manifest .w{color:var(--ink)}
}