/*
 * Nieser — estilos del tema.
 *
 * Dirección: ficha técnica industrial. Sin framework, sin builder, sin jQuery.
 * Toda la animación es CSS: los reveals usan animation-timeline nativo, así que
 * no hay ni un byte de JS de scroll.
 */

/* tokens.css y fonts.css se encolan por separado desde inc/assets.php:
   un @import acá encadenaría los requests en serie. */

/* ══════════════════════════════════════════════════════════════════════════
   Base
   ══════════════════════════════════════════════════════════════════════════ */

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

html {
	-webkit-text-size-adjust: 100%;
	scroll-behavior: smooth;
}

body {
	margin: 0;
	background: var(--nsr-surface);
	color: var(--nsr-ink);
	font-family: var(--nsr-font-body);
	font-size: var(--nsr-text-base);
	line-height: var(--nsr-leading);
	-webkit-font-smoothing: antialiased;
	text-rendering: optimizeLegibility;
}

h1, h2, h3, h4 {
	margin: 0 0 var(--nsr-space-4);
	font-family: var(--nsr-font-head);
	font-weight: 600;
	line-height: var(--nsr-leading-tight);
	letter-spacing: var(--nsr-track-tight);
	text-wrap: balance;
}

h1 { font-size: var(--nsr-text-4xl); letter-spacing: var(--nsr-track-display); }
h2 { font-size: var(--nsr-text-3xl); letter-spacing: var(--nsr-track-display); }
h3 { font-size: var(--nsr-text-xl); }
h4 { font-size: var(--nsr-text-lg); }

p {
	margin: 0 0 var(--nsr-space-4);
	/* El sitio viejo justificaba el hero y quedaban ríos. Nunca. */
	text-align: start;
	text-wrap: pretty;
}

p:last-child { margin-bottom: 0; }

a {
	color: var(--nsr-green-700);
	text-decoration-thickness: 1px;
	text-underline-offset: 0.18em;
}

a:hover { color: var(--nsr-ink); }

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

ul, ol { margin: 0 0 var(--nsr-space-4); padding-inline-start: 1.15em; }
li + li { margin-top: var(--nsr-space-2); }

:focus-visible {
	outline: 2px solid var(--nsr-green-700);
	outline-offset: 3px;
	border-radius: 2px;
}

::selection {
	background: var(--nsr-green);
	color: var(--nsr-ink);
}

.nsr-skip {
	position: absolute;
	inset-inline-start: -9999px;
	z-index: 999;
	padding: var(--nsr-space-3) var(--nsr-space-4);
	background: var(--nsr-ink);
	color: #fff;
	text-decoration: none;
}

.nsr-skip:focus {
	inset-inline-start: var(--nsr-space-4);
	top: var(--nsr-space-4);
	color: #fff;
}

.screen-reader-text {
	position: absolute !important;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip-path: inset(50%);
	white-space: nowrap;
	border: 0;
}

/* ══════════════════════════════════════════════════════════════════════════
   Reveals — CSS puro, sin observer ni librería
   ══════════════════════════════════════════════════════════════════════════ */

@keyframes nsr-rise {
	from { opacity: 0; transform: translateY(28px); }
	to   { opacity: 1; transform: none; }
}

@keyframes nsr-wipe {
	from { transform: scaleX(0); }
	to   { transform: scaleX(1); }
}

/* animation-timeline: view() dispara el reveal al entrar en viewport sin JS.
   Donde no existe, el contenido simplemente se ve: nada queda invisible. */
@supports (animation-timeline: view()) {
	@media (prefers-reduced-motion: no-preference) {
		.nsr-reveal {
			animation: nsr-rise linear both;
			animation-timeline: view();
			animation-range: entry 5% cover 26%;
		}
	}
}

/* ══════════════════════════════════════════════════════════════════════════
   Layout
   ══════════════════════════════════════════════════════════════════════════ */

.nsr-container {
	width: 100%;
	max-width: var(--nsr-container);
	margin-inline: auto;
	padding-inline: var(--nsr-gutter);
}

.nsr-container--narrow { max-width: var(--nsr-container-narrow); }

.nsr-section { padding-block: var(--nsr-section-y); }

.nsr-section--tint { background: var(--nsr-green-050); }
.nsr-section--paper { background: var(--nsr-paper); }

/* Fondo oscuro con grano: donde el diseño necesita peso. */
.nsr-section--ink {
	position: relative;
	background: var(--nsr-ink);
	color: #fff;
	isolation: isolate;
}

.nsr-section--ink::before {
	content: '';
	position: absolute;
	inset: 0;
	z-index: -1;
	background-image: var(--nsr-grain);
	opacity: 0.055;
	pointer-events: none;
}

.nsr-section--ink h1,
.nsr-section--ink h2,
.nsr-section--ink h3 { color: #fff; }

/* ── Encabezado de sección ───────────────────────────────────────────────
 * Número en mono + regla a todo el ancho + título grande. Es el patrón que
 * ordena la página y reemplaza al eyebrow timido del sitio viejo.          */

.nsr-shead {
	margin-bottom: clamp(var(--nsr-space-8), 4vw, var(--nsr-space-16));
}

.nsr-shead__meta {
	display: flex;
	align-items: baseline;
	gap: var(--nsr-space-4);
	padding-bottom: var(--nsr-space-4);
	border-bottom: 1px solid var(--nsr-line);
	margin-bottom: var(--nsr-space-8);
}

.nsr-section--ink .nsr-shead__meta { border-color: rgb(255 255 255 / 18%); }

.nsr-shead__num {
	font-family: var(--nsr-font-ui);
	font-size: var(--nsr-text-2xs);
	font-weight: 500;
	letter-spacing: 0.1em;
	font-variant-numeric: tabular-nums;
}

.nsr-label {
	font-family: var(--nsr-font-ui);
	font-size: var(--nsr-text-2xs);
	font-weight: 500;
	letter-spacing: var(--nsr-track-label);
	text-transform: uppercase;
}

.nsr-shead__num { color: var(--nsr-green-700); }
.nsr-section--ink .nsr-shead__num { color: var(--nsr-green); }

.nsr-shead__label { color: var(--nsr-ink-soft); }
.nsr-section--ink .nsr-shead__label { color: rgb(255 255 255 / 62%); }

.nsr-shead__title {
	max-width: 26ch;
	margin: 0;
}

.nsr-shead__title--wide { max-width: 34ch; }

.nsr-label {
	display: block;
	color: var(--nsr-ink-soft);
}

.nsr-lead {
	max-width: 58ch;
	color: var(--nsr-ink-soft);
	font-size: var(--nsr-text-lg);
}

.nsr-section--ink .nsr-lead { color: rgb(255 255 255 / 76%); }

/* ══════════════════════════════════════════════════════════════════════════
   Botones
   ══════════════════════════════════════════════════════════════════════════ */

.nsr-btn {
	position: relative;
	display: inline-flex;
	align-items: center;
	gap: var(--nsr-space-3);
	padding: 1em 1.75em;
	border: 1px solid var(--nsr-ink);
	border-radius: 100px;
	background: var(--nsr-ink);
	color: #fff;
	font-family: var(--nsr-font-ui);
	font-size: var(--nsr-text-sm);
	font-weight: 500;
	letter-spacing: 0.02em;
	line-height: 1;
	text-decoration: none;
	cursor: pointer;
	overflow: hidden;
	/* Contexto de apilado propio: sin esto el relleno del ::after se iba
	   detrás del fondo del botón en Safari y el texto quedaba invisible. */
	isolation: isolate;
	transition: color var(--nsr-duration) var(--nsr-ease),
		border-color var(--nsr-duration) var(--nsr-ease);
}

/* El relleno verde entra desde abajo en hover: un solo gesto, memorable. */
.nsr-btn::after {
	content: '';
	position: absolute;
	inset: 0;
	z-index: 0;
	background: var(--nsr-green);
	transform: translateY(101%);
	transition: transform var(--nsr-duration) var(--nsr-ease);
}

.nsr-btn > * { position: relative; z-index: 1; }

.nsr-btn:hover,
.nsr-btn:focus-visible {
	color: var(--nsr-ink);
	border-color: var(--nsr-green);
}

.nsr-btn:hover::after,
.nsr-btn:focus-visible::after { transform: none; }

.nsr-btn--ghost {
	background: transparent;
	border-color: var(--nsr-line-strong);
	color: var(--nsr-ink);
}

.nsr-btn--on-dark {
	background: transparent;
	border-color: rgb(255 255 255 / 40%);
	color: #fff;
}

/* Flechita que se corre en hover. */
.nsr-btn__arrow {
	transition: transform var(--nsr-duration) var(--nsr-ease);
}

.nsr-btn:hover .nsr-btn__arrow { transform: translateX(4px); }

/* ══════════════════════════════════════════════════════════════════════════
   Header
   ══════════════════════════════════════════════════════════════════════════ */

.nsr-header {
	position: sticky;
	top: 0;
	z-index: 100;
	background: rgb(255 255 255 / 86%);
	backdrop-filter: blur(14px) saturate(1.4);
	border-bottom: 1px solid var(--nsr-line);
}

.nsr-header__inner {
	display: flex;
	align-items: center;
	gap: var(--nsr-space-8);
	min-height: 76px;
}

.nsr-header__logo { flex-shrink: 0; line-height: 0; }
.nsr-header__logo img { width: auto; height: 38px; }

.nsr-nav { margin-inline-start: auto; }

.nsr-nav ul {
	display: flex;
	flex-wrap: wrap;
	gap: var(--nsr-space-8);
	margin: 0;
	padding: 0;
	list-style: none;
}

.nsr-nav li { margin: 0; }

.nsr-nav a {
	position: relative;
	display: block;
	padding-block: var(--nsr-space-2);
	color: var(--nsr-ink);
	font-family: var(--nsr-font-ui);
	font-size: var(--nsr-text-sm);
	font-weight: 500;
	letter-spacing: 0.04em;
	text-decoration: none;
}

/* Subrayado que se despliega desde la izquierda. */
.nsr-nav a::after {
	content: '';
	position: absolute;
	inset-inline: 0;
	bottom: 0;
	height: 2px;
	background: var(--nsr-green);
	transform: scaleX(0);
	transform-origin: left;
	transition: transform var(--nsr-duration) var(--nsr-ease);
}

.nsr-nav a:hover::after,
.nsr-nav .current-menu-item > a::after { transform: none; }

.nsr-nav-toggle {
	display: none;
	margin-inline-start: auto;
	padding: var(--nsr-space-2);
	border: 1px solid var(--nsr-line);
	border-radius: var(--nsr-radius);
	background: none;
	cursor: pointer;
}

@media (max-width: 960px) {
	.nsr-nav-toggle { display: block; }

	.nsr-nav {
		display: none;
		flex-basis: 100%;
		margin-inline-start: 0;
		padding-block: var(--nsr-space-6);
	}

	.nsr-nav[data-open='true'] { display: block; }
	.nsr-header__inner { flex-wrap: wrap; }
	.nsr-nav ul { flex-direction: column; gap: var(--nsr-space-4); }
}

/* ══════════════════════════════════════════════════════════════════════════
   Hero
   ══════════════════════════════════════════════════════════════════════════ */

.nsr-hero {
	position: relative;
	display: grid;
	align-items: end;
	min-height: min(86vh, 820px);
	overflow: hidden;
	background: var(--nsr-ink);
	color: #fff;
	isolation: isolate;
}

.nsr-hero__bg { position: absolute; inset: 0; z-index: -2; }

.nsr-hero__bg img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	/* Arranca apenas escalada y se asienta: da vida sin distraer. */
	animation: nsr-hero-settle 1.6s var(--nsr-ease-out) both;
}

