@import url('fonts.css'); /* fuentes auto-hospedadas (Google Fonts), sin CDN */ /* ========================================================================== NEXUS RGB — Sistema de 3 temas (Fase 2, propuestas de diseno completas) Se activan con el atributo data-tema en (lo pone assets/js/temas.js leyendo ?tema=1|2|3). Cada bloque re-skinea paleta + TIPOGRAFIA + hero + botones + tarjetas. Cargar SIEMPRE despues de estilos.css. Tema 1 — NITRO : oscuro RGB, alta performance. Tipografia Orbitron + Rajdhani. Tema 2 — STUDIO : setup limpio minimalista, acento cian. Tipografia Montserrat. Tema 3 — ARCADE : neon brutalista, juvenil. Tipografia Bungee + Poppins. ========================================================================== */ /* Tipografia por tema: los titulos usan --fuente-titulo y el cuerpo --fuente. */ h1, h2, h3, h4, .logo, .seccion-titulo h2, .hero h1, .pagina-cabecera h1, .banner-cta h2 { font-family: var(--fuente-titulo, var(--fuente)); } /* Descripcion de mood (oculta; la usa la Fase 2 / lectores) */ .tema-mood { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; } /* ---------------- Selector flotante de tema ---------------- */ .tema-switch { position: fixed; right: 16px; bottom: 16px; z-index: 200; display: flex; align-items: center; gap: 6px; padding: 8px 10px; border-radius: 999px; background: rgba(15, 15, 24, 0.92); border: 1px solid rgba(255, 255, 255, 0.16); backdrop-filter: blur(8px); box-shadow: 0 8px 24px rgba(0, 0, 0, 0.4); } .tema-switch .tema-lbl { font-size: .68rem; color: #cfcfe0; font-weight: 800; letter-spacing: 1.5px; text-transform: uppercase; padding: 0 4px; } .tema-switch button { width: 30px; height: 30px; border-radius: 999px; cursor: pointer; border: 1px solid rgba(255, 255, 255, 0.22); background: transparent; color: #e8e8f0; font-weight: 800; font-family: inherit; font-size: .9rem; transition: transform .12s ease; } .tema-switch button:hover { transform: translateY(-2px); } .tema-switch button.on { background: var(--rgb-diag); color: #0a0a0f; border-color: transparent; } /* ========================================================================== TEMA 1 — NITRO (explicito; coincide con los valores por defecto de estilos.css) ========================================================================== */ html[data-tema="1"] { --bg: #0a0a0f; --bg-2: #101019; --surface: #14141f; --surface-2: #1c1c2b; --border: #262636; --text: #ecedf4; --muted: #9a9ab4; --morado: #8b5cf6; --cian: #22d3ee; --magenta: #ec4899; --rgb: linear-gradient(90deg, #8b5cf6, #22d3ee, #ec4899); --rgb-diag: linear-gradient(135deg, #8b5cf6, #22d3ee 55%, #ec4899); --radio: 14px; --fuente: 'Rajdhani', 'Segoe UI', system-ui, sans-serif; --fuente-titulo: 'Rajdhani', 'Segoe UI', system-ui, sans-serif; } /* Nitro: titulares Rajdhani bold + acentos futuristas Orbitron en logo y eyebrows */ html[data-tema="1"] body { font-size: 1.04rem; } html[data-tema="1"] h1, html[data-tema="1"] h2, html[data-tema="1"] .hero h1, html[data-tema="1"] .pagina-cabecera h1 { font-weight: 700; letter-spacing: .4px; } html[data-tema="1"] .logo, html[data-tema="1"] .seccion-titulo .eyebrow { font-family: 'Orbitron', 'Segoe UI', sans-serif; letter-spacing: 2px; } /* ========================================================================== TEMA 2 — STUDIO (minimalista, un solo acento cian, mas aire, bordes suaves) ========================================================================== */ html[data-tema="2"] { --bg: #0d1017; --bg-2: #111621; --surface: #141a25; --surface-2: #1b2130; --border: #232b3a; --text: #e7ebf3; --muted: #8a93a6; --morado: #60a5fa; --cian: #38bdf8; --magenta: #7dd3fc; --rgb: linear-gradient(90deg, #38bdf8, #7dd3fc); --rgb-diag: linear-gradient(135deg, #38bdf8, #60a5fa); --radio: 18px; --fuente: 'Montserrat', 'Segoe UI', system-ui, sans-serif; --fuente-titulo: 'Montserrat', 'Segoe UI', system-ui, sans-serif; } html[data-tema="2"] body { letter-spacing: .2px; } html[data-tema="2"] h1, html[data-tema="2"] h2, html[data-tema="2"] .hero h1 { font-weight: 600; letter-spacing: -.4px; } html[data-tema="2"] .seccion-titulo .eyebrow { color: #38bdf8; letter-spacing: 4px; } html[data-tema="2"] .hero { background: linear-gradient(180deg, #0d1017 0%, #0f1420 100%); } html[data-tema="2"] .hero-badge { color: #38bdf8; } html[data-tema="2"] .btn-rgb { background: #38bdf8; color: #04121d; box-shadow: none; } html[data-tema="2"] .btn-rgb:hover { background: #56c6fa; box-shadow: 0 8px 24px rgba(56, 189, 248, .3); } html[data-tema="2"] .btn { border-radius: 10px; } html[data-tema="2"] .card { box-shadow: none; } html[data-tema="2"] .card:hover { border-color: #38bdf8; box-shadow: 0 10px 30px rgba(56, 189, 248, .14); } html[data-tema="2"] .card-cat { color: #38bdf8; } html[data-tema="2"] .opcion.activa { border-color: #38bdf8; background: rgba(56, 189, 248, .1); color: #38bdf8; } html[data-tema="2"] .banner-cta { background: radial-gradient(600px 300px at 50% 0%, rgba(56, 189, 248, .16), transparent 65%), #141a25; } /* ========================================================================== TEMA 3 — ARCADE (neon brutalista: verde acido + magenta, bold, esquinas duras) ========================================================================== */ html[data-tema="3"] { --bg: #08080a; --bg-2: #0d0d10; --surface: #111116; --surface-2: #17171d; --border: #2b2b33; --text: #f2f2ee; --muted: #9a9aa2; --morado: #b026ff; --cian: #00e5ff; --magenta: #ff2e9a; --rgb: linear-gradient(90deg, #c6ff3d, #00e5ff, #ff2e9a); --rgb-diag: linear-gradient(120deg, #c6ff3d, #00e5ff 50%, #ff2e9a); --radio: 4px; --fuente: 'Poppins', 'Segoe UI', system-ui, sans-serif; --fuente-titulo: 'Bungee', 'Arial Black', sans-serif; } /* Arcade: titulares display Bungee (chunky arcade) + cuerpo Poppins legible */ html[data-tema="3"] h1, html[data-tema="3"] h2, html[data-tema="3"] .seccion-titulo h2, html[data-tema="3"] .logo, html[data-tema="3"] .banner-cta h2, html[data-tema="3"] .pagina-cabecera h1 { letter-spacing: 0; line-height: 1.18; } html[data-tema="3"] .hero h1 { font-size: clamp(1.7rem, 3.6vw, 2.7rem); line-height: 1.2; } html[data-tema="3"] .seccion-titulo h2 { font-size: clamp(1.5rem, 3vw, 2rem); } html[data-tema="3"] .seccion-titulo .eyebrow, html[data-tema="3"] .hero-badge { color: #c6ff3d; } html[data-tema="3"] .hero-badge { border-color: rgba(198, 255, 61, .5); } html[data-tema="3"] .hero { background: radial-gradient(700px 480px at 82% -10%, rgba(198, 255, 61, .16), transparent 60%), radial-gradient(560px 420px at 4% 112%, rgba(255, 46, 154, .18), transparent 60%), repeating-linear-gradient(45deg, rgba(255, 255, 255, .015) 0 12px, transparent 12px 24px); } html[data-tema="3"] .btn { border-radius: 4px; font-weight: 800; text-transform: uppercase; letter-spacing: .5px; } html[data-tema="3"] .btn-rgb { background: #c6ff3d; color: #0a0a0a; box-shadow: 5px 5px 0 rgba(255, 46, 154, .9); } html[data-tema="3"] .btn-rgb:hover { box-shadow: 7px 7px 0 rgba(0, 229, 255, .8); transform: translateY(-2px); } html[data-tema="3"] .btn-outline { border: 2px solid #00e5ff; color: #00e5ff; } html[data-tema="3"] .btn-outline:hover { border-color: #c6ff3d; color: #c6ff3d; } html[data-tema="3"] .card { border: 2px solid var(--border); border-radius: 4px; box-shadow: none; } html[data-tema="3"] .card:hover { transform: translateY(-4px); border-color: #c6ff3d; box-shadow: 6px 6px 0 rgba(0, 229, 255, .5); } html[data-tema="3"] .card-cat { color: #08080a; background: #c6ff3d; border: none; } html[data-tema="3"] .opcion { border-radius: 4px; } html[data-tema="3"] .opcion.activa { border-color: #c6ff3d; background: rgba(198, 255, 61, .12); color: #c6ff3d; } html[data-tema="3"] .miniatura { border-radius: 4px; } html[data-tema="3"] .miniatura.activa { border-color: #c6ff3d; } html[data-tema="3"] .galeria-principal { border-radius: 4px; } html[data-tema="3"] .banner-cta { border-radius: 6px; border: 2px solid #2b2b33; background: radial-gradient(600px 300px at 50% 0%, rgba(255, 46, 154, .22), transparent 65%), #111116; } html[data-tema="3"] .aviso-placeholder code { color: #c6ff3d; }