﻿@media (max-width: 1500px) {
    .section-3 .div-card-container .card {
        width: 190px;
    }
}

/* RESPONSIVE M */
@media screen and (max-width: 1269px) {
    /* SECCION 1 */
    #section1 .izquierda {
        width: 95%;
        max-width: 92vw;
    }

    #section1 .derecha {
        width: 5%;
    }

    #section1 .izquierda .title {
        height: 30%;
    }

        #section1 .izquierda .title h1 {
            padding-left: 7%;
            padding-top: 12rem;
            font-size: 6rem;
        }

    #section1 .izquierda .subtitle {
        height: 30%;
        padding-top: 2rem;
        padding-bottom: 0;
    }

        #section1 .izquierda .subtitle p {
            padding-left: 7%;
            font-size: 1.125rem;
            max-width: 65vw;
        }

    #section1 .izquierda .div-btn {
        height: 40%;
        padding-bottom: 5rem;
        padding-left: 7%;
    }

        #section1 .izquierda .div-btn .btn {
            font-size: 2.25rem;
            border-radius: 26px;
        }

    #BtnMisMascotas .flecha {
        font-size: 2.25rem;
    }

    /* SECCION 2 */
    .section-2 .div-centro {
        width: 90%;
        height: 80%;
        align-items: start;
    }

    .section-2 .div-top {
        height: 67%;
        display: flex;
        flex-direction: column;
    }

    .section-2 .div-top-left {
        height: 50%;
        width: 100%;
        justify-content: start;
        align-items: end;
        padding-left: 5vw;
        margin-left: 0;
        padding-top: 0;
        padding-bottom: 2rem;
    }

        .section-2 .div-top-left img {
            width: 170px;
            height: 170px;
        }

    .section-2 .div-top-right {
        height: 50%;
        width: 100%;
        align-content: start;
    }

        .section-2 .div-top-right h2 {
            font-size: 3.875rem;
            width: 50vw;
            max-width: 1200px;
        }

        .section-2 .div-top-right p {
            width: 80vw;
            max-width: 1200px;
            font-size: 1.125rem;
        }

    .section-2 .div-top .div-title {
        height: 14vh;
        margin-left: 0;
        margin-top: 0;
        padding-right: 0;
        padding-left: 5vw;
        justify-content: start;
        align-items: center;
    }

        .section-2 .div-top .div-title h2 br {
            display: block;
        }

    .section-2 .div-top .div-text {
        height: 10vh;
        padding-top: 0;
        margin-left: 0;
        padding-right: 0;
        padding-left: 5vw;
        justify-content: start;
    }

    .section-2 .div-bottom {
        height: 33%;
        width: 70%;
        justify-content: start;
        align-content: start;
        align-items: start;
        padding-left: 5vw;
    }

        .section-2 .div-bottom .lbl-busquedas-activas {
            font-size: 3rem;
            line-height: 1.1;
        }

    /* SECCION 3 */

    

    /* SECCION 4 */
    #section4 {
        height: 90vh;
    }

    .section-4 .div-title {
        width: 100%;
        height: 20%;
        display: flex;
        align-items: end;
        padding: 0 0 3rem 2rem;
    }

        .section-4 .div-title h1 {
            font-size: 3.875rem;
        }

            .section-4 .div-title h1 br {
                display: none;
            }

    .section-4 .div-center {
        width: 90%;
        height: 60%;
        max-width: 692px;
        max-height: 615px;
        display: flex;
        flex-direction: column-reverse;
    }

        .section-4 .div-center .div-center-left {
            width: 100%;
            height: 60%;
            border-bottom-left-radius: 20px;
            border-bottom-right-radius: 20px;
        }

            .section-4 .div-center .div-center-left .div-subtitle {
                height: 55%;
                padding-bottom: 0;
            }

                .section-4 .div-center .div-center-left .div-subtitle p {
                    font-size: 1.125rem;
                }

            .section-4 .div-center .div-center-left .div-btn {
                height: 42%;
            }

                .section-4 .div-center .div-center-left .div-btn .btn {
                    width: 60%;
                    height: 40%;
                    border-radius: 20px;
                    border: 2px solid #e59523;
                    font-size: 2.25rem;
                }

                .section-4 .div-center .div-center-left .div-btn .btn-dark {
                    font-size: 2.25rem;
                    padding: 0 0 0 0;
                }

        .section-4 .div-center .div-center-right {
            width: 100%;
            height: 40%;
        }

    #section4 .div-center .div-center-right .div-img img {
        border-top-left-radius: 20px;
        border-top-right-radius: 20px;
        border-bottom-right-radius: 0px;
    }

    /* SECCION 5 */
    #section5 {
        height: 115vh;
    }

    .section-5 .div-center {
        width: 90%;
        height: 82%;
        justify-content: start;
    }

        .section-5 .div-center .div-title {
            padding: 0 0 0 2rem;
            height: 8%;
            width: 100%;
        }

            .section-5 .div-center .div-title h2 {
                font-size: 3.875rem;
                width: 100%;
            }

        .section-5 .div-center .div-subtitle {
            padding: 0 0 0 0;
            width: 100%;
            height: 28%;
            justify-items: center;
        }

            .section-5 .div-center .div-subtitle p {
                font-size: 1.125rem;
                padding: 1rem 2rem 0 2rem;
            }

        .section-5 .div-center .div-img {
            width: 100%;
            height: 64%;
            overflow: hidden;
            margin-top: 0;
            display: flex;
            justify-content: center;
            align-items: flex-end;
        }

    #section5 .div-center .div-img img {
        position: relative;
        width: 32rem;
        height: 32rem;
        border-radius: 50%;
        object-fit: cover;
        border: 1rem solid #f8f8f8;
    }
}

