.site-footer {
    background-color: var(--footer-bg, var(--color-black));
    color: var(--footer-text, var(--color-gray-light));
    padding: var(--token-space-8) var(--token-space-3) var(--token-space-4);
    font-family: var(--font-inter);
    border-top: var(--border-width-hairline) solid rgb(var(--color-green-dark-rgb) / var(--alpha-10));
}

.footer-box {
    max-width: var(--token-size-1280px);
    margin: var(--token-number-0) auto;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: flex-start;
    gap: var(--token-space-6);
}

.footer-izquierdo,
.footer-centro,
.footer-derecho {
    flex: var(--token-number-1);
}

.footer-izquierdo {
    display: flex;
    flex-direction: column;
    gap: var(--token-space-3);
}

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

.footer-logo {
    width: var(--token-ratio-100percent);
    max-width: var(--token-size-180px);
    height: auto;
    display: block;
}

.info-footer p {
    margin: var(--token-space-1) var(--token-number-0);
    line-height: var(--leading-normal);
    font-size: var(--text-body);
}

.footer-centro {
    display: flex;
    justify-content: center;
}

.menu-interno {
    display: flex;
    flex-direction: column;
    gap: var(--token-space-15);
}

.enlaces {
    color: var(--footer-heading, var(--color-white));
    font-weight: var(--weight-700);
    font-size: var(--text-body-lg);
    margin-bottom: var(--token-size-0p5rem);
    text-transform: uppercase;
    letter-spacing: var(--tracking-label);
}

.nav__links {
    color: var(--footer-text, var(--color-gray-light));
    text-decoration: none;
    font-size: var(--text-body);
    transition: all var(--token-duration-0p2s) ease;
    display: inline-block;
    width: fit-content;
}

.nav__links:hover,
.nav__links.is-active {
    color: var(--color-accent, var(--footer-accent));
    padding-left: var(--token-size-5px);
    text-decoration: none;
    font-weight: var(--weight-800);
}

.footer-derecho {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
}

.redes-sociales {
    display: flex;
    gap: var(--token-space-2);
}

.social-link {
    display: flex;
    align-items: center;
    justify-content: center;
    width: var(--token-size-3rem);
    height: var(--token-size-3rem);
    border-radius: var(--token-radius-max);
    background-color: rgb(var(--color-white-rgb) / var(--alpha-05));
    color: var(--footer-heading, var(--color-white));
    text-decoration: none;
    transition: all var(--token-duration-0p3s) cubic-bezier(var(--token-number-0p4), var(--token-number-0), var(--token-number-0p2), var(--token-number-1));
    font-size: var(--text-heading-md);
}

.social-link i {
    font-size: var(--text-heading-md);
}

.social-link:hover {
    transform: translateY(var(--token-size-neg-4px));
    box-shadow: var(--token-number-0) var(--token-size-10px) var(--token-size-15px) var(--token-size-neg-3px) rgb(var(--color-black-rgb) / var(--alpha-50));
    text-decoration: none;
}

.social-link.whatsapp:hover {
    background-color: var(--color-green);
    color: var(--color-white);
}

.social-link.facebook:hover {
    background-color: var(--color-green);
    color: var(--color-white);
}

.social-link.instagram:hover {
    background: radial-gradient(circle at var(--token-ratio-30percent) var(--token-ratio-107percent), var(--color-green) var(--token-ratio-0percent), var(--color-green) var(--token-ratio-5percent), var(--color-green-dark) var(--token-ratio-45percent), var(--color-green) var(--token-ratio-60percent), var(--color-green) var(--token-ratio-90percent));
    color: var(--color-white);
}

.container-copy {
    border-top: var(--border-width-hairline) solid rgb(var(--color-white-rgb) / var(--alpha-10));
    margin-top: var(--token-size-4rem);
    padding-top: var(--token-size-2rem);
    text-align: center;
    color: rgb(var(--color-white-rgb) / var(--alpha-40));
    font-size: var(--text-label);
}


