/* ============================================================
   Dr. Luís Fernando Goulart · CliniAmp
   Paleta verde-petróleo (fachada real + material Self) + navy do jaleco
   ============================================================ */

:root{
  --ink:#06211B;
  --deep:#0A3B2E;
  --deep-2:#0D4A3A;
  --teal:#14614C;
  --mint:#6FE3BA;
  --mint-soft:#BFEFDB;
  --ice:#F1F8F5;
  --white:#FFFFFF;
  --navy:#1E2A56;
  --muted:#5E726C;
  --muted-light:#A9C4BB;
  --line:rgba(10,59,46,.12);
  --line-light:rgba(255,255,255,.14);

  --serif:'Fraunces',Georgia,'Times New Roman',serif;
  --sans:'Inter',ui-sans-serif,system-ui,-apple-system,'Segoe UI',sans-serif;

  --max:1180px;
  --pad:clamp(20px,5vw,48px);
  --r:22px;
  --r-sm:14px;
  --shadow:0 24px 70px rgba(6,33,27,.16);
  --shadow-sm:0 10px 30px rgba(6,33,27,.10);
}

*,*::before,*::after{box-sizing:border-box}
html{overflow-x:hidden;scroll-behavior:smooth;-webkit-text-size-adjust:100%}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}

body{
  margin:0;
  overflow-x:clip;
  max-width:100vw;
  font-family:var(--sans);
  font-size:17px;
  line-height:1.6;
  color:var(--ink);
  background:var(--white);
  -webkit-font-smoothing:antialiased;
}

img{max-width:100%;height:auto;display:block}
a{color:inherit}
button{font:inherit}

.wrap{width:100%;max-width:var(--max);margin:0 auto;padding-inline:var(--pad)}
.wrap--narrow{max-width:820px}
.center{text-align:center}

/* ---------- Tipografia ---------- */
.eyebrow{
  font-size:.72rem;font-weight:600;letter-spacing:.18em;text-transform:uppercase;
  color:var(--mint);margin:0 0 18px;
}
.eyebrow--dark{color:var(--teal)}

.h2{
  font-family:var(--serif);
  font-weight:400;
  font-size:clamp(2.1rem,6.4vw,4.4rem);
  line-height:1.02;
  letter-spacing:-.025em;
  margin:0 0 28px;
  color:var(--ink);
  text-wrap:balance;
}
.h2--light{color:var(--white)}
.h2 em{font-style:italic;color:var(--teal);font-weight:300}
.h2--light em{color:var(--mint)}

.lede{
  font-size:clamp(1.02rem,2.1vw,1.22rem);
  line-height:1.62;
  color:var(--muted-light);
  max-width:60ch;
  margin:0 0 30px;
}
.lede--dark{color:var(--muted)}

/* ---------- Botões ---------- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  min-height:48px;padding:14px 26px;
  border:0;border-radius:999px;
  background:var(--mint);color:var(--ink);
  font-size:.96rem;font-weight:600;letter-spacing:-.01em;
  text-decoration:none;cursor:pointer;
  transition:transform .2s ease,box-shadow .2s ease,background .2s ease;
  box-shadow:0 10px 26px rgba(111,227,186,.28);
}
.btn:hover{transform:translateY(-2px);background:#84EAC6;box-shadow:0 16px 34px rgba(111,227,186,.36)}
.btn:active{transform:translateY(0)}
.btn--lg{min-height:56px;padding:17px 34px;font-size:1.02rem}
.btn--sm{min-height:42px;padding:10px 20px;font-size:.88rem}
.btn--full{width:100%}
.btn--ghost{
  background:transparent;color:var(--white);
  border:1px solid rgba(255,255,255,.36);box-shadow:none;
}
.btn--ghost:hover{background:rgba(255,255,255,.1);border-color:rgba(255,255,255,.6)}

/* ---------- NAV ---------- */
.nav{
  position:fixed;top:0;left:0;right:0;z-index:80;
  transition:background .3s ease,box-shadow .3s ease,backdrop-filter .3s ease;
}
.nav__inner{
  max-width:var(--max);margin:0 auto;padding:14px var(--pad);
  display:flex;align-items:center;gap:26px;
}
.nav__brand{display:flex;align-items:center;gap:11px;text-decoration:none;margin-right:auto;min-width:0}
.nav__mark{width:26px;height:30px;color:var(--mint);flex:none}
.nav__mark svg{width:100%;height:100%}
.nav__name{display:flex;flex-direction:column;line-height:1.2;min-width:0}
.nav__name strong{
  font-family:var(--serif);font-weight:500;font-size:.98rem;
  color:var(--white);letter-spacing:-.01em;white-space:nowrap;
}
.nav__name small{font-size:.68rem;color:var(--muted-light);letter-spacing:.04em;white-space:nowrap}

