/*
|--------------------------------------------------------------------------
| Temas de temporada — capa visual de la portada
|--------------------------------------------------------------------------
| Se carga SÓLO en la portada y SÓLO con un tema de temporada activo
| (inc/setup/home-theme.php). Genérica para todos los temas: no hay una
| regla por tema, sólo variables que llegan en línea desde el panel:
|
|   --season-accent / --season-surface / --season-ornament / --season-sparkle
|   --season-shape-{primary|secondary|celestial|corner|badge}: url(svg)
|
| Los adornos son pseudo-elementos con `mask-image` (la forma sale del
| SVG del conjunto elegido, el color del panel). Cada capa va DETRÁS del
| contenido de su bloque (`isolation: isolate` + `z-index: -1`) y con
| `pointer-events: none`: nunca tapa textos ni recibe clics. Las reglas de
| formas viven bajo `.amorea-home-motifs` (conjunto ≠ "Ninguno").
|
| Una capa sólo existe (`content: ""`) en la MISMA regla que define su
| máscara: un pseudo-elemento sin máscara pintaría el bloque entero de
| un color sólido.
|
| Tamaños con clamp()/vw y posiciones en % del propio bloque: escalan de
| forma continua (CLAUDE.md, regla 6). El único cambio estructural (hero
| apilado) es un @container sobre el ancho real del hero.
*/

/* ==========================================================================
   Base de las capas decorativas
   ========================================================================== */

.amorea-season-deco {
	position: absolute;
	inset: 0;
	z-index: -1;
	pointer-events: none;
}

.amorea-season-deco::before,
.amorea-season-deco::after {
	position: absolute;
	inset: 0;
	pointer-events: none;
	-webkit-mask-repeat: no-repeat;
	mask-repeat: no-repeat;
}

/* Capa ::before = forma principal (murciélagos...) en el color de adornos. */
.amorea-season-deco::before {
	background: var(--season-ornament);
}

/* Capa ::after = estrellas / luna en el color de brillos. */
.amorea-season-deco::after {
	background: var(--season-sparkle);
}

.amorea-season-img {
	position: absolute;
	height: auto;
	max-width: none;
	pointer-events: none;
	user-select: none;
}

/* ==========================================================================
   Header (sólo decoración: logo, buscador, íconos y menú intactos)
   --------------------------------------------------------------------------
   Las capas cuelgan del contenedor (`.ct-container`), no de la fila a todo
   el ancho, así acompañan al logo y a los íconos en cualquier pantalla
   (en 1920px la fila mide 1920 pero el contenido sólo 1320). Se extienden
   --hdr-e hacia los costados, dentro del margen libre del contenedor,
   para los murciélagos de las puntas.

   Escritorio (medido): logo 206px fijo a la izquierda, buscador de 269px
   centrado, íconos a la derecha — los adornos van en esos 2 huecos.
   Móvil (otro bloque de Blocksy, [data-device="mobile"]): logo e íconos
   ocupan la franja central; los adornos van sólo en las franjas libres de
   arriba y de abajo, sin importar cuánto mida el hueco entre ellos.
   ========================================================================== */

.amorea-home-motifs #header [data-row="middle"] > .ct-container {
	position: relative;
	z-index: 0;
	--hdr-e: clamp(20px, 3.4vw, 56px);
}

.amorea-home-motifs #header [data-row="middle"] > .ct-container::before,
.amorea-home-motifs #header [data-row="middle"] > .ct-container::after {
	content: "";
	position: absolute;
	inset: 0 calc(-1 * var(--hdr-e));
	z-index: -1;
	pointer-events: none;
	-webkit-mask-repeat: no-repeat;
	mask-repeat: no-repeat;
}

.amorea-home-motifs #header [data-row="middle"] > .ct-container::before {
	background: var(--season-ornament);
}

.amorea-home-motifs #header [data-row="middle"] > .ct-container::after {
	background: var(--season-sparkle);
}

/* Escritorio: murciélago chico en la punta izquierda, grande entre logo y
   buscador, mediano a la derecha de "Carrito". */
.amorea-home-motifs #header [data-device="desktop"] [data-row="middle"] > .ct-container {
	--hdr-b2: clamp(40px, 4.6vw, 70px);
}

