/*=========================================================
  FOOTER
=========================================================*/

.site-footer{

    background:#181818;

    color:#f2f2f2;

    margin-top:70px;

}

.site-footer .container{

    max-width:1350px;

    margin:0 auto;

    padding:60px 25px 35px;

}


/*=========================================================
  GRID
=========================================================*/

.footer-grid{

    display:grid;

    grid-template-columns:2fr 1fr 1fr 1fr;

    gap:45px;

    align-items:flex-start;

}


/*=========================================================
  COLUMNAS
=========================================================*/

.footer-col h3{

    font-size:20px;

    font-weight:700;

    margin:0 0 20px;

    color:#fff;

    position:relative;

    padding-bottom:12px;

}

.footer-col h3::after{

    content:"";

    position:absolute;

    left:0;

    bottom:0;

    width:55px;

    height:3px;

    border-radius:10px;

    background:#b30000;

}

.footer-col ul{

    list-style:none;

    margin:0;

    padding:0;

}

.footer-col li{

    display:flex;

    align-items:flex-start;

    gap:10px;

    margin-bottom:14px;

    color:#d8d8d8;

    font-size:15px;

    line-height:1.6;

}

.footer-col a{

    color:#d8d8d8;

    text-decoration:none;

    transition:.25s;

}

.footer-col a:hover{

    color:#fff;

}

/*=========================================================
  LOGO Y DESCRIPCIÓN
=========================================================*/

.footer-logo{

    max-width:230px;

    width:100%;

    margin-bottom:20px;
    filter: brightness(0) invert(1);

}

.footer-text{

    color:#cfcfcf;

    font-size:15px;

    line-height:1.8;

    margin:0;

}


/*=========================================================
  ICONOS
=========================================================*/

.footer-col li i{

    width:18px;

    margin-top:3px;

    color:#b30000;

    text-align:center;

}


/*=========================================================
  REDES SOCIALES
=========================================================*/

.footer-social{

    display:flex;

    gap:12px;

    margin-top:8px;

}

.footer-social a{

    width:46px;

    height:46px;

    border-radius:50%;

    display:flex;

    align-items:center;

    justify-content:center;

    background:#2b2b2b;

    color:#fff;

    font-size:18px;

    transition:.30s;

}

.footer-social a:hover{

    background:#b30000;

    transform:translateY(-3px);

}


/*=========================================================
  COPYRIGHT
=========================================================*/

.footer-copy{

    border-top:1px solid rgba(255,255,255,.08);

    margin-top:45px;

    padding:22px 20px;

    text-align:center;

    color:#bfbfbf;

    font-size:14px;

    line-height:1.6;

}


/*=========================================================
  WHATSAPP
=========================================================*/

.whatsapp-float{

    position:fixed;

    right:25px;

    bottom:25px;

    width:62px;

    height:62px;

    border-radius:50%;

    background:#25d366;

    color:#fff;

    display:flex;

    align-items:center;

    justify-content:center;

    font-size:34px;

    text-decoration:none;

    box-shadow:0 10px 30px rgba(0,0,0,.25);

    z-index:9999;

    transition:.25s;

}

.whatsapp-float:hover{

    transform:scale(1.08);

    background:#20ba5a;

}

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

@media (max-width:1200px){

    .footer-grid{

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

        gap:35px;

    }

}


@media (max-width:768px){

    .site-footer .container{

        padding:45px 20px 30px;

    }

    .footer-grid{

        grid-template-columns:1fr;

        gap:35px;

        text-align:center;

    }

    .footer-col h3{

        padding-bottom:14px;

    }

    .footer-col h3::after{

        left:50%;

        transform:translateX(-50%);

    }

    .footer-col li{

        justify-content:center;

        text-align:center;

    }

    .footer-social{

        justify-content:center;

    }

    .footer-logo{

        margin:0 auto 20px;

    }

    .footer-text{

        max-width:500px;

        margin:auto;

    }

}


@media (max-width:480px){

    .footer-logo{

        max-width:180px;

    }

    .footer-col h3{

        font-size:18px;

    }

    .footer-col li{

        font-size:14px;

    }

    .footer-text{

        font-size:14px;

    }

    .footer-copy{

        font-size:13px;

        padding:18px 15px;

    }

    .footer-social a{

        width:42px;

        height:42px;

        font-size:17px;

    }

    .whatsapp-float{

        width:56px;

        height:56px;

        right:18px;

        bottom:18px;

        font-size:30px;

    }

}