/* LM Custom — paleta oficial, botones estandarizados y animaciones de aparición */

:root {
	--lmco-rojo: #AD1531;
	--lmco-negro: #000000;
	--lmco-blanco: #FFFFFF;
	--lmco-pie: #1A1A1A; /* único negro alterno: fondo del pie de página */
	--lmco-curva: cubic-bezier(0.22, 1, 0.36, 1); /* la misma curva suave del carrusel */
}

body { color: var(--lmco-negro); }

/* Nada empuja la página de lado: sin scroll horizontal en móvil ni
   escritorio (clip, no hidden: conserva position sticky). */
html, body { overflow-x: clip; }

/* ---- Botón primario (la base es el botón del carrusel: relleno carmesí) ----
   Cubre botones de bloques, WooCommerce y formularios. Los .lmc-btn del
   carrusel se excluyen: ya traen este mismo estilo desde su propio CSS. */
.wp-block-button__link,
.wp-element-button:not(.lmc-btn):not(.xoo-el-action-sc),
.wc-block-components-button,
.woocommerce a.button:not(.lmc-btn):not(.xoo-el-action-sc),
.woocommerce button.button:not(.lmc-btn),
.woocommerce input.button,
.woocommerce #respond input#submit,
a.add_to_cart_button:not(.lmc-btn),
.single_add_to_cart_button,
a.checkout-button,
input[type="submit"],
button[type="submit"] {
	background: var(--lmco-rojo);
	color: var(--lmco-blanco) !important;
	border: 1.5px solid var(--lmco-rojo);
	border-radius: 9px;
	padding: 10px 18px;
	font-weight: 600;
	font-size: 0.9rem;
	line-height: 1.2;
	text-decoration: none;
	cursor: pointer;
	transition: transform 0.18s var(--lmco-curva), opacity 0.15s ease, background 0.2s ease, color 0.2s ease;
}
.wp-block-button__link:hover,
.wp-element-button:not(.lmc-btn):not(.xoo-el-action-sc):hover,
.wc-block-components-button:hover,
.woocommerce a.button:not(.lmc-btn):not(.xoo-el-action-sc):hover,
.woocommerce button.button:not(.lmc-btn):hover,
.woocommerce input.button:hover,
a.add_to_cart_button:not(.lmc-btn):hover,
.single_add_to_cart_button:hover,
a.checkout-button:hover,
input[type="submit"]:hover,
button[type="submit"]:hover {
	opacity: 0.88;
	transform: translateY(-1px);
}
.wp-block-button__link:active,
.wp-element-button:not(.lmc-btn):not(.xoo-el-action-sc):active,
.wc-block-components-button:active,
.woocommerce a.button:not(.lmc-btn):not(.xoo-el-action-sc):active,
.woocommerce button.button:not(.lmc-btn):active,
.woocommerce input.button:active,
a.add_to_cart_button:not(.lmc-btn):active,
.single_add_to_cart_button:active,
a.checkout-button:active,
input[type="submit"]:active,
button[type="submit"]:active {
	transform: scale(0.96);
}

/* ---- Botón secundario: borde carmesí, se rellena al pasar el mouse ----
   El estilo "Contorno" de los bloques y el enlace "Ver carrito" de Woo. */
.is-style-outline .wp-block-button__link,
.is-style-outline.wp-block-button__link,
a.added_to_cart {
	background: transparent;
	color: var(--lmco-rojo) !important;
	border: 1.5px solid var(--lmco-rojo);
	border-radius: 9px;
	padding: 10px 18px;
	font-weight: 600;
	text-decoration: none;
	transition: transform 0.18s var(--lmco-curva), background 0.2s ease, color 0.2s ease;
}
.is-style-outline .wp-block-button__link:hover,
.is-style-outline.wp-block-button__link:hover,
a.added_to_cart:hover {
	background: var(--lmco-rojo);
	color: var(--lmco-blanco) !important;
}

/* ---- Buscador (BuscadorPro): esquinas redondeadas estandarizadas ----
   Cubre las clases de la versión en producción (lm-scrollwrap/lm-search-
   container) y las del código nuevo (lm-dropdown). El modo móvil a pantalla
   completa conserva sus esquinas rectas (su regla gana por especificidad). */
.lm-dropdown,
.lm-scrollwrap {
	border-radius: 14px !important;
	overflow: hidden !important;
}
/* Envoltorio blanco SIN clase que dibuja el fondo del dropdown — está por
   ENCIMA del .lm-scrollwrap y sus esquinas cuadradas tapan el redondeo
   interno. :has() lo agarra sin tocar el código del buscador. */
.lm-search-container :has(> .lm-scrollwrap) {
	border-radius: 14px !important;
	overflow: hidden !important;
}
.lm-dropdown .lm-result-card img,
.lm-search-container .lm-card-image-img,
.lm-search-container img[class*="attachment-"] {
	border-radius: 9px !important;
}

/* ---- Overlay del buscador: oscurece el fondo cuando el dropdown se abre.
   El JS de lm-custom observa el contenedor de BuscadorPro y añade la clase
   `lmco-buscador-abierto` al <body>. No uso :has() porque el minificador
   de LiteSpeed lo elimina silenciosamente, dejando la regla sin efecto.
   El dropdown vive en z-index: 999999, así que el overlay se queda justo
   debajo (999990) para no taparlo. */