.amorea-home-motifs #header [data-device="desktop"] [data-row="middle"] > .ct-container::before {
	-webkit-mask-image: var(--season-shape-primary), var(--season-shape-primary), var(--season-shape-primary);
	mask-image: var(--season-shape-primary), var(--season-shape-primary), var(--season-shape-primary);
	-webkit-mask-position: 0 14%, calc(25% + var(--hdr-e) * 0.5 + 36px - var(--hdr-b2) * 0.25) 66%, 100% 72%;
	mask-position: 0 14%, calc(25% + var(--hdr-e) * 0.5 + 36px - var(--hdr-b2) * 0.25) 66%, 100% 72%;
	-webkit-mask-size: calc(var(--hdr-e) * 0.62) auto, var(--hdr-b2) auto, calc(var(--hdr-e) * 0.9) auto;
	mask-size: calc(var(--hdr-e) * 0.62) auto, var(--hdr-b2) auto, calc(var(--hdr-e) * 0.9) auto;
}

/* Escritorio: luna entre buscador e íconos + estrellas. */
.amorea-home-motifs #header [data-device="desktop"] [data-row="middle"] > .ct-container::after {
	-webkit-mask-image: var(--season-shape-celestial), var(--season-shape-secondary), var(--season-shape-secondary), var(--season-shape-secondary), var(--season-shape-secondary), var(--season-shape-secondary);
	mask-image: var(--season-shape-celestial), var(--season-shape-secondary), var(--season-shape-secondary), var(--season-shape-secondary), var(--season-shape-secondary), var(--season-shape-secondary);
	-webkit-mask-position: 73% 42%, 0.4% 80%, 21% 24%, 66% 84%, 78.5% 22%, 99.6% 10%;
	mask-position: 73% 42%, 0.4% 80%, 21% 24%, 66% 84%, 78.5% 22%, 99.6% 10%;
	-webkit-mask-size: clamp(36px, 3.9vw, 58px) auto, clamp(10px, 1vw, 15px) auto, clamp(11px, 1.2vw, 18px) auto, clamp(10px, 1vw, 15px) auto, clamp(9px, 0.9vw, 13px) auto, clamp(10px, 1vw, 15px) auto;
	mask-size: clamp(36px, 3.9vw, 58px) auto, clamp(10px, 1vw, 15px) auto, clamp(11px, 1.2vw, 18px) auto, clamp(10px, 1vw, 15px) auto, clamp(9px, 0.9vw, 13px) auto, clamp(10px, 1vw, 15px) auto;
}

/* Móvil: sólo franja superior (0–20 %) e inferior (82–100 %). */
.amorea-home-motifs #header [data-device="mobile"] [data-row="middle"] > .ct-container::before {
	-webkit-mask-image: var(--season-shape-primary), var(--season-shape-primary), var(--season-shape-primary);
	mask-image: var(--season-shape-primary), var(--season-shape-primary), var(--season-shape-primary);
	-webkit-mask-position: 0 6%, 44% 96%, 100% 94%;
	mask-position: 0 6%, 44% 96%, 100% 94%;
	-webkit-mask-size: 18px auto, 22px auto, 18px auto;
	mask-size: 18px auto, 22px auto, 18px auto;
}

.amorea-home-motifs #header [data-device="mobile"] [data-row="middle"] > .ct-container::after {
	-webkit-mask-image: var(--season-shape-celestial), var(--season-shape-secondary), var(--season-shape-secondary), var(--season-shape-secondary);
	mask-image: var(--season-shape-celestial), var(--season-shape-secondary), var(--season-shape-secondary), var(--season-shape-secondary);
	-webkit-mask-position: 58% 4%, 34% 8%, 70% 10%, 99% 4%;
	mask-position: 58% 4%, 34% 8%, 70% 10%, 99% 4%;
	-webkit-mask-size: 20px auto, 8px auto, 9px auto, 9px auto;
	mask-size: 20px auto, 8px auto, 9px auto, 9px auto;
}

/* ==========================================================================
   Hero
   ========================================================================== */

.amorea-home-theme .hero {
	position: relative;
	container: season-hero / inline-size;
}

/* La capa del hero va ENCIMA de la foto y debajo del texto (z-index 1). */
.amorea-season-deco--hero {
	z-index: 0;
}

