/* Container layout */
.rbl-single-property-container {
  display: grid;
  grid-template-columns: 2fr 1fr;
  gap: 40px;
  max-width: 1200px;
  margin: 0 auto;
  padding: 40px 2px;
  padding-bottom: 8px;
  /* font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; */
}

/* Gallery */
.rbl-property-gallery {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
  gap: 10px;
}

.rbl-property-gallery img {
  width: 100%;
  height: 200px;
  object-fit: cover;
  border-radius: 8px;
}

/* Main content */
.rbl-property-main h1 {
  font-size: 28px;
  font-weight: bold;
  margin-bottom: 10px;
}

.rbl-property-meta {
  font-size: 14px;
  color: #555;
  margin-bottom: 20px;
  padding-top:4px;
}

.rbl-property-description {
  font-size: 16px;
  line-height: 1.6;
  color: #333;
  margin-top: 30px;
}

/* Amenities */
.rbl-amenities-list {
  margin-top: 20px;
}

.rbl-amenities-list h3 {
  font-size: 18px;
  font-weight: bold;
  margin-bottom: 10px;
}

.rbl-amenities-list ul {
  list-style: none;
  padding: 0;
  margin: 0;
  columns: 2;
}

.rbl-amenities-list li {
  margin-bottom: 8px;
  font-size: 14px;
  color: #444;
  display: flex;
  align-items: center;
}

.rbl-amenities-list li::before {
  content: "✓";
  margin-right: 8px;
  color: #555;
}

/* Map */
.rbl-map-container {
  margin-top: 30px;
  height: 280px;
  border-radius: 8px;
  overflow: hidden;
}

.rbl-map-container iframe {
  width: 100%;
  height: 100%;
  border: none;
}

/* Booking widget sticky */
.rbl-booking-sidebar {
  position: sticky;
  top: 100px;
}

/* Responsive layout */
@media (max-width: 900px) {
  .rbl-single-property-container {
    grid-template-columns: 1fr;
  }

  .rbl-booking-sidebar {
    position: relative;
    top: auto;
    margin-top: 40px;
  }
}

.rbl-photo-gallery {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  grid-auto-rows: 150px;
  gap: 8px;
  overflow: hidden;
  border-radius: 12px;
}

.rbl-photo-gallery img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 10px;
}

/* First image spans 2 rows for a larger highlight image */
.rbl-photo-gallery img:first-child {
  grid-row: span 2;
  grid-column: 1;
  height: 100%;
  object-fit: cover;
  border-bottom-left-radius: 0px;
}
.rbl-photo-gallery img:first-child,
.rbl-photo-gallery img:nth-child(2n){
    border-top-right-radius: 0px;
    border-bottom-right-radius: 0px;
}
.rbl-photo-gallery img:nth-child(2n),
.rbl-photo-gallery img:nth-child(3n),
.rbl-photo-gallery img:nth-child(4n),
.rbl-photo-gallery img:nth-child(5n){
    border-top-left-radius: 0px;
    border-bottom-left-radius: 0px;
}

.rbl-photo-gallery img:nth-child(3n){
    border-top-right-radius: 0px;
    border-bottom-right-radius: 0px;
}

.rbl-photo-gallery img:nth-child(5n){
    border-top-right-radius: 0px;
}

/* #header{
  background-color:black;
  position:fixed;
  width:100%;
  top:3%;
  left:0;
  z-index:1 !important;
  padding-bottom:1px !important;
}
#header .headerimg{
  display: flex;
  justify-content: space-between;
  align-items: center;
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 20px;

} */
#footer {
  background-color: #000;
  color: #FFF;
  position: absolute;
  left: 0;
  width: 100%;
  padding: 20px 0; /* Añade espacio interno */
  z-index:0 !important;

}

#footer p {
  display: flex; /* Activa Flexbox */
  justify-content: space-between; /* Distribuye el espacio entre los bloques */
  align-items: center; /* Centra verticalmente los elementos */
  max-width: 1200px; /* Ancho máximo del contenido */
  margin: 0 auto; /* Centra el contenedor */
  padding: 0 20px; /* Espacio a los lados */
}

.block-right {
  display: flex; /* Para alinear los spans horizontalmente */
  gap: 20px; /* Espacio entre los elementos del bloque derecho */
}
@media (max-width: 1024px){
  #footer {
    padding-bottom:100px;      
  }
}






.booking-card {
  display:none;
  border: 1px solid #ddd;
  width: 100%;
  padding:10px 20px;
  background: white;
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.1);
  position: fixed;
  bottom:0;
  left:0;
  right:0;
  justify-content: space-between;
}

.price {
  font-size: 20px;
  font-weight: bold;
}

.rating {
  font-size: 14px;
  color: #717171;
}
.booking-card.reserve-button {
  width: 100%;
  background-color: #ff385c;
  color: white;
  border: none;
  padding: 14px;
  font-size: 16px;
  border-radius: 10px;
  margin-top:2px;
  cursor: pointer;
}

