/* ==========================================================================
   JNG — Estilos
   Medidas y colores tomados del diseño (Diseño-web-JNG-HOME, artboard 1920px).
   ========================================================================== */

/* ---- Fuentes ---- */
@font-face {
	font-family: 'Futura Std';
	src: url('../fonts/FuturaStd-Light.woff2') format('woff2');
	font-weight: 300;
	font-display: swap;
}
@font-face {
	font-family: 'Futura Std';
	src: url('../fonts/FuturaStd-Book.woff2') format('woff2');
	font-weight: 400;
	font-display: swap;
}
@font-face {
	font-family: 'Futura Std';
	src: url('../fonts/FuturaStd-Medium.woff2') format('woff2');
	font-weight: 500;
	font-display: swap;
}
@font-face {
	font-family: 'Jost';
	src: url('../fonts/Jost-VariableFont_wght.woff2') format('woff2');
	font-weight: 100 900;
	font-display: swap;
}

/* ---- Tokens (muestreados del PDF) ---- */
:root {
	--c-red: #a50001;        /* rojo corporativo (bloques) */
	--c-red-dark: #7e0001;
	--c-accent: #fa3402;     /* rojo-naranja de etiquetas, títulos y mapa */
	--c-dark: #211316;       /* marrón casi negro */
	--c-cream: #f0e0d1;      /* crema */
	--c-green: #5c5e27;      /* verde oliva sostenibilidad */
	--c-orange: #ec5411;     /* naranja de la página de contacto */
	--c-wine: #531017;       /* granate de las fichas de especificaciones */
	--c-white: #ffffff;

	--f-display: 'Futura Std', 'Jost', sans-serif;
	--f-body: 'Jost', sans-serif;

	--header-h: 78px;                          /* barra blanca del diseño */
	--gutter: clamp(1.25rem, 4.4vw, 5.3rem);   /* 85px a 1920 */
	--gutter-lg: clamp(2rem, 7.8vw, 9.4rem);   /* 150px a 1920 */
	--section-y: clamp(4rem, 7.3vw, 8.75rem);  /* 140px a 1920 */

	--fs-hero: clamp(2.6rem, 4.567vw, 5.5rem);      /* 87.7px a 1920 (altura de caja = 64px del diseño) */
	--fs-claim: clamp(2.4rem, 4.7vw, 5.6rem);       /* ~90px */
	--fs-h2: clamp(2rem, 3.75vw, 4.5rem);           /* ~72px */
	--fs-stat: clamp(2rem, 3.18vw, 3.9rem);         /* 61px a 1920 */
	--fs-body: clamp(0.95rem, 0.99vw, 1.19rem);     /* ~19px */

	--hairline-light: 1px solid rgb(240 224 209 / 38%);
	--hairline-dark: 1px solid rgb(33 19 22 / 18%);

	--ease: cubic-bezier(0.22, 1, 0.36, 1);
	--dur: 1.1s;
}

/* ---- Reset mínimo ---- */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 84px; }
body {
	margin: 0;
	font-family: var(--f-body);
	font-weight: 300;
	font-size: var(--fs-body);
	color: var(--c-dark);
	background: var(--c-white);
	line-height: 1.55;
	-webkit-font-smoothing: antialiased;
}
img { max-width: 100%; height: auto; display: block; }
a { color: inherit; }
p { margin: 0 0 1em; }
h1, h2, h3 { font-family: var(--f-display); font-weight: 300; line-height: 1.08; margin: 0 0 0.5em; }
.screen-reader-text { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }

/* Líneas de título con pesos mezclados («Better source,» media / resto fina) */
.title-line { display: block; }
.title-line--strong { font-weight: 500; }
.title-line--thin { font-weight: 300; }

/* ---- Utilidades ---- */
.section--dark  { background: var(--c-dark); color: var(--c-cream); }
.section--red   { background: var(--c-red); color: var(--c-cream); }
.section--cream { background: var(--c-cream); color: var(--c-dark); }
.section--green { background: var(--c-green); color: var(--c-cream); }
.section--orange { background: var(--c-orange); color: var(--c-white); }
.section--white { background: var(--c-white); color: var(--c-dark); }

/* Flecha larga y fina del diseño */
.arrow {
	display: inline-block;
	width: 3.4em; height: 1px;
	background: currentColor;
	position: relative;
	vertical-align: middle;
}
.arrow::after {
	content: '';
	position: absolute; right: 0; top: 50%;
	width: 0.55em; height: 0.55em;
	border-top: 1px solid currentColor;
	border-right: 1px solid currentColor;
	transform: translateY(-50%) rotate(45deg) scaleY(0.9);
}
.arrow--left { transform: rotate(180deg); }

/* Botones */
/* Medidas del diseño: caja de 284×60 con texto de 15px y flecha larga de 3.3em. */
.btn {
	display: inline-flex;
	align-items: center;
	gap: 1.14em;
	font-family: var(--f-body);
	font-size: clamp(0.8rem, 0.776vw, 1rem);
	font-weight: 400;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	text-decoration: none;
	line-height: 1.2;
	padding: 1.36em 1.95em;
	border: 1px solid currentColor;
	background: transparent;
	transition: background 0.3s, color 0.3s, border-color 0.3s;
}
/* Flecha del diseño: línea fina larga con punta en ángulo. */
.btn--arrow { position: relative; }
.btn--arrow::after {
	content: '';
	width: 3.3em;
	height: 1px;
	background: currentColor;
}
.btn--arrow::before {
	content: '';
	position: absolute;
	right: 1.95em;
	top: 50%;
	width: 0.42em;
	height: 0.42em;
	border-top: 1px solid currentColor;
	border-right: 1px solid currentColor;
	transform: translate(1px, -50%) rotate(45deg);
}
.btn--red { background: var(--c-red); border-color: var(--c-red); color: var(--c-white); }
.btn--red:hover { background: var(--c-red-dark); border-color: var(--c-red-dark); }
.btn--dark { background: var(--c-dark); border-color: var(--c-dark); color: var(--c-cream); }
.btn--dark:hover { background: transparent; color: var(--c-dark); }
.btn--cream { background: var(--c-cream); border-color: var(--c-cream); color: var(--c-dark); }
.btn--cream:hover { background: transparent; color: var(--c-cream); }
.btn--outline-light:hover { background: var(--c-cream); color: var(--c-dark); }
.btn--outline-dark:hover { background: var(--c-dark); color: var(--c-cream); }

/* ==========================================================================
   Preloader — la foto del hero a pantalla completa con el logo encima; al
   terminar, la foto se encoge hasta su hueco de la retícula (ref. godaylight)
   ========================================================================== */
.preloader {
	position: fixed;
	inset: 0;
	z-index: 9999;
	display: grid;
	place-items: center;
	background: var(--c-dark);
	transition: background-color 0.7s var(--ease), opacity 0.45s var(--ease);
}
/* El marco que viaja: empieza a pantalla completa y acaba en la celda del hero.
   La imagen va con object-fit:cover, así que se recorta sola al encogerse. */
.preloader__media {
	position: fixed;
	top: 0; right: 0; bottom: 0; left: 0;
	overflow: hidden;
	transition:
		top 0.95s var(--ease), right 0.95s var(--ease),
		bottom 0.95s var(--ease), left 0.95s var(--ease);
}
.preloader__media-img { width: 100%; height: 100%; object-fit: cover; }
.preloader__veil { position: absolute; inset: 0; background: rgb(20 14 14 / 28%); transition: opacity 0.6s var(--ease); }
.preloader__logo {
	position: relative;
	z-index: 2;
	opacity: 0;
	transform: translateY(12px);
	animation: preloader-logo 0.9s var(--ease) 0.15s forwards;
	transition: opacity 0.35s var(--ease), transform 0.35s var(--ease);
}
.preloader__img { width: clamp(150px, 22vw, 280px); }
@keyframes preloader-logo { to { opacity: 1; transform: none; } }
/* Se va el logo y el fondo oscuro; queda solo la foto viajando. */
.preloader.is-opening { background-color: transparent; }
.preloader.is-opening .preloader__logo { opacity: 0; transform: translateY(-10px); animation: none; }
.preloader.is-opening .preloader__veil { opacity: 0; }
.preloader.is-done { opacity: 0; pointer-events: none; }
/* Sin foto (páginas sin hero) se mantiene el barrido de siempre. */
.preloader:not(.preloader--media) { transition: clip-path 1s var(--ease), opacity 0.45s var(--ease); }
.preloader:not(.preloader--media).is-done { clip-path: inset(0 0 100% 0); }
body.is-loading { overflow: hidden; }

/* ---- Reveals ---- */
.reveal {
	opacity: 0;
	transform: translateY(28px);
	transition: opacity var(--dur) var(--ease), transform var(--dur) var(--ease);
}
.reveal.is-visible { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
	.reveal, .preloader, .preloader__media, .preloader__logo { transition: none; animation: none; }
	.reveal { opacity: 1; transform: none; }
	/* La barra se muestra llena, sin recorrido. */
	.hero__meter-fill, .reveal.is-visible .hero__meter-fill { width: 100%; animation: none; }
	.hero__meter-fill::after { display: none; }
	/* El mapa aparece entero, sin barrido. */
	.cifras__map, .cifras__map.is-visible { animation: none; -webkit-mask-image: none; mask-image: none; }
}

/* ==========================================================================
   Header — barra blanca fija, logo oscuro (como el diseño)
   ========================================================================== */
.site-header {
	position: sticky;
	top: 0; left: 0; right: 0;
	z-index: 100;
	background: var(--c-white);
	color: var(--c-dark);
}
/* Diseño: 78px de alto, logo de 40px, márgenes de 60px y nav a la derecha. */
.site-header__inner {
	padding: 19px clamp(1.25rem, 3.13vw, 3.75rem);
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 2rem;
}
.site-logo, .site-header__brand img { height: clamp(30px, 2.08vw, 40px); width: auto; }
.site-nav__list {
	display: flex;
	gap: clamp(1.4rem, 2.6vw, 3.2rem);
	list-style: none;
	margin: 0; padding: 0;
}
.site-nav__list a {
	font-size: clamp(0.75rem, 0.75vw, 0.95rem);
	font-weight: 400;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	text-decoration: none;
}
.site-nav__list a:hover,
.site-nav__list .current-menu-item a,
.site-nav__list .current_page_item a { color: var(--c-red); }
.site-header__toggle { display: none; }

@media (max-width: 900px) {
	.site-nav { display: none; position: fixed; inset: 0; background: var(--c-white); padding: 6rem var(--gutter); }
	.site-header.is-open .site-nav { display: block; }
	/* El logo se mantiene visible por encima del overlay del menú. */
	.site-header__brand { position: relative; z-index: 12; }
	.site-nav__list { flex-direction: column; gap: 1.4rem; }
	.site-header__toggle {
		display: grid; gap: 6px; background: none; border: 0; padding: 0.5rem; z-index: 10; cursor: pointer; color: inherit;
	}
	.site-header__toggle span { display: block; width: 26px; height: 1.5px; background: currentColor; transition: transform 0.3s; }
	.site-header.is-open .site-header__toggle span:first-child { transform: translateY(4px) rotate(45deg); }
	.site-header.is-open .site-header__toggle span:last-child { transform: translateY(-3.5px) rotate(-45deg); }
}

/* ==========================================================================
   1 · Hero
   --------------------------------------------------------------------------
   Retícula calcada del diseño (artboard 1920×1080, cabecera de 78px):
     columnas  →  main 67.19% | rail 18.18% (líneas en x=1290 y x=1639) | links 14.64%
     filas     →  24.65% | 43.5% | 31.85%  (líneas a 243px y 672px del top del hero)
   ========================================================================== */
