@font-face{font-family:"Archivo Black";src:url(fonts/archivo-black.ttf) format("truetype");font-display:swap}
@font-face{font-family:"Space Grotesk";src:url(fonts/space-400.ttf) format("truetype");font-weight:400;font-display:swap}
@font-face{font-family:"Space Grotesk";src:url(fonts/space-500.ttf) format("truetype");font-weight:500;font-display:swap}
@font-face{font-family:"Space Grotesk";src:url(fonts/space-600.ttf) format("truetype");font-weight:600;font-display:swap}
@font-face{font-family:"Space Grotesk";src:url(fonts/space-700.ttf) format("truetype");font-weight:700;font-display:swap}

:root{
 --pink:#F545B5;--lime:#C7FF3D;--lilac:#A588F4;--ink:#21162F;--paper:#FFF8F0;
 --bg:var(--paper);--fg:var(--ink);--accent:var(--pink);--line:var(--ink);
 --display:"Archivo Black",Impact,system-ui,sans-serif;--text:"Space Grotesk",system-ui,sans-serif;
 --gutter:clamp(16px,4vw,56px);--shadow:6px 6px 0 var(--line);
}
body[data-theme=lime]{--bg:var(--lime);--fg:var(--ink);--accent:var(--pink);--line:var(--ink)}
body[data-theme=ink]{--bg:var(--ink);--fg:var(--paper);--accent:var(--lime);--line:var(--paper)}
body[data-theme=pink]{--bg:var(--pink);--fg:var(--ink);--accent:var(--lime);--line:var(--ink)}
body[data-theme=lilac]{--bg:var(--lilac);--fg:var(--ink);--accent:var(--lime);--line:var(--ink)}

*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%;overflow-x:clip}
body{margin:0;background:var(--bg);color:var(--fg);font:500 clamp(16px,1.15vw,19px)/1.45 var(--text);overflow-x:clip;transition:background-color .7s cubic-bezier(.6,0,.2,1),color .5s}
h1,h2,h3{font-family:var(--display);font-weight:400;margin:0;letter-spacing:-.035em;line-height:.88;text-transform:lowercase}
p{margin:0}
a{color:inherit}
button{font:inherit;color:inherit;cursor:pointer}
::selection{background:var(--lime);color:var(--ink)}
:focus-visible{outline:3px solid var(--accent);outline-offset:4px}
.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.skip{position:fixed;left:16px;top:-60px;z-index:50;background:var(--ink);color:var(--paper);padding:10px 16px;border-radius:999px}
.skip:focus{top:16px}
.eyebrow{font-size:.78rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase}

/* Capas: fondo de página < texto trasero < chispa < contenido */
#scene{position:fixed;inset:0;z-index:1;pointer-events:none}
#spark{width:100%;height:100%;display:block;opacity:0;transition:opacity .8s}
#scene.is-ready #spark{opacity:1}
.spark-fallback{display:none;position:absolute;width:min(70vw,520px);height:auto;right:6vw;top:50%;transform:translateY(-50%) rotate(-8deg)}
#scene.is-fallback .spark-fallback{display:block}
main{position:relative}
main section>*,.ticker{position:relative;z-index:2}
main section>.hero-back-layer{z-index:0}

/* Píldoras con sombra dura */
.pill{display:inline-flex;align-items:center;gap:.5em;padding:.62em 1.1em;border:2.5px solid var(--line);border-radius:999px;background:var(--bg);color:var(--fg);font-weight:700;text-decoration:none;box-shadow:4px 4px 0 var(--line);transition:transform .15s,box-shadow .15s,background-color .3s}
.pill:hover{transform:translate(-2px,-2px);box-shadow:6px 6px 0 var(--line)}
.pill:active{transform:translate(3px,3px);box-shadow:1px 1px 0 var(--line)}
.pill-ink{background:var(--ink);color:var(--paper);border-color:var(--ink);box-shadow:4px 4px 0 var(--pink)}
.pill-ink:hover{box-shadow:6px 6px 0 var(--pink)}
.pill-lime{background:var(--lime);color:var(--ink);border-color:var(--ink);box-shadow:4px 4px 0 var(--pink)}
.pill-lime:hover{box-shadow:6px 6px 0 var(--pink)}
.pill[disabled]{cursor:not-allowed;opacity:.75;transform:none}

.sticker{display:inline-block;font:400 clamp(.9rem,1.5vw,1.3rem)/1 var(--display);text-transform:lowercase;padding:.55em .9em .6em;border:2.5px solid var(--ink);border-radius:14px;color:var(--ink);box-shadow:4px 4px 0 var(--ink);white-space:nowrap}
.sticker-lime{background:var(--lime)}
.sticker-lilac{background:var(--lilac)}
.sticker-ink{background:var(--ink);color:var(--lime);border-color:var(--ink);box-shadow:4px 4px 0 var(--pink)}

