/* ==========================================================================
   Variables compartidas del diseño
   ========================================================================== */
:root {
	--color-primario: #1d4ed8;
	--color-primario-oscuro: #1740b0;
	--color-acento: #0f172a;
	--color-texto: #111827;
	--color-texto-suave: #56657a;
	--color-fondo: #ffffff;
	--color-fondo-suave: #f1f5f9;
	--color-borde: #dddddd;
	--color-topbar: #0f172a;
	--color-sombra: #0f172a;
	--color-sombra-fuerte: #000000;
	--color-sombra-header: #0c002e;
	--color-velo: #18181b;
	--velo-opacidad: 55%;
	--color-flotante: #ffffff;
	--color-muestra-borde: #000000;

	/* ThemeCss sobreescribe estas variables después de app.css; los valores
	   de acá son el fallback antes de cargar la configuración de la tienda. */
	--color-boton-fondo: var(--color-primario);
	--color-boton-texto: #ffffff;
	--color-menu-fondo: #ffffff;
	--color-menu-texto: var(--color-texto);
	--color-footer-fondo: var(--color-fondo-suave);
	--color-footer-texto: var(--color-texto-suave);
	--color-topbar-texto: var(--color-texto);
	--tam-h1: 2.25rem;
	--tam-h2: 1.75rem;
	--tam-h3: 1.375rem;
	--tam-h4: 1.125rem;
	--tam-h5: 1rem;
	--interlineado: 1.5;
	--interlineado-movil: 1.5;
	--tam-texto-cuerpo-movil: 1rem;
	--peso-texto-cuerpo: 400;
	--peso-texto-cuerpo-movil: 400;
	--color-texto-cuerpo-movil: #111827;

	--radio: 10px;
	/* Header: valores base (el diseño se hace en el HTML del header; ya no son opciones del Theme editor). */
	--tam-buscador: 0.8rem;
	--header-padding-top-escritorio: 1.5rem;
	--header-padding-bottom-escritorio: 1.5rem;
	--header-padding-top-movil: 0.8rem;
	--header-padding-bottom-movil: 0.8rem;
	--sombra: 0 2px 10px color-mix(in srgb, var(--color-sombra) 8%, transparent);
	--transicion: 150ms ease;
	--campo-fondo: #f9f9f9;
	--campo-foco-anillo: color-mix(in srgb, var(--campo-foco-color, var(--color-primario)) 20%, transparent);

	--fuente: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
	--ancho-maximo: 1200px;
}

/* ==========================================================================
   Reset mínimo
   ========================================================================== */
/* Reservar la scrollbar evita desplazar el contenido al fijar el body para abrir el menú móvil. */
html { scrollbar-gutter: stable; }
/* Bloqueo de scroll de fondo mientras el menú móvil (popup) está abierto
   — ver app.js. Con scrollbar-gutter:stable de arriba, el ancho no se
   corre; esto solo evita que el contenido de atrás siga scrolleando. */
html.menu-movil-bloqueado { overflow: hidden; }
*, *::before, *::after { box-sizing: border-box; }
body { margin: 0; }
img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
ul, ol { list-style: none; margin: 0; padding: 0; }
button, input, select, textarea { font: inherit; color: inherit; }
h1, h2, h3, h4, h5, p { margin: 0 0 0.5em; }
h1 { font-size: var(--tam-h1); }
h2 { font-size: var(--tam-h2); }
h3 { font-size: var(--tam-h3); }
h4 { font-size: var(--tam-h4); }
h5 { font-size: var(--tam-h5); }

body {
	font-family: var(--fuente);
	font-size: var(--tam-texto-cuerpo, 1rem);
	font-weight: var(--peso-texto-cuerpo, 400);
	color: var(--color-texto);
	background: var(--color-fondo);
	line-height: var(--interlineado);
}
@media (max-width: 767px) {
	body { --color-texto: var(--color-texto-cuerpo-movil); font-size: var(--tam-texto-cuerpo-movil, var(--tam-texto-cuerpo, 1rem)); font-weight: var(--peso-texto-cuerpo-movil, var(--peso-texto-cuerpo, 400)); line-height: var(--interlineado-movil, var(--interlineado, 1.5)); }
}

.container {
	max-width: var(--ancho-maximo);
	margin: 0 auto;
	padding: 0 1.25rem;
}

/* Base común para campos del front, también fuera de .admin-campo. Los
   controles especiales (buscador y cantidad) conservan sus propias reglas. */
