/* ==========================================
      GUAYAKATE - ESTILO PREMIUM
      Beige + Verde Aguacate
========================================== */


/* VARIABLES DE COLOR */

:root{

    --beige:#E8D8B5;
    --crema:#F8F4EA;
    --verde:#7AA33D;
    --verde-oscuro:#245329;
    --verde-profundo:#163A20;
    --tierra:#A67C3D;
    --blanco:#ffffff;

}



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


*{

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

}


html{

    scroll-behavior:smooth;

}


body{

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

    background:var(--crema);

    color:#444;

    overflow-x:hidden;

}


img{

    max-width:100%;

}



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


.navbar{

    background:rgba(85,107,47,.95);

    backdrop-filter:blur(10px);

    padding-top:8px;

    padding-bottom:8px;

}



.navbar-nav{

    align-items:center;

}


.nav-link{

    padding-top:5px!important;

    padding-bottom:5px!important;

}



.nav-link:hover{

    color:var(--beige)!important;

}



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


.hero{

    height:100vh;

    background:

    linear-gradient(

        rgba(22,58,32,.55),

        rgba(0,0,0,.35)

    ),

    url('../img/hero.jpg');


    background-size:cover;

    background-position:center;

    position:relative;

}



.overlay{

    height:100%;

    display:flex;

    align-items:center;

}



.hero h1{

    color:white;

    font-size:4.5rem;

    font-weight:800;

    line-height:1.1;

    max-width:800px;

}



.hero p{

    color:white;

    font-size:1.3rem;

    max-width:650px;

}



.hero .badge{

    background:var(--beige)!important;

    color:var(--verde-oscuro)!important;

    padding:12px 20px;

}



/* BOTONES */


.btn-success{

    background:var(--verde);

    border:none;

    border-radius:50px;

    padding:13px 35px;

}



.btn-success:hover{

    background:var(--verde-oscuro);

}



.btn-warning{

    background:var(--tierra);

    border:none;

    color:white;

    border-radius:50px;

}



.btn-warning:hover{

    background:#805c27;

}



/* ==========================================
              TITULOS
========================================== */


h2{

    color:var(--verde-oscuro);

    font-weight:800;

}



.text-success{

    color:var(--verde)!important;

}



/* ==========================================
              NOSOTROS
========================================== */


#nosotros img{

    border-radius:25px;

    transition:.5s;

}



#nosotros img:hover{

    transform:scale(1.04);

}



/* ==========================================
              BENEFICIOS
========================================== */


#beneficios{

    background:var(--beige)!important;

}



.feature-card{

    background:white;

    padding:35px 25px;

    border-radius:25px;

    height:100%;

    text-align:center;

    box-shadow:

    0 15px 35px rgba(0,0,0,.10);

    border-bottom:5px solid var(--verde);

    transition:.4s;

}



.feature-card:hover{

    transform:translateY(-10px);

    box-shadow:

    0 20px 45px rgba(0,0,0,.15);

}



.feature-card i{

    color:var(--verde);

    font-size:45px;

    margin-bottom:20px;

}



.feature-card h4{

    color:var(--verde-oscuro);

    font-weight:700;

}



/* ==========================================
              BANNER
========================================== */


.banner{

    min-height:350px;

    display:flex;

    align-items:center;

    justify-content:center;


    background:

    linear-gradient(

        rgba(36,83,41,.75),

        rgba(122,163,61,.75)

    ),

    url('../img/banner.jpg');


    background-size:cover;

    background-position:center;

}



.banner h2{

    color:white;

    text-align:center;

    font-size:3rem;

}



/* ==========================================
              GALERIA
========================================== */


#galeria img{

    height:300px;

    width:100%;

    object-fit:cover;

    border-radius:20px;

    transition:.5s;

}



#galeria img:hover{

    transform:scale(1.05);

}



/* ==========================================
              TESTIMONIOS
========================================== */


.bg-success{

    background:

    linear-gradient(

        135deg,

        var(--verde),

        var(--verde-oscuro)

    )!important;

}



