/*
 * Componentes: iconos SVG, carrito lateral, modal de bienvenida,
 * botón flotante de WhatsApp y carrusel de reseñas.
 */

/* ---------- Iconos SVG ---------- */

.svg-icon {
	width: 22px;
	height: 22px;
	display: inline-block;
	vertical-align: middle;
	flex-shrink: 0;
}

/* ---------- Carrito lateral (drawer) ---------- */

.cart-drawer {
	position: fixed;
	top: 0;
	right: 0;
	bottom: 0;
	width: min(420px, 92vw);
	background: var(--surface);
	border-left: 1px solid var(--outline-variant);
	z-index: 95;
	transform: translateX(100%);
	transition: transform var(--duration-fast) var(--ease-out-expo);
	display: flex;
	flex-direction: column;
}

.cart-drawer.is-open {
	transform: translateX(0);
}

.cart-drawer-backdrop,
.welcome-backdrop {
	position: fixed;
	inset: 0;
	background: rgb(27 28 28 / 0.35);
	z-index: 90;
	opacity: 0;
	transition: opacity var(--duration-fast) ease;
}

.cart-drawer-backdrop.is-open,
.welcome-backdrop.is-open {
	opacity: 1;
}

.cart-drawer-head {
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding: calc(var(--unit) * 3) var(--gutter);
	border-bottom: 1px solid var(--outline-variant);
}

/*
 * Solo la lista de piezas se desplaza: el subtotal y los botones quedan
 * anclados abajo, siempre a la vista. El truco es el min-height: 0 en cada
 * eslabón de la columna flexible; sin él ninguno puede encoger y el panel
 * entero acaba desplazándose.
 */
.cart-drawer-body {
	flex: 1;
	min-height: 0;
	overflow: hidden;
	padding: var(--gutter);
	display: flex;
	flex-direction: column;
}

.cart-drawer-body .widget_shopping_cart_content {
	display: flex;
	flex-direction: column;
	flex: 1;
	min-height: 0;
}

/* Lista de piezas: el único bloque que se desplaza. */
.mini-cart-list {
	list-style: none;
	flex: 1 1 auto;
	min-height: 0;
	overflow-y: auto;
	overscroll-behavior: contain;
	margin: 0;
	padding: 0;
}

.mini-cart-item {
	display: flex;
	align-items: center;
	gap: calc(var(--unit) * 2);
	padding: calc(var(--unit) * 2) 0;
	border-bottom: 1px solid var(--outline-variant);
}

.mini-cart-thumb {
	flex-shrink: 0;
	width: 68px;
	overflow: hidden;
	background: var(--surface-container);
}

.mini-cart-thumb img {
	width: 68px;
	height: 90px;
	object-fit: cover;
	display: block;
	transition: transform var(--duration-slow) var(--ease-out-expo);
}

.mini-cart-item:hover .mini-cart-thumb img {
	transform: scale(1.05);
}

.mini-cart-info {
	flex: 1;
	min-width: 0;
	display: flex;
	flex-direction: column;
	gap: 4px;
}

.mini-cart-name {
	font-family: var(--font-body);
	font-size: 13px;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.06em;
	color: var(--on-surface);
	line-height: 1.4;
}

.mini-cart-meta {
	font-size: 12px;
	color: var(--on-surface-variant);
}

.mini-cart-meta:empty {
	display: none;
}

.mini-cart-meta dl.variation {
	display: flex;
	flex-wrap: wrap;
	gap: 2px 8px;
	margin: 0;
}

.mini-cart-meta dl.variation dd {
	margin: 0;
}

.mini-cart-meta dl.variation dd p {
	margin: 0;
	display: inline;
}

.mini-cart-qty {
	font-size: 13px;
	color: var(--on-surface-variant);
}

.mini-cart-qty .woocommerce-Price-amount {
	color: var(--on-surface);
}

.mini-cart-remove {
	flex-shrink: 0;
	color: var(--outline);
	padding: 6px;
	transition: color var(--duration-fast) ease;
}

.mini-cart-remove:hover {
	color: var(--error);
}

.mini-cart-remove .svg-icon {
	width: 18px;
	height: 18px;
}

/* Subtotal + nota */
.mini-cart-total {
	display: flex;
	justify-content: space-between;
	align-items: baseline;
	padding-top: var(--gutter);
	margin: 0;
}

.mini-cart-total .label-sm {
	color: var(--on-surface-variant);
}

.mini-cart-amount {
	font-family: var(--font-display);
	font-size: 24px;
}

.mini-cart-note {
	font-size: 12px;
	color: var(--outline);
	margin: calc(var(--unit) * 1) 0 calc(var(--unit) * 2);
}

/* Estado vacío del drawer */
.mini-cart-empty {
	margin: auto;
	text-align: center;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: calc(var(--unit) * 1);
	padding: calc(var(--unit) * 4) 0;
}

.mini-cart-empty-icon {
	width: 56px;
	height: 56px;
	color: var(--outline-variant);
	margin-bottom: calc(var(--unit) * 1);
}