.Btn {
    position: fixed;
    bottom: var(--token-size-30px);
    right: var(--token-size-30px);
    z-index: var(--token-number-9999);
    width: var(--token-size-60px);
    height: var(--token-size-60px);
    display: flex;
    align-items: center;
    justify-content: center;
    border: none;
    border-radius: var(--radius-circle);
    cursor: pointer;
    overflow: hidden;
    transition-duration: var(--token-duration-0p3s);
    box-shadow: var(--token-number-0) var(--token-size-4px) var(--token-size-15px) rgb(var(--color-black-rgb) / var(--alpha-30));
    background-color: var(--color-green);
}

.sign {
    width: var(--token-ratio-100percent);
    transition-duration: var(--token-duration-0p3s);
    display: flex;
    align-items: center;
    justify-content: center;
}

.sign svg {
    width: var(--token-size-30px);
}

.sign svg path {
    fill: var(--color-white);
}

.text {
    position: absolute;
    right: var(--token-ratio-0percent);
    width: var(--token-ratio-0percent);
    opacity: var(--token-number-0);
    color: var(--color-white);
    font-size: var(--text-body-lg);
    font-weight: var(--weight-600);
    transition-duration: var(--token-duration-0p3s);
    white-space: nowrap;
}
.Btn:hover {
    width: var(--token-size-160px);
    border-radius: var(--token-size-40px);
    justify-content: flex-start;
}

.Btn:hover .sign {
    width: var(--token-ratio-30percent);
    padding-left: var(--token-size-20px);
    justify-content: center;
}

.Btn:hover .text {
    opacity: var(--token-number-1);
    width: var(--token-ratio-70percent);
    padding-right: var(--token-size-15px);
    padding-left: var(--token-size-10px);
    position: relative;
}

.Btn:active {
    transform: scale(var(--token-number-0p95));
}

@media (max-width: 768px) {
    .Btn {
        bottom: var(--token-size-20px);
        right: var(--token-size-20px);
        width: var(--token-size-55px);
        height: var(--token-size-55px);
        justify-content: center;
    }

    .sign svg {
        width: var(--token-size-28px);
    }

    .Btn:hover {
        width: var(--token-size-55px);
        border-radius: var(--radius-circle);
        justify-content: center;
    }

    .Btn:hover .sign {
        width: var(--token-ratio-100percent);
        padding-left: var(--token-number-0);
    }

    .Btn:hover .text {
        display: none;
    }
}

@media (max-width: 968px) {
    .footer-box {
        flex-direction: column;
        align-items: center;
        text-align: center;
        gap: var(--token-space-6);
    }

    .footer-izquierdo {
        align-items: center;
    }

    .footer-centro {
        width: var(--token-ratio-100percent);
    }

    .menu-interno {
        align-items: center;
        gap: var(--token-space-2);
    }

    .nav__links:hover,
    .nav__links.is-active {
        padding-left: var(--token-number-0);
        transform: scale(var(--token-number-1p05));
    }

    .footer-derecho {
        align-items: center;
    }
}

@media (max-width: 768px) {
    .site-footer {
        padding-bottom: var(--token-size-6rem);
    }

    .Btn {
        bottom: var(--token-size-20px);
        right: var(--token-size-20px);
        width: var(--token-size-55px);
        height: var(--token-size-55px);
    }

    .sign svg {
        width: var(--token-size-28px);
    }

    .Btn:hover {
        width: var(--token-size-55px);
        border-radius: var(--radius-circle);
    }

    .Btn:hover .sign {
        width: var(--token-ratio-100percent);
        padding-left: var(--token-number-0);
    }

    .Btn:hover .text {
        display: none;
        opacity: var(--token-number-0);
        width: var(--token-number-0);
    }
}

@media (max-width: 968px) {
    .footer-box {
        flex-direction: column;
        align-items: center;
        text-align: center;
        gap: var(--token-space-5);
    }

    .footer-izquierdo {
        align-items: center;
    }

    .footer-centro {
        width: var(--token-ratio-100percent);
    }

    .menu-interno {
        align-items: center;
    }

    .nav__links:hover,
    .nav__links.is-active {
        padding-left: var(--token-number-0);
        transform: scale(var(--token-number-1p05));
    }

    .footer-derecho {
        align-items: center;
    }

}