/* ================================================
   ALOJAMIENTO — sección de hoteles del viaje (formato compacto)
   Añadir al final del bloque de CSS custom del sitio
   (mismo sitio donde vive el resto: #reccomended, .box_grid, etc.)

   Se muestran las categorías marcadas como "publicar en la web" en el
   backoffice, cada una con su título + texto opcional, y dentro un solo
   hotel por ciudad — sin opinión ni dirección en texto, solo foto +
   categoría + nombre + ciudad + 2 enlaces. Decisión de producto: menos
   opciones y menos texto = menos confusión = más conversión a solicitud
   de presupuesto.
   ================================================ */

ul.alojamiento-hoteles-grid {
  list-style: none;
  margin: 8px 0 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 18px;
}

li.alojamiento-hotel-mini {
  background: #fff;
  border: 1px solid #e4dfd5;
  border-radius: 10px;
  overflow: hidden;
  box-shadow: 0 1px 4px rgba(61, 54, 45, .06);
  transition: box-shadow .2s ease, border-color .2s ease, transform .2s ease;
}

li.alojamiento-hotel-mini:hover {
  border-color: #c8b89a;
  box-shadow: 0 8px 24px rgba(61, 54, 45, .13);
  transform: translateY(-2px);
}

.alojamiento-hotel-mini-foto-wrap {
  position: relative;
}

.alojamiento-hotel-mini-foto {
  display: block;
  width: 100%;
  height: 140px;
  object-fit: cover;
  background: #f1efe8;
  cursor: zoom-in;
}

/* Ciudad — la ciudad es la información más relevante ("aquí te alojas"), así
   que se destaca como una etiqueta sobre la propia foto, en vez de como una
   línea de texto más. Mismo patrón que ya usas en el badge de país de
   .box_grid figure small (tarjetas de "viajes populares"). */
.alojamiento-hotel-mini-badge-ciudad {
  position: absolute;
  top: 10px;
  left: 10px;
  background: rgba(255, 255, 255, .94);
  color: #3D362D;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  border-radius: 3px;
  padding: 5px 9px;
  line-height: 1;
}

.alojamiento-hotel-mini-info {
  padding: 12px 14px 14px;
}

/* Categoría publicada — título + texto libre opcional, sobre su propia
   rejilla de hoteles. Puede haber varias categorías publicadas en la misma
   página, cada una con su título y su rejilla debajo. */
.alojamiento-categoria-mini {
  margin-bottom: 36px;
}

.alojamiento-categoria-mini:last-child {
  margin-bottom: 0;
}

#description .alojamiento-categoria-mini-titulo {
  font-size: 17px !important;
  font-weight: 700 !important;
  color: #3D362D !important;
  margin: 0 0 6px !important;
  padding: 0 0 0 20px !important;
  position: relative;
}

#description .alojamiento-categoria-mini-titulo::before {
  content: "\203A" !important;
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  color: #E8820C;
  font-weight: 700;
  font-size: 22px;
  line-height: 1;
}

.alojamiento-categoria-mini-texto {
  font-family: 'DM Sans', sans-serif;
  font-size: 12.5px;
  font-style: italic;
  color: #9a8c7a;
  margin: 0 0 16px;
  line-height: 1.6;
}

.alojamiento-hotel-mini-nombre {
  font-family: 'Lora', serif;
  font-size: 14px;
  font-weight: 600;
  color: #3D362D;
  line-height: 1.3;
  margin-bottom: 10px;
}

/* Tira de miniaturas del resto de la galería — mismo tamaño/lenguaje que
   la que ya usabas antes de simplificar el diseño. Aumenta el número de
   fotos que se pueden ver sin añadir texto ni decisiones. */
ul.alojamiento-hotel-mini-galeria {
  list-style: none;
  display: flex;
  gap: 5px;
  margin: 8px 0 0;
  padding-top: 8px;
  border-top: 1px solid #f0ede6;
  overflow-x: auto;
}

