/* Vaccari Advocacia — sistema visual
   Cormorant Garamond (títulos) + Manrope (texto)
   Papel quente, verde institucional, dourado em doses mínimas. */

:root{
  --papel:#F7F4EE;
  --branca:#FDFCFA;
  --verde:#1D3A31;
  --verde-cl:#9FBFAE;
  --verde-tx:#D3D9D1;
  --teal:#0E7167;
  --teal-es:#0B5C54;
  --ouro:#A8823C;
  --ouro-cl:#C0B69F;
  --tinta:#16191A;
  --texto:#4C4941;
  --suave:#6E6A62;
  --borda:#E5E0D5;
  --borda-f:#DCD6CA;
  --zap:#25D366;
  --zap-es:#1FBF5B;
  --rod:#14181A;
  --rod-tx:#9C9890;
  --serif:'Cormorant Garamond',Georgia,'Times New Roman',serif;
  --sans:'Manrope',system-ui,-apple-system,'Segoe UI',sans-serif;
  --env:1280px;
  --pad:clamp(20px,4.6vw,56px);
  --sec:clamp(56px,7vw,112px);
}

*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{
  margin:0;background:var(--papel);color:var(--tinta);
  font:400 1rem/1.7 var(--sans);overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
}
img{max-width:100%;display:block}
a{color:var(--verde);text-decoration-thickness:1px;text-underline-offset:3px}
a:hover{color:var(--teal)}
h1,h2,h3,h4,h5{margin:0;font-family:var(--serif);font-weight:500;letter-spacing:-.01em;color:var(--tinta);text-wrap:pretty}
p{margin:0;text-wrap:pretty;hyphens:none;-webkit-hyphens:none;word-break:normal;overflow-wrap:normal}
ul{margin:0;padding:0}
:focus-visible{outline:2px solid var(--teal);outline-offset:3px}
::selection{background:var(--verde);color:var(--papel)}

.env{max-width:var(--env);margin:0 auto;padding:0 var(--pad)}
.env.med{max-width:860px}

