/*=====================================================
    GEFRUTS
======================================================*/

:root{

    --verde:#39B54A;
    --verde-dark:#166534;
    --verde-light:#84CC16;

    --amarillo:#EAB308;

    --azul:#0284C7;

    --bg:#F1F5F9;

    --panel:#FFFFFF;

    --text:#0F172A;

    --muted:#647488;

    --border:#E2E8F0;

}

/**************************************************/

*{

    margin:0;
    padding:0;
    box-sizing:border-box;

}

html{

    scroll-behavior:smooth;

}

body{

    font-family:'Poppins',sans-serif;
    background:var(--bg);
    color:var(--text);
    overflow-x:hidden;

}

/**************************************************
                NAVBAR
**************************************************/

.navbar{

    padding:18px 0;
    background:#ffffffdd!important;

    backdrop-filter:blur(12px);

    transition:.4s;

}

.navbar-brand img{

    transition:.4s;

}

.nav-link{

    color:var(--text)!important;

    font-weight:500;

    margin-left:18px;

    position:relative;

}

.nav-link::after{

    content:"";

    position:absolute;

    left:0;

    bottom:-6px;

    width:0;

    height:3px;

    background:var(--verde);

    transition:.3s;

}

.nav-link:hover::after{

    width:100%;

}

/**************************************************
                BOTONES
**************************************************/

.btn-success{

    background:var(--verde);

    border:none;

    border-radius:50px;

    padding:14px 34px;

    font-weight:600;

    transition:.35s;

}

.btn-success:hover{

    background:var(--verde-dark);

    transform:translateY(-4px);

    box-shadow:0 18px 30px rgba(57,181,74,.30);

}

/**************************************************
                HERO
**************************************************/

.hero{

    min-height:100vh;

    display:flex;

    align-items:center;

    position:relative;

    overflow:hidden;

    background:linear-gradient(
        130deg,
        #FFFCEB 0%,
        #F1F5F9 55%,
        #ffffff 100%
    );

}

/**************************************************
Decoraciones
**************************************************/

.hero::before{

    content:"";

    width:600px;

    height:600px;

    background:rgba(234,179,8,.12);

    border-radius:50%;

    position:absolute;

    top:-250px;

    left:-200px;

}

.hero::after{

    content:"";

    width:420px;

    height:420px;

    background:rgba(57,181,74,.10);

    border-radius:50%;

    position:absolute;

    bottom:-180px;

    right:-120px;

}

/**************************************************
                TEXTO
**************************************************/

.hero-badge{

    display:inline-block;

    padding:10px 22px;

    background:#fff;

    color:var(--verde-dark);

    border-radius:50px;

    font-weight:600;

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

}

.hero h1{

    font-size:4.4rem;

    line-height:1;

    margin-top:20px;

    font-weight:800;

}

.hero h1 span{

    color:var(--verde);

}

.hero p{

    margin-top:25px;

    color:var(--muted);

    font-size:1.2rem;

    line-height:1.8;

    max-width:500px;

}

/**************************************************
            IMAGEN HERO
**************************************************/

.hero-image{

    position:relative;

}

.hero-image img{

    width:min(100%, 520px);

    height:auto;

    animation:float 5s ease-in-out infinite;

    filter:drop-shadow(0 28px 40px rgba(0,0,0,.18));

}

/**************************************************
                ANIMACIÓN
**************************************************/

@keyframes float{

    0%{

        transform:translateY(0px);

    }

    50%{

        transform:translateY(-18px);

    }

    100%{

        transform:translateY(0px);

    }

}

/**************************************************
            PRESENTACIÓN
**************************************************/

.bg-light{

    background:#fff!important;

}

.bg-light h2{

    font-size:2.7rem;

    font-weight:700;

}

.bg-light p{

    color:var(--muted);

    line-height:2;

}

/**************************************************
            CONTACTO
**************************************************/

.card{

    border-radius:30px;

    overflow:hidden;

}

.card-body{

    background:#fff;

}

.card h2{

    font-weight:700;

}

.card h5{

    color:var(--verde);

    font-weight:600;

}

.card p{

    color:var(--muted);

}

.shadow-lg{

    box-shadow:0 20px 60px rgba(0,0,0,.10)!important;

}

/**************************************************
            FOOTER
**************************************************/

footer{

    background:linear-gradient(
    90deg,
    var(--verde-dark),
    var(--verde)
    );

}

footer img{

    filter:brightness(1.15);

}

footer{

    font-size:.95rem;

}

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

.position-fixed{

    width:68px;

    height:68px;

    display:flex;

    align-items:center;

    justify-content:center;

    z-index:999;

    border:none;

    box-shadow:0 18px 40px rgba(0,0,0,.25);

    animation:pulse 2.5s infinite;

}

@keyframes pulse{

    0%{

        transform:scale(1);

    }

    50%{

        transform:scale(1.08);

    }

    100%{

        transform:scale(1);

    }

}

/**************************************************
            RESPONSIVE
**************************************************/

@media(max-width:992px){

.hero{

    padding-top:120px;

    text-align:center;

}

.hero p{

    margin:auto;

    margin-top:25px;

}

.hero h1{

    font-size:3rem;

}

.hero-image{

    margin-top:60px;

}

.hero-image img{

    width:80%;

}

}

@media(max-width:576px){

.hero h1{

    font-size:2.3rem;

}

.hero p{

    font-size:1rem;

}

.hero-image img{

    width:100%;

}

.card{

    border-radius:20px;

}

}