@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700;800&display=swap');

/*==========================*
* VARIABLES CSS
*==========================*/

:root{

    --verdeOscuro:#1B5E20;
    --verdePrincipal:#2E7D32;
    --verdeClaro:#43A047;
    --verdeSuave:#66BB6A;
    --verdePastel:#A5D6A7;

    --blanco:#ffffff;
    --gris:#f5f5f5;
    --grisClaro:#eeeeee;
    --grisTexto:#555555;
    --negro:#222222;

    --rojo:#e53935;
    --amarillo:#FFC107;

    --sombra:0px 8px 30px rgba(0,0,0,.12);

    --transicion:.35s ease;

    --radio:15px;
}

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

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

html{
    scroll-behavior:smooth;
}

body{
    font-family:'Poppins',sans-serif;
    background:#fff;
    color:var(--negro);
    overflow-x:hidden;
}

/*==========================*
* SCROLL PERSONALIZADO
*==========================*/

::-webkit-scrollbar{
    width:10px;
}

::-webkit-scrollbar-track{
    background:#e8f5e9;
}

::-webkit-scrollbar-thumb{
    background:var(--verdePrincipal);
    border-radius:20px;
}

::-webkit-scrollbar-thumb:hover{
    background:var(--verdeOscuro);
}

/*==========================*
* LINKS
*==========================*/

a{
    text-decoration:none;
    color:inherit;
}

ul{
    list-style:none;
}

img{
    width:100%;
    display:block;
}

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

.contenedor{
    width:90%;
    max-width:1400px;
    margin:auto;
}

/*==========================*
* TOP BAR
*==========================*/

.top-bar{
    background:var(--verdeOscuro);
    color:white;
    font-size:14px;
    padding:10px 0;
}

.top-bar .contenedor{
    display:flex;
    justify-content:space-between;
    align-items:center;
}

.top-left{
    display:flex;
    gap:30px;
}

.top-left span{
    display:flex;
    align-items:center;
    gap:8px;
}

.top-right{
    display:flex;
    gap:15px;
}

.top-right a{
    width:35px;
    height:35px;
    border-radius:50%;
    background:rgba(255,255,255,.1);
    display:flex;
    justify-content:center;
    align-items:center;
    transition:var(--transicion);
}

.top-right a:hover{
    background:white;
    color:var(--verdeOscuro);
    transform:translateY(-4px);
}

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

header{
    width:100%;
    background:white;
    position:sticky;
    top:0;
    z-index:999;
    box-shadow:0 2px 15px rgba(0,0,0,.05);
}

.header{
    display:flex;
    justify-content:space-between;
    align-items:center;
    padding:20px 0;
}

/*==========================*
* LOGO
*==========================*/

.logo a{
    display:flex;
    align-items:center;
    gap:15px;
}

.logo i{
    font-size:45px;
    color:var(--verdePrincipal);
}

.logo h1{
    font-size:34px;
    color:var(--verdeOscuro);
}

.logo span{
    color:var(--verdeClaro);
}/*==========================*
* BUSCADOR
*==========================*/

.buscador{
    width:45%;
    display:flex;
    align-items:center;
    border-radius:50px;
    overflow:hidden;
    box-shadow:var(--sombra);
}

.buscador input{
    flex:1;
    border:none;
    padding:17px;
    outline:none;
    font-size:15px;
}

.buscador button{
    width:70px;
    border:none;
    background:var(--verdePrincipal);
    color:white;
    cursor:pointer;
    transition:var(--transicion);
    font-size:20px;
}

.buscador button:hover{
    background:var(--verdeOscuro);
}

/*==========================*
* ACCIONES
*==========================*/

.acciones{
    display:flex;
    align-items:center;
    gap:25px;
}

.acciones a{
    display:flex;
    align-items:center;
    gap:10px;
    font-weight:600;
    transition:var(--transicion);
}

.acciones a:hover{
    color:var(--verdePrincipal);
}

.acciones i{
    font-size:22px;
}

.carrito{
    position:relative;
}

#contador-carrito{
    position:absolute;
    top:-8px;
    right:-10px;
    width:22px;
    height:22px;
    background:red;
    color:white;
    border-radius:50%;
    display:flex;
    justify-content:center;
    align-items:center;
    font-size:12px;
    font-weight:bold;
}

/*==========================*
* NAV
*==========================*/

nav{
    background:var(--verdePrincipal);
}

