/* ========================================================
   MINIMAL PREMIUM FOOTER — LIGHT VERSION
   ======================================================== */

.site-footer {
    position: relative;

    padding: 0 5% 30px;

    background: var(--cream);

    color: var(--ink);
}

.footer-inner {
    max-width: 1450px;

    margin: auto;

    padding-top: 38px;

    border-top:
        1px solid var(--line);
}


/* ========================================================
   TOP
   ======================================================== */

.footer-top {
    display: grid;

    grid-template-columns:
        1.15fr 1fr .85fr;

    gap: clamp(45px,6vw,95px);

    align-items: start;
}


/* ========================================================
   BRAND
   ======================================================== */

.footer-brand {
    display: flex;

    align-items: flex-start;
}

.footer-logo-link {
    display: inline-block;

    width: min(100%, 330px);
}

.footer-logo-image {
    display: block;

    width: 100%;
    height: auto;

    object-fit: contain;

    transition:
        opacity .3s ease,
        transform .4s cubic-bezier(.22,.61,.36,1);
}

.footer-logo-link:hover .footer-logo-image {
    opacity: .88;

    transform:
        translateY(-2px);
}


/* ========================================================
   NAVIGATION
   ======================================================== */

.footer-nav {
    display: grid;

    grid-template-columns:
        1fr 1fr;

    gap: 13px 28px;
}

.footer-nav a {
    position: relative;

    width: fit-content;

    color: rgba(41,42,38,.66);

    font-size: 11px;

    transition:
        color .3s ease;
}

.footer-nav a::after {
    content: "";

    position: absolute;

    left: 0;
    bottom: -4px;

    width: 100%;
    height: 1px;

    background: var(--champagne);

    transform: scaleX(0);

    transform-origin: right;

    transition:
        transform .38s cubic-bezier(.77,0,.18,1);
}

.footer-nav a:hover {
    color: var(--ink);
}

.footer-nav a:hover::after {
    transform: scaleX(1);

    transform-origin: left;
}


/* ========================================================
   CONTACT
   ======================================================== */

.footer-contact {
    display: flex;

    flex-direction: column;

    align-items: flex-start;

    gap: 8px;
}

.footer-label {
    margin-bottom: 5px;

    color: var(--champagne);

    font-size: 8px;

    font-weight: 600;

    text-transform: uppercase;

    letter-spacing: 2px;
}

.footer-contact > a {
    color: rgba(41,42,38,.74);

    font-family: var(--serif);

    font-size: 17px;

    transition:
        color .3s ease;
}

.footer-contact > a:hover {
    color: var(--champagne);
}


/* ========================================================
   SOCIAL MEDIA
   ======================================================== */

.footer-social {
    margin-top: 20px;

    display: flex;

    flex-direction: column;

    align-items: flex-start;

    gap: 10px;
}

.footer-social-icons {
    display: flex;

    align-items: center;

    gap: 10px;
}


/* Social icon */