.mini-cart-empty-title {
	font-family: var(--font-display);
	font-style: italic;
	font-size: 22px;
	margin: 0;
}

.mini-cart-empty-text {
	color: var(--on-surface-variant);
	font-size: 14px;
	margin: 0 0 calc(var(--unit) * 2);
}

/* El resumen y los botones quedan anclados al fondo del drawer,
   a lo ancho, con el margen lateral del cuerpo. */
.mini-cart-total,
.mini-cart-note,
.cart-drawer-body .widget_shopping_cart_content .woocommerce-mini-cart__buttons {
	flex: 0 0 auto;
}

.mini-cart-total {
	margin-top: auto;
	border-top: 1px solid var(--outline-variant);
}

.cart-drawer-body .widget_shopping_cart_content .woocommerce-mini-cart__buttons {
	display: flex;
	flex-direction: column;
	gap: calc(var(--unit) * 1.5);
	margin: 0;
}

.cart-drawer-body .widget_shopping_cart_content .woocommerce-mini-cart__buttons .button {
	display: flex;
	width: 100%;
	text-align: center;
	justify-content: center;
	padding: 15px 24px;
	margin: 0;
}

.cart-drawer-body .widget_shopping_cart_content .woocommerce-mini-cart__buttons .button:not(.checkout) {
	background: transparent;
	color: var(--on-surface);
}

.cart-drawer-body .widget_shopping_cart_content .woocommerce-mini-cart__buttons .button:not(.checkout):hover {
	background: var(--accent-strong);
	color: var(--on-accent);
	opacity: 1;
}

/* Offsets bajo la barra de administración de WordPress */
body.admin-bar .site-header {
	top: 32px;
}

body.admin-bar .cart-drawer {
	top: 32px;
}

@media (max-width: 782px) {
	body.admin-bar .site-header,
	body.admin-bar .cart-drawer {
		top: 46px;
	}
}

/* Bajo 600px WordPress deja de fijar su barra (se va con el scroll):
   si mantuviéramos el desplazamiento, el encabezado quedaría flotando. */
@media (max-width: 600px) {
	body.admin-bar .site-header,
	body.admin-bar .cart-drawer {
		top: 0;
	}
}

/* Estado vacío del catálogo */
.shop-empty {
	grid-column: 1 / -1;
	text-align: center;
	padding: calc(var(--unit) * 10) var(--margin-mobile) calc(var(--unit) * 12);
	display: flex;
	flex-direction: column;
	align-items: center;
}

.shop-empty-icon {
	width: 72px;
	height: 72px;
	color: var(--outline-variant);
	margin-bottom: calc(var(--unit) * 3);
}

.shop-empty .headline-lg {
	max-width: 18ch;
	margin-bottom: calc(var(--unit) * 2);
}

.shop-empty .body-lg {
	max-width: 46ch;
	margin: 0 0 calc(var(--unit) * 5);
}

.shop-empty-actions {
	display: flex;
	gap: var(--gutter);
	flex-wrap: wrap;
	justify-content: center;
}

/* ---------- Modal de bienvenida ---------- */

.welcome-modal {
	position: fixed;
	top: 50%;
	left: 50%;
	transform: translate(-50%, 48%) scale(0.98);
	opacity: 0;
	width: min(720px, 92vw);
	background: var(--surface);
	border: 1px solid var(--outline-variant);
	z-index: 96;
	transition: transform 500ms var(--ease-out-expo), opacity 400ms ease;
	display: grid;
}

.welcome-modal.has-image {
	grid-template-columns: 5fr 7fr;
}

.welcome-modal.is-open {
	transform: translate(-50%, -50%) scale(1);
	opacity: 1;
}

.welcome-media {
	overflow: hidden;
	min-height: 100%;
}

.welcome-media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.welcome-body {
	padding: clamp(var(--gutter), 4vw, 56px);
	display: flex;
	flex-direction: column;
	justify-content: center;
}

.welcome-body .headline-md {
	margin-bottom: calc(var(--unit) * 2);
}

.welcome-body p {
	color: var(--on-surface-variant);
	margin: 0 0 calc(var(--unit) * 3);
}

.welcome-close {
	position: absolute;
	top: calc(var(--unit) * 2);
	right: calc(var(--unit) * 2);
	z-index: 2;
	background: var(--surface);
	padding: 6px;
}

.welcome-dismiss {
	margin-top: calc(var(--unit) * 3);
	color: var(--on-surface-variant);
	text-decoration: underline;
	text-underline-offset: 4px;
	align-self: flex-start;
}

.welcome-dismiss:hover {
	color: var(--on-surface);
}

@media (max-width: 640px) {
	.welcome-modal.has-image {
		grid-template-columns: 1fr;
	}
	.welcome-media {
		max-height: 200px;
	}
}

/* ---------- Botón flotante de WhatsApp ---------- */

