/* ============================================================
   PINO & PARTNER — Sistema visual "Naturaleza industrial mediterránea"
   Marfil cálido · verde bosque · terracota de acción.
   Display: Base One · Funcional: Montserrat.
   Firma: paneles de ficha técnica con datos de origen natural (ISO 16128).
   ============================================================ */

/* ----------------------------------------------------------- 1. Fuentes
   Base One solo en titulares grandes; Montserrat en todo lo demás.
   Si faltan los ficheros de la display, la pila cae en Montserrat. */
@font-face {
	font-family: 'Base One';
	font-style: normal;
	font-weight: 400;
	font-display: swap;
	src: url('../fonts/baseone-regular.woff2') format('woff2');
}
@font-face {
	font-family: 'Base One';
	font-style: normal;
	font-weight: 700;
	font-display: swap;
	src: url('../fonts/baseone-bold.woff2') format('woff2');
}
@font-face {
	font-family: 'Base One';
	font-style: normal;
	font-weight: 900;
	font-display: swap;
	src: url('../fonts/baseone-heavy.woff2') format('woff2');
}
@font-face {
	font-family: 'Montserrat';
	font-style: normal;
	font-weight: 400;
	font-display: swap;
	src: url('../fonts/montserrat-latin-400.woff2') format('woff2');
}
@font-face {
	font-family: 'Montserrat';
	font-style: normal;
	font-weight: 500;
	font-display: swap;
	src: url('../fonts/montserrat-latin-500.woff2') format('woff2');
}
@font-face {
	font-family: 'Montserrat';
	font-style: normal;
	font-weight: 600;
	font-display: swap;
	src: url('../fonts/montserrat-latin-600.woff2') format('woff2');
}
@font-face {
	font-family: 'Montserrat';
	font-style: normal;
	font-weight: 700;
	font-display: swap;
	src: url('../fonts/montserrat-latin-700.woff2') format('woff2');
}

/* ----------------------------------------------------------- 2. Tokens */
:root {
	/* Color */
	--pp-forest-900: #17382C;
	--pp-forest-700: #2F5946;
	--pp-sage-500: #879B82;

	--pp-ivory-50: #F7F3EA;
	--pp-sand-200: #E2D6C5;
	--pp-white: #FFFFFF;

	--pp-terracotta-600: #A84F32;
	--pp-terracotta-700: #8F4029;

	--pp-charcoal-900: #20231F;
	--pp-grey-700: #5D645E;
	/* Gris reforzado: cumple 4.5:1 sobre arena */
	--pp-grey-800: #4A514B;
	/* Salvia legible sobre verde bosque (5,9:1) */
	--pp-sage-300: #A3B69E;
	--pp-border: #D8D0C4;

	--pp-success: #326348;
	--pp-error: #A33A32;

	/* Tipografía */
	--font-display: 'Base One', 'Montserrat', Arial, sans-serif;
	--font-body: 'Montserrat', Arial, sans-serif;
	--font-heading: 'Montserrat', Arial, sans-serif;

	/* Espaciado */
	--space-1: 0.5rem;
	--space-2: 1rem;
	--space-3: 1.5rem;
	--space-4: 2rem;
	--space-5: 3rem;
	--space-6: 4rem;
	--space-7: 6rem;
	--space-8: 8rem;

	--container-main: 1280px;
	--container-text: 760px;

	--radius-small: 6px;
	--radius-medium: 12px;
	--radius-large: 20px;

	--transition-fast: 180ms ease;
	--transition-normal: 240ms ease;

	/* Ritmo vertical de sección: 64–80px móvil, 96–128px escritorio */
	--section-y: clamp(4rem, 8vw, 8rem);
	--gutter: clamp(1.25rem, 5vw, 2.5rem);
}

/* ----------------------------------------------------------- 3. Base */
*, *::before, *::after { box-sizing: border-box; }

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

body {
	margin: 0;
	font-family: var(--font-body);
	font-size: 17px;
	font-weight: 400;
	line-height: 1.65;
	color: var(--pp-charcoal-900);
	background: var(--pp-ivory-50);
	text-rendering: optimizeLegibility;
	-webkit-font-smoothing: antialiased;
	overflow-x: hidden;
}

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

a { color: var(--pp-forest-700); text-underline-offset: 3px; text-decoration-thickness: 1px; }
a:hover { color: var(--pp-forest-900); }

:focus-visible {
	outline: 3px solid var(--pp-forest-700);
	outline-offset: 2px;
	border-radius: 2px;
}
::selection { background: var(--pp-sand-200); color: var(--pp-charcoal-900); }

hr { border: 0; border-top: 1px solid var(--pp-border); margin-block: var(--space-5); }

/* ----------------------------------------------------------- 4. Tipografía */
h1, h2, h3, h4 { margin: 0 0 0.5em; }
h1, h2 { text-wrap: balance; }

h1 {
	font-family: var(--font-display);
	font-size: clamp(2.5rem, 5.6vw, 5.25rem);
	font-weight: 600;
	line-height: 0.99;
	letter-spacing: -0.02em;
	color: var(--pp-forest-900);
}
h2 {
	font-family: var(--font-display);
	font-size: clamp(2rem, 3.8vw, 3.75rem);
	font-weight: 600;
	line-height: 1.05;
	letter-spacing: -0.015em;
	color: var(--pp-forest-900);
}
h3 {
	font-family: var(--font-body);
	font-size: clamp(1.3rem, 2vw, 1.75rem);
	font-weight: 700;
	line-height: 1.25;
	letter-spacing: -0.02em;
}
h4 {
	font-family: var(--font-body);
	font-size: 1.1rem;
	font-weight: 700;
	line-height: 1.3;
}

p { margin: 0 0 1em; max-width: 68ch; }

strong { font-weight: 700; }

.eyebrow {
	display: block;
	font-family: var(--font-body);
	font-size: 0.75rem;
	font-weight: 700;
	line-height: 1.2;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--pp-terracotta-600);
	margin-bottom: var(--space-3);
}
.data-label {
	display: block;
	font-family: var(--font-body);
	font-size: 0.72rem;
	font-weight: 700;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--pp-grey-700);
	margin-bottom: var(--space-1);
}

.section-title { margin-bottom: var(--space-4); }
.lead { font-size: 1.2rem; color: var(--pp-grey-700); max-width: 62ch; }

.screen-reader-text {
	position: absolute; width: 1px; height: 1px;
	overflow: hidden; clip-path: inset(50%); white-space: nowrap;
}
.skip-link {
	position: absolute; left: -9999px; top: 0; z-index: 100;
	background: var(--pp-forest-900); color: var(--pp-white);
	padding: var(--space-2) var(--space-3); font-weight: 600;
}
.skip-link:focus { left: var(--space-2); top: var(--space-2); }

/* ----------------------------------------------------------- 5. Layout */
.wrap {
	width: 100%;
	max-width: var(--container-main);
	margin-inline: auto;
	padding-inline: var(--gutter);
}

.section { padding-block: var(--section-y); }
.section--paper { background: var(--pp-white); }
.section--sand { background: var(--pp-sand-200); }
.section--dark { background: var(--pp-forest-900); color: var(--pp-ivory-50); }

.section--dark h1,
.section--dark h2,
.section--dark h3 { color: var(--pp-white); }
.section--dark p { color: rgba(247, 243, 234, 0.82); }
.section--dark .eyebrow { color: var(--pp-sage-300); }
.section--dark .data-label { color: var(--pp-sage-300); }

/* Sobre arena, el texto secundario y la etiqueta suben de contraste. */
.section--sand .eyebrow { color: var(--pp-terracotta-700); }
.section--sand .section-head__support,
.section--sand p { color: var(--pp-grey-800); }
.section--dark a:not(.btn) { color: var(--pp-sand-200); }
.section--dark :focus-visible,
.site-footer :focus-visible { outline-color: var(--pp-ivory-50); }

