/* =========================================================
   franVagu — Brand Palette Override
   Mantiene la estructura y layout existentes.
   ========================================================= */

:root {
    --brand-blue: #0D47A1;
    --brand-blue-2: #1565C0;
    --brand-bright: #00B8FF;
    --brand-cyan: #00E1C6;
    --brand-navy: #0A0F1A;
    --brand-gradient: linear-gradient(
        120deg,
        #0D47A1 0%,
        #1565C0 45%,
        #00B8FF 78%,
        #00E1C6 100%
    );

    /* Reemplazo de la paleta monocromática actual */
    --bg: #0A0F1A;
    --bg-soft: #0D1726;
    --text: #F5F7FA;
    --text-soft: #B8C7D9;
    --text-muted: #7F91A8;
    --border: rgba(21, 101, 192, 0.22);
}

/* Header */
.site-header.scrolled {
    background: rgba(10, 15, 26, 0.88);
}

.brand-symbol {
    border-color: rgba(0, 184, 255, 0.45);
    box-shadow: 0 0 24px rgba(0, 184, 255, 0.10);
}

.brand-name {
    background: var(--brand-gradient);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}

.nav-cta {
    border-color: rgba(0, 184, 255, 0.45);
}

.nav-cta:hover {
    background: var(--brand-gradient);
    border-color: transparent;
    color: #fff;
}

/* Hero */
.hero-grid {
    background-image:
        linear-gradient(rgba(0, 184, 255, 0.055) 1px, transparent 1px),
        linear-gradient(90deg, rgba(0, 184, 255, 0.055) 1px, transparent 1px);
}

.hero-glow {
    background:
        radial-gradient(
            circle,
            rgba(13, 71, 161, 0.30) 0%,
            rgba(0, 225, 198, 0.10) 38%,
            transparent 70%
        );
}

.hero-label-dot,
.hero-node {
    background: var(--brand-cyan);
    box-shadow: 0 0 16px rgba(0, 225, 198, 0.65);
}

.hero h1 span {
    background: var(--brand-gradient);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}

.hero-button-primary {
    background: var(--brand-gradient);
    color: #fff;
    box-shadow: 0 8px 28px rgba(13, 71, 161, 0.28);
}

.hero-button-primary:hover {
    box-shadow: 0 10px 34px rgba(0, 225, 198, 0.22);
}

.hero-button-secondary:hover {
    border-color: rgba(0, 184, 255, 0.60);
}

/* Elemento FVA */
.fva-mark .fva-v {
    color: var(--brand-bright);
    text-shadow: 0 0 30px rgba(0, 184, 255, 0.48);
}

.hero-ring {
    border-color: rgba(0, 184, 255, 0.12);
}

/* Secciones */
.section-eyebrow,
.service-link,
.contact-info a {
    color: var(--brand-bright);
}

.service-link:hover,
.contact-info a:hover {
    color: var(--brand-cyan);
}

.service-card:hover {
    border-color: rgba(0, 184, 255, 0.35);
    box-shadow: inset 3px 0 0 var(--brand-bright);
}

/* Proyectos */
.project-image {
    background:
        linear-gradient(
            135deg,
            rgba(13, 71, 161, 0.30),
            rgba(0, 225, 198, 0.10)
        );
}

.project-placeholder span {
    color: var(--brand-bright);
}

/* Nosotros */
.about-statement strong {
    background: var(--brand-gradient);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}

/* Contacto */
.contact h2 span {
    background: var(--brand-gradient);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}

.form-group input:focus,
.form-group textarea:focus {
    border-color: rgba(0, 184, 255, 0.65);
    box-shadow: 0 0 0 3px rgba(0, 184, 255, 0.08);
}

.contact-submit {
    background: var(--brand-gradient);
    border-color: transparent;
    color: #fff;
    box-shadow: 0 8px 28px rgba(13, 71, 161, 0.28);
}

.contact-submit:hover {
    box-shadow: 0 10px 34px rgba(0, 225, 198, 0.22);
}

/* Footer */
footer {
    background: #070C14;
}

.footer-brand .brand-symbol {
    border-color: rgba(0, 225, 198, 0.40);
}

/* Menú móvil */
@media (max-width: 900px) {
    .navbar-menu {
        background: rgba(13, 23, 38, 0.98);
    }
}