/* tuutil · papel con bordes marcados (neobrutalismo) + movimiento con criterio:
   curvas fuertes de salida, solo transform/opacity, nada se anima con teclado y todo respeta "reducir movimiento". */
:root{
  --paper:#f4efe6; --paper-2:#ebe4d6; --ink:#151515; --ink-soft:#4a463f; --card:#fffdf8;
  --coral:#ff7a5c; --sky:#6ea8ff; --lemon:#ffd84d; --mint:#3ddc97; --pink:#ff9ad5; --lilac:#b79cff; --violet:#8b5cf6; --cyan:#22d3ee;
  --on-color:#151515;
  --shadow:6px 6px 0 var(--ink); --shadow-sm:3px 3px 0 var(--ink);
  --radius:18px; --gutter:clamp(16px,4vw,48px);
  --ease-out:cubic-bezier(.23,1,.32,1); --ease-in-out:cubic-bezier(.77,0,.175,1); --ease-drawer:cubic-bezier(.32,.72,0,1);
  --ease:var(--ease-out); --spring:cubic-bezier(.34,1.56,.64,1);
  --font:'Bricolage Grotesque',system-ui,sans-serif; --mono:'DM Mono',ui-monospace,monospace;
}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]){--paper:#171512;--paper-2:#221f1a;--ink:#f4efe6;--ink-soft:#bdb6a8;--card:#2a261f}
}
:root[data-theme="dark"]{--paper:#171512;--paper-2:#221f1a;--ink:#f4efe6;--ink-soft:#bdb6a8;--card:#2a261f}
*{box-sizing:border-box;margin:0}
html{scroll-behavior:smooth;scroll-padding-top:92px}
body{font-family:var(--font);background:var(--paper);color:var(--ink);line-height:1.5;font-size:16px;min-height:100vh;overflow-x:clip;
  background-image:radial-gradient(color-mix(in srgb,var(--ink) 14%,transparent) 1.2px,transparent 1.2px);background-size:22px 22px}
a{color:inherit}
button,input,select,textarea{font:inherit;color:inherit}
:focus-visible{outline:3px solid var(--ink);outline-offset:3px;border-radius:6px}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
.wrap{max-width:1180px;margin:0 auto;padding:0 var(--gutter)}
.skip{position:absolute;left:-999px;top:8px;background:var(--lemon);color:var(--on-color);padding:8px 14px;border-radius:8px;z-index:300}
.skip:focus{left:8px}
kbd{font-family:var(--mono);font-size:.74rem;border:2px solid currentColor;border-radius:7px;padding:0 6px;opacity:.7}

/* ---------- botones ---------- */
.btn{display:inline-flex;align-items:center;gap:8px;min-height:44px;padding:0 18px;border:3px solid var(--ink);border-radius:999px;background:var(--card);
  font-weight:700;cursor:pointer;box-shadow:var(--shadow-sm);text-decoration:none;transition:transform 160ms var(--ease-out),box-shadow 160ms var(--ease-out),background .15s}
.btn:hover{transform:translate(-2px,-2px);box-shadow:5px 5px 0 var(--ink)}
.btn:active{transform:translate(2px,2px) scale(.97);box-shadow:0 0 0 var(--ink)}
.btn.primary{background:var(--coral);color:var(--on-color)}
.btn.lemon{background:var(--lemon);color:var(--on-color)}
.btn.big-btn{min-height:56px;padding:0 28px;font-size:1.1rem}
.btn.small{min-height:40px;padding:0 14px;font-size:.92rem}
.btn:disabled{opacity:.5;cursor:not-allowed;transform:none;box-shadow:var(--shadow-sm)}

/* ---------- cabecera fija con menú de herramientas ---------- */
.site-hdr{position:sticky;top:0;z-index:100;background:color-mix(in srgb,var(--paper) 84%,transparent);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);
  border-bottom:3px solid transparent;transition:border-color .2s}
.site-hdr.scrolled,.site-hdr.menu-open{border-bottom-color:var(--ink)}
.hdr-in{display:flex;align-items:center;gap:14px;padding-top:12px;padding-bottom:12px}
.logo{font-weight:800;font-size:1.65rem;letter-spacing:-.05em;text-decoration:none;display:flex;align-items:center;gap:10px;flex:none}
/* logo 3D: imagen fija y, al pasar el ratón, una vuelta (tira de 48 fotogramas renderizada con three.js) */
.logo i{--ls:44px;width:var(--ls);height:var(--ls);flex:none;background:url(logo3d.png) 0 0/var(--ls) var(--ls) no-repeat}
/* cuando la tira ya está descargada: una vuelta cada 7 s (y otra al pasar el ratón) */
html.logo-ready .logo i{background-image:url(logo3d.webp);background-size:calc(var(--ls) * 48) var(--ls);animation:logo-spin 7s 1.2s infinite}
@keyframes logo-spin{0%{background-position:0 0;animation-timing-function:steps(47)}13%,100%{background-position:calc(var(--ls) * -47) 0}}
@keyframes logo-spin1{from{background-position:0 0}to{background-position:calc(var(--ls) * -47) 0}}
@media (hover:hover) and (pointer:fine){html.logo-ready .logo:hover i{animation:logo-spin1 .9s steps(47) 1}}
.logo b{background:linear-gradient(transparent 62%,var(--mint) 62%,var(--mint) 92%,transparent 92%)}
.nav{display:flex;align-items:center;gap:4px;margin-left:10px}
.nav-btn,.nav-link{display:inline-flex;align-items:center;gap:6px;min-height:42px;padding:0 14px;border:0;background:transparent;border-radius:999px;font-weight:700;cursor:pointer;text-decoration:none;transition:background .15s}
.nav-btn:hover,.nav-link:hover,.nav-btn[aria-expanded="true"]{background:color-mix(in srgb,var(--ink) 10%,transparent)}
.nav-btn svg{width:14px;height:14px;fill:none;stroke:currentColor;stroke-width:3;stroke-linecap:round;stroke-linejoin:round;transition:transform 200ms var(--ease-out)}
.nav-btn[aria-expanded="true"] svg{transform:rotate(180deg)}
.hdr-actions{margin-left:auto;display:flex;align-items:center;gap:10px}
.cmd-btn kbd{margin-left:4px}
.cmd-btn svg,.lang summary svg{width:18px;height:18px;stroke:currentColor;fill:none;stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round}

/* mega menú: nace desde su botón y es instantáneo con teclado */
.mega{position:absolute;left:0;right:0;top:100%;background:var(--card);border-bottom:3px solid var(--ink);box-shadow:0 40px 60px -40px rgba(0,0,0,.5);
  max-height:calc(100vh - 74px);overflow:auto;transform-origin:50% 0;opacity:0;visibility:hidden;pointer-events:none;transform:translateY(-8px) scale(.985);
  transition:opacity 160ms var(--ease-out),transform 160ms var(--ease-out),visibility 0s linear 160ms}
