/* ============================================================
   N7Labs - Estilos complementarios del sitio público
   Paleta: #0a1929 (azul marino) / #f5f5f5 #d4d4d4 (plata)
           #0066ff (azul eléctrico) / #00a86b (esmeralda)
           #dc2626 (rojo) / #f59e0b (amarillo)
   ============================================================ */

html {
    scroll-behavior: smooth;
}

body {
    text-rendering: optimizeLegibility;
    -webkit-font-smoothing: antialiased;
}

/* ---- Barra superior fija ---- */
#navbar {
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    transition: background-color .25s ease, box-shadow .25s ease, border-color .25s ease;
}

#navbar.scrolled {
    background-color: rgba(10, 25, 41, 0.92);
    border-bottom: 1px solid rgba(212, 212, 212, 0.12);
    box-shadow: 0 10px 30px -12px rgba(0, 0, 0, 0.45);
}

/* ---- Fondos de malla técnica (grid) ---- */
.grid-overlay {
    background-image:
        linear-gradient(rgba(212, 212, 212, 0.10) 1px, transparent 1px),
        linear-gradient(90deg, rgba(212, 212, 212, 0.10) 1px, transparent 1px);
    background-size: 44px 44px;
}

.grid-overlay-light {
    background-image:
        linear-gradient(rgba(10, 25, 41, 0.06) 1px, transparent 1px),
        linear-gradient(90deg, rgba(10, 25, 41, 0.06) 1px, transparent 1px);
    background-size: 44px 44px;
}

/* ---- Texto con gradiente ---- */
.text-gradient {
    background: linear-gradient(100deg, #66a5ff 0%, #0066ff 55%, #00a86b 120%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;
}

/* ---- Reveal al hacer scroll ---- */
.reveal {
    opacity: 0;
    transform: translateY(28px);
    transition: opacity .7s cubic-bezier(.16,.8,.36,1), transform .7s cubic-bezier(.16,.8,.36,1);
    will-change: opacity, transform;
}

.reveal.in-view {
    opacity: 1;
    transform: translateY(0);
}

/* ---- Tarjetas ---- */
.card-lift {
    transition: transform .3s ease, box-shadow .3s ease, border-color .3s ease;
}

.card-lift:hover {
    transform: translateY(-6px);
    box-shadow: 0 24px 60px -16px rgba(0, 102, 255, 0.30);
}

/* ---- Botón WhatsApp flotante con pulso ---- */
.wa-pulse::before {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: 9999px;
    background: #25D366;
    animation: pulsewa 1.6s ease-out infinite;
    z-index: -1;
}

.wa-bounce {
    animation: floaty 4s ease-in-out infinite;
}

/* ---- Hero ---- */
.hero-bg {
    background-color: #0a1929;
    background-size: cover;
    background-position: center;
}

.hero-vignette {
    background:
        radial-gradient(900px 480px at 78% 18%, rgba(0, 102, 255, 0.28), transparent 60%),
        radial-gradient(760px 420px at 12% 86%, rgba(0, 168, 107, 0.18), transparent 60%),
        linear-gradient(180deg, rgba(6, 18, 31, 0.55) 0%, rgba(6, 18, 31, 0.82) 100%);
}

/* ---- Destello / brillo ---- */
.glow-dot {
    box-shadow: 0 0 0 4px rgba(0, 102, 255, 0.18), 0 0 24px rgba(0, 102, 255, 0.45);
}

/* ---- Selección de texto ---- */
::selection {
    background: #0066ff;
    color: #fff;
}

/* ---- Scrollbar del navegador ---- */
::-webkit-scrollbar { width: 10px; }
::-webkit-scrollbar-track { background: #f5f5f5; }
::-webkit-scrollbar-thumb { background: #163a61; border-radius: 8px; }
::-webkit-scrollbar-thumb:hover { background: #0066ff; }

/* ---- Accesibilidad: foco visible ---- */
a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible {
    outline: 3px solid #f59e0b;
    outline-offset: 2px;
}

/* ---- Marquesina / escáner animado opcional ---- */
.scanline {
    position: relative;
    overflow: hidden;
}

.scanline::after {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    height: 2px;
    top: -2px;
    background: linear-gradient(90deg, transparent, #00a86b, transparent);
    animation: scan 2.6s linear infinite;
}

@keyframes scan {
    0%   { top: -2px; }
    100% { top: 100%; }
}