/* =============================================================
   Harmony of Nature — Portada v6

   Segunda version de la portada. Vive aparte de style.css a
   proposito: la v1 sigue intacta en la home y esta hoja solo se
   encola en /portada-v6/, asi que se pueden comparar las dos sin
   que una toque a la otra.

   El sistema de color y tipo sale del canvas de diseno
   "Harmony of Nature v6": crema mas calido que la v1, verde bosque
   como color de accion (no solo de superficie) y la miel reservada
   para la banda marroqui. Cormorant Garamond se queda para los
   titulares; el texto pasa de Karla a Jost, que es lo que pide el
   canvas.

   Regla que se hereda de la v1 y no se negocia: nada arranca en
   opacity:0 salvo que el JS haya marcado la pagina con
   .harmony-v6-js. Si el script no llega, la portada se ve entera.
   Ver 04 Decisiones y Gotchas.
   ============================================================= */

@font-face {
	font-family: "Jost";
	font-style: normal;
	font-weight: 300 500;
	font-display: swap;
	src: url("../fonts/jost.woff2") format("woff2");
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6,
		U+02DA, U+02DC, U+2000-206F, U+20AC, U+2122, U+2212, U+FEFF, U+FFFD;
}

.harmony-v6 {
	/* Superficies */
	--v6-fondo:      #faf7f1;
	--v6-panel:      #fdfbf7;
	--v6-peana:      #f2ece0;
	--v6-hero:       #efe8dc;
	--v6-tira:       #f4ede1;

	/* Tinta */
	--v6-ink:        #2b2d26;
	--v6-titular:    #2b3626;
	--v6-suave:      #5b5a4e;
	/* Este gris estaba en 3,1:1 sobre los cremas de la pagina y lo
	   llevan los rotulos pequenos (antetitulos, categoria de la
	   ficha, «Ver coleccion», los pies de la franja de servicio).
	   Bajado hasta pasar 4,5:1 contra los cinco fondos claros del
	   sistema: 4,68 sobre el mas oscuro, 5,51 sobre el mas claro. */
	--v6-tenue:      #6a6756;

	/* Lineas */
	--v6-linea:      #e8e1d3;
	--v6-linea-2:    #ede6d8;
	--v6-linea-3:    #e2d9c6;

	/* Marca */
	--v6-verde:      #3c5232;
	--v6-verde-osc:  #2b3626;
	--v6-verde-prof: #33402b;
	--v6-salvia:     #7d8f63;
	--v6-miel:       #b5822a;
	--v6-miel-osc:   #8c6318;
	--v6-crema:      #f7f4ec;

	--v6-ancho:      1240px;
	--v6-ease:       cubic-bezier(.22, .7, .3, 1);
	--v6-ease-suave: cubic-bezier(.4, 0, .2, 1);
}

/* =============================================================
   Base
   ============================================================= */

.harmony-v6 {
	margin: 0;
	background: var(--v6-fondo);
	color: var(--v6-ink);
	font-family: "Jost", "Karla", system-ui, sans-serif;
	font-weight: 300;
	font-size: 15px;
	line-height: 1.65;
	overflow-x: hidden;
	-webkit-font-smoothing: antialiased;
	text-rendering: optimizeLegibility;
}
.harmony-v6 *, .harmony-v6 *::before, .harmony-v6 *::after { box-sizing: border-box; }
.harmony-v6 img { display: block; max-width: 100%; }
/* Envueltas en :where() para que no pesen nada.
   Sin esto, `.harmony-v6 a` (0,1,1) le gana a `.v6-boton` (0,1,0) y
   los botones verdes salian con el texto en tinta oscura: 1,6:1,
   practicamente ilegible. Cualquier componente con clase propia
   tiene que poder decidir su color sin pelearse con la regla base. */
