/* Paleta basada en el laboratorio */
:root{
  --bg:#1C1C1C;             /* gris oscuro techo/sombras */
  --fg:#F3F3F3;             /* texto */
  --muted:#bfc7ce;          /* subtítulos */
  --accent:#D93025;         /* rojo escénico */
  --accent-ink:#9f1f18;     /* rojo oscuro para focus */
  --chroma:#00B950;         /* verde chroma */
  --ink:#0e0e0e;
  --card:#232323;
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0; background:var(--bg); color:var(--fg);
  font-family:Inter, system-ui, -apple-system, Segoe UI, Roboto, "Helvetica Neue", Arial, sans-serif;
  line-height:1.65;
}
.wrap{max-width:1080px; padding:0 20px; margin:0 auto}

/* Header */
.site-header{position:sticky; top:0; z-index:10; background:rgba(28,28,28,.9); backdrop-filter:saturate(160%) blur(6px); border-bottom:1px solid #2a2a2a}
.site-header .wrap{display:flex; align-items:center; justify-content:space-between; height:64px}
.brand{font-family:Poppins,Inter,sans-serif; font-weight:700; color:var(--fg); text-decoration:none; letter-spacing:.2px}
.site-nav a{color:var(--fg); text-decoration:none; margin-left:18px; opacity:.8}
.site-nav a:hover{opacity:1; color:var(--chroma)}

/* Hero */
.hero{border-bottom:1px solid #2a2a2a; background:linear-gradient(135deg, rgba(217,48,37,.12), rgba(0,185,80,.06)); padding:56px 0}
.hero h1{font-family:Poppins,Inter,sans-serif; font-size:2.2rem; margin:.2rem 0 1rem}
.hero p{max-width:720px; color:var(--muted)}

/* Grid de posts */
.post-grid{display:grid; grid-template-columns:repeat(auto-fill,minmax(280px,1fr)); gap:20px; padding:28px 0 64px}
.post-card{background:var(--card); border:1px solid #2a2a2a; border-radius:16px; padding:20px; box-shadow:0 8px 24px rgba(0,0,0,.2)}
.post-title{margin:.2rem 0 .4rem; font-size:1.2rem; line-height:1.25}
.post-title a{color:var(--fg); text-decoration:none}
.post-title a:hover{color:var(--chroma)}
.post-date{display:inline-block; font-size:.85rem; color:#9ba3aa}
.post-excerpt{margin:.6rem 0 0; color:#cfd6dc}

/* Footer */
.site-footer{border-top:1px solid #2a2a2a; padding:20px 0 60px}
.site-footer .wrap{display:flex; gap:16px; align-items:center; justify-content:space-between}
.foot-links a{color:#cfd6dc; text-decoration:none; margin-left:16px}
.foot-links a:hover{color:var(--fg)}

/* Accesibilidad */
a:focus{outline:3px solid var(--accent); outline-offset:2px}
.post-card:focus-within{box-shadow:0 0 0 3px var(--accent-ink)}

/* Tipos: utilidades */
.small{font-size:.9rem; color:#cbd3d9}
.center{text-align:center}

/* Responsive mínimo */
@media (max-width:640px){
  .site-header .wrap{height:56px}
  .hero{padding:40px 0}
}