/* modulo listado de destinos */
.lista-destinos{
    display: flex;
    flex-direction: column;
    gap:1em;
    margin:1.5rem 0 0 0;
}
.lista-destinos .viaje{
    padding: .5em;
    border-radius: 10px;
    border:1px solid var(--color-primary);
    display: flex;
    justify-content: space-between;
    color:var(--color-primary);
}
.lista-destinos .viaje img{
    width:230px;
    height: 85px;
    object-fit: cover;
    border-radius: 10px;
}
.lista-destinos .info-viaje{
    display: flex;
    flex-direction: column;
}
.lista-destinos .info-viaje h2{
    font-family: var(--font-primary);
    font-size: 1.750rem;
    line-height: 2rem;
    margin:0;
}
.lista-destinos .info-viaje .fecha-salida{
    font-variant: var(--font-secondary);
    font-weight: 750;
    font-size:1.3rem;
}
.lista-destinos .info-viaje .fecha-salida small,
.lista-destinos .info-viaje .fecha-salida span
{
    font-size: 0.750rem;
    letter-spacing:0px;
    font-weight: 600;
 
}
.lista-destinos .info-viaje .dias{
    font-style: italic;
    font-family: var(--font-secondary);
    font-size: 0.850rem;
    font-weight: 500;
    margin-top: .3rem;
}
.lista-destinos .fecha-salida-dias-lista {
    font-size: 0.850rem;
    line-height: 1.5;
}

.lista-destinos .fecha-salida-dias-lista span {
    display: inline-block; 
    font-weight: bold;
    vertical-align: top;
    margin-right: .1rem;
    white-space: nowrap; 
}

.lista-destinos .fecha-salida-dias-lista ul {
    display: inline; 
    list-style: none;
    margin: 0;
    padding: 0;
}

.lista-destinos .fecha-salida-dias-lista ul li {
    display: inline-block;
    margin-right: 0.1rem; 
    color: #965871;
    opacity: 0.5;
    font-weight: bold;
    white-space: nowrap; 
}


.lista-destinos .fecha-salida-dias-lista ul li.hab{
    color: #965871;
    opacity: 1;
    
}
.lista-destinos .fecha-salida-dias-lista ul li::after{
    content: "/";
    margin-left: .3rem;
}
.lista-destinos .fecha-salida-dias-lista ul li:last-child::after{
    content: "";
}
.lista-destinos .notificacion{
    flex-direction: column;
    align-items: end;
    gap:.4em;
    font-family: var(--font-secondary);
    padding-right: 1em;

}
.lista-destinos .notificacion span,
.lista-destinos .notificacion .etiqueta{
    color:#fff;
    font-family: var(--font-secondary);
    font-size: 0.700rem;
    border-radius: 7px;
    padding: .250rem .4rem;
}
.lista-destinos .notificacion .etiqueta{
    font-size: 0.700rem;
}
.lista-destinos .notificacion .alerta{
    gap: .3rem;
    display: flex;
    align-items: center;
    font-size: 0.750rem;
    line-height:  0.820rem;
    width: 59%;
    text-align: right;
    cursor: pointer;
}
.lista-destinos .notificacion .alerta i{
    font-size: 25px;
}
.lista-destinos .notificacion .alerta img{
    width:25px;
    height:25px;
    object-fit: contain;
}
.lista-destinos .notificacion.naranja span{
    background: #F68C88;
}
.lista-destinos .notificacion.naranja .etiqueta{
    color: #D46EE5;
}
.lista-destinos .notificacion.azul span{
    background: #62889D;
}
.lista-destinos .notificacion.azul .etiqueta{
    color: #D46EE5;
}
.lista-destinos .notificacion.verde span{
   background: #5EA869;
}
.lista-destinos .notificacion.verde .etiqueta{
    color: #ECAD69;
 }

.lista-destinos .precio span:last-child{
    font-size: 0.690rem;
}
.lista-destinos .precio div >span{
    font-size: 0.700rem;
}
.lista-destinos .precio span:last-child strong{
    font-size: 0.890rem;
}
.lista-destinos .notificacion .etiqueta.blanco{
    background: #fff;
}

.lista-destinos .notificacion .etiqueta.blanco{
    color: #D46EE5;
}

