*{
    margin:0;
    padding:0;
    box-sizing:border-box;
    font-family:Arial, Helvetica, sans-serif;
}

body{
    background:#020617;
    color:white;
    overflow-x:hidden;
}

/* ===================================== */
/* HEADER */
/* ===================================== */

header{

    padding:50px 20px;
    text-align:center;

}

header h1{

    font-size:52px;
    margin-bottom:15px;
    font-weight:800;

}

header p{

    color:#cbd5e1;
    font-size:20px;
    max-width:900px;
    margin:auto;
    line-height:1.6;

}

/* ===================================== */
/* TOOLBAR */
/* ===================================== */

.toolbar{

    display:flex;
    justify-content:center;
    align-items:center;
    gap:15px;
    flex-wrap:wrap;
    margin-bottom:25px;
    padding:0 20px;

}

.toolbar button{

    background:#0284c7;
    border:none;
    color:white;
    padding:13px 22px;
    border-radius:14px;
    font-size:15px;
    cursor:pointer;
    transition:0.3s;
    font-weight:600;

}

.toolbar button:hover{

    background:#0369a1;
    transform:translateY(-2px);

}

/* ===================================== */
/* MAPA */
/* ===================================== */

.map-container{

    width:95%;
    margin:auto;
    position:relative;

}

#map{

    width:100%;
    height:750px;
    border-radius:25px;
    overflow:hidden;
    box-shadow:0 0 60px rgba(0,0,0,0.45);

}

/* ===================================== */
/* PAINEL */
/* ===================================== */

.dashboard{

    width:95%;
    margin:25px auto;

    display:grid;
    grid-template-columns:repeat(auto-fit,minmax(280px,1fr));
    gap:20px;

}

.card{

    background:#0f172a;
    border-radius:20px;
    padding:25px;
    border:1px solid rgba(255,255,255,0.05);

}

.card h3{

    margin-bottom:20px;
    color:#38bdf8;
    font-size:20px;

}

.card-content{

    color:#e2e8f0;
    line-height:1.8;

}

.good{

    color:#22c55e;
    font-weight:bold;

}

.medium{

    color:#facc15;
    font-weight:bold;

}

.bad{

    color:#ef4444;
    font-weight:bold;

}

/* ===================================== */
/* SIGNAL BAR */
/* ===================================== */

.signal-bar{

    width:100%;
    height:18px;
    background:#1e293b;
    border-radius:20px;
    overflow:hidden;
    margin-top:18px;

}

.signal-fill{

    height:100%;
    width:0%;
    background:linear-gradient(
        90deg,
        #ef4444,
        #facc15,
        #22c55e
    );

    transition:1s;

}

/* ===================================== */
/* POPUP */
/* ===================================== */

.leaflet-popup-content-wrapper{

    background:#0f172a;
    color:white;
    border-radius:16px;

}

.leaflet-popup-tip{

    background:#0f172a;

}

/* ===================================== */
/* RESPONSIVO */
/* ===================================== */

@media(max-width:768px){

    header h1{

        font-size:34px;

    }

    header p{

        font-size:16px;

    }

    #map{

        height:550px;

    }

}

/* ========================================= */
/* FIX GERAL MAPA */
/* ========================================= */

.map-section{

    position: relative;
    width: 100%;
    padding: 80px 0;
    background: #020617;
    overflow: hidden;
    z-index: 1;

}

/* ========================================= */
/* TOOLBAR */
/* ========================================= */

.toolbar{

    display:flex;
    justify-content:center;
    align-items:center;
    gap:15px;
    flex-wrap:wrap;

    margin-bottom:25px;
    position:relative;
    z-index:1000;

}

.toolbar button{

    border:none;
    padding:14px 28px;
    border-radius:14px;

    background:linear-gradient(
        135deg,
        #0ea5e9,
        #2563eb
    );

    color:white;
    font-weight:700;
    cursor:pointer;

    transition:0.3s;

    box-shadow:0 10px 30px rgba(0,0,0,0.25);

}

.toolbar button:hover{

    transform:translateY(-3px);

}

/* ========================================= */
/* MAP CONTAINER */
/* ========================================= */

.map-container{

    width:100%;
    max-width:1400px;

    margin:auto;
    padding:0 20px;

    position:relative;
    z-index:1;

}

/* ========================================= */
/* MAPA */
/* ========================================= */

#map{

    width:100%;
    height:700px;

    border-radius:24px;

    overflow:hidden;

    border:1px solid rgba(255,255,255,0.08);

    box-shadow:
        0 25px 80px rgba(0,0,0,0.45);

    z-index:1;

}