:where(.harmony-v6 a) { color: inherit; text-decoration: none; transition: color .3s ease; }
:where(.harmony-v6 a:hover) { color: var(--v6-salvia); }
.harmony-v6 button { font: inherit; cursor: pointer; }
.harmony-v6 ::selection { background: #dfe3d3; }
.harmony-v6 :where(a, button, input, [tabindex]):focus-visible {
	outline: 1.5px solid var(--v6-verde);
	outline-offset: 3px;
}

.harmony-v6 h1, .harmony-v6 h2, .harmony-v6 h3 {
	font-family: "Cormorant Garamond", "Iowan Old Style", Georgia, serif;
	font-weight: 300;
	line-height: 1.14;
	letter-spacing: -0.012em;
	color: var(--v6-titular);
	margin: 0;
}

.v6-envoltura {
	max-width: var(--v6-ancho);
	margin-inline: auto;
	padding-inline: clamp(1.25rem, 4vw, 1.5rem);
}

/* Antetitulo comun a todas las secciones. */
.v6-eyebrow {
	margin: 0;
	font-size: 11px;
	letter-spacing: .2em;
	text-transform: uppercase;
	color: var(--v6-tenue);
}

/* Titular de seccion partido por una linea a cada lado. */
.v6-rotulo {
	display: flex;
	align-items: center;
	gap: clamp(.75rem, 3vw, 1.25rem);
	margin-bottom: clamp(1.5rem, 4vw, 2.25rem);
}
.v6-rotulo::before,
.v6-rotulo::after {
	content: "";
	flex: 1;
	height: 1px;
	background: var(--v6-linea-3);
}
.v6-rotulo h2 {
	font-family: "Jost", sans-serif;
	font-weight: 400;
	font-size: 12.5px;
	letter-spacing: .24em;
	text-transform: uppercase;
	white-space: nowrap;
}

/* Boton unico de la v6, en cuatro pesos. */
.v6-boton {
	display: inline-flex;
	align-items: center;
	gap: .7em;
	border: 0;
	background: var(--v6-verde);
	color: var(--v6-crema);
	font-size: 11.5px;
	font-weight: 400;
	letter-spacing: .16em;
	text-transform: uppercase;
	padding: 15px 28px;
	position: relative;
	overflow: hidden;
	transition: background .3s ease, transform .3s var(--v6-ease), box-shadow .3s ease;
}
.v6-boton:hover {
	background: var(--v6-verde-osc);
	color: var(--v6-crema);
	transform: translateY(-2px);
	box-shadow: 0 10px 22px rgba(43, 54, 38, .22);
}
.v6-boton:active { transform: translateY(0); }
/* La flecha adelanta un paso al pasar por encima. */
.v6-boton span[aria-hidden] { transition: transform .3s var(--v6-ease); }
.v6-boton:hover span[aria-hidden] { transform: translateX(4px); }

.v6-boton--linea {
	background: transparent;
	color: var(--v6-titular);
	border: 1px solid var(--v6-linea-3);
}
.v6-boton--linea:hover {
	background: var(--v6-verde);
	color: var(--v6-crema);
	border-color: var(--v6-verde);
}
.v6-boton--claro {
	background: transparent;
	color: var(--v6-crema);
	/* Sobre una foto, medio tono de borde desaparece, y el rotulo
	   se pierde justo donde la imagen tiene su parte clara. Un
	   fondo apenas velado lo sostiene sin dejar de ser fantasma. */
	border: 1px solid rgba(244, 241, 230, .72);
	background: rgba(18, 24, 14, .44);
	backdrop-filter: blur(2px);
}
.v6-boton--claro:hover {
	background: var(--v6-crema);
	color: var(--v6-verde-prof);
	border-color: var(--v6-crema);
}
.v6-boton--miel { background: var(--v6-miel); }
.v6-boton--miel:hover { background: var(--v6-miel-osc); }

/* =============================================================
   Barra de aviso y cabecera
   ============================================================= */

.v6-barra {
	background: var(--v6-verde-osc);
	color: #e7e3d7;
	font-size: 11.5px;
	letter-spacing: .06em;
	padding: 9px 24px;
	overflow: hidden;
}
.v6-barra__pista {
	display: flex;
	justify-content: center;
	gap: 56px;
	flex-wrap: wrap;
	margin: 0;
	list-style: none;
	padding: 0;
}
.v6-barra li { display: flex; align-items: center; gap: .5em; }
.v6-barra li::before { content: "✿"; color: #9db07f; font-size: 10px; }

/* En movil los tres avisos no caben en una linea: se turnan en el
   sitio en vez de apilarse y empujar la pagina hacia abajo. */
@media (max-width: 719px) {
	.v6-barra__pista { display: grid; justify-content: stretch; }
	.v6-barra li {
		grid-area: 1 / 1;
		justify-content: center;
		opacity: 0;
		animation: v6-turno 12s linear infinite;
	}
	.v6-barra li:nth-child(2) { animation-delay: 4s; }
	.v6-barra li:nth-child(3) { animation-delay: 8s; }
	@keyframes v6-turno {
		0%, 2%    { opacity: 0; transform: translateY(6px); }
		6%, 30%   { opacity: 1; transform: none; }
		34%, 100% { opacity: 0; transform: translateY(-6px); }
	}
	/* Sin animaciones se ve el primero y ya. */
	@media (prefers-reduced-motion: reduce) {
		.v6-barra li { opacity: 0; animation: none; }
		.v6-barra li:first-child { opacity: 1; }
	}
}

.v6-cabecera {
	position: sticky;
	top: 0;
	z-index: 30;
	background: var(--v6-panel);
	border-bottom: 1px solid var(--v6-linea);
	transition: box-shadow .35s ease, background .35s ease;
}
.v6-cabecera.is-pegada { box-shadow: 0 6px 24px rgba(43, 54, 38, .10); }

.v6-cabecera__barra {
	max-width: var(--v6-ancho);
	margin-inline: auto;
	padding: 14px clamp(1.25rem, 4vw, 1.5rem);
	display: flex;
	align-items: center;
	gap: 18px;
	transition: padding .35s ease;
}
/* Al bajar, la cabecera se estrecha para devolver alto a la pagina. */
.v6-cabecera.is-pegada .v6-cabecera__barra { padding-block: 8px; }

.v6-logo {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 2px;
	flex: none;
	white-space: nowrap;
	line-height: 1;
}
.v6-logo img {
	width: 30px;
	height: 30px;
	object-fit: contain;
	transition: transform .5s var(--v6-ease);
}
.v6-logo:hover img { transform: rotate(-6deg) scale(1.08); }
.v6-logo__nombre {
	font-family: "Cormorant Garamond", serif;
	font-size: 19px;
	letter-spacing: .14em;
	color: var(--v6-titular);
}
.v6-logo__cola {
	font-size: 8.5px;
	letter-spacing: .34em;
	color: var(--v6-tenue);
}
.v6-cabecera.is-pegada .v6-logo { flex-direction: row; gap: 8px; align-items: baseline; }
.v6-cabecera.is-pegada .v6-logo img { width: 22px; height: 22px; align-self: center; }
.v6-cabecera.is-pegada .v6-logo__cola { display: none; }

.v6-nav {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 6px 20px;
	margin: 0 auto;
	font-size: 11px;
	letter-spacing: .1em;
	text-transform: uppercase;
	min-width: 0;
	flex: 1 1 auto;
}
/* Subrayado que crece desde el centro. Es la unica floritura del
   menu: en una cabecera pegajosa, un hover que mueve texto marea. */
.v6-nav a {
	position: relative;
	padding-bottom: 4px;
	color: var(--v6-ink);
}
.v6-nav a::after {
	content: "";
	position: absolute;
	left: 50%;
	bottom: 0;
	width: 0;
	height: 1px;
	background: var(--v6-verde);
	transform: translateX(-50%);
	transition: width .3s var(--v6-ease);
}
.v6-nav a:hover::after,
.v6-nav a[aria-current="page"]::after { width: 100%; }

.v6-utiles { display: flex; align-items: center; gap: 14px; flex: none; }
.v6-utiles .harmony-cesta { display: flex; align-items: center; color: var(--v6-ink); }
.v6-utiles .harmony-cesta:hover { color: var(--v6-verde); }

/* Menu de movil: casilla oculta, sin JS.
   No lleva display:none. Con display:none el input deja de ser
   enfocable y el menu se vuelve inalcanzable con teclado; asi se
   oculta a la vista pero sigue en el arbol de foco, y el borde de
   foco se pinta sobre la etiqueta. */
.v6-nav__interruptor {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	border: 0;
	clip-path: inset(50%);
	overflow: hidden;
	white-space: nowrap;
}
.v6-nav__interruptor:focus-visible + .v6-nav__boton {
	outline: 1.5px solid var(--v6-verde);
	outline-offset: 3px;
}
.v6-nav__boton { display: none; }
.v6-nav__boton svg { transition: transform .35s var(--v6-ease); }
.v6-nav__interruptor:checked + .v6-nav__boton svg { transform: rotate(90deg); }

/* WordPress la trae en su hoja comun, pero la v6 no depende de que
   esa hoja este encolada. */
.harmony-v6 .screen-reader-text {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	border: 0;
	clip-path: inset(50%);
	overflow: hidden;
	white-space: nowrap;
}

@media (max-width: 899px) {
	.v6-nav__boton {
		display: flex;
		flex: none;
		order: 3;
		background: none;
		border: 0;
		padding: 6px;
		color: var(--v6-ink);
	}
	/* La barra tiene que poder envolver: sin esto el menu no baja a
	   una segunda linea, se queda en la misma fila y se desborda
	   por encima del hero. */
	.v6-cabecera__barra { flex-wrap: wrap; }
	.v6-nav {
		order: 4;
		flex: 0 0 100%;
		display: grid;
		/* 0fr → 1fr anima el despliegue sin tener que saber cuanto
		   mide el menu. Necesita min-height:0 en el hijo: si no, su
		   contenido impide que la fila llegue a valer cero. */
		grid-template-rows: 0fr;
		transition: grid-template-rows .4s var(--v6-ease);
	}
	.v6-nav > .v6-nav__lista { overflow: hidden; min-height: 0; }
	.v6-nav__interruptor:checked ~ .v6-nav { grid-template-rows: 1fr; }
	.v6-nav__lista {
		display: flex;
		flex-direction: column;
		align-items: center;
		gap: 2px;
		margin: 0;
		padding: 0;
		list-style: none;
	}
	.v6-nav__lista a { display: block; padding: 12px 0; font-size: 12.5px; }
	.v6-nav__interruptor:checked ~ .v6-nav .v6-nav__lista { padding-block: 10px 16px; }
}
@media (min-width: 900px) {
	.v6-nav__lista {
		display: flex;
		flex-wrap: wrap;
		justify-content: center;
		gap: 6px 20px;
		margin: 0;
		padding: 0;
		list-style: none;
	}
}

/* =============================================================
   Hero — dos pases que se turnan
   ============================================================= */

.v6-hero {
	position: relative;
	background: var(--v6-hero);
	overflow: hidden;
	isolation: isolate;
}

/* Los pases se apilan en la misma celda para que el hero no cambie
   de alto al pasar de uno a otro. Igual que en la v1. */
.v6-hero__pista { display: grid; }
.v6-pase {
	grid-area: 1 / 1;
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
	min-height: min(78vh, 620px);
}
.v6-pase[hidden] { display: none; }

.v6-pase__texto {
	padding: clamp(2.5rem, 6vw, 4.4rem) clamp(1.5rem, 5vw, 3.5rem);
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	justify-content: center;
	gap: clamp(1rem, 2.5vw, 1.65rem);
	z-index: 2;
}
.v6-pase__texto h1 {
	/* Mas grande de lo que pedia el canvas (56 px), que estaba
	   dibujado sobre una mesa de 1200. En un monitor ancho, un
	   titular de 58 px en un hero de 620 no compone: se queda a
	   medio camino entre titular y parrafo. Congelado tiene que
	   poder leerse como un cartel. */
	font-size: clamp(38px, 5vw, 72px);
	line-height: 1.1;
}
.v6-pase__texto h1 em { font-style: italic; color: var(--v6-verde); }
.v6-pase__lede {
	margin: 0;
	font-size: 14.5px;
	line-height: 1.8;
	max-width: 36ch;
	color: var(--v6-suave);
}

/* Entrada del pase: solo desplazamiento, nunca opacidad.

   Es la regla de la v1 y hay que respetarla tambien aqui. Una
   animacion que arranca en opacity:0 deja el titular invisible en
   cuanto su linea de tiempo no avanza, y hay mas casos de los que
   parece: pestana en segundo plano (Chrome congela el recalculo de
   estilo), impresion, capturas headless, restauracion desde bfcache.
   Con solo transform, lo peor que pasa es que el texto se quede
   18 px mas abajo. Ver 04 Decisiones y Gotchas. */
.harmony-v6-js .v6-pase.is-activo > * > .v6-anima {
	animation: v6-sube .9s var(--v6-ease) both;
}
.harmony-v6-js .v6-pase.is-activo .v6-anima:nth-child(2) { animation-delay: .12s; }
.harmony-v6-js .v6-pase.is-activo .v6-anima:nth-child(3) { animation-delay: .24s; }
.harmony-v6-js .v6-pase.is-activo .v6-anima:nth-child(4) { animation-delay: .34s; }
@keyframes v6-sube {
	from { transform: translateY(18px); }
	to   { transform: none; }
}

/* --- La parte que se mueve: producto flotando sobre un halo --- */

.v6-pase__escena {
	position: relative;
	min-height: clamp(320px, 46vw, 520px);
	display: grid;
	place-items: center;
	padding: clamp(1.5rem, 4vw, 3rem);
}

/* Halo calido que respira detras del producto. Es lo que separa el
   recorte del fondo plano: sin el, la foto flota sin pertenecer a
   ninguna parte. */
.v6-pase__halo {
	position: absolute;
	inset: 8% 10%;
	border-radius: 50%;
	background:
		radial-gradient(circle at 50% 45%, rgba(255, 250, 236, .95), rgba(245, 232, 205, .55) 45%, transparent 70%);
	z-index: 0;
}
.harmony-v6-js .v6-pase.is-activo .v6-pase__halo { animation: v6-respira 9s ease-in-out infinite; }
@keyframes v6-respira {
	0%, 100% { transform: scale(1);    opacity: .9; }
	50%      { transform: scale(1.07); opacity: 1; }
}

.v6-pase__producto {
	position: relative;
	z-index: 1;
	width: 100%;
	height: min(56vh, 480px);
	min-height: 0;
	min-width: 0;
	object-fit: contain;
	object-position: center bottom;
	/* Doble sombra: una pegada al objeto para dar volumen y otra
	   larga y difusa para separarlo del fondo. Con una sola, o se
	   ve recortado o se ve sucio. */
	filter:
		drop-shadow(0 6px 10px rgba(43, 54, 38, .18))
		drop-shadow(0 34px 46px rgba(43, 54, 38, .16));
}
.harmony-v6-js .v6-pase.is-activo .v6-pase__producto { animation: v6-flota 7s ease-in-out infinite 1s; }
@keyframes v6-flota {
	0%, 100% { transform: translateY(0)     rotate(0deg); }
	50%      { transform: translateY(-14px) rotate(-.6deg); }
}

/* Sombra de contacto en el suelo. Va aparte del drop-shadow porque
   tiene que encogerse cuando el producto sube: es lo que hace que
   el flotar se lea como flotar y no como deslizarse. */
.v6-pase__suelo {
	position: absolute;
	bottom: clamp(2rem, 6vw, 3.6rem);
	left: 50%;
	width: min(52%, 300px);
	height: 26px;
	transform: translateX(-50%);
	background: radial-gradient(ellipse at center, rgba(43, 54, 38, .26), transparent 70%);
	filter: blur(7px);
	z-index: 0;
}
.harmony-v6-js .v6-pase.is-activo .v6-pase__suelo { animation: v6-suelo 7s ease-in-out infinite 1s; }
@keyframes v6-suelo {
	0%, 100% { transform: translateX(-50%) scale(1);          opacity: .85; }
	50%      { transform: translateX(-50%) scale(.82, .7);    opacity: .5; }
}

/* Motas de polen a la deriva. Puramente decorativas: van en
   aria-hidden y desaparecen con prefers-reduced-motion. */
.v6-motas {
	position: absolute;
	inset: 0;
	pointer-events: none;
	overflow: hidden;
	z-index: 1;
}
.v6-mota {
	position: absolute;
	width: 6px;
	height: 6px;
	border-radius: 50%;
	background: radial-gradient(circle at 30% 30%, rgba(255, 252, 240, .95), rgba(214, 178, 106, .45));
	opacity: 0;
}
.harmony-v6-js .v6-mota { animation: v6-deriva linear infinite; }
@keyframes v6-deriva {
	0%   { opacity: 0;   transform: translate(0, 0) scale(.6); }
	12%  { opacity: .85; }
	80%  { opacity: .5; }
	100% { opacity: 0;   transform: translate(var(--dx, 30px), -130px) scale(1.1); }
}

/* Pase con foto de ambiente en vez de recorte: ken burns lento. */
.v6-pase__foto { position: relative; overflow: hidden; min-height: clamp(320px, 46vw, 520px); }
.v6-pase__foto img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
}
.harmony-v6-js .v6-pase.is-activo .v6-pase__foto img { animation: v6-kenburns 20s ease-out both; }
@keyframes v6-kenburns {
	from { transform: scale(1)    translate(0, 0); }
	to   { transform: scale(1.09) translate(-1.5%, -1%); }
}

/* Mandos: barritas que se llenan solas mientras dura el pase. */
.v6-hero__mandos {
	position: absolute;
	left: clamp(1.5rem, 5vw, 3.5rem);
	bottom: clamp(1.25rem, 3vw, 2rem);
	display: flex;
	gap: 10px;
	z-index: 3;
}
.v6-hero__punto {
	position: relative;
	width: 42px;
	height: 2px;
	padding: 0;
	border: 0;
	background: rgba(43, 54, 38, .22);
	overflow: hidden;
}
.v6-hero__punto::after {
	content: "";
	position: absolute;
	inset: 0;
	width: 0;
	background: var(--v6-verde);
}
.v6-hero__punto.is-activo::after { width: 100%; }
/* La barra se llena en el tiempo que dura el pase: el visitante ve
   cuanto le queda y por que cambia solo. */
.harmony-v6-js .v6-hero__punto.is-activo::after { animation: v6-carga var(--v6-espera, 7s) linear both; }
.harmony-v6-js .v6-hero.is-parado .v6-hero__punto.is-activo::after { animation-play-state: paused; }
@keyframes v6-carga { from { width: 0; } to { width: 100%; } }

/* Ola que remata el hero contra la seccion siguiente. */
.v6-hero__ola {
	position: absolute;
	left: 0;
	right: 0;
	bottom: -1px;
	height: clamp(28px, 4vw, 52px);
	z-index: 2;
	pointer-events: none;
	fill: var(--v6-panel);
}

/* =============================================================
   Tira de confianza — cinta continua
   ============================================================= */

.v6-tira {
	background: var(--v6-panel);
	border-bottom: 1px solid var(--v6-linea-2);
	overflow: hidden;
	padding-block: 18px;
}
.v6-tira__pista {
	display: flex;
	width: max-content;
	gap: 0;
}
.harmony-v6-js .v6-tira__pista { animation: v6-cinta 42s linear infinite; }
.v6-tira:hover .v6-tira__pista { animation-play-state: paused; }
@keyframes v6-cinta { to { transform: translateX(-50%); } }

.v6-tira__grupo {
	display: flex;
	align-items: center;
	gap: 46px;
	padding-right: 46px;
	margin: 0;
	list-style: none;
	font-size: 12px;
	letter-spacing: .04em;
	color: var(--v6-suave);
	white-space: nowrap;
}
.v6-tira__grupo li { display: flex; align-items: center; gap: 9px; }
.v6-tira__grupo li::before { content: "✿"; color: var(--v6-salvia); }

/* Sin animacion la cinta se queda quieta y con una sola copia
   visible; la segunda es solo para el bucle. */
@media (prefers-reduced-motion: reduce) {
	.v6-tira__pista { width: 100%; }
	.v6-tira__grupo:nth-child(2) { display: none; }
	.v6-tira__grupo { flex-wrap: wrap; justify-content: center; gap: 16px 30px; }
}

/* =============================================================
   Peana 3D — el tratamiento de los recortes

   El catalogo entero son fotos recortadas sobre fondo transparente.
   Puestas tal cual sobre un panel plano se leen como pegatinas: no
   pesan, no tocan nada y no se sabe si estan delante o detras.

   La peana les monta un pequeno escenario con cuatro capas:
     1. halo   — luz calida detras, para despegar el objeto del panel
     2. suelo  — sombra de contacto eliptica, que es lo que dice
                 "esto se apoya aqui"
     3. reflejo— copia especular desvanecida, como sobre una mesa
                 pulida (solo Chromium/Safari; donde no hay, el
                 suelo ya sostiene la escena)
     4. doble drop-shadow sobre la propia imagen: una corta para el
        volumen y otra larga y suave para la distancia

   Encima, al pasar el raton, la peana se inclina siguiendo al
   cursor (el JS escribe --rx y --ry). Sin JS no se inclina, pero
   las cuatro capas siguen ahi.
   ============================================================= */

.v6-peana {
	position: relative;
	display: grid;
	/* stretch, no center: la escena tiene que ocupar toda la celda
	   para que su altura sea definida. Centrada, su alto lo decidia
	   el contenido, los porcentajes de dentro caian a auto y el
	   recorte alto (la botella de argan) se salia de la peana. */
	place-items: stretch;
	aspect-ratio: 1 / 1;
	padding: clamp(14px, 3vw, 26px);
	background:
		radial-gradient(ellipse 70% 55% at 50% 38%, #f8f2e6, var(--v6-peana) 68%),
		var(--v6-peana);
	overflow: hidden;
	transition: box-shadow .45s var(--v6-ease);
}

.v6-peana__escena {
	position: relative;
	display: grid;
	place-items: center;
	width: 100%;
	height: 100%;
	/* Los items de una retícula traen min-height:auto, asi que no
	   pueden encoger por debajo de su contenido. Con la imagen
	   pidiendo height:100% —que depende de esta altura— el calculo
	   es circular: caia a la altura intrinseca del recorte y la
	   escena se salia de la peana. Con min-height:0 la celda vale
	   exactamente lo que dice la retícula. */
	min-height: 0;
	min-width: 0;
	/* La perspectiva va aqui, en la propia transformada, en vez de
	   en el padre con transform-style:preserve-3d. Aquello montaba
	   un contexto 3D anidado con capas hijas en translateZ, y
	   Chrome promocionaba cada recorte a su propia capa de
	   compositor: en una parrilla de catorce peanas el resultado
	   era que unas cuantas no llegaban a pintarse. Una sola
	   transformada plana da la misma inclinacion sin capas. */
	transform: perspective(900px) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg));
	transition: transform .5s var(--v6-ease);
}
/* Mientras el cursor esta encima el seguimiento tiene que ser
   inmediato; la transicion larga solo sirve para volver al sitio. */
