/*=========================================
        RESPONSIVE SERCOAS
==========================================*/

/* ------------------------------
   Pantallas menores a 1200px
--------------------------------*/
@media (max-width:1200px){

    .hero h2{
        font-size:38px;
    }

    .portal-card{
        padding:30px 25px;
    }

}

/* ------------------------------
   Tablets
--------------------------------*/
@media (max-width:992px){

    .header{
        text-align:center;
    }

    .empresa{
        margin-top:20px;
        text-align:center !important;
    }

    .empresa h1{
        font-size:30px;
    }

    .hero{

        padding:60px 0;

    }

    .hero h2{

        font-size:34px;

    }

    .hero p{

        font-size:17px;

    }

    .portal-card{

        margin-bottom:30px;

    }

    footer{

        text-align:center;

    }

    footer .col-lg-4{

        margin-bottom:35px;

    }

}

/* ------------------------------
   Celulares grandes
--------------------------------*/
@media (max-width:768px){

    .logo{

        max-width:230px;
        width:100%;
        height:auto;

    }

    .empresa h1{

        font-size:28px;

    }

    .empresa p{

        font-size:13px;

        letter-spacing:1px;

    }

    .hero{

        padding:50px 0;

    }

    .hero h2{

        font-size:28px;

    }

    .hero p{

        font-size:16px;

        padding:0 20px;

    }

    .portal-card{

        padding:28px 22px;

    }

    .portal-card h3{

        font-size:20px;

    }

    .portal-card p{

        font-size:14px;

        min-height:auto;

    }

    .icon-box{

        width:90px;
        height:90px;

    }

    .icon-box img{

        width:50px;

    }

    .btn-ingresar{

        width:100%;

        justify-content:center;

        padding:14px;

    }

}

/* ------------------------------
   Celulares pequeños
--------------------------------*/
@media (max-width:576px){

    .header{

        padding:15px 0;

    }

    .empresa h1{

        font-size:24px;

    }

    .empresa p{

        font-size:12px;

    }

    .hero{

        padding:40px 0;

    }

    .hero h2{

        font-size:24px;

        line-height:1.3;

    }

    .hero p{

        font-size:15px;

    }

    .portal-card{

        border-radius:18px;

        padding:25px 20px;

    }

    .icon-box{

        width:80px;
        height:80px;

    }

    .icon-box img{

        width:42px;

    }

    .portal-card h3{

        font-size:18px;

    }

    .portal-card p{

        font-size:13px;

    }

    footer{

        padding:40px 20px;

    }

    footer h5{

        font-size:18px;

    }

    footer p{

        font-size:14px;

    }

}

/* ------------------------------
   Animaciones móviles
--------------------------------*/

@media (hover:none){

    .portal-card:hover{

        transform:none;

    }

    .btn-ingresar:hover{

        transform:none;

    }

}