/*==========================================================*
*FOOTER*
*==========================================================*/
.footer{
    padding:80px 40px 40px;
    background:#111111;
    color:#ffffff;
    position:relative;
    overflow:hidden;
}
.footer .container{
    position:relative;
    z-index:2;
}
.footer::before{
    content:"";
    position:absolute;
    top:-220px;
    right:-220px;
    width:520px;
    height:520px;
    border-radius:50%;
    background:radial-gradient(circle,rgba(255,145,77,.10) 0%,rgba(255,222,89,.05) 45%,transparent 75%);
    filter:blur(90px);
    pointer-events:none;
}
.footer::after{
    content:"";
    position:absolute;
    bottom:-240px;
    left:-240px;
    width:520px;
    height:520px;
    border-radius:50%;
    background:radial-gradient(circle,rgba(255,222,89,.08) 0%,rgba(255,145,77,.04) 45%,transparent 75%);
    filter:blur(100px);
    pointer-events:none;
}
/*==========================================================*
*WRAPPER*
*==========================================================*/
.footer__wrapper{
    display:grid;
    grid-template-columns:1.3fr 1fr 1fr 1.2fr;
    gap:70px;
    padding-bottom:50px;
}
/*==========================================================*
*BRAND*
*==========================================================*/
.footer__brand{
    display:flex;
    flex-direction:column;
    align-items:flex-start;
}
.footer__logo{
    display:flex;
    flex-direction:column;
    align-items:flex-start;
    margin-bottom:20px;
    text-decoration:none;
}
.footer__logo img{
    width:72px;
    height:auto;
    display:block;
    margin-bottom:8px;
}
.footer__logo::after{
    content:"VM AGENCY";
    font-family:"Manrope",sans-serif;
    font-size:11px;
    font-weight:700;
    letter-spacing:4px;
    color:#fff;
    white-space:nowrap;
}
.footer__description{
    max-width:220px;
    margin-bottom:24px;
    font-size:13px;
    color:rgba(255,255,255,.60);
    line-height:1.7;
}
/*==========================================================*
*SOCIAL ICONS*
*==========================================================*/
.footer__social{
    display:flex;
    align-items:center;
    gap:16px;
    margin-top:4px;
}
.footer__social a{
    width:42px;
    height:42px;
    display:flex;
    align-items:center;
    justify-content:center;
    border:1px solid rgba(255,255,255,.16);
    border-radius:50%;
    background:transparent;
    color:rgba(255,255,255,.80);
    font-size:18px;
    text-decoration:none;
    transition:
            background .3s ease,
            border-color .3s ease,
            color .3s ease,
            transform .3s ease;
}
.footer__social a:hover{
    background:var(--color-primary);
    border-color:var(--color-primary);
    color:#fff;
    transform:translateY(-3px);
}
.footer__social i{
    display:block;
    font-size:18px;
    line-height:1;
}
/*==========================================================*
*SOCIAL SVG ICONS*
*==========================================================*/

.footer__social svg{
    width:20px;
    height:20px;
    display:block;
    fill:currentColor;
}

.footer__social a:first-child svg{
    fill:none;
    stroke:currentColor;
    stroke-width:1.8;
    stroke-linecap:round;
    stroke-linejoin:round;
}

.footer__social a:nth-child(2) svg{
    fill:currentColor;
}
/*==========================================================*
*COLUMNS*
*==========================================================*/
.footer__column{
    display:flex;
    flex-direction:column;
}
.footer__column .footer__title{
    font-size:16px;
    font-weight:700;
    margin-bottom:26px;
    padding-bottom:10px;
    position:relative;
    color:#fff;
}
.footer__column .footer__title::after{
    content:"";
    position:absolute;
    left:0;
    bottom:0;
    width:30px;
    height:2px;
    background:var(--color-secondary);
    border-radius:2px;
}
.footer__column ul{
    display:flex;
    flex-direction:column;
    gap:16px;
}
.footer__column ul li{
    line-height:1.4;
}
.footer__column ul li a{
    font-size:13px;
    color:rgba(255,255,255,.68);
    text-decoration:none;
    transition:color .3s ease,padding-left .3s ease;
}
.footer__column ul li a:hover{
    color:#fff;
    padding-left:4px;
}
/*==========================================================*
*CONTACT*
*==========================================================*/
.footer__contact-text{
    max-width:230px;
    margin-bottom:22px;
    font-size:13px;
    font-weight:400;
    line-height:1.7;
    color:rgba(255,255,255,.52);
}
.footer__contact{
    display:flex;
    flex-direction:column;
    gap:13px;
}
.footer__contact li{
    display:flex;
    align-items:flex-start;
    gap:10px;
    font-size:13px;
    color:rgba(255,255,255,.68);
    line-height:1.5;
}
.footer__contact i{
    width:18px;
    font-size:17px;
    margin-top:2px;
    color:var(--color-primary);
    flex-shrink:0;
}