.v6-peana.is-tocada .v6-peana__escena { transition: transform .12s linear; }

.v6-peana__halo {
	position: absolute;
	inset: 6%;
	border-radius: 50%;
	background: radial-gradient(circle at 50% 42%, rgba(255, 253, 245, .95), rgba(247, 236, 214, .5) 52%, transparent 72%);
	opacity: .85;
	transition: opacity .45s ease, transform .6s var(--v6-ease);
}

.v6-peana__suelo {
	position: absolute;
	left: 50%;
	bottom: 8%;
	width: 62%;
	height: 16px;
	transform: translateX(-50%);
	background: radial-gradient(ellipse at center, rgba(43, 54, 38, .3), transparent 70%);
	filter: blur(6px);
	transition: transform .5s var(--v6-ease), opacity .5s ease;
}

.v6-peana :is(img, .v6-product-photo) {
	/* Posicionada contra la escena, no en flujo.
	   Las dos formas de dejarla en flujo fallan: con width/height
	   auto una imagen todavia sin cargar mide 0x0 —la regla de
	   autor gana a los atributos width/height del HTML— y una
	   imagen de 0x0 con loading="lazy" no cruza nunca el umbral que
	   dispara su propia carga; y con height:100% el min-height:auto
	   de los items de retícula la devuelve a su alto intrinseco, y
	   el tarro alto se sale de la peana.
	   Con las cuatro esquinas fijadas el tamano lo manda la escena
	   siempre, cargue la imagen cuando cargue, y object-fit:contain
	   respeta la proporcion. */
	position: relative;
	z-index: 1;
	/* Los tres tienen que ir juntos:
	   · width/height al 100 % anulan los atributos width y height
	     del HTML, que si no fijan la caja al tamano del archivo;
	   · min-height:0 desactiva el min-height:auto que traen los
	     items de una retícula y que devolvia la imagen a su alto
	     intrinseco, sacandola de la peana;
	   · object-fit:contain conserva la proporcion dentro de la caja.
	   Y como la caja mide lo mismo este la imagen cargada o no, el
	   loading="lazy" arranca: una imagen de 0x0 nunca cruza el
	   umbral que dispara su propia carga. */
	width: 100%;
	height: 100%;
	min-height: 0;
	min-width: 0;
	object-fit: contain;
	/* Todos los productos apoyados en la misma linea: es lo que
	   hace que la sombra de contacto caiga donde toca por muy
	   distintas que sean las siluetas (tarro alto, jabon ancho). */
	object-position: center bottom;
	filter:
		drop-shadow(0 4px 6px rgba(43, 54, 38, .16))
		drop-shadow(0 20px 26px rgba(43, 54, 38, .14));
	transition: transform .5s var(--v6-ease), filter .5s ease;
	-webkit-box-reflect: below 1px linear-gradient(transparent 58%, rgba(0, 0, 0, .18));
}

/* Brillo que barre la peana al entrar el cursor. Un solo pase, no
   un bucle: en una parrilla de doce fichas, doce brillos latiendo a
   la vez es una discoteca. */
.v6-peana::after {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(105deg, transparent 38%, rgba(255, 255, 255, .55) 50%, transparent 62%);
	transform: translateX(-120%);
	pointer-events: none;
	z-index: 2;
}

.v6-3d:hover .v6-peana,
.v6-3d:focus-within .v6-peana { box-shadow: 0 18px 40px rgba(43, 54, 38, .14); }

.v6-3d:hover .v6-peana :is(img, .v6-product-photo),
.v6-3d:focus-within .v6-peana :is(img, .v6-product-photo) {
	transform: translateY(-10px) scale(1.04);
	filter:
		drop-shadow(0 6px 8px rgba(43, 54, 38, .18))
		drop-shadow(0 34px 40px rgba(43, 54, 38, .2));
}
.v6-3d:hover .v6-peana__suelo,
.v6-3d:focus-within .v6-peana__suelo {
	transform: translateX(-50%) scale(.8, .72);
	opacity: .6;
}
.v6-3d:hover .v6-peana__halo,
.v6-3d:focus-within .v6-peana__halo { opacity: 1; transform: scale(1.06); }

.v6-3d:hover .v6-peana::after { animation: v6-brillo .9s var(--v6-ease-suave); }
@keyframes v6-brillo { to { transform: translateX(120%); } }

@media (prefers-reduced-motion: reduce) {
	.v6-peana__escena { transform: none !important; }
	.v6-3d:hover .v6-peana :is(img, .v6-product-photo) { transform: none; }
	.v6-3d:hover .v6-peana::after { animation: none; }
}

/* =============================================================
   Colecciones
   ============================================================= */

.v6-colecciones { padding-block: clamp(2.5rem, 6vw, 4rem) clamp(1rem, 2vw, 1.5rem); }
.v6-colecciones__lista {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(168px, 1fr));
	gap: 14px;
}
.v6-coleccion > a {
	display: flex;
	flex-direction: column;
	height: 100%;
	border: 1px solid var(--v6-linea);
	background: var(--v6-panel);
	transition: transform .4s var(--v6-ease), box-shadow .4s ease, border-color .3s ease;
}
.v6-coleccion > a:hover,
.v6-coleccion > a:focus-visible {
	border-color: #c9bfa8;
	transform: translateY(-6px);
	box-shadow: 0 14px 30px rgba(43, 54, 38, .12);
}
.v6-coleccion__pie {
	padding: 14px 12px 16px;
	text-align: center;
	display: flex;
	flex-direction: column;
	gap: 6px;
}
.v6-coleccion__nombre {
	font-size: 12.5px;
	letter-spacing: .14em;
	text-transform: uppercase;
	line-height: 1.5;
	color: var(--v6-titular);
}
.v6-coleccion__mas { font-size: 11.5px; color: var(--v6-tenue); }
.v6-coleccion__mas span { display: inline-block; transition: transform .3s var(--v6-ease); }
.v6-coleccion > a:hover .v6-coleccion__mas span { transform: translateX(4px); }

/* Familia sin producto publicado: se marca y lleva a WhatsApp, no a
   un archivo vacio. Se hereda de la v1. */
.v6-etiqueta {
	position: absolute;
	top: 10px;
	left: 10px;
	z-index: 3;
	background: var(--v6-verde-osc);
	color: var(--v6-crema);
	font-size: 9px;
	letter-spacing: .14em;
	text-transform: uppercase;
	padding: 5px 9px;
}
.v6-coleccion--espera .v6-peana :is(img, .v6-product-photo) { opacity: .8; }

/* =============================================================
   Pack destacado
   ============================================================= */

.v6-pack { padding-block: clamp(1rem, 3vw, 2rem); }
.v6-pack__caja {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
	background: var(--v6-peana);
	overflow: hidden;
}
.v6-pack__texto {
	padding: clamp(2rem, 5vw, 3rem);
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	justify-content: center;
	gap: 14px;
}
.v6-pack__texto h2 { font-size: clamp(28px, 3.4vw, 38px); }
.v6-pack__lista {
	list-style: none;
	margin: 6px 0 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 7px;
	font-size: 13px;
	color: #4a4a3f;
}
.v6-pack__lista li { display: flex; align-items: center; gap: 10px; }
.v6-pack__lista li::before { content: "✓"; color: var(--v6-salvia); }

