/* =============================================================================
   TOP TIER BOATING — piel del asistente "Book your boat"
   =============================================================================

   Viste el LIGHTBOX de LatePoint con la interfaz que clonamos: carcasa a
   pantalla completa, panel izquierdo oscuro con la marca, barra de progreso
   horizontal con su porcentaje, tarjetas grandes con foto, calendario amplio y
   pie con los botones del sitio.

   Dentro no hay nada nuestro: los pasos, la disponibilidad y el cobro son de
   LatePoint. Esto sólo cambia cómo se ve.

   ALCANCE
   -------
   TODO cuelga de `.booking-form-in-lightbox`, la clase que LatePoint pone en su
   lightbox. El formulario en línea de /book/ NO se ve afectado: allí no hay
   carcasa modal que acompañar y se queda con el tema de marca normal
   (latepoint-theme.css).

   ESPECIFICIDAD
   -------------
   Los selectores son largos aposta. LatePoint escribe cadenas de hasta (0,5,0)
   y una versión corta pierde. Cada bloque repite la cadena necesaria para
   empatar o superar; a igualdad, manda el orden y esta hoja va detrás.
   Ya pasó con la primera versión del asistente: media hoja no se aplicaba.

   Los colores salen de las variables de latepoint-theme.css (--ttb-*).       */

/* ============================ barra de consulta rápida (portada) ========
   Los campos se van abriendo por orden: no se puede elegir grupo ni duración
   sin destino, ni fecha sin lo anterior. El estado bloqueado tiene que verse,
   porque si no parece que el botón está roto. */
.search-dropdown.ttb-bloqueado > button {
  opacity: 0.45;
  cursor: not-allowed;
}
.search-dropdown.is-elegido > button {
  background-color: rgba(13, 18, 22, 0.04);
}
/* El botón de reserva de la barra, apagado hasta que hay fecha y hora. */
button.ttb-ir:disabled {
  opacity: 0.35;
  cursor: not-allowed;
}

/* El campo que abre el embudo (Destination) va en negro; el resto, normal.

   Dos clases con `.search-dropdown` delante —(0,2,1)— para ganarle a las
   utilidades `bg-transparent` / `text-black` del marcado, que son (0,1,0). Sin
   esto habría que pelear con el orden de la hoja de Tailwind, que no
   controlamos. Ningún !important: basta con la especificidad. */