.booking-card.reserve-button:hover {
  background-color: #e11d48;
}
@media (max-width: 1024px) {
  .booking-card {
    display: flex;
  }
}

  html {
    scroll-behavior: smooth;
  }
  .ocultar-scroll {
    overflow: scroll;
    scrollbar-width: none;     /* Firefox */
    -ms-overflow-style: none;  /* Internet Explorer 10+ */
  }

  .ocultar-scroll::-webkit-scrollbar {
    display: none;             /* Chrome, Safari, Opera */
  }
  .scroll-link{
    cursor:pointer;
  }

  /* ====================================================
    Base Styles
    ==================================================== */
  /* Reset básico y estructura del tema Hello */
  *,
  *::before,
  *::after {
    box-sizing: border-box;
  }
  
  /* Body font and color */
  body {
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
    font-size: 16px;
    line-height: 1.5;
    color: #333333 !important;
    background-color: #fff;
    font-weight: 300;
    width:100%;
    margin: auto;
    padding: 0; 
    /* min-width: 481px; */
  }
  main{
    max-width: 57.5%;
    max-width: 1200px;
    margin: auto;
    /* padding: 0 20px;  */
  }
  /* Tamano Responsive para el limite de la pantalla en el contenido */
  @media (max-width: 1440px){
    main {
      max-width: 1140px;
    }
  }
  @media (max-width: 1360px){
    main {
      max-width: 1140px;
    }
  }
  @media (max-width: 1280px) {
    main {
      max-width: 90%;
      /* background:red; */
    }
    .rbl-photo-gallery img{
      width:100% !important;
    }
  }
  /*
	@media (min-width:992px) {
	  main {
    	max-width:100% !important;
	  }
  }
  @media (min-width:768px) {
	  main {
    	max-width:100% !important;
	  }
  }
  @media (min-width:576px) {
	  main {
    	max-width:100% !important;
	  }
  }
*/

   /* Entre 1200px y 992px: reducir márgenes laterales */
  @media (max-width: 1199px) {
	  main {
    	max-width:100% !important;
		  padding:0 32px;
	  }
	.rbl-single-property-container {
      padding: 20px 2px;
	}
  }
  @media (max-width: 1024px) {
	  .rbl-property-info {
    	margin-top:2rem !important;
	  }
  }

  @media (max-width: 1110px){
    main {
      max-width: 100%;
    }
  }
  
  @media (max-width: 768px) {
    main {
      max-width: 100%;
      padding: 0 24px;
    }
	.rbl-property-info {
  	  margin-top:0.5rem !important;
	}
  }
  
  @media (max-width: 480px) {
    body.single {
      /* min-width: 479px; */
      max-width: 100%;
      padding: 0 20px;
    }
  }
  /* Estilo en botones, que estaban solo adaptados al tema */
  button,
  .button,
  input[type="submit"],
  input[type="button"],
  a.button {
    display: inline-block;
    padding: 0.75em 1.5em;
    margin-top: 13px;
    font-size: 1rem;
    font-weight: 500 !important;
    line-height: 1.2;
    text-align: center;
    text-decoration: none;
    color: #1a1a1a;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    transition: background-color 0.3s ease;
  }
  
  button:hover,
  .button:hover,
  input[type="submit"]:hover,
  input[type="button"]:hover,
  a.button:hover {
    background-color: #df3a5e;
    color: #FFFFFF;
  }
  .button-modal{
    border-radius:50%;
    width:35px;
    height:35px;
    background: none !important;
    color:#454545;
    padding:4px 10px;
    margin:0;
  }
  .button-modal .material-icons{
    margin-left:-4px;
    margin-top:1px;
  }
  .button-modal:hover{
    border-radius:50%;
    background-color: #efeeee !important;
    color: #000000;
  }
  
  /* Titulos y textos con espacios alterados corregidos */
  h1, h2, h3, h4, h5, h6,
  p, ul, ol, figure,
  blockquote, dl, dd {
    margin: 0;
    padding: 0;
  }
  /* Manejo de fuente, colores, separacion y grosor de textos */
  h1, h2, h3, h4, h5, h6 {
    margin: 0 0 1em 0;
    font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
    font-weight: 400;
    line-height: 1.2;
    color: #1e1e1e;
  }
  
  ul, ol {
    list-style: none;
  }
  
  a {
    text-decoration: none;
    color: inherit;
  }
  a.elementor-button{
    color: #FFF;
  }
  img {
    max-width: 100%;
    height: auto;
    display: block;
  }
  
  
  /* Divider: Thick (used between major sections) */
  .divider {
    display: block;
    width: 100%;
    border-top: 1px solid rgba(0, 0, 0, .2);
    padding: 0;
    margin: 40px 0px;
  }

  /* Divider: Thin (used inside modals/lists) */
  .divider-thin {
    display: block;
    width: 100%;
    border-top: 1px solid rgba(0, 0, 0, .2);
    padding: 0;
    margin: 20px 0px;
  }

  /* Utility: Hide elements (.d-none) */
  .d-none {
    display: none;
  }

  /* Utility: Align close button to the right */
  .close-buttons-modal-block {
    float:right;
    border-radius:50%;
    margin-top:10px;
  }
  
  
  /* Container alignment */
  .rbl-single-property-container {
    /* max-width: 1200px;       /* ← tamaño máximo del contenido */
    width: 100%;             /* ← ocupa todo el espacio disponible */
    margin-left: auto;       /* ← centra el contenido */
    margin-right: auto;
    padding-left: 0;      /* ← margen interior para pantallas pequeñas */
    padding-right: 0;
    display: flex;
    justify-content: space-between;
    gap: 2rem;
  }
  @media screen and (max-width: 1400px) {
    /* .rbl-single-property-container { */
      /* padding-left: 2rem; */
      /* padding-right: 2rem; */
    /* } */
  }
  


  .rbl-property-info {
    width: calc(100% - 2rem); /* 360px de sidebar + 2rem de gap */
    min-width: 300px;
  }


  /* Sticky sidebar */
  .rbl-booking-sidebar {
    position: sticky;
    width: 330px;
    min-width: 260px;
    flex-shrink: 0;
    margin-left: auto;
    margin-top: 1.25rem;
    height: fit-content;
  }

  @media screen and (max-width: 1024px) {
    /* .rbl-single-property-container {
      flex-direction: column;
      max-width: 100%;
      padding:0;
    } */
    .rbl-single-property-container {
      display: flex;
      flex-direction: column;
      padding: 0;
    }

    /* .rbl-property-info {
      width: 100%;
      margin-left:-5%;
      margin-top:2rem;
    } */
    .rbl-booking-sidebar {
      width: 100%;
      max-width: none;
      position: static;
      margin-left: 0;
      margin-top: 2rem;
    }
  }

  .block-content-photos-all .rbl-property-hero{
    max-height:85vh;
    overflow-y: scroll;
  }
  .rbl-content-photos-group{
    display:block;
    margin-top:30px;
  }
  .rbl-content-photos-group strong{
    display:block;
    width:100%;
    margin-top:30px;
  }




  /* ====================================================
    Swiper “Where You’ll Sleep” Styles
    ==================================================== */
  /* 1) Sección principal y contenedor */
  .sleep-section {
    width: 100%;
    /* max-width: 700px; */
    margin: 0 auto;
    /* padding: 32px 16px; */
  }

  /* 2) Header: Título + navegación */
  .sleep-header {
    float:right;
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 24px;
  }

  .sleep-section__title {
    font-size: 22px;
    font-weight: 500;
    /* color: #222222; */
  }

  .sleep-nav {
    display: flex;
    align-items: center;
    z-index:0 !important;
  }

  /* Flechas estilo circular, fondo blanco, sombra ligera */
  .sleep-slider__nav--prev,
  .sleep-slider__nav--next {
    width: 72px;
    height: 36px;
    background-color: #ffffff;
    border-radius: 50%;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
    display: flex;
    justify-content: center;
    align-items: center;
    cursor: pointer;
  }

  /* Forzar posición estática de flechas y paginación */
  .sleep-sandbox .sleep-slider__nav--prev,
  .sleep-sandbox .sleep-slider__pagination,
  .sleep-sandbox .sleep-slider__nav--next {
    position: static !important;
  }

  /* Ajustes del icono de flecha (Swiper inyecta ::after) */
  .sleep-slider__nav--prev::after,
  .sleep-slider__nav--next::after {
    font-size: 16px;
    color: #333333;
  }

  /* Margen entre flecha y paginación */
  .sleep-slider__nav--prev {
    margin-right: 12px;
  }
  .sleep-slider__nav--next {
    margin-left: 12px;
  }

  /* Paginación tipo “1 / 3” */
  .sleep-slider__pagination {
    font-size: 14px;
    font-weight: 500;
    color: #333333;
    white-space: nowrap;
    margin-top: -15px;
  }

  /* 3) Contenedor del slider */
  .sleep-slider {
    width: 100%;
  }
  .swiper {
    position: relative;
    overflow: hidden;
    z-index: 0 !important;
  }
  .sleep-slider .swiper-wrapper {
    overflow: visible;
    position: relative;
    z-index:0 !important;
  }

  /* 4) Cada slide: imagen + info */
  .sleep-slider__slide {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
  }

  /* Imagen con bordes redondeados */
  .sleep-slide__image {
    width: 100%;
    height: auto;
    max-height: 225px !important;
    border-radius: 12px;
    object-fit: cover;
    display: block;
    margin-bottom: 12px;
  }

  .sleep-slide__info {
    width: 100%;
  }

  .sleep-slide__title {
    font-size: 18px;
    font-weight: 500;
    color: #111111;
    margin-bottom: 4px;
  }

  .sleep-slide__text {
    font-size: 14px;
    font-weight: 400;
    color: #555555;
    line-height: 1.4;
  }

  /* 5) Responsive (Pantallas pequeñas) */
  @media (max-width: 767px) {
    .sleep-section {
      padding: 24px 12px;
    }
    .sleep-header {
      flex-direction: column;
      align-items: flex-start;
    }
    .sleep-nav {
      margin-top: 16px;
    }
  }



  /* ====================================================
    Guest Favourite / Badge / Rating Inline Styles
    ==================================================== */
  .guest-favourite-container {
    display: flex;
    align-items: center;
    border: 1px solid #E0E0E0;
    border-radius: 12px;
    padding: 12px 16px;
    /* font-family: Arial, sans-serif; */
    background-color: #FFFFFF;
  }

  .badge {
    display: flex;
    align-items: center;
    margin-right: 24px;
  }

  .badge .laurel {
    width: 20px;
    height: 20px;
    fill: none;
    stroke: #333333;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
  }

  .badge .mirror {
    transform: scaleX(-1);
  }

  .badge span {
    margin: 0 8px;
    font-size: 14px;
    font-weight: 500;
    color: #333333;
    white-space: nowrap;
  }

  .description {
    flex: 1;
    font-size: 14px;
    color: #333333;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  .rating {
    display: flex;
    align-items: center;
    margin-right: 16px;
    white-space: nowrap;
  }

  .rating-value {
    font-size: 16px;
    font-weight: 600;
    color: #333333;
    margin-right: 6px;
  }

  .stars {
    display: flex;
    align-items: center;
  }

  .stars .star {
    width: 16px;
    height: 16px;
    fill: #FFB400;
    margin-right: 2px;
  }

  .stars .star:last-child {
    margin-right: 0;
  }

  .separator {
    width: 1px;
    height: 24px;
    background-color: #E0E0E0;
    margin: 0 16px;
  }

  .reviews {
    font-size: 14px;
    color: #333333;
    white-space: nowrap;
  }



  /* ====================================================
    Icons and Property Description Styles
    ==================================================== */
  .icons-all {
    font-size: 1.5em;
    margin-right: 20px;
    color: #636363;
  }

  .rbl-property-description :is(h1,h2,h3,h4,h5,h6){
      margin-bottom: 0.5em;
      margin-top: 1.35em;
  }

  .rbl-property-description {
    font-size: 1.1em;
    font-weight: 300;
  }

  .rbl-property-description p {
    font-size: .95em;
    line-height: 1.7rem;
    font-weight: 400;
    margin-block: 1em;
    margin-bottom: 1.25em;
  }
  .rbl-property-description p:first-child {
    margin-top: 0px
  }

  .rbl-property-description strong {
    margin: 0;
    padding: 0;
  }

  .blocks-items {
    font-size: .95em;
    margin-top: 10px;
    margin-bottom: 10px;
  }

  /* Preview lists inside modals */
  .rbl-amenities-preview-style > ul {
    column-count: 2;
    column-gap: 20px;
  }

  .rbl-preview-modal ol{
    list-style-position: inside;
  }
  .rbl-preview-modal li {
    padding: 7px;
    font-size: 1.1em;
    font-weight: 400;
    /* list-style: none; */
    list-style: auto;
    list-style-position: inside;
  }
  .rbl-preview-modal :is(h1,h2,h3,h4,h5,h6){
    font-weight: bold;
  }
  .rbl-preview-modal :is(h1,h2,h3,h4,h5,h6){
    margin-bottom: 0.5em;
    margin-top: 1.35em;
  }
  .rbl-preview-modal h3:first-child{
      margin-top: 0em;
  }

  .rbl-preview-modal p {
    margin-block: 1em;
    margin-bottom: 1.25em;
  }
  .rbl-preview-modal p:first-child {
    margin-top: 0px
  }

  .rbl-amenities-preview-block h3 {
    font-weight:bold;
  }

  .rbl-amenities-preview-block ul {
    padding: 0px;
  }

  .rbl-amenities-preview-block strong {
    font-size: 1.1em;
    font-weight: 600;
  }

  .rbl-amenities-preview-block .list-group {
    list-style: none;
    margin-bottom:6px;
    margin-top:15px;
  }

  .rbl-amenities-preview-block .list-item{
    list-style: none;
    font-size: 1em;
    font-weight: 400;
    /* display:flex; */
    gap:5px;
    align-items: center;
    padding-block: 1.5px;
  }

  .rbl-amenities-preview-block .list-item small{
    font-size:.75em;
    display:block;
    padding-left:6%;
  }

  .rbl-amenities-preview-block {
    width: 100%;
    height: 70vh;
    overflow: auto;
    margin-left: -10px;
    margin-right: -10px;
  }



  /* ====================================================
    Photo Modal Styles
    ==================================================== */
  /* “Show all photos” button positioning */
  .more-photos {
    position: relative;
    margin-top: -60px;
    margin-right: 15px;
    float: right;
  }

  /* Common button style for “Show more” */
  .rbl-more-buttons {
    border-radius: 8px;
    background: rgb(245, 245, 245);
    color: #222222;
    border: 1px solid rgba(0, 0, 0, 0.1);
    font-weight: 500;
  }

  /* Modal container for photos */
  .more-blocks-photos {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 90%;
    height: 90%;
    background: white;
    padding: 30px;
    box-shadow: 0px 4px 10px rgba(0, 0, 0, .3);
    border-radius: 8px;
  }

  /* Overlay backdrop for photos modal */
  .more-blocks-photos-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, .5);
    /* z-index: 999; */
  }

  /* Gallery grid inside photo modal */
  .rbl-photo-gallery-block {
    width: 65%;
    margin: auto;
    display: flex;
    flex-wrap: wrap;
    gap: 5px;
    /* height: 50vh; */
    max-height: 70vh;
    overflow: scroll;
  }

  .block-img-photo-gallery {
    width: 120px;
    height: 120px;
    aspect-ratio: 4 / 3; /* O usa 1 / 1 si quieres cuadrado */
    overflow: hidden;
    border: 1px solid #ccc;  /* Si ya está en uso, ignora esta línea */
    border-radius: 8px;
    background: #f2f2f2;
    position: relative;
  }



  .block-img-photo-gallery2,
  .img-photos-blocks {
    width: 100%;
    height: 100%;
    object-fit: cover;       /* Escala sin deformar */
    object-position: center;
    display: block;
    transition: transform 0.3s ease;
  }

  .block-img-gallery2 {
    min-width: 50%;
    max-width: 50%;
    display: inline-block;
    margin: 10px;
    box-sizing: border-box;
    /* background-color:; */
  }

  .scroll-image-horizontal {
    max-width: 100%;
    overflow: scroll;
    display: flex;
  }

  /* Generic modal container */
  .more-blocks {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 80%;
    max-width: 780px;
    background: white;
    padding: 30px;
    box-shadow: 0px 4px 10px rgba(0, 0, 0, .3);
    border-radius: 21px;
  }
  .more-blocks .content-modal-title-subtitle{
    margin-left:-10px;
    font-weight: bold;
  }

  @media (max-width: 1280px) {
    .more-blocks {
      width: 90%;
    }
  }
  
  @media (max-width: 768px) {
    .more-blocks h3,
    .more-blocks-photos h3{
      font-size:1.3em;
      font-weight:bold;
      padding-top:15px;
    }
    .button-modal{
      top:35px;
    }
    .more-blocks {
      width: 95%;
    }
    .rbl-photo-gallery-block {
      width: 90%;
      min-height: 75vh;
      max-height: 75vh;
      min-height: 75dvh;
      max-height: 75dvh;
    }
    .rbl-photo-label-gallery .rbl-content-photos-group{
      margin-left:15% !important;
      width:85% !important;
    }
  }
  
  @media (max-width: 480px) {
    .more-blocks {
      width: 98%;
      height:98vh;
      height:98dvh;
      padding-top:40px;
      border-radius:10px;
      /* padding-top:15vh; */
      /* padding-top:15dvh; */
    }
    .more-blocks-photos{
      width:98%;
      height:98vh;
      height:98dvh;
      padding-top:12%;
      border-radius: 10px;
    }
    .rbl-photo-gallery-block {
      width: 100% !important;
      min-height: 81vh;
      max-height: 81vh;
      min-height: 81dvh;
      max-height: 81dvh;
      /* background-color:blue; */
    }
    .rbl-photo-label-gallery .rbl-content-photos-group{
      margin-left:0% !important;
      width:100% !important;
    }

    .rbl-description-preview-contents, 
    .rbl-amenities-preview-block
    {
      min-height: 81vh;
      max-height: 81vh;
      min-height: 81dvh;
      max-height: 81dvh;
      /* background-color:red; */
    }
  }
  /* Segundo bloqueo en modal de fotos */
  .rbl-photo-label-gallery{
    display:block;
    width:100%;
    margin-top:4rem;
  }
  /* Estilos para cada titulos de los bloques de fotos */
  .rbl-photo-label-gallery strong{
    font-weight:500;
    font-size:1.5em;
    display: block;
  }
  /* Posicionar a la derecha el bloque donde se visualizan las fotos */
  .rbl-photo-label-gallery .rbl-content-photos-group{
    margin-left:50%;
    width:50%;
  }


  /* ====================================================
    Reviews Modal Styles
    Only rules within .reviews-modal-content (keep all others intact)
    ==================================================== */
  /* 1) Ajustes al contenedor principal del modal */
  .more-reviews-blocks {
    /* Ampliar modal a aproximadamente 50% del viewport */
    width: 50%;
    max-width: none;
    height: 90vh;
    padding: 30px;
    box-sizing: border-box;
  }

  /* 2) Layout de dos columnas dentro del contenido */
  .reviews-modal-content {
    display: flex;
    gap: 24px;
    overflow: hidden;
    min-height: 0; /* Para que el overflow interno funcione */
  }

  /* 3) COLUMNA IZQUIERDA: “Overall rating” + categorías */
  .reviews-modal-content .reviews-modal-left {
    width: 35%;
    display: flex;
    flex-direction: column;
    padding: 24px 20px;
    border-right: 1px solid rgba(0, 0, 0, 0.1);
    box-sizing: border-box;
    overflow-y: auto;
    min-height: 0;
  }

  /* 3.1) Sección “Guest favourite” */
  .reviews-modal-content .reviews-modal-left .rating-featured {
    text-align: center;
    margin-bottom: 24px;
  }
  .reviews-modal-content .reviews-modal-left .rating-featured-wrapper {
    display: inline-flex;
    align-items: center;
    justify-content: center;
  }
  .reviews-modal-content .reviews-modal-left .leaf-icon {
    font-family: 'Material Icons';
    font-size: 48px;
    color: #484848;
    line-height: 1;
  }
  /* Hojas a los lados del puntaje */
  .reviews-modal-content .reviews-modal-left .leaf-icon.left {
    margin-right: -16px;
  }
  .reviews-modal-content .reviews-modal-left .leaf-icon.right {
    margin-left: -16px;
    transform: scaleX(-1);
  }
  .reviews-modal-content .reviews-modal-left .rating-score {
    font-size: 4rem;
    font-weight: 700;
    color: #222222;
    line-height: 1;
    margin: 0 16px;
  }
  .reviews-modal-content .reviews-modal-left .rating-title {
    font-size: 1.4rem;
    font-weight: 600;
    color: #222222;
    margin-top: 16px;
    margin-bottom: 8px;
    text-align: center;
  }
  .reviews-modal-content .reviews-modal-left .rating-desc {
    font-size: 1rem;
    color: #717171;
    line-height: 1.5;
    margin: 0 auto;
    max-width: 220px;
    text-align: center;
  }

  /* 3.2) Línea divisoria bajo “Guest favourite” */
  .reviews-modal-content .reviews-modal-left .divider {
    margin: 24px 0;
    border-top: 1px solid rgba(0, 0, 0, 0.1);
  }

  /* 3.3) “Overall rating” (gráfico de barras) */
  /* .reviews-modal-content .reviews-modal-left .overall-rating-chart,
  .reviews-modal-content .reviews-modal-left .rating-details-row{
    font-size:.7em;
    padding:0;
  } */
  .reviews-modal-content .reviews-modal-left .overall-rating-chart .category-title {
    font-size: 0.875rem;
    font-weight: 600;
    color: #222222;
    margin-bottom: 8px;
  }
  .reviews-modal-content .reviews-modal-left .overall-rating-chart .dist-row {
    display: flex;
    align-items: center;
    margin-bottom: 8px;
  }
  .reviews-modal-content .reviews-modal-left .overall-rating-chart .dist-label {
    width: 16px;
    font-size: 0.875rem;
    color: #222222;
    text-align: right;
    margin-right: 12px;
  }
  .reviews-modal-content .reviews-modal-left .overall-rating-chart .dist-bar {
    flex: 1;
    background: #EBEBEB;
    height: 6px;
    border-radius: 3px;
    overflow: hidden;
  }
  .reviews-modal-content .reviews-modal-left .overall-rating-chart .dist-bar-fill {
    display: block;
    height: 100%;
    background: #484848;
    border-radius: 3px;
  }

  /* 3.4) Listado de categorías (icono + texto + valor) */
  .reviews-modal-content .reviews-modal-left .category-list {
    margin-top: 24px;
  }
  .reviews-modal-content .reviews-modal-left .category-item-modal {
    display: flex;
    align-items: center;
    padding: 12px 0;
    border-bottom: 1px solid rgba(0, 0, 0, 0.1);
  }
  .reviews-modal-content .reviews-modal-left .category-item-modal:last-child {
    border-bottom: none;
    padding-bottom: 0;
  }
  /* Agrupa icono + texto */
  .reviews-modal-content .reviews-modal-left .category-text {
    display: flex;
    align-items: center;
  }
  /* Icono de cada categoría (28px, gris) */
  .reviews-modal-content .reviews-modal-left .category-icon {
    font-family: 'Material Icons';
    font-size: 28px;
    color: #484848;
    margin-right: 12px;
    line-height: 1;
  }
  /* Nombre de la categoría */
  .reviews-modal-content .reviews-modal-left .category-title {
    font-size: 0.875rem;
    font-weight: 400;
    color: #222222;
  }
  /* Valor alineado a la derecha */
  .reviews-modal-content .reviews-modal-left .category-value {
    font-size: 0.875rem;
    font-weight: 400;
    color: #222222;
    float: right;
  }

  /* 4) COLUMNA DERECHA: Espaciado entre elementos */
  .reviews-modal-content .reviews-modal-right {
    width: 65%;
    display: flex;
    flex-direction: column;
    padding: 24px 20px;
    overflow-y: auto;
    box-sizing: border-box;
    min-height: 0;
  }

  /* 4.1) Encabezado (número de reviews + enlace) */
  .reviews-modal-content .reviews-modal-right .reviews-count {
    font-size: 1.5rem;
    font-weight: 600;
    color: #222222;
    margin: 0;
  }
  .reviews-modal-content .reviews-modal-right .learn-more-reviews {
    font-size: 0.9rem;
    color: #008489;
    text-decoration: none;
    margin-left: 8px;
  }
  .reviews-modal-content .reviews-modal-right .reviews-right-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 16px;
  }

  /* 4.2) Barra de búsqueda */
  .reviews-modal-content .reviews-modal-right .reviews-search {
    margin-bottom: 16px;
  }
  .reviews-modal-content .reviews-modal-right .reviews-search-input {
    width: 100%;
    padding: 10px 12px;
    border: 1px solid #d8d8d8;
    border-radius: 6px;
    font-size: 1rem;
    color: #333333;
    box-sizing: border-box;
  }

  /* 4.3) Lista de ítems de review: separación vertical */
  .reviews-modal-content .reviews-modal-right .review-items-list {
    flex: 1 1 auto;
    overflow-y: auto;
    margin-bottom: 16px;
  }
  .reviews-modal-content .reviews-modal-right .review-item {
    display: flex;
    flex-direction: column;
    margin-bottom: 24px;
  }

  /* 4.3.1) Cabecera de cada review (avatar + nombre) */
  .reviews-modal-content .reviews-modal-right .review-item .review-header {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 8px;
  }
  .reviews-modal-content .reviews-modal-right .review-item .review-avatar {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    object-fit: cover;
  }
  .reviews-modal-content .reviews-modal-right .review-item .review-user-info {
    display: flex;
    flex-direction: column;
  }
  .reviews-modal-content .reviews-modal-right .review-item .review-user-name {
    font-size: 1rem;
    font-weight: 600;
    color: #222222;
    line-height: 1.2;
  }
  .reviews-modal-content .reviews-modal-right .review-item .review-user-subinfo {
    font-size: 0.875rem;
    color: #717171;
    margin-top: 4px;
    line-height: 1.2;
  }

  /* 4.3.2) Meta (estrellas, fecha, tipo) */
  .reviews-modal-content .reviews-modal-right .review-item .review-meta {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 4px;
    font-size: 0.875rem;
    color: #717171;
    margin-bottom: 8px;
  }
  .reviews-modal-content .reviews-modal-right .review-item .star {
    color: #222222;
    font-size: 1rem;
    line-height: 1;
  }
  .reviews-modal-content .reviews-modal-right .review-item .star.empty {
    color: #d8d8d8;
  }
  .reviews-modal-content .reviews-modal-right .review-item .meta-separator {
    margin: 0 4px;
  }
  .reviews-modal-content .reviews-modal-right .review-item .review-date,
  .reviews-modal-content .reviews-modal-right .review-item .review-type {
    white-space: nowrap;
  }

  /* 4.3.3) Texto de la review */
  .reviews-modal-content .reviews-modal-right .review-item .review-text {
    font-size: 0.9rem;
    color: #393939;
    line-height: 1.5;
    margin-bottom: 12px;
  }

  /* 4.3.4) Botón “Show more” */
  .reviews-modal-content .reviews-modal-right .review-item .more-button-content {
    background: none;
    border: 1px solid #d61f69;
    color: #d61f69;
    font-weight: 600;
    font-size: 0.875rem;
    padding: 6px 12px;
    border-radius: 6px;
    cursor: pointer;
    align-self: flex-start;
    margin-top: 8px;
  }

  /* 4.4) Botones inferiores (“Show all 160 reviews” + enlace) */
  .reviews-modal-content .reviews-modal-right .review-actions {
    display: flex;
    align-items: center;
    gap: 24px;
    margin-top: 16px;
  }
  .reviews-modal-content .reviews-modal-right .show-all-reviews {
    padding: 12px 24px;
    font-size: 1rem;
    font-weight: 600;
    color: #222222;
    background: #f5f5f5;
    border-radius: 8px;
    border: none;
    cursor: pointer;
  }
  .reviews-modal-content .reviews-modal-right .learn-more {
    font-size: 0.575rem;
    color: #adadad;
    text-decoration: underline;
  }

  /* 5) Botón de cerrar (“X”) */
  .reviews-modal-content .close-buttons-modal-block {
    position: absolute;
    top: 16px;
    right: 16px;
    /* z-index: 2; */
  }
  .reviews-modal-content .close-buttons-modal-block button {
    background: transparent;
    border: 1px solid #d61f69;
    border-radius: 4px;
    font-size: 1.2rem;
    color: #d61f69;
    padding: 4px 8px;
    cursor: pointer;
    line-height: 1;
  }

  /* 6) Responsive (pantallas pequeñas, <768px) */
  @media (max-width: 768px) {
    /* Oculta columna izquierda para que la derecha ocupe todo el ancho */
    .reviews-modal-content .reviews-modal-left {
      display: none;
    }
    .reviews-modal-content .reviews-modal-right {
      width: 100%;
      padding: 16px;
    }
    .more-reviews-blocks {
      width: 95%;
      height: 95vh;
      padding: 16px;
    }
  }
  

  /* ====================================================
    Styles to the leaflet map block
    ==================================================== */
  .rbl-map-blocks .rbl-map-section-title{
    /* Tamano del titulo de la seccion */
    font-size:1.45rem;
    margin-bottom:35px;
    font-weight: bold;
  }
  .rbl-map-blocks .title-info-map{
    margin-top:25px;
    margin-bottom:15px;
    font-size:1.05em;
  }
  .rbl-map-blocks strong{
    /* ponermos mas negrita la letra de la direccion */
    font-weight:600;
  }
  .rbl-map-blocks .map-block-content{
    line-height: 1.8rem;
  }
  .map-leaflet{
    /* Estilo en la caja del mapa */
    width:100%;
    height: 50vh;
    border-radius:20px;
    overflow:hidden;
    margin-top: 10px;
  }
  .map-leaflet,
  .leaflet-container,
  .leaflet-touch,
  .leaflet-retina,
  .leaflet-safari,
  .leaflet-fade-anim,
  .leaflet-grab,
  .leaflet-touch-drag,
  .leaflet-touch-zoom{
    position: relative;
    z-index: 0 !important;
  }
  @media (max-width: 768px) {
    /* Por debajo de los 768px el mapa es un poco mas alta */
    .map-leaflet{
      height: 60vh;
    }
  }
  @media (max-width: 480px) {
    /* Por debajo de los 768px el mapa es un poco mas alta */
    .map-leaflet {
      height: 75vh;
    }
  }

  .leaflet-marker-custom-icon {
    /* Estilos de la caja del icono del home en el marker */
    background: #000000;
    border-radius: 50%;
    width: 48px;
    height: 48px;
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
    z-index: 0 !important;
  }


  .leaflet-marker-custom-icon i {
    /* Estilo del icono en el marker */
    font-size: 20px;
    color: #FFFFFF;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
  }


  /* ====================================================
    Overlay Backdrop for All Modals
    ==================================================== */
  .more-blocks-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, .3);
    z-index:0;
  }


  /* ====================================================
    Description Modal Styles
    ==================================================== */
  .rbl-description-preview-contents {
    width: 100%;
    max-height: 70vh;
    overflow: auto;
    margin-left: -5px;
    margin-right: -5px;
    margin-bottom: 10px;
  }

  /* .rbl-description-preview-contents is:(h2,h3,h4,h5,h6) {
    font-size: 1.6em;
    color: #111111;
  } */

  .rbl-description-preview-contents p {
    font-weight: 400;
    font-size: .8em;
    line-height: 1.7rem;
    word-break: break-word;
  }

  .more-amenities-blocks-overlay li {
    font-size: 1.1em;
  }

  .more-description-blocks-overlay p {
    font-size: 1.1em;
  }


  /* ====================================================
    Host Profile (Inline) Styles
    ==================================================== */
  .rbl-property-info {
    /* margin-top: 2rem; */
    margin-right: 50px;
  }

  .rbl-property-info h1 {
    font-size: 1.5em;
    padding: 0;
    margin: 0;
  }
  .rbl-property-info h1.rbl-property-title{
    font-weight: bold;
  }
  .rbl-property-info :is(h2,h3,h4,h5,h6) {
    font-weight: bold;
  }

  .rbl-property-meta {
    font-size: .97em;
    color: #444;
    font-weight:300 !important;
  }

  .img-photo-comments {
    width: 40px;
    height: 40px;
    border-radius: 50%;
  }

  .rbl-comment-block {
    width: 100% !important;
  }

  .block-content-comment {
    display: inline-block;
    width: 50% !important;
    border: 1px solid #000;
  }

  .comment-users {
    width: 100%;
    display: flex;
    padding: 15px;
  }

  .block-content-comment {
    width: 100%;
    padding: 10px;
  }

  .comment-info-user {
    width: 100%;
    padding: 10px;
  }



  /* ====================================================
    Host Profile / Hosted By Styles
    ==================================================== */
  .host-profile {
    display: flex;
    align-items: center;
    margin-top: 28px;
    margin-bottom: 16px;
  }

  .host-avatar {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    object-fit: cover;
  }

  .host-info {
    margin-left: 23px;
  }

  .rbl-property-description .host-info {
    font-size: .82em;
  }

  .host-name {
    font-weight: 600;
    color: #222222;
    margin-bottom: 5px;
  }

  .host-details {
    font-size: 0.875rem;
    color: #6B6B6B;
    font-weight: thin !important;
  }



  /* ====================================================
    Amenities Block Styles
    ==================================================== */
  /* .amenities-block is:(h1,h2,h3,h4,h5,h6), 
  .rbl-amenities-preview-block.ocultar-scroll > h3{
    font-weight: bold
  } */
  .amenities-block {
    margin-bottom: 24px;
  }

  .amenities-block .block-title {
    font-size: 1.45rem;
    font-weight: bold;
    /* color: #222222; */
    margin: 0 0 12px;
    margin-bottom: 1.05em
  }

  .amenities-list {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 14px 24px;
    list-style: none;
    padding: 0;
    margin: 0;
  }

  .amenities-list li {
    font-size: 1.1rem;
    /* color: #484848; */
    line-height: 1.8;
    display: flex;
    gap: 5px;
    align-items: center;
  }
  
  .amenities-list li span.icons-all{
    font-size:1.4em;
  }

  .show-all-amenities {
    background: none;
    border: none;
    color: #008489;
    font-weight: 600;
    font-size: 0.875rem;
    cursor: pointer;
    padding: 0;
    margin-top: 12px;
  }



  /* ====================================================
    Rating Summary (Inline) Styles
    ==================================================== */
  .rating-summary {
    margin-bottom: 40px;
  }

  .rating-featured {
    text-align: center;
    margin-bottom: 32px;
  }

  .rating-featured-wrapper {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
  }

  .leaf-icon {
    font-family: 'Material Icons';
    font-size: 56px;
    line-height: 1;
    color: #484848;
  }

  .leaf-icon.left {
    margin-right: -20px;
  }

  .leaf-icon.right {
    margin-left: -20px;
    transform: scaleX(-1);
  }

  .rating-score {
    font-size: 6rem;
    font-weight: 700;
    color: #222222;
    line-height: 1;
    margin: 0 24px;
  }

  .rating-title {
    font-size: 1.5rem;
    font-weight: 600;
    color: #222222;
    margin-top: 16px;
  }

  .rating-desc {
    font-size: 1.16em;
    color: #717171;
    margin-top: 8px;
    max-width: 440px;
    margin-left: auto;
    margin-right: auto;
    line-height: 1.5;
  }



  /* ====================================================
    Rating Details (Inline) Styles
    ==================================================== */
  .rating-details {
    display: flex;
    flex-wrap: nowrap;
    scroll-behavior: smooth;
    gap: 1rem;
    padding: 1rem;
    position: relative;
    overflow-x: hidden;
  }

  /* Solo scroll en móvil */
  @media (max-width: 768px) {
    .rating-details {
      overflow-x: auto;
    }

    .rating-distribution,
    .category-item {
      flex: 0 0 auto;
      min-width: 100%;
      /* transform: translateX(-1%); */
    }
    .rating-distribution{
      padding-right: 0.75em !important;
    }

    .scroll-wrapper {
      display: flex;
      max-width: 100%;
      position: absolute;
      left: 0;
    }
  }

  /* Entre 769 y 899px: más compactos */
  @media (min-width: 769px) and (max-width: 899px) {
    .rating-distribution,
    .category-item {
      flex: 1 1 120px;
    }
  }

  /* Entre 900 y 1024px: distribución proporcional */
  @media (min-width: 900px) and (max-width: 1024px) {
    .rating-distribution,
    .category-item {
      flex: 1 1 140px;
    }
  }

  /* Desde 1025px en adelante */
  @media (min-width: 1025px) {
    .rating-details {
      justify-content: center;
    }

    .rating-distribution,
    .category-item {
      flex: 1 1 150px;
    }
  }

  /* Bloques sin padding ni fondo */
  .rating-distribution,
  .category-item {
    padding: 0;
    background-color: transparent;
    text-align: center;
    transition: all 0.3s ease;
  }

  /* Rating bars */
  .dist-row {
    display: flex;
    align-items: center;
    margin-bottom: 0;
  }
  .dist-label {
    width: 1.5rem;
    text-align: right;
    font-size: 12px;
  }
  .dist-bar {
    flex: 1;
    background-color: #ddd;
    height: 4px;
    border-radius: 4px;
    margin-left: 0.5rem;
    overflow: hidden;
  }
  .dist-bar-fill {
    display: block;
    height: 100%;
    background-color: #222;
    border-radius: 4px;
  }

  /* Categorías */
  .category-title {
    font-weight: bold;
    font-size: 1rem;
    margin-bottom: 0.3rem;
  }
  .category-value {
    font-size: 1.2rem;
    font-weight: bold;
    color: #444;
  }
  .category-icon {
    font-size: 1.5rem;
    color: #666;
    margin-top: 0.5rem;
  }

  /* Scroll Buttons */
  .scroll-wrapper {
    position: absolute;
    top: 50%;
    left: -1.5rem;  /* los botones salen un poco del contenedor */
    right: -1.5rem;
    transform: translateY(-50%);
    display: none;
    justify-content: space-between;
    pointer-events: none;
    z-index:0;
  }

  @media (max-width: 768px) {
    .scroll-wrapper {
      display: flex;
      max-width: 100%;
      position: absolute;
      left: 0;
    }
  }

  .scroll-btn {
    background: rgba(255, 255, 255, 0.95);
    border: 1px solid #ccc;
    border-radius: 50%;
    width: 2.5rem;
    height: 2.5rem;
    padding:0;
    font-size: 1.2rem;
    cursor: pointer;
    pointer-events: auto;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 2px 6px rgba(0,0,0,0.15);
    transition: background 0.2s ease;
    position: sticky;
    top: 50%;
    transform: translateY(-50%);
  }

  .scroll-btn.left {
    left: 0;
    margin-left: 0.5rem;
  }

  .scroll-btn.right {
    right: 0;
    margin-right: 0.5rem;
  }




  /* ====================================================
    Reviews Block (Preview) Styles
    ==================================================== */
  .reviews-block {
    margin-bottom: 24px;
  }

  .reviews-block .block-title {
    font-size: 1.25rem;
    font-weight: 600;
    color: #222222;
    margin: 0 0 16px;
  }

  .review-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 24px;
  }

  .review-item {
    display: flex;
    flex-direction: column;
    width: 80%;
  }

  .review-header {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 8px;
  }

  .review-avatar {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    object-fit: cover;
  }

  .review-user-info {
    display: flex;
    flex-direction: column;
  }

  .review-user-name {
    font-size: 1rem;
    font-weight: 600;
    color: #222222;
    line-height: 1.2;
  }

  .review-user-subinfo {
    font-size: 0.875rem;
    color: #717171;
    margin-top: 4px;
    line-height: 1.2;
  }

  .review-meta {
    display: flex;
    align-items: center;
    font-size: 0.875rem;
    color: #717171;
    margin-bottom: 8px;
    flex-wrap: wrap;
    gap: 4px;
  }

  .star {
    color: #222222;
    margin: 0;
    padding: 0;
    font-size: .9em;
    line-height: 1;
  }

  .star.empty {
    color: #d8d8d8;
  }

  .meta-separator {
    margin: 0 4px;
    font-weight: 400;
  }

  .review-date,
  .review-type {
    white-space: nowrap;
  }

  .review-text {
    font-size: .85rem;
    color: #393939;
    line-height: 1.5;
    margin: 0 0 8px;
    font-weight: 00;
  }

  .read-more {
    background: none;
    border: none;
    color: #008489;
    font-weight: 600;
    font-size: 0.875rem;
    cursor: pointer;
    padding: 0;
    text-align: left;
  }

  .review-actions {
    display: flex;
    align-items: center;
    margin-top: 24px;
    gap: 24px;
  }

  .show-all-reviews {
    padding: 12px 24px;
    font-size: 1rem;
    font-weight: 600;
    color: #222222;
    border-radius: 8px;
    cursor: pointer;
  }

  .learn-more {
    font-size: 0.875rem;
    color: #717171;
    text-decoration: underline;
  }

  /* Ensuring reviews modal content is flex container */
  .reviews-modal-content {
    display: flex;
  }



  /* ====================================================
    “Meet Your Host” Section (ALT Version)
    All classes prefixed with rbl- to avoid conflicts
    ==================================================== */
  /* 1) Contenedor principal */
  .rbl-meet-host-section {
    padding: 40px 20px;
    background-color: #ffffff;
    padding:0;
  }

  .rbl-meet-host-container {
    display: flex;
    gap: 40px;
    max-width: 1200px;
    margin: 0 auto;
    align-items: flex-start;
    flex-wrap: wrap; /* En pantallas pequeñas, apila en columna */
  }

  /* 2) Columna IZQUIERDA ALT: Tarjeta de perfil */
  .rbl-host-card-alt {
    background-color: #ffffff;
    border: 1px solid rgba(0, 0, 0, 0.05);
    border-radius: 16px;
    padding: 24px 16px 32px;
    width: 100%;
    max-width: 360px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.03);
    box-sizing: border-box;
    position: relative;
    text-align: center;
  }

  /* Avatar centrado con badge */
  .rbl-avatar-wrapper-alt {
    position: relative;
    width: 120px;
    height: 120px;
    margin: 0 auto;
  }

  .rbl-host-avatar-alt {
    width: 100%;
    height: 100%;
    border-radius: 50%;
    object-fit: cover;
    display: block;
    border: 2px solid #ffffff;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);
  }

  /* Badge circular pequeño */
  .rbl-host-badge-alt {
    position: absolute;
    bottom: 4px;
    right: 4px;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background-color: #d61f69;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
  }

  .rbl-badge-icon-alt {
    width: 18px;
    height: 18px;
  }


  /* Nombre y ubicación (centrados) */
  .rbl-host-info-alt {
    margin-top: 16px;
  }

  .rbl-host-name-alt {
    font-size: 1.75rem;
    font-weight: bold;
    color: #222222;
    margin: 8px 0 4px;
  }

  .rbl-host-location-alt {
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.875rem;
    color: #484848;
  }

  .rbl-location-icon-alt {
    width: 18px;
    height: 18px;
    margin-right: 6px;
  }

  /* Estadísticas en fila (horizontal) */
  .rbl-host-stats-alt {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 24px;
    gap: 8px;
  }

  /* Cada item de estadística ocupa igual espacio */
  .rbl-stat-item-alt {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
  }

  .rbl-stat-value-alt {
    font-size: 1.3rem;
    font-weight: 700;
    color: #222222;
  }

  .rbl-stat-value-alt .rbl-star-alt {
    color: #f5c518; /* Estrella dorada */
    font-size: 1rem;
    margin-left: 4px;
  }

  .rbl-stat-label-alt {
    font-size: 0.875rem;
    font-weight: 400;
    color: #484848;
    margin-top: 4px;
  }

  /* Separador vertical entre stats */
  .rbl-stat-divider-alt {
    width: 1px;
    background-color: rgba(0, 0, 0, 0.1);
    height: 40px;
  }
  @media (max-width: 767px) {
    .rbl-stat-divider-alt{
      width:70%;
      height:1px;
    }
  }

  /* 3) Columna DERECHA ALT: Detalles del anfitrión */
  .rbl-host-details-alt {
    flex: 1;
    /* max-width: 600px; */
    display: flex;
    flex-direction: column;
  }

  /* Encabezado principal */
  .rbl-details-title-alt {
    font-size: 1.2rem;
    font-weight: 700;
    color: #222222;
    margin: 0 0 12px;
  }

  /* Párrafo descriptivo */
  .rbl-details-desc-alt {
    font-size: 1rem;
    line-height: 1.5;
    color: #484848;
    margin: 0 0 24px;
  }

  /* Subencabezados */
  .rbl-subheading-alt {
    font-size: 1.125rem;
    font-weight: 600;
    color: #222222;
    margin: 24px 0 12px;
  }

  /* Co-host (avatar + nombre) */
  .rbl-cohost-item-alt {
    display: flex;
    align-items: center;
    margin-bottom: 8px;
  }

  .rbl-cohost-avatar-alt {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    object-fit: cover;
    margin-right: 12px;
  }

  .rbl-cohost-name-alt {
    font-size: 1rem;
    color: #222222;
  }

  /* Líneas de detalle (response rate, etc.) */
  .rbl-host-detail-line-alt {
    font-size: 0.875rem;
    color: #484848;
    margin: 4px 0;
  }

  /* Botón “Message host” */
  .rbl-message-host-btn-alt {
    margin-top: 24px;
    padding: 10px 20px;
    font-size: 1rem;
    font-weight: 600;
    color: #ffffff;
    background-color: #222222;
    border: none;
    border-radius: 8px;
    cursor: pointer;
    align-self: flex-start;
    transition: background-color 0.2s ease;
  }

  .rbl-message-host-btn-alt:hover {
    background-color: #444444;
  }

  /* Nota final con icono */
  .rbl-host-footer-note-alt {
    display: flex;
    align-items: center;
    margin-top: 40px;
    padding-top: 24px;
    border-top: 1px solid rgba(0, 0, 0, 0.05);
  }

  .rbl-footer-icon-alt {
    width: 24px;
    height: 24px;
    margin-right: 12px;
  }

  .rbl-footer-text-alt {
    font-size: 0.8em;
    color: #484848;
    line-height: 1.4;
  }

  /* 4) Responsive: Apilar en móviles (<= 768px) */
  @media (max-width: 768px) {
    .rbl-meet-host-container {
      flex-direction: column;
      align-items: center;
    }
    .rbl-host-card-alt,
    .rbl-host-details-alt {
      max-width: 100%;
    }
    .rbl-host-details-alt {
      margin-top: 32px;
    }
  }



  /* ====================================================
    “Things to Know” Section Styles
    (Todas las clases comienzan con rbl- para no afectar)
    ==================================================== */
  /* 1) Sección principal */
  .rbl-things-to-know-section {
    padding: 5px 0px;
    background-color: #ffffff;
    box-sizing: border-box;
  }
  .rbl-things-to-know-section .rbl-things-to-know-title {
    font-size:1.45rem;
    font-weight: bold;
  }

  /* 2) Contenedor de columnas */
  .rbl-things-to-know-container {
    display: flex;
    gap: 32px;
    max-width: 1200px;
    margin: 0 auto;
    align-items: flex-start;
    flex-wrap: wrap; /* Para pantallas pequeñas se apilan */
  }

  /* 3) Título de sección podría reutilizar .block-title, pero creamos uno nuevo */
  .rbl-things-section-title {
    font-size: 1.5rem;
    font-weight: 600;
    color: #222222;
    margin-bottom: 24px;
    max-width: 1200px;
    margin-left: auto;
    margin-right: auto;
  }

  /* 4) Cada columna */
  .rbl-things-column {
    flex: 1;
    min-width: 200px; /* No se hace demasiado estrecha */
    box-sizing: border-box;
  }

  /* 5) Encabezado de cada columna */
  .rbl-things-heading {
    font-size: 1.05rem;
    font-weight: bold !important;
    color: #222222;
    margin:0 0 15px 0;
  }

  /* 6) Párrafos de texto */
  .rbl-things-text {
    font-size: 1rem;
    color: #3a3a3a;
    line-height: 1.7;
    margin: 4px 0;
  }

  /* 7) Enlace “Show more” con flecha */
  .rbl-things-show-more {
    display: inline-flex;
    align-items: center;
    font-size: 1rem;
    font-weight: 600;
    color: #222222;
    text-decoration: underline !important;
    margin-top: 8px;
    cursor: pointer;
    transition: color 0.2s ease;
  }

  .rbl-things-show-more:hover {
    color: #000000;
  }

  /* 7.1) Pseudoelemento para la flecha */
  .rbl-things-show-more::after {
    content: '›';
    margin-left: 4px;
    font-size: 1rem;
    line-height: 1;
  }

  /* 8) Responsive: columnas apiladas en pantallas pequeñas */

  @media (max-width: 768px) {
    .rbl-things-to-know-container {
      flex-direction: column;
      gap: 24px;
    }
    .rbl-things-column {
      max-width: 100%;
    }
  }






























































  /* ==================================================
    CSS RESPONSIVE BASADO EN LOS PUNTOS DE RUPTURA DE AIRBNB
    No se crean clases nuevas: se reutilizan las existentes
    Solo se ajustan márgenes, tamaños y posiciones para
    dispositivos de distintos anchos.
    ================================================== */

  /* -----------------------------------------
    1) GLOBAL: Contenedor principal (Grid Info + Sidebar)
    ----------------------------------------- */
  /* En pantallas grandes (>1200px) se mantiene como está */
  /* @media (max-width:;) */
  /*@media (max-width:1199px) {
    .rbl-property-info{
      margin-top:.5rem;
    }
  }*/
  @media (max-width: 991px) {
    /* Entre 992px y 768px, pasamos a columna única */
    /* El sidebar baja debajo de la info principal */
    .rbl-single-property-container {
      display: flex;
      flex-direction: column;
      align-items: center;
      /* padding: 0 24px; */
    }
    .rbl-booking-sidebar {
      position: static;
      width: 100%;
      margin-top: 32px;
    }
    .rbl-property-info {
      width: 100%;
      margin-right: 0;
    }
  }
  @media (max-width: 767px) {
    /* En móviles, quitamos padding extra */
    .rbl-single-property-container {
      padding: 0 4px;
    }
    /* Ajustamos el margen inferior del hero */
    .rbl-property-hero {
      margin-bottom: 24px;
    }

    /* 1) Hacer que el contenedor principal cambie a columnas (si no lo tienes ya) */
    .rbl-single-property-container {
      display: flex;
      flex-direction: column;
    }

    /* 2) Forzar que la cartilla de reserva (.rbl-booking-sidebar) aparezca al final */
    .rbl-booking-sidebar {
      order: 2;            /* Si tu contenedor padre es flex, la cartilla baja al final */
      width: 100% !important;
      margin-top: 24px;
    }

    /* 3) Asegurar que el bloque de info principal ocupe todo el ancho y quede arriba */
    .rbl-property-info {
      order: 1;
      width: 100%;
    }

    /* 4) Ajustes específicos dentro de la cartilla: imágenes y botones */
    .rbl-booking-sidebar img,
    .rbl-booking-sidebar .widget img {
      width: 100%!important;     /* Que todas las imágenes ocupen el 100% del contenedor */
      height: auto!important;
      display: block;
      margin-bottom: 12px;
    }

    /* 5) Si hay filas o columnas internas de imágenes en la cartilla, apilarlas */
    .rbl-booking-sidebar .image-row,
    .rbl-booking-sidebar .image-grid {
      display: flex !important;
      flex-direction: column !important;
      gap: 12px;
    }

    /* 6) Ajustar márgenes y padding interno para que no quede tan estrecho */
    .rbl-booking-sidebar {
      padding: 0 0px;
    }

    .rbl-booking-sidebar .booking-button {
      width: 100%;
      padding: 12px;
      font-size: 1rem;
      text-align: center;
    }

    /* 7) Si la “cartilla” tenía un título u otro bloque fijo, reducir su tamaño de fuente */
    .rbl-booking-sidebar .widget-title {
      font-size: 1.25rem;
      margin-bottom: 16px;
    }

    /* 8) Ocultar cualquier elemento que no deba verse en móviles (por ejemplo, logo pequeño o aviso) */
    .rbl-booking-sidebar .small-icon,
    .rbl-booking-sidebar .desktop-only {
      display: none !important;
    }

    /* 9) Asegurar que el contenedor padre (quizá .site-main o similar) no tenga overflow inesperado */
    #primary {
      overflow-x: hidden;
    }
  }


  /* -----------------------------------------
    2) HERO GALLERY (rbl-property-hero)
    ----------------------------------------- */
  /* En escritorio se muestran 5 imágenes, como está*/
  /* Reducir altura de las imágenes en tablet a 2 filas */
  @media (max-width: 991px) {
    .rbl-photo-gallery img {
      width: calc(50% - 4px);
      margin-bottom: 8px;
    }
  }
  /* En móviles, una sola columna */
  @media (max-width: 767px) {
    .rbl-photo-gallery img {
      width: 100%;
      margin-bottom: 8px;
    }
    .more-photos {
      margin-top: -40px;
      margin-right: 8px;
    }
  }

  /* -----------------------------------------
    3) SECCIÓN “Where you’ll sleep” (sleep-section)
    ----------------------------------------- */
  /* Entre 768px y 991px: mostrar 2 slides, como está */
  /* En pantallas pequeñas (<768px), sólo 1 slide */
  @media (max-width: 767px) {
    .sleep-slider {
      width: 100%;
    }
    .sleep-slide__image {
      border-radius: 10px;
    }
    .sleep-section__title {
      font-size: 20px;
    }
  }

  /* -----------------------------------------
    4) BLOQUE “What this place offers” (amenities-block)
    ----------------------------------------- */
  /* Entre 992px y 767px: pasar a 1 columna */
  @media (max-width: 991px) {
    .amenities-list {
      display: grid;
      grid-template-columns: 1fr;
      gap: 12px 0;
    }
  }
  /* En móviles (<576px), ajustar fuente y alineación */
  @media (max-width: 575px) {
    .amenities-list li {
      font-size: 1rem;
      line-height: 1.6;
    }
    .more-amenities {
      width: 100%;
      text-align: center;
    }
  }

  /* -----------------------------------------
    5) BLOQUE “Rating Summary” y “Reviews Grid”
    ----------------------------------------- */
  /* Ajustes intermedios entre 992px y 768px */
  @media (max-width: 991px) {
    .rating-summary {
      padding: 0 24px;
    }
    .dist-bar {
      height: 4px;
    }
    .reviews-block .review-grid {
      grid-template-columns: repeat(1, 1fr);
      gap: 16px;
    }
    .review-item {
      width: 100%;
    }
  }
  /* En móviles (<768px), incrementar espacios */
  @media (max-width: 767px) {
    .rating-featured-wrapper {
      flex-direction: column;
    }
    .rating-score {
      font-size: 3.5rem;
      margin: 16px 0;
    }
    .rating-title {
      font-size: 1.2rem;
    }
    .rating-desc {
      max-width: 100%;
      font-size: 0.95rem;
      padding: 0 16px;
    }
    /* Reviews: grid a 1 sola columna */
    .review-grid {
      display: grid;
      grid-template-columns: 1fr;
      gap: 16px;
    }
    .review-item {
      padding: 0 16px;
    }
    .review-text {
      font-size: 0.85rem;
    }
    .review-actions {
      flex-direction: column;
      align-items: flex-start;
      gap: 12px;
    }
    .show-all-reviews {
      width: 100%;
    }
  }

  /* -----------------------------------------
    6) BLOQUE “Where you’ll be” (rbl-map-block)
    ----------------------------------------- */
  /* Entre 992px y 767px: centrar mapa y ajustar texto */
  @media (max-width: 991px) {
    .rbl-map-block {
      text-align: center;
      padding: 0 24px;
    }
    .rbl-map-block #property-map {
      width: 100%;
      max-width: 100%;
      height: 250px;
      margin: 0 auto;
    }
    .rbl-map-block p {
      font-size: 0.95rem;
    }
  }
  /* En móviles (<767px), reducir altura del mapa aún más */
  @media (max-width: 767px) {
    .rbl-map-block #property-map {
      height: 200px;
    }
    .rbl-map-block p {
      font-size: 0.9rem;
    }
  }

  /* -----------------------------------------
    7) SECCIÓN “Meet your host” (rbl-meet-host-section)
    ----------------------------------------- */
  /* Entre 1200px y 992px: mantener dos columnas anchas */
  /* Entre 991px y 768px: columna izquierda 100%, columna derecha abajo */
  @media (max-width: 991px) {
    .rbl-meet-host-container {
      flex-direction: column;
      align-items: center;
      padding:0;
    }
    .rbl-host-card-alt,
    .rbl-host-details-alt {
      max-width: 100%;
      margin-bottom: 24px;
    }
  }
  /* En móviles (<767px): centrar texto y avatar más pequeño */
  @media (max-width: 767px) {
    /* .rbl-host-avatar-alt {
      width: 100px;
      height: 100px;
    } */
    .rbl-host-name-alt {
      font-size: 1.4rem;
    }
    .rbl-details-title-alt {
      font-size: 1.3rem;
    }
    .rbl-host-stats-alt {
      flex-direction: column;
      gap: 16px;
    }
    .rbl-stat-value-alt {
      font-size: 1.1rem;
    }
  }

  /* -----------------------------------------
    8) SECCIÓN “Things to know” (rbl-things-to-know-section)
    ----------------------------------------- */
  /* Entre 992px y 768px: pasar a 2 columnas (si hay espacio) */
  @media (max-width: 991px) {
    .rbl-things-to-know-container {
      flex-direction: row;
      flex-wrap: wrap;
      gap: 24px;
      /* padding: 0 24px; */

      /* background-color: red; */
    }
    .rbl-things-column {
      flex: 1 1 calc(50% - 24px);
      margin-bottom: 24px;
    }
  }
  /* En móviles (<767px): columna única */
  @media (max-width: 767px) {
    .rbl-things-to-know-section-text{
      display:none;
    }
    .rbl-things-to-know-section{
      padding:0;
    }
    .rbl-things-to-know-container {
      flex-direction: column;
      gap: 16px;
      /* padding: 0 16px; */
    }
    .rbl-things-column {
      flex: 1 1 100%;
      width:100%;
      /* margin:0; */
    }
    .rbl-things-column.order-2,
    .rbl-things-column.order-3 {
      padding-top:30px;
      border-top: 1px solid rgba(0, 0, 0, .2);
    }
    .rbl-things-heading {
      font-size: 1.3rem;
    }
    .rbl-things-text {
      font-size: 0.95rem;
      color:#393939;
    }
    .rbl-things-show-more {
      font-size: 0.95rem;
    }
    /* .show-xs{
      display:block;
    } */
  }

  /* -----------------------------------------
    9) BOTONES Y ELEMENTOS INTERACTIVOS GENERALES
    ----------------------------------------- */
  /* Ajustar tamaño de botones en pantallas pequeñas */
  @media (max-width: 767px) {
    .rbl-more-buttons,
    .show-all-reviews,
    .show-all-amenities {
      padding: 10px 16px;
      font-size: 0.9rem;
    }
  }

  /* -----------------------------------------
    10) OTROS AJUSTES DE MÁRGENES Y TIPOGRAFÍA
          SEGÚN ANCHO DE PANTALLA
    ----------------------------------------- */
 
  /* Entre 991px y 768px: ajustar tamaño de texto general */
  @media (max-width: 991px) {
    h1 {
      font-size: 1.4rem;
    }
    h2 {
      font-size: 1.25rem;
    }
    h3 {
      font-size: 1.1rem;
    }
    p {
      font-size: 0.95rem;
    }
  }
  /* En móviles (<767px): texto más compacto */
  @media (max-width: 767px) {
    h1 {
      font-size: 1.2rem;
    }
    h2 {
      font-size: 1.1rem;
    }
    h3 {
      font-size: 1rem;
    }
    p {
      font-size: 0.9rem;
    }
    .host-details,
    .review-user-subinfo,
    .rbl-things-text {
      line-height: 1.4;
    }
    
  }

  /* separacion de imagenes del modal de fotos */
   .block-content-photos-all .rbl-content-photos-group div .img-photos-blocks{
    margin-block: 6px;
  }
