/* ==========================================================================
   Quebiente — estilos principales
   Los tokens (colores, fuentes, espaciados) se rellenarán con los del Figma.
   ========================================================================== */

:root {
	/* Paleta */
	--color-verde: #074F3B;
	--color-crema: #E2EFE1;
	--color-oliva: #C3D55B;
	--color-azul: #7BC7FE;
	--color-lima: #D5E449;
	--color-rosa: #FE9CC7;
	--color-verde-medio: #115C47; /* fondo de los badges */
	--color-verde-oscuro: #023527; /* fondo de la card «Misma esencia» */
	--color-lima-borde: #C3D32D; /* borde y números de los pasos */
	--color-verde-campo: #064735; /* campos del formulario y forma de la página «Contacto» */

	/* Usos */
	--color-bg: var(--color-verde);
	--color-text: var(--color-crema);
	--color-btn-bg: var(--color-oliva);
	--color-btn-text: var(--color-verde);

	/* Tipografía (fuentes en assets/fonts/fonts.css) — asignación provisional hasta ver el Figma */
	--font-heading: "Transforma Sans", system-ui, sans-serif;
	--font-body: "Aeonik", system-ui, sans-serif;
	--font-accent: "Alkaline", cursive;
	--font-accent-caps: "Alkaline Caps", cursive;

	/* Layout
	   Escritorio = «escenario» de 1920×1080 (el Figma) que se ajusta a la pantalla como un vídeo:
	   --u es 1px del Figma escalado para que quepa entero (ancho o alto, lo que limite antes)
	   y --stage-x / --stage-y centran la composición si sobra espacio.
	   Los textos tienen un tamaño mínimo para que se lean en pantallas pequeñas. */
	--u: 1px;
	--uw: 1px; /* unidad de la cabecera: solo crece (pantallas >1920), nunca encoge */
	--ux: 1px; /* unidad de las secciones que fluyen (claim, productos…): solo depende del ancho */
	--stage-x: 0px;
	--stage-y: 0px;

	--container: 1200px;
	--gutter: 16px;
	--page-x: 16px;
	--header-x: 16px;
	--header-h: 99px; /* móvil; en escritorio 42 + 50 del logo */
}

@media (min-width: 768px) {
	:root {
		--u: min(calc(100vw / 1920), calc(100vh / 1080));
		--stage-x: max(0px, calc((100vw - 1920 * var(--u)) / 2));
		--stage-y: max(0px, calc((100vh - 1080 * var(--u)) / 2));
		--uw: max(1px, calc(100vw / 1920));
		--ux: calc(100vw / 1920);
		--page-x: calc(var(--stage-x) + 50 * var(--u)); /* margen lateral de la composición */
		--header-x: calc(50 * var(--uw)); /* la cabecera siempre a todo el ancho */
		--header-h: calc(92 * var(--uw));
	}
}

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

/* Lenis (scroll suave) — estilos recomendados por la librería */
html.lenis, html.lenis body { height: auto; }
.lenis:not(.lenis-autoToggle).lenis-stopped { overflow: clip; }
.lenis.lenis-smooth [data-lenis-prevent] { overscroll-behavior: contain; }
.lenis.lenis-smooth iframe { pointer-events: none; }

body {
	margin: 0;
	overflow-x: clip; /* 100vw incluye la barra de scroll */
	font-family: var(--font-body);
	color: var(--color-text);
	background: var(--color-bg);
	-webkit-font-smoothing: antialiased;
}

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

h1, h2, h3, h4, h5, h6 { font-family: var(--font-heading); }

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

.screen-reader-text {
	position: absolute !important;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip: rect(0 0 0 0);
	white-space: nowrap;
}

/* ==========================================================================
   Utilidades y componentes
   ========================================================================== */

.text-lima { color: var(--color-lima); }

.btn {
	display: inline-block;
	padding: calc(11 * var(--u)) calc(20 * var(--u));
	border-radius: 999px;
	background: var(--color-btn-bg);
	color: var(--color-btn-text);
	font-family: var(--font-body);
	font-weight: 500;
	font-size: max(12px, calc(15 * var(--u)));
	line-height: 1.2;
	text-transform: uppercase;
	text-decoration: none;
	transition: background-color .2s;
}
.btn:hover,
.btn:focus-visible {
	background: var(--color-lima);
}

/* Enlaces de texto: solo llevan subrayado los que ya están subrayados (casilla de privacidad,
   enlaces dentro de artículos y páginas legales). Tienen una línea tenue fija y, al pasar el
   ratón, una línea completa que crece de izquierda a derecha (suave).
   Los enlaces sin subrayado (pie, migas de pan, crédito) no se subrayan al pasar el ratón. */
.contact-form__check a,
.articulo__content a {
	background:
		linear-gradient(currentColor, currentColor) 0 100% / 0 1px no-repeat,
		linear-gradient(var(--subrayado-tenue, rgba(226, 239, 225, .4)), var(--subrayado-tenue, rgba(226, 239, 225, .4))) 0 100% / 100% 1px no-repeat;
	-webkit-box-decoration-break: clone;
	box-decoration-break: clone;
	text-decoration: none;
	transition: background-size .35s cubic-bezier(.22, 1, .36, 1);
}
.contact-form__check a:hover,
.contact-form__check a:focus-visible,
.articulo__content a:hover,
.articulo__content a:focus-visible { background-size: 100% 1px, 100% 1px; }
@media (prefers-reduced-motion: reduce) {
	.contact-form__check a, .articulo__content a { transition: none; }
}
.footer__col a,
.breadcrumbs a,
.footer__credit { text-decoration: none; }

/* Hover de los enlaces sin subrayado (cambio de color suave, como el menú de la cabecera):
   - migas de pan (sobre verde): a lima;
   - pie (sobre crema, donde el lima no se leería): se atenúan. */
.breadcrumbs a,
.footer__col a,
.footer__credit { transition: color .3s, opacity .3s; }
.breadcrumbs a:hover,
.breadcrumbs a:focus-visible { color: var(--color-lima); }
.footer__col a:hover,
.footer__col a:focus-visible,
.footer__credit:hover,
.footer__credit:focus-visible { opacity: .55; }

/* ==========================================================================
   Cabecera: menú izquierdo · logo centrado · menú derecho
   ========================================================================== */

.site-header {
	/* Sombra suave para que el logo y los enlaces se lean sobre cualquier fondo */
	--header-shadow: 0 1px 10px rgba(2, 53, 39, .35);
	--header-color: var(--color-crema);
	--header-hover: var(--color-lima);
	position: fixed;
	inset: 0 0 auto;
	z-index: 10;
	display: grid;
	grid-template-columns: 1fr auto 1fr;
	align-items: start;
	padding: calc(42 * var(--uw)) var(--header-x) 0;
	pointer-events: none; /* la cabecera es transparente: solo sus enlaces capturan clics */
}
.site-header a { pointer-events: auto; }
.admin-bar .site-header { top: 32px; }
@media (max-width: 782px) { .admin-bar .site-header { top: 46px; } }

/* La cabecera es fija: el contenido empieza debajo de ella */
.site-main { padding-top: var(--header-h); }
.home .site-main { padding-top: calc(92 * var(--u)); } /* la composición de la portada usa el alto del Figma */

.site-logo {
	grid-column: 2;
	display: block;
	color: var(--header-color);
	transition: color .4s ease;
	line-height: 0;
}
.site-logo svg {
	filter: drop-shadow(0 1px 8px rgba(2, 53, 39, var(--logo-shadow, .35)));
	transition: filter .4s ease;
	width: calc(215 * var(--uw));
	height: auto;
}

.site-nav ul {
	display: flex;
	gap: calc(35 * var(--uw));
	margin: 0;
	padding: 0;
	list-style: none;
}
.site-nav--left  { grid-column: 1; grid-row: 1; }
.site-nav--right { grid-column: 3; grid-row: 1; }
.site-nav--right ul { justify-content: flex-end; }

.site-nav a {
	display: block;
	padding-top: calc(8 * var(--uw)); /* alinea el texto con la palabra «Quebiente» del logo */
	font-family: var(--font-body);
	font-weight: 500;
	font-size: calc(15 * var(--uw));
	line-height: 1.2;
	text-transform: uppercase;
	color: var(--header-color);
	text-decoration: none;
	text-shadow: var(--header-shadow);
	transition: color .4s ease, text-shadow .4s ease;
}
.site-nav a:hover,
.site-nav a:focus-visible {
	color: var(--header-hover);
}
/* Sobre el pie (crema): la cabecera pasa a verde y sin sombra (assets/js/main.js) */
.header-on-footer .site-header {
	--header-color: var(--color-verde);
	--header-hover: var(--color-verde-medio);
	--header-shadow: 0 0 0 transparent;
	--logo-shadow: 0;
}
/* La página activa NO cambia de color (preferencia del usuario) */

/* ==========================================================================
   Portada — hero
   Medidas del Figma (1920×1080) en unidades --u.
   ========================================================================== */

.hero {
	display: flex;
	flex-direction: column;
	align-items: center;
	padding: var(--stage-y) var(--page-x) calc(33 * var(--u));
	overflow-x: clip;
}

.hero__title {
	margin: calc(131 * var(--u)) 0 0;
	font-family: var(--font-heading);
	font-weight: 500;
	font-size: max(12px, calc(15 * var(--u)));
	line-height: 1.2;
	letter-spacing: 0;
	text-align: center;
	text-transform: uppercase;
}

.hero__product {
	position: relative;
	z-index: 5; /* el pack va por delante del logo grande y del texto */
	pointer-events: none; /* es fijo y está encima de todo: los clics lo atraviesan (botón de la intro) */
	width: calc(975 * var(--u));
	margin-top: calc(64 * var(--u));
}
.hero__product-shift,
.hero__product-inner { position: relative; }
/* Cada sección mueve su propia capa para que las animaciones no se pisen:
   .hero__product-inner → intro · .hero__product-shift → «Una lata» */
.hero__product img { position: relative; }

/* Círculo rosa detrás del pack (crece con el scroll) */
.hero__circle {
	position: absolute;
	top: 50%;
	left: 50%;
	width: 80%;
	aspect-ratio: 1;
	margin: -40% 0 0 -40%; /* % sobre el ancho: centra un círculo del 80% */
	border-radius: 50%;
	background: var(--color-rosa);
	transform: scale(0);
}

.hero__brand {
	position: relative;
	z-index: 2;
	width: 100%;
	margin-top: calc(-90 * var(--u)); /* el logo asoma por debajo del pack */
	color: var(--color-text);
	line-height: 0;
}
.hero__brand svg {
	width: 100%;
	height: auto;
	will-change: transform;
}

/* Tramo de scroll del círculo: solo existe si hay animación */
.circle-stage { display: none; }

@media (prefers-reduced-motion: no-preference) {
	.js .circle-stage {
		display: block;
		height: 80vh;
	}
	/* En la portada el logo de la cabecera empieza oculto: llega volando desde el logo grande */
	.js .home .site-logo .logo-word,
	.js .home .site-logo .logo-conservas { opacity: 0; }
	.js .home:not(.logo-docked) .site-logo { pointer-events: none; }
	/* La intro y «Una lata» entran con animación: ocultas hasta que GSAP las muestre */
	.js .intro > *,
	.js .lata__title,
	.js .lata__text,
	.js .feature { opacity: 0; }
}

/* ==========================================================================
   Portada — intro
   ========================================================================== */

.intro {
	position: relative;
	max-width: calc(30em + 100 * var(--u)); /* 720 de texto a 24 + márgenes */
	margin-inline: auto;
	/* mín. alto de cabecera + 40: la intro se fija arriba y no debe quedar bajo la cabecera */
	padding: max(calc(180 * var(--u)), calc(var(--header-h) + 40 * var(--u))) calc(50 * var(--u)) calc(70 * var(--u));
	text-align: center;
	font-family: var(--font-body);
	font-weight: 500;
	font-size: max(17px, calc(24 * var(--u)));
	line-height: 1.2;
}
.intro p { margin: 0 0 1.2em; }
.intro .btn { margin-top: calc(calc(26 * var(--u)) - 1.2em); } /* ~39px entre texto y botón, como en el Figma */

/* ==========================================================================
   Portada — «Una lata, una ensalada»
   Posiciones del Figma en unidades --u (+ --stage-x/y), alineadas con el pack.
   ========================================================================== */

.lata {
	position: relative;
	min-height: 100vh;
	padding: calc(var(--stage-y) + 116 * var(--u)) 0 calc(77 * var(--u));
}

.lata__title {
	margin: 0 0 0 calc(var(--stage-x) + 257 * var(--u));
	font-family: var(--font-accent);
	font-weight: 500;
	font-size: calc(96 * var(--u));
	line-height: 0.78; /* 75px a 96px, como en el Figma */
}

.lata__text {
	max-width: 27.4em; /* 410 a 15: crece con el tamaño mínimo de letra y corta igual que el Figma */
	margin: calc(55 * var(--u)) 0 0 calc(var(--stage-x) + 255 * var(--u));
	font-family: var(--font-body);
	font-weight: 500;
	font-size: max(12px, calc(15 * var(--u)));
	line-height: 1.2;
}
.lata__text p { margin: 0 0 1.2em; }
.lata__text p:last-child { margin-bottom: 0; }

.lata__features {
	display: flex;
	flex-direction: column;
	gap: calc(84 * var(--u)); /* 137 entre badges */
	margin: calc(87 * var(--u)) 0 0;
	padding: 0;
	list-style: none;
}