.amorea-home-motifs .amorea-season-deco--hero::before {
	content: "";
	-webkit-mask-image: var(--season-shape-primary), var(--season-shape-primary), var(--season-shape-primary), var(--season-shape-primary), var(--season-shape-primary);
	mask-image: var(--season-shape-primary), var(--season-shape-primary), var(--season-shape-primary), var(--season-shape-primary), var(--season-shape-primary);
	-webkit-mask-position: 38% 13%, 55.5% 7%, 83.5% 5%, 92.5% 9%, 87% 66%;
	mask-position: 38% 13%, 55.5% 7%, 83.5% 5%, 92.5% 9%, 87% 66%;
	-webkit-mask-size: clamp(24px, 4vw, 62px) auto, clamp(22px, 3.6vw, 56px) auto, clamp(22px, 3.6vw, 56px) auto, clamp(26px, 4.4vw, 68px) auto, clamp(30px, 5vw, 78px) auto;
	mask-size: clamp(24px, 4vw, 62px) auto, clamp(22px, 3.6vw, 56px) auto, clamp(22px, 3.6vw, 56px) auto, clamp(26px, 4.4vw, 68px) auto, clamp(30px, 5vw, 78px) auto;
}

/* Telaraña sobre la esquina superior derecha de la tarjeta del hero. */
.amorea-season-deco--hero-web {
	inset: auto;
	top: clamp(0px, 1vw, 20px);
	right: 0;
	width: clamp(56px, 7.4vw, 120px);
	aspect-ratio: 1;
	z-index: 1;
	opacity: 0.32;
	transform: scaleX(-1);
}

.amorea-home-motifs .amorea-season-deco--hero-web::before {
	content: "";
	-webkit-mask: var(--season-shape-corner) 0 0 / contain no-repeat;
	mask: var(--season-shape-corner) 0 0 / contain no-repeat;
}

/* Etiqueta de temporada (reemplaza la línea pequeña sobre el título). */
.amorea-home-theme .amorea-season-label {
	display: inline-flex;
	align-items: center;
	gap: 0.55em;
	max-width: 100%;
	padding: 0.4em 1.1em 0.4em 0.5em;
	border: 1px solid color-mix(in srgb, var(--season-accent) 28%, transparent);
	border-radius: 999px;
	background: var(--season-surface);
	color: var(--season-accent);
	font-size: clamp(0.72rem, 0.5rem + 0.45vw, 1rem);
	letter-spacing: 0.12em;
	line-height: 1.2;
}

.amorea-season-label__icon {
	display: none;
}

.amorea-home-motifs .amorea-season-label__icon {
	display: inline-block;
	flex: 0 0 auto;
	width: 1.9em;
	height: 1.9em;
	background: var(--season-sparkle);
	-webkit-mask: var(--season-shape-badge) center / contain no-repeat;
	mask: var(--season-shape-badge) center / contain no-repeat;
}

/*
 * Hero angosto (celular / columnas estrechas): en el diseño Original la
 * foto queda detrás de un velo blanco al 85 %; con un tema de temporada
 * la foto ES el mensaje, así que el texto va arriba y la foto completa
 * debajo, encuadrada en el oso (rostro y cuerpo), sin velo encima.
 */
@container season-hero (max-width: 700px) {
	.hero__inner {
		flex-direction: column;
		align-items: stretch;
	}

	.hero__content {
		order: 1;
	}

	.hero__background {
		position: relative;
		inset: auto;
		order: 2;
		aspect-ratio: 5 / 4;
	}

	.hero__background img {
		object-position: 68% 60%;
	}

	.hero__overlay {
		background: linear-gradient(to bottom, var(--color-canvas) 0%, rgba(255, 248, 249, 0) 22%);
	}

	/*
	 * La capa del hero se limita a la foto (no al texto). z-index 1: con
	 * `order` el flex pinta la foto (order 2) DESPUÉS de esta capa, que
	 * no es ítem flex — con z-index 0 quedaría tapada por la foto.
	 */
	.amorea-season-deco--hero {
		top: auto;
		height: 80cqi;
		z-index: 1;
	}

	.amorea-home-motifs .amorea-season-deco--hero::before {
		-webkit-mask-position: 6% 30%, 30% 16%, 72% 14%, 94% 24%, 92% 74%;
		mask-position: 6% 30%, 30% 16%, 72% 14%, 94% 24%, 92% 74%;
		-webkit-mask-size: 26px auto, 24px auto, 24px auto, 28px auto, 30px auto;
		mask-size: 26px auto, 24px auto, 24px auto, 28px auto, 30px auto;
	}
}