.pular{position:absolute;left:-9999px;top:0;z-index:200;background:var(--verde);color:#fff;padding:.9rem 1.2rem;font:600 .9rem/1 var(--sans);text-decoration:none}
.pular:focus{left:12px;top:12px;color:#fff}

/* ───────── Cabeçalho ───────── */
.cab{
  position:sticky;top:0;z-index:60;
  background:rgba(247,244,238,.94);backdrop-filter:saturate(1.4) blur(10px);
  border-bottom:1px solid var(--borda);transition:box-shadow .34s;
}
.cab.desceu{box-shadow:0 12px 30px -26px rgba(20,25,22,.6)}
.cab-in{
  max-width:var(--env);margin:0 auto;padding:18px var(--pad);
  display:flex;align-items:center;gap:1.5rem;transition:padding .34s cubic-bezier(.4,0,.2,1);
}
.cab.desceu .cab-in{padding:11px var(--pad)}
.marca{flex:0 0 auto;line-height:0}
.marca img{height:clamp(34px,4.2vw,44px);width:auto;transition:height .34s cubic-bezier(.4,0,.2,1)}
.cab.desceu .marca img{height:clamp(28px,3.2vw,34px)}

.nav-d{display:none;margin-left:auto}
.nav-d>ul{display:flex;align-items:center;gap:clamp(.85rem,1.6vw,1.65rem);list-style:none}
.nav-d>ul>li{position:relative}
.nav-d>ul>li>a{
  display:block;padding:.6rem 0;font:500 .875rem/1 var(--sans);color:#3D3A34;
  text-decoration:none;white-space:nowrap;border-bottom:1px solid transparent;
  transition:color .25s,border-color .25s;
}
.nav-d>ul>li>a:hover,.nav-d .tem-sub:hover>a{color:var(--verde);border-color:var(--verde)}

.mega{
  position:absolute;top:100%;left:50%;transform:translate(-50%,8px);
  display:grid;grid-template-columns:repeat(4,minmax(170px,1fr));gap:2rem;
  padding:1.9rem 2.1rem;background:var(--branca);border:1px solid var(--borda);
  box-shadow:0 30px 60px -38px rgba(20,25,22,.5);
  opacity:0;visibility:hidden;pointer-events:none;transition:opacity .28s,transform .28s,visibility .28s;
}
.tem-sub:hover .mega,.tem-sub:focus-within .mega{opacity:1;visibility:visible;pointer-events:auto;transform:translate(-50%,0)}
/* Área invisível de ligação entre o menu e o mega menu. Impede que o submenu feche ao mover o mouse para baixo. */
.mega::before{content:"";position:absolute;left:0;right:0;top:-18px;height:18px}
.mega h5{margin:0 0 .85rem;font:600 .6875rem/1 var(--sans);letter-spacing:.18em;text-transform:uppercase;color:var(--suave)}
.mega ul{list-style:none;display:grid;gap:.55rem}
.mega a{font:400 .9rem/1.45 var(--sans);color:var(--tinta);text-decoration:none;transition:color .2s}
.mega a:hover{color:var(--teal)}

.cab-actions{display:none;gap:.6rem;align-items:center}

.ham{
  margin-left:auto;display:flex;flex-direction:column;justify-content:center;gap:5px;
  width:48px;height:48px;padding:0 10px;background:transparent;border:1px solid var(--borda-f);cursor:pointer;
}
.ham span,.ham::before,.ham::after{content:"";display:block;height:1px;background:var(--tinta)}
.ham::after{width:60%}

/* ───────── Botões ───────── */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:.6rem;
  min-height:58px;padding:0 1.5rem;border:0;cursor:pointer;
  font:600 .975rem/1 var(--sans);text-decoration:none;text-align:center;white-space:nowrap;
  transition:background .3s,color .3s,border-color .3s,transform .3s;
}
@media (max-width:359px){
  .btn{padding:0 1.1rem;font-size:.9rem;gap:.45rem}
}
.btn-sm{min-height:44px;padding:0 1.15rem;font-size:.85rem;white-space:nowrap}
.btn svg{width:19px;height:19px;flex:0 0 auto;fill:currentColor}
.btn-sm svg{width:16px;height:16px}
.btn-zap{background:var(--teal);color:#fff}
.btn-zap:hover{background:var(--teal-es);color:#fff;transform:translateY(-1px)}
.btn-zap-forte{background:var(--zap);color:#0A2216;font-weight:700}
.btn-zap-forte:hover{background:var(--zap-es);color:#0A2216;transform:translateY(-1px)}
.btn-mar{background:var(--tinta);color:var(--papel)}
.btn-mar:hover{background:var(--verde);color:var(--papel)}
.btn-claro{background:transparent;color:var(--tinta);border:1px solid var(--tinta)}
.btn-claro:hover{background:var(--tinta);color:var(--papel)}
.btn-fantasma{background:transparent;color:#EFEDE6;border:1px solid rgba(239,237,230,.45)}
.btn-fantasma:hover{background:#EFEDE6;color:var(--verde);border-color:#EFEDE6}
.btn-bloco{width:100%}

/* ───────── Menu lateral ───────── */
.veu{position:fixed;inset:0;z-index:80;background:rgba(18,21,19,.5);opacity:0;transition:opacity .35s}
.veu.ativo{opacity:1}
.gaveta{
  position:fixed;top:0;right:0;bottom:0;z-index:90;width:min(88vw,400px);
  background:var(--papel);border-left:1px solid var(--borda);
  display:flex;flex-direction:column;overflow-y:auto;
  padding:20px 24px calc(28px + env(safe-area-inset-bottom));
  transform:translateX(100%);visibility:hidden;
  transition:transform .42s cubic-bezier(.4,0,.2,1),visibility .42s;
}
.gaveta.aberta{transform:translateX(0);visibility:visible}
.gaveta-top{display:flex;justify-content:flex-end}
.gaveta-fechar{width:48px;height:48px;background:transparent;border:1px solid var(--borda-f);color:var(--tinta);font:300 1.6rem/1 var(--sans);cursor:pointer}
.gaveta-fechar:hover{background:var(--tinta);color:var(--papel)}
.gaveta ul{list-style:none;display:flex;flex-direction:column}
.gaveta ul a{
  display:flex;align-items:center;min-height:52px;padding:.7rem 0;
  font:500 1.05rem/1.3 var(--sans);color:var(--tinta);text-decoration:none;
  border-bottom:1px solid var(--borda);
}
.gaveta ul a:hover{color:var(--teal)}
.gaveta h5{margin:1.6rem 0 .3rem;font:600 .6875rem/1 var(--sans);letter-spacing:.2em;text-transform:uppercase;color:var(--suave)}
.gaveta>.btn{margin-top:.75rem}
.gaveta>.btn:first-of-type{margin-top:1.8rem}

/* ───────── Hero ───────── */
.hero{padding:clamp(34px,5vw,74px) 0 clamp(48px,6vw,86px)}
.hero .env,.hero-grade{
  max-width:var(--env);margin:0 auto;padding:0 var(--pad);
  display:grid;grid-template-columns:1fr;gap:clamp(30px,4vw,60px);align-items:center;
}
.hero-int .hero-grade{align-items:center}
.hero-fig{position:relative;margin:0;order:2}
.hero-fig img{width:100%;height:clamp(230px,38vw,520px);object-fit:cover;background:#EAE5DB}
.hero-fig figcaption,.hero-selo{
  position:absolute;left:0;bottom:0;background:var(--verde);color:#F2EFE8;
  padding:.85rem 1.1rem;font:600 .6875rem/1.3 var(--sans);letter-spacing:.14em;
  text-transform:uppercase;max-width:70%;
}
.hero-in{order:1}
.migalha{display:flex;flex-wrap:wrap;gap:.45rem;font:500 .8125rem/1.5 var(--sans);color:var(--suave);margin-bottom:1.1rem}
.migalha a{color:var(--suave);text-decoration:none}
.migalha a:hover{color:var(--teal)}
.hero h1{margin:0;font-size:clamp(2.05rem,4.6vw,3.6rem);line-height:1.06;max-width:22ch}
.hero-sub,.lead{margin-top:1.35rem;font:400 clamp(1.02rem,1.15vw,1.125rem)/1.68 var(--sans);color:var(--texto);max-width:56ch}
.hero-btns{display:flex;flex-wrap:wrap;gap:.75rem;margin-top:1.9rem}
.hero-nota{margin-top:1.6rem;display:flex;align-items:center;gap:.6rem;font:500 .8125rem/1.5 var(--sans);color:var(--suave)}
.hero-nota::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--teal);flex:0 0 auto}
.olho{
  display:flex;align-items:center;gap:.7rem;margin:0 0 1.1rem;
  font:600 .6875rem/1 var(--sans);letter-spacing:.22em;text-transform:uppercase;color:var(--teal);
}
.olho::before{content:"";width:28px;height:1px;background:var(--ouro)}

/* ───────── Seções ───────── */
.sec{padding:var(--sec) 0;scroll-margin-top:96px}
.sec-branca{background:var(--branca);border-top:1px solid var(--borda)}
.sec-papel{background:var(--papel)}
.sec-mar{background:var(--verde);color:#EFEDE6}
.sec-mar h2,.sec-mar h3,.sec-mar h4{color:#FBFAF6}
.sec-mar p{color:var(--verde-tx)}
.rotulo{margin:0;font:600 .6875rem/1 var(--sans);letter-spacing:.22em;text-transform:uppercase;color:var(--suave)}
.rotulo-claro{color:var(--verde-cl)}
.sec-cab{max-width:56ch}
.sec-cab h2{margin:.8rem 0 0;font-size:clamp(1.8rem,3.2vw,2.8rem);line-height:1.12}
.sec-cab p{margin-top:1rem;font-size:1.0625rem;color:var(--texto)}
.sec-mar .sec-cab p{color:var(--verde-tx)}

/* Corpo editorial */
.corpo h2{margin:clamp(2rem,3.4vw,3rem) 0 0;font-size:clamp(1.6rem,2.6vw,2.2rem);line-height:1.18}
.corpo h2:first-child{margin-top:0}
.corpo h3{margin:1.8rem 0 0;font:600 1.125rem/1.35 var(--sans)}
.corpo p{margin-top:1rem;font-size:1.0625rem;line-height:1.75;color:var(--texto)}
.corpo ul{margin-top:1.1rem;list-style:none;display:grid;gap:.75rem}
.corpo ul li{position:relative;padding-left:1.5rem;font-size:1.0625rem;line-height:1.7;color:var(--texto)}
.corpo ul li::before{content:"";position:absolute;left:0;top:.72em;width:7px;height:1px;background:var(--ouro)}
.corpo ol{margin-top:1.1rem;padding-left:1.25rem;display:grid;gap:.75rem;color:var(--texto)}
.corpo a:not(.btn){color:var(--teal)}

.caixa{
  margin-top:1.9rem;padding:clamp(1.2rem,2vw,1.7rem);
  background:var(--papel);border:1px solid var(--borda);border-left:3px solid var(--verde);
}
.sec-branca .caixa{background:var(--papel)}
.caixa h4{margin:0;font:600 1.0625rem/1.35 var(--sans)}
.caixa p{margin-top:.6rem;font-size:1rem;color:var(--texto)}

/* Passos */
.passos{margin-top:clamp(28px,3.5vw,52px);display:grid;grid-template-columns:1fr;gap:0;counter-reset:p}
.passo{position:relative;padding:0 0 1.9rem 1.9rem;border-left:1px solid rgba(239,237,230,.28);counter-increment:p}
.sec-branca .passo,.sec-papel .passo{border-left-color:var(--borda-f)}
.passo:last-child{padding-bottom:0;border-left-color:transparent}
.passo::before{content:"";position:absolute;left:-5px;top:.55rem;width:9px;height:9px;border-radius:50%;background:var(--ouro)}
.sec-branca .passo::before,.sec-papel .passo::before{background:var(--verde)}
.passo::after{
  content:"0" counter(p);display:block;
  font:400 1.5rem/1 var(--serif);color:var(--ouro);margin-bottom:.45rem;
}
.passo h4{font:600 1.0625rem/1.35 var(--sans)}
.passo p{margin-top:.5rem;font-size:.9375rem;line-height:1.65;max-width:36ch}

/* FAQ */
.faq{margin-top:clamp(20px,2.6vw,36px)}
.faq details{border-top:1px solid var(--borda-f)}
.faq details:last-child{border-bottom:1px solid var(--borda-f)}
.faq summary{
  display:flex;align-items:center;justify-content:space-between;gap:1rem;
  min-height:68px;padding:1.15rem 0;cursor:pointer;list-style:none;
  font:600 1.0625rem/1.45 var(--sans);color:var(--tinta);
}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"▾";flex:0 0 auto;color:var(--teal);font:400 1.1rem/1 var(--sans);transition:transform .28s}
.faq details[open] summary::after{transform:rotate(180deg)}
.faq details p{margin:0 0 1.4rem;font-size:1rem;line-height:1.72;color:var(--texto);max-width:64ch}

/* ───────── Áreas (cards) ───────── */
.areas{margin-top:clamp(26px,3.2vw,50px);display:grid;grid-template-columns:1fr;gap:clamp(20px,2.2vw,30px)}
.area{
  display:flex;flex-direction:column;background:var(--branca);border:1px solid var(--borda);
  text-decoration:none;color:inherit;transition:border-color .35s,box-shadow .35s;
}
.area:hover{border-color:var(--ouro-cl);box-shadow:0 22px 50px -32px rgba(20,25,22,.45);color:inherit}
.area-fig{display:block;aspect-ratio:16/11;overflow:hidden;background:#EAE5DB}
.area-fig img{width:100%;height:100%;object-fit:cover;transition:transform .8s cubic-bezier(.2,.7,.2,1)}
.area:hover .area-fig img{transform:scale(1.045)}
.area-txt{display:flex;flex-direction:column;gap:.5rem;padding:1.3rem 1.35rem 1.45rem;flex:1}
.area-n{font:600 .6875rem/1 var(--sans);letter-spacing:.16em;color:#7A5C22}
.area-txt h3{font:600 1.0625rem/1.3 var(--sans)}
.area-txt p{font-size:.9375rem;line-height:1.62;color:#5A564E}
.area-mais{margin-top:auto;padding-top:.9rem;display:inline-flex;gap:.4rem;font:600 .8125rem/1 var(--sans);color:var(--teal);transition:gap .3s}
.area:hover .area-mais{gap:.8rem}

/* Lista de frentes */
.frentes{margin-top:clamp(28px,3.5vw,52px);border-top:1px solid var(--borda-f)}
.frente{
  display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:clamp(1rem,2.5vw,2.5rem);
  padding:clamp(1.3rem,2.2vw,1.9rem) 0;border-bottom:1px solid var(--borda-f);
  text-decoration:none;color:inherit;transition:background .3s,padding-left .3s;
}
.frente:hover{background:#F1EDE4;padding-left:1.25rem;color:inherit}
.frente-n{font:400 clamp(1.9rem,3.4vw,3rem)/1 var(--serif);color:var(--ouro);min-width:2.2ch}
.frente-txt{display:grid;gap:.35rem}
.frente-txt strong{font:600 clamp(1.1rem,1.6vw,1.3rem)/1.25 var(--sans);color:var(--tinta)}
.frente-txt span{font:400 .9375rem/1.6 var(--sans);color:#5A564E;max-width:58ch}
.frente-seta{font:400 1.35rem/1 var(--sans);color:var(--teal);transition:transform .3s}
.frente:hover .frente-seta{transform:translateX(6px)}

/* Direcionador de situações */
.situacoes{margin-top:clamp(26px,3.2vw,46px);display:grid;grid-template-columns:1fr;gap:1px;background:var(--borda);border:1px solid var(--borda)}
.situacao{
  display:flex;align-items:center;justify-content:space-between;gap:1rem;
  min-height:76px;padding:1.1rem 1.25rem;background:var(--branca);
  text-decoration:none;color:inherit;transition:background .28s;
}
.situacao:hover{background:#F1EDE4;color:inherit}
.situacao b{font:500 1rem/1.45 var(--sans);color:var(--tinta);max-width:34ch}
.situacao i{display:flex;align-items:center;gap:.6rem;flex:0 0 auto;font-style:normal;font:600 .6875rem/1 var(--sans);letter-spacing:.12em;text-transform:uppercase;color:var(--teal)}

/* ───────── Destaque com retrato (página Sobre) ───────── */
.dest{display:grid;grid-template-columns:1fr;gap:clamp(28px,4vw,60px);align-items:center}
.dest-txt{min-width:0}
.dest-txt h2{margin:.8rem 0 0;font-size:clamp(1.8rem,3.2vw,2.7rem);line-height:1.12}
.oab-linha{margin-top:.5rem;font:500 .875rem/1.5 var(--sans);color:var(--teal);letter-spacing:.02em}
.dest-txt p:not(.oab-linha):not(.rotulo){margin-top:1.2rem;font-size:1.0625rem;line-height:1.75;color:var(--texto);max-width:58ch}

/* Retrato: o container define a proporção; a foto preenche sem distorcer. */
.dest-fig{position:relative;margin:0;min-width:0}
.dest-fig picture{display:block;width:100%;height:100%}
.dest-fig img{width:100%;height:100%;object-fit:cover;background:#EAE5DB;display:block}
.dest-fig-retrato{
  width:100%;max-width:440px;margin-inline:auto;
  aspect-ratio:2/3;overflow:hidden;
}
.dest-fig-retrato img{object-position:50% 22%}
.dest-fig-retrato::after{content:"";position:absolute;right:0;bottom:0;width:56px;height:6px;background:var(--ouro)}

/* Hero sem fotografia: coluna única, sem buraco no grid */
.hero-sem-foto{padding-bottom:clamp(30px,4vw,54px)}
.hero-sem-foto>.hero-in{max-width:var(--env);margin:0 auto;padding:0 var(--pad)}
.hero-sem-foto h1{max-width:26ch}

/* Direcionador de situações */
.dirs{margin-top:clamp(26px,3.2vw,46px);display:grid;grid-template-columns:1fr;gap:1px;background:var(--borda);border:1px solid var(--borda)}
.dir{
  display:flex;align-items:center;justify-content:space-between;gap:1rem;
  min-height:76px;padding:1.1rem 1.25rem;background:var(--branca);
  text-decoration:none;color:inherit;transition:background .28s;
}
.dir:hover{background:#F1EDE4;color:inherit}
.dir-q{font:500 1rem/1.45 var(--sans);color:var(--tinta);max-width:34ch}
.dir-a{display:flex;align-items:center;gap:.5rem;flex:0 0 auto;font:600 .6875rem/1 var(--sans);letter-spacing:.12em;text-transform:uppercase;color:var(--teal)}
.dir-a::after{content:"\2192";font-size:1.1rem;letter-spacing:0}
.area-seta{margin-left:auto;font:400 1.35rem/1 var(--sans);color:var(--teal);transition:transform .3s}
.area:hover .area-seta{transform:translateX(6px)}

/* Áreas relacionadas */
.rel{margin-top:1rem;display:flex;flex-wrap:wrap;gap:.6rem}
.rel a{
  display:inline-flex;align-items:center;min-height:44px;padding:0 1.05rem;
  background:var(--branca);border:1px solid var(--borda-f);
  font:500 .875rem/1 var(--sans);color:var(--tinta);text-decoration:none;
  transition:background .28s,border-color .28s,color .28s;
}
.rel a:hover{background:var(--verde);border-color:var(--verde);color:#F2EFE8}

/* Contato compacto */
.contato-compacto{
  margin-top:1.4rem;display:grid;grid-template-columns:1fr;gap:1.3rem;align-items:center;
  padding:clamp(20px,2.6vw,32px);background:var(--papel);border:1px solid var(--borda);
}
.contato-compacto .lead{margin:0;max-width:52ch}
.contato-compacto .btn{width:100%}

/* Sobre */
.sobre-grade{display:grid;grid-template-columns:1fr;gap:clamp(30px,4vw,64px);align-items:center}
.sobre-fig{position:relative;max-width:440px;margin:0 auto;width:100%;aspect-ratio:2/3;overflow:hidden}
.sobre-fig img{width:100%;height:100%;object-fit:cover;object-position:50% 22%;background:#EAE5DB}
.sobre-fig::after{content:"";position:absolute;right:-1px;bottom:-1px;width:56px;height:6px;background:var(--ouro)}
.destaque{
  margin-top:1.8rem;padding:1.15rem 0;border-top:1px solid var(--borda);border-bottom:1px solid var(--borda);
  display:flex;align-items:center;gap:.85rem;font:600 1.0625rem/1.4 var(--sans);
}
.destaque::before{content:"";width:3px;height:34px;background:var(--verde);flex:0 0 auto}

/* CTA faixa */
.cta-faixa,.cta{background:var(--verde);color:#EFEDE6;padding:clamp(52px,6.5vw,100px) 0}
.cta h2{margin-top:1rem;font-size:clamp(1.7rem,2.9vw,2.5rem);line-height:1.15;max-width:28ch;color:#FBFAF6}
.cta>.env>p:not(.rotulo){margin-top:1rem;font-size:1.0625rem;line-height:1.7;color:var(--verde-tx);max-width:56ch}
.cta .cta-btns{margin-top:1.9rem}
.cta-grade{display:grid;grid-template-columns:1fr;gap:clamp(24px,3vw,56px);align-items:center}
.cta-grade h2{font-size:clamp(1.7rem,2.9vw,2.5rem);line-height:1.15;max-width:28ch;margin-top:1rem}
.cta-grade p{margin-top:1rem;font-size:1.0625rem;color:var(--verde-tx);max-width:52ch}
.cta-btns{display:flex;flex-wrap:wrap;gap:.8rem}

/* ───────── Contato ───────── */
.contato-grade{margin-top:clamp(28px,3.4vw,50px);display:grid;grid-template-columns:1fr;gap:clamp(20px,2.4vw,34px);align-items:start}
.contato-zap{background:var(--verde);color:#EFEDE6;padding:clamp(24px,3vw,38px)}
.contato-zap h3{margin:.9rem 0 0;font-size:clamp(1.5rem,2.3vw,2rem);line-height:1.15;color:#FBFAF6}
.contato-zap p{margin-top:.9rem;color:var(--verde-tx);max-width:38ch}
.contato-zap .btn{width:100%;margin-top:1.6rem;min-height:60px}
.contato-zap .contato-end{margin-top:1.5rem;padding-top:1.3rem;border-top:1px solid rgba(239,237,230,.2);font:500 .875rem/1.6 var(--sans);color:#BFCDC2}

/* ───────── Formulário ───────── */
.form{background:var(--papel);border:1px solid var(--borda);padding:clamp(22px,2.8vw,36px)}
.form-modal .form{background:transparent;border:0;padding:0}
.form h3{margin:.8rem 0 1.4rem;font-size:clamp(1.4rem,2vw,1.8rem);line-height:1.2}
.form-grid{display:grid;grid-template-columns:1fr;gap:1rem}
.campo{display:grid;gap:.45rem}
.campo label{font:600 .8125rem/1 var(--sans);color:#3D3A34}
.campo input,.campo select,.campo textarea{
  width:100%;min-height:54px;padding:0 .9rem;background:var(--branca);
  border:1px solid var(--borda-f);font:400 1rem/1 var(--sans);color:var(--tinta);
  border-radius:0;appearance:none;
}
.campo textarea{min-height:120px;padding:.8rem .9rem;line-height:1.6;resize:vertical}
.campo select{
  background-image:url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath fill='%230E7167' d='M1 1l5 5 5-5'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 1rem center;background-size:11px;padding-right:2.4rem;
}
.campo input:focus,.campo select:focus,.campo textarea:focus{border-color:var(--teal);outline:none}
.campo input::placeholder,.campo textarea::placeholder{color:#A9A497}
.campo-full{grid-column:1/-1}
.form .btn{width:100%;margin-top:.3rem}
.form-regra,.form-aviso{font:400 .8125rem/1.6 var(--sans);color:var(--suave)}
.form-status{margin-top:.9rem;font:500 .9375rem/1.6 var(--sans);color:#3D3A34;min-height:1.2em}
.form-status.ok{color:var(--teal)}
.form-status.erro{color:#A3331F}
.form button[disabled]{opacity:.6;cursor:progress}

/* Modal */
.form-modal{position:fixed;inset:0;z-index:140;display:flex;align-items:flex-start;justify-content:center;padding:clamp(12px,3vw,48px) clamp(12px,3vw,24px);background:rgba(18,21,19,.62);overflow-y:auto;opacity:0;transition:opacity .3s}
.form-modal.aberto{opacity:1}
.form-modal[hidden]{display:none}
.form-modal-card{
  width:min(760px,100%);background:var(--papel);border:1px solid var(--borda);
  box-shadow:0 40px 90px -50px rgba(10,14,12,.8);transform:translateY(14px);transition:transform .34s cubic-bezier(.4,0,.2,1);
}
.form-modal.aberto .form-modal-card{transform:translateY(0)}
.form-modal-head{display:flex;align-items:flex-start;gap:1rem;padding:clamp(22px,3vw,34px) clamp(20px,3vw,36px) 0}
.form-modal-head h2{margin:.7rem 0 0;font-size:clamp(1.5rem,2.4vw,2.05rem);line-height:1.15}
.form-modal-head>div>p:last-child{margin-top:.7rem;font-size:.9875rem;line-height:1.6;color:var(--texto);max-width:46ch}
.form-modal-close{margin-left:auto;flex:0 0 auto;width:46px;height:46px;background:transparent;border:1px solid var(--borda-f);color:var(--tinta);font:300 1.5rem/1 var(--sans);cursor:pointer}
.form-modal-close:hover{background:var(--tinta);color:var(--papel)}
.form-modal-body{padding:clamp(18px,2.4vw,28px) clamp(20px,3vw,36px) clamp(24px,3vw,36px)}

/* ───────── Rodapé ───────── */
.rod{background:var(--rod);color:var(--rod-tx);padding:clamp(48px,6vw,84px) 0 calc(28px + env(safe-area-inset-bottom))}
.rod-grade{display:grid;grid-template-columns:1fr;gap:clamp(28px,3vw,44px)}
.rod-marca img{height:46px;width:auto}
.rod-marca p{margin-top:1.1rem;font-size:.875rem;line-height:1.7;color:var(--rod-tx);max-width:30ch}
.rod h5{margin:0 0 .9rem;font:600 .6875rem/1 var(--sans);letter-spacing:.2em;text-transform:uppercase;color:#E7E3DA}
.rod ul{list-style:none;display:grid;gap:.6rem}
.rod ul a{font:400 .9rem/1.5 var(--sans);color:var(--rod-tx);text-decoration:none}
.rod ul a:hover{color:#F2EFE8}
.rod-zap{display:inline-flex;align-items:center;gap:.55rem;margin-top:1.2rem;min-height:46px;font:600 .875rem/1 var(--sans);color:#7FD6A2;text-decoration:none}
.rod-zap:hover{color:var(--zap)}
.rod-zap svg{width:17px;height:17px;fill:currentColor}
.rod-aviso{margin-top:clamp(30px,3.6vw,54px);padding-top:1.5rem;border-top:1px solid #262B2C;font-size:.8125rem;line-height:1.7;color:#97948C;max-width:96ch}
.rod-base{margin-top:1.4rem;display:flex;flex-wrap:wrap;gap:.6rem 1.4rem;justify-content:space-between;font-size:.8125rem;line-height:1.6;color:#97948C}
.rod-base a{color:var(--rod-tx);text-decoration:none}
.rod-base a:hover{color:#F2EFE8}

/* ───────── WhatsApp flutuante ───────── */
.zap-flut{
  position:fixed;right:clamp(16px,2.4vw,28px);bottom:calc(clamp(16px,2.4vw,28px) + env(safe-area-inset-bottom));
  z-index:120;display:flex;align-items:center;justify-content:center;
  width:62px;height:62px;border-radius:50%;background:var(--zap);color:#fff;text-decoration:none;
  box-shadow:0 10px 30px -8px rgba(11,60,36,.45);animation:pulsoZap 4.5s ease-out infinite;
  transition:transform .3s,background .3s;
}
.zap-flut:hover{transform:scale(1.06);background:var(--zap-es);color:#fff}
.zap-flut svg{width:31px;height:31px;fill:currentColor}
.zap-flut span{display:none}
@keyframes pulsoZap{
  0%,100%{box-shadow:0 10px 30px -8px rgba(11,60,36,.45),0 0 0 0 rgba(37,211,102,.34)}
  60%{box-shadow:0 10px 30px -8px rgba(11,60,36,.45),0 0 0 14px rgba(37,211,102,0)}
}

/* ───────── Responsivo ───────── */
@media (min-width:640px){
  .areas,.situacoes,.form-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .rod-grade{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (min-width:900px){
  .nav-d{display:block}
  .cab-actions{display:flex}
  .ham{display:none}
  .dest{grid-template-columns:1.15fr .85fr}
  .dirs{grid-template-columns:repeat(2,minmax(0,1fr))}
  .contato-compacto{grid-template-columns:1fr auto}
  .contato-compacto .btn{width:auto}
  .hero .env,.hero-grade{grid-template-columns:1.06fr .94fr}
  .hero-in{order:0}
  .hero-fig{order:1}
  .sobre-grade{grid-template-columns:.8fr 1.2fr}
  .cta-grade{grid-template-columns:1.2fr .8fr}
  .contato-grade{grid-template-columns:.82fr 1.18fr}
  .passos{grid-template-columns:repeat(4,minmax(0,1fr))}
  .passo{padding:1.6rem 1.6rem 0 0;border-left:0;border-top:1px solid rgba(239,237,230,.28)}
  .sec-branca .passo,.sec-papel .passo{border-top-color:var(--borda-f);border-left:0}
  .passo:last-child{border-left-color:transparent}
  .passo::before{left:0;top:-5px}
  .zap-flut{width:auto;height:58px;border-radius:999px;gap:.6rem;padding:0 1.4rem}
  .zap-flut span{display:inline;font:600 .9rem/1 var(--sans)}
  .zap-flut svg{width:22px;height:22px}
}
@media (min-width:1040px){
  .areas{grid-template-columns:repeat(3,minmax(0,1fr))}
  .rod-grade{grid-template-columns:1.45fr 1fr 1fr 1fr 1fr}
}
@media (min-width:1560px){
  .areas{grid-template-columns:repeat(4,minmax(0,1fr))}
}
@media (max-width:899px){
  .mega{display:none}
}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *{animation-duration:.01ms!important;transition-duration:.01ms!important}
}

@media print{
  .cab,.gaveta,.veu,.zap-flut,.form-modal,.hero-btns,.cta-faixa{display:none!important}
  body{background:#fff}
}

/* ───────── Ajustes de clareza, leitura e conversão ───────── */
/* Os textos corridos ficam justificados sem criar hifens automáticos. */
.corpo p,
.corpo li,
.faq details p,
.sec-cab p,
.hero-sub,
.lead,
.contato-zap p,
.cta-grade p,
.cta>.env>p:not(.rotulo),
.rod-marca p,
.rod-aviso,
.form-regra,
.form-aviso{
  text-align:justify;
  text-justify:inter-word;
  hyphens:none;
  -webkit-hyphens:none;
  word-break:normal;
  overflow-wrap:normal;
  word-wrap:normal;
}

/* A marca ganha presença no desktop e fica centralizada no celular. */
.cab-in{position:relative}
.marca{position:absolute;left:50%;transform:translateX(-50%);z-index:2}
.marca img{height:48px;width:auto;max-width:min(78vw,270px);object-fit:contain}

/* Botões deixam explícito o caminho de contato. */
.hero-btns .btn,
.cta-btns .btn{min-width:250px}
.cab-actions .cab-form{min-width:235px;max-width:285px}
.cab-actions .cab-zap{min-width:145px}

/* Melhor leitura em telas pequenas: largura confortável e espaçamento equilibrado. */
@media (max-width:639px){
  .cab-in{min-height:86px;padding:12px var(--pad)}
  .marca img{height:56px;max-width:78vw}
  .cab.desceu .cab-in{padding:12px var(--pad)}
  .cab.desceu .marca img{height:56px;max-width:78vw}
  .ham{margin-left:auto;position:relative;z-index:3}
  .hero-btns,.cta-btns{display:grid;grid-template-columns:1fr;width:100%;gap:.7rem}
  .hero-btns .btn,.cta-btns .btn{width:100%;min-width:0;min-height:56px}
  .hero-sub,.lead,.corpo p,.corpo li,.faq details p,.sec-cab p{font-size:1rem;line-height:1.75}
  .corpo p,.faq details p,.sec-cab p{ text-align:justify; }
  .form-modal-head{padding-top:20px}
  .form-modal-head h2{font-size:1.7rem}
  .form-modal-head>div>p:last-child{font-size:.95rem;text-align:justify}
  .campo input,.campo select,.campo textarea{font-size:16px;min-height:56px}
  .campo textarea{min-height:135px}
  .sobre-fig{max-width:380px}
}

@media (min-width:900px){
  .cab-in{position:relative}
  .marca{position:static;left:auto;transform:none}
  .marca img{height:68px;max-width:none}
  .cab.desceu .marca img{height:68px}
  .cab-actions .btn{min-height:48px;font-size:.8rem;padding:0 .9rem}
}

@media (min-width:1200px){
  .marca img{height:74px}
  .cab.desceu .marca img{height:74px}
  .cab-actions .btn{font-size:.85rem;padding:0 1.05rem}
}

@media (min-width:900px) and (max-width:1099px){
  .cab-in{gap:1rem}
  .nav-d>ul{gap:.8rem}
  .cab-actions{gap:.4rem}
  .cab-actions .cab-form{min-width:205px;max-width:215px}
  .cab-actions .cab-zap{min-width:125px}
  .cab-actions .btn{font-size:.74rem;padding:0 .65rem}
}

/* Hierarquia editorial: títulos e chamadas centralizados; textos corridos justificados. */
.sec > .env > .rotulo, .sec > .env > h2, .sec-cab, .sec-cab h2, .sec-cab p, .sobre-grade > div > .rotulo, .sobre-grade > div > h2, .cta-grade h2, .cta-grade .rotulo { text-align:center; margin-left:auto; margin-right:auto; }
.sec > .env > h2{max-width:30ch}
.sec-cab{margin-left:auto;margin-right:auto}
.frentes,.areas,.situacoes{margin-left:auto;margin-right:auto}
@media (max-width:639px){
  .sec > .env > h2{max-width:24ch}
  .hero h1{text-wrap:balance}
  .hero-sub,.lead{max-width:38rem;margin-left:auto;margin-right:auto;text-align:justify}
  .sobre-grade > div .destaque{text-align:center}
  .cta-grade > div > p:not(.rotulo){text-align:justify}
}

/* ================================================================
   Auditoria final — clareza, conversão, responsividade e menu
   ================================================================ */

/* Texto editorial: justificado, mas a última linha permanece natural à esquerda. */
.corpo p,
.corpo li,
.faq details p,
.sec-cab p,
.hero-sub,
.lead,
.dest-txt p:not(.oab-linha):not(.rotulo),
.sobre-grade p:not(.rotulo):not(.destaque),
.contato-zap p,
.cta-grade p,
.cta>.env>p:not(.rotulo),
.rod-marca p,
.rod-aviso,
.form-regra,
.form-aviso {
  text-align: justify;
  text-align-last: left;
  text-justify: inter-word;
  hyphens: none;
  -webkit-hyphens: none;
  word-break: normal;
  overflow-wrap: break-word;
}

/* Nunca hifenizar automaticamente palavras em títulos, navegação ou botões. */
h1,h2,h3,h4,h5,
.nav-d a,
.mega a,
.btn,
.situacao b,
.dir-q,
.frente-txt strong,
.area-txt h3,
.faq summary {
  hyphens: none;
  -webkit-hyphens: none;
  word-break: normal;
}

/* Marca: tamanho estável. No celular permanece grande mesmo ao rolar. */
.marca img,
.cab.desceu .marca img {
  height: 74px;
  width: auto;
  max-width: min(42vw, 330px);
  object-fit: contain;
}

/* Header com mais área de respiro para a marca. */
.cab-in,
.cab.desceu .cab-in {
  min-height: 94px;
  padding-top: 10px;
  padding-bottom: 10px;
}

/* Mega menu: área maior, estável e sem a “ponte” frágil que fazia o menu fechar. */
.tem-sub { padding-bottom: 2px; }
.mega {
  z-index: 200;
  width: min(960px, calc(100vw - 40px));
  min-width: 760px;
  max-width: calc(100vw - 40px);
  border-radius: 2px;
  transform: translate(-50%, 10px);
  transition: opacity .18s ease, transform .18s ease, visibility .18s ease;
}
.tem-sub.menu-aberto .mega,
.tem-sub:hover .mega,
.tem-sub:focus-within .mega {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transform: translate(-50%, 0);
}
.tem-sub.menu-aberto > a { color: var(--verde); border-color: var(--verde); }
.mega::before {
  top: -24px;
  height: 24px;
}

/* Botões com função explícita e área confortável. */
.hero-btns .btn,
.cta-btns .btn,
.contato-compacto .btn { min-height: 58px; }
.cab-actions .btn { min-height: 50px; }

/* Formulário: hierarquia visual mais clara. */
.form-modal-card { border-radius: 4px; }
.form-modal-head p:last-child { max-width: 62ch; }
.campo label { margin-bottom: .45rem; }
.campo input,
.campo select,
.campo textarea { border-radius: 2px; }
.form-status { min-height: 1.4em; }

/* Desktop: não deixar o header espremido em resoluções intermediárias. */
@media (min-width:900px) and (max-width:1039px) {
  .nav-d,.cab-actions { display: none; }
  .ham { display: flex; }
}

@media (min-width:1040px) {
  .nav-d { display: block; }
  .cab-actions { display: flex; }
  .ham { display: none; }
  .cab-in,
  .cab.desceu .cab-in { min-height: 102px; }
  .marca img,
  .cab.desceu .marca img { height: 76px; max-width: 340px; }
}

@media (max-width:1039px) {
  .nav-d { display: none; }
  .cab-actions { display: none; }
}

@media (max-width:639px) {
  .cab-in,
  .cab.desceu .cab-in {
    min-height: 92px;
    padding: 8px var(--pad);
  }
  .marca img,
  .cab.desceu .marca img {
    height: 62px;
    max-width: min(72vw, 290px);
  }
  .marca { left: 50%; }
  .hero { padding-top: 30px; }
  .hero h1 { max-width: 20ch; }
  .hero-sub,
  .lead,
  .corpo p,
  .corpo li,
  .faq details p,
  .sec-cab p,
  .dest-txt p:not(.oab-linha):not(.rotulo),
  .sobre-grade p:not(.rotulo):not(.destaque) {
    font-size: 1rem;
    line-height: 1.78;
  }
  .btn { white-space: normal; line-height: 1.25; padding-top: .7rem; padding-bottom: .7rem; }
  .hero-btns .btn,
  .cta-btns .btn { min-height: 58px; }
}

@media (max-width:380px) {
  .cab-in,
  .cab.desceu .cab-in { min-height: 86px; padding-left: 16px; padding-right: 16px; }
  .marca img,
  .cab.desceu .marca img { height: 56px; max-width: 68vw; }
  .hero h1 { font-size: 2rem; }
}

/* Ajuste final de tipografia e formulário — revisão de conversão */
/* Títulos mantêm alinhamento editorial; somente textos corridos são justificados. */
.sec > .env > .rotulo,
.sec > .env > h2,
.sec-cab,
.sec-cab h2,
.sobre-grade > div > .rotulo,
.sobre-grade > div > h2,
.cta-grade h2,
.cta-grade .rotulo {
  text-align: left;
  margin-left: 0;
  margin-right: 0;
}

.sec-cab p,
.hero-sub,
.lead,
.corpo p,
.corpo li,
.faq details p,
.dest-txt p:not(.oab-linha):not(.rotulo),
.sobre-grade p:not(.rotulo):not(.destaque),
.contato-zap p,
.cta-grade p,
.cta>.env>p:not(.rotulo),
.rod-marca p,
.rod-aviso {
  text-align: justify;
  text-align-last: left;
  text-justify: inter-word;
  hyphens: manual;
  -webkit-hyphens: manual;
  word-break: normal;
  overflow-wrap: normal;
}

/* Evita espaços exagerados criados pela justificação em elementos curtos. */
.corpo li,
.faq details p,
.sec-cab p,
.hero-sub,
.lead,
.sobre-grade p:not(.rotulo):not(.destaque),
.cta-grade p {
  max-width: 70ch;
}

/* Formulário: aparência de atendimento profissional, com hierarquia clara. */
.form {
  background: #fbfaf6;
  border: 1px solid var(--borda);
  padding: clamp(24px, 3vw, 40px);
  box-shadow: 0 18px 45px -35px rgba(20, 25, 22, .35);
}
.form h3 {
  margin: 0 0 .55rem;
  color: var(--tinta);
  font-size: clamp(1.45rem, 2vw, 1.85rem);
}
.form-grid { gap: 1.15rem; }
.campo { gap: .5rem; }
.campo label {
  font-size: .78rem;
  letter-spacing: .02em;
  color: var(--tinta);
}
.campo input,
.campo select,
.campo textarea {
  min-height: 56px;
  padding: 0 1rem;
  background: #fff;
  border: 1px solid #d5d1c8;
  border-radius: 3px;
  box-sizing: border-box;
  transition: border-color .2s ease, box-shadow .2s ease, background .2s ease;
}
.campo textarea {
  min-height: 150px;
  padding: .9rem 1rem;
  line-height: 1.65;
}
.campo input:hover,
.campo select:hover,
.campo textarea:hover { border-color: #b9b3a8; }
.campo input:focus,
.campo select:focus,
.campo textarea:focus {
  border-color: var(--teal);
  outline: none;
  box-shadow: 0 0 0 3px rgba(14,113,103,.09);
  background: #fff;
}
.form-regra {
  margin: -.15rem 0 0;
  padding: .75rem 1rem;
  background: #f2f0ea;
  border-left: 3px solid var(--teal);
  font-size: .78rem;
}
.form .btn { min-height: 56px; font-size: .95rem; }
.form-aviso { margin-top: .2rem; font-size: .75rem; color: #77736b; }
.form-status { font-size: .9rem; }

.form-modal-card {
  width: min(800px, 100%);
  border-radius: 5px;
  overflow: hidden;
}
.form-modal-head {
  background: #f5f3ed;
  padding-bottom: 22px;
  border-bottom: 1px solid var(--borda);
}
.form-modal-head h2 { text-align: left; }
.form-modal-head>div>p:last-child {
  text-align: justify;
  text-align-last: left;
  max-width: 62ch;
}
.form-modal-body { background: #fbfaf6; }

@media (min-width: 640px) {
  .form-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 639px) {
  .sec > .env > h2,
  .sec-cab h2,
  .sobre-grade > div > h2,
  .cta-grade h2 { text-align: left; }
  .hero-sub, .lead { max-width: 100%; }
  .form { padding: 22px 18px; }
  .form-grid { gap: 1rem; }
  .campo input, .campo select, .campo textarea { min-height: 56px; font-size: 16px; }
  .campo textarea { min-height: 145px; }
  .form-modal-head { padding-bottom: 18px; }
  .form-modal-body { padding: 18px; }
}

/* ================================================================
   Refinamento final — hierarquia, leitura mobile e etapas
   ================================================================ */
/* Títulos: alinhamento editorial à esquerda em todas as telas. */
h1, h2, h3, h4, h5,
.sec > .env > .rotulo,
.sec > .env > h2,
.sec-cab,
.sec-cab h2,
.sobre-grade > div > .rotulo,
.sobre-grade > div > h2,
.cta-grade h2,
.cta-grade .rotulo,
.form h3,
.form-modal-head h2 {
  text-align: left;
  margin-left: 0;
  margin-right: 0;
}

/* Texto corrido: justificado, última linha sempre à esquerda.
   Não força quebra de palavras nem cria hifens artificiais. */
.corpo p, .corpo li,
.faq details p,
.sec-cab p,
.hero-sub, .lead,
.dest-txt p:not(.oab-linha):not(.rotulo),
.sobre-grade p:not(.rotulo):not(.destaque),
.contato-zap p,
.cta-grade p,
.cta > .env > p:not(.rotulo),
.rod-marca p, .rod-aviso,
.form-regra, .form-aviso,
.passo p {
  text-align: justify;
  text-align-last: left;
  text-justify: inter-word;
  hyphens: manual;
  -webkit-hyphens: manual;
  word-break: normal;
  overflow-wrap: normal;
}

/* Evita que parágrafos muito estreitos produzam rios de espaços. */
.sec-cab p,
.hero-sub,
.lead,
.corpo p,
.corpo li,
.faq details p,
.passo p { max-width: 68ch; }

/* Etapas: cada etapa é uma unidade visual independente. */
.passos { gap: 1rem; }
.passo {
  border: 1px solid var(--borda-f);
  border-left: 3px solid var(--verde);
  padding: 1.35rem 1.4rem 1.4rem;
  background: rgba(255,255,255,.025);
}
.passo:last-child { padding-bottom: 1.4rem; border-left-color: var(--verde); }
.passo::before { display:none; }
.passo::after {
  margin: 0 0 .7rem;
  font-size: 1.25rem;
  font-weight: 600;
}
.passo h4 { margin:0; font-size:1.05rem; line-height:1.35; }
.passo p { margin-top:.55rem; line-height:1.68; max-width:50ch; }

.sec-mar .passo { border-color:rgba(239,237,230,.2); border-left-color:var(--ouro); }
.sec-mar .passo:last-child { border-left-color:var(--ouro); }

@media (min-width:900px){
  .passos { grid-template-columns:repeat(4,minmax(0,1fr)); gap:0; }
  .passo {
    border-left:0;
    border-top:1px solid rgba(239,237,230,.28);
    border-right:1px solid rgba(239,237,230,.18);
    padding:1.55rem 1.45rem 1.2rem;
  }
  .passo:first-child { border-left:1px solid rgba(239,237,230,.18); }
  .sec-branca .passo,.sec-papel .passo { border-top-color:var(--borda-f); border-right-color:var(--borda-f); }
  .sec-branca .passo:first-child,.sec-papel .passo:first-child { border-left-color:var(--borda-f); }
  .passo:last-child { border-left:0; border-right:0; border-top-color:rgba(239,237,230,.28); }
  .sec-branca .passo:last-child,.sec-papel .passo:last-child { border-top-color:var(--borda-f); }
}

@media (max-width:639px){
  /* Mobile: títulos à esquerda e corpo confortável, sem aparência de texto espremido. */
  .sec > .env > .rotulo,
  .sec > .env > h2,
  .sec-cab,
  .sec-cab h2,
  .sobre-grade > div > .rotulo,
  .sobre-grade > div > h2,
  .cta-grade h2,
  .cta-grade .rotulo { text-align:left; }

  .corpo p, .corpo li,
  .faq details p,
  .sec-cab p,
  .hero-sub, .lead,
  .dest-txt p:not(.oab-linha):not(.rotulo),
  .sobre-grade p:not(.rotulo):not(.destaque),
  .contato-zap p,
  .cta-grade p,
  .cta > .env > p:not(.rotulo),
  .passo p {
    text-align:justify;
    text-align-last:left;
    hyphens:manual;
    -webkit-hyphens:manual;
    word-break:normal;
    overflow-wrap:normal;
    max-width:none;
  }

  .sec-cab p { margin-top:.9rem; }

  .passos { margin-top:2rem; gap:.85rem; }
  .passo {
    padding:1.15rem 1.1rem 1.2rem;
    border:1px solid var(--borda-f);
    border-left:3px solid var(--verde);
    background:rgba(255,255,255,.035);
  }
  .sec-mar .passo { border-left-color:var(--ouro); }
  .passo::after { font-size:1.15rem; margin-bottom:.55rem; }
  .passo h4 { font-size:1rem; }
  .passo p { font-size:.97rem; line-height:1.7; }
}

/* =========================================================
   AJUSTE FINAL DE HIERARQUIA E LEITURA — DESKTOP + MOBILE
   Títulos sempre à esquerda; corpo justificado com última
   linha à esquerda. Evita espaçamento visual irregular.
   ========================================================= */
.sec > .env > .rotulo,
.sec > .env > h2,
.sec-cab,
.sec-cab h2,
.sobre-grade > div > .rotulo,
.sobre-grade > div > h2,
.cta-grade h2,
.cta-grade .rotulo,
.form h3,
.form-modal-head h2,
.hero h1,
.hero .rotulo,
.dest-txt h1,
.dest-txt h2,
.corpo h2,
.corpo h3,
.corpo h4 {
  text-align: left !important;
  margin-left: 0;
  margin-right: 0;
}

/* Corpo: justificação equilibrada e última linha à esquerda. */
.corpo p,
.corpo li,
.faq details p,
.sec-cab p,
.hero-sub,
.lead,
.dest-txt p:not(.oab-linha):not(.rotulo),
.sobre-grade p:not(.rotulo):not(.destaque),
.contato-zap p,
.cta-grade p,
.cta > .env > p:not(.rotulo),
.rod-marca p,
.rod-aviso,
.form-regra,
.form-aviso,
.passo p {
  text-align: justify !important;
  text-align-last: left !important;
  text-justify: inter-word;
  hyphens: manual;
  -webkit-hyphens: manual;
  word-break: normal;
  overflow-wrap: normal;
}

/* No desktop, não estreitar excessivamente o texto: isso reduz os
   "rios" de espaços criados pela justificação. */
.sec-cab p,
.hero-sub,
.lead,
.corpo p,
.corpo li,
.faq details p,
.passo p {
  max-width: 72ch;
}

/* Títulos de seção mantêm uma largura confortável e leitura editorial. */
.sec > .env > h2,
.sec-cab h2,
.sobre-grade > div > h2,
.cta-grade h2 {
  max-width: 22ch;
  line-height: 1.12;
}

/* Etapas: desktop legível, sem quatro colunas apertadas. */
@media (min-width: 900px) {
  .passos {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1rem;
  }
  .passo,
  .sec-branca .passo,
  .sec-papel .passo,
  .sec-mar .passo {
    border: 1px solid var(--borda-f);
    border-left: 3px solid var(--verde);
    padding: 1.5rem 1.5rem 1.45rem;
  }
  .sec-mar .passo { border-left-color: var(--ouro); }
  .passo:last-child,
  .sec-branca .passo:last-child,
  .sec-papel .passo:last-child,
  .sec-mar .passo:last-child {
    border-right: 1px solid var(--borda-f);
    border-top: 1px solid var(--borda-f);
  }
}

/* Formulário: largura e leitura consistentes no desktop. */
.form,
.form-modal,
.form-modal-inner {
  text-align: left;
}
.form label,
.form-modal label {
  text-align: left;
}

@media (max-width: 899px) {
  .sec > .env > .rotulo,
  .sec > .env > h2,
  .sec-cab,
  .sec-cab h2,
  .sobre-grade > div > .rotulo,
  .sobre-grade > div > h2,
  .cta-grade h2,
  .cta-grade .rotulo,
  .hero h1,
  .dest-txt h1,
  .dest-txt h2,
  .corpo h2,
  .corpo h3,
  .corpo h4 {
    text-align: left !important;
  }

  .corpo p,
  .corpo li,
  .faq details p,
  .sec-cab p,
  .hero-sub,
  .lead,
  .dest-txt p:not(.oab-linha):not(.rotulo),
  .sobre-grade p:not(.rotulo):not(.destaque),
  .contato-zap p,
  .cta-grade p,
  .cta > .env > p:not(.rotulo),
  .passo p {
    text-align: justify !important;
    text-align-last: left !important;
    max-width: none;
  }

  .passos {
    grid-template-columns: 1fr;
  }
}

/* ================================================================
   V15 — TIPOGRAFIA FINAL
   Justificado no celular e no PC. Hifenização ligada para fechar as
   linhas sem abrir espaços. Última linha e títulos à esquerda.
   ================================================================ */

/* Títulos e rótulos: sempre à esquerda, nunca justificados, sem hífen */
h1,h2,h3,h4,h5,h6,
.rotulo,.hf-cab,.oab-linha,.dir-a,.area-n,.hf-n,.sc-num b,.sc-num span,
.btn,.area h3,.dir-q,figcaption,label,th,summary{
  text-align:left !important;
  text-align-last:left !important;
  hyphens:none !important; -webkit-hyphens:none !important;
  word-spacing:normal !important;
}

/* Corpo de texto: justificado em TODA largura, com hifenização */
p,li,
.corpo p,.corpo li,.dest-txt p,.dest-txt li,.caixa p,.faq details p,
.sec-cab p,.cta p,.lead,.rod-aviso,.hero-sub,.area p,.passo p,.dir p{
  text-align:justify;
  text-align-last:left;     /* última linha à esquerda */
  hyphens:auto;             /* hífen no fim da linha evita espaços largos */
  -webkit-hyphens:auto; -ms-hyphens:auto;
  hyphenate-limit-chars:6 3 3;   /* só quebra palavra de 6+ letras */
  overflow-wrap:break-word;
  word-break:normal;
  word-spacing:normal;
}

/* Itens de lista curtos e rótulos dentro de listas não justificam */
.areas-cat a,.hero-frentes a,.rel a,.rod li,.mega a,.gaveta a,
.dest-lista li,nav li,.migalha{
  text-align:left !important; text-align-last:left !important;
  hyphens:none !important; -webkit-hyphens:none !important;
}

/* Trechos muito estreitos ficam à esquerda: justificar ali abre espaço
   mesmo com hífen (coluna curta demais para distribuir). */
@media(max-width:360px){
  p,li,.lead,.hero-sub,.area p{text-align:left;hyphens:auto}
}

/* V15.1 — hifenização mais ativa: fecha as linhas e elimina os espaços largos.
   5 2 2 = quebra palavras de 5+ letras, deixando 2 antes e 2 depois do hífen. */
p,li,.corpo p,.corpo li,.dest-txt p,.caixa p,.faq details p,
.sec-cab p,.cta p,.lead,.rod-aviso,.hero-sub,.area p,.passo p{
  hyphenate-limit-chars:5 2 2;
  -webkit-hyphenate-limit-before:2; -webkit-hyphenate-limit-after:2;
  hyphenate-limit-lines:2;          /* no máximo 2 linhas seguidas com hífen */
  text-wrap:auto;                   /* deixa o justificador trabalhar livre */
}

/* ================================================================
   V16 — HERO SEM CORTE + ESPAÇAMENTO GARANTIDO
   ================================================================ */

/* 1) Foto do hero: proporção real da imagem (16:9). Sem altura fixa,
      então o object-fit não tem o que recortar — a foto aparece inteira. */
.hero-fig img{
  height:auto !important;
  aspect-ratio:16/9;
  object-fit:cover;
  object-position:center;
  width:100%;
  display:block;
}
@media(max-width:700px){
  .hero-fig img{aspect-ratio:16/10}   /* um pouco mais alta no celular */
}

/* 2) ESPAÇAMENTO: justifica só quando o navegador sabe hifenizar em
      português. O teste roda no carregamento e marca <html>.
      Sem hifenização, justificar abriria vãos — então fica à esquerda. */
.hifen-ok p, .hifen-ok li,
.hifen-ok .corpo p, .hifen-ok .corpo li, .hifen-ok .dest-txt p,
.hifen-ok .caixa p, .hifen-ok .faq details p, .hifen-ok .sec-cab p,
.hifen-ok .cta p, .hifen-ok .lead, .hifen-ok .rod-aviso,
.hifen-ok .hero-sub, .hifen-ok .area p, .hifen-ok .passo p{
  text-align:justify; text-align-last:left;
  hyphens:auto; -webkit-hyphens:auto;
  hyphenate-limit-chars:5 2 2;
}
/* padrão (sem hifenização disponível): esquerda, espaçamento natural */
p, li, .corpo p, .corpo li, .dest-txt p, .caixa p, .faq details p,
.sec-cab p, .cta p, .lead, .rod-aviso, .hero-sub, .area p, .passo p{
  text-align:left;
  text-align-last:left;
  word-spacing:normal;
  text-wrap:pretty;
  overflow-wrap:break-word;
}
/* Títulos nunca justificam nem hifenizam, em qualquer cenário */
h1,h2,h3,h4,h5,h6,.rotulo,.olho,.btn,.area h3,.dir-q,.hf-cab,.oab-linha{
  text-align:left !important; text-align-last:left !important;
  hyphens:none !important; -webkit-hyphens:none !important;
}

/* ================================================================
   V17 — MEDIDA DE LINHA (legibilidade)
   Alvo: 60–75 caracteres por linha. Textos pequenos precisam de
   coluna mais curta, não mais longa.
   ================================================================ */
.rod-aviso{max-width:66ch}
.form-aviso,.form-regra,.campo-full.form-aviso,.campo-full.form-regra{max-width:64ch}
.lead{max-width:62ch}
.corpo p,.corpo li,.dest-txt p,.caixa p,.faq details p,.sec-cab p{max-width:70ch}
.hero-sub{max-width:54ch}
.area p,.dir p,.passo p{max-width:48ch}

/* No celular a coluna já é estreita: max-width não deve encolher mais */
@media(max-width:760px){
  .rod-aviso,.form-aviso,.form-regra,.lead,.corpo p,.corpo li,
  .dest-txt p,.caixa p,.faq details p,.sec-cab p,.hero-sub,
  .area p,.dir p,.passo p{max-width:100%}
}

/* ================================================================
   V18 — TEXTO NO CELULAR
   Coluna estreita não comporta justificação: mesmo com hifenização
   sobra espaço irregular entre as palavras. Abaixo de 768px o texto
   fica alinhado à esquerda, com espaçamento natural e uniforme.
   ================================================================ */
@media(max-width:767px){
  html.hifen-ok p, html.hifen-ok li,
  html.hifen-ok .corpo p, html.hifen-ok .corpo li, html.hifen-ok .dest-txt p,
  html.hifen-ok .caixa p, html.hifen-ok .faq details p, html.hifen-ok .sec-cab p,
  html.hifen-ok .cta p, html.hifen-ok .lead, html.hifen-ok .rod-aviso,
  html.hifen-ok .hero-sub, html.hifen-ok .area p, html.hifen-ok .passo p,
  p, li, .corpo p, .corpo li, .dest-txt p, .caixa p, .faq details p,
  .sec-cab p, .cta p, .lead, .rod-aviso, .hero-sub, .area p, .passo p{
    text-align:left !important;
    text-align-last:left !important;
    word-spacing:normal !important;
    hyphens:auto;              /* hífen só para não estourar palavra longa */
    -webkit-hyphens:auto;
    text-wrap:pretty;
  }
}

/* V18.1 — sobrepõe a regra de 899px com a MESMA lista de seletores,
   prefixada por "html body" para garantir a precedência no celular. */
@media(max-width:767px){
  html body .corpo p,
  html body .corpo li,
  html body .faq details p,
  html body .sec-cab p,
  html body .hero-sub,
  html body .lead,
  html body .dest-txt p:not(.oab-linha):not(.rotulo),
  html body .sobre-grade p:not(.rotulo):not(.destaque),
  html body .contato-zap p,
  html body .cta-grade p,
  html body .cta > .env > p:not(.rotulo),
  html body .passo p,
  html body .caixa p,
  html body .area p,
  html body .rod-aviso,
  html body p,
  html body li{
    text-align:left !important;
    text-align-last:left !important;
    word-spacing:normal !important;
  }
}








/* V20 — avisos do formulário nunca justificam (texto curto, coluna estreita) */
html body .form-regra,
html body .form-aviso,
html body .form-status,
html body .campo-full.form-regra,
html body .campo-full.form-aviso{
  text-align:left !important; text-align-last:left !important;
  word-spacing:normal !important; hyphens:none !important;
}

/* ================================================================
   V23 — TEXTO JUSTIFICADO EM TODAS AS TELAS
   Justificado + última linha à esquerda + hifenização.
   Sobrepõe as regras anteriores que alinhavam à esquerda no celular.
   ================================================================ */

/* 1) Corpo de texto: justificado em qualquer largura */
html body p,
html body li,
html body .corpo p, html body .corpo li,
html body .dest-txt p:not(.oab-linha):not(.rotulo),
html body .sobre-grade p:not(.rotulo):not(.destaque),
html body .caixa p,
html body .faq details p,
html body .sec-cab p,
html body .cta p, html body .cta-grade p,
html body .cta > .env > p:not(.rotulo),
html body .contato-zap p,
html body .lead,
html body .hero-sub,
html body .area p,
html body .passo p,
html body .rod-aviso,
html body .rod p,
html body footer p{
  text-align:justify !important;
  text-align-last:left !important;      /* última linha à esquerda */
  hyphens:auto !important;
  -webkit-hyphens:auto !important;
  -ms-hyphens:auto !important;
  hyphenate-limit-chars:4 2 2;          /* quebra a partir de 4 letras */
  -webkit-hyphenate-limit-before:2;
  -webkit-hyphenate-limit-after:2;
  overflow-wrap:break-word;
  word-break:normal;
  word-spacing:normal !important;
  text-wrap:auto;                       /* não competir com a justificação */
}

/* 2) Nunca justificar: títulos, rótulos, botões, menus e textos curtos.
      Justificar duas ou três palavras é o que cria os vãos absurdos. */
html body h1, html body h2, html body h3, html body h4, html body h5, html body h6,
html body .rotulo, html body .olho, html body .hf-cab, html body .oab-linha,
html body .btn, html body button, html body label, html body summary,
html body .area h3, html body .dir-q, html body .dir-a, html body .area-n,
html body .form-regra, html body .form-aviso, html body .form-status,
html body .migalha, html body nav li, html body nav a,
html body .gaveta a, html body .mega a, html body .rel a,
html body .rod li, html body .rod li a, html body .rod-base,
html body .areas-cat a, html body .hero-frentes a,
html body .dest-lista li, html body .sc-num b, html body .sc-num span,
html body figcaption, html body th, html body td{
  text-align:left !important;
  text-align-last:left !important;
  hyphens:none !important;
  -webkit-hyphens:none !important;
  word-spacing:normal !important;
}

/* 3) Mais caracteres por linha no celular = menos esticamento.
      É a alavanca real contra o vão: quanto mais palavras cabem,
      menos o navegador precisa distribuir espaço. */
@media(max-width:767px){
  html body p, html body li, html body .lead, html body .hero-sub,
  html body .corpo p, html body .corpo li, html body .dest-txt p{
    font-size:16.2px;
    line-height:1.68;
    letter-spacing:-.004em;   /* aperta levemente, cabe mais por linha */
    max-width:100%;
  }
  /* respiro lateral menor devolve largura útil ao texto */
  html body .env{width:min(var(--max,1220px),calc(100% - 36px))}
}
@media(max-width:400px){
  html body p, html body li, html body .corpo p{font-size:15.8px}
  html body .env{width:calc(100% - 30px)}
}

/* 4) Parágrafos muito curtos não justificam: com 1–2 linhas o
      esticamento fica visível e não há ganho estético. */
html body p:has(br:only-child){text-align:left !important}

/* ================================================================
   V24 — NOTIFICAÇÃO DE ENVIO + FORMULÁRIO NO CELULAR
   ================================================================ */

/* Confirmação visível após o envio */
.aviso-envio{
  position:fixed; inset:0; z-index:120;
  display:flex; align-items:center; justify-content:center;
  padding:22px; background:rgba(11,18,32,.55);
  -webkit-backdrop-filter:blur(2px); backdrop-filter:blur(2px);
}
.aviso-envio-card{
  background:var(--white,#fbfaf6); border:1px solid var(--line,#d8d5cd);
  border-top:3px solid var(--green,#1f5a40);
  max-width:430px; width:100%; padding:30px 28px 26px; text-align:center;
  box-shadow:0 30px 70px -28px rgba(11,18,32,.5);
}
.aviso-envio-icone{
  width:56px; height:56px; margin:0 auto 16px; border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  background:rgba(31,90,64,.1); color:var(--green,#1f5a40);
}
.aviso-envio-icone svg{width:28px;height:28px}
.aviso-envio-card h3{
  margin:0 0 8px; font-size:1.34rem;
  text-align:center !important; text-align-last:center !important;
}
.aviso-envio-card p{
  margin:0 0 20px; color:var(--ink-soft,#51595b); font-size:.97rem;
  text-align:center !important; text-align-last:center !important;
  hyphens:none !important;
}
.aviso-envio-card .btn{width:100%; min-height:50px}

/* Formulário no celular: campos maiores e rolagem confortável */
@media(max-width:767px){
  html body .form{padding:22px 18px; gap:16px}
  html body .form .campo{gap:8px}
  html body .form .campo input,
  html body .form .campo select,
  html body .form .campo textarea{
    font-size:16px;               /* evita o zoom automático do iOS */
    padding:14px 14px; min-height:52px;
  }
  html body .form .campo textarea{min-height:130px; resize:vertical}
  html body .form .campo label{font-size:.84rem; margin-bottom:2px}
  html body .form button[type="submit"]{min-height:56px; font-size:1rem; width:100%}
  /* o toque para rolar não deve ser capturado pelos campos */
  html body .form, html body .form .campo{touch-action:pan-y}
  html body #contato{scroll-margin-top:84px}
}



/* ================================================================
   MODAL DE CONTATO — implementação única
   Desenho: o OVERLAY rola; o card cresce naturalmente. Não impor
   altura fixa ao card nem rolagem interna — foi o que causava o
   travamento no celular.
   ================================================================ */
#formModal.form-modal{
  position:fixed; top:0; right:0; bottom:0; left:0;
  z-index:140;
  display:flex; align-items:flex-start; justify-content:center;
  padding:14px 12px 28px;
  background:rgba(18,21,19,.62);
  overflow-y:auto;                     /* é aqui que a rolagem acontece */
  -webkit-overflow-scrolling:touch;
  overscroll-behavior:contain;
  touch-action:pan-y;                  /* nunca 'none': bloquearia os filhos */
}
#formModal[hidden]{display:none}

#formModal .form-modal-card{
  width:100%; max-width:640px;
  margin:auto 0;                       /* centraliza quando couber na tela */
  background:var(--white,#fbfaf6);
  border:1px solid var(--line,#d8d5cd);
  max-height:none;                     /* sem teto: o overlay é que rola */
  height:auto; overflow:visible;
  display:block;
  touch-action:pan-y;
}

#formModal .form-modal-body{ overflow:visible; height:auto; touch-action:pan-y; }
#formModal .form, #formModal .form-grid{ overflow:visible; height:auto; }

/* botão de envio: bloco normal no fim do formulário */
#formModal .form-modal-foot{
  padding:0 clamp(20px,3vw,36px) clamp(22px,3vw,30px);
  background:transparent; border:0;
}
#formModal .form-modal-foot .campo,
#formModal .form-modal-foot .campo-full{ margin:0; padding:0; position:static; box-shadow:none }
#formModal .form-modal-foot .btn{ width:100%; margin:0 }
#formModal .campo-full:has(button[type="submit"]){ position:static; box-shadow:none }

/* campos confortáveis no toque; 16px evita o zoom automático do iOS */
@media(max-width:767px){
  #formModal.form-modal{ padding:10px 10px 24px }
  #formModal .form-modal-card{ max-width:100% }
  #formModal .campo input,
  #formModal .campo select,
  #formModal .campo textarea{ font-size:16px; min-height:52px; padding:13px 14px }
  #formModal .campo textarea{ min-height:120px }
  #formModal .form-modal-foot .btn{ min-height:56px }
}

/* a confirmação fica acima de qualquer camada, inclusive do modal */
#avisoEnvio.aviso-envio{ z-index:200 }

/* ================================================================
   CONSISTÊNCIA TIPOGRÁFICA DAS SEÇÕES
   Os H2 de FAQ e do formulário ficavam menores que os demais porque
   não estavam em .sec-cab nem em .corpo — caíam no tamanho base.
   Resultado: a pergunta do FAQ (negrito) parecia maior que o título
   acima dela, invertendo a hierarquia.
   ================================================================ */
.sec > .env > h2,
.sec > .env.med > h2,
.sec .env.med > .rotulo + h2{
  font-size:clamp(1.7rem,2.9vw,2.4rem);
  line-height:1.14;
  margin:.7rem 0 0;
}

/* FAQ: a pergunta é subordinada ao título da seção */
.faq summary{
  font-family:var(--sans);
  font-size:1.02rem;
  font-weight:600;
  letter-spacing:-.005em;
}
.faq details p{font-size:.97rem}

/* Formulário: alinhar ao ritmo tipográfico do corpo da página */
.form .campo input,
.form .campo select,
.form .campo textarea{font-size:16.5px}
.form .campo label{
  font-size:.74rem; font-weight:600;
  letter-spacing:.09em; text-transform:uppercase;
}
.form button[type="submit"]{font-size:.95rem}
.form .form-regra,
.form .form-aviso{font-size:.84rem; line-height:1.6}

@media(max-width:767px){
  .sec > .env > h2, .sec > .env.med > h2{font-size:1.62rem}
  .faq summary{font-size:1rem}
  .form .campo input,
  .form .campo select,
  .form .campo textarea{font-size:16px}
}

/* ================================================================
   ESPAÇAMENTO DO FORMULÁRIO
   O rótulo ficava colado no campo anterior (0px) e a 10px do próprio
   campo — o olho agrupava errado. Agora a distância entre grupos é
   maior que a distância interna do grupo.
   ================================================================ */
.form{ gap:22px 18px; }
.form .campo{ display:flex; flex-direction:column; gap:7px; }
.form .campo label{ margin:0; line-height:1.25; }
.form .campo input,
.form .campo select,
.form .campo textarea{ margin:0; width:100%; }

/* campos que ocupam a linha inteira mantêm o mesmo respiro */
.form .campo-full{ margin:0; }

@media(max-width:767px){
  .form{ gap:20px 0; padding:22px 18px; }
  .form .campo{ gap:7px; }
  /* aviso e botão ganham separação clara do último campo */
  .form .form-regra{ margin-top:2px; }
  .form button[type="submit"]{ margin-top:4px; }
}

/* o contêiner em grade é .form-grid (não .form) */
.form .form-grid{ gap:22px 18px; }
@media(max-width:767px){ .form .form-grid{ gap:20px 0; } }

/* Os .campo são filhos diretos de <form class="form"> nas páginas de
   área (o .form-grid só existe no modal). A separação entre grupos
   precisa vir do próprio form. */
form.form{ display:grid; grid-template-columns:1fr; gap:22px; }
@media(min-width:760px){
  form.form{ grid-template-columns:repeat(2,minmax(0,1fr)); gap:22px 18px; }
  form.form .campo-full,
  form.form .form-regra,
  form.form .form-aviso,
  form.form .form-status,
  form.form button[type="submit"]{ grid-column:1/-1; }
}
form.form > .campo{ display:flex; flex-direction:column; gap:7px; margin:0; }
form.form > .form-regra,
form.form > .form-aviso,
form.form > .form-status{ margin:0; }