/* ───────────────────────────────────────────────────────────────────────────
   Base: fuentes, reinicio, tipografía y estructura de página.
   Se diseña primero a 360 px de ancho.
   ─────────────────────────────────────────────────────────────────────────── */

/* Fuentes autoalojadas. Schibsted Grotesk es variable (un archivo, pesos
   400–800). Newsreader se recortó al latín y se fijó su tamaño óptico: el
   original de Google pesaba 143 KB para usarse en cuatro palabras. */
@font-face { font-family: "Schibsted Grotesk"; src: url(../fuentes/schibsted-grotesk.woff2) format("woff2-variations"); font-weight: 400 800; font-style: normal; font-display: swap; }
@font-face { font-family: "IBM Plex Mono"; src: url(../fuentes/ibm-plex-mono-400.woff2) format("woff2"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "IBM Plex Mono"; src: url(../fuentes/ibm-plex-mono-500.woff2) format("woff2"); font-weight: 500; font-style: normal; font-display: swap; }
@font-face { font-family: "Newsreader"; src: url(../fuentes/newsreader-italic.woff2) format("woff2-variations"); font-weight: 300 400; font-style: italic; font-display: swap; }

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

/* Una rejilla sin columnas definidas mide lo que su contenedor, no lo que su
   contenido más largo: si no, un texto sin cortes o el lienzo del plano (50rem
   en el teléfono) ensanchan toda la página. Las columnas explícitas llevan
   `minmax(0, …)` por la misma razón. */
* { grid-auto-columns: minmax(0, 1fr); }

/* `hidden` gana siempre: sin esto, cualquier `display` de una clase lo anula
   y el elemento sigue a la vista (las flechas del visor con una sola foto). */
[hidden] { display: none !important; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--alto-barra) + var(--e-4));
}

/* Papel con grano. El ruido es un filtro SVG en línea: pesa unos cientos de
   bytes y evita el aspecto plano de un color sólido. */
body {
  min-height: 100dvh;
  font-family: var(--f-texto);
  font-size: var(--t-cuerpo);
  line-height: var(--interlineado);
  color: var(--tinta);
  background-color: var(--papel);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .086 0 0 0 0 .13 0 0 0 0 .106 0 0 0 .05 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23g)'/%3E%3C/svg%3E");
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

img, svg, video, canvas { display: block; max-width: 100%; }
img, video { height: auto; }

/* El <picture> no genera caja: así un `height: 100%` en la imagen se calcula
   contra su contenedor real. Con caja propia, la imagen dejaba franjas. */
picture { display: contents; }

input, button, textarea, select { font: inherit; color: inherit; }
button { cursor: pointer; background: none; border: 0; padding: 0; }
a { color: inherit; text-underline-offset: .18em; text-decoration-thickness: 1px; }

h1, h2, h3, h4 {
  font-family: var(--f-titular);
  font-weight: 600;
  line-height: var(--interlineado-titulo);
  letter-spacing: var(--tracking-titulo);
  text-wrap: balance;
}
p { text-wrap: pretty; }

:where(a, button, input, select, textarea, summary, [tabindex]):focus-visible {
  outline: 2px solid var(--terracota-oscura);
  outline-offset: 3px;
}

::selection { background: var(--terracota); color: var(--blanco); }

.solo-lectores {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip-path: inset(50%); white-space: nowrap;
}

.saltar {
  position: absolute; top: var(--e-2); left: var(--e-2); z-index: 100;
  padding: var(--e-3) var(--e-4);
  background: var(--tinta); color: var(--crema); font-weight: 600;
  translate: 0 -200%;
}
.saltar:focus { translate: 0 0; }

/* ── Tipografía de sistema ─────────────────────────────────────────────── */

.display { font-size: var(--t-display); }
.h2      { font-size: var(--t-h2); }
.h3      { font-size: var(--t-h3); letter-spacing: -.015em; line-height: 1.15; }
.entrada { font-size: var(--t-lead); line-height: 1.5; color: var(--tinta-2); max-width: 46ch; }
.chico   { font-size: var(--t-chico); }

/* Etiqueta mono: 13 px, tinta-3 a 5,4:1. Nunca con opacidad reducida: la
   versión anterior las ponía al 45 % y se leían con dificultad. */
.mono {
  font-family: var(--f-mono);
  font-size: var(--t-mono);
  font-weight: 500;
  letter-spacing: var(--tracking-mono);
  text-transform: uppercase;
  color: var(--tinta-3);
}

/* Acento editorial en itálica serif, uso puntual. */
.serif { font-family: var(--f-serif); font-style: italic; font-weight: 300; letter-spacing: -.01em; }

/* Palabra clave en terracota con subrayado grueso (un degradado de fondo, así
   el trazo se puede animar y no depende de la métrica de la fuente). */
.resalte {
  color: var(--terracota);
  background: linear-gradient(currentColor, currentColor) no-repeat 0 92% / 100% .075em;
  padding-bottom: .02em;
}

.tenue { color: var(--tinta-3); }

/* Cifras: SIN `tabular-nums`. En Schibsted Grotesk esa opción también le da
   a la coma y al punto el ancho de un dígito (25 px en vez de 11 a 40 px), y
   "191,05" se leía "191 ,05". Donde hay que alinear columnas se usa la mono. */
.cifra { font-variant-numeric: normal; }
.num-mono { font-family: var(--f-mono); font-weight: 500; letter-spacing: 0; }

/* ── Estructura ────────────────────────────────────────────────────────── */

.contenedor {
  width: min(100% - 2 * var(--canal), var(--ancho-max));
  margin-inline: auto;
}

/* main es un contenedor de consultas: con el menú lateral, el espacio real
   del contenido es ~260 px menor que la ventana, así que las composiciones a
   varias columnas se deciden por ese ancho (@container), no por la ventana. */
main { display: block; min-width: 0; container: contenido / inline-size; }

.pila    { display: flex; flex-direction: column; gap: var(--e-4); }
.pila-lg { display: flex; flex-direction: column; gap: var(--e-6); }
.fila    { display: flex; flex-wrap: wrap; align-items: center; gap: var(--e-3); }

/* Un hijo de flex con contenido ancho (el plano, una tabla) toma por defecto
   el ancho de ese contenido y empuja la página. `min-width: 0` lo evita. */
.pila > *, .pila-lg > * { min-width: 0; }