.v6-pack__escena {
	position: relative;
	min-height: 320px;
	display: grid;
	place-items: center;
	padding: clamp(1.5rem, 4vw, 2.5rem);
	background:
		radial-gradient(ellipse 60% 50% at 50% 40%, #f9f3e7, transparent 70%),
		var(--v6-peana);
}

/* Medallon del precio. Gira despacio, como un sello lacrado. */
.v6-medallon {
	position: absolute;
	right: clamp(1rem, 3vw, 1.75rem);
	bottom: clamp(1rem, 3vw, 1.75rem);
	width: 96px;
	height: 96px;
	border-radius: 999px;
	background: var(--v6-verde-osc);
	color: var(--v6-peana);
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 2px;
	pointer-events: none;
	z-index: 3;
	box-shadow: 0 10px 26px rgba(43, 54, 38, .28);
}
.v6-medallon__cifra { font-family: "Cormorant Garamond", serif; font-size: 24px; line-height: 1; }
.v6-medallon__pie { font-size: 8px; letter-spacing: .14em; text-align: center; line-height: 1.3; }
.harmony-v6-js .v6-medallon { animation: v6-late 5s ease-in-out infinite; }
@keyframes v6-late {
	0%, 100% { transform: scale(1)    rotate(-4deg); }
	50%      { transform: scale(1.05) rotate(4deg); }
}

/* =============================================================
   Favoritos
   ============================================================= */

.v6-favoritos { padding-block: clamp(2rem, 5vw, 3rem) clamp(1rem, 2vw, 1.5rem); }
.v6-fichas {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(178px, 1fr));
	gap: clamp(1rem, 2.5vw, 1.4rem);
}
.v6-ficha { display: flex; flex-direction: column; margin: 0; }
.v6-ficha__datos {
	padding: 12px 2px 0;
	display: flex;
	flex-direction: column;
	gap: 4px;
	flex: 1;
}
.v6-ficha__nombre { font-size: 13.5px; line-height: 1.4; color: var(--v6-titular); }
.v6-ficha__cat { font-size: 12px; color: var(--v6-tenue); }
.v6-ficha__fila {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 10px;
	margin-top: auto;
	padding-top: 8px;
}
.v6-ficha__precio {
	font-size: 14.5px;
	font-variant-numeric: tabular-nums;
	color: var(--v6-titular);
}
.v6-ficha__precio del { opacity: .45; font-size: .88em; margin-right: .35em; }
.v6-ficha__precio ins { text-decoration: none; }
.v6-ficha__precio .harmony-precio-pendiente { font-size: 12.5px; }

/* Boton de anadir: redondo, y crece un poco al pasar por encima.
   Cuando el producto no se puede comprar (sin precio) el mismo
   hueco lleva a la ficha, para no dejar un boton muerto. */
.v6-ficha__mas {
	width: 34px;
	height: 34px;
	flex: none;
	border-radius: 999px;
	border: 0;
	background: var(--v6-verde);
	color: var(--v6-crema);
	font-size: 15px;
	line-height: 1;
	display: flex;
	align-items: center;
	justify-content: center;
	transition: background .3s ease, transform .3s var(--v6-ease);
}
.v6-ficha__mas:hover { background: var(--v6-verde-osc); color: var(--v6-crema); transform: scale(1.14); }
.v6-ficha__mas.is-anadido { animation: v6-pop .45s var(--v6-ease); }
@keyframes v6-pop {
	0%   { transform: scale(1); }
	45%  { transform: scale(1.38); }
	100% { transform: scale(1); }
}
.v6-ficha__mas--ver { font-size: 11px; letter-spacing: .04em; width: auto; padding-inline: 12px; }

.v6-favoritos__pie { margin: clamp(1.75rem, 4vw, 2.75rem) 0 0; text-align: center; }

/* La burbuja del contador de la cesta salta cuando entra algo. */
.v6-utiles .harmony-cesta__num.is-nuevo { animation: v6-pop .45s var(--v6-ease); }

/* =============================================================
   Bandas de familia — argan y miel
   ============================================================= */

.v6-bandas {
	padding-block: clamp(1rem, 3vw, 1.75rem);
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
	gap: 14px;
}
.v6-banda {
	position: relative;
	min-height: 260px;
	display: flex;
	overflow: hidden;
	isolation: isolate;
}
.v6-banda--verde { background: var(--v6-verde-prof); }
.v6-banda--miel  { background: var(--v6-miel); }

.v6-banda__fondo {
	position: absolute;
	inset: -6%;
	z-index: 0;
	opacity: .5;
}
.v6-banda__fondo img { width: 100%; height: 100%; object-fit: cover; }
/* Paralaje suave: el fondo se mueve menos que la pagina. La
   variable la escribe el JS al hacer scroll. */
.harmony-v6-js .v6-banda__fondo { transform: translateY(var(--par, 0px)); will-change: transform; }
.v6-banda:hover .v6-banda__fondo { opacity: .62; }
.v6-banda__fondo { transition: opacity .5s ease; }

