/* ==========================================================================
   Reservas de hotel — complementa a widget.css (reutiliza calendario,
   steppers, campos y botones; aquí solo lo propio del hotel).
   ========================================================================== */

.teoti-hotel {
  font-family: var(--font-body, "Inter", system-ui, sans-serif);
  color: #1E293B;
}

/* ---- Dos columnas: elección a la izquierda, calendario a la derecha ---- */

.th-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 340px;
  gap: 1.8rem;
  align-items: start;
}

.th-side {
  position: sticky;
  top: 96px;
  padding: 1.1rem 1.2rem 1.2rem;
  background: #FBFAF7;
  border: 1px solid #E7E9EF;
  border-radius: 14px;
}

/* Aviso sobre la tabla mientras no hay fechas elegidas. */
.th-locked-note {
  margin-bottom: 12px;
  padding: 11px 14px;
  font-size: 13.5px;
  line-height: 1.5;
  color: #7C5E12;
  background: #FDF6E6;
  border: 1px solid #EDD69F;
  border-radius: 10px;
}

/* Tabla en modo escaparate: legible pero claramente inactiva. */
.th-table--locked .th-col-tipo h6 { color: #6B7A8D; }

.th-table--locked .th-cap,
.th-table--locked .th-beds,
.th-table--locked .th-amenities li,
.th-table--locked .th-opt,
.th-table--locked .th-opt--ok,
.th-table--locked .th-opt--warn,
.th-table--locked .th-room-stock { color: #9AA5B4; }

.th-table--locked .th-amenities li::before { color: #C6CFDA; }

.th-table--locked .th-tags span {
  color: #9AA5B4;
  background: #FAFBFC;
  border-color: #E9EDF3;
}

.th-table--locked .th-col-precio strong { color: #8B96A6; }
.th-table--locked .th-col-precio small  { color: #B3BCC8; }

.th-table--locked .th-room-stepper { opacity: .45; }

.th-table--locked .th-book-btn {
  background: #E2E6ED;
  color: #8B96A6;
  cursor: not-allowed;
}

/* El botón de fotos y detalles NO se bloquea: mirar no depende de las fechas. */
.th-table--locked .th-gal-btn {
  color: #14294D;
  border-color: #C8A046;
}

@media (max-width: 900px) {
  .th-grid {
    grid-template-columns: 1fr;
  }

  /* En una sola columna el calendario va primero: no se puede elegir
     habitación sin fechas. */
  .th-side {
    position: static;
    order: -1;
  }
}

.th-sec {
  padding: 1.1rem 0 0;
  border-top: 1px solid #E7E9EF;
  margin-top: 1.1rem;
}

.th-sec:first-child {
  border-top: 0;
  margin-top: 0;
  padding-top: 0;
}

.th-sec > h5 {
  margin: 0 0 .8rem;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .05em;
  text-transform: uppercase;
  color: #64748B;
}

.th-sec--nested {
  border-top: 1px dashed #E7E9EF;
}

/* ---- Rango de fechas ---- */

.th-daterange {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  padding: 12px 14px;
  margin-bottom: 12px;
  background: #F7F5F0;
  border: 1px solid #E7E9EF;
  border-radius: 12px;
}

.th-dr-box {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 130px;
}

.th-dr-box span {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .05em;
  text-transform: uppercase;
  color: #94A3B8;
}

.th-dr-box strong {
  font-size: 14px;
  font-weight: 600;
  color: #0B1F3A;
}

.th-dr-box.is-active strong {
  color: #C8A046;
}

.th-dr-sep {
  color: #C8A046;
  font-size: 18px;
}

.th-dr-nights {
  margin-left: auto;
  font-size: 13px;
  font-weight: 700;
  color: #0B1F3A;
}

.th-reset {
  margin-top: 10px;
  padding: 8px 14px;
  min-height: 40px;
  font: inherit;
  font-size: 13px;
  font-weight: 600;
  color: #475569;
  background: #fff;
  border: 1px solid #CBD5E1;
  border-radius: 9px;
  cursor: pointer;
}

.th-reset:hover {
  background: #F1F5F9;
}

/* ---- Calendario del hotel ----
   Reglas propias del hotel; el calendario de experiencias no se toca.
   El orden importa: cada regla debe ganar a .teoti-hotel .tw-day.tw-avail,
   que tiene la misma especificidad, así que va después. */

.teoti-hotel .tw-cal-wrap {
  padding: 16px 16px 14px;
  background: #fff;
  border: 1px solid var(--tw-line, #E7E9EF);
  border-radius: 14px;
}

.teoti-hotel .tw-cal th {
  color: #94A3B8;
}

/* El hotel hereda el calendario del widget: días libres en blanco con
   borde, no rellenos de azul. Lo que destaca es el rango elegido, que
   es lo que de verdad hay que mirar al reservar una estancia. */

/* Día no disponible: se apaga, sin caja ni tachado.
   pointer-events:none anula también cursor y hover. */
.teoti-hotel .tw-day.tw-muted {
  background: transparent;
  border-color: transparent;
  color: #C3CBD6;
  text-decoration: none;
  pointer-events: none;
}

/* ---- Rango: entrada → noches → salida ----
   Los extremos van redondeados hacia fuera y el interior cuadrado,
   de modo que el tramo se lee como una sola pieza continua en vez de
   como una fila de botones sueltos. */

/* Vista previa mientras se busca la salida: tono suave y borde
   punteado, para distinguir "esto es lo que llevas" de "esto ya
   está confirmado". Mismo criterio que el calendario del panel. */
.teoti-hotel .tw-day.th-preview {
  background: rgba(200, 160, 70, .18);
  border-color: var(--tw-accent, #C8A046);
  border-style: dashed;
  color: #0B1F3A;
  border-radius: 0;
  box-shadow: none;
}

.teoti-hotel .tw-day.th-preview-end {
  background: var(--tw-accent, #C8A046);
  border-color: var(--tw-accent, #C8A046);
  border-style: solid;
  color: #0B1F3A;
  font-weight: 700;
  border-radius: 0 10px 10px 0;
  box-shadow: 0 2px 8px rgba(200, 160, 70, .3);
}

/* Noches intermedias del rango confirmado: azul diluido, no macizo.
   Con el azul fuerte de extremo a extremo no se distinguían la
   entrada y la salida del resto de la estancia. */
.teoti-hotel .tw-day.th-in-range {
  background: rgba(11, 31, 58, .1);
  border-color: rgba(11, 31, 58, .14);
  color: #0B1F3A;
  font-weight: 600;
  border-radius: 0;
  box-shadow: none;
}

/* Entrada y salida: azul sólido, que es lo que tiene que ganar. */
.teoti-hotel .tw-day.tw-sel {
  background: #0B1F3A;
  border-color: #0B1F3A;
  color: #fff;
  font-weight: 700;
  box-shadow: 0 3px 10px rgba(11, 31, 58, .28);
}

.teoti-hotel .tw-day.th-start { border-radius: 10px 0 0 10px; }
.teoti-hotel .tw-day.th-end   { border-radius: 0 10px 10px 0; }

/* Una sola noche seleccionada: redondeada por los cuatro lados. */
.teoti-hotel .tw-day.th-start.th-end { border-radius: 10px; }

.teoti-hotel .tw-cal-note {
  background: var(--tw-panel, #FAF7F0);
  border: 1px solid #E2DCCE;
  border-left: 3px solid var(--tw-accent, #C8A046);
}

/* ---- Tabla de habitaciones (3 columnas) ---- */

.th-table {
  border: 1px solid #E7E9EF;
  border-radius: 13px;
  overflow: hidden;
}

.th-thead,
.th-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 170px 250px;
}

.th-thead > div {
  padding: 12px 16px;
  font-size: 12.5px;
  font-weight: 700;
  color: #fff;
  background: #14294D;
}

.th-thead > div + div {
  border-left: 1px solid rgba(255, 255, 255, .18);
}

.th-row {
  border-top: 1px solid #E7E9EF;
  background: #fff;
  transition: background .15s ease;
}

.th-row:first-of-type { border-top: 0; }

/* Fondo alterno por habitación.
   Las fichas son altas: al desplazarse en un teléfono se pierde el borde que
   las separa y no se sabe si lo que se está leyendo pertenece a la anterior
   o ya es la siguiente. Alternando el fondo, el cambio de habitación se nota
   aunque no se vea la línea divisoria.
   El #FBFCFD original era tan tenue que en la práctica no existía: a dos
   puntos del blanco no se distinguía de la fila de al lado ni en una
   pantalla bien calibrada, y menos aún con luz de día. Sube a un gris que
   de verdad se ve, pero frío y sin saturar: sigue leyéndose como «esto es
   otro bloque», no como «esto está seleccionado» —ese papel lo tiene
   .is-on, que además es CÁLIDO, así que los dos estados no se confunden
   aunque ahora se parezcan más en claridad.

   `odd` y no `even`: .th-thead ocupa el primer hijo, así que las
   habitaciones son los hijos 2, 3, 4… y con `even` la tinta caía en la
   PRIMERA. La cabecera se oculta en móvil, pero display:none no cambia el
   conteo de nth-child, así que la alternancia es la misma en las dos. */
.th-row:nth-child(odd) { background: #EFF2F7; }

/* La elegida gana a la alternancia: es un estado, no una posición.
   Se refuerza con el dorado de la casa para que siga ganando ahora que la
   alternancia tiene más peso: el tono cálido y la línea de la izquierda la
   separan de las dos filas vecinas, sea cual sea su turno en la zebra. */
.th-row.is-on,
.th-row.is-on:nth-child(odd) {
  background: #FBF3E0;
  box-shadow: inset 3px 0 0 var(--tw-accent, #C8A046);
}

.th-col-tipo,
.th-col-precio,
.th-col-sel {
  padding: 16px;
}

.th-col-precio,
.th-col-sel {
  border-left: 1px solid #E7E9EF;
}

/* Columna 1 — detalle */

/* El nombre es lo primero que se busca al recorrer la lista: manda con
   claridad sobre el resto de la ficha en vez de competir con la capacidad y
   las camas, que iban a un tamaño parecido. */
.th-col-tipo h6 {
  margin: 0 0 8px;
  font-family: var(--font-display, inherit);
  font-size: 19px;
  font-weight: 800;
  line-height: 1.25;
  letter-spacing: -.01em;
  color: #14294D;
}

/* El subtítulo («— 2 personas») acompaña sin robarle peso al nombre. */
.th-col-tipo h6 span {
  font-size: 15px;
  font-weight: 500;
  color: #64748B;
}

.th-cap,
.th-beds {
  font-size: 13px;
  color: #475569;
  margin-bottom: 3px;
}

.th-cap strong { color: #0B1F3A; }

/* Aviso de «ya hay resultados, mira abajo».
   Las habitaciones viven por debajo del calendario y en un teléfono quedan
   fuera de pantalla: al cerrar el rango de fechas no cambiaba nada visible y
   parecía que la página no había hecho nada. Borde discontinuo y no relleno
   sólido para que se lea como indicación y no como otro botón. */
.th-scroll-cta {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0 0 12px;
  padding: 10px 13px;
  background: #FAF7F0;
  border: 1px dashed #C8A046;
  border-radius: 10px;
  font-size: 13.5px;
  font-weight: 600;
  line-height: 1.45;
  color: #14294D;
  overflow-wrap: anywhere;
}

.th-scroll-cta::before {
  content: "↓";
  font-size: 16px;
  line-height: 1;
  color: #C8A046;
  flex-shrink: 0;
}

/* Destello de bienvenida, una sola vez. El aviso nace a la vez que la página
   se desplaza, así que sin esto aparece ya «usado» y se pierde entre el
   resto. El halo crece y se apaga: llama la atención sin parpadear, que
   molesta y además dispara a quien tiene sensibilidad al movimiento. */
@keyframes th-cta-destello {
  0% {
    background: #FDF6E3;
    border-color: #C8A046;
    box-shadow: 0 0 0 0 rgba(200, 160, 70, .55);
  }
  45% {
    background: #FCF3DC;
    border-color: #C8A046;
    box-shadow: 0 0 0 9px rgba(200, 160, 70, 0);
  }
  100% {
    background: #FAF7F0;
    border-color: #C8A046;
    box-shadow: 0 0 0 0 rgba(200, 160, 70, 0);
  }
}

.th-scroll-cta.is-nuevo {
  animation: th-cta-destello 1.15s cubic-bezier(.22, .61, .36, 1) 1;
}

@media (prefers-reduced-motion: reduce) {
  .th-scroll-cta.is-nuevo { animation: none; }
}

/* La cifra, en su propio nodo para poder traducir el texto de alrededor. */
.th-cta-num {
  flex-shrink: 0;
  padding: 1px 8px;
  background: #C8A046;
  border-radius: 999px;
  font-size: 12.5px;
  font-weight: 800;
  color: #14294D;
}

.th-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
  margin: 10px 0;
  padding-bottom: 10px;
  border-bottom: 1px solid #EDF0F4;
}

.th-tags span {
  padding: 3px 9px;
  font-size: 11.5px;
  color: #334155;
  background: #fff;
  border: 1px solid #D9DEE7;
  border-radius: 7px;
}

.th-amenities {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
  gap: 2px 12px;
  margin: 0;
  padding: 0;
  list-style: none;
}

/* --------------------------------------------------------------------------
   Servicios de la habitación, compactos

   Eran una lista vertical de una viñeta por línea: catorce servicios se
   comían un tercio del alto de cada ficha, y con seis habitaciones el precio
   y la disponibilidad quedaban fuera de pantalla. Como fichas que fluyen en
   la misma línea ocupan una fracción, y a partir de la quinta se pliegan.
   -------------------------------------------------------------------------- */
.th-amen {
  margin: 8px 0 10px;
}

.th-amen-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.th-amen-chips li {
  padding: 2px 8px;
  font-size: 11.5px;
  line-height: 1.55;
  color: #475569;
  background: #F7F8FA;
  border: 1px solid #E4E8EE;
  border-radius: 6px;
  overflow-wrap: anywhere;
}

.th-amen-more { margin-top: 5px; }

.th-amen-more > summary {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  width: fit-content;
  padding: 3px 4px;
  font-size: 11.5px;
  font-weight: 600;
  color: #14294D;
  cursor: pointer;
  border-radius: 6px;
  list-style: none;                /* quita el triángulo por defecto */
  transition: color .15s ease;
}
.th-amen-more > summary::-webkit-details-marker { display: none; }
.th-amen-more > summary:hover { color: #A8842E; }

.th-amen-more > summary:focus-visible {
  outline: 2px solid #C8A046;
  outline-offset: 2px;
}

/* Flecha propia, que gira al abrir. */
.th-amen-more > summary::after {
  content: "";
  width: 5px;
  height: 5px;
  border-right: 1.5px solid currentColor;
  border-bottom: 1.5px solid currentColor;
  transform: translateY(-2px) rotate(45deg);
  transition: transform .2s ease;
}
.th-amen-more[open] > summary::after {
  transform: translateY(1px) rotate(-135deg);
}

.th-amen-num {
  padding: 1px 6px;
  background: #EEF1F6;
  border-radius: 999px;
  font-weight: 800;
  font-size: 11px;
  color: #14294D;
}

.th-amen-more[open] > .th-amen-chips { margin-top: 6px; }

@media (prefers-reduced-motion: reduce) {
  .th-amen-more > summary,
  .th-amen-more > summary::after { transition: none; }
}

.th-amenities li {
  position: relative;
  padding-left: 17px;
  font-size: 12.5px;
  line-height: 1.55;
  color: #475569;
}

.th-amenities li::before {
  content: "✓";
  position: absolute;
  left: 0;
  color: #2E9E5B;
  font-weight: 700;
}

.th-gal-btn {
  margin-top: 12px;
  padding: 0 14px;
  min-height: 40px;
  font: inherit;
  font-size: 13px;
  font-weight: 600;
  color: #14294D;
  background: #fff;
  border: 1px solid #C8A046;
  border-radius: 9px;
  cursor: pointer;
  transition: background .15s ease;
}

.th-gal-btn:hover { background: #FDF6E6; }

/* Columna 2 — precio */

.th-col-precio strong {
  display: block;
  font-size: 20px;
  font-weight: 700;
  color: #0B1F3A;
}

.th-col-precio small {
  display: block;
  margin-top: 4px;
  font-size: 12px;
  line-height: 1.4;
  color: #94A3B8;
}

/* Columna 3 — opciones y selector */

.th-opt {
  font-size: 12.5px;
  line-height: 1.45;
  color: #475569;
  margin-bottom: 7px;
}

.th-opt--ok   { color: #1D7A45; font-weight: 600; }
.th-opt--warn { color: #C2410C; font-weight: 600; }

.th-room-stepper {
  margin-top: 12px;
}

.th-room-stock {
  margin-top: 6px;
  font-size: 11.5px;
  color: #94A3B8;
}

/* Sin disponibilidad en las fechas elegidas. No es un error del
   usuario, así que se dice en gris fuerte y no en rojo de alarma;
   lo que sí se hace es dejarlo claro antes de que intente reservar. */
.th-room-stock--full {
  color: #B4453C;
  font-weight: 600;
}

.th-row--full {
  opacity: .62;
}

.th-row--full .th-col-precio strong { color: #8B96A6; }
.th-row--full .th-room-stepper      { opacity: .45; }

.th-row--full .th-book-btn,
.th-book-btn[disabled] {
  background: #E2E6ED;
  color: #8B96A6;
  cursor: not-allowed;
  border-color: #E2E6ED;
}

/* Mirar las fotos sigue permitido aunque no queden habitaciones:
   el cliente puede querer esas fechas otro mes. */
.th-row--full .th-gal-btn {
  opacity: 1;
  color: #14294D;
  border-color: #C8A046;
}

/* Nota bajo el código de reserva en la pantalla de éxito. */
.tw-ok-nota {
  margin-top: 1rem;
  font-size: 13px;
  line-height: 1.55;
  color: #5A6B80;
}

/* Aviso cuando la comprobación de disponibilidad falla. */
.th-locked-note--err {
  color: #8A2F27;
  background: #FDEDEB;
  border-color: #F0C3BD;
}

/* Pulso del borde al llegar a las habitaciones desde el calendario. */
@keyframes th-pulso-borde {
  0%   { box-shadow: inset 0 0 0 2px #C8A046; }
  70%  { box-shadow: inset 0 0 0 2px rgba(200, 160, 70, .15); }
  100% { box-shadow: inset 0 0 0 2px rgba(200, 160, 70, 0); }
}

.th-row.th-pulse {
  animation: th-pulso-borde .85s ease-out 2;
}

/* ---- Lightbox de galería por habitación ---- */

/* Entrada: el fondo se funde y la ficha sube un poco escalando. Aparecer de
   golpe hacía que el salto se leyera como un error de la página. Se usan
   animaciones y no transiciones porque el nodo se crea en el momento: no hay
   un estado previo desde el que transicionar. */
@keyframes th-lb-fondo {
  from { opacity: 0; }
  to   { opacity: 1; }
}
@keyframes th-lb-ficha {
  from { opacity: 0; transform: translateY(14px) scale(.985); }
  to   { opacity: 1; transform: none; }
}

.th-lightbox {
  position: fixed;
  inset: 0;
  z-index: 1000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1.2rem;
  background: rgba(11, 31, 58, .8);
  backdrop-filter: blur(3px);
  animation: th-lb-fondo .22s ease-out both;
}

.th-detail {
  position: relative;
  width: 100%;
  max-width: 1160px;
  height: min(92vh, 880px);
  overflow: hidden;
  background: #fff;
  border-radius: 14px;
  /* Arranca un pelo después que el fondo: primero oscurece, luego entra la
     ficha. Las dos a la vez se leen como un parpadeo. */
  animation: th-lb-ficha .3s cubic-bezier(.22, .61, .36, 1) .05s both;
}

@media (prefers-reduced-motion: reduce) {
  .th-lightbox,
  .th-detail { animation-duration: .01ms; animation-delay: 0s; }
}

.th-detail-body {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr);
  gap: 1.6rem;
  padding: 1.6rem;
  height: 100%;
  align-items: stretch;
}

/* Visor sin columna de detalle: la foto ocupa todo el modal. */
.th-detail--solo .th-detail-body {
  grid-template-columns: minmax(0, 1fr);
}

/* IMPORTANTE: los elementos de abajo declaran display propio (grid/flex),
   que gana al display:none que el navegador aplica a [hidden]. Sin estas
   reglas, el aviso «sin fotos» queda invisible pero encima de la imagen y
   se traga el clic del zoom. */
.th-lb-empty[hidden],
.th-thumbs[hidden],
.th-lb-nav[hidden] {
  display: none !important;
}

.th-lb-close {
  position: absolute;
  top: 12px;
  right: 12px;
  z-index: 3;
  width: 44px;
  height: 44px;
  font-size: 17px;
  color: #475569;
  background: rgba(255, 255, 255, .92);
  border: 1px solid #E2E5EC;
  border-radius: 50%;
  cursor: pointer;
}

.th-lb-close:hover { background: #F1F5F9; }

/* ---- Columna de fotos ---- */

/* La foto ocupa todo el alto disponible del modal; las miniaturas quedan
   fijas abajo y la columna de texto scrollea por su cuenta. */
.th-detail-fotos {
  display: flex;
  flex-direction: column;
  min-height: 0;
}

.th-detail-info {
  min-width: 0;
  overflow-y: auto;
  padding-right: 4px;
}

.th-lb-stage {
  position: relative;
  flex: 1;
  min-height: 0;
  overflow: hidden;
  border-radius: 10px;
  background-color: #F1EDE4;
  /* La foto actual la pone hotel.js; la hereda el ::before de abajo. */
  background-size: cover;
  background-position: center;
}

/* Telón desenfocado con la misma foto. La imagen va en `contain` para no
   recortar nada —en una habitación, recortar esconde justo lo que se quiere
   ver—, y eso deja franjas cuando la proporción no coincide con el marco.
   Rellenarlas con la propia foto difuminada cuadra el encuadre sin perder un
   píxel del original, en vez de dejar dos bandas de beige plano.
   El inset negativo evita el borde claro que el desenfoque deja en el filo. */
.th-lb-stage::before {
  content: "";
  position: absolute;
  inset: -32px;
  background-image: inherit;
  background-size: cover;
  background-position: center;
  filter: blur(22px) brightness(.82) saturate(1.1);
  z-index: 0;
}

.th-lb-stage img {
  position: relative;
  z-index: 1;
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
  cursor: zoom-in;
  transition: transform .3s ease;
}

/* Las flechas y el aviso van por encima del telón. */
.th-lb-nav,
.th-lb-empty { z-index: 2; }

.th-lb-stage img.is-zoomed {
  transform: scale(2.2);
  cursor: zoom-out;
}

.th-thumbs {
  display: flex;
  flex-shrink: 0;
  gap: 8px;
  margin-top: 10px;
  overflow-x: auto;
  padding-bottom: 4px;
}

.th-thumb {
  flex: 0 0 84px;
  height: 62px;
  padding: 0;
  overflow: hidden;
  background: #F1EDE4;
  border: 2px solid transparent;
  border-radius: 8px;
  cursor: pointer;
}

.th-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.th-thumb.is-on { border-color: #C8A046; }

/* ---- Columna de resumen ---- */

.th-detail-info h3 {
  margin: 0 0 12px;
  padding-right: 46px;
  font-family: var(--font-display, inherit);
  font-size: 22px;
  line-height: 1.25;
  color: #14294D;
}

.th-detail-info .th-tags {
  margin: 0 0 14px;
  padding-bottom: 14px;
}

.th-d-line {
  margin: 0 0 7px;
  font-size: 14px;
  color: #475569;
}

.th-d-line strong { color: #0B1F3A; }

.th-d-desc {
  margin: 12px 0 16px;
  font-size: 14px;
  line-height: 1.6;
  color: #475569;
}

.th-detail-info h4 {
  margin: 18px 0 8px;
  font-size: 14.5px;
  font-weight: 700;
  color: #0B1F3A;
}

.th-checks2 {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(165px, 1fr));
  gap: 3px 14px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.th-checks2 li {
  position: relative;
  padding-left: 19px;
  font-size: 13.5px;
  line-height: 1.6;
  color: #475569;
}

.th-checks2 li::before {
  content: "✓";
  position: absolute;
  left: 0;
  color: #2E9E5B;
  font-weight: 700;
}

.th-lb-nav {
  position: absolute;
  top: 50%;
  width: 44px;
  height: 44px;
  transform: translateY(-50%);
  display: grid;
  place-items: center;
  background: rgba(255, 255, 255, .92);
  border: 0;
  border-radius: 50%;
  cursor: pointer;
  box-shadow: 0 2px 10px rgba(11, 31, 58, .2);
}

.th-lb-prev { left: 12px; }
.th-lb-next { right: 12px; }

.th-lb-nav::before {
  content: "";
  width: 9px; height: 9px;
  border-left: 2px solid #14294D;
  border-bottom: 2px solid #14294D;
  transform: rotate(45deg) translate(2px, -2px);
}

.th-lb-next::before { transform: rotate(-135deg) translate(2px, -2px); }

.th-lb-empty {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  padding: 1.5rem;
  text-align: center;
  font-size: 13.5px;
  color: #64748B;
}

@media (max-width: 860px) {
  .th-detail {
    height: min(94vh, 900px);
  }

  .th-detail-body {
    /* minmax(0, 1fr) y NO `1fr`: un `1fr` pelado es minmax(AUTO, 1fr), y ese
       mínimo automático es el contenido, así que la columna se estiraba a lo
       que pidiera el elemento más ancho de dentro en vez de encogerse. La
       rejilla de características (.th-checks2, auto-fill de 165px) resolvía
       tres columnas y empujaba el cuerpo a 636px dentro de un modal de 392:
       los 244px sobrantes los cortaba el overflow:hidden y el texto quedaba
       ilegible sin forma de llegar a él. La regla de escritorio sí llevaba
       el minmax(0, …); esta se quedó sin él. */
    grid-template-columns: minmax(0, 1fr);

    /* Se abandona la rejilla en móvil: con height:100% heredado y el
       contenido más alto que el modal, la fila de la foto se resolvía a 0px
       y la ficha se dibujaba encima de las miniaturas. Un flex en columna
       apila sin ambigüedad —cada hijo ocupa lo suyo y el contenedor
       desborda hacia el scroll— y no depende de cómo se repartan pistas.

       SCROLL ÚNICO, además: antes eran dos filas al 50% cada una con su
       propia barra, así que en un teléfono la ficha se quedaba en el 40% del
       alto y había que adivinar que ese trozo se desplazaba por dentro. */
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 1.1rem;
    padding: 1.1rem;
    overflow-y: auto;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
  }

  /* Ninguno de los dos bloques se estira ni se encoge: cada uno ocupa lo que
     pide su contenido y el sobrante lo absorbe el scroll del cuerpo. */
  .th-detail-body > .th-detail-fotos,
  .th-detail-body > .th-detail-info { flex: 0 0 auto; }

  /* La foto deja de pelear por la altura: proporción fija y el resto para
     el texto, que es lo que se viene a leer. */
  .th-detail-fotos { min-width: 0; }
  .th-lb-stage {
    flex: none;
    aspect-ratio: 4 / 3;
    min-height: 0;
  }

  /* Ya no es una caja con scroll propio: fluye dentro del cuerpo. */
  .th-detail-info {
    overflow: visible;
    padding-right: 0;
  }
}

/* Pantallas estrechas: dos columnas de características no caben. Los textos
   largos («Artículos de aseo gratis») se partían o se salían. */
@media (max-width: 560px) {
  .th-checks2,
  .th-amenities { grid-template-columns: minmax(0, 1fr); }
}

/* Ninguna palabra larga —un correo, una URL, un nombre compuesto— debe poder
   volver a estirar la caja: sin scroll horizontal, lo que se sale se pierde. */
.th-detail-info,
.th-detail-info h3,
.th-d-line,
.th-d-desc,
.th-checks2 li,
.th-tags span {
  min-width: 0;
  overflow-wrap: anywhere;
}

@media (prefers-reduced-motion: reduce) {
  .th-lb-stage img { transition: none; }
}

/* ---- Resumen ---- */

.th-summary {
  margin-top: 1.2rem;
  padding: 1.1rem 1.2rem;
  background: #F7F5F0;
  border: 1px solid #E7E9EF;
  border-radius: 13px;
}

.th-summary > h5 {
  margin: 0 0 .7rem;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .05em;
  text-transform: uppercase;
  color: #64748B;
}

.th-summary .row {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 14px;
  padding: 5px 0;
  font-size: 13.5px;
  color: #475569;
}

.th-summary .row strong {
  color: #0B1F3A;
  white-space: nowrap;
}

.th-summary .row.sub {
  margin-top: 6px;
  padding-top: 10px;
  border-top: 1px solid #E2E5EC;
}

.th-summary .row.tot {
  margin-top: 6px;
  padding-top: 10px;
  border-top: 1px solid #E2E5EC;
  font-size: 16px;
  font-weight: 700;
  color: #0B1F3A;
}

.th-summary .row.tot strong {
  font-size: 19px;
}

.th-empty {
  margin: 6px 0 0;
  font-size: 13px;
  color: #94A3B8;
}

.th-submit {
  width: 100%;
  margin-top: 1rem;
  justify-content: center;
}

.th-note {
  margin: .7rem 0 0;
  font-size: 12px;
  text-align: center;
  color: #64748B;
}

/* ---- Preguntas frecuentes ---- */

.faq-item {
  border: 1px solid var(--line, #E7E9EF);
  border-radius: 12px;
  margin-bottom: 10px;
  background: var(--surface, #fff);
  overflow: hidden;
}

.faq-item > summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding: 15px 18px;
  min-height: 44px;
  font-weight: 600;
  color: var(--ink, #0B1F3A);
  cursor: pointer;
  list-style: none;
}

.faq-item > summary::-webkit-details-marker { display: none; }

.faq-item > summary::after {
  content: "+";
  flex-shrink: 0;
  font-size: 20px;
  font-weight: 400;
  line-height: 1;
  color: var(--accent, #C8A046);
  transition: transform .2s ease;
}

.faq-item[open] > summary::after {
  transform: rotate(45deg);
}

.faq-item > summary:hover {
  background: var(--surface-2, #F7F5F0);
}

.faq-body {
  padding: 0 18px 16px;
  font-size: .94rem;
  line-height: 1.6;
  color: var(--muted, #475569);
}

.faq-body p { margin: 0 0 .6rem; }
.faq-body p:last-child { margin-bottom: 0; }

.faq-body ul {
  margin: .3rem 0 .6rem;
  padding-left: 1.1rem;
}

.faq-body li { margin-bottom: .25rem; }

/* ---- Cabecera compacta ---- */

.hotel-head {
  padding: clamp(1.4rem, 3vw, 2.2rem) 0 clamp(1rem, 2vw, 1.4rem);
}

.hotel-head h1 {
  margin: 0 0 .4rem;
  font-size: clamp(1.8rem, 3.2vw, 2.6rem);
  line-height: 1.15;
}

.hotel-addr {
  display: flex;
  align-items: center;
  gap: .45rem;
  margin: 0;
  font-size: .92rem;
  color: var(--muted, #475569);
}

.hotel-addr svg {
  width: 17px;
  height: 17px;
  flex-shrink: 0;
  color: var(--accent, #C8A046);
}

/* ---- Galería mosaico del complejo, a ancho completo de pantalla ---- */

.hotel-mosaic-wrap {
  padding: 0 0 clamp(1.5rem, 3vw, 2.4rem);
}

.hotel-mosaic {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr;
  grid-template-rows: repeat(2, minmax(0, 1fr));
  gap: 6px;
  height: clamp(320px, 46vw, 560px);
}

.mo {
  position: relative;
  padding: 0;
  overflow: hidden;
  background: var(--surface-2, #F7F5F0);
  border: 0;
  cursor: pointer;
}

.mo-a { grid-row: 1 / 3; }

.mo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform .4s ease;
}

.mo:hover img { transform: scale(1.04); }

.mo-more {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  padding: 1rem;
  text-align: center;
  font-size: .95rem;
  font-weight: 700;
  color: #fff;
  background: rgba(11, 31, 58, .55);
  backdrop-filter: blur(2px);
}

/* Segunda fila: cuatro fotos apaisadas bajo el mosaico. */
.hotel-strip {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 6px;
  margin-top: 6px;
  height: clamp(140px, 15vw, 210px);
}

/* Una foto que aún no existe se retira del mosaico: el resto se reacomoda
   solo gracias a que la cuadrícula reparte por posición automática. */
.mo.is-missing { display: none; }

@media (max-width: 860px) {
  .hotel-mosaic {
    grid-template-columns: 1fr 1fr;
    height: clamp(280px, 62vw, 420px);
  }

  .mo-a { grid-row: 1 / 3; grid-column: 1 / 2; }
  .mo-d, .mo-e { display: none; }
}

@media (max-width: 860px) {
  .hotel-strip {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    height: clamp(110px, 20vw, 150px);
  }

  .hotel-strip .mo:nth-child(4) { display: none; }
}

@media (max-width: 560px) {
  .hotel-mosaic {
    grid-template-columns: 1fr;
    grid-template-rows: 1fr;
    height: clamp(240px, 60vw, 340px);
  }

  .mo-b, .mo-c { display: none; }
  .mo-a { grid-row: 1; grid-column: 1; }

  .hotel-strip {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    height: clamp(96px, 26vw, 130px);
  }

  .hotel-strip .mo:nth-child(3) { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  .mo img { transition: none; }
  .mo:hover img { transform: none; }
}

/* ---- Cuadrícula de servicios ---- */

.amenity-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
  gap: 1.4rem 2rem;
}

.amenity-col h4 {
  margin: 0 0 .6rem;
  font-size: .82rem;
  font-weight: 700;
  letter-spacing: .05em;
  text-transform: uppercase;
  color: var(--accent-d, #A8842E);
}

.amenity-col ul {
  margin: 0;
  padding: 0;
  list-style: none;
}

.amenity-col li {
  position: relative;
  padding-left: 1.3rem;
  margin-bottom: .4rem;
  font-size: .92rem;
  color: var(--muted, #475569);
}

.amenity-col li::before {
  content: "✓";
  position: absolute;
  left: 0;
  color: var(--accent, #C8A046);
  font-weight: 700;
}

/* ---- Responsive ---- */

/* Por debajo de 820 px la tabla deja de ser tabla: cada habitación se lee
   como ficha apilada, que es más claro que tres columnas estrechas. */
@media (max-width: 820px) {
  .th-thead { display: none; }

  .th-thead,
  .th-row {
    grid-template-columns: 1fr;
  }

  .th-row {
    border-top: 8px solid #F1F3F7;
  }

  .th-col-precio,
  .th-col-sel {
    border-left: 0;
    border-top: 1px solid #E7E9EF;
  }

  .th-col-precio {
    display: flex;
    align-items: baseline;
    gap: 10px;
    flex-wrap: wrap;
  }

  .th-col-precio small { margin-top: 0; }
}

@media (max-width: 640px) {
  .th-daterange { gap: 6px; }

  .th-dr-nights {
    width: 100%;
    margin-left: 0;
  }

  .th-amenities {
    grid-template-columns: 1fr;
  }
}

@media (prefers-reduced-motion: reduce) {
  .th-row, .faq-item > summary::after { transition: none; }
  .th-row.th-pulse { animation-duration: .01ms; }
}