/*==========================================================*
*BOTTOM*
*==========================================================*/
.footer__bottom{
    padding-top:26px;
    border-top:1px solid rgba(255,255,255,.08);
    text-align:center;
}
.footer__copyright{
    color:rgba(255,255,255,.55);
}

/*==========================================================*
*TABLET GRANDE*
*==========================================================*/
@media (max-width:1200px){
    .footer{
        padding:70px 30px 30px;
    }
    .footer__wrapper{
        grid-template-columns:1.4fr 1fr 1fr;
        gap:50px 40px;
        padding-bottom:40px;
    }
    .footer__brand{
        grid-column:span 1;
    }
    .footer__column .footer__title{
        font-size:16px;
        margin-bottom:22px;
    }
    .footer__column ul{
        gap:14px;
    }
    .footer__column ul li a{
        font-size:13px;
    }
    .footer__contact-text{
        max-width:220px;
    }
}
/*==========================================================*
*TABLET MEDIO*
*==========================================================*/
@media (max-width:992px){
    .footer{
        padding:60px 25px 25px;
    }
    .footer__wrapper{
        grid-template-columns:1.2fr 1fr 1fr;
        gap:45px 30px;
        padding-bottom:35px;
    }
    .footer__logo img{
        width:65px;
    }
    .footer__logo::after{
        font-size:10px;
        letter-spacing:3px;
    }
    .footer__description{
        max-width:210px;
        font-size:12px;
        margin-bottom:20px;
    }
    .footer__social{
        gap:12px;
    }
    .footer__social a{
        width:40px;
        height:40px;
        font-size:17px;
    }
    .footer__social i{
        font-size:17px;
    }
    .footer__column .footer__title{
        font-size:15px;
        margin-bottom:20px;
        padding-bottom:8px;
    }
    .footer__column .footer__title::after{
        width:28px;
    }
    .footer__column ul{
        gap:12px;
    }
    .footer__column ul li a{
        font-size:12px;
    }
    .footer__contact-text{
        max-width:210px;
        font-size:12px;
        margin-bottom:18px;
    }
    .footer__contact{
        gap:11px;
    }
    .footer__contact li{
        font-size:12px;
    }
    .footer__bottom{
        padding-top:22px;
    }
    .footer__copyright{
        font-size:12px;
    }
}
/*==========================================================*
*MOBILE*
*==========================================================*/
/*==========================================================*
*MOBILE*
*==========================================================*/
@media (max-width:650px){
    .footer{
        padding:50px 20px 20px;
    }
    .footer__wrapper{
        display:flex;
        flex-direction:column;
        align-items:stretch;
        gap:38px;
        padding-bottom:30px;
    }
    .footer__brand{
        width:100%;
        display:flex;
        flex-direction:column;
        align-items:center;
        text-align:center;
    }
    .footer__logo{
        align-items:center;
        margin-bottom:16px;
    }
    .footer__logo img{
        width:62px;
        margin-bottom:7px;
    }
    .footer__logo::after{
        font-size:11px;
        letter-spacing:4px;
    }
    .footer__description{
        max-width:280px;
        margin:0 auto 18px;
        font-size:12px;
        line-height:1.7;
        text-align:center;
    }
    .footer__social{
        justify-content:center;
        gap:14px;
    }
    .footer__social a{
        width:42px;
        height:42px;
        font-size:18px;
    }
    .footer__social i{
        font-size:18px;
    }
    .footer__column{
        width:100%;
        display:flex;
        flex-direction:column;
        align-items:flex-start;
        text-align:left;
    }
    .footer__column .footer__title{
        font-size:16px;
        margin-bottom:18px;
        padding-bottom:8px;
    }
    .footer__column .footer__title::after{
        left:0;
        transform:none;
        width:28px;
        height:2px;
    }
    .footer__column ul{
        align-items:flex-start;
        gap:14px;
    }
    .footer__column ul li{
        text-align:left;
    }
    .footer__column ul li a{
        font-size:13px;
    }
    .footer__contact-text{
        max-width:230px;
        margin:0 0 18px;
        font-size:12px;
        line-height:1.7;
        text-align:left;
    }
    .footer__contact{
        align-items:flex-start;
        gap:13px;
    }
    .footer__contact li{
        justify-content:flex-start;
        font-size:12px;
        gap:10px;
        text-align:left;
    }
    .footer__contact i{
        width:18px;
        font-size:17px;
    }
    .footer__bottom{
        padding-top:22px;
    }
    .footer__copyright{
        font-size:12px;
        line-height:1.5;
        text-align:center;
    }
}

