@charset "UTF-8";
.linea_hab{
    background-color: var(--stroke-weak);
    height: 1px;
}
.margin-linea{
    margin: var(--padding-24) 0;
}
.margen-container{
    padding: 0 var(--padding-max);
    margin-top: var(--padding-max);
}
.title_habitacion{
    display: flex;
    width: 100%;
    justify-content: space-between;
}
.title_habitacion h1{
    font-size: var(--h2);
}

.div_twoCol{
    display: flex;
    width: 50%;
    
    align-items: center;
    gap: var(--padding-min);
}
.compartir_hab{
    justify-content: flex-end;
    width: max-content;
}
.txt_aloj h2{
    font-size: var(--h3);
    font-weight: 600;
}
.icono_mapAloj{
    width: var(--padding-32);
    height: var(--padding-32);
}
.ubic_div{
    display: flex;
    align-items:  flex-start;
    gap: var(--padding-min);
}
.ubic_div a{
    font-size: var(--h4);
    font-weight: 600;
}
/*CAROUSEL IMAGENES DEL ALOJAMIENTO*/
.carousel {
    position: relative;
    width: 100%;
    max-width: 1440px;
    height: 440px;
    overflow: hidden;
    border-radius: 24px;
    margin: -48px 0 var(--padding-48) 0;
    
  }
  .carousel-images {
    display: flex;
    height: 100%;
    transition: transform 0.5s ease-in-out;
    column-gap: 16px; /* espacio entre imágenes */
  }
  .carousel-images img {
    width: 50%;
    height: 100%;
    object-fit: cover;
    flex-shrink: 0;
    border-radius: var(--padding-24);
  }

  .carousel button {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    background-color: transparent;
    border: none;
    cursor: pointer;
    z-index: 10;
  }
  .prev {
    left: 10px;
  }
  .next {
    right: 10px;
  }
/*DETALLES ALOJAMIENTO*/
.detalles_alojamiento{
    display: flex;
    width: 100%;
    gap: var(--padding-48);
   

}
.detalles_alojamiento h3{
    font-size: var(--h5);
}
/* Modal descripción alojamiento */
.modalMostrarD {
    visibility: hidden;
    opacity: 0;
    position: fixed; /* Se cambia a fixed para que cubra toda la pantalla */
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(77, 77, 77, 0.7);
    transition: all 0.4s;
    z-index: 9999; /* Asegura que esté por encima de otros elementos */
}

/* Bloquea el scroll del body cuando el modal está activo */
.mostrarMas{
    text-decoration-line: underline;
    font-size: var(--base);
}
body.modal-open {
    overflow: hidden; 
}

.modal-contentD {
    position: relative;
    width: 90%; /* Se ajusta para que sea más responsivo */
    max-width: 800px;
    max-height: 90vh; /* Limita altura para evitar overflow */
    overflow-y: auto;  /* Permite hacer scroll si el contenido es extenso */
    background: var(--background);
    border-radius: 20px;
    padding: var(--padding-24) var(--padding-32);
    box-shadow: 0px 8px 10px 0px rgba(0, 0, 0, 0.2);
}
.modalEditar{
    width: 30%;
    padding:  var(--padding-32);
}
.modalEditar h4{
    font-size: var(--h5);
    margin-bottom: var(--padding-min);
}
.modalEditar .btnFil{
    display: flex;
    align-items: center;
    justify-content: center;
}
#Politicas-normas .div-services{
    width: 100%;
}
.modal-contentD h3 {
    margin-top: 0;
    text-align: start;
}

.modalMostrarD:target {
    visibility: visible;
    opacity: 1;
}


/* Cerrar modal */
.close-btnM {
    text-align: right;
}

.close-btnM a {
    display: inline-block;
    cursor: pointer;
}
.modal_close img{
    width: var(--padding-24) !important;
    height: var(--padding-24) !important;
}
.editarText{
    font-size: var(--base);
}
/*RESERVAR-------*/

