/*
|--------------------------------------------------------------------------
| AMOREA — LAYOUT
|--------------------------------------------------------------------------
*/

/*
 * El <nav> del menú principal trae un margin lateral de 10px por
 * defecto de Blocksy, que lo desalinea del logo (arriba) y del carrito
 * (a la derecha) — ambos SÍ comparten el mismo borde de columna. Se
 * quita el margin y se estira el menú con space-between para que
 * "Inicio" quede bajo el logo y "Contacto" alineado con "Carrito".
 */
#header-menu-1 {
	margin-inline: 0 !important;
	width: 100%;
}

#header-menu-1 #menu-menu-principal {
	justify-content: space-between;
	width: 100%;
}

/*
 * Los 8 ítems del menú (Inicio…Contacto) con el padding horizontal por
 * defecto de Blocksy (12.5px por lado) suman ~1221px, unos 21px más que
 * el ancho del contenedor (1200px) — eso hace que Blocksy pliegue
 * "Contacto" dentro de un botón "MÁS". Se recorta el padding lateral
 * (con margen de sobra, no al límite justo) para que los 8 quepan
 * siempre sin activar el colapso, en vez de tocar el ancho global del
 * contenedor.
 */
#header-menu-1 #menu-menu-principal > li > a {
	padding-inline: 8px !important;
}

.nav-menu-icon {
	display: inline-block;
	width: 28px;
	height: 28px;
	max-width: none;
	vertical-align: -9px;
	margin-inline-end: 6px;
}

/* "Hasta 20% de descuento" resaltado en rosa, como una promo */
#header-menu-1 a:has(img[src*="nav-tag"]) {
	color: var(--color-primary);
}

/*
 * Desplegables del menú principal de ESCRITORIO (Peluches, Boxes Amorea,
 * Complementos, Ediciones Especiales). Blocksy los pinta con
 * `background-color: var(--dropdown-background-color, var(--theme-palette-color-4))`
 * (regla `[class*=animated-submenu] > .sub-menu` de su bundle): sin
 * `--dropdown-background-color` cae al color 4 de su paleta (#192a3d, azul
 * oscuro), con texto blanco y divisores blancos translúcidos
 * (`.sub-menu .menu-item { border-top: var(--dropdown-divider) }`, por
 * defecto `1px dashed rgba(255,255,255,.1)`).
 *
 * Se re-viste con la identidad de Amorea SIN tocar Blocksy: fondo blanco,
 * borde y divisores rosa suave, radio y sombra de los componentes del
 * tema (mismos tokens que `.mega-menu-bar__panel` / `.card`), texto
 * oscuro y estado hover/foco en rosa claro + rosa principal.
 *
 * Acotado a `#header [data-device="desktop"] #header-menu-1` — el menú
 * móvil (offcanvas) es otra estructura y no usa este id; tampoco toca
 * admin, checkout, cuenta ni footer. No se modifica posición, apertura
 * ni cierre del desplegable.
 */
#header [data-device="desktop"] #header-menu-1 .sub-menu {
	background-color: var(--color-surface);
	border: 1px solid var(--color-accent);
	border-radius: var(--radius-md);
	box-shadow: var(--shadow-md);
	padding-block: var(--space-2);
	--dropdown-divider: 1px solid rgba(203, 37, 90, 0.12);
}

/* El primer ítem también recibe el `border-top` del divisor: sobra (no
   hay opción encima) y con el rosa se vería como una línea suelta. */
#header [data-device="desktop"] #header-menu-1 .sub-menu .menu-item:first-child {
	border-top: 0;
}

#header [data-device="desktop"] #header-menu-1 .sub-menu .ct-menu-link {
	color: var(--color-text);
	transition: background-color var(--transition-fast), color var(--transition-fast);
}

#header [data-device="desktop"] #header-menu-1 .sub-menu .menu-item > .ct-menu-link:hover,
#header [data-device="desktop"] #header-menu-1 .sub-menu .menu-item > .ct-menu-link:focus,
#header [data-device="desktop"] #header-menu-1 .sub-menu .menu-item > .ct-menu-link:focus-visible {
	/* Fondo rosa muy claro (mismo patrón `rgba(203,37,90,·)` que ya usan
	   `.value-props__box`, `.why-reason`, etc. — no es un rosa nuevo). Más
	   tenue que `--color-accent` a propósito, para no saturar. El texto usa
	   `--color-primary-hover`: es el MISMO tono de hover que `a:hover` en
	   todo el sitio (typography.css) y sobre este fondo da ~6:1 de
	   contraste (AA holgado); con `--color-primary` puro quedaba en ~4.4:1. */
	background-color: rgba(203, 37, 90, 0.12);
	color: var(--color-primary-hover);
}

/*
|--------------------------------------------------------------------------
| Mega panel "boutique" — TODOS los desplegables de categoría (escritorio)
|--------------------------------------------------------------------------
| `inc/setup/mega-menu.php` filtra el HTML de `wp_nav_menu()` del menú de
| escritorio y, por cada ítem de primer nivel que es una categoría con
| submenú, MUEVE su `<ul class="sub-menu">` real dentro de un
| `<div class="mega-menu">` con eyebrow, título, botón y una foto. No se
| duplica ninguna categoría, no se toca Blocksy ni el menú de WP.
|
| Genérico: sirve para Peluches, Boxes Amorea, Complementos, Ediciones
| Especiales y cualquier categoría nueva con submenús. Los textos y la
| imagen salen de la config de menú de la categoría (metas
| `_amorea_menu_*`, editables en Catálogo → Categorías); si no hay imagen
| propia se usa `menu-peluches.webp` (Peluches) o `menu-default.webp`
| (resto). Apertura/cierre/teclado siguen siendo de Blocksy: se revela
| con `:hover` / `:focus-within` / `.ct-active` del propio <li>. Sin JS.
| Layout con grid + clamp() (sin posiciones rígidas). El menú móvil no
| se toca (esa llamada a wp_nav_menu no lleva `blocksy_mega_menu`).
*/
/* El panel se posiciona respecto al <ul> del menú (no respecto al <li>),
   así SIEMPRE cabe dentro del ancho del menú sea cual sea el ítem, el
   ancho de pantalla o el zoom. Los <li> de categoría pasan a `static`
   solo para eso; su apertura/cierre/teclado no dependen de la posición
   (usan :hover / :focus-within / .ct-active, que funcionan igual). */
#header [data-device="desktop"] #header-menu-1 #menu-menu-principal {
	position: relative;
}

#header [data-device="desktop"] #header-menu-1 .mega-menu-boutique {
	position: static;
}