/* ==========================================================================
   Títulos con adornos a los costados ("Encuentra el detalle perfecto",
   "Lo que dicen nuestros clientes")
   ========================================================================== */

.amorea-season-deco--title-left,
.amorea-season-deco--title-right {
	position: relative;
	inset: auto;
	z-index: 0;
	display: inline-block;
	width: 2.5em;
	height: 1.25em;
	vertical-align: -0.25em;
}

.amorea-season-deco--title-left {
	margin-inline-end: 0.7em;
}

.amorea-season-deco--title-right {
	margin-inline-start: 0.7em;
	transform: scaleX(-1);
}

.amorea-home-motifs .amorea-season-deco--title-left::before,
.amorea-home-motifs .amorea-season-deco--title-right::before {
	content: "";
	-webkit-mask: var(--season-shape-primary) center / contain no-repeat;
	mask: var(--season-shape-primary) center / contain no-repeat;
}

/* ==========================================================================
   Encuentra el detalle perfecto
   ========================================================================== */

.amorea-home-theme .categories {
	position: relative;
	isolation: isolate;
}

.amorea-home-motifs .amorea-season-deco--categories::before {
	content: "";
	-webkit-mask-image: var(--season-shape-primary), var(--season-shape-primary);
	mask-image: var(--season-shape-primary), var(--season-shape-primary);
	-webkit-mask-position: 21.5% 44%, 78% 56%;
	mask-position: 21.5% 44%, 78% 56%;
	-webkit-mask-size: clamp(22px, 3.6vw, 54px) auto, clamp(22px, 3.6vw, 54px) auto;
	mask-size: clamp(22px, 3.6vw, 54px) auto, clamp(22px, 3.6vw, 54px) auto;
}

.amorea-home-motifs .amorea-season-deco--categories::after {
	content: "";
	-webkit-mask-image: var(--season-shape-secondary), var(--season-shape-secondary), var(--season-shape-secondary), var(--season-shape-secondary), var(--season-shape-secondary), var(--season-shape-secondary), var(--season-shape-secondary), var(--season-shape-secondary);
	mask-image: var(--season-shape-secondary), var(--season-shape-secondary), var(--season-shape-secondary), var(--season-shape-secondary), var(--season-shape-secondary), var(--season-shape-secondary), var(--season-shape-secondary), var(--season-shape-secondary);
	-webkit-mask-position: 19.5% 22%, 39.5% 40%, 57.5% 44%, 79% 30%, 96% 44%, 5% 62%, 19% 66%, 74.5% 72%;
	mask-position: 19.5% 22%, 39.5% 40%, 57.5% 44%, 79% 30%, 96% 44%, 5% 62%, 19% 66%, 74.5% 72%;
	-webkit-mask-size: clamp(10px, 1.2vw, 18px) auto, clamp(8px, 1vw, 15px) auto, clamp(9px, 1.1vw, 16px) auto, clamp(10px, 1.2vw, 18px) auto, clamp(9px, 1.1vw, 16px) auto, clamp(8px, 1vw, 15px) auto, clamp(10px, 1.2vw, 18px) auto, clamp(8px, 1vw, 15px) auto;
	mask-size: clamp(10px, 1.2vw, 18px) auto, clamp(8px, 1vw, 15px) auto, clamp(9px, 1.1vw, 16px) auto, clamp(10px, 1.2vw, 18px) auto, clamp(9px, 1.1vw, 16px) auto, clamp(8px, 1vw, 15px) auto, clamp(10px, 1.2vw, 18px) auto, clamp(8px, 1vw, 15px) auto;
}

/* Adorno grande a ambos lados, asomando desde el borde de la pantalla. */
.amorea-season-img--side-left,
.amorea-season-img--side-right {
	bottom: 4%;
	width: clamp(56px, 8.6vw, 136px);
	z-index: -1;
}