/* ========================================= */
/* DASHBOARD */
/* ========================================= */

.dashboard{

    width:100%;
    max-width:1400px;

    margin:30px auto 0 auto;

    padding:0 20px;

    display:grid;

    grid-template-columns:
    repeat(auto-fit,minmax(260px,1fr));

    gap:20px;

}

.card{

    background:#0f172a;

    border-radius:20px;

    padding:24px;

    border:1px solid rgba(255,255,255,0.05);

    backdrop-filter: blur(10px);

}

/* ========================================= */
/* LEAFLET FIX */
/* ========================================= */

.leaflet-container{

    background:#020617 !important;
    font-family:inherit;
    z-index:1;

}

.leaflet-control-container{

    z-index:999 !important;

}

.leaflet-top,
.leaflet-bottom{

    z-index:999 !important;

}

/* ========================================= */
/* HERO FIX */
/* ========================================= */

.hero-section{

    overflow:hidden;

}

/* ========================================= */
/* BOOTSTRAP FIX */
/* ========================================= */

.container,
.container-fluid{

    position:relative;

}

/* ========================================= */
/* RESPONSIVO */
/* ========================================= */

@media(max-width:768px){

    #map{

        height:500px;

    }

    .toolbar{

        padding:0 15px;

    }

}


/* ========================================= */
/* FIXES FG TELECOM */
/* ========================================= */

.map-section{
    position:relative;
    width:100%;
    padding:80px 0;
    background:#020617;
    overflow:hidden;
    z-index:1;
}

.toolbar{
    display:flex;
    justify-content:center;
    align-items:center;
    gap:15px;
    flex-wrap:wrap;
    margin-bottom:25px;
    position:relative;
    z-index:1000;
}

.toolbar button{
    border:none;
    padding:14px 28px;
    border-radius:14px;
    background:linear-gradient(135deg,#0ea5e9,#2563eb);
    color:#fff;
    font-weight:700;
    cursor:pointer;
    transition:.3s;
    box-shadow:0 10px 30px rgba(0,0,0,.25);
}

.toolbar button:hover{
    transform:translateY(-3px);
}

.map-container{
    width:100%;
    max-width:1400px;
    margin:auto;
    padding:0 20px;
    position:relative;
}

#map{
    width:100%;
    height:700px;
    border-radius:24px;
    overflow:hidden;
    border:1px solid rgba(255,255,255,.08);
    box-shadow:0 25px 80px rgba(0,0,0,.45);
    z-index:1;
}

.dashboard{
    width:100%;
    max-width:1400px;
    margin:30px auto 0 auto;
    padding:0 20px;
    display:grid;
    grid-template-columns:repeat(auto-fit,minmax(260px,1fr));
    gap:20px;
}

.card{
    background:#0f172a;
    border-radius:20px;
    padding:24px;
    border:1px solid rgba(255,255,255,.05);
    backdrop-filter:blur(10px);
}

.leaflet-container{
    background:#020617 !important;
    z-index:1;
}

.leaflet-control-container,
.leaflet-top,
.leaflet-bottom{
    z-index:999 !important;
}

.hero-section{
    overflow:hidden;
}

.suporte-container{
    z-index:99999 !important;
}

@media(max-width:768px){

    #map{
        height:500px;
    }

    .toolbar{
        padding:0 15px;
    }

}


/* ================================================= */
/* INTEGRAÇÃO VISUAL TOTAL FG TELECOM */
/* ================================================= */

.map-section{
    background:#f8f9fc !important;
    padding-top:80px;
    padding-bottom:80px;
}

.map-section::before{
    content:'';
    position:absolute;
    inset:0;
    background:
    radial-gradient(circle at top,
    rgba(37,99,235,.08),
    transparent 60%);
    pointer-events:none;
}

.map-container{
    max-width:1250px;
}

#map{
    height:650px;
    border-radius:22px;
    border:none !important;
    overflow:hidden;
    box-shadow:
    0 15px 50px rgba(0,0,0,.12);
}

/* TOOLBAR */

.toolbar{
    margin-bottom:35px;
}

.toolbar button{
    background:linear-gradient(
    135deg,
    #1d4ed8,
    #2563eb
    ) !important;

    border-radius:12px;
    font-size:15px;
    padding:12px 22px;
    box-shadow:0 8px 25px rgba(37,99,235,.25);
}

.toolbar button:hover{
    transform:translateY(-2px);
}

/* DASHBOARD */

.dashboard{
    margin-top:35px;
    max-width:1250px;
}