.feature {
	--line: calc(192 * var(--u));
	position: relative;
	display: flex;
	align-items: center;
	gap: calc(14 * var(--u));
	width: fit-content;
	height: calc(53 * var(--u));
	padding: 0 calc(36 * var(--u)) 0 calc(15 * var(--u));
	border-radius: calc(10 * var(--u));
	background: var(--color-verde-medio);
	font-family: var(--font-body);
	font-weight: 500;
	font-size: max(17px, calc(24 * var(--u)));
	line-height: 1;
	white-space: nowrap;
}
/* Sangría y largo de línea de cada badge (Figma 1920) */
.feature:nth-child(1) { margin-left: calc(var(--stage-x) + 165 * var(--u)); --line: calc(192 * var(--u)); }
.feature:nth-child(2) { margin-left: calc(var(--stage-x) + 233 * var(--u)); --line: calc(240 * var(--u)); }
.feature:nth-child(3) { margin-left: calc(var(--stage-x) + 268 * var(--u)); --line: calc(150 * var(--u)); }
.feature:nth-child(4) { margin-left: calc(var(--stage-x) + 430 * var(--u)); --line: calc(193 * var(--u)); }

.feature__dot {
	flex: none;
	width: calc(15 * var(--u));
	height: calc(15 * var(--u));
	border-radius: 50%;
	background: var(--color-lima);
}

/* Línea que sale del badge hacia el pack, con un punto al final */
.feature__line {
	position: absolute;
	top: 50%;
	left: calc(100% - calc(19 * var(--u)));
	width: var(--line);
	height: calc(1.3 * var(--u));
	background: var(--color-text);
	transform-origin: left center;
}
.feature__line::after {
	content: "";
	position: absolute;
	right: calc(-3 * var(--u));
	top: 50%;
	width: calc(7 * var(--u));
	height: calc(7 * var(--u));
	margin-top: calc(-3.5 * var(--u));
	border-radius: 50%;
	background: var(--color-text);
}

/* ==========================================================================
   Portada — frase «Comer bien también puede ser fácil.»
   En una sola línea; con animación se desplaza a la izquierda con el scroll.
   Esta sección y las siguientes fluyen con el scroll: a todo el ancho (unidad --ux).
   ========================================================================== */

.claim {
	padding: calc(160 * var(--ux)) calc(50 * var(--ux)) calc(200 * var(--ux));
	overflow-x: clip;
}

.claim__text {
	margin: 0;
	font-family: var(--font-accent);
	font-weight: 500;
	font-size: calc(208.78 * var(--ux));
	line-height: 1.1;
	will-change: transform;
}

@media (prefers-reduced-motion: no-preference) {
	.js .claim__text {
		width: max-content;
		white-space: nowrap;
	}
}

/* ==========================================================================
   Portada — «Nuestros productos» y card de producto
   ========================================================================== */

.productos {
	padding: calc(70 * var(--ux)) calc(50 * var(--ux)) calc(120 * var(--ux));
	text-align: center;
}

.productos__title {
	margin: 0;
	font-family: var(--font-accent);
	font-weight: 500;
	font-size: calc(64 * var(--ux));
	line-height: 1.1;
}

.productos__subtitle {
	margin: calc(26 * var(--ux)) 0 0;
	font-family: var(--font-body);
	font-weight: 500;
	font-size: max(12px, calc(15 * var(--ux)));
	line-height: 1.2;
}

.productos__grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: calc(20 * var(--ux));
	margin-top: calc(359 * var(--ux)); /* deja sitio a las fotos que sobresalen */
	text-align: left;
}

.product-card {
	position: relative;
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	padding: calc(212 * var(--ux)) calc(39 * var(--ux)) calc(35 * var(--ux));
	border-radius: calc(30 * var(--ux));
	color: var(--color-verde);
}
/* El color de fondo y de texto de cada card va en línea (color libre del producto, inc/productos.php) */

/* Página «Productos» */
.productos--page { padding-top: calc(108 * var(--ux)); }
.productos__intro p { margin: 0 0 1.2em; }
.productos__intro p:last-child { margin-bottom: 0; }
.productos--page .productos__grid { margin-top: calc(324 * var(--ux)); row-gap: calc(320 * var(--ux)); }

/* Foto del producto: centrada y sobresaliendo por arriba */
.product-card__img {
	position: absolute;
	left: 50%;
	height: auto;
	transform: translateX(-50%);
	pointer-events: none;
	transition:
		transform .6s cubic-bezier(.22, 1, .36, 1),
		opacity .6s ease var(--reveal-delay, 0s),
		translate .9s cubic-bezier(.22, 1, .36, 1) var(--reveal-delay, 0s);
}
/* Hover (o foco en su botón): la foto sube un poco */
.product-card:hover .product-card__img,
.product-card:focus-within .product-card__img {
	transform: translate(-50%, calc(-20 * var(--ux)));
}
@media (prefers-reduced-motion: reduce) {
	.product-card__img { transition: none; }
	.product-card:hover .product-card__img,
	.product-card:focus-within .product-card__img { transform: translateX(-50%); }
}
.product-card--pack .product-card__img { width: calc(516 * var(--ux)); top: calc(-143 * var(--ux)); }
.product-card--lata .product-card__img { width: calc(257 * var(--ux)); top: calc(-261 * var(--ux)); }

/* Izquierda: título + texto · derecha: datos con iconos */
.product-card__body {
	display: grid;
	grid-template-columns: calc(268 * var(--ux)) 1fr;
	grid-template-rows: auto 1fr;
	row-gap: calc(11 * var(--ux));
	width: 100%;
	flex: 1;
}

.product-card__title {
	grid-column: 1;
	margin: 0;
	font-family: var(--font-heading);
	font-weight: 700;
	font-size: calc(36 * var(--ux));
	line-height: 1.08;
	text-transform: uppercase;
}

.product-card__text {
	grid-column: 1;
	padding-right: calc(40 * var(--ux)); /* ~228 de ancho de texto, como en el Figma */
	font-family: var(--font-body);
	font-weight: 500;
	font-size: max(12px, calc(15 * var(--ux)));
	line-height: 1.2;
}

.product-card__specs {
	grid-column: 2;
	grid-row: 2;
	display: flex;
	flex-direction: column;
	gap: calc(14 * var(--ux)); /* 32 entre líneas */
	margin: 0;
	padding: 0;
	list-style: none;
	font-family: var(--font-body);
	font-weight: 500;
	font-size: max(12px, calc(15 * var(--ux)));
	line-height: 1.2;
}
.product-card__specs li {
	display: flex;
	align-items: center;
	gap: calc(14 * var(--ux));
}
.product-card__specs svg {
	flex: none;
	width: calc(14 * var(--ux));
	height: auto;
}

/* Toda la card es clicable: un enlace invisible la cubre; el botón queda por encima
   y conserva su propio hover (solo al pasar por el botón) */
.product-card__cover {
	position: absolute;
	inset: 0;
	z-index: 1;
	border-radius: inherit;
}
.product-card .btn-outline {
	position: relative;
	z-index: 2;
}

/* Botón con borde (dentro de las cards) */
.btn-outline {
	display: inline-flex;
	align-items: center;
	gap: calc(8 * var(--ux));
	height: calc(37 * var(--ux));
	margin-top: calc(27 * var(--ux));
	padding: 0 calc(16 * var(--ux));
	border: calc(1.3 * var(--ux)) solid currentColor;
	border-radius: 999px;
	color: inherit;
	font-family: var(--font-body);
	font-weight: 500;
	font-size: max(12px, calc(15 * var(--ux)));
	line-height: 1;
	text-transform: uppercase;
	text-decoration: none;
	transition: background-color .2s, color .2s;
}
.btn-outline svg {
	width: calc(14 * var(--ux));
	height: auto;
}
.btn-outline:hover,
.btn-outline:focus-visible {
	background: var(--color-verde);
	color: var(--color-crema);
}
/* En cards oscuras (texto crema) el hover se invierte: fondo crema y texto verde */
.product-card[style*="#E2EFE1"] .btn-outline:hover,
.product-card[style*="#E2EFE1"] .btn-outline:focus-visible {
	background: var(--color-crema);
	color: var(--color-verde);
}

/* ==========================================================================
   Selector de idioma (GTranslate, botón flotante abajo a la derecha)
   El widget mete su propio CSS; estas reglas tienen más especificidad (.gtranslate_wrapper)
   y lo adaptan al diseño: píldora crema como el botón de llamar, Aeonik Medium en
   mayúsculas como los enlaces de la cabecera, banderas redondas y hover lima.
   Sobre el pie (crema) pasa a verde: body.idioma-on-footer (main.js).
   ========================================================================== */

.gtranslate_wrapper #gt_float_wrapper {
	right: var(--header-x) !important; /* alineado con el menú de la cabecera (inline: 20px) */
	bottom: calc(30 * var(--uw)) !important;
	z-index: 9 !important;             /* por debajo de la cabecera */
}
.gtranslate_wrapper .gt_float_switcher {
	--gt-bg: var(--color-crema);
	--gt-fg: var(--color-verde);
	overflow: hidden;
	border-radius: max(18px, calc(20 * var(--uw)));
	background: var(--gt-bg);
	color: var(--gt-fg);
	box-shadow: 0 1px 10px rgba(2, 53, 39, .35); /* la misma sombra suave que la cabecera */
	font-family: var(--font-body);
	font-weight: 500;
	font-size: max(12px, calc(14 * var(--uw)));
	line-height: 1.2;
	letter-spacing: .02em;
	transition: background-color .4s, color .4s;
}
.gtranslate_wrapper #gt_float_wrapper { transition: opacity .4s, visibility .4s; }
.idioma-oculto .gtranslate_wrapper #gt_float_wrapper { opacity: 0; visibility: hidden; }
.idioma-on-footer .gtranslate_wrapper .gt_float_switcher {
	--gt-bg: var(--color-verde);
	--gt-fg: var(--color-crema);
	box-shadow: none;
}
.gtranslate_wrapper .gt_float_switcher .gt-selected { background: transparent; }
.gtranslate_wrapper .gt_float_switcher .gt-selected .gt-current-lang,
.gtranslate_wrapper .gt_float_switcher .gt_options a {
	display: flex;
	align-items: center;
	gap: max(7px, calc(8 * var(--uw)));
	padding: max(6px, calc(7 * var(--uw))) max(14px, calc(16 * var(--uw))) max(6px, calc(7 * var(--uw))) max(6px, calc(7 * var(--uw)));
	color: inherit;
	font-weight: 500;
	text-transform: uppercase;
}
.gtranslate_wrapper .gt_float_switcher .gt-selected .gt-current-lang span.gt-lang-code { top: 0; }
.gtranslate_wrapper .gt_float_switcher img {
	width: max(22px, calc(24 * var(--uw)));
	height: max(22px, calc(24 * var(--uw)));
	margin: 0;
	border-radius: 50%;
	object-fit: cover;
}
/* Flecha en el color del texto (la del widget es gris fijo) */
.gtranslate_wrapper .gt_float_switcher .gt-selected .gt-current-lang span.gt_float_switcher-arrow {
	width: 10px;
	height: 10px;
	background: currentColor;
	-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 285 285'%3E%3Cpath d='M282 76.5l-14.2-14.3a9 9 0 0 0-13.1 0L142.5 174.4 30.3 62.2a9 9 0 0 0-13.2 0L3 76.5a9 9 0 0 0 0 13.1l133 133a9 9 0 0 0 13.1 0l133-133a9 9 0 0 0 0-13z'/%3E%3C/svg%3E") center / contain no-repeat;
	mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 285 285'%3E%3Cpath d='M282 76.5l-14.2-14.3a9 9 0 0 0-13.1 0L142.5 174.4 30.3 62.2a9 9 0 0 0-13.2 0L3 76.5a9 9 0 0 0 0 13.1l133 133a9 9 0 0 0 13.1 0l133-133a9 9 0 0 0 0-13z'/%3E%3C/svg%3E") center / contain no-repeat;
}
.gtranslate_wrapper .gt_float_switcher .gt_options a { transition: background-color .3s, color .3s; }
.gtranslate_wrapper .gt_float_switcher .gt_options a:hover,
.gtranslate_wrapper .gt_float_switcher .gt_options a:focus-visible {
	background: var(--color-lima);
	color: var(--color-verde);
}
.gtranslate_wrapper .gt_float_switcher .gt_options::-webkit-scrollbar-track { background: transparent; }

/* Cookies (plugin GDPR Cookie Compliance): el aviso y el botón de ajustes, alineados con los
   márgenes de la página igual que el selector de idioma (el plugin los pega a 15-20px del borde) */
#moove_gdpr_cookie_info_bar.gdpr_infobar_postion_bottom_left {
	left: var(--header-x) !important;
	bottom: calc(30 * var(--uw)) !important;
	max-width: calc(100% - 2 * var(--header-x)) !important;
}
#moove_gdpr_save_popup_settings_button {
	left: var(--header-x) !important;
	bottom: calc(30 * var(--uw)) !important;
	transition: opacity .4s, visibility .4s;
}
.cookies-oculto #moove_gdpr_save_popup_settings_button { opacity: 0; visibility: hidden; }

/* La barra de Google Translate que aparece al traducir no debe empujar la página */
body { top: 0 !important; }
.skiptranslate iframe, #goog-gt-tt, .goog-te-balloon-frame { display: none !important; }

/* ==========================================================================
   Portada — «Nuevo formato. Misma esencia.» (escena fija)
   Vertical en --u (cabe en pantalla); la card va a todo el ancho (50·ux de margen).
   Sin JS / con «reducir movimiento» se ve el estado final.
   ========================================================================== */

.esencia {
	--card-x: calc(50 * var(--ux));
	/* card centrada en la pantalla completa (la cabecera es transparente y no cuenta) */
	--card-top: calc(50vh - 340 * var(--u));
	--card-h: calc(680 * var(--u));
	position: relative;
	height: 100vh;
	overflow-x: clip; /* las latas y los textos esperan fuera de pantalla para entrar: que no ensanchen la página */
}

