@media screen and (max-width:1024px){

.header{
    padding:15px 30px;
}

.hero{
    height:80vh;
    padding:40px;
}

.hero h1{
    font-size:42px;
}

.hero h3{
    font-size:22px;
}

.titulo{
    font-size:34px;
}

.valores,
.marcas,
.produc,
.contac{
    padding:70px 30px;
}

.cards-marcas{
    flex-wrap:wrap;
}

.card-marca{
    width:180px;
}

}


/**********************
MÓVILES
***********************/
@media screen and (max-width:900px){

.header{

    display:flex;
    justify-content:space-between;
    align-items:center;

    padding:15px 20px;

    position:sticky;
    top:0;

}

.logo{

    width:120px;

}

.menu-toggle{

    display:block;

    font-size:32px;

    color:#007BFF;

    cursor:pointer;

    z-index:1001;

}

/* MENÚ */

.menu{

    position:fixed;

    top:0;

    right:-100%;

    width:290px;

    height:100vh;

    background:#fff;

    display:flex;

    flex-direction:column;

    justify-content:flex-start;

    align-items:stretch;   /* <-- CAMBIAR */

    padding:90px 25px;

    gap:15px;

    transition:.35s;

    box-shadow:-10px 0 25px rgba(0,0,0,.15);

    z-index:999;

}

.menu.active{

    right:0;

}


.menu > a,
.menu > .dropdown{

    width:100%;

}

.menu > a,
.menu > .dropdown > a{

    display:flex;

    justify-content:center;

    align-items:center;

    width:100%;

    padding:15px;

    box-sizing:border-box;

    text-align:center;

}

.dropdown{
    width:100%;
}

.dropdown > a{
    width:100%;
}

.dropdown-content{
    position:relative;
    display:none;
    width:100%;
    margin-top:10px;
    background:transparent;
    box-shadow:none;
    opacity:1;
    visibility:visible;
    transform:none;
}

.dropdown.open .dropdown-content{
    display:block;
}




/* HERO */

.hero{

    height:auto;

    min-height:70vh;

    padding:100px 20px 70px;

    justify-content:center;

    text-align:center;

}

.hero-content{

    width:100%;

}

.hero h1{

    font-size:34px;

    line-height:1.2;

}

.hero h3{

    font-size:18px;

    margin-top:20px;

}

.btn{

    margin-top:30px;

}

/* VALORES */

.valores{

    padding:60px 20px;

}

.cards-valores{

    flex-direction:column;

    align-items:center;

}

.card-valor{

    width:100%;

    max-width:400px;

}

/* MARCAS */

.marcas{

    padding:60px 20px;

}

.cards-marcas{

    display:grid;

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

    gap:15px;

}

.card-marca{

    width:100%;

    height:100px;

}

.card-marca img{

    width:90px;

}

/* PRODUCTOS */

.produc{

    padding:60px 20px;

}

.cards-destacados{

    flex-direction:column;

}

.card-destacados{

    width:100%;

    max-width:320px;

}

/* FORMULARIO */

.contac{

    padding:60px 20px;

}

.contac h2{

    font-size:36px;

}

#formWhatsapp{

    width:100%;

    padding:25px;

}

#formWhatsapp input,
#formWhatsapp select,
#formWhatsapp textarea{

    font-size:16px;

}

/* FOOTER */

footer{

    padding:25px;

    font-size:14px;

}

}


/************************
CELULARES PEQUEÑOS
*************************/

@media screen and (max-width:480px){

.header{

    padding:12px 15px;

}

.logo{

    width:100px;

}

.hero{

    padding:90px 15px 60px;

}

.hero h1{

    font-size:28px;

}

.hero h3{

    font-size:16px;

}

.btn{

    width:100%;

    text-align:center;

}

.titulo{

    font-size:28px;

}

.contac h2{

    font-size:30px;

}

.cards-marcas{

    grid-template-columns:1fr;

}

.card-destacados{

    max-width:100%;

}

}


/************************
ESCRITORIO
*************************/

@media screen and (min-width:901px){

.menu-toggle{

    display:none;

}

.menu{

    position:static;

    width:auto;

    height:auto;

    display:flex;

    flex-direction:row;

    background:transparent;

    padding:0;

    box-shadow:none;

}

}