/**Contenido**/
.sombra{
    -webkit-box-shadow: -9px 8px 15px 8px rgba(0,0,0,0.56);
    -moz-box-shadow: -9px 8px 15px 8px rgba(0,0,0,0.56);
    box-shadow: -9px 8px 15px 8px rgba(0,0,0,0.56);
    background-color: #ffff;
    border-radius: .2rem;
}

/**Contenido servicio**/
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+Display&family=Old+Standard+TT&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Old+Standard+TT&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Architects+Daughter&family=Open+Sans:wght@300&display=swap');

/*Servicios*/
#servicios{
    background-color: #fbe122;
    width: 100%;
    height: 100vh;
}

.img-1{
    background-image: url(../Imagenes/Servicios/camionetaColorizada.png);
    background-size: cover;
    background-repeat: no-repeat;
}

.img-2{
    background-image: url(../Imagenes/Servicios/aeropuertoColorizada.png);
    background-size: cover;
    background-position: 40% 10%;
    background-repeat: no-repeat;
}

.img-3{
    background-image: url(../Imagenes/Servicios/conciertoColorizada.png);
    background-size: cover;
    background-repeat: no-repeat;
}

.img-4{
    background-image: url(../Imagenes/Servicios/eventoColorizada.png);
    background-size: cover;
    background-repeat: no-repeat;
}

.img-5{
    background-image: url(../Imagenes/Servicios/toursColorizada.png);
    background-size: cover;
    background-repeat: no-repeat;
}

.img-6{
    background-image: url(../Imagenes/Servicios/ejecutivoColorizada.png);
    background-size: cover;
    background-position: 70%;
    background-repeat: no-repeat;
}

.container .products-container .product{
    text-align: center;
    transition: all .5s ease;
    box-shadow: 0 .5rem 1rem rgba(0, 0, 0, .5);
    outline: .1rem solid #ccc;
    outline-offset: -1.5rem;
    cursor: pointer;
    border-radius: 50%;
    height: 19em;
    width: 19em;
    margin-bottom: .5rem;
    display: flex;
    align-items: flex-end;
    justify-content: center;
    z-index: 8;
}

.container .products-container .product:hover{
    outline: .2rem solid #222;
    outline-offset: 0;
}

.container .products-container .product h3{
    padding:  0 auto;
    color: #fbe122;
    font-family: 'Noto Sans Display', sans-serif;
    font-size: 1.5em;
    font-weight: 700;
    text-align: center;
    margin-bottom: 1rem;
    -webkit-text-stroke: 1px black;
}

.container .title{
    width: 58rem;
    height: 20rem;
    border: #222 solid .3rem;
    position: absolute;
    margin-top: 6.5em;
    margin-left: 7em;
    z-index: 1;
}

.container .products-container{
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(11.3rem, 1fr));
    grid-template-rows: repeat(2,1fr);
    margin-left: 2.5rem;
}

.container .products-container .product.img-1{
    grid-column: 1 / 6;
    grid-row: 1;
}

.container .products-container .product.img-2{
    grid-column: 3 / 6;
    grid-row: 1;
}

.container .products-container .product.img-3{
    grid-column: 5 / 6;
    grid-row: 1;
}

.container .products-container .product.img-4{
    grid-column: 2 / 6;
    grid-row: 2;
}

.container .products-container .product.img-5{
    grid-column: 4 / 6;
    grid-row: 2;
}

.container .products-container .product.img-6{
    grid-column: 6 / 6;
    grid-row: 2;
}

/*Media*/
@media(min-width:1440px){
    .container .products-container .product{
        text-align: center;
        transition: all .5s ease;
        box-shadow: 0 .5rem 1rem rgba(0, 0, 0, .5);
        outline: .1rem solid #ccc;
        outline-offset: -1.5rem;
        cursor: pointer;
        border-radius: 50%;
        height: 24rem;
        width: 24rem;
        margin-top: 2rem;
        margin-bottom:1rem;
        display: flex;
        align-items: flex-end;
        justify-content: center;
        z-index: 8;
    }
    .container .title{
        width: 73%;
        height: 50%;
        border: #222 solid .3rem;
        position: absolute;
        margin-top: 9em;
        margin-left: 8.5em;
        z-index: 1;
    }
}

@media(max-width:800px){
    .container .products-container{
        display: grid;
        grid-template-columns: repeat(2,1fr);
        margin-left: 1rem;
    }
    .container .products-container{
        display: grid;
        grid-template-columns: repeat(auto-fill, minmax(1.7rem, 1fr));
        grid-template-columns: repeat(2,1fr);   
        column-gap: .5rem;
    }
    .container .products-container .product.img-1{
        grid-column: 1 / 2;
        grid-row: 1;
    }
    
    .container .products-container .product.img-2{
        grid-column: 2 / 2;
        grid-row: 1;
    }
    
    .container .products-container .product.img-3{
        grid-column: 1/ 2;
        grid-row:2;
    }
    
    .container .products-container .product.img-4{
        grid-column: 2 / 2;
        grid-row: 2;
    }
    
    .container .products-container .product.img-5{
        grid-column: 1 / 2;
        grid-row: 3;
    }
    
    .container .products-container .product.img-6{
        grid-column: 2 / 2;
        grid-row: 3;
    }
    .container .products-container .product{
        text-align: center;
        transition: all .5s ease;
        box-shadow: 0 .5rem 1rem rgba(0, 0, 0, .5);
        outline: .1rem solid #ccc;
        outline-offset: -1.5rem;
        cursor: pointer;
        border-radius: 50%;
        height: 22.7em;
        width: 22.7rem;
        display: flex;
        align-items: flex-end;
        justify-content: center;
        margin-top: 1.5rem;
        margin-bottom: 1rem;
        z-index: 8;
    }
    .container .title{
        width: 50%;
        height: 70%;
        border: #222 solid .3rem;
        position: absolute;
        margin-top: 12rem;
        margin-left: 12rem;
        z-index: 1;
    }
}