/* Composición editorial de dos columnas */
.editorial {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
	gap: clamp(2rem, 5vw, var(--space-7));
	align-items: center;
}
.editorial--narrow { grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr); }
.editorial__body > *:last-child { margin-bottom: 0; }

@media (max-width: 900px) {
	.editorial, .editorial--narrow { grid-template-columns: 1fr; }
}

/* ----------------------------------------------------------- 6. Botones y enlaces */
.btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: var(--space-1);
	min-height: 48px;
	padding: 0.85rem 1.4rem;
	border-radius: var(--radius-small);
	font-family: var(--font-body);
	font-size: 1rem;
	font-weight: 700;
	line-height: 1.2;
	text-decoration: none;
	border: 1px solid transparent;
	cursor: pointer;
	transition: background-color var(--transition-fast), border-color var(--transition-fast),
		color var(--transition-fast), transform var(--transition-fast);
}

.btn--primary {
	background: var(--pp-terracotta-600);
	border-color: var(--pp-terracotta-600);
	color: var(--pp-white);
}
.btn--primary:hover {
	background: var(--pp-terracotta-700);
	border-color: var(--pp-terracotta-700);
	color: var(--pp-white);
	transform: translateY(-1px);
}

.btn--ghost {
	background: transparent;
	border-color: var(--pp-forest-900);
	color: var(--pp-forest-900);
}
.btn--ghost:hover {
	background: var(--pp-forest-900);
	color: var(--pp-white);
	transform: translateY(-1px);
}
.section--dark .btn--ghost,
.site-footer .btn--ghost {
	border-color: rgba(247, 243, 234, 0.55);
	color: var(--pp-ivory-50);
}
.section--dark .btn--ghost:hover,
.site-footer .btn--ghost:hover {
	background: var(--pp-ivory-50);
	color: var(--pp-forest-900);
	border-color: var(--pp-ivory-50);
}

.cta-pair { display: flex; flex-wrap: wrap; gap: var(--space-2); margin-top: var(--space-4); }

/* Enlace editorial con flecha */
.link-arrow {
	display: inline-flex;
	align-items: center;
	gap: 0.45rem;
	min-height: 44px;
	font-weight: 700;
	font-size: 0.98rem;
	color: var(--pp-forest-700);
	text-decoration: underline;
	text-decoration-color: transparent;
	transition: text-decoration-color var(--transition-fast), color var(--transition-fast);
}
.link-arrow::after {
	content: '→';
	transition: transform var(--transition-fast);
}
.link-arrow:hover {
	color: var(--pp-forest-900);
	text-decoration-color: currentColor;
}
.link-arrow:hover::after { transform: translateX(3px); }

/* ----------------------------------------------------------- 7. Header */
.site-header {
	position: sticky;
	top: 0;
	z-index: 60;
	background: var(--pp-ivory-50);
	border-bottom: 1px solid var(--pp-border);
	transition: padding var(--transition-normal), box-shadow var(--transition-normal);
}
.site-header__inner {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--space-4);
	min-height: 84px;
	transition: min-height var(--transition-normal);
}
.site-header--compact { box-shadow: 0 1px 0 rgba(32, 35, 31, 0.06); }
.site-header--compact .site-header__inner { min-height: 68px; }

.site-logo {
	display: inline-flex;
	align-items: center;
	gap: 0.7rem;
	text-decoration: none;
	color: var(--pp-charcoal-900);
	padding-block: var(--space-1);
}
.site-logo__img { width: 46px; height: 46px; object-fit: contain; transition: width var(--transition-normal), height var(--transition-normal); }
.site-header--compact .site-logo__img { width: 38px; height: 38px; }
/* El logotipo va como imagen, no como texto: el alt lo aporta el aria-label
   del enlace, así que la imagen queda oculta a lectores de pantalla.
   La altura se fija y el ancho se deduce para que no haya salto de layout. */
.site-logo__word {
	height: 26px;
	width: auto;
	display: block;
}
.site-header--compact .site-logo__word { height: 22px; }

/* En móvil el logotipo sigue cabiendo de sobra junto al botón de menú: solo
   se reduce. Por debajo de 340 px sí desaparece y queda el imagotipo. */
@media (max-width: 560px) {
	.site-logo__word { height: 22px; }
}
@media (max-width: 340px) {
	.site-logo__word { display: none; }
}

.site-nav { display: flex; align-items: center; gap: var(--space-4); }
.site-nav__list {
	display: flex;
	align-items: center;
	gap: var(--space-3);
	list-style: none;
	margin: 0;
	padding: 0;
}
.site-nav__list a {
	display: inline-block;
	font-size: 0.97rem;
	font-weight: 500;
	color: var(--pp-charcoal-900);
	text-decoration: none;
	padding-block: 0.65rem;
	border-bottom: 2px solid transparent;
	transition: color var(--transition-fast), border-color var(--transition-fast);
}
.site-nav__list a:hover,
.site-nav__list .current-menu-item > a,
.site-nav__list .current-page-ancestor > a {
	color: var(--pp-forest-900);
	border-bottom-color: var(--pp-terracotta-600);
}

.site-nav__extras { display: flex; align-items: center; gap: var(--space-3); }
.btn--nav { min-height: 44px; padding: 0.6rem 1.1rem; font-size: 0.92rem; }

.lang-switch { display: flex; gap: 0.15rem; list-style: none; margin: 0; padding: 0; }
.lang-switch a {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 40px;
	min-height: 40px;
	text-align: center;
	font-size: 0.74rem;
	font-weight: 700;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	text-decoration: none;
	color: var(--pp-grey-700);
	padding: 0.4rem 0.35rem;
	border-radius: var(--radius-small);
	transition: background-color var(--transition-fast), color var(--transition-fast);
}
.lang-switch a:hover { background: var(--pp-sand-200); color: var(--pp-forest-900); }
.lang-switch .current-lang a { background: var(--pp-forest-900); color: var(--pp-white); }

.nav-toggle { display: none; }

@media (max-width: 980px) {
	.nav-toggle {
		display: inline-flex;
		flex-direction: column;
		justify-content: center;
		gap: 5px;
		width: 44px;
		height: 44px;
		padding: 0;
		background: transparent;
		border: 1px solid var(--pp-border);
		border-radius: var(--radius-small);
		cursor: pointer;
		align-items: center;
	}
	.nav-toggle__bar {
		width: 20px; height: 2px;
		background: var(--pp-forest-900);
		border-radius: 2px;
		transition: transform var(--transition-fast), opacity var(--transition-fast);
	}
	.nav-toggle[aria-expanded="true"] .nav-toggle__bar:nth-child(1) { transform: translateY(7px) rotate(45deg); }
	.nav-toggle[aria-expanded="true"] .nav-toggle__bar:nth-child(2) { opacity: 0; }
	.nav-toggle[aria-expanded="true"] .nav-toggle__bar:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

	.site-nav {
		display: none;
		position: absolute;
		inset: 100% 0 auto 0;
		flex-direction: column;
		align-items: stretch;
		gap: var(--space-3);
		background: var(--pp-ivory-50);
		border-bottom: 1px solid var(--pp-border);
		padding: var(--space-3) var(--gutter) var(--space-4);
		max-height: calc(100vh - 84px);
		overflow-y: auto;
	}
	.site-nav.is-open { display: flex; }
	.site-nav__list { flex-direction: column; align-items: stretch; gap: 0; }
	.site-nav__list a {
		font-size: 1.05rem;
		padding-block: 0.85rem;
		border-bottom: 1px solid var(--pp-border);
	}
	.site-nav__list a:hover,
	.site-nav__list .current-menu-item > a { border-bottom-color: var(--pp-border); }
	.site-nav__extras { justify-content: space-between; gap: var(--space-2); }
	.btn--nav { flex: 1; }
}

