/* ==========================================================================
   CimaTreks · Botones flotantes
   - WhatsApp → esquina INFERIOR IZQUIERDA (solo páginas no-tour)
   - Ir arriba → esquina INFERIOR DERECHA (todas las páginas; en tours el
     switch lo mueve con id="go-to-top" para esquivar el bookbar)
   Iconos: Font Awesome (fa-whatsapp, fa-chevron-up).
   Colores: variables --idx del sitio (con fallback por si no cargan).
   ========================================================================== */

/* ---- botón base ---- */
.ct-float {
    position: fixed;
    bottom: clamp(1rem, 3vw, 1.5rem);
    z-index: 60;
    width: 3.25rem;
    height: 3.25rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 0;
    border-radius: 50%;
    cursor: pointer;
    text-decoration: none;
    box-shadow: 0 10px 24px -8px rgba(0, 0, 0, .45);
    transition: transform .2s ease, box-shadow .25s ease, background-color .2s ease,
                bottom .4s cubic-bezier(.22, 1, .36, 1);
}
.ct-float i { font-size: 1.6rem; line-height: 1; display: block; }
.ct-float:active { transform: translateY(1px); }

/* ==========================================================================
   WhatsApp · INFERIOR IZQUIERDA
   ========================================================================== */
.ct-float--wa {
    left: clamp(1rem, 3vw, 1.5rem);
    background: var(--idx-whatsapp, #25D366);
    color: #fff;
}
.ct-float--wa i { font-size: 1.9rem; } /* icono más grande = menos "aire" alrededor */
.ct-float--wa:hover { background: var(--idx-whatsapp-hover, #1eb455); transform: translateY(-2px); }

/* el icono es quien se sacude (así el hover del botón no pelea con el shake) */
.ct-float--wa .ct-float__icon {
    display: inline-flex;
    transform-origin: center;
    animation: ctShake 2.5s ease-in-out infinite;  /* cada 2.5s, notorio */
}
.ct-float--wa:hover .ct-float__icon { animation-play-state: paused; }

/* ==========================================================================
   Ir arriba · INFERIOR DERECHA
   ========================================================================== */
.ct-float--top {
    right: clamp(1rem, 3vw, 1.5rem);
    background: var(--idx-primary, #081021);
    color: #fff;
    opacity: 0;
    transform: scale(.4);
    pointer-events: none;
    visibility: hidden;
    transition: opacity .28s ease,
                transform .28s cubic-bezier(.34, 1.56, .64, 1),
                visibility .28s,
                bottom .4s cubic-bezier(.22, 1, .36, 1);
}
.ct-float--top:hover { transform: scale(1.06); }
.ct-float--top.is-visible {
    opacity: 1;
    transform: scale(1);
    pointer-events: auto;
    visibility: visible;
}
/* Sombra doble: halo claro (lo despega de fondos OSCUROS del mismo navy) +
   sombra oscura (lo despega de fondos CLAROS). Así resalta sobre cualquier
   sección. El anillo de 1px refuerza el borde cuando el fondo es idéntico. */
.ct-float--top {
    box-shadow:
        0 0 0 1px rgba(255, 255, 255, .14),   /* anillo claro pegado al botón */
        0 0 0 4px rgba(255, 255, 255, .06),   /* halo claro difuso */
        0 10px 24px -8px rgba(0, 0, 0, .55);  /* sombra oscura (fondos claros) */
}
.ct-float--top:hover {
    box-shadow:
        0 0 0 1px rgba(255, 255, 255, .22),
        0 0 0 5px rgba(255, 255, 255, .09),
        0 14px 30px -8px rgba(0, 0, 0, .6);
}
/* en tours: el switch le pone .esquivar-cta para subir sobre el bookbar */
.ct-float--top.esquivar-cta { bottom: 6rem; }

/* ==========================================================================
   Animación SHAKE (sacudida del icono de WhatsApp)
   ========================================================================== */
@keyframes ctShake {
    /* la sacudida ocupa el primer ~30% del ciclo, bien marcada */
    0%   { transform: rotate(0); }
    4%   { transform: rotate(-18deg); }
    8%   { transform: rotate(16deg); }
    12%  { transform: rotate(-14deg); }
    16%  { transform: rotate(11deg); }
    20%  { transform: rotate(-8deg); }
    24%  { transform: rotate(5deg); }
    28%  { transform: rotate(-2deg); }
    30%, 100% { transform: rotate(0); }
}

/* respeta a quien prefiere menos movimiento */
@media (prefers-reduced-motion: reduce) {
    .ct-float--wa .ct-float__icon { animation: none; }
    .ct-float--top { transition: opacity .2s ease; }
}