/* Botón flotante de WhatsApp, compartido por todas las páginas y demos.
   Verde oficial de WhatsApp, sombra teñida del mismo verde, área táctil de 64 px.
   Excepción consciente a REGLAS_DISENO_VISUAL §2 (movimiento): Raúl pidió el
   4-sep-2026 que se haga notar. Se resuelve con una onda que sale del botón cada
   6 s y una etiqueta que asoma unos segundos al cargar; ambas se apagan con
   prefers-reduced-motion y la etiqueta vuelve al pasar el cursor. */
.wa-flotante {
    position: fixed;
    right: 20px;
    bottom: 20px;
    z-index: 50;
    width: 64px;
    height: 64px;
    border-radius: 50%;
    background: #25d366;
    color: #ffffff;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 8px 20px rgba(18, 140, 70, 0.38);
    text-decoration: none;
    transition: transform 160ms cubic-bezier(0.22, 1, 0.36, 1), box-shadow 160ms cubic-bezier(0.22, 1, 0.36, 1);
    animation: wa-entrada 600ms cubic-bezier(0.22, 1, 0.36, 1) 300ms both;
}
.wa-flotante svg {
    width: 36px;
    height: 36px;
    fill: currentColor;
    position: relative;
    z-index: 1;
}
.wa-flotante:hover {
    transform: translateY(-2px);
    box-shadow: 0 12px 24px rgba(18, 140, 70, 0.42);
}
.wa-flotante:focus-visible {
    outline: 3px solid #0d452c;
    outline-offset: 3px;
}

/* Onda: un anillo que nace del borde del botón y se desvanece. Cada 6 s. */
.wa-flotante::before {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: 50%;
    border: 3px solid #25d366;
    opacity: 0;
    animation: wa-onda 6s ease-out 1.2s infinite;
}

/* Etiqueta: aparece a los 2 s, se queda 5 s y se recoge. Vuelve al pasar el cursor. */
.wa-flotante::after {
    content: "Escríbenos por WhatsApp";
    position: absolute;
    right: calc(100% + 12px);
    top: 50%;
    transform: translateY(-50%) translateX(8px);
    white-space: nowrap;
    padding: 10px 14px;
    border-radius: 999px;
    background: #0d452c;
    color: #ffffff;
    font: 600 14px/1 'IBM Plex Sans', 'Segoe UI', sans-serif;
    box-shadow: 0 6px 16px rgba(13, 69, 44, 0.3);
    opacity: 0;
    pointer-events: none;
    animation: wa-etiqueta 8s cubic-bezier(0.22, 1, 0.36, 1) 2s both;
}
.wa-flotante:hover::after,
.wa-flotante:focus-visible::after {
    opacity: 1;
    transform: translateY(-50%) translateX(0);
    animation: none;
}

@keyframes wa-entrada {
    from { transform: translateY(24px) scale(0.6); opacity: 0; }
    to   { transform: translateY(0) scale(1); opacity: 1; }
}
@keyframes wa-onda {
    0%   { transform: scale(1);   opacity: 0.9; }
    18%  { transform: scale(1.9); opacity: 0; }
    100% { transform: scale(1.9); opacity: 0; }
}
@keyframes wa-etiqueta {
    0%   { opacity: 0; transform: translateY(-50%) translateX(8px); }
    8%   { opacity: 1; transform: translateY(-50%) translateX(0); }
    70%  { opacity: 1; transform: translateY(-50%) translateX(0); }
    100% { opacity: 0; transform: translateY(-50%) translateX(8px); }
}

/* Variante para páginas con barra fija abajo (p. ej. la comanda del restaurante) */
.wa-flotante--arriba { bottom: 96px; }

@media (max-width: 640px) {
    .wa-flotante { right: 16px; bottom: 16px; width: 60px; height: 60px; }
    .wa-flotante svg { width: 32px; height: 32px; }
    .wa-flotante::after { font-size: 13px; padding: 9px 12px; }
    .wa-flotante--arriba { bottom: 92px; }
}
@media (prefers-reduced-motion: reduce) {
    .wa-flotante, .wa-flotante::before, .wa-flotante::after { animation: none; transition: none; }
    .wa-flotante::before { display: none; }
    .wa-flotante:hover { transform: none; }
}