#header [data-device="desktop"] #header-menu-1 .mega-menu-boutique > .mega-menu {
	position: absolute;
	top: 100%;
	left: 0;
	z-index: 20;
	width: clamp(600px, 44vw, 720px);
	max-width: calc(100% - 1rem);
	display: grid;
	grid-template-columns: minmax(0, 1fr) clamp(220px, 34%, 300px);
	grid-template-rows: auto minmax(0, 1fr) auto;
	grid-template-areas:
		"intro  figure"
		"list   figure"
		"cta    figure";
	column-gap: var(--space-6);
	row-gap: var(--space-4);
	/* Compacto a propósito: el panel debe caber entero incluso con zoom
	   150 % en una MacBook de 13". El `max-height` + `overflow` es la red
	   de seguridad: en zoom extremo se contiene y hace scroll interno en
	   vez de desbordar la pantalla. */
	padding: var(--space-5);
	max-height: calc(100vh - 88px);
	overflow: auto;
	overscroll-behavior: contain;
	background: var(--color-canvas);
	border: 1px solid var(--color-accent);
	border-radius: var(--radius-xl);
	box-shadow: 0 24px 50px rgba(45, 37, 48, 0.14), 0 4px 14px rgba(203, 37, 90, 0.08);
	opacity: 0;
	visibility: hidden;
	transform: translateY(6px);
	pointer-events: none;
	transition: opacity var(--transition-base), visibility var(--transition-base), transform var(--transition-base);
}

/* Ítems de la mitad derecha del menú: el panel se ancla a la derecha del
   ítem (se abre hacia la izquierda) para no salirse por el borde derecho
   de la pantalla, con zoom o resoluciones grandes. */
#header [data-device="desktop"] #header-menu-1 .mega-menu-boutique > .mega-menu.mega-menu--align-end {
	left: auto;
	right: 0;
}

/* Sin foto: una sola columna, más estrecho. */
#header [data-device="desktop"] #header-menu-1 .mega-menu-boutique > .mega-menu.mega-menu--no-figure {
	grid-template-columns: 1fr;
	grid-template-areas:
		"intro"
		"list"
		"cta";
	width: clamp(420px, 34vw, 520px);
}

/* Puente invisible bar↔panel para que el hover no parpadee en la costura. */
#header [data-device="desktop"] #header-menu-1 .mega-menu-boutique > .mega-menu::before {
	content: "";
	position: absolute;
	top: -10px;
	left: 0;
	right: 0;
	height: 10px;
}

/* Revelado: mismos disparadores que ya usa Blocksy para su desplegable. */
#header [data-device="desktop"] #header-menu-1 .mega-menu-boutique:hover > .mega-menu,
#header [data-device="desktop"] #header-menu-1 .mega-menu-boutique:focus-within > .mega-menu,
#header [data-device="desktop"] #header-menu-1 .mega-menu-boutique.ct-active > .mega-menu {
	opacity: 1;
	visibility: visible;
	transform: none;
	pointer-events: auto;
}

/* La lista real de Blocksy, ya movida dentro del panel: se le quita todo
   el "chrome" (fondo/borde/sombra/posición) del bloque `.sub-menu` de
   arriba y se coloca como columna izquierda en 2 columnas. */
#header [data-device="desktop"] #header-menu-1 .mega-menu .sub-menu {
	position: static !important;
	grid-area: list;
	opacity: 1 !important;
	visibility: visible !important;
	transform: none !important;
	background: none !important;
	border: 0 !important;
	border-radius: 0 !important;
	box-shadow: none !important;
	padding: 0 !important;
	margin: 0 !important;
	min-width: 0;
	width: auto;
	display: grid;
	grid-template-columns: 1fr 1fr;
	column-gap: var(--space-6);
	row-gap: 0;
	align-content: start;
}

#header [data-device="desktop"] #header-menu-1 .mega-menu .sub-menu > li {
	border: 0 !important;
	margin: 0 !important;
}

#header [data-device="desktop"] #header-menu-1 .mega-menu .sub-menu .ct-menu-link {
	position: relative;
	display: block;
	font-family: var(--font-body);
	font-size: var(--text-base);
	font-weight: 500;
	line-height: 1.1;
	color: var(--color-text);
	padding: var(--space-4) var(--space-3) var(--space-4) 28px;
	border-radius: var(--radius-md);
	/* división horizontal rosada extremadamente sutil, no una caja */
	border-bottom: 1px solid rgba(203, 37, 90, 0.10);
	transition: background-color var(--transition-fast), color var(--transition-fast);
}

/* sin división bajo la última fila (los 2 últimos ítems) */
#header [data-device="desktop"] #header-menu-1 .mega-menu .sub-menu > li:nth-last-child(-n+2) > .ct-menu-link {
	border-bottom: 0;
}

/* Corazón decorativo a la IZQUIERDA del nombre: SIEMPRE visible, VACÍO
   (contorno) por defecto y RELLENO al pasar el cursor o con foco de
   teclado. Dos pseudo-elementos superpuestos que hacen crossfade:
   ::before = ♡ vacío, ::after = ♥ relleno. (Blocksy no pone ninguna
   flecha en los enlaces hoja del submenú, así que se puede usar ::after.) */
#header [data-device="desktop"] #header-menu-1 .mega-menu .sub-menu .ct-menu-link::before,
#header [data-device="desktop"] #header-menu-1 .mega-menu .sub-menu .ct-menu-link::after {
	position: absolute;
	left: 9px;
	top: 50%;
	transform: translateY(-50%);
	color: var(--color-primary);
	font-size: 12px;
	line-height: 1;
	transition: opacity var(--transition-fast);
	pointer-events: none;
}

#header [data-device="desktop"] #header-menu-1 .mega-menu .sub-menu .ct-menu-link::before {
	content: "\2661"; /* ♡ contorno */
	opacity: 1;
}

#header [data-device="desktop"] #header-menu-1 .mega-menu .sub-menu .ct-menu-link::after {
	content: "\2665"; /* ♥ relleno */
	opacity: 0;
}

#header [data-device="desktop"] #header-menu-1 .mega-menu .sub-menu > li > .ct-menu-link:hover,
#header [data-device="desktop"] #header-menu-1 .mega-menu .sub-menu > li > .ct-menu-link:focus,
#header [data-device="desktop"] #header-menu-1 .mega-menu .sub-menu > li > .ct-menu-link:focus-visible {
	background-color: rgba(203, 37, 90, 0.10);
	color: var(--color-primary-hover);
}

/* al pasar el cursor / con foco: se apaga el vacío y se enciende el relleno */
#header [data-device="desktop"] #header-menu-1 .mega-menu .sub-menu > li > .ct-menu-link:hover::before,
#header [data-device="desktop"] #header-menu-1 .mega-menu .sub-menu > li > .ct-menu-link:focus::before,
#header [data-device="desktop"] #header-menu-1 .mega-menu .sub-menu > li > .ct-menu-link:focus-visible::before {
	opacity: 0;
}

#header [data-device="desktop"] #header-menu-1 .mega-menu .sub-menu > li > .ct-menu-link:hover::after,
#header [data-device="desktop"] #header-menu-1 .mega-menu .sub-menu > li > .ct-menu-link:focus::after,
#header [data-device="desktop"] #header-menu-1 .mega-menu .sub-menu > li > .ct-menu-link:focus-visible::after {
	opacity: 1;
}

.mega-menu__intro {
	grid-area: intro;
}

/* Línea 1 (arriba): lead en negro. */
.mega-menu__lead {
	margin: 0 0 var(--space-1);
	font-family: var(--font-display);
	font-weight: 600;
	font-size: var(--text-lg);
	line-height: 1.2;
	color: var(--color-text);
}

