/* ============================================
   RESPONSIVE MÓVIL Y TABLET (hasta 1200px)
   ============================================ */
@media screen and (max-width: 1200px) {
    body {
        scrollbar-width: none;
    }

    @keyframes slideCardX {
        from {
            opacity: 0;
            transform: translateX(50px) scale(0.9);
        }

        to {
            opacity: 1;
            transform: translateX(0) scale(1);
        }
    }

    @keyframes floatX {

        0%,
        100% {
            transform: translateX(12px);
        }

        50% {
            transform: translateX(-12px);
        }
    }

    :root {
        --cien: 100%;
        --negro: black;
        --blanco: white;
        --corporativoPrincipal: #134c7e;
        --corporativoComplementario: #2180bb;
    }

    section.nosotros {
        header.header {
            max-height: 18%;
            align-items: center;
            border-bottom-left-radius: 15px;
            border-bottom-right-radius: 15px;

            button.hamburger-menu {
                width: 45px;
                height: 45px;
                padding-top: 10px;
                margin-right: 10%;
                margin-top: 9%;
            }

            div.logo {
                width: 42%;
                height: 60%;
                margin-top: 8%;

                img {
                    width: 160px;
                }
            }
        }

        .contenido-nosotros {
            min-height: 82%;

            .mountain {
                width: 82%;
                height: 35%;
                margin-left: -55px;

                img {
                    width: var(--cien);
                    height: var(--cien);
                }
            }

            .text {
                width: 30%;
                height: var(--cien);
                margin-left: -19%;
                color: var(--blanco);
                display: flex;
                justify-content: start;
                align-items: end;
                flex-direction: column;
                text-align: end;
                gap: 20px;
                padding-top: 20%;

                h1 {
                    font-weight: bold;
                    width: 250px;
                    font-size: 39px;
                    line-height: 1;
                    letter-spacing: 2px;
                }

                h3 {
                    line-height: 1;
                    font-weight: 300;
                    width: 240px;
                    font-size: 15px;
                    line-height: 1.15;
                    margin-right: 10px;
                }
            }
        }
    }

    section.servicios {
        div.title-servicios {
            width: 90%;
            height: 15%;
            border-bottom: 2px solid var(--blanco);
            display: flex;
            justify-content: center;
            align-items: end;

            h1 {
                width: 110%;
                color: var(--blanco);
                font-weight: bold;
                font-size: 20px;
                letter-spacing: 3px;
                text-align: center;
                white-space: nowrap;
            }
        }

        div.tarjetas-servicios {
            width: var(--cien);
            height: 85%;
            display: flex;
            justify-content: center;
            align-items: center;
            flex-direction: column;
            gap: 10px;
            padding-bottom: 30px;

            .process,
            .indubatch,
            .merco {
                width: 50%;
                max-height: 22%;
                margin-bottom: 20px;

                img {
                    width: 60%;
                }
            }

            .process,
            .indubatch,
            .merco {
                animation: slideCard none;
            }

            .process {
                animation: slideCardX 0.6s ease-out 0.1s both, floatX 3s ease-in-out infinite;
            }

            .indubatch {
                animation: slideCardX 0.6s ease-out 0.2s both, floatX 4s ease-in-out infinite;
            }

            .merco {
                animation: slideCardX 0.6s ease-out 0.3s both, floatX 5s ease-in-out infinite;
            }
        }
    }

    section.clientes {
        flex-direction: column;

        div.title-clientes {
            width: var(--cien);
            height: 28%;
            display: flex;
            justify-content: center;
            align-items: center;
            padding-left: 0;
            flex-direction: column;

            h1 {
                transform: rotate(0);
                color: var(--blanco);
                letter-spacing: 2px;
                font-size: 22px;
                min-width: 80%;
                white-space: nowrap;
                border-bottom: 2px solid var(--blanco);
                text-align: center;
                margin-top: 85px;
                margin-bottom: 15px;
            }

            h2 {
                display: block !important;
                color: var(--blanco);
                max-width: 75%;
                text-align: center;
                line-height: 1.05;
                font-size: 15px;
                font-weight: 300;
            }
        }

        .tratamiento-logo {
            height: 4%;
            width: 70%;
            display: flex;
            justify-content: center;
            align-items: center;

            p {
                color: rgba(255, 255, 255, 0.482);
                max-width: 300px;
                min-width: 300px;
                transform: rotate(0deg);
                text-align: center;
                margin-top: -100px;
                font-size: 10px;
            }
        }

        .carrusel {
            width: var(--cien);
            max-height: 80%;
            display: flex;
            justify-content: center;
            align-items: center;
            flex-direction: column;
            overflow: hidden;


            .tarjetas-carrusel {
                width: 100%;
                height: 90%;
                display: flex;
                justify-content: start;
                align-items: center;
                flex-direction: column;
                overflow: hidden;
                position: relative;
                padding-top: 10%;
                gap: 0;

            }

            .top,
            .bottom {
                width: 100%;
                height: 35%;
                display: flex;
                justify-content: start;
                align-items: center;
                gap: 35px;
                padding-left: 0;
                overflow: hidden;
            }

            .top {
                padding-left: 5%;
            }

            .bottom {
                padding-left: 22%;
            }

            .tarjeta {
                min-width: 150px;
                width: 150px;
                height: 150px;
                max-height: 150px;
                min-height: 150px;
                flex-shrink: 0;

                .imagen {
                    width: 42%;
                    height: 55%;
                }

                .info {
                    height: 5%;

                    h1 {
                        font-size: 11px;
                        margin-top: 8px;
                    }

                    h3 {
                        font-size: 7px;
                    }
                }
            }
        }
    }

    section.contacto {
        height: 70%;
        background-color: var(--corporativoPrincipal);
        display: flex;
        justify-content: center;
        align-items: center;
        flex-direction: column;
        gap: 40px;

        div.siguenos,
        div.contactanos {
            height: 35%;
            width: 70%;
            display: flex;
            justify-content: center;
            align-items: center;
            flex-direction: column;

            h1 {
                color: var(--blanco);
            }
        }

        .box-bottom,
        .box-top {
            width: 70%;
            height: 80%;
            justify-content: center;
            align-items: center;
            display: flex;
            flex-direction: column;
        }

        .box-bottom {
            border-top: 2px solid var(--blanco);
            border-radius: 10px;
            color: var(--blanco);
            justify-content: start;
            padding-top: 10px;

            h6 {
                font-size: 12px;
            }
        }

        .box-top {
            border-bottom: 2px solid var(--blanco);
            border-radius: 10px;
            margin-bottom: 10px;
        }

        #siguenos {
            flex-direction: row;
            padding: 0 20px 5px 20px;
            gap: 35px;
            align-items: end;
        }

        a.redes {
            width: 35px;
            height: 35px;
        }

        a.contacto {
            text-decoration: underline;
            font-size: 15px;
        }

        div.contactanos {
            margin-bottom: 0;
        }
    }
}