/* Textos a los lados de la foto inicial (centrados en cada hueco) */
.esencia__side {
	position: absolute;
	top: 50vh; /* a la altura del centro de la foto inicial, que está centrada en pantalla */
	width: calc(50% - 380 * var(--u));
	margin: 0;
	transform: translateY(-50%);
	font-family: var(--font-accent);
	font-weight: 500;
	font-size: calc(64 * var(--u));
	line-height: 0.86;
	text-align: center;
	opacity: 0; /* estado final: tapados por la card */
}
.esencia__side--left  { left: 0; }
.esencia__side--right { right: 0; }

.esencia__card,
.esencia__content {
	position: absolute;
	left: var(--card-x);
	right: var(--card-x);
	top: var(--card-top);
	height: var(--card-h);
}

.esencia__card {
	overflow: hidden;
	border-radius: calc(30 * var(--u));
	background: var(--color-verde-oscuro);
}
.esencia__photo {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	opacity: 0; /* estado final: ya es el fondo de la card */
}

.esencia__text {
	position: absolute;
	top: 0;
	bottom: 0;
	left: calc(120 * var(--u));
	display: flex;
	flex-direction: column;
	justify-content: center;
}
.esencia__title {
	margin: 0;
	font-family: var(--font-accent);
	font-weight: 500;
	font-size: calc(64 * var(--u));
	line-height: 0.86;
}
.esencia__body {
	max-width: 20.4em; /* ~305 a 15px */
	margin-top: calc(33 * var(--u));
	font-family: var(--font-body);
	font-weight: 500;
	font-size: max(12px, calc(15 * var(--u)));
	line-height: 1.2;
}
.esencia__body p { margin: 0 0 1.2em; }
.esencia__body p:last-child { margin-bottom: 0; }

/* Latas abiertas: ancladas al borde derecho de la card, cada una encima de la anterior */
.esencia__can {
	position: absolute;
	top: calc(86 * var(--u));
	width: calc(510 * var(--u));
	height: auto;
}
.esencia__can--zanahoria { left: calc(100% - 1195 * var(--u)); }
.esencia__can--remolacha { left: calc(100% - 865 * var(--u)); }
.esencia__can--champinon { left: calc(100% - 475 * var(--u)); }

.esencia__badge {
	position: absolute;
	top: calc(581 * var(--u));
	left: calc(100% - 440 * var(--u));
	width: calc(275 * var(--u));
	line-height: 0;
}
.esencia__badge svg { width: 100%; height: auto; }

/* ==========================================================================
   Portada — «¿Preparado para complicarte poquísimo?» (sección que fluye, --ux)
   Columna izquierda sticky; a la derecha los 3 pasos.
   ========================================================================== */

.pasos {
	display: grid;
	grid-template-columns: calc(730 * var(--ux)) calc(440 * var(--ux));
	align-items: start;
	padding: calc(178 * var(--ux)) 0 calc(120 * var(--ux)) calc(393 * var(--ux));
}

.pasos__intro {
	position: sticky;
	top: calc(178 * var(--ux)); /* se queda en su posición del Figma mientras pasan las cards */
}

.pasos__img {
	width: calc(560 * var(--ux));
	height: auto;
	margin-left: calc(-48 * var(--ux)); /* las hojas sobresalen a la izquierda del texto */
}

.pasos__title {
	margin: calc(47 * var(--ux)) 0 0;
	font-family: var(--font-accent);
	font-weight: 500;
	font-size: calc(64 * var(--ux));
	line-height: 0.86;
}

.pasos__text {
	margin: calc(61 * var(--ux)) 0 0;
	font-family: var(--font-body);
	font-weight: 500;
	font-size: max(17px, calc(24 * var(--ux)));
	line-height: 1.2;
}

.pasos__list {
	display: flex;
	flex-direction: column;
	gap: calc(24 * var(--ux));
	margin: calc(207 * var(--ux)) 0 0; /* las cards empiezan a la altura del título */
	padding: 0;
	list-style: none;
}

.paso {
	display: flex;
	align-items: center;
	height: calc(198 * var(--ux));
	padding-left: calc(47 * var(--ux));
	border: 1px solid var(--color-lima-borde);
	border-radius: calc(30 * var(--ux));
}

.paso__num {
	flex: none;
	width: calc(192 * var(--ux)); /* el texto empieza a 239 del borde */
	font-family: var(--font-accent);
	font-weight: 500;
	font-size: calc(128 * var(--ux));
	line-height: 1;
	color: var(--color-lima-borde);
}

.paso__text {
	font-family: var(--font-body);
	font-weight: 500;
	font-size: max(20px, calc(36 * var(--ux)));
	line-height: 1;
}

/* ==========================================================================
   Portada — «¡Españoles y orgullosos de ello!» (sección que fluye, --ux)
   ========================================================================== */

.origen {
	display: grid;
	grid-template-columns: calc(756 * var(--ux)) calc(516 * var(--ux));
	column-gap: calc(162 * var(--ux)); /* el texto empieza en 1122 */
	align-items: start; /* el título arranca a la altura del borde superior del mapa */
	padding: calc(200 * var(--ux)) 0 calc(200 * var(--ux)) calc(204 * var(--ux));
}

.origen__map {
	position: relative;
	line-height: 0;
}
.origen__map > svg { width: 100%; height: auto; }

/* Etiqueta «Producto español» encima del mapa */
.origen__badge {
	position: absolute;
	top: calc(85 * var(--ux));
	left: calc(6 * var(--ux));
	width: calc(367 * var(--ux));
}
.origen__badge svg {
	width: 100%;
	height: auto;
	transform-origin: 50% 50%;
	animation: flotar 4s ease-in-out infinite;
}

/* Movimiento continuo suave: flota y se balancea un poco */
@keyframes flotar {
	0%, 100% { transform: translateY(0) rotate(0deg); }
	25%      { transform: translateY(calc(-10 * var(--ux))) rotate(-1.5deg); }
	50%      { transform: translateY(calc(-4 * var(--ux))) rotate(0.5deg); }
	75%      { transform: translateY(calc(-12 * var(--ux))) rotate(1.5deg); }
}
@media (prefers-reduced-motion: reduce) {
	.origen__badge svg { animation: none; }
}

.origen__title {
	margin: 0;
	font-family: var(--font-accent);
	font-weight: 500;
	font-size: calc(64 * var(--ux));
	line-height: 0.86;
}

.origen__text {
	max-width: 21.5em; /* ~516 a 24px */
	margin-top: calc(50 * var(--ux));
	font-family: var(--font-body);
	font-weight: 500;
	font-size: max(17px, calc(24 * var(--ux)));
	line-height: 1.2;
}
.origen__text p { margin: 0 0 1.2em; }
.origen__text p:last-child { margin-bottom: 0; }

/* ==========================================================================
   Portada — «Quebiente, más cerca de lo que piensas» (foto a pantalla completa)
   ========================================================================== */

.donde {
	position: relative;
	display: flex;
	margin-top: calc(160 * var(--ux)); /* separación con la sección del mapa */
	align-items: center; /* card centrada en vertical */
	min-height: 100vh;
	padding: calc(60 * var(--ux)) calc(50 * var(--ux));
	overflow: hidden;
}

.donde__bg {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center;
}

.donde__card {
	position: relative;
	width: calc(645 * var(--ux));
	padding: calc(122 * var(--ux)) calc(58 * var(--ux)) calc(96 * var(--ux)) calc(67 * var(--ux));
	border-radius: calc(30 * var(--ux));
	background: var(--color-crema);
	color: var(--color-verde);
}

/* Óvalo «Conservas» sobresaliendo por arriba */
.donde__ovalo {
	position: absolute;
	top: calc(-39 * var(--ux));
	left: calc(67 * var(--ux));
	width: calc(194 * var(--ux));
	line-height: 0;
}
.donde__ovalo svg { width: 100%; height: auto; }

.donde__title {
	margin: 0;
	font-family: var(--font-accent);
	font-weight: 500;
	font-size: calc(64 * var(--ux));
	line-height: 0.86;
}

.donde__text {
	margin: calc(50 * var(--ux)) 0 0;
	font-family: var(--font-body);
	font-weight: 500;
	font-size: max(17px, calc(24 * var(--ux)));
	line-height: 1.2;
}

/* ==========================================================================
   Portada — «Nuestro blog» y card de artículo (sección que fluye, --ux)
   ========================================================================== */

.blog-home {
	padding: calc(200 * var(--ux)) calc(50 * var(--ux)) calc(120 * var(--ux));
	text-align: center;
}

.blog-home__pretitle {
	margin: 0;
	font-family: var(--font-body);
	font-weight: 500;
	font-size: max(12px, calc(15 * var(--ux)));
	line-height: 1.2;
	letter-spacing: 0.19em;
	text-transform: uppercase;
}

.blog-home__title {
	margin: calc(1 * var(--ux)) 0 0;
	font-family: var(--font-accent);
	font-weight: 500;
	font-size: calc(64 * var(--ux));
	line-height: 1.1;
}

.blog-home__subtitle {
	margin: calc(32 * var(--ux)) 0 0;
	font-family: var(--font-body);
	font-weight: 500;
	font-size: max(12px, calc(15 * var(--ux)));
	line-height: 1.2;
}

.blog-home__grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: calc(20 * var(--ux));
	margin-top: calc(70 * var(--ux));
	text-align: left;
}

.blog-home .btn { margin-top: calc(57 * var(--ux)); }

/* Página del blog: foto a 70vh, título, introducción y listado (fluye, --ux) */
.blog-page {
	padding: calc(24 * var(--ux)) calc(50 * var(--ux)) 0;
	text-align: center;
}
.blog-page__hero {
	overflow: hidden;
	height: 70vh;
	border-radius: calc(30 * var(--ux));
}
.blog-page__hero { position: relative; }
.blog-page__img { width: 100%; height: 100%; object-fit: cover; }
/* Con parallax la foto es más alta que su caja y arranca subida: al bajar, se mueve más
   despacio que el scroll (main.js, data-parallax) sin que asome el fondo */
.js .blog-page__img[data-parallax] { position: absolute; top: -25%; left: 0; height: 125%; will-change: transform; }
.ficha__img[data-parallax] { will-change: transform; }
@media (prefers-reduced-motion: reduce) {
	.js .blog-page__img[data-parallax] { position: static; height: 100%; }
}
.blog-page__title {
	margin: calc(78 * var(--ux)) 0 0;
	font-family: var(--font-accent);
	font-weight: 500;
	font-size: calc(64 * var(--ux));
	line-height: 1.1;
}
.blog-page__intro {
	margin-top: calc(31 * var(--ux));
	font-family: var(--font-body);
	font-weight: 500;
	font-size: max(16px, calc(20 * var(--ux)));
	line-height: 1.2;
}
.blog-page__intro p { margin: 0 0 1.2em; }
.blog-page__intro p:last-child { margin-bottom: 0; }
.blog-page__grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: calc(180 * var(--ux)) calc(20 * var(--ux));
	margin-top: calc(85 * var(--ux)); /* mismo hueco visual que entre la foto y el título (~86) */
	text-align: left;
}
.blog-page__empty { margin-top: calc(80 * var(--ux)); }

/* Paginación del blog */
.blog-page .pagination { margin-top: calc(80 * var(--ux)); }
.blog-page .nav-links {
	display: flex;
	justify-content: center;
	gap: calc(24 * var(--ux));
	font-family: var(--font-body);
	font-weight: 500;
	font-size: max(14px, calc(15 * var(--ux)));
	text-transform: uppercase;
}
.blog-page .page-numbers { color: inherit; text-decoration: none; }
.blog-page .page-numbers.current { opacity: .5; }

/* Artículo del blog: migas de pan, título, foto y texto (fluye, --ux).
   Las migas de pan comparten estilo con la ficha de producto (.breadcrumbs). */
.articulo__title {
	max-width: calc(700 * var(--ux));
	margin: calc(60 * var(--ux)) auto 0;
	font-family: var(--font-accent);
	font-weight: 500;
	font-size: calc(48 * var(--ux));
	line-height: 1.17;
	text-align: center;
}
.articulo__media {
	overflow: hidden;
	width: calc(947 * var(--ux));
	aspect-ratio: 947 / 800;
	margin: calc(107 * var(--ux)) auto 0;
	border-radius: calc(30 * var(--ux));
}
.articulo__img { width: 100%; height: 100%; object-fit: cover; }

.articulo__content {
	width: calc(580 * var(--ux));
	margin: calc(110 * var(--ux)) auto 0;
	font-family: var(--font-body);
	font-weight: 500;
	font-size: max(16px, calc(20 * var(--ux)));
	line-height: 1.2;
}
.articulo__content > * { margin: 0 0 1.2em; }
.articulo__content > :last-child { margin-bottom: 0; }
.articulo__content h2 {
	margin: calc(110 * var(--ux)) 0 calc(45 * var(--ux));
	font-family: var(--font-body);
	font-size: max(19px, calc(24 * var(--ux)));
	font-weight: 700;
	line-height: 1.2;
	color: var(--color-lima-borde);
}
.articulo__content > h2:first-child { margin-top: 0; }
.articulo__content h3 {
	font: inherit;
	text-decoration: underline;
	text-decoration-thickness: 1px;
	text-underline-offset: .2em;
}
.articulo__content ul,
.articulo__content ol { padding-left: 1.5em; }
.articulo__content a { color: inherit; }
.articulo__content img { max-width: 100%; height: auto; border-radius: calc(30 * var(--ux)); }