@media (max-width:768px){
    .container .products-container{
        display: grid;
        grid-template-columns: repeat(2,1fr);
        margin-left: 0;
    }

    .container .products-container{
        display: grid;
        grid-template-columns: repeat(auto-fill, minmax(1.3rem, 1fr));
        grid-template-columns: repeat(2,1fr);   
        column-gap: 1rem;
    }

    .container .products-container .product.img-1{
        grid-column: 1 / 2;
        grid-row: 1;
    }
    
    .container .products-container .product.img-2{
        grid-column: 2 / 2;
        grid-row: 1;
    }
    
    .container .products-container .product.img-3{
        grid-column: 1/ 2;
        grid-row: 2;
    }
    
    .container .products-container .product.img-4{
        grid-column: 2 / 2;
        grid-row: 2;
    }
    
    .container .products-container .product.img-5{
        grid-column: 1 / 2;
        grid-row: 3;
    }
    
    .container .products-container .product.img-6{
        grid-column: 2 / 2;
        grid-row: 3;
    }
    .container .products-container .product{
        text-align: center;
        transition: all .5s ease;
        box-shadow: 0 .5rem 1rem rgba(0, 0, 0, .5);
        outline: .1rem solid #ccc;
        outline-offset: -1.5rem;
        cursor: pointer;
        border-radius: 50%;
        height: 20rem;
        width: 20rem;
        display: flex;
        align-items: flex-end;
        justify-content: center;
        margin: .5rem 2rem;
        z-index: 8;
    }
    .container .title{
        width: 53%;
        height: 67%;
        border: #222 solid .3rem;
        position: absolute;
        margin-top: 11rem;
        margin-left: 12rem;
        z-index: 1;
    }
}

@media(max-width:600px){
    .container .products-container{
        display: grid;
        grid-template-rows: repeat(2,1fr);
        margin-left: 0;
    }
    .container .products-container{
        display: grid;
        grid-template-columns: repeat(auto-fill, minmax(1em, 1fr));
        grid-template-columns: repeat(2,1fr);   
        column-gap: 1rem;
    }
    .container .products-container .product.img-1{
        grid-column: 1 / 6;
        grid-row: 1;
    }
    
    .container .products-container .product.img-2{
        grid-column: 2 / 6;
        grid-row: 1;
    }
    
    .container .products-container .product.img-3{
        grid-column: 1/ 6;
        grid-row: 2;
    }
    
    .container .products-container .product.img-4{
        grid-column: 2 / 6;
        grid-row: 2;
    }
    
    .container .products-container .product.img-5{
        grid-column: 1 / 6;
        grid-row: 3;
    }
    
    .container .products-container .product.img-6{
        grid-column: 2 / 6;
        grid-row: 3;
    }
    .container .products-container .product{
        text-align: center;
        transition: all .5s ease;
        box-shadow: 0 .5rem 1rem rgba(0, 0, 0, .5);
        outline: .1rem solid #ccc;
        outline-offset: -1.5rem;
        cursor: pointer;
        border-radius: 50%;
        height: 16rem;
        width: 16rem;
        display: flex;
        align-items: flex-end;
        justify-content: center;
        margin: 2.5rem 2rem;
        z-index: 8;
    }
    .container .title{
        width: 47%;
        height: 66%;
        border: #222 solid .3rem;
        position: absolute;
        margin-top: 10rem;
        margin-left: 9.9rem;
        z-index: 1;
    }
}

@media (max-width: 468px){ 
    .container .products-container{
        display: grid;
        grid-template-columns: repeat(2,1fr);
        margin-left: 0;
    }

    .container .products-container{
        display: grid;
        grid-template-columns: repeat(auto-fill, minmax(1.3rem, 1fr));
        grid-template-columns: repeat(2,1fr);   
        column-gap: 1rem;
    }

    .container .products-container .product.img-1{
        grid-column: 1 / 2;
        grid-row: 1;
    }
    
    .container .products-container .product.img-2{
        grid-column: 2 / 2;
        grid-row: 1;
    }
    
    .container .products-container .product.img-3{
        grid-column: 1/ 2;
        grid-row: 2;
    }
    
    .container .products-container .product.img-4{
        grid-column: 2 / 6;
        grid-row: 2;
    }
    
    .container .products-container .product.img-5{
        grid-column: 1 / 2;
        grid-row: 3;
    }
    
    .container .products-container .product.img-6{
        grid-column: 2 / 2;
        grid-row: 3;
    }

    .container .products-container .product{
        text-align: center;
        transition: all .5s ease;
        box-shadow: 0 .5rem 1rem rgba(0, 0, 0, .5);
        outline: .1rem solid #ccc;
        outline-offset: -1.5rem;
        cursor: pointer;
        border-radius: 50%;
        height: 12.3em;
        width: 12.3em;
        display: flex;
        align-items: flex-end;
        justify-content: center;
        margin: 3em 0em;
        z-index: 8;
    }

    .container .title{
        width: 52%;
        height: 38rem;
        border: #222 solid .3rem;
        position: absolute;
        margin-top: 8.7rem;
        margin-left: 6rem;
        z-index: 1;
    }
}

