/* Reservation — calm full-bleed video hero with a liquid-glass form on top.
   Built from the supplied hero brief; two deliberate deviations, both noted
   inline: the accent colour and the font stack. */
:root {
  --rs-ink: #f4f8fb;
  --rs-ink-72: rgba(244, 248, 251, 0.72);
  --rs-ink-60: rgba(244, 248, 251, 0.6);
  --rs-ink-40: rgba(244, 248, 251, 0.4);
  /* The brief specified #7fb0d9. Swapped for the landing's existing gold so
     this closing section stays inside the hotel's identity — change this one
     value back to #7fb0d9 to restore the original blue. */
  --rs-accent: #c79a5b;
  --rs-fallback: #12161a;
  --rs-mono: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
}

.reserve {
  position: relative;
  /* Sube a 10 al entrar FAQ (9) entre esta sección y Ubicación (8). Tiene que
     seguir siendo la más alta de la escalera: es la que se monta encima
     mientras la de arriba se queda quieta. */
  z-index: 10;
  width: 100%;
  /* One held screen. The tall booking widget that forced this open moved to
     its own page; what is left is a title, a summary bar and a caption. */
  height: 100svh;
  min-height: 620px;
  overflow: hidden;
  background: var(--rs-fallback);
  color: var(--rs-ink);
  font-family: var(--ov-font-display);
  isolation: isolate;
}

/* ── Background video ────────────────────────────────────────────────── */
.reserve-video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 0;
}

/* Soft light scrim — a whisper, not a mask. Darker at the very top and at
   the bottom where the caption sits, nearly clear through the middle. */
.reserve-scrim {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background:
    radial-gradient(120% 70% at 50% 100%, rgba(18, 22, 26, 0.5) 0%, transparent 70%),
    /* The last stops ramp all the way to solid: the section below is this
       exact colour, so ending the scrim part-way left the video showing
       through and produced a visible seam between the two sections. */
    linear-gradient(
      to bottom,
      rgba(18, 22, 26, 0.42) 0%,
      rgba(18, 22, 26, 0.06) 34%,
      rgba(18, 22, 26, 0.08) 58%,
      rgba(18, 22, 26, 0.52) 82%,
      rgba(18, 22, 26, 0.86) 93%,
      rgba(18, 22, 26, 1) 100%
    );
}

/* ── Layout ──────────────────────────────────────────────────────────── */
.reserve-page {
  position: relative;
  z-index: 2;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: clamp(2rem, 6vh, 4.5rem);
  /* The deep bottom pad was holding room for the caption that sat under the
     bar; with that gone it becomes symmetric, so the title and bar centre on
     the screen instead of riding high. */
  padding: clamp(2rem, 5vh, 3.5rem) clamp(1.25rem, 5vw, 3.5rem);
  text-align: center;
}

/* ── Title ───────────────────────────────────────────────────────────── */
/* Same construction as the "Experiencia" statement in the offering section:
   a small wide-tracked serif line over one large bold-italic word that
   resolves letter by letter. Sits straight on the footage, no panel. */
.reserve-head {
  position: relative;
  z-index: 2;
  text-align: center;
}

.reserve-kicker {
  margin: 0 0 0.35rem;
  font-family: var(--vc-serif);
  font-weight: 400;
  font-size: clamp(0.6rem, 0.92vw, 0.8rem);
  text-transform: uppercase;
  letter-spacing: 0.42em;
  /* The tracking lands to the right of every glyph including the last, which
     pushes the line off-centre; this pulls it back. */
  text-indent: 0.42em;
  color: rgba(244, 248, 251, 0.92);
  text-shadow: 0 2px 20px rgba(10, 14, 18, 0.5);
}

.reserve-word {
  margin: 0;
  font-family: var(--vc-serif);
  font-style: italic;
  /* Zodiak Bold Italic (701) is loaded in the document head. Asking for 700
     without it would synthesise the bold and smear a high-contrast italic. */
  font-weight: 700;
  font-size: clamp(2.5rem, 9vw, 7.25rem);
  line-height: 0.95;
  letter-spacing: -0.01em;
  color: var(--rs-ink);
  text-shadow: 0 4px 40px rgba(10, 14, 18, 0.55);
}

