/* Botón flotante de WhatsApp (assets/whatsapp.js).
 *
 * Lo cargan site.css y legal.css por igual, y legal.css no define los tokens de
 * color, así que cada valor va literal.
 *
 * Verde oscuro y borde hueso, y no el verde de la marca: el botón se apoya
 * sobre secciones claras y sobre secciones navy, y ningún relleno separa de
 * las dos a 3:1. Medido con la fórmula de WCAG sobre los hex:
 *   glifo blanco sobre #00695B ............ 6,62:1
 *   #00695B sobre hueso #F4F1EA ........... 5,87:1
 *   #00695B sobre navy (1C3255 a 0E1B31) .. 1,94 a 2,60:1  (no alcanza solo)
 *   borde hueso sobre esos navy ........... 11,37 a 15,26:1
 * El #25D366 de la marca da 1,98:1 con el glifo y 1,76:1 contra el hueso.
 */
.wa-float{
  position:fixed;z-index:45;
  /* Se apoya sobre el aviso de cookies mientras esté (pixel.js escribe su alto). */
  right:max(20px,env(safe-area-inset-right,0px));
  bottom:calc(20px + var(--aviso-h,0px) + env(safe-area-inset-bottom,0px));
  box-sizing:border-box;width:56px;height:56px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  background:#00695B;color:#fff;border:2px solid #F4F1EA;text-decoration:none;
  box-shadow:0 2px 4px rgba(14,27,49,.2),0 10px 24px -6px rgba(14,27,49,.35);
}
.wa-float:hover{background:#00574B;color:#fff}

/* Dos anillos: el hueso se ve sobre navy y el navy se ve sobre hueso. El
   contorno transparente es para el modo de alto contraste. El radio se repite
   porque `a:focus-visible` de site.css y legal.css lo pisa con 4px. */
.wa-float:focus-visible{
  color:#fff;border-radius:50%;outline:2px solid transparent;
  box-shadow:0 0 0 3px #F4F1EA,0 0 0 6px #1C3255;
}

@media (prefers-reduced-motion:no-preference){
  .wa-float{transition:bottom .28s cubic-bezier(.22,.68,.28,1),transform .15s,background-color .15s}
  .wa-float:hover{transform:translateY(-2px)}
}

@media print{.wa-float{display:none}}