@media screen and (max-width: 1269px) {
    /* SECCION 1 */
    #section1 .izquierda {
        width: 95%;
        max-width: 92vw;
    }

    #section1 .derecha {
        width: 5%;
    }

    #section1 .izquierda .title {
        height: 30%;
        padding: 0;
    }

        #section1 .izquierda .title h1 {
            padding-left: 7%;
            padding-top: 12rem;
            font-size: 6rem;
        }

    #section1 .izquierda .subtitle {
        height: 30%;
        padding-top: 2rem;
        padding-bottom: 0;
    }

        #section1 .izquierda .subtitle p {
            padding-left: 7%;
            font-size: 1.3rem;
            max-width: 65vw;
        }

    #section1 .izquierda .div-btn {
        height: 40%;
        padding-bottom: 5rem;
        padding-left: 7%;
    }

        #section1 .izquierda .div-btn .btn {
            font-size: 2.25rem;
            border-radius: 26px;
        }

    #BtnMisMascotas .flecha {
        font-size: 2.25rem;
    }

    /* SECCION 2 */
    .section-2 .div-centro {
        width: 90%;
        height: 80%;
        align-items: start;
    }

    .section-2 .div-top {
        height: 65%;
        display: flex;
        flex-direction: column;
    }

    .section-2 .div-top-left {
        height: 50%;
        width: 100%;
        justify-content: start;
        align-items: end;
        padding-left: 5vw;
        margin-left: 0;
        padding-top: 0;
        padding-bottom: 2rem;
    }

    #section2 .div-top-left, #section2 .img-huellas-1 {
        display: none !important;
    }

    #section2 .img-huellas-2 {
        display: flex;
        width: 170px;
        height: 170px;
    }

        .section-2 .div-top-left img {
            width: 170px;
            height: 170px;
        }

    .section-2 .div-top-right {
        height: 100%;
        width: 100%;
        align-content: start;
    }

        .section-2 .div-top-right h2 {
            font-size: 60px;
            width: 50vw;
            max-width: 1200px;
        }

        .section-2 .div-top-right p {
            width: 80vw;
            max-width: 1200px;
            font-size: 1.125rem;
        }

    .section-2 .div-top .div-title {
        height: 75%;
        margin-left: 0;
        margin-top: 0;
        padding-right: 0;
        padding-left: 5vw;
        justify-content: center;
        align-items: flex-start;
        flex-direction: column;
    }

        .section-2 .div-top .div-title h2 br {
            display: block;
        }

    .section-2 .div-top .div-text {
        height: 25%;
        padding-top: 0;
        margin-left: 0;
        padding-right: 0;
        padding-left: 5vw;
        justify-content: flex-start;
        align-content: center;
        align-items: center;
    }

        .section-2 .div-top .div-text p {
            margin: 0;
            width: 600px;
        }

    .section-2 .div-bottom {
        height: 35%;
        width: 100%;
        justify-content: flex-start;
        align-content: center;
        align-items: center;
    }

        .section-2 .div-bottom .lbl-busquedas-activas {
            font-size: 45px;
            line-height: 1.1;
            max-width: 350px;
        }

    /* SECCION 3 */

    .section-3 .div-title h1 {
        font-size: 60px;
    }


    /* SECCION 4 */
    
    #section4 {
        height: 90vh;
    }

    .section-4 .div-title {
        width: 100%;
        height: 20%;
        display: flex;
        align-items: end;
        padding: 0 0 3rem 2rem;
    }

        .section-4 .div-title h1 {
            font-size: 3.875rem;
        }

            .section-4 .div-title h1 br {
                display: none;
            }

    .section-4 .div-center {
        width: 90%;
        height: 60%;
        max-width: 692px;
        max-height: 615px;
        display: flex;
        flex-direction: column-reverse;
    }

        .section-4 .div-center .div-center-left {
            width: 100%;
            height: 60%;
            border-bottom-left-radius: 20px;
            border-bottom-right-radius: 20px;
        }

            .section-4 .div-center .div-center-left .div-subtitle {
                height: 55%;
                padding-bottom: 0;
            }

                .section-4 .div-center .div-center-left .div-subtitle p {
                    font-size: 1.125rem;
                }

            .section-4 .div-center .div-center-left .div-btn {
                height: 42%;
            }

                .section-4 .div-center .div-center-left .div-btn .btn {
                    width: 60%;
                    height: 40%;
                    border-radius: 20px;
                    border: 2px solid #e59523;
                    font-size: 2.25rem;
                }

                .section-4 .div-center .div-center-left .div-btn .btn-dark {
                    font-size: 2.25rem;
                    padding: 0 0 0 0;
                }

        .section-4 .div-center .div-center-right {
            width: 100%;
            height: 40%;
        }

    #section4 .div-center .div-center-right .div-img img {
        border-top-left-radius: 20px;
        border-top-right-radius: 20px;
        border-bottom-right-radius: 0px;
    }

    /* SECCION 5 */
    #section5 {
        height: 115vh;
    }

    .section-5 .div-center {
        width: 90%;
        height: 82%;
        justify-content: start;
    }

        .section-5 .div-center .div-title {
            padding: 0 0 0 2rem;
            height: 8%;
            width: 100%;
        }

            .section-5 .div-center .div-title h2 {
                font-size: 3.875rem;
                width: 100%;
            }

        .section-5 .div-center .div-subtitle {
            padding: 0 0 0 0;
            width: 100%;
            height: 28%;
            justify-items: center;
        }

            .section-5 .div-center .div-subtitle p {
                font-size: 1.125rem;
                padding: 1rem 2rem 0 2rem;
            }

        .section-5 .div-center .div-img {
            width: 100%;
            height: 64%;
            overflow: hidden;
            margin-top: 0;
            display: flex;
            justify-content: center;
            align-items: flex-end;
        }

    #section5 .div-center .div-img img {
        position: relative;
        width: 32rem;
        height: 32rem;
        border-radius: 50%;
        object-fit: cover;
        border: 1rem solid #f8f8f8;
    }
}

