/* ==========================================================================
   LAYOUT — Header, Topbar, Megamenu, Search, Hero, Secciones, Footer, Mobile
   Marketplace Theme
   ========================================================================== */

/* ---------- Top Bar ---------- */
.mp-topbar {
	background: var(--mp-text);
	color: rgba(255, 255, 255, 0.92);
	font-size: var(--mp-font-xs);
	font-weight: 500;
	position: relative;
	z-index: 40;
}
.mp-topbar-inner {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	min-height: 36px;
}
.mp-topbar-items { display: flex; align-items: center; gap: 20px; }
.mp-topbar-item { display: inline-flex; align-items: center; gap: 6px; color: inherit; }
.mp-topbar-item .mp-icon { width: 14px; height: 14px; color: var(--mp-accent); }
.mp-topbar a { color: inherit; }
.mp-topbar a:hover { color: #fff; }
.mp-topbar-right { display: flex; gap: 18px; align-items: center; }
.mp-topbar-right a { display: inline-flex; align-items: center; gap: 5px; }

/* ---------- Header ---------- */
.mp-header {
	position: sticky;
	top: 0;
	z-index: 9000;
	background: var(--mp-header-bg);
	-webkit-backdrop-filter: blur(var(--mp-glass-blur));
	backdrop-filter: blur(var(--mp-glass-blur));
	border-bottom: 1px solid var(--mp-glass-border);
	transition: box-shadow var(--mp-dur), background var(--mp-dur);
}
.mp-header.mp-scrolled {
	box-shadow: var(--mp-shadow-md);
	background: var(--mp-surface-glass-strong);
}
.mp-header-static { position: relative; }

/* ---------- Variantes de header ---------- */
.mp-header-solid {
	background: var(--mp-surface);
	border-bottom: 1px solid var(--mp-border-strong);
	-webkit-backdrop-filter: none;
	backdrop-filter: none;
}
.mp-header-solid.mp-scrolled { background: var(--mp-surface); box-shadow: var(--mp-shadow-md); }

.mp-header-minimal {
	background: transparent;
	border-bottom: 0;
	-webkit-backdrop-filter: none;
	backdrop-filter: none;
}
.mp-header-minimal .mp-header-inner { min-height: calc(var(--mp-header-h) - 8px); }
.mp-header-minimal .mp-nav a { padding: 8px 12px; }
.mp-header-minimal .mp-nav-trigger { padding: 8px 14px; }
.mp-header-minimal.mp-scrolled {
	background: var(--mp-surface-glass-strong);
	-webkit-backdrop-filter: blur(var(--mp-glass-blur));
	backdrop-filter: blur(var(--mp-glass-blur));
	border-bottom: 1px solid var(--mp-glass-border);
}
.mp-header-inner {
	display: flex;
	align-items: center;
	gap: clamp(12px, 2vw, 24px);
	min-height: var(--mp-header-h);
	transition: min-height var(--mp-dur);
}
.mp-header.mp-scrolled .mp-header-inner { min-height: var(--mp-header-h-scrolled); }

.mp-logo {
	display: flex;
	align-items: center;
	gap: 10px;
	flex-shrink: 0;
	color: var(--mp-text);
	text-decoration: none;
}
.mp-logo-img { max-height: var(--mp-logo-size); width: auto; }
.mp-logo-text {
	font-family: var(--mp-font-heading);
	font-weight: 800;
	font-size: calc(var(--mp-logo-size) * 0.55);
	line-height: 1.1;
	letter-spacing: -0.03em;
	white-space: nowrap;
	background: linear-gradient(120deg, var(--mp-primary), var(--mp-secondary));
	-webkit-background-clip: text;
	background-clip: text;
	color: transparent;
}
.mp-logo-mark {
	width: calc(var(--mp-logo-size) * 0.9);
	height: calc(var(--mp-logo-size) * 0.9);
	border-radius: 12px;
	display: grid;
	place-items: center;
	background: linear-gradient(135deg, var(--mp-primary), var(--mp-secondary));
	color: #fff;
	box-shadow: 0 6px 16px -4px var(--mp-primary-25);
}
.mp-logo-mark .mp-icon { width: 22px; height: 22px; }

/* Navegación principal */
.mp-nav { display: flex; align-items: center; gap: 4px; }
.mp-nav ul { display: flex; align-items: center; gap: 4px; list-style: none; margin: 0; padding: 0; }
.mp-nav li { list-style: none; position: relative; }
.mp-nav a {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 10px 14px;
	border-radius: var(--mp-radius-md);
	font-weight: 600;
	font-size: var(--mp-font-sm);
	color: var(--mp-text-soft);
	transition: background var(--mp-dur), color var(--mp-dur);
}
.mp-nav a:hover { background: var(--mp-primary-08); color: var(--mp-primary); }
.mp-nav .mp-current > a { color: var(--mp-primary); }
.mp-nav .mp-icon { width: 16px; height: 16px; }

.mp-nav-trigger {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 10px 16px;
	border-radius: var(--mp-radius-md);
	font-weight: 700;
	font-size: var(--mp-font-sm);
	color: #fff;
	background: linear-gradient(135deg, var(--mp-primary), var(--mp-secondary));
	box-shadow: 0 6px 16px -4px var(--mp-primary-25);
	transition: transform var(--mp-dur), box-shadow var(--mp-dur);
}
.mp-nav-trigger:hover { transform: translateY(-1px); box-shadow: 0 10px 22px -6px var(--mp-primary-25); }
.mp-nav-trigger .mp-icon { width: 16px; height: 16px; }

/* ---------- Mega menú ---------- */
.mp-megamenu {
	position: absolute;
	top: calc(100% + 10px);
	inset-inline-start: 0;
	width: min(920px, 92vw);
	display: grid;
	grid-template-columns: 1.1fr 1fr 0.9fr;
	gap: 8px;
	padding: 20px;
	border-radius: var(--mp-radius-xl);
	background: var(--mp-surface-glass-strong);
	-webkit-backdrop-filter: blur(24px);
	backdrop-filter: blur(24px);
	border: 1px solid var(--mp-glass-border);
	box-shadow: var(--mp-shadow-lg);
	opacity: 0;
	visibility: hidden;
	transform: translateY(12px);
	transition: opacity var(--mp-dur), transform var(--mp-dur) var(--mp-ease), visibility var(--mp-dur);
	z-index: 50;
}
.mp-nav li:hover .mp-megamenu,
.mp-nav li:focus-within .mp-megamenu,
.mp-nav li.mp-mega-open .mp-megamenu,
.mp-megamenu:hover { opacity: 1; visibility: visible; transform: translateY(0); }

.mp-mm-col { display: flex; flex-direction: column; gap: 2px; }
.mp-mm-title {
	font-size: var(--mp-font-xs);
	font-weight: 800;
	text-transform: uppercase;
	letter-spacing: 0.08em;
	color: var(--mp-text-muted);
	padding: 6px 10px 8px;
}
.mp-mm-link {
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 8px 10px;
	border-radius: var(--mp-radius-sm);
	font-weight: 600;
	font-size: var(--mp-font-sm);
	color: var(--mp-text-soft);
	transition: background var(--mp-dur), color var(--mp-dur), transform var(--mp-dur);
}
.mp-mm-link:hover { background: var(--mp-primary-08); color: var(--mp-primary); transform: translateX(2px); }
.mp-mm-link .mp-icon { width: 18px; height: 18px; color: var(--mp-primary); }
.mp-mm-link small { display: block; font-weight: 500; color: var(--mp-text-muted); font-size: var(--mp-font-xs); }

.mp-mm-feature {
	border-radius: var(--mp-radius-lg);
	overflow: hidden;
	position: relative;
	min-height: 180px;
	display: flex;
	align-items: flex-end;
	background: linear-gradient(135deg, var(--mp-primary), var(--mp-secondary));
	color: #fff;
	padding: 18px;
}
.mp-mm-feature img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0.4; }
.mp-mm-feature-body { position: relative; z-index: 1; }
.mp-mm-feature-body strong { display: block; font-size: var(--mp-font-lg); margin-bottom: 4px; }
.mp-mm-feature-body span { font-size: var(--mp-font-sm); opacity: 0.9; }