@keyframes nsr-hero-settle {
	from { transform: scale(1.06); }
	to   { transform: none; }
}

.nsr-hero__bg::after {
	content: '';
	position: absolute;
	inset: 0;
	background:
		linear-gradient(to top, var(--nsr-ink) 2%, rgb(12 18 14 / 72%) 42%, rgb(12 18 14 / 22%) 100%),
		linear-gradient(to right, rgb(12 18 14 / 55%) 0%, transparent 60%);
}

/* Grano encima de la foto: la unifica con el resto del sitio. */
.nsr-hero::after {
	content: '';
	position: absolute;
	inset: 0;
	z-index: -1;
	background-image: var(--nsr-grain);
	opacity: 0.06;
	pointer-events: none;
}

.nsr-hero__inner { padding-block: var(--nsr-space-24) var(--nsr-space-12); }

.nsr-hero__kicker {
	display: flex;
	align-items: center;
	gap: var(--nsr-space-3);
	margin-bottom: var(--nsr-space-8);
	color: var(--nsr-green);
	font-family: var(--nsr-font-ui);
	font-size: var(--nsr-text-2xs);
	font-weight: 500;
	letter-spacing: var(--nsr-track-label);
	text-transform: uppercase;
	animation: nsr-rise 0.7s var(--nsr-ease-out) 0.1s both;
}

.nsr-hero__kicker::before {
	content: '';
	width: clamp(24px, 4vw, 56px);
	height: 1px;
	background: var(--nsr-green);
}

/* El título es la pieza central: tamaño display, tracking muy cerrado y
   entrada escalonada línea por línea. */
.nsr-hero__title {
	max-width: 18ch;
	margin-bottom: var(--nsr-space-8);
	color: #fff;
	font-size: var(--nsr-text-display);
	line-height: var(--nsr-leading-none);
	letter-spacing: var(--nsr-track-display);
	animation: nsr-rise 0.8s var(--nsr-ease-out) 0.18s both;
}

.nsr-hero__title em {
	display: block;
	font-style: normal;
	color: var(--nsr-green);
}

.nsr-hero__lead {
	max-width: 52ch;
	margin-bottom: var(--nsr-space-8);
	color: rgb(255 255 255 / 80%);
	font-size: var(--nsr-text-lg);
	animation: nsr-rise 0.8s var(--nsr-ease-out) 0.3s both;
}

.nsr-hero__actions {
	display: flex;
	flex-wrap: wrap;
	gap: var(--nsr-space-4);
	animation: nsr-rise 0.8s var(--nsr-ease-out) 0.42s both;
}

/* ── Barra de datos al pie del hero ─────────────────────────────────────
 * Tablero industrial: cifras en mono, separadas por hairlines.            */

.nsr-datastrip {
	border-top: 1px solid rgb(255 255 255 / 16%);
	background: rgb(12 18 14 / 35%);
	backdrop-filter: blur(8px);
}

.nsr-datastrip ul {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
	margin: 0;
	padding: 0;
	list-style: none;
}

.nsr-datastrip li {
	margin: 0;
	padding: var(--nsr-space-6) 0 var(--nsr-space-6) var(--nsr-space-6);
	border-inline-start: 1px solid rgb(255 255 255 / 12%);
}

.nsr-datastrip li:first-child { border-inline-start: 0; padding-inline-start: 0; }

.nsr-datastrip strong {
	display: block;
	color: #fff;
	font-family: var(--nsr-font-head);
	font-size: var(--nsr-text-2xl);
	line-height: 1;
	font-variant-numeric: tabular-nums;
	letter-spacing: var(--nsr-track-tight);
}

.nsr-datastrip span {
	display: block;
	margin-top: var(--nsr-space-2);
	color: rgb(255 255 255 / 58%);
	font-family: var(--nsr-font-ui);
	font-size: var(--nsr-text-2xs);
	letter-spacing: 0.08em;
	text-transform: uppercase;
}

/* ══════════════════════════════════════════════════════════════════════════
   Tira de logos de representaciones
   ══════════════════════════════════════════════════════════════════════════ */

.nsr-logos {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	align-items: center;
	gap: clamp(var(--nsr-space-8), 5vw, var(--nsr-space-24));
	margin: 0;
	padding: 0;
	list-style: none;
}

.nsr-logos li { margin: 0; }

.nsr-logos img {
	width: auto;
	height: clamp(26px, 3.4vw, 40px);
	/* En la tira se unifican en blanco y recuperan color al pasar el mouse. */
	filter: brightness(0) invert(1);
	opacity: 0.55;
	transition: opacity var(--nsr-duration) var(--nsr-ease),
		filter var(--nsr-duration) var(--nsr-ease),
		transform var(--nsr-duration) var(--nsr-ease);
}

.nsr-logos a:hover img,
.nsr-logos a:focus-visible img {
	filter: none;
	opacity: 1;
	transform: translateY(-3px);
}

@media (max-width: 700px) {
	.nsr-logos {
		flex-wrap: nowrap;
		justify-content: flex-start;
		overflow-x: auto;
		scroll-snap-type: x proximity;
		scrollbar-width: none;
	}

	.nsr-logos li { flex: 0 0 auto; scroll-snap-align: center; }
}

/* ══════════════════════════════════════════════════════════════════════════
   Las 4 líneas de producto
   ══════════════════════════════════════════════════════════════════════════ */

.nsr-lines {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
	gap: 1px;
	margin: 0;
	padding: 0;
	list-style: none;
	background: var(--nsr-line);
}

.nsr-line { margin: 0; }

.nsr-line a {
	position: relative;
	display: grid;
	gap: var(--nsr-space-4);
	padding: var(--nsr-space-8);
	background: var(--nsr-surface);
	color: inherit;
	text-decoration: none;
	overflow: hidden;
	transition: background var(--nsr-duration) var(--nsr-ease);
}

/* Barra del color de la línea que crece desde arriba en hover. */
.nsr-line a::before {
	content: '';
	position: absolute;
	inset-inline: 0;
	top: 0;
	height: 3px;
	background: var(--nsr-line-color, var(--nsr-green));
	transform: scaleX(0);
	transform-origin: left;
	transition: transform var(--nsr-duration) var(--nsr-ease);
}

.nsr-line a:hover::before,
.nsr-line a:focus-visible::before { transform: none; }

.nsr-line a:hover { background: var(--nsr-paper); }

.nsr-line--linea-vet { --nsr-line-color: var(--nsr-vet); }
.nsr-line--linea-pet { --nsr-line-color: var(--nsr-pet); }
.nsr-line--linea-food { --nsr-line-color: var(--nsr-food); }
.nsr-line--linea-green { --nsr-line-color: var(--nsr-green-line); }

.nsr-line__img {
	width: 100%;
	aspect-ratio: 16 / 11;
	object-fit: cover;
	border-radius: var(--nsr-radius);
	transition: transform var(--nsr-duration-slow) var(--nsr-ease-out);
}

.nsr-line a:hover .nsr-line__img { transform: scale(1.04); }

.nsr-line__head {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: var(--nsr-space-4);
}

.nsr-line__name {
	font-family: var(--nsr-font-head);
	font-size: var(--nsr-text-xl);
	font-weight: 600;
	letter-spacing: var(--nsr-track-tight);
}

.nsr-line__count {
	color: var(--nsr-ink-faint);
	font-family: var(--nsr-font-ui);
	font-size: var(--nsr-text-2xs);
	font-variant-numeric: tabular-nums;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	white-space: nowrap;
}

/* ══════════════════════════════════════════════════════════════════════════
   Catálogo
   ══════════════════════════════════════════════════════════════════════════ */

.nsr-catalog {
	display: grid;
	grid-template-columns: 220px minmax(0, 1fr);
	gap: clamp(var(--nsr-space-8), 5vw, var(--nsr-space-24));
	align-items: start;
}

@media (max-width: 960px) {
	.nsr-catalog { grid-template-columns: 1fr; }
}

/* Filtro de la izquierda: es lo que les gustó del mockup, se mantiene. */
.nsr-filters { position: sticky; top: 100px; }

@media (max-width: 960px) {
	.nsr-filters { position: static; }
}

.nsr-filters__group + .nsr-filters__group { margin-top: var(--nsr-space-12); }

