/* =========================================================
   VetUy — kit de flotantes (flotantes-vetuy-2026-10-18)
   Los botones flotantes de todas las páginas públicas de vetuy.com (landing y Adopciones):
   accesibilidad abajo a la izquierda, WhatsApp abajo a la derecha e instalar arriba del WhatsApp.
   Mismo tamaño, color y lugar en todas las páginas; efecto "boomerang" común; sin anillos que laten
   (tampoco el del kit de accesibilidad); perrito que da la vuelta al WhatsApp y gatito que le hace
   mimos al botón de accesibilidad. Autocontenido: no usa variables de la página que lo incluye.
   JS: /static/js/flotantes_vetuy.js. Marcado esperado:
     <a class="fab fab--wa" id="botonWhatsapp" ...>        (puede venir con hidden)
     <button class="fab fab--install" id="botonInstalar" ...>
     <div id="toastInstalar" class="toast-instalar" ...>
     y el #a11y-toggle que inyecta /static/js/a11y.js
   ========================================================= */
:root {
  --flotantes-vetuy: 1;
  --flot-panel: #16213D;
  --flot-cian: #21E6C1;
  --flot-azul: #2E7CF6;
  --flot-blanco: #F3EEE3;
  --flot-linea: rgba(33, 230, 193, .20);
  --flot-ease: cubic-bezier(.2, .7, .2, 1);
  --flot-sombra: 0 14px 30px -10px rgba(0, 0, 0, .7);
}