/* ---------- Buscador ---------- */
.mp-search { position: relative; flex: 1; max-width: 720px; margin-inline: auto; }
.mp-search-form {
	display: flex;
	align-items: center;
	gap: 6px;
	padding: 6px 6px 6px 16px;
	border-radius: var(--mp-radius-full);
	background: var(--mp-surface-glass-strong);
	-webkit-backdrop-filter: blur(14px);
	backdrop-filter: blur(14px);
	border: 1.5px solid var(--mp-glass-border);
	box-shadow: var(--mp-shadow-sm);
	transition: border-color var(--mp-dur), box-shadow var(--mp-dur);
}
.mp-search-form:focus-within {
	border-color: var(--mp-primary);
	box-shadow: 0 0 0 4px var(--mp-primary-15), var(--mp-shadow-md);
}
.mp-search-input {
	flex: 1;
	border: 0;
	background: transparent;
	padding: 9px 4px;
	font-size: var(--mp-font-md);
	color: var(--mp-text);
	min-width: 0;
}
.mp-search-input:focus { outline: none; }
.mp-search-input::placeholder { color: var(--mp-text-muted); }

.mp-search-actions { display: flex; align-items: center; gap: 4px; }
.mp-search-btn {
	width: 40px; height: 40px;
	display: grid;
	place-items: center;
	border-radius: var(--mp-radius-full);
	background: linear-gradient(135deg, var(--mp-primary), var(--mp-secondary));
	color: #fff;
	transition: transform var(--mp-dur), box-shadow var(--mp-dur);
}
.mp-search-btn:hover { transform: scale(1.05); box-shadow: 0 6px 16px -4px var(--mp-primary-25); }
.mp-search-btn .mp-icon { width: 18px; height: 18px; }

.mp-voice-btn {
	width: 40px; height: 40px;
	display: grid;
	place-items: center;
	border-radius: var(--mp-radius-full);
	color: var(--mp-text-muted);
	transition: background var(--mp-dur), color var(--mp-dur);
}
.mp-voice-btn:hover { background: var(--mp-primary-08); color: var(--mp-primary); }
.mp-voice-btn .mp-icon { width: 18px; height: 18px; }
.mp-voice-btn.mp-listening { color: var(--mp-danger); animation: mp-pulse 1.2s infinite; }
@keyframes mp-pulse {
	0%, 100% { box-shadow: 0 0 0 0 rgba(239, 68, 68, 0.4); }
	50% { box-shadow: 0 0 0 8px rgba(239, 68, 68, 0); }
}