.lista-destinos .notificacion .etiqueta.amarillo{
    color: #ECAD69;
    background: #fff;

}
.lista-destinos .precio{
    font-family:var(--font-secondary);
    font-size:0.770rem;
    align-items: center;
    gap:1em
}
.lista-destinos .precio .numero{
    font-size:0.800rem;
}
.lista-destinos .precio > div{
    align-items: self-start;
    display: flex;
    flex-direction: column;
    gap:.1em;
}
.lista-destinos .precio .numero strong{
    font-size: 1.5rem;
}
.lista-destinos .bloque-r{
    align-items: center;
}
.lista-destinos .viaje a{
    background: var(--color-primary);
    color:#fff;
    font-family: var(--font-secondary);
    text-decoration: none;
    border-radius: 5px;
    padding: .3rem .7rem;
    font-size: .700rem;
    text-align: center;
}
.destino-etiquetas.border{
    border:none!important;
}
.mod-listado .container .titulo-eleg{
    margin-bottom: 1rem;
}


@media(min-width:1400px){
    .lista-destinos .viaje a {
        padding: .3rem .7rem;
        font-size: .800rem;
    }
    .lista-destinos .viaje img {
        width: 16rem;
        height: 6.5rem;
    }
 
    .lista-destinos .info-viaje h2 {
        font-size: 2.250rem;
        line-height: inherit;
    }
    .lista-destinos .info-viaje .fecha-salida {
        font-size:1.150rem;
    }
    .lista-destinos .info-viaje .fecha-salida small, .lista-destinos .info-viaje .fecha-salida span {
        font-size: 0.750rem;
        font-weight: 800;
    }
    .lista-destinos .info-viaje .dias {
        font-size: 1rem;
    }
    .lista-destinos .precio {
        font-size: 0.900rem;
        gap: 2em;

    }
    .lista-destinos .precio .numero strong {
        font-size: 1.8rem;
    }
    .lista-destinos .precio .numero {
        font-size: 1rem;
    }
    .lista-destinos .precio span:last-child {
        font-size: 0.800rem;
        font-weight: 500;
    }
    .lista-destinos .precio span:last-child strong {
        font-size: 1.3rem;
    }
    .lista-destinos .notificacion .alerta {
        font-size: 0.800rem;
        line-height: 0.800rem;
    }
    
    .lista-destinos .notificacion span{
        font-size: 0.800rem;

    }
    .lista-destinos .notificacion .etiqueta {
        font-size: 0.850rem;
        border-radius: 7px;
        padding: 4px 12px;
    }
    .lista-destinos .fecha-salida-dias-lista{
        width: 100%;
    }
    .lista-destinos .fecha-salida-dias-lista{
        font-size: 1rem;
    }
}

@media(min-width:1300px) and (min-height:530px) and (max-height:660px){
    .no-border.x4 a, 
    .no-border.x4 span {
        font-size: 1.5rem!important;
        padding: .3rem .7rem;
        line-height: 1.4rem!important;
    }
    .no-border.x3 a, 
    .no-border.x3 span {
        font-size: 1rem!important;
        line-height: 1.2rem!important;
        margin:0!important;
    }
    .no-border.x1{
        margin:.7rem 0 0 0!important;
    }
    .no-border.x1 a, 
    .no-border.x1 span {
        font-size: .850rem!important;
        line-height: 1rem!important;
        padding: .2rem .4rem!important;
        margin:0!important;
    }
    .lista-destinos{
        margin: 1rem 0 0 0
    }
}
@media(min-width:1000px) and (max-width:1100px){
    .lista-destinos .notificacion .alerta{
        width: 65%;
    }
    .lista-destinos .viaje a {
        width: auto;
    }
}

@media(min-width:760px) and (max-width:1000px){
    .lista-destinos .notificacion .alerta{
        width: 120%;
    }
    .lista-destinos .fecha-salida-dias-lista{
        display: flex;
        flex-direction: column;
    }
    .lista-destinos .der-info{
        width:55%;
        gap:.7rem!important;
    }
    .lista-destinos .bloque-r {
        align-items: start;
        width: 45%;
    }
    .lista-destinos .notificacion {
        flex-direction: column;
        padding-right:0;
        width: 9rem;
    }
    
    .lista-destinos .notificacion span, 
    .lista-destinos .notificacion .etiqueta{
        text-align: center;
        padding: .250rem .2rem;
    }
    .lista-destinos .precio .numero {
        display: flex;
        align-items: flex-end;
        gap:.3rem;
    }
    .lista-destinos .precio > div {
        gap: .1em;
        width: 70%;
    }
    .lista-destinos .precio .numero > span{
        display: none;
    }
    .lista-destinos .precio div >span{
        font-size: .650rem;
    }
    .lista-destinos .precio {
        gap: .3rem;
        width: 18rem;
        justify-content: space-between;
    }
    
    .lista-destinos .precio a{
        margin-left: .5rem;
        padding: .3rem .5rem;
    }
    .mod-listado .container{
        width: 95%;
        max-width: 95%;
    }
}
@media(min-width:680px) and (max-width:1100px){

    .lista-destinos .info-viaje h2 {
        font-family: var(--font-primary);
        font-size: 1.350rem;
        line-height: 1.5rem;
    }
    
   
    .lista-destinos .fecha-salida-dias-lista span {
        margin-right: .1rem;
        font-size: .790rem;
        vertical-align: middle;
    }
    .lista-destinos .info-viaje .fecha-salida {
        font-weight: 750;
        font-size: .900rem;
    }
    .lista-destinos .fecha-salida-dias-lista ul li {
        margin-right: 0;
        white-space: nowrap;
        font-size: .750rem;
    }
    
    .lista-destinos .notificacion .alerta{
        font-size: .700rem;
    }
    .lista-destinos .notificacion .alerta img{
        width:20px;
        height: 20px;
    }
    .lista-destinos .viaje img {
        width: 10rem;
        height: 4.5rem;
    }
    .lista-destinos .precio span:last-child {
        font-size: 0.620rem;
        display: flex  ;
        justify-content: center;
        align-items: center;
        gap: .2rem;
    }
 
   
}

