/* Chrome compartido de las páginas HTML estáticas (marketing, guías,
   legal, home) -- ticket [Contenido 5/7]. Antes, cada una de las ~311
   páginas repetía este CSS en su propio <style> inline (24.455 líneas
   totales, 71% duplicadas -- el bloque de tema aparecía idéntico en 70
   archivos). Servido una vez junto a brand-tokens.css, cacheado por el
   navegador entre páginas.

   Escrito por familia, no de golpe (ver el ticket). Cada regla de acá
   abajo se confirmó BYTE A BYTE idéntica ANTES de moverla -- nunca al
   revés. Reglas inertes en un arquetipo que no las usa (ej. header.nav
   en una página legal, que no tiene esa clase) no son un problema: CSS
   sin selector que matchee simplemente no hace nada, no hace falta un
   site.css por arquetipo. */

/* ---- Universal: marketing + guías + legal (confirmado en los 3) ---- */
* { box-sizing: border-box; }
body { margin: 0; font-family: var(--font); color: var(--ink); background: var(--bg); line-height: 1.7; }
.brand__mark { width: 32px; height: 32px; display: block; filter: drop-shadow(0 3px 6px rgba(33, 29, 22, 0.28)); }
[data-theme="dark"] .brand__mark { filter: drop-shadow(0 3px 7px rgba(0, 0, 0, 0.5)) drop-shadow(0 0 7px color-mix(in srgb, var(--accent) 40%, transparent)); }
.lang { color: var(--muted); font-size: 13.5px; font-weight: 600; white-space: nowrap; }

/* ---- Marketing + guías (legal usa .top/.back, no esto) ---- */
a { color: var(--accent); text-decoration: none; }
header.nav { position: sticky; top: 0; z-index: 20; background: rgba(255,255,255,0.9); backdrop-filter: blur(8px); border-bottom: 1px solid var(--line); }
[data-theme="dark"] header.nav { background: rgba(18, 21, 26, 0.9); }
.brand { display: flex; align-items: center; gap: 9px; font-weight: 800; font-size: 17px; letter-spacing: -0.3px; color: var(--ink); }
.btn { display: inline-block; border-radius: var(--radius); padding: 10px 16px; font-weight: 700; font-size: 14px; }
.btn--primary { background: var(--accent); color: #fff; }
.crumb { color: var(--muted); font-size: 14px; padding-top: 28px; }
.crumb a { color: var(--muted); }
article { padding: 6px 0 50px; }
.cta h3 { color: #fff; margin: 0 0 8px; font-size: 21px; }
.cta p { color: #c4cde0; margin: 0 0 16px; }
footer { border-top: 1px solid var(--line); padding: 30px 0; color: var(--muted); font-size: 14px; }
footer a { color: var(--muted); }

.theme-btn {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  border: 1px solid var(--line);
  background: transparent;
  color: var(--ink);
  cursor: pointer;
  line-height: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.theme-btn svg { display: block; }
.theme-btn:hover { border-color: var(--accent); }

select.lang {
  appearance: none;
  -webkit-appearance: none;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: transparent url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='10' height='10' viewBox='0 0 24 24' fill='none' stroke='%237a8696' stroke-width='3'><path d='M6 9l6 6 6-6'/></svg>") no-repeat right 10px center;
  color: var(--muted);
  font-weight: 700;
  font-size: 13px;
  font-family: inherit;
  padding: 7px 26px 7px 13px;
  cursor: pointer;
  line-height: 1;
}
select.lang:hover { border-color: var(--accent); color: var(--ink); }

@media (max-width: 519px) {
  .nav__right { gap: 9px; }
  .nav__right .btn--primary { padding: 8px 12px; font-size: 13.5px; }
}