/* ============================================================
   SITE CHROME — header, navegación y footer
   Extraído del sitio para que el blog use EXACTAMENTE el mismo
   header y footer que el resto de rrsg.es. No editar por separado.
   ============================================================ */
:root{
  --bg:#ffffff; --fg:#0b1022; --muted:#5b6574; --line:#e9eef5; --accent:#0b5cff; --accent-2:#2143ff;
  --card:#f7f9fc; --ok:#16a34a; --warn:#f59e0b; --danger:#ef4444;
  --warm:#f97316; --warm-2:#ea580c; --warm-soft:#fff4ec; --warm-line:#fed7aa;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;font-family:Inter, system-ui, -apple-system, Segoe UI, Roboto, Ubuntu, Arial, sans-serif;color:var(--fg);background:var(--bg);line-height:1.6}
a{color:var(--accent);text-underline-offset:2px}
.container{width:min(1120px,92vw);margin-inline:auto}
img{max-width:100%}

/* Header */
header{position:sticky;top:0;z-index:50;background:rgba(255,255,255,.86);backdrop-filter:saturate(180%) blur(10px);border-bottom:1px solid var(--line)}
.nav{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:12px 0}
.brand{display:flex;align-items:center;gap:12px;color:inherit;text-decoration:none}
.brand-logo{height:38px;width:auto;display:block}
.brand-sub{display:block;font-size:11px;color:var(--muted);font-weight:600;letter-spacing:.3px;padding-left:12px;border-left:1px solid var(--line);line-height:1.2;max-width:90px}
@media (max-width:480px){.brand-sub{display:none}}
nav.main a{color:#1f2937;text-decoration:none;padding:10px 12px;border-radius:10px;font-size:15px}
nav.main a:hover{background:#f2f5fb}
nav.main a.active{color:var(--accent);font-weight:600}
.btn{display:inline-flex;align-items:center;gap:10px;padding:12px 16px;border-radius:12px;border:1px solid var(--line);background:var(--accent);color:#fff;text-decoration:none;font-weight:600;cursor:pointer;transition:transform .08s ease, filter .15s ease}
.btn:hover{filter:brightness(1.04);transform:translateY(-1px)}
.btn.ghost{background:#fff;border-color:var(--line);color:#111827}
.btn.warm{background:var(--warm);border-color:var(--warm);color:#fff}
.btn.warm:hover{background:var(--warm-2)}
.menu-toggle{display:none;background:none;border:1px solid var(--line);border-radius:10px;padding:8px 10px;cursor:pointer}
@media (max-width:840px){
  nav.main{display:none;position:absolute;top:60px;left:0;right:0;background:#fff;border-bottom:1px solid var(--line);flex-direction:column;padding:10px 6vw 16px}
  nav.main.open{display:flex}
  nav.main a{padding:12px 8px;border-radius:8px}
  .menu-toggle{display:inline-flex}
  .nav .btn.head-cta{display:none}
}

/* Footer */
footer{padding:34px 0;color:var(--muted);font-size:.9rem;border-top:1px solid var(--line)}
.foot-grid{display:grid;grid-template-columns:2fr 1fr 1fr;gap:24px;margin-bottom:22px}
@media (max-width:760px){.foot-grid{grid-template-columns:1fr}}
.foot-grid b{color:var(--fg);display:block;margin-bottom:8px}
.foot-grid a{color:var(--muted);text-decoration:none;display:block;margin:5px 0}
.foot-grid a:hover{color:var(--accent)}
.foot-brand p{margin:8px 0 0;color:var(--muted)}
.legal{font-size:12.5px;border-top:1px solid var(--line);padding-top:18px;line-height:1.6;color:var(--muted)}
.legal a{display:inline;color:var(--accent)}