/* ══════════════════════════════════════════════════════════════════════════
   IBRADIM — Instituto Brasileiro de Desenvolvimento Integrado dos Municípios

   O DNA está no selo. Medi o disco do logotipo da esquerda para a direita e
   ele percorre azul #0171FC → turquesa #2FC7BA → verde #8DDD75 → amarelo
   #F8E800. Essa sequência virou a FAIXA que abre o cabeçalho, fecha o rodapé
   e marca o topo dos blocos — é a assinatura do site.

   O azul institucional (#0B3B8C) é o mesmo azul do selo, escurecido até
   sustentar texto branco. O amarelo do logotipo (#F8E800) sobre branco dá
   1,1:1, então nunca vira texto: só barra, borda e realce.

   Tipografia: Source Serif 4 nos títulos (peso de documento, que é o que um
   instituto é) e Inter no corpo.
   ══════════════════════════════════════════════════════════════════════════ */

:root {
  --azul:      #0B3B8C;   /* o azul do selo, escurecido para texto branco */
  --azul-esc:  #072A66;
  --azul-vivo: #0171FC;   /* medido no disco */
  --turquesa:  #2FC7BA;   /* medido no disco */
  /* O turquesa do selo sobre branco da' 2,1:1 — nao serve para texto.
     Este e' o MESMO tom escurecido ate' 4,5:1; entra so' em fundo claro.
     Em fundo azul e no rodape o turquesa original continua valendo. */
  --turquesa-tinta: #1C7770;
  --verde:     #8DDD75;   /* medido no disco */
  --amarelo:   #F8E800;   /* medido no texto do selo */
  --gradiente: linear-gradient(90deg, #0171FC 0%, #2FC7BA 38%, #8DDD75 68%, #F8E800 100%);

  --tinta:     #10182B;
  --tinta-2:   #2B3648;
  --cinza:     #5A6478;
  --papel:     #F4F6FA;
  --papel-2:   #E9EDF5;
  --branco:    #FFFFFF;
  --claro:     rgba(238, 243, 252, .82);
  --claro-2:   rgba(238, 243, 252, .62);

  --linha:     rgba(16, 24, 43, .13);
  --linha-cl:  rgba(238, 243, 252, .2);

  --display: "Source Serif 4", Georgia, "Times New Roman", serif;
  --sans: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;

  --env: min(1240px, 92vw);
  --env-m: min(880px, 92vw);
  --topo-h: 72px;
  --curva: cubic-bezier(.2, .8, .3, 1);
  --raio: 12px;
  --sombra: 0 28px 60px -38px rgba(11, 59, 140, .5);
}

*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; }

html { scroll-behavior: smooth; scroll-padding-top: calc(var(--topo-h) + 20px); }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}

body {
  font-family: var(--sans); font-size: 17px; line-height: 1.72;
  color: var(--tinta-2); background: var(--branco);
  -webkit-font-smoothing: antialiased; overflow-x: hidden;
}
img { display: block; max-width: 100%; height: auto; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }
:focus-visible { outline: 3px solid var(--azul-vivo); outline-offset: 2px; border-radius: 3px; }
::selection { background: var(--amarelo); color: var(--tinta); }

h1, h2, h3 {
  font-family: var(--display); font-weight: 700; line-height: 1.1;
  letter-spacing: -.015em; color: var(--tinta); text-wrap: balance;
}
h1 { font-size: clamp(2.25rem, 1.5rem + 3.2vw, 3.9rem); }
h2 { font-size: clamp(1.7rem, 1.25rem + 2vw, 2.7rem); }
h3 { font-size: 1.16rem; letter-spacing: -.005em; }
em { font-style: italic; color: var(--azul); }
p + p { margin-top: 1rem; }