.whatsapp-fab {
	position: fixed;
	right: calc(var(--unit) * 3);
	bottom: calc(var(--unit) * 3);
	z-index: 80;
	width: 56px;
	height: 56px;
	border-radius: 999px;
	background: var(--accent-strong);
	color: var(--on-accent);
	display: flex;
	align-items: center;
	justify-content: center;
	box-shadow: 0 8px 24px rgb(0 0 0 / 0.18);
	transition: transform var(--duration-fast) var(--ease-out-expo), box-shadow var(--duration-fast) ease, background var(--duration-fast) ease, opacity var(--duration-normal) ease;
}

.whatsapp-fab:hover {
	transform: translateY(-3px);
	box-shadow: 0 12px 28px rgb(0 0 0 / 0.24);
	background: var(--accent-hover);
	color: var(--on-accent);
}

/* Punto de aviso: late hasta que se abre el chat. */
.whatsapp-dot {
	position: absolute;
	top: 4px;
	right: 4px;
	width: 12px;
	height: 12px;
	border-radius: 999px;
	background: var(--error);
	border: 2px solid var(--surface);
}

.whatsapp-dot::after {
	content: "";
	position: absolute;
	inset: -2px;
	border-radius: 999px;
	background: var(--error);
	animation: waPulse 2.2s var(--ease-out-expo) infinite;
}

@keyframes waPulse {
	0% {
		transform: scale(1);
		opacity: 0.55;
	}
	70%,
	100% {
		transform: scale(2.4);
		opacity: 0;
	}
}

/* Al abrir el chat el aviso desaparece. */
.whatsapp-fab.is-seen .whatsapp-dot {
	display: none;
}

/* Mensaje que asoma unos segundos */
.whatsapp-nudge {
	position: fixed;
	right: calc(var(--unit) * 3 + 68px);
	bottom: calc(var(--unit) * 3 + 15px);
	z-index: 80;
	background: var(--surface);
	border: 1px solid var(--outline-variant);
	box-shadow: 0 10px 26px rgb(0 0 0 / 0.14);
	padding: 9px 14px;
	font-family: var(--font-body);
	font-size: 13px;
	color: var(--on-surface);
	white-space: nowrap;
	opacity: 0;
	transform: translateX(10px) scale(0.96);
	transform-origin: right center;
	pointer-events: none;
	transition: opacity var(--duration-fast) ease, transform var(--duration-fast) var(--ease-out-expo);
}

.whatsapp-nudge.is-visible {
	opacity: 1;
	transform: translateX(0) scale(1);
}

/* Cola del globo */
.whatsapp-nudge::after {
	content: "";
	position: absolute;
	right: -5px;
	top: 50%;
	width: 8px;
	height: 8px;
	background: var(--surface);
	border-right: 1px solid var(--outline-variant);
	border-top: 1px solid var(--outline-variant);
	transform: translateY(-50%) rotate(45deg);
}

@media (prefers-reduced-motion: reduce) {
	.whatsapp-dot::after {
		animation: none;
	}
}

.whatsapp-fab .svg-icon {
	width: 28px;
	height: 28px;
}

/* Mini-chat de WhatsApp */
.wa-popup {
	position: fixed;
	right: calc(var(--unit) * 3);
	bottom: calc(var(--unit) * 3 + 72px);
	z-index: 85;
	width: min(340px, calc(100vw - 32px));
	background: var(--surface);
	border: 1px solid var(--outline-variant);
	box-shadow: 0 24px 48px -12px rgb(0 0 0 / 0.22);
	transform: translateY(12px) scale(0.97);
	transform-origin: bottom right;
	opacity: 0;
	transition: transform var(--duration-fast) var(--ease-out-expo), opacity var(--duration-fast) ease;
}

.wa-popup.is-open {
	transform: translateY(0) scale(1);
	opacity: 1;
}

.wa-popup-head {
	display: flex;
	align-items: center;
	gap: calc(var(--unit) * 1.5);
	padding: calc(var(--unit) * 2);
	background: var(--inverse-surface);
	color: var(--inverse-on-surface);
}

.wa-avatar {
	width: 40px;
	height: 40px;
	border-radius: 999px;
	background: var(--surface);
	display: flex;
	align-items: center;
	justify-content: center;
	overflow: hidden;
	flex-shrink: 0;
}

.wa-avatar img {
	width: 80%;
	height: auto;
}

.wa-identity {
	display: flex;
	flex-direction: column;
	line-height: 1.3;
	min-width: 0;
}

.wa-identity strong {
	font-family: var(--font-body);
	font-size: 14px;
	letter-spacing: 0.04em;
	text-transform: uppercase;
}

.wa-status {
	font-size: 11px;
	opacity: 0.7;
}

.wa-close {
	margin-left: auto;
	color: var(--inverse-on-surface);
	opacity: 0.8;
}

.wa-close:hover {
	opacity: 1;
}

.wa-close .svg-icon {
	width: 18px;
	height: 18px;
}

.wa-popup-body {
	padding: calc(var(--unit) * 2.5);
	background: var(--surface-container-low);
	min-height: 96px;
}