/* Línea 2 (abajo): nombre de la categoría, grande y en rosa. */
.mega-menu__name {
	margin: 0;
	font-family: var(--font-display);
	font-weight: 600;
	font-size: clamp(1.9rem, 1.45rem + 1.5vw, 2.4rem);
	line-height: 1.03;
	color: var(--color-primary);
}

.mega-menu__cta {
	/* En la columna izquierda, debajo de la lista, alineado a la izquierda. */
	grid-area: cta;
	justify-self: start;
	align-self: end;
	display: inline-flex;
	align-items: center;
	gap: var(--space-2);
	margin-top: var(--space-2);
	padding: var(--space-3) var(--space-5);
	border-radius: var(--radius-lg);
	background: var(--color-primary);
	color: var(--color-surface);
	font-family: var(--font-body);
	font-size: var(--text-sm);
	font-weight: 600;
	line-height: 1;
	white-space: nowrap;
	box-shadow: var(--shadow-sm);
	transition: background var(--transition-fast), color var(--transition-fast);
}

#header [data-device="desktop"] #header-menu-1 .mega-menu .mega-menu__cta:hover,
#header [data-device="desktop"] #header-menu-1 .mega-menu .mega-menu__cta:focus-visible {
	background: var(--color-primary-hover);
	color: var(--color-surface);
}

.mega-menu__cta-arrow {
	font-size: 1.1em;
	line-height: 0;
}

.mega-menu__figure {
	grid-area: figure;
	position: relative;
	align-self: stretch;
	margin: 0;
	min-height: 280px;
	border-radius: var(--radius-lg);
	overflow: hidden;
	background: var(--color-accent);
}

/* Absoluta: la foto llena la celda de grid sin dictar su alto (así la
   columna izquierda y la foto quedan igualadas, sin hueco vertical). */
.mega-menu__img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	max-width: none;
	object-fit: cover;
	object-position: center 40%;
}


/*
 * Usa las mismas variables de ancho de contenedor que Blocksy
 * (--theme-container-width / --theme-normal-container-max-width, del
 * ajuste global "Container Width" en Personalizar > Diseño) en vez de
 * un max-width propio — si no, el header/footer de Blocksy (que sí usa
 * esas variables via .ct-container) queda desalineado del contenido de
 * nuestras secciones, como pasó con el hero.
 */
.container {
	width: var(--theme-container-width, 100%);
	max-width: var(--theme-normal-container-max-width, var(--container-width));
	margin-inline: auto;
}

.container--reading {
	max-width: var(--container-reading);
}

/*
 * Prueba: ensanchar el contenedor sólo en el home (de 1200px a
 * 1320px, el mismo valor que ya usa .shop-page) para reducir el
 * espacio en blanco lateral en pantallas grandes — no toca
 * `.container` en general, así el resto del sitio sigue en 1200px
 * hasta confirmar si este ancho se aprueba para el home.
 */
body.home .container {
	max-width: 1320px;
}

/*
 * El header/footer de Blocksy usan su propio `.ct-container` (ligado a
 * la misma variable global de 1200px) — sin este ajuste quedan más
 * angostos que el contenido y el menú/logo no alinean con el resto de
 * la página.
 */
body.home #header .ct-container,
body.home #footer .ct-container {
	max-width: 1320px;
}

/*
 * En tienda/categoría el contenido (`.shop-page`, ver archive.css) va
 * a 1400px — el header/footer de Blocksy (`.ct-container`) y el
 * bloque de columnas del footer (`.container`, hooked en
 * blocksy:footer:before, es un elemento aparte que no pasa por
 * `.ct-container`) siguen el mismo ancho ahí para no desalinear nada.
 */
body.woocommerce-page #header .ct-container,
body.woocommerce-page #footer .ct-container,
body.woocommerce-page .container {
	max-width: 1400px;
}

.section {
	padding-block: var(--space-16);
}

.section--tight {
	padding-block: var(--space-10);
}

.section__header {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: var(--space-2);
	margin-bottom: var(--space-10);
}

/* Mucho menos espacio entre la foto del hero y este título */
.categories {
	padding-top: 0;
	padding-bottom: var(--space-4);
}

.categories .section-title {
	font-size: var(--text-base);
	font-family: var(--font-body);
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.04em;
}

.categories .section-title .section-title__heart {
	font-size: 1em;
}

.grid {
	display: grid;
	gap: var(--space-6);
}

.grid--2 {
	grid-template-columns: repeat(2, 1fr);
}

.grid--3 {
	grid-template-columns: repeat(3, 1fr);
}

.grid--4 {
	grid-template-columns: repeat(4, 1fr);
}

.grid--6 {
	grid-template-columns: repeat(6, 1fr);
}

.grid--8 {
	grid-template-columns: repeat(8, 1fr);
}

@media (max-width: 1024px) {
	.grid--6,
	.grid--8 {
		grid-template-columns: repeat(4, 1fr);
	}

	.grid--4 {
		grid-template-columns: repeat(2, 1fr);
	}
}

@media (max-width: 768px) {
	.grid--2,
	.grid--3,
	.grid--4,
	.grid--6,
	.grid--8 {
		grid-template-columns: repeat(2, 1fr);
	}
}

@media (max-width: 480px) {
	.grid--2,
	.grid--3,
	.grid--4,
	.grid--6,
	.grid--8 {
		grid-template-columns: 1fr;
	}
}

.flex-row {
	display: flex;
	align-items: center;
	gap: var(--space-4);
}

.flex-between {
	display: flex;
	align-items: center;
	justify-content: space-between;
}

/* Carrusel (productos destacados, testimonios) */
.carousel {
	display: flex;
	gap: var(--space-6);
	overflow-x: auto;
	scroll-snap-type: x mandatory;
	scrollbar-width: none;
}

.carousel::-webkit-scrollbar {
	display: none;
}

.carousel__item {
	scroll-snap-align: start;
	flex: 0 0 auto;
}

.carousel__track {
	display: flex;
	align-items: center;
	gap: var(--space-4);
}

.carousel__dots {
	display: flex;
	justify-content: center;
	gap: var(--space-2);
	margin-top: var(--space-6);
}

.carousel__dot {
	width: 8px;
	height: 8px;
	border-radius: var(--radius-pill);
	background: var(--gray-300);
	border: none;
	padding: 0;
	cursor: pointer;
	transition: background var(--transition-fast);
}

.carousel__dot.is-active {
	background: var(--color-primary);
}

/*
 * Testimonios — 3 tarjetas por fila (igual de espaciado que las demás
 * secciones), flechas ancladas a los bordes izq/der de la fila en vez
 * de sueltas debajo.
 */
.testimonials {
	padding-top: 0;
	padding-bottom: var(--space-10);
}

.testimonials__heading {
	text-align: center;
}

.testimonials__row {
	position: relative;
}

.testimonials .carousel {
	overflow: hidden;
}

.testimonials .carousel__item {
	flex: 0 0 calc((100% - 2 * var(--space-6)) / 3);
}

.testimonials__arrow {
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	z-index: 2;
	width: 32px;
	height: 32px;
}