/* Dropdown de resultados */
.mp-search-dropdown {
	position: absolute;
	top: calc(100% + 10px);
	inset-inline: 0;
	border-radius: var(--mp-radius-xl);
	background: var(--mp-surface-glass-strong);
	-webkit-backdrop-filter: blur(24px);
	backdrop-filter: blur(24px);
	border: 1px solid var(--mp-glass-border);
	box-shadow: var(--mp-shadow-lg);
	overflow: hidden;
	opacity: 0;
	visibility: hidden;
	transform: translateY(8px);
	transition: opacity var(--mp-dur), transform var(--mp-dur) var(--mp-ease), visibility var(--mp-dur);
	z-index: 60;
	max-height: 70vh;
	overflow-y: auto;
}
.mp-search-dropdown.mp-open { opacity: 1; visibility: visible; transform: translateY(0); }

.mp-sd-section { padding: 14px 18px; }
.mp-sd-section + .mp-sd-section { border-top: 1px solid var(--mp-border); }
.mp-sd-title {
	font-size: var(--mp-font-xs);
	font-weight: 800;
	text-transform: uppercase;
	letter-spacing: 0.08em;
	color: var(--mp-text-muted);
	margin-bottom: 10px;
}
.mp-sd-item {
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 8px;
	border-radius: var(--mp-radius-md);
	transition: background var(--mp-dur);
}
.mp-sd-item:hover { background: var(--mp-primary-08); }
.mp-sd-thumb {
	width: 46px; height: 46px;
	border-radius: var(--mp-radius-sm);
	object-fit: cover;
	background: var(--mp-surface-3);
	flex-shrink: 0;
}
.mp-sd-name { font-weight: 600; font-size: var(--mp-font-sm); color: var(--mp-text); }
.mp-sd-cat { font-size: var(--mp-font-xs); color: var(--mp-text-muted); }
.mp-sd-price { margin-inline-start: auto; font-weight: 700; font-size: var(--mp-font-sm); color: var(--mp-primary); white-space: nowrap; }
.mp-sd-chip {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 6px 12px;
	border-radius: var(--mp-radius-full);
	background: var(--mp-primary-08);
	color: var(--mp-primary);
	font-weight: 600;
	font-size: var(--mp-font-xs);
	margin: 0 6px 6px 0;
	transition: background var(--mp-dur);
}
.mp-sd-chip:hover { background: var(--mp-primary-15); }
.mp-sd-chip .mp-icon { width: 14px; height: 14px; }
.mp-sd-empty { padding: 30px; text-align: center; color: var(--mp-text-muted); }

/* ---------- Acciones del header ---------- */
.mp-header-actions { display: flex; align-items: center; gap: 6px; flex-shrink: 0; }
.mp-haction {
	position: relative;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 2px;
	padding: 8px 10px;
	border-radius: var(--mp-radius-md);
	color: var(--mp-text-soft);
	transition: background var(--mp-dur), color var(--mp-dur), transform var(--mp-dur);
	text-decoration: none;
}
.mp-haction:hover { background: var(--mp-primary-08); color: var(--mp-primary); transform: translateY(-1px); }
.mp-haction .mp-icon { width: 22px; height: 22px; }
.mp-haction-label { font-size: 10px; font-weight: 600; }
.mp-haction-badge {
	position: absolute;
	top: 2px; inset-inline-end: 2px;
	min-width: 18px; height: 18px;
	padding: 0 4px;
	border-radius: var(--mp-radius-full);
	background: var(--mp-accent);
	color: #fff;
	font-size: 10px;
	font-weight: 800;
	display: grid;
	place-items: center;
	box-shadow: 0 0 0 2px var(--mp-surface);
}

.mp-mobile-toggle { display: none; }

/* ---------- Barra de beneficios ---------- */
.mp-benefits {
	background: var(--mp-surface);
	border-bottom: 1px solid var(--mp-border);
}
.mp-benefits-inner {
	display: grid;
	grid-template-columns: repeat(5, 1fr);
	gap: 12px;
	padding-block: 14px;
}
.mp-benefit {
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 10px 14px;
	border-radius: var(--mp-radius-md);
	transition: background var(--mp-dur), transform var(--mp-dur);
}
.mp-benefit:hover { background: var(--mp-primary-08); transform: translateY(-2px); }
.mp-benefit-icon {
	width: 42px; height: 42px;
	flex-shrink: 0;
	display: grid;
	place-items: center;
	border-radius: 12px;
	background: var(--mp-primary-08);
	color: var(--mp-primary);
}
.mp-benefit-icon .mp-icon { width: 20px; height: 20px; }
.mp-benefit strong { display: block; font-size: var(--mp-font-sm); color: var(--mp-text); }
.mp-benefit span { font-size: var(--mp-font-xs); color: var(--mp-text-muted); }