.menu{
    display:flex;
    justify-content:center;
    align-items:center;
    height:70px;
}

.menu ul{
    display:flex;
    gap:40px;
}

.menu ul li a{
    color:white;
    font-weight:500;
    transition:.3s;
    position:relative;
}

.menu ul li a::after{
    content:"";
    position:absolute;
    left:0;
    bottom:-8px;
    width:0;
    height:3px;
    background:white;
    transition:.4s;
}

.menu ul li a:hover::after{
    width:100%;
}

.menu-movil{
    display:none;
}

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

.hero{
    position:relative;
    min-height:100vh;
    display:flex;
    align-items:center;
    overflow:hidden;
    background:linear-gradient(
        135deg,
        #e8f5e9,
        #ffffff,
        #f1f8e9
    );
}

.hero-overlay{
    position:absolute;
    width:100%;
    height:100%;
    background:
    radial-gradient(circle,
    rgba(76,175,80,.08),
    transparent 70%);
}

.hero-contenido{
    position:relative;
    z-index:5;
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:60px;
    align-items:center;
}

.etiqueta{
    display:inline-block;
    background:#dcedc8;
    color:var(--verdeOscuro);
    padding:10px 20px;
    border-radius:50px;
    font-weight:600;
    margin-bottom:25px;
}

.hero-texto h2{
    font-size:65px;
    line-height:1.2;
    margin-bottom:25px;
}

.hero-texto h2 span{
    color:var(--verdePrincipal);
}

.hero-texto p{
    font-size:18px;
    color:var(--grisTexto);
    line-height:1.9;
    margin-bottom:40px;
}

/*==========================*
* BOTONES DEL HERO
*==========================*/

.hero-botones{
    display:flex;
    gap:20px;
    margin-bottom:50px;
}

.btn-principal,
.btn-secundario{
    padding:16px 35px;
    border-radius:50px;
    font-weight:600;
    font-size:16px;
    transition:var(--transicion);
    display:inline-flex;
    align-items:center;
    justify-content:center;
}

.btn-principal{
    background:var(--verdePrincipal);
    color:white;
    box-shadow:0 10px 25px rgba(46,125,50,.3);
}

.btn-principal:hover{
    background:var(--verdeOscuro);
    transform:translateY(-5px);
}

.btn-secundario{
    border:2px solid var(--verdePrincipal);
    color:var(--verdePrincipal);
}

.btn-secundario:hover{
    background:var(--verdePrincipal);
    color:white;
    transform:translateY(-5px);
}

/*==========================*
* ESTADÍSTICAS HERO
*==========================*/

.estadisticas{
    display:grid;
    grid-template-columns:repeat(4,1fr);
    gap:20px;
}

.dato{
    background:white;
    padding:20px;
    border-radius:var(--radio);
    text-align:center;
    box-shadow:var(--sombra);
    transition:var(--transicion);
}

.dato:hover{
    transform:translateY(-10px);
}

.dato h3{
    color:var(--verdePrincipal);
    font-size:35px;
}

.dato p{
    font-size:14px;
    color:var(--grisTexto);
}/*==========================*
* IMAGEN DEL HERO
*==========================*/

.hero-imagen{
    position:relative;
}

.hero-imagen img{
    max-width:600px;
    animation:flotar 5s infinite ease-in-out;
}

@keyframes flotar{
    0%,100%{
        transform:translateY(0);
    }

    50%{
        transform:translateY(-20px);
    }
}

/*==========================*
* TARJETAS FLOTANTES
*==========================*/

.card{
    position:absolute;
    background:white;
    padding:20px;
    border-radius:20px;
    box-shadow:var(--sombra);
    width:220px;
    animation:aparecer 1s ease;
}

.card i{
    font-size:30px;
    color:var(--verdePrincipal);
    margin-bottom:10px;
}

.card h4{
    margin-bottom:5px;
}

.card p{
    font-size:13px;
    color:var(--grisTexto);
}

.card1{
    top:50px;
    left:-40px;
}

.card2{
    bottom:100px;
    right:-30px;
}

.card3{
    bottom:20px;
    left:50px;
}

@keyframes aparecer{
    from{
        opacity:0;
        transform:translateY(40px);
    }

    to{
        opacity:1;
        transform:translateY(0);
    }
}

/*==========================*
* WAVE
*==========================*/

