/* ===========================================================
   JD Agência Digital — folha de estilo institucional
   Paleta: grafite #14201B · fundo #F7FAF7 · verde #0E9F6E
           verde-profundo #0B3B2E · linha #DFE7E1
   Tipos:  Space Grotesk (display) · Inter (texto) · IBM Plex Mono (dados)
   =========================================================== */

:root{
  --ink:#14201B;
  --ink-soft:#3D4A44;
  --bg:#F7FAF7;
  --paper:#FFFFFF;
  --verde:#0E9F6E;
  --verde-escuro:#0B3B2E;
  --verde-claro:#E4F4EC;
  --linha:#DFE7E1;
  --zap:#25D366;
  --zap-esc:#1EBE5A;
  --mono:'IBM Plex Mono', ui-monospace, monospace;
  --display:'Space Grotesk', system-ui, sans-serif;
  --texto:'Inter', system-ui, sans-serif;
  --raio:14px;
  --larg:1080px;
}

*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{
  font-family:var(--texto);
  color:var(--ink);
  background:var(--bg);
  line-height:1.65;
  font-size:16.5px;
  -webkit-font-smoothing:antialiased;
}
img{max-width:100%;display:block}
a{color:var(--verde);text-decoration:none}
a:hover{text-decoration:underline}
a:focus-visible,button:focus-visible,input:focus-visible,textarea:focus-visible{
  outline:3px solid var(--verde);outline-offset:2px;border-radius:4px;
}

.container{max-width:var(--larg);margin:0 auto;padding:0 24px}

/* ---------- header ---------- */
.topo{
  background:var(--paper);
  border-bottom:1px solid var(--linha);
  position:sticky;top:0;z-index:50;
}
.topo-inner{
  display:flex;align-items:center;justify-content:space-between;
  padding:14px 0;gap:16px;flex-wrap:wrap;
}
.marca{
  display:flex;align-items:center;gap:10px;
  font-family:var(--display);font-weight:700;font-size:1.15rem;
  color:var(--ink);letter-spacing:-.01em;
}
.marca:hover{text-decoration:none}
.marca svg{flex:none}
.menu{display:flex;gap:26px;flex-wrap:wrap}
.menu a{
  color:var(--ink-soft);font-weight:500;font-size:.95rem;
  padding:4px 0;border-bottom:2px solid transparent;
}
.menu a:hover{color:var(--ink);text-decoration:none}
.menu a[aria-current="page"]{color:var(--verde-escuro);border-bottom-color:var(--verde)}

