/* ==========================================================================
   Web Express · bordes cuadrados en todo el sitio + WhatsApp flotante (28-oct-2026)
   Carga al final de cada página. Excepciones solo donde la forma circular es función:
   botones de opción (radio), avatares y puntos de selección.
   ========================================================================== */
:root { --wx-r-sm: 0; --wx-r-md: 0; --wx-r-lg: 0; --wx-r-pill: 0; --radius: 0; --r: 0; }
*, *::before, *::after { border-radius: 0 !important; }
input[type="radio"], [class*="avatar"], [class*="spinner"], [class*="carousel-dot"], [class*="slider-dot"] { border-radius: 50% !important; }

/* ---------- WhatsApp flotante: negro, ícono lima, cuadrado ---------- */
a.wa-flot {
  position: fixed !important; right: max(16px, env(safe-area-inset-right)); bottom: max(16px, env(safe-area-inset-bottom)); left: auto; top: auto;
  z-index: 60; box-sizing: border-box; display: inline-flex; align-items: stretch; gap: 0; height: 56px; min-height: 56px; width: auto; padding: 0; margin: 0;
  background: #16171b; color: #f2f0ea; border: 2px solid #c9f84a; text-decoration: none;
  font: 700 15px/1 "General", Arial, sans-serif; letter-spacing: 0;
  box-shadow: 4px 4px 0 #c9f84a; transform: none; transition: transform .15s, box-shadow .15s;
}
a.wa-flot svg { box-sizing: content-box; flex: none; width: 28px; height: 28px; padding: 14px; margin: 0; background: transparent; color: #c9f84a; fill: currentColor; }
a.wa-flot span { display: flex; align-items: center; padding: 0 18px 0 2px; color: #f2f0ea; }
a.wa-flot:hover { transform: translate(2px, 2px); box-shadow: 2px 2px 0 #c9f84a !important; }
a.wa-flot:focus-visible { outline: 3px solid #ffd34d; outline-offset: 3px; }
@media (max-width: 640px) {
  a.wa-flot { width: 56px; }
  a.wa-flot span { display: none; }
  /* nada queda tapado por el botón al llegar al final de la página */
  body:has(a.wa-flot) { padding-bottom: 80px; }
}
/* Con el aviso de cookies abierto, el botón sube sobre él */
html.wx-ck-open a.wa-flot { bottom: calc(var(--wx-ck-h, 0px) + 16px); }
/* Tienda: la barra del carrito (móvil) queda debajo del botón */
@media (max-width: 800px) {
  body.shop-page a.wa-flot { bottom: calc(84px + env(safe-area-inset-bottom)); }
  html.wx-ck-open body.shop-page a.wa-flot { bottom: calc(var(--wx-ck-h, 0px) + 84px); }
}
@media (prefers-reduced-motion: reduce) { a.wa-flot { transition: none; } }