.v6-banda__texto {
	position: relative;
	z-index: 1;
	padding: clamp(1.75rem, 4vw, 2.4rem);
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	justify-content: center;
	gap: 12px;
	max-width: 66%;
}
.v6-banda__texto h3 {
	font-size: clamp(24px, 2.6vw, 31px);
	text-transform: uppercase;
	letter-spacing: .01em;
}
.v6-banda--verde h3 { color: #f4f1e6; }
.v6-banda--verde p  { color: #e2e0d2; }
.v6-banda--miel h3  { color: #fdf8ec; }
.v6-banda--miel p   { color: #f6ecd8; }
.v6-banda__texto p { margin: 0; font-size: 13px; line-height: 1.65; }
.v6-banda__acciones { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 6px; }
.v6-banda__acciones .v6-boton { padding: 11px 16px; font-size: 11px; letter-spacing: .12em; }
.v6-banda--miel .v6-boton--claro:hover { color: var(--v6-miel-osc); }

/* =============================================================
   Historia
   ============================================================= */

.v6-historia { padding-block: clamp(1rem, 3vw, 1.75rem); }
.v6-historia__caja {
	position: relative;
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
	background: var(--v6-panel);
	border: 1px solid var(--v6-linea-2);
	overflow: hidden;
}
.v6-historia__media { position: relative; min-height: 320px; overflow: hidden; }
.v6-historia__media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.harmony-v6-js .v6-historia__media img { transform: scale(1.12) translateY(var(--par, 0px)); will-change: transform; }

/* El nombre en hueco de fondo, como en la v1: es textura, no texto. */
.v6-historia__filigrana {
	position: absolute;
	right: -2%;
	bottom: -14%;
	font-family: "Cormorant Garamond", serif;
	font-size: clamp(90px, 15vw, 200px);
	line-height: 1;
	color: transparent;
	-webkit-text-stroke: 1px rgba(43, 54, 38, .07);
	pointer-events: none;
	user-select: none;
	z-index: 0;
}
.v6-historia__texto {
	position: relative;
	z-index: 1;
	padding: clamp(2rem, 4.5vw, 2.9rem);
	display: grid;
	grid-template-columns: minmax(0, 1fr) auto;
	gap: 24px;
	align-items: start;
}
.v6-historia__cuerpo { display: flex; flex-direction: column; align-items: flex-start; gap: 12px; }
.v6-historia__cuerpo h2 { font-size: clamp(26px, 3vw, 34px); }
.v6-historia__cuerpo p { margin: 0; font-size: 13px; line-height: 1.85; color: var(--v6-suave); max-width: 52ch; }
/* Remate de la seccion: el sello de la marca, no una firma. En la
   web no aparecen personas. */
.v6-sello {
	display: flex;
	flex-direction: column;
	align-items: flex-end;
	gap: 10px;
	text-align: right;
}
.v6-sello .harmony-marca { display: block; }
.v6-sello .harmony-marca img { width: 54px; height: auto; }
.v6-sello__texto {
	font-family: "Cormorant Garamond", serif;
	font-style: italic;
	font-size: 17px;
	line-height: 1.45;
	color: var(--v6-verde);
}

@media (max-width: 559px) {
	.v6-historia__texto { grid-template-columns: minmax(0, 1fr); }
	.v6-sello { align-items: flex-start; text-align: left; }
}

/* =============================================================
   Servicios
   ============================================================= */

.v6-servicios { padding-block: clamp(1rem, 3vw, 1.75rem); }
.v6-servicios__caja {
	background: var(--v6-tira);
	padding: clamp(1.25rem, 3vw, 1.6rem) clamp(1.5rem, 4vw, 2rem);
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
	gap: 20px;
}
.v6-servicio { display: flex; flex-direction: column; gap: 2px; }
.v6-servicio__titulo { font-size: 12.5px; letter-spacing: .06em; color: var(--v6-titular); }
.v6-servicio__texto  { font-size: 11.5px; color: var(--v6-tenue); }

/* =============================================================
   Pie
   ============================================================= */

.v6-pie { background: var(--v6-verde-osc); color: #ddd9cb; margin-top: clamp(2rem, 5vw, 3.5rem); }
.v6-pie__cols {
	max-width: var(--v6-ancho);
	margin-inline: auto;
	padding: clamp(2.25rem, 5vw, 3rem) clamp(1.25rem, 4vw, 1.5rem);
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
	gap: 28px;
}
.v6-pie h2, .v6-pie__rotulo {
	margin: 0 0 3px;
	font-family: "Jost", sans-serif;
	font-size: 11px;
	font-weight: 400;
	letter-spacing: .18em;
	text-transform: uppercase;
	color: #f4f1e6;
}
.v6-pie__col { display: flex; flex-direction: column; gap: 7px; font-size: 12px; }
.v6-pie__col a { color: #b9b7a6; }
.v6-pie__col a:hover { color: #f4f1e6; }
.v6-pie p { margin: 0; font-size: 12px; line-height: 1.7; color: #b9b7a6; max-width: 32ch; }


.v6-pie__marca {
	font-family: "Cormorant Garamond", serif;
	font-size: 17px;
	letter-spacing: .14em;
	color: #f4f1e6;
}
.v6-pie__marca small {
	display: block;
	font-family: "Jost", sans-serif;
	font-size: 8.5px;
	letter-spacing: .3em;
}
.v6-pie__legal { border-top: 1px solid #3a462f; }
.v6-pie__legal > div {
	max-width: var(--v6-ancho);
	margin-inline: auto;
	padding: 14px clamp(1.25rem, 4vw, 1.5rem);
	font-size: 11px;
	color: #8d8c7d;
	display: flex;
	justify-content: space-between;
	gap: 14px;
	flex-wrap: wrap;
}

/* El boton flotante de WhatsApp del tema no debe tapar el pie. */
.harmony-v6 .harmony-wa { z-index: 40; }

/* =============================================================
   Aparicion al hacer scroll

   Solo con .harmony-v6-js puesto: si el script no corre, el estado
   base es visible y la portada se lee entera. Ademas el propio JS
   se rinde a los 4 s y lo ensena todo, por si el observador no
   llega a disparar (capturas headless, impresion, contenedores de
   scroll raros). Es el mismo cuidado que en la v1.
   ============================================================= */

.harmony-v6-js [data-v6-reveal] {
	opacity: 0;
	transform: translateY(22px);
	transition: opacity .8s var(--v6-ease), transform .8s var(--v6-ease);
}
.harmony-v6-js [data-v6-reveal].is-visible { opacity: 1; transform: none; }
.harmony-v6-js [data-v6-reveal][data-delay="1"] { transition-delay: .09s; }
.harmony-v6-js [data-v6-reveal][data-delay="2"] { transition-delay: .18s; }
.harmony-v6-js [data-v6-reveal][data-delay="3"] { transition-delay: .27s; }
.harmony-v6-js [data-v6-reveal][data-delay="4"] { transition-delay: .36s; }
.harmony-v6-js [data-v6-reveal][data-delay="5"] { transition-delay: .45s; }

@media (prefers-reduced-motion: reduce) {
	.harmony-v6 *, .harmony-v6 *::before, .harmony-v6 *::after {
		animation-duration: .001ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: .001ms !important;
	}
	.harmony-v6-js [data-v6-reveal] { opacity: 1; transform: none; }
	.v6-motas { display: none; }
}

/* =============================================================
   Adaptaciones
   ============================================================= */

@media (max-width: 899px) {
	.v6-pase { min-height: 0; }
	.v6-pase__texto { order: 2; }
	.v6-pase__escena, .v6-pase__foto { order: 1; min-height: clamp(260px, 60vw, 380px); }
	.v6-hero__mandos { left: 50%; transform: translateX(-50%); }
	.v6-banda__texto { max-width: 100%; }
	.v6-medallon { width: 78px; height: 78px; }
	.v6-medallon__cifra { font-size: 20px; }
}

@media (max-width: 559px) {
	.v6-fichas { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
	.v6-colecciones__lista { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.v6-ficha__fila { flex-direction: column; align-items: flex-start; gap: 8px; }
	.v6-historia__filigrana { font-size: 90px; }
}

@media print {
	.harmony-v6 [data-v6-reveal] { opacity: 1 !important; transform: none !important; }
	.v6-motas, .v6-hero__mandos, .harmony-wa { display: none; }
}

/* =============================================================
   Variantes de pase del hero

   Los dos pases no comparten fondo a proposito. Con el mismo color
   y otra foto, el cambio se lee como un parpadeo o como un fallo de
   carga; con el salto de crema a verde profundo se lee como lo que
   es, otro capitulo.
   ============================================================= */

.v6-pase { background: var(--v6-hero); }

.v6-pase--verde { background: var(--v6-verde-prof); }
.v6-pase--verde h1        { color: #f4f1e6; }
.v6-pase--verde h1 em     { color: #d6b26a; }
.v6-pase--verde .v6-eyebrow { color: #a8ad93; }
.v6-pase--verde .v6-pase__lede { color: #dcdaca; }

/* Portada (inicio): la entradilla son las tres familias, no un parrafo. */
.v6-pase__lede--familias { max-width: 44ch; }
.v6-pase__familia { white-space: nowrap; }
.v6-pase--verde .v6-pase__halo {
	background: radial-gradient(circle at 50% 45%, rgba(214, 178, 106, .34), rgba(214, 178, 106, .12) 48%, transparent 72%);
}
.v6-pase--verde .v6-pase__suelo {
	background: radial-gradient(ellipse at center, rgba(10, 16, 8, .5), transparent 70%);
}
.v6-pase--verde .v6-pase__producto {
	filter:
		drop-shadow(0 6px 10px rgba(10, 16, 8, .32))
		drop-shadow(0 34px 46px rgba(10, 16, 8, .3));
}
/* Sobre verde, los mandos en verde no se ven. */
.v6-hero:has(.v6-pase--verde.is-activo) .v6-hero__punto { background: rgba(244, 241, 230, .28); }
.v6-hero:has(.v6-pase--verde.is-activo) .v6-hero__punto::after { background: #d6b26a; }

/* =============================================================
   Peana sin panel

   En el hero, en el pack y en la banda de miel el producto ya esta
   sobre un fondo propio: la peana solo tiene que aportar el halo,
   la sombra y el reflejo, no otro rectangulo dentro del rectangulo.
   ============================================================= */

.v6-peana--limpia {
	background: none;
	/* Alto propio y definido: sin aspect-ratio ni altura, la escena
	   de dentro no tendria contra que resolver su 100%. */
	aspect-ratio: auto;
	width: 100%;
	height: min(340px, 42vh);
	padding: 0;
	overflow: visible;
}
.v6-peana--limpia::after { display: none; }

/* =============================================================
   Banda de miel — escena del tarro
   ============================================================= */

.v6-banda__escena {
	position: relative;
	z-index: 1;
	flex: 1 1 34%;
	min-width: 150px;
	display: grid;
	place-items: center;
	padding: clamp(1rem, 3vw, 1.75rem);
}
.v6-banda--miel {
	/* Base en miel oscura, no en miel: sobre el tono claro el crema
	   del cuerpo se quedaba en 3,1:1. Con #8c6318 sube a 4,9:1 y el
	   degradado radial devuelve la luz justo detras del tarro, que
	   es donde no hay texto. */
	background:
		radial-gradient(ellipse 72% 62% at 78% 45%, var(--v6-miel), transparent 66%),
		var(--v6-miel-osc);
}
.v6-banda--miel .v6-peana__halo {
	background: radial-gradient(circle at 50% 42%, rgba(255, 246, 224, .6), rgba(255, 240, 205, .22) 50%, transparent 72%);
}
.v6-banda--miel .v6-peana__suelo {
	background: radial-gradient(ellipse at center, rgba(80, 48, 8, .42), transparent 70%);
}
.v6-banda--miel .v6-peana--limpia { height: 230px; }
.v6-banda--miel .v6-peana :is(img, .v6-product-photo) {
	filter:
		drop-shadow(0 5px 8px rgba(80, 48, 8, .3))
		drop-shadow(0 26px 34px rgba(80, 48, 8, .28));
}

@media (max-width: 639px) {
	.v6-banda--miel { flex-direction: column; }
	.v6-banda__escena { flex: none; width: 100%; min-height: 220px; }
}

/* =============================================================
   Vitrina de la historia

   Tres recortes a tres alturas, cada uno con su sombra de contacto,
   moviendose a distinta velocidad al hacer scroll. La diferencia de
   velocidad es lo que da la profundidad: si los tres se movieran
   igual seria un cartel, no un escaparate.
   ============================================================= */

.v6-vitrina {
	position: relative;
	min-height: 340px;
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	align-items: end;
	gap: clamp(.25rem, 1.5vw, 1rem);
	padding: clamp(2rem, 5vw, 3.25rem) clamp(1rem, 3vw, 1.75rem) clamp(2.5rem, 6vw, 3.75rem);
	background:
		radial-gradient(ellipse 78% 58% at 50% 22%, #f9f3e7, var(--v6-peana) 74%),
		var(--v6-peana);
	overflow: hidden;
}

/* Cono de luz cenital. Lo que hace que los tres objetos parezcan
   iluminados por la misma lampara y no pegados por separado. */
.v6-vitrina__luz {
	position: absolute;
	top: -22%;
	left: 50%;
	width: 78%;
	height: 92%;
	transform: translateX(-50%);
	background: radial-gradient(ellipse at 50% 0%, rgba(255, 252, 242, .85), transparent 68%);
	pointer-events: none;
}

.v6-vitrina__pieza {
	position: relative;
	margin: 0;
	display: grid;
	place-items: end center;
	transform: translateY(var(--par, 0px));
	will-change: transform;
}
.v6-vitrina__pieza :is(img, .v6-product-photo) {
	position: relative;
	z-index: 1;
	width: 100%;
	min-width: 0;
	min-height: 0;
	object-fit: contain;
	object-position: center bottom;
	filter:
		drop-shadow(0 4px 6px rgba(43, 54, 38, .18))
		drop-shadow(0 22px 28px rgba(43, 54, 38, .16));
	-webkit-box-reflect: below 1px linear-gradient(transparent 62%, rgba(0, 0, 0, .16));
}

/* Alturas escalonadas: el del medio delante y mas alto, los otros
   dos retrasados. Puesto todo a la misma altura se ve una fila de
   productos de catalogo. */
.v6-vitrina__pieza--1 :is(img, .v6-product-photo) { height: clamp(130px, 20vw, 190px); }
.v6-vitrina__pieza--2 :is(img, .v6-product-photo) { height: clamp(165px, 25vw, 240px); }
.v6-vitrina__pieza--3 :is(img, .v6-product-photo) { height: clamp(120px, 18vw, 170px); }
.v6-vitrina__pieza--1 { margin-bottom: 8px; z-index: 1; }
.v6-vitrina__pieza--2 { z-index: 2; }
.v6-vitrina__pieza--3 { margin-bottom: 18px; z-index: 1; }

.v6-vitrina__suelo {
	position: absolute;
	bottom: -6px;
	left: 50%;
	width: 78%;
	height: 15px;
	transform: translateX(-50%);
	background: radial-gradient(ellipse at center, rgba(43, 54, 38, .3), transparent 70%);
	filter: blur(6px);
}

/* Linea de suelo que une las tres piezas: sin ella cada una flota
   en su columna y no comparten escenario. */
.v6-vitrina::after {
	content: "";
	position: absolute;
	left: 8%;
	right: 8%;
	bottom: clamp(2rem, 5vw, 3rem);
	height: 1px;
	background: linear-gradient(90deg, transparent, rgba(43, 54, 38, .16), transparent);
}

@media (prefers-reduced-motion: reduce) {
	.v6-vitrina__pieza { transform: none !important; }
}

/* Medallon sin cifra: «A medida» no cabe a 24 px de Cormorant. */
.v6-medallon--texto .v6-medallon__cifra { font-size: 17px; letter-spacing: .02em; }

/* -------------------------------------------------------------
   Correcciones tras verlo montado

   1. El reflejo solo tiene sentido donde hay una superficie que
      reflejar. En las peanas con panel (fichas y colecciones) el
      propio panel hace de mesa y funciona. En las peanas limpias
      —hero, pack, banda de miel— no hay mesa: el reflejo se lee
      como un borron debajo del producto, no como un reflejo. Fuera.
   2. Sin reflejo, la sombra de contacto tiene que cargar sola con
      el apoyo, asi que sube un punto.
   3. El bodegon del pack estaba dando una caja de 596 px de alto
      para un bloque que en el diseno son 320. Se le pone techo.
   ------------------------------------------------------------- */

.v6-peana--limpia img {
	-webkit-box-reflect: unset;
}
.v6-peana--limpia .v6-peana__suelo {
	width: 54%;
	height: 20px;
	background: radial-gradient(ellipse at center, rgba(43, 54, 38, .34), transparent 70%);
}

.v6-pack__escena .v6-peana--limpia { height: min(300px, 38vh); }

/* En las fichas el reflejo se cortaba a media altura contra el
   borde del panel. Empieza mas abajo y pesa menos: se lee como
   brillo de la superficie, no como una segunda copia del tarro. */
.v6-peana :is(img, .v6-product-photo) { -webkit-box-reflect: below 1px linear-gradient(transparent 72%, rgba(0, 0, 0, .13)); }
.v6-peana__suelo { height: 18px; background: radial-gradient(ellipse at center, rgba(43, 54, 38, .34), transparent 70%); }

/* -------------------------------------------------------------
   Velo de contraste de las bandas

   La foto del argan entre humo es preciosa pero es clara justo
   donde va el parrafo, y el texto se perdia. Un velo en degradado,
   mas denso del lado del texto y transparente sobre el producto,
   arregla la lectura sin tapar la foto. En la banda de miel hace
   lo mismo contra el fondo dorado, que con el crema del cuerpo se
   quedaba en un contraste flojo.
   ------------------------------------------------------------- */

.v6-banda::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 1;
	pointer-events: none;
}
.v6-banda--verde::before {
	background: linear-gradient(100deg, rgba(20, 27, 16, .92) 0%, rgba(20, 27, 16, .8) 52%, rgba(20, 27, 16, .24) 88%);
}
.v6-banda--miel::before {
	background: linear-gradient(100deg, rgba(70, 42, 4, .42) 0%, rgba(70, 42, 4, .16) 55%, transparent 82%);
}

/* El texto y la escena por delante del velo. */
.v6-banda__texto,
.v6-banda__escena { z-index: 2; }

/* Con el velo puesto, el cuerpo puede subir de tono sin gritar. */
.v6-banda--verde p { color: #e9e7da; }
.v6-banda--miel p  { color: #fdf6e6; }

/* =============================================================
   Accesibilidad — contraste

   Repaso de todos los pares texto/fondo de la portada contra el
   4,5:1 que pide la WCAG AA para texto normal (3:1 solo valen los
   titulares de 24 px o mas). Lo que fallaba y por que:

     · el gris de los rotulos pequenos, en 3,1:1  → corregido en el
       token --v6-tenue, arriba;
     · el pie legal, en gris sobre verde: 3,7:1;
     · «Precio a consultar», que hereda de la v1 un color con
       opacity .7 y sobre el crema de la v6 se quedaba en 3,1:1.

   Y dos cosas que no son texto pero se usan para operar la pagina:
   el borde de foco, que sobre las secciones verdes era verde sobre
   verde, y las barritas del hero, que como control necesitan 3:1.
   ============================================================= */

.v6-pie__legal > div { color: #9d9c87; }

/* La v1 lo pinta con opacity .7 sobre arena; sobre el crema de la
   v6 eso cae por debajo del minimo. Aqui va a color pleno: sigue
   distinguiendose del precio por la cursiva. */
.harmony-v6 .harmony-precio-pendiente {
	color: var(--v6-suave);
	opacity: 1;
}

/* Foco visible sobre fondo oscuro: el verde de marca desaparece
   contra el propio verde de la seccion. */
.harmony-v6 :where(.v6-pase--verde, .v6-banda, .v6-pie) :where(a, button, input, [tabindex]):focus-visible {
	outline: 2px solid #f4f1e6;
	outline-offset: 3px;
}

/* Control, no decoracion: la barrita inactiva tiene que verse. */
.v6-hero__punto { background: rgba(43, 54, 38, .38); }
.v6-hero:has(.v6-pase--verde.is-activo) .v6-hero__punto { background: rgba(244, 241, 230, .45); }

/* El borde del boton de linea era casi invisible sobre el crema.
   No lo identifica —para eso esta su rotulo— pero si marca donde
   se puede pulsar. */
.v6-boton--linea { border-color: #c4b79c; }

/* =============================================================
   Hero alineado al contenedor

   El fondo del hero va a sangre, pero su texto no puede: en un
   monitor ancho arrancaba pegado al borde izquierdo mientras el
   logotipo y todas las secciones empiezan en la columna de
   1240 px. El relleno lateral del pase absorbe la diferencia, asi
   que el fondo sigue llegando de lado a lado y el titular arranca
   justo debajo del logotipo.
   ============================================================= */

.v6-pase { padding-inline: max(0px, calc((100% - var(--v6-ancho)) / 2)); }
.v6-pase__texto { padding-inline: clamp(1.25rem, 5vw, 1.5rem); }

/* Con el relleno del contenedor, la escena tiene que soltar el
   suyo por la derecha o el producto queda descentrado. */
@media (min-width: 1240px) {
	.v6-pase__escena { padding-right: 0; }
}

/* Los mandos del hero, a la misma columna que el titular. */
.v6-hero__mandos {
	left: max(clamp(1.25rem, 5vw, 1.5rem), calc((100% - var(--v6-ancho)) / 2 + clamp(1.25rem, 5vw, 1.5rem)));
}
@media (max-width: 899px) {
	.v6-hero__mandos { left: 50%; transform: translateX(-50%); }
}

/* =============================================================
   Movil

   El hero se comia la pantalla entera: la foto ocupaba 56vh mas
   relleno y el titular quedaba por debajo del pliegue. En una
   tienda que vende sobre todo por movil, lo primero que hay que
   leer es la propuesta, no el bodegon.
   ============================================================= */

@media (max-width: 899px) {
	.v6-pase__escena { min-height: 0; padding-block: clamp(1.25rem, 5vw, 2rem); }
	.v6-pase__producto { height: min(34vh, 280px); }
	.v6-pase__texto { padding-block: clamp(1.5rem, 5vw, 2.25rem) clamp(2.75rem, 9vw, 3.5rem); }
	.v6-pase__texto h1 { font-size: clamp(32px, 8.5vw, 40px); }
	.v6-pase__halo   { inset: 4% 6%; }
	.v6-pase__suelo  { bottom: clamp(1.25rem, 5vw, 2rem); }

	/* Los mandos, debajo del texto y no encima de la ola. */
	.v6-hero__mandos { bottom: clamp(.9rem, 3vw, 1.25rem); }
}

@media (max-width: 559px) {
	/* Cabecera mas compacta: en 390 px, el logotipo en tres lineas
	   se comia 90 px de alto que hacen falta para el contenido. */
	.v6-logo { flex-direction: row; align-items: baseline; gap: 8px; }
	.v6-logo img { width: 24px; height: 24px; align-self: center; }
	.v6-logo__cola { display: none; }
	.v6-cabecera__barra { gap: 10px; }

	.v6-pack__texto,
	.v6-historia__texto,
	.v6-banda__texto { padding: clamp(1.5rem, 6vw, 2rem); }
	.v6-servicios__caja { gap: 14px; }
	.v6-medallon { right: .75rem; bottom: .75rem; }
}

/* =============================================================
   Accesibilidad — zona de pulsacion

   La WCAG 2.2 exime a los enlaces que van dentro de un texto
   corrido, asi que los nombres de producto y los del pie se
   quedan como estan. Lo que no se libra es lo que es un control
   suelto: las barritas del hero median 42x2 px, que con un dedo
   no se acierta. Se les da area sin cambiar el dibujo.
   ============================================================= */

.v6-hero__punto { position: relative; }
.v6-hero__punto::before {
	content: "";
	position: absolute;
	left: 0;
	right: 0;
	top: 50%;
	height: 26px;
	transform: translateY(-50%);
}

/* El menu de escritorio: 11 px de rotulo dejaban 19 px de alto. */
@media (min-width: 900px) {
	.v6-nav a { padding-block: 6px 5px; }
	.v6-nav a::after { bottom: 1px; }
}

/* Columnas del pie: separacion suficiente entre enlaces seguidos. */
.v6-pie__col { gap: 9px; }
.v6-pie__col a { padding-block: 2px; }

/* =============================================================
   Capa de vuelo del hero

   Cada pase tiene su bicho. En el de la miel cruzan tres abejas
   siguiendo su hilo, y el hilo se ve: es una linea punteada como la
   ruta de un mapa, dibujada con el mismo path por el que va la
   abeja. Sin ella el bicho parece perdido; con ella se lee que va
   a alguna parte.

   La trayectoria la escribe PHP en un style en linea, asi que el
   path existe una sola vez. Aqui solo van tiempos y pintura.

   offset-rotate:auto gira la abeja para que la cabeza mire siempre
   hacia donde avanza; en la que vuelve de derecha a izquierda eso
   la deja panza arriba, y por eso su cuerpo lleva un scaleY(-1)
   que la endereza.
   ============================================================= */

.v6-vuelo {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	pointer-events: none;
}
/* Por debajo del producto (que va en z-index 1) y por encima del
   halo, que esta en 0 pero antes en el marcado. */
.v6-vuelo--detras  { z-index: 0; }
.v6-vuelo--delante { z-index: 2; }

/* --- Hilos de vuelo --- */

.v6-hilo {
	fill: none;
	/* Muy por debajo del texto: el hilo tiene que insinuarse, no
	   competir con el titular. */
	stroke: rgba(150, 116, 44, .24);
	stroke-width: 1;
	stroke-linecap: round;
	stroke-dasharray: 1.6 8;
}
.harmony-v6-js .v6-hilo { animation: v6-hilo-corre 2.8s linear infinite; }
@keyframes v6-hilo-corre { to { stroke-dashoffset: -9.6; } }

/* --- La abeja --- */

.v6-abeja {
	/* fill-box: sin esto el origen de la transformada seria la
	   esquina del viewBox y la abeja no se posaria sobre su path. */
	transform-box: fill-box;
	transform-origin: center;
	offset-rotate: auto;
}
.v6-abeja__cuerpo {
	transform-box: fill-box;
	transform-origin: center;
	/* Una sombra corta debajo. Es poca cosa y es justo lo que hace
	   que la abeja este en la escena y no pegada sobre la foto. */
	filter: drop-shadow(0 3px 3px rgba(43, 54, 38, .3));
}

.v6-abeja__torso   { fill: #4a3a16; }
.v6-abeja__franja  { fill: #e3ad3f; }
.v6-abeja__cabeza,
.v6-abeja__aguijon { fill: #2f2a18; }
.v6-abeja__antena  { fill: none; stroke: #2f2a18; stroke-width: .9; stroke-linecap: round; }
.v6-abeja__ala {
	fill: rgba(255, 255, 255, .66);
	stroke: rgba(90, 74, 30, .28);
	stroke-width: .5;
	transform-box: fill-box;
}
.v6-abeja__ala--sup { transform-origin: 88% 100%; }
.v6-abeja__ala--inf { transform-origin: 88% 0%; }

/* Aleteo: rapido y corto, que es como se ve de verdad. Va sin
   ligadura con el vuelo, asi que las dos abejas no baten a la vez. */
.harmony-v6-js .v6-abeja__ala--sup { animation: v6-aleteo-sup .12s ease-in-out infinite alternate; }
.harmony-v6-js .v6-abeja__ala--inf { animation: v6-aleteo-inf .13s ease-in-out infinite alternate; }
@keyframes v6-aleteo-sup {
	from { transform: rotate(-14deg) scaleY(1); }
	to   { transform: rotate(6deg) scaleY(.32); }
}
@keyframes v6-aleteo-inf {
	from { transform: rotate(14deg) scaleY(1); }
	to   { transform: rotate(-6deg) scaleY(.32); }
}

/* --- Recorridos --- */

/* Vueltas cortas y en bucle. La principal da la vuelta en 9 s, algo
   mas que el pase (7 s), pero al ser cerrada no hay entrada ni
   salida que perderse: se ve rodeando el tarro desde el primer
   fotograma. Los retardos son negativos para arrancar ya desfasadas.

   Las dos copias de la abeja grande —la de detras y la de delante—
   comparten duracion y retardo exactos. Es lo que mantiene el relevo
   en su sitio: si se separan, la abeja se desdobla. */
.harmony-v6-js .v6-pase.is-activo .v6-abeja--mayor {
	animation: v6-orbita 9s linear infinite -2.2s, v6-relevo-frente 9s linear infinite -2.2s;
}
.harmony-v6-js .v6-pase.is-activo .v6-abeja--mayor.v6-abeja--detras {
	animation: v6-orbita 9s linear infinite -2.2s, v6-relevo-fondo 9s linear infinite -2.2s;
}
.harmony-v6-js .v6-pase.is-activo .v6-abeja--menor {
	animation: v6-orbita 6.5s linear infinite reverse -3s;
}
@keyframes v6-orbita { to { offset-distance: 100%; } }

/* El relevo cambia de copia en los extremos izquierdo y derecho de
   la orbita (25 % y 75 %), que es donde la abeja pasa por el
   perfil del tarro: alli el cambio no se ve. Cambiarlo arriba o
   abajo lo delataria. */
@keyframes v6-relevo-frente {
	0%, 22%   { opacity: 0; }
	28%, 72%  { opacity: 1; }
	78%, 100% { opacity: 0; }
}
@keyframes v6-relevo-fondo {
	0%, 22%   { opacity: .5; }
	28%, 72%  { opacity: 0; }
	78%, 100% { opacity: .5; }
}

.v6-abeja--mayor .v6-abeja__cuerpo { transform: scale(1.12); }
/* La del fondo, un pelin mas pequena: esta mas lejos. */
.v6-abeja--mayor.v6-abeja--detras .v6-abeja__cuerpo { transform: scale(.98); }
.v6-abeja--menor .v6-abeja__cuerpo { transform: scale(.7); }
.v6-abeja--menor { opacity: .6; }

/* Sin JS se quedan quietas en el arranque de su orbita, y la copia
   del fondo no se pinta para que no se vea desdoblada. */
.v6-abeja { offset-distance: 0%; }
.v6-abeja--detras { opacity: 0; }

/* =============================================================
   Pase del quemador — volutas y luciernagas

   Aqui no pintan abejas: no hay miel, hay una llama. Suben tres
   volutas de aroma que se dibujan solas y se deshacen arriba, y
   rondan dos luciernagas. Es otro movimiento, no el mismo repintado
   de otro color: si los dos pases se movieran igual, el cambio
   dejaria de contarse como cambio.
   ============================================================= */

.v6-voluta {
	fill: none;
	stroke: rgba(233, 224, 199, .42);
	stroke-width: 1.3;
	stroke-linecap: round;
	stroke-dasharray: 1;
	stroke-dashoffset: 1;
	opacity: 0;
}
.harmony-v6-js .v6-pase.is-activo .v6-voluta { animation: v6-humo 8s ease-in-out infinite; }
.harmony-v6-js .v6-pase.is-activo .v6-voluta--2 { animation-duration: 10s; animation-delay: 2.6s; }
.harmony-v6-js .v6-pase.is-activo .v6-voluta--3 { animation-duration: 9s;  animation-delay: 5s; }
@keyframes v6-humo {
	0%   { stroke-dashoffset: 1;    opacity: 0;   transform: translateX(0); }
	15%  { opacity: .75; }
	60%  { opacity: .45; }
	100% { stroke-dashoffset: -.35; opacity: 0;   transform: translateX(14px); }
}

.v6-luciernaga {
	transform-box: fill-box;
	transform-origin: center;
	offset-distance: 0%;
	opacity: 0;
}
.v6-luciernaga circle {
	fill: #ffe9b6;
	filter: drop-shadow(0 0 7px rgba(255, 208, 112, .95));
}
.harmony-v6-js .v6-pase.is-activo .v6-luciernaga--1 { animation: v6-ronda 15s linear infinite, v6-titila 2.6s ease-in-out infinite; }
.harmony-v6-js .v6-pase.is-activo .v6-luciernaga--2 { animation: v6-ronda 19s linear infinite reverse, v6-titila 3.4s ease-in-out infinite .8s; }
@keyframes v6-ronda { to { offset-distance: 100%; } }
@keyframes v6-titila {
	0%, 100% { opacity: .3; }
	50%      { opacity: 1; }
}

/* =============================================================
   Vuelo — adaptaciones y reduccion de movimiento
   ============================================================= */

@media (max-width: 899px) {
	/* El viewBox es apaisado y el pase en movil es alto: con la
	   capa a toda altura, el "slice" agranda las abejas hasta
	   volverlas caricaturas. Se limita a la franja de la foto y se
	   compensa el tamano. */
	/* El viewBox es apaisado y el pase en movil es alto: con la capa
	   a toda altura, el "slice" agranda las abejas hasta volverlas
	   caricaturas. Se limita a la franja de la foto.

	   Ademas el recorte lateral deja fuera las orbitas de los
	   extremos, asi que en movil se queda solo la del tarro, que cae
	   en el centro. Una abeja rondando el producto en una pantalla de
	   390 px ya es suficiente; tres serian una plaga. */
	.v6-vuelo { height: 58%; }
	.v6-abeja--mayor .v6-abeja__cuerpo { transform: scale(1.5); }
	.v6-abeja--mayor.v6-abeja--detras .v6-abeja__cuerpo { transform: scale(1.32); }
	/* En 390 px la orbita pequena cae fuera del recorte lateral y la
	   abeja desapareceria media vuelta. Se queda solo la principal. */
	.v6-abeja--menor { display: none; }
}

@media (prefers-reduced-motion: reduce) {
	/* Los hilos se quedan: son un dibujo, no un movimiento. Lo que
	   se va es todo lo que se mueve. */
	.v6-abeja, .v6-luciernaga, .v6-voluta { display: none; }
}

/* Sin soporte de offset-path (navegadores viejos) no hay abejas ni
   luciernagas, pero los hilos y las volutas siguen siendo un adorno
   que se sostiene solo. */
@supports not (offset-path: path("M0 0 L1 1")) {
	.v6-abeja, .v6-luciernaga { display: none; }
}


/* =============================================================
   Titular por lineas

   Cada linea va en una caja con overflow oculto y sube desde
   debajo del corte. Es la diferencia entre un titular que entra y
   uno que simplemente se enciende, y es de lo poco que separa un
   hero corriente de uno trabajado.

   El estado de partida deja el texto fuera de la caja, o sea
   invisible, que es justo lo que la v1 prohibe. Por eso van los
   dos seguros de siempre: la regla solo existe con .harmony-v6-js,
   y el JS pone .is-listo a los 3,5 s pase lo que pase. Sin
   JavaScript el titular esta ahi desde el primer pintado.
   ============================================================= */

.v6-linea {
	display: block;
	/* El recorte tiene que dejar sitio a la cola de la cursiva; el
	   margen negativo devuelve el hueco para no mover la linea. */
	padding-bottom: .09em;
	margin-bottom: -.09em;
}
.harmony-v6-js .v6-linea { overflow: hidden; }
.v6-linea > span { display: block; }

.harmony-v6-js .v6-pase.is-activo .v6-linea > span {
	animation: v6-linea-sube .95s cubic-bezier(.16, 1, .3, 1) both;
	animation-delay: calc(.05s + var(--v6-l, 0) * .09s);
}
@keyframes v6-linea-sube {
	from { transform: translateY(108%); }
	to   { transform: none; }
}

/* Seguro: si a los 3,5 s alguna linea sigue fuera de sitio, se
   acaba la funcion y se ensena el titular. */
.v6-hero.is-listo .v6-linea { overflow: visible; }
.v6-hero.is-listo .v6-linea > span { animation: none; transform: none; }

/* New photographs composed inside the unchanged, animated V2 hero frame. */

/* Client photographs: presentation only; V2 motion and layout stay intact. */
.v6-product-photo { display: block; overflow: visible; }
.v6-client-trio { max-width: 530px; }
.v6-client-trio__item { position: absolute; }
.v6-client-trio__item--0 { width: 52%; height: 67%; left: 3%; bottom: 8%; z-index: 1; }
.v6-client-trio__item--1 { width: 39%; height: 47%; left: 35%; bottom: 0; z-index: 3; }
.v6-client-trio__item--2 { width: 20%; height: 81%; right: 5%; bottom: 9%; z-index: 2; }
.v6-banda--verde .v6-banda__fondo { inset: -6% -4% -6% 28%; opacity: .78; }
.v6-banda--verde .v6-banda__fondo img { object-fit: contain; object-position: right center; }
.v6-banda--verde::after { content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none; background: linear-gradient(90deg, var(--v6-verde-prof) 12%, rgba(27,40,24,.94) 40%, transparent 80%); }
@media (max-width: 899px) {
 .v6-client-trio { max-width: 420px; height: 330px; }
}
@media (max-width: 559px) {
 .v6-client-trio { height: 260px; }
 .v6-banda--verde .v6-banda__texto { max-width: 82%; }
}

/* =============================================================
   Portada definitiva — estructura del cliente (13/09/2026)

   "V2 debe respirar todavia mas": mas aire entre secciones, fotos
   grandes, poco texto y un solo gesto por bloque. Todo lo de aqui
   usa los tokens y componentes de arriba (rotulo, antetitulo, boton).
   ============================================================= */

.v6-editorial h2 em,
.v6-argan h2 em,
.v6-mieles h2 em,
.v6-relato h2 em,
.v6-pausa__frase em { font-style: italic; }

.v6-editorial h2,
.v6-argan h2,
.v6-mieles h2,
.v6-relato h2 { font-size: clamp(32px, 4vw, 48px); line-height: 1.08; }

/* 02 — Los tres universos ------------------------------------- */

.v6-universos { padding-block: clamp(3.5rem, 8vw, 6rem) clamp(2rem, 4vw, 3rem); }
.v6-universos__lista {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: clamp(1rem, 2.5vw, 1.75rem);
}
.v6-universo a { display: flex; flex-direction: column; gap: 1.1rem; color: inherit; }
.v6-universo__foto {
	display: block;
	aspect-ratio: 4 / 5;
	overflow: hidden;
	background: var(--v6-peana);
}
.v6-universo__foto img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform 1.2s var(--v6-ease);
}
.v6-universo a:hover .v6-universo__foto img { transform: scale(1.04); }
.v6-universo__texto { display: flex; flex-direction: column; gap: 4px; }
.v6-universo__nombre {
	font-family: "Cormorant Garamond", Georgia, serif;
	font-weight: 300;
	font-size: clamp(30px, 3vw, 40px);
	line-height: 1.05;
	color: var(--v6-titular);
}
.v6-universo__lema {
	font-family: "Cormorant Garamond", Georgia, serif;
	font-style: italic;
	font-size: 19px;
	color: var(--v6-suave);
}
.v6-universo__incluye {
	margin-top: 8px;
	font-size: 11px;
	letter-spacing: .16em;
	text-transform: uppercase;
	color: var(--v6-tenue);
	transition: color .3s ease;
}
.v6-universo__incluye span { display: inline-block; transition: transform .3s var(--v6-ease); }
.v6-universo a:hover .v6-universo__incluye { color: var(--v6-verde); }
.v6-universo a:hover .v6-universo__incluye span { transform: translateX(4px); }

.v6-universos__mas {
	margin: clamp(2.25rem, 5vw, 3rem) 0 0;
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	align-items: baseline;
	gap: .5rem 1.75rem;
	font-size: 11.5px;
	letter-spacing: .16em;
	text-transform: uppercase;
	color: var(--v6-tenue);
}
.v6-universos__mas a {
	color: var(--v6-titular);
	border-bottom: 1px solid var(--v6-linea-3);
	padding-bottom: 2px;
}
.v6-universos__mas a:hover { color: var(--v6-verde); border-bottom-color: currentColor; }

/* 03 — Una seleccion de Harmony -------------------------------- */

.v6-seleccion { padding-block: clamp(3rem, 7vw, 5rem); }
.v6-seleccion__lista {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: clamp(1rem, 2.5vw, 1.75rem);
}
.v6-seleccion__item { display: flex; flex-direction: column; align-items: center; gap: 4px; text-align: center; }
.v6-seleccion__foto {
	display: block;
	width: 100%;
	aspect-ratio: 1;
	margin-bottom: 14px;
	overflow: hidden;
	background: #fff;
}
.v6-seleccion__foto img {
	width: 100%;
	height: 100%;
	object-fit: contain;
	transition: transform 1s var(--v6-ease);
}
.v6-seleccion__item:hover .v6-seleccion__foto img { transform: scale(1.04); }
.v6-seleccion__nombre {
	font-family: "Cormorant Garamond", Georgia, serif;
	font-size: 22px;
	line-height: 1.2;
	color: var(--v6-titular);
}
.v6-seleccion__precio { font-size: 12.5px; letter-spacing: .06em; color: var(--v6-tenue); }
.v6-seleccion__precio del { opacity: .6; }

/* 04 — Wax melts ------------------------------------------------ */

.v6-editorial { padding-block: clamp(3rem, 7vw, 5rem); }
.v6-editorial__caja {
	display: grid;
	grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
	gap: clamp(2rem, 5vw, 4.5rem);
	align-items: center;
}
.v6-editorial__foto { aspect-ratio: 6 / 5; overflow: hidden; background: var(--v6-peana); }
.v6-editorial__foto img { width: 100%; height: 100%; object-fit: cover; }
.v6-editorial__texto { display: flex; flex-direction: column; align-items: flex-start; gap: 16px; max-width: 28rem; }
.v6-editorial__texto p:not(.v6-eyebrow),
.v6-relato__texto p:not(.v6-eyebrow) {
	margin: 0;
	font-size: 14.5px;
	line-height: 1.85;
	color: var(--v6-suave);
}
.v6-editorial__texto .v6-boton,
.v6-relato__texto .v6-boton { margin-top: 8px; }

/* 05 — Argan ---------------------------------------------------- */

.v6-argan { padding-block: clamp(3rem, 7vw, 5rem); }
.v6-argan__caja {
	display: grid;
	grid-template-columns: minmax(0, 6fr) minmax(0, 5fr);
	background: var(--v6-verde-prof);
	overflow: hidden;
}
.v6-argan__foto { order: 2; aspect-ratio: 1; }
.v6-argan__foto img { width: 100%; height: 100%; object-fit: cover; }
.v6-argan__texto {
	display: flex;
	flex-direction: column;
	justify-content: center;
	gap: 14px;
	padding: clamp(2rem, 5vw, 4.5rem);
}
.v6-argan .v6-eyebrow { color: #c9c4ae; }
.v6-argan h2 { color: #f4f1e6; }
.v6-argan h2 em { color: #d6b26a; }
.v6-argan__texto > p:not(.v6-eyebrow) { margin: 0; font-size: 14.5px; color: #dcdaca; }
.v6-argan__caminos {
	list-style: none;
	margin: 18px 0 0;
	padding: 0;
	border-top: 1px solid rgba(244, 241, 230, .18);
}
.v6-argan__camino {
	display: grid;
	grid-template-columns: 1fr auto;
	column-gap: 1rem;
	padding: 18px 0;
	border-bottom: 1px solid rgba(244, 241, 230, .18);
	color: #f4f1e6;
}
.v6-argan__para {
	font-size: 10.5px;
	letter-spacing: .18em;
	text-transform: uppercase;
	color: #c9c4ae;
}
.v6-argan__nombre {
	font-family: "Cormorant Garamond", Georgia, serif;
	font-size: clamp(24px, 2.4vw, 30px);
	line-height: 1.15;
	transition: color .3s ease;
}
.v6-argan__flecha {
	grid-column: 2;
	grid-row: 1 / span 2;
	align-self: center;
	font-size: 18px;
	transition: transform .3s var(--v6-ease);
}
.v6-argan__camino:hover { color: #f4f1e6; }
.v6-argan__camino:hover .v6-argan__nombre { color: #d6b26a; }
.v6-argan__camino:hover .v6-argan__flecha { transform: translateX(6px); }

/* 06 — Miel ----------------------------------------------------- */

.v6-mieles { padding-block: clamp(3rem, 7vw, 5.5rem); text-align: center; }
.v6-mieles__cabecera {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 14px;
	margin-bottom: clamp(2.25rem, 5vw, 3.25rem);
}
.v6-mieles__lista {
	list-style: none;
	margin: 0 auto;
	padding: 0;
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: clamp(1rem, 2.5vw, 1.75rem);
	max-width: 1080px;
}
.v6-miel a { display: flex; flex-direction: column; align-items: center; gap: 4px; color: inherit; }
.v6-miel__foto {
	display: block;
	width: 100%;
	aspect-ratio: 1;
	margin-bottom: 14px;
	overflow: hidden;
	background: #fff;
}
.v6-miel__foto img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform 1s var(--v6-ease);
}
.v6-miel a:hover .v6-miel__foto img { transform: scale(1.04); }
.v6-miel__nombre {
	font-family: "Cormorant Garamond", Georgia, serif;
	font-size: 28px;
	line-height: 1.1;
	color: var(--v6-titular);
}
.v6-miel__origen { font-size: 11px; letter-spacing: .2em; text-transform: uppercase; color: var(--v6-tenue); }
.v6-mieles__pie { margin: clamp(2.25rem, 5vw, 3rem) 0 0; }

/* 07 — Historia ------------------------------------------------- */

.v6-relato { padding-block: clamp(3rem, 7vw, 5rem); }
.v6-relato__caja {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
	gap: clamp(2rem, 5vw, 4.5rem);
	align-items: center;
}
.v6-relato__foto { aspect-ratio: 4 / 5; overflow: hidden; background: var(--v6-peana); }
.v6-relato__foto img { width: 100%; height: 100%; object-fit: cover; }
.v6-relato__texto { display: flex; flex-direction: column; align-items: flex-start; gap: 16px; max-width: 30rem; }
.v6-relato__texto .harmony-marca { margin: 12px 0 0; }

/* 08 — Pausa ---------------------------------------------------- */

.v6-pausa {
	position: relative;
	isolation: isolate;
	display: flex;
	align-items: center;
	min-height: clamp(440px, 80vh, 760px);
	margin-block: clamp(2.5rem, 6vw, 4rem);
	overflow: hidden;
	background: var(--v6-verde-osc);
}
.v6-pausa__fondo { position: absolute; inset: -8% 0; z-index: -2; }
.v6-pausa__fondo img { width: 100%; height: 100%; object-fit: cover; object-position: 70% 30%; }
.harmony-v6-js .v6-pausa__fondo { transform: translateY(var(--par, 0px)); will-change: transform; }
/* La frase va a la izquierda y la vela queda a la derecha: el
   degradado solo oscurece la mitad donde se lee. */
.v6-pausa::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -1;
	background: linear-gradient(90deg, rgba(20, 24, 16, .78) 0%, rgba(20, 24, 16, .55) 38%, rgba(20, 24, 16, 0) 68%);
}
.v6-pausa__texto { width: 100%; padding-block: 2rem; }
.v6-pausa__frase {
	margin: 0;
	font-family: "Cormorant Garamond", Georgia, serif;
	font-weight: 300;
	font-size: clamp(44px, 7vw, 88px);
	line-height: 1.02;
	color: #fbf8f0;
	text-shadow: 0 2px 28px rgba(0, 0, 0, .28);
}
.v6-pausa__marca {
	margin: 1.5rem 0 0;
	font-size: 11px;
	letter-spacing: .34em;
	text-transform: uppercase;
	color: rgba(247, 244, 236, .88);
}

@media (max-width: 719px) {
	/* En movil la foto no tiene sitio a los lados: la etiqueta queda
	   bajo la frase. El degradado la apaga casi del todo y deja viva
	   la llama, que es lo que cuenta la escena. */
	.v6-pausa { align-items: flex-end; min-height: 600px; }
	.v6-pausa__fondo img { object-position: 30% 20%; }
	.v6-pausa::after {
		background: linear-gradient(180deg, rgba(20, 24, 16, 0) 22%, rgba(20, 24, 16, .72) 52%, rgba(20, 24, 16, .94) 78%);
	}
	.v6-pausa__texto { padding-block: 2.5rem; }
}

/* 09 — Confianza ------------------------------------------------ */

.v6-confianza { padding-block: clamp(1rem, 3vw, 2rem) 0; }
.v6-confianza__lista {
	list-style: none;
	margin: 0;
	padding: 1.5rem 0;
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	border-block: 1px solid var(--v6-linea-3);
	font-size: 11.5px;
	letter-spacing: .18em;
	text-transform: uppercase;
	color: var(--v6-suave);
}
.v6-confianza__lista li + li::before { content: "·"; margin-inline: 1.25rem; color: var(--v6-miel); }

/* Adaptaciones -------------------------------------------------- */

@media (max-width: 899px) {
	.v6-seleccion__lista { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 2rem; }
	.v6-editorial__caja,
	.v6-relato__caja { grid-template-columns: minmax(0, 1fr); }
	.v6-editorial__texto,
	.v6-relato__texto { max-width: none; }
	.v6-argan__caja { grid-template-columns: minmax(0, 1fr); }
	.v6-argan__foto { order: 0; aspect-ratio: 4 / 3; }
	.v6-relato__foto { aspect-ratio: 4 / 3; }
}

@media (max-width: 719px) {
	.v6-universos__lista { grid-template-columns: minmax(0, 1fr); gap: 2.5rem; }
	.v6-universo__foto { aspect-ratio: 5 / 4; }
	.v6-mieles__lista { grid-template-columns: minmax(0, 1fr); gap: 2.25rem; max-width: 420px; }
	.v6-confianza__lista {
		display: grid;
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: .9rem 1rem;
		text-align: center;
		font-size: 10.5px;
		letter-spacing: .14em;
	}
	.v6-confianza__lista li + li::before { content: none; }
}

/* Selector de idioma de la cabecera ---------------------------- */

.v6-idioma {
	display: inline-flex;
	align-items: center;
	min-height: 32px;
	padding: 2px 12px;
	border: 1px solid var(--v6-linea-3);
	font-size: 13px;
	line-height: 1.2;
	color: var(--v6-titular);
	white-space: nowrap;
	transition: border-color .3s ease, color .3s ease, background .3s ease;
}
.v6-idioma:hover { border-color: var(--v6-verde); background: var(--v6-verde); color: var(--v6-crema); }
.v6-idioma:lang(ar) { font-family: "IBM Plex Sans Arabic", "Geeza Pro", "Noto Sans Arabic", "Segoe UI", sans-serif; font-size: 14px; }
.v6-idioma:lang(es) { font-family: "Jost", "Karla", system-ui, sans-serif; letter-spacing: .06em; }