/*  */
/*  */
/*  */
/*  */
/*  */
/*  */
/*  */
/*  */
/*  */
/*  */
/*  */
/*  */
/*  */
/*  */
/*  */
/*  */
/*  */
/*  */
/*  */
/*  */
/*  */
/*  */
/*  */
/*  */
/*  */
/*  */
/*  */
/*  */
/*  */
/*  */
/*  */
/*  */
/*  */
/*  */
/*  */
/*  */
/*  */
/*  */
/*  */
/*  */
/*  */
/*  */
/*  */
/*  */
/*  */
/*  */
/*  */
/*  */
/*  */
/*  */
/*  */
/* Nuevo diseño de galería estilo Airbnb */
.rbl-photo-gallery {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr 1fr;
  grid-template-rows: repeat(2, 260px);
  gap: 8px;
  overflow: hidden;
  border-radius: 12px;
}

.rbl-photo-gallery .thumb-image-details {
  width: 100%;
  height: 100%;
  object-fit: cover !important;
  border-radius: 0;
}

/* Imagen grande a la izquierda */
.rbl-photo-gallery .thumb-image-details:nth-child(1) {
  grid-column: 1 / 3;
  grid-row: 1 / 3;
  border-top-left-radius: 12px;
  border-bottom-left-radius: 12px;
}