/* Páginas genéricas (legales): columna más ancha, sin foto; tablas con el borde de las cajas de la ficha */
.articulo--pagina .articulo__title { max-width: calc(900 * var(--ux)); }
.articulo--pagina .articulo__content { width: calc(860 * var(--ux)); margin-top: calc(90 * var(--ux)); }
.articulo__content figure { margin: 0 0 1.2em; }
.articulo__content .wp-block-table { overflow-x: auto; }
.articulo__content table {
	width: 100%;
	border-collapse: collapse;
	font-size: max(14px, calc(16 * var(--ux)));
	line-height: 1.3;
}
.articulo__content th,
.articulo__content td {
	padding: .7em .9em;
	border: 1px solid rgba(226, 239, 225, .35);
	text-align: left;
	vertical-align: top;
}
.articulo__content th { color: var(--color-lima-borde); font-weight: 700; }
.articulo__content code { font-size: .9em; overflow-wrap: anywhere; }

/* Página «Contacto» (fluye, --ux): foto a la izquierda sobre la forma oscura, contenido a la derecha */
.contacto {
	position: relative;
	min-height: calc(1078 * var(--ux)); /* hasta 1170 del Figma: el pie sube 80 y tapa el final */
	padding: calc(265 * var(--ux)) 0 calc(200 * var(--ux));
}
.contacto__forma {
	position: absolute;
	left: 0;
	bottom: 0;
	width: calc(817 * var(--ux));
	height: calc(750 * var(--ux));
	color: var(--color-verde-campo);
}
.contacto__forma svg { display: block; width: 100%; height: 100%; }
.contacto__img {
	position: absolute;
	top: calc(174 * var(--ux));
	left: calc(47 * var(--ux));
	width: calc(1003 * var(--ux));
	max-width: none;
	height: auto;
	pointer-events: none;
}
.contacto__body {
	position: relative;
	width: calc(594 * var(--ux));
	margin-left: calc(1163 * var(--ux));
	scroll-margin-top: calc(var(--header-h) + 40px);
}
.contacto__title {
	margin: 0;
	font-family: var(--font-accent);
	font-weight: 500;
	font-size: calc(64 * var(--ux));
	line-height: 1.1;
}
.contacto__text {
	margin-top: calc(30 * var(--ux));
	font-family: var(--font-body);
	font-weight: 500;
	font-size: max(12px, calc(15 * var(--ux)));
	line-height: 1.2;
}
.contacto__text p { margin: 0 0 1.2em; }
.contacto__text p:last-child { margin-bottom: 0; }
.contacto__tel {
	display: inline-flex;
	align-items: center;
	gap: calc(9 * var(--ux));
	height: calc(36 * var(--ux));
	margin-top: calc(30 * var(--ux));
	padding: 0 calc(16 * var(--ux)) 0 calc(4 * var(--ux));
	border-radius: 999px;
	background: var(--color-crema);
	color: var(--color-verde);
	font-family: var(--font-body);
	font-weight: 500;
	font-size: max(14px, calc(15 * var(--ux)));
	text-decoration: none;
	transition: background-color .3s;
}
.contacto__tel:hover,
.contacto__tel:focus-visible { background: var(--color-lima); }
.contacto__tel-icon {
	display: grid;
	place-items: center;
	width: calc(28 * var(--ux));
	height: calc(28 * var(--ux));
	min-width: 24px;
	min-height: 24px;
	border-radius: 50%;
	background: var(--color-lima-borde);
}
.contacto__tel-icon svg { display: block; width: max(14px, calc(16 * var(--ux))); height: max(14px, calc(16 * var(--ux))); }
.contacto .contact-form { margin-top: calc(31 * var(--ux)); }

/* Ficha de producto — «Ideas para disfrutarla»: mismas cards que el blog de la portada */
.ideas {
	padding: calc(145 * var(--ux)) calc(50 * var(--ux)) 0;
	text-align: center;
}
.ideas__title {
	margin: 0;
	font-family: var(--font-accent);
	font-weight: 500;
	font-size: calc(64 * var(--ux));
	line-height: 1.1;
}
.ideas__grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: calc(20 * var(--ux));
	margin-top: calc(81 * var(--ux));
	text-align: left;
}
.ideas .btn { margin-top: calc(57 * var(--ux)); }

.post-card__link {
	display: block;
	color: inherit;
	text-decoration: none;
}
.post-card__media {
	overflow: hidden;
	aspect-ratio: 593 / 489;
	border-radius: calc(30 * var(--ux));
}
.post-card__img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform .6s cubic-bezier(.22, 1, .36, 1);
}
.post-card__link:hover .post-card__img,
.post-card__link:focus-visible .post-card__img { transform: scale(1.04); }
@media (prefers-reduced-motion: reduce) {
	.post-card__img { transition: none; }
}

.post-card__title {
	max-width: 21em; /* ~500 a 24px */
	margin: calc(35 * var(--ux)) 0 0;
	font-family: var(--font-body);
	font-weight: 500;
	font-size: max(17px, calc(24 * var(--ux)));
	line-height: 1.2;
}

/* ==========================================================================
   Pie de página: contacto + foto · logo y columnas · Kit Digital (fluye, --ux)
   ========================================================================== */

.site-footer {
	position: relative;
	margin-top: calc(240 * var(--ux)); /* separación con la última sección */
	overflow: hidden; /* la foto de verduras se corta por la derecha */
	border-radius: calc(80 * var(--ux)) calc(80 * var(--ux)) 0 0;
	background: var(--color-crema);
	color: var(--color-verde);
}
.site-footer a { color: inherit; }

.footer__top {
	position: relative;
	padding: calc(225 * var(--ux)) calc(50 * var(--ux)) 0;
}

.footer__contact {
	position: relative;
	z-index: 1;
	width: calc(594 * var(--ux));
	scroll-margin-top: calc(var(--header-h) + 40px);
}

.footer__img {
	position: absolute;
	top: calc(101 * var(--ux));
	left: calc(959 * var(--ux));
	width: calc(1318 * var(--ux));
	max-width: none;
	height: auto;
	pointer-events: none;
}

.footer__title {
	margin: 0;
	font-family: var(--font-accent);
	font-weight: 500;
	font-size: calc(64 * var(--ux));
	line-height: 1.1;
}

.footer__subtitle {
	margin: calc(30 * var(--ux)) 0 0;
	font-family: var(--font-body);
	font-weight: 500;
	font-size: max(12px, calc(15 * var(--ux)));
	line-height: 1.2;
}

/* Formulario */
.contact-form { margin-top: calc(36 * var(--ux)); }
.contact-form__trap { position: absolute; left: -9999px; }

.contact-form__grid {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: calc(19 * var(--ux)) calc(20 * var(--ux));
}
.contact-form__field { display: block; }
.contact-form__field--full { grid-column: 1 / -1; }

.contact-form input[type="text"],
.contact-form input[type="tel"],
.contact-form input[type="email"],
.contact-form textarea {
	display: block;
	width: 100%;
	height: calc(50 * var(--ux));
	padding: 0 calc(21 * var(--ux));
	border: 0;
	border-radius: calc(10 * var(--ux));
	background: #fff;
	color: var(--color-verde);
	font-family: var(--font-body);
	font-weight: 500;
	font-size: max(14px, calc(15 * var(--ux)));
	line-height: 1.2;
	outline: 0;
	transition: box-shadow .2s;
}
.contact-form textarea {
	height: calc(126 * var(--ux));
	padding-top: calc(16 * var(--ux));
	resize: none; /* tamaño fijo */
}
.contact-form ::placeholder { color: var(--color-verde); opacity: 1; }
.contact-form input:focus-visible,
.contact-form textarea:focus-visible { box-shadow: 0 0 0 2px var(--color-verde); }

/* Casilla de privacidad */
.contact-form__check {
	display: flex;
	align-items: center;
	gap: calc(10 * var(--ux));
	margin-top: calc(19 * var(--ux));
	font-family: var(--font-body);
	font-weight: 500;
	font-size: max(12px, calc(15 * var(--ux)));
	line-height: 1.2;
	cursor: pointer;
}
.contact-form__check input {
	flex: none;
	appearance: none;
	width: calc(18 * var(--ux));
	height: calc(18 * var(--ux));
	min-width: 14px;
	min-height: 14px;
	margin: 0;
	border: 1.3px solid var(--color-verde);
	border-radius: calc(4 * var(--ux));
	background: #fff;
	cursor: pointer;
}
.contact-form__check input:checked {
	background: var(--color-verde) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M2.5 6.2l2.3 2.3 4.7-4.9' fill='none' stroke='%23E2EFE1' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 80% no-repeat;
}
.contact-form__check input:focus-visible { outline: 2px solid var(--color-verde); outline-offset: 2px; }
/* Enlace a la privacidad: subrayado tenue en verde sobre el pie crema (efecto en «Enlaces de texto») */
.contact-form { --subrayado-tenue: rgba(7, 79, 59, .35); }
.contact-form--dark { --subrayado-tenue: rgba(226, 239, 225, .4); }