.nav__links{display:flex;gap:26px}
.nav__links a{
  font-size:.88rem;color:rgba(255,255,255,.82);text-decoration:none;
  position:relative;padding-block:6px;transition:color .2s ease;white-space:nowrap;
}
.nav__links a::after{
  content:'';position:absolute;left:0;bottom:0;width:0;height:1px;
  background:var(--mint);transition:width .25s ease;
}
.nav__links a:hover{color:var(--white)}
.nav__links a:hover::after{width:100%}

.nav.is-stuck{
  background:rgba(6,33,27,.86);
  backdrop-filter:saturate(1.6) blur(14px);
  -webkit-backdrop-filter:saturate(1.6) blur(14px);
  box-shadow:0 1px 0 rgba(255,255,255,.07);
}

.nav__burger{
  display:none;width:44px;height:44px;border:0;background:transparent;
  cursor:pointer;flex-direction:column;justify-content:center;gap:5px;padding:0 10px;
}
.nav__burger span{display:block;height:2px;background:var(--white);border-radius:2px;transition:transform .25s,opacity .2s}
.nav__burger[aria-expanded="true"] span:nth-child(1){transform:translateY(7px) rotate(45deg)}
.nav__burger[aria-expanded="true"] span:nth-child(2){opacity:0}
.nav__burger[aria-expanded="true"] span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}

.nav__drawer{
  display:none;flex-direction:column;gap:4px;
  padding:10px var(--pad) 26px;
  background:rgba(6,33,27,.97);
  backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);
}
.nav__drawer a{
  color:rgba(255,255,255,.9);text-decoration:none;font-size:1rem;
  padding:13px 0;border-bottom:1px solid var(--line-light);
}
.nav__drawer .btn{margin-top:18px}
.nav__drawer.is-open{display:flex}

/* ---------- HERO ---------- */
.hero{
  position:relative;
  min-height:100svh;
  display:flex;align-items:center;
  overflow:hidden;
  background:var(--ink);
}
.hero__bg{position:absolute;inset:0}
.hero__bg img{width:100%;height:100%;object-fit:cover;object-position:center right}
.hero__veil{
  position:absolute;inset:0;
  background:
    linear-gradient(100deg,rgba(6,33,27,.94) 0%,rgba(6,33,27,.82) 34%,rgba(6,33,27,.30) 58%,rgba(6,33,27,.06) 78%),
    linear-gradient(to top,rgba(6,33,27,.72) 0%,transparent 42%);
}
.hero__content{
  position:relative;z-index:2;
  width:100%;max-width:var(--max);margin:0 auto;
  padding:130px var(--pad) 70px;
}
.hero__title{
  font-family:var(--serif);
  font-weight:400;
  font-size:clamp(2.5rem,6.6vw,5.5rem);
  line-height:.98;
  letter-spacing:-.032em;
  color:var(--white);
  margin:0 0 26px;
  max-width:16ch;
  text-wrap:balance;
}
.hero__title em{display:block;font-style:italic;font-weight:300;color:var(--mint)}
.hero__sub{
  font-size:clamp(1.02rem,2vw,1.18rem);
  line-height:1.6;color:rgba(255,255,255,.84);
  max-width:46ch;margin:0 0 34px;
}
.hero__cta{display:flex;flex-wrap:wrap;gap:13px;margin-bottom:38px}
.hero__seals{
  list-style:none;display:flex;flex-wrap:wrap;gap:10px;margin:0;padding:0;
}
.hero__seals li{
  font-size:.76rem;font-weight:500;letter-spacing:.04em;
  color:rgba(255,255,255,.86);
  padding:8px 15px;border-radius:999px;
  border:1px solid rgba(255,255,255,.24);
  background:rgba(255,255,255,.06);
  backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);
}

