/* =====================================================================
   base.css · Tipografía, elementos HTML y utilidades
   ---------------------------------------------------------------------
   Estilos de partida para toda la web. Todos los valores vienen de
   tokens.css. Lo específico de cada pieza está en componentes.css.
   ===================================================================== */

*, *::before, *::after { box-sizing: border-box; }

/* El tamaño base lleva el factor de letra de los ajustes: al cambiarlo, todo
   lo que esté en rem crece a la vez. */
html {
  font-size: calc(var(--base-porcentaje) * var(--factor-texto));
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: var(--e-4);
}

html[data-movimiento='reducido'] { scroll-behavior: auto; }

/* Sin desplazamiento suave para quien lo pide en su sistema. */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
}

body {
  margin: 0;
  min-height: 100vh;
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
  background: var(--fondo);
  color: var(--texto);
  font-family: var(--fuente);
  font-size: var(--t-texto);
  line-height: var(--interlineado);
  overflow-wrap: break-word;
}

main { flex: 1 0 auto; }

h1, h2, h3, h4 {
  margin: 0;
  color: var(--texto);
  font-weight: 800;
  line-height: var(--interlineado-titulo);
  /* Con letra Enorme en móvil una sola palabra larga puede no caber en la línea.
     Solo entonces se parte, y sin guion: los cortes cuestan de leer. */
  overflow-wrap: anywhere;
  /* Líneas equilibradas. Si el navegador no lo admite, no pasa nada. */
  text-wrap: balance;
}

h1 { font-size: var(--t-titulo-grande); }
h2 { font-size: var(--t-seccion); }
h3 { font-size: var(--t-subtitulo); }
h4 { font-size: var(--t-destacado); }

p { margin: 0; text-wrap: pretty; }

a { color: var(--enlace); text-underline-offset: 0.15em; }
a:hover { color: var(--principal-oscuro); }

img, svg { display: block; max-width: 100%; }

button, input, select, textarea { font: inherit; color: inherit; }

button { cursor: pointer; }

ul, ol { margin: 0; padding: 0; }

/* Foco grueso y visible en todo (sección 19): se dibuja por fuera con doble
   anillo para que se vea sobre cualquier fondo, también sobre el verde. */
:focus-visible {
  outline: var(--grosor-foco) solid var(--texto);
  outline-offset: var(--separacion-foco);
  box-shadow: 0 0 0 var(--separacion-foco) var(--superficie);
}

.icono { width: var(--icono); height: var(--icono); flex: none; }
.icono--pequeno { width: var(--icono-pequeno); height: var(--icono-pequeno); flex: none; }
.icono--grande { width: var(--icono-grande); height: var(--icono-grande); flex: none; }

/* --- Utilidades --- */

/* Oculta a la vista pero lo mantiene para lectores de pantalla. */
.solo-lector {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

.contenedor {
  width: 100%;
  max-width: calc(var(--ancho-contenedor) + 2 * var(--margen-lateral));
  margin-inline: auto;
  padding-inline: var(--margen-lateral);
}

.lectura { max-width: var(--ancho-lectura); }

.nota { color: var(--texto-tenue); font-size: var(--t-nota); }

.pila > * + * { margin-top: var(--e-4); }

/* El atributo hidden debe ganar siempre a cualquier display de componentes. */
[hidden] { display: none !important; }

/* Piezas que solo aparecen en un tamaño de pantalla. Cambian el texto o la
   composición que marcan las maquetas de cada dispositivo. Se usa !important
   al ocultar porque componentes.css se carga después y define su `display`. */
@media (max-width: 1199px) {
  .solo-escritorio { display: none !important; }
}

@media (min-width: 600px) {
  .solo-movil { display: none !important; }
}

@media (min-width: 1200px) {
  .no-escritorio { display: none !important; }
}

@media (max-width: 599px) {
  .no-movil { display: none !important; }
}