/* =====================================================================
   08 · FLOTANTES
   - WhatsApp flotante: se entiende en MEDIO SEGUNDO → glifo real + texto,
     también en móvil. Si lleva retrato, el glifo va como insignia.
   - Toast de prueba social: sans normal (NO la tipografía del logo),
     descartable, no insistente, nunca encima del botón de WhatsApp.
   ===================================================================== */

.wa-float{
  position:fixed; z-index:40; right:clamp(14px, 2.4vw, 28px); bottom:clamp(14px, 2.4vw, 28px);
  display:inline-flex; align-items:center; gap:12px;
  height:var(--wa-h); padding:0 20px 0 6px;
  background:var(--c-whatsapp); color:#0B3D1E; border-radius:var(--radio-pill);
  box-shadow:var(--sombra-flotante);
  font-family:var(--f-texto); font-size:.92rem; font-weight:700; text-decoration:none; white-space:nowrap;
  transform:translateY(0); transition:transform var(--t-rapida) var(--ease), box-shadow var(--t-rapida) var(--ease);
}
.wa-float:hover{ transform:translateY(-3px); }
/* Sin retrato: solo glifo */
.wa-float .wa-glifo{ width:44px; height:44px; display:grid; place-items:center; border-radius:50%; background:rgba(255,255,255,.22); }
.wa-float .wa-glifo svg{ width:26px; height:26px; fill:#fff; }
/* Con retrato: foto circular + insignia de WhatsApp en la esquina */
.wa-float .wa-foto{ position:relative; width:44px; height:44px; flex-shrink:0; }
.wa-float .wa-foto img{ width:100%; height:100%; border-radius:50%; object-fit:cover; object-position:50% 20%; border:2px solid #fff; }
.wa-float .wa-foto .wa-insignia{
  position:absolute; right:-4px; bottom:-4px; width:22px; height:22px; border-radius:50%;
  background:var(--c-whatsapp); border:2px solid #fff; display:grid; place-items:center;
}
.wa-float .wa-foto .wa-insignia svg{ width:12px; height:12px; fill:#fff; }
.wa-float .wa-texto small{ display:block; font-size:.7rem; font-weight:600; opacity:.75; letter-spacing:.02em; }
/* Pulso discreto una sola vez al aparecer (no insistente) */
.js .wa-float{ animation:waEntra .7s var(--ease-salida) 1.2s both; }
@keyframes waEntra{ from{ opacity:0; transform:translateY(20px) scale(.9); } }
/* Variante de marca: botón en el acento de la marca (el glifo sigue siendo el de WhatsApp) */
.wa-float--marca{ background:var(--c-oscuro); color:var(--c-sobre-oscuro); }

@media (max-width:600px){
  .wa-float{ height:52px; padding-right:16px; font-size:.86rem; }   /* texto visible también en móvil */
  .wa-float .wa-texto small{ display:none; }
}

/* ---------- Toast de prueba social ---------- */
.toast{
  position:fixed; z-index:39; left:clamp(14px, 2.4vw, 28px); bottom:clamp(14px, 2.4vw, 28px);
  display:flex; align-items:center; gap:12px; max-width:340px;
  padding:12px 40px 12px 12px; border-radius:14px;
  background:var(--c-fondo); color:var(--c-texto); box-shadow:var(--sombra-flotante);
  font-family:var(--f-texto); font-size:.84rem; line-height:1.35;
  opacity:0; transform:translateY(16px); pointer-events:none;
  transition:opacity .5s var(--ease), transform .5s var(--ease);
}
.toast.is-visible{ opacity:1; transform:none; pointer-events:auto; }
.toast-avatar{ width:38px; height:38px; flex-shrink:0; border-radius:50%; display:grid; place-items:center; background:var(--c-fondo-alt); color:var(--c-acento-2); font-weight:700; }
.toast b{ font-weight:600; font-style:normal; font-family:var(--f-texto); }   /* NO serif cursiva */
.toast small{ display:block; opacity:.6; font-size:.74rem; margin-top:2px; }
.toast-cerrar{ position:absolute; top:6px; right:6px; width:28px; height:28px; border:0; background:none; border-radius:50%; opacity:.5; display:grid; place-items:center; }
.toast-cerrar:hover{ opacity:1; background:var(--c-fondo-alt); }
.toast-cerrar svg{ width:12px; height:12px; }
/* Móvil: el toast sube POR ENCIMA del botón de WhatsApp, a todo el ancho */
@media (max-width:600px){
  .toast{ left:12px; right:12px; max-width:none; bottom:calc(52px + 26px); }
}
@media (prefers-reduced-motion:reduce){
  .js .wa-float{ animation:none; }
  .toast{ transition:opacity .2s; transform:none; }
}