/* ---------- Seções ---------- */
.sec{padding:clamp(72px,10vw,140px) 0;position:relative}
.sec--white{background:var(--white)}
.sec--ice{background:var(--ice)}
.sec--deep{background:var(--deep);color:var(--white)}
.sec--cta{
  background:
    radial-gradient(120% 90% at 50% 0%,var(--deep-2) 0%,var(--ink) 72%);
  color:var(--white);
}
/* transição suave entre blocos claros e escuros */
.sec--deep::before,.sec--cta::before{
  content:'';position:absolute;top:-1px;left:0;right:0;height:70px;
  background:linear-gradient(to bottom,var(--ice),transparent);
  opacity:.10;pointer-events:none;
}

/* ---------- Dor ---------- */
.pains{list-style:none;margin:0 0 34px;padding:0;display:grid;gap:2px;max-width:70ch}
.pains li{
  position:relative;padding:19px 0 19px 42px;
  border-bottom:1px solid var(--line);
  font-size:clamp(1rem,2vw,1.14rem);color:var(--ink);
}
.pains li::before{
  content:'';position:absolute;left:6px;top:29px;
  width:14px;height:2px;background:var(--teal);border-radius:2px;
}
.pains__close{
  font-size:clamp(1.06rem,2.2vw,1.28rem);
  font-family:var(--serif);font-style:italic;font-weight:300;
  color:var(--teal);max-width:52ch;margin:0;
}

/* ---------- Cards ---------- */
.cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:16px;margin-top:44px}
.card{
  padding:30px 26px 32px;border-radius:var(--r);
  background:rgba(255,255,255,.055);
  border:1px solid var(--line-light);
  transition:transform .3s ease,background .3s ease,border-color .3s ease;
}
.card:hover{transform:translateY(-5px);background:rgba(255,255,255,.09);border-color:rgba(111,227,186,.36)}
.card__num{
  display:block;font-family:var(--serif);font-size:1.7rem;font-style:italic;
  font-weight:300;color:var(--mint);opacity:.65;margin-bottom:14px;
}
.card h3{font-size:1.08rem;font-weight:600;margin:0 0 9px;color:var(--white);letter-spacing:-.01em}
.card p{margin:0;font-size:.95rem;color:var(--muted-light);line-height:1.55}

/* ---------- Autoridade ---------- */
.authority{display:grid;grid-template-columns:1.15fr .85fr;gap:clamp(32px,5vw,70px);align-items:center}
.authority .h2,.about .h2,.invest .h2,.local .h2{font-size:clamp(2rem,4.4vw,3.5rem)}
.facts{display:grid;grid-template-columns:1fr 1fr;gap:1px;margin:38px 0 0;background:var(--line);border-top:1px solid var(--line)}
.facts>div{background:var(--white);padding:20px 4px 20px 0}
.facts{border-bottom:1px solid var(--line)}
.facts dt{font-size:.72rem;letter-spacing:.14em;text-transform:uppercase;color:var(--teal);margin-bottom:6px}
.facts dd{margin:0;font-size:1.02rem;font-weight:500;color:var(--ink);line-height:1.35}
.authority__img{margin:0}
.authority__img img{width:100%;border-radius:var(--r);box-shadow:var(--shadow);aspect-ratio:4/5;object-fit:cover}
.authority__img figcaption{margin-top:14px;font-size:.84rem;color:var(--muted);line-height:1.5}

