/* ===========================================================================
   Hotel Demper: el proceso de reserva (reservar.html, resultados.html,
   reserva-confirmacion.html y pago.html). Se carga despues de styles.css (la
   base de la hosteria) y de marca.css (encabezado, botones, letra).

   Pedido de Juan (10/10): que las habitaciones disponibles y el proceso de
   reserva "no parezcan copiados y pegados de la hosteria", funcionando igual.
   Las pantallas usan clases PROPIAS (no las de la hosteria), asi esta hoja no
   pelea con las reglas viejas de styles.css. Lo que las distingue:

   - Un recorrido numerado arriba de todo (Fechas, Habitacion, Tus datos,
     Seña) en una banda oscura, con la busqueda en letra grande.
   - Cada opcion es una ficha: la foto con el nombre encima y una franja
     carbon con el precio y el boton.
   - El ticket de la estadia (carbon, con los cortes de un ticket): siempre a
     la vista en la computadora, con los extras para sumar y la cuenta.
   - "Tus datos" ocupa el lugar de la lista, con una barra de progreso.
   - "Ver mi reserva" con una linea de estado (solicitud, seña, llegada).

   Reglas que se respetan (marca.css y la hosteria):
   - Un solo color fuerte por pantalla: el magenta, para la accion principal.
   - Nada de transform/filter/backdrop-filter en los ancestros del calendario
     (#datePicker es position: fixed y quedaria atado a ese ancestro).
   - Nada de `display` en .primary-button / .secondary-button (los botones del
     formulario se esconden con `hidden`).
   =========================================================================== */

.flujo {
  /* El alto del encabezado: lo mide resultados.js (medirCabecera); en las
     otras paginas vale este. */
  --alto-cabecera: 77px;
  --fondo-flujo: var(--arena-clara);
  --ancho-flujo: 1240px;
  --costado-flujo: max(clamp(16px, 4vw, 48px), calc((100% - var(--ancho-flujo)) / 2));
  --rosa-claro: #f7a8d2;
  --radio-ficha: 22px;
  min-height: 100vh;
  background: var(--fondo-flujo);
}

/* La base pone 74px de aire a TODA <section> (pensado para la portada). */
:where(.flujo) section {
  padding: 0;
  background: none;
}

.flujo h1,
.flujo h2,
.flujo h3 {
  max-width: none;
  color: inherit;
  text-wrap: balance;
}

