/* === FUENTES LOCALES === */
@font-face {
	font-family: 'Outfit';
	src: url('./fonts/Outfit-Thin.ttf') format('truetype');
	font-weight: 100;
	font-style: normal;
}

@font-face {
	font-family: 'Outfit';
	src: url('./fonts/Outfit-ExtraLight.ttf') format('truetype');
	font-weight: 200;
	font-style: normal;
}

@font-face {
	font-family: 'Outfit';
	src: url('./fonts/Outfit-Light.ttf') format('truetype');
	font-weight: 300;
	font-style: normal;
}

@font-face {
	font-family: 'Outfit';
	src: url('./fonts/Outfit-Regular.ttf') format('truetype');
	font-weight: 400;
	font-style: normal;
}

@font-face {
	font-family: 'Outfit';
	src: url('./fonts/Outfit-Medium.ttf') format('truetype');
	font-weight: 500;
	font-style: normal;
}

@font-face {
	font-family: 'Outfit';
	src: url('./fonts/Outfit-SemiBold.ttf') format('truetype');
	font-weight: 600;
	font-style: normal;
}

@font-face {
	font-family: 'Outfit';
	src: url('./fonts/Outfit-Bold.ttf') format('truetype');
	font-weight: 700;
	font-style: normal;
}

@font-face {
	font-family: 'Outfit';
	src: url('./fonts/Outfit-ExtraBold.ttf') format('truetype');
	font-weight: 800;
	font-style: normal;
}

@font-face {
	font-family: 'Outfit';
	src: url('./fonts/Outfit-Black.ttf') format('truetype');
	font-weight: 900;
	font-style: normal;
}

/* === LAYERS === */
@layer base, skeleton, badges, utility, buttons, product_grids;

/* === LAYER BASE === */
@layer base {
	*, *::before, *::after {
		box-sizing: border-box;
	}

	html {
		scroll-behavior: smooth;
		scroll-padding-top: calc(var(--header-height) + 1.5rem);
	}

	body {
		margin: 0;
		font-family: var(--font-family);
		font-size: 14px;
		color: var(--dark-color);
		background: radial-gradient(circle at top left, rgba(18, 172, 231, 0.06), transparent 20%),
					linear-gradient(180deg, #ffffff 0%, var(--light-color) 18%, var(--light-color) 100%);
		min-height: 100vh;
		overflow-x: hidden;
		line-height: 1.6;
	}

	body.is-locked {
		overflow: hidden;
		/* iOS Safari: overflow:hidden alone doesn't prevent body scroll */
		touch-action: none;
	}

	/* Scrollbar personalizada */
	body::-webkit-scrollbar {
		width: 8px;
	}

	body::-webkit-scrollbar-track {
		background: var(--light-color);
	}

	body::-webkit-scrollbar-thumb {
		background: var(--main-color);
		border-radius: 10px;
	}

	body::-webkit-scrollbar-thumb:hover {
		background: var(--main-color-shade);
	}

	/* Elementos base */
	img, video {
		display: block;
		max-width: 100%;
		height: auto;
	}

	a {
		color: inherit;
		text-decoration: none;
		transition: color var(--transition);
	}

	a:hover {
		color: var(--main-color);
	}

	button, input {
		font: inherit;
	}

	button {
		cursor: pointer;
		border: none;
		background: none;
	}

	/* Utilidades de contenedor */
	.page_margins {
		width: 100%;
		max-width: var(--container-max);
		margin: 0 auto;
		padding-inline: var(--space-2);
		box-sizing: border-box;
	}

	.container {
		width: min(100% - 1.5rem, 90rem);
		margin-inline: auto;
	}

	.img_responsive {
		max-width: 100%;
		height: auto;
		display: block;
	}

	/* Utilidades de accesibilidad */
	.visually-hidden {
		position: absolute;
		width: 1px;
		height: 1px;
		padding: 0;
		margin: -1px;
		overflow: hidden;
		clip: rect(0, 0, 0, 0);
		white-space: nowrap;
		border: 0;
	}

	.skip-link {
		position: absolute;
		left: 1rem;
		top: -4rem;
		z-index: 200;
		background: var(--main-color);
		color: #fff;
		padding: 0.75rem 1rem;
		border-radius: var(--radius-full);
		transition: top var(--transition);
	}

	.skip-link:focus {
		top: 1rem;
	}

	/* Animaciones de entrada */
	.reveal {
		opacity: 0;
		transform: translateY(32px);
		transition: opacity 600ms ease, transform 600ms ease;
	}

	.reveal.is-visible {
		opacity: 1;
		transform: translateY(0);
	}

	/* Secciones */
	.section {
		width: var(--container);
		margin-inline: auto;
		padding: clamp(2rem, 4vw, 3.75rem) 0;
	}

	.section-heading {
		display: flex;
		align-items: end;
		justify-content: space-between;
		gap: 1rem;
		margin-bottom: 1.4rem;
	}

	.section-heading h2 {
		margin: 0;
		font-size: clamp(1.55rem, 2.6vw, 2.3rem);
		line-height: 1.05;
		letter-spacing: -0.03em;
	}

	.section-heading p {
		margin: 0.6rem 0 0;
		max-width: 38rem;
		color: var(--medium-color);
		font-size: 1rem;
		line-height: 1.55;
	}

	.eyebrow {
		display: inline-flex;
		align-items: center;
		gap: 0.5rem;
		margin-bottom: 0.8rem;
		font-size: 0.78rem;
		font-weight: 700;
		letter-spacing: 0.18em;
		text-transform: uppercase;
		color: var(--main-color-shade);
	}

	/* Focus visible */
	:focus-visible {
		outline: 2px solid var(--main-color);
		outline-offset: 3px;
	}

	/* Responsive */
	@media (min-width: 768px) {
		.page_margins {
			padding-inline: var(--space-3);
		}
	}

	@media (min-width: 1200px) {
		.page_margins {
			padding-inline: var(--space-4);
		}
	}
}

/* === LAYER SKELETON === */
@layer skeleton {
	.skeleton {
		background: linear-gradient(
			90deg,
			var(--light-color-shade) 0%,
			var(--light-color-tint) 50%,
			var(--light-color-shade) 100%
		);
		background-size: 200% 100%;
		animation: skeleton-loading 1.5s ease-in-out infinite;
	}

	@keyframes skeleton-loading {
		0% { background-position: 200% 0; }
		100% { background-position: -200% 0; }
	}

	.skeleton-card {
		border-radius: var(--radius-md);
		overflow: hidden;
	}

	.skeleton-text {
		height: 1em;
		border-radius: var(--radius-s);
		margin-bottom: 0.5em;
	}

	.skeleton-title {
		height: 1.5em;
		width: 60%;
		border-radius: var(--radius-s);
	}
}

/* === LAYER BADGES === */
@layer badges {
	.badge {
		display: inline-flex;
		align-items: center;
		justify-content: center;
		padding: 0.25rem 0.6rem;
		border-radius: var(--radius-full);
		font-size: 0.75rem;
		font-weight: 700;
		letter-spacing: 0.05em;
		text-transform: uppercase;
	}

	.badge--primary {
		background: var(--main-color);
		color: var(--main-color-contrast);
	}

	.badge--success {
		background: var(--success-color);
		color: var(--success-color-contrast);
	}

	.badge--danger {
		background: var(--danger-color);
		color: var(--danger-color-contrast);
	}

	.badge--warning {
		background: var(--warning-color);
		color: var(--warning-color-contrast);
	}

	.badge--offer {
		position: absolute;
		top: 0.5rem;
		right: 0.5rem;
		background: var(--danger-color);
		color: #fff;
		padding: 0.4rem 0.7rem;
		font-size: 0.7rem;
		font-weight: 800;
		z-index: 10;
	}
}

/* === LAYER UTILITY === */
@layer utility {
	.text-center { text-align: center; }
	.text-left { text-align: left; }
	.text-right { text-align: right; }

	.d-none { display: none !important; }
	.d-block { display: block !important; }
	.d-flex { display: flex !important; }
	.d-grid { display: grid !important; }

	.flex-center {
		display: flex;
		align-items: center;
		justify-content: center;
	}

	.gap-1 { gap: var(--space-1); }
	.gap-2 { gap: var(--space-2); }
	.gap-3 { gap: var(--space-3); }

	.mt-1 { margin-top: var(--space-1); }
	.mt-2 { margin-top: var(--space-2); }
	.mt-3 { margin-top: var(--space-3); }

	.mb-1 { margin-bottom: var(--space-1); }
	.mb-2 { margin-bottom: var(--space-2); }
	.mb-3 { margin-bottom: var(--space-3); }
}

/* === LAYER BUTTONS === */
@layer buttons {
	.app_button {
		display: inline-flex;
		align-items: center;
		justify-content: center;
		gap: 0.55rem;
		min-height: 2.95rem;
		padding: 0.8rem 1.3rem;
		border-radius: var(--radius-full);
		font-weight: 700;
		font-size: 0.9rem;
		letter-spacing: 0.02em;
		transition: transform var(--transition), 
					box-shadow var(--transition), 
					background var(--transition), 
					color var(--transition);
		cursor: pointer;
		border: none;
		text-decoration: none;
	}

	.app_button:hover,
	.app_button:focus-visible {
		transform: translateY(-2px);
	}

	/* Variantes de color */
	.app_button.main.fill {
		background: var(--main-color);
		color: var(--main-color-contrast);
		box-shadow: 0 12px 24px rgba(18, 172, 231, 0.24);
	}

	.app_button.main.fill:hover {
		background: var(--main-color-shade);
	}

	.app_button.main.outline {
		border: 2px solid var(--main-color);
		color: var(--main-color);
		background: transparent;
	}

	.app_button.main.outline:hover {
		background: var(--main-color-tint);
	}

	.app_button.secondary.fill {
		background: var(--secondary-color);
		color: var(--secondary-color-contrast);
	}

	.app_button.success.fill {
		background: var(--success-color);
		color: var(--success-color-contrast);
	}

	.app_button.danger.fill {
		background: var(--danger-color);
		color: var(--danger-color-contrast);
	}

	.app_button.light.fill {
		background: var(--light-color);
		color: var(--light-color-contrast);
	}

	.app_button.dark.fill {
		background: var(--dark-color);
		color: var(--dark-color-contrast);
	}

	/* Botones de icono */
	.header-button {
		display: inline-grid;
		place-items: center;
		width: 2.9rem;
		height: 2.9rem;
		position: relative;
		border-radius: var(--radius-full);
		color: var(--dark-color);
		background: transparent;
		transition: color var(--transition), 
					background var(--transition), 
					transform var(--transition);
	}

	.header-button:hover,
	.header-button:focus-visible {
		background: rgba(18, 172, 231, 0.1);
		color: var(--main-color-shade);
		transform: translateY(-1px);
	}

	.header-button__badge {
		position: absolute;
		top: 0.1rem;
		right: 0.05rem;
		min-width: 1.18rem;
		height: 1.18rem;
		padding-inline: 0.28rem;
		display: inline-flex;
		align-items: center;
		justify-content: center;
		border-radius: var(--radius-full);
		border: 2px solid rgba(255, 255, 255, 0.92);
		background: var(--main-color);
		color: #fff;
		box-shadow: 0 10px 22px rgba(18, 172, 231, 0.28);
		font-size: 0.68rem;
		font-weight: 800;
		line-height: 1;
		letter-spacing: -0.03em;
		transform-origin: top right;
		transition: transform var(--transition);
	}

	.header-button__badge[hidden] {
		display: none;
	}

	/* Iconos */
	.icon {
		width: 1.1rem;
		height: 1.1rem;
		fill: none;
		stroke: currentColor;
		stroke-width: 2;
		stroke-linecap: round;
		stroke-linejoin: round;
		flex: 0 0 auto;
	}

	.icon--lg {
		width: 1.35rem;
		height: 1.35rem;
	}
}

/* === LAYER PRODUCT GRIDS === */
@layer product_grids {
	.content_productos_lista {
		display: grid;
		gap: 1rem;
		width: 100%;
	}

	.content_productos_lista.grid-2 {
		grid-template-columns: repeat(2, 1fr);
	}

	.content_productos_lista.grid-3 {
		grid-template-columns: repeat(3, 1fr);
	}

	.content_productos_lista.grid-4 {
		grid-template-columns: repeat(4, 1fr);
	}

	.content_productos_lista.grid-5 {
		grid-template-columns: repeat(5, 1fr);
	}

	/* Responsive */
	@media (max-width: 1200px) {
		.content_productos_lista.grid-5 {
			grid-template-columns: repeat(4, 1fr);
		}
		.content_productos_lista.grid-4 {
			grid-template-columns: repeat(3, 1fr);
		}
	}

	@media (max-width: 768px) {
		.content_productos_lista.grid-5,
		.content_productos_lista.grid-4,
		.content_productos_lista.grid-3 {
			grid-template-columns: repeat(2, 1fr);
		}
	}

	@media (max-width: 480px) {
		.content_productos_lista {
			grid-template-columns: 1fr;
		}
	}
}

/* ===================================================
   ESTILOS MAQUETACIÓN CLOROCIEN
   Clases del diseño aprobado — no modificar
=================================================== */

/* Utilidades */
.skip-link {
	position: absolute;
	left: 1rem;
	top: -4rem;
	z-index: 200;
	background: var(--brand);
	color: #fff;
	padding: 0.75rem 1rem;
	border-radius: 999px;
	transition: top var(--transition);
}
.skip-link:focus { top: 1rem; }
.visually-hidden {
	position: absolute;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0,0,0,0);
	white-space: nowrap;
	border: 0;
}
.reveal {
	opacity: 0;
	transform: translateY(32px);
	transition: opacity 600ms ease, transform 600ms ease;
}
.reveal.is-visible { opacity: 1; transform: translateY(0); }
.section {
	width: var(--container);
	margin-inline: auto;
	padding: clamp(2rem, 4vw, 3.75rem) 0;
}
.eyebrow {
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
	margin-bottom: 0.8rem;
	font-size: 0.78rem;
	font-weight: 700;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	color: var(--brand-deep);
}
.section-heading {
	display: flex;
	align-items: end;
	justify-content: space-between;
	gap: 1rem;
	margin-bottom: 1.4rem;
}
.section-heading h2 { margin: 0; font-size: clamp(1.55rem, 2.6vw, 2.3rem); line-height: 1.05; letter-spacing: -0.03em; }
.section-heading p { margin: 0.6rem 0 0; max-width: 38rem; color: var(--muted); font-size: 1rem; line-height: 1.55; }
.button,
.button-secondary {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 0.55rem;
	min-height: 2.95rem;
	padding: 0.8rem 1.3rem;
	border-radius: 999px;
	font-weight: 700;
	transition: transform var(--transition), box-shadow var(--transition), background var(--transition), color var(--transition);
}
.button {
	background: var(--brand);
	color: #fff;
	box-shadow: 0 12px 24px rgba(18,172,231,0.24);
}
.button:hover, .button:focus-visible, .button-secondary:hover, .button-secondary:focus-visible {
	transform: translateY(-2px);
}
.button-secondary {
	background: rgba(255,255,255,0.12);
	border: 1px solid rgba(255,255,255,0.25);
	backdrop-filter: blur(12px);
}
:focus-visible { outline: 2px solid var(--brand); outline-offset: 3px; }
.icon {
	width: 1.1rem;
	height: 1.1rem;
	fill: none;
	stroke: currentColor;
	stroke-width: 2;
	stroke-linecap: round;
	stroke-linejoin: round;
	flex: 0 0 auto;
}
.icon--lg { width: 1.35rem; height: 1.35rem; }
.icon--whatsapp { width: 1.45rem; height: 1.45rem; fill: currentColor; stroke: none; }