body[data-form-labels] :where(input:not([type]), input[type="text"], input[type="email"], input[type="tel"], input[type="password"], input[type="url"], input[type="date"], input[type="search"], input[type="number"], textarea) {
	border: var(--campo-borde-px, 1px) solid var(--campo-borde, #dddddd);
	border-radius: var(--campo-radio, 8px);
	background-color: var(--campo-fondo);
}

/* Selectores del front: control nativo como base para todos los navegadores. */
select {
	appearance: none;
	-webkit-appearance: none;
	background-color: var(--campo-fondo, var(--color-fondo));
	background-image: linear-gradient(45deg, transparent 50%, var(--color-texto-suave) 50%), linear-gradient(135deg, var(--color-texto-suave) 50%, transparent 50%), linear-gradient(to bottom, color-mix(in srgb, var(--color-flotante) 13%, transparent), color-mix(in srgb, var(--color-sombra) 2.5%, transparent));
	background-repeat: no-repeat;
	background-position: calc(100% - 20px) center, calc(100% - 15px) center, 0 0;
	background-size: 5px 5px, 5px 5px, 100% 100%;
	padding: .55em 1em;
	border: var(--campo-borde-px, 1px) solid var(--campo-borde, #dddddd);
	border-radius: var(--campo-radio, 8px);
	color: var(--color-texto);
	cursor: pointer;
	box-shadow: 0 1px 2px color-mix(in srgb, var(--color-sombra) 4.5%, transparent);
	transition: border-color .18s ease, box-shadow .18s ease, background-color .18s ease;
}
select:not([multiple]):not([size]):not(.estado-badge-select) {
	min-height: var(--campo-altura, 40px);
	padding-inline-end: 2.75em;
}
select:not(.estado-badge-select):hover:not(:disabled) { border-color: color-mix(in srgb, var(--campo-borde, #dddddd) 70%, var(--campo-foco-borde, var(--color-primario))); box-shadow: 0 2px 7px color-mix(in srgb, var(--color-sombra) 9%, transparent); }
select:focus-visible { outline: none; border-color: var(--campo-foco-borde, var(--color-primario)); }
select:disabled { cursor: not-allowed; opacity: .65; }
select option { background-color: var(--campo-fondo, var(--color-fondo)); color: var(--color-texto); }
select::-ms-expand { display: none; }
@media (max-width: 767px) {
	select:not([multiple]):not([size]):not(.estado-badge-select) { font-size: max(16px, 1em); }
}

/* En navegadores compatibles, el picker sigue siendo un <select> real:
   admite teclado, formularios y validación nativos, con opciones CSS. */
@supports (appearance: base-select) and selector(::picker(select)) {
	select:not([multiple]):not([size]):not(.estado-badge-select) {
		appearance: base-select;
		-webkit-appearance: base-select;
		background-image: none;
		padding-inline-end: .9em;
	}
	select:not([multiple]):not([size])::picker-icon {
		content: '';
		width: .5em;
		height: .5em;
		margin-inline-start: auto;
		padding-inline-start: .7em;
		flex-shrink: 0;
		border-inline-end: 2px solid currentColor;
		border-block-end: 2px solid currentColor;
		transform: rotate(45deg) translateY(-2px);
		color: var(--color-texto-suave);
		transition: transform .18s ease;
	}
	select:not([multiple]):not([size]):open::picker-icon { transform: rotate(225deg) translateY(-2px); }
	select:not([multiple]):not([size])::picker(select) {
		appearance: base-select;
		min-inline-size: max(anchor-size(width), 14.5rem);
		max-inline-size: min(90vw, 32rem);
		max-block-size: min(48vh, 25rem);
		margin-block-start: .35rem;
		padding: .35rem;
		border: var(--campo-borde-px, 1px) solid var(--campo-borde, #dddddd);
		border-radius: calc(var(--campo-radio, 8px) + 3px);
		background: var(--campo-fondo, var(--color-fondo));
		color: var(--color-texto);
		box-shadow: 0 14px 32px color-mix(in srgb, var(--color-texto) 16%, transparent);
		overflow-y: auto;
	}
	select:not([multiple]):not([size]) option {
		display: flex;
		align-items: center;
		gap: .6rem;
		min-block-size: 2.25rem;
		padding: .42rem .7rem;
		font-size: .9rem;
		border-radius: max(4px, calc(var(--campo-radio, 8px) - 3px));
		background: transparent;
		color: var(--color-texto);
		line-height: 1.35;
		white-space: normal;
		cursor: pointer;
	}
	select:not([multiple]):not([size]) option:hover,
	select:not([multiple]):not([size]) option:focus-visible,
	select:not([multiple]):not([size]) option:checked {
		background: var(--color-fondo-suave);
	}
	select:not([multiple]):not([size]) option:checked { font-weight: 700; }
	select:not([multiple]):not([size]) option::checkmark {
		order: 1;
		margin-inline-start: auto;
		color: var(--color-primario);
	}
	select:not([multiple]):not([size]) option:disabled { cursor: not-allowed; opacity: .55; }
	select:not([multiple]):not([size]) optgroup {
		padding: .65rem .75rem .35rem;
		color: var(--color-texto-suave);
		font-size: .8em;
		font-weight: 700;
	}
}

/* ==========================================================================
   Botones
   ========================================================================== */
.btn {
	display: inline-block;
	min-height: var(--boton-altura, 40px);
	padding: 0.4em 1.2em;
	border-radius: var(--boton-radio, var(--radio));
	/* Interlineado entero y par: el texto del botón queda a un número entero de píxeles del borde y no se ve 1 px más arriba o más abajo según la posición en la página (el segundo valor lo ignoran los navegadores que no entienden round()). */
	line-height: var(--interlineado, 1.5);
	line-height: round(up, calc(var(--interlineado, 1.5) * 1em), 2px);
	/* Botones sin borde en el front; admin.css restaura su borde en el panel. */
	border: none;
	background: var(--color-fondo-suave);
	color: var(--color-texto);
	cursor: pointer;
	font-weight: 600;
	transition: transform var(--boton-animacion-duracion, 220ms) ease, filter var(--boton-animacion-duracion, 220ms) ease, box-shadow var(--transicion), background var(--transicion);
}
.btn:not(.btn-primary):hover { background: var(--color-borde); }
.btn:hover { transform: var(--boton-hover-transform, none); filter: var(--boton-hover-filter, none); }
.btn-primary {
	background: var(--color-boton-fondo);
	color: var(--color-boton-texto);
	box-shadow: var(--sombra);
	transition: transform var(--boton-animacion-duracion, 220ms) ease, filter var(--boton-animacion-duracion, 220ms) ease, box-shadow var(--transicion), background var(--transicion), color var(--transicion);
}
.btn-primary:hover {
	background: var(--color-boton-hover-fondo, var(--color-boton-fondo));
	color: var(--color-boton-hover-texto, var(--color-boton-texto));
}
@media (prefers-reduced-motion: reduce) {
    .btn, .btn:hover { transition-duration: 0ms; transform: none; filter: none; }
}

/* ==========================================================================
   Header
   ========================================================================== */
.site-header { position: relative; background: var(--color-menu-fondo); }
.site-header--sticky-escritorio,
.site-header--sticky-movil { z-index: 40; }
@media (min-width: 1025px) {
	.site-header--sticky-escritorio.site-header--sombra-sticky.site-header--desplazado { box-shadow: 0 4px 10px color-mix(in srgb, var(--color-sombra-header) 8%, transparent); }
}
@media (max-width: 1024px) {
	.site-header--sticky-movil.site-header--sombra-sticky.site-header--desplazado { box-shadow: 0 4px 10px color-mix(in srgb, var(--color-sombra-header) 8%, transparent); }
}

.topbar {
	background: var(--color-topbar);
	color: var(--color-topbar-texto);
	display: flex;
	justify-content: center;
	text-align: center;
	font-size: 0.8rem;
	padding: 0.4rem 1rem;
}
.topbar { flex-wrap: wrap; align-items: center; gap: .1rem 1rem; }
.topbar__texto { color: inherit; }
.topbar__enlace { color: inherit; font-weight: 700; text-decoration: underline; text-underline-offset: .2em; }
.topbar__enlace:hover { opacity: .85; }
/* Barra superior en pantallas chicas: una sola línea. El texto largo se reemplaza por la versión corta (`--corto`); sin versión
   corta, el texto se recorta con puntos suspensivos en vez de partirse en varias líneas. */
.topbar__texto--corto { display: none; }
@media (max-width: 600px) {
	.topbar { flex-wrap: nowrap; justify-content: center; gap: .5rem; padding: .35rem .75rem; white-space: nowrap; overflow: hidden; }
	.topbar__texto { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
	.topbar__texto--largo:not(:only-of-type) { display: none; }
	.topbar__texto--corto { display: inline; }
	.topbar__enlace { flex: 0 0 auto; }
}
a.topbar__texto:hover { opacity: 0.85; }

.header-main {
	display: flex;
	align-items: center;
	gap: 1.5rem;
	padding: var(--header-padding-top-movil, 1rem) 1.25rem var(--header-padding-bottom-movil, 1rem);
}
@media (min-width: 1025px) {
	.header-main { padding-top: var(--header-padding-top-escritorio, 1rem); padding-bottom: var(--header-padding-bottom-escritorio, 1rem); }
}

.logo {
	font-weight: 800;
	font-size: 1.4rem;
	color: var(--color-menu-texto);
	white-space: nowrap;
}
/* El alto se fija en línea (min(40px, alto real)) para que el header mida lo mismo antes y después de cargar la imagen:
   con height:auto, mientras el logo no estaba listo el header era ~5 px más bajo y «saltaba». object-fit evita deformarlo
   cuando max-width lo achica (320/375px). */
.logo__imagen { max-height: 40px; width: auto; height: 40px; object-fit: contain; object-position: left center; }

.menu-movil-abrir {
	display: none;
	background: none;
	border: none;
	padding: 0.3rem;
	cursor: pointer;
	color: var(--color-icono-menu, var(--color-menu-texto));
	flex-shrink: 0;
}

.search {
	position: relative;
	flex: 1;
	max-width: 480px;
	margin: 0 auto;
}
.search__barra {
	display: flex;
	height: 38px;
	border: 1px solid var(--buscador-borde, #dddddd);
	border-radius: var(--campo-radio, 999px);
	overflow: hidden;
	background: var(--buscador-fondo, var(--color-fondo));
}
.search input {
	flex: 1;
	min-width: 0;
	border: none;
	padding: 0 1em;
	outline: none;
	background: none;
	font-size: var(--tam-buscador, 1rem);
	color: var(--buscador-texto, var(--color-texto));
}
.search input::placeholder { color: var(--buscador-placeholder, var(--color-texto-suave)); font-size: inherit; font-weight: inherit; }
.search button {
	background: none;
	border: none;
	padding: 0 1em;
	cursor: pointer;
	color: var(--buscador-icono, var(--color-texto-suave));
	display: flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
}

/* Desplegable de sugerencias (buscador.js en app.js) — versión liviana de
   un autocompletado: lista simple, imagen + nombre + precio, sin nada de
   índice de relevancia detrás. */
.search__sugerencias {
	position: absolute;
	z-index: 60;
	top: calc(100% + 0.4rem);
	left: 0;
	right: 0;
	background: var(--color-fondo);
	border: 1px solid var(--color-borde);
	border-radius: var(--radio);
	box-shadow: var(--sombra);
	overflow: hidden;
	max-height: 70vh;
	overflow-y: auto;
}
.search__sugerencia {
	display: flex;
	align-items: center;
	gap: 0.7rem;
	padding: 0.6rem 0.9rem;
	border-bottom: 1px solid var(--color-borde);
	color: var(--color-texto);
}
.search__sugerencia:last-child { border-bottom: none; }
.search__sugerencia:hover { background: var(--color-fondo-suave); }
.search__sugerencia img,
.search__sugerencia-sin-imagen {
	width: 38px;
	height: 38px;
	border-radius: 6px;
	object-fit: cover;
	background: var(--color-fondo-suave);
	flex-shrink: 0;
}
.search__sugerencia-nombre { flex: 1; font-size: 0.88rem; }
.search__sugerencia-precio { font-size: 0.85rem; font-weight: 700; color: var(--color-precio-normal, var(--color-primario-oscuro)); white-space: nowrap; }

/* Sugerencias en dos columnas desde 1025px. El selector más específico supera .search__sugerencia. */
@media (min-width: 1025px) {
	.search__sugerencias:not([hidden]) {
		left: 50%;
		right: auto;
		transform: translateX(-50%);
		width: max(100%, 640px);
		display: grid;
		grid-template-columns: repeat(2, 1fr);
	}
	.search__sugerencia {
		border-bottom: 1px solid var(--color-borde);
		border-right: 1px solid var(--color-borde);
	}
	.search__sugerencia:nth-child(2n) { border-right: none; }
}

.header-actions {
	display: flex;
	align-items: center;
	gap: 0.62rem;
	flex-shrink: 0;
}
.icon-link {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	font-size: 0.7rem;
	gap: 0.2rem;
	color: var(--color-menu-texto);
	opacity: 0.8;
	transition: opacity var(--transicion);
}
.icon-link:hover { opacity: 1; }
.icon-link--cuenta { color: var(--color-icono-cuenta, var(--color-menu-texto)); }
.header-account { position: relative; }
.header-account__trigger { list-style: none; cursor: pointer; }
.header-account__trigger::-webkit-details-marker { display: none; }
.header-account__trigger:focus-visible { outline: 2px solid var(--campo-foco-color, var(--color-primario)); outline-offset: 4px; border-radius: 4px; }
.header-account__panel { position: absolute; z-index: 65; top: calc(100% + .8rem); right: 0; width: min(320px, calc(100vw - 2rem)); padding: 1.25rem; border: 1px solid var(--color-borde); border-radius: 12px; background: var(--color-fondo); color: var(--color-texto); box-shadow: 0 16px 38px color-mix(in srgb, var(--color-sombra) 16%, transparent); }
.header-account__close { position: absolute; top: .55rem; right: .7rem; border: 0; background: transparent; color: var(--color-texto-suave); font-size: 1.4rem; line-height: 1; cursor: pointer; }
.header-account__close:hover { color: var(--color-texto); }
.header-account__title { display: block; margin: 0 1.5rem 1rem 0; font-size: 1.05rem; }
.header-account__link { display: flex; align-items: center; justify-content: center; min-height: var(--boton-altura, 40px); margin-top: .65rem; padding: .4rem .8rem; border: 1px solid var(--color-primario); border-radius: var(--boton-radio, var(--radio)); color: var(--color-primario); text-align: center; font-size: .9rem; font-weight: 600; }
.header-account__link:hover { background: var(--color-fondo-suave); }
.header-account__link--primary { background: var(--color-boton-fondo); color: var(--color-boton-texto); border-color: var(--color-boton-fondo); }
.header-account__link--primary:hover { background: var(--color-boton-hover-fondo, var(--color-primario-oscuro)); color: var(--color-boton-hover-texto, var(--color-boton-texto)); }
.header-account__logout { margin: 0; }
.header-account__logout .header-account__link { width: 100%; background: transparent; border-color: var(--color-borde); color: var(--color-texto); cursor: pointer; }
@media (max-width: 720px) { .header-account__panel { right: -2.5rem; } }
.icon-link--carrito { color: var(--color-icono-carrito, var(--color-menu-texto)); }
.icon-link__icono-envoltura { position: relative; display: inline-flex; }
/* Numerito de cantidad en el ícono del carrito — visible con o sin
   "Mostrar el texto junto a los íconos" prendido (ese es un texto aparte,
   "Carrito (N)"; esto es el badge sobre el ícono mismo). */
.icon-link__badge {
	position: absolute;
	top: -6px;
	right: -8px;
	min-width: 16px;
	height: 16px;
	padding: 0 3px;
	border-radius: 999px;
	background: var(--color-primario);
	color: var(--color-boton-texto);
	font-size: 0.65rem;
	font-weight: 700;
	line-height: 16px;
	text-align: center;
}
.icon-link__badge[hidden] { display: none; }

/* Tamaños de iconos del header configurables por breakpoint desde ThemeCss. */
.header-actions .icon-link svg,
.menu-movil-abrir svg,
.search__barra button svg {
	width: var(--icono-header-tamano, 24px);
	height: var(--icono-header-tamano, 24px);
}

.main-nav { border-top: 1px solid var(--color-borde); background: var(--color-menu-fondo); }
/* El padding horizontal lo aporta .container; conservarlo al espaciar verticalmente el menú. */
.main-nav ul {
	display: flex;
	flex-wrap: wrap;
	row-gap: 0.4rem;
	gap: 1.5rem;
	padding-top: 0.75rem;
	padding-bottom: 0.75rem;
}
.main-nav--alineacion-izquierda > ul { justify-content: flex-start; }
.main-nav--alineacion-derecha > ul { justify-content: flex-end; }
.main-nav a {
	font-weight: var(--menu-fuente-peso-escritorio, 600);
	font-size: var(--menu-fuente-tamano-escritorio, 0.9rem);
	white-space: nowrap;
	color: var(--color-menu-texto);
	transition: background-color var(--transicion), color var(--transicion);
}
.main-nav > ul > li > a {
	display: inline-flex;
	align-items: center;
	gap: .5em;
	padding: .6rem .75rem;
	margin: -.6rem -.75rem;
	border-radius: 10px;
}
.main-nav > ul > li:hover > a,
.main-nav > ul > li:focus-within > a {
	background: var(--color-menu-hover-fondo, #edf4ff);
	color: var(--color-menu-hover-texto, var(--color-primario));
}
/* Borde inferior del nav (siempre presente). */
.main-nav--borde-abajo { border-bottom: 1px solid var(--color-borde); }

/* Cabecera v2: navegación y acciones en una única fila. */
.site-header--v2 .header-main { gap: clamp(1rem, 2.4vw, 2.5rem); }
.site-header--v2 .main-nav--inline {
	flex: 1;
	min-width: 0;
	border: 0;
	background: transparent;
}
.site-header--v2 .main-nav--inline > ul {
	gap: clamp(0.75rem, 1.5vw, 1.5rem);
	padding: 0;
}
.site-header--v2 .header-actions { margin-left: auto; }
.header-v2-search-toggle { border: 0; background: transparent; cursor: pointer; padding: 0; }
.header-v2-search-panel[hidden] { display: none; }
.header-v2-search-panel { position: absolute; z-index: 45; top: 100%; right: 0; left: 0; border-top: 1px solid var(--color-borde); padding: 0.75rem 1.25rem; background: var(--color-menu-fondo); box-shadow: 0 12px 22px color-mix(in srgb, var(--color-sombra-fuerte) 12%, transparent); }
.header-v2-search-panel .search { max-width: 720px; }

.landing-html { padding-top: clamp(2rem, 5vw, 5rem); padding-bottom: clamp(2rem, 5vw, 5rem); }
.landing-html img { max-width: 100%; height: auto; }
.landing-html--interior { padding: .75rem 0 2.25rem; color: var(--color-texto); }
/* Último elemento de la página: el contenedor y el footer ya dejan su espacio; sin esto se sumaban ≈ 160 px bajo la descripción. */
.landing-html--interior:last-child { padding-bottom: 0; }
.landing-html--footer { padding-top: clamp(1.5rem, 4vw, 3.5rem); padding-bottom: clamp(1.5rem, 4vw, 3.5rem); }
/* Bloques junto a los botones de compra (ficha y carrito): viven dentro de la columna, sin el aire de una sección. */
.landing-html--bajo-comprar, .landing-html--bajo-finalizar { padding: 0; }
.site-footer.landing-html--global { padding: var(--footer-relleno-superior, clamp(2.5rem, 5vw, 4rem)) 0 0; }
/* Footer HTML de la tienda: variante oscura (CTA + 5 columnas + garantías + barra legal). Las variables se
   redefinen solo dentro del bloque, así el resto del sitio conserva su paleta. */
.site-footer.landing-html--global:has(.landing-footer-demo--oscuro) { background: var(--footer-demo-fondo, #0f1a2b); }
/* Línea superior del footer: más marcada que el borde de adentro para separarlo de la página cuando el fondo es claro (se mezcla el título con el fondo, así sigue cualquier combinación del Theme editor). */
.site-footer.landing-html--global:has(.landing-footer-demo--oscuro) { border-top: 1px solid color-mix(in srgb, var(--footer-demo-titulo, #ffffff) 22%, var(--footer-demo-fondo, #0f1a2b)); }
.landing-footer-demo { --fd-linea-fuerte: color-mix(in srgb, var(--color-texto) 24%, transparent); display: grid; grid-template-columns: minmax(0, 1.5fr) repeat(3, minmax(0, 1fr)) minmax(0, 1.25fr); --fd-gap-y: clamp(1.5rem, 3vw, 2.75rem); gap: var(--fd-gap-y) clamp(1.25rem, 3vw, 2.5rem); color: var(--color-footer-texto); }
.landing-footer-demo--oscuro { --color-footer-texto: var(--footer-demo-texto, #a9b6c8); --color-texto: var(--footer-demo-titulo, #ffffff); --color-borde: var(--footer-demo-borde, #27334a); --fd-acento: var(--footer-demo-acento, color-mix(in srgb, var(--color-primario) 55%, var(--footer-demo-titulo, #ffffff))); --fd-linea-fuerte: color-mix(in srgb, var(--footer-demo-titulo, #ffffff) 30%, transparent); }
.landing-footer-demo__intro { grid-column: 1 / -1; display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 1.5rem 2rem; padding-bottom: clamp(1.6rem, 3.5vw, 2.6rem); border-bottom: 1px solid var(--color-borde); }
.landing-footer-demo__intro > div:first-child { display: grid; gap: .55rem; max-width: 640px; }
/* Solo la etiqueta superior: el selector anterior (`span` a secas) también pintaba la flecha de los botones con el color de acento y la dejaba invisible sobre el botón. */
.landing-footer-demo__intro > div:first-child > span { color: var(--fd-acento, var(--color-footer-texto)); font-size: .72rem; font-weight: 800; letter-spacing: .14em; }
.landing-footer-demo__intro strong { color: var(--color-texto); font-size: clamp(1.6rem, 3vw, 2.6rem); line-height: 1.1; letter-spacing: -.03em; }
.landing-footer-demo .landing-footer-demo__intro p { max-width: 58ch; margin: 0; }
.landing-footer-demo__acciones { display: flex; flex-wrap: wrap; align-items: center; gap: .75rem; flex: 0 0 auto; }
.landing-footer-demo a.landing-footer-demo__boton { display: inline-flex; align-items: center; justify-content: center; gap: .5rem; min-height: 46px; padding: .6rem 1.35rem; white-space: nowrap; border: 1px solid var(--color-primario); border-radius: var(--boton-radio, 999px); background: var(--color-primario); color: var(--color-boton-texto, #fff); font-size: .88rem; font-weight: 700; text-decoration: none; transition: transform .15s ease, background .15s ease; }
.landing-footer-demo a.landing-footer-demo__boton:hover { opacity: 1; transform: translateY(-1px); }
.landing-footer-demo a.landing-footer-demo__boton--sec { background: transparent; border-color: var(--fd-linea-fuerte); color: var(--color-texto); }
.landing-footer-demo a.landing-footer-demo__boton--sec:hover { border-color: var(--color-texto); }
.landing-footer-demo--compact { grid-template-columns: minmax(0, 1.6fr) repeat(3, minmax(0, 1fr)); }
.landing-footer-demo__logo { display: inline-block; max-width: 190px; margin-bottom: .9rem; font-size: 1.3rem; font-weight: 700; color: var(--color-texto); }
.landing-footer-demo__logo img { width: 100%; height: auto; }
.landing-footer-demo__logo--caja { padding: .55rem .9rem; border-radius: 12px; background: var(--footer-demo-logo-fondo, #ffffff); color: var(--color-primario); }
.landing-footer-demo--oscuro .landing-footer-demo__logo:not(:has(img)) { color: var(--color-texto); }
.landing-footer-demo h4,
.landing-footer-demo p.landing-footer-demo__titulo { margin: .2rem 0 1rem; color: var(--color-texto); font-size: .74rem; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; }
.landing-footer-demo p { max-width: 35ch; margin: 0 0 1rem; font-size: .92rem; line-height: 1.65; }
.landing-footer-demo ul { display: grid; gap: .55rem; margin: 0; padding: 0; list-style: none; font-size: .9rem; line-height: 1.6; }
.landing-footer-demo a { color: inherit; text-decoration: none; transition: color .15s ease; }
.landing-footer-demo a:hover { color: var(--color-texto); opacity: 1; }
.landing-footer-demo__marca > a:last-child:not(.landing-footer-demo__logo) { font-size: .9rem; font-weight: 700; text-decoration: underline; text-underline-offset: .2em; }
.landing-footer-demo__datos li { padding-bottom: .55rem; }
.landing-footer-demo__datos li:last-child { padding-bottom: 0; }
.landing-footer-demo__datos a { color: var(--color-texto); }
.landing-footer-demo .landing-social { margin-top: 1.1rem; }
.landing-social .footer-redes,
.landing-footer-demo .landing-social .footer-redes { display: flex; flex-wrap: wrap; align-items: center; gap: .6rem; list-style: none; margin: 0; padding: 0; }
.landing-footer-demo .landing-social .footer-redes a { text-decoration: none; }
.landing-footer-demo ul.landing-footer-demo__garantias { --fd-pad: clamp(1.25rem, 3vw, 2rem); grid-column: 1 / -1; display: flex; flex-wrap: wrap; align-items: center; gap: .6rem 2rem; padding-top: var(--fd-pad); margin-bottom: calc(var(--fd-pad) - var(--fd-gap-y) - .25rem); border-top: 1px solid var(--color-borde); }
.landing-footer-demo__garantias li { display: inline-flex; align-items: center; gap: .55rem; padding: 0; border: 0; background: none; border-radius: 0; font-size: .85rem; font-weight: 500; }
.landing-footer-demo--oscuro .landing-footer-demo__garantias li { background: none; }
.landing-footer-demo--oscuro p.landing-footer-demo__titulo { color: var(--fd-acento, var(--color-texto)); }
/* Beneficios del pie: texto simple con una marca de verificación (no son botones). */
.landing-footer-demo__garantias li::before { content: ""; flex: none; width: .4rem; height: .7rem; margin: -.1rem .15rem 0 .25rem; border-right: 2px solid var(--fd-acento, var(--color-primario)); border-bottom: 2px solid var(--fd-acento, var(--color-primario)); transform: rotate(40deg); }
.landing-footer-demo__bottom { grid-column: 1 / -1; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .75rem 1.5rem; margin-top: .25rem; padding: 1.15rem 0 1.4rem; border-top: 1px solid var(--color-borde); font-size: .8rem; }
.landing-footer-demo__legal { display: inline-flex; flex-wrap: wrap; gap: 1.25rem; }
@media (max-width: 1024px) {
	.landing-footer-demo { grid-template-columns: repeat(3, minmax(0, 1fr)); }
	.landing-footer-demo__marca { grid-column: 1 / -1; }
	.landing-footer-demo__contacto { grid-column: span 3; }
}
@media (max-width: 680px) {
	.landing-footer-demo { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.landing-footer-demo__intro { align-items: flex-start; flex-direction: column; }
	.landing-footer-demo__acciones { width: 100%; }
	.landing-footer-demo a.landing-footer-demo__boton { flex: 1 1 140px; }
	.landing-footer-demo__contacto { grid-column: 1 / -1; }
}
@media (max-width: 340px) {
	.landing-footer-demo { grid-template-columns: 1fr; }
	.landing-footer-demo__marca, .landing-footer-demo__contacto { grid-column: auto; }
}
.editorial-story { --story-tint: var(--historia-base-fondo, #e9f2f1); --story-accent: var(--historia-base-acento, #235d59); margin: 0; padding: clamp(1.5rem, 4vw, 3.4rem); border: 1px solid var(--color-borde); border-radius: 22px; background: linear-gradient(125deg, var(--story-tint), var(--color-fondo) 72%); }
.editorial-story--warm { --story-tint: var(--historia-calida-fondo, #f6eee6); --story-accent: var(--historia-calida-acento, #8a4e2d); }
.editorial-story--sage { --story-tint: var(--historia-salvia-fondo, #edf3eb); --story-accent: var(--historia-salvia-acento, #43654a); }
.editorial-story--sky { --story-tint: var(--historia-cielo-fondo, #eaf2f8); --story-accent: var(--historia-cielo-acento, #315f7a); }
.editorial-story--sand { --story-tint: var(--historia-arena-fondo, #f4f0e7); --story-accent: var(--historia-arena-acento, #72603a); }
.editorial-story__top { display: grid; grid-template-columns: minmax(0, 1.55fr) minmax(180px, .75fr); align-items: end; gap: clamp(1rem, 4vw, 3rem); }
.editorial-story__eyebrow { display: block; margin: 0 0 .85rem; color: var(--story-accent); font-size: .76rem; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; }
.editorial-story h2 { max-width: 18ch; margin: 0 0 .65rem; font-size: clamp(1.7rem, 3.2vw, 2.7rem); line-height: 1.12; letter-spacing: -.035em; }
.editorial-story__lead { max-width: 65ch; margin: 0; color: var(--color-texto-suave); font-size: 1.05rem; line-height: 1.65; }
.editorial-story__aside { margin: 0; padding: 1.2rem 1.35rem; border-left: 3px solid var(--story-accent); color: var(--color-texto); font-weight: 600; line-height: 1.55; }
.editorial-story__facts { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .75rem; margin-top: 2rem; padding: 0; list-style: none; }
.editorial-story__facts li { min-width: 0; padding: 1rem 1.1rem; border: 1px solid var(--color-borde); border-radius: 12px; background: var(--color-fondo); }
.editorial-story__facts strong { display: block; color: var(--story-accent); font-size: .9rem; }
.editorial-story__facts span { display: block; margin-top: .3rem; color: var(--color-texto-suave); font-size: .84rem; line-height: 1.45; }
.editorial-story__links { display: flex; flex-wrap: wrap; gap: .65rem; margin-top: 1.6rem; }
.editorial-story__links a { display: inline-flex; align-items: center; gap: .35rem; padding: .55rem .85rem; border: 1px solid var(--story-accent); border-radius: var(--boton-radio, 999px); color: var(--story-accent); font-size: .84rem; font-weight: 700; }
.editorial-story__links a:hover { background: var(--story-accent); color: var(--color-boton-texto); }
.editorial-story--categoria { padding: clamp(1.4rem, 3vw, 2.4rem); }
.editorial-story--categoria h2 { font-size: clamp(1.55rem, 2.7vw, 2.25rem); }
.atributo-color { display: inline-block; width: .95rem; height: .95rem; margin-right: .45rem; vertical-align: -.1rem; border: 1px solid color-mix(in srgb, var(--color-muestra-borde) 15%, transparent); border-radius: 50%; }
@media (max-width: 680px) {
	.editorial-story__top { grid-template-columns: 1fr; }
	.editorial-story__aside { padding: .3rem 0 .3rem 1rem; }
	.editorial-story__facts { grid-template-columns: 1fr; margin-top: 1.35rem; }
}

/* Portada editorial de landing-html: estructura CSS, sin carruseles ni controles JS. */
.landing-html--home { padding: 0; }
.landing-home { color: var(--editorial-texto, #172337); background: var(--color-fondo, #fff); }
.landing-home__hero-wrap { padding-top: clamp(4px, .7vw, 10px); }
.landing-home__hero { display: grid; grid-template-columns: 1fr 0.94fr; min-height: 470px; background: var(--editorial-hero-fondo, #edf2f4); overflow: hidden; border-radius: 16px; }
.landing-home__hero-copy { display: flex; flex-direction: column; align-items: flex-start; justify-content: center; padding: clamp(34px, 5vw, 62px); }
.landing-home__eyebrow { display: block; margin-bottom: 18px; color: var(--editorial-etiqueta, #536b79); font-size: .78rem; font-weight: 800; letter-spacing: .16em; text-transform: uppercase; }
.landing-home__hero h1 { max-width: 620px; margin: 0 0 25px; font-size: clamp(2.7rem, 4vw, 4.1rem); line-height: 1.05; letter-spacing: -.055em; color: var(--editorial-titulo, #142838); }
.landing-home__hero p { max-width: 490px; margin: 0; color: var(--editorial-texto-suave, #526473); font-size: clamp(1rem, 1.3vw, 1.17rem); line-height: 1.65; }
.landing-home__hero-actions { display: flex; align-items: center; flex-wrap: wrap; gap: 26px; margin-top: 28px; }
.landing-home__button { display: inline-flex; justify-content: space-between; align-items: center; gap: 30px; min-height: 50px; padding: 12px 20px; color: var(--editorial-boton-texto, #fff); background: var(--editorial-boton-fondo, #123449); border-radius: var(--boton-radio, 7px); font-weight: 700; text-decoration: none; transition: background .18s ease, transform var(--boton-animacion-duracion, 220ms) ease, filter var(--boton-animacion-duracion, 220ms) ease; }
.landing-home__button:hover { background: var(--editorial-boton-hover, #205671); color: var(--editorial-boton-texto, #fff); transform: var(--boton-hover-transform, none); filter: var(--boton-hover-filter, none); }
.landing-home__text-link { color: var(--editorial-enlace, #17394b); font-weight: 700; text-decoration: none; border-bottom: 1px solid var(--editorial-acento, #829da8); padding: 5px 0; }
.landing-home__hero-note { margin-top: 34px; font-size: .8rem; color: var(--editorial-texto-suave, #5b7180); }
.landing-home__hero-visual { position: relative; display: block; min-height: 470px; overflow: hidden; background: var(--editorial-imagen-fondo, #e5e2dc); }
.landing-home__hero-visual picture, .landing-home__hero-visual img { display: block; width: 100%; height: 100%; }
.landing-home__hero-visual img { object-fit: cover; }
.landing-home__hero-caption { position: absolute; right: 24px; bottom: 24px; display: flex; flex-direction: column; gap: 2px; padding: 15px 20px; min-width: 205px; color: var(--editorial-texto, #213044); background: color-mix(in srgb, var(--color-flotante) 90%, transparent); backdrop-filter: blur(8px); border-radius: 6px; }
.landing-home__hero-caption small { color: var(--editorial-texto-suave, #63707b); }
.landing-home__assurance-wrap { padding-top: 18px; }
.landing-home__assurance { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); border: 1px solid var(--color-borde, #e4e9ec); border-radius: 18px; background: var(--editorial-seccion-fondo, #f7f9fa); overflow: hidden; }
.landing-home__assurance-item { display: flex; align-items: center; gap: 14px; min-width: 0; padding: 20px clamp(18px, 2.4vw, 30px); }
.landing-home__assurance-item + .landing-home__assurance-item { border-left: 1px solid var(--color-borde, #e4e9ec); }
.landing-home__assurance-icono { flex: 0 0 auto; display: grid; place-items: center; width: 46px; height: 46px; border-radius: 50%; color: var(--color-primario); background: color-mix(in srgb, var(--color-primario) 13%, var(--color-fondo, #fff)); }
.landing-home__assurance-icono svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; }
.landing-home__assurance-item strong { display: block; color: var(--editorial-titulo, #142838); font-size: .95rem; line-height: 1.25; letter-spacing: -.01em; }
.landing-home__assurance-item small { display: block; margin-top: 2px; color: var(--editorial-texto-suave, #526473); font-size: .8rem; line-height: 1.4; }
.landing-home__section { padding-top: clamp(58px, 7vw, 104px); padding-bottom: clamp(60px, 7vw, 108px); }
.landing-home__section-heading { display: flex; justify-content: space-between; align-items: end; gap: 34px; margin-bottom: 34px; }
.landing-home__section-heading .landing-home__eyebrow { margin-bottom: 12px; }
.landing-home__section-heading h2, .landing-home__closing h2 { margin: 0; font-size: clamp(2rem, 3vw, 3.1rem); line-height: 1.12; letter-spacing: -.045em; color: var(--editorial-titulo, #152b3a); }
.landing-home__section-heading p { max-width: 330px; margin: 0; color: var(--editorial-texto-suave, #637480); line-height: 1.55; }
.landing-home__categorias { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 18px; }
.landing-home__categorias .categoria-card { min-width: 0; }
.landing-home__banda-wrap { margin-top: clamp(28px, 4vw, 48px); }
.landing-home__banda { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 1.1rem 2rem; padding: clamp(1.4rem, 3vw, 2.2rem) clamp(1.4rem, 4vw, 3rem); border-radius: 16px; background: var(--editorial-banda-fondo, #e8edf1); color: var(--editorial-banda-texto, #152b3a); }
.landing-home__banda h2 { margin: 0 0 .3rem; color: inherit; font-size: clamp(1.35rem, 2.4vw, 2rem); line-height: 1.15; letter-spacing: -.03em; }
.landing-home__banda p { margin: 0; color: inherit; opacity: .82; line-height: 1.55; }
.landing-home__banda .landing-home__button { flex: 0 0 auto; }
.landing-home__section--productos { background: var(--editorial-seccion-fondo, #f5f7f7); }
.landing-home__productos { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 24px; }
.landing-home__productos .producto-card { min-width: 0; }
.landing-home__spotlight-wrap { margin-top: clamp(54px, 7vw, 100px); margin-bottom: clamp(54px, 7vw, 100px); }
.landing-home__spotlight { display: grid; grid-template-columns: minmax(0, .95fr) minmax(0, 1.05fr); align-items: stretch; overflow: hidden; border-radius: 16px; background: var(--editorial-hero-fondo, #edf2f4); }
.landing-home__spotlight-visual { display: block; min-height: 390px; overflow: hidden; background: var(--editorial-imagen-fondo, #e5e2dc); }
.landing-home__spotlight-visual picture, .landing-home__spotlight-visual img { display: block; width: 100%; height: 100%; }
.landing-home__spotlight-visual img { object-fit: cover; }
.landing-home__spotlight-copy { display: flex; flex-direction: column; align-items: flex-start; justify-content: center; padding: clamp(34px, 5vw, 74px); }
.landing-home__spotlight-copy h2 { max-width: 15ch; margin: 0 0 .7em; color: var(--editorial-titulo, #152b3a); font-size: clamp(2rem, 3.4vw, 3.5rem); line-height: 1.12; letter-spacing: -.045em; }
.landing-home__spotlight-copy p { max-width: 48ch; margin: 0 0 1.6rem; color: var(--editorial-texto-suave, #637480); font-size: 1.03rem; line-height: 1.65; }
.landing-home__guide { padding-top: clamp(56px, 7vw, 94px); padding-bottom: clamp(58px, 7vw, 98px); background: var(--editorial-seccion-fondo, #f5f7f7); }
.landing-home__guide-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; }
.landing-home__guide-grid article { display: flex; flex-direction: column; min-height: 230px; padding: clamp(23px, 3vw, 35px); border: 1px solid var(--color-borde); border-radius: 12px; background: var(--color-fondo); }
.landing-home__guide-grid article > span { margin-bottom: 1.3rem; color: var(--editorial-acento, #8da7b4); font-size: .76rem; font-weight: 800; letter-spacing: .1em; }
.landing-home__guide-grid h3 { margin: 0 0 .55rem; color: var(--editorial-titulo, #152b3a); font-size: clamp(1.15rem, 1.7vw, 1.45rem); }
.landing-home__guide-grid p { margin: 0 0 1.1rem; color: var(--editorial-texto-suave, #637480); line-height: 1.6; }
.landing-home__guide-grid a { margin-top: auto; color: var(--editorial-enlace, #17394b); font-size: .88rem; font-weight: 700; text-decoration: underline; text-underline-offset: .25em; }
.landing-home__closing { display: flex; justify-content: space-between; align-items: center; gap: 30px; margin-top: 64px; margin-bottom: 64px; padding: clamp(36px, 5vw, 68px); border-radius: 14px; background: var(--editorial-cierre-fondo, #15394c); }
.landing-home__closing .landing-home__eyebrow { color: var(--editorial-cierre-texto-suave, var(--editorial-cierre-texto, #a9c6d2)); }
.landing-home__closing h2 { max-width: 540px; color: var(--editorial-cierre-texto, #fff); }
.landing-home__button--light { flex: 0 0 auto; color: var(--editorial-cierre-fondo, #15394c); background: var(--editorial-cierre-texto, #fff); }
@media (prefers-reduced-motion: reduce) { .landing-home__button, .landing-home__button:hover { transition-duration: 0ms; transform: none; filter: none; } }
.landing-home__button--light:hover { color: var(--editorial-cierre-fondo, #15394c); background: color-mix(in srgb, var(--editorial-cierre-texto, #fff) 88%, var(--editorial-cierre-fondo, #15394c)); }
@media (max-width: 900px) {
  .landing-home__hero { grid-template-columns: 1fr; }
  .landing-home__hero-copy { padding: 42px 30px; }
  .landing-home__hero-visual { min-height: 360px; max-height: 480px; }
  .landing-home__assurance { grid-template-columns: 1fr; }
  .landing-home__assurance-item { padding: 14px 18px; }
  .landing-home__assurance-item + .landing-home__assurance-item { border-left: 0; border-top: 1px solid var(--color-borde, #e4e9ec); }
  .landing-home__categorias { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .landing-home__productos { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.25rem; }
  .landing-home__section-heading { display: block; }
  .landing-home__section-heading p { margin-top: 16px; }
  .landing-home__spotlight { grid-template-columns: 1fr; }
  .landing-home__spotlight-visual { min-height: 300px; max-height: 420px; }
  .landing-home__guide-grid { grid-template-columns: 1fr; }
  .landing-home__guide-grid article { min-height: 0; }
  .landing-home__closing { display: block; }
  .landing-home__closing .landing-home__button { margin-top: 30px; }
}
@media (max-width: 440px) {
  .landing-home__hero-wrap { padding-inline: 12px; }
  .landing-home__hero h1 { font-size: 2.45rem; }
  .landing-home__hero-visual { min-height: 310px; }
  .landing-home__hero-note { margin-top: 32px; }
  .landing-home__categorias { gap: 10px; }
}
.resenas { margin: 3rem 0; padding-top: 2.25rem; border-top: 1px solid var(--color-borde); scroll-margin-top: 7.5rem; }
/* Tras las pestañas o la ficha técnica, la línea superior de reseñas se leía como una pestaña vacía. */
.producto-tabs + .resenas, .ficha-tecnica + .resenas { margin-top: 2.5rem; padding-top: 0; border-top: 0; }
.resenas__cabecera { margin-bottom: 2rem; }
.resenas__cabecera h2 { margin: 0; font-size: clamp(1.65rem, 2.6vw, 2.2rem); }
.resenas__grid { display: grid; grid-template-columns: minmax(220px, 280px) minmax(0, 1fr); gap: clamp(2rem, 4vw, 4rem); align-items: start; }
.resenas__estadisticas, .resenas__contenido { min-width: 0; }
.resenas__balance { display: flex; align-items: center; gap: .85rem; margin-bottom: 1rem; }
.resenas__promedio { color: var(--color-texto); font-size: clamp(3.1rem, 5vw, 4rem); font-weight: 700; letter-spacing: -.055em; line-height: 1; }
.resenas__balance-detalle { display: grid; gap: .15rem; color: var(--color-texto-suave); font-size: .83rem; line-height: 1.3; }
.resenas__balance-detalle .resenas-estrellas { font-size: 18px; }
.resenas__distribucion { display: grid; gap: .4rem; }
.resenas__fila { display: grid; grid-template-columns: 1rem 1rem minmax(0, 1fr) 1.35rem; align-items: center; gap: .35rem; color: var(--color-texto); font-size: .85rem; line-height: 1.1; }
.resenas__fila-numero { font-weight: 700; }
.resenas__fila-estrella { color: var(--color-valoracion, #0b69f6); font-size: 1rem; }
.resenas__fila-total { color: var(--color-texto-suave); text-align: right; }
.resenas__barra { height: .45rem; overflow: hidden; border-radius: 999px; background: var(--color-borde); }
.resenas__barra > span { display: block; height: 100%; border-radius: inherit; background: var(--color-texto); }
.resenas__sin-resumen { margin: .2rem 0 .7rem; color: var(--color-texto-suave); }
.resenas-estrellas { display: inline-block; position: relative; flex: none; color: var(--color-valoracion-vacia, #e4ebf3); font: 20px/1 Arial, sans-serif; letter-spacing: .025em; white-space: nowrap; vertical-align: middle; }
.resenas-estrellas__base { display: block; }
.resenas-estrellas__relleno { position: absolute; inset: 0 auto auto 0; overflow: hidden; color: var(--color-valoracion, #0b69f6); white-space: nowrap; }
.resenas-card { display: flex; align-items: center; gap: .4rem; margin: .2rem .75rem .45rem; min-height: 20px; color: var(--color-texto-suave); }
.producto-card__precio + .resenas-card { margin-top: -.5rem; }
.resenas-card .resenas-estrellas { font-size: 16px; }
.resenas-card small { font-size: .76rem; }
.resenas-ficha { display: inline-flex; align-items: center; gap: .65rem; margin: 0 0 1rem; color: var(--color-texto-suave); font-size: .9rem; text-decoration: none; }
.resenas-ficha:hover { color: var(--color-primario); }
.resenas-ficha:focus-visible { outline: 2px solid var(--campo-foco-color, var(--color-primario)); outline-offset: 3px; }
.resenas__toolbar { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: .85rem; margin-bottom: 1.5rem; }
.resenas__orden { position: relative; order: 1; }
.resenas__orden summary { display: inline-flex; align-items: center; justify-content: space-between; gap: .8rem; min-height: var(--campo-altura, 40px); padding: .55rem .85rem; border: var(--campo-borde-px, 1px) solid var(--campo-borde, #dddddd); border-radius: var(--campo-radio, 8px); background: var(--campo-fondo, var(--color-fondo)); color: var(--color-texto); cursor: pointer; list-style: none; box-shadow: 0 1px 2px color-mix(in srgb, var(--color-sombra) 4.5%, transparent); transition: border-color .18s ease, box-shadow .18s ease; }
.resenas__orden summary:hover, .resenas__orden[open] summary { border-color: color-mix(in srgb, var(--campo-borde, #dddddd) 70%, var(--campo-foco-borde, var(--color-primario))); box-shadow: 0 2px 7px color-mix(in srgb, var(--color-sombra) 9%, transparent); }
.resenas__orden summary::-webkit-details-marker, .resenas__formulario summary::-webkit-details-marker { display: none; }
.resenas__flecha { width: .45rem; height: .45rem; border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor; transform: rotate(45deg) translateY(-2px); }
.resenas__orden[open] .resenas__flecha { transform: rotate(225deg) translateY(-2px); }
.resenas__orden-opciones { position: absolute; z-index: 5; top: calc(100% + .35rem); left: 0; min-width: 100%; width: max-content; max-width: min(85vw, 240px); padding: .35rem; border: var(--campo-borde-px, 1px) solid var(--campo-borde, #dddddd); border-radius: calc(var(--campo-radio, 8px) + 3px); background: var(--campo-fondo, var(--color-fondo)); box-shadow: 0 14px 32px color-mix(in srgb, var(--color-texto) 16%, transparent); }
.resenas__orden-opciones a { display: flex; align-items: center; justify-content: space-between; gap: .6rem; min-height: 2.25rem; padding: .42rem .7rem; border-radius: max(4px, calc(var(--campo-radio, 8px) - 3px)); color: var(--color-texto); text-decoration: none; white-space: nowrap; font-size: .9rem; }
.resenas__orden-opciones a[aria-current="true"]::after { content: '✓'; color: var(--color-primario); }
.resenas__orden-opciones a:hover, .resenas__orden-opciones a[aria-current="true"] { background: var(--color-fondo-suave); }
.resenas__orden-opciones a[aria-current="true"] { font-weight: 700; }
.resenas__orden summary:focus-visible, .resenas__formulario summary:focus-visible { outline: none; border-color: var(--campo-foco-borde, var(--color-primario)); }
.resenas__orden-opciones a:focus-visible { outline: 2px solid var(--campo-foco-borde, var(--color-primario)); outline-offset: 2px; }
.resenas__formulario { order: 2; margin-left: auto; }
.resenas__formulario[open] { flex-basis: 100%; }
.resenas__formulario summary.resenas__abrir { display: flex; align-items: center; justify-content: center; width: fit-content; min-height: var(--boton-altura, 40px); margin-left: auto; padding: .55rem 1rem; border-radius: var(--boton-radio, var(--radio)); background: var(--resenas-boton-fondo, var(--color-texto)); color: var(--resenas-boton-texto, var(--color-fondo)); font-weight: 700; cursor: pointer; list-style: none; }
.resenas__formulario summary.resenas__abrir:hover { background: var(--color-primario); color: var(--resenas-boton-texto, var(--color-fondo)); }
.resenas__formulario form { display: grid; gap: 1rem; padding: 1.25rem; margin-top: 1rem; border: 1px solid var(--color-borde); border-radius: var(--radio); background: var(--resenas-tarjeta-fondo, var(--color-fondo)); color: var(--resenas-tarjeta-texto, var(--color-texto)); }
.resenas__formulario label { display: grid; gap: .35rem; font-weight: 600; }
.resenas__formulario input, .resenas__formulario select, .resenas__formulario textarea { width: 100%; font-weight: 400; padding: .7rem; border: var(--campo-borde-px, 1px) solid var(--campo-borde, #dddddd); border-radius: var(--campo-radio, 8px); background-color: var(--campo-fondo, var(--color-fondo)); color: var(--color-texto); }
.resenas__formulario .vc-select__trigger { font-weight: 400; }
.resenas__formulario form > p { margin: 0; color: var(--color-texto-suave); font-size: .85rem; }
.resenas__formulario form > button { justify-self: start; }
.resenas__campos { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; }
.resenas__lista { display: grid; gap: 1rem; }
.resenas__opinion { padding: 1.35rem 1.45rem; border: 1px solid var(--color-borde); border-radius: var(--radio); background: var(--resenas-tarjeta-fondo, var(--color-fondo)); color: var(--resenas-tarjeta-texto, var(--color-texto)); }
.resenas__opinion-cabecera { display: flex; align-items: flex-start; justify-content: space-between; gap: 1rem; }
.resenas__opinion-cabecera strong { display: block; color: var(--resenas-tarjeta-texto, var(--color-texto)); font-size: .95rem; }
.resenas__opinion-cabecera time { display: block; margin-top: .2rem; color: var(--color-texto-suave); font-size: .8rem; }
.resenas__opinion-cabecera .resenas-estrellas { font-size: 18px; }
.resenas__opinion h3 { margin: .85rem 0 .25rem; font-size: .98rem; }
.resenas__opinion p { margin: .7rem 0 0; line-height: 1.55; overflow-wrap: anywhere; }
.resenas__nota-demo { margin: 0 0 1rem; color: var(--color-texto-suave); font-size: .82rem; }
.resenas__demo { display: inline-block; margin-top: .85rem; padding: .18rem .5rem; border: 1px solid var(--color-borde); border-radius: 999px; color: var(--color-texto-suave); font-size: .72rem; font-weight: 700; }
.resenas__vacio { margin: 0; color: var(--color-texto-suave); }
.resenas__mensaje { margin: 0 0 1.5rem; padding: 1rem; border-radius: var(--radio); background: var(--color-fondo-suave); }
.resenas__trampa { position: absolute; left: -9999px; }
@media (max-width: 800px) { .resenas__grid { grid-template-columns: 1fr; gap: 1.75rem; } .resenas__estadisticas { max-width: 380px; } }
@media (max-width: 600px) { .resenas__cabecera { margin-bottom: 1.5rem; } .resenas__campos { grid-template-columns: 1fr; } .resenas__opinion { padding: 1rem; } }
@media (max-width: 420px) { .resenas__toolbar { display: grid; grid-template-columns: 1fr; } .resenas__orden, .resenas__formulario { width: 100%; margin-left: 0; } .resenas__orden summary, .resenas__formulario summary.resenas__abrir { width: 100%; margin-left: 0; } .resenas__orden-opciones { position: static; width: 100%; max-width: none; margin-top: .35rem; box-shadow: none; } }
/* El botón "Escribir una reseña" queda fijo arriba a la derecha: antes, al abrir el formulario, el <details>
   pasaba a ocupar toda la fila (flex-basis:100%) y el botón saltaba debajo del selector de orden. Ahora el
   <details> siempre ocupa su propia fila y solo el botón se ancla en la fila de arriba. */
@media (min-width: 421px) {
	.resenas__toolbar { position: relative; min-height: var(--boton-altura, 40px); }
	.resenas__formulario, .resenas__formulario[open] { flex-basis: 100%; margin: calc(-.85rem) 0 0; }
	/* Abierto, el formulario baja bajo el botón anclado arriba; si hay selector de orden, ese ya ocupa la fila de arriba. */
	.resenas__formulario[open] { margin-top: calc(var(--boton-altura, 40px) + .85rem); }
	.resenas__orden ~ .resenas__formulario[open] { margin-top: 0; }
	.resenas__formulario summary.resenas__abrir { position: absolute; top: 0; right: 0; margin: 0; }
}

/* Submenús CSS: cada nivel abre con :hover o :focus-within del padre. */
.main-nav ul li { position: relative; }
.main-nav__item--con-hijos > a::after {
	content: "";
	display: block;
	flex: none;
	width: 6px;
	height: 6px;
	border-right: 1.5px solid currentColor;
	border-bottom: 1.5px solid currentColor;
	transform: translateY(-2px) rotate(45deg);
	opacity: .85;
}
/* Dentro de un submenú, la flecha apunta al flyout lateral y reserva espacio a la derecha. */
.main-nav .main-nav__submenu .main-nav__item--con-hijos > a {
	position: relative;
	padding-right: 2.2rem;
}
.main-nav .main-nav__submenu .main-nav__item--con-hijos > a::after {
	position: absolute;
	top: 50%;
	right: .9rem;
	margin: 0;
	transform: translateY(-50%) rotate(-45deg);
}
/* Submenú: tarjeta flotante bajo la píldora del ítem, con sombra suave y una animación corta (sube 5 px mientras aparece).
   El selector compuesto supera .main-nav ul. visibility impide enfocar enlaces del submenú cerrado. */
.main-nav .main-nav__submenu {
	display: flex;
	flex-direction: column;
	position: absolute;
	/* La píldora del ítem sobresale .6rem bajo su caja: el submenú queda 6 px debajo de la píldora. */
	top: calc(100% + .6rem + 6px);
	left: 0;
	min-width: 218px;
	background: var(--main-nav-nivel2-fondo, var(--color-menu-fondo));
	border: 0;
	border-radius: var(--submenu-radio, 10px);
	box-shadow: 0 16px 36px color-mix(in srgb, var(--color-sombra, #0f172a) 14%, transparent);
	padding: 6px;
	margin: 0;
	gap: 0;
	z-index: 50; /* por encima del panel de búsqueda del header (45) */
	isolation: isolate;
	opacity: 0;
	visibility: hidden;
	pointer-events: none;
	transform: translateY(5px);
	/* Al salir espera 120 ms: cruzar en diagonal hacia el submenú no lo cierra. */
	transition: visibility .18s .12s, opacity .18s .12s, transform .18s .12s;
}
/* Puente invisible entre el ítem y el submenú: el puntero no «cae» al cruzar el espacio. */
.main-nav .main-nav__submenu::before { content: ""; position: absolute; inset: -10px; z-index: -1; }
.main-nav__item--con-hijos:hover > .main-nav__submenu,
.main-nav__item--con-hijos:focus-within > .main-nav__submenu {
	opacity: 1;
	visibility: visible;
	pointer-events: auto;
	transform: translateY(0);
	transition-delay: 0s;
}
/* Los flyouts usan el origen superior izquierdo y el transform del menú padre. */
@media (prefers-reduced-motion: reduce) {
	.main-nav .main-nav__submenu { transition: none !important; transform: none !important; }
}
.main-nav__submenu li { width: 100%; }
.main-nav__submenu a {
	display: block;
	padding: 9px 14px;
	border-radius: 8px;
	font-size: var(--submenu-fuente-tamano, .94rem);
	font-weight: var(--submenu-fuente-peso, 500);
	line-height: 1.25;
	white-space: nowrap;
	transition: color .16s ease, background-color .16s ease;
}
/* Especificidad a propósito (2 clases): tiene que ganarle a ".main-nav a"
   (clase+elemento) para que el submenú use SU propio color, no el del nav
   de primer nivel. */
.main-nav .main-nav__submenu a { color: var(--main-nav-nivel2-texto, var(--color-menu-texto)); }
.main-nav .main-nav__submenu a:hover,
.main-nav .main-nav__submenu a:focus-visible {
	background: var(--submenu-hover-fondo, #f2f5f8);
	color: var(--submenu-hover-texto, var(--color-primario));
}
/* Los submenús anidados abren lateralmente con el mismo estado del padre. */
.main-nav .main-nav__submenu .main-nav__submenu {
	top: -6px;
	left: calc(100% + 5px);
	background: var(--main-nav-nivel3-fondo, var(--main-nav-nivel2-fondo, var(--color-menu-fondo)));
}
.main-nav .main-nav__submenu .main-nav__submenu a {
	color: var(--main-nav-nivel3-texto, var(--main-nav-nivel2-texto, var(--color-menu-texto)));
}

/* Menú móvil en acordeón; la especificidad conserva la posición del toggle frente a los enlaces. */
.menu-movil__fila { display: flex; align-items: center; gap: 0.2rem; }
.menu-movil__fila a { flex: 1; min-width: 0; }
.menu-movil__toggle {
	background: none;
	border: none;
	cursor: pointer;
	padding: 0.5rem;
	opacity: 0.7;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
}
.menu-movil__toggle:hover { opacity: 1; }
.menu-movil__toggle svg { transition: transform var(--transicion); }
.menu-movil__toggle--abierto svg { transform: rotate(180deg); }
/* Este selector [hidden] supera el display:grid de .menu-movil__nav ul. */
.menu-movil__nav ul[hidden] { display: none; }
.menu-movil__item--nivel-2 > .menu-movil__fila > a {
	padding-left: var(--menu-movil-nivel2-indent, 1.4em);
	font-size: 0.94em;
	opacity: 0.85;
	color: var(--menu-movil-nivel2-texto, var(--color-menu-movil-texto, var(--color-menu-texto)));
}
.menu-movil__item--nivel-3 > .menu-movil__fila > a {
	padding-left: var(--menu-movil-nivel3-indent, 2.6em);
	font-size: 0.9em;
	opacity: 0.8;
	color: var(--menu-movil-nivel3-texto, var(--menu-movil-nivel2-texto, var(--color-menu-movil-texto, var(--color-menu-texto))));
}

/* Widget WhatsApp: aparece con el toggle activo y un número configurado; color desde ThemeCss. Tamaño y separación (--wa-*) los imprime la extensión. */
.whatsapp-widget {
	position: fixed;
	right: var(--wa-sep, 20px);
	bottom: var(--wa-sep, 20px);
	z-index: 90;
	width: var(--wa-tam, 54px);
	height: var(--wa-tam, 54px);
	display: flex;
	align-items: center;
	justify-content: center;
	border-radius: 50%;
	background: var(--color-whatsapp, #25d366);
	color: var(--color-redes-texto, #ffffff);
	box-shadow: 0 4px 14px color-mix(in srgb, var(--color-sombra-fuerte) 25%, transparent);
	transition: transform var(--transicion);
}
.whatsapp-widget--izquierda { right: auto; left: var(--wa-sep, 20px); }
.whatsapp-widget:hover { transform: scale(1.08); }
/* Halo detrás del botón; conserva su color de marca y se anula con reduced-motion. */
.whatsapp-widget::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -1;
	border-radius: 50%;
	background: var(--color-whatsapp, #25d366);
	animation: whatsapp-pulso 2s ease-out infinite;
}
.whatsapp-widget--sin-pulso::before { display: none; }
@keyframes whatsapp-pulso {
	0% { opacity: 0.5; transform: scale(1); }
	100% { opacity: 0; transform: scale(2); }
}
@media (prefers-reduced-motion: reduce) {
	.whatsapp-widget::before { animation: none; }
}
@media (max-width: 640px) {
	.whatsapp-widget { right: var(--wa-sep-movil, 16px); bottom: var(--wa-sep-movil, 16px); width: var(--wa-tam-movil, 50px); height: var(--wa-tam-movil, 50px); }
	.whatsapp-widget--izquierda { right: auto; left: var(--wa-sep-movil, 16px); }
}
/* El botón es fijo y tapaba los últimos enlaces del pie: con el widget en la página, el footer suma el alto del botón más su margen (se mide con el bloque HTML o el footer clásico). */
body:has(.whatsapp-widget) .site-footer { padding-bottom: calc(var(--wa-tam, 54px) + var(--wa-sep, 20px) + 12px); }
@media (max-width: 640px) { body:has(.whatsapp-widget) .site-footer { padding-bottom: calc(var(--wa-tam-movil, 50px) + var(--wa-sep-movil, 16px) + 12px); } }

/* ==========================================================================
   Menú móvil: cajón lateral con el mismo marco, cabecera y movimiento que
   el panel de filtros. Conserva la paleta y el ancho del Theme editor.
   ========================================================================== */
.menu-movil {
	position: fixed;
	inset: 0;
	z-index: 121;
	background: color-mix(in srgb, var(--color-velo) var(--velo-opacidad, 55%), transparent);
	display: flex;
	opacity: 1;
	visibility: visible;
	transition: opacity .22s ease, visibility .22s ease;
	touch-action: none;
}
.menu-movil[hidden] { display: flex; opacity: 0; visibility: hidden; pointer-events: none; }
.menu-movil__panel {
	background: var(--color-menu-movil-fondo, var(--color-menu-fondo));
	color: var(--color-menu-movil-texto, var(--color-menu-texto));
	width: min(420px, calc(100vw - 18px), var(--menu-movil-ancho, 100vw));
	height: 100vh;
	height: 100dvh;
	overflow: hidden;
	touch-action: pan-y;
	border-radius: 0 18px 18px 0;
	box-shadow: 18px 0 50px color-mix(in srgb, var(--color-sombra) 22%, transparent);
	display: flex;
	flex-direction: column;
	transform: translateX(0);
	transition: transform .22s ease;
}
.menu-movil[hidden] .menu-movil__panel { transform: translateX(-102%); }
.menu-movil__encabezado {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1rem;
	flex-shrink: 0;
	min-height: 0;
	padding: .9rem 1.25rem;
	border-bottom: 1px solid var(--color-borde);
	background: var(--color-menu-movil-fondo, var(--color-menu-fondo));
	font-size: 1.05rem;
}
.menu-movil__cerrar {
	border: none;
	border-radius: 50%;
	width: 40px;
	height: 40px;
	display: grid;
	place-items: center;
	background: var(--color-fondo-suave);
	cursor: pointer;
	color: var(--color-menu-movil-texto, var(--color-menu-texto));
	padding: 0;
}
.menu-movil__cerrar:hover { background: var(--color-borde); }
.menu-movil__cerrar:focus-visible, .menu-movil__toggle:focus-visible { outline: 2px solid var(--color-primario); outline-offset: 2px; }
.menu-movil__nav { flex: 1; min-height: 0; overflow-y: auto; overscroll-behavior: contain; padding: .75rem 1.25rem 1.25rem; }
.menu-movil__nav ul { display: grid; gap: var(--menu-movil-gap, 0.25rem); }
.menu-movil__item--nivel-1 + .menu-movil__item--nivel-1 {
	border-top: var(--menu-movil-divisor-grosor, 0px) solid var(--menu-movil-divisor-color, var(--color-borde));
}
.menu-movil__nav a {
	display: block;
	padding: var(--menu-movil-item-padding, 0.6em) 0.3em;
	font-weight: var(--menu-fuente-peso-movil, 600);
	font-size: var(--menu-fuente-tamano-movil, 1.05rem);
	color: var(--color-menu-movil-texto, var(--color-menu-texto));
	opacity: 0.85;
}
.menu-movil__fila > a { display: flex; align-items: center; min-height: 48px; }
.menu-movil__etiqueta { position: relative; top: 1px; }
.menu-movil__toggle {
	width: 40px;
	height: 40px;
	border-radius: 50%;
	opacity: 1;
	color: var(--color-menu-movil-texto, var(--color-menu-texto));
}
.menu-movil__toggle:hover,
.menu-movil__toggle:focus-visible,
.menu-movil__toggle--abierto {
	background: color-mix(in srgb, currentColor 12%, transparent);
}
.menu-movil__nav a:hover,
/* Mismo color configurable que el marcador de escritorio (--menu-marcador-
   color, Diseño → Menú) — el mecanismo en sí (opacidad + color) sigue
   siendo el de siempre, no tiene "tipo" elegible como el de escritorio. */
.menu-movil__nav a.activo { opacity: 1; color: var(--color-primario); }
@media (prefers-reduced-motion: reduce) { .menu-movil, .menu-movil__panel { transition: none; } }

/* ==========================================================================
   Grillas de tarjetas
   ========================================================================== */
.destacados { padding: 2.5rem 0; }
.destacados h2 { margin-bottom: 1.25rem; }

.grid-categorias,
.grid-productos {
	display: grid;
	grid-template-columns: repeat(var(--grid-cols-movil, 2), 1fr);
	gap: 1.25rem;
}
.grid-productos--descripcion-abajo { margin-bottom: clamp(1.75rem, 3vw, 2.5rem); }
/* Un solo producto legible en teléfonos estrechos, incluso si el editor
   eligió dos columnas para el breakpoint móvil general. */
@media (max-width: 360px) {
	.grid-categorias, .grid-productos, .landing-home__categorias, .landing-home__productos { grid-template-columns: minmax(0, 1fr); }
}
/* Grilla de subcategorías arriba de los productos (Catálogo →
   Configuración) — mismo componente que la del home, solo con separación
   propia para no quedar pegada al "Ordenar por" de abajo. */
.grid-categorias--sub { margin: 1.25rem 0 2rem; }
@media (min-width: 768px) and (max-width: 1024px) {
	.grid-categorias,
	.grid-productos { grid-template-columns: repeat(var(--grid-cols-tablet, 3), 1fr); }
}
@media (min-width: 1025px) {
	.grid-categorias,
	.grid-productos { grid-template-columns: repeat(var(--grid-cols-escritorio, 4), 1fr); }
}
/* Filtros en columna izquierda: la columna cuenta como una miniatura, así el ancho de cada tarjeta se mantiene (ver --grid-cols-escritorio-lateral en ThemeCss). */
@media (min-width: 1025px) {
	.catalogo-lateral:has(> .categoria-toolbar .filtros-panel) .grid-productos { grid-template-columns: repeat(var(--grid-cols-escritorio-lateral, 3), minmax(0, 1fr)); }
}

.categoria-card,
.producto-card {
	border: 1px solid var(--color-borde);
	border-radius: var(--radio);
	overflow: hidden;
	background: var(--catalogo-tarjeta-fondo, var(--color-fondo));
	color: var(--catalogo-tarjeta-texto, var(--color-texto));
	transition: transform var(--transicion), box-shadow var(--transicion);
	display: block;
}
/* Ancla para .etiquetas-wrap (badges de Catálogo → Etiquetas) — con o sin
   foto (.producto-card__sin-imagen no tiene su propio position:relative),
   así que el ancla vive en la tarjeta completa, no en la envoltura de la
   imagen. */
.producto-card { position: relative; }
.categoria-card:hover,
.producto-card:hover {
	transform: translateY(-3px);
	box-shadow: var(--sombra);
}

.categoria-card img,
.producto-card img,
.categoria-card__sin-imagen,
.producto-card__sin-imagen {
	aspect-ratio: 1 / 1;
	object-fit: cover;
	background: var(--catalogo-imagen-fondo, var(--color-fondo-suave));
	width: 100%;
	height: auto;
	display: block;
}

/* Marcas: el logo es una imagen alargada (no un producto cuadrado) — se
   deja completa dentro de una caja de alto fijo (object-fit: contain, sin
   recortar), no la grilla forzada a 1/1 de categoría/producto de arriba. */
.marca-card {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	padding: 1.5rem 1rem 0.5rem;
}
.marca-card img,
.marca-card .categoria-card__sin-imagen {
	aspect-ratio: auto;
	height: 70px;
	width: 100%;
	object-fit: contain;
	background: var(--color-fondo);
}

/* La segunda foto opcional se superpone a la principal para el fade de hover. */
/* Badges de catálogo: tamaño/peso/padding compartidos y colores de cada tipo desde Etiquetas::estiloInline(). */
.etiquetas-wrap {
	position: absolute;
	top: 10px;
	left: 10px;
	z-index: 3;
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 6px;
	pointer-events: none;
}
.etiqueta-tag {
	display: inline-block;
	padding: var(--etiquetas-padding-v, 0.4em) var(--etiquetas-padding-h, 0.75em);
	font-size: var(--etiquetas-tamano, 0.72rem);
	font-weight: var(--etiquetas-peso, 700);
	line-height: 1.2;
	border-radius: 3px;
	white-space: nowrap;
	pointer-events: auto;
}

.producto-card__imagen-envoltura { position: relative; overflow: hidden; }
.producto-card__imagen-hover {
	position: absolute;
	inset: 0;
	opacity: 0;
	transition: opacity 250ms ease;
}
.producto-card:hover .producto-card__imagen-hover { opacity: 1; }

/* Miniatura «secundario» (Bloques HTML → Miniaturas): minimalista. Sin marco ni botón «Añadir», foto cuadrada (el ratio de las fotos
   nunca cambia entre estilos), que se acerca al pasar el mouse; nombre y precio chicos, alineados a la izquierda. */
.producto-card--secundario { border-color: transparent; background: transparent; overflow: visible; }
.producto-card--secundario:hover { transform: none; box-shadow: none; }
.producto-card--secundario .producto-card__imagen-envoltura { border-radius: var(--radio); }
.producto-card--secundario .producto-card__sin-imagen { border-radius: var(--radio); }
.producto-card--secundario .producto-card__imagen-envoltura img { transition: transform 450ms ease; }
.producto-card--secundario:hover .producto-card__imagen-envoltura img { transform: scale(1.045); }
.producto-card--secundario .producto-card__nombre { padding: .65rem .75rem .1rem; font-size: var(--miniatura-nombre-tamano, .88rem); font-weight: 500; }
.producto-card--secundario .producto-card__precio { padding: 0 .75rem .8rem; font-size: var(--miniatura-precio-tamano, .95rem); }
.producto-card--secundario .producto-card__agregar { display: none; }

/* Etiqueta compacta de categoría; reducir el padding del nombre evita duplicar espacio. */
.categoria-card__etiqueta {
	display: block;
	padding: 0.75rem 0.75rem 0;
	font-size: 0.72rem;
	font-weight: 700;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	color: var(--color-texto);
	opacity: 0.55;
}
.categoria-card__etiqueta + .categoria-card__nombre { padding-top: 0.2rem; }

.categoria-card__nombre,
.producto-card__nombre {
	display: block;
	margin: 0;
	padding: 0.75rem;
	font-weight: var(--miniatura-nombre-peso, 600);
	font-size: var(--miniatura-nombre-tamano, 0.9rem);
}

.producto-card__precio {
	display: block;
	padding: 0 0.75rem 0.9rem;
	font-weight: var(--miniatura-precio-peso, 700);
	font-size: var(--miniatura-precio-tamano, 1rem);
	color: var(--color-precio-normal, var(--color-primario-oscuro));
}
.producto-card__precio--oferta { color: var(--color-precio-oferta, var(--color-primario-oscuro)); }
.precio-prefijo { color: var(--precio-prefijo-color, #56657a); font-size: var(--precio-prefijo-tamano, 0.9rem); font-weight: var(--precio-prefijo-peso, 400); }
.producto-card__precio .precio-prefijo { margin-right: .25rem; }
.precio-anterior {
	text-decoration: var(--precio-tachado, line-through);
	color: var(--color-texto-suave);
	font-weight: 400;
	margin-right: 0.4rem;
	font-size: 0.85em;
}

/* ==========================================================================
   Breadcrumbs
   ========================================================================== */
.breadcrumbs {
	position: relative;
	isolation: isolate;
	margin: 0 0 1.5rem;
	padding: var(--breadcrumb-padding-vertical, 12px) 0;
	font-size: var(--breadcrumb-tamano, 14px);
	line-height: 1.5;
}
/* El nav sigue dentro de .container, alineado con el cuerpo. Solo su
   fondo se extiende hasta los bordes de la ventana, como en un tema de tienda. */
.breadcrumbs::before {
	content: "";
	position: absolute;
	z-index: -1;
	inset: 0;
	background: var(--breadcrumb-fondo, #edf4ff);
	box-shadow: 0 0 0 100vmax var(--breadcrumb-fondo, #edf4ff);
	clip-path: inset(0 -100vmax);
}
.breadcrumbs ol { display: flex; flex-wrap: wrap; align-items: baseline; column-gap: 8px; row-gap: 2px; }
.breadcrumbs li { display: inline-flex; align-items: baseline; min-width: 0; }
.breadcrumbs li + li::before {
	content: var(--breadcrumb-divisor-contenido, "/");
	flex: none;
	margin-right: 8px;
	color: var(--breadcrumb-divisor-color, #526071);
	font-size: var(--breadcrumb-divisor-tamano, 14px);
	font-weight: var(--breadcrumb-divisor-peso, 400);
}
.breadcrumbs a { color: var(--breadcrumb-enlace, #0b172a); font-weight: var(--breadcrumb-peso-enlace, 400); }
.breadcrumbs li[aria-current="page"] { color: var(--breadcrumb-actual, #0b172a); font-weight: var(--breadcrumb-peso-actual, 400); }
.breadcrumbs a:hover, .breadcrumbs a:focus-visible { color: var(--breadcrumb-hover, var(--color-primario)); }
@media (max-width: 640px) {
	.breadcrumbs { font-size: var(--breadcrumb-tamano-movil, 13px); }
}

/* ==========================================================================
   Categoría
   ========================================================================== */
.categoria-pagina { padding-bottom: clamp(2rem, 4vw, 3rem); }
.categoria-resultados { transition: opacity .15s ease; }
.categoria-resultados[aria-busy="true"] { opacity: .55; pointer-events: none; }
.categoria-orden-estado { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }
@media (prefers-reduced-motion: reduce) { .categoria-resultados { transition: none; } }
.categoria-descripcion { color: var(--color-texto-suave); max-width: 70ch; }
.categoria-descripcion--abajo { margin-top: 2.5rem; padding-top: 1.5rem; border-top: 1px solid var(--color-borde); }

.categoria-toolbar {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: flex-end;
	gap: 0.75rem;
	margin: 1rem 0 1.5rem;
}
.categoria-toolbar__grupo { display: flex; align-items: center; gap: 0.5rem; font-size: .875rem; }
.categoria-toolbar__grupo select { height: var(--campo-altura, 40px); font-size: .875rem; font-weight: 600; }
/* selectores.js cambia el <select> nativo por .vc-select al cargar. Si ambos miden
   distinto, el filtro y el orden saltan a la derecha. Ancho fijo = sin salto. */
.categoria-toolbar__grupo select,
.categoria-toolbar__grupo .vc-select { width: 14rem; max-width: 100%; box-sizing: border-box; flex: 0 1 auto; }
.categoria-toolbar .filtros-panel__toggle { min-width: 7rem; }
/* El botón «Filtrar» siempre a la izquierda; «Ordenar por» queda a la derecha. */
.categoria-toolbar .filtros-panel { margin-right: auto; }
@media (max-width: 380px) {
	.categoria-toolbar { display: grid; grid-template-columns: minmax(0, 1fr); }
	.categoria-toolbar__grupo, .categoria-toolbar .filtros-panel { min-width: 0; }
	.categoria-toolbar__grupo select, .categoria-toolbar .filtros-panel__toggle { width: 100%; }
}

/* Filtro de catálogo: el mismo cajón lateral con CSS en todas las pantallas. */
.filtros-panel { position: relative; }
.filtros-panel__checkbox { position: absolute; width: 1px; height: 1px; opacity: 0; }
.filtros-panel__toggle { display: flex; align-items: center; justify-content: center; gap: .4em; min-height: var(--campo-altura, 40px); padding: .6em .9em; border: var(--campo-borde-px, 1px) solid var(--campo-borde, #dddddd); border-radius: var(--campo-radio, 6px); background: var(--filtros-activar-fondo, var(--color-fondo)); color: var(--filtros-activar-texto, var(--color-texto)); cursor: pointer; font-size: .875rem; font-weight: 600; user-select: none; }
.filtros-panel__toggle svg { flex-shrink: 0; }
.filtros-panel__checkbox:focus-visible + .filtros-panel__toggle { outline: 2px solid var(--color-primario); outline-offset: 3px; }
.filtros-panel__punto { display: inline-block; width: .45rem; height: .45rem; border-radius: 50%; background: var(--color-primario); }
.filtros-panel__punto[hidden] { display: none; }
html:has(.filtros-panel__checkbox:checked) { overflow: hidden; }
.filtros-panel__fondo { position: fixed; inset: 0; z-index: 119; background: color-mix(in srgb, var(--color-velo) var(--velo-opacidad, 55%), transparent); opacity: 0; visibility: hidden; pointer-events: none; transition: opacity .2s ease, visibility .2s ease; }
.filtros-panel__checkbox:checked ~ .filtros-panel__fondo { opacity: 1; visibility: visible; pointer-events: auto; }
.filtros-panel__contenido { display: flex; flex-direction: column; position: fixed; inset: 0 auto 0 0; z-index: 120; width: min(420px, calc(100vw - 18px)); height: 100vh; height: 100dvh; overflow: hidden; border-radius: 0 18px 18px 0; background: var(--filtros-panel-fondo, var(--color-fondo)); color: var(--filtros-panel-texto, var(--color-texto)); box-shadow: 18px 0 50px color-mix(in srgb, var(--color-sombra) 22%, transparent); visibility: hidden; transform: translateX(-102%); pointer-events: none; transition: transform .22s ease, visibility .22s ease; }
.filtros-panel__checkbox:checked ~ .filtros-panel__contenido { visibility: visible; transform: translateX(0); pointer-events: auto; }
.filtros-panel__cabecera { display: flex; flex: none; align-items: center; justify-content: space-between; gap: 1rem; min-height: 0; padding: .9rem 1.25rem; border-bottom: 1px solid var(--color-borde); background: var(--filtros-panel-fondo, var(--color-fondo)); font-size: 1.05rem; }
.filtros-panel__cabecera .filtros-panel__titulo { margin: 0; font-size: 1.05rem; line-height: 1.25; }
.filtros-panel__cerrar { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; background: var(--filtros-cerrar-fondo, var(--color-fondo-suave)); font-size: 1.6rem; line-height: 1; cursor: pointer; }
.filtros-panel__cerrar:hover { background: var(--color-borde); }
.filtros-panel__contenido .facetas { display: flex; flex: 1; flex-direction: column; min-height: 0; padding: 1.25rem; overflow-y: auto; }
.facetas__campos { display: grid; grid-template-columns: minmax(0, 1fr); gap: 0; }
.facetas-grupo { min-width: 0; }
.facetas-grupo summary { position: relative; display: grid; gap: .15rem; padding: .9rem 1.5rem .9rem 0; cursor: pointer; list-style: none; }
.facetas-grupo summary::-webkit-details-marker { display: none; }
.facetas-grupo summary::after { content: ''; position: absolute; top: 50%; right: .2rem; width: .45rem; height: .45rem; border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor; transform: translateY(-65%) rotate(45deg); transition: transform .15s ease; }
.facetas-grupo[open] summary::after { transform: translateY(-25%) rotate(225deg); }
.facetas-grupo summary:focus-visible { outline: none; border-radius: var(--campo-radio, 8px); box-shadow: 0 0 0 2px var(--campo-foco-anillo); }
.facetas-grupo .facetas-grupo__titulo { display: block; margin: 0; font-size: .86rem; font-weight: 700; line-height: 1.3; }
.facetas-grupo__actual { overflow: hidden; color: var(--color-texto-suave); font-size: .79rem; font-weight: 500; text-overflow: ellipsis; white-space: nowrap; }
.facetas-grupo__opciones { display: grid; gap: .15rem; padding: 0 0 .8rem; }
.facetas-opcion { display: flex; align-items: center; gap: .65rem; min-height: 36px; padding: .35rem .45rem; border-radius: var(--campo-radio, 8px); cursor: pointer; font-size: .85rem; }
.facetas-opcion:hover { background: var(--filtros-opcion-hover-fondo, var(--color-fondo-suave)); }
.facetas-opcion input { appearance: none; flex: none; width: 16px; height: 16px; margin: 0; border: 1.5px solid var(--campo-borde, #dddddd); border-radius: 50%; background: var(--campo-fondo, #fff); }
.facetas-opcion input:checked { border: 5px solid var(--color-primario); }
.facetas-opcion input:focus-visible { outline: none; box-shadow: 0 0 0 2px var(--campo-foco-anillo); }
.facetas-opcion__cuenta { margin-left: auto; min-width: 1.6rem; padding: .1rem .5rem; border-radius: 999px; background: color-mix(in srgb, var(--color-texto-suave) 14%, transparent); color: var(--color-texto-suave); font-size: .72rem; font-weight: 600; line-height: 1.4; text-align: center; font-variant-numeric: tabular-nums; }
.filtros-panel__contenido .facetas__acciones { display: flex; flex-wrap: wrap; align-items: center; gap: 1rem; position: sticky; bottom: -1.25rem; margin: auto -1.25rem -1.25rem; padding: 1rem 1.25rem; border-top: 1px solid var(--color-borde); background: var(--filtros-panel-fondo, var(--color-fondo)); box-shadow: 0 -6px 18px color-mix(in srgb, var(--color-sombra) 6%, transparent); }
.filtros-panel__contenido .facetas__acciones .btn { flex: 1; }
.facetas__acciones a { font-size: .85rem; }
.facetas-activas { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; margin: -.1rem 0 1.3rem; font-size: .82rem; }
.facetas-activas > strong { margin-right: .2rem; }
.facetas-activas__chip { display: inline-flex; align-items: center; gap: .7rem; padding: .4rem .65rem; border: 1px solid var(--color-borde); border-radius: 999px; color: var(--color-texto); background: var(--color-fondo); text-decoration: none; }
.facetas-activas__chip:hover { border-color: var(--color-primario); color: var(--color-primario); }
.facetas-activas__chip span { font-size: 1.15em; line-height: 1; }
.facetas-activas__limpiar { margin-left: .25rem; }
@media (prefers-reduced-motion: reduce) { .filtros-panel__fondo, .filtros-panel__contenido { transition: none; } }

.sin-resultados { color: var(--color-texto-suave); padding: 2rem 0; }

/* ==========================================================================
   Paginación (categoría/marca)
   ========================================================================== */
.paginacion {
	display: flex;
	justify-content: center;
	flex-wrap: wrap;
	gap: 0.4rem;
	margin: 2.5rem 0 1rem;
	clear: both;
}
.paginacion__link {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 2.2rem;
	height: 2.2rem;
	padding: 0 0.5rem;
	border-radius: var(--radio);
	border: 1px solid var(--color-borde);
	font-size: 0.88rem;
	font-weight: 600;
	color: var(--color-texto);
	transition: border-color var(--transicion), background var(--transicion);
}
a.paginacion__link:hover { border-color: var(--color-primario); color: var(--color-primario); }
.paginacion__link--activo {
	background: var(--color-boton-fondo);
	border-color: var(--color-boton-fondo);
	color: var(--color-boton-texto);
}

/* ==========================================================================
   Producto
   ========================================================================== */
/* La ficha solo añade padding inferior; el breadcrumb aporta el espacio superior. */
.producto-detalle { padding: 0 0 3rem; }
.producto-detalle :is(.producto-descripcion-larga, .producto-tabs, .ficha-tecnica, .resenas__cabecera, .producto-slider-seccion) > h2 {
	margin: 0 0 1.25rem;
	color: var(--color-texto);
	font-size: clamp(1.65rem, 2.6vw, 2.2rem);
	font-weight: 700;
	letter-spacing: -.03em;
	line-height: 1.2;
}
.producto-detalle__grid {
	display: grid;
	grid-template-columns: var(--producto-galeria-cols, 1fr 1fr);
	gap: 2.5rem;
}
.producto-galeria { position: relative; min-width: 0; }
.producto-galeria__principal-envoltura { position: relative; }
.producto-galeria__principal,
.producto-galeria__sin-imagen {
	border-radius: var(--radio);
	aspect-ratio: 1 / 1;
	object-fit: cover;
	width: 100%;
	height: auto;
	display: block;
	background: var(--producto-galeria-fondo, var(--color-fondo-suave));
}
.producto-galeria__miniaturas-wrap { display: grid; grid-template-columns: 34px minmax(0, 1fr) 34px; align-items: center; gap: .35rem; margin-top: .75rem; }
.producto-galeria__miniaturas-wrap--sin-desborde { grid-template-columns: minmax(0, 1fr); }
.producto-galeria__miniaturas-flecha { display: grid; place-items: center; width: 34px; height: 34px; padding: 0; border: 1px solid var(--color-borde); border-radius: 50%; background: var(--color-fondo); color: var(--color-texto); cursor: pointer; }
.producto-galeria__miniaturas-flecha:hover { border-color: var(--color-primario); color: var(--color-primario); }
.producto-galeria__miniaturas-flecha:focus-visible { outline: 2px solid var(--campo-foco-color, var(--color-primario)); outline-offset: 2px; }
.producto-galeria__miniaturas-flecha[hidden] { display: none; }
.producto-galeria__miniaturas {
	display: flex;
	gap: 0.5rem;
	overflow-x: auto;
	overflow-y: hidden;
	scrollbar-width: none;
}
.producto-galeria__miniaturas::-webkit-scrollbar { display: none; }
.producto-galeria__miniaturas picture {
	flex: 0 0 64px;
	width: 64px;
	height: 64px;
}
.producto-galeria__miniaturas img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	border-radius: 6px;
	border: 2px solid transparent;
	background: var(--producto-miniatura-fondo, var(--color-fondo));
	cursor: pointer;
	opacity: 0.7;
	transition: opacity var(--transicion), border-color var(--transicion);
}
.producto-galeria__miniaturas img:hover { opacity: 1; }
.producto-galeria__miniaturas img.activa { opacity: 1; border-color: var(--color-primario); }

/* Layout «grilla» de la ficha: fotos grandes en grilla, información fija al lado. Bajo 1025px las fotos se deslizan (scroll-snap, sin JS). */
.producto-galeria__grilla { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .75rem; }
.producto-galeria__grilla picture { display: block; }
.producto-galeria__grilla img {
	display: block;
	width: 100%;
	height: auto;
	aspect-ratio: 1 / 1;
	object-fit: cover;
	border-radius: var(--radio);
	background: var(--producto-galeria-fondo, var(--color-fondo-suave));
}
.producto-galeria__grilla picture:only-child { grid-column: 1 / -1; }
@media (min-width: 1025px) {
	.producto-detalle--grilla .producto-detalle__grid { align-items: start; }
	.producto-detalle--grilla .producto-info { position: sticky; top: 6rem; }
}
@media (max-width: 1024px) {
	.producto-galeria__grilla { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; gap: .5rem; }
	.producto-galeria__grilla::-webkit-scrollbar { display: none; }
	.producto-galeria__grilla picture { flex: 0 0 85%; scroll-snap-align: start; }
	.producto-galeria__grilla picture:only-child { flex-basis: 100%; }
}

/* Layout «secundario» de la ficha (Bloques HTML → Layout producto): miniaturas en columna junto a la foto, galería que acompaña el scroll y compra en tarjeta.
   Solo desde 1025px; debajo se apila igual que el principal. */
@media (min-width: 1025px) {
	.producto-detalle--secundario .producto-detalle__grid { align-items: start; }
	.producto-detalle--secundario .producto-galeria:has(.producto-galeria__miniaturas-wrap) {
		display: grid;
		grid-template-columns: 76px minmax(0, 1fr);
		gap: .75rem;
	}
	.producto-detalle--secundario .producto-galeria__principal-envoltura { grid-column: 2; grid-row: 1; }
	.producto-detalle--secundario .producto-galeria__miniaturas-wrap { grid-column: 1; grid-row: 1; position: relative; display: block; margin-top: 0; }
	.producto-detalle--secundario .producto-galeria__miniaturas-flecha { display: none; }
	.producto-detalle--secundario .producto-galeria__miniaturas { position: absolute; inset: 0; flex-direction: column; overflow-x: hidden; overflow-y: auto; }
	.producto-detalle--secundario .producto-galeria__miniaturas picture { flex: 0 0 auto; width: 76px; height: 76px; }
	.producto-detalle--secundario .producto-galeria:has(.producto-galeria__miniaturas-wrap) .etiquetas-wrap { left: calc(76px + .75rem + 10px); }
	.producto-detalle--secundario .producto-galeria { position: sticky; top: 6rem; } /* la columna más alta es la de información: la galería es la que acompaña */
	.producto-detalle--secundario .producto-compra-panel {
		padding: 1.25rem;
		border: 1px solid var(--color-borde);
		border-radius: var(--radio);
		background: var(--color-fondo-suave);
	}
}

.producto-marca {
	display: inline-block;
	font-size: 0.85rem;
	font-weight: 600;
	color: var(--color-texto-suave);
	text-decoration: underline;
	margin-bottom: 0.3rem;
}
.producto-marca:hover { color: var(--color-primario); }
/* Con logo (foto alargada, cargada desde Marcas): reemplaza el nombre en
   texto por la imagen — mismo criterio "contain" que la tarjeta de marca. */
.producto-marca--logo { text-decoration: none; }
.producto-marca__imagen { max-height: 44px; max-width: 160px; width: auto; object-fit: contain; }

.producto-info h1 {
	font-size: var(--producto-titulo-tamano, 2.25rem);
	font-weight: var(--producto-titulo-peso, 700);
	margin-bottom: .18em;
}

.producto-precio {
	font-size: var(--producto-precio-tamano, 1.6rem);
	font-weight: var(--producto-precio-peso, 700);
	color: var(--color-precio-normal, var(--color-primario-oscuro));
	display: flex;
	align-items: baseline;
	gap: 0.5rem;
	flex-wrap: wrap;
}
.producto-precio--oferta { color: var(--color-precio-oferta, var(--color-primario-oscuro)); }
.producto-iva { font-size: var(--producto-iva-tamano, 0.75rem); font-weight: var(--producto-iva-peso, 400); color: var(--producto-iva-color, #56657a); }

.producto-cuotas { color: var(--color-texto-suave); font-size: var(--producto-cuotas-tamano, 0.9rem); font-weight: var(--producto-cuotas-peso, 400); margin: -0.25rem 0 1rem; }
.producto-cuotas strong { font-weight: 700; color: var(--color-texto); }

/* Entrega estimada: botón informativo y diálogo antes de las acciones de compra. */
.entrega-estimada-trigger {
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
	margin: 0 0 1.1rem;
	padding: 0.6em 1.1em;
	background: none;
	border: 1px solid var(--color-borde);
	color: var(--color-texto);
	font-size: 0.85rem;
	font-weight: 600;
	border-radius: var(--radio);
	cursor: pointer;
	transition: background var(--transicion), border-color var(--transicion);
}
.entrega-estimada-trigger:hover { background: var(--color-fondo-suave); border-color: var(--color-primario); }

.entrega-estimada-overlay {
	display: none;
	position: fixed;
	inset: 0;
	background: color-mix(in srgb, var(--color-velo) var(--velo-opacidad, 55%), transparent);
	z-index: 1000;
	align-items: center;
	justify-content: center;
	padding: 1rem;
}
.entrega-estimada-overlay.is-open { display: flex; }
.entrega-estimada-modal {
	position: relative;
	background: var(--color-fondo);
	color: var(--color-texto);
	border-radius: var(--radio);
	padding: 1.6rem 1.6rem 1.4rem;
	width: 100%;
	max-width: 30rem;
	max-height: 88vh;
	overflow-y: auto;
}
.entrega-estimada-modal__cerrar {
	position: absolute;
	top: 0.6rem;
	right: 0.9rem;
	background: none;
	border: none;
	font-size: 1.4rem;
	line-height: 1;
	cursor: pointer;
	color: var(--color-texto-suave);
}
.entrega-estimada-modal__titulo { margin: 0 0 1rem; font-size: 1.05rem; font-weight: 600; }
.entrega-estimada-modal__label { display: block; font-size: 0.82rem; font-weight: 600; margin: 0 0 0.4rem; }
.entrega-estimada-modal__select {
	width: 100%;
	padding: 0.55em 0.6em;
	margin-bottom: 0.9rem;
	border: var(--campo-borde-px, 1px) solid var(--campo-borde, #dddddd);
	border-radius: var(--campo-radio, 6px);
	font-size: 0.85rem;
	background-color: var(--campo-fondo, var(--color-fondo));
	color: var(--color-texto);
}
.entrega-estimada-modal__select:disabled { background-color: var(--color-fondo-suave); color: var(--color-texto-suave); }
/* El selector visual envuelve al <select>; el margen del control oculto no separa las filas. */
.entrega-estimada-modal .vc-select { margin-bottom: .9rem; }
.entrega-estimada-modal__calcular {
	width: 100%;
	padding: 0.7em;
	background: var(--color-boton-fondo);
	color: var(--color-boton-texto);
	border: none;
	border-radius: var(--boton-radio, var(--radio));
	font-weight: 700;
	font-size: 0.85rem;
	cursor: pointer;
	transition: background var(--transicion);
}
.entrega-estimada-modal__calcular:hover { background: var(--color-boton-hover-fondo, var(--color-primario-oscuro)); }
.entrega-estimada-modal__calcular:disabled { opacity: 0.6; cursor: default; }
.entrega-estimada-modal__resultado { margin-top: 1rem; }
.entrega-estimada-modal__leyenda { margin: 0.75rem 0 0; font-size: 0.72rem; color: var(--color-texto-suave); }
.entrega-estimada-modal__error {
	margin-top: 0.9rem;
	padding: 0.75rem;
	background: var(--color-error-fondo, #fdecea);
	color: var(--color-error, #7a2a20);
	border-radius: var(--radio);
	font-size: 0.82rem;
}
.entrega-opcion { padding: 0.75rem 0.9rem; background: var(--color-fondo-suave); border-radius: var(--radio); margin-bottom: 0.6rem; }
.entrega-opcion:last-child { margin-bottom: 0; }
.entrega-opcion__cabecera { display: flex; align-items: baseline; justify-content: space-between; gap: 0.6rem; }
.entrega-opcion__nombre { font-size: 0.85rem; font-weight: 700; }
.entrega-opcion__precio { font-size: 0.85rem; font-weight: 700; white-space: nowrap; }
.entrega-opcion__fecha { margin-top: 0.35rem; font-size: 0.8rem; color: var(--color-texto-suave); line-height: 1.4; }

/* Tarjeta "¿Necesitas ayuda?" (WhatsApp) — pregunta + botón relleno, verde
   configurable junto al widget flotante desde el Theme editor. */
.producto-whatsapp-card {
	margin-top: 1.25rem;
	padding: 1rem 1.25rem 0 0;
	border-radius: var(--radio);
	text-align: left;
}
.producto-whatsapp-card p {
	margin: 0 0 0.75rem;
	color: var(--color-texto-suave);
	font-size: 0.88rem;
	font-weight: 600;
}
.producto-whatsapp-card a {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 0.5rem;
	width: 100%;
	max-width: 290px;
	padding: 0.7em 1em;
	background: var(--color-whatsapp, #25d366);
	color: var(--color-redes-texto, #ffffff);
	border-radius: var(--boton-radio, var(--radio));
	font-weight: 700;
	font-size: 0.92rem;
	transition: background var(--transicion);
}
.producto-whatsapp-card a:hover { background: var(--color-whatsapp-hover, #1fb959); }

.producto-sku { color: var(--color-texto-suave); font-size: 0.82rem; margin-top: 0.75rem; }

/* Marca (logo o texto) reubicada bajo el SKU — bloque simétrico junto al
   resto de la meta-info, en vez de arriba pegada al título. */
.producto-marca-abajo { margin-top: 1.25rem; display: flex; justify-content: flex-start; }

.producto-stock {
	display: inline-block;
	font-size: var(--producto-stock-tamano, 0.85rem);
	font-weight: var(--producto-stock-peso, 600);
	padding: 0.3em 1.1em 0.4em 0.9em;
	border-radius: 999px;
	margin-bottom: 1rem;
}
.producto-stock--en-stock { background: var(--color-exito-fondo, #e4f3e9); color: var(--color-exito, #1f5c37); }
.producto-stock--agotado { background: var(--color-error-fondo, #fbe7e4); color: var(--color-error, #8a2c1f); }
.producto-stock__pulso { display: inline-block; width: 8px; height: 8px; margin-right: .65em; border-radius: 50%; background: currentColor; vertical-align: .05em; animation: stock-pulso 2.4s ease-in-out infinite; }
@keyframes stock-pulso { 0%, 100% { opacity: 1; } 50% { opacity: .28; } }
@media (prefers-reduced-motion: reduce) { .producto-stock__pulso { animation: none; } }

.producto-descripcion { color: var(--producto-descripcion-color, var(--color-texto-suave)); margin-bottom: 1.5rem; }

.producto-agregar {
	display: flex;
	align-items: center;
	gap: 0.75rem;
	flex-wrap: wrap;
}
.producto-agregar .selector-cantidad { flex-shrink: 0; }
.producto-agregar__botones { display: flex; gap: 0.6rem; flex-wrap: nowrap; flex: 1; min-width: 240px; }
.producto-agregar__botones--doble { min-width: min(100%, 300px); }
.producto-agregar__botones--doble .producto-agregar__boton { font-size: 0.9rem; padding-inline: 0.65em; }
.producto-agregar__boton {
	height: var(--producto-compra-altura, 48px);
	min-height: 0;
	font-size: 0.95rem;
	padding: 0.5em 1em;
	flex: 1;
	min-width: 0;
	text-align: center;
	white-space: nowrap;
}
.producto-agregar__boton:disabled { opacity: 0.5; cursor: not-allowed; }

/* Combinaciones: radios nativos y presentación tipo ficha; el servidor
   valida la combinación y el stock incluso con JavaScript desactivado. */
.producto-variantes { flex-basis: 100%; display: grid; gap: 1rem; margin: .35rem 0 .55rem; }
.producto-variantes__grupo { border: 0; background: transparent; padding: 0; margin: 0; min-width: 0; }
.producto-variantes__grupo legend { padding: 0; margin: 0 0 .55rem; font-size: .88rem; font-weight: 700; color: var(--color-texto); }
.producto-variantes__opciones { display: flex; gap: .5rem; flex-wrap: wrap; }
.producto-variantes__opcion { position: relative; cursor: pointer; }
.producto-variantes__opcion input { position: absolute; width: 1px; height: 1px; opacity: 0; }
.producto-variantes__opcion > span { min-width: 2.8rem; min-height: 2.55rem; display: inline-flex; align-items: center; justify-content: center; gap: .48rem; padding: .35rem .8rem; border: 1px solid var(--radio-opcion-borde, #dddddd); border-radius: var(--campo-radio, 8px); background: var(--radio-opcion-fondo, var(--color-fondo)); color: var(--color-texto); font-size: .86rem; font-weight: 600; transition: border-color .18s ease, box-shadow .18s ease; }
.producto-variantes__opcion:hover > span { border-color: var(--radio-opcion-borde-activo, var(--color-primario)); }
.producto-variantes__opcion input:checked + span { border-color: var(--radio-opcion-borde-activo, var(--color-primario)); background: var(--radio-opcion-fondo-activo, var(--color-fondo-suave)); }
.producto-variantes__opcion input:focus-visible + span { outline: none; border-color: var(--campo-foco-borde, var(--color-primario)); }
.producto-variantes__opcion--agotada > span { opacity: .45; text-decoration: line-through; }
.producto-variantes__swatch { display: inline-block; width: 1.25rem; height: 1.25rem; flex: 0 0 1.25rem; border-radius: 50%; background: var(--swatch); border: 1px solid color-mix(in srgb, var(--color-muestra-borde) 12%, transparent); }
.producto-variantes__ayuda { margin: -.35rem 0 0; font-size: .75rem; color: var(--color-texto-suave); }
.producto-variantes__error { color: var(--color-error, #8a2c1f); font-weight: 600; }

.producto-descripcion-larga { width: 100%; margin-top: 3rem; }
.producto-descripcion-larga__cuerpo { color: var(--producto-descripcion-color, var(--color-texto-suave)); }
/* Texto simple de la descripción (el que escribe el panel o llega por CSV). Con especificidad mínima (0,0,1): cualquier clase de un
   diseño propio gana siempre, sin depender del orden. Un bloque HTML (.landing-html) trae su propio diseño: no hereda listas con
   puntos ni enlaces subrayados. */
:where(.producto-descripcion, .producto-descripcion-larga__cuerpo) :is(p, ul, ol, blockquote, h2, h3, h4, h5, h6) { margin: 0 0 1em; }
:where(.producto-descripcion, .producto-descripcion-larga__cuerpo) :is(ul, ol):not(:where(.landing-html *)) { padding-left: 1.5em; list-style: revert; }
:where(.producto-descripcion, .producto-descripcion-larga__cuerpo) a:not(:where(.landing-html *)) { color: var(--color-primario); text-decoration: underline; }
:where(.producto-descripcion, .producto-descripcion-larga__cuerpo) img { display: block; max-width: 100%; height: auto; }
:where(.producto-descripcion, .producto-descripcion-larga__cuerpo) table { width: 100%; border-collapse: collapse; }
:where(.producto-descripcion, .producto-descripcion-larga__cuerpo) :is(th, td) { padding: .6em; border: 1px solid var(--color-borde); text-align: left; }
.producto-tabs { margin-top: 2.5rem; }
.producto-tabs h2 { margin-bottom: 1rem; }
.producto-tabs__items { border-top: 1px solid var(--color-borde); }
.producto-tabs__item { border-bottom: 1px solid var(--color-borde); }
.producto-tabs__item summary { position: relative; padding: 1rem 2rem 1rem 0; cursor: pointer; color: var(--producto-pestana-titulo-color, var(--color-texto)); font-weight: 700; list-style: none; }
.producto-tabs__item summary::-webkit-details-marker { display: none; }
.producto-tabs__item summary::after { content: '+'; position: absolute; right: .25rem; top: .75rem; color: var(--color-primario); font-size: 1.4rem; font-weight: 400; }
.producto-tabs__item[open] summary::after { content: '−'; }
.producto-tabs__item summary:focus-visible { outline: 2px solid var(--color-primario); outline-offset: 3px; }
.producto-tabs__contenido { max-width: none; padding: 0 0 1rem; color: var(--producto-pestana-texto-color, var(--color-texto-suave)); line-height: 1.7; }
.producto-tabs__contenido > :first-child { margin-top: 0; }

/* ==========================================================================
   Selector de cantidad (+/-) — ficha de producto y mini "agregar al
   carrito" de las tarjetas de categoría/marca (misma clase, tamaño --mini)
   ========================================================================== */
.selector-cantidad {
	display: inline-flex;
	align-items: stretch;
	/* Fondo y borde editables del selector de cantidad; el borde conserva la altura con el botón de compra. */
	border: 1px solid var(--selector-cantidad-borde, #dddddd);
	border-radius: var(--campo-radio, var(--radio));
	overflow: hidden;
	background: var(--selector-cantidad-fondo, var(--color-fondo));
	transition: border-color var(--transicion), box-shadow var(--transicion);
}
/* Un solo anillo de foco en el contenedor del selector de cantidad. */
.selector-cantidad:focus-within {
	border-color: var(--campo-foco-borde, var(--color-primario));
}
.selector-cantidad__btn,
.selector-cantidad input[name="cantidad"] {
	outline: none;
}
.selector-cantidad__btn {
	background: none;
	border: none;
	width: 2.75rem;
	font-size: 1.2rem;
	line-height: 1;
	cursor: pointer;
	color: var(--selector-cantidad-texto, var(--color-texto));
	transition: background var(--transicion);
	display: flex;
	align-items: center;
	justify-content: center;
}
.selector-cantidad__btn:hover { background: var(--color-fondo-suave); }
.selector-cantidad input[name="cantidad"] {
	width: 2.75rem;
	border: none;
	background: none;
	height: 2.6rem;
	text-align: center;
	font-weight: 600;
	color: var(--selector-cantidad-texto, var(--color-texto));
	-moz-appearance: textfield;
}
.selector-cantidad input[name="cantidad"]::-webkit-outer-spin-button,
.selector-cantidad input[name="cantidad"]::-webkit-inner-spin-button {
	-webkit-appearance: none;
	margin: 0;
}
/* Limitar el ancho evita estirar el selector mini en las columnas flex del side cart. */
/* fit-content en vez de un tope fijo de 100px: en táctil los botones miden 44px (3 piezas = 116px) y el tope recortaba el "+". */
.selector-cantidad--mini { width: fit-content; max-width: none; flex: none; }
.selector-cantidad--mini .selector-cantidad__btn { width: 2rem; font-size: 1.25rem; }
.selector-cantidad--mini input[name="cantidad"] { width: 1.9rem; height: 2rem; font-size: 0.85rem; font-weight: 600; }

/* En la ficha de producto va al lado del botón "Añadir al carrito" en la
   misma fila — mismo alto que ese botón, para que no se vea desnivelado. */
.producto-agregar .selector-cantidad__btn { width: 2.75rem; font-size: 1.15rem; }
.producto-agregar .selector-cantidad { height: var(--producto-compra-altura, 48px); box-sizing: border-box; }
.producto-agregar .selector-cantidad input[name="cantidad"] { width: 2.6rem; height: 100%; font-size: 0.95rem; }

/* ==========================================================================
   Mini "agregar al carrito" en tarjetas de producto (categoría/marca) —
   se activa desde /admin/diseno
   ========================================================================== */
.producto-card { display: flex; flex-direction: column; }
.producto-card__enlace { display: block; flex: 1; }
.producto-card__agregar {
	display: flex;
	align-items: center;
	gap: 0.5rem;
	padding: 0 0.75rem 0.9rem;
}
.btn--mini { min-height: 0; padding: 0.5em 0.9em; font-size: 0.8rem; flex: 1; }
.btn--mini:disabled { opacity: 0.5; cursor: not-allowed; }
/* Sin stock: ícono solo (no el texto "Sin stock", que partía en 2 líneas
   en mobile con 2 columnas) — cuadrado chico, no flex:1 a lo ancho. */
.producto-card__agregar--sin-stock { justify-content: flex-start; }
.btn--mini-icono {
	flex: 0 0 auto;
	width: 2.2rem;
	height: 2.2rem;
	padding: 0;
	display: inline-flex;
	align-items: center;
	justify-content: center;
}

.ficha-tecnica { margin-top: 3rem; }
/* Tabla de datos como tarjeta: etiqueta a la izquierda (legible, no atenuada) y valor a la derecha; filas alternadas para seguir la línea. */
.ficha-tecnica table { width: 100%; border-collapse: separate; border-spacing: 0; overflow: hidden; border: 1px solid var(--color-borde); border-radius: var(--radio, 12px); }
.ficha-tecnica th, .ficha-tecnica td {
	text-align: left;
	vertical-align: top;
	padding: 0.8em 1.1em;
	border-bottom: 1px solid var(--color-borde);
	line-height: 1.45;
	overflow-wrap: anywhere;
}
.ficha-tecnica tr:last-child :is(th, td) { border-bottom: 0; }
.ficha-tecnica tr:nth-child(even) :is(th, td) { background: color-mix(in srgb, var(--color-fondo-suave) 55%, transparent); }
.ficha-tecnica th { width: 34%; color: color-mix(in srgb, var(--color-texto) 78%, var(--color-fondo)); font-weight: 700; }
.ficha-tecnica td { color: var(--color-texto); font-weight: 500; }
@media (max-width: 560px) {
	.ficha-tecnica th, .ficha-tecnica td { padding: 0.7em 0.8em; font-size: .92rem; }
	.ficha-tecnica th { width: 40%; }
}

/* Slider reutilizable: scroll horizontal nativo y scroll-snap. */
.producto-slider-seccion { margin-top: 3rem; }
.producto-slider { position: relative; }
.producto-slider__pista {
	display: flex;
	gap: 1.25rem;
	overflow-x: auto;
	scroll-snap-type: x mandatory;
	scrollbar-width: none;
}
.producto-slider__pista::-webkit-scrollbar { display: none; }
/* Misma cantidad de tarjetas por "página" que la grilla de productos
   normal (--grid-cols-*, ThemeCss) — el theme define una sola vez cuántas
   columnas van en cada tamaño de pantalla y el slider las respeta. */
.producto-slider__pista .producto-card {
	scroll-snap-align: start;
	flex: 0 0 calc((100% - (var(--grid-cols-movil, 2) - 1) * 1.25rem) / var(--grid-cols-movil, 2));
	min-width: 150px;
}
@media (min-width: 768px) and (max-width: 1024px) {
	.producto-slider__pista .producto-card {
		flex-basis: calc((100% - (var(--grid-cols-tablet, 3) - 1) * 1.25rem) / var(--grid-cols-tablet, 3));
	}
}
@media (min-width: 1025px) {
	.producto-slider__pista .producto-card {
		flex-basis: calc((100% - (var(--grid-cols-escritorio, 4) - 1) * 1.25rem) / var(--grid-cols-escritorio, 4));
	}
}
@media (max-width: 360px) {
    .producto-slider__pista .producto-card { flex-basis: 100%; }
}
/* Flechas de slider y galería: radio y tamaño configurables desde ThemeCss. */
.flecha-slider {
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	width: var(--flecha-tamano, 2.4rem);
	height: var(--flecha-tamano, 2.4rem);
	border-radius: var(--flecha-radio, 50%);
	background: var(--color-fondo);
	border: 1px solid var(--color-borde);
	box-shadow: var(--sombra);
	cursor: pointer;
	display: flex;
	align-items: center;
	justify-content: center;
	color: var(--color-texto);
	z-index: 2;
	transition: background var(--transicion), transform var(--transicion);
}
.flecha-slider:hover { background: var(--color-fondo-suave); }
.flecha-slider--prev { left: -0.75rem; }
.flecha-slider--next { right: -0.75rem; }
/* Galería de la ficha: las flechas van dentro de la foto, a la misma distancia de cada borde (fuera quedaban cortadas y asimétricas). */
.producto-galeria__principal-envoltura .flecha-slider--prev { left: .75rem; }
.producto-galeria__principal-envoltura .flecha-slider--next { right: .75rem; }
.producto-galeria__principal-envoltura .flecha-slider { border: 0; background: color-mix(in srgb, var(--color-fondo) 88%, transparent); box-shadow: 0 2px 10px color-mix(in srgb, var(--color-sombra, #000) 28%, transparent); backdrop-filter: blur(4px); }
.producto-galeria__principal-envoltura .flecha-slider:hover { background: var(--color-fondo); }
/* Centrado exacto: sin el padding por defecto del botón y con el chevron corrido 1px hacia su punta (el trazo en «V» pesa hacia la cola y se ve descentrado). */
.producto-galeria__principal-envoltura .flecha-slider, .producto-galeria__miniaturas-flecha { padding: 0; }
.producto-galeria__principal-envoltura .flecha-slider--prev svg, [data-miniaturas-accion="anterior"] svg { transform: translateX(-1px); }
.producto-galeria__principal-envoltura .flecha-slider--next svg, [data-miniaturas-accion="siguiente"] svg { transform: translateX(1px); }
/* Animación al hacer click (app.js agrega/saca la clase) — un "pulso"
   simple, nada elaborado. */
.flecha-slider--pulso { animation: flecha-pulso 280ms ease; }
@keyframes flecha-pulso {
	0% { transform: translateY(-50%) scale(1); }
	40% { transform: translateY(-50%) scale(0.82); }
	100% { transform: translateY(-50%) scale(1); }
}
@media (max-width: 640px) {
	.flecha-slider { width: calc(var(--flecha-tamano, 2.4rem) * 0.8); height: calc(var(--flecha-tamano, 2.4rem) * 0.8); }
}
/* producto-slider.php oculta flechas si todos los elementos caben en el breakpoint. */
@media (max-width: 767px) {
	.producto-slider--sin-flechas-movil .flecha-slider { display: none; }
}
@media (min-width: 768px) and (max-width: 1024px) {
	.producto-slider--sin-flechas-tablet .flecha-slider { display: none; }
}
@media (min-width: 1025px) {
	.producto-slider--sin-flechas-escritorio .flecha-slider { display: none; }
}

/* ==========================================================================
   Footer
   ========================================================================== */
.site-footer {
	/* Fondo de respaldo nada más (las 2 zonas de abajo ya traen el suyo
	   propio, esto no debería llegar a verse nunca — es solo para no
	   dejar un hueco raro si algún día se agrega una 3ra zona sin fondo). */
	background: var(--color-footer-fondo);
	color: var(--color-footer-texto);
	margin-top: var(--footer-margen-superior, 3rem);
}
/* Iconos de redes; el nombre queda en aria-label y title. */
.footer-redes a { display: inline-flex; opacity: 0.9; transition: opacity var(--transicion); }
.footer-redes a:hover { opacity: 1; }
.footer-redes__icono {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	box-sizing: border-box;
	flex: none;
}
.footer-redes__icono--ninguno { width: 18px; height: 18px; color: var(--rs-color, currentColor); }
.footer-redes__icono--redondeado,
.footer-redes__icono--cuadrado { width: 38px; height: 38px; }
.footer-redes__icono--redondeado { border-radius: 50%; }
.footer-redes__icono--cuadrado { border-radius: 8px; }
.footer-redes__icono--contorno { border: 1.5px solid var(--rs-color, currentColor); color: var(--rs-color, currentColor); }
.footer-redes__icono--continuo { background-color: var(--rs-color, currentColor); color: var(--color-redes-texto, #ffffff); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .28); } /* el aro deja ver los colores de marca muy oscuros (TikTok, X) sobre un fondo oscuro */

/* ==========================================================================
   404
   ========================================================================== */
.pagina-404 { text-align: center; padding: 5rem 0; }
.pagina-404 h1 { font-size: 4rem; color: var(--color-primario); }

/* Mantención: tarjeta centrada sobre un fondo con brillos del color primario. Logo según el fondo (versión oscura o clara, o caja blanca si no hay logo oscuro); todo sale de la paleta. */
.mantencion { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1.25rem; min-height: 100vh; min-height: 100dvh; padding: 2rem 1.25rem; background:
	radial-gradient(60% 50% at 85% 0%, color-mix(in srgb, var(--color-primario) 22%, transparent), transparent 70%),
	radial-gradient(55% 45% at 5% 100%, color-mix(in srgb, var(--color-primario) 14%, transparent), transparent 70%),
	var(--color-fondo); }
.mantencion__tarjeta { width: min(100%, 520px); padding: clamp(1.8rem, 5vw, 2.8rem); border: 1px solid var(--color-borde); border-radius: 24px; background: color-mix(in srgb, var(--color-fondo) 82%, var(--color-fondo-suave)); box-shadow: 0 24px 60px color-mix(in srgb, var(--color-sombra) 14%, transparent); text-align: center; }
.mantencion__logo { display: inline-flex; align-items: center; justify-content: center; margin-bottom: 1.6rem; }
.mantencion__logo img { display: block; width: auto; max-width: min(240px, 100%); max-height: 64px; }
.mantencion__logo--caja { padding: .6rem 1rem; border-radius: 14px; background: #fff; }
.mantencion__nombre { font-size: 1.5rem; font-weight: 800; letter-spacing: -.02em; color: var(--color-texto); }
.mantencion__icono { display: grid; place-items: center; width: 64px; height: 64px; margin: 0 auto 1.2rem; border-radius: 50%; background: color-mix(in srgb, var(--color-primario) 14%, transparent); color: var(--color-primario); }
.mantencion__etiqueta { margin: 0 0 .5rem; color: var(--color-primario); font-size: .76rem; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; }
.mantencion h1 { margin: 0; font-size: clamp(1.6rem, 5vw, 2.2rem); line-height: 1.15; letter-spacing: -.03em; color: var(--color-texto); }
.mantencion__mensaje { margin: 1rem 0 0; color: var(--color-texto-suave); line-height: 1.65; }
.mantencion__contacto { display: inline-flex; align-items: center; justify-content: center; min-height: 46px; margin-top: 1.6rem; padding: .6rem 1.4rem; border-radius: var(--boton-radio, 999px); background: var(--color-boton-fondo); color: var(--color-boton-texto); font-weight: 700; text-decoration: none; }
.mantencion__contacto:hover { background: var(--color-boton-hover-fondo, var(--color-boton-fondo)); color: var(--color-boton-hover-texto, var(--color-boton-texto)); }
/* .footer-redes/.footer-redes__icono ya traen su estilo; acá se repone el display:flex que en el footer depende de .footer-col. */
.mantencion__redes { margin-top: 1.6rem; }
.mantencion__redes .footer-redes { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 0.6rem; list-style: none; margin: 0; padding: 0; }
.mantencion__pie { margin: 0; color: var(--color-texto-suave); font-size: .8rem; }

/* ==========================================================================
   Páginas nativas de contenido (contacto, quiénes somos, políticas...) y
   marcas
   ========================================================================== */
.pagina-nativa { padding-bottom: 3rem; }
.pagina-contenido { width: 100%; }
.pagina-contenido h2 { margin: 1.5rem 0 0.75rem; }
.pagina-contenido p { color: var(--color-texto-suave); margin-bottom: 1rem; }
.pagina-contenido--intro { margin-bottom: 2rem; }
.pagina-nativa--nosotros .pagina-contenido { max-width: none; }
.nosotros-editorial__hero { padding: clamp(1.7rem, 5vw, 4rem); border-radius: 20px; background: linear-gradient(135deg, var(--cms-hero-inicio, #edf3ef), var(--cms-hero-fin, #f7f4ec) 80%); }
.nosotros-editorial__eyebrow { display: block; margin-bottom: .8rem; color: var(--cms-acento, #42644d); font-size: .78rem; font-weight: 800; letter-spacing: .13em; text-transform: uppercase; }
.nosotros-editorial__hero h2 { max-width: 18ch; margin: 0 0 1rem; font-size: clamp(1.8rem, 4vw, 3.2rem); line-height: 1.1; letter-spacing: -.035em; }
.nosotros-editorial__hero p { max-width: 68ch; margin: 0; font-size: 1.06rem; line-height: 1.7; }
.nosotros-editorial__grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1rem; margin: 1.4rem 0 2rem; }
.nosotros-editorial__grid article { padding: clamp(1.3rem, 2vw, 2rem); border: 1px solid var(--color-borde); border-radius: 14px; }
.nosotros-editorial__grid span { display: block; margin-bottom: .7rem; color: var(--color-primario); font-size: .8rem; font-weight: 800; }
.nosotros-editorial__grid h3 { margin: 0 0 .5rem; }
.nosotros-editorial__grid p { margin: 0; line-height: 1.6; }
.nosotros-editorial__relato { max-width: 75ch; margin: 0 0 2rem; }
.nosotros-editorial__relato h2 { margin: 0 0 .8rem; }
.nosotros-editorial__relato p { line-height: 1.7; }
.nosotros-editorial__cierre { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 1rem; padding: 1.5rem 0; border-top: 1px solid var(--color-borde); }
.nosotros-editorial__cierre p { max-width: 60ch; margin: 0; }
.nosotros-editorial__cierre a { color: var(--color-primario); font-weight: 700; }
@media (max-width: 720px) { .nosotros-editorial__grid { grid-template-columns: 1fr; } }

/* Contacto: editorial, con información real de Configuración general. */
.contacto-pagina { padding-bottom: 4rem; }
.contacto-breadcrumbs .breadcrumbs { margin-bottom: 0; }
.contacto-hero { background: var(--color-fondo-suave); }
.contacto-hero__interior { padding-top: clamp(2.5rem, 6vw, 5rem); padding-bottom: clamp(2.5rem, 6vw, 5rem); }
.contacto-ceja { display: block; color: var(--color-primario); font-size: .78rem; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; margin-bottom: .7rem; }
.contacto-hero h1 { max-width: 16ch; font-size: clamp(2.5rem, 5vw, 4.5rem); line-height: 1.1; letter-spacing: -.04em; }
.contacto-hero p { max-width: 56ch; color: var(--color-texto-suave); font-size: clamp(1.05rem, 2vw, 1.25rem); }
.contacto-contenido { display: grid; grid-template-columns: minmax(260px, .8fr) minmax(0, 1.2fr); gap: clamp(1.5rem, 5vw, 5rem); align-items: start; padding-top: clamp(2rem, 5vw, 4rem); }
.contacto-datos, .contacto-mensaje { min-width: 0; }
.contacto-datos { padding: clamp(1.5rem, 3vw, 2.2rem); border: 1px solid var(--color-borde); border-radius: 18px; }
.contacto-datos h2, .contacto-mensaje h2 { margin-bottom: .35em; font-size: clamp(1.5rem, 3vw, 2rem); }
.contacto-datos__intro, .contacto-mensaje > p { color: var(--color-texto-suave); margin-bottom: 1.3rem; }
.contacto-dato { display: grid; grid-template-columns: 40px minmax(0, 1fr); gap: .85rem; align-items: center; padding: 1.1rem 0; border-top: 1px solid var(--color-borde); overflow-wrap: anywhere; }
a.contacto-dato:hover strong { color: var(--color-primario); }
.contacto-dato__icono { display: grid; place-items: center; width: 38px; height: 38px; border-radius: 50%; background: var(--color-fondo-suave); color: var(--color-primario); font-size: 1.25rem; }
.contacto-dato small { display: block; color: var(--color-texto-suave); font-size: .78rem; }
.contacto-dato strong { display: block; font-weight: 650; }
.contacto-mensaje { padding: clamp(1.5rem, 3vw, 2.2rem); border: 1px solid var(--color-borde); border-radius: 18px; }
.contacto-formulario { display: grid; gap: 1rem; }
.contacto-formulario label { display: grid; gap: .35rem; font-weight: 600; }
.contacto-formulario input, .contacto-formulario textarea { width: 100%; border: var(--campo-borde-px, 1px) solid var(--campo-borde, #dddddd); border-radius: var(--campo-radio, 8px); background: var(--campo-fondo, var(--color-fondo)); color: var(--color-texto); padding: .8rem 1rem; font: inherit; font-weight: 400; font-size: max(16px, 1rem); }
.contacto-formulario textarea { resize: vertical; }
.contacto-formulario .btn { justify-self: start; }
.contacto-estado { padding: .8rem 1rem; border-radius: 8px; background: var(--color-fondo-suave); }
.contacto-trampa { position: absolute; left: -9999px; }
.contacto-extra { margin-top: 2.5rem; }
.contacto-mapa { margin-top: clamp(2.5rem, 5vw, 4rem); }
.contacto-mapa__cabecera { margin-bottom: 1.25rem; }
.contacto-mapa__cabecera h2 { margin: 0 0 .4rem; font-size: clamp(1.5rem, 3vw, 2rem); }
.contacto-mapa__cabecera p { margin: 0; color: var(--color-texto-suave); }
.contacto-mapa iframe { display: block; width: 100%; height: clamp(280px, 35vw, 430px); border: 1px solid var(--color-borde); border-radius: var(--campo-radio, 8px); background: var(--color-fondo-suave); }
body[data-form-labels="hidden"] .contacto-etiqueta { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }
@media (max-width: 700px) { .contacto-contenido { grid-template-columns: 1fr; } }

/* iOS Safari amplía automáticamente la página al enfocar inputs menores
   de 16px; el buscador del theme puede configurarse más pequeño. */
@media (max-width: 1024px) {
	.search input { font-size: max(16px, var(--tam-buscador, 1rem)); }
}

.marca-encabezado {
	display: flex;
	align-items: center;
	gap: 1.25rem;
	margin-bottom: 1.5rem;
}
.marca-encabezado__logo {
	width: 88px;
	height: 88px;
	object-fit: contain;
	border: 1px solid var(--color-borde);
	border-radius: 8px;
	padding: 0.5rem;
	background: var(--color-fondo);
}

/* ==========================================================================
   Botones de texto (usados en carrito: actualizar/quitar)
   ========================================================================== */
.btn-link {
	background: none;
	border: none;
	padding: 0;
	cursor: pointer;
	color: var(--color-texto-suave);
	text-decoration: underline;
	font-size: inherit;
}
.btn-link:hover { color: var(--color-primario); }

/* Avisos del front: variante error para funciones no disponibles. */
.admin-flash {
	padding: 0.75em 1em;
	border-radius: var(--radio);
	margin-bottom: 1.25rem;
	font-size: 0.9rem;
}
.admin-flash--error { background: var(--color-error-fondo); color: var(--color-error); }

/* ==========================================================================
   Campos de formulario (checkout)
   ========================================================================== */
/* Fondo de fieldsets configurable mediante --fieldset-fondo. */
.admin-form fieldset,
fieldset {
	border: 1px solid var(--color-borde);
	border-radius: var(--radio);
	padding: 1rem 1.25rem 1.25rem;
	margin-bottom: 1.25rem;
	background: var(--fieldset-fondo, #fafafa);
}
legend { font-weight: 600; font-size: 1.25rem; padding: 0 0.4em; }
.admin-campo { margin-bottom: 1rem; }
.admin-campo label { display: block; font-size: 0.85rem; font-weight: 600; margin-bottom: 0.3rem; }
body[data-form-labels="hidden"] main .admin-campo > label { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }
body[data-form-labels="hidden"] main .categoria-toolbar__grupo > label,
body[data-form-labels="hidden"] main .entrega-estimada-modal__label,
body[data-form-labels="hidden"] main .resenas__etiqueta { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }
.admin-campo input[type="text"],
.admin-campo input[type="email"],
.admin-campo input[type="tel"],
.admin-campo input[type="number"],
.admin-campo input[type="password"],
.admin-campo select,
.admin-campo textarea {
	width: 100%;
	padding: 0.55em 0.7em;
	border: 1px solid var(--campo-borde, var(--color-borde));
	border-width: var(--campo-borde-px, 1px);
	border-radius: var(--campo-radio, 6px);
	background-color: var(--campo-fondo, var(--color-fondo));
	line-height: var(--campo-line-height, normal);
}
/* Altura solo en campos de una línea — .admin-campo textarea define la
   suya propia más abajo (min-height, varias filas) y NO debe heredar esto,
   quedaría comprimida a la altura de un input de una línea. */
.admin-campo input[type="text"],
.admin-campo input[type="email"],
.admin-campo input[type="tel"],
.admin-campo input[type="number"],
.admin-campo input[type="password"],
.admin-campo select {
	height: var(--campo-altura, auto);
}
.admin-campo select:not([multiple]):not([size]) { padding-inline-end: 2.75em; }
/* El placeholder se pinta igual en registro, checkout, contacto, reseñas y
   extensiones. El buscador del header tiene sus propias variables y una
   regla más específica arriba. */
input::placeholder,
textarea::placeholder {
	text-overflow: ellipsis;
	color: var(--campo-placeholder-color, #94a3b8);
	font-size: var(--campo-placeholder-tamano, 14px);
	font-weight: var(--campo-placeholder-peso, 400);
	opacity: 1;
}
.admin-campo-fila { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
.admin-check { display: flex; align-items: center; gap: 0.5rem; margin-bottom: 0.6rem; }
.admin-check label { margin: 0; font-weight: 400; }
input[type="radio"],
input[type="checkbox"] {
	accent-color: var(--campo-radio-color, var(--color-primario));
}

/* El checkout conserva su padding propio. El foco se define una sola vez
   para los campos del front y se ajusta desde el Theme editor; el admin
   usa su propia hoja de estilos. */
.checkout-main .admin-campo input[type="text"],
.checkout-main .admin-campo input[type="email"],
.checkout-main .admin-campo input[type="number"],
.checkout-main .admin-campo select {
	padding: 0.75em 0.85em;
	transition: border-color var(--transicion), box-shadow var(--transicion);
}
.checkout-main .admin-campo select:not([multiple]):not([size]) { padding-inline-end: 2.75em; }
@supports (appearance: base-select) and selector(::picker(select)) {
	.admin-campo select:not([multiple]):not([size]),
	.checkout-main .admin-campo select:not([multiple]):not([size]) { padding-inline-end: .9em; }
}

/* La misma lista en todos los navegadores. JS solo sincroniza esta vista
   con el <select> real; sin JS permanece el control nativo de arriba. */
.vc-select { display: inline-block; position: relative; max-width: 100%; min-width: 0; vertical-align: middle; }
.admin-campo .vc-select, .resenas__formulario .vc-select, .entrega-estimada-modal .vc-select { display: block; width: 100%; }
.categoria-toolbar__grupo .vc-select__trigger { font-size: .875rem; font-weight: 600; }
@media (max-width: 380px) { .categoria-toolbar__grupo .vc-select { width: 100%; } }
select.vc-select__native { position: absolute; inline-size: 1px; block-size: 1px; padding: 0; margin: 0; opacity: 0; pointer-events: none; clip-path: inset(50%); }
.vc-select__trigger { line-height: var(--interlineado, 1.5); line-height: round(up, calc(var(--interlineado, 1.5) * 1em), 2px); display: flex; align-items: center; gap: .65em; width: 100%; min-height: var(--campo-altura, 40px); padding: .55em .85em; border: var(--campo-borde-px, 1px) solid var(--campo-borde, #dddddd); border-radius: var(--campo-radio, 8px); background: var(--campo-fondo, var(--color-fondo)); color: var(--color-texto); box-shadow: 0 1px 2px color-mix(in srgb, var(--color-sombra) 4.5%, transparent); font: inherit; cursor: pointer; transition: border-color .18s ease, box-shadow .18s ease; }
.vc-select__trigger:hover:not(:disabled), .vc-select__trigger--abierto { border-color: color-mix(in srgb, var(--campo-borde, #dddddd) 70%, var(--campo-foco-borde, var(--color-primario))); box-shadow: 0 2px 7px color-mix(in srgb, var(--color-sombra) 9%, transparent); }
.vc-select__trigger:focus, .vc-select--invalido .vc-select__trigger { outline: none; border-color: var(--campo-foco-borde, var(--color-primario)); }
.vc-select__trigger:disabled { opacity: .65; cursor: not-allowed; }
.vc-select__valor { flex: 1; min-width: 0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; text-align: left; }
.vc-select--vacio .vc-select__valor { color: var(--color-texto-suave); }
.vc-select__flecha { flex: none; width: .5em; height: .5em; margin: -.25em .15em 0 .3em; border-right: 2px solid var(--color-texto-suave); border-bottom: 2px solid var(--color-texto-suave); transform: rotate(45deg); transition: transform .18s ease; }
.vc-select__trigger--abierto .vc-select__flecha { transform: rotate(225deg); margin-top: .25em; }
.vc-select__menu { position: fixed; z-index: 1010; max-height: min(48vh, 25rem); overflow-y: auto; padding: .35rem; border: var(--campo-borde-px, 1px) solid var(--campo-borde, #dddddd); border-radius: calc(var(--campo-radio, 8px) + 3px); background: var(--campo-fondo, var(--color-fondo)); color: var(--color-texto); box-shadow: 0 14px 32px color-mix(in srgb, var(--color-texto) 16%, transparent); }
.vc-select__opcion { display: flex; align-items: center; gap: .6rem; width: 100%; min-height: 2.25rem; padding: .42rem .7rem; border: 0; border-radius: max(4px, calc(var(--campo-radio, 8px) - 3px)); background: transparent; color: var(--color-texto); font: inherit; font-size: .9rem; line-height: 1.35; text-align: left; cursor: pointer; }
.vc-select__opcion:hover, .vc-select__opcion:focus-visible, .vc-select__opcion[aria-selected="true"] { outline: none; background: var(--color-fondo-suave); }
.vc-select__opcion[aria-selected="true"] { font-weight: 700; }
.vc-select__opcion[aria-selected="true"]::after { content: '✓'; margin-left: auto; color: var(--color-primario); }
.vc-select__opcion:disabled { opacity: .55; cursor: not-allowed; }

.recaptcha-v2 { max-width: 100%; overflow-x: auto; padding-block: .35rem; }
body[data-form-labels] :where(input:not([type]), input[type="text"], input[type="email"], input[type="tel"], input[type="password"], input[type="url"], input[type="date"], input[type="search"], input[type="number"]:not([name="cantidad"]), select, textarea):focus {
	outline: none;
	border-color: var(--campo-foco-borde, var(--color-primario));
}
/* El buscador queda sin borde ni anillo mientras se escribe. */
body[data-form-labels] .search input:focus { outline: none; box-shadow: none; }
body[data-form-labels] .search__barra:focus-within { box-shadow: none; }
/* El fondo del autocompletado no debe tapar el anillo de foco del login ni
   del checkout. Se conserva la misma superficie elegida en el editor. */
body[data-form-labels] input:-webkit-autofill { border-color: var(--campo-borde, #dddddd); box-shadow: inset 0 0 0 100px var(--campo-fondo); -webkit-text-fill-color: var(--color-texto); }
body[data-form-labels] input:-webkit-autofill:focus { border-color: var(--campo-foco-borde, var(--color-primario)); box-shadow: inset 0 0 0 100px var(--campo-fondo); }

/* ==========================================================================
   Popup de confirmación al agregar al carrito
   ========================================================================== */
.modal-carrito {
	position: fixed;
	inset: 0;
	z-index: 110;
	background: color-mix(in srgb, var(--color-velo) var(--velo-opacidad, 55%), transparent);
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 1rem;
}
.modal-carrito__panel {
	background: var(--color-fondo);
	border-radius: var(--radio);
	box-shadow: var(--sombra);
	padding: 1.5rem;
	width: min(420px, 100%);
	max-height: 90vh;
	overflow-y: auto;
	position: relative;
}
.modal-carrito__cerrar {
	position: absolute;
	top: 0.75rem;
	right: 0.75rem;
	background: none;
	border: none;
	font-size: 1.4rem;
	line-height: 1;
	cursor: pointer;
	color: var(--color-texto-suave);
}
.modal-carrito__titulo { font-weight: 700; color: var(--color-exito, #1f5c37); margin-bottom: 1rem; }
.modal-carrito__item {
	display: flex;
	align-items: center;
	gap: 0.75rem;
	padding-bottom: 1rem;
	border-bottom: 1px solid var(--color-borde);
	margin-bottom: 1rem;
}
.modal-carrito__item img { width: 56px; height: 56px; object-fit: cover; border-radius: 6px; flex-shrink: 0; }
.modal-carrito__item-info { flex: 1; min-width: 0; }
.modal-carrito__nombre { font-weight: 600; font-size: 0.9rem; margin: 0 0 0.2em; }
.modal-carrito__meta { font-size: 0.8rem; color: var(--color-texto-suave); margin: 0; }
.modal-carrito__item-subtotal { font-weight: 700; white-space: nowrap; }
.modal-carrito__desglose { display: grid; gap: 0.5rem; margin-bottom: 1.25rem; font-size: 0.88rem; }
.modal-carrito__desglose li { display: flex; justify-content: space-between; gap: 1rem; }
.modal-carrito__desglose li:last-child { color: var(--color-texto-suave); font-size: 0.82rem; }
.modal-carrito__acciones { display: flex; gap: 0.75rem; }
.modal-carrito__acciones .btn {
	flex: 1;
	text-align: center;
	font-size: 0.88rem;
	padding: 0.75em 0.6em;
	white-space: nowrap;
}

/* Side cart: panel de carrito y sugerencias; app.js gestiona apertura, cierre y respuesta AJAX. */
.side-cart-overlay {
	position: fixed;
	inset: 0;
	z-index: 110;
	background: transparent;
	display: flex;
	justify-content: flex-end;
	transition: background var(--transicion);
}
.side-cart-overlay.is-open { background: color-mix(in srgb, var(--color-velo) var(--velo-opacidad, 55%), transparent); }
.side-cart {
	background: var(--color-fondo);
	box-shadow: -12px 0 32px color-mix(in srgb, var(--color-sombra) 12%, transparent);
	width: min(440px, 100vw);
	height: 100%;
	height: 100dvh;
	display: flex;
	flex-direction: column;
	/* Esquinas redondeadas solo del lado que se ve (el panel entra por la derecha); overflow recorta el contenido a esa curva. */
	border-radius: var(--side-cart-radio, 18px) 0 0 var(--side-cart-radio, 18px);
	overflow: hidden;
	/* 102 % deja fuera también la sombra mientras está cerrado. */
	transform: translateX(102%);
	transition: transform .34s cubic-bezier(.22, 1, .36, 1);
}
@media (prefers-reduced-motion: reduce) { .side-cart { transition: none; } }
.side-cart-overlay.is-open .side-cart { transform: translateX(0); }
.side-cart__header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 1.35rem 1.5rem;
	border-bottom: 1px solid var(--color-borde);
	flex-shrink: 0;
}
.side-cart__titulo { font-weight: 700; font-size: 1.25rem; margin: .1rem 0 0; }
.side-cart__eyebrow { display: block; color: var(--color-texto-suave); font-size: .72rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; }
.side-cart__cerrar {
	/* Círculo a prueba de Safari: sin el relleno propio del botón, sin encogerse en la fila y siempre cuadrado (en iPad se veía como un huevo horizontal). */
	display: inline-flex; align-items: center; justify-content: center; flex: none; box-sizing: border-box;
	-webkit-appearance: none; appearance: none; padding: 0; margin: 0;
	background: var(--color-fondo);
	border: 1px solid var(--color-borde);
	border-radius: 50%;
	width: 2.4rem;
	height: 2.4rem;
	min-width: 2.4rem;
	min-height: 2.4rem;
	aspect-ratio: 1 / 1;
	font-size: 1.5rem;
	line-height: 1;
	cursor: pointer;
	color: var(--color-texto-suave);
}
.side-cart__conteo { margin: 0; padding: 1rem 1.5rem 0; color: var(--color-texto-suave); font-size: .82rem; }
.side-cart__items { flex: 1; overflow-y: auto; padding: 0 1.5rem; }
.side-cart__item {
	display: grid;
	grid-template-columns: 80px minmax(0, 1fr) auto;
	align-items: start;
	gap: 1rem;
	padding: 1.1rem 0;
	border-bottom: 1px solid var(--color-borde);
}
.side-cart__item-imagen { display: block; background: var(--color-fondo-suave); border-radius: .75rem; overflow: hidden; }
.side-cart__item-imagen img { width: 80px; height: 88px; object-fit: contain; }
.side-cart__item-sin-imagen { width: 80px; height: 88px; background: var(--color-fondo-suave); display: block; }
.side-cart__item-info { min-width: 0; display: flex; flex-direction: column; align-items: flex-start; gap: .4rem; }
.side-cart__item-nombre { font-weight: 650; font-size: .88rem; line-height: 1.35; margin: 0; }
.side-cart__item-cantidad { display: flex; align-items: center; gap: .5rem; color: var(--color-texto-suave); font-size: .78rem; }
.side-cart__item-cantidad .selector-cantidad--mini { transform: scale(.85); transform-origin: left center; }
.side-cart__item-precio { font-size: .85rem; font-weight: 700; white-space: nowrap; margin: 0; text-align: right; }
.side-cart__quitar { background: none; border: none; cursor: pointer; color: var(--color-texto-suave); padding: 0; font: inherit; font-size: .78rem; text-decoration: underline; text-underline-offset: .15em; }
.side-cart__quitar:hover { color: var(--color-error, #b91c1c); }
.side-cart__vacio { color: var(--color-texto-suave); padding: 1.5rem 0; }
.side-cart__divider { border-top: 1px dashed var(--color-borde); margin: 0 1.5rem; }
.side-cart__sugeridos { padding: 1rem 1.5rem; flex-shrink: 0; }
.side-cart__sugeridos-cabecera {
	display: flex;
	align-items: center;
	justify-content: space-between;
	font-size: 0.78rem;
	font-weight: 700;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	color: var(--color-texto-suave);
	margin-bottom: 0.75rem;
}
.side-cart__sugeridos-nav { display: flex; gap: 0.4rem; }
.side-cart__sugeridos-flecha {
	background: none;
	border: 1px solid var(--color-borde);
	border-radius: 999px;
	width: 1.6rem;
	height: 1.6rem;
	line-height: 1;
	cursor: pointer;
	color: var(--color-texto);
}
.side-cart__sugeridos-track {
	display: flex;
	overflow-x: auto;
	scroll-snap-type: x mandatory;
	gap: 1rem;
	/* Sin scrollbar visible a propósito — el carrusel se navega con las
	   flechas de arriba (o gesto táctil), no hace falta la barra nativa. */
	scrollbar-width: none;
}
.side-cart__sugeridos-track::-webkit-scrollbar { display: none; }
.side-cart__sugerido {
	flex: 0 0 100%;
	scroll-snap-align: start;
	display: flex;
	align-items: center;
	gap: 0.85rem;
	color: inherit;
	text-decoration: none;
}
.side-cart__sugerido img { width: 64px; height: 64px; object-fit: contain; flex-shrink: 0; border-radius: .75rem; background: var(--color-fondo-suave); }
.side-cart__sugerido-info { display: flex; flex-direction: column; gap: 0.3rem; min-width: 0; }
.side-cart__sugerido-nombre { font-size: 0.88rem; font-weight: 500; }
.side-cart__sugerido-precio { font-weight: 700; color: var(--color-precio-oferta, var(--color-primario)); }
.side-cart__sugerido-precio-tachado { color: var(--color-texto-suave); text-decoration: line-through; font-size: 0.85rem; }
.side-cart__footer { padding: 1.1rem 1.5rem 1.5rem; border-top: 1px solid var(--color-borde); flex-shrink: 0; background: var(--color-fondo); }
.side-cart__subtotal { display: flex; justify-content: space-between; gap: 1rem; font-weight: 700; margin-bottom: 1rem; }
.side-cart__acciones { display: grid; gap: .6rem; }
.side-cart__acciones .btn { display: flex; align-items: center; justify-content: center; text-align: center; white-space: nowrap; }
.side-cart__acciones .btn:not(.btn-primary) { background: var(--color-fondo); border: 1px solid var(--color-texto); color: var(--color-texto); }

/* ==========================================================================
   Carrito
   ========================================================================== */
.carrito { padding: 2rem 0 4rem; }
.carrito h1 { margin: 0 0 1.5rem; }
.carrito-items { list-style: none; margin: 0; padding: 0; }
.carrito-item { display: grid; grid-template-columns: 116px minmax(0, 1fr); align-items: start; gap: 1.4rem; padding: 1.2rem 0; border-top: 1px solid var(--color-borde); }
.carrito-item:last-child { border-bottom: 1px solid var(--color-borde); }
.carrito-item__imagen { display: block; width: 116px; height: 116px; border-radius: .5rem; overflow: hidden; background: var(--color-fondo-suave); }
.carrito-item__imagen picture, .carrito-item__imagen img { display: block; width: 100%; height: 100%; }
.carrito-item__imagen img { object-fit: contain; }
.carrito-item__contenido { display: grid; grid-template-columns: minmax(0, 1fr) 138px; grid-template-rows: minmax(0, 1fr) auto; gap: .65rem 1.2rem; min-width: 0; min-height: 116px; }
.carrito-item__detalle { display: flex; flex-direction: column; align-items: flex-start; gap: .35rem; min-width: 0; }
.carrito-item__nombre { color: var(--color-texto); font-weight: 700; text-decoration: none; }
.carrito-item__nombre:hover { text-decoration: underline; }
.carrito-item__variante { display: block; margin-top: .2rem; color: var(--color-texto-suave); font-size: .8rem; }
.carrito-item__stock { color: var(--color-exito, #1f5c37); font-size: .78rem; }
.carrito-item__stock::before { content: '✓'; margin-right: .3rem; }
.carrito-item__precio-bloque, .carrito-item__subtotal-bloque { display: grid; gap: .15rem; margin-top: auto; }
.carrito-item__precio-bloque small, .carrito-item__subtotal-bloque small { color: var(--color-texto-suave); font-size: .72rem; font-weight: 500; }
.carrito-item__precio { font-size: .9rem; font-weight: 650; white-space: nowrap; }
.carrito-item__eliminar { grid-column: 1 / -1; align-self: end; }
.carrito-item__quitar { padding: 0; border: 0; background: none; color: var(--color-texto-suave); font: inherit; font-size: .82rem; text-decoration: underline; text-underline-offset: .2em; cursor: pointer; }
.carrito-item__quitar:hover { color: var(--color-error, #b3261e); }
.carrito-item__compra { display: flex; flex-direction: column; align-items: flex-end; gap: .75rem; min-width: 0; }
.carrito-item__subtotal-bloque { text-align: right; }
.carrito-item-subtotal { font-size: .95rem; white-space: nowrap; }
.carrito-cantidad { display: inline-flex; position: relative; align-items: center; }
.carrito-cantidad input { width: 4rem; padding: 0.4em; border: var(--campo-borde-px, 1px) solid var(--campo-borde, #dddddd); border-radius: var(--campo-radio, 6px); }
/* Indicador AJAX de cantidad fuera del ancho del selector, alineado con el borde de las acciones. */
.carrito-cantidad__cargando {
	position: absolute;
	right: calc(100% + .5rem);
	top: calc(50% - 8px);
	width: 16px;
	height: 16px;
	border: 2px solid var(--color-borde);
	border-top-color: var(--color-primario);
	border-radius: 50%;
	animation: carrito-girar 600ms linear infinite;
	opacity: 0;
	visibility: hidden;
	transition: opacity 150ms ease;
}
.carrito-cantidad__cargando--visible { opacity: 1; visibility: visible; }
@keyframes carrito-girar { to { transform: rotate(360deg); } }
/* Resumen abierto, alineado con el primer producto como en un tema de tienda. */
.carrito-grid { display: grid; grid-template-columns: minmax(0, 1.7fr) minmax(280px, .95fr); gap: clamp(1.5rem, 3vw, 3rem); align-items: start; }
.carrito-lateral {
	background: transparent;
	border: 0;
	padding: 0;
	position: sticky;
	top: 1.5rem;
}
.carrito-lateral h2 { font-size: 1.2rem; margin: 0 0 1.15rem; }
.carrito-lateral__linea, .carrito-lateral__total { display: flex; justify-content: space-between; gap: 1rem; margin: 0; padding: .75rem 0; font-size: .9rem; }
.carrito-lateral__linea strong, .carrito-lateral__total strong { white-space: nowrap; }
.carrito-lateral__total { margin-top: .35rem; border-top: 1px solid var(--color-borde); font-weight: 700; font-size: 1rem; }
.carrito-monto-minimo { font-size: 0.85rem; color: var(--color-error, #b3261e); margin-top: 0.4rem; }
.carrito-lateral .btn { display: flex; align-items: center; justify-content: center; text-align: center; margin-top: 1.25rem; }
.carrito-lateral__nota { margin: 0 0 .9rem; color: var(--color-texto-suave); font-size: .78rem; }
@media (max-width: 800px) {
	.carrito-grid { grid-template-columns: 1fr; }
}

.btn-icono {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 2.1rem;
	height: 2.1rem;
	padding: 0;
	border: none;
	border-radius: 999px;
	background: none;
	cursor: pointer;
	color: var(--color-texto-suave);
	transition: background var(--transicion), color var(--transicion);
}
.btn-icono:hover { background: var(--color-fondo-suave); }
.btn-icono--peligro:hover { color: var(--color-error); background: var(--color-error-fondo, #fbe7e4); }

/* En teléfono los importes y la cantidad ocupan el ancho completo bajo
   imagen/datos, evitando que se compriman en pantallas de 320 px. */
@media (max-width: 640px) {
	.carrito-item { grid-template-columns: 80px minmax(0, 1fr); gap: .8rem 1rem; }
	.carrito-item__imagen { width: 80px; height: 96px; }
	.carrito-item__contenido { display: contents; }
	.carrito-item__detalle { grid-column: 2; grid-row: 1; }
	.carrito-item__compra { grid-column: 1 / -1; grid-row: 2; flex-direction: row; justify-content: space-between; align-items: end; }
	.carrito-item__eliminar { grid-column: 1 / -1; grid-row: 3; }
	.carrito-cantidad__cargando { right: auto; left: calc(100% + .5rem); }
}

/* Estado accesible de las acciones AJAX del carrito; hidden conserva su comportamiento nativo. */
.carrito-estado.container {
	position: fixed;
	inset-inline: 12px;
	bottom: 12px;
	z-index: 120;
	max-width: var(--ancho-maximo);
	margin: 0 auto;
	padding: 12px 16px;
	border: 1px solid var(--color-borde);
	border-radius: var(--radio);
	background: var(--color-fondo);
	color: var(--color-texto);
	box-shadow: var(--sombra);
	font-size: .9rem;
	line-height: 1.45;
	text-align: center;
	overflow-wrap: anywhere;
}

/* ==========================================================================
   Checkout
   ========================================================================== */
/* La línea inferior es una sombra para no sumar 1 px de alto: el header mide igual que el del carrito. */
.checkout-header { box-shadow: 0 1px 0 var(--color-borde); }
/* En móvil el alto es el mismo del header del carrito (mismo padding), para que al pasar a checkout no «salte»; en escritorio también (86 px + borde = alto del header del sitio).
   Orden: menú, logo y «Volver» a la derecha (el menú móvil fija order en 1 y 2). */
.checkout-header__interior {
	display: flex;
	align-items: center;
	gap: 1rem;
	padding-top: var(--header-padding-top-movil, 1rem);
	padding-bottom: var(--header-padding-bottom-movil, 1rem);
	min-height: 0;
}
.checkout-header__interior .logo { order: 2; margin-right: 0; min-width: 0; }
.checkout-header__volver { order: 3; margin-left: auto; display: inline-flex; align-items: center; gap: .3rem; min-height: 38px; padding: 0 .5rem; color: var(--color-texto); font-size: .9rem; font-weight: 600; text-decoration: none; border-radius: 8px; white-space: nowrap; }
.checkout-header__volver:hover { color: var(--color-primario); }
@media (max-width: 480px) { .checkout-header__volver-largo { display: none; } }
@media (min-width: 1025px) {
	.checkout-header__interior { min-height: 0; padding-top: var(--header-padding-top-escritorio, 1rem); padding-bottom: var(--header-padding-bottom-escritorio, 1rem); }
}
/* El panel derecho ocupa desde debajo del header hasta el borde inferior
   visible. El fondo se prolonga fuera del ancho máximo sin mover el
   contenido del resumen ni alterar las dos columnas. */
.checkout-root { overflow-x: clip; }
.checkout-page { display: flex; flex-direction: column; min-height: 100vh; min-height: 100dvh; overflow-x: clip; }
.checkout-main { display: flex; flex-direction: column; flex: 1; width: 100%; min-width: 0; padding: 2.25rem 1.25rem 4rem; }
/* Dos columnas continuas: datos/envío/pago a la izquierda y pedido a la
   derecha. Los controles externos usan form="checkout-confirmar" nativo. */
.checkout-grid { display: grid; flex: 1; width: 100%; min-width: 0; grid-template-columns: minmax(0, 1.45fr) minmax(320px, 1fr); gap: clamp(1.5rem, 3.5vw, 3.5rem); align-items: stretch; }
.checkout-form { min-width: 0; }
.checkout-form h1 { margin: 0 0 1.2rem; font-size: clamp(1.7rem, 2.6vw, 2.1rem); }
.checkout-aviso-ancho { grid-column: 1 / -1; }
.checkout-seccion { margin: 0 0 1.75rem; }
.checkout-seccion__titulo, .checkout-main .checkout-seccion legend, .checkout-main #clcf-fieldset legend { display: block; margin: 0 0 .8rem; padding: 0; font-size: .75rem; font-weight: 700; letter-spacing: .085em; line-height: 1.4; text-transform: uppercase; color: var(--color-texto-suave); }
.checkout-campo-fila { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .75rem; }
.checkout-campo-fila > .admin-campo,
.checkout-main .admin-campo-fila > .admin-campo { min-width: 0; }
.checkout-main .admin-campo-fila { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.checkout-main .admin-campo { margin-bottom: .7rem; }
.checkout-pendiente { margin: 0; padding: .95rem 1rem; border-radius: .45rem; background: var(--color-fondo-suave); color: var(--color-texto-suave); font-size: .88rem; }
.campo-requerido { color: var(--color-error, #b3261e); margin-left: 0.15em; }

/* Los fieldsets del checkout conservan semántica de grupos sin borde, fondo ni padding. */
.checkout-main fieldset { border: none; background: transparent; padding: 0; margin: 0 0 1.75rem; min-width: 0; }
.checkout-main legend { padding: 0; font-size: 1rem; font-weight: 600; margin-bottom: 0.75rem; }

/* Documento tributario: dos opciones visibles, como en un checkout de referencia. */
.clcf-documentos { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .75rem; }
.clcf-documento-opcion { display: flex; align-items: center; gap: .65rem; min-height: 54px; padding: .85rem .9rem; border: 1px solid var(--radio-opcion-borde, #dddddd); border-radius: var(--campo-radio, 10px); background: var(--radio-opcion-fondo, var(--color-fondo)); color: var(--color-texto); font-size: .95rem; line-height: 1.35; cursor: pointer; transition: border-color var(--transicion), background var(--transicion); }
.clcf-documento-opcion input { flex: none; width: 17px; height: 17px; margin: 0; accent-color: var(--campo-radio-color, var(--color-primario)); cursor: pointer; }
.clcf-documento-opcion:hover { border-color: var(--radio-opcion-borde-activo, var(--color-primario)); }
.clcf-documento-opcion:has(input:checked) { border-color: var(--radio-opcion-borde-activo, var(--color-primario)); background: var(--radio-opcion-fondo-activo, var(--color-fondo-suave)); }
.clcf-documento-opcion:has(input:focus-visible) { outline: none; border-color: var(--campo-foco-borde, var(--color-primario)); }
#clcf-factura-fields:not([hidden]) { margin-top: 1rem; min-width: 0; }
@media (max-width: 480px) { .clcf-documentos { grid-template-columns: 1fr; } }

.checkout-resumen {
	position: relative;
	isolation: isolate;
	background: transparent;
	border: 0;
	border-radius: 0;
	padding: clamp(1.75rem, 3vw, 2.7rem);
	align-self: stretch;
	min-width: 0;
	box-shadow: none;
}
.checkout-resumen::before {
	content: "";
	position: absolute;
	z-index: -1;
	top: -2.25rem;
	right: -100vw;
	bottom: -4rem;
	left: 0;
	background: var(--color-fondo-suave);
}
.checkout-resumen h2 { margin: 0 0 1.3rem; font-size: 1.2rem; }
.checkout-resumen__items { display: grid; gap: 0; list-style: none; margin: 0 0 .7rem; padding: 0; }
.checkout-resumen__items li { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: start; gap: 1rem; margin: 0; padding: .9rem 0; border-bottom: 1px solid var(--color-borde); font-size: .87rem; }
.checkout-resumen__items li b { display: block; font-weight: 650; }
.checkout-resumen__items li small { display: block; margin-top: .3rem; color: var(--color-texto-suave); font-size: .78rem; }
.checkout-resumen__items li strong { white-space: nowrap; text-align: right; }
.checkout-resumen__linea { display: flex; justify-content: space-between; gap: 1rem; margin: 0; padding: .7rem 0; font-size: .9rem; }
.checkout-resumen__linea strong { white-space: nowrap; }
.checkout-resumen__total { display: flex; justify-content: space-between; gap: 1rem; margin: .65rem 0 0; padding-top: 1.1rem; border-top: 1px solid var(--color-borde); font-size: 1rem; }
.checkout-resumen__total strong { white-space: nowrap; }
.checkout-resumen__total--final { font-size: 1.15rem; font-weight: 700; }
.checkout-resumen__impuestos { margin: .55rem 0 1.5rem; color: var(--color-texto-suave); font-size: .75rem; }
.checkout-resumen__ayuda { margin: .6rem 0 0; color: var(--color-texto-suave); font-size: .78rem; text-align: center; }
.checkout-envio-opcion { display: grid; grid-template-columns: 1.1rem minmax(0, 1fr); align-items: center; gap: .65rem; margin: .55rem 0; padding: .95rem 1rem; border: 1px solid var(--radio-opcion-borde, #dddddd); border-radius: var(--campo-radio, 10px); background: var(--radio-opcion-fondo, var(--color-fondo)); transition: border-color var(--transicion), background var(--transicion); }
.checkout-envio-opcion:hover, .checkout-envio-opcion:has(input:checked) { border-color: var(--radio-opcion-borde-activo, var(--color-primario)); }
.checkout-envio-opcion:has(input:checked) { background: var(--radio-opcion-fondo-activo, var(--color-fondo-suave)); }
.checkout-envio-opcion:has(input:focus-visible), .checkout-medio-pago:has(input:focus-visible) { outline: none; border-color: var(--campo-foco-borde, var(--color-primario)); }
.checkout-envio-opcion input { margin: 0; }
.checkout-envio-opcion label { display: flex; justify-content: space-between; align-items: center; gap: .75rem; min-width: 0; width: 100%; cursor: pointer; }
.checkout-envio-opcion__nombre { min-width: 0; }
.checkout-envio-opcion__nombre small { display: block; margin-top: .15rem; color: var(--color-texto-suave); font-size: .8rem; font-weight: 400; }
.checkout-envio-opcion__precio { flex: none; white-space: nowrap; }
.checkout-confirmar { margin-top: 0; }
.checkout-terminos { display: grid; grid-template-columns: 20px minmax(0, 1fr); align-items: start; column-gap: .65rem; margin: 1rem 0; font-size: 0.85rem; }
.checkout-terminos input { grid-column: 1; width: 20px; height: 20px; margin: calc(.08rem - 1px) 0 0; cursor: pointer; }
.checkout-terminos__texto { grid-column: 2; display: flex; align-items: baseline; flex-wrap: wrap; gap: .25em; }
.checkout-terminos__texto label { margin: 0; }
.checkout-terminos a { color: var(--color-primario); }
.checkout-terminos__abrir { display: inline; margin: 0; padding: 0; border: 0; background: none; color: var(--color-primario); font: inherit; text-decoration: underline; cursor: pointer; }
.checkout-terminos-dialogo { width: min(92vw, 720px); max-height: min(85vh, 760px); max-height: min(85dvh, 760px); margin: auto; padding: 0; overflow: hidden; border: 1px solid var(--color-borde); border-radius: 16px; color: var(--color-texto); background: var(--color-fondo); box-shadow: 0 24px 70px color-mix(in srgb, var(--color-sombra-fuerte) 25%, transparent); }
.checkout-terminos-dialogo[open] { display: flex; flex-direction: column; }
.checkout-terminos-dialogo::backdrop { background: color-mix(in srgb, var(--color-velo) var(--velo-opacidad, 55%), transparent); }
.checkout-terminos-dialogo__cabecera { flex: none; display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: 1rem 1.35rem; border-bottom: 1px solid var(--color-borde); }
.checkout-terminos-dialogo__cabecera h2 { margin: 0; font-size: 1.2rem; line-height: 1.3; }
.checkout-terminos-dialogo__cerrar { display: grid; place-items: center; width: 36px; height: 36px; padding: 0; border: 0; border-radius: 50%; background: var(--color-fondo-suave); color: var(--color-texto); font: inherit; font-size: 1.5rem; line-height: 1; cursor: pointer; }
.checkout-terminos-dialogo__cerrar:hover { background: var(--color-borde); }
.checkout-terminos-dialogo__contenido { min-height: 0; padding: 1.25rem 1.4rem; overflow: auto; overscroll-behavior: contain; font-size: .94rem; line-height: 1.6; }
.checkout-terminos-dialogo__contenido > :first-child { margin-top: 0; }
.checkout-terminos-dialogo__contenido > :last-child { margin-bottom: 0; }
.checkout-terminos-dialogo__contenido h2 { margin: 1.3rem 0 .4rem; font-size: 1.08rem; line-height: 1.4; }
.checkout-terminos-dialogo__contenido h3 { margin: 1rem 0 .35rem; font-size: 1rem; line-height: 1.4; }
.checkout-terminos-dialogo__contenido p { margin: 0 0 .85rem; color: var(--color-texto-suave); }
.checkout-terminos-dialogo__contenido img, .checkout-terminos-dialogo__contenido table { max-width: 100%; }
.checkout-terminos-dialogo__acciones { flex: none; display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: .85rem 1.35rem; border-top: 1px solid var(--color-borde); font-size: .85rem; }
.checkout-terminos-dialogo__acciones a { color: var(--color-primario); }
.checkout-terminos-dialogo__aceptar { display: inline-flex; align-items: center; justify-content: center; min-height: 38px; padding: 0 1.1rem; line-height: 1; border: 0; border-radius: var(--boton-radio, 8px); background: var(--color-boton-fondo, var(--color-primario)); color: var(--color-boton-texto, #fff); font: inherit; font-weight: 700; cursor: pointer; }
.checkout-terminos-dialogo__aceptar:hover { background: var(--color-boton-hover-fondo, var(--color-primario-oscuro)); color: var(--color-boton-hover-texto, var(--color-boton-texto)); }
@media (max-width: 480px) {
	.checkout-terminos-dialogo { width: calc(100% - 1.5rem); max-height: calc(100dvh - 2rem); }
	.checkout-terminos-dialogo__cabecera, .checkout-terminos-dialogo__acciones { padding-right: 1rem; padding-left: 1rem; }
	.checkout-terminos-dialogo__contenido { padding: 1.1rem 1rem; }
}
.btn-checkout-confirmar[aria-disabled="true"] { opacity: .55; cursor: not-allowed; }
.vc-select--invalido .vc-select__trigger { border-color: var(--color-error, #b3261e); }
.btn-checkout-confirmar { width: 100%; text-transform: uppercase; letter-spacing: 0.02em; padding: 0.55em 1.4em; }

/* Medios de pago en una columna como la referencia; cada extensión aún
   puede proporcionar su imagen/banner. */
.checkout-medios-pago { display: grid; grid-template-columns: 1fr; gap: .6rem; }
.checkout-medio-pago {
	display: flex;
	align-items: center;
	gap: .7rem;
	padding: .95rem 1rem;
	border: 1px solid var(--radio-opcion-borde, #dddddd);
	border-radius: var(--campo-radio, 10px);
	cursor: pointer;
	text-align: left;
	background: var(--radio-opcion-fondo, var(--color-fondo));
	transition: border-color var(--transicion), background var(--transicion);
}
.checkout-medio-pago input { accent-color: var(--campo-radio-color, var(--color-primario)); margin: 0; flex: none; }
.checkout-medio-pago:hover { border-color: var(--radio-opcion-borde-activo, var(--color-primario)); }
.checkout-medio-pago:has(input:checked) {
	border-color: var(--radio-opcion-borde-activo, var(--color-primario));
	background: var(--radio-opcion-fondo-activo, var(--color-fondo-suave));
}
.checkout-medio-pago__imagen { flex: none; width: 3.25rem; height: 3.25rem; border-radius: 10px; object-fit: cover; }
.checkout-medio-pago__label { font-size: 0.9rem; font-weight: 600; }

/* Validador de RUT chileno en vivo (checkout, campos clcf_rut/clcf_rut_empresa
   — ver app.js) — solo feedback visual, el servidor sigue siendo quien
   valida de verdad. */
.campo-rut--invalido { border-color: var(--color-error, #b3261e) !important; }
.campo-rut--valido { border-color: var(--color-exito, #1f5c37) !important; }
.campo-rut-mensaje { display: block; font-size: 0.78rem; color: var(--color-error, #b3261e); margin-top: 0.25rem; }
/* Sin mensaje no ocupa espacio: antes reservaba una línea vacía bajo el RUT y los campos quedaban desparejos. */
.campo-rut-mensaje:empty { display: none; }
/* app.js marca los campos requeridos cuando el formulario dispara invalid. */
.campo-invalido { border-color: var(--color-error, #b3261e) !important; }
.checkout-redireccion, .checkout-error { text-align: center; padding: 3rem 0; }

/* Confirmación de compra: misma anchura del checkout, con jerarquía clara
   entre estado, detalle, envío y pago. */
.checkout-gracias { width: min(100%, 1040px); margin: 0 auto; padding: clamp(.25rem, 1.5vw, 1rem) 0 1rem; }
.checkout-gracias__hero {
    display: grid;
    grid-template-columns: 58px minmax(0, 1fr) auto;
    align-items: start;
    gap: 1.25rem;
    padding: clamp(1.4rem, 3vw, 2.4rem);
    border: 1px solid var(--color-borde);
    border-radius: 18px;
    background: var(--color-fondo-suave);
}
.checkout-gracias__hero--exito { --gracias-acento: var(--color-exito, #1f5c37); --gracias-icono-fondo: var(--color-exito-fondo, #e4f3e9); }
.checkout-gracias__hero--pendiente { --gracias-acento: var(--color-primario); --gracias-icono-fondo: var(--color-fondo); }
.checkout-gracias__hero--alerta { --gracias-acento: var(--color-error, #b3261e); --gracias-icono-fondo: var(--color-error-fondo, #fbe7e4); }
.checkout-gracias__icono { display: grid; place-items: center; width: 58px; height: 58px; border-radius: 50%; background: var(--gracias-icono-fondo); color: var(--gracias-acento); }
.checkout-gracias__icono svg { width: 28px; height: 28px; }
.checkout-gracias__sobre { margin: 0 0 .4rem; color: var(--gracias-acento); font-size: .72rem; font-weight: 750; letter-spacing: .1em; text-transform: uppercase; }
.checkout-gracias__hero h1 { margin: 0 0 .55rem; font-size: clamp(1.75rem, 3vw, 2.5rem); line-height: 1.12; }
.checkout-gracias__hero-texto > p:last-child { max-width: 54ch; margin: 0; color: var(--color-texto-suave); font-size: .95rem; line-height: 1.55; }
.checkout-gracias__estado { padding: .45rem .8rem; border: 1px solid currentColor; border-radius: 999px; color: var(--gracias-acento); background: var(--gracias-icono-fondo); font-size: .76rem; font-weight: 700; white-space: nowrap; }
.checkout-gracias__datos-clave { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1rem; padding: 1.6rem .5rem; border-bottom: 1px solid var(--color-borde); }
.checkout-gracias__datos-clave div { display: grid; gap: .28rem; min-width: 0; }
.checkout-gracias__datos-clave span, .checkout-gracias__dato-secundario span { color: var(--color-texto-suave); font-size: .73rem; font-weight: 650; letter-spacing: .04em; text-transform: uppercase; }
.checkout-gracias__datos-clave strong { font-size: 1.08rem; overflow-wrap: anywhere; }
.checkout-gracias__grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.25rem; align-items: stretch; margin-top: 1.6rem; }
.checkout-gracias__panel--detalle { grid-column: 1 / -1; }
.checkout-gracias__panel, .checkout-gracias .checkout-transferencia { padding: clamp(1.25rem, 2.5vw, 1.8rem); border: 1px solid var(--color-borde); border-radius: 16px; background: var(--color-fondo); }
.checkout-gracias__panel h2, .checkout-gracias .checkout-transferencia h2 { margin: 0 0 1.25rem; font-size: 1.12rem; line-height: 1.3; }
.checkout-gracias__productos { display: grid; list-style: none; margin: 0; padding: 0; }
.checkout-gracias__productos li { display: flex; justify-content: space-between; gap: 1rem; padding: .95rem 0; border-bottom: 1px solid var(--color-borde); font-size: .9rem; }
.checkout-gracias__productos li:first-child { padding-top: 0; }
.checkout-gracias__productos li > div { min-width: 0; }
.checkout-gracias__productos strong { display: block; font-weight: 650; }
.checkout-gracias__productos small { display: block; margin-top: .3rem; color: var(--color-texto-suave); font-size: .78rem; }
.checkout-gracias__productos b { white-space: nowrap; }
.checkout-gracias__totales { margin: 1rem 0 0; }
.checkout-gracias__totales > div { display: flex; justify-content: space-between; gap: 1rem; padding: .4rem 0; font-size: .9rem; }
.checkout-gracias__totales dt { color: var(--color-texto-suave); }
.checkout-gracias__totales dd { margin: 0; font-weight: 650; white-space: nowrap; }
.checkout-gracias__totales .checkout-gracias__total { margin-top: .7rem; padding-top: 1rem; border-top: 1px solid var(--color-borde); font-size: 1.15rem; }
.checkout-gracias__total dt, .checkout-gracias__total dd { color: var(--color-texto); font-weight: 750; }
.checkout-gracias__iva { margin: .2rem 0 0; color: var(--color-texto-suave); font-size: .72rem; }
.checkout-gracias__panel--info { min-width: 0; }
.checkout-gracias__panel--info p { margin: 0; color: var(--color-texto-suave); font-size: .88rem; line-height: 1.5; overflow-wrap: anywhere; }
.checkout-gracias__panel--info .checkout-gracias__dato-destacado { margin-bottom: .35rem; color: var(--color-texto); font-size: .93rem; font-weight: 700; }
.checkout-gracias__dato-secundario { display: grid; gap: .35rem; margin-top: 1rem; padding-top: 1rem; border-top: 1px solid var(--color-borde); font-size: .86rem; }
.checkout-gracias__dato-secundario strong { overflow-wrap: anywhere; }
.checkout-gracias .checkout-transferencia { max-width: none; margin: 1.25rem 0 0; text-align: left; }
.checkout-gracias .checkout-transferencia > p:not(.checkout-transferencia__instrucciones) { margin: -.55rem 0 1.2rem; color: var(--color-texto-suave); font-size: .88rem; line-height: 1.5; }
.checkout-gracias .checkout-transferencia dl { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 2rem; margin: 0; }
.checkout-gracias .checkout-transferencia dl > div { display: grid; grid-template-columns: minmax(8rem, .45fr) minmax(0, 1fr); align-items: baseline; gap: .65rem; min-width: 0; padding: .75rem 0; border-bottom: 1px solid var(--color-borde); font-size: .86rem; }
.checkout-gracias .checkout-transferencia dd { overflow-wrap: anywhere; color: var(--color-texto); font-weight: 600; }
.checkout-gracias .checkout-transferencia__instrucciones { margin: 1.25rem 0 0; padding-top: 0; border-top: 0; }
.checkout-gracias__extras:empty { display: none; }
.checkout-gracias__extras .checkout-transferencia { margin-top: 1.25rem; }
.checkout-gracias__acciones { display: flex; align-items: center; flex-wrap: wrap; gap: 1rem 1.5rem; margin-top: 1.65rem; }
.checkout-gracias__acciones .btn { min-width: 190px; text-align: center; }
.checkout-gracias__ayuda { color: var(--color-texto-suave); font-size: .88rem; text-decoration: underline; text-underline-offset: .2em; }
.checkout-gracias__ayuda:hover { color: var(--color-primario); }
.checkout-gracias__sin-pedido { max-width: 600px; margin: 3rem auto; padding: 2.5rem; border: 1px solid var(--color-borde); border-radius: 16px; text-align: center; }
.checkout-gracias__sin-pedido h1 { margin: 0 0 .6rem; }
.checkout-gracias__sin-pedido p { margin: 0 0 1.5rem; color: var(--color-texto-suave); }
@media (max-width: 720px) {
    .checkout-gracias__hero { grid-template-columns: 48px minmax(0, 1fr); gap: .9rem; }
    .checkout-gracias__icono { width: 48px; height: 48px; }
    .checkout-gracias__icono svg { width: 24px; height: 24px; }
    .checkout-gracias__estado { grid-column: 2; justify-self: start; }
    .checkout-gracias__grid { grid-template-columns: 1fr; }
}
@media (max-width: 480px) {
    .checkout-gracias__datos-clave { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.2rem; }
    .checkout-gracias__datos-clave div:first-child { grid-column: 1 / -1; }
    .checkout-gracias .checkout-transferencia dl { grid-template-columns: minmax(0, 1fr); gap: 0; }
    .checkout-gracias .checkout-transferencia dl > div { grid-template-columns: minmax(0, 1fr); gap: .2rem; }
    .checkout-gracias__acciones .btn { width: 100%; }
}

/* Home sin homepage activa: templates/home/sin-homepage.php. */
.home-sin-homepage { text-align: center; padding: 4rem 0 5rem; max-width: 640px; }
.home-sin-homepage__aviso-admin { text-align: left; margin-top: 2rem; }
.checkout-transferencia dl { display: grid; grid-template-columns: auto 1fr; gap: 0.35rem 1rem; margin: 1rem 0; }
.checkout-transferencia dt { font-weight: 600; color: var(--color-texto-suave); }
.checkout-transferencia dd { margin: 0; }
.checkout-transferencia__instrucciones { font-size: 0.9rem; color: var(--color-texto-suave); }

/* Header sticky configurable por dispositivo; el breakpoint compartido es 1024px. */
@media (min-width: 1025px) {
	.site-header--sticky-escritorio { position: sticky; top: 0; }
}
@media (max-width: 1024px) {
	.site-header--sticky-movil { position: sticky; top: 0; }
}

/* Header de 2 filas: la barra de búsqueda es una fila solo en escritorio; en móvil se comporta como el header de una fila (lupa + panel), así ambos headers comparten el mismo móvil. */
@media (min-width: 1025px) {
	.header-search-barra.header-v2-search-panel, .header-search-barra.header-v2-search-panel[hidden] { display: contents; position: static; border: 0; padding: 0; background: none; box-shadow: none; }
	.site-header--v1 .header-v2-search-toggle { display: none; }
}
@media (max-width: 1024px) {
	.site-header--v1 .header-main { flex-wrap: nowrap; }
	.site-header--v1 .header-actions { margin-left: 0; }
	.header-search-barra .search { max-width: none; }
}

/* Header móvil/tablet hasta 1024px; buscador en su propia fila. */
@media (max-width: 1024px) {
	.menu-movil-abrir { display: inline-flex; align-items: center; order: 1; }
	.main-nav { display: none; }
	.site-header--v2 .header-main { flex-wrap: nowrap; }
	.site-header--v2 .main-nav--inline { display: none; }
	.site-header--v2 .header-actions { margin-left: 0; }
	.header-v2-search-panel .search { max-width: none; }

	.header-main { flex-wrap: wrap; row-gap: 0.15rem; }
	/* min-width:0 permite encoger el logo dentro del flex; el límite reserva espacio para los controles. */
	.logo { order: 2; margin-right: auto; min-width: 0; }
	.logo__imagen { max-width: 100%; }
	.header-actions { order: 3; }
	/* Clase propia (no "span" a secas): el ícono del carrito trae sus
	   propios spans anidados (envoltura + numerito) que tienen que seguir
	   viéndose acá — solo se esconde el LABEL de texto. */
	.header-actions .icon-link__label { display: none; }

	.search {
		order: 4;
		flex-basis: 100%;
		max-width: none;
		margin: 0;
	}
	/* Buscador móvil compacto con botón circular. */
	.search__barra { height: 40px; border-radius: var(--campo-radio, 999px); }
	.search button {
		background: var(--color-boton-fondo);
		color: var(--color-boton-texto);
		border-radius: 50%;
		width: 32px;
		height: 32px;
		display: flex;
		align-items: center;
		justify-content: center;
		margin: 4px;
		flex-shrink: 0;
	}
	/* El SVG conserva su tamaño dentro del botón flex mediante flex-shrink:0. */
	.search button svg { width: 18px; height: 18px; flex-shrink: 0; }

	.topbar { font-size: 0.72rem; }
}
@media (min-width: 1025px) {
	.menu-movil, .menu-movil[hidden] { display: none; }
}

/* Hasta 640px el logo se limita para reservar los iconos; la imagen de producto puede superar el mínimo. */
@media (max-width: 640px) {
	.header-main { column-gap: 0.6rem; }
	.logo__imagen { max-width: min(100%, calc(100vw - 150px)); }
}

/* ==========================================================================
   Mobile-first: layout apilado bajo 720px
   ========================================================================== */
@media (max-width: 720px) {
	.checkout-grid { flex: 0 1 auto; grid-template-columns: 1fr; }
	.checkout-resumen { position: static; background: var(--color-fondo-suave); }
	.checkout-resumen::before { display: none; }
	.carrito-lateral { position: static; }
	.admin-campo-fila,
	.checkout-main .admin-campo-fila { grid-template-columns: 1fr; }
}
/* Nombre y apellidos se apilan desde 480px; el resto de campos conserva su breakpoint. */
@media (max-width: 480px) {
	.checkout-campo-fila { grid-template-columns: 1fr; gap: 0; } /* cada campo ya trae margin-bottom: el gap sumaba un espacio extra entre Nombre y Apellidos */
}

/* La ficha se apila hasta 1024px para reservar espacio a sus acciones de compra. */
@media (max-width: 1024px) {
	.producto-detalle__grid { grid-template-columns: 1fr; }
}

/* Popup simple: overlay con imagen centrada; ancho responsive y dimensiones propias del diseño. */
.popup-simple-overlay {
	display: none;
	position: fixed;
	inset: 0;
	z-index: 1000;
	align-items: center;
	justify-content: center;
	background: color-mix(in srgb, var(--color-velo) var(--velo-opacidad, 55%), transparent);
	padding: 1rem;
}
.popup-simple-overlay.is-open { display: flex; }
.popup-simple-caja {
	position: relative;
	max-width: min(90vw, 480px);
	max-height: 90vh;
	background: var(--color-fondo);
	border-radius: var(--radio);
	overflow: hidden;
	box-shadow: 0 8px 32px color-mix(in srgb, var(--color-sombra-fuerte) 35%, transparent);
}
.popup-simple-cerrar {
	position: absolute;
	top: 0.5rem;
	right: 0.5rem;
	z-index: 1;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 32px;
	height: 32px;
	border: none;
	border-radius: 50%;
	background: color-mix(in srgb, var(--color-flotante) 90%, transparent);
	color: var(--color-texto);
	cursor: pointer;
}
.popup-simple-cerrar:hover { background: var(--color-fondo); }
.popup-simple-enlace { display: block; }
.popup-simple-imagen {
	display: block;
	width: 100%;
	max-height: 90vh;
	object-fit: contain;
}

/* Compartir producto: iconos monocromos y colores hover configurables desde ThemeCss. */
.compartir-producto {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 0.5rem;
	margin: 1rem 0;
	position: relative;
}
.compartir-producto__titulo {
	font-size: 0.85rem;
	font-weight: 600;
	margin-right: 0.25rem;
	color: var(--color-texto-suave);
}
.compartir-producto__boton {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 34px;
	height: 34px;
	border-radius: 50%;
	background: var(--color-fondo-suave);
	color: var(--color-texto);
	border: none;
	cursor: pointer;
	text-decoration: none;
	transition: background 0.15s, color 0.15s;
}
.compartir-producto__boton--facebook:hover { background: var(--color-facebook, #1877f2); color: var(--color-redes-texto, #ffffff); }
.compartir-producto__boton--whatsapp:hover { background: var(--color-whatsapp, #25d366); color: var(--color-redes-texto, #ffffff); }
.compartir-producto__boton--pinterest:hover { background: var(--color-pinterest, #e60023); color: var(--color-redes-texto, #ffffff); }
.compartir-producto__boton--linkedin:hover { background: var(--color-linkedin, #0a66c2); color: var(--color-redes-texto, #ffffff); }
.compartir-producto__boton--copiar:hover,
.compartir-producto__boton--email:hover { background: var(--color-primario); color: var(--color-boton-texto); }
.compartir-producto__feedback {
	font-size: 0.78rem;
	color: var(--color-exito, #2a9d3f);
}
.compartir-producto__feedback[hidden] { display: none; }

/* ==========================================================================
   Acceso a Mi cuenta: login, registro y recuperación comparten el panel.
   La zona privada conserva su propia navegación y secciones.
   ========================================================================== */
.cuenta-form { margin-top: 1rem; }
.cuenta-form .btn { margin-top: 0.5rem; }
.cuenta-acceso { width: 100%; max-width: 39rem; margin: clamp(2rem, 5vw, 4rem) auto; }
.cuenta-acceso__panel { padding: clamp(1.5rem, 5vw, 2.75rem); border: 1px solid var(--cuenta-panel-borde, var(--color-borde)); border-radius: 20px; background: var(--cuenta-panel-fondo, var(--color-fondo)); box-shadow: 0 16px 45px color-mix(in srgb, var(--color-acento) 7%, transparent); }
.cuenta-acceso__eyebrow { display: block; margin-bottom: .6rem; color: var(--color-primario); font-size: .78rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; }
.cuenta-acceso__cabecera h1 { margin: 0; font-size: clamp(1.85rem, 4vw, 2.35rem); line-height: 1.15; }
.cuenta-acceso__cabecera p { margin: .8rem 0 0; color: var(--color-texto-suave); font-size: .94rem; line-height: 1.55; }
.cuenta-acceso__form { display: grid; gap: 1rem; margin-top: 1.8rem; }
.cuenta-acceso__form .admin-campo { margin: 0; }
.cuenta-acceso__form .admin-campo label { margin-bottom: .45rem; }
.cuenta-acceso__form .admin-campo input { font-size: 1rem; }
.cuenta-acceso__form .admin-campo--ayuda { margin: .45rem 0 0; color: var(--color-texto-suave); font-size: .8rem; line-height: 1.5; }
.cuenta-acceso__recuperar { justify-self: end; margin-top: -.35rem; font-size: .85rem; font-weight: 600; }
.cuenta-acceso__form .btn { width: 100%; min-height: var(--boton-altura, 42px); margin-top: .4rem; }
.cuenta-acceso__pie { margin: 1.65rem 0 0; padding-top: 1.35rem; border-top: 1px solid var(--cuenta-panel-borde, var(--color-borde)); color: var(--color-texto-suave); font-size: .9rem; text-align: center; }
.cuenta-acceso__pie a { color: var(--color-primario); font-weight: 700; }
@media (max-width: 600px) {
	.cuenta-acceso { margin-block: 1.5rem 2.5rem; }
	.cuenta-acceso__panel { padding: 1.4rem; border-radius: 16px; }
}
.cuenta-mensaje { padding: 0.75rem 1rem; border-radius: var(--radio); margin: 1rem 0; font-size: 0.9rem; }
.cuenta-mensaje--error { background: var(--color-error-fondo); color: var(--color-error); }
.cuenta-mensaje--exito { background: var(--color-exito-fondo, #e4f3e9); color: var(--color-exito, #1f5c37); }

.cuenta-pagina { max-width: 48rem; margin: 2rem auto; }
.cuenta-nav {
	display: flex;
	align-items: center;
	gap: 1.5rem;
	border-bottom: 1px solid var(--color-borde);
	margin-bottom: 1.5rem;
	padding-bottom: 0.75rem;
	font-size: 0.9rem;
}
.cuenta-nav a { color: var(--color-texto-suave); }
.cuenta-nav__activo { font-weight: 600; }
.cuenta-nav__logout { margin-left: auto; }
.cuenta-secciones { display: grid; gap: 2.5rem; }
.cuenta-seccion h2 { font-size: 1.05rem; margin-bottom: 0.5rem; }

.cuenta-tabla-pedidos { width: 100%; border-collapse: collapse; margin: 1rem 0; font-size: 0.9rem; }
.cuenta-tabla-pedidos th, .cuenta-tabla-pedidos td { text-align: left; padding: 0.6rem 0.5rem; border-bottom: 1px solid var(--color-borde); }
.cuenta-sku { color: var(--color-texto-suave); font-size: 0.82rem; }
.cuenta-total-linea { margin: 0.25rem 0; color: var(--color-texto-suave); }
.cuenta-total { margin: 0.5rem 0 1.5rem; font-size: 1.05rem; }

@media (min-width: 700px) {
	.cuenta-secciones { grid-template-columns: 1fr 1fr; }
}

/* Aviso de reposición, formulario sin JavaScript. */
.aviso-stock-form { margin: 16px 0 20px; padding: 16px; border: 1px solid var(--campo-borde, #ddd); border-radius: 12px; background: var(--color-fondo, #fff); scroll-margin-top: 9rem; }
.aviso-stock-form label { display: block; margin-bottom: 8px; font-weight: 700; }
.aviso-stock-form__campos { display: flex; align-items: stretch; gap: 8px; }
.aviso-stock-form__campos input { flex: 1; min-width: 0; padding: .7rem 1rem; border: var(--campo-borde-px, 1px) solid var(--campo-borde, #ddd); border-radius: var(--campo-radio, 8px); background: var(--campo-fondo, #fff); color: var(--color-texto); font-size: max(16px, 1rem); }

.aviso-stock-form small { display: block; margin-top: 8px; color: var(--color-texto-suave, #56657a); }
.aviso-stock-form__trampa { position: absolute; left: -9999px; width: 1px; height: 1px; opacity: 0; }
.aviso-stock-form__mensaje { margin: 12px 0 0; padding: .7rem .85rem; border-radius: var(--campo-radio, 8px); background: var(--color-exito-fondo, #e4f3e9); color: var(--color-exito, #1f5c37); font-size: .9rem; }
.aviso-stock-form__mensaje[data-estado="error"] { background: var(--color-error-fondo, #fbe7e4); color: var(--color-error, #8a2c1f); }
.aviso-stock-cancelar { max-width: 720px; padding-block: 48px; }
@media (max-width: 440px) { .aviso-stock-form__campos { flex-direction: column; } }

/* Conversaciones de atención y mensajes vinculados a pedidos. */
.atencion-pagina { max-width: 850px; padding-block: 3rem 5rem; }
.atencion-pagina__ceja { margin: 0 0 .5rem; color: var(--color-primario); font-size: .82rem; font-weight: 800; letter-spacing: .07em; text-transform: uppercase; }
.atencion-pagina h1 { margin: 0 0 .6rem; }
.atencion-pagina__ayuda { color: var(--color-texto-suave); font-size: .9rem; }
.atencion-mensajes { display: grid; gap: 1rem; margin: 2rem 0; }
.atencion-mensaje { padding: 1.2rem 1.35rem; border: 1px solid var(--color-borde, #ddd); border-radius: var(--campo-radio, 12px); background: var(--color-fondo, #fff); }
.atencion-mensaje--tienda { background: var(--color-fondo-suave, #f5f5f5); }
.atencion-mensaje header { display: flex; flex-wrap: wrap; justify-content: space-between; gap: .5rem; }
.atencion-mensaje time { color: var(--color-texto-suave); font-size: .84rem; }
.atencion-mensaje p { white-space: normal; overflow-wrap: anywhere; }
.atencion-responder, .cuenta-pedido-atencion { margin-top: 2rem; padding: 1.5rem; border: 1px solid var(--color-borde, #ddd); border-radius: var(--campo-radio, 12px); }
.atencion-responder form, .cuenta-pedido-atencion form { display: grid; gap: .7rem; }
.atencion-responder label, .cuenta-pedido-atencion label { font-weight: 700; }
.atencion-responder textarea, .atencion-responder input, .cuenta-pedido-atencion textarea, .cuenta-pedido-atencion input { width: 100%; min-width: 0; }
.atencion-responder small, .cuenta-pedido-atencion small { color: var(--color-texto-suave); }
.atencion-responder .btn, .cuenta-pedido-atencion .btn { justify-self: start; margin-top: .5rem; }
.cuenta-pedido-atencion ul { padding-left: 1.3rem; }

/* Blog core: las superficies y colores siguen las variables del Theme editor. */
.blog-page,.blog-post-page { padding-bottom: clamp(3rem, 6vw, 6rem); }
.blog-page__header { padding: clamp(2rem, 5vw, 4rem) 0 2rem; max-width: 820px; }
.blog-eyebrow { color: var(--color-primario); font-size: .78rem; font-weight: 800; letter-spacing: .13em; text-transform: uppercase; margin: 0 0 .7rem; }
.blog-page__header h1,.blog-post__header h1 { margin: 0 0 .9rem; line-height: 1.12; }
.blog-page__intro,.blog-post__resumen { color: var(--color-texto-suave); line-height: 1.7; }
.blog-page__intro > :first-child { margin-top: 0; }
.blog-categorias { display: flex; flex-wrap: wrap; gap: .55rem; margin: 0 0 2rem; }
.blog-categorias a { border: 1px solid var(--color-borde); border-radius: var(--boton-radio, 999px); padding: .55rem .9rem; color: var(--color-texto); text-decoration: none; font-weight: 600; }
.blog-categorias a[aria-current="page"],.blog-categorias a:hover { background: var(--color-boton-fondo); border-color: var(--color-boton-fondo); color: var(--color-boton-texto); }
.blog-categorias small { opacity: .75; }
.blog-grid { --blog-cols: 3; display: grid; grid-template-columns: repeat(var(--blog-cols), minmax(0, 1fr)); gap: clamp(1rem, 2vw, 1.5rem); }
.blog-card { min-width: 0; overflow: hidden; border: 1px solid var(--color-borde); border-radius: var(--radio, 12px); background: var(--color-fondo); display: flex; flex-direction: column; }
.blog-card__imagen { display: block; aspect-ratio: 16/9; background: var(--color-fondo-suave); overflow: hidden; }
.blog-card__imagen img { display: block; width: 100%; height: 100%; object-fit: cover; }
.blog-card__body { padding: 1.25rem; display: flex; flex-direction: column; flex: 1; }
.blog-card__meta,.blog-post__meta { display: flex; align-items: center; gap: .8rem; flex-wrap: wrap; color: var(--color-texto-suave); font-size: .84rem; margin-bottom: .75rem; }
.blog-card__meta a,.blog-post__meta a { color: var(--color-primario); text-decoration: none; font-weight: 700; }
.blog-card h2,.blog-card h3 { font-size: clamp(1.15rem, 1.6vw, 1.4rem); line-height: 1.3; margin: 0 0 .7rem; }
.blog-card h2 a,.blog-card h3 a { color: var(--color-texto); text-decoration: none; }
.blog-card p { color: var(--color-texto-suave); margin: 0 0 1rem; line-height: 1.55; }
.blog-card__leer { margin-top: auto; color: var(--color-primario); font-weight: 700; text-decoration: none; }
.blog-paginacion { display: flex; justify-content: center; gap: .45rem; margin-top: 2rem; }
.blog-paginacion a { display: grid; place-items: center; min-width: 2.5rem; min-height: 2.5rem; border: 1px solid var(--color-borde); border-radius: var(--boton-radio, 10px); text-decoration: none; color: var(--color-texto); }
.blog-paginacion a[aria-current="page"] { background: var(--color-boton-fondo); color: var(--color-boton-texto); border-color: var(--color-boton-fondo); }
.blog-empty { padding: 2rem; background: var(--color-fondo-suave); border-radius: var(--radio, 12px); }
.blog-post-layout { display: grid; grid-template-columns: minmax(0, 1fr); gap: clamp(1.5rem, 4vw, 3rem); align-items: start; }
/* Barra lateral de la entrada: 260 px (antes 300, se veía demasiado ancha frente al texto); --blog-barra-ancho la ajusta. */
.blog-post-layout--con-barra { grid-template-columns: minmax(0, 1fr) var(--blog-barra-ancho, 260px); }
.blog-post-layout--izquierda { grid-template-columns: var(--blog-barra-ancho, 260px) minmax(0, 1fr); }
.blog-post-layout--izquierda .blog-barra { order: -1; }
.blog-post { min-width: 0; max-width: 900px; margin: 0 auto; width: 100%; }
.blog-post-layout--con-barra .blog-post { margin: 0; max-width: none; }
.blog-post__header { padding: clamp(1.5rem, 4vw, 2.5rem) 0 1.5rem; text-align: center; }
.blog-post__header h1 { text-wrap: balance; }
.blog-post__header .blog-post__meta { justify-content: center; gap: 0; margin-bottom: 1rem; }
.blog-post__meta > * + *::before { content: "—"; margin: 0 .8rem; color: var(--color-borde); font-weight: 400; }
.blog-post__resumen { max-width: 640px; margin: 0 auto; }
.blog-post__autor-caja a,.blog-post__compartir a { color: var(--color-primario); font-weight: 700; text-decoration: none; }
.blog-post__imagen { display: block; width: 100%; height: auto; aspect-ratio: 16/9; object-fit: cover; background: var(--color-fondo-suave); border-radius: var(--radio, 12px); margin: 0 0 2rem; }
.blog-post__contenido { max-width: 760px; line-height: 1.75; }
.blog-post__contenido h2 { margin: 2.4rem 0 .8rem; }
.blog-post__contenido h3 { margin: 1.8rem 0 .7rem; }
.blog-post__contenido img { max-width: 100%; height: auto; }
.blog-post__contenido p,.blog-post__contenido ul,.blog-post__contenido ol { margin-bottom: 1.2rem; }
.blog-post__compartir { display: flex; flex-wrap: wrap; gap: .7rem; border-top: 1px solid var(--color-borde); padding-top: 1.25rem; margin-top: 2.5rem; }
.blog-post__autor-caja { display: flex; gap: 1rem; align-items: center; margin-top: 1.5rem; padding: 1.25rem; background: var(--color-fondo-suave); border-radius: var(--radio, 12px); }
.blog-post__autor-caja img { width: 64px; height: 64px; border-radius: 50%; object-fit: cover; flex: none; }
.blog-post__autor-caja p { margin: .25rem 0 .5rem; color: var(--color-texto-suave); font-size: .92rem; line-height: 1.5; }
.blog-barra { display: flex; flex-direction: column; gap: 1.75rem; padding-top: clamp(1.5rem, 4vw, 2.5rem); }
.blog-barra__bloque { padding-bottom: 1.75rem; border-bottom: 1px solid var(--color-borde); }
.blog-barra__bloque:last-child { border-bottom: 0; }
.blog-barra__bloque h2 { font-size: 1.15rem; margin: 0 0 1rem; }
.blog-barra__lista,.blog-barra__recientes { list-style: none; margin: 0; padding: 0; }
.blog-barra__lista li + li { margin-top: .55rem; }
.blog-barra__lista a { display: flex; justify-content: space-between; gap: .75rem; color: var(--color-texto-suave); text-decoration: none; }
.blog-barra__lista a[aria-current="page"] { color: var(--color-primario); font-weight: 700; }
.blog-barra__lista a:hover,.blog-barra__recientes a:hover { color: var(--color-primario); }
.blog-barra__lista small { opacity: .7; }
.blog-barra__recientes li { display: flex; gap: .8rem; align-items: center; }
.blog-barra__recientes li + li { margin-top: 1rem; }
.blog-barra__foto { flex: none; width: 90px; aspect-ratio: 90/56; overflow: hidden; border-radius: 4px; background: var(--color-fondo-suave); }
.blog-barra__foto img { display: block; width: 100%; height: 100%; object-fit: cover; }
.blog-barra__recientes div a { display: block; color: var(--color-texto); text-decoration: none; font-size: .92rem; line-height: 1.35; }
.blog-barra__recientes time { display: block; margin-top: .2rem; font-size: .78rem; color: var(--color-texto-suave); }
@media (max-width: 900px) {
	.blog-post-layout--con-barra,.blog-post-layout--izquierda { grid-template-columns: minmax(0, 1fr); }
	.blog-post-layout--izquierda .blog-barra { order: 0; }
}
.blog-home { padding-top: clamp(3rem, 6vw, 5rem); padding-bottom: clamp(3rem, 6vw, 5rem); }
.blog-home__head { display: flex; justify-content: space-between; align-items: end; gap: 1rem; margin-bottom: 1.5rem; }
.blog-home__head h2 { margin: 0; }
.blog-home__head > a { color: var(--color-primario); font-weight: 700; text-decoration: none; }
@media (max-width: 900px) { .blog-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 620px) { .blog-grid { grid-template-columns: 1fr; } .blog-home__head { align-items: start; flex-direction: column; } }

/* ---------- Accesibilidad y móvil ---------- */
.skip-link { position: absolute; left: .5rem; top: -4rem; z-index: 1000; padding: .65rem 1rem; background: var(--color-boton-fondo, var(--color-primario)); color: var(--color-boton-texto, #fff); border-radius: .5rem; font-weight: 600; text-decoration: none; transition: top .15s; }
.skip-link:focus { top: .5rem; }
main:focus { outline: none; }

/* Objetivos táctiles de al menos 44x44 px (pantallas táctiles); el dibujo no cambia de tamaño. */
@media (pointer: coarse) {
	.icon-link, .menu-movil-abrir, .header-account__close, .flecha-slider, .selector-cantidad__btn, .carrusel__flecha {
		min-width: 44px; min-height: 44px; display: inline-flex; align-items: center; justify-content: center;
	}
	.breadcrumbs a, .resenas-ficha, .main-nav a, .menu-movil__nav a {
		display: inline-block; min-height: 44px; line-height: 44px; padding-block: 0;
	}
	.breadcrumbs a, .resenas-ficha { line-height: 32px; min-height: 32px; }
	.selector-cantidad input { min-height: 44px; }
	.header-account__link, .resenas__orden-opciones a, .resenas__abrir, .modal-carrito__cerrar, .modal-carrito__cerrar-icono { min-height: 44px; display: flex; align-items: center; }
	.modal-carrito__cerrar, .modal-carrito__cerrar-icono { min-width: 44px; justify-content: center; }
	.footer-redes a, .landing-social a { min-width: 44px; min-height: 44px; display: inline-flex; align-items: center; justify-content: center; }
	.landing-footer-demo li a, .landing-footer-demo__intro a { display: inline-block; min-height: 44px; line-height: 44px; padding-block: 0; }
	.btn, button.btn, a.btn { min-height: 44px; }
	.entrega-estimada-trigger, .resenas__abrir, .vc-select__trigger { min-height: 44px; }
}

/* iOS amplía la página al enfocar un campo con tipografía menor a 16 px. */
@media (max-width: 768px) {
	input:not([type="checkbox"]):not([type="radio"]):not([type="range"]), select, textarea { font-size: max(16px, 1em); }
}


/* Header en celulares angostos: los íconos quedaban a ~54px entre centros (caja táctil de 44px + 10px de gap)
   y en 320px el logo se encogía a 60px. Se compacta sin bajar de 38px de objetivo táctil. */
@media (max-width: 480px) {
	.header-main { column-gap: 0.5rem; padding-inline: 1rem; }
	.checkout-header__interior { padding-inline: 1rem; }
	.header-actions { gap: 0; }
	.header-actions .icon-link, .site-header .menu-movil-abrir, .checkout-header .menu-movil-abrir { min-width: 40px; }
}
/* Pantallas chicas (iPhone SE/5, 320–400 px): íconos de 20 px en cajas de 34 px sin separación y el logo
   con todo el espacio sobrante, para que los íconos no pesen más que la marca. */
@media (max-width: 400px) {
	.header-main { column-gap: 0.25rem; padding-inline: 0.5rem; }
	.checkout-header__interior { padding-inline: 0.5rem; }
	.header-actions { gap: 0; }
	.header-actions .icon-link svg, .site-header .menu-movil-abrir svg, .checkout-header .menu-movil-abrir svg { width: 20px; height: 20px; }
	.header-actions .icon-link, .site-header .menu-movil-abrir, .checkout-header .menu-movil-abrir { min-width: 34px; padding-inline: 0; }
	.logo__imagen { max-width: min(100%, calc(100vw - 150px)); max-height: 34px; }
}

/* Tarjetas de producto en celulares (2 columnas, ~160px por tarjeta): el selector +/- no cabía y quedaba
   cortado ("– 1" sin el "+"), y el botón "Añadir" quedaba a distinto ancho en cada tarjeta. En pantallas
   angostas se oculta el +/- (la cantidad se ajusta en el carrito) y "Añadir" ocupa todo el ancho. */
@media (max-width: 480px) {
	.producto-card__agregar { padding: 0 0.6rem 0.75rem; }
	.producto-card__agregar .selector-cantidad--mini { display: none; }
	.producto-card__agregar .btn--mini { min-height: 40px; font-size: 0.85rem; }
}

/* Enlaces de texto sueltos con objetivo táctil menor a 32px (hallazgos de la revisión del front): en táctil
   se llevan a 44px de alto sin cambiar cómo se ven. */
@media (pointer: coarse) {
	.blog-card__leer, .blog-post__volver, .cuenta-acceso__recuperar, .carrito-item__quitar, .carrito-item__nombre, .landing-home__text-link,
	.blog-card__meta a, .blog-post__footer a, .blog-post__compartir a, .blog-home__head a, .nosotros-editorial__cierre a, .landing-home a:not([class]) {
		display: inline-flex; align-items: center; min-height: 44px;
	}
}
@media (pointer: coarse) {
	.logo { display: inline-flex; align-items: center; min-height: 44px; }
	.blog-post__categoria a, .blog-post__meta a { display: inline-flex; align-items: center; min-height: 44px; }
}

/* Flechas del slider de productos relacionados: al estar centradas en la altura TOTAL del carrusel caían sobre el
   nombre/precio de la tarjeta. Se centran en la foto (que es cuadrada, del ancho de la tarjeta). */
.producto-slider { container-type: inline-size; }
.producto-slider .flecha-slider { top: calc((100cqw - (var(--grid-cols-movil, 2) - 1) * 1.25rem) / var(--grid-cols-movil, 2) / 2); }
@media (min-width: 768px) and (max-width: 1024px) {
	.producto-slider .flecha-slider { top: calc((100cqw - (var(--grid-cols-tablet, 3) - 1) * 1.25rem) / var(--grid-cols-tablet, 3) / 2); }
}
@media (min-width: 1025px) {
	.producto-slider .flecha-slider { top: calc((100cqw - (var(--grid-cols-escritorio, 4) - 1) * 1.25rem) / var(--grid-cols-escritorio, 4) / 2); }
}
@media (max-width: 360px) {
	.producto-slider .flecha-slider { top: 50cqw; }
}

/* Precio con oferta en tarjetas angostas: "$54.990 Desde $44.990" partía en 2 líneas y desalineaba la fila de tarjetas. */
@media (max-width: 480px) {
	.producto-card__precio--oferta .precio-prefijo { display: none; }
}

/* Un <a class="btn"> es inline-block: con min-height mayor que su contenido (44px en táctil) el texto quedaba pegado
   arriba en vez de centrado (p. ej. "Ver carrito" del carrito lateral). Los <button> ya centran solos. */
a.btn { display: inline-flex; align-items: center; justify-content: center; text-align: center; }

@media (pointer: coarse) { .landing-footer-demo ul { gap: 0; } }

/* Campos de texto: el único indicador de foco es el borde + anillo del tema. Sin aro oscuro del
   navegador (Safari/Chrome lo dibujan al hacer clic aunque haya `outline: none` en :focus). */
:is(input:not([type]), input[type="text"], input[type="email"], input[type="tel"], input[type="password"], input[type="url"], input[type="search"], textarea):is(:focus, :focus-visible) {
	outline: 0 none;
	outline-color: transparent;
	-webkit-appearance: none;
	appearance: none;
	border-color: var(--campo-foco-borde, var(--color-primario));
}
select:is(:focus, :focus-visible), input[type="number"]:not([name="cantidad"]):is(:focus, :focus-visible), input[type="date"]:is(:focus, :focus-visible) { outline: 0 none; }
/* Casillas y radios: aro del color del tema en vez del negro por defecto. */
input[type="checkbox"]:focus-visible, input[type="radio"]:focus-visible { outline: 2px solid var(--campo-foco-borde, var(--color-primario)); outline-offset: 2px; }

/* El buscador no cambia de color al hacer clic (ni borde ni fondo), con cualquier paleta: queda fuera de la regla de foco
   de los demás campos. Va al final para ganar a esas reglas. */
.search__barra:focus-within { outline: none; border-color: var(--buscador-borde, #dddddd); box-shadow: none; }
.search input:is(:focus, :focus-visible) { outline: none; border: none; box-shadow: none; background: none; }
.search input:-webkit-autofill, .search input:-webkit-autofill:focus {
	-webkit-text-fill-color: var(--buscador-texto, var(--color-texto));
	box-shadow: inset 0 0 0 100px var(--buscador-fondo, var(--color-fondo));
}

/* Teléfono con «+56» fijo: el prefijo va encima del campo (no editable) y el texto parte después de él. */
.campo-telefono { position: relative; }
.campo-telefono__prefijo { position: absolute; top: 50%; left: .85em; transform: translateY(-50%); color: var(--color-texto-suave); font-weight: 400; pointer-events: none; }
.admin-campo .campo-telefono input[type="tel"] { padding-left: 3.3em; }
.checkout-main .admin-campo .campo-telefono input[type="tel"] { padding: 0.75em 0.85em 0.75em 3.3em; transition: border-color var(--transicion), box-shadow var(--transicion); }

/* ==========================================================================
   Newsletter: formulario del footer/portadas/popup, casilla de checkout y páginas de resultado.
   Los colores salen de `currentColor`: se ve bien sobre un footer claro u oscuro sin tocar la paleta.
   ========================================================================== */
.newsletter-form { display: grid; grid-template-columns: minmax(0, 1fr); gap: .6rem; width: 100%; max-width: 460px; }
.newsletter-form__trampa { position: absolute; left: -9999px; width: 1px; height: 1px; opacity: 0; }
.newsletter-form__etiqueta { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }
/* Campo y botón: alto entero y line-height = alto interior. Con medidas fraccionarias (14,72 px × 1,5, padding .6rem) la caja y el texto se redondean distinto según la posición de la página y el texto queda 1 px más arriba que el centro. `line-height` va después de `font: inherit` (que lo reinicia). */
.newsletter-form__campos { display: flex; gap: .5rem; }
.newsletter-form input[type="email"] { flex: 1 1 auto; box-sizing: border-box; min-width: 0; height: 46px; padding: 0 1rem; border: 1px solid color-mix(in srgb, currentColor 28%, transparent); border-radius: var(--campo-radio, 999px); background: color-mix(in srgb, currentColor 8%, transparent); color: inherit; font: inherit; line-height: 44px; }
.newsletter-form input[type="email"]::placeholder { color: color-mix(in srgb, currentColor 60%, transparent); }
.newsletter-form input[type="email"]:focus { outline: none; border-color: var(--color-primario); }
.newsletter-form__boton { flex: none; box-sizing: border-box; height: 46px; padding: 0 1.3rem; white-space: nowrap; border: 0; border-radius: var(--boton-radio, 999px); background: var(--newsletter-boton-fondo, var(--color-primario)); color: var(--newsletter-boton-texto, var(--color-boton-texto, #fff)); font: inherit; font-weight: 700; line-height: 46px; cursor: pointer; }
/* Sobre un fondo de color (sobre todo el primario) el botón desaparece: la sección redefine --newsletter-boton-fondo / -texto / -hover. */
.newsletter-form__boton:hover { background: var(--newsletter-boton-hover, var(--color-primario-oscuro, var(--color-primario))); }
.newsletter-form__consentimiento { display: flex; align-items: flex-start; gap: .5rem; font-size: .8rem; line-height: 1.4; opacity: .85; }
.newsletter-form__consentimiento input { width: 1rem; height: 1rem; margin: .06rem 0 0; padding: 0; flex: none; }
@media (max-width: 480px) { .newsletter-form__campos { flex-direction: column; } .newsletter-form__boton { width: 100%; } }
.newsletter-casilla { margin: .4rem 0 0; }
.newsletter-casilla label { font-size: .85rem; line-height: 1.4; }
.newsletter-casilla input { margin-top: .2rem; align-self: flex-start; }
.newsletter-resultado { padding-block: 4rem; text-align: center; }
.newsletter-resultado__mensaje { max-width: 52ch; margin: 1rem auto 1.6rem; padding: .9rem 1.2rem; border-radius: 12px; }
.newsletter-resultado__mensaje--ok { background: var(--color-exito-fondo, var(--color-fondo-suave)); color: var(--color-exito, var(--color-texto)); }
.newsletter-resultado__mensaje--error { background: var(--color-error-fondo, var(--color-fondo-suave)); color: var(--color-error, var(--color-texto)); }

/* Popup simple en modo newsletter: foto a la izquierda y texto + formulario a la derecha; en móvil la foto va arriba y más baja. */
.popup-simple-caja--newsletter { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); width: min(94vw, 780px); max-width: none; border-radius: calc(var(--radio, 12px) * 1.4); background: var(--color-fondo); color: var(--color-texto); }
.popup-simple-caja--sin-foto { grid-template-columns: minmax(0, 1fr); width: min(94vw, 460px); }
.popup-simple-media { min-height: 100%; overflow: hidden; background: var(--color-fondo-suave); }
.popup-simple-media img { display: block; width: 100%; height: 100%; object-fit: cover; }
.popup-simple-contenido { display: flex; flex-direction: column; justify-content: center; gap: .9rem; padding: clamp(1.6rem, 4vw, 2.4rem); }
.popup-simple-contenido h2 { margin: 0; padding-right: 1.5rem; font-size: clamp(1.3rem, 3.2vw, 1.7rem); line-height: 1.2; letter-spacing: -.02em; }
.popup-simple-contenido p { margin: 0; color: var(--color-texto-suave); line-height: 1.55; }
.popup-simple-caja--newsletter .newsletter-form__campos { flex-direction: column; }
.popup-simple-caja--newsletter .newsletter-form__boton { width: 100%; text-transform: uppercase; letter-spacing: .04em; font-size: .85rem; }
@media (max-width: 640px) {
	.popup-simple-caja--newsletter { grid-template-columns: minmax(0, 1fr); max-height: 94vh; overflow-y: auto; }
	.popup-simple-media { max-height: 200px; }
}
/* Popup simple: tres estilos (clase --centrado, --esquina o --lateral en el overlay). El centrado es el modal de siempre. */
html.popup-simple-bloqueado { overflow: hidden; }
.popup-simple-exito__icono { display: grid; place-items: center; width: 3rem; height: 3rem; border-radius: 50%; background: color-mix(in srgb, var(--color-exito, #15803d) 16%, transparent); color: var(--color-exito, #15803d); }
.popup-simple-contenido .newsletter-form__boton.popup-simple-seguir { align-self: flex-start; }
@keyframes popup-simple-velo { from { opacity: 0; } to { opacity: 1; } }
@keyframes popup-simple-subir { from { opacity: 0; transform: translateY(14px) scale(.98); } to { opacity: 1; transform: none; } }
@keyframes popup-simple-lado { from { transform: translateX(100%); } to { transform: none; } }
@media (prefers-reduced-motion: no-preference) {
	.popup-simple-overlay.is-open { animation: popup-simple-velo .2s ease-out; }
	.popup-simple-overlay--centrado.is-open .popup-simple-caja,
	.popup-simple-overlay--esquina.is-open .popup-simple-caja { animation: popup-simple-subir .28s cubic-bezier(.2, .8, .2, 1); }
	.popup-simple-overlay--lateral.is-open .popup-simple-caja { animation: popup-simple-lado .32s cubic-bezier(.2, .8, .2, 1); }
}

/* Tarjeta en la esquina: no oscurece ni bloquea la página; deja libre el botón de WhatsApp si está a la derecha. */
.popup-simple-overlay--esquina { background: transparent; pointer-events: none; align-items: flex-end; justify-content: flex-end; padding: 1.25rem; }
.popup-simple-overlay--esquina .popup-simple-caja { pointer-events: auto; width: min(100%, 360px); max-width: none; border: 1px solid var(--color-borde); box-shadow: 0 16px 48px color-mix(in srgb, var(--color-sombra-fuerte) 40%, transparent); }
body:has(.whatsapp-widget:not(.whatsapp-widget--izquierda)) .popup-simple-overlay--esquina { padding-bottom: calc(var(--wa-tam, 54px) + var(--wa-sep, 20px) + 12px); }
.popup-simple-overlay--esquina .popup-simple-caja--newsletter { grid-template-columns: minmax(0, 1fr); width: min(100%, 380px); }
.popup-simple-overlay--esquina .popup-simple-media { max-height: 150px; }
.popup-simple-overlay--esquina .popup-simple-contenido { gap: .7rem; padding: 1.2rem 1.25rem 1.35rem; }
.popup-simple-overlay--esquina .popup-simple-contenido h2 { font-size: 1.2rem; }

/* Panel lateral: ocupa todo el alto a la derecha; con foto sola, la foto llena el panel (ideal una imagen vertical). */
.popup-simple-overlay--lateral { justify-content: flex-end; align-items: stretch; padding: 0; }
.popup-simple-overlay--lateral .popup-simple-caja { display: flex; flex-direction: column; width: min(100vw, 420px); max-width: none; height: 100%; max-height: none; border-radius: calc(var(--radio, 12px) * 1.4) 0 0 calc(var(--radio, 12px) * 1.4); }
.popup-simple-overlay--lateral .popup-simple-enlace { display: block; flex: 1 1 auto; min-height: 0; }
.popup-simple-overlay--lateral .popup-simple-imagen { width: 100%; height: 100%; max-height: none; object-fit: cover; }
.popup-simple-overlay--lateral .popup-simple-caja--newsletter { overflow-y: auto; }
.popup-simple-overlay--lateral .popup-simple-media { flex: 0 0 42%; min-height: 190px; }
.popup-simple-overlay--lateral .popup-simple-contenido { flex: 1 1 auto; justify-content: center; }
.popup-simple-overlay--lateral .popup-simple-caja--sin-foto .popup-simple-contenido { padding-top: 3.5rem; }

/* Celular: la tarjeta y el panel pasan a una hoja que sube desde abajo, al ancho completo (la imagen se ve entera). */
@media (max-width: 640px) {
	.popup-simple-overlay--esquina,
	.popup-simple-overlay--lateral { padding: 0; align-items: flex-end; justify-content: center; }
	body:has(.whatsapp-widget:not(.whatsapp-widget--izquierda)) .popup-simple-overlay--esquina { padding-bottom: 0; }
	.popup-simple-overlay--esquina .popup-simple-caja,
	.popup-simple-overlay--lateral .popup-simple-caja { width: 100%; max-width: none; height: auto; max-height: 92vh; border-radius: calc(var(--radio, 12px) * 1.4) calc(var(--radio, 12px) * 1.4) 0 0; padding-bottom: env(safe-area-inset-bottom, 0px); }
	.popup-simple-overlay--esquina .popup-simple-caja--newsletter,
	.popup-simple-overlay--lateral .popup-simple-caja--newsletter { width: 100%; overflow-y: auto; }
	.popup-simple-overlay--lateral .popup-simple-imagen { height: auto; max-height: 76vh; object-fit: contain; }
	.popup-simple-overlay--lateral .popup-simple-enlace { flex: 0 0 auto; }
	.popup-simple-overlay--lateral .popup-simple-media { flex: 0 0 190px; height: 190px; min-height: 0; overflow: hidden; }
	.popup-simple-overlay--lateral .popup-simple-contenido { justify-content: flex-start; }
	.popup-simple-overlay--lateral .popup-simple-caja--sin-foto .popup-simple-contenido { padding-top: 2.6rem; }
	@keyframes popup-simple-lado { from { transform: translateY(100%); } to { transform: none; } }
}
.newsletter-form__alerta { margin: 0; padding: .6rem .9rem; border: 1px solid transparent; border-radius: 12px; font-size: .86rem; line-height: 1.4; }
.newsletter-form__alerta--ok { border-color: color-mix(in srgb, var(--color-exito, #15803d) 45%, transparent); background: color-mix(in srgb, var(--color-exito, #15803d) 16%, transparent); }
.newsletter-form__alerta--info { border-color: color-mix(in srgb, currentColor 30%, transparent); background: color-mix(in srgb, currentColor 9%, transparent); }
.newsletter-form__alerta--error { border-color: color-mix(in srgb, var(--color-error, #b91c1c) 55%, transparent); background: color-mix(in srgb, var(--color-error, #b91c1c) 16%, transparent); }
.newsletter-form input[aria-invalid="true"] { border-color: var(--color-error, #b91c1c); }

/* Footer con newsletter: franja a todo el ancho de la grilla con el texto a la izquierda y el formulario a la derecha. */
.landing-footer-demo__newsletter { grid-column: 1 / -1; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); align-items: center; gap: 1.5rem clamp(1.5rem, 4vw, 4rem); padding-bottom: clamp(1.4rem, 3vw, 2.2rem); border-bottom: 1px solid var(--color-borde); }
.landing-footer-demo__newsletter > div { display: grid; gap: .55rem; }
.landing-footer-demo__newsletter > div > span { color: var(--fd-acento, var(--color-footer-texto)); font-size: .72rem; font-weight: 800; letter-spacing: .14em; }
.landing-footer-demo__newsletter strong { color: var(--color-texto); font-size: clamp(1.4rem, 2.3vw, 2rem); line-height: 1.15; letter-spacing: -.025em; max-width: 26ch; }
.landing-footer-demo .landing-footer-demo__newsletter p { margin: 0; max-width: 56ch; }
.landing-footer-demo .landing-footer-demo__newsletter .newsletter-form { max-width: none; }
.landing-footer-demo__newsletter .newsletter-form__boton { background: var(--footer-demo-boton, var(--footer-demo-titulo, #fff)); color: var(--footer-demo-boton-texto, var(--footer-demo-fondo, #0f1a2b)); transition: filter .15s ease, transform .1s ease; }
.landing-footer-demo__newsletter .newsletter-form__boton:hover { background: var(--footer-demo-boton, var(--footer-demo-titulo, #fff)); filter: brightness(.9); }
.landing-footer-demo__newsletter .newsletter-form__boton:active { transform: translateY(1px); }
.landing-footer-demo__newsletter .newsletter-form__boton:focus-visible { outline: 2px solid var(--footer-demo-boton, #fff); outline-offset: 2px; }
@media (max-width: 900px) { .landing-footer-demo__newsletter { grid-template-columns: minmax(0, 1fr); } }
/* Escritorio: la franja de newsletter usa las mismas columnas del pie (el texto sobre «marca» y «Explora», el formulario desde «Ayuda» hasta el borde derecho), así sus bordes coinciden con los de abajo; el formulario arranca a la altura del texto, no centrado. */
.landing-footer-demo__newsletter { align-items: center; }
@media (min-width: 1025px) {
	.landing-footer-demo__newsletter { grid-template-columns: subgrid; column-gap: normal; }
	.landing-footer-demo__newsletter > :first-child { grid-column: 1 / span 2; }
	.landing-footer-demo__newsletter > :last-child:not(:first-child) { grid-column: 3 / -1; }
}
/* Beneficios del pie repartidos de borde a borde, como la barra legal de abajo. */
@media (min-width: 681px) { .landing-footer-demo ul.landing-footer-demo__garantias { justify-content: space-between; } }
/* Página interior reemplazada por un bloque (Contacto): trae su propio layout, bandas de ancho completo incluidas; sin el aire vertical de .landing-html quedaba un hueco blanco entre el header y la franja de migas, y otro sobre el footer. */
.landing-html--pagina { width: 100%; padding-block: 0; }

/* Aviso de cookies: mini popup fijo abajo; las posiciones solo cambian el anclaje. */
.cookies-banner {
	position: fixed;
	bottom: 1rem;
	z-index: 1100;
	display: flex;
	flex-direction: column;
	gap: 0.75rem;
	width: min(calc(100vw - 2rem), 380px);
	padding: 1rem;
	border: 1px solid var(--color-borde);
	border-radius: var(--radio);
	background: var(--color-fondo);
	color: var(--color-texto);
	box-shadow: 0 8px 32px color-mix(in srgb, var(--color-sombra-fuerte) 25%, transparent);
	font-size: 0.875rem;
}
.cookies-banner[hidden] { display: none; }
.cookies-banner--izquierda { left: 1rem; }
.cookies-banner--derecha { right: 1rem; }
.cookies-banner--centro { left: 50%; transform: translateX(-50%); width: min(calc(100vw - 2rem), 560px); }
.cookies-banner__texto { margin: 0; line-height: 1.5; }
.cookies-banner__texto a { color: var(--color-primario); text-decoration: underline; }
.cookies-banner__acciones { display: flex; gap: 0.5rem; justify-content: flex-end; }
.cookies-banner__acciones .btn { min-height: 0; padding: 0.55em 1.1em; font-size: 0.85rem; }
@media (max-width: 480px) {
	.cookies-banner { bottom: 0.5rem; left: 0.5rem; right: 0.5rem; width: auto; transform: none; }
	.cookies-banner__acciones .btn { flex: 1; }
}

/* Efecto al pasar el mouse por una miniatura (Theme editor → Categoría / Marca): `data-miniatura-hover` en <body>; «predeterminado» no toca nada. */
body[data-miniatura-hover="zoom"] .producto-card:hover,
body[data-miniatura-hover="sombra"] .producto-card:hover,
body[data-miniatura-hover="borde"] .producto-card:hover,
body[data-miniatura-hover="velo"] .producto-card:hover,
body[data-miniatura-hover="ninguno"] .producto-card:hover { transform: none; box-shadow: none; }
body[data-miniatura-hover="elevar_zoom"] .producto-card:hover { transform: translateY(-3px); box-shadow: var(--sombra); }
body[data-miniatura-hover="sombra"] .producto-card:hover { box-shadow: var(--sombra); }
body[data-miniatura-hover="borde"] .producto-card:hover { border-color: var(--color-primario); }
body[data-miniatura-hover="elevar"] .producto-card--secundario:hover { transform: translateY(-3px); }
body[data-miniatura-hover="zoom"] .producto-card__imagen-envoltura img,
body[data-miniatura-hover="elevar_zoom"] .producto-card__imagen-envoltura img,
body[data-miniatura-hover="velo"] .producto-card__imagen-envoltura img { transition: transform 450ms ease, filter 300ms ease; }
body[data-miniatura-hover="zoom"] .producto-card:hover .producto-card__imagen-envoltura img,
body[data-miniatura-hover="elevar_zoom"] .producto-card:hover .producto-card__imagen-envoltura img,
body[data-miniatura-hover="velo"] .producto-card:hover .producto-card__imagen-envoltura img { transform: scale(1.06); }
body[data-miniatura-hover="velo"] .producto-card:hover .producto-card__imagen-envoltura img { filter: brightness(.88); }
body[data-miniatura-hover="elevar"] .producto-card--secundario:hover .producto-card__imagen-envoltura img,
body[data-miniatura-hover="sombra"] .producto-card--secundario:hover .producto-card__imagen-envoltura img,
body[data-miniatura-hover="borde"] .producto-card--secundario:hover .producto-card__imagen-envoltura img,
body[data-miniatura-hover="ninguno"] .producto-card--secundario:hover .producto-card__imagen-envoltura img { transform: none; }
@media (hover: none) { body[data-miniatura-hover] .producto-card:hover { transform: none; } }

/* Animación de los botones al pasar el cursor (Theme editor → Campos → Botones). «elevar», «ampliar», «presionar», «brillo» y «resplandor»
   salen de --boton-hover-transform/--boton-hover-filter (ThemeCss); estas cinco van por `data-boton-hover` en <body>. */
body[data-boton-hover="sombra"] .btn:hover { transform: translateY(-2px); box-shadow: 0 10px 22px color-mix(in srgb, var(--color-boton-fondo, var(--color-primario)) 34%, transparent); }
body[data-boton-hover="barrido"] .btn-primary {
	background: linear-gradient(var(--color-boton-hover-fondo, var(--color-boton-fondo)), var(--color-boton-hover-fondo, var(--color-boton-fondo))) no-repeat left center / 0% 100%, var(--color-boton-fondo);
	transition: background-size var(--boton-animacion-duracion, 220ms) ease, color var(--boton-animacion-duracion, 220ms) ease, box-shadow var(--transicion);
}
body[data-boton-hover="barrido"] .btn-primary:hover {
	background: linear-gradient(var(--color-boton-hover-fondo, var(--color-boton-fondo)), var(--color-boton-hover-fondo, var(--color-boton-fondo))) no-repeat left center / 100% 100%, var(--color-boton-fondo);
}
body[data-boton-hover="contorno"] .btn-primary { box-shadow: inset 0 0 0 2px var(--color-boton-fondo); transition: background-color var(--boton-animacion-duracion, 220ms) ease, color var(--boton-animacion-duracion, 220ms) ease; }
body[data-boton-hover="contorno"] .btn-primary:hover { background: var(--color-fondo, #fff); color: var(--color-boton-fondo); }
@keyframes boton-pulso {
	from { box-shadow: 0 0 0 0 color-mix(in srgb, var(--color-boton-fondo, var(--color-primario)) 45%, transparent); }
	to { box-shadow: 0 0 0 .8rem color-mix(in srgb, var(--color-boton-fondo, var(--color-primario)) 0%, transparent); }
}
@keyframes boton-rebote { 0%, 100% { transform: translateY(0); } 35% { transform: translateY(-5px); } 65% { transform: translateY(1px); } }
body[data-boton-hover="pulso"] .btn-primary:hover { animation: boton-pulso calc(var(--boton-animacion-duracion, 220ms) * 4) ease-out infinite; }
body[data-boton-hover="rebote"] .btn:hover { animation: boton-rebote calc(var(--boton-animacion-duracion, 220ms) * 2) ease; }
@media (prefers-reduced-motion: reduce) { body[data-boton-hover] .btn:hover { animation: none; } }

/* Animación de los submenús (Theme editor → Menú → Animación de submenús). Escritorio: `data-submenu-anim` en <body>; la base «subir» es la de .main-nav__submenu.
   Cerrado y abierto se redefinen juntos; la visibilidad conserva su retardo de salida para que cruzar en diagonal no cierre el menú. */
@media (min-width: 1025px) {
	body[data-submenu-anim] .main-nav .main-nav__submenu { transition-duration: var(--submenu-animacion-duracion, 180ms); }
	body[data-submenu-anim="fundido"] .main-nav .main-nav__submenu,
	body[data-submenu-anim="fundido"] .main-nav__item--con-hijos:hover > .main-nav__submenu,
	body[data-submenu-anim="fundido"] .main-nav__item--con-hijos:focus-within > .main-nav__submenu { transform: none; }
	body[data-submenu-anim="escala"] .main-nav .main-nav__submenu { transform: scale(.9); transform-origin: top left; }
	body[data-submenu-anim="deslizar"] .main-nav .main-nav__submenu { transform: translateX(-14px); }
	body[data-submenu-anim="cortina"] .main-nav .main-nav__submenu { transform: none; clip-path: inset(0 -40px 100% -40px); transition-property: visibility, opacity, clip-path; }
	body[data-submenu-anim="escala"] .main-nav__item--con-hijos:hover > .main-nav__submenu,
	body[data-submenu-anim="escala"] .main-nav__item--con-hijos:focus-within > .main-nav__submenu,
	body[data-submenu-anim="deslizar"] .main-nav__item--con-hijos:hover > .main-nav__submenu,
	body[data-submenu-anim="deslizar"] .main-nav__item--con-hijos:focus-within > .main-nav__submenu { transform: none; }
	body[data-submenu-anim="cortina"] .main-nav__item--con-hijos:hover > .main-nav__submenu,
	body[data-submenu-anim="cortina"] .main-nav__item--con-hijos:focus-within > .main-nav__submenu { clip-path: inset(-20px -40px -40px -40px); }
	body[data-submenu-anim="ninguna"] .main-nav .main-nav__submenu { transform: none; transition: visibility 0s .12s; }
	body[data-submenu-anim="ninguna"] .main-nav__item--con-hijos:hover > .main-nav__submenu,
	body[data-submenu-anim="ninguna"] .main-nav__item--con-hijos:focus-within > .main-nav__submenu { transform: none; transition-delay: 0s; }
}
/* Móvil: el submenú aparece al quitarle `hidden`, así que la animación es de entrada (keyframes); al cerrar desaparece al instante. */
@keyframes submenu-movil-fundido { from { opacity: 0; } to { opacity: 1; } }
@keyframes submenu-movil-bajar { from { opacity: 0; transform: translateY(-10px); } to { opacity: 1; transform: none; } }
@keyframes submenu-movil-cortina { from { clip-path: inset(0 0 100% 0); opacity: .4; } to { clip-path: inset(0 0 0 0); opacity: 1; } }
@keyframes submenu-movil-item { from { opacity: 0; transform: translateY(-8px); } to { opacity: 1; transform: none; } }
@keyframes submenu-movil-lado { from { opacity: 0; transform: translateX(-16px); } to { opacity: 1; transform: none; } }
body[data-submenu-movil-anim="fundido"] .menu-movil__nav li > ul:not([hidden]) { animation: submenu-movil-fundido var(--submenu-animacion-duracion, 180ms) ease both; }
body[data-submenu-movil-anim="deslizar"] .menu-movil__nav li > ul:not([hidden]) { animation: submenu-movil-bajar var(--submenu-animacion-duracion, 180ms) ease both; }
body[data-submenu-movil-anim="despliegue"] .menu-movil__nav li > ul:not([hidden]) { animation: submenu-movil-cortina calc(var(--submenu-animacion-duracion, 180ms) * 1.6) ease both; }
body[data-submenu-movil-anim="escalonado"] .menu-movil__nav li > ul:not([hidden]) > li { animation: submenu-movil-item var(--submenu-animacion-duracion, 180ms) ease both; }
body[data-submenu-movil-anim="lateral"] .menu-movil__nav li > ul:not([hidden]) > li { animation: submenu-movil-lado var(--submenu-animacion-duracion, 180ms) ease both; }
body[data-submenu-movil-anim="escalonado"] .menu-movil__nav li > ul:not([hidden]) > li:nth-child(2),
body[data-submenu-movil-anim="lateral"] .menu-movil__nav li > ul:not([hidden]) > li:nth-child(2) { animation-delay: 45ms; }
body[data-submenu-movil-anim="escalonado"] .menu-movil__nav li > ul:not([hidden]) > li:nth-child(3),
body[data-submenu-movil-anim="lateral"] .menu-movil__nav li > ul:not([hidden]) > li:nth-child(3) { animation-delay: 90ms; }
body[data-submenu-movil-anim="escalonado"] .menu-movil__nav li > ul:not([hidden]) > li:nth-child(4),
body[data-submenu-movil-anim="lateral"] .menu-movil__nav li > ul:not([hidden]) > li:nth-child(4) { animation-delay: 135ms; }
body[data-submenu-movil-anim="escalonado"] .menu-movil__nav li > ul:not([hidden]) > li:nth-child(n+5),
body[data-submenu-movil-anim="lateral"] .menu-movil__nav li > ul:not([hidden]) > li:nth-child(n+5) { animation-delay: 180ms; }
@media (prefers-reduced-motion: reduce) { body[data-submenu-movil-anim] .menu-movil__nav li > ul, body[data-submenu-movil-anim] .menu-movil__nav li > ul > li { animation: none !important; } }


.blog-post__vecinos { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; margin-top: 2rem; }
.blog-post__vecino { display: block; padding: 1rem 1.15rem; border: 1px solid var(--color-borde); border-radius: var(--radio, 12px); color: var(--color-texto); text-decoration: none; transition: border-color .15s ease, box-shadow .15s ease; }
.blog-post__vecino:hover { border-color: var(--color-primario); box-shadow: var(--sombra); }
.blog-post__vecino small { display: block; margin-bottom: .3rem; color: var(--color-texto-suave); font-size: .78rem; }
.blog-post__vecino span { font-weight: 650; line-height: 1.35; }
.blog-post__vecino--siguiente { grid-column: 2; text-align: right; }
.blog-post__vecino--anterior:only-child { grid-column: 1; }
@media (max-width: 600px) { .blog-post__vecinos { grid-template-columns: 1fr; } .blog-post__vecino--siguiente { grid-column: 1; } }

.blog-grid--cols-2 { --blog-cols: 2; }
.blog-grid--cols-4 { --blog-cols: 4; }
@media (max-width: 1000px) { .blog-grid--cols-3, .blog-grid--cols-4 { --blog-cols: 2; } }

/* Buscador del blog: campo en píldora con lupa y botón dentro (no hereda el aspecto nativo de type=search). */
.blog-buscar { display: flex; align-items: center; gap: .25rem; padding: .25rem .25rem .25rem .9rem; border: 1px solid var(--color-borde); border-radius: var(--campo-radio, 999px); background: var(--color-fondo); transition: border-color .15s ease, box-shadow .15s ease; }
.blog-buscar:focus-within { border-color: var(--color-primario); box-shadow: 0 0 0 3px color-mix(in srgb, var(--color-primario) 15%, transparent); }
.blog-buscar__icono { flex: none; display: grid; place-items: center; color: var(--color-texto-suave); }
body[data-form-labels] .blog-buscar input.blog-buscar__campo { flex: 1; min-width: 0; min-height: 0; height: 2.4rem; padding: 0 .35rem; border: 0; border-radius: 0; background: transparent; box-shadow: none; outline: none; appearance: none; -webkit-appearance: none; font: inherit; color: inherit; }
.blog-buscar__campo::-webkit-search-cancel-button { -webkit-appearance: none; display: none; }
.blog-buscar__boton { flex: none; height: 2.4rem; padding: 0 1.1rem; border: 0; border-radius: var(--boton-radio, 999px); background: var(--color-boton-fondo, var(--color-primario)); color: var(--color-boton-texto, #fff); font: inherit; font-weight: 700; font-size: .88rem; cursor: pointer; transition: filter .15s ease; }
.blog-buscar__boton:hover { filter: brightness(.92); }
.blog-barra__limpiar { margin: .6rem 0 0; font-size: .85rem; }
.blog-barra__limpiar a { color: var(--color-primario); }
.blog-listado { min-width: 0; }
.blog-listado .blog-page__header { max-width: none; padding-top: clamp(1.5rem, 4vw, 2.5rem); }
.blog-post-layout--con-barra .blog-grid--cols-3, .blog-post-layout--con-barra .blog-grid--cols-4 { --blog-cols: 2; }
.blog-empty { display: grid; gap: .6rem; justify-items: start; }
.blog-empty p { margin: 0; color: var(--color-texto-suave); }

/* Filtros de categoría y marca en columna izquierda (escritorio). La <form> pasa a `display: contents` para que el panel, el selector de orden
   y los resultados sean celdas de una misma grilla sin sacar los campos de su formulario ni anidar formularios. En pantallas chicas
   queda el botón «Filtrar» con el cajón de siempre. */
@media (min-width: 1024px) {
	.catalogo-lateral:has(> .categoria-toolbar .filtros-panel) { display: grid; grid-template-columns: var(--filtros-ancho, 300px) minmax(0, 1fr); column-gap: clamp(1.5rem, 3vw, 2.5rem); align-items: start; align-content: start; }
	.catalogo-lateral:has(> .categoria-toolbar .filtros-panel) > * { grid-column: 1 / -1; }
	.catalogo-lateral:has(> .categoria-toolbar .filtros-panel) > .categoria-toolbar { display: contents; }
	.catalogo-lateral:has(> .categoria-toolbar .filtros-panel) > .categoria-toolbar .filtros-panel { grid-column: 1; grid-row: span 4; position: sticky; top: 1rem; justify-self: stretch; width: 100%; }
	.catalogo-lateral:has(> .categoria-toolbar .filtros-panel) > .categoria-toolbar .categoria-toolbar__grupo { grid-column: 2; justify-self: end; margin-bottom: 1rem; }
	.catalogo-lateral:has(> .categoria-toolbar .filtros-panel) > .categoria-orden-estado,
	.catalogo-lateral:has(> .categoria-toolbar .filtros-panel) > .categoria-resultados,
	.catalogo-lateral:has(> .categoria-toolbar .filtros-panel) > .marca-resultados { grid-column: 2; min-width: 0; }
	.catalogo-lateral .filtros-panel__toggle, .catalogo-lateral .filtros-panel__fondo, .catalogo-lateral .filtros-panel__cabecera { display: none; }
	.catalogo-lateral .filtros-panel__contenido { position: static; inset: auto; z-index: auto; width: auto; height: auto; max-height: calc(100vh - 2rem); border: 1px solid var(--color-borde); border-radius: var(--radio, 12px); box-shadow: none; visibility: visible; transform: none; pointer-events: auto; transition: none; }
	html:has(.catalogo-lateral .filtros-panel__checkbox:checked) { overflow: auto; }
}

/* Filtros en barra horizontal (escritorio): cada grupo de facetas es una píldora y sus opciones se abren como menú bajo ella; en <1025 px queda el botón «Filtrar» con cajón. */
@media (min-width: 1025px) {
	.catalogo-barra .categoria-toolbar { flex-wrap: nowrap; align-items: flex-start; justify-content: space-between; gap: 1rem; }
	.catalogo-barra .categoria-toolbar .filtros-panel { flex: 1 1 auto; min-width: 0; }
	.catalogo-barra .categoria-toolbar__grupo { flex: none; }
	.catalogo-barra .filtros-panel__toggle, .catalogo-barra .filtros-panel__fondo, .catalogo-barra .filtros-panel__cabecera { display: none; }
	.catalogo-barra .filtros-panel__contenido { display: block; position: static; inset: auto; z-index: auto; width: auto; height: auto; overflow: visible; border-radius: 0; background: none; box-shadow: none; visibility: visible; transform: none; pointer-events: auto; transition: none; }
	html:has(.catalogo-barra .filtros-panel__checkbox:checked) { overflow: auto; }
	.catalogo-barra .filtros-panel__contenido .facetas { display: flex; flex-flow: row wrap; align-items: center; gap: .5rem; padding: 0; overflow: visible; }
	.catalogo-barra .facetas__campos { display: flex; flex-flow: row wrap; gap: .5rem; }
	.catalogo-barra .facetas-grupo { position: relative; }
	.catalogo-barra .facetas-grupo summary { display: flex; align-items: center; gap: .45rem; min-height: var(--campo-altura, 40px); padding: 0 2rem 0 .9rem; border: var(--campo-borde-px, 1px) solid var(--campo-borde, #dddddd); border-radius: var(--campo-radio, 6px); background: var(--filtros-activar-fondo, var(--color-fondo)); white-space: nowrap; }
	.catalogo-barra .facetas-grupo summary::after { right: .8rem; }
	.catalogo-barra .facetas-grupo__actual { max-width: 9rem; }
	.catalogo-barra .facetas-grupo[open] summary { border-color: var(--color-primario); }
	.catalogo-barra .facetas-grupo[open] .facetas-grupo__opciones { position: absolute; top: calc(100% + 6px); left: 0; z-index: 40; min-width: 15rem; max-width: 22rem; max-height: 18rem; overflow-y: auto; padding: .4rem; border: 1px solid var(--color-borde); border-radius: var(--radio, 12px); background: var(--filtros-panel-fondo, var(--color-fondo)); color: var(--filtros-panel-texto, var(--color-texto)); box-shadow: 0 12px 28px color-mix(in srgb, var(--color-sombra) 16%, transparent); }
	.catalogo-barra .filtros-panel__contenido .facetas__acciones { position: static; display: flex; margin: 0; padding: 0; border: 0; background: none; box-shadow: none; gap: .75rem; }
	.catalogo-barra .filtros-panel__contenido .facetas__acciones .btn { flex: none; }
}

/* Envío gratis: barra de progreso del carrito y del carrito lateral. */
.envio-gratis { margin: 0 0 .9rem; padding: .7rem .85rem; border: 1px solid var(--color-borde); border-radius: var(--radio, 10px); background: var(--color-fondo-suave); }
.envio-gratis__texto { margin: 0 0 .5rem; font-size: .88rem; line-height: 1.35; }
.envio-gratis__barra { height: 8px; border-radius: 999px; background: var(--color-borde); overflow: hidden; }
.envio-gratis__barra > span { display: block; height: 100%; border-radius: inherit; background: var(--color-primario); transition: width .3s ease; }
.envio-gratis--listo .envio-gratis__barra > span { background: var(--color-exito, #1f5c37); }
.envio-gratis--listo .envio-gratis__texto { color: var(--color-exito, #1f5c37); }
@media (prefers-reduced-motion: reduce) { .envio-gratis__barra > span { transition: none; } }

/* Cupón de descuento en el resumen del checkout. */
.checkout-cupon { margin: 0 0 1rem; }
.checkout-cupon label { display: block; margin: 0 0 .35rem; font-size: .88rem; font-weight: 600; }
.checkout-cupon__campos { display: flex; align-items: stretch; gap: .5rem; }
.checkout-cupon__campos input { flex: 1; min-width: 0; box-sizing: border-box; height: var(--campo-altura, 46px); padding: 0 1rem; text-transform: uppercase; }
.checkout-cupon__campos input::placeholder { text-transform: none; }
/* El botón secundario (fondo suave) se perdía sobre el fondo gris del resumen: lleva el mismo fondo y borde que el campo. */
.checkout-cupon__campos .btn { background: var(--campo-fondo, var(--color-fondo)); border: 1px solid var(--campo-borde, var(--color-borde)); }
.checkout-cupon__aplicado { margin: 0 0 .4rem; font-size: .9rem; color: var(--color-exito, #1f5c37); }
.checkout-cupon__error { margin: .4rem 0 0; font-size: .85rem; color: var(--color-error, #b3261e); }
.checkout-resumen__linea--descuento strong { color: var(--color-exito, #1f5c37); }

/* /marcas: grupos por letra y filtro al escribir. */
.marcas-herramientas { margin: 0 0 1.5rem; }
.marcas-buscador { box-sizing: border-box; width: 100%; max-width: 28rem; min-height: var(--campo-altura, 44px); padding: 0 1rem; border: var(--campo-borde-px, 1px) solid var(--campo-borde, #dddddd); border-radius: var(--campo-radio, 8px); background: var(--campo-fondo, #fff); color: var(--color-texto); font: inherit; }
.marcas-buscador:focus { outline: none; border-color: var(--color-primario); box-shadow: 0 0 0 2px var(--campo-foco-anillo, transparent); }
.marcas-grupo { margin: 0 0 2rem; scroll-margin-top: 7rem; }
.marcas-grupo[hidden], .marcas-item[hidden] { display: none; }
.marcas-grupo__letra { margin: 0 0 1rem; padding: 0 0 .5rem; border-bottom: 1px solid var(--color-borde); font-size: 1.6rem; line-height: 1; }
.marcas-item { min-width: 0; }

/* Acciones de los filtros: el botón nunca se parte en dos líneas; en la columna estrecha de la izquierda van apiladas (botón completo y «Limpiar» centrado debajo). */
.facetas__acciones .btn { white-space: nowrap; }
@media (min-width: 1024px) {
	.catalogo-lateral .filtros-panel__contenido .facetas__acciones { flex-direction: column; align-items: stretch; gap: .6rem; text-align: center; }
	.catalogo-lateral .filtros-panel__contenido .facetas__acciones .btn { flex: none; }
}

/* Barra de filtros: los que no caben en la primera fila quedan tras «Más filtros». */
.facetas__mas { display: inline-flex; align-items: center; min-height: var(--campo-altura, 40px); padding: 0 .9rem; border: var(--campo-borde-px, 1px) dashed var(--campo-borde, #dddddd); border-radius: var(--campo-radio, 6px); background: transparent; color: var(--color-texto); font: inherit; font-size: .875rem; font-weight: 600; cursor: pointer; }
.facetas__mas:hover, .facetas__mas:focus-visible { border-color: var(--color-primario); }
.facetas__mas[hidden] { display: none; }
.facetas-grupo--extra { display: none; }
.facetas__campos--abierta .facetas-grupo--extra { display: block; }

/* Campos con aro al enfocar (Theme editor → Campos → «Al seleccionar un campo»): borde transparente y aro de 3 px del color de foco al 22 % con `background-clip: padding-box` (igual que Awake: sin padding-box el borde transparente deja ver el fondo del campo bajo el aro y el grosor se ve desparejo), sin cambiar el tamaño del campo. */
body[data-form-labels] :where(input:not([type]), input[type="text"], input[type="email"], input[type="tel"], input[type="password"], input[type="url"], input[type="date"], input[type="search"], input[type="number"], textarea, select) { transition: border-color .15s ease-in-out, box-shadow .15s ease-in-out, background-color .15s ease-in-out; }
body[data-campo-foco="anillo"][data-form-labels] :where(input:not([type]), input[type="text"], input[type="email"], input[type="tel"], input[type="password"], input[type="url"], input[type="number"]:not([name="cantidad"]), input[type="date"], input[type="search"], textarea, select):is(:focus, :focus-visible) {
	border-color: transparent;
	background-clip: padding-box;
	box-shadow: 0 0 0 3px color-mix(in srgb, var(--campo-foco-color, var(--color-primario)) 22%, transparent);
}
body[data-campo-foco="anillo"] .search input:focus { box-shadow: none; }
body[data-campo-foco="anillo"] .vc-select__trigger:is(:focus, :focus-visible, .vc-select__trigger--abierto) { border-color: transparent; background-clip: padding-box; box-shadow: 0 0 0 3px color-mix(in srgb, var(--campo-foco-color, var(--color-primario)) 22%, transparent); }

/* Botones de acción grandes (carrito lateral y «Confirmar pedido»): mismo alto, mayúsculas y espaciado para que se lean como un solo estilo. */
.side-cart__acciones .btn, .btn.btn-checkout-confirmar { --boton-accion-alto: 46px; min-height: var(--boton-accion-alto); text-transform: uppercase; letter-spacing: .02em; }

/* iPad y iPhone: Safari hace zoom al tocar dos veces seguidas (los botones + y − de la cantidad) y al enfocar un campo con letra menor de 16 px.
   `touch-action: manipulation` quita el zoom por doble toque en los controles (el pellizco para ampliar sigue funcionando) y en pantallas
   táctiles los campos llevan al menos 16 px. */
a, button, input, select, textarea, label, summary, [role="button"], .selector-cantidad, .selector-cantidad * { touch-action: manipulation; }
@media (pointer: coarse) {
	input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="color"]):not([type="hidden"]):not([type="file"]):not([type="submit"]):not([type="button"]),
	select, textarea,
	.selector-cantidad input[name="cantidad"], .producto-agregar .selector-cantidad input[name="cantidad"], .selector-cantidad--mini input[name="cantidad"] { font-size: max(16px, 1em); }
	.side-cart__cerrar { width: 2.75rem; height: 2.75rem; min-width: 2.75rem; min-height: 2.75rem; }
}