.wa-bubble {
	background: var(--surface-container-lowest);
	border: 1px solid var(--outline-variant);
	padding: calc(var(--unit) * 1.5) calc(var(--unit) * 2);
	font-size: 14px;
	line-height: 1.5;
	color: var(--on-surface);
	margin: 0;
	max-width: 90%;
	position: relative;
	animation: waBubble 500ms var(--ease-out-expo) both;
	animation-delay: 250ms;
}

@keyframes waBubble {
	from {
		opacity: 0;
		transform: translateY(8px);
	}
	to {
		opacity: 1;
		transform: translateY(0);
	}
}

.wa-popup-foot {
	display: flex;
	align-items: center;
	gap: calc(var(--unit) * 1);
	padding: calc(var(--unit) * 1.5) calc(var(--unit) * 2);
	border-top: 1px solid var(--outline-variant);
}

.wa-popup-foot input {
	flex: 1;
	border: 0;
	background: transparent;
	padding: 10px 0;
	font-family: var(--font-body);
	font-size: 14px;
	color: var(--on-surface);
	min-width: 0;
}

.wa-popup-foot input:focus {
	outline: none;
}

/* Sin padding ni borde: el botón general de envío trae 16/48 px y, aun con
   ancho fijo, ese relleno lo estiraba hasta convertirlo en píldora. */
.wa-popup-foot button {
	width: 42px;
	height: 42px;
	padding: 0;
	border: 0;
	border-radius: 999px;
	aspect-ratio: 1;
	background: var(--accent-strong);
	color: var(--on-accent);
	display: flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
	transition: transform var(--duration-fast) ease;
}

.wa-popup-foot button:hover {
	transform: scale(1.08);
}

.wa-popup-foot .svg-icon {
	width: 18px;
	height: 18px;
}

/* ---------- Carrusel de reseñas ---------- */

.reviews-carousel {
	position: relative;
}

.reviews-track {
	list-style: none;
	display: flex;
	gap: var(--gutter);
	overflow-x: auto;
	scroll-snap-type: x proximity;
	overscroll-behavior-x: contain;
	scroll-behavior: smooth;
	padding: calc(var(--unit) * 1) calc(var(--unit) * 1) calc(var(--unit) * 3);
	scrollbar-width: none;
}

.reviews-track::-webkit-scrollbar {
	display: none;
}

/*
 * Cinta continua: es un contenedor con scroll de verdad. El avance
 * automático mueve scrollLeft, así que se puede arrastrar y recorrer a mano,
 * y el ciclo cierra restando el ancho de un juego sin salto visible.
 */