.visualmente-oculto {
  position: absolute !important;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

.icono {
  width: 20px;
  height: 20px;
  flex: 0 0 auto;
}

/* El foco del teclado: el de la base (magenta al 22%) no se ve sobre el
   carbon de la banda y del ticket. */
.flujo-banda :focus-visible,
.reserva-banda :focus-visible,
.ticket :focus-visible,
.opcion-pie :focus-visible,
.fechas-foto :focus-visible {
  outline: 2px solid var(--rosa-claro);
  outline-offset: 3px;
}

.flujo :focus-visible {
  outline-offset: 3px;
}

/* ------------------------------------------------------- el encabezado */
/* Opaco: con el 94% de marca.css y sin el desenfoque, el texto que pasaba por
   detras al bajar se leia a traves del encabezado. */
.flujo .flujo-cabecera {
  top: 0;
  background: var(--carbon);
  backdrop-filter: none;
}

.flujo-nav {
  gap: 8px;
}

.flujo-nav .ghost-button {
  white-space: nowrap;
}

/* ----------------------------------------------- la banda y el recorrido */
.flujo-banda {
  position: relative;
  padding: clamp(18px, 2.6vw, 26px) var(--costado-flujo) clamp(22px, 3vw, 32px);
  color: #ffffff;
  background:
    radial-gradient(90% 160% at 100% 0%, rgb(var(--rgb-acento) / 0.2), transparent 60%),
    linear-gradient(180deg, var(--carbon) 0%, #232027 100%);
}

/* La linea del logo (gris -> magenta), al pie de la banda. */
.flujo-banda::after {
  content: "";
  position: absolute;
  right: 0;
  bottom: 0;
  left: 0;
  height: 3px;
  background: linear-gradient(90deg, var(--grafito), var(--magenta));
}

.recorrido {
  display: flex;
  align-items: center;
  margin: 0;
  padding: 0;
  list-style: none;
}

.recorrido li {
  display: flex;
  flex: 1 1 auto;
  align-items: center;
  gap: 10px;
  min-width: 0;
  color: rgb(255 255 255 / 0.5);
  font-size: 0.86rem;
  font-weight: 600;
}

.recorrido li:last-child {
  flex: 0 0 auto;
}

/* El tramo hasta el paso siguiente. */
.recorrido li:not(:last-child)::after {
  content: "";
  flex: 1 1 auto;
  min-width: 18px;
  height: 2px;
  margin: 0 6px 0 4px;
  background: rgb(255 255 255 / 0.14);
  border-radius: 2px;
}

.recorrido li.is-hecho::after {
  background: linear-gradient(90deg, rgb(var(--rgb-acento) / 0.55), var(--magenta));
}

.recorrido-numero {
  display: inline-grid;
  place-items: center;
  flex: 0 0 auto;
  width: 30px;
  height: 30px;
  color: rgb(255 255 255 / 0.62);
  border: 1.5px solid rgb(255 255 255 / 0.28);
  border-radius: 50%;
  font-family: var(--fuente-titulos);
  font-size: 0.92rem;
  font-weight: 600;
  line-height: 1;
}

.recorrido-nombre {
  white-space: nowrap;
}

.recorrido li.is-actual {
  color: #ffffff;
}

.recorrido li.is-actual .recorrido-numero {
  color: #ffffff;
  background: var(--magenta);
  border-color: var(--magenta);
  box-shadow: 0 0 0 5px rgb(var(--rgb-acento) / 0.22);
}

.recorrido li.is-hecho {
  color: rgb(255 255 255 / 0.82);
}

/* Hecho: el numero se cambia por un tilde. */
.recorrido li.is-hecho .recorrido-numero {
  color: transparent;
  background: rgb(var(--rgb-acento) / 0.18) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23f7a8d2' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m5 12.5 4.5 4.5L19 7.5'/%3E%3C/svg%3E") center / 15px no-repeat;
  border-color: rgb(var(--rgb-acento) / 0.6);
}

/* Sobre fondo claro (la pantalla de elegir fechas). */
.recorrido.is-claro li {
  color: var(--gris);
}

.recorrido.is-claro li:not(:last-child)::after {
  background: var(--linea-fuerte);
}

.recorrido.is-claro .recorrido-numero {
  color: var(--gris);
  border-color: var(--linea-fuerte);
}

.recorrido.is-claro li.is-actual {
  color: var(--tinta);
}

.recorrido.is-claro li.is-actual .recorrido-numero {
  color: #ffffff;
  box-shadow: 0 0 0 5px rgb(var(--rgb-acento) / 0.14);
}

/* ------------------------------------------------- la busqueda (banda) */
.busqueda {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr) auto minmax(0, 0.95fr) auto;
  align-items: end;
  gap: 12px clamp(14px, 2vw, 26px);
  margin-top: clamp(18px, 2.4vw, 26px);
}

.busqueda-campo {
  display: grid;
  gap: 6px;
  min-width: 0;
}

.busqueda-rotulo {
  color: rgb(255 255 255 / 0.58);
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

.busqueda-fecha {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  width: 100%;
  min-height: 52px;
  padding: 4px 2px 8px;
  color: #ffffff;
  background: none;
  border: 0;
  border-bottom: 2px solid rgb(255 255 255 / 0.22);
  border-radius: 0;
  font-family: var(--fuente-titulos);
  font-size: clamp(1.3rem, 2.1vw, 1.75rem);
  font-weight: 500;
  letter-spacing: 0.03em;
  line-height: 1.1;
  text-align: left;
  text-transform: uppercase;
  white-space: nowrap;
  cursor: pointer;
  transition: border-color 160ms ease;
}

.busqueda-fecha span {
  overflow: hidden;
  text-overflow: ellipsis;
}

.busqueda-fecha .icono {
  width: 18px;
  height: 18px;
  color: rgb(255 255 255 / 0.55);
}

.busqueda-fecha:hover,
.busqueda-fecha:focus-visible {
  border-bottom-color: var(--magenta);
}

.busqueda-flecha {
  display: grid;
  place-items: center;
  padding-bottom: 14px;
  color: rgb(255 255 255 / 0.45);
}

.busqueda-flecha .icono {
  width: 22px;
  height: 22px;
}

.busqueda-noches {
  align-self: end;
  margin-bottom: 12px;
  padding: 6px 12px;
  color: var(--rosa-claro);
  background: rgb(var(--rgb-acento) / 0.16);
  border: 1px solid rgb(var(--rgb-acento) / 0.32);
  border-radius: 999px;
  font-family: var(--fuente-titulos);
  font-size: 0.95rem;
  letter-spacing: 0.06em;
  line-height: 1.1;
  text-transform: uppercase;
  white-space: nowrap;
}

.busqueda-noches:empty {
  display: none;
}

.contador {
  display: grid;
  grid-template-columns: 46px minmax(0, 1fr) 46px;
  align-items: center;
  min-height: 52px;
  overflow: hidden;
  color: #ffffff;
  background: rgb(255 255 255 / 0.07);
  border: 1px solid rgb(255 255 255 / 0.2);
  border-radius: 999px;
}

.contador button {
  height: 100%;
  min-height: 50px;
  padding: 0;
  color: #ffffff;
  background: transparent;
  border: 0;
  font-size: 1.3rem;
  font-weight: 600;
  line-height: 1;
  transition: background-color 160ms ease;
}

.contador button:hover {
  background: rgb(255 255 255 / 0.12);
}

.contador strong {
  overflow: hidden;
  font-family: var(--fuente-titulos);
  font-size: 1.12rem;
  font-weight: 500;
  letter-spacing: 0.03em;
  text-align: center;
  text-overflow: ellipsis;
  text-transform: uppercase;
  white-space: nowrap;
}

.busqueda-boton {
  min-height: 52px;
  padding: 0 22px;
  color: #ffffff;
  background: transparent;
  border: 1px solid rgb(255 255 255 / 0.34);
  border-radius: 999px;
  font-weight: 700;
  white-space: nowrap;
  transition: background-color 160ms ease, border-color 160ms ease;
}

.busqueda-boton:hover {
  background: rgb(255 255 255 / 0.1);
  border-color: rgb(255 255 255 / 0.6);
}

/* El calendario que se abre desde la banda: el mismo de la portada, en
   blanco sobre la pagina. */
.flujo .date-picker {
  top: clamp(96px, 15vh, 170px);
  width: min(760px, calc(100vw - 28px));
  padding: 18px 20px 20px;
  color: var(--tinta);
  background: #ffffff;
  border: 0;
  border-radius: 22px;
  box-shadow: 0 30px 80px rgb(var(--rgb-sombra) / 0.34);
}

.flujo .calendar-toolbar span {
  color: var(--gris);
  font-weight: 600;
}

.flujo .calendar-head strong {
  font-family: var(--fuente-titulos);
  font-size: 1.2rem;
  font-weight: 600;
  letter-spacing: 0.02em;
}

.flujo .calendar-nav {
  border-radius: 999px;
}

/* =============================================== resultados: la estadia */
.estadia {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(320px, 370px);
  align-items: start;
  gap: clamp(22px, 3vw, 40px);
  padding: clamp(26px, 3.6vw, 44px) var(--costado-flujo) clamp(56px, 7vw, 88px);
}

.opciones,
.datos {
  grid-column: 1;
  grid-row: 1;
  min-width: 0;
}

.ticket-columna {
  position: sticky;
  top: calc(var(--alto-cabecera, 72px) + 18px);
  grid-column: 2;
  grid-row: 1;
  min-width: 0;
}

/* "Tus datos" ocupa el lugar de la lista. */
.paso-datos .opciones {
  display: none;
}

/* ------------------------------------------------------- las opciones */
.opciones-cabeza {
  margin-bottom: 18px;
}

.opciones-cabeza .eyebrow,
.datos-cabeza .eyebrow,
.fechas-cabeza .eyebrow,
.reserva-banda .eyebrow,
.pago-cabeza .eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin: 0;
}

.opciones-cabeza .eyebrow::before,
.datos-cabeza .eyebrow::before,
.fechas-cabeza .eyebrow::before,
.reserva-banda .eyebrow::before,
.pago-cabeza .eyebrow::before {
  content: "";
  width: 26px;
  height: 2px;
  background: linear-gradient(90deg, var(--grafito), var(--magenta));
}

.opciones-cabeza h1 {
  margin: 10px 0 8px;
  font-size: clamp(2.1rem, 3.6vw, 3rem);
  line-height: 1;
}

.opciones-bajada {
  margin: 0;
  color: var(--gris);
  font-size: 1.02rem;
}

.garantias {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 18px;
  margin: 14px 0 0;
  padding: 0;
  list-style: none;
}

.garantias li {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  color: var(--tinta);
  font-size: 0.86rem;
  font-weight: 600;
}

.garantias li::before {
  content: "";
  width: 16px;
  height: 16px;
  flex: 0 0 auto;
  background: var(--magenta);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m5 12.5 4.5 4.5L19 7.5'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m5 12.5 4.5 4.5L19 7.5'/%3E%3C/svg%3E") center / contain no-repeat;
}

/* Lo que incluyen todas las habitaciones, una sola vez. */
.incluye-todas {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px 18px;
  margin: 0 0 24px;
  padding: 14px 18px;
  background: #ffffff;
  border: 1px solid var(--linea);
  border-radius: 16px;
}

.incluye-todas:empty {
  display: none;
}

.incluye-todas-titulo {
  margin: 0;
  color: var(--berry);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.incluye-todas ul {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 18px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.incluye-todas li {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  color: var(--tinta);
  font-size: 0.88rem;
  font-weight: 600;
}

.incluye-todas .icono {
  width: 19px;
  height: 19px;
  color: var(--berry);
}

.opciones-lista {
  display: grid;
  gap: 22px;
  transition: opacity 180ms ease;
}

.opciones-lista.is-actualizando {
  opacity: 0.5;
  pointer-events: none;
}

/* Mientras contesta el PMS por primera vez. */
.opciones-cargando {
  display: grid;
  gap: 22px;
}

.opcion-esqueleto {
  height: 300px;
  background:
    linear-gradient(100deg, transparent 30%, rgb(255 255 255 / 0.7) 50%, transparent 70%) -150% 0 / 60% 100% no-repeat,
    linear-gradient(90deg, var(--arena) 0 45%, #ffffff 45%);
  border: 1px solid var(--linea);
  border-radius: var(--radio-ficha);
  animation: esqueleto 1.4s ease-in-out infinite;
}

@keyframes esqueleto {
  to {
    background-position: 250% 0, 0 0;
  }
}

/* La ficha de una opcion. */
.opcion {
  display: grid;
  grid-template-columns: minmax(0, 0.92fr) minmax(0, 1.08fr);
  grid-template-areas:
    "media cuerpo"
    "pie pie";
  overflow: hidden;
  background: #ffffff;
  border: 1px solid var(--linea);
  border-radius: var(--radio-ficha);
  box-shadow: 0 18px 44px rgb(var(--rgb-sombra) / 0.07);
  transition: border-color 180ms ease, box-shadow 180ms ease;
}

.opcion.is-elegida {
  border-color: var(--magenta);
  box-shadow: 0 0 0 1px var(--magenta), 0 18px 44px rgb(var(--rgb-acento) / 0.14);
}

.opcion-media {
  position: relative;
  grid-area: media;
  min-height: 300px;
  overflow: hidden;
  background: var(--carbon-2);
}

.opcion-fotos {
  position: absolute;
  inset: 0;
  display: grid;
  gap: 3px;
}

.opcion-fotos-2 {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.opcion-fotos-3 {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.opcion-fotos picture,
.opcion-fotos img {
  display: block;
  width: 100%;
  height: 100%;
  min-height: 0;
}

.opcion-fotos img {
  object-fit: cover;
  transition: transform 600ms ease;
}

.opcion:hover .opcion-fotos img {
  transform: scale(1.03);
}

/* Sin foto todavia: la capacidad, en oscuro, ARRIBA A LA DERECHA (el sello va
   arriba a la izquierda y el nombre abajo). Hasta el 15/10 iba en el medio de
   los dos, y un nombre de dos renglones o mas ("Doble + Familiar para 5
   personas", hasta cuatro en una ficha angosta) le pasaba por encima; en el
   telefono ya pasaba con "2 Dobles + Cuadruple". Arranca debajo del sello:
   en una ficha angosta (1024) el sello llega hasta la derecha. */
.opcion-fotos .habitacion-sin-foto {
  place-content: start end;
  justify-items: end;
  padding: 56px 20px 16px;
  color: #ffffff;
  background:
    radial-gradient(circle at 70% 20%, rgb(var(--rgb-acento) / 0.22), transparent 55%),
    linear-gradient(160deg, #34303a 0%, var(--carbon) 100%);
}

.opcion-fotos .habitacion-sin-foto strong {
  color: #ffffff;
  font-size: clamp(2.6rem, 4vw, 3.4rem);
}

.opcion-fotos .habitacion-sin-foto span {
  color: rgb(255 255 255 / 0.6);
}

.opcion-fotos-2 .habitacion-sin-foto strong,
.opcion-fotos-3 .habitacion-sin-foto strong {
  font-size: clamp(2rem, 3vw, 2.6rem);
}

/* El velo de abajo, para que el nombre se lea sobre cualquier foto. */
.opcion-media::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgb(var(--rgb-velo) / 0) 42%, rgb(var(--rgb-velo) / 0.78) 100%);
  pointer-events: none;
}

.opcion-sello {
  position: absolute;
  top: 16px;
  left: 16px;
  z-index: 1;
  padding: 6px 12px;
  color: #ffffff;
  background: var(--magenta);
  border-radius: 999px;
  box-shadow: 0 8px 18px rgb(var(--rgb-acento) / 0.35);
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.opcion-titulo {
  position: absolute;
  right: 22px;
  bottom: 18px;
  left: 22px;
  z-index: 1;
  color: #ffffff;
}

.opcion-titulo h3 {
  margin: 0;
  font-size: clamp(2rem, 3.3vw, 2.7rem);
  font-weight: 600;
  line-height: 0.96;
  letter-spacing: 0.01em;
  text-transform: uppercase;
  text-shadow: 0 2px 14px rgb(0 0 0 / 0.3);
}

/* Un nombre largo ("Doble + Familiar para 5 personas", mas de 22 letras): a
   tamaño normal ocupaba cuatro renglones en una ficha angosta y tapaba la
   foto. Los de siempre ("2 Dobles + Cuadruple", 20) no cambian. */
.opcion-titulo h3.es-largo {
  font-size: clamp(1.6rem, 2.5vw, 2.1rem);
}

.opcion-titulo p {
  margin: 6px 0 0;
  color: rgb(255 255 255 / 0.86);
  font-size: 0.9rem;
  font-weight: 600;
}

.opcion-cuerpo {
  display: grid;
  grid-area: cuerpo;
  align-content: start;
  gap: 16px;
  padding: clamp(20px, 2.4vw, 28px);
}

.opcion-datos {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 18px;
  margin: 0;
  padding: 0 0 16px;
  list-style: none;
  border-bottom: 1px solid var(--linea);
}

.opcion-datos li {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  color: var(--tinta);
  font-size: 0.92rem;
  font-weight: 600;
}

.opcion-datos .icono {
  color: var(--berry);
}

.opcion-camas {
  display: grid;
  gap: 8px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.opcion-camas li {
  display: grid;
  gap: 1px;
}

.opcion-camas b {
  font-family: var(--fuente-titulos);
  font-size: 1.12rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  text-transform: uppercase;
}

.opcion-camas span {
  color: var(--gris);
  font-size: 0.92rem;
}

.opcion-cama {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0;
  color: var(--tinta);
  font-size: 0.95rem;
  font-weight: 600;
}

.opcion-cama .icono {
  color: var(--berry);
}

.opcion-nota {
  margin: 0;
  color: var(--gris);
  font-size: 0.95rem;
  line-height: 1.55;
}

/* La franja de abajo: el precio y el boton. */
.opcion-pie {
  display: flex;
  flex-wrap: wrap;
  grid-area: pie;
  align-items: center;
  justify-content: space-between;
  gap: 14px 24px;
  padding: 18px clamp(20px, 2.4vw, 28px);
  color: #ffffff;
  background: var(--carbon);
}

.opcion-precio {
  display: grid;
  gap: 3px;
  min-width: 0;
}

.opcion-precio-rotulo {
  color: rgb(255 255 255 / 0.6);
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.opcion-precio-total {
  font-family: var(--fuente-titulos);
  font-size: clamp(1.9rem, 3vw, 2.35rem);
  font-weight: 600;
  line-height: 1;
  letter-spacing: 0.01em;
}

.opcion-precio-detalle {
  color: rgb(255 255 255 / 0.72);
  font-size: 0.86rem;
}

.opcion-precio-promo {
  color: var(--rosa-claro);
  font-size: 0.84rem;
  font-weight: 700;
}

.opcion-accion {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-end;
  gap: 10px 14px;
}

.opcion-accion .primary-button {
  min-width: 168px;
  min-height: 52px;
  padding: 0 26px;
  box-shadow: 0 12px 26px rgb(var(--rgb-acento) / 0.35);
}

.opcion-elegida {
  display: none;
  align-items: center;
  gap: 6px;
  color: var(--rosa-claro);
  font-size: 0.86rem;
  font-weight: 700;
}

.opcion-elegida .icono {
  width: 18px;
  height: 18px;
}

.opcion.is-elegida .opcion-elegida {
  display: inline-flex;
}

/* Ya elegida: "Agregar otra" pasa a segundo plano. */
.opcion.is-elegida .opcion-accion .primary-button {
  color: #ffffff;
  background: transparent;
  border-color: rgb(255 255 255 / 0.4);
  box-shadow: none;
}

.opcion.is-elegida .opcion-accion .primary-button:hover {
  background: rgb(255 255 255 / 0.1);
  border-color: #ffffff;
}

/* Los avisos de la lista (sin precios, fuera de temporada, sin lugar). */
.aviso {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: start;
  gap: 18px;
  padding: clamp(22px, 3vw, 32px);
  background: #ffffff;
  border: 1px solid var(--linea);
  border-left: 4px solid var(--magenta);
  border-radius: 18px;
}

.aviso-icono {
  display: grid;
  place-items: center;
  width: 48px;
  height: 48px;
  color: var(--berry);
  background: var(--magenta-suave);
  border-radius: 14px;
}

.aviso-icono .icono {
  width: 24px;
  height: 24px;
}

.aviso h3 {
  margin: 4px 0 8px;
  font-size: clamp(1.35rem, 2.2vw, 1.7rem);
  line-height: 1.1;
}

.aviso p {
  margin: 0;
  color: var(--gris);
  line-height: 1.6;
}

.aviso-acciones {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 18px;
}

.aviso-acciones .primary-button,
.aviso-acciones .secondary-button {
  min-height: 48px;
  padding: 0 22px;
  text-decoration: none;
}

.aviso-acciones a.secondary-button {
  display: inline-flex;
  align-items: center;
}

/* ------------------------------------------------------------- el ticket */
.ticket {
  position: relative;
  max-height: calc(100vh - var(--alto-cabecera, 72px) - 36px);
  overflow-y: auto;
  overscroll-behavior: contain;
  color: #ffffff;
  background: var(--carbon);
  border-radius: var(--radio-ficha);
  box-shadow: 0 26px 60px rgb(var(--rgb-sombra) / 0.24);
  scrollbar-color: rgb(255 255 255 / 0.25) transparent;
  scrollbar-width: thin;
}

/* La linea del logo arriba del ticket. */
.ticket::before {
  content: "";
  display: block;
  height: 4px;
  background: linear-gradient(90deg, var(--grafito), var(--magenta));
}

.ticket.is-recien {
  animation: ticket-recien 900ms ease;
}

@keyframes ticket-recien {
  0% {
    box-shadow: 0 0 0 0 rgb(var(--rgb-acento) / 0.6), 0 26px 60px rgb(var(--rgb-sombra) / 0.24);
  }
  100% {
    box-shadow: 0 0 0 16px rgb(var(--rgb-acento) / 0), 0 26px 60px rgb(var(--rgb-sombra) / 0.24);
  }
}

.ticket-cabeza {
  padding: 20px 24px 16px;
}

.ticket-rotulo {
  margin: 0 0 10px;
  color: var(--rosa-claro);
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

.ticket-fechas {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px 12px;
  margin: 0;
  font-family: var(--fuente-titulos);
  font-size: 1.9rem;
  font-weight: 500;
  letter-spacing: 0.02em;
  line-height: 1;
  text-transform: uppercase;
}

.ticket-fechas i {
  color: var(--magenta);
  font-style: normal;
}

.ticket-meta {
  margin: 8px 0 0;
  color: rgb(255 255 255 / 0.68);
  font-size: 0.9rem;
}

/* El corte de un ticket: linea punteada y dos muescas del color de la
   pagina a los costados. */
.ticket-corte {
  position: relative;
  height: 22px;
  background: linear-gradient(90deg, rgb(255 255 255 / 0.2) 50%, transparent 0) center / 12px 1px repeat-x;
}

.ticket-corte::before,
.ticket-corte::after {
  content: "";
  position: absolute;
  top: 50%;
  width: 22px;
  height: 22px;
  margin-top: -11px;
  background: var(--fondo-flujo);
  border-radius: 50%;
}

.ticket-corte::before {
  left: -11px;
}

.ticket-corte::after {
  right: -11px;
}

.ticket-seccion {
  padding: 8px 24px 18px;
}

.ticket-subtitulo {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
  margin: 0 0 12px;
  color: rgb(255 255 255 / 0.55);
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

.ticket-subtitulo span {
  color: rgb(255 255 255 / 0.45);
  font-size: 0.68rem;
  letter-spacing: 0.08em;
}

.ticket-vacio {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 0;
  padding: 14px 16px;
  color: rgb(255 255 255 / 0.74);
  border: 1px dashed rgb(255 255 255 / 0.24);
  border-radius: 14px;
  font-size: 0.9rem;
  line-height: 1.45;
}

.ticket-vacio .icono {
  width: 26px;
  height: 26px;
  color: var(--rosa-claro);
}

.ticket-habitaciones {
  display: grid;
  margin: 0;
  padding: 0;
  list-style: none;
}

.ticket-habitaciones li {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto auto;
  align-items: center;
  gap: 4px 12px;
  padding: 10px 0;
}

.ticket-habitaciones li + li {
  border-top: 1px solid rgb(255 255 255 / 0.08);
}

.ticket-habitaciones strong {
  display: block;
  font-family: var(--fuente-titulos);
  font-size: 1.3rem;
  font-weight: 500;
  letter-spacing: 0.02em;
  line-height: 1.1;
  text-transform: uppercase;
}

.ticket-habitaciones small {
  display: block;
  margin-top: 3px;
  color: rgb(255 255 255 / 0.6);
  font-size: 0.8rem;
}

.ticket-habitaciones b {
  font-size: 0.95rem;
  white-space: nowrap;
}

.ticket-habitaciones button {
  display: grid;
  place-items: center;
  width: 32px;
  height: 32px;
  padding: 0;
  color: rgb(255 255 255 / 0.75);
  background: rgb(255 255 255 / 0.08);
  border: 0;
  border-radius: 50%;
  transition: background-color 160ms ease, color 160ms ease;
}

.ticket-habitaciones button svg {
  width: 14px;
  height: 14px;
}

.ticket-habitaciones button:hover {
  color: #ffffff;
  background: var(--magenta);
}

/* Los extras para sumar. */
.ticket-extras-lista {
  display: grid;
  gap: 8px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.ticket-extra {
  border: 1px solid rgb(255 255 255 / 0.12);
  border-radius: 14px;
  background: rgb(255 255 255 / 0.03);
  transition: border-color 160ms ease, background-color 160ms ease;
}

.ticket-extra.is-on {
  background: rgb(var(--rgb-acento) / 0.13);
  border-color: rgb(var(--rgb-acento) / 0.62);
}

.ticket-extra-boton {
  display: grid;
  grid-template-columns: 22px minmax(0, 1fr) auto;
  align-items: start;
  gap: 2px 12px;
  width: 100%;
  padding: 12px 14px;
  color: #ffffff;
  background: none;
  border: 0;
  border-radius: 14px;
  text-align: left;
  cursor: pointer;
}

.ticket-extra-boton:disabled {
  cursor: default;
}

.ticket-extra-check {
  display: grid;
  place-items: center;
  grid-row: 1 / span 3;
  width: 22px;
  height: 22px;
  margin-top: 1px;
  color: transparent;
  border: 1.5px solid rgb(255 255 255 / 0.42);
  border-radius: 7px;
  transition: background-color 160ms ease, border-color 160ms ease;
}

.ticket-extra-check svg {
  width: 14px;
  height: 14px;
}

.ticket-extra.is-on .ticket-extra-check {
  color: #ffffff;
  background: var(--magenta);
  border-color: var(--magenta);
}

.ticket-extra-nombre {
  font-size: 0.96rem;
  font-weight: 700;
  line-height: 1.3;
}

.ticket-extra-precio {
  font-size: 0.94rem;
  font-weight: 700;
  white-space: nowrap;
}

.ticket-extra-resumen,
.ticket-extra-unidad,
.ticket-extra-nota {
  grid-column: 2 / -1;
  font-size: 0.78rem;
  line-height: 1.4;
}

.ticket-extra-resumen {
  color: rgb(255 255 255 / 0.62);
}

.ticket-extra-unidad {
  color: rgb(255 255 255 / 0.5);
}

.ticket-extra-nota {
  color: var(--rosa-claro);
  font-weight: 700;
}

.ticket-extra-vermas {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  margin: -6px 0 10px 48px;
  padding: 2px 0;
  color: var(--rosa-claro);
  background: none;
  border: 0;
  font-size: 0.78rem;
  font-weight: 700;
}

.ticket-extra-vermas svg {
  width: 14px;
  height: 14px;
  transition: transform 160ms ease;
}

.ticket-extra-vermas[aria-expanded="true"] svg {
  transform: rotate(180deg);
}

.ticket-extra-detalle {
  margin: 0 14px 12px 48px;
  color: rgb(255 255 255 / 0.74);
  font-size: 0.82rem;
  line-height: 1.5;
}

.ticket-extra-detalle p,
.ticket-extra-detalle ul {
  margin: 0;
}

.ticket-extra-detalle ul {
  padding-left: 16px;
}

/* La cuenta. */
.ticket-cuenta {
  padding-top: 4px;
}

.ticket-lineas {
  display: grid;
  gap: 10px;
  margin: 0;
}

.ticket-lineas div {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
}

.ticket-lineas dt {
  color: rgb(255 255 255 / 0.82);
  font-size: 0.9rem;
}

.ticket-lineas dt small {
  display: block;
  color: rgb(255 255 255 / 0.5);
  font-size: 0.76rem;
}

.ticket-lineas dd {
  margin: 0;
  font-size: 0.92rem;
  font-weight: 700;
  white-space: nowrap;
}

/* El pie: el total y el boton, pegados abajo mientras se recorre el ticket. */
.ticket-pie {
  position: sticky;
  bottom: 0;
  z-index: 1;
  padding: 16px 24px 20px;
  background: var(--carbon);
  border-top: 1px solid rgb(255 255 255 / 0.12);
  box-shadow: 0 -14px 24px rgb(var(--rgb-velo) / 0.55);
  border-radius: 0 0 var(--radio-ficha) var(--radio-ficha);
}

.ticket-total {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  margin: 0;
}

.ticket-total span {
  color: rgb(255 255 255 / 0.7);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.ticket-total strong {
  font-family: var(--fuente-titulos);
  font-size: 2.2rem;
  font-weight: 600;
  line-height: 1;
  letter-spacing: 0.01em;
  white-space: nowrap;
}

.ticket-nota {
  margin: 8px 0 0;
  color: rgb(255 255 255 / 0.55);
  font-size: 0.78rem;
  line-height: 1.45;
}

.ticket-nota-sena {
  color: rgb(255 255 255 / 0.7);
}

/* Las dos formas de pagar, con la promo por pagar el 100% prendida. */
.ticket-pago {
  margin-top: 16px;
}

.ticket-pago ul {
  display: grid;
  gap: 8px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.ticket-pago li {
  padding: 10px 12px;
  border: 1px solid rgb(255 255 255 / 0.12);
  border-radius: 12px;
}

.ticket-pago li.es-mejor {
  background: rgb(var(--rgb-acento) / 0.12);
  border-color: rgb(var(--rgb-acento) / 0.5);
}

.ticket-pago li span {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
}

.ticket-pago em {
  font-size: 0.86rem;
  font-style: normal;
  font-weight: 700;
}

.ticket-pago strong {
  font-size: 1rem;
  white-space: nowrap;
}

.ticket-pago small {
  display: block;
  margin-top: 4px;
  color: rgb(255 255 255 / 0.6);
  font-size: 0.76rem;
  line-height: 1.4;
}

.ticket-boton {
  width: 100%;
  min-height: 54px;
  margin-top: 14px;
  font-size: 1rem;
}

.ticket-boton::after {
  content: " →";
}

/* En "Tus datos" el ticket es el resumen: sin el boton de seguir. */
.paso-datos .ticket-boton {
  display: none;
}

/* ------------------------------------------------------------ tus datos */
.datos {
  display: grid;
  gap: 16px;
}

.datos-volver {
  display: inline-flex;
  align-items: center;
  justify-self: start;
  gap: 8px;
  padding: 6px 2px;
  color: var(--tinta);
  background: none;
  border: 0;
  font-size: 0.92rem;
  font-weight: 700;
}

.datos-volver:hover {
  color: var(--berry);
}

.datos-volver .icono {
  width: 18px;
  height: 18px;
}

/* La linea de "Estas reservando": solo donde el ticket no esta al lado. */
.datos-resumen {
  display: none;
}

.datos-form {
  display: grid;
  gap: 20px;
  padding: clamp(22px, 3.4vw, 40px);
  background: #ffffff;
  border: 1px solid var(--linea);
  border-radius: var(--radio-ficha);
  box-shadow: 0 18px 44px rgb(var(--rgb-sombra) / 0.07);
}

.datos-cabeza {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: end;
  gap: 8px 16px;
}

.datos-cabeza .eyebrow {
  grid-column: 1 / -1;
}

.datos-cabeza h2 {
  margin: 0;
  font-size: clamp(1.9rem, 3vw, 2.5rem);
  line-height: 1;
}

.datos-paso-de {
  margin: 0;
  color: var(--gris);
  font-size: 0.86rem;
  font-weight: 700;
  white-space: nowrap;
}

/* El progreso: cinco tramos que se llenan de magenta. */
.datos-progreso {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 8px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.datos-progreso li {
  display: grid;
  gap: 8px;
  color: var(--gris);
  font-size: 0.76rem;
  font-weight: 600;
}

.datos-progreso li::before {
  content: "";
  height: 5px;
  background: var(--linea);
  border-radius: 999px;
  transition: background-color 200ms ease;
}

.datos-progreso li.is-complete::before {
  background: rgb(var(--rgb-acento) / 0.45);
}

.datos-progreso li.is-active::before {
  background: var(--magenta);
}

.datos-progreso li.is-active,
.datos-progreso li.is-complete {
  color: var(--tinta);
}

.datos-progreso li.is-active {
  font-weight: 700;
}

.datos-progreso span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.datos-paso {
  min-width: 0;
  margin: 0;
  padding: 0;
  border: 0;
}

.datos-paso legend {
  margin: 0 0 16px;
  padding: 0;
  font-family: var(--fuente-titulos);
  font-size: clamp(1.3rem, 2.2vw, 1.6rem);
  font-weight: 500;
  line-height: 1.15;
}

.datos-campos {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
}

.datos-campos label:only-child,
.datos-campo-ancho {
  grid-column: 1 / -1;
}

.datos-campos label {
  display: grid;
  gap: 8px;
  color: var(--tinta);
  font-size: 0.86rem;
  font-weight: 700;
}

.datos-campos label small {
  color: var(--gris);
  font-weight: 500;
}

.datos-campos input,
.datos-campos textarea {
  width: 100%;
  min-height: 54px;
  padding: 0 16px;
  color: var(--tinta);
  background: var(--arena-clara);
  border: 1px solid var(--linea-fuerte);
  border-radius: 14px;
  font: inherit;
  font-size: 1rem;
  font-weight: 500;
  transition: border-color 160ms ease, background-color 160ms ease, box-shadow 160ms ease;
}

.datos-campos textarea {
  min-height: 112px;
  padding: 14px 16px;
  resize: vertical;
}

.datos-campos input:hover,
.datos-campos textarea:hover {
  background: #ffffff;
}

.datos-campos input:focus,
.datos-campos textarea:focus {
  background: #ffffff;
  border-color: var(--magenta);
  outline: none;
  box-shadow: 0 0 0 4px rgb(var(--rgb-acento) / 0.14);
}

/* Los datos del auto (13/10): aparecen solo si la reserva lleva el extra que
   el hotel marco como estacionamiento. Un sub-bloque marcado, porque no es un
   dato del huesped: depende del extra que eligio. */
.vehiculo-campos {
  padding: 16px;
  border: 1px solid var(--linea);
  border-radius: 14px;
  background: #ffffff;
}

.vehiculo-campos[hidden] {
  display: none;
}

.vehiculo-titulo {
  margin: 0 0 4px;
  color: var(--tinta);
  font-weight: 700;
}

.vehiculo-bajada {
  margin: 0 0 14px;
  color: var(--gris);
  font-size: 0.86rem;
  line-height: 1.4;
}

/* La patente se ve como se guarda: en mayusculas. */
#guestVehiculoPatente {
  text-transform: uppercase;
}

.datos-form .form-error {
  margin: 0;
  color: var(--wine);
  font-size: 0.92rem;
  font-weight: 700;
}

.datos-form .form-error:empty {
  display: none;
}

.datos-acciones {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.datos-acciones .primary-button,
.datos-acciones .secondary-button {
  min-width: 150px;
  min-height: 52px;
  padding: 0 26px;
}

.datos-acciones #reservationNext,
.datos-acciones #reservationSubmit {
  margin-left: auto;
}

#reservationNext::after {
  content: " →";
}

.acepta-terminos {
  margin: 0;
  padding-top: 18px;
  color: var(--gris);
  border-top: 1px solid var(--linea);
  font-size: 0.84rem;
  line-height: 1.6;
}

/* ------------------------------------------------- modales de resultados */
.flujo .confirm-modal,
.flujo .reservation-lookup-modal .modal-card {
  border-radius: 22px;
}

.flujo .confirm-copy h2,
.flujo .reservation-lookup-modal h2 {
  font-family: var(--fuente-titulos);
  font-weight: 600;
}

/* ================================================ resultados: responsive */
@media (max-width: 1180px) {
  .busqueda {
    grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr) minmax(0, 1fr) auto;
  }

  .busqueda-noches {
    display: none;
  }
}

@media (max-width: 1023px) {
  .estadia {
    grid-template-columns: minmax(0, 1fr);
  }

  .opciones,
  .datos,
  .ticket-columna {
    grid-column: 1;
    grid-row: auto;
  }

  .ticket-columna {
    position: static;
  }

  /* `clip` y no `hidden`: recorta las muescas del corte sin volver al ticket
     un contenedor de scroll, asi el pie (total y boton) se sigue pegando
     abajo de la pantalla. */
  .ticket {
    max-height: none;
    overflow: clip;
  }

  /* Sin el ticket al lado, "Tus datos" dice arriba que se esta reservando. */
  .datos-resumen {
    display: grid;
    gap: 2px;
    padding: 16px 18px;
    color: #ffffff;
    background: var(--carbon);
    border-radius: 16px;
  }

  .datos-resumen p {
    margin: 0;
  }

  .datos-resumen-rotulo {
    color: var(--rosa-claro);
    font-size: 0.68rem;
    font-weight: 700;
    letter-spacing: 0.16em;
    text-transform: uppercase;
  }

  .datos-resumen-titulo {
    font-family: var(--fuente-titulos);
    font-size: 1.4rem;
    letter-spacing: 0.02em;
    text-transform: uppercase;
  }

  .datos-resumen-detalle {
    color: rgb(255 255 255 / 0.7);
    font-size: 0.86rem;
  }

  .datos-resumen-total {
    margin-top: 6px !important;
    font-size: 0.9rem;
  }

  .datos-resumen-total strong {
    font-family: var(--fuente-titulos);
    font-size: 1.25rem;
    letter-spacing: 0.02em;
  }
}

@media (max-width: 860px) {
  .busqueda {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 14px 14px;
  }

  .busqueda-flecha {
    display: none;
  }

  .busqueda-boton {
    align-self: end;
  }
}

@media (max-width: 640px) {
  .flujo-banda {
    padding-top: 16px;
  }

  .opcion {
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas:
      "media"
      "cuerpo"
      "pie";
  }

  .opcion-media {
    min-height: 0;
    aspect-ratio: 16 / 10;
  }

  /* Fechas y huespedes se aplican solos al cambiarlos: en el telefono el
     boton de "Actualizar" se va y los huespedes toman el renglon entero. */
  .busqueda-huespedes {
    grid-column: 1 / -1;
  }

  .busqueda-boton {
    display: none;
  }

  .opcion-fotos .habitacion-sin-foto {
    padding: 14px 16px;
  }

  .opcion-fotos .habitacion-sin-foto strong {
    font-size: 2.4rem;
  }

  .recorrido {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    align-items: start;
  }

  .recorrido li {
    position: relative;
    flex-direction: column;
    gap: 6px;
    font-size: 0.7rem;
    text-align: center;
  }

  .recorrido li:not(:last-child)::after {
    position: absolute;
    top: 14px;
    left: calc(50% + 22px);
    width: calc(100% - 44px);
    min-width: 0;
    margin: 0;
  }

  .recorrido-numero {
    width: 28px;
    height: 28px;
    font-size: 0.85rem;
  }

  .flujo-nav .flujo-nav-texto {
    display: none;
  }

  .flujo-nav .whatsapp-link {
    width: 44px;
    padding: 0;
    justify-content: center;
  }

  .flujo-nav .ghost-button {
    padding: 8px 14px;
    font-size: 0.86rem;
  }

  .busqueda-fecha {
    font-size: 1.22rem;
  }

  .opcion-pie {
    align-items: stretch;
  }

  .opcion-accion {
    flex: 1 1 100%;
  }

  .opcion-accion .primary-button {
    flex: 1 1 auto;
  }

  .ticket-cabeza,
  .ticket-seccion,
  .ticket-pie {
    padding-right: 18px;
    padding-left: 18px;
  }

  .datos-campos {
    grid-template-columns: minmax(0, 1fr);
  }

  .datos-cabeza {
    grid-template-columns: minmax(0, 1fr);
  }

  .datos-progreso span {
    display: none;
  }

  .datos-progreso li {
    gap: 0;
  }

  .datos-acciones .primary-button,
  .datos-acciones .secondary-button {
    min-width: 0;
    flex: 1 1 0;
  }

  .aviso {
    grid-template-columns: minmax(0, 1fr);
  }
}

@media (max-width: 400px) {
  /* Logo, WhatsApp y "Ver mi reserva" en 360: sin esto se pasaban 12px. */
  .flujo .flujo-cabecera {
    gap: 12px;
  }

  .flujo-cabecera .marca-logo {
    height: 34px;
  }

  .flujo-nav {
    gap: 6px;
  }

  .flujo-nav .ghost-button {
    padding: 8px 12px;
    font-size: 0.82rem;
  }
}

@media (max-width: 380px) {
  .busqueda-fecha {
    font-size: 1.08rem;
  }
}

@media (prefers-reduced-motion: reduce) {
  .opcion-esqueleto,
  .ticket.is-recien {
    animation: none;
  }

  .opcion-fotos img {
    transition: none;
  }
}

/* ==================================================== elegir fechas
   reservar.html: la foto a pantalla partida (la habitacion que se estaba
   mirando, o el frente) y, al lado, el recorrido, los campos y el
   calendario siempre abierto. */
.fechas {
  --panel-x: clamp(20px, 4vw, 64px);
  display: grid;
  grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr);
  min-height: calc(100vh - var(--alto-cabecera));
}

.fechas-foto {
  position: sticky;
  top: var(--alto-cabecera);
  height: calc(100vh - var(--alto-cabecera));
  overflow: hidden;
  color: #ffffff;
  background: var(--carbon);
}

.fechas-foto-imagen,
.fechas-foto-imagen img {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
}

.fechas-foto-imagen img {
  object-fit: cover;
}

/* Sin foto: la capacidad ARRIBA (aca la caja es .fechas-foto-imagen, que es
   display: block: el numero y "personas" van en un renglon, centrados). Con
   30vh de aire abajo (hasta el 15/10) el texto de abajo le pasaba por encima
   en una pantalla baja: la cuadruple ya chocaba a 1280x720, y con "Familiar
   para 5 personas" en dos renglones, tambien a 1366x768. */
.fechas-foto .habitacion-sin-foto {
  padding: clamp(24px, 4vh, 48px) clamp(22px, 3.4vw, 48px);
  color: #ffffff;
  background:
    radial-gradient(circle at 70% 20%, rgb(var(--rgb-acento) / 0.22), transparent 55%),
    linear-gradient(160deg, #34303a 0%, var(--carbon) 100%);
}

.fechas-foto .habitacion-sin-foto strong {
  color: #ffffff;
}

.fechas-foto .habitacion-sin-foto span {
  color: rgb(255 255 255 / 0.6);
}

.fechas-foto::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(0deg, rgb(var(--rgb-velo) / 0.92) 0%, rgb(var(--rgb-velo) / 0.55) 42%, rgb(var(--rgb-velo) / 0) 72%);
  pointer-events: none;
}

.fechas-foto-texto {
  position: absolute;
  right: clamp(22px, 3.4vw, 48px);
  bottom: clamp(24px, 4vh, 48px);
  left: clamp(22px, 3.4vw, 48px);
  z-index: 1;
}

.fechas-foto-texto .eyebrow {
  margin: 0 0 10px;
  color: var(--rosa-claro);
}

.fechas-foto-texto h2 {
  margin: 0;
  font-size: clamp(2.3rem, 3.8vw, 3.5rem);
  font-weight: 600;
  line-height: 0.95;
  text-transform: uppercase;
}

.fechas-foto-pax {
  margin: 10px 0 0;
  color: var(--rosa-claro);
  font-size: 0.92rem;
  font-weight: 700;
}

.fechas-foto-bajada {
  max-width: 460px;
  margin: 10px 0 0;
  color: rgb(255 255 255 / 0.84);
  font-size: 0.98rem;
  line-height: 1.55;
}

.fechas-foto-incluye {
  margin-top: 22px;
  padding-top: 18px;
  border-top: 1px solid rgb(255 255 255 / 0.16);
}

.fechas-foto-incluye p {
  margin: 0 0 10px;
  color: rgb(255 255 255 / 0.58);
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

.fechas-foto-incluye ul {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px 16px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.fechas-foto-incluye li {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 0.88rem;
  font-weight: 600;
}

.fechas-foto-incluye .icono {
  width: 18px;
  height: 18px;
  color: var(--rosa-claro);
}

.fechas-panel {
  display: grid;
  align-content: start;
  gap: 22px;
  min-width: 0;
  padding: clamp(22px, 3vw, 40px) var(--panel-x) 0;
}

.fechas-cabeza {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 16px;
}

.fechas-cabeza h1 {
  margin: 10px 0 0;
  font-size: clamp(2.2rem, 3.6vw, 3.1rem);
  line-height: 1;
}

.fechas-volver {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 2px;
  color: var(--tinta);
  font-size: 0.92rem;
  font-weight: 700;
  text-decoration: none;
  white-space: nowrap;
}

.fechas-volver:hover {
  color: var(--berry);
}

.fechas-volver .icono {
  width: 18px;
  height: 18px;
}

.fechas-campos {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1.1fr);
  gap: 12px;
}

.fechas-campo {
  display: grid;
  align-content: start;
  gap: 6px;
  min-width: 0;
  padding: 14px 18px;
  color: var(--tinta);
  background: #ffffff;
  border: 1px solid var(--linea);
  border-radius: 16px;
  text-align: left;
  transition: border-color 160ms ease, box-shadow 160ms ease;
}

button.fechas-campo {
  cursor: pointer;
}

button.fechas-campo:hover {
  border-color: var(--linea-fuerte);
}

.fechas-campo.is-active {
  border-color: var(--magenta);
  box-shadow: inset 0 -3px 0 var(--magenta), 0 12px 26px rgb(var(--rgb-acento) / 0.12);
}

.fechas-campo-rotulo {
  color: var(--gris);
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

.fechas-campo strong {
  overflow: hidden;
  font-family: var(--fuente-titulos);
  font-size: clamp(1.25rem, 1.9vw, 1.55rem);
  font-weight: 500;
  letter-spacing: 0.02em;
  line-height: 1.15;
  text-overflow: ellipsis;
  text-transform: uppercase;
  white-space: nowrap;
}

.fechas-huespedes {
  padding-bottom: 12px;
}

/* El contador sobre fondo claro. */
.contador-claro {
  min-height: 44px;
  color: var(--tinta);
  background: var(--arena-clara);
  border-color: var(--linea-fuerte);
}

.contador-claro button {
  min-height: 42px;
  color: var(--tinta);
}

.contador-claro button:hover {
  background: var(--arena);
}

.contador-claro strong {
  font-size: 1.05rem;
}

.fechas-calendario {
  padding: 16px 20px 20px;
  background: #ffffff;
  border: 1px solid var(--linea);
  border-radius: 20px;
}

.fechas-calendario-barra {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 10px;
}

.fechas-calendario-barra span {
  color: var(--gris);
  font-size: 0.9rem;
  font-weight: 600;
  text-align: center;
}

.fechas-mes {
  display: grid;
  place-items: center;
  flex: 0 0 auto;
  width: 40px;
  height: 40px;
  padding: 0;
  color: var(--tinta);
  background: #ffffff;
  border: 1px solid var(--linea);
  border-radius: 50%;
  transition: background-color 160ms ease, color 160ms ease;
}

.fechas-mes:hover {
  color: #ffffff;
  background: var(--carbon);
  border-color: var(--carbon);
}

.fechas-calendario .calendar-months {
  gap: 28px;
}

.fechas-calendario .calendar-head {
  justify-content: center;
}

.fechas-calendario .calendar-head strong {
  font-family: var(--fuente-titulos);
  font-size: 1.2rem;
  font-weight: 600;
  letter-spacing: 0.02em;
}

.fechas-aviso {
  margin: 0;
  padding: 12px 16px;
  color: var(--tinta);
  background: var(--arena);
  border-left: 3px solid var(--magenta);
  border-radius: 12px;
  font-size: 0.9rem;
  line-height: 1.5;
}

/* El resumen y el boton, pegados abajo mientras se elige. */
.fechas-acciones {
  position: sticky;
  bottom: 0;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px 20px;
  margin: 0 calc(-1 * var(--panel-x));
  padding: 14px var(--panel-x) calc(14px + env(safe-area-inset-bottom, 0px));
  background: rgb(250 246 242 / 0.96);
  border-top: 1px solid var(--linea);
  box-shadow: 0 -12px 28px rgb(var(--rgb-sombra) / 0.06);
}

.fechas-resumen {
  margin: 0;
  color: var(--gris);
  font-size: 0.95rem;
}

.fechas-resumen strong {
  color: var(--tinta);
  font-family: var(--fuente-titulos);
  font-size: 1.15rem;
  font-weight: 600;
  letter-spacing: 0.02em;
}

.fechas-acciones .primary-button {
  min-width: 210px;
  min-height: 52px;
  padding: 0 26px;
}

@media (max-width: 1100px) {
  .fechas {
    grid-template-columns: minmax(0, 0.7fr) minmax(0, 1.3fr);
  }

  .fechas-foto-incluye ul {
    grid-template-columns: minmax(0, 1fr);
  }
}

@media (max-width: 860px) {
  .fechas {
    grid-template-columns: minmax(0, 1fr);
  }

  .fechas-foto {
    position: relative;
    top: auto;
    height: 220px;
  }

  /* En la franja de 220px, mas chica y mas pegada arriba: con un nombre de
     dos renglones el texto de abajo llega casi hasta arriba. */
  .fechas-foto .habitacion-sin-foto {
    padding: 16px 22px;
  }

  .fechas-foto .habitacion-sin-foto strong {
    font-size: 2.6rem;
  }

  .fechas-foto-texto {
    bottom: 18px;
  }

  .fechas-foto-texto h2 {
    font-size: 2.1rem;
  }

  .fechas-foto-bajada,
  .fechas-foto-incluye {
    display: none;
  }

  .fechas-panel {
    gap: 18px;
  }

  .fechas-campos {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  }

  .fechas-huespedes {
    grid-column: 1 / -1;
  }

  .fechas-calendario {
    padding: 12px 10px 14px;
  }
}

@media (max-width: 640px) {
  .fechas-cabeza h1 {
    font-size: 2rem;
  }

  .fechas-campo {
    padding: 12px 14px;
  }

  .fechas-acciones {
    flex-wrap: wrap;
  }

  .fechas-acciones .primary-button {
    flex: 1 1 100%;
  }
}

/* ============================================ "Ver mi reserva" y pago
   reserva-confirmacion.html y pago.html: el mismo ticket de la estadia que
   en resultados, sin scroll propio. */
.ticket-estatico {
  max-height: none;
  overflow: clip;
}

.ticket-estado {
  display: inline-flex;
  margin-top: 12px;
  padding: 4px 10px;
  color: var(--rosa-claro);
  background: rgb(var(--rgb-acento) / 0.16);
  border-radius: 999px;
  font-size: 0.74rem;
  font-weight: 700;
}

/* Los datos de la estadia, en el ticket (oscuro). */
.reserva-datos {
  display: grid;
  gap: 12px;
  margin: 0;
}

.reserva-datos div {
  display: grid;
  gap: 2px;
}

.reserva-datos dt {
  color: rgb(255 255 255 / 0.55);
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.reserva-datos dd {
  margin: 0;
  color: #ffffff;
  font-size: 0.94rem;
  font-weight: 600;
  line-height: 1.4;
  overflow-wrap: anywhere;
}

.ticket-lineas-pagos {
  margin-top: 12px;
}

/* Mientras se busca la reserva. */
.reserva-cargando {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  min-height: 40vh;
  color: var(--gris);
  font-weight: 600;
}

.pago-resumen .reserva-cargando {
  min-height: 220px;
  background: #ffffff;
  border: 1px solid var(--linea);
  border-radius: var(--radio-ficha);
}

.reserva-cargando-punto {
  width: 14px;
  height: 14px;
  background: var(--magenta);
  border-radius: 50%;
  animation: latido 0.9s ease-in-out infinite alternate;
}

@keyframes latido {
  from {
    opacity: 0.45;
    transform: scale(0.6);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}

/* El aviso de "Copiado.", abajo y al centro. */
.flujo .reservation-copy-feedback {
  position: fixed;
  bottom: calc(24px + env(safe-area-inset-bottom, 0px));
  left: 50%;
  z-index: 60;
  margin: 0;
  padding: 10px 18px;
  color: #ffffff;
  background: var(--carbon);
  border-radius: 999px;
  box-shadow: 0 14px 34px rgb(var(--rgb-sombra) / 0.3);
  font-size: 0.92rem;
  font-weight: 700;
  transform: translateX(-50%);
}

/* ------------------------------------------- "Ver mi reserva": la banda */
.reserva-banda {
  position: relative;
  padding: clamp(28px, 4vw, 48px) var(--costado-flujo) clamp(28px, 3.6vw, 42px);
  color: #ffffff;
  background:
    radial-gradient(90% 160% at 100% 0%, rgb(var(--rgb-acento) / 0.2), transparent 60%),
    linear-gradient(180deg, var(--carbon) 0%, #232027 100%);
}

.reserva-banda::after {
  content: "";
  position: absolute;
  right: 0;
  bottom: 0;
  left: 0;
  height: 3px;
  background: linear-gradient(90deg, var(--grafito), var(--magenta));
}

.reserva-banda .eyebrow {
  color: var(--rosa-claro);
}

.reserva-banda-dentro {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: end;
  gap: 24px 48px;
}

.reserva-banda h1 {
  margin: 12px 0 10px;
  font-size: clamp(2.2rem, 4.4vw, 3.6rem);
  line-height: 0.98;
}

.reserva-banda-texto p:not(.eyebrow) {
  max-width: 640px;
  margin: 0;
  color: rgb(255 255 255 / 0.78);
  line-height: 1.6;
}

/* El codigo, como el talon de un ticket. */
.reserva-codigo {
  display: grid;
  justify-items: start;
  gap: 4px;
  min-width: 260px;
  padding: 18px 22px;
  background: rgb(255 255 255 / 0.05);
  border: 1px dashed rgb(255 255 255 / 0.32);
  border-radius: 18px;
}

.reserva-codigo-rotulo {
  color: rgb(255 255 255 / 0.6);
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

.reserva-codigo strong {
  font-family: var(--fuente-titulos);
  font-size: 2rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  line-height: 1.05;
}

.reserva-codigo-estado {
  padding: 3px 10px;
  color: var(--rosa-claro);
  background: rgb(var(--rgb-acento) / 0.16);
  border-radius: 999px;
  font-size: 0.74rem;
  font-weight: 700;
}

.reserva-copiar {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-top: 6px;
  padding: 4px 0;
  color: #ffffff;
  background: none;
  border: 0;
  font-size: 0.86rem;
  font-weight: 700;
}

.reserva-copiar .icono {
  width: 17px;
  height: 17px;
  color: var(--rosa-claro);
}

.reserva-copiar:hover span {
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* La linea de estado: solicitud, seña, llegada. */
.reserva-estado {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
  margin: clamp(26px, 3.4vw, 36px) 0 0;
  padding: 0;
  list-style: none;
}

.reserva-estado li {
  position: relative;
  display: grid;
  align-content: start;
  gap: 2px;
  min-width: 0;
  padding-top: 30px;
  color: rgb(255 255 255 / 0.55);
}

.reserva-estado li:not(:last-child)::before {
  content: "";
  position: absolute;
  top: 9px;
  right: -12px;
  left: 26px;
  height: 2px;
  background: rgb(255 255 255 / 0.16);
  border-radius: 2px;
}

.reserva-estado li.is-hecho::before {
  background: linear-gradient(90deg, var(--magenta), rgb(var(--rgb-acento) / 0.5));
}

.reserva-estado-punto {
  position: absolute;
  top: 0;
  left: 0;
  width: 20px;
  height: 20px;
  background: var(--carbon);
  border: 2px solid rgb(255 255 255 / 0.3);
  border-radius: 50%;
}

.reserva-estado li.is-hecho .reserva-estado-punto {
  background: var(--magenta) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m5 12.5 4.5 4.5L19 7.5'/%3E%3C/svg%3E") center / 12px no-repeat;
  border-color: var(--magenta);
}

.reserva-estado li.is-actual .reserva-estado-punto {
  background: radial-gradient(circle, var(--magenta) 0 4px, var(--carbon) 5px);
  border-color: var(--magenta);
  box-shadow: 0 0 0 5px rgb(var(--rgb-acento) / 0.25);
}

.reserva-estado b {
  color: rgb(255 255 255 / 0.6);
  font-family: var(--fuente-titulos);
  font-size: 1.15rem;
  font-weight: 500;
  letter-spacing: 0.03em;
  text-transform: uppercase;
}

.reserva-estado li.is-hecho b,
.reserva-estado li.is-actual b {
  color: #ffffff;
}

.reserva-estado small {
  font-size: 0.84rem;
}

.reserva-estado li.is-actual small {
  color: var(--rosa-claro);
  font-weight: 700;
}

/* ------------------------------------------- "Ver mi reserva": el cuerpo */
.reserva-cuerpo {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(320px, 400px);
  align-items: start;
  gap: clamp(22px, 3vw, 40px);
  padding: clamp(26px, 3.6vw, 44px) var(--costado-flujo) clamp(60px, 7vw, 90px);
}

.reserva-principal,
.reserva-lateral {
  display: grid;
  align-content: start;
  gap: 22px;
  min-width: 0;
}

/* Lo que hay que pagar: lo unico con color. */
.reserva-pago {
  padding: clamp(22px, 3vw, 32px);
  background: #ffffff;
  border: 1px solid var(--linea);
  border-top: 4px solid var(--magenta);
  border-radius: var(--radio-ficha);
  box-shadow: 0 18px 44px rgb(var(--rgb-sombra) / 0.07);
}

.reserva-pago.is-review {
  border-top-color: #c58a1e;
}

.reserva-pago.is-ok {
  border-top-color: #2f8f5b;
}

.reserva-pago-cabeza {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: start;
  gap: 18px;
}

.reserva-pago-icono,
.pago-metodo-icono {
  display: grid;
  place-items: center;
  width: 52px;
  height: 52px;
  color: var(--berry);
  background: var(--magenta-suave);
  border-radius: 16px;
}

.reserva-pago-icono .icono,
.pago-metodo-icono .icono {
  width: 26px;
  height: 26px;
}

.reserva-pago.is-review .reserva-pago-icono {
  color: #8a5a00;
  background: #fdf3df;
}

.reserva-pago.is-ok .reserva-pago-icono {
  color: #1f6b43;
  background: #e5f4ec;
}

.reserva-pago h2 {
  margin: 2px 0 0;
  font-size: clamp(1.4rem, 2.4vw, 1.8rem);
  line-height: 1.1;
}

.reserva-pago-cabeza p {
  margin: 6px 0 0;
  color: var(--gris);
  line-height: 1.6;
}

.reserva-pago-cabeza p strong {
  color: var(--tinta);
}

.reserva-pago-cabeza .reserva-pago-importe {
  margin: 8px 0 4px;
  color: var(--tinta);
  font-family: var(--fuente-titulos);
  font-size: clamp(2.5rem, 4.6vw, 3.4rem);
  font-weight: 600;
  line-height: 1;
  letter-spacing: 0.01em;
}

.reserva-banco {
  margin-top: 22px;
  padding: 18px 20px;
  background: var(--arena-clara);
  border-radius: 16px;
}

.reserva-banco h3 {
  margin: 0 0 12px;
  color: var(--berry);
  font-family: var(--fuente-texto);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

.reserva-banco dl,
.pago-datos {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  gap: 14px 22px;
  margin: 0;
}

.reserva-banco div,
.pago-datos div {
  display: grid;
  gap: 4px;
  min-width: 0;
}

.reserva-banco dt,
.pago-datos dt {
  color: var(--gris);
  font-size: 0.78rem;
  font-weight: 700;
}

.reserva-banco dd,
.pago-datos dd {
  margin: 0;
  font-weight: 600;
  overflow-wrap: anywhere;
}

/* Alias y CBU: un toque y quedan copiados. */
.reserva-banco dl > div:has(.reserva-copiar-dato),
.pago-datos > div:has(.reserva-copiar-dato) {
  grid-column: 1 / -1;
}

.reserva-copiar-dato {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  max-width: 100%;
  padding: 7px 10px;
  color: var(--tinta);
  background: #ffffff;
  border: 1px dashed var(--linea-fuerte);
  border-radius: 10px;
  /* Un CBU son 22 cifras: con esta letra entra en un renglon hasta en un
     telefono de 360 (cortado, el ultimo digito quedaba solo abajo). */
  font-size: 0.86rem;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  letter-spacing: 0;
  text-align: left;
  transition: border-color 160ms ease;
}

.reserva-copiar-dato span {
  min-width: 0;
  overflow-wrap: anywhere;
}

.reserva-copiar-dato .icono {
  width: 16px;
  height: 16px;
  color: var(--berry);
}

.reserva-copiar-dato:hover {
  border-color: var(--magenta);
  border-style: solid;
}

/* "Ya transferí". */
.reserva-subir {
  margin-top: 18px;
  padding-top: 18px;
  border-top: 1px solid var(--linea);
}

.reserva-subir-pregunta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 12px 18px;
}

.reserva-subir-pregunta p {
  flex: 1 1 260px;
  margin: 0;
  color: var(--gris);
  line-height: 1.5;
}

.reserva-subir-pregunta b {
  color: var(--tinta);
}

.reserva-subir-pregunta .secondary-button {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 48px;
  padding: 0 20px;
}

.reserva-subir-pregunta .secondary-button .icono {
  width: 18px;
  height: 18px;
}

.flujo .confirmation-upload-form {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  align-items: end;
  gap: 14px;
  margin-top: 16px;
  padding: 0;
  background: none;
  border: 0;
}

.flujo .confirmation-upload-form label {
  display: grid;
  gap: 8px;
  color: var(--tinta);
  font-size: 0.86rem;
  font-weight: 700;
}

.flujo .confirmation-upload-form input {
  width: 100%;
  min-height: 50px;
  padding: 0 14px;
  background: var(--arena-clara);
  border: 1px solid var(--linea-fuerte);
  border-radius: 12px;
  font-size: 0.95rem;
}

.flujo .confirmation-upload-form input[type="file"] {
  padding: 12px;
}

.flujo .confirmation-upload-form .primary-button {
  grid-column: 1 / -1;
  justify-self: start;
  min-height: 50px;
  padding: 0 24px;
}

.flujo .confirmation-upload-status {
  grid-column: 1 / -1;
  margin: 0;
  color: var(--gris);
  font-size: 0.9rem;
}

.flujo .confirmation-upload-status:empty {
  display: none;
}

.flujo .confirmation-upload-status.is-error {
  color: var(--wine);
  font-weight: 700;
}

.reserva-bloque {
  padding: clamp(20px, 2.6vw, 28px);
  background: #ffffff;
  border: 1px solid var(--linea);
  border-radius: 20px;
}

.reserva-bloque h2 {
  margin: 0 0 14px;
  font-size: 1.4rem;
  line-height: 1.1;
}

.reserva-bloque > p {
  margin: 0 0 16px;
  color: var(--gris);
}

.reserva-bloque > .primary-button {
  display: inline-flex;
  align-items: center;
  min-height: 50px;
  padding: 0 24px;
  text-decoration: none;
}

.reserva-pasos ol {
  display: grid;
  gap: 12px;
  margin: 0;
  padding: 0;
  list-style: none;
  counter-reset: paso;
}

.reserva-pasos li {
  display: grid;
  grid-template-columns: 30px minmax(0, 1fr);
  align-items: start;
  gap: 12px;
  color: var(--gris);
  line-height: 1.5;
  counter-increment: paso;
}

.reserva-pasos li::before {
  content: counter(paso);
  display: grid;
  place-items: center;
  width: 30px;
  height: 30px;
  color: #ffffff;
  background: var(--carbon);
  border-radius: 50%;
  font-family: var(--fuente-titulos);
  font-weight: 600;
}

.reserva-pasos li:last-child::before {
  background: var(--magenta);
}

.reserva-datos-claros {
  display: grid;
  gap: 12px;
  margin: 0;
}

.reserva-datos-claros div {
  display: grid;
  gap: 2px;
}

.reserva-datos-claros dt {
  color: var(--gris);
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.reserva-datos-claros dd {
  margin: 0;
  font-weight: 600;
  overflow-wrap: anywhere;
}

.reserva-acciones {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px 18px;
}

.reserva-acciones .primary-button,
.reserva-acciones .secondary-button {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 52px;
  padding: 0 24px;
  text-decoration: none;
}

.reserva-link {
  color: var(--tinta);
  font-weight: 700;
  text-decoration: underline;
  text-underline-offset: 4px;
}

/* Sin codigo, o con un codigo que no existe: el campo para escribirlo. */
.reserva-banda-sola {
  display: grid;
  place-items: center;
  min-height: calc(100vh - var(--alto-cabecera));
}

.reserva-buscar {
  width: min(560px, 100%);
}

.reserva-buscar > p:not(.eyebrow) {
  margin: 0;
  color: rgb(255 255 255 / 0.78);
  line-height: 1.6;
}

.reserva-buscar-form {
  display: grid;
  gap: 8px;
  margin-top: 24px;
}

.reserva-buscar-form label {
  color: rgb(255 255 255 / 0.65);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

.reserva-buscar-form div {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.reserva-buscar-form input {
  flex: 1 1 220px;
  min-height: 56px;
  padding: 0 20px;
  color: #ffffff;
  background: rgb(255 255 255 / 0.08);
  border: 1px solid rgb(255 255 255 / 0.28);
  border-radius: 999px;
  font-family: var(--fuente-titulos);
  font-size: 1.25rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.reserva-buscar-form input::placeholder {
  color: rgb(255 255 255 / 0.4);
}

.reserva-buscar-form input:focus {
  border-color: var(--magenta);
  outline: none;
  box-shadow: 0 0 0 4px rgb(var(--rgb-acento) / 0.25);
}

.reserva-buscar-form .primary-button {
  min-height: 56px;
  padding: 0 26px;
}

.reserva-link-claro {
  display: inline-block;
  margin-top: 22px;
  color: rgb(255 255 255 / 0.82);
}

/* ------------------------------------------------------------------ pago */
.pago-cabeza {
  margin-top: clamp(20px, 2.6vw, 28px);
}

.pago-cabeza .eyebrow {
  color: var(--rosa-claro);
}

.pago-cabeza h1 {
  margin: 10px 0 8px;
  font-size: clamp(2.2rem, 4vw, 3.2rem);
  line-height: 1;
}

.pago-cabeza p:not(.eyebrow) {
  max-width: 640px;
  margin: 0;
  color: rgb(255 255 255 / 0.76);
  line-height: 1.6;
}

.pago-cuerpo {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(320px, 400px);
  grid-template-areas:
    "estado estado"
    "metodos resumen";
  align-items: start;
  gap: clamp(22px, 3vw, 40px);
  padding: clamp(26px, 3.6vw, 44px) var(--costado-flujo) clamp(60px, 7vw, 90px);
}

.pago-cuerpo .payment-status {
  grid-area: estado;
  margin: 0;
}

.pago-metodos {
  display: grid;
  grid-area: metodos;
  align-content: start;
  gap: 16px;
  min-width: 0;
}

.pago-resumen {
  position: sticky;
  top: calc(var(--alto-cabecera) + 18px);
  grid-area: resumen;
  min-width: 0;
}

.pago-metodo {
  display: grid;
  gap: 18px;
  padding: clamp(20px, 2.6vw, 28px);
  background: #ffffff;
  border: 1px solid var(--linea);
  border-radius: 20px;
  transition: border-color 160ms ease, box-shadow 160ms ease;
}

.pago-metodo:hover {
  border-color: var(--linea-fuerte);
  box-shadow: 0 14px 34px rgb(var(--rgb-sombra) / 0.06);
}

.pago-metodo-cabeza {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: start;
  gap: 16px;
}

.pago-metodo-icono-wa {
  color: #15803d;
  background: #e3f7ea;
}

.pago-metodo-icono-wa .whatsapp-icon {
  width: 26px;
  height: 26px;
}

.pago-metodo h2 {
  margin: 2px 0 6px;
  font-size: 1.45rem;
  line-height: 1.1;
}

.pago-metodo-cabeza p {
  margin: 0;
  color: var(--gris);
  line-height: 1.55;
}

.pago-metodo > .primary-button,
.pago-metodo > .secondary-button {
  justify-self: start;
  min-height: 50px;
  padding: 0 24px;
}

.pago-metodo > a.secondary-button,
.pago-transferencia a {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  text-decoration: none;
}

.pago-transferencia {
  display: grid;
  justify-items: start;
  gap: 16px;
  padding: 18px 20px;
  background: var(--arena-clara);
  border-radius: 16px;
}

.pago-transferencia .pago-datos {
  justify-self: stretch;
}

.pago-transferencia p {
  margin: 0;
}

.pago-transferencia a.primary-button,
.pago-transferencia a.secondary-button {
  min-height: 48px;
  padding: 0 20px;
}

/* El aviso de la seña, dentro del ticket del pago. */
.pago-sena {
  margin-top: 14px;
  padding: 12px 14px;
  background: rgb(var(--rgb-acento) / 0.14);
  border: 1px solid rgb(var(--rgb-acento) / 0.45);
  border-radius: 12px;
}

.pago-sena strong {
  display: block;
  color: #ffffff;
  font-size: 0.9rem;
}

.pago-sena p {
  margin: 4px 0 0;
  color: rgb(255 255 255 / 0.74);
  font-size: 0.84rem;
  line-height: 1.45;
}

.pago-sena b {
  color: #ffffff;
}

.pago-aviso {
  display: grid;
  gap: 12px;
  padding: 24px;
  background: #ffffff;
  border: 1px solid var(--linea);
  border-radius: 20px;
}

.pago-aviso h2 {
  margin: 0;
  font-size: 1.5rem;
}

.pago-aviso p {
  margin: 0;
  color: var(--gris);
}

.pago-aviso .primary-button {
  display: inline-flex;
  align-items: center;
  justify-self: start;
  min-height: 48px;
  padding: 0 22px;
  text-decoration: none;
}

/* Mercado Pago (apagado en Demper hasta tener cuenta propia). */
.pago-montos {
  display: grid;
  gap: 10px;
  margin: 0;
  padding: 0;
  border: 0;
}

.pago-montos legend {
  margin-bottom: 8px;
  font-weight: 700;
}

.pago-montos label {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 14px;
  border: 1px solid var(--linea);
  border-radius: 12px;
}

@media (max-width: 1023px) {
  .reserva-cuerpo {
    grid-template-columns: minmax(0, 1fr);
  }

  /* En el telefono: primero lo que hay que pagar, despues la estadia, los
     pasos, el titular y los botones. */
  .reserva-principal,
  .reserva-lateral {
    display: contents;
  }

  .reserva-cuerpo > *,
  .reserva-principal > *,
  .reserva-lateral > * {
    order: 3;
  }

  .reserva-pago {
    order: 1;
  }

  .reserva-lateral > .ticket {
    order: 2;
  }

  .reserva-titular {
    order: 4;
  }

  .reserva-acciones {
    order: 5;
  }

  .pago-cuerpo {
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas:
      "estado"
      "resumen"
      "metodos";
  }

  .pago-resumen {
    position: static;
  }
}

@media (max-width: 380px) {
  .reserva-copiar-dato {
    font-size: 0.8rem;
  }
}

@media (max-width: 760px) {
  .reserva-banda-dentro {
    grid-template-columns: minmax(0, 1fr);
  }

  .reserva-codigo {
    min-width: 0;
  }

  .reserva-estado b {
    font-size: 0.98rem;
  }

  .reserva-estado small {
    font-size: 0.76rem;
  }

  .flujo .confirmation-upload-form {
    grid-template-columns: minmax(0, 1fr);
  }

  .reserva-acciones .primary-button,
  .reserva-acciones .secondary-button {
    flex: 1 1 100%;
    justify-content: center;
  }
}

@media (prefers-reduced-motion: reduce) {
  .reserva-cargando-punto {
    animation: none;
  }
}

/* ===========================================================================
   Todas las tarifas de una opción (12/10)
   ===========================================================================
   Pedido de Juan, igual que en la hostería: la ficha muestra la mejor tarifa
   y "Ver todas las tarifas" despliega todas, incluida la estándar, de la más
   baja a la más alta (tarifasDeTarjetaHtml en resultados.js). Va dentro de la
   franja carbón de la ficha, en su propio renglón, con el mismo lenguaje que
   "Cómo preferís pagar" del ticket: renglones con borde tenue y la elegida
   en magenta. */
.opcion-pie .tarifas {
  display: grid;
  flex: 1 0 100%;
  gap: 10px;
  min-width: 0;
}

.opcion-pie .tarifas-boton {
  display: inline-flex;
  align-items: center;
  justify-self: start;
  gap: 6px;
  padding: 2px 0;
  color: var(--rosa-claro);
  font: inherit;
  font-size: 0.86rem;
  font-weight: 700;
  background: none;
  border: 0;
  cursor: pointer;
}

.opcion-pie .tarifas-boton span {
  text-decoration: underline;
  text-underline-offset: 3px;
}

.opcion-pie .tarifas-boton svg {
  width: 12px;
  height: 12px;
  transition: transform 180ms ease;
}

.opcion-pie .tarifas-boton[aria-expanded="true"] svg {
  transform: rotate(180deg);
}

.opcion-pie .tarifas-lista,
.opcion-pie .tarifas-opciones {
  display: grid;
  gap: 8px;
  min-width: 0;
}

.opcion-pie .tarifas-ayuda {
  margin: 0;
  color: rgb(255 255 255 / 0.6);
  font-size: 0.78rem;
}

.opcion-pie .tarifa {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 12px;
  padding: 11px 14px;
  /* Blanco explicito: un label hereda el gris de la hoja base, que sobre el
     carbon no se lee. */
  color: #ffffff;
  font-weight: 400;
  border: 1px solid rgb(255 255 255 / 0.14);
  border-radius: 12px;
  cursor: pointer;
  transition: border-color 180ms ease, background-color 180ms ease;
}

.opcion-pie .tarifa:hover {
  border-color: rgb(255 255 255 / 0.3);
}

.opcion-pie .tarifa.is-elegida {
  background: rgb(var(--rgb-acento) / 0.14);
  border-color: rgb(var(--rgb-acento) / 0.6);
}

.opcion-pie .tarifa:has(input:focus-visible) {
  outline: 2px solid var(--rosa-claro);
  outline-offset: 2px;
}

.opcion-pie .tarifa input {
  width: 18px;
  height: 18px;
  margin: 0;
  accent-color: var(--magenta);
}

.opcion-pie .tarifa input:focus-visible {
  outline: none;
}

.opcion-pie .tarifa-texto {
  display: grid;
  gap: 3px;
  min-width: 0;
}

.opcion-pie .tarifa-nombre {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px 8px;
  font-size: 0.92rem;
  font-weight: 700;
}

.opcion-pie .tarifa-texto small {
  color: rgb(255 255 255 / 0.62);
  font-size: 0.78rem;
  line-height: 1.4;
}

.opcion-pie .tarifa-total {
  font-family: var(--fuente-titulos);
  font-size: 1.15rem;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.opcion-pie .tarifa-sello {
  padding: 2px 8px;
  color: #ffffff;
  font-size: 0.66rem;
  font-style: normal;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  white-space: nowrap;
  background: var(--magenta);
  border-radius: 999px;
}

.opcion-pie .tarifa-sello.es-recepcion {
  background: rgb(255 255 255 / 0.14);
}

/* En el teléfono el total baja debajo del texto: con el radio, el nombre, el
   sello y el importe en un renglón no entraba ninguno. */
@media (max-width: 640px) {
  .opcion-pie .tarifa {
    grid-template-columns: auto minmax(0, 1fr);
    align-items: start;
  }

  .opcion-pie .tarifa input {
    margin-top: 2px;
  }

  .opcion-pie .tarifa-total {
    grid-column: 2;
  }
}

/* "Prefiero pagar online", en el ticket de una reserva en cuotas. */
.ticket-volver {
  margin-top: 10px;
  padding: 0;
  color: var(--rosa-claro);
  font: inherit;
  font-size: 0.8rem;
  font-weight: 700;
  text-decoration: underline;
  text-underline-offset: 3px;
  background: none;
  border: 0;
  cursor: pointer;
}

/* ---------------------------------------------------------------------------
   "Tus datos" en dos pasos (14/10): el mail primero, con la sugerencia si
   tiene pinta de mal escrito ("¿Quisiste decir ...?"), el aviso de para que
   se guarda (solo con el seguimiento del hotel prendido) y, en el ultimo
   paso, el mail a la vista con "Cambiar". Reemplazan a "Confirmar email".
   --------------------------------------------------------------------------- */
.mail-sugerencia,
.aviso-del-mail,
.mail-para-revisar {
  margin: 0;
  color: var(--muted);
  font-size: 0.88rem;
  line-height: 1.5;
}
.mail-sugerencia { color: var(--ink); }
.mail-para-revisar:empty { display: none; }
.mail-sugerencia-boton,
.mail-cambiar {
  padding: 0;
  border: 0;
  background: none;
  /* Berry y no magenta: el magenta es de la accion principal (Siguiente). */
  color: var(--trust-dark);
  font: inherit;
  font-weight: 700;
  text-decoration: underline;
  text-underline-offset: 2px;
  cursor: pointer;
  overflow-wrap: anywhere;
}