.lmco-overlay-buscador {
	position: fixed;
	inset: 0;
	background: rgba(0, 0, 0, 0.55);
	z-index: 999990;
	pointer-events: none;
	opacity: 0;
	transition: opacity 0.32s var(--lmco-curva), backdrop-filter 0.32s var(--lmco-curva);
	backdrop-filter: blur(0);
	-webkit-backdrop-filter: blur(0);
}
body.lmco-buscador-abierto .lmco-overlay-buscador {
	opacity: 1;
	backdrop-filter: blur(2px);
	-webkit-backdrop-filter: blur(2px);
}
@media (prefers-reduced-motion: reduce) {
	.lmco-overlay-buscador {
		transition: none;
		backdrop-filter: none;
		-webkit-backdrop-filter: none;
	}
}
.lm-dropdown .lm-btn-hover,
.lm-search-container .lm-btn-hover {
	border-radius: 9px !important;
}

/* ---- Títulos de producto en rejillas: 15px (pedido del usuario) ---- */
li.wc-block-product .wp-block-post-title,
.woocommerce ul.products li.product .woocommerce-loop-product__title {
	font-size: 15px !important;
}

/* ---- Respuesta al clic en "añadir al carrito" (AJAX de Woo) ----
   Woo pone .loading mientras procesa y .added al confirmar. */
.add_to_cart_button.loading {
	pointer-events: none;
	opacity: 0.85;
}
.add_to_cart_button.loading::after {
	content: "";
	display: inline-block;
	width: 12px;
	height: 12px;
	margin-left: 7px;
	vertical-align: -2px;
	border: 2px solid rgba(255, 255, 255, 0.35);
	border-top-color: var(--lmco-blanco);
	border-radius: 50%;
	animation: lmco-girar 0.6s linear infinite;
}
.add_to_cart_button.added::after {
	content: "✓";
	margin-left: 7px;
	font-weight: 700;
}
@keyframes lmco-girar {
	to { transform: rotate(360deg); }
}

/* ---- Aparición al hacer scroll: CSS PURO (animation-timeline: view()) ----
   Cero JS: cada elemento anima mientras entra en pantalla. Los navegadores
   sin soporte muestran todo estático (nada se oculta jamás).
   Tarjetas: suben. Títulos: entran por un lado, alternando. */
@supports (animation-timeline: view()) {
	@media (prefers-reduced-motion: no-preference) {
		ul.products > li.product:not(.lmc *),
		.wc-block-product-template > li.wc-block-product,
		.wp-block-post-template > li,
		.wp-block-media-text,
		.wp-block-pullquote,
		.wp-block-quote,
		[data-lmco] {
			animation: lmco-sube linear both;
			animation-timeline: view();
			animation-range: entry 5% entry 80%;
		}
		h1.wp-block-heading:nth-of-type(odd),
		h2.wp-block-heading:nth-of-type(odd),
		h1.wp-block-query-title {
			animation: lmco-lado-izq linear both;
			animation-timeline: view();
			animation-range: entry 5% entry 90%;
		}
		h1.wp-block-heading:nth-of-type(even),
		h2.wp-block-heading:nth-of-type(even) {
			animation: lmco-lado-der linear both;
			animation-timeline: view();
			animation-range: entry 5% entry 90%;
		}
		/* Separadores: la línea se traza de izquierda a derecha */
		main hr, hr.wp-block-separator {
			transform-origin: left center;
			animation: lmco-traza linear both;
			animation-timeline: view();
			animation-range: entry 0% entry 100%;
		}
		/* Cortina: la imagen del blog se descubre de abajo hacia arriba */
		.wp-block-post-template > li img {
			animation: lmco-cortina linear both;
			animation-timeline: view();
			animation-range: entry 0% entry 90%;
		}
	}
}
@keyframes lmco-sube {
	from { opacity: 0; transform: translateY(18px); }
	to { opacity: 1; transform: none; }
}
@keyframes lmco-lado-izq {
	from { opacity: 0; transform: translateX(-38px); }
	to { opacity: 1; transform: none; }
}
@keyframes lmco-lado-der {
	from { opacity: 0; transform: translateX(38px); }
	to { opacity: 1; transform: none; }
}
@keyframes lmco-traza {
	from { transform: scaleX(0); }
	to { transform: scaleX(1); }
}

/* ============================================================
   v1.1.0 — animaciones avanzadas (CSS puro, sin dependencias)
   ============================================================ */

/* 5. Fundido entre páginas: el navegador cruza las páginas con un fade
   suave al navegar. Quien no lo soporta navega normal. */
@view-transition { navigation: auto; }
::view-transition-old(root) { animation-duration: 0.28s; }
::view-transition-new(root) { animation-duration: 0.28s; }

/* 1. Marquesinas ligadas al scroll. En Gutenberg, añade a un párrafo o
   título la clase adicional lmco-marquesina-1 (viaja a la izquierda) o
   lmco-marquesina-2 (a la derecha). */
.lmco-marquesina-1, .lmco-marquesina-2 {
	white-space: nowrap;
	width: max-content;
	will-change: transform;
}
:where(*:has(> .lmco-marquesina-1), *:has(> .lmco-marquesina-2)) { overflow-x: clip; }
@supports (animation-timeline: view()) {
	.lmco-marquesina-1 { animation: lmco-mq-izq linear both; animation-timeline: view(); }
	.lmco-marquesina-2 { animation: lmco-mq-der linear both; animation-timeline: view(); }
}
@keyframes lmco-mq-izq { from { transform: translateX(4%); } to { transform: translateX(-22%); } }
@keyframes lmco-mq-der { from { transform: translateX(-22%); } to { transform: translateX(4%); } }

