/*==================================================
RESPONSIVE CSS
MÉTODO TELLO
==================================================*/


/*==================================================
TABLETS
até 1024px
==================================================*/

@media(max-width:1024px){


.container{

    width:90%;

}


/* HEADER */

#menu{

    gap:25px;

}


/* HERO */

.hero h1{

    font-size:3.2rem;

}


.hero-info{

    gap:35px;

}


/* GRID */

.grid-2{

    gap:40px;

}


/* EXPERIÊNCIAS */

.cards{

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

}


/* PRODUTOS */

.produtos-grid{

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

}


/* FOOTER */

.footer-grid{

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

}


}


/*==================================================
CELULARES
até 768px
==================================================*/

@media(max-width:768px){


section{

    padding:70px 0;

}


/* HEADER MOBILE */

header{

    padding:15px 0;

}


.logo{

    font-size:1.8rem;

}


.menu-mobile{

    display:block;

}


nav{

    position:absolute;

    top:75px;

    left:0;

    width:100%;

    background:#FFF;

    padding:30px;

    display:none;

}


nav.active{

    display:block;

}


#menu{

    flex-direction:column;

    gap:25px;

}


#menu a{

    color:#333;

}


/* HERO */

.hero{

    height:auto;

    min-height:100vh;

}


.hero h1{

    font-size:2.5rem;

}


.hero p{

    font-size:1rem;

}


.hero-buttons{

    flex-direction:column;

}


.hero-buttons .btn{

    width:100%;

}


.hero-info{

    margin-top:50px;

    flex-direction:column;

    gap:20px;

}


/* TITULOS */


h2{

    font-size:2.3rem;

}


h1{

    font-size:2.5rem;

}


/* GRID */

.grid-2{

    grid-template-columns:1fr;

    gap:40px;

}


.grid-2.reverse{

    display:flex;

    flex-direction:column-reverse;

}


/* IMAGENS */

.metodo .imagem,
.patricia .imagem{

    order:-1;

}



/* BENEFÍCIOS */

.beneficios li{

    font-size:.95rem;

}


/* EXPERIÊNCIAS */

.cards{

    grid-template-columns:1fr;

}


.card{

    padding:35px 25px;

}


/* PRODUTOS */

.produtos-grid{

    grid-template-columns:1fr;

}


.produto img{

    height:260px;

}


/* DEPOIMENTOS */


.slide{

    padding:35px 25px;

}


.slide p{

    font-size:1rem;

}


/* CTA */


.cta-final h2{

    font-size:2.4rem;

}


.cta-final .botoes{

    flex-direction:column;

}


.cta-final .btn{

    width:100%;

}



/* MAPA */

.mapa iframe{

    height:350px;

}


/* FOOTER */

.footer-grid{

    grid-template-columns:1fr;

    text-align:center;

}


.social{

    justify-content:center;

}


/* WHATSAPP */


.whatsapp-float{

    width:60px;

    height:60px;

    font-size:30px;

    right:20px;

    bottom:20px;

}

.logo img{

    height:60px;

}


}



/*==================================================
CELULARES PEQUENOS
até 420px
==================================================*/

@media(max-width:420px){


.hero h1{

    font-size:2.1rem;

}


.hero-info h2{

    font-size:1.8rem;

}


.subtitulo{

    font-size:.75rem;

}


h2{

    font-size:2rem;

}


.btn{

    padding:14px 25px;

}


.produto-info{

    padding:22px;

}


}