.wave{
    position:absolute;
    bottom:-5px;
    left:0;
    width:100%;
}

.wave svg{
    display:block;
    width:100%;
}

/*==========================*
* SERVICIOS
*==========================*/

.servicios{
    padding:80px 0;
    background:white;
}

.servicios .contenedor{
    display:grid;
    grid-template-columns:repeat(4,1fr);
    gap:30px;
}

.servicio{
    padding:35px 25px;
    text-align:center;
    border-radius:20px;
    background:#f8fff8;
    transition:var(--transicion);
}

.servicio:hover{
    background:var(--verdePrincipal);
    color:white;
    transform:translateY(-10px);
}

.servicio i{
    font-size:45px;
    color:var(--verdePrincipal);
    margin-bottom:20px;
}

.servicio:hover i{
    color:white;
}

.servicio h3{
    margin-bottom:15px;
}

.servicio p{
    color:var(--grisTexto);
    line-height:1.7;
    font-size:14px;
}

.servicio:hover p{
    color:white;
}

/*==========================*
* TÍTULOS
*==========================*/

.titulo-seccion,
.titulo{
    text-align:center;
    margin-bottom:60px;
}

.titulo-seccion span,
.titulo span{
    color:var(--verdePrincipal);
    font-weight:700;
    text-transform:uppercase;
    letter-spacing:2px;
}

.titulo-seccion h2,
.titulo h2{
    font-size:45px;
    margin-top:10px;
    color:var(--verdeOscuro);
}

.titulo-seccion p{
    max-width:700px;
    margin:20px auto;
    color:var(--grisTexto);
}

/*==========================*
* CATEGORÍAS
*==========================*/

.categorias{
    padding:100px 0;
    background:#f5faf5;
}

.grid-categorias{
    display:grid;
    grid-template-columns:repeat(6,1fr);
    gap:25px;
}

.categoria{
    background:white;
    border-radius:20px;
    overflow:hidden;
    box-shadow:var(--sombra);
    cursor:pointer;
    transition:var(--transicion);
}

.categoria:hover{
    transform:translateY(-15px);
}

.categoria img{
    height:180px;
    object-fit:cover;
}

.categoria h3{
    text-align:center;
    padding:20px;
    color:var(--verdeOscuro);
}/*==========================*
* PRODUCTOS
*==========================*/

.productos{
    padding:100px 0;
}

.grid-productos{
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:35px;
}

.producto{
    background:white;
    border-radius:25px;
    overflow:hidden;
    box-shadow:var(--sombra);
    position:relative;
    transition:var(--transicion);
}

.producto:hover{
    transform:translateY(-15px);
}

.producto img{
    height:300px;
    object-fit:cover;
}

.contenido{
    padding:25px;
}

.contenido h3{
    color:var(--verdeOscuro);
    font-size:22px;
    margin-bottom:10px;
}

.contenido p{
    color:var(--grisTexto);
    font-size:14px;
    line-height:1.6;
}

.estrellas{
    margin:15px 0;
    color:#ffc107;
}

.precio h4{
    font-size:24px;
    color:var(--verdePrincipal);
}

.antes{
    text-decoration:line-through;
    color:#999;
    font-size:14px;
}

.etiqueta.oferta,
.etiqueta.nuevo{
    position:absolute;
    top:20px;
    left:20px;
    color:white;
    padding:8px 15px;
    border-radius:20px;
    font-size:13px;
    z-index:2;
}

.oferta{
    background:#e53935;
}

.nuevo{
    background:var(--verdePrincipal);
}

.btn-carrito{
    width:100%;
    margin-top:20px;
    padding:15px;
    border:none;
    border-radius:50px;
    background:var(--verdePrincipal);
    color:white;
    font-size:15px;
    cursor:pointer;
    transition:var(--transicion);
}

.btn-carrito:hover{
    background:var(--verdeOscuro);
    transform:scale(1.05);
}

/*==========================*
* BOTÓN VOLVER ARRIBA
*==========================*/

.btn-arriba{
    position:fixed;
    right:30px;
    bottom:30px;
    width:50px;
    height:50px;
    border:none;
    border-radius:50%;
    background:var(--verdePrincipal);
    color:white;
    font-size:20px;
    cursor:pointer;
    opacity:0;
    visibility:hidden;
    transition:.4s;
    z-index:999;
}

.btn-arriba.mostrar{
    opacity:1;
    visibility:visible;
}

