/* =========================================================================
   QENT — Sistema visual compartido de las paginas de marketing
   (index.php, nosotros.php, seguridad.php, terminos.php, privacidad.php,
   soporte.php, blog.php)

   Extraido de index.php: tema oscuro, canvas de particulas, cursor
   personalizado, barra de progreso de scroll y utilidades de reveal.
   Este archivo asume que la pagina ya carga Tailwind CDN + Google Fonts
   (Inter) via head.php — aqui solo van los estilos propios de QENT.
   ========================================================================= */

/* ---------- Cursor personalizado ---------- */
body { cursor: none; }
input, select, textarea { cursor: auto; }
@media (hover: none), (pointer: coarse) { body { cursor: auto; } }
.custom-cursor {
    position: fixed;
    top: 0; left: 0;
    width: 12px; height: 12px;
    border: 1.5px solid rgba(37,99,235,0.6);
    border-radius: 50%;
    pointer-events: none;
    z-index: 9998;
    transform: translate(-50%, -50%);
    transition: width 0.25s ease, height 0.25s ease, background-color 0.25s ease, border-color 0.25s ease;
}
.custom-cursor.cursor-hover {
    width: 32px; height: 32px;
    background: rgba(37,99,235,0.2);
    border-color: rgba(37,99,235,0.45);
}
@media (hover: none), (pointer: coarse) { .custom-cursor { display: none; } }

/* ---------- Barra de progreso de scroll (debajo del navbar flotante) ---------- */
#scrollProgress {
    position: fixed;
    top: 64px; left: 0;
    height: 2px; width: 0%;
    background: linear-gradient(90deg, #2563eb, #06b6d4);
    z-index: 45;
    pointer-events: none;
}

/* ---------- Canvas de particulas conectadas (fondo fijo detras de todo) ---------- */
#hero-canvas { position: fixed; top: 0; left: 0; width: 100%; height: 100%; z-index: 0; background: #05050a; }

/* ---------- Navbar: leve intensificacion al hacer scroll ---------- */
#mainNavbar { transition: background-color 0.3s ease, box-shadow 0.3s ease; }
#mainNavbar.navbar-scrolled { background-color: rgba(10,10,15,0.92) !important; box-shadow: 0 8px 30px rgba(0,0,0,0.35); }

/* ---------- Utilidad de reveal-on-scroll (generico, sin GSAP) ---------- */
.reveal { opacity: 0; transform: translateY(24px); transition: opacity 0.6s ease, transform 0.6s ease; }
.reveal.in-view { opacity: 1; transform: translateY(0); }
@media (prefers-reduced-motion: reduce) {
    .reveal { opacity: 1; transform: none; transition: none; }
}

/* ---------- Card con glassmorphism (para bloques nuevos) ---------- */
.qent-card {
    background: rgba(255,255,255,0.04);
    border: 1px solid rgba(255,255,255,0.08);
    border-radius: 16px;
}

/* =================== Tema oscuro (override de Tailwind CDN) =================== */
body, body.bg-slate-50, body.bg-white { background: #05050a !important; color: rgba(255,255,255,0.88) !important; }
.bg-grid {
    background-image:
        linear-gradient(to right, rgba(255,255,255,0.035) 1px, transparent 1px),
        linear-gradient(to bottom, rgba(255,255,255,0.035) 1px, transparent 1px) !important;
}
.text-gradient {
    background: linear-gradient(180deg, #ffffff 0%, #94a3b8 100%) !important;
    -webkit-background-clip: text !important;
    background-clip: text !important;
    color: transparent !important;
}
.bg-white, .bg-white\/80, .bg-white\/95 { background-color: rgba(255,255,255,0.045) !important; }
.bg-slate-50 { background-color: rgba(255,255,255,0.03) !important; }
.bg-slate-100 { background-color: rgba(255,255,255,0.06) !important; }
.bg-slate-200 { background-color: rgba(255,255,255,0.09) !important; }
.text-slate-900 { color: rgba(255,255,255,0.92) !important; }
.text-slate-700 { color: rgba(255,255,255,0.72) !important; }
.text-slate-600 { color: rgba(255,255,255,0.6) !important; }
.text-slate-500 { color: rgba(255,255,255,0.48) !important; }
.text-slate-400 { color: rgba(255,255,255,0.4) !important; }
.text-gray-500 { color: rgba(255,255,255,0.48) !important; }
.border-slate-100 { border-color: rgba(255,255,255,0.06) !important; }
.border-slate-200 { border-color: rgba(255,255,255,0.1) !important; }
.border-slate-300 { border-color: rgba(255,255,255,0.16) !important; }
.shadow-sm { box-shadow: 0 1px 3px rgba(0,0,0,0.35) !important; }

/* excepcion: la pestana activa de #industrias (index.php) usa bg-white + text-black
   a proposito como estado "seleccionado" (pildora blanca solida) */
#industrias button.bg-white { background-color: #ffffff !important; color: #000000 !important; }