/* =========================================================
   BITSIDEAS — WhatsApp flotante con selector de idioma
   ========================================================= */
/* El contenedor solo envuelve al botón y no intercepta clics:
   el panel se ancla por encima en posición absoluta. */
.wa{position:fixed;right:22px;bottom:22px;z-index:95;pointer-events:none}
.wa__btn,.wa__panel{pointer-events:auto}

/* ---------- Panel de opciones ---------- */
.wa__panel{
  position:absolute;right:0;bottom:calc(100% + 14px);
  width:264px;padding:16px 16px 14px;border-radius:18px;
  background:var(--bg-elev);border:1px solid var(--line);
  box-shadow:0 18px 40px rgba(43,39,51,.18), 0 40px 90px rgba(43,39,51,.16);
  transform-origin:100% 100%;
  opacity:0;visibility:hidden;transform:translateY(14px) scale(.92);
  transition:opacity .3s var(--ease),transform .45s var(--ease-out),visibility .3s;
}
.wa.is-open .wa__panel{opacity:1;visibility:visible;transform:none}

.wa__title{
  font-family:var(--font);font-weight:600;font-size:.86rem;color:var(--ink);
  margin-bottom:4px;
}
.wa__sub{font-size:.76rem;color:var(--muted);margin-bottom:12px;display:block}

.wa__opt{
  display:flex;align-items:center;gap:12px;padding:11px 12px;border-radius:13px;
  border:1px solid var(--line);background:var(--bg);margin-top:8px;
  opacity:0;transform:translateX(14px);
  transition:opacity .35s var(--ease),transform .45s var(--ease-out),
             border-color .3s var(--ease),background .3s var(--ease);
}
.wa.is-open .wa__opt{opacity:1;transform:none}
.wa.is-open .wa__opt:nth-child(3){transition-delay:.06s}
.wa.is-open .wa__opt:nth-child(4){transition-delay:.12s}
.wa__opt:hover{border-color:#25d366;background:color-mix(in srgb,#25d366 8%,var(--bg))}

/* Bandera del idioma, recortada en círculo */
.wa__flag{
  width:38px;height:38px;flex:0 0 auto;border-radius:50%;overflow:hidden;
  display:grid;place-items:center;position:relative;
  box-shadow:0 1px 3px rgba(43,39,51,.24), inset 0 0 0 1px rgba(43,39,51,.12);
  transition:transform .4s var(--ease-out),box-shadow .35s var(--ease);
}
.wa__flag svg{width:150%;height:100%;display:block;object-fit:cover}
.wa__opt:hover .wa__flag{
  transform:scale(1.1) rotate(-6deg);
  box-shadow:0 4px 12px rgba(37,211,102,.4), inset 0 0 0 1.5px #25d366;
}
.wa__opt b{display:block;font-family:var(--font);font-weight:600;font-size:.92rem;color:var(--ink)}
.wa__opt small{font-size:.78rem;color:var(--muted)}

/* ---------- Botón flotante ---------- */
.wa__btn{
  position:relative;display:block;width:58px;height:58px;border-radius:50%;
  display:grid;place-items:center;color:#fff;
  background:linear-gradient(145deg,#2ee06f,#12a54c);
  box-shadow:0 10px 26px rgba(18,140,76,.42);
  transition:transform .45s var(--ease-out),box-shadow .4s var(--ease);
}
.wa__btn:hover{transform:translateY(-4px) scale(1.06);box-shadow:0 16px 34px rgba(18,140,76,.5)}
.wa__btn svg{width:31px;height:31px;fill:currentColor;transition:transform .45s var(--ease-out)}
.wa.is-open .wa__btn{transform:rotate(90deg)}
.wa.is-open .wa__btn svg{transform:scale(.86)}

/* Halo que late para llamar la atención */
.wa__btn::before,.wa__btn::after{
  content:"";position:absolute;inset:0;border-radius:50%;pointer-events:none;
  border:2px solid rgba(37,211,102,.55);animation:waPulse 2.8s var(--ease) infinite;
}
.wa__btn::after{animation-delay:1.4s}
.wa.is-open .wa__btn::before,.wa.is-open .wa__btn::after{animation:none;opacity:0}
@keyframes waPulse{
  0%{transform:scale(1);opacity:.8}
  70%{transform:scale(1.75);opacity:0}
  100%{transform:scale(1.75);opacity:0}
}

/* El botón "volver arriba" se apila encima, con holgura suficiente
   para que el halo del WhatsApp no lo alcance */
.to-top{bottom:104px;z-index:96}

@media (max-width:640px){
  .wa{right:16px;bottom:16px}
  .wa__panel{width:min(80vw,260px)}
  .wa__btn{width:52px;height:52px}
  .wa__btn svg{width:28px;height:28px}
  .to-top{right:16px;bottom:92px;width:42px;height:42px}
}
@media (prefers-reduced-motion:reduce){
  .wa__btn::before,.wa__btn::after{animation:none;opacity:0}
}