/* 2. Parallax suave en las tarjetas del blog: el contenido interno se
   desliza a ritmos distintos por columna; el <li> conserva su aparición. */
@supports (animation-timeline: view()) {
	.wp-block-post-template > li:nth-child(3n+1) > * { animation: lmco-par-a linear both; animation-timeline: view(); }
	.wp-block-post-template > li:nth-child(3n+2) > * { animation: lmco-par-b linear both; animation-timeline: view(); }
}
@keyframes lmco-par-a { from { transform: translateY(16px); } to { transform: translateY(-16px); } }
@keyframes lmco-par-b { from { transform: translateY(30px); } to { transform: translateY(-30px); } }

/* 3. Palabra acento: pon UNA palabra en cursiva dentro de un título y se
   vuelve serif carmesí. */
h1.wp-block-heading em, h2.wp-block-heading em, main h1 em, main h2 em, .lmco-acento {
	font-family: Georgia, 'Times New Roman', serif;
	font-style: italic;
	color: var(--lmco-rojo);
}

/* 6. Zoom sutil de portada al pasar el mouse (rejillas de producto) */
li.wc-block-product img,
.woocommerce ul.products li.product img {
	transition: transform 0.35s var(--lmco-curva);
}
li.wc-block-product :where(figure, .wc-block-components-product-image):has(> img, > a > img),
.woocommerce ul.products li.product a:has(> img) {
	overflow: hidden;
	display: block;
}
li.wc-block-product:hover img,
.woocommerce ul.products li.product:hover img {
	transform: scale(1.04);
}

/* 7. Subrayado que se dibuja en los enlaces del menú */
.wp-block-navigation a {
	background-image: linear-gradient(currentColor, currentColor);
	background-size: 0% 1.5px;
	background-repeat: no-repeat;
	background-position: 0 100%;
	transition: background-size 0.25s var(--lmco-curva);
	text-decoration: none;
}
.wp-block-navigation a:hover { background-size: 100% 1.5px; }

/* 8. Barra de progreso de lectura (el PHP la imprime en entradas del blog;
   la animación es 100% CSS ligada al scroll de la página) */
.lmco-progreso {
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 3px;
	background: var(--lmco-rojo);
	transform-origin: 0 50%;
	transform: scaleX(0);
	z-index: 99999;
	pointer-events: none;
}
@supports (animation-timeline: scroll()) {
	.lmco-progreso { animation: lmco-prog linear both; animation-timeline: scroll(root); }
}
@keyframes lmco-prog { from { transform: scaleX(0); } to { transform: scaleX(1); } }

/* 10. Pulso del carrito flotante al añadir un libro (clase puesta por el
   JS del carrito; la animación es CSS) */
.lmco-pulso { animation: lmco-pulso 0.55s var(--lmco-curva); }
@keyframes lmco-pulso {
	0% { transform: scale(1); }
	40% { transform: scale(1.18); }
	100% { transform: scale(1); }
}

/* 11. Cortina (keyframes; las reglas viven arriba con view()) */
@keyframes lmco-cortina {
	from { clip-path: inset(100% 0 0 0); }
	to { clip-path: inset(0 0 0 0); }
}

@media (prefers-reduced-motion: reduce) {
	.add_to_cart_button.loading::after { animation: none; }
	::view-transition-old(root), ::view-transition-new(root) { animation: none; }
	.lmco-marquesina-1, .lmco-marquesina-2,
	.wp-block-post-template > li > *,
	.lmco-progreso, .lmco-pulso { animation: none !important; }
	li.wc-block-product:hover img, .woocommerce ul.products li.product:hover img { transform: none; }
}

/* ── "Ver carrito" del aviso de añadido: outline carmesí LEGIBLE.
      Selector de alta especificidad (5 clases) para ganarle al CSS de WooCommerce Blocks
      que dejaba el texto en blanco (invisible) sobre el banner verde. ── */
.wc-block-components-notice-banner.is-success a.button.wc-forward.wp-element-button,
.wc-block-components-notice-banner a.wc-forward.button,
.woocommerce-message a.wc-forward {
	color: var(--lmco-rojo) !important;
	background: #fff !important;
	border: 1.5px solid var(--lmco-rojo) !important;
	border-radius: 9px !important;
	padding: 7px 16px !important;
	font-weight: 700 !important;
	text-decoration: none !important;
	white-space: nowrap !important;
	line-height: 1.2 !important;
	box-shadow: none !important;
}
.wc-block-components-notice-banner.is-success a.button.wc-forward.wp-element-button:hover,
.woocommerce-message a.wc-forward:hover {
	background: var(--lmco-rojo) !important;
	color: #fff !important;
}

/* ═════════════════════════════════════════════════════════════════════════
   LM TIPOGRAFÍA & ESTÉTICA v1.3.0 (jul 2026) — jerarquía Manrope real,
   uniformidad y micro-movimiento. SIN cambiar colores. Especificidad con
   `html body` / `body h1` para ganarle a los global-styles del tema sin
   pisar los tamaños puntuales que los bloques definen con clases.
   ══════════════════════════════════════════════════════════════════════ */
:root { --lm-font: "Manrope", system-ui, -apple-system, "Segoe UI", sans-serif; }

/* Cuerpo: 16px legible, respiración 1.6, render suave */
html body {
	font-family: var(--lm-font);
	font-size: 16px;
	font-weight: 430;
	line-height: 1.6;
	letter-spacing: 0;
	-webkit-font-smoothing: antialiased;
	text-rendering: optimizeLegibility;
}