.nsr-filters__title {
	margin-bottom: var(--nsr-space-4);
	padding-bottom: var(--nsr-space-3);
	border-bottom: 1px solid var(--nsr-ink);
	color: var(--nsr-ink);
	font-family: var(--nsr-font-ui);
	font-size: var(--nsr-text-2xs);
	font-weight: 500;
	letter-spacing: var(--nsr-track-label);
	text-transform: uppercase;
}

.nsr-filters ul { margin: 0; padding: 0; list-style: none; }
.nsr-filters li { margin: 0; }

.nsr-filters a {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--nsr-space-3);
	padding: var(--nsr-space-3) 0;
	border-bottom: 1px solid var(--nsr-line);
	color: var(--nsr-ink);
	font-size: var(--nsr-text-sm);
	text-decoration: none;
	transition: padding-inline-start var(--nsr-duration) var(--nsr-ease),
		color var(--nsr-duration) var(--nsr-ease);
}

.nsr-filters a:hover {
	padding-inline-start: var(--nsr-space-2);
	color: var(--nsr-green-700);
}

.nsr-filters [aria-current='page'] {
	color: var(--nsr-ink);
	font-weight: 500;
}

.nsr-filters [aria-current='page'] .nsr-filters__count { color: var(--nsr-green-700); }

.nsr-filters__count {
	color: var(--nsr-ink-faint);
	font-family: var(--nsr-font-ui);
	font-size: var(--nsr-text-2xs);
	font-variant-numeric: tabular-nums;
}

.nsr-dot {
	flex-shrink: 0;
	width: 7px;
	height: 7px;
	margin-inline-end: var(--nsr-space-3);
	border-radius: 50%;
	background: var(--nsr-green);
}

.nsr-dot--linea-vet { background: var(--nsr-vet); }
.nsr-dot--linea-pet { background: var(--nsr-pet); }
.nsr-dot--linea-food { background: var(--nsr-food); }
.nsr-dot--linea-green { background: var(--nsr-green-line); }

.nsr-search { display: flex; gap: var(--nsr-space-2); }

.nsr-search input[type='search'] {
	flex: 1;
	min-width: 0;
	padding: 0.7em 0.85em;
	border: 1px solid var(--nsr-line-strong);
	border-radius: var(--nsr-radius);
	background: var(--nsr-surface);
	font-family: var(--nsr-font-ui);
	font-size: var(--nsr-text-xs);
}

.nsr-search input[type='search']:focus {
	border-color: var(--nsr-ink);
	outline: none;
}

.nsr-search .nsr-btn { padding-inline: 1.1em; }

/* ── Aviso de que no es un ecommerce ─────────────────────────────────────── */

.nsr-not-shop {
	display: flex;
	gap: var(--nsr-space-4);
	align-items: baseline;
	margin-bottom: var(--nsr-space-12);
	padding: var(--nsr-space-6);
	border: 1px solid var(--nsr-line);
	border-inline-start: 3px solid var(--nsr-green);
	background: var(--nsr-paper);
	color: var(--nsr-ink-soft);
	font-size: var(--nsr-text-sm);
}

.nsr-not-shop::before {
	content: 'i';
	flex-shrink: 0;
	display: grid;
	place-items: center;
	width: 1.5rem;
	height: 1.5rem;
	border-radius: 50%;
	background: var(--nsr-green);
	color: var(--nsr-ink);
	font-family: var(--nsr-font-ui);
	font-size: var(--nsr-text-xs);
	font-weight: 700;
}

/* ── Filas del catálogo ──────────────────────────────────────────────────
 * Formato CATÁLOGO: de a uno por fila, no grid de tres. Con el índice en
 * mono a la izquierda, que es lo que le da carácter de hoja técnica.       */

.nsr-products {
	display: grid;
	margin: 0;
	padding: 0;
	list-style: none;
	border-top: 1px solid var(--nsr-ink);
}

.nsr-product-row {
	position: relative;
	display: grid;
	grid-template-columns: 3.5rem minmax(160px, 240px) minmax(0, 1fr);
	gap: clamp(var(--nsr-space-6), 3vw, var(--nsr-space-12));
	align-items: center;
	margin: 0;
	padding-block: var(--nsr-space-8);
	border-bottom: 1px solid var(--nsr-line);
	transition: background var(--nsr-duration) var(--nsr-ease);
}

.nsr-product-row:hover { background: var(--nsr-paper); }

@media (max-width: 760px) {
	.nsr-product-row {
		grid-template-columns: 1fr;
		gap: var(--nsr-space-4);
	}

	.nsr-product-row__index { display: none; }
}

.nsr-product-row__index {
	align-self: start;
	color: var(--nsr-ink-faint);
	font-family: var(--nsr-font-ui);
	font-size: var(--nsr-text-xs);
	font-variant-numeric: tabular-nums;
	letter-spacing: 0.04em;
}

.nsr-product-row__media {
	overflow: hidden;
	border-radius: var(--nsr-radius);
	background: var(--nsr-paper);
}

.nsr-product-row__media img {
	width: 100%;
	aspect-ratio: 4 / 5;
	object-fit: cover;
	transition: transform var(--nsr-duration-slow) var(--nsr-ease-out);
}

.nsr-product-row:hover .nsr-product-row__media img { transform: scale(1.05); }

.nsr-product-row__title {
	margin-bottom: var(--nsr-space-2);
	font-size: var(--nsr-text-2xl);
	letter-spacing: var(--nsr-track-display);
	text-transform: none;
}

.nsr-product-row__title a {
	color: inherit;
	text-decoration: none;
}

/* Toda la fila es clickeable, pero el foco cae en el título. */
.nsr-product-row__title a::after {
	content: '';
	position: absolute;
	inset: 0;
}

.nsr-product-row:hover .nsr-product-row__title { color: var(--nsr-green-700); }

.nsr-product-row__desc {
	max-width: 52ch;
	margin-bottom: var(--nsr-space-6);
	color: var(--nsr-ink-soft);
	font-size: var(--nsr-text-lg);
}

.nsr-product-row__meta {
	display: flex;
	flex-wrap: wrap;
	gap: var(--nsr-space-2) var(--nsr-space-6);
	margin: 0;
	color: var(--nsr-ink-soft);
	font-family: var(--nsr-font-ui);
	font-size: var(--nsr-text-2xs);
	letter-spacing: 0.05em;
	text-transform: uppercase;
}

.nsr-product-row__meta b {
	color: var(--nsr-ink-faint);
	font-weight: 500;
}

.nsr-tag {
	display: inline-flex;
	align-items: center;
	color: var(--nsr-ink);
	font-family: var(--nsr-font-ui);
	font-size: var(--nsr-text-2xs);
	letter-spacing: 0.1em;
	text-decoration: none;
	text-transform: uppercase;
}

/* ══════════════════════════════════════════════════════════════════════════
   Ficha de producto — hoja de especificaciones
   ══════════════════════════════════════════════════════════════════════════ */

.nsr-product {
	display: grid;
	grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
	gap: clamp(var(--nsr-space-8), 6vw, var(--nsr-space-24));
	align-items: start;
}

@media (max-width: 960px) {
	.nsr-product { grid-template-columns: 1fr; }
}

.nsr-product__media {
	position: sticky;
	top: 100px;
	overflow: hidden;
	border-radius: var(--nsr-radius-lg);
	background: var(--nsr-paper);
}

@media (max-width: 960px) {
	.nsr-product__media { position: static; }
}

.nsr-product__media img { width: 100%; height: auto; }

.nsr-product__title {
	margin-bottom: var(--nsr-space-4);
	font-size: var(--nsr-text-3xl);
}

.nsr-product__descriptor {
	max-width: 46ch;
	margin-bottom: var(--nsr-space-12);
	color: var(--nsr-ink-soft);
	font-family: var(--nsr-font-head);
	font-size: var(--nsr-text-xl);
	font-weight: 600;
	letter-spacing: var(--nsr-track-tight);
	line-height: var(--nsr-leading-snug);
}

/* Barra del color de la línea sobre el título. */
.nsr-product__line {
	display: inline-flex;
	align-items: center;
	gap: var(--nsr-space-3);
	margin-bottom: var(--nsr-space-6);
	padding: var(--nsr-space-2) var(--nsr-space-4);
	border: 1px solid var(--nsr-line);
	border-radius: 100px;
	color: var(--nsr-ink);
	font-family: var(--nsr-font-ui);
	font-size: var(--nsr-text-2xs);
	letter-spacing: var(--nsr-track-label);
	text-decoration: none;
	text-transform: uppercase;
}

/* Tabla de especificaciones: etiquetas en mono a la izquierda. */
.nsr-specs {
	margin: 0;
	border-top: 1px solid var(--nsr-ink);
}

.nsr-specs__row {
	display: grid;
	grid-template-columns: minmax(140px, 22%) minmax(0, 1fr);
	gap: var(--nsr-space-6);
	padding-block: var(--nsr-space-6);
	border-bottom: 1px solid var(--nsr-line);
}

@media (max-width: 640px) {
	.nsr-specs__row { grid-template-columns: 1fr; gap: var(--nsr-space-2); }
}

.nsr-specs__label {
	margin: 0;
	color: var(--nsr-ink-faint);
	font-family: var(--nsr-font-ui);
	font-size: var(--nsr-text-2xs);
	font-weight: 500;
	letter-spacing: var(--nsr-track-label);
	text-transform: uppercase;
}

.nsr-specs__value { margin: 0; }
.nsr-specs__value > :last-child { margin-bottom: 0; }

/* Los valores con números y dosis, en mono: son datos, no prosa. */
.nsr-specs__row--data .nsr-specs__value {
	font-family: var(--nsr-font-ui);
	font-size: var(--nsr-text-sm);
	font-variant-numeric: tabular-nums;
	line-height: 1.7;
}

.nsr-specs__value ul { padding-inline-start: 1em; }

/* ══════════════════════════════════════════════════════════════════════════
   Representaciones
   ══════════════════════════════════════════════════════════════════════════ */

.nsr-brand {
	position: relative;
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: clamp(var(--nsr-space-8), 5vw, var(--nsr-space-24));
	align-items: center;
	padding-block: var(--nsr-section-y);
	border-bottom: 1px solid var(--nsr-line);
}

