/* ==========================================================================
   Variables compartidas del diseño
   ========================================================================== */
:root {
	--color-primario: #1d4ed8;
	--color-primario-oscuro: #1740b0;
	--color-acento: #0f172a;
	--color-texto: #111827;
	--color-texto-suave: #64748b;
	--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: #0f172a;
	--color-velo-intenso: #000000;
	--color-velo-dialogo: #0c1624;
	--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;
	--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)) var(--campo-foco-opacidad, 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 { font: inherit; color: inherit; }
h1, h2, h3, h4, h5, p { margin: 0 0 0.5em; }
h1 { font-size: var(--tam-h1); }
h2 { font-size: var(--tam-h2); }
h3 { font-size: var(--tam-h3); }
h4 { font-size: var(--tam-h4); }
h5 { font-size: var(--tam-h5); }

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

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

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

/* Selectores del front: control nativo como base para todos los navegadores. */
select {
	appearance: none;
	-webkit-appearance: none;
	background-color: var(--campo-fondo, var(--color-fondo));
	background-image: linear-gradient(45deg, transparent 50%, var(--color-texto-suave) 50%), linear-gradient(135deg, var(--color-texto-suave) 50%, transparent 50%), linear-gradient(to bottom, color-mix(in srgb, var(--color-flotante) 13%, transparent), color-mix(in srgb, var(--color-sombra) 2.5%, transparent));
	background-repeat: no-repeat;
	background-position: calc(100% - 20px) center, calc(100% - 15px) center, 0 0;
	background-size: 5px 5px, 5px 5px, 100% 100%;
	padding: .55em 1em;
	border: var(--campo-borde-px, 1px) solid var(--campo-borde, #dddddd);
	border-radius: var(--campo-radio, 8px);
	color: var(--color-texto);
	cursor: pointer;
	box-shadow: 0 1px 2px color-mix(in srgb, var(--color-sombra) 4.5%, transparent);
	transition: border-color .18s ease, box-shadow .18s ease, background-color .18s ease;
}
select:not([multiple]):not([size]):not(.estado-badge-select) {
	min-height: var(--campo-altura, 40px);
	padding-inline-end: 2.75em;
}
select:not(.estado-badge-select):hover:not(:disabled) { border-color: color-mix(in srgb, var(--campo-borde, #dddddd) 70%, var(--campo-foco-borde, var(--color-primario))); box-shadow: 0 2px 7px color-mix(in srgb, var(--color-sombra) 9%, transparent); }
select:focus-visible { outline: none; border-color: var(--campo-foco-borde, var(--color-primario)); box-shadow: 0 0 0 var(--campo-foco-grosor, 2px) var(--campo-foco-anillo); }
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));
	/* Botones sin borde en el front; admin.css restaura su borde en el panel. */
	border: none;
	background: var(--color-fondo-suave);
	color: var(--color-texto);
	cursor: pointer;
	font-weight: 600;
	transition: transform var(--boton-animacion-duracion, 220ms) ease, filter var(--boton-animacion-duracion, 220ms) ease, box-shadow var(--transicion), background var(--transicion);
}
.btn:not(.btn-primary):hover { background: var(--color-borde); }
.btn:hover { transform: var(--boton-hover-transform, none); filter: var(--boton-hover-filter, none); }
.btn-primary {
	background: var(--color-boton-fondo);
	color: var(--color-boton-texto);
	box-shadow: var(--sombra);
	transition: transform var(--boton-animacion-duracion, 220ms) ease, filter var(--boton-animacion-duracion, 220ms) ease, box-shadow var(--transicion), background var(--transicion), color var(--transicion);
}
.btn-primary:hover {
	background: var(--color-boton-hover-fondo, var(--color-boton-fondo));
	color: var(--color-boton-hover-texto, var(--color-boton-texto));
}
@media (prefers-reduced-motion: reduce) {
    .btn, .btn:hover { transition-duration: 0ms; transform: none; filter: none; }
}

/* ==========================================================================
   Header
   ========================================================================== */
.site-header { position: relative; background: var(--color-menu-fondo); }
.site-header--sticky-escritorio,
.site-header--sticky-movil { z-index: 40; }
.site-header--con-borde-abajo { border-bottom: var(--header-borde-abajo-grosor, 1px) solid var(--header-borde-abajo-color, var(--color-borde)); }
@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__texto { color: inherit; }
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);
	transition: padding var(--transicion);
}
@media (min-width: 1025px) {
	.header-main { padding-top: var(--header-padding-top-escritorio, 1rem); padding-bottom: var(--header-padding-bottom-escritorio, 1rem); }
}
/* app.js añade esta clase si está activo el encogimiento del header; reducir padding conserva el flujo. */
.site-header--encogido .header-main {
	padding-top: calc(var(--header-padding-top-movil, 1rem) * var(--header-encoger-escala, 1));
	padding-bottom: calc(var(--header-padding-bottom-movil, 1rem) * var(--header-encoger-escala, 1));
}
@media (min-width: 1025px) {
	.site-header--encogido .header-main {
		padding-top: calc(var(--header-padding-top-escritorio, 1rem) * var(--header-encoger-escala, 1));
		padding-bottom: calc(var(--header-padding-bottom-escritorio, 1rem) * var(--header-encoger-escala, 1));
	}
}

.logo {
	font-weight: 800;
	font-size: 1.4rem;
	color: var(--color-menu-texto);
	white-space: nowrap;
}
.logo__imagen { max-height: 40px; width: auto; }

.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(--buscador-radio-escritorio, 999px);
	overflow: hidden;
	background: var(--buscador-fondo, var(--color-fondo));
}
.search input {
	flex: 1;
	min-width: 0;
	border: none;
	padding: 0 1em;
	outline: none;
	background: none;
	font-size: var(--tam-buscador, 1rem);
	color: var(--buscador-texto, var(--color-texto));
}
.search input::placeholder { color: var(--buscador-placeholder, var(--color-texto-suave)); font-size: inherit; font-weight: inherit; }
.search button {
	background: none;
	border: none;
	padding: 0 1em;
	cursor: pointer;
	color: var(--buscador-icono, var(--color-texto-suave));
	display: flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
}

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

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

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

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