ul.alojamiento-hotel-mini-galeria li {
  flex-shrink: 0;
}

ul.alojamiento-hotel-mini-galeria img {
  width: 40px;
  height: 32px;
  object-fit: cover;
  border-radius: 4px;
  display: block;
  cursor: zoom-in;
  transition: opacity .15s ease;
}

ul.alojamiento-hotel-mini-galeria img:hover {
  opacity: .8;
}

/* Estrellas + enlaces Web/Mapa, todo en la misma fila — la categoría del
   hotel se lee como un dato más junto a las acciones, en vez de ocupar su
   propia línea junto al nombre. */
.alojamiento-hotel-mini-ctas {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px 14px;
  padding-top: 8px;
  border-top: 1px solid #f0ede6;
}

.alojamiento-hotel-mini-enlaces {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-left: auto;
}

.alojamiento-hotel-mini-estrellas {
  font-size: 11px;
  font-weight: 700;
  color: #E8820C;
  letter-spacing: 1px;
  white-space: nowrap;
  flex-shrink: 0;
  cursor: help;
}

.alojamiento-hotel-mini-ctas a {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: .02em;
  color: #E8820C;
  text-decoration: underline;
  text-underline-offset: 2px;
}

.alojamiento-hotel-mini-ctas a:hover {
  color: #c96f0a;
}

.aloj-icon {
  width: 10px;
  height: 10px;
  flex-shrink: 0;
}

/* Tablet — 2 columnas entre el móvil (1) y el escritorio (3) */
@media (max-width: 991px) and (min-width: 576px) {
  ul.alojamiento-hoteles-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 575px) {
  ul.alojamiento-hoteles-grid {
    grid-template-columns: 1fr;
    gap: 14px;
  }
  .alojamiento-hotel-mini-foto {
    height: 170px;
  }
}

/* ================================================
   VISOR MODAL — clic en cualquier foto de un hotel abre esto, con
   navegación anterior/siguiente entre las fotos de ESE hotel.
   ================================================ */

.aloj-lightbox {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 99999;
  background: rgba(0, 0, 0, .9);
  align-items: center;
  justify-content: center;
  flex-direction: column;
  cursor: zoom-out;
}

.aloj-lightbox.open {
  display: flex;
}

.aloj-lightbox-img {
  max-width: 88vw;
  max-height: 78vh;
  object-fit: contain;
  border-radius: 4px;
  cursor: default;
  display: block;
}

.aloj-lightbox-close {
  position: fixed;
  top: 16px;
  right: 16px;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: rgba(255, 255, 255, .12);
  border: 1px solid rgba(255, 255, 255, .25);
  color: #fff;
  font-size: 20px;
  line-height: 1;
  cursor: pointer;
}

.aloj-lightbox-nav {
  position: fixed;
  top: 50%;
  transform: translateY(-50%);
  background: rgba(255, 255, 255, .12);
  border: 1px solid rgba(255, 255, 255, .25);
  color: #fff;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  font-size: 26px;
  line-height: 1;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
}

.aloj-lightbox-nav:hover {
  background: rgba(255, 255, 255, .22);
}

.aloj-lightbox-prev {
  left: 16px;
}

.aloj-lightbox-next {
  right: 16px;
}

.aloj-lightbox-info {
  color: rgba(255, 255, 255, .8);
  font-size: 13px;
  text-align: center;
  margin-top: 14px;
  cursor: default;
}

.aloj-lightbox-caption {
  display: block;
}

.aloj-lightbox-contador {
  display: block;
  font-size: 11px;
  opacity: .6;
  margin-top: 4px;
}

@media (max-width: 575px) {
  .aloj-lightbox-nav {
    width: 38px;
    height: 38px;
    font-size: 22px;
  }
  .aloj-lightbox-prev {
    left: 6px;
  }
  .aloj-lightbox-next {
    right: 6px;
  }
}