/* TechPartners BR — folha principal
   Mundo: formulário fiscal (campos em caixas, rótulo no canto, tinta azul). */

/* Montserrat self-hosted (rodada 7A): um arquivo variável, eixo wght 400–700, subset latin
   (Google Fonts v31, SIL OFL 1.1, licença em assets/fonts/OFL-Montserrat.txt). */
@font-face {
  font-family: "Montserrat";
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url("../fonts/montserrat-latin-variable.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

:root {
  --marinho: #37517e;
  --tinta: #1d2c47;
  --tinta-2: #3d4c66;
  --azul: #209dd8;
  --azul-claro: #47b2e4;
  --link: #16709f;
  --linha: #b9d3e6;
  --linha-forte: #7fb0d3;
  --papel: #ffffff;
  --papel-2: #f2f7fb;
  --sobre-marinho: #dbe7f6;
  --pendente: #fff4c2;
  --pendente-borda: #a37f00;
  --pendente-tinta: #5c4700;

  /* Montserrat em tudo (escolha do Paulo, rodada 4); arquivo variável local, 400–700. */
  --f-display: "Montserrat", "Segoe UI", "Helvetica Neue", Arial, sans-serif;
  --f-texto: "Montserrat", "Segoe UI", "Helvetica Neue", Arial, sans-serif;

  --t-0: 0.8rem;
  --t-1: 1rem;
  --t-2: 1.25rem;
  --t-3: 1.563rem;
  --t-4: 1.953rem;
  --t-5: clamp(1.953rem, 1.4rem + 2.2vw, 2.441rem);
  --t-6: clamp(2.2rem, 1.3rem + 3.8vw, 3.9rem);

  --largura: 74rem;
  --margem: clamp(1rem, 4vw, 2.5rem);
  --secao: clamp(3.5rem, 7vw, 6.5rem);
  --raio: 2px;
}

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

html { -webkit-text-size-adjust: 100%; scroll-padding-top: 5.5rem; }

body {
  margin: 0;
  font-family: var(--f-texto);
  font-size: 1rem;
  line-height: 1.65;
  color: var(--tinta);
  background: var(--papel);
  caret-color: var(--azul);
}

::selection { background: var(--azul-claro); color: var(--tinta); }

img { display: block; max-width: 100%; height: auto; }
/* Ícones de traço são 24×24. Sem tamanho, o SVG vira bloco na largura do pai (rodada 7B). */
svg { display: inline-block; width: 1.15rem; height: 1.15rem; flex: none; vertical-align: -0.2em; }

h1, h2, h3 {
  font-family: var(--f-display);
  color: var(--tinta);
  line-height: 1.2;
  letter-spacing: -0.02em;
  text-wrap: balance;
  margin: 0;
}
h1 { font-size: var(--t-6); font-weight: 700; letter-spacing: -0.025em; line-height: 1.12; }
h2 { font-size: var(--t-5); font-weight: 700; }
h3 { font-size: var(--t-2); font-weight: 700; letter-spacing: -0.01em; line-height: 1.3; }

p { margin: 0 0 1em; max-width: 68ch; text-wrap: pretty; }
p:last-child { margin-bottom: 0; }

a { color: var(--link); text-decoration-thickness: 1px; text-underline-offset: 0.2em; }
a:hover { text-decoration-thickness: 2px; }

:focus-visible {
  outline: 3px solid var(--azul);
  outline-offset: 3px;
  border-radius: var(--raio);
}

ul, ol { padding-left: 1.2em; margin: 0 0 1em; }
li { margin-bottom: 0.35em; }
li::marker { color: var(--azul); }

strong { font-weight: 700; }

.num { font-variant-numeric: tabular-nums lining-nums; white-space: nowrap; }

.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

.pular {
  position: absolute; left: 1rem; top: -4rem; z-index: 50;
  background: var(--tinta); color: #fff; padding: 0.6rem 1rem; border-radius: var(--raio);
}
.pular:focus { top: 1rem; color: #fff; }

.recorte { width: 100%; max-width: var(--largura); margin-inline: auto; padding-inline: var(--margem); }

/* ---------- Placeholder pendente ---------- */
.pendente {
  display: inline-block;
  background: var(--pendente);
  border: 1.5px dashed var(--pendente-borda);
  color: var(--pendente-tinta);
  border-radius: var(--raio);
  padding: 0.2em 0.55em;
  font-family: var(--f-texto);
  font-weight: 700;
  font-size: 0.95em;
  letter-spacing: 0;
}
.pendente-bloco {
  display: block;
  background: var(--pendente);
  border: 1.5px dashed var(--pendente-borda);
  color: var(--pendente-tinta);
  border-radius: var(--raio);
  padding: 1.25rem 1.25rem;
  font-weight: 700;
}
.pendente-bloco small { display: block; font-weight: 400; margin-top: 0.35rem; font-size: 0.9rem; }

/* ---------- Cabeçalho ---------- */
.topo {
  position: sticky; top: 0; z-index: 30;
  background: rgba(255, 255, 255, 0.97);
  border-bottom: 1px solid var(--linha);
}
.topo .recorte {
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  min-height: 4.25rem;
}
/* Logo oficial vetorial (pacote de logos 09/10): símbolo + wordmark em curvas, extraídos do techpartners_editavel.ai. */
.marca { display: inline-flex; align-items: center; flex: none; padding-block: 0.4rem; }
.marca img { height: 34px; width: auto; max-width: none; }

.menu-botao {
  display: inline-flex; align-items: center; gap: 0.5rem;
  font: 700 0.95rem var(--f-texto); color: var(--tinta);
  background: var(--papel); border: 1px solid var(--linha-forte); border-radius: 4px;
  padding: 0.7rem 0.95rem; cursor: pointer;
}
.menu-botao svg { width: 1.1rem; height: 1.1rem; }
.menu-botao[aria-expanded="true"] .i-abrir,
.menu-botao[aria-expanded="false"] .i-fechar { display: none; }

.nav-principal { display: none; }
.nav-principal.aberto {
  display: block; position: absolute; left: 0; right: 0; top: 100%;
  background: var(--papel); border-bottom: 1px solid var(--linha);
  padding: 0.5rem var(--margem) 1.25rem;
}
.nav-principal ul { list-style: none; margin: 0; padding: 0; }
.nav-principal li { margin: 0; }
.nav-principal a {
  display: block; padding: 0.7rem 0; text-decoration: none; color: var(--tinta);
  font-weight: 700; border-bottom: 1px solid var(--papel-2);
}
.nav-principal a[aria-current="page"] { color: var(--marinho); text-decoration: underline; text-decoration-color: var(--azul); text-decoration-thickness: 3px; text-underline-offset: 0.45em; }
.nav-principal .nav-whats { margin-top: 0.9rem; }
.nav-principal .nav-whats a { border: 0; }

/* Menu em linha a partir de 1100px; abaixo disso, botão "Menu". */
@media (min-width: 68.75rem) {
  .menu-botao { display: none; }
  .nav-principal, .nav-principal.aberto {
    display: block; position: static; padding: 0; border: 0; background: none;
  }
  .nav-principal ul { display: flex; flex-wrap: nowrap; align-items: center; gap: 0.15rem; }
  .nav-principal a { border: 0; padding: 0.5rem 0.6rem; font-size: 0.95rem; white-space: nowrap; }
  .nav-principal a:hover { color: var(--marinho); text-decoration: underline; text-decoration-color: var(--azul); text-decoration-thickness: 2px; text-underline-offset: 0.45em; }
  .nav-principal .nav-whats { margin: 0 0 0 0.6rem; }
}

/* ---------- Botões ---------- */
.botao {
  display: inline-flex; align-items: center; gap: 0.55rem;
  font: 700 1rem/1.3 var(--f-texto);
  text-decoration: none;
  padding: 0.85rem 1.2rem;
  border-radius: 4px;
  border: 1.5px solid var(--marinho);
  background: var(--marinho); color: #fff;
  transition: background-color 160ms ease-out, color 160ms ease-out;
}
.botao:hover { background: var(--tinta); border-color: var(--tinta); color: #fff; }
.botao svg { width: 1.15rem; height: 1.15rem; flex: none; }
.botao.linha { background: transparent; color: var(--marinho); }
.botao.linha:hover { background: var(--papel-2); color: var(--tinta); }
.botao.claro { background: #fff; color: var(--marinho); border-color: #fff; }
.botao.claro:hover { background: var(--sobre-marinho); color: var(--tinta); }
.botao.compacto { padding: 0.7rem 0.95rem; font-size: 0.95rem; }
.nav-principal .botao { display: inline-flex; color: #fff; padding: 0.7rem 0.95rem; white-space: nowrap; }
.nav-principal .botao:hover { color: #fff; text-decoration: none; }
.acoes { display: flex; flex-wrap: wrap; gap: 0.75rem; margin-top: 1.75rem; }

/* ---------- Campos (gramática do formulário) ---------- */
.campo {
  position: relative;
  border: 1px solid var(--linha);
  border-radius: var(--raio);
  padding: 2.2rem 1.25rem 1.25rem;
  background: var(--papel);
}
.rotulo {
  position: absolute; top: 0.7rem; left: 0.85rem;
  font-size: var(--t-0); line-height: 1.3; color: var(--marinho); font-weight: 700;
}
.valor { font-family: var(--f-display); font-weight: 700; font-size: var(--t-3); line-height: 1.3; letter-spacing: -0.015em; }
.valor small { font-family: var(--f-texto); font-weight: 400; font-size: 1rem; color: var(--tinta-2); letter-spacing: 0; }

/* A ficha da home */
.ficha {
  display: grid;
  gap: 0;
  margin-top: clamp(1.5rem, 4vw, 3rem);
  border: 1.5px solid var(--linha-forte);
  border-radius: var(--raio);
  background: var(--papel);
}
.ficha > .campo { border: 0; border-radius: 0; border-top: 1px solid var(--linha); }
.ficha > .campo:first-child { border-top: 0; }
.ficha .campo-titulo { padding: 2.4rem 1.25rem 1.75rem; }
.ficha .campo-titulo p { font-size: 1.15rem; margin-top: 1.1rem; color: var(--tinta-2); }
.ficha .campo-foto { padding: 0; }
.ficha .campo-acao { background: var(--marinho); color: #fff; }
.ficha .campo-acao .rotulo { color: var(--sobre-marinho); }
.ficha .campo-acao .valor { color: #fff; }
.ficha .campo-acao a:not(.botao) { color: #fff; }
.ficha .campo-acao .acoes { margin-top: 0.25rem; }
.ficha .campo-acao p { color: var(--sobre-marinho); font-size: 0.95rem; margin-top: 0.75rem; }
.ficha .campo ul { list-style: none; padding: 0; margin: 0; }
.ficha .campo li { margin: 0; }

@media (min-width: 48rem) {
  .ficha {
    grid-template-columns: 1fr 1fr 1fr;
    grid-template-areas:
      "titulo titulo titulo"
      "foto   foto   foto"
      "preco  area   acao"
      "end    end    acao";
  }
  .ficha .campo-foto { grid-area: foto; border-left: 0; border-bottom: 1px solid var(--linha); }
  .ficha > .campo { border-top: 0; border-left: 1px solid var(--linha); }
  .ficha .campo-titulo { grid-area: titulo; border-left: 0; border-bottom: 1px solid var(--linha); }
  .ficha .campo-preco { grid-area: preco; border-left: 0; border-bottom: 1px solid var(--linha); }
  .ficha .campo-area { grid-area: area; border-bottom: 1px solid var(--linha); }
  .ficha .campo-acao { grid-area: acao; }
  .ficha .campo-end { grid-area: end; border-left: 0; }
}
@media (min-width: 64rem) {
  .ficha {
    /* Rodada 5: a foto entra na ficha como a foto de um cadastro, presa ao campo de ação marinho. */
    grid-template-columns: 1.15fr 1fr 0.95fr 0.95fr;
    grid-template-areas:
      "titulo titulo foto   foto"
      "titulo titulo acao   acao"
      "preco  area   end    end";
  }
  .ficha .campo-titulo { padding: 3rem 2rem 2.5rem; border-bottom: 0; display: flex; flex-direction: column; justify-content: center; }
  .ficha .campo-foto { border-left: 1px solid var(--linha); border-bottom: 0; }
  .ficha .campo-acao { padding-top: 2.4rem; }
  .ficha .campo-preco, .ficha .campo-area, .ficha .campo-end { border-top: 1px solid var(--linha); border-bottom: 0; }
  .ficha .campo-end { border-left: 1px solid var(--linha); }
}

/* ---------- Seções ---------- */
.secao { padding-block: var(--secao); }
.secao + .secao { padding-top: 0; }
.secao.fundo { background: var(--papel-2); padding-top: var(--secao); border-block: 1px solid var(--linha); }
.secao.fundo + .secao { padding-top: var(--secao); }
.cab-secao { margin-bottom: clamp(1.5rem, 3vw, 2.5rem); max-width: 46rem; }
.cab-secao p { margin-top: 0.85rem; color: var(--tinta-2); font-size: 1.1rem; }

/* Abertura das páginas internas */
.abertura { padding-block: clamp(2rem, 5vw, 4rem) clamp(2.5rem, 5vw, 4rem); border-bottom: 1px solid var(--linha); }
.migalhas { font-size: 0.9rem; margin-bottom: 1.5rem; }
.migalhas ol { list-style: none; padding: 0; margin: 0; display: flex; flex-wrap: wrap; gap: 0.25rem 0.5rem; }
.migalhas li { margin: 0; display: inline-flex; gap: 0.5rem; align-items: center; }
.migalhas li + li::before { content: "/"; color: var(--linha-forte); }
.migalhas a { color: var(--tinta-2); }
.abertura-grade { display: grid; gap: 2rem; }
.abertura .resposta { font-size: clamp(1.1rem, 1rem + 0.4vw, 1.3rem); margin-top: 1.25rem; max-width: 44rem; color: var(--tinta-2); }
.abertura .resposta strong { color: var(--tinta); }
.abertura-fatos { display: grid; gap: 0; border: 1.5px solid var(--linha-forte); border-radius: var(--raio); align-self: start; }
.abertura-fatos .campo { border: 0; border-radius: 0; border-top: 1px solid var(--linha); }
.abertura-fatos .campo:first-child { border-top: 0; }
.abertura-fatos .valor { font-size: var(--t-2); }
@media (min-width: 60rem) {
  .abertura-grade { grid-template-columns: minmax(0, 1.55fr) minmax(18rem, 1.15fr); gap: 3.5rem; align-items: start; }
}

/* ---------- Fotos (rodada 5): 3:2, presas ao topo de um bloco de campos, mesmo raio da ficha ---------- */
.foto { margin: 0; background: var(--papel-2); }
.foto img { width: 100%; height: auto; aspect-ratio: 3 / 2; object-fit: cover; }
.foto figcaption {
  font-size: var(--t-0); line-height: 1.3; color: var(--tinta-2);
  padding: 0.55rem 0.85rem; border-top: 1px solid var(--linha); background: var(--papel);
}
.abertura-fatos .foto { border-bottom: 1px solid var(--linha); }

/* ---------- Índice de serviços (linhas, não cards) ---------- */
.indice { list-style: none; margin: 0; padding: 0; border-top: 1.5px solid var(--tinta); }
.indice li { margin: 0; border-bottom: 1px solid var(--linha); }
.indice a {
  display: grid; gap: 0.35rem 2rem; padding: 1.35rem 0;
  text-decoration: none; color: var(--tinta);
}
.indice .nome { font-family: var(--f-display); font-weight: 700; font-size: var(--t-3); letter-spacing: -0.02em; line-height: 1.3; }
.indice .desc { color: var(--tinta-2); max-width: 60ch; }
.indice .ir { color: var(--link); font-weight: 700; display: inline-flex; align-items: center; gap: 0.4rem; }
.indice .ir svg { width: 1rem; height: 1rem; transition: transform 180ms ease-out; }
.indice a:hover .nome { color: var(--marinho); text-decoration: underline; text-decoration-color: var(--azul); text-decoration-thickness: 3px; text-underline-offset: 0.2em; }
.indice a:hover .ir svg { transform: translateX(3px); }
@media (min-width: 52rem) {
  .indice a { grid-template-columns: 17rem 1fr auto; align-items: baseline; }
}

/* Lista de capacidades em colunas de texto */
.capacidades { columns: 1; column-gap: 3rem; margin: 0; padding: 0; list-style: none; }
.capacidades li { break-inside: avoid; padding: 0.9rem 0; border-top: 1px solid var(--linha); margin: 0; }
.capacidades strong { display: block; font-family: var(--f-display); font-size: 1.1rem; }
.capacidades span { color: var(--tinta-2); }
@media (min-width: 44rem) { .capacidades { columns: 2; } }
@media (min-width: 70rem) { .capacidades.tres { columns: 3; } }

/* ---------- Bloco de duas colunas assimétricas ---------- */
.dupla { display: grid; gap: 2rem; }
@media (min-width: 56rem) {
  .dupla { grid-template-columns: minmax(0, 1fr) minmax(0, 1.25fr); gap: 4rem; align-items: start; }
  .dupla.inversa { grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); }
}

/* Lista de programas do governo como linha de "campos" pequenos */
.etiquetas { display: flex; flex-wrap: wrap; gap: 0.5rem; list-style: none; padding: 0; margin: 1.25rem 0 0; }
.etiquetas li { margin: 0; border: 1px solid var(--linha-forte); border-radius: var(--raio); padding: 0.5rem 0.8rem; font-weight: 700; font-size: 0.95rem; background: var(--papel); }

/* ---------- Tabela-formulário (planos, comparativos) ---------- */
.tabela-rolagem { overflow-x: auto; border: 1.5px solid var(--linha-forte); border-radius: var(--raio); background: var(--papel); }
.tabela-rolagem:focus-visible { outline-offset: 2px; }
table { border-collapse: collapse; width: 100%; font-variant-numeric: tabular-nums lining-nums; }
caption { text-align: left; padding: 0.9rem 1rem; font-weight: 700; color: var(--marinho); border-bottom: 1px solid var(--linha); }
th, td { text-align: left; vertical-align: top; padding: 0.85rem 1rem; border-bottom: 1px solid var(--linha); border-left: 1px solid var(--linha); }
th:first-child, td:first-child { border-left: 0; }
tbody tr:last-child th, tbody tr:last-child td { border-bottom: 0; }
thead th { font-family: var(--f-display); font-size: 1.15rem; vertical-align: bottom; background: var(--papel-2); }
tbody th { font-weight: 700; color: var(--tinta); }
td.sim, td.nao { white-space: nowrap; }
.marca-sim, .marca-nao { display: inline-flex; align-items: center; gap: 0.4rem; font-weight: 700; }
.marca-sim svg, .marca-nao svg { width: 1.1rem; height: 1.1rem; flex: none; }
.marca-sim { color: var(--marinho); }
.marca-sim svg { color: var(--azul); }
.marca-nao { color: var(--tinta-2); font-weight: 400; }

/* Planos */
.planos { min-width: 46rem; }
.planos thead th { padding-top: 1.1rem; }
.planos thead th:not(:first-child) { width: 22%; min-width: 11rem; }
.planos .preco { display: block; font-size: var(--t-4); font-weight: 700; letter-spacing: -0.03em; margin-top: 0.35rem; color: var(--tinta); }
.planos .preco small { font-family: var(--f-texto); font-size: 0.95rem; font-weight: 400; color: var(--tinta-2); letter-spacing: 0; }
.planos .preco-consulta { font-size: var(--t-3); }
.planos tfoot td, .planos tfoot th { border-top: 1.5px solid var(--linha-forte); border-bottom: 0; }

/* ---------- Sequência numerada real (M365) ---------- */
.etapas { list-style: none; counter-reset: etapa; padding: 0; margin: 0; display: grid; gap: 0; border-top: 1.5px solid var(--tinta); }
.etapas > li { counter-increment: etapa; display: grid; grid-template-columns: 3.25rem 1fr; gap: 1rem; padding: 1.5rem 0; border-bottom: 1px solid var(--linha); margin: 0; }
.etapas > li::before {
  content: counter(etapa);
  font-family: var(--f-display); font-weight: 700; font-size: 1.6rem; line-height: 1.3;
  width: 2.6rem; height: 2.6rem; display: grid; place-items: center;
  border: 1.5px solid var(--marinho); border-radius: var(--raio); color: var(--marinho);
}
.etapas h3 { margin-bottom: 0.5rem; }
.etapas ul { margin-top: 0.5rem; }
@media (min-width: 60rem) {
  .etapas { grid-template-columns: repeat(3, 1fr); border-top: 0; }
  .etapas > li { grid-template-columns: 1fr; border: 1px solid var(--linha); border-left-width: 0; padding: 1.5rem; }
  .etapas > li:first-child { border-left-width: 1px; }
}

/* ---------- Razão: alugar x comprar ---------- */
.razao { display: grid; border: 1.5px solid var(--linha-forte); border-radius: var(--raio); }
.razao > div { padding: 1.5rem 1.25rem; }
.razao > div + div { border-top: 1px solid var(--linha); }
.razao h3 { padding-bottom: 0.75rem; margin-bottom: 1rem; border-bottom: 1.5px solid var(--tinta); }
.razao ul { list-style: none; padding: 0; margin: 0; }
.razao li { padding: 0.6rem 0; border-bottom: 1px dotted var(--linha-forte); margin: 0; }
.razao li:last-child { border-bottom: 0; }
@media (min-width: 52rem) {
  .razao { grid-template-columns: 1fr 1fr; }
  .razao > div + div { border-top: 0; border-left: 1.5px solid var(--linha-forte); }
  .razao > div { padding: 2rem; }
}

/* ---------- Ficha técnica (colocation, contato) ---------- */
.grade-campos { display: grid; gap: 0; border: 1.5px solid var(--linha-forte); border-radius: var(--raio); }
.grade-campos .campo { border: 0; border-radius: 0; border-top: 1px solid var(--linha); }
.grade-campos .campo:first-child { border-top: 0; }
.grade-campos .valor { font-size: var(--t-2); }
.grade-campos .valor.texto { font-family: var(--f-texto); font-weight: 400; font-size: 1.05rem; letter-spacing: 0; line-height: 1.55; }
@media (min-width: 48rem) {
  .grade-campos.duas { grid-template-columns: 1fr 1fr; }
  .grade-campos.duas .campo { border-top: 1px solid var(--linha); }
  .grade-campos.duas .campo:nth-child(-n+2) { border-top: 0; }
  .grade-campos.duas .campo:nth-child(2n) { border-left: 1px solid var(--linha); }
  .grade-campos.duas .campo.inteiro { grid-column: 1 / -1; border-left: 0; }
}

/* ---------- Diagrama 3-2-1 ---------- */
.diagrama { border: 1.5px solid var(--linha-forte); border-radius: var(--raio); padding: clamp(1rem, 3vw, 2rem); background: var(--papel); }
.diagrama svg { width: 100%; height: auto; margin-inline: auto; }
/* Regra 3-2-1 (rodada 10): texto em cima, diagrama na largura da seção; versão empilhada abaixo de 48rem. */
.regra-321 { display: grid; gap: 2rem; }
.regra-texto { max-width: 52rem; }
.d321-v { display: none; max-width: 26rem; }
@media (max-width: 47.99rem) {
  .d321-h { display: none; }
  .d321-v { display: block; }
}
.diagrama figcaption { margin-top: 1rem; color: var(--tinta-2); font-size: 0.95rem; max-width: 60ch; }

/* ---------- FAQ ---------- */
.faq { border-top: 1.5px solid var(--tinta); }
.faq details { border-bottom: 1px solid var(--linha); }
.faq summary {
  list-style: none; cursor: pointer;
  display: grid; grid-template-columns: 1fr auto; gap: 1rem; align-items: start;
  padding: 1.15rem 0;
  font-family: var(--f-display); font-weight: 700; font-size: 1.2rem; line-height: 1.3; color: var(--tinta);
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary svg { width: 1.25rem; height: 1.25rem; margin-top: 0.2rem; color: var(--marinho); transition: transform 200ms cubic-bezier(0.16, 1, 0.3, 1); }
.faq details[open] summary svg { transform: rotate(45deg); }
.faq summary:hover { color: var(--marinho); }
.faq .resposta-faq { padding: 0 0 1.4rem; max-width: 68ch; }
.faq-grupo + .faq-grupo { margin-top: clamp(2.5rem, 5vw, 4rem); }
.faq-grupo > h2 { margin-bottom: 1.25rem; font-size: var(--t-4); }
.faq-sumario { list-style: none; padding: 0; margin: 1.5rem 0 0; display: flex; flex-wrap: wrap; gap: 0.5rem 1.25rem; }
.faq-sumario li { margin: 0; }

/* ---------- Faixa de contato ---------- */
.faixa { background: var(--marinho); color: #fff; padding-block: clamp(3rem, 6vw, 5rem); }
.faixa h2 { color: #fff; }
.faixa p { color: var(--sobre-marinho); }
.faixa a:not(.botao) { color: #fff; }
.faixa .faixa-grade { display: grid; gap: 2rem; }
.faixa .canais { list-style: none; padding: 0; margin: 0; border-top: 1px solid rgba(219, 231, 246, 0.35); }
.faixa .canais li { display: grid; grid-template-columns: 7rem 1fr; gap: 1rem; padding: 0.85rem 0; border-bottom: 1px solid rgba(219, 231, 246, 0.35); margin: 0; }
.faixa .canais span { color: var(--sobre-marinho); font-size: 0.9rem; padding-top: 0.15rem; }
.faixa .canais a, .faixa .canais b { font-weight: 700; font-size: 1.1rem; }
@media (min-width: 56rem) { .faixa .faixa-grade { grid-template-columns: 1fr 1fr; gap: 4rem; align-items: end; } }

/* ---------- Links relacionados ---------- */
.relacionados { display: flex; flex-wrap: wrap; gap: 0.5rem; list-style: none; padding: 0; margin: 0; }
.relacionados li { margin: 0; }
.relacionados a {
  display: inline-block; padding: 0.75rem 1rem; border: 1px solid var(--linha-forte); border-radius: var(--raio);
  text-decoration: none; font-weight: 700; color: var(--marinho); background: var(--papel);
}
.relacionados a:hover { border-color: var(--marinho); background: var(--papel-2); color: var(--tinta); }

/* ---------- Formulário de contato ---------- */
.form { display: grid; gap: 0; border: 1.5px solid var(--linha-forte); border-radius: var(--raio); }
.form .campo { border: 0; border-radius: 0; border-top: 1px solid var(--linha); padding: 0; }
.form .campo:first-of-type { border-top: 0; }
.form label { position: absolute; top: 0.7rem; left: 0.85rem; font-size: var(--t-0); font-weight: 700; color: var(--marinho); }
.form input, .form textarea, .form select {
  width: 100%; border: 0; background: transparent; color: var(--tinta);
  font: 1.05rem/1.4 var(--f-texto);
  padding: 2.1rem 0.85rem 0.85rem;
  border-radius: 0;
}
.form textarea { min-height: 9rem; resize: vertical; }
.form input:focus-visible, .form textarea:focus-visible, .form select:focus-visible { outline: 3px solid var(--azul); outline-offset: -3px; background: #f7fbfe; }
.form .enviar { padding: 1rem 0.75rem; border-top: 1px solid var(--linha); display: flex; flex-wrap: wrap; gap: 0.75rem; align-items: center; }
.form .enviar p { font-size: 0.95rem; color: var(--tinta-2); margin: 0; }
.form .linha-dupla { display: grid; }
.form .linha-dupla .campo + .campo { border-top: 1px solid var(--linha); }
@media (min-width: 40rem) {
  .form .linha-dupla { grid-template-columns: 1fr 1fr; border-top: 1px solid var(--linha); }
  .form .linha-dupla .campo { border-top: 0; }
  .form .linha-dupla .campo + .campo { border-top: 0; border-left: 1px solid var(--linha); }
}
.form .linha-dupla:first-child { border-top: 0; }
::placeholder { color: #66748c; opacity: 1; }

/* ---------- Rodapé ---------- */
.rodape { background: var(--tinta); color: var(--sobre-marinho); padding-block: 3.5rem 2rem; font-size: 0.97rem; }
.rodape a { color: #fff; }
.rodape-grade { display: grid; gap: 2.25rem; }
.rodape h2 { font-size: 1rem; color: #fff; letter-spacing: 0; margin-bottom: 0.75rem; }
.rodape ul { list-style: none; padding: 0; margin: 0; }
.rodape li { margin-bottom: 0.4rem; }
.rodape address { font-style: normal; }
.rodape p { color: var(--sobre-marinho); }
.rodape-base { margin-top: 2.5rem; padding-top: 1.25rem; border-top: 1px solid rgba(219, 231, 246, 0.25); display: flex; flex-wrap: wrap; gap: 0.75rem 2rem; justify-content: space-between; font-size: 0.9rem; }
.rodape :focus-visible { outline-color: var(--azul-claro); }
@media (min-width: 52rem) { .rodape-grade { grid-template-columns: 1.3fr 1fr 1fr 1fr; gap: 2.5rem; } }

/* ---------- Utilidades ---------- */
.valor-medio { font-size: var(--t-2); }
address.valor { font-style: normal; }
.pilha { display: grid; gap: 1rem; }
.nota { font-size: 0.95rem; color: var(--tinta-2); }
.mt-1 { margin-top: 1rem; }
.mt-2 { margin-top: 2rem; }
.texto-corrido h2 { margin: 2.5rem 0 1rem; }
.texto-corrido h2:first-child { margin-top: 0; }
.texto-corrido h3 { margin: 1.75rem 0 0.5rem; }

/* 404 */
.erro { padding-block: clamp(4rem, 12vw, 9rem); }
.erro .valor { font-size: var(--t-6); }

@media print {
  .topo, .barra-cliente, .faixa, .rodape, .menu-botao { display: none; }
}
.link-icone { display: inline-flex; align-items: center; gap: 0.35rem; }
.link-icone svg { width: 1.1em; height: 1.1em; flex: none; }
.diagrama { margin: 0; }
.comparativo { min-width: 40rem; }
.recorte-leitura { max-width: 52rem; }
.sobre-texto { max-width: 46rem; }
.campo-erro { max-width: 40rem; }

/* Ajustes da auditoria */
.secao.fundo + .secao.fundo { padding-top: 0; border-top: 0; }
a[href^="mailto:"] { overflow-wrap: anywhere; }
.rodape li { margin: 0; }
.rodape li a { display: inline-block; padding: 0.6rem 0; }
.form .obrig { font-weight: 400; color: var(--tinta-2); }
@media (max-width: 22.5rem) { .marca img { height: 28px; } }

/* ---------- Símbolo montável (rodada 7A) ----------
   SVG inline traçado do PNG oficial. O círculo aparece primeiro; os quatro losangos entram de
   N, L, S e O, escalonados, e o "X" azul se fecha quando o último encaixa. Estado final = traçado
   (transform: none). Sem animação em prefers-reduced-motion. */
.simbolo { display: block; width: 100%; height: auto; max-width: none; aspect-ratio: 1; overflow: visible; vertical-align: top; }
.hero-simbolo { width: clamp(4.75rem, 6vw, 6.75rem); margin: 0; }
.faixa-simbolo { width: 3.5rem; margin-bottom: 1.25rem; }
.faixa-simbolo .simbolo { width: 3.5rem; height: 3.5rem; }

.simbolo-monta .sm-c,
.simbolo-monta .sm-p { animation: monta 900ms cubic-bezier(0.16, 1, 0.3, 1) both; }
.simbolo-monta .sm-c { transform-box: view-box; transform-origin: 350px 350px; animation-name: monta-centro; animation-duration: 650ms; }
.simbolo-monta .sm-n { --de: translate(0, -150px); animation-delay: 140ms; }
.simbolo-monta .sm-l { --de: translate(150px, 0); animation-delay: 220ms; }
.simbolo-monta .sm-s { --de: translate(0, 150px); animation-delay: 300ms; }
.simbolo-monta .sm-o { --de: translate(-150px, 0); animation-delay: 380ms; }
@keyframes monta {
  from { transform: var(--de); opacity: 0; }
  to { transform: none; opacity: 1; }
}
@keyframes monta-centro {
  from { transform: scale(0.35); opacity: 0; }
  to { transform: none; opacity: 1; }
}
@media (prefers-reduced-motion: reduce) {
  .simbolo-monta .sm-c,
  .simbolo-monta .sm-p { animation: none; }
}

/* ---------- WhatsApp flutuante (rodada 7A): só em telas até 900px ---------- */
.whats-flutuante { display: none; }
@media (max-width: 56.25rem) {
  .whats-flutuante {
    position: fixed; z-index: 40;
    /* Canto inferior esquerdo: o canto direito é do chat Tiflux (bolha de 56px a 24px da borda). */
    left: calc(1rem + env(safe-area-inset-left, 0px));
    bottom: calc(1.5rem + env(safe-area-inset-bottom, 0px));
    display: inline-flex; align-items: center; gap: 0.5rem;
    min-height: 3.25rem; padding: 0 1.25rem 0 1rem;
    border-radius: 999px; background: var(--marinho); color: #fff;
    font-weight: 700; font-size: 1rem; text-decoration: none;
    box-shadow: 0 6px 18px rgba(29, 44, 71, 0.28), 0 1px 3px rgba(29, 44, 71, 0.2);
    transition: transform 260ms cubic-bezier(0.16, 1, 0.3, 1), opacity 200ms ease, visibility 0s linear 0s;
  }
  .whats-flutuante svg { width: 1.35rem; height: 1.35rem; }
  .whats-flutuante:hover { background: var(--tinta); }
  .whats-flutuante:active { transform: scale(0.96); }
  .whats-flutuante:focus-visible { outline: 3px solid var(--azul); outline-offset: 3px; }
  /* Some quando outro WhatsApp está na tela (faixa, rodapé, botões) e enquanto se digita no formulário. */
  .whats-flutuante.escondido {
    transform: translateY(1rem); opacity: 0; visibility: hidden; pointer-events: none;
    transition: transform 200ms ease, opacity 160ms ease, visibility 0s linear 200ms;
  }
}
@media (max-width: 56.25rem) and (prefers-reduced-motion: reduce) {
  .whats-flutuante, .whats-flutuante.escondido { transition: opacity 120ms linear, visibility 0s linear 120ms; transform: none; }
}

/* ---------- Formulário: envio direto (rodada 7A) ---------- */
.form .hp { position: absolute !important; left: -10000px; top: auto; width: 1px; height: 1px; overflow: hidden; }
.form .form-lgpd { margin: 0; padding: 0.75rem 0.85rem; border-top: 1px solid var(--linha); font-size: 0.9rem; color: var(--tinta-2); }
.form .form-turnstile { padding: 0.75rem 0.85rem 0; border-top: 1px solid var(--linha); min-height: 65px; }
.form .form-turnstile[hidden] { display: none; }
.form-status:empty { display: none; }
.form-status { margin: 0; padding: 0.9rem 0.85rem; border-top: 1px solid var(--linha); font-size: 0.97rem; }
.form-status.ok { background: #eaf6ee; color: #1d5b33; }
.form-status.erro { background: #fdeeee; color: #8a1f1f; }
.form-status a { color: inherit; font-weight: 700; }
.form[aria-busy="true"] button[type="submit"] { opacity: 0.7; cursor: progress; }

/* =====================================================================
   Rodada 7B — impacto visual
   Hero com profundidade, bandas claro/escuro, cards, reveal, rodapé.
   A identidade de ficha permanece nos formulários, tabelas e FAQ.
   ===================================================================== */

:root {
  --t-6: clamp(2.55rem, 1.15rem + 4.4vw, 4.35rem);
  --raio-card: 14px;
  --sombra: 0 18px 40px rgba(29, 44, 71, 0.12);
}

.botao { border-radius: 8px; transition: background-color 160ms ease, color 160ms ease, border-color 160ms ease, transform 160ms ease, box-shadow 160ms ease; }
.botao:hover { transform: translateY(-1px); }
.botao:active { transform: translateY(0); }

.topo {
  background: rgba(255, 255, 255, 0.9);
  backdrop-filter: saturate(1.2) blur(14px);
  border-bottom-color: rgba(185, 211, 230, 0.85);
}

/* Bandas alternadas precisam do próprio respiro; o zero antigo colava seções. */
.secao + .secao { padding-top: var(--secao); }
.secao.fundo + .secao.fundo { padding-top: 0; border-top: 0; }
.secao.escura {
  background:
    radial-gradient(42rem 18rem at 100% 0%, rgba(32, 157, 216, 0.18), transparent 60%),
    #1d2c47;
  color: #d5e3f4;
}
.secao.escura h2,
.secao.escura h3,
.secao.escura strong { color: #fff; }
.secao.escura .cab-secao p,
.secao.escura p { color: #c9d8ec; }
.secao.escura a:not(.botao) { color: #9eddf8; }

/* ---------- Hero ---------- */
.hero {
  position: relative;
  color: #fff;
  overflow: clip;
  background:
    radial-gradient(46rem 28rem at 92% 8%, rgba(71, 178, 228, 0.38), transparent 58%),
    radial-gradient(32rem 22rem at 0% 100%, rgba(32, 157, 216, 0.22), transparent 55%),
    linear-gradient(158deg, #1a2740 0%, #37517e 62%, #2a6a98 100%);
  padding: clamp(2.4rem, 5vw, 4.25rem) 0 clamp(1.75rem, 3.5vw, 2.75rem);
}
.hero::before {
  content: "";
  position: absolute;
  inset: auto -8% -30% 40%;
  height: 55%;
  background: radial-gradient(closest-side, rgba(71, 178, 228, 0.22), transparent 70%);
  pointer-events: none;
}
.hero-grade {
  position: relative;
  display: grid;
  gap: clamp(1.75rem, 4vw, 3.5rem);
  align-items: center;
}
.hero h1 {
  color: #fff;
  font-weight: 600;
  font-size: clamp(2.7rem, 1.15rem + 4.8vw, 4.5rem);
  line-height: 1.02;
  letter-spacing: -0.038em;
  max-width: 16ch;
}
.hero h1 span { display: block; color: #d7f3ff; font-weight: 600; }
.hero-sub { color: #d5e4f4; font-size: clamp(1.05rem, 1rem + 0.3vw, 1.2rem); max-width: 38rem; margin-top: 1.15rem; }
.hero .acoes { margin-top: 1.6rem; }

.hero .botao.destaque,
.faixa .botao.destaque,
.abertura .botao.destaque,
.abertura .botao:not(.linha):not(.contorno) {
  background: #fff;
  border-color: #fff;
  color: var(--marinho);
  box-shadow: 0 8px 22px rgba(8, 18, 36, 0.18);
}
.hero .botao.destaque:hover,
.faixa .botao.destaque:hover,
.abertura .botao.destaque:hover,
.abertura .botao:not(.linha):not(.contorno):hover {
  background: #e7f6fd;
  border-color: #e7f6fd;
  color: var(--tinta);
}
.hero .botao.contorno,
.faixa .botao.contorno,
.abertura .botao.contorno,
.abertura .botao.linha {
  background: transparent;
  color: #fff;
  border-color: rgba(255, 255, 255, 0.72);
}
.hero .botao.contorno:hover,
.faixa .botao.contorno:hover,
.abertura .botao.contorno:hover,
.abertura .botao.linha:hover {
  background: rgba(255, 255, 255, 0.12);
  border-color: #fff;
  color: #fff;
}

/* Foto em camadas: moldura deslocada + véu da marca. Crédito fora da foto. */
.hero-visual, .abertura-visual { position: relative; min-width: 0; }
.foto-camada { position: relative; margin: 0; }
.foto-quadro {
  position: relative;
  z-index: 1;
  border-radius: 16px;
  overflow: hidden;
  aspect-ratio: 3 / 2;
  box-shadow: 0 24px 50px rgba(8, 18, 36, 0.38);
}
.foto-quadro img { width: 100%; height: 100%; object-fit: cover; aspect-ratio: 3 / 2; }
.foto-quadro::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(205deg, rgba(29, 44, 71, 0.05) 8%, rgba(32, 157, 216, 0.22) 48%, rgba(29, 44, 71, 0.62) 100%);
  pointer-events: none;
}
.foto-camada::before {
  content: "";
  position: absolute;
  z-index: 0;
  inset: 16px -16px -16px 18px;
  border: 1.5px solid rgba(143, 212, 245, 0.75);
  border-radius: 16px;
}
.hero .hero-simbolo {
  position: absolute;
  z-index: 2;
  left: -0.35rem;
  bottom: 2.4rem;
  width: clamp(4.6rem, 7vw, 6.6rem);
  padding: 0.28rem;
  background: #fff;
  border-radius: 50%;
  box-shadow: 0 12px 28px rgba(8, 18, 36, 0.28);
}

/* Faixa de fatos reais, sobre o marinho do hero e da abertura. */
.fatos, .abertura-fatos {
  list-style: none;
  margin: clamp(1.6rem, 3vw, 2.4rem) 0 0;
  padding: 0;
  display: grid;
  gap: 0.7rem;
  border: 0;
  background: none;
  border-radius: 0;
}
.fatos li {
  margin: 0;
  display: flex;
  gap: 0.75rem;
  align-items: flex-start;
  padding: 0.9rem 0.95rem;
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.16);
  border-radius: 12px;
  color: #fff;
}
.fatos li svg { width: 1.3rem; height: 1.3rem; color: #8fd4f5; margin-top: 0.15rem; }
.fatos b { display: block; font-size: 0.98rem; line-height: 1.3; color: #fff; }
.fatos li > span { color: #f3f8fc; font-size: 0.86rem; line-height: 1.35; }
.fatos-abertura li { display: grid; gap: 0.15rem; }
.fatos-abertura li > span { font-size: 0.8rem; color: #e8f0fa; }
.fatos-abertura li b { font-size: 1.05rem; }

@media (min-width: 48rem) {
  .fatos { grid-template-columns: 1fr 1fr; }
}
@media (min-width: 64rem) {
  .hero-grade { grid-template-columns: minmax(0, 1.12fr) minmax(0, 0.88fr); }
  .fatos:not(.fatos-abertura) { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
@media (min-width: 60rem) {
  .fatos-abertura { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

/* ---------- Abertura das internas ---------- */
.abertura {
  color: #fff;
  border-bottom: 0;
  background:
    radial-gradient(36rem 20rem at 100% 0%, rgba(71, 178, 228, 0.28), transparent 60%),
    linear-gradient(158deg, #1a2740 0%, #37517e 72%, #2d6c99 100%);
  padding-block: clamp(1.75rem, 4vw, 3.25rem) clamp(1.75rem, 3.5vw, 2.75rem);
}
.abertura h1 { color: #fff; font-size: clamp(2.05rem, 1.15rem + 2.4vw, 3.15rem); line-height: 1.08; max-width: 20ch; }
.abertura .resposta { color: #d5e4f4; }
.abertura .resposta strong { color: #fff; }
.abertura a:not(.botao) { color: #b7e7fb; }
.abertura a:not(.botao):hover { color: #fff; }
.migalhas a { color: #c5d6ec; }
.migalhas [aria-current="page"] { color: #fff; }
.migalhas li + li::before { color: rgba(255, 255, 255, 0.45); }
.abertura-grade { align-items: center; }
@media (min-width: 60rem) {
  .abertura-grade { grid-template-columns: 1fr; }
  .abertura-grade.com-foto { grid-template-columns: minmax(0, 1.12fr) minmax(0, 0.88fr); gap: 3rem; }
}

/* ---------- Cards de serviço ---------- */
.servicos {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 1rem;
}
.servico {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 0.45rem;
  margin: 0;
  padding: 1.35rem 1.3rem 1.2rem;
  background: #fff;
  border: 1px solid var(--linha);
  border-radius: var(--raio-card);
  box-shadow: 0 1px 0 rgba(29, 44, 71, 0.03);
  transition: transform 200ms cubic-bezier(0.16, 1, 0.3, 1), box-shadow 200ms ease, border-color 200ms ease;
}
.servico:hover, .servico:focus-within {
  transform: translateY(-4px);
  border-color: #8ecae6;
  box-shadow: var(--sombra);
}
.servico h3 a { color: var(--tinta); text-decoration: none; }
.servico h3 a::after { content: ""; position: absolute; inset: 0; border-radius: inherit; }
.servico h3 a:focus-visible { outline: none; }
.servico:focus-within { outline: 3px solid var(--azul); outline-offset: 3px; }
.servico p { color: var(--tinta-2); }
.servico-icone {
  width: 2.7rem;
  height: 2.7rem;
  display: grid;
  place-items: center;
  border-radius: 10px;
  background: #e7f4fb;
  color: var(--marinho);
  margin-bottom: 0.35rem;
}
.servico-icone svg { width: 1.3rem; height: 1.3rem; }
.servico-preco { margin-top: auto; font-weight: 700; color: var(--marinho) !important; }
.servico-ir {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  margin-top: 0.35rem;
  font-weight: 700;
  font-size: 0.92rem;
  color: var(--link);
}
.servico-ir svg { width: 1rem; height: 1rem; transition: transform 180ms ease; }
.servico:hover .servico-ir svg { transform: translateX(4px); }
.servico-principal { background: linear-gradient(180deg, #fff 0%, #f4f9fc 100%); }
.servico-planos {
  list-style: none;
  margin: 0.8rem 0 0;
  padding: 0;
  display: grid;
  gap: 0.45rem;
}
.servico-planos li {
  margin: 0;
  display: grid;
  grid-template-columns: 1fr auto;
  grid-template-areas: "nome preco" "detalhe preco";
  gap: 0 0.75rem;
  align-items: center;
  padding: 0.7rem 0.8rem;
  background: #fff;
  border: 1px solid var(--linha);
  border-radius: 10px;
}
.servico-planos span { grid-area: nome; font-weight: 700; font-size: 0.92rem; }
.servico-planos em { grid-area: detalhe; font-style: normal; color: var(--tinta-2); font-size: 0.82rem; }
.servico-planos b { grid-area: preco; font-size: 1.15rem; color: var(--tinta); text-align: right; }
.servico-planos b small { font-weight: 500; font-size: 0.78rem; color: var(--tinta-2); }
@media (min-width: 52rem) {
  .servicos { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .servico-principal { grid-column: 1 / -1; }
}
@media (min-width: 64rem) {
  .servico-principal { grid-template-columns: minmax(0, 1.25fr) minmax(0, 0.9fr); gap: 1.5rem 2rem; align-items: center; padding: 1.6rem 1.6rem; }
  .servico-principal .servico-planos { margin-top: 0; }
}

/* ---------- Dores → soluções ---------- */
.dores { list-style: none; margin: 0; padding: 0; }
.dores > li {
  margin: 0;
  display: grid;
  gap: 0.45rem;
  padding: 1.25rem 0;
  border-top: 1px solid rgba(255, 255, 255, 0.14);
}
.dores > li:last-child { border-bottom: 1px solid rgba(255, 255, 255, 0.14); }
.secao.escura .dor { margin: 0; font-weight: 600; font-size: clamp(1.05rem, 1rem + 0.3vw, 1.28rem); line-height: 1.35; color: #fff; }
.dor-seta { color: #47b2e4; }
.dor-seta svg { width: 1.2rem; height: 1.2rem; transform: rotate(90deg); }
.solucao a { font-weight: 700; text-decoration: none; color: #9eddf8; }
.solucao a:hover { text-decoration: underline; color: #fff; }
.solucao p { margin: 0.2rem 0 0; }
@media (min-width: 56rem) {
  .dores > li { grid-template-columns: minmax(0, 1fr) auto minmax(0, 1.05fr); gap: 1.25rem 1.5rem; align-items: center; }
  .dor-seta svg { transform: none; }
}


/* ---------- Capacidades com ícone ---------- */
.capacidades { columns: unset; display: grid; gap: 0.85rem; list-style: none; margin: 0; padding: 0; }
.capacidades li {
  break-inside: auto;
  margin: 0;
  padding: 1.15rem 1.1rem 1.05rem;
  border: 1px solid var(--linha);
  border-radius: var(--raio-card);
  background: #fff;
}
.capacidades strong { display: block; margin: 0.15rem 0 0.25rem; }
.cap-icone {
  width: 2.5rem;
  height: 2.5rem;
  display: grid;
  place-items: center;
  border-radius: 10px;
  background: #e7f4fb;
  color: var(--marinho);
  margin-bottom: 0.65rem;
}
.cap-icone svg { width: 1.25rem; height: 1.25rem; }
.secao.escura .capacidades li {
  background: rgba(255, 255, 255, 0.045);
  border-color: rgba(255, 255, 255, 0.14);
}
.secao.escura .capacidades span { color: #c9d8ec; }
.secao.escura .cap-icone { background: rgba(71, 178, 228, 0.16); color: #8fd4f5; }
@media (min-width: 44rem) { .capacidades { grid-template-columns: 1fr 1fr; } }
@media (min-width: 70rem) { .capacidades.tres { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

.secao.escura .etapas { border: 0; gap: 0.85rem; }
.secao.escura .etapas > li {
  grid-template-columns: 1fr;
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: var(--raio-card);
  padding: 1.25rem 1.15rem;
  background: rgba(255, 255, 255, 0.045);
}
.secao.escura .etapas > li::before {
  color: #d7f3ff;
  border-color: rgba(143, 212, 245, 0.6);
  margin-bottom: 0.65rem;
}
.secao.escura .etapas p { color: #c9d8ec; }
@media (min-width: 60rem) {
  .secao.escura .etapas > li { border-left-width: 1px; }
}

.secao.escura .razao { border-color: rgba(255, 255, 255, 0.16); background: rgba(255, 255, 255, 0.03); }
.secao.escura .razao h3 { color: #fff; border-bottom-color: rgba(255, 255, 255, 0.28); }
.secao.escura .razao li { color: #d5e3f4; border-bottom-color: rgba(255, 255, 255, 0.14); }
@media (min-width: 52rem) {
  .secao.escura .razao > div + div { border-left-color: rgba(255, 255, 255, 0.16); }
}

/* ---------- Cases (placeholders marcados) ---------- */
.cases { display: grid; gap: 1rem; }
.case {
  margin: 0;
  padding: 1.3rem 1.2rem 1.15rem;
  background: #fff;
  border: 1px solid var(--linha);
  border-radius: var(--raio-card);
}
.case-modelo {
  background: #fffdf5;
  border: 1.5px dashed var(--pendente-borda);
}
.case-quem { margin: 0 0 0.45rem; font-size: 0.82rem; font-weight: 700; color: var(--marinho); }
.case-quem small { display: block; font-weight: 500; color: var(--tinta-2); }
.case h3 { font-size: 1.12rem; margin-bottom: 0.85rem; }
.case dl { margin: 0; }
.case dl > div { margin: 0 0 0.7rem; }
.case dt { font-size: 0.75rem; font-weight: 700; color: var(--marinho); }
.case dd { margin: 0.15rem 0 0; color: var(--tinta-2); font-size: 0.95rem; }
.case-servicos { list-style: none; display: flex; flex-wrap: wrap; gap: 0.4rem; padding: 0; margin: 0.4rem 0 0; }
.case-servicos li { margin: 0; }
.depoimentos { display: grid; gap: 0.75rem; }
@media (min-width: 60rem) { .cases { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

/* ---------- Faixa final de CTA ---------- */
.faixa {
  position: relative;
  overflow: clip;
  background:
    radial-gradient(32rem 18rem at 0% 0%, rgba(71, 178, 228, 0.28), transparent 60%),
    linear-gradient(160deg, #243656 0%, #37517e 55%, #1d2c47 100%);
  padding-block: clamp(3.25rem, 7vw, 5.5rem);
}
.faixa h2 { font-size: clamp(2rem, 1.3rem + 2vw, 2.75rem); max-width: 16ch; }
.faixa .canais {
  align-self: stretch;
  border: 1px solid rgba(255, 255, 255, 0.18);
  border-radius: var(--raio-card);
  padding: 0.35rem 1.1rem;
  background: rgba(255, 255, 255, 0.06);
  border-top: 1px solid rgba(255, 255, 255, 0.18);
}

/* ---------- Rodapé ---------- */
.rodape {
  background:
    radial-gradient(28rem 16rem at 100% 0%, rgba(32, 157, 216, 0.16), transparent 60%),
    #1d2c47;
  padding-block: clamp(3rem, 6vw, 4.5rem) 1.75rem;
}
.rodape-marca p { max-width: 32ch; margin-top: 0.9rem; }
.rodape-redes { display: flex; flex-wrap: wrap; gap: 0.4rem; margin-top: 1rem; }
.rodape-redes li { margin: 0; }
.rodape .rodape-redes a {
  display: inline-flex;
  align-items: center;
  min-height: 2.25rem;
  padding: 0.2rem 0.8rem;
  border: 1px solid rgba(255, 255, 255, 0.28);
  border-radius: 999px;
  text-decoration: none;
  font-size: 0.85rem;
  font-weight: 600;
}
.rodape-redes a:hover { background: rgba(255, 255, 255, 0.1); text-decoration: none; }
.rodape .rodape-contato a { display: inline-flex; align-items: center; gap: 0.45rem; padding-block: 0.45rem; }
.rodape-contato svg { width: 1.05rem; height: 1.05rem; color: #8fd4f5; }
.rodape address { margin-top: 0.85rem; line-height: 1.5; }
.rodape-assinatura { display: inline-flex; align-items: center; gap: 0.55rem; }
.rodape-assinatura .simbolo { width: 1.65rem; height: 1.65rem; }

/* ---------- Reveal (só com JS; reduced-motion fica parado e visível) ---------- */
html.js [data-revela] {
  opacity: 0;
  transform: translateY(16px);
}
html.js [data-revela].visivel {
  opacity: 1;
  transform: none;
  transition: opacity 620ms cubic-bezier(0.16, 1, 0.3, 1), transform 620ms cubic-bezier(0.16, 1, 0.3, 1);
  transition-delay: calc(var(--i, 0) * 55ms);
}

@media (max-width: 40rem) {
  .foto-camada::before { inset: 10px 6px -10px 8px; }
  .hero .hero-simbolo { left: 0.4rem; bottom: 2.15rem; width: 4.4rem; }
}
@media (prefers-reduced-motion: reduce) {
  .botao, .botao:hover, .servico, .servico:hover, .servico-ir svg { transition: none; transform: none; }
  html.js [data-revela],
  html.js [data-revela].visivel { opacity: 1; transform: none; transition: none; }
}

/* ---------- Idioma, notícias e post (rodada 7C) ---------- */
.idiomas { display: inline-flex; align-items: center; gap: 0.2rem; font-weight: 700; font-size: 0.88rem; }
.idiomas a { color: var(--tinta-2); text-decoration: none; padding: 0.45rem 0.15rem; }
.idiomas a[aria-current="true"] { color: var(--marinho); }
.idiomas span { color: var(--linha-forte); }
.nav-idioma { display: flex; align-items: center; }
@media (min-width: 68.75rem) {
  .nav-principal .nav-idioma { margin-left: 0.15rem; }
  .nav-principal .idiomas a { padding: 0.45rem 0.2rem; font-size: 0.85rem; }
}
.noticias { list-style: none; margin: 0; padding: 0; display: grid; gap: 1rem; }
.noticia {
  position: relative;
  margin: 0;
  padding: 1.3rem 1.25rem 1.15rem;
  background: #fff;
  border: 1px solid var(--linha);
  border-radius: var(--raio-card);
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  transition: transform 200ms cubic-bezier(0.16, 1, 0.3, 1), box-shadow 200ms ease, border-color 200ms ease;
}
.noticia:hover, .noticia:focus-within { transform: translateY(-3px); border-color: #8ecae6; box-shadow: var(--sombra); }
.noticia h3 a { color: var(--tinta); text-decoration: none; }
.noticia h3 a::after { content: ""; position: absolute; inset: 0; }
.noticia h3 a:focus-visible { outline: none; }
.noticia:focus-within { outline: 3px solid var(--azul); outline-offset: 3px; }
.noticia-data { margin: 0; font-size: 0.82rem; font-weight: 700; color: var(--marinho); }
.noticia p { color: var(--tinta-2); }
.post { max-width: 44rem; }
.post h2 { margin: 2.2rem 0 0.8rem; }
.post .acoes { margin-top: 1.5rem; }
.abertura .post-meta { color: #d5e4f4; margin-top: 1rem; font-size: 0.95rem; }
@media (min-width: 52rem) { .noticias { grid-template-columns: 1fr; } .noticias:has(.noticia:only-child) { grid-template-columns: 1fr; max-width: 44rem; } }

@media print {
  .whats-flutuante, .hero::before, .foto-quadro::after, .foto-camada::before { display: none; }
  .hero, .abertura, .secao.escura, .faixa, .rodape { background: #fff; color: #000; }
  .hero h1, .hero h1 span, .abertura h1, .secao.escura h2, .secao.escura h3 { color: #000; }
}

/* ---------- Área do cliente: abrir chamado no Tiflux (08/10) ---------- */
.barra-cliente { background: var(--tinta); color: #c9d8ec; font-size: 0.85rem; line-height: 1.3; }
.barra-cliente .recorte { display: flex; align-items: center; justify-content: flex-end; gap: 0.6rem; min-height: 2.1rem; }
.barra-cliente a { display: inline-flex; align-items: center; gap: 0.35rem; color: #fff; font-weight: 700; text-decoration: none; padding: 0.3rem 0; }
.barra-cliente a:hover { text-decoration: underline; text-underline-offset: 0.25em; }
.barra-cliente a:focus-visible { outline: 2px solid var(--azul); outline-offset: 2px; }
.barra-cliente svg { width: 1rem; height: 1rem; color: #9eddf8; }
.nav-principal .nav-chamado a { display: flex; align-items: center; gap: 0.45rem; }
.nav-principal .nav-chamado svg { width: 1.1rem; height: 1.1rem; flex: none; }
@media (min-width: 68.75rem) { .nav-principal .nav-chamado { display: none; } }
.rodape-contato a[data-chamado] svg { flex: none; }
/* Espaço para a bolha do chat (56px + 24px) não cobrir o fim do rodapé. */
.rodape-base { padding-bottom: 4.5rem; }
@media print { .whats-flutuante { display: none; } }

/* ---------- Post do blog: arte e corpo (08/10) ---------- */
.post-figura { margin: 0 0 2rem; }
.post-figura img { display: block; width: 100%; max-width: 32rem; height: auto; border-radius: var(--raio-card, 14px); box-shadow: var(--sombra, 0 18px 40px rgba(29, 44, 71, 0.12)); }
.post-figura figcaption { margin-top: 0.6rem; font-size: 0.85rem; color: var(--tinta-2); }
.post > p, .post li { font-size: 1.05rem; line-height: 1.65; }
.post ul, .post ol { padding-left: 1.25rem; }
.post li + li { margin-top: 0.5rem; }

/* =====================================================================
   Rodada 8 — narrativa e prova
   Sobretítulos, "como trabalhamos", planos com itens, prova honesta,
   notícias com capa, CTA em banda azul e rodapé mais organizado.
   ===================================================================== */

/* Sobretítulo: rótulo curto acima do h2, dá hierarquia e ritmo entre bandas. */
.sobretitulo {
  margin: 0 0 0.7rem;
  font-size: 0.8rem;
  font-weight: 700;
  line-height: 1.3;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--link);
}
.cab-secao .sobretitulo { margin: 0 0 0.7rem; font-size: 0.8rem; color: var(--link); }
.secao.escura .sobretitulo, .secao.escura .cab-secao .sobretitulo { color: #9eddf8; }
.cab-secao h2 { max-width: 22ch; }
@media (min-width: 60rem) {
  .cab-secao.lado { max-width: none; display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr); gap: 3rem; align-items: end; }
  .cab-secao.lado p { margin: 0; }
}

/* Card principal de serviço: texto à esquerda, preço de entrada à direita. */
@media (min-width: 64rem) {
  .servico-principal { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 2.5rem; align-items: center; padding: 1.75rem 2rem; }
}
.servico-destaque {
  margin: 0.6rem 0 0;
  display: grid;
  gap: 0.1rem;
  padding: 1rem 1.25rem;
  border-radius: 10px;
  background: var(--tinta);
  color: #c9d8ec !important;
  font-size: 0.85rem;
  line-height: 1.35;
  min-width: 15rem;
}
.servico-destaque b { color: #fff; font-size: 1.9rem; letter-spacing: -0.03em; line-height: 1.15; }
.servico-destaque b small { font-size: 0.9rem; font-weight: 500; color: #c9d8ec; letter-spacing: 0; }
@media (min-width: 64rem) { .servico-destaque { margin: 0; } }

/* ---------- Como trabalhamos: 4 etapas com ícone ---------- */
.passos { list-style: none; margin: 0; padding: 0; display: grid; gap: 1.75rem; counter-reset: none; }
.passos > li { position: relative; margin: 0; padding-top: 0.25rem; }
.passo-icone {
  position: relative;
  z-index: 1;
  width: 3rem;
  height: 3rem;
  display: grid;
  place-items: center;
  border-radius: 12px;
  background: var(--tinta);
  color: #8fd4f5;
  box-shadow: 0 0 0 6px var(--papel);
}
.passo-icone svg { width: 1.35rem; height: 1.35rem; }
.passo-num { margin: 1.1rem 0 0.2rem; font-size: 0.8rem; font-weight: 700; letter-spacing: 0.12em; color: var(--link); font-variant-numeric: tabular-nums; }
.passos h3 { font-size: 1.15rem; margin-bottom: 0.45rem; }
.passos p { color: var(--tinta-2); font-size: 0.98rem; }
.passos a { font-weight: 700; }
@media (min-width: 48rem) { .passos { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 2.25rem 2rem; } }
@media (min-width: 64rem) {
  .passos { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 2rem; }
  /* Linha que liga as etapas, passando por trás dos ícones. */
  .passos::before { content: none; }
  .passos > li:not(:last-child)::after {
    content: "";
    position: absolute;
    top: calc(0.25rem + 1.5rem);
    left: 3rem;
    right: -2rem;
    height: 1.5px;
    background: linear-gradient(90deg, var(--linha-forte), var(--linha));
  }
}

/* ---------- Planos na home (rodada 10): faixa compacta de preços de referência, sem card em destaque ---------- */
.planos-home { display: grid; gap: 1.5rem; }
.planos-home .cab-secao { margin-bottom: 0; }
.planos-faixa { list-style: none; margin: 0 0 1.25rem; padding: 0; display: grid; border-top: 1px solid var(--linha); }
.planos-faixa li {
  margin: 0;
  padding: 0.85rem 0;
  border-bottom: 1px solid var(--linha);
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 0.1rem 1rem;
  align-items: baseline;
}
.pf-nome { font-weight: 700; color: var(--tinta); }
.planos-faixa b { font-size: 1.15rem; color: var(--tinta); text-align: right; }
.planos-faixa b small { font-size: 0.85rem; font-weight: 500; color: var(--tinta-2); }
.pf-quem { grid-column: 1 / -1; font-size: 0.92rem; color: var(--tinta-2); }
@media (min-width: 60rem) {
  .planos-home { grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); gap: 4rem; align-items: start; }
}

/* ---------- Nossa história + prova honesta ---------- */
.historia-lead {
  margin-top: 1rem;
  font-size: clamp(1.2rem, 1.05rem + 0.6vw, 1.55rem);
  line-height: 1.4;
  font-weight: 500;
  letter-spacing: -0.01em;
  color: var(--tinta-2);
  max-width: 24ch;
}
@media (min-width: 56rem) { .historia > div:first-child { position: sticky; top: 7rem; align-self: start; } }
.provas { margin-top: clamp(2.5rem, 5vw, 4rem); padding-top: 2rem; border-top: 1.5px solid var(--tinta); }
.provas-titulo { font-size: 0.8rem; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: var(--link); margin-bottom: 1.25rem; }
.provas ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 1.5rem; }
.provas li { margin: 0; display: grid; grid-template-columns: 2.75rem 1fr; gap: 1rem; align-items: start; }
.prova-icone { width: 2.75rem; height: 2.75rem; display: grid; place-items: center; border-radius: 10px; background: #e7f4fb; color: var(--marinho); }
.prova-icone svg { width: 1.3rem; height: 1.3rem; }
.provas h4 { margin: 0.1rem 0 0.3rem; font-size: 1.05rem; line-height: 1.3; }
.provas h4 a { color: var(--tinta); text-decoration-color: var(--linha-forte); }
.provas h4 a:hover { color: var(--marinho); text-decoration-color: var(--azul); }
.provas p { margin: 0; color: var(--tinta-2); font-size: 0.95rem; }
@media (min-width: 52rem) { .provas ul { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 2rem; } }

/* Depoimentos reais (rodada 10): citação, nome e cargo/empresa; sem estrelas. Duas colunas corridas no desktop
   (textos de tamanhos muito diferentes: em grade, os curtos ficavam com um vão grande). */
.depoimento {
  margin: 0;
  padding: 1.4rem 1.4rem 1.25rem;
  background: #fff;
  border: 1px solid var(--linha);
  border-left: 3px solid var(--azul);
  border-radius: var(--raio-card);
  display: flex;
  flex-direction: column;
  gap: 1rem;
}
.depoimento blockquote { margin: 0; }
.depoimento blockquote p { margin: 0; color: var(--tinta); line-height: 1.65; }
.depoimento figcaption { display: grid; gap: 0.1rem; font-size: 0.92rem; }
.depoimento figcaption b { color: var(--marinho); }
.depoimento figcaption span { color: var(--tinta-2); }
@media (min-width: 52rem) {
  .depoimentos { display: block; columns: 2; column-gap: 1rem; }
  .depoimento { break-inside: avoid; margin-bottom: 1rem; }
}

/* ---------- Notícias com capa ---------- */
.noticia.com-capa { padding: 0; overflow: hidden; }
.noticia-capa { width: 100%; height: auto; aspect-ratio: 16 / 9; object-fit: cover; background: var(--papel-2); }
.noticia-corpo { display: flex; flex-direction: column; gap: 0.35rem; padding: 1.3rem 1.25rem 1.2rem; }
.noticia-corpo p:last-of-type { margin-bottom: 0.25rem; }
@media (min-width: 52rem) {
  .noticias:has(.noticia:only-child) { max-width: 56rem; }
  .noticia.com-capa:only-child { display: grid; grid-template-columns: 15rem 1fr; }
  .noticia.com-capa:only-child .noticia-capa { aspect-ratio: 1; height: 100%; }
  .noticia.com-capa:only-child .noticia-corpo { padding: 1.6rem 1.75rem; justify-content: center; }
}

/* ---------- CTA final em banda azul (contrasta com o rodapé marinho) ---------- */
.faixa {
  background:
    radial-gradient(36rem 20rem at 100% 0%, rgba(143, 212, 245, 0.16), transparent 62%),
    radial-gradient(30rem 18rem at 0% 100%, rgba(29, 44, 71, 0.35), transparent 60%),
    linear-gradient(120deg, #15608f 0%, #186fa3 55%, #1a6797 100%);
}
.faixa p, .faixa .canais span { color: #f2f8fd; }
.faixa h2 { margin-bottom: 0.9rem; }
.faixa .canais { background: rgba(10, 30, 55, 0.22); border-color: rgba(255, 255, 255, 0.28); }
.faixa .canais li { border-bottom-color: rgba(255, 255, 255, 0.22); }
.faixa .canais li:last-child { border-bottom: 0; }
.faixa .botao.destaque { color: #15608f; }
.faixa :focus-visible { outline-color: #fff; }

/* ---------- Rodapé ---------- */
@media (min-width: 52rem) { .rodape-grade { grid-template-columns: minmax(0, 1.35fr) minmax(0, 0.95fr) minmax(0, 1.05fr) minmax(0, 1.5fr); gap: 2.5rem 3rem; } }
.rodape h2 { font-size: 0.78rem; letter-spacing: 0.12em; text-transform: uppercase; color: #9eddf8; margin-bottom: 0.9rem; }
.rodape-horario { display: flex; align-items: center; gap: 0.5rem; margin-top: 0.75rem; font-size: 0.92rem; }
.rodape-horario svg { width: 1.05rem; height: 1.05rem; color: #8fd4f5; }
.rodape li a { text-decoration-color: rgba(255, 255, 255, 0.35); }
.rodape li a:hover { text-decoration-color: #fff; }
.rodape-contato a { overflow-wrap: break-word; }

@media (prefers-reduced-motion: reduce) {
  .noticia, .noticia:hover { transition: none; transform: none; }
}
@media (min-width: 56rem) { .faixa .canais { align-self: center; } }
/* Celular: etapas em linha (ícone à esquerda, fio vertical ligando), rodapé em duas colunas. */
@media (max-width: 47.99rem) {
  .passos { gap: 0; }
  .passos > li { display: grid; grid-template-columns: 3rem 1fr; column-gap: 1rem; padding-bottom: 1.75rem; }
  .passos > li > :not(.passo-icone) { grid-column: 2; }
  .passo-icone { grid-row: 1 / span 3; }
  .passo-num { margin-top: 0.1rem; }
  .passos > li:not(:last-child)::after {
    content: "";
    position: absolute;
    left: 1.5rem;
    top: 3.75rem;
    bottom: 0.25rem;
    width: 1.5px;
    background: var(--linha);
  }
  .rodape-grade { grid-template-columns: 1fr 1fr; gap: 2.25rem 1.25rem; }
  .rodape-marca, .rodape-grade > div:last-child { grid-column: 1 / -1; }
}
@media (max-width: 40rem) {
  .faixa .canais li { grid-template-columns: 1fr; gap: 0.1rem; }
  .faixa .canais a { overflow-wrap: anywhere; }
}
/* Placeholder amarelo dentro dos fatos da abertura herdava o texto azul-claro (1,3:1). */
.fatos li span.pendente, .fatos-abertura li span.pendente { color: var(--pendente-tinta); font-size: 0.85rem; }

/* =====================================================================
   Rodada 9 — polimento final
   Movimento com os mesmos tempos e curva, legenda da foto fora do fio
   da moldura, preços dos fatos com o peso certo, foco que o WhatsApp
   flutuante não cobre, reduced-motion e impressão sem conteúdo oculto.
   ===================================================================== */

:root {
  /* Movimento: uma curva de saída (expo) e dois tempos. O símbolo e o reveal têm os seus. */
  --curva: cubic-bezier(0.16, 1, 0.3, 1);
  --t-rapido: 160ms;
  --t-medio: 220ms;
  --sobe: -3px;
  accent-color: var(--marinho);
}

.botao { transition: background-color var(--t-rapido) ease-out, color var(--t-rapido) ease-out, border-color var(--t-rapido) ease-out, box-shadow var(--t-rapido) ease-out, transform var(--t-rapido) var(--curva); }
.botao:hover { transform: translateY(-1px); }
.botao:active { transform: translateY(0); transition-duration: 60ms; }
.servico, .noticia { transition: transform var(--t-medio) var(--curva), box-shadow var(--t-medio) ease-out, border-color var(--t-medio) ease-out; }
.servico:hover, .servico:focus-within, .noticia:hover, .noticia:focus-within { transform: translateY(var(--sobe)); }
.servico-ir svg, .indice .ir svg { transition: transform var(--t-medio) var(--curva); }
.servico:hover .servico-ir svg, .noticia:hover .servico-ir svg, .indice a:hover .ir svg { transform: translateX(3px); }
.faq summary svg { transition: transform var(--t-medio) var(--curva); }
.faq summary { transition: color var(--t-rapido) ease-out; }
.relacionados a, .rodape-redes a, .idiomas a { transition: background-color var(--t-rapido) ease-out, border-color var(--t-rapido) ease-out, color var(--t-rapido) ease-out; }
.idiomas a:hover { color: var(--marinho); text-decoration: underline; text-decoration-color: var(--azul); text-underline-offset: 0.3em; }

/* Foco do card: só para teclado (o clique do mouse não deixa contorno azul no card). */
@supports selector(:has(*)) {
  .servico:focus-within, .noticia:focus-within { outline: none; }
  .servico:has(:focus-visible), .noticia:has(:focus-visible) { outline: 3px solid var(--azul); outline-offset: 3px; }
}

/* Fatos da abertura: o valor (b) manda; o rótulo é menor, mas legível sobre o gradiente (≥ 4,6:1). */
@media (min-width: 48rem) {
  .fatos-abertura { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}


/* Migalhas no celular: o último item (igual ao h1 logo abaixo) vira uma linha só, com reticências. */
@media (max-width: 40rem) {
  .migalhas ol { flex-wrap: nowrap; }
  .migalhas li { flex: none; }
  .migalhas li:last-child { flex: 0 1 auto; min-width: 0; }
  .migalhas li:last-child > span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
}

/* 404 no mesmo desenho dos cards do site. */
.erro .campo-erro {
  border-radius: var(--raio-card);
  padding: 2.75rem 2.5rem 2.5rem;
  background: linear-gradient(180deg, #fff 0%, #f4f9fc 100%);
  box-shadow: var(--sombra);
}

@media (max-width: 40rem) { .erro .campo-erro { padding: 2rem 1.25rem 1.5rem; } }

/* WhatsApp flutuante: mesma altura (56px) e mesma linha de base (24px) da bolha do chat. */
@media (max-width: 56.25rem) {
  html { scroll-padding-bottom: 6rem; }
  .whats-flutuante { min-height: 3.5rem; bottom: calc(24px + env(safe-area-inset-bottom, 0px)); left: calc(16px + env(safe-area-inset-left, 0px)); }
}

/* Linha do formulário: o <p> da LGPD carrega a borda; o limite de 68ch dos parágrafos cortava o fio. */
.form .form-lgpd { max-width: none; }

.tabela-rolagem { scrollbar-color: var(--linha-forte) transparent; scrollbar-width: thin; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    transition-delay: 0s !important;
    scroll-behavior: auto !important;
  }
  .botao:hover, .servico:hover, .servico:focus-within, .noticia:hover, .noticia:focus-within,
  .servico:hover .servico-ir svg, .noticia:hover .servico-ir svg, .indice a:hover .ir svg { transform: none; }
}

@media print {
  html.js [data-revela] { opacity: 1 !important; transform: none !important; }
  .barra-cliente, .whats-flutuante { display: none !important; }
}

/* Fatos sobre o gradiente: o vidro escurece em vez de clarear, para o rótulo passar de 4,5:1 também
   no canto mais claro do hero (768–1100px). */
.fatos li { background: rgba(10, 24, 46, 0.16); border-color: rgba(255, 255, 255, 0.2); }