@media(max-width:680px){
    .lista-destinos .viaje img{
        width: 100%;
    }
     .lista-destinos .viaje{
        flex-direction: column;
        gap:0;
    }
    .lista-destinos .notificacion{
        padding-right: 0;
        margin:.5rem 0;
    }
    .lista-destinos .notificacion .alerta {
        font-size: 12px;
    }
    .lista-destinos .info-viaje {
        align-items: self-start;
    }
    .lista-destinos .info-viaje .dias{
        margin:0
    }
    .der-info{
        gap:.5rem!important;
    }
    .der-info, 
    .bloque-r{
        flex-direction: column;
        position: relative;
    }
    .bloque-r{
        padding:.7rem 0;
        gap:.7rem!important;
    }
    .lista-destinos{
        margin:1.5rem 0 0 0;   
    }
    .lista-destinos .fecha-salida{
        width: 50%;
    }
    .lista-destinos .detalle-fecha{
        display: flex;
        gap:1rem;
        width: 100%;
        align-items: center;
        justify-content: space-between;
    }
    .lista-destinos .info-viaje .fecha-salida {
        text-align: left;
    }
    .lista-destinos .fecha-salida-dias-lista{
        display: flex;
        width:60%;
    }
    .lista-destinos .fecha-salida-dias-lista span{
        display: none;
    }
    .lista-destinos .fecha-salida-dias-lista ul{
        text-align: left;
    }
    .lista-destinos .fecha-salida-dias-lista ul li {
        font-size: .700rem;
    }
    .lista-destinos .notificacion{
        flex-direction: row;
        align-items: center;
        /*justify-content: space-between;*/
        flex-wrap: wrap;
        gap:.5rem;
        width: 100%;
        margin: 0 0 .2rem 0!important;

    }
    .lista-destinos .notificacion .alerta img{
        width: 20px;
        height: 20px;
    }
    .lista-destinos .notificacion .alerta {
        font-size: .750rem;
    }
    
    .lista-destinos .notificacion.disp{
        padding-bottom: 1.5rem;
    }
    .lista-destinos .notificacion.disp .alerta{
        position: relative;
        width: 100%;
        margin: .5rem 0 0 0;
        padding: 0 .5rem;
        border-radius: 10px;
        flex: 0 0 100%;
       justify-content: center;
        order:3;
    }
    .lista-destinos .notificacion.disp {
        padding-bottom: 0;
    }
    .lista-destinos .notificacion span,
    .lista-destinos .notificacion .etiqueta {
       /* flex: 1 1 calc(50% - 0.5rem);*/
        text-align: center;
    }
    .lista-destinos .notificacion .etiqueta.blanco{
        text-align: left;
    }
    .bloque-r .precio {
        justify-content: space-between;
        width: 100%;
    }
    .lista-destinos .precio span:last-child{
        position: absolute;
        right: .5rem;
        bottom:0;
    }
    .lista-destinos .viaje a{
        font-size: .900rem;
        margin-left: 1.5rem;
    }
   
}
@media(max-width:480px){
    .no-border.x3 a, 
    .no-border.x3 span {
        padding: .3rem!important ;
        font-size: .950rem!important;
        line-height: 1rem!important;
        padding: .2rem .5rem!important;
    }
    #r-section-3 .no-border.x4 a{
        font-size: 1rem!important;
    }
    .no-border.x3 a, .no-border.x3 span{
        font-size: .850rem!important;
    }
}
@media(max-width:380px){
    .mod-listado{
        text-align: center;
    }
    
    .lista-destinos .precio .numero {
        text-align: right;
    }
    .lista-destinos .viaje{
        gap:.5rem;
    }
    .lista-destinos .viaje a {
        font-size: .800rem;
        margin-left: 0;
    }
    .lista-destinos .info-viaje .fecha-salida{
        font-size: 1rem;
    }
    .lista-destinos .fecha-salida-dias-lista ul li:last-child{
        margin:0;
    }
    .lista-destinos .info-viaje .dias{
        margin-top: 0;
        font-size: .800rem;
    }
    .lista-destinos .bloque-r{
        flex-direction: column;
        margin: 0;
    }
  
    .lista-destinos .info-viaje h2 {
        font-size: 25px;
    }
    .lista-destinos .precio{
        justify-content: space-between;
    }
    .lista-destinos .notificacion span{
        text-align: center;
    }
    
    .lista-destinos .precio span:last-child{
        right:0;
        bottom: 3px;
    }
    
}
@media(max-width:340px){

    .lista-destinos .precio span:last-child{
        display:none
    }
    .lista-destinos .detalle-fecha {
        gap: .3rem;
        flex-direction: column;
    }
    .lista-destinos .fecha-salida-dias-lista{
        max-width: 100%;
    }
    .lista-destinos .info-viaje .dias {
        text-align: left;
    }
    .lista-destinos .notificacion .alerta {
        font-size: .700rem;
    }
    .lista-destinos .fecha-salida-dias-lista {
        width: 100%;
    }
    .lista-destinos .detalle-fecha {
        align-items: flex-start;
    }
    .bloque-r {
        padding: 0;
        gap: .3rem !important;
    }
    .lista-destinos .notificacion{
        margin: .4rem 0!important;
    }
    .lista-destinos .notificacion.disp .alerta {
        margin: .3rem 0 0 0;
    }
}

