/**
 * Stickers Premium - Main styles
 * Variables, reset, layout, tipografía y utilidades base.
 */

/* ========== VARIABLES ========== */
:root {
	/* Paleta: oscuro elegante + acento coral/rosa */
	--color-primary: #1a1a2e;
	--color-primary-soft: #16213e;
	--color-accent: #e94560;
	--color-accent-hover: #ff6b6b;
	--color-light: #f8f9fa;
	--color-white: #ffffff;
	--color-muted: #6c757d;
	--color-border: #e9ecef;

	/* Tipografía */
	--font-heading: 'Outfit', sans-serif;
	--font-body: 'DM Sans', sans-serif;

	/* Espaciado */
	--space-xs: 0.25rem;
	--space-sm: 0.5rem;
	--space-md: 1rem;
	--space-lg: 1.5rem;
	--space-xl: 2rem;
	--space-2xl: 3rem;
	--space-3xl: 4rem;
	--section-padding: clamp(3rem, 8vw, 5rem);

	/* Contenedor */
	--container-max: 1200px;
	--container-narrow: 720px;

	/* Transiciones */
	--ease-out: cubic-bezier(0.4, 0, 0.2, 1);
	--ease-bounce: cubic-bezier(0.34, 1.56, 0.64, 1);
	--transition-fast: 0.2s var(--ease-out);
	--transition-smooth: 0.35s var(--ease-out);
	--transition-slow: 0.5s var(--ease-out);

	/* Sombras */
	--shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.08);
	--shadow-md: 0 4px 12px rgba(0, 0, 0, 0.1);
	--shadow-lg: 0 12px 40px rgba(0, 0, 0, 0.12);

	/* Border radius */
	--radius-sm: 6px;
	--radius-md: 10px;
	--radius-lg: 16px;
	--radius-full: 9999px;
}

/* ========== RESET / BASE ========== */
*,
*::before,
*::after {
	box-sizing: border-box;
}

html {
	scroll-behavior: smooth;
}

body {
	margin: 0;
	font-family: var(--font-body);
	font-size: 1rem;
	line-height: 1.6;
	color: var(--color-primary);
	background-color: var(--color-light);
	-webkit-font-smoothing: antialiased;
}

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

a {
	color: var(--color-accent);
	text-decoration: none;
	transition: color var(--transition-fast);
}
a:hover {
	color: var(--color-accent-hover);
}

/* ========== LAYOUT ========== */
.container {
	width: 100%;
	max-width: var(--container-max);
	margin-left: auto;
	margin-right: auto;
	padding-left: var(--space-lg);
	padding-right: var(--space-lg);
}

.container--narrow {
	max-width: var(--container-narrow);
}

.site-main {
	min-height: 50vh;
}

/* ========== TIPOGRAFÍA ========== */
h1, h2, h3, h4 {
	font-family: var(--font-heading);
	font-weight: 600;
	line-height: 1.2;
	margin-top: 0;
}

h1 { font-size: clamp(2rem, 5vw, 3rem); }
h2 { font-size: clamp(1.5rem, 4vw, 2.25rem); }
h3 { font-size: 1.25rem; }

.section-title {
	text-align: center;
	margin-bottom: var(--space-md);
}
.section-title--light {
	color: var(--color-white);
}
.section-subtitle {
	text-align: center;
	color: var(--color-muted);
	max-width: 560px;
	margin-left: auto;
	margin-right: auto;
	margin-bottom: var(--space-2xl);
}

/* ========== ANIMACIONES DE ENTRADA (scroll) ========== */
.animate-in {
	opacity: 0;
	transform: translateY(20px);
	transition: opacity 0.6s var(--ease-out), transform 0.6s var(--ease-out);
}
.animate-in.is-visible {
	opacity: 1;
	transform: translateY(0);
}

/* Stagger opcional para grids (JS añade delay) */
.animate-in[data-delay] { transition-delay: calc(var(--delay, 0) * 0.1s); }