/* Página de Pieza. Espacio (secciones oscuras) + papel lavanda (secciones claras). Sin fuentes externas ni imágenes pesadas. */
:root{
  --fondo:#f7f6fb; --tarjeta:#fff; --tinta:#1f1b2e; --suave:#565068; --linea:#e1ddeb;
  --acento:#8f5400; --pieza:#ffb020; --pieza-2:#ffc65a; --pieza-3:#f29e00; --canto:#b36a00; --canto-2:#7a4700;
  --espacio:#15121f; --espacio-2:#1f1b2e; --estrella:#ece8ff; --en-espacio:#efecf7; --en-espacio-suave:#b7b0cc;
  --verde:#17734a; --verde-fondo:#e3f5ec; --gris-fondo:#eeecf3;
  --radio:16px;
  --letra:-apple-system,BlinkMacSystemFont,"Segoe UI Variable","Segoe UI",Inter,Helvetica,Arial,sans-serif;
  --mono:ui-monospace,"SF Mono",SFMono-Regular,"Cascadia Code","JetBrains Mono",Menlo,Consolas,monospace;
}
@media (prefers-color-scheme:dark){:root{
  --fondo:#15121f; --tarjeta:#1e1a2b; --tinta:#efecf7; --suave:#b2abc6; --linea:#302a42; --acento:#ffb020;
  --verde:#5fd69a; --verde-fondo:#163527; --gris-fondo:#272236;
}}
*{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:72px}
body{margin:0;background:var(--fondo);color:var(--tinta);font:16px/1.6 var(--letra);-webkit-font-smoothing:antialiased;overflow-x:clip}
a{color:inherit;text-decoration-color:var(--acento);text-underline-offset:4px}
a:focus-visible,button:focus-visible,summary:focus-visible,[tabindex]:focus-visible{outline:3px solid var(--pieza);outline-offset:3px;border-radius:6px}
code,pre{font-family:var(--mono);font-size:14px}
pre{background:var(--espacio-2);color:#f3f0ff;padding:14px 16px;border-radius:12px;overflow-x:auto;margin:12px 0 0;white-space:pre-wrap;overflow-wrap:anywhere}
p code,li code{background:var(--tarjeta);border:1px solid var(--linea);border-radius:6px;padding:1px 6px}
.oculto{position:absolute;width:0;height:0;overflow:hidden}
.envoltura{max-width:1120px;margin:0 auto;padding:0 20px}
.saltar{position:absolute;left:-999px}.saltar:focus{left:16px;top:12px;z-index:9;background:var(--tarjeta);padding:8px 12px}
h2{font-size:clamp(28px,4vw,44px);letter-spacing:-.03em;line-height:1.05;margin:0}
h3{margin:0;font-size:18px;letter-spacing:-.01em;line-height:1.3}
.nota{color:var(--suave);font-size:15px;max-width:68ch;margin:10px 0 0}
.raya{border-top:1px solid var(--linea);padding:72px 0}
.boton{display:inline-block;background:var(--pieza);color:#1f1b2e;text-decoration:none;font-weight:700;padding:13px 22px;border-radius:12px;border:1px solid var(--pieza)}
.boton:hover{background:var(--pieza-2)}
.boton.secundario{background:transparent;color:inherit;border-color:currentColor}
.boton.secundario:hover{background:color-mix(in srgb,currentColor 10%,transparent)}

/* Barra */
.barra{position:sticky;top:0;z-index:20;background:color-mix(in srgb,var(--espacio) 94%,transparent);backdrop-filter:blur(12px);color:var(--en-espacio);border-bottom:1px solid #2c2640}
.barra-dentro{display:flex;align-items:center;gap:20px;height:60px}
.marca{display:flex;align-items:center;gap:10px;font-weight:800;font-size:18px;text-decoration:none;letter-spacing:-.02em}
.marca img{border-radius:7px}
nav{display:flex;gap:20px;margin-left:auto;font-size:15px}
nav a{text-decoration:none;color:var(--en-espacio-suave)}nav a:hover{color:#fff}
.chico{border:1px solid #3a3352;background:transparent;color:var(--en-espacio);border-radius:999px;padding:6px 12px;font:700 13px var(--letra);cursor:pointer}
.chico:hover{border-color:var(--pieza)}
@media (max-width:820px){nav{display:none}.chico{margin-left:auto}}

/* Espacio: secciones oscuras con estrellas */
.espacio{position:relative;background:var(--espacio);color:var(--en-espacio);overflow-x:clip}
.espacio .nota.clara{color:var(--en-espacio-suave)}
.como,.manifiesto{background-color:var(--espacio);
  background-image:radial-gradient(1px 1px at 12% 18%,#fff8 50%,transparent 51%),radial-gradient(1px 1px at 76% 9%,#fff7 50%,transparent 51%),
  radial-gradient(1.5px 1.5px at 41% 64%,#fff6 50%,transparent 51%),radial-gradient(1px 1px at 88% 52%,#fff8 50%,transparent 51%),
  radial-gradient(1px 1px at 23% 83%,#fff5 50%,transparent 51%),radial-gradient(1.5px 1.5px at 63% 30%,#ffd98a88 50%,transparent 51%),
  radial-gradient(1px 1px at 5% 47%,#fff6 50%,transparent 51%),radial-gradient(1px 1px at 52% 92%,#fff6 50%,transparent 51%);
  background-size:520px 520px}

/* Portada */
.portada{min-height:min(860px,calc(100svh - 60px));display:flex;align-items:center;padding:56px 0;
  background:radial-gradient(ellipse 70% 60% at 72% 45%,#2b2142 0%,transparent 70%),var(--espacio)}
.estrellas{position:absolute;inset:0;width:100%;height:100%;display:block}
.portada-dentro{position:relative;display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,1fr);gap:32px;align-items:center;width:100%}
.antetitulo{margin:0;color:var(--pieza);font-weight:700;font-size:15px}
h1{font-size:clamp(40px,5.6vw,68px);line-height:1;letter-spacing:-.045em;margin:14px 0 0;max-width:14ch;font-weight:800}
.bajada{font-size:clamp(17px,1.8vw,20px);color:var(--en-espacio-suave);max-width:52ch;margin:22px 0 0}
.acciones{display:flex;flex-wrap:wrap;gap:12px;margin:30px 0 0}
.cifras{display:flex;flex-wrap:wrap;gap:10px 30px;margin:36px 0 0;padding:18px 0 0;border-top:1px solid #2f2944}
.cifras div{display:flex;align-items:baseline;gap:8px}
.cifras strong{font-size:34px;letter-spacing:-.03em;line-height:1;color:var(--pieza);font-variant-numeric:tabular-nums}
.cifras span{color:var(--en-espacio-suave);font-size:14px}
.construccion{margin:16px 0 0;font-size:14px;color:var(--en-espacio-suave);max-width:56ch}
.construccion a{color:var(--pieza);font-weight:600}

/* Rompecabezas 3D de la portada */
.escena{--c:clamp(84px,10vw,124px);display:grid;place-items:center;perspective:1300px;min-height:calc(var(--c) * 4.2)}
.flota{transform-style:preserve-3d}
.armado{position:relative;width:calc(var(--c) * 3);height:calc(var(--c) * 3);transform-style:preserve-3d;transform:rotateX(38deg) rotateY(-12deg) rotateZ(-8deg)}
.pz{position:absolute;width:calc(var(--c) * 1.5);height:calc(var(--c) * 1.5);left:calc(var(--c) * (var(--col) - .25));top:calc(var(--c) * (var(--fila) - .25));transform-style:preserve-3d}
.pz svg{position:absolute;inset:0;width:100%;height:100%;overflow:visible}
.pz .cara{fill:var(--cara,var(--pieza));stroke:#1f1b2e;stroke-width:1.2;stroke-opacity:.35}
.pz .canto{fill:var(--canto)}
.pz .k1{transform:translateZ(-4px)}.pz .k2{transform:translateZ(-8px)}.pz .k3{transform:translateZ(-12px);fill:#9a5a00}.pz .k4{transform:translateZ(-16px);fill:var(--canto-2)}
.pz .rotulo{position:absolute;inset:16.67%;display:grid;place-items:center;text-align:center;font-weight:800;font-size:clamp(11px,1.1vw,14px);line-height:1.1;color:#2a2010;letter-spacing:-.01em;transform:translateZ(1px);padding:4px}
.p0{--col:0;--fila:0;--cara:#ffb020;--x:-38vw;--y:-34vh;--z:380px;--rx:120deg;--ry:-80deg;--rz:-90deg;--d:.1s}
.p1{--col:1;--fila:0;--cara:#ffc04a;--x:4vw;--y:-46vh;--z:260px;--rx:-140deg;--ry:40deg;--rz:60deg;--d:.35s}
.p2{--col:2;--fila:0;--cara:#f7a400;--x:40vw;--y:-36vh;--z:420px;--rx:90deg;--ry:120deg;--rz:30deg;--d:.2s}
.p3{--col:0;--fila:1;--cara:#ffc65a;--x:-44vw;--y:4vh;--z:220px;--rx:-60deg;--ry:-140deg;--rz:120deg;--d:.55s}
.p4{--col:1;--fila:1;--cara:#ffb020;--x:0vw;--y:-6vh;--z:520px;--rx:180deg;--ry:180deg;--rz:-45deg;--d:.9s}
.p5{--col:2;--fila:1;--cara:#ffbb3c;--x:44vw;--y:8vh;--z:240px;--rx:70deg;--ry:-100deg;--rz:-140deg;--d:.45s}
.p6{--col:0;--fila:2;--cara:#f7a400;--x:-36vw;--y:40vh;--z:340px;--rx:-110deg;--ry:60deg;--rz:80deg;--d:.7s}
.p7{--col:1;--fila:2;--cara:#ffc65a;--x:6vw;--y:46vh;--z:300px;--rx:150deg;--ry:-30deg;--rz:-110deg;--d:.6s}
.p8{--col:2;--fila:2;--cara:#ffb020;--x:40vw;--y:38vh;--z:400px;--rx:-80deg;--ry:-160deg;--rz:150deg;--d:.8s}
.destello{position:absolute;inset:-35%;border-radius:50%;background:radial-gradient(circle,#ffe2a0 0%,#ffb02066 28%,transparent 62%);opacity:0;pointer-events:none;transform:translateZ(20px)}
/* La animación parte recién cuando la página terminó de cargar (clase «armar», la pone pagina.js): así no compite con la
   carga y no se salta cuadros. Solo transform y opacity (lo que la tarjeta de video anima sin repintar); sin filtros. */
@media (prefers-reduced-motion:no-preference){
  .js .escena:not(.armar):not(.armada) .pz,.js .escena:not(.armar):not(.armada) .destello{opacity:0}
  .armar .pz{will-change:transform,opacity;animation:llega 1.6s cubic-bezier(.22,.8,.26,1) var(--d) both}
  .armar .destello{animation:destello 1.4s ease-out 2.35s both}
  .armada .flota{animation:flota 9s ease-in-out infinite}
  .quieto .flota{animation-play-state:paused}
}
@keyframes llega{
  0%{transform:translate3d(var(--x),var(--y),var(--z)) rotateX(var(--rx)) rotateY(var(--ry)) rotateZ(var(--rz));opacity:0}
  20%{opacity:1}
  85%{transform:translate3d(0,0,14px) rotateX(0) rotateY(0) rotateZ(0);opacity:1}
  100%{transform:translate3d(0,0,0);opacity:1}
}
@keyframes destello{0%{opacity:0;scale:.6}30%{opacity:.95}100%{opacity:0;scale:1.15}}
@keyframes flota{0%,100%{transform:rotateY(0) translateY(0)}50%{transform:rotateY(10deg) rotateX(-4deg) translateY(-10px)}}

/* Portada en 3D (portada3d.js, WebGL): reemplaza al rompecabezas CSS solo si el contexto se creó (clase «gl»). */
.escena{position:relative}
.pz3d,.consola{display:none}
.escena.gl{display:block;min-height:clamp(480px,48vw,600px)}
.escena.gl .flota{display:none}
.escena.gl::before{content:"";position:absolute;inset:6% 2% 18%;pointer-events:none;
  background:radial-gradient(closest-side,#ffb02024,#ffb0200a 55%,transparent)}
.escena.gl .pz3d{display:block;position:absolute;inset:-8% -7% -2% -5%;width:112%;height:110%;pointer-events:none;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 7%,#000 93%,transparent);mask-image:linear-gradient(90deg,transparent,#000 7%,#000 93%,transparent)}
.escena.gl .consola{display:block;position:absolute;left:0;bottom:0;width:min(372px,88%);
  background:#0d0b14d9;border:1px solid #3a3352;border-radius:12px;box-shadow:0 18px 50px #0009,0 0 0 1px #ffb02012 inset;
  font:12.5px/1.75 var(--mono);color:var(--en-espacio-suave);backdrop-filter:blur(6px)}
.consola-barra{display:flex;align-items:center;gap:6px;margin:0;padding:7px 12px;border-bottom:1px solid #2c2640;font-size:11.5px;color:#8f86ad}
.consola-barra i{width:8px;height:8px;border-radius:50%;background:#3a3352}
.consola-barra i:first-child{background:#ffb02099}
.consola-barra span{margin-left:6px}
.consola ol{list-style:none;margin:0;padding:8px 12px 10px;height:calc(4 * 1.75em + 18px);-webkit-mask-image:linear-gradient(transparent,#000 1.4em);mask-image:linear-gradient(transparent,#000 1.4em);display:flex;flex-direction:column;justify-content:flex-end;overflow:hidden}
.consola li{display:none;flex:none;white-space:nowrap;overflow:hidden}
.consola li.ve{display:block}
.consola li>b{color:var(--pieza);font-weight:700}
.consola .cmd{display:inline-block;vertical-align:top;line-height:inherit;overflow:hidden;white-space:pre;color:#f3f0ff;max-width:calc(var(--n,99) * 1ch)}
.consola em{font-style:normal;color:var(--pieza);opacity:0;margin-left:.6ch}
.consola li.hecha em{opacity:1}
.consola li.corre em{opacity:.55}
.consola li.corre em::before{content:"…";}
.consola li.corre em{font-size:0}.consola li.corre em::before{font-size:12.5px}
.consola .cur{display:none;width:.6em;height:1.15em;margin-left:1px;vertical-align:-3px;background:var(--pieza)}
.consola li.escribe .cur,.consola li.fin .cur{display:inline-block}
.consola li.fin{color:#f3f0ff}
.consola li.fin span{color:var(--pieza-2)}
@media (prefers-reduced-motion:no-preference){.consola .cur{animation:cursor 1.1s steps(1) infinite}}
@media (max-width:820px){
  .escena.gl{min-height:min(420px,108vw);margin:0 -4px}
  .escena.gl .pz3d{inset:-4% -6% 0;width:112%;height:104%;-webkit-mask-image:none;mask-image:none}
  .escena.gl .consola{width:auto;right:0;font-size:11px}
  .consola ol{height:calc(3 * 1.75em + 14px);padding:6px 10px 8px}
  .consola-barra{padding:5px 10px}
  .consola li.corre em::before{font-size:11px}
}

/* Cómo funciona: el relato al bajar */
.como{padding:88px 0 72px}
.relato{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:48px;margin:72px 0 0}
.lamina{position:sticky;top:max(80px,calc(50vh - 240px));align-self:start;display:grid;place-items:center;padding:24px 0}
.tablero{position:relative;width:min(400px,80vw);aspect-ratio:1}
.molde{position:absolute;inset:-8.33%;width:116.67%;height:116.67%;overflow:visible;fill:none;stroke:#6d6390;stroke-width:1.5;stroke-dasharray:5 6;opacity:.35;transition:opacity .6s}
.ficha{position:absolute;width:50%;height:50%;left:calc(33.333% * var(--col) - 8.333%);top:calc(33.333% * var(--fila) - 8.333%);
  transition:transform 1s cubic-bezier(.2,.8,.25,1) var(--d),opacity .6s var(--d),filter .6s}
.ficha svg{width:100%;height:100%;overflow:visible;fill:var(--cara);stroke:#1f1b2e;stroke-opacity:.4;stroke-width:1.2}
.ficha span{position:absolute;inset:16.67%;display:grid;place-items:center;text-align:center;font-weight:800;font-size:clamp(11px,1.4vw,14px);color:#2a2010;line-height:1.1}
.f0{--col:0;--fila:0;--cara:#ffb020;--sx:-16%;--sy:-22%;--sr:-28deg;--d:0s}
.f1{--col:1;--fila:0;--cara:#ffc04a;--sx:6%;--sy:-38%;--sr:22deg;--d:.08s}
.f2{--col:2;--fila:0;--cara:#f7a400;--sx:30%;--sy:-19%;--sr:40deg;--d:.16s}
.f3{--col:0;--fila:1;--cara:#ffc65a;--sx:-38%;--sy:6%;--sr:-50deg;--d:.24s}
.f4{--col:1;--fila:1;--cara:#ffb020;--sx:0%;--sy:8%;--sr:12deg;--d:.32s}
.f5{--col:2;--fila:1;--cara:#ffbb3c;--sx:38%;--sy:-3%;--sr:-35deg;--d:.4s}
.f6{--col:0;--fila:2;--cara:#f7a400;--sx:-25%;--sy:33%;--sr:35deg;--d:.48s}
.f7{--col:1;--fila:2;--cara:#ffc65a;--sx:8%;--sy:41%;--sr:-20deg;--d:.56s}
.f8{--col:2;--fila:2;--cara:#ffb020;--sx:33%;--sy:30%;--sr:55deg;--d:.64s}
.tablero[data-paso="1"] .ficha,.tablero[data-paso="2"] .ficha{transform:translate(var(--sx),var(--sy)) rotate(var(--sr)) scale(.72);opacity:.55}
.tablero[data-paso="2"] .molde{opacity:.9}
.tablero[data-paso="4"] .ficha{filter:drop-shadow(0 0 14px #ffb02055)}
.globo,.ficha-mini,.sello-al-dia{transition:opacity .5s,transform .5s}
.globo{position:relative;margin:0;background:#fff;color:#1f1b2e;border-radius:16px 16px 16px 4px;padding:10px 14px;font-weight:600;font-size:15px;line-height:1.35;max-width:26ch}
.globo-idea{position:absolute;left:-4%;top:-10%;z-index:2;box-shadow:0 10px 30px #0006}
.ficha-mini{position:absolute;right:-6%;bottom:-6%;z-index:2;display:grid;gap:2px;background:var(--espacio-2);border:1px solid #4a4166;border-radius:12px;padding:12px 14px;font-size:13px;color:var(--en-espacio-suave);box-shadow:0 10px 30px #0008}
.ficha-mini b{color:#fff;font-size:14px}
.sello-al-dia{position:absolute;right:0;bottom:-4%;z-index:2;margin:0;background:var(--verde-fondo);color:var(--verde);border:1px solid currentColor;font-weight:800;padding:6px 12px;border-radius:999px;font-size:14px}
@media (prefers-color-scheme:light){.sello-al-dia{background:#163527;color:#5fd69a}}
.tablero:not([data-paso="1"]) .globo-idea{opacity:0;transform:translateY(-8px)}
.tablero:not([data-paso="2"]) .ficha-mini{opacity:0;transform:translateY(8px)}
.tablero:not([data-paso="4"]) .sello-al-dia{opacity:0;transform:scale(.8)}
.pasos-relato{list-style:none;margin:0;padding:0;display:grid;gap:20px}
.pasos-relato li{display:grid;grid-template-columns:auto minmax(0,1fr);column-gap:16px;align-content:center;padding:8px 0}
.pasos-relato .num{grid-row:span 2;display:grid;place-items:center;width:40px;height:40px;border-radius:12px;border:1px solid #4a4166;color:var(--en-espacio-suave);font-weight:800;transition:background .3s,color .3s,border-color .3s}
.pasos-relato h3{font-size:clamp(24px,3vw,34px);letter-spacing:-.03em;line-height:1.1}
.pasos-relato p{margin:10px 0 0;color:var(--en-espacio-suave);font-size:17px;max-width:44ch}
.pasos-relato li.activo .num,.sin-relato .pasos-relato .num{background:var(--pieza);color:#1f1b2e;border-color:var(--pieza)}
.relato-vivo .pasos-relato li{min-height:62vh;opacity:.7;transition:opacity .4s}
.relato-vivo .pasos-relato li.activo{opacity:1}
.por-dentro{margin:48px 0 0;border:1px solid #3a3352;border-radius:var(--radio);padding:14px 18px;max-width:780px}
.por-dentro summary{cursor:pointer;font-weight:700}
.por-dentro dl{margin:12px 0 0}
.por-dentro dt{font-weight:700;margin:12px 0 0}
.por-dentro dd{margin:4px 0 0;color:var(--en-espacio-suave)}
@media (max-width:820px){
  .portada{min-height:auto;padding:28px 0 48px}
  .portada-dentro{grid-template-columns:minmax(0,1fr);gap:8px}
  .escena{--c:clamp(64px,22vw,92px);order:-1;min-height:calc(var(--c) * 3.6)}
  .relato{grid-template-columns:minmax(0,1fr);gap:0}
  .lamina{top:60px;z-index:2;background:linear-gradient(var(--espacio) 84%,transparent);padding:44px 0 30px}
  .tablero{width:min(230px,58vw)}
  .globo-idea{font-size:13px;top:-14%;left:-14%}
  .ficha-mini{font-size:11.5px;padding:8px 10px;right:-18%}
  .relato-vivo .pasos-relato li{min-height:58vh}
}

/* Empezar */
.pregunta{font-size:clamp(20px,2.4vw,26px);font-weight:800;letter-spacing:-.02em;margin:28px 0 0}
.selector{display:flex;flex-wrap:wrap;gap:4px;margin:14px 0 0;padding:4px;border-radius:14px;background:var(--gris-fondo);width:fit-content;max-width:100%}
.selector button{border:0;background:transparent;color:var(--suave);font:700 15px var(--letra);padding:10px 16px;border-radius:10px;cursor:pointer;min-height:44px}
.selector button:hover{color:var(--tinta)}
.selector button[aria-selected="true"]{background:var(--tarjeta);color:var(--tinta);box-shadow:0 1px 2px #0002,0 0 0 1px var(--linea)}
.solo-js{display:none}
.js .solo-js{display:flex}
.js .sin-js{display:none}
.tres{list-style:none;padding:0;margin:28px 0 0;display:grid;grid-template-columns:minmax(0,1.5fr) minmax(0,1fr) minmax(0,1fr);gap:16px}
.tres>li{position:relative;background:var(--tarjeta);border:1px solid var(--linea);border-radius:var(--radio);padding:20px;min-width:0}
.marcador{position:relative;display:grid;place-items:center;width:52px;height:52px;margin:0 0 12px}
.marcador svg{position:absolute;inset:0;width:100%;height:100%;fill:transparent;stroke:var(--acento);stroke-width:5;overflow:visible;transition:fill .4s}
.marcador b{position:relative;font-weight:800;color:var(--acento)}
.tres.copiado .uno .marcador svg{fill:var(--pieza);stroke:var(--pieza)}
.tres.copiado .uno .marcador b{color:#1f1b2e}
@media (prefers-reduced-motion:no-preference){.tres.copiado .uno .marcador{animation:encaja .5s cubic-bezier(.3,1.6,.5,1)}}
@keyframes encaja{0%{transform:scale(.8) rotate(-12deg)}100%{transform:none}}
.panel-ia+.panel-ia{margin-top:20px}
.js .panel-ia+.panel-ia{margin-top:0}
.panel-ia[hidden]{display:none}
.comando{display:flex;align-items:stretch;gap:8px;margin:12px 0 0;background:var(--espacio-2);border-radius:12px;padding:8px 8px 8px 14px}
.comando code{flex:1;min-width:0;color:#f3f0ff;font-size:13.5px;line-height:1.5;align-self:center;overflow-wrap:anywhere;user-select:all}
.copiar{flex:none;border:0;border-radius:9px;background:var(--pieza);color:#1f1b2e;font:800 15px var(--letra);padding:0 18px;min-height:44px;min-width:104px;cursor:pointer}
.copiar:hover{background:var(--pieza-2)}
.copiar.listo{background:#5fd69a}
.detalles{margin:14px 0 0;font-size:15px}
.detalles summary{cursor:pointer;color:var(--suave);font-weight:600}
.detalles p{color:var(--suave);margin:8px 0 0}
.mono-chico{font-family:var(--mono);font-size:13px;overflow-wrap:anywhere}
.descargas{display:flex;flex-wrap:wrap;gap:10px;margin:14px 0 0}
.descargas .boton{color:var(--tinta)}
.descargas .boton:first-child{color:#1f1b2e}
.tres .globo{margin:14px 0 0;background:var(--gris-fondo);color:var(--tinta)}
.ficha-ej{display:grid;gap:4px;margin:14px 0 0;padding:12px 14px;border:1px dashed var(--linea);border-radius:12px;font-size:14px;color:var(--suave)}
.ficha-ej b{justify-self:start;margin-top:6px;background:var(--pieza);color:#1f1b2e;border-radius:8px;padding:4px 12px;font-size:14px}
@media (max-width:900px){.tres{grid-template-columns:minmax(0,1fr)}}
@media (max-width:520px){.comando{flex-direction:column}.copiar{width:100%}.selector button{padding:10px 12px;font-size:14px}}

/* Catálogo */
.filtro{gap:8px;flex-wrap:wrap;margin:20px 0 0}
.filtro button{border:1px solid var(--linea);background:var(--tarjeta);color:var(--tinta);border-radius:999px;padding:8px 16px;min-height:40px;font:700 14px var(--letra);cursor:pointer}
.filtro button[aria-pressed="true"]{background:var(--tinta);color:var(--fondo);border-color:var(--tinta)}
.grupo{margin:32px 0 0}
.grupo h3{font-size:15px;color:var(--suave);font-weight:700}
.piezas{list-style:none;padding:0;margin:12px 0 0;display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:12px}
.piezas li{background:var(--tarjeta);border:1px solid var(--linea);border-radius:var(--radio);padding:16px 18px;min-width:0}
.piezas .cabeza{display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.piezas .cabeza b{font-size:16px;margin-right:auto}
.piezas p{margin:6px 0 0;font-size:14.5px;color:var(--suave)}
.piezas .datos{margin:10px 0 0;font-size:13px;color:var(--suave);display:grid;gap:2px;overflow-wrap:anywhere}
.piezas .repo{font-size:13px;font-weight:600;overflow-wrap:anywhere}
.piezas .aviso{margin:10px 0 0;font-size:13.5px;color:var(--tinta);background:var(--gris-fondo);border-radius:8px;padding:8px 10px}
.etiqueta{font-size:12px;font-weight:700;border-radius:7px;padding:2px 8px;border:1px solid var(--linea);color:var(--suave);white-space:nowrap}
.etiqueta.lista{background:var(--pieza);border-color:var(--pieza);color:#1f1b2e}
.etiqueta.oficial{background:var(--espacio-2);border-color:var(--espacio-2);color:#fff}
@media (prefers-color-scheme:dark){.etiqueta.oficial{background:transparent;border-color:#6d6390;color:var(--tinta)}}
.etiqueta.revisada{background:var(--verde-fondo);border-color:var(--verde);color:var(--verde)}
.etiqueta.sin-revisar{background:var(--gris-fondo);color:var(--suave)}
.vacio-filtro{color:var(--suave);margin:24px 0 0}

/* Proyectos */
.proyectos{list-style:none;padding:0;margin:24px 0 0;display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:14px}
.proyectos li{background:var(--tarjeta);border:1px solid var(--linea);border-radius:var(--radio);padding:18px 20px;display:flex;flex-direction:column;gap:6px}
.proyectos li .etiqueta{align-self:flex-start}
.proyectos .nombre{font-weight:700;overflow-wrap:anywhere}
.proyectos .desc{color:var(--suave);font-size:15px;margin:0}
.proyectos .vacio{grid-column:1/-1;text-align:center;color:var(--suave);border-style:dashed}
.sello-caja{margin:40px 0 0;max-width:720px}
.sello-caja p{margin:8px 0 0}

/* Manifiesto */
.manifiesto{padding:96px 0;font-family:var(--mono)}
.prompt{margin:0;color:#8f86ad;font-size:14px;overflow-wrap:anywhere}
.prompt::after{content:"";display:inline-block;width:.6em;height:1.1em;margin-left:4px;vertical-align:-3px;background:var(--pieza)}
@media (prefers-reduced-motion:no-preference){.prompt::after{animation:cursor 1.1s steps(1) infinite}}
@keyframes cursor{50%{opacity:0}}
.lema{font-family:var(--mono);font-size:clamp(26px,4.2vw,52px);line-height:1.12;letter-spacing:-.04em;font-weight:700;margin:22px 0 0;max-width:24ch;color:#fff}
.man-intro{font-family:var(--letra);color:var(--en-espacio-suave);font-size:18px;max-width:60ch;margin:24px 0 0}
.man-h{font-size:15px;color:var(--pieza);margin:48px 0 0;font-family:var(--mono)}
.ideas{list-style:none;counter-reset:idea;margin:16px 0 0;padding:0;display:grid;gap:4px;max-width:900px}
.ideas li{counter-increment:idea;position:relative;padding:10px 0 10px 56px;border-top:1px solid #2c2640;font-size:15px;line-height:1.6;color:var(--en-espacio-suave)}
.ideas li::before{content:"0" counter(idea);position:absolute;left:0;top:10px;color:var(--pieza);font-weight:700}
.ideas b{color:#fff}
.js .ideas.por-escribir li{clip-path:inset(0 100% 0 0)}
.js .ideas.escribiendo li{animation:escribe .9s steps(30,end) calc(var(--i) * .3s) both}
@keyframes escribe{from{clip-path:inset(0 100% 0 0)}to{clip-path:inset(0 0 0 0)}}
.ideas li:nth-child(1){--i:0}.ideas li:nth-child(2){--i:1}.ideas li:nth-child(3){--i:2}.ideas li:nth-child(4){--i:3}
.ideas li:nth-child(5){--i:4}.ideas li:nth-child(6){--i:5}.ideas li:nth-child(7){--i:6}.ideas li:nth-child(8){--i:7}
.sumate{margin:64px 0 0;font-family:var(--letra)}
.sumate h3{font-family:var(--mono);font-size:clamp(28px,3.6vw,40px);letter-spacing:-.03em;color:var(--pieza)}
.sumate>p{color:var(--en-espacio-suave);font-size:18px;margin:10px 0 0;max-width:56ch}
.caminos-sumate{list-style:none;padding:0;margin:24px 0 0;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px}
.caminos-sumate a{display:grid;align-content:start;gap:6px;height:100%;padding:18px;border:1px solid #3a3352;border-radius:var(--radio);text-decoration:none;background:#1c1829;transition:border-color .2s,background .2s}
.caminos-sumate a:hover{border-color:var(--pieza);background:#241e35}
.caminos-sumate b{color:#fff;font-size:18px}
.caminos-sumate span{color:var(--en-espacio-suave);font-size:14.5px}
.firma{margin:28px 0 0;color:var(--en-espacio-suave);font-size:15px;display:flex;flex-wrap:wrap;gap:8px 20px}
.firma a{color:var(--pieza);font-weight:700}
@media (max-width:900px){.caminos-sumate{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:520px){.caminos-sumate{grid-template-columns:minmax(0,1fr)}.ideas li{padding-left:40px}}

/* Preguntas, principios, pie */
.preguntas{display:grid;gap:10px;margin:24px 0 0;max-width:820px}
.preguntas details{background:var(--tarjeta);border:1px solid var(--linea);border-radius:14px;padding:14px 18px}
.preguntas summary{font-weight:700;cursor:pointer}
.preguntas p{margin:10px 0 0;color:var(--suave)}
.principios{list-style:none;padding:0;margin:24px 0 0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
.principios li{padding:14px 16px 14px 46px;position:relative;background:var(--tarjeta);border:1px solid var(--linea);border-radius:14px}
.principios li::before{content:"";position:absolute;left:14px;top:16px;width:20px;height:20px;background:var(--acento);-webkit-mask:url(img/pieza.svg) center/contain no-repeat;mask:url(img/pieza.svg) center/contain no-repeat}
@media (max-width:700px){.principios{grid-template-columns:minmax(0,1fr)}}
.pie{border-top:1px solid var(--linea);padding:28px 0 40px;color:var(--suave);font-size:14px}

/* Íconos (máscara: toman el color del texto). La ruta llega por CSSOM (--icono), nunca por atributo style. */
.icono{flex:none;display:inline-block;width:24px;height:24px;background:currentColor;
  -webkit-mask:var(--icono,url(img/pieza.svg)) center/contain no-repeat;mask:var(--icono,url(img/pieza.svg)) center/contain no-repeat}
.piezas .cabeza .icono{color:var(--acento);margin-right:2px}
.piezas .cabeza b{margin-right:auto}
.pz .rotulo,.ficha span{grid-template-rows:auto auto;align-content:center;gap:4px}
.pz .rotulo::before,.ficha span::before{content:"";justify-self:center;width:clamp(16px,1.8vw,24px);height:clamp(16px,1.8vw,24px);background:#2a2010;
  -webkit-mask:var(--ic) center/contain no-repeat;mask:var(--ic) center/contain no-repeat}
.p0,.f0{--ic:url(iconos/piezas/ia.svg)}.p1,.f1{--ic:url(iconos/piezas/i18n.svg)}.p2,.f2{--ic:url(iconos/piezas/actualizaciones.svg)}
.p3,.f3{--ic:url(iconos/piezas/bienvenida.svg)}.p4,.f4{--ic:url(img/pieza.svg)}.p5,.f5{--ic:url(iconos/piezas/tema.svg)}
.p6,.f6{--ic:url(iconos/piezas/catalogo.svg)}.p7,.f7{--ic:url(iconos/piezas/notas-git.svg)}.p8,.f8{--ic:url(iconos/piezas/cifrado.svg)}
.proyectos .cabeza{display:flex;align-items:center;gap:12px}
.icono-app{width:40px;height:40px;border-radius:10px;flex:none;object-fit:contain}
.pie-tarjeta{display:flex;flex-wrap:wrap;gap:6px}
.enlaces-app{display:flex;gap:16px;margin:4px 0 0;font-weight:700;font-size:15px}
.enlaces-app a{color:var(--acento)}
.proyectos li.vacio{flex-direction:row;align-items:center;justify-content:center;gap:12px;border:1px dashed var(--linea);background:transparent;padding:28px 20px}
.proyectos li.vacio .icono{width:32px;height:32px;color:var(--acento)}
.proyectos li.vacio p{margin:0;font-size:16px}
.cuenta:empty{display:none}
pre code,.comando code{background:none;border:0;padding:0;border-radius:0;color:inherit}
.comando code{color:#f3f0ff}
.copiar{display:none}
.js .copiar{display:block}
@media (prefers-color-scheme:dark){.comando,pre{background:#0d0b14;box-shadow:inset 0 0 0 1px #302a42}.selector button[aria-selected="true"]{background:#3a3352}}