/*
 * LOVELY GOLDEN — dirección «Palm Springs» (referencia 2026-08-17 053749).
 * Header limpio con nav centrada, hero a dos columnas con blob de papel
 * rasgado, insignia NEW, pegatina PALM VIBES, hoja de palma y franja de
 * beneficios. Claro/oscuro vía tokens.
 */

.lg-ico { inline-size: 1.05em; block-size: 1.05em; flex: none; }

/* ══ Header: logo icono+caligrafía · nav centrada · bolsa ════════════════ */
.site-header {
	background: color-mix(in srgb, var(--lg-ivory) 50%, transparent);
	border-block-end: 0;
}
.site-header .container.site-header__inner {
	display: grid;
	grid-template-columns: auto 1fr auto;
	align-items: center;
	gap: 1rem;
}
.site-header .nav-primary { justify-self: center; }

.lg-logo {
	text-decoration: none;
	display: inline-flex;
	align-items: center;
	gap: 0.7rem;
	color: var(--lg-ink);
}
.lg-logo__icon { inline-size: 3.1rem; block-size: 3.1rem; color: var(--lg-orange); }
.lg-logo__word {
	font-family: var(--lg-font-script);
	font-size: 1.7rem;
	line-height: 1;
	color: var(--lg-ink);
	padding-block-end: 0.35rem;   /* Pacifico cuelga; compensa la caja */
}
.lg-logo:hover .lg-logo__word { color: var(--lg-orange-deep); }

.nav-primary a {
	font-family: var(--font-text);
	font-weight: 500;
	font-size: 0.98rem;
	color: var(--lg-ink-soft);
	white-space: nowrap;      /* «Guía de tallas» no se parte en tres líneas */
}
.nav-primary a:hover { color: var(--lg-orange-deep); }
.nav-primary .current-menu-item > a,
.nav-primary .current_page_item > a { color: var(--lg-ink); font-weight: 600; }
/* la referencia no lleva marcador bajo el item activo (el padre pinta un
   punto con ::before en nav.css) */
.nav-primary .current-menu-item > a::before,
.nav-primary .current_page_item > a::before,
.nav-primary .current-menu-item > a::after,
.nav-primary .current_page_item > a::after { display: none; }

/* «Packs» destaca en el menú, pero con sutileza (Oscar, 2026-08-20: la
   pastilla naranja rellena era demasiado llamativa). Tinte suave del naranja
   de marca y el texto en naranja oscuro: se distingue sin gritar. La clase la
   lleva el elemento del menú de WordPress (campo classes). */
.nav-primary .lg-nav-packs > a {
	/* el padding vertical es EL DEL PADRE (nav.css): tocarlo desalinea el
	   texto con el resto del menú — pasó y Oscar lo vio a la primera. */
	padding-block: var(--space-2);
	padding-inline: 0.75rem;
	border-radius: 999px;
	background: color-mix(in srgb, var(--lg-orange) 14%, transparent);
	color: var(--lg-orange-deep);
	font-weight: 600;
}
.nav-primary .lg-nav-packs > a:hover {
	background: color-mix(in srgb, var(--lg-orange) 24%, transparent);
	color: var(--lg-orange-deep);
}
.nav-primary .lg-nav-packs.current-menu-item > a { color: var(--lg-orange-deep); }
[data-theme='dark'] .nav-primary .lg-nav-packs > a {
	background: color-mix(in srgb, var(--lg-orange) 22%, transparent);
	color: var(--lg-orange);
}

.site-header__tools { display: flex; align-items: center; gap: 0.4rem; }
.lg-shop-tools { display: flex; align-items: center; gap: 0.15rem; }
.lg-shop-tools__btn {
	position: relative;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	inline-size: 44px;
	block-size: 44px;
	border-radius: 50%;
	color: var(--lg-ink);
	transition: color 180ms ease-out, background 180ms ease-out;
}
.lg-shop-tools__btn:hover { color: var(--lg-orange-deep); background: var(--lg-ivory-deep); }
.lg-shop-tools__btn .lg-ico { inline-size: 21px; block-size: 21px; }
/* Los cinco iconos —contacto, buscar, cuenta, bolsa y tema— compiten por el
   ancho con el logo y la navegación. A 44 px la fila se salía de la pantalla
   en tres tramos distintos (1024, 390 y 360), y aparecía barra horizontal en
   todas las páginas. Se estrechan por tramos; el icono de dentro no cambia,
   así que se siguen viendo igual de bien.

   El tamaño mínimo es 34 px: por debajo el dedo ya no acierta. */
@media (max-width: 1100px) {
	.site-header__tools { gap: 0.3rem; }
	.lg-shop-tools { gap: 0.1rem; }
	.lg-shop-tools__btn,
	.site-header__tools .theme-toggle { inline-size: 38px; block-size: 38px; }
}
@media (max-width: 400px) {
	.site-header__tools { gap: 0.15rem; }
	.lg-shop-tools { gap: 0; }
	.lg-shop-tools__btn,
	.site-header__tools .theme-toggle { inline-size: 34px; block-size: 34px; }
	.lg-shop-tools__btn .lg-ico { inline-size: 19px; block-size: 19px; }
	/* El logo también cede algo: es lo que deja sitio a la fila. */
	.lg-logo__word { font-size: 1.15rem; }
	.lg-logo__icon { inline-size: 30px; block-size: 30px; }
}

/* Pantallas muy estrechas (320 px, iPhone SE viejo). Ahí el nombre del logo se
   partía en dos líneas y aun así no cabía la fila, así que se queda solo el
   símbolo de la palmera —el nombre sigue en el enlace para quien no ve— y los
   iconos bajan a 32 px. Es lo justo para que entre sin barra horizontal. */
@media (max-width: 340px) {
	.site-header__inner { padding-inline: 0.6rem; }
	.lg-logo__word {
		position: absolute;
		inline-size: 1px;
		block-size: 1px;
		overflow: hidden;
		clip-path: inset(50%);
		white-space: nowrap;
	}
	.lg-shop-tools__btn,
	.site-header__tools .theme-toggle { inline-size: 32px; block-size: 32px; }
	.lg-shop-tools__btn .lg-ico { inline-size: 18px; block-size: 18px; }
}

.lg-shop-tools__badge {
	position: absolute;
	inset-block-end: 5px;
	inset-inline-end: 3px;
	min-inline-size: 16px;
	block-size: 16px;
	display: grid;
	place-items: center;
	border-radius: 999px;
	background: var(--lg-ink);
	color: var(--lg-ivory);
	font-size: 0.62rem;
	font-weight: 600;
	line-height: 1;
}

:root {
	--lg-header-h: 92px;
	/* Ritmo vertical ÚNICO entre secciones (orden de Oscar 2026-08-17):
	   todas respiran lo mismo, y menos que antes. */
	--lg-sec-pad: clamp(1.6rem, 2.6vw, 2.6rem);
	/* Movimiento: UNA curva y tres tiempos para toda la web */
	--lg-ease: cubic-bezier(0.22, 0.61, 0.36, 1);
	--lg-t-fast: 160ms;
	--lg-t-med: 260ms;
	--lg-t-slow: 480ms;
}
@media (max-width: 1023px) { :root { --lg-header-h: 76px; } }