/* ----------------------------------------------------------- 8. Hero editorial */
.hero {
	position: relative;
	isolation: isolate;
	overflow: hidden;
	padding-block: clamp(2.5rem, 5vw, 4.5rem) var(--section-y);
	background: var(--pp-ivory-50);
}

/* Ambiente: dos gradientes muy suaves con deriva lentísima */
.hero::before {
	content: '';
	position: absolute;
	inset: -12% -6%;
	z-index: -2;
	background:
		radial-gradient(46% 38% at 78% 18%, rgba(135, 155, 130, 0.20), transparent 70%),
		radial-gradient(40% 34% at 10% 82%, rgba(226, 214, 197, 0.55), transparent 72%);
	/* Capa propia: la deriva es trabajo de compositor, no de repintado. */
	will-change: transform;
	transform: translateZ(0);
	animation: ppAmbientDrift 22s ease-in-out infinite alternate;
	pointer-events: none;
}
/* Fuera del viewport no se anima nada. */
.hero.is-out-of-view::before { animation-play-state: paused; }

/* Grano: tile pre-renderizado de 64px, sin filtros en tiempo de ejecución. */
.hero::after {
	content: '';
	position: absolute;
	inset: 0;
	z-index: -1;
	opacity: 0.025;
	background-image: url('../img/grain.png');
	background-size: 64px 64px;
	pointer-events: none;
}
@keyframes ppAmbientDrift {
	from { transform: translate3d(0, 0, 0); }
	to { transform: translate3d(-16px, 12px, 0); }
}

.hero__grid {
	display: grid;
	grid-template-columns: 54fr 46fr;
	gap: clamp(2.5rem, 5vw, 4.5rem);
	align-items: center;
	min-height: min(86svh, 780px);
}
.hero__content { max-width: 40rem; }

/* H1 revelado por líneas (un único H1 semántico) */
.hero-title {
	font-family: var(--font-display);
	font-size: clamp(2.9rem, 5.6vw, 6.1rem);
	font-weight: 600;
	line-height: 0.94;
	letter-spacing: -0.045em;
	color: var(--pp-forest-900);
	margin-bottom: var(--space-3);
}
.hero-line { display: block; overflow: hidden; padding-bottom: 0.08em; }
.hero-line__inner { display: block; }

/* Expresión editorial destacada */
.hero-accent {
	position: relative;
	display: inline-block;
	font-style: italic;
	font-weight: 500;
	color: var(--pp-forest-700);
}
.hero-underline {
	position: absolute;
	left: 0;
	bottom: -0.02em;
	width: 100%;
	height: 0.22em;
	overflow: visible;
	pointer-events: none;
}
.hero-underline path {
	fill: none;
	stroke: var(--pp-terracotta-600);
	stroke-width: 1.8;
	stroke-linecap: round;
	opacity: 0.75;
	vector-effect: non-scaling-stroke;
}

.hero__sub {
	font-size: 1.15rem;
	line-height: 1.62;
	color: var(--pp-grey-700);
	max-width: 40ch;
}

/* Firma estratégica */
.hero-signature {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.55rem;
	margin-top: var(--space-4);
	font-size: 0.76rem;
	font-weight: 600;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var(--pp-grey-700);
}
.hero-signature span { display: inline-block; }
.hero-signature i {
	display: inline-block;
	width: 14px;
	height: 1px;
	background: var(--pp-sage-500);
}

/* ------------------------------ Composición visual */
.hero-visual {
	position: relative;
	justify-self: end;
	width: 100%;
	max-width: 460px;
}
.hero-visual__layers { position: relative; }
@media (pointer: fine) and (prefers-reduced-motion: no-preference) {
	.hero-visual__layers { will-change: transform; }
}

/* Capas de profundidad (máx. 30px de separación) */
.hero-visual__layers::before,
.hero-visual__layers::after {
	content: '';
	position: absolute;
	border-radius: var(--radius-medium);
	z-index: 0;
}
.hero-visual__layers::before {
	inset: -18px -22px 26px 40px;
	background: var(--pp-forest-900);
	opacity: 0.9;
}
.hero-visual__layers::after {
	inset: 30px 44px -24px -26px;
	background: var(--pp-sand-200);
}

.hero-media {
	position: relative;
	z-index: 2;
	aspect-ratio: 4 / 5;
	border-radius: var(--radius-medium);
	overflow: hidden;
	background: var(--pp-sand-200);
	border: 1px solid rgba(23, 56, 44, 0.12);
}
.hero-media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

/* Arco geométrico fino */
.hero-arc {
	position: absolute;
	z-index: 3;
	right: -30px;
	top: 8%;
	width: 120px;
	height: 220px;
	overflow: visible;
	pointer-events: none;
}
.hero-arc path {
	fill: none;
	stroke: var(--pp-sage-500);
	stroke-width: 1;
	opacity: 0.65;
}

/* Detalle secundario */
.hero-detail {
	position: absolute;
	z-index: 4;
	left: -34px;
	bottom: 16%;
	width: 124px;
	aspect-ratio: 1;
	border-radius: var(--radius-small);
	overflow: hidden;
	border: 3px solid var(--pp-ivory-50);
	background: var(--pp-sand-200);
}
.hero-detail img { width: 100%; height: 100%; object-fit: cover; }

/* Etiqueta técnica sobre la composición */
.hero-tag {
	position: absolute;
	z-index: 5;
	right: -14px;
	bottom: -18px;
	display: flex;
	flex-direction: column;
	gap: 0.1rem;
	background: var(--pp-white);
	border: 1px solid var(--pp-border);
	border-radius: var(--radius-small);
	padding: 0.7rem 0.95rem;
	max-width: 210px;
}
.hero-tag__value {
	font-family: var(--font-heading);
	font-size: 1.5rem;
	font-weight: 600;
	line-height: 1;
	letter-spacing: -0.015em;
	color: var(--pp-forest-900);
	font-variant-numeric: tabular-nums;
}
.hero-tag__label {
	font-size: 0.66rem;
	font-weight: 700;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--pp-grey-700);
	line-height: 1.3;
}

/* ------------------------------ Banda de autoridad */
.authority {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: var(--space-4);
	margin-top: clamp(2.5rem, 5vw, 4rem);
	padding-top: var(--space-4);
	border-top: 1px solid var(--pp-border);
}
.authority__item {
	display: flex;
	flex-direction: column;
	gap: 0.25rem;
	padding-left: var(--space-3);
	border-left: 1px solid var(--pp-border);
}
.authority__item:first-child { padding-left: 0; border-left: 0; }
.authority__mask { display: block; overflow: hidden; padding-bottom: 0.06em; }
.authority__value {
	display: block;
	font-family: var(--font-display);
	font-size: clamp(1.5rem, 2.4vw, 2.1rem);
	font-weight: 600;
	line-height: 1.05;
	letter-spacing: -0.015em;
	color: var(--pp-forest-900);
	font-variant-numeric: tabular-nums;
}
.authority__label {
	font-size: 0.82rem;
	font-weight: 500;
	line-height: 1.4;
	color: var(--pp-grey-700);
	max-width: 24ch;
}