.hero {
	--hero-line: rgb(240 224 209 / 85%);   /* las líneas del diseño son crema casi opacas */
	--hero-rail-pad: clamp(0.75rem, 1.04vw, 1.4rem);   /* 20px @1920 */
	--hero-links-pad: clamp(0.9rem, 1.3vw, 1.7rem);    /* 25px @1920 */
	position: relative;
	min-height: calc(100svh - var(--header-h));
	display: grid;
	color: var(--c-white);
	overflow: hidden;
}
.hero__bg { position: absolute; inset: 0; }
.hero__bg img {
	position: absolute; inset: 0;
	width: 100%; height: 100%;
	object-fit: cover;
	/* El horizonte cae al 29.5% del alto del hero, como en el diseño. */
	object-position: center 36%;
	/* El diseño usa la foto muy apagada: cielo gris azulado y campo oscuro. */
	filter: brightness(0.5) saturate(0.92);
}
.hero__bg::after {
	content: '';
	position: absolute; inset: 0;
	background: linear-gradient(180deg, rgb(20 14 14 / 16%) 0%, rgb(20 14 14 / 0%) 28%, rgb(20 14 14 / 0%) 62%, rgb(20 14 14 / 32%) 100%);
}

.hero__grid {
	position: relative;
	z-index: 2;
	display: grid;
	grid-template-columns: 1fr 18.18% 14.64%;
	grid-template-rows: 24.65fr 43.5fr 31.85fr;
}
.hero__cell { min-width: 0; }
/* Hairlines de la retícula: bordes de las propias celdas. */
.hero__cell--kicker, .hero__cell--meter, .hero__cell--void-top { border-bottom: 1px solid var(--hero-line); }
.hero__cell--cta, .hero__cell--since, .hero__cell--void-bottom { border-top: 1px solid var(--hero-line); }
.hero__cell--meter, .hero__cell--media, .hero__cell--since {
	border-left: 1px solid var(--hero-line);
	border-right: 1px solid var(--hero-line);
}

/* Fila 1 — claim y medidor, alineados abajo contra la línea */
.hero__cell--kicker {
	display: flex;
	align-items: flex-end;
	padding: 0 0 clamp(0.8rem, 1.3vw, 1.7rem) var(--gutter-lg);
}
.hero__kicker {
	margin: 0;
	font-size: clamp(0.82rem, 0.94vw, 1.15rem);   /* 18px @1920 */
	letter-spacing: 0.1em;
	text-transform: uppercase;
	line-height: 1.2;
}
.hero__cell--meter {
	display: flex;
	align-items: flex-end;
	padding: 0 var(--hero-rail-pad) clamp(0.65rem, 0.95vw, 1.25rem);
}
.hero__meter { width: 100%; }
.hero__meter-bar {
	display: block;
	width: clamp(96px, 7.92vw, 200px);
	height: clamp(9px, 0.63vw, 15px);
	border: 1px solid var(--hero-line);
	margin-bottom: clamp(0.4rem, 0.5vw, 0.7rem);
	overflow: hidden;
}
/* Se rellena hasta el 100% al entrar el hero, con un brillo que recorre la barra. */
.hero__meter-fill {
	display: block;
	width: 0;
	height: 100%;
	background: var(--c-cream);
	position: relative;
}
.hero__meter-fill::after {
	content: '';
	position: absolute; inset: 0;
	background: linear-gradient(90deg, transparent 0%, rgb(255 255 255 / 85%) 50%, transparent 100%);
	transform: translateX(-100%);
}
.reveal.is-visible .hero__meter-fill {
	animation: meter-fill 1.7s var(--ease) 0.35s forwards;
}
.reveal.is-visible .hero__meter-fill::after {
	animation: meter-shine 1.7s var(--ease) 0.35s forwards;
}
@keyframes meter-fill { from { width: 0; } to { width: 100%; } }
@keyframes meter-shine { from { transform: translateX(-100%); } to { transform: translateX(100%); } }
.hero__meter-label {
	margin: 0;
	font-size: clamp(0.75rem, 0.79vw, 0.98rem);   /* 15px @1920 */
	line-height: 1.2;
}

/* Fila 2 — titular, foto de pimientos y enlaces */
.hero__cell--main {
	padding: clamp(1.6rem, 3.4vw, 4.4rem) 0 0 var(--gutter-lg);
}
.hero__title {
	font-size: var(--fs-hero);
	line-height: 1.072;          /* 94px de interlínea sobre 87.7px de cuerpo */
	margin: 0 0 0.18em;
}
/* La segunda línea del diseño va algo más estrecha que nuestro corte Light. */
.hero__title .title-line--thin { letter-spacing: -0.026em; }
.hero__text {
	max-width: 26em;
	font-size: clamp(1rem, 1.084vw, 1.35rem);   /* 21px @1920 */
	line-height: 1.2;
	margin: 0;
}
.hero__cell--media { display: grid; }
.hero__media { display: block; height: 100%; }
.hero__media-img { width: 100%; height: 100%; object-fit: cover; }
.hero__cell--words {
	padding: clamp(0.8rem, 1.2vw, 1.6rem) 0 0 var(--hero-links-pad);
}
/* No son enlaces: solo las palabras que definen cada hero. */
.hero__words {
	list-style: none;
	margin: 0;
	padding: 0;
	font-size: clamp(0.7rem, 0.74vw, 0.92rem);
	line-height: 1.55;
	letter-spacing: 0.05em;
	text-transform: uppercase;
}
.hero__words li { white-space: nowrap; }

/* Fila 3 — CTA y «Since» */
.hero__cell--cta {
	padding: clamp(1rem, 1.77vw, 2.3rem) 0 0 var(--gutter-lg);
}
.hero__cta {
	display: inline-flex;
	align-items: stretch;
	min-height: clamp(46px, 3.02vw, 72px);
	background: var(--c-white);
	color: var(--c-dark);
}
.hero__cta-label {
	display: flex;
	align-items: center;
	padding-left: clamp(0.9rem, 1.25vw, 1.6rem);
	padding-right: clamp(1.2rem, 2.55vw, 3.2rem);
	font-size: clamp(0.85rem, 0.89vw, 1.1rem);   /* 17px @1920 */
	line-height: 1.2;
}
.hero__cta-btn {
	border: 0;
	padding: 0 clamp(0.8rem, 0.83vw, 1.1rem);
	font-size: clamp(0.8rem, 0.95vw, 1.15rem);  /* 18px @1920 */
	letter-spacing: 0.1em;
	justify-content: center;
}
.hero__cell--since {
	padding: clamp(0.75rem, 1vw, 1.3rem) var(--hero-rail-pad) 0;
}
.hero__since {
	margin: 0;
	font-size: clamp(0.7rem, 0.7vw, 0.88rem);
	letter-spacing: 0.06em;
	text-transform: uppercase;
	line-height: 1.2;
}

/* ==========================================================================
   2 · Intro + Cifras
   --------------------------------------------------------------------------
   Medidas del artboard 1920: divisoria a 960, bloques de cifra de 270px de
   alto, columna izquierda con 85px de margen y el mapa a 721×361.
   ========================================================================== */
.cifras { border-top: var(--hairline-light); }
.cifras__inner { display: grid; grid-template-columns: 1fr 1fr; }
.cifras__intro {
	padding: clamp(2.5rem, 3.55vw, 4.5rem) var(--gutter) clamp(3rem, 5vw, 6.2rem);
	border-right: var(--hairline-light);
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	/* Título arriba, botón abajo (con el mapamundi y el texto en medio),
	   como reparte la columna el diseño. */
	justify-content: space-between;
	gap: clamp(1.5rem, 2.8vw, 3.6rem);
}
.cifras__title {
	font-size: clamp(1.35rem, 1.786vw, 2.2rem);  /* 34.3px @1920 */
	line-height: 1.207;                           /* 41.4px de interlínea */
	font-weight: 300;
	margin: 0;
	max-width: 21em;
}
.cifras__title-red { display: block; color: var(--c-accent); }

/* Mapamundi: reserva su hueco aunque aún no esté el SVG. */
.cifras__map {
	width: 91.3%;                /* 721px sobre los 790 de columna útil @1920 */
	aspect-ratio: 721 / 361;
	margin: 0;
}
.cifras__map svg, .cifras__map-img { width: 100%; height: 100%; display: block; }
.cifras__map svg { overflow: visible; }
/* Provisional: mientras no llegue el SVG del mapa, se ve la trama de puntos
   ocupando su hueco exacto. Desaparece sola en cuanto exista el archivo. */
.cifras__map--pendiente {
	background-image: radial-gradient(circle, rgb(250 52 2 / 55%) 1.1px, transparent 1.2px);
	background-size: 9px 9px;
}
/* Barrido de izquierda a derecha al entrar en pantalla: los puntos van
   apareciendo. Funciona con cualquier SVG, sin depender de su estructura. */
