/* ═══════════════════════════════════════════════════════════════
   Bot de WhatsApp — banner, botón flotante y aviso.
   Verde WhatsApp sobre el tema oscuro. El botón se sube en móvil
   para no quedar debajo de la barra de navegación inferior.
   ═══════════════════════════════════════════════════════════════ */

/* ── Banner (bajo la cabecera) ─────────────────────────────────── */
#wa-banner{position:relative;z-index:40;width:100%;
  background:linear-gradient(90deg,rgba(16,110,70,.30),rgba(37,211,102,.18),rgba(16,110,70,.30));
  border-bottom:1px solid rgba(37,211,102,.34);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);}
.wa-banner-inner{max-width:1180px;margin:0 auto;padding:10px 16px;display:flex;align-items:center;gap:14px;}
.wa-banner-left{display:flex;align-items:center;gap:12px;flex:1;min-width:0;}
.wa-banner-icon{flex:0 0 auto;width:40px;height:40px;border-radius:50%;display:grid;place-items:center;color:#fff;
  background:linear-gradient(135deg,#25D366,#128C7E);box-shadow:0 6px 18px rgba(37,211,102,.4);}
.wa-banner-copy{min-width:0;}
.wa-banner-t{color:#fff;font-weight:800;font-size:14px;line-height:1.25;display:flex;align-items:center;gap:8px;flex-wrap:wrap;}
.wa-tag{background:#34d399;color:#06301f;font-size:9px;font-weight:900;letter-spacing:.08em;
  padding:2px 6px;border-radius:5px;text-transform:uppercase;}
.wa-banner-s{color:#bdf0d4;font-size:12px;margin-top:2px;line-height:1.4;}
.wa-banner-cta{flex:0 0 auto;background:#25D366;color:#04150c!important;font-weight:800;font-size:13px;
  padding:9px 16px;border-radius:11px;text-decoration:none!important;white-space:nowrap;
  box-shadow:0 8px 20px rgba(37,211,102,.38);transition:transform .18s,background .18s;}
.wa-banner-cta:hover{background:#2ee672;transform:translateY(-1px);}
.wa-banner-x{flex:0 0 auto;background:none;border:none;color:#8fd6b0;font-size:20px;line-height:1;
  cursor:pointer;padding:2px 4px;opacity:.75;transition:opacity .2s;}
.wa-banner-x:hover{opacity:1;color:#fff;}

/* ── Botón flotante ────────────────────────────────────────────── */
#wa-fab{position:fixed;left:22px;bottom:22px;z-index:9998;width:60px;height:60px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;color:#fff;background:#25D366;
  box-shadow:0 10px 26px rgba(37,211,102,.45);text-decoration:none!important;
  transition:transform .25s,box-shadow .25s;}
#wa-fab:hover{transform:scale(1.08);box-shadow:0 14px 34px rgba(37,211,102,.6);}
.wa-fab-badge{position:absolute;bottom:-7px;left:50%;transform:translateX(-50%);background:#0f9d58;color:#fff;
  font-size:8.5px;font-weight:800;letter-spacing:.03em;padding:2px 7px;border-radius:8px;
  border:2px solid #0b0b0f;white-space:nowrap;}

/* ── Aviso emergente ───────────────────────────────────────────── */
#wa-promo-toast{position:fixed;left:22px;bottom:96px;z-index:9997;display:none;max-width:290px;
  background:#12141a;color:#e7e7ea;border:1px solid rgba(37,211,102,.35);border-radius:16px;
  padding:15px 17px;box-shadow:0 18px 44px rgba(0,0,0,.6);font-size:13px;line-height:1.5;}
#wa-promo-toast.is-open{display:block;animation:waIn .38s ease;}
@keyframes waIn{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
.wa-toast-t{font-weight:800;color:#fff;font-size:13.5px;margin-bottom:5px;display:flex;align-items:center;gap:7px;}
.wa-toast-tag{background:#25D366;color:#04150c;font-size:10px;font-weight:900;padding:2px 6px;border-radius:6px;}
.wa-toast-s{color:#a9b0ba;margin-bottom:12px;}
.wa-toast-cta{display:inline-block;background:#25D366;color:#04150c!important;font-weight:800;font-size:12.5px;
  padding:9px 16px;border-radius:10px;text-decoration:none!important;}
.wa-toast-cta:hover{background:#2ee672;}
.wa-toast-x{position:absolute;top:7px;right:10px;background:none;border:none;color:#6b7280;font-size:17px;
  line-height:1;cursor:pointer;padding:0;}
.wa-toast-x:hover{color:#fff;}

/* ── Móvil: subir para no tapar la barra inferior ──────────────── */
@media (max-width:760px){
  .wa-banner-inner{padding:9px 12px;gap:10px;}
  .wa-banner-icon{width:34px;height:34px;}
  .wa-banner-t{font-size:12.5px;} .wa-banner-s{font-size:11px;}
  .wa-banner-cta{font-size:12px;padding:8px 12px;}
  #wa-fab{width:52px;height:52px;left:14px;bottom:calc(76px + env(safe-area-inset-bottom,0px));}
  /* La etiqueta es mucho más ancha que el botón y se montaba sobre el titular
     del hero. El botón verde ya se reconoce sin texto. */
  .wa-fab-badge{display:none;}
  #wa-promo-toast{left:12px;right:12px;max-width:none;bottom:calc(140px + env(safe-area-inset-bottom,0px));}
}