/* =========================================================
   Componente: Botão WhatsApp + Modal de agendamento
   - Botão flutuante (.wa-float)
   - Botões de CTA (.btn-wa) com borda animada
   - Modal (#lead-modal) com formulário que monta o link wa.me
   Dependências: nenhuma. Variáveis abaixo podem ser sobrescritas.
   ========================================================= */
:root{
  --wa-primary:   #0E384C;   /* teal escuro (textos/títulos) */
  --wa-accent:    #1E84B5;   /* azul de foco */
  --wa-secondary: #EFF8FF;   /* azul claro de fundo */
  --wa-text:      #527282;   /* texto corrido */
  --wa-divider:   rgba(14,56,76,0.10);
  --wa-radius:    24px;
}

/* ---------- Botão base (caso o projeto não tenha .btn) ---------- */
.btn-wa.btn,
.btn-wa{
  display:inline-flex;align-items:center;justify-content:center;gap:10px;white-space:nowrap;
  font-family:inherit;font-weight:600;cursor:pointer;text-decoration:none;
}

/* ---------- Botão WhatsApp (verde, borda brilhante animada) ---------- */
@property --wa-angle{syntax:'<angle>';initial-value:0deg;inherits:false}
.btn-wa{
  position:relative;color:#fff;overflow:hidden;
  padding:14px 32px;font-size:15px;
  border:2px solid transparent;border-radius:999px;
  background:
    linear-gradient(135deg,#128c7e,#25d366) padding-box,
    conic-gradient(from var(--wa-angle),
      rgba(255,255,255,0) 0%, #4ade80 6%, #ffffff 12%, #4ade80 18%, rgba(255,255,255,0) 26%,
      rgba(255,255,255,0) 50%, #4ade80 56%, #ffffff 62%, #4ade80 68%, rgba(255,255,255,0) 76%) border-box;
  box-shadow:inset 0 0 0 1px rgba(14,107,95,0.55), 0 10px 26px rgba(18,140,126,0.40);
  animation:wa-rotate 4s linear infinite;
  transition:transform .25s ease,box-shadow .25s ease;
}
@keyframes wa-rotate{to{--wa-angle:360deg}}
.btn-wa::after{ /* faixa de brilho que atravessa o botão inteiro */
  content:"";position:absolute;top:0;bottom:0;left:0;width:60%;border-radius:inherit;pointer-events:none;
  background:linear-gradient(100deg,transparent,rgba(255,255,255,0.55),transparent);
  transform:translateX(-180%) skewX(-18deg);animation:wa-shine 3.8s ease-in-out infinite;
}
@keyframes wa-shine{0%,100%{transform:translateX(-180%) skewX(-18deg)}55%{transform:translateX(280%) skewX(-18deg)}}
.btn-wa span,.btn-wa svg{position:relative;z-index:2}
.btn-wa svg{width:22px;height:22px;overflow:visible;flex:none}
.btn-wa:hover{transform:translateY(-3px);box-shadow:inset 0 0 0 1px rgba(14,107,95,0.55), 0 16px 34px rgba(18,140,126,0.55)}
.btn-wa.btn-lg{padding:20px 40px;font-size:18px}
@media (prefers-reduced-motion:reduce){
  .btn-wa{animation:none}
  .btn-wa::after{display:none}
}

/* ---------- WhatsApp flutuante ---------- */
.wa-float{
  position:fixed;right:22px;bottom:calc(22px + env(safe-area-inset-bottom));z-index:60;width:60px;height:60px;
  border:none;padding:0;appearance:none;cursor:pointer;
  border-radius:50%;background:#25D366;display:grid;place-items:center;
  box-shadow:0 12px 30px rgba(37,211,102,0.45);transition:transform .25s ease;
}
.wa-float:hover{transform:scale(1.08)}
.wa-float:focus-visible{outline:3px solid rgba(37,211,102,0.5);outline-offset:3px}
.wa-float svg{width:32px;height:32px;color:#fff}
/* Pulso */
.wa-float::after{content:"";position:absolute;inset:0;border-radius:50%;border:2px solid #25D366;
  animation:wa-float-pulse 2.4s ease-out infinite;pointer-events:none}
@keyframes wa-float-pulse{0%{transform:scale(1);opacity:.7}100%{transform:scale(1.7);opacity:0}}
@media (prefers-reduced-motion:reduce){.wa-float::after{animation:none;display:none}}

/* ---------- Modal de agendamento ---------- */
.modal{position:fixed;inset:0;z-index:100;display:none;align-items:center;justify-content:center;padding:20px}
.modal.open{display:flex}
.modal__overlay{position:absolute;inset:0;background:rgba(14,56,76,0.55);backdrop-filter:blur(4px);animation:wa-fade .25s ease}
.modal__dialog{
  position:relative;background:#fff;border-radius:var(--wa-radius);
  width:100%;max-width:460px;box-shadow:0 30px 80px rgba(14,56,76,0.35);
  padding:36px 34px 32px;animation:wa-pop .3s cubic-bezier(.18,.9,.3,1.2);max-height:92vh;overflow:auto;
}
@keyframes wa-fade{from{opacity:0}to{opacity:1}}
@keyframes wa-pop{from{opacity:0;transform:translateY(16px) scale(.97)}to{opacity:1;transform:none}}
.modal__close{
  position:absolute;top:14px;right:14px;width:38px;height:38px;border:none;cursor:pointer;
  background:var(--wa-secondary);color:var(--wa-primary);border-radius:50%;font-size:22px;line-height:1;
  display:grid;place-items:center;transition:background .2s ease;
}
.modal__close:hover{background:#dceefb}
.modal__head{text-align:center;margin-bottom:22px}
.modal__icon{
  width:60px;height:60px;border-radius:50%;margin:0 auto 14px;display:grid;place-items:center;
  background:linear-gradient(135deg,#25d366,#0fae53);color:#fff;box-shadow:0 10px 24px rgba(37,211,102,0.4);
}
.modal__icon svg{width:32px;height:32px}
.modal__head h3{font-size:23px;color:var(--wa-primary);margin:0 0 8px}
.modal__head p{margin:0;font-size:15px;color:var(--wa-text)}
.modal__form{display:flex;flex-direction:column;gap:14px}
.modal__form label{display:flex;flex-direction:column;gap:6px;font-size:13px;font-weight:600;color:var(--wa-primary)}
.modal__form input,.modal__form select{
  font-family:inherit;font-size:16px;font-weight:400;color:var(--wa-primary); /* >=16px evita zoom automático do iOS no foco */
  padding:13px 15px;border:1.5px solid var(--wa-divider);border-radius:12px;background:#fbfdff;
  transition:border-color .2s ease,box-shadow .2s ease;
}
.modal__form input:focus,.modal__form select:focus{
  outline:none;border-color:var(--wa-accent);box-shadow:0 0 0 3px rgba(30,132,181,0.15);
}
.modal__submit{width:100%;margin-top:6px}
.modal__note{text-align:center;font-size:12px;color:var(--wa-text);margin:14px 0 0}
.modal__consent{flex-direction:row !important;align-items:flex-start;gap:10px !important;font-weight:400 !important;font-size:12.5px !important;color:var(--wa-text) !important;line-height:1.45;cursor:pointer}
.modal__consent input{flex:none;width:18px;height:18px;margin-top:1px;accent-color:#25d366;cursor:pointer}
.modal__consent a{color:var(--wa-accent);font-weight:600;text-decoration:underline}

/* ---------- Mobile ---------- */
@media (max-width:640px){
  .btn-wa{white-space:normal;text-align:center;line-height:1.35;max-width:100%}
  .btn-wa.btn-lg{padding:16px 26px;font-size:16px}
  .wa-float{width:56px;height:56px;right:16px;bottom:calc(16px + env(safe-area-inset-bottom))}
  .modal{padding:14px}
  .modal__dialog{padding:30px 20px 24px;border-radius:18px;max-height:88vh;max-height:88dvh}
  .modal__head h3{font-size:20px}
}