.inicio-reserva {
    width: 40%;
    
    position: relative;
}


.detalles_info{
    display: flex;
    flex-direction: column;
    gap: var(--padding-32);
    width: 60%;

}
.descripcion_alojamiento{
    padding: var(--padding-16) 0 var(--padding-32) 0;
}
.list_servicios_pop{
    display: flex;
    gap: var(--padding-max);
    padding: var(--padding-16) 0 var(--padding-32) 0;
}
.list_servicios_pop ul li {
    display: flex;
    gap:var(--padding-min);
    align-items: center;
    padding-bottom: var(--padding-16);
    font-size: var(--base);
    position: relative;
}
.list_servicios_pop ul li img{
    width: var(--padding-24);
    height: var(--padding-24);
}
/*ToolTip Información*/
.info-icon {
    margin-left: 10px;
    cursor: pointer;
    width: var(--base);
    position: relative;
    z-index: 10;
  }
  
  .info-box {
    display: none;
    position: absolute;
    top: 30px;
    right: 30px;
    z-index: 32;
    background-color: var(--background);
    border: 1px solid #ccc;
    padding: var(--padding-24);
    border-radius: var(--padding-24);
    width: 456px;
  }
  
  .entendido-btn {
    margin-top: var(--padding-16);
    width: auto;
  }
  
  .overlayTooltip {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.5);
    z-index: 30;
  }
  
  /*------------*/

.detalles_politicasN{
    padding: var(--padding-16) 0 var(--padding-32) 0;
}
.descrip-normas{
    display: flex;
    gap: var(--padding-32);
    padding: var(--padding-16) 0 var(--padding-32) 0;
    width: 100%;
}
.ent-salid{  
    align-items: flex-start;
    width: 100%;
}
.e-s{
    display: flex;
    flex-direction: column;
    gap: var(--padding-min);
}
.ent-salid img{
    width: var(--padding-24);
    height: var(--padding-24);
}
.ubicacion_alojamiento{
    display: flex;
    flex-direction: column;
    gap:var(--padding-24);
}
.map_border{
    border-radius: var(--padding-24);
}
.alojamiento_enlace{
    font-size: var(--base);
}
.info_reservar{
    border: 1px solid var(--stroke-weak);
    padding: var(--padding-24);
    border-radius: var(--padding-24);
    background-color: var(--background);
   
    position: sticky;
    top: 20px;  /* Ajusta el valor según la distancia deseada desde la parte superior */
    z-index: 10;  /* Asegúrate de que esté por encima de otros elementos */
   
}

/*------VENTANA RESERVAR------*/
.btn_fechas{
    display: flex;
    align-items: center;
    justify-content: space-between;
    align-self: stretch;
    height: max-content;
    width: 100%;
    padding: var(--padding-24) 0;
    gap: var(--padding-24);
}
.btn_ls{
    padding: var(--padding-min) var(--padding-24);
    border: 1px solid var(--text-strong);
    border-radius: var(--padding-min);
    width: 50%;
    height: max-content;
}
.parrafo_semib{
    font-weight: 600;
}
.btn_personas{
    padding: var(--padding-min) var(--padding-24);
    border: 1px solid var(--text-strong);
    border-radius: var(--padding-min);
    width: 100%;
    height: max-content;
    margin-bottom: var(--padding-24);
    cursor: pointer; 
}
.valorxnoche{
    padding-top: var(--padding-24);
    padding-bottom: var(--padding-min);
    display: flex;
    justify-content: space-between;
}
.precio_habitC{
    padding-bottom: var(--padding-16);
}
.gastosLimp{
    padding-bottom: var(--padding-24);
    display: flex;
    justify-content: space-between;
}
.txtlinedecor{
    text-decoration: underline;
}
.txt_total{
    padding: var(--padding-24) 0;
    display: flex;
    justify-content: space-between;
}
.btnRe{
    background: var(--brand);
    width: 100%;
    height: var(--padding-48);
    border:0px;
    border-radius: var(--padding-24);
    padding: 0 var(--padding-24);
    color: var(--background);
    font-size: var(--base);
    cursor: pointer;
}
.btnRe:hover{
    background: var(--text-strong);
}
.txtmsj{
    text-align: center;
    font-size: var(--padding-16);
    padding-top: var(--padding-min);
}

