/* Hoja minima para las paginas estaticas publicas (portada, about, contact,
   privacy). Deliberadamente separada de styles.css (que es para la SPA
   detras de login): pocas reglas, sin markup extra, mismos colores de marca. */
:root{
  --bg:#0F172A;--panel:#1E293B;--line:#334155;
  --brand:#2563EB;--brand2:#1d4ed8;--accent:#38BDF8;
  --text:#E0E3E5;--muted:#94A3B8;
}
*{box-sizing:border-box}
html{color-scheme:dark}
body{margin:0;background:var(--bg);color:var(--text);font-family:"Hanken Grotesk",system-ui,-apple-system,Segoe UI,Roboto,sans-serif;line-height:1.6}
a{color:var(--accent)}
header.site,footer.site{max-width:860px;margin:0 auto;padding:20px 24px}
header.site{display:flex;align-items:center;justify-content:space-between;gap:16px}
.brand{display:flex;align-items:center;gap:9px;font-weight:800;font-size:1.15rem;letter-spacing:-.02em}
.brand .mark{width:30px;height:30px;border-radius:10px;background:var(--brand);display:inline-flex;align-items:center;justify-content:center;flex:0 0 auto}
.brand b{color:var(--accent)}
nav.site-nav a{margin-left:18px;color:var(--muted);font-weight:600;font-size:.92rem}
nav.site-nav a:hover{color:var(--text)}
main{max-width:860px;margin:0 auto;padding:12px 24px 60px}
h1{font-size:2.1rem;font-weight:800;letter-spacing:-.02em;margin:.2em 0 .4em}
h2{font-size:1.4rem;font-weight:700;margin:1.6em 0 .5em}
p{color:var(--text);margin:.8em 0}
p.lead{font-size:1.15rem;color:var(--muted)}
ol,ul{padding-left:1.3em}
li{margin:.4em 0}
.cta{display:inline-block;background:var(--brand);color:#fff;font-weight:700;padding:12px 22px;border-radius:12px;margin-top:10px}
.cta:hover{background:var(--brand2)}
.card{background:var(--panel);border:1px solid var(--line);border-radius:14px;padding:20px 22px;margin:1.2em 0}
footer.site{border-top:1px solid var(--line);margin-top:40px;color:var(--muted);font-size:.85rem;display:flex;flex-wrap:wrap;gap:16px;justify-content:space-between}
footer.site a{color:var(--muted)}
footer.site a:hover{color:var(--text)}