.mega[data-open="true"]{opacity:1;visibility:visible;pointer-events:auto;transform:none;transition-delay:0s}
.mega[data-instant]{transition-duration:0s,0s,0s}
.mega-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:26px 32px;padding-top:28px;padding-bottom:18px}
.mega h3{display:flex;align-items:center;gap:10px;font-family:var(--mono);font-size:.76rem;font-weight:500;text-transform:uppercase;letter-spacing:.09em;color:var(--ink-soft);margin-bottom:8px}
.mega h3 i{width:28px;height:28px;border-radius:9px;border:2px solid var(--ink);background:var(--c);display:grid;place-items:center;flex:none}
.mega h3 svg{width:16px;height:16px;fill:none;stroke:#151515;stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round}
.mega ul{list-style:none;padding:0;display:grid;gap:1px}
.mega ul a{display:block;padding:7px 10px;margin:0 -10px;border-radius:10px;text-decoration:none;font-weight:600;font-size:.95rem;transition:background .12s}
.mega ul a:hover,.mega ul a:focus-visible{background:var(--lemon);color:var(--on-color)}
.mega-foot{display:flex;justify-content:space-between;align-items:center;gap:12px;flex-wrap:wrap;padding-top:14px;padding-bottom:22px;border-top:2px dashed color-mix(in srgb,var(--ink) 25%,transparent)}
.mega-foot span{color:var(--ink-soft);font-size:.92rem}
.scrim{position:fixed;inset:0;z-index:90;background:rgba(10,10,10,.35);opacity:0;visibility:hidden;transition:opacity 160ms var(--ease-out),visibility 0s linear 160ms}
.scrim[data-open="true"]{opacity:1;visibility:visible;transition-delay:0s}

/* buscador de herramientas (Ctrl + K): sin animación, se usa muchas veces al día */
.cmd{position:fixed;inset:0;z-index:250;display:none;align-items:flex-start;justify-content:center;padding:12vh 16px 16px;background:rgba(10,10,10,.5)}
.cmd[data-open="true"]{display:flex}
.cmd-box{width:min(640px,100%);background:var(--card);border:3px solid var(--ink);border-radius:22px;box-shadow:var(--shadow);overflow:hidden}
.cmd-box input{width:100%;border:0;border-bottom:3px solid var(--ink);padding:18px 22px;font-size:1.15rem;background:transparent;outline:none}
.cmd-list{list-style:none;padding:8px;max-height:min(50vh,420px);overflow:auto}
.cmd-list a{display:flex;align-items:center;gap:12px;padding:10px 12px;border-radius:12px;text-decoration:none;font-weight:700}
.cmd-list li[aria-selected="true"] a{background:var(--lemon);color:var(--on-color)}
.cmd-list .cat{margin-left:auto;font-family:var(--mono);font-size:.7rem;font-weight:500;text-transform:uppercase;letter-spacing:.06em;opacity:.65}
.cmd-empty{padding:26px;text-align:center;color:var(--ink-soft)}
.cmd-foot{padding:10px 18px;border-top:2px solid color-mix(in srgb,var(--ink) 14%,transparent);font-size:.78rem;color:var(--ink-soft);font-family:var(--mono)}

/* ---------- selector de idioma ---------- */
.lang{position:relative}
.lang summary{list-style:none;cursor:pointer}
.lang summary::-webkit-details-marker{display:none}
.lang ul{position:absolute;right:0;top:calc(100% + 8px);z-index:130;list-style:none;padding:8px;margin:0;min-width:180px;background:var(--card);border:3px solid var(--ink);border-radius:14px;box-shadow:var(--shadow-sm);display:grid;gap:2px}
.lang li a{display:block;padding:10px 12px;border-radius:10px;text-decoration:none;font-weight:600}
.lang li a:hover,.lang li a[aria-current]{background:var(--lemon);color:var(--on-color)}

/* ---------- portada: hero ---------- */
.hero2{display:grid;grid-template-columns:minmax(0,1.2fr) minmax(0,.8fr);gap:30px;align-items:center;padding:clamp(26px,5vw,60px) 0 40px}
.eyebrow{display:inline-flex;align-items:center;gap:9px;padding:6px 14px;border:3px solid var(--ink);border-radius:999px;background:var(--card);font-weight:700;font-size:.88rem;box-shadow:2px 2px 0 var(--ink);animation:rise .6s var(--ease-out) backwards}
.eyebrow i{width:9px;height:9px;border-radius:50%;background:var(--mint);animation:pulse 2.2s var(--ease-out) infinite}
@keyframes pulse{0%{box-shadow:0 0 0 0 rgba(61,220,151,.75)}100%{box-shadow:0 0 0 11px rgba(61,220,151,0)}}
.hero2 h1{margin-top:20px;font-size:clamp(2.7rem,7.6vw,6.6rem);line-height:.9;letter-spacing:-.06em;font-weight:800;text-transform:uppercase}
.hero2 h1 .w{display:inline-block;animation:kin .8s var(--ease-out) backwards;animation-delay:calc(var(--i)*60ms + 80ms)}
@keyframes kin{from{opacity:0;transform:translateY(.4em);filter:blur(8px)}to{opacity:1;transform:none;filter:blur(0)}}
.hero2 h1 span.a,.hero2 h1 span.b{display:inline-block;padding:0 .12em;border:4px solid var(--ink);border-radius:.18em;box-shadow:var(--shadow);margin-left:.05em;color:var(--on-color)}
.hero2 h1 span.a{background:var(--lemon);transform:rotate(-2.5deg);animation:kinA .9s var(--ease-out) backwards;animation-delay:calc(var(--i)*60ms + 80ms)}
.hero2 h1 span.b{background:var(--mint);transform:rotate(1.8deg);animation:kinB .9s var(--ease-out) backwards;animation-delay:calc(var(--i)*60ms + 80ms)}
@keyframes kinA{from{opacity:0;transform:translateY(.4em) rotate(-8deg);filter:blur(8px)}to{opacity:1;transform:rotate(-2.5deg);filter:blur(0)}}
@keyframes kinB{from{opacity:0;transform:translateY(.4em) rotate(6deg);filter:blur(8px)}to{opacity:1;transform:rotate(1.8deg);filter:blur(0)}}
.hero2 .lead{max-width:34em;margin-top:24px;font-size:clamp(1.05rem,2.2vw,1.3rem);color:var(--ink-soft);animation:rise .7s var(--ease-out) .55s backwards}
.hero2 .search{animation:rise .7s var(--ease-out) .7s backwards}
.hero2 .hero-links{display:flex;gap:10px;flex-wrap:wrap;margin-top:18px;animation:rise .7s var(--ease-out) .85s backwards}
@keyframes rise{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:none}}
.search{margin-top:28px;display:flex;gap:10px;flex-wrap:wrap}
.search label{flex:1 1 260px}
.search input{width:100%;min-height:54px;padding:0 18px;border:3px solid var(--ink);border-radius:999px;background:var(--card);box-shadow:var(--shadow-sm);font-size:1.05rem}