/* Cuatro imágenes a la derecha (2 filas x 2 columnas) */
.rbl-photo-gallery .thumb-image-details:nth-child(2) {
  grid-row: 1;
  grid-column: 3;
}

.rbl-photo-gallery .thumb-image-details:nth-child(3) {
  grid-row: 1;
  grid-column: 4;
}

.rbl-photo-gallery .thumb-image-details:nth-child(4) {
  grid-row: 2;
  grid-column: 3;
}

.rbl-photo-gallery .thumb-image-details:nth-child(5) {
  grid-row: 2;
  grid-column: 4;
}

/* Ocultar imágenes restantes */
.rbl-photo-gallery .thumb-image-details:nth-child(n+6) {
  display: none;
}

/* // DESDE AQUI // Actualizado el Jueves 31 de Julio */
/*fix: image format should be more squared less rectangular on mobile*/
@media (max-width: 878px) {
  .rbl-photo-gallery {
    grid-template-rows: repeat(2, 210px);
  }
}
@media (max-width: 768px) {
  .rbl-photo-gallery {
    grid-template-rows: repeat(2, 150px);
  }
}
@media (max-width: 620px) {
  .rbl-photo-gallery {
    grid-template-rows: repeat(2, 130px);
  }
}
@media (max-width: 480px) {
  .rbl-photo-gallery {
    grid-template-rows: repeat(2, 100px);
  }
}
@media (max-width: 390px) {
  .rbl-photo-gallery {
    grid-template-rows: repeat(2, 80px);
  }
}
/* // HASTA AQUI // Actualizado el Jueves 31 de Julio */
/*
@media (max-width: 768px) {
  .rbl-photo-gallery {
    grid-template-rows: repeat(2, 190px);
  }
}
@media (max-width: 480px) {
  .rbl-photo-gallery {
    width:100%;
    grid-template-rows: repeat(2, 140px);
  }
}
*/