@media (max-width: 390px){ 
    .container .products-container{
        display: grid;
        grid-template-columns: repeat(2,1fr);
        margin-left: 0;
    }

    .container .products-container{
        display: grid;
        grid-template-columns: repeat(auto-fill, minmax(1.3rem, 1fr));
        grid-template-columns:  repeat(2,1fr);   
        column-gap: 1rem;
    }

    .container .products-container .product.img-1{
        grid-column: 1 / 2;
        grid-row: 1;
    }
    
    .container .products-container .product.img-2{
        grid-column: 2 / 2;
        grid-row: 1;
    }
    
    .container .products-container .product.img-3{
        grid-column: 1/ 2;
        grid-row: 2;
    }
    
    .container .products-container .product.img-4{
        grid-column: 2 / 6;
        grid-row: 2;
    }
    
    .container .products-container .product.img-5{
        grid-column: 1 / 2;
        grid-row: 3;
    }
    
    .container .products-container .product.img-6{
        grid-column: 2 / 2;
        grid-row: 3;
    }

    .container .products-container .product{
        text-align: center;
        transition: all .5s ease;
        box-shadow: 0 .5rem 1rem rgba(0, 0, 0, .5);
        outline: .1rem solid #ccc;
        outline-offset: -1.5rem;
        cursor: pointer;
        border-radius: 50%;
        height: 11.5em;
        width: 11.5em;
        display: flex;
        align-items: flex-end;
        justify-content: center;
        margin: 3em .1em;
        z-index: 8;
    }

    .container .title{
        width: 52%;
        height: 35rem;
        border: #222 solid .3rem;
        position: absolute;
        margin-top: 8rem;
        margin-left: 6rem;
        z-index: 1;
    }
}

@media (max-width: 360px){ 
    .container .products-container{
        display: grid;
        grid-template-columns: repeat(2,1fr);
        margin-left: 0;
    }

    .container .products-container{
        display: grid;
        grid-template-columns: repeat(auto-fill, minmax(1.3rem, 1fr));
        grid-template-columns: repeat(2,1fr);   
        column-gap: 1rem;
    }

    .container .products-container .product.img-1{
        grid-column: 1 / 2;
        grid-row: 1;
    }
    
    .container .products-container .product.img-2{
        grid-column: 2 / 2;
        grid-row: 1;
    }
    
    .container .products-container .product.img-3{
        grid-column: 1/ 2;
        grid-row: 2;
    }
    
    .container .products-container .product.img-4{
        grid-column: 2 / 6;
        grid-row: 2;
    }
    
    .container .products-container .product.img-5{
        grid-column: 1 / 2;
        grid-row: 3;
    }
    
    .container .products-container .product.img-6{
        grid-column: 2 / 2;
        grid-row: 3;
    }

    .container .products-container .product{
        text-align: center;
        transition: all .5s ease;
        box-shadow: 0 .5rem 1rem rgba(0, 0, 0, .5);
        outline: .1rem solid #ccc;
        outline-offset: -1.5rem;
        cursor: pointer;
        border-radius: 50%;
        height: 10em;
        width: 10em;
        display: flex;
        align-items: flex-end;
        justify-content: center;
        margin: 3em .3em;
        z-index: 8;
    }

    .container .title{
        width: 52%;
        height: 32.5rem;
        border: #222 solid .3rem;
        position: absolute;
        margin-top: 8rem;
        margin-left: 5.5rem;
        z-index: 1;
    }
}

/*@media(max-width: 1200px){

}

@media(max-width:992px){

}

@media(max-width: 768px){

}

@media(max-width: 576px){

}*/

/*Inicia el popup del contenido*/
@import url('https://fonts.googleapis.com/css2?family=Bodoni+Moda&family=DM+Sans&display=swap');
.products-preview{
    position: fixed;
    top: 0; left: 0;
    min-height: 100vh;
    width: 100%;
    background: rgba(0, 0, 0, .8);
    display: none;
    justify-content: center;
    transition: 5s ease all;
    z-index: 10;
}

.products-preview .preview.active{
    display: inline-block;
}

.products-preview .preview{
    display: none;
    padding: 2rem;
    text-align: center;
    color: #ffffffff;
    position: relative;
    margin: 2rem;
    width: 80vw;
    max-height: 90rem;
    border-radius: 2rem;
    transition: 5s ease all;
    z-index: 10;
}

.products-preview .preview.s-1{
    background: url(../Imagenes/Servicios/Popup/T_turistico.jpeg) no-repeat center center;
    background-size: cover;
}

.products-preview .preview.s-2{
    background: url(../Imagenes/Servicios/Popup/T_aeropuerto.jpeg) no-repeat center center;
    background-size: cover;
}

.products-preview .preview.s-3{
    background: url(../Imagenes/Servicios/Popup/T_concierto.jpeg) no-repeat center center;
    background-size: cover;
}

.products-preview .preview.s-4{
    background: url(../Imagenes/Servicios/Popup/T_eventos.jpeg) no-repeat center center;
    background-size: cover;
}

.products-preview .preview.s-5{
    background: url(../Imagenes/Servicios/Popup/T_tours.jpeg) no-repeat center center;
    background-size: cover;
}

.products-preview .preview.s-6{
    background: url(../Imagenes/Servicios/Popup/T_ejecutivo.jpeg) no-repeat center center;
    background-size: cover;
}

.products-preview .preview .boton-p{
    position: absolute;
    background: #30B907;
    color: #d11774;
    text-decoration: none;
    top: 1rem; left: 1rem;
    font-size: 1.5rem;
    border-radius: 3rem;
    transition: all 700ms ease;
    padding: .5rem 1rem;
}

