.slider {
    background-color: white;
    height: 100vh;
    max-height: 56.94vw;
    display: flex;
    justify-content: center;
}


.slider-block {
    background-color: white;
    display: block;
}

.slider .slide {
    width: 20%;
    box-shadow: 5px 0px 10px black;
    height: 100%;
    transition: width 0.3s ease, opacity 0.3s ease, box-shadow 0.3s ease; /* Transición para suavizar los cambios */
}

.slider .slide-active {
    width: 20%;
    box-shadow: 5px 0px 10px black;
    height: 100%;
}


/* Estilo para los slides pares */
.slider .slide:nth-child(odd) {
    background: gray;
}

/* Estilo para los slides impares */
.slider .slide:nth-child(even) {
    background: black;
}

.slider .slide-active {
    width: 60vw;
    background: black;
}

.slide-active .link-open-slide {
    display: none;
}

.slide .content-slide {
    display: none;
}

.slide .content-slide .main-content-slide {
    display: none;
}


.slide:has(.link-open-slide) {
    display: flex;
    justify-content: center; /* Centrado horizontal */
    align-items: center; /* Centrado vertical */
    text-align: center; /* Alineación del texto */
}

.slide .link-open-slide {
    font-size: 4.5vw;
    font-family: "Anton";
    color: white;
    transition: transform 0.3s ease;
    cursor: pointer;
    text-shadow: 0px 2px 3px rgba(0, 0, 0, 0.1);
}

.slide .link-open-slide:hover {
    transform: scale(1.1);
}

.slide-active .content-slide {
    height: 100%;
}

.slide-active .content-slide .background-slide {
    width: 100%; /* Ocupar el ancho completo */
    height: 100%; /* Ocupar la altura completa */
    object-fit: cover ; /* Escalar la imagen para llenar el contenedor */
    opacity: 0.85; /* Establecer la transparencia (ajusta según sea necesario) */
    object-position: 85% 50%;
    z-index: 1;
    position: relative;
  }

.main-content-slide * {
    position: relative;
    z-index: 2;
}
.main-content-slide {
    position: relative;
    z-index: 2;
    width: 98%;
    height: 32%;
    top: -32%;
    display: flex;
    flex-direction: row;
}


#pasajera {
    margin: auto; 
    width: 42.84vw; 
    height: 24.30vw; 
    max-width: 90%; 
    max-height: 90%;     
    margin-left: 9vw;
    margin-right: 9vw; 
    border-radius: 1.04vw;
    object-fit: cover;
}

#conductor {
    margin: auto; 
    box-shadow: 1px 1px 5px black;  
    width: 49.58vw; 
    height: 42.013vw;
    object-fit: cover;
    object-position: 20% 50%;
    border-radius: 10px;
    margin: auto;
}

#img-dubi-voy {
    height: 16.1vw; 
    width: 16.8vw; 
    margin: -75px;  
    padding: -5px; 
    margin: -4.5vw auto;
}

#img-dubi {
    margin: auto; 
    width: 18.6vw; 
    height: 18.6vw;
    margin-bottom: -1.1vw;
}

.content-slide-title-url{
    font-family: "Anton";
    font-size: 5.55vw;
    color: white;
    margin: auto;
    width: 50%;
    transition: transform 0.3s ease;
    text-decoration: none;
}




.content-slide-description {
    padding: 10px;
}
.content-arrow-url a {
    margin-top: 12px;
    top: -20px ;
    left: -2.08vw;
}

.content-arrow-url {
    transition: transform 0.3 ease;
}

.content-arrow-url:hover {
    transform: scale(1.1);
}

.content-slide-title-url:hover{
    transform: scale(1.075);
    cursor: pointer;
}

.content-slide-description {
    width: 20.83vw;
}

.content-description {
    font-size: var(--tamañoGeneral);
    font-family: 'Staatliches';
    color: white;
}

.content-description .important-text {
    font-size: var(--tamañoGeneral);
    font-family: 'Staatliches';
    color: #F0CC24;
    background-color: black;
}




.lane {
    display: flex;
    flex-direction: row;
    justify-content: space-around;
    align-items: center;
    width: 100%;
    height: 90%;
    position: relative;
    flex-wrap: wrap;
}


.lane .title-lane {
    font-family: "Anton";
    font-size: 28px;
    text-align: center;
    color: white;
}


.item-lane-icon .button-lane {
    display: none;
}

.item-lane-icon {
    display: flex;
    flex-direction: column;
    justify-content: start;
    align-items: center;
}

.item-lane-icon .icon-lane {
    width: 124px;
    height: 124px;
    background-color: #FEE67B;
    border-radius: 50%;
}

.item-lane-action .icon-lane {
    display: none;
}

