/* ═══ BOTÓN FLOTANTE DE WHATSAPP ═══
   Vive dentro de #app, no dentro de ninguna vista: por eso acompaña a todas
   las páginas sin que ningún JavaScript tenga que mostrarlo u ocultarlo.
   Y como #app arranca en opacity:0 hasta que termina la intro, tampoco se
   asoma por encima de la animación de apertura. */
.wa-flotante{
  position:fixed;
  right:24px;bottom:24px;
  z-index:90;                      /* bajo la barra (100) y la intro (9999) */
  display:inline-flex;align-items:center;gap:0;
  height:60px;padding:0 18px;
  background:var(--verde-agricola);
  color:#fff;
  border-radius:999px;
  box-shadow:0 16px 34px -12px rgba(12,43,25,.55);
  transition:gap .3s ease,padding .3s ease,background .2s ease,transform .2s ease,box-shadow .2s ease;
}
.wa-flotante:hover{
  background:var(--verde-oscuro);
  transform:translateY(-3px);
  box-shadow:0 22px 44px -14px rgba(12,43,25,.6);
}

.wa-flotante-icono{
  display:grid;place-items:center;
  width:26px;height:26px;flex:0 0 auto;
}
.wa-flotante-icono svg{width:100%;height:100%;display:block}

/* La etiqueta sale al pasar el cursor o al enfocar con el teclado. */
.wa-flotante-texto{
  max-width:0;overflow:hidden;white-space:nowrap;
  font-size:0.875rem;font-weight:700;letter-spacing:.02em;
  opacity:0;
  transition:max-width .3s ease,opacity .25s ease;
}
.wa-flotante:hover .wa-flotante-texto,
.wa-flotante:focus-visible .wa-flotante-texto{
  max-width:180px;opacity:1;
}
.wa-flotante:hover,
.wa-flotante:focus-visible{gap:12px}

/* Halo que late despacio, para que el botón se note sin estorbar.
   La regla global de prefers-reduced-motion lo detiene. */
.wa-flotante::before{
  content:'';
  position:absolute;inset:0;
  border-radius:999px;
  border:2px solid var(--verde-agricola);
  animation:waLatido 2.8s ease-out infinite;
  pointer-events:none;
}
.wa-flotante:hover::before{animation:none;opacity:0}

@keyframes waLatido{
  0%   {transform:scale(1);opacity:.7}
  70%  {transform:scale(1.35);opacity:0}
  100% {transform:scale(1.35);opacity:0}
}