.site-footer {
    background: var(--chrome-bg);
    border-top: .08rem solid var(--chrome-border);
    color: var(--chrome-text);
    align-items: center;
    display: flex;
    flex-wrap: wrap;
    font-size: .8125rem;
    gap: .75rem 2rem;
    justify-content: space-between;
    padding: 1.5rem max(2rem, calc((100% - var(--content)) / 2 + 2rem)) 2rem;
}

.site-footer a {
    color: var(--chrome-link);
    font-weight: 700;
}

.footer-social {
    align-items: center;
    display: inline-flex;
    gap: .35rem;
}

.social-icon {
    height: .9rem;
    width: .9rem;
}

/* Enlaces del pie en dos grupos (redes y tienda / páginas del sitio) y "Volver arriba" aparte */
.footer-links {
    align-items: center;
    display: flex;
    flex-wrap: wrap;
    gap: .75rem 3rem;
}

.footer-group {
    display: flex;
    flex-wrap: wrap;
    gap: .75rem 1.5rem;
}

/* Desde tablet, los enlaces van en su propio renglón y "Volver arriba" queda a la derecha */
@media (min-width: 35.01rem) {
    .footer-links {
        flex-basis: 100%;
    }

    .footer-top {
        margin-left: auto;
    }
}

/* Desde tablet, cada parte del footer se mantiene en una sola línea (en pantallas grandes, todo el footer entra en una) */
@media (min-width: 35.01rem) {
    .site-footer > span,
    .footer-links a {
        white-space: nowrap;
    }
}


/* Pantallas grandes: los enlaces del pie van en su propio renglón, así que Instagram lleva también su nombre */
@media (min-width: 72.01rem) {
    .site-footer {
        gap: .75rem 1.5rem;
    }

    .footer-social .social-icon {
        height: 1.05rem;
        width: 1.05rem;
    }
}