/* ==========================================================
   FOOTER — LARGE DESKTOP
   Pantallas de 2000px en adelante
========================================================== */

@media (min-width: 2000px) {

    /* SECCIÓN */

    .footer {
        padding: clamp(90px, 5vw, 125px)
        clamp(50px, 3vw, 90px)
        clamp(35px, 2vw, 50px);
    }

    .footer .container {
        width: 100%;
        max-width: 2200px;
        margin-inline: auto;
    }

    /* CUATRO COLUMNAS */

    .footer__wrapper {
        grid-template-columns:
            1.3fr 1fr 1fr 1.2fr;
        gap: clamp(55px, 4vw, 100px);
        padding-bottom: clamp(55px, 3vw, 75px);
    }

    /* LOGOTIPO */

    .footer__logo {
        margin-bottom: 26px;
    }

    .footer__logo img {
        width: clamp(85px, 4.5vw, 110px);
        margin-bottom: 12px;
    }

    .footer__logo::after {
        font-size: clamp(12px, 0.65vw, 15px);
        letter-spacing: 5px;
    }

    /* DESCRIPCIÓN */

    .footer__description {
        max-width: 320px;
        margin-bottom: 30px;
        font-size: clamp(16px, 0.85vw, 20px);
        line-height: 1.8;
    }

    /* REDES SOCIALES */

    .footer__social {
        gap: 18px;
        margin-top: 8px;
    }

    .footer__social a {
        width: clamp(48px, 2.6vw, 60px);
        height: clamp(48px, 2.6vw, 60px);
        font-size: 22px;
    }

    .footer__social i {
        font-size: 21px;
    }

    .footer__social svg {
        width: 24px;
        height: 24px;
    }

    /* TÍTULOS DE COLUMNAS */

    .footer__column .footer__title {
        font-size: clamp(18px, 0.95vw, 22px);
        margin-bottom: 32px;
        padding-bottom: 14px;
    }

    .footer__column .footer__title::after {
        width: 38px;
        height: 3px;
    }

    /* ENLACES */

    .footer__column ul {
        gap: clamp(18px, 1.1vw, 26px);
    }

    .footer__column ul li {
        line-height: 1.6;
    }

    .footer__column ul li a {
        font-size: clamp(16px, 0.8vw, 19px);
    }

    /* CONTACTO */

    .footer__contact-text {
        max-width: 340px;
        margin-bottom: 28px;
        font-size: clamp(16px, 0.8vw, 19px);
        line-height: 1.8;
    }

    .footer__contact {
        gap: 20px;
    }

    .footer__contact li {
        gap: 14px;
        font-size: clamp(16px, 0.8vw, 19px);
        line-height: 1.6;
    }

    .footer__contact i {
        width: 22px;
        font-size: 21px;
        margin-top: 3px;
    }

    /* COPYRIGHT */

    .footer__bottom {
        padding-top: clamp(28px, 1.8vw, 42px);
    }

    .footer__copyright {
        font-size: clamp(15px, 0.75vw, 18px);
        line-height: 1.6;
    }
}