@media (max-width: 1080px) {
	.hero__grid { grid-template-columns: 1fr; min-height: 0; }
	.hero__content { max-width: 100%; }
	.hero-visual { justify-self: start; margin-top: var(--space-5); max-width: 400px; }
	.authority { grid-template-columns: repeat(2, 1fr); row-gap: var(--space-3); }
	.authority__item:nth-child(3) { padding-left: 0; border-left: 0; }
}
@media (max-width: 620px) {
	.hero-visual { max-width: 100%; }
	.hero-visual__layers::before { inset: -12px -14px 18px 28px; }
	.hero-visual__layers::after { inset: 20px 30px -16px -16px; }
	.hero-detail { width: 92px; left: -18px; }
	.hero-tag { right: 0; bottom: -14px; }
	.hero-arc { display: none; }
	.authority { grid-template-columns: 1fr; }
	.authority__item { padding-left: 0; border-left: 0; border-top: 1px solid var(--pp-border); padding-top: var(--space-2); }
	.authority__item:first-child { border-top: 0; padding-top: 0; }
	.hero .cta-pair .btn { width: 100%; }
}

/* ----------------------------------------------------------- 9. Panel de ficha técnica (firma) */
.data-panel {
	background: var(--pp-white);
	border: 1px solid var(--pp-border);
	border-radius: var(--radius-medium);
	padding: var(--space-4) var(--space-4) var(--space-3);
}
.data-panel__big {
	padding-bottom: var(--space-3);
	margin-bottom: var(--space-3);
	border-bottom: 1px solid var(--pp-border);
}
.data-panel__num {
	display: block;
	font-family: var(--font-display);
	font-size: clamp(3rem, 5.5vw, 4rem);
	font-weight: 600;
	line-height: 1;
	letter-spacing: -0.02em;
	color: var(--pp-forest-900);
	font-variant-numeric: tabular-nums;
	margin-bottom: 0.35rem;
}
.data-panel__label {
	display: block;
	font-size: 0.75rem;
	font-weight: 700;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--pp-grey-700);
}
.data-panel__rows { margin: 0; }
.data-panel__row {
	display: flex;
	justify-content: space-between;
	align-items: baseline;
	gap: var(--space-2);
	padding-block: 0.55rem;
	border-bottom: 1px solid var(--pp-border);
}
.data-panel__row:last-child { border-bottom: 0; }
.data-panel__row dt {
	font-size: 0.72rem;
	font-weight: 700;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--pp-grey-700);
}
.data-panel__row dd {
	margin: 0;
	font-size: 0.95rem;
	font-weight: 700;
	color: var(--pp-charcoal-900);
	text-align: right;
	font-variant-numeric: tabular-nums;
}
.data-panel__note {
	margin: var(--space-3) 0 0;
	font-size: 0.8rem;
	line-height: 1.5;
	color: var(--pp-grey-700);
}

/* ----------------------------------------------------------- 10. Cifras corporativas */
.stats {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: var(--space-4);
	margin-top: var(--space-5);
	border-top: 1px solid var(--pp-border);
	padding-top: var(--space-4);
}
.section--dark .stats { border-top-color: rgba(247, 243, 234, 0.22); }
.stat { display: flex; flex-direction: column; gap: 0.2rem; }
.stat__num {
	font-family: var(--font-display);
	font-size: clamp(2.25rem, 3.6vw, 3.25rem);
	font-weight: 600;
	line-height: 1;
	letter-spacing: -0.035em;
	color: var(--pp-forest-900);
	font-variant-numeric: tabular-nums;
}
.section--dark .stat__num { color: var(--pp-white); }
.stat__label {
	font-size: 0.88rem;
	font-weight: 500;
	line-height: 1.4;
	color: var(--pp-grey-700);
	max-width: 20ch;
}
.section--dark .stat__label { color: rgba(247, 243, 234, 0.78); }

@media (max-width: 780px) {
	.stats { grid-template-columns: repeat(2, 1fr); gap: var(--space-3); }
}

/* ----------------------------------------------------------- 11. Tarjetas de líneas de negocio */
.gates {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: var(--space-3);
}
.gate {
	position: relative;
	display: flex;
	flex-direction: column;
	gap: 0.35rem;
	background: var(--pp-white);
	border: 1px solid var(--pp-border);
	border-radius: var(--radius-medium);
	padding: var(--space-4) var(--space-4) var(--space-3);
	transition: border-color var(--transition-fast), transform var(--transition-fast);
}
.section--sand .gate { background: var(--pp-white); }
.section--dark .gate {
	background: rgba(247, 243, 234, 0.05);
	border-color: rgba(247, 243, 234, 0.2);
}
.gate:hover { border-color: var(--pp-forest-700); transform: translateY(-2px); }
.gate:focus-within { border-color: var(--pp-forest-700); }
.gate h3 { margin-bottom: 0.15em; color: var(--pp-forest-900); }
.section--dark .gate h3 { color: var(--pp-white); }
.gate h3 a { color: inherit; text-decoration: none; }
.gate h3 a::after { content: ''; position: absolute; inset: 0; border-radius: var(--radius-medium); }
.gate p { flex-grow: 1; font-size: 0.98rem; color: var(--pp-grey-700); margin-bottom: var(--space-2); }
.section--dark .gate p { color: rgba(247, 243, 234, 0.8); }
.gate__link {
	display: inline-flex;
	align-items: center;
	gap: 0.4rem;
	font-weight: 700;
	font-size: 0.95rem;
	color: var(--pp-terracotta-600);
}
.gate__link::after { content: '→'; transition: transform var(--transition-fast); }
.gate:hover .gate__link::after { transform: translateX(3px); }
.section--dark .gate__link { color: var(--pp-sand-200); }

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

/* ----------------------------------------------------------- 11b. Proceso por fases
   Numerado porque el orden es información real: el proyecto avanza fase a fase. */
.process { list-style: none; margin: 0; padding: 0; counter-reset: phase; }
.process__item {
	display: grid;
	grid-template-columns: 2.6rem minmax(0, 1fr);
	gap: var(--space-2);
	padding-block: var(--space-3);
	border-top: 1px solid rgba(247, 243, 234, 0.2);
	counter-increment: phase;
}
.process__item:first-child { border-top: 0; padding-top: 0; }
.process__item::before {
	content: '0' counter(phase);
	font-family: var(--font-heading);
	font-size: 1.05rem;
	font-weight: 600;
	line-height: 1.4;
	color: var(--pp-sage-300);
	font-variant-numeric: tabular-nums;
}
.process__title {
	display: block;
	font-size: 1.02rem;
	font-weight: 700;
	line-height: 1.35;
	color: var(--pp-white);
	margin-bottom: 0.2rem;
}
.section--dark .process__text {
	margin: 0;
	font-size: 0.94rem;
	line-height: 1.55;
	color: rgba(247, 243, 234, 0.8);
	max-width: 46ch;
}
.process__text { margin: 0; font-size: 0.94rem; line-height: 1.55; max-width: 46ch; }
.section--sand .process__text { color: var(--pp-grey-800); }
.section:not(.section--dark) .process__item { border-top-color: var(--pp-border); }
.section:not(.section--dark) .process__item::before { color: var(--pp-terracotta-600); }
.section:not(.section--dark) .process__title { color: var(--pp-forest-900); }
.section:not(.section--dark):not(.section--sand) .process__text { color: var(--pp-grey-700); }
.section.section--sand .process__text { color: var(--pp-grey-800); }

