/* Institucional — escrita mobile primeiro.
   A base é o celular; as media queries só ampliam a partir daí. */

.claro{background:var(--cinza)}
.rotulo.lima{color:var(--lima)}

/* ---------- nav ---------- */
.btn-nav{
  display:none;
  background:var(--lima);color:var(--tinta);text-decoration:none;
  font:700 .85rem Inter;padding:9px 15px;border-radius:7px;white-space:nowrap;
}
.btn-nav:hover{background:var(--lima-esc)}

/* ---------- topo ---------- */
header.topo{padding:44px 0 52px}
header h1{margin-top:16px}
.frase{font-size:1.02rem}

.acoes{display:flex;flex-wrap:wrap;gap:12px;margin-top:28px}
.btn,.btn-vazio{
  display:inline-flex;align-items:center;justify-content:center;text-decoration:none;
  font-family:Archivo;font-weight:800;font-size:.98rem;padding:15px 24px;border-radius:9px;
  transition:background .15s,color .15s;
}
.btn{background:var(--lima);color:var(--tinta)}
.btn:hover{background:var(--lima-esc)}
.btn-vazio{border:1px solid rgba(255,255,255,.34);color:#fff}
.btn-vazio:hover{background:rgba(255,255,255,.09)}

.pilulas{list-style:none;display:flex;flex-wrap:wrap;gap:8px;margin-top:30px}
.pilulas li{
  font:600 .8rem Inter;color:#C9D1D6;border:1px solid rgba(255,255,255,.2);
  border-radius:99px;padding:7px 13px;display:flex;align-items:center;gap:7px;
}
.pilulas li::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--lima)}

/* ---------- vantagens ---------- */
h2{margin-top:.7rem}
.apoio{margin-top:14px;max-width:62ch}
.cards{display:grid;gap:16px;margin-top:28px}
.cards article{
  background:#fff;border:1px solid var(--borda);border-radius:var(--raio);padding:24px 22px;
  border-top:3px solid var(--lima);
}
.cards h3{font-size:1.08rem}
.cards p{font-size:.95rem;margin-top:9px}

/* ---------- linhas ---------- */
.linhas{list-style:none;display:grid;gap:10px;margin-top:26px}
.linhas li{
  background:#fff;border:1px solid var(--borda);border-radius:9px;padding:15px 17px;
  font-size:.94rem;display:flex;flex-direction:column;gap:4px;
}
.linhas span{
  font:800 .72rem/1 Archivo;letter-spacing:.1em;text-transform:uppercase;color:var(--chumbo);
}
.nota{margin-top:20px;font-size:.9rem;color:#6C767C;border-left:3px solid var(--lima);padding-left:14px}

/* ---------- marcas ---------- */
.marcas{display:grid;gap:18px;margin-top:28px}
.cartao{
  background:#fff;border:1px solid var(--borda);border-radius:var(--raio);
  padding:26px 24px;position:relative;overflow:hidden;
}
.claro .cartao,.numeros+section .cartao{background:#fff}
.risco{position:absolute;top:0;left:0;right:0;height:4px}
.cartao h3{font-size:1.35rem}
.cartao .tipo{
  font:600 11px/1 Inter;letter-spacing:.12em;text-transform:uppercase;
  color:var(--chumbo);margin:9px 0 13px;
}
.cartao p{font-size:.95rem}
.link{
  display:inline-flex;align-items:center;gap:7px;margin-top:16px;
  font:600 .88rem Inter;color:var(--tinta);text-decoration:none;
  border-bottom:2px solid var(--lima);padding-bottom:2px;
}

/* ---------- números ---------- */
.numeros{background:var(--chumbo);color:#C9D1D6;padding:52px 0}
.grade-num{display:grid;gap:22px}
.grade-num>div{border-top:3px solid var(--lima);padding-top:15px}
.grade-num dt{
  font-family:Archivo;font-weight:800;font-size:2.6rem;color:#fff;line-height:1;
  font-variant-numeric:tabular-nums;
}
.grade-num dd{margin-top:8px;font-size:.93rem;max-width:26ch}

/* ---------- mapa ---------- */
.mapa-bloco{display:grid;gap:22px;margin-top:28px}
.mapa{
  border-radius:var(--raio);overflow:hidden;border:1px solid #CBD3D8;
  aspect-ratio:4/3;background:#C6CED3;
}
.mapa iframe{width:100%;height:100%;border:0;display:block;filter:grayscale(.25)}
.endereco{background:#fff;border:1px solid var(--borda);border-radius:var(--raio);padding:26px 24px}
.endereco h3{font-size:1.1rem}
address{font-style:normal;font-size:1rem;color:var(--tinta);font-weight:600;margin:12px 0 16px;line-height:1.55}
.endereco p{font-size:.94rem}
.endereco p+p{margin-top:10px}
.secundario{color:#6C767C;font-size:.9rem}
.secundario b{color:var(--tinta)}

/* ---------- chamada final ---------- */
.chamada{background:var(--chumbo);color:#C9D1D6;text-align:center}
.chamada h2{color:#fff}
.chamada p{margin-top:14px;max-width:56ch;margin-left:auto;margin-right:auto}
.chamada .acoes{justify-content:center}
.aviso-cnpj{font-size:.85rem;color:#8A959B;margin-top:18px}

/* ================= desktop: mais respiro e presença ================= */
@media(min-width:760px){
  .cards{grid-template-columns:1fr 1fr;gap:20px}
  .linhas{grid-template-columns:1fr 1fr}
  .marcas{grid-template-columns:1fr 1fr;gap:22px}
  .grade-num{grid-template-columns:repeat(3,1fr);gap:28px}
  .mapa-bloco{grid-template-columns:1.1fr .9fr;gap:30px;align-items:stretch}
  .mapa{aspect-ratio:auto;min-height:340px}
}
@media(min-width:1024px){
  header.topo{padding:88px 0 96px}
  header h1{font-size:4.1rem;max-width:16ch;margin-top:22px}
  .frase{font-size:1.24rem;max-width:56ch;margin-top:22px}
  .acoes{margin-top:38px}
  .btn,.btn-vazio{font-size:1.06rem;padding:17px 30px}
  .pilulas{margin-top:40px}
  .pilulas li{font-size:.87rem;padding:9px 16px}
  section{padding:96px 0}
  h2{font-size:2.9rem}
  .cards{grid-template-columns:repeat(4,1fr)}
  .cards article{padding:30px 26px}
  .linhas{grid-template-columns:repeat(3,1fr)}
  .linhas li{padding:19px 21px;font-size:1rem}
  .grade-num dt{font-size:4.2rem}
  .grade-num dd{font-size:1rem}
  .numeros{padding:76px 0}
  .btn-nav{display:inline-flex;align-items:center}
  nav .col{gap:28px}
  nav .menu{margin-left:auto}
  .mapa{min-height:420px}
  .endereco{padding:34px 32px}
  .chamada h2{font-size:3rem}
  .chamada p{font-size:1.1rem}
}