.products-preview .preview .boton-p:hover{
    background-color: #d11774;
    color: #30B907;
}

.products-preview .preview .fa-xmark{
    position: absolute;
    top: 1rem; right: 1.5rem;
    cursor: pointer;
    color: #ffff;
    font-size: 3rem;
    background: none;
}

.products-preview .preview .fa-xmark:hover{
    transform: rotate(90deg);
    color: #dad727;
}

.products-preview .preview .grid-pre .btn-San{
    position: absolute;
    top: 13.2rem;
    left: 5rem;
    padding: .8rem 1rem;
    background-color: #222;
    color: #fbe122;
    text-decoration: none;
    font-size: 1.3rem;
    border-radius: 3rem;
    transition: all 500ms ease;
    font-family: 'DM Sans', sans-serif;
}

.products-preview .preview .grid-pre .btn-San:hover{
    color: #222;
    background-color: #fbe122;
}

.products-preview .preview .grid-pre .btn-Qro{
    position: absolute;
    top: 13.2rem;
    left: 18rem;
    padding: .8rem 1rem;
    background-color: #222;
    color: #fbe122;
    text-decoration: none;
    font-size: 1.3rem;
    border-radius: 3rem;
    transition: all 500ms ease;
    font-family: 'DM Sans', sans-serif;
}

.products-preview .preview .grid-pre .btn-Qro:hover{
    color: #222;
    background-color: #fbe122;
}

/*media*/
@media(min-width:1440px){
    .products-preview .preview{
        display: none;
        padding: 2rem;
        text-align: center;
        color: #ffffffff;
        position: relative;
        margin: 2rem;
        width: 90%;
        height: 45rem;
        border-radius: 2rem;
        z-index: 10;
    }
    .products-preview .preview .grid-pre .btn-San{
        position: absolute;
        top: 15.2rem;
        left: 10rem;
        padding: .8rem 1rem;
        background-color: #222;
        color: #fbe122;
        text-decoration: none;
        font-size: 1.3em;
        border-radius: 3rem;
        transition: all 500ms ease;
        font-family: 'DM Sans', sans-serif;
    }
    .products-preview .preview .grid-pre .btn-Qro{
        position: absolute;
        top: 15.2rem;
        left: 22rem;
        padding: .8rem 1rem;
        background-color: #222;
        color: #fbe122;
        text-decoration: none;
        font-size: 1.3em;
        border-radius: 3rem;
        transition: all 500ms ease;
        font-family: 'DM Sans', sans-serif;
    }
}

@media (max-width: 800px){
    .products-preview .preview{
        width: 70vw;
        height: 90vh;
    }

    .products-preview .preview .fa-xmark{
        top: 93%; right: 5%;
    }

    .products-preview .preview .boton-p{
        top: calc(10% - 1px); right:2%;
        transform: rotate(90deg);
        width: 13rem;
    }

    .products-preview .preview.s-1{
        background: url(../Imagenes/Servicios/Popup/T_turistico_derecha.png) no-repeat center center;
        background-size: cover;
    }
    
    .products-preview .preview.s-2{
        background: url(../Imagenes/Servicios/Popup/T_aeropuerto_derecha.png) no-repeat center center;
        background-size: cover;
    }
    
    .products-preview .preview.s-3{
        background: url(../Imagenes/Servicios/Popup/T_concierto_derecha.jpeg) no-repeat center center;
        background-size: cover;
    }
    
    .products-preview .preview.s-4{
        background: url(../Imagenes/Servicios/Popup/T_eventos_derecha.png) no-repeat center center;
        background-size: cover;
    }
    
    .products-preview .preview.s-5{
        background: url(../Imagenes/Servicios/Popup/T_tours_derecha.png) no-repeat center center;
        background-size: cover;
    }
    
    .products-preview .preview.s-6{
        background: url(../Imagenes/Servicios/Popup/T_ejecutivo_derecha.png) no-repeat center center;
        background-size: cover;
    }
}

@media(max-width:600px){
    .products-preview .preview{
        width: 90vw;
        height: 90vh;
    }

    .products-preview .preview .fa-xmark{
        top: 90%; right: 10px;
    }

    .products-preview .preview .boton-p{
        top: 18%; right: -1%;
        transform: rotate(90deg);
        width: 13rem;
    }

    .products-preview .preview.s-1{
        background: url(../Imagenes/Servicios/Popup/T_turistico_derecha.png) no-repeat center center;
        background-size: cover;
    }
    
    .products-preview .preview.s-2{
        background: url(../Imagenes/Servicios/Popup/T_aeropuerto_derecha.png) no-repeat center center;
        background-size: cover;
    }
    
    .products-preview .preview.s-3{
        background: url(../Imagenes/Servicios/Popup/T_concierto_derecha.jpeg) no-repeat center center;
        background-size: cover;
    }
    
    .products-preview .preview.s-4{
        background: url(../Imagenes/Servicios/Popup/T_eventos_derecha.png) no-repeat center center;
        background-size: cover;
    }
    
    .products-preview .preview.s-5{
        background: url(../Imagenes/Servicios/Popup/T_tours_derecha.png) no-repeat center center;
        background-size: cover;
    }
    
    .products-preview .preview.s-6{
        background: url(../Imagenes/Servicios/Popup/T_ejecutivo_derecha.png) no-repeat center center;
        background-size: cover;
    }
}

