/* ============================================================ SPENCER ENTERTAINMENT — DESIGN TOKENS v2 Dirección artística: "Graffiti sobre cristal". La energía urbana del logo, ejecutada con la precisión de un producto tecnológico. Superficies de cristal, luz cenital, oro metálico y un negro con rango real de profundidad. ============================================================ */ :root { /* ---------- SUPERFICIES ---------- Antes había 3 tonos casi idénticos y todo se veía plano. Ahora hay una escala completa: el ojo distingue los planos y la interfaz gana profundidad sin añadir un solo color. */ --c-void: #000000; /* vacío absoluto, fondo del Hero */ --c-bg: #070707; /* base de la página */ --c-surface: #0C0C0E; /* secciones alternas */ --c-card: #121215; /* tarjetas */ --c-card-2: #17171B; /* tarjeta elevada / hover */ --c-elev: #1F1F25; /* menús, elementos flotantes */ /* Cristal: superficie translúcida sobre fondos con textura */ --c-glass: rgba(255,255,255,.032); --c-glass-strong: rgba(255,255,255,.055); /* ---------- BORDES ---------- Tres niveles. Un borde uniforme aplana la interfaz. */ --c-border: #26262B; --c-border-soft: #1A1A1E; --c-border-strong: #35353D; --c-border-glass: rgba(255,255,255,.08); /* Filo superior iluminado: simula que la luz cae desde arriba. Es el detalle que hace que una tarjeta parezca un objeto físico y no un rectángulo pintado. */ --hl-top: linear-gradient(90deg, transparent, rgba(255,255,255,.14) 50%, transparent); --hl-gold: linear-gradient(90deg, transparent, rgba(212,175,55,.55) 50%, transparent); /* ---------- TEXTO ---------- */ --c-text: #FFFFFF; --c-text-2: #B3B3B3; --c-text-3: #808080; --c-text-4: #5C5C63; /* marcas de agua, numeración decorativa */ /* ---------- ORO ---------- Deja de ser un color plano y se convierte en metal. Un dorado sin luz se lee barato; con degradado se lee caro. */ --c-gold: #D4AF37; --c-gold-lt: #F2DFA4; --c-gold-dk: #8E6F1E; --c-gold-hover: #E3C356; --c-on-gold: #0A0A0A; /* texto sobre oro: SIEMPRE negro */ --g-gold: linear-gradient(150deg, #F7E9BB 0%, #D9B646 38%, #B08B28 70%, #E7CE78 100%); --g-gold-text: linear-gradient(115deg, #FFF3CF 0%, #E0C15C 42%, #C09A31 100%); --g-gold-line: linear-gradient(90deg, transparent, var(--c-gold), transparent); --c-gold-soft: rgba(212,175,55,.09); --c-gold-soft2: rgba(212,175,55,.16); --c-gold-glow: rgba(212,175,55,.34); /* ---------- SEMÁNTICO ---------- */ --c-success: #22C55E; --c-warning: #F59E0B; --c-error: #EF4444; /* ---------- SOMBRAS ---------- En capas, como la luz real: un contacto duro y cercano, más una difusión amplia y suave. */ --sh-1: 0 1px 2px rgba(0,0,0,.55), 0 2px 8px -2px rgba(0,0,0,.45); --sh-2: 0 2px 4px rgba(0,0,0,.5), 0 10px 28px -8px rgba(0,0,0,.6); --sh-3: 0 4px 10px rgba(0,0,0,.5), 0 28px 70px -16px rgba(0,0,0,.75); --sh-4: 0 8px 20px rgba(0,0,0,.55),0 48px 110px -24px rgba(0,0,0,.85); --sh-gold: 0 0 0 1px rgba(212,175,55,.22), 0 10px 34px -10px rgba(212,175,55,.42); --sh-gold-lg: 0 0 0 1px rgba(212,175,55,.30), 0 18px 56px -12px rgba(212,175,55,.55); /* Brillo interior superior: da volumen a botones y tarjetas */ --inset-top: inset 0 1px 0 rgba(255,255,255,.09); --inset-gold: inset 0 1px 0 rgba(255,255,255,.42); /* ---------- TIPOGRAFÍA ---------- */ --font-sans: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; --font-mono: ui-monospace, "SF Mono", "JetBrains Mono", Menlo, Consolas, monospace; /* Escala más agresiva: el titular del Hero debe dominar. Un display tímido es lo que hace que una página parezca plantilla. */ --fs-hero: clamp(2.5rem, 1.55rem + 3.6vw, 4.5rem); /* 40 → 72 */ --fs-display: clamp(2.25rem, 1.45rem + 3.4vw, 4.25rem); /* 36 → 68 */ --fs-h1: clamp(2.00rem, 1.50rem + 2.1vw, 3.25rem); --fs-h2: clamp(1.75rem, 1.40rem + 1.5vw, 2.75rem); --fs-h3: clamp(1.25rem, 1.12rem + 0.6vw, 1.62rem); --fs-lead: clamp(1.06rem, 1.00rem + 0.32vw, 1.31rem); --fs-base: 1rem; --fs-sm: 0.875rem; --fs-xs: 0.75rem; --fs-2xs: 0.6875rem; --lh-tight: 0.99; --lh-snug: 1.14; --lh-normal: 1.55; --lh-loose: 1.7; --ls-hero: -0.045em; /* cuanto más grande el texto, más apretado */ --ls-display: -0.038em; --ls-heading: -0.024em; --ls-normal: -0.011em; --ls-wide: 0.10em; --ls-wider: 0.18em; --fw-normal: 400; --fw-medium: 500; --fw-semi: 600; --fw-bold: 700; --fw-black: 800; /* ---------- ESPACIADO ---------- */ --sp-1: .25rem; --sp-2: .5rem; --sp-3: .75rem; --sp-4: 1rem; --sp-5: 1.25rem; --sp-6: 1.5rem; --sp-7: 1.75rem; --sp-8: 2rem; --sp-10: 2.5rem; --sp-12: 3rem; --sp-14: 3.5rem; --sp-16: 4rem; --sp-20: 5rem; --sp-24: 6rem; --sp-32: 8rem; --sp-section: clamp(5.5rem, 3.5rem + 8vw, 11rem); /* ---------- LAYOUT ---------- */ --container: 1240px; --container-wide: 1400px; --container-text: 720px; --gutter: clamp(1.25rem, 0.85rem + 1.9vw, 2.75rem); --nav-h: 74px; /* ---------- RADIOS ---------- */ --r-xs: 6px; --r-sm: 10px; --r-md: 14px; --r-lg: 20px; --r-xl: 28px; --r-2xl: 36px; --r-full: 999px; /* ---------- MOVIMIENTO ---------- */ --ease: cubic-bezier(.16, 1, .3, 1); /* salida suave, premium */ --ease-out: cubic-bezier(.33, 1, .68, 1); --ease-soft: cubic-bezier(.4, 0, .2, 1); --t-fast: 150ms; --t-base: 260ms; --t-slow: 420ms; --t-reveal: 800ms; /* ---------- ALIAS DE COMPATIBILIDAD ---------- Nombres de la versión 1 que siguen en uso. Se mantienen apuntando a los tokens nuevos para no romper nada. */ --c-gold-line: rgba(212,175,55,.26); --c-card-hover: var(--c-card-2); --sh-sm: var(--sh-1); --sh-md: var(--sh-2); --sh-lg: var(--sh-3); /* ---------- CAPAS ---------- */ --z-bg: 0; --z-base: 1; --z-sticky: 40; --z-nav: 50; --z-menu: 60; --z-toast: 70; } @media (prefers-reduced-motion: reduce) { :root { --t-fast: 1ms; --t-base: 1ms; --t-slow: 1ms; --t-reveal: 1ms; } }