/* ── hero «la biblioteca velada» · del prototipo aprobado el 19-oct-2026 ──
   Se carga después de sitio.css y solo en la portada. */
.site{--mono:'JetBrains Mono',ui-monospace,Menlo,monospace;--sans:'Space Grotesk',system-ui,sans-serif;--serif:'Instrument Serif',Georgia,serif}

/* rejilla milimétrica de fondo */
.site::before{content:"";position:fixed;inset:0;pointer-events:none;z-index:0;
  background-image:linear-gradient(to right,rgba(230,234,240,.035) 1px,transparent 1px),linear-gradient(to bottom,rgba(230,234,240,.035) 1px,transparent 1px);
  background-size:72px 72px;mask-image:radial-gradient(ellipse at 50% 40%,#000 30%,transparent 75%)}
.site > header{position:fixed;top:0;left:0;right:0;z-index:20;border-bottom:1px solid rgba(30,39,51,.6);background:rgba(11,14,20,.72);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}
.site > header .wrap{height:64px}
.site > footer,.site > section{position:relative;z-index:2}

/* el hero ocupa cinco pantallas; lo que se ve queda pegado arriba */
section.hero{position:relative;height:100vh;min-height:640px;padding:0;overflow:hidden;border-top:0;z-index:1}
.hero .fijo{position:relative;height:100%;overflow:hidden}
#lienzo{position:absolute;inset:0;width:100%;height:100%;display:block}
.hero .hcapa{position:absolute;inset:0;z-index:2;pointer-events:none;display:grid;grid-template-rows:1fr auto;padding:64px 40px 36px}
.hero .texto{align-self:center;max-width:720px;pointer-events:auto;margin-top:0}
.hero .lbl{font-family:var(--mono);font-size:11.5px;letter-spacing:2.6px;text-transform:uppercase;color:var(--ac);margin:0 0 22px;display:flex;align-items:center;gap:12px}
.hero .lbl::before{content:"";width:28px;height:1px;background:var(--ac)}
.hero h1{font-size:clamp(56px,8vw,118px);line-height:.95;letter-spacing:-4px;margin:0 0 24px;font-weight:600}
.hero h1 .palabra{font-family:var(--serif);font-style:normal;font-weight:400;color:var(--ac);letter-spacing:-1.5px;display:inline-block}
.hero .baj{font-size:clamp(16px,1.3vw,19px);line-height:1.5;color:var(--tx2);max-width:470px;margin:0 0 10px}
.hero .lista{list-style:none;margin:0 0 30px;padding:0;display:grid;grid-template-columns:repeat(2,max-content);gap:7px 36px;font-size:clamp(15px,1.15vw,17px);color:var(--tx)}
.hero .lista li{display:flex;align-items:center;gap:10px}
.hero .lista li::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--ac);flex:none}
.hero .btns{display:flex;gap:12px;flex-wrap:wrap}
.hero .btn{display:inline-flex;align-items:center;gap:8px;font-size:14px;font-weight:600;border-radius:999px;padding:12px 20px;border:1px solid transparent;transition:.2s}
.hero .btn.pri{background:var(--ac);color:var(--bg)}
.hero .btn.pri:hover{background:#FF8F62}
.hero .btn.sec{border-color:var(--line2);color:var(--tx)}
.hero .btn.sec:hover{border-color:var(--tx3)}

/* pie del hero: figura actual y progreso */
.hero .pie{display:grid;grid-template-columns:1fr auto;align-items:end;gap:24px;pointer-events:auto}
.fig{font-family:var(--mono);font-size:12px;color:var(--tx3);line-height:1.6;max-width:460px}
.fig b{color:var(--tx2);font-weight:500}
.fig .num{color:var(--ac);letter-spacing:1.5px}
.prog{display:flex;gap:6px;align-items:center;font-family:var(--mono);font-size:11px;color:var(--tx3)}
.prog i{display:block;width:34px;height:14px;position:relative;cursor:pointer}
.prog i::before{content:"";position:absolute;left:0;right:0;top:6px;height:2px;background:var(--line2);border-radius:2px}
.prog i::after{content:"";position:absolute;left:0;right:0;top:6px;height:2px;border-radius:2px;background:var(--ac);transform:scaleX(var(--p,0));transform-origin:left}


/* banda de cifras que se resuelven desde el ruido */
section.banda{padding:0;background:var(--bg)}
.cifras{max-width:1180px;margin:0 auto;padding:44px 40px;display:grid;grid-template-columns:repeat(4,1fr);gap:24px}
.cifra{border-left:1px solid var(--line2);padding-left:18px}
.cifra b{display:block;font-family:var(--mono);font-weight:500;font-size:clamp(30px,3.4vw,48px);letter-spacing:-1.5px;color:var(--tx);line-height:1}
.cifra span{display:block;font-family:var(--mono);font-size:10.5px;letter-spacing:2px;text-transform:uppercase;color:var(--tx3);margin-top:6px}
.cifra b.dato{color:var(--data)}

.sig h2 em{font-family:var(--serif);font-style:italic;font-weight:400}

/* sin WebGL o con «reducir movimiento»: fondo quieto, textos siguen cambiando */
.sinwebgl #lienzo{display:none}
.sinwebgl .hero .fijo{background:radial-gradient(ellipse at 70% 50%,rgba(255,122,69,.14),transparent 55%)}

@media(max-width:820px){
  .hero .hcapa{padding:64px 20px 24px}.hero .texto{align-self:end;margin-bottom:28px;margin-top:0}
  .hero h1{letter-spacing:-2.5px;font-size:56px}.hero .baj{font-size:15px}.hero .lista{grid-template-columns:1fr;gap:5px;margin-bottom:20px}
  .hero .pie{grid-template-columns:1fr}.prog{display:none}
  .cifras{grid-template-columns:1fr 1fr;padding:32px 20px;gap:22px}
}