/* =========================================================
   TABLETS Y PANTALLAS MEDIANAS
========================================================= */

@media (max-width: 1024px) {
    :root {
        --section-spacing: 100px;
    }

    .section-header {
        align-items: flex-start;
        flex-direction: column;
        gap: 24px;
    }

    .section-header__description {
        max-width: 650px;
    }
}

/* =========================================================
   MÓVILES Y TABLETS PEQUEÑAS
========================================================= */

@media (max-width: 768px) {
    :root {
        --navbar-height: 70px;
        --section-spacing: 80px;
        --container-padding: 16px;
    }

    .container {
        width: min(
            calc(100% - 32px),
            var(--container-width)
        );
    }

    .section {
        min-height: 400px;
    }

    .section-title {
        font-size: clamp(2rem, 10vw, 3.2rem);
    }

    .btn {
        min-height: 48px;
    }
}

/* =========================================================
   MÓVILES PEQUEÑOS
========================================================= */

@media (max-width: 480px) {
    :root {
        --section-spacing: 68px;
        --container-padding: 14px;
    }

    .container {
        width: calc(100% - 28px);
    }

    .section-title {
        font-size: clamp(1.9rem, 11vw, 2.7rem);
    }

    .btn {
        width: 100%;
    }

    .background-grid {
        background-size: 38px 38px;
    }
}

/* =========================================================
   REDUCCIÓN DE MOVIMIENTO
========================================================= */