.contact-form__msg {
	margin: calc(16 * var(--ux)) 0 0;
	font-family: var(--font-body);
	font-weight: 500;
	font-size: max(12px, calc(15 * var(--ux)));
}
.contact-form__msg--error { color: #B3261E; }

.contact-form .btn { margin-top: calc(19 * var(--ux)); }

/* Botones en secciones que fluyen: escalan con el ancho (--ux), no con el alto de la pantalla */
.blog-home .btn,
.ideas .btn,
.btn--dark {
	padding: calc(11 * var(--ux)) calc(20 * var(--ux));
	font-size: max(14px, calc(15 * var(--ux)));
}

/* Botón oscuro (Enviar) */
.btn--dark {
	display: inline-flex;
	align-items: center;
	height: calc(38 * var(--ux));
	padding: 0 calc(21 * var(--ux));
	border: 0;
	background: var(--color-verde);
	color: var(--color-crema);
	text-transform: none;
	cursor: pointer;
}
.btn--dark:hover,
.btn--dark:focus-visible { background: var(--color-verde-medio); }

/* Botón crema (Enviar sobre fondo verde) */
.btn--light {
	display: inline-flex;
	align-items: center;
	height: calc(37 * var(--ux));
	padding: 0 calc(21 * var(--ux));
	border: 0;
	background: var(--color-crema);
	color: var(--color-verde);
	font-size: max(14px, calc(15 * var(--ux)));
	text-transform: none;
	cursor: pointer;
}
.btn--light:hover,
.btn--light:focus-visible { background: var(--color-lima); }

/* Formulario sobre fondo verde (página «Contacto») */
.contact-form--dark input[type="text"],
.contact-form--dark input[type="tel"],
.contact-form--dark input[type="email"],
.contact-form--dark textarea { background: var(--color-verde-campo); color: var(--color-crema); }
.contact-form--dark ::placeholder { color: var(--color-crema); }
.contact-form--dark input:focus-visible,
.contact-form--dark textarea:focus-visible { box-shadow: 0 0 0 1px var(--color-crema); }
.contact-form--dark .contact-form__check input { border-color: var(--color-crema); background-color: transparent; }
.contact-form--dark .contact-form__check input:checked {
	background: var(--color-crema) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M2.5 6.2l2.3 2.3 4.7-4.9' fill='none' stroke='%23074F3B' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 80% no-repeat;
}
.contact-form--dark .contact-form__check input:focus-visible { outline-color: var(--color-crema); }
.contact-form__check a { color: inherit; }
.contact-form--dark .contact-form__msg--error { color: var(--color-rosa); }

/* Pie sin formulario (página «Contacto»): sube 80 para que sus esquinas redondeadas
   tapen el final de la foto, que queda «pegada» al pie */
.site-footer.site-footer--simple { z-index: 2; margin-top: calc(-80 * var(--ux)); }
.site-footer--simple .footer__bottom { margin-top: 0; padding-top: calc(120 * var(--ux)); }

/* Logo + columnas */
.footer__bottom {
	position: relative;
	z-index: 1;
	display: flex;
	justify-content: space-between;
	align-items: flex-end; /* el logo, alineado abajo con el final de las columnas (Kit Digital) */
	margin-top: calc(186 * var(--ux)); /* 223 del Figma menos la fila de la casilla de privacidad */
	padding: 0 calc(50 * var(--ux)) calc(60 * var(--ux));
}

.footer__logo { display: block; line-height: 0; color: var(--color-verde); }
.footer__logo svg { width: calc(226 * var(--ux)); height: auto; }

.footer__cols {
	display: grid;
	grid-template-columns: calc(294 * var(--ux)) auto;
	width: calc(440 * var(--ux)); /* de «Contacto» al final de «Páginas» */
	font-family: var(--font-body);
	font-weight: 500;
	font-size: max(12px, calc(15 * var(--ux)));
	line-height: 1.45; /* más aire entre las filas de las columnas (en el Figma 1.2) */
}
.footer__heading {
	margin: 0 0 calc(15 * var(--ux));
	font-family: var(--font-body);
	font-weight: 900; /* Aeonik Black */
	font-size: max(12px, calc(15 * var(--ux)));
	line-height: 1.2;
	text-transform: uppercase;
}
.footer__col p { margin: 0 0 1.2em; }
.footer__col a { text-decoration: none; }
.footer__col ul { margin: 0; padding: 0; list-style: none; }
.footer__col nav + nav { margin-top: 1.2em; }

.footer__credit {
	grid-column: 1 / -1;
	justify-self: start;
	margin-top: calc(58 * var(--ux));
	text-decoration: none;
}
.footer__arrow {
	display: inline-block;
	font-size: 1.45em; /* la flecha de la fuente, más grande */
	line-height: 0;
	vertical-align: -0.12em;
	transition: transform .35s cubic-bezier(.22, 1, .36, 1);
}
.footer__credit:hover .footer__arrow,
.footer__credit:focus-visible .footer__arrow { transform: translate(2px, -2px); }

/* Franja Kit Digital: debajo de las columnas, con su mismo ancho */
.footer__kit {
	grid-column: 1 / -1;
	margin-top: calc(40 * var(--ux));
	line-height: 0;
}
.footer__kit img { width: 100%; height: auto; }

/* Entrada de «Nuestros productos»: título, subtítulo, cards escalonadas y la foto
   cayendo en su card. home-scroll.js añade .is-in al entrar en pantalla.
   Se usa la propiedad `translate` (no `transform`) para no pisar el hover de la foto. */
@media (prefers-reduced-motion: no-preference) {
	.js .productos__title,
	.js .productos__subtitle,
	.js .product-card {
		opacity: 0;
		translate: 0 calc(60 * var(--ux));
		transition:
			opacity .9s ease var(--reveal-delay, 0s),
			translate 1.1s cubic-bezier(.22, 1, .36, 1) var(--reveal-delay, 0s);
	}
	.js .product-card__img {
		opacity: 0;
		translate: 0 calc(-80 * var(--ux));
	}
	.js .productos__subtitle { --reveal-delay: .12s; }
	.js .product-card:nth-child(2) { --reveal-delay: .15s; }
	.js .product-card:nth-child(3) { --reveal-delay: .3s; }
	/* la foto entra a la vez que su card (hereda su retraso), un poco más rápida */

	.js .home .is-in,
	.js .productos .is-in,
	.js .productos .is-in .product-card__img {
		opacity: 1;
		translate: 0 0;
	}

	/* «Misma esencia»: la foto crece con un fundido y los textos llegan desde los lados.
	   (La escena fija anima clip-path y la opacidad de .esencia__side: aquí se usan
	   `scale`/`translate` y un span interior para no pisarla.) */
	.js .home .esencia__card {
		opacity: 0;
		scale: .9;
		transition: opacity 1s ease, scale 1.2s cubic-bezier(.22, 1, .36, 1);
	}
	.js .home .esencia__side-in {
		display: block;
		opacity: 0;
		translate: calc(-80 * var(--u)) 0;
		transition: opacity 1s ease .25s, translate 1.2s cubic-bezier(.22, 1, .36, 1) .25s;
	}
	.js .home .esencia__side--right .esencia__side-in { translate: calc(80 * var(--u)) 0; }
	.js .home .esencia.is-in .esencia__card { opacity: 1; scale: 1; }
	.js .home .esencia.is-in .esencia__side-in { opacity: 1; translate: 0 0; }

	/* Pasos: zanahoria desde la izquierda, título y texto suben, las 3 cards a la vez */
	.js .home .pasos__img,
	.js .home .pasos__title,
	.js .home .pasos__text,
	.js .home .paso {
		opacity: 0;
		translate: 0 calc(50 * var(--ux));
		transition:
			opacity .8s ease var(--reveal-delay, 0s),
			translate 1s cubic-bezier(.22, 1, .36, 1) var(--reveal-delay, 0s);
	}
	.js .home .pasos__img { translate: calc(-120 * var(--ux)) 0; }
	.js .home .pasos__title { --reveal-delay: .1s; }
	.js .home .pasos__text { --reveal-delay: .2s; }
	.js .home .pasos__intro.is-in > *,
	.js .home .pasos__list.is-in .paso { opacity: 1; translate: 0 0; }

	/* Origen: mapa desde la izquierda, etiqueta con rebote, título y párrafos escalonados */
	.js .home .origen__map > svg,
	.js .home .origen__title,
	.js .home .origen__text p {
		opacity: 0;
		translate: 0 calc(50 * var(--ux));
		transition:
			opacity .8s ease var(--reveal-delay, 0s),
			translate 1s cubic-bezier(.22, 1, .36, 1) var(--reveal-delay, 0s);
	}
	.js .home .origen__map > svg { translate: calc(-120 * var(--ux)) 0; }
	.js .home .origen__badge {
		opacity: 0;
		scale: .4;
		transition: opacity .4s ease .45s, scale .8s cubic-bezier(.34, 1.56, .64, 1) .45s;
	}
	.js .home .origen__text p:nth-child(1) { --reveal-delay: .15s; }
	.js .home .origen__text p:nth-child(2) { --reveal-delay: .3s; }
	.js .home .origen__text p:nth-child(3) { --reveal-delay: .45s; }
	.js .home .origen__map.is-in > svg,
	.js .home .origen__content.is-in .origen__title,
	.js .home .origen__content.is-in .origen__text p { opacity: 1; translate: 0 0; }
	.js .home .origen__map.is-in .origen__badge { opacity: 1; scale: 1; }

	/* SuperDumbo: la foto se acerca suavemente, la card sube y el óvalo rebota */
	.js .home .donde__bg {
		scale: 1.12;
		transition: scale 1.8s cubic-bezier(.22, 1, .36, 1);
	}
	.js .home .donde__card {
		opacity: 0;
		translate: 0 calc(80 * var(--ux));
		transition: opacity .8s ease .2s, translate 1.1s cubic-bezier(.22, 1, .36, 1) .2s;
	}
	.js .home .donde__ovalo {
		opacity: 0;
		scale: .4;
		rotate: -10deg;
		transition: opacity .4s ease .7s, scale .8s cubic-bezier(.34, 1.56, .64, 1) .7s, rotate .8s cubic-bezier(.34, 1.56, .64, 1) .7s;
	}
	.js .home .donde.is-in .donde__bg { scale: 1; }
	.js .home .donde.is-in .donde__card { opacity: 1; translate: 0 0; }
	.js .home .donde.is-in .donde__ovalo { opacity: 1; scale: 1; rotate: 0deg; }

	/* Blog: cabecera escalonada, cards con un ligero escalonado y botón al final */
	.js .home .blog-home__pretitle,
	.js .home .blog-home__title,
	.js .home .blog-home__subtitle,
	.js .home .post-card,
	.js .home .blog-home > .btn {
		opacity: 0;
		translate: 0 calc(50 * var(--ux));
		transition:
			opacity .8s ease var(--reveal-delay, 0s),
			translate 1s cubic-bezier(.22, 1, .36, 1) var(--reveal-delay, 0s);
	}
	.js .home .blog-home__title { --reveal-delay: .1s; }
	.js .home .blog-home__subtitle { --reveal-delay: .2s; }
	.js .home .post-card:nth-child(2) { --reveal-delay: .12s; }
	.js .home .post-card:nth-child(3) { --reveal-delay: .24s; }
	.js .home .blog-home > .btn { --reveal-delay: .45s; } /* entra con la rejilla, justo después de las cards */
	.js .home .blog-home__pretitle.is-in,
	.js .home .blog-home__title.is-in,
	.js .home .blog-home__subtitle.is-in,
	.js .home .blog-home__grid.is-in .post-card,
	.js .home .blog-home__grid.is-in ~ .btn { opacity: 1; translate: 0 0; }

	/* Ideas (ficha de producto): título, cards escalonadas y botón; .is-in lo pone main.js */
	.js .ideas__title,
	.js .ideas .post-card,
	.js .ideas > .btn {
		opacity: 0;
		translate: 0 calc(50 * var(--ux));
		transition:
			opacity .8s ease var(--reveal-delay, 0s),
			translate 1s cubic-bezier(.22, 1, .36, 1) var(--reveal-delay, 0s);
	}
	.js .ideas .post-card:nth-child(2) { --reveal-delay: .12s; }
	.js .ideas .post-card:nth-child(3) { --reveal-delay: .24s; }
	.js .ideas > .btn { --reveal-delay: .45s; } /* entra con la rejilla, justo después de las cards */
	.js .ideas__title.is-in,
	.js .ideas__grid.is-in .post-card,
	.js .ideas__grid.is-in ~ .btn { opacity: 1; translate: 0 0; }

	/* Botones con entrada: la transición de la entrada sustituía la del botón; de la entrada sustituía la del botón: se le añade el cambio de fondo del hover (sin retraso) */
	.js .home .blog-home > .btn,
	.js .ideas > .btn {
		transition:
			opacity .8s ease var(--reveal-delay, 0s),
			translate 1s cubic-bezier(.22, 1, .36, 1) var(--reveal-delay, 0s),
			background-color .2s;
	}

	/* Página del blog: foto, título e intro escalonados; cada card entra al asomar */
	.js .blog-page__hero,
	.js .blog-page__title,
	.js .blog-page__intro,
	.js .blog-page .post-card {
		opacity: 0;
		translate: 0 calc(50 * var(--ux));
		transition:
			opacity .8s ease var(--reveal-delay, 0s),
			translate 1s cubic-bezier(.22, 1, .36, 1) var(--reveal-delay, 0s);
	}
	.js .blog-page__title { --reveal-delay: .1s; }
	.js .blog-page__intro { --reveal-delay: .2s; }
	.js .blog-page .post-card:nth-child(3n+2) { --reveal-delay: .12s; }
	.js .blog-page .post-card:nth-child(3n) { --reveal-delay: .24s; }
	.js .blog-page .is-in { opacity: 1; translate: 0 0; }
}

/* ==========================================================================
   Página individual de producto (sección que fluye, --ux)
   ========================================================================== */

.breadcrumbs {
	padding-top: calc(66 * var(--ux));
	text-align: center;
	font-family: var(--font-body);
	font-weight: 500;
	font-size: max(12px, calc(13 * var(--ux)));
	line-height: 1.2;
	color: rgba(226, 239, 225, .5); /* crema al 50% */
}
.breadcrumbs a { color: inherit; }
.breadcrumbs span[aria-hidden] { margin: 0 .25em; }

.ficha__card {
	position: relative;
	margin: calc(383 * var(--ux)) calc(50 * var(--ux)) 0; /* la foto sobresale ~340 por arriba */
	padding: calc(358 * var(--ux)) calc(50 * var(--ux)) calc(107 * var(--ux));
	border-radius: calc(80 * var(--ux));
	color: var(--color-verde);
	text-align: center;
}

/* Foto superpuesta, sobresaliendo por arriba */
.ficha__img {
	position: absolute;
	left: 50%;
	height: auto;
	translate: -50% 0;
	pointer-events: none;
}
.ficha__card--pack .ficha__img { top: calc(-340 * var(--ux)); width: calc(1058 * var(--ux)); }
.ficha__card--lata .ficha__img { top: calc(-340 * var(--ux)); width: auto; height: calc(620 * var(--ux)); }

.ficha__title {
	max-width: 22em; /* el corte de línea se escribe en el campo «Título de la ficha» */
	margin: 0 auto;
	font-family: var(--font-heading);
	font-weight: 700;
	font-size: calc(48 * var(--ux));
	line-height: 1.08;
	text-transform: uppercase;
}

.ficha__lema,
.ficha__desc {
	max-width: 18.5em; /* ~370 a 20px */
	margin: calc(56 * var(--ux)) auto 0;
	font-family: var(--font-body);
	font-weight: 500;
	font-size: max(16px, calc(20 * var(--ux)));
	line-height: 1.2;
}
.ficha__desc { margin-top: calc(93 * var(--ux)); }
.ficha__desc p { margin: 0 0 1.2em; }
.ficha__desc p:last-child { margin-bottom: 0; }

.ficha__info {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: calc(22 * var(--ux));
	margin-top: calc(57 * var(--ux));
}

.info-box {
	display: flex;
	flex-direction: column;
	gap: calc(68 * var(--ux));
	width: calc(460 * var(--ux));
	padding: calc(28 * var(--ux)) calc(40 * var(--ux)) calc(35 * var(--ux));
	border: 1px solid currentColor; /* verde (o crema sobre colores de card oscuros) */
	border-radius: calc(10 * var(--ux));
}
.info-box + .info-box { padding-top: calc(42 * var(--ux)); padding-bottom: calc(52 * var(--ux)); }

.info-box__item {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: calc(10 * var(--ux));
}
.info-box__item svg {
	width: auto;
	height: calc(32 * var(--ux));
}
.info-box__item p {
	margin: 0;
	font-family: var(--font-body);
	font-weight: 500;
	font-size: max(16px, calc(20 * var(--ux)));
	line-height: 1.2;
}


/* ==========================================================================
   Responsive — móvil y tablet (todo lo que NO es escritorio)
   Escritorio = ≥1024px en horizontal: usa las reglas de arriba y aquí no se toca.
   - No escritorio:  (max-width: 1023px), (orientation: portrait)  → diseño móvil de base
   - Tablet:         ≥600px dentro de lo anterior                  → ajustes de composición
   Unidad --m: 1px del diseño móvil (390). Crece suave con el ancho (1,4px a 820) para que
   la tablet escale sola; solo se recompone lo que lo necesita. home-scroll.js usa la misma fórmula.
   Cubre toda la web (cada página en su bloque «Responsive — …» de abajo).
   ========================================================================== */

/* Solo existen fuera del escritorio: menú del móvil y marcador de la foto de «Misma esencia» */
.menu-toggle,
.menu-movil,
.esencia__hole { display: none; }

@media (max-width: 1023px), (orientation: portrait) {
	:root {
		--m: clamp(0.82px, 0.637px + 0.093vw, 1.5px);
		--gx: calc(20 * var(--m)); /* margen lateral */
		--header-x: var(--gx);
		--header-h: calc(28px + 30 * var(--m)); /* 18 arriba + logo + 10 */
	}

	/* --- Cabecera: logo a la izquierda y botón de menú ------------------- */
	.site-header {
		grid-template-columns: 1fr auto;
		align-items: center;
		padding-top: 18px;
	}
	.site-logo { grid-column: 1; grid-row: 1; justify-self: start; }
	.site-logo svg { width: calc(128 * var(--m)); }
	.site-nav { display: none; }

	.menu-toggle {
		grid-column: 2;
		grid-row: 1;
		position: relative;
		display: block;
		width: 44px;
		height: 44px;
		margin-right: -10px; /* la zona táctil sobresale; las líneas quedan en el margen */
		padding: 0;
		border: 0;
		background: none;
		color: var(--header-color);
		cursor: pointer;
		pointer-events: auto;
		transition: color .4s ease;
	}
	.menu-toggle__lines,
	.menu-toggle__lines::before {
		position: absolute;
		left: 10px;
		width: 24px;
		height: 2px;
		border-radius: 2px;
		background: currentColor;
		box-shadow: var(--header-shadow);
		transition: transform .45s cubic-bezier(.22, 1, .36, 1), top .45s cubic-bezier(.22, 1, .36, 1), box-shadow .4s;
	}
	.menu-toggle__lines { top: 17px; }
	.menu-toggle__lines::before { content: ""; left: 0; top: 8px; }
	.menu-abierto .menu-toggle__lines { top: 21px; transform: rotate(45deg); box-shadow: none; }
	.menu-abierto .menu-toggle__lines::before { top: 0; transform: rotate(-90deg); box-shadow: none; }

	/* Con el menú abierto el logo se ve siempre (en la portada espera oculto al logo grande; GSAP pone la opacidad en línea) */
	.js .home.menu-abierto .site-logo .logo-word,
	.js .home.menu-abierto .site-logo .logo-conservas { opacity: 1 !important; }
	.js .home.menu-abierto .site-logo { pointer-events: auto; }
	/* Con el menú abierto la cabecera va siempre en crema (aunque esté sobre el pie) */
	.menu-abierto .site-header {
		--header-color: var(--color-crema);
		--header-shadow: 0 0 0 transparent;
		--logo-shadow: 0;
	}

	.menu-movil {
		position: fixed;
		inset: 0;
		z-index: 9; /* debajo de la cabecera: el logo y el botón siguen encima */
		display: flex;
		flex-direction: column;
		align-items: flex-start;
		padding: calc(var(--header-h) + 48 * var(--m)) var(--gx) calc(32 * var(--m));
		background: var(--color-verde);
		opacity: 0;
		visibility: hidden;
		transition: opacity .4s ease, visibility 0s linear .4s;
	}
	.menu-movil.is-open { opacity: 1; visibility: visible; transition: opacity .4s ease; }
	.menu-movil ul { margin: 0; padding: 0; list-style: none; }
	.menu-movil a {
		display: inline-block;
		padding: calc(4 * var(--m)) 0;
		color: var(--color-crema);
		text-decoration: none;
		transition: color .3s;
	}
	.menu-movil a:hover,
	.menu-movil a:focus-visible { color: var(--color-lima); }
	.menu-movil__links a {
		font-family: var(--font-accent);
		font-weight: 500;
		font-size: calc(56 * var(--m));
		line-height: 1;
	}
	/* el teléfono justo debajo de los enlaces (abajo del todo lo tapaba el aviso de cookies) */
	.menu-movil__tel {
		margin-top: calc(36 * var(--m));
		font-family: var(--font-body);
		font-weight: 500;
		font-size: calc(15 * var(--m));
		line-height: 1.2;
	}
	/* los enlaces entran escalonados */
	.menu-movil__links li,
	.menu-movil__tel {
		opacity: 0;
		translate: 0 calc(24 * var(--m));
		transition: opacity .3s ease, translate .3s ease;
	}
	.menu-movil.is-open .menu-movil__links li,
	.menu-movil.is-open .menu-movil__tel {
		opacity: 1;
		translate: 0 0;
		transition: opacity .6s ease var(--d, 0s), translate .8s cubic-bezier(.22, 1, .36, 1) var(--d, 0s);
	}
	.menu-movil__links li:nth-child(2) { --d: .06s; }
	.menu-movil__links li:nth-child(3) { --d: .12s; }
	.menu-movil__links li:nth-child(4) { --d: .18s; }
	.menu-movil__links li:nth-child(5) { --d: .24s; }
	.menu-movil__links li:nth-child(6) { --d: .3s; }
	.menu-movil__tel { --d: .3s; }
	@media (prefers-reduced-motion: reduce) {
		.menu-movil, .menu-movil.is-open,
		.menu-movil__links li, .menu-movil__tel,
		.menu-movil.is-open .menu-movil__links li, .menu-movil.is-open .menu-movil__tel { transition: none; }
	}

	/* --- Botones --------------------------------------------------------- */
	.btn,
	.blog-home .btn,
	.ideas .btn {
		padding: calc(12 * var(--m)) calc(22 * var(--m));
		font-size: max(13px, calc(14 * var(--m)));
	}
	.btn-outline {
		gap: calc(8 * var(--m));
		height: max(40px, calc(40 * var(--m)));
		margin-top: calc(24 * var(--m));
		padding: 0 calc(16 * var(--m));
		border-width: 1.3px;
		font-size: max(13px, calc(14 * var(--m)));
	}
	.btn-outline svg { width: calc(14 * var(--m)); }

	/* --- Portada: hero (título arriba; pack y logo centrados en el resto de la pantalla) --- */
	.home .site-main { padding-top: 0; }
	.hero {
		min-height: 100svh;
		padding: calc(var(--header-h) + 28 * var(--m)) var(--gx) calc(28 * var(--m));
	}
	.hero__title {
		max-width: 17em;
		margin: 0 0 auto; /* el pack (envuelto por el pin de GSAP) y el logo quedan centrados en el hueco de debajo */
		font-size: calc(13 * var(--m));
		letter-spacing: .04em;
		line-height: 1.3;
	}
	.hero__product { width: 100%; margin-top: calc(24 * var(--m)); }
	.hero__brand { margin: calc(-18 * var(--m)) 0 auto; }

	/* --- Intro ----------------------------------------------------------- */
	.intro {
		max-width: none;
		padding: calc(var(--header-h) + 32 * var(--m)) var(--gx) calc(48 * var(--m));
		font-size: calc(19 * var(--m));
	}
	.intro .btn { margin-top: calc(8 * var(--m)); }

	/* --- «Una lata, una ensalada»: texto arriba, el pack baja al hueco libre (home-scroll.js) --- */
	.lata {
		min-height: 100svh;
		padding: calc(var(--header-h) + 28 * var(--m)) var(--gx) calc(32 * var(--m));
	}
	.lata__title,
	.lata__text { margin-left: 0; }
	.lata__title { font-size: calc(52 * var(--m)); line-height: .8; }
	.lata__text { max-width: none; margin-top: calc(20 * var(--m)); font-size: calc(15 * var(--m)); }
	.lata__features { gap: calc(8 * var(--m)); margin-top: calc(22 * var(--m)); }
	.feature,
	.feature:nth-child(n) {
		gap: calc(10 * var(--m));
		height: calc(40 * var(--m));
		margin-left: 0;
		padding: 0 calc(18 * var(--m)) 0 calc(12 * var(--m));
		border-radius: calc(8 * var(--m));
		font-size: calc(16 * var(--m));
	}
	.feature__dot { width: calc(11 * var(--m)); height: calc(11 * var(--m)); }
	.feature__line { display: none; }

	/* --- Frase grande ------------------------------------------------------ */
	.claim { padding: calc(72 * var(--m)) var(--gx) calc(88 * var(--m)); }
	.claim__text { font-size: calc(104 * var(--m)); line-height: 1.05; }

	/* --- «Nuestros productos» y card de producto --------------------------- */
	.productos { padding: calc(40 * var(--m)) var(--gx) calc(72 * var(--m)); }
	.productos__title { font-size: calc(44 * var(--m)); }
	.productos__subtitle { margin-top: calc(16 * var(--m)); font-size: calc(15 * var(--m)); }
	.productos__subtitle br { display: none; }
	.productos__grid {
		grid-template-columns: 1fr;
		gap: calc(160 * var(--m));
		margin-top: calc(170 * var(--m));
	}
	.product-card {
		padding: calc(150 * var(--m)) calc(24 * var(--m)) calc(28 * var(--m));
		border-radius: calc(24 * var(--m));
	}
	.product-card--pack .product-card__img { width: 88%; top: calc(-100 * var(--m)); }
	.product-card--lata .product-card__img { width: 44%; top: calc(-150 * var(--m)); }
	.product-card:hover .product-card__img,
	.product-card:focus-within .product-card__img { transform: translate(-50%, calc(-14 * var(--m))); }
	.product-card__body { grid-template-columns: 1fr; row-gap: calc(12 * var(--m)); }
	.product-card__title { font-size: calc(30 * var(--m)); }
	.product-card__text { padding-right: 0; font-size: calc(15 * var(--m)); }
	.product-card__specs {
		grid-column: 1;
		grid-row: auto;
		gap: calc(10 * var(--m));
		margin-top: calc(8 * var(--m));
		font-size: calc(15 * var(--m));
	}
	.product-card__specs li { gap: calc(12 * var(--m)); }
	.product-card__specs svg { width: calc(15 * var(--m)); }

	/* --- «Misma esencia» (escena fija en vertical) ----------------------------
	   Arriba «La verdura sigue siendo la misma.», foto centrada, abajo «Y esa es la mejor noticia.».
	   La foto se ensancha hasta ser la card (casi toda la pantalla bajo la cabecera) y entra el contenido.
	   .esencia__hole marca el rectángulo de la foto inicial: home-scroll.js recorta la card con él. */
	.esencia {
		--card-x: var(--gx);
		--card-top: calc(var(--header-h) + 8 * var(--m));
		--card-h: calc(100svh - var(--card-top) - var(--gx));
		--hole-w: calc(100vw - 2 * var(--gx) - 40 * var(--m));
		--hole-h: calc(var(--hole-w) * 497 / 760);
		--hole-top: calc(var(--card-top) + (var(--card-h) - var(--hole-h)) / 2);
		height: 100svh;
	}
	.esencia__hole {
		display: block;
		position: absolute;
		top: var(--hole-top);
		left: calc((100% - var(--hole-w)) / 2);
		width: var(--hole-w);
		height: var(--hole-h);
		visibility: hidden;
		pointer-events: none;
	}
	.esencia__side {
		left: var(--gx);
		right: var(--gx);
		width: auto;
		transform: none;
		font-size: calc(30 * var(--m));
	}
	.esencia__side--left { top: auto; bottom: calc(100% - var(--hole-top) + 20 * var(--m)); }
	.esencia__side--right { top: calc(var(--hole-top) + var(--hole-h) + 20 * var(--m)); }
	.js .home .esencia__side-in,
	.js .home .esencia__side--right .esencia__side-in { translate: 0 calc(30 * var(--m)); }
	.esencia__card { border-radius: calc(24 * var(--m)); }

	/* contenido centrado en la card: texto, latas y el bocadillo encima de las latas */
	.esencia__content {
		display: flex;
		flex-direction: column;
		justify-content: center;
		padding: calc(32 * var(--m)) calc(24 * var(--m));
	}
	.esencia__text { position: static; display: block; }
	.esencia__cans { position: relative; aspect-ratio: 100 / 47; }
	.esencia__title { font-size: calc(38 * var(--m)); }
	.esencia__body { max-width: 24em; margin-top: calc(18 * var(--m)); font-size: calc(15 * var(--m)); }
	.esencia__can { top: 0; width: 46%; }
	.esencia__can--zanahoria { left: -4%; }
	.esencia__can--remolacha { left: 25%; }
	.esencia__can--champinon { left: 56%; }
	/* el bocadillo va antes que las latas y se monta sobre su borde (alto: 150 × 180/275 ≈ 98) */
	.esencia__badge {
		order: 1;
		position: relative;
		z-index: 1;
		top: auto;
		left: auto;
		align-self: flex-end;
		width: calc(150 * var(--m));
		margin: calc(20 * var(--m)) calc(-6 * var(--m)) calc(-64 * var(--m)) 0;
	}
	.esencia__cans { order: 2; }

	/* --- Pasos: una columna; las cards entran una a una -------------------- */
	.pasos {
		grid-template-columns: 1fr;
		padding: calc(72 * var(--m)) var(--gx) calc(64 * var(--m));
	}
	.pasos__intro { position: static; }
	.pasos__img { width: 82%; margin-left: -4%; }
	.pasos__title { margin-top: calc(20 * var(--m)); font-size: calc(40 * var(--m)); }
	.pasos__text { margin-top: calc(16 * var(--m)); font-size: calc(18 * var(--m)); }
	.pasos__list { gap: calc(12 * var(--m)); margin-top: calc(32 * var(--m)); }
	.paso {
		height: calc(108 * var(--m));
		padding-left: calc(22 * var(--m));
		border-radius: calc(22 * var(--m));
	}
	.paso__num { width: calc(96 * var(--m)); font-size: calc(76 * var(--m)); }
	.paso__text { font-size: calc(26 * var(--m)); }
	/* cada card entra al asomar (home-scroll.js le pone .is-in) */
	@media (prefers-reduced-motion: no-preference) {
		.js .home .pasos__list.is-in .paso:not(.is-in) { opacity: 0; translate: 0 calc(40 * var(--m)); }
	}

	/* --- Origen: mapa arriba, texto debajo ---------------------------------- */
	.origen {
		grid-template-columns: 1fr;
		row-gap: calc(40 * var(--m));
		padding: calc(88 * var(--m)) var(--gx) calc(40 * var(--m));
	}
	.origen__badge { top: 16.6%; left: .8%; width: 48.5%; } /* mismas proporciones que el Figma */
	.origen__title { font-size: calc(40 * var(--m)); }
	.origen__text { max-width: 24em; margin-top: calc(20 * var(--m)); font-size: calc(18 * var(--m)); }

	/* --- Dónde comprar: foto a pantalla completa y la card abajo ------------- */
	.donde {
		align-items: flex-end;
		min-height: 100svh;
		margin-top: calc(72 * var(--m));
		padding: var(--gx);
	}
	.donde__bg { object-position: 60% center; } /* encuadre movido a la izquierda: se ve más el cartel «SuperDumbo» */
	@media (orientation: portrait) {
		.donde__bg { object-position: 62% 40%; } /* foto vertical: el cartel centrado, por encima de la card */
	}
	.donde__card {
		width: 100%;
		padding: calc(56 * var(--m)) calc(24 * var(--m)) calc(32 * var(--m));
		border-radius: calc(24 * var(--m));
	}
	.donde__ovalo { top: calc(-30 * var(--m)); left: calc(24 * var(--m)); width: calc(132 * var(--m)); }
	.donde__title { font-size: calc(36 * var(--m)); }
	.donde__text { margin-top: calc(20 * var(--m)); font-size: calc(17 * var(--m)); }

	/* --- Blog: carrusel horizontal con imán, asoma la siguiente card ---------- */
	.blog-home { padding: calc(96 * var(--m)) var(--gx) calc(24 * var(--m)); }
	.blog-home__pretitle { font-size: calc(13 * var(--m)); }
	.blog-home__title { margin-top: calc(6 * var(--m)); font-size: calc(40 * var(--m)); line-height: 1; }
	.blog-home__subtitle { margin-top: calc(18 * var(--m)); font-size: calc(15 * var(--m)); }
	.blog-home__subtitle br { display: none; }
	.blog-home__grid,
	.ideas__grid {
		display: flex;
		gap: calc(12 * var(--m));
		margin: calc(40 * var(--m)) calc(-1 * var(--gx)) 0;
		padding: 0 var(--gx) calc(8 * var(--m));
		overflow-x: auto;
		overscroll-behavior-x: contain;
		scroll-snap-type: x mandatory;
		scroll-padding-inline: var(--gx);
		scrollbar-width: none;
	}
	.blog-home__grid::-webkit-scrollbar,
	.ideas__grid::-webkit-scrollbar { display: none; }
	.blog-home__grid .post-card,
	.ideas__grid .post-card { flex: none; width: 82%; scroll-snap-align: start; }
	.blog-home .btn { margin-top: calc(36 * var(--m)); }
	.post-card__media { border-radius: calc(24 * var(--m)); }
	.post-card__title { margin-top: calc(16 * var(--m)); font-size: calc(18 * var(--m)); }

	/* --- Pie --------------------------------------------------------------- */
	.site-footer {
		margin-top: calc(96 * var(--m));
		border-radius: calc(32 * var(--m)) calc(32 * var(--m)) 0 0;
	}
	.footer__top { padding: calc(64 * var(--m)) var(--gx) 0; }
	.footer__contact { width: auto; }
	.footer__title { font-size: calc(48 * var(--m)); }
	.footer__subtitle { margin-top: calc(16 * var(--m)); font-size: calc(15 * var(--m)); }
	.footer__subtitle br { display: none; }
	.contact-form { margin-top: calc(28 * var(--m)); }
	.contact-form__grid { gap: calc(10 * var(--m)); } /* dos columnas como en escritorio: nombre | empresa · teléfono | email */
	.contact-form input[type="text"],
	.contact-form input[type="tel"],
	.contact-form input[type="email"],
	.contact-form textarea {
		height: max(48px, calc(48 * var(--m)));
		padding: 0 calc(16 * var(--m));
		border-radius: calc(10 * var(--m));
		font-size: max(16px, calc(15 * var(--m))); /* 16px: iOS no hace zoom al escribir */
	}
	.contact-form textarea { height: calc(140 * var(--m)); padding-top: calc(14 * var(--m)); }
	.contact-form__check { gap: calc(10 * var(--m)); margin-top: calc(16 * var(--m)); font-size: calc(14 * var(--m)); }
	.contact-form__check input { width: 20px; height: 20px; border-radius: 4px; }
	.contact-form__msg { font-size: calc(14 * var(--m)); }
	.contact-form .btn { margin-top: calc(20 * var(--m)); }
	.btn--dark {
		height: max(44px, calc(44 * var(--m)));
		padding: 0 calc(26 * var(--m));
		font-size: max(15px, calc(15 * var(--m)));
	}
	.footer__img {
		position: relative;
		top: auto;
		left: auto;
		width: 118%;
		margin: calc(28 * var(--m)) 0 0 6%;
	}
	.footer__bottom {
		flex-direction: column;
		align-items: flex-start;
		gap: calc(40 * var(--m));
		margin-top: calc(24 * var(--m));
		padding: 0 var(--gx) calc(32 * var(--m));
	}
	.footer__logo svg { width: calc(132 * var(--m)); }
	.footer__cols {
		width: 100%;
		grid-template-columns: 1fr 1fr;
		column-gap: calc(16 * var(--m));
		font-size: calc(14 * var(--m));
	}
	.footer__heading { margin-bottom: calc(12 * var(--m)); font-size: calc(14 * var(--m)); }
	.footer__credit { margin-top: calc(32 * var(--m)); }
	.footer__kit { margin-top: calc(28 * var(--m)); }
}

/* ==========================================================================
   Tablet (≥600px sin ser escritorio): más aire y composiciones a dos columnas
   ========================================================================== */
@media (min-width: 600px) and (max-width: 1023px), (min-width: 600px) and (orientation: portrait) {
	:root { --header-h: 84px; }

	/* Cabecera como la de escritorio (menú · logo · menú), un poco más compacta */
	.site-header {
		grid-template-columns: 1fr auto 1fr;
		align-items: start;
		padding-top: 32px;
	}
	.site-logo { grid-column: 2; justify-self: center; }
	.site-logo svg { width: 180px; }
	.site-nav { display: block; }
	.site-nav ul { gap: 26px; }
	.site-nav a { padding-top: 6px; font-size: 14px; }
	.menu-toggle,
	.menu-movil { display: none; }

	.hero__product { width: 84%; }

	.intro { max-width: calc(30em + 2 * var(--gx)); margin-inline: auto; }

	/* «Una lata»: título y texto a la izquierda, ventajas a la derecha; el pack debajo */
	.lata {
		display: grid;
		grid-template-columns: 1fr auto;
		grid-template-rows: auto auto;
		column-gap: calc(32 * var(--m));
		align-content: start; /* todo arriba: el pack baja al hueco libre de debajo */
	}
	.lata__title { grid-column: 1; grid-row: 1; }
	.lata__text { grid-column: 1; grid-row: 2; max-width: 26em; }
	.lata__features { grid-column: 2; grid-row: 1 / 3; align-self: center; margin-top: 0; }

	.productos__subtitle br { display: inline; }
	.productos__grid { gap: calc(190 * var(--m)); margin-top: calc(190 * var(--m)); }
	.product-card { padding: calc(112 * var(--m)) calc(36 * var(--m)) calc(36 * var(--m)); }
	.product-card--pack .product-card__img { width: 62%; top: calc(-112 * var(--m)); }
	.product-card--lata .product-card__img { width: 30%; top: calc(-180 * var(--m)); }
	.product-card__body { grid-template-columns: 1fr 1fr; column-gap: calc(24 * var(--m)); }
	.product-card__specs { grid-column: 2; grid-row: 1 / 3; align-self: end; margin-top: 0; }
	.product-card__text,
	.product-card__specs { font-size: max(13px, calc(13 * var(--m))); }

	.esencia__content { padding: calc(40 * var(--m)) calc(36 * var(--m)); }
	.esencia__title { font-size: calc(44 * var(--m)); }
	.esencia__body { font-size: calc(14 * var(--m)); }
	.esencia__cans { width: 86%; margin-inline: auto; }

	/* Pasos: dos columnas con la izquierda fija (sticky), como en escritorio */
	.pasos {
		grid-template-columns: 1fr 1fr;
		column-gap: calc(24 * var(--m));
		padding-top: calc(96 * var(--m));
	}
	.pasos__intro { position: sticky; top: calc(var(--header-h) + 24px); }
	.pasos__img { width: 100%; margin-left: -6%; }
	.pasos__title { font-size: calc(30 * var(--m)); }
	.pasos__text { font-size: calc(15 * var(--m)); }
	.pasos__list { margin-top: calc(120 * var(--m)); }
	.paso { height: calc(118 * var(--m)); }
	.paso__num { width: calc(88 * var(--m)); font-size: calc(70 * var(--m)); }
	.paso__text { font-size: calc(24 * var(--m)); }

	.origen { justify-items: center; padding-top: calc(110 * var(--m)); }
	.origen__map { width: 82%; }
	.origen__content { width: 82%; }
	.origen__title { font-size: calc(36 * var(--m)); }
	.origen__text { font-size: calc(15 * var(--m)); }

	.donde__card { width: 72%; padding: calc(64 * var(--m)) calc(36 * var(--m)) calc(40 * var(--m)); }
	.donde__ovalo { left: calc(36 * var(--m)); }
	.donde__title { font-size: calc(34 * var(--m)); }
	.donde__text { font-size: calc(15 * var(--m)); }

	.blog-home__title { font-size: calc(36 * var(--m)); }
	.blog-home__subtitle { font-size: calc(13 * var(--m)); }
	.blog-home__subtitle br { display: inline; }
	.blog-home__grid .post-card,
	.ideas__grid .post-card { width: 46%; }
	.post-card__title { font-size: calc(15 * var(--m)); }

	/* Pie: formulario a la izquierda y la foto cortada por la derecha; logo y columnas en fila */
	.footer__top { padding-top: calc(72 * var(--m)); }
	.footer__contact { width: 52%; }
	.footer__title { font-size: calc(40 * var(--m)); }
	.footer__subtitle { font-size: calc(12 * var(--m)); }
	.footer__subtitle br { display: inline; }
	.contact-form__grid { grid-template-columns: 1fr 1fr; }
	.contact-form input[type="text"],
	.contact-form input[type="tel"],
	.contact-form input[type="email"] { height: max(44px, calc(34 * var(--m))); }
	.contact-form textarea { height: calc(96 * var(--m)); }
	.contact-form__check { font-size: calc(11 * var(--m)); }
	.footer__img {
		position: absolute;
		top: calc(150 * var(--m));
		left: 57%;
		width: 70%;
		margin: 0;
	}
	.footer__bottom {
		flex-direction: row;
		align-items: flex-end;
		justify-content: space-between;
		margin-top: calc(80 * var(--m));
	}
	.footer__logo svg { width: calc(110 * var(--m)); }
	.footer__cols { width: 50%; font-size: calc(11 * var(--m)); }
	.footer__heading { font-size: calc(11 * var(--m)); }
}

/* ==========================================================================
   Móvil en horizontal (pantalla baja que no es escritorio): la unidad también depende
   del alto para que las escenas fijas quepan; «Misma esencia» con el texto a la izquierda
   y las latas a la derecha, y la foto inicial a la medida del alto.
   ========================================================================== */
@media (max-width: 1023px) and (orientation: landscape) and (max-height: 540px) {
	:root {
		--m: min(clamp(0.82px, 0.637px + 0.093vw, 1.5px), calc(100vh / 560));
		--header-h: 64px;
	}
	.site-header { padding-top: 16px; }
	.site-logo svg { width: 150px; }

	/* hero: pack y logo a la medida del alto para que quepan en la pantalla */
	.hero__product { width: 76vh; }
	.hero__brand { width: 140vh; }

	.esencia {
		--hole-h: calc(var(--card-h) * .6);
		--hole-w: calc(var(--hole-h) * 760 / 497);
	}
	.esencia__side { font-size: calc(24 * var(--m)); }
	.esencia__content {
		flex-direction: row;
		align-items: center;
		gap: calc(32 * var(--m));
	}
	.esencia__text { flex: 1; }
	.esencia__cans { order: 0; flex: none; width: 50%; margin: 0; }
	.esencia__badge {
		position: absolute;
		top: calc(12 * var(--m));
		right: calc(16 * var(--m));
		margin: 0;
	}

	.donde__card { width: 60%; }
}

/* ==========================================================================
   Responsive — página «Productos» (fuera del escritorio)
   Móvil: cards en una columna, como en la portada. Tablet (≥700): rejilla de 2 columnas con la
   card de móvil; si el número de productos es impar, el último ocupa todo el ancho con la card
   horizontal de la tablet (la de la portada). Entre 600 y 699: una columna con la card horizontal.
   ========================================================================== */
@media (max-width: 1023px), (orientation: portrait) {
	.productos--page { padding-top: calc(32 * var(--m)); }
	.productos__title { line-height: 1; }
	.productos__intro { max-width: 30em; margin-inline: auto; }
	.productos__intro br { display: none; } /* el salto de línea es del diseño de escritorio */
	.productos--page .productos__grid {
		row-gap: calc(160 * var(--m));
		margin-top: calc(170 * var(--m));
	}
}

@media (min-width: 700px) and (max-width: 1023px), (min-width: 700px) and (orientation: portrait) {
	.productos--page .productos__grid {
		grid-template-columns: 1fr 1fr;
		column-gap: calc(20 * var(--m));
		row-gap: calc(176 * var(--m));
	}
	.productos--page .product-card:last-child:nth-child(odd) { grid-column: 1 / -1; }

	/* card de móvil dentro de la rejilla de 2 columnas */
	.productos--page .product-card:not(:last-child:nth-child(odd)) {
		padding: calc(150 * var(--m)) calc(24 * var(--m)) calc(28 * var(--m));
	}
	.productos--page .product-card--pack:not(:last-child:nth-child(odd)) .product-card__img { width: 88%; top: calc(-100 * var(--m)); }
	.productos--page .product-card--lata:not(:last-child:nth-child(odd)) .product-card__img { width: 44%; top: calc(-150 * var(--m)); }
	.productos--page .product-card:not(:last-child:nth-child(odd)) .product-card__body { grid-template-columns: 1fr; }
	.productos--page .product-card:not(:last-child:nth-child(odd)) .product-card__title { font-size: max(20px, calc(26 * var(--m))); }
	.productos--page .product-card:not(:last-child:nth-child(odd)) .product-card__specs {
		grid-column: 1;
		grid-row: auto;
		align-self: auto;
		margin-top: calc(8 * var(--m));
	}
}

/* Móvil en horizontal: la unidad depende del alto, así que las fotos de las cards (que van en % del
   ancho de la card) se limitan con esa unidad para no tapar el texto (portada y página Productos) */
@media (max-width: 1023px) and (orientation: landscape) and (max-height: 540px) {
	.product-card__title { font-size: max(20px, calc(30 * var(--m))); }
	.productos--page .product-card:not(:last-child:nth-child(odd)) .product-card__title { font-size: max(18px, calc(26 * var(--m))); }
	.product-card__specs svg { width: max(12px, calc(15 * var(--m))); }
	.product-card--pack .product-card__img { width: min(62%, calc(300 * var(--m))); }
	.product-card--lata .product-card__img { width: min(30%, calc(150 * var(--m))); }
	.productos--page .product-card--pack:not(:last-child:nth-child(odd)) .product-card__img { width: min(88%, calc(300 * var(--m))); }
	.productos--page .product-card--lata:not(:last-child:nth-child(odd)) .product-card__img { width: min(44%, calc(150 * var(--m))); }
}

/* ==========================================================================
   Responsive — ficha de producto (fuera del escritorio)
   La misma composición que en escritorio (card del color del producto con la foto sobresaliendo
   por arriba) a la medida de --m. Cajas de información: lista compacta con el icono a la izquierda
   (en tablet, las dos cajas en fila). «Ideas para disfrutarla»: carrusel como el blog de la portada.
   ========================================================================== */
@media (max-width: 1023px), (orientation: portrait) {
	.breadcrumbs {
		padding: calc(20 * var(--m)) var(--gx) 0;
		font-size: max(12px, calc(13 * var(--m)));
	}

	.ficha__card {
		margin: calc(140 * var(--m)) var(--gx) 0;
		padding: calc(170 * var(--m)) calc(20 * var(--m)) calc(40 * var(--m));
		border-radius: calc(32 * var(--m));
	}
	.ficha__card--pack { padding-top: calc(110 * var(--m)); } /* el pack es bajo: el título sube */
	.ficha__card--pack .ficha__img { top: calc(-120 * var(--m)); width: 104%; }
	.ficha__card--lata .ficha__img { top: calc(-130 * var(--m)); height: calc(270 * var(--m)); }
	.ficha__title { font-size: calc(30 * var(--m)); }
	.ficha__lema,
	.ficha__desc { max-width: 24em; font-size: max(15px, calc(17 * var(--m))); }
	.ficha__lema { margin-top: calc(24 * var(--m)); }
	.ficha__desc { margin-top: calc(24 * var(--m)); }

	.ficha__info {
		align-items: stretch;
		gap: calc(12 * var(--m));
		margin-top: calc(36 * var(--m));
		text-align: left;
	}
	.info-box,
	.info-box + .info-box {
		gap: calc(16 * var(--m));
		width: auto;
		padding: calc(20 * var(--m));
		border-radius: calc(12 * var(--m));
	}
	.info-box__item {
		flex-direction: row;
		align-items: center;
		gap: calc(14 * var(--m));
	}
	.info-box__item svg { flex: none; width: calc(30 * var(--m)); height: auto; max-height: calc(30 * var(--m)); }
	.info-box__item p { font-size: max(14px, calc(15 * var(--m))); }

	.ideas { padding: calc(88 * var(--m)) var(--gx) 0; }
	.ideas__title { font-size: calc(40 * var(--m)); line-height: 1; }
	.ideas__grid { margin: calc(36 * var(--m)) calc(-1 * var(--gx)) 0; }
	.ideas .btn { margin-top: calc(36 * var(--m)); }
}

@media (min-width: 600px) and (max-width: 1023px), (min-width: 600px) and (orientation: portrait) {
	.ficha__card {
		margin-top: calc(170 * var(--m));
		padding: calc(160 * var(--m)) calc(36 * var(--m)) calc(48 * var(--m));
	}
	.ficha__card--pack { padding-top: calc(100 * var(--m)); }
	.ficha__card--pack .ficha__img { top: calc(-160 * var(--m)); width: 78%; }
	.ficha__card--lata .ficha__img { top: calc(-160 * var(--m)); height: calc(300 * var(--m)); }
	.ficha__title { font-size: calc(32 * var(--m)); }
	.ficha__lema,
	.ficha__desc { max-width: 28em; font-size: calc(14 * var(--m)); }

	.info-box__item p { font-size: max(14px, calc(12 * var(--m))); }
	.info-box__item svg { width: calc(26 * var(--m)); max-height: calc(26 * var(--m)); }
	/* las dos cajas en fila (desde 700: por debajo quedan demasiado estrechas) */
	@media (min-width: 700px) {
		.ficha__info { flex-direction: row; justify-content: center; }
		.info-box,
		.info-box + .info-box { flex: 1; max-width: calc(300 * var(--m)); }
	}

	.ideas__title { font-size: calc(36 * var(--m)); }
}

/* Móvil en horizontal: la foto de la ficha y las cards de artículo (carruseles), limitadas por la unidad (que depende del alto) */
@media (max-width: 1023px) and (orientation: landscape) and (max-height: 540px) {
	.blog-home__grid .post-card,
	.ideas__grid .post-card { width: calc(320 * var(--m)); }
	.post-card__title { font-size: max(14px, calc(15 * var(--m))); }
	.ficha__card--pack .ficha__img { width: min(78%, calc(440 * var(--m))); }
	.ficha__title { font-size: max(22px, calc(32 * var(--m))); }
	.ficha__lema,
	.ficha__desc,
	.info-box__item p { font-size: max(14px, calc(14 * var(--m))); }
}

/* ==========================================================================
   Responsive — página del blog (fuera del escritorio)
   Foto de cabecera (con su parallax) a algo más de media pantalla, título, introducción y
   artículos: una columna en móvil, dos en tablet, tres en móvil en horizontal.
   ========================================================================== */
@media (max-width: 1023px), (orientation: portrait) {
	.blog-page { padding: calc(12 * var(--m)) var(--gx) 0; }
	.blog-page__hero { height: 56svh; border-radius: calc(24 * var(--m)); }
	.blog-page__title { margin-top: calc(40 * var(--m)); font-size: calc(40 * var(--m)); line-height: 1; }
	.blog-page__intro {
		max-width: 26em;
		margin: calc(16 * var(--m)) auto 0;
		font-size: max(15px, calc(16 * var(--m)));
	}
	.blog-page__intro br { display: none; }
	.blog-page__grid {
		grid-template-columns: 1fr;
		gap: calc(48 * var(--m));
		margin-top: calc(48 * var(--m));
	}
	.blog-page__empty { margin-top: calc(48 * var(--m)); }

	/* paginación con zona táctil de 44px */
	.blog-page .pagination { margin-top: calc(56 * var(--m)); }
	.blog-page .nav-links { gap: calc(4 * var(--m)); font-size: max(14px, calc(15 * var(--m))); }
	.blog-page .page-numbers {
		display: inline-flex;
		align-items: center;
		justify-content: center;
		min-width: 44px;
		min-height: 44px;
		padding: 0 8px;
	}
}

@media (min-width: 600px) and (max-width: 1023px), (min-width: 600px) and (orientation: portrait) {
	.blog-page__hero { height: 48svh; border-radius: calc(28 * var(--m)); }
	.blog-page__title { font-size: calc(36 * var(--m)); }
	.blog-page__intro { font-size: calc(14 * var(--m)); }
	.blog-page__grid {
		grid-template-columns: 1fr 1fr;
		gap: calc(64 * var(--m)) calc(16 * var(--m));
	}
	.blog-page .post-card__title { font-size: calc(15 * var(--m)); }
}

@media (max-width: 1023px) and (orientation: landscape) and (max-height: 540px) {
	.blog-page__hero { height: 70vh; }
	.blog-page__title { font-size: max(28px, calc(36 * var(--m))); }
	.blog-page__intro { font-size: max(14px, calc(14 * var(--m))); }
	.blog-page__grid { grid-template-columns: repeat(3, 1fr); }
	.blog-page .post-card__title { font-size: max(14px, calc(15 * var(--m))); }
}

/* ==========================================================================
   Responsive — artículo del blog (y páginas legales, que usan el mismo diseño)
   Fuera del escritorio: migas, título, foto y texto a lo ancho en móvil; en tablet la foto
   al 86% y el texto en una columna de lectura cómoda, como en escritorio.
   ========================================================================== */
@media (max-width: 1023px), (orientation: portrait) {
	.articulo { padding: 0 var(--gx); }
	.articulo__title,
	.articulo--pagina .articulo__title {
		max-width: 16em;
		margin-top: calc(28 * var(--m));
		font-size: calc(32 * var(--m));
		line-height: 1.1;
	}
	.articulo__media {
		width: 100%;
		margin-top: calc(32 * var(--m));
		border-radius: calc(24 * var(--m));
	}
	.articulo__content,
	.articulo--pagina .articulo__content {
		width: auto;
		max-width: 32em;
		margin-top: calc(40 * var(--m));
		font-size: max(16px, calc(16 * var(--m)));
		line-height: 1.35;
	}
	.articulo__content h2 {
		margin: calc(48 * var(--m)) 0 calc(18 * var(--m));
		font-size: max(18px, calc(19 * var(--m)));
	}
	.articulo__content img { border-radius: calc(20 * var(--m)); }
	/* tablas anchas (páginas legales): ancho mínimo legible; se deslizan en horizontal dentro de su caja */
	.articulo__content table { min-width: 36em; font-size: max(13px, calc(14 * var(--m))); }
}

@media (min-width: 600px) and (max-width: 1023px), (min-width: 600px) and (orientation: portrait) {
	.articulo__title,
	.articulo--pagina .articulo__title { font-size: calc(34 * var(--m)); }
	.articulo__media { width: 86%; margin-top: calc(40 * var(--m)); }
	.articulo__content,
	.articulo--pagina .articulo__content {
		max-width: 30em;
		margin-top: calc(48 * var(--m));
		font-size: calc(14 * var(--m));
	}
	.articulo__content h2 { margin-top: calc(56 * var(--m)); font-size: calc(17 * var(--m)); }
}

@media (max-width: 1023px) and (orientation: landscape) and (max-height: 540px) {
	.articulo__title,
	.articulo--pagina .articulo__title { font-size: max(26px, calc(34 * var(--m))); }
	.articulo__media { width: min(86%, 90vh); }
	.articulo__content,
	.articulo--pagina .articulo__content { font-size: 16px; }
	.articulo__content h2 { font-size: 18px; }
}

/* ==========================================================================
   Responsive — página «Contacto» (fuera del escritorio)
   Contenido arriba (título, texto, botón de llamar y formulario oscuro) y debajo la foto de la
   mano con el pack sobre su forma oscura, pegada al pie (que sube y la tapa con sus esquinas).
   ========================================================================== */
@media (max-width: 1023px), (orientation: portrait) {
	.contacto {
		display: flex;
		flex-direction: column;
		min-height: 0;
		padding: calc(32 * var(--m)) 0 0;
	}
	.contacto__body {
		order: 1;
		width: auto;
		margin: 0;
		padding: 0 var(--gx);
	}
	.contacto__title { font-size: calc(48 * var(--m)); line-height: 1; }
	.contacto__text { margin-top: calc(16 * var(--m)); font-size: max(15px, calc(15 * var(--m))); }
	.contacto__tel {
		gap: 10px;
		height: 44px;
		margin-top: calc(24 * var(--m));
		padding: 0 18px 0 6px;
		font-size: 16px;
	}
	.contacto__tel-icon { width: 32px; height: 32px; }
	.contacto__tel-icon svg { width: 16px; height: 16px; }
	.contacto .contact-form { margin-top: calc(28 * var(--m)); }

	.contacto__img {
		position: relative;
		order: 2;
		top: auto;
		left: auto;
		width: 100%;
		margin-top: calc(40 * var(--m));
	}
	.contacto__forma { width: 85%; height: 62vw; } /* a la altura de la foto (no de la sección): no sube hasta el formulario */

	.site-footer.site-footer--simple { margin-top: calc(-24 * var(--m)); }
	.site-footer--simple .footer__bottom { padding-top: calc(56 * var(--m)); }
}

@media (max-width: 599px) {
	.contacto__text br { display: none; } /* los saltos del diseño de escritorio cortan raro en móvil */
}

@media (min-width: 600px) and (max-width: 1023px), (min-width: 600px) and (orientation: portrait) {
	.contacto { padding-top: calc(48 * var(--m)); }
	.contacto__body { width: min(100%, 640px); margin-inline: auto; }
	.contacto__title { font-size: calc(44 * var(--m)); }
	.contacto__text { font-size: calc(14 * var(--m)); }
	.contacto__img { width: 82%; margin-top: calc(48 * var(--m)); }
	.contacto__forma { width: 70%; height: 52vw; }
}

@media (max-width: 1023px) and (orientation: landscape) and (max-height: 540px) {
	.contacto__title { font-size: max(32px, calc(44 * var(--m))); }
	.contacto__text { font-size: 15px; }
	.contacto__img { width: min(82%, 90vh); }
	.contacto__forma { width: min(70%, 80vh); height: 56vh; }
}