/* ===== Global mínimos del sitio (no UI) ===== */
html, body {
    font-family: 'Segoe UI', sans-serif;
    margin: 0;
    padding: 0;
}

h1, h2, h5 {
    font-weight: 600;
}

/* No pises los botones de la UI con el estilo de links */
a:not(.ui-btn), .btn-link {
    color: #006bb7;
}

/* Bootstrap primary legacy (si lo usas en otros lados) */
.btn-primary {
    color: #fff;
    background-color: #1b6ec2;
    border-color: #1861ac;
}

/* Gradiente antiguo (si lo necesitas en otras secciones) */
.norm-gradient {
    background-image: linear-gradient(217deg,#0575E6,#021B79);
}

/* ===== HERO + partículas ===== */
.hero {
    position: relative;
    overflow: hidden;
}

.hero-height {
    min-height: 100vh;
}

@supports(height:100dvh) {
    .hero-height {
        min-height: 100dvh;
    }
}


/* Asegura que el canvas llena el hero siempre */
#particles-js {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    display: block;
}


/* Contenido por encima del canvas */
.hero {
    position: relative;
    overflow: hidden;
}

.hero-content {
    position: relative;
    z-index: 1;
}

    .hero-content h1 {
        font-size: clamp(2rem,6vw,4rem);
    }

    .hero-content .lead {
        font-size: clamp(1rem,2.2vw,1.25rem);
    }

/* ===== HOME – NeuroVIMA (secciones) ===== */

/* Fondo del héroe con variables corporativas */
.nv-hero {
    background-image: linear-gradient(217deg,var(--primary),var(--primary-hover));
    isolation: isolate;
}

/* Chips/KPIs */
.nv-chip {
    display: inline-block;
    padding: .35rem .6rem;
    font-weight: 600;
    border-radius: 999px;
    letter-spacing: .2px;
}

.nv-chip--glass {
    background: rgba(255,255,255,.14);
    border: 1px solid rgba(255,255,255,.24);
    color: #fff;
    backdrop-filter: blur(6px);
}

.nv-kpis {
    display: flex;
    gap: 1.2rem;
    flex-wrap: wrap;
}

.nv-kpi {
    padding: .6rem .9rem;
    border: 1px solid rgba(255,255,255,.2);
    border-radius: .75rem;
}

.nv-kpi__num {
    font-size: 1.25rem;
    font-weight: 800;
    line-height: 1;
}

.nv-kpi__txt {
    opacity: .85;
    font-size: .9rem;
}

/* Card diferencial en hero */
.nv-hero-card {
    box-shadow: var(--shadow-lg);
}

    .nv-hero-card .ui-card-header {
        background: rgba(31,41,55,.9);
    }

/* Trust strip */
.nv-trust {
    background: var(--background);
    border-top: 1px solid var(--border);
    border-bottom: 1px solid var(--border);
}

.nv-logo-skel {
    height: 44px;
    border: 1px dashed var(--border);
    border-radius: .5rem;
    display: grid;
    place-items: center;
    color: var(--muted);
    font-weight: 600;
}

/* Secciones genéricas */
.nv-section h2 {
    color: var(--text);
}

.nv-list {
    margin: 0;
    padding-left: 0;
    list-style: none;
}

    .nv-list li {
        display: flex;
        gap: .5rem;
        align-items: start;
        margin: .35rem 0;
    }

    .nv-list i {
        color: var(--primary);
        margin-top: .15rem;
    }

/* Soluciones */
.nv-solution {
    border: 1px solid var(--border);
    border-radius: .75rem;
    background: var(--background);
    padding: 1rem;
    box-shadow: var(--shadow-sm);
    height: 100%;
}

.nv-solution__icon {
    width: 44px;
    height: 44px;
    border-radius: .75rem;
    background: var(--success-soft);
    display: grid;
    place-items: center;
    margin-bottom: .6rem;
    font-size: 1.25rem;
}

.nv-bullets {
    margin: 0;
    padding-left: 1rem;
}

    .nv-bullets li {
        margin: .2rem 0;
    }

/* Tags */
.nv-tags {
    display: flex;
    gap: .5rem;
    flex-wrap: wrap;
}

.nv-tag {
    font-size: .82rem;
    padding: .2rem .5rem;
    border-radius: .5rem;
    background: var(--background-2);
    border: 1px solid var(--border);
    color: var(--text);
}

/* CTA */
.nv-cta {
    background: linear-gradient(0deg, rgba(0,0,0,0), rgba(0,0,0,0)), linear-gradient(217deg, var(--secondary-2), var(--secondary));
    color: #fff;
    border-top: 1px solid rgba(255,255,255,.06);
    border-bottom: 1px solid rgba(255,255,255,.06);
}

    .nv-cta h3 {
        color: #fff;
    }

/* ===== Utilidades varias (de tu app original) ===== */
.btn:focus, .btn:active:focus, .btn-link.nav-link:focus, .form-control:focus, .form-check-input:focus {
    box-shadow: 0 0 0 .1rem white, 0 0 0 .25rem #258cfb;
}

.content {
    padding-top: 1.1rem;
}

h1:focus {
    outline: none;
}

.valid.modified:not([type=checkbox]) {
    outline: 1px solid #26b050;
}

.invalid {
    outline: 1px solid #e50000;
}

.validation-message {
    color: #e50000;
}