/* =========================================================
   reserva-float.css
   CTA flotante de reserva (píldora abajo-izquierda) que sigue el
   scroll y queda SIEMPRE visible, para que el usuario pueda reservar
   en cualquier punto de la página. No choca con el botón de WhatsApp
   (abajo-derecha). Solo se carga en index.html.
   ========================================================= */

.reserva-float {
  position: fixed;
  left: clamp(1rem, 2vw, 1.5rem);
  bottom: calc(clamp(1rem, 2vw, 1.5rem) + env(safe-area-inset-bottom, 0px));
  z-index: 60;
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.8rem 1.2rem;
  border-radius: var(--r-pill);
  background: var(--grad-accent);
  color: #fff;
  font-family: var(--font-head);
  font-weight: 600;
  font-size: 0.95rem;
  line-height: 1;
  white-space: nowrap;
  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.42), 0 0 22px rgba(25, 212, 255, 0.22);
  transition: transform var(--t-base), box-shadow var(--t-base);
}
.reserva-float:hover,
.reserva-float:focus-visible {
  color: #fff;
  transform: translateY(-2px);
  box-shadow: 0 16px 38px rgba(0, 0, 0, 0.5), 0 0 30px rgba(25, 212, 255, 0.35);
}
.reserva-float:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }
.reserva-float__icon { flex: none; }

/* Pulso sutil para atraer la atención (halo con forma de píldora) */
.reserva-float::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: var(--r-pill);
  box-shadow: 0 0 0 0 rgba(25, 212, 255, 0.45);
  animation: reserva-pulse 2.8s infinite;
  pointer-events: none;
}
@keyframes reserva-pulse {
  0%   { box-shadow: 0 0 0 0 rgba(25, 212, 255, 0.40); }
  70%  { box-shadow: 0 0 0 14px rgba(25, 212, 255, 0); }
  100% { box-shadow: 0 0 0 0 rgba(25, 212, 255, 0); }
}
@media (prefers-reduced-motion: reduce) {
  .reserva-float::after { animation: none; }
  .reserva-float:hover,
  .reserva-float:focus-visible { transform: none; }
}

/* Si la barra fija de llamada (móvil) está activa, subimos el flotante */
@media (max-width: 900px) {
  body.has-callbar .reserva-float { bottom: calc(74px + env(safe-area-inset-bottom, 0px)); }
}

/* Pantallas muy estrechas: píldora algo más compacta */
@media (max-width: 400px) {
  .reserva-float { padding: 0.7rem 1rem; font-size: 0.85rem; gap: 0.4rem; }
}