.testimonials__arrow--prev {
	left: calc(-1 * var(--space-16));
}

.testimonials__arrow--next {
	right: calc(-1 * var(--space-16));
}

@media (max-width: 900px) {
	.testimonials .carousel__item {
		flex: 0 0 100%;
	}

	.testimonials__arrow--prev {
		left: 0;
	}

	.testimonials__arrow--next {
		right: 0;
	}
}

.carousel__arrow {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 40px;
	height: 40px;
	border-radius: var(--radius-pill);
	background: var(--color-primary);
	color: var(--color-surface);
	flex: 0 0 auto;
}

/*
 * Rediseño móvil de "Lo que dicen nuestros clientes" (≤768px) — va
 * DESPUÉS de `.carousel__arrow` a propósito: ambas reglas tienen la
 * misma especificidad (una sola clase) y ésta necesita ganar su 44×44
 * por orden de cascada. También pisa el bloque de ≤900px de más arriba,
 * sólo en este rango más angosto.
 *
 * BUG REAL que corrige: a ≤900px las flechas quedaban en `left:0`/
 * `right:0` — dentro de la propia tarjeta (`.testimonials__row` es su
 * contenedor de posicionamiento), montadas sobre el avatar y el borde
 * del contenido. Se pasan a `position:static` (con eso `left`/`right`
 * dejan de tener efecto) y se reordenan por flexbox —sin tocar el
 * HTML— a una fila propia debajo de la tarjeta: `.testimonials__row`
 * es flex-wrap; la tarjeta (`order:1`, `flex-basis:100%`) ocupa toda la
 * primera línea y fuerza a que las dos flechas (`order:2`) caigan
 * juntas a la línea siguiente, centradas.
 */
@media (max-width: 768px) {
	.testimonials__row {
		display: flex;
		flex-wrap: wrap;
		justify-content: center;
		align-items: center;
		row-gap: var(--space-4);
		column-gap: var(--space-4);
	}

	.testimonials .carousel {
		order: 1;
		flex: 0 0 100%;
		width: 100%;
		max-width: 380px;
		margin-inline: auto;
		overflow: hidden;
	}

	.testimonials .carousel__item {
		flex: 0 0 100%;
		width: 100%;
	}

	.testimonial-card {
		height: auto;
		min-height: 0;
	}

	.testimonials__arrow {
		position: static;
		order: 2;
		transform: none;
		width: 44px;
		height: 44px;
		flex: 0 0 auto;
	}

	.testimonials__arrow:focus-visible {
		outline: 2px solid var(--color-primary);
		outline-offset: 2px;
	}
}

/*
 * Hero — foto de fondo a todo el ancho de la sección, con el texto
 * superpuesto encima (no una grilla de 2 columnas separadas).
 */
.hero__inner {
	position: relative;
	min-height: 480px;
	display: flex;
	align-items: center;
	overflow: hidden;
	border-radius: var(--radius-xl);
}

.hero__background {
	position: absolute;
	inset: 0;
	z-index: 0;
}

.hero__background img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.hero__overlay {
	position: absolute;
	inset: 0;
	background: linear-gradient(
		to right,
		var(--color-canvas) 0%,
		rgba(255, 248, 249, 0.85) 40%,
		rgba(255, 248, 249, 0.15) 70%
	);
}

.hero__content {
	position: relative;
	z-index: 1;
	max-width: 560px;
	padding: var(--space-12);
}

.hero__title {
	margin-block: var(--space-1);
	line-height: 0.95;
}

/*
 * <h1> real de la portada (SEO local) — convive con `.hero__title`
 * (bajado a <p>, conserva su apariencia vía la clase `.h1`). Tamaño
 * intermedio entre el título grande y `.hero__description`: se lee
 * como una línea más del hero, no como un bloque de SEO pegado aparte.
 */
.hero__local-seo {
	margin-block: var(--space-3) var(--space-2);
	font-family: var(--font-body);
	font-size: var(--text-lg);
	font-weight: 500;
	line-height: 1.3;
	color: var(--color-text);
}

.hero__title-accent {
	color: var(--color-primary);
}

.hero__description {
	max-width: 44ch;
	margin-bottom: var(--space-6);
}

.hero__badges {
	flex-wrap: wrap;
	gap: var(--space-6);
	margin-top: var(--space-8);
	font-size: var(--text-sm);
	color: var(--color-text-muted);
}

.hero__badges img {
	width: 18px;
	height: 18px;
	max-width: none;
}

.hero__title-heart {
	width: 56px;
	height: 56px;
	max-width: none;
	margin-inline-start: var(--space-2);
	display: inline-block;
	vertical-align: -12px;
	transform: rotate(18deg);
}

@media (max-width: 768px) {
	/*
	 * DIAGNÓSTICO (Playwright, sin barra de administración, 390px):
	 * después de acotar la altura vacía de la fila del header (ver
	 * mobile-menu.css, `[data-row="middle"] > .ct-container`, 110px ->
	 * ~100px reales, sin recortar logo ni íconos), el resto de la
	 * separación era este `padding-top` — heredado de `.section--tight`
	 * (`padding-block: var(--space-10)`, 40px), una utilidad genérica
	 * compartida con otras secciones. Se anula sólo acá, sólo en móvil;
	 * `.hero` es clase única de esta sección y el `padding-bottom` (40px)
	 * y el escritorio no se tocan. 8px dan el ~8px pedido entre el borde
	 * inferior de la fila y la tarjeta.
	 */
	.hero {
		padding-top: 8px;
	}

	.hero__inner {
		min-height: 0;
		border-radius: var(--radius-lg);
	}

	.hero__overlay {
		background: rgba(255, 248, 249, 0.85);
	}

	.hero__content {
		max-width: 100%;
		padding: var(--space-6);
	}
}

/*
 * Barra de anuncios: NO es un template-part nuestro — es la fila
 * superior nativa de Blocksy ([data-row="top"], Personalizar > Header >
 * Top Row). Sólo la vestimos con la paleta de marca. Para tener los 3
 * mensajes del mockup en vez de 1, hay que agregar 2 ítems de texto más
 * a esa misma fila desde el Customizer (tarea de wp-admin, no de código).
 */
/*
 * #header eleva la especificidad a propósito: Blocksy ya genera una regla
 * inline más específica ([data-header*="type-1"] .ct-header [data-row*="top"])
 * que fija background-color a var(--theme-palette-color-8, su paleta
 * global) — sin el #header, nuestra regla pierde la cascada aunque cargue
 * después.
 */
/*
 * Tamaño del texto de la barra superior: `clamp()` fluido en lugar del
 * fijo 12px (`--text-xs`) anterior, que en una MacBook de 13" se leía
 * demasiado chico. Va de ~13.4px (portátiles chicos / tablet horizontal,
 * ~1024px — por debajo de eso Blocksy ya no muestra esta fila) hasta un
 * tope de 15px en pantallas grandes (el valor que Blocksy tenía pensado
 * para este elemento). El tope evita que la fila (--height: 32px) crezca.
 */
#header [data-row="top"] {
	background: var(--color-accent);
	color: var(--color-primary);
	font-size: clamp(0.8125rem, 0.68rem + 0.25vw, 0.9375rem);
	font-weight: 600;
	--height: 32px;
}