/* ---------- Steps ---------- */
.steps{list-style:none;counter-reset:s;margin:48px 0 0;padding:0;display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:2px}
.steps li{position:relative;padding:34px 24px 34px 0;border-top:2px solid var(--teal)}
.steps__n{
  display:block;font-family:var(--serif);font-size:2.6rem;font-style:italic;font-weight:300;
  color:var(--teal);opacity:.4;line-height:1;margin-bottom:16px;
}
.steps h3{font-size:1.08rem;font-weight:600;margin:0 0 9px;letter-spacing:-.01em}
.steps p{margin:0;font-size:.95rem;color:var(--muted);line-height:1.55}

/* ---------- Sobre ---------- */
.about{display:grid;grid-template-columns:.85fr 1.15fr;gap:clamp(32px,5vw,70px);align-items:center}
.about__img{margin:0}
.about__img img{width:100%;border-radius:var(--r);aspect-ratio:1/1;object-fit:cover;box-shadow:var(--shadow)}
.sign{
  font-family:var(--serif);font-size:1.2rem;font-style:italic;font-weight:300;
  color:var(--mint);margin:32px 0 0;display:flex;flex-direction:column;gap:5px;
}
.sign small{font-family:var(--sans);font-style:normal;font-size:.78rem;letter-spacing:.08em;color:var(--muted-light)}

