/* ==========================================================================
   BASE — Reset, Design Tokens, Tipografía, Utilidades
   Marketplace Theme
   ========================================================================== */

/* ---------- Reset moderno ---------- */
*, *::before, *::after { box-sizing: border-box; }

html {
	-webkit-text-size-adjust: 100%;
	scroll-behavior: smooth;
	scroll-padding-top: 120px;
}

body {
	margin: 0;
	font-family: var(--mp-font-sans);
	font-size: var(--mp-font-md);
	line-height: var(--mp-leading);
	color: var(--mp-text);
	background: var(--mp-bg);
	-webkit-font-smoothing: antialiased;
	text-rendering: optimizeLegibility;
	overflow-x: hidden;
}

img, picture, video, svg { display: block; max-width: 100%; height: auto; }

input, button, textarea, select {
	font: inherit;
	color: inherit;
}

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

a { color: var(--mp-primary); text-decoration: none; transition: color .18s ease; }
a:hover { color: var(--mp-primary-dark); }

h1, h2, h3, h4, h5, h6 {
	font-family: var(--mp-font-heading);
	font-weight: 800;
	line-height: 1.15;
	margin: 0 0 .5em;
	letter-spacing: -0.02em;
	color: var(--mp-text);
}

p { margin: 0 0 1em; }

ul, ol { margin: 0 0 1em; padding-left: 1.4em; }

hr { border: 0; border-top: 1px solid var(--mp-border); margin: 2rem 0; }

:focus-visible {
	outline: 3px solid var(--mp-primary-25);
	outline-offset: 2px;
	border-radius: var(--mp-radius-sm);
}

::selection { background: var(--mp-primary-25); }

/* ---------- Design Tokens ---------- */
:root {
	/* Paleta */
	--mp-primary: #5b5fef;          /* sobreescrito por Customizer */
	--mp-primary-dark: #4548d9;
	--mp-primary-08: rgba(91, 95, 239, 0.08);
	--mp-primary-15: rgba(91, 95, 239, 0.15);
	--mp-primary-25: rgba(91, 95, 239, 0.25);
	--mp-secondary: #8b5cf6;
	--mp-accent: #f97316;
	--mp-accent-dark: #ea580c;
	--mp-success: #10b981;
	--mp-danger: #ef4444;
	--mp-warning: #f59e0b;

	/* Superficies (light) */
	--mp-bg: #f3f5fb;
	--mp-bg-alt: #eceff7;
	--mp-surface: #ffffff;
	--mp-surface-2: #f8fafc;
	--mp-surface-3: #eef1f8;
	--mp-surface-glass: rgba(255, 255, 255, 0.62);
	--mp-surface-glass-strong: rgba(255, 255, 255, 0.82);
	--mp-glass-blur: 18px;
	--mp-glass-opacity: 0.62;
	--mp-glass-border: rgba(255, 255, 255, 0.5);
	--mp-header-bg: rgba(255, 255, 255, 0.65);

	/* Texto */
	--mp-text: #0f172a;
	--mp-text-soft: #334155;
	--mp-text-muted: #64748b;
	--mp-text-inverse: #ffffff;

	/* Bordes */
	--mp-border: rgba(15, 23, 42, 0.08);
	--mp-border-strong: rgba(15, 23, 42, 0.16);

	/* Sombras */
	--mp-shadow-sm: 0 1px 2px rgba(15, 23, 42, 0.05);
	--mp-shadow-md: 0 4px 16px -2px rgba(15, 23, 42, 0.10);
	--mp-shadow-lg: 0 12px 40px -8px rgba(15, 23, 42, 0.16);
	--mp-shadow-glow: 0 8px 40px -6px var(--mp-primary-25);

	/* Radio */
	--mp-radius-scale: 16px;
	--mp-radius-xs: calc(var(--mp-radius-scale) * 0.3);
	--mp-radius-sm: calc(var(--mp-radius-scale) * 0.55);
	--mp-radius-md: calc(var(--mp-radius-scale) * 0.8);
	--mp-radius-lg: var(--mp-radius-scale);
	--mp-radius-xl: calc(var(--mp-radius-scale) * 1.35);
	--mp-radius-full: 999px;

	/* Tipografía */
	--mp-font-sans: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
	--mp-font-heading: "Plus Jakarta Sans", "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
	--mp-font-xs: 0.75rem;
	--mp-font-sm: 0.8125rem;
	--mp-font-md: 0.9375rem;
	--mp-font-lg: 1.125rem;
	--mp-font-xl: 1.5rem;
	--mp-leading: 1.6;

	/* Layout */
	--mp-container: 1440px;
	--mp-container-pad: clamp(16px, 3vw, 32px);
	--mp-gutter: 20px;
	--mp-header-h: 64px;
	--mp-header-h-scrolled: 54px;
	--mp-logo-size: 44px;

	/* Motion */
	--mp-ease: cubic-bezier(0.22, 1, 0.36, 1);
	--mp-dur: 0.22s;
}

/* ---------- Contenedor ---------- */
.mp-container {
	width: 100%;
	max-width: var(--mp-container);
	margin-inline: auto;
	padding-inline: var(--mp-container-pad);
}

.mp-container-narrow { max-width: 1100px; }

/* ---------- Utilidades ---------- */
.mp-hidden { display: none !important; }
.mp-sr-only {
	position: absolute !important;
	width: 1px; height: 1px;
	overflow: hidden;
	clip: rect(0 0 0 0);
	clip-path: inset(50%);
	white-space: nowrap;
}

.mp-flex { display: flex; align-items: center; gap: var(--mp-gutter); }
.mp-flex-wrap { flex-wrap: wrap; }
.mp-between { justify-content: space-between; }
.mp-center { justify-content: center; }
.mp-grid { display: grid; gap: var(--mp-gutter); }

.mp-mt-0 { margin-top: 0; }
.mp-mb-0 { margin-bottom: 0; }
.mp-mt-1 { margin-top: 1rem; }
.mp-mb-1 { margin-bottom: 1rem; }
.mp-mt-2 { margin-top: 2rem; }
.mp-mb-2 { margin-bottom: 2rem; }
.mp-mt-3 { margin-top: 3rem; }

.mp-text-center { text-align: center; }
.mp-text-muted { color: var(--mp-text-muted); }
.mp-text-small { font-size: var(--mp-font-sm); }

.mp-icon { flex-shrink: 0; }

/* Scrollbar sutil */
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb {
	background: var(--mp-border-strong);
	border-radius: var(--mp-radius-full);
	border: 2px solid var(--mp-bg);
}
::-webkit-scrollbar-thumb:hover { background: var(--mp-text-muted); }

/* ---------- Accesibilidad: reducir animaciones ---------- */
@media (prefers-reduced-motion: reduce) {
	*, *::before, *::after {
		animation-duration: 0.01ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: 0.01ms !important;
		scroll-behavior: auto !important;
	}
}