.site-foot {
    position: relative;
    margin-top: -3rem;
    color: var(--color-white)
}

.site-foot__wave {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: var(--color-brand-2)
}

.site-foot__socials {
    margin-bottom: 2.083em
}

@media only screen and (max-width: 767px) {
    .site-foot__socials {
        font: 400 var(--font-size-t-md)/1.5 var(--font-text);
        letter-spacing: .05em;
        margin-bottom: 1.6875em
    }
}

.site-foot__socials:after {
    display: block;
    margin-top: 2rem;
    width: 100%;
    height: 2px;
    border-radius: 2px;
    content: ""
}

@media only screen and (max-width: 767px) {
    .site-foot__socials:after {
        margin-top: 1.75rem;
        height: 1px;
        transform: scaleY(0.5)
    }
}

.site-foot__socials h3 {
    font: 400 var(--font-size-t-lg)/1.5 var(--font-text);
    letter-spacing: .05em;
    margin-bottom: .833em
}

.site-foot__socials a {
    width: 1.8rem
}

.site-foot__bottom {
    position: relative;
    z-index: 2;
    padding: 1.15em 0 1.05em
}

@media only screen and (max-width: 767px) {
    .site-foot__bottom {
        padding: 0 0 2.625rem
    }
}

.site-foot__bottom .u-container {
    display: flex;
    flex-direction: row;
    align-items: normal;
    justify-content: space-between
}

@media only screen and (max-width: 767px) {
    .site-foot__bottom .u-container {
        font: 400 var(--font-size-t-sm)/1.5 var(--font-text);
        letter-spacing: .1em;
        flex-direction: column
    }
}

.site-foot__nav {
    flex: 1
}

@media only screen and (max-width: 1280px) {
    .site-foot__nav {
        display: flex;
        flex-direction: row;
        align-items: normal;
        justify-content: center
    }
}

@media only screen and (max-width: 987px) {
    .site-foot__nav {
        flex: none;
        justify-content: normal;
        width: calc(6 * var(--grid-column-width) + 5 * var(--grid-gutter-width))
    }
}

@media only screen and (max-width: 767px) {
    .site-foot__nav {
        margin-bottom: 4.125rem;
        width: 100%
    }
}

.site-foot__nav a {
    color: inherit;
    transition: color .1s linear
}

.site-foot__nav a:hover {
    color: var(--color-accent-1)
}

.site-foot .b-socials__ta a {
    width: 2rem
}

.site-foot__menu {
    display: grid;
    gap: .867em .75rem;
    grid-template-columns:50% max-content;
    margin: 0;
    padding: 0;
    width: calc(3 * var(--grid-column-width) + 4 * var(--grid-gutter-width));
    list-style: none;
    line-height: 1.1
}

@media only screen and (max-width: 1280px) {
    .site-foot__menu {
        grid-template-columns:auto
    }
}

@media only screen and (max-width: 987px) {
    .site-foot__menu {
        grid-template-columns:auto auto;
        width: 100%
    }
}

@media only screen and (max-width: 767px)and (orientation: landscape), only screen and (max-width: 576px) {
    .site-foot__menu {
        justify-content: space-between
    }
}

@media only screen and (max-width: 360px) {
    .site-foot__menu {
        grid-template-columns:auto
    }
}

.site-foot__menu li {
    page-break-inside: avoid;
    -moz-column-break-inside: avoid;
    break-inside: avoid-column
}

.site-foot .b-logo a:hover {
    color: inherit
}

.site-foot__widgets {
    font: 400 var(--font-size-t-lg)/1.5 var(--font-text);
    letter-spacing: .05em;
    position: relative;
    z-index: 2;
    padding: 6.7rem 0 5.05rem
}

@media only screen and (max-width: 987px) {
    .site-foot__widgets {
        padding: 2.625rem 0 2.1875rem
    }
}

.site-foot__widgets .u-container {
    display: flex;
    flex-direction: row;
    align-items: normal;
    justify-content: space-between
}

@media only screen and (max-width: 987px) {
    .site-foot__widgets .u-container {
        flex-wrap: wrap
    }
}

@media only screen and (max-width: 767px) {
    .site-foot__widgets .u-container {
        flex-direction: column
    }
}

.site-foot__logo {
    width: calc(3 * var(--grid-column-width) + 2 * var(--grid-gutter-width))
}

@media only screen and (max-width: 987px) {
    .site-foot__logo {
        margin-bottom: 3.3125rem;
        width: 100%
    }
}

.site-foot__contacts {
    min-width: calc(3 * var(--grid-column-width) + 3 * var(--grid-gutter-width))
}

@media only screen and (max-width: 987px) {
    .site-foot__contacts {
        width: calc(5 * var(--grid-column-width) + 4 * var(--grid-gutter-width))
    }
}

@media only screen and (max-width: 767px) {
    .site-foot__contacts {
        width: 100%
    }
}

.site-foot__phone {
    font: 400 var(--font-size-t-xl)/1.5 var(--font-text);
    letter-spacing: .05em;
    position: relative;
    display: block
}

@media only screen and (max-width: 767px) {
    .site-foot__phone {
        font: 400 var(--font-size-t-md)/1.5 var(--font-text);
        letter-spacing: .05em
    }
}

.site-foot__phone [data-title] {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: normal;
    position: absolute;
    top: 0;
    left: 0
}

.site-foot__phone [data-title]:after {
    content: attr(data-title)
}

.site-foot__phone [data-title]:before {
    display: block;
    margin-right: .906em;
    width: 1.72em;
    height: 1.72em;
    background: currentcolor;
    content: "";
    -webkit-mask: url("../images/social-networks/whatsapp.svg") no-repeat center/contain;
    mask: url("../images/social-networks/whatsapp.svg") no-repeat center/contain;
    mask-mode: alpha
}

@media only screen and (max-width: 767px) {
    .site-foot__phone [data-title]:before {
        margin-right: 1em;
        width: 1.4375em;
        height: 1.4375em
    }
}

.site-foot__phone [data-title]:last-child {
    background: var(--color-brand-4);
    -webkit-clip-path: ellipse(10% 0% at 50% 110%);
    clip-path: ellipse(10% 0% at 50% 110%);
    color: var(--color-accent-1);
    transition: -webkit-clip-path .5s cubic-bezier(0.215, 0.61, 0.355, 1);
    transition: clip-path .5s cubic-bezier(0.215, 0.61, 0.355, 1);
    transition: clip-path .5s cubic-bezier(0.215, 0.61, 0.355, 1), -webkit-clip-path .5s cubic-bezier(0.215, 0.61, 0.355, 1)
}

.site-foot__phone:hover [data-title]:last-child {
    -webkit-clip-path: ellipse(100% 100% at 50% 50%);
    clip-path: ellipse(100% 100% at 50% 50%)
}

@media only screen and (max-width: 767px) {
    .site-foot__copyright {
        margin-bottom: 1.4285em
    }
}