.amorea-season-img--side-left {
	left: calc(clamp(56px, 8.6vw, 136px) * -0.12);
}

.amorea-season-img--side-right {
	right: calc(clamp(56px, 8.6vw, 136px) * -0.12);
}

/* ==========================================================================
   Beneficios (Calidad premium / Envíos rápidos / ...)
   ========================================================================== */

.amorea-home-theme .value-props__box {
	position: relative;
	isolation: isolate;
}

.amorea-home-motifs .amorea-season-deco--value-props::before {
	content: "";
	-webkit-mask-image: var(--season-shape-primary);
	mask-image: var(--season-shape-primary);
	-webkit-mask-position: 22.5% 16%;
	mask-position: 22.5% 16%;
	-webkit-mask-size: clamp(18px, 2.4vw, 36px) auto;
	mask-size: clamp(18px, 2.4vw, 36px) auto;
}

.amorea-home-motifs .amorea-season-deco--value-props::after {
	content: "";
	-webkit-mask-image: var(--season-shape-secondary), var(--season-shape-secondary), var(--season-shape-secondary);
	mask-image: var(--season-shape-secondary), var(--season-shape-secondary), var(--season-shape-secondary);
	-webkit-mask-position: 24.5% 58%, 50.5% 46%, 95% 22%;
	mask-position: 24.5% 58%, 50.5% 46%, 95% 22%;
	-webkit-mask-size: clamp(7px, 0.8vw, 12px) auto, clamp(7px, 0.8vw, 12px) auto, clamp(8px, 0.9vw, 13px) auto;
	mask-size: clamp(7px, 0.8vw, 12px) auto, clamp(7px, 0.8vw, 12px) auto, clamp(8px, 0.9vw, 13px) auto;
}

.amorea-season-img--value-corner {
	right: 0.6%;
	bottom: -8%;
	width: clamp(34px, 4.2vw, 64px);
	z-index: 0;
}

/* ==========================================================================
   Los más amados
   ========================================================================== */

.amorea-home-theme .featured-products {
	position: relative;
}

.amorea-home-theme .featured-products__header {
	position: relative;
}

.amorea-season-img.amorea-season-img--heading {
	position: static;
	display: inline-block;
	width: 1.75em;
	margin-inline-start: 0.4em;
	vertical-align: -0.45em;
}

.amorea-season-deco--featured-header {
	inset: auto;
	top: 50%;
	right: calc(-1 * clamp(26px, 3vw, 44px) - 4px);
	width: clamp(26px, 3vw, 44px);
	height: clamp(12px, 1.4vw, 20px);
	transform: translateY(-20%);
	z-index: 0;
}

.amorea-home-motifs .amorea-season-deco--featured-header::before {
	content: "";
	-webkit-mask: var(--season-shape-primary) center / contain no-repeat;
	mask: var(--season-shape-primary) center / contain no-repeat;
}

/* Calabaza pequeña asomando en el borde izquierdo, antes de "¿Por qué elegir?". */
.amorea-season-img--edge {
	left: 0.4%;
	bottom: -14px;
	width: clamp(22px, 2.6vw, 40px);
	z-index: 0;
}

/* ==========================================================================
   ¿Por qué elegir Amorea?
   ========================================================================== */

.amorea-home-theme .why-choose-us__box {
	position: relative;
	isolation: isolate;
}

.amorea-home-motifs .amorea-season-deco--why::before {
	content: "";
	-webkit-mask-image: var(--season-shape-primary);
	mask-image: var(--season-shape-primary);
	-webkit-mask-position: 97.5% 18%;
	mask-position: 97.5% 18%;
	-webkit-mask-size: clamp(20px, 2.8vw, 42px) auto;
	mask-size: clamp(20px, 2.8vw, 42px) auto;
}

.amorea-home-motifs .amorea-season-deco--why::after {
	content: "";
	-webkit-mask-image: var(--season-shape-secondary), var(--season-shape-secondary);
	mask-image: var(--season-shape-secondary), var(--season-shape-secondary);
	-webkit-mask-position: 9% 24%, 78.5% 12%;
	mask-position: 9% 24%, 78.5% 12%;
	-webkit-mask-size: clamp(8px, 0.9vw, 13px) auto, clamp(8px, 0.9vw, 13px) auto;
	mask-size: clamp(8px, 0.9vw, 13px) auto, clamp(8px, 0.9vw, 13px) auto;
}