/* Cabecera */
.header{position:fixed;top:0;left:0;right:0;z-index:20;display:flex;align-items:center;justify-content:space-between;padding:16px var(--gutter);pointer-events:none}
.header>*{pointer-events:auto}
.logo{display:inline-flex;align-items:center;gap:8px;font:400 1.6rem/1 var(--display);letter-spacing:-.04em;text-decoration:none;color:var(--fg);transition:color .5s}
.logo img{animation:spin 14s linear infinite}
.header nav{display:flex;gap:6px;align-items:center;background:var(--bg);border:2.5px solid var(--line);border-radius:999px;padding:5px;box-shadow:4px 4px 0 var(--line);transition:background-color .7s}
.header nav a{padding:.45em .95em;border-radius:999px;font-weight:700;text-decoration:none;font-size:.92rem}
.header nav a:hover{background:var(--lime);color:var(--ink)}
.header nav .pill{box-shadow:none;border:0;background:var(--accent);color:var(--ink)}
#menu-toggle{display:none}
#mobile-menu{position:fixed;inset:0;z-index:19;background:var(--pink);display:flex;flex-direction:column;justify-content:center;gap:8px;padding:var(--gutter)}
#mobile-menu[hidden]{display:none}
#mobile-menu a{font:400 clamp(3rem,15vw,6rem)/.95 var(--display);color:var(--ink);text-decoration:none;text-transform:lowercase;letter-spacing:-.04em}

/* Hero */
.hero{min-height:100svh;padding:clamp(96px,14vh,140px) var(--gutter) 40px;display:grid;grid-template-rows:auto 1fr auto;position:relative;overflow:hidden}
.hero-top{display:flex;justify-content:space-between;gap:16px}
.hero h1{align-self:center;display:grid;font-size:clamp(4.2rem,15.5vw,17rem);margin:4vh 0;pointer-events:none}
.hero-back{position:relative;z-index:0;color:transparent;-webkit-text-stroke:clamp(2px,.35vw,5px) var(--ink)}
.hero-front{position:relative;z-index:3;justify-self:end;color:var(--ink);text-shadow:0 0 0 var(--ink)}
.hero-front .dot{color:var(--pink)}
.hero .hero-top,.hero .hero-bottom{z-index:3}
main .hero>h1{z-index:auto}
.hero .sticker{position:absolute;z-index:4}
.sticker-lime{transform:rotate(-7deg)}
.hero .sticker-lime{left:calc(var(--gutter) + 2vw);top:56%}
.hero .sticker-lilac{right:calc(var(--gutter) + 6vw);top:24%;transform:rotate(5deg)}
.spark-hit{position:absolute;z-index:2;left:30%;top:22%;width:40%;height:56%;border:0;background:none;border-radius:50%;cursor:pointer}
.hero-bottom{display:grid;grid-template-columns:minmax(0,1.3fr) minmax(0,1fr) auto;align-items:end;gap:24px}
.hero-bottom p{font-size:clamp(1.15rem,1.8vw,1.6rem);line-height:1.2;max-width:22ch}
.hero-bottom strong{background:var(--lime);padding:0 .15em;box-decoration-break:clone;-webkit-box-decoration-break:clone}

/* Ticker */
.ticker{background:var(--ink);color:var(--lime);border-block:3px solid var(--ink);overflow:hidden;transform:rotate(-2deg);margin:-10px -2vw 0;padding:14px 0}
.ticker-track{display:flex;align-items:center;gap:28px;width:max-content;animation:ticker 26s linear infinite}
.ticker span{font:400 clamp(1.4rem,3vw,2.6rem)/1 var(--display);text-transform:lowercase;letter-spacing:-.03em;white-space:nowrap}
.ticker i{width:1.6em;height:1.6em;flex:none;background:url(favicon.svg) center/contain no-repeat}
@keyframes ticker{to{transform:translateX(-50%)}}
@keyframes spin{to{transform:rotate(360deg)}}

