/* =========================
   TABLETS
   992px o menos
========================= */


@media(max-width:992px){


.container{

width:92%;

}



/* HEADER */


.navigation{

gap:20px;

}



.navigation a{

font-size:15px;

}



/* HERO */


.hero-grid{

grid-template-columns:1fr;

text-align:center;

}



.hero{

padding-top:140px;

}



.hero h1{

font-size:45px;

}



.hero-text{

max-width:650px;

margin:auto;

}



.hero-buttons{

justify-content:center;

}



.hero-image{

max-width:650px;

margin:40px auto 0;

}



.floating-card{

left:20px;

bottom:20px;

}




.trust-box{

justify-content:center;

}





/* SERVICIOS */


.services-grid{

grid-template-columns:

repeat(2,1fr);

}



/* BENEFICIOS */


.benefits-grid{

grid-template-columns:

repeat(2,1fr);

}



/* PROCESO */


.process-grid{

grid-template-columns:

repeat(2,1fr);

}



/* TESTIMONIOS */


.testimonial-grid{

grid-template-columns:

repeat(2,1fr);

}



/* CTA */


.cta-box{

flex-direction:column;

text-align:center;

}



/* CONTACTO */


.contact-grid{

grid-template-columns:1fr;

}



.footer-grid{

grid-template-columns:

repeat(2,1fr);

}



}









/* =========================
   CELULARES
   768px o menos
========================= */


@media(max-width:768px){



.section{

padding:70px 0;

}



/* HEADER */


.header{

padding:20px 0;

}



.header-container{

flex-direction:column;

gap:20px;

}



.logo{

font-size:26px;

}



.navigation{

flex-wrap:wrap;

justify-content:center;

}



.navigation a:not(.btn-whatsapp){

display:none;

}




/* HERO */


.hero{

min-height:auto;

padding:

150px 0 80px;

}



.hero h1{

font-size:36px;

}



.hero-text{

font-size:17px;

}



.hero-buttons{

flex-direction:column;

width:100%;

}



.hero-buttons a{

width:100%;

}





.trust-box{

display:grid;

grid-template-columns:

repeat(3,1fr);

gap:15px;

}



.trust-box strong{

font-size:25px;

}





.floating-card{

position:relative;

left:auto;

bottom:auto;

margin-top:20px;

text-align:center;

}





/* TITULOS */


.section-header h2{

font-size:32px;

}





/* SERVICIOS */


.services-grid{

grid-template-columns:1fr;

}





.service-card{

padding:30px;

}





/* BENEFICIOS */


.benefits-grid{

grid-template-columns:1fr;

}




/* PROCESO */


.process-grid{

grid-template-columns:1fr;

}





.process-step:not(:last-child)::after{

content:"↓";

display:block;

margin:

25px auto;

font-size:30px;

color:var(--secondary);

}





/* TESTIMONIOS */


.testimonial-grid{

grid-template-columns:1fr;

}





/* CTA */


.cta-box{

padding:40px 25px;

}



.cta h2{

font-size:32px;

}





.cta-buttons{

width:100%;

flex-direction:column;

}



.cta-buttons a{

width:100%;

}





/* CONTACTO */


.contact-form{

padding:30px 20px;

}





.contact-info h2{

font-size:32px;

}





/* FOOTER */


.footer{

padding:60px 0 25px;

}



.footer-grid{

grid-template-columns:1fr;

text-align:center;

}



}







/* =========================
   CELULARES PEQUEÑOS
   480px
========================= */


@media(max-width:480px){



.hero h1{

font-size:32px;

}



.trust-box{

grid-template-columns:

1fr;

}



.trust-box div{

text-align:center;

}



.btn-primary,
.btn-secondary,
.btn-outline{

padding:

14px 25px;

}



.section-header h2{

font-size:28px;

}



}