.cifras__map {
	-webkit-mask-image: linear-gradient(90deg, #000 0 55%, transparent 88%);
	mask-image: linear-gradient(90deg, #000 0 55%, transparent 88%);
	-webkit-mask-size: 230% 100%;
	mask-size: 230% 100%;
	-webkit-mask-position: 100% 0;
	mask-position: 100% 0;
}
.cifras__map.is-visible {
	animation: map-sweep 2.2s var(--ease) 0.2s forwards;
}
@keyframes map-sweep {
	from { -webkit-mask-position: 100% 0; mask-position: 100% 0; }
	to   { -webkit-mask-position: 0 0;    mask-position: 0 0; }
}

.cifras__text { max-width: 31.5em; margin: 0; font-size: clamp(1rem, 1.042vw, 1.3rem); line-height: 1.3; }
.cifras__text p { margin: 0 0 1.3em; }
.cifras__text p:last-child { margin-bottom: 0; }
.cifras__cta { margin: 0; }

.cifras__list { list-style: none; margin: 0; padding: 0; display: grid; }
.cifras__item {
	display: grid;
	align-content: center;
	gap: clamp(0.5rem, 0.85vw, 1.1rem);
	min-height: clamp(170px, 14.06vw, 300px);   /* 270px @1920 */
	padding: 2rem var(--gutter) 2rem clamp(2rem, 6.5vw, 7.8rem);
	border-top: var(--hairline-light);
	transition: background-color 0.35s var(--ease);
}
.cifras__item:first-child { border-top: 0; }
/* Los bloques rojos del diseño son el hover; en reposo van en oscuro. */
.cifras__item:hover { background: var(--c-red); }
.cifras__label {
	font-size: clamp(1.15rem, 1.55vw, 1.9rem);   /* 30px @1920 */
	color: var(--c-accent);
	transition: color 0.35s var(--ease);
}
.cifras__item:hover .cifras__label { color: var(--c-white); }
.cifras__value {
	font-family: var(--f-display);
	font-weight: 300;
	font-size: var(--fs-stat);
	line-height: 1.05;
	color: var(--c-white);
}
.cifras__unit { font-size: 0.42em; }

/* ==========================================================================
   3 · Productos
   ========================================================================== */
/* Artboard 1920×968: nombre centrado a 138px del top, subrayado y con flechas
   en círculo rojo de 54px a ±178px; debajo la línea de sectores y una plomada
   que baja hasta un punto sobre el montón de pimentón. */
.productos { padding: clamp(3.2rem, 5.781vw, 6.94rem) var(--gutter) clamp(1.5rem, 2.292vw, 2.75rem); text-align: center; }
.productos__head {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: clamp(1rem, 2.031vw, 2.44rem);   /* 39px a 1920, del círculo al subrayado */
}
.productos__name {
	font-size: clamp(1.2rem, 1.46vw, 1.75rem);  /* 28px a 1920 */
	font-weight: 400;
	letter-spacing: 0.02em;
	text-transform: uppercase;
	margin: 0;
	padding-bottom: 0.22em;
	border-bottom: 1px solid currentColor;      /* el subrayado del diseño */
	white-space: nowrap;
}
.productos__arrow {
	flex: 0 0 auto;
	width: clamp(38px, 2.81vw, 54px);           /* 54px a 1920 */
	aspect-ratio: 1;
	display: grid;
	place-items: center;
	padding: 0;
	background: none;
	border: 1px solid var(--c-red);
	border-radius: 50%;
	color: var(--c-red);
	cursor: pointer;
	transition: background 0.3s var(--ease), color 0.3s var(--ease);
}
.productos__arrow:hover { background: var(--c-red); color: var(--c-cream); }
/* Dentro del círculo la flecha es corta, no la larga de los botones. */
.productos__arrow .arrow { width: 1.5em; font-size: clamp(0.7rem, 0.73vw, 0.88rem); }
/* La línea de sectores la reescribe el JS al cambiar de producto, así que es
   un solo nodo de texto, no una lista. */
.productos__sectores {
	margin: clamp(1.6rem, 3.021vw, 3.63rem) 0 0;   /* 58px a 1920 */
	min-height: 1.4em;                             /* no salta si un producto no tiene */
	font-size: clamp(0.95rem, 1.15vw, 1.38rem);    /* 22px a 1920 */
	line-height: 1.4;
}
.productos__pointer {
	display: block;
	width: 1px; height: clamp(60px, 6.51vw, 125px);   /* 125px a 1920 */
	margin: clamp(1rem, 1.927vw, 2.31rem) auto 0;     /* 37px a 1920 */
	background: rgb(33 19 22 / 55%);
	position: relative;
}
.productos__pointer::after {
	content: '';
	position: absolute; bottom: -5px; left: 50%;
	width: 10px; height: 10px;
	border-radius: 50%;
	background: var(--c-dark);
	transform: translateX(-50%);
}
.productos__track {
	list-style: none;
	/* El montón sube por detrás de la plomada: el punto queda apoyado en él.
	   Ojo con el orden del clamp: en negativo el mínimo es el valor más grande
	   en magnitud (-74px a 1920), no al revés. */
	margin: clamp(-4.63rem, -3.854vw, -1rem) 0 0;
	padding: 0;
	display: flex;
	overflow-x: auto;
	scroll-snap-type: x mandatory;
	scrollbar-width: none;
}
.productos__track::-webkit-scrollbar { display: none; }
.productos__slide { flex: 0 0 100%; scroll-snap-align: center; }
.productos__slide a { display: block; text-decoration: none; }
.productos__img {
	width: min(100%, 1151px);          /* el montón mide 1151×497 en el diseño */
	aspect-ratio: 1151 / 497;
	object-fit: contain;
	margin: 0 auto;
	mix-blend-mode: multiply; /* integra el producto sobre el fondo crema */
}
.productos__cta { margin-top: clamp(0.8rem, 1.354vw, 1.63rem); text-align: center; }

/* ==========================================================================
   4 · Sostenibilidad
   --------------------------------------------------------------------------
   Artboard 1920 × 940: foto y panel a mitades, regla vertical de la foto en
   x=861, línea de la lista en x=1045 y círculos de 53px a partir de x=1086.
   ========================================================================== */
.sostenibilidad {
	--sost-dot: clamp(38px, 2.76vw, 60px);        /* 53px @1920 */
	--sost-tick: clamp(24px, 2.14vw, 46px);       /* 41px: línea → círculo */
	--sost-line: rgb(240 224 209 / 65%);
	display: grid;
	grid-template-columns: 1fr 1fr;
	position: relative;
}
.sostenibilidad__media { position: relative; overflow: hidden; min-height: 640px; }
.sostenibilidad__media img {
	position: absolute; inset: 0;
	width: 100%; height: 100%;
	object-fit: cover;
	/* En el diseño la foto va bastante más apagada que el original. */
	filter: brightness(0.68) saturate(1.1);
}

/* Elipse de trazo discontinuo que señala la abeja. */
.sostenibilidad__spot {
	position: absolute;
	z-index: 2;
	left: 50.7%; top: 52.9%;
	width: 24.1%; aspect-ratio: 231 / 125;
	transform: translate(-50%, -50%);
	border: 1px dashed var(--c-cream);
	border-radius: 50%;
}

/* Regla vertical con el año arriba y el claim girado en el centro. */
.sostenibilidad__rule {
	position: absolute;
	z-index: 2;
	left: 89.7%;
	top: 9.6%; bottom: 7.7%;
	width: 1px;
	background: var(--c-cream);
	color: var(--c-cream);
}
.sostenibilidad__year {
	position: absolute;
	top: 0; right: clamp(0.8rem, 1.46vw, 1.9rem);
	font-size: clamp(0.75rem, 0.94vw, 1.15rem);
	line-height: 1;
	white-space: nowrap;
}
.sostenibilidad__caption {
	position: absolute;
	top: 50%; right: clamp(0.8rem, 1.46vw, 1.9rem);
	transform: translateY(-50%);
	writing-mode: vertical-rl;
	font-size: clamp(0.7rem, 0.75vw, 0.95rem);
	letter-spacing: 0.14em;
	text-transform: uppercase;
	white-space: nowrap;
}
.sostenibilidad__title {
	position: absolute;
	z-index: 2;
	left: clamp(1.25rem, 3.65vw, 4.4rem); bottom: 5.3%;
	margin: 0;
	color: var(--c-cream);
	font-size: clamp(2.2rem, 4.06vw, 5rem);   /* 78px @1920 */
	line-height: 1;
	font-weight: 300;
}

.sostenibilidad__panel {
	padding: clamp(2.5rem, 4.06vw, 5.2rem) var(--gutter) clamp(2.5rem, 3.75vw, 4.8rem);
	position: relative;
	z-index: 1;
}
.sostenibilidad__subtitle {
	font-size: clamp(1.5rem, 2.08vw, 2.55rem);  /* 40px @1920 */
	font-weight: 300;
	line-height: 1.15;
	margin: 0 0 clamp(0.5rem, 0.9vw, 1.2rem);
}
.sostenibilidad__text {
	max-width: 40.5em;
	font-size: clamp(0.95rem, 1.02vw, 1.28rem);
	line-height: 1.25;
	margin: 0 0 clamp(2.5rem, 4.06vw, 5.2rem);
}

/* Lista numerada: línea vertical de centro a centro y guiones hasta cada círculo. */
.sostenibilidad__list {
	counter-reset: sost;
	list-style: none;
	position: relative;
	margin: 0 0 clamp(3rem, 5.3vw, 6.8rem);
	padding: 0 0 0 var(--sost-tick);
	display: grid;
	gap: calc(1.27vw);
}
.sostenibilidad__list::before {
	content: '';
	position: absolute;
	left: 0;
	top: calc(var(--sost-dot) / 2);
	bottom: calc(var(--sost-dot) / 2);
	width: 1px;
	background: var(--sost-line);
}
.sostenibilidad__list li {
	counter-increment: sost;
	display: flex;
	align-items: center;
	gap: clamp(0.8rem, 1.1vw, 1.5rem);
	font-size: clamp(0.75rem, 0.825vw, 1rem);
	letter-spacing: 0.085em;
	text-transform: uppercase;
	position: relative;
}
/* Guion desde la línea vertical hasta el borde del círculo. */
.sostenibilidad__list li::after {
	content: '';
	position: absolute;
	left: calc(-1 * var(--sost-tick)); top: 50%;
	width: var(--sost-tick); height: 1px;
	background: var(--sost-line);
}
/* El punto 4 se prolonga por encima de la foto hasta la regla vertical. */
.sostenibilidad__list li:nth-child(4)::after {
	left: -11.72vw;
	width: 11.72vw;
	background: var(--c-cream);
}
.sostenibilidad__list li::before {
	content: counter(sost);
	display: grid;
	place-items: center;
	width: var(--sost-dot); height: var(--sost-dot);
	flex: 0 0 auto;
	border-radius: 50%;
	background: var(--badge, var(--c-red));
	color: var(--c-cream);
	font-size: clamp(0.75rem, 0.83vw, 1rem);
	z-index: 1;
}
/* Degradado de color de los badges, muestreado del diseño */
.sostenibilidad__list li:nth-child(1) { --badge: #211316; }
.sostenibilidad__list li:nth-child(2) { --badge: #a60001; }
.sostenibilidad__list li:nth-child(3) { --badge: #e80008; }
.sostenibilidad__list li:nth-child(4) { --badge: #f62200; }
.sostenibilidad__list li:nth-child(5) { --badge: #fa3402; }
.sostenibilidad__list li:nth-child(6) { --badge: #ec5411; }
.sostenibilidad__list li:nth-child(n+7) { --badge: #ec5411; }

/* ==========================================================================
   5 · Vídeo
   ========================================================================== */
.video { line-height: 0; background: var(--c-dark); }
/* El diseño lo da a 1920×1076, o sea 16:9 clavado. */
.video__player, .video__embed iframe { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; }

/* ==========================================================================
   Bloque: retícula del claim (Oleoresina y pre-footer, y las interiores)

   Medido sobre el artboard de 1920 (docs/diseno/home.pdf):
     columnas  183 | 348 | 856 | 349 | 184   → hairlines en x=183, 531, 1387, 1735
     filas     523 | 434                     → hairline horizontal en y=523
   Las hairlines se pintan como bordes de las celdas, no como elementos aparte.
   ========================================================================== */
.claim {
	--claim-linea: rgb(240 224 209 / 34%);
	position: relative;
}
/* El rótulo va DENTRO de la retícula, arriba de la columna central, no encima
   del bloque: en el diseño las hairlines arrancan en el borde de la sección. */
.claim__kicker {
	grid-area: 1 / 3;
	align-self: start;
	text-align: center;
	font-family: var(--f-display);
	font-size: clamp(1.3rem, 1.77vw, 2.13rem);
	font-weight: 400;
	letter-spacing: 0.22em;
	text-transform: uppercase;
	margin: 0;
	padding-top: clamp(2rem, 6.35vw, 7.6rem);   /* 122px a 1920 */
}
.claim__grid {
	display: grid;
	grid-template-columns: 9.531% 18.125% 44.583% 18.177% 9.583%;
	grid-template-rows: 54.65% 45.35%;
	min-height: clamp(560px, 49.84vw, 1000px);
}
/* Las celdas centrales llevan las cuatro hairlines del diseño. */
.claim__cell { border-bottom: 1px solid var(--claim-linea); }
.claim__cell--foto-1 {
	grid-area: 1 / 2;
	border-left: 1px solid var(--claim-linea);
	border-right: 1px solid var(--claim-linea);
	display: flex;
	align-items: flex-end;      /* la foto se pega al hairline horizontal */
}
.claim__cell--texto-2 {
	grid-area: 1 / 4;
	border-left: 1px solid var(--claim-linea);
	border-right: 1px solid var(--claim-linea);
	display: flex;
	align-items: flex-end;
	justify-content: flex-end;
	padding: 0 0 clamp(1.2rem, 2vw, 2.2rem);
}
.claim__cell--texto-1 {
	grid-area: 2 / 2;
	border-left: 1px solid var(--claim-linea);
	border-right: 1px solid var(--claim-linea);
	border-bottom: 0;
	padding: clamp(1.6rem, 2.9vw, 3.4rem) 0 0;
}
.claim__cell--foto-2 {
	grid-area: 2 / 4;
	border-left: 1px solid var(--claim-linea);
	border-right: 1px solid var(--claim-linea);
	border-bottom: 0;
	display: flex;
	align-items: flex-start;    /* la foto arranca en el hairline horizontal */
}
/* El claim ocupa la columna central entera y lo parte el hairline: la 1ª línea
   queda justo encima y la 2ª justo debajo. Ambas van centradas. */
.claim__title {
	grid-area: 1 / 3 / 3 / 4;
	align-self: center;
	margin: 0;
	text-align: center;
	font-size: var(--fs-claim);
	line-height: 1.16;
	color: var(--c-cream);
}
.claim__title .title-line { display: block; }
.claim__title .title-line--strong { font-weight: 500; }

.claim__media { width: 100%; }
.claim__img { width: 100%; aspect-ratio: 348 / 433; object-fit: cover; }
.claim__text {
	margin: 0;
	font-size: clamp(0.85rem, 0.93vw, 1.12rem);
	line-height: 1.42;
}
.claim__cell--texto-2 .claim__text { text-align: right; }

/* Artboard 1920×921: título a 30px del top, tarjetas de 428×540 a partir de
   y=255 (rótulo) / y=303 (foto) y bullets centrados a y=875. */
.blog { padding: clamp(1.5rem, 1.56vw, 1.88rem) 0 clamp(1.5rem, 2.19vw, 2.63rem); }
.blog__head { padding: 0 var(--gutter); }
.blog__title {
	font-size: clamp(1.6rem, 2.29vw, 2.75rem);   /* 44px a 1920 */
	font-weight: 400;
	text-transform: uppercase;
	letter-spacing: 0.02em;
	margin: 0;
	padding-bottom: 0.06em;
	/* fit-content en vez de inline-block: el subrayado queda igual de ajustado
	   pero sin el interlineado que mete la línea base de un inline. */
	display: block;
	width: fit-content;
	line-height: 1.05;
	border-bottom: 1px solid currentColor;       /* «BLOG» va subrayado */
	color: var(--c-cream);
}
.blog__subtitle {
	font-family: var(--f-display);
	font-size: clamp(1.3rem, 1.875vw, 2.25rem);  /* 36px a 1920 */
	line-height: 1.1;
	margin: 0.22em 0 0;
	color: var(--c-cream);
}
.blog__intro {
	margin: clamp(0.8rem, 1.25vw, 1.5rem) 0 0;   /* 24px a 1920 */
	/* Los saltos del panel ya parten el texto en dos líneas: el ancho solo
	   tiene que dejarles sitio (790px la más larga del diseño). */
	max-width: min(100%, 830px);
	line-height: 1.35;
	font-size: clamp(0.9rem, 0.99vw, 1.19rem);
}

.blog__slider { margin-top: clamp(1.4rem, 2.71vw, 3.25rem); }  /* 52px a 1920 */
.blog__track {
	list-style: none;
	margin: 0;
	padding: 0 var(--gutter);
	display: flex;
	gap: clamp(0.5rem, 0.73vw, 0.88rem);         /* 14px a 1920 */
	overflow-x: auto;
	scroll-snap-type: x mandatory;
	scroll-padding-left: var(--gutter);
	scrollbar-width: none;
}
.blog__track::-webkit-scrollbar { display: none; }
.blog__card {
	flex: 0 0 clamp(220px, 22.29vw, 428px);      /* 428px a 1920 */
	scroll-snap-align: start;
}
.blog__card a { text-decoration: none; display: block; }
/* Altura fija de dos líneas: los titulares reales tienen largos distintos y,
   sin esto, cada foto arrancaría a una altura y la fila quedaría escalonada. */
.blog__card-head {
	display: flex;
	align-items: flex-start;
	gap: 1.6rem;
	min-height: 2.6em;
	margin-bottom: clamp(0.7rem, 1.15vw, 1.38rem);  /* 22px a 1920 */
	font-size: clamp(0.85rem, 0.94vw, 1.13rem);     /* 18px a 1920 */
	line-height: 1.3;
}
.blog__card-title {
	display: -webkit-box;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 2;
	overflow: hidden;
}
.blog__card-head .arrow { margin-top: 0.55em; }
.blog__card-head .arrow { flex: 0 0 auto; transition: transform 0.3s var(--ease); }
.blog__card a:hover .arrow { transform: translateX(6px); }
.blog__img { width: 100%; aspect-ratio: 428 / 540; object-fit: cover; }

.blog__bullets { display: flex; justify-content: center; gap: 0.62rem; margin-top: clamp(1rem, 1.67vw, 2rem); }
.blog__bullet {
	width: 8px; aspect-ratio: 1;
	padding: 0;
	border: 1px solid var(--c-cream);
	border-radius: 50%;
	background: transparent;
	opacity: 0.6;
	cursor: pointer;
	transition: background 0.3s var(--ease), opacity 0.3s var(--ease);
}
.blog__bullet.is-current { background: var(--c-cream); opacity: 1; }

/* ==========================================================================
   8 · Origen
   ========================================================================== */
.origen { position: relative; min-height: 92svh; display: grid; place-items: center; text-align: center; color: var(--c-cream); overflow: hidden; }
.origen__bg, .origen__bg img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.origen__bg::after { content: ''; position: absolute; inset: 0; background: rgb(33 19 22 / 45%); }
.origen__bg img { filter: grayscale(1); }
.origen__inner { position: relative; z-index: 2; max-width: 72ch; padding: var(--section-y) var(--gutter); }
.origen__title {
	font-size: clamp(2.6rem, 5.7vw, 6.9rem); /* ~110px */
	line-height: 1.06;
	text-transform: uppercase;
	font-weight: 300;
	letter-spacing: 0.02em;
	margin-bottom: 0.5em;
}
.origen__text { max-width: 66ch; margin: 0 auto 2.8em; }

/* ==========================================================================
   9 · Calidad certificada
   ========================================================================== */
.calidad__inner {
	display: grid;
	grid-template-columns: 1fr 1fr;   /* el corte cae en x=960 */
	min-height: clamp(600px, 49.375vw, 1000px);   /* 948px a 1920 */
}
.calidad__content {
	padding: clamp(3rem, 7.55vw, 9.06rem) var(--gutter) clamp(3rem, 7vw, 8.4rem);
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: flex-start;
	text-align: center;
}
.calidad__title { font-size: clamp(2.2rem, 3.85vw, 4.6rem); margin: 0 0 0.62em; }  /* 74px a 1920 */
.calidad__title .title-word--strong { font-weight: 500; }
.calidad__title .title-word--thin { font-weight: 300; }
/* Interlineado del diseño: 24px sobre 19px de cuerpo, más apretado que el
   del resto del sitio; el ancho lo marca la línea más larga (557px). */
.calidad__text {
	max-width: min(100%, 600px);
	line-height: 1.28;
	margin: 0 0 clamp(2.5rem, 4.7vw, 5.6rem);
}
.calidad__sellos {
	list-style: none;
	margin: 0 0 clamp(3rem, 5.3vw, 6.4rem);
	padding: 0;
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	align-items: center;
	gap: clamp(1.2rem, 2.08vw, 2.5rem) clamp(1rem, 1.56vw, 1.88rem);
	max-width: 540px;   /* el diseño mete 5 sellos en la primera fila */
}
/* Los sellos van en blanco y negro y recuperan el color al pasar por encima.
   Se acotan por alto Y por ancho: los hay muy apaisados (el de la iniciativa
   de especias sostenibles es 5:1) y a alto fijo se comerían la fila entera. */
.calidad__sello {
	height: clamp(28px, 2.4vw, 46px);
	width: auto;
	max-width: clamp(64px, 5.42vw, 104px);
	object-fit: contain;
	filter: grayscale(1);
	transition: filter 0.35s var(--ease);
}
.calidad__sellos li:hover .calidad__sello { filter: none; }
.calidad__cta { margin-top: auto; }

.calidad__media { position: relative; overflow: hidden; }
.calidad__img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
/* Retícula sobre la foto: verticales a 32.85% y 69.24%, horizontales a 28.59%
   y 74.16% del alto (x=1276/1625, y=271/703 sobre el artboard). */
.calidad__grid {
	position: absolute;
	inset: 0;
	z-index: 1;
	pointer-events: none;
	--l: rgb(255 255 255 / 55%);
	background-image:
		linear-gradient(to right, var(--l), var(--l)),
		linear-gradient(to right, var(--l), var(--l)),
		linear-gradient(to bottom, var(--l), var(--l)),
		linear-gradient(to bottom, var(--l), var(--l));
	background-size: 1px 100%, 1px 100%, 100% 1px, 100% 1px;
	background-position: 32.85% 0, 69.24% 0, 0 28.59%, 0 74.16%;
	background-repeat: no-repeat;
}
/* La foto pequeña ocupa exactamente la celda central: 349×432. */
.calidad__inset {
	position: absolute;
	z-index: 2;
	left: 32.85%;
	top: 28.59%;
	width: 36.39%;
	height: 45.57%;
}
.calidad__img-inset { width: 100%; height: 100%; object-fit: cover; }

/* ==========================================================================
   Footer
   ========================================================================== */
.site-footer {
	background: var(--c-dark);
	color: var(--c-cream);
	padding: clamp(4rem, 8vw, 9rem) var(--gutter) 2.5rem;
}
.site-footer__inner { display: grid; gap: clamp(4rem, 9vw, 11rem); }
.site-footer__col {
	justify-self: end;
	text-align: left;
	display: grid;
	gap: 2rem;
	min-width: clamp(180px, 16vw, 300px);
}
.site-footer__menu { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.85rem; }
.site-footer__menu a {
	font-size: 0.85rem;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	text-decoration: none;
}
.site-footer__menu a:hover { color: var(--c-accent); }
.site-footer__social { list-style: none; margin: 0; padding: 0; display: flex; gap: 1.2rem; }
.site-footer__social a { font-size: 0.85rem; text-decoration: none; }
.site-footer__social a:hover { color: var(--c-accent); }
.site-footer__legal-menu { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.5rem; }
.site-footer__legal-menu a { color: var(--c-accent); font-size: 0.9rem; text-decoration: none; }
.site-footer__legal-menu a:hover { text-decoration: underline; }
.site-footer__bottom {
	display: flex;
	align-items: flex-end;
	justify-content: space-between;
	gap: 2rem;
	flex-wrap: wrap;
}
.site-footer__brand { display: flex; align-items: flex-end; gap: 1.6rem; }
.site-footer__logo { width: clamp(220px, 24vw, 470px); height: auto; }
.site-footer__claim { margin: 0 0 0.4rem; font-size: clamp(0.95rem, 1.15vw, 1.4rem); line-height: 1.3; }
.site-footer__copy { margin: 0; font-size: 0.85rem; opacity: 0.85; }

/* ==========================================================================
   Bloque: vídeo con portada
   El diseño tapa el vídeo con el titular y un play redondo; al pulsarlo la
   capa se va y aparecen los controles del navegador.
   ========================================================================== */
.video--portada { position: relative; }
.video--portada .video__player { aspect-ratio: 16 / 9; max-height: 100svh; }
.video__overlay {
	position: absolute;
	inset: 0;
	display: grid;
	align-content: center;
	justify-items: center;
	gap: 1.4rem;
	padding: var(--gutter);
	text-align: center;
	color: var(--c-white);
	background: rgb(33 19 22 / 22%);
	transition: opacity 0.5s var(--ease), visibility 0.5s;
}
.video.is-playing .video__overlay { opacity: 0; visibility: hidden; }
.video__title {
	margin: 0;
	font-size: var(--fs-h2);
	line-height: 1.12;
	max-width: 18ch;
	text-wrap: balance;
}
.video__text { margin: 0; max-width: 52ch; }
.video__play {
	width: clamp(52px, 3.65vw, 70px);
	aspect-ratio: 1;
	border: 0;
	border-radius: 50%;
	background: rgb(33 19 22 / 62%);
	cursor: pointer;
	display: grid;
	place-items: center;
	transition: background 0.3s var(--ease), transform 0.3s var(--ease);
}
.video__play::after {
	content: '';
	width: 0; height: 0;
	margin-left: 0.22em;
	border-left: 0.9em solid var(--c-white);
	border-top: 0.55em solid transparent;
	border-bottom: 0.55em solid transparent;
}
.video__play:hover { background: var(--c-red); transform: scale(1.08); }

/* ==========================================================================
   Bloque: slider de fotos + columna de texto
   ========================================================================== */
.slider { padding: var(--section-y) var(--gutter); }
/* Artboard 1920: foto de 517×781 a partir de x=203, texto desde x=873. */
.slider__inner {
	display: grid;
	grid-template-columns: 30.5% minmax(0, 1fr);
	gap: clamp(2rem, 8.9vw, 10.7rem);
	align-items: center;
	max-width: 1590px;
	margin: 0 auto;
}
.slider__media { position: relative; }
.slider__track {
	display: flex;
	overflow-x: auto;
	scroll-snap-type: x mandatory;
	scrollbar-width: none;
}
.slider__track::-webkit-scrollbar { display: none; }
.slider__slide { flex: 0 0 100%; scroll-snap-align: start; }
.slider__img { width: 100%; aspect-ratio: 517 / 781; object-fit: cover; }
.slider__bullets { display: flex; justify-content: center; gap: 0.7rem; margin-top: 1.6rem; }
.slider__bullet {
	width: 9px; aspect-ratio: 1;
	padding: 0;
	border: 1px solid currentColor;
	border-radius: 50%;
	background: transparent;
	opacity: 0.55;
	cursor: pointer;
	transition: background 0.3s var(--ease), opacity 0.3s var(--ease);
}
.slider__bullet.is-current { background: currentColor; opacity: 1; }
.slider__title { margin: 0 0 1.4rem; font-size: clamp(1.4rem, 1.72vw, 2.1rem); line-height: 1.2; }
.slider__title .title-line { display: block; }
.slider__title .title-line--strong { font-weight: 500; }
.slider__text > :last-child { margin-bottom: 0; }
.slider__text h3, .slider__text h4 {
	font-family: var(--f-display);
	font-size: clamp(1.2rem, 1.46vw, 1.75rem);
	font-weight: 400;
	margin: 2rem 0 0.6rem;
}
.slider__cta { margin-top: 2.2rem; }

/* ==========================================================================
   Bloque: formulario de contacto
   ========================================================================== */
.formulario { padding: var(--section-y) var(--gutter); }
.formulario__inner {
	display: grid;
	grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr);
	gap: clamp(2rem, 5vw, 6rem);
	align-items: start;
	max-width: 1600px;
	margin: 0 auto;
}
.formulario__kicker { margin: 0 0 1.2rem; font-size: 0.95em; }
.formulario__title {
	margin: 0 0 1.6rem;
	font-size: clamp(1.7rem, 2.4vw, 2.9rem);
	line-height: 1.15;
}
.formulario__title .title-line { display: block; }
/* En el diseño es la ÚLTIMA línea la que va en negrita, al revés que en el
   resto de titulares del sitio. */
.formulario__title .title-line--strong { font-weight: 300; }
.formulario__title .title-line:last-child { font-weight: 500; }
.formulario__text { max-width: 34ch; font-size: 0.95em; }

/* El fondo blanco lo lleva la caja de campos, no la columna entera: el botón
   de enviar va fuera, debajo y a la derecha. */
.formulario__caja {
	background: rgb(255 255 255 / 92%);
	color: var(--c-dark);
	padding: clamp(1.6rem, 2.6vw, 3rem) clamp(1.6rem, 2.6vw, 3rem) clamp(1.2rem, 1.9vw, 2.3rem);
}
.formulario__aviso {
	margin: 0 0 1.6rem;
	padding: 0.9rem 1.1rem;
	font-size: 0.9em;
	border-left: 3px solid var(--c-green);
}
.formulario__aviso--error { border-left-color: var(--c-red); }

.formulario__trampa { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

/* En el diseño los campos van a 51px de paso: etiqueta, línea y un respiro.
   Con el interlineado normal del sitio la caja se iba 300px de largo. */
.formulario__campo { margin: 0 0 clamp(0.35rem, 0.47vw, 0.56rem); display: grid; gap: 0.1rem; }
.formulario__label {
	font-size: clamp(0.7rem, 0.68vw, 0.82rem);
	line-height: 1.2;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--c-dark);
}
.formulario__req { color: var(--c-accent); text-decoration: none; margin-left: 0.2em; }
.formulario__input {
	width: 100%;
	padding: 0.1rem 0;
	font: inherit;
	font-size: clamp(0.8rem, 0.88vw, 1.06rem);
	line-height: 1.25;
	color: inherit;
	background: transparent;
	border: 0;
	border-bottom: 1px solid rgb(33 19 22 / 35%);
	border-radius: 0;
	transition: border-color 0.3s var(--ease);
}
.formulario__input:focus { outline: 0; border-bottom-color: var(--c-red); }
textarea.formulario__input { resize: vertical; min-height: 3.4em; }

.formulario__privacidad { margin: 2rem 0 0; font-size: 0.82rem; }
.formulario__privacidad label { display: flex; align-items: flex-start; gap: 0.6rem; }
.formulario__privacidad input { margin-top: 0.15em; accent-color: var(--c-dark); }
.formulario__privacidad a { color: var(--c-red); }
.formulario__enviar { margin: 1.8rem 0 0; display: flex; justify-content: flex-end; }
.formulario__enviar .btn { cursor: pointer; }

/* ==========================================================================
   Bloque: titular de sección (kicker + titular a dos líneas)
   ========================================================================== */
.titular { text-align: center; }
.titular__kicker {
	margin: 0 0 clamp(1rem, 1.72vw, 2.06rem);   /* 33px a 1920 */
	font-size: clamp(0.85rem, 0.94vw, 1.13rem); /* 18px a 1920 */
}
.titular__title {
	margin: 0;
	font-size: clamp(1.6rem, 2.19vw, 2.63rem);  /* 42px a 1920 */
	font-weight: 300;
	line-height: 1.22;
	text-transform: uppercase;
}
.titular__title .title-line--strong { font-weight: 500; }

/* ==========================================================================
   Productos — listado (archivo del CPT)

   Artboard 1920: tres columnas de 496px con 23px de calle, de x=192 a x=1726;
   tarjetas de 496×419 y 109px entre filas.
   ========================================================================== */
.rejilla {
	background: var(--c-white);
	padding: clamp(3rem, 7.4vw, 8.9rem) 10% clamp(3rem, 6vw, 7.2rem);
}
.rejilla__lista {
	list-style: none;
	margin: clamp(2.5rem, 5.36vw, 6.44rem) 0 0;   /* 103px a 1920 */
	padding: 0;
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	column-gap: 1.5%;                              /* 23px sobre 1534 */
	row-gap: clamp(2rem, 5.68vw, 6.81rem);         /* 109px a 1920 */
}
.rejilla__nombre {
	margin: 0 0 clamp(0.5rem, 0.94vw, 1.13rem);    /* 18px a 1920 */
	font-size: clamp(0.9rem, 1.04vw, 1.25rem);     /* 20px a 1920 */
}
.rejilla__card {
	position: relative;
	display: block;
	aspect-ratio: 496 / 419;
	border: 1px solid var(--c-red);
	overflow: hidden;
	text-decoration: none;
}
.rejilla__img { width: 100%; height: 100%; object-fit: contain; padding: 8%; }
/* Al pasar el ratón la tarjeta se oscurece y salen descripción y botón. */
.rejilla__hover {
	position: absolute;
	inset: 0;
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	align-items: flex-start;
	gap: 1rem;
	padding: clamp(1rem, 1.72vw, 2.06rem);
	background: #2a0f16;
	color: var(--c-cream);
	opacity: 0;
	transition: opacity 0.4s var(--ease);
}
.rejilla__card:hover .rejilla__hover,
.rejilla__card:focus-visible .rejilla__hover { opacity: 1; }
.rejilla__desc { font-size: clamp(0.8rem, 0.88vw, 1.06rem); line-height: 1.45; }
.rejilla__btn { align-self: flex-end; }

/* ==========================================================================
   Productos — ficha
   ========================================================================== */
.ficha {
	background: var(--c-white);
	padding: clamp(3rem, 7.4vw, 8.9rem) var(--gutter) clamp(3rem, 5vw, 6rem);
	text-align: center;
}
.ficha__nombre {
	margin: clamp(2rem, 3.85vw, 4.63rem) 0 clamp(1rem, 1.56vw, 1.88rem);
	font-size: clamp(1.2rem, 1.46vw, 1.75rem);   /* 28px a 1920 */
	font-weight: 400;
	text-transform: uppercase;
	letter-spacing: 0.02em;
}
/* Los sectores van dentro de una caja de borde rojo, no sueltos como en la home. */
.ficha__sectores {
	display: inline-block;
	margin: 0;
	padding: 0.62em 1.4em;
	border: 1px solid var(--c-red);
	font-size: clamp(0.9rem, 1.04vw, 1.25rem);   /* 20px a 1920 */
	letter-spacing: 0.02em;
	text-transform: uppercase;
}
.ficha__packshot { margin: clamp(1.5rem, 2.6vw, 3.1rem) auto 0; }
/* El hueco del artboard son 1385×558. Con los packshots ya recortados
   (setup/recortar-packshots.py) el producto llena la caja como en el diseño. */
.ficha__img {
	width: min(100%, 1385px);
	max-height: clamp(280px, 29vw, 558px);
	height: auto;
	object-fit: contain;
	margin: 0 auto;
	mix-blend-mode: multiply;
}
.ficha__plomada {
	display: block;
	width: 1px;
	height: clamp(50px, 4.9vw, 94px);
	margin: 0 auto;
	background: rgb(83 16 23 / 70%);
	position: relative;
}
.ficha__plomada::after {
	content: '';
	position: absolute; bottom: -5px; left: 50%;
	width: 10px; height: 10px;
	border-radius: 50%;
	background: var(--c-wine);
	transform: translateX(-50%);
}
.ficha__subtitulo {
	margin: clamp(1.5rem, 2.4vw, 2.9rem) 0 clamp(0.8rem, 1.25vw, 1.5rem);
	font-size: clamp(1.1rem, 1.35vw, 1.63rem);   /* 26px a 1920 */
	font-weight: 400;
	text-transform: uppercase;
}
.ficha__texto {
	max-width: min(100%, 780px);
	margin: 0 auto;
	font-size: clamp(0.85rem, 0.94vw, 1.13rem);
	line-height: 1.45;
}
.ficha__texto > :last-child { margin-bottom: 0; }
.ficha__plomada--baja { margin-top: clamp(1.5rem, 2.6vw, 3.1rem); }

/* Las cuatro tarjetas de especificaciones, en degradado de granate a naranja. */
.ficha__specs {
	list-style: none;
	margin: clamp(2rem, 3.65vw, 4.4rem) auto 0;
	padding: 0;
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: clamp(0.4rem, 0.57vw, 0.69rem);          /* 11px a 1920 */
	width: min(100%, 1292px);                      /* de x=327 a 1619 */
	text-align: left;
}
.ficha__spec {
	position: relative;
	display: flex;
	flex-direction: column;
	gap: 0.35em;
	min-height: clamp(110px, 8.54vw, 164px);       /* 164px a 1920 */
	padding: clamp(0.9rem, 1.35vw, 1.63rem);
	color: var(--c-cream);
	overflow: hidden;
}
.ficha__spec:nth-child(1) { background: #531017; }
.ficha__spec:nth-child(2) { background: #a01008; }
.ficha__spec:nth-child(3) { background: #e5401b; }
.ficha__spec:nth-child(4) { background: #fc5d26; }
.ficha__spec-label { font-size: clamp(0.75rem, 0.83vw, 1rem); text-transform: uppercase; }
.ficha__spec-valor { font-size: clamp(0.75rem, 0.83vw, 1rem); line-height: 1.35; }
.ficha__spec-icono {
	position: absolute;
	right: clamp(0.8rem, 1.15vw, 1.38rem);
	top: 50%;
	transform: translateY(-50%);
	width: clamp(22px, 1.72vw, 33px);
	opacity: 0.9;
}
.ficha__spec-icono svg { width: 100%; height: auto; display: block; }
.ficha__spec-icono svg path,
.ficha__spec-icono svg polygon { fill: currentColor; }

/* ---- Contacto: foto a la izquierda y, apilados a la derecha, el texto y la
        caja. Artboard 1920: foto 512×768 en x=174 y caja de 773 en x=968. ---- */
.formulario--contacto { padding: clamp(3rem, 6vw, 7.2rem) 0 clamp(3rem, 5vw, 6rem); }
.formulario--contacto .formulario__inner {
	/* Porcentajes sobre el ancho útil (1572px tras el padding), no sobre 1920. */
	grid-template-columns: 32.57% 49.17%;
	/* La fila 1 se ajusta al texto y la 2 se queda con el resto; si no, la foto
	   —que ocupa las dos— reparte a medias y deja un hueco bajo el texto. */
	grid-template-rows: auto 1fr;
	justify-content: space-between;
	align-items: start;
	padding: 0 9.06%;
	max-width: none;
	column-gap: clamp(2rem, 4vw, 5rem);
	row-gap: 0;   /* el gap del bloque base separaba el texto de la caja 96px */
}
.formulario--contacto .formulario__media { grid-row: 1 / 3; }
.formulario--contacto .formulario__img { width: 100%; aspect-ratio: 512 / 768; object-fit: cover; }
.formulario--contacto .formulario__intro { grid-column: 2; margin-bottom: clamp(0.5rem, 0.9vw, 1.1rem); }
.formulario--contacto .formulario__card { grid-column: 2; }
/* Aquí los saltos vienen del panel y la columna mide 773px: sin quitar el
   max-width el texto se parte en el doble de líneas y empuja la caja. */
.formulario--contacto .formulario__text { max-width: none; }
.formulario--contacto .formulario__title { font-size: clamp(1.5rem, 2.08vw, 2.5rem); }

/* El formulario sobre el verde de la ficha va sin la tarjeta blanca. */
.formulario--sobre-color .formulario__caja { background: transparent; color: inherit; padding-left: 0; padding-right: 0; }
.formulario--sobre-color .formulario__label { color: inherit; }
.formulario--sobre-color .formulario__input {
	color: inherit;
	border-bottom-color: rgb(240 224 209 / 45%);
}
.formulario--sobre-color .formulario__input:focus { border-bottom-color: var(--c-cream); }
.formulario--sobre-color .formulario__privacidad a { color: inherit; text-decoration: underline; }

/* ==========================================================================
   Blog — listado

   Artboard 1920×2739, entero sobre el oscuro. Cabecera con la foto a la
   derecha (x=998 a 1798), la destacada debajo y el carrusel al final.
   ========================================================================== */
.blog-listado { padding-bottom: clamp(3rem, 6vw, 7.2rem); }
.blog-listado__cabecera {
	display: grid;
	grid-template-columns: minmax(0, 1fr) 44.5%;   /* 800px de los 1798 útiles */
	align-items: center;
	column-gap: clamp(2rem, 4vw, 5rem);
	/* La foto no llega al borde: en el diseño acaba en x=1798. */
	padding: clamp(3rem, 6.5vw, 7.8rem) 6.35% clamp(2rem, 4vw, 4.8rem) 0;
	border-bottom: 1px solid rgb(240 224 209 / 22%);
}
.blog-listado__intro { padding-left: var(--gutter); }
.blog-listado__kicker {
	margin: 0 0 clamp(1.5rem, 2.6vw, 3.1rem);
	font-size: clamp(0.8rem, 0.83vw, 1rem);
	letter-spacing: 0.06em;
	text-transform: uppercase;
}
.blog-listado__title {
	margin: 0 0 clamp(1rem, 1.72vw, 2.06rem);
	font-size: clamp(2.2rem, 3.85vw, 4.63rem);   /* 74px a 1920 */
	line-height: 1.12;
}
.blog-listado__title .title-line--strong { font-weight: 500; }
/* Los saltos vienen del panel: el ancho solo tiene que dejarles sitio (631px
   la línea más larga del diseño). */
.blog-listado__text { margin: 0; max-width: min(100%, 660px); font-size: clamp(0.8rem, 0.88vw, 1.06rem); line-height: 1.45; }
.blog-listado__img { width: 100%; aspect-ratio: 800 / 589; object-fit: cover; }

/* ---- Entrada destacada ---- */
.blog-destacada {
	display: grid;
	grid-template-columns: minmax(0, 1fr) 58.33%;
	align-items: start;
	column-gap: clamp(2rem, 4vw, 5rem);
	padding: clamp(2rem, 3.4vw, 4.1rem) var(--gutter);
	border-bottom: 1px solid rgb(240 224 209 / 22%);
}
.blog-destacada__meta {
	margin: 0 0 0.9em;
	font-size: clamp(0.7rem, 0.73vw, 0.88rem);
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--c-accent);
}
.blog-destacada__title {
	margin: 0 0 0.7em;
	font-family: var(--f-body);
	font-size: clamp(1rem, 1.15vw, 1.38rem);   /* 22px a 1920 */
	font-weight: 400;
	text-transform: uppercase;
	letter-spacing: 0.01em;
}
.blog-destacada__title a { text-decoration: none; }
.blog-destacada__title a:hover { color: var(--c-accent); }
.blog-destacada__extracto { margin: 0; max-width: 56ch; font-size: clamp(0.8rem, 0.83vw, 1rem); line-height: 1.45; }

.blog-listado__entradilla {
	padding: clamp(2rem, 3.4vw, 4.1rem) var(--gutter) clamp(1.5rem, 2.6vw, 3.1rem);
	font-size: clamp(0.8rem, 0.83vw, 1rem);
	line-height: 1.5;
}
.blog-listado__entradilla > :last-child { margin-bottom: 0; }
/* El carrusel es el mismo bloque que en la home, pero aquí no hay cabecera roja. */
.blog-listado .blog__slider { margin-top: 0; }

/* ==========================================================================
   Blog — entrada

   Foto centrada de 799px, titular y entradilla contra el margen izquierdo y el
   cuerpo en una columna de 796px desplazada a x=551 (28.7%).
   ========================================================================== */
.entrada { padding: clamp(2rem, 4.7vw, 5.6rem) var(--gutter) clamp(3rem, 5vw, 6rem); }
.entrada__media { width: min(100%, 799px); margin: 0 auto clamp(2rem, 3.9vw, 4.7rem); }
.entrada__img { width: 100%; aspect-ratio: 799 / 607; object-fit: cover; }
.entrada__header { width: min(100%, 1536px); margin: 0 auto; padding-left: 0.5%; }
.entrada__title {
	margin: 0 0 clamp(1rem, 1.72vw, 2.06rem);
	font-size: clamp(2.2rem, 3.85vw, 4.63rem);   /* 74px a 1920 */
	font-weight: 300;
	line-height: 1.12;
	max-width: 22ch;
}
.entrada__extracto { margin: 0 0 1.2em; max-width: 52ch; font-size: clamp(0.8rem, 0.83vw, 1rem); line-height: 1.45; }
.entrada__meta {
	margin: 0;
	font-size: clamp(0.7rem, 0.73vw, 0.88rem);
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--c-accent);
}
/* El cuerpo va desplazado a la derecha: arranca en x=551 sobre el artboard,
   o sea a un 26,6% del ancho útil, no centrado. */
.entrada__body {
	width: min(100%, 796px);
	margin: clamp(2rem, 4.4vw, 5.3rem) 0 0 min(26.6%, calc(100% - 796px));
	font-size: clamp(0.8rem, 0.83vw, 1rem);
	line-height: 1.5;
}
.entrada__body > :last-child { margin-bottom: 0; }
.entrada__relacionadas { padding-bottom: clamp(3rem, 6vw, 7.2rem); }
/* Sobre blanco los bullets del carrusel van oscuros. */
.entrada__relacionadas .blog__bullet { border-color: var(--c-dark); }
.entrada__relacionadas .blog__bullet.is-current { background: var(--c-dark); }

/* ==========================================================================
   Página Calidad

   Artboard 1920: tarjetas blancas de 1799×854 (x=60 a 1859) sobre el crema,
   con 65px de aire entre ellas. Foto 612px (34%) y texto el resto.
   ========================================================================== */
.cal {
	padding: clamp(1.5rem, 2.81vw, 3.38rem) 0 clamp(2rem, 3.4vw, 4.1rem);
	display: grid;
	gap: clamp(1.5rem, 3.39vw, 4.06rem);   /* 65px a 1920 */
}
.cal-tarjeta {
	display: grid;
	grid-template-columns: 34% minmax(0, 1fr);
	align-items: stretch;
	width: min(100% - 2 * 3.125%, 1799px);
	margin: 0 auto;
	min-height: clamp(420px, 44.48vw, 900px);   /* 854px a 1920 */
	background: var(--c-white);
	color: var(--c-dark);
}
/* Las impares llevan la foto a la derecha; el orden del DOM no cambia, así que
   el texto se lee siempre primero. */
.cal-tarjeta--invertida .cal-tarjeta__media { order: 2; }
.cal-tarjeta--invertida { grid-template-columns: minmax(0, 1fr) 34%; }
.cal-tarjeta__img { width: 100%; height: 100%; object-fit: cover; }
.cal-tarjeta__cuerpo {
	display: flex;
	flex-direction: column;
	justify-content: center;
	padding: clamp(1.5rem, 3.1vw, 3.75rem) clamp(1.5rem, 3.65vw, 4.4rem);
}
/* En el diseño el titular va alineado a la derecha en las tarjetas con la foto
   a la izquierda, y a la izquierda en las invertidas. */
.cal-tarjeta__title {
	margin: 0 0 clamp(1.2rem, 2.08vw, 2.5rem);
	font-size: clamp(2.1rem, 3.59vw, 4.31rem);   /* 69px a 1920 */
	font-weight: 300;
	line-height: 1.08;
	text-transform: uppercase;
	text-align: right;
}
.cal-tarjeta__title .title-line--thin { padding-right: 0; }
.cal-tarjeta--invertida .cal-tarjeta__title { text-align: left; }
/* «NUESTRO / LABORATORIO»: la segunda línea entra sangrada. */
.cal-tarjeta--invertida .cal-tarjeta__title .title-line--thin { padding-left: 1.6em; }
.cal-tarjeta__texto {
	max-width: 62ch;
	margin-left: auto;
	font-size: clamp(0.8rem, 0.83vw, 1rem);
	line-height: 1.45;
}
.cal-tarjeta--invertida .cal-tarjeta__texto { margin-left: 0; }
.cal-tarjeta__texto > :last-child { margin-bottom: 0; }
.cal-sellos {
	list-style: none;
	margin: clamp(1.5rem, 2.6vw, 3.1rem) 0 0;
	padding: 0;
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: clamp(1rem, 1.72vw, 2.06rem);
	justify-content: flex-end;
	margin-left: auto;
}
.cal-tarjeta--invertida .cal-sellos { justify-content: flex-start; margin-left: 0; }
/* El botón acompaña al texto: a la derecha en las normales y a la izquierda en
   las invertidas. Sin esto el div ocupa todo el ancho y el botón se va al borde. */
.cal-tarjeta__cta { margin-top: clamp(1.5rem, 2.6vw, 3.1rem); align-self: flex-end; }
.cal-tarjeta--invertida .cal-tarjeta__cta { align-self: flex-start; }

/* El cierre reutiliza la retícula del claim sobre el crema. */
.claim--crema {
	--claim-linea: rgb(33 19 22 / 22%);
	background: var(--c-cream);
	color: var(--c-dark);
}
.claim--crema .claim__title { color: var(--c-dark); }

/* ==========================================================================
   Página Sostenibilidad

   Dos mitades: la primera entera en verde y la segunda en blanco. Las palabras
   grandes (EL ORIGEN, NUESTRO CULTIVO, VALOR, CIENCIA, BENEFICIOS) son el hilo
   conductor y van en crema sobre verde y en verde sobre blanco.
   ========================================================================== */
.sost--verde { background: var(--c-green); color: var(--c-cream); }
.sost--blanco { background: var(--c-white); color: var(--c-dark); }

.sost-palabra {
	margin: 0;
	font-family: var(--f-display);
	font-size: clamp(3rem, 6.77vw, 8.13rem);    /* 130px a 1920 */
	font-weight: 300;
	line-height: 0.95;
	text-transform: uppercase;
	color: var(--c-cream);
}
.sost--blanco .sost-palabra { color: var(--c-green); }
.sost-titulillo {
	margin: 0 0 0.5em;
	font-family: var(--f-display);
	font-size: clamp(0.95rem, 1.15vw, 1.38rem);  /* 22px a 1920 */
	font-weight: 400;
	text-transform: uppercase;
	letter-spacing: 0.01em;
}
.sost-texto {
	margin: 0;
	font-size: clamp(0.8rem, 0.83vw, 1rem);      /* 16px a 1920 */
	line-height: 1.5;
	max-width: 52ch;
}

/* ---- Better Source + esquema ---- */
.sost-intro {
	padding: clamp(3rem, 5.83vw, 7rem) var(--gutter) clamp(2rem, 3.6vw, 4.3rem);
	text-align: center;
}
.sost-intro__title {
	margin: 0 0 clamp(1rem, 1.72vw, 2.06rem);
	font-size: clamp(1.8rem, 2.71vw, 3.25rem);   /* 52px a 1920 */
	font-weight: 300;
}
.sost-intro__title .title-word--strong { font-weight: 500; }
.sost-intro__text { margin: 0 auto; max-width: 72ch; font-size: clamp(0.8rem, 0.88vw, 1.06rem); }

/* El esquema es una llave: un tronco que baja y se abre a los tres nodos. */
.sost-esquema {
	list-style: none;
	margin: clamp(2.5rem, 4.9vw, 5.9rem) auto 0;
	padding: clamp(3.4rem, 5.2vw, 6.25rem) 0 0;
	width: min(100% - 2 * var(--gutter), 1420px);
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	position: relative;
}
.sost-esquema::before {   /* tronco central */
	content: '';
	position: absolute;
	top: 0; left: 50%;
	width: 1px; height: 42%;
	background: currentColor;
	opacity: 0.55;
}
.sost-esquema::after {    /* travesaño */
	content: '';
	position: absolute;
	top: 42%; left: 16.66%; right: 16.66%;
	height: 1px;
	background: currentColor;
	opacity: 0.55;
}
.sost-esquema__nodo {
	position: relative;
	display: flex;
	justify-content: center;
	padding-top: clamp(1.6rem, 2.9vw, 3.4rem);
}
.sost-esquema__nodo::before {   /* bajante hasta la elipse */
	content: '';
	position: absolute;
	top: 0; left: 50%;
	width: 1px;
	height: clamp(1.6rem, 2.9vw, 3.4rem);
	background: currentColor;
	opacity: 0.55;
}
.sost-esquema__nodo span {
	display: grid;
	place-items: center;
	text-align: center;
	min-width: clamp(90px, 7.3vw, 140px);
	padding: 0.7em 1.2em;
	border: 1px dashed currentColor;
	border-radius: 50%;
	font-size: clamp(0.62rem, 0.63vw, 0.75rem);  /* 12px a 1920 */
	text-transform: uppercase;
	letter-spacing: 0.06em;
	line-height: 1.25;
}

/* ---- Bloque de palabra + pares + foto a sangre ---- */
/* La foto ocupa poco menos de la mitad derecha; el texto respira hasta ella. */
.sost-bloque {
	display: grid;
	grid-template-columns: minmax(0, 1.22fr) minmax(0, 1fr);
	align-items: start;
	column-gap: clamp(1.5rem, 2.6vw, 3.1rem);
}
.sost-bloque__texto { padding: clamp(2rem, 3.9vw, 4.7rem) 0 clamp(2rem, 3.9vw, 4.7rem) var(--gutter); }
.sost-bloque__texto .sost-texto { max-width: none; }
.sost-bloque__pares { margin-top: clamp(1.6rem, 3.4vw, 4.1rem); display: grid; gap: clamp(1.4rem, 2.4vw, 2.9rem); }
/* La foto va a sangre por su lado y la palabra se apoya en su esquina. */
.sost-bloque__media { position: relative; align-self: stretch; min-height: clamp(320px, 35vw, 700px); }
.sost-bloque__img { width: 100%; height: 100%; object-fit: cover; }
/* La palabra se apoya en la esquina inferior izquierda de la foto y se sale
   hacia fuera; parte en dos líneas si hace falta, como en el diseño. */
.sost-palabra--sobre-foto {
	position: absolute;
	left: 0; bottom: 0;
	width: max-content;
	max-width: 7.4em;
	transform: translate(-0.06em, 32%);
	margin: 0;
	text-align: left;
	pointer-events: none;
}

/* ---- Foto + lista numerada ---- */
.sost-lista {
	display: grid;
	grid-template-columns: minmax(0, 0.72fr) minmax(0, 1fr);
	column-gap: clamp(2rem, 6vw, 7.2rem);
	align-items: start;
	padding-bottom: clamp(2rem, 4vw, 4.8rem);
}
.sost-lista__img { width: 100%; aspect-ratio: 506 / 500; object-fit: cover; }
.sost-lista__items {
	list-style: none;
	margin: 0;
	padding: clamp(1rem, 2vw, 2.4rem) var(--gutter) 0 0;
	counter-reset: sost;
	display: grid;
	gap: clamp(1.2rem, 2.08vw, 2.5rem);
}
.sost-lista__item { counter-increment: sost; }
/* La numeración 01, 02… la pone el CSS: en el panel solo se ordena. */
.sost-lista__titulo::before { content: counter(sost, decimal-leading-zero) '. '; }

/* ---- Valor ---- */
.sost-valor { padding: clamp(2rem, 4vw, 4.8rem) var(--gutter) clamp(3rem, 6vw, 7.2rem); }
/* «VALOR» se apoya sobre el borde superior de la foto, ligeramente a su derecha. */
.sost-valor__palabra {
	width: min(100%, 46%);
	margin: 0 auto -0.34em;
	text-align: right;
	position: relative;
	z-index: 1;
}
.sost-valor__cuerpo { width: min(100%, 46%); margin: 0 auto; }
.sost-valor__img { width: 100%; aspect-ratio: 440 / 250; object-fit: cover; }
.sost-valor__cuerpo .sost-titulillo { margin-top: clamp(1rem, 1.6vw, 1.9rem); }

/* ---- Beneficios (bajo la foto de Ciencia) ---- */
.sost-bloque--claro { padding-bottom: clamp(3rem, 6vw, 7.2rem); }
.sost-beneficios { grid-column: 2; padding: clamp(3.4rem, 5.2vw, 6.25rem) var(--gutter) 0 0; }
.sost-beneficios__kicker {
	margin: 0 0 clamp(1rem, 1.72vw, 2.06rem);
	font-family: var(--f-display);
	font-size: clamp(0.9rem, 1.04vw, 1.25rem);
	text-transform: uppercase;
	color: var(--c-green);
}
.sost-beneficios__items { list-style: none; margin: 0; padding: 0; display: grid; gap: clamp(1rem, 1.72vw, 2.06rem); }
.sost-beneficios__items .sost-titulillo { color: var(--c-green); margin-bottom: 0.25em; }

/* ---- El cierre reutiliza la retícula del claim, en claro ---- */
.claim--claro {
	--claim-linea: rgb(33 19 22 / 20%);
	background: var(--c-white);
	color: var(--c-dark);
}
.claim--claro .claim__title { color: var(--c-green); }

/* ==========================================================================
   Página Origen — Historia

   Retícula propia (artboard 1920): 46 | 474 | 882 | 473 | 45, con hairlines
   en x=46, 520, 1402 y 1875, y filas de 711px por generación.
   ========================================================================== */
.historia-intro {
	--hist-linea: rgb(33 19 22 / 20%);
	padding: clamp(3rem, 5.2vw, 6.25rem) 0 clamp(3rem, 6vw, 7.2rem);
	background: var(--c-white);
}
.historia-intro__inner {
	width: min(100% - 2 * var(--gutter), 1612px);   /* x=154 a 1766 en el diseño */
	margin: 0 auto;
}
.historia-intro__title {
	font-size: clamp(1.5rem, 2.08vw, 2.5rem);    /* 40px a 1920 */
	font-weight: 300;
	text-transform: uppercase;
	letter-spacing: 0.005em;
	margin: 0 0 clamp(1.2rem, 1.98vw, 2.4rem);
}
.historia-intro__text { font-size: clamp(0.9rem, 0.94vw, 1.13rem); line-height: 1.45; }
.historia-intro__text > :last-child { margin-bottom: 0; }
/* La primera frase del texto va en rojo (el editor la marca en negrita). */
.historia-intro__text p:first-of-type strong,
.historia-intro__text p:first-of-type b { color: var(--c-accent); font-weight: inherit; }

.historia-intro__media { position: relative; margin: clamp(1.8rem, 3.4vw, 4.1rem) 0 0; }
.historia-intro__track {
	display: flex;
	overflow-x: auto;
	scroll-snap-type: x mandatory;
	scrollbar-width: none;
}
.historia-intro__track::-webkit-scrollbar { display: none; }
.historia-intro__slide { position: relative; flex: 0 0 100%; scroll-snap-align: start; }
.historia-intro__img,
.historia-intro__slide .video__player { width: 100%; aspect-ratio: 1612 / 854; object-fit: cover; }
.historia-intro__slide--video .video__play {
	position: absolute;
	top: 50%; left: 50%;
	transform: translate(-50%, -50%);
}
.historia-intro__slide--video.is-playing .video__play { opacity: 0; pointer-events: none; }
.historia-intro__bullets { display: flex; justify-content: center; gap: 0.62rem; margin-top: 1.1rem; }
.historia-intro__bullet {
	width: 8px; aspect-ratio: 1;
	padding: 0;
	border: 1px solid var(--c-dark);
	border-radius: 50%;
	background: transparent;
	opacity: 0.55;
	cursor: pointer;
	transition: background 0.3s var(--ease), opacity 0.3s var(--ease);
}
.historia-intro__bullet.is-current { background: var(--c-dark); opacity: 1; }

.historia-intro__text--pie { margin-top: clamp(1rem, 1.5vw, 1.8rem); }
.historia-intro__claim {
	margin: clamp(1.5rem, 2.6vw, 3.1rem) 0 0;
	font-family: var(--f-display);
	font-size: clamp(1.6rem, 2.4vw, 2.9rem);   /* 46px a 1920 */
	line-height: 1.1;
}
.historia-intro__claim .title-word--strong { font-weight: 500; }
.historia-intro__claim .title-word--thin { font-weight: 300; }

/* ---- Nuestra historia + generaciones ---- */
.generaciones {
	--gen-linea: rgb(33 19 22 / 20%);
	--gen-c1: 2.396%;   /* 46px  */
	--gen-c2: 24.688%;  /* 474px */
	--gen-c3: 45.938%;  /* 882px */
	--gen-c4: 24.635%;  /* 473px */
	--gen-c5: 2.344%;   /* 45px  */
	background: var(--c-white);
	border-top: 1px solid var(--gen-linea);
}
.generaciones__head {
	display: grid;
	grid-template-columns: var(--gen-c1) var(--gen-c2) var(--gen-c3) var(--gen-c4) var(--gen-c5);
	align-items: start;
	padding: clamp(3rem, 6.56vw, 7.9rem) 0 clamp(3rem, 9.11vw, 11rem);   /* 126 / 175 a 1920 */
}
.generaciones__head-texto { grid-column: 2 / 4; }
.generaciones__title {
	margin: 0 0 0.5em;
	font-size: clamp(2.4rem, 4.58vw, 5.5rem);   /* 88px a 1920 */
	font-weight: 300;
	text-transform: uppercase;
	line-height: 1.02;
}
/* «NUESTRA / HISTORIA»: la segunda línea entra sangrada, como en el diseño. */
.generaciones__title .title-line--thin { padding-left: 2.1em; }
.generaciones__intro { margin: 0; max-width: 44ch; font-size: clamp(0.85rem, 0.94vw, 1.13rem); line-height: 1.45; }
.generaciones__marca { grid-column: 4; justify-self: center; }
.generaciones__marca-img { width: clamp(120px, 9.2vw, 176px); height: auto; }

/* Las cuatro hairlines verticales recorren toda la línea de generaciones
   (x=46, 520, 1402 y 1875 sobre el artboard). Van de fondo, no como bordes de
   celda, porque la foto cambia de columna en cada fila. */
.generaciones__lista {
	list-style: none;
	margin: 0;
	padding: 0;
	background-image:
		linear-gradient(var(--gen-linea), var(--gen-linea)),
		linear-gradient(var(--gen-linea), var(--gen-linea)),
		linear-gradient(var(--gen-linea), var(--gen-linea)),
		linear-gradient(var(--gen-linea), var(--gen-linea));
	background-size: 1px 100%;
	background-position: 2.396% 0, 27.083% 0, 73.021% 0, 97.656% 0;
	background-repeat: no-repeat;
}
.generaciones__fila {
	display: grid;
	grid-template-columns: var(--gen-c1) var(--gen-c2) var(--gen-c3) var(--gen-c4) var(--gen-c5);
	min-height: clamp(420px, 37.03vw, 760px);   /* 711px a 1920 */
	border-top: 1px solid var(--gen-linea);
}
.generaciones__fila:last-child { border-bottom: 1px solid var(--gen-linea); }
.generaciones__foto { grid-column: 2; grid-row: 1; }
.generaciones__fila--derecha .generaciones__foto { grid-column: 4; }
.generaciones__img { width: 100%; height: 100%; object-fit: cover; }
.generaciones__cuerpo {
	grid-column: 3;
	grid-row: 1;
	align-self: center;
	text-align: center;
	padding: 2rem clamp(1rem, 3vw, 3.6rem);
}
.generaciones__gen {
	margin: 0 0 0.6em;
	font-size: clamp(1.8rem, 2.92vw, 3.5rem);   /* 56px a 1920 */
	font-weight: 300;
	text-transform: uppercase;
	color: var(--c-accent);
}
/* El color se va oscureciendo generación tras generación (muestreado del PDF). */
.generaciones__fila:nth-child(1) .generaciones__gen { color: #eb5414; }
.generaciones__fila:nth-child(2) .generaciones__gen { color: #f52300; }
.generaciones__fila:nth-child(3) .generaciones__gen { color: #e80008; }
.generaciones__fila:nth-child(4) .generaciones__gen { color: #bb0000; }
.generaciones__fila:nth-child(5) .generaciones__gen { color: #960000; }
.generaciones__fila:nth-child(6) .generaciones__gen { color: #510000; }
.generaciones__fila:nth-child(n+7) .generaciones__gen { color: var(--c-dark); }
.generaciones__kicker {
	margin: 0 0 0.6em;
	font-size: clamp(0.8rem, 0.83vw, 1rem);
	text-transform: uppercase;
	letter-spacing: 0.02em;
	color: inherit;
}
.generaciones__texto {
	margin: 0;
	font-size: clamp(0.8rem, 0.88vw, 1.06rem);
	line-height: 1.5;
	max-width: 46ch;
	margin-inline: auto;
}
/* El texto de cada generación hereda el color de su titular. */
.generaciones__fila:nth-child(1) .generaciones__cuerpo { color: #eb5414; }
.generaciones__fila:nth-child(2) .generaciones__cuerpo { color: #f52300; }
.generaciones__fila:nth-child(3) .generaciones__cuerpo { color: #e80008; }
.generaciones__fila:nth-child(4) .generaciones__cuerpo { color: #bb0000; }
.generaciones__fila:nth-child(5) .generaciones__cuerpo { color: #960000; }
.generaciones__fila:nth-child(6) .generaciones__cuerpo { color: #510000; }

/* ---- Cierre de Origen: la retícula del claim con las medidas de esta página
        y el titular a la izquierda, no centrado. ---- */
.claim--historia {
	--claim-linea: rgb(33 19 22 / 20%);
	background: var(--c-white);
	color: var(--c-dark);
}
.claim--historia .claim__grid {
	grid-template-columns: 2.396% 24.688% 45.938% 24.635% 2.344%;
	grid-template-rows: 62.5% 37.5%;
	min-height: clamp(520px, 44.11vw, 900px);   /* 847px a 1920 */
}
.claim--historia .claim__title {
	grid-area: 1 / 2 / 3 / 4;
	align-self: center;
	text-align: left;
	color: var(--c-dark);
}
.claim--historia .claim__cell--foto-1,
.claim--historia .claim__cell--texto-1,
.claim--historia .claim__cell--texto-2 { display: none; }
.claim--historia .claim__cell--foto-2 {
	grid-area: 1 / 4;
	border: 0;
	align-items: stretch;
}
.claim--historia .claim__img { aspect-ratio: 473 / 330; }

/* ==========================================================================
   Blog / interiores
   ========================================================================== */
/* Ojo con el selector: body_class() pone «archive» y «single» en el <body>, así
   que sin acotarlo al elemento estas medidas se le aplicaban al body entero y
   estrujaban cualquier plantilla de archivo o de CPT. */
div.archive, article.single, article.page-content, div.error404-page {
	max-width: 1440px; margin: 0 auto;
	padding: clamp(3rem, 6vw, 6rem) var(--gutter) var(--section-y);
}
.archive__grid { list-style: none; margin: 3rem 0 0; padding: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 2rem; }
.archive__card a { text-decoration: none; }
.archive__meta { display: block; margin-top: 1rem; font-size: 0.78rem; letter-spacing: 0.1em; text-transform: uppercase; opacity: 0.7; }
.single__body, .page-content__body { max-width: 72ch; }
.single__media img { width: 100%; }
.error404-page { text-align: center; }
.error404-page h1 { font-size: clamp(4rem, 12vw, 9rem); color: var(--c-red); }

/* ==========================================================================
   Responsive
   ========================================================================== */
@media (max-width: 1180px) {
	/* Sin columna derecha: la retícula se queda en una sola columna. */
	.hero__grid { grid-template-columns: 1fr; }
	.hero__cell--meter, .hero__cell--media, .hero__cell--words,
	.hero__cell--since, .hero__cell--void-top, .hero__cell--void-bottom { display: none; }
	.hero__cell--main { padding-right: var(--gutter-lg); }
}
@media (max-width: 900px) {
	/* Los saltos de línea del diseño no caben: que el texto fluya. */
	.hero__text br { display: none; }
	.hero__text { max-width: none; }
}
@media (max-width: 1024px) {
	/* La retícula del claim se deshace: una columna, el claim primero y las
	   hairlines fuera (no dicen nada apiladas). */
	.claim { padding: var(--section-y) var(--gutter); }
	.claim__grid {
		grid-template-columns: 1fr;
		grid-template-rows: auto;
		min-height: 0;
		gap: clamp(2rem, 5vw, 3rem);
	}
	.claim__cell, .claim__title, .claim__kicker { grid-area: auto !important; border: 0 !important; padding: 0; }
	.claim__kicker { order: -2; }
	.claim__title { order: -1; text-align: left; }
	.claim__cell--texto-2 { justify-content: flex-start; }
	.claim__cell--texto-2 .claim__text { text-align: left; }
	.claim__media { max-width: 350px; }
	.claim__img { aspect-ratio: 4 / 3; }
	/* Los bloques compartidos pasan a una columna: primero el texto. */
	.slider__inner, .formulario__inner { grid-template-columns: 1fr; }
	.slider__body { order: -1; }
	.slider__img { aspect-ratio: 4 / 3; }
	.formulario__text { max-width: none; }
}
@media (max-width: 900px) {
	.cifras__inner, .sostenibilidad, .calidad__inner { grid-template-columns: 1fr; }
	.cifras__intro { border-right: 0; border-bottom: var(--hairline-light); }
	/* Los saltos manuales del diseño no caben: que el texto fluya. */
	.cifras__text br { display: none; }
	.cifras__item { min-height: 0; padding: 2rem var(--gutter); }
	.sostenibilidad__media { min-height: 60svh; }
	/* En una columna la línea larga del punto 4 no tiene a dónde ir. */
	.sostenibilidad__list li:nth-child(4)::after {
		left: calc(-1 * var(--sost-tick));
		width: var(--sost-tick);
		background: var(--sost-line);
	}
	.calidad__media { min-height: 70vw; }
	.site-footer__col { justify-self: start; }
	.site-footer__brand { flex-wrap: wrap; }
	.archive__grid { grid-template-columns: 1fr; }
}
@media (max-width: 600px) {
	.hero__cta { flex-wrap: wrap; min-height: 0; }
	.hero__cta-label { padding: 0.7rem 1rem; }
	.hero__cta-btn { padding: 0.9rem 1.2rem; width: 100%; }
}