@media screen and (min-width: 801px) and (max-width: 1200px) {
    section.nosotros {
        header.header {
            max-height: 20%;

            button.hamburger-menu {
                width: 50px;
                height: 50px;
                margin-right: 8%;
                margin-top: 7%;
            }

            div.logo {
                width: 38%;
                height: 65%;
                margin-top: 7%;

                img {
                    width: 200px;
                }
            }
        }

        .contenido-nosotros {
            .mountain {
                width: 75%;
                height: 40%;
                margin-left: -70px;
            }

            .text {
                width: 35%;
                margin-left: -90px;
                padding-top: 18%;
                gap: 22px;

                h1 {
                    width: 320px;
                    font-size: 50px;
                    letter-spacing: 2.5px;
                }

                h3 {
                    width: 350px;
                    font-size: 18px;
                    line-height: 1.18;
                }
            }
        }
    }

    section.servicios {
        div.title-servicios {
            height: 16%;

            h1 {
                width: 105%;
                font-size: 28px;
                letter-spacing: 3.5px;
            }
        }

        div.tarjetas-servicios {
            height: 84%;
            gap: 12px;

            .process,
            .indubatch,
            .merco {
                width: 48%;
                max-height: 24%;
                margin-bottom: 22px;

                img {
                    width: 62%;
                }
            }
        }
    }

    section.clientes {
        div.title-clientes {
            height: 16%;

            h1 {
                font-size: 35px;
                letter-spacing: 2.5px;
                width: 88%;
                margin-top: 90px;
            }
        }

        .tratamiento-logo {
            height: 4%;
            width: 70%;
            display: flex;
            justify-content: center;
            align-items: center;

            p {
                color: rgba(255, 255, 255, 0.482);
                max-width: 800px;
                min-width: 800px;
                transform: rotate(0deg);
                text-align: center;
                margin-top: -100px;
            }
        }

        .carrusel {
            height: 100%;

            .top,
            .bottom {
                gap: 40px;
                height: 45%;
            }

            .tarjetas-carrusel {
                justify-content: start;
                width: 100%;
                height: 90%;

            }

            .tarjeta {
                min-width: 200px;
                width: 200px;
                height: 200px;
                max-height: 200px;
                min-height: 200px;
                flex-shrink: 0;

                .imagen {
                    width: 42%;
                }

                .info {
                    h1 {
                        font-size: 14px;
                        margin-top: 8px;
                    }

                    h3 {
                        font-size: 9px;
                    }
                }
            }
        }
    }

    section.contacto {
        height: 72%;
        gap: 42px;

        div.siguenos,
        div.contactanos {
            height: 35%;
            width: 68%;

            h1 {
                font-size: 20px;
            }
        }

        .box-bottom h6 {
            font-size: 13px;
        }

        #siguenos {
            gap: 37px;
            padding: 0 22px 6px 22px;
        }

        a.redes {
            width: 37px;
            height: 37px;
        }

        a.contacto {
            font-size: 16px;
        }

        div.contactanos {
            margin-bottom: 0;
        }
    }

}