.footer-social-icon {
    display: inline-flex;

    align-items: center;

    justify-content: center;

    width: 36px;
    height: 36px;

    border:
        1px solid rgba(41,42,38,.28);

    border-radius: 50%;

    color: var(--ink);

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

.footer-social-icon svg {
    width: 15px;
    height: 15px;

    fill: currentColor;
}


/* Hover */

.footer-social-icon:hover {
    color: var(--cream);

    background: var(--ink);

    border-color: var(--ink);

    transform:
        translateY(-2px);
}


/* ========================================================
   MIDDLE
   ======================================================== */

.footer-middle {
    margin-top: 44px;

    padding: 20px 0;

    border-top:
        1px solid var(--line);

    border-bottom:
        1px solid var(--line);

    display: flex;

    align-items: center;

    justify-content: space-between;

    gap: 35px;
}

.footer-area {
    color: rgba(41,42,38,.42);

    font-size: 8px;

    font-weight: 600;

    text-transform: uppercase;

    letter-spacing: 1.5px;
}


/* ========================================================
   LANGUAGE
   ======================================================== */

.footer-language {
    display: flex;

    align-items: center;

    gap: 16px;
}

.footer-language > span {
    color: rgba(41,42,38,.36);

    font-size: 8px;

    font-weight: 600;

    text-transform: uppercase;

    letter-spacing: 1.5px;
}

.footer-language-links {
    display: flex;

    align-items: center;

    gap: 8px;
}

.footer-language-links a,
.footer-language-links span {
    color: rgba(41,42,38,.40);

    font-size: 9px;

    font-weight: 600;

    letter-spacing: 1px;
}

.footer-language-links a {
    transition:
        color .3s ease;
}

.footer-language-links a:hover,
.footer-language-links a.active {
    color: var(--champagne);
}


/* ========================================================
   BOTTOM
   ======================================================== */

.footer-bottom {
    padding-top: 20px;

    display: flex;

    align-items: center;

    justify-content: space-between;

    gap: 30px;
}

.footer-bottom p {
    color: rgba(41,42,38,.34);

    font-size: 8px;

    font-weight: 600;

    text-transform: uppercase;

    letter-spacing: 1.2px;
}


/* ========================================================
   VALIA SOLUCIONES CREDIT
   ======================================================== */

.footer-credit {
    color: rgba(41,42,38,.44);

    font-size: 9px;

    font-weight: 500;

    letter-spacing: 1px;

    text-transform: none;
}

.footer-credit a {
    color: rgba(41,42,38,.72);

    transition:
        color .3s ease;
}

.footer-credit a:hover {
    color: var(--champagne);
}


/* ========================================================
   BACK TO TOP
   More visible + premium hover
   ======================================================== */

.footer-back-top {
    position: relative;

    display: inline-flex;
    align-items: center;
    gap: 14px;

    padding-bottom: 7px;

    color: rgba(41,42,38,.78);

    font-size: 9px;
    font-weight: 600;

    text-transform: uppercase;
    letter-spacing: 1.6px;

    text-decoration: none;
    cursor: pointer;

    transition:
        color .3s ease;
}


/* ========================================================
   UNDERLINE
   Visible at rest + expands on hover
   ======================================================== */

.footer-back-top::after {
    content: "";

    position: absolute;

    left: 0;
    bottom: 0;

    width: 100%;
    height: 1px;

    background: var(--champagne);

    transform: scaleX(.38);
    transform-origin: left;

    transition:
        transform .4s cubic-bezier(.77,0,.18,1);
}


/* ========================================================
   ARROW
   ======================================================== */

.footer-back-top span {
    display: inline-block;

    color: var(--champagne);

    font-size: 22px;
    font-weight: 400;
    line-height: 1;

    transform: translateY(-1px);

    transition:
        transform .35s cubic-bezier(.22,.61,.36,1),
        color .3s ease;
}


/* ========================================================
   HOVER
   ======================================================== */

.footer-back-top:hover,
.footer-back-top:focus-visible {
    color: var(--ink);
}

.footer-back-top:hover::after,
.footer-back-top:focus-visible::after {
    transform: scaleX(1);
}

.footer-back-top:hover span,
.footer-back-top:focus-visible span {
    color: var(--champagne);

    transform: translateY(-6px);
}

.footer-back-top:focus-visible {
    outline: none;
}


/* ========================================================
   MOBILE
   ======================================================== */

@media (max-width: 620px) {

    .footer-brand {
    justify-content: center;
    width: 100%;
}

.footer-logo-link {
    width: min(75vw, 255px);
    margin-left: auto;
    margin-right: auto;
}

    .footer-back-top {
        gap: 11px;

        font-size: 9px;

        letter-spacing: 1.4px;
    }

    .footer-back-top span {
        font-size: 20px;
    }

}


/* ========================================================
   ACCESSIBILITY
   ======================================================== */

@media (prefers-reduced-motion: reduce) {

    .footer-back-top,
    .footer-back-top::after,
    .footer-back-top span {
        transition: none !important;
    }

}

/* ========================================================
   CONTACT + FOOTER TRANSITION
   ======================================================== */

.contact-section + .site-footer {
    margin-top: 0;
}


/* Contact should not draw its old closing line */

.contact-section .contact-bottom-line {
    display: none;
}


/* ========================================================
   TABLET
   ======================================================== */

@media (max-width: 900px) {

    .footer-top {
        grid-template-columns:
            1fr 1fr;
    }

    .footer-contact {
        grid-column:
            1 / -1;
    }

}


/* ========================================================
   MOBILE
   ======================================================== */

@media (max-width: 620px) {

    .site-footer {
        padding:
            0 6% 26px;
    }

    .footer-inner {
        padding-top:
            32px;
    }

    .footer-top {
        grid-template-columns:
            1fr;

        gap:
            34px;
    }

    .footer-contact {
        grid-column:
            auto;
    }

    .footer-nav {
        max-width:
            340px;
    }

    .footer-middle {
        margin-top:
            36px;

        align-items:
            flex-start;

        flex-direction:
            column;

        gap:
            18px;
    }

    .footer-bottom {
        align-items:
            flex-start;

        flex-direction:
            column-reverse;

        gap:
            18px;
    }

    .footer-credit {
        font-size:
            8px;
    }

}


/* ========================================================
   REDUCED MOTION
   ======================================================== */

@media (prefers-reduced-motion: reduce) {

    .footer-name,
    .footer-nav a,
    .footer-nav a::after,
    .footer-contact a,
    .footer-social a,
    .footer-language-links a,
    .footer-credit a,
    .footer-back-top,
    .footer-back-top::after,
    .footer-back-top span {
        transition:
            none !important;
    }

}