/* ----------------------------------------------------------- 12. Tarjetas de producto */
.product-grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: var(--space-3);
}
.product-card {
	position: relative;
	display: flex;
	flex-direction: column;
	background: var(--pp-white);
	border: 1px solid var(--pp-border);
	border-radius: var(--radius-medium);
	overflow: hidden;
	transition: border-color var(--transition-fast), transform var(--transition-fast);
}
.product-card:hover { border-color: var(--pp-forest-700); transform: translateY(-2px); }
.product-card:focus-within { border-color: var(--pp-forest-700); }
.product-card__media {
	display: block;
	aspect-ratio: 4 / 3;
	background: var(--pp-sand-200);
	overflow: hidden;
}
.product-card__media img { width: 100%; height: 100%; object-fit: cover; }
.product-card__placeholder {
	display: block;
	width: 100%;
	height: 100%;
	background:
		linear-gradient(135deg, transparent 48%, rgba(23, 56, 44, 0.08) 50%, transparent 52%),
		var(--pp-sand-200);
}
.product-card__body {
	display: flex;
	flex-direction: column;
	gap: 0.3rem;
	padding: var(--space-3);
}
.product-card__title { font-size: 1.15rem; font-weight: 700; margin: 0; }
.product-card__title a { color: var(--pp-forest-900); text-decoration: none; }
.product-card__title a::after { content: ''; position: absolute; inset: 0; }
.product-card__tagline {
	margin: 0;
	font-size: 0.94rem;
	line-height: 1.5;
	color: var(--pp-grey-700);
}
.natural-chip {
	align-self: flex-start;
	margin-top: var(--space-1);
	font-size: 0.72rem;
	font-weight: 700;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--pp-forest-700);
	background: var(--pp-ivory-50);
	border: 1px solid var(--pp-border);
	border-radius: var(--radius-small);
	padding: 0.3rem 0.5rem;
}
.natural-chip strong { font-weight: 700; }

@media (max-width: 900px) {
	.product-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 560px) {
	.product-grid { grid-template-columns: 1fr; }
}

/* ----------------------------------------------------------- 12b. Rejilla de referencias de gama */
.ref-grid {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: var(--space-3);
}
.ref {
	display: flex;
	flex-direction: column;
	background: var(--pp-ivory-50);
	border: 1px solid var(--pp-border);
	border-radius: var(--radius-medium);
	overflow: hidden;
	transition: border-color var(--transition-fast), transform var(--transition-fast);
}
.ref:hover { border-color: var(--pp-forest-700); transform: translateY(-2px); }
.ref__media {
	aspect-ratio: 1;
	background: var(--pp-white);
	display: grid;
	place-items: center;
	padding: var(--space-2);
}
.ref__media img { width: 100%; height: 100%; object-fit: contain; }
.ref__body { display: flex; flex-direction: column; gap: 0.25rem; padding: var(--space-3); }
.ref__pct {
	font-family: var(--font-display);
	font-size: 1.9rem;
	font-weight: 600;
	line-height: 1;
	letter-spacing: -0.015em;
	color: var(--pp-forest-900);
	font-variant-numeric: tabular-nums;
}
.ref__pct small { font-size: 0.5em; margin-left: 0.1em; }
.ref__name {
	font-family: var(--font-body);
	font-size: 1.05rem;
	font-weight: 700;
	line-height: 1.25;
	margin: 0;
	color: var(--pp-forest-900);
}
.ref__tag {
	font-size: 0.68rem;
	font-weight: 700;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--pp-terracotta-600);
}
.ref__claim { margin: 0.2rem 0 0; font-size: 0.92rem; line-height: 1.5; color: var(--pp-grey-700); }

@media (max-width: 900px) { .ref-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .ref-grid { grid-template-columns: 1fr; } }
@media (hover: none) { .ref:hover { transform: none; } }

/* ----------------------------------------------------------- 12c. Tabla de catálogo */
.cat-section { margin-bottom: var(--space-5); }
.cat-section:last-of-type { margin-bottom: 0; }
.cat-section__title {
	font-family: var(--font-body);
	font-size: 1.1rem;
	font-weight: 700;
	margin-bottom: 0.3rem;
	color: var(--pp-forest-900);
}
.cat-section__note { font-size: 0.9rem; color: var(--pp-grey-700); margin-bottom: var(--space-2); }
.cat-table-wrap {
	overflow-x: auto;
	border: 1px solid var(--pp-border);
	border-radius: var(--radius-medium);
	background: var(--pp-white);
}
.cat-table {
	width: 100%;
	border-collapse: collapse;
	font-size: 0.92rem;
	min-width: 560px;
}
.cat-table th, .cat-table td {
	text-align: left;
	padding: 0.7rem 1rem;
	border-bottom: 1px solid var(--pp-border);
	vertical-align: top;
}
.cat-table thead th {
	font-size: 0.72rem;
	font-weight: 700;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--pp-grey-700);
	background: var(--pp-ivory-50);
	border-bottom-width: 2px;
}
.cat-table tbody tr:last-child th,
.cat-table tbody tr:last-child td { border-bottom: 0; }
.cat-table tbody tr:hover { background: var(--pp-ivory-50); }
.cat-table__sku {
	font-family: var(--font-body);
	font-weight: 700;
	font-size: 0.82rem;
	letter-spacing: 0.03em;
	color: var(--pp-forest-700);
	white-space: nowrap;
}

/* ----------------------------------------------------------- 13. Cabecera de página y prosa */
.page-head {
	padding-block: clamp(2rem, 4vw, var(--space-6)) var(--space-4);
	max-width: var(--container-main);
}
.page-head h1 { max-width: 18ch; }
.page-head__sub {
	font-size: 1.15rem;
	line-height: 1.6;
	color: var(--pp-grey-700);
	max-width: 58ch;
}

.prose { max-width: var(--container-text); }
.prose > *:last-child { margin-bottom: 0; }
.prose h2 { font-size: clamp(1.7rem, 2.6vw, 2.4rem); margin-top: 1.6em; }
.prose h3 { font-size: 1.25rem; margin-top: 1.6em; }
.prose ul, .prose ol { padding-left: 1.25rem; max-width: 68ch; }
.prose li { margin-bottom: 0.45rem; }
.prose blockquote {
	margin: 1.8em 0;
	padding: 0.2em 0 0.2em 1.4em;
	border-left: 3px solid var(--pp-terracotta-600);
	font-family: var(--font-heading);
	font-size: 1.2rem;
	font-style: normal;
	line-height: 1.4;
	color: var(--pp-forest-900);
}
.prose blockquote p { max-width: 56ch; }

.brand-logo { width: min(360px, 78%); margin-block: var(--space-4) var(--space-5); }

/* Imagen destacada en páginas genéricas (marcas de retail, etc.). */
.page-media {
	margin: 0 0 var(--space-5);
	border-radius: var(--radius-medium);
	overflow: hidden;
	background: var(--pp-sand-200);
	max-width: var(--container-text);
}
.page-media img { width: 100%; height: auto; display: block; }

/* ----------------------------------------------------------- 14. Ficha de producto */
.ficha__grid {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(300px, 400px);
	gap: clamp(2rem, 5vw, var(--space-7));
	align-items: start;
	padding-bottom: var(--section-y);
}
.ficha__media {
	margin: 0 0 var(--space-4);
	border-radius: var(--radius-medium);
	overflow: hidden;
	background: var(--pp-sand-200);
}
.ficha__media img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }
.ficha__tagline { font-size: 1.2rem; line-height: 1.55; color: var(--pp-grey-700); max-width: 58ch; }
.ficha__list { padding-left: 1.25rem; max-width: 68ch; }
.ficha__list li { margin-bottom: 0.5rem; }
.ficha__aside { position: sticky; top: 104px; }
.ficha__cta { margin-top: var(--space-4); }
.ficha__cta h3 { font-size: 1.2rem; }

@media (max-width: 900px) {
	.ficha__grid { grid-template-columns: 1fr; }
	.ficha__aside { position: static; }
}