@media (max-width: 1150px) {
    /* SECTION 3 */

    #section3 .section-3 {
        gap: 3rem;
    }

    .section-3 .div-title {
        /*align-items: flex-end;*/
        height: initial;
        padding: 0 0 0 3rem;
    }

            .section-3 .div-title h1 br {
                display: block;
            }

    .section-3 .div-card-container {
        /*padding-bottom: 0 !important;*/
        height: initial;
    }

        .section-3 .div-card-container .card {
            height: 250px;
        }

    .section-3 .div-title {
        padding: 0 0 0 2rem;
    }

    .section-3 .div-card-container {
        gap: 2rem;
    }

        .section-3 .div-card-container .card {
            height: 200px;
            width: 200px;
            box-shadow: 0 2.36px 10.82px #00000015;
        }

        .section-3 .div-card-container img {
            width: 60px;
            height: 60px;
        }

        .section-3 .div-card-container h5 {
            padding-bottom: 15px;
            font-size: 1.5rem;
        }
}

@media screen and (max-width: 768px) {

    /* SECCION 1 */

    #carouselPortada1 {
        display: none;
    }

    #carouselPortada2 {
        display: flex;
    }

    #section1 .izquierda {
        min-width: 306px;
    }

    #section1 .izquierda .title, #section1 .izquierda .subtitle {
        height: 30%;
        padding-bottom: 0;
    }

    #section1 .izquierda .div-btn {
        height: 40%;
        padding: 0 0 0 3rem;
        justify-content: flex-start;
    }

    #section1 .izquierda .subtitle p {
        min-width: 300px;
    }

    #section1 .izquierda .title h1 {
        font-size: 11vw;
        min-width: 300px;
    }

    #section1 .izquierda .div-btn .btn {
        border-radius: 14px;
        font-size: 40px;
        height: 40%;
        min-width: 280px;
        width: 90%;
    }

    #section1 .izquierda .div-btn span {
        font-size: 40px;
    }

    /* SECCION 2 */

    #section2 .section-2 {
        min-width: 350px !important;
    }

    #section2 .div-title {
        flex-direction: row;
        align-items: center;
        justify-content: flex-start;
        height: 60%;
    }

    #section2 .div-title .img-huellas-2 {
        width: 22vw;
        height: 22vw;
    }

    #section2 .div-title h2 {
        font-size: 9vw;
    }

    #section2 .div-text {
        height: 40%;
    }

    #section2 .div-text p {
        min-width: 300px;
        max-width: 400px;
    }

    #section2 .div-bottom span {
        font-size: 6.5vw;
    }

    /* SECCION 3 */

    .section-3 .div-card-container .card {
        width: 150px;
        height: 150px;
    }

    .section-3 .div-card-container img {
        width: 35px;
        height: 35px;
    }

    .section-3 .div-card-container h5 {
        padding-bottom: 0;
        font-size: 1rem;
    }
}

