/* ========================================================================== SUARPE CREACIONES — DESIGN TOKENS Variables globales únicamente. No hay estilos de componentes aquí. Si cambias un valor, se propaga a toda la web. Índice: 1. Color — paleta base y capa semántica 2. Tipografía — familias, escala fluida, pesos, interlineado 3. Espaciado — escala en base 8 4. Radios de borde 5. Sombras 6. Movimiento — duración y easing 7. Breakpoints de referencia (documentales; los media queries reales viven en components.css porque CSS no permite variables dentro de @media) CARGA DE FUENTES EN PRODUCCIÓN (importante para rendimiento): Este archivo NO lleva @import de Google Fonts a propósito — @import bloquea el renderizado y añade una ida y vuelta extra a la carga (perjudica Core Web Vitals, concretamente LCP). En WordPress, cargar Bree Serif y Nunito Sans correctamente es: 1) en el (vía functions.php o el propio Kadence) 2) wp_enqueue_style() apuntando a la hoja de Google Fonts, o mejor aún, autoalojar los .woff2 en el tema para eliminar la dependencia externa por completo (recomendado a medio plazo). Los archivos de mockup/comparación sí usan @import, pero solo por comodidad de tener un único archivo portátil — no es el método de producción. ========================================================================== */ :root{ /* -------------------------------------------------------------------- 1. COLOR -------------------------------------------------------------------- */ /* 1.1 Paleta base de marca — no tocar salvo rebranding */ --sp-cream: #f8f2e7; --sp-cream-deep: #f1e9db; --sp-white: #fffdf9; --sp-rose: #b96b76; --sp-rose-dark: #9a4f5b; --sp-rose-darker: #7d3f49; --sp-ink: #3d332c; --sp-ink-soft: #6b5d52; --sp-gold: #cfa25a; --sp-gold-dark: #b3894a; --sp-sage: #8a9a7e; --sp-sage-dark: #71805f; --sp-line: #e5dac8; --sp-terracotta: #b6493f; --sp-amber: #c98f4a; /* 1.2 Capa semántica — esto es lo que se usa en components.css. Cambiar el color de marca solo requiere tocar la sección 1.1. */ --color-primary: var(--sp-rose-dark); --color-primary-hover: var(--sp-rose-darker); --color-secondary: var(--sp-sage); --color-secondary-hover: var(--sp-sage-dark); --color-accent: var(--sp-gold); --color-accent-hover: var(--sp-gold-dark); --color-success: #7c9473; --color-warning: var(--sp-amber); --color-error: var(--sp-terracotta); --color-background: var(--sp-cream); --color-surface: var(--sp-white); --color-surface-alt: var(--sp-cream-deep); --color-border: var(--sp-line); --color-border-hover: var(--sp-rose); --color-heading: var(--sp-ink); --color-text: var(--sp-ink); --color-text-muted: var(--sp-ink-soft); --color-text-on-dark: var(--sp-cream); /* -------------------------------------------------------------------- 2. TIPOGRAFÍA -------------------------------------------------------------------- */ --font-display: 'Bree Serif', 'Georgia', serif; /* titulares y elementos editoriales — más redonda y cercana que DM Serif Display */ --font-accent-italic: 'DM Serif Display', 'Georgia', serif; /* SOLO para los acentos en cursiva (frase de acento en titulares, firma de Nuestra Historia, logo del footer, cita de Testimonials) — Bree Serif no tiene itálica real, así que esos puntos concretos recuperan DM Serif Display, que sí la tiene */ --font-body: 'Nunito Sans', -apple-system, 'Segoe UI', sans-serif; /* navegación, texto, botones, producto, formularios */ /* Escala fluida con clamp(mínimo, preferido, máximo). El valor preferido crece con el viewport, así que no hace falta redefinir tamaños por breakpoint en la mayoría de los casos. */ --text-hero: clamp(2.75rem, 2rem + 3vw, 4.25rem); /* 44px → 68px — reducido desde 80px para que "cuenta una historia." quepa en una sola línea */ --text-h1: clamp(2.25rem, 1.8rem + 1.8vw, 3.5rem); /* 36px → 56px */ --text-h2: clamp(1.75rem, 1.5rem + 1.1vw, 2.5rem); /* 28px → 40px */ --text-h3: clamp(1.375rem, 1.2rem + 0.7vw, 1.75rem);/* 22px → 28px */ --text-h4: clamp(1.125rem, 1.05rem + 0.35vw, 1.375rem); /* 18px → 22px */ --text-body-xl: clamp(1.125rem, 1.05rem + 0.3vw, 1.25rem); /* 18px → 20px */ --text-body: 1rem; /* 16px — tamaño base fijo, no fluido */ --text-small: 0.875rem; /* 14px */ --text-caption: 0.75rem; /* 12px */ --weight-regular: 400; --weight-medium: 500; --weight-semibold: 600; /* Nota (revisión tipográfica Bree Serif + Nunito Sans): Bree Serif SOLO existe en un peso (400) y SIN cursiva real. Por eso todos los titulares (h1–h4, hero, sp-collection-title, precio de producto en WooCommerce) se mantienen en --weight-regular en components.css — pedirle un 500/600 a esta fuente no tiene efecto real y arriesga un "bold" sintético feo del navegador. Nunito Sans sí cubre 400/500/600 de forma nativa, así que en textos funcionales (botones, navegación, producto, formularios) no ha hecho falta tocar nada. Por la misma razón (sin cursiva real), los acentos de marca que antes usaban font-style:italic (frase de acento en titulares, firma de "Nuestra Historia", logo del footer, cita de Testimonials) se resolvieron con --color-primary (burdeos) en su lugar, sin inclinar el texto — ver components.css. */ --leading-tight: 1.2; /* titulares — antes 1.15: Bree Serif tiene ascendentes/descendentes más dramáticos que Cormorant Garamond y se notaba apretado en titulares de 2 líneas (el propio Hero) */ --leading-normal: 1.5; /* texto de cuerpo */ --leading-relaxed: 1.75; /* párrafos largos, descripciones */ --tracking-tight: 0; /* antes -0.01em: ese ajuste se pensó para Cormorant Garamond, una serif ya de por sí abierta. Bree Serif es más compacta y de trazo alto por diseño; añadirle tracking negativo encima la sentía apretada en el H1 */ --tracking-normal: 0; --tracking-wide: 0.03em; /* botones, eyebrows */ --tracking-wider: 0.28em; /* eyebrows en mayúsculas — probado con Nunito Sans en mayúsculas: se mantiene, sostiene bien el tracking amplio sin verse hueca */ /* -------------------------------------------------------------------- 3. ESPACIADO — escala en base 8 -------------------------------------------------------------------- */ --space-xs: 0.5rem; /* 8px */ --space-sm: 1rem; /* 16px */ --space-md: 1.5rem; /* 24px */ --space-lg: 2rem; /* 32px */ --space-xl: 3rem; /* 48px */ --space-2xl: 4rem; /* 64px */ --space-3xl: 6rem; /* 96px */ --space-4xl: 8rem; /* 128px */ /* -------------------------------------------------------------------- 4. RADIOS DE BORDE -------------------------------------------------------------------- */ --radius-xs: 2px; --radius-sm: 4px; --radius-md: 8px; --radius-lg: 16px; --radius-xl: 24px; --radius-full: 999px; /* píldoras, avatares */ /* -------------------------------------------------------------------- 5. SOMBRAS — muy suaves, nunca agresivas. Usan el tono ink de marca en vez de negro puro, para que la sombra tenga temperatura cálida en vez de leer como una sombra genérica. -------------------------------------------------------------------- */ --shadow-xs: 0 1px 2px rgba(61, 51, 44, 0.04); --shadow-sm: 0 2px 8px rgba(61, 51, 44, 0.06); --shadow-md: 0 8px 24px -4px rgba(61, 51, 44, 0.08); --shadow-lg: 0 16px 40px -8px rgba(61, 51, 44, 0.10); --shadow-xl: 0 24px 64px -12px rgba(61, 51, 44, 0.12); /* Sombra de foco accesible (anillo, no glow) */ --shadow-focus: 0 0 0 3px rgba(185, 107, 118, 0.35); /* -------------------------------------------------------------------- 6. MOVIMIENTO -------------------------------------------------------------------- */ --duration-fast: 150ms; --duration-base: 250ms; --duration-slow: 450ms; --ease-standard: cubic-bezier(0.4, 0, 0.2, 1); --ease-out: cubic-bezier(0.16, 1, 0.3, 1); --lift-hover: -4px; /* desplazamiento vertical en hover de tarjetas */ /* -------------------------------------------------------------------- 7. LAYOUT -------------------------------------------------------------------- */ --container-max: 1280px; --container-padding: clamp(20px, 4vw, 64px); /* Altura aproximada del Header fijo (logo + nav en una línea + su padding vertical). La usa .sp-hero para no quedar tapado por el header, y sirve también como scroll-margin-top en cualquier sección a la que se enlace por ancla (ej. "Inspiración" en el menú). */ --header-height: 104px; /* altura VISUAL de la barra del header — se mantiene fina a propósito */ --header-clearance: 155px; /* antes 190px — el logo real (con su propio espacio en blanco dentro del archivo) no llega a ocupar toda la caja reservada */ /* -------------------------------------------------------------------- 7b. Z-INDEX — escala compartida, para no pelear capas a ciegas. Introducida con el Header (Componente 09): el dropdown, el header sticky y el menú móvil son los primeros elementos con position fixed/absolute del proyecto. -------------------------------------------------------------------- */ --z-dropdown: 100; --z-sticky: 200; --z-overlay: 300; --z-modal: 400; } /* -------------------------------------------------------------------- 8. BREAKPOINTS DE REFERENCIA (documental) CSS no permite variables dentro de @media, así que estos valores están fijados aquí como referencia y se repiten literalmente en components.css. Si cambias uno, cámbialo en ambos sitios. mobile: hasta 599px tablet: 600px – 899px laptop: 900px – 1279px desktop: 1280px en adelante -------------------------------------------------------------------- */ /* Respeta la preferencia de movimiento reducido del sistema operativo */ @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; } }