/* Layout: civic-technical con la marca SG. Azul del logo como color principal; el amarillo de señal vial queda solo para los detalles de la vía y de SISTM. */
:root{
  --bg:#f3f6f9;          /* concreto claro, con sesgo al azul de marca */
  --surface:#ffffff;
  --ink:#14202b;         /* asfalto */
  --muted:#506170;
  --line:#d4dde6;
  --brand:#4799ff;       /* azul del logo SG */
  --brand-strong:#1a66d6;/* azul para botones y enlaces (contraste AA con blanco) */
  --brand-soft:#dcebff;
  --on-brand:#ffffff;
  --logo-gray:#808080;
  --logo-gray-2:#a5a5a5;
  --signal:#f2b41b;      /* amarillo de señal vial */
  --signal-ink:#14202b;
  --green:#1f7a5c;
  --road:#1b2a37;
  --road-ink:#e8eef3;
  --font-display:"Saira","Arial Narrow",Arial,sans-serif;
  --font-body:"Atkinson Hyperlegible",system-ui,-apple-system,"Segoe UI",sans-serif;
  --font-mono:"IBM Plex Mono",ui-monospace,Menlo,Consolas,monospace;
  --max:1120px;
  --r:6px;
}
@media (prefers-color-scheme: dark){:root:not([data-theme="light"]){
  --bg:#0d151d;--surface:#15202b;--ink:#e6edf3;--muted:#9aabb8;--line:#283745;
  --brand:#5ea6ff;--brand-strong:#4799ff;--brand-soft:#16304f;--on-brand:#06111d;--logo-gray:#b3b9bf;--logo-gray-2:#8d959c;
  --signal:#f4bd33;--signal-ink:#111a20;--green:#4fbf94;--road:#08101a;--road-ink:#dfe7eb;color-scheme:dark}}
:root[data-theme="dark"]{
  --bg:#0d151d;--surface:#15202b;--ink:#e6edf3;--muted:#9aabb8;--line:#283745;
  --brand:#5ea6ff;--brand-strong:#4799ff;--brand-soft:#16304f;--on-brand:#06111d;--logo-gray:#b3b9bf;--logo-gray-2:#8d959c;
  --signal:#f4bd33;--signal-ink:#111a20;--green:#4fbf94;--road:#08101a;--road-ink:#dfe7eb;color-scheme:dark}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}*{animation:none!important;transition:none!important}}
body{background:var(--bg);color:var(--ink);font-family:var(--font-body);font-size:1.0625rem;line-height:1.6}
a{color:inherit}
/* Header */
header.top{position:sticky;top:env(safe-area-inset-top,0px);z-index:10;background:color-mix(in srgb,var(--bg) 88%,transparent);backdrop-filter:blur(8px);border-bottom:1px solid var(--line)}
.top .wrap{display:flex;align-items:center;justify-content:space-between;gap:16px;padding-block:12px}
.brand{display:flex;align-items:center;gap:10px;text-decoration:none}
.brand svg{flex:none}
.brand svg{height:40px;width:auto}
.lg-blue{fill:var(--brand)}.lg-gray{fill:var(--logo-gray)}.lg-text{fill:var(--logo-gray-2);font-family:Roboto,Arial,sans-serif;font-size:48px;letter-spacing:.17em}
@media (max-width:420px){.brand svg{height:32px}}
nav.menu{display:flex;gap:4px;flex-wrap:wrap;justify-content:flex-end}
nav.menu a{text-decoration:none;font-size:.95rem;padding:6px 10px;border-radius:var(--r);color:var(--muted)}
nav.menu a:hover{color:var(--ink);background:var(--surface)}
nav.menu a.cta{background:var(--ink);color:var(--bg)}
.btn{display:inline-flex;align-items:center;gap:8px;padding:12px 18px;border-radius:var(--r);font-weight:700;text-decoration:none;border:2px solid var(--ink);font-size:1rem;cursor:pointer;font-family:var(--font-body)}
.btn.primary{background:var(--brand-strong);color:var(--on-brand);border-color:var(--brand-strong)}
.btn.ghost{background:transparent;color:var(--ink)}
.btn:hover{transform:translateY(-1px)}
footer{background:var(--road);color:var(--road-ink);padding-block:36px}
footer .wrap{display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;font-size:.9rem}
footer .muted{opacity:.7}
footer a{color:var(--road-ink)}
nav.menu a{white-space:nowrap}
.top .wrap{position:relative}
.nav-toggle{display:none;font:inherit;font-weight:700;padding:8px 14px;border-radius:var(--r);border:1px solid var(--line);background:var(--surface);color:var(--ink);cursor:pointer}
@media (max-width:1100px){
  .nav-toggle{display:inline-flex}
  nav.menu{display:none;position:absolute;top:calc(100% + 1px);left:0;right:0;flex-direction:column;align-items:stretch;gap:2px;padding:10px clamp(16px,4vw,32px) 16px;background:var(--bg);border-bottom:1px solid var(--line);box-shadow:0 12px 24px -16px rgba(10,20,30,.35)}
  nav.menu.open{display:flex}
  nav.menu a,nav.menu a:not(.cta){display:block;padding:10px 12px}
  nav.menu a.cta{text-align:center;margin-top:6px}
}