@media (prefers-reduced-motion: reduce) {
    html {
        scroll-behavior: auto;
    }

    *,
    *::before,
    *::after {
        scroll-behavior: auto !important;
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
}


/* =========================================================
   NAVBAR RESPONSIVE
========================================================= */

@media (max-width: 1050px) {
    .navbar__navigation,
    .navbar__cta {
        display: none;
    }

    .navbar__toggle {
        display: flex;
    }
}

@media (max-width: 768px) {
    .site-header {
        height: 70px;
    }

    .navbar__logo {
        width: 150px;
        height: 43px;
    }

}

@media (max-width: 480px) {
    .navbar__logo {
        width: 137px;
    }

    .navbar__toggle {
        width: 43px;
        height: 43px;
    }

    .mobile-menu {
        width: 100%;
        padding: 24px 20px;
    }

    .mobile-menu__header {
        margin-bottom: 38px;
    }

    .mobile-menu__link {
        min-height: 54px;
    }
}


/* =========================================================
   HERO RESPONSIVE
========================================================= */

@media (max-width: 1120px) {
    .hero__container {
        grid-template-columns:
            minmax(0, 1fr)
            minmax(380px, 0.9fr);

        gap: 34px;
    }

    .hero__title {
        font-size: clamp(3.2rem, 5.5vw, 4.7rem);
    }

    .hero__visual {
        min-height: 520px;
    }
}

@media (max-width: 900px) {
    .hero {
        min-height: auto;
        padding-top: calc(var(--navbar-height) + 65px);
        padding-bottom: 75px;
    }

    .hero__container {
        grid-template-columns: 1fr;

        min-height: auto;
        gap: 40px;
    }

    .hero__content {
        max-width: 720px;
        margin-right: auto;
        margin-left: auto;

        text-align: center;
    }

    .hero__title {
        max-width: 720px;
        margin-right: auto;
        margin-left: auto;

        font-size: clamp(3.2rem, 8vw, 5rem);
    }

    .hero__description {
        margin-right: auto;
        margin-left: auto;
    }

    .hero__actions {
        justify-content: center;
    }

    .hero__visual {
        width: min(100%, 680px);
        min-height: 500px;
        margin-right: auto;
        margin-left: auto;
    }

    .hero__image-wrapper {
        width: min(92%, 620px);
    }
}

@media (max-width: 600px) {
    .hero {
        padding-top: calc(var(--navbar-height) + 45px);
        padding-bottom: 60px;
    }

    .hero__container {
        gap: 25px;
    }

    .hero__title {
        margin-bottom: 20px;

        font-size: clamp(2.7rem, 13vw, 4rem);
        line-height: 1.1;
    }

    .hero__description {
        margin-bottom: 28px;

        font-size: 0.96rem;
        line-height: 1.7;
    }

    .hero__actions {
        flex-direction: column;

        margin-bottom: 32px;
    }

    .hero__actions .btn {
        width: 100%;
    }

    .hero__visual {
        min-height: 390px;
    }

    .hero__image-wrapper {
        width: 100%;
    }

    .hero__orbit--one {
        width: 95%;
    }

    .hero__orbit--two {
        width: 73%;
    }
}

@media (max-width: 400px) {
    .hero__title {
        font-size: clamp(2.45rem, 13vw, 3.2rem);
    }

    .hero__visual {
        min-height: 330px;
    }
}

/* =========================================================
   CINTA DE TECNOLOGÍAS RESPONSIVE
========================================================= */

@media (max-width: 768px) {
    .tech-strip {
        padding: 17px 0;
    }

    .tech-strip__container {
        grid-template-columns: 145px minmax(0, 1fr);

        gap: 20px;
    }

    .tech-strip__intro {
        min-height: 55px;
        padding-right: 15px;
    }

    .tech-strip__intro span:first-child {
        font-size: 0.56rem;
        letter-spacing: 0.11em;
    }

    .tech-strip__group {
        gap: 45px;
        padding-right: 45px;
    }

    .tech-strip__item {
        font-size: 0.84rem;
    }

    .tech-strip__item img {
        width: 34px;
        height: 34px;
    }

    .tech-strip__track {
        animation-duration: 23s;
    }
}

@media (max-width: 520px) {
    .tech-strip__container {
        grid-template-columns: 115px minmax(0, 1fr);

        gap: 14px;
    }

    .tech-strip__intro {
        padding-right: 10px;
    }

    .tech-strip__intro span:first-child {
        font-size: 0.49rem;
        letter-spacing: 0.08em;
    }

    .tech-strip__group {
        gap: 35px;
        padding-right: 35px;
    }

    .tech-strip__item img {
        width: 31px;
        height: 31px;
    }
}

/* =========================================================
   SERVICIOS RESPONSIVE — CUATRO TARJETAS
========================================================= */

/* =========================================================
   PANTALLAS MEDIANAS
========================================================= */

@media (max-width: 1200px) {
    .services__header {
        grid-template-columns:
            minmax(500px, 1fr)
            minmax(360px, 0.8fr);

        gap: 45px;
    }

    .services__title {
        font-size: clamp(
            2.5rem,
            4vw,
            3.6rem
        );
    }

    .services__introduction {
        font-size: 0.89rem;
    }

    /*
     * Las cuatro tarjetas continúan ocupando
     * todo el ancho disponible.
     */

    .services__track {
        width: 100%;
    }

    .service-card {
        width: auto;
        min-width: 0;

        flex: 1 1 0;
    }

    .service-card.is-active {
        width: auto;

        flex: 1.6 1 0;
    }

    .service-card__content h3 {
        font-size: 1rem;
    }

    .service-card.is-active .service-card__content h3 {
        font-size: 1.17rem;
    }
}

/* =========================================================
   TABLETS
========================================================= */

@media (max-width: 1000px) {
    .services {
        padding: 90px 0;
    }

    .services__header {
        grid-template-columns: 1fr;

        gap: 27px;
        margin-bottom: 38px;
    }

    .services__title {
        max-width: 650px;

        font-size: clamp(
            2.5rem,
            5.8vw,
            3.7rem
        );
    }

    .services__header-right {
        max-width: 720px;
    }

    /*
     * Desde tablet, las tarjetas se convierten
     * en un carrusel horizontal.
     */

    .services__viewport {
        overflow-x: auto;

        scroll-snap-type: x mandatory;
    }

    .services__track {
        width: max-content;
    }

    .service-card {
        width: 285px;
        min-width: 285px;

        flex: 0 0 285px;

        scroll-snap-align: center;
    }

    .service-card.is-active {
        width: 410px;
        min-width: 410px;

        flex: 0 0 410px;
    }

    .service-card__image {
        height: 210px;
    }

    .service-card.is-active .service-card__image {
        height: 235px;
    }
}

/* =========================================================
   TABLETS PEQUEÑAS Y MÓVILES
========================================================= */

@media (max-width: 700px) {
    .services {
        padding: 78px 0;
    }

    .services__header {
        gap: 23px;
        margin-bottom: 33px;
    }

    .services__eyebrow {
        margin-bottom: 11px;

        font-size: 0.63rem;
    }

    .services__title {
        font-size: clamp(
            2.1rem,
            8.7vw,
            3.1rem
        );
        line-height: 1.1;
    }

    /*
     * Permitimos que el título se adapte
     * si la pantalla es demasiado estrecha.
     */

    .services__title-line {
        white-space: normal;
    }

    .services__header-right {
        align-items: flex-end;
    }

    .services__introduction {
        max-width: 520px;

        font-size: 0.88rem;
        line-height: 1.65;
    }

    .services__navigation {
        display: none;
    }

    /*
     * El carrusel sobresale hasta el borde derecho
     * y mantiene el margen izquierdo del contenedor.
     */

    .services__viewport {
        width: calc(
            100% + var(--container-padding)
        );
        padding-right: var(--container-padding);

        scroll-padding-inline:
            var(--container-padding);
    }

    .services__track {
        width: max-content;
        gap: 16px;
    }

    /*
     * En móvil no se modifica el ancho de la tarjeta
     * activa para evitar saltos durante el gesto táctil.
     */

    .service-card,
    .service-card.is-active {
        width: min(82vw, 345px);
        min-width: min(82vw, 345px);

        flex: 0 0 min(82vw, 345px);

        min-height: 420px;

        transform: none;
    }

    .service-card:hover {
        transform: none;
    }

    .service-card__image,
    .service-card.is-active .service-card__image {
        height: 210px;
    }

    .service-card__content h3,
    .service-card.is-active .service-card__content h3 {
        font-size: 1.07rem;
    }

    .service-card__content p,
    .service-card.is-active .service-card__content p {
        max-width: 100%;

        font-size: 0.83rem;
    }

    .service-card.is-active .service-card__button {
        position: static;

        width: 41px;
        height: 41px;
    }

    .services__progress {
        margin-top: 22px;
    }
}

/* =========================================================
   MÓVILES
========================================================= */

@media (max-width: 430px) {
    .services {
        padding: 68px 0;
    }

    .services__header {
        margin-bottom: 29px;
    }

    .services__eyebrow {
        font-size: 0.59rem;
        letter-spacing: 0.16em;
    }

    .services__title {
        font-size: clamp(
            1.95rem,
            9vw,
            2.6rem
        );
        letter-spacing: -0.045em;
    }

    .services__header-right {
        display: block;
    }

    .services__introduction {
        font-size: 0.84rem;
    }

    .service-card,
    .service-card.is-active {
        width: 82vw;
        min-width: 82vw;

        flex: 0 0 82vw;

        min-height: 405px;
        padding: 14px;
    }

    .service-card__image,
    .service-card.is-active .service-card__image {
        height: 188px;
        margin-bottom: 13px;
    }

    .service-card__content {
        min-height: 145px;
    }

    .service-card__content h3,
    .service-card.is-active .service-card__content h3 {
        font-size: 1.02rem;
    }

    .service-card__content p,
    .service-card.is-active .service-card__content p {
        font-size: 0.8rem;
        line-height: 1.55;
    }
}

/* =========================================================
   MÓVILES MUY PEQUEÑOS
========================================================= */

@media (max-width: 350px) {
    .services__title {
        font-size: 1.85rem;
    }

    .service-card,
    .service-card.is-active {
        width: 84vw;
        min-width: 84vw;

        flex-basis: 84vw;
    }

    .service-card__image,
    .service-card.is-active .service-card__image {
        height: 170px;
    }
}



/* =========================================================
   PROCESO COMPACTO RESPONSIVE
========================================================= */

@media (max-width: 1250px) {
    .process__container {
        grid-template-columns:
            minmax(0, 1.3fr)
            minmax(330px, 0.7fr);

        min-height: 315px;
        gap: 32px;
    }

    .process__title {
        font-size:
            clamp(2.25rem, 3.6vw, 3.15rem);
    }

    .process__visual {
        height: 270px;
    }
}

@media (max-width: 1000px) {
    .process {
        padding: 48px 0 44px;
    }

    .process__container {
        grid-template-columns: 1fr;

        min-height: auto;
        gap: 20px;
    }

    .process__header {
        margin-bottom: 24px;
    }

    .process__title {
        font-size:
            clamp(2.25rem, 5.7vw, 3.35rem);

        white-space: nowrap;
    }

    .process__visual {
        width: min(100%, 680px);
        height: 280px;
        margin-right: auto;
        margin-left: auto;
    }

    .process__image {
        width: 100%;
        max-width: 630px;
    }
}

@media (max-width: 750px) {
    .process {
        padding: 45px 0 40px;
    }

    .process__header {
        margin-bottom: 27px;
    }

    .process__title {
        font-size:
            clamp(2.05rem, 8vw, 3rem);

        white-space: normal;
    }

    .process__title span {
        display: inline;
    }

    .process__journey,
    .process__steps {
        min-height: auto;
    }

    .process__visual {
        height: auto;
        min-height: 225px;
        margin-top: -5px;
    }

    .process__image {
        width: 100%;
        max-width: 570px;
    }
}

@media (max-width: 480px) {
    .process {
        padding: 40px 0 36px;
    }

    .process__title {
        font-size: clamp(2rem, 10vw, 2.6rem);
        line-height: 1.08;
        white-space: normal;
    }

    .process__eyebrow {
        margin-bottom: 9px;

        font-size: 0.58rem;
    }

    .process__title {
        font-size:
            clamp(1.95rem, 9.5vw, 2.65rem);

        line-height: 1.1;
    }

    .process__title span {
        display: inline;
    }

    .process__visual {
        min-height: 195px;
    }

    .process__image {
        width: 106%;
        max-width: none;
    }
}


/* =========================================================
   PROYECTOS RESPONSIVE
========================================================= */

/* Tablet horizontal */
@media (max-width: 1100px) {
    .projects {
        padding: 65px 0 54px;
    }

    .projects__header {
        align-items: flex-start;

        gap: 32px;
    }

    .projects__title {
        max-width: 720px;

        font-size: clamp(
            2.45rem,
            5vw,
            3.55rem
        );
    }

    /*
     * Dos tarjetas completas en tablet.
     * El espacio de 18px coincide con el gap del track.
     */
    .project-card {
        width: calc((100% - 18px) / 2);

        flex: 0 0 calc((100% - 18px) / 2);
    }

    .project-card__image {
        aspect-ratio: 16 / 9;
    }
}

/* Tablet vertical */
@media (max-width: 800px) {
    .projects {
        padding: 58px 0 50px;
    }

    .projects__header {
        display: flex;
        align-items: flex-start;
        flex-direction: column;

        gap: 21px;
        margin-bottom: 25px;
    }

    .projects__heading {
        width: 100%;
    }

    .projects__title {
        max-width: 650px;

        font-size: clamp(
            2.25rem,
            6.7vw,
            3.25rem
        );
    }

    .projects__filters {
        justify-content: flex-start;

        width: 100%;
    }

    .projects__controls {
        margin-top: 21px;
    }
}

/* Móviles */
@media (max-width: 620px) {
    .projects {
        padding: 50px 0 42px;
    }

    /*
     * Se mantiene el carrusel dentro del ancho
     * disponible del contenedor.
     */
    .projects__container {
        width: min(
            calc(
                100% -
                (var(--container-padding) * 2)
            ),
            var(--container-width)
        );
    }

    .projects__header {
        gap: 18px;
        margin-bottom: 22px;
    }

    .projects__eyebrow {
        margin-bottom: 9px;

        font-size: 0.6rem;
        letter-spacing: 0.17em;
    }

    .projects__title {
        max-width: 100%;

        font-size: clamp(
            2rem,
            9.4vw,
            2.7rem
        );

        line-height: 1.08;
        letter-spacing: -0.045em;
    }

    /*
     * Los filtros pueden desplazarse horizontalmente
     * si no entran en una sola línea.
     */
    .projects__filters {
        display: flex;
        justify-content: flex-start;
        flex-wrap: nowrap;

        width: calc(
            100% + var(--container-padding)
        );

        gap: 8px;
        padding-right: var(--container-padding);
        padding-bottom: 5px;

        overflow-x: auto;
        overscroll-behavior-inline: contain;

        scrollbar-width: none;
        -webkit-overflow-scrolling: touch;
    }

    .projects__filters::-webkit-scrollbar {
        display: none;
    }

    .projects__filter {
        min-height: 34px;
        padding: 7px 14px;

        flex: 0 0 auto;

        font-size: 0.68rem;
        white-space: nowrap;
    }

    .projects__viewport {
        width: 100%;

        overflow: hidden;
    }

    .projects__track {
        gap: 14px;
    }

    /*
     * Una tarjeta casi completa y una pequeña parte
     * de la siguiente para indicar desplazamiento.
     */
    .project-card {
        width: min(
            86%,
            365px
        );

        flex: 0 0 min(
            86%,
            365px
        );
    }

    .project-card__image {
        aspect-ratio: 16 / 9;
    }

    .project-card__image img {
        width: 100%;
        height: 100%;

        object-fit: cover;

        /*
         * Impide cualquier zoom heredado.
         */
        transform: none !important;
    }

    .project-card:hover {
        /*
         * En dispositivos táctiles no levantamos
         * la tarjeta para evitar cortes.
         */
        transform: none;
    }

    .project-card:hover .project-card__image img {
        transform: none !important;
    }

    .project-card__footer {
        min-height: 72px;
        gap: 12px;
        padding: 12px 13px;
    }

    .project-card__footer h3 {
        margin-bottom: 4px;

        font-size: 0.96rem;
    }

    .project-card__footer p {
        font-size: 0.71rem;
        line-height: 1.3;
    }

    .project-card__button {
        width: 36px;
        height: 36px;

        flex-basis: 36px;
    }

    .project-card__button svg {
        width: 15px;
        height: 15px;
    }

    .projects__controls {
        gap: 11px;
        margin-top: 18px;
    }

    .projects__arrow {
        width: 36px;
        height: 36px;
    }

    .projects__progress {
        width: 72px;
    }
}

/* Móviles pequeños */
@media (max-width: 390px) {
    .projects {
        padding: 45px 0 38px;
    }

    .projects__header {
        margin-bottom: 19px;
    }

    .projects__title {
        font-size: clamp(
            1.85rem,
            9.5vw,
            2.2rem
        );
    }

    .projects__filter {
        padding: 7px 12px;

        font-size: 0.65rem;
    }

    .project-card {
        width: 88%;

        flex-basis: 88%;
    }

    .project-card__footer {
        min-height: 69px;
        padding: 11px 12px;
    }

    .project-card__footer h3 {
        font-size: 0.92rem;
    }

    .project-card__footer p {
        font-size: 0.68rem;
    }

    .project-card__button {
        width: 34px;
        height: 34px;

        flex-basis: 34px;
    }

    .projects__progress {
        width: 62px;
    }
}


/* =========================================================
   RESPONSIVE DEL CONTENEDOR
========================================================= */

@media (max-width: 1200px) {
    .difference__container {
        grid-template-columns:
            minmax(280px, 0.75fr)
            minmax(470px, 1.25fr)
            minmax(230px, 0.6fr);

        width: min(
            calc(100% - 40px),
            1500px
        );
        gap: 22px;
    }

    .difference__cards {
        width: 100%;
        max-width: 530px;
        gap: 12px;
    }

    .difference-card {
        height: 178px;
        min-height: 178px;
        padding: 16px 13px;
    }
}

@media (max-width: 1000px) {
    .difference__container {
        grid-template-columns:
            minmax(270px, 0.8fr)
            minmax(0, 1.2fr);
        grid-template-areas:
            "heading visual"
            "cards cards";

        width: min(
            calc(100% - 40px),
            1500px
        );
        gap: 28px;
    }

    .difference__heading {
        grid-area: heading;
    }

    .difference__cards {
        grid-area: cards;

        width: 100%;
        max-width: none;
    }

    .difference__visual {
        grid-area: visual;
    }

    .difference-card {
        height: 165px;
        min-height: 165px;
    }
}

@media (max-width: 700px) {
    .difference__container {
        grid-template-columns: 1fr;
        grid-template-areas:
            "heading"
            "cards"
            "visual";

        width: calc(100% - 32px);
        max-width: 1500px;
        gap: 32px;
    }

    .difference__cards {
        grid-template-columns: 1fr;

        width: 100%;
        max-width: none;
    }

    .difference-card {
        width: 100%;
        height: auto;
        min-height: 96px;
    }
}

@media (max-width: 430px) {
    .difference__container {
        width: calc(100% - 24px);

        gap: 28px;
    }

    .difference__title > span {
        white-space: normal;
    }
}


/* =========================================================
   CONTACTO RESPONSIVE
========================================================= */

@media (max-width: 1200px) {
    .contact-cta__container {
        grid-template-columns:
            minmax(320px, 0.72fr)
            minmax(0, 1.28fr);

        width: calc(100% - 40px);
        gap: 36px;
    }

    .contact-cta__title {
        font-size: clamp(2.45rem, 4.2vw, 3.65rem);
    }

    .contact-form {
        max-width: none;
        padding: 23px;
    }
}

@media (max-width: 1000px) {
    .contact-cta__container {
        grid-template-columns: 1fr;

        width: calc(100% - 40px);
        max-width: 800px;
        gap: 42px;
    }

    .contact-cta__content {
        max-width: 700px;
        margin: 0 auto;

        text-align: center;
    }

    .contact-cta__description {
        margin-right: auto;
        margin-left: auto;
    }

    .contact-cta__visual {
        justify-content: center;

        min-height: auto;
    }

    .contact-form {
        width: 100%;
        max-width: 800px;
        margin: 0 auto;
    }
}

@media (max-width: 560px) {
    .contact-cta__container {
        width: calc(100% - 32px);
        gap: 34px;
    }

    .contact-form {
        padding: 20px 17px;
    }

    .contact-form__grid--two,
    .contact-form__grid--three {
        grid-template-columns: 1fr;
    }
}



/* =========================================================
   FOOTER RESPONSIVE
========================================================= */

@media (max-width: 1200px) {
    .site-footer__main {
        grid-template-columns:
            minmax(280px, 1.1fr)
            minmax(150px, 0.65fr)
            minmax(150px, 0.65fr)
            minmax(275px, 1fr);

        gap: 32px;
    }

    .site-footer__logo img {
        width: 210px;
    }

    .site-footer__description {
        font-size: 0.81rem;
    }

    .site-footer__links a {
        font-size: 0.8rem;
    }

    .site-footer__contact-link {
        font-size: 0.77rem;
    }

    .complaints-book {
        grid-template-columns:
            39px minmax(0, 1fr) 18px;

        padding-right: 10px;
        padding-left: 10px;
        gap: 8px;
    }

    .complaints-book__icon {
        width: 39px;
    }

    .complaints-book__icon svg {
        width: 34px;
        height: 34px;
    }

    .complaints-book__content strong {
        font-size: 0.74rem;
    }

    .complaints-book__content small {
        font-size: 0.61rem;
    }
}

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

@media (max-width: 1000px) {
    .site-footer__container {
        width: calc(100% - 40px);
        padding-top: 36px;
    }

    .site-footer__main {
        grid-template-columns:
            repeat(3, minmax(0, 1fr));

        gap: 32px 38px;
        padding-bottom: 30px;
    }

    .site-footer__brand {
        grid-column: 1 / -1;

        align-items: flex-start;

        max-width: 520px;
        margin: 0;

        text-align: left;
    }

    .site-footer__logo {
        justify-content: flex-start;
    }

    .site-footer__description {
        max-width: 500px;
    }

    .site-footer__socials {
        justify-content: flex-start;
    }

    .site-footer__column {
        align-items: flex-start;

        text-align: left;
    }

    .site-footer__contact {
        min-width: 250px;
    }
}

/* =========================================================
   TABLET PEQUEÑA
========================================================= */

@media (max-width: 720px) {
    .site-footer__container {
        padding-top: 32px;
    }

    .site-footer__main {
        grid-template-columns:
            repeat(2, minmax(0, 1fr));

        gap: 30px;
        padding-bottom: 27px;
    }

    .site-footer__brand {
        grid-column: 1 / -1;
    }

    .site-footer__contact {
        grid-column: 1 / -1;

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

    .site-footer__bottom {
        flex-direction: column;
        align-items: flex-start;
        justify-content: center;

        min-height: auto;
        padding: 17px 0;
        gap: 11px;

        text-align: left;
    }

    .site-footer__legal {
        justify-content: flex-start;

        text-align: left;
    }
}

/* =========================================================
   MÓVIL
========================================================= */

@media (max-width: 480px) {
    .site-footer__container {
        width: calc(100% - 32px);
        padding-top: 28px;
    }

    .site-footer__main {
        grid-template-columns: 1fr;

        gap: 27px;
        padding-bottom: 24px;
    }

    .site-footer__brand,
    .site-footer__column,
    .site-footer__contact {
        grid-column: auto;

        align-items: flex-start;

        width: 100%;
        max-width: none;

        text-align: left;
    }

    .site-footer__logo {
        justify-content: flex-start;

        margin-bottom: 12px;
    }

    .site-footer__logo img {
        width: 195px;
    }

    .site-footer__description {
        max-width: 350px;
        margin-bottom: 16px;

        font-size: 0.8rem;
        line-height: 1.55;
        text-align: left;
    }

    .site-footer__socials {
        display: flex;
        align-items: center;
        justify-content: flex-start;
        flex-direction: row;
        flex-wrap: nowrap;

        gap: 10px;
    }

    .site-footer__social {
        width: 44px;
        height: 44px;

        flex-basis: 44px;
    }

    .site-footer__social img {
        width: 23px !important;
        height: 23px !important;
    }

    .site-footer__heading {
        margin-bottom: 14px;

        text-align: left;
    }

    .site-footer__links {
        align-items: flex-start;

        gap: 9px;

        text-align: left;
    }

    .site-footer__contact-link {
        justify-content: flex-start;

        font-size: 0.78rem;
        text-align: left;
    }

    .site-footer__contact-line {
        margin-top: 14px;
        margin-bottom: 12px;
    }

    .complaints-book {
        grid-template-columns:
            40px minmax(0, 1fr) 18px;

        min-height: 62px;
        padding: 8px 10px;
        gap: 8px;
    }

    .complaints-book__icon {
        width: 40px;
        height: 38px;
    }

    .complaints-book__icon svg {
        width: 33px;
        height: 33px;
    }

    .complaints-book__content {
        align-items: flex-start;

        text-align: left;
    }

    .complaints-book__content strong {
        font-size: 0.74rem;
    }

    .complaints-book__content small {
        font-size: 0.6rem;
    }

    .site-footer__bottom {
        align-items: flex-start;

        padding: 16px 0;

        text-align: left;
    }

    .site-footer__copyright {
        width: 100%;

        text-align: left;
    }

    .site-footer__legal {
        align-items: flex-start;
        flex-direction: column;
        justify-content: flex-start;

        width: 100%;
        gap: 9px;

        text-align: left;
    }

    .site-footer__legal > span {
        display: none;
    }
}