#header [data-row="top"] .ct-container {
	padding-block: var(--space-1);
	min-height: 32px;
}

#header [data-row="top"] .topbar-highlight {
	text-transform: uppercase;
	letter-spacing: 0.15em;
	font-weight: 700;
}

#header [data-row="top"] p {
	font-size: clamp(0.8125rem, 0.68rem + 0.25vw, 0.9375rem);
	display: flex;
	align-items: center;
	gap: var(--space-1);
	white-space: nowrap;
}

/*
 * Fondo blanco consistente en las filas de logo/buscador y de menú
 * (antes una usaba --color-canvas ligeramente cálido y la otra blanco
 * puro, y esa diferencia se veía como un tinte amarillento). Línea
 * rosada delgada arriba y abajo de la fila del menú, en vez del
 * separador gris por defecto.
 */
#header [data-row="middle"],
#header [data-row="bottom"] {
	background: var(--color-surface);
}

#header [data-row="bottom"] {
	border-top: 1px solid var(--color-accent);
	border-bottom: 1px solid var(--color-accent);
}

/*
 * Blocksy sigue pintando su propio separador (1px #E8E1DC) en el borde
 * inferior del CONTENEDOR de la fila del logo ([data-row="middle"] >
 * .ct-container), ADEMÁS de nuestra única línea rosada de arriba (el
 * border-top de [data-row="bottom"]). A 100 % quedan pegadas y se ven
 * como una sola; con zoom del navegador el redondeo sub-pixel las separa
 * y aparece una "segunda línea rosada". Se anula SÓLO ese separador
 * sobrante de Blocksy — nuestra línea rosada queda intacta, no se ocultan
 * bordes de forma global. #header para ganar la regla inline de Blocksy,
 * mismo criterio que el resto de este archivo.
 */
#header [data-row="middle"] > .ct-container {
	--theme-border-bottom: none;
	border-bottom: 0;
}

#header [data-row="top"] p img {
	width: 14px;
	height: 14px;
	max-width: none;
	flex-shrink: 0;
}

/*
 * Caja de 4 valores (Calidad Premium / Envíos Rápidos / ...) — el color
 * es el de referencia "FONDO ROSADO 2" (#FDECEE), más claro que
 * --color-accent. Sección sin padding-top propio: el espacio con la
 * sección de categorías de arriba debe ser mínimo.
 */
.value-props {
	padding-block: var(--space-2);
}

/*
 * El ancho de la caja tiene que coincidir EXACTO con el de .container
 * (mismos bordes izq/der que categorías y el hero) — antes usaba
 * max-width:92% centrado, que la desalineaba de las demás secciones.
 * El "menos ancho" que se sigue pidiendo es el padding interno, no el
 * borde de la caja.
 */
.value-props__box {
	background: rgba(203, 37, 90, 0.05);
	border-radius: var(--radius-xl);
	padding: var(--space-2) var(--space-10);
}

/*
 * BUG REAL encontrado 2026-10-03 (reporte en vivo de la usuaria,
 * prueba real con Range.getClientRects() por palabra): `.value-card`
 * (ícono a la izquierda, texto a la derecha) partía palabras a la
 * mitad ("CALI/DAD/PREM/IUM") — el fix de hoy más temprano
 * (`.value-card__body{min-width:0;max-width:100%}`, cards.css) evita
 * que el texto DESBORDE su contenedor, pero no evita que se vea mal
 * cuando la columna queda demasiado angosta para el layout horizontal.
 * `.grid--4` (clase compartida con otras 2 páginas que NO usan
 * `.value-card`, nunca se tocan sus quiebres) pasa por 3 cantidades de
 * columnas (1/2/4) según el ancho — medido en vivo, el layout
 * horizontal rompía en 3 rangos reales que no coinciden con esos
 * quiebres: 280-370px, 490-680px y 1030-1270px. En vez de perseguir
 * cada rango con su propio quiebre, `.value-card` pasa a layout
 * vertical centrado (ícono arriba, mismo patrón ya usado en
 * `.cart-trust__item` de Carrito) en los 3 a la vez, vía una sola
 * media query combinada.
 */
@media (max-width: 375px), (min-width: 485px) and (max-width: 685px), (min-width: 1025px) and (max-width: 1275px) {
	.value-props__box .value-card {
		flex-direction: column;
		text-align: center;
		border-left: none !important;
	}
}

/*
 * ¿Por qué elegir Amorea? — imagen (oso + título, provista por el
 * cliente) + las 4 razones. Markup propio (.why-reason, no .value-card):
 * acá el ícono va AL COSTADO del título nada más (misma altura, ambos
 * alineados en una fila), con la descripción debajo — layout distinto
 * al de .value-card (ícono a la izquierda de todo el bloque).
 */
.why-choose-us__box {
	display: flex;
	align-items: center;
	gap: var(--space-6);
	background: rgba(203, 37, 90, 0.05);
	border-radius: var(--radius-xl);
	padding: var(--space-3) var(--space-8);
}

.why-choose-us__heading-image {
	flex: 0 0 auto;
	width: 280px;
	max-width: 35%;
	height: auto;
}

.why-choose-us__reasons {
	display: flex;
	flex: 1;
	min-width: 0;
}

.why-reason {
	flex: 1;
	padding-inline: var(--space-5);
}

.why-reason:not(:first-child) {
	border-left: 1px solid rgba(203, 37, 90, 0.15);
}

.why-reason__head {
	display: flex;
	align-items: center;
	gap: var(--space-2);
}

.why-reason__icon {
	flex: 0 0 auto;
	width: 26px;
	height: 26px;
}

.why-reason__title {
	font-weight: 700;
	font-size: 0.7rem;
	line-height: 1.25;
	text-transform: uppercase;
	letter-spacing: 0.02em;
	margin: 0;
}

.why-reason__text {
	color: var(--color-text-muted);
	font-size: var(--text-xs);
	line-height: 1.3;
	margin: var(--space-1) 0 0;
}

/*
 * Por debajo de 1100px, 4 columnas angostas hacían que "Seleccionados
 * con amor"/"Para cada ocasión" envolvieran a 3 líneas y se viera
 * amontonado — se pasa a una grilla 2x2, cada ítem con más aire.
 */
@media (max-width: 1100px) {
	.why-choose-us__box {
		flex-wrap: wrap;
		justify-content: center;
		text-align: center;
	}

	.why-choose-us__heading-image {
		max-width: 60%;
	}

	.why-choose-us__reasons {
		flex: 0 0 100%;
		display: grid;
		grid-template-columns: 1fr 1fr;
		row-gap: var(--space-4);
	}

	.why-reason {
		border-left: none !important;
	}

	.why-reason__head {
		justify-content: center;
	}
}

@media (max-width: 480px) {
	.why-choose-us__reasons {
		grid-template-columns: 1fr;
	}
}

/*
 * La columna "middle" del header de Blocksy (donde vive nuestro form de
 * búsqueda) tiene min-width:auto por defecto, así que no se encogía y
 * empujaba/tapaba los íconos de cuenta/favoritos/carrito en pantallas
 * más angostas — ver bug reportado con el buscador tapando "Mi cuenta".
 */