@media (max-width: 960px) {
	.nsr-brand { grid-template-columns: 1fr; }
}

.nsr-brand:nth-child(even) .nsr-brand__media { order: -1; }

@media (max-width: 960px) {
	.nsr-brand:nth-child(even) .nsr-brand__media { order: 0; }
}

.nsr-brand__logo {
	height: clamp(34px, 4.5vw, 52px);
	width: auto;
	margin-bottom: var(--nsr-space-8);
}

.nsr-brand__country {
	display: inline-flex;
	align-items: center;
	gap: var(--nsr-space-2);
	margin-bottom: var(--nsr-space-6);
	color: var(--nsr-ink-faint);
	font-family: var(--nsr-font-ui);
	font-size: var(--nsr-text-2xs);
	letter-spacing: var(--nsr-track-label);
	text-transform: uppercase;
}

.nsr-brand__country::before {
	content: '';
	width: 18px;
	height: 1px;
	background: var(--nsr-brand-color, var(--nsr-green));
}

/* El botón toma el color de la marca, como en el sitio actual. */
.nsr-brand .nsr-btn {
	background: var(--nsr-brand-color, var(--nsr-ink));
	border-color: var(--nsr-brand-color, var(--nsr-ink));
}

.nsr-brand .nsr-btn::after { background: var(--nsr-green); }

.nsr-brand .nsr-btn--ghost {
	background: transparent;
	border-color: var(--nsr-line-strong);
	color: var(--nsr-ink);
}

.nsr-gallery {
	display: flex;
	gap: var(--nsr-space-4);
	overflow-x: auto;
	scroll-snap-type: x mandatory;
	scrollbar-width: thin;
	margin: 0;
	padding: 0;
	list-style: none;
}

.nsr-gallery li { flex: 0 0 100%; margin: 0; scroll-snap-align: start; }

.nsr-gallery img {
	width: 100%;
	aspect-ratio: 4 / 3;
	object-fit: cover;
	border-radius: var(--nsr-radius-lg);
}

/* ══════════════════════════════════════════════════════════════════════════
   Servicios
   ══════════════════════════════════════════════════════════════════════════ */

/* Los 9 servicios: abiertos, numerados, sin acordeón — el sitio viejo los
   tenía colapsados y era justo lo que no gustaba. */
.nsr-services {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
	gap: 1px;
	margin: 0;
	padding: 0;
	list-style: none;
	background: var(--nsr-line);
}

.nsr-service {
	margin: 0;
	padding: var(--nsr-space-8);
	background: var(--nsr-surface);
	transition: background var(--nsr-duration) var(--nsr-ease);
}

.nsr-service:hover { background: var(--nsr-paper); }

.nsr-service__num {
	display: block;
	margin-bottom: var(--nsr-space-6);
	color: var(--nsr-green-700);
	font-family: var(--nsr-font-ui);
	font-size: var(--nsr-text-2xs);
	font-variant-numeric: tabular-nums;
	letter-spacing: var(--nsr-track-label);
}

.nsr-service h3 {
	margin-bottom: var(--nsr-space-3);
	font-size: var(--nsr-text-lg);
}

.nsr-service p { color: var(--nsr-ink-soft); font-size: var(--nsr-text-sm); }

/* Los 3 beneficios de equipamiento. */
.nsr-benefits {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
	gap: clamp(var(--nsr-space-8), 4vw, var(--nsr-space-16));
	margin: 0;
	padding: 0;
	list-style: none;
}

.nsr-benefits li {
	margin: 0;
	padding-top: var(--nsr-space-6);
	border-top: 2px solid var(--nsr-green);
}

.nsr-benefits h3 { margin-bottom: var(--nsr-space-2); font-size: var(--nsr-text-xl); }
.nsr-benefits p { color: var(--nsr-ink-soft); }

.nsr-section--ink .nsr-benefits p { color: rgb(255 255 255 / 70%); }

/* ══════════════════════════════════════════════════════════════════════════
   Testimonios
   ══════════════════════════════════════════════════════════════════════════ */

.nsr-quotes {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
	gap: 1px;
	margin: 0;
	padding: 0;
	list-style: none;
	background: rgb(255 255 255 / 14%);
}

.nsr-quote {
	display: flex;
	flex-direction: column;
	gap: var(--nsr-space-6);
	margin: 0;
	padding: clamp(var(--nsr-space-8), 3vw, var(--nsr-space-12));
	background: var(--nsr-ink);
}

.nsr-quote blockquote {
	flex: 1;
	margin: 0;
	color: rgb(255 255 255 / 88%);
	font-size: var(--nsr-text-lg);
	line-height: 1.55;
}

/* Comilla tipográfica grande como marca de agua. */
.nsr-quote blockquote::before {
	content: '\201C';
	display: block;
	margin-bottom: -0.3em;
	color: var(--nsr-green);
	font-family: var(--nsr-font-head);
	font-size: 3.5rem;
	line-height: 1;
}

.nsr-quote__author {
	display: grid;
	gap: var(--nsr-space-1);
	margin: 0;
	padding-top: var(--nsr-space-6);
	border-top: 1px solid rgb(255 255 255 / 16%);
}

.nsr-quote__author strong {
	color: #fff;
	font-family: var(--nsr-font-head);
	font-size: var(--nsr-text-base);
}

.nsr-quote__author span {
	color: rgb(255 255 255 / 55%);
	font-family: var(--nsr-font-ui);
	font-size: var(--nsr-text-2xs);
	letter-spacing: 0.08em;
	text-transform: uppercase;
}

/* ══════════════════════════════════════════════════════════════════════════
   Historia y métricas
   ══════════════════════════════════════════════════════════════════════════ */

.nsr-split {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
	gap: clamp(var(--nsr-space-8), 6vw, var(--nsr-space-24));
	align-items: center;
}

.nsr-stats {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 1px;
	margin: 0;
	padding: 0;
	list-style: none;
	background: var(--nsr-line);
}

.nsr-stats li {
	margin: 0;
	padding: var(--nsr-space-8);
	background: var(--nsr-surface);
}

.nsr-stats strong {
	display: block;
	font-family: var(--nsr-font-head);
	font-size: var(--nsr-text-3xl);
	line-height: 1;
	letter-spacing: var(--nsr-track-display);
	font-variant-numeric: tabular-nums;
}

.nsr-stats span {
	display: block;
	margin-top: var(--nsr-space-3);
	color: var(--nsr-ink-soft);
	font-family: var(--nsr-font-ui);
	font-size: var(--nsr-text-2xs);
	letter-spacing: 0.06em;
	text-transform: uppercase;
}

/* ══════════════════════════════════════════════════════════════════════════
   Contacto
   ══════════════════════════════════════════════════════════════════════════ */

.nsr-contact {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
	gap: clamp(var(--nsr-space-8), 6vw, var(--nsr-space-24));
	align-items: start;
}

.nsr-contact__list {
	margin: 0;
	padding: 0;
	border-top: 1px solid var(--nsr-ink);
}

.nsr-contact__list > div {
	padding-block: var(--nsr-space-6);
	border-bottom: 1px solid var(--nsr-line);
}

.nsr-contact__list dt {
	margin-bottom: var(--nsr-space-2);
	color: var(--nsr-ink-faint);
	font-family: var(--nsr-font-ui);
	font-size: var(--nsr-text-2xs);
	letter-spacing: var(--nsr-track-label);
	text-transform: uppercase;
}

.nsr-contact__list dd {
	margin: 0;
	font-family: var(--nsr-font-ui);
	font-size: var(--nsr-text-base);
}

.nsr-contact__list a { color: var(--nsr-ink); text-decoration: none; }
.nsr-contact__list a:hover { color: var(--nsr-green-700); }

/* ══════════════════════════════════════════════════════════════════════════
   Paginación, breadcrumbs, prosa y footer
   ══════════════════════════════════════════════════════════════════════════ */

.nsr-pagination {
	display: flex;
	flex-wrap: wrap;
	gap: var(--nsr-space-2);
	margin-top: var(--nsr-space-16);
}

.nsr-pagination .page-numbers {
	display: grid;
	place-items: center;
	min-width: 2.75rem;
	min-height: 2.75rem;
	padding-inline: var(--nsr-space-3);
	border: 1px solid var(--nsr-line);
	border-radius: var(--nsr-radius);
	color: var(--nsr-ink);
	font-family: var(--nsr-font-ui);
	font-size: var(--nsr-text-xs);
	text-decoration: none;
	font-variant-numeric: tabular-nums;
}

.nsr-pagination .page-numbers:hover { border-color: var(--nsr-ink); }

.nsr-pagination .page-numbers.current {
	background: var(--nsr-ink);
	border-color: var(--nsr-ink);
	color: #fff;
}

.nsr-breadcrumbs {
	margin-bottom: var(--nsr-space-12);
	font-family: var(--nsr-font-ui);
	font-size: var(--nsr-text-sm);
}

.nsr-breadcrumbs ol {
	display: flex;
	flex-wrap: wrap;
	gap: var(--nsr-space-2);
	margin: 0;
	padding: 0;
	list-style: none;
}

.nsr-breadcrumbs li { margin: 0; }
.nsr-breadcrumbs li + li::before { content: '/'; margin-inline-end: var(--nsr-space-2); color: var(--nsr-line-strong); }
.nsr-breadcrumbs a { color: var(--nsr-ink-soft); text-decoration: none; }
.nsr-breadcrumbs a:hover { color: var(--nsr-green-700); }
.nsr-breadcrumbs [aria-current] { color: var(--nsr-ink); }

.nsr-prose { max-width: 66ch; }

.nsr-prose h2 {
	margin-top: var(--nsr-space-16);
	font-size: var(--nsr-text-2xl);
}

.nsr-prose h3 {
	margin-top: var(--nsr-space-12);
	margin-bottom: var(--nsr-space-3);
	font-family: var(--nsr-font-ui);
	font-size: var(--nsr-text-2xs);
	font-weight: 500;
	letter-spacing: var(--nsr-track-label);
	text-transform: uppercase;
	color: var(--nsr-green-700);
}