/* ---------- Avaliações ---------- */
.reviews{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:18px;margin-top:44px;align-items:start}
.reviews blockquote{
  margin:0;padding:30px 28px;border-radius:var(--r);
  background:var(--ice);border:1px solid var(--line);
}
.stars{color:#E8B33A;font-size:.94rem;letter-spacing:.14em;margin-bottom:14px}
.reviews p{margin:0 0 18px;font-size:.98rem;line-height:1.6;color:var(--ink)}
.reviews cite{font-style:normal;font-size:.86rem;font-weight:600;color:var(--teal)}
.reviews__note{margin:22px 0 0;font-size:.8rem;color:var(--muted)}

/* ---------- Tratamentos ---------- */
.treats{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:2px;margin-top:44px;background:var(--line)}
.treats article{background:var(--ice);padding:32px 26px}
.treats h3{font-family:var(--serif);font-weight:400;font-size:1.3rem;margin:0 0 10px;letter-spacing:-.015em}
.treats p{margin:0;font-size:.94rem;color:var(--muted);line-height:1.55}

/* ---------- Investimento ---------- */
.invest{display:grid;grid-template-columns:.9fr 1.1fr;gap:clamp(28px,5vw,64px);align-items:start}
.invest__list{list-style:none;margin:26px 0 0;padding:0;display:grid;gap:2px}
.invest__list li{
  position:relative;padding:16px 0 16px 34px;border-bottom:1px solid var(--line);
  font-size:1rem;color:var(--ink);
}
.invest__list li::before{
  content:'✓';position:absolute;left:0;top:16px;color:var(--teal);font-weight:700;font-size:.94rem;
}

/* ---------- FAQ ---------- */
.faq{margin-top:44px;border-top:1px solid var(--line)}
.faq details{border-bottom:1px solid var(--line)}
.faq summary{
  list-style:none;cursor:pointer;padding:23px 44px 23px 0;position:relative;
  font-size:clamp(1rem,2vw,1.1rem);font-weight:500;color:var(--ink);
}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{
  content:'+';position:absolute;right:8px;top:50%;transform:translateY(-50%);
  font-size:1.5rem;font-weight:300;color:var(--teal);transition:transform .25s ease;
}
.faq details[open] summary::after{transform:translateY(-50%) rotate(45deg)}
.faq p{margin:0 0 24px;font-size:.99rem;line-height:1.65;color:var(--muted);max-width:64ch}

/* ---------- CTA final ---------- */
.sec--cta .lede{margin-left:auto;margin-right:auto}

/* ---------- Localização ---------- */
.local{display:grid;grid-template-columns:1fr 1fr;gap:clamp(30px,5vw,64px);align-items:start}
.local__list{margin:32px 0 0;padding:0;display:grid;gap:1px;background:var(--line);border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.local__list>div{background:var(--white);padding:18px 0}
.local__list dt{font-size:.72rem;letter-spacing:.14em;text-transform:uppercase;color:var(--teal);margin-bottom:6px}
.local__list dd{margin:0;font-size:1rem;color:var(--ink);line-height:1.5}
.local__list a{color:var(--teal);text-decoration:none;font-weight:500}
.local__list a:hover{text-decoration:underline}
.local__facade{margin:32px 0 0}
.local__facade img{width:100%;border-radius:var(--r-sm);box-shadow:var(--shadow-sm)}
.local__map{border-radius:var(--r);overflow:hidden;box-shadow:var(--shadow-sm);min-height:420px;height:100%}
.local__map iframe{width:100%;height:100%;min-height:420px;border:0;display:block}

/* ---------- Footer ---------- */
.foot{background:var(--ink);color:var(--white);padding:56px 0 34px}
.foot__inner{display:flex;flex-wrap:wrap;gap:26px;justify-content:space-between;align-items:flex-start}
.foot__inner>div:first-child{display:flex;flex-direction:column;gap:6px}
.foot strong{font-family:var(--serif);font-weight:500;font-size:1.1rem;letter-spacing:-.01em}
.foot span{font-size:.86rem;color:var(--muted-light)}
.foot__links{display:flex;gap:22px}
.foot__links a{font-size:.88rem;color:var(--mint);text-decoration:none}
.foot__links a:hover{text-decoration:underline}
.foot__legal{
  max-width:var(--max);margin:38px auto 0;padding:22px var(--pad) 0;
  border-top:1px solid var(--line-light);
  font-size:.76rem;color:rgba(255,255,255,.45);line-height:1.6;
}

/* ---------- FAB ---------- */
.fab{
  display:none;position:fixed;left:14px;right:14px;bottom:14px;z-index:70;
  min-height:54px;border:0;border-radius:999px;
  background:var(--mint);color:var(--ink);
  font-size:1rem;font-weight:600;cursor:pointer;
  box-shadow:0 12px 34px rgba(6,33,27,.34);
}

/* ---------- Modal ---------- */
.modal{position:fixed;inset:0;z-index:200;display:grid;place-items:center;padding:16px}
.modal[hidden]{display:none}
.modal__overlay{position:absolute;inset:0;background:rgba(6,33,27,.68);backdrop-filter:blur(4px);-webkit-backdrop-filter:blur(4px)}
.modal__box{
  position:relative;width:100%;max-width:480px;max-height:92svh;overflow-y:auto;
  background:var(--white);border-radius:var(--r);padding:36px 30px 30px;
  box-shadow:var(--shadow);
  animation:pop .3s cubic-bezier(.2,.8,.3,1);
}
@keyframes pop{from{opacity:0;transform:translateY(14px) scale(.98)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){.modal__box{animation:none}}
.modal__x{
  position:absolute;top:10px;right:12px;width:42px;height:42px;
  border:0;background:transparent;font-size:1.9rem;line-height:1;
  color:var(--muted);cursor:pointer;border-radius:50%;
}
.modal__x:hover{background:var(--ice);color:var(--ink)}
.modal__box h3{
  font-family:var(--serif);font-weight:400;font-size:1.9rem;line-height:1.06;
  letter-spacing:-.02em;margin:0 0 12px;
}
.modal__box h3 em{font-style:italic;color:var(--teal);font-weight:300}
.modal__sub{margin:0 0 24px;font-size:.94rem;color:var(--muted);line-height:1.55}
#lead-form{display:grid;gap:16px}
#lead-form label{display:grid;gap:7px}
#lead-form span{font-size:.8rem;font-weight:600;letter-spacing:.02em;color:var(--ink)}
#lead-form input,#lead-form select{
  width:100%;min-height:50px;padding:13px 15px;
  border:1px solid var(--line);border-radius:var(--r-sm);
  font-family:var(--sans);font-size:1rem;color:var(--ink);background:var(--white);
  transition:border-color .2s ease,box-shadow .2s ease;
}
#lead-form input:focus,#lead-form select:focus{
  outline:0;border-color:var(--teal);box-shadow:0 0 0 3px rgba(20,97,76,.12);
}
#lead-form .err{border-color:#C4453C;box-shadow:0 0 0 3px rgba(196,69,60,.1)}
.modal__legal{margin:2px 0 0;font-size:.74rem;color:var(--muted);line-height:1.5;text-align:center}
.iti{width:100%}
.done{text-align:center;padding:14px 0}
.done__mark{
  width:60px;height:60px;margin:0 auto 20px;border-radius:50%;
  background:var(--mint);color:var(--ink);
  display:grid;place-items:center;font-size:1.7rem;font-weight:700;
}
.done h3{margin-bottom:10px}
.done p{margin:0 0 24px;font-size:.98rem;color:var(--muted);line-height:1.6}

/* ---------- Reveal ---------- */
[data-r]{opacity:0;transform:translateY(18px);transition:opacity .6s ease,transform .6s cubic-bezier(.2,.8,.3,1)}
[data-r].is-in{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){
  [data-r]{opacity:1;transform:none;transition:none}
  .btn,.card{transition:none}
}

/* ============================================================
   RESPONSIVO
   ============================================================ */
@media (max-width:1024px){
  .authority,.about,.invest,.local{grid-template-columns:1fr}
  .about__img{order:2;max-width:380px}
  .local__map{min-height:340px}
  .local__map iframe{min-height:340px}
}

@media (max-width:860px){
  .nav__links{display:none}
  .nav__inner .btn--sm{display:none}
  .nav__burger{display:flex}
  .nav{background:rgba(6,33,27,.86);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px)}
}

