@font-face{font-family:"Bricolage Grotesque";src:url(/fonts/bricolage.woff2) format("woff2");font-weight:200 800;font-display:swap}
@font-face{font-family:"Instrument Sans";src:url(/fonts/instrument.woff2) format("woff2");font-weight:400 700;font-display:swap}
/* Presupuestado: base común (colores, letras, encabezado, menú y pie). Estilo "talonario". */
:root{
  --desk:#dde4df; --desk-2:#d0d9d3; --ink:#1c2230; --muted:#5d6870; --line:#bfcbc4; --card:#f4f7f4;
  --pen:#2336a6; --pen-dark:#16216e; --pen-ink:#ffffff; --pen-soft:#e2e7f7; --num:#c63d2f; --danger:#b3402e; --seg-on:#fbfcf9;
  --surface:#fbfcf9; --paper:#fbfcf9; --p-num:#c63d2f; --p-ink:#1c2230; --p-muted:#66707a; --p-rule:#dbe4de; --p-faint:#a2ada9; --p-fill:#eff3ef;
  --shadow:0 1px 1px rgba(28,40,36,.05),0 18px 34px -14px rgba(28,45,40,.28);
  --f-head:"Bricolage Grotesque","Instrument Sans",system-ui,sans-serif;
  --f-body:"Instrument Sans",system-ui,-apple-system,"Segoe UI",sans-serif;
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --desk:#15171c; --desk-2:#1d2027; --ink:#e8eaf0; --muted:#9aa0ae; --line:#2f333c; --card:#1d2027;
    --act:#9eacff; --act-ink:#0d1230; --surface:#22262e; --pen:#9eacff; --pen-dark:#5d6ee6; --pen-ink:#0d1230; --pen-soft:#26304f; --num:#ff8a7a; --danger:#ef8a78; --seg-on:#323745;
    --shadow:0 1px 2px rgba(0,0,0,.35),0 22px 44px -16px rgba(0,0,0,.6);
  }
}
:root[data-theme="dark"]{
  --desk:#15171c; --desk-2:#1d2027; --ink:#e8eaf0; --muted:#9aa0ae; --line:#2f333c; --card:#1d2027;
    --act:#9eacff; --act-ink:#0d1230; --surface:#22262e; --pen:#9eacff; --pen-dark:#5d6ee6; --pen-ink:#0d1230; --pen-soft:#26304f; --num:#ff8a7a; --danger:#ef8a78; --seg-on:#323745;
    --shadow:0 1px 2px rgba(0,0,0,.35),0 22px 44px -16px rgba(0,0,0,.6);
}
html,body{margin:0}
body{background:var(--desk);color:var(--ink);font:15.5px/1.55 var(--f-body);-webkit-font-smoothing:antialiased}
h1,h2,h3{font-family:var(--f-head)}

/* encabezado: igual en todas las páginas */
.bar{display:flex;align-items:center;gap:18px;height:64px;padding:0 28px;position:sticky;top:0;z-index:30;
  background:var(--desk);background:color-mix(in srgb,var(--desk) 90%,transparent);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);border-bottom:1px solid transparent;transition:border-color .2s}
.bar.scrolled,.bar.open{border-bottom-color:var(--line)}
.mark{font:700 21px/1 var(--f-head);letter-spacing:-.025em;display:flex;align-items:center;gap:9px;text-decoration:none;color:var(--ink);flex:none}
.mainnav{display:none;position:absolute;left:0;right:0;top:100%;padding:18px max(24px,calc((100% - 1000px)/2)) 22px;background:var(--desk);border-bottom:1px solid var(--line);box-shadow:0 22px 34px -22px rgba(0,0,0,.35);
  grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;max-width:none}
.bar.open .mainnav{display:grid}
.mainnav a{display:block;text-decoration:none;color:var(--ink);padding:12px 14px;border-radius:12px;border:1px solid transparent}
.mainnav a b{display:block;font:700 16px/1.25 var(--f-head);letter-spacing:-.01em}
.mainnav a span{display:block;color:var(--muted);font-size:13.5px;margin-top:2px}
.mainnav a:hover{background:var(--surface);border-color:var(--line)}
.mainnav a[aria-current="page"]{background:var(--surface);border-color:var(--line)}
.mainnav a[aria-current="page"] b{color:var(--pen)}
.bar-right{display:flex;align-items:center;gap:6px;margin-left:auto}
.linkish{border:0;background:transparent;color:var(--muted);padding:8px 12px;border-radius:999px;font:600 14.5px var(--f-body);text-decoration:none;display:inline-flex;align-items:center;gap:6px;cursor:pointer}
.linkish:hover{color:var(--ink);background:var(--desk-2)}
.menu-btn .m{display:none}
.menu-btn i{display:block;width:13px;height:2px;background:currentColor;box-shadow:0 -4.5px 0 currentColor,0 4.5px 0 currentColor;margin:4px 0}
.menu-btn[aria-expanded="true"]{color:var(--ink);background:var(--desk-2)}
.cta{background:var(--pen);color:var(--pen-ink);border:0;border-radius:999px;padding:10px 20px;font:700 15px var(--f-body);display:inline-flex;align-items:center;justify-content:center;gap:8px;
  box-shadow:0 3px 0 var(--pen-dark);transition:transform .1s,box-shadow .1s,filter .12s;text-decoration:none;cursor:pointer}
.cta:hover{filter:brightness(1.07)}
.cta:active{transform:translateY(2px);box-shadow:0 1px 0 var(--pen-dark)}
:focus-visible{outline:2px solid var(--pen);outline-offset:2px}

.linkish,.bar .cta,.bar .wa{white-space:nowrap}
@media (max-width: 1180px){ .bar .wa span{display:none} .bar .wa{padding:9px 11px} }
@media (max-width: 1000px){ .bar-right .linkish[data-open-pro],.bar-right .pro-link{display:none} .bar{gap:10px} }
@media (max-width: 900px){ .mainnav{grid-template-columns:repeat(2,minmax(0,1fr))} }
@media (max-width: 720px){
  .bar{padding:0 14px;gap:8px;height:58px}
  .bar-right .linkish[data-open-pro],.bar-right .pro-link,.bar .cta,.bar .wa{display:none}
  .menu-btn{border:1.5px solid var(--act,var(--ink));color:var(--ink);padding:6px 13px}
  .menu-btn .d{display:none}.menu-btn .m{display:inline}
  .mainnav{grid-template-columns:1fr;padding:8px 12px 14px;gap:2px}
  .mainnav a{padding:10px 12px}
}
@media (max-width: 400px){
  .bar{padding:0 10px;gap:6px}
  .mark{font-size:18px;gap:7px}
  .menu-btn .m{display:none}.menu-btn{padding:8px 11px}
  .bar-right{gap:2px}
  .linkish{padding:8px 9px}
}

/* pie */
footer{padding:26px 20px 34px;text-align:center;color:var(--muted);font-size:13.5px;border-top:1px solid var(--line)}
footer a{color:inherit;white-space:nowrap}
@media (prefers-reduced-motion: reduce){ *{transition:none !important;animation:none !important} }