/*=====================================================
RESPONSIVE
BEAT AUTOMATIZACIÓN
PARTE 1
=====================================================*/


/*=====================================================
1400 PX
=====================================================*/

@media(max-width:1400px){

.container{

    width:min(94%,1200px);

}

.hero h1{

    font-size:3.5rem;

}

.hero-stats{

    gap:35px;

}

}


/*=====================================================
1200 PX
=====================================================*/

@media(max-width:1200px){

section{

    padding:90px 0;

}

.hero h1{

    font-size:3rem;

}

.section-title h2{

    font-size:2.4rem;

}

.services-grid,

.products-grid,

.projects-grid{

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

}

.why-grid{

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

}

.stats-grid{

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

}

.process-grid{

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

}

.footer-grid{

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

    gap:45px;

}

.contact-wrapper{

    grid-template-columns:1fr;

}

}


/*=====================================================
992 PX
=====================================================*/

@media(max-width:992px){

.header-container{

    height:85px;

}

#navbar{

    position:fixed;

    top:0;

    right:-100%;

    width:320px;

    height:100vh;

    background:#111;

    transition:.4s;

    padding-top:120px;

    z-index:1000;

}

#navbar.active{

    right:0;

}

#navbar ul{

    flex-direction:column;

    align-items:center;

    gap:35px;

}

#navbar a{

    color:#fff !important;

    font-size:1.1rem;

}

#menu-toggle{

    display:flex;

    flex-direction:column;

    justify-content:center;

    gap:6px;

    background:none;

}

#menu-toggle span{

    width:30px;

    height:3px;

    background:#fff;

    transition:.3s;

}

#header.active #menu-toggle span{

    background:#111;

}

.btn-phone{

    display:none;

}

.hero{

    min-height:850px;

}

.hero-content{

    text-align:center;

    max-width:100%;

}

.hero-buttons{

    justify-content:center;

}

.hero-stats{

    justify-content:center;

    flex-wrap:wrap;

}

.about-grid{

    grid-template-columns:1fr;

}

.about-image{

    order:2;

}

.about-content{

    order:1;

}

.experience-card{

    right:20px;

    bottom:-20px;

}

.brands-slider{

    justify-content:center;

}

}


/*=====================================================
768 PX
=====================================================*/

@media(max-width:768px){

.hero h1{

    font-size:2.4rem;

}

.hero p{

    font-size:1rem;

}

.section-title{

    margin-bottom:55px;

}

.section-title h2{

    font-size:2rem;

}

.clients .container{

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

}

.services-grid,

.products-grid,

.projects-grid,

.stats-grid,

.why-grid{

    grid-template-columns:1fr;

}

.process-grid{

    grid-template-columns:1fr;

}

.process-grid::before{

    display:none;

}

.footer-grid{

    grid-template-columns:1fr;

    text-align:center;

}

.footer-grid img{

    margin:auto auto 25px;

}

.social{

    justify-content:center;

}

.hero-buttons{

    flex-direction:column;

}

.hero-buttons .btn{

    width:100%;

}

.cta-buttons{

    flex-direction:column;

}

.cta-buttons .btn{

    width:100%;

}

.contact-form{

    padding:30px;

}

}
/*=====================================================
576 PX
=====================================================*/

@media (max-width:576px){

section{

    padding:70px 0;

}

.container{

    width:92%;

}

.header-container{

    height:75px;

}

.logo img{

    width:46px;

}

.logo-text h2{

    font-size:1.25rem;

}

.logo-text span{

    font-size:.72rem;

}

.btn-whatsapp{

    display:none;

}

#navbar{

    width:100%;

}

.hero{

    min-height:760px;

}

.hero-badge{

    font-size:.80rem;

    padding:10px 18px;

}

.hero h1{

    font-size:2rem;

    line-height:1.2;

}

.hero p{

    font-size:.95rem;

    line-height:1.8;

}

.hero-stats{

    display:grid;

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

    gap:20px;

    margin-top:20px;

}

.stat{

    text-align:center;

}

.stat h2{

    font-size:1.6rem;

}

.section-title h2{

    font-size:1.8rem;

}

.section-title p{

    font-size:.95rem;

}

.about-card{

    flex-direction:column;

    text-align:center;

}

.about-card .icon{

    margin:auto;

}

.experience-card{

    position:relative;

    right:auto;

    bottom:auto;

    margin:25px auto 0;

}

.service-image{

    height:220px;

}

.product-card img{

    height:220px;

}

.project-item{

    height:240px;

}

.cta h2{

    font-size:2rem;

}

.cta p{

    font-size:1rem;

}

.contact-card{

    flex-direction:column;

    text-align:center;

}

.contact-card i{

    margin:auto;

}

.whatsapp-float{

    width:58px;

    height:58px;

    font-size:1.8rem;

    right:18px;

    bottom:18px;

}

#scrollTop{

    width:48px;

    height:48px;

    right:20px;

    bottom:90px;

}

}

/*=====================================================
480 PX
=====================================================*/

@media (max-width:480px){

.hero{

    min-height:700px;

}

.hero h1{

    font-size:1.75rem;

}

.hero p{

    font-size:.90rem;

}

.hero-buttons{

    gap:15px;

}

.btn{

    padding:15px 22px;

    font-size:.95rem;

}

.section-title{

    margin-bottom:45px;

}

.section-title h2{

    font-size:1.6rem;

}

.process-card{

    padding:30px 20px;

}

.service-content{

    padding:28px;

}

.product-info{

    padding:28px;

}

.contact-form{

    padding:25px;

}

.footer-grid{

    gap:35px;

}

.footer-bottom{

    font-size:.85rem;

    line-height:1.6;

}

}

/*=====================================================
360 PX
=====================================================*/

@media (max-width:360px){

.hero h1{

    font-size:1.5rem;

}

.hero-badge{

    font-size:.72rem;

}

.hero p{

    font-size:.85rem;

}

.section-title span{

    font-size:.75rem;

}

.section-title h2{

    font-size:1.45rem;

}

.stat h2{

    font-size:1.35rem;

}

.btn{

    padding:14px 18px;

    font-size:.88rem;

}

.contact-form input,

.contact-form textarea{

    padding:15px;

}

.whatsapp-float{

    width:54px;

    height:54px;

}

}

/*=====================================================
LANDSCAPE
=====================================================*/

@media (max-height:600px){

.hero{

    min-height:700px;

}

.hero-content{

    padding-top:100px;

    padding-bottom:70px;

}

}

/*=====================================================
IMÁGENES
=====================================================*/

img{

    max-width:100%;

    height:auto;

}

/*=====================================================
IFRAMES
=====================================================*/

iframe{

    max-width:100%;

}

/*=====================================================
TABLAS
=====================================================*/

table{

    width:100%;

    display:block;

    overflow-x:auto;

}

/*=====================================================
FIN RESPONSIVE
=====================================================*/