/* ----------------------------------------------------------- 15. Migas */
.breadcrumbs { padding-top: var(--space-3); }
.breadcrumbs ol {
	display: flex; flex-wrap: wrap; gap: 0.4rem;
	list-style: none; margin: 0; padding: 0;
	font-size: 0.85rem;
}
.breadcrumbs li:not(:last-child)::after { content: '/'; margin-left: 0.4rem; color: var(--pp-grey-700); }
.breadcrumbs a {
	display: inline-block;
	padding-block: 0.3rem;
	color: var(--pp-grey-700);
	text-decoration: none;
}
.breadcrumbs a:hover { color: var(--pp-forest-900); text-decoration: underline; }
.breadcrumbs [aria-current] { color: var(--pp-charcoal-900); font-weight: 600; }

/* ----------------------------------------------------------- 16. FAQ */
.faq { padding-block: var(--section-y); background: var(--pp-white); }
.faq__list { max-width: 800px; border-top: 1px solid var(--pp-border); }
.faq__item { border-bottom: 1px solid var(--pp-border); }
.faq__item summary {
	position: relative;
	display: block;
	cursor: pointer;
	list-style: none;
	padding: 1.1rem 2.5rem 1.1rem 0;
	font-size: 1.05rem;
	font-weight: 700;
	color: var(--pp-forest-900);
	min-height: 44px;
}
.faq__item summary::-webkit-details-marker { display: none; }
.faq__item summary::after {
	content: '+';
	position: absolute;
	right: 0.2rem;
	top: 50%;
	transform: translateY(-50%);
	font-size: 1.5rem;
	font-weight: 400;
	line-height: 1;
	color: var(--pp-terracotta-600);
}
.faq__item[open] summary::after { content: '–'; }
.faq__answer { padding: 0 0 1.2rem; }
.faq__answer p { color: var(--pp-grey-700); max-width: 65ch; margin-bottom: 0; }

/* ----------------------------------------------------------- 17. Formularios */
.pp-form {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: var(--space-3);
	max-width: 800px;
	margin-top: var(--space-4);
}
.field { display: flex; flex-direction: column; gap: 0.4rem; }
.field--full { grid-column: 1 / -1; }
.field label { font-size: 0.9rem; font-weight: 600; color: inherit; }
.field input,
.field select,
.field textarea {
	font: inherit;
	font-size: 1rem;
	min-height: 48px;
	width: 100%;
	padding: 0.7rem 0.9rem;
	color: var(--pp-charcoal-900);
	background: var(--pp-white);
	border: 1px solid var(--pp-border);
	border-radius: var(--radius-small);
	transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
}
.field textarea { min-height: 140px; resize: vertical; line-height: 1.6; }
.field input:focus,
.field select:focus,
.field textarea:focus {
	outline: none;
	border-color: var(--pp-forest-700);
	box-shadow: 0 0 0 3px rgba(47, 89, 70, 0.18);
}
.field input:focus-visible,
.field select:focus-visible,
.field textarea:focus-visible { outline: none; }
.field--consent {
	flex-direction: row;
	align-items: flex-start;
	gap: 0.65rem;
	font-size: 0.9rem;
	line-height: 1.5;
}
.field--consent input {
	width: 20px; height: 20px; min-height: 20px;
	margin-top: 0.15rem;
	flex-shrink: 0;
	accent-color: var(--pp-forest-900);
}
.field--consent label { font-weight: 400; }
.field--hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

.section--dark .field label { color: var(--pp-ivory-50); }
.section--dark .field--consent { color: rgba(247, 243, 234, 0.9); }

.form-notice {
	grid-column: 1 / -1;
	margin: 0;
	max-width: none;
	padding: var(--space-2) var(--space-3);
	border-radius: var(--radius-small);
	font-weight: 600;
	border: 1px solid transparent;
}
/* Doble clase: gana a `.section--dark p` cuando el formulario va sobre fondo verde. */
.pp-form .form-notice--ok {
	background: var(--pp-white);
	border-color: var(--pp-success);
	color: var(--pp-success);
}
.pp-form .form-notice--error {
	background: var(--pp-white);
	border-color: var(--pp-error);
	color: var(--pp-error);
}

@media (max-width: 700px) {
	.pp-form { grid-template-columns: 1fr; }
	.pp-form .btn { width: 100%; }
}

/* ----------------------------------------------------------- 18. Footer */
.site-footer {
	background: var(--pp-forest-900);
	color: var(--pp-ivory-50);
	margin-top: var(--section-y);
	padding-block: var(--space-7) var(--space-4);
}
.site-footer__inner {
	display: grid;
	grid-template-columns: minmax(0, 1.4fr) repeat(3, minmax(0, 1fr));
	gap: var(--space-5) var(--space-4);
}
.site-footer__logo { width: min(240px, 80%); margin-bottom: var(--space-3); }
.site-footer__desc {
	font-size: 0.95rem;
	line-height: 1.6;
	color: rgba(247, 243, 234, 0.8);
	max-width: 40ch;
}
.site-footer__claim {
	font-family: var(--font-heading);
	font-size: 1.15rem;
	font-weight: 600;
	line-height: 1.3;
	color: var(--pp-white);
	margin: var(--space-3) 0 0.4rem;
	max-width: 24ch;
}
.site-footer__sedes { color: var(--pp-sage-300); margin-bottom: 0; }

.site-footer__col-title {
	font-size: 0.75rem;
	font-weight: 700;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--pp-sage-300);
	margin: 0 0 var(--space-2);
}
.site-footer__list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 0.1rem;
}
.site-footer__list a,
.site-footer__contact a {
	display: inline-flex;
	align-items: center;
	min-height: 44px;
	font-size: 0.95rem;
	color: rgba(247, 243, 234, 0.88);
	text-decoration: none;
	padding-block: 0.5rem;
	transition: color var(--transition-fast);
}
.site-footer__list a:hover,
.site-footer__contact a:hover { color: var(--pp-white); text-decoration: underline; }
.site-footer__contact { font-size: 0.95rem; color: rgba(247, 243, 234, 0.88); }
.site-footer__contact p { margin-bottom: 0.4rem; max-width: 32ch; }

.site-footer__legal {
	grid-column: 1 / -1;
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	align-items: center;
	gap: var(--space-2);
	margin-top: var(--space-4);
	padding-top: var(--space-3);
	border-top: 1px solid rgba(247, 243, 234, 0.18);
	font-size: 0.85rem;
	color: rgba(247, 243, 234, 0.7);
}
.site-footer__legal p { margin: 0; max-width: none; }
.site-footer__legal-links {
	list-style: none;
	display: flex;
	flex-wrap: wrap;
	gap: var(--space-3);
	margin: 0;
	padding: 0;
}
.site-footer__legal-links a {
	color: inherit;
	text-decoration: none;
	padding-block: 0.3rem;
}
.site-footer__legal-links a:hover { color: var(--pp-white); text-decoration: underline; }