/* Efectos al pasar el curso sobre las imagenes de la galeria */
.rbl-photo-gallery .thumb-image-details,
.rbl-photo-gallery-block img {
  transition: filter .2s ease;
}

.rbl-photo-gallery .thumb-image-details:hover,
.rbl-photo-gallery-block img:hover {
  filter: brightness(0.8);
  cursor: pointer;
}

/* MODAL DEL SLIDER DE FOTOS PANTALLA COMPLETA */
.more-blocks-overlay-photos-slider {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, .9);
  z-index:0;
  overflow: hidden;
}

/* BOTON DEL MODAL DE FOTOS DETALLES */
.close-buttons-modal-blocks-photos-slider{
  float:right;
  border-radius:50%;
  margin-top:3dvh;
  margin-right:1dvh;
}
.close-buttons-modal-blocks-photos-slider .material-icons{
  color:#FFFFFF;
}
.close-buttons-modal-blocks-photos-slider .button-modal:hover{
  background:none !important;
}

/* CONTENEDOR DE LA IMAGENES */
.more-images-details-blocks{
  padding:0;
  width: 90%;
  height: 85dvh;
  display: flex;
  justify-content: center;
  align-items: center;
  overflow: hidden;
  position: absolute;
  background: rgba(0, 0, 0, 0);
  box-shadow: none;
}
/* IMAGEN DEL MODAL */
.image-details-slider{
  max-width:100%;
  max-height:100vh;
  object-fit: contain;
  width: auto;
  height: auto;
  /* min-width:100%;  */
  /* min-height:100vh;  */
  border-radius:none !important;
}