/* ==========================================================================
   Testimonios — telarañas sutiles en las esquinas
   ========================================================================== */

.amorea-home-theme .testimonials {
	position: relative;
	isolation: isolate;
}

.amorea-season-deco--corner-left,
.amorea-season-deco--corner-right {
	inset: auto;
	top: calc(-1 * clamp(4px, 1vw, 16px));
	width: clamp(40px, 7.4vw, 116px);
	aspect-ratio: 1;
	opacity: 0.28;
}

.amorea-season-deco--corner-left {
	left: 1%;
}

.amorea-season-deco--corner-right {
	right: 0;
	transform: scaleX(-1);
}

.amorea-home-motifs .amorea-season-deco--corner-left::before,
.amorea-home-motifs .amorea-season-deco--corner-right::before {
	content: "";
	-webkit-mask: var(--season-shape-corner) 0 0 / contain no-repeat;
	mask: var(--season-shape-corner) 0 0 / contain no-repeat;
}

/* ==========================================================================
   Instagram — fondo blush, fotos intactas
   ========================================================================== */

.amorea-home-theme .instagram__box {
	position: relative;
	isolation: isolate;
	background: var(--season-surface);
}

.amorea-home-motifs .amorea-season-deco--instagram::after {
	content: "";
	-webkit-mask-image: var(--season-shape-secondary), var(--season-shape-secondary);
	mask-image: var(--season-shape-secondary), var(--season-shape-secondary);
	-webkit-mask-position: 1.5% 10%, 14.5% 90%;
	mask-position: 1.5% 10%, 14.5% 90%;
	-webkit-mask-size: clamp(8px, 0.9vw, 13px) auto, clamp(7px, 0.8vw, 12px) auto;
	mask-size: clamp(8px, 0.9vw, 13px) auto, clamp(7px, 0.8vw, 12px) auto;
}

/* ==========================================================================
   Footer — franja al fondo, detrás del contenido
   ========================================================================== */

.amorea-home-theme {
	--season-strip-h: clamp(150px, 20.8333vw, 500px); /* 2400×500 */
}

/*
 * La franja va en el contexto de apilamiento raíz con z-index -1 (sobre el
 * lienzo, debajo de todo el contenido). Por eso el footer pierde acá su
 * z-index: 2 (layout.css): con fondo transparente sigue pintándose sobre
 * la sección de arriba por orden de documento, y sin crear un contexto
 * propio el logo puede fundir su fondo blanco con la escena (multiply).
 */
.amorea-home-theme .site-footer,
.amorea-home-theme #footer {
	position: relative;
	z-index: auto;
	background: transparent;
}

/* footer-brand.webp no tiene transparencia: su blanco desaparece sobre la escena. */
.amorea-home-theme .site-footer__brand-image {
	mix-blend-mode: multiply;
}

/* Espacio bajo el copyright para que quede sobre el cielo, no sobre las colinas. */
.amorea-home-theme #footer {
	padding-bottom: calc(var(--season-strip-h) * 0.2);
}

.amorea-home-theme .ct-footer-copyright {
	text-align: center;
}

.amorea-season-footer {
	position: relative;
	height: 0;
	pointer-events: none;
}

.amorea-season-footer__strip {
	left: 0;
	bottom: 0;
	width: 100%;
	height: var(--season-strip-h);
	object-fit: cover;
	object-position: 50% 100%;
	z-index: -1;
}

.amorea-season-deco--footer {
	inset: auto 0 0;
	height: var(--season-strip-h);
}

.amorea-home-motifs .amorea-season-deco--footer::after {
	content: "";
	-webkit-mask-image: var(--season-shape-secondary), var(--season-shape-secondary);
	mask-image: var(--season-shape-secondary), var(--season-shape-secondary);
	-webkit-mask-position: 28% 18%, 88% 8%;
	mask-position: 28% 18%, 88% 8%;
	-webkit-mask-size: clamp(9px, 1vw, 15px) auto, clamp(10px, 1.2vw, 18px) auto;
	mask-size: clamp(9px, 1vw, 15px) auto, clamp(10px, 1.2vw, 18px) auto;
}