#header [data-row="middle"] [data-column="middle"] {
	min-width: 0;
}

/* Barra de categorías / mega-menu */
.mega-menu-bar {
	position: relative;
	background: var(--color-surface);
	border-bottom: 1px solid var(--color-border);
	padding-block: var(--space-3);
}

/*
 * Variante inline: vive dentro de la bottom-row del header de Blocksy
 * (junto al menú principal), no como barra propia de ancho completo.
 */
.mega-menu-bar--inline {
	position: relative;
	background: none;
	border-bottom: none;
	padding-block: 0;
	display: inline-flex;
	margin-inline-end: var(--space-8);
}

/*
 * .btn (buttons.css) se importa DESPUÉS de layout.css en main.css, así
 * que con la misma especificidad (una clase) le gana a esta regla y el
 * padding nunca se aplicaba pese a que el archivo servido era correcto.
 * Selector compuesto (.btn.mega-menu-bar__trigger) para asegurar que
 * esta regla gane sin importar el orden de imports.
 */
.btn.mega-menu-bar__trigger {
	border-radius: var(--radius-md);
	text-transform: uppercase;
	letter-spacing: 0.02em;
	font-size: var(--text-sm);
	padding: var(--space-1) var(--space-4);
	font-weight: 700;
	gap: var(--space-2);
}

.mega-menu-bar__icon {
	font-size: var(--text-lg);
	line-height: 1;
}

.mega-menu-bar__panel {
	position: absolute;
	top: 100%;
	left: var(--container-padding);
	z-index: 20;
	background: var(--color-surface);
	border: 1px solid var(--color-border);
	border-radius: var(--radius-md);
	box-shadow: var(--shadow-md);
	padding: var(--space-4);
	min-width: 260px;
}

.mega-menu-bar__panel[hidden] {
	display: none;
}

.mega-menu-bar__panel ul {
	display: grid;
	gap: var(--space-2);
}

/* Footer completo */
.site-footer {
	background: var(--color-surface);
	padding-top: var(--space-2);
	padding-bottom: var(--space-10);
	/* Todo el bloque (imagen + columnas) se sobrepone ligeramente sobre
	   la sección de arriba, en vez de sólo la imagen — así el borde
	   superior de la imagen y el de las columnas quedan alineados. */
	margin-top: calc(-1 * var(--space-6));
	position: relative;
	z-index: 2;
}

/*
 * 5 columnas (antes 6, incluía Newsletter — retirada, ver
 * template-parts/site/footer-columns.php). Con Contáctanos como
 * última columna, ya no tiene ninguna columna vecina a la derecha con
 * la que pueda chocar visualmente.
 */
.site-footer__grid {
	display: grid;
	grid-template-columns: 1.6fr repeat(4, 1fr);
	align-items: start;
	gap: var(--space-8);
}

.site-footer__grid > * {
	min-width: 0;
}

/* Logo + tagline + redes sociales: una sola imagen provista por el
   cliente — crece para tener una altura comparable a la de las
   columnas de texto (armonía visual), ya no depende de su propio
   margen negativo para sobreponerse (eso ahora lo hace .site-footer). */
.site-footer__brand-image {
	display: block;
	width: 100%;
	max-width: 260px;
	height: auto;
}

.site-footer__heading {
	font-weight: 700;
	text-transform: uppercase;
	font-size: 0.7rem;
	letter-spacing: 0.04em;
	margin-bottom: var(--space-1);
}

/*
 * Tienda/Información/Ayuda ahora son <button> (para el acordeón móvil,
 * ver @media max-width:768px más abajo) en vez de <p> — este reset SÓLO
 * quita el aspecto nativo de botón (fondo, borde, tipografía de control
 * de formulario) para que en ESCRITORIO se vea exactamente igual que el
 * <p> de antes. `.site-footer__heading` (arriba) sigue aportando el
 * tamaño/peso/mayúsculas — nunca se pisan entre sí porque este bloque no
 * toca esas propiedades.
 */
.site-footer__accordion-trigger {
	display: block;
	width: 100%;
	background: none;
	border: 0;
	padding: 0;
	font-family: inherit;
	line-height: inherit;
	color: inherit;
	text-align: left;
	cursor: pointer;
}

/* El chevron sólo existe visualmente en el acordeón móvil. */
.site-footer__accordion-chevron {
	display: none;
}

.site-footer__column ul a {
	color: var(--color-text);
}

.site-footer__column ul {
	display: grid;
	gap: var(--space-1);
	font-size: var(--text-xs);
}

.site-footer__contact-list li {
	display: flex;
	align-items: center;
	gap: var(--space-1);
}

/*
 * `white-space:nowrap` vuelve a ser seguro (decisión explícita de la
 * usuaria, ronda "corrección visual", 2026-09-22: correo en una sola
 * fila) desde que se retiró la columna Newsletter — Contáctanos ahora
 * es la ÚLTIMA columna del grid, así que si el correo no cabe en su
 * ancho asignado, se desborda hacia el margen vacío de la página, no
 * sobre otra columna. Antes (con Newsletter a la derecha) esa misma
 * regla causaba el desborde real ya documentado en este archivo.
 * Verificado con barrido de anchos (320-1920px, Chromium y WebKit) que
 * ningún ancho produce scroll horizontal de página — si se reintroduce
 * otra columna a la derecha de Contáctanos en el futuro, volver a
 * `white-space:normal` (ver git log de este archivo) en vez de asumir
 * que sigue siendo seguro.
 */
.site-footer__contact-list a,
.site-footer__contact-list span {
	min-width: 0;
	white-space: nowrap;
	overflow-wrap: anywhere;
}

.site-footer__contact-list svg {
	flex: 0 0 auto;
	width: 12px;
	height: 12px;
	color: var(--color-primary);
}

.site-footer__column p.text-muted {
	color: var(--color-text);
	font-size: var(--text-xs);
}

.site-footer__column .newsletter-form {
	margin-top: var(--space-3);
}

.site-footer__column .newsletter-form .input {
	padding-block: 3px;
	padding-inline: var(--space-2);
	font-family: var(--font-body);
	font-size: 0.56rem;
}

.site-footer__column .newsletter-form .input::placeholder {
	font-family: var(--font-body);
	font-size: 0.56rem;
}

.site-footer__column .newsletter-form {
	gap: var(--space-1);
}

.site-footer__column .newsletter-form .btn-icon {
	width: 24px;
	height: 24px;
	font-size: var(--text-xs);
}