/* Cuando la imagen es más ancha que alta (landscape) */
.image-details-slider[width] {
  width: 100%;
  height: auto;
}

/* Cuando la imagen es más alta que ancha (portrait) */
.image-details-slider[height] {
  height: 100vh;
  width: auto;
}



/* Botones de navegación */
.slider-prev-images-details,
.slider-next-images-details {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  /* width:40px; */
  height: auto;
  background-color: rgba(0, 0, 0, 0.5);
  color: white;
  border: none;
  border-radius: 50%;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 24px;
  transition: all 0.3s ease;
}
.slider-prev-images-details {
  padding:15px 17.5px 15px 15px;
}
.slider-next-images-details {
  padding:15px 15px 15px 17.5px;
}

.slider-prev-images-details:hover,
.slider-next-images-details:hover {
  background-color: rgba(0, 0, 0, 0.8);
}
/* Posicionamiento individual */
.slider-prev-images-details {
  left: 20px;
}

.slider-next-images-details {
  right: 20px;
}

/* Estilo delta para el botón previo */
.slider-prev-images-details::before {
  /* content: "Δ";
  display: block;
  transform: rotate(-90deg) translateX(2px);
  font-weight: bold; */
  content: ""; /* Elimina el símbolo delta */
  display: block;
  width: 0;
  height: 0;
  border-style: solid;

  border-width: 8px 12px 8px 0; /* Ajusta el tamaño del triángulo */
  border-color: transparent #000 transparent transparent; /* Color negro */
  transform: none; /* Elimina la rotación anterior */
  border-right-color: #fff;
}

