/* ============================================================ Pixels Helps · Override paleta + tipografía "High Performance Telemetry" (Stitch DS validado 28-jun-2026) ============================================================ Sobrescribe las CSS vars del style.css base sin tocarlo. Carga AL FINAL del después del resto. ============================================================ */ :root { /* Base oscuro telemetría */ --bg: #131313; --surface: #1c1b1b; --surface-2: #201f1f; --surface-3: #2a2a2a; /* Acento cyan telemetría (era morado #7C3AED) */ --accent: #00dce3; --accent-hover: #00f7ff; --accent-glow: rgba(0, 220, 227, 0.25); /* Texto cálido off-white */ --text: #e5e2e1; --text-2: #b9caca; --text-mute: #849494; /* Bordes cyan-tinted */ --border: rgba(0, 220, 227, 0.08); --border-hover: rgba(0, 220, 227, 0.22); --border-soft: #3a4a4a; /* Sombras sin morado */ --shadow-accent: 0 8px 32px rgba(0, 220, 227, 0.25); /* Compat alias por si style-pro.css usa otros nombres */ --primary: #00dce3; --primary-hover: #00f7ff; --color-accent: #00dce3; --color-primary: #00dce3; } /* Tipografía Fontshare premium (no Google genéricas) */ html, body { font-family: 'Cabinet Grotesk', 'Inter', sans-serif; } h1, h2, h3, h4, h5, h6, .section-title, .hero-title, .pioneer-title, .ph-clients-title, .phx-testim-h2 { font-family: 'Excon', 'Cabinet Grotesk', sans-serif !important; letter-spacing: -0.02em; } .hero-badge, .nav-logo span, .float-chip, .hero-stat-label, .lang-name, code, pre, .label-mono { font-family: 'JetBrains Mono', 'Cabinet Grotesk', monospace; } /* Hero badge cyan en lugar de morado */ .hero-badge { border-color: rgba(0, 220, 227, 0.3) !important; color: #00dce3 !important; } /* Float chips cyan glow */ .float-chip { background: rgba(0, 220, 227, 0.08) !important; border-color: rgba(0, 220, 227, 0.25) !important; color: #00dce3 !important; text-shadow: 0 0 12px rgba(0, 220, 227, 0.4); } /* Hero accent text */ .hero-title .accent { color: #00dce3 !important; background: none !important; -webkit-text-fill-color: #00dce3 !important; } /* Hero stats values cyan */ .hero-stat-value { color: #00dce3 !important; } /* Buttons primary cyan */ .btn-primary { background: #00dce3 !important; color: #003739 !important; font-weight: 700; } .btn-primary:hover { background: #00f7ff !important; color: #002021 !important; box-shadow: 0 0 24px rgba(0, 220, 227, 0.4) !important; } /* Nav links hover */ .nav-links a:hover, .nav-links a[aria-current="page"] { color: #00dce3 !important; } /* Pioneer Verão section: mantener su identidad visual (campaña activa hasta 30-jun) pero alinear con paleta nueva en bordes/accents secundarios */ .pioneer-verao-section { --pioneer-accent: #00dce3; } /* Hero blobs ajustar el tinte morado → cyan */ .hero-blob, .hero-blob-2 { filter: hue-rotate(180deg) saturate(0.9); } /* Glow puzzle hero veil cyan */ .hero-puzzle-glow { background: radial-gradient(circle, rgba(0,220,227,0.15), transparent 70%) !important; } /* ============================================================ HERO 3D CARDS · estilo NEURAL_COMMAND_V1 + Sellix isometric ============================================================ */ .hero-3d-cards { position: absolute; top: 12%; right: 4%; width: clamp(380px, 38vw, 540px); height: 70%; perspective: 1400px; pointer-events: none; z-index: 4; display: block; } @media (max-width: 1024px) { .hero-3d-cards { display: none; } } .hero-3d-card { position: absolute; width: 240px; background: linear-gradient(140deg, #1c1b1b 0%, #131313 100%); border: 1px solid rgba(0, 220, 227, 0.18); border-radius: 14px; padding: 16px; box-shadow: 0 24px 64px rgba(0, 0, 0, 0.6), 0 0 0 1px rgba(0, 220, 227, 0.04), inset 0 1px 0 rgba(255, 255, 255, 0.04); font-family: 'JetBrains Mono', 'Tabular', monospace; transform-style: preserve-3d; animation: card-float 7s ease-in-out infinite alternate; } .hero-3d-card--1 { top: 4%; right: 24%; transform: rotateX(8deg) rotateY(-22deg) rotateZ(-3deg); animation-delay: 0s; } .hero-3d-card--2 { top: 32%; right: 0; transform: rotateX(10deg) rotateY(-18deg) rotateZ(-2deg); animation-delay: 1.5s; } .hero-3d-card--3 { top: 62%; right: 18%; transform: rotateX(6deg) rotateY(-26deg) rotateZ(-4deg); animation-delay: 3s; } @keyframes card-float { from { transform: rotateX(8deg) rotateY(-22deg) rotateZ(-3deg) translateY(0); } to { transform: rotateX(8deg) rotateY(-22deg) rotateZ(-3deg) translateY(-14px); } } .hero-3d-card-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 12px; font-size: 10px; letter-spacing: 0.08em; text-transform: uppercase; } .hero-3d-tag { padding: 3px 8px; border-radius: 4px; font-weight: 700; background: rgba(0, 220, 227, 0.15); color: #00f7ff; } .hero-3d-tag--orders { background: rgba(245, 166, 35, 0.18); color: #F5A623; } .hero-3d-tag--lead { background: rgba(0, 240, 164, 0.15); color: #00f0a4; } .hero-3d-meta { color: #849494; font-size: 10px; } .hero-3d-card-viz { background: #0e0e0e; border: 1px solid #2a2a2a; border-radius: 8px; padding: 14px; margin-bottom: 12px; height: 88px; display: flex; align-items: center; justify-content: center; } .hero-3d-card-viz svg { width: 100%; height: 100%; } .hero-3d-card-viz--stat { flex-direction: column; } .hero-3d-stat-value { font-family: 'Excon', sans-serif; font-size: 36px; font-weight: 800; color: #00f7ff; line-height: 1; } .hero-3d-stat-value span { font-size: 18px; color: #849494; } .hero-3d-stat-label { font-size: 9px; color: #849494; letter-spacing: 0.12em; text-transform: uppercase; margin-top: 6px; } .hero-3d-card-foot { display: flex; flex-direction: column; gap: 2px; border-top: 1px solid rgba(0, 220, 227, 0.08); padding-top: 10px; } .hero-3d-card-title { font-family: 'Excon', sans-serif; font-size: 14px; font-weight: 700; color: #e5e2e1; letter-spacing: -0.01em; } .hero-3d-card-sub { font-size: 10px; color: #b9caca; letter-spacing: 0.04em; } /* ============================================================ HERO TERMINAL · stream bar bottom estilo NEURAL_COMMAND ============================================================ */ .hero-terminal { position: absolute; bottom: 24px; left: 24px; z-index: 4; display: flex; align-items: center; gap: 10px; padding: 10px 16px; background: rgba(14, 14, 14, 0.85); backdrop-filter: blur(8px); border: 1px solid rgba(0, 220, 227, 0.18); border-radius: 6px; font-family: 'JetBrains Mono', 'Tabular', monospace; font-size: 11px; color: #b9caca; letter-spacing: 0.04em; max-width: calc(100% - 48px); overflow: hidden; white-space: nowrap; text-overflow: ellipsis; } .hero-terminal-prompt { color: #00f7ff; font-weight: 700; } .hero-terminal-cursor { color: #00f7ff; animation: term-blink 1s steps(2, start) infinite; } @keyframes term-blink { to { visibility: hidden; } } @media (max-width: 768px) { .hero-terminal { font-size: 9px; bottom: 12px; left: 12px; padding: 6px 10px; } }