@media screen and (max-width: 555px) {

    /* SECCION 1 */

    #section1 .izquierda .title {
        align-items: flex-end;
        justify-content: center;
        align-content: center;
    }

        #section1 .izquierda .title h1 {
            max-width: 100vw;
            font-size: 55px;
        }

    #section1 .izquierda .subtitle {
        padding: 0 !important;
        align-items: center;
    }

        #section1 .izquierda .subtitle p {
            padding-left: 7%;
            font-size: 4vw;
            max-width: 80vw;
        }

        #section1 .izquierda .subtitle br {
            display: none;
        }

    #section1 .izquierda .div-btn {
        padding-bottom: 5rem;
        padding-left: 7%;
    }

        #section1 .izquierda .div-btn .btn, #section1 .izquierda .div-btn span {
            font-size: 35px;
        }

    /* SECCION 2 */
    

    /* SECCION 3 */

    #section3 {
        height: 100vh !important;
    }

    .section-3 .div-title h1 {
        font-size: 35px;
    }

    /* SECCION 4 */

    .section-4 .div-title {
        width: 100%;
        height: 8%;
        display: flex;
        align-items: end;
        padding: 0 0 1rem 2rem;
    }

        .section-4 .div-title h1 {
            font-size: 2rem;
        }

            .section-4 .div-title h1 br {
                display: none;
            }

    .section-4 .div-center {
        width: 90%;
        height: 74%;
        display: flex;
        flex-direction: column-reverse;
        min-width: 0;
        min-height: 0;
        padding: 0 0 1rem 0;
    }

        .section-4 .div-center .div-center-left {
            width: 100%;
            height: 60%;
            border-bottom-left-radius: 20px;
            border-bottom-right-radius: 20px;
        }

            .section-4 .div-center .div-center-left .div-subtitle {
                height: 80%;
                padding: 1.5rem;
                align-content: center;
            }

                .section-4 .div-center .div-center-left .div-subtitle p {
                    font-size: 1rem;
                }

            .section-4 .div-center .div-center-left .div-btn {
                width: 100%;
                height: 40%;
                display: flex;
                justify-content: center;
                align-items: center;
            }

                .section-4 .div-center .div-center-left .div-btn .btn-dark {
                    font-size: 1.3125rem;
                    padding: 0 0 0 0;
                }

        .section-4 .div-center .div-center-right {
            width: 100%;
            height: 40%;
        }

    #section4 .div-center .div-center-right .div-img img {
        border-top-left-radius: 20px;
        border-top-right-radius: 20px;
        border-bottom-right-radius: 0px;
    }


    /* SECCION 5 */
    #section5 {
        height: 120vh;
        height: 120dvh;
    }

    .section-5 .div-center {
        width: 90%;
        height: 86%;
        justify-content: start;
    }

        .section-5 .div-center .div-title {
            padding: 0 0 0 2rem;
            height: 8%;
            width: 100%;
        }

            .section-5 .div-center .div-title h2 {
                font-size: 2rem;
                width: 100%;
            }

        .section-5 .div-center .div-subtitle {
            padding: 0 0 0 0;
            width: 100%;
            height: 38%;
            justify-items: center;
        }

            .section-5 .div-center .div-subtitle p {
                font-size: 1rem;
                padding: 1rem 2rem 0 2rem;
            }

        .section-5 .div-center .div-img {
            width: 100%;
            height: 48%;
            overflow: hidden;
            margin-top: 0;
            display: flex;
            justify-content: center;
            align-items: flex-end;
        }

    #section5 .div-center .div-img img {
        position: relative;
        width: 16rem;
        height: 16rem;
        border-radius: 50%;
        object-fit: cover;
        border: 0.5rem solid #f8f8f8;
    }
}

@media (max-width: 490px) {
    #section1 .izquierda .div-btn .btn, #section1 .izquierda .div-btn span {
        font-size: 30px;
    }
}

@media (max-width: 474px) {
    #section2 .div-title {
        align-items: flex-end;
        height: 50%;
    }
    
    #section2 .div-text {
        height: 50%;
    }

    #section2 .div-title .img-huellas-2 {
        width: 88px;
        height: 88px;
    }
    
    #section2 .div-top h2 {
        font-size: 35px;
    }

    #section2 .div-top p {
        font-size: 16px;
        padding: 0 2rem 0 0;
    }

    #section2 .div-bottom span {
        font-size: 30px;
        width: 320px;
        max-width: 320px !important;
    }
}

@media (max-width: 400px) {
    #section1 .izquierda .title h1 .br-400 {
        display: block;
    }

    #section1 .izquierda .title h1 {
        font-size: 55px;
        width: 100%;
    }
}

@media (max-width: 376px) {
    #section1 .izquierda .subtitle p {
        font-size: 1rem;
    }
}


#section4, #section4 * {
    /*border: 1px solid red;*/
}