@media (max-width:767px){
  body{font-size:16px}
  /* hero mobile: texto em campo limpo em cima, o doutor ancorado embaixo */
  .hero{min-height:100svh;background:var(--ink);justify-content:flex-start}
  .hero__bg{inset:auto 0 0 0;height:70%}
  .hero__bg img{height:100%;object-fit:cover;object-position:center top}
  .hero__veil{
    background:
      linear-gradient(to bottom,var(--ink) 0%,var(--ink) 26%,rgba(6,33,27,.86) 40%,rgba(6,33,27,.30) 62%,rgba(6,33,27,.55) 86%,rgba(6,33,27,.88) 100%);
  }
  .hero__content{padding:98px var(--pad) 112px;align-self:flex-start}
  .hero__title{font-size:clamp(2.3rem,10vw,3.2rem)}
  .hero__sub{font-size:1rem;max-width:34ch;margin-bottom:22px}
  /* selos sobem pro campo limpo; os botões é que ficam sobre a cena */
  .hero__content{display:flex;flex-direction:column}
  .eyebrow{order:1}
  .hero__title{order:2}
  .hero__sub{order:3}
  .hero__seals{order:4;margin-bottom:26px}
  .hero__cta{order:5;margin-bottom:0}
  .hero__title{max-width:100%}
  .hero__cta{flex-direction:column;align-items:stretch}
  .hero__cta .btn{width:100%}
  .facts{grid-template-columns:1fr}
  .steps li{padding:26px 0 26px 0}
  .fab{display:block}
  .foot__inner{flex-direction:column}
  .modal__box{padding:30px 22px 24px}
  .modal__box h3{font-size:1.6rem}
}

@media (max-width:400px){
  .nav__name small{display:none}
  .hero__seals li{font-size:.7rem;padding:7px 12px}
}