/* Jerarquía: peso + escala fluida (los presets de bloque siguen mandando) */
body h1, body h2, body h3, body h4, body h5, body h6 {
	font-family: var(--lm-font);
	line-height: 1.2;
	letter-spacing: -0.02em;
	text-wrap: balance;
}
body h1 { font-size: clamp(30px, 4.5vw, 44px); font-weight: 800; }
body h2 { font-size: clamp(24px, 3.2vw, 30px); font-weight: 700; }
body h3 { font-size: clamp(19px, 2.4vw, 22px); font-weight: 700; }
body h4 { font-size: 17px; font-weight: 600; }
body strong, body b { font-weight: 700; }

/* Botones: una sola voz tipográfica + micro-elevación uniforme */
body .wp-element-button,
body button:not([class*="lm-cerbero"]):not([class*="lm-esc"]),
body .button,
body input[type="submit"] {
	font-family: var(--lm-font) !important;
	font-weight: 700;
	letter-spacing: 0.01em;
	transition: transform 0.18s ease-out, box-shadow 0.18s ease-out,
		background-color 0.18s ease-out, opacity 0.18s ease-out;
}
body .wp-element-button:hover, body .button:hover {
	transform: translateY(-1px);
	box-shadow: 0 6px 16px rgba(0, 0, 0, 0.12);
}
body .wp-element-button:active, body .button:active { transform: translateY(0); }

/* Precios: números tabulares — la marca de una tienda cara */
body .price, body .price bdi, body .amount,
body .lm-card-price, body .wc-block-components-product-price {
	font-variant-numeric: tabular-nums lining-nums;
	font-feature-settings: "tnum" 1;
}

/* Portadas: zoom sutil al pasar (recorte seguro en el wrapper de la grilla) */
.wc-block-grid__product-image, .wp-block-woocommerce-product-image { overflow: hidden; }
.wc-block-grid__product-image img,
.wp-block-woocommerce-product-image img {
	transition: transform 0.35s cubic-bezier(0.2, 0.7, 0.3, 1);
}
.wc-block-grid__product:hover .wc-block-grid__product-image img,
.wp-block-woocommerce-product-image a:hover img { transform: scale(1.03); }