.btn-arriba:hover{
    background:var(--verdeOscuro);
    transform:translateY(-5px);
}

/*==========================*
* MENSAJE DEL CARRITO
*==========================*/

.mensaje-carrito{
    position:fixed;
    bottom:30px;
    left:50%;
    transform:translateX(-50%);
    background:var(--verdeOscuro);
    color:white;
    padding:15px 30px;
    border-radius:50px;
    z-index:9999;
    animation:subirMensaje .4s;
}

@keyframes subirMensaje{
    from{
        opacity:0;
        transform:translate(-50%,30px);
    }

    to{
        opacity:1;
        transform:translate(-50%,0);
    }
}

/*==========================*
* CANTIDAD
*==========================*/

.cantidad{
    display:flex;
    align-items:center;
    gap:15px;
    margin:15px 0;
}

.cantidad button{
    width:35px;
    height:35px;
    border:none;
    border-radius:50%;
    background:var(--verdePrincipal);
    color:white;
    cursor:pointer;
    font-size:20px;
}

/*==========================*
* CUPÓN
*==========================*/

.cupon{
    display:flex;
    gap:10px;
    margin-bottom:25px;
}

.cupon input{
    flex:1;
    padding:12px;
    border-radius:20px;
    border:1px solid #ddd;
}

.cupon button{
    background:var(--verdePrincipal);
    color:white;
    border:none;
    padding:12px 20px;
    border-radius:20px;
    cursor:pointer;
}

/*==========================*
* ITEM DEL CARRITO
*==========================*/

.item-carrito{
    display:flex;
    gap:20px;
    padding:20px;
    background:white;
    border-radius:20px;
    box-shadow:var(--sombra);
    margin-bottom:20px;
}

.item-carrito img{
    width:100px;
    height:100px;
    object-fit:cover;
    border-radius:15px;
}

.eliminar{
    border:none;
    background:#e53935;
    color:white;
    padding:8px 15px;
    border-radius:20px;
    cursor:pointer;
}/*==========================*
* FAQ
*==========================*/

.faq{
    padding:80px 0;
    background:#f7fff7;
}

.faq-list{
    max-width:900px;
    margin:auto;
}

.pregunta{
    background:white;
    margin-bottom:20px;
    border-radius:15px;
    overflow:hidden;
    box-shadow:var(--sombra);
}

.pregunta button{
    width:100%;
    padding:25px;
    border:none;
    background:white;
    display:flex;
    justify-content:space-between;
    align-items:center;
    font-size:17px;
    font-weight:600;
    cursor:pointer;
    color:var(--verdeOscuro);
}

.pregunta button i{
    transition:.3s;
}

.respuesta{
    max-height:0;
    overflow:hidden;
    transition:.4s ease;
}

.respuesta p{
    padding:0 25px 25px;
    color:var(--grisTexto);
    line-height:1.8;
}

.pregunta.activo .respuesta{
    max-height:200px;
}

.pregunta.activo button i{
    transform:rotate(180deg);
}

/*==========================*
* AYUDA
*==========================*/

.faq-ayuda{
    padding:80px 0;
}

.ayuda-box{
    text-align:center;
    background:var(--verdePrincipal);
    color:white;
    padding:50px;
    border-radius:30px;
}

.ayuda-box i{
    font-size:50px;
    margin-bottom:20px;
}

/*==========================*
* OFERTAS
*==========================*/

.oferta-titulo{
    background:linear-gradient(
        135deg,
        #1b5e20,
        #4caf50
    );
    color:white;
}

.contador-oferta{
    padding:50px 0;
    text-align:center;
}

#contador-tiempo{
    display:flex;
    justify-content:center;
    gap:20px;
    margin-top:30px;
}

#contador-tiempo div{
    background:var(--verdeOscuro);
    color:white;
    padding:20px;
    border-radius:20px;
    min-width:100px;
}

#contador-tiempo span{
    font-size:35px;
    font-weight:bold;
}

.precio-oferta span{
    text-decoration:line-through;
    color:#999;
}

.etiqueta.oferta{
    position:absolute;
    top:15px;
    left:15px;
    background:#e53935;
    color:white;
    padding:8px 15px;
    border-radius:20px;
    font-weight:bold;
}

/*==========================*
* OPINIONES
*==========================*/

.opiniones{
    padding:80px 0;
    background:#f7fff7;
}