.main-nav { border-top: var(--main-nav-borde-grosor, 1px) solid var(--main-nav-borde-color, var(--color-borde)); background: var(--color-menu-fondo); }
/* El padding horizontal lo aporta .container; conservarlo al espaciar verticalmente el menú. */
.main-nav ul {
	display: flex;
	flex-wrap: wrap;
	row-gap: 0.4rem;
	gap: var(--main-nav-gap, 1.5rem);
	padding-top: var(--main-nav-padding-vertical, 0.75rem);
	padding-bottom: var(--main-nav-padding-vertical, 0.75rem);
}
.main-nav--alineacion-izquierda > ul { justify-content: flex-start; }
.main-nav--alineacion-centro > ul { justify-content: center; }
.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 .5rem;
	margin: -.6rem -.5rem;
	border-radius: 10px;
}
.main-nav > ul > li:hover > a,
.main-nav > ul > li:focus-within > a {
	background: var(--color-menu-hover-fondo, #edf4ff);
	color: var(--color-menu-hover-texto, var(--color-primario));
}
/* Bordes arriba/abajo del nav — opcionales desde /admin/diseno (default:
   arriba sí, abajo no, mismo look de siempre). */
.main-nav--sin-borde-arriba { border-top-color: transparent; }
.main-nav--borde-abajo { border-bottom: var(--main-nav-borde-grosor, 1px) solid var(--main-nav-borde-color, 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; }
.landing-html--footer { padding-top: clamp(1.5rem, 4vw, 3.5rem); padding-bottom: clamp(1.5rem, 4vw, 3.5rem); }
.site-footer.landing-html--global { padding: clamp(2.5rem, 5vw, 4rem) 0 0; }
.landing-footer-demo { display: grid; grid-template-columns: minmax(0, 1.6fr) repeat(3, minmax(0, 1fr)); gap: clamp(1.25rem, 3vw, 2.5rem); color: var(--color-footer-texto); }
.landing-footer-demo__intro { grid-column: 1 / -1; display: flex; align-items: end; justify-content: space-between; gap: 1.5rem; padding-bottom: clamp(1.4rem, 3vw, 2.2rem); border-bottom: 1px solid var(--color-borde); }
.landing-footer-demo__intro div { display: grid; gap: .35rem; }
.landing-footer-demo__intro div span { color: var(--color-footer-texto); font-size: .68rem; font-weight: 800; letter-spacing: .14em; }
.landing-footer-demo__intro strong { color: var(--color-texto); font-size: clamp(1.25rem, 2vw, 1.85rem); line-height: 1.2; letter-spacing: -.025em; }
.landing-footer-demo__intro > a { flex: 0 0 auto; padding-bottom: .2rem; border-bottom: 1px solid currentColor; color: var(--color-texto); font-size: .86rem; font-weight: 700; }
.landing-footer-demo--compact { grid-template-columns: minmax(0, 1.8fr) repeat(2, minmax(0, 1fr)); }
.landing-footer-demo__logo { display: inline-block; max-width: 190px; margin-bottom: .7rem; font-size: 1.3rem; font-weight: 700; }
.landing-footer-demo__logo img { width: 100%; height: auto; }
.landing-footer-demo h4 { margin: .2rem 0 .8rem; color: inherit; font-size: var(--footer-h3-tamano, .95rem); font-weight: var(--footer-h3-peso, 600); }
.landing-footer-demo p { max-width: 35ch; margin: 0 0 1rem; font-size: .92rem; line-height: 1.6; }
.landing-footer-demo ul { display: grid; gap: .45rem; font-size: var(--footer-li-tamano, .9rem); line-height: var(--footer-li-interlineado, 1.6); }
.landing-footer-demo a:hover { opacity: .7; }
.landing-footer-demo__marca > a:last-child { font-size: .9rem; font-weight: 700; text-decoration: underline; text-underline-offset: .2em; }
.landing-footer-demo .landing-social { margin-top: 1.1rem; }
.landing-social .footer-redes,
.landing-footer-demo .landing-social .footer-redes { display: flex; flex-wrap: wrap; align-items: center; gap: .6rem; list-style: none; margin: 0; padding: 0; }
.landing-footer-demo .landing-social .footer-redes a { text-decoration: none; }
.landing-footer-demo__bottom { grid-column: 1 / -1; margin-top: .6rem; padding: 1.15rem 0; border-top: 1px solid var(--color-borde); font-size: .8rem; }
@media (max-width: 960px) {
	.landing-footer-demo { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 680px) {
	.landing-footer-demo__intro { align-items: start; flex-direction: column; }
	.landing-footer-demo__marca, .landing-footer-demo__contacto { grid-column: 1 / -1; }
}
@media (max-width: 420px) {
	.landing-footer-demo { grid-template-columns: 1fr; }
	.landing-footer-demo__marca, .landing-footer-demo__contacto { grid-column: auto; }
}
.editorial-story { --story-tint: var(--historia-base-fondo, #e9f2f1); --story-accent: var(--historia-base-acento, #235d59); margin: 0; padding: clamp(1.5rem, 4vw, 3.4rem); border: 1px solid var(--color-borde); border-radius: 22px; background: linear-gradient(125deg, var(--story-tint), var(--color-fondo) 72%); }
.editorial-story--warm { --story-tint: var(--historia-calida-fondo, #f6eee6); --story-accent: var(--historia-calida-acento, #8a4e2d); }
.editorial-story--sage { --story-tint: var(--historia-salvia-fondo, #edf3eb); --story-accent: var(--historia-salvia-acento, #43654a); }
.editorial-story--sky { --story-tint: var(--historia-cielo-fondo, #eaf2f8); --story-accent: var(--historia-cielo-acento, #315f7a); }
.editorial-story--sand { --story-tint: var(--historia-arena-fondo, #f4f0e7); --story-accent: var(--historia-arena-acento, #72603a); }
.editorial-story__top { display: grid; grid-template-columns: minmax(0, 1.55fr) minmax(180px, .75fr); align-items: end; gap: clamp(1rem, 4vw, 3rem); }
.editorial-story__eyebrow { display: block; margin: 0 0 .85rem; color: var(--story-accent); font-size: .76rem; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; }
.editorial-story h2 { max-width: 18ch; margin: 0 0 .65rem; font-size: clamp(1.7rem, 3.2vw, 2.7rem); line-height: 1.12; letter-spacing: -.035em; }
.editorial-story__lead { max-width: 65ch; margin: 0; color: var(--color-texto-suave); font-size: 1.05rem; line-height: 1.65; }
.editorial-story__aside { margin: 0; padding: 1.2rem 1.35rem; border-left: 3px solid var(--story-accent); color: var(--color-texto); font-weight: 600; line-height: 1.55; }
.editorial-story__facts { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .75rem; margin-top: 2rem; padding: 0; list-style: none; }
.editorial-story__facts li { min-width: 0; padding: 1rem 1.1rem; border: 1px solid var(--color-borde); border-radius: 12px; background: var(--color-fondo); }
.editorial-story__facts strong { display: block; color: var(--story-accent); font-size: .9rem; }
.editorial-story__facts span { display: block; margin-top: .3rem; color: var(--color-texto-suave); font-size: .84rem; line-height: 1.45; }
.editorial-story__links { display: flex; flex-wrap: wrap; gap: .65rem; margin-top: 1.6rem; }
.editorial-story__links a { display: inline-flex; align-items: center; gap: .35rem; padding: .55rem .85rem; border: 1px solid var(--story-accent); border-radius: 999px; color: var(--story-accent); font-size: .84rem; font-weight: 700; }
.editorial-story__links a:hover { background: var(--story-accent); color: var(--color-boton-texto); }
.editorial-story--categoria { padding: clamp(1.4rem, 3vw, 2.4rem); }
.editorial-story--categoria h2 { font-size: clamp(1.55rem, 2.7vw, 2.25rem); }
.atributo-color { display: inline-block; width: .95rem; height: .95rem; margin-right: .45rem; vertical-align: -.1rem; border: 1px solid color-mix(in srgb, var(--color-muestra-borde) 15%, transparent); border-radius: 50%; }
@media (max-width: 680px) {
	.editorial-story__top { grid-template-columns: 1fr; }
	.editorial-story__aside { padding: .3rem 0 .3rem 1rem; }
	.editorial-story__facts { grid-template-columns: 1fr; margin-top: 1.35rem; }
}

/* Portada editorial de landing-html: estructura CSS, sin carruseles ni controles JS. */
.landing-html--home { padding: 0; }
.landing-home { color: var(--editorial-texto, #172337); background: var(--color-fondo, #fff); }
.landing-home__hero-wrap { padding-top: clamp(16px, 2vw, 28px); }
.landing-home__hero { display: grid; grid-template-columns: 1fr 0.94fr; min-height: 530px; background: var(--editorial-hero-fondo, #edf2f4); overflow: hidden; border-radius: 16px; }
.landing-home__hero-copy { display: flex; flex-direction: column; align-items: flex-start; justify-content: center; padding: clamp(34px, 6vw, 82px); }
.landing-home__eyebrow { display: block; margin-bottom: 18px; color: var(--editorial-etiqueta, #536b79); font-size: .78rem; font-weight: 800; letter-spacing: .16em; text-transform: uppercase; }
.landing-home__hero h1 { max-width: 620px; margin: 0 0 25px; font-size: clamp(2.7rem, 4.4vw, 5rem); line-height: 1.04; letter-spacing: -.055em; color: var(--editorial-titulo, #142838); }
.landing-home__hero p { max-width: 490px; margin: 0; color: var(--editorial-texto-suave, #526473); font-size: clamp(1rem, 1.3vw, 1.17rem); line-height: 1.65; }
.landing-home__hero-actions { display: flex; align-items: center; flex-wrap: wrap; gap: 26px; margin-top: 34px; }
.landing-home__button { display: inline-flex; justify-content: space-between; align-items: center; gap: 30px; min-height: 50px; padding: 12px 20px; color: var(--editorial-boton-texto, #fff); background: var(--editorial-boton-fondo, #123449); border-radius: var(--boton-radio, 7px); font-weight: 700; text-decoration: none; transition: background .18s ease, transform var(--boton-animacion-duracion, 220ms) ease, filter var(--boton-animacion-duracion, 220ms) ease; }
.landing-home__button:hover { background: var(--editorial-boton-hover, #205671); color: var(--editorial-boton-texto, #fff); transform: var(--boton-hover-transform, none); filter: var(--boton-hover-filter, none); }
.landing-home__text-link { color: var(--editorial-enlace, #17394b); font-weight: 700; text-decoration: none; border-bottom: 1px solid var(--editorial-acento, #829da8); padding: 5px 0; }
.landing-home__hero-note { margin-top: 50px; font-size: .8rem; color: var(--editorial-texto-suave, #5b7180); }
.landing-home__hero-visual { position: relative; display: block; min-height: 530px; overflow: hidden; background: var(--editorial-imagen-fondo, #e5e2dc); }
.landing-home__hero-visual picture, .landing-home__hero-visual img { display: block; width: 100%; height: 100%; }
.landing-home__hero-visual img { object-fit: cover; }
.landing-home__hero-caption { position: absolute; right: 24px; bottom: 24px; display: flex; flex-direction: column; gap: 2px; padding: 15px 20px; min-width: 205px; color: var(--editorial-texto, #213044); background: color-mix(in srgb, var(--color-flotante) 90%, transparent); backdrop-filter: blur(8px); border-radius: 6px; }
.landing-home__hero-caption small { color: var(--editorial-texto-suave, #63707b); }
.landing-home__assurance { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; padding-top: 26px; padding-bottom: 26px; border-bottom: 1px solid var(--color-borde, #e4e9ec); }
.landing-home__assurance span { display: flex; align-items: center; gap: 12px; font-size: .86rem; font-weight: 700; }
.landing-home__assurance strong { color: var(--editorial-acento, #8da7b4); font-size: .75rem; letter-spacing: .08em; }
.landing-home__section { padding-top: clamp(58px, 7vw, 104px); padding-bottom: clamp(60px, 7vw, 108px); }
.landing-home__section-heading { display: flex; justify-content: space-between; align-items: end; gap: 34px; margin-bottom: 34px; }
.landing-home__section-heading .landing-home__eyebrow { margin-bottom: 12px; }
.landing-home__section-heading h2, .landing-home__closing h2 { margin: 0; font-size: clamp(2rem, 3vw, 3.1rem); line-height: 1.12; letter-spacing: -.045em; color: var(--editorial-titulo, #152b3a); }
.landing-home__section-heading p { max-width: 330px; margin: 0; color: var(--editorial-texto-suave, #637480); line-height: 1.55; }
.landing-home__categorias { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 18px; }
.landing-home__categorias .categoria-card { min-width: 0; }
.landing-home__section--productos { background: var(--editorial-seccion-fondo, #f5f7f7); }
.landing-home__productos { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 24px; }
.landing-home__productos .producto-card { min-width: 0; }
.landing-home__spotlight-wrap { margin-top: clamp(54px, 7vw, 100px); margin-bottom: clamp(54px, 7vw, 100px); }
.landing-home__spotlight { display: grid; grid-template-columns: minmax(0, .95fr) minmax(0, 1.05fr); align-items: stretch; overflow: hidden; border-radius: 16px; background: var(--editorial-hero-fondo, #edf2f4); }
.landing-home__spotlight-visual { display: block; min-height: 390px; overflow: hidden; background: var(--editorial-imagen-fondo, #e5e2dc); }
.landing-home__spotlight-visual picture, .landing-home__spotlight-visual img { display: block; width: 100%; height: 100%; }
.landing-home__spotlight-visual img { object-fit: cover; }
.landing-home__spotlight-copy { display: flex; flex-direction: column; align-items: flex-start; justify-content: center; padding: clamp(34px, 5vw, 74px); }
.landing-home__spotlight-copy h2 { max-width: 15ch; margin: 0 0 .7em; color: var(--editorial-titulo, #152b3a); font-size: clamp(2rem, 3.4vw, 3.5rem); line-height: 1.12; letter-spacing: -.045em; }
.landing-home__spotlight-copy p { max-width: 48ch; margin: 0 0 1.6rem; color: var(--editorial-texto-suave, #637480); font-size: 1.03rem; line-height: 1.65; }
.landing-home__guide { padding-top: clamp(56px, 7vw, 94px); padding-bottom: clamp(58px, 7vw, 98px); background: var(--editorial-seccion-fondo, #f5f7f7); }
.landing-home__guide-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; }
.landing-home__guide-grid article { display: flex; flex-direction: column; min-height: 230px; padding: clamp(23px, 3vw, 35px); border: 1px solid var(--color-borde); border-radius: 12px; background: var(--color-fondo); }
.landing-home__guide-grid article > span { margin-bottom: 1.3rem; color: var(--editorial-acento, #8da7b4); font-size: .76rem; font-weight: 800; letter-spacing: .1em; }
.landing-home__guide-grid h3 { margin: 0 0 .55rem; color: var(--editorial-titulo, #152b3a); font-size: clamp(1.15rem, 1.7vw, 1.45rem); }
.landing-home__guide-grid p { margin: 0 0 1.1rem; color: var(--editorial-texto-suave, #637480); line-height: 1.6; }
.landing-home__guide-grid a { margin-top: auto; color: var(--editorial-enlace, #17394b); font-size: .88rem; font-weight: 700; text-decoration: underline; text-underline-offset: .25em; }
.landing-home__closing { display: flex; justify-content: space-between; align-items: center; gap: 30px; margin-top: 64px; margin-bottom: 64px; padding: clamp(36px, 5vw, 68px); border-radius: 14px; background: var(--editorial-cierre-fondo, #15394c); }
.landing-home__closing .landing-home__eyebrow { color: var(--editorial-cierre-texto, #a9c6d2); }
.landing-home__closing h2 { max-width: 540px; color: var(--editorial-cierre-texto, #fff); }
.landing-home__button--light { flex: 0 0 auto; color: var(--editorial-cierre-fondo, #15394c); background: var(--color-fondo, #fff); }
@media (prefers-reduced-motion: reduce) { .landing-home__button, .landing-home__button:hover { transition-duration: 0ms; transform: none; filter: none; } }
.landing-home__button--light:hover { color: var(--editorial-cierre-fondo, #15394c); background: var(--color-fondo-suave, #e4eff3); }
@media (max-width: 900px) {
  .landing-home__hero { grid-template-columns: 1fr; }
  .landing-home__hero-copy { padding: 42px 30px; }
  .landing-home__hero-visual { min-height: 360px; max-height: 480px; }
  .landing-home__assurance { grid-template-columns: 1fr; gap: 13px; }
  .landing-home__categorias { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .landing-home__productos { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
  .landing-home__section-heading { display: block; }
  .landing-home__section-heading p { margin-top: 16px; }
  .landing-home__spotlight { grid-template-columns: 1fr; }
  .landing-home__spotlight-visual { min-height: 300px; max-height: 420px; }
  .landing-home__guide-grid { grid-template-columns: 1fr; }
  .landing-home__guide-grid article { min-height: 0; }
  .landing-home__closing { display: block; }
  .landing-home__closing .landing-home__button { margin-top: 30px; }
}
@media (max-width: 440px) {
  .landing-home__hero-wrap { padding-inline: 12px; }
  .landing-home__hero h1 { font-size: 2.45rem; }
  .landing-home__hero-visual { min-height: 310px; }
  .landing-home__hero-note { margin-top: 32px; }
  .landing-home__categorias { gap: 10px; }
}
.resenas { margin: 3rem 0; padding-top: 2.25rem; border-top: 1px solid var(--color-borde); scroll-margin-top: 7.5rem; }
.resenas__cabecera { margin-bottom: 2rem; }
.resenas__cabecera h2 { margin: 0; font-size: clamp(1.65rem, 2.6vw, 2.2rem); }
.resenas__grid { display: grid; grid-template-columns: minmax(220px, 280px) minmax(0, 1fr); gap: clamp(2rem, 4vw, 4rem); align-items: start; }
.resenas__estadisticas, .resenas__contenido { min-width: 0; }
.resenas__balance { display: flex; align-items: center; gap: .85rem; margin-bottom: 1rem; }
.resenas__promedio { color: var(--color-texto); font-size: clamp(3.1rem, 5vw, 4rem); font-weight: 700; letter-spacing: -.055em; line-height: 1; }
.resenas__balance-detalle { display: grid; gap: .15rem; color: var(--color-texto-suave); font-size: .83rem; line-height: 1.3; }
.resenas__balance-detalle .resenas-estrellas { font-size: 18px; }
.resenas__distribucion { display: grid; gap: .4rem; }
.resenas__fila { display: grid; grid-template-columns: 1rem 1rem minmax(0, 1fr) 1.35rem; align-items: center; gap: .35rem; color: var(--color-texto); font-size: .85rem; line-height: 1.1; }
.resenas__fila-numero { font-weight: 700; }
.resenas__fila-estrella { color: var(--color-valoracion, #0b69f6); font-size: 1rem; }
.resenas__fila-total { color: var(--color-texto-suave); text-align: right; }
.resenas__barra { height: .45rem; overflow: hidden; border-radius: 999px; background: var(--color-borde); }
.resenas__barra > span { display: block; height: 100%; border-radius: inherit; background: var(--color-texto); }
.resenas__sin-resumen { margin: .2rem 0 .7rem; color: var(--color-texto-suave); }
.resenas-estrellas { display: inline-block; position: relative; flex: none; color: var(--color-valoracion-vacia, #e4ebf3); font: 20px/1 Arial, sans-serif; letter-spacing: .025em; white-space: nowrap; vertical-align: middle; }
.resenas-estrellas__base { display: block; }
.resenas-estrellas__relleno { position: absolute; inset: 0 auto auto 0; overflow: hidden; color: var(--color-valoracion, #0b69f6); white-space: nowrap; }
.resenas-card { display: flex; align-items: center; gap: .4rem; margin: .2rem .75rem .45rem; min-height: 20px; color: var(--color-texto-suave); }
.producto-card__precio + .resenas-card { margin-top: -.5rem; }
.resenas-card .resenas-estrellas { font-size: 16px; }
.resenas-card small { font-size: .76rem; }
.resenas-ficha { display: inline-flex; align-items: center; gap: .65rem; margin: 0 0 1rem; color: var(--color-texto-suave); font-size: .9rem; text-decoration: none; }
.resenas-ficha:hover { color: var(--color-primario); }
.resenas-ficha:focus-visible { outline: 2px solid var(--campo-foco-color, var(--color-primario)); outline-offset: 3px; }
.resenas__toolbar { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: .85rem; margin-bottom: 1.5rem; }
.resenas__orden { position: relative; order: 1; }
.resenas__orden summary { display: inline-flex; align-items: center; justify-content: space-between; gap: .8rem; min-height: var(--campo-altura, 40px); padding: .55rem .85rem; border: var(--campo-borde-px, 1px) solid var(--campo-borde, #dddddd); border-radius: var(--campo-radio, 8px); background: var(--campo-fondo, var(--color-fondo)); color: var(--color-texto); cursor: pointer; list-style: none; }
.resenas__orden summary::-webkit-details-marker, .resenas__formulario summary::-webkit-details-marker { display: none; }
.resenas__flecha { width: .45rem; height: .45rem; border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor; transform: rotate(45deg) translateY(-2px); }
.resenas__orden[open] .resenas__flecha { transform: rotate(225deg) translateY(-2px); }
.resenas__orden-opciones { position: absolute; z-index: 5; top: calc(100% + .35rem); left: 0; min-width: 100%; width: max-content; max-width: min(85vw, 240px); padding: .35rem; border: var(--campo-borde-px, 1px) solid var(--campo-borde, #dddddd); border-radius: calc(var(--campo-radio, 8px) + 3px); background: var(--campo-fondo, var(--color-fondo)); box-shadow: 0 14px 32px color-mix(in srgb, var(--color-texto) 16%, transparent); }
.resenas__orden-opciones a { display: flex; align-items: center; justify-content: space-between; gap: .6rem; min-height: 2.25rem; padding: .42rem .7rem; border-radius: max(4px, calc(var(--campo-radio, 8px) - 3px)); color: var(--color-texto); text-decoration: none; white-space: nowrap; font-size: .9rem; }
.resenas__orden-opciones a[aria-current="true"]::after { content: '✓'; color: var(--color-primario); }
.resenas__orden summary:focus-visible, .resenas__formulario summary:focus-visible { outline: none; border-color: var(--campo-foco-borde, var(--color-primario)); box-shadow: 0 0 0 var(--campo-foco-grosor, 2px) var(--campo-foco-anillo); }
.resenas__orden-opciones a:focus-visible { outline: 2px solid var(--campo-foco-borde, var(--color-primario)); outline-offset: 2px; }
.resenas__formulario { order: 2; margin-left: auto; }
.resenas__formulario[open] { flex-basis: 100%; }
.resenas__formulario summary.resenas__abrir { display: flex; align-items: center; justify-content: center; width: fit-content; min-height: var(--boton-altura, 40px); margin-left: auto; padding: .55rem 1rem; border-radius: var(--boton-radio, var(--radio)); background: var(--resenas-boton-fondo, var(--color-texto)); color: var(--resenas-boton-texto, var(--color-fondo)); font-weight: 700; cursor: pointer; list-style: none; }
.resenas__formulario summary.resenas__abrir:hover { background: var(--color-primario); color: var(--resenas-boton-texto, var(--color-fondo)); }
.resenas__formulario form { display: grid; gap: 1rem; padding: 1.25rem; margin-top: 1rem; border: 1px solid var(--color-borde); border-radius: var(--radio); background: var(--resenas-tarjeta-fondo, var(--color-fondo)); color: var(--resenas-tarjeta-texto, var(--color-texto)); }
.resenas__formulario label { display: grid; gap: .35rem; font-weight: 600; }
.resenas__formulario input, .resenas__formulario select, .resenas__formulario textarea { width: 100%; padding: .7rem; border: var(--campo-borde-px, 1px) solid var(--campo-borde, #dddddd); border-radius: var(--campo-radio, 8px); background-color: var(--campo-fondo, var(--color-fondo)); color: var(--color-texto); }
.resenas__formulario form > p { margin: 0; color: var(--color-texto-suave); font-size: .85rem; }
.resenas__formulario form > button { justify-self: start; }
.resenas__campos { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; }
.resenas__lista { display: grid; gap: 1rem; }
.resenas__opinion { padding: 1.35rem 1.45rem; border: 1px solid var(--color-borde); border-radius: var(--radio); background: var(--resenas-tarjeta-fondo, var(--color-fondo)); color: var(--resenas-tarjeta-texto, var(--color-texto)); }
.resenas__opinion-cabecera { display: flex; align-items: flex-start; justify-content: space-between; gap: 1rem; }
.resenas__opinion-cabecera strong { display: block; color: var(--resenas-tarjeta-texto, var(--color-texto)); font-size: .95rem; }
.resenas__opinion-cabecera time { display: block; margin-top: .2rem; color: var(--color-texto-suave); font-size: .8rem; }
.resenas__opinion-cabecera .resenas-estrellas { font-size: 18px; }
.resenas__opinion h3 { margin: .85rem 0 .25rem; font-size: .98rem; }
.resenas__opinion p { margin: .7rem 0 0; line-height: 1.55; overflow-wrap: anywhere; }
.resenas__nota-demo { margin: 0 0 1rem; color: var(--color-texto-suave); font-size: .82rem; }
.resenas__demo { display: inline-block; margin-top: .85rem; padding: .18rem .5rem; border: 1px solid var(--color-borde); border-radius: 999px; color: var(--color-texto-suave); font-size: .72rem; font-weight: 700; }
.resenas__vacio { margin: 0; color: var(--color-texto-suave); }
.resenas__mensaje { margin: 0 0 1.5rem; padding: 1rem; border-radius: var(--radio); background: var(--color-fondo-suave); }
.resenas__trampa { position: absolute; left: -9999px; }
@media (max-width: 800px) { .resenas__grid { grid-template-columns: 1fr; gap: 1.75rem; } .resenas__estadisticas { max-width: 380px; } }
@media (max-width: 600px) { .resenas__cabecera { margin-bottom: 1.5rem; } .resenas__campos { grid-template-columns: 1fr; } .resenas__opinion { padding: 1rem; } }
@media (max-width: 420px) { .resenas__toolbar { display: grid; grid-template-columns: 1fr; } .resenas__orden, .resenas__formulario { width: 100%; margin-left: 0; } .resenas__orden summary, .resenas__formulario summary.resenas__abrir { width: 100%; margin-left: 0; } .resenas__orden-opciones { position: static; width: 100%; max-width: none; margin-top: .35rem; box-shadow: none; } }

/* 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: 2rem;
}
.main-nav .main-nav__submenu .main-nav__item--con-hijos > a::after {
	position: absolute;
	top: 50%;
	right: 1rem;
	margin: 0;
	transform: translateY(-50%) rotate(-45deg);
}
/* 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;
	top: 100%;
	left: 0;
	min-width: 200px;
	background: var(--main-nav-nivel2-fondo, var(--color-menu-fondo));
	border: 0;
	border-radius: var(--radio);
	box-shadow: none;
	padding: 0.4rem 0;
	margin: 0;
	gap: 0;
	z-index: 30;
	opacity: 0;
	visibility: hidden;
	pointer-events: none;
	transition: opacity var(--submenu-anim-duracion, 160ms) ease, transform var(--submenu-anim-duracion, 160ms) ease, visibility var(--submenu-anim-duracion, 160ms);
}
.main-nav.main-nav--submenu-con-borde .main-nav__submenu { border: 1px solid var(--color-borde); }
.main-nav.main-nav--submenu-con-sombra .main-nav__submenu { box-shadow: var(--sombra); }
.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;
}
/* La clase del nav elige el transform inicial; ThemeCss define duración y easing. */
.main-nav--submenu-anim-ninguna .main-nav__submenu { transition: none; }
.main-nav--submenu-anim-deslizar .main-nav__submenu { transform: translateY(-8px); }
.main-nav--submenu-anim-deslizar .main-nav__item--con-hijos:hover > .main-nav__submenu,
.main-nav--submenu-anim-deslizar .main-nav__item--con-hijos:focus-within > .main-nav__submenu { transform: translateY(0); }
.main-nav--submenu-anim-escalar .main-nav__submenu { transform: scale(0.94); transform-origin: top left; }
.main-nav--submenu-anim-escalar .main-nav__item--con-hijos:hover > .main-nav__submenu,
.main-nav--submenu-anim-escalar .main-nav__item--con-hijos:focus-within > .main-nav__submenu { transform: scale(1); }
/* 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; }
}
.main-nav__submenu li { width: 100%; }
.main-nav__submenu a {
	display: block;
	padding: 0.55em 1rem;
	white-space: nowrap;
}
/* 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));
	border-radius: 8px;
}
/* Los submenús anidados abren lateralmente con el mismo estado del padre. */
.main-nav .main-nav__submenu .main-nav__submenu {
	top: -0.4rem;
	left: 100%;
	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)));
}

/* Marcador activo del nav: la clase elige el tipo y ThemeCss define color/grosor. Ninguno no añade reglas. */
.main-nav.main-nav--marcador-subrayado a.activo {
	box-shadow: inset 0 calc(-1 * var(--menu-marcador-grosor, 2px)) 0 var(--menu-marcador-color, var(--color-primario));
}
.main-nav.main-nav--marcador-fondo a.activo {
	background: var(--menu-marcador-color, var(--color-primario));
	color: var(--color-boton-texto);
	border-radius: 999px;
}
/* El margen negativo compensa el padding de la píldora para conservar el ancho del menú. */
.main-nav.main-nav--marcador-fondo > ul > li > a.activo {
	padding: 0.4em 0.9em 0.55em 1em;
	margin: -0.4em -0.9em -0.55em -1em;
}
.main-nav.main-nav--marcador-texto a.activo {
	color: var(--menu-marcador-color, var(--color-primario));

}
.main-nav.main-nav--marcador-borde-izquierdo a.activo {
	box-shadow: inset var(--menu-marcador-grosor, 3px) 0 0 var(--menu-marcador-color, var(--color-primario));
}

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

/* Widget WhatsApp: aparece con el toggle activo y un número configurado; color desde ThemeCss. */
.whatsapp-widget {
	position: fixed;
	right: 1.25rem;
	bottom: 1.25rem;
	z-index: 90;
	width: 3.4rem;
	height: 3.4rem;
	display: flex;
	align-items: center;
	justify-content: center;
	border-radius: 50%;
	background: var(--color-whatsapp, #25d366);
	color: var(--color-redes-texto, #ffffff);
	box-shadow: 0 4px 14px color-mix(in srgb, var(--color-sombra-fuerte) 25%, transparent);
	transition: transform var(--transicion);
}
.whatsapp-widget:hover { transform: scale(1.08); }
/* Halo detrás del botón; conserva su color de marca y se anula con reduced-motion. */
.whatsapp-widget::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -1;
	border-radius: 50%;
	background: var(--color-whatsapp, #25d366);
	animation: whatsapp-pulso 2s ease-out infinite;
}
@keyframes whatsapp-pulso {
	0% { opacity: 0.5; transform: scale(1); }
	100% { opacity: 0; transform: scale(2); }
}
@media (prefers-reduced-motion: reduce) {
	.whatsapp-widget::before { animation: none; }
}
@media (max-width: 640px) {
	.whatsapp-widget { right: 1rem; bottom: 1rem; width: 3.1rem; height: 3.1rem; }
}

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

/* Confianza en el carrito: la especificidad supera los estilos genéricos de listas e iconos. */
.confianza-lista { display: grid; gap: 1rem; list-style: none; margin: 0; padding: 0; }
.confianza-lista .confianza-item { display: flex; justify-content: flex-start; align-items: flex-start; gap: 0.75rem; }
.confianza-item__icono { display: inline-flex; flex-shrink: 0; color: var(--color-primario); margin-top: 0.1rem; }
.confianza-item__texto { flex: 1 1 auto; min-width: 0; }
.confianza-item__texto strong { display: block; font-size: 0.9rem; }
.confianza-item__texto p { margin: 0.1rem 0 0; color: var(--color-texto-suave); font-size: 0.82rem; }

/* ==========================================================================
   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;
}

/* 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; }

/* 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.68rem;
	font-weight: 700;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	color: var(--color-texto);
	opacity: 0.55;
}
.categoria-card__etiqueta + .categoria-card__nombre { padding-top: 0.2rem; }

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

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

/* ==========================================================================
   Breadcrumbs
   ========================================================================== */
.breadcrumbs {
	position: relative;
	isolation: isolate;
	margin: 0 0 1.5rem;
	padding: var(--breadcrumb-padding-vertical, 12px) 0;
	font-size: var(--breadcrumb-tamano, 14px);
	line-height: 1.5;
}
/* El nav sigue dentro de .container, alineado con el cuerpo. Solo su
   fondo se extiende hasta los bordes de la ventana, como en Awake. */
.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(3rem, 6vw, 5rem); }
.categoria-resultados { transition: opacity .15s ease; }
.categoria-resultados[aria-busy="true"] { opacity: .55; pointer-events: none; }
.categoria-orden-estado { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }
@media (prefers-reduced-motion: reduce) { .categoria-resultados { transition: none; } }
.categoria-descripcion { color: var(--color-texto-suave); max-width: 70ch; }
.categoria-descripcion--abajo { margin-top: 2.5rem; padding-top: 1.5rem; border-top: 1px solid var(--color-borde); }

.categoria-toolbar {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: flex-end;
	gap: 0.75rem;
	margin: 1rem 0 1.5rem;
}
.categoria-toolbar__grupo { display: flex; align-items: center; gap: 0.5rem; font-size: .875rem; }
.categoria-toolbar__grupo select { height: var(--campo-altura, 40px); font-size: .875rem; font-weight: 600; }
@media (max-width: 380px) {
	.categoria-toolbar { display: grid; grid-template-columns: minmax(0, 1fr); }
	.categoria-toolbar__grupo, .categoria-toolbar .filtros-panel { min-width: 0; }
	.categoria-toolbar__grupo select, .categoria-toolbar .filtros-panel__toggle { width: 100%; }
}

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

.producto-descripcion-larga { width: 100%; margin-top: 3rem; }
.producto-descripcion-larga__cuerpo { color: var(--producto-descripcion-color, var(--color-texto-suave)); }
.producto-descripcion :where(p, ul, ol, blockquote, h2, h3, h4, h5, h6),
.producto-descripcion-larga__cuerpo :where(p, ul, ol, blockquote, h2, h3, h4, h5, h6) { margin: 0 0 1em; }
.producto-descripcion :where(ul, ol),
.producto-descripcion-larga__cuerpo :where(ul, ol) { padding-left: 1.5em; list-style: revert; }
.producto-descripcion :where(a),
.producto-descripcion-larga__cuerpo :where(a) { color: var(--color-primario); text-decoration: underline; }
.producto-descripcion :where(img),
.producto-descripcion-larga__cuerpo :where(img) { display: block; max-width: 100%; height: auto; }
.producto-descripcion :where(table),
.producto-descripcion-larga__cuerpo :where(table) { width: 100%; border-collapse: collapse; }
.producto-descripcion :where(th, td),
.producto-descripcion-larga__cuerpo :where(th, td) { padding: .6em; border: 1px solid var(--color-borde); text-align: left; }
.producto-tabs { margin-top: 2.5rem; }
.producto-tabs h2 { margin-bottom: 1rem; }
.producto-tabs__items { border-top: 1px solid var(--color-borde); }
.producto-tabs__item { border-bottom: 1px solid var(--color-borde); }
.producto-tabs__item summary { position: relative; padding: 1rem 2rem 1rem 0; cursor: pointer; color: var(--producto-pestana-titulo-color, var(--color-texto)); font-weight: 700; list-style: none; }
.producto-tabs__item summary::-webkit-details-marker { display: none; }
.producto-tabs__item summary::after { content: '+'; position: absolute; right: .25rem; top: .75rem; color: var(--color-primario); font-size: 1.4rem; font-weight: 400; }
.producto-tabs__item[open] summary::after { content: '−'; }
.producto-tabs__item summary:focus-visible { outline: 2px solid var(--color-primario); outline-offset: 3px; }
.producto-tabs__contenido { max-width: 75ch; padding: 0 0 1rem; color: var(--producto-pestana-texto-color, var(--color-texto-suave)); line-height: 1.7; }
.producto-tabs__contenido > :first-child { margin-top: 0; }

/* ==========================================================================
   Selector de cantidad (+/-) — ficha de producto y mini "agregar al
   carrito" de las tarjetas de categoría/marca (misma clase, tamaño --mini)
   ========================================================================== */
.selector-cantidad {
	display: inline-flex;
	align-items: stretch;
	/* Fondo y borde editables del selector de cantidad; el borde conserva la altura con el botón de compra. */
	border: 1px solid var(--selector-cantidad-borde, #dddddd);
	border-radius: var(--campo-radio, var(--radio));
	overflow: hidden;
	background: var(--selector-cantidad-fondo, var(--color-fondo));
	transition: border-color var(--transicion), box-shadow var(--transicion);
}
/* Un solo anillo de foco en el contenedor del selector de cantidad. */
.selector-cantidad:focus-within {
	border-color: var(--campo-foco-borde, var(--color-primario));
	box-shadow: 0 0 0 var(--campo-foco-grosor, 2px) var(--campo-foco-anillo);
}
.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. */
.selector-cantidad--mini { max-width: 100px; }
.selector-cantidad--mini .selector-cantidad__btn { width: 2rem; font-size: 1rem; }
.selector-cantidad--mini input[name="cantidad"] { width: 1.9rem; height: 2rem; font-size: 0.85rem; font-weight: 600; }

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

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

.ficha-tecnica { margin-top: 3rem; }
.ficha-tecnica table { width: 100%; border-collapse: collapse; max-width: 640px; }
.ficha-tecnica th, .ficha-tecnica td {
	text-align: left;
	padding: 0.6em 0.8em;
	border-bottom: 1px solid var(--color-borde);
}
.ficha-tecnica th { color: var(--color-texto-suave); font-weight: 600; width: 40%; }

/* Slider reutilizable: scroll horizontal nativo y scroll-snap. */
.producto-slider-seccion { margin-top: 3rem; }
.producto-slider { position: relative; }
.producto-slider__pista {
	display: flex;
	gap: 1.25rem;
	overflow-x: auto;
	scroll-snap-type: x mandatory;
	scrollbar-width: none;
}
.producto-slider__pista::-webkit-scrollbar { display: none; }
/* Misma cantidad de tarjetas por "página" que la grilla de productos
   normal (--grid-cols-*, ThemeCss) — el theme define una sola vez cuántas
   columnas van en cada tamaño de pantalla y el slider las respeta. */
.producto-slider__pista .producto-card {
	scroll-snap-align: start;
	flex: 0 0 calc((100% - (var(--grid-cols-movil, 2) - 1) * 1.25rem) / var(--grid-cols-movil, 2));
	min-width: 150px;
}
@media (min-width: 768px) and (max-width: 1024px) {
	.producto-slider__pista .producto-card {
		flex-basis: calc((100% - (var(--grid-cols-tablet, 3) - 1) * 1.25rem) / var(--grid-cols-tablet, 3));
	}
}
@media (min-width: 1025px) {
	.producto-slider__pista .producto-card {
		flex-basis: calc((100% - (var(--grid-cols-escritorio, 4) - 1) * 1.25rem) / var(--grid-cols-escritorio, 4));
	}
}
@media (max-width: 360px) {
    .producto-slider__pista .producto-card { flex-basis: 100%; }
}
/* Flechas de slider y galería: radio y tamaño configurables desde ThemeCss. */
.flecha-slider {
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	width: var(--flecha-tamano, 2.4rem);
	height: var(--flecha-tamano, 2.4rem);
	border-radius: var(--flecha-radio, 50%);
	background: var(--color-fondo);
	border: 1px solid var(--color-borde);
	box-shadow: var(--sombra);
	cursor: pointer;
	display: flex;
	align-items: center;
	justify-content: center;
	color: var(--color-texto);
	z-index: 2;
	transition: background var(--transicion), transform var(--transicion);
}
.flecha-slider:hover { background: var(--color-fondo-suave); }
.flecha-slider--prev { left: -0.75rem; }
.flecha-slider--next { right: -0.75rem; }
/* Animación al hacer click (app.js agrega/saca la clase) — un "pulso"
   simple, nada elaborado. */
.flecha-slider--pulso { animation: flecha-pulso 280ms ease; }
@keyframes flecha-pulso {
	0% { transform: translateY(-50%) scale(1); }
	40% { transform: translateY(-50%) scale(0.82); }
	100% { transform: translateY(-50%) scale(1); }
}
@media (max-width: 640px) {
	.flecha-slider { width: calc(var(--flecha-tamano, 2.4rem) * 0.8); height: calc(var(--flecha-tamano, 2.4rem) * 0.8); }
}
/* producto-slider.php oculta flechas si todos los elementos caben en el breakpoint. */
@media (max-width: 767px) {
	.producto-slider--sin-flechas-movil .flecha-slider { display: none; }
}
@media (min-width: 768px) and (max-width: 1024px) {
	.producto-slider--sin-flechas-tablet .flecha-slider { display: none; }
}
@media (min-width: 1025px) {
	.producto-slider--sin-flechas-escritorio .flecha-slider { display: none; }
}

/* ==========================================================================
   Footer
   ========================================================================== */
.site-footer {
	/* Fondo de respaldo nada más (las 2 zonas de abajo ya traen el suyo
	   propio, esto no debería llegar a verse nunca — es solo para no
	   dejar un hueco raro si algún día se agrega una 3ra zona sin fondo). */
	background: var(--color-footer-fondo);
	color: var(--color-footer-texto);
	margin-top: 3rem;
}
/* Borde superior del footer — opcional desde /admin/diseno (apagado por
   defecto en la paleta azul/negro: un footer oscuro no necesita un borde
   claro arriba para separarse del resto). */
.site-footer--con-borde { border-top: var(--footer-borde-top-grosor, 1px) solid var(--footer-borde-top-color, var(--color-borde)); }
.footer-texto { color: var(--color-footer-texto); opacity: 0.9; font-size: var(--footer-texto-tamano, 1rem); }
/* Iconos de redes; el nombre queda en aria-label y title. */
/* El selector compuesto supera el display:grid de .footer-col ul. */
.footer-col .footer-redes { display: flex; flex-wrap: wrap; align-items: center; gap: 0.6rem; list-style: none; margin: 0.75rem 0 0; padding: 0; }
.footer-redes a { display: inline-flex; opacity: 0.9; transition: opacity var(--transicion); }
.footer-redes a:hover { opacity: 1; }
/* Perfiles sociales define --rs-color inline; ThemeCss controla tamaño, efecto y duración del hover. */
.footer-redes__icono {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
}
.footer-redes__icono--ninguno {
	width: var(--footer-redes-icono-tamano, 18px);
	height: var(--footer-redes-icono-tamano, 18px);
	color: var(--rs-color, currentColor);
}
.footer-redes__icono--redondeado,
.footer-redes__icono--cuadrado {
	width: calc(var(--footer-redes-icono-tamano, 18px) + var(--footer-redes-icono-padding, 10px) * 2);
	height: calc(var(--footer-redes-icono-tamano, 18px) + var(--footer-redes-icono-padding, 10px) * 2);
}
.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); }
/* Envoltura del footer con fondo/padding propios; .container limita sus columnas interiores. */
.footer-grid-wrap {
	background: var(--color-footer-fondo);
	padding-top: var(--footer-padding-top, 2.5rem);
	padding-bottom: var(--footer-padding-bottom, 2rem);
}
/* Columnas de fracción fija por breakpoint para evitar una última columna aislada. */
.footer-grid {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 2rem 1.5rem;
}
@media (max-width: 640px) {
	.footer-grid { grid-template-columns: 1fr; }
}
@media (min-width: 1025px) {
	/* La columna del logo usa un ancho propio para equilibrarse con las listas de enlaces. */
	.footer-grid { grid-template-columns: minmax(0, 1.6fr) repeat(3, minmax(0, 1fr)); gap: 2rem; }
}
.footer-col h4 {
	font-size: var(--footer-h3-tamano, 0.95rem);
	font-weight: var(--footer-h3-peso, 600);
	margin-bottom: 0.75rem;
	color: var(--color-footer-texto);
}
.footer-col ul {
	display: grid;
	gap: 0.4rem;
	color: var(--color-footer-texto);
	font-size: var(--footer-li-tamano, 0.9rem);
	font-weight: var(--footer-li-peso, 400);
	line-height: var(--footer-li-interlineado, 1.6);
}
.footer-col a:hover { opacity: 0.7; }
.logo--footer { display: inline-block; margin-bottom: 0.5rem; color: var(--color-footer-texto); }
/* Copyright full-bleed con fondo, padding y borde independientes de las columnas del footer. */
.footer-bottom-wrap {
	background: var(--color-footer-bottom-fondo, var(--color-footer-fondo));
	padding-top: var(--footer-bottom-padding-vertical, 1rem);
	padding-bottom: var(--footer-bottom-padding-vertical, 1rem);
}
.footer-bottom-wrap--con-borde {
	border-top: var(--footer-bottom-borde-grosor, 1px) solid var(--footer-bottom-borde-color, var(--color-borde));
}
.footer-bottom {
	font-size: 0.8rem;
	color: var(--color-footer-texto);
}

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

/* Mantención conserva el logo, paleta y tipografía de ThemeCss. */
.pagina-mantencion {
	text-align: center;
	padding: 5rem 1.5rem;
	max-width: 480px;
	margin: 0 auto;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 1rem;
}
.pagina-mantencion__logo { display: inline-block; }
.pagina-mantencion__logo img { max-height: 56px; width: auto; }
.pagina-mantencion__nombre { font-size: 1.3rem; font-weight: 700; color: var(--color-texto); }
.pagina-mantencion h2 { font-size: 1.4rem; margin: 0.5rem 0 0; }
.pagina-mantencion__mensaje { color: var(--color-texto-suave); margin: 0; }
.pagina-mantencion__contacto { margin: 0; }
.pagina-mantencion__contacto a { color: var(--color-primario); font-weight: 600; }
/* .footer-redes/.footer-redes__icono ya traen su propio estilo (ver más
   abajo en este archivo) — acá solo se repone el display:flex que en el
   footer normal depende de un ancestro .footer-col que esta página no
   tiene. */
.pagina-mantencion__redes .footer-redes { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 0.6rem; list-style: none; margin: 0.5rem 0 0; padding: 0; }

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

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

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

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

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

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

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

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

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

.recaptcha-v2 { max-width: 100%; overflow-x: auto; padding-block: .35rem; }
body[data-form-labels] :where(input:not([type]), input[type="text"], input[type="email"], input[type="tel"], input[type="password"], input[type="url"], input[type="date"], input[type="search"], input[type="number"]:not([name="cantidad"]), select, textarea):focus {
	outline: none;
	border-color: var(--campo-foco-borde, var(--color-primario));
	box-shadow: 0 0 0 var(--campo-foco-grosor, 2px) var(--campo-foco-anillo);
}
/* 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), 0 0 0 var(--campo-foco-grosor, 2px) var(--campo-foco-anillo); }

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

/* Side cart: panel de carrito y sugerencias; app.js gestiona apertura, cierre y respuesta AJAX. */
.side-cart-overlay {
	position: fixed;
	inset: 0;
	z-index: 110;
	background: transparent;
	display: flex;
	justify-content: flex-end;
	transition: background var(--transicion);
}
.side-cart-overlay.is-open { background: color-mix(in srgb, var(--color-velo) 55%, transparent); }
.side-cart {
	background: var(--color-fondo);
	box-shadow: -12px 0 32px color-mix(in srgb, var(--color-sombra) 8%, transparent);
	width: min(440px, 100vw);
	height: 100%;
	height: 100dvh;
	display: flex;
	flex-direction: column;
	transform: translateX(100%);
	transition: transform var(--transicion);
}
.side-cart-overlay.is-open .side-cart { transform: translateX(0); }
.side-cart__header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 1.35rem 1.5rem;
	border-bottom: 1px solid var(--color-borde);
	flex-shrink: 0;
}
.side-cart__titulo { font-weight: 700; font-size: 1.25rem; margin: .1rem 0 0; }
.side-cart__eyebrow { display: block; color: var(--color-texto-suave); font-size: .68rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; }
.side-cart__cerrar {
	background: var(--color-fondo);
	border: 1px solid var(--color-borde);
	border-radius: 50%;
	width: 2.4rem;
	height: 2.4rem;
	font-size: 1.5rem;
	line-height: 1;
	cursor: pointer;
	color: var(--color-texto-suave);
}
.side-cart__conteo { margin: 0; padding: 1rem 1.5rem 0; color: var(--color-texto-suave); font-size: .82rem; }
.side-cart__items { flex: 1; overflow-y: auto; padding: 0 1.5rem; }
.side-cart__item {
	display: grid;
	grid-template-columns: 80px minmax(0, 1fr) auto;
	align-items: start;
	gap: 1rem;
	padding: 1.1rem 0;
	border-bottom: 1px solid var(--color-borde);
}
.side-cart__item-imagen { display: block; background: var(--color-fondo-suave); border-radius: .75rem; overflow: hidden; }
.side-cart__item-imagen img { width: 80px; height: 88px; object-fit: contain; }
.side-cart__item-sin-imagen { width: 80px; height: 88px; background: var(--color-fondo-suave); display: block; }
.side-cart__item-info { min-width: 0; display: flex; flex-direction: column; align-items: flex-start; gap: .4rem; }
.side-cart__item-nombre { font-weight: 650; font-size: .88rem; line-height: 1.35; margin: 0; }
.side-cart__item-cantidad { display: flex; align-items: center; gap: .5rem; color: var(--color-texto-suave); font-size: .78rem; }
.side-cart__item-cantidad .selector-cantidad--mini { transform: scale(.85); transform-origin: left center; }
.side-cart__item-precio { font-size: .85rem; font-weight: 700; white-space: nowrap; margin: 0; text-align: right; }
.side-cart__quitar { background: none; border: none; cursor: pointer; color: var(--color-texto-suave); padding: 0; font: inherit; font-size: .78rem; text-decoration: underline; text-underline-offset: .15em; }
.side-cart__quitar:hover { color: var(--color-error, #b91c1c); }
.side-cart__vacio { color: var(--color-texto-suave); padding: 1.5rem 0; }
.side-cart__divider { border-top: 1px dashed var(--color-borde); margin: 0 1.5rem; }
.side-cart__sugeridos { padding: 1rem 1.5rem; flex-shrink: 0; }
.side-cart__sugeridos-cabecera {
	display: flex;
	align-items: center;
	justify-content: space-between;
	font-size: 0.78rem;
	font-weight: 700;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	color: var(--color-texto-suave);
	margin-bottom: 0.75rem;
}
.side-cart__sugeridos-nav { display: flex; gap: 0.4rem; }
.side-cart__sugeridos-flecha {
	background: none;
	border: 1px solid var(--color-borde);
	border-radius: 999px;
	width: 1.6rem;
	height: 1.6rem;
	line-height: 1;
	cursor: pointer;
	color: var(--color-texto);
}
.side-cart__sugeridos-track {
	display: flex;
	overflow-x: auto;
	scroll-snap-type: x mandatory;
	gap: 1rem;
	/* Sin scrollbar visible a propósito — el carrusel se navega con las
	   flechas de arriba (o gesto táctil), no hace falta la barra nativa. */
	scrollbar-width: none;
}
.side-cart__sugeridos-track::-webkit-scrollbar { display: none; }
.side-cart__sugerido {
	flex: 0 0 100%;
	scroll-snap-align: start;
	display: flex;
	align-items: center;
	gap: 0.85rem;
	color: inherit;
	text-decoration: none;
}
.side-cart__sugerido img { width: 64px; height: 64px; object-fit: contain; flex-shrink: 0; border-radius: .75rem; background: var(--color-fondo-suave); }
.side-cart__sugerido-info { display: flex; flex-direction: column; gap: 0.3rem; min-width: 0; }
.side-cart__sugerido-nombre { font-size: 0.88rem; font-weight: 500; }
.side-cart__sugerido-precio { font-weight: 700; color: var(--color-precio-oferta, var(--color-primario)); }
.side-cart__sugerido-precio-tachado { color: var(--color-texto-suave); text-decoration: line-through; font-size: 0.85rem; }
.side-cart__footer { padding: 1.1rem 1.5rem 1.5rem; border-top: 1px solid var(--color-borde); flex-shrink: 0; background: var(--color-fondo); }
.side-cart__subtotal { display: flex; justify-content: space-between; gap: 1rem; font-weight: 700; margin-bottom: 1rem; }
.side-cart__acciones { display: grid; gap: .6rem; }
.side-cart__acciones .btn { display: block; text-align: center; white-space: nowrap; }
.side-cart__acciones .btn:not(.btn-primary) { background: var(--color-fondo); border: 1px solid var(--color-texto); color: var(--color-texto); }

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

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

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

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

/* ==========================================================================
   Checkout
   ========================================================================== */
.checkout-header { border-bottom: 1px solid var(--color-borde); }
/* El interior reutiliza .container y el padding del header para conservar la alineación del logo. */
.checkout-header__interior {
	display: flex;
	align-items: center;
	padding-top: var(--header-padding-top-movil, 1rem);
	padding-bottom: var(--header-padding-bottom-movil, 1rem);
}
/* El espaciador iguala la altura del buscador de 38px sin ensanchar la fila del checkout. */
.checkout-header__espaciador { display: block; width: 0; height: 38px; overflow: hidden; flex-shrink: 0; }
@media (min-width: 1025px) {
	.checkout-header__interior { padding-top: var(--header-padding-top-escritorio, 1rem); padding-bottom: var(--header-padding-bottom-escritorio, 1rem); }
}
/* El panel derecho ocupa desde debajo del header hasta el borde inferior
   visible. El fondo se prolonga fuera del ancho máximo sin mover el
   contenido del resumen ni alterar las dos columnas. */
.checkout-root { overflow-x: clip; }
.checkout-page { display: flex; flex-direction: column; min-height: 100vh; min-height: 100dvh; overflow-x: clip; }
.checkout-main { display: flex; flex-direction: column; flex: 1; width: 100%; min-width: 0; padding: 2.25rem 1.25rem 4rem; }
/* Dos columnas continuas: datos/envío/pago a la izquierda y pedido a la
   derecha. Los controles externos usan form="checkout-confirmar" nativo. */
.checkout-grid { display: grid; flex: 1; width: 100%; min-width: 0; grid-template-columns: minmax(0, 1.45fr) minmax(320px, 1fr); gap: clamp(1.5rem, 3.5vw, 3.5rem); align-items: stretch; }
.checkout-form { min-width: 0; }
.checkout-form h1 { margin: 0 0 1.2rem; font-size: clamp(1.7rem, 2.6vw, 2.1rem); }
.checkout-aviso-ancho { grid-column: 1 / -1; }
.checkout-seccion { margin: 0 0 1.75rem; }
.checkout-seccion__titulo, .checkout-main .checkout-seccion legend, .checkout-main #clcf-fieldset legend { display: block; margin: 0 0 .8rem; padding: 0; font-size: .75rem; font-weight: 700; letter-spacing: .085em; line-height: 1.4; text-transform: uppercase; color: var(--color-texto-suave); }
.checkout-campo-fila { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .75rem; }
.checkout-campo-fila > .admin-campo,
.checkout-main .admin-campo-fila > .admin-campo { min-width: 0; }
.checkout-main .admin-campo-fila { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.checkout-main .admin-campo { margin-bottom: .7rem; }
.checkout-pendiente { margin: 0; padding: .95rem 1rem; border-radius: .45rem; background: var(--color-fondo-suave); color: var(--color-texto-suave); font-size: .88rem; }
.campo-requerido { color: var(--color-error, #b3261e); margin-left: 0.15em; }

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

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

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

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

/* Validador de RUT chileno en vivo (checkout, campos clcf_rut/clcf_rut_empresa
   — ver app.js) — solo feedback visual, el servidor sigue siendo quien
   valida de verdad. */
.campo-rut--invalido { border-color: var(--color-error, #b3261e) !important; }
.campo-rut--valido { border-color: var(--color-exito, #1f5c37) !important; }
.campo-rut-mensaje { display: block; font-size: 0.78rem; color: var(--color-error, #b3261e); margin-top: 0.25rem; min-height: 1em; }
/* app.js marca los campos requeridos cuando el formulario dispara invalid. */
.campo-invalido { border-color: var(--color-error, #b3261e) !important; }
.checkout-redireccion, .checkout-error { text-align: center; padding: 3rem 0; }

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

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

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

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

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

	.search {
		order: 4;
		flex-basis: 100%;
		max-width: none;
		margin: 0;
	}
	/* Buscador móvil compacto con botón circular. */
	.search__barra { height: 40px; border-radius: var(--buscador-radio-movil, 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: var(--topbar-tamano-movil, 0.72rem); }
}
@media (min-width: 1025px) {
	.menu-movil, .menu-movil[hidden] { display: none; }
}

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

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

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

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

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

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

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

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

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

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

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

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

/* Blog core: las superficies y colores siguen las variables del Theme editor. */
.blog-page,.blog-post-page { padding-bottom: clamp(3rem, 6vw, 6rem); }
.blog-page__header { padding: clamp(2rem, 5vw, 4rem) 0 2rem; max-width: 820px; }
.blog-eyebrow { color: var(--color-primario); font-size: .78rem; font-weight: 800; letter-spacing: .13em; text-transform: uppercase; margin: 0 0 .7rem; }
.blog-page__header h1,.blog-post__header h1 { margin: 0 0 .9rem; line-height: 1.12; }
.blog-page__intro,.blog-post__resumen { color: var(--color-texto-suave); line-height: 1.7; }
.blog-page__intro > :first-child { margin-top: 0; }
.blog-categorias { display: flex; flex-wrap: wrap; gap: .55rem; margin: 0 0 2rem; }
.blog-categorias a { border: 1px solid var(--color-borde); border-radius: var(--boton-radio, 999px); padding: .55rem .9rem; color: var(--color-texto); text-decoration: none; font-weight: 600; }
.blog-categorias a[aria-current="page"],.blog-categorias a:hover { background: var(--color-boton-fondo); border-color: var(--color-boton-fondo); color: var(--color-boton-texto); }
.blog-categorias small { opacity: .75; }
.blog-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(1rem, 2vw, 1.5rem); }
.blog-card { min-width: 0; overflow: hidden; border: 1px solid var(--color-borde); border-radius: var(--radio, 12px); background: var(--color-fondo); display: flex; flex-direction: column; }
.blog-card__imagen { display: block; aspect-ratio: 16/9; background: var(--color-fondo-suave); overflow: hidden; }
.blog-card__imagen img { display: block; width: 100%; height: 100%; object-fit: contain; }
.blog-card__body { padding: 1.25rem; display: flex; flex-direction: column; flex: 1; }
.blog-card__meta,.blog-post__meta { display: flex; align-items: center; gap: .8rem; flex-wrap: wrap; color: var(--color-texto-suave); font-size: .84rem; margin-bottom: .75rem; }
.blog-card__meta a,.blog-post__meta a { color: var(--color-primario); text-decoration: none; font-weight: 700; }
.blog-card h2,.blog-card h3 { font-size: clamp(1.15rem, 1.6vw, 1.4rem); line-height: 1.3; margin: 0 0 .7rem; }
.blog-card h2 a,.blog-card h3 a { color: var(--color-texto); text-decoration: none; }
.blog-card p { color: var(--color-texto-suave); margin: 0 0 1rem; line-height: 1.55; }
.blog-card__leer { margin-top: auto; color: var(--color-primario); font-weight: 700; text-decoration: none; }
.blog-paginacion { display: flex; justify-content: center; gap: .45rem; margin-top: 2rem; }
.blog-paginacion a { display: grid; place-items: center; min-width: 2.5rem; min-height: 2.5rem; border: 1px solid var(--color-borde); border-radius: var(--boton-radio, 10px); text-decoration: none; color: var(--color-texto); }
.blog-paginacion a[aria-current="page"] { background: var(--color-boton-fondo); color: var(--color-boton-texto); border-color: var(--color-boton-fondo); }
.blog-empty { padding: 2rem; background: var(--color-fondo-suave); border-radius: var(--radio, 12px); }
.blog-post { max-width: 900px; margin: 0 auto; }
.blog-post__header { padding: clamp(2rem, 5vw, 4rem) 0 1.8rem; }
.blog-post__volver { display: inline-block; color: var(--color-texto-suave); text-decoration: none; margin-bottom: 2rem; }
.blog-post__autor,.blog-post__footer a { color: var(--color-primario); font-weight: 700; text-decoration: none; }
.blog-post__imagen { width: 100%; height: auto; aspect-ratio: 16/9; object-fit: contain; background: var(--color-fondo-suave); border-radius: var(--radio, 12px); margin: 0 0 2rem; }
.blog-post__contenido { max-width: 760px; line-height: 1.75; }
.blog-post__contenido h2 { margin: 2.4rem 0 .8rem; }
.blog-post__contenido h3 { margin: 1.8rem 0 .7rem; }
.blog-post__contenido img { max-width: 100%; height: auto; }
.blog-post__contenido p,.blog-post__contenido ul,.blog-post__contenido ol { margin-bottom: 1.2rem; }
.blog-post__footer { display: flex; justify-content: space-between; flex-wrap: wrap; gap: 1rem; border-top: 1px solid var(--color-borde); padding-top: 1.5rem; margin-top: 2.5rem; }
.blog-post__compartir { display: flex; flex-wrap: wrap; gap: .7rem; }
.blog-home { padding-top: clamp(3rem, 6vw, 5rem); padding-bottom: clamp(3rem, 6vw, 5rem); }
.blog-home__head { display: flex; justify-content: space-between; align-items: end; gap: 1rem; margin-bottom: 1.5rem; }
.blog-home__head h2 { margin: 0; }
.blog-home__head > a { color: var(--color-primario); font-weight: 700; text-decoration: none; }
@media (max-width: 900px) { .blog-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 620px) { .blog-grid { grid-template-columns: 1fr; } .blog-home__head { align-items: start; flex-direction: column; } }