/* ============================================================
   TOKENS
   Direção: papel + regras finas, como um parecer jurídico bem
   diagramado — não um card kit de SaaS.
   ============================================================ */
:root{
  --paper:#faf8f4;
  --paper-dim:#f2efe7;
  --navy-950:#070f18;
  --navy-900:#0b1f33;
  --navy-800:#0f2944;
  --navy-700:#1c3a5c;
  --ink:#1e2a35;
  --ink-muted:#5c6773;
  --ink-soft:#8992a0;
  --line:#e2ddd0;
  --line-strong:#cfc7b3;
  --gold:#a9793d;
  --gold-soft:#c9a877;
  --red:#a8402f;
  --whatsapp:#22a45d;
  --whatsapp-dark:#188a4c;

  --font-display:'Cormorant Garamond', Georgia, 'Times New Roman', serif;
  --font-body:'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;

  --sp-1:4px;  --sp-2:8px;  --sp-3:12px; --sp-4:16px;
  --sp-5:24px; --sp-6:32px; --sp-7:48px; --sp-8:64px; --sp-9:96px;

  --text-xs:12.5px;
  --text-sm:14px;
  --text-base:16px;
  --text-md:17px;
  --text-lg:19px;
  --h3-size:20px;
  --h2-size:clamp(26px,4.2vw,33px);
  --h1-size:clamp(33px,7vw,47px);

  --radius-sm:3px;
  --shadow-btn:0 12px 26px -10px rgba(34,164,93,.48);

  --container:660px;
  --stickybar-h:76px;
}

*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;background:var(--paper);color-scheme:only light}
body{
  margin:0;
  font-family:var(--font-body);
  font-size:var(--text-base);
  color:var(--ink);
  background:var(--paper);
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  padding-bottom:calc(var(--stickybar-h) + env(safe-area-inset-bottom));
}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
.container{max-width:var(--container);margin:0 auto;padding:0 22px}
h1,h2,h3{font-family:var(--font-display);font-weight:700;line-height:1.14;color:var(--navy-900);letter-spacing:-.01em}
p{line-height:1.68;margin:0 0 var(--sp-4)}
p:last-child{margin-bottom:0}
strong{font-weight:700}

/* ============================================================
   BARRA UTILITÁRIA
   ============================================================ */