.grid-opiniones{
    display:grid;
    grid-template-columns:repeat(auto-fit,minmax(280px,1fr));
    gap:30px;
}

.opinion-card{
    background:white;
    padding:35px;
    border-radius:25px;
    text-align:center;
    box-shadow:var(--sombra);
}

.avatar{
    width:70px;
    height:70px;
    margin:auto;
    border-radius:50%;
    background:var(--verdePrincipal);
    color:white;
    display:flex;
    justify-content:center;
    align-items:center;
    font-size:30px;
}

.opinion-card h3{
    margin:20px 0 10px;
    color:var(--verdeOscuro);
}

.estrellas{
    font-size:22px;
}

/*==========================*
* FORMULARIO OPINIÓN
*==========================*/

.crear-opinion{
    padding:80px 0;
}

.form-opinion{
    max-width:600px;
    margin:auto;
    background:white;
    padding:40px;
    border-radius:25px;
    box-shadow:var(--sombra);
}

.form-opinion input,
.form-opinion textarea,
.form-opinion select{
    width:100%;
    padding:15px;
    margin-bottom:20px;
    border-radius:15px;
    border:1px solid #ddd;
    font-size:16px;
}

.form-opinion textarea{
    resize:none;
}/*==========================*
* LOGIN
*==========================*/

.login{
    min-height:100vh;
    display:flex;
    justify-content:center;
    align-items:center;
    background:linear-gradient(135deg,#e8f5e9,#ffffff,#f1f8e9);
    padding:80px 20px;
}

.login-box{
    width:100%;
    max-width:450px;
    background:var(--blanco);
    padding:45px;
    border-radius:25px;
    box-shadow:var(--sombra);
    text-align:center;
}

.login-box .logo-login{
    font-size:55px;
    color:var(--verdePrincipal);
    margin-bottom:15px;
}

.login-box h2{
    font-size:32px;
    color:var(--verdeOscuro);
    margin-bottom:10px;
}

.login-box p{
    color:var(--grisTexto);
    margin-bottom:30px;
}

.login-box form{
    display:flex;
    flex-direction:column;
    gap:20px;
}

.campo{
    position:relative;
}

.campo i{
    position:absolute;
    left:18px;
    top:50%;
    transform:translateY(-50%);
    color:var(--verdePrincipal);
    font-size:18px;
}

.campo input{
    width:100%;
    padding:15px 20px 15px 50px;
    border:2px solid var(--verdePastel);
    border-radius:50px;
    outline:none;
    font-size:15px;
    transition:var(--transicion);
}

.campo input:focus{
    border-color:var(--verdePrincipal);
    box-shadow:0 0 12px rgba(46,125,50,.2);
}

.login-opciones{
    display:flex;
    justify-content:space-between;
    align-items:center;
    font-size:14px;
    color:var(--grisTexto);
}

.login-opciones label{
    display:flex;
    align-items:center;
    gap:8px;
    cursor:pointer;
}

.login-opciones a{
    color:var(--verdePrincipal);
    font-weight:600;
}

.login-opciones a:hover{
    color:var(--verdeOscuro);
}

.btn-login{
    width:100%;
    padding:16px;
    border:none;
    border-radius:50px;
    background:var(--verdePrincipal);
    color:white;
    font-size:16px;
    font-weight:600;
    cursor:pointer;
    transition:var(--transicion);
}

.btn-login:hover{
    background:var(--verdeOscuro);
    transform:translateY(-3px);
}

.login-registro{
    margin-top:30px;
    font-size:15px;
    color:var(--grisTexto);
}

.login-registro a{
    color:var(--verdePrincipal);
    font-weight:700;
}

.login-registro a:hover{
    color:var(--verdeOscuro);
}

.login-redes{
    display:flex;
    justify-content:center;
    gap:15px;
    margin-top:30px;
}

.login-redes a{
    width:45px;
    height:45px;
    border-radius:50%;
    background:var(--verdePrincipal);
    color:white;
    display:flex;
    justify-content:center;
    align-items:center;
    font-size:18px;
    transition:var(--transicion);
}

.login-redes a:hover{
    background:var(--verdeOscuro);
    transform:translateY(-5px);
}

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

@media(max-width:768px){

    .login-box{
        padding:35px 25px;
    }

    .login-box h2{
        font-size:28px;
    }

    .login-opciones{
        flex-direction:column;
        gap:15px;
        align-items:flex-start;
    }

}