@media(max-width:480px){
    .products-preview .preview{
        display: none;
        padding: 1rem;
        text-align: center;
        color: #ffffffff;
        position: absolute;
        margin: 1rem;
        width: 100%;
        height: 100%;
        border-radius: 2rem;
        transition: 5s ease all;
        z-index: 10;
    }

    .products-preview .preview{
        top: 2rem;
        height: 80vh;
        width: 85vw;
    }

    .products-preview .preview .fa-xmark{
        top: 90%; right: 10px;
    }

    .products-preview .preview .boton-p{
        top: 4em; right: -1px;
        transform: rotate(90deg);
        width: 13rem;
    }

    .products-preview .preview.s-1{
        background: url(../Imagenes/Servicios/Popup/T_turistico_derecha.png) no-repeat center center;
        background-size: cover;
    }
    
    .products-preview .preview.s-2{
        background: url(../Imagenes/Servicios/Popup/T_aeropuerto_derecha.png) no-repeat center center;
        background-size: cover;
    }
    
    .products-preview .preview.s-3{
        background: url(../Imagenes/Servicios/Popup/T_concierto_derecha.jpeg) no-repeat center center;
        background-size: cover;
    }
    
    .products-preview .preview.s-4{
        background: url(../Imagenes/Servicios/Popup/T_eventos_derecha.png) no-repeat center center;
        background-size: cover;
    }
    
    .products-preview .preview.s-5{
        background: url(../Imagenes/Servicios/Popup/T_tours_derecha.png) no-repeat center center;
        background-size: cover;
    }
    
    .products-preview .preview.s-6{
        background: url(../Imagenes/Servicios/Popup/T_ejecutivo_derecha.png) no-repeat center center;
        background-size: cover;
    }
}

/**Contenido beneficios**/
@import url('https://fonts.googleapis.com/css2?family=Bodoni+Moda&family=DM+Sans&display=swap');
#beneficios{
    background-color: #222222;
    width: 100%;
    margin: 1px auto;
    padding: 1px auto;
    height: 100vh;
}

#beneficios h2{
    background: #fbe122;
    width: 16rem;
    height: 16rem;
    border-radius: 50%;
    align-items: center;
    justify-content: center;
    color: #323234;
    font-size: 3.3rem;
    font-weight: 600;
    display: flex;
    position: absolute;
    right: 11.5rem;
    margin-top: 9.7rem;
    font-family: 'Bodoni Moda', serif;
    z-index: 1;
}

.benefic{
    border: #fbe122 solid 1px;
    padding: 2rem 1rem;
    display: block;
    position: absolute;
    margin-top: 2.5rem;
    left: 5rem;
    width: 70%;
    height: 33rem;
}

.benefic i{
    color: #cbce0e;
    display: block;
    font-size: 2.5rem;
}

.benefic i span{
    font-family: 'DM Sans', sans-serif;
    font-size: 1.9rem;
    font-weight: 200;
}

/*media*/
@media(min-width:1440px){
    #beneficios h2{
        background: #fbe122;
        width: 25rem;
        height: 25rem;
        border-radius: 50%;
        align-items: center;
        justify-content: center;
        color: #323234;
        font-size: 5rem;
        font-weight: 600;
        display: flex;
        position: absolute;
        right: 5rem;
        margin-top: 15rem;
        font-family: 'Bodoni Moda', serif;
        z-index: 1;
    }
    .benefic{
        border: #fbe122 solid 1px;
        padding: 2rem 1rem;
        display: block;
        position: absolute;
        margin-top: 2.5rem;
        left: 5rem;
        width: 75%;
        height: 50rem;
    }
    .benefic i{
        color: #cbce0e;
        display: block;
        font-size: 4.5rem;
    }
    .benefic i span{
        font-family: 'DM Sans', sans-serif;
        font-size: 2.7rem;
        font-weight: 200;
    }
}

@media(max-width:1280px){
    #beneficios h2{
        background: #fbe122;
        width: 20rem;
        height: 20rem;
        border-radius: 50%;
        align-items: center;
        justify-content: center;
        color: #323234;
        font-size: 4rem;
        font-weight: 600;
        display: flex;
        position: absolute;
        right: 5rem;
        margin-top: 15rem;
        font-family: 'Bodoni Moda', serif;
        z-index: 1;
    }
    .benefic{
        border: #fbe122 solid 1px;
        padding: 2rem 1rem;
        display: block;
        position: absolute;
        margin-top: 2.5rem;
        left: 5rem;
        width: 75%;
        height: 45rem;
    }
    .benefic i{
        color: #cbce0e;
        display: block;
        font-size: 3.9rem;
    }
    .benefic i span{
        font-family: 'DM Sans', sans-serif;
        font-size: 2.7rem;
        font-weight: 200;
    }
}

@media(max-width:800px){
    #beneficios h2{
        background: #fbe122;
        width: 19rem;
        height: 19rem;
        border-radius: 50%;
        align-items: center;
        justify-content: center;
        color: #323234;
        font-size: 4rem;
        font-weight: 600;
        display: flex;
        position: absolute;
        right: 15rem;
        margin-top: 1rem;
        font-family: 'Bodoni Moda', serif;
        z-index: 1;
    }
    
    .benefic{
        border: #fbe122 solid 1px;
        padding: 2rem 1rem;
        display: block;
        position: absolute;
        margin-top: 18rem;
        left: 5rem;
        width: 80%;
        height: 60rem;
    }
    
    .benefic i{
        color: #cbce0e;
        display: block;
        font-size: 4rem;
    }
    
    .benefic i span{
        font-family: 'DM Sans', sans-serif;
        font-size: 3rem;
        font-weight: 200;
    }
}