/* modulo etiquetas con borde*/
.destino-etiquetas{
    display: flex;
    flex-wrap: wrap;
    gap:1rem;
}
.destino-etiquetas a,
.destino-etiquetas span{
    color: var(--color-primary);
    border:1px solid var(--color-primary);
    padding: 0.250rem .1rem;
    font-weight: 400;
    text-decoration: none;
    border-radius: 30px;
    transition: all 400ms ease;
}
.destino-etiquetas span:hover,
.destino-etiquetas a:hover{
    font-weight: 600!important;
    transform: scale(1.05);
  
}
.destino-etiquetas a.selected,
.destino-etiquetas span.selected{
    padding: 0.250rem 0.950rem;
}

.destino-etiquetas.x4 a,
.destino-etiquetas.x4 span{
    font-size: 1.6rem;
    line-height: 1.6rem;
}
.destino-etiquetas.x4,
.destino-etiquetas.x3{
    margin-bottom: .7rem;
}
.destino-etiquetas.x3 a,
.destino-etiquetas.x3 span{
    font-size: 1.2rem;
    line-height: 1.2rem;
}
.destino-etiquetas.x1{
    gap:.250rem;
}
.destino-etiquetas.x1 a,
.destino-etiquetas.x1 span{
    font-size: .850rem;
    line-height: 1rem;
    padding: .1rem .2rem;
}

/* modulo etiquetas sin borde */
.destino-etiquetas.no-border a,
.destino-etiquetas.no-border span{
    border:0;
}

.destino-etiquetas.no-border a.selected,
.destino-etiquetas.no-border span.selected{
    border:1px solid var(--color-primary);

}


/* modulo etiquetas meses */

.destino-etiquetas.meses a.selected{
    font-weight: 900!important;
    border:0;
}
.destino-etiquetas.meses a:nth-of-type(n+3):nth-of-type(-n+5),
.destino-etiquetas.meses span:nth-of-type(n+3):nth-of-type(-n+5) {
    font-weight: 400;
}

.destino-etiquetas.meses a:nth-of-type(n+5),
.destino-etiquetas.meses span:nth-of-type(n+5) {
    font-weight: 300;
}



@media(min-width:1300px) and (min-height:620px) and (max-height:740px){
    .destino-etiquetas.no-border.x4 a, 
    .destino-etiquetas.no-border.x4 span {
        font-size: 1.5rem;
        line-height: 1.5rem;
    }
    .destino-etiquetas.no-border.x3{
        margin-top:1rem;
    }
    .destino-etiquetas.no-border.x3 a, 
    .destino-etiquetas.no-border.x3 span {
        font-size: 1rem;
        line-height: 1rem;
    }
    .destino-etiquetas.no-border.x1{
        margin:.3rem 0 1rem 0;

    }
    .destino-etiquetas.no-border.x1 a, 
    .destino-etiquetas.no-border.x1 span {
        font-size: .800rem;
        line-height: .900rem;
    }
    .destino-etiquetas.x3{
        gap:.6rem;
    }
}