/* tarjetas flotantes de la derecha (decorativas) */
.stack{position:relative;height:440px}
.pcard{position:absolute;width:min(310px,88%);will-change:transform}
.pcard .pin{background:var(--card);border:3px solid var(--ink);border-radius:20px;box-shadow:var(--shadow);padding:16px 18px;animation:float 7s ease-in-out infinite;animation-delay:var(--fd,0s)}
@keyframes float{50%{transform:translateY(-9px)}}
.pcard.p1{top:0;left:2%}.pcard.p2{top:158px;right:0;--fd:-2.3s}.pcard.p3{bottom:0;left:10%;--fd:-4.6s}
.pc-head{display:flex;align-items:center;gap:10px;font-weight:800;font-size:.95rem}
.pc-head i{width:32px;height:32px;border-radius:10px;border:2.5px solid #151515;background:var(--c);display:grid;place-items:center;flex:none}
.pc-head svg{width:18px;height:18px;fill:none;stroke:#151515;stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round}
.pc-val{margin-top:12px;font-family:var(--mono);font-size:1.25rem;letter-spacing:.02em;word-break:break-all;min-height:1.7em}
.pc-bar{margin-top:10px;height:11px;border:2.5px solid var(--ink);border-radius:99px;overflow:hidden;background:var(--paper)}
.pc-bar b{display:block;height:100%;width:100%;background:var(--mint);transform-origin:0 50%;animation:fill 3.2s var(--ease-out) infinite}
@keyframes fill{0%{transform:scaleX(.15)}30%,100%{transform:scaleX(1)}}
.pc-tag{display:inline-block;margin-top:8px;font-family:var(--mono);font-size:.72rem;text-transform:uppercase;letter-spacing:.08em;border:2px solid var(--ink-soft);border-radius:99px;padding:0 9px;color:var(--ink-soft)}
.pc-eq{margin-top:10px;display:flex;align-items:baseline;gap:10px;flex-wrap:wrap;font-weight:700}
.pc-eq small{font-size:1rem;color:var(--ink-soft);font-weight:600}
.pc-eq strong{font-size:3rem;letter-spacing:-.05em;line-height:1}
.pc-sw{margin-top:12px;display:flex;gap:6px}
.pc-sw i{flex:1;height:44px;border:2.5px solid var(--ink);border-radius:12px;animation:swatch 4.5s var(--ease-out) infinite;animation-delay:calc(var(--k)*.18s)}
@keyframes swatch{0%,100%{transform:translateY(0)}10%{transform:translateY(-7px)}22%{transform:translateY(0)}}
.pc-hex{margin-top:8px;font-family:var(--mono);font-size:.82rem;color:var(--ink-soft)}
@media (max-width:960px){.hero2{grid-template-columns:1fr}.stack{display:none}}

/* cinta */
.tape{position:relative;z-index:3;margin:20px 0 0;border-block:4px solid var(--ink);background:var(--ink);color:var(--paper);overflow:hidden;transform:rotate(-1.2deg);width:104%;margin-left:-2%}
.tape div{display:flex;gap:36px;width:max-content;padding:10px 0;font-weight:800;text-transform:uppercase;letter-spacing:.04em;white-space:nowrap;animation:run 42s linear infinite}
.tape b{color:var(--lemon)}
@keyframes run{to{transform:translateX(-50%)}}

/* ---------- secciones de la portada ---------- */
.sec{margin:110px 0 0}
.sec-head{margin-bottom:28px}
.sec-head h2{font-size:clamp(2rem,6vw,3.9rem);font-weight:800;text-transform:uppercase;letter-spacing:-.05em;line-height:.95}
.sec-head p{color:var(--ink-soft);margin-top:12px;max-width:42em;font-size:1.05rem}
.lower{padding-top:70px}

/* aparición al hacer scroll: transiciones (se pueden interrumpir) y entradas escalonadas */
.js [data-rv]{opacity:0;transform:translateY(22px);transition:opacity .7s var(--ease-out),transform .7s var(--ease-out)}
.js [data-rv].in{opacity:1;transform:none}
.js [data-rv="clip"]{opacity:1;transform:none;clip-path:inset(0 0 105% 0);transition:clip-path .9s var(--ease-in-out)}
.js [data-rv="clip"].in{clip-path:inset(0 0 -10% 0)}
.js [data-stagger]:not(.in)>*{opacity:0}
[data-stagger].in>*{animation:rise .6s var(--ease-out) backwards;animation-delay:calc(var(--n,0)*50ms)}

/* cifras */
.metrics{display:grid;grid-template-columns:repeat(4,1fr);gap:3px;margin:70px 0 0;border:3px solid var(--ink);border-radius:22px;overflow:hidden;background:var(--ink);box-shadow:var(--shadow-sm)}
.metrics div{background:var(--card);padding:20px 22px}
.metrics b{display:inline-block;font-size:clamp(2rem,4.4vw,3rem);font-weight:800;letter-spacing:-.05em;line-height:1;font-variant-numeric:tabular-nums;
  background:linear-gradient(transparent 62%,var(--m) 62%,var(--m) 92%,transparent 92%);padding:0 .08em}
.metrics div:nth-child(1){--m:var(--lemon)}.metrics div:nth-child(2){--m:var(--mint)}.metrics div:nth-child(3){--m:var(--pink)}.metrics div:nth-child(4){--m:var(--sky)}
.metrics span{display:block;margin-top:6px;font-size:.85rem;color:var(--ink-soft)}
@media (max-width:720px){.metrics{grid-template-columns:1fr 1fr}}

/* categorías en bento */
.cats{display:grid;grid-template-columns:repeat(12,1fr);gap:18px}
.cat{--c:var(--lemon);grid-column:span var(--s,4);position:relative;isolation:isolate;overflow:hidden;display:flex;flex-direction:column;gap:8px;padding:22px 22px 20px;min-height:200px;text-decoration:none;color:var(--ink);
  background:var(--card);border:3px solid var(--ink);border-radius:24px;box-shadow:4px 4px 0 var(--ink);transition:transform 200ms var(--ease-out),box-shadow 200ms var(--ease-out)}
.cat::before{content:"";position:absolute;inset:0;z-index:-1;opacity:0;transition:opacity .25s;background:radial-gradient(280px circle at var(--mx,50%) var(--my,30%),color-mix(in srgb,var(--c) 55%,transparent),transparent 70%)}
.cat:active{transform:translate(1px,1px) scale(.985);box-shadow:2px 2px 0 var(--ink)}
.cat .ico{width:48px;height:48px;border-radius:14px;border:2.5px solid #151515;background:var(--c);display:grid;place-items:center;flex:none;transition:transform .5s var(--spring)}
.cat .ico svg{width:26px;height:26px;fill:none;stroke:#151515;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}
.cat h3{font-size:1.4rem;letter-spacing:-.03em;font-weight:800;line-height:1.1;margin-top:6px}
.cat .n{font-family:var(--mono);font-size:.74rem;text-transform:uppercase;letter-spacing:.08em;color:var(--ink-soft)}
.cat ul{list-style:none;padding:0;margin-top:auto;display:grid;gap:3px;font-size:.92rem;color:var(--ink-soft);font-weight:600}
.cat ul li::before{content:"→ ";opacity:.5}
.cat .wm{position:absolute;right:-18px;bottom:-22px;width:140px;height:140px;z-index:-1;fill:none;stroke:var(--ink);stroke-width:1.4;opacity:.07;transition:transform .6s var(--ease-out),opacity .3s}
@media (hover:hover) and (pointer:fine){
  .cat:hover{transform:translate(-3px,-4px);box-shadow:8px 9px 0 var(--ink)}
  .cat:hover::before{opacity:1}
  .cat:hover .ico{transform:rotate(-8deg) scale(1.1)}
  .cat:hover .wm{transform:rotate(-10deg) scale(1.12);opacity:.12}
}
@media (max-width:900px){.cat{grid-column:span 6}}
@media (max-width:560px){.cat{grid-column:span 12}}

/* tests y juegos: bento con ilustraciones */
.featured{margin:0}
.grid,.feat-grid{display:grid;gap:20px}
.grid{grid-template-columns:repeat(auto-fill,minmax(262px,1fr));padding:8px 0 24px}
.feat-grid{grid-template-columns:repeat(6,1fr)}
.ftile.wide{grid-column:span 4}.ftile.narrow{grid-column:span 2}
@media (max-width:900px){.ftile.wide,.ftile.narrow{grid-column:span 6}}
.tile{--c:var(--lemon);position:relative;isolation:isolate;overflow:hidden;display:flex;flex-direction:column;gap:10px;padding:20px 20px 18px;min-height:176px;text-decoration:none;color:var(--ink);
  background:var(--card);border:3px solid var(--ink);border-radius:18px;box-shadow:4px 4px 0 var(--ink);transition:transform 200ms var(--ease-out),box-shadow 200ms var(--ease-out)}
.tile::before{content:"";position:absolute;inset:0;z-index:-1;opacity:0;transition:opacity .25s;background:radial-gradient(260px circle at var(--mx,50%) var(--my,30%),color-mix(in srgb,var(--c) 55%,transparent),transparent 70%)}
.tile:active{transform:translate(1px,1px) scale(.985);box-shadow:2px 2px 0 var(--ink)}
.tile[hidden]{display:none}
.tile svg{width:46px;height:46px;flex:none;stroke:#151515;fill:none;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round;background:var(--c);border:2.5px solid #151515;border-radius:13px;padding:8px;transition:transform .5s var(--spring)}
.tile h2,.tile h3{font-size:1.2rem;line-height:1.2;letter-spacing:-.02em;font-weight:800}
.tile p{font-size:.93rem;color:var(--ink-soft);flex:1}
.tile .tag{align-self:flex-start;font-family:var(--mono);font-size:.7rem;text-transform:uppercase;letter-spacing:.08em;color:var(--ink-soft);border:2px solid var(--ink-soft);border-radius:99px;padding:0 9px}
.tile .go{position:absolute;right:16px;top:14px;font-weight:800;font-size:1.25rem;color:var(--ink-soft);transition:transform .3s var(--spring),color .2s}
@media (hover:hover) and (pointer:fine){
  .tile:hover,.tile:focus-visible{transform:translate(-3px,-4px);box-shadow:8px 9px 0 var(--ink)}
  .tile:hover::before,.tile:focus-visible::before{opacity:1}
  .tile:hover svg,.tile:focus-visible svg{transform:rotate(-9deg) scale(1.12)}
  .tile:hover .go,.tile:focus-visible .go{transform:translate(3px,-3px) rotate(8deg);color:var(--ink)}
}
.ftile{min-height:236px;padding:24px;background:color-mix(in srgb,var(--c) 30%,var(--card));border-radius:24px;box-shadow:5px 5px 0 var(--ink)}
.ftile h3{font-size:clamp(1.3rem,2.4vw,1.7rem);letter-spacing:-.03em}
.ftile.wide h3,.ftile.wide p{max-width:52%}
.art{position:absolute;right:0;top:0;bottom:0;width:46%;z-index:-1;pointer-events:none;display:grid;place-items:center}
.ftile.narrow .art{position:relative;width:100%;height:112px;inset:auto;order:-1;z-index:0;margin:-2px 0 4px}
.ftile.narrow .go{top:16px}
@media (max-width:900px){.ftile.wide h3,.ftile.wide p{max-width:60%}.ftile.narrow{min-height:0}}
@media (max-width:560px){.ftile.wide h3,.ftile.wide p{max-width:100%}.ftile.wide .art{opacity:.3;width:70%}}
.a-type{align-content:center;gap:12px;padding:0 24px 0 0}
.a-type i{display:block;height:13px;border-radius:99px;border:2px solid var(--ink);background:color-mix(in srgb,var(--card) 70%,transparent);position:relative;overflow:hidden;width:var(--w)}
.a-type i::after{content:"";position:absolute;inset:0;background:var(--ink);transform:translateX(-101%);animation:typing 4s var(--ease-out) infinite;animation-delay:calc(var(--k)*.55s)}
@keyframes typing{0%{transform:translateX(-101%)}45%,70%{transform:translateX(0)}100%{transform:translateX(101%)}}
.a-type b{display:block;width:4px;height:24px;border-radius:2px;background:var(--ink);animation:blink 1s steps(1) infinite}
@keyframes blink{50%{opacity:0}}
.a-react i{width:96px;height:96px;border-radius:50%;border:4px solid var(--ink);background:var(--coral);animation:react 4.2s ease-in-out infinite}
@keyframes react{0%,42%{background:var(--coral);transform:scale(.88)}48%,92%{background:var(--mint);transform:scale(1.06)}100%{background:var(--coral);transform:scale(.88)}}
.a-cps{position:relative}
.a-cps i{position:absolute;width:34px;height:34px;border:3px solid var(--ink);border-radius:50%;opacity:0;animation:ripple 2.6s var(--ease-out) infinite;animation-delay:calc(var(--k)*.85s)}
.a-cps b{width:16px;height:16px;border-radius:50%;background:var(--ink)}
@keyframes ripple{0%{transform:scale(.4);opacity:.9}100%{transform:scale(3.6);opacity:0}}
.a-mem{grid-template-columns:repeat(2,48px);gap:10px;place-content:center}
.a-mem i{width:48px;height:48px;border-radius:13px;border:3px solid var(--ink);opacity:.4;animation:lit 4s ease-in-out infinite;animation-delay:calc(var(--k)*.9s)}
.a-mem i:nth-child(1){background:var(--coral)}.a-mem i:nth-child(2){background:var(--sky)}.a-mem i:nth-child(3){background:var(--lemon)}.a-mem i:nth-child(4){background:var(--mint)}
@keyframes lit{0%,24%,100%{opacity:.4;transform:scale(1)}8%,16%{opacity:1;transform:scale(1.12)}}

/* pasos: la columna izquierda se queda fija y cada paso se enciende al llegar al centro */
.steps{display:grid;grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr);gap:56px;align-items:start}
.steps-side{position:sticky;top:120px}
.steps-rail{position:relative;margin-top:30px;height:150px;width:8px;border:2px solid var(--ink);border-radius:99px;overflow:hidden;background:var(--card)}
.steps-rail i{position:absolute;inset:0;background:var(--coral);transform-origin:50% 0;transform:scaleY(var(--p,0))}
.step{--c:var(--lemon);display:grid;grid-template-columns:auto 1fr;gap:20px;padding:26px;margin-bottom:28px;border:3px solid var(--ink);border-radius:26px;background:var(--card);box-shadow:5px 5px 0 var(--ink);
  opacity:.45;transform:scale(.97);transition:opacity 400ms var(--ease-out),transform 400ms var(--ease-out),background .3s}
.step.is-active{opacity:1;transform:none;background:color-mix(in srgb,var(--c) 28%,var(--card))}
.step .num{width:58px;height:58px;border-radius:17px;border:3px solid var(--ink);background:var(--c);display:grid;place-items:center;font-weight:800;font-size:1.6rem}
.step h3{font-size:1.5rem;letter-spacing:-.03em;margin-bottom:6px}
.step p{color:var(--ink-soft);font-size:1.02rem}
@media (max-width:860px){.steps{grid-template-columns:1fr;gap:30px}.steps-side{position:static}.steps-rail{display:none}.step{opacity:1;transform:none}}

/* filtros y lista completa */
.chips{display:flex;gap:10px;flex-wrap:wrap;margin:0 0 22px}
.chip{min-height:44px;padding:0 18px;border:3px solid var(--ink);border-radius:999px;background:var(--card);font-weight:700;cursor:pointer;box-shadow:2px 2px 0 var(--ink);transition:transform 160ms var(--ease-out),box-shadow 160ms var(--ease-out),background .2s,color .2s}
.chip:hover{transform:translate(-1px,-2px);box-shadow:4px 5px 0 var(--ink)}
.chip:active{transform:translate(1px,1px) scale(.97);box-shadow:0 0 0 var(--ink)}
.chip[aria-pressed="true"]{background:var(--ink);color:var(--paper)}
.empty{padding:40px;text-align:center;color:var(--ink-soft)}
.empty[hidden]{display:none}
.more{display:flex;justify-content:center;margin:14px 0 6px}
.more[hidden],#more[hidden]{display:none}

/* por qué */
.why{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:20px}
.why div{background:var(--card);border:3px solid var(--ink);border-radius:22px;padding:26px;box-shadow:4px 4px 0 var(--ink);transition:transform 200ms var(--ease-out),box-shadow 200ms var(--ease-out)}
@media (hover:hover) and (pointer:fine){.why div:hover{transform:translate(-2px,-3px);box-shadow:7px 8px 0 var(--ink)}}
.why h3{font-size:1.25rem;margin-bottom:6px}
.why p{color:var(--ink-soft);font-size:.98rem}

/* preguntas frecuentes de la portada */
.faq-home{display:grid;gap:12px;max-width:820px}
.faq-home details{border:3px solid var(--ink);border-radius:20px;background:var(--card);padding:0 22px;box-shadow:3px 3px 0 var(--ink);transition:box-shadow 160ms var(--ease-out)}
.faq-home details[open]{box-shadow:6px 6px 0 var(--ink);background:color-mix(in srgb,var(--lemon) 22%,var(--card))}
.faq-home summary{cursor:pointer;font-weight:800;font-size:1.1rem;min-height:62px;display:flex;align-items:center;justify-content:space-between;gap:14px;list-style:none}
.faq-home summary::-webkit-details-marker{display:none}
.faq-home summary::after{content:"+";font-size:1.7rem;line-height:1;flex:none;transition:transform 250ms var(--ease-out)}
.faq-home details[open] summary::after{transform:rotate(45deg)}
.faq-home details p{padding:0 0 20px;color:var(--ink-soft);font-size:1.02rem;max-width:42em}

/* cierre */
.cta{position:relative;isolation:isolate;overflow:hidden;margin:110px 0 90px;border:3px solid var(--ink);border-radius:36px;background:var(--lemon);color:var(--on-color);padding:clamp(34px,7vw,84px) clamp(20px,5vw,60px);text-align:center;box-shadow:9px 9px 0 var(--ink)}
.cta h2{font-size:clamp(2.2rem,7vw,5rem);font-weight:800;text-transform:uppercase;letter-spacing:-.055em;line-height:.92}
.cta p{margin:18px auto 28px;max-width:34em;font-size:1.15rem;opacity:.85}
.cta .btns{justify-content:center}
.cta .btn{background:var(--card);color:var(--ink)}
.cta .btn.primary{background:var(--coral);color:var(--on-color)}
.cta .sh{position:absolute;z-index:-1;border:3px solid #151515;pointer-events:none;animation:float 8s ease-in-out infinite}
.cta .sh1{width:110px;height:110px;border-radius:30px;background:var(--coral);left:-24px;top:-24px;--rot:12deg}
.cta .sh2{width:80px;height:80px;border-radius:50%;background:var(--mint);right:6%;bottom:-26px;animation-delay:-3s}
.cta .sh3{width:70px;height:70px;border-radius:18px;background:var(--sky);right:-20px;top:22%;animation-delay:-5s}
.cta .sh1{transform:rotate(12deg)}

/* anuncios */
.ad{margin:26px 0;border:3px dashed var(--ink-soft);border-radius:14px;min-height:100px;display:grid;place-items:center;color:var(--ink-soft);font-family:var(--mono);font-size:.78rem;text-transform:uppercase;letter-spacing:.1em;text-align:center;padding:10px}
.ad.tall{min-height:280px}

/* pie */
footer{border-top:4px solid var(--ink);margin-top:0;padding:30px 0 44px;background:var(--paper-2);color:var(--ink-soft);position:relative}
footer .cols{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:24px}
footer h3{color:var(--ink);font-size:1rem;margin-bottom:8px}
footer ul{list-style:none;padding:0;display:grid;gap:4px}
footer a{text-decoration:none} footer a:hover{text-decoration:underline}
footer .copy{margin-top:24px;font-size:.9rem}
body[data-page="tool"] footer,body[data-page="static"] footer{margin-top:50px}

/* ---------- 404 y páginas de texto: titular de siempre ---------- */
.hero{padding:clamp(24px,6vw,72px) 0 28px}
.hero h1{font-size:clamp(3rem,13vw,9.5rem);line-height:.86;letter-spacing:-.06em;font-weight:800;text-transform:uppercase}
.hero h1 span{display:inline-block;padding:0 .12em;border:4px solid var(--ink);border-radius:.18em;box-shadow:var(--shadow);margin-left:.05em;color:var(--on-color);transform:rotate(-2.5deg)}
.hero h1 .a{background:var(--lemon)} .hero h1 .b{background:var(--mint);transform:rotate(1.8deg)}
.hero p{max-width:34em;margin-top:22px;font-size:clamp(1.05rem,2.4vw,1.35rem);color:var(--ink-soft)}

/* ---------- página de herramienta ---------- */
.crumb{margin:18px 0 6px}
.thead{display:flex;gap:18px;align-items:center;flex-wrap:wrap;margin:10px 0 24px}
.thead .ico{width:72px;height:72px;border:4px solid var(--ink);border-radius:20px;display:grid;place-items:center;box-shadow:var(--shadow-sm);transform:rotate(-5deg);background:var(--c)}
.thead .ico svg{width:38px;height:38px;stroke:#151515;fill:none;stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round}
.thead h1{font-size:clamp(1.9rem,5.5vw,3.4rem);letter-spacing:-.05em;line-height:1.02}
.thead p{color:var(--ink-soft);max-width:40em}
.layout{display:grid;grid-template-columns:minmax(0,1fr) 300px;gap:30px;align-items:start}
.panel{background:var(--card);border:4px solid var(--ink);border-radius:var(--radius);box-shadow:var(--shadow);padding:clamp(18px,3vw,32px)}
.side h3{font-size:1.1rem;margin-bottom:10px}
.side ul{list-style:none;padding:0;display:grid;gap:8px}
.side li a{display:block;padding:10px 14px;border:3px solid var(--ink);border-radius:12px;background:var(--card);text-decoration:none;font-weight:600;transition:transform 160ms var(--ease-out),background .15s}
.side li a:hover{transform:translateX(5px);background:var(--lemon);color:var(--on-color)}
.info{margin:34px 0;max-width:46em}
.info h2{font-size:1.5rem;margin:0 0 8px;letter-spacing:-.02em}
.info p{color:var(--ink-soft)}
.info ul{padding-left:1.2em;display:grid;gap:10px;color:var(--ink-soft)}
.faq{margin-top:26px;display:grid;gap:10px}
.faq details{border:3px solid var(--ink);border-radius:14px;background:var(--card);padding:0 16px}
.faq summary{cursor:pointer;font-weight:600;min-height:48px;display:flex;align-items:center}
.faq details p{padding:0 0 14px}
@media (max-width:860px){.layout{grid-template-columns:1fr}}

/* controles */
.f{display:grid;gap:16px}
.row{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:14px}
.f label{display:grid;gap:6px;font-weight:600;font-size:.95rem}
.f input[type=text],.f input[type=number],.f input[type=date],.f input[type=datetime-local],.f select,.f textarea{
  width:100%;min-height:48px;padding:10px 14px;border:3px solid var(--ink);border-radius:12px;background:var(--paper);font-size:1rem}
.f textarea{min-height:170px;resize:vertical;font-family:var(--mono);font-size:.95rem}
.f input[type=range]{width:100%;accent-color:var(--coral);height:30px}
.f input[type=color]{width:100%;height:60px;border:3px solid var(--ink);border-radius:12px;background:var(--paper);padding:3px;cursor:pointer}
.mini{width:6.5em;min-height:40px;border:3px solid var(--ink);border-radius:10px;padding:0 8px;background:var(--paper)}
.check{display:flex!important;align-items:center;gap:10px;min-height:44px;cursor:pointer;font-weight:500!important}
.check input{width:22px;height:22px;accent-color:var(--ink)}
.btns{display:flex;gap:10px;flex-wrap:wrap}
.out{font-family:var(--mono);background:var(--ink);color:var(--paper);border-radius:14px;padding:16px 18px;word-break:break-all;font-size:1.1rem;min-height:56px}
.stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(130px,1fr));gap:12px}
.stat{border:3px solid var(--ink);border-radius:14px;padding:12px 14px;background:var(--paper)}
.stat b{display:block;font-size:2rem;letter-spacing:-.04em;line-height:1.1}
.stat span{font-size:.82rem;color:var(--ink-soft);text-transform:uppercase;letter-spacing:.06em;font-family:var(--mono)}
.big{font-size:clamp(2.4rem,9vw,4.6rem);font-weight:800;letter-spacing:-.05em;line-height:1}
.bar{height:16px;border:3px solid var(--ink);border-radius:99px;overflow:hidden;background:var(--paper)}
.bar i{display:block;height:100%;width:0;background:var(--coral);transition:width .3s,background .3s}
.swatches{display:flex;border:3px solid var(--ink);border-radius:14px;overflow:hidden;height:70px}
.swatches button{flex:1;border:0;cursor:pointer;font-family:var(--mono);font-size:.7rem}
.toast{position:fixed;bottom:22px;left:50%;transform:translate(-50%,120px);background:var(--ink);color:var(--paper);padding:12px 22px;border-radius:99px;font-weight:600;transition:transform .3s var(--spring);z-index:300}
.toast.on{transform:translate(-50%,0)}
.wheelbox{position:relative;width:min(360px,100%);margin:0 auto}
.wheelbox canvas{width:100%;height:auto;border:4px solid var(--ink);border-radius:50%;transition:transform 4.5s cubic-bezier(.12,.8,.1,1)}
.pointer{position:absolute;top:-14px;left:50%;transform:translateX(-50%);width:0;height:0;border:16px solid transparent;border-top:30px solid var(--ink);border-bottom:0;z-index:2}
.dice{display:flex;gap:12px;flex-wrap:wrap}
.die{min-width:70px;height:70px;padding:0 10px;display:grid;place-items:center;border:4px solid var(--ink);border-radius:16px;background:var(--lemon);color:var(--on-color);font-weight:800;font-size:1.8rem;box-shadow:var(--shadow-sm)}
.die.roll{animation:roll .5s}
@keyframes roll{0%{transform:rotate(0) scale(.6)}60%{transform:rotate(300deg) scale(1.15)}100%{transform:rotate(360deg) scale(1)}}
.err{color:#d6301a;font-weight:600}
:root[data-theme="dark"] .err{color:#ff8a73}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .err{color:#ff8a73}}

/* tests y juegos (dentro de su página) */
.typebox{position:relative;height:8.6em;overflow:hidden;border:3px solid var(--ink);border-radius:14px;background:var(--paper);padding:10px 14px;font-family:var(--mono);font-size:1.2rem;line-height:2.1;cursor:text}
.typebox .w{padding:2px 4px;border-radius:6px}
.typebox .w.cur{background:var(--lemon);color:var(--on-color)}
.typebox .w.cur.typo{background:#ff9a85}
.typebox .w.ok{color:#1c8a5a}
.typebox .w.bad{color:#d6301a;text-decoration:line-through}
:root[data-theme="dark"] .typebox .w.ok{color:#5be3a6}
:root[data-theme="dark"] .typebox .w.bad{color:#ff8a73}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .typebox .w.ok{color:#5be3a6}:root:not([data-theme="light"]) .typebox .w.bad{color:#ff8a73}}
.rbox{display:grid;place-items:center;text-align:center;min-height:260px;padding:20px;border:4px solid var(--ink);border-radius:var(--radius);font-weight:800;font-size:clamp(1.3rem,4vw,2rem);cursor:pointer;user-select:none;-webkit-user-select:none;touch-action:manipulation;box-shadow:var(--shadow-sm);color:var(--on-color);transition:background .25s}
.rbox.idle{background:var(--sky)}.rbox.wait{background:var(--coral)}.rbox.go{background:var(--mint)}.rbox.early{background:var(--lemon)}.rbox.result{background:var(--lilac)}
.mgrid{display:grid;grid-template-columns:1fr 1fr;gap:14px;max-width:360px;margin:0 auto;width:100%}
.mbtn{min-height:120px;border:4px solid var(--ink);border-radius:18px;cursor:pointer;opacity:.55;box-shadow:var(--shadow-sm);transition:opacity .1s,transform .1s}
.mbtn.lit{opacity:1;transform:scale(1.05)}
.mbtn:active{transform:scale(.97)}


/* ================= portada inmersiva ================= */

/* pantalla de carga: contador grande y telón que sube (solo la primera vez de cada visita) */
.intro{position:fixed;inset:0;z-index:500;display:none;align-items:flex-end;justify-content:space-between;padding:clamp(18px,4vw,44px);background:var(--ink);color:var(--paper)}
.js:not(.no-intro) .intro{display:flex;animation:introOut .85s var(--ease-in-out) 8s forwards} /* seguridad: se va sola a los 8 s */
.js:not(.no-intro) .intro.go{animation:introOut .85s var(--ease-in-out) forwards}
@keyframes introOut{to{transform:translateY(-101%);visibility:hidden}}
.intro-logo,.intro-count{font-size:clamp(3.4rem,13vw,10rem);font-weight:800;letter-spacing:-.06em;line-height:.8;font-variant-numeric:tabular-nums}
.intro-logo b{color:var(--lemon)}
.intro-count::after{content:"%";font-size:.45em;margin-left:.08em;opacity:.7}
/* el texto del hero espera a que suba el telón */
.js:not(.no-intro) body[data-page="home"]{--d0:1250ms}

/* escena 3D detrás del titular */
.hero2{position:relative;min-height:min(86vh,760px)}
.hero2>.hero-copy{position:relative;z-index:2}
.hero-gl{position:absolute;top:0;bottom:0;left:50%;width:100vw;margin-left:-50vw;height:100%;z-index:0;pointer-events:none;opacity:0;transition:opacity .9s var(--ease-out)}
.hero-gl.on{opacity:1}
.hero2.webgl-on .stack{display:none}

/* grano de película (muy sutil) */
.grain{position:absolute;top:-60px;bottom:-60px;left:50%;width:calc(100vw + 120px);margin-left:calc(-50vw - 60px);z-index:4;pointer-events:none;opacity:.1;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 .6 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  animation:grain 1.2s steps(1) infinite}
@keyframes grain{0%{transform:translate3d(0,0,0)}20%{transform:translate3d(-24px,18px,0)}40%{transform:translate3d(20px,-30px,0)}60%{transform:translate3d(-14px,-8px,0)}80%{transform:translate3d(30px,22px,0)}}

/* mascota con ojos que siguen al cursor */
.mascot{position:absolute;right:max(2%,12px);bottom:30px;z-index:3;width:94px;height:94px;border:4px solid var(--ink);border-radius:30px;background:var(--lemon);box-shadow:var(--shadow-sm);
  display:flex;align-items:center;justify-content:center;gap:8px;transform:rotate(-8deg);pointer-events:none}
.eye{width:28px;height:36px;border:3px solid #151515;border-radius:50%;background:#fff;display:grid;place-items:center;overflow:hidden;animation:blink2 5.5s infinite}
.eye i{width:12px;height:15px;border-radius:50%;background:#151515;transform:translate(var(--ex,0px),var(--ey,0px))}
.eye:nth-child(2){animation-delay:.05s}
@keyframes blink2{0%,93%,100%{transform:scaleY(1)}96.5%{transform:scaleY(.08)}}

/* texto circular que gira */
.badge-spin{position:absolute;right:calc(max(2%,12px) + 128px);bottom:14px;z-index:3;width:134px;height:134px;display:grid;place-items:center;text-decoration:none;color:var(--ink)}
.badge-spin svg{position:absolute;inset:0;width:100%;height:100%;animation:spin 20s linear infinite}
.badge-spin text{font-family:var(--font);font-weight:800;font-size:10.5px;fill:currentColor;text-transform:uppercase}
.badge-spin .arr{width:48px;height:48px;border:3px solid var(--ink);border-radius:50%;background:var(--coral);color:var(--on-color);display:grid;place-items:center;font-weight:800;font-size:1.25rem;transition:transform 200ms var(--ease-out)}
@media (hover:hover) and (pointer:fine){.badge-spin:hover .arr{transform:translateY(4px) scale(1.1)}}
.badge-spin:active .arr{transform:scale(.94)}
@keyframes spin{to{transform:rotate(360deg)}}
@media (max-width:960px){.mascot,.badge-spin{display:none}}


/* el titular espera al telón de carga */
.hero2 h1 .w{animation-delay:calc(var(--i)*60ms + 80ms + var(--d0,0ms))}
.hero2 h1 span.a,.hero2 h1 span.b{animation-delay:calc(var(--i)*60ms + 80ms + var(--d0,0ms))}
.hero2 .eyebrow{animation-delay:var(--d0,0ms)}
.hero2 .lead{animation-delay:calc(.55s + var(--d0,0ms))}
.hero2 .search{animation-delay:calc(.7s + var(--d0,0ms))}
.hero2 .hero-links{animation-delay:calc(.85s + var(--d0,0ms))}

@media (prefers-reduced-motion:reduce){
  .intro,.cursor,.grain{display:none!important}
  .badge-spin svg{animation:none}
}

/* ---------- scroll: barra, texto gigante, cta ---------- */
.sbar{position:fixed;left:0;top:0;height:4px;width:100%;background:var(--ink);transform:scaleX(0);transform-origin:0 50%;z-index:90;pointer-events:none}
.hero-copy{will-change:transform,opacity}
.bigtype{overflow:hidden;padding:56px 0 24px;position:relative;z-index:2}
.bt-row{white-space:nowrap;font-weight:800;text-transform:uppercase;letter-spacing:-.05em;line-height:.95;font-size:clamp(3.4rem,11vw,9.5rem)}
.bt-row span{display:inline-block;will-change:transform}
.bt-row i{font-style:normal;color:var(--lemon);-webkit-text-stroke:3px var(--ink);font-size:.6em;vertical-align:.12em}
.bt-row.o{color:transparent;-webkit-text-stroke:3px var(--ink)}
.bt-row.o i{-webkit-text-stroke:3px var(--ink)}
.js .cta[data-rv],.js .cta[data-rv].in{opacity:1;transform:scale(calc(.92 + var(--p,1)*.08));transform-origin:50% 100%;transition:none}
@media (max-width:640px){.bt-row{-webkit-text-stroke-width:0}.bt-row.o{-webkit-text-stroke-width:2px}}
@media (prefers-reduced-motion: reduce){.sbar{display:none}.cta{transform:none}.bt-row span{transform:none!important}}

/* ---------- adaptación a pantallas pequeñas ---------- */
@media (max-width:860px){.nav-link{display:none}}
@media (max-width:640px){.cmd-label,.cmd-btn kbd,.theme-label{display:none}.hdr-in{gap:6px}.logo{font-size:1.45rem}.logo i{--ls:40px}.lang summary span{display:none}
  .hdr-actions{gap:8px}.hdr-actions .btn.small{padding:0 11px;min-width:42px;justify-content:center}.nav{margin-left:0}.nav-btn{padding:0 8px;font-size:.92rem}}
@media (max-width:420px){.logo span{display:none}}

/* transición suave entre páginas (donde el navegador la soporta) */
@view-transition{navigation:auto}
::view-transition-old(root),::view-transition-new(root){animation-duration:.2s}

/* movimiento reducido: menos y más suave, nunca ocultar contenido */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;animation-delay:0s!important;transition-duration:.01ms!important;transition-delay:0s!important;scroll-behavior:auto!important}
  .js [data-rv],.js [data-stagger]:not(.in)>*{opacity:1!important;transform:none!important}
  .js [data-rv="clip"]{clip-path:none!important}
  .tape div{animation:none!important}
  .step{opacity:1;transform:none}
}

/* móvil: sin escena 3D, sin desbordes laterales */
html{overflow-x:clip}
@media (max-width:960px){.hero-gl{display:none}.hero2.webgl-on .stack{display:none}.hero2{min-height:0;padding-bottom:28px}.hero-copy{max-width:100%;min-width:0}.tape{width:100%;margin-left:0}.bigtype{padding-top:36px}.sbar{height:3px}}

/* ---------- portada 3D por capítulos ---------- */
.gl3d{position:fixed;inset:0;width:100%;height:100%;z-index:0;pointer-events:none;opacity:0;transition:opacity 1s var(--ease-out)}
.gl3d.on{opacity:1}
.bgfx{position:fixed;inset:0;z-index:0;pointer-events:none;background:color-mix(in oklab,var(--bgc,var(--paper)) 26%,var(--paper));opacity:0;transition:opacity .7s var(--ease-out)}
.bgfx.on{opacity:.85}
body[data-page="home"] main,body[data-page="home"] footer{position:relative;z-index:1}
html.gl-on .stack,html.gl-on .chap-fb{display:none}

.hero-search{flex:1 1 280px;display:flex;align-items:center;gap:10px;min-height:54px;padding:0 14px 0 18px;border:3px solid var(--ink);border-radius:999px;background:var(--card);color:var(--ink-soft);font:inherit;font-size:1rem;text-align:left;cursor:pointer;box-shadow:var(--shadow-sm);transition:transform 160ms var(--ease-out),box-shadow 160ms var(--ease-out)}
.hero-search svg{width:20px;height:20px;flex:none;color:var(--ink)}
.hero-search span{flex:1;min-width:0;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}
.hero-search kbd{font-family:var(--mono);font-size:.75rem;border:2px solid var(--ink);border-radius:8px;padding:2px 6px;color:var(--ink)}
@media (hover:hover) and (pointer:fine){.hero-search:hover{transform:translate(-2px,-2px);box-shadow:5px 5px 0 var(--ink)}}
.hero-search:active{transform:scale(.98)}

.chap{position:relative;height:230vh}
.chap-in{position:sticky;top:0;height:100vh;height:100svh;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);align-items:center;gap:30px}
.chap-txt{position:relative;z-index:2;max-width:580px;padding-top:60px}
.chap-num{display:inline-block;font-family:var(--mono);font-size:.95rem;letter-spacing:.08em;border:2px solid var(--ink);border-radius:999px;padding:4px 12px;background:var(--card);box-shadow:var(--shadow-sm)}
.chap-num small{color:var(--ink-soft);font-size:inherit}
.chap-h{margin-top:18px;font-size:clamp(3rem,8vw,7.2rem);font-weight:800;text-transform:uppercase;letter-spacing:-.055em;line-height:.9}
.chap-h .ln{display:block;overflow:hidden;padding:0 .12em .12em 0}
.chap-h .ln>span{display:inline-block}
.chap-h .ln:nth-child(2)>span{background:var(--c);color:var(--on-color);padding:0 .12em;border:3px solid var(--ink);border-radius:.14em;box-shadow:var(--shadow-sm)}
.chap-p{margin-top:18px;font-size:clamp(1.05rem,1.6vw,1.25rem);color:var(--ink-soft);max-width:30em}
.chap-tools{list-style:none;padding:0;margin-top:24px;display:flex;flex-wrap:wrap;gap:10px}
.chap-tools a{display:inline-flex;align-items:center;gap:8px;min-height:44px;padding:0 14px;border:3px solid var(--ink);border-radius:999px;background:var(--card);color:var(--ink);font-weight:700;text-decoration:none;box-shadow:var(--shadow-sm);transition:transform 160ms var(--ease-out),box-shadow 160ms var(--ease-out),background-color .15s ease}
.chap-tools svg{width:18px;height:18px;flex:none}
.chap-tools b{opacity:.6}
@media (hover:hover) and (pointer:fine){.chap-tools a:hover{background:var(--c);color:var(--on-color);transform:translate(-2px,-2px);box-shadow:5px 5px 0 var(--ink)}}
.chap-tools a:active{transform:scale(.97)}
.chap-fb{justify-self:center;width:min(300px,60vw);aspect-ratio:1;display:grid;place-items:center;border:4px solid var(--ink);border-radius:36%;background:var(--c);box-shadow:var(--shadow);transform:rotate(-6deg)}
.chap-fb svg{width:44%;height:44%;color:var(--on-color)}
.chap-ghost{position:absolute;right:var(--gutter);bottom:4vh;font-weight:800;font-size:clamp(7rem,22vw,20rem);line-height:.8;letter-spacing:-.06em;color:transparent;-webkit-text-stroke:2px var(--ink);opacity:.16;pointer-events:none;transform:translate3d(0,calc((var(--q,.5) - .5) * -40vh),0)}

.js .chap-h .ln>span{transform:translate3d(0,112%,0);transition:transform .9s var(--ease-out) calc(var(--i)*90ms)}
.js .chap-num,.js .chap-p{opacity:0;transform:translate3d(0,18px,0);transition:opacity .6s var(--ease-out),transform .6s var(--ease-out)}
.js .chap-tools li{opacity:0;transform:translate3d(0,14px,0);transition:opacity .5s var(--ease-out) calc(.3s + var(--k)*60ms),transform .5s var(--ease-out) calc(.3s + var(--k)*60ms)}
.js .chap.on .chap-h .ln>span,.js .chap.on .chap-num,.js .chap.on .chap-p,.js .chap.on .chap-tools li{opacity:1;transform:none}
.js .chap.on .chap-p{transition-delay:.18s}

.finale{position:relative;min-height:100vh;display:grid;place-items:center;text-align:center;padding:100px 0}
.fin-in{position:relative;z-index:2;display:grid;justify-items:center}
.finale h2{font-size:clamp(2.6rem,8vw,7rem);font-weight:800;text-transform:uppercase;letter-spacing:-.055em;line-height:.9}
.finale h2 .ln{display:block;overflow:hidden;padding:0 .1em .08em}
.finale h2 .ln>span{display:inline-block}
.finale h2 .ln:nth-child(2)>span{color:transparent;-webkit-text-stroke:3px var(--ink)}
.finale p{margin-top:20px;font-size:clamp(1.05rem,1.8vw,1.3rem);color:var(--ink-soft)}
.finale .btns{margin-top:28px;display:flex;gap:12px;flex-wrap:wrap;justify-content:center}
.finale .btns svg{width:20px;height:20px}
.js .finale h2 .ln>span{transform:translate3d(0,112%,0);transition:transform .9s var(--ease-out) calc(var(--i)*100ms)}
.js .finale.on h2 .ln>span{transform:none}

@media (max-width:760px){
  .chap{height:200vh}
  .chap-in{grid-template-columns:1fr;align-content:end;padding-bottom:6vh}
  .chap-txt{padding-top:0}
  .chap-h{font-size:clamp(2.5rem,12.5vw,4.2rem)}
  .chap-tools a{min-height:40px;padding:0 12px;font-size:.92rem}
  .chap-fb{position:absolute;top:13vh;left:50%;width:44vw;margin-left:-22vw}
  .chap-ghost{right:auto;left:var(--gutter);top:11vh;bottom:auto;font-size:8rem}
  html.gl-on .hero2{min-height:calc(100svh - 70px);align-content:end}
}
@media (prefers-reduced-motion:reduce){
  .chap{height:auto}.chap-in{position:relative;height:auto;padding:80px 0}.finale{min-height:0}
  .js .chap-h .ln>span,.js .finale h2 .ln>span,.js .chap-tools li,.js .chap-num,.js .chap-p{opacity:1;transform:none}
  .chap-ghost{transform:none}
}
.hero-search svg,.finale .btns svg,.chap-tools svg,.chap-fb svg{fill:none;stroke:currentColor;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}
/* que el capítulo quepa también en pantallas bajas */
.chap-h{font-size:min(clamp(3rem,8vw,7.2rem),12.5vh)}
.chap-txt{padding-top:74px}
@media (max-height:760px) and (min-width:761px){.chap-p{margin-top:12px;font-size:1rem}.chap-tools{margin-top:16px;gap:8px}.chap-tools a{min-height:40px}}
.chap-in{grid-template-columns:minmax(0,1.3fr) minmax(0,.7fr)}
.chap-txt{max-width:680px}
.chap-h{font-size:min(clamp(2.8rem,6.4vw,6.4rem),12vh)}
.chap-h .ln>span{white-space:nowrap}
@media (max-width:760px){.chap-in{grid-template-columns:1fr}.chap-h{font-size:clamp(2.3rem,11.5vw,4rem)}}
@media (hover:none){.hero-search kbd{display:none}}

/* ---------- mundo de la portada (scroll-world) ---------- */
.world{--sw-bg:var(--paper);--sw-ink:var(--ink);--sw-ink-soft:var(--ink-soft);--sw-accent:var(--coral);
  --sw-font-display:var(--font);--sw-font-body:var(--font)}
body[data-page="home"] main{position:relative}
body[data-page="home"] footer{position:relative;z-index:70}
/* antes de que arranque el motor, los textos no se ven sueltos */
.js .world>.sw-copy{visibility:hidden}
/* sin JavaScript: los textos se leen como una página normal */
html:not(.js) .world>.sw-copy{max-width:640px;margin:48px auto;padding:0 var(--gutter)}
.world .sw-copy__title{font-weight:800;letter-spacing:-.035em}
.world h1.sw-copy__title{font-size:clamp(2.3rem,5vw,4.2rem)}
.world .sw-btn{font-family:var(--font);font-size:1rem;cursor:pointer;border:0}
.world .sw-btn--ghost{background:color-mix(in srgb,#fff 70%,transparent)}
@media (max-width:640px){.world .sw-copy__links a{font-size:.8rem;padding:7px 12px}}
.world .sw-btn--primary{color:var(--paper);background:var(--ink)}
.world .sw-btn--ghost{color:var(--ink)}