/* ============================================================ Brand fonts — Raleway + Nunito ya cargadas por Perfmatters self-hosted (R15.0 abr 2026). NO redeclaramos @font-face aquí para evitar duplicar peticiones — sólo definimos tokens CSS. Si Perfmatters está deshabilitado, Astra carga Raleway+Nunito vía Google Fonts. Tokens fallback compatibles con ambos casos. ============================================================ */ /* ============================================================ Espacio Neón — Design tokens Drop this :root block into any page. All selectors on live are scoped to .en-preview (body class) — keep that scoping so CSS doesn't collide with the Astra parent theme. ============================================================ */ :root { /* ---- Color — brand ---- */ --mg: #E6007E; /* Magenta — primary brand */ --am: #FFED00; /* Amarillo — primary CTA */ --vi: #440099; /* Violeta — secondary */ --vn: #00FF79; /* Verde neón — price / success (also --ve in legacy) */ --ve: #00FF79; /* alias */ /* ---- Color — surface ---- */ --ne: #161616; /* Negro — app default bg (never pure #000) */ --bl: #FFFFFF; /* Blanco */ --gr: #F5F5F5; /* Gris claro — card / light-section */ --gm: #E5E5E7; /* Gris medio — divider / input border */ /* ---- Color — accessibility escape hatches ---- */ --mg-aa: #B8005F; /* magenta that passes WCAG AA on white */ /* ---- Type ---- */ /* ---- Type ---- */ --ft: 'Raleway', sans-serif; /* display — heads (mixed weights 400/500/700/800) */ --fb: 'Nunito Sans', 'Nunito', sans-serif; /* body + UI — 400 regular */ --fn: 'Nunito Sans', 'Nunito', sans-serif; /* bold UI labels — 700 */ /* ---- Type scale (fluid) ---- */ --fs-h1: clamp(30px, 4.4vw, 56px); --fs-h2: clamp(24px, 3.2vw, 42px); --fs-h3: clamp(18px, 1.8vw, 24px); --fs-lead: clamp(15px, 1.15vw, 18px); --fs-body: 16px; --fs-sm: 14px; --fs-xs: 12px; --fs-eyebrow: clamp(11px, .85vw, 13px); /* ---- Layout ---- */ --mw: 1600px; /* max content width */ --pad-x: clamp(20px, 4vw, 60px); --pad-sec: clamp(56px, 7vw, 100px); /* top/bottom section padding */ /* ---- Radius ---- */ --r-chip: 4px; --r-btn: 8px; --r-card: 12px; --r-xl: 16px; --r-pill: 999px; /* ---- Motion ---- */ --t: .25s ease; /* ---- Glow recipe — layered rgba ---- */ --glow-mg-soft: 0 0 8px rgba(230,0,126,.5), 0 0 24px rgba(230,0,126,.3), 0 0 48px rgba(230,0,126,.12); --glow-mg-btn: 0 0 14px rgba(230,0,126,.5), 0 0 32px rgba(230,0,126,.2); --glow-am-btn: 0 0 8px rgba(255,237,0,.5), 0 0 24px rgba(255,237,0,.35), 0 0 50px rgba(255,237,0,.15); --glow-vn-soft: 0 0 12px rgba(0,255,121,.25); --glow-vi-btn: 0 0 16px rgba(68,0,153,.3); --glow-white: 0 0 3px rgba(255,255,255,.5), 0 0 8px rgba(255,255,255,.25); } /* ============================================================ Font loading — all brand fonts are already declared above via @font-face. Just link this stylesheet in : ============================================================ */