/*
|--------------------------------------------------------------------------
| Footer
|--------------------------------------------------------------------------
*/

.mf-footer{
    margin-top:auto;

    background:var(--mf-dark);
    color:var(--mf-light);

    padding:5rem 0 0;
}

/*
|--------------------------------------------------------------------------
| Main layout
|--------------------------------------------------------------------------
*/

.mf-footer__main{
    display:grid;

    grid-template-columns:
        minmax(0, 1.4fr)
        minmax(180px, 1fr)
        minmax(180px, .8fr);

    gap:4rem;

    padding-bottom:4rem;
}

/*
|--------------------------------------------------------------------------
| Brand
|--------------------------------------------------------------------------
*/

.mf-footer__brand{
    max-width:420px;
}

.mf-footer__logo{
    margin-bottom:1.5rem;
}

/* Corregimos el tamaño del logo SOLO en el Footer */

.mf-footer__logo .custom-logo{
    display:block;

    width:auto;
    height:48px;

    max-width:100%;
}

.mf-footer__description{
    margin:0;

    color:rgba(255,255,255,.7);

    font-size:.95rem;
    line-height:1.7;
}

/*
|--------------------------------------------------------------------------
| Navigation
|--------------------------------------------------------------------------
*/

.mf-footer__navigation{
    display:flex;
    flex-direction:column;
}

.mf-footer__menu{
    display:flex;
    flex-direction:column;

    gap:.75rem;

    margin:0;
    padding:0;

    list-style:none;
}

.mf-footer__menu a{
    color:rgba(255,255,255,.75);

    text-decoration:none;

    transition:
        color .25s ease,
        transform .25s ease;
}

.mf-footer__menu a:hover{
    color:var(--mf-light);

    transform:translateX(4px);
}

/*
|--------------------------------------------------------------------------
| Social
|--------------------------------------------------------------------------
*/

.mf-footer__social{
    display:flex;
    flex-direction:column;
}

.mf-footer__social-title{
    margin:0 0 1.25rem;

    font-size:1rem;
    font-weight:600;

    letter-spacing:.04em;
    text-transform:uppercase;
}

.mf-footer__social-link{
    display:inline-flex;
    align-items:center;
    justify-content:center;

    width:44px;
    height:44px;

    border:1px solid rgba(255,255,255,.2);
    border-radius:50%;

    color:rgba(255,255,255,.85);

    transition:
        background-color .25s ease,
        border-color .25s ease,
        color .25s ease,
        transform .25s ease;
}

.mf-footer__social-link:hover{
    background:var(--mf-light);
    border-color:var(--mf-light);

    color:var(--mf-dark);

    transform:translateY(-3px);
}

.mf-footer__social-link:focus-visible{
    outline:2px solid var(--mf-light);
    outline-offset:3px;
}

.mf-footer__social-link svg{
    display:block;

    width:20px;
    height:20px;

    fill:currentColor;
}
/*
|--------------------------------------------------------------------------
| Bottom
|--------------------------------------------------------------------------
*/

.mf-footer__bottom{
    padding:1.5rem 0;

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

.mf-footer__copyright p{
    margin:0;

    color:rgba(255,255,255,.55);

    font-size:.875rem;
}

/*
|--------------------------------------------------------------------------
| Responsive
|--------------------------------------------------------------------------
*/

@media (max-width:767px){

    .mf-footer{
        padding-top:3.5rem;
    }

    .mf-footer__main{
        grid-template-columns:1fr;

        gap:3rem;

        padding-bottom:3rem;
    }

    .mf-footer__brand{
        max-width:none;
    }

    .mf-footer__logo .custom-logo{
        height:42px;
    }

    .mf-footer__bottom{
        padding:1.25rem 0;
    }

}