.nsr-prose > :first-child { margin-top: 0; }
.nsr-prose p { font-size: var(--nsr-text-lg); }

.nsr-footer {
	position: relative;
	padding-block: var(--nsr-space-24) var(--nsr-space-8);
	background: var(--nsr-ink);
	color: rgb(255 255 255 / 62%);
	font-size: var(--nsr-text-sm);
	isolation: isolate;
}

.nsr-footer::before {
	content: '';
	position: absolute;
	inset: 0;
	z-index: -1;
	background-image: var(--nsr-grain);
	opacity: 0.05;
	pointer-events: none;
}

.nsr-footer a { color: #fff; text-decoration: none; }
.nsr-footer a:hover { color: var(--nsr-green); }

.nsr-footer__grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
	gap: var(--nsr-space-12);
	padding-bottom: var(--nsr-space-12);
	border-bottom: 1px solid rgb(255 255 255 / 14%);
}

.nsr-footer__title {
	margin-bottom: var(--nsr-space-6);
	color: rgb(255 255 255 / 50%);
	font-family: var(--nsr-font-ui);
	font-size: var(--nsr-text-2xs);
	font-weight: 500;
	letter-spacing: var(--nsr-track-label);
	text-transform: uppercase;
}

.nsr-footer ul { margin: 0; padding: 0; list-style: none; }
.nsr-footer li { margin: 0 0 var(--nsr-space-3); }

.nsr-footer__bottom {
	display: flex;
	flex-wrap: wrap;
	gap: var(--nsr-space-4);
	justify-content: space-between;
	padding-top: var(--nsr-space-8);
	font-family: var(--nsr-font-ui);
	font-size: var(--nsr-text-2xs);
	letter-spacing: 0.08em;
	text-transform: uppercase;
}

/* ══════════════════════════════════════════════════════════════════════════
   Microanimaciones
   ══════════════════════════════════════════════════════════════════════════

   Todo CSS. Cada gesto responde a una intención: confirmar que algo es
   interactivo, indicar dirección, o premiar el hover. Nada gira por girar.
   Todo queda anulado bajo prefers-reduced-motion.                            */

/* ── Header que se compacta al bajar ─────────────────────────────────────
 * scroll-timeline nativo: sin listener de scroll ni un byte de JS.        */
@supports (animation-timeline: scroll()) {
	@media (prefers-reduced-motion: no-preference) {
		@keyframes nsr-header-shrink {
			to {
				box-shadow: 0 1px 0 var(--nsr-line), 0 8px 28px -18px rgb(12 18 14 / 40%);
			}
		}

		.nsr-header {
			animation: nsr-header-shrink linear both;
			animation-timeline: scroll(root);
			animation-range: 0 140px;
		}

		@keyframes nsr-logo-shrink {
			to { height: 32px; }
		}

		.nsr-header__logo img {
			animation: nsr-logo-shrink linear both;
			animation-timeline: scroll(root);
			animation-range: 0 140px;
		}
	}
}

/* Logo: apenas se levanta al pasar el mouse. */
.nsr-header__logo a {
	display: inline-block;
	transition: transform var(--nsr-duration) var(--nsr-ease);
}

.nsr-header__logo a:hover { transform: translateY(-2px); }

/* ── Reveals escalonados ─────────────────────────────────────────────────
 * Los hijos directos entran uno detrás del otro. El delay lo calcula el
 * propio CSS con --i, que setea el template.                              */
@supports (animation-timeline: view()) {
	@media (prefers-reduced-motion: no-preference) {
		.nsr-stagger > * {
			animation: nsr-rise linear both;
			animation-timeline: view();
			animation-range: entry 0% cover 22%;
		}
	}
}

/* ── Filas del catálogo ──────────────────────────────────────────────────── */

/* Barra del color de la línea que crece de arriba a abajo en hover. */
.nsr-product-row::before {
	content: '';
	position: absolute;
	inset-block: 0;
	inset-inline-start: 0;
	width: 2px;
	background: var(--nsr-row-color, var(--nsr-green));
	transform: scaleY(0);
	transform-origin: top;
	transition: transform var(--nsr-duration) var(--nsr-ease);
}

.nsr-product-row:hover::before { transform: none; }

.nsr-product-row--linea-vet { --nsr-row-color: var(--nsr-vet); }
.nsr-product-row--linea-pet { --nsr-row-color: var(--nsr-pet); }
.nsr-product-row--linea-food { --nsr-row-color: var(--nsr-food); }
.nsr-product-row--linea-green { --nsr-row-color: var(--nsr-green-line); }

/* El índice se corre y se enciende. */
.nsr-product-row__index {
	transition: color var(--nsr-duration) var(--nsr-ease),
		transform var(--nsr-duration) var(--nsr-ease);
}

.nsr-product-row:hover .nsr-product-row__index {
	color: var(--nsr-row-color, var(--nsr-green-700));
	transform: translateX(3px);
}

/* Flecha que aparece desde la izquierda: indica que la fila lleva a algún lado. */
.nsr-product-row__go {
	display: inline-flex;
	align-items: center;
	gap: var(--nsr-space-2);
	margin-top: var(--nsr-space-6);
	color: var(--nsr-ink);
	font-family: var(--nsr-font-ui);
	font-size: var(--nsr-text-sm);
	font-weight: 500;
	opacity: 0;
	transform: translateX(-6px);
	transition: opacity var(--nsr-duration) var(--nsr-ease),
		transform var(--nsr-duration) var(--nsr-ease);
}

.nsr-product-row:hover .nsr-product-row__go,
.nsr-product-row:focus-within .nsr-product-row__go {
	opacity: 1;
	transform: none;
}

/* En pantallas táctiles no hay hover: la flecha se muestra siempre. */
@media (hover: none) {
	.nsr-product-row__go { opacity: 1; transform: none; }
}

.nsr-product-row__go svg { transition: transform var(--nsr-duration) var(--nsr-ease); }
.nsr-product-row:hover .nsr-product-row__go svg { transform: translateX(4px); }

/* Chip de dato con la presentación. */
.nsr-chip {
	display: inline-flex;
	align-items: center;
	gap: var(--nsr-space-2);
	padding: 0.3em 0.7em;
	border: 1px solid var(--nsr-line);
	border-radius: 3px;
	background: var(--nsr-surface);
	color: var(--nsr-ink-soft);
	font-family: var(--nsr-font-ui);
	font-size: var(--nsr-text-2xs);
	font-variant-numeric: tabular-nums;
	letter-spacing: 0.04em;
	/* No hereda el uppercase del meta: es un dato con unidades. */
	text-transform: none;
}

/* ── Filtros ─────────────────────────────────────────────────────────────── */

.nsr-filters .nsr-dot {
	transition: transform var(--nsr-duration) var(--nsr-ease);
}

.nsr-filters a:hover .nsr-dot { transform: scale(1.6); }

/* Filtro activo: chip con "quitar". */
.nsr-active-filter {
	display: inline-flex;
	align-items: center;
	gap: var(--nsr-space-3);
	margin-bottom: var(--nsr-space-8);
	padding: 0.45em 0.5em 0.45em 0.9em;
	border: 1px solid var(--nsr-ink);
	border-radius: 100px;
	font-family: var(--nsr-font-ui);
	font-size: var(--nsr-text-sm);
}

.nsr-active-filter a {
	display: grid;
	place-items: center;
	width: 1.4rem;
	height: 1.4rem;
	border-radius: 50%;
	background: var(--nsr-paper);
	color: var(--nsr-ink);
	text-decoration: none;
	transition: background var(--nsr-duration) var(--nsr-ease),
		transform var(--nsr-duration) var(--nsr-ease);
}

.nsr-active-filter a:hover {
	background: var(--nsr-ink);
	color: #fff;
	transform: rotate(90deg);
}

/* ── Especificaciones ────────────────────────────────────────────────────── */

.nsr-specs__row {
	transition: background var(--nsr-duration) var(--nsr-ease);
}

.nsr-specs__row:hover { background: var(--nsr-paper); }

.nsr-specs__label {
	transition: color var(--nsr-duration) var(--nsr-ease);
}

.nsr-specs__row:hover .nsr-specs__label { color: var(--nsr-green-700); }

/* ── Testimonios ─────────────────────────────────────────────────────────── */

.nsr-quote {
	transition: background var(--nsr-duration) var(--nsr-ease);
}