/* Secciones */
.section{min-height:100svh;padding:clamp(110px,16vh,180px) var(--gutter) clamp(80px,12vh,140px)}
.section-meta{display:flex;justify-content:space-between;gap:16px;font-size:.78rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase;padding-bottom:14px;border-bottom:2.5px solid var(--line);margin-bottom:clamp(40px,7vh,80px)}
.section h2{font-size:clamp(3.2rem,9.5vw,9.5rem)}
.big{font-size:clamp(1.25rem,2vw,1.8rem);line-height:1.2;font-weight:600}
.reveal{opacity:0;transform:translateY(40px);transition:opacity .8s cubic-bezier(.2,.7,.2,1),transform .8s cubic-bezier(.2,.7,.2,1)}
.reveal.is-in{opacity:1;transform:none}
.hl-pink{color:var(--pink)}
.hl-lime{color:var(--lime);-webkit-text-stroke:clamp(1.5px,.25vw,3px) var(--ink);paint-order:stroke fill}
.hl-ink{background:var(--ink);color:var(--lime);padding:0 .12em;display:inline-block;transform:rotate(-2deg)}
.outline{color:transparent;-webkit-text-stroke:clamp(1.5px,.28vw,4px) var(--fg)}

/* Manifiesto */
.manifesto{display:grid;grid-template-columns:minmax(0,1.25fr) minmax(0,.75fr);grid-template-rows:auto 1fr;column-gap:5vw}
.manifesto .section-meta{grid-column:1/-1}
.manifesto h2{max-width:9ch}
.strike{position:relative;color:var(--ink);display:inline-block}
.strike::after{content:"";position:absolute;left:-3%;right:-3%;top:52%;height:.16em;background:var(--pink);transform:rotate(-4deg);border-radius:4px}
.manifesto-aside{align-self:end;display:grid;gap:22px;justify-items:start;max-width:30rem;margin-top:min(40vh,320px)}
.manifesto-aside .sticker{transform:rotate(-3deg)}
.sign{font:400 1.5rem/1 var(--display);text-transform:lowercase;background:var(--ink);color:var(--lime);padding:.3em .5em;transform:rotate(2deg)}

