/* ==========================================================================
   7. PIE — #site_footer
   ========================================================================== */

#site_footer {
    width: 100%;
    background-color: var(--site-night-900);
    color: var(--site-ink-muted-dark);
}

/* 7.1 Contenedor y rejilla */

#site_footer .site-footer__shell {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--site-space-7);
    padding-block: clamp(56px, 7vw, 88px) var(--site-space-7);
}

/* 7.2 Columna de marca */

#site_footer .site-footer__brand {
    display: flex;
    flex-direction: column;
    gap: var(--site-space-4);
    max-width: 42ch;
}

#site_footer .site-footer__logo {
    display: flex;
    align-items: center;
    gap: var(--site-space-3);
    text-decoration: none;
}

#site_footer .site-footer__logo-mark {
    width: 40px;
    height: 40px;
    flex: 0 0 40px;
    color: var(--site-blue-500);
}

#site_footer .site-footer__logo-name {
    color: var(--site-ink-on-dark);
    font-family: var(--site-font-display);
    font-size: 1.5rem;
    font-weight: 900;
    line-height: 0.9;
    text-transform: uppercase;
}

#site_footer .site-footer__tagline {
    color: var(--site-ink-muted-dark);
    font-size: 0.9375rem;
}

/* 7.3 Columnas de enlaces y datos */

#site_footer .site-footer__column-title {
    margin-bottom: var(--site-space-4);
    color: var(--site-ink-on-dark);
    font-family: var(--site-font-mono);
    font-size: 0.6875rem;
    font-weight: 500;
    letter-spacing: 0.2em;
    text-transform: uppercase;
}

#site_footer .site-footer__list {
    display: flex;
    flex-direction: column;
    gap: var(--site-space-3);
}

#site_footer .site-footer__link {
    color: var(--site-ink-muted-dark);
    font-size: 0.9375rem;
    text-decoration: none;
    overflow-wrap: anywhere;
}

#site_footer .site-footer__link:hover {
    color: var(--site-ink-on-dark);
}

#site_footer .site-footer__contact-row {
    display: flex;
    align-items: flex-start;
    gap: var(--site-space-3);
}

#site_footer .site-footer__contact-icon {
    width: 17px;
    height: 17px;
    flex: 0 0 17px;
    margin-top: 5px;
    color: var(--site-blue-500);
}

#site_footer .site-footer__contact-term {
    color: var(--site-ink-on-dark);
    font-family: var(--site-font-mono);
    font-size: 0.625rem;
    letter-spacing: 0.16em;
    text-transform: uppercase;
}

/* 7.4 Barra inferior */

#site_footer .site-footer__bottom {
    border-top: 1px solid var(--site-night-700);
}

#site_footer .site-footer__bottom-shell {
    display: flex;
    flex-direction: column;
    gap: var(--site-space-4);
    padding-block: var(--site-space-5);
}

#site_footer .site-footer__copyright {
    color: var(--site-ink-muted-dark);
    font-family: var(--site-font-mono);
    font-size: 0.75rem;
}

#site_footer .site-footer__legal-list {
    display: flex;
    flex-wrap: wrap;
    gap: var(--site-space-2) var(--site-space-5);
}

#site_footer .site-footer__legal-link {
    color: var(--site-ink-muted-dark);
    font-family: var(--site-font-mono);
    font-size: 0.75rem;
    text-decoration: none;
}

#site_footer .site-footer__legal-link:hover {
    color: var(--site-ink-on-dark);
}

/* 7.5 Responsive del pie */

@media (min-width: 768px) {
    #site_footer .site-footer__shell {
        grid-template-columns: repeat(2, 1fr);
    }

    #site_footer .site-footer__bottom-shell {
        flex-direction: row;
        align-items: center;
        justify-content: space-between;
    }
}

@media (min-width: 1024px) {
    #site_footer .site-footer__shell {
        grid-template-columns: 1.6fr 1fr 1.2fr;
    }
}