/* Núcleo del front: lo que usa casi cualquier página (variables, tipografía, header, menús, botones, tarjetas de producto, formularios, footer…).
   Lo propio de una página o función vive en css/modulos/*.css y solo se carga cuando el HTML trae sus clases (App\Core\View\CssFront).
   Una clase nueva de un módulo se registra en CssFront::MODULOS; el panel carga todos los módulos. */
/* ==========================================================================
   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;
}
/* Un listado (select múltiple o con size) no es un desplegable: sin la flecha del chevron (se veía en medio de la barra de desplazamiento) y con el relleno de una lista. */
select[multiple], select[size]:not([size="1"]) { background-image: none; padding: .35em .5em; cursor: default; }
select[multiple] option, select[size]:not([size="1"]) option { padding: .25em .5em; }
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;
	/* Theme editor → Campos → Botones → «Texto de los botones» (normal o mayúsculas espaciadas). */
	font-size: var(--boton-texto-tamano, 1em);
	text-transform: var(--boton-texto-transform, none);
	letter-spacing: var(--boton-texto-espaciado, normal);
	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(--header-fondo-final, 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: var(--buscador-borde-px, 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: var(--panel-radio, 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);
}
/* Puntas de los íconos de línea (solo los SVG con trazo: los Phosphor van rellenos). Sin valor quedan las redondas del propio SVG. */
.header-actions .icon-link svg[stroke],
.menu-movil-abrir svg[stroke],
.search__barra button svg[stroke] {
	stroke-linecap: var(--icono-header-puntas, round);
	stroke-linejoin: var(--icono-header-uniones, round);
}
/* Líneas de la fila del menú: Theme editor → Header → «Líneas del menú» (sin valor guardado, 1 px arriba y abajo). */
.main-nav { border-top: var(--menu-borde-arriba, 1px) solid var(--color-borde); background: var(--header-fila-fondo, 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: var(--submenu-radio, var(--radio, 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: var(--menu-borde-abajo, 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-fondo-final, 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: var(--footer-borde-superior, 1px) solid color-mix(in srgb, var(--footer-demo-titulo, #ffffff) 22%, var(--footer-demo-fondo, #0f1a2b)); }
.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 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--sec { background: transparent; border-color: var(--fd-linea-fuerte); color: var(--color-texto); }
/* Sin `width` propio: el atributo width/height del <img> manda y reserva el espacio desde el primer cuadro; `max-width` lo acota al enlace (190 px). Con `width:100%` el enlace —que se ajusta al contenido— valía 0 hasta cargar el logo y el pie crecía 38 px de golpe. */
.landing-footer-demo__logo img { max-width: 100%; height: auto; }
.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__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 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); }
.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__facts li { min-width: 0; padding: 1rem 1.1rem; border: 1px solid var(--color-borde); border-radius: calc(var(--radio, 10px) * 1.2); 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 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 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%; }
/* Portada editorial de landing-html: estructura CSS, sin carruseles ni controles JS. */
.landing-html--home { padding: 0; }
.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-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 small { color: var(--editorial-texto-suave, #63707b); }
.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-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__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__productos { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 24px; }
.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 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-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 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 h2 { max-width: 540px; color: var(--editorial-cierre-texto, #fff); }
@media (max-width: 900px) {
.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 p { margin-top: 16px; }
.landing-home__closing .landing-home__button { margin-top: 30px; }
}
@media (max-width: 440px) {
.landing-home__hero h1 { font-size: 2.45rem; }
}
/* 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 h2 { margin: 0; font-size: clamp(1.65rem, 2.6vw, 2.2rem); }
.resenas__balance-detalle .resenas-estrellas { font-size: 18px; }
.resenas__barra > span { display: block; height: 100%; border-radius: inherit; background: var(--color-texto); }
.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__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__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: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 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__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 h3 { margin: .85rem 0 .25rem; font-size: .98rem; }
.resenas__opinion p { margin: .7rem 0 0; line-height: 1.55; overflow-wrap: anywhere; }
@media (max-width: 420px) {
.resenas__orden, .resenas__formulario { width: 100%; margin-left: 0; }
.resenas__orden summary, .resenas__formulario summary.resenas__abrir { width: 100%; margin-left: 0; }
}
@media (min-width: 421px) {
.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); }
}
/* 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);
	/* Alineado con el borde izquierdo de la píldora (que sobresale .75rem del texto), no con el texto. */
	left: -.75rem;
	min-width: 218px;
	background: var(--main-nav-nivel2-fondo, var(--color-menu-fondo));
	border: 0;
	/* Sigue a «Radio de tarjetas y cajas» (Theme editor, --radio): con 10 px queda como siempre, con 0 todo recto. */
	border-radius: var(--submenu-radio, var(--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;
}
/* Theme editor → Menú → «Submenú unido al ítem» (data-submenu-unido en <body>): sin espacio entre la píldora y el submenú, la píldora
   toma el fondo del submenú y los textos de ambos quedan en la misma línea vertical. Sin elegirlo, todo queda como siempre. */
body[data-submenu-unido] .main-nav > ul > li.main-nav__item--con-hijos:hover > a,
body[data-submenu-unido] .main-nav > ul > li.main-nav__item--con-hijos:focus-within > a {
	position: relative;
	z-index: 51;
	background: var(--main-nav-nivel2-fondo, var(--color-menu-fondo));
	border-bottom-left-radius: 0;
	border-bottom-right-radius: 0;
}
body[data-submenu-unido] .main-nav > ul > li > .main-nav__submenu { top: calc(100% + .6rem); padding: 0; border-top-left-radius: 0; }
body[data-submenu-unido] .main-nav .main-nav__submenu a { padding: .7rem .75rem; border-radius: 0; }
body[data-submenu-unido] .main-nav .main-nav__submenu .main-nav__submenu { top: 0; }
/* 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: calc(var(--submenu-radio, var(--radio, 10px)) * .8);
	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. */
/* La fila (enlace + flecha) es UNA franja: el fondo al pasar o del ítem activo la cubre entera, sin un círculo aparte en la flecha. */
.menu-movil__fila { display: flex; align-items: center; gap: 0; border-radius: min(8px, var(--menu-movil-radio, 18px)); transition: background-color var(--transicion); }
.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))));
}
/* 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; }
}
/* 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;
	/* Theme editor → Menú → «Radio del panel» (sin valor guardado, 18 px). */
	border-radius: 0 var(--menu-movil-radio, 18px) var(--menu-movil-radio, 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;
	/* Derivado del texto del popup (no de --color-fondo-suave): con un popup oscuro en un tema claro el círculo claro se tragaba la X blanca. */
	background: color-mix(in srgb, currentColor 12%, transparent);
	cursor: pointer;
	color: var(--color-menu-movil-texto, var(--color-menu-texto));
	padding: 0;
}
.menu-movil__cerrar:hover { background: color-mix(in srgb, currentColor 22%, transparent); }
.menu-movil__cerrar:focus-visible, .menu-movil__toggle:focus-visible { outline: 2px solid var(--color-primario); outline-offset: 2px; }
/* .75rem a los lados + .5rem del enlace: el texto queda alineado con «Menú» del encabezado (1.25rem) y la franja del hover tiene aire. */
.menu-movil__nav { flex: 1; min-height: 0; overflow-y: auto; overscroll-behavior: contain; padding: .75rem .75rem 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) .5rem;
	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 { margin-right: 4px; }
/* Ítem tocado o activo: --color-menu-movil-activo lo calcula ThemeCss (primario si se lee sobre el fondo del popup, si no el texto del popup),
   y un leve tinte del mismo color marca el estado aunque el color no cambie. */
.menu-movil__fila:hover,
.menu-movil__fila:has(> a:focus-visible),
.menu-movil__fila:has(> a.activo) {
	background: color-mix(in srgb, var(--color-menu-movil-activo, var(--color-menu-movil-texto, var(--color-primario))) 12%, transparent);
}
.menu-movil__fila:hover > a,
.menu-movil__nav a:focus-visible,
.menu-movil__nav a.activo,
.menu-movil__fila:hover > .menu-movil__toggle {
	opacity: 1;
	color: var(--color-menu-movil-activo, var(--color-menu-movil-texto, 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); }
}
.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;
}
/* Catálogo → Configuración → Listados → «Foto de la miniatura»: foto completa en vez de recortada (también la 2ª foto del hover). */
body[data-miniatura-ajuste="completa"] .producto-card img { object-fit: contain; }
/* 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; }
/* Miniatura «galeria» («Sobre fondo»): sin marco, la tarjeta entera toma el fondo de las fotos y el texto gana aire (como un catálogo de estudio). */
.producto-card--galeria { border-color: transparent; background: var(--catalogo-imagen-fondo, var(--color-fondo-suave)); }
.producto-card--galeria .producto-card__nombre { padding: 1rem 1rem .35rem; }
.producto-card--galeria .producto-card__precio { padding: 0 1rem 1rem; }
.producto-card--galeria .resenas-card { margin: -.6rem 1rem 1rem; }
/* 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);
	/* Un nombre con «Naranja/alum/madera» (sin espacios) no debe salirse de la tarjeta. */
	overflow-wrap: anywhere;
}
.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;
}
/* Una combinación con precio propio no lleva la oferta del producto: producto.js oculta el tachado. */
.precio-anterior[hidden] { display: none; }
/* ==========================================================================
   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__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; }
/* 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__grupo select, .categoria-toolbar .filtros-panel__toggle { width: 100%; }
}
.filtros-panel__toggle svg { flex-shrink: 0; }
html:has(.filtros-panel__checkbox:checked) { overflow: hidden; }
.filtros-panel__cabecera .filtros-panel__titulo { margin: 0; font-size: 1.05rem; line-height: 1.25; }
.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 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-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); }
.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); }
.facetas__acciones a { font-size: .85rem; }
.facetas-activas > strong { margin-right: .2rem; }
.facetas-activas__chip span { font-size: 1.15em; line-height: 1; }
.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-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-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__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));
}
@media (max-width: 1024px) {
.producto-galeria__grilla::-webkit-scrollbar { display: none; }
.producto-galeria__grilla picture:only-child { flex-basis: 100%; }
}
@media (min-width: 1025px) {
.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 picture { flex: 0 0 auto; width: 76px; height: 76px; }
}
.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-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); }
/* El selector visual envuelve al <select>; el margen del control oculto no separa las filas. */
.entrega-estimada-modal .vc-select { margin-bottom: .9rem; }
.entrega-opcion:last-child { margin-bottom: 0; }
.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-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-variantes__grupo legend { padding: 0; margin: 0 0 .55rem; font-size: .88rem; font-weight: 700; color: var(--color-texto); }
.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; }
/* 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 h2 { margin-bottom: 1rem; }
.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:focus-visible { outline: 2px solid var(--color-primario); outline-offset: 3px; }
.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; }
.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 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 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; }
}
.producto-slider__pista::-webkit-scrollbar { display: none; }
/* 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); }
.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); }
/* ==========================================================================
   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(--footer-fondo-final, var(--color-footer-fondo));
	color: var(--color-footer-texto);
	margin-top: var(--footer-margen-superior, 3rem);
}
/* Una portada propia (bloque HTML) que es lo ÚLTIMO de la página trae sus bandas de borde a borde con su propio relleno: los 3 rem de aire de fábrica solo dejarían una
   franja blanca entre su última banda (de color, por ejemplo) y el footer. Si la persona fijó el margen en el Theme editor, ese valor manda. */
main:has(> .landing-html--home:last-child) + .site-footer { margin-top: var(--footer-margen-superior, 0); }
/* 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); }
.mantencion__logo img { display: block; width: auto; max-width: min(240px, 100%); max-height: 64px; }
.mantencion h1 { margin: 0; font-size: clamp(1.7rem, 5.4vw, 2.4rem); line-height: 1.15; letter-spacing: -.03em; color: var(--color-texto); text-wrap: balance; }
.mantencion__barra span { position: absolute; inset: 0 auto 0 0; width: 38%; border-radius: inherit; background: var(--color-primario); animation: mantencion-barra 2.4s ease-in-out infinite; }
.mantencion__acciones .btn { min-width: 9.5rem; }
.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; }
@keyframes mantencion-barra { 0% { transform: translateX(-100%); } 100% { transform: translateX(270%); } }
@media (max-width: 480px) {
.mantencion__acciones .btn { flex: 1 1 100%; }
}
/* ==========================================================================
   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 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 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 h2 { margin: 0 0 .8rem; }
.nosotros-editorial__relato p { line-height: 1.7; }
.nosotros-editorial__cierre p { max-width: 60ch; margin: 0; }
.nosotros-editorial__cierre a { color: var(--color-primario); font-weight: 700; }
.contacto-breadcrumbs .breadcrumbs { margin-bottom: 0; }
.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-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 small { display: block; color: var(--color-texto-suave); font-size: .78rem; }
.contacto-dato strong { display: block; font-weight: 650; }
.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 .btn { justify-self: start; }
.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; }
/* 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; }
}
.admin-campo .vc-select, .resenas__formulario .vc-select, .entrega-estimada-modal .vc-select { display: block; 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--abierto .vc-select__flecha { transform: rotate(225deg); margin-top: .25em; }
.vc-select__opcion[aria-selected="true"]::after { content: '✓'; margin-left: auto; color: var(--color-primario); }
.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__titulo--neutro { color: var(--color-texto); }
.modal-carrito__aviso { margin: -0.25rem 0 1rem; font-size: 0.875rem; line-height: 1.45; color: var(--color-texto-suave); }
.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__item-imagen img { width: 80px; height: 88px; object-fit: contain; }
.side-cart__sugeridos-track::-webkit-scrollbar { display: 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__acciones .btn { display: flex; align-items: center; justify-content: center; text-align: center; white-space: nowrap; }
/* ==========================================================================
   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 h2 { font-size: 1.2rem; margin: 0 0 1.15rem; }
.carrito-lateral__linea strong, .carrito-lateral__total strong { white-space: nowrap; }
.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; }
@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); }
}
/* Avisos de lo que el carrito ajustó solo (stock, productos desactivados): informativos y neutros, sin color de alerta. */
.carrito-ajustes {
	margin: 0 0 1.25rem;
	padding: 0.75em 1em;
	border: 1px solid var(--color-borde);
	border-radius: var(--radio);
	background: var(--color-fondo-suave);
	color: var(--color-texto);
	font-size: 0.9rem;
	line-height: 1.45;
}
.carrito-ajustes p { margin: 0; }
.carrito-ajustes ul { margin: 0.35rem 0 0; padding-left: 1.2rem; }
.carrito-ajustes__titulo { font-weight: 600; }
/* 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-header__interior .logo { order: 2; margin-right: 0; min-width: 0; }
.checkout-form h1 { margin: 0 0 1.2rem; font-size: clamp(1.7rem, 2.6vw, 2.1rem); }
.checkout-main .admin-campo-fila { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.checkout-main .admin-campo { margin-bottom: .7rem; }
.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; }
.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: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; }
.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 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-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 small { display: block; margin-top: .15rem; color: var(--color-texto-suave); font-size: .8rem; font-weight: 400; }
.checkout-terminos input { grid-column: 1; width: 20px; height: 20px; margin: calc(.08rem - 1px) 0 0; cursor: pointer; }
.checkout-terminos__texto label { margin: 0; }
.checkout-terminos a { color: var(--color-primario); }
.checkout-terminos-dialogo::backdrop { background: color-mix(in srgb, var(--color-velo) var(--velo-opacidad, 55%), transparent); }
.checkout-terminos-dialogo__cabecera h2 { margin: 0; font-size: 1.2rem; line-height: 1.3; }
.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 a { color: var(--color-primario); }
.btn-checkout-confirmar[aria-disabled="true"] { opacity: .55; cursor: not-allowed; }
.btn-checkout-confirmar { width: 100%; text-transform: uppercase; letter-spacing: 0.02em; padding: 0.55em 1.4em; }
.checkout-medio-pago input { accent-color: var(--campo-radio-color, var(--color-primario)); margin: 0; flex: none; }
.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));
}
/* 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-gracias__hero h1 { margin: 0 0 .55rem; font-size: clamp(1.75rem, 3vw, 2.5rem); line-height: 1.12; }
.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__panel h2, .checkout-gracias .checkout-transferencia h2 { margin: 0 0 1.25rem; font-size: 1.12rem; line-height: 1.3; }
.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 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__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__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 .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__instrucciones { margin: 1.25rem 0 0; padding-top: 0; border-top: 0; }
.checkout-gracias__extras .checkout-transferencia { margin-top: 1.25rem; }
.checkout-gracias__acciones .btn { min-width: 190px; 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: 480px) {
.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; }
/* 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 v3 (una fila con buscador a la vista): logo, buscador que ocupa el espacio libre, menú en línea pegado a las acciones. */
@media (min-width: 1025px) {
.site-header--v3 .header-search-barra .search { flex: 1 1 14rem; min-width: 8rem; max-width: 26rem; }
.site-header--v3 .main-nav--inline { flex: 0 0 auto; margin-left: auto; }
.site-header--v3 .main-nav--inline > ul { flex-wrap: nowrap; }
.site-header--v3 .main-nav--inline > ul > li { white-space: nowrap; }
.site-header--v3 .header-actions { margin-left: 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. */
.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, .site-header--v3 .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. */
.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)); }
}
@media (max-width: 720px) {
.checkout-resumen::before { display: none; }
.admin-campo-fila,
	.checkout-main .admin-campo-fila { grid-template-columns: 1fr; }
}
.cuenta-form .btn { margin-top: 0.5rem; }
.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 .admin-campo { margin: 0; }
.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__form .btn { width: 100%; min-height: var(--boton-altura, 42px); margin-top: .4rem; }
.cuenta-acceso__pie a { color: var(--color-primario); font-weight: 700; }
.cuenta-nav a { color: var(--color-texto-suave); }
.cuenta-seccion h2 { font-size: 1.05rem; margin-bottom: 0.5rem; }
.aviso-stock-form label { display: block; margin-bottom: 8px; font-weight: 700; }
.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); }
/* 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; }
.blog-page__header h1,.blog-post__header h1 { margin: 0 0 .9rem; line-height: 1.12; }
.blog-page__intro > :first-child { margin-top: 0; }
.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-card__imagen img { display: block; width: 100%; height: 100%; object-fit: cover; }
.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-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-post__meta > * + *::before { content: "—"; margin: 0 .8rem; color: var(--color-borde); font-weight: 400; }
.blog-post__autor-caja a,.blog-post__compartir a { color: var(--color-primario); font-weight: 700; text-decoration: none; }
.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__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__lista a { display: flex; justify-content: space-between; gap: .75rem; color: var(--color-texto-suave); text-decoration: none; }
.blog-barra__recientes li { display: flex; gap: .8rem; align-items: center; }
.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); }
.blog-home__head > a { color: var(--color-primario); font-weight: 700; text-decoration: none; }
/* ---------- 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; }
.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; }
.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;
	}
.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; }
}
/* 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; }
/* 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: var(--panel-radio, 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-media img { display: block; width: 100%; height: 100%; object-fit: cover; }
.popup-simple-contenido p { margin: 0; color: var(--color-texto-suave); line-height: 1.55; }
.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); }
.popup-simple-overlay--esquina .popup-simple-caja--newsletter { grid-template-columns: minmax(0, 1fr); width: min(100%, 380px); }
.newsletter-form__alerta { margin: 0; padding: .6rem .9rem; border: 1px solid transparent; border-radius: var(--panel-radio, 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); }
.landing-footer-demo__newsletter > div { display: grid; gap: .55rem; }
.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; }
@media (min-width: 1025px) {
.landing-footer-demo__newsletter > :first-child { grid-column: 1 / span 2; }
.landing-footer-demo__newsletter > :last-child:not(:first-child) { grid-column: 3 / -1; }
}
/* 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; }
.cookies-banner__texto a { color: var(--color-primario); text-decoration: underline; }
.cookies-banner__acciones .btn { min-height: 0; padding: 0.55em 1.1em; font-size: 0.85rem; }
/* 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__vecino small { display: block; margin-bottom: .3rem; color: var(--color-texto-suave); font-size: .78rem; }
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; }
/* 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; }
html:has(.catalogo-lateral .filtros-panel__checkbox:checked) { overflow: auto; }
}
@media (min-width: 1025px) {
html:has(.catalogo-barra .filtros-panel__checkbox:checked) { overflow: auto; }
}
/* 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; }
}
/* /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; }
/* 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; }
/* 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); }
}
/* Acciones extra dentro de la tarjeta de producto (`producto_card_acciones`): cotizar, ficha técnica… Las pone una extensión; el color de cada botón sale de
   `--acc-fondo` / `--acc-texto` / `--acc-borde` (por defecto, un botón claro con borde). */
.producto-card__acciones { display: grid; gap: .45rem; padding: 0 .75rem .75rem; }
.producto-card__accion { display: inline-flex; align-items: center; justify-content: center; gap: .45rem; box-sizing: border-box; min-height: 2.5rem; padding: .45rem 1rem; border: 1px solid var(--acc-borde, var(--color-borde)); border-radius: var(--boton-radio, 8px); background: var(--acc-fondo, var(--color-fondo)); color: var(--acc-texto, var(--color-texto)); font-size: .85rem; font-weight: 700; line-height: 1.2; text-align: center; text-decoration: none; cursor: pointer; }
.producto-card__accion:hover { filter: brightness(.94); }
.producto-card__accion svg { flex: none; }
.producto-card__accion--whatsapp { --acc-fondo: var(--color-whatsapp, #25d366); --acc-texto: var(--color-redes-texto, #fff); --acc-borde: transparent; }
.producto-card__accion--primaria { --acc-fondo: var(--color-boton-fondo, var(--color-primario)); --acc-texto: var(--color-boton-texto, #fff); --acc-borde: transparent; }
@media (pointer: coarse) {
.producto-card__accion { min-height: 2.75rem; }
}