.card{
    background:white !important;
    border-radius:20px !important;
    border:none !important;
    box-shadow:0 10px 30px rgba(0,0,0,.06);
    transition:.3s;
}

.card:hover{
    transform:translateY(-4px);
}

.card h3{
    color:#111827 !important;
    font-size:20px;
    margin-bottom:15px;
}

.card-content{
    color:#4b5563 !important;
    font-size:15px;
    line-height:1.7;
}

/* FAQ */

.faq-section{
    background:#ffffff !important;
    padding-top:90px;
    padding-bottom:90px;
}

.accordion-item{
    border:none !important;
    margin-bottom:15px;
    border-radius:16px !important;
    overflow:hidden;
    box-shadow:0 8px 25px rgba(0,0,0,.05);
}

.accordion-button{
    background:#ffffff !important;
    color:#111827 !important;
    font-weight:700;
    font-size:16px;
    padding:20px 25px;
}

.accordion-button:not(.collapsed){
    background:linear-gradient(
    135deg,
    #2563eb,
    #1d4ed8
    ) !important;

    color:white !important;
}

.accordion-body{
    background:#ffffff;
    color:#4b5563;
    font-size:15px;
    line-height:1.8;
}

/* MENU */

.navbar{
    background:#ffffff !important;
    box-shadow:0 4px 20px rgba(0,0,0,.04);
    padding-top:18px;
    padding-bottom:18px;
}

.navbar .nav-link{
    color:#111827 !important;
    font-weight:600;
    transition:.3s;
}

.navbar .nav-link:hover{
    color:#2563eb !important;
}

.navbar .btn-primary{
    border-radius:12px !important;
    padding:12px 22px !important;
    background:linear-gradient(
    135deg,
    #2563eb,
    #1d4ed8
    ) !important;
    border:none !important;
    box-shadow:0 10px 25px rgba(37,99,235,.25);
}

/* LEAFLET */

.leaflet-control-zoom{
    border:none !important;
    overflow:hidden;
    border-radius:12px !important;
    box-shadow:0 10px 30px rgba(0,0,0,.15);
}

.leaflet-control-zoom a{
    background:#ffffff !important;
    color:#111827 !important;
}

.leaflet-popup-content-wrapper{
    border-radius:16px;
    background:#ffffff;
    color:#111827;
}

.leaflet-popup-tip{
    background:#ffffff;
}

/* RESPONSIVO */

@media(max-width:768px){

    #map{
        height:500px;
    }

    .dashboard{
        grid-template-columns:1fr;
    }

    .toolbar{
        flex-direction:column;
    }

}


/* ====================================== */
/* FIX MENU E ESPAÇAMENTOS */
/* ====================================== */

/* MENU */

.header-main{
    margin:0 !important;
    padding:0 !important;
}

.navbar{
    min-height:auto !important;
    padding:10px 0 !important;
}

.navbar .container{
    padding-top:0 !important;
    padding-bottom:0 !important;
}

.navbar-brand{
    margin:0 !important;
    padding:0 !important;
}

.logo{
    max-height:70px !important;
    width:auto !important;
}

.navbar-nav{
    align-items:center !important;
    gap:8px !important;
}

.navbar .nav-item{
    margin:0 !important;
    padding:0 !important;
}

.navbar .nav-link{
    padding:8px 12px !important;
    font-size:15px !important;
    line-height:1.2 !important;
}

/* HERO */

.hero-section{
    margin:0 !important;
    padding:0 !important;
}

.hero-content{
    padding:0 !important;
}

.min-vh-100{
    min-height:auto !important;
}

/* REMOVE ESPAÇOS */

section{
    margin-bottom:0 !important;
}

.services-section,
.about-section,
.plans-preview-section,
.videos-metricas,
.map-section,
.stats-section,
.faq-section{
    padding-top:70px !important;
    padding-bottom:70px !important;
}

/* FOOTER */

.footer-main{
    margin-top:0 !important;
    padding-bottom:20px !important;
}

/* REMOVE ESPAÇO FINAL */

body{
    overflow-x:hidden !important;
}

html, body{
    margin:0 !important;
    padding:0 !important;
}

/* RESPONSIVO MENU */

@media(max-width:991px){

    .navbar-collapse{
        background:#fff;
        padding:20px;
        border-radius:16px;
        margin-top:15px;
        box-shadow:0 10px 30px rgba(0,0,0,.08);
    }

    .navbar-nav{
        gap:12px !important;
    }

    .navbar .btn-primary{
        width:100%;
    }

}