/* ============================================================
LOOP STORE — DESIGN SYSTEM · TOKENS (v2)
Fiel al Documento Maestro de Design System (fuente única de verdad).
Tema propio, sin builder. Todo componente deriva de estos tokens.
============================================================ */
/* ─────────────────────────────────────────
TIPOGRAFÍA — Mohave (fuente única de marca)
Opción A (self-hosted, recomendada para rendimiento):
coloca Mohave-VariableFont_wght.woff2 en /assets/fonts/ del tema.
Opción B (Google Fonts, más rápido de probar): pega en el :
───────────────────────────────────────── */
/* Tipografías del nuevo diseño (Hanken, Familjen, Big Shoulders, Martian Mono)
se cargan desde Google Fonts en functions.php. Para máximo rendimiento en
producción: bundlear los .woff2 en /assets/fonts y declararlos con @font-face. */
:root {
/* ==========================================================
COLOR
========================================================== */
/* Base */
--color-bg: #0A0A0A; /* fondo global */
--color-bg-elevated: #141414; /* tarjetas oscuras, franja de marcas */
--color-surface: #FFFFFF; /* cards de producto, contenido */
/* Acento — marca (lima) */
--color-accent: #C6D400;
--color-accent-hover: #AEBC00;
--color-accent-active: #93A000;
--color-accent-contrast: #0A0A0A; /* texto sobre el lima */
/* Acentos semánticos del nuevo diseño */
--color-data: #39D4E6; /* dato / ficha técnica (eje "Sala de control") */
--color-data-ink: #0A0C0E; /* texto sobre cian */
--color-people: #E8A33D; /* personas / asesoría (eje "El booth") */
/* Texto */
--color-text-primary: #FFFFFF; /* sobre negro */
--color-text-secondary: #B3B3B3; /* secundario sobre negro */
--color-text-on-surface: #141414; /* sobre card blanca */
--color-text-muted-on-surface: #6B6B6B; /* precio tachado, categoría */
/* Semánticos */
--color-success: #C6D400; /* reutiliza el acento */
--color-error: #E5484D;
--color-border: #2A2A2A; /* separadores sobre negro */
--color-border-on-surface:#E5E5E5; /* separadores sobre blanco */
/* Banner promo (skin de campaña, no core) */
--gradient-promo: linear-gradient(135deg, #1E3A8A 0%, #6D28D9 100%);
/* ==========================================================
TIPOGRAFÍA
========================================================== */
/* Sistema tipográfico — nuevo diseño 2026 (dir. "El booth" + ficha técnica).
cuerpo: Hanken Grotesk · display: Familjen Grotesk · técnico/ficha: Big
Shoulders Display · datos/specs: Martian Mono. Se cargan desde Google Fonts
(functions.php); bundlear .woff2 local en producción. */
--font-family-base: 'Hanken Grotesk', system-ui, 'Helvetica Neue', Arial, sans-serif;
--font-display: 'Familjen Grotesk', system-ui, 'Helvetica Neue', Arial, sans-serif;
--font-tech: 'Big Shoulders Display', 'Hanken Grotesk', system-ui, sans-serif;
--font-mono: 'Martian Mono', ui-monospace, 'SFMono-Regular', monospace;
/* Pesos */
--weight-regular: 400;
--weight-semibold: 600;
--weight-bold: 700;
/* Escala (base 16px, ratio ~1.25) */
--text-display: 3.5rem; /* 56px */ --lh-display: 1.05;
--text-h1: 2.5rem; /* 40px */ --lh-h1: 1.1;
--text-h2: 1.75rem; /* 28px */ --lh-h2: 1.15;
--text-h3: 1.25rem; /* 20px */ --lh-h3: 1.2;
--text-body-lg: 1.125rem; /* 18px */ --lh-body-lg: 1.4;
--text-body: 1rem; /* 16px */ --lh-body: 1.5;
--text-body-sm: 0.875rem; /* 14px */ --lh-body-sm: 1.4;
--text-caption: 0.75rem; /* 12px */ --lh-caption: 1.3;
--text-price: 1.125rem; /* 18px */ --lh-price: 1.2;
--text-price-strike: 0.8125rem; /* 13px */ --lh-price-strike: 1.2;
/* Tracking */
--tracking-section: 0.04em; /* títulos de sección en mayúsculas */
/* ==========================================================
ESPACIADO — base 8px
========================================================== */
--space-1: 4px;
--space-2: 8px;
--space-3: 16px;
--space-4: 24px;
--space-5: 32px;
--space-6: 48px;
--space-7: 64px;
--space-8: 96px;
/* ==========================================================
GRID & LAYOUT
========================================================== */
--container-max: 1280px;
--container-padding: var(--space-4);
--grid-gap: var(--space-3);
/* ==========================================================
RADIOS / BORDES / FOCO / MISC
========================================================== */
--radius-btn: 2px;
--radius-card: 4px;
--focus-outline: 2px solid var(--color-accent);
--focus-offset: 2px;
--transition-base: 150ms ease;
--z-header: 100;
--z-dropdown: 200;
--z-overlay: 300;
--z-modal: 400;
}
/* ============================================================
BASE / RESET LIGERO
============================================================ */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; max-width: 100%; overflow-x: hidden; }
body {
margin: 0;
max-width: 100%;
overflow-x: hidden;
font-family: var(--font-family-base);
font-size: var(--text-body);
line-height: var(--lh-body);
color: var(--color-text-on-surface);
background: var(--color-bg);
-webkit-font-smoothing: antialiased;
}
h1, h2, h3, h4 {
font-family: var(--font-display);
font-weight: var(--weight-bold);
letter-spacing: -0.01em;
margin: 0 0 var(--space-3);
line-height: 1.12;
}
a { color: inherit; text-decoration: none; }
img { max-width: 100%; height: auto; display: block; }
:focus-visible { outline: var(--focus-outline); outline-offset: var(--focus-offset); }
.ls-container {
width: 100%;
max-width: var(--container-max);
margin-inline: auto;
padding-inline: var(--container-padding);
}
.ls-section-title {
font-size: var(--text-h2);
line-height: var(--lh-h2);
font-weight: var(--weight-bold);
text-transform: uppercase;
letter-spacing: var(--tracking-section);
color: var(--color-accent);
text-align: center;
}
/* ============================================================
BOTONES (§6.2)
============================================================ */
.btn-primary {
display: inline-flex; align-items: center; justify-content: center; gap: var(--space-1);
background: var(--color-accent);
color: var(--color-accent-contrast);
font-family: var(--font-family-base);
font-weight: var(--weight-bold);
text-transform: uppercase;
font-size: var(--text-body-sm);
padding: var(--space-2) var(--space-4);
border: none;
border-radius: var(--radius-btn);
cursor: pointer;
transition: background var(--transition-base);
}
.btn-primary:hover { background: var(--color-accent-hover); }
.btn-primary:active { background: var(--color-accent-active); }
.btn-secondary {
display: inline-flex; align-items: center; justify-content: center; gap: var(--space-1);
background: transparent;
color: var(--color-accent);
border: 1px solid var(--color-accent);
font-weight: var(--weight-bold);
text-transform: uppercase;
font-size: var(--text-body-sm);
padding: var(--space-2) var(--space-4);
border-radius: var(--radius-btn);
cursor: pointer;
transition: background var(--transition-base), color var(--transition-base);
}
.btn-secondary:hover { background: var(--color-accent); color: var(--color-accent-contrast); }
.btn-outline-dark {
display: inline-flex; align-items: center; justify-content: center; gap: var(--space-1);
background: transparent;
color: var(--color-accent-contrast);
border: 1px solid var(--color-accent-contrast);
font-weight: var(--weight-bold);
text-transform: uppercase;
font-size: var(--text-body-sm);
padding: var(--space-2) var(--space-4);
border-radius: var(--radius-btn);
cursor: pointer;
transition: background var(--transition-base), color var(--transition-base);
}
.btn-outline-dark:hover { background: var(--color-accent-contrast); color: var(--color-surface); }
/* ============================================================
BREAKPOINTS (referencia)
sm < 640 (2col) · md 640–1024 (3col) · lg 1024–1280 (4col) · xl > 1280 (5col)
============================================================ */