/*==================================================
RESPONSIVE.CSS
FILTROSPURIFICADORESDEAGUA.COM
==================================================*/


/**************************************************
1400px
**************************************************/

@media (max-width:1400px){

    .container{

        max-width:1200px;

    }

}



/**************************************************
1200px
**************************************************/

@media (max-width:1200px){

    .grid-4{

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

    }

    .footer-grid{

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

    }

    .hero .container{

        gap:50px;

    }

}



/**************************************************
992px
TABLETS
**************************************************/

@media (max-width:992px){

    section{

        padding:70px 0;

    }

    .hero{

        padding:80px 0;

    }

    .hero .container{

        grid-template-columns:1fr;

        text-align:center;

    }

    .hero h1{

        margin:auto;

    }

    .hero p{

        margin-left:auto;

        margin-right:auto;

    }

    .hero-buttons{

        justify-content:center;

    }

    .hero-features{

        justify-content:center;

    }

    .hero-image{

        order:-1;

    }

    .hero-card{

        position:relative;

        left:auto;

        bottom:auto;

        margin:25px auto 0;

    }

    .grid-3{

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

    }

}



/**************************************************
900px
**************************************************/

@media (max-width:900px){

    .main-nav{

        display:none;

    }

    .header-actions{

        display:none;

    }

    .mobile-menu{

        display:flex;

    }

}



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

@media (max-width:768px){

    h1{

        font-size:2.4rem;

    }

    h2{

        font-size:2rem;

    }

    .grid-2{

        grid-template-columns:1fr;

    }

    .grid-3{

        grid-template-columns:1fr;

    }

    .grid-4{

        grid-template-columns:1fr;

    }

    .footer-grid{

        grid-template-columns:1fr;

        text-align:center;

    }

    .footer-links{

        justify-content:center;

    }

    .footer-bottom{

        flex-direction:column;

        text-align:center;

    }

    .hero-feature{

        width:100%;

        justify-content:center;

    }

    .section-title{

        margin-bottom:40px;

    }

}



/**************************************************
600px
**************************************************/

@media (max-width:600px){

    body{

        font-size:15px;

    }

    .container{

        padding-left:18px;

        padding-right:18px;

    }

    .btn{

        width:100%;

    }

    .hero-buttons{

        flex-direction:column;

    }

    .hero-card{

        max-width:100%;

    }

    .card-body{

        padding:22px;

    }

    .section{

        padding:55px 0;

    }

}



/**************************************************
480px
CELULARES
**************************************************/

@media (max-width:480px){

    .logo span{

        display:none;

    }

    .logo img{

        height:40px;

    }

    h1{

        font-size:2rem;

    }

    h2{

        font-size:1.7rem;

    }

    h3{

        font-size:1.25rem;

    }

    .hero{

        padding:55px 0;

    }

    .hero-feature{

        flex-direction:column;

        text-align:center;

    }

    .hero-feature-icon{

        margin-bottom:10px;

    }

    .faq-item summary{

        padding:18px;

        padding-right:50px;

    }

    .faq-item p{

        padding:0 18px 18px;

    }

    .footer-column{

        text-align:center;

    }

}



/**************************************************
375px
IPHONE SE
**************************************************/

@media (max-width:375px){

    .container{

        padding-left:14px;

        padding-right:14px;

    }

    h1{

        font-size:1.8rem;

    }

    .btn{

        min-height:48px;

        padding:0 18px;

    }

    .hero-badge{

        font-size:.80rem;

    }

}



/**************************************************
320px
CELULARES MUY PEQUEÑOS
**************************************************/

@media (max-width:320px){

    body{

        font-size:14px;

    }

    h1{

        font-size:1.6rem;

    }

    h2{

        font-size:1.45rem;

    }

    .hero-feature-icon{

        width:46px;

        height:46px;

    }

    .card-body{

        padding:18px;

    }

}



/**************************************************
PANTALLAS MUY GRANDES
**************************************************/

@media (min-width:1600px){

    .container{

        max-width:1450px;

    }

    h1{

        font-size:5rem;

    }

    .hero{

        padding:150px 0;

    }

}



/**************************************************
IMPRESIÓN
**************************************************/

@media print{

    header,

    footer,

    .btn,

    .mobile-menu{

        display:none!important;

    }

    body{

        background:#fff;

        color:#000;

    }

}