/* Chrome de marketing (bisnia.com apex). Consume tokens.css + primitives.css. */
:root{ --maxw:1160px; --code-bg:#0c0e12;
  --grid:linear-gradient(color-mix(in oklab,var(--text) 4%,transparent) 1px,transparent 1px),
         linear-gradient(90deg,color-mix(in oklab,var(--text) 4%,transparent) 1px,transparent 1px); }
.wrap{max-width:var(--maxw);margin:0 auto;padding:0 clamp(1.1rem,4vw,2rem)}
.accent{color:var(--accent-label)} .muted{color:var(--text-muted)}
:focus-visible{outline:2px solid var(--ring,var(--accent));outline-offset:2px;border-radius:4px}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}

/* Nav */
header.nav{position:sticky;top:0;z-index:var(--z-sticky);backdrop-filter:blur(12px);
  background:color-mix(in oklab,var(--bg) 82%,transparent);
  border-bottom:1px solid transparent;transition:border-color .3s var(--ease)}
header.nav.scrolled{border-bottom-color:var(--border)}
.nav-inner{display:flex;align-items:center;justify-content:space-between;height:66px;gap:1rem}
.brand{display:inline-flex;align-items:center;gap:.42em;font-family:var(--font-display);font-weight:700;font-size:1.4rem;letter-spacing:-.03em;color:var(--text)}
.brand-iso{height:1.06em;width:auto;transform:translateY(-.03em)}
.nav-links{display:flex;gap:1.8rem;align-items:center}
.nav-cta{display:flex;gap:.6rem;align-items:center}
.btn-lg{padding:.8rem 1.4rem;font-size:1rem}

/* Toggle + hamburguesa */
.nav-tools{display:flex;align-items:center;gap:.6rem}
.nav-toggle{display:none;background:none;border:1px solid var(--border);border-radius:var(--radius-sm);
  color:var(--text);cursor:pointer;width:40px;height:40px;place-items:center}
.nav-toggle svg{width:20px;height:20px}

/* Toggle de tema: el estado visual [aria-pressed="true"] (pista+perilla) ahora vive
   en brand/primitives.css (Ola4 T7) — se centralizó ahí porque docs/developer/reference
   también necesitan la regla y solo primitives.css lo cargan las 4 superficies. */

/* Menú móvil (disclosure) */
.site-menu{position:fixed;inset:66px 0 auto 0;z-index:var(--z-modal);background:var(--surface);
  border-bottom:1px solid var(--border);box-shadow:var(--shadow-card);
  padding:1rem clamp(1.1rem,4vw,2rem) 1.4rem;display:grid;gap:.4rem}
.site-menu[hidden]{display:none}
.site-menu a.nav-link{padding:.7rem .2rem;font-size:1.05rem}
.site-menu .menu-cta{display:grid;gap:.6rem;margin-top:.6rem}
body.menu-open{overflow:hidden}

/* Reveal */
.reveal{opacity:0;transform:translateY(16px);transition:opacity .7s var(--ease),transform .7s var(--ease)}
.reveal.in{opacity:1;transform:none}

/* Footer */
footer{border-top:1px solid var(--border);padding:3rem 0 2rem;background:var(--surface)}
.foot{display:grid;grid-template-columns:1.5fr 1fr 1fr 1fr 1fr;gap:2rem}
.foot .brand{margin-bottom:.8rem}
.foot p{font-size:.86rem;color:var(--text-muted);max-width:30ch}
.foot h3,.foot h4{font-family:var(--font-display);font-size:.82rem;color:var(--text-muted);text-transform:uppercase;letter-spacing:.08em;margin:0 0 1rem;font-weight:600} /* h3 (Ola4 T7, apex): evita salto h2→h4; h4 se queda para ayuda/status/blog (footer sin cambios ahí) */
.foot ul{list-style:none;padding:0;margin:0;display:grid;gap:.6rem}
.foot ul a{font-size:.9rem;color:var(--text-muted);transition:color .15s var(--ease)}
.foot ul a:hover{color:var(--text)}
.foot-bottom{margin-top:2.5rem;padding-top:1.5rem;border-top:1px solid var(--border);display:flex;justify-content:space-between;flex-wrap:wrap;gap:1rem;font-size:.82rem;color:var(--text-muted)}

/* Nav compacto (hamburguesa) a <=920px. La barra desktop (marca + 5 enlaces +
   toggle + Entrar/Crear cuenta) necesita ~900px; entre 821-899px se desbordaba
   (+29px@850, +9px@870) porque el corte estaba en 820px. Cambiamos a 920px para
   dejar ~20px de holgura sobre el punto de ajuste medido (~900px) y absorber la
   variación de rasterizado de texto entre motores (chromium/firefox/webkit). El
   footer conserva su propio corte a 820px: su layout no forma parte de este bug. */
@media (max-width:920px){
  .nav-links{display:none}
  /* nav-cta ya vive duplicado en .site-menu .menu-cta (disclosure móvil); mostrarlo
     también aquí junto al toggle+hamburguesa desborda <=375px (T4, index.html con
     2 botones Entrar/Crear cuenta). Ocultarlo en el nav compacto, no en el menú. */
  .nav-cta{display:none}
  .nav-toggle{display:grid}
}
@media (max-width:820px){
  .foot{grid-template-columns:1fr 1fr}
}
@media (max-width:520px){ .foot{grid-template-columns:1fr} }
@media (prefers-reduced-motion:reduce){
  .reveal{opacity:1;transform:none;transition:none}
  html{scroll-behavior:auto}
  *{animation:none!important;transition-duration:.001ms!important}
}