/* Tecnolosis — botón flotante de WhatsApp (todas las páginas).
   Va en su propia hoja porque el inicio no carga subpage.css; así una sola regla sirve
   para el inicio, las subpáginas, los catálogos y la 404.
   assets/medicion.js reconoce .wa-float: cuenta contact_whatsapp con ubicacion "flotante". */
.wa-float {
  position: fixed;
  right: calc(20px + env(safe-area-inset-right, 0px));
  bottom: calc(20px + env(safe-area-inset-bottom, 0px));
  /* Sobre el contenido (z 1-2) y debajo del menú fijo (50), su desplegable (60)
     y la barra de progreso (100): nunca tapa un menú abierto */
  z-index: 40;
  width: 56px;
  height: 56px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  /* Verde más oscuro: el blanco sobre #16A34A pasa el contraste mínimo de 3:1;
     sobre el verde claro de WhatsApp (#25D366) quedaba en 2:1 */
  background: #16A34A;
  color: #fff;
  text-decoration: none;
  box-shadow: 0 10px 26px rgba(15, 23, 42, .22), 0 3px 8px rgba(15, 23, 42, .14);
  transition: transform .2s ease, box-shadow .2s ease, opacity .2s ease, visibility .2s;
  animation: waEntrada .5s cubic-bezier(.16, 1, .3, 1) .6s backwards;
}
.wa-float svg { width: 30px; height: 30px; display: block; }
.wa-float:hover {
  background: #15803D;
  color: #fff;
  transform: translateY(-3px);
  box-shadow: 0 16px 32px rgba(15, 23, 42, .26), 0 4px 10px rgba(15, 23, 42, .14);
}
.wa-float:focus { outline: none; }
/* Anillo de foco de dos tonos: el blanco se ve sobre el pie oscuro y el azul sobre fondo claro */
.wa-float:focus-visible {
  outline: 3px solid #fff;
  outline-offset: 3px;
  box-shadow: 0 0 0 6px #1e57d8, 0 10px 26px rgba(15, 23, 42, .22);
}
/* Con el menú móvil abierto el flotante se esconde */
#navbar.menu-open ~ .wa-float,
.site-nav.menu-open ~ .wa-float { opacity: 0; visibility: hidden; pointer-events: none; }
/* Que el flotante no tape la última línea del pie al llegar al final de la página */
footer .footer-bottom { padding-bottom: 64px; }
@keyframes waEntrada {
  from { opacity: 0; transform: translateY(12px) scale(.92); }
  to { opacity: 1; transform: none; }
}
@media (max-width: 640px) {
  .wa-float {
    right: calc(16px + env(safe-area-inset-right, 0px));
    bottom: calc(16px + env(safe-area-inset-bottom, 0px));
  }
}
@media (prefers-reduced-motion: reduce) {
  .wa-float { animation: none; transition: none; }
  .wa-float:hover { transform: none; }
}
@media print {
  .wa-float { display: none !important; }
}