/* ============================================================
   WHATSAPP · botón flotante y asistente
   ------------------------------------------------------------
   El verde de WhatsApp es el único color ajeno a la paleta en toda la página, y
   está puesto a propósito: es un código que la gente reconoce a un metro de
   distancia. Fuera del botón, el panel es del sitio — navy, vidrio y la misma
   tipografía.
   ============================================================ */
#wa{position:fixed;right:clamp(16px,2.2vw,32px);bottom:clamp(16px,2.2vw,32px);
  z-index:420;display:flex;flex-direction:column;align-items:flex-end;gap:14px}

/* ---------- el botón ---------- */
.wa-bt{position:relative;width:clamp(54px,4.4vw,64px);height:clamp(54px,4.4vw,64px);
  border-radius:50%;border:0;cursor:pointer;color:#fff;background:#25D366;
  display:grid;place-items:center;
  box-shadow:0 10px 26px -10px rgba(37,211,102,.7),0 2px 10px rgba(2,13,31,.4);
  transition:transform .5s var(--e),box-shadow .5s var(--e)}
.wa-bt svg{width:58%;height:58%}
.wa-bt:hover{transform:translateY(-3px) scale(1.04);
  box-shadow:0 16px 34px -12px rgba(37,211,102,.85),0 3px 12px rgba(2,13,31,.45)}
/* el pulso: una sola onda lenta, lo justo para que el ojo lo encuentre */
.wa-pt{position:absolute;inset:0;border-radius:50%;pointer-events:none;
  box-shadow:0 0 0 0 rgba(37,211,102,.55);animation:waPulso 3.4s var(--e) infinite}
@keyframes waPulso{
  0%{box-shadow:0 0 0 0 rgba(37,211,102,.5)}
  55%{box-shadow:0 0 0 16px rgba(37,211,102,0)}
  100%{box-shadow:0 0 0 0 rgba(37,211,102,0)}
}
#wa.on .wa-pt{animation:none}

/* ---------- el panel ---------- */
.wa-pan{width:min(360px,calc(100vw - 32px));max-height:min(560px,70svh);
  display:flex;flex-direction:column;overflow:hidden;
  border-radius:clamp(14px,1.4vw,20px);border:1px solid rgba(227,230,235,.14);
  background:rgba(4,17,36,.92);-webkit-backdrop-filter:blur(18px);backdrop-filter:blur(18px);
  box-shadow:0 30px 70px -30px rgba(0,0,0,.8);
  opacity:0;visibility:hidden;transform:translateY(14px) scale(.97);transform-origin:100% 100%;
  transition:opacity .4s var(--e),transform .5s var(--e),visibility .4s}
#wa.on .wa-pan{opacity:1;visibility:visible;transform:none}

.wa-top{display:flex;align-items:center;justify-content:space-between;gap:12px;
  padding:14px 14px 14px 16px;border-bottom:1px solid rgba(227,230,235,.1);
  background:rgba(37,211,102,.08)}
.wa-id{display:grid;grid-template-columns:auto 1fr;gap:2px 10px;align-items:center;color:var(--light)}
.wa-id i{grid-row:1/3;width:30px;height:30px;border-radius:50%;background:#25D366;
  box-shadow:0 0 0 3px rgba(37,211,102,.18)}
.wa-id b{font-size:.92rem;font-weight:500;letter-spacing:-.01em}
.wa-id small{font-size:10px;letter-spacing:.06em;color:rgba(227,230,235,.5)}
.wa-x{background:none;border:0;color:rgba(227,230,235,.6);font-size:22px;line-height:1;
  cursor:pointer;padding:0 4px}
.wa-x:hover{color:var(--light)}

.wa-msgs{flex:1;overflow-y:auto;padding:16px;display:flex;flex-direction:column;gap:9px;
  scrollbar-width:thin}
.wa-m{max-width:86%;padding:10px 13px;border-radius:14px 14px 14px 4px;
  background:rgba(227,230,235,.08);color:rgba(227,230,235,.92);
  font-size:.86rem;line-height:1.5;border:1px solid rgba(227,230,235,.08)}
.wa-m.yo{align-self:flex-end;border-radius:14px 14px 4px 14px;
  background:rgba(37,211,102,.16);border-color:rgba(37,211,102,.22)}
.wa-m.wa-esp{letter-spacing:.2em;color:rgba(227,230,235,.45)}
.wa-go{align-self:flex-start;margin-top:4px;padding:11px 18px;border:0;cursor:pointer;
  border-radius:100px;background:#25D366;color:#04263f;font:inherit;font-size:.8rem;
  font-weight:500;letter-spacing:.06em}
.wa-go:hover{background:#31e173}

.wa-in{display:flex;gap:8px;padding:12px;border-top:1px solid rgba(227,230,235,.1)}
.wa-in input{flex:1;background:rgba(227,230,235,.06);border:1px solid rgba(227,230,235,.12);
  border-radius:100px;padding:11px 16px;color:var(--light);font:inherit;font-size:.85rem}
.wa-in input:focus{outline:none;border-color:rgba(37,211,102,.5)}
.wa-in input:disabled{opacity:.5}
.wa-in button{width:42px;height:42px;flex:none;border:0;border-radius:50%;cursor:pointer;
  background:#25D366;color:#04263f;display:grid;place-items:center}
.wa-in button svg{width:20px;height:20px}

/* ---------- el aviso del formulario ---------- */
.wa-aviso{display:flex;gap:12px;align-items:flex-start;margin-bottom:clamp(20px,2.4vw,30px);
  padding:14px 16px;border-radius:12px;
  border:1px solid rgba(37,211,102,.26);background:rgba(37,211,102,.07);
  font-size:.82rem;line-height:1.6;color:rgba(227,230,235,.8)}
.wa-aviso i{flex:none;width:8px;height:8px;margin-top:8px;border-radius:50%;background:#25D366;
  box-shadow:0 0 0 3px rgba(37,211,102,.2)}
.wa-aviso b{font-weight:500;color:var(--light)}
.on-light .wa-aviso{color:rgba(2,13,31,.75)}
.on-light .wa-aviso b{color:var(--dark)}

@media (max-width:620px){
  .wa-pan{width:calc(100vw - 28px)}
  #wa{right:14px;bottom:14px}
}
@media (prefers-reduced-motion:reduce){ .wa-pt{animation:none} }