/*MOBILE BIENVENIDA*/
.bienvenida_mobile{
    display: none;
}


/*compartir pop up*/
.eleccionAp {
    display: flex;
    padding-top: var(--padding-24);
    gap: var(--padding-16);
}
.eleccionAp img{
    width: 20%;
    height: 96px;
    object-fit: cover;
    border-radius: var(--padding-min);
}

.div-compartir{
    width: 100%;
    justify-content: space-between;
    padding: var(--padding-24) 0;
    gap: var(--padding-48);
    
}
.redes-comp{
    width: 100%;
    
}
.btn-red-comp{
    border: 1px solid var(--text-strong);
    padding: var(--padding-min) var(--padding-24);
    width:100%;
    border-radius: var(--padding-min);
    margin-bottom: var(--padding-24);
    cursor: pointer;
}
.btn-red-comp img{
    width: var(--padding-24);
    height: var(--padding-24);
}


/*Pop up servicios Alojamiento*/
.div-services{
    width: 70%;
    align-items: flex-start;
    margin-top: var(--padding-16);
}
/*Div Fijo Reservar Solo movil*/
.divReservarFijo{
    display: none;
}

@media screen and (max-width: 1024px){
    .detalles_info{
        width: 50%;
    }
    .inicio-reserva{
        width: 50%;
    }
    .list_servicios_pop{
        gap: var(--padding-24);
    }
    .list_servicios_pop ul li{
        align-items: flex-start;
    }
    .modalEditar{
        width: 50%;
        
    }
}
@media screen and (max-width: 900px){
    .carousel{
        margin: 0px 0 var(--padding-48) 0;
    }

    .carousel-images img {
        width: 100%; /* 1 imagen por fila sin gap */
      }
}
@media screen and (max-width: 768px){
    .margen-container{
        padding: 0 var(--padding-24);
        margin-top: var(--padding-32);
    }
    .info-box{
        width: 425px;
    }
    .detalles_alojamiento{
        flex-wrap: wrap;
    }
    .detalles_info{
        width: 100%;
    }
    .inicio-reserva{
        width: 100%;
    }
    .list_servicios_pop{
        gap: var(--padding-48);
    }
    .list_servicios_pop ul li{
        align-items: center;
    }
    .carouselAlojamiento img{
        width: 100%;
        margin-left: 0;
    }

    /*MOBILE BIENVENIDA*/
    .escritorioC{
        display: none;
    }
    .bienvenida_mobile{
        display: block;
    }
    .padding-textMobile{
        display: flex;
        flex-direction: column;
        gap: var(--padding-min);
        padding: 0 var(--padding-24);
    }
    /*CAROUSEL MOBIEL*/
    .top_carousel{
        display: flex;
        justify-content: space-between;
        padding: 0 var(--padding-24);
        margin-bottom: -78px;
        
    }
    .top_carousel a{
        z-index: 10;
        margin-top: 16px;
        
    }
    .bienvenida_mobile .modal_close{
        margin-top: 0px;
    }
    .top_carousel img{
        width: 40px;
        height: 40px;
    }
    
    .carouselM {
        position: relative;
        width: 100%;
        height: max-content; /* Ajusta a la altura de tus imágenes */
        overflow: hidden;
        padding-bottom: var(--padding-32);
      }
  
      .carousel-track {
        display: flex;
        transition: transform 0.3s ease;
      }
  
      .carousel-slide {
        flex: 0 0 100vw;
        height: 100%;
      }
  
      .carousel-slide img {
        width: 100%;
        height: 500px;
        object-fit: cover;
        display: block;
      }
  
      .carousel-indicator {
        position: absolute;
        bottom: var(--padding-48);
        right: var(--padding-24);
        background: var(--text-strong);
        color: var(--fill);
        padding: 4px var(--padding-min);
        border-radius: 4px;
        font-size: 14px;
        font-family: sans-serif;
      }

      .info_reservar{
        position: static;
        width: 100%; /* Se mantiene en flujo normal sin "sticky" */
        z-index: 9998; /* Asegurar que no se superponga innecesariamente */
        
      }
      .bienvenida_mobile .txt_aloj{
        display: flex;
        flex-direction: column;
        gap: var(--padding-min);
      }
      .bienvenida_mobile .ubic_div a{
        font-size: var(--h5);
      }
      .bienvenida_mobile .ubic_div img{
        width: var(--padding-24);
        height: var(--padding-24);
      }
      .modal-contentD h3 {
        margin: var(--padding-min) 0;
    }
    .modal-contentD{
        padding: var(--padding-16);
    }
    .modalEditar{
        width: 60%;
        padding: var(--padding-32);
        
    }
/*Pop up de compartir alojamiento*/


    
    .bienvenida_mobile .top_carousel .eleccionApImg{
        width: 30%;
        height: auto;
        object-fit: cover;
    }
    .bienvenida_mobile .top_carousel img {
        width: 24px;
        height: 24px;
    }

    .icon-compartir{
        width: 40px !important;
        height: 40px !important;
    }
    .icon-atras-mobile{
        width: 48px !important;
        height: 48px !important;

    }
    /*Div Fijo Reservar Solo movil*/
    .divReservarFijo{
        width: 100%;
        display: flex;
        gap:var(--padding-48);
        align-items: center;
        justify-content: space-between;
        background-color: var(--fill);
        padding: var(--padding-24);
        position: fixed;
        bottom: 0;
        z-index: 999;
        transition: transform 0.3s ease; /* <- Esto hace la transición suave */
    }
    .btnFijoReservar{
        background-color: var(--brand);
        border-radius: 24px;
        box-shadow: 0px 4px 16px 0px rgba(0, 0, 0, 0.20);
        border: none;
        border-radius: var(--padding-24);
        color: var(--background);
        font-weight: 600;
        font-size: var(--base);
        width: 121px;
        height: 40px;
        display: flex;
        justify-content: center;
        align-items: center;

    }
    .btn_flotanteH{
        bottom: 85px;
    }
    #editarFechas .modal-contentD {
        width: 70% !important;
        
    }
    .div-compartir{
        align-items: flex-start;
    }
}
@media screen and (max-width: 426px){
    .title_habitacion{
        flex-wrap: wrap;
    }
    .compartir_hab{
        width: 100%;
    }
    
    
    .info-box{
        width: 270px;
        right: 0px;
    }
    .descrip-normas{
        flex-wrap: wrap;
        gap: var(--padding-16);
    }
    /*MOBILE BIENVENIDA*/
    .bienvenida_mobile .icono_mapAloj {
        width: var(--padding-16);
        height: var(--padding-16);
    }
    .bienvenida_mobile .ubic_div{
        gap: 4px;
    }
    .bienvenida_mobile .ubic_div a {
        font-size: var(--base);
        font-weight: 400;
    }
    .div-compartir{
        flex-wrap: wrap;
        gap: 0;

    }
      /*MOBILE carousel*/
    .carousel-slide img {
        width: 100%;
        height: 264px;
        object-fit: cover;
        display: block;
      }
      .list_servicios_pop{
        flex-wrap: wrap;
        gap: 0;
    }
    .div-services{
        width: 100%;
    }
    .modalEditar{
        width: 90%;
        padding: var(--padding-24);
        
    }
    #editarFechas .modal-contentD {
        width: 90% !important;
        
    }
    
}