.lg-btn {
	text-decoration: none;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-block-size: 50px;
	padding: 0.8rem 1.9rem;
	border-radius: 12px;
	font-family: var(--font-text);
	font-weight: 600;
	font-size: 0.98rem;
	transition: transform 180ms ease-out, background 180ms ease-out, color 180ms ease-out, border-color 180ms ease-out;
	cursor: pointer;
}
.lg-btn:hover { transform: translateY(-1px); }
.lg-btn:active { transform: scale(0.98); }
.lg-btn--primary { background: var(--lg-ink); color: var(--lg-ivory); }
.lg-btn--primary:hover { background: var(--lg-orange-deep); color: #FFF; }
.lg-btn--ghost {
	background: transparent;
	color: var(--lg-ink);
	border: 1.5px solid var(--lg-ink-soft);
}
.lg-btn--ghost:hover { border-color: var(--lg-orange-deep); color: var(--lg-orange-deep); }
[data-theme='dark'] .lg-btn--primary { background: var(--lg-paper); color: #232120; }
[data-theme='dark'] .lg-btn--primary:hover { background: var(--lg-orange); }


/* ════════════════════════════════════════════════════════════════════════
   HERO — CARTEL EDITORIAL
   Ficha «Bold Typography (Poster)» de ui-ux-pro-max, al pie de su checklist:
     ☐ H1 4–5× el cuerpo        ☐ contenedores radio 0
     ☐ CTA subrayado            ☐ huecos verticales grandes
     ☐ sin sombras ni esquinas blandas en la UI
     ☐ acento SOLO en interacción
     ☐ el texto sangra por el borde
     ☐ tiempos de 200ms         ☐ cuerpo nunca por debajo de 16px
   Nada de paneles ni cajas: manda la tipografía, la imagen es un bloque
   recortado y el producto rompe la línea entre ambos.
   ════════════════════════════════════════════════════════════════════════ */
:root {
	--lgh-t: 200ms;                       /* la ficha fija 200ms */
	--lgh-ease: cubic-bezier(0.25, 0, 0, 1);
	--lgh-gap: clamp(2.5rem, 7vh, 5rem);  /* «large vertical gaps» */
}

.lgh {
	position: relative;
	min-block-size: calc(100dvh - var(--lg-header-h));
	background: var(--lg-ivory);
	display: grid;
	grid-template-columns: 1fr;
	grid-template-rows: 1fr auto;
	align-content: start;
	overflow: hidden;
	isolation: isolate;
	padding-block: var(--lgh-gap) 0;
}

/* ── Bloque de imagen: sangra arriba y a la derecha. Radio 0. ── */
.lgh__plate {
	position: absolute;
	inset: 0;                       /* a sangre: todo el ancho y todo el alto */
	z-index: 0;
	overflow: hidden;
	will-change: transform;
}
.lgh__plate img { inline-size: 100%; block-size: 100%; object-fit: cover; object-position: 64% 42%; display: block; }
/* Velo en cuña: denso donde vive la tipografía, limpio sobre la escena */
.lgh__plate::after {
	content: '';
	position: absolute;
	inset: 0;
	background:
		/* mitad de intensidad que antes (Oscar, 2026-08-18) */
		linear-gradient(96deg, rgb(253 248 237 / 0.45) 0%, rgb(253 248 237 / 0.36) 30%, rgb(253 248 237 / 0.12) 52%, transparent 72%),
		linear-gradient(180deg, rgb(253 248 237 / 0.21) 0%, transparent 26%);
}
[data-theme='dark'] .lgh__plate::after {
	background:
		linear-gradient(96deg, rgb(24 9 13 / 0.47) 0%, rgb(24 9 13 / 0.42) 34%, rgb(24 9 13 / 0.25) 58%, rgb(24 9 13 / 0.14) 78%),
		linear-gradient(180deg, rgb(24 9 13 / 0.3) 0%, transparent 22%);
}
[data-theme='dark'] .lgh__plate img { filter: brightness(0.82); }

/* Área principal: encierra tipografía y producto. El producto se ancla AQUÍ,
   no al hero entero — así no puede invadir nunca el pie del cartel. */
.lgh__main {
	position: relative;
	z-index: 2;
	block-size: 100%;
	min-block-size: 0;
	/* el bloque de texto va centrado en la altura de la escena */
	display: flex;
	align-items: center;
}

/* ── Tipografía a sangre ── */
.lgh__type {
	position: relative;
	z-index: 2;
	inline-size: 100%;
	padding-inline: clamp(1.25rem, 5vw, 6rem);
	padding-block-start: 0;
	pointer-events: none;
	/* con el display grande, titular y producto se separan en VERTICAL */
	max-inline-size: min(74%, 82rem);
}
.lgh__kicker {
	display: flex;
	align-items: center;
	gap: 0.7rem;
	margin: 0 0 clamp(1rem, 3vh, 2rem);
	font-family: var(--font-text);
	font-weight: 600;
	font-size: 0.82rem;              /* etiqueta, no cuerpo */
	letter-spacing: 0.3em;
	text-transform: uppercase;
	/* va sobre la foto: el gris suave no llega a 4.5:1 en ningún tema */
	color: var(--lg-ink);
}
[data-theme='dark'] .lgh__kicker { color: #FFF; }
.lgh__display {
	margin: 0;
	font-family: var(--font-display);
	font-weight: 800;
	/* 4–5× el cuerpo: cuerpo 1.05rem → display hasta 11vw */
	font-size: clamp(3.4rem, 12.5vw, 12rem);
	line-height: 0.92;
	padding-block-end: 0.18em;      /* sitio para las descendentes */
	letter-spacing: -0.055em;
	color: var(--lg-ink);
	text-transform: none;
}
.lgh__line { display: block; }
/* la segunda línea se sale por la izquierda: «text bleeds over the edge» */
.lgh__line--2 {
	margin-inline-start: -0.045em;
	font-family: var(--lg-font-script);
	font-weight: 400;
	font-size: 0.92em;
	line-height: 1.06;              /* la script cuelga: necesita más caja */
	letter-spacing: -0.01em;
	color: var(--lg-ink);
	padding-block-start: 0.06em;
}

/* ── Producto: rompe la línea entre la tipografía y el bloque de imagen ── */



/* ── Pie: dato mínimo + CTA subrayado ── */
.lgh__foot {
	position: relative;
	z-index: 4;
	margin-block-start: var(--lgh-gap);
	inline-size: 100%;
	padding-inline: clamp(1.25rem, 5vw, 6rem);
	display: flex;
	align-items: baseline;
	gap: clamp(1rem, 3vw, 2.5rem);
	flex-wrap: wrap;
	border-block-start: 1px solid color-mix(in srgb, var(--lg-line) 70%, transparent);
	/* mismo color que el menú, al 50%: se ve la escena por detrás */
	background: color-mix(in srgb, var(--lg-ivory) 50%, transparent);
	-webkit-backdrop-filter: blur(10px) saturate(1.1);
	backdrop-filter: blur(10px) saturate(1.1);
	padding-block: clamp(0.9rem, 2.2vh, 1.4rem);
	align-items: center;
}
[data-theme='dark'] .lgh__foot { background: color-mix(in srgb, #2B1118 50%, transparent); }
.lgh__meta {
	margin: 0;
	font-family: var(--font-text);
	font-size: 1rem;                    /* nunca por debajo de 16px */
	letter-spacing: 0.02em;
	/* con el pie al 50% el gris no llega a 4.5:1 sobre la foto */
	color: var(--lg-ink);
}
.lgh__meta--price { color: var(--lg-ink); font-weight: 600; font-variant-numeric: tabular-nums; }
.lgh__meta--price .woocommerce-Price-amount { font-weight: 700; }

/* CTA: botón con cuerpo (Oscar lo quiere como botón, no como subrayado) */
.lgh__cta {
	margin-inline-start: auto;
	display: inline-flex;
	align-items: center;
	gap: 0.6rem;
	min-block-size: 50px;
	padding: 0.75rem 1.6rem;
	border-radius: 999px;
	background: var(--lg-ink);
	color: var(--lg-ivory);
	font-family: var(--font-text);
	font-weight: 700;
	font-size: 1rem;
	text-decoration: none;
	box-shadow: 0 8px 22px rgb(35 33 32 / 0.28);
	transition: background var(--lgh-t) var(--lgh-ease),
	            transform var(--lgh-t) var(--lgh-ease),
	            box-shadow var(--lgh-t) var(--lgh-ease);
}
.lgh__cta svg { inline-size: 1.05rem; block-size: 1.05rem; transition: transform var(--lgh-t) var(--lgh-ease); }
.lgh__cta:hover { background: var(--lgh-accent, #A75B1B); transform: translateY(-2px); box-shadow: 0 12px 28px rgb(167 91 27 / 0.36); }
.lgh__cta:hover svg { transform: translateX(3px); }
.lgh__cta:active { transform: translateY(0) scale(0.98); }
[data-theme='dark'] .lgh__cta { background: var(--lg-paper); color: #232120; }
[data-theme='dark'] .lgh__cta:hover { background: var(--lg-orange); }

/* ── Entrada: cortina sobre la tipografía, sin rebotes ── */
@media (prefers-reduced-motion: no-preference) {
	.lgh__line { animation: lgh-wipe 720ms var(--lgh-ease) both; }
	.lgh__line--1 { animation-delay: 100ms; }
	.lgh__line--2 { animation-delay: 220ms; }
	.lgh__kicker { animation: lgh-fade 400ms var(--lgh-ease) 60ms both; }
	.lgh__plate  { animation: lgh-plate 900ms var(--lgh-ease) both; }
	
	.lgh__foot   { animation: lgh-fade 500ms var(--lgh-ease) 520ms both; }
}
/* La cortina acaba SIN recortar: los descendentes de «Springs» sobresalen de
   su caja (line-height apretado) y cualquier inset por debajo del 0 los corta. */
@keyframes lgh-wipe  { from { clip-path: inset(0 0 100% 0); transform: translateY(0.12em); } to { clip-path: inset(-40% -10% -60% -10%); transform: none; } }
@keyframes lgh-fade  { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
@keyframes lgh-plate { from { clip-path: inset(0 0 0 100%); } to { clip-path: inset(0 0 0 0); } }

@media (max-width: 1023px) {
	.lgh { min-block-size: min(92dvh, 46rem); grid-template-rows: 1fr auto; padding-block: clamp(1.5rem, 5vh, 3rem) 0; }
	/* la imagen no llega al pie: se corta justo donde empieza */
	.lgh__plate { inset-block-end: auto; block-size: auto; }
	.lgh__plate {
		position: absolute;
		inset: 0;                       /* también a sangre en móvil */
		block-size: 100%;
		margin: 0;
	}
	.lgh__type { max-inline-size: 100%; margin-block-end: 0; }
	.lgh__display { font-size: clamp(3rem, 15vw, 5.4rem); }
	/* El titular baja al tercio inferior: cae sobre el pecho del golden,
	   no sobre su cara, y deja la escena respirar arriba. */
	.lgh__main { block-size: 100%; display: flex; align-items: flex-end; }
	.lgh__type { inline-size: 100%; padding-block-start: 0; padding-block-end: clamp(0.8rem, 2.5vh, 1.6rem); }
		.lgh__plate::after {
		background:
			linear-gradient(180deg, rgb(253 248 237 / 0.26) 0%, transparent 26%, rgb(253 248 237 / 0.3) 44%, rgb(253 248 237 / 0.55) 53%, rgb(253 248 237 / 0.62) 78%);
	}
	[data-theme='dark'] .lgh__plate::after {
		background: linear-gradient(180deg, rgb(24 9 13 / 0.3) 0%, transparent 26%, rgb(24 9 13 / 0.28) 44%, rgb(24 9 13 / 0.5) 53%, rgb(24 9 13 / 0.58) 78%);
	}
	/* En móvil el golden llena el encuadre: el producto se queda en tamaño
	   de firma abajo a la derecha, sin taparle la cara. */
	
	/* El pie sale de la foto: fondo sólido para que se lea siempre */
	.lgh__foot {
		position: relative;
		z-index: 5;
		background: var(--lg-ivory);
		margin-block-start: 0;
		padding-block: 1rem;
	}
	.lgh__foot { order: 3; }
	.lgh__cta { margin-inline-start: 0; }
}

/* ══ Franja de garantías + banner de envío gratis ════════════════════════
   Integrada en la propia franja: ni tarjetas ni sombras flotando encima.
   Los cuatro puntos se separan con la misma línea fina del resto de la
   web y el hover tiñe la celda. Al no inventar superficies, los tokens
   se invierten solos en el tema oscuro. */
.lg-benefits {
	background: var(--lg-ivory);
	border-block: 2px solid color-mix(in srgb, var(--lg-ink) 30%, var(--lg-line));
	padding-block: 0;
	overflow: hidden;
}
.lg-benefits__grid {
	max-inline-size: 105rem;
	margin: 0 auto;
	padding-inline: clamp(0.6rem, 2.5vw, 2.5rem);
	padding-block: clamp(0.6rem, 1.6vw, 1rem);
	list-style: none;
	display: grid;
	grid-template-columns: repeat(4, 1fr);
}
.lg-benefits__grid > li { display: flex; }
.lg-benefits__grid > li + li {
	border-inline-start: 1px solid var(--lg-line);
}

.lg-benefit {
	position: relative;
	inline-size: 100%;
	display: flex;
	align-items: center;
	gap: 0.9rem;
	padding: clamp(0.9rem, 1.7vw, 1.25rem) clamp(1rem, 2vw, 1.9rem);
	text-align: start;
	font: inherit;
	cursor: pointer;
	background: transparent;
	border: 0;
	color: inherit;
	transition: background-color 240ms var(--lg-ease);
}
.lg-benefit:hover { background: color-mix(in srgb, var(--lg-orange) 10%, transparent); }
.lg-benefit:focus-visible { outline: 3px solid var(--lg-orange-deep); outline-offset: -3px; }

/* Filete que crece desde la izquierda: la única «profundidad» que se
   permite aquí, en lugar de elevar una tarjeta. */
.lg-benefit::after {
	content: '';
	position: absolute;
	inset-inline: 0;
	inset-block-end: 0;
	block-size: 2px;
	background: var(--lg-orange-deep);
	transform: scaleX(0);
	transform-origin: inline-start;
	transition: transform 260ms var(--lg-ease);
}
.lg-benefit:hover::after,
.lg-benefit:focus-visible::after { transform: scaleX(1); }

.lg-benefit__ico-caja {
	flex: none;
	display: grid;
	place-items: center;
	color: var(--lg-ink);
	transition: color 240ms var(--lg-ease), transform 240ms var(--lg-ease);
}
.lg-benefit:hover .lg-benefit__ico-caja {
	color: var(--lg-orange-deep);
	transform: translateY(-2px);
}
.lg-benefit__icon { inline-size: 1.85rem; block-size: 1.85rem; }

.lg-benefit__txt { display: flex; flex-direction: column; gap: 0.12rem; min-inline-size: 0; }
.lg-benefit__titulo {
	font-family: var(--font-text);
	font-weight: 600;
	font-size: 0.98rem;
	line-height: 1.3;
	color: var(--lg-ink);
	text-wrap: balance;
}
.lg-benefit__pie {
	font-family: var(--font-text);
	font-size: 0.82rem;
	line-height: 1.35;
	color: var(--lg-gray);
}
/* Señal de «hay más» discreta: nada de un botón dentro de otro botón. */
.lg-benefit__mas {
	flex: none;
	margin-inline-start: auto;
	inline-size: 0.95rem;
	block-size: 0.95rem;
	color: var(--lg-gray);
	opacity: 0.55;
	transition: transform 260ms var(--lg-ease), color 240ms var(--lg-ease), opacity 240ms var(--lg-ease);
}
.lg-benefit:hover .lg-benefit__mas {
	color: var(--lg-orange-deep);
	opacity: 1;
	transform: scale(1.2);
}

/* Banner a ancho completo, dentro de la misma franja.
   Tinta fija (no el token): el fondo es naranja en los dos temas. */
/* Franja de envío gratis. El naranja es el mismo, pero deja de ser un plano
   liso: lleva un degradado suave en diagonal, franjas de toldo casi
   imperceptibles y un filo de luz arriba con su sombra abajo, para que se lea
   como una cinta impresa y no como un rectángulo de color. */
.lg-benefits__banner {
	position: relative;
	isolation: isolate;
	overflow: hidden;
	margin: 0;
	padding-block: clamp(0.95rem, 2vw, 1.35rem);
	padding-inline: clamp(1.25rem, 4vw, 4rem);
	background:
		linear-gradient(101deg,
			color-mix(in srgb, var(--lg-orange) 86%, #FFFFFF) 0%,
			var(--lg-orange) 32%,
			var(--lg-orange-deep) 70%,
			var(--lg-orange) 100%);
	color: #2A1808;
	box-shadow:
		inset 0 1px 0 rgb(255 255 255 / 0.45),
		inset 0 -1px 0 rgb(112 60 10 / 0.3);
	display: flex;
	align-items: center;
	justify-content: center;
	gap: clamp(0.6rem, 1.4vw, 1rem);
	font-family: var(--font-text);
	font-weight: 600;
	font-size: clamp(1rem, 1.6vw, 1.2rem);
	letter-spacing: 0.015em;
	text-align: center;
	text-wrap: balance;
}
.lg-benefits__banner::before {
	content: '';
	position: absolute;
	inset: 0;
	z-index: -1;
	/* Un brillo suave detrás del texto, no franjas: a la vista las rayas
	   cantaban y cambiaban el naranja, que es lo que gusta de la cinta. */
	background:
		radial-gradient(62% 180% at 50% 50%, rgb(255 255 255 / 0.2) 0%, rgb(255 255 255 / 0.05) 45%, transparent 78%),
		repeating-linear-gradient(-52deg, rgb(255 255 255 / 0.035) 0 20px, transparent 20px 58px);
}
/* El icono, en su chapa translúcida: lo separa del texto sin meter una línea. */
.lg-benefits__ficha {
	flex: none;
	display: grid;
	place-items: center;
	inline-size: 2.35em;
	block-size: 2.35em;
	border-radius: 50%;
	background: rgb(255 255 255 / 0.26);
	box-shadow:
		inset 0 0 0 1px rgb(255 255 255 / 0.42),
		0 2px 6px rgb(112 60 10 / 0.16);
}
.lg-benefits__banner-ico { inline-size: 1.25em; block-size: 1.25em; display: block; }
.lg-benefits__frase { display: inline-block; }
/* El importe manda: es el dato por el que se lee la cinta. */
.lg-benefits__monto {
	font-weight: 800;
	font-size: 1.08em;
	letter-spacing: -0.01em;
	white-space: nowrap;
	padding-inline: 0.08em;
}
@media (max-width: 560px) {
	.lg-benefits__ficha { inline-size: 2em; block-size: 2em; }
	.lg-benefits__banner { font-size: 0.95rem; }
}

/* ── Diálogo de cada garantía ──
   <dialog> nativo: foco atrapado, Esc y ::backdrop los pone el navegador.
   Superficie marfil de la casa, no un panel blanco genérico. */
.lg-dlg {
	max-inline-size: min(34rem, calc(100vw - 2rem));
	inline-size: 100%;
	padding: 0;
	border: 0;
	background: transparent;
	color: var(--lg-ink);
	overflow: visible;
}
.lg-dlg::backdrop {
	background: rgb(35 33 32 / 0.42);
	-webkit-backdrop-filter: blur(6px);
	backdrop-filter: blur(6px);
}
.lg-dlg__panel {
	background: var(--lg-ivory);
	border: 1px solid var(--lg-line);
	border-radius: 14px;
	box-shadow: 0 24px 60px rgb(35 33 32 / 0.28);
	padding: clamp(1.4rem, 3vw, 2rem);
}
.lg-dlg__cab {
	display: flex;
	align-items: center;
	gap: 0.9rem;
	padding-block-end: 1rem;
	margin-block-end: 1.1rem;
	border-block-end: 1px solid var(--lg-line);
}
.lg-dlg__ico-caja { flex: none; display: grid; place-items: center; color: var(--lg-orange-deep); }
.lg-dlg__icon { inline-size: 1.9rem; block-size: 1.9rem; }
.lg-dlg__titulo {
	margin: 0;
	font-family: var(--font-text);
	font-weight: 700;
	font-size: clamp(1.1rem, 2.2vw, 1.3rem);
	line-height: 1.25;
	color: var(--lg-ink);
	text-wrap: balance;
}
.lg-dlg__x {
	flex: none;
	margin-inline-start: auto;
	inline-size: 2.4rem;
	block-size: 2.4rem;
	display: grid;
	place-items: center;
	border: 1px solid var(--lg-line);
	border-radius: 999px;
	background: transparent;
	color: var(--lg-ink);
	cursor: pointer;
	transition: background-color 200ms var(--lg-ease), border-color 200ms var(--lg-ease);
}
.lg-dlg__x svg { inline-size: 1.05rem; block-size: 1.05rem; }
.lg-dlg__x:hover {
	background: color-mix(in srgb, var(--lg-orange) 22%, transparent);
	border-color: color-mix(in srgb, var(--lg-orange) 55%, var(--lg-line));
}
.lg-dlg__x:focus-visible { outline: 3px solid var(--lg-orange-deep); outline-offset: 2px; }

.lg-dlg__lista { margin: 0; padding: 0; list-style: none; display: grid; gap: 0.8rem; }
.lg-dlg__lista li {
	position: relative;
	padding-inline-start: 1.5rem;
	font-family: var(--font-text);
	font-size: 0.98rem;
	line-height: 1.55;
	color: var(--lg-ink-soft);
}
.lg-dlg__lista li::before {
	content: '';
	position: absolute;
	inset-inline-start: 0.3rem;
	inset-block-start: 0.62em;
	inline-size: 0.4rem;
	block-size: 0.4rem;
	border-radius: 999px;
	background: var(--lg-orange-deep);
}

/* Entrada: 300ms, dentro de la horquilla 200-300ms de la ficha */
.lg-dlg[open] { animation: lg-dlg-in 300ms var(--lg-ease) both; }
.lg-dlg[open]::backdrop { animation: lg-dlg-fondo 300ms var(--lg-ease) both; }
@keyframes lg-dlg-in   { from { opacity: 0; transform: translateY(12px) scale(0.98); } to { opacity: 1; transform: none; } }
@keyframes lg-dlg-fondo{ from { opacity: 0; } to { opacity: 1; } }
@media (prefers-reduced-motion: reduce) {
	.lg-dlg[open], .lg-dlg[open]::backdrop { animation: none; }
	.lg-benefit, .lg-benefit::after, .lg-benefit__ico-caja, .lg-benefit__mas { transition: none; }
	.lg-benefit:hover .lg-benefit__ico-caja,
	.lg-benefit:hover .lg-benefit__mas { transform: none; }
}

/* ══ Apilado en pantallas estrechas ══════════════════════════════════════ */
@media (max-width: 1023px) {
	.lg-hero {
		min-block-size: 0;
		background:
			linear-gradient(180deg,
				color-mix(in srgb, var(--lg-ivory) 78%, transparent) 0%,
				color-mix(in srgb, var(--lg-ivory) 55%, transparent) 45%,
				color-mix(in srgb, var(--lg-ivory) 18%, transparent) 100%),
			var(--lg-ivory) url('../img/hero-photo.jpg') center 30% / cover no-repeat;
	}
	[data-theme='dark'] .lg-hero {
		background:
			linear-gradient(180deg, rgb(43 17 24 / 0.82) 0%, rgb(43 17 24 / 0.6) 45%, rgb(43 17 24 / 0.25) 100%),
			#2B1118 url('../img/hero-photo.jpg') center 30% / cover no-repeat;
	}
	.lg-frond { inset-inline-end: -3rem; opacity: 0.55; }
	.lg-benefits__grid { grid-template-columns: 1fr 1fr; }
	.lg-benefits__grid > li:nth-child(3) { border-inline-start: 0; }
	.lg-benefits__grid > li:nth-child(n+3) { border-block-start: 1px solid var(--lg-line); }
}
@media (max-width: 560px) {
	.lg-benefits__grid { grid-template-columns: 1fr; }
	.lg-benefits__grid > li + li { border-inline-start: 0; border-block-start: 1px solid var(--lg-line); }
}


/* ══ Títulos de sección ══════════════════════════════════════════════════ */
.lg-h2 {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 0.55rem;
	font-family: var(--font-display);
	font-weight: 700;
	font-size: clamp(1.5rem, 2.4vw, 2.1rem);
	letter-spacing: -0.01em;
	color: var(--lg-ink);
	margin: 0 0 clamp(1.2rem, 2vw, 1.8rem);
	text-align: center;
}
.lg-h2__ico { inline-size: 1.05em; block-size: 1.05em; color: var(--lg-orange); flex: none; }

/* ══ Explora nuestras categorías ═════════════════════════════════════════ */
.lg-cats {
	background: var(--lg-ivory);
	padding-block: var(--lg-sec-pad);
	padding-inline: clamp(1.25rem, 4vw, 4rem);
}
.lg-cats__grid {
	max-inline-size: 72rem;
	margin-inline: auto;
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: clamp(1rem, 3vw, 2.5rem);
	justify-items: center;
}
.lg-cat {
	display: grid;
	justify-items: center;
	gap: 0.3rem;
	text-decoration: none;
	text-align: center;
}
.lg-cat__ring {
	display: block;
	inline-size: clamp(8.5rem, 13vw, 12rem);
	aspect-ratio: 1;
	border-radius: 50%;
	overflow: hidden;
	background: var(--lg-ivory-deep);
	box-shadow: inset 0 0 0 1px var(--lg-line), 0 8px 20px rgb(0 0 0 / 0.07);
	transition: transform 200ms ease-out, box-shadow 200ms ease-out;
}
.lg-cat:hover .lg-cat__ring { transform: translateY(-3px) scale(1.02); box-shadow: inset 0 0 0 1px var(--lg-line), 0 12px 26px rgb(0 0 0 / 0.12); }
.lg-cat__ring img { inline-size: 100%; block-size: 100%; object-fit: cover; }
[data-theme='dark'] .lg-cat__ring img { filter: brightness(0.92); }
.lg-cat b {
	margin-block-start: 0.55rem;
	font-family: var(--font-text);
	font-weight: 600;
	font-size: 0.95rem;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--lg-ink);
}
.lg-cat small {
	font-family: var(--font-text);
	font-size: 0.85rem;
	color: var(--lg-gray);
	transition: color 160ms ease-out;
}
.lg-cat:hover small { color: var(--lg-orange-deep); }

/* ══ Más vendidos ════════════════════════════════════════════════════════ */
.lg-best {
	background: var(--lg-ivory);
	padding-block: var(--lg-sec-pad);
	padding-inline: clamp(1.25rem, 4vw, 4rem);
}
.lg-best__grid {
	max-inline-size: 82rem;
	margin-inline: auto;
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: clamp(1rem, 2vw, 1.8rem);
}
.lg-card {
	position: relative;
	background: var(--lg-paper);
	border-radius: 16px;
	padding: 0.8rem 0.8rem 1rem;
	box-shadow: 0 8px 22px rgb(0 0 0 / 0.07);
	display: flex;
	flex-direction: column;
	gap: 0.4rem;
	transition: transform 200ms ease-out, box-shadow 200ms ease-out;
}
.lg-card:hover { transform: translateY(-3px); box-shadow: 0 14px 30px rgb(0 0 0 / 0.11); }
[data-theme='dark'] .lg-card { background: var(--lg-ivory-deep); }
.lg-card__badge {
	position: absolute;
	inset-block-start: 1.15rem;
	inset-inline-start: 1.15rem;
	z-index: 1;
	background: var(--lg-orange-deep);
	color: #FFFDF6;
	font-family: var(--font-text);
	font-weight: 600;
	font-size: 0.72rem;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	padding: 0.3rem 0.65rem;
	border-radius: 7px;
}
.lg-card__img {
	inline-size: 100%;
	block-size: auto;
	aspect-ratio: 1;
	object-fit: cover;
	border-radius: 11px;
	display: block;
}
[data-theme='dark'] .lg-card__img { filter: brightness(0.92); }
.lg-card h3 {
	font-family: var(--font-text);
	font-weight: 600;
	font-size: 0.9rem;
	line-height: 1.35;
	letter-spacing: 0.04em;
	color: var(--lg-ink);
	margin: 0.4rem 0 0;
	padding-inline: 0.25rem;
	/* Dos líneas como mucho. No hace falta reservarles el hueco: la rejilla ya
	   estira las tarjetas de una fila a la misma altura y el pie va anclado
	   abajo, así que los precios se alinean solos. */
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
}
.lg-rate {
	display: flex;
	align-items: center;
	gap: 0.12rem;
	margin: 0;
	padding-inline: 0.25rem;
	color: var(--lg-orange);
}
.lg-rate__s { inline-size: 0.88rem; block-size: 0.88rem; }
.lg-rate span {
	margin-inline-start: 0.3rem;
	font-family: var(--font-text);
	font-size: 0.78rem;
	color: var(--lg-gray);
}
.lg-card__foot {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 0.6rem;
	padding-inline: 0.25rem;
	/* Empuja el pie al fondo de la tarjeta. Es lo que alinea precios y botones
	   de toda la fila. */
	margin-block-start: auto;
	padding-block-start: 0.55rem;
}
.lg-card__price {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 0.05rem;
	min-inline-size: 0;
	font-family: var(--font-text);
	font-weight: 700;
	font-size: 1.3rem;
	line-height: 1.15;
	color: var(--lg-ink);
	font-variant-numeric: tabular-nums;
	letter-spacing: -0.01em;
}
/* «IVA incl» venía heredando la negrita y el cuerpo del precio y le hacía
   sombra. Baja a su sitio: renglón propio, pequeño y en gris. */
.lg-card__price .woocommerce-price-suffix {
	font-size: 0.7rem;
	font-weight: 500;
	line-height: 1.2;
	color: var(--lg-gray);
}
/* Rebajas: el precio viejo tachado y pequeño, el nuevo sin subrayar. */
.lg-card__price del {
	order: -1;
	font-size: 0.8rem;
	font-weight: 500;
	color: var(--lg-gray);
	text-decoration-thickness: 1px;
}
.lg-card__price ins {
	text-decoration: none;
	background: none;
	color: var(--lg-orange-deep);
}
[data-theme='dark'] .lg-card h3,
[data-theme='dark'] .lg-card__price { color: var(--lg-ink); }
.lg-card__cart {
	flex: none;
	inline-size: 44px;
	block-size: 44px;
	display: grid;
	place-items: center;
	border: 0;
	border-radius: 50%;
	background: var(--lg-orange-deep);
	color: #FFFDF6;
	cursor: pointer;
	transition: background 160ms ease-out, transform 160ms ease-out;
}
.lg-card__cart:hover { background: var(--lg-ink); transform: scale(1.05); }
[data-theme='dark'] .lg-card__cart:hover { background: var(--lg-orange); color: #232120; }
.lg-card__cart svg { inline-size: 21px; block-size: 21px; }
.lg-best__all { text-align: center; margin: clamp(1.2rem, 2vw, 1.8rem) 0 0; }

@media (max-width: 1023px) {
	.lg-cats__grid { grid-template-columns: repeat(2, 1fr); }
	.lg-best__grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 560px) {
	/* Dos por fila, no una. Con una sola la tarjeta salía enorme y había que
	   hacer scroll para ver tres productos. */
	.lg-best__grid { grid-template-columns: repeat(2, 1fr); gap: 0.7rem; }
	.lg-card { padding: 0.55rem 0.55rem 0.75rem; border-radius: 13px; }
	.lg-card h3 { font-size: 0.8rem; letter-spacing: 0.03em; }
	.lg-card__price { font-size: 1.05rem; }
	.lg-card__price .woocommerce-price-suffix { font-size: 0.64rem; }
	.lg-card__cart { inline-size: 38px; block-size: 38px; }
	.lg-card__cart svg { inline-size: 18px; block-size: 18px; }
	.lg-card__badge { inset-block-start: 0.85rem; inset-inline-start: 0.85rem; font-size: 0.62rem; padding: 0.22rem 0.45rem; }
}


/* ══ Lo que dicen nuestras familias ══════════════════════════════════════ */
.lg-quotes {
	background: var(--lg-ivory);
	padding-block: var(--lg-sec-pad);
	padding-inline: clamp(1.25rem, 4vw, 4rem);
}
.lg-quotes__grid {
	max-inline-size: 88rem;
	margin-inline: auto;
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: clamp(1rem, 2vw, 1.8rem);
}
.lg-quote {
	position: relative;
	display: flex;
	align-items: center;
	gap: 1.1rem;
	background: var(--lg-paper);
	border-radius: 18px;
	padding: 1.3rem 1.4rem;
	box-shadow: 0 8px 22px rgb(0 0 0 / 0.07);
}
[data-theme='dark'] .lg-quote { background: var(--lg-ivory-deep); }
.lg-quote__pic {
	flex: none;
	inline-size: clamp(6.5rem, 8vw, 8.5rem);
	aspect-ratio: 1;
	border-radius: 50%;
	overflow: hidden;
	box-shadow: inset 0 0 0 1px var(--lg-line);
}
.lg-quote__pic img { inline-size: 100%; block-size: 100%; object-fit: cover; }
[data-theme='dark'] .lg-quote__pic img { filter: brightness(0.92); }
.lg-quote__body { display: grid; gap: 0.4rem; }
.lg-quote blockquote {
	margin: 0;
	font-family: var(--font-text);
	font-size: 0.95rem;
	line-height: 1.5;
	color: var(--lg-ink-soft);
}
.lg-quote__sign {
	margin: 0;
	font-family: var(--font-text);
	font-weight: 600;
	font-size: 0.9rem;
	color: var(--lg-ink);
}
.lg-quote__doodle {
	position: absolute;
	inset-block-end: 0.9rem;
	inset-inline-end: 1rem;
	inline-size: 1.5rem;
	block-size: 1.5rem;
}
.lg-quote--heart .lg-quote__doodle { color: #E0784E; }
.lg-quote--smile .lg-quote__doodle { color: var(--lg-orange); }
.lg-quote--star  .lg-quote__doodle { color: var(--lg-green); }

/* ══ Feed de Instagram ═══════════════════════════════════════════════════
   Con cuenta conectada, la ventana (maqueta de Instagram) la pinta y
   estiliza el plugin trinocex-instagram. Lo de aquí es la sección y la
   rejilla de fotos de reserva para cuando no hay cuenta. */
.lg-feed {
	background: var(--lg-ivory);
	padding-block: var(--lg-sec-pad);
	padding-inline: clamp(1.25rem, 4vw, 4rem);
}
.lg-feed__handle {
	color: var(--lg-orange-deep);
	text-decoration: none;
}
.lg-feed__handle:hover { text-decoration: underline; text-underline-offset: 0.2em; }
.lg-feed .trxig { box-shadow: 0 10px 28px rgb(0 0 0 / 0.08); }
.lg-feed__grid {
	position: relative;
	max-inline-size: 96rem;
	margin-inline: auto;
	display: grid;
	grid-template-columns: repeat(6, 1fr);
	gap: clamp(0.6rem, 1vw, 1rem);
}
.lg-feed__item {
	display: block;
	border-radius: 14px;
	overflow: hidden;
	aspect-ratio: 3 / 4;
	box-shadow: 0 6px 16px rgb(0 0 0 / 0.08);
	transition: transform 200ms ease-out, box-shadow 200ms ease-out;
}
.lg-feed__item:hover { transform: translateY(-3px); box-shadow: 0 12px 26px rgb(0 0 0 / 0.13); }
.lg-feed__item img { inline-size: 100%; block-size: 100%; object-fit: cover; display: block; }
[data-theme='dark'] .lg-feed__item img { filter: brightness(0.9); }
.lg-feed__smile {
	position: absolute;
	inset-block-start: -1.1rem;
	inset-inline-end: -0.6rem;
	inline-size: 3rem;
	block-size: 3rem;
	display: grid;
	place-items: center;
	background: var(--lg-paper);
	border-radius: 50%;
	box-shadow: 0 5px 14px rgb(0 0 0 / 0.14);
	color: var(--lg-orange);
	transform: rotate(8deg);
}
.lg-feed__smile svg { inline-size: 1.7rem; block-size: 1.7rem; }

@media (max-width: 1023px) {
	/* Las reseñas a una columna: esta regla se perdió al rehacer la sección
	   de Instagram y sin ella la portada desborda en horizontal en móvil. */
	.lg-quotes__grid { grid-template-columns: 1fr; max-inline-size: 34rem; }
	.lg-feed__grid { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 560px) {
	.lg-feed__grid { grid-template-columns: repeat(2, 1fr); }
}

/* ══ Footer «Lovely Golden» ══════════════════════════════════════════════ */
.lgf {
	background: var(--lg-ivory-deep);
	overflow: hidden;
}
.lgf__grid {
	/* Antes topaba en 105rem y se centraba: a 1920 dejaba 120 px muertos a
	   cada lado y los bloques se apelotonaban en el medio. Ahora el contenido
	   reparte todo el ancho. Se deja un tope alto para que en un monitor muy
	   ancho los enlaces no queden a un palmo unos de otros. */
	max-inline-size: 130rem;
	margin-inline: auto;
	display: grid;
	/* La marca acotada, y el boletín y los enlaces se reparten lo que queda a
	   partes iguales. Antes los enlaces iban en «auto» y se pegaban al borde
	   derecho dejando un vacío enorme en medio. */
	grid-template-columns: minmax(19rem, 27rem) minmax(19rem, 1fr) minmax(20rem, 1fr);
	gap: clamp(1.5rem, 4vw, 4.5rem);
	align-items: center;
	padding-inline-end: clamp(1.25rem, 4vw, 4.5rem);
}

/* El blob terracota de la marca, sangrando por la izquierda y por abajo */
.lgf__brand {
	position: relative;
	background: var(--lg-orange-deep);
	color: #FFF6EC;
	border-radius: 0 46% 42% 0 / 0 54% 78% 0;
	padding: clamp(2.2rem, 4vw, 3.5rem) clamp(2.8rem, 5vw, 4.5rem) clamp(2.6rem, 4.5vw, 4rem) clamp(1.5rem, 4vw, 4rem);
	margin-block-end: -2rem;      /* muerde la banda legal, como la referencia */
}
[data-theme='dark'] .lgf__brand { background: #B85F2E; }
/* El bloque tiene que morder el borde izquierdo de la pantalla, pero vive
   dentro de una rejilla que se centra al pasar de 105rem: en pantallas anchas
   se quedaba flotando a 120 px del borde y el pie parecía mal montado. Esta
   prolongación lo estira hasta el borde; el overflow del pie la recorta. */
.lgf__brand::before {
	content: '';
	position: absolute;
	inset-block: 0;
	inset-inline-end: 100%;
	inline-size: 50vw;
	background: var(--lg-orange-deep);
}
[data-theme='dark'] .lgf__brand::before { background: #B85F2E; }
.lgf__sun {
	position: absolute;
	inset-block-start: 0.6rem;
	inset-inline-start: 0.4rem;
	inline-size: 3.1rem;
	block-size: 3.1rem;
	display: grid;
	place-items: center;
	background: var(--lg-paper);
	border-radius: 50%;
	box-shadow: 0 5px 12px rgb(0 0 0 / 0.16);
	color: var(--lg-orange);
	transform: rotate(-10deg);
}
.lgf__sun svg { inline-size: 1.9rem; block-size: 1.9rem; }
.lgf__logo {
	position: relative;
	font-family: var(--lg-font-script);
	font-size: clamp(1.9rem, 2.6vw, 2.5rem);
	line-height: 1.15;
	margin: 0 0 0.9rem;
}
.lgf__logo-top { white-space: nowrap; }
.lgf__logo-sun {
	display: inline-block;   /* el reset del padre pone svg en block */
	inline-size: 1.15rem;
	block-size: 1.15rem;
	vertical-align: 0.45em;
}
.lgf__tag {
	font-family: var(--font-text);
	font-size: 0.92rem;
	line-height: 1.55;
	max-inline-size: 20rem;
	margin: 0 0 1.3rem;
	color: #FFEFDF;
}
.lgf__social { display: flex; gap: 0.9rem; }
.lgf__social a {
	display: grid;
	place-items: center;
	inline-size: 44px;
	block-size: 44px;
	border-radius: 12px;
	color: #FFF6EC;
	transition: background 160ms ease-out, transform 160ms ease-out;
}
.lgf__social a:hover { background: rgb(255 246 236 / 0.16); transform: translateY(-2px); }
.lgf__social svg { inline-size: 24px; block-size: 24px; }

/* Newsletter */
.lgf__news { padding-block: var(--lg-sec-pad); }
.lgf__h {
	display: flex;
	align-items: center;
	gap: 0.5rem;
	font-family: var(--font-display);
	font-weight: 700;
	font-size: clamp(1.35rem, 2vw, 1.8rem);
	color: var(--lg-ink);
	margin: 0 0 0.6rem;
}
.lgf__h-ico { inline-size: 1.15em; block-size: 1.15em; color: #E0784E; flex: none; }
.lgf__news > p {
	font-family: var(--font-text);
	font-size: 0.95rem;
	line-height: 1.55;
	color: var(--lg-gray);
	max-inline-size: 24rem;
	margin: 0 0 1.2rem;
}
.lgf__form {
	display: flex;
	max-inline-size: 30rem;
	border-radius: 12px;
	overflow: hidden;
	box-shadow: 0 4px 12px rgb(0 0 0 / 0.06);
}
.lgf__form input {
	flex: 1;
	min-inline-size: 0;
	border: 1.5px solid var(--lg-line);
	border-inline-end: 0;
	border-radius: 12px 0 0 12px;
	background: var(--lg-paper);
	padding: 0.9rem 1.1rem;
	font-family: var(--font-text);
	font-size: 0.95rem;
	color: #232120;
}
.lgf__form input::placeholder { color: #9A938A; }
.lgf__form input:focus { outline: 2px solid var(--lg-orange); outline-offset: -2px; }
.lgf__form button {
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
	border: 0;
	background: var(--lg-orange-deep);
	color: #FFF6EC;
	font-family: var(--font-text);
	font-weight: 700;
	font-size: 0.85rem;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	padding: 0.9rem 1.4rem;
	cursor: pointer;
	transition: background 160ms ease-out;
}
.lgf__form button:hover { background: var(--lg-ink); }
.lgf__form button svg { inline-size: 1.1rem; block-size: 1.1rem; }

/* Columnas de enlaces */
.lgf__cols {
	display: grid;
	/* A partes iguales, no al contenido: así las dos listas reparten el hueco
	   de su columna en vez de amontonarse. */
	grid-template-columns: 1fr 1fr;
	gap: clamp(1.5rem, 3vw, 3.5rem);
	padding-block: var(--lg-sec-pad);
}
.lgf__cols h3 {
	font-family: var(--font-text);
	font-weight: 700;
	font-size: 0.88rem;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--lg-ink);
	margin: 0 0 0.9rem;
}
.lgf__cols ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.55rem; }
.lgf__cols a {
	font-family: var(--font-text);
	font-size: 0.92rem;
	color: var(--lg-gray);
	text-decoration: none;
	transition: color 150ms ease-out;
}
.lgf__cols a:hover { color: var(--lg-orange-deep); }

/* Banda legal */
.lgf__legal {
	background: var(--lg-ivory);
	border-block-start: 1px solid var(--lg-line);
	text-align: center;
	padding-block: 1.1rem;
}
.lgf__legal p {
	margin: 0;
	font-family: var(--font-text);
	font-size: 0.88rem;
	color: var(--lg-gray);
	display: inline-flex;
	align-items: center;
	gap: 0.45rem;
}
.lgf__legal-paw { inline-size: 1rem; block-size: 1rem; color: var(--lg-ink); }

@media (max-width: 1023px) {
	.lgf__grid { grid-template-columns: 1fr; padding-inline: clamp(1.25rem, 4vw, 3rem); gap: 1.5rem; }
	.lgf__brand {
		border-radius: 24px;
		margin-block: 1.5rem 0;
		padding: 2.2rem 1.8rem;
	}
	.lgf__cols { padding-block-start: 0; }
}


/* ════════════════════════════════════════════════════════════════════════
   PULIDO (2026-08-17) — animación, estados y artesanía
   ════════════════════════════════════════════════════════════════════════ */

/* ── Artesanía global ── */
::selection { background: var(--lg-orange); color: #241207; }
:focus-visible {
	outline: 2.5px solid var(--lg-orange-deep);
	outline-offset: 2px;
	border-radius: 4px;
}
@media (prefers-reduced-motion: no-preference) {
	html { scroll-behavior: smooth; }
}
.lg-h2, .lgf__h { text-wrap: balance; }
.lg-quote blockquote, .lgf__news > p { text-wrap: pretty; }
section[id] { scroll-margin-block-start: calc(var(--lg-header-h) + 0.5rem); }

/* ── Header que reacciona al scroll ──
   El blur está SIEMPRE puesto (con fondo opaco no se ve): si naciera con la
   clase, el navegador crea la capa de composición en ese instante y el menú
   pega un salto de subpíxel — el «vibra» que cazó Oscar. Solo cambian la
   transparencia del fondo y la sombra. */
.site-header {
	-webkit-backdrop-filter: blur(10px) saturate(1.1);
	backdrop-filter: blur(10px) saturate(1.1);
	transform: translateZ(0);
	transition: box-shadow var(--lg-t-med) var(--lg-ease),
	            background-color var(--lg-t-med) var(--lg-ease);
}
.site-header.is-scrolled {
	background: color-mix(in srgb, var(--lg-ivory) 50%, transparent);
	box-shadow: 0 1px 0 var(--lg-line), 0 8px 24px rgb(35 33 32 / 0.06);
}

/* Subrayado que se desliza en la nav (sin tocar el ::before del padre) */
.nav-primary a { position: relative; }
.nav-primary a::after {
	content: '';
	position: absolute;
	inset-inline: 0;
	inset-block-end: -0.35em;
	block-size: 2px;
	border-radius: 2px;
	background: var(--lg-orange-deep);
	transform: scaleX(0);
	transform-origin: left center;
	transition: transform var(--lg-t-med) var(--lg-ease);
}
.nav-primary a:hover::after,
.nav-primary .current-menu-item > a::after { transform: scaleX(1); display: block; }
.nav-primary .menu-item-has-children > a::after { inset-inline-end: 1.1em; }

/* ── Entrada del hero (solo al cargar; nada de JS) ── */
@media (prefers-reduced-motion: no-preference) {
	.lg-eyebrow { animation: lg-up 520ms var(--lg-ease) both; }
	.lg-eyebrow { animation-delay: 60ms; }
	/* La fronda se dibuja sola (pathLength=1 en el SVG) */
	.lg-frond path {
		stroke-dasharray: 1;
		stroke-dashoffset: 1;
		animation: lg-draw 900ms var(--lg-ease) both;
	}
	.lg-frond path:nth-child(n+2) { animation-delay: 350ms; }
	.lg-frond path:nth-child(n+6) { animation-delay: 520ms; }
	.lg-frond path:nth-child(n+10) { animation-delay: 690ms; }
}
@keyframes lg-up   { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: none; } }
@keyframes lg-pop  { from { opacity: 0; transform: scale(0.96) translateY(10px); } to { opacity: 1; transform: none; } }
@keyframes lg-badge{ from { opacity: 0; transform: rotate(10deg) scale(0.4); } to { opacity: 1; transform: rotate(10deg) scale(1); } }
@keyframes lg-draw { to { stroke-dashoffset: 0; } }

@keyframes lg-wiggle {
	0% { transform: rotate(-6deg); }
	35% { transform: rotate(-1deg) scale(1.04); }
	70% { transform: rotate(-8deg); }
	100% { transform: rotate(-6deg); }
}


/* ── Antetítulo de tienda, colecciones y páginas ──
   Sin regla propia, el <svg> del destello no tiene tamaño intrínseco y se
   estira hasta llenar el contenedor: era el «logo gigante» del medio. */
.lg-eyebrow {
	display: flex;
	align-items: center;
	gap: 0.55rem;
	margin: 0 0 0.8rem;
	font-family: var(--font-text);
	font-weight: 600;
	font-size: 0.82rem;
	letter-spacing: 0.28em;
	text-transform: uppercase;
	color: var(--lg-ink);
}
.lg-spark {
	inline-size: 1.05em;
	block-size: 1.05em;
	flex: none;
	color: var(--lg-orange-deep);
}

/* ── Reveals al hacer scroll (el JS pone .lg-reveal / .is-in) ── */
.lg-reveal {
	opacity: 0;
	transform: translateY(14px);
	transition: opacity var(--lg-t-slow) var(--lg-ease) var(--lg-d, 0ms),
	            transform var(--lg-t-slow) var(--lg-ease) var(--lg-d, 0ms);
}
.lg-reveal.is-in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
	.lg-reveal { opacity: 1; transform: none; transition: none; }
}

/* ── Tarjetas: la foto se acerca, el carrito responde ── */
.lg-card { overflow: hidden; }
.lg-card__img { transition: transform var(--lg-t-slow) var(--lg-ease); }
.lg-card:hover .lg-card__img { transform: scale(1.045); }
.lg-card__cart { box-shadow: 0 4px 12px rgb(221 126 46 / 0.35); }
.lg-card__cart:active { transform: scale(0.92); }
.lg-card__badge { box-shadow: 0 3px 8px rgb(0 0 0 / 0.14); }

/* ── Círculos de categoría: zoom interno y aro de marca ── */
.lg-cat__ring { position: relative; }
.lg-cat__ring::after {
	content: '';
	position: absolute;
	inset: 0;
	border-radius: 50%;
	box-shadow: inset 0 0 0 0 var(--lg-orange);
	transition: box-shadow var(--lg-t-med) var(--lg-ease);
	pointer-events: none;
}
.lg-cat:hover .lg-cat__ring::after { box-shadow: inset 0 0 0 3px var(--lg-orange); }
.lg-cat__ring img { transition: transform var(--lg-t-slow) var(--lg-ease); }
.lg-cat:hover .lg-cat__ring img { transform: scale(1.07); }
.lg-cat small .lg-arrow { transition: transform var(--lg-t-fast) var(--lg-ease); }

/* ── Feed: velo cálido + zoom al pasar ── */
.lg-feed__item { position: relative; }
.lg-feed__item::after {
	content: '';
	position: absolute;
	inset: 0;
	background: linear-gradient(180deg, transparent 55%, rgb(35 33 32 / 0.32));
	opacity: 0;
	transition: opacity var(--lg-t-med) var(--lg-ease);
	pointer-events: none;
}
.lg-feed__item:hover::after { opacity: 1; }
.lg-feed__item img { transition: transform var(--lg-t-slow) var(--lg-ease); }
.lg-feed__item:hover img { transform: scale(1.05); }

/* ── Footer: detalles ── */
.lgf__form { transition: box-shadow var(--lg-t-med) var(--lg-ease); }
.lgf__form:focus-within { box-shadow: 0 6px 18px rgb(221 126 46 / 0.22); }
.lgf__form button:active { transform: scale(0.97); }
.lgf__cols a { position: relative; }
.lgf__cols a:hover { padding-inline-start: 0.35rem; }
.lgf__cols a { transition: color 150ms ease-out, padding var(--lg-t-fast) var(--lg-ease); }


/* ══ Próximos eventos ════════════════════════════════════════════════════ */
.lg-events {
	background: var(--lg-ivory);
	padding-block: var(--lg-sec-pad);
	padding-inline: clamp(1.25rem, 4vw, 4rem);
}
.lg-events__grid {
	max-inline-size: 88rem;
	margin-inline: auto;
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: clamp(1rem, 2vw, 1.8rem);
}
.lg-event {
	display: flex;
	gap: 1.1rem;
	background: var(--lg-paper);
	border-radius: 18px;
	padding: 1.3rem 1.4rem;
	box-shadow: 0 8px 22px rgb(0 0 0 / 0.07);
	transition: transform var(--lg-t-med) var(--lg-ease), box-shadow var(--lg-t-med) var(--lg-ease);
}
.lg-event:hover { transform: translateY(-3px); box-shadow: 0 14px 30px rgb(0 0 0 / 0.11); }
[data-theme='dark'] .lg-event { background: var(--lg-ivory-deep); }
.lg-event__date {
	flex: none;
	align-self: flex-start;
	display: grid;
	justify-items: center;
	gap: 0.05rem;
	min-inline-size: 4.1rem;
	background: var(--lg-orange-deep);
	color: #FFF6EC;
	border-radius: 13px;
	padding: 0.6rem 0.5rem 0.55rem;
	box-shadow: 0 4px 12px rgb(221 126 46 / 0.3);
}
.lg-event__date b {
	font-family: var(--font-display);
	font-weight: 700;
	font-size: 1.7rem;
	line-height: 1;
	font-variant-numeric: tabular-nums;
}
.lg-event__date span {
	font-family: var(--font-text);
	font-weight: 700;
	font-size: 0.68rem;
	letter-spacing: 0.22em;
}
.lg-event__body { display: grid; gap: 0.4rem; align-content: start; inline-size: 100%; }
.lg-event h3 {
	font-family: var(--font-text);
	font-weight: 600;
	font-size: 1.05rem;
	color: var(--lg-ink);
	margin: 0 0 0.1rem;
	text-wrap: balance;
}
.lg-event__meta {
	display: flex;
	align-items: center;
	gap: 0.5rem;
	margin: 0;
	font-family: var(--font-text);
	font-size: 0.88rem;
	color: var(--lg-gray);
}
.lg-event__meta svg { inline-size: 1rem; block-size: 1rem; flex: none; color: var(--lg-orange-deep); }
.lg-event__foot {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 0.6rem;
	margin-block-start: 0.45rem;
}
.lg-event__chip {
	font-family: var(--font-text);
	font-weight: 600;
	font-size: 0.72rem;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	padding: 0.28rem 0.7rem;
	border-radius: 999px;
}
.lg-event__chip--free { background: color-mix(in srgb, var(--lg-green) 18%, transparent); color: var(--lg-green); }
.lg-event__chip--pop  { background: color-mix(in srgb, var(--lg-orange) 22%, transparent); color: var(--lg-orange-deep); }
.lg-event__chip--ltd  { background: color-mix(in srgb, #E0784E 20%, transparent); color: #C95F35; }
[data-theme='dark'] .lg-event__chip--ltd { color: #F09A72; }
.lg-event__cta {
	font-family: var(--font-text);
	font-weight: 700;
	font-size: 0.88rem;
	color: var(--lg-orange-deep);
	text-decoration: none;
	white-space: nowrap;
	transition: color var(--lg-t-fast) var(--lg-ease), padding var(--lg-t-fast) var(--lg-ease);
}
.lg-event__cta:hover { color: var(--lg-ink); padding-inline-start: 0.25rem; }
[data-theme='dark'] .lg-event__cta:hover { color: var(--lg-ink); }

@media (max-width: 1023px) {
	.lg-events__grid { grid-template-columns: 1fr; max-inline-size: 34rem; }
}


/* ── Componentes compartidos: pegatina GOOD VIBES y sello giratorio ──
   (volvieron a necesitarse en producto; se cayeron en la reescritura
   Palm Springs — lección: los componentes compartidos, juntos y arriba) */
.lg-hero__sticker {
	position: absolute;
	z-index: 2;
	transform: rotate(-7deg);
	background: #FFFDF8;
	border-radius: 46% 54% 52% 48% / 55% 48% 52% 45%;
	padding: 0.9rem 1.3rem 1rem;
	box-shadow: 0 6px 18px rgb(0 0 0 / 0.16);
	text-align: center;
	line-height: 0.9;
}
.lg-hero__sticker b { display: block; font-family: var(--lg-font-script); font-size: 0.95rem; letter-spacing: 0.05em; color: #7A8A67; }
.lg-hero__sticker strong { display: block; font-family: var(--font-display); font-weight: 700; font-size: 1.35rem; letter-spacing: 0.04em; color: #E08B6B; }
.lg-hero__sticker small { display: block; margin-block-start: 0.25rem; font-family: var(--font-text); font-weight: 700; font-size: 0.52rem; letter-spacing: 0.22em; color: #9AA98B; }
[data-theme='dark'] .lg-hero__sticker { background: #F4E9DC; }

.lg-hero__stamp { position: absolute; inline-size: clamp(5.6rem, 8vw, 7rem); }
.lg-hero__stamp svg { display: block; inline-size: 100%; block-size: auto; }
.lg-hero__stamp-bg { fill: #FFFDF8; stroke: var(--lg-line); stroke-width: 1; }
.lg-hero__stamp-text { fill: #414A3E; font-family: var(--font-text); font-weight: 700; font-size: 10.5px; letter-spacing: 0.16em; }
.lg-hero__stamp-paw { fill: var(--lg-orange-deep); }
[data-theme='dark'] .lg-hero__stamp-bg { fill: #F0E6D8; }
@keyframes lg-spin { to { transform: rotate(360deg); } }

/* ════════════════════════════════════════════════════════════════════════
   PÁGINA DE PRODUCTO (referencia 2026-08-17 140008)
   ════════════════════════════════════════════════════════════════════════ */
.lgp { background: var(--lg-ivory); }
.lgp-crumbs {
	max-inline-size: 96rem;
	margin-inline: auto;
	padding: 1rem clamp(1.25rem, 4vw, 4rem) 0;
	font-family: var(--font-text);
	font-size: 0.85rem;
	color: var(--lg-gray);
	display: flex;
	gap: 0.5rem;
	flex-wrap: wrap;
}
.lgp-crumbs a { color: var(--lg-gray); text-decoration: none; }
.lgp-crumbs a:hover { color: var(--lg-orange-deep); }
.lgp-crumbs b { color: var(--lg-ink); font-weight: 600; }

/* ── Hero de producto: galería + compra ── */
.lgp-hero {
	max-inline-size: 96rem;
	margin-inline: auto;
	display: grid;
	grid-template-columns: minmax(20rem, 54%) 1fr;
	gap: clamp(1.5rem, 3.5vw, 4rem);
	padding: clamp(1rem, 2.5vw, 2rem) clamp(1.25rem, 4vw, 4rem) var(--lg-sec-pad);
	align-items: start;
}
.lgp-gallery__main {
	position: relative;
	border-radius: 18px;
	overflow: hidden;
	background: var(--lg-paper);
	box-shadow: 0 10px 26px rgb(0 0 0 / 0.08);
}
.lgp-gallery__slide { display: none; margin: 0; }
.lgp-gallery__slide.is-on { display: block; }
.lgp-gallery__slide img { inline-size: 100%; block-size: auto; aspect-ratio: 1; object-fit: cover; display: block; }
[data-theme='dark'] .lgp-gallery__slide img { filter: brightness(0.92); }
.lgp-gallery__nav {
	position: absolute;
	inset-block-start: 50%;
	transform: translateY(-50%);
	inline-size: 44px;
	block-size: 44px;
	border: 0;
	border-radius: 50%;
	background: color-mix(in srgb, var(--lg-paper) 92%, transparent);
	color: var(--lg-ink);
	font-size: 1.5rem;
	line-height: 1;
	cursor: pointer;
	box-shadow: 0 4px 12px rgb(0 0 0 / 0.14);
	transition: background var(--lg-t-fast) var(--lg-ease), transform var(--lg-t-fast) var(--lg-ease);
}
.lgp-gallery__nav:hover { background: var(--lg-paper); transform: translateY(-50%) scale(1.06); }
.lgp-gallery__nav--prev { inset-inline-start: 0.8rem; }
.lgp-gallery__nav--next { inset-inline-end: 0.8rem; }
[data-theme='dark'] .lgp-gallery__nav { color: #232120; }
.lgp-gallery__fav {
	position: absolute;
	inset-block-start: 0.9rem;
	inset-inline-end: 0.9rem;
	inline-size: 44px;
	block-size: 44px;
	display: grid;
	place-items: center;
	border: 0;
	border-radius: 50%;
	background: color-mix(in srgb, var(--lg-paper) 92%, transparent);
	color: var(--lg-ink);
	cursor: pointer;
	box-shadow: 0 4px 12px rgb(0 0 0 / 0.14);
	transition: color var(--lg-t-fast) var(--lg-ease);
}
.lgp-gallery__fav:hover { color: #E0784E; }
.lgp-gallery__fav .lg-ico { inline-size: 20px; block-size: 20px; }
[data-theme='dark'] .lgp-gallery__fav { color: #232120; }
.lgp-gallery__vibes { position: absolute; inset-block-end: 1rem; inset-inline-start: 1rem; }
.lgp-gallery__thumbs { display: flex; gap: 0.6rem; margin-block-start: 0.8rem; flex-wrap: wrap; }
.lgp-gallery__thumb {
	inline-size: clamp(3.6rem, 5.5vw, 4.6rem);
	aspect-ratio: 1;
	padding: 0;
	border: 2px solid transparent;
	border-radius: 12px;
	overflow: hidden;
	cursor: pointer;
	background: var(--lg-paper);
	transition: border-color var(--lg-t-fast) var(--lg-ease), transform var(--lg-t-fast) var(--lg-ease);
}
.lgp-gallery__thumb img { inline-size: 100%; block-size: 100%; object-fit: cover; display: block; }
.lgp-gallery__thumb:hover { transform: translateY(-2px); }
.lgp-gallery__thumb.is-on { border-color: var(--lg-orange-deep); }

/* ── Columna de compra ── */
.lgp-buy__title {
	font-family: var(--font-display);
	font-weight: 700;
	font-size: clamp(1.8rem, 3vw, 2.6rem);
	letter-spacing: -0.015em;
	color: var(--lg-ink);
	margin: 0 0 0.5rem;
	text-wrap: balance;
}
.lgp-buy__rate { margin-block-end: 0.7rem; }
.lgp-buy__price {
	font-family: var(--font-display);
	font-weight: 700;
	font-size: clamp(1.5rem, 2.4vw, 2rem);
	color: var(--lg-ink);
	margin: 0 0 0.8rem;
	font-variant-numeric: tabular-nums;
}
.lgp-buy__desc {
	font-family: var(--font-text);
	font-size: 0.98rem;
	line-height: 1.6;
	color: var(--lg-gray);
	max-inline-size: 30rem;
	margin-block-end: 1.4rem;
}
.lgp-attr { margin-block-end: 1.1rem; }
.lgp-attr__label {
	display: flex;
	align-items: baseline;
	gap: 0.45rem;
	font-family: var(--font-text);
	font-weight: 600;
	font-size: 0.92rem;
	color: var(--lg-ink);
	margin: 0 0 0.5rem;
}
.lgp-attr__label [data-attr-value] { color: var(--lg-gray); font-weight: 500; }
.lgp-attr__help {
	margin-inline-start: auto;
	font-weight: 500;
	font-size: 0.85rem;
	color: var(--lg-gray);
	text-decoration: underline;
	text-underline-offset: 0.2em;
}
.lgp-attr__help:hover { color: var(--lg-orange-deep); }
.lgp-swatches { display: flex; gap: 0.7rem; }
.lgp-swatch {
	inline-size: 46px;
	block-size: 46px;
	padding: 3px;
	border: 2px solid transparent;
	border-radius: 50%;
	background: transparent;
	cursor: pointer;
	transition: border-color var(--lg-t-fast) var(--lg-ease), transform var(--lg-t-fast) var(--lg-ease);
}
.lgp-swatch:hover { transform: scale(1.06); }
.lgp-swatch.is-on { border-color: var(--lg-orange-deep); }
.lgp-swatch__dot { display: block; inline-size: 100%; block-size: 100%; border-radius: 50%; overflow: hidden; }
.lgp-swatch__dot--img img { inline-size: 100%; block-size: 100%; object-fit: cover; display: block; }
.lgp-pills { display: flex; gap: 0.55rem; flex-wrap: wrap; }
.lgp-pill {
	min-inline-size: 52px;
	min-block-size: 44px;
	padding: 0.5rem 0.9rem;
	border: 1.5px solid var(--lg-line);
	border-radius: 10px;
	background: var(--lg-paper);
	font-family: var(--font-text);
	font-weight: 600;
	font-size: 0.9rem;
	color: var(--lg-ink);
	cursor: pointer;
	transition: border-color var(--lg-t-fast) var(--lg-ease), color var(--lg-t-fast) var(--lg-ease), transform var(--lg-t-fast) var(--lg-ease);
}
[data-theme='dark'] .lgp-pill { color: #232120; }
.lgp-pill:hover { transform: translateY(-1px); border-color: var(--lg-orange); }
.lgp-pill.is-on { border-color: var(--lg-orange-deep); color: var(--lg-orange-deep); box-shadow: 0 0 0 1px var(--lg-orange-deep) inset; }
.lgp-qty { margin-block: 0.4rem 1.2rem; }
.lgp-qty__box {
	display: inline-flex;
	align-items: stretch;
	border: 1.5px solid var(--lg-line);
	border-radius: 10px;
	overflow: hidden;
	background: var(--lg-paper);
}
.lgp-qty__box button {
	inline-size: 44px;
	border: 0;
	background: transparent;
	font-size: 1.2rem;
	color: var(--lg-ink);
	cursor: pointer;
	transition: background var(--lg-t-fast) var(--lg-ease);
}
[data-theme='dark'] .lgp-qty__box button { color: #232120; }
.lgp-qty__box button:hover { background: var(--lg-ivory-deep); }
.lgp-qty__box input {
	inline-size: 3.4rem;
	border: 0;
	text-align: center;
	font-family: var(--font-text);
	font-weight: 600;
	font-size: 1rem;
	background: transparent;
	color: var(--lg-ink);
	-moz-appearance: textfield;
}
[data-theme='dark'] .lgp-qty__box input { color: #232120; }
.lgp-qty__box input::-webkit-outer-spin-button,
.lgp-qty__box input::-webkit-inner-spin-button { -webkit-appearance: none; }
.lgp-ctas { display: grid; gap: 0.7rem; max-inline-size: 26rem; }
.lg-btn--cart {
	background: var(--lg-orange-deep);
	color: #FFF6EC;
	gap: 0.55rem;
	box-shadow: 0 6px 18px rgb(221 126 46 / 0.3);
}
.lg-btn--cart:hover { background: var(--lg-ink); }
[data-theme='dark'] .lg-btn--cart:hover { background: var(--lg-orange); color: #232120; }
.lg-btn--cart:disabled, .lg-btn--ghost:disabled { opacity: 0.45; cursor: not-allowed; transform: none; }
.lgp-fav { margin: 0.9rem 0 0; }
.lgp-fav button {
	display: inline-flex;
	align-items: center;
	gap: 0.45rem;
	border: 0;
	background: transparent;
	font-family: var(--font-text);
	font-size: 0.92rem;
	color: var(--lg-gray);
	cursor: pointer;
}
.lgp-fav button:hover { color: #E0784E; }
.lgp-form__note { color: #C0392B; font-family: var(--font-text); font-size: 0.9rem; }

/* ── Descripción + guía de tallas ── */
.lgp-info {
	max-inline-size: 96rem;
	margin-inline: auto;
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: clamp(1rem, 2vw, 1.8rem);
	padding: var(--lg-sec-pad) clamp(1.25rem, 4vw, 4rem);
}
.lgp-card {
	position: relative;
	background: var(--lg-paper);
	border-radius: 18px;
	padding: clamp(1.3rem, 2.4vw, 2rem);
	box-shadow: 0 8px 22px rgb(0 0 0 / 0.07);
}
[data-theme='dark'] .lgp-card { background: var(--lg-ivory-deep); }
.lgp-card h2 {
	font-family: var(--font-display);
	font-weight: 700;
	font-size: 1.25rem;
	color: var(--lg-ink);
	margin: 0 0 1rem;
}
.lgp-card__list { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.7rem; }
.lgp-card__list li {
	display: flex;
	gap: 0.7rem;
	align-items: flex-start;
	font-family: var(--font-text);
	font-size: 0.93rem;
	line-height: 1.5;
	color: var(--lg-gray);
}
.lgp-card__list svg { inline-size: 1.35rem; block-size: 1.35rem; flex: none; color: var(--lg-orange-deep); }
.lgp-card__foot {
	margin: 1rem 0 0;
	padding-block-start: 0.9rem;
	border-block-start: 1px solid var(--lg-line);
	font-family: var(--font-text);
	font-size: 0.86rem;
	color: var(--lg-gray);
}
.lgp-sizes__wrap { overflow-x: auto; }
.lgp-sizes { inline-size: 100%; border-collapse: collapse; font-family: var(--font-text); font-size: 0.92rem; }
.lgp-sizes th, .lgp-sizes td { padding: 0.55rem 0.8rem; text-align: start; }
.lgp-sizes thead th { color: var(--lg-ink); font-weight: 600; border-block-end: 1.5px solid var(--lg-line); }
.lgp-sizes tbody td { color: var(--lg-gray); border-block-end: 1px solid var(--lg-line); font-variant-numeric: tabular-nums; }
.lgp-sizes tbody tr.is-on td {
	color: var(--lg-orange-deep);
	font-weight: 600;
	background: color-mix(in srgb, var(--lg-orange) 10%, transparent);
}
.lgp-card__note { margin: 0.9rem 0 0.4rem; font-family: var(--font-text); font-size: 0.86rem; color: var(--lg-gray); }
.lgp-card__more { font-family: var(--font-text); font-weight: 600; font-size: 0.9rem; color: var(--lg-orange-deep); text-decoration: none; }
.lgp-card__more:hover { color: var(--lg-ink); }
.lgp-sun {
	position: absolute;
	inset-block-start: -1.2rem;
	inset-inline-end: -0.8rem;
	inline-size: 3rem;
	color: var(--lg-orange);
	filter: drop-shadow(0 3px 6px rgb(0 0 0 / 0.12));
	transform: rotate(12deg);
}

/* ── Completa el look ── */
.lgp-look { padding: var(--lg-sec-pad) clamp(1.25rem, 4vw, 4rem); }
.lgp-look .lg-best__grid { max-inline-size: 88rem; }
.lg-card__link { text-decoration: none; display: block; }
.lg-card__link h3 { transition: color var(--lg-t-fast) var(--lg-ease); }
.lg-card__link:hover h3 { color: var(--lg-orange-deep); }

/* ── Banda emocional ── */
.lgp-band {
	position: relative;
	min-block-size: clamp(14rem, 24vw, 20rem);
	display: grid;
	align-items: center;
	overflow: hidden;
}
.lgp-band__bg { position: absolute; inset: 0; inline-size: 100%; block-size: 100%; object-fit: cover; object-position: 50% 35%; }
[data-theme='dark'] .lgp-band__bg { filter: brightness(0.75); }
.lgp-band__wash {
	position: absolute;
	inset: 0;
	background: linear-gradient(90deg, rgb(35 33 32 / 0.55) 0%, rgb(35 33 32 / 0.25) 45%, transparent 75%);
}
.lgp-band__content { position: relative; z-index: 1; padding-inline: clamp(1.25rem, 5vw, 6rem); }
.lgp-band__title {
	font-family: var(--font-display);
	font-weight: 700;
	font-size: clamp(1.6rem, 3vw, 2.6rem);
	line-height: 1.15;
	color: #FFF6EC;
	max-inline-size: 24ch;
	margin: 0;
	text-wrap: balance;
	text-shadow: 0 2px 12px rgb(0 0 0 / 0.35);
}
.lgp-band__script {
	display: block;
	font-family: var(--lg-font-script);
	font-weight: 400;
	font-size: 1.15em;
	color: var(--lg-orange);
}
.lgp-band__stamp { inset-block-end: auto; inset-block-start: 50%; transform: translateY(-50%); inset-inline-start: auto; inset-inline-end: clamp(1rem, 5vw, 5rem); animation: lg-spin 26s linear infinite; }
@media (prefers-reduced-motion: reduce) { .lgp-band__stamp { animation: none; } }

@media (max-width: 1023px) {
	.lgp-hero { grid-template-columns: 1fr; }
	.lgp-info { grid-template-columns: 1fr; }
	.lgp-band__stamp { display: none; }
}


/* ════════════════════════════════════════════════════════════════════════
   TIENDA Y CATEGORÍAS
   ════════════════════════════════════════════════════════════════════════ */
.lgc { background: var(--lg-ivory); }
.lgc-hero {
	position: relative;
	max-inline-size: 96rem;
	margin-inline: auto;
	padding: 1rem clamp(1.25rem, 4vw, 4rem) clamp(1rem, 2vw, 1.6rem);
	overflow: hidden;
}
.lgc-hero__frond {
	position: absolute;
	inset-block-start: -1.5rem;
	inset-inline-end: -2rem;
	inline-size: clamp(7rem, 10vw, 10rem);
	opacity: 0.55;
}
.lgc-hero__crumbs { padding: 0 0 1.1rem; }
.lgc-hero .lg-eyebrow { margin-block-end: 0.7rem; }
.lgc-hero__title {
	font-family: var(--font-display);
	font-weight: 700;
	font-size: clamp(2rem, 3.6vw, 3rem);
	letter-spacing: -0.015em;
	color: var(--lg-ink);
	margin: 0 0 0.5rem;
	text-wrap: balance;
}
.lgc-hero__desc {
	font-family: var(--font-text);
	font-size: 1rem;
	line-height: 1.6;
	color: var(--lg-gray);
	max-inline-size: 38rem;
}
.lgc-grid-wrap {
	max-inline-size: 96rem;
	margin-inline: auto;
	padding: 0 clamp(1.25rem, 4vw, 4rem) var(--lg-sec-pad);
}
.lgc-toolbar {
	display: flex;
	align-items: center;
	/* sin el recuento (lo da el hero) el selector se va a la derecha */
	justify-content: flex-end;
	gap: 1rem;
	flex-wrap: wrap;
	margin-block-end: clamp(1rem, 2vw, 1.5rem);
	padding-block-end: 0.9rem;
	border-block-end: 1px solid var(--lg-line);
}
.lgc-toolbar__count { margin: 0; font-family: var(--font-text); font-size: 0.92rem; color: var(--lg-gray); }
.lgc-toolbar__order select {
	appearance: none;
	border: 1.5px solid var(--lg-line);
	border-radius: 10px;
	background: var(--lg-paper) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23414A3E' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") right 0.8rem center / 0.85rem no-repeat;
	padding: 0.6rem 2.4rem 0.6rem 1rem;
	font-family: var(--font-text);
	font-weight: 500;
	font-size: 0.92rem;
	color: var(--lg-ink);
	cursor: pointer;
	transition: border-color var(--lg-t-fast) var(--lg-ease);
}
[data-theme='dark'] .lgc-toolbar__order select { color: #232120; }
.lgc-toolbar__order select:hover { border-color: var(--lg-orange); }
.lgc-grid { padding: 0; }
.lgc-pages { margin-block-start: clamp(1.4rem, 2.5vw, 2rem); }
.lgc-pages .page-numbers {
	list-style: none;
	display: flex;
	justify-content: center;
	gap: 0.4rem;
	margin: 0;
	padding: 0;
}
.lgc-pages .page-numbers li a,
.lgc-pages .page-numbers li span {
	display: grid;
	place-items: center;
	min-inline-size: 42px;
	min-block-size: 42px;
	border-radius: 10px;
	border: 1.5px solid var(--lg-line);
	background: var(--lg-paper);
	font-family: var(--font-text);
	font-weight: 600;
	font-size: 0.92rem;
	color: var(--lg-ink);
	text-decoration: none;
	transition: border-color var(--lg-t-fast) var(--lg-ease), color var(--lg-t-fast) var(--lg-ease);
}
[data-theme='dark'] .lgc-pages .page-numbers li a,
[data-theme='dark'] .lgc-pages .page-numbers li span { color: #232120; }
.lgc-pages .page-numbers li a:hover { border-color: var(--lg-orange-deep); color: var(--lg-orange-deep); }
.lgc-pages .page-numbers li span.current { border-color: var(--lg-orange-deep); color: var(--lg-orange-deep); box-shadow: 0 0 0 1px var(--lg-orange-deep) inset; }
.lgc-empty {
	text-align: center;
	padding-block: clamp(2.5rem, 6vw, 5rem);
	display: grid;
	justify-items: center;
	gap: 1rem;
	font-family: var(--font-text);
	color: var(--lg-gray);
}
.lgc-empty svg { inline-size: 3rem; block-size: 3rem; color: var(--lg-orange); }


/* ── Buscador desplegable del header ── */
.lg-search {
	background: var(--lg-ivory-deep);
	border-block-end: 1px solid var(--lg-line);
	animation: lg-up 260ms var(--lg-ease) both;
}
.lg-search form {
	max-inline-size: 46rem;
	margin-inline: auto;
	display: flex;
	gap: 0.6rem;
	padding: 1rem clamp(1.25rem, 4vw, 4rem);
}
.lg-search input[type='search'] {
	flex: 1;
	min-inline-size: 0;
	border: 1.5px solid var(--lg-line);
	border-radius: 12px;
	background: var(--lg-paper);
	padding: 0.85rem 1.1rem;
	font-family: var(--font-text);
	font-size: 1rem;
	color: #232120;
}
.lg-search input[type='search']:focus { outline: 2px solid var(--lg-orange); outline-offset: -2px; }
.lg-search button {
	border: 0;
	border-radius: 12px;
	background: var(--lg-ink);
	color: var(--lg-ivory);
	font-family: var(--font-text);
	font-weight: 600;
	font-size: 0.95rem;
	padding-inline: 1.5rem;
	cursor: pointer;
	transition: background var(--lg-t-fast) var(--lg-ease);
}
.lg-search button:hover { background: var(--lg-orange-deep); color: #FFF; }
[data-theme='dark'] .lg-search button { background: var(--lg-paper); color: #232120; }

/* Feedback del carrito AJAX en las tarjetas */
.lg-card__cart.loading { opacity: 0.6; pointer-events: none; }
.lg-card__cart.added::after {
	content: '✓';
	position: absolute;
	inset-block-start: -0.4rem;
	inset-inline-end: -0.4rem;
	inline-size: 1.2rem;
	block-size: 1.2rem;
	display: grid;
	place-items: center;
	border-radius: 50%;
	background: #6F8B5C;
	color: #FFF;
	font-size: 0.7rem;
	font-weight: 700;
}
.lg-card__cart { position: relative; }
.lg-card .added_to_cart { display: none; }


/* ════════════════════════════════════════════════════════════════════════
   WOOCOMMERCE (carrito, checkout, cuenta, páginas de contenido)
   Los shortcodes clásicos traen su propio marcado: aquí se le pone la voz
   de la casa sin tocar su lógica.
   ════════════════════════════════════════════════════════════════════════ */
/* Las migas y el eyebrow necesitan aire entre sí en páginas de contenido */
.lg-page .lgp-crumbs { margin-block-end: 0.9rem; }
.lg-page .lg-eyebrow { margin-block-end: 0.8rem; }

/* OJO: `.woocommerce` es TAMBIÉN una clase del <body> en las páginas de la
   tienda. Un `.woocommerce { max-width }` a secas estrechaba la página
   ENTERA (body a 78rem = 1248px): cabecera encogida y tienda más angosta que
   la portada. Se acota a los contenedores que el shortcode pinta DENTRO del
   main, que es lo que se quería vestir. */
main .woocommerce, .lg-page {
	max-inline-size: 78rem;
	margin-inline: auto;
	padding: clamp(1.5rem, 3vw, 3rem) clamp(1.25rem, 4vw, 4rem) var(--lg-sec-pad);
	font-family: var(--font-text);
	color: var(--lg-ink);
}
main .woocommerce h1, main .woocommerce h2, main .woocommerce h3,
.lg-page h1, .lg-page h2, .lg-page h3 {
	font-family: var(--font-display);
	font-weight: 700;
	color: var(--lg-ink);
	letter-spacing: -0.01em;
	text-wrap: balance;
}
.lg-page h1 { font-size: clamp(1.9rem, 3.4vw, 2.8rem); margin: 0 0 1rem; }
.lg-page h2 { font-size: clamp(1.3rem, 2vw, 1.6rem); margin: 2rem 0 0.7rem; }
.lg-page h3 { font-size: 1.1rem; margin: 1.5rem 0 0.5rem; }
.lg-page p, .lg-page li { color: var(--lg-gray); line-height: 1.7; }
.lg-page a { color: var(--lg-orange-deep); }
.lg-page table { inline-size: 100%; border-collapse: collapse; margin-block: 1rem; }
.lg-page th, .lg-page td { padding: 0.6rem 0.8rem; text-align: start; border-block-end: 1px solid var(--lg-line); }
.lg-page th { color: var(--lg-ink); font-weight: 600; }
.lg-page td { color: var(--lg-gray); font-variant-numeric: tabular-nums; }

.woocommerce table.shop_table {
	border: 1px solid var(--lg-line);
	border-radius: 16px;
	overflow: hidden;
	background: var(--lg-paper);
}
.woocommerce table.shop_table th { font-family: var(--font-text); color: var(--lg-ink); }
.woocommerce table.shop_table td { color: var(--lg-gray); border-block-start-color: var(--lg-line); }
[data-theme='dark'] .woocommerce table.shop_table,
[data-theme='dark'] .woocommerce table.shop_table td,
[data-theme='dark'] .woocommerce table.shop_table th { color: #232120; }
.woocommerce .cart_totals h2, .woocommerce-billing-fields h3 { font-size: 1.2rem; }

.woocommerce a.button,
.woocommerce button.button,
.woocommerce input.button,
.woocommerce a.button.alt,
.woocommerce button.button.alt,
.woocommerce #respond input#submit {
	background: var(--lg-ink);
	color: var(--lg-ivory);
	border-radius: 12px;
	font-family: var(--font-text);
	font-weight: 600;
	padding: 0.85rem 1.6rem;
	transition: background var(--lg-t-fast) var(--lg-ease), transform var(--lg-t-fast) var(--lg-ease);
}
.woocommerce a.button:hover,
.woocommerce button.button:hover,
.woocommerce input.button:hover,
.woocommerce a.button.alt:hover,
.woocommerce button.button.alt:hover { background: var(--lg-orange-deep); color: #FFF; transform: translateY(-1px); }
.woocommerce .checkout-button, .woocommerce button.button.alt { background: var(--lg-orange-deep); color: #FFF6EC; }
[data-theme='dark'] .woocommerce a.button,
[data-theme='dark'] .woocommerce button.button,
[data-theme='dark'] .woocommerce input.button { background: var(--lg-paper); color: #232120; }

.woocommerce .woocommerce-message,
.woocommerce .woocommerce-info,
.woocommerce .woocommerce-error {
	border-block-start-color: var(--lg-orange-deep);
	background: var(--lg-paper);
	border-radius: 12px;
	font-family: var(--font-text);
	color: #232120;
}
.woocommerce form .form-row input.input-text,
.woocommerce form .form-row textarea,
.woocommerce form .form-row select,
.woocommerce-cart-form .coupon input {
	border: 1.5px solid var(--lg-line);
	border-radius: 10px;
	padding: 0.75rem 1rem;
	font-family: var(--font-text);
	background: var(--lg-paper);
	color: #232120;
}
.woocommerce form .form-row input.input-text:focus { outline: 2px solid var(--lg-orange); outline-offset: -2px; }
.woocommerce .quantity .qty {
	border: 1.5px solid var(--lg-line);
	border-radius: 10px;
	padding: 0.5rem;
	background: var(--lg-paper);
	color: #232120;
	font-family: var(--font-text);
}
.woocommerce-message a.button, .woocommerce .return-to-shop a { border-radius: 12px; }
.woocommerce .woocommerce-breadcrumb { display: none; }   /* usamos las nuestras */

/* ══ Hero de tienda y colecciones ═════════════════════════════════════════
   Mismo cartel que la portada —foto a sangre, titular en dos líneas, barra
   translúcida al pie— pero a media altura: debajo va el listado y tiene que
   asomar sin hacer scroll. El titular es dinámico (Tienda o la categoría),
   así que el cuerpo se ajusta con clamp y admite nombres largos. */
.lgch {
	position: relative;
	isolation: isolate;
	min-block-size: min(58dvh, 30rem);
	display: grid;
	grid-template-rows: 1fr auto;
	background: var(--lg-ivory);
	overflow: hidden;
}
.lgch__plate { position: absolute; inset: 0; z-index: 0; }
.lgch__plate img {
	inline-size: 100%;
	block-size: 100%;
	object-fit: cover;
	object-position: 68% 46%;
	display: block;
}
[data-theme='dark'] .lgch__plate img { filter: brightness(0.8); }
/* Velo cargado a la izquierda, que es donde cae el texto */
.lgch__plate::after {
	content: '';
	position: absolute;
	inset: 0;
	background:
		linear-gradient(96deg, rgb(253 248 237 / 0.88) 0%, rgb(253 248 237 / 0.72) 34%,
		                rgb(253 248 237 / 0.26) 60%, transparent 78%),
		linear-gradient(180deg, rgb(253 248 237 / 0.28) 0%, transparent 30%);
}
[data-theme='dark'] .lgch__plate::after {
	background:
		linear-gradient(96deg, rgb(24 9 13 / 0.88) 0%, rgb(24 9 13 / 0.74) 34%,
		                rgb(24 9 13 / 0.3) 60%, transparent 78%),
		linear-gradient(180deg, rgb(24 9 13 / 0.34) 0%, transparent 30%);
}

.lgch__main { position: relative; z-index: 2; display: flex; align-items: center; }
.lgch__type {
	inline-size: 100%;
	max-inline-size: 52ch;
	padding-inline: clamp(1.25rem, 5vw, 6rem);
	padding-block: clamp(1.4rem, 4vh, 2.6rem);
}
.lgch__crumbs {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.45rem;
	margin-block-end: 0.7rem;
	font-family: var(--font-text);
	font-size: 0.86rem;
	color: var(--lg-ink);
}
.lgch__crumbs a { color: var(--lg-ink); text-decoration: none; border-block-end: 1px solid transparent; }
.lgch__crumbs a:hover { border-block-end-color: currentColor; }
.lgch__crumbs b { font-weight: 700; }

.lgch__display { margin: 0; display: grid; }
.lgch__line { display: block; color: var(--lg-ink); }
.lgch__line--1 {
	font-family: var(--font-display, var(--font-text));
	font-weight: 800;
	font-size: clamp(2.4rem, 6.4vw, 5.2rem);
	line-height: 0.98;
	letter-spacing: -0.02em;
	text-wrap: balance;
}
.lgch__line--2 {
	font-family: var(--lg-font-script);
	font-weight: 400;
	font-size: clamp(1.6rem, 3.6vw, 3rem);
	line-height: 1.1;
	/* Mismo matiz de marca (27°) pero más oscuro: el naranja normal se queda
	   en 2,35:1 sobre el velo claro y no llega al 3:1 de texto grande. */
	color: #AF601D;
	margin-block-start: 0.06em;
	/* Pacifico baja mucho en «p» y «g»: sin este aire el glifo sale de su caja */
	padding-block-end: 0.3em;
}
[data-theme='dark'] .lgch__line--2 { color: var(--lg-orange-deep); }
.lgch__desc {
	margin-block-start: 0.9rem;
	font-family: var(--font-text);
	font-size: 1.02rem;
	line-height: 1.55;
	color: var(--lg-ink-soft);
	text-wrap: pretty;
}
.lgch__desc p { margin: 0; }

/* Barra al pie: mismo tratamiento que la del cartel de la portada */
.lgch__foot {
	position: relative;
	z-index: 3;
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: clamp(0.8rem, 3vw, 2rem);
	padding-inline: clamp(1.25rem, 5vw, 6rem);
	padding-block: clamp(0.75rem, 2vh, 1.1rem);
	border-block-start: 1px solid color-mix(in srgb, var(--lg-line) 70%, transparent);
	background: color-mix(in srgb, var(--lg-ivory) 50%, transparent);
	-webkit-backdrop-filter: blur(10px) saturate(1.1);
	backdrop-filter: blur(10px) saturate(1.1);
}
[data-theme='dark'] .lgch__foot { background: color-mix(in srgb, #2B1118 50%, transparent); }

.lgch__cats { display: flex; flex-wrap: wrap; align-items: center; gap: 0.4rem 1.1rem; }
.lgch__cat {
	position: relative;
	font-family: var(--font-text);
	font-size: 0.95rem;
	font-weight: 600;
	color: var(--lg-ink);
	text-decoration: none;
	padding-block: 0.2rem;
	transition: color 240ms var(--lg-ease);
}
.lgch__cat::after {
	content: '';
	position: absolute;
	inset-inline: 0;
	inset-block-end: -2px;
	block-size: 2px;
	background: var(--lg-orange-deep);
	transform: scaleX(0);
	transform-origin: inline-start;
	transition: transform 260ms var(--lg-ease);
}
.lgch__cat:hover::after,
.lgch__cat:focus-visible::after,
.lgch__cat.is-actual::after { transform: scaleX(1); }
.lgch__cat.is-actual { color: var(--lg-orange-deep); }
.lgch__cat:focus-visible { outline: 3px solid var(--lg-orange-deep); outline-offset: 3px; }

.lgch__count {
	margin: 0;
	margin-inline-start: auto;
	font-family: var(--font-text);
	font-size: 0.95rem;
	color: var(--lg-ink);
	white-space: nowrap;
}
.lgch__count b { font-weight: 700; }

@media (prefers-reduced-motion: no-preference) {
	.lgch__crumbs   { animation: lgh-fade 400ms var(--lgh-ease, ease) 40ms both; }
	.lgch__line--1  { animation: lgh-fade 460ms var(--lgh-ease, ease) 110ms both; }
	.lgch__line--2  { animation: lgh-fade 460ms var(--lgh-ease, ease) 190ms both; }
	.lgch__desc     { animation: lgh-fade 460ms var(--lgh-ease, ease) 260ms both; }
	.lgch__foot     { animation: lgh-fade 460ms var(--lgh-ease, ease) 330ms both; }
}

@media (max-width: 1023px) {
	.lgch { min-block-size: min(56dvh, 26rem); }
	.lgch__plate::after {
		background:
			linear-gradient(180deg, rgb(253 248 237 / 0.62) 0%, rgb(253 248 237 / 0.5) 46%,
			                rgb(253 248 237 / 0.34) 76%, rgb(253 248 237 / 0.3) 100%);
	}
	[data-theme='dark'] .lgch__plate::after {
		background:
			linear-gradient(180deg, rgb(24 9 13 / 0.66) 0%, rgb(24 9 13 / 0.54) 46%,
			                rgb(24 9 13 / 0.4) 76%, rgb(24 9 13 / 0.36) 100%);
	}
	.lgch__foot { gap: 0.5rem 1rem; }
	.lgch__count { margin-inline-start: 0; }
}

/* ── Rejilla de categorías de la tienda ──
   Son 13 y no reparten en 4 columnas: la última fila se quedaba con una
   sola tarjeta colgando a la izquierda. Con flex envolvente las filas
   incompletas se centran, y de paso la rejilla admite cualquier número de
   categorías sin volver a tocarla. */
.lgc-cats .lg-cats__grid {
	max-inline-size: 78rem;
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: clamp(1.4rem, 3vw, 2.6rem) clamp(1rem, 2.5vw, 2.2rem);
}
.lgc-cats .lg-cat {
	flex: 0 0 clamp(8.5rem, calc(25% - 2.2rem), 11.5rem);
}
@media (max-width: 1023px) {
	.lgc-cats .lg-cat { flex-basis: clamp(8rem, calc(33.333% - 1.6rem), 10rem); }
}
@media (max-width: 560px) {
	.lgc-cats .lg-cat { flex-basis: calc(50% - 0.8rem); }
}

/* ══ Cursor ══════════════════════════════════════════════════════════════
   Sin personalizar, a propósito. Hubo una huella de perro como puntero y se
   retiró el 2026-08-19: se veía, pero no resultaba cómoda de usar. Manda el
   cursor del sistema, que es el que el visitante ya sabe leer.
   Si algún día se vuelve a intentar, el original está en
   assets/img/cursor-huella.png y el historial guarda cómo se montó. */


/* ══ Misión Lovely Golden ═════════════════════════════════════════════════
   Cartel a sangre bajo la franja de garantías, más bajo que un hero y con
   todo centrado. La foto va encuadrada en panorámica con el carrito pequeño:
   así el recorte a franja no se lo come. Encima, un velo con la misma crema
   del cartel de la portada para que el texto se lea sobre la foto. */
.lgm {
	position: relative;
	isolation: isolate;
	overflow: hidden;
	display: grid;
	place-items: center;
	min-block-size: clamp(17rem, 24vw, 21rem);
	padding-block: clamp(1.8rem, 3vw, 2.6rem);
	padding-inline: clamp(1.25rem, 4vw, 4rem);
}
.lgm__plate { position: absolute; inset: 0; z-index: 0; overflow: hidden; }
.lgm__plate img {
	inline-size: 100%;
	block-size: 100%;
	object-fit: cover;
	object-position: 75% 34%;
	display: block;
}
.lgm__plate::after {
	content: '';
	position: absolute;
	inset: 0;
	background:
		linear-gradient(180deg, rgb(253 248 237 / 0.18) 0%, rgb(253 248 237 / 0.3) 45%, rgb(253 248 237 / 0.2) 100%),
		radial-gradient(72% 74% at 42% 52%, rgb(253 248 237 / 0.5) 0%, rgb(253 248 237 / 0.1) 70%, transparent 100%);
}
[data-theme='dark'] .lgm__plate img { filter: brightness(0.72); }
[data-theme='dark'] .lgm__plate::after {
	background:
		linear-gradient(180deg, rgb(24 9 13 / 0.5) 0%, rgb(24 9 13 / 0.66) 45%, rgb(24 9 13 / 0.5) 100%),
		radial-gradient(90% 76% at 50% 52%, rgb(24 9 13 / 0.66) 0%, rgb(24 9 13 / 0.24) 68%, transparent 100%);
}

.lgm__inner {
	position: relative;
	z-index: 1;
	inline-size: 100%;
	max-inline-size: 34rem;
	text-align: center;
}
.lgm__kicker {
	display: inline-flex;
	align-items: center;
	gap: 0.4rem;
	margin: 0 0 0.35rem;
	font-family: var(--font-text);
	font-weight: 600;
	font-size: 0.74rem;
	letter-spacing: 0.2em;
	text-transform: uppercase;
	color: var(--lg-orange-deep);
}
[data-theme='dark'] .lgm__kicker { color: var(--lg-orange); }
.lgm__kicker-ico { inline-size: 1.05em; block-size: 1.05em; }
.lgm__titulo {
	margin: 0;
	font-family: var(--font-display);
	font-weight: 700;
	line-height: 0.88;
	color: var(--lg-ink);
	font-size: clamp(1.9rem, 4vw, 2.9rem);
}
[data-theme='dark'] .lgm__titulo { color: #FDF8EF; }
.lgm__titulo-1 { display: inline; }
.lgm__titulo-2 {
	display: inline;
	margin-inline-start: 0.25em;
	font-family: var(--font-script);
	font-weight: 400;
	color: var(--lg-orange-deep);
	font-size: 0.9em;
}
[data-theme='dark'] .lgm__titulo-2 { color: var(--lg-orange); }

/* ── El panel vivo de la misión ──
   Cambia solo cuando cambia el carrito: WooCommerce sustituye .lgm__panel
   entero por AJAX, así que aquí no puede haber estado guardado en clases que
   ponga el JavaScript — todo viene ya resuelto desde PHP. */
.lgm__panel { margin-block-start: 1rem; max-inline-size: 30rem; }
/* Dentro del cartel todo va centrado; en el carrito, alineado a la izquierda
   como el resto de la caja. */
.lgm .lgm__panel { margin-inline: auto; }
.lgm .lgm__tramos { justify-content: center; }
.lgm__titular {
	margin: 0 0 0.7rem;
	font-family: var(--font-text);
	font-weight: 600;
	font-size: clamp(0.98rem, 1.5vw, 1.12rem);
	line-height: 1.35;
	color: var(--lg-ink);
}
[data-theme='dark'] .lgm__titular { color: #FDF8EF; }
.lgm__panel--n3 .lgm__titular { color: var(--lg-orange-deep); }
[data-theme='dark'] .lgm__panel--n3 .lgm__titular { color: var(--lg-orange); }

.lgm__barra {
	position: relative;
	block-size: 12px;
	border-radius: 999px;
	background: rgb(35 33 32 / 0.12);
	overflow: hidden;
}
[data-theme='dark'] .lgm__barra { background: rgb(253 248 237 / 0.18); }
.lgm__relleno {
	position: absolute;
	inset-block: 0;
	inset-inline-start: 0;
	inline-size: var(--lgm-avance, 0%);
	border-radius: 999px;
	background: linear-gradient(90deg, #F7BC6C 0%, var(--lg-orange-deep) 100%);
	transition: inline-size 600ms cubic-bezier(0.22, 1, 0.36, 1);
}
/* El punto del primer tramo, sobre la barra. */
.lgm__marca {
	position: absolute;
	inset-block-start: 50%;
	inset-inline-start: var(--lgm-marca, 50%);
	inline-size: 8px;
	block-size: 8px;
	margin-inline-start: -4px;
	margin-block-start: -4px;
	border-radius: 50%;
	background: var(--lg-paper);
	box-shadow: 0 0 0 2px rgb(35 33 32 / 0.22);
}
.lgm__marca.is-hecha { background: var(--lg-paper); box-shadow: 0 0 0 2px var(--lg-orange-deep); }

.lgm__tramos {
	display: flex;
	gap: 1.4rem;
	margin: 0.75rem 0 0;
	padding: 0;
	list-style: none;
}
.lgm__tramo {
	display: flex;
	align-items: baseline;
	gap: 0.35rem;
	font-family: var(--font-text);
	font-size: 0.82rem;
	color: var(--lg-gray);
}
.lgm__tramo b { font-size: 0.95rem; font-weight: 700; color: var(--lg-ink); }
[data-theme='dark'] .lgm__tramo { color: #D9C8B4; }
[data-theme='dark'] .lgm__tramo b { color: #FDF8EF; }
/* Un tramo conseguido se marca en el naranja de marca, no con un icono más. */
.lgm__tramo.is-hecho b,
.lgm__tramo.is-hecho span { color: var(--lg-orange-deep); }
[data-theme='dark'] .lgm__tramo.is-hecho b,
[data-theme='dark'] .lgm__tramo.is-hecho span { color: var(--lg-orange); }

.lgm__pie {
	margin: 0.7rem 0 0;
	font-family: var(--font-text);
	font-size: 0.88rem;
	color: var(--lg-gray);
}
.lgm__pie b { color: var(--lg-ink); font-weight: 700; }
[data-theme='dark'] .lgm__pie { color: #D9C8B4; }
[data-theme='dark'] .lgm__pie b { color: #FDF8EF; }

@media (max-width: 720px) {
	/* En vertical solo cabe la mitad de la foto a lo ancho, así que el carrito
	   o queda detrás del texto o se sale: se encuadra la pared, que es la
	   misma escena y deja el mensaje limpio. El carrito se ve en cuanto la
	   pantalla da de sí. */
	.lgm__plate img { object-position: 16% 50%; }
	.lgm__panel { margin-inline: auto; }
	/* Los dos tramos no caben en una línea y se partían por dentro
	   («5% de / descuento»). Apilados se leen de un vistazo. */
	.lgm__tramos { flex-direction: column; align-items: center; gap: 0.3rem; }
	.lgm__tramo { white-space: nowrap; }
}

/* ── La misión dentro del carrito ──
   Mismo panel que en la portada, en una caja sobria: aquí no hay foto ni
   titular grande, porque el cliente ya está decidiendo. */
.lgm-carro {
	margin-block: 1.5rem 2rem;
	padding: 1.15rem 1.3rem 1.3rem;
	border-radius: 16px;
	background: var(--lg-paper);
	box-shadow: inset 0 0 0 1px var(--lg-line), 0 8px 22px rgb(0 0 0 / 0.05);
}
[data-theme='dark'] .lgm-carro { background: var(--lg-ivory-deep); }
.lgm-carro__kicker {
	margin: 0;
	font-family: var(--font-text);
	font-weight: 600;
	font-size: 0.74rem;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	color: var(--lg-orange-deep);
}
[data-theme='dark'] .lgm-carro__kicker { color: var(--lg-orange); }
.lgm-carro .lgm__panel { margin-block-start: 0.7rem; max-inline-size: 34rem; }

/* ── «Ver todas» de las categorías de la portada ──
   Las de más allá de la cuarta las esconde el JavaScript con [hidden]; aquí
   solo se coloca el botón y se gira su flecha al desplegar. */
.lg-cats__mas {
	margin: clamp(1.4rem, 2.5vw, 2rem) 0 0;
	text-align: center;
}
.lg-cats__mas .lg-btn {
	display: inline-flex;
	align-items: center;
	gap: 0.45rem;
}
.lg-cats__mas .lg-btn svg {
	inline-size: 1.05em;
	block-size: 1.05em;
	transition: transform var(--lg-t-fast, 160ms) var(--lg-ease, ease-out);
}
.lg-cats__mas .lg-btn.is-abierto svg { transform: rotate(180deg); }

/* El atributo hidden del navegador es display:none, pero .lg-cat declara
   display:grid y le gana. Sin esta regla el botón cambiaba de estado y las
   tarjetas seguían viéndose: se detectó midiendo, no mirando. */
.lg-cats .lg-cat[hidden],
.lgc-cats .lg-cat[hidden] { display: none; }

/* ── Pegatinas de los títulos ──
   Van junto al título, no en su lugar: la pegatina ya trae su propio texto,
   así que se pone del tamaño de un sello y ligeramente girada, como pegada
   encima. Más pequeña no se leería; más grande le comería el sitio al título. */
.lg-h2:has( .lg-h2__peg ) {
	flex-direction: column;
	gap: 0.35rem;
}
.lg-h2__peg {
	order: -1;              /* encima del texto, aunque en el HTML vaya detrás */
	inline-size: auto;
	block-size: clamp(6.5rem, 11.5vw, 9rem);   /* 2,5 veces lo de antes */
	flex: none;
	display: block;
	transform: rotate(-6deg);
	filter: drop-shadow(0 4px 10px rgb(90 60 25 / 0.18));
}
[data-theme='dark'] .lg-h2__peg { filter: drop-shadow(0 4px 12px rgb(0 0 0 / 0.5)); }
@media (max-width: 560px) {
	/* El título tiene que poder partir: si no, en pantallas estrechas el icono
	   que va a su lado se sale de la pantalla. Se perdió al apilar las
	   pegatinas y volvió a aparecer barra horizontal a 320. */
	.lg-h2 { flex-wrap: wrap; }
	.lg-h2__peg { block-size: 6rem; }
}

/* ── Ruleta Lovely ──
   Reaprovecha el cartel de la Misión (.lgm): mismo alto, mismo velo, mismo
   centrado. Aquí solo cambia lo propio: el botón de jugar. */
.lgr__accion { margin: 1.1rem 0 0; }
.lgr__btn {
	background: var(--lg-orange-deep);
	color: #FFFDF6;
	border: 0;
	font-family: var(--font-text);
	font-weight: 700;
	font-size: 0.92rem;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	padding: 0.85rem 2.2rem;
	border-radius: 999px;
	cursor: pointer;
	box-shadow: 0 10px 24px rgb(160 95 20 / 0.28);
	transition: transform 160ms ease-out, background 160ms ease-out, box-shadow 160ms ease-out;
}
.lgr__btn:hover {
	background: var(--lg-ink);
	transform: translateY(-2px);
	box-shadow: 0 14px 30px rgb(0 0 0 / 0.22);
}
[data-theme='dark'] .lgr__btn:hover { background: var(--lg-orange); color: #232120; }
.lgr__btn:focus-visible { outline: 3px solid var(--lg-orange); outline-offset: 3px; }

/* El <html> ya era marfil, pero el <body> venía en blanco y lo tapaba. No se
   notaba porque todas las secciones traen su propio fondo y no dejaban ver
   nada; en cuanto se abrió hueco entre dos carteles, apareció una franja
   blanca. El fondo de la página es marfil, como todo lo demás. */
body { background-color: var(--lg-ivory); }
[data-theme='dark'] body { background-color: var(--lg-ivory); }

/* Dos carteles a sangre seguidos se pegaban y parecían uno solo. Las bandas ya
   no lo necesitan —van contenidas y con margen propio—, pero entre dos
   carteles a sangre sigue haciendo falta abrir hueco. */
.lgm + .lgm { margin-block-start: clamp(2.2rem, 4.5vw, 4rem); }

/* ══ Bandas de título ═════════════════════════════════════════════════════
   Encabezados de sección convertidos en cartel horizontal: foto propia a
   sangre y el texto centrado encima, con la tipografía del titular de la
   portada. Más bajos que los carteles de la Misión y la Ruleta —son un
   rótulo, no una sección— y con velo suficiente para que el texto se lea
   sobre cualquier foto. */
.lgb {
	position: relative;
	isolation: isolate;
	overflow: hidden;
	display: grid;
	place-items: center;
	min-block-size: clamp(7.5rem, 11vw, 9.5rem);
	padding-block: clamp(1.1rem, 2.2vw, 1.8rem);
	padding-inline: clamp(1.25rem, 3vw, 3rem);
	/* Contenidas en vez de ir a sangre: con cuatro seguidas a todo lo ancho la
	   portada quedaba empachada de foto. Como tarjeta respiran y se leen como
	   rótulo, no como sección. */
	inline-size: min(82rem, 100% - clamp(2.5rem, 8vw, 6rem));
	margin-inline: auto;
	margin-block: clamp(1.8rem, 3.5vw, 3rem);
	border-radius: clamp(16px, 1.8vw, 26px);
	box-shadow:
		inset 0 0 0 1px rgb(255 255 255 / 0.35),
		0 12px 34px rgb(90 60 25 / 0.13);
}
[data-theme='dark'] .lgb {
	box-shadow:
		inset 0 0 0 1px rgb(255 255 255 / 0.08),
		0 12px 34px rgb(0 0 0 / 0.4);
}
.lgb__plate { position: absolute; inset: 0; z-index: 0; overflow: hidden; }
.lgb__plate img {
	inline-size: 100%;
	block-size: 100%;
	object-fit: cover;
	object-position: 50% 50%;
	display: block;
}
.lgb__plate::after {
	content: '';
	position: absolute;
	inset: 0;
	background:
		linear-gradient(180deg, rgb(253 248 237 / 0.16) 0%, rgb(253 248 237 / 0.26) 48%, rgb(253 248 237 / 0.16) 100%),
		radial-gradient(58% 74% at 50% 50%, rgb(253 248 237 / 0.5) 0%, rgb(253 248 237 / 0.1) 74%, transparent 100%);
}
[data-theme='dark'] .lgb__plate img { filter: brightness(0.84); }
/* En oscuro la banda salía casi negra y se perdía la foto, que es de lo que
   se trata. Se afloja el velo: el texto va en crema y sigue leyéndose. */
[data-theme='dark'] .lgb__plate::after {
	background:
		linear-gradient(180deg, rgb(24 9 13 / 0.28) 0%, rgb(24 9 13 / 0.4) 48%, rgb(24 9 13 / 0.28) 100%),
		radial-gradient(58% 74% at 50% 50%, rgb(24 9 13 / 0.46) 0%, rgb(24 9 13 / 0.14) 74%, transparent 100%);
}

/* En escritorio la banda se sale un poco por los lados de las fichas. Yendo
   las dos al mismo ancho, rótulo y rejilla se leían como un solo bloque
   corrido; sobresaliendo se ve dónde acaba una sección y empieza la otra.
   Sigue contenida: no llega al borde de la pantalla. */
@media (min-width: 900px) {
	.lgb { inline-size: min(94rem, 100% - 2.75rem); }
}

/* Mismos ajustes que .lgh__display, a menor cuerpo: es un rótulo. */
.lgb__titulo {
	position: relative;
	z-index: 1;
	margin: 0;
	text-align: center;
	font-family: var(--font-display);
	font-weight: 800;
	font-size: clamp(1.9rem, 5.2vw, 3.6rem);
	line-height: 0.94;
	letter-spacing: -0.045em;
	color: var(--lg-ink);
	text-wrap: balance;
}
[data-theme='dark'] .lgb__titulo { color: #FDF8EF; }
.lgb__l1 { display: inline; }
.lgb__l2 {
	display: inline;
	margin-inline-start: 0.16em;
	font-family: var(--lg-font-script);
	font-weight: 400;
	font-size: 0.94em;
	letter-spacing: -0.005em;
}
@media (max-width: 560px) {
	/* En vertical las dos partes se apilan: juntas no caben sin encogerse
	   demasiado y perder el golpe del titular. */
	.lgb__l1, .lgb__l2 { display: block; margin-inline-start: 0; }
	.lgb__l2 { line-height: 1.08; }
}

/* A 320 px la tarjeta de evento se salía 25 px: la caja de la fecha no se
   encoge y el cuerpo no tenía por dónde ceder. Debajo de 380 se apila. */
@media (max-width: 380px) {
	.lg-event { flex-direction: column; gap: 0.85rem; }
	.lg-event__date { align-self: flex-start; }
	.lg-event__body { min-inline-size: 0; }
}

/* ══ Galería de carteles de portada ══════════════════════════════════════
   Los carteles se apilan en la misma celda y se funden entre ellos. Sin
   JavaScript se ve el primero y ya: el resto quedan ocultos y los puntos no
   aparecen, así que nadie se queda mirando unos botones que no hacen nada. */
.lghg { position: relative; display: grid; }
.lghg__pista { display: grid; }
.lghg__pista > .lgh {
	grid-area: 1 / 1;
	opacity: 0;
	visibility: hidden;
	transition: opacity 620ms var(--lg-ease, ease-out), visibility 0s linear 620ms;
}
.lghg__pista > .lgh.is-actual {
	opacity: 1;
	visibility: visible;
	transition: opacity 620ms var(--lg-ease, ease-out), visibility 0s;
}
@media (prefers-reduced-motion: reduce) {
	.lghg__pista > .lgh { transition: none; }
}

.lghg__puntos {
	position: absolute;
	z-index: 5;
	inset-block-end: clamp(5.2rem, 8vw, 7rem);
	inset-inline-start: clamp(1.25rem, 5vw, 6rem);
	display: flex;
	gap: 0.55rem;
}
.lghg__punto {
	inline-size: 2.4rem;
	block-size: 2.4rem;
	display: grid;
	place-items: center;
	padding: 0;
	border: 0;
	background: none;
	cursor: pointer;
}
/* El punto en sí es el interior; el botón es grande para poder acertarle. */
.lghg__punto span {
	display: block;
	inline-size: 0.62rem;
	block-size: 0.62rem;
	border-radius: 999px;
	background: color-mix(in srgb, var(--lg-ink) 34%, transparent);
	box-shadow: 0 0 0 1px rgb(255 255 255 / 0.5);
	transition: inline-size var(--lg-t-med, 260ms) var(--lg-ease, ease-out), background var(--lg-t-med, 260ms) var(--lg-ease, ease-out);
}
.lghg__punto:hover span { background: color-mix(in srgb, var(--lg-ink) 58%, transparent); }
.lghg__punto.is-actual span { inline-size: 1.7rem; background: var(--lg-orange-deep); }
.lghg__punto:focus-visible { outline: 3px solid var(--lg-orange); outline-offset: -4px; border-radius: 999px; }
[data-theme='dark'] .lghg__punto span { background: rgb(253 248 237 / 0.42); box-shadow: 0 0 0 1px rgb(0 0 0 / 0.35); }
[data-theme='dark'] .lghg__punto.is-actual span { background: var(--lg-orange); }
@media (max-width: 720px) {
	/* En vertical el pie del cartel crece y los puntos se le montaban encima
	   del precio. Arriba a la derecha la foto está despejada. */
	.lghg__puntos {
		inset-block: clamp(0.6rem, 2vw, 1.1rem) auto;
		inset-inline: auto clamp(0.5rem, 2vw, 1rem);
	}
}

/* ══ Carrusel de productos ═══════════════════════════════════════════════
   Tira con scroll de verdad, no un carrusel de JavaScript: se mueve con el
   dedo, con la rueda en horizontal y con el teclado aunque el script no
   cargue. Las flechas son un extra que sale solo cuando hay recorrido. */
.lgcar {
	position: relative;
	max-inline-size: 82rem;
	margin-inline: auto;
}
.lgcar__pista {
	display: flex;
	gap: clamp(1rem, 2vw, 1.8rem);
	overflow-x: auto;
	scroll-snap-type: x proximity;
	scroll-padding-inline: 0.2rem;
	/* Aire para que la sombra de las fichas no se recorte al desplazarse. */
	padding: 0.6rem 0.3rem 1.2rem;
	margin: -0.6rem -0.3rem -1.2rem;
	scrollbar-width: thin;
	scrollbar-color: color-mix(in srgb, var(--lg-ink) 22%, transparent) transparent;
	overscroll-behavior-x: contain;
}
.lgcar__pista::-webkit-scrollbar { block-size: 8px; }
.lgcar__pista::-webkit-scrollbar-track { background: transparent; }
.lgcar__pista::-webkit-scrollbar-thumb {
	background: color-mix(in srgb, var(--lg-ink) 20%, transparent);
	border-radius: 999px;
}
.lgcar__pista:focus-visible { outline: 3px solid var(--lg-orange); outline-offset: 4px; border-radius: 18px; }
.lgcar__pista > .lg-card {
	flex: 0 0 clamp(13.5rem, 21vw, 18rem);
	scroll-snap-align: start;
}

/* En ordenador, Novedades y Más vendidos van en rejilla: todos los productos
   a la vista, sin scroll lateral ni flechas. La tira deslizante se queda para
   pantallas estrechas (y para los otros carruseles: tablas de la guía,
   sugeridos…, que no son .lg-best y no cambian). */
@media (min-width: 1024px) {
	.lg-best .lgcar__pista {
		display: grid;
		grid-template-columns: repeat(4, 1fr);
		overflow-x: visible;
		scroll-snap-type: none;
	}
	.lg-best .lgcar__pista > .lg-card { flex: none; inline-size: auto; }
	.lg-best .lgcar__flecha { display: none; }
}

.lgcar__flecha {
	position: absolute;
	inset-block-start: calc(50% - 1.5rem);
	z-index: 3;
	inline-size: 3rem;
	block-size: 3rem;
	display: grid;
	place-items: center;
	border: 0;
	border-radius: 50%;
	background: var(--lg-paper);
	color: var(--lg-ink);
	cursor: pointer;
	box-shadow: inset 0 0 0 1px var(--lg-line), 0 8px 20px rgb(0 0 0 / 0.14);
	transition: background var(--lg-t-fast, 160ms) var(--lg-ease, ease-out), transform var(--lg-t-fast, 160ms) var(--lg-ease, ease-out), opacity 200ms;
}
.lgcar__flecha svg { inline-size: 1.35rem; block-size: 1.35rem; }
.lgcar__flecha:hover { background: var(--lg-orange-deep); color: #FFFDF6; transform: scale(1.06); }
.lgcar__flecha:focus-visible { outline: 3px solid var(--lg-orange); outline-offset: 3px; }
.lgcar__flecha--atras { inset-inline-start: clamp(-1.4rem, -1.5vw, -0.6rem); }
.lgcar__flecha--adelante { inset-inline-end: clamp(-1.4rem, -1.5vw, -0.6rem); }
/* En el tope no se esconde, se apaga: si desaparece, el resto salta de sitio. */
.lgcar__flecha[disabled] { opacity: 0.32; cursor: default; transform: none; }
.lgcar__flecha[disabled]:hover { background: var(--lg-paper); color: var(--lg-ink); }
[data-theme='dark'] .lgcar__flecha { background: var(--lg-ivory-deep); color: #FDF8EF; }

@media (max-width: 720px) {
	/* En vertical estorban más que ayudan: ahí se desplaza con el dedo. */
	.lgcar__flecha { display: none; }
	.lgcar__pista > .lg-card { flex-basis: 62%; }
}

/* ══ Menú de móvil ═══════════════════════════════════════════════════════
   El panel es fijo, pero ni él se desplazaba ni el fondo se quedaba quieto:
   al arrastrar se movía la web por debajo y el menú se quedaba clavado. */
/* Solo donde el panel es un cajón. El tema padre lo convierte en cajón por
   debajo de 63.999em; por encima es la barra de siempre, y ahí un contenedor
   con scroll RECORTA los submenús que se despliegan al pasar por encima. */
@media (max-width: 63.999em) {
	.nav-primary__panel {
		/* Su propio desplazamiento cuando no quepa: con los submenús de las
		   tres familias no entra en una pantalla baja. */
		max-block-size: calc(100dvh - var(--lg-header-h, 4.5rem));
		overflow-y: auto;
		/* Al llegar a su tope no arrastra la página de detrás. */
		overscroll-behavior: contain;
		-webkit-overflow-scrolling: touch;
	}
}
/* Con el menú abierto la página de debajo se queda donde está. Lo pone el JS,
   que además guarda y devuelve la posición para no perderla al cerrar. */
body.lg-menu-abierto {
	position: fixed;
	inset-inline: 0;
	inline-size: 100%;
	overflow: hidden;
}

/* ══ Guía de tallas ══════════════════════════════════════════════════════ */
.lgt {
	background: var(--lg-ivory);
	padding-block: var(--lg-sec-pad);
	padding-inline: clamp(1.25rem, 4vw, 4rem);
}
.lgt-caja {
	max-inline-size: 46rem;
	margin-inline: auto;
	background: var(--lg-paper);
	border-radius: 22px;
	padding: clamp(1.2rem, 3vw, 2rem);
	box-shadow: inset 0 0 0 1px var(--lg-line), 0 14px 36px rgb(0 0 0 / 0.07);
}
[data-theme='dark'] .lgt-caja { background: var(--lg-ivory-deep); }

/* Los dos modos de entrada, como pestañas. */
.lgt-modos {
	display: flex;
	gap: 0.4rem;
	padding: 0.32rem;
	border-radius: 999px;
	background: var(--lg-ivory-deep);
}
[data-theme='dark'] .lgt-modos { background: rgb(0 0 0 / 0.22); }
.lgt-modo {
	flex: 1;
	padding: 0.62rem 0.8rem;
	border: 0;
	border-radius: 999px;
	background: none;
	font-family: var(--font-text);
	font-weight: 600;
	font-size: 0.92rem;
	color: var(--lg-gray);
	cursor: pointer;
	transition: background var(--lg-t-fast, 160ms) var(--lg-ease, ease-out), color var(--lg-t-fast, 160ms) var(--lg-ease, ease-out);
}
.lgt-modo.is-actual { background: var(--lg-paper); color: var(--lg-ink); box-shadow: 0 2px 8px rgb(0 0 0 / 0.09); }
[data-theme='dark'] .lgt-modo.is-actual { background: var(--lg-ivory-deep); color: #FDF8EF; }
.lgt-modo:focus-visible { outline: 3px solid var(--lg-orange); outline-offset: 2px; }

.lgt-ayuda {
	margin: 1.1rem 0 0.9rem;
	font-family: var(--font-text);
	font-size: 0.92rem;
	line-height: 1.5;
	color: var(--lg-gray);
}
.lgt-campos { display: flex; flex-wrap: wrap; gap: 0.9rem; }
.lgt-campo {
	flex: 1 1 10rem;
	display: grid;
	grid-template-columns: 1fr auto;
	align-items: center;
	gap: 0.2rem 0.5rem;
	font-family: var(--font-text);
}
.lgt-campo--ancho { flex-basis: 100%; grid-template-columns: 1fr; }
.lgt-campo > span {
	grid-column: 1 / -1;
	font-weight: 600;
	font-size: 0.82rem;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--lg-ink);
}
[data-theme='dark'] .lgt-campo > span { color: #FDF8EF; }
.lgt-campo input,
.lgt-campo select {
	inline-size: 100%;
	padding: 0.72rem 0.85rem;
	border: 0;
	border-radius: 13px;
	background: var(--lg-ivory);
	box-shadow: inset 0 0 0 1px var(--lg-line);
	font-family: var(--font-text);
	font-size: 1rem;
	color: var(--lg-ink);
}
[data-theme='dark'] .lgt-campo input,
[data-theme='dark'] .lgt-campo select { background: rgb(0 0 0 / 0.2); color: #FDF8EF; }
.lgt-campo input:focus-visible,
.lgt-campo select:focus-visible { outline: 3px solid var(--lg-orange); outline-offset: 2px; }
.lgt-campo em { font-style: normal; font-size: 0.88rem; color: var(--lg-gray); }
.lgt-estimacion {
	margin: 0.9rem 0 0;
	font-family: var(--font-text);
	font-size: 0.88rem;
	color: var(--lg-orange-deep);
}
[data-theme='dark'] .lgt-estimacion { color: var(--lg-orange); }

.lgt-resultado {
	margin-block-start: 1.4rem;
	padding-block-start: 1.3rem;
	border-block-start: 1px solid var(--lg-line);
}
.lgt-resultado__h {
	margin: 0 0 0.9rem;
	font-family: var(--font-text);
	font-weight: 700;
	font-size: 0.82rem;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--lg-orange-deep);
}
[data-theme='dark'] .lgt-resultado__h { color: var(--lg-orange); }
.lgt-tallas { display: flex; flex-wrap: wrap; gap: 0.7rem; margin: 0; padding: 0; list-style: none; }
.lgt-talla {
	flex: 1 1 7rem;
	display: grid;
	justify-items: center;
	gap: 0.1rem;
	padding: 0.85rem 0.6rem;
	border-radius: 15px;
	background: var(--lg-ivory);
	box-shadow: inset 0 0 0 1px var(--lg-line);
	font-family: var(--font-text);
	text-align: center;
}
[data-theme='dark'] .lgt-talla { background: rgb(0 0 0 / 0.18); }
.lgt-talla b {
	font-family: var(--font-display);
	font-size: 1.6rem;
	line-height: 1;
	color: var(--lg-orange-deep);
}
[data-theme='dark'] .lgt-talla b { color: var(--lg-orange); }
.lgt-talla span { font-size: 0.86rem; font-weight: 600; color: var(--lg-ink); }
[data-theme='dark'] .lgt-talla span { color: #FDF8EF; }
.lgt-talla em { font-style: normal; font-size: 0.72rem; color: var(--lg-gray); }
.lgt-nota {
	margin: 0.9rem 0 0;
	font-family: var(--font-text);
	font-size: 0.88rem;
	color: var(--lg-gray);
}

.lgt-sugeridos { margin-block-start: clamp(2rem, 4vw, 3rem); }
.lgt-sug__h {
	margin: 0 0 1.1rem;
	text-align: center;
	font-family: var(--font-display);
	font-weight: 700;
	font-size: clamp(1.3rem, 2.2vw, 1.8rem);
	color: var(--lg-ink);
}
[data-theme='dark'] .lgt-sug__h { color: #FDF8EF; }
.lgt-sug { flex: 0 0 clamp(13.5rem, 21vw, 18rem); scroll-snap-align: start; display: grid; gap: 0.5rem; }
.lgt-sug[hidden] { display: none; }
.lgt-sug .lg-card { flex: 1 1 auto; }
.lgt-sug__talla { margin: 0; text-align: center; }
.lgt-sug__talla span {
	display: inline-block;
	padding: 0.3rem 0.8rem;
	border-radius: 999px;
	background: var(--lg-orange-deep);
	color: #FFFDF6;
	font-family: var(--font-text);
	font-weight: 700;
	font-size: 0.78rem;
	letter-spacing: 0.06em;
}

/* El texto de la página, ya detrás de la calculadora. */
.lgt-texto { padding-block-start: clamp(2rem, 4vw, 3rem); }

/* ── Las tablas de medidas, una por una ──
   Van en la misma tira desplazable que los productos: cada tabla es una
   tarjeta y se pasa a los lados. Con nueve tablas, apilarlas dejaba la página
   interminable. */
.lgt-tablas {
	background: var(--lg-ivory);
	padding-block: var(--lg-sec-pad);
	padding-inline: clamp(1.25rem, 4vw, 4rem);
}
.lgt-tablas__pie {
	max-inline-size: 44rem;
	margin: -0.6rem auto clamp(1.4rem, 3vw, 2.2rem);
	text-align: center;
	font-family: var(--font-text);
	font-size: 0.94rem;
	line-height: 1.55;
	color: var(--lg-gray);
}
.lgt-tabla {
	flex: 0 0 clamp(17rem, 26vw, 22rem);
	scroll-snap-align: start;
	margin: 0;
	padding: 1.1rem 1.2rem 1.2rem;
	border-radius: 18px;
	background: var(--lg-paper);
	box-shadow: inset 0 0 0 1px var(--lg-line), 0 10px 26px rgb(0 0 0 / 0.06);
	display: flex;
	flex-direction: column;
	gap: 0.85rem;
}
[data-theme='dark'] .lgt-tabla { background: var(--lg-ivory-deep); }
.lgt-tabla__cab {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 0.6rem;
	font-family: var(--font-text);
}
.lgt-tabla__cab b {
	font-family: var(--font-display);
	font-weight: 700;
	font-size: 1.25rem;
	color: var(--lg-ink);
}
[data-theme='dark'] .lgt-tabla__cab b { color: #FDF8EF; }
.lgt-tabla__cab span { font-size: 0.78rem; color: var(--lg-gray); }

.lgt-tabla table {
	inline-size: 100%;
	border-collapse: collapse;
	font-family: var(--font-text);
	font-size: 0.9rem;
	font-variant-numeric: tabular-nums;
}
.lgt-tabla th,
.lgt-tabla td {
	padding: 0.5rem 0.4rem;
	text-align: start;
	border-block-end: 1px solid var(--lg-line);
}
.lgt-tabla thead th {
	font-size: 0.74rem;
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--lg-gray);
	white-space: nowrap;
}
.lgt-tabla tbody th {
	inline-size: 3rem;
	font-weight: 700;
	color: var(--lg-orange-deep);
}
[data-theme='dark'] .lgt-tabla tbody th { color: var(--lg-orange); }
.lgt-tabla tbody td { color: var(--lg-ink); white-space: nowrap; }
[data-theme='dark'] .lgt-tabla tbody td { color: #F3E7D6; }
.lgt-tabla tbody tr:last-child th,
.lgt-tabla tbody tr:last-child td { border-block-end: 0; }

.lgt-tabla__quien {
	margin: auto 0 0;
	font-family: var(--font-text);
	font-size: 0.8rem;
	line-height: 1.5;
	color: var(--lg-gray);
}
.lgt-tabla__quien a { color: var(--lg-gray); text-decoration: none; border-block-end: 1px solid var(--lg-line); }
.lgt-tabla__quien a:hover { color: var(--lg-orange-deep); border-color: currentColor; }
@media (max-width: 720px) {
	.lgt-tabla { flex-basis: 78%; }
}

/* «Para» delante de los productos de cada tabla. */
.lgt-tabla__para {
	display: block;
	margin-block-end: 0.15rem;
	font-weight: 700;
	font-size: 0.72rem;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--lg-orange-deep);
}
[data-theme='dark'] .lgt-tabla__para { color: var(--lg-orange); }
.lgt-tabla__cab { justify-content: flex-start; }

/* Distintivo de vídeo en el feed de Instagram. */
.lg-feed__item { position: relative; }
.lg-feed__play {
	position: absolute;
	inset-block-start: 0.55rem;
	inset-inline-end: 0.55rem;
	inline-size: 1.9rem;
	block-size: 1.9rem;
	display: grid;
	place-items: center;
	border-radius: 50%;
	background: rgb(0 0 0 / 0.45);
	color: #FFF;
}
.lg-feed__play svg { inline-size: 1rem; block-size: 1rem; }

/* ══ Calculadora de talla en la ficha de producto ══
   Reusa la caja del buscador de la guía (.lgt-*), encogida para vivir
   dentro de la columna de compra, bajo las pastillas de talla. */
.lgpt-abre {
	border: 0;
	padding: 0;
	background: none;
	font: inherit;
	cursor: pointer;
}
.lgpt {
	margin-block-start: 0.9rem;
	padding: clamp(1rem, 2vw, 1.3rem);
	border-radius: 16px;
}
.lgpt .lgt-ayuda { margin-block-start: 0.9rem; }
.lgpt .lgt-resultado { margin-block-start: 1.1rem; padding-block-start: 1rem; }
.lgpt-res {
	margin: 0;
	font-family: var(--font-text);
	font-weight: 600;
	color: var(--lg-ink);
}
[data-theme='dark'] .lgpt-res { color: #FDF8EF; }
.lgpt-res b {
	margin-inline-start: 0.25rem;
	font-family: var(--font-display);
	font-size: 1.5rem;
	line-height: 1;
	color: var(--lg-orange-deep);
}
[data-theme='dark'] .lgpt-res b { color: var(--lg-orange); }
.lgpt-elegir {
	margin-block-start: 0.7rem;
	padding: 0.5rem 1.1rem;
	border: 0;
	border-radius: 999px;
	background: var(--lg-orange);
	font-family: var(--font-text);
	font-weight: 700;
	font-size: 0.88rem;
	color: #fff;
	cursor: pointer;
	transition: background var(--lg-t-fast, 160ms) var(--lg-ease, ease-out);
}
.lgpt-elegir:hover { background: var(--lg-orange-deep); }
.lgpt-elegir:focus-visible { outline: 3px solid var(--lg-orange); outline-offset: 2px; }
.lgpt-elegir[hidden] { display: none; }

/* ══ Puntos de venta ══════════════════════════════════════════════════════
   Lista de tiendas + mapa Leaflet. Las clases del cartel son las lgm de
   siempre; aquí solo la caja lista/mapa y el pin. */
.lgpv {
	background: var(--lg-ivory);
	padding-block: var(--lg-sec-pad);
	padding-inline: clamp(1.25rem, 4vw, 4rem);
}
.lgpv-caja {
	max-inline-size: 76rem;
	margin-inline: auto;
	display: grid;
	gap: clamp(1rem, 2vw, 1.6rem);
}
@media (min-width: 1024px) {
	.lgpv-caja { grid-template-columns: minmax(19rem, 25rem) 1fr; align-items: start; }
}
.lgpv-lista { display: grid; gap: 0.9rem; }
.lgpv-punto {
	background: var(--lg-paper);
	border-radius: 16px;
	padding: 1rem 1.2rem;
	box-shadow: inset 0 0 0 1px var(--lg-line), 0 6px 18px rgb(0 0 0 / 0.05);
	cursor: pointer;
	transition: box-shadow var(--lg-t-fast, 160ms) var(--lg-ease, ease-out);
}
[data-theme='dark'] .lgpv-punto { background: var(--lg-ivory-deep); }
.lgpv-punto:hover,
.lgpv-punto.is-actual { box-shadow: inset 0 0 0 2px var(--lg-orange), 0 8px 22px rgb(0 0 0 / 0.08); }
.lgpv-punto:focus-visible { outline: 3px solid var(--lg-orange); outline-offset: 2px; }
.lgpv-punto__nombre {
	margin: 0 0 0.3rem;
	font-family: var(--font-display);
	font-size: 1.1rem;
	color: var(--lg-ink);
}
[data-theme='dark'] .lgpv-punto__nombre { color: #FDF8EF; }
.lgpv-punto__dato { margin: 0 0 0.2rem; font-family: var(--font-text); font-size: 0.92rem; color: var(--lg-ink-soft); }
.lgpv-punto__dato--suave { color: var(--lg-gray); font-size: 0.88rem; }
.lgpv-punto__acciones { margin: 0.6rem 0 0; display: flex; gap: 1.1rem; font-family: var(--font-text); font-size: 0.9rem; }
.lgpv-punto__acciones a { color: var(--lg-orange-deep); font-weight: 600; text-decoration: none; }
.lgpv-punto__acciones a:hover { text-decoration: underline; text-underline-offset: 0.2em; }
[data-theme='dark'] .lgpv-punto__acciones a { color: var(--lg-orange); }

.lgpv-mapa-marco {
	border-radius: 18px;
	overflow: hidden;
	box-shadow: inset 0 0 0 1px var(--lg-line), 0 10px 28px rgb(0 0 0 / 0.08);
}
.lgpv-mapa { block-size: clamp(20rem, 48vw, 30rem); }
@media (min-width: 1024px) {
	.lgpv-mapa { block-size: 34rem; }
}
/* El mapa es un iframe de Google tras la tapa de consentimiento. */
.lgpv-mapa--google { position: relative; }
.lgpv-gmap {
	inline-size: 100%;
	block-size: 100%;
	border: 0;
	display: block;
}
.lgpv-tapa {
	position: absolute;
	inset: 0;
	display: grid;
	place-content: center;
	justify-items: center;
	gap: 0.5rem;
	padding: clamp(1.2rem, 4vw, 2.5rem);
	text-align: center;
	background:
		radial-gradient(48rem 20rem at 50% 0%, color-mix(in srgb, var(--lg-orange) 10%, transparent), transparent 70%),
		var(--lg-ivory);
	font-family: var(--font-text);
}
[data-theme='dark'] .lgpv-tapa { background: var(--lg-ivory-deep); }
.lgpv-tapa__ico { inline-size: 2.4rem; block-size: 2.4rem; color: var(--lg-orange-deep); }
[data-theme='dark'] .lgpv-tapa__ico { color: var(--lg-orange); }
.lgpv-tapa__titulo {
	margin: 0;
	font-family: var(--font-display);
	font-weight: 700;
	font-size: 1.15rem;
	color: var(--lg-ink);
}
[data-theme='dark'] .lgpv-tapa__titulo { color: #FDF8EF; }
.lgpv-tapa__texto {
	margin: 0;
	max-inline-size: 34rem;
	font-size: 0.9rem;
	line-height: 1.55;
	color: var(--lg-gray);
}
.lgpv-tapa__boton {
	margin-block-start: 0.6rem;
	padding: 0.7rem 1.4rem;
	border: 0;
	border-radius: 999px;
	background: var(--lg-orange);
	font-family: var(--font-text);
	font-weight: 700;
	font-size: 0.95rem;
	color: #fff;
	cursor: pointer;
	transition: background var(--lg-t-fast, 160ms) var(--lg-ease, ease-out);
}
.lgpv-tapa__boton:hover { background: var(--lg-orange-deep); }
.lgpv-tapa__boton:focus-visible { outline: 3px solid var(--lg-orange); outline-offset: 2px; }
.lgpv-tapa[hidden] { display: none; }
.lgpv-vacio {
	max-inline-size: 40rem;
	margin-inline: auto;
	text-align: center;
	font-family: var(--font-text);
	color: var(--lg-ink-soft);
}

/* Ruleta pegada a la Misión, sin banda entre ambas (Oscar 2026-08-26). */
.lgm + .lgr { margin-block-start: 0; }
/* Misión sin títulos: panel centrado, sin margen superior extra. */
.lgm__inner--sin-titulo .lgm__panel { margin-block-start: 0; }