/* ---------- Hero ---------- */
.mp-hero {
	position: relative;
	overflow: hidden;
	border-radius: 0 0 var(--mp-radius-xl) var(--mp-radius-xl);
	background: linear-gradient(120deg, var(--mp-primary), var(--mp-secondary) 55%, #7c3aed);
	color: #fff;
}
.mp-hero-slide {
	position: relative;
	min-height: clamp(380px, 52vh, 560px);
	display: flex;
	align-items: center;
	padding-block: clamp(40px, 6vw, 80px);
}
.mp-hero-slide[hidden] { display: none; }
.mp-hero-bg {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	opacity: 0.28;
}
.mp-hero-bg::after {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(90deg, rgba(15, 23, 42, 0.35), transparent 60%);
}
.mp-hero-deco {
	position: absolute;
	border-radius: var(--mp-radius-full);
	background: rgba(255, 255, 255, 0.12);
	-webkit-backdrop-filter: blur(6px);
	backdrop-filter: blur(6px);
	border: 1px solid rgba(255, 255, 255, 0.2);
	animation: mp-float 7s ease-in-out infinite;
}
.mp-hero-deco-1 { width: 120px; height: 120px; top: 12%; inset-inline-end: 8%; }
.mp-hero-deco-2 { width: 70px; height: 70px; bottom: 16%; inset-inline-end: 26%; animation-delay: -2.5s; }
.mp-hero-deco-3 { width: 44px; height: 44px; top: 24%; inset-inline-end: 34%; animation-delay: -4s; }
@keyframes mp-float {
	0%, 100% { transform: translateY(0); }
	50% { transform: translateY(-16px); }
}

.mp-hero-content { position: relative; z-index: 2; max-width: 640px; }
.mp-hero-eyebrow {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 7px 14px;
	border-radius: var(--mp-radius-full);
	background: rgba(255, 255, 255, 0.16);
	-webkit-backdrop-filter: blur(10px);
	backdrop-filter: blur(10px);
	border: 1px solid rgba(255, 255, 255, 0.25);
	font-size: var(--mp-font-xs);
	font-weight: 700;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	margin-bottom: 18px;
}
.mp-hero-eyebrow .mp-icon { width: 14px; height: 14px; color: #fde047; }
.mp-hero-title {
	color: #fff;
	font-size: clamp(2rem, 5.4vw, 3.6rem);
	line-height: 1.05;
	margin-bottom: 16px;
	letter-spacing: -0.03em;
}
.mp-hero-title em {
	font-style: normal;
	background: linear-gradient(120deg, #fde047, #fb923c);
	-webkit-background-clip: text;
	background-clip: text;
	color: transparent;
}
.mp-hero-text { font-size: var(--mp-font-lg); opacity: 0.92; max-width: 480px; margin-bottom: 28px; }
.mp-hero-ctas { display: flex; gap: 12px; flex-wrap: wrap; }
.mp-hero-cta {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	padding: 15px 28px;
	border-radius: var(--mp-radius-md);
	font-weight: 700;
	font-size: var(--mp-font-md);
	transition: transform var(--mp-dur), box-shadow var(--mp-dur);
}
.mp-hero-cta-primary { background: #fff; color: var(--mp-primary); box-shadow: 0 10px 30px -8px rgba(0, 0, 0, 0.35); }
.mp-hero-cta-primary:hover { transform: translateY(-2px); color: var(--mp-primary); box-shadow: 0 16px 40px -10px rgba(0, 0, 0, 0.4); }
.mp-hero-cta-ghost {
	background: rgba(255, 255, 255, 0.14);
	-webkit-backdrop-filter: blur(12px);
	backdrop-filter: blur(12px);
	border: 1px solid rgba(255, 255, 255, 0.3);
	color: #fff;
}
.mp-hero-cta-ghost:hover { background: rgba(255, 255, 255, 0.22); color: #fff; }

.mp-hero-stats {
	display: flex;
	gap: 32px;
	margin-top: 36px;
}
.mp-hero-stat strong { display: block; font-size: 1.5rem; font-weight: 800; }
.mp-hero-stat span { font-size: var(--mp-font-xs); opacity: 0.85; }

.mp-hero-dots {
	position: absolute;
	bottom: 22px;
	inset-inline-start: 50%;
	transform: translateX(-50%);
	display: flex;
	gap: 8px;
	z-index: 3;
}
.mp-hero-dot {
	width: 26px; height: 6px;
	border-radius: var(--mp-radius-full);
	background: rgba(255, 255, 255, 0.35);
	transition: background var(--mp-dur), width var(--mp-dur);
	cursor: pointer;
}
.mp-hero-dot.mp-active { background: #fff; width: 40px; }

.mp-hero-arrow {
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	width: 46px; height: 46px;
	display: grid;
	place-items: center;
	border-radius: var(--mp-radius-full);
	background: rgba(255, 255, 255, 0.16);
	-webkit-backdrop-filter: blur(10px);
	backdrop-filter: blur(10px);
	border: 1px solid rgba(255, 255, 255, 0.25);
	color: #fff;
	z-index: 3;
	transition: background var(--mp-dur), transform var(--mp-dur);
}
.mp-hero-arrow:hover { background: rgba(255, 255, 255, 0.3); transform: translateY(-50%) scale(1.06); }
.mp-hero-arrow-prev { inset-inline-start: 16px; }
.mp-hero-arrow-next { inset-inline-end: 16px; }

/* ---------- Flash deals ---------- */
.mp-flash-head { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; }
.mp-flash-badge {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 8px 16px;
	border-radius: var(--mp-radius-full);
	background: linear-gradient(135deg, var(--mp-accent), var(--mp-accent-dark));
	color: #fff;
	font-weight: 800;
	font-size: var(--mp-font-sm);
	box-shadow: 0 8px 20px -6px rgba(249, 115, 22, 0.5);
	animation: mp-flash-pulse 2s infinite;
}
.mp-flash-badge .mp-icon { width: 16px; height: 16px; }
@keyframes mp-flash-pulse {
	0%, 100% { box-shadow: 0 8px 20px -6px rgba(249, 115, 22, 0.5); }
	50% { box-shadow: 0 8px 26px -4px rgba(249, 115, 22, 0.75); }
}

.mp-flash-grid {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: var(--mp-gutter);
}

/* ---------- Categorías ---------- */
.mp-cats-grid {
	display: grid;
	grid-template-columns: repeat(5, 1fr);
	gap: var(--mp-gutter);
}

/* ---------- Banner promocional ---------- */
.mp-promo-banner {
	position: relative;
	border-radius: var(--mp-radius-xl);
	overflow: hidden;
	background: linear-gradient(120deg, #1e293b, var(--mp-primary));
	color: #fff;
	min-height: 240px;
	display: flex;
	align-items: center;
}
.mp-promo-banner img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0.3; }
.mp-promo-body { position: relative; z-index: 1; padding: clamp(24px, 4vw, 48px); max-width: 560px; }
.mp-promo-body h3 { color: #fff; font-size: clamp(1.5rem, 3vw, 2.2rem); }
.mp-promo-body p { opacity: 0.9; }

/* ---------- Marcas ---------- */
.mp-brands { display: flex; align-items: center; justify-content: center; gap: 40px; flex-wrap: wrap; opacity: 0.75; }
.mp-brand {
	font-family: var(--mp-font-heading);
	font-weight: 800;
	font-size: 1.3rem;
	letter-spacing: -0.02em;
	color: var(--mp-text-muted);
	transition: color var(--mp-dur), opacity var(--mp-dur), transform var(--mp-dur);
	filter: grayscale(1);
}
.mp-brand:hover { color: var(--mp-primary); opacity: 1; transform: translateY(-2px); filter: none; }

/* ---------- Newsletter ---------- */
.mp-newsletter {
	position: relative;
	border-radius: var(--mp-radius-xl);
	overflow: hidden;
	background: linear-gradient(120deg, var(--mp-primary), var(--mp-secondary));
	color: #fff;
	padding: clamp(32px, 5vw, 56px);
	text-align: center;
}
.mp-newsletter h3 { color: #fff; font-size: clamp(1.4rem, 3vw, 2rem); }
.mp-newsletter p { opacity: 0.9; max-width: 520px; margin-inline: auto; }
.mp-newsletter-form {
	display: flex;
	gap: 10px;
	max-width: 520px;
	margin: 24px auto 0;
}
.mp-newsletter-form .mp-input {
	flex: 1;
	background: rgba(255, 255, 255, 0.14);
	border: 1px solid rgba(255, 255, 255, 0.3);
	color: #fff;
	-webkit-backdrop-filter: blur(8px);
	backdrop-filter: blur(8px);
}
.mp-newsletter-form .mp-input::placeholder { color: rgba(255, 255, 255, 0.7); }
.mp-newsletter-form .mp-btn { background: #fff; color: var(--mp-primary); border: 0; }
.mp-newsletter-form .mp-btn:hover { color: var(--mp-primary); }

/* ---------- Footer ---------- */
.mp-footer {
	background: #0b1020;
	color: #94a3b8;
	margin-top: clamp(40px, 6vw, 72px);
}
.mp-footer-top { padding-block: clamp(40px, 5vw, 64px) 32px; }
.mp-footer-grid {
	display: grid;
	grid-template-columns: 1.4fr 1fr 1fr 1fr 1fr;
	gap: 32px;
}
.mp-footer--no-account .mp-footer-grid { grid-template-columns: 1.4fr 1fr 1fr 1fr; }
@media (max-width: 1280px) {
	.mp-footer--no-account .mp-footer-grid { grid-template-columns: 1.4fr 1fr 1fr; }
}
@media (max-width: 768px) {
	.mp-footer--no-account .mp-footer-grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 480px) {
	.mp-footer--no-account .mp-footer-grid { grid-template-columns: 1fr; }
}
.mp-footer-brand .mp-logo-text { color: #fff; }
.mp-footer-brand p { font-size: var(--mp-font-sm); line-height: 1.7; }
.mp-footer-social { display: flex; gap: 10px; margin-top: 18px; }
.mp-footer-social a {
	width: 40px; height: 40px;
	display: grid;
	place-items: center;
	border-radius: 12px;
	background: rgba(255, 255, 255, 0.06);
	border: 1px solid rgba(255, 255, 255, 0.1);
	color: #cbd5e1;
	transition: background var(--mp-dur), color var(--mp-dur), transform var(--mp-dur);
}
.mp-footer-social a:hover { background: var(--mp-primary); color: #fff; transform: translateY(-2px); }
.mp-footer-social .mp-icon { width: 18px; height: 18px; }

.mp-footer-title {
	color: #fff;
	font-size: var(--mp-font-md);
	margin-bottom: 16px;
	font-weight: 700;
}
.mp-footer-col ul { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 10px; }
.mp-footer-col a { color: #94a3b8; font-size: var(--mp-font-sm); transition: color var(--mp-dur), padding-inline-start var(--mp-dur); }
.mp-footer-col a:hover { color: #fff; padding-inline-start: 4px; }

.mp-footer-apps { display: flex; gap: 10px; margin-top: 18px; flex-wrap: wrap; }
.mp-app-badge {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	padding: 10px 16px;
	border-radius: var(--mp-radius-md);
	background: rgba(255, 255, 255, 0.06);
	border: 1px solid rgba(255, 255, 255, 0.12);
	color: #fff;
	transition: background var(--mp-dur), transform var(--mp-dur);
}
.mp-app-badge:hover { background: rgba(255, 255, 255, 0.12); color: #fff; transform: translateY(-2px); }
.mp-app-badge .mp-icon { width: 22px; height: 22px; }
.mp-app-badge small { display: block; font-size: 10px; opacity: 0.7; text-transform: uppercase; letter-spacing: 0.05em; }
.mp-app-badge strong { font-size: var(--mp-font-sm); line-height: 1.2; }

.mp-footer-bottom {
	border-top: 1px solid rgba(255, 255, 255, 0.08);
	padding-block: 20px;
}
.mp-footer-bottom-inner {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	flex-wrap: wrap;
	font-size: var(--mp-font-xs);
}
.mp-payment-methods { display: flex; gap: 8px; flex-wrap: wrap; }
.mp-payment-method {
	height: 30px;
	padding: 0 12px;
	display: inline-flex;
	align-items: center;
	border-radius: 8px;
	background: rgba(255, 255, 255, 0.08);
	border: 1px solid rgba(255, 255, 255, 0.1);
	font-size: 11px;
	font-weight: 700;
	color: #cbd5e1;
}

/* ---------- Breadcrumb ---------- */
.mp-breadcrumb { padding-block: 16px; font-size: var(--mp-font-sm); }
.mp-breadcrumb ol { list-style: none; display: flex; flex-wrap: wrap; gap: 8px; padding: 0; margin: 0; }
.mp-breadcrumb li { display: flex; align-items: center; gap: 8px; color: var(--mp-text-muted); }
.mp-breadcrumb li + li::before { content: "/"; color: var(--mp-border-strong); }
.mp-breadcrumb a { color: var(--mp-text-muted); }
.mp-breadcrumb a:hover { color: var(--mp-primary); }
.mp-breadcrumb [aria-current] { color: var(--mp-text); font-weight: 600; }

/* ---------- Contenido / entradas ---------- */
.mp-main { padding-block: clamp(24px, 4vw, 48px); }
.mp-page-header { margin-bottom: 28px; }
.mp-page-title { font-size: clamp(1.6rem, 3.4vw, 2.4rem); margin-bottom: 8px; }

.mp-content { background: var(--mp-surface); border: 1px solid var(--mp-border); border-radius: var(--mp-radius-xl); padding: clamp(20px, 4vw, 40px); }
.mp-content img { border-radius: var(--mp-radius-lg); }
.mp-content h2, .mp-content h3 { margin-top: 1.4em; }

.mp-entry-grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: var(--mp-gutter);
}
.mp-entry-card {
	background: var(--mp-surface);
	border: 1px solid var(--mp-border);
	border-radius: var(--mp-radius-lg);
	overflow: hidden;
	transition: transform var(--mp-dur) var(--mp-ease), box-shadow var(--mp-dur);
}
.mp-entry-card:hover { transform: translateY(-4px); box-shadow: var(--mp-shadow-lg); }
.mp-entry-thumb { aspect-ratio: 16/10; overflow: hidden; }
.mp-entry-thumb img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.5s var(--mp-ease); }
.mp-entry-card:hover .mp-entry-thumb img { transform: scale(1.05); }
.mp-entry-body { padding: 20px; }
.mp-entry-meta { font-size: var(--mp-font-xs); color: var(--mp-text-muted); margin-bottom: 8px; }
.mp-entry-title { font-size: var(--mp-font-lg); margin-bottom: 8px; }
.mp-entry-title a { color: var(--mp-text); }
.mp-entry-title a:hover { color: var(--mp-primary); }

/* ---------- Sidebar tienda ---------- */
.mp-shop-layout { display: grid; grid-template-columns: 280px 1fr; gap: 28px; align-items: start; }
.mp-shop-sidebar { position: sticky; top: 110px; }
.mp-shop-toolbar {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	margin-bottom: 20px;
	flex-wrap: wrap;
}
.mp-sort-select {
	padding: 9px 14px;
	border-radius: var(--mp-radius-md);
	border: 1px solid var(--mp-border-strong);
	background: var(--mp-surface);
	font-weight: 600;
	font-size: var(--mp-font-sm);
	color: var(--mp-text-soft);
}
.mp-view-toggle { display: flex; gap: 4px; }
.mp-view-btn {
	width: 38px; height: 38px;
	display: grid;
	place-items: center;
	border-radius: var(--mp-radius-sm);
	color: var(--mp-text-muted);
	transition: background var(--mp-dur), color var(--mp-dur);
}
.mp-view-btn.mp-active { background: var(--mp-primary-08); color: var(--mp-primary); }
.mp-view-btn .mp-icon { width: 18px; height: 18px; }

/* ---------- Load more ---------- */
.mp-load-more-wrap { display: flex; justify-content: center; margin-top: 36px; }
.mp-load-more-btn {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	padding: 14px 34px;
	border-radius: var(--mp-radius-full);
	font-weight: 700;
	background: var(--mp-surface);
	border: 1px solid var(--mp-border-strong);
	transition: all var(--mp-dur);
}
.mp-load-more-btn:hover { border-color: var(--mp-primary); color: var(--mp-primary); box-shadow: var(--mp-shadow-md); }
.mp-load-more-btn .mp-icon { width: 18px; height: 18px; }
.mp-load-more-btn.mp-loading .mp-icon { animation: mp-spin 0.8s linear infinite; }

/* ---------- Mobile header ---------- */
.mp-mobile-header {
	display: none;
	align-items: center;
	justify-content: space-between;
	gap: 10px;
	padding: 8px 16px;
	min-height: calc(var(--mp-header-h) - 8px);
}
.mp-mobile-header .mp-logo-text { font-size: calc(var(--mp-logo-size) * 0.5); }
.mp-mobile-header .mp-logo-img { max-height: calc(var(--mp-logo-size) - 6px); }
.mp-mobile-actions { display: flex; align-items: center; gap: 4px; }

/* ---------- Menú lateral mobile ---------- */
.mp-mobile-nav { display: flex; flex-direction: column; }
.mp-mobile-nav a {
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 13px 16px;
	border-radius: var(--mp-radius-md);
	font-weight: 600;
	font-size: var(--mp-font-md);
	color: var(--mp-text-soft);
	transition: background var(--mp-dur), color var(--mp-dur);
}
.mp-mobile-nav a:hover { background: var(--mp-primary-08); color: var(--mp-primary); }
.mp-mobile-nav .mp-icon { width: 20px; height: 20px; }
.mp-mobile-nav .mp-mm-sub { margin-inline-start: 16px; border-inline-start: 2px solid var(--mp-border); padding-inline-start: 8px; }

/* Submenú desplegable del drawer móvil */
.mp-mobile-nav-toggle {
	display: flex;
	align-items: center;
	gap: 12px;
	width: 100%;
	padding: 13px 16px;
	border-radius: var(--mp-radius-md);
	font-weight: 600;
	font-size: var(--mp-font-md);
	color: var(--mp-text-soft);
	background: none;
	border: 0;
	cursor: pointer;
	text-align: start;
	transition: background var(--mp-dur), color var(--mp-dur);
}
.mp-mobile-nav-toggle:hover { background: var(--mp-primary-08); color: var(--mp-primary); }
.mp-mobile-nav-toggle .mp-nav-caret { margin-inline-start: auto; transition: transform var(--mp-dur); }
.mp-mobile-nav-toggle.mp-open .mp-nav-caret { transform: rotate(180deg); }
.mp-mobile-nav-toggle .mp-icon { width: 20px; height: 20px; }
.mp-mobile-nav .mp-mm-sub { display: flex; flex-direction: column; gap: 2px; margin: 2px 16px 8px; }
.mp-mobile-nav .mp-mm-sub a { padding: 10px 12px; font-size: var(--mp-font-sm); }

/* ---------- Search overlay (mobile) ---------- */
.mp-search-overlay {
	position: fixed;
	inset: 0;
	z-index: 9700;
	background: var(--mp-surface-glass-strong);
	-webkit-backdrop-filter: blur(24px);
	backdrop-filter: blur(24px);
	padding: 16px;
	opacity: 0;
	visibility: hidden;
	transition: opacity var(--mp-dur), visibility var(--mp-dur);
}
.mp-search-overlay.mp-open { opacity: 1; visibility: visible; }
.mp-search-overlay .mp-search { max-width: none; }
.mp-search-overlay .mp-search-dropdown { position: static; opacity: 1; visibility: visible; transform: none; margin-top: 12px; max-height: none; }

/* ---------- Back to top ---------- */
.mp-back-top {
	position: fixed;
	bottom: 24px;
	inset-inline-end: 24px;
	z-index: 9200;
	width: 48px; height: 48px;
	display: grid;
	place-items: center;
	border-radius: var(--mp-radius-full);
	background: var(--mp-surface-glass-strong);
	-webkit-backdrop-filter: blur(14px);
	backdrop-filter: blur(14px);
	border: 1px solid var(--mp-glass-border);
	box-shadow: var(--mp-shadow-md);
	color: var(--mp-primary);
	opacity: 0;
	visibility: hidden;
	transform: translateY(12px);
	transition: opacity var(--mp-dur), transform var(--mp-dur) var(--mp-ease), visibility var(--mp-dur);
}
.mp-back-top.mp-show { opacity: 1; visibility: visible; transform: translateY(0); }
.mp-back-top:hover { background: var(--mp-primary); color: #fff; }

/* ---------- Toggle tema ---------- */
.mp-theme-toggle {
	width: 40px; height: 40px;
	display: grid;
	place-items: center;
	border-radius: var(--mp-radius-full);
	color: var(--mp-text-soft);
	transition: background var(--mp-dur), color var(--mp-dur), transform var(--mp-dur);
}
.mp-theme-toggle:hover { background: var(--mp-primary-08); color: var(--mp-primary); transform: rotate(20deg); }
.mp-theme-toggle .mp-icon { width: 20px; height: 20px; }
.mp-theme-toggle .mp-icon-moon { display: none; }

/* ---------- Skip link ---------- */
.mp-skip-link {
	position: absolute;
	left: 12px;
	top: 12px;
	z-index: 9999;
	background: var(--mp-primary);
	color: #fff;
	padding: 12px 18px;
	border-radius: var(--mp-radius-md);
	font-weight: 700;
	transform: translateY(-200%);
	transition: transform var(--mp-dur);
}
.mp-skip-link:focus { transform: translateY(0); }

/* ---------- Chips (variaciones) ---------- */
.mp-chip {
	padding: 9px 16px;
	border-radius: var(--mp-radius-full);
	font-weight: 600;
	font-size: var(--mp-font-sm);
	color: var(--mp-text-soft);
	background: var(--mp-surface);
	border: 1.5px solid var(--mp-border-strong);
	transition: all var(--mp-dur);
}
.mp-chip:hover { border-color: var(--mp-primary-25); color: var(--mp-primary); }
.mp-chip.mp-active {
	border-color: var(--mp-primary);
	background: var(--mp-primary-08);
	color: var(--mp-primary);
	box-shadow: 0 0 0 3px var(--mp-primary-15);
}

/* ---------- Página de producto ---------- */
.mp-single-grid {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: clamp(24px, 4vw, 48px);
	align-items: start;
}
.mp-single-media { position: sticky; top: 100px; }
.mp-gallery-main {
	position: relative;
	border-radius: var(--mp-radius-xl);
	overflow: hidden;
	background: var(--mp-surface-3);
	aspect-ratio: 1/1;
}
.mp-gallery-main img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.4s var(--mp-ease); cursor: zoom-in; }
.mp-gallery-main:hover img { transform: scale(1.08); }
.mp-single-off { position: absolute; top: 14px; inset-inline-start: 14px; font-size: var(--mp-font-sm); padding: 6px 14px; }
.mp-gallery-thumbs { margin-top: 12px; gap: 10px; }
.mp-single-title { font-size: clamp(1.6rem, 3vw, 2.2rem); line-height: 1.15; margin-bottom: 10px; }
.mp-single-sku {
	display: flex;
	align-items: center;
	gap: 16px;
	font-size: var(--mp-font-xs);
	color: var(--mp-text-muted);
	padding-block: 10px;
	border-block: 1px solid var(--mp-border);
	margin-bottom: 16px;
}
.mp-text-success { color: var(--mp-success); }
.mp-single-price-row { display: flex; align-items: center; gap: 12px; margin-bottom: 14px; }
.mp-single-price { font-size: 2.2rem; font-weight: 800; letter-spacing: -0.02em; }
.mp-single-desc { color: var(--mp-text-muted); }
.mp-single-variations { margin-top: 18px; }
.mp-single-perks { padding: 12px 0; border-top: 1px solid var(--mp-border); }
.mp-single-perks .mp-icon { color: var(--mp-success); }

@media (max-width: 900px) {
	.mp-single-grid { grid-template-columns: 1fr; }
	.mp-single-media { position: static; }
}

/* ---------- Sidebar oculta en mobile ---------- */
.mp-hide-mobile { display: block; }
@media (max-width: 1024px) {
	.mp-hide-mobile { display: none; }
}

/* ---------- Comentarios ---------- */
.mp-comments { margin-top: 32px; }
.mp-comments .comment-list { list-style: none; padding: 0; }
.mp-comments .comment-body { background: var(--mp-surface); border: 1px solid var(--mp-border); border-radius: var(--mp-radius-lg); padding: 20px; margin-bottom: 14px; }
.mp-comments .comment-meta { font-size: var(--mp-font-xs); color: var(--mp-text-muted); }
.mp-comments .comment-author { font-weight: 700; color: var(--mp-text); }
.mp-comments .form-submit .submit { display: inline-flex; padding: 12px 22px; border-radius: var(--mp-radius-md); background: var(--mp-primary); color: #fff; font-weight: 600; border: 0; cursor: pointer; }

/* ---------- Responsive ---------- */
@media (max-width: 1280px) {
	.mp-product-grid { grid-template-columns: repeat(4, 1fr); }
	.mp-cats-grid { grid-template-columns: repeat(4, 1fr); }
	.mp-flash-grid { grid-template-columns: repeat(3, 1fr); }
	.mp-footer-grid { grid-template-columns: 1.4fr 1fr 1fr; }
}

@media (max-width: 1024px) {
	.mp-header-inner { gap: 12px; }
	.mp-nav { display: none; }
	.mp-mobile-toggle { display: grid; }
	.mp-search { max-width: none; }
	.mp-product-grid { grid-template-columns: repeat(3, 1fr); }
	.mp-cats-grid { grid-template-columns: repeat(3, 1fr); }
	.mp-benefits-inner { grid-template-columns: repeat(3, 1fr); }
	.mp-shop-layout { grid-template-columns: 1fr; }
	.mp-shop-sidebar { position: static; }
	.mp-qv-grid { grid-template-columns: 1fr; }
	.mp-qv-media { padding: 16px; }
	.mp-hero-arrow { display: none; }
}

@media (max-width: 768px) {
	.mp-topbar-right { display: none; }
	.mp-topbar-items { gap: 12px; }
	.mp-header-inner { display: none; }
	.mp-mobile-header { display: flex; }
	.mp-header { position: sticky; }
	.mp-product-grid { grid-template-columns: repeat(2, 1fr); gap: 12px; }
	.mp-flash-grid { grid-template-columns: repeat(2, 1fr); gap: 12px; }
	.mp-cats-grid { grid-template-columns: repeat(3, 1fr); gap: 12px; }
	.mp-entry-grid { grid-template-columns: 1fr; }
	.mp-benefits-inner { grid-template-columns: repeat(2, 1fr); }
	.mp-benefit { padding: 8px 10px; }
	.mp-footer-grid { grid-template-columns: 1fr 1fr; }
	.mp-bottom-nav { display: flex; }
	.mp-back-top { bottom: 84px; }
	.mp-toast-wrap { inset-inline: 12px; bottom: 84px; }
	.mp-toast { max-width: none; width: 100%; }
	.mp-newsletter-form { flex-direction: column; }
	.mp-hero-stats { gap: 20px; }
	.mp-hero-stat strong { font-size: 1.2rem; }
	.mp-card-actions { opacity: 1; transform: none; }
	.mp-card-action { width: 34px; height: 34px; }
}

@media (max-width: 480px) {
	.mp-product-grid { grid-template-columns: repeat(2, 1fr); gap: 10px; }
	.mp-cats-grid { grid-template-columns: repeat(2, 1fr); }
	.mp-flash-grid { grid-template-columns: repeat(2, 1fr); gap: 10px; }
	.mp-card-body { padding: 10px 10px 12px; }
	.mp-card-price { font-size: var(--mp-font-lg); }
	.mp-card-title { font-size: var(--mp-font-sm); }
	.mp-add-btn { font-size: var(--mp-font-sm); padding: 9px 10px; }
	.mp-section-head { flex-direction: column; align-items: flex-start; }
	.mp-footer-grid { grid-template-columns: 1fr; }
	.mp-hero-slide { min-height: 420px; }
	.mp-haction-label { display: none; }
	.mp-haction { padding: 8px; }
}