:root{
  --bg:#FFFFFF; --card:#F8FAFC; --text:#111827; --muted:#6B7280; --line:#E5E7EB;
  --accent:#E31E24; --ok:#22C55E; --warn:#F59E0B; --bad:#EF4444;
  --pad:14px; --r:14px; --hdr:#F3F4F6; --maxw:1100px;
}

*,*::before,*::after{ box-sizing:border-box }
html,body{ height:100% }
body{
  margin:0; background:var(--bg); color:var(--text);
  font-family:Inter, system-ui, Arial, sans-serif;
  -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale;
}

a{ color:inherit; text-decoration:none }

/* Container util */
.container{ max-width:var(--maxw); margin:0 auto; padding:10px var(--pad) }

/* ====== HEADER ====== */
.site-header{
  position:sticky; top:0; z-index:50;
  background:var(--hdr);
  border-bottom:1px solid var(--line);
  backdrop-filter:saturate(120%) blur(6px);
  box-shadow:0 4px 10px rgba(0,0,0,.05);
}
.site-header .container{ display:flex; align-items:center; gap:10px }
.brand{ display:flex; align-items:center; gap:10px; font-weight:900; letter-spacing:.2px }
.logo{ height:44px }
.brand-text{ display:none; font-size:1rem }
@media (min-width:720px){ .brand-text{ display:inline-block } }

.nav-links{
  display:flex; gap:8px; align-items:center; margin-left:auto;
}
.nav-links a{
  padding:8px 12px; border:1px solid var(--line); border-radius:10px;
  background:#fff; transition:transform .12s ease, box-shadow .12s ease;
}
.nav-links a:hover{ transform:translateY(-1px); box-shadow:0 8px 16px rgba(0,0,0,.07) }
.nav-links a.active{
  border-color:#2b3a57; color:#0f172a;
  background:linear-gradient(180deg,#ffffff,#f7fafc);
  box-shadow:0 6px 14px rgba(43,58,87,.15);
}

/* Hamburguesa (mobile) */
.nav-toggle{
  margin-left:auto; background:transparent; border:0; cursor:pointer;
  width:42px; height:42px; border-radius:10px; display:flex; align-items:center; justify-content:center;
}
.nav-toggle span{
  display:block; width:22px; height:2px; background:#111827; border-radius:2px; position:relative;
}
.nav-toggle span + span{ margin-top:5px }
@media (min-width:880px){
  .nav-toggle{ display:none }
}

/* Menú colapsable en móvil */
@media (max-width:879.98px){
  .nav-links{
    position:absolute; top:64px; left:0; right:0;
    display:none; flex-direction:column; gap:10px;
    padding:10px var(--pad) 16px;
    background:var(--hdr); border-bottom:1px solid var(--line);
  }
  .site-header.open .nav-links{ display:flex }
  .nav-links a{ background:#fff }
}

/* ====== FOOTER ====== */
.site-footer{
  background:var(--hdr);
  border-top:1px solid var(--line);
  color:var(--text);
}
.site-footer .foot,
.site-footer .foot-legal{
  max-width:var(--maxw); margin:0 auto; padding:12px var(--pad);
  font-size:.92rem; display:flex; gap:12px; flex-wrap:wrap; align-items:center; justify-content:center; text-align:center;
}
.site-footer .foot-legal{
  border-top:1px dashed var(--line); color:#374151; gap:10px;
}
.site-footer a{ color:#0f172a }
.dot{ opacity:.6 }

/* ====== Utilidades de layout (para tus páginas) ====== */
.wrap{ max-width:var(--maxw); margin:0 auto; padding:18px var(--pad) 70px }
.card{
  background:var(--card); border:1px solid var(--line); border-radius:var(--r);
  padding:var(--pad); margin-bottom:14px; overflow:hidden;
  box-shadow:0 8px 18px rgba(0,0,0,.12);
}