@media(max-width:768px){
    #beneficios h2{
        background: #fbe122;
        width: 15rem;
        height: 15rem;
        border-radius: 50%;
        align-items: center;
        justify-content: center;
        color: #323234;
        font-size: 2.7rem;
        font-weight: 600;
        display: flex;
        position: absolute;
        right: 15rem;
        margin-top: 1rem;
        font-family: 'Bodoni Moda', serif;
        z-index: 1;
    }
    
    .benefic{
        border: #fbe122 solid 1px;
        padding: 2rem 1rem;
        display: block;
        position: absolute;
        margin-top: 14rem;
        left: 5rem;
        width: 80%;
        height: 45rem;
    }
    
    .benefic i{
        color: #cbce0e;
        display: block;
        font-size: 3rem;
    }
    
    .benefic i span{
        font-family: 'DM Sans', sans-serif;
        font-size: 2.7rem;
        font-weight: 200;
    }
}

@media(max-width:600px){
    #beneficios h2{
        background: #fbe122;
        width: 15rem;
        height: 15rem;
        border-radius: 50%;
        align-items: center;
        justify-content: center;
        color: #323234;
        font-size: 3rem;
        font-weight: 600;
        display: flex;
        position: absolute;
        right: 10rem;
        margin-top: 1rem;
        font-family: 'Bodoni Moda', serif;
        z-index: 1;
    }
    
    .benefic{
        border: #fbe122 solid 1px;
        padding: 2rem 1rem;
        display: block;
        position: absolute;
        margin-top: 14rem;
        left: 5rem;
        width: 80%;
        height: 47.5rem;
    }
    
    .benefic i{
        color: #cbce0e;
        display: block;
        font-size: 2.7rem;
    }
    
    .benefic i span{
        font-family: 'DM Sans', sans-serif;
        font-size: 2.7rem;
        font-weight: 200;
    }
}

@media(max-width: 480px){
    #beneficios h2{
        background: #fbe122;
        width: 10rem;
        height: 10rem;
        border-radius: 50%;
        align-items: center;
        justify-content: center;
        color: #323234;
        font-size: 2rem;
        font-weight: 600;
        display: flex;
        position: absolute;
        right: 7rem;
        margin-top: .5rem;
        font-family: 'Bodoni Moda', serif;
        z-index: 1;
    }
    
    .benefic{
        border: #fbe122 solid 1px;
        padding: 2rem 1rem;
        display: block;
        position: absolute;
        margin-top: 9rem;
        left: 1.5rem;
        width: 87%;
        height: 40rem;
    }
    
    .benefic i{
        color: #cbce0e;
        display: block;
        font-size: 2.3rem;
    }
    
    .benefic i span{
        font-family: 'DM Sans', sans-serif;
        font-size: 1.7rem;
        font-weight: 200;
    }
}

@media(max-width: 360px){
    #beneficios h2{
        background: #fbe122;
        width: 9rem;
        height: 9rem;
        border-radius: 50%;
        align-items: center;
        justify-content: center;
        color: #323234;
        font-size: 2rem;
        font-weight: 600;
        display: flex;
        position: absolute;
        right: 6.3rem;
        margin-top: .5rem;
        font-family: 'Bodoni Moda', serif;
        z-index: 1;
    }
    
    .benefic{
        border: #fbe122 solid 1px;
        padding: 2rem 1rem;
        display: block;
        position: absolute;
        margin-top: 8rem;
        left: 1.5rem;
        width: 87%;
        height: 37rem;
    }
    
    .benefic i{
        color: #cbce0e;
        display: block;
        font-size: 2rem;
    }
    
    .benefic i span{
        font-family: 'DM Sans', sans-serif;
        font-size: 1.5rem;
        font-weight: 200;
    }
}

/*Contenido vehiculos*/
@import url('https://fonts.googleapis.com/css2?family=Gotu&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@200&display=swap');
/*vehiculos*/
body.container-vehiculos{
    height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
}

.container-vehiculos{
    width: 100%;
    height: 100vh;
    overflow: hidden;
    position: relative;
}

.carruseles-vehi{
    width: 500%;
    height: 100%;
    display: flex;
}

.slider-carros{
    width: calc(100% / 5);
    height: 100%;
    display: grid;
    grid-template-columns: repeat(2, 1fr);
}

.slider-carros img{
    width: 400px;
}

.btn_left,
.btn_right{
    display: flex;
    position: absolute;
    top: 50%;
    font-size: 1.5rem;
    background-color: transparent;
    border-radius: 50%;
    padding: 5px;
    font-weight: 600;
    cursor: pointer;
    color: #ffffff81;
    transform: translate(0,-50%);
    transition: .5s ease;
    user-select: none;
}

.btn_left:hover,
.btn_right:hover{
    background-color: #333333d4;
    color: #fbe122;
}

.btn_left{
    left: 10px;
}

.btn_right{
    right: 10px;
}

/*Media vehiculos*/
/*@media(min-width:1440px){
    .slider-carros img{
        width: 900px;
    }
}

@media(max-width:800px){
    .slider-carros img{
        width: 500px;
    }

}*/

/*Diseño*/
.color-amarillo{
    background-color: #fbe122;
}

.color-grisaseo{
    background-color: #222;
}

.cont-1{
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    justify-content:space-around;
    width: 100%;
    height: 100vh;
}

.cont-1 h2{
    font-size: 2.5rem;
}

.T-amarillo{
    color: #fbe122;
}

.T-gris{
    color: #222;
}

