/* Helios · base 1.0 */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: 88px; }
body {
  margin: 0;
  background: var(--fondo);
  color: var(--texto);
  font-family: var(--sans);
  font-size: var(--t-cuerpo);
  line-height: var(--lh-cuerpo);
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  accent-color: var(--tinta);
  caret-color: var(--borgona);
}
::selection { background: var(--arena); color: var(--tinta); }
h1, h2, h3, h4 { font-family: var(--serif); font-weight: 400; color: var(--texto); margin: 0; text-wrap: balance; }
h1 { font-size: var(--t-hero); line-height: var(--lh-hero); letter-spacing: var(--track-display); }
h2 { font-size: var(--t-seccion); line-height: var(--lh-seccion); letter-spacing: var(--track-display); }
h3 { font-family: var(--sans); font-weight: 500; font-size: var(--t-sub); line-height: var(--lh-sub); }
p { margin: 0; max-width: 62ch; text-wrap: pretty; }
p + p { margin-top: var(--e4); }
strong { font-weight: 600; }
a { color: var(--tinta); text-decoration: underline; text-decoration-color: var(--tinta-linea); text-decoration-thickness: 1px; text-underline-offset: .22em; transition: color var(--dur) var(--curva), text-decoration-color var(--dur) var(--curva); }
a:hover { color: var(--borgona); text-decoration-color: currentColor; }
:focus-visible { outline: var(--foco-ancho) solid var(--foco-claro); outline-offset: var(--foco-sep); border-radius: 2px; }
.oscuro :focus-visible, .oscuro:focus-visible { outline-color: var(--foco-oscuro); }
img, svg { display: block; max-width: 100%; height: auto; }
ul, ol { margin: 0; padding: 0; list-style: none; }
button, input, select, textarea { font: inherit; color: inherit; }

/* Contenedor y ritmo */
.contenedor { width: 100%; max-width: var(--contenedor); margin-inline: auto; padding-inline: var(--margen); }
.seccion { padding-block: var(--seccion); }
.apoyo { font-size: var(--t-apoyo); line-height: var(--lh-apoyo); color: var(--texto-apoyo); }
.sub { font-size: var(--t-sub); line-height: var(--lh-sub); font-weight: 500; }
.etiqueta { font-size: var(--t-apoyo); line-height: var(--lh-apoyo); font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--oliva); }
.visualmente-oculto { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; }
.oscuro { background: var(--tinta); color: var(--crema); }
.oscuro h1, .oscuro h2, .oscuro h3, .oscuro a { color: var(--crema); }
.oscuro a:hover { color: var(--arena); }
.oscuro ::selection { background: var(--crema); color: var(--tinta); }
.oscuro .apoyo { color: var(--arena); }

/* Barras de desplazamiento, cuando el sistema las muestra */
@supports (scrollbar-color: auto) { html { scrollbar-color: var(--arena) var(--crema); scrollbar-width: thin; } }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
}