@media (max-width: 900px) {
	.site-footer__inner { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.site-footer__brand { grid-column: 1 / -1; }
}
@media (max-width: 560px) {
	.site-footer__inner { grid-template-columns: 1fr; }
	.site-footer__legal { flex-direction: column; align-items: flex-start; }
}

/* ----------------------------------------------------------- 19. 404 */
.error-404 { padding-block: var(--space-7); max-width: 60ch; }
.error-404 .cta-pair { justify-content: flex-start; }

/* ----------------------------------------------------------- 20. Sección editorial oscura */
.chapters {
	display: grid;
	grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
	gap: clamp(2rem, 5vw, var(--space-7));
	align-items: start;
}
.chapter {
	position: relative;
	display: grid;
	grid-template-columns: 3.2rem minmax(0, 1fr);
	gap: var(--space-2);
	padding-block: var(--space-4);
}
/* Separador como pseudoelemento absoluto: puede trazarse sin alterar la retícula. */
.chapter::before {
	content: '';
	position: absolute;
	inset: 0 0 auto 0;
	height: 1px;
	background: rgba(247, 243, 234, 0.22);
	transform-origin: left center;
}
.chapter:first-child { padding-top: 0; }
.chapter:first-child::before { content: none; }
.chapter__num {
	font-family: var(--font-heading);
	font-size: 0.95rem;
	font-weight: 600;
	line-height: 1.6;
	color: var(--pp-sage-300);
	font-variant-numeric: tabular-nums;
}
.chapter__title {
	font-family: var(--font-display);
	font-size: clamp(1.6rem, 2.6vw, 2.3rem);
	font-weight: 600;
	line-height: 1.1;
	letter-spacing: -0.015em;
	color: var(--pp-white);
	margin-bottom: 0.35rem;
}
.section--dark .chapter__text {
	margin: 0;
	font-size: 1rem;
	line-height: 1.6;
	color: rgba(247, 243, 234, 0.82);
	max-width: 46ch;
}
.chapters__media { position: sticky; top: 108px; }
.chapters__figure {
	margin: 0;
	border-radius: var(--radius-medium);
	overflow: hidden;
	background: rgba(247, 243, 234, 0.08);
}
.chapters__figure img { width: 100%; height: auto; display: block; }
.chapters__caption {
	margin-top: var(--space-2);
	font-size: 0.78rem;
	font-weight: 500;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--pp-sage-300);
}

@media (max-width: 900px) {
	.chapters { grid-template-columns: 1fr; }
	.chapters__media { position: static; order: -1; margin-bottom: var(--space-4); }
}

/* ----------------------------------------------------------- 21. Media en tarjetas de línea */
.gate { padding: 0; overflow: hidden; }
.gate__media {
	display: block;
	aspect-ratio: 4 / 3;
	overflow: hidden;
	background: var(--pp-sand-200);
	margin-bottom: var(--space-1);
}
.gate__media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform var(--transition-normal);
}
.gate:hover .gate__media img { transform: scale(1.025); }
.gate__body {
	display: flex;
	flex-direction: column;
	gap: 0.35rem;
	flex-grow: 1;
	padding: var(--space-3) var(--space-4) var(--space-4);
}
.gate:hover { background: var(--pp-ivory-50); }
.section--sand .gate:hover { background: var(--pp-ivory-50); }

@media (hover: none) {
	.gate:hover { transform: none; background: var(--pp-white); }
	.gate:hover .gate__media img { transform: none; }
	.product-card:hover { transform: none; }
}

/* ----------------------------------------------------------- 22. Titulares de sección */
.section-head { max-width: 46rem; margin-bottom: var(--space-5); }
.section-head .section-title { margin-bottom: var(--space-2); }
.section-head__support { color: var(--pp-grey-700); margin-bottom: 0; }
.section--dark .section-head__support { color: rgba(247, 243, 234, 0.78); }
.section-head__rule {
	display: block;
	width: 56px;
	height: 2px;
	background: var(--pp-terracotta-600);
	margin-top: var(--space-3);
}

/* ----------------------------------------------------------- 23. Microinteracción de botones */
.btn__arrow { display: inline-block; transition: transform var(--transition-fast); }
.btn--primary:hover .btn__arrow,
.btn--ghost:hover .btn__arrow { transform: translateX(4px); }
.btn--primary { position: relative; overflow: hidden; }
.btn--primary::after {
	content: '';
	position: absolute;
	inset: 0;
	background: linear-gradient(100deg, transparent 42%, rgba(255, 255, 255, 0.14) 50%, transparent 58%);
	opacity: 0;
	transition: opacity var(--transition-fast);
	pointer-events: none;
}
.btn--primary:hover::after { opacity: 1; }

/* ----------------------------------------------------------- 24. Sistema de revelado al scroll */
.js [data-reveal] {
	opacity: 0;
	will-change: transform, opacity;
}
.js [data-reveal="up"] { transform: translate3d(0, 24px, 0); }
.js [data-reveal="left"] { transform: translate3d(-28px, 0, 0); }
.js [data-reveal="right"] { transform: translate3d(28px, 0, 0); }
.js [data-reveal="scale"] { transform: scale(0.985); }
.js [data-reveal].is-revealed {
	opacity: 1;
	transform: none;
	transition:
		opacity 750ms cubic-bezier(.22, 1, .36, 1),
		transform 750ms cubic-bezier(.22, 1, .36, 1);
	transition-delay: var(--reveal-delay, 0ms);
	will-change: auto;
}

/* Revelado sin transición (red de seguridad y movimiento reducido): el texto nunca
   se queda a media opacidad, así el contraste es siempre el final. */
.js [data-reveal].pp-reveal-instant,
.js [data-reveal].pp-reveal-instant > *,
.js [data-reveal].pp-reveal-instant .chapters__figure,
.js [data-reveal].pp-reveal-instant .chapters__figure img,
.js [data-reveal].pp-reveal-instant .chapters__caption,
.js .chapter[data-reveal].pp-reveal-instant::before {
	transition: none !important;
}

/* --- Variante "stagger": el contenedor no se mueve; sus hijos entran en cascada. --- */
.js [data-reveal="stagger"] { opacity: 1; transform: none; will-change: auto; }
.js [data-reveal="stagger"] > * {
	opacity: 0;
	transform: translate3d(0, 16px, 0);
}
.js [data-reveal="stagger"].is-revealed > * {
	opacity: 1;
	transform: none;
	transition:
		opacity 700ms cubic-bezier(.22, 1, .36, 1),
		transform 700ms cubic-bezier(.22, 1, .36, 1);
}
.js [data-reveal="stagger"].is-revealed > *:nth-child(1) { transition-delay: 0ms; }
.js [data-reveal="stagger"].is-revealed > *:nth-child(2) { transition-delay: 90ms; }
.js [data-reveal="stagger"].is-revealed > *:nth-child(3) { transition-delay: 180ms; }
.js [data-reveal="stagger"].is-revealed > *:nth-child(4) { transition-delay: 270ms; }

/* --- Variante "curtain": telón vertical + asentamiento de la imagen. --- */
.js [data-reveal="curtain"] { opacity: 1; transform: none; will-change: auto; }
.js [data-reveal="curtain"] .chapters__figure {
	clip-path: inset(0 0 100% 0);
	will-change: clip-path;
}
.js [data-reveal="curtain"].is-revealed .chapters__figure {
	clip-path: inset(0 0 0 0);
	transition: clip-path 1100ms cubic-bezier(.22, 1, .36, 1);
	transition-delay: var(--reveal-delay, 0ms);
	will-change: auto;
}
.js [data-reveal="curtain"] .chapters__figure img { transform: scale(1.08); }
.js [data-reveal="curtain"].is-revealed .chapters__figure img {
	transform: scale(1);
	transition: transform 1500ms cubic-bezier(.22, 1, .36, 1);
	transition-delay: var(--reveal-delay, 0ms);
}
.js [data-reveal="curtain"] .chapters__caption {
	opacity: 0;
	transform: translate3d(0, 10px, 0);
}
.js [data-reveal="curtain"].is-revealed .chapters__caption {
	opacity: 1;
	transform: none;
	transition:
		opacity 600ms cubic-bezier(.22, 1, .36, 1),
		transform 600ms cubic-bezier(.22, 1, .36, 1);
	transition-delay: calc(var(--reveal-delay, 0ms) + 620ms);
}

/* --- Capítulos: la línea se traza antes de que entre el texto. --- */
.js .chapter[data-reveal]::before { transform: scaleX(0); }
.js .chapter[data-reveal].is-revealed::before {
	transform: scaleX(1);
	transition: transform 900ms cubic-bezier(.22, 1, .36, 1);
	transition-delay: var(--reveal-delay, 0ms);
}

