:root{
--bg:#0b0b0c; --fg:#e8e8ea; --muted:#b7b7bd; --line:#1a1a1d;
--accent:#66ccff; --accent-2:#ffd166; --ok:#8bd450; --warn:#ffae42;
--radius:14px; --space:18px; --maxw:760px; --shadow:0 10px 24px rgba(0,0,0,.25);
}
*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{font-family:'Inter',system-ui,-apple-system,Segoe UI,Roboto,Helvetica,Arial,sans-serif;background:var(--bg);color:var(--fg);line-height:1.55}
img{max-width:100%;display:block}
.wrap{max-width:var(--maxw);margin:0 auto;padding:24px}
.site-header{display:flex;justify-content:space-between;align-items:center;padding:16px 24px;border-bottom:1px solid var(--line);position:sticky;top:0;background:rgba(11,11,12,.8);backdrop-filter:saturate(120%) blur(6px);z-index:10}
.brand{font-weight:800;letter-spacing:.2px;color:var(--fg);text-decoration:none}
.nav{display:flex;gap:12px;align-items:center}
.nav a{color:var(--muted);text-decoration:none;padding:8px 12px;border-radius:10px}
.nav a:hover{background:#131316;color:var(--fg)}
.nav .cta{background:var(--accent);color:#001018;font-weight:700}


.hero{padding:36px 0 12px}
.hero h1{font-size:32px;line-height:1.15;margin:0 0 10px}
.lead{color:var(--muted);margin:0 0 16px}
.hero-actions{display:flex;gap:10px}
.btn{display:inline-block;padding:12px 14px;border-radius:12px;border:1px solid var(--line);text-decoration:none;color:var(--fg)}
.btn.primary{background:var(--accent);color:#061218;border-color:transparent}
.btn.ghost{background:transparent}


.grid-tiles{display:grid;grid-template-columns:1fr;gap:14px;margin:26px 0}
.tile{padding:16px;border:1px solid var(--line);border-radius:var(--radius);background:#0f0f12;box-shadow:var(--shadow);text-decoration:none;color:var(--fg)}
.tile h3{margin:0 0 6px}
.tile p{margin:0;color:var(--muted)}
.tile:hover{transform:translateY(-1px);border-color:#24242a}


.callout{margin:30px 0;padding:18px;border:1px dashed #2a2a31;border-radius:var(--radius);background:#0e0e11}
.callout h2{margin:0 0 8px}
.callout p{margin:0 0 12px;color:var(--muted)}


.site-footer{padding:32px 24px;border-top:1px solid var(--line);text-align:center;color:#9b9ba3}


/* Mobile tweaks */
@media (min-width:740px){
.hero h1{font-size:44px}
.grid-tiles{grid-template-columns:repeat(2,1fr)}
}


/* Theming hooks para subpáginas */
body.theme-portal{--bg:#0b0b0c; --fg:#f2f2f4; --accent:#66ccff}
body.theme-manifiesto{--bg:#101114; --accent:#ffd166}
body.theme-club{--bg:#f5f7fb; --fg:#0f1320; --muted:#3a4762; --line:#e7eaf3; --accent:#6aa6ff}
body.theme-lab{--bg:#0a0f14; --accent:#7bdcb5}
body.theme-mov{--bg:#ffffff; --fg:#121217; --muted:#4a4a55; --line:#e9e9ee; --accent:#ef476f}
body.theme-contacto{--bg:#0b0b0c; --accent:#9f86ff}