/*
 * Tokens de diseño.
 *
 * Dirección: ficha técnica industrial. El contenido de Nieser son datos duros
 * — dosis, espectro de control, principios activos — así que el diseño los
 * trata como lo que son: una hoja de especificaciones. Alto contraste,
 * jerarquía tipográfica agresiva y la data en monoespaciada.
 *
 * El ADN de marca se conserva: Poppins 600 para títulos, Roboto para texto,
 * y el verde #7ABC5A muestreado de los píxeles reales del sitio en producción.
 * Lo que cambia es la ejecución, no la identidad.
 */

:root {
	/* ── Marca ─────────────────────────────────────────────────────────── */
	--nsr-green: #7abc5a;        /* el verde del sitio, sin tocar */
	--nsr-green-600: #56b259;
	--nsr-green-700: #3f8f42;
	--nsr-green-900: #17301b;    /* verde casi negro, para fondos con peso */
	--nsr-green-050: #eef4ea;

	/* ── Neutros ────────────────────────────────────────────────────────
	 * El negro tiene subtono verde para que no pelee con la marca.        */
	--nsr-ink: #0c120e;
	--nsr-ink-soft: #4e5a50;
	--nsr-ink-faint: #8d9a90;
	--nsr-line: #dde3dc;
	--nsr-line-strong: #b9c4ba;
	--nsr-surface: #ffffff;
	--nsr-paper: #f4f5f1;        /* papel de laboratorio */

	/* ── Colores de las 4 líneas ────────────────────────────────────────
	 * Saturados: se usan como acento estructural, no como decoración.    */
	--nsr-vet: #3b4fd8;
	--nsr-pet: #e2661f;
	--nsr-food: #d9b21a;
	--nsr-green-line: #4f9e3c;

	/* ── Tipografía ─────────────────────────────────────────────────────
	 * La mono es la novedad: los datos técnicos se leen como spec sheet.
	 * Stack de sistema, así no suma ni un byte de descarga.               */
	--nsr-font-head: 'Poppins', system-ui, -apple-system, sans-serif;
	--nsr-font-body: 'Roboto', system-ui, -apple-system, sans-serif;
	/* Solo DOS familias en todo el sitio, las de la marca. No hay
	   monoespaciada: se probó para los datos técnicos y se descartó porque
	   introducía una tercera tipografía ajena a la identidad. Los números se
	   alinean con font-variant-numeric, no con una fuente aparte. */
	--nsr-font-ui: var(--nsr-font-body);

	/* Escala fluida con MUCHO más contraste que antes: el salto entre el
	   display y el cuerpo es lo que moderniza la página. */
	--nsr-text-2xs: 0.6875rem;
	--nsr-text-xs: 0.75rem;
	--nsr-text-sm: 0.875rem;
	--nsr-text-base: 1.0625rem;
	--nsr-text-lg: clamp(1.125rem, 0.5vw + 1rem, 1.3125rem);
	--nsr-text-xl: clamp(1.375rem, 1vw + 1.1rem, 1.75rem);
	--nsr-text-2xl: clamp(1.375rem, 1.2vw + 1.05rem, 1.875rem);
	--nsr-text-3xl: clamp(1.625rem, 1.8vw + 1rem, 2.375rem);
	--nsr-text-4xl: clamp(1.875rem, 2.4vw + 1rem, 3rem);
	--nsr-text-display: clamp(1.75rem, 2.2vw + 0.9rem, 2.75rem);

	--nsr-leading-none: 0.95;
	--nsr-leading-tight: 1.04;
	--nsr-leading-snug: 1.3;
	--nsr-leading: 1.62;

	/* Tracking: negativo fuerte en display, muy abierto en micro-labels. */
	--nsr-track-display: -0.04em;
	--nsr-track-tight: -0.02em;
	--nsr-track-label: 0.16em;

	/* ── Espaciado ─────────────────────────────────────────────────────── */
	--nsr-space-1: 0.25rem;
	--nsr-space-2: 0.5rem;
	--nsr-space-3: 0.75rem;
	--nsr-space-4: 1rem;
	--nsr-space-6: 1.5rem;
	--nsr-space-8: 2rem;
	--nsr-space-12: 3rem;
	--nsr-space-16: 4rem;
	--nsr-space-24: 6rem;
	--nsr-space-32: 8rem;

	--nsr-section-y: clamp(4.5rem, 9vw, 9rem);

	/* ── Layout ────────────────────────────────────────────────────────── */
	--nsr-container: 1320px;
	--nsr-container-narrow: 720px;
	--nsr-gutter: clamp(1.25rem, 5vw, 4rem);

	/* ── Forma ─────────────────────────────────────────────────────────── */
	--nsr-radius: 4px;
	--nsr-radius-lg: 10px;
	--nsr-shadow: 0 1px 2px rgb(12 18 14 / 5%), 0 8px 24px -8px rgb(12 18 14 / 12%);
	--nsr-shadow-lg: 0 2px 4px rgb(12 18 14 / 6%), 0 24px 56px -16px rgb(12 18 14 / 22%);

	/* ── Movimiento ────────────────────────────────────────────────────── */
	--nsr-ease: cubic-bezier(0.22, 0.9, 0.26, 1);
	--nsr-ease-out: cubic-bezier(0.16, 1, 0.3, 1);
	--nsr-duration: 260ms;
	--nsr-duration-slow: 620ms;

	/* ── Textura ────────────────────────────────────────────────────────
	 * Grano en SVG inline: da atmósfera sin pedir un request ni un PNG.  */
	--nsr-grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)' opacity='0.42'/%3E%3C/svg%3E");
}

/* Respeta a quien pide menos movimiento. */
@media (prefers-reduced-motion: reduce) {
	:root {
		--nsr-duration: 0ms;
		--nsr-duration-slow: 0ms;
	}

	*,
	*::before,
	*::after {
		animation-duration: 0.01ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: 0.01ms !important;
		scroll-behavior: auto !important;
	}
}