/* ===================================================================== PATAGONIA MANAGED UNITS · style.css Sistema de diseño principal (identidad visual única para todo el sitio) --------------------------------------------------------------------- Orden del archivo: 01. Tokens / Variables 06. Encabezados de sección 02. Reset y base 07. Hero + estadísticas 03. Layout (container / section) 08. Tarjetas (features / servicios) 04. Fondo global del sitio 09. Módulos (VPS / MU / Files) 05. Header + navegación 10. Nosotros / Contacto / Footer ===================================================================== */ /* ===================================================================== 01 · TOKENS / VARIABLES Cambiá cualquier valor aquí para reconfigurar todo el sitio. ===================================================================== */ :root { /* --- Paleta base --- */ --ink: #04070b; /* fondo base casi negro */ --ink-2: #070d16; /* paneles más profundos */ --slate: #0a121d; /* superficie elevada */ --slate-2: #0c1725; /* superficie de tarjeta */ /* --- Acentos: petróleo → eléctrico → cian --- */ --petroleum: #0d4a57; --petroleum-2: #12586b; --electric: #ff6629; --electric-2: #5b93ff; --cyan: #35d0e6; /* --- Texto --- */ --text: #e9f0f8; --text-2: #9fb0c3; /* secundario */ --text-3: #64748b; /* apagado */ /* --- Líneas y bordes --- */ --line: rgba(148, 178, 214, .12); --line-strong: rgba(148, 178, 214, .22); /* --- Degradados --- */ --grad-accent: linear-gradient(120deg, var(--petroleum) 0%, var(--electric) 55%, var(--cyan) 100%); --grad-accent-soft: linear-gradient(120deg, rgba(13,74,87,.9), rgba(59,125,255,.9) 55%, rgba(53,208,230,.9)); --grad-text: linear-gradient(120deg, #dfeaff 0%, #8fb7ff 55%, var(--cyan) 100%); --grad-panel: linear-gradient(160deg, rgba(255,255,255,.05), rgba(255,255,255,.01) 40%, rgba(0,0,0,.12)); /* --- Cristal (glassmorphism) --- */ --glass-bg: rgba(10, 18, 29, .55); --glass-bg-strong: rgba(11, 20, 33, .74); --glass-border: rgba(255, 255, 255, .09); --glass-blur: 18px; --glass-highlight: inset 0 1px 0 rgba(255, 255, 255, .09); /* --- Sombras y glow --- */ --shadow-sm: 0 8px 24px -12px rgba(0, 0, 0, .6); --shadow: 0 24px 60px -24px rgba(0, 0, 0, .75); --shadow-lg: 0 40px 100px -32px rgba(0, 0, 0, .8); --glow-electric: 0 0 44px -6px rgba(59, 125, 255, .45); --glow-cyan: 0 0 40px -6px rgba(53, 208, 230, .4); /* --- Radios --- */ --r-xs: 8px; --r-sm: 12px; --r: 18px; --r-lg: 24px; --r-xl: 32px; --r-pill: 999px; /* --- Tipografías (Google Fonts, cargadas en el ) --- */ --font-display: "Space Grotesk", "Inter", system-ui, sans-serif; --font-body: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif; --font-ui: "Manrope", "Inter", system-ui, sans-serif; /* --- Ritmo y espaciado --- */ --container: 1180px; --gutter: clamp(1.25rem, 4vw, 2.5rem); --section-y: clamp(5rem, 11vw, 9rem); /* --- Movimiento --- */ --ease: cubic-bezier(.22, 1, .36, 1); --ease-out: cubic-bezier(.16, 1, .3, 1); --dur: .55s; --dur-fast: .28s; /* ============================================================= CONFIGURACIÓN DEL FONDO GLOBAL · editá SOLO estas 3 líneas - --background-image: la única imagen de fondo del sitio. Reemplazá el archivo o apuntá a un .jpg / .png / .webp. - --background-overlay: opacidad del velo oscuro (0 a 1). - --background-blur: desenfoque de la imagen (ej. 2px). ============================================================= */ --background-image: url("../assets/backgrounds/patagonia-bg.svg"); --background-overlay: .80; --background-blur: 0px; } /* ===================================================================== 02 · RESET Y BASE ===================================================================== */ *, *::before, *::after { box-sizing: border-box; } * { margin: 0; padding: 0; } html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; scrollbar-color: var(--petroleum-2) transparent; overflow-x: hidden; } body { font-family: var(--font-body); font-size: 1rem; line-height: 1.65; color: var(--text-2); background: var(--ink); min-height: 100vh; overflow-x: hidden; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; } h1, h2, h3, h4 { font-family: var(--font-display); color: var(--text); line-height: 1.08; letter-spacing: -.02em; font-weight: 600; } a { color: inherit; text-decoration: none; transition: color var(--dur-fast) var(--ease); } img, svg, canvas { display: block; max-width: 100%; } button, input, textarea, select { font: inherit; color: inherit; } ul { list-style: none; } ::selection { background: rgba(59, 125, 255, .32); color: #fff; } /* Foco accesible visible en toda la interfaz */ :focus-visible { outline: 2px solid var(--electric-2); outline-offset: 3px; border-radius: 4px; } /* Scrollbar (WebKit) */ ::-webkit-scrollbar { width: 11px; height: 11px; } ::-webkit-scrollbar-track { background: var(--ink); } ::-webkit-scrollbar-thumb { background: linear-gradient(var(--petroleum), var(--petroleum-2)); border-radius: 999px; border: 3px solid var(--ink); } /* ===================================================================== 03 · LAYOUT ===================================================================== */ .container { width: 100%; max-width: var(--container); margin-inline: auto; padding-inline: var(--gutter); } .container--wide { max-width: 1340px; } .section { position: relative; padding-block: var(--section-y); } .section--tight { padding-block: clamp(3rem, 7vw, 5rem); } .grid { display: grid; gap: 1.25rem; } .stack > * + * { margin-top: 1.15rem; } /* Utilidades tipográficas */ .lead { font-size: clamp(1.05rem, 1.6vw, 1.25rem); color: var(--text-2); max-width: 60ch; } .text-gradient { background: var(--grad-text); -webkit-background-clip: text; background-clip: text; color: transparent; } .muted { color: var(--text-3); } .center { text-align: center; } .mx-auto { margin-inline: auto; } /* ===================================================================== 04 · FONDO GLOBAL DEL SITIO Un único sistema fijo que acompaña todo el scroll: imagen + velo + aurora + partículas (canvas) + grano. Cubre de header a footer. ===================================================================== */ .site-background { position: fixed; inset: 0; z-index: -2; overflow: hidden; pointer-events: none; background: var(--ink); } /* Imagen configurable (la única del sitio) */ .site-background .bg-image { position: absolute; inset: -3%; background-image: var(--background-image); background-size: cover; background-position: center; background-repeat: no-repeat; filter: blur(var(--background-blur)) saturate(1.05); transform: scale(1.04); } /* Velo oscuro configurable para legibilidad */ .site-background .bg-overlay { position: absolute; inset: 0; background: radial-gradient(1200px 600px at 50% -10%, rgba(59,125,255,.10), transparent 60%), linear-gradient(180deg, rgba(4,7,11,calc(var(--background-overlay) - .12)) 0%, rgba(4,7,11,var(--background-overlay)) 42%, rgba(4,7,11,calc(var(--background-overlay) + .07)) 100%); } /* Aurora sutil (manchas de color que se mueven lento) */ .site-background .bg-aurora span { position: absolute; border-radius: 50%; filter: blur(90px); mix-blend-mode: screen; opacity: .5; will-change: transform; } .bg-aurora .a1 { width: 46vw; height: 46vw; top: -12vw; left: -8vw; background: radial-gradient(circle at 30% 30%, rgba(13,74,87,.9), transparent 62%); animation: auroraDrift1 26s ease-in-out infinite; } .bg-aurora .a2 { width: 40vw; height: 40vw; bottom: -14vw; right: -6vw; background: radial-gradient(circle at 60% 40%, rgba(59,125,255,.7), transparent 60%); animation: auroraDrift2 32s ease-in-out infinite; } .bg-aurora .a3 { width: 30vw; height: 30vw; top: 40%; left: 55%; background: radial-gradient(circle at 50% 50%, rgba(53,208,230,.4), transparent 60%); animation: auroraDrift3 38s ease-in-out infinite; } @keyframes auroraDrift1 { 0%,100% { transform: translate3d(0,0,0) scale(1); } 50% { transform: translate3d(8vw,6vh,0) scale(1.12); } } @keyframes auroraDrift2 { 0%,100% { transform: translate3d(0,0,0) scale(1); } 50% { transform: translate3d(-7vw,-5vh,0) scale(1.15); } } @keyframes auroraDrift3 { 0%,100% { transform: translate3d(0,0,0) scale(1); opacity: .35; } 50% { transform: translate3d(-6vw,4vh,0) scale(1.2); opacity: .5; } } /* Partículas (nodos conectados = "units") dibujadas en canvas por JS */ .site-background .bg-particles { position: absolute; inset: 0; width: 100%; height: 100%; opacity: .55; } /* Grano muy suave */ .site-background .bg-grain { position: absolute; inset: 0; opacity: .05; mix-blend-mode: overlay; background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); background-size: 220px 220px; } /* ===================================================================== 05 · HEADER + NAVEGACIÓN Fijo · transparente al inicio · cristal al hacer scroll. ===================================================================== */ .site-header { position: fixed; inset: 0 0 auto 0; z-index: 100; transition: background var(--dur) var(--ease), border-color var(--dur) var(--ease), backdrop-filter var(--dur) var(--ease), box-shadow var(--dur) var(--ease); border-bottom: 1px solid transparent; } .site-header.is-scrolled { background: rgba(6, 10, 18, .62); -webkit-backdrop-filter: blur(16px) saturate(1.3); backdrop-filter: blur(16px) saturate(1.3); border-bottom-color: var(--line); box-shadow: 0 12px 40px -24px rgba(0, 0, 0, .9); } .header-inner { display: flex; align-items: center; justify-content: space-between; gap: 1.5rem; height: 74px; max-width: var(--container); margin-inline: auto; padding-inline: var(--gutter); } /* Logotipo */ .brand { display: inline-flex; align-items: center; gap: .7rem; } .brand__mark { width: 38px; height: 38px; flex: none; } .brand__text { display: flex; flex-direction: column; line-height: 1; } .brand__name { font-family: var(--font-display); font-weight: 600; font-size: 1.02rem; letter-spacing: -.01em; color: var(--text); } .brand__tag { font-family: var(--font-ui); font-size: .62rem; letter-spacing: .28em; text-transform: uppercase; color: var(--text-3); margin-top: 3px; } /* Menú */ .nav { display: flex; align-items: center; gap: .3rem; } .nav a { font-family: var(--font-ui); font-size: .92rem; font-weight: 500; color: var(--text-2); padding: .5rem .85rem; border-radius: var(--r-pill); position: relative; } .nav a:hover { color: var(--text); } .nav a.is-active { color: var(--text); } .nav a.is-active::after { content: ""; position: absolute; left: 50%; bottom: 2px; translate: -50% 0; width: 5px; height: 5px; border-radius: 50%; background: var(--electric); box-shadow: var(--glow-electric); } .header-actions { display: flex; align-items: center; gap: .6rem; } /* Botón hamburguesa (móvil) */ .nav-toggle { display: none; width: 42px; height: 42px; border-radius: var(--r-sm); border: 1px solid var(--glass-border); background: var(--glass-bg); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); cursor: pointer; place-items: center; } .nav-toggle span, .nav-toggle span::before, .nav-toggle span::after { content: ""; display: block; width: 18px; height: 2px; border-radius: 2px; background: var(--text); transition: transform var(--dur-fast) var(--ease), opacity var(--dur-fast); } .nav-toggle span { position: relative; } .nav-toggle span::before { position: absolute; top: -6px; left: 0; } .nav-toggle span::after { position: absolute; top: 6px; left: 0; } .nav-toggle.is-open span { background: transparent; } .nav-toggle.is-open span::before { transform: translateY(6px) rotate(45deg); } .nav-toggle.is-open span::after { transform: translateY(-6px) rotate(-45deg); } /* ===================================================================== BOTONES ===================================================================== */ .btn { --btn-pad-y: .8rem; --btn-pad-x: 1.4rem; display: inline-flex; align-items: center; justify-content: center; gap: .55rem; font-family: var(--font-ui); font-weight: 600; font-size: .95rem; letter-spacing: .01em; padding: var(--btn-pad-y) var(--btn-pad-x); border-radius: var(--r-pill); border: 1px solid transparent; cursor: pointer; white-space: nowrap; transition: transform var(--dur-fast) var(--ease), box-shadow var(--dur-fast) var(--ease), background var(--dur-fast) var(--ease), border-color var(--dur-fast) var(--ease), color var(--dur-fast); } .btn:active { transform: translateY(1px); } .btn svg { width: 18px; height: 18px; } .btn--primary { color: #04121f; background: var(--grad-accent); box-shadow: var(--glow-electric), var(--glass-highlight); background-size: 140% 140%; } .btn--primary:hover { transform: translateY(-2px); box-shadow: 0 0 60px -6px rgba(59,125,255,.6), var(--glass-highlight); background-position: 100% 0; } .btn--glass { color: var(--text); background: var(--glass-bg); border-color: var(--glass-border); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); box-shadow: var(--glass-highlight); } .btn--glass:hover { border-color: var(--line-strong); transform: translateY(-2px); background: var(--glass-bg-strong); } .btn--ghost { color: var(--text-2); background: transparent; } .btn--ghost:hover { color: var(--text); } .btn--sm { --btn-pad-y: .55rem; --btn-pad-x: 1rem; font-size: .875rem; } .btn--lg { --btn-pad-y: .95rem; --btn-pad-x: 1.8rem; font-size: 1rem; } .btn--block { width: 100%; } .btn-row { display: flex; flex-wrap: wrap; gap: .8rem; } /* Link con flecha */ .link-arrow { display: inline-flex; align-items: center; gap: .4rem; font-family: var(--font-ui); font-weight: 600; color: var(--text); } .link-arrow svg { width: 16px; height: 16px; transition: transform var(--dur-fast) var(--ease); } .link-arrow:hover { color: var(--electric-2); } .link-arrow:hover svg { transform: translateX(4px); } /* ===================================================================== 06 · ENCABEZADOS DE SECCIÓN · eyebrow con motivo de "unit" ===================================================================== */ .eyebrow { display: inline-flex; align-items: center; gap: .55rem; font-family: var(--font-ui); font-size: .74rem; font-weight: 600; letter-spacing: .22em; text-transform: uppercase; color: var(--text-2); } .eyebrow::before { content: ""; width: 9px; height: 9px; flex: none; background: var(--grad-accent); border-radius: 2px; rotate: 45deg; box-shadow: var(--glow-electric); } .section-head { max-width: 62ch; margin-bottom: clamp(2.2rem, 5vw, 3.5rem); } .section-head.center { margin-inline: auto; } .section-head h2 { font-size: clamp(2rem, 4.2vw, 3.15rem); margin-top: 1rem; letter-spacing: -.03em; } .section-head p { margin-top: 1rem; font-size: clamp(1rem, 1.5vw, 1.15rem); } /* Divisor con nodos (motivo recurrente) */ .divider { height: 1px; border: 0; background: linear-gradient(90deg, transparent, var(--line-strong) 20%, var(--line-strong) 80%, transparent); position: relative; margin-block: var(--section-y); } .divider::before { content: ""; position: absolute; left: 50%; top: 50%; translate: -50% -50%; width: 7px; height: 7px; rotate: 45deg; background: var(--electric); box-shadow: var(--glow-electric); } /* ===================================================================== TARJETA DE CRISTAL (base reutilizable) ===================================================================== */ .glass { position: relative; background: var(--glass-bg); border: 1px solid var(--glass-border); border-radius: var(--r-lg); -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(1.2); backdrop-filter: blur(var(--glass-blur)) saturate(1.2); box-shadow: var(--shadow-sm), var(--glass-highlight); } /* Línea de brillo superior tipo "scan" */ .glass::before { content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; background: linear-gradient(180deg, rgba(255,255,255,.06), transparent 26%); -webkit-mask: linear-gradient(#000 0 0); mask: linear-gradient(#000 0 0); } /* ===================================================================== 07 · HERO ===================================================================== */ .hero { position: relative; min-height: 100svh; display: flex; align-items: center; padding-top: 120px; padding-bottom: 4rem; } .hero__inner { max-width: 60rem; } .hero__badge { display: inline-flex; align-items: center; gap: .55rem; padding: .4rem .9rem .4rem .5rem; border-radius: var(--r-pill); background: var(--glass-bg); border: 1px solid var(--glass-border); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); font-family: var(--font-ui); font-size: .82rem; color: var(--text-2); } .hero__badge b { color: #04121f; background: var(--grad-accent); padding: .18rem .55rem; border-radius: var(--r-pill); font-weight: 700; font-size: .72rem; letter-spacing: .04em; text-transform: uppercase; } .hero h1 { font-size: clamp(2.9rem, 7vw, 5.4rem); letter-spacing: -.04em; margin-top: 1.6rem; font-weight: 700; } .hero h1 .text-gradient { display: inline-block; } .hero__sub { margin-top: 1.5rem; font-size: clamp(1.08rem, 1.7vw, 1.3rem); max-width: 46ch; color: var(--text-2); } .hero .btn-row { margin-top: 2.4rem; } .hero__note { margin-top: 1.4rem; font-size: .85rem; color: var(--text-3); display: flex; align-items: center; gap: .5rem; } .hero__note .dot { width: 7px; height: 7px; border-radius: 50%; background: #35e6a3; box-shadow: 0 0 12px #35e6a3; } .scroll-hint { position: absolute; left: var(--gutter); bottom: 2rem; display: inline-flex; align-items: center; gap: .6rem; font-family: var(--font-ui); font-size: .72rem; letter-spacing: .2em; text-transform: uppercase; color: var(--text-3); } .scroll-hint .bar { width: 1px; height: 34px; background: linear-gradient(var(--electric), transparent); } /* ===================================================================== ESTADÍSTICAS ===================================================================== */ .stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1px; background: var(--line); border: 1px solid var(--line); border-radius: var(--r-lg); overflow: hidden; } .stat { padding: 1.6rem 1.5rem; background: rgba(7, 12, 20, .5); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); } .stat__num { font-family: var(--font-display); font-weight: 600; font-size: clamp(1.9rem, 3.4vw, 2.7rem); letter-spacing: -.03em; color: var(--text); } .stat__num .unit { color: var(--electric-2); } .stat__label { font-family: var(--font-ui); font-size: .82rem; color: var(--text-3); margin-top: .35rem; letter-spacing: .02em; } /* ===================================================================== 08 · TARJETAS ===================================================================== */ /* -- ¿Por qué Patagonia? (features) -- */ .feature-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.15rem; } .feature-card { padding: 1.7rem; border-radius: var(--r-lg); background: var(--glass-bg); border: 1px solid var(--glass-border); -webkit-backdrop-filter: blur(var(--glass-blur)); backdrop-filter: blur(var(--glass-blur)); box-shadow: var(--shadow-sm), var(--glass-highlight); transition: transform var(--dur) var(--ease), border-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease); } .feature-card:hover { transform: translateY(-5px); border-color: var(--line-strong); box-shadow: var(--shadow), var(--glow-electric); } .icon-badge { width: 48px; height: 48px; border-radius: var(--r-sm); display: grid; place-items: center; background: linear-gradient(160deg, rgba(59,125,255,.18), rgba(13,74,87,.14)); border: 1px solid var(--glass-border); color: var(--electric-2); margin-bottom: 1.15rem; } .icon-badge svg { width: 24px; height: 24px; } .feature-card h3 { font-size: 1.2rem; margin-bottom: .5rem; } .feature-card p { font-size: .95rem; color: var(--text-2); } /* -- Servicios (4 tarjetas grandes) -- */ .service-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1.25rem; } .service-card { position: relative; overflow: hidden; min-height: 320px; padding: 1.8rem; display: flex; flex-direction: column; justify-content: flex-end; border-radius: var(--r-xl); border: 1px solid var(--glass-border); background: var(--slate-2); box-shadow: var(--shadow-sm), var(--glass-highlight); transition: transform var(--dur) var(--ease), border-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease); } /* Cada tarjeta trae su propio "arte" generado con degradados (sin imágenes externas). Si querés usar fotos reales, definí --cover con url(...) en la clase de cada tarjeta. */ .service-card::before { content: ""; position: absolute; inset: 0; z-index: 0; background: radial-gradient(120% 90% at 85% 0%, var(--card-glow, rgba(59,125,255,.28)), transparent 55%), linear-gradient(180deg, rgba(6,11,20,.2), rgba(6,11,20,.86)); transition: opacity var(--dur) var(--ease); } .service-card::after { /* grilla sutil de "units" */ content: ""; position: absolute; inset: 0; z-index: 0; opacity: .5; background-image: linear-gradient(var(--line) 1px, transparent 1px), linear-gradient(90deg, var(--line) 1px, transparent 1px); background-size: 40px 40px; -webkit-mask: radial-gradient(120% 80% at 80% 0%, #000, transparent 60%); mask: radial-gradient(120% 80% at 80% 0%, #000, transparent 60%); } .service-card > * { position: relative; z-index: 1; } .service-card:hover { transform: translateY(-6px); border-color: var(--line-strong); box-shadow: var(--shadow-lg), var(--glow-electric); } .service-card .icon-badge { margin-bottom: auto; } .service-card h3 { font-size: 1.55rem; margin-bottom: .55rem; } .service-card p { color: var(--text-2); font-size: .96rem; max-width: 40ch; margin-bottom: 1.1rem; } .service-card__tag { position: absolute; top: 1.4rem; right: 1.4rem; z-index: 1; font-family: var(--font-ui); font-size: .68rem; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--text-2); padding: .3rem .7rem; border-radius: var(--r-pill); background: rgba(4,8,14,.5); border: 1px solid var(--glass-border); } /* Variantes de glow por servicio */ .service-card.is-vps { --card-glow: rgba(59,125,255,.32); } .service-card.is-hosting { --card-glow: rgba(53,208,230,.28); } .service-card.is-mu { --card-glow: rgba(124,92,255,.30); } .service-card.is-creative { --card-glow: rgba(255,125,180,.26); } /* ===================================================================== CREATIVE HUB · banner destacado ===================================================================== */ .creative-banner { position: relative; overflow: hidden; border-radius: var(--r-xl); border: 1px solid var(--glass-border); background: linear-gradient(120deg, rgba(13,74,87,.4), rgba(59,125,255,.16) 55%, rgba(255,125,180,.12)); box-shadow: var(--shadow), var(--glass-highlight); padding: clamp(2rem, 5vw, 3.5rem); display: grid; grid-template-columns: 1.35fr 1fr; gap: 2rem; align-items: center; } .creative-banner::after { content: ""; position: absolute; inset: 0; pointer-events: none; background: radial-gradient(60% 120% at 100% 0%, rgba(255,125,180,.22), transparent 55%); } .creative-banner__content { position: relative; z-index: 1; } .creative-banner h2 { font-size: clamp(1.8rem, 3.6vw, 2.8rem); margin: 1rem 0; } .creative-banner p { color: var(--text-2); max-width: 48ch; } .creative-banner .btn-row { margin-top: 1.8rem; } .creative-visual { position: relative; z-index: 1; aspect-ratio: 4 / 3; border-radius: var(--r-lg); border: 1px solid var(--glass-border); background: radial-gradient(circle at 30% 25%, rgba(255,125,180,.5), transparent 45%), radial-gradient(circle at 75% 70%, rgba(59,125,255,.5), transparent 45%), linear-gradient(160deg, #0a1220, #0b1a2b); overflow: hidden; display: grid; place-items: center; } .creative-visual span { font-family: var(--font-display); font-weight: 700; letter-spacing: -.02em; font-size: clamp(1.4rem, 3vw, 2.2rem); color: #fff; text-align: center; padding: 1rem; text-shadow: 0 2px 30px rgba(0,0,0,.5); } /* ===================================================================== 09 · MÓDULO VPS · planes ===================================================================== */ .billing-toggle { display: inline-flex; gap: .3rem; padding: .3rem; border-radius: var(--r-pill); background: var(--glass-bg); border: 1px solid var(--glass-border); margin-inline: auto; } .billing-toggle button { font-family: var(--font-ui); font-size: .85rem; font-weight: 600; color: var(--text-2); padding: .45rem 1rem; border-radius: var(--r-pill); border: 0; background: transparent; cursor: pointer; transition: color var(--dur-fast), background var(--dur-fast); } .billing-toggle button.is-active { color: #04121f; background: var(--grad-accent); } .plan-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1.1rem; } .plan-card { position: relative; display: flex; flex-direction: column; padding: 1.7rem 1.5rem; border-radius: var(--r-lg); background: var(--glass-bg); border: 1px solid var(--glass-border); -webkit-backdrop-filter: blur(var(--glass-blur)); backdrop-filter: blur(var(--glass-blur)); box-shadow: var(--shadow-sm), var(--glass-highlight); transition: transform var(--dur) var(--ease), border-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease); } .plan-card:hover { transform: translateY(-6px); border-color: var(--line-strong); box-shadow: var(--shadow), var(--glow-electric); } .plan-card.is-featured { border-color: rgba(59,125,255,.5); background: linear-gradient(180deg, rgba(59,125,255,.1), var(--glass-bg)); box-shadow: var(--shadow), var(--glow-electric); } .plan-card__flag { position: absolute; top: -1px; right: 1.3rem; font-family: var(--font-ui); font-size: .66rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: #04121f; background: var(--grad-accent); padding: .28rem .7rem; border-radius: 0 0 var(--r-xs) var(--r-xs); } .plan-card__name { font-family: var(--font-ui); font-weight: 700; font-size: 1.05rem; color: var(--text); letter-spacing: .02em; } .plan-card__desc { font-size: .85rem; color: var(--text-3); margin-top: .25rem; min-height: 2.4em; } .plan-card__price { margin: 1.1rem 0 .3rem; display: flex; align-items: baseline; gap: .3rem; } .plan-card__price .amount { font-family: var(--font-display); font-weight: 600; font-size: 2.2rem; letter-spacing: -.03em; color: var(--text); } .plan-card__price .cur { font-family: var(--font-ui); font-weight: 600; font-size: 1rem; color: var(--text-2); align-self: flex-start; margin-top: .45rem; } .plan-card__price .per { font-family: var(--font-ui); font-size: .82rem; color: var(--text-3); } .spec-list { margin: 1.2rem 0; display: grid; gap: .7rem; } .spec-list li { display: flex; align-items: center; gap: .6rem; font-size: .9rem; color: var(--text-2); } .spec-list li svg { width: 17px; height: 17px; color: var(--electric-2); flex: none; } .spec-list li b { color: var(--text); font-family: var(--font-ui); font-weight: 600; } .plan-card .btn { margin-top: auto; } /* Chips de sistema operativo */ .os-chips { display: flex; gap: .5rem; margin-bottom: 1rem; flex-wrap: wrap; } .os-chip { font-family: var(--font-ui); font-size: .74rem; font-weight: 600; letter-spacing: .04em; color: var(--text-2); padding: .3rem .7rem; border-radius: var(--r-pill); background: rgba(255,255,255,.03); border: 1px solid var(--glass-border); display: inline-flex; align-items: center; gap: .4rem; } .os-chip .dot { width: 6px; height: 6px; border-radius: 50%; } .os-chip.win .dot { background: #35d0e6; } .os-chip.linux .dot { background: #ffb454; } /* ===================================================================== MÓDULO MU ONLINE · paquetes + checklist ===================================================================== */ .capability-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1rem; } .capability { padding: 1.4rem; border-radius: var(--r); background: var(--glass-bg); border: 1px solid var(--glass-border); box-shadow: var(--glass-highlight); transition: transform var(--dur) var(--ease), border-color var(--dur) var(--ease); } .capability:hover { transform: translateY(-4px); border-color: var(--line-strong); } .capability .icon-badge { width: 42px; height: 42px; margin-bottom: .9rem; } .capability h4 { font-size: 1.05rem; margin-bottom: .35rem; } .capability p { font-size: .88rem; color: var(--text-2); } .package-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.15rem; } .package-card { display: flex; flex-direction: column; padding: 1.8rem 1.6rem; border-radius: var(--r-lg); background: var(--glass-bg); border: 1px solid var(--glass-border); -webkit-backdrop-filter: blur(var(--glass-blur)); backdrop-filter: blur(var(--glass-blur)); box-shadow: var(--shadow-sm), var(--glass-highlight); transition: transform var(--dur) var(--ease), border-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease); } .package-card:hover { transform: translateY(-6px); border-color: var(--line-strong); box-shadow: var(--shadow), var(--glow-electric); } .package-card.is-featured { border-color: rgba(59,125,255,.5); box-shadow: var(--shadow), var(--glow-electric); } .package-card__ey { font-family: var(--font-ui); font-size: .7rem; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; color: var(--electric-2); } .package-card h3 { font-size: 1.4rem; margin: .5rem 0 .4rem; } .package-card > p { font-size: .9rem; color: var(--text-2); margin-bottom: 1.2rem; } .check-list { display: grid; gap: .65rem; margin-bottom: 1.4rem; } .check-list li { display: flex; align-items: flex-start; gap: .6rem; font-size: .9rem; color: var(--text-2); } .check-list li svg { width: 18px; height: 18px; color: var(--cyan); flex: none; margin-top: 1px; } .package-card .btn { margin-top: auto; } /* ===================================================================== MÓDULO FILES · catálogo en tarjetas ===================================================================== */ .files-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.25rem; } /* ------------------------------------------------------------------ TARJETA DE FILES · para agregar una nueva versión, copiá un bloque
...
en files.html y cambiá los datos. El color se controla con --accent. ------------------------------------------------------------------ */ .file-card { position: relative; overflow: hidden; display: flex; flex-direction: column; border-radius: var(--r-lg); background: var(--slate-2); border: 1px solid var(--glass-border); box-shadow: var(--shadow-sm), var(--glass-highlight); transition: transform var(--dur) var(--ease), border-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease); } .file-card:hover { transform: translateY(-6px); border-color: var(--line-strong); box-shadow: var(--shadow), 0 0 44px -6px var(--accent, rgba(59,125,255,.4)); } /* Portada generada (sin imágenes externas). Podés reemplazar con una foto: agregando background-image sobre .file-card__cover. */ .file-card__cover { position: relative; aspect-ratio: 16 / 10; overflow: hidden; background: radial-gradient(90% 120% at 20% 0%, var(--accent, rgba(59,125,255,.45)), transparent 55%), linear-gradient(160deg, #0a1220, #0b1a2b); display: grid; place-items: center; border-bottom: 1px solid var(--glass-border); } .file-card__cover::after { content: ""; position: absolute; inset: 0; background-image: linear-gradient(var(--line) 1px, transparent 1px), linear-gradient(90deg, var(--line) 1px, transparent 1px); background-size: 34px 34px; opacity: .6; -webkit-mask: radial-gradient(80% 80% at 50% 40%, #000, transparent 75%); mask: radial-gradient(80% 80% at 50% 40%, #000, transparent 75%); } .file-card__badge { position: relative; z-index: 1; font-family: var(--font-display); font-weight: 700; letter-spacing: -.02em; font-size: clamp(1.6rem, 3vw, 2.2rem); color: #fff; text-shadow: 0 4px 30px rgba(0,0,0,.45); } .file-card__body { padding: 1.5rem; display: flex; flex-direction: column; flex: 1; } .file-card__head { display: flex; align-items: center; justify-content: space-between; gap: 1rem; margin-bottom: .5rem; } .file-card__head h3 { font-size: 1.25rem; } .file-card__ver { font-family: var(--font-ui); font-size: .7rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--text-2); padding: .28rem .6rem; border-radius: var(--r-pill); background: rgba(255,255,255,.04); border: 1px solid var(--glass-border); white-space: nowrap; } .file-card__desc { font-size: .9rem; color: var(--text-2); margin-bottom: 1.1rem; } .file-card__specs { display: flex; flex-wrap: wrap; gap: .45rem; margin-bottom: 1.1rem; } .tag { font-family: var(--font-ui); font-size: .74rem; font-weight: 500; color: var(--text-2); padding: .32rem .65rem; border-radius: var(--r-pill); background: rgba(255,255,255,.03); border: 1px solid var(--glass-border); } .file-card__compat { display: flex; align-items: center; gap: .5rem; font-size: .82rem; color: var(--text-3); margin-bottom: 1.2rem; } .file-card__compat svg { width: 16px; height: 16px; color: #35e6a3; } .file-card .btn { margin-top: auto; } /* ===================================================================== 10 · NOSOTROS ===================================================================== */ .about-split { display: grid; grid-template-columns: 1.1fr .9fr; gap: 3rem; align-items: center; } .about-metrics { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1px; background: var(--line); border: 1px solid var(--line); border-radius: var(--r-lg); overflow: hidden; } .about-metrics .stat { padding: 1.5rem; } .values-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.1rem; } .value-card { padding: 1.6rem; border-radius: var(--r-lg); background: var(--glass-bg); border: 1px solid var(--glass-border); box-shadow: var(--glass-highlight); transition: transform var(--dur) var(--ease), border-color var(--dur) var(--ease); } .value-card:hover { transform: translateY(-4px); border-color: var(--line-strong); } .value-card .num { font-family: var(--font-display); font-size: .85rem; color: var(--electric-2); letter-spacing: .1em; } .value-card h4 { font-size: 1.15rem; margin: .6rem 0 .4rem; } .value-card p { font-size: .9rem; color: var(--text-2); } .mv-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1.15rem; } .mv-card { padding: 2rem; border-radius: var(--r-lg); background: var(--glass-bg); border: 1px solid var(--glass-border); box-shadow: var(--glass-highlight); position: relative; overflow: hidden; } .mv-card::after { content: ""; position: absolute; top: -30%; right: -20%; width: 60%; height: 120%; background: radial-gradient(circle, var(--card-glow, rgba(59,125,255,.18)), transparent 60%); } .mv-card h3 { font-size: 1.4rem; margin-bottom: .7rem; position: relative; } .mv-card p { color: var(--text-2); position: relative; } /* Franja de tecnologías / logos textuales */ .tech-strip { display: flex; flex-wrap: wrap; gap: .7rem; } .tech-pill { font-family: var(--font-ui); font-weight: 600; font-size: .9rem; color: var(--text-2); padding: .55rem 1.1rem; border-radius: var(--r-pill); background: var(--glass-bg); border: 1px solid var(--glass-border); display: inline-flex; align-items: center; gap: .5rem; transition: color var(--dur-fast), border-color var(--dur-fast); } .tech-pill:hover { color: var(--text); border-color: var(--line-strong); } .tech-pill .dot { width: 7px; height: 7px; border-radius: 2px; rotate: 45deg; background: var(--grad-accent); } /* ===================================================================== CONTACTO ===================================================================== */ .contact-grid { display: grid; grid-template-columns: 1fr .85fr; gap: 2rem; align-items: start; } .form-card { padding: clamp(1.6rem, 3vw, 2.4rem); } .field { display: block; margin-bottom: 1.15rem; } .field label { display: block; font-family: var(--font-ui); font-size: .82rem; font-weight: 600; color: var(--text-2); margin-bottom: .5rem; } .field .req { color: var(--electric-2); } .input, .textarea, .select { width: 100%; padding: .85rem 1rem; background: rgba(4,8,14,.55); color: var(--text); border: 1px solid var(--glass-border); border-radius: var(--r-sm); font-size: .95rem; transition: border-color var(--dur-fast), box-shadow var(--dur-fast), background var(--dur-fast); } .input::placeholder, .textarea::placeholder { color: var(--text-3); } .input:focus, .textarea:focus, .select:focus { outline: none; border-color: rgba(59,125,255,.6); box-shadow: 0 0 0 3px rgba(59,125,255,.14); background: rgba(4,8,14,.75); } .textarea { resize: vertical; min-height: 130px; } .field-row { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; } .form-note { font-size: .8rem; color: var(--text-3); margin-top: .4rem; } .form-status { font-size: .9rem; margin-top: 1rem; min-height: 1.2em; } .form-hint { font-size: .8rem; color: var(--text-3); margin-top: .7rem; } .form-status.ok { color: #35e6a3; } .form-status.err { color: #ff8080; } /* Canales de contacto directos */ .channels { display: grid; gap: .9rem; } .channel { display: flex; align-items: center; gap: 1rem; padding: 1.1rem 1.3rem; border-radius: var(--r); background: var(--glass-bg); border: 1px solid var(--glass-border); box-shadow: var(--glass-highlight); transition: transform var(--dur-fast) var(--ease), border-color var(--dur-fast); } .channel:hover { transform: translateX(4px); border-color: var(--line-strong); } .channel .icon-badge { width: 44px; height: 44px; margin: 0; flex: none; } .channel__meta { line-height: 1.3; min-width: 0; } .channel__meta .k { font-family: var(--font-ui); font-weight: 600; color: var(--text); font-size: .95rem; } .channel__meta .v { font-size: .85rem; color: var(--text-3); overflow-wrap: anywhere; } .channel .link-arrow { margin-left: auto; } .map-embed { margin-top: 1.5rem; border-radius: var(--r-lg); overflow: hidden; border: 1px solid var(--glass-border); } .map-embed iframe { width: 100%; height: 260px; border: 0; filter: grayscale(.3) invert(.9) hue-rotate(180deg) contrast(.9); } /* ===================================================================== CTA GENÉRICO (banda final antes del footer) ===================================================================== */ .cta-band { position: relative; overflow: hidden; text-align: center; border-radius: var(--r-xl); padding: clamp(2.5rem, 6vw, 4.5rem); border: 1px solid var(--glass-border); background: linear-gradient(120deg, rgba(13,74,87,.35), rgba(59,125,255,.14) 60%, rgba(53,208,230,.1)); box-shadow: var(--shadow), var(--glass-highlight); } .cta-band::after { content: ""; position: absolute; inset: 0; pointer-events: none; background: radial-gradient(60% 120% at 50% -10%, rgba(59,125,255,.28), transparent 55%); } .cta-band > * { position: relative; z-index: 1; } .cta-band h2 { font-size: clamp(1.9rem, 4vw, 3rem); margin-bottom: 1rem; } .cta-band p { color: var(--text-2); max-width: 52ch; margin: 0 auto 2rem; } .cta-band .btn-row { justify-content: center; } /* ===================================================================== FOOTER ===================================================================== */ .site-footer { position: relative; border-top: 1px solid var(--line); background: rgba(4, 7, 12, .55); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); margin-top: var(--section-y); } .footer-top { display: grid; grid-template-columns: 1.6fr 1fr 1fr 1fr; gap: 2rem; padding-block: clamp(3rem, 6vw, 4.5rem); } .footer-brand .brand { margin-bottom: 1.1rem; } .footer-brand p { font-size: .92rem; color: var(--text-3); max-width: 34ch; } .footer-social { display: flex; gap: .6rem; margin-top: 1.4rem; } .footer-social a { width: 40px; height: 40px; border-radius: var(--r-sm); display: grid; place-items: center; background: var(--glass-bg); border: 1px solid var(--glass-border); color: var(--text-2); transition: color var(--dur-fast), border-color var(--dur-fast), transform var(--dur-fast); } .footer-social a:hover { color: var(--text); border-color: var(--line-strong); transform: translateY(-3px); } .footer-social svg { width: 18px; height: 18px; } .footer-col h4 { font-family: var(--font-ui); font-size: .78rem; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; color: var(--text-3); margin-bottom: 1.1rem; } .footer-col ul { display: grid; gap: .7rem; } .footer-col a { font-size: .92rem; color: var(--text-2); } .footer-col a:hover { color: var(--text); } .footer-bottom { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 1rem; padding-block: 1.5rem; border-top: 1px solid var(--line); font-size: .84rem; color: var(--text-3); } .footer-bottom .legal { display: flex; gap: 1.3rem; flex-wrap: wrap; } .footer-status { display: inline-flex; align-items: center; gap: .5rem; } .footer-status .dot { width: 8px; height: 8px; border-radius: 50%; background: #35e6a3; box-shadow: 0 0 12px #35e6a3; } /* ===================================================================== PÁGINAS INTERIORES · encabezado que libera el header fijo + utilidades ===================================================================== */ .page-hero { position: relative; padding-top: clamp(9rem, 16vw, 12rem); padding-bottom: clamp(2.5rem, 6vw, 4rem); } .page-hero__inner { max-width: 56rem; } .page-hero h1 { font-size: clamp(2.4rem, 5.6vw, 4rem); letter-spacing: -.03em; margin-top: 1.1rem; } .page-hero .lead { margin-top: 1.3rem; } .page-hero .btn-row { margin-top: 2rem; } .breadcrumb { display: flex; align-items: center; gap: .5rem; font-family: var(--font-ui); font-size: .8rem; color: var(--text-3); } .breadcrumb a:hover { color: var(--text-2); } .breadcrumb span { opacity: .5; } .panel-pad { padding: clamp(1.6rem, 3vw, 2.4rem); } .split-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 1.15rem; align-items: center; } .narrow-center { max-width: 60ch; margin-inline: auto; text-align: center; } /* Panel informativo reutilizable (ej. "¿no ves tu versión?") */ .info-panel { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 1.5rem; padding: clamp(1.6rem, 3vw, 2.2rem); border-radius: var(--r-lg); background: var(--glass-bg); border: 1px solid var(--glass-border); box-shadow: var(--glass-highlight); } .info-panel h3 { font-size: 1.25rem; margin-bottom: .35rem; } .info-panel p { color: var(--text-2); font-size: .95rem; max-width: 52ch; } /* ===================================================================== REVELADO AL HACER SCROLL (activado por js/script.js) ===================================================================== */ [data-reveal] { opacity: 0; transform: translateY(22px); transition: opacity .7s var(--ease-out), transform .7s var(--ease-out); will-change: opacity, transform; } [data-reveal].is-visible { opacity: 1; transform: none; } /* ===================================================================== ACCESIBILIDAD · respeto por "reducir movimiento" ===================================================================== */ @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; } .bg-aurora span, .bg-particles { animation: none; } [data-reveal] { opacity: 1; transform: none; } } /* ===================================================================== PATAGONIA HUB · banner promocional del Home (usa los tokens actuales) ===================================================================== */ .hub-section { position: relative; margin-block: var(--section-y); } .hub-banner { position: relative; isolation: isolate; overflow: hidden; padding: clamp(3.5rem, 8vw, 6.5rem) 0; border-block: 1px solid var(--glass-border); box-shadow: 0 40px 120px -60px rgba(0, 0, 0, .9); } /* Imagen de fondo del banner (relacionada con MU Online, configurable) */ .hub-banner::before { content: ""; position: absolute; inset: 0; z-index: -2; background: var(--hub-image, url("../assets/images/hub-bg.jpg")) center / cover no-repeat; transform: scale(1.06); } /* Overlay + glow para legibilidad y dramatismo */ .hub-banner::after { content: ""; position: absolute; inset: 0; z-index: -1; background: radial-gradient(70% 120% at 12% 20%, rgba(59, 125, 255, .42), transparent 55%), radial-gradient(60% 120% at 92% 88%, rgba(124, 92, 255, .40), transparent 55%), linear-gradient(180deg, rgba(4, 7, 11, .74) 0%, rgba(4, 7, 11, .82) 60%, rgba(4, 7, 11, .9) 100%); } .hub-banner__inner { max-width: 46rem; } .hub-badge { display: inline-flex; align-items: center; gap: .5rem; padding: .45rem .95rem; border-radius: var(--r-pill); background: var(--glass-bg-strong); border: 1px solid var(--glass-border); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); font-family: var(--font-ui); font-weight: 700; font-size: .74rem; letter-spacing: .16em; text-transform: uppercase; color: var(--text); } .hub-banner h2 { font-size: clamp(2rem, 5vw, 3.6rem); line-height: 1.04; letter-spacing: -.01em; margin: 1.2rem 0 1rem; text-transform: uppercase; text-shadow: 0 4px 40px rgba(0, 0, 0, .5); } .hub-banner__sub { font-size: clamp(1.02rem, 1.7vw, 1.2rem); color: #d7e2f2; max-width: 42ch; } .hub-banner .btn-row { margin-top: 1.9rem; } .hub-banner__note { margin-top: 1.4rem; font-size: .86rem; color: var(--text-2); display: inline-flex; align-items: center; gap: .5rem; } .hub-banner__note::before { content: ""; width: 7px; height: 7px; rotate: 45deg; flex: none; background: var(--grad-accent); box-shadow: var(--glow-electric); } /* ===================================================================== POPUP Patagonia Hub · glass + blur + animacion suave ===================================================================== */ .hub-popup { position: fixed; inset: 0; z-index: 200; display: grid; place-items: center; padding: 1.5rem; background: rgba(2, 4, 8, .6); -webkit-backdrop-filter: blur(9px); backdrop-filter: blur(9px); opacity: 0; visibility: hidden; transition: opacity .4s var(--ease), visibility .4s var(--ease), background-color .5s var(--ease), -webkit-backdrop-filter .5s var(--ease), backdrop-filter .5s var(--ease); } .hub-popup.is-open { opacity: 1; visibility: visible; } .hub-popup__card { position: relative; width: 100%; max-width: 430px; text-align: center; padding: clamp(2rem, 5vw, 2.8rem) clamp(1.6rem, 4vw, 2.4rem) clamp(1.6rem, 4vw, 2.2rem); border-radius: var(--r-lg); background: var(--glass-bg-strong); border: 1px solid var(--glass-border); -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(1.2); backdrop-filter: blur(var(--glass-blur)) saturate(1.2); box-shadow: var(--shadow-lg), var(--glass-highlight), var(--glow-electric); transform: translateY(18px) scale(.97); transition: transform .55s var(--ease), opacity .5s var(--ease); } .hub-popup.is-open .hub-popup__card { transform: none; } /* Al cerrar: el popup se reduce y vuela hacia la esquina inferior derecha */ .hub-popup.is-closing { background: rgba(2, 4, 8, 0); -webkit-backdrop-filter: blur(0); backdrop-filter: blur(0); } .hub-popup.is-closing .hub-popup__card { transform: translate(40vw, 42vh) scale(.12); opacity: 0; } .hub-popup__close { position: absolute; top: .8rem; right: .8rem; width: 36px; height: 36px; display: grid; place-items: center; border-radius: var(--r-sm); cursor: pointer; color: var(--text-2); background: rgba(255, 255, 255, .04); border: 1px solid var(--glass-border); transition: color var(--dur-fast), border-color var(--dur-fast); } .hub-popup__close:hover { color: var(--text); border-color: var(--line-strong); } .hub-popup__close svg { width: 18px; height: 18px; } .hub-popup__emoji { font-size: 2.6rem; line-height: 1; margin-bottom: .6rem; } .hub-popup h3 { font-size: 1.35rem; text-transform: uppercase; letter-spacing: -.01em; margin-bottom: .7rem; } .hub-popup p { color: var(--text-2); font-size: .96rem; margin-bottom: 1.5rem; } .hub-popup .btn-row { flex-direction: column; gap: .6rem; } /* Desplazamiento con offset para el header fijo al usar anclas (#vps, #mu, #hub...) */ [id] { scroll-margin-top: 90px; } /* ===================================================================== TARJETA FLOTANTE Patagonia Hub · persistente, glass + glow azul ===================================================================== */ @keyframes hubFloat { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-6px); } } .hub-widget { position: fixed; right: clamp(14px, 3vw, 26px); bottom: clamp(14px, 3vw, 26px); z-index: 70; width: 262px; max-width: calc(100vw - 28px); pointer-events: none; /* el area vacia nunca bloquea clicks */ opacity: 0; visibility: hidden; transform: translateY(16px) scale(.96); transition: opacity .45s var(--ease), transform .5s cubic-bezier(.34, 1.56, .64, 1), visibility .45s var(--ease); } .hub-widget.is-visible { opacity: 1; visibility: visible; transform: none; } .hub-widget__card { position: relative; overflow: hidden; isolation: isolate; pointer-events: auto; border-radius: var(--r-lg); padding: .9rem 1rem 1.05rem; background: var(--glass-bg-strong); border: 1px solid var(--glass-border); -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(1.2); backdrop-filter: blur(var(--glass-blur)) saturate(1.2); box-shadow: var(--shadow-lg), var(--glass-highlight), 0 0 34px -6px rgba(59, 125, 255, .6); animation: hubFloat 5s ease-in-out infinite; transition: opacity .3s var(--ease), transform .35s var(--ease); } /* Imagen de fondo configurable (--hub-widget-image) */ .hub-widget__card::before { content: ""; position: absolute; inset: 0; z-index: -2; background: var(--hub-widget-image, url("../assets/images/hub-bg.jpg")) center / cover no-repeat; opacity: .5; } .hub-widget__card::after { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(160deg, rgba(6, 12, 22, .68), rgba(6, 12, 22, .92)); } .hub-widget__bar { position: absolute; top: .5rem; right: .5rem; display: flex; gap: .3rem; z-index: 2; } .hub-widget__icon { width: 26px; height: 26px; display: grid; place-items: center; border-radius: 8px; cursor: pointer; color: var(--text-2); background: rgba(255, 255, 255, .05); border: 1px solid var(--glass-border); transition: color var(--dur-fast), border-color var(--dur-fast); } .hub-widget__icon:hover { color: var(--text); border-color: var(--line-strong); } .hub-widget__icon svg { width: 14px; height: 14px; } .hub-widget__title { font-family: var(--font-ui); font-weight: 700; font-size: .98rem; color: var(--text); padding-right: 3.6rem; } .hub-widget__sub { font-size: .8rem; color: var(--text-2); line-height: 1.3; margin: .15rem 0 .75rem; } .hub-widget__cta { width: 100%; } /* Burbuja minimizada */ .hub-widget__fab { position: absolute; right: 0; bottom: 0; width: 56px; height: 56px; border-radius: 50%; display: grid; place-items: center; cursor: pointer; font-size: 1.5rem; line-height: 1; background: var(--glass-bg-strong); border: 1px solid var(--glass-border); -webkit-backdrop-filter: blur(var(--glass-blur)); backdrop-filter: blur(var(--glass-blur)); box-shadow: var(--shadow-lg), 0 0 26px -4px rgba(59, 125, 255, .65); opacity: 0; transform: scale(.5); pointer-events: none; transition: opacity .35s var(--ease), transform .4s cubic-bezier(.34, 1.56, .64, 1); animation: hubFloat 5s ease-in-out infinite; } /* Estado minimizado: oculta la tarjeta, muestra la burbuja */ .hub-widget.is-min .hub-widget__card { opacity: 0; transform: scale(.7); pointer-events: none; } .hub-widget.is-min .hub-widget__fab { opacity: 1; transform: none; pointer-events: auto; } /* Pausa el flotado al pasar el cursor: mas comodo para interactuar */ .hub-widget__card:hover, .hub-widget__fab:hover { animation-play-state: paused; }