/*==================================================

            RAICES VERDES
        DISEÑO RESPONSIVE
              PARTE 1

====================================================*/


/*==================================================
            TABLETS
        Hasta 1100px
==================================================*/


@media(max-width:1100px){


    /* HEADER */


    .header{

        flex-wrap:wrap;

        gap:25px;

    }


    .logo h1{

        font-size:28px;

    }


    .logo i{

        font-size:38px;

    }


    .buscador{

        order:3;

        width:100%;

    }



    .acciones span{

        display:none;

    }



    /* MENU */


    .menu ul{

        gap:25px;

    }



    /* HERO */


    .hero-contenido{

        grid-template-columns:1fr;

        text-align:center;

        padding:80px 0;

    }


    .hero-texto p{

        max-width:700px;

        margin:0 auto 40px;

    }



    .hero-botones{

        justify-content:center;

    }



    .hero-imagen{

        margin-top:50px;

    }


    .hero-imagen img{

        margin:auto;

    }



    .card1{

        left:0;

    }


    .card2{

        right:0;

    }


    .estadisticas{

        grid-template-columns:repeat(2,1fr);

    }




    /* SERVICIOS */


    .servicios .contenedor{

        grid-template-columns:repeat(2,1fr);

    }




    /* CATEGORIAS */


    .grid-categorias{

        grid-template-columns:repeat(3,1fr);

    }




    /* PRODUCTOS */


    .grid-productos{

        grid-template-columns:repeat(2,1fr);

    }



}






/*==================================================
            TABLETS PEQUEÑAS
             Hasta 768px
==================================================*/


@media(max-width:768px){



    /* TOP BAR */


    .top-bar .contenedor{

        flex-direction:column;

        gap:15px;

    }



    .top-left{

        flex-direction:column;

        gap:10px;

    }




    /* HEADER */


    .header{

        justify-content:center;

    }


    .logo{

        width:100%;

        display:flex;

        justify-content:center;

    }



    .acciones{

        justify-content:center;

    }



    /* MENU MOVIL */


    nav{

        position:relative;

    }



    .menu{

        justify-content:flex-start;

        height:60px;

    }



    .menu-movil{

        display:block;

        background:white;

        color:var(--verdePrincipal);

        border:none;

        width:45px;

        height:45px;

        border-radius:50%;

        font-size:22px;

        cursor:pointer;

    }



    .menu ul{


        position:absolute;


        top:60px;


        left:0;


        width:100%;


        background:var(--verdePrincipal);


        flex-direction:column;


        text-align:center;


        padding:30px 0;


        display:none;


    }



    .menu ul.active{


        display:flex;


    }





    /* HERO */


    .hero-texto h2{


        font-size:42px;


    }



    .hero-texto p{


        font-size:16px;


    }




    .hero-botones{


        flex-direction:column;


        align-items:center;


    }



    .btn-principal,

    .btn-secundario{


        width:90%;


    }





    .estadisticas{


        grid-template-columns:1fr;


    }



    .card{


        position:relative;


        width:100%;


        margin:20px auto;


    }



    .hero-imagen{


        display:flex;


        flex-direction:column;


    }



    .card1,

    .card2,

    .card3{


        top:auto;

        bottom:auto;

        left:auto;

        right:auto;


    }





    /* SERVICIOS */


    .servicios .contenedor{


        grid-template-columns:1fr;


    }






    /* CATEGORIAS */


    .grid-categorias{


        grid-template-columns:repeat(2,1fr);


    }




    /* PRODUCTOS */


    .grid-productos{


        grid-template-columns:1fr;


    }




    .titulo-seccion h2,

    .titulo h2{


        font-size:34px;


    }



}






/*==================================================
              CELULARES
             Hasta 480px
==================================================*/


@media(max-width:480px){



    .contenedor{


        width:94%;


    }



    .logo h1{


        font-size:23px;


    }



    .buscador input{


        padding:13px;


    }



    .hero{


        min-height:auto;


    }



    .hero-texto h2{


        font-size:34px;


    }




    .etiqueta{


        font-size:13px;


    }





    .dato h3{


        font-size:30px;


    }



    .categoria img{


        height:130px;


    }



    .producto img{


        height:240px;


    }



    .contenido{


        padding:20px;


    }



    .btn-carrito{


        padding:13px;


    }



}