/* Botão flutuante de WhatsApp — o caminho de fuga de quem não quer preencher
   formulário nenhum. Fica acima do sticky bar do mobile. */
.whatsapp-float {
  position: fixed;
  right: 18px;
  bottom: 18px;
  z-index: 60;
  width: 56px;
  height: 56px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: #25D366;
  color: #fff;
  box-shadow: 0 8px 24px rgba(0, 0, 0, .28);
  transition: transform .2s ease;
}
.whatsapp-float svg { width: 30px; height: 30px; }
.whatsapp-float:hover { transform: scale(1.06); }
@media (max-width: 640px) {
  .whatsapp-float { bottom: 84px; width: 52px; height: 52px; }
  .whatsapp-float svg { width: 28px; height: 28px; }
}
@media (prefers-reduced-motion: reduce) { .whatsapp-float { transition: none; } }


/* Widget de conversa do WhatsApp — molde CliniAmp
   ------------------------------------------------------------------
   Nasceu na LP do Dr. João Quirino e virou molde em 01/09/2026. Substitui o
   modal de sucesso: em vez de abrir um popup por cima da página, a pessoa
   digita o WhatsApp dentro de uma conversa que já parece começada.

   Todas as cores saem de variáveis com valor de reserva, então o arquivo
   funciona em LP que não tem design system nenhum. Para casar com a marca do
   cliente, defina --wa-marca e --wa-marca-texto no :root da LP.             */

