/* ═══════════════════════════════════════════════════════════ SoulsGuides — GUIDE HUB COMPARTIDO (todas las guías) Sistema neutro de dos vistas para los hubs de juego: · Vista inmersiva (por defecto): menú tipo videojuego con lista de secciones, panel de texto y número fantasma. · Vista clásica: hero cinematográfico + grid de tarjetas. El toggle vive en .ghub-view-classic (localStorage 'sg-hub-view', clave GLOBAL compartida por todos los juegos). TEMA POR JUEGO: cada página define sus variables --hub-* en su bloque .page- (ver :root de abajo para el listado). Los colores compuestos usan tripletas RGB ("R G B") para poder generar rgba() con cualquier opacidad. ═══════════════════════════════════════════════════════════ */ /* ──── Variables de tema (defaults: paleta carmesí Khazan) ──── */ :root { /* Fondos profundos (tripletas para rgba) */ --hub-bg-rgb: 8 6 15; --hub-bg-deep-rgb: 4 3 9; /* Acento principal (botones, líneas, brillos) */ --hub-accent: #c94a4a; --hub-accent-l: #e06868; --hub-accent-d: #8a2e2e; --hub-accent-rgb: 201 74 74; /* Acento secundario (hovers alternativos, partículas) */ --hub-sec: #9b59b6; --hub-sec-l: #bb7dd4; --hub-sec-rgb: 155 89 182; --hub-sec-l-rgb: 187 125 212; /* Realce cálido (badge, contador, tags del panel) */ --hub-hi: #d4a050; --hub-hi-l: #e8b86a; --hub-hi-rgb: 212 160 80; --hub-hi-l-rgb: 232 184 106; /* Terciario ambiental (embers del CTA, degradados de fondo) */ --hub-ter-rgb: 199 72 120; /* Blanco del tema (rayos de luz) */ --hub-white-rgb: 240 236 244; /* Degradado de títulos (em de "Elige tu Destino", CTA…) */ --hub-title-grad: linear-gradient(135deg, var(--white) 0%, #c74878 25%, var(--hub-sec-l) 50%, var(--hub-accent) 75%, var(--hub-hi) 100%); /* Paletas de partículas (tripletas separadas por comas). Las lee js/guide-hub.js en tiempo de ejecución. */ --hub-embers: 201 74 74, 224 104 104, 155 89 182, 187 125 212; --hub-cta-embers: 201 74 74, 155 89 182, 199 72 120; --hub-particles: 201 74 74, 155 89 182, 199 72 120, 109 60 138, 212 160 80; } /* ═══════════════════════════════════════════════════════════ CONMUTACIÓN DE VISTAS ═══════════════════════════════════════════════════════════ */ .ghub-classic { display: none; } html.ghub-view-classic .ghub-classic { display: block; } html.ghub-view-classic .ghubv { display: none; } /* ── Botón de cambio de vista ── */ .ghub-view-btn { display: inline-flex; align-items: center; gap: 8px; font-family: var(--ff); font-size: 10px; font-weight: 700; letter-spacing: 0.2em; text-transform: uppercase; color: var(--text-l); background: rgba(var(--hub-bg-rgb) / 0.55); border: 1px solid rgba(var(--hub-accent-rgb) / 0.3); padding: 8px 14px; border-radius: 100px; cursor: pointer; transition: all 0.35s cubic-bezier(0.19, 1, 0.22, 1); } .ghub-view-btn:hover { color: var(--white); border-color: rgba(var(--hub-accent-rgb) / 0.6); background: rgba(var(--hub-accent-rgb) / 0.12); box-shadow: 0 0 22px rgba(var(--hub-accent-rgb) / 0.2); } .ghub-view-btn--hub { margin-top: 22px; } /* Botón de retorno flotando sobre el hero clásico */ .ghub-view-btn--hero { position: absolute; top: calc(var(--nav-h, 72px) + 18px); right: clamp(18px, 3vw, 40px); z-index: 5; } /* ── Botón "cambiar fondo" (solo edit mode) ── */ .ghub-bg-pick { display: inline-flex; align-items: center; gap: 7px; font-family: var(--ff); font-size: 10px; font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase; color: #7ee0a3; background: rgba(var(--hub-bg-rgb) / 0.6); border: 1px dashed rgba(126, 224, 163, 0.55); padding: 8px 14px; border-radius: 100px; cursor: pointer; transition: all 0.3s; } .ghub-bg-pick:hover { color: #fff; background: rgba(126, 224, 163, 0.15); border-color: rgba(126, 224, 163, 0.9); } .ghub-bg-pick--hero { position: absolute; top: calc(var(--nav-h, 72px) + 62px); right: clamp(18px, 3vw, 40px); z-index: 5; } body:not(.edit-mode-active) .ghub-bg-pick { display: none; } /* ═══════════════════════════════════════════════════════════ CANVAS DE BRASAS DE PÁGINA COMPLETA ═══════════════════════════════════════════════════════════ */ #ghub-embers { position: fixed; top: 0; left: 0; width: 100%; height: 100%; z-index: 0; pointer-events: none; } /* ═══════════════════════════════════════════════════════════ VISTA INMERSIVA — menú de videojuego cinematográfico ═══════════════════════════════════════════════════════════ */ .ghubv { position: relative; z-index: 1; min-height: 100svh; display: flex; flex-direction: column; overflow: hidden; padding-top: clamp(68px, 9vh, 88px); /* hueco para el navbar fijo */ } /* ── Fondo con arte clave ── */ .ghubv-bg { position: absolute; inset: 0; z-index: 0; animation: ghubvBgIn 2.4s ease both; } @keyframes ghubvBgIn { from { transform: scale(1.07); } to { transform: scale(1); } } .ghubv-bg img { width: 100%; height: 100%; object-fit: cover; object-position: center 20%; filter: brightness(0.5) saturate(0.92) contrast(1.08); transform: scale(1.06); animation: ghubvDrift 26s ease-in-out infinite alternate; } @keyframes ghubvDrift { to { transform: scale(1.13) translateX(-1.4%); } } .ghubv-bg::after { content: ''; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(var(--hub-bg-rgb) / 0.94) 0%, rgba(var(--hub-bg-rgb) / 0.72) 34%, rgba(var(--hub-bg-rgb) / 0.25) 62%, rgba(var(--hub-bg-rgb) / 0.55) 100%), linear-gradient(180deg, rgba(var(--hub-bg-rgb) / 0.6) 0%, transparent 26%, rgba(var(--hub-bg-rgb) / 0.88) 92%); } /* ── Capa cinematográfica ── */ .ghubv-vignette { position: absolute; inset: 0; z-index: 3; pointer-events: none; background: radial-gradient(ellipse 118% 90% at 50% 44%, transparent 58%, rgba(var(--hub-bg-deep-rgb) / 0.55) 84%, rgba(var(--hub-bg-deep-rgb) / 0.82) 100%); } .ghubv-rays { position: absolute; top: -12%; right: -4%; width: 60vw; height: 120%; z-index: 2; pointer-events: none; transform: rotate(14deg); transform-origin: top right; mix-blend-mode: screen; opacity: 0.5; } .ghubv-rays i { position: absolute; top: 0; bottom: 0; border-radius: 50%; filter: blur(6px); } .ghubv-rays i:nth-child(1) { left: 16%; width: 120px; background: linear-gradient(180deg, rgba(var(--hub-hi-l-rgb) / 0.16), rgba(var(--hub-hi-l-rgb) / 0.05) 55%, transparent 82%); animation: ghubvRay 9s ease-in-out infinite alternate; } .ghubv-rays i:nth-child(2) { left: 42%; width: 56px; background: linear-gradient(180deg, rgba(var(--hub-white-rgb) / 0.13), rgba(var(--hub-accent-rgb) / 0.05) 60%, transparent 85%); animation: ghubvRay 12s ease-in-out infinite alternate-reverse; } .ghubv-rays i:nth-child(3) { left: 62%; width: 170px; background: linear-gradient(180deg, rgba(var(--hub-hi-rgb) / 0.1), rgba(var(--hub-hi-rgb) / 0.04) 50%, transparent 78%); animation: ghubvRay 10.5s ease-in-out 1.6s infinite alternate; } @keyframes ghubvRay { from { opacity: 0.45; transform: translateX(-16px); } to { opacity: 1; transform: translateX(22px); } } .ghubv-fog { position: absolute; left: 0; right: 0; bottom: 0; height: 34%; z-index: 2; pointer-events: none; mix-blend-mode: screen; background: radial-gradient(ellipse 90% 100% at 60% 100%, rgba(var(--hub-sec-rgb) / 0.1), rgba(var(--hub-accent-rgb) / 0.05) 45%, transparent 75%); animation: ghubvFog 14s ease-in-out infinite alternate; } @keyframes ghubvFog { from { opacity: 0.5; transform: translateX(-2%) scaleY(0.94); } to { opacity: 1; transform: translateX(2.5%) scaleY(1.06); } } #ghubv-embers { position: absolute; inset: 0; z-index: 1; pointer-events: none; } html.sg-reduced-motion .ghubv-rays, html.sg-reduced-motion .ghubv-fog { display: none; } html.sg-reduced-motion .ghubv-bg, html.sg-reduced-motion .ghubv-bg img { animation: none; } /* ── Franja superior: breadcrumb + badge + toggle ── */ .ghubv-top { position: relative; z-index: 10; display: flex; align-items: center; justify-content: space-between; gap: 14px; flex-wrap: wrap; padding: 14px clamp(18px, 3vw, 40px); } .ghubv-crumbs { display: flex; align-items: center; gap: 10px; font-family: var(--ff); font-size: 10px; font-weight: 600; letter-spacing: 0.2em; text-transform: uppercase; color: var(--text); } .ghubv-crumbs a { transition: color 0.3s; } .ghubv-crumbs a:hover { color: var(--hub-accent-l); } .ghubv-crumb-sep { color: var(--hub-accent-d); } .ghubv-crumb-cur { color: var(--white); } .ghubv-top-right { display: flex; align-items: center; gap: 18px; flex-wrap: wrap; } .ghubv-badge { display: inline-flex; align-items: center; gap: 9px; font-family: var(--ff); font-size: 9.5px; font-weight: 700; letter-spacing: 0.24em; text-transform: uppercase; color: var(--hub-hi-l); } .ghubv-badge i { width: 6px; height: 6px; border-radius: 50%; background: var(--hub-hi); box-shadow: 0 0 9px rgba(var(--hub-hi-rgb) / 0.9); animation: ghubvPulse 2.4s infinite; } @keyframes ghubvPulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.35; } } /* ── Pausa de animaciones infinitas fuera del viewport ── La clase .sg-anim-offscreen la aplica guide-hub.js con un IntersectionObserver: mismas animaciones, pero el compositor descansa cuando la sección no se ve. ── */ .sg-anim-offscreen .ghubv-bg img, .sg-anim-offscreen .ghubv-rays i, .sg-anim-offscreen .ghubv-fog, .sg-anim-offscreen .ghubv-badge i, .sg-anim-offscreen .ghubv-more svg, .sg-anim-offscreen .ghub-hero-img, .sg-anim-offscreen .ghub-badge-dot, .sg-anim-offscreen .ghub-scroll-arrow, .sg-anim-offscreen .ghub-hero-scroll { animation-play-state: paused !important; } /* ── Escena: menú + panel ── */ .ghubv-scene { position: relative; z-index: 10; flex: 1; display: grid; grid-template-columns: minmax(340px, 560px) 1fr; align-items: stretch; gap: clamp(20px, 4vw, 60px); padding: clamp(14px, 2.5vh, 26px) clamp(18px, 3.4vw, 52px); min-height: 0; } /* ── Columna del menú ── */ .ghubv-menu-col { display: flex; flex-direction: column; justify-content: center; min-width: 0; } .ghubv-brand { margin-bottom: clamp(16px, 3vh, 32px); } .ghubv-h1 { line-height: 1; margin: 0; } .ghubv-brand-sm { display: block; font-family: var(--ff); font-size: clamp(10px, 1.1vw, 13px); font-weight: 600; letter-spacing: 0.5em; text-transform: uppercase; color: var(--text-l); margin-bottom: 8px; } .ghubv-brand-big { display: block; font-family: var(--ff-d); font-weight: 900; font-size: calc(clamp(38px, 5vw, 62px) * var(--sg-fit, 1)); line-height: 0.95; color: var(--white); text-shadow: 0 0 50px rgba(var(--hub-accent-rgb) / 0.45); } .ghubv-brand-big em { font-style: normal; color: transparent; -webkit-text-stroke: 1.5px rgba(var(--hub-accent-rgb) / 0.9); } .ghubv-brand-rule { display: flex; align-items: center; gap: 12px; margin-top: 14px; } .ghubv-brand-rule::before { content: ''; height: 1px; width: 56px; background: linear-gradient(90deg, var(--hub-accent), transparent); } .ghubv-brand-rule span { font-family: var(--ff); font-size: 9.5px; font-weight: 700; letter-spacing: 0.3em; text-transform: uppercase; color: var(--hub-accent-l); } .ghubv-shell { position: relative; min-width: 0; } .ghubv-clip { position: relative; } /* desvanecidos que avisan de que la lista sigue */ .ghubv-clip::before, .ghubv-clip::after { content: ''; position: absolute; left: 0; right: 0; height: 46px; z-index: 3; pointer-events: none; opacity: 0; transition: opacity 0.35s; } .ghubv-clip::before { top: 0; background: linear-gradient(180deg, rgba(var(--hub-bg-rgb) / 0.96), transparent); } .ghubv-clip::after { bottom: 0; background: linear-gradient(0deg, rgba(var(--hub-bg-rgb) / 0.96), transparent); } .ghubv-shell.can-up .ghubv-clip::before { opacity: 1; } .ghubv-shell.can-down .ghubv-clip::after { opacity: 1; } .ghubv-menu { display: flex; flex-direction: column; max-height: calc(44vh * var(--sg-fit, 1)); overflow-y: auto; scrollbar-width: none; padding-right: 6px; scroll-behavior: smooth; } .ghubv-menu::-webkit-scrollbar { display: none; } /* pie del menú: contador + aviso de scroll */ .ghubv-foot { display: flex; align-items: center; justify-content: space-between; gap: 14px; margin-top: 14px; padding: 12px 10px 0; border-top: 1px solid rgba(var(--hub-accent-rgb) / 0.16); } .ghubv-count { font-family: var(--ff); font-size: 10px; font-weight: 700; letter-spacing: 0.22em; text-transform: uppercase; color: var(--text); } .ghubv-count b { font-family: var(--ff); font-size: 14px; font-weight: 700; color: var(--hub-hi); letter-spacing: 0.08em; } .ghubv-more { display: inline-flex; align-items: center; gap: 9px; font-family: var(--ff); font-size: 9.5px; font-weight: 700; letter-spacing: 0.22em; text-transform: uppercase; color: var(--hub-accent-l); transition: opacity 0.4s; } .ghubv-more svg { animation: ghubvBob 1.5s ease-in-out infinite; } @keyframes ghubvBob { 0%, 100% { transform: translateY(-2px); } 50% { transform: translateY(3px); } } .ghubv-shell.end .ghubv-more { opacity: 0.25; } .ghubv-shell.end .ghubv-more svg { animation: none; } /* ── Item del menú ── */ .ghubv-mi { position: relative; display: flex; align-items: center; gap: 14px; padding: clamp(8px, 1.1vh, 12px) 10px; cursor: pointer; outline: none; transition: padding-left 0.4s cubic-bezier(0.19, 1, 0.22, 1); } .ghubv-diamond { width: 8px; height: 8px; background: var(--hub-accent); transform: rotate(45deg) scale(0); box-shadow: 0 0 12px rgba(var(--hub-accent-rgb) / 0.9); transition: transform 0.35s cubic-bezier(0.19, 1, 0.22, 1); flex-shrink: 0; } .ghubv-num { font-family: var(--ff); font-size: clamp(11px, 1.1vw, 13px); font-weight: 600; letter-spacing: 0.08em; color: var(--hub-accent-d); width: 34px; text-align: right; flex-shrink: 0; transition: color 0.3s; } .ghubv-name { font-family: var(--ff); font-weight: 700; font-size: calc(clamp(16px, 1.8vw, 23px) * var(--sg-fit, 1)); letter-spacing: 0.1em; text-transform: uppercase; color: var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; transition: color 0.3s, letter-spacing 0.4s cubic-bezier(0.19, 1, 0.22, 1), text-shadow 0.3s; } .ghubv-line { height: 1px; flex: 1; background: linear-gradient(90deg, rgba(var(--hub-accent-rgb) / 0.35), transparent); transform: scaleX(0); transform-origin: left; transition: transform 0.45s cubic-bezier(0.19, 1, 0.22, 1); } .ghubv-mi.sel { padding-left: 18px; } .ghubv-mi.sel .ghubv-diamond { transform: rotate(45deg) scale(1); } .ghubv-mi.sel .ghubv-num { color: var(--hub-hi); } .ghubv-mi.sel .ghubv-name { color: var(--white); letter-spacing: 0.16em; text-shadow: 0 0 26px rgba(var(--hub-accent-rgb) / 0.65); } .ghubv-mi.sel .ghubv-line { transform: scaleX(1); } /* ── Panel de vista previa: solo texto, sin imagen ── */ .ghubv-preview { position: relative; display: flex; align-items: center; justify-content: flex-end; min-width: 0; } /* número gigante fantasma detrás del texto */ .ghubv-ghost { position: absolute; right: -0.06em; top: 50%; transform: translateY(-54%); z-index: 0; pointer-events: none; font-family: var(--ff); font-weight: 700; font-size: calc(clamp(220px, 28vw, 430px) * var(--sg-fit, 1)); line-height: 1; color: transparent; -webkit-text-stroke: 1.5px rgba(var(--hub-accent-rgb) / 0.22); text-shadow: 0 0 90px rgba(var(--hub-accent-rgb) / 0.12); user-select: none; } .ghubv-ghost::after { content: attr(data-n); position: absolute; inset: 0; color: rgba(var(--hub-accent-rgb) / 0.045); -webkit-text-stroke: 0; } .ghubv-panel { position: relative; z-index: 2; max-width: 620px; padding: clamp(10px, 2vh, 20px) 0; } /* sombra suave detrás del texto para que se lea sobre el fondo */ .ghubv-panel::before { content: ''; position: absolute; inset: -50px -70px; z-index: -1; background: radial-gradient(ellipse at 50% 50%, rgba(var(--hub-bg-rgb) / 0.74), transparent 72%); } .ghubv-tag { display: inline-flex; align-items: center; gap: 10px; font-family: var(--ff); font-size: clamp(10px, 1vw, 12px); font-weight: 700; letter-spacing: 0.34em; text-transform: uppercase; color: var(--hub-hi-l); margin-bottom: 14px; } .ghubv-tag::before { content: ''; width: 30px; height: 1px; background: var(--hub-hi); } .ghubv-title { font-family: var(--ff); font-weight: 700; font-size: calc(clamp(30px, 4vw, 54px) * var(--sg-fit, 1)); letter-spacing: 0.04em; text-transform: uppercase; color: var(--white); line-height: 1.02; margin-bottom: 16px; text-shadow: 0 4px 32px rgba(var(--hub-bg-rgb) / 0.9); } .ghubv-orn { display: flex; align-items: center; gap: 12px; margin-bottom: 18px; } .ghubv-orn i { width: 7px; height: 7px; background: var(--hub-accent); transform: rotate(45deg); box-shadow: 0 0 10px rgba(var(--hub-accent-rgb) / 0.85); flex-shrink: 0; } .ghubv-orn::before { content: ''; height: 1px; width: 64px; background: linear-gradient(270deg, var(--hub-accent), transparent); } .ghubv-orn::after { content: ''; height: 1px; width: 120px; background: linear-gradient(90deg, var(--hub-accent), transparent); } .ghubv-desc { font-family: var(--ff); font-weight: 500; font-size: clamp(14.5px, 1.3vw, 17px); line-height: 1.85; letter-spacing: 0.02em; color: var(--text-l); margin-bottom: 28px; max-width: 52ch; text-shadow: 0 2px 18px rgba(var(--hub-bg-rgb) / 0.95); } .ghubv-cta { display: inline-flex; align-items: center; gap: 11px; font-family: var(--ff); font-size: 11.5px; font-weight: 700; letter-spacing: 0.24em; text-transform: uppercase; padding: 14px 28px; background: var(--hub-accent); color: var(--white); box-shadow: 0 0 26px rgba(var(--hub-accent-rgb) / 0.4); transition: all 0.35s cubic-bezier(0.19, 1, 0.22, 1); } .ghubv-cta:hover { background: var(--hub-accent-l); box-shadow: 0 0 44px rgba(var(--hub-accent-rgb) / 0.6); transform: translateY(-2px); } .ghubv-cta svg { transition: transform 0.35s cubic-bezier(0.19, 1, 0.22, 1); } .ghubv-cta:hover svg { transform: translateX(5px); } /* animación al cambiar de sección */ .ghubv-panel.swap .ghubv-tag, .ghubv-panel.swap .ghubv-title, .ghubv-panel.swap .ghubv-desc { animation: ghubvSwapIn 0.45s cubic-bezier(0.19, 1, 0.22, 1); } @keyframes ghubvSwapIn { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } } .ghubv-ghost.swap { animation: ghubvGhostIn 0.55s cubic-bezier(0.19, 1, 0.22, 1); } @keyframes ghubvGhostIn { from { opacity: 0; transform: translateY(-54%) scale(0.94); } to { opacity: 1; transform: translateY(-54%) scale(1); } } /* ── Barra de atajos de teclado ── */ .ghubv-hintbar { position: relative; z-index: 10; display: flex; align-items: center; justify-content: center; gap: clamp(16px, 3vw, 38px); padding: 12px 16px; border-top: 1px solid rgba(var(--hub-accent-rgb) / 0.14); background: linear-gradient(0deg, rgba(var(--hub-bg-rgb) / 0.85), rgba(var(--hub-bg-rgb) / 0.4)); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); } .ghubv-hint { display: flex; align-items: center; gap: 9px; font-family: var(--ff); font-size: 9.5px; font-weight: 600; letter-spacing: 0.2em; text-transform: uppercase; color: var(--text); } .ghubv-hint kbd { font-family: var(--ff); font-size: 9px; font-weight: 700; color: var(--text-l); border: 1px solid rgba(var(--hub-accent-rgb) / 0.35); background: rgba(var(--hub-accent-rgb) / 0.08); padding: 3px 8px; min-width: 24px; text-align: center; } /* ═══════════════════════════════════════════════════════════ VISTA CLÁSICA — HERO cinematográfico ═══════════════════════════════════════════════════════════ */ .ghub-hero { position: relative; z-index: 1; min-height: 100vh; min-height: 100dvh; display: flex; align-items: flex-end; padding-bottom: clamp(60px, 10vh, 120px); overflow: hidden; } .ghub-hero-bg { position: absolute; top: 0; right: 0; bottom: 0; left: 0; z-index: 0; } .ghub-hero-img { width: 100%; height: 100%; object-fit: cover; object-position: center 30%; filter: brightness(0.45) contrast(1.15) saturate(0.85); transform: scale(1.05); animation: ghubHeroZoom 20s ease-in-out infinite alternate; will-change: transform; } @keyframes ghubHeroZoom { 0% { transform: scale(1.05); } 100% { transform: scale(1.12); } } .ghub-hero-overlay { position: absolute; top: 0; right: 0; bottom: 0; left: 0; background: linear-gradient(180deg, rgba(var(--hub-bg-rgb) / 0.4) 0%, rgba(var(--hub-bg-rgb) / 0.1) 30%, rgba(var(--hub-bg-rgb) / 0.55) 65%, rgba(var(--hub-bg-rgb) / 0.96) 100% ), linear-gradient(90deg, rgba(var(--hub-bg-rgb) / 0.75) 0%, transparent 50%, rgba(var(--hub-bg-rgb) / 0.35) 100% ); pointer-events: none; } .ghub-hero-vignette { position: absolute; top: 0; right: 0; bottom: 0; left: 0; box-shadow: inset 0 0 200px 60px rgba(var(--hub-bg-rgb) / 0.65); pointer-events: none; } .ghub-hero-content { position: relative; z-index: 2; max-width: 1060px; margin: 0 auto; padding: 0 var(--px); width: 100%; } /* Breadcrumb */ .ghub-breadcrumb { display: flex; align-items: center; gap: 8px; font-size: 12px; letter-spacing: 0.1em; text-transform: uppercase; margin-bottom: 28px; flex-wrap: wrap; } .ghub-breadcrumb a { color: var(--text); transition: color 0.3s; min-height: 44px; display: inline-flex; align-items: center; padding: 4px 2px; } .ghub-breadcrumb a:hover { color: var(--hub-accent); } .ghub-bread-sep { color: var(--hub-accent-d); opacity: 0.5; } .ghub-bread-current { color: var(--hub-accent); font-weight: 600; } /* Badge */ .ghub-hero-badge { display: inline-flex; align-items: center; gap: 10px; font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.2em; color: var(--hub-accent); padding: 8px 18px; border: 1px solid rgba(var(--hub-accent-rgb) / 0.22); border-radius: 100px; background: rgba(var(--hub-accent-rgb) / 0.07); margin-bottom: 24px; -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); } .ghub-badge-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--hub-sec-l); animation: ghubDotPulse 2s ease-in-out infinite; box-shadow: 0 0 8px var(--hub-sec-l); } @keyframes ghubDotPulse { 0%, 100% { opacity: 1; box-shadow: 0 0 8px var(--hub-sec-l); } 50% { opacity: 0.5; box-shadow: 0 0 16px var(--hub-sec-l); } } /* Título compacto del hero */ .ghub-hero-title { font-family: var(--ff-d); font-weight: 900; line-height: 1.1; letter-spacing: -0.02em; margin-bottom: 24px; font-size: calc(clamp(28px, 4.5vw, 56px) * var(--sg-fit, 1)); display: flex; flex-wrap: wrap; align-items: baseline; gap: 0 12px; } .ghub-title-main { font-family: var(--ff-d); font-weight: 900; color: var(--white); font-size: inherit; } .ghub-title-sub-name { font-family: var(--ff-d); font-weight: 700; font-size: inherit; background: linear-gradient(135deg, var(--hub-sec-l) 0%, var(--hub-accent) 50%, var(--hub-sec) 100%); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; } /* Subtítulo */ .ghub-hero-sub { font-size: clamp(14px, 1.5vw, 17px); line-height: 1.7; color: var(--text-l); max-width: 620px; margin-bottom: 32px; opacity: 0.85; } /* Ocultar los elementos animados hasta que GSAP tome el control */ .ghub-breadcrumb, .ghub-hero-badge, .ghub-hero-sub, .ghub-meta-item, .ghub-meta-sep, .ghub-hero-scroll { visibility: hidden; } /* Meta strip */ .ghub-hero-meta { display: flex; align-items: center; gap: 20px; margin-bottom: 40px; flex-wrap: wrap; } .ghub-meta-item { display: flex; align-items: center; gap: 10px; } .ghub-meta-icon { color: var(--hub-accent); opacity: 0.7; flex-shrink: 0; } .ghub-meta-text { display: flex; flex-direction: column; gap: 1px; } .ghub-meta-label { font-size: 10px; text-transform: uppercase; letter-spacing: 0.15em; color: var(--text); opacity: 0.6; } .ghub-meta-val { font-family: var(--ff); font-size: 14px; font-weight: 600; color: var(--white); } .ghub-meta-sep { width: 1px; height: 32px; background: rgba(var(--hub-accent-rgb) / 0.18); } /* Indicador de scroll */ .ghub-hero-scroll { position: absolute; bottom: 32px; left: 50%; transform: translateX(-50%); display: flex; flex-direction: column; align-items: center; gap: 8px; z-index: 2; } .ghub-scroll-arrow { color: var(--hub-accent-d); opacity: .6; animation: ghubScrollBounce 2s ease-in-out infinite; } @keyframes ghubScrollBounce { 0%, 100% { transform: translateY(0); opacity: .6; } 50% { transform: translateY(6px); opacity: 1; } } @media (max-width: 768px) { .ghub-hero { align-items: center; padding-bottom: 80px; padding-top: 100px; } .ghub-hero-meta { gap: 12px; } .ghub-meta-sep { display: none; } .ghub-hero-scroll { display: none; } } /* ═══════════════════════════════════════════════════════════ VISTA CLÁSICA — HUB de tarjetas ═══════════════════════════════════════════════════════════ */ .ghub-hub { position: relative; z-index: 2; padding: var(--sec) 0; padding-bottom: 60px; background: var(--bg); overflow: visible; } .ghub-hub > .sec-sep, .ghub-cta > .sec-sep { position: absolute; top: 0; left: 0; right: 0; z-index: 15; height: 0; } .ghub-hub > .sec-sep svg, .ghub-cta > .sec-sep svg { margin-top: -60px; margin-bottom: 0; } /* Partículas de fondo del hub */ .ghub-hub-particles { position: absolute; top: 0; right: 0; bottom: 0; left: 0; width: 100%; height: 100%; z-index: 0; pointer-events: none; } .ghub-hub > .wrap { position: relative; z-index: 1; } .ghub-hub-head { text-align: center; margin-bottom: 56px; } /* Nota editorial opcional antes del grid (avisos de beta…) */ .ghub-hub-note { margin-bottom: 50px; } .ghub-hub-title { font-family: var(--ff-d); font-size: clamp(28px, 4vw, 56px); font-weight: 900; color: var(--white); line-height: 1.1; margin-bottom: 16px; } .ghub-hub-title em { font-style: normal; background: var(--hub-title-grad); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; } .ghub-hub-sub { font-size: 16px; color: var(--text); max-width: 560px; margin: 0 auto; line-height: 1.6; } /* ornamento bajo el título del hub */ .ghub-hub-orn { display: flex; align-items: center; justify-content: center; gap: 12px; margin-bottom: 18px; } .ghub-hub-orn::before, .ghub-hub-orn::after { content: ''; width: 70px; height: 1px; background: linear-gradient(90deg, transparent, rgba(var(--hub-accent-rgb) / 0.5)); } .ghub-hub-orn::after { background: linear-gradient(90deg, rgba(var(--hub-accent-rgb) / 0.5), transparent); } .ghub-hub-orn i { width: 7px; height: 7px; background: var(--hub-accent); transform: rotate(45deg); box-shadow: 0 0 12px rgba(var(--hub-accent-rgb) / 0.8); } .ghub-hub-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; align-items: stretch; } /* ── Tarjeta ── */ .ghub-card { position: relative; display: flex; flex-direction: column; border-radius: 16px; overflow: hidden; border: 1px solid rgba(var(--hub-accent-rgb) / 0.08); background: linear-gradient(180deg, rgba(var(--hub-accent-rgb) / 0.03), rgba(var(--hub-accent-rgb) / 0) 24%), radial-gradient(circle at top right, rgba(var(--hub-sec-rgb) / 0.05), transparent 34%), linear-gradient(180deg, var(--bg2), var(--bg2)); box-shadow: inset 0 1px 0 rgba(var(--hub-accent-rgb) / 0.04); transition: all 0.5s cubic-bezier(0.19, 1, 0.22, 1); cursor: pointer; height: 100%; } .ghub-card-body { position: relative; z-index: 1; padding: 28px 32px 32px; display: flex; flex-direction: column; flex: 1 1 auto; } .ghub-card-foot { display: flex; justify-content: space-between; align-items: center; font-size: 12px; padding-top: 16px; border-top: 1px solid rgba(255,255,255,0.04); margin-top: auto; } .ghub-card-tag { font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.2em; color: var(--hub-sec-l); margin-bottom: 10px; } .ghub-card-body h3 { font-family: var(--ff); font-size: clamp(18px, 2vw, 24px); font-weight: 700; color: var(--white); margin-bottom: 10px; line-height: 1.25; transition: color 0.3s; } .ghub-card:hover .ghub-card-body h3 { color: var(--hub-sec-l); } .ghub-card-body p { font-size: 14px; color: var(--text); line-height: 1.6; margin-bottom: 20px; } .ghub-card-arrow { display: inline-flex; align-items: center; gap: 6px; font-family: var(--ff); font-weight: 700; color: var(--hub-sec-l); letter-spacing: 0.05em; transition: all 0.3s; } .ghub-card:hover .ghub-card-arrow { letter-spacing: 0.12em; } /* número fantasma en la esquina de cada tarjeta */ .ghub-kc-num { position: absolute; top: 10px; right: 16px; z-index: 0; font-family: var(--ff); font-weight: 700; font-size: 76px; line-height: 1; color: transparent; -webkit-text-stroke: 1px rgba(var(--hub-accent-rgb) / 0.14); pointer-events: none; user-select: none; transition: -webkit-text-stroke-color 0.5s, transform 0.5s cubic-bezier(0.19, 1, 0.22, 1); } .ghub-card:hover .ghub-kc-num { -webkit-text-stroke-color: rgba(var(--hub-accent-rgb) / 0.38); transform: translateY(-3px); } /* esquineras que se encienden al hover */ .ghub-kc-corner { position: absolute; width: 16px; height: 16px; border: 1px solid rgba(var(--hub-accent-rgb) / 0); transition: border-color 0.5s cubic-bezier(0.19, 1, 0.22, 1); pointer-events: none; z-index: 2; } .ghub-kc-corner--tl { top: 9px; left: 9px; border-right: none; border-bottom: none; border-top-left-radius: 6px; } .ghub-kc-corner--br { bottom: 9px; right: 9px; border-left: none; border-top: none; border-bottom-right-radius: 6px; } .ghub-card:hover .ghub-kc-corner { border-color: rgba(var(--hub-accent-rgb) / 0.55); } /* brasa inferior que se desliza al hover */ .ghub-kc-ember { position: absolute; left: 0; right: 0; bottom: 0; height: 2px; z-index: 2; background: linear-gradient(90deg, transparent, var(--hub-accent) 30%, var(--hub-hi) 70%, transparent); transform: scaleX(0); transform-origin: left; transition: transform 0.6s cubic-bezier(0.19, 1, 0.22, 1); } .ghub-card:hover .ghub-kc-ember { transform: scaleX(1); } .ghub-card:hover { transform: translateY(-6px); border-color: rgba(var(--hub-accent-rgb) / 0.32); box-shadow: 0 22px 60px -12px rgba(var(--hub-bg-rgb) / 0.65), 0 0 44px -12px rgba(var(--hub-accent-rgb) / 0.16); } @media (max-width: 1024px) { .ghub-hub-grid { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 768px) { .ghub-hub-grid { grid-template-columns: 1fr; } } /* ═══════════════════════════════════════════════════════════ VISTA CLÁSICA — CTA final ═══════════════════════════════════════════════════════════ */ .ghub-cta { position: relative; z-index: 2; min-height: 60vh; display: flex; align-items: center; justify-content: center; text-align: center; overflow: visible; background: var(--bg); } #ghub-cta-embers { position: absolute; top: 0; right: 0; bottom: 0; left: 0; width: 100%; height: 100%; z-index: 0; pointer-events: none; } .ghub-cta-inner { position: relative; z-index: 2; max-width: 640px; padding: var(--sec) var(--px); } .ghub-cta-title { font-family: var(--ff-d); font-size: calc(clamp(28px, 4vw, 52px) * var(--sg-fit, 1)); font-weight: 900; color: var(--white); line-height: 1.15; margin-bottom: 18px; } .ghub-cta-title em { font-style: normal; background: var(--hub-title-grad); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; } .ghub-cta-desc { font-size: 16px; color: var(--text); line-height: 1.7; margin-bottom: 36px; } .ghub-cta-btns { display: flex; justify-content: center; gap: 16px; flex-wrap: wrap; } .ghub-btn-primary { background: linear-gradient(135deg, var(--hub-sec), var(--hub-sec-l)); color: var(--white); border: 1px solid rgba(var(--hub-sec-l-rgb) / 0.3); } .ghub-btn-primary:hover { background: linear-gradient(135deg, var(--hub-sec-l), var(--hub-sec)); transform: translateY(-2px); box-shadow: 0 8px 30px rgba(var(--hub-sec-l-rgb) / 0.35); } .ghub-btn-ghost { border-color: rgba(var(--hub-accent-rgb) / 0.25); } /* ═══════════════════════════════════════════════════════════ MICRO-ANIMACIONES Y PULIDO ═══════════════════════════════════════════════════════════ */ /* Brillo sutil en la transición de sección */ .ghub-hub::before { content: ''; position: absolute; top: 0; left: 50%; transform: translateX(-50%); width: 400px; height: 2px; background: radial-gradient(ellipse, rgba(var(--hub-sec-rgb) / 0.3) 0%, transparent 70%); pointer-events: none; z-index: 1; } /* Degradados ambientales del hub */ .ghub-hub::after { content: ''; position: absolute; top: 0; right: 0; bottom: 0; left: 0; background: radial-gradient(ellipse 50% 40% at 20% 30%, rgba(var(--hub-sec-rgb) / 0.04) 0%, transparent 70%), radial-gradient(ellipse 40% 50% at 80% 70%, rgba(var(--hub-accent-rgb) / 0.03) 0%, transparent 70%), radial-gradient(ellipse 60% 30% at 50% 90%, rgba(var(--hub-ter-rgb) / 0.03) 0%, transparent 60%); pointer-events: none; z-index: 0; } /* Shimmer al pasar el ratón por la tarjeta */ .ghub-card::before { content: ''; position: absolute; top: 1px; left: -100%; width: calc(100% - 2px); height: calc(100% - 2px); border-radius: 15px; background: linear-gradient(90deg, transparent, rgba(var(--hub-accent-rgb) / 0.04), transparent); transition: left 0.8s; z-index: 1; pointer-events: none; } .ghub-card:hover::before { left: calc(100% + 1px); } /* Accesibilidad */ .ghub-card:focus-visible, .ghubv-mi:focus-visible { outline: 2px solid var(--hub-accent); outline-offset: 2px; } /* ═══════════════════════════════════════════════════════════ RESPONSIVE — vista inmersiva en móvil + ajustes finos ═══════════════════════════════════════════════════════════ */ @media (max-width: 920px) { .ghubv { min-height: auto; padding-top: clamp(76px, 11vh, 96px); } .ghubv-rays, .ghubv-fog { display: none; } .ghubv-vignette { background: radial-gradient(ellipse 130% 100% at 50% 40%, transparent 62%, rgba(var(--hub-bg-deep-rgb) / 0.6) 100%); } .ghubv-scene { grid-template-columns: 1fr; gap: 26px; padding-bottom: 44px; } .ghubv-menu-col { justify-content: flex-start; padding-top: 8px; } .ghubv-menu { max-height: none; overflow: visible; } .ghubv-clip::before, .ghubv-clip::after { display: none; } .ghubv-more { display: none; } .ghubv-foot { justify-content: flex-start; } .ghubv-name { font-size: 17px; } .ghubv-preview { position: static; justify-content: stretch; } .ghubv-ghost { display: none; } .ghubv-panel { max-width: none; border: 1px solid rgba(var(--hub-accent-rgb) / 0.22); background: rgba(var(--hub-bg-rgb) / 0.8); padding: 22px 18px; } .ghubv-panel::before { display: none; } .ghubv-title { font-size: 26px; } .ghubv-desc { font-size: 15px; } .ghubv-hintbar { display: none; } .ghubv-top { padding-top: 10px; padding-bottom: 10px; } } @media (max-width: 500px) { .ghub-hero-badge { font-size: 10px; padding: 6px 14px; } .ghub-card-body { padding: 20px 20px 24px; } }