@font-face{font-family:'Bricolage Grotesque';src:url('/assets/fonts/bricolage-grotesque-latin-wght-normal.woff2') format('woff2');font-weight:200 800;font-display:swap}
@font-face{font-family:'Geist';src:url('/assets/fonts/geist-latin-wght-normal.woff2') format('woff2');font-weight:100 900;font-display:swap}
@font-face{font-family:'Geist Mono';src:url('/assets/fonts/geist-mono-latin-wght-normal.woff2') format('woff2');font-weight:100 900;font-display:swap}
:root{--ink:#0d0d10;--ink-2:#15151a;--ink-3:#1e1e25;--frame:rgba(10,10,13,.8);--paper:#f1eee6;--paper-2:#c9c6be;--muted:#8b8a93;--line:rgba(241,238,230,.12);--line-strong:rgba(241,238,230,.28);--accent:#ff4f1f;--cobalt:#3b5bff;--lime:#c8ff2e;--sun:#ffc93c;--display:'Bricolage Grotesque','Arial Black',system-ui,sans-serif;--body:'Geist',system-ui,-apple-system,sans-serif;--mono:'Geist Mono',ui-monospace,Menlo,monospace;--radius:14px;--radius-l:28px;--gutter:clamp(18px,4vw,56px);--ease:cubic-bezier(.16,1,.3,1)}
*{box-sizing:border-box;margin:0}
html{background:var(--ink);color:var(--paper);font-family:var(--body);font-size:17px;line-height:1.55;-webkit-font-smoothing:antialiased}
body{min-height:100vh;padding:clamp(16px,5vw,72px) clamp(10px,5vw,96px)}
a{color:inherit}
::selection{background:var(--accent);color:var(--ink)}

/* Fondo: cielo de estrellas como la home (canvas fijo detrás de todo) */
#stars{position:fixed;inset:0;width:100%;height:100%;z-index:0;pointer-events:none}

/* Marco negro: el contenido va sobre un panel oscuro para que se lea bien */
.wrap{position:relative;z-index:1;width:80vw;max-width:100%;margin:0 auto;padding:0 var(--gutter);background:var(--frame);border:1px solid var(--line);border-radius:var(--radius-l);box-shadow:0 40px 120px rgba(0,0,0,.6),0 0 0 1px rgba(0,0,0,.4);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px)}

header.top{display:flex;justify-content:space-between;align-items:center;gap:16px;flex-wrap:wrap;padding:22px 0;border-bottom:1px solid var(--line)}
.brand{display:inline-flex;align-items:center;gap:.62rem;font-family:var(--display);font-weight:800;font-size:1.45rem;letter-spacing:-.04em;text-decoration:none}
.brand span{font-family:var(--mono);color:var(--muted);font-weight:400;font-size:.78rem;letter-spacing:.08em;text-transform:uppercase;margin-left:.15rem}
.mark{position:relative;width:20px;height:20px;flex:none}
.mark::before,.mark::after{content:"";position:absolute;width:12px;height:12px}
.mark::before{left:0;top:0;background:var(--accent)}
.mark::after{right:0;bottom:0;background:var(--cobalt)}
.top nav{display:flex;flex-wrap:wrap;gap:6px}
.top nav a{font-family:var(--mono);font-size:.74rem;letter-spacing:.1em;text-transform:uppercase;color:var(--paper-2);text-decoration:none;padding:.55em 1em;border:1px solid var(--line);border-radius:999px;transition:border-color .3s,color .3s}
.top nav a:hover{color:var(--paper);border-color:var(--line-strong)}

.eyebrow{display:flex;width:fit-content;align-items:center;gap:.6em;font-family:var(--mono);font-size:.76rem;letter-spacing:.1em;text-transform:uppercase;color:var(--muted)}
.eyebrow::before{content:"";width:7px;height:7px;background:var(--accent);box-shadow:4px 4px 0 var(--cobalt);margin-right:4px}
h1,h2,h3{font-family:var(--display);letter-spacing:-.04em;line-height:1.02}
h1{font-size:clamp(2.6rem,1.6rem + 4.5vw,5.6rem);font-weight:800}
h2{font-size:clamp(1.8rem,1.4rem + 1.8vw,3rem);font-weight:750}
h3{font-size:1.25rem;font-weight:700;letter-spacing:-.02em}
p.lead{font-size:clamp(1.1rem,1rem + .4vw,1.35rem);color:var(--paper-2);max-width:40ch}

.btn{display:inline-flex;align-items:center;justify-content:space-between;gap:1.2rem;padding:1rem 1.4rem;border-radius:999px;font-family:var(--mono);font-size:.8rem;font-weight:500;letter-spacing:.08em;text-transform:uppercase;text-decoration:none;transition:transform .35s var(--ease),background .25s,border-color .25s}
.btn:hover{transform:translateY(-2px)}
.btn.primary{background:var(--accent);color:var(--ink)}
.btn.primary:hover{background:#ff6a40}
.btn.ghost{border:1px solid var(--line-strong);color:var(--paper)}
.btn.ghost:hover{border-color:var(--paper-2)}

.card{background:var(--ink-2);border:1px solid var(--line);border-radius:var(--radius-l);padding:28px}
.muted{color:var(--muted)}
code,.mono{font-family:var(--mono);font-size:.88em}
code{background:var(--ink-3);padding:.15em .45em;border-radius:6px}
footer.bottom{border-top:1px solid var(--line);margin-top:96px;padding:28px 0 36px;display:flex;justify-content:space-between;flex-wrap:wrap;gap:12px;color:var(--muted);font-family:var(--mono);font-size:.74rem;letter-spacing:.06em;text-transform:uppercase}
footer.bottom a{color:var(--paper-2);text-decoration:none}
footer.bottom a:hover{color:var(--paper)}
@media (max-width:900px){.wrap{width:100%}}
@media (max-width:640px){body{padding:8px}.wrap{border-radius:20px}}
@media (prefers-reduced-motion:reduce){.btn{transition:none}}