.reserve-char {
  display: inline-block;
  will-change: transform, opacity;
}

/* ── Reservar ─────────────────────────────────────────────────────────
   El motor de reservas y el formulario que llevaba a reserva.html todavia no
   estan listos, y el canal que de verdad funciona hoy es WhatsApp. En vez de
   dos botones (uno que no hace nada util y un fallback etiquetado), un solo
   boton sobrio: mismo vidrio liquido que el resto de la pagina -- gradiente
   translucido, blur con boost de saturacion, borde capilar, brillo superior
   -- sin nombrar el medio. */
.rsv-go-solo {
  position: relative;
  z-index: 2;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.7rem;
  min-height: 52px;
  padding: 0 2.1em;
  border-radius: 999px;
  text-decoration: none;
  color: var(--rs-ink);
  background: linear-gradient(
    168deg,
    rgba(244, 248, 251, 0.16) 0%,
    rgba(244, 248, 251, 0.05) 46%,
    rgba(244, 248, 251, 0.09) 100%
  );
  -webkit-backdrop-filter: blur(26px) saturate(160%);
  backdrop-filter: blur(26px) saturate(160%);
  border: 1px solid rgba(244, 248, 251, 0.28);
  box-shadow:
    0 16px 40px -18px rgba(0, 0, 0, 0.6),
    inset 0 1px 0 rgba(255, 255, 255, 0.2);
  font-family: var(--rs-mono);
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.2em;
  white-space: nowrap;
  transition: transform 0.4s cubic-bezier(0.22, 1, 0.36, 1),
    border-color 0.3s ease, box-shadow 0.3s ease, background-color 0.3s ease;
}
.rsv-go-solo:hover,
.rsv-go-solo:focus-visible {
  transform: translateY(-2px);
  border-color: rgba(244, 248, 251, 0.45);
  box-shadow:
    0 20px 46px -18px rgba(0, 0, 0, 0.65),
    inset 0 1px 0 rgba(255, 255, 255, 0.26);
}
.rsv-go-solo:focus-visible {
  outline: none;
  box-shadow:
    0 0 0 3px rgba(244, 248, 251, 0.35),
    0 20px 46px -18px rgba(0, 0, 0, 0.65);
}
.rsv-go-solo svg {
  width: 16px;
  height: 16px;
  flex: none;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.7;
  stroke-linecap: round;
  stroke-linejoin: round;
  transition: transform 0.35s cubic-bezier(0.22, 1, 0.36, 1);
}
.rsv-go-solo:hover svg { transform: translateX(3px); }

@media (prefers-reduced-motion: reduce) {
  .rsv-go-solo:hover svg { transform: none; }
}

/* Video de fondo detras de vidrio: el backdrop-filter se recalcularia en
   cada cuadro del video. Se retira el muestreo y se sube la opacidad del
   relleno para conservar la lectura de vidrio sin el costo. */
@media not all and (any-hover: hover) and (any-pointer: fine) and (min-width: 640px) {
  .rsv-go-solo {
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
    background: rgba(34, 40, 46, 0.82);
  }
}

/* ── Staggered blur-rise entrance ────────────────────────────────────── */
@keyframes reserveBlurRise {
  from { opacity: 0; filter: blur(16px); transform: translateY(28px); }
  to { opacity: 1; filter: blur(0); transform: translateY(0); }
}

.reserve-anim { opacity: 0; }
.reserve.is-in .reserve-anim {
  animation: reserveBlurRise 1.05s cubic-bezier(0.2, 0.7, 0.2, 1) forwards;
}
.reserve.is-in .rsv-go-solo { animation-delay: 420ms; }

@media (prefers-reduced-motion: reduce) {
  .reserve-anim { opacity: 1; }
  .reserve.is-in .reserve-anim { animation: none; }
}

/* Los estilos de .rsv-social se fueron con el marcado: las redes viven ahora
   en el pie, en footer.css. Aquí tenían un tratamiento deliberadamente
   pesado —eran el único enlace saliente cuando Reserva cerraba la página— que
   en el footer ya no corresponde. */