/* Lo común a todo: reinicio, texto y utilidades. Los componentes están en componentes.css y los
   valores (colores, tamaños, espacios, radios, tiempos) en tokens.css. */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0; background: var(--c-panel); color: var(--c-texto); letter-spacing: var(--esp-texto);
  font-family: var(--f-texto); font-size: var(--t-m); line-height: var(--lh);
  overflow-wrap: anywhere; -webkit-font-smoothing: antialiased;
}
h1, h2, h3 { line-height: 1.2; margin: 0 0 var(--e-3); font-weight: var(--peso-fuerte); letter-spacing: var(--esp-titulo); }
h3 { letter-spacing: var(--esp-texto); }
h1 { font-size: var(--t-xl); }
h2 { font-size: var(--t-l); }
h3 { font-size: var(--t-m); }
p { margin: 0 0 var(--e-3); }
a { color: var(--c-enlace); text-underline-offset: 0.15em; }
@media (hover: hover) { a:hover { color: var(--c-enlace-hover); } }
img, svg { max-width: 100%; }
:focus-visible { outline: 2px solid var(--c-foco); outline-offset: 2px; }
::selection { background: var(--c-accion-suave); }
.cifra { font-variant-numeric: tabular-nums; white-space: nowrap; }
.codigo { font-family: var(--f-codigo); font-size: var(--t-s); }
.suave { color: var(--c-texto-2); }
.pequeño { font-size: var(--t-s); }
.oculto { display: none !important; }
.visually-hidden { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 1ms !important; animation-iteration-count: 1 !important; transition-duration: 1ms !important; scroll-behavior: auto !important; }
}