@media (min-width: 780px) and (max-width: 1300px) {
    .destino-etiquetas{
        gap:.6rem;
    }
    .destino-etiquetas.no-border.x4 a, 
    .destino-etiquetas.no-border.x4 span {
        font-size: 1.3rem; 
        line-height: 1.3rem;
    }

    .destino-etiquetas.no-border.x3 {
        margin-top: 0.8rem; 
    }

    .destino-etiquetas.no-border.x3 a, 
    .destino-etiquetas.no-border.x3 span {
        font-size: 0.9rem;
        line-height: 0.9rem;
    }

    .destino-etiquetas.no-border.x1 {
        margin: 0.25rem 0 0.8rem 0; 
    }

    .destino-etiquetas.no-border.x1 a, 
    .destino-etiquetas.no-border.x1 span {
        font-size: 0.75rem; 
        line-height: 0.85rem;
    }
}


@media(min-width:640px) and (max-width:780px){
    .destino-etiquetas.x4 a, .destino-etiquetas.x4 span {
        font-size: 1.4rem;
        line-height: 1.4rem;
    }
    .destino-etiquetas.x3 a, .destino-etiquetas.x3 span {
        font-size: .900rem;
        line-height: 1rem;
    }
    .destino-etiquetas.x1 a, .destino-etiquetas.x1 span{
        font-size: .750rem;
        padding: .1rem;
    }
}
@media (max-width: 490px) {

    .destino-etiquetas{
        gap:.5rem
    }

    .destino-etiquetas.x4 a, .destino-etiquetas.x4 span {
        font-size: 1.3rem; 
        line-height: 1.3rem;
    }

    .destino-etiquetas.x3 a, .destino-etiquetas.x3 span {
        font-size: .9rem; 
        line-height: .9rem;
    }

    .destino-etiquetas.x1 a, 
    .destino-etiquetas.x1 span {
        font-size: .720rem; 
        padding: .1rem;
    }

}
/*grid imagenes verticales*/

.mod-ruta-th {
    display: flex;
    align-items: center;
    min-height: 100vh;

}

.mod-ruta-th  .titulo-eleg {
    font-size: 3.5rem;
}
.mod-ruta-th  .btn-custom{
    display: inline-block;
}
.mod-ruta-th .bx-detail {
    display: flex;
    flex-direction: column;
    gap:1.5rem;
    margin-top: .900rem;
}
.mod-ruta-th .bx-detail .wrap-info{
    margin-bottom: 0;
}
.mod-ruta-th .bx-detail .btn-custom{
    padding: .7rem 2.4rem;
    font-size: .950rem;
    margin-top: 1rem;
}
.grid-imagenes-3{
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap:1em;
    padding-left: 6rem;
}
.grid-imagenes-3 .imagen-w{
    height:420px;
  
}
.grid-imagenes-3 .imagen-w img {
        border-radius:35px;
        width: 100%;
        height: 100%;
        object-fit: cover;
        filter: grayscale(100%);
        transition: transform 1s ease, filter 1s ease;
        transform: scale(1);
}
.grid-imagenes-3 .imagen-w img:hover {
        filter: grayscale(0%); 
        transform: scale(1.1); 
}

.last-th-btn{
    display: none!important;
}
@media(min-width:1400px) and (min-height:780px){
    .mod-ruta-th .titulo-eleg {
        font-size:4rem;
    }
    
    .mod-ruta-th .bx-detail{
        width: 85%;
    }

    .grid-imagenes-3{
        padding: 0 1rem 0 4rem;
        gap:2rem;
    }
    .grid-imagenes-3 .imagen-w{
        height:560px;
    }
   
}
@media(min-width:1300px) and (min-height:550px) and (max-height:780px){
    .mod-ruta-th .container{
        width: 80%;
        max-width: 80%;
    }
    .grid-imagenes-3 .imagen-w {
        height: 28rem;
    }
    .mod-ruta-th .titulo-eleg {
        font-size: 3.5rem;
    }
    .mod-ruta-th .wrap-info, 
    .mod-ruta-th .sb-text {
        font-size: 1.2rem;
        line-height: 1.5rem;
        width: 70%;
    }
    .mod-ruta-th .bx-detail .btn-custom {
        padding: .4rem 2.4rem;
        font-size: .950rem;
        margin-top: .5rem;
    }
}

