/* ============================================================
   Botones flotantes: WhatsApp (izquierda) + Ir arriba (derecha)
   Usa las variables de tu sitio (--index-*, --spacer-*).
   Solo se añaden las de la marca WhatsApp, que no están en tu paleta.
   ============================================================ */
:root{
  --wa:#25D366;
  --wa-deep:#1da851;
}

.float-btn{
  position:fixed;
  bottom:var(--spacer-4);
  z-index:999;
  width:46px;
  height:46px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  border:0;
  border-radius:var(--index-radius-xs);
  color:var(--index-white);
  font-size:24px;
  cursor:pointer;
  text-decoration:none;
  box-shadow:0 8px 22px rgba(17,24,39,.18);
  transition:transform .22s ease, box-shadow .22s ease, background .22s ease,
             opacity .3s ease, visibility .3s ease, bottom .35s cubic-bezier(.4,0,.1,1);
}
.float-btn:hover{transform:translateY(-3px) scale(1.05)}
.float-btn:active{transform:translateY(-1px) scale(1)}
.float-btn:focus-visible{
  outline:none;
  box-shadow:0 0 0 4px var(--index-cyan-soft),0 8px 22px rgba(17,24,39,.18);
}


@media (max-width:767px){
  body:has(#book-tour-mobile:not(.price-hidden)) .float-btn{
    bottom:calc(var(--book-bar-h, 72px) + 8px) !important;
  }
}

/* WhatsApp — IZQUIERDA */
.wa-float{ left:var(--spacer-4); background:var(--wa); }
.wa-float:hover{ background:var(--wa-deep); }
.wa-float::after{
  content:"";
  position:absolute; inset:0; border-radius:var(--index-radius-xs);
  box-shadow:0 0 0 0 rgba(37,211,102,.45);
  animation:wa-pulse 2.4s infinite;
}
@keyframes wa-pulse{
  0%  {box-shadow:0 0 0 0 rgba(37,211,102,.45)}
  70% {box-shadow:0 0 0 14px rgba(37,211,102,0)}
  100%{box-shadow:0 0 0 0 rgba(37,211,102,0)}
}

/* Ir arriba — DERECHA  */
.top-float{
  right:var(--spacer-4);
  background:var(--index-primary);
  opacity:0;
  visibility:hidden;
}
.top-float:hover{ background:var(--index-primary-hover); }
.top-float.is-visible{
  opacity:1;
  visibility:visible;
  animation:top-spin .6s cubic-bezier(.16,1,.3,1);
}
/* salida: giro inverso  */
.top-float.is-hiding{
  visibility:visible;
  animation:top-spin-out .4s ease-in forwards;
}
@keyframes top-spin{
  0%  {opacity:0; transform:rotate(-360deg) scale(.2)}
  100%{opacity:1; transform:rotate(0) scale(1)}
}
@keyframes top-spin-out{
  0%  {opacity:1; transform:rotate(0) scale(1)}
  100%{opacity:0; transform:rotate(-360deg) scale(.2)}
}

/* Responsive ≤767px */
@media (max-width:767px){
  .float-btn{ width:40px; height:40px; font-size:20px; bottom:var(--spacer-3); } 
  .wa-float{ left:var(--spacer-3); }
  .top-float{ right:var(--spacer-3); }
  @keyframes wa-pulse{
    0%  {box-shadow:0 0 0 0 rgba(37,211,102,.45)}
    70% {box-shadow:0 0 0 10px rgba(37,211,102,0)}
    100%{box-shadow:0 0 0 0 rgba(37,211,102,0)}
  }
}

/* Respeta a quien prefiere menos movimiento */
@media (prefers-reduced-motion:reduce){
  .wa-float::after{animation:none}
  .float-btn{transition:none}
  .top-float.is-visible,
  .top-float.is-hiding{animation:none}
}