/* ============================================================
   INSTITUTO VALVERDE · páginas de cidade (Local SEO)
   Mesmo sistema visual da LP, enxuto: estas páginas existem para
   responder "harmonização orofacial em {cidade}" e mandar a
   paciente para o WhatsApp ou para a home.
   ============================================================ */
:root{
  --creme:#F7F3EB; --creme-2:#EFE7D8; --verde:#175034; --verde-fundo:#0C2A1C;
  --verde-noite:#081A11; --dourado:#B18A57; --dourado-claro:#D6B98A;
  --tinta:#141A16; --texto:#4A564E; --texto-claro:#CFC7B8;
  --serif:"Cormorant Garamond", Georgia, serif;
  --sans:"Jost", "Helvetica Neue", sans-serif;
  --max:1120px;
}
*{box-sizing:border-box}
body{
  margin:0;background:var(--creme);color:var(--texto);font-family:var(--sans);
  font-weight:300;line-height:1.85;-webkit-font-smoothing:antialiased
}
.wrap{max-width:var(--max);margin:0 auto;padding:0 5vw}
.estreito{max-width:780px}

/* topo */
.topo{background:var(--verde-noite);padding:1.1rem 0;position:sticky;top:0;z-index:50}
.topo .wrap{display:flex;align-items:center;justify-content:space-between;gap:1rem}
.topo img{height:40px;width:auto}
.topo .zap{
  display:inline-flex;align-items:center;gap:.55rem;background:var(--verde);
  color:var(--creme);text-decoration:none;padding:.75rem 1.2rem;
  font-size:.68rem;letter-spacing:.2em;text-transform:uppercase
}
.topo .zap:hover{background:var(--dourado);color:var(--verde-noite)}
.topo .zap svg{width:16px;height:16px;fill:currentColor}

/* capa */
.capa{background:var(--verde-noite);color:var(--creme);padding:4rem 0 3.6rem}
.migalha{font-size:.7rem;letter-spacing:.16em;text-transform:uppercase;color:rgba(214,185,138,.8);margin:0 0 1.4rem}
.migalha a{color:inherit;text-decoration:none;border-bottom:1px solid rgba(214,185,138,.4)}
.migalha a:hover{color:var(--creme)}
.capa h1{
  font-family:var(--serif);font-weight:300;font-size:clamp(2.2rem,5.4vw,3.5rem);
  line-height:1.08;margin:0 0 1.2rem
}
.capa h1 em{font-style:italic;color:var(--dourado-claro)}
.capa .linha-fina{color:var(--texto-claro);font-size:1rem;max-width:66ch;margin:0}

/* ficha de fatos — o bloco que a IA cita */
.ficha{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:1px;
  background:rgba(214,185,138,.28);border:1px solid rgba(214,185,138,.28);margin-top:2.4rem
}
.ficha div{background:var(--verde-noite);padding:1.1rem 1.2rem}
.ficha dt{font-size:.63rem;letter-spacing:.2em;text-transform:uppercase;color:var(--dourado-claro);margin:0 0 .3rem}
.ficha dd{margin:0;color:var(--creme);font-size:.92rem;line-height:1.6}

main{padding:4rem 0 4.5rem}
h2{
  font-family:var(--serif);font-weight:400;color:var(--tinta);
  font-size:clamp(1.55rem,3.1vw,2.15rem);line-height:1.22;margin:3.2rem 0 1.1rem
}
h2:first-child{margin-top:0}
h3{font-family:var(--sans);font-weight:500;color:var(--tinta);font-size:1rem;margin:1.9rem 0 .4rem}
p,li{font-size:.97rem}
a{color:var(--verde);text-underline-offset:3px}
strong{font-weight:500;color:var(--tinta)}

.passos{list-style:none;padding:0;margin:1.4rem 0 0;display:grid;gap:1rem}
.passos li{
  position:relative;padding-left:2.6rem;counter-increment:passo
}
.passos li::before{
  content:counter(passo,decimal-leading-zero);position:absolute;left:0;top:.05em;
  font-family:var(--serif);font-size:1.1rem;color:var(--dourado)
}
.passos{counter-reset:passo}

.procs{list-style:none;padding:0;margin:1.3rem 0 0;display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:1px;background:rgba(23,80,52,.14);border:1px solid rgba(23,80,52,.14)}
.procs li{background:var(--creme);padding:1.1rem 1.2rem}
.procs b{display:block;font-family:var(--serif);font-size:1.16rem;font-weight:400;color:var(--tinta);margin-bottom:.2rem}
.procs span{font-size:.86rem;line-height:1.6}

.faq{margin-top:1.2rem}
.faq details{border-bottom:1px solid rgba(23,80,52,.16);padding:1.2rem 0}
.faq summary{
  cursor:pointer;list-style:none;font-family:var(--serif);font-size:1.2rem;color:var(--tinta)
}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";float:right;color:var(--dourado)}
.faq details[open] summary::after{content:"–"}
.faq .resp{padding-top:.7rem;font-size:.95rem}

.chamada{
  background:var(--verde-fundo);color:var(--creme);padding:2.6rem 2.2rem;margin-top:3.4rem;
  display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:1.6rem
}
.chamada h2{color:var(--creme);margin:0;font-size:clamp(1.5rem,3vw,2rem)}
.chamada p{margin:.5rem 0 0;color:var(--texto-claro);font-size:.92rem;max-width:46ch}
.chamada a{
  display:inline-flex;align-items:center;gap:.6rem;background:var(--dourado);color:var(--verde-noite);
  text-decoration:none;padding:1rem 1.7rem;font-size:.72rem;letter-spacing:.2em;text-transform:uppercase;
  white-space:nowrap
}
.chamada a:hover{background:var(--creme)}
.chamada a svg{width:18px;height:18px;fill:currentColor}

.vizinhas{margin-top:3.4rem;border-top:1px solid rgba(23,80,52,.16);padding-top:1.6rem}
.vizinhas p.tit{font-size:.68rem;letter-spacing:.2em;text-transform:uppercase;color:var(--dourado);margin:0 0 .9rem}
.vizinhas ul{list-style:none;padding:0;margin:0;display:flex;flex-wrap:wrap;gap:.5rem}
.vizinhas a{
  display:inline-block;border:1px solid rgba(23,80,52,.22);padding:.5rem .9rem;
  font-size:.8rem;text-decoration:none;color:var(--verde)
}
.vizinhas a:hover{background:var(--verde);color:var(--creme)}

footer{background:var(--verde-noite);color:var(--texto-claro);padding:2.6rem 0;font-size:.78rem}
footer .wrap{display:flex;flex-wrap:wrap;gap:.7rem 2rem;justify-content:space-between}
footer a{color:var(--dourado-claro)}

@media (max-width:640px){
  .topo .zap span{display:none}
  .chamada{padding:2rem 1.5rem}
}