@media(min-width:640px) and (max-width:1200px){
    
     .mod-ruta-th .col-lg-5.d-flex.flex-column{
        width: 40%;
    }
    .mod-ruta-th .titulo-eleg {
        font-size: 2.2rem;
    }
    .mod-ruta-th .offset-lg-1{
        margin-left: 0;
    }
    
    .mod-ruta-th .col-lg-5.offset-lg-2{
        width: 47.666667%;
        margin-left: 10.66666667%;
    }

    .mod-ruta-th .bx-detail{
        display: flex;
        flex-direction: column;
    }

    .mod-ruta-th .bx-detail .btn-custom {
        padding: .5rem 1rem;
        font-size: 0.850rem;
        margin-top: .5rem;
    }
    .grid-imagenes-3{
        padding-left:13%;
    }
    .grid-imagenes-3 .imagen-w{
        height: 22rem;
    }
    .grid-imagenes-3 .imagen-w img{
        border-radius: 1.5rem;
    }
}
/*
@media(min-width:790px) and (max-width:1100px){
    .grid-imagenes-3{
        padding-left: 3rem;
    }
    .grid-imagenes-3 .imagen-w{
        height: 24rem;
    }
    .grid-imagenes-3 .imagen-w img{
        border-radius: 20px;
    }
    .mod-trimg{
        width: 60%;
    }
    .wrap-info {
        font-size: .800rem;
        line-height: 1.4rem;
    }
}
    

@media(min-width:640px) and (max-width:950px){
    .mod-ruta-th{
        min-height: 60vh;
    }
    .mod-ruta-th .col-lg-5{
        width: 40%;
    }
    .mod-trimg,
    .mod-ruta-th .imagenes-ruta-th{
        width: 60%;
        padding-left: 0;
    }
    .mod-ruta-th .titulo-eleg {
        font-size: 2rem;
    }

    .mod-ruta-th .grid-imagenes-3{
        padding-left: 3rem;
    }
    .mod-ruta-th .grid-imagenes-3 .imagen-w{
        height: 22rem;
    }
    .mod-ruta-th .grid-imagenes-3 img{
        border-radius: 20px;
    }
    .mod-ruta-th .bx-detail{
        display: flex;
        flex-direction: column;
    }
    .mod-ruta-th .wrap-info{
        font-size: .700rem;
    }
    .mod-ruta-th .bx-detail .btn-custom {
        padding: .5rem 1rem;
        font-size: 0.850rem;
        margin-top: .5rem;
    }
    .mod-ruta-th .image-wrapper {
        height: 20rem;
    }
    .imagenes-ruta-th .g-4 {
        --bs-gutter-x: .9rem;
    }
    .rounded-image{
        border-radius: 20px;
    }
}
    */

@media(min-width:480px) and ( max-width:639px){
    .bx-detail{
        display: flex;
        flex-direction: column;
        align-items: center;
        margin:1rem 0 2rem 0;
        text-align: center;
    }
    .bx-detail .align-self-start{
        align-self: center!important;
    }
    .mod-trimg{
        width: 70%;
        margin:0 auto;
       
    }
    .grid-imagenes-3{
        padding-left: 0;
    }
    #section-4 .titulo-eleg {
        font-size: 2.5rem;
        text-align: center;
    }
    
    .grid-imagenes-3 {
        padding: 0 ;
    }
    .grid-imagenes-3 .imagen-w{
        height: 22rem;  
    }
    .grid-imagenes-3 .imagen-w img{
        border-radius: 15px;
    }
    .mod-ruta-th .wrap-info {
        font-size: 1.025rem;
        font-weight: 300;
    }
    .mod-ruta-th .bx-detail{
            display: flex;
            flex-direction: column;
            text-align: center;
            gap: 1rem;
            margin-bottom: 2rem;
    }
    .mod-ruta-th .bx-detail .btn-custom {
        align-self: center!important;
    }
}

