/*==========================================================
CONTENDENCIA.ONLINE
ENVÍOS REALIZADOS
==========================================================*/

:root{

    --primary:#0B1D3A;
    --secondary:#FF7300;
    --white:#FFFFFF;
    --text:#2C3E50;
    --background:#F8FAFC;
    --border:#E7EDF5;

    --shadow-sm:0 8px 20px rgba(0,0,0,.05);
    --shadow-md:0 18px 40px rgba(11,29,58,.10);
    --shadow-lg:0 30px 60px rgba(11,29,58,.15);

    --transition:.35s ease;

}

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

.envios-hero{

    position:relative;
    overflow:hidden;

    padding:20px 0 40px;

    background:linear-gradient(
        135deg,
        #FFFFFF 0%,
        #F8FAFC 60%,
        #EEF4FA 100%
    );

}

.envios-hero::before{

    content:"";

    position:absolute;

    width:550px;
    height:550px;

    background:rgba(255,115,0,.06);

    border-radius:50%;

    right:-220px;
    top:-220px;

}

.envios-hero::after{

    content:"";

    position:absolute;

    width:420px;
    height:420px;

    background:rgba(11,29,58,.05);

    border-radius:50%;

    left:-180px;
    bottom:-180px;

}

.envios-hero .container{

    position:relative;
    z-index:2;
    text-align:center;

}

.hero-badge{

    display:inline-flex;

    align-items:center;

    gap:10px;

    padding:12px 22px;

    border-radius:999px;

    background:rgba(255,115,0,.10);

    color:var(--secondary);

    font-weight:700;

    margin-bottom:25px;

}

.envios-hero h1{

    font-size:clamp(2.4rem,5vw,4.5rem);

    color:var(--primary);

    margin-bottom:25px;

    line-height:1.1;

}

.envios-hero h1 span{

    color:var(--secondary);

}

.envios-hero p{

    max-width:760px;

    margin:auto;

    font-size:1.15rem;

    line-height:1.8;

    color:var(--text);

}

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

.mapa-envios{

    padding:2px 0;

    background:var(--white);

}

.section-title{

    text-align:center;

    margin-bottom:60px;

}

.section-title h2{

    color:var(--primary);

    margin-bottom:15px;

}

.section-title p{

    color:var(--text);

    max-width:700px;

    margin:auto;

}

.mapa-wrapper{

    background:white;

    border-radius:30px;

    padding:40px;

    box-shadow:var(--shadow-md);

    border:1px solid var(--border);

}

.mapa-bolivia{

    min-height:550px;

    display:flex;

    justify-content:center;

    align-items:center;

    background:#F8FAFC;

    border:2px dashed #D6E0EC;

    border-radius:20px;

    color:#8A98A8;

    font-size:1.1rem;

    font-weight:600;

}
/*==========================================================
FACEBOOK
==========================================================*/

.facebook-info{

    padding:90px 0;

    background:linear-gradient(
        135deg,
        var(--primary),
        #132C55
    );

    position:relative;

    overflow:hidden;

}

.facebook-info::before{

    content:"";

    position:absolute;

    width:500px;
    height:500px;

    background:rgba(255,255,255,.05);

    border-radius:50%;

    top:-250px;
    right:-200px;

}

.facebook-info::after{

    content:"";

    position:absolute;

    width:350px;
    height:350px;

    background:rgba(255,115,0,.08);

    border-radius:50%;

    bottom:-150px;
    left:-150px;

}

.facebook-info .container{

    position:relative;

    z-index:2;

}

.facebook-box{

    max-width:900px;

    margin:auto;

    background:rgba(255,255,255,.06);

    backdrop-filter:blur(10px);

    border:1px solid rgba(255,255,255,.08);

    border-radius:30px;

    padding:60px;

    text-align:center;

}

.facebook-box i{

    font-size:65px;

    color:#1877F2;

    margin-bottom:25px;

}

.facebook-box h3{

    color:white;

    margin-bottom:20px;

    font-size:2rem;

}

.facebook-box p{

    color:rgba(255,255,255,.85);

    max-width:650px;

    margin:auto;

    line-height:1.8;

    margin-bottom:35px;

}



/*==========================================================
BOTONES
==========================================================*/

.btn-primary{

    display:inline-flex;

    align-items:center;

    justify-content:center;

    gap:10px;

    background:var(--secondary);

    color:white;

    padding:16px 34px;

    border-radius:999px;

    font-weight:700;

    text-decoration:none;

    transition:var(--transition);

    box-shadow:var(--shadow-sm);

}

.btn-primary:hover{

    background:#E66600;

    color:white;

    transform:translateY(-5px);

    box-shadow:var(--shadow-lg);

}



/*==========================================================
ANIMACIONES
==========================================================*/

.hero-badge,
.envios-hero h1,
.envios-hero p{

    animation:fadeUp .8s ease both;

}

.mapa-wrapper{

    animation:fadeUp 1s ease both;

}

.facebook-box{

    animation:fadeUp 1.2s ease both;

}

@keyframes fadeUp{

    from{

        opacity:0;

        transform:translateY(35px);

    }

    to{

        opacity:1;

        transform:translateY(0);

    }

}



/*==========================================================
HOVER DEL MAPA
==========================================================*/

.mapa-bolivia svg{

    width:100%;

    max-width:700px;

    height:auto;

}

.mapa-bolivia svg path{

    fill:var(--primary);

    stroke:white;

    stroke-width:2;

    cursor:pointer;

    transition:.3s;

}

.mapa-bolivia svg path:hover{

    fill:var(--secondary);

}



/*==========================================================
RESPONSIVE
==========================================================*/

@media(max-width:992px){

.envios-hero{

padding:10px 0 30px;

}

.mapa-wrapper{

padding:25px;

}

.facebook-box{

padding:40px;

}

}



@media(max-width:768px){

.envios-hero h1{

font-size:2.4rem;

}

.envios-hero p{

font-size:1rem;

}

.mapa-wrapper{

padding:18px;

}

.mapa-bolivia{

min-height:350px;

}

.facebook-box{

padding:30px 20px;

}

.facebook-box h3{

font-size:1.6rem;

}

.facebook-box i{

font-size:50px;

}

.btn-primary{

width:100%;

}

}



/*==========================================================
SCROLLBAR
==========================================================*/

::-webkit-scrollbar{

width:10px;

}

::-webkit-scrollbar-track{

background:#EDF2F7;

}

::-webkit-scrollbar-thumb{

background:var(--primary);

border-radius:20px;

}

::-webkit-scrollbar-thumb:hover{

background:var(--secondary);

}



/*==========================================================
SELECCIÓN
==========================================================*/

::selection{

background:var(--secondary);

color:white;

}
/*==========================================================
MENSAJE FLOTANTE
==========================================================*/

.mensaje-envio{

    position:fixed;

    left:50%;

    bottom:30px;

    transform:translateX(-50%) translateY(30px);

    background:#0B1D3A;

    color:white;

    padding:16px 28px;

    border-radius:999px;

    box-shadow:0 20px 45px rgba(0,0,0,.20);

    z-index:9999;

    opacity:0;

    transition:.35s;

    display:flex;

    align-items:center;

    gap:12px;

}

.mensaje-envio i{

    color:#FF7300;

}

.mensaje-envio.mostrar{

    opacity:1;

    transform:translateX(-50%) translateY(0);

}

.mapa-bolivia a.activo path{

    fill:#FF7300 !important;

}