/*
 * Pedido explícito de la usuaria: las 5 columnas (logo + Tienda +
 * Información + Ayuda + Contáctanos) se mantienen en una sola fila
 * también en este rango (antes Contáctanos bajaba a una fila aparte).
 *
 * El correo NO puede cortarse en 2 líneas — es justo lo que la
 * eliminación de la columna Newsletter buscaba garantizar (ver
 * comentario grande más arriba). Medido de verdad (Playwright): el
 * texto completo de "consultas@amorearegalos.com" + su ícono necesita
 * 256px reales para entrar en una sola línea. Por eso Contáctanos NO
 * es una columna `1fr` más — tiene un piso garantizado de 256px
 * (`minmax(256px, 1.4fr)`) y las otras 4 (logo + Tienda/Información/
 * Ayuda, que son enlaces de texto normal, sin problema si pasan a 2
 * líneas) se reparten el resto por igual.
 *
 * BUG real corregido: el logo más angosto de abajo estaba en un
 * `max-width:1024px` SIN piso — como los `max-width` de CSS no son
 * excluyentes entre sí, esa regla seguía aplicando también dentro del
 * rango móvil (≤768px, apilado en una sola columna), encogiendo ahí el
 * logo sin querer (nunca se pidió eso, y ese rango ni siquiera tiene
 * las 5 columnas en fila que motivaban achicarlo). Acotado con
 * `min-width:769px` para que el logo móvil (≤768px) conserve su
 * tamaño de siempre (260px, regla base).
 */
@media (min-width: 769px) and (max-width: 1024px) {
	/*
	 * BUG real corregido (pedido explícito de la usuaria): mi primera
	 * medición aislada (clon fuera del footer real) daba 256px como
	 * piso para el correo, pero medido DENTRO del layout real de este
	 * rango (sin ningún piso, `max-content` puro) el contenido real de
	 * Contáctanos mide 193px — el piso de 256px sobraba ~63px vacíos a
	 * la derecha de la columna y apretaba de más a las otras 4 (y por
	 * eso el logo se veía chico). 205px (193 + margen real de
	 * seguridad) sigue evitando el corte del correo, sin dejar aire de
	 * más.
	 */
	.site-footer__grid {
		grid-template-columns: 1fr 1fr 1fr 1fr minmax(205px, max-content);
		gap: var(--space-4);
	}

	.site-footer__brand-image {
		max-width: 130px;
	}
}

/*
 * Rediseño del footer móvil (≤768px) — reemplaza el de 2 columnas
 * anterior. Una sola columna, en este orden (ya es el orden real del
 * HTML): logo centrado → Tienda/Información/Ayuda como ACORDEÓN →
 * Contáctanos → Newsletter compacto → Copyright (bottom bar nativa de
 * Blocksy). El botón/chevron del acordeón y el comportamiento real
 * (uno abierto a la vez, `aria-expanded`, `inert` en el panel cerrado)
 * están en initFooterAccordion() (assets/js/main.js) — acá sólo el
 * aspecto. El escritorio (>768px) no se toca: `.site-footer__heading`/
 * `.site-footer__accordion-trigger` fuera de este media query dejan el
 * botón viéndose IDÉNTICO al <p> que había antes (ver el reset base más
 * abajo, fuera de esta media query) y el panel siempre expandido.
 */
@media (max-width: 768px) {
	.site-footer__grid {
		display: flex;
		flex-direction: column;
		/* La regla base (desktop, fuera de este media query) es
		   `display:grid` con `align-items:start` para alinear columnas de
		   distinta altura por arriba. Ese `align-items:start` NO se anula
		   solo al cambiar a flex — sigue aplicando en el eje transversal
		   (aquí, horizontal, por ser flex-direction:column), así que cada
		   bloque conservaba su ancho de CONTENIDO y quedaba pegado a la
		   izquierda: la "franja estrecha" reportada. `stretch` hace que
		   cada bloque (logo, acordeones, contacto, newsletter) ocupe el
		   100% del ancho disponible, con el mismo margen lateral uniforme
		   que ya aporta `.container`. */
		align-items: stretch;
		gap: 0;
	}

	.site-footer__brand {
		text-align: center;
		margin-bottom: var(--space-4);
	}

	.site-footer__brand-image {
		margin-inline: auto;
	}

	/* ---------- Tienda / Información / Ayuda / Contáctanos / Newsletter: cinco acordeones ---------- */

	/*
	 * `border-top` en los cuatro hace de línea divisoria entre cada par
	 * consecutivo (Tienda|Información, Información|Ayuda, Ayuda|
	 * Contáctanos) automáticamente, sin necesidad de reglas por-par — y
	 * también la línea de arriba, bajo el logo. Sólo falta cerrar con
	 * un borde inferior después del último (Contáctanos, desde que se
	 * retiró la columna Newsletter): `:last-child` resuelve solo porque
	 * Contáctanos es el último hijo real de `.site-footer__grid`.
	 */
	.site-footer__column--accordion {
		border-top: 1px solid rgba(203, 37, 90, 0.14);
	}

	.site-footer__column--accordion:last-child {
		border-bottom: 1px solid rgba(203, 37, 90, 0.14);
	}

	/* Título centrado con el chevron en una posición fija: en vez de
	   `justify-content:space-between` (que corría el título hacia la
	   izquierda para dejarle sitio al chevron a la derecha),
	   `justify-content:center` centra el texto en el ancho total del
	   botón y el chevron sale del flujo (`position:absolute`) para no
	   descuadrar ese centrado. */
	.site-footer__accordion-trigger {
		display: flex;
		align-items: center;
		justify-content: center;
		position: relative;
		width: 100%;
		min-height: 44px;
		padding-block: var(--space-3);
		padding-inline: var(--space-6);
		margin-bottom: 0;
		text-align: center;
	}

	.site-footer__accordion-chevron {
		display: block;
		position: absolute;
		inset-inline-end: var(--space-3);
		top: 50%;
		transform: translateY(-50%);
		color: var(--color-primary);
		transition: transform 200ms ease;
	}

	.site-footer__column--accordion.is-open .site-footer__accordion-chevron {
		transform: translateY(-50%) rotate(180deg);
	}

	/* Altura animable sin display:none (permite "apertura suave"); el
	   panel cerrado queda con inert (ver main.js) — fuera del foco/AT. */
	.site-footer__accordion-panel {
		display: grid;
		grid-template-rows: 0fr;
		transition: grid-template-rows 220ms ease;
	}

	.site-footer__column--accordion.is-open .site-footer__accordion-panel {
		grid-template-rows: 1fr;
	}

	/*
	 * BUG real encontrado con Playwright: `padding-bottom` en
	 * `.site-footer__accordion-panel-inner` (el propio ítem de la fila
	 * `grid-template-rows: 0fr`) impedía que el acordeón colapsara del
	 * todo — `min-height:0` suprime la altura mínima que aporta el
	 * CONTENIDO, pero el padding es parte de la caja del elemento y se
	 * sigue dibujando igual, así que la fila nunca bajaba de ~16px (el
	 * padding) y quedaba una línea del contenido asomando con los cinco
	 * acordeones "cerrados". El relleno inferior va en cambio en el
	 * ÚLTIMO elemento real de cada panel (el `<ul>` de enlaces/contacto,
	 * o el formulario de newsletter) — ahí no afecta el colapso porque
	 * esos elementos desaparecen del recorte (`overflow:hidden`) igual
	 * que el resto del contenido cuando la fila mide 0.
	 */
	.site-footer__accordion-panel-inner {
		overflow: hidden;
		min-height: 0;
	}

	.site-footer__accordion-panel-inner ul {
		justify-items: center;
		text-align: center;
		padding-bottom: var(--space-4);
	}

	.site-footer__accordion-panel-inner ul a {
		display: inline-block;
		padding-block: var(--space-1);
	}

	.site-footer__accordion-panel-inner .newsletter-form {
		margin-bottom: var(--space-4);
	}

	/* ---------- Contáctanos (ahora acordeón): contenido centrado ---------- */

	.site-footer__contact-list {
		justify-items: center;
	}

	/*
	 * Reportado en vivo con captura real: con `align-items:flex-start`
	 * (pensado para si el texto pasara a dos líneas) los íconos
	 * quedaban visiblemente más arriba que el texto de su propia fila
	 * — incluso en un renglón de una sola línea, porque el alto de línea
	 * del texto es mayor que el ícono (14px), y `flex-start` alinea
	 * ambos arriba en vez de centrarlos. La razón original de
	 * `flex-start` ya no aplica: el `<span>` de la ubicación (el único
	 * que no era un `<a>`, y por lo tanto el único sin el
	 * `white-space:nowrap` de la regla de arriba) ahora también lo
	 * tiene — ninguna de las 3 filas puede pasar a dos líneas, así que
	 * `center` es seguro y correcto siempre. `justify-content:center`
	 * centra el conjunto ícono+texto como una sola unidad dentro del
	 * ancho completo.
	 */
	.site-footer__contact-list li {
		align-items: center;
		justify-content: center;
	}

	/* ---------- Newsletter (ahora acordeón): bloque compacto, centrado ---------- */

	.site-footer__accordion-panel-inner .text-muted {
		text-align: center;
	}

	.site-footer__column .newsletter-form {
		max-width: 320px;
		margin-inline: auto;
		flex-wrap: nowrap;
	}

	.site-footer__column .newsletter-form .input,
	.site-footer__column .newsletter-form .input::placeholder {
		font-size: var(--text-sm);
	}

	.site-footer__column .newsletter-form .input {
		height: 44px;
		padding-block: var(--space-3);
		box-sizing: border-box;
	}

	.site-footer__column .newsletter-form .btn-icon {
		width: 44px;
		height: 44px;
		font-size: var(--text-base);
		flex: 0 0 auto;
	}

	/* En 320px el conjunto (campo + botón + gap) ya no entra cómodo en
	   una sola fila con el padding del contenedor — se ensancha el
	   propio input un poco menos para que el conjunto quepa siempre
	   dentro del viewport, nunca desbordado. */
	@media (max-width: 340px) {
		.site-footer__column .newsletter-form {
			max-width: 100%;
		}
	}

	/* ---------- Copyright (bottom bar nativa de Blocksy) ---------- */

	.ct-footer-copyright {
		text-align: center;
		padding-block: var(--space-3);
		line-height: 1.5;
	}
}