/* Estilo delta para el botón siguiente */
.slider-next-images-details::before {
  /* content: "Δ";
  display: block;
  transform: rotate(90deg) translateX(2px);
  font-weight: bold; */
  content: ""; /* Elimina el símbolo delta */
  display: block;
  width: 0;
  height: 0;
  border-style: solid;

  border-width: 8px 0 8px 12px; /* Ajusta el tamaño del triángulo */
  border-color: transparent transparent transparent #000; /* Color negro */
  transform: none; /* Elimina la rotación anterior */
  border-left-color: #fff; /* Cambia color al hacer hover */
}


/* Contado de cantidad de imagenes y posicion actual */
.slider-counter-images-details {
  position: absolute;
  bottom: 2.5%;
  left:50%;
  /* transform: translateY(-50%, -50%); */
  width: 0px;
  height: auto;
  color: #a2a0a0;
  border: none;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  /* font-size: 24px; */
  transition: all 0.3s ease;
}

/* Quitar efecto de arrastre a las imagenes */
img {
  -webkit-user-drag: none;
  user-select: none;
  -moz-user-select: none;
  -webkit-user-select: none;
  -ms-user-select: none;
}


.modal-blocks-general {
  z-index:999;
}


/*
.more-images-details-blocks.loaded {
  opacity: 1;
}


.more-images-details-blocks.loaded::before {
  opacity: 0;
}
.more-images-details-blocks.loaded {
  opacity: 1;
}
*/

.loaded {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 30px;
  height: 30px;
  border: 3px solid rgba(0, 0, 0, 0.1);
  border-top-color: #3498db;
  border-radius: 50%;
  animation: spin 1s linear infinite;
  transform: translate(-50%, -50%);
}

@keyframes spin {
  to {
    transform: translate(-50%, -50%) rotate(360deg);
  }
}