@media( max-width:480px){

    .grid-imagenes-3 {
        gap: 1rem;
        padding-left: 0;
    }
    .grid-imagenes-3 .imagen-w {
        height: 19rem;
    }
    .grid-imagenes-3 .imagen-w img{
        border-radius: 15px;
    }
    .mod-trimg{
        padding: 0 1.5rem;
    }

    .mod-ruta-th{
        min-height: 80vh;
        padding: 3rem 0;
    }
    .mod-ruta-th  .titulo-eleg {
        font-size: 2.5rem;
    }
    .mod-ruta-th  .align-items-center{
        text-align: center;
    }
    .mod-trimg{margin-top: 1.5rem;}
    
    .mod-ruta-th  .wrap-info{
        margin-bottom: 1rem;
        font-size: .900rem;
    }
    .mod-ruta-th .bx-detail{
        margin:.5rem 0;
    }
    .mod-ruta-th  .bx-detail .btn-custom{
        align-self:center!important;
        display: flex;
        font-size: .900rem;
        text-align: center;
        margin-top: 0;
        display: none;
    }
    .bx-detail {
        display: flex;
        flex-direction: column;
    }
    .imagenes-ruta-th{
        margin-top:3rem;
        padding: 0 1.5rem;
    }
    .imagenes-ruta-th .col-md-4{
        width:33.3333333%;
    }
    .imagenes-ruta-th .g-4{
        --bs-gutter-x:1rem!important
    }
    .mod-ruta-th .wrap-info{
        text-align: center;
    }
    .mod-ruta-th .image-wrapper {
        height: 17rem;
    }
    .rounded-image{
        border-radius: 20px;
    }
    .mod-ruta-th .btn-custom{
        padding: .5rem 1.8rem;
    }

    .last-th-btn{
        display: flex!important;
        margin:2.5rem auto 0 auto;
        width: 80%;
        justify-content: center;
        font-size: .800rem;
    }
}

@media(max-width:360px){
    .grid-imagenes-3 .imagen-w {
        height: 16rem;
    }
    .mod-ruta-th .titulo-eleg {
        font-size: 2.5rem;
    }
    .mod-ruta-th .wrap-info,
    .mod-ruta-th .sb-text {
        line-height: 1.1rem;
    }
    .mod-ruta-th .btn-custom {
        font-size: .850rem;
    }
}


/*informacio destino left*/

.info-destino-md{
    display:flex;
    flex-direction: column;
    gap:.2rem
}
.info-destino-md .dias-destino{
    font-weight: 500;
}
.info-destino-md .dias-destino,
.info-destino-md .fecha-destino{
    font-style: italic;
    font-family: var(--font-secondary);
    font-size: 1rem;
    color:#444;
}

.info-destino-md .fecha-destino{
    font-style: normal;
    margin:.5rem 0 1rem 0;
    font-weight: 300;
}

.info-destino-md .u-destino{
    display: flex;
    align-items: center;
    gap:1em;
    color:var(--color-primary);
    font-size: 1.2rem;

}
.info-destino-md .u-destino .pp{
    font-size: 1rem;
}

.info-destino-md .btn-custom {
    padding: 4px 20px;
    font-size: 0.950rem;
}

.info-destino-md .social-c{
    display: flex;
    flex-direction: column;
    gap:.5rem;
    margin-top:1.5rem;
   
}
.info-destino-md .social-c .text{
    font-family: var(--font-secondary);
    font-weight:400;
    color:#444
}
.info-destino-md .social-c a{
    width:35px;
    height: 35px;
}
.info-destino-md .social-i{
    display: flex;
    align-items: center;
    gap:.5rem;
}
.info-destino-md .social-c a.whatsapp{
    background: url(../images/icons/whatsapp-c.png) no-repeat center center;
    background-size: 30px;
}
.info-destino-md .social-c a.mail{
    background: url(../images/icons/Mail.png) no-repeat center center;
    background-size: 35px;
}


/*carousel superpuesto*/

.carousel-rutas {
    position: relative;
    width: 100%;
    height: 500px;
    margin: 0 auto;
    display: flex;
    justify-content: flex-start;
    align-items: center;
 
    border-radius: 25px;
}

.carousel-rutas .slide {
    position: absolute;
    width: 340px;
    height: 450px;
    transition: all 1.3s ease-in;
    transform-origin: center center;    
    z-index: 1;
   
}
.carousel-rutas .slide img{
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 50px;
}
.carousel-rutas .slide:first-child img,
.carousel-rutas .slide:last-child img{
  box-shadow:4px -4px 9px #646464;

}

.carousel-rutas .slide.active {
    transform: translateX(0) scale(1);
    opacity: 1;
    z-index: 5;
}

.carousel-rutas .slide.right {
   
    transition: all 1.5s ease;
}

.carousel-rutas .slide.exiting {
    position: absolute;
    z-index: 10; 
    transition: all 1.5s ease; 
}
.slick-prev, .slick-next {
  pointer-events: auto; 
}

.contenedor-carousel-mejores-rutas button i{
font-size: 30px;
}
.contenedor-carousel-mejores-rutas #next{
top: 50%;
left:78%;
}



