/* ==========================================================================
   WEPIO - Widget flotante de WhatsApp (Neo-brutalista)
   Auto-contenido: no depende de styles_v2.css (usa fallbacks de marca).
   ========================================================================== */
.wa-widget {
  --wa-green: var(--color-cta, #52DE97);
  --wa-green-dark: #1FA971;
  --wa-ink: #111111;
  --wa-bg: #FFFFFF;
  position: fixed;
  right: 20px;
  bottom: 20px;
  z-index: 9990;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 14px;
  font-family: var(--font-heading, 'Outfit', system-ui, sans-serif);
  pointer-events: none;
}

.wa-card.is-open,
.wa-dock {
  pointer-events: auto;
}

/* ---------- Tarjeta de chat (globo) ---------- */
.wa-card {
  position: relative;
  width: min(330px, calc(100vw - 40px));
  padding: 22px 22px 14px;
  background: var(--wa-bg);
  color: var(--wa-ink);
  border: 2px solid var(--wa-ink);
  border-radius: 22px;
  box-shadow: 6px 6px 0 var(--wa-green);
  transform-origin: bottom right;
  transition: opacity .25s ease, transform .3s cubic-bezier(.2, .9, .3, 1.2), visibility .25s;
}
.wa-card[hidden] { display: block; }
.wa-card:not(.is-open) {
  opacity: 0;
  visibility: hidden;
  transform: translateY(14px) scale(.92);
  pointer-events: none;
}
/* Cola del globo apuntando al boton */
.wa-card::after {
  content: "";
  position: absolute;
  right: 22px;
  bottom: -14px;
  width: 22px;
  height: 22px;
  background: var(--wa-bg);
  border-right: 2px solid var(--wa-ink);
  border-bottom: 2px solid var(--wa-ink);
  transform: rotate(45deg) skew(10deg, 10deg);
  border-bottom-right-radius: 4px;
}
.wa-card__avatar {
  display: grid;
  place-items: center;
  width: 48px;
  height: 48px;
  margin-bottom: 14px;
  overflow: hidden;
  background: #0D1117;
  border: 2px solid var(--wa-ink);
  border-radius: 50%;
}
.wa-card__avatar img { width: 100%; height: 100%; padding: 9px; box-sizing: border-box; object-fit: contain; display: block; }
.wa-card__avatar svg { width: 22px; height: 22px; fill: none; stroke: var(--wa-ink); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.wa-card__text {
  margin: 0 0 18px;
  font-size: 1.08rem;
  font-weight: 500;
  line-height: 1.45;
}

/* ---------- Boton animado del chat ---------- */
.wa-cta {
  position: relative;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  width: 100%;
  padding: 14px 18px;
  background: var(--wa-ink);
  color: #fff;
  font: 600 1rem/1 inherit;
  font-family: inherit;
  text-decoration: none;
  border: 2px solid var(--wa-ink);
  border-radius: 12px;
  box-shadow: 4px 4px 0 var(--wa-green);
  transition: transform .15s ease, box-shadow .15s ease;
  animation: wa-cta-nudge 3.2s ease-in-out 1.2s infinite;
}
.wa-cta svg { width: 22px; height: 22px; flex: none; fill: var(--wa-green); }
.wa-cta__arrow { margin-left: auto; transition: transform .2s ease; }
.wa-cta__arrow svg { width: 18px; height: 18px; fill: none; stroke: #fff; stroke-width: 2.5; stroke-linecap: round; stroke-linejoin: round; display: block; }
/* Brillo que cruza el boton */
.wa-cta::before {
  content: "";
  position: absolute;
  top: 0; left: -60%;
  width: 40%; height: 100%;
  background: rgba(255, 255, 255, .22);
  transform: skewX(-20deg);
  animation: wa-cta-shine 3.2s ease-in-out 1.2s infinite;
}
.wa-cta:hover { transform: translate(-2px, -2px); box-shadow: 6px 6px 0 var(--wa-green); animation-play-state: paused; }
.wa-cta:hover .wa-cta__arrow { transform: translateX(4px); }
.wa-cta:active { transform: translate(3px, 3px); box-shadow: 1px 1px 0 var(--wa-green); }
.wa-card__powered { margin: 10px 0 0; text-align: center; font-size: .72rem; color: #6B7280; }
.wa-card__powered b { color: var(--wa-ink); font-weight: 600; }

@keyframes wa-cta-nudge {
  0%, 82%, 100% { transform: translate(0, 0); }
  88% { transform: translate(-2px, -2px); }
  94% { transform: translate(0, 0); }
}
@keyframes wa-cta-shine {
  0%, 60% { left: -60%; }
  100% { left: 130%; }
}

/* ---------- Fila inferior: etiqueta + boton flotante ---------- */
.wa-dock { display: flex; align-items: center; gap: 10px; }
.wa-label {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px 10px 9px 18px;
  background: var(--wa-bg);
  color: var(--wa-ink);
  border: 2px solid var(--wa-ink);
  border-radius: 999px;
  font-size: .95rem;
  font-weight: 500;
  cursor: pointer;
  box-shadow: 3px 3px 0 var(--wa-green);
  animation: wa-label-in .5s cubic-bezier(.2, .9, .3, 1.2) 1.5s both;
  transition: opacity .2s ease, transform .2s ease;
}
.wa-label.is-hidden { opacity: 0; transform: translateX(10px); pointer-events: none; visibility: hidden; }
.wa-label__close {
  display: grid;
  place-items: center;
  width: 20px; height: 20px;
  padding: 0;
  background: var(--wa-ink);
  border: 0;
  border-radius: 50%;
  cursor: pointer;
}
.wa-label__close svg { width: 10px; height: 10px; stroke: #fff; stroke-width: 3; stroke-linecap: round; }
@keyframes wa-label-in {
  from { opacity: 0; transform: translateX(16px) scale(.9); }
  to   { opacity: 1; transform: none; }
}

.wa-fab {
  position: relative;
  display: grid;
  place-items: center;
  width: 58px; height: 58px;
  padding: 0;
  background: var(--wa-green);
  border: 2px solid var(--wa-ink);
  border-radius: 50%;
  cursor: pointer;
  box-shadow: 3px 3px 0 var(--wa-ink);
  transition: transform .15s ease, box-shadow .15s ease;
}
.wa-fab:hover { transform: translate(-2px, -2px); box-shadow: 5px 5px 0 var(--wa-ink); }
.wa-fab:active { transform: translate(2px, 2px); box-shadow: 1px 1px 0 var(--wa-ink); }
.wa-fab svg { width: 30px; height: 30px; transition: transform .3s ease, opacity .2s ease; }
.wa-fab__wa { fill: var(--wa-ink); }
.wa-fab__chev { position: absolute; fill: none; stroke: var(--wa-ink); stroke-width: 2.5; stroke-linecap: round; stroke-linejoin: round; opacity: 0; transform: rotate(-90deg) scale(.6); }
.wa-widget.is-open .wa-fab__wa { opacity: 0; transform: rotate(90deg) scale(.6); }
.wa-widget.is-open .wa-fab__chev { opacity: 1; transform: none; }
/* Pulso para llamar la atencion (solo cerrado) */
.wa-fab::before {
  content: "";
  position: absolute; inset: -2px;
  border-radius: 50%;
  border: 2px solid var(--wa-green);
  animation: wa-ring 2.4s ease-out infinite;
  pointer-events: none;
}
.wa-widget.is-open .wa-fab::before { animation: none; opacity: 0; }
@keyframes wa-ring {
  0%   { transform: scale(1);   opacity: .9; }
  80%, 100% { transform: scale(1.7); opacity: 0; }
}

.wa-widget :focus-visible { outline: 3px solid var(--wa-green-dark); outline-offset: 3px; }

@media (max-width: 480px) {
  .wa-widget { right: 14px; bottom: 14px; }
  .wa-label { font-size: .88rem; padding-left: 14px; }
}
@media (prefers-reduced-motion: reduce) {
  .wa-widget *, .wa-widget *::before { animation: none !important; transition-duration: .01ms !important; }
}