:root {
  --wa-verde: #25D366;
  --wa-marca: var(--brand-navy, var(--cta-primary, #111827));
  --wa-marca-texto: var(--text-on-navy, #fff);
  --wa-fundo: var(--bg-primary, #fff);
  --wa-texto: var(--text-primary, #1f2937);
  --wa-balao-in: var(--bg-secondary, #f3f4f6);
}

.whatsapp-float {
  position: fixed;
  right: 20px;
  bottom: 20px;
  z-index: 60;
  width: 56px;
  height: 56px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: var(--wa-verde);
  color: #fff;
  border: 0;
  cursor: pointer;
  box-shadow: 0 8px 24px rgba(0, 0, 0, .24);
  transition: transform .2s ease;
}
.whatsapp-float svg { width: 30px; height: 30px; }
.whatsapp-float:hover { transform: scale(1.06); }

.wa-chat {
  position: fixed;
  right: 20px;
  bottom: 88px;
  z-index: 61;
  width: min(340px, calc(100vw - 40px));
  background: var(--wa-fundo);
  color: var(--wa-texto);
  border-radius: 18px;
  box-shadow: 0 18px 50px rgba(0, 0, 0, .28);
  overflow: hidden;
  opacity: 0;
  visibility: hidden;
  transform: translateY(16px) scale(.96);
  transform-origin: bottom right;
  transition: opacity .2s ease, transform .2s ease, visibility 0s linear .2s;
}
.wa-chat.is-open {
  opacity: 1;
  visibility: visible;
  transform: translateY(0) scale(1);
  transition-delay: 0s;
}

.wa-chat__head {
  display: flex;
  align-items: center;
  gap: .65rem;
  padding: .85rem 1rem;
  background: var(--wa-marca);
  color: var(--wa-marca-texto);
}
.wa-chat__avatar {
  width: 40px; height: 40px;
  border-radius: 50%;
  overflow: hidden;
  flex: 0 0 auto;
  background: rgba(255, 255, 255, .15);
  display: inline-flex; align-items: center; justify-content: center;
}
.wa-chat__avatar img { width: 100%; height: 100%; object-fit: contain; padding: 6px; }
/* Nem toda LP tem logo em arquivo. A inicial evita o ícone de imagem quebrada. */
.wa-chat__inicial { font-size: 1.05rem; font-weight: 600; letter-spacing: .02em; }
.wa-chat__ident { display: flex; flex-direction: column; line-height: 1.25; flex: 1 1 auto; min-width: 0; }
.wa-chat__ident strong { font-size: .95rem; font-weight: 600; }
.wa-chat__ident small { font-size: .72rem; opacity: .75; display: flex; align-items: center; gap: .35rem; }
.wa-chat__dot { width: 7px; height: 7px; border-radius: 50%; background: var(--wa-verde); display: inline-block; }
.wa-chat__close {
  background: none; border: 0; color: inherit;
  font-size: 1.5rem; line-height: 1; cursor: pointer;
  opacity: .65; padding: 0 .15rem;
}
.wa-chat__close:hover { opacity: 1; }

.wa-chat__body {
  padding: 1rem;
  max-height: 260px;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: .5rem;
  background: var(--wa-fundo);
}
.wa-chat__msg {
  max-width: 85%;
  padding: .55rem .7rem .35rem;
  border-radius: 12px;
  font-size: .87rem;
  line-height: 1.4;
  position: relative;
}
.wa-chat__msg p { margin: 0; }
.wa-chat__msg--in { align-self: flex-start; background: var(--wa-balao-in); border-bottom-left-radius: 4px; }
.wa-chat__msg--out { align-self: flex-end; background: #d9fdd3; color: #111b21; border-bottom-right-radius: 4px; }
.wa-chat__hora { display: block; text-align: right; font-size: .62rem; opacity: .5; margin-top: .15rem; }

.wa-chat__typing { display: inline-flex; gap: 3px; padding: .2rem 0; }
.wa-chat__typing i {
  width: 6px; height: 6px; border-radius: 50%;
  background: currentColor; opacity: .35;
  animation: wa-pulso 1.2s infinite;
}
.wa-chat__typing i:nth-child(2) { animation-delay: .18s; }
.wa-chat__typing i:nth-child(3) { animation-delay: .36s; }
@keyframes wa-pulso { 0%, 60%, 100% { opacity: .25; } 30% { opacity: .85; } }

.wa-chat__cta {
  display: flex; align-items: center; justify-content: center; gap: .45rem;
  margin-top: .5rem; padding: .5rem .7rem;
  border-radius: 10px;
  background: var(--wa-verde); color: #fff;
  font-size: .82rem; font-weight: 600; text-decoration: none;
}
.wa-chat__cta svg { width: 17px; height: 17px; }

.wa-chat__aviso { margin: 0; padding: 0 1rem .5rem; font-size: .68rem; opacity: .6; }
.wa-chat__erro { margin: 0; padding: 0 1rem .4rem; font-size: .75rem; color: #b91c1c; }

.wa-chat__form { display: flex; gap: .5rem; padding: .75rem 1rem 1rem; align-items: center; }
.wa-chat__input {
  flex: 1 1 auto; min-width: 0;
  padding: .6rem .75rem;
  border: 1px solid rgba(0, 0, 0, .15);
  border-radius: 999px;
  font-size: .9rem;
  font-family: inherit;
  color: var(--wa-texto);
  background: var(--wa-fundo);
}
.wa-chat__input:focus { outline: 2px solid var(--wa-verde); outline-offset: 1px; }
.wa-chat__send {
  flex: 0 0 auto;
  width: 42px; height: 42px;
  border: 0; border-radius: 50%;
  background: var(--wa-verde); color: #fff;
  display: inline-flex; align-items: center; justify-content: center;
  cursor: pointer;
}
.wa-chat__send svg { width: 19px; height: 19px; }
.wa-chat__send:disabled { opacity: .55; cursor: default; }

@media (max-width: 640px) {
  .whatsapp-float { bottom: 84px; width: 52px; height: 52px; }
  .whatsapp-float svg { width: 28px; height: 28px; }
  .wa-chat { bottom: 148px; right: 12px; }
  .wa-chat__body { max-height: 210px; }
}
@media (prefers-reduced-motion: reduce) {
  .whatsapp-float, .wa-chat { transition: none; }
  .wa-chat__typing i { animation: none; }
}