/* ---------- Botones ---------- */
.fab {
  position: fixed; z-index: 60; box-sizing: border-box; margin: 0; padding: 0;
  width: 56px; height: 56px; border-radius: 50%; border: 0; cursor: pointer;
  display: grid; place-items: center; font-size: 1.5rem; line-height: 1; text-decoration: none;
  box-shadow: var(--flot-sombra);
  transition: transform .25s var(--flot-ease);
}
.fab[hidden] { display: none; }
.fab--wa { right: 22px; bottom: 22px; background: #25D366; color: #fff; font-size: 1.65rem; }
.fab--install { right: 26px; bottom: 92px; width: 48px; height: 48px; font-size: 1.2rem; background: var(--flot-panel); color: var(--flot-cian); box-shadow: inset 0 0 0 1px var(--flot-linea), var(--flot-sombra); }
.fab--a11y { left: 22px; bottom: 22px; width: 48px; height: 48px; font-size: 1.35rem; background: var(--flot-azul); color: #fff; }
/* que los estilos de enlaces de la página (a:hover, a:visited) no les cambien el color */
a.fab--wa:hover, a.fab--wa:focus, a.fab--wa:visited { color: #fff; }
.fab--install:hover, .fab--install:focus { color: var(--flot-cian); }

/* Aviso del botón instalar */
.toast-instalar {
  position: fixed; right: 22px; bottom: 156px; z-index: 61; max-width: 270px; box-sizing: border-box;
  padding: 12px 16px; border-radius: 14px;
  background: var(--flot-panel); color: var(--flot-blanco); border: 1px solid var(--flot-linea);
  font-size: .88rem; line-height: 1.4; box-shadow: 0 30px 80px -30px rgba(0, 0, 0, .65);
  opacity: 0; transform: translateY(8px); pointer-events: none; transition: opacity .2s, transform .2s;
}
.toast-instalar.visible { opacity: 1; transform: none; }

/* Accesibilidad (botón que inyecta /static/js/a11y.js): abajo a la izquierda, para no apilar 3 a la derecha,
   aunque a11y.js le ponga right en línea */
html body #a11y-toggle, html body .a11y-fab { left: 22px !important; right: auto !important; bottom: 22px !important; }

@media (max-width: 720px) {
  .fab--wa { right: 16px; bottom: 16px; }
  .fab--install { right: 20px; bottom: 84px; }
  .fab--a11y { left: 16px; bottom: 16px; }
  .toast-instalar { right: 16px; bottom: 140px; max-width: calc(100vw - 32px); }
  html body #a11y-toggle, html body .a11y-fab { left: 16px !important; right: auto !important; bottom: 16px !important; }
}

/* ---------- Sin anillos que laten: el botón de accesibilidad del kit del servidor también se calma ---------- */
html body #a11y-toggle, html body .a11y-fab { animation: none !important; }
html body #a11y-toggle::after, html body .a11y-fab::after { content: none !important; animation: none !important; }
html body #a11y-toggle::before, html body .a11y-fab::before { animation: none !important; }

/* Efecto boomerang: empujón con rebote que vuelve a su lugar (dirección por --fx-x/--fx-y/--fx-r) */
@keyframes fxBoomerang {
  0%   { transform: none; }
  28%  { transform: translate(var(--fx-x, 0px), var(--fx-y, -7px)) scale(1.12) rotate(var(--fx-r, 0deg)); }
  52%  { transform: translate(calc(var(--fx-x, 0px) * -.35), calc(var(--fx-y, -7px) * -.35)) scale(.95) rotate(calc(var(--fx-r, 0deg) * -.4)); }
  74%  { transform: translate(calc(var(--fx-x, 0px) * .12), calc(var(--fx-y, -7px) * .12)) scale(1.03) rotate(calc(var(--fx-r, 0deg) * .15)); }
  100% { transform: none; }
}
/* Moneda: giro completo en Y con el mismo pasarse-y-volver */
@keyframes fxMoneda {
  0%   { transform: perspective(320px) rotateY(0) scale(1); }
  18%  { transform: perspective(320px) translateY(-8px) rotateY(80deg) scale(1.14); }
  62%  { transform: perspective(320px) translateY(-5px) rotateY(395deg) scale(1.1); }
  80%  { transform: perspective(320px) translateY(1px) rotateY(347deg) scale(.96); }
  100% { transform: perspective(320px) rotateY(360deg) scale(1); }
}
.fab:hover, .fab.fx-boom { transform: none; animation: fxBoomerang .62s var(--flot-ease) both; }
.fab--wa.fx-moneda { animation: fxMoneda .95s var(--flot-ease) both; }
html body #a11y-toggle:hover, html body #a11y-toggle.fx-boom,
html body .a11y-fab:hover, html body .a11y-fab.fx-boom { animation: fxBoomerang .62s var(--flot-ease) both !important; }

/* ---------- Perrito ---------- */
.masc-escena {
  position: fixed; inset: 0; overflow: hidden; pointer-events: none;
  z-index: 59; visibility: hidden; contain: strict;
}
.masc-escena.is-on { visibility: visible; animation: perroCapa var(--dur, 4.8s) linear both; }
.masc-ancla { position: absolute; left: var(--cx, -100px); top: var(--cy, -100px); width: 0; height: 0; }
.masc-x, .masc-y, .masc-giro { position: absolute; left: 0; top: 0; width: 0; height: 0; }
.masc-perro { position: absolute; left: -23px; top: -17.5px; width: 46px; height: 34.5px; max-width: none; overflow: visible; filter: drop-shadow(0 3px 2px rgba(0, 0, 0, .35)); }
.is-on .masc-x { animation: perroX var(--dur, 4.8s) both; }
.is-on .masc-y { animation: perroY var(--dur, 4.8s) both; }
.is-on .masc-giro { animation: perroGiro var(--dur, 4.8s) linear both; }
.masc-perro .p-pata, .masc-perro .p-cola, .masc-perro .p-oreja, .masc-perro .p-cuerpo, .masc-perro .p-cabeza { transform-box: fill-box; }
.masc-perro .p-pata { transform-origin: 50% 12%; }
.masc-perro .p-cola { transform-origin: 100% 100%; }
.masc-perro .p-oreja { transform-origin: 50% 8%; }
.masc-perro .p-lengua { transform-box: fill-box; transform-origin: 50% 0; }
.is-on .masc-perro .p-pata--a { animation: pataA .24s ease-in-out infinite alternate; }
.is-on .masc-perro .p-pata--b { animation: pataA .24s ease-in-out infinite alternate-reverse; }
.is-on .masc-perro .p-cola { animation: colaPerro .18s ease-in-out infinite alternate; }
.is-on .masc-perro .p-oreja { animation: orejaPerro .24s ease-in-out infinite alternate; }
.is-on .masc-perro .p-salto { animation: saltito .24s ease-in-out infinite alternate; }
.is-on .masc-perro .p-lengua { animation: lengua .24s ease-in-out infinite alternate; }
.masc-escena.is-quieto .masc-perro .p-pata,
.masc-escena.is-quieto .masc-perro .p-salto,
.masc-escena.is-quieto .masc-perro .p-oreja { animation: none; }
.masc-escena.is-quieto .masc-perro .p-cola { animation-duration: .12s; }
@keyframes pataA { from { transform: rotate(32deg); } to { transform: rotate(-32deg); } }
@keyframes colaPerro { from { transform: rotate(-16deg); } to { transform: rotate(18deg); } }
@keyframes orejaPerro { from { transform: rotate(-8deg); } to { transform: rotate(10deg); } }
@keyframes saltito { from { transform: translateY(0); } to { transform: translateY(-2.2px); } }
@keyframes lengua { from { transform: scaleY(.85); } to { transform: scaleY(1.15); } }

/* Recorrido (D = --dur): 0–10 % asoma por la izquierda · 10–66 % una vuelta (adelante por abajo,
   por detrás arriba) · 66–84 % mira la moneda · 84–100 % vuelve a esconderse detrás del botón. */
@keyframes perroX {
  0%   { transform: translateX(0); animation-timing-function: cubic-bezier(.25, .6, .45, 1); }
  10%  { transform: translateX(calc(var(--rx) * -1)); animation-timing-function: cubic-bezier(.37, 0, .63, 1); }
  38%  { transform: translateX(var(--rx)); animation-timing-function: cubic-bezier(.37, 0, .63, 1); }
  66%  { transform: translateX(calc(var(--rx) * -1)); animation-timing-function: cubic-bezier(.2, .7, .3, 1); }
  72%  { transform: translateX(calc(var(--rx) * -1 - 10px)); }
  84%  { transform: translateX(calc(var(--rx) * -1 - 10px)); animation-timing-function: cubic-bezier(.5, 0, .7, .6); }
  100% { transform: translateX(0); }
}
@keyframes perroY {
  0%   { transform: translateY(0) scale(.9); animation-timing-function: ease-out; }
  5%   { transform: translateY(-6px) scale(.93); animation-timing-function: ease-in; }
  10%  { transform: translateY(0) scale(.97); animation-timing-function: cubic-bezier(.61, 1, .88, 1); }
  24%  { transform: translateY(var(--ry)) scale(1.06); animation-timing-function: cubic-bezier(.12, 0, .39, 0); }
  38%  { transform: translateY(0) scale(.97); animation-timing-function: cubic-bezier(.61, 1, .88, 1); }
  52%  { transform: translateY(calc(var(--ry) * -1)) scale(.86); animation-timing-function: cubic-bezier(.12, 0, .39, 0); }
  66%  { transform: translateY(0) scale(.97); animation-timing-function: ease-out; }
  70%  { transform: translateY(2px) scale(.97); animation-timing-function: ease-out; }
  75%  { transform: translateY(-7px) scale(.97); animation-timing-function: ease-in; }
  80%  { transform: translateY(0) scale(.97); }
  100% { transform: translateY(0) scale(.9); }
}
@keyframes perroGiro {
  0%   { transform: scaleX(-1); opacity: 0; }
  3%   { opacity: 1; }
  9%   { transform: scaleX(-1); }
  14%  { transform: scaleX(1); }
  31%  { transform: scaleX(1); }
  45%  { transform: scaleX(-1); }
  63%  { transform: scaleX(-1); }
  68%  { transform: scaleX(1); }
  95%  { opacity: 1; }
  100% { transform: scaleX(1); opacity: 0; }
}
/* adelante del botón solo en la mitad de abajo de la vuelta */
@keyframes perroCapa {
  0%, 11.9% { z-index: 59; }
  12%, 37.9% { z-index: 61; }
  38%, 100% { z-index: 59; }
}

/* ---------- Gatito ---------- */
.masc-gato {
  position: fixed; left: -200px; bottom: 22px; z-index: 59;
  width: 40px; height: 43.3px; pointer-events: none;
}
.masc-gato svg { position: absolute; inset: 0; width: 100%; height: 100%; max-width: none; overflow: visible; filter: drop-shadow(0 3px 2px rgba(0, 0, 0, .35)); }
.masc-gato .g-todo, .masc-gato .g-cabeza, .masc-gato .g-cola, .masc-gato .g-ojos { transform-box: fill-box; }
.masc-gato .g-todo { transform-origin: 50% 100%; }
.masc-gato .g-cabeza { transform-origin: 70% 95%; }
.masc-gato .g-cola { transform-origin: 0% 100%; }
.masc-gato .g-ojos { transform-origin: 50% 50%; }
.masc-gato .g-felices { opacity: 0; }
.masc-gato.is-mimos .g-todo { animation: gatoMimo var(--gdur, 2.4s) ease-in-out both; }
.masc-gato.is-mimos .g-cabeza { animation: gatoCabeza var(--gdur, 2.4s) ease-in-out both; }
.masc-gato.is-mimos .g-cola { animation: gatoCola var(--gdur, 2.4s) ease-in-out both; }
.masc-gato.is-mimos .g-abiertos { animation: ojosAbiertos var(--gdur, 2.4s) step-end both; }
.masc-gato.is-mimos .g-felices { animation: ojosFelices var(--gdur, 2.4s) step-end both; }
@keyframes gatoMimo {
  0%   { transform: none; }
  14%  { transform: translateX(-6px) rotate(-7deg); }
  32%  { transform: translateX(-3px) rotate(-3deg); }
  48%  { transform: translateX(-7px) rotate(-8deg); }
  64%  { transform: translateX(-3px) rotate(-3deg); }
  80%  { transform: translateX(-6px) rotate(-6deg); }
  100% { transform: none; }
}
@keyframes gatoCabeza {
  0%   { transform: none; }
  14%  { transform: rotate(-16deg); }
  32%  { transform: rotate(7deg); }
  48%  { transform: rotate(-18deg); }
  64%  { transform: rotate(6deg); }
  80%  { transform: rotate(-14deg); }
  100% { transform: none; }
}
@keyframes gatoCola {
  0%   { transform: none; }
  20%  { transform: rotate(-22deg); }
  40%  { transform: rotate(12deg); }
  60%  { transform: rotate(-26deg); }
  80%  { transform: rotate(10deg); }
  100% { transform: none; }
}
@keyframes ojosAbiertos { 0% { opacity: 1; } 8% { opacity: 0; } 90% { opacity: 1; } }
@keyframes ojosFelices { 0% { opacity: 0; } 8% { opacity: 1; } 90% { opacity: 0; } }
.masc-corazon {
  position: absolute; left: 2px; top: 2px; width: 12px; height: 11px; opacity: 0;
  animation: corazonSube 1.5s cubic-bezier(.2, .7, .3, 1) forwards;
}
.masc-corazon svg { width: 100%; height: 100%; display: block; filter: none; }
@keyframes corazonSube {
  0%   { opacity: 0; transform: translate(0, 4px) scale(.5); }
  18%  { opacity: 1; transform: translate(calc(var(--dx, 0px) * .3), -8px) scale(1.1); }
  70%  { opacity: .9; }
  100% { opacity: 0; transform: translate(var(--dx, 0px), -40px) scale(.85) rotate(var(--dr, 0deg)); }
}

/* ---------- Movimiento reducido (sistema o kit de accesibilidad): sin movimiento ---------- */
@media (prefers-reduced-motion: reduce) {
  .masc-escena { display: none !important; }
  .fab, .toast-instalar { transition: none; }
  .masc-gato *, .masc-corazon { animation: none !important; }
  .masc-corazon { display: none; }
  .fab:hover, .fab.fx-boom, .fab--wa.fx-moneda,
  html body #a11y-toggle:hover, html body #a11y-toggle.fx-boom, html body .a11y-fab:hover, html body .a11y-fab.fx-boom { animation: none !important; }
}
html.a11y-reduce-motion .masc-escena { display: none !important; }
html.a11y-reduce-motion .fab, html.a11y-reduce-motion .toast-instalar { transition: none; }
html.a11y-reduce-motion .masc-gato *, html.a11y-reduce-motion .masc-corazon { animation: none !important; }
html.a11y-reduce-motion .masc-corazon { display: none; }
html.a11y-reduce-motion .fab:hover, html.a11y-reduce-motion .fab.fx-boom, html.a11y-reduce-motion .fab--wa.fx-moneda,
html.a11y-reduce-motion body #a11y-toggle:hover, html.a11y-reduce-motion body #a11y-toggle.fx-boom,
html.a11y-reduce-motion body .a11y-fab:hover, html.a11y-reduce-motion body .a11y-fab.fx-boom { animation: none !important; }