.item-lane-short .button-lane {
    display: none;
}

.item-lane-short .icon-lane {
    display: none;
}




@media (max-width: 768px) {


    nav-footer .nav-options {
        display: flex;
        flex-direction: column;
    }

    #footer-content {
        flex-direction: column;
    }

    .slider .slide, .slide-active {
        box-shadow: none !important;
    }

    .content-slide-description {
        padding: 0px;
    }

    .content-description, .content-slide-description .important-text {
        font-size: 5vw;
        margin: 0px;
    }
    
    :root {
        --bigtext: 7.5vw;
    }
    


    .content-slide {
        height: 81.56vw !important;
        width: 100% ;
    }

    .content-slide-description {
        width: 40% !important;
    }

    .content-slide-title-url {
        font-size: 11.25vw;
        margin: 0%;
    }

    .slider {
        flex-direction: column;
        height: auto !important;
        min-height: 0px !important;
        margin-bottom: 10px;
        max-height: none;
    }

    .slider .slide, .slide-active {
        width: 100% !important;
    }

    .slider .slide {
        height: 45.625vw !important;
        box-shadow: none !important;
    }

    .main-content-slide {
        width: auto;
        top: -60%;
    }

    .link-open-slide {
        writing-mode: horizontal-tb;
        text-align: start !important;
        width: 95%;
        text-shadow: none !important;
        color: white !important;
        font-size: 10vw !important;
        margin-right: 0px !important;
        margin-bottom: 10px !important;
    }

    #flex-ahora-voy {
        flex-direction: column-reverse;
    }

    .slide:has(.link-open-slide) {

        align-items: end !important; /* Centrado vertical */
    }

    #slide-quiero-ser-dubi {
        height: auto !important;
        padding-bottom: 2rem;
    }


    #pasajera {
        width: 78.43vw;
        height: 42.81vw;
        margin-top: 5vw;
        margin-bottom: 3vw;
    }

    #conductor {
        width: 81.56vw;
        height: 69.11vw;
        margin-top: 5vw;
        margin-bottom: 3vw;
    }

    #slide-quiero-ser-dubi div {
        padding: 0px !important;
    }

    #disfruta_gana {
        flex-direction: column;
    }


    #nav-button-download {
        width: 80% !important;
        margin-bottom: 10px !important;
        font-size: 6.25vw;
    }
    
    .main-content-slide {
        display: flex !important;
        flex-direction: column !important;
        padding-left: 5vw;
    }

    #disfruta_gana {
        flex-direction: row;
    }

    .content-slide-title-url {
        padding-left: 0px;
    }

    .slider .slide-active {
        box-shadow: none;
    }

    .slide-active .content-slide .background-slide {
        opacity: 0.75;
    }

    .content-slide-description {
        width: 100% !important;
    }
    #dubi-voy p {
        margin: auto !important;
        font-size: 4.0625vw !important;
        margin-top: 20px !important;
    }

    #dubi-voy b:not(:first-child) {
        font-size: 4.375vw !important;
        width: 92%;
    }

    #img-dubi-voy {
        margin: -15vw auto;
        width: 50.5vw ;
        height:  50.5vw ;
    }

    #img-dubi {
        height: 40vw ;
        width: 38vw ;
        padding-top: 1.5vw;
        margin-bottom: -5vw;
        position: relative;
        left: -9vw;
        

    }

    #dubi-voy {
        width: 100% !important;
    }

    #dubi-voy b:first-child {
        font-size: 7.5vw !important;
    }

    #disfruta_gana p {
        font-size: 7.5vw !important ;
        width: 41.875vw !important;
        margin: auto;
        margin-left: 8.125vw;
        text-align: left;
        height: auto !important;
    }

    #slide-quiero-ser-dubi div:first-child p:nth-child(2) {
        font-size: 4.375vw !important;
        width: auto !important;
        padding: 0px var(--tamañoGeneral);
    }

    #slide-quiero-ser-dubi div:first-child p:nth-child(3) {
        font-size: 5vw !important;
    }

    #nav-button-download {
        width: 80% !important;
        margin-bottom: 10px !important;
    }


    .item-lane:not(:first-child) {
        display: none;
    }


    #dubi-voy button {
        margin-left: 10vw !important;
    }

    .content-arrow-url a {
        top: auto;
        margin: 0%;
        height: 10vw;
        width: 41.25vw;
        font-size: 6.25vw;
    }

    .content-arrow-url {
        justify-content: start;
        margin-left: 2vw;
        height: auto;
        margin-top: 2.5vw;
    }

    #face-id {
        margin-left: 3.5vw !important;
    }

    main > .slider-block:last-of-type p.big-text:last-of-type {
        font-size: 5.625vw !important;
    }
}