/* Topbar */
.topbar {
	background: rgba(255,255,255,0.94);
	backdrop-filter: blur(12px);
	overflow: hidden;
}
.topbar__inner {
	min-height: 2.45rem;
	display: flex;
	align-items: center;
	font-size: 0.7rem;
	font-weight: 500;
	letter-spacing: 0.02em;
}
.topbar__track {
	display: flex;
	align-items: center;
	gap: 0;
	width: max-content;
	will-change: transform;
	animation: topbar-ticker 28s linear infinite;
}
@keyframes topbar-ticker {
	0%   { transform: translateX(0); }
	100% { transform: translateX(-50%); }
}
.topbar__item {
	display: inline-flex;
	align-items: center;
	gap: 0.4rem;
	white-space: nowrap;
	padding-inline: 2.5rem;
}
.topbar__sep {
	color: var(--line);
	font-size: 1rem;
	line-height: 1;
	user-select: none;
}

/* Header */
.site-header {
	position: sticky;
	top: 0;
	z-index: 35;
	min-height: var(--header-height);
	margin-bottom: calc(var(--header-height) * -1);
	background: transparent;
	border-bottom: 1px solid transparent;
	backdrop-filter: none;
	transition: border-color var(--transition), box-shadow var(--transition), background var(--transition);
}
.site-header::before {
	content: "";
	position: absolute;
	inset: 0;
	opacity: 0;
	background: rgba(255,255,255,0.92);
	backdrop-filter: blur(18px);
	transition: opacity var(--transition);
	pointer-events: none;
}
.site-header.is-scrolled { border-color: var(--line); box-shadow: 0 10px 30px rgba(15,44,60,0.08); }
.site-header.is-scrolled::before { opacity: 1; }
.site-header.is-solid::before { background: #fff; backdrop-filter: none; }
.site-header__inner {
	position: relative;
	z-index: 1;
	width: var(--container);
	margin-inline: auto;
	min-height: var(--header-height);
	display: grid;
	grid-template-columns: minmax(0,1fr) auto minmax(0,1fr);
	align-items: center;
	gap: clamp(0.4rem,1vw,1rem);
	padding-top: 0.15rem;
}
.header-button {
	display: inline-grid;
	place-items: center;
	width: 2.9rem;
	height: 2.9rem;
	position: relative;
	overflow: visible;
	border: 0;
	border-radius: 999px;
	color: var(--text);
	background: transparent;
	transition: color var(--transition), background var(--transition), transform var(--transition);
	cursor: pointer;
}
.header-button--cart .icon,
.header-button--wishlist .icon { stroke-width: 1.85; }
.header-button--wishlist.is-active { color: var(--brand-deep); }
.header-button__badge {
	position: absolute;
	top: 0.1rem;
	right: 0.05rem;
	min-width: 1.18rem;
	height: 1.18rem;
	padding-inline: 0.28rem;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	border-radius: 999px;
	border: 2px solid rgba(255,255,255,0.92);
	background: var(--brand);
	color: #fff;
	box-shadow: 0 10px 22px rgba(18,172,231,0.28);
	font-size: 0.68rem;
	font-weight: 800;
	line-height: 1;
	letter-spacing: -0.03em;
	transition: transform var(--transition), opacity var(--transition), background var(--transition);
}
.header-button__badge[hidden], .header-button__badge.hidden { display: none; }
.header-button:hover, .header-button:focus-visible {
	background: rgba(18,172,231,0.1);
	color: var(--brand-deep);
	transform: translateY(-1px);
}
.scanner-icon-image {
	display: block;
	width: 1.32rem;
	height: 1.32rem;
	object-fit: contain;
	transition: filter var(--transition), opacity var(--transition);
}
.brand {
	position: relative;
	display: inline-grid;
	place-items: center;
	justify-self: center;
	min-width: 0;
	max-width: min(100%,13rem);
}
.brand img, .brand svg {
	width: auto;
	max-width: 100%;
	height: clamp(1.85rem, 5vw, 3.1rem);
}
.brand-logo { grid-area: 1 / 1; transition: opacity var(--transition), transform var(--transition); }
.brand-logo--light { opacity: 1; }
.brand-logo--dark { opacity: 0; transform: translateY(4px); }
.header-actions { display: inline-flex; align-items: center; justify-self: end; gap: 0.15rem; min-width: 0; }
.header-actions > * { flex: 0 0 auto; }
.header-side { display: inline-flex; align-items: center; min-width: 0; }
.header-side--left { justify-self: start; }
.header-link { display: none; align-items: center; margin-right: 0.25rem; font-size: 0.82rem; font-weight: 600; color: var(--accent-soft); }
.site-header:not(.is-scrolled) .header-button,
.site-header:not(.is-scrolled) .header-link,
.site-header:not(.is-scrolled) .favorites_wrap { color: #fff; }
.site-header:not(.is-scrolled) .scanner-icon-image { filter: brightness(0) invert(1); }
.site-header:not(.is-scrolled) .header-button:hover,
.site-header:not(.is-scrolled) .header-button:focus-visible { background: rgba(255,255,255,0.12); color: #fff; }
.site-header.is-scrolled .brand-logo--light { opacity: 0; transform: translateY(-4px); }
.site-header.is-scrolled .brand-logo--dark { opacity: 1; transform: translateY(0); }
.site-header.is-scrolled .header-button,
.site-header.is-scrolled .header-link,
.site-header.is-scrolled .favorites_wrap { color: var(--dark-color); }

/* Drawers */
.drawer-backdrop {
	position: fixed;
	inset: 0;
	z-index: 40;
	background: rgba(4,10,16,0.48);
	backdrop-filter: blur(7px);
	opacity: 0;
	pointer-events: none;
	transition: opacity var(--transition);
}
.drawer-backdrop.is-open { opacity: 1; pointer-events: auto; }
.drawer {
	position: fixed;
	inset: 0;
	z-index: 50;
	opacity: 0;
	pointer-events: none;
	transition: opacity var(--transition), transform var(--transition);
	transform: translateY(1rem);
}
.drawer.is-open { opacity: 1; pointer-events: auto; transform: translateY(0); }
.drawer[hidden] { display: none !important; }
.drawer[hidden] > *, .drawer:not(.is-open) > * { pointer-events: none !important; }
.menu-drawer {
	padding: 0;
	display: flex;
	align-items: stretch;
	justify-content: flex-start;
	pointer-events: none;
	transform: translateX(-2rem);
}
.menu-drawer[hidden] .menu-panel,
.menu-drawer:not(.is-open) .menu-panel { pointer-events: none !important; }
.menu-drawer.is-open { transform: translateX(0); }
.menu-panel {
	width: min(100%, 46rem);
	height: 100vh;          /* fallback */
	height: 100dvh;         /* browser chrome aware */
	min-height: 100vh;
	margin-inline: 0 auto;
	border-radius: 0 1.9rem 1.9rem 0;
	background: var(--panel);
	overflow: hidden;
	pointer-events: auto;
	box-shadow: var(--shadow-lg);
	display: flex;
	flex-direction: column;
}
.menu-panel__nav {
	flex: 1 1 0;
	min-height: 0;
	display: flex;
	flex-direction: column;
	padding: 1.2rem 1.25rem 1rem;
	background: var(--panel);
	color: var(--text);
	height: 100%;
	max-height: 100vh;      /* fallback */
	max-height: 100dvh;
	overflow-y: auto;
	overflow-x: hidden;
	overscroll-behavior: contain;
}
.menu-panel__top, .search-panel__top {
	display: grid;
	grid-template-columns: auto 1fr auto;
	gap: 1rem;
	align-items: center;
}
.menu-panel__top .brand, .search-panel__top .brand { justify-self: center; }
.menu-columns {
	display: grid;
	grid-template-columns: minmax(0,1fr);
	gap: 1rem;
	margin-top: 1.45rem;
	padding-top: 1.15rem;
	border-top: 1px solid var(--line);
}
.menu-subpanel { display: none; padding-left: 1rem; border-left: 1px solid var(--line); }
.menu-subpanel.is-visible { display: block; }
.menu-subpanel__title { margin: 0 0 0.8rem; color: var(--muted); font-size: 0.72rem; font-weight: 700; letter-spacing: 0.18em; text-transform: uppercase; }
.menu-list, .submenu-list, .footer-links, .contact-list { list-style: none; padding: 0; margin: 0; }
.menu-list { display: grid; gap: 0.2rem; }
.menu-list li { display: grid; gap: 0.45rem; }
.menu-link, .submenu-link {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 0.75rem;
	min-height: 2.95rem;
	padding: 0.2rem 0.15rem;
	border-radius: 0.9rem;
	font-size: 0.92rem;
	font-weight: 500;
	letter-spacing: 0.05em;
	text-transform: uppercase;
	color: var(--text);
	transition: color var(--transition), background var(--transition), transform var(--transition);
}
.menu-link:hover, .menu-link:focus-visible { color: var(--brand-deep); transform: translateX(2px); }
.submenu-link { padding: 0.55rem 0.75rem; border-radius: 0.7rem; font-size: 0.88rem; font-weight: 500; letter-spacing: 0.03em; text-transform: none; }
.submenu-link:hover, .submenu-link:focus-visible { background: rgba(18,172,231,0.1); color: var(--brand-deep); transform: translateX(2px); }
.menu-link.is-active {
	background: var(--brand);
	color: #fff;
	font-weight: 700;
	justify-content: center;
	min-height: 3rem;
	max-width: 14.8rem;
	padding-inline: 1rem;
}
.submenu-list { display: grid; gap: 0.15rem; color: var(--muted); }
.menu-inline-submenu { display: none; padding: 0 0 0.2rem 0.95rem; border-left: 1px solid rgba(15,44,60,0.08); }
.menu-inline-submenu.is-visible { display: block; }
.menu-inline-submenu .submenu-list { gap: 0.25rem; }
.menu-link[aria-expanded="true"] { color: var(--brand-deep); transform: translateX(2px); }
.menu-contact { margin-top: auto; padding-top: 1.15rem; border-top: 1px solid var(--line); display: grid; gap: 1rem; }
.menu-shortcut {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: 2.85rem;
	padding: 0.75rem 1rem;
	border-radius: 999px;
	border: 1px solid rgba(18,172,231,0.16);
	background: rgba(231,248,255,0.78);
	color: var(--brand-deep);
	font-size: 0.82rem;
	font-weight: 800;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	transition: background var(--transition), color var(--transition), transform var(--transition);
}
.menu-shortcut--responsive { display: none; }
.menu-shortcut:hover, .menu-shortcut:focus-visible { background: var(--brand); color: #fff; transform: translateY(-1px); }
.contact-list { display: grid; gap: 0.8rem; font-size: 0.95rem; color: var(--text); }
.contact-list a, .contact-list span { display: inline-flex; align-items: center; gap: 0.6rem; }
.social-row { display: inline-flex; align-items: center; gap: 0.75rem; flex-wrap: wrap; }
.social-link {
	display: inline-grid;
	place-items: center;
	width: 2.6rem;
	height: 2.6rem;
	border: 1px solid var(--line);
	border-radius: 999px;
	color: var(--brand-deep);
	background: var(--panel);
	transition: transform var(--transition), background var(--transition), color var(--transition);
}
.social-link:hover, .social-link:focus-visible { background: var(--brand); color: #fff; transform: translateY(-2px); }
.menu-panel__preview {
	display: none !important;
	position: relative;
	min-height: 100%;
	background: linear-gradient(180deg,rgba(4,14,22,0.62),rgba(4,14,22,0.28)), url('/video_slider.mp4') center / cover no-repeat;
	color: #fff;
}
.search-drawer { display: block; padding: 0; background: transparent; backdrop-filter: none; }
.search-shell { width: 100%; min-height: 100vh; display: grid; grid-template-rows: minmax(23rem,45vh) 1fr; background: transparent; }
.search-panel { padding: 1rem 0 0; background: linear-gradient(180deg,rgba(255,255,255,0.98),var(--panel)); border-bottom: 1px solid var(--line); }
.search-panel__inner { width: var(--container); margin-inline: auto; }
.search-panel__body { max-width: 31rem; margin: clamp(4.5rem,9vh,6.25rem) auto 0; padding: 0 0 2rem; text-align: center; }
.search-title { display: none; }
.search-form { display: grid; grid-template-columns: 1fr auto auto auto; align-items: center; gap: 0.95rem; border-bottom: 1px solid var(--line); padding-bottom: 0.75rem; }
.search-form input { border: 0; background: transparent; min-width: 0; color: var(--text); outline: none; font-size: 1.05rem; font-family: inherit; }
.search-icon-button { display: inline-grid; place-items: center; width: 2.3rem; height: 2.3rem; border: 0; border-radius: 999px; background: transparent; color: var(--text); transition: background var(--transition), color var(--transition); cursor: pointer; }
.search-icon-button:hover, .search-icon-button:focus-visible { background: rgba(18,172,231,0.1); color: var(--brand-deep); }
.search-copy { margin: 1.05rem 0 1.2rem; color: var(--accent-soft); line-height: 1.5; }
.whatsapp-button { background: #25d366; color: #fff; box-shadow: 0 12px 24px rgba(37,211,102,0.24); }
.whatsapp-button:hover, .whatsapp-button:focus-visible { background: #21bb5b; }
.search-hero { min-height: 100%; background: transparent; pointer-events: none; }

/* Hero */
.hero { padding-top: 0; }
.hero-card {
	position: relative;
	width: 100%;
	min-height: calc(clamp(24rem,64vw,44rem) + 7.5rem);
	margin-inline: auto;
	overflow: hidden;
	border-radius: 0 0 2rem 2rem;
	background: #04131d;
}
.hero-card::before { content:""; position:absolute; top:0; left:0; right:0; height:150px; z-index:1; background:linear-gradient(180deg,rgba(0,0,0,0.4) 0%,rgba(0,0,0,0) 100%); pointer-events:none; }
.hero-card::after { content:""; position:absolute; inset:0; background:linear-gradient(180deg,rgba(4,17,25,0) 0%,rgba(4,17,25,0) 55%,rgba(4,17,25,0.52) 100%); pointer-events:none; }
.hero-media, .hero-media video, .hero-media img { position:absolute; inset:0; width:100%; height:100%; }
.hero-media video, .hero-media img { object-fit:cover; }
.hero-content { position:relative; z-index:2; min-height:inherit; display:flex; flex-direction:column; justify-content:flex-end; padding:calc(var(--header-height) + 0.6rem) 1rem 1rem; }
.hero-copy { max-width:30rem; padding:1.15rem; border-radius:1.45rem; background:rgba(10,16,22,0.22); color:#fff; border:1px solid rgba(255,255,255,0.16); backdrop-filter:blur(14px); }
.hero-copy h1 { margin:0; font-size:clamp(2rem,6vw,4.8rem); line-height:0.92; letter-spacing:-0.06em; }
.hero-copy p { margin:0.9rem 0 0; font-size:1rem; line-height:1.6; color:rgba(255,255,255,0.82); }
.hero-copy__actions { display:flex; flex-wrap:wrap; gap:0.75rem; margin-top:1rem; }

/* Categorías */
.categories-grid {
	--categories-gap: 0.85rem;
	position: relative;
	overflow: hidden;
	padding: 0.95rem 0.55rem 1.2rem;
	margin-inline: -0.33rem;
	touch-action: pan-y;
	cursor: grab;
}
.categories-grid .swiper-wrapper { display:flex; align-items:stretch; }
.categories-grid:not(.swiper-initialized) .swiper-wrapper { width:max-content; gap:var(--categories-gap); }
.categories-grid .swiper-slide { width:min(15.75rem,82vw); height:auto; flex-shrink:0; }
.categories-grid.is-dragging, .rail.is-dragging, .reviews-grid.is-dragging { cursor:grabbing; user-select:none; }
.category-card { position:relative; min-height:12.5rem; overflow:hidden; border-radius:1.5rem; background:#071018; box-shadow:0 10px 32px rgba(9,28,41,0.12); isolation:isolate; scroll-snap-align:start; }
.category-card img { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; transition:transform 700ms ease; user-select:none; }
.category-card::after { content:""; position:absolute; inset:0; background:linear-gradient(180deg,rgba(4,11,17,0.08),rgba(4,11,17,0.24) 46%,rgba(4,11,17,0.72)); z-index:0; }
.category-card:hover img, .category-card:focus-within img { transform:scale(1.06); }
.category-card__content { position:relative; z-index:1; display:flex; flex-direction:column; justify-content:end; gap:0.75rem; min-height:inherit; padding:1rem; color:#fff; }
.category-card__content h3 { margin:0; max-width:10ch; font-size:1.35rem; font-weight:800; letter-spacing:-0.04em; line-height:0.98; text-transform:uppercase; }
.category-card__link { align-self:start; display:inline-flex; align-items:center; justify-content:center; min-height:2.3rem; padding:0.55rem 0.9rem; border-radius:999px; background:rgba(255,255,255,0.95); color:#111; font-size:0.84rem; font-weight:700; transition:transform var(--transition); }
.category-card__link:hover, .category-card__link:focus-visible { transform:translateY(-2px); }

/* Rails */
.rail-toolbar { display:flex; align-items:center; gap:0.6rem; }
.rail-arrow { display:none; width:2.75rem; height:2.75rem; border:1px solid var(--line); border-radius:999px; background:var(--panel); color:var(--accent-soft); transition:background var(--transition),color var(--transition),transform var(--transition),border-color var(--transition); cursor:pointer; }
.rail-arrow:hover, .rail-arrow:focus-visible { background:var(--brand); color:#fff; border-color:var(--brand); transform:translateY(-2px); }
.rail {
	--rail-gap: 1rem;
	display: grid;
	grid-auto-flow: column;
	grid-auto-columns: minmax(15.8rem, 82vw);
	gap: var(--rail-gap);
	overflow-x: auto;
	overflow-y: hidden;
	padding: 1rem 0.55rem 1.45rem;
	scroll-snap-type: x proximity;
	scroll-padding-inline: 0.55rem;
	scrollbar-width: none;
	-webkit-overflow-scrolling: touch;
	cursor: grab;
}
.rail::-webkit-scrollbar { display:none; }

/* Banners promo */
.promo-banner { position:relative; overflow:hidden; border-radius:var(--radius-lg); border:1px solid var(--line); background:var(--panel); box-shadow:0 12px 28px rgba(10,37,53,0.08); }
.promo-slider { position:relative; }
.promo-track { display:grid; }
.promo-slide { display:none; }
.promo-slide.is-active { display:grid; }
.promo-banner__copy { padding:1.4rem; background:linear-gradient(135deg,rgba(18,172,231,0.14),rgba(18,172,231,0.02)); display:flex; flex-direction:column; justify-content:center; }
.promo-banner__copy h2 { margin:0; max-width:10ch; font-size:clamp(2rem,5vw,3.2rem); line-height:0.92; letter-spacing:-0.06em; text-transform:uppercase; }
.promo-banner__copy p { margin:1rem 0 0; max-width:26rem; color:var(--accent-soft); line-height:1.6; }
.promo-banner__media { min-height:18rem; background:center/cover no-repeat; }
.promo-slider__nav { position:absolute; right:1rem; bottom:1rem; z-index:2; display:inline-flex; gap:0.5rem; }
.promo-dot { width:0.8rem; height:0.8rem; border:0; border-radius:999px; background:rgba(17,19,21,0.18); transition:transform var(--transition),background var(--transition); cursor:pointer; }
.promo-dot.is-active { background:var(--brand); transform:scale(1.15); }

/* Beneficios */
.benefits {
	width: var(--container);
	margin-inline: auto;
	padding: 1.3rem;
	border-radius: 1.8rem;
	background: #111315;
	color: #fff;
	display: grid;
	grid-template-columns: repeat(2,minmax(0,1fr));
	gap: 1rem;
	box-shadow: 0 20px 38px rgba(5,16,23,0.18);
}
.benefit-item { display:flex; gap:0.85rem; align-items:flex-start; }
.benefit-icon { flex:0 0 auto; display:inline-grid; place-items:center; width:2.9rem; height:2.9rem; border-radius:1rem; background:rgba(255,255,255,0.08); color:var(--brand); }
.benefit-copy h3 { margin:0; font-size:0.98rem; line-height:1.2; letter-spacing:-0.02em; }
.benefit-copy p { margin:0.32rem 0 0; color:rgba(255,255,255,0.72); font-size:0.86rem; line-height:1.5; }

/* Offer strip */
.offer-strip { position:relative; display:grid; align-items:stretch; border-radius:1.4rem; border:1px solid var(--line); overflow:hidden; }
.offer-strip__label { display:flex; align-items:center; min-height:7rem; padding:1.3rem 1.8rem; background:#e8e8e8; color:#111; font-weight:800; font-size:clamp(1.3rem,3vw,2.2rem); letter-spacing:-0.05em; text-transform:uppercase; }
.offer-strip__highlight { display:flex; align-items:center; justify-content:flex-start; gap:0.35rem; min-height:7rem; padding:1.3rem 10rem 1.3rem 9rem; background:var(--brand); color:#111; font-weight:800; font-size:clamp(1.6rem,4vw,2.5rem); letter-spacing:-0.05em; }
.offer-strip__image { position:absolute; left:46%; top:50%; z-index:1; display:block; width:clamp(7rem,12vw,9rem); height:auto; transform:translate(-50%,-50%); object-fit:contain; }
.offer-strip__cta { color: white; position:absolute; right:1.25rem; top:50%; z-index:2; transform:translateY(-50%); }
.offer-strip__pre { font-size:0.48em; font-weight:600; letter-spacing:0.02em; text-transform:uppercase; }
.offer-strip__and { font-size:0.48em; font-weight:600; }
@media (max-width: 768px) {
	.offer-strip__image{display:none;}
	.header-actions{ gap: 0;}
	.header-button{
		padding: 0;
		max-width: 40px;	
	}
	.site-header__inner{
		grid-template-columns: 50px 1fr 2fr;
    	gap: 0;
	}
	.menu-panel{
		width: 90%
	}
}
/* Reviews */
.reviews { margin-top:1.5rem; padding:clamp(3rem,6vw,4.5rem) 0; background:#0b0f13; color:#fff; }
.reviews__inner { width:var(--container); margin-inline:auto; }
.reviews__header { margin-bottom:1.5rem; }
.reviews__header h2 { margin:0; font-size:clamp(1.75rem,3vw,2.4rem); letter-spacing:-0.04em; }
.reviews-grid {
	display: grid;
	grid-auto-flow: column;
	grid-auto-columns: minmax(16rem,84vw);
	gap: 1rem;
	overflow-x: auto;
	overflow-y: hidden;
	padding: 0.35rem 0.2rem 0.75rem;
	scrollbar-width: none;
	cursor: grab;
}
.reviews-grid::-webkit-scrollbar { display:none; }
.review-card { padding:1.2rem; border-radius:1.35rem; background:rgba(255,255,255,0.05); border:1px solid rgba(255,255,255,0.08); backdrop-filter:blur(10px); }
.review-card__stars { display:inline-flex; gap:0.2rem; color:#f6c24f; }
.review-card p { margin:0.9rem 0 1rem; color:rgba(255,255,255,0.82); line-height:1.6; font-size:0.96rem; }
.review-card__author { display:flex; align-items:center; gap:0.8rem; color:rgba(255,255,255,0.92); }
.author-badge { width:2.5rem; height:2.5rem; border-radius:999px; display:inline-grid; place-items:center; background:linear-gradient(135deg,var(--brand),#005f8d); font-weight:700; }
.review-card small { display:block; margin-top:0.2rem; color:rgba(255,255,255,0.58); }

/* Footer Clorocien */
.site-footer { background:var(--footer); color:#fff; }
.footer-inner { width:var(--container); margin-inline:auto; padding:1.8rem 0 1.35rem; }
.newsletter-bar { display:grid; gap:1rem; align-items:center; padding-bottom:1.5rem; border-bottom:1px solid rgba(255,255,255,0.24); }
.newsletter-copy h2 { margin:0; font-size:clamp(1.6rem,3vw,2.5rem); letter-spacing:-0.05em; text-transform:uppercase; }
.newsletter-copy p { margin:0.45rem 0 0; color:rgba(255,255,255,0.82); line-height:1.55; }
.newsletter-form { display:flex; align-items:center; background:rgba(0,0,0,0.2); border:1px solid rgba(255,255,255,0.16); border-radius:999px; overflow:hidden; }
.newsletter-form input { flex:1; min-width:0; padding:0.9rem 1rem; border:0; background:transparent; color:#fff; outline:none; font-family:inherit; }
.newsletter-form input::placeholder { color:rgba(255,255,255,0.68); }
.newsletter-form button { min-height:3rem; padding:0 1.35rem; border:0; color:#fff; background:rgba(8,15,20,0.9); font-weight:700; cursor:pointer; font-family:inherit; }
.footer-grid { display:grid; gap:2rem; padding:2rem 0; }
.footer-column h3 { margin:0 0 0.85rem; font-size:1.05rem; letter-spacing:-0.02em; }
.footer-links { display:grid; gap:0.72rem; color:rgba(255,255,255,0.9); }
.footer-links a { width:fit-content; transition:opacity var(--transition); }
.footer-links a:hover, .footer-links a:focus-visible { opacity:0.74; color:inherit; }
.footer-bottom a:hover, .footer-bottom a:focus-visible { color:inherit; }
.footer-pill { display:inline-flex; align-items:center; justify-content:center; min-height:2.25rem; width:fit-content; padding:0 0.95rem; border-radius:999px; background:rgba(7,24,35,0.24); border:1px solid rgba(255,255,255,0.12); font-size:0.85rem; font-weight:600; }
.footer-bottom { padding-top:1.2rem; border-top:1px solid rgba(255,255,255,0.22); display:grid; gap:1rem; justify-items:center; text-align:center; color:rgba(255,255,255,0.84); font-size:0.92rem; }
.footer-brand img { height:2.5rem; width:auto; }


/* Responsive maquetación */
@media (min-width: 768px) {
	.newsletter-bar { grid-template-columns: 1.05fr 0.95fr; }
	.footer-grid { grid-template-columns: 1fr 1fr 1.1fr; }
	.promo-slide.is-active { grid-template-columns: 0.95fr 1.05fr; }
	.benefits { grid-template-columns: repeat(4,minmax(0,1fr)); }
	.offer-strip { grid-template-columns: minmax(0,1.08fr) minmax(0,1.42fr); }
	.categories-grid .swiper-slide { width: min(17rem,38vw); }
	.rail { grid-auto-columns: minmax(15.25rem,32vw); }
	.menu-panel__nav { padding: 1.45rem 1.6rem 1.25rem; }
}
@media (min-width: 1200px) {
	.categories-grid { --categories-gap: 1.125rem; }
	.categories-grid .swiper-slide { width: calc((100% - (4 * var(--categories-gap))) / 5); }
	.menu-panel { width: min(100%,52rem); grid-template-columns: 1fr; }
	.menu-columns { grid-template-columns: minmax(0,1fr) minmax(0,1fr); gap: 1.25rem; }
	.hero-card { min-height: calc(42rem + 7.5rem); }
	.rail-arrow { display: inline-grid; place-items: center; }
	.rail { grid-auto-columns: calc((100% - (5 * var(--rail-gap))) / 6); overflow-x: hidden; scroll-snap-type: x mandatory; }
	.reviews-grid { grid-auto-columns: minmax(15.5rem,1fr); }
	.footer-grid { grid-template-columns: 0.9fr 0.9fr 1.1fr; }
}
@media (min-width: 1440px) {
	.hero-card { min-height: calc(45rem + 7.5rem); }
	.offer-strip__highlight { padding-left: 9.5rem; }
}
@media (min-width: 1280px) {
	.header-link { display: inline-flex; }
}
@media (max-width: 1279px) {
	.header-link { display: none; }
	.menu-shortcut--responsive { display: inline-flex; }
}
@media (max-width: 1199px) {
	.menu-subpanel { display: none !important; }
	/* Submenú inline en mobile */
	.menu-inline-submenu {
		margin: 0.2rem 0 0.35rem 0.5rem;
		border-radius: 0.85rem;
		background: rgba(18,172,231,0.06);
		border-left: 2px solid rgba(18,172,231,0.2);
		padding: 0.35rem 0.5rem 0.35rem 0.85rem;
	}
	.menu-inline-submenu .submenu-link {
		font-size: 0.85rem;
		min-height: 2.55rem;
		padding: 0.4rem 0.65rem;
	}
}

/* ── Botón "Filtros" — visible solo en mobile ── */
.catalog-sidebar-toggle {
	display: none;
}
@media (max-width: 767px) {
	.catalog-sidebar-toggle {
		display: inline-flex;
		align-items: center;
		gap: 0.55rem;
		padding: 0.65rem 1.1rem;
		border: 1px solid var(--line);
		border-radius: 999px;
		background: var(--panel);
		color: var(--accent-soft);
		font-size: 0.82rem;
		font-weight: 700;
		letter-spacing: 0.06em;
		text-transform: uppercase;
		cursor: pointer;
		transition: background var(--transition), color var(--transition);
		align-self: start;
	}
	.catalog-sidebar-toggle:hover { background: rgba(18,172,231,0.08); color: var(--brand-deep); }
	.catalog-sidebar-toggle svg { width: 1rem; height: 1rem; flex-shrink: 0; }
}

/* ── Backdrop del drawer de filtros ── */
.catalog-filter-backdrop {
	position: fixed;
	inset: 0;
	z-index: 2550;
	background: rgba(4,10,16,0.48);
	backdrop-filter: blur(7px);
	opacity: 0;
	pointer-events: none;
	transition: opacity var(--transition);
}
.catalog-filter-backdrop.is-open {
	opacity: 1;
	pointer-events: auto;
}

/* ── Drawer lateral de filtros (mobile) ── */
@media (max-width: 767px) {
	.catalog-sidebar {
		position: fixed;
		top: 0;
		left: -10px;
		bottom: 0;
		z-index: 2600;
		width: min(85vw, 22rem);
		background: var(--panel);
		box-shadow: 4px 0 32px rgba(10,37,53,0.18);
		transform: translateX(-100%);
		transition: transform 0.28s cubic-bezier(0.4,0,0.2,1);
		overflow-y: auto;
		overflow-x: hidden;
		overscroll-behavior: contain;
		padding: 1.1rem 1rem 2rem;
		display: flex !important;
		flex-direction: column;
		gap: 1rem;
	}
	.catalog-sidebar.is-open {
		transform: translateX(0);
	}
	/* Cabecera del drawer */
	.catalog-sidebar-header {
		display: flex;
		align-items: center;
		justify-content: space-between;
		gap: 1rem;
		padding-bottom: 0.85rem;
		border-bottom: 1px solid var(--line);
		flex-shrink: 0;
	}
	.catalog-sidebar-header h2 {
		margin: 0;
		font-size: 1rem;
		font-weight: 800;
		letter-spacing: -0.02em;
	}
	.catalog-sidebar-close {
		width: 2.4rem;
		height: 2.4rem;
		border: 1px solid var(--line);
		border-radius: 999px;
		background: transparent;
		color: var(--muted);
		cursor: pointer;
		display: inline-grid;
		place-items: center;
		flex-shrink: 0;
		transition: background var(--transition), color var(--transition);
	}
	.catalog-sidebar-close:hover { background: rgba(18,172,231,0.08); color: var(--brand-deep); }
	.catalog-sidebar-close svg { width: 1rem; height: 1rem; }
}
@media (min-width: 768px) {
	.catalog-sidebar-header,
	.catalog-sidebar-close { display: none; }
	.catalog-filter-backdrop { display: none !important; }
}
/* === FULLGLASS: LAYERS / OVERLAYS === */
/* Variables del carrito */
:root {
--cart-width: 480px;
--cart-base-color: var(--light-color);
--cart-text-color: var(--dark-color);
--cart-header-height: 4rem;
--cart-line-height: 5rem;
}

/* Overlay de filtros / búsqueda */
.fondo_black_header,
.fondo_black_header_menu {
background-color: rgba(0,0,0,0.55);
width: 100%;
height: 100vh;
position: fixed;
z-index: 180;
top: 0;
left: 0;
backdrop-filter: blur(8px);
-webkit-backdrop-filter: blur(8px);
transition: opacity 0.3s ease, visibility 0.3s ease;
opacity: 0;
visibility: hidden;
pointer-events: none;
display: none;
}
.fondo_black_header[style*="display: block;"],
.fondo_black_header.is_hover {
display: block !important;
opacity: 1;
visibility: visible;
pointer-events: auto;
}
.fondo_black_header_menu { z-index: 1000; }
.fondo_black_header_menu.is_hover {
display: block !important;
opacity: 1;
visibility: visible;
pointer-events: auto;
}

/* Overlay del carrito */
.fondo_black_cart {
background-color: rgba(0,0,0,0.65);
width: 100%;
height: 100%;
display: none;
position: fixed;
z-index: 1100;
top: 0;
left: 0;
backdrop-filter: blur(8px);
-webkit-backdrop-filter: blur(8px);
}
.fondo_black_cart.is-open { display: block; }

/* Overlay blanco (búsqueda legacy) */
.fondo_white_header {
background-color: rgba(2,2,2,0.3);
width: 100%;
height: calc(100% - 75px);
display: none;
position: fixed;
z-index: 180;
top: 75px;
left: 0;
}

/* Layer cargando */
.layer_cargando {
position: fixed;
z-index: 200000;
width: 100%;
height: 100%;
background-color: rgba(255,255,255,0.92);
text-align: center;
display: none;
}
.spinner {
width: 40px;
height: 40px;
position: relative;
margin: 0 auto;
margin-top: 100px;
margin-bottom: 50px;
}
.double-bounce1,
.double-bounce2 {
width: 100%;
height: 100%;
border-radius: 50%;
background-color: var(--brand);
opacity: 0.6;
position: absolute;
top: 0;
left: 0;
animation: sk-bounce 2s infinite ease-in-out;
}
.double-bounce2 { animation-delay: -1.0s; }
@keyframes sk-bounce {
0%, 100% { transform: scale(0); }
50%       { transform: scale(1); }
}
.title_loading {
font-size: 1.2rem;
font-weight: 700;
color: var(--text);
margin-bottom: 0.5rem;
}
.text_loading {
font-size: 0.9rem;
color: var(--muted);
max-width: 28rem;
margin: 0 auto;
padding: 0 1rem;
}

/* Toast e-mail */
.layer_mail_ok {
width: 300px;
position: fixed;
z-index: 8050;
bottom: 2rem;
left: 50%;
transform: translateX(-50%);
background: var(--brand);
color: #fff;
padding: 0.75rem 1.5rem;
border-radius: 0.75rem;
text-align: center;
display: none;
}

/* Info emergente */
.info_emergente { display: none; }

/* === CARRITO LATERAL (drawer contenedor) === */
.carro_lateral {
  width: var(--cart-width);
  height: 100%;
  position: fixed;
  top: 0;
  right: calc(var(--cart-width) * -1);
  z-index: 2500;
  transition: right 0.28s cubic-bezier(0.4,0,0.2,1), box-shadow 0.28s ease;
  box-shadow: none;
  overflow: hidden;
}
.carro_lateral.is-open {
  right: 0;
  box-shadow: -8px 0 48px rgba(10,42,61,0.18);
}
@media (max-width: 520px) {
  .carro_lateral { width: 100%; right: -100%; }
}

/* cart-panel: estructura interna del drawer */
.cart-panel {
  width: 100%;
  height: 100%;
  background: linear-gradient(180deg, rgba(255,255,255,0.98), var(--panel));
  display: grid;
  grid-template-rows: auto auto 1fr auto;
  overflow: hidden;
}
.cart-panel__top {
  display: flex;
  align-items: start;
  justify-content: space-between;
  gap: 1rem;
  padding: 1.25rem 1.15rem 1rem;
  border-bottom: 1px solid var(--line);
  background: linear-gradient(180deg, rgba(18,172,231,0.06), rgba(255,255,255,0.98));
}
.cart-panel__eyebrow {
  margin: 0 0 0.3rem;
  color: var(--brand-deep);
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}
.cart-panel__top h2 {
  margin: 0;
  font-size: 1.5rem;
  line-height: 1;
  letter-spacing: -0.04em;
}

/* Tabs carrito / favoritos */
.cart-tabs {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  border-bottom: 1px solid var(--line);
  background: rgba(18,172,231,0.05);
}
.cart-tab {
  min-height: 3rem;
  border: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.45rem;
  background: transparent;
  color: var(--muted);
  font-size: 0.74rem;
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  cursor: pointer;
  transition: background var(--transition), color var(--transition);
}
.cart-tab.is-active {
  background: rgba(255,255,255,0.92);
  color: var(--brand-strong);
}
.cart-tab__badge {
  min-width: 1.35rem;
  height: 1.35rem;
  padding-inline: 0.3rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 999px;
  background: var(--brand);
  color: #fff;
  font-size: 0.64rem;
  font-weight: 800;
  line-height: 1;
  box-shadow: 0 6px 14px rgba(18,172,231,0.22);
}

/* Body scrollable */
.cart-panel__body {
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: 0.85rem 1rem;
  display: grid;
  align-content: start;
  gap: 0.75rem;
}
.cart-empty {
  padding: 1rem;
  border-radius: 1rem;
  border: 1px dashed rgba(18,172,231,0.26);
  background: rgba(231,248,255,0.5);
  color: var(--accent-soft);
  font-size: 0.9rem;
  line-height: 1.5;
  margin: 0;
}
.cart-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  gap: 0.75rem;
}

/* Item del carrito */
.cart-item {
  display: grid;
  grid-template-columns: 4.25rem minmax(0,1fr) auto;
  gap: 0.75rem;
  align-items: start;
  padding: 0.75rem;
  border-radius: 1.1rem;
  border: 1px solid rgba(18,172,231,0.1);
  background: linear-gradient(180deg, rgba(255,255,255,0.98), rgba(244,250,253,0.96));
  box-shadow: 0 8px 20px rgba(10,37,53,0.06);
}
.cart-item__media {
  aspect-ratio: 1 / 1;
  border-radius: 0.9rem;
  overflow: hidden;
  background: linear-gradient(180deg, rgba(18,172,231,0.08), rgba(18,172,231,0.03));
  display: grid;
  place-items: center;
}
.cart-item__media img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}
.cart-item__copy {
  min-width: 0;
  display: grid;
  gap: 0.12rem;
}
.cart-item__name {
  margin: 0;
  font-size: 0.9rem;
  font-weight: 700;
  line-height: 1.25;
}
.cart-item__sku {
  margin: 0;
  color: var(--muted);
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.cart-item__price {
  margin: 0.2rem 0 0;
  color: var(--brand-strong);
  font-size: 0.9rem;
  font-weight: 800;
  letter-spacing: -0.02em;
}
.cart-item__controls {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.6rem;
  margin-top: 0.45rem;
}
.cart-item__qty {
  display: inline-flex;
  align-items: center;
  border-radius: 999px;
  border: 1px solid rgba(18,172,231,0.18);
  background: rgba(255,255,255,0.96);
  overflow: hidden;
}
.cart-item__qty button {
  width: 1.9rem;
  height: 1.9rem;
  border: 0;
  background: transparent;
  color: var(--brand-deep);
  cursor: pointer;
  display: inline-grid;
  place-items: center;
  transition: background var(--transition), color var(--transition);
}
.cart-item__qty button:hover { background: rgba(18,172,231,0.12); color: var(--brand-strong); }
.cart-item__qty-value {
  min-width: 2rem;
  padding-inline: 0.1rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--brand-strong);
  font-size: 0.85rem;
  font-weight: 800;
}
.cart-item__line-total {
  color: var(--brand-deep);
  font-size: 0.85rem;
  font-weight: 800;
  white-space: nowrap;
}
.cart-item__meta {
  display: flex;
  flex-direction: column;
  align-items: end;
  gap: 0.3rem;
}
.cart-item__remove {
  width: 1.8rem;
  height: 1.8rem;
  border: 0;
  border-radius: 999px;
  background: transparent;
  color: var(--muted);
  cursor: pointer;
  display: inline-grid;
  place-items: center;
  transition: background var(--transition), color var(--transition);
}
.cart-item__remove:hover { background: rgba(18,172,231,0.1); color: var(--brand-deep); }
.cart-item__remove svg { width: 0.9rem; height: 0.9rem; }

/* Footer del carrito lateral */
.cart-footer {
  display: grid;
  gap: 0.85rem;
  padding: 0.9rem 1rem 1rem;
  border-top: 1px solid var(--line);
  background: rgba(231,248,255,0.45);
}
.cart-footer__meta {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 1rem;
}
.cart-footer__label {
  margin: 0;
  color: var(--muted);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.cart-footer__value {
  margin: 0.25rem 0 0;
  font-size: 1.05rem;
  font-weight: 800;
  letter-spacing: -0.03em;
}
.cart-footer__hint {
  margin: 0;
  color: var(--muted);
  font-size: 0.82rem;
  text-align: right;
}
.cart-footer__actions {
  display: grid;
  grid-template-columns: repeat(2, minmax(0,1fr));
  gap: 0.7rem;
}
.cart-footer__button {
  min-height: 2.85rem;
  border: 0;
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding-inline: 0.85rem;
  font-size: 0.78rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  cursor: pointer;
  transition: transform var(--transition), background var(--transition), color var(--transition), box-shadow var(--transition);
}
.cart-footer__button:hover { transform: translateY(-1px); }
.cart-footer__button--ghost {
  border: 1px solid rgba(18,172,231,0.22);
  background: rgba(255,255,255,0.96);
  color: var(--brand-deep);
}
.cart-footer__button--ghost:hover { background: rgba(18,172,231,0.07); }
.cart-footer__button--primary {
  background: linear-gradient(135deg, #1eb9ef 0%, var(--brand) 48%, var(--brand-deep) 100%);
  color: #fff;
  box-shadow: 0 12px 24px rgba(18,172,231,0.22);
}

/* === PÁGINA CARRITO COMPLETO === */
.cart-page {
  padding-top: calc(var(--header-height) + 2rem);
}
.cart-page__hero {
  display: grid;
  gap: 0.6rem;
  margin-top: 1rem;
}
.cart-page__hero h1 {
  margin: 0;
  font-size: clamp(2rem, 4vw, 3rem);
  line-height: 0.98;
  letter-spacing: -0.06em;
}
.cart-page__hero p {
  margin: 0;
  color: var(--muted);
  line-height: 1.55;
  max-width: 42rem;
}
.cart-page__layout {
  display: grid;
  gap: 1rem;
  align-items: start;
  margin-top: 1.2rem;
}
.cart-page__items,
.cart-page__summary {
  border-radius: 1.5rem;
  border: 1px solid var(--line);
  background: var(--panel);
  box-shadow: 0 16px 32px rgba(10,37,53,0.05);
}
.cart-page__items {
  padding: 1rem;
  display: grid;
  gap: 0.85rem;
}
.cart-page__items-header,
.cart-page__summary-header {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 1rem;
}
.cart-page__items-header h2,
.cart-page__summary-header h2 {
  margin: 0;
  font-size: 1.2rem;
  font-weight: 800;
  letter-spacing: -0.03em;
}
.cart-page__items-header p,
.cart-page__summary-header p {
  margin: 0.2rem 0 0;
  color: var(--muted);
  font-size: 0.88rem;
}
.cart-page__count {
  color: var(--brand-deep);
  font-size: 0.8rem;
  font-weight: 800;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  white-space: nowrap;
}
.cart-page__list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  gap: 0.85rem;
}
.cart-page__item {
  display: grid;
  grid-template-columns: 5.5rem minmax(0, 1fr);
  gap: 0.9rem;
  padding: 0.9rem;
  border-radius: 1.15rem;
  border: 1px solid rgba(15,44,60,0.08);
  background: linear-gradient(180deg, rgba(255,255,255,0.98), rgba(247,250,252,0.94));
}
.cart-page__item-media {
  aspect-ratio: 1 / 1;
  border-radius: 1rem;
  overflow: hidden;
  background: linear-gradient(180deg, rgba(18,172,231,0.08), rgba(18,172,231,0.03));
  display: grid;
  place-items: center;
}
.cart-page__item-media img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}
.cart-page__item-copy {
  min-width: 0;
  display: grid;
  gap: 0.45rem;
}
.cart-page__item-top {
  display: flex;
  align-items: start;
  justify-content: space-between;
  gap: 0.8rem;
}
.cart-page__item-name,
.cart-page__item-sku,
.cart-page__item-price,
.cart-page__item-variant {
  margin: 0;
}
.cart-page__item-name {
  font-size: 1rem;
  font-weight: 800;
  line-height: 1.28;
}
.cart-page__item-sku,
.cart-page__item-variant {
  color: var(--muted);
  font-size: 0.84rem;
}
.cart-page__item-price {
  color: var(--brand-deep);
  font-size: 1rem;
  font-weight: 800;
}
.cart-page__item-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.85rem;
}
.cart-page__qty {
  display: inline-flex;
  align-items: center;
  border-radius: 999px;
  border: 1px solid rgba(18,172,231,0.18);
  background: #fff;
  overflow: hidden;
}
.cart-page__qty button {
  width: 2.2rem;
  height: 2.2rem;
  border: 0;
  background: transparent;
  color: var(--brand-deep);
  cursor: pointer;
  display: inline-grid;
  place-items: center;
  transition: background var(--transition), color var(--transition);
}
.cart-page__qty button:hover { background: rgba(18,172,231,0.1); color: var(--brand-strong); }
.cart-page__qty span {
  min-width: 2.3rem;
  display: inline-flex;
  justify-content: center;
  font-size: 0.94rem;
  font-weight: 800;
  color: var(--brand-strong);
}
.cart-page__item-remove {
  border: 0;
  background: transparent;
  color: var(--muted);
  font-size: 0.84rem;
  font-weight: 700;
  cursor: pointer;
  transition: color var(--transition), transform var(--transition);
}
.cart-page__item-remove:hover { color: var(--brand-deep); transform: translateY(-1px); }
.cart-page__line-total {
  color: var(--brand-strong);
  font-size: 0.95rem;
  font-weight: 800;
}
.cart-page__empty {
  padding: 1.2rem;
  border-radius: 1.2rem;
  border: 1px dashed rgba(18,172,231,0.24);
  background: rgba(231,248,255,0.5);
  display: grid;
  gap: 0.9rem;
  text-align: center;
}
.cart-page__empty h3 { margin: 0; font-size: 1.2rem; font-weight: 800; }
.cart-page__empty p { margin: 0; color: var(--muted); }
.cart-page__summary {
  padding: 1rem;
  display: grid;
  gap: 1rem;
  position: sticky;
  top: calc(var(--header-height) + 1rem);
}
.cart-page__summary-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  gap: 0.75rem;
}
.cart-page__summary-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  color: var(--accent-soft);
  font-size: 0.94rem;
  margin: 0;
}
.cart-page__summary-row strong {
  font-size: 1.3rem;
  letter-spacing: -0.03em;
}
.cart-page__coupon {
  display: grid;
  grid-template-columns: minmax(0,1fr) auto;
  border: 1px solid rgba(15,44,60,0.12);
  border-radius: 0.95rem;
  overflow: hidden;
  background: #fff;
}
.cart-page__coupon input {
  min-width: 0;
  border: 0;
  padding: 0.85rem 0.95rem;
  outline: none;
  font: inherit;
}
.cart-page__coupon button {
  min-width: 7rem;
  border: 0;
  background: rgba(18,172,231,0.1);
  color: var(--brand-deep);
  font-weight: 800;
  cursor: pointer;
}
.cart-page__summary-note {
  margin: 0;
  color: var(--muted);
  font-size: 0.86rem;
  line-height: 1.5;
}
.cart-page__summary-actions {
  display: grid;
  gap: 0.7rem;
}
.cart-page__summary-actions .button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 3rem;
  border-radius: 999px;
  font-size: 0.85rem;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  text-decoration: none;
  cursor: pointer;
  transition: transform var(--transition), box-shadow var(--transition);
}
.cart-page__summary-actions .button:hover { transform: translateY(-1px); }
.cart-page__summary-actions .button--primary {
  background: linear-gradient(135deg, #1eb9ef 0%, var(--brand) 48%, var(--brand-deep) 100%);
  color: #fff;
  border: 0;
  box-shadow: 0 14px 28px rgba(18,172,231,0.22);
}
.cart-page__summary-actions .button--secondary {
  background: rgba(17,19,21,0.96);
  color: #fff;
  border: 1px solid rgba(17,19,21,0.96);
}
/* Botones del resumen (versión AJAX via Plugins/get_cart.html) */
.cart-page__btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 3rem;
  border-radius: 999px;
  font-size: 0.85rem;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  text-decoration: none;
  border: 0;
  cursor: pointer;
  transition: transform var(--transition), box-shadow var(--transition);
}
.cart-page__btn:hover { transform: translateY(-1px); }
.cart-page__btn--primary {
  background: linear-gradient(135deg, #1eb9ef 0%, var(--brand) 48%, var(--brand-deep) 100%);
  color: #fff;
  box-shadow: 0 14px 28px rgba(18,172,231,0.22);
}
.cart-page__btn--secondary {
  background: rgba(17,19,21,0.96);
  color: #fff;
}
.cart-page__min-notice {
  margin: 0;
  padding: 0.7rem 0.9rem;
  border-radius: 0.85rem;
  background: rgba(18,172,231,0.08);
  color: var(--brand-deep);
  font-size: 0.84rem;
  text-align: center;
  font-weight: 600;
}
@media (min-width: 768px) {
  .cart-page__layout {
    grid-template-columns: minmax(0,1fr) minmax(18rem,22rem);
  }
  .cart-page__item {
    grid-template-columns: 6.2rem minmax(0,1fr);
  }
}
@media (min-width: 1200px) {
  .cart-page {
    padding-top: calc(var(--header-height) + 2.35rem);
  }
}

/* === LOGIN PAGE === */
.login-page { padding-top: calc(var(--header-height) + 2rem); }

.login-layout {
  display: grid;
  gap: 1.2rem;
  margin-top: 1rem;
  align-items: stretch;
}

.login-showcase,
.login-panel {
  height: 100%;
  border-radius: 1.7rem;
  border: 1px solid var(--line);
  background: var(--panel);
  box-shadow: 0 22px 42px rgba(10,37,53,0.06);
}

.login-showcase {
  padding: 1.35rem;
  background: linear-gradient(135deg, rgba(10,170,231,0.08), rgba(255,255,255,0.98) 42%, rgba(231,248,255,0.94));
  display: grid;
  gap: 1rem;
}

.login-showcase h1 {
  margin: 0;
  font-size: clamp(2rem, 4vw, 3rem);
  line-height: 0.96;
  letter-spacing: -0.06em;
}

.login-showcase p {
  margin: 0.55rem 0 0;
  max-width: 40rem;
  color: var(--muted);
  line-height: 1.58;
}

.login-benefits { display: grid; gap: 0.75rem; }

.login-benefit {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 0.75rem;
  align-items: start;
  padding: 0.95rem 1rem;
  border-radius: 1.15rem;
  background: rgba(255,255,255,0.9);
  border: 1px solid rgba(18,172,231,0.12);
}

.login-benefit .icon { width: 1.35rem; height: 1.35rem; color: var(--brand-deep); margin-top: 0.08rem; }

.login-benefit strong,
.login-professional-card h2 {
  display: block;
  margin-bottom: 0.18rem;
  font-size: 0.96rem;
  font-weight: 800;
  letter-spacing: -0.02em;
}

.login-benefit p,
.login-professional-card p,
.login-panel__copy,
.login-field label span,
.login-form__row a,
.login-form__row label,
.login-panel__footnote {
  margin: 0;
  color: var(--muted);
  font-size: 0.9rem;
  line-height: 1.5;
}

.login-professional-card {
  padding: 1rem;
  border-radius: 1.2rem;
  background: linear-gradient(135deg, rgba(11,48,65,0.96), rgba(7,141,193,0.92));
  color: #fff;
  display: grid;
  gap: 0.75rem;
}

.login-professional-card p { color: rgba(255,255,255,0.82); }

.login-panel { 
	padding: 1.2rem; 
	display: grid; gap: 0;
}
.login-panel.login { 
	grid-template-rows: 70px 70px 130px auto; 
}
.login-panel > * { min-width: 0; }

.login-tabs {
  display: grid;
  grid-template-columns: repeat(2, minmax(0,1fr));
  gap: 0.45rem;
  padding: 0.3rem;
  border-radius: 999px;
  background: rgba(231,248,255,0.8);
  max-height: 55px;
}

.login-tab {
  min-height: 2.9rem;
  border: 0;
  border-radius: 999px;
  background: transparent;
  color: var(--muted);
  font-size: 0.82rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  cursor: pointer;
  transition: background var(--transition), color var(--transition), box-shadow var(--transition), transform var(--transition);
}

.login-tab.is-active,
.login-tab:hover,
.login-tab:focus-visible {
  background: #fff;
  color: var(--brand-strong);
  box-shadow: 0 12px 24px rgba(10,37,53,0.06);
  transform: translateY(-1px);
}

.login-subtabs {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.25rem;
  border-radius: 999px;
  background: rgba(15,44,60,0.05);
  width: fit-content;
  max-width: 100%;
  max-height: 55px;
}

.login-subtab {
  min-height: 2.45rem;
  padding-inline: 0.95rem;
  border: 0;
  border-radius: 999px;
  background: transparent;
  color: var(--muted);
  font-size: 0.78rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  cursor: pointer;
  transition: background var(--transition), color var(--transition), box-shadow var(--transition);
}

.login-subtab.is-active,
.login-subtab:hover,
.login-subtab:focus-visible {
  background: #fff;
  color: var(--brand-strong);
  box-shadow: 0 8px 18px rgba(10,37,53,0.06);
}

.login-panel__eyebrow {
  margin: 0;
  color: var(--brand-deep);
  font-size: 0.76rem;
  font-weight: 800;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

.login-panel__title {
  margin: 0.25rem 0 0;
  font-size: clamp(1.7rem, 3vw, 2.4rem);
  letter-spacing: -0.05em;
  line-height: 0.98;
}

.login-panel__copy { margin-top: 0.5rem; }

.login-form { display: grid; gap: 0.85rem; }

.login-field-row { display: grid; gap: 0.85rem; }
.login-field-row[hidden] { display: none; }

.login-field { display: grid; gap: 0.45rem; }
.login-field[hidden] { display: none; }

.login-field label span {
  display: block;
  color: var(--accent-soft);
  font-size: 0.85rem;
  font-weight: 700;
}

.login-field input,
.login-field select {
  width: 100%;
  min-height: 3rem;
  padding: 0.85rem 0.95rem;
  border: 1px solid rgba(15,44,60,0.12);
  border-radius: 1rem;
  background: #fff;
  color: var(--text);
  outline: none;
  font: inherit;
  transition: border-color var(--transition), box-shadow var(--transition);
}

.login-field input:focus,
.login-field select:focus {
  border-color: rgba(18,172,231,0.26);
  box-shadow: 0 0 0 4px rgba(18,172,231,0.08);
}

.login-field input::placeholder { color: rgba(80,98,111,0.8); }

.login-field textarea {
  width: 100%;
  min-height: 8rem;
  padding: 0.85rem 0.95rem;
  border: 1px solid rgba(15,44,60,0.12);
  border-radius: 1rem;
  background: #fff;
  color: var(--text);
  outline: none;
  font: inherit;
  resize: vertical;
  transition: border-color var(--transition), box-shadow var(--transition);
}
.login-field textarea:focus {
  border-color: rgba(18,172,231,0.26);
  box-shadow: 0 0 0 4px rgba(18,172,231,0.08);
}
.login-field textarea::placeholder { color: rgba(80,98,111,0.8); }

.login-status {
  margin: 0;
  padding: 0.8rem 0.95rem;
  border-radius: 1rem;
  font-size: 0.9rem;
  font-weight: 600;
  line-height: 1.5;
  border: 1px solid transparent;
}

.login-status[hidden] { display: none; }

.login-status.is-success {
  border-color: rgba(17,155,106,0.14);
  background: rgba(225,247,239,0.94);
  color: #0e7350;
}

.login-status.is-error {
  border-color: rgba(190,62,62,0.14);
  background: rgba(255,239,239,0.96);
  color: #9f2f2f;
}

.login-form__row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.8rem;
}

.login-form__row label {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  color: var(--accent-soft);
  font-size: 0.88rem;
  font-weight: 600;
  cursor: pointer;
}

.login-form__row--stack {
  display: grid;
  justify-content: stretch;
  gap: 0.7rem;
}

.login-form__row--stack label { align-items: start; line-height: 1.45; }

.login-form__row input[type="checkbox"] {
  width: 1rem;
  height: 1rem;
  accent-color: var(--brand);
  flex-shrink: 0;
}

.login-form__submit {
  width: 100%;
  min-height: 3.15rem;
  border: 0;
  border-radius: 999px;
  background: linear-gradient(135deg, #1eb9ef 0%, var(--brand) 48%, var(--brand-deep) 100%);
  color: #fff;
  font-size: 0.9rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  cursor: pointer;
  box-shadow: 0 18px 34px rgba(18,172,231,0.24);
  transition: transform var(--transition), box-shadow var(--transition), filter var(--transition);
}

.login-form__submit:hover,
.login-form__submit:focus-visible {
  transform: translateY(-1px);
  box-shadow: 0 22px 38px rgba(18,172,231,0.28);
  filter: saturate(1.04);
}

.login-note,
.login-success {
  padding: 1rem;
  border-radius: 1.2rem;
  border: 1px solid rgba(15,44,60,0.08);
  background: linear-gradient(180deg, rgba(255,255,255,0.98), rgba(244,250,253,0.95));
  display: grid;
  gap: 0.45rem;
}

.login-success {
  border-color: rgba(18,172,231,0.12);
  background: linear-gradient(180deg, rgba(233,247,252,0.98), rgba(255,255,255,0.96));
}

.login-success[hidden] { display: none; }
.login-form[hidden] { display: none; }

.login-success h3 { margin: 0; font-size: 1rem; font-weight: 800; letter-spacing: -0.03em; }
.login-success p { margin: 0; color: var(--muted); font-size: 0.9rem; line-height: 1.55; }

.login-panel__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  align-items: center;
  justify-content: space-between;
  margin-top: 0.75rem;
}

.login-panel__footnote { font-size: 0.84rem; }

@media (min-width: 1200px) {
  .login-page { padding-top: calc(var(--header-height) + 2.4rem); }
  .login-field-row { grid-template-columns: repeat(2, minmax(0,1fr)); }
  .login-layout { grid-template-columns: minmax(0,1.04fr) minmax(22rem,31rem); }
}

/* === CATALOG / LISTING PAGE (de la maquetación) === */
.catalog-page { padding-top: calc(var(--header-height) + 2.1rem); }

.catalog-layout {
  display: grid;
  gap: 1.2rem;
  align-items: start;
}

.catalog-sidebar { display: grid; gap: 1rem; }

.filter-card {
  padding: 1.15rem;
  border-radius: 1.4rem;
  border: 1px solid var(--line);
  background: var(--panel);
  box-shadow: 0 18px 36px rgba(10,37,53,0.06);
}

.filter-card__title {
  margin: 0 0 0.9rem;
  font-size: 0.94rem;
  font-weight: 800;
  letter-spacing: -0.02em;
}

.filter-tree,
.brand-list { display: grid; gap: 0.55rem; }

.filter-group {
  border-top: 1px solid rgba(15,44,60,0.08);
  padding-top: 0.7rem;
}

.filter-group:first-child { border-top: 0; padding-top: 0; }

.filter-group details[open] summary { color: var(--brand-strong); }

.filter-group summary {
  list-style: none;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  cursor: pointer;
  color: var(--accent-soft);
  font-size: 0.8rem;
  font-weight: 800;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

.filter-group summary::-webkit-details-marker { display: none; }

.filter-group__items {
  display: grid;
  gap: 0.35rem;
  margin-top: 0.8rem;
  padding-left: 0.2rem;
}

.filter-link {
  display: block;
  padding: 0.55rem 0.7rem;
  border-radius: 0.8rem;
  color: var(--muted);
  font-size: 0.83rem;
  font-weight: 600;
  text-decoration: none;
  transition: background var(--transition), color var(--transition), transform var(--transition);
}

.filter-link.is-active,
.filter-link:hover,
.filter-link:focus-visible {
  background: rgba(18,172,231,0.1);
  color: var(--brand-deep);
  transform: translateX(2px);
}

.catalog-content { display: grid; gap: 1rem; }

.catalog-toolbar {
  display: grid;
  gap: 0.85rem;
  align-items: center;
  padding: 1rem 1.1rem;
  border: 1px solid var(--line);
  border-radius: 1.4rem;
  background: linear-gradient(180deg,rgba(255,255,255,0.96),rgba(248,251,252,0.92));
  box-shadow: 0 14px 28px rgba(10,37,53,0.05);
}

.catalog-toolbar__meta { display: grid; gap: 0.2rem; }

.catalog-toolbar__eyebrow {
  margin: 0;
  color: var(--muted);
  font-size: 0.74rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.catalog-toolbar__title {
  margin: 0;
  font-size: clamp(1.1rem, 2vw, 1.35rem);
  font-weight: 800;
  letter-spacing: -0.03em;
}

.catalog-toolbar__count {
  margin: 0;
  color: var(--muted);
  font-size: 0.9rem;
}

.catalog-toolbar__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.7rem;
  align-items: center;
  justify-content: space-between;
}

.catalog-sort {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0.4rem 0.45rem 0.4rem 0.9rem;
  border-radius: 999px;
  border: 1px solid rgba(15,44,60,0.12);
  background: #fff;
  color: var(--accent-soft);
}

.catalog-sort span {
  font-size: 0.76rem;
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--muted);
  white-space: nowrap;
}

.catalog-sort select {
  border: 0;
  background: transparent;
  color: var(--text);
  outline: none;
  font-weight: 700;
  font: inherit;
}

.catalog-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0,1fr));
  gap: 1rem;
}

.catalog-grid .product-card { height: 100%; }

.catalog-footer-note {
  margin: 0;
  color: var(--muted);
  font-size: 0.85rem;
  text-align: right;
}

/* Filtros: skeleton mientras carga */
.filter-skeleton { height: 1rem; border-radius: 0.5rem; }
.filter-skeleton-title { height: 1.2rem; width: 60%; border-radius: 0.5rem; }
.filter-skeleton-line { height: 1px; background: var(--line) !important; }

@media (min-width: 768px) {
  .catalog-layout { grid-template-columns: minmax(15rem,17.5rem) minmax(0,1fr); gap: 1.25rem; }
  .catalog-toolbar { grid-template-columns: minmax(0,1fr) auto; }
  .catalog-grid { grid-template-columns: repeat(3, minmax(0,1fr)); }
}

@media (min-width: 1200px) {
  .catalog-page { padding-top: calc(var(--header-height) + 2.5rem); }
  .catalog-layout { grid-template-columns: minmax(16.5rem,18rem) minmax(0,1fr); gap: 1.45rem; }
  .catalog-grid { grid-template-columns: repeat(5, minmax(0,1fr)); gap: 1.1rem; }
}

/* menu_categories en el sidebar del catálogo — estética filter-link */
.catalog-cat-link {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  padding: 0.55rem 0.7rem;
  border-radius: 0.8rem;
  color: var(--muted);
  font-size: 0.83rem;
  font-weight: 600;
  text-decoration: none;
  transition: background var(--transition), color var(--transition), transform var(--transition);
}
.catalog-cat-link:hover,
.catalog-cat-link:focus-visible,
.catalog-cat-link.is-active {
  background: rgba(18,172,231,0.1);
  color: var(--brand-deep);
  transform: translateX(2px);
}
.catalog-cat-link.is-active {
  font-weight: 700;
}
.catalog-cat-link svg {
  width: 0.75rem;
  height: 0.75rem;
  flex-shrink: 0;
  opacity: 0.4;
}
.catalog-cat-links { display: grid; gap: 0.15rem; }

/* Cupón activo en carrito */
.cart-page__coupon-active {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  padding: 0.6rem 0.85rem;
  border-radius: 0.95rem;
  border: 1px solid rgba(18,172,231,0.22);
  background: rgba(231,248,255,0.7);
}
.cart-page__coupon-code {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  font-size: 0.84rem;
  font-weight: 700;
  color: var(--brand-deep);
}
.cart-page__coupon-code svg { flex-shrink: 0; }
.cart-page__coupon-remove {
  border: 0;
  background: transparent;
  color: var(--muted);
  font-size: 0.78rem;
  font-weight: 700;
  cursor: pointer;
  padding: 0.25rem 0.5rem;
  border-radius: 999px;
  transition: background var(--transition), color var(--transition);
}
.cart-page__coupon-remove:hover {
  background: rgba(197,0,15,0.08);
  color: #c5000f;
}

/* === FLOAT ICONS () === */
.float_icons {
	position: fixed;
	right: 0.5rem;
	bottom: 5rem;
	z-index: 2499;
	width: 3.5rem;
	gap: 0.5rem;
	display: flex;
	justify-content: center;
	align-items: center;
	flex-direction: column;
}

/* app_button variants usados en float_icons */
.app_button.light {
	background: var(--light-color);
	color: var(--dark-color);
	border: 1px solid var(--light-color-shade);
}
.app_button.icon-only {
	width: 3rem;
	height: 3rem;
	padding: 0;
	display: inline-grid;
	place-items: center;
	min-width: unset;
}
.app_button.svg-xs svg { width: 1.1rem; height: 1.1rem; }
.app_button.svg-rotate-180 svg { transform: rotate(180deg); }
.login-professional-field[hidden] { display: none; }