/* ----------------------------------------------------------- 25. Entrada del hero (una sola vez) */
@keyframes ppFadeUp {
	from { opacity: 0; transform: translate3d(0, 10px, 0); }
	to { opacity: 1; transform: none; }
}
@keyframes ppLineReveal {
	from { opacity: 0; transform: translate3d(0, 110%, 0); }
	to { opacity: 1; transform: none; }
}
@keyframes ppVisualIn {
	from { opacity: 0; transform: translate3d(0, 20px, 0); }
	to { opacity: 1; transform: none; }
}
@keyframes ppMediaSettle {
	from { transform: scale(1.035); }
	to { transform: scale(1); }
}
@keyframes ppStroke { to { stroke-dashoffset: 0; } }
@keyframes ppMaskUp {
	from { opacity: 0; transform: translate3d(0, 100%, 0); }
	to { opacity: 1; transform: none; }
}

.js .hero .eyebrow,
.js .hero__sub,
.js .hero .cta-pair,
.js .hero-signature span,
.js .hero-signature i {
	opacity: 0;
	animation: ppFadeUp 500ms cubic-bezier(.22, 1, .36, 1) var(--d, 0ms) forwards;
}
.js .hero .eyebrow { --d: 60ms; }
.js .hero__sub { --d: 520ms; }
.js .hero .cta-pair { --d: 620ms; }
.js .hero-signature i { --d: 760ms; }
.js .hero-signature span:nth-of-type(1) { --d: 720ms; }
.js .hero-signature span:nth-of-type(2) { --d: 800ms; }
.js .hero-signature span:nth-of-type(3) { --d: 880ms; }

.js .hero-line__inner {
	opacity: 0;
	animation: ppLineReveal 850ms cubic-bezier(.22, 1, .36, 1) var(--d, 0ms) forwards;
}
.js .hero-line:nth-of-type(1) .hero-line__inner { --d: 120ms; }
.js .hero-line:nth-of-type(2) .hero-line__inner { --d: 240ms; }
.js .hero-line:nth-of-type(3) .hero-line__inner { --d: 360ms; }

.js .hero-underline path {
	stroke-dasharray: 260;
	stroke-dashoffset: 260;
	animation: ppStroke 780ms cubic-bezier(.22, 1, .36, 1) 780ms forwards;
}

.js .hero-visual {
	opacity: 0;
	animation: ppVisualIn 900ms cubic-bezier(.22, 1, .36, 1) 260ms forwards;
}
.js .hero-media img { animation: ppMediaSettle 1100ms cubic-bezier(.22, 1, .36, 1) 700ms both; }
.js .hero-tag,
.js .hero-detail {
	opacity: 0;
	animation: ppFadeUp 600ms cubic-bezier(.22, 1, .36, 1) var(--d, 900ms) forwards;
}
.js .hero-detail { --d: 860ms; }
.js .hero-tag { --d: 980ms; }

.js .authority__value {
	opacity: 0;
	animation: ppMaskUp 700ms cubic-bezier(.22, 1, .36, 1) var(--d, 1000ms) forwards;
}
.js .authority__item:nth-child(1) .authority__value { --d: 1020ms; }
.js .authority__item:nth-child(2) .authority__value { --d: 1090ms; }
.js .authority__item:nth-child(3) .authority__value { --d: 1160ms; }
.js .authority__item:nth-child(4) .authority__value { --d: 1230ms; }

/* Red de seguridad: si la entrada no llegó a ejecutarse (pestaña en segundo plano,
   animaciones bloqueadas), nada puede quedarse invisible. */
.pp-hero-settled .hero .eyebrow,
.pp-hero-settled .hero__sub,
.pp-hero-settled .hero .cta-pair,
.pp-hero-settled .hero-signature span,
.pp-hero-settled .hero-signature i,
.pp-hero-settled .hero-line__inner,
.pp-hero-settled .hero-visual,
.pp-hero-settled .hero-detail,
.pp-hero-settled .hero-tag,
.pp-hero-settled .authority__value {
	opacity: 1;
	transform: none;
}
.pp-hero-settled .hero-underline path { stroke-dashoffset: 0; }

/* ----------------------------------------------------------- 26. Movimiento ligado al scroll (mejora progresiva) */
@supports (animation-timeline: view()) {
	@media (prefers-reduced-motion: no-preference) and (min-width: 1024px) {
		@keyframes ppShift {
			from { transform: translate3d(0, 18px, 0); }
			to { transform: translate3d(0, -18px, 0); }
		}
		.pp-scroll-shift {
			animation: ppShift linear both;
			animation-timeline: view();
			animation-range: entry 10% cover 90%;
		}
	}
}

/* ----------------------------------------------------------- 27. Rendimiento de secciones inferiores */
.section--defer { contain: layout paint style; }

/* ----------------------------------------------------------- 28. Movimiento reducido */
@media (prefers-reduced-motion: reduce) {
	*, *::before, *::after {
		scroll-behavior: auto !important;
		transition-duration: 0.01ms !important;
		animation-duration: 0.01ms !important;
		animation-iteration-count: 1 !important;
	}
	.js [data-reveal="stagger"] > *,
	.js [data-reveal="curtain"] .chapters__caption,
	.js [data-reveal="curtain"] .chapters__figure img {
		opacity: 1 !important;
		transform: none !important;
	}
	.js [data-reveal="curtain"] .chapters__figure { clip-path: none !important; }
	.js .chapter[data-reveal]::before { transform: none !important; }

	.js [data-reveal],
	.js .hero .eyebrow,
	.js .hero__sub,
	.js .hero .cta-pair,
	.js .hero-signature span,
	.js .hero-signature i,
	.js .hero-line__inner,
	.js .hero-visual,
	.js .hero-detail,
	.js .hero-tag,
	.js .authority__value,
	.pp-scroll-shift {
		opacity: 1 !important;
		transform: none !important;
		animation: none !important;
	}
	.js .hero-underline path {
		stroke-dasharray: none !important;
		stroke-dashoffset: 0 !important;
		animation: none !important;
	}
	.hero::before { animation: none !important; }
	.btn:hover, .gate:hover, .product-card:hover { transform: none; }
}


/* ----------------------------------------------------------- Aviso de cookies
   Se muestra solo mientras no haya decisión. No bloquea la lectura: es una
   barra, no un muro — el contenido sigue siendo accesible mientras se decide. */
.consent {
	position: fixed;
	inset-inline: var(--gutter);
	bottom: var(--gutter);
	z-index: 60;
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: var(--space-2);
	max-width: 720px;
	margin-inline: auto;
	padding: var(--space-3);
	background: var(--pp-forest-900);
	color: var(--pp-ivory-50);
	border-radius: var(--radius-medium);
	box-shadow: 0 12px 40px rgba(32, 35, 31, 0.28);
}
.consent[hidden] { display: none; }
.consent__text {
	margin: 0;
	max-width: 46ch;
	font-size: 0.9rem;
	line-height: 1.5;
}
.consent__text a { color: var(--pp-sand-200); text-underline-offset: 3px; }
.consent__text a:hover { color: var(--pp-ivory-50); }
.consent__acciones { display: flex; gap: var(--space-1); flex-shrink: 0; }
.consent .btn--small { padding: 0.5rem 1rem; font-size: 0.85rem; }
.consent .btn--ghost { border-color: var(--pp-sage-300); color: var(--pp-ivory-50); }

@media (max-width: 560px) {
	.consent { flex-direction: column; align-items: stretch; }
	.consent__acciones { justify-content: flex-end; }
}