/* ---------- hero ---------- */
.hero{
  background:var(--paper);
  border-bottom:1px solid var(--linha);
  padding:72px 0 64px;
  overflow:hidden;
}
.hero-grid{
  display:grid;grid-template-columns:1.15fr .85fr;gap:48px;align-items:center;
}
.eyebrow{
  font-family:var(--mono);font-size:.78rem;letter-spacing:.14em;
  text-transform:uppercase;color:var(--verde);margin-bottom:18px;
}
.hero h1{
  font-family:var(--display);font-weight:700;
  font-size:clamp(2rem,4.4vw,3.1rem);
  line-height:1.12;letter-spacing:-.02em;margin-bottom:20px;
}
.hero h1 em{font-style:normal;color:var(--verde)}
.hero p.lead{font-size:1.12rem;color:var(--ink-soft);max-width:34em;margin-bottom:30px}
.acoes{display:flex;gap:14px;flex-wrap:wrap}
.btn{
  display:inline-flex;align-items:center;gap:9px;font-family:var(--display);font-weight:600;
  padding:13px 26px;border-radius:999px;font-size:.98rem;
  transition:transform .15s ease, box-shadow .15s ease, background .15s ease;
}
.btn:hover{text-decoration:none;transform:translateY(-1px)}
.btn svg{flex:none}
.btn-primario{background:var(--verde);color:#fff;box-shadow:0 6px 18px rgba(14,159,110,.28)}
.btn-primario:hover{background:#0C8F63}
.btn-secundario{border:1.5px solid var(--linha);color:var(--ink);background:var(--paper)}
.btn-secundario:hover{border-color:var(--verde)}
.btn-zap{background:var(--zap);color:#fff;box-shadow:0 6px 18px rgba(37,211,102,.30)}
.btn-zap:hover{background:var(--zap-esc);color:#fff}

/* fluxo (assinatura visual) */
.fluxo{width:100%;height:auto}
.fluxo .no{fill:var(--paper);stroke:var(--verde);stroke-width:1.6}
.fluxo .no-cheio{fill:var(--verde-claro)}
.fluxo .rot{font-family:var(--mono);font-size:10.5px;fill:var(--verde-escuro)}
.fluxo .trilho{stroke:var(--verde);stroke-width:1.6;fill:none;stroke-dasharray:5 6}
@media (prefers-reduced-motion: no-preference){
  .fluxo .trilho{animation:anda 2.6s linear infinite}
  @keyframes anda{to{stroke-dashoffset:-22}}
}

/* ---------- seções ---------- */
.secao{padding:72px 0}
.secao-alt{background:var(--paper);border-top:1px solid var(--linha);border-bottom:1px solid var(--linha)}
.titulo-secao{
  font-family:var(--display);font-weight:700;
  font-size:clamp(1.5rem,2.8vw,2.1rem);letter-spacing:-.015em;margin-bottom:12px;
}
.sub-secao{color:var(--ink-soft);max-width:44em;margin-bottom:40px}

/* bloco chamada whatsapp */
.zap-cta{
  background:linear-gradient(135deg,var(--verde-escuro),#0E5E44);
  color:#EAF7F0;border-radius:var(--raio);padding:40px 36px;
  display:flex;align-items:center;justify-content:space-between;gap:28px;flex-wrap:wrap;
}
.zap-cta h3{font-family:var(--display);font-size:1.4rem;margin-bottom:6px;color:#fff}
.zap-cta p{color:#B9DECB;max-width:40em}

/* serviços */
.grade-servicos{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:22px;
}
.cartao{
  background:var(--paper);border:1px solid var(--linha);border-radius:var(--raio);
  padding:28px 26px;position:relative;
  transition:border-color .15s ease, box-shadow .15s ease;
}
.secao-alt .cartao{background:var(--bg)}
.cartao:hover{border-color:var(--verde);box-shadow:0 8px 24px rgba(11,59,46,.07)}
.cartao .icone{
  width:44px;height:44px;border-radius:11px;background:var(--verde-claro);
  display:flex;align-items:center;justify-content:center;margin-bottom:18px;
}
.cartao h3{font-family:var(--display);font-size:1.08rem;margin-bottom:8px;letter-spacing:-.01em}
.cartao p{font-size:.95rem;color:var(--ink-soft)}

/* dados cadastrais / contato */
.ficha{
  background:var(--paper);border:1px solid var(--linha);border-radius:var(--raio);
  overflow:hidden;
}
.ficha dl{display:grid;grid-template-columns:220px 1fr}
.ficha dt,.ficha dd{padding:14px 22px;border-bottom:1px solid var(--linha);font-size:.95rem}
.ficha dt{
  font-family:var(--mono);font-size:.74rem;letter-spacing:.1em;text-transform:uppercase;
  color:var(--ink-soft);background:var(--bg);
}
.ficha dd{font-weight:500}
.ficha dl > dt:nth-last-of-type(1),.ficha dl > dd:last-of-type{border-bottom:none}

.duas-colunas{display:grid;grid-template-columns:1fr 1fr;gap:40px;align-items:start}

/* formulário */
.form-contato{display:grid;gap:16px}
.form-contato label{font-weight:600;font-size:.92rem;display:block;margin-bottom:6px}
.form-contato input,.form-contato textarea{
  width:100%;padding:12px 14px;border:1.5px solid var(--linha);border-radius:10px;
  font-family:var(--texto);font-size:.98rem;background:var(--paper);color:var(--ink);
}
.form-contato input:hover,.form-contato textarea:hover{border-color:#C4D0C8}
.form-contato textarea{min-height:130px;resize:vertical}

/* mapa */
.mapa{
  border:1px solid var(--linha);border-radius:var(--raio);overflow:hidden;
  aspect-ratio:16/9;background:var(--verde-claro);
}
.mapa iframe{width:100%;height:100%;border:0;display:block}

/* FAQ */
.faq details{
  background:var(--paper);border:1px solid var(--linha);border-radius:12px;
  margin-bottom:12px;padding:0 22px;
}
.faq summary{
  cursor:pointer;font-family:var(--display);font-weight:600;font-size:1rem;
  padding:18px 0;list-style:none;position:relative;padding-right:34px;
}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{
  content:"+";position:absolute;right:2px;top:14px;
  font-size:1.4rem;color:var(--verde);font-weight:400;
}
.faq details[open] summary::after{content:"–"}
.faq details p{padding:0 0 18px;color:var(--ink-soft);font-size:.96rem}

/* páginas de texto (políticas) */
.doc{max-width:760px}
.doc h1{font-family:var(--display);font-size:clamp(1.7rem,3vw,2.3rem);letter-spacing:-.02em;margin-bottom:8px}
.doc .atualizacao{font-family:var(--mono);font-size:.8rem;color:var(--ink-soft);margin-bottom:36px}
.doc h2{font-family:var(--display);font-size:1.25rem;margin:38px 0 12px;letter-spacing:-.01em}
.doc h3{font-family:var(--display);font-size:1.05rem;margin:26px 0 10px}
.doc p{margin-bottom:14px;color:var(--ink-soft)}
.doc ul{margin:0 0 14px 22px;color:var(--ink-soft)}
.doc li{margin-bottom:6px}
.doc strong{color:var(--ink)}

/* ---------- rodapé ---------- */
.rodape{background:var(--verde-escuro);color:#DCE9E2;padding:56px 0 32px;margin-top:0}
.rodape a{color:#9FD8BE}
.rodape-grid{
  display:grid;grid-template-columns:1.2fr 1fr 1fr;gap:40px;margin-bottom:40px;
}
.rodape h4{
  font-family:var(--mono);font-size:.74rem;letter-spacing:.14em;text-transform:uppercase;
  color:#8FB8A4;margin-bottom:16px;font-weight:500;
}
.rodape p,.rodape li{font-size:.92rem;line-height:1.8}
.rodape ul{list-style:none}
.dados-cadastrais{font-family:var(--mono);font-size:.85rem;line-height:2}
.rodape-zap{
  display:inline-flex;align-items:center;gap:9px;margin-top:4px;
  background:var(--zap);color:#fff;font-weight:600;font-family:var(--display);
  padding:10px 18px;border-radius:999px;font-size:.9rem;
}
.rodape-zap:hover{background:var(--zap-esc);color:#fff;text-decoration:none}
.rodape-zap svg{flex:none}
.rodape-base{
  border-top:1px solid rgba(255,255,255,.14);padding-top:22px;
  display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;
  font-size:.85rem;color:#8FB8A4;
}

/* ---------- botão flutuante whatsapp ---------- */
.zap-flutuante{
  position:fixed;right:20px;bottom:20px;z-index:80;
  display:inline-flex;align-items:center;gap:10px;
  background:var(--zap);color:#fff;
  padding:14px 20px 14px 16px;border-radius:999px;
  font-family:var(--display);font-weight:600;font-size:.95rem;
  box-shadow:0 8px 26px rgba(37,211,102,.42);
  transition:transform .15s ease, box-shadow .15s ease;
}
.zap-flutuante:hover{color:#fff;text-decoration:none;transform:translateY(-2px);box-shadow:0 12px 32px rgba(37,211,102,.5)}
.zap-flutuante svg{flex:none}
.zap-flutuante .rotulo{white-space:nowrap}
@media (prefers-reduced-motion: no-preference){
  .zap-flutuante{animation:pulso 2.6s ease-in-out infinite}
  @keyframes pulso{
    0%,100%{box-shadow:0 8px 26px rgba(37,211,102,.42)}
    50%{box-shadow:0 8px 26px rgba(37,211,102,.42),0 0 0 12px rgba(37,211,102,.10)}
  }
}
@media (max-width:520px){
  .zap-flutuante{right:16px;bottom:16px;padding:14px}
  .zap-flutuante .rotulo{display:none}
}

/* ---------- responsivo ---------- */
@media (max-width:860px){
  .hero-grid{grid-template-columns:1fr}
  .hero-visual{max-width:460px}
  .duas-colunas{grid-template-columns:1fr}
  .rodape-grid{grid-template-columns:1fr}
  .ficha dl{grid-template-columns:1fr}
  .ficha dt{border-bottom:none;padding-bottom:2px}
  .ficha dd{padding-top:4px}
  .zap-cta{padding:32px 26px}
}