/* =========================================================
   V32 - Online final
   1) CTA Reservar experiencia visible debajo del H1 en móvil y PC.
   2) Carrito flotante clickeable para volver al paso activo de reserva.
   3) Ajustes finales para favicon/producción.
   ========================================================= */

/* El carrito es un botón real, pero mantiene estética flotante. */
.booking-cart-floating {
  border: 1px solid rgba(19, 184, 111, .42) !important;
  appearance: none;
  -webkit-appearance: none;
  cursor: pointer;
  font-family: inherit;
}

.booking-cart-floating.is-visible {
  pointer-events: auto !important;
}

.booking-cart-floating:disabled {
  pointer-events: none !important;
}

.booking-cart-floating:focus-visible {
  outline: 2px solid rgba(32, 223, 135, .8);
  outline-offset: 4px;
}

/* CTA del hero pegado al H1, siempre visible. */
html body[data-active-view="inicio"] .hero-content .reserve-pill,
html body.app-single-focus[data-active-view="inicio"] .hero-content .reserve-pill,
html body:not([data-active-view]) .hero-content .reserve-pill {
  margin-top: clamp(12px, 2vh, 18px) !important;
}

@media (min-width: 761px) {
  html body[data-active-view="inicio"] .hero-content,
  html body.app-single-focus[data-active-view="inicio"] .hero-content,
  html body:not([data-active-view]) .hero-content {
    top: 43% !important;
  }

  html body[data-active-view="inicio"] .hero h1,
  html body.app-single-focus[data-active-view="inicio"] .hero h1,
  html body:not([data-active-view]) .hero h1 {
    font-size: clamp(2.7rem, 4.45vw, 4.9rem) !important;
    line-height: .96 !important;
  }
}

@media (max-width: 760px) {
  html body[data-active-view="inicio"] .hero-content,
  html body.app-single-focus[data-active-view="inicio"] .hero-content,
  html body:not([data-active-view]) .hero-content {
    top: clamp(34px, 7.5vh, 58px) !important;
    justify-content: flex-start !important;
  }

  html body[data-active-view="inicio"] .hero-content .eyebrow,
  html body.app-single-focus[data-active-view="inicio"] .hero-content .eyebrow,
  html body:not([data-active-view]) .hero-content .eyebrow {
    margin-bottom: 10px !important;
  }

  html body[data-active-view="inicio"] .hero h1,
  html body.app-single-focus[data-active-view="inicio"] .hero h1,
  html body:not([data-active-view]) .hero h1 {
    font-size: clamp(1.72rem, 8.9vw, 2.7rem) !important;
    line-height: .94 !important;
    max-width: 10.8em !important;
  }

  html body[data-active-view="inicio"] .hero-content .reserve-pill,
  html body.app-single-focus[data-active-view="inicio"] .hero-content .reserve-pill,
  html body:not([data-active-view]) .hero-content .reserve-pill {
    margin-top: 12px !important;
    min-height: 46px !important;
    width: min(330px, 100%) !important;
  }
}

@media (max-width: 390px) {
  html body[data-active-view="inicio"] .hero-content,
  html body.app-single-focus[data-active-view="inicio"] .hero-content,
  html body:not([data-active-view]) .hero-content {
    top: clamp(28px, 6.2vh, 44px) !important;
  }

  html body[data-active-view="inicio"] .hero h1,
  html body.app-single-focus[data-active-view="inicio"] .hero h1,
  html body:not([data-active-view]) .hero h1 {
    font-size: clamp(1.55rem, 8.15vw, 2.35rem) !important;
  }

  html body[data-active-view="inicio"] .hero-content .reserve-pill,
  html body.app-single-focus[data-active-view="inicio"] .hero-content .reserve-pill,
  html body:not([data-active-view]) .hero-content .reserve-pill {
    min-height: 44px !important;
    margin-top: 10px !important;
  }
}