/* ============================================================
   /auditoria — overrides
   Carga DESPUÉS de auditoria-cc.css. Hace dos cosas:
   1) Define las fuentes Geist que el tema de cybercheck espera.
   2) Pone header+top-bar en oscuro SOLO en esta página, remapeando
      los tokens HSL de nettech dentro de body.page-auditoria (mismo
      truco que las "islas oscuras" del reskin). El footer ya es oscuro.
   ============================================================ */

:root {
    --font-geist: 'Geist', system-ui, -apple-system, sans-serif;
    --font-geist-mono: 'Geist Mono', ui-monospace, 'SF Mono', monospace;
}

/* --- Remapear tokens de nettech a oscuro en esta página --- */
body.page-auditoria {
    --background: 216 24% 7%;
    --foreground: 210 24% 92%;
    --muted-foreground: 214 12% 60%;
    --border: 216 16% 18%;
    --card: 216 22% 10%;
    --primary: 187 76% 38%;
    --primary-foreground: 0 0% 100%;
    --secondary: 187 76% 38%;
    --secondary-foreground: 0 0% 8%;
    /* sin grid claro ni grano del tema claro */
    background-image: none;
}

body.page-auditoria::after { display: none; }

/* --- Top bar oscura --- */
body.page-auditoria .top-bar {
    background: hsl(var(--card));
    border-bottom-color: hsl(var(--border));
}

/* --- Navbar oscura --- */
body.page-auditoria .navbar {
    background: rgba(10, 12, 15, 0.82);
    border-bottom-color: hsl(var(--border));
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
}

/* Botón "Contacto" del nav: que se vea sobre fondo oscuro */
body.page-auditoria .navbar .btn-secondary {
    background: hsl(var(--primary));
    color: #04210f;
}
body.page-auditoria .navbar .btn-secondary:hover {
    background: #16a4ad;
}

/* El subrayado del nav-link usa el acento de cyber.css → tealizar */
body.page-auditoria .nav-link::after {
    background: #16a4ad;
}

/* Logo: mantener visible */
body.page-auditoria .brand-text { color: hsl(var(--foreground)); }

/* ==========================================================================
   #vistazo-gratis — captura de leads de baja fricción
   La landing es un build de Tailwind compilado desde el portal, así que las
   utilidades que no existían en el original no tienen estilos. Este bloque
   es CSS propio para no depender de ese build.
   ========================================================================== */
#vistazo-gratis {
    position: relative;
    background: var(--color-bg);
    padding: 5rem 1.25rem;
    scroll-margin-top: 5rem;
}
#vistazo-gratis::before {
    content: "";
    position: absolute;
    inset: 0 0 auto 0;
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(22, 164, 173, .45), transparent);
}
.vg-wrap {
    display: grid;
    gap: 3rem;
    max-width: 1000px;
    margin: 0 auto;
    align-items: start;
}
.vg-kicker {
    display: inline-block;
    border: 1px solid rgba(22, 164, 173, .3);
    background: rgba(22, 164, 173, .06);
    border-radius: 999px;
    padding: .4rem .9rem;
    font-family: var(--font-mono), monospace;
    font-size: 10.5px;
    letter-spacing: .2em;
    text-transform: uppercase;
    color: var(--color-teal-bright);
}
.vg-title {
    margin: 1.5rem 0 0;
    font-size: clamp(1.75rem, 3.5vw, 2.5rem);
    font-weight: 600;
    line-height: 1.08;
    letter-spacing: -.02em;
    color: var(--color-ice);
}
.vg-title span { color: var(--color-teal-bright); }
.vg-lead {
    margin: 1.25rem 0 0;
    max-width: 34rem;
    font-size: .95rem;
    line-height: 1.65;
    color: var(--color-mute);
}
.vg-bullets {
    display: flex;
    flex-wrap: wrap;
    gap: .6rem 1.4rem;
    margin: 1.75rem 0 0;
    padding: 0;
    list-style: none;
}
.vg-bullets li {
    display: flex;
    align-items: center;
    gap: .45rem;
    font-size: .82rem;
    color: var(--color-faint);
}
.vg-bullets svg { color: var(--color-teal-bright); flex: 0 0 auto; }

.vg-card {
    border: 1px solid rgba(22, 164, 173, .22);
    background: rgba(10, 26, 30, .55);
    border-radius: 1rem;
    padding: 1.75rem;
    backdrop-filter: blur(6px);
}
.vg-form { display: flex; flex-direction: column; gap: 1.25rem; }
#vistazo-gratis .vg-label {
    display: block;
    margin-bottom: .5rem;
    font-family: var(--font-mono), monospace;
    font-size: 10.5px;
    letter-spacing: .18em;
    text-transform: uppercase;
    color: var(--color-teal-bright);
}
#vistazo-gratis .vg-input {
    width: 100%;
    box-sizing: border-box;
    border: 1px solid rgba(22, 164, 173, .28);
    background: rgba(8, 20, 24, .6);
    border-radius: .5rem;
    padding: .85rem 1rem;
    font: inherit;
    font-size: .95rem;
    color: var(--color-ice);
    transition: border-color .15s, box-shadow .15s;
}
#vistazo-gratis .vg-input::placeholder { color: rgba(226, 240, 242, .32); }
#vistazo-gratis .vg-input:focus {
    outline: none;
    border-color: var(--color-teal-bright);
    box-shadow: 0 0 0 3px rgba(22, 164, 173, .22);
}
#vistazo-gratis .vg-submit {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .5rem;
    width: 100%;
    border: 0;
    border-radius: .5rem;
    padding: .9rem 1.5rem;
    background: var(--color-teal-bright);
    color: #04161a;
    font: inherit;
    font-size: .95rem;
    font-weight: 600;
    cursor: pointer;
    transition: filter .15s, transform .15s;
}
#vistazo-gratis .vg-submit:hover { filter: brightness(1.1); }
#vistazo-gratis .vg-submit:hover svg { transform: translateX(2px); }
#vistazo-gratis .vg-submit svg { transition: transform .15s; }
#vistazo-gratis .vg-submit:focus-visible {
    outline: 2px solid rgba(22, 164, 173, .6);
    outline-offset: 2px;
}
#vistazo-gratis .vg-micro {
    margin: 0;
    font-size: .78rem;
    line-height: 1.55;
    color: var(--color-faint);
}
#vistazo-gratis .vg-micro a { color: var(--color-teal-bright); }

@media (min-width: 960px) {
    #vistazo-gratis { padding: 6rem 2.5rem; }
    .vg-wrap { grid-template-columns: 1fr 1fr; gap: 3.5rem; }
    .vg-card { padding: 2rem; }
}