.product-marquee {
	overflow-x: auto;
	overflow-y: hidden;
	scroll-behavior: auto;
	scrollbar-width: none;
	-ms-overflow-style: none;
	cursor: grab;
	padding-block: calc(var(--unit) * 1);
	-webkit-mask-image: linear-gradient(90deg, transparent 0, #000 5%, #000 95%, transparent 100%);
	mask-image: linear-gradient(90deg, transparent 0, #000 5%, #000 95%, transparent 100%);
}

.product-marquee::-webkit-scrollbar {
	display: none;
}

.product-marquee.is-dragging {
	cursor: grabbing;
}

.product-marquee.is-dragging a {
	pointer-events: none;
}

/*
 * El desplazamiento lo controla main.js con la Web Animations API.
 * La separación va como padding de cada pieza y NO como gap: así todas
 * ocupan exactamente lo mismo —incluida la última— y el juego se puede
 * repetir sin costura. Con gap, el hueco final no existe y el ciclo baila.
 */
ul.products.marquee-track {
	display: flex;
	width: max-content;
	gap: 0;
	margin: 0;
}

ul.products.marquee-track > li {
	flex: 0 0 calc(clamp(200px, 18vw, 270px) + var(--gutter));
	padding-right: var(--gutter);
}

/* Sin animación, la cinta se recorre a mano. */
@media (prefers-reduced-motion: reduce) {
	.product-marquee {
		overflow-x: auto;
		scrollbar-width: none;
	}
}

/* Carrusel de productos con flechas */
.product-carousel {
	position: relative;
}

/*
 * Enganche por proximidad, no obligatorio: con `mandatory` el navegador
 * reajusta la cinta cada vez que la página se mueve, y al hacer scroll
 * vertical con el puntero encima el carrusel daba tirones y llegaba a
 * secuestrar el scroll. `contain` evita además que el gesto horizontal se
 * escape al historial del navegador.
 */
ul.products.product-track {
	display: flex;
	overflow-x: auto;
	scroll-snap-type: x proximity;
	overscroll-behavior-x: contain;
	scroll-behavior: smooth;
	scrollbar-width: none;
	padding-bottom: calc(var(--unit) * 2);
}

ul.products.product-track::-webkit-scrollbar {
	display: none;
}

ul.products.product-track > li {
	scroll-snap-align: start;
	flex: 0 0 clamp(220px, 20vw, 290px);
}

.review-card {
	scroll-snap-align: start;
	flex: 0 0 clamp(190px, 16.5vw, 235px);
	background: var(--surface-container-lowest);
	border: 1px solid var(--outline-variant);
	padding: 0 0 calc(var(--unit) * 4);
	display: flex;
	flex-direction: column;
	align-items: center;
	text-align: center;
	transition: transform var(--duration-fast) var(--ease-out-expo), box-shadow var(--duration-fast) ease;
}

.review-card:hover {
	transform: translateY(-4px);
	box-shadow: 0 16px 32px -12px rgb(0 0 0 / 0.12);
}

.review-card .review-image {
	width: 100%;
	aspect-ratio: 3 / 4;
	overflow: hidden;
	margin-bottom: calc(var(--unit) * -3);
}

.review-card .review-image img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.review-card .review-stars {
	display: inline-flex;
	gap: 3px;
	color: var(--on-surface);
	border: 1px solid var(--on-surface);
	background: var(--surface-container-lowest);
	padding: 6px 12px;
	margin: calc(var(--unit) * 3) 0 calc(var(--unit) * 2);
	position: relative;
	z-index: 1;
}

.review-card:not(:has(.review-image)) .review-stars {
	margin-top: calc(var(--unit) * 6);
}

.review-card .review-stars .svg-icon {
	width: 14px;
	height: 14px;
}

.review-author {
	font-family: var(--font-body);
	font-weight: 600;
	font-size: 16px;
	margin-bottom: calc(var(--unit) * 1);
}

.review-card .review-quote {
	font-size: 13.5px;
	line-height: 1.55;
	color: var(--on-surface-variant);
	margin: 0;
	padding-inline: calc(var(--unit) * 2.5);
	display: -webkit-box;
	-webkit-line-clamp: 3;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

.review-author {
	font-size: 14px;
}

.review-card .review-stars {
	padding: 4px 10px;
}

.carousel-arrow {
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	z-index: 5;
	width: 48px;
	height: 48px;
	border-radius: 999px;
	background: var(--surface-container-lowest);
	border: 1px solid var(--outline-variant);
	box-shadow: 0 6px 18px rgb(0 0 0 / 0.12);
	display: flex;
	align-items: center;
	justify-content: center;
	color: var(--on-surface);
	transition: transform var(--duration-fast) ease, opacity var(--duration-fast) ease;
}

.carousel-arrow:hover {
	transform: translateY(-50%) scale(1.06);
}

.carousel-arrow:disabled {
	opacity: 0.3;
	cursor: default;
}

.carousel-prev {
	left: calc(var(--unit) * -2);
}

.carousel-next {
	right: calc(var(--unit) * -2);
}

.carousel-arrow .svg-icon {
	width: 18px;
	height: 18px;
}

/* ---------- Newsletter (compartido footer/modal) ---------- */

.newsletter-form {
	display: flex;
	align-items: center;
	border-bottom: 1px solid var(--outline);
	position: relative;
}

.newsletter-form input[type="email"] {
	flex: 1;
	background: transparent;
	border: 0;
	padding: 10px 0;
	font-family: var(--font-body);
	font-size: 14px;
	color: var(--on-surface);
	min-width: 0;
}

.newsletter-form input[type="email"]:focus {
	outline: none;
}

.newsletter-form button {
	color: var(--on-surface);
	padding: 8px;
	display: inline-flex;
	transition: transform var(--duration-fast) ease;
}

.newsletter-form button:hover {
	transform: translateX(3px);
}

.cleya-hp {
	position: absolute !important;
	left: -9999px !important;
	width: 1px;
	height: 1px;
	opacity: 0;
}

.newsletter-thanks {
	color: var(--tertiary);
	margin-top: calc(var(--unit) * 1);
}

/* MC4WP: alinear con el sistema */
.mc4wp-form input[type="email"] {
	width: 100%;
	background: transparent;
	border: 0;
	border-bottom: 1px solid var(--outline);
	border-radius: 0;
	padding: 10px 0;
	font-family: var(--font-body);
	font-size: 14px;
	color: var(--on-surface);
}

.mc4wp-form input[type="submit"],
.mc4wp-form button[type="submit"] {
	margin-top: calc(var(--unit) * 2);
	padding: 12px 32px;
	background: var(--accent-strong);
	color: var(--on-accent);
	border: 1px solid var(--accent-strong);
	border-radius: 0;
	font-family: var(--font-body);
	font-size: var(--text-label-sm);
	font-weight: 600;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	cursor: pointer;
}

/* Entrada escalonada de los ítems al abrir el drawer */
.cart-drawer.is-open .cart_list li {
	animation: cleyaReveal 500ms var(--ease-out-expo) both;
}

.cart-drawer.is-open .cart_list li:nth-child(2) {
	animation-delay: 70ms;
}

.cart-drawer.is-open .cart_list li:nth-child(3) {
	animation-delay: 140ms;
}

.cart-drawer.is-open .cart_list li:nth-child(n + 4) {
	animation-delay: 210ms;
}

/* Flechas del carrusel dentro del área en pantallas pequeñas */
@media (max-width: 900px) {
	.carousel-prev {
		left: 4px;
	}
	.carousel-next {
		right: 4px;
	}
	.carousel-arrow {
		width: 40px;
		height: 40px;
	}
	.wa-popup {
		bottom: calc(var(--unit) * 2 + 64px);
		right: calc(var(--unit) * 2);
	}
	.whatsapp-fab {
		width: 50px;
		height: 50px;
		right: calc(var(--unit) * 2);
		bottom: calc(var(--unit) * 2);
	}
}

/* Bloqueo de scroll cuando hay overlays */
body.drawer-open,
body.modal-open {
	overflow: hidden;
}

@media (prefers-reduced-motion: reduce) {
	.cart-drawer,
	.welcome-modal,
	.whatsapp-fab,
	.review-card,
	.carousel-arrow {
		transition: none;
	}
}

/* ---------- Esqueletos de carga ----------
 * Reservan el sitio del contenido mientras llega, en vez de dejar un hueco
 * en blanco o un salto cuando aparece.
 */

.sk {
	position: relative;
	overflow: hidden;
	background: color-mix(in srgb, var(--outline-variant) 55%, transparent);
	border-radius: 2px;
}

.sk::after {
	content: "";
	position: absolute;
	inset: 0;
	transform: translateX(-100%);
	background: linear-gradient(90deg, transparent, color-mix(in srgb, var(--white) 65%, transparent), transparent);
	animation: skShimmer 1.5s ease-in-out infinite;
}

@keyframes skShimmer {
	to {
		transform: translateX(100%);
	}
}

@media (prefers-reduced-motion: reduce) {
	.sk::after {
		animation: none;
	}
}

.sk-line {
	height: 11px;
}

.sk-line + .sk-line {
	margin-top: calc(var(--unit) * 1.5);
}

.sk-line.is-half {
	width: 50%;
}

.sk-line.is-third {
	width: 32%;
}

.sk-line.is-title {
	height: 16px;
	width: 70%;
}

/* Carrito: la lista y el resumen mientras se recalcula el pedido. */
.cart-skeleton {
	display: grid;
	gap: calc(var(--unit) * 4);
}

.cart-skeleton-row {
	display: flex;
	gap: calc(var(--unit) * 4);
	padding-bottom: calc(var(--unit) * 4);
	border-bottom: 1px solid var(--outline-variant);
}

.cart-skeleton-thumb {
	width: 160px;
	aspect-ratio: 3 / 4;
	flex-shrink: 0;
}

.cart-skeleton-body {
	flex: 1;
	padding-top: calc(var(--unit) * 1);
}

.cart-skeleton-block {
	display: grid;
	gap: calc(var(--unit) * 2);
}

.cart-skeleton-cta {
	height: 56px;
	margin-top: calc(var(--unit) * 3);
}

@media (max-width: 640px) {
	.cart-skeleton-thumb {
		width: 96px;
	}
}

/* Carrito lateral y buscador. */
.drawer-skeleton {
	display: grid;
	gap: calc(var(--unit) * 3);
	padding: calc(var(--unit) * 3);
}

.drawer-skeleton-row {
	display: flex;
	gap: calc(var(--unit) * 2);
}

.drawer-skeleton-thumb {
	width: 72px;
	aspect-ratio: 3 / 4;
	flex-shrink: 0;
}

.drawer-skeleton-body {
	flex: 1;
	padding-top: 4px;
}

.search-skeleton {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: var(--gutter);
}

@media (max-width: 700px) {
	.search-skeleton {
		grid-template-columns: repeat(2, 1fr);
	}
}

.search-skeleton-thumb {
	aspect-ratio: 3 / 4;
	margin-bottom: calc(var(--unit) * 1.5);
}

/*
 * Ficha de producto: la imagen entra sobre su propio hueco tramado, así la
 * rejilla no parpadea en blanco mientras carga.
 */
/* El barrido va en el fondo del propio marco: la foto lo tapa al cargar, así
   que no hay ninguna capa que pueda quedarse por delante si el JS falla. */
.card-media {
	background-image: linear-gradient(90deg, transparent 20%, color-mix(in srgb, var(--white) 55%, transparent) 50%, transparent 80%);
	background-size: 220% 100%;
	animation: skSweep 1.6s ease-in-out infinite;
}

.card-media.is-loaded {
	background-image: none;
	animation: none;
}

@keyframes skSweep {
	from {
		background-position: 120% 0;
	}
	to {
		background-position: -120% 0;
	}
}

@media (prefers-reduced-motion: reduce) {
	.card-media {
		animation: none;
	}
}

/* ---------- Pestaña lateral de promoción ----------
 * Vive pegada al borde derecho, a media altura, con el texto en vertical. No
 * tapa el botón de WhatsApp (que va abajo) ni el contenido: solo asoma.
 */

.promo-tab {
	position: fixed;
	right: 0;
	top: 50%;
	transform: translateY(-50%);
	z-index: 80;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: calc(var(--unit) * 3) calc(var(--unit) * 1.25);
	background: var(--accent-strong);
	color: var(--on-accent);
	border: 0;
	border-radius: 4px 0 0 4px;
	box-shadow: 0 10px 30px -12px rgb(0 0 0 / 0.35);
	cursor: pointer;
	transition: background var(--duration-fast) ease, transform var(--duration-fast) var(--ease-out-expo);
}

/* El asomo va por transform y no por padding: así el navegador no rehace el
   diseño de la página en cada cuadro. El translateY conserva el centrado. */
.promo-tab:hover,
.promo-tab:focus-visible {
	background: var(--accent-hover);
	color: var(--on-accent);
	transform: translate(-6px, -50%);
}

/* De abajo hacia arriba: se lee girando la cabeza a la izquierda, que es el
   sentido habitual de estas pestañas. */
.promo-tab-text {
	writing-mode: vertical-rl;
	transform: rotate(180deg);
	font-family: var(--font-body);
	font-size: 12px;
	font-weight: 600;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	white-space: nowrap;
}

/* Con la barra de administración el centro se desplaza; da igual, pero en
   pantallas cortas se sube para no chocar con el flotante de WhatsApp. */
@media (max-height: 620px) {
	.promo-tab {
		top: 38%;
	}
}

@media (max-width: 700px) {
	.promo-tab {
		padding: calc(var(--unit) * 2.5) calc(var(--unit) * 1);
	}
	.promo-tab-text {
		font-size: 11px;
		letter-spacing: 0.12em;
	}
}

@media (prefers-reduced-motion: reduce) {
	.promo-tab {
		transition: none;
	}
}

/* ---------- Video vertical flotante ----------
 * Asoma por la izquierda, se reproduce una vez y se retira. Vuelve pasado un
 * minuto: presencia, no insistencia.
 */

.float-video {
	position: fixed;
	right: calc(var(--unit) * 9);
	bottom: calc(var(--unit) * 9);
	z-index: 82;
	width: 178px;
	aspect-ratio: 9 / 16;
	background: var(--surface-container);
	border: 4px solid var(--white);
	box-shadow: 0 24px 48px -20px rgb(0 0 0 / 0.45);
	opacity: 0;
	transform: translateY(16px) scale(0.98);
	transition: opacity 600ms ease, transform 600ms var(--ease-out-expo);
	overflow: hidden;
}

.float-video.is-visible {
	opacity: 1;
	transform: translateY(0) scale(1);
}

/*
 * El video y el botón de WhatsApp viven en la misma esquina —la derecha, que
 * es donde va la mano—, así que se turnan: mientras el video está en pantalla
 * el botón se retira, y vuelve en cuanto el video se va.
 */
body.float-video-on .whatsapp-fab,
body.float-video-on .whatsapp-nudge {
	opacity: 0;
	transform: translateY(8px) scale(0.9);
	pointer-events: none;
}

.float-video-link {
	display: block;
	width: 100%;
	height: 100%;
	position: relative;
}

.float-video-media {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

/* Triángulo de reproducción: indica que es un video, no una foto. */
.float-video-play {
	position: absolute;
	left: 50%;
	top: 50%;
	transform: translate(-50%, -50%);
	width: 46px;
	height: 46px;
	border-radius: 999px;
	background: rgb(255 255 255 / 0.85);
	color: var(--accent-strong);
	display: flex;
	align-items: center;
	justify-content: center;
	transition: opacity var(--duration-fast) ease, transform var(--duration-fast) ease;
	pointer-events: none;
}

.float-video-play svg {
	width: 20px;
	height: 20px;
	margin-left: 2px;
}

.float-video.is-playing .float-video-play {
	opacity: 0;
}

.float-video-close {
	position: absolute;
	top: 6px;
	right: 6px;
	width: 28px;
	height: 28px;
	border: 0;
	padding: 0;
	border-radius: 999px;
	background: rgb(255 255 255 / 0.8);
	color: var(--on-surface);
	display: flex;
	align-items: center;
	justify-content: center;
	cursor: pointer;
	transition: background var(--duration-fast) ease;
}

.float-video-close:hover {
	background: var(--white);
}

.float-video-close .svg-icon {
	width: 15px;
	height: 15px;
}

/* En móvil se aparta del botón de WhatsApp y ocupa menos. */
@media (max-width: 700px) {
	.float-video {
		width: 124px;
		right: calc(var(--unit) * 5);
		bottom: calc(var(--unit) * 5);
		border-width: 3px;
	}
	.float-video-play {
		width: 36px;
		height: 36px;
	}
}

@media (prefers-reduced-motion: reduce) {
	.float-video {
		transition: opacity 300ms ease;
		transform: none;
	}
	.float-video.is-visible {
		transform: none;
	}
}

/* ---------- Pantalla de entrada ----------
 * Velo del color de la casa mientras la marca se revela. Se va sola: nunca
 * deja el sitio bloqueado más de un instante.
 */

.splash {
	position: fixed;
	inset: 0;
	z-index: 200;
	background: var(--surface);
	display: flex;
	align-items: center;
	justify-content: center;
	transition: opacity 700ms ease, visibility 700ms;
}

.splash.is-done {
	opacity: 0;
	visibility: hidden;
	pointer-events: none;
}

.splash-mark {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: calc(var(--unit) * 1);
}

/* La palabra entra desde un espaciado abierto y se recoge: el gesto de una
   marca que se asienta. */
.splash-word {
	display: flex;
	align-items: baseline;
	color: var(--heading);
	font-family: var(--font-display);
	font-size: clamp(38px, 6vw, 76px);
	line-height: 1;
	letter-spacing: 0.5em;
	text-transform: uppercase;
	opacity: 0;
	animation: splashWord 1200ms var(--ease-out-expo) 120ms forwards;
}

.splash-initial {
	font-family: var(--font-script);
	font-size: 1.6em;
	text-transform: none;
	letter-spacing: 0;
	line-height: 0.8;
	margin-right: 0.06em;
}

@keyframes splashWord {
	from {
		opacity: 0;
		letter-spacing: 0.5em;
	}
	to {
		opacity: 1;
		letter-spacing: 0.16em;
	}
}

/*
 * El logotipo se descubre de abajo arriba con una máscara y el desenfoque se
 * resuelve al llegar: la marca entra enfocándose, no apareciendo de golpe.
 * El estado final es el que se queda si la animación no llega a correr.
 */
.splash-logo {
	display: block;
	width: min(320px, 62vw);
	height: auto;
	animation: splashLogo 1100ms var(--ease-out-expo) 80ms both;
}

@keyframes splashLogo {
	from {
		opacity: 0;
		filter: blur(10px);
		transform: scale(1.06);
		-webkit-mask-image: linear-gradient(to top, #000 0%, #000 0%, transparent 18%);
		mask-image: linear-gradient(to top, #000 0%, #000 0%, transparent 18%);
	}
	to {
		opacity: 1;
		filter: blur(0);
		transform: scale(1);
		-webkit-mask-image: linear-gradient(to top, #000 0%, #000 130%, transparent 260%);
		mask-image: linear-gradient(to top, #000 0%, #000 130%, transparent 260%);
	}
}

@media (max-width: 600px) {
	.splash-logo {
		width: min(260px, 70vw);
	}
}

.splash-tagline {
	font-family: var(--font-body);
	font-size: 11px;
	font-weight: 600;
	letter-spacing: 0.42em;
	text-transform: uppercase;
	color: var(--on-surface-variant);
	opacity: 0;
	animation: splashFade 700ms ease 900ms forwards;
}

/* Filete que se abre bajo la marca y cierra la escena. */
.splash-rule {
	width: 0;
	height: 1px;
	background: var(--outline);
	margin-top: calc(var(--unit) * 2);
	animation: splashRule 900ms var(--ease-out-expo) 700ms forwards;
}

@keyframes splashFade {
	to {
		opacity: 1;
	}
}

@keyframes splashRule {
	from {
		width: 0;
		opacity: 0;
	}
	to {
		width: 140px;
		opacity: 1;
	}
}

/* Sin movimiento: la marca aparece y el velo se retira igual de rápido. */
@media (prefers-reduced-motion: reduce) {
	.splash-word,
	.splash-tagline,
	.splash-rule {
		animation: none;
		opacity: 1;
		letter-spacing: 0.16em;
	}
	.splash-logo {
		animation: none;
		opacity: 1;
		filter: none;
		transform: none;
		-webkit-mask-image: none;
		mask-image: none;
	}
	.splash-rule {
		width: 140px;
	}
}

/* Mientras el velo está puesto no se desplaza el fondo. */
body.splash-active {
	overflow: hidden;
}

/* Botón con etiqueta en el formulario de suscripción (modal de bienvenida):
   cuando la promesa es concreta —un descuento— el botón debe nombrarla. */
.newsletter-form.has-cta {
	display: grid;
	grid-template-columns: 1fr;
	gap: calc(var(--unit) * 1.5);
	border: 0;
	padding: 0;
}

.newsletter-form.has-cta input[type="email"] {
	width: 100%;
	min-height: 52px;
	border: 1px solid var(--outline-variant);
	background: var(--surface-container-lowest);
	padding: 14px;
	font-family: var(--font-body);
	font-size: 15px;
	color: var(--on-surface);
}

.newsletter-form.has-cta input[type="email"]:focus {
	outline: none;
	border-color: var(--accent-strong);
	box-shadow: 0 0 0 1px var(--accent-strong);
}

.newsletter-form.has-cta .newsletter-cta {
	width: 100%;
	min-height: 52px;
	padding: 16px 24px;
	border: 1px solid var(--accent-strong);
	background: var(--accent-strong);
	color: var(--on-accent);
	font-family: var(--font-body);
	font-size: var(--text-label-sm);
	font-weight: 600;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	cursor: pointer;
	transition: background var(--duration-fast) ease, border-color var(--duration-fast) ease;
}

.newsletter-form.has-cta .newsletter-cta:hover {
	background: var(--accent-hover);
	border-color: var(--accent-hover);
}