.pular { position: absolute; left: -9999px; top: 8px; z-index: 200;
  background: var(--azul); color: #fff; padding: 10px 18px; border-radius: 8px; font-weight: 600; }
.pular:focus { left: 12px; }

.env { width: var(--env); margin-inline: auto; }
.env--m { width: var(--env-m); }
.centro { text-align: center; }

/* ─────────────────────────── a faixa do selo: azul → turquesa → verde → amarelo */
.faixa { display: block; height: 5px; background: var(--gradiente); }

.eti {
  display: block; font-family: var(--sans); font-size: .72rem; font-weight: 700;
  letter-spacing: .18em; text-transform: uppercase; color: var(--azul);
  margin-bottom: .9rem; padding-left: 1.4rem; position: relative;
}
.eti::before {
  content: ""; position: absolute; left: 0; top: .58em;
  width: .9rem; height: 3px; border-radius: 2px; background: var(--gradiente);
}
.sec--azul .eti, .capa .eti, .heroi .eti { color: var(--turquesa); }
.olho { font-size: clamp(1.03rem, .98rem + .34vw, 1.18rem); color: var(--cinza); }
.sec--azul .olho, .heroi .olho, .capa .olho { color: var(--claro); }

/* ───────────────────────────────────────────────────────────────── botões */
.bt {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 52px; padding: .9rem 1.8rem; border-radius: 8px;
  font-size: .9rem; font-weight: 600; letter-spacing: .01em;
  transition: transform .25s var(--curva), background .25s var(--curva),
              color .25s var(--curva), box-shadow .25s var(--curva);
}
.bt--cheio { background: var(--azul); color: #fff; }
.bt--cheio:hover { background: var(--azul-esc); transform: translateY(-2px); }
.bt--claro { background: rgba(255, 255, 255, .12); color: #fff; border: 1px solid var(--linha-cl); }
.bt--claro:hover { background: rgba(255, 255, 255, .2); transform: translateY(-2px); }
.bt--fio { border: 1px solid var(--linha); color: var(--tinta); }
.bt--fio:hover { border-color: var(--azul); color: var(--azul); }
.cta .bt--fio { border-color: var(--linha-cl); color: #fff; }
.cta .bt--fio:hover { border-color: var(--turquesa); color: var(--turquesa); }

.link {
  display: inline-flex; align-items: center; gap: .5rem; margin-top: 1.5rem;
  font-weight: 600; font-size: .95rem; color: var(--azul);
  border-bottom: 2px solid var(--turquesa); padding-bottom: 2px;
  transition: gap .25s var(--curva);
}
.link::after { content: "→"; }
.link:hover { gap: .8rem; }
.link--claro { color: var(--turquesa); border-color: var(--turquesa); }

/* ───────────────────────────────────────────────────────────────── topo */
.topo {
  position: fixed; inset: 0 0 auto; z-index: 100;
  background: rgba(255, 255, 255, .97); backdrop-filter: blur(12px);
  box-shadow: 0 1px 0 var(--linha);
}
.topo__in { display: flex; align-items: center; gap: 1.4rem;
  height: calc(var(--topo-h) - 5px); }
.topo__marca { display: flex; align-items: center; gap: .7rem; min-width: 0; }
.topo__marca img { width: 40px; height: auto; flex: 0 0 auto; }
.topo__nome { display: flex; flex-direction: column; line-height: 1.12; min-width: 0; }
.topo__nome b { font-family: var(--display); font-size: 1.2rem; font-weight: 700;
  color: var(--tinta); letter-spacing: .01em; }
.topo__nome i { display: none; font-style: normal; font-size: .64rem; color: var(--cinza);
  letter-spacing: .02em; }
@media (min-width: 1120px) { .topo__nome i { display: block; max-width: 30ch; } }

.nav { display: none; margin-left: auto; gap: 1.5rem; }
.nav a { font-size: .8rem; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--tinta-2); position: relative; padding: 6px 0; }   /* 21/09: menus em caixa alta, pedido do cliente */
.nav a::after { content: ""; position: absolute; left: 0; bottom: 0; height: 2px; width: 0;
  background: var(--gradiente); transition: width .3s var(--curva); }
.nav a:hover::after, .nav a[aria-current]::after { width: 100%; }
.nav a[aria-current] { color: var(--azul); font-weight: 600; }

.burger { margin-left: auto; width: 44px; height: 44px; display: grid; place-content: center; gap: 5px; }
.burger span { display: block; width: 22px; height: 2.5px; background: var(--tinta); border-radius: 2px;
  transition: transform .3s var(--curva), opacity .25s; }
.burger.on span:nth-child(1) { transform: translateY(7.5px) rotate(45deg); }
.burger.on span:nth-child(2) { opacity: 0; }
.burger.on span:nth-child(3) { transform: translateY(-7.5px) rotate(-45deg); }

.gaveta {
  position: fixed; inset: var(--topo-h) 0 auto; z-index: 99;
  background: var(--branco); border-bottom: 4px solid transparent;
  border-image: var(--gradiente) 1; padding: .4rem 4vw 1.4rem;
  display: none; flex-direction: column; box-shadow: 0 18px 30px -22px rgba(16, 24, 43, .4);
}
.gaveta.on { display: flex; }
.gaveta a { padding: .95rem 0; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; border-bottom: 1px solid var(--linha); }
.gaveta a:last-child { border-bottom: 0; }

@media (min-width: 1000px) {
  :root { --topo-h: 88px; }
  .nav { display: flex; }
  .burger { display: none; }
  .gaveta { display: none !important; }
  .topo__marca img { width: 50px; }
}

/* ──────────────────────────────────────────────────────────────── herói */
.heroi { position: relative; background: var(--azul-esc); color: var(--claro);
  padding-top: calc(var(--topo-h) + clamp(3rem, 8vw, 6rem));
  padding-bottom: clamp(3.2rem, 8vw, 6.5rem); overflow: hidden; }
.heroi__foto { position: absolute; inset: 0; z-index: 0; }
.heroi__foto img { width: 100%; height: 100%; object-fit: cover; opacity: .3; }
.heroi::after {
  content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background: linear-gradient(105deg, var(--azul-esc) 22%, rgba(7, 42, 102, .82) 58%,
              rgba(7, 42, 102, .55) 100%);
}
.heroi__in { position: relative; z-index: 2; max-width: 760px; }
.heroi h1 { color: #fff; }
.heroi .olho { margin-top: 1.3rem; max-width: 56ch; }
.heroi__acoes { display: flex; flex-wrap: wrap; gap: .8rem; margin-top: 2.2rem; }
.heroi__in > * { animation: sobe .8s var(--curva) backwards; }
.heroi .eti { animation-delay: .05s; }
.heroi h1 { animation-delay: .12s; }
.heroi .olho { animation-delay: .2s; }
.heroi__acoes { animation-delay: .28s; }
@keyframes sobe { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: none; } }

/* ─────────────────────────────────────────────────── capa das internas */
.capa { background: var(--azul-esc); color: var(--claro);
  padding-top: calc(var(--topo-h) + clamp(2.4rem, 5vw, 4rem));
  padding-bottom: clamp(2.6rem, 5vw, 4.4rem); }
.capa__in { max-width: 780px; }
.capa h1 { color: #fff; }
.capa .olho { margin-top: 1.2rem; max-width: 58ch; }
.trilha { display: flex; gap: .5rem; align-items: center; font-size: .8rem;
  color: var(--claro-2); margin-bottom: 1.4rem; }
.trilha b { color: var(--turquesa); font-weight: 600; }
.trilha a:hover { color: #fff; }

/* ─────────────────────────────────────────────────────────────── seções */
.sec { padding: clamp(3.4rem, 7vw, 6.4rem) 0; position: relative; }
.sec--papel { background: var(--papel); }
.sec--azul { background: var(--azul); color: var(--claro); }
.sec--azul h2, .sec--azul h3, .sec--azul b { color: #fff; }
.cab { max-width: 46ch; margin-bottom: clamp(2rem, 4vw, 3.2rem); }
.cab .olho { margin-top: 1rem; }
.cab--centro { margin-inline: auto; text-align: center; }
.cab--centro .eti { display: inline-block; }
.nota { margin-top: 2rem; padding: 1.1rem 1.3rem; border-left: 3px solid var(--turquesa);
  background: var(--papel); border-radius: 0 10px 10px 0; font-size: .92rem; color: var(--cinza); }
.sec--azul .nota { background: rgba(255, 255, 255, .07); color: var(--claro); }
.nota a { color: var(--azul); font-weight: 600; border-bottom: 1px solid currentColor; }

.dupla { display: grid; gap: clamp(2.2rem, 5vw, 4rem); align-items: center; }
@media (min-width: 940px) {
  .dupla { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .dupla--inv > *:first-child { order: 2; }
}
.fig { margin: 0; }
.fig img { width: 100%; border-radius: var(--raio); box-shadow: var(--sombra); }
.fig figcaption { margin-top: .7rem; font-size: .82rem; color: var(--cinza); }
.sec--azul .fig figcaption { color: var(--claro-2); }

/* ─────────────────────────────────────────────────────────────── números */
.nums { display: grid; gap: 1rem; }
@media (min-width: 560px) { .nums { grid-template-columns: 1fr 1fr; } }
.num { background: var(--branco); border: 1px solid var(--linha); border-radius: var(--raio);
  padding: 1.5rem 1.4rem; position: relative; overflow: hidden; }
.num::before { content: ""; position: absolute; inset: 0 0 auto; height: 4px; background: var(--gradiente); }
.num b { display: block; font-family: var(--display); font-size: 2.1rem; font-weight: 700;
  color: var(--azul); line-height: 1; margin-top: .3rem; }
.num span { display: block; font-size: .74rem; font-weight: 700; letter-spacing: .12em;
  text-transform: uppercase; color: var(--tinta); margin: .5rem 0 .4rem; }
.num p { font-size: .88rem; color: var(--cinza); }

/* ─────────────────────────────────────────────────────────────── frentes */
.frentes { display: grid; gap: 1.2rem; }
@media (min-width: 680px) { .frentes { grid-template-columns: 1fr 1fr; } }
@media (min-width: 1080px) { .frentes { grid-template-columns: repeat(4, 1fr); } }
.frente { display: flex; flex-direction: column; background: var(--branco);
  border: 1px solid var(--linha); border-radius: var(--raio); padding: 1.8rem 1.5rem;
  transition: transform .35s var(--curva), box-shadow .35s var(--curva), border-color .35s var(--curva); }
.frente:hover { transform: translateY(-5px); border-color: var(--turquesa); box-shadow: var(--sombra); }
.frente__n { font-family: var(--display); font-size: .9rem; font-weight: 700; color: var(--turquesa-tinta); }
.frente h3 { margin: .6rem 0 .6rem; }
.frente p { font-size: .93rem; color: var(--cinza); }
.frente__mais { margin-top: auto; padding-top: 1.2rem; font-size: .8rem; font-weight: 600;
  color: var(--azul); display: inline-flex; gap: .4rem; }
.frente__mais::after { content: "→"; }

/* ────────────────────────────────────────────── lista de municípios (home) */
.lista-mun { list-style: none; padding: 0; margin: 0; display: flex; flex-wrap: wrap;
  gap: .6rem; justify-content: center; }
.lista-mun li { font-size: .92rem; font-weight: 500; padding: .5rem 1.1rem;
  border: 1px solid var(--linha); border-radius: 100px; background: var(--branco);
  color: var(--tinta); }

/* ───────────────────────────────────────────────────── linha do tempo */
.linha { list-style: none; padding: 0; margin: 0; position: relative; }
.linha::before { content: ""; position: absolute; left: 7px; top: 8px; bottom: 8px;
  width: 2px; background: var(--gradiente); }
.linha li { position: relative; padding-left: 2.4rem; padding-bottom: 2.2rem; }
.linha li:last-child { padding-bottom: 0; }
.linha li::before { content: ""; position: absolute; left: 0; top: .45rem; width: 16px; height: 16px;
  border-radius: 50%; background: var(--branco); border: 3px solid var(--azul); }
.linha b { display: block; font-size: .76rem; font-weight: 700; letter-spacing: .12em;
  text-transform: uppercase; color: var(--azul); }
.linha h3 { margin: .25rem 0 .45rem; }
.linha p { font-size: .96rem; color: var(--cinza); }

/* ──────────────────────────────────────────── finalidades do estatuto */
.fins { list-style: none; padding: 0; margin: 0; display: grid; gap: 0;
  border-top: 1px solid var(--linha); }
@media (min-width: 900px) { .fins { grid-template-columns: 1fr 1fr; column-gap: 3rem; } }
.fins li { display: flex; gap: 1rem; padding: 1.15rem 0; border-bottom: 1px solid var(--linha); }
.fins li > span { flex: 0 0 2.6rem; font-family: var(--display); font-weight: 700;
  font-size: 1rem; color: var(--turquesa-tinta); }
.fins li p { font-size: .95rem; color: var(--cinza); }

/* ──────────────────────────────────────────────── estrutura (governança) */
.orgs { display: grid; gap: 1.1rem; }
@media (min-width: 700px) { .orgs { grid-template-columns: 1fr 1fr; } }
@media (min-width: 1040px) { .orgs { grid-template-columns: repeat(4, 1fr); } }
.org { background: rgba(255, 255, 255, .08); border: 1px solid var(--linha-cl);
  border-radius: var(--raio); padding: 1.5rem 1.4rem; }
.org b { display: block; font-family: var(--display); font-size: 1.08rem; line-height: 1.2; }
/* sobre o cartao claro dentro da secao azul o turquesa cai para 4:1 */
.org span { display: inline-block; margin-top: .35rem; font-size: .7rem; font-weight: 700;
  letter-spacing: .14em; color: #7FE2D9; }
.org p { margin-top: .6rem; font-size: .9rem; color: var(--claro); }

/* ───────────────────────────────────────────────────────────── tabelas */
.tab { width: 100%; border-collapse: collapse; background: var(--branco);
  border: 1px solid var(--linha); border-radius: var(--raio); overflow: hidden; }
.tab caption { text-align: left; font-size: .82rem; color: var(--cinza); padding-bottom: .8rem; }
.tab th, .tab td { text-align: left; padding: .95rem 1.2rem; border-bottom: 1px solid var(--linha);
  font-size: .93rem; vertical-align: top; }
.tab th { width: 34%; font-weight: 600; color: var(--tinta); background: var(--papel); }
.tab tr:last-child th, .tab tr:last-child td { border-bottom: 0; }
@media (max-width: 560px) {
  .tab th, .tab td { display: block; width: 100%; border-bottom: 0; padding: .6rem 1.1rem; }
  .tab th { padding-bottom: .1rem; font-size: .78rem; }
  .tab tr { display: block; border-bottom: 1px solid var(--linha); padding: .5rem 0; }
}

/* ─────────────────────────────────────────────────────── marcas (atuação) */
.marcas { list-style: none; padding: 0; margin: 1.6rem 0 0; display: grid; gap: .7rem; }
.marcas li { position: relative; padding-left: 1.6rem; font-size: .96rem; color: var(--cinza); }
.marcas li::before { content: ""; position: absolute; left: 0; top: .62em; width: 8px; height: 8px;
  border-radius: 2px; background: var(--turquesa); }
.fonte { margin-top: 1.6rem; padding-top: 1.2rem; border-top: 1px solid var(--linha);
  font-size: .88rem; color: var(--cinza); }
.fonte b { color: var(--azul); }

/* ─────────────────────────────────────────────── cartões de município */
.muns { display: grid; gap: 1.2rem; }
@media (min-width: 720px) { .muns { grid-template-columns: 1fr 1fr; } }
@media (min-width: 1080px) { .muns { grid-template-columns: repeat(3, 1fr); } }
.mun { background: var(--branco); border: 1px solid var(--linha); border-radius: var(--raio);
  padding: 1.7rem 1.5rem; display: flex; flex-direction: column;
  transition: border-color .3s var(--curva), box-shadow .3s var(--curva); }
.mun:hover { border-color: var(--turquesa); box-shadow: var(--sombra); }
.mun__topo { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; }
.mun__ano { font-size: .78rem; font-weight: 700; color: var(--cinza); white-space: nowrap; }
.mun__tag { display: inline-block; width: fit-content; margin: .7rem 0 .9rem;
  font-size: .68rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase;
  color: var(--azul); background: var(--papel-2); padding: .3rem .7rem; border-radius: 100px; }
.mun p { font-size: .93rem; color: var(--cinza); }
.mun__fonte { margin-top: auto; padding-top: 1.1rem; font-size: .8rem; color: var(--azul);
  font-style: italic; }

/* ─────────────────────────────────────────────────── créditos do programa */
.creditos { display: grid; gap: .9rem; margin-top: 2rem; padding-top: 1.6rem;
  border-top: 1px solid var(--linha); }
@media (min-width: 620px) { .creditos { grid-template-columns: repeat(3, 1fr); } }
.creditos b { display: block; font-size: .7rem; font-weight: 700; letter-spacing: .14em;
  text-transform: uppercase; color: var(--azul); margin-bottom: .2rem; }
.creditos span { font-size: .92rem; color: var(--cinza); }

/* ────────────────────────────────────────────────────────────── vídeo */
.video { border-radius: var(--raio); overflow: hidden; box-shadow: var(--sombra);
  background: #000; }
.video video { width: 100%; height: auto; display: block; }

/* ─────────────────────────────────────────────────────────── galeria */
.gal { columns: 1; column-gap: 1.1rem; }
@media (min-width: 620px) { .gal { columns: 2; } }
@media (min-width: 1000px) { .gal { columns: 3; } }
.gal__i { break-inside: avoid; margin: 0 0 1.1rem; }
.gal__i img { width: 100%; border-radius: var(--raio); background: var(--papel-2); }
.gal__i figcaption { margin-top: .5rem; font-size: .8rem; color: var(--cinza); }

/* ────────────────────────────────────────────────────────── documentos */
/* acervo: páginas do Diário Oficial como imagem (duas por linha) e o Estatuto em miniaturas */
.doe { display: grid; gap: clamp(1.4rem, 3vw, 2.4rem); }
@media (min-width: 760px) { .doe { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.doe__i { margin: 0; min-width: 0; }
.doe__img { display: block; border: 1px solid var(--linha); border-radius: var(--raio); overflow: hidden;
  background: var(--papel-2); box-shadow: var(--sombra); transition: transform .3s var(--curva), box-shadow .3s var(--curva); }
.doe__img:hover { transform: translateY(-3px); box-shadow: 0 18px 40px rgba(11, 59, 140, .18); }
.doe__img img { width: 100%; height: auto; display: block; }
.doe__i figcaption { margin-top: .9rem; }
.doe__i figcaption b { display: block; font-family: var(--display); font-size: 1.12rem; color: var(--tinta); }
.doe__data { display: block; font-size: .78rem; letter-spacing: .05em; text-transform: uppercase; color: var(--azul); margin: .15rem 0 .4rem; }
.doe__i figcaption p { font-size: .92rem; color: var(--cinza); margin-bottom: .7rem; }
.estat { display: grid; grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); gap: .9rem; }
.estat__p { display: block; text-align: center; font-size: .78rem; color: var(--cinza); }
.estat__p img { width: 100%; height: auto; display: block; border: 1px solid var(--linha); border-radius: 6px; background: #fff; margin-bottom: .35rem; transition: transform .25s var(--curva), box-shadow .25s var(--curva); }
.estat__p:hover img { transform: translateY(-3px); box-shadow: var(--sombra); }

.docs { list-style: none; padding: 0; margin: 0; border-top: 1px solid var(--linha); }
.doc { display: flex; flex-wrap: wrap; gap: 1rem; align-items: center;
  justify-content: space-between; padding: 1.3rem 0; border-bottom: 1px solid var(--linha); }
.doc b { display: block; font-family: var(--display); font-size: 1.08rem; color: var(--tinta); }
.doc p { font-size: .9rem; color: var(--cinza); margin-top: .2rem; max-width: 52ch; }
.doc__lado { display: flex; align-items: center; gap: 1rem; margin-left: auto; }
.doc__org { font-size: .78rem; color: var(--cinza); white-space: nowrap; }
.doc__bt { font-size: .82rem; font-weight: 600; color: var(--azul);
  border: 1px solid var(--linha); border-radius: 100px; padding: .5rem 1.1rem;
  white-space: nowrap; transition: background .25s var(--curva), color .25s var(--curva); }
.doc__bt:hover { background: var(--azul); color: #fff; border-color: var(--azul); }

/* ────────────────────────────────────────────────────────────── canais */
.canais { display: grid; gap: 0; border-top: 1px solid var(--linha); }
.canal { padding: 1.1rem 0; border-bottom: 1px solid var(--linha); }
.canal b { display: block; font-size: .7rem; font-weight: 700; letter-spacing: .14em;
  text-transform: uppercase; color: var(--azul); margin-bottom: .25rem; }
.canal span { font-size: 1.02rem; color: var(--tinta); }
.canal a:hover { color: var(--azul); }

/* ──────────────────────────────────────────────────── chamada final */
.cta { background: var(--azul-esc); color: var(--claro);
  padding: clamp(3rem, 6vw, 5rem) 0; text-align: center; }
.cta__in { max-width: 640px; margin-inline: auto; }
.cta h2 { color: #fff; }
.cta p { margin-top: 1rem; color: var(--claro); }
.cta__acoes { display: flex; flex-wrap: wrap; gap: .8rem; justify-content: center; margin-top: 2rem; }
.cta .bt--cheio { background: var(--turquesa); color: #06322E; }
.cta .bt--cheio:hover { background: var(--verde); }

/* ────────────────────────────────────────────────────────────── rodapé */
.rodape { background: var(--tinta); color: var(--claro); }
.rodape .faixa { margin-bottom: clamp(2.4rem, 5vw, 3.6rem); }
.rodape__g { display: grid; gap: 2.2rem; padding-bottom: 2.2rem; border-bottom: 1px solid var(--linha-cl); }
@media (min-width: 860px) { .rodape__g { grid-template-columns: 1.5fr 1fr 1.2fr; align-items: start; } }
.rodape__marca img { width: 62px; margin-bottom: 1rem; }
.rodape__marca p { font-size: .92rem; max-width: 34ch; }
.rodape__cnpj { margin-top: .6rem; font-size: .82rem; color: var(--claro-2); }
.rodape__nav, .rodape__con { display: grid; gap: .5rem; align-content: start; }
.rodape__nav b, .rodape__con b { font-size: .7rem; font-weight: 700; letter-spacing: .14em;
  text-transform: uppercase; color: var(--turquesa); margin-bottom: .4rem; }
.rodape__nav a { font-size: .82rem; letter-spacing: .06em; text-transform: uppercase; width: fit-content; transition: color .25s var(--curva); }
.rodape__nav a:hover, .rodape__con a:hover { color: var(--turquesa); }
.rodape__con p { font-size: .93rem; }
.rodape__pe { padding: 1.6rem 0 2rem; display: grid; gap: .3rem;
  font-size: .82rem; color: var(--claro-2); }

/* ─────────────────── entrada ao rolar — só existe se o JS estiver vivo */
.js [data-rev] { opacity: 0; transform: translateY(16px);
  transition: opacity .65s var(--curva), transform .65s var(--curva); }
.js [data-rev].on { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) { .js [data-rev] { opacity: 1; transform: none; } }

/* ─────────────────────────────────────────────────────── telas pequenas */
@media (max-width: 999px) and (max-height: 720px) {
  .heroi { padding-top: calc(var(--topo-h) + 1.8rem); padding-bottom: 2.6rem; }
  .capa { padding-top: calc(var(--topo-h) + 1.6rem); }
}
@media (max-width: 430px) {
  body { font-size: 16px; }
  .bt { width: 100%; }
  .doc__lado { width: 100%; justify-content: space-between; margin-left: 0; }
}