/* Foco accesible con identidad */
body :focus-visible {
	outline: 2px solid var(--lmco-rojo, #ad1531);
	outline-offset: 2px;
	border-radius: 4px;
}

/* Selección de texto con el rojo de casa, suave */
::selection { background: rgba(173, 21, 49, 0.14); }

/* Scrollbar fina y discreta */
html { scrollbar-width: thin; scrollbar-color: #cfc9c2 transparent; }
body ::-webkit-scrollbar { width: 10px; height: 10px; }
body ::-webkit-scrollbar-thumb {
	background: #cfc9c2; border-radius: 8px;
	border: 2px solid transparent; background-clip: padding-box;
}
body ::-webkit-scrollbar-thumb:hover { background: #b3aca4; }

/* Movimiento respetuoso */
@media (prefers-reduced-motion: reduce) {
	body *, body *::before, body *::after {
		transition-duration: 0.01ms !important;
		animation-duration: 0.01ms !important;
	}
}

/* ── v1.3.1: títulos de producto SIEMPRE en tinta ──────────────────────────
   El rojo #ad1531 queda reservado para acción (botones, ofertas, corazones).
   Antes convivían títulos rojos y negros según la sección. En reposo tinta;
   al hover, rojo — señal de clicable sin robarle protagonismo al CTA. */
body .wc-block-grid__product-title,
body .wc-block-grid__product-title a,
body .woocommerce-loop-product__title,
body .woocommerce-loop-product__title a,
body .wc-block-components-product-name,
body .up-sells .wp-block-post-title a,
body .related .wp-block-post-title a,
body .wp-block-woocommerce-product-template .wp-block-post-title a,
body .wc-block-product-template .wp-block-post-title a,
body .swiper-wrapper .wpcp-product-title a {
	color: #1f2937 !important;
	transition: color 0.15s ease-out;
}
body .wc-block-grid__product-title a:hover,
body .woocommerce-loop-product__title a:hover,
body .up-sells .wp-block-post-title a:hover,
body .related .wp-block-post-title a:hover,
body .wp-block-woocommerce-product-template .wp-block-post-title a:hover,
body .wc-block-product-template .wp-block-post-title a:hover,
body .swiper-wrapper .wpcp-product-title a:hover {
	color: var(--lmco-rojo, #ad1531) !important;
}

/* ── v1.3.2: PDP premium — el CTA es el rey ────────────────────────────────
   1) Variaciones: tarjetas neutras (borde rojo al elegir); el relleno rojo
      macizo queda EXCLUSIVO del botón Comprar.
   2) Comprar librito: grande (52px) y ancho junto a la cantidad.
   3) WhatsApp: secundario en outline (nunca más protagonista que Comprar).
   4) Escuchar: estilo ghost — conserva encanto sin robar jerarquía.
/* El relleno rojo del estado seleccionado vivía en un hijo interno del pill:
   se neutraliza para que mande la tarjeta (borde rojo + fondo suave). */
body .pld-pill *:not(img) { background: transparent !important; }

/* ── v1.3.3: envío + confianza + escuchar = UNA tarjeta compacta ───────────
   Los tres bloques son hermanos consecutivos en la PDP; se funden en un solo
   módulo con separadores finos. El contador de escuchas (oculto por
   Pa-escuchar) sale a la luz junto a la duración. */
body.single-product .le-delivery-box {
	margin-bottom: 0 !important;
	border-radius: 12px 12px 0 0 !important;
	padding-top: 12px;
	padding-bottom: 10px;
}
body.single-product .plc-trust {
	margin-top: 0 !important;
	margin-bottom: 0 !important;
	border-radius: 0 !important;
	border-top: 1px solid #eceae6 !important;
}
body.single-product .lm-escuchar {
	margin-top: 0 !important;
	border: none !important;
	border-top: 1px solid #eceae6 !important;
	border-radius: 0 0 12px 12px !important;
	background: #ffffff !important;
	box-shadow: none !important;
}
/* Contador de reproducciones: visible, discreto, junto a la duración */
body .lm-escuchar .lm-escuchar-count {
	display: inline-flex !important;
	align-items: center;
	gap: 3px;
	font-size: 12px;
	opacity: 0.85;
}

/* ── v1.3.4: fila de compra al MISMO ancho en simple y variable ────────────
   El contenedor de variables era display:grid e iba inset (633px vs 778 de
   la tarjeta) → botón pequeño. Se fuerza flex a todo el ancho en ambos tipos.
   WhatsApp: mismas dimensiones y radio (9px) que Comprar; hover sólido verde
   con texto blanco SIEMPRE visible. */
body .variations_form .single_variation_wrap {
	width: 100% !important;
	grid-column: 1 / -1;
}
body .woocommerce-variation-add-to-cart,
body form.cart:not(.variations_form) {
	display: flex !important;
	gap: 10px;
	align-items: stretch;
	width: 100% !important;
}
body .single_add_to_cart_button {
	flex: 1 1 auto !important;
	width: auto !important;
	margin: 0 !important;
}
/* WhatsApp: gemelo dimensional del CTA */
body .lm-cerbero-product-wa-btn {
	display: flex !important;
	width: 100% !important;
	justify-content: center;
	align-items: center;
	min-height: 52px;
	border-radius: 9px !important;
	font-size: 16px;
	font-weight: 700;
	margin: 10px 0 0 0 !important;
	box-sizing: border-box;
}
body .lm-cerbero-product-wa-btn:hover {
	background: #25d366 !important;
	color: #ffffff !important;
	border-color: #25d366 !important;
}
body .lm-cerbero-product-wa-btn:hover svg { fill: #ffffff !important; }
/* Comprar: hover con texto siempre visible (blanco sobre rojo, garantizado) */
body .single_add_to_cart_button:hover { color: #ffffff !important; }

/* ── v1.3.5 (seguro): trust compacta, escuchar con gris, zoom opaco ────────
   (El intento de estirar los pills aplanando la tabla de variaciones rompía
   el grid del formulario — se pospone para hacerlo desde Pa-los-detalles.) */
body.single-product .plc-trust {
	padding-top: 5px !important;
	padding-bottom: 5px !important;
}
body.single-product .plc-trust,
body.single-product .plc-trust * {
	font-size: 11px !important;
	line-height: 1.3 !important;
}
body.single-product .lm-escuchar {
	background: #f7f7f7 !important;
}
body.single-product .woocommerce-product-gallery img.zoomImg {
	mix-blend-mode: normal !important;
	background: #faf8f5 !important;
}

/* ── Galería: REVERTIDA a su estado original (pedido del dueño) ────────────
   Se anula el "stage" (fondo crema, curvas, sombra, blend) por completo. */
body.single-product .woocommerce-product-gallery {
	background: transparent !important;
	border-radius: 0 !important;
	padding: 0 !important;
	box-shadow: none !important;
}
body.single-product .woocommerce-product-gallery img {
	mix-blend-mode: normal !important;
}
body.single-product .woocommerce-product-gallery img.zoomImg {
	background: #ffffff !important;
}

/* ── Gris PAREJO en las 3 filas de la tarjeta (mismo #f2f2f2 de confianza) ─ */
body.single-product .lm-escuchar {
	background: #f2f2f2 !important;
}
/* Blindaje: el select nativo de variaciones NUNCA visible cuando hay radios
   (Pa-los-detalles ya lo oculta; esto evita que otro CSS lo reviva). */
body form.variations_form.pld-list-active table.variations {
	display: none !important;
}

/* ── v1.3.6 ────────────────────────────────────────────────────────────────
   1) Stage de portada ELIMINADO del código (la galería queda 100% por
      defecto: transparente, sin bordes, sin sombra — pedido del dueño).
   2) Alineación: el formulario de variaciones era grid y recortaba a sus
      hijos (633px de 778) → pills y Comprar no llegaban al borde derecho.
      Pasa a columna flex a todo el ancho; pills y fila de compra al 100%. */
body form.variations_form.cart {
	display: flex !important;
	flex-direction: column;
	width: 100% !important;
}
body .variations_form .single_variation_wrap {
	width: 100% !important;
}
body .pld-pill {
	width: 100% !important;
	box-sizing: border-box;
}

/* ── v1.3.7: rediseño tarjeta de info + visibilidad total ──────────────────
   Prefijo `html body` a propósito: los plugins imprimen estilos inline
   DESPUÉS de este archivo y empataban en especificidad — así ganamos siempre.
   1) Gris parejo un punto más oscuro en las TRES filas.
   2) Escuchar: título rojo, datos (min/🎧) en tinta — todo legible.
   3) Pill seleccionado: texto y precio SIEMPRE visibles.
   4) Comprar y WhatsApp: gemelos de 52px.
   5) WhatsApp: blanco en reposo → verde lleno SOLO al hover. */
html body.single-product .le-delivery-box,
html body.single-product .plc-trust,
html body.single-product .lm-escuchar {
	background: #ececec !important;
}
html body .lm-escuchar,
html body .lm-escuchar span,
html body .lm-escuchar div {
	color: #1f2937 !important;
}
html body .lm-escuchar .lm-esc-title {
	color: var(--lmco-rojo, #ad1531) !important;
	font-weight: 700;
}
html body .lm-escuchar button {
	background: var(--lmco-rojo, #ad1531) !important;
	color: #ffffff !important;
}
html body .lm-escuchar button:not(.lm-escuchar-play) {
	background: #ffffff !important;
	color: #1f2937 !important;
	border: 1px solid #d5d5d5 !important;
}
html body .pld-pill:has(input:checked) *:not(img) {
	color: #1f2937 !important;
}
html body .pld-pill:has(input:checked) bdi,
html body .pld-pill:has(input:checked) .price {
	color: var(--lmco-rojo, #ad1531) !important;
}
html body .single_add_to_cart_button,
html body .lm-cerbero-product-wa-btn {
	min-height: 52px !important;
}
html body .cart .quantity input.qty { height: 52px !important; }
html body .lm-cerbero-product-wa-btn {
	background: #ffffff !important;
	color: #1a9e4b !important;
	border: 2px solid #25d366 !important;
}
html body .lm-cerbero-product-wa-btn svg { fill: #25d366 !important; }
html body .lm-cerbero-product-wa-btn:hover {
	background: #25d366 !important;
	color: #ffffff !important;
	border-color: #25d366 !important;
}
html body .lm-cerbero-product-wa-btn:hover svg { fill: #ffffff !important; }

/* ── v1.3.8: reproductor a TODO el ancho + etiquetas Voz/Velocidad legibles ─
   Pa-escuchar trae max-width:440px de fábrica → la fila quedaba corta y la
   barra de progreso se desbordaba del gris. Ancho completo, igual que envío.
   Las etiquetas del panel expandido son <label> (no las cubría la regla). */
html body.single-product .lm-escuchar {
	max-width: 100% !important;
	width: 100% !important;
	overflow: hidden !important;
}
html body .lm-escuchar label {
	color: #1f2937 !important;
	font-weight: 600;
	opacity: 1 !important;
}
html body .lm-escuchar select {
	color: #1f2937 !important;
	background: #ffffff !important;
	border: 1px solid #d5d5d5 !important;
	border-radius: 6px;
}

/* ── v1.3.9: envío más angosto + barra de progreso de marca + contador negro ─ */
html body.single-product .le-delivery-box__meta { display: none !important; }
html body .lm-escuchar .lm-escuchar-bar {
	background: #dcdcdc !important;
}
html body .lm-escuchar .lm-escuchar-bar > * {
	background: var(--lmco-rojo, #ad1531) !important;
}
html body .lm-escuchar .lm-escuchar-count {
	color: #000000 !important;
	opacity: 1 !important;
}

/* ── v1.3.10: botones del mini-player rediseñados ──────────────────────────
   Sobre la píldora roja: play = círculo blanco sólido (control primario),
   stop = círculo ghost (secundario). Hover con escala y swap de color;
   táctiles (36px), título con peso y barra redondeada. */
html body .lm-escuchar-mini .lm-mini-play,
html body .lm-escuchar-mini .lm-mini-stop {
	width: 36px !important;
	height: 36px !important;
	border-radius: 50% !important;
	display: inline-flex !important;
	align-items: center;
	justify-content: center;
	font-size: 13px !important;
	line-height: 1 !important;
	padding: 0 !important;
	cursor: pointer;
	flex-shrink: 0;
	transition: transform 0.15s ease-out, background-color 0.15s ease-out, color 0.15s ease-out;
}
html body .lm-escuchar-mini .lm-mini-play {
	background: #ffffff !important;
	color: var(--lmco-rojo, #ad1531) !important;
	border: none !important;
	box-shadow: 0 2px 8px rgba(0, 0, 0, 0.25);
}
html body .lm-escuchar-mini .lm-mini-play:hover { transform: scale(1.08); }
html body .lm-escuchar-mini .lm-mini-stop {
	background: transparent !important;
	color: #ffffff !important;
	border: 1.5px solid rgba(255, 255, 255, 0.7) !important;
}
html body .lm-escuchar-mini .lm-mini-stop:hover {
	background: #ffffff !important;
	color: var(--lmco-rojo, #ad1531) !important;
}
html body .lm-escuchar-mini .lm-mini-play:active,
html body .lm-escuchar-mini .lm-mini-stop:active { transform: scale(0.94); }
html body .lm-escuchar-mini { gap: 10px !important; }
html body .lm-escuchar-mini .lm-mini-title { font-weight: 600; }
html body .lm-escuchar-mini .lm-mini-bar {
	border-radius: 999px !important;
	overflow: hidden;
}

/* ── v1.3.11: etiquetas de los FABs + cinta superior en marquesina ─────────
   Solo escritorio (≥783px). Etiquetas pequeñas sobre el carrito y el chat
   que DESAPARECEN al pasar el puntero. La cinta de temporada desfila de
   derecha a izquierda (texto+botón juntos; la ✕ queda fija). */
@media (min-width: 783px) {
	html body .pec-left::after {
		content: "Tu carrito";
		position: absolute;
		left: 50%;
		transform: translateX(-50%);
		bottom: calc(100% + 6px);
		background: #1f2937;
		color: #ffffff;
		font-size: 11px;
		font-weight: 600;
		padding: 3px 9px;
		border-radius: 999px;
		white-space: nowrap;
		pointer-events: none;
		opacity: 0.95;
		transition: opacity 0.2s ease-out;
		z-index: 5;
	}
	html body .pec-left:hover::after { opacity: 0; }
	html body .lm-cerbero-float-bubble::after {
		content: "Escríbenos, chat";
		position: absolute;
		right: 0;
		bottom: calc(100% + 6px);
		background: #1f2937;
		color: #ffffff;
		font-size: 11px;
		font-weight: 600;
		padding: 3px 9px;
		border-radius: 999px;
		white-space: nowrap;
		pointer-events: none;
		opacity: 0.95;
		transition: opacity 0.2s ease-out;
		z-index: 5;
	}
	html body .lm-cerbero-float-bubble:hover::after { opacity: 0; }

	html body #lm-temporada {
		overflow: hidden;
		position: relative;
	}
	html body #lm-temporada > span,
	html body #lm-temporada > a {
		display: inline-block;
		animation: lm-cinta 22s linear infinite;
		will-change: transform;
	}
	html body #lm-temporada > button {
		position: absolute;
		right: 10px;
		top: 50%;
		transform: translateY(-50%);
		z-index: 2;
	}
	@keyframes lm-cinta {
		from { transform: translateX(55vw); }
		to   { transform: translateX(-115vw); }
	}
}
@media (prefers-reduced-motion: reduce) {
	html body #lm-temporada > span,
	html body #lm-temporada > a { animation: none !important; }
}

/* ── v1.3.12: etiquetas de FABs al COSTADO (patrón Intercom/WhatsApp) ──────
   "Tu carrito" a la derecha del carrito; "Escríbenos, chat" a la izquierda
   de Cerbero — centradas a la altura del botón, apuntando al contenido. */
@media (min-width: 783px) {
	html body .pec-left::after {
		left: calc(100% + 8px);
		right: auto;
		bottom: auto;
		top: 50%;
		transform: translateY(-50%);
	}
	html body .lm-cerbero-float-bubble::after {
		right: calc(100% + 8px);
		left: auto;
		bottom: auto;
		top: 50%;
		transform: translateY(-50%);
	}
}

/* ── v1.3.13: "Escríbenos" solo — 10 caracteres, gemela exacta de "Tu carrito" ── */
@media (min-width: 783px) {
	html body .lm-cerbero-float-bubble::after { content: "Escríbenos"; }
}

/* ═══ 1.3.14 — Noticias & Cuentos con vida (blog (pagina de entradas)) ═══════════════════
   Solo movimiento: cero cambios de estilo, imagen, texto o color.
   A. Ola de entrada al hacer scroll (clase .lmco-nc-in la pone el JS).
   B. Tarjeta viva al pasar el puntero (elevación + la portada respira).
   C. Parallax de lectura en las portadas (CSS scroll-driven, sin JS).
   D. Botón "Cargar más" (el JS lo crea; hereda el estilo de botón del tema).
   Todo dentro de prefers-reduced-motion: no-preference. */
@media (prefers-reduced-motion: no-preference) {
	body.blog .wp-block-post-template.lmco-nc-js > li {
		opacity: 0;
		transform: translateY(26px);
	}
	body.blog .wp-block-post-template.lmco-nc-js > li.lmco-nc-in {
		opacity: 1;
		transform: none;
		transition:
			opacity 0.6s ease var(--lmco-nc-delay, 0s),
			transform 0.6s cubic-bezier(0.22, 1, 0.36, 1) var(--lmco-nc-delay, 0s),
			box-shadow 0.25s ease;
	}
	/* B — elevación de la tarjeta + zoom lento de la portada DENTRO de su
	   marco (scale es propiedad aparte: no pelea con el parallax de C). */
	body.blog .wp-block-post-template.lmco-nc-js > li.lmco-nc-in:hover {
		transform: translateY(-6px);
		box-shadow: 0 14px 34px rgba(0, 0, 0, 0.10);
	}
	body.blog .wp-block-post-featured-image {
		overflow: hidden;
	}
	body.blog .wp-block-post-featured-image img {
		transition: scale 0.9s cubic-bezier(0.22, 1, 0.36, 1);
	}
	body.blog .wp-block-post-template > li:hover .wp-block-post-featured-image img {
		scale: 1.07;
	}
	/* C — parallax: la portada se desliza suave dentro del marco al scrollear.
	   Solo navegadores con scroll-driven animations; el resto ni se entera. */
	@supports (animation-timeline: view()) {
		body.blog .wp-block-post-featured-image img {
			animation: lmco-nc-parallax linear both;
			animation-timeline: view();
			animation-range: entry 0% exit 100%;
		}
	}
}
@keyframes lmco-nc-parallax {
	from { transform: translateY(-5%) scale(1.12); }
	to   { transform: translateY(5%) scale(1.12); }
}
/* D — botón Cargar más: hereda el botón del tema, solo lo centramos. */
.lmco-nc-more {
	display: block;
	margin: 24px auto 8px;
	cursor: pointer;
}
.lmco-nc-more[disabled] { opacity: 0.6; cursor: wait; }

/* ═══ 1.3.17 — Explorador de Noticias & Cuentos ═════════════════════════════
   Esfera 3D de portadas + línea de tiempo + nube de temas. El JS lo construye
   solo en body.blog; sin JS o con reduced-motion la página queda como antes. */
.lmco-exp {
	margin: 4px 0 30px;
}
/* ── Esfera 3D de portadas ── */
.lmco-exp-sphere {
	position: relative;
	/* Full-bleed: la esfera escapa de la columna y ocupa el viewport entero. */
	width: 100vw;
	margin-left: calc(50% - 50vw);
	height: 460px;
	overflow: hidden;
	cursor: grab;
	touch-action: pan-y;
	user-select: none;
	-webkit-user-select: none;
}
.lmco-exp-sphere.is-drag { cursor: grabbing; }
.lmco-exp-cover {
	position: absolute;
	left: 50%;
	top: 50%;
	width: 104px;
	will-change: transform, opacity;
	line-height: 0;
}
.lmco-exp-cover img {
	width: 100%;
	aspect-ratio: 2 / 3;
	object-fit: cover;
	border-radius: 8px;
	box-shadow: 0 10px 24px rgba(0, 0, 0, 0.18);
	display: block;
	-webkit-user-drag: none;
}
.lmco-exp-cover:hover img {
	outline: 3px solid #ad1531;
	outline-offset: 1px;
}
@media (max-width: 600px) {
	.lmco-exp-sphere { height: 300px; }
	.lmco-exp-cover { width: 64px; }
}
/* ── Secciones (etiqueta pequeña + contenido) ── */
.lmco-exp-sec { margin-top: 18px; text-align: center; }
.lmco-exp-label {
	display: block;
	font-size: 11px;
	font-weight: 700;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: #9ca3af;
	margin-bottom: 10px;
}
/* ── Línea de tiempo ── */
.lmco-exp-line {
	display: flex;
	align-items: flex-end;
	justify-content: center;
	flex-wrap: wrap;
	gap: 4px 14px;
	padding: 2px 8px;
}
.lmco-exp-anio {
	font-size: 13px;
	font-weight: 800;
	color: #1f2937;
	align-self: center;
	margin: 0 4px;
}
.lmco-exp-mes {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: flex-end;
	gap: 5px;
	min-width: 40px;
	min-height: 44px;
	background: none;
	border: none;
	cursor: pointer;
	font-size: 11px;
	font-weight: 600;
	color: #6b7280;
	padding: 4px 2px;
}
.lmco-exp-dot {
	display: block;
	border-radius: 50%;
	background: #d1d5db;
	transition: background 0.2s ease, transform 0.2s ease;
}
.lmco-exp-mes:hover .lmco-exp-dot { background: #ad1531; transform: scale(1.15); }
.lmco-exp-mes.is-active { color: #ad1531; font-weight: 800; }
.lmco-exp-mes.is-active .lmco-exp-dot { background: #ad1531; box-shadow: 0 0 0 4px rgba(173, 21, 49, 0.15); }
/* ── Nube de temas ── */
.lmco-exp-cloud {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	justify-content: center;
	gap: 4px 20px;
	max-width: 760px;
	margin: 0 auto;
}
.lmco-exp-tema {
	background: none;
	border: none;
	cursor: pointer;
	font-weight: 600;
	color: #374151;
	padding: 4px 2px;
	min-height: 40px;
	transition: color 0.18s ease;
}
.lmco-exp-tema.is-top { font-weight: 800; color: #1f2937; }
.lmco-exp-tema:hover { color: #ad1531; text-decoration: underline; text-underline-offset: 4px; }
.lmco-exp-tema.is-active {
	color: #ad1531;
	text-decoration: underline;
	text-decoration-thickness: 3px;
	text-underline-offset: 5px;
}
/* ── Filtrado del grid + estado vacío ── */
.lmco-exp-hide { display: none !important; }
.lmco-exp-empty {
	text-align: center;
	color: #6b7280;
	padding: 24px 0;
}
@media (prefers-reduced-motion: reduce) {
	.lmco-exp-dot, .lmco-exp-tema { transition: none; }
}

/* ── 1.3.20: tarjeta del foco (portada "asomada": título + CTA) ── */
.lmco-exp-caption {
	position: absolute;
	left: 50%;
	top: 50%;
	transform: translate(-50%, 128px);
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 5px;
	background: #fff;
	border-radius: 12px;
	padding: 12px 20px;
	box-shadow: 0 12px 32px rgba(0, 0, 0, 0.16);
	text-decoration: none;
	text-align: center;
	opacity: 0;
	pointer-events: none;
	transition: opacity 0.25s ease, transform 0.25s ease;
	z-index: 500;
	max-width: min(440px, 86vw);
}
.lmco-exp-caption.is-show {
	opacity: 1;
	pointer-events: auto;
	transform: translate(-50%, 140px);
}
.lmco-exp-caption strong {
	color: #1f2937;
	font-size: 15px;
	line-height: 1.35;
}
.lmco-exp-caption span {
	color: #ad1531;
	font-weight: 700;
	font-size: 13px;
}
.lmco-exp-caption:hover span { text-decoration: underline; text-underline-offset: 3px; }
@media (max-width: 600px) {
	.lmco-exp-caption { transform: translate(-50%, 74px); padding: 10px 14px; }
	.lmco-exp-caption.is-show { transform: translate(-50%, 84px); }
	.lmco-exp-caption strong { font-size: 13.5px; }
}