/* Contenido: monitor de montaje */
.content-heading{display:flex;justify-content:space-between;align-items:end;gap:24px;flex-wrap:wrap;margin-bottom:56px}
.content-heading p{max-width:26ch;font-size:1.2rem}
.content-heading strong{color:var(--lime)}
.monitor{max-width:880px;border:3px solid var(--paper);border-radius:22px;background:#2C1F3E;box-shadow:10px 10px 0 var(--pink);overflow:hidden}
.monitor-bar{display:flex;gap:14px;align-items:center;padding:14px 20px;border-bottom:3px solid var(--paper);font-size:.78rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase}
.monitor-bar #frame-label{margin-left:auto;color:var(--lime)}
.rec{width:12px;height:12px;border-radius:50%;background:var(--pink);animation:blink 1.2s steps(2) infinite}
@keyframes blink{50%{opacity:.2}}
.monitor-screen{position:relative;min-height:clamp(300px,44vh,420px);padding:clamp(24px,4vw,48px);display:grid;align-content:space-between;gap:24px;background:var(--ink);background-image:radial-gradient(circle at 80% 20%,rgba(245,69,181,.35),transparent 45%)}
.monitor-screen[data-phase="1"]{background-image:radial-gradient(circle at 20% 80%,rgba(199,255,61,.28),transparent 45%)}
.monitor-screen[data-phase="2"]{background-image:radial-gradient(circle at 70% 70%,rgba(165,136,244,.45),transparent 50%)}
.monitor-screen[data-phase="3"]{background-image:repeating-linear-gradient(90deg,rgba(255,248,240,.06) 0 2px,transparent 2px 48px),radial-gradient(circle at 50% 30%,rgba(245,69,181,.3),transparent 50%)}
.monitor-screen.is-cut h3{animation:cut .45s steps(3)}
@keyframes cut{0%{transform:translateX(-14px);opacity:.2}50%{transform:translateX(10px)}100%{transform:none;opacity:1}}
.film-serial{font-weight:700;letter-spacing:.1em;color:var(--lilac)}
.monitor-screen h3{font-size:clamp(2.4rem,6vw,5.2rem);color:var(--paper)}
.monitor-screen em{font-style:normal;color:var(--pink)}
.monitor-screen p{max-width:32ch;font-size:1.1rem}
.monitor-screen .pill{justify-self:start}
.timeline{display:grid;grid-template-columns:repeat(4,1fr);border-top:3px solid var(--paper)}
.timeline button{background:none;border:0;border-right:3px solid var(--paper);padding:16px 12px;text-align:left;font-weight:700;display:flex;gap:10px;align-items:baseline}
.timeline button:last-child{border-right:0}
.timeline button span{font-size:.75rem;color:var(--lilac)}
.timeline button[aria-pressed=true]{background:var(--lime);color:var(--ink)}
.timeline button[aria-pressed=true] span{color:var(--ink)}
.content-foot{display:flex;justify-content:space-between;gap:32px;flex-wrap:wrap;margin-top:64px;align-items:start}
.content-foot p{max-width:34ch;font-size:1.2rem}
.content-foot ul{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:10px;max-width:520px}
.content-foot li{border:2.5px solid var(--paper);border-radius:999px;padding:.45em 1em;font-weight:700}
.content-foot li:nth-child(odd){background:var(--lilac);color:var(--ink);border-color:var(--lilac)}

/* Estrategia */
.strategy-heading{display:grid;justify-items:end;text-align:right;gap:24px;margin-bottom:64px}
.strategy-heading p{font-size:1.2rem;max-width:28ch}
.strategy-rows{max-width:960px;margin-left:auto;border-top:3px solid var(--ink)}
.strategy-rows details{border-bottom:3px solid var(--ink);transition:background-color .3s}
.strategy-rows details[open]{background:var(--lime)}
.strategy-rows summary{list-style:none;cursor:pointer;display:flex;align-items:center;gap:20px;padding:22px 16px;font:400 clamp(1.4rem,3vw,2.6rem)/1 var(--display);text-transform:lowercase;letter-spacing:-.03em}
.strategy-rows summary::-webkit-details-marker{display:none}
.row-number{font:700 .85rem/1 var(--text);letter-spacing:.08em;border:2.5px solid var(--ink);border-radius:999px;padding:.4em .7em;flex:none}
.detail-sign{margin-left:auto;width:42px;height:42px;flex:none;border:2.5px solid var(--ink);border-radius:50%;background:var(--paper);position:relative;transition:transform .3s}
.detail-sign::before,.detail-sign::after{content:"";position:absolute;left:50%;top:50%;width:16px;height:3px;background:var(--ink);transform:translate(-50%,-50%)}
.detail-sign::after{transform:translate(-50%,-50%) rotate(90deg)}
details[open] .detail-sign{transform:rotate(45deg);background:var(--pink)}
.strategy-rows details p{padding:0 16px 26px calc(16px + 4.2rem);max-width:60ch;font-size:1.1rem}
.strategy-end{margin-top:72px;font:400 clamp(2rem,5vw,4.4rem)/.95 var(--display);text-transform:lowercase;letter-spacing:-.035em;max-width:14ch;margin-left:auto;text-align:right}
.strategy-end span{color:var(--pink)}

/* Digital */
.digital-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(32px,5vw,80px);align-items:center}
.digital-copy{display:grid;gap:24px;max-width:36rem}
.browser{position:relative;border:3px solid var(--ink);border-radius:18px;background:var(--paper);color:var(--ink);box-shadow:10px 10px 0 var(--ink);max-width:560px}
.browser-bar{display:flex;align-items:center;gap:14px;padding:12px 16px;border-bottom:3px solid var(--ink);font-size:.8rem;font-weight:700}
.dots{display:flex;gap:6px}
.dots i{width:12px;height:12px;border-radius:50%;border:2px solid var(--ink);background:var(--pink)}
.dots i:nth-child(2){background:var(--lime)}
.dots i:nth-child(3){background:var(--lilac)}
.browser-demo{min-height:340px;padding:32px;display:grid;align-content:space-between;gap:18px;border-radius:0 0 15px 15px;transition:background-color .4s}
.browser-demo[data-view="1"]{background:var(--lime)}
.browser-demo[data-view="2"]{background:var(--lilac)}
.demo-logo{font:400 1.4rem/1 var(--display)}
.demo-eyebrow{font-weight:700;text-transform:uppercase;letter-spacing:.08em;font-size:.78rem}
.demo-title{font:400 clamp(2.2rem,4.4vw,3.8rem)/.9 var(--display);letter-spacing:-.04em;text-transform:lowercase}
.browser-demo .pill{justify-self:start}
.demo-index{font-weight:700;font-size:.8rem;justify-self:end}
.browser-note{position:absolute;right:-18px;bottom:-22px;transform:rotate(6deg)}
.connection{display:grid;grid-template-columns:repeat(3,1fr);margin-top:80px;border:3px solid var(--ink);border-radius:999px;overflow:hidden;background:var(--paper);color:var(--ink)}
.connection span{padding:18px 20px;font-weight:700;text-align:center;position:relative}
.connection span+span{border-left:3px solid var(--ink)}
.connection span:nth-child(2){background:var(--lime)}