.cont-1 a{
    cursor: pointer;
    text-decoration: none;
    font-size: 1.7rem;
    font-weight: 600;
    align-items: end;
}

.cont-1 .img_toyota_an{
    width: 32rem;
    padding: 0 0;
}

.cont-1 .img_toyota_nu{
    width: 35rem;
    padding: 0 0;
}

.cont-1 .img_sprinter{
    width: 27rem;
    padding: 0 0;
}

.cont-1 .img_avanza{
    width: 29rem;
    padding: 0 0;
}

.cont-1 .img_suburban{
    width: 29rem;
    padding: 0 0;
}

.cont-1 .btn-car-a{
    background-color: rgba(251, 225, 34, 70%);
    color: #222;
    transition: all .9s ease;
    border: none;
    outline: none;
    cursor: pointer;
    padding: 1rem 1rem;
    border-radius: 3rem;
}

.cont-1 .btn-car-a:hover{
    color:#fbe122;
    background-color: #222;
}

.cont-1 .btn-car-g{
    background: rgba(34, 34, 34, 70%);
    color: #fbe122;
    transition: all .9s ease;
    border: none;
    outline: none;
    cursor: pointer;
    padding: 1rem 1rem;
    border-radius: 3rem;
}

.cont-1 .btn-car-g:hover{
    color: #222;
    background-color: #fbe122;
}

.cont-2{
    height: 100vh;
    display: flex;
    align-items: center;
    flex-direction: column;
    text-align: center;
    font-size: 2.2rem;
    letter-spacing: normal;
    line-height: 4rem;
    justify-content: space-around;
    width: 85%;
    border-radius: .5rem;
    box-shadow: 0px 8px 15px 8px rgba(0,0,0,0.69);
}

/*Media*/
@media(min-width:1440px){
    .cont-1 h2{
        font-size: 3rem;
    }
    .cont-2{
        font-size: 3rem;
        letter-spacing: 0;
        line-height: 3rem;
    }
}

@media(max-width:800px){
    .cont-1 h2{
        font-size: 2.5rem;
    }
    .cont-2{
        font-size: 2rem;
        letter-spacing: none;
        line-height: 2rem;
        word-spacing: .4rem;
        width: 85%;
    }
}

@media(max-width:768px){
    .cont-1 h2{
        font-size: 2rem;
        text-align: center;
    }

    .cont-2{
        font-size: 2.5rem;
        letter-spacing: 0;
        line-height: 2rem;
        width: 85%;
    }

    .cont-1{
        display:flex;
        flex-direction: column;
        margin: auto;
        align-items: center;
        text-align: center;
        justify-content: center;
        justify-content:space-around;
        width: 100%;
        height: 100vh;
    }

    .cont-1 a{
        cursor: pointer;
        text-decoration: none;
        font-size: 2.3rem;
        font-weight: 500;
        align-items: end;
    }
    
    .cont-1 .img_toyota_an{
        width: 22rem;
        padding: 0 0;
    }
    
    .cont-1 .img_toyota_nu{
        width: 22rem;
        padding: 0 0;
    }
    
    .cont-1 .img_sprinter{
        width: 22rem;
        padding: 0 0;
    }
    
    .cont-1 .img_avanza{
        width: 20rem;
        padding: 0 0;
        text-align: center;
    }
    
    .cont-1 .img_suburban{
        width: 22rem;
        padding: 0 0;
    }
    
    .cont-1 .btn-car-a{
        background-color: rgba(251, 225, 34, 70%);
        color: #222;
        transition: all .9s ease;
        border: none;
        outline: none;
        cursor: pointer;
        padding: 1rem 1rem;
        border-radius: 3rem;
    }
}

@media(max-width:600px){
    .cont-1 h2{
        font-size: 1.7rem;
        text-align: center;
    }

    .cont-2{
        font-size: 2rem;
        letter-spacing: 1px;
        line-height: 2rem;
        width: 85%;
    }

    .cont-1{
        display:flex;
        flex-direction: column;
        margin: auto;
        align-items: center;
        text-align: center;
        justify-content: center;
        justify-content:space-around;
        width: 100%;
        height: 100vh;
    }

    .cont-1 a{
        cursor: pointer;
        text-decoration: none;
        font-size: 2rem;
        font-weight: 600;
        align-items: end;
    }
}

@media (max-width:480px){
    .cont-1 h2{
        font-size: 2rem;
        text-align: center;
    }

    .cont-2{
        display: none;
    }

    .cont-1{
        display:flex;
        width: 100%;
        height: 100vh;
        justify-content: space-around;
        align-items: center;
    }

    .cont-1 a{
        cursor: pointer;
        text-decoration: none;
        font-size: 2.5rem;
        font-weight: 600;
        align-items: end;
    }
    
    .cont-1 .img_toyota_an{
        width: 30rem;
        justify-content: center;
        padding: 0 0;
    }
    
    .cont-1 .img_toyota_nu{
        width: 25rem;
        padding: 0 0;
    }
    
    .cont-1 .img_sprinter{
        width: 24rem;
        padding: 0 0;
    }
    
    .cont-1 .img_avanza{
        width: 22rem;
        padding: 0 0;
        text-align: center;
    }
    
    .cont-1 .img_suburban{
        width: 24rem;
        padding: 0 0;
    }
    
    .cont-1 .btn-car-a{
        background-color: rgba(251, 225, 34, 70%);
        color: #222;
        transition: all .9s ease;
        border: none;
        outline: none;
        cursor: pointer;
        padding: 1rem 1rem;
        border-radius: 3rem;
    }
}