.nsr-quote:hover { background: #141c16; }

.nsr-quote blockquote::before {
	display: block;
	transition: transform var(--nsr-duration) var(--nsr-ease);
}

.nsr-quote:hover blockquote::before { transform: translateY(-3px); }

/* ── Métricas ────────────────────────────────────────────────────────────── */

.nsr-stats li { transition: background var(--nsr-duration) var(--nsr-ease); }
.nsr-stats li:hover { background: var(--nsr-paper); }

.nsr-stats strong { transition: color var(--nsr-duration) var(--nsr-ease); }
.nsr-stats li:hover strong { color: var(--nsr-green-700); }

/* ── Galerías ────────────────────────────────────────────────────────────── */

.nsr-gallery img {
	transition: transform var(--nsr-duration-slow) var(--nsr-ease-out);
}

.nsr-gallery li:hover img { transform: scale(1.02); }

/* ── Servicios ───────────────────────────────────────────────────────────── */

.nsr-service { position: relative; overflow: hidden; }

.nsr-service::after {
	content: '';
	position: absolute;
	inset-inline: 0;
	bottom: 0;
	height: 2px;
	background: var(--nsr-green);
	transform: scaleX(0);
	transform-origin: left;
	transition: transform var(--nsr-duration) var(--nsr-ease);
}

.nsr-service:hover::after { transform: none; }

.nsr-service__num { transition: color var(--nsr-duration) var(--nsr-ease); }
.nsr-service:hover .nsr-service__num { color: var(--nsr-ink); }

/* ── Footer ──────────────────────────────────────────────────────────────── */

.nsr-footer li a {
	position: relative;
	display: inline-block;
}

.nsr-footer li a::after {
	content: '';
	position: absolute;
	inset-inline: 0;
	bottom: -2px;
	height: 1px;
	background: var(--nsr-green);
	transform: scaleX(0);
	transform-origin: left;
	transition: transform var(--nsr-duration) var(--nsr-ease);
}

.nsr-footer li a:hover::after { transform: none; }

/* ── Paginación ──────────────────────────────────────────────────────────── */

.nsr-pagination .page-numbers {
	transition: background var(--nsr-duration) var(--nsr-ease),
		border-color var(--nsr-duration) var(--nsr-ease),
		color var(--nsr-duration) var(--nsr-ease),
		transform var(--nsr-duration) var(--nsr-ease);
}

.nsr-pagination a.page-numbers:hover { transform: translateY(-2px); }

/* ── Cabecera de página genérica ─────────────────────────────────────────── */

.nsr-pagehead {
	padding-block: clamp(var(--nsr-space-16), 8vw, var(--nsr-space-32)) var(--nsr-space-16);
	border-bottom: 1px solid var(--nsr-line);
}

.nsr-pagehead__title {
	max-width: 24ch;
	margin: 0;
	font-size: var(--nsr-text-4xl);
}

.nsr-pagehead .nsr-lead { margin-top: var(--nsr-space-6); }

/* Media de cabecera con reveal de máscara. */
.nsr-pagehead__media {
	margin-top: var(--nsr-space-12);
	overflow: hidden;
	border-radius: var(--nsr-radius-lg);
}

.nsr-pagehead__media img {
	width: 100%;
	aspect-ratio: 21 / 9;
	object-fit: cover;
}

/* ── 404 y búsqueda ──────────────────────────────────────────────────────── */

.nsr-blank {
	display: grid;
	place-items: start;
	gap: var(--nsr-space-6);
	min-height: 52vh;
	align-content: center;
}

.nsr-blank__code {
	font-family: var(--nsr-font-ui);
	font-size: var(--nsr-text-2xs);
	letter-spacing: 0.2em;
	color: var(--nsr-green-700);
}

/* ══════════════════════════════════════════════════════════════════════════
   Bloques con imagen de la home
   ══════════════════════════════════════════════════════════════════════════ */

/* Encabezado de sección a dos columnas: título a la izquierda, bajada y CTA
   a la derecha. Rompe la monotonía de todo alineado al margen. */
.nsr-shead--split {
	display: grid;
	grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr);
	gap: clamp(var(--nsr-space-8), 5vw, var(--nsr-space-24));
	align-items: end;
}

@media (max-width: 900px) {
	.nsr-shead--split { grid-template-columns: 1fr; align-items: start; }
}

/* ── Mosaico de fotos de planta ──────────────────────────────────────────
 * La primera ocupa dos filas: da jerarquía y evita la grilla plana.       */

.nsr-mosaic {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	grid-auto-rows: clamp(110px, 15vw, 190px);
	gap: var(--nsr-space-3);
	margin: 0 0 clamp(var(--nsr-space-12), 6vw, var(--nsr-space-24));
	padding: 0;
	list-style: none;
}

.nsr-mosaic li {
	margin: 0;
	overflow: hidden;
	border-radius: var(--nsr-radius);
	background: rgb(255 255 255 / 6%);
}

.nsr-mosaic li:first-child {
	grid-column: span 2;
	grid-row: span 2;
}

.nsr-mosaic img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform var(--nsr-duration-slow) var(--nsr-ease-out),
		filter var(--nsr-duration) var(--nsr-ease);
}

.nsr-mosaic li:hover img { transform: scale(1.04); }

@media (max-width: 800px) {
	.nsr-mosaic { grid-template-columns: repeat(2, 1fr); }
	.nsr-mosaic li:first-child { grid-column: span 2; grid-row: span 1; }
}

/* ── Grilla de fotos de producto ─────────────────────────────────────────
 * Acá SÍ es una grilla, y está bien: es un adelanto visual del catálogo,
 * no el catálogo. La lista de productos sigue siendo de a uno por fila.   */

.nsr-products-grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
	gap: var(--nsr-space-4);
	margin: 0;
	padding: 0;
	list-style: none;
}

.nsr-products-grid li { margin: 0; }

.nsr-products-grid a {
	display: grid;
	gap: var(--nsr-space-3);
	color: inherit;
	text-decoration: none;
}

.nsr-products-grid img {
	width: 100%;
	aspect-ratio: 1;
	object-fit: cover;
	border-radius: var(--nsr-radius);
	background: var(--nsr-surface);
	transition: transform var(--nsr-duration-slow) var(--nsr-ease-out);
}

.nsr-products-grid a:hover img { transform: scale(1.03); }

.nsr-products-grid__name {
	font-family: var(--nsr-font-head);
	font-size: var(--nsr-text-sm);
	font-weight: 600;
	letter-spacing: var(--nsr-track-tight);
	transition: color var(--nsr-duration) var(--nsr-ease);
}

.nsr-products-grid a:hover .nsr-products-grid__name { color: var(--nsr-green-700); }

/* ── Áreas de servicio ───────────────────────────────────────────────────
 * Tarjeta con la foto de fondo y el nombre encima, sobre un degradé.      */

.nsr-areas {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
	gap: var(--nsr-space-4);
	margin: 0;
	padding: 0;
	list-style: none;
}

.nsr-area { margin: 0; }

.nsr-area a {
	position: relative;
	display: block;
	overflow: hidden;
	border-radius: var(--nsr-radius-lg);
	background: var(--nsr-ink);
	color: #fff;
	text-decoration: none;
	isolation: isolate;
}

.nsr-area img {
	width: 100%;
	aspect-ratio: 4 / 5;
	object-fit: cover;
	transition: transform var(--nsr-duration-slow) var(--nsr-ease-out);
}

.nsr-area a:hover img { transform: scale(1.05); }

.nsr-area a::after {
	content: '';
	position: absolute;
	inset: 0;
	background: linear-gradient(to top, rgb(12 18 14 / 88%) 8%, rgb(12 18 14 / 10%) 62%);
}

.nsr-area__body {
	position: absolute;
	inset-inline: 0;
	bottom: 0;
	z-index: 1;
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: var(--nsr-space-4);
	padding: var(--nsr-space-6);
}

.nsr-area__name {
	font-family: var(--nsr-font-head);
	font-size: var(--nsr-text-xl);
	font-weight: 600;
	letter-spacing: var(--nsr-track-tight);
}

.nsr-area__go {
	color: var(--nsr-green);
	transition: transform var(--nsr-duration) var(--nsr-ease);
}

.nsr-area a:hover .nsr-area__go { transform: translateX(5px); }

/* ── Figura suelta ───────────────────────────────────────────────────────── */

.nsr-figure {
	margin: 0;
	overflow: hidden;
	border-radius: var(--nsr-radius-lg);
}

.nsr-figure img {
	width: 100%;
	aspect-ratio: 4 / 3;
	object-fit: cover;
	transition: transform var(--nsr-duration-slow) var(--nsr-ease-out);
}

.nsr-figure:hover img { transform: scale(1.02); }

/* En la home el hero ya no necesita ocupar casi toda la pantalla: con la
   tipografía contenida entra cómodo y deja ver que abajo hay más. */
.nsr-hero { min-height: min(72vh, 640px); }

.nsr-hero__inner { padding-block: var(--nsr-space-16) var(--nsr-space-12); }

.nsr-hero__title { max-width: 24ch; }
.nsr-hero__lead { max-width: 54ch; }

/* ── Correcciones de la tira de logos y los círculos de línea ─────────────── */

/* Grilla en vez de flex-wrap: los 7 logos se distribuyen parejo en una fila
   y no queda uno solo colgado en una segunda línea. */
@media (min-width: 701px) {
	.nsr-logos {
		display: grid;
		grid-template-columns: repeat(auto-fit, minmax(90px, 1fr));
		gap: var(--nsr-space-8);
		justify-items: center;
		align-items: center;
	}

	.nsr-logos li { width: 100%; display: grid; justify-items: center; }
}

/* Los assets de las líneas son círculos duotono sobre blanco: recortarlos en
   16/11 les cortaba la forma. Van cuadrados y en círculo, como el sitio actual. */
.nsr-line__img {
	aspect-ratio: 1;
	max-width: 190px;
	margin-inline: auto;
	border-radius: 50%;
}

/* En las tarjetas que NO son de línea de producto (áreas, adjuntos) la imagen
   sigue siendo rectangular. */
.nsr-line:not([class*='nsr-line--linea']) .nsr-line__img {
	aspect-ratio: 4 / 3;
	max-width: none;
	border-radius: var(--nsr-radius);
}

.nsr-line a { justify-items: center; text-align: center; }

.nsr-line__head {
	width: 100%;
	justify-content: center;
	gap: var(--nsr-space-3);
}

/* ── Áreas de servicio: tarjetas tipográficas ────────────────────────────
 * Las imágenes de esas subpáginas en el sitio viejo son banners con el texto
 * quemado ("Envasado", "Accesorios"), no fotos: usadas como fondo quedaban
 * recortes ilegibles. Hasta que haya fotografía real, la tarjeta es de texto. */

.nsr-areas {
	grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
	gap: 1px;
	background: var(--nsr-line);
}

.nsr-area a {
	display: block;
	min-height: clamp(150px, 16vw, 200px);
	border-radius: 0;
	background: var(--nsr-surface);
	color: var(--nsr-ink);
	transition: background var(--nsr-duration) var(--nsr-ease);
}

.nsr-area a::after { content: none; }

.nsr-area a:hover { background: var(--nsr-paper); }

.nsr-area__body {
	position: static;
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: var(--nsr-space-4);
	height: 100%;
	padding: var(--nsr-space-8);
}

/* Una barra verde que crece desde abajo: mismo gesto que los servicios. */
.nsr-area a { position: relative; overflow: hidden; }

.nsr-area a::before {
	content: '';
	position: absolute;
	inset-inline: 0;
	bottom: 0;
	height: 2px;
	background: var(--nsr-green);
	transform: scaleX(0);
	transform-origin: left;
	transition: transform var(--nsr-duration) var(--nsr-ease);
}

