/*==================================================
                RESET GENERAL
==================================================*/

*{
    margin:0;
    padding:0;
    box-sizing:border-box;
}

html{
    scroll-behavior:smooth;
}

body{

    font-family:'Poppins',sans-serif;

    color:#ffffff;

    overflow-x:hidden;

    background:
        radial-gradient(circle at 15% 20%,rgba(34,197,94,.18),transparent 25%),
        radial-gradient(circle at 85% 10%,rgba(16,185,129,.12),transparent 30%),
        radial-gradient(circle at 50% 90%,rgba(59,130,246,.10),transparent 35%),
        linear-gradient(135deg,#050816 0%,#0b1220 40%,#111827 100%);

    background-attachment:fixed;

}

body::before{

    content:"";

    position:fixed;

    inset:0;

    pointer-events:none;

    z-index:-2;

    background:

        radial-gradient(circle at 20% 20%,rgba(34,197,94,.08),transparent 18%),

        radial-gradient(circle at 80% 30%,rgba(59,130,246,.08),transparent 22%),

        radial-gradient(circle at 50% 80%,rgba(16,185,129,.06),transparent 20%);

}

a{

    text-decoration:none;

    color:inherit;

}

img{

    display:block;

    max-width:100%;

}

section{

    padding:90px 0;

}

h1,h2,h3,h4,h5,h6{

    font-weight:700;

}

p{

    color:#cbd5e1;

    line-height:1.7;

}

/*==================================================
                    NAVBAR
==================================================*/

.navbar{

    background:rgba(8,12,20,.75)!important;

    backdrop-filter:blur(18px);

    border-bottom:1px solid rgba(34,197,94,.18);

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

}
.navbar{

    padding: 8px 0;

}

.navbar-brand{

    font-weight:700;

    letter-spacing:1px;

}

.nav-link{

    color:#e5e7eb!important;

    transition:.30s;

}

.nav-link:hover{

    color:#22c55e!important;

}

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

.btn{

    transition:.30s;

}

.btn:hover{

    transform:translateY(-3px);

}

/*==================================================
             BOTÓN WHATSAPP
==================================================*/

.whatsapp-float{

    position:fixed;

    right:25px;

    bottom:25px;

    width:65px;

    height:65px;

    border-radius:50%;

    background:#25D366;

    color:#fff;

    display:flex;

    align-items:center;

    justify-content:center;

    font-size:34px;

    text-decoration:none;

    box-shadow:0 12px 30px rgba(0,0,0,.35);

    transition:.30s;

    z-index:9999;

}

.whatsapp-float:hover{

    transform:scale(1.08);

    color:#fff;

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

.hero{

    position:relative;

    padding:120px 0 40px;

    overflow:hidden;

}

.hero .container{

    position:relative;

    z-index:10;

}

.hero-content{

    max-width:650px;

    position:relative;

    z-index:10;

}

.hero h1{

    font-size:3.8rem;

    font-weight:700;

    line-height:1.15;

    margin-bottom:25px;

}

.hero p{

    font-size:1.2rem;

    color:#cbd5e1;

    margin-bottom:35px;

}

.hero .btn{

    padding:15px 38px;

    font-size:18px;

    border-radius:50px;

}

.hero-img{
    width:100%;
    max-width:320px;
    height:auto;
    display:block;
    margin:20px auto 0;
}

.hero::before{

    background:linear-gradient(

        90deg,

        #050816 0%,

        rgba(5,8,22,.98) 28%,

        rgba(5,8,22,.82) 48%,

        rgba(5,8,22,.35) 68%,

        rgba(5,8,22,.05) 88%,

        transparent 100%

    );

}

@keyframes floatHero{

    0%{

        transform:translateY(0);

    }

    50%{

        transform:translateY(-15px);

    }

    100%{

        transform:translateY(0);

    }

}

@keyframes floatHero{

    0%{

        transform:translateY(0);

    }

    50%{

        transform:translateY(-16px);

    }

    100%{

        transform:translateY(0);

    }

}
/*==================================================
                RESPONSIVE HERO
==================================================*/

@media (max-width:991px){

 .hero{
    padding:90px 0 30px;
    text-align:center;
}

    .hero-content{

        max-width:100%;

        margin:0 auto;

    }

    .hero h1{

        font-size:2.8rem;

    }

    .hero p{

        font-size:1.05rem;

    }

    .hero-visual{

        position:relative;

        top:auto;

        right:auto;

        transform:none;

        width:100%;

        margin:50px auto 0;

    }

    .hero-img{

        max-width:700px;

        margin:0 auto;

    }

}

@media (max-width:576px){

    .hero{

        padding:110px 0 50px;

    }

    .hero h1{

        font-size:2.2rem;

        line-height:1.2;

    }

    .hero p{

        font-size:1rem;

    }

    .hero .btn{

        width:100%;

    }

    .hero .d-flex{

        justify-content:center;

    }

    .hero-img{

        max-width:100%;

    }
    .hero{
    padding:80px 0 20px;
}

.hero-visual{
    margin:15px auto -180px;
}

.hero-img{
    max-width:280px;
}

}
/* LOGO NAVBAR */

.logo-navbar{
     width:170px;
    height:auto;
    display:block;
}

.navbar-brand{

    padding:0;

    margin:0;

    display:flex;

    align-items:center;

}
.navbar .container{
    display:flex;
    align-items:center;
    justify-content:space-between;
    min-height:60px;
}
.servicio-card{

    background:#111827;

    border:1px solid rgba(34,197,94,.18);

    border-radius:22px;

    transition:.35s;

    overflow:hidden;

}

.servicio-card:hover{

    transform:translateY(-8px);

    border-color:#22c55e;

    box-shadow:0 20px 50px rgba(34,197,94,.20);

}

.servicio-card h4{

    color:#fff;

    font-weight:700;

}

.precio{

    color:#22c55e;

    font-weight:700;

}

.servicio-icono{

    width:74px;

    height:74px;

    border-radius:18px;

    display:flex;

    align-items:center;

    justify-content:center;

    background:linear-gradient(135deg,#16a34a,#22c55e);

    font-size:32px;

    color:white;

}