.detalle-mejor-ruta .destino-etiquetas span, 
.detalle-mejor-ruta .destino-etiquetas a {
    border-radius: 0 5px 5px 0;
    padding: 5px 9px;
    font-size: 16px;
    cursor: pointer;
    font-weight: 300;
    font-family: var(--font-secondary);
}
.detalle-mejor-ruta h4{
    font-size: 28px;
    font-family: var(--font-primary);
    text-align: center;
}
.detalle-mejor-ruta{
    position: absolute;
    z-index: 8;
    border-radius: 25px;
    background:  linear-gradient(180deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.63) 100%);
    width: 100%;
    height: 100%;
    top:0;
    left:0;
    display: none;
    flex-direction: column;
    align-items: center;
    gap:.5em;
    padding: 1.5em;
    color:#fff;
}
.detalle-mejor-ruta .btn-custom{
    color:#fff;
    font-size:12px;
    border:1px solid #fff;
    background: rgba(255, 255, 255, 0.314);
    padding: 8px 6px;
}

/*mod header*/

.home-slider {
    position: relative;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 1;
}

.home-slider::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.45);
    z-index: 2;
}
.home-slider img{
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.home-slider .slide img {
    width: 100%;
    height: 100vh;
    background-size: cover;
    object-fit: cover;
}
.mdf-header{
    height: 100vh;
}
.mdf-header .content .logo{
    top:2rem;
    left:0;
    width: 220px;
}

.mdf-header .content {
    position: absolute;
    z-index: 3;
    top: 0;
    width: 88%;
    left: 6%;
    padding: 4rem 0 3rem 0;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    color:#fff;
}
.mdf-header .content h1{
    font-family: var(--font-primary);
    color:#fff;
    font-size:4.2rem;
    line-height: 4rem;
}

.mdf-header .content div{
        display: flex;
        flex-direction: column;
        gap: 1rem;
}
.mdf-header .content p{
    font-family: var(--font-secondary);
    font-size: 1.025rem;
    font-weight: 300;
    max-width: 70%;
    margin: 0 auto;

}
@media(min-width:1400px){
    .mdf-header .content .logo {
        width: 20rem;
    }
    .mdf-header .content{
        padding: 4rem 0;
    }
}


@media(max-width:480px){
    .mdf-header{
        height: 100vh!important;
    }
    .mdf-header .content h1{
        font-size: 3.2rem!important;
        line-height: 2rem!important;
    }
    .mdf-header .content p {
        max-width: 95%;
        font-size: .850rem;
    }
    .mdf-header .content {
        padding: 4rem 0!important;
    }
}

@media(max-width:360px){
    .mdf-header .content h1{
        font-size: 2.8rem!important;
        line-height: 2rem!important;
    }
    .mdf-header .content p{
        font-size: .900rem;
    }
}
   /* modulo  popup*/   
   .popup-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.7);
    display: none; 
    justify-content: center;
    align-items: center;
    z-index: 9999999;
  }

  
  .popup-content {
    background: #fff;
    padding: 20px;
    border-radius: 5px;
    width: 90%;     
    max-width: 400px; 
    transform: translateY(0);
    opacity: 1;
  }

  .popup-footer {
    margin-top: 20px;
    text-align: right;
  }

  .popup-footer button {
    margin-left: 10px;
    padding: 8px 16px;
    border: none;
    border-radius: 3px;
    cursor: pointer;
  }

  .popup-footer .popup-cancel {
    background: none;
    border:1px solid var(--color-primary);
    color: var(--color-primary);
  }

  .popup-footer .popup-accept {
    background: var(--color-primary);
    color: #fff;
  }

  @keyframes slideDown {
    from {
      transform: translateY(-100%);
      opacity: 0;
    }
    to {
      transform: translateY(0);
      opacity: 1;
    }
  }

  @keyframes slideUp {
    from {
      transform: translateY(0);
      opacity: 1;
    }
    to {
      transform: translateY(-100%);
      opacity: 0;
    }
  }


  .animate-in {
    animation: slideDown 0.3s ease-out forwards;
  }

  .animate-out {
    animation: slideUp 0.3s ease-out forwards;
  }

  .popup-content.color {
    background: #965871;
    padding: 20px;
    border-radius: 5px;
    width: 90%;
    max-width: 400px;
    transform: translateY(0);
    opacity: 1;
    color: #fff;
}
.form-notificacion h4{
    font-family: var(--font-primary);
    text-align: center;
}
.form-notificacion p{
    font-family: var(--font-secondary);
    font-size: .900rem;
    text-align: center;
}
.form-notificacion .popup-content.color input[type="text"]{
    border:0;
} 
.popup-footer .popup-accept{
    color:var(--color-primary);
    background: #fff;
}
.popup-footer .popup-cancel{
    color:#fff;
    border:1px solid #fff;
}