.nsr-area a:hover::before { transform: none; }

.nsr-area__go { color: var(--nsr-green-700); }

/* El mosaico de producto en 4 columnas: 8 fotos entran en dos filas parejas,
   sin dejar una sola colgada abajo. */
@media (min-width: 760px) {
	.nsr-products-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

/* ══════════════════════════════════════════════════════════════════════════
   Correcciones de revisión
   ══════════════════════════════════════════════════════════════════════════ */

/* ── Logos: normalización óptica ─────────────────────────────────────────
 * Los 7 logos vienen con proporciones y aire interno muy distintos: uno es
 * cuadrado (Kohshin), otro muy apaisado (Jamesway), otro diminuto (Aguair).
 * Fijar solo la altura los dejaba con pesos visuales dispares. Cada uno va
 * en una caja del mismo tamaño y se ajusta dentro, centrado. */

.nsr-logos img {
	width: auto;
	height: auto;
	max-width: 100%;
	max-height: 100%;
	object-fit: contain;
}

@media (min-width: 701px) {
	.nsr-logos {
		gap: var(--nsr-space-6);
		align-items: stretch;
	}

	.nsr-logos li {
		height: 58px;
		display: grid;
		place-items: center;
		padding-inline: var(--nsr-space-2);
	}

	.nsr-logos a {
		display: grid;
		place-items: center;
		width: 100%;
		height: 100%;
	}
}

@media (max-width: 700px) {
	.nsr-logos li { height: 46px; display: grid; place-items: center; }
	.nsr-logos a { display: grid; place-items: center; height: 100%; }
}

/* ── Filas del catálogo: más compactas ───────────────────────────────────
 * Las tarjetas ocupaban demasiado alto y se veían dos productos por pantalla.
 * Con la foto más chica entran cuatro o cinco sin perder el formato catálogo. */

.nsr-product-row {
	grid-template-columns: 2.75rem minmax(110px, 150px) minmax(0, 1fr);
	gap: clamp(var(--nsr-space-4), 2vw, var(--nsr-space-8));
	padding-block: var(--nsr-space-6);
	align-items: start;
}

@media (max-width: 760px) {
	.nsr-product-row { grid-template-columns: 1fr; }
}

.nsr-product-row__media { align-self: center; }

.nsr-product-row__title {
	margin-bottom: var(--nsr-space-1);
	font-size: var(--nsr-text-xl);
}

.nsr-product-row__desc {
	margin-bottom: var(--nsr-space-3);
	font-size: var(--nsr-text-base);
}

.nsr-product-row__go {
	margin-top: var(--nsr-space-4);
	font-size: var(--nsr-text-sm);
}

/* La grilla de producto de la home también baja un punto. */
.nsr-products-grid img { aspect-ratio: 4 / 5; }

/* ── Etiquetas sin monoespaciada ─────────────────────────────────────────
 * Al pasar a Roboto los micro-rótulos necesitan un poco más de peso y de
 * tracking para seguir leyéndose como etiqueta y no como texto suelto. */

.nsr-label,
.nsr-specs__label,
.nsr-filters__title,
.nsr-footer__title,
.nsr-shead__num,
.nsr-service__num,
.nsr-product-row__index,
.nsr-filters__count,
.nsr-line__count,
.nsr-chip,
.nsr-datastrip span,
.nsr-stats span,
.nsr-quote__author span,
.nsr-brand__country,
.nsr-product__line {
	font-weight: 500;
	font-variant-numeric: tabular-nums;
}

.nsr-specs__label {
	font-size: var(--nsr-text-xs);
	letter-spacing: 0.1em;
}

/* Los valores que antes iban en mono ahora se distinguen por tamaño y color,
   no por familia. */
.nsr-specs__row--data .nsr-specs__value {
	font-family: var(--nsr-font-body);
	font-size: var(--nsr-text-base);
	line-height: 1.65;
}

/* ── Logos normalizados por área óptica ──────────────────────────────────
 * La altura de cada logo la calcula el template: alto = raíz(área / ratio).
 * Con eso los 7 pesan visualmente lo mismo aunque sus proporciones vayan de
 * 1.28 a 5.58. La unidad es responsive, así toda la tira escala junta. */

.nsr-logos {
	--nsr-logo-unit: clamp(0.6px, 0.055vw + 0.2px, 1px);
}

.nsr-logos img {
	height: calc(var(--nsr-logo-h, 32) * var(--nsr-logo-unit));
	width: auto;
	max-width: 100%;
	max-height: none;
	object-fit: contain;
}

/* La caja ya no necesita altura fija: la marca la define su propia altura
   calculada, y el centrado lo hace el grid. */
@media (min-width: 701px) {
	.nsr-logos li { height: auto; min-height: 54px; }
}

@media (max-width: 700px) {
	.nsr-logos li { height: auto; min-height: 44px; }
}

/* ══════════════════════════════════════════════════════════════════════════
   Cabecera de las páginas internas
   ══════════════════════════════════════════════════════════════════════════

   Antes ocupaba solo la mitad izquierda y dejaba medio ancho vacío, y forzaba
   cualquier imagen a 21:9 — el retrato del CEO en Nosotros quedaba recortado a
   la altura del saco. Ahora es a dos columnas y la foto conserva su
   proporción real: no se recorta nada.                                       */

.nsr-pagehead {
	padding-block: clamp(var(--nsr-space-12), 5vw, var(--nsr-space-16));
	border-bottom: 1px solid var(--nsr-line);
}

.nsr-pagehead__grid {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 0.85fr);
	gap: clamp(var(--nsr-space-8), 5vw, var(--nsr-space-16));
	align-items: center;
}

@media (max-width: 900px) {
	.nsr-pagehead__grid { grid-template-columns: 1fr; }
}

.nsr-pagehead__title {
	max-width: 20ch;
	margin: 0 0 var(--nsr-space-6);
	font-size: var(--nsr-text-4xl);
}

.nsr-pagehead .nsr-lead { margin-top: 0; }

/* La imagen conserva su proporción: `aspect-ratio` fijo era lo que decapitaba
   los retratos. Solo se le pone un techo de alto. */
.nsr-pagehead__media {
	margin: 0;
	overflow: hidden;
	border-radius: var(--nsr-radius-lg);
	background: var(--nsr-paper);
}

.nsr-pagehead__media img {
	width: 100%;
	height: auto;
	max-height: 520px;
	object-fit: contain;
	object-position: center top;
}

/* Cuando la foto es de planta o equipamiento (apaisada) sí llena la caja. */
.nsr-pagehead__media--cover img {
	aspect-ratio: 4 / 3;
	max-height: none;
	object-fit: cover;
}

/* ── Ritmo de las secciones internas ─────────────────────────────────────
 * Había demasiado aire entre la cabecera y el primer bloque de contenido. */

.nsr-brand:first-child { padding-block-start: var(--nsr-space-16); }

.nsr-shead__title + .nsr-lead { margin-top: var(--nsr-space-6); }

/* Cabecera de archivo a dos columnas, para no dejar media pantalla vacía. */
.nsr-shead--split .nsr-lead { margin-top: 0; }

/* La columna de lectura se centra cuando no hay barra lateral. */
.nsr-section > .nsr-prose,
.nsr-container > div:not([class]) > .nsr-prose {
	margin-inline: auto;
}

/* ══════════════════════════════════════════════════════════════════════════
   Nosotros
   ══════════════════════════════════════════════════════════════════════════ */

/* Bloque de relato: texto y foto alternando lado. Evita el muro de texto
   pegado al margen izquierdo con media pantalla vacía. */
.nsr-story {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 0.9fr);
	gap: clamp(var(--nsr-space-8), 5vw, var(--nsr-space-24));
	align-items: center;
}

@media (max-width: 900px) {
	.nsr-story { grid-template-columns: 1fr; }
}

.nsr-story--flip .nsr-story__media { order: -1; }

@media (max-width: 900px) {
	.nsr-story--flip .nsr-story__media { order: 0; }
}

.nsr-story__text h2 {
	max-width: 18ch;
	margin-bottom: var(--nsr-space-6);
}

.nsr-story__text .nsr-prose { max-width: 46ch; margin: 0; }
.nsr-story__text .nsr-prose p { font-size: var(--nsr-text-base); }

.nsr-story__media {
	margin: 0;
	overflow: hidden;
	border-radius: var(--nsr-radius-lg);
}

.nsr-story__media img {
	width: 100%;
	aspect-ratio: 4 / 3;
	object-fit: cover;
	transition: transform var(--nsr-duration-slow) var(--nsr-ease-out);
}

.nsr-story__media:hover img { transform: scale(1.03); }

/* Métricas sobre fondo oscuro. */
.nsr-stats--dark {
	grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
	background: rgb(255 255 255 / 14%);
}

