@font-face{font-family:Chillax;src:url(fonts/chillax-500.woff2) format("woff2");font-weight:500;font-display:swap}
@font-face{font-family:Chillax;src:url(fonts/chillax-600.woff2) format("woff2");font-weight:600;font-display:swap}
@font-face{font-family:"General Sans";src:url(fonts/general-sans-400.woff2) format("woff2");font-weight:400;font-display:swap}
@font-face{font-family:"General Sans";src:url(fonts/general-sans-500.woff2) format("woff2");font-weight:500;font-display:swap}
@font-face{font-family:"General Sans";src:url(fonts/general-sans-600.woff2) format("woff2");font-weight:600;font-display:swap}

:root{color-scheme:light;
  --ground:#F4F3FA;--surface:#EAE8F5;--surface-2:#DFDCF0;--ink:#15142B;--muted:#4D4B70;
  --indigo:#4245C4;--purple:#7436C6;--accent:#1F5FD1;--on-accent:#FFFFFF;--link:#1F5FD1;--action:#15142B;--on-action:#F4F3FA;
  --stage:#4245C4;--frame:#2A1747;--on-frame:#F3EEFF;--sweep:linear-gradient(90deg,#18B8F5,#2878F4 28%,#7840E8 58%,#C936D6 86%,#F044B8);
  --brand-field:linear-gradient(125deg,#1D5FD6,#5B3BD9 45%,#9A2FC4 80%,#C52FA6);
  --display:Chillax,ui-sans-serif,system-ui,sans-serif;--text:"General Sans",ui-sans-serif,system-ui,sans-serif;
  --m:clamp(16px,2.6vw,40px);--maxw:1920px;--logo-light:block;--logo-dark:none}
@media (prefers-color-scheme:dark){:root{color-scheme:dark;
  --ground:#0E0E1C;--surface:#17172C;--surface-2:#21213C;--ink:#EDECFA;--muted:#B0AED3;
  --indigo:#8387F6;--purple:#B68BF6;--accent:#86ADFF;--on-accent:#06142E;--link:#8DB4FF;--action:#EDECFA;--on-action:#0E0E1C;--stage:#2C2E7A;--frame:#241340;--logo-light:none;--logo-dark:block}}

*{box-sizing:border-box}
html{background:var(--ground);color:var(--ink);font:400 1rem/1.55 var(--text);-webkit-font-smoothing:antialiased;
  touch-action:manipulation;-webkit-tap-highlight-color:transparent;scroll-behavior:smooth}
@media (pointer:fine){html{overscroll-behavior:none}}
body{margin:0}
body>*{max-width:var(--maxw);margin-left:auto;margin-right:auto}
a{color:var(--link);text-underline-offset:3px}
h1,h2,h3{font-family:var(--display);font-weight:500;letter-spacing:-.025em;line-height:1.02;margin:0;text-wrap:balance}
p{margin:0}
ul,ol{margin:0;padding:0;list-style:none}
:focus-visible{outline:3px solid var(--accent);outline-offset:3px}
.skip{position:absolute;left:-999px;top:8px}.skip:focus{left:var(--m);background:var(--ink);color:var(--ground);padding:8px 14px;border-radius:8px;z-index:5}
.visually-hidden{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.muted{color:var(--muted)}
.row{display:flex;gap:18px;align-items:center;flex-wrap:wrap}
.h-section{font-size:2rem}
:root{--giant:clamp(3.5rem,1rem + 6.5vw,8.25rem)}

/* El motivo: fotograma 9:16 y la banda que lo barre */
.reel{display:inline-block;aspect-ratio:9/16;border-radius:22%/12.375%;position:relative;overflow:hidden;flex:none}
.reel::after{content:"";position:absolute;left:0;right:0;top:30%;height:12%;background:var(--sweep)}
.reel.tiny{width:18px;display:inline-grid;place-items:center;color:#fff;font:600 10px var(--display)}.reel.tiny::after{display:none}
.reel.recipe{background:var(--purple)}

.btn{display:inline-flex;align-items:center;font:500 1rem var(--text);background:var(--action);color:var(--on-action);text-decoration:none;border:0;
  border-radius:8px;padding:11px 22px;cursor:pointer;transition:transform .15s ease}
.btn:hover{transform:translateY(-1px)}.btn:active{transform:translateY(1px) scale(.98)}
.btn.small{padding:7px 16px}

/* Barra */
.top{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:18px var(--m)}
.brand{display:flex;align-items:center;text-decoration:none;flex:none}
.logo{height:36px;width:auto}.logo-light{display:var(--logo-light)}.logo-dark{display:var(--logo-dark)}
.beta{align-self:flex-start;margin:-2px 0 0 4px;padding:3px 7px;border-radius:5px;background:linear-gradient(90deg,#2878F4,#7840E8);color:#fff;font:600 .625rem/1.2 var(--text);letter-spacing:.08em;text-transform:uppercase;transform:rotate(-15deg);box-shadow:0 2px 6px rgba(80,40,200,.25)}
@media (max-width:380px){.top{gap:8px}.logo{height:32px}.beta{margin-left:-4px;padding:2px 5px;font-size:.5625rem}.top .btn{white-space:nowrap}}
.links{display:flex;align-items:center;gap:22px}
.links a:not(.btn){color:var(--ink);text-decoration:none}
.links a:not(.btn):hover{text-decoration:underline}

/* Portada: frase partida por la tira de fotogramas, todo ceñido al fotograma */
.hero{display:grid;grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);grid-template-rows:1fr 1fr;column-gap:clamp(24px,2.4vw,40px);row-gap:22px;
  max-width:1320px;margin:0 auto;min-height:calc(100svh - 72px);align-content:center;padding:clamp(12px,2vh,32px) var(--m) clamp(40px,7vh,96px)}
.split{display:contents}
.half{font-size:clamp(2.25rem,.8rem + 2vw + 2vh,4.75rem);line-height:.98;max-width:11ch;grid-row:1;align-self:end}
.half.a{grid-column:1;justify-self:end;text-align:right}
.half.b{grid-column:3;justify-self:start}
.strip{grid-column:2;grid-row:1 / span 2;align-self:center;display:flex;flex-direction:column;align-items:center;gap:16px;width:min(27vw,34vh,420px)}
.hero-meta{grid-column:1;grid-row:2;justify-self:end;align-self:start;text-align:right;font-size:.9375rem;line-height:1.5;color:var(--muted)}
.hero-foot{grid-column:3;grid-row:2;align-self:start;display:flex;flex-direction:column;gap:16px;max-width:380px}
.support{font-size:1.0625rem;line-height:1.5}
/* Entrada: hasta que GSAP arranca (o 2,5 s como red de seguridad) */
.intro [data-intro]{opacity:0}
@keyframes found{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
.frame{width:100%;flex:none}
/* Vecinos en el feed: un trozo del reel anterior y del siguiente, fundido hacia fuera */
.frame.ghost{height:64px;position:relative;overflow:hidden;display:grid;place-items:center;font-size:.8125rem;color:var(--ink)}
.frame.ghost::before{content:"";position:absolute;inset:0;background:var(--g) center/100% auto no-repeat;opacity:.75;filter:saturate(.85)}
.frame.ghost span{position:relative;padding:3px 10px;border-radius:6px;background:color-mix(in srgb,var(--ground) 82%,transparent);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px)}
.frame.prev{border-radius:0 0 22% 22%/0 0 60px 60px}.frame.prev::before{background-position:center bottom;-webkit-mask:linear-gradient(to bottom,transparent,#000 85%);mask:linear-gradient(to bottom,transparent,#000 85%)}
.frame.next{border-radius:22% 22% 0 0/60px 60px 0 0}.frame.next::before{background-position:center top;-webkit-mask:linear-gradient(to top,transparent,#000 85%);mask:linear-gradient(to top,transparent,#000 85%)}
.frame.live{aspect-ratio:9/16;border-radius:22%/12.375%;background:var(--frame);color:var(--on-frame);position:relative;overflow:hidden;font-size:.875rem}
/* Tres reels reales que se suceden como en el feed; en cada uno, barrido, recuadros y rótulo van sincronizados en un ciclo de 4,5 s: 4 s de barrido y medio segundo con los recuadros antes del cambio */
.slide{position:absolute;inset:0}.slide:not(.on){visibility:hidden}
.shot{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}
.slide.on :is(.scan,.box,.stage-line i){animation-duration:4.5s;animation-iteration-count:infinite;animation-play-state:var(--play,running)}
.scan{position:absolute;left:0;right:0;top:-14%;height:14%;z-index:1;pointer-events:none;opacity:0;
  background:var(--sweep) 0 86%/100% 3px no-repeat,linear-gradient(to bottom,rgba(40,120,244,0),rgba(120,64,232,.3) 86%,rgba(201,54,214,0))}
.slide.on .scan{animation-name:scan;animation-timing-function:linear}
@keyframes scan{0%{transform:none;opacity:0}3.6%{opacity:1}88.8%{transform:translateY(814%);opacity:1}90.1%,100%{transform:translateY(814%);opacity:0}}
.frame-meta{position:absolute;z-index:2;left:50%;top:2.5%;transform:translateX(-50%);width:max-content;max-width:84%;
  display:flex;flex-direction:column;align-items:center;gap:1px;padding:6px 14px;border-radius:8px;
  background:rgba(14,10,32,.78);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);font-size:.75rem;color:#C9BCEB;text-align:center}
.stage-line{display:grid;color:var(--on-frame);font-weight:500;font-size:.8125rem}
.stage-line i{grid-area:1/1;font-style:normal;opacity:0}
.box{position:absolute;z-index:1;border:1.5px solid #fff;border-radius:6px;box-shadow:0 0 0 1px rgba(20,10,60,.35),0 0 18px rgba(120,64,232,.45);opacity:0}
.box small{position:absolute;left:-1.5px;bottom:calc(100% + 4px);white-space:nowrap;padding:2px 7px;border-radius:5px;background:linear-gradient(90deg,#1D5FD6,#6A3BE0);color:#fff;font:600 .6875rem/1.4 var(--text)}
.s1 .b1{left:21%;top:26%;width:42%;height:24%}.s1 .b1 small{bottom:auto;top:calc(100% + 4px)}.s1.on .b1{animation-name:s1b1}@keyframes s1b1{0%,39.6%{opacity:0}43.2%,96.6%{opacity:1}98.7%,100%{opacity:0}}
.s1 .b2{left:20.8%;top:66.8%;width:58%;height:10.4%}.s1.on .b2{animation-name:s1b2}@keyframes s1b2{0%,60%{opacity:0}63.6%,96.6%{opacity:1}98.7%,100%{opacity:0}}
.s1 .b3{left:4%;top:90%;width:68%;height:6.6%}.s1.on .b3{animation-name:s1b3}@keyframes s1b3{0%,74.4%{opacity:0}78%,96.6%{opacity:1}98.7%,100%{opacity:0}}
.s1.on .stage-line i:nth-child(1){animation-name:s1c1}.s1.on .stage-line i:nth-child(2){animation-name:s1c2}.s1.on .stage-line i:nth-child(3){animation-name:s1c3}@keyframes s1c1{0%,48%{opacity:1}50.4%,100%{opacity:0}}@keyframes s1c2{0%,48%{opacity:0}50.4%,66%{opacity:1}68.4%,100%{opacity:0}}@keyframes s1c3{0%,66%{opacity:0}68.4%,98.3%{opacity:1}99.1%,100%{opacity:0}}
.s2 .b1{left:36%;top:33.4%;width:60%;height:21.4%}.s2.on .b1{animation-name:s2b1}@keyframes s2b1{0%,43.2%{opacity:0}46.8%,96.6%{opacity:1}98.7%,100%{opacity:0}}
.s2 .b2{left:11.9%;top:69.3%;width:76.7%;height:5.2%}.s2 .b2 small{bottom:auto;top:calc(100% + 4px)}.s2.on .b2{animation-name:s2b2}@keyframes s2b2{0%,57.6%{opacity:0}61.2%,96.6%{opacity:1}98.7%,100%{opacity:0}}
.s2 .b3{left:4%;top:84.6%;width:78%;height:11.8%}.s2.on .b3{animation-name:s2b3}@keyframes s2b3{0%,74.4%{opacity:0}78%,96.6%{opacity:1}98.7%,100%{opacity:0}}
.s2.on .stage-line i:nth-child(1){animation-name:s2c1}.s2.on .stage-line i:nth-child(2){animation-name:s2c2}.s2.on .stage-line i:nth-child(3){animation-name:s2c3}@keyframes s2c1{0%,50.4%{opacity:1}52.8%,100%{opacity:0}}@keyframes s2c2{0%,50.4%{opacity:0}52.8%,62.4%{opacity:1}64.8%,100%{opacity:0}}@keyframes s2c3{0%,62.4%{opacity:0}64.8%,98.3%{opacity:1}99.1%,100%{opacity:0}}
.s3 .b1{left:6%;top:44.8%;width:58%;height:20.4%}.s3.on .b1{animation-name:s3b1}@keyframes s3b1{0%,50.4%{opacity:0}54%,96.6%{opacity:1}98.7%,100%{opacity:0}}
.s3 .b2{left:15.7%;top:70%;width:68.8%;height:11.5%}.s3.on .b2{animation-name:s3b2}@keyframes s3b2{0%,63.6%{opacity:0}67.2%,96.6%{opacity:1}98.7%,100%{opacity:0}}
.s3 .b3{left:4%;top:89%;width:81.5%;height:9.4%}.s3.on .b3{animation-name:s3b3}@keyframes s3b3{0%,75.6%{opacity:0}79.2%,96.6%{opacity:1}98.7%,100%{opacity:0}}
.s3.on .stage-line i:nth-child(1){animation-name:s3c1}.s3.on .stage-line i:nth-child(2){animation-name:s3c2}.s3.on .stage-line i:nth-child(3){animation-name:s3c3}@keyframes s3c1{0%,50.4%{opacity:1}52.8%,100%{opacity:0}}@keyframes s3c2{0%,50.4%{opacity:0}52.8%,64.8%{opacity:1}67.2%,100%{opacity:0}}@keyframes s3c3{0%,64.8%{opacity:0}67.2%,98.3%{opacity:1}99.1%,100%{opacity:0}}
/* Cómo funciona: con GSAP la sección se fija y el escenario cambia al ritmo del scroll */
.how{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,6fr);gap:clamp(28px,4vw,72px);align-items:center;
  max-width:1240px;margin:0 auto;min-height:100svh;padding:clamp(48px,8vh,96px) var(--m)}
.how-text .h-section{margin-bottom:20px}
.how-stage{display:flex;justify-content:flex-end}
.step{display:flex;flex-direction:column;gap:6px;max-width:440px;padding:16px 0 16px 20px;border-left:2px solid var(--surface-2);transition:border-color .3s}
.step .claim{font:500 1.625rem/1.1 var(--display);letter-spacing:-.02em;color:var(--muted);transition:color .3s}
.step.active{border-color:var(--accent)}.step.active .claim{color:var(--ink)}
.step p:not(.claim){font-size:.9375rem;color:var(--muted)}
.stage{background:var(--stage);border-radius:16px;aspect-ratio:1;max-width:520px;width:100%;justify-self:end;display:grid;grid-template-columns:minmax(0,1fr);place-items:center;padding:36px;gap:28px}
.state{display:flex;width:100%;max-width:400px;min-width:0;flex-direction:column;gap:12px}
.js .stage:not(.flat){aspect-ratio:1}.js .stage:not(.flat) .state{grid-area:1/1}
.js .stage:not(.flat) .state:not(:first-child){opacity:0;visibility:hidden}
.stage.flat{aspect-ratio:auto}.flat-steps .step .claim{color:var(--ink)}
.ui-title{font:500 1.0625rem var(--display);color:#fff}
.ui-hint{font-size:.875rem;color:#DADBFF}
.ui-paste{display:flex;align-items:center;gap:8px;background:var(--ground);border-radius:8px;padding:5px 5px 5px 16px;font-size:.9375rem;color:var(--ink)}
.typed{flex:1;min-width:0;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}
.typed::after{content:"";display:inline-block;width:2px;height:1em;background:var(--ink);vertical-align:-2px;margin-left:2px;animation:blink 1s steps(1) infinite}
.ui-btn{display:inline-flex;font:500 .9375rem var(--text);background:var(--action);color:var(--on-action);border:0;border-radius:8px;padding:8px 16px;white-space:nowrap;cursor:pointer;align-self:flex-start}
.ui-btn.quiet{background:var(--surface-2);color:var(--ink)}
.ui-btn.big{padding:13px 22px;font-size:1rem;align-self:stretch;justify-content:center}
.ui-job{display:flex;gap:14px;align-items:center;background:var(--ground);border-radius:10px;padding:12px 16px 12px 12px;color:var(--ink)}
.ui-job .reel{width:30px;background:var(--surface-2)}.ui-job .run::after{animation:scan2 2.4s ease-in-out infinite alternate;top:6%;height:9%}
@keyframes scan2{to{top:85%}}
.ui-job b{display:block;font-weight:500;font-size:.9375rem}.ui-job span{font-size:.8125rem;color:var(--muted)}
.bars{display:flex;gap:3px;margin-top:6px}.bars i{height:5px;width:20px;border-radius:3px;background:var(--surface-2)}.bars i.on{background:var(--sweep);background-size:138px 100%}.bars i:nth-child(2){background-position:-23px 0}.bars i:nth-child(3){background-position:-46px 0}.bars i:nth-child(4){background-position:-69px 0}.bars i:nth-child(5){background-position:-92px 0}.bars i:nth-child(6){background-position:-115px 0}
.ui-stats{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:6px;margin:0}
.ui-stats div{background:var(--ground);border-radius:8px;padding:10px 14px}
.ui-stats dt{font-size:.8125rem;color:var(--muted)}.ui-stats dd{margin:2px 0 0;font:500 1.125rem var(--display);color:var(--ink)}
.ui-card{background:var(--ground);border-radius:12px;padding:18px;display:flex;flex-direction:column;gap:9px;color:var(--ink)}
.ui-cat{display:flex;align-items:center;gap:8px;font-size:.8125rem;color:var(--muted)}
.ui-name{font:500 1.25rem/1.15 var(--display);letter-spacing:-.02em}
.ui-facts{display:flex;flex-wrap:wrap;gap:4px 12px;font-size:.875rem;color:var(--muted)}.ui-facts b{color:var(--ink);font-weight:600}
.ui-tags{display:flex;flex-wrap:wrap;gap:5px}.ui-tags span{font-size:.8125rem;background:var(--surface);border-radius:7px;padding:2px 9px;color:var(--muted)}

/* Búsqueda escribible */
.find{background:var(--surface);display:grid;grid-template-columns:minmax(0,5fr) minmax(0,6fr);gap:clamp(28px,4vw,72px);align-items:center;
  padding:clamp(64px,9vh,120px) max(var(--m),calc((100% - 1240px) / 2))}
.find-text{display:flex;flex-direction:column;gap:14px;max-width:460px}
.find-ui{background:var(--ground);border-radius:14px;padding:14px;display:flex;flex-direction:column;gap:10px;min-width:0;box-shadow:0 18px 40px -24px rgba(40,24,110,.35)}
.find-line{display:flex;align-items:center;gap:10px;background:var(--surface);border:1px solid var(--surface-2);border-radius:8px;padding:11px 14px;color:var(--muted);cursor:text}
.find-line input{flex:1;min-width:0;font:500 clamp(1.0625rem,1rem + .4vw,1.3125rem) var(--display);letter-spacing:-.01em;color:var(--ink);background:none;border:0;padding:0;outline:none}
.find-line:focus-within{outline:3px solid var(--accent);outline-offset:2px}
.results{display:flex;flex-direction:column;gap:4px;min-height:196px}
.results li{display:flex;gap:12px;align-items:center;background:var(--surface);border-radius:8px;padding:10px 14px;animation:found .3s ease;min-width:0}
.results li>div{min-width:0}
.results b{display:block;font-weight:500;overflow-wrap:anywhere}.results small{font-size:.8125rem;color:var(--muted)}
.results .reel.tiny{width:20px;font-size:11px}
.results .empty{color:var(--muted)}
.find-note{font-size:.8125rem;color:var(--muted);padding:0 4px}
.examples{display:flex;gap:6px;flex-wrap:wrap}
.examples button{font:500 .9375rem var(--text);color:var(--ink);background:var(--ground);border:0;border-radius:8px;padding:8px 16px;cursor:pointer;transition:transform .15s ease}
.examples button:hover{transform:translateY(-1px);background:var(--surface-2)}

/* Lámina con notas al margen */
.plate{display:grid;grid-template-columns:minmax(0,1fr) minmax(320px,390px) minmax(0,1fr);grid-template-rows:auto 1fr;column-gap:clamp(20px,4vw,72px);row-gap:20px;padding:clamp(80px,10vw,180px) var(--m)}
.plate-title{grid-column:1;grid-row:1;text-align:right;align-self:end}
.notes{grid-row:2;display:flex;flex-direction:column;justify-content:space-around;gap:32px}
.notes.left{grid-column:1;text-align:right;align-items:flex-end}.notes.right{grid-column:3}
.notes li{max-width:26ch;display:flex;flex-direction:column;gap:6px;cursor:default;border-radius:8px;padding:6px 8px}
.notes b{font:500 1.25rem var(--display);letter-spacing:-.01em}
.notes span{font-size:1rem;color:var(--muted)}
.notes li:hover b,.notes li:focus b{color:var(--accent)}
.panel-ui{grid-column:2;grid-row:1 / span 2;background:var(--surface);border-radius:14px;padding:22px;display:flex;flex-direction:column;gap:14px;min-height:660px}
.panel-ui [data-part]{transition:opacity .2s ease}
.plate:has(li[data-target=amount]:is(:hover,:focus)) .panel-ui>:not([data-part=parts]),
.plate:has(li[data-target=parts]:is(:hover,:focus)) .panel-ui>:not([data-part=parts]),
.plate:has(li[data-target=missing]:is(:hover,:focus)) .panel-ui>:not([data-part=missing]),
.plate:has(li[data-target=steps]:is(:hover,:focus)) .panel-ui>:not([data-part=steps]),
.plate:has(li[data-target=origin]:is(:hover,:focus)) .panel-ui>:not([data-part=origin]),
.plate:has(li[data-target=share]:is(:hover,:focus)) .panel-ui>:not([data-part=share]){opacity:.3}
.p-kind{display:flex;gap:8px;align-items:center;font-size:.8125rem;color:var(--muted)}
.p-name{font:500 1.375rem/1.1 var(--display);letter-spacing:-.02em}
.p-numbers{display:grid;grid-template-columns:repeat(3,1fr);gap:4px;margin:0}
.p-numbers div{background:var(--ground);border-radius:8px;padding:8px 10px}
.p-numbers dt{font-size:.75rem;color:var(--muted)}.p-numbers dd{margin:2px 0 0;font:500 .9375rem var(--display)}.p-numbers dd.none{font:400 .875rem var(--text);color:var(--muted)}
.p-parts{background:var(--ground);border-radius:10px;padding:12px 14px;display:flex;flex-direction:column;gap:6px}
.p-h{font:500 .875rem var(--display);color:var(--purple)}
.p-parts ul{display:flex;flex-direction:column;gap:4px;margin-bottom:6px}
.p-parts li{display:flex;justify-content:space-between;gap:10px;font-size:.8125rem}.p-parts li b{font-weight:600;font-variant-numeric:tabular-nums}
.more{color:var(--muted)}
.p-steps{counter-reset:s;display:flex;flex-direction:column;gap:4px}
.p-steps li{counter-increment:s;display:grid;grid-template-columns:22px 1fr;gap:8px;font-size:.8125rem;background:var(--ground);border-radius:10px;padding:7px 10px}
.p-steps li::before{content:counter(s);font:500 .875rem var(--display);color:var(--purple)}
.p-steps li.more{display:block;background:none;padding:2px 10px}.p-steps li.more::before{content:none}
.p-origin{font-size:.8125rem;color:var(--muted)}
.p-actions{display:flex;gap:6px;margin-top:auto}

/* Cierre */
.close{background:var(--brand-field);color:#fff;min-height:90svh;display:grid;grid-template-columns:minmax(0,5fr) minmax(0,6fr);gap:var(--m);padding:40px var(--m);align-items:center}
.close-text{align-self:end;display:flex;flex-direction:column;gap:18px;padding-bottom:20px}
.close h2{font-size:var(--giant);line-height:.92;letter-spacing:-.04em;max-width:11ch}
.close-text p{font-size:1.25rem;max-width:40ch}
.close-beta{display:flex;flex-direction:column;gap:8px;max-width:46ch;padding:16px 18px;border-radius:14px;background:rgba(10,8,40,.28);border:1px solid rgba(255,255,255,.18)}
.close-text .close-beta p{font-size:.9375rem;max-width:none}.close-text .close-beta .close-beta-small{font-size:.8125rem;opacity:.85}
.close-beta-title{display:flex;align-items:center;gap:10px;font-weight:600}.close-beta .beta{transform:none;margin:0;align-self:auto;box-shadow:none}
.close-beta a{color:#fff;text-underline-offset:3px}
.dialog{justify-self:center;width:min(100%,440px);background:var(--ground);color:var(--ink);border-radius:14px;padding:24px;display:flex;flex-direction:column;gap:16px;box-shadow:0 24px 60px rgba(5,30,26,.28)} /* taste-skill-ignore: diálogo de la propia interfaz (data-ui), flota sobre el campo */
.d-title{font:500 1.375rem var(--display);letter-spacing:-.02em}
.d-field{display:flex;flex-direction:column;gap:6px;font-size:.875rem;font-weight:500}
.d-field input{font:400 1rem var(--text);color:var(--ink);background:var(--surface);border:1px solid var(--surface-2);border-radius:8px;padding:11px 13px}
.d-field input::placeholder{color:var(--muted)}
.d-seg{border:0;padding:0;margin:0;display:flex;flex-direction:column;gap:6px}
.d-seg legend{font-size:.875rem;font-weight:500;padding:0;margin-bottom:6px}
.seg{display:grid;grid-template-columns:1fr 1fr;gap:4px;background:var(--surface);border-radius:8px;padding:4px}
.d-seg label{position:relative;cursor:pointer}
.d-seg input{position:absolute;opacity:0;inset:0}
.d-seg span{display:block;text-align:center;padding:8px;border-radius:8px;font-size:.9375rem}
.d-seg input:checked+span{background:var(--ink);color:var(--ground)}
.d-seg input:focus-visible+span{outline:3px solid var(--accent);outline-offset:2px}
.d-note{font-size:.875rem;color:var(--muted)}.d-note a{color:inherit;text-underline-offset:2px}
/* Páginas legales: privacidad y términos */
.legal{max-width:72ch;padding:40px var(--m) 40px;display:flex;flex-direction:column;gap:16px}
.legal h1{font-size:clamp(2rem,1.4rem + 2vw,3rem)}.legal h2{font-size:1.375rem;margin-top:20px}
.legal-lede{font-size:1.125rem;color:var(--muted)}
.legal a{color:var(--ink);text-underline-offset:3px}
.legal-list{display:flex;flex-direction:column;gap:10px;padding-left:1.2em}.legal-list li::marker{color:var(--purple)}
.legal-data{display:flex;flex-direction:column;gap:12px;margin:0}
.legal-data>div{padding:16px 18px;border-radius:14px;background:var(--surface);border:1px solid var(--surface-2);display:flex;flex-direction:column;gap:8px}
.legal-data dt{font-weight:600}.legal-data dd{margin:0;display:flex;flex-direction:column;gap:8px}

/* Pie */
.foot{display:grid;grid-template-columns:1fr auto 1fr;gap:16px;align-items:baseline;padding:30svh var(--m) 30px}
.foot nav{display:flex;gap:24px}.foot nav a{color:var(--ink)}
.foot>span:last-child{text-align:right}

/* Entradas al hacer scroll (solo con JS; sin él todo es visible) */
.js [data-reveal]{opacity:0;transform:translateY(24px);transition:opacity .6s ease,transform .6s ease}
.js [data-reveal].in{opacity:1;transform:none}

/* Página «Cómo funciona» */
.g{display:flex;flex-direction:column;gap:clamp(56px,8vw,112px)}
.g-hero,.g-sec{width:100%;max-width:1320px;margin:0 auto;padding:0 var(--m)}
.g-hero{padding-top:clamp(24px,5vw,72px);display:flex;flex-direction:column;gap:22px}
.g-eyebrow{font-weight:500;color:var(--muted)}
.g-hero h1{font-size:clamp(2.25rem,1rem + 3.4vw,4.5rem);line-height:1;max-width:20ch}
.g-lede{font-size:clamp(1.125rem,1rem + .4vw,1.375rem);color:var(--muted);max-width:60ch;line-height:1.5}
.g-platforms{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:6px;margin-top:8px}
.g-platforms li{background:var(--surface);border-radius:10px;padding:14px 16px;display:flex;flex-direction:column;gap:2px;position:relative;overflow:hidden}
.g-platforms li::before{content:"";position:absolute;inset:0 0 auto;height:3px;background:var(--sweep);background-size:400% 100%}
.g-platforms li:nth-child(2)::before{background-position:33% 0}.g-platforms li:nth-child(3)::before{background-position:66% 0}.g-platforms li:nth-child(4)::before{background-position:100% 0}
.g-platforms b{font:500 1.125rem var(--display)}.g-platforms span{font-size:.875rem;color:var(--muted)}
.g-toc{display:flex;flex-wrap:wrap;gap:6px}
.g-toc a{color:var(--ink);text-decoration:none;font-size:.9375rem;padding:7px 14px;border-radius:8px;background:var(--surface)}
.g-toc a:hover{background:var(--surface-2)}
.g-sec{display:flex;flex-direction:column;gap:24px;scroll-margin-top:24px}
.g-sec .h-section{font-size:clamp(1.75rem,1.2rem + 1.6vw,2.75rem)}
.g-intro{color:var(--muted);font-size:1.125rem;max-width:60ch;margin-top:-10px}
.g-cards{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}
.g-cards li{background:var(--surface);border-radius:12px;padding:clamp(20px,2vw,28px);display:flex;flex-direction:column;gap:10px;transition:transform .2s ease,background .2s ease}
.g-cards li:hover{transform:translateY(-3px);background:var(--surface-2)}
.g-cards h3{font-size:1.375rem}
.g-cards p{color:var(--muted)}
.g-mark{width:22px;aspect-ratio:9/16;border-radius:22%/12.375%;background:var(--c);position:relative;overflow:hidden}
.g-mark::after{content:"";position:absolute;left:0;right:0;top:34%;height:12%;background:rgba(255,255,255,.55)}
.g-paths{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
.g-path{background:var(--surface);border-radius:12px;padding:clamp(22px,2.6vw,36px);display:flex;flex-direction:column;gap:20px}
.g-path h3{font-size:1.625rem}
.g-steps{counter-reset:s;display:flex;flex-direction:column;gap:12px}
.g-steps li{counter-increment:s;position:relative;padding:2px 0 0 40px;min-height:28px}
.g-steps li::before{content:counter(s);position:absolute;left:0;top:0;width:28px;height:28px;border-radius:7px;background:var(--ground);display:grid;place-items:center;font-weight:600;font-size:.875rem}
.g-steps code{font-size:.875rem;background:var(--ground);border-radius:5px;padding:1px 6px;white-space:nowrap}
.g-chat{margin-top:auto;background:var(--ground);border-radius:10px;padding:16px;display:flex;flex-direction:column;gap:8px;font-size:.875rem}
.g-chat p{max-width:85%;padding:9px 12px;border-radius:12px;line-height:1.4;overflow-wrap:anywhere}
.g-chat .me{align-self:flex-end;background:var(--accent);color:var(--on-accent);border-bottom-right-radius:4px}
.g-chat .bot{align-self:flex-start;background:var(--surface);border-bottom-left-radius:4px}
.g-paste{margin-top:auto;display:flex;align-items:center;gap:8px;background:var(--ground);border-radius:8px;padding:6px 6px 6px 16px;min-width:0}
.g-paste span{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:var(--muted)}
.g-paste b{background:var(--action);color:var(--on-action);font-weight:500;border-radius:6px;padding:8px 16px}
.g-kinds{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
.g-kinds li{background:var(--surface);border-radius:12px;padding:20px 22px;display:flex;gap:18px;align-items:flex-start}
.g-kinds .reel{width:30px}.g-kinds .reel::after{opacity:.8}
.g-kinds div{display:flex;flex-direction:column;gap:6px;min-width:0}
.g-kinds h3{font-size:1.375rem}.g-kinds p{color:var(--muted)}.g-kinds small{font-size:.875rem;font-style:italic;color:var(--muted)}
.g-tips{counter-reset:t;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px 40px}
.g-tips li{counter-increment:t;padding:18px 0 18px 56px;position:relative;border-top:1px solid var(--surface-2);color:var(--muted)}
.g-tips li::before{content:counter(t,decimal-leading-zero);position:absolute;left:0;top:16px;font:500 1.5rem var(--display);color:var(--ink)}
.g-tips b{color:var(--ink);font-weight:600}
.g-faq{display:flex;flex-direction:column;gap:6px;max-width:860px}
.g-faq details{background:var(--surface);border-radius:10px}
.g-faq summary{cursor:pointer;padding:16px 20px;font:500 1.125rem var(--display);letter-spacing:-.01em;min-height:44px}
.g-faq details p{padding:0 20px 18px;color:var(--muted);max-width:68ch}
.g .close{margin-top:clamp(24px,4vw,56px)}
@media (max-width:900px){
  .links a:not(.btn):not([href^="https"]){display:none}
  .hero{grid-template-columns:1fr;grid-template-rows:none;row-gap:20px;padding-top:12px}
  .half{grid-column:1!important;grid-row:auto;font-size:9vw;max-width:none;align-self:auto}
  .half.a{justify-self:start;text-align:left}.half.b{justify-self:end}
  .strip{grid-column:1;grid-row:auto;width:min(100%,360px);justify-self:center;gap:12px}
  .frame.ghost{height:44px}
  .hero-foot{grid-column:1;grid-row:auto;max-width:none}
  .hero-meta{grid-column:1;grid-row:auto;justify-self:start;text-align:left;order:2}
  .hero-foot{position:relative;z-index:1;background:var(--ground);border-radius:12px;padding:16px}
  .how{grid-template-columns:1fr}
  .find{grid-template-columns:1fr}
  .how{min-height:0}
  .stage{justify-self:stretch;padding:24px}
  .plate{grid-template-columns:1fr;grid-template-rows:auto}
  .plate-title,.panel-ui,.notes{grid-column:1!important;grid-row:auto!important;text-align:left}
  .notes.left{align-items:flex-start;text-align:left}
  .how>*{min-width:0}.ui-paste{min-width:0}
  .notes{display:grid;grid-template-columns:1fr 1fr;gap:16px}
  .panel-ui{min-height:0}
  .close{grid-template-columns:1fr;align-items:start}.close-text{align-self:start}.close h2{font-size:13vw}
  .g-platforms,.g-cards{grid-template-columns:repeat(2,minmax(0,1fr))}.g-paths,.g-kinds,.g-tips{grid-template-columns:minmax(0,1fr)}
  .foot{grid-template-columns:1fr;padding-top:20svh}.foot>span:last-child{text-align:left}.foot nav{flex-wrap:wrap}
}
@media (max-width:560px){.g-cards{grid-template-columns:minmax(0,1fr)}.g-kinds li{padding:18px}}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .scan,.ui-job .run::after,.typed::after{animation:none}
  .scan{opacity:0;animation:none!important}.box{opacity:1}
  .intro [data-intro]{opacity:1}
  .stage-line i{animation:none!important}.stage-line i:nth-child(2){opacity:1}
  .box{animation:none!important}
  .js [data-reveal]{opacity:1;transform:none;transition:none}
  *{transition:none!important}
}