@media(max-width:360px){
    .cont-1 h2{
        font-size: 2.3rem;
        text-align: center;
    }

    .cont-2{
        display: none;
    }

    .cont-1{
        display:flex;
        width: 100%;
        height: 100vh;
        justify-content: space-around;
        align-items: center;
    }

    .cont-1 a{
        cursor: pointer;
        text-decoration: none;
        font-size: 2rem;
        font-weight: 600;
        align-items: end;
    }
    
    .cont-1 .img_toyota_an{
        width: 25rem;
        justify-content: center;
        align-items: center;
    }
    
    .cont-1 .img_toyota_nu{
        width: 25rem;
        
    }
    
    .cont-1 .img_sprinter{
        width: 22rem;
        
    }
    
    .cont-1 .img_avanza{
        width: 22rem;
        
        text-align: center;
    }
    
    .cont-1 .img_suburban{
        width: 24rem;
        
    }
    
    .cont-1 .btn-car-a{
        background-color: rgba(251, 225, 34, 70%);
        color: #222;
        transition: all .9s ease;
        border: none;
        outline: none;
        cursor: pointer;
        padding: 1rem 1rem;
        border-radius: 3rem;
    }
}

/*Inicio de popup de vehiculos*/
.productos-vista{
    position: fixed;
    top: 0; left: 0;
    min-height: 100vh;
    width: 100%;
    background: rgba(0, 0, 0, .8);
    display: none;
    justify-content: center;
    align-items: center;
    z-index: 10;
}

.productos-vista .vista{
    display: none;
    padding: 1rem;
    text-align: center;
    background: #222;
    position: relative;
    margin: 1rem;
    width: 63vw;
    height: 90vh;
    border-radius: 2rem;
    justify-content: center;
    text-align: center;
    align-items: center;
}

.productos-vista .vista.active{
    display: inline-block;
}

.productos-vista .vista img{
    height: 35vh;
    margin-top: 2.5rem;
    margin-bottom: -2.3rem;
}

.productos-vista .vista .img-7{
    grid-row: 1 / 2;
    grid-column: 1;
}

.productos-vista .vista .img-8{
    grid-column: 2 / 2;
    grid-row: 1;
}

.productos-vista .vista .img-9{
    grid-column: 1 / 1;
        grid-row: 2;
}

.productos-vista .vista .img-7-1{
    width: 15rem;
    height: 15rem;
}

.productos-vista .vista .img-8-1{
    width: 15rem;
    height: 15rem;
}

.productos-vista .vista .img-9-1{
    width: 15rem;
    height: 15rem;
}

.productos-vista .vista .img-10-1{
    width: 12rem;
    height: 14rem;
}

.productos-vista .vista .fa-xmark{
    position: absolute;
    top: 1rem; right: 1.5rem;
    cursor: pointer;
    color: #fbe122;
    font-size: 2.5rem;
}

.productos-vista .vista .cont-vis-car-img{
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    grid-template-rows: repeat(2, 1fr);
    width: 100%;
    height: 100%;
    grid-gap: 20px;
    grid-template-areas: "n1 n1" "n2 n3";
}

.productos-vista .vista .cont-vis-car-img .interior-1{
    grid-area: n1;
}

.productos-vista .vista .cont-vis-car-img .interior-2{
    grid-area: n2;
}

.productos-vista .vista .cont-vis-car-img .interior-3{
    grid-area: n3;
}

/*Media*/
@media(min-width:1440px){
    .productos-vista .vista{
        display: none;
        padding: 1rem;
        text-align: center;
        background: #222;
        position: relative;
        margin: 1rem;
        width: 59rem;
        height: 50rem;
        border-radius: 2rem;
    }
    .productos-vista .vista img{
        height: 20rem;
        margin-top: 3rem;
    }
}

@media(max-width:800px){
    .productos-vista .vista{
        display: none;
        padding: 1rem;
        text-align: center;
        background: #222;
        position: relative;
        margin: 1rem;
        width: 59rem;
        height: 70rem;
        border-radius: 2rem;
    }
    .productos-vista .vista img{
        height: 20rem;
        margin-top: 2rem;
    }
}

@media(max-width:768px){
    .productos-vista .vista{
        display: none;
        padding: 1rem;
        text-align: center;
        background: #222;
        position: relative;
        margin: 1rem;
        width: 40rem;
        height: 43rem;
        border-radius: 2rem;
    }
    .productos-vista .vista img{
        height: 14rem;
        margin-top: 3rem;
    }
}

@media(max-width:600px){
    .productos-vista .vista{
        display: none;
        padding: 1rem;
        text-align: center;
        background: #222;
        position: relative;
        margin: 1rem;
        width: 40rem;
        height: 58rem;
        border-radius: 2rem;
    }
    .productos-vista .vista img{
        height: 15rem;
        margin-top: 3rem;
    }
}

@media (max-width:480px){
    .productos-vista .vista{
        display: none;
        padding: 1rem;
        text-align: center;
        background: #222;
        position: relative;
        margin: 1rem;
        width: 40rem;
        height: 43rem;
        border-radius: 2rem;
    }
    .productos-vista .vista img{
        height: 11rem;
        margin-top: 1rem;
    }
}

@media(max-width:360px){
    .productos-vista .vista{
        display: none;
        padding: 1rem;
        text-align: center;
        background: #222;
        position: relative;
        margin: 1rem;
        width: 21rem;
        height: 40rem;
        border-radius: 2rem;
    }
    .productos-vista .vista img{
        height: 9rem;
        margin-top: 1rem;
    }
}