/* Método */
.method-heading{display:flex;justify-content:space-between;align-items:end;gap:32px;flex-wrap:wrap;margin-bottom:64px}
.method-heading h2{max-width:12ch}
.method-heading p{max-width:28ch;font-size:1.2rem;margin-left:auto}
.method-steps{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;max-width:1100px;margin-left:auto}
.method-steps article{background:var(--paper);border:3px solid var(--ink);border-radius:22px;padding:28px;box-shadow:var(--shadow);display:grid;gap:16px;align-content:start}
.method-steps article:nth-child(2){transform:translateY(40px) rotate(1.5deg);background:var(--lime)}
.method-steps article:nth-child(2).reveal:not(.is-in){transform:translateY(80px)}
.method-steps article:nth-child(3){transform:translateY(80px) rotate(-1.5deg)}
.method-steps article:nth-child(3).reveal:not(.is-in){transform:translateY(120px)}
.step-number{font:400 3.4rem/1 var(--display);color:var(--pink);-webkit-text-stroke:2px var(--ink)}
.method-steps h3{font-size:2.2rem}

/* Contacto y pie */
.contact{display:grid;grid-template-columns:minmax(0,1fr);grid-template-rows:auto 1fr auto;min-height:100svh}
.contact-copy{display:grid;justify-items:center;text-align:center;gap:22px;align-self:end;padding-top:min(36vh,340px)}
.contact h2{font-size:clamp(2.4rem,12vw,12rem)}
.contact-copy p{font-size:1.3rem;max-width:26ch}
.contact-pending{font-size:.8rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--lilac)}
footer{margin-top:clamp(80px,14vh,160px)}
.footer-logo{display:block;font:400 clamp(5rem,27vw,26rem)/.78 var(--display);letter-spacing:-.06em;text-decoration:none;color:transparent;-webkit-text-stroke:clamp(2px,.3vw,4px) var(--pink);text-align:center;transition:color .3s}
.footer-logo:hover{color:var(--pink)}
.footer-bottom{display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;padding-top:24px;margin-top:24px;border-top:2.5px solid var(--line);font-weight:700;font-size:.9rem}

/* Control de movimiento */
#motion{position:fixed;right:var(--gutter);bottom:18px;z-index:20;font-size:.8rem;padding:.5em .9em}
.motion-symbol{width:10px;height:12px;border-left:3px solid currentColor;border-right:3px solid currentColor}
#motion[aria-pressed=false] .motion-symbol{border:0;width:0;height:0;border-left:10px solid currentColor;border-top:6px solid transparent;border-bottom:6px solid transparent}

@media (max-width:1000px){
 .method-steps{grid-template-columns:1fr;max-width:560px}
 .method-steps article:nth-child(n){transform:none}
 .method-steps article.reveal:not(.is-in){transform:translateY(40px)}
}
@media (max-width:760px){
 .header{padding-top:12px}
 .header nav{display:none}
 #menu-toggle{display:inline-flex}
 .logo{font-size:1.35rem}
 .logo img{width:28px;height:28px}
 .hero{padding-top:92px;padding-bottom:28px}
 .hero-top{flex-direction:column;gap:2px}
 .hero h1{font-size:clamp(2.8rem,15.4vw,7rem);margin:0}
 .hero-front{justify-self:start;margin-top:32vh}
 .hero .sticker-lilac{right:var(--gutter);top:47%}
 .hero .sticker-lime{left:var(--gutter);top:31%}
 .spark-hit{left:10%;top:28%;width:80%;height:36%}
 .hero-bottom{grid-template-columns:1fr;gap:14px}
 .hero-bottom .eyebrow{display:none}
 .section-meta{flex-direction:column;gap:4px}
 .section{padding-top:150px}
 .manifesto{grid-template-columns:1fr}
 .manifesto-aside{margin-top:48px}
 .monitor-bar span:nth-child(2){display:none}
 .timeline{grid-template-columns:repeat(2,1fr)}
 .timeline button:nth-child(2){border-right:0}
 .timeline button:nth-child(-n+2){border-bottom:3px solid var(--paper)}
 .strategy-heading{justify-items:start;text-align:left}
 .strategy-rows summary{gap:12px;padding:18px 8px}
 .strategy-rows details p{padding:0 8px 22px}
 .strategy-end{text-align:left;margin-left:0}
 .detail-sign{width:34px;height:34px}
 .digital-grid{grid-template-columns:1fr}
 .browser{margin-right:10px}
 .browser-note{right:-6px}
 .connection{grid-template-columns:1fr;border-radius:22px}
 .connection span+span{border-left:0;border-top:3px solid var(--ink)}
 .contact-copy{padding-top:28vh}
 #motion .motion-label{display:none}
}
@media (prefers-reduced-motion:reduce){
 html{scroll-behavior:auto}
 *,*::before,*::after{animation:none!important;transition-duration:.01ms!important}
 .reveal{opacity:1;transform:none}
}