.search-dropdown button.ttb-principal {
  background-color: var(--color-surface-deep, #0d1216);
  color: #fff;
}
.search-dropdown button.ttb-principal:hover {
  background-color: var(--color-surface-raised, #161d23);
}
.search-dropdown button.ttb-secundario {
  background-color: transparent;
  color: #0d1216;
}
.search-dropdown button.ttb-secundario:hover {
  background-color: #f5f6f7;
}

/* ------------------------------------------- acceso de cliente (header) */
.ttb-cuenta {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 0 12px;
  height: 40px;
  border-radius: 6px;
  font-size: 14px;
  color: rgba(255, 255, 255, 0.9);
  white-space: nowrap;
  transition: color 0.25s, background-color 0.25s;
}
.ttb-cuenta:hover {
  color: #fff;
  background: rgba(255, 255, 255, 0.1);
}
/* En pantallas estrechas se queda sólo el icono: el texto empujaba el botón
   de reservar fuera de la barra. */
@media (max-width: 1100px) {
  .ttb-cuenta__t { display: none; }
  .ttb-cuenta { padding: 0 8px; }
}

/* Y en móvil desaparece del todo.

   Ni con el texto oculto cabía: logotipo (164) + cuenta (36) + reservar (63) +
   menú (40) + huecos (60) suman 363 en los 335 que deja la barra a 375px, y lo
   que se salía por la derecha era justo el botón del menú — la única puerta al
   resto del sitio desde un móvil. "My account" está en ese menú, así que aquí
   no se pierde nada: se cambia un icono a medio salir por un enlace entero. */
@media (max-width: 1023px) {
  .ttb-cuenta { display: none; }

  /* El primer campo de la barra, a lo ancho de las dos columnas.

     Va por CSS y no por el índice del bucle de React porque este mismo script
     reordena la barra al montarla en WordPress: el primero en pantalla
     (Experience) no es el primero del listado. `:first-child` acierta siempre,
     venga el orden de donde venga. */
  .search-dropdown:first-child {
    grid-column: span 2 / span 2;
  }
}

/* Addons: una fila por complemento con su contador.

   Antes era una casilla de marcar. Se quedó corta en cuanto "1 Hour Extra"
   pasó a admitir hasta cinco unidades: hacía falta decir CUÁNTAS, no sólo sí
   o no. Se reusa el mismo contador que el tamaño del grupo —en versión
   pequeña— para no enseñar dos maneras distintas de contar en la misma barra. */
.ttb-extra {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding: 6px 8px;
  border-radius: 8px;
  transition: background-color 0.2s;
}
.ttb-extra.is-marcado {
  background: rgba(13, 18, 22, 0.05);
}
.ttb-extra__n {
  flex: 1;
  font-size: 15px;
  color: #0d1216;
}
.ttb-extra__p {
  font-size: 13px;
  font-weight: 600;
  color: rgba(13, 18, 22, 0.55);
}
.ttb-contador--mini {
  gap: 6px;
  padding: 0;
  flex: 0 0 auto;
}
.ttb-contador--mini .ttb-contador__b {
  width: 28px;
  height: 28px;
  font-size: 15px;
}
.ttb-contador--mini .ttb-contador__n {
  min-width: 22px;
  flex: 0 0 auto;
  font-size: 15px;
}

/* ---------------------------------------- calendario de la barra -------
   Día y hora se eligen aquí, sin abrir el panel. Los datos salen del
   calendario del propio LatePoint (ver TTB_Disponibilidad). */
/* Dos columnas: el mes a la izquierda, las horas a la derecha.

   En una sola columna el desplegable medía más de 800px de alto — el calendario
   entero y debajo diecisiete horas — y se salía de la pantalla. Puestas al
   lado, la altura la marca el mes y las horas caben en el mismo hueco.

   La rejilla se define aquí y no en el marcado porque los cuatro bloques son
   hermanos planos; colocarlos con grid-column evita tener que envolverlos en
   divs sólo para maquetar.                                                  */
.ttb-cal {
  display: grid;
  /* 494 de rejilla + 28 de relleno. Va sumado porque Tailwind pone
     box-sizing:border-box en todo, así que el ancho INCLUYE el padding: con
     494 las dos columnas no cabían y aparecía una barra horizontal. */
  width: 522px;
  max-width: calc(100vw - 32px);
  grid-template-columns: 262px 214px;
  /* La cuarta fila, a 1fr, es la que arregla el hueco. Las horas ocupan las
     filas 1 a -1 y son mucho más altas que el mes; sin una fila elástica al
     final, ese exceso se repartía entre las tres filas del mes y el
     calendario terminaba hundido en la parte de abajo. */
  grid-template-rows: auto auto auto 1fr;
  column-gap: 18px;
  padding: 14px;
  /* Nada de barras en la caja: quien se desplaza es la columna de horas. El
     menú hereda overflow-y:auto de sus utilidades y salían dos. */
  overflow: hidden;
  /* Anclado a la DERECHA: es el penúltimo campo de la barra y, con más de
     500px de ancho, abriéndose hacia la derecha se salía de la ventana. */
  left: auto;
  right: 0;
}
/* Cuando no cabe por debajo, se abre hacia arriba (lo marca tt-planner.js). */
.ttb-cal.ttb-cal--arriba {
  top: auto;
  bottom: 100%;
  margin-top: 0;
  margin-bottom: 8px;
}
/* El mes ocupa la primera columna; cada bloque en su fila. */
.ttb-cal__cab  { grid-column: 1; grid-row: 1; }
.ttb-cal__sem  { grid-column: 1; grid-row: 2; }
.ttb-cal__rej  { grid-column: 1; grid-row: 3; align-self: start; }
.ttb-cal__cargando { grid-column: 1; grid-row: 1; }
/* Las horas, a la derecha, abarcando todo el alto. */
.ttb-cal__horas {
  grid-column: 2;
  grid-row: 1 / -1;
  align-self: start;
}
.ttb-cal__cargando {
  margin: 0;
  padding: 24px 0;
  text-align: center;
  font-size: 14px;
  color: rgba(13, 18, 22, 0.5);
}
.ttb-cal__cab {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 10px;
}
.ttb-cal__mes {
  font-size: 15px;
  font-weight: 600;
  color: #0d1216;
}
.ttb-cal__nav {
  width: 30px;
  height: 30px;
  border: 0;
  border-radius: 999px;
  background: transparent;
  font-size: 20px;
  line-height: 1;
  color: #0d1216;
  cursor: pointer;
}
.ttb-cal__nav:hover { background: rgba(13, 18, 22, 0.06); }
.ttb-cal__sem,
.ttb-cal__rej {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 2px;
}
.ttb-cal__sem span {
  padding: 4px 0;
  text-align: center;
  font-size: 11px;
  letter-spacing: 0.06em;
  color: rgba(13, 18, 22, 0.45);
}
.ttb-cal__d {
  aspect-ratio: 1;
  border: 0;
  border-radius: 8px;
  background: transparent;
  font-size: 14px;
  color: #0d1216;
  cursor: pointer;
  transition: background-color 0.15s;
}
.ttb-cal__d:hover:not(:disabled) { background: rgba(13, 18, 22, 0.08); }
/* Un día sin hueco se ve, pero apagado: enseñar que existe y no se puede
   dice más que esconderlo y dejar un agujero en la rejilla. */
.ttb-cal__d.is-no {
  color: rgba(13, 18, 22, 0.22);
  cursor: not-allowed;
}
.ttb-cal__d.is-sel {
  background: #0d1216;
  color: #fff;
}
.ttb-cal__horas:not(:empty) {
  padding-left: 18px;
  border-left: 1px solid rgba(13, 18, 22, 0.08);
  display: flex;
  flex-wrap: wrap;
  align-content: flex-start;
  gap: 6px;
  /* Si un día tuviera muchísimas horas, se desplaza esta columna sola en vez
     de estirar el desplegable. */
  max-height: 318px;
  overflow-y: auto;
  /* Sin esto la columna crece con su contenido y estira la caja entera. */
  min-height: 0;
}
.ttb-cal__t {
  width: 100%;
  margin: 0 0 2px;
  font-size: 11px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: rgba(13, 18, 22, 0.45);
}
.ttb-cal__h {
  padding: 7px 12px;
  border: 1px solid rgba(13, 18, 22, 0.15);
  border-radius: 999px;
  background: #fff;
  font-size: 13px;
  color: #0d1216;
  cursor: pointer;
  transition: background-color 0.15s, border-color 0.15s;
}
.ttb-cal__h:hover { border-color: rgba(13, 18, 22, 0.45); }
.ttb-cal__h.is-sel {
  background: #0d1216;
  border-color: #0d1216;
  color: #fff;
}

/* Contador de invitados: una línea en vez de una lista de trece. */
.ttb-contador {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding: 6px 4px;
}
.ttb-contador__b {
  width: 38px;
  height: 38px;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid rgba(13, 18, 22, 0.15);
  border-radius: 999px;
  background: #fff;
  font-size: 18px;
  line-height: 1;
  color: #0d1216;
  cursor: pointer;
  transition: background-color 0.2s, border-color 0.2s;
}
.ttb-contador__b:hover {
  background: rgba(13, 18, 22, 0.06);
  border-color: rgba(13, 18, 22, 0.35);
}
.ttb-contador__n {
  flex: 1;
  text-align: center;
  font-size: 20px;
  font-weight: 600;
  color: #0d1216;
}
.ttb-contador__pie {
  margin: 4px 4px 2px;
  font-size: 12px;
  color: rgba(13, 18, 22, 0.5);
  text-align: center;
}

/* ===================================================== carcasa ========== */

/* EL ANCHO SE ARREGLA EN EL GRID, NO EN EL HIJO.

   `.latepoint-lightbox-w` es una rejilla con `grid-template-columns:min-content`
   (así viene en front.css). Con esa columna, poner `width:100%` en la carcasa
   no sirve de nada: el 100% se mide contra una columna que ya se ha encogido al
   mínimo de su contenido. Y como la columna de contenido es `flex:1`, su mínimo
   es pequeño: el modal entero acababa en 886px en una pantalla de 1600.

   Dándole una columna explícita, la carcasa vuelve a ocupar la pantalla como
   antes de tocar nada.                                                       */
.latepoint-lightbox-w.booking-form-in-lightbox {
  /* Ni encogido al contenido (886px) ni pegado a los bordes: una carcasa
     grande con aire alrededor, como en el original. El tope de 1440 es el
     mismo del clon. */
  grid-template-columns: minmax(0, 1440px);
  grid-template-rows: 1fr;
  padding: clamp(16px, 2.5vh, 30px) clamp(16px, 2vw, 40px);
  font-family: var(--ttb-fuente);
}

/* El velo, con el negro de la marca. */
.latepoint-lightbox-w.booking-form-in-lightbox .latepoint-lightbox-shadow {
  background-color: rgba(13, 18, 22, 0.72);
}

.latepoint-lightbox-w.booking-form-in-lightbox .latepoint-lightbox-i {
  width: 100%;
  max-width: none;
  height: 100%;
  max-height: 100%;
  margin: 0;
  border-radius: 0;
  overflow: hidden;
}

.latepoint-lightbox-w.booking-form-in-lightbox .latepoint-lightbox-form {
  height: 100%;
  flex: 1;
  min-height: 0;
}

/* Su contenedor es un flex y el formulario entra como `flex:0 1 auto`, o sea
   dimensionado a su contenido: aunque la carcasa ya ocupase los 1585px, el
   formulario se quedaba en 886. Con `flex:1` y `width:100%` ocupa lo que hay. */
.latepoint-lightbox-w.booking-form-in-lightbox .latepoint-booking-form-element {
  display: flex;
  flex: 1 1 auto;
  width: 100%;
  height: 100%;
  background: #fff;
  border-radius: 0;
  overflow: hidden;
}

/* --------------------------------- mientras se atraviesan pasos ---------
   El contenido se oculta pero NO se desmonta: LatePoint necesita que sus
   elementos existan y sean pulsables para marcar los extras y avanzar. Con
   `display:none` el salto de paso dejaría de funcionar; con `visibility` el
   elemento sigue ahí, sólo que no se ve. */
.latepoint-lightbox-w.booking-form-in-lightbox.ttb-esperando .latepoint-lightbox-i {
  visibility: hidden;
}
.latepoint-lightbox-w.booking-form-in-lightbox.ttb-esperando::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 34px;
  height: 34px;
  margin: -17px 0 0 -17px;
  border: 3px solid rgba(255, 255, 255, 0.25);
  border-top-color: #fff;
  border-radius: 999px;
  animation: ttp-giro 0.8s linear infinite;
  z-index: 5;
}

/* ----------------------------------------- calendario en modo compacto --
   Cuando la reserva viene de la barra de la portada, el paso de la fecha sale
   como un popup pequeño: el servicio, la duración y el grupo ya están
   resueltos, así que sólo queda elegir día y hora. Al avanzar al checkout la
   clase desaparece y la carcasa vuelve a su tamaño completo. */
.latepoint-lightbox-w.booking-form-in-lightbox.ttb-compacto {
  grid-template-columns: minmax(0, 760px);
}
.latepoint-lightbox-w.booking-form-in-lightbox.ttb-compacto .latepoint-lightbox-i {
  height: auto;
  max-height: 90vh;
  border-radius: 18px;
}
/* Más larga que la regla que fuerza el resumen visible —(0,5,0) y también con
   !important—, porque entre dos !important gana la de mayor especificidad. En
   compacto el resumen sobra: sólo se está eligiendo día y hora, y ocupaba la
   mitad del popup. */
.latepoint-lightbox-w.booking-form-in-lightbox.ttb-compacto .latepoint-w .latepoint-summary-w {
  display: none !important;
}
.booking-form-in-lightbox.ttb-compacto .latepoint-booking-form-element {
  height: auto;
}
.booking-form-in-lightbox.ttb-compacto .latepoint-step-content {
  padding: 20px clamp(20px, 3vw, 36px) 28px;
}
/* En compacto la barra de progreso sobra: no se está recorriendo un
   asistente, se está contestando una única pregunta. */
.booking-form-in-lightbox.ttb-compacto .ttp-lp-progreso {
  display: none;
}
.booking-form-in-lightbox.ttb-compacto .latepoint-heading-w {
  padding-top: 28px;
}

/* ------------------------------------------- el resumen, a la izquierda --
   LatePoint lo esconde con `!important` mientras su panel lateral esté a la
   vista; por eso los disparadores piden `hide_side_panel` (ver tt-planner.js).
   Aquí sólo se fuerza a que esté siempre presente —también antes de la primera
   selección, para que la columna no aparezca de golpe— y se le da la vuelta con
   `order`, que reordena a la vista sin tocar el DOM. */
.booking-form-in-lightbox .latepoint-w.latepoint-with-summary .latepoint-summary-w {
  display: flex !important;
  transform: none !important;
  order: -1;
  flex: 0 0 clamp(280px, 26vw, 420px);
  width: clamp(280px, 26vw, 420px);
  border-left: none;
  border-right: none;
}
/* Su panel lateral ya no pinta nada: el título del paso sale en la columna
   de contenido y la marca la lleva el resumen. */
.booking-form-in-lightbox .latepoint-booking-form-element .latepoint-side-panel {
  display: none !important;
}

/* Cerrar: una X limpia y con aire, no una pastilla encajonada en la esquina.

   La cadena es larga porque LatePoint fija este elemento con una regla de
   especificidad (0,5,0):

     .latepoint-w .latepoint-booking-form-element .latepoint-form-w
     .latepoint-heading-w .latepoint-lightbox-close { position: relative; ... }

   Con un selector más corto ganaba él, la X seguía en el flujo del título y
   aparecía a media altura, encima del contenido. Repitiendo su cadena y
   añadiendo la del lightbox se sube a (0,6,0).

   El ancla es `.latepoint-booking-form-element`, que va en `relative` y ocupa
   toda la carcasa: la X cae en su esquina superior derecha. */
.latepoint-lightbox-w.booking-form-in-lightbox .latepoint-w .latepoint-booking-form-element .latepoint-form-w .latepoint-heading-w .latepoint-lightbox-close {
  position: absolute;
  top: 12px;
  right: 14px;
  left: auto;
  order: 0;
  margin: 0;
  transform: none;
  z-index: 20;
  width: 44px;
  height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 999px;
  background: transparent;
  color: rgba(13, 18, 22, 0.55);
  font-size: 20px;
  transition: color 0.25s, background-color 0.25s;
}
.latepoint-lightbox-w.booking-form-in-lightbox .latepoint-w .latepoint-booking-form-element .latepoint-form-w .latepoint-heading-w .latepoint-lightbox-close:hover {
  color: var(--ttb-tinta);
  background: rgba(13, 18, 22, 0.06);
}

/* ============================================ panel izquierdo de marca == */
/* LatePoint lo usa para el título del paso y su explicación. Se conserva esa
   función —es información útil— y se le pone el vestido del clon: foto de
   Miami oscurecida, texto en blanco y el logotipo arriba. */

/* LA CADENA LARGA ES OBLIGATORIA AQUÍ.

   latepoint-theme.css ya pinta este panel en crudo claro con
   `.latepoint-w .latepoint-booking-form-element .latepoint-summary-w`, que vale
   (0,3,0). Una versión corta de la regla del modal empataba y, como aquella
   hoja se encola después, GANABA ella: el panel salía claro con el texto en
   blanco encima, o sea ilegible, y el logo blanco desaparecía.
   Con `.latepoint-lightbox-w.booking-form-in-lightbox` delante sube a (0,5,0). */
.latepoint-lightbox-w.booking-form-in-lightbox .latepoint-w .latepoint-summary-w {
  position: relative;
  padding: 104px clamp(24px, 2.4vw, 40px) 32px;
  /* La foto vuelve: es lo que le daba carácter a esta columna. El degradado
     va más cerrado que antes para que el texto del resumen se lea encima. */
  background-color: var(--ttb-tinta);
  background-image: linear-gradient(rgba(13, 18, 22, 0.78), rgba(13, 18, 22, 0.92)),
    url("/img/hero-miami-poster.jpg");
  background-size: cover;
  background-position: center;
  border-radius: 0;
  color: #fff;
  overflow-y: auto;
}

/* FUERA LOS PUNTOS.

   El patrón de puntitos detrás de "Summary" y "COST BREAKDOWN" es un fondo
   decorativo de LatePoint pensado para su panel blanco. Sobre la foto oscura
   se veía como suciedad. Se apaga cualquier fondo decorativo dentro de esta
   columna y se dejan los separadores como líneas limpias. */
.latepoint-lightbox-w.booking-form-in-lightbox .latepoint-summary-w .summary-header,
.latepoint-lightbox-w.booking-form-in-lightbox .latepoint-summary-w .summary-header-inner,
.latepoint-lightbox-w.booking-form-in-lightbox .latepoint-summary-w [class*="heading"],
.latepoint-lightbox-w.booking-form-in-lightbox .latepoint-summary-w .os-summary-contents,
.latepoint-lightbox-w.booking-form-in-lightbox .latepoint-summary-w .os-summary-contents-inner,
.latepoint-lightbox-w.booking-form-in-lightbox .latepoint-summary-w .cart-summary-main-section,
.latepoint-lightbox-w.booking-form-in-lightbox .latepoint-summary-w .summary-price-breakdown-wrapper {
  background-image: none !important;
  background-color: transparent !important;
}
.latepoint-lightbox-w.booking-form-in-lightbox .latepoint-summary-w ul,
.latepoint-lightbox-w.booking-form-in-lightbox .latepoint-summary-w ol,
.latepoint-lightbox-w.booking-form-in-lightbox .latepoint-summary-w li {
  list-style: none;
  margin: 0;
  padding-left: 0;
}
.latepoint-lightbox-w.booking-form-in-lightbox .latepoint-summary-w li::marker {
  content: none;
}
/* Los separadores punteados pasan a línea continua y tenue. */
.latepoint-lightbox-w.booking-form-in-lightbox .latepoint-summary-w * {
  border-style: solid;
  border-color: rgba(255, 255, 255, 0.14);
}

/* "Add More" y el desglose, legibles sobre el fondo oscuro. */
.latepoint-lightbox-w.booking-form-in-lightbox .latepoint-summary-w .latepoint-add-another-item-trigger {
  color: rgba(255, 255, 255, 0.8);
  border: 1px dashed rgba(255, 255, 255, 0.28);
  border-radius: 10px;
  padding: 12px 14px;
  justify-content: center;
}
.latepoint-lightbox-w.booking-form-in-lightbox .latepoint-summary-w .latepoint-add-another-item-trigger:hover {
  color: #fff;
  border-color: rgba(255, 255, 255, 0.5);
}
/* TODO el texto del panel, en blanco.

   Aquí dentro conviven rótulos de LatePoint (gris azulado #7c85a3) y otros que
   ya venían recoloreados por latepoint-theme.css para fondo claro (#2c333a).
   Sobre la foto oscura los dos son invisibles: "Cost Breakdown", "Service",
   "Total Price" y los importes no se leían. En lugar de perseguirlos uno a uno
   se hereda blanco en toda la columna y se matizan después los secundarios. */
.latepoint-lightbox-w.booking-form-in-lightbox .latepoint-w .latepoint-summary-w,
.latepoint-lightbox-w.booking-form-in-lightbox .latepoint-w .latepoint-summary-w * {
  color: #fff;
}
.latepoint-lightbox-w.booking-form-in-lightbox .latepoint-w .latepoint-summary-w .summary-label,
.latepoint-lightbox-w.booking-form-in-lightbox .latepoint-w .latepoint-summary-w .sbc-label,
.latepoint-lightbox-w.booking-form-in-lightbox .latepoint-w .latepoint-summary-w .os-summary-key,
.latepoint-lightbox-w.booking-form-in-lightbox .latepoint-w .latepoint-summary-w .price-breakdown-heading,
.latepoint-lightbox-w.booking-form-in-lightbox .latepoint-w .latepoint-summary-w .pbh-label {
  color: rgba(255, 255, 255, 0.55);
}

/* El rótulo "Summary" venía con FONDO blanco propio: era el rectángulo blanco
   suelto que aparecía bajo el logotipo. */
.latepoint-lightbox-w.booking-form-in-lightbox .latepoint-summary-w .summary-header-label {
  background: transparent;
  color: #fff;
  font-size: 22px;
  font-weight: 300;
  padding: 0;
}
/* Y la línea del desglose, que también llegaba en gris claro macizo. */
.latepoint-lightbox-w.booking-form-in-lightbox .latepoint-summary-w .pbh-line {
  background: rgba(255, 255, 255, 0.18);
}

/* El logotipo va en un pseudo-elemento y no como <img>: LatePoint reconstruye
   el contenido de esta columna en cada paso, así que un nodo inyectado
   desaparecería al avanzar. El ::before sobrevive porque es del CSS. */
.booking-form-in-lightbox .latepoint-w .latepoint-summary-w::before {
  content: "";
  position: absolute;
  top: 46px;
  left: clamp(24px, 3vw, 48px);
  width: 152px;
  height: 30px;
  background: url("/img/brand-logo.svg") left center / contain no-repeat;
}

.booking-form-in-lightbox .latepoint-summary-w .summary-header,
.booking-form-in-lightbox .latepoint-summary-w .summary-heading {
  color: #fff;
  font-size: 22px;
  font-weight: 300;
  text-align: left;
  border-bottom: none;
  padding: 0 0 18px;
}
.booking-form-in-lightbox .latepoint-summary-w .os-summary-contents,
.booking-form-in-lightbox .latepoint-summary-w .os-summary-contents-inner {
  background: transparent;
  padding: 0;
}
.booking-form-in-lightbox .latepoint-summary-w .summary-box,
.booking-form-in-lightbox .latepoint-summary-w .sbc-item {
  background: transparent;
  border: none;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 0;
  padding: 14px 0;
  color: rgba(255, 255, 255, 0.85);
}
.booking-form-in-lightbox .latepoint-summary-w .os-summary-key,
.booking-form-in-lightbox .latepoint-summary-w .summary-label,
.booking-form-in-lightbox .latepoint-summary-w .sbc-label {
  color: rgba(255, 255, 255, 0.55);
  font-size: 13px;
}
.booking-form-in-lightbox .latepoint-summary-w .os-summary-value,
.booking-form-in-lightbox .latepoint-summary-w .sbc-main-item,
.booking-form-in-lightbox .latepoint-summary-w .summary-value {
  color: #fff;
  font-weight: 500;
}
.booking-form-in-lightbox .latepoint-summary-w .price-breakdown-unfold,
.booking-form-in-lightbox .latepoint-summary-w .summary-total {
  color: #fff;
}
/* El disparador que en móvil abre el resumen no pinta nada aquí. */
.booking-form-in-lightbox .latepoint-summary-w .summary-close,
.booking-form-in-lightbox .latepoint-lightbox-summary-trigger {
  color: rgba(255, 255, 255, 0.7);
}

/* ============================================== columna de contenido === */

/* `position: static` a propósito.

   La X de cerrar vive DENTRO del bloque del título, y `position:absolute` se
   resuelve contra el antepasado posicionado más cercano. Con esta columna y el
   título en `relative`, la X se anclaba al título y aparecía a media altura,
   sobre el contenido. Dejándolos estáticos, sube hasta la esquina de la
   carcasa, que es donde tiene que estar. */
.booking-form-in-lightbox .latepoint-booking-form-element .latepoint-form-w {
  position: static;
  flex: 1;
  display: flex;
  flex-direction: column;
  min-width: 0;
  background: #fff;
}
.booking-form-in-lightbox .latepoint-booking-form-element .latepoint-form-w .latepoint-heading-w {
  position: static;
}

/* LA CADENA DE ALTURAS, COMPLETA.

   Entre la columna y el contenido hay dos envoltorios más de los que yo había
   tenido en cuenta:

     .latepoint-form-w > .latepoint-form > [.latepoint-heading-w,
                                            .latepoint-body, .latepoint-footer]
     .latepoint-body   > .latepoint-step-content

   Como `.latepoint-form` y `.latepoint-body` no estaban limitados, el contenido
   crecía a su antojo y empujaba el pie FUERA de la carcasa: acababa en y=907
   con el modal terminando en 878. De ahí que en los pasos siguientes no
   hubiera manera de ver Back ni Next, y que la lista de destinos se cortara por
   abajo.

   Con cada eslabón en `flex:1; min-height:0`, el desbordamiento se queda dentro
   del contenido y el pie no se mueve de su sitio. */
.booking-form-in-lightbox .latepoint-booking-form-element .latepoint-form-w .latepoint-form {
  display: flex;
  flex-direction: column;
  flex: 1;
  min-height: 0;
}
.booking-form-in-lightbox .latepoint-booking-form-element .latepoint-form-w .latepoint-body {
  display: flex;
  flex-direction: column;
  flex: 1;
  min-height: 0;
  overflow: hidden;
}

/* ------------------------------------------------- barra de progreso --- */
/* La inyecta tt-planner.js como primer hijo de .latepoint-form-w. */
.ttp-lp-progreso {
  padding: clamp(40px, 7vh, 72px) clamp(24px, 4vw, 60px) 0;
  flex-shrink: 0;
}
.ttp-lp-progreso__pista {
  position: relative;
  width: 100%;
  height: 8px;
  border-radius: 40px;
  background: #d9d9d9;
  margin-bottom: 34px;
}
.ttp-lp-progreso__fill {
  height: 100%;
  border-radius: 40px;
  background: var(--ttb-tinta);
  transition: width 0.5s ease-out;
}
.ttp-lp-progreso__badge {
  position: absolute;
  top: 16px;
  transform: translateX(-50%);
  background: var(--ttb-tinta);
  color: #fff;
  font-size: 12px;
  font-weight: 500;
  line-height: 1;
  padding: 8px 10px;
  border-radius: 6px;
  white-space: nowrap;
  transition: left 0.5s ease-out;
}
.ttp-lp-progreso__badge::before {
  content: "";
  position: absolute;
  top: -10px;
  left: 50%;
  transform: translateX(-50%);
  border: 5px solid transparent;
  border-bottom-color: var(--ttb-tinta);
}

/* --------------------------------------------- cabecera y contenido --- */
/* LatePoint repite el nombre del paso arriba; en el clon el título va
   centrado y grande sobre el contenido, así que su cabecera de barra sobra. */
/* El título del paso, centrado y con aire.

   LatePoint lo pone como una barra pegada arriba, justo donde está la X: los
   dos elementos se estorbaban. Aquí baja, se centra y se agranda, que es como
   aparece en el original. */
/* Cadena larga otra vez: latepoint-theme.css le pone a este bloque una línea
   inferior con (0,4,0). Empatábamos y ganaba él por orden, así que la raya
   seguía ahí. Con el lightbox delante sube a (0,6,0). */
.latepoint-lightbox-w.booking-form-in-lightbox .latepoint-w .latepoint-booking-form-element .latepoint-form-w .latepoint-heading-w {
  border-bottom: none;
  padding: clamp(20px, 4vh, 44px) clamp(24px, 4vw, 60px) 0;
  text-align: center;
  justify-content: center;
  flex-shrink: 0;
}
/* La tipografía del título es la del sitio, no la de LatePoint.
   Su fuente propia se llama literalmente "latepoint" y la declara sobre el
   encabezado, por eso no bastaba con ponerla en el contenedor. */
.latepoint-lightbox-w.booking-form-in-lightbox .latepoint-w .latepoint-booking-form-element .latepoint-heading-w .os-heading-text,
.latepoint-lightbox-w.booking-form-in-lightbox .latepoint-w .latepoint-booking-form-element .latepoint-heading-w h3,
.latepoint-lightbox-w.booking-form-in-lightbox .latepoint-w .latepoint-booking-form-element .os-section-heading,
.latepoint-lightbox-w.booking-form-in-lightbox .latepoint-w .latepoint-booking-form-element .latepoint-section-heading-w {
  font-family: var(--ttb-fuente) !important;
  font-size: clamp(22px, 2.2vw, 30px);
  font-weight: 500;
  line-height: 1.15;
  letter-spacing: -0.01em;
  color: var(--ttb-tinta);
  width: 100%;
  text-align: center;
}

/* Centrado con MÁRGENES AUTOMÁTICOS, no con justify-content.

   Con `justify-content: center`, cuando el contenido no cabe el navegador
   recorta por ARRIBA y por abajo y no deja llegar al principio ni al final: por
   eso los destinos se cortaban abajo. Los márgenes automáticos centran igual
   cuando sobra sitio, pero al desbordar se comportan como un inicio normal y
   todo queda alcanzable. */
.booking-form-in-lightbox .latepoint-booking-form-element .latepoint-step-content {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  /* `align-items: center` y no `margin: 0 auto` en los hijos.

     Esto es un contenedor flex en columna: los hijos son elementos flex y se
     estiran por defecto, así que un `margin: 0 auto` no los centraba y las
     listas quedaban pegadas a la izquierda (100px por un lado, 255 por el
     otro). El centrado en el eje transversal de un flex lo decide align-*. */
  align-items: center;
  padding: clamp(24px, 4vh, 44px) clamp(24px, 4vw, 60px) clamp(20px, 3vh, 32px);
}
/* Los hijos siguen pudiendo ocupar todo el ancho disponible hasta su máximo. */
.booking-form-in-lightbox .latepoint-booking-form-element .latepoint-step-content > * {
  width: 100%;
}
/* SIN centrado vertical.

   Lo tuve centrado con márgenes automáticos y el resultado era un hueco enorme
   en los pasos de contenido corto: en el calendario quedaban 109px muertos
   entre el título y el mes. Alineado arriba, cada paso empieza justo debajo de
   su título y el bloque se lee de corrido, como en el original. */
.booking-form-in-lightbox .latepoint-booking-form-element .latepoint-step-content > :first-child {
  margin-top: 0;
}

/* Las flechitas de desplazamiento que LatePoint superpone al contenido: con la
   cuadrícula ya cabe casi todo sin desplazar, y ahí sueltas quedaban raras. */
.booking-form-in-lightbox .latepoint-booking-form-element .os-scroll-indicator,
.booking-form-in-lightbox .latepoint-booking-form-element .step-content-scroll-arrow {
  display: none !important;
}

/* =================================================== tarjetas =========== */
/* Servicios, agentes, duraciones. En el clon son tarjetas anchas con foto,
   borde suave y esquinas de 20px, centradas en la columna. */

/* EN CUADRÍCULA, NO EN FILAS.

   LatePoint las sirve como filas (`os-as-rows`): una miniatura pequeña a la
   izquierda y el nombre al lado. Ocupa mucho alto, obliga a hacer scroll dentro
   del paso y las fotos de los destinos se pierden.

   Aquí pasan a ser cuadraditos con la foto arriba a todo lo ancho. Entra el
   triple de opciones sin scroll y los destinos se ven.

   La foto viene como `background-image` en un <span> (no es un <img>), así que
   se dimensiona el span y se deja que `cover` haga el resto. El original que
   sirve LatePoint es de 150px, de modo que no conviene pasar mucho de ahí. */
.booking-form-in-lightbox .latepoint-booking-form-element .os-items {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px;
  max-width: 820px;
  margin: 0 auto;
  width: 100%;
}
@media (max-width: 1100px) {
  .booking-form-in-lightbox .latepoint-booking-form-element .os-items {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

/* Todas las tarjetas, del mismo alto.

   Sin esto no se estiraban por igual y en una misma fila salían de 201px y de
   186px: la foto de Star Island parecía más grande que las demás. La tarjeta
   se convierte en columna flexible y el bloque del nombre se queda con el
   sobrante, así que la foto mide lo mismo en todas. */
/* `margin: 0` es la clave de que la primera tarjeta cuadre.

   LatePoint separa las filas con un margen superior en todas las tarjetas MENOS
   la primera (su disposición original era en filas). Al pasarlas a rejilla, ese
   margen de 15px seguía ahí: la primera quedaba 15px más arriba que sus dos
   compañeras de fila — el "Star Island descuadrado". La separación la da el
   `gap` de la rejilla, así que el margen sobra. */
.booking-form-in-lightbox .latepoint-booking-form-element .os-items .os-item,
.latepoint-lightbox-w.booking-form-in-lightbox .latepoint-w .latepoint-booking-form-element .os-items.os-as-rows > .os-item + .os-item {
  display: flex;
  height: 100%;
  margin: 0;
}
.booking-form-in-lightbox .latepoint-booking-form-element .os-items .os-item .os-item-i {
  display: flex;
  flex-direction: column;
  flex: 1;
  height: auto;
  padding: 0;
  overflow: hidden;
  border: 1px solid var(--ttb-borde);
  border-radius: 16px;
  transition: border-color 0.25s, box-shadow 0.25s, background-color 0.25s;
}
.booking-form-in-lightbox .latepoint-booking-form-element .os-items .os-item .os-item-i:hover {
  border-color: var(--ttb-tinta);
  box-shadow: 0 6px 20px rgba(13, 18, 22, 0.1);
}
.booking-form-in-lightbox .latepoint-booking-form-element .os-items .os-item.selected .os-item-i {
  border-color: var(--ttb-tinta);
  box-shadow: 0 0 0 1px var(--ttb-tinta);
}

/* `flex: 0 0 152px` y no sólo `height`.

   Al pasar la tarjeta a columna flexible, la foto se volvió un hijo flex y se
   encogió: la altura quedó en 45px en vez de en los 132 pedidos. Fijando la
   base flexible y prohibiendo el encogimiento, la foto manda sobre su franja y
   todas las tarjetas quedan iguales. */
.booking-form-in-lightbox .latepoint-booking-form-element .os-items .os-item .os-item-i .os-item-img-w {
  display: block;
  flex: 0 0 152px;
  width: 100%;
  height: 152px;
  min-height: 152px;
  min-width: 0;
  margin: 0;
  border-radius: 0;
  background-size: cover;
  background-position: center;
}
.booking-form-in-lightbox .latepoint-booking-form-element .os-items .os-item .os-item-i .os-item-name-w {
  display: block;
  flex: 1;
  padding: 14px 16px 16px;
  border-top: none;
  text-align: left;
}
.booking-form-in-lightbox .latepoint-booking-form-element .os-items .os-item .os-item-i .os-item-name {
  font-size: 16px;
  font-weight: 500;
  line-height: 1.3;
  color: var(--ttb-tinta);
}
.booking-form-in-lightbox .latepoint-booking-form-element .os-items .os-item .os-item-i .os-item-desc {
  font-size: 13px;
  line-height: 1.5;
  color: var(--ttb-apagado);
}
/* El precio, debajo del nombre y no en una columna aparte. */
.booking-form-in-lightbox .latepoint-booking-form-element .os-items .os-item .os-item-i .os-item-price-w {
  display: block;
  margin: 6px 0 0;
  padding: 0;
  border-left: none;
  text-align: left;
  font-weight: 600;
  color: var(--ttb-tinta);
}

/* ------------------------------- listas SIN foto (duraciones, extras) ---
   La cuadrícula con la foto arriba sirve para los destinos. Las duraciones no
   tienen imagen: ahí lo natural es una fila ancha con el nombre a la izquierda
   y el precio a la derecha, centrados entre sí.

   Se distinguen con `:has()`, o sea por lo que el elemento contiene, sin
   depender de una clase que LatePoint podría renombrar. Sin esto el precio se
   quedaba pegado arriba a la derecha mientras el nombre iba centrado. */
.booking-form-in-lightbox .latepoint-booking-form-element .os-items:not(:has(.os-item-img-w)) {
  grid-template-columns: minmax(0, 1fr);
  gap: 12px;
  max-width: 680px;
}
.booking-form-in-lightbox .latepoint-booking-form-element .os-items .os-item .os-item-i:not(:has(.os-item-img-w)) {
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 18px 22px;
  border-radius: 14px;
}
/* Se alinean TODOS los hijos, sea cual sea su clase.

   Las duraciones y los extras no comparten estructura interna: unos traen
   `.os-item-name-w` y otros no. Apuntando a las clases concretas, las
   duraciones se quedaban con el precio pegado arriba. Centrando cualquier hijo
   y dando el sobrante al primero, la fila cuadra en los dos casos. */
.booking-form-in-lightbox .latepoint-step-content .os-item .os-item-i:not(:has(.os-item-img-w)) > * {
  align-self: center;
  margin: 0;
  padding: 0;
}
.booking-form-in-lightbox .latepoint-step-content .os-item .os-item-i:not(:has(.os-item-img-w)) > :first-child {
  flex: 1;
  text-align: left;
}
.booking-form-in-lightbox .latepoint-step-content .os-item .os-item-i:not(:has(.os-item-img-w)) .os-item-price-w {
  flex: 0 0 auto;
  text-align: right;
  font-size: 17px;
  white-space: nowrap;
  border-left: none;
}

/* El bloque, centrado y con ancho de lectura.

   La restricción va sobre la FILA y no sobre su contenedor: las listas sin foto
   no siempre cuelgan de un `.os-items` (las duraciones usan otro envoltorio), y
   apuntando al contenedor se quedaban a todo lo ancho, descentradas. */
.booking-form-in-lightbox .latepoint-step-content .os-item:has(> .os-item-i:not(:has(.os-item-img-w))) {
  width: 100%;
  max-width: 680px;
  margin-left: auto;
  margin-right: auto;
}

/* El recuadro de selección múltiple (extras) es un `:before` que LatePoint
   coloca a la izquierda, y le reserva sitio con `padding-left: 50px`. Mi padding
   lo pisaba y el recuadro se montaba encima del texto. */
.booking-form-in-lightbox .latepoint-step-content .os-item.os-allow-multiselect .os-item-i:not(:has(.os-item-img-w)) {
  padding-left: 58px;
}

/* ------------- el resumen del carrito, en móvil, a pantalla completa -----

   EL PROBLEMA ERA NUESTRO, NO DE LATEPOINT.

   Al pulsar el carrito, LatePoint marca el formulario con
   `latepoint-summary-is-open` y saca el resumen como panel flotante. Su hoja
   tiene una regla para móvil que lo centra con `width: auto`… pero la nuestra
   —la que le da el ancho de la columna en escritorio— iba SIN consulta de
   medios y le imponía 300px también en el teléfono.

   Resultado medido a 375px: el panel salía en x=188 con 300 de ancho, o sea
   113px por fuera de la pantalla. Se veía el logotipo cortado y el texto a
   medias. Y lo peor: su botón de cerrar queda DENTRO del panel, a x=423 —
   fuera de la pantalla también, así que una vez abierto no había manera de
   cerrarlo.

   A pantalla completa se ve entero y el botón de cerrar vuelve a estar donde
   se puede pulsar. El corte en 600px es el mismo que usa LatePoint para su
   propia versión móvil de este panel, para no dejar un tramo de anchos con una
   regla a medio camino entre las dos. */
@media (max-width: 600px) {
  .latepoint-lightbox-w.booking-form-in-lightbox .latepoint-w.latepoint-with-summary.latepoint-summary-is-open .latepoint-summary-w {
    position: fixed;
    inset: 0;
    width: auto;
    max-width: none;
    flex: none;
    transform: none;
    z-index: 6;
    overflow-y: auto;
  }
}

/* El botón de cerrar del resumen: BLANCO SOBRE BLANCO.

   LatePoint le pone fondo blanco, y nuestra hoja pinta de blanco todo lo que
   cuelga de esta columna oscura — así que el icono desaparecía y quedaba un
   cuadrado blanco sin nada dentro. Se le quita el fondo, se le deja el icono
   en blanco (que es lo legible aquí) y se le da tamaño de dedo.

   SÓLO EN MÓVIL, y por una razón: ahí el resumen es una hoja que se abre y se
   cierra, así que el botón hace falta. En escritorio el resumen es una columna
   fija que no se cierra nunca, y dejarlo con estilo lo convertía en un círculo
   visible que no lleva a ninguna parte. */
@media (max-width: 600px) {
  /* LA CADENA LLEVA `a` AL FINAL A PROPÓSITO.

     Con cuatro clases, el `display: grid` no llegaba a aplicarse: la regla de
     LatePoint dejaba el ancla en `display: block` con 3px de relleno, así que
     la ✕ se apoyaba arriba y quedaba 7px por encima del centro del círculo —
     medido, no estimado. Añadiendo `.latepoint-w` y el tipo `a` sube lo justo
     para ganar. El `padding: 0` va porque ese relleno era parte del desvío. */
  .latepoint-lightbox-w.booking-form-in-lightbox .latepoint-w .latepoint-summary-w a.latepoint-lightbox-summary-trigger {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    padding: 0;
    background: rgba(255, 255, 255, 0.14);
    border-radius: 999px;
    transition: background-color 0.25s;
  }
  .latepoint-lightbox-w.booking-form-in-lightbox .latepoint-w .latepoint-summary-w a.latepoint-lightbox-summary-trigger:hover {
    background: rgba(255, 255, 255, 0.26);
  }
  /* `line-height: 1` para que la caja del glifo mida lo que mide el glifo: con
     una altura de línea mayor, el icono se descentra aunque la caja esté bien
     colocada. */
  .latepoint-lightbox-w.booking-form-in-lightbox .latepoint-w .latepoint-summary-w a.latepoint-lightbox-summary-trigger i {
    display: block;
    line-height: 1;
    color: #fff;
    font-size: 16px;
  }
}
/* En escritorio se retira: era un cuadrado blanco sin icono en mitad de la
   columna oscura, y no tenía nada que cerrar. */
@media (min-width: 601px) {
  .latepoint-lightbox-w.booking-form-in-lightbox .latepoint-w .latepoint-summary-w a.latepoint-lightbox-summary-trigger {
    display: none;
  }
}

/* --------- los complementos, en dos filas cuando la pantalla es estrecha --

   EN MÓVIL NO CABEN LOS TRES EN UNA LÍNEA. Medido a 375px: la tarjeta da 297,
   y nombre + precio + contador piden 231 más sangrías y huecos. El contador se
   salía 25px y, como la tarjeta recorta lo que sobra, el botón "+" quedaba
   cortado: no había forma de añadir horas extra desde el móvil.

   Apretar márgenes para que cupieran en una línea fue el primer intento y
   quedó peor: "Extra Hours" se partía en dos renglones con el precio encima.
   Así que se reparte en dos filas, con el orden puesto desde el CSS:

       [ ]  Extra Hours        [ − ] 0 [ + ]
            $250.00

   ESTO VIVE AQUÍ Y NO EN latepoint-theme.css A PROPÓSITO. Lo escribí primero
   allí con selectores de tres clases y no llegó a aplicarse: las reglas de
   este archivo apuntan a la misma tarjeta con cadenas mucho más largas y
   ganaban siempre. Al lado de ellas, y con su mismo peso, sí manda.

   El `:not(:has(.os-item-img-w))` se repite porque es lo que distingue estas
   filas —extras y duraciones, sin foto— de las tarjetas con imagen. */
@media (max-width: 767px) {
  .booking-form-in-lightbox .latepoint-step-content .os-item.os-allow-multiselect .os-item-i:not(:has(.os-item-img-w)) {
    position: relative;
    flex-wrap: wrap;
    align-items: center;
    padding-left: 46px;
    /* 101px = los 73 del contador + los 14 de su derecha + aire. Es el hueco
       que se le reserva ahora que va posicionado por encima de la fila. */
    padding-right: 101px;
    gap: 2px 10px;
  }
  /* EL CONTADOR SALE DEL FLUJO PARA PODER CENTRARLO.

     Mientras iba dentro de la fila sólo podía centrarse respecto al NOMBRE, no
     respecto a la tarjeta: el precio va en un segundo renglón y el contador se
     quedaba arriba, descolgado. Sacándolo con posición absoluta se centra sobre
     el alto completo, que es donde el ojo lo espera.

     La sangría derecha de la tarjeta le reserva el sitio (73px del contador más
     aire); sin ella, el nombre pasaría por debajo. */
  .booking-form-in-lightbox .latepoint-step-content .os-item.os-allow-multiselect .os-item-i:not(:has(.os-item-img-w)) .item-quantity-selector-w {
    position: absolute;
    right: 14px;
    top: 50%;
    transform: translateY(-50%);
  }
  /* Con el contador fuera del flujo, nombre y precio se quedan solos: cada uno
     a fila completa, uno debajo del otro. */
  .booking-form-in-lightbox .latepoint-step-content .os-item.os-allow-multiselect .os-item-i:not(:has(.os-item-img-w)) .os-item-name-w {
    order: 1;
    flex: 0 0 100%;
  }
  /* `flex-basis: 100%` es lo que lo baja de fila: al pedir el ancho entero no
     le queda sitio junto a los dos de arriba. Y a la izquierda, bajo el
     nombre: alineado a la derecha se quedaba suelto en mitad de la nada. */
  .booking-form-in-lightbox .latepoint-step-content .os-item.os-allow-multiselect .os-item-i:not(:has(.os-item-img-w)) .os-item-price-w {
    order: 3;
    flex: 0 0 100%;
    text-align: left;
    margin: 0;
  }

  /* LAS DOS FILAS, A RAS DEL MISMO MARGEN.

     El nombre salía 16px más adentro que el precio (x=102 contra x=86) por un
     `padding: 14px 16px 16px` que arrastra `.os-item-name-w` de la vista de
     escritorio. Ahí dentro no estorbaba; aquí, con el precio debajo, dejaba
     las dos líneas desalineadas y la tarjeta con aire de descuadre. */
  .booking-form-in-lightbox .latepoint-step-content .os-item.os-allow-multiselect .os-item-i:not(:has(.os-item-img-w)) .os-item-name-w {
    padding: 0;
  }

  /* Y CON JERARQUÍA: el nombre manda, el precio acompaña.

     Venían el nombre a 17px/600 y el precio a 20px/600 — dos cosas en negrita
     con el dato secundario MÁS GRANDE que el principal. Se igualan a 15px y el
     precio baja de peso y de tono: sigue leyéndose de un vistazo, pero ya no
     compite con el nombre del complemento. */
  .booking-form-in-lightbox .latepoint-step-content .os-item.os-allow-multiselect .os-item-i:not(:has(.os-item-img-w)) .os-item-name {
    font-size: 15px;
    line-height: 1.3;
  }
  .booking-form-in-lightbox .latepoint-step-content .os-item.os-allow-multiselect .os-item-i:not(:has(.os-item-img-w)) .os-item-price {
    font-size: 15px;
    font-weight: 500;
    opacity: 0.65;
  }

  /* La casilla se queda CENTRADA, como la trae LatePoint.

     Probé a subirla a la altura del nombre y se veía peor: con el contador ya
     centrado sobre el alto de la tarjeta, una casilla arriba y un contador en
     medio dejaban los dos extremos de la fila a distinta altura. Centradas las
     dos, la tarjeta se lee de un vistazo. No hay regla aquí a propósito: es la
     suya la que vale. */
}

/* ============================== número de invitados (deslizador) ========
   LatePoint trae un contador de − / +. tt-planner.js le añade delante un
   deslizador con la bolita del clon; el contador original sigue existiendo
   porque es quien guarda el valor y dispara los recálculos de precio. */
.ttp-guests {
  display: flex;
  align-items: flex-end;
  gap: 28px;
  width: 100%;
  max-width: 675px;
  margin: 0 auto;
  padding: 0 4px;
}
.ttp-guests__pista { flex: 1; position: relative; padding-bottom: 26px; }
.ttp-guests__rango {
  width: 100%;
  height: 8px;
  border-radius: 999px;
  appearance: none;
  -webkit-appearance: none;
  cursor: pointer;
  outline: none;
}
.ttp-guests__rango::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 24px;
  height: 24px;
  border-radius: 999px;
  background: var(--ttb-tostado);
  border: 3px solid #fff;
  box-shadow: 0 1px 6px rgba(13, 18, 22, 0.3);
  cursor: pointer;
}
.ttp-guests__rango::-moz-range-thumb {
  width: 24px;
  height: 24px;
  border-radius: 999px;
  background: var(--ttb-tostado);
  border: 3px solid #fff;
  box-shadow: 0 1px 6px rgba(13, 18, 22, 0.3);
  cursor: pointer;
}
.ttp-guests__flot {
  position: absolute;
  top: 22px;
  transform: translateX(-50%);
  font-size: 13px;
  font-weight: 600;
  color: var(--ttb-tinta);
  white-space: nowrap;
}
.ttp-guests__lado { display: flex; flex-direction: column; align-items: center; gap: 8px; }
.ttp-guests__k { font-size: 12px; font-weight: 500; color: var(--ttb-apagado); }
/* La caja de valor del clon: sólo muestra, no se pulsa. */
.ttp-guests__caja {
  min-width: 115px;
  padding: 12px 20px;
  border: 1px solid rgba(13, 18, 22, 0.3);
  border-radius: 14px;
  text-align: center;
  font-size: 15px;
  font-weight: 600;
  color: var(--ttb-tinta);
}

/* El contador de − / + de LatePoint queda fuera de la vista pero presente: es
   quien guarda el valor y a quien el deslizador pulsa. Se oculta así y no con
   `display:none` para no alterar nada que su código pueda medir. */
.booking-form-in-lightbox .ttp-oculto {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}
.booking-form-in-lightbox .select-total-attendees-label h4 {
  font-family: var(--ttb-fuente);
  font-size: 20px;
  font-weight: 500;
  color: var(--ttb-tinta);
}
.booking-form-in-lightbox .sta-sub-label { color: var(--ttb-apagado); font-size: 13px; }

/* =================================================== calendario ======== */
/* Mismo aire que el del clon: celdas de 40px, mes en una línea y el día
   elegido como pastilla negra. */

.booking-form-in-lightbox .latepoint-booking-form-element .os-monthly-calendar-w {
  max-width: 620px;
  margin: 0 auto;
  width: 100%;
}
.booking-form-in-lightbox .latepoint-booking-form-element .os-current-month-label-w {
  font-size: 18px;
  font-weight: 500;
  color: var(--ttb-tinta);
  white-space: nowrap;
}
.booking-form-in-lightbox .latepoint-booking-form-element .os-month-prev,
.booking-form-in-lightbox .latepoint-booking-form-element .os-month-next {
  border-radius: 8px;
  color: var(--ttb-tinta);
}
.booking-form-in-lightbox .latepoint-booking-form-element .os-monthly-calendar-days .os-day .os-day-box {
  height: 44px;
  border-radius: 10px;
}
.booking-form-in-lightbox .latepoint-booking-form-element .os-monthly-calendar-days .os-day .os-day-number {
  font-size: 14px;
}
.booking-form-in-lightbox .latepoint-booking-form-element .os-monthly-calendar-days .os-day.selected .os-day-box .os-day-number {
  background-color: var(--ttb-tinta);
  color: #fff;
}

/* EL PRECIO DE LAS DURACIONES.

   Este se resistía porque no es `.os-item-price-w` como en el resto de listas,
   sino `.os-duration-price`, y LatePoint lo saca del flujo:

     .latepoint-w .latepoint-booking-form-element .latepoint-step-content
     .os-service-durations .os-item .os-duration-price {
       position: absolute; top: 0; right: 0; font-family: monospace; }

   Estando en `absolute` con `top:0`, ninguna regla de alineación flex podía
   moverlo: por eso seguía pegado arriba mientras el nombre iba centrado. Se
   ancla al centro con `top:50%` y se le quita la monoespaciada. */
.latepoint-lightbox-w.booking-form-in-lightbox .latepoint-w .latepoint-booking-form-element .latepoint-step-content .os-service-durations .os-item .os-duration-price {
  top: 50%;
  right: 22px;
  transform: translateY(-50%);
  padding: 0;
  font-family: var(--ttb-fuente);
  font-size: 17px;
  color: var(--ttb-tinta);
}

/* EL MES, SIEMPRE A LA VISTA.

   El calendario se desplaza dentro del paso y el encabezado con el mes se iba
   hacia arriba: al elegir día uno ya no sabía de qué mes estaba eligiendo.
   Queda fijo arriba del área que se desplaza, con fondo para que los números
   pasen por debajo sin mezclarse. */
.booking-form-in-lightbox .latepoint-booking-form-element .os-current-month-label-w {
  position: sticky;
  top: 0;
  z-index: 6;
  background: #fff;
  padding-top: 6px;
  padding-bottom: 10px;
}
/* La fila de iniciales de los días, justo debajo y también fija. */
.booking-form-in-lightbox .latepoint-booking-form-element .os-monthly-calendar-week-days {
  position: sticky;
  top: 52px;
  z-index: 5;
  background: #fff;
}

/* La barra de disponibilidad, más corta y con las puntas redondeadas.

   Venía ocupando casi toda la celda (46px de 66), de modo que las de días
   consecutivos casi se tocaban y el mes parecía subrayado de lado a lado. */
.booking-form-in-lightbox .latepoint-booking-form-element .os-day-status {
  left: 30%;
  right: 30%;
  height: 4px;
  bottom: 6px;
  border-radius: 999px;
  overflow: hidden;
}
.booking-form-in-lightbox .latepoint-booking-form-element .os-day-status .day-available {
  border-radius: 999px;
}

/* Horas disponibles: pastillas, no botones de sistema. */
.booking-form-in-lightbox .latepoint-booking-form-element .os-time-slots .os-slot,
.booking-form-in-lightbox .latepoint-booking-form-element .time-slots-w .os-slot {
  border: 1px solid var(--ttb-borde);
  border-radius: 10px;
  font-size: 14px;
  transition: border-color 0.2s, background-color 0.2s, color 0.2s;
}
.booking-form-in-lightbox .latepoint-booking-form-element .os-slot:hover {
  border-color: var(--ttb-tinta);
}
.booking-form-in-lightbox .latepoint-booking-form-element .os-slot.selected {
  background-color: var(--ttb-tinta);
  border-color: var(--ttb-tinta);
  color: #fff;
}

/* ================================================ campos del formulario = */

.booking-form-in-lightbox .latepoint-booking-form-element .os-form-group .os-form-control,
.booking-form-in-lightbox .latepoint-booking-form-element .os-form-group input,
.booking-form-in-lightbox .latepoint-booking-form-element .os-form-group select,
.booking-form-in-lightbox .latepoint-booking-form-element .os-form-group textarea {
  padding: 14px 20px;
  border: 1px solid rgba(13, 18, 22, 0.25);
  border-radius: 14px;
  font-size: 15px;
  color: var(--ttb-tinta);
}
.booking-form-in-lightbox .latepoint-booking-form-element .os-form-group .os-form-control:focus,
.booking-form-in-lightbox .latepoint-booking-form-element .os-form-group input:focus,
.booking-form-in-lightbox .latepoint-booking-form-element .os-form-group textarea:focus {
  border-color: var(--ttb-tinta);
  box-shadow: 0 0 0 3px rgba(13, 18, 22, 0.08);
}
.booking-form-in-lightbox .latepoint-booking-form-element .os-form-group label {
  font-size: 12px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--ttb-apagado);
}

/* ============================================ resumen y checkout ======== */

.booking-form-in-lightbox .latepoint-booking-form-element .latepoint-summary-w {
  background-color: var(--ttb-papel);
  border-left: 1px solid var(--ttb-borde);
}
.booking-form-in-lightbox .latepoint-booking-form-element .os-summary-contents-inner .os-summary-key {
  color: var(--ttb-apagado);
  font-size: 13px;
}
.booking-form-in-lightbox .latepoint-booking-form-element .os-summary-contents-inner .os-summary-value {
  color: var(--ttb-tinta);
  font-weight: 500;
}
/* Importe total: es el dato que se busca con la mirada. */
.booking-form-in-lightbox .latepoint-booking-form-element .os-summary-total,
.booking-form-in-lightbox .latepoint-booking-form-element .summary-total-value {
  color: var(--ttb-tinta);
  font-weight: 700;
  font-size: 20px;
}
.booking-form-in-lightbox .latepoint-transaction-payment-form .os-items .os-item .os-item-i {
  border: 1px solid var(--ttb-borde);
  border-radius: 14px;
}

/* ======================================================== pie =========== */
/* Los botones del clon: "Previous" en blanco con borde, la acción principal
   en tostado y esquinas de 8px. */

/* EL PIE SIEMPRE VISIBLE.

   LatePoint le pone la clase `hidden-buttons` al formulario en los pasos que
   avanzan solos al elegir (como el de destinos) y esconde la botonera:

     .latepoint-booking-form-element.hidden-buttons .latepoint-form-w
     .latepoint-footer { display: none }

   El resultado era un modal sin Back ni Next por ninguna parte. En el clon la
   botonera está SIEMPRE, y además hace falta para poder volver atrás. Se
   iguala su cadena con el lightbox delante para ganar por especificidad. */
.latepoint-lightbox-w.booking-form-in-lightbox .latepoint-booking-form-element.hidden-buttons .latepoint-form-w .latepoint-footer,
.booking-form-in-lightbox .latepoint-booking-form-element .latepoint-form-w .latepoint-footer {
  display: flex;
  padding: 18px clamp(24px, 4vw, 60px);
  background-color: rgba(237, 238, 243, 0.8);
  border-top: 1px solid rgba(0, 0, 0, 0.05);
  gap: 10px;
  justify-content: flex-end;
  flex-shrink: 0;
}
/* Back y Next visibles aunque estén inactivos.

   No basta con enseñar el pie: LatePoint esconde además cada botón por su
   cuenta cuando lleva la clase `disabled`, con (0,6,0):

     .latepoint-w .latepoint-booking-form-element .latepoint-form-w
     .latepoint-footer .latepoint-next-btn.disabled { display: none }

   Por eso el pie salía vacío, de 37px y sin nada dentro. En el clon los dos
   botones están siempre, apagados hasta que el paso es válido, y eso es lo que
   se reproduce aquí. La cadena lleva el lightbox delante para llegar a (0,7,0). */
.latepoint-lightbox-w.booking-form-in-lightbox .latepoint-w .latepoint-booking-form-element .latepoint-form-w .latepoint-footer .latepoint-next-btn.disabled,
.latepoint-lightbox-w.booking-form-in-lightbox .latepoint-w .latepoint-booking-form-element .latepoint-form-w .latepoint-footer .latepoint-prev-btn.disabled {
  display: inline-flex;
  opacity: 0.45;
  pointer-events: none;
}

.booking-form-in-lightbox .latepoint-booking-form-element .latepoint-footer .latepoint-btn {
  display: inline-flex;
  align-items: center;
  padding: 12px 18px;
  border-radius: 8px;
  font-size: 14px;
  font-weight: 500;
}
.booking-form-in-lightbox .latepoint-booking-form-element .latepoint-footer .latepoint-btn-white,
.booking-form-in-lightbox .latepoint-booking-form-element .latepoint-footer .latepoint-prev-btn {
  background: #fff;
  border: 1px solid #e2e2e6;
  color: var(--ttb-tinta);
}
.booking-form-in-lightbox .latepoint-booking-form-element .latepoint-footer .latepoint-btn-primary:not(.disabled) {
  background-color: var(--ttb-tostado);
  color: #fff;
}
.booking-form-in-lightbox .latepoint-booking-form-element .latepoint-footer .latepoint-btn-primary:not(.disabled):hover {
  background-color: var(--ttb-tinta);
}

/* ====================================================== móvil =========== */
/* ====================================================== tablet y móvil ==

   Por debajo de 1024 la columna de marca se retira.

   Apilada ocupaba media pantalla —logo, "Summary", desglose— y el formulario
   quedaba reducido a una franja con su propio desplazamiento dentro: dos barras
   de scroll anidadas y el contenido cortado. El resumen sigue disponible por el
   disparador que LatePoint enseña en pantallas pequeñas, así que no se pierde
   información: sólo deja de robar sitio.                                     */
@media (max-width: 1023px) {
  .latepoint-lightbox-w.booking-form-in-lightbox {
    padding: 0;
    grid-template-columns: 1fr;
  }
  .latepoint-lightbox-w.booking-form-in-lightbox .latepoint-w .latepoint-summary-w {
    display: none !important;
  }
  .booking-form-in-lightbox .latepoint-booking-form-element {
    flex-direction: column;
  }
  /* `flex:1; min-height:0` también aquí.

     Al apilar en columna, esta columna dejaba de tener altura limitada y
     crecía con su contenido: el pie acababa en y=1206 con la carcasa
     terminando en 1100, o sea fuera de la pantalla y sin botones a la vista.
     Es el mismo fallo que en escritorio, sólo que en el otro eje. */
  .booking-form-in-lightbox .latepoint-booking-form-element .latepoint-form-w {
    width: 100%;
    flex: 1;
    min-height: 0;
  }
  /* La marca pasa arriba de la columna de contenido, en una franja fina. */
  .booking-form-in-lightbox .latepoint-booking-form-element .latepoint-form-w::before {
    content: "";
    display: block;
    height: 54px;
    flex-shrink: 0;
    background: var(--ttb-tinta) url("/img/brand-logo.svg") 20px center / 122px auto no-repeat;
  }
  .latepoint-lightbox-w.booking-form-in-lightbox .latepoint-w .latepoint-booking-form-element .latepoint-form-w .latepoint-heading-w .latepoint-lightbox-close {
    top: 8px;
    right: 8px;
    color: #fff;
  }
  .ttp-lp-progreso {
    padding: 20px 20px 0;
  }
  .booking-form-in-lightbox .latepoint-booking-form-element .os-items {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
  }
  .latepoint-lightbox-w.booking-form-in-lightbox .latepoint-w .latepoint-booking-form-element .latepoint-heading-w .os-heading-text {
    font-size: 22px;
  }
}

@media (max-width: 560px) {
  .booking-form-in-lightbox .latepoint-booking-form-element .os-items {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* El desglose de horas en el resumen: "(2h + 1h extra)" en tono menor, para
   que la cifra grande siga siendo el tiempo total a bordo. */
.ttp-dur-desglose {
  opacity: 0.6;
  font-size: 0.9em;
}

/* ============================= tapa mientras carga la reserva ========== */
/* z-index por DEBAJO del 999999 de la ventana de LatePoint: cuando la suya
   aparece, la nuestra queda detrás durante los milisegundos que tarda el JS en
   retirarla, en vez de taparla. */
.ttb-cargando {
  position: fixed;
  inset: 0;
  z-index: 999998;
  display: grid;
  place-items: center;
  background: rgba(13, 18, 22, 0.82);
  backdrop-filter: blur(3px);
  opacity: 0;
  transition: opacity 0.18s ease;
}
.ttb-cargando.is-visible {
  opacity: 1;
}
.ttb-cargando__c {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
  color: #fff;
}
.ttb-cargando__aro {
  width: 34px;
  height: 34px;
  border: 2px solid rgba(255, 255, 255, 0.25);
  border-top-color: #fff;
  border-radius: 999px;
  animation: ttb-girar 0.8s linear infinite;
}
.ttb-cargando__t {
  font-size: 14px;
  letter-spacing: 0.02em;
  opacity: 0.85;
}
@keyframes ttb-girar {
  to { transform: rotate(360deg); }
}
/* Sin animación, el aro se queda quieto: el texto ya dice lo que pasa. */
@media (prefers-reduced-motion: reduce) {
  .ttb-cargando__aro { animation: none; }
  .ttb-cargando { transition: none; }
}

/* ===================== vista previa de la experiencia (hover) ========== */
/* En el primer paso el resumen no tiene nada que resumir: sólo "Summary" y un
   total en cero. Ese hueco se aprovecha para enseñar el sitio al que se va.

   Se monta ENCIMA del resumen, no en su lugar: el contenido de LatePoint sigue
   debajo intacto y reaparece en cuanto se quita el ratón. Así no hay que tocar
   su marcado ni hay nada que restaurar. */
.ttb-vista {
  position: absolute;
  /* La columna entera, de borde a borde: la foto del sitio ES el fondo. El
     logotipo no se pierde porque va por encima (z-index más abajo). */
  inset: 0;
  z-index: 2;

  display: flex;
  flex-direction: column;
  justify-content: center;
  /* Centrado, pero un pelín por encima del centro: con el texto exactamente en
     mitad parece que se hunde. */
  padding-bottom: 8%;

  /* RECORTAR ES OBLIGATORIO.

     La capa de la foto va escalada un 10% y eso DESBORDA. Como la columna de
     LatePoint tiene `overflow-y: auto`, el desbordamiento le sacaba barras de
     desplazamiento —vertical y horizontal— sobre una vista que no tiene nada
     que desplazar. Recortando aquí dentro, la columna no se entera. */
  overflow: hidden;

  opacity: 0;
  visibility: hidden;
  transition: opacity 0.28s ease, visibility 0.28s;
  pointer-events: none; /* el ratón sigue siendo de las tarjetas de al lado */
}
.ttb-vista.is-visible {
  opacity: 1;
  visibility: visible;
}

/* La foto va en su propia capa porque lleva blur, y `filter` afecta también al
   texto si comparten elemento. Escalada un 10% para que el desenfoque no deje
   los bordes transparentes.

   OPACA, Y CON SU PROPIO COLOR DE FONDO.

   La primera versión iba al 65% y con 18px de desenfoque: entre eso y la foto
   de Miami que esta columna ya tiene de fondo, se mezclaban dos imágenes y
   salía una mancha verdosa en la que no se reconocía el sitio. Ahora tapa del
   todo y el desenfoque es suave: se ve dónde se va, que es de lo que se
   trata. */
.ttb-vista__foto {
  position: absolute;
  inset: 0;
  background: var(--ttb-tinta) center / cover no-repeat;
  filter: blur(6px) saturate(1.08);
  transform: scale(1.1);
}
/* Velo para que el texto blanco se lea. Va más cargado abajo, donde cae el
   texto, y se abre arriba para que la foto respire. */
.ttb-vista__foto::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(
    to top,
    rgba(13, 18, 22, 0.9) 0%,
    rgba(13, 18, 22, 0.62) 42%,
    rgba(13, 18, 22, 0.3) 100%
  );
}

.ttb-vista__c {
  position: relative; /* por encima de la capa de la foto */
  padding: 0 clamp(24px, 2.4vw, 40px);
  /* Entra con un empujoncito hacia arriba, que da sensación de aparecer y no
     de encenderse. */
  transform: translateY(10px);
  transition: transform 0.28s ease;
}
.ttb-vista.is-visible .ttb-vista__c {
  transform: none;
}

/* La cadena larga repite el peso de las reglas del panel: ahí dentro hay un
   `... .latepoint-summary-w *` que fija color y tamaño a todo lo que cuelgue,
   y sin igualar esa especificidad el título saldría del tamaño del resumen. */
.latepoint-lightbox-w.booking-form-in-lightbox .latepoint-summary-w .ttb-vista__t {
  margin: 0 0 10px;
  font-size: 26px;
  font-weight: 300;
  line-height: 1.15;
  color: #fff;
}
.latepoint-lightbox-w.booking-form-in-lightbox .latepoint-summary-w .ttb-vista__d {
  margin: 0;
  font-size: 14px;
  line-height: 1.55;
  color: rgba(255, 255, 255, 0.82);
  /* Las descripciones largas se cortan en vez de desbordar la columna. */
  display: -webkit-box;
  -webkit-line-clamp: 6;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.latepoint-lightbox-w.booking-form-in-lightbox .latepoint-summary-w .ttb-vista__l {
  list-style: none;
  margin: 16px 0 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.latepoint-lightbox-w.booking-form-in-lightbox .latepoint-summary-w .ttb-vista__l li {
  position: relative;
  padding-left: 16px;
  font-size: 12.5px;
  letter-spacing: 0.02em;
  color: rgba(255, 255, 255, 0.7);
}
.latepoint-lightbox-w.booking-form-in-lightbox .latepoint-summary-w .ttb-vista__l li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.62em;
  width: 6px;
  height: 1px;
  background: currentColor;
  opacity: 0.8;
}

/* Mientras se enseña el sitio, el resumen de LatePoint se apaga.

   No es un capricho: el velo de la foto es semitransparente a propósito —para
   que se vea el lugar— y por debajo asomaba "Summary … Total Price $0.00" en
   blanco, justo encima de la descripción, también en blanco. Se apaga en vez
   de ocultarse con display para que vuelva con el mismo fundido. */
.latepoint-lightbox-w.booking-form-in-lightbox .latepoint-summary-w .os-summary-contents {
  transition: opacity 0.28s ease;
}
.latepoint-lightbox-w.booking-form-in-lightbox .latepoint-summary-w.ttb-con-vista .os-summary-contents {
  opacity: 0;
}
/* Y de paso, ninguna barra de desplazamiento mientras se enseña el sitio: el
   resumen que podría pedirla está apagado, así que desplazarlo no llevaría a
   ninguna parte. */
.latepoint-lightbox-w.booking-form-in-lightbox .latepoint-w .latepoint-summary-w.ttb-con-vista {
  overflow: hidden;
}

/* El logotipo por encima de la vista previa. Sin esto la capa lo taparía:
   ambos son hijos posicionados de la misma columna. */
.booking-form-in-lightbox .latepoint-w .latepoint-summary-w::before {
  z-index: 3;
}

/* Quien prefiera no ver movimiento se queda con el fundido y nada más. */
@media (prefers-reduced-motion: reduce) {
  .ttb-vista__c {
    transform: none;
    transition: none;
  }
}

/* En pantallas estrechas el desplegable ocupa el ancho del campo, así que las
   dos columnas no caben: vuelve a apilarse. */
@media (max-width: 560px) {
  .ttb-cal {
    grid-template-columns: minmax(0, 1fr);
    right: auto;
    left: 0;
  }
  .ttb-cal__horas {
    grid-column: 1;
    grid-row: auto;
    margin-top: 12px;
  }
  .ttb-cal__horas:not(:empty) {
    padding-left: 0;
    padding-top: 12px;
    border-left: 0;
    border-top: 1px solid rgba(13, 18, 22, 0.08);
    max-height: none;
  }
}