.testimonial{

    background:var(--crema);

    color:#444;

    padding:35px;

    border-radius:25px;

    text-align:center;

    height:100%;

    box-shadow:

    0 10px 30px rgba(0,0,0,.12);

    border-top:5px solid var(--beige);

}



.testimonial p{

    margin-top:20px;

    font-size:16px;

}



.testimonial h5{

    color:var(--verde-oscuro);

    font-weight:700;

}



/* ==========================================
              ESTADISTICAS
========================================== */


.container h2{

    font-weight:800;

}



.row h2{

    color:var(--verde);

    font-size:45px;

}



/* ==========================================
              FOOTER
========================================== */


footer{

    background:

    linear-gradient(

        135deg,

        var(--verde-profundo),

        var(--verde-oscuro)

    );

    color:white;

    padding:60px 0 30px;

}



footer h3,
footer h5{

    color:#E8D8B5;

    font-weight:700;

}



footer i{

    font-size:30px;

    margin-right:15px;

    cursor:pointer;

    transition:.3s;

    color:#F8F4EA;

}


footer i:hover{

    color:#E8D8B5;

    transform:translateY(-5px);

}



/* ==========================================
              ANIMACION
========================================== */


.hero .container{

    animation:

    aparecer 1.2s ease;

}



@keyframes aparecer{


from{

    opacity:0;

    transform:translateY(40px);

}


to{

    opacity:1;

    transform:translateY(0);

}


}



/* ==========================================
              TABLETS
========================================== */


@media(max-width:992px){


.hero h1{

    font-size:3.2rem;

}


.hero p{

    font-size:1.1rem;

}


.banner h2{

    font-size:2.2rem;

}


}



/* ==========================================
              CELULARES
========================================== */


@media(max-width:576px){


.navbar{

    background:rgba(85,107,47,.95);

}


.hero{

    height:90vh;

}


.hero h1{

    font-size:2.4rem;

}


.hero p{

    font-size:1rem;

}


.hero .btn{

    width:100%;

    margin-top:10px;

}


.banner{

    padding:40px 20px;

}


.banner h2{

    font-size:1.8rem;

}


#galeria img{

    height:220px;

}



footer{

    background:

    linear-gradient(

        135deg,

        #556B2F,

        #6B8E23

    );

    color:white;

    padding:60px 0 30px;

}

/* ==========================================
            AJUSTE LOGO GUAYAKATE
========================================== */


.navbar-brand{

    padding:0 !important;

    margin:0 !important;

    display:flex;

    align-items:center;

}


.navbar-brand img{

    width:90px !important;

    height:auto !important;

    max-height:50px !important;

    object-fit:contain;

    display:block;

}



/* Efecto al pasar mouse */

.navbar-brand img:hover{

    transform:scale(1.05);

    transition:.3s;

}



/* Ajuste celulares */

@media(max-width:576px){


    .navbar-brand img{

        width:70px !important;

        max-height:40px !important;

    }


}


.whatsapp{

    position:fixed;

    width:60px;

    height:60px;

    right:25px;

    bottom:25px;

    background:#25D366;

    color:white;

    border-radius:50%;

    display:flex;

    align-items:center;

    justify-content:center;

    font-size:35px;

    text-decoration:none;

    z-index:9999;

    box-shadow:

    0 5px 20px rgba(0,0,0,.3);

    transition:.3s;

}



.whatsapp:hover{

    background:#128C7E;

    color:white;

    transform:scale(1.1);

}



/* Animación */

.whatsapp{

    animation:

    pulsar 2s infinite;

}



@keyframes pulsar{


0%{

    box-shadow:

    0 0 0 0 rgba(37,211,102,.7);

}


70%{

    box-shadow:

    0 0 0 20px rgba(37,211,102,0);

}


100%{

    box-shadow:

    0 0 0 0 rgba(37,211,102,0);

}


}



/* CELULAR */

@media(max-width:576px){

.whatsapp{

    width:55px;

    height:55px;

    right:15px;

    bottom:15px;

    font-size:30px;

}

}