.nsr-stats--dark li { background: var(--nsr-ink); }
.nsr-stats--dark strong { color: #fff; }
.nsr-stats--dark span { color: rgb(255 255 255 / 55%); }
.nsr-stats--dark li:hover { background: #141c16; }
.nsr-stats--dark li:hover strong { color: var(--nsr-green); }

/* ── Bloque del CEO ──────────────────────────────────────────────────────
 * El retrato es lo único propio que tiene la página: va grande y con la cita
 * al lado, no perdido como banner recortado. */

.nsr-ceo {
	display: grid;
	grid-template-columns: minmax(0, 0.6fr) minmax(0, 1fr);
	gap: clamp(var(--nsr-space-8), 5vw, var(--nsr-space-16));
	align-items: center;
}

@media (max-width: 900px) {
	.nsr-ceo { grid-template-columns: 1fr; }
}

.nsr-ceo__media {
	margin: 0;
	overflow: hidden;
	border-radius: var(--nsr-radius-lg);
	background: rgb(255 255 255 / 6%);
}

.nsr-ceo__media img {
	width: 100%;
	height: auto;
	/* El retrato está recortado sobre fondo claro: se muestra entero. */
	object-fit: contain;
}

.nsr-ceo__quote {
	max-width: 52ch;
	color: rgb(255 255 255 / 84%);
	font-size: var(--nsr-text-lg);
}

.nsr-ceo__quote p:first-child::before {
	content: '\201C';
	color: var(--nsr-green);
}

.nsr-ceo__quote p:last-child::after {
	content: '\201D';
	color: var(--nsr-green);
}

.nsr-ceo__sign {
	display: grid;
	gap: var(--nsr-space-1);
	margin-top: var(--nsr-space-8);
	padding-top: var(--nsr-space-6);
	border-top: 1px solid rgb(255 255 255 / 18%);
	max-width: 52ch;
}

.nsr-ceo__sign strong {
	color: #fff;
	font-family: var(--nsr-font-head);
	font-size: var(--nsr-text-lg);
}

.nsr-ceo__sign span {
	color: rgb(255 255 255 / 55%);
	font-size: var(--nsr-text-sm);
	letter-spacing: 0.08em;
	text-transform: uppercase;
}

/* Casilla del filtro combinable. */
.nsr-check {
	display: inline-block;
	width: 13px;
	height: 13px;
	margin-inline-end: var(--nsr-space-3);
	border: 1px solid var(--nsr-line-strong);
	border-radius: 3px;
	vertical-align: -1px;
	transition: background var(--nsr-duration) var(--nsr-ease),
		border-color var(--nsr-duration) var(--nsr-ease);
}

.nsr-filters a:hover .nsr-check { border-color: var(--nsr-green-700); }

.nsr-check--on {
	background: var(--nsr-green-700) center / 9px no-repeat
		url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M2 6.5 4.5 9 10 3' fill='none' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
	border-color: var(--nsr-green-700);
}

.nsr-filters [aria-current='true'] { font-weight: 500; }

/* ══════════════════════════════════════════════════════════════════════════
   Botón: relleno sin pseudo-elemento
   ══════════════════════════════════════════════════════════════════════════

   El relleno estaba hecho con un ::after posicionado. En Safari el pseudo
   quedaba por detrás del fondo del botón, así que en hover el texto se ponía
   oscuro sobre fondo oscuro y desaparecía. Se rehace con background-size sobre
   el propio elemento: un solo nodo, sin apilado, sin bug posible.             */

.nsr-btn {
	background-image: linear-gradient(var(--nsr-green), var(--nsr-green));
	background-repeat: no-repeat;
	background-position: 50% 100%;
	background-size: 100% 0%;
	transition: background-size var(--nsr-duration) var(--nsr-ease),
		color var(--nsr-duration) var(--nsr-ease),
		border-color var(--nsr-duration) var(--nsr-ease);
}

/* El ::after ya no se usa: se anula para que no vuelva a interferir. */
.nsr-btn::after { content: none; }

.nsr-btn:hover,
.nsr-btn:focus-visible {
	background-size: 100% 100%;
	color: var(--nsr-ink);
	border-color: var(--nsr-green);
}

/* Sobre fondo oscuro el texto también pasa a oscuro al rellenarse de verde. */
.nsr-btn--on-dark:hover,
.nsr-btn--on-dark:focus-visible,
.nsr-btn--ghost:hover,
.nsr-btn--ghost:focus-visible {
	color: var(--nsr-ink);
}

/* En las marcas el botón sólido usa el color propio; el relleno sigue siendo
   verde. Se excluye el fantasma, que tiene que seguir transparente. */
.nsr-brand .nsr-btn:not(.nsr-btn--ghost) {
	background-color: var(--nsr-brand-color, var(--nsr-ink));
	background-image: linear-gradient(var(--nsr-green), var(--nsr-green));
}

.nsr-brand .nsr-btn--ghost {
	background-color: transparent;
	background-image: linear-gradient(var(--nsr-green), var(--nsr-green));
}

/* ══════════════════════════════════════════════════════════════════════════
   Más microanimaciones
   ══════════════════════════════════════════════════════════════════════════ */

/* Reveal por defecto en los bloques de contenido de todas las páginas, no
   solo donde el template puso la clase a mano. */
@supports (animation-timeline: view()) {
	@media (prefers-reduced-motion: no-preference) {
		.nsr-story,
		.nsr-ceo,
		.nsr-brand,
		.nsr-pagehead__media,
		.nsr-specs__row,
		.nsr-prose > h2,
		.nsr-prose > h3,
		.nsr-services > li,
		.nsr-areas > li,
		.nsr-lines > li,
		.nsr-products-grid > li,
		.nsr-mosaic > li,
		.nsr-stats > li,
		.nsr-quotes > li {
			animation: nsr-rise linear both;
			animation-timeline: view();
			animation-range: entry 2% cover 20%;
		}
	}
}

/* Migas: la actual se subraya al pasar por el rastro. */
.nsr-breadcrumbs a {
	background-image: linear-gradient(currentColor, currentColor);
	background-repeat: no-repeat;
	background-position: 0 100%;
	background-size: 0% 1px;
	transition: background-size var(--nsr-duration) var(--nsr-ease),
		color var(--nsr-duration) var(--nsr-ease);
}

.nsr-breadcrumbs a:hover { background-size: 100% 1px; }

/* Fichas de producto: la imagen se levanta apenas. */
.nsr-product__media img {
	transition: transform var(--nsr-duration-slow) var(--nsr-ease-out);
}

.nsr-product__media:hover img { transform: scale(1.02); }

/* Badge de línea en la ficha. */
.nsr-product__line {
	transition: border-color var(--nsr-duration) var(--nsr-ease),
		background var(--nsr-duration) var(--nsr-ease);
}

.nsr-product__line:hover {
	border-color: var(--nsr-ink);
	background: var(--nsr-paper);
}

/* Filtros: el contador se corre cuando el ítem se activa. */
.nsr-filters__count {
	transition: color var(--nsr-duration) var(--nsr-ease),
		transform var(--nsr-duration) var(--nsr-ease);
}

.nsr-filters a:hover .nsr-filters__count {
	color: var(--nsr-ink);
	transform: translateX(-2px);
}

/* Logo de marca en el listado de representaciones. */
.nsr-brand__logo {
	transition: transform var(--nsr-duration) var(--nsr-ease);
}

.nsr-brand:hover .nsr-brand__logo { transform: translateY(-3px); }

/* Retrato del CEO. */
.nsr-ceo__media img {
	transition: transform var(--nsr-duration-slow) var(--nsr-ease-out);
}

.nsr-ceo__media:hover img { transform: scale(1.03); }

/* Cabecera de página: la foto respira al pasar. */
.nsr-pagehead__media img {
	transition: transform var(--nsr-duration-slow) var(--nsr-ease-out);
}

.nsr-pagehead__media:hover img { transform: scale(1.02); }

/* Chips y etiquetas. */
.nsr-chip { transition: border-color var(--nsr-duration) var(--nsr-ease); }
.nsr-product-row:hover .nsr-chip { border-color: var(--nsr-line-strong); }

/* Casilla de filtro: rebote corto al marcar. */
@media (prefers-reduced-motion: no-preference) {
	@keyframes nsr-check-pop {
		50% { transform: scale(1.25); }
	}

	.nsr-check--on { animation: nsr-check-pop 240ms var(--nsr-ease); }
}

/* ══════════════════════════════════════════════════════════════════════════
   Productos: sin el hueco entre el menú y el contenido
   ══════════════════════════════════════════════════════════════════════════ */

/* El archivo abría con el padding completo de sección y quedaba una franja
   blanca enorme antes de las migas. Arriba va apretado; abajo respira igual. */
.post-type-archive-producto .nsr-section:first-of-type,
.tax-linea .nsr-section:first-of-type,
.search .nsr-section:first-of-type {
	padding-block-start: var(--nsr-space-8);
}

.post-type-archive-producto .nsr-breadcrumbs,
.tax-linea .nsr-breadcrumbs {
	margin-bottom: var(--nsr-space-6);
}

.post-type-archive-producto .nsr-shead,
.tax-linea .nsr-shead {
	margin-bottom: var(--nsr-space-8);
}

/* Lo mismo en las páginas internas: la cabecera arrancaba muy abajo. */
.nsr-pagehead { padding-block-start: var(--nsr-space-8); }

/* ══════════════════════════════════════════════════════════════════════════
   Video con carga diferida
   ══════════════════════════════════════════════════════════════════════════

   Hasta el click solo se descarga la miniatura. Un iframe de YouTube trae
   cerca de un mega de scripts y arruinaría el peso del sitio.               */

.nsr-video {
	position: relative;
	display: grid;
	place-items: center;
	aspect-ratio: 16 / 9;
	overflow: hidden;
	border-radius: var(--nsr-radius-lg);
	background: var(--nsr-ink);
	cursor: pointer;
}

.nsr-video__thumb {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	/* La miniatura de YouTube viene en 4:3 con bandas: se recorta al centro. */
	object-fit: cover;
	transition: transform var(--nsr-duration-slow) var(--nsr-ease-out),
		filter var(--nsr-duration) var(--nsr-ease);
}

.nsr-video:hover .nsr-video__thumb {
	transform: scale(1.03);
	filter: brightness(0.85);
}

.nsr-video__play {
	position: relative;
	padding: 0;
	border: 0;
	background: none;
	cursor: pointer;
	line-height: 0;
}

.nsr-video__play svg {
	width: clamp(56px, 7vw, 80px);
	height: auto;
	filter: drop-shadow( 0 4px 16px rgb(0 0 0 / 35%) );
	transition: transform var(--nsr-duration) var(--nsr-ease);
}

.nsr-video__bg {
	fill: rgb(12 18 14 / 78%);
	transition: fill var(--nsr-duration) var(--nsr-ease);
}

.nsr-video:hover .nsr-video__play svg { transform: scale(1.08); }
.nsr-video:hover .nsr-video__bg { fill: var(--nsr-green); }

.nsr-video__play:focus-visible svg { transform: scale(1.08); }
.nsr-video__play:focus-visible .nsr-video__bg { fill: var(--nsr-green); }

.nsr-video iframe {
	width: 100%;
	height: 100%;
	border: 0;
}

.nsr-video[data-playing] { cursor: default; }