:root {
    --esa-blue: #007bff; /* azul eléctrico */
    --esa-cyan: #29d3ff; /* acento cian */
    --esa-dark: #0b0e17; /* gris oscuro */
    --esa-muted: #7e8a9b;
    --radius: 1.1rem;
    --shadow: 0 10px 30px rgba(0,0,0,.18);
}

html {
    scroll-behavior: smooth;
    scroll-padding-top: 90px;
}

body {
    font-family: system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif;
    color: #e6e9ef;
    background: var(--esa-dark);
}

/* NAVBAR */
.navbar {
    background: rgba(11,14,23,.55) !important;
    backdrop-filter: blur(10px);
    border-bottom: 1px solid rgba(255,255,255,.06);
    transition: background .35s ease, box-shadow .25s ease;
}

    .navbar .nav-link {
        color: #dfe6f1 !important;
        position: relative;
        font-weight: 500;
    }

        .navbar .nav-link::after {
            content: '';
            position: absolute;
            left: 0;
            bottom: -6px;
            height: 2px;
            width: 0;
            background: linear-gradient(90deg,var(--esa-blue),var(--esa-cyan));
            transition: width .25s;
        }

        .navbar .nav-link:hover::after, .navbar .nav-link.active::after {
            width: 100%;
        }

    .navbar.scrolled {
        background: linear-gradient(90deg, rgba(0,123,255,.95), rgba(41,211,255,.95)) !important;
        box-shadow: 0 4px 14px rgba(0,0,0,.25);
    }

        .navbar.scrolled .nav-link {
            color: #fff !important;
        }

/* HERO */
.hero {
    position: relative;
    padding: 9rem 0 6rem;
    overflow: hidden;
}

    .hero video {
        position: absolute;
        inset: 0;
        width: 100%;
        height: 100%;
        object-fit: cover;
       
    }

    .hero::after {
        content: '';
        position: absolute;
        inset: 0;
        background: radial-gradient(1200px 600px at 20% -10%, rgba(0,123,255,.35), transparent 60%), linear-gradient(180deg, rgba(11,14,23,.25), rgba(11,14,23,.85));
    }

.hero-card {
    position: relative;
    z-index: 1;
    background: rgba(11,14,23,.55);
    border: 1px solid rgba(255,255,255,.08);
    border-radius: var(--radius);
    box-shadow: var(--shadow);
}

/* BOTONES */
.btn-esa {
    background: linear-gradient(90deg,var(--esa-blue),var(--esa-cyan));
    border: none;
    color: #fff;
}

    .btn-esa:hover {
        filter: brightness(1.05);
    }

.btn-outline-esa {
    border: 2px solid var(--esa-blue);
    color: #e6e9ef;
}

    .btn-outline-esa:hover {
        background: var(--esa-blue);
        color: #fff;
    }

/* CARDS */
.card-esa {
    background: #111624;
    border: 1px solid rgba(255,255,255,.06);
    border-radius: var(--radius);
    box-shadow: var(--shadow);
    height: 100%;
    transition: transform .25s, box-shadow .25s;
}

    .card-esa:hover {
        transform: translateY(-6px);
        box-shadow: 0 12px 30px rgba(0,0,0,.35);
    }

.icon-badge {
    width: 52px;
    height: 52px;
    display: grid;
    place-items: center;
    border-radius: 12px;
    background: linear-gradient(135deg,var(--esa-blue),var(--esa-cyan));
    color: #fff;
}

/* SECCIONES */
.section-title {
    color: #fff;
    font-weight: 800;
}

.section-sub {
    color: var(--esa-muted);
}

section {
    padding: 4.5rem 0;
}

/* MAPA / GALERÍA */
.map-wrap {
    border-radius: var(--radius);
    overflow: hidden;
    border: 1px solid rgba(255,255,255,.08);
    box-shadow: var(--shadow);
}

.masonry {
    column-count: 3;
    column-gap: 1rem;
}

    .masonry img {
        width: 100%;
        border-radius: .85rem;
        margin: 0 0 1rem;
        box-shadow: var(--shadow);
    }

@media (max-width:992px) {
    .masonry {
        column-count: 2
    }
}

@media (max-width:576px) {
    .masonry {
        column-count: 1
    }
}

/* FOOTER y MODAL */
footer {
    background: #0a0f1a;
    border-top: 1px solid rgba(255,255,255,.08);
}

.modal-esa {
    background: rgba(11,14,23,.95);
    color: #e6e9ef;
    backdrop-filter: blur(10px);
    border: 1px solid rgba(255,255,255,.08);
}

/* WHATSAPP FLOAT */
.btn-whatsapp {
    position: fixed;
    right: 20px;
    bottom: 20px;
    z-index: 1050;
    width: 56px;
    height: 56px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg,var(--esa-blue),var(--esa-cyan));
    color: #fff;
    font-size: 24px;
    box-shadow: 0 8px 24px rgba(0,0,0,.35);
    transition: transform .25s;
}

    .btn-whatsapp:hover {
        transform: scale(1.08);
    }
footer {
    background: #0b0e17;
    border-top: 1px solid rgba(255,255,255,0.1);
}

.modal-content.bg-dark {
    background: rgba(15,18,25,0.95);
    backdrop-filter: blur(10px);
}
.footer-esa {
    background: #0b0e17;
    border-top: 1px solid rgba(255,255,255,0.1);
}

    .footer-esa a {
        color: #bbb;
        text-decoration: none;
        transition: color .2s ease;
    }

        .footer-esa a:hover {
            color: #00b4ff;
        }

    .footer-esa h5 {
        border-bottom: 1px solid rgba(255,255,255,0.1);
        padding-bottom: .4rem;
    }
#modal-cobertura .modal-content {
    background: rgba(15,18,25,0.95);
    backdrop-filter: blur(10px);
    border: 1px solid rgba(255,255,255,0.1);
}
#mapaCobertura {
    z-index: 1;
}