.util-bar{
  background:var(--navy-950);color:#9fb1c2;
  font-size:var(--text-xs);font-weight:500;
  padding:var(--sp-2) var(--sp-4);
}
.util-bar .container{display:flex;align-items:center;justify-content:center;gap:var(--sp-3)}
.util-bar .u-desktop-only{display:none}
@media(min-width:560px){
  .util-bar .container{justify-content:space-between}
  .util-bar .u-desktop-only{display:inline}
}
.util-bar strong{color:#fff;font-weight:600}
.util-bar .u-phone{white-space:nowrap}
.util-bar a{
  color:#fff;font-weight:700;display:inline-block;
  padding:var(--sp-2) var(--sp-1);min-height:44px;box-sizing:border-box;
  border-bottom:1px solid rgba(255,255,255,.4);
}

/* ============================================================
   BOTÕES — o único elemento de cor saturada da página
   ============================================================ */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:10px;
  padding:17px 27px;border-radius:8px;font-weight:700;font-size:16.5px;
  font-family:var(--font-body);letter-spacing:-.005em;
  min-height:56px;border:none;cursor:pointer;
  transition:transform .15s ease, box-shadow .15s ease, background .15s ease;
}
.btn:active{transform:scale(.97)}
.btn-whatsapp{background:var(--whatsapp);color:#fff;box-shadow:var(--shadow-btn)}
.btn-whatsapp:hover{background:var(--whatsapp-dark)}
.btn-whatsapp svg{flex:none}
.btn-block{width:100%}
@media(min-width:600px){.btn-auto-desktop{width:auto;min-width:340px}}
@media(max-width:359px){
  .btn{font-size:15px;padding:16px 18px;gap:8px}
}

/* ============================================================
   HERO
   ============================================================ */
.hero{background:var(--paper);padding:var(--sp-7) 0 var(--sp-2)}
.hero-body{max-width:600px;margin:0 auto}
.hero-kicker{
  font-family:var(--font-display);font-style:italic;font-weight:600;
  font-size:17px;color:var(--gold);margin:0 0 var(--sp-4);
}
.hero h1{font-size:var(--h1-size);margin:0 0 var(--sp-4)}
.hero .lead{font-size:var(--text-lg);color:var(--ink-muted);margin:0 0 var(--sp-6);max-width:50ch}
.hero-ctas{display:flex;flex-direction:column;gap:var(--sp-3);align-items:flex-start}
.hero-note{font-size:var(--text-sm);color:var(--ink-soft);margin-top:var(--sp-4)}

.hero-media{
  width:100%;aspect-ratio:16/11;overflow:hidden;border-radius:6px;
  margin-top:var(--sp-8);border:1px solid var(--line-strong);
}
.hero-media img{width:100%;height:100%;object-fit:cover;object-position:50% 26%}

.hero-credentials{
  margin-top:var(--sp-5);padding-top:var(--sp-5);border-top:1px solid var(--line);
  font-size:var(--text-sm);color:var(--ink-muted);line-height:1.7;
}
.hero-credentials strong{color:var(--ink)}

/* ============================================================
   CTA repetido
   ============================================================ */
.cta-repeat{padding:var(--sp-6) 0 var(--sp-8)}
.cta-repeat .container{border-top:1px solid var(--line);padding-top:var(--sp-6)}
.cta-repeat .cta-microcopy{font-size:var(--text-sm);color:var(--ink-soft);margin-top:var(--sp-3)}

/* ============================================================
   SEÇÕES
   ============================================================ */
section.block{padding:var(--sp-8) 0}
.block-head{margin-bottom:var(--sp-6);max-width:60ch}
.block-kicker{
  font-family:var(--font-display);font-style:italic;font-size:17px;font-weight:600;
  color:var(--gold);margin:0 0 6px;
}
section.block h2{font-size:var(--h2-size);margin:0 0 var(--sp-3)}
section.block .block-lead{color:var(--ink-muted);font-size:var(--text-lg);margin:0}
.bg-dim{background:var(--paper-dim)}
@media(min-width:720px){section.block{padding:var(--sp-9) 0}}

/* ============================================================
   ALERTA — regra dourada à esquerda, sem pílula
   ============================================================ */
.alerta{
  border-left:3px solid var(--gold);
  padding:var(--sp-3) 0 var(--sp-3) var(--sp-5);
  margin-bottom:var(--sp-6);
}
.alerta p{margin:0;font-size:var(--text-md);color:var(--ink);font-style:italic;font-family:var(--font-display);line-height:1.5}

/* ============================================================
   LISTA DE SITUAÇÕES — lista com regra superior, não cards
   ============================================================ */
.problemas-lista{list-style:none;margin:0;padding:0;border-top:1px solid var(--line)}
.problema-item{
  display:grid;grid-template-columns:20px 1fr;gap:var(--sp-3);
  padding:var(--sp-4) 0;border-bottom:1px solid var(--line);
}
.problema-item .marca{
  color:var(--gold);font-family:var(--font-display);font-size:22px;font-weight:700;line-height:1.3;
}
.problema-item h3{
  font-family:var(--font-body);font-size:15.5px;font-weight:700;color:var(--navy-900);
  margin:0 0 2px;line-height:1.3;
}
.problema-item p{margin:0;font-size:13.5px;color:var(--ink-muted);line-height:1.4}
@media(min-width:640px){
  .problemas-lista{display:grid;grid-template-columns:1fr 1fr;column-gap:var(--sp-6);border-top:1px solid var(--line)}
  .problema-item:nth-child(odd){border-right:none}
}

/* ============================================================
   EXPLICAÇÃO — citação editorial, não caixa SaaS
   ============================================================ */
.explicacao-corpo{
  border-left:3px solid var(--gold);padding-left:var(--sp-5);
}
.explicacao-corpo p{
  font-family:var(--font-display);font-size:20px;line-height:1.6;color:var(--navy-900);
  margin:0 0 var(--sp-4);
}
.explicacao-corpo p:last-child{margin-bottom:0}
.explicacao-corpo strong{color:var(--gold)}

/* ============================================================
   ANTES / DEPOIS — colunas separadas por regra, sem cor de fundo
   ============================================================ */
.antes-depois{display:grid;gap:var(--sp-6)}
.ad-col .ad-label{
  font-family:var(--font-display);font-style:italic;font-size:18px;font-weight:600;
  margin:0 0 var(--sp-3);display:block;
}
.ad-col.antes .ad-label{color:var(--ink-soft)}
.ad-col.depois .ad-label{color:var(--whatsapp-dark)}
.ad-list{list-style:none;margin:0;padding:0;display:grid;gap:var(--sp-3)}
.ad-list li{
  font-size:var(--text-base);color:var(--ink);padding-left:var(--sp-4);position:relative;line-height:1.5;
}
.ad-list li::before{
  content:'';position:absolute;left:0;top:9px;width:6px;height:6px;
}
.ad-col.antes .ad-list li::before{background:var(--ink-soft);border-radius:50%}
.ad-col.depois .ad-list li::before{background:var(--whatsapp-dark);border-radius:1px;transform:rotate(45deg)}
@media(min-width:680px){
  .antes-depois{grid-template-columns:1fr 1px 1fr}
  .antes-depois .divisor{background:var(--line);align-self:stretch}
}

/* ============================================================
   PASSOS — sequência real, numeração é apropriada aqui
   ============================================================ */
.steps{list-style:none;margin:0;padding:0;counter-reset:step;position:relative}
.steps li{display:flex;gap:var(--sp-4);align-items:flex-start;position:relative;padding-bottom:var(--sp-5)}
.steps li:last-child{padding-bottom:0}
.steps li::after{content:'';position:absolute;left:17px;top:38px;bottom:0;width:1px;background:var(--line-strong)}
.steps li:last-child::after{display:none}
.steps li::before{
  counter-increment:step;content:counter(step);
  flex:none;width:36px;height:36px;border-radius:50%;border:1.5px solid var(--navy-900);color:var(--navy-900);
  display:flex;align-items:center;justify-content:center;font-family:var(--font-display);font-weight:700;font-size:16px;
  z-index:1;background:var(--paper);
}
.steps h3{font-size:var(--h3-size);margin:0 0 4px;color:var(--navy-900);padding-top:5px}
.steps p{margin:0;color:var(--ink-muted);font-size:var(--text-base)}

/* ============================================================
   CREDIBILIDADE — assinatura, não card
   ============================================================ */
.credibility{
  display:flex;align-items:center;gap:var(--sp-4);
  margin-top:var(--sp-7);padding-top:var(--sp-6);border-top:1px solid var(--line);
}
.credibility-foto{flex:none;width:64px;height:64px;border-radius:50%;overflow:hidden}
.credibility-foto img{width:100%;height:100%;object-fit:cover;object-position:50% 15%}
.credibility-texto strong{display:block;font-size:16.5px;color:var(--navy-900);font-family:var(--font-display);font-weight:700;margin-bottom:2px}
.credibility-texto p{margin:0;font-size:13.5px;color:var(--ink-muted);line-height:1.55}
@media(min-width:600px){.credibility-foto{width:76px;height:76px}}

/* ============================================================
   FAQ — lista com regra, sem caixa individual
   ============================================================ */
.faq-list{border-top:1px solid var(--line)}
.faq-item{border-bottom:1px solid var(--line)}
.faq-item summary{
  list-style:none;cursor:pointer;padding:var(--sp-4) 0;font-weight:600;font-size:var(--text-md);color:var(--navy-900);
  display:flex;justify-content:space-between;align-items:center;gap:var(--sp-3);min-height:44px;
}
.faq-item summary::-webkit-details-marker{display:none}
.faq-item summary::after{
  content:'+';font-size:24px;color:var(--gold);flex:none;font-family:var(--font-display);
  line-height:1;font-weight:400;transition:transform .2s ease;
}
.faq-item[open] summary::after{content:'\2212'}
.faq-item .faq-a{padding:0 0 var(--sp-4);color:var(--ink-muted);font-size:var(--text-base);margin:0;max-width:58ch}

/* ============================================================
   CTA FINAL — segundo (e último) momento de peso visual
   ============================================================ */
.cta-final{background:var(--navy-900);color:#fff}
.cta-final .container{text-align:left;max-width:560px}
.cta-final h2{color:#fff}
.cta-final .block-lead{color:#b7c6d3;margin:0 0 var(--sp-6);max-width:48ch}
.cta-final .hero-ctas{align-items:flex-start}
.cta-final .phone{margin-top:var(--sp-4);font-size:var(--text-sm);color:#8798a8}
.cta-final .phone a{font-weight:700;color:#fff;display:inline-block;padding:10px 0;min-height:44px;box-sizing:border-box}
.cta-final .cta-microcopy{font-size:var(--text-sm);color:#8798a8;margin-top:var(--sp-3)}

/* ============================================================
   BARRA LEGAL
   ============================================================ */
.legal-bar{background:var(--navy-950);color:#7691a4;padding:var(--sp-6) 0 calc(var(--stickybar-h) + var(--sp-6));font-size:11.5px;line-height:1.8}
.legal-bar .container{max-width:560px}
.legal-bar strong{color:#a9bccb}
.legal-bar p{margin:0 0 var(--sp-2)}
@media(min-width:720px){.legal-bar{padding-bottom:var(--sp-6)}}

/* ============================================================
   BARRA FIXA WHATSAPP
   ============================================================ */
.sticky-wa{
  position:fixed;left:0;right:0;bottom:0;z-index:60;
  background:rgba(250,248,244,.94);backdrop-filter:blur(8px);
  border-top:1px solid var(--line-strong);
  padding:var(--sp-3) var(--sp-4) calc(var(--sp-3) + env(safe-area-inset-bottom));
}
.sticky-wa .btn{width:100%}
@media(min-width:720px){
  .sticky-wa{left:auto;right:24px;bottom:24px;border:none;background:transparent;padding:0;width:auto;backdrop-filter:none}
  .sticky-wa .btn{width:auto;padding:16px 26px;box-shadow:0 16px 32px -12px rgba(34,164,93,.55)}
}