@media (prefers-reduced-motion: reduce) {
	.site-footer__accordion-panel,
	.site-footer__accordion-chevron {
		transition: none;
	}
}

.featured-products__header {
	margin-bottom: var(--space-6);
}

.featured-products__all {
	font-size: var(--text-sm);
	font-weight: 600;
	color: var(--color-primary);
}

/*
 * Mismo espaciado que hay entre el hero y "Encuentra el detalle
 * perfecto" (40px) — antes usaba el padding-block:64px genérico de
 * .section por ambos lados, dejaba un salto mucho más grande que el
 * resto de la página.
 */
.featured-products {
	padding-top: 40px;
	padding-bottom: 40px;
}

.why-choose-us {
	padding-top: 0;
	padding-bottom: 40px;
}

/* Carrusel de productos destacados — sólo dentro de esta sección, no toca /shop/ */
.featured-products__carousel .products {
	display: flex;
	flex-wrap: nowrap;
	overflow-x: auto;
	scroll-snap-type: x mandatory;
	scrollbar-width: none;
	gap: var(--space-6);
}

.featured-products__carousel .products::-webkit-scrollbar {
	display: none;
}

.featured-products__carousel .products li.product {
	/* 5 tarjetas completas visibles a la vez (sin la 6ta asomando a medias) — el resto se alcanza deslizando/con los puntos. */
	flex: 0 0 calc((100% - 4 * var(--space-6)) / 5);
	/* item flex que NO debe achicarse por debajo del contenido ni pasarse
	   de su base — sin esto un título/botón largo desbordaba la tarjeta
	   (mismo motivo que el `min-width:0` de la tarjeta-grid en cards.css). */
	min-width: 0;
	scroll-snap-align: start;
	position: relative;
}

@media (max-width: 900px) {
	.featured-products__carousel .products li.product {
		flex: 0 0 calc((100% - 2 * var(--space-6)) / 3);
	}
}

@media (max-width: 600px) {
	.featured-products__carousel .products li.product {
		flex: 0 0 calc((100% - var(--space-6)) / 2);
	}
}

/*
 * Instagram — una sola caja bajita con fondo rosado (mismo patrón que
 * .value-props__box/.why-choose-us__box): texto+botón a la izquierda,
 * las miniaturas en fila a la derecha, no dos bloques apilados.
 * Mismo ritmo de 40px que el resto (testimonios ya carga los 40px en
 * su padding-bottom).
 */
.instagram {
	padding-top: 0;
	padding-bottom: var(--space-4);
}

.instagram__box {
	display: flex;
	align-items: center;
	gap: var(--space-6);
	background: rgba(203, 37, 90, 0.05);
	border-radius: var(--radius-xl);
	padding: var(--space-3) var(--space-8);
}

.instagram__info {
	flex: 0 0 auto;
}

.instagram__label {
	font-family: var(--font-body);
	font-size: var(--text-xs);
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.04em;
	color: var(--color-text);
	margin: 0;
	white-space: nowrap;
}

.instagram__handle {
	font-family: var(--font-display);
	font-style: italic;
	font-size: var(--text-lg);
	font-weight: 600;
	color: var(--color-primary);
	margin: 0 0 var(--space-2);
	white-space: nowrap;
}

.instagram__cta {
	display: inline-flex;
	align-items: center;
	gap: var(--space-2);
	white-space: nowrap;
}

/* .btn (buttons.css) importa después de layout.css y empataría en
   especificidad con una sola clase — selector compuesto para ganar. */
.btn.instagram__cta {
	padding-block: var(--space-1);
	padding-inline: var(--space-4);
	font-size: var(--text-sm);
}

.instagram__grid {
	display: flex;
	gap: var(--space-3);
	flex: 1;
	min-width: 0;
}

.instagram__tile {
	display: block;
	flex: 1 1 0;
	min-width: 0;
	aspect-ratio: 4 / 3;
	border-radius: var(--radius-md);
	overflow: hidden;
}

.instagram__tile img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

.instagram__tile:focus-visible {
	outline: 2px solid var(--color-primary);
	outline-offset: 2px;
}

@media (max-width: 900px) {
	.instagram__box {
		flex-wrap: wrap;
		justify-content: center;
		text-align: center;
	}

	.instagram__grid {
		flex: 0 0 100%;
		flex-wrap: wrap;
		justify-content: center;
	}

	.instagram__tile {
		flex: 0 0 calc((100% - 2 * var(--space-3)) / 3);
	}
}