/*
 * variables.css — el "sistema de diseño" de la revista en un solo lugar.
 *
 * Si algún día quieren cambiar un color o una tipografía de TODO el sitio,
 * este es el único archivo que hay que tocar. El resto del CSS (editorial.css)
 * usa estas variables en vez de colores/tamaños escritos directamente.
 */

/* Brawler (Google Fonts) alojada acá mismo, no enlazada a Google -- mismo
   motivo que ya evitaba Google Fonts para el cuerpo: una petición menos a
   un servidor externo, y no depende de que Google esté disponible. */
@font-face {
	font-family: 'Brawler';
	font-style: normal;
	font-weight: 400;
	font-display: swap;
	src: url('../fonts/brawler-400.woff2') format('woff2');
}

@font-face {
	font-family: 'Brawler';
	font-style: normal;
	font-weight: 700;
	font-display: swap;
	src: url('../fonts/brawler-700.woff2') format('woff2');
}

/* Libre Franklin ExtraBold: la que se usa para los títulos -- una
   palo seco bien gruesa, distinta de Brawler (que se usa solo en el
   cuerpo de texto), imitando el título de la imagen de referencia. */
@font-face {
	font-family: 'Libre Franklin';
	font-style: normal;
	font-weight: 800;
	font-display: swap;
	src: url('../fonts/libre-franklin-800.woff2') format('woff2');
}

:root {
	/* --- Paleta: sin color ---
	   El sitio es monocromo. No hay ningún color de acento: lo que antes
	   marcaba el rojo ahora lo marca el peso de la letra, el negro pleno o
	   una línea. Los estados (pasar el cursor, el foco del teclado) se
	   resuelven moviendo el gris hacia el negro, o al revés. --- */

	/* El fondo de la página no es blanco: es un beige apagado, de papel
	   viejo. La idea es que no encandile — el blanco de pantalla cansa a los
	   veinte minutos de lectura — y que las líneas divisorias finas se vean
	   sin tener que oscurecerlas.
	   Los tonos son la misma familia cálida, separados solo por cuánta
	   luz tienen: se pueden mover en bloque, pero conviene moverlos juntos. */
	--color-fondo: #e7e4dc;        /* el papel: beige suave, sin brillo */
	--color-fondo-alt: #dbd7cc;    /* bloques hundidos: un paso más oscuro */
	--color-texto: #131313;        /* casi negro puro; sobre el papel da 14.7:1 */

	/* El gris del texto secundario (pies de foto, fechas, resúmenes). Está
	   calculado contra el papel: da 5:1, por encima del 4.5:1 que pide la
	   norma de accesibilidad. Si algún día se oscurece el fondo, hay que
	   oscurecer este gris con él. */
	--color-gris: #625f58;
	--color-borde: #c9c3b6;        /* líneas divisorias, bordes de tarjetas */

	/* El color de "pasar el cursor": un titular o un enlace se aclara hacia
	   acá en vez de encenderse de color. En el encabezado y el pie, que son
	   negros, vale blanco (ver editorial.css). */
	--color-realce: #625f58;


	/* --- Tipografía ---
	   Títulos en Libre Franklin ExtraBold (palo seco, mayúscula) y cuerpo
	   de texto en Brawler (serif) -- la misma combinación de la imagen de
	   referencia: título grueso arriba, texto corrido en serif abajo. */
	--fuente-titulos: 'Libre Franklin', 'Helvetica Neue', Helvetica, Arial, sans-serif;
	--fuente-cuerpo: 'Brawler', Georgia, 'Times New Roman', serif;

	/* clamp() = tamaño mínimo, tamaño ideal, tamaño máximo.
	   Así el texto se ajusta solo entre celular y pantalla grande sin
	   necesidad de escribir reglas distintas para cada ancho.
	   Estos tres son los tamaños generales. Dentro de una entrada los títulos
	   van un escalón más chicos, y eso se resuelve en editorial.css. */
	--tamano-h1: clamp(3.25rem, 8vw, 5rem);
	--tamano-h2: clamp(2.5rem, 6vw, 3.5rem);
	--tamano-h3: clamp(1.75rem, 3.5vw, 2.25rem);
	--tamano-cuerpo: 1.0625rem;
	--tamano-pie-foto: 0.875rem;
	--tamano-cita: clamp(1.25rem, 2.4vw, 1.625rem);

	--espaciado-seccion: clamp(2rem, 5vw, 4rem);
	/* Ancho de la caja de texto largo: el cuerpo de una entrada y de las
	   páginas de texto corrido.
	   Cuanto más grande, más angostos quedan los márgenes blancos a los
	   costados. Subirlo mucho más que esto empieza a costar de leer: el ojo
	   se pierde al saltar de renglón. */
	--ancho-maximo-lectura: 52rem;

	/* Ancho de las secciones de la portada, la convocatoria y el pie. Es el que decide cuánto blanco queda a izquierda y derecha:
	   más grande = márgenes más chicos = entra más texto por renglón.
	   Se separa del de arriba a propósito: acá hay títulos, columnas y
	   listas, no párrafos largos, así que aguanta más ancho sin molestar. */
	--ancho-maximo-seccion: 80rem;

	/* --- Retícula del diario ---
	   Ancho de la caja donde vive TODO el contenido de la portada, y aire a
	   los costados. Son las dos medidas que gobiernan el diseño nuevo: la
	   columna central mide --ancho-tira y respira --aire-lateral. */
	/* Se ensanchó de 1280 a 1480: con foto en las tres columnas, la angosta
	   de la derecha quedaba con unos 130 px para el titular, y en esa medida
	   ningún titular llega solo al borde -- había que agrandarlo tanto que
	   desentonaba, o dejarlo sin justificar. Con 1480 esa columna pasa a
	   tener unos 200 px de texto, que ya alcanzan. En pantallas más chicas no
	   cambia nada: la tira nunca es más ancha que la ventana. */
	--ancho-tira: 1480px;
	--aire-lateral: 1rem;

	/* Separación vertical entre secciones de la portada. Todas usan la
	   misma para que el ritmo de la página sea parejo. */
	--aire-seccion: clamp(1.25rem, 2.6vw, 2rem);

	/* --- Textura de grano ---
	   Un ruido muy sutil sobre los dos bloques negros (encabezado y pie).
	   Es un SVG escrito acá mismo, no un archivo aparte: no suma ningún
	   pedido de red. La matriz de color deja el ruido en blanco puro y solo
	   varía la transparencia (hasta 0.06), así que no agrega ningún color.
	   Se usa como imagen de fondo: queda siempre detrás del texto. */
	--textura-grano: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0naHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmcnIHdpZHRoPScxODAnIGhlaWdodD0nMTgwJz48ZmlsdGVyIGlkPSduJz48ZmVUdXJidWxlbmNlIHR5cGU9J2ZyYWN0YWxOb2lzZScgYmFzZUZyZXF1ZW5jeT0nMC44NScgbnVtT2N0YXZlcz0nMicgc3RpdGNoVGlsZXM9J3N0aXRjaCcvPjxmZUNvbG9yTWF0cml4IHR5cGU9J21hdHJpeCcgdmFsdWVzPScwIDAgMCAwIDEgIDAgMCAwIDAgMSAgMCAwIDAgMCAxICAwIDAgMCAwLjA2IDAnLz48L2ZpbHRlcj48cmVjdCB3aWR0aD0nMTAwJScgaGVpZ2h0PScxMDAlJyBmaWx0ZXI9J3VybCgjbiknLz48L3N2Zz4=");
}