/* =============================================================
   MS Multisolucoes — Engenharia e Servicos  |  main.css
   -------------------------------------------------------------
   Sistema de design herdado do site da MS: a mesma arquitetura
   de tokens, grade, componentes e acessibilidade. A COR nao veio
   junto. Cada tom esverdeado da origem foi transposto para um
   cinza de vies azul PRESERVANDO A LUMINANCIA RELATIVA, de modo
   que todas as razoes de contraste medidas la continuam valendo
   aqui — e por isso os comentarios que citam numero de contraste
   seguem verdadeiros.

   As cores de marca sao as do logotipo: o azul do anel, o lilas
   do monograma MS e o azul-marinho do fundo.

   Tipografia: pilha do sistema mais Inter hospedada. Nenhuma
   webfont paga, nenhum arquivo de fonte de terceiro no servidor.
   ============================================================= */

/* ---------- 0. Fonte hospedada -------------------------------
   Inter variável, subconjunto latino: 48 KB para TODOS os pesos
   de 400 a 700. Fonte estática exigiria quatro arquivos.

   Só é baixada por quem precisa. Em iPhone e Mac o navegador
   resolve -apple-system antes de chegar na Inter e nem busca o
   arquivo — o visitante Apple recebe a SF Pro real e zero bytes
   de fonte.

   O subconjunto latin-ext foi descartado de propósito: cobre
   caracteres do leste europeu que o português não usa. Os nossos
   acentos moram todos no latin.

   font-display: swap — o texto aparece na hora com a fonte do
   sistema e troca quando a Inter chega. O contrário (bloquear a
   renderização) é o que produz aquele flash de página em branco. */
@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url("../fonts/inter-latin.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;
}

/* ---------- 1. Tokens ---------------------------------------- */
:root {
  /* MARCA
     Amostrada do arquivo logomarca.jpeg, pixel a pixel. O marinho
     ocupa 62,7% da arte, o branco 9,3%, o lilas do monograma 2,3%
     e o azul do anel 0,7%. Nao foi escolhida cor nenhuma aqui, so
     medida. */
  --preto:      #000000;
  --marinho:    #050a30;   /* o fundo do logotipo: faixa e heroi */
  --grafite:    #101012;   /* cartao sobre preto */
  --grafite-2:  #17181a;   /* cartao de segundo nivel */
  --marca:      #2542a6;   /* o azul do anel */
  --acento:     #aaaaf4;   /* o lilas do monograma MS */
  --marca-clara:#d4d6f9;
  /* Unico tom que NAO sai do logotipo. Realce e aviso, onde o
     lilas ficaria indistinguivel do acento. */
  --realce:     #ffd166;

  /* SUPERFICIE E TINTA DO MODO ESCURO
     Preto puro com texto branco puro e o par de maior contraste que
     existe, e por isso mesmo o mais cansativo: em leitura longa a
     letra clara "sangra" sobre o fundo (halacao) e o olho forca. Um
     quase-preto com um branco quebrado le igual de nitido e nao doi.
     O preto puro continua existindo, para as faixas de impacto. */
  --fundo:      #0b0b0d;   /* superficie base, no lugar do #000 */
  --texto:      #e6e7f0;   /* texto corrido, no lugar do branco puro */

  /* Neutros */
  --branco:     #ffffff;
  --cinza-1:    #b7b9c5;   /* texto secundário sobre escuro */
  --cinza-2:    #8d8f9b;   /* texto terciário */
  /* Era #5e5f69 e REPROVAVA no contraste: 3,11 contra o fundo, quando o
     mínimo da WCAG AA para texto normal é 4,5. Como quase tudo que usa este
     tom tem 12 ou 13 px (etiqueta de artigo, migalha, base do rodapé,
     legenda), nenhum deles se enquadra na exceção de texto grande.
     #7f818d passa em TODAS as superfícies escuras da casa: 5,09 no fundo,
     5,24 no rodapé, 4,94 no grafite e 4,62 no cartão mais escuro.
     Em seção clara ele cairia para 3,48, por isso lá o tom vira --tinta-2,
     na regra do bloco de seções claras. */
  --cinza-3:    #7f818d;   /* legendas, rodapé */
  --linha:      #27282d;   /* divisórias */

  /* Seções claras, usadas em contraste */
  --claro:      #f2f3f9;
  --claro-2:    #ffffff;
  --tinta:      #0c0c0e;
  --tinta-2:    #595a64;

  /* Tipografia
     ORDEM IMPORTA. -apple-system e BlinkMacSystemFont resolvem
     para a San Francisco ja instalada no iPhone, no iPad e no Mac:
     o visitante recebe uma fonte de interface desenhada para tela,
     sem baixar um byte. Pedir ao aparelho a fonte que ele ja tem e
     permitido; hospedar o arquivo da San Francisco no servidor nao
     e, e a licenca da Apple diz isso em letra grande.

     Nos demais aparelhos entra a Inter, hospedada em assets/fonts
     num subconjunto latino de 48 KB que cobre todos os pesos. E a
     parente mais proxima com licenca aberta. Segoe UI e Roboto
     ficam de reserva.

     Se um dia a MS fechar uma fonte propria de marca, o lugar de
     trocar e aqui e so aqui: o resto da folha le --fonte. */  --fonte: -apple-system, BlinkMacSystemFont, "SF Pro Text", "SF Pro",
           Inter, "Segoe UI", system-ui, Roboto, sans-serif;
  --fonte-display: -apple-system, BlinkMacSystemFont, "SF Pro Display", "SF Pro",
           Inter, "Segoe UI", system-ui, Roboto, sans-serif;

  /* Ritmo vertical e medidas
     A largura de texto corrido é menor que a de mídia de propósito.
     Linha longa demais cansa: a leitura confortável fica entre 60 e
     75 caracteres, e é isso que separa página densa de página que
     o cliente realmente lê até o fim. */
  --larg-max:   1180px;    /* seções de mídia e grades */
  --larg-texto: 60rem;     /* texto corrido */
  --gap:        clamp(1rem, 2.5vw, 1.75rem);
  /* 9rem por seção somavam 144 px em cima e embaixo. Com dez seções,
     a página virava um corredor de espaço vazio e o visitante rolava
     muito sem ver conteúdo. 6rem respira sem dispersar. */
  /* O teto, 7,5rem, da 120px no computador, que e a faixa que a
     Apple usa entre blocos. Nao mexi nele. O piso subiu de 4 para
     4,75rem porque 64px no celular espremia as secoes umas nas
     outras, e e no celular que a maioria le. */
  --pad-secao:  clamp(4.75rem, 8.5vw, 7.5rem);

  /* Dois raios, de propósito.
     O quadrado é o átomo do logotipo e fica nos marcadores pequenos.
     As superfícies grandes ganham canto generoso — é o que dá o peso
     de produto às seções, em vez de ar de painel administrativo. */
  --raio:       18px;      /* cartões, imagens, superfícies */
  --raio-p:     2px;       /* marcadores: o quadrado do "Ai" */

  --transicao: 180ms cubic-bezier(.2,.6,.3,1);
}

/* ---------- 2. Reset enxuto ---------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}
body {
  margin: 0;
  /* Preto chapado lê barato. Um preto em camada, com um sopro de azul
     vindo de cima, dá profundidade sem que ninguém perceba a cor.

     NÃO usar background-attachment: fixed aqui. É bonito no desktop e
     quebra no celular: iOS e Android antigos redimensionam o fundo a
     cada movimento da barra de endereço, o que produz tremor e, em
     alguns aparelhos, o degradê aparece esticado. Custa caro em
     desempenho de rolagem e não acrescenta nada. */
  background: var(--fundo);
  background-image: radial-gradient(120% 70% at 50% -10%, #121214 0%, var(--fundo) 62%);
  color: var(--texto);
  font-family: var(--fonte);
  font-size: clamp(1rem, .97rem + .15vw, 1.0625rem);
  /* 1,55 e nao 1,47. A Apple usa perto de 1,47, mas a Apple nao
     justifica texto. Com as duas margens fechadas, o espaco entre
     palavras varia de linha para linha, e entrelinha curta faz
     essa variacao saltar aos olhos. 1,55 fecha o paragrafo sem
     denunciar a justificacao. */
  line-height: 1.55;
  /* A San Francisco foi desenhada com um leve fechamento em corpo
     de texto. Sem isso ela le generica, igual a qualquer sans. */
  letter-spacing: -.011em;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}
img, svg, video { max-width: 100%; height: auto; display: block; }
a { color: inherit; }
button { font: inherit; }
/* Peso 600 e não 700 nos tamanhos grandes.
   A SF Pro Display em semibold, corpo grande e tracking fechado, lê
   sofisticada. A mesma frase em negrito lê agressiva. É a diferença
   entre uma marca que afirma e uma que grita — e este cliente vende
   confiança, não adrenalina. */
/* Escala tipográfica.
   A versão anterior ia a 4,6rem no h1 (73 px). Num monitor de
   notebook isso ocupa a tela inteira e deixa a página com ar de
   cartaz, não de site institucional. Recuada para 3,4rem: continua
   imponente e volta a caber na leitura.

   text-wrap: balance fica só no h1 e h2. Em título curto ele
   equilibra bem; em h3 dentro de cartão estreito ele produz quebras
   estranhas, com uma palavra sozinha na última linha. */
h1, h2, h3, h4 {
  font-family: var(--fonte-display);
  font-weight: 600;
  letter-spacing: -.024em;
  line-height: 1.12;
  margin: 0 0 .6em;
}
h1 { font-size: clamp(2.35rem, 1.6rem + 3.2vw, 3.9rem); letter-spacing: -.03em; line-height: 1.05; text-wrap: balance; }
h2 { font-size: clamp(1.75rem, 1.3rem + 2.1vw, 2.9rem); letter-spacing: -.026em; line-height: 1.07; text-wrap: balance; }
h3 { font-size: clamp(1.12rem, 1.04rem + .35vw, 1.35rem); letter-spacing: -.014em; font-weight: 600; }
h4 { font-weight: 600; }
p  { margin: 0 0 1.1em; }
p:last-child { margin-bottom: 0; }
ul { margin: 0; padding: 0; list-style: none; }

/* Foco visível de verdade. É obrigação de acessibilidade e costuma
   ser a primeira coisa que some nos temas prontos. */
:focus-visible {
  outline: 3px solid var(--acento);
  outline-offset: 3px;
  border-radius: var(--raio);
}

/* Pular a navegação: quem usa teclado ou leitor de tela não deve
   ser obrigado a percorrer o menu inteiro em cada página. */
.pular {
  position: absolute; left: -9999px; top: 0; z-index: 999;
  background: var(--acento); color: #000; padding: .75rem 1.25rem; font-weight: 700;
}
.pular:focus { left: 0; }

/* ---------- 3. Layout ---------------------------------------- */
.container { width: min(100% - 2.5rem, var(--larg-max)); margin-inline: auto; }
@media (min-width: 48em) { .container { width: min(100% - 4rem, var(--larg-max)); } }

.secao { padding-block: var(--pad-secao); }
.secao--clara { background: var(--claro); color: var(--tinta); }
.secao--clara h1, .secao--clara h2, .secao--clara h3 { color: var(--tinta); }
.secao--grafite { background: var(--grafite); }

.grade { display: grid; gap: var(--gap); }
@media (min-width: 40em) and (max-width: 61.99em) {
  .grade--3, .grade--4 { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 40em) { .grade--2 { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 62em) {
  .grade--3 { grid-template-columns: repeat(3, 1fr); }
  .grade--4 { grid-template-columns: repeat(4, 1fr); }
}

/* Duas colunas: texto de um lado, mídia do outro */
.duo { display: grid; gap: clamp(1.75rem, 5vw, 3.5rem); align-items: center; }
@media (min-width: 56em) {
  .duo { grid-template-columns: 1fr 1fr; }
  .duo--inverso > :first-child { order: 2; }
}

/* ---------- 4. Marcadores: o motivo do logotipo -------------- */
.chapeu {
  display: inline-flex; align-items: center; gap: .7rem;
  font-size: .78rem; font-weight: 700; letter-spacing: .18em;
  text-transform: uppercase; color: var(--acento); margin-bottom: 1rem;
}
.chapeu::before { content: ""; width: 10px; height: 10px; background: currentColor; flex: none; }
.secao--clara .chapeu { color: var(--marca); }

.lista-q > li { position: relative; padding-left: 1.6rem; margin-bottom: .7rem; }
.lista-q > li::before {
  content: ""; position: absolute; left: 0; top: .62em;
  width: 8px; height: 8px; background: var(--acento);
}
.secao--clara .lista-q > li::before { background: var(--marca); }

/* ---------- 5. Botões ---------------------------------------- */
/* Botão em cápsula. Canto totalmente arredondado lê como controle de
   produto; canto reto lê como botão de formulário corporativo.
   Peso 600, não 700: o botão deve convidar, não gritar. */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .55rem;
  padding: .95rem 1.75rem; border: 1px solid transparent; border-radius: 980px;
  font-weight: 600; font-size: 1rem; letter-spacing: -.012em;
  text-decoration: none; cursor: pointer; transition: var(--transicao);
  min-height: 50px;           /* alvo de toque confortável no celular */
}
.btn--principal { background: var(--acento); color: #000; }
.btn--principal:hover { background: #bfc4f2; transform: translateY(-1px); }

/* Link com chevron: a forma mais econômica de sinalizar continuidade
   sem gastar um botão. O chevron desliza no hover. */
.link-seta {
  display: inline-flex; align-items: center; gap: .3rem;
  color: var(--acento); text-decoration: none; font-weight: 500;
}
.link-seta::after { content: "›"; font-size: 1.35em; line-height: 1; transition: var(--transicao); }
.link-seta:hover::after { transform: translateX(4px); }
.secao--clara .link-seta { color: #1e3a8a; }
.btn--linha { border-color: #3e3f46; color: var(--branco); background: transparent; }
.btn--linha:hover { border-color: var(--acento); color: var(--acento); }
.secao--clara .btn--linha { border-color: #cbcdd8; color: var(--tinta); }
.secao--clara .btn--linha:hover { border-color: var(--marca); color: var(--marca); }
.btn--bloco { width: 100%; }
.btns { display: flex; flex-wrap: wrap; gap: .8rem; }

/* ---------- 6. Cabeçalho ------------------------------------- */
.topo {
  position: sticky; top: 0; z-index: 100;
  background: rgba(0,0,0,.86);
  backdrop-filter: saturate(140%) blur(12px);
  border-bottom: 1px solid var(--linha);
}
.topo__barra { display: flex; align-items: center; justify-content: space-between; gap: 1rem; min-height: 68px; }
.topo__logo img { width: 132px; }
.topo__nav { display: none; }
.topo__nav a {
  text-decoration: none; font-size: .93rem; font-weight: 500; color: var(--cinza-1);
  padding: .5rem 0; position: relative; transition: var(--transicao);
}
.topo__nav a:hover, .topo__nav a[aria-current="page"] { color: var(--branco); }
.topo__nav a[aria-current="page"]::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: -2px; height: 2px; background: var(--acento);
}
.topo__acoes { display: none; }
.topo__hamburguer {
  display: inline-flex; flex-direction: column; justify-content: center; gap: 5px;
  width: 48px; height: 48px; padding: 0 12px; background: none; border: 0; cursor: pointer;
}
.topo__hamburguer span { display: block; height: 2px; background: var(--branco); transition: var(--transicao); }
.topo__hamburguer[aria-expanded="true"] span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.topo__hamburguer[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.topo__hamburguer[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

.gaveta { display: none; border-top: 1px solid var(--linha); padding-block: 1rem 1.5rem; }
.gaveta.aberta { display: block; }
.gaveta a {
  display: block; text-decoration: none; color: var(--cinza-1);
  padding: .85rem .25rem; border-bottom: 1px solid var(--linha); font-weight: 500;
}
.gaveta a:last-of-type { border-bottom: 0; }
.gaveta .btn { margin-top: 1rem; }

/* Dentro da gaveta, o botão que abre o painel é mais um item da
   lista, e não um controle solto: mesma altura, mesma linha
   divisória e a largura toda, para o dedo acertar em qualquer
   ponto. A seta vai para a direita, que é onde se espera. */
.gaveta .mega__abre {
  width: 100%; justify-content: space-between;
  padding: .85rem .25rem; border-bottom: 1px solid var(--linha);
  font-weight: 500; text-align: left;
}

/* ---------- Menu que expande, Servicos e Segmentos -----------
   O Fabio pediu em 04/11/2026: o menu do topo abre a lista
   inteira, com foto, como o rodape ja mostra em texto.

   UM painel por grupo serve as duas larguras. No celular ele e
   tela cheia por cima da gaveta, no computador e uma faixa
   suspensa embaixo da barra. Trocar so o posicionamento evita
   carregar dois menus em 29 paginas.

   As fotos sao loading=lazy dentro de um bloco com hidden.
   Navegador nenhum baixa imagem de bloco escondido, entao o menu
   so custa byte depois que alguem abre. ------------------------ */
.topo { --topo-h: 68px; }

.mega__abre {
  background: none; border: 0; padding: 0; font: inherit; cursor: pointer;
  color: var(--cinza-1); display: inline-flex; align-items: center; gap: .4rem;
  transition: var(--transicao);
}
.mega__abre:hover,
.mega__abre[aria-expanded="true"],
.mega__abre--secao { color: var(--branco); }
.mega__seta {
  width: .42rem; height: .42rem; margin-top: -.22rem;
  border-right: 2px solid currentColor; border-bottom: 2px solid currentColor;
  transform: rotate(45deg); transition: var(--transicao);
}
.mega__abre[aria-expanded="true"] .mega__seta {
  transform: rotate(-135deg); margin-top: .16rem;
}

/* Celular: tela cheia por cima da gaveta. Resolve a posicao de uma
   vez, em vez de depender de onde o painel esta no documento. */
/* Altura escrita, e nao bottom: 0, de proposito. A barra tem
   backdrop-filter, e isso faz dela o bloco de referencia ate de
   filho com position: fixed. Com bottom: 0 o painel parava na
   altura da barra, nao na da janela. */
.mega__painel {
  position: fixed; top: var(--topo-h); left: 0; right: 0;
  height: calc(100dvh - var(--topo-h)); z-index: 90;
  background: var(--fundo); border-top: 1px solid var(--linha);
  overflow-y: auto; overscroll-behavior: contain;
  padding-block: 1.3rem 2.5rem;
}
.mega__grupo {
  font-size: .7rem; letter-spacing: .14em; text-transform: uppercase;
  color: var(--acento); margin-bottom: .9rem;
}
.mega__grade { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1rem; }
.mega__item { display: block; text-decoration: none; }
.mega__foto {
  display: block; aspect-ratio: 3 / 2; overflow: hidden;
  border-radius: 12px; background: var(--marca);
}
.mega__foto picture { display: block; height: 100%; }
.mega__foto img {
  display: block; width: 100%; height: 100%; object-fit: cover;
  transition: var(--transicao);
}
.mega__item:hover .mega__foto img { transform: scale(1.04); }
/* Servico sem foto no acervo. Marcador de pendencia, nao enfeite. */
.mega__foto--vazia {
  background: linear-gradient(140deg, var(--marca) 0%, #0b1130 100%);
}
.mega__nome {
  display: block; margin-top: .5rem; color: var(--branco);
  font-size: .9rem; line-height: 1.3;
}
.mega__item:hover .mega__nome { color: var(--acento); }
.mega__todos { display: inline-block; margin-top: 1.4rem; }

@media (min-width: 40em) {
  .mega__grade { grid-template-columns: repeat(3, 1fr); }
}

@media (min-width: 75em) {
  /* Faixa suspensa embaixo da barra. .topo e sticky, entao ele ja
     e o bloco de referencia: nao precisa de posicao fixa aqui. */
  .mega__painel {
    position: absolute; top: 100%; left: 0; right: 0;
    height: auto; max-height: min(74vh, 42rem);
    box-shadow: 0 26px 52px rgba(0,0,0,.5);
    padding-block: 1.6rem 2rem;
  }
  .mega__grade { grid-template-columns: repeat(5, 1fr); gap: 1.2rem; }
  .mega__nome { font-size: .86rem; }
}

/* Sem movimento para quem pediu menos movimento. */
@media (prefers-reduced-motion: reduce) {
  .mega__item:hover .mega__foto img { transform: none; }
}

/* O menu horizontal só aparece a partir de 1200 px.
   Com oito itens mais o logotipo e o botão de ação, abaixo disso
   os links começam a se espremer e a quebrar em duas linhas — o
   que fica pior do que o menu recolhido. Em tablet e notebook
   pequeno, a gaveta é a escolha certa. */
@media (min-width: 75em) {
  .topo__hamburguer, .gaveta { display: none !important; }
  .topo__nav { display: flex; gap: clamp(.75rem, 1.4vw, 1.35rem); align-items: center; }
  .topo__nav a { font-size: .88rem; white-space: nowrap; }
  .topo__acoes { display: flex; align-items: center; gap: .9rem; }
  .topo__acoes .btn { padding: .7rem 1.15rem; font-size: .88rem; min-height: 42px; }
}

/* ---------- 7. Herói ----------------------------------------- */
.heroi { position: relative; isolation: isolate; overflow: hidden; }
.heroi__fundo { position: absolute; inset: 0; z-index: -2; }
/* O <picture> entra como caixa no meio do caminho e, sendo inline por
   padrão, não herda a altura do pai. Sem isto a foto do herói encolhe
   para a altura natural dela e sobra preto embaixo. */
.heroi__fundo picture { display: block; width: 100%; height: 100%; }
.heroi__fundo img { width: 100%; height: 100%; object-fit: cover; }
/* Véu em gradiente, nunca retângulo chapado: retângulo deixa emenda
   visível na borda e denuncia o truque. */
.heroi::after {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(100deg, rgba(0,0,0,.96) 0%, rgba(0,0,0,.88) 38%,
                                      rgba(0,0,0,.55) 68%, rgba(0,0,0,.35) 100%);
}
.heroi__conteudo { padding-block: clamp(3.5rem, 9vw, 6.5rem); max-width: 44rem; }
.heroi p.chamada { font-size: clamp(1.02rem, .96rem + .4vw, 1.2rem); color: var(--marca-clara); max-width: 36rem; }
.heroi .btns { margin-top: 1.75rem; }
/* Altura mínima para o herói não colapsar em telas baixas e para a
   imagem de fundo ter área suficiente antes do recorte do object-fit. */
.heroi { min-height: clamp(24rem, 62vh, 34rem); display: flex; align-items: center; }

/* ---------- 8. Cartões --------------------------------------- */
/* Cartão com superfície em camada, não retângulo chapado.
   O gradiente quase imperceptível e a linha de topo mais clara
   imitam luz caindo de cima — é o truque que faz um cartão parecer
   um objeto, e não uma div. */
.cartao {
  background: linear-gradient(180deg, #141417 0%, #0e0e10 100%);
  border: 1px solid var(--linha);
  border-top-color: #313238;
  border-radius: var(--raio);
  padding: clamp(1.5rem, 3.2vw, 2.1rem);
  transition: var(--transicao);
}
.cartao:hover { border-color: #414249; transform: translateY(-3px); }

/* Variante editorial: sem preenchimento, só respiro e uma hairline.
   Usada quando a seção já tem muita superfície e encher de caixa
   escura transformaria a página em painel administrativo. */
.cartao--fino {
  background: none; border: 0; border-top: 1px solid var(--linha);
  border-radius: 0; padding: 1.6rem 0 0;
}
.cartao--fino:hover { transform: none; border-top-color: #414249; }
.cartao h3 { margin-bottom: .5rem; }
.cartao p { color: var(--cinza-1); font-size: .96rem; }
.cartao__num {
  font-family: var(--fonte-display); font-weight: 700; color: var(--acento);
  font-size: .85rem; letter-spacing: .1em; display: block; margin-bottom: .6rem;
}
.secao--clara .cartao { background: var(--claro-2); border-color: #e3e4ed; }
.secao--clara .cartao p { color: var(--tinta-2); }
.cartao--link { text-decoration: none; display: block; }
.cartao--link:hover h3 { color: var(--acento); }

/* Cartao de listagem com foto no topo. Pedido do Fabio em
   04/11/2026: cartao so com texto nao diz o que o servico e.

   O padding sai do cartao e vai para o texto, senao sobra uma
   moldura escura em volta da foto e o cartao vira banner. O
   overflow: hidden aqui nao esconde sintoma nenhum, ele recorta a
   foto no raio do cartao, que e para o que ele serve.

   aspect-ratio fixa a altura antes de a imagem chegar, entao a
   grade nao pula quando as fotos carregam. */
.cartao--capa { padding: 0; overflow: hidden; }
.cartao__capa { aspect-ratio: 3 / 2; background: var(--marca); }
.cartao__capa picture { display: block; height: 100%; }
.cartao__capa img {
  display: block; width: 100%; height: 100%; object-fit: cover;
}
.cartao__texto { padding: clamp(1.25rem, 2.6vw, 1.7rem); }

/* Servico que ainda nao tem foto: painel liso na cor da marca, em
   vez de buraco no meio da grade. Isto e marcador de pendencia, e
   sai no dia em que a foto chegar. */
.cartao__capa--vazia {
  background: linear-gradient(140deg, var(--marca) 0%, #0b1130 100%);
}
.secao--clara .cartao--capa { background: var(--claro-2); }

/* Vinheta: imagem em cima, legenda embaixo */
.vinheta img { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; border-radius: var(--raio); }
.vinheta h3 { font-size: 1.02rem; margin: .85rem 0 .3rem; color: var(--acento); }
.vinheta p { font-size: .88rem; color: var(--cinza-2); margin: 0; }

/* ---------- 9. Números em destaque --------------------------- */
.numero {
  font-family: var(--fonte-display); font-weight: 700; color: var(--acento);
  font-size: clamp(3rem, 2rem + 5vw, 6.5rem); line-height: .92; letter-spacing: -.04em;
}
.numero--peq { font-size: clamp(1.9rem, 1.4rem + 2vw, 2.9rem); }

/* ---------- 10. Faixa de chamada ----------------------------- */
.faixa { background: var(--marca); }
.faixa h2 { color: var(--branco); }
.faixa p { color: var(--marca-clara); }

/* ---------- 11. Formulário ----------------------------------- */
.campo { margin-bottom: 1.15rem; }
.campo label { display: block; font-size: .88rem; font-weight: 600; margin-bottom: .45rem; color: var(--cinza-1); }
.campo input, .campo select, .campo textarea {
  width: 100%; padding: .9rem 1.1rem; min-height: 50px;
  background: var(--grafite-2); border: 1px solid #313237; border-radius: 12px;
  color: var(--branco); font: inherit; transition: var(--transicao);
}
.campo textarea { min-height: 130px; resize: vertical; }
.campo input:focus, .campo select:focus, .campo textarea:focus { border-color: var(--acento); outline: none; }
.campo--erro input, .campo--erro select, .campo--erro textarea { border-color: #ff6b6b; }
.campo__erro { display: none; color: #ff9b9b; font-size: .84rem; margin-top: .35rem; }
.campo--erro .campo__erro { display: block; }
.form__nota { font-size: .84rem; color: var(--cinza-3); }
/* Armadilha anti-robô: humano não enxerga, robô preenche e é barrado. */
.mel { position: absolute; left: -5000px; width: 1px; height: 1px; overflow: hidden; }

/* ---------- 12. Perguntas frequentes ------------------------- */
.faq details { border-bottom: 1px solid var(--linha); padding: 1.15rem 0; }
.faq summary {
  cursor: pointer; font-weight: 600; font-size: 1.06rem; list-style: none;
  display: flex; justify-content: space-between; align-items: flex-start; gap: 1rem;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; color: var(--acento); font-size: 1.5rem; line-height: 1; flex: none; }
.faq details[open] summary::after { content: "\2212"; }
.faq details p { color: var(--cinza-1); margin-top: .85rem; }
.secao--clara .faq details { border-color: #e0e2eb; }
.secao--clara .faq summary::after { color: var(--marca); }
.secao--clara .faq details p { color: var(--tinta-2); }

/* ---------- 13. Rodapé --------------------------------------- */
/* A folga de baixo não é estética. O botão do WhatsApp é fixo no
   canto inferior direito, e a última linha do rodapé passava por
   baixo dele: quem rolava até o fim via o crédito de quem fez o
   site coberto pelo botão. A medida sai do próprio botão, 56px de
   altura mais o mesmo afastamento que ele guarda da borda, mais um
   respiro. Mexeu em .zap, confira aqui. */
.rodape {
  background: #060607; border-top: 1px solid var(--linha);
  padding-block: clamp(2.5rem, 6vw, 4rem)
                 calc(56px + clamp(1rem, 2.5vw, 1.75rem) + 1.25rem);
}
.rodape a { color: var(--cinza-1); text-decoration: none; }
.rodape a:hover { color: var(--acento); }
.rodape h4 { font-size: .78rem; letter-spacing: .16em; text-transform: uppercase; color: var(--cinza-3); margin-bottom: 1rem; }
.rodape li { margin-bottom: .55rem; font-size: .94rem; }
.rodape__base {
  margin-top: 2.5rem; padding-top: 1.5rem; border-top: 1px solid var(--linha);
  display: flex; flex-wrap: wrap; gap: .75rem 1.5rem; justify-content: space-between;
  font-size: .82rem; color: var(--cinza-3);
}
/* Política de privacidade e crédito de quem fez andam juntos, à
   direita. Soltos, com space-between, um deles iria parar no meio
   da linha, que é onde ninguém procura nenhum dos dois. */
.rodape__creditos {
  display: flex; flex-wrap: wrap; gap: .75rem 1.5rem;
}

/* ---------- 14. Trilha de navegação -------------------------- */
.trilha { font-size: .84rem; color: var(--cinza-3); padding-top: 1.35rem; }
.trilha a { color: var(--cinza-2); text-decoration: none; }
.trilha a:hover { color: var(--acento); }

/* ---------- 15. Utilitários ---------------------------------- */
.centro    { text-align: center; }
.medida    { max-width: 84ch; }
.medida--curta { max-width: 62ch; }
.apoio     { color: var(--cinza-1); }
.apoio-2   { color: var(--cinza-2); font-size: .94rem; }
.secao--clara .apoio { color: var(--tinta-2); }
.destaque  { color: var(--acento); }
.mt-1 { margin-top: .75rem; } .mt-2 { margin-top: 1.5rem; } .mt-3 { margin-top: 2.5rem; }
.oculto-visual {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* ---------- 16. Entrada ao rolar -----------------------------
   O bloco sobe e aparece quando entra na tela. É o detalhe que
   faz a página parecer construída, e não montada.

   Regra de ouro: o conteúdo começa VISÍVEL no CSS e só é escondido
   depois que o JavaScript confirma que vai animar. Se o script
   falhar ou o navegador for antigo, a página fica legível — em vez
   de ficar em branco, que é como quebram os sites que animam com
   opacity: 0 no estado inicial. */
.js-anima .revela { opacity: 0; transform: translateY(18px); }
.js-anima .revela.visivel {
  opacity: 1; transform: none;
  transition: opacity 620ms cubic-bezier(.2,.6,.3,1), transform 620ms cubic-bezier(.2,.6,.3,1);
}
@media (prefers-reduced-motion: reduce) {
  .js-anima .revela { opacity: 1; transform: none; }
}

/* Imagem de mídia com canto e leve profundidade */
.midia { border-radius: var(--raio); overflow: hidden; }
.midia img { width: 100%; display: block; }

/* ---------- 17. (vago) -------------------------------------
   Aqui ficava o lockup tipografico da marca do site de origem.
   Saiu inteiro. O lugar esta livre para o lockup da MS, se um
   dia a assinatura precisar ser remontada em texto. */

/* ---------- 18. Índice de seções (FAQ) -----------------------
   Numa página com 71 perguntas, o índice não é enfeite: é o que
   evita que o visitante role sem rumo e desista. Também dá ao
   Google âncoras nomeadas para os blocos temáticos. */
.indice { display: flex; flex-wrap: wrap; gap: .55rem; }
.indice a {
  display: inline-block; padding: .5rem 1rem; border-radius: 980px;
  border: 1px solid var(--linha); color: var(--cinza-1);
  text-decoration: none; font-size: .9rem; transition: var(--transicao);
}
.indice a:hover { border-color: var(--acento); color: var(--acento); }
.secao--clara .indice a { border-color: #dadce6; color: var(--tinta-2); }
.secao--clara .indice a:hover { border-color: var(--marca); color: var(--marca); }

/* Âncora não pode parar embaixo do cabeçalho fixo. */
[id] { scroll-margin-top: 90px; }

/* ---------- 19. Tabela comparativa ---------------------------
   No celular a tabela rola dentro da própria caixa, nunca empurra
   a página para o lado. Página que rola horizontal no celular é
   o defeito mais denunciado em auditoria de usabilidade. */
.tabela-rolagem { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.tabela {
  width: 100%; min-width: 640px; border-collapse: collapse;
  font-size: .94rem; text-align: left;
}
.tabela th, .tabela td {
  padding: .95rem 1rem; border-bottom: 1px solid var(--linha); vertical-align: top;
}
.tabela thead th {
  font-family: var(--fonte-display); font-weight: 600; color: var(--acento);
  font-size: .82rem; letter-spacing: .08em; text-transform: uppercase;
  border-bottom-color: #414249;
}
.tabela tbody th { font-weight: 600; color: var(--branco); white-space: nowrap; }
.tabela td { color: var(--cinza-1); }
.tabela tbody tr:hover td, .tabela tbody tr:hover th { background: #0f1012; }
.secao--clara .tabela thead th { color: var(--marca); border-bottom-color: #cbcdd8; }
.secao--clara .tabela th, .secao--clara .tabela td { border-bottom-color: #e3e4ed; }
.secao--clara .tabela tbody th { color: var(--tinta); }
.secao--clara .tabela td { color: var(--tinta-2); }
.secao--clara .tabela tbody tr:hover td, .secao--clara .tabela tbody tr:hover th { background: #ebecf4; }

/* Marca de melhor opção dentro da tabela */
.selo-ok  { color: var(--acento); font-weight: 600; }
.selo-nao { color: #8d8f9b; }
.secao--clara .selo-ok { color: #1e3a8a; }

/* ---------- 20. Artigo -------------------------------------
   Medida de leitura curta de propósito. Texto corrido em coluna
   larga cansa e faz abandonar no meio — o limite confortável
   fica entre 60 e 75 caracteres por linha. */
.artigo { max-width: 44rem; }
.artigo h2 { margin-top: 2.4em; font-size: clamp(1.5rem, 1.2rem + 1.2vw, 2rem); }
.artigo h3 { margin-top: 1.8em; }
.artigo p, .artigo li { font-size: 1.06rem; line-height: 1.72; color: var(--cinza-1); }
.artigo strong { color: var(--branco); }
.artigo > ul { margin-block: 1.2em; }
/* Escopado ao texto corrido de proposito. ".artigo a" sozinho tem
   especificidade maior que ".btn--principal" e pintava o botao de
   acento sobre acento, deixando-o sem texto visivel em todos os artigos. */
.artigo p a, .artigo li a, .artigo blockquote a, .artigo td a {
  color: var(--marca-clara); text-underline-offset: .18em;
}

/* Chamada dentro do texto: a frase que resume o argumento */
.artigo blockquote {
  margin: 2em 0; padding: 0 0 0 1.4rem; border-left: 3px solid var(--acento);
  font-family: var(--fonte-display); font-weight: 600; font-size: 1.22rem;
  line-height: 1.35; letter-spacing: -.02em; color: var(--branco);
}

/* Caixa de destaque para o resumo executivo do artigo */
.resumo {
  background: linear-gradient(180deg, #141417 0%, #0e0e10 100%);
  border: 1px solid var(--linha); border-top-color: #313238;
  border-radius: var(--raio); padding: 1.5rem 1.75rem; margin-block: 2rem;
}
.resumo h2 { margin: 0 0 .6rem; font-size: .8rem !important; letter-spacing: .14em;
             text-transform: uppercase; color: var(--acento); }
.resumo ul { margin: 0; }
.resumo li { font-size: .98rem; }

.artigo__meta { font-size: .88rem; color: var(--cinza-3); margin-bottom: 1.5rem; }
.artigo__meta span + span::before { content: " · "; }

/* Lista de artigos no índice do blog */
.post { border-top: 1px solid var(--linha); padding: 1.6rem 0; display: block; text-decoration: none; }
.post:first-of-type { border-top: 0; }
.post h3 { margin-bottom: .35rem; transition: var(--transicao); }
.post:hover h3 { color: var(--acento); }
.post p { color: var(--cinza-2); font-size: .96rem; margin: 0; }
.post__tag { font-size: .74rem; letter-spacing: .14em; text-transform: uppercase;
             color: var(--cinza-3); font-weight: 600; }

/* ============================================================
   21. HERÓI CINEMATOGRÁFICO E NAVEGAÇÃO FLUIDA
   ------------------------------------------------------------
   Estrutura tomada como referência dos sites de integradores
   grandes: herói ocupando quase toda a tela, cabeçalho flutuando
   transparente por cima dele, e um marcador lateral que mostra
   onde a pessoa está na página. É o que dá a sensação de peso
   antes de qualquer texto ser lido.
   ============================================================ */

/* Rolagem contínua entre âncoras. O scroll-padding existe porque
   o cabeçalho é fixo: sem ele, a âncora para debaixo da barra. */
html { scroll-behavior: smooth; scroll-padding-top: 84px; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

/* ---------- Herói ---------------------------------------- */
/* svh em vez de vh: no celular, vh muda quando a barra de
   endereço do navegador some, e o herói "pula" no meio da
   rolagem. svh é a altura estável. */
.heroi { min-height: clamp(30rem, 88vh, 54rem); }
@supports (height: 100svh) { .heroi { min-height: clamp(30rem, 92svh, 54rem); } }

.heroi__fundo video { width: 100%; height: 100%; object-fit: cover; display: block; }

/* Camada de movimento: fica ACIMA do véu e ABAIXO do texto. */
.heroi__cena { position: absolute; inset: 0; z-index: 0; pointer-events: none; }
.heroi__malha {
  position: absolute; inset: 0; width: 100%; height: 100%; display: block;
  opacity: 0; transition: opacity 1400ms ease;
}
.heroi__malha.ativa { opacity: 1; }
.heroi__conteudo { position: relative; z-index: 1; }

/* ---------- Cabeçalho flutuante sobre o herói ------------- */
/* Só na home. Nas outras páginas a barra continua sólida desde
   o primeiro pixel, porque não há herói para transparecer. */
.tem-heroi .topo {
  position: fixed; left: 0; right: 0; top: 0;
  background: transparent;
  backdrop-filter: none;
  border-bottom-color: transparent;
  transition: background 280ms ease, border-color 280ms ease, backdrop-filter 280ms ease;
}
.tem-heroi .heroi { padding-top: 68px; }
.tem-heroi .topo.solido {
  background: rgba(0,0,0,.86);
  backdrop-filter: saturate(140%) blur(12px);
  border-bottom-color: var(--linha);
}
/* Menu aberto torna a barra solida na hora, mesmo sem rolagem.
   Sem isto, abrir a gaveta no topo da home deixa o heroi
   aparecendo por tras do texto do menu, e os dois se misturam.
   A classe entra pelo script, que olha a gaveta e os paineis. */
.tem-heroi .topo.menu-aberto {
  background: rgba(0,0,0,.94);
  backdrop-filter: saturate(140%) blur(12px);
  border-bottom-color: var(--linha);
}

/* Gaveta dentro de barra fixa precisa de limite: em tela baixa,
   nove itens passariam do rodapé da janela sem chance de rolar. */
.gaveta { max-height: calc(100dvh - 80px); overflow-y: auto; }

/* ---------- Navegação lateral por seção ------------------- */
/* Marcadores quadrados, não redondos: o quadrado é o átomo do
   logotipo. Aparecem só a partir de 1200px, onde há margem
   lateral sobrando para eles não encostarem no texto. */
.pontos {
  position: fixed; right: clamp(.9rem, 1.8vw, 1.7rem); top: 50%;
  transform: translateY(-50%); z-index: 40;
  display: none; flex-direction: column; gap: .85rem;
}
@media (min-width: 75em) { .pontos { display: flex; } }
.pontos a {
  width: 10px; height: 10px; border-radius: var(--raio-p);
  border: 1px solid var(--cinza-3); background: transparent;
  position: relative; transition: var(--transicao);
}
.pontos a:hover { border-color: var(--marca-clara); }
.pontos a.ativo { background: var(--acento); border-color: var(--acento); }
.pontos a::after {
  content: attr(data-rot);
  position: absolute; right: 20px; top: 50%; transform: translateY(-50%);
  white-space: nowrap; font-size: .72rem; letter-spacing: .09em;
  text-transform: uppercase; font-weight: 600; color: var(--cinza-1);
  background: rgba(0,0,0,.82); border: 1px solid var(--linha);
  border-radius: 6px; padding: .32rem .6rem;
  opacity: 0; pointer-events: none; transition: var(--transicao);
}
.pontos a:hover::after, .pontos a:focus-visible::after { opacity: 1; }

/* ---------- Faixa de números ------------------------------ */
/* tabular-nums trava a largura do dígito: sem isso o número
   treme durante a contagem, e tremer denuncia o truque. */
.metricas {
  display: grid; gap: clamp(1.5rem, 3vw, 2.5rem);
  grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr));
}
.metrica { border-top: 1px solid var(--linha); padding-top: 1.15rem; }
.metrica__valor {
  display: block; font-family: var(--fonte-display); font-weight: 700;
  font-size: clamp(2.5rem, 1.9rem + 2.4vw, 3.9rem);
  line-height: 1; letter-spacing: -.04em; color: var(--acento);
  font-variant-numeric: tabular-nums;
}
.metrica__rot { display: block; margin-top: .65rem; font-weight: 600; color: var(--branco); font-size: .98rem; }
.metrica__nota { display: block; margin-top: .45rem; color: var(--cinza-2); font-size: .87rem; line-height: 1.5; }

/* ---------- Chamada de leitura na home -------------------- */
.titulo-linha { display: flex; align-items: baseline; justify-content: space-between; gap: 1.5rem; flex-wrap: wrap; }
.grade-leitura { display: grid; gap: clamp(1.75rem, 3.5vw, 3rem); grid-template-columns: 1fr; }
@media (min-width: 62em) { .grade-leitura { grid-template-columns: 1.12fr 1fr; align-items: start; } }

.post-capa {
  display: block; text-decoration: none; overflow: hidden;
  border: 1px solid var(--linha); border-radius: var(--raio);
  background: linear-gradient(180deg, #141417 0%, #0e0e10 100%);
  transition: var(--transicao);
}
.post-capa:hover { border-color: #414249; transform: translateY(-3px); }
.post-capa__midia { aspect-ratio: 16 / 10; overflow: hidden; }
.post-capa__midia img {
  width: 100%; height: 100%; object-fit: cover; display: block;
  transition: transform 620ms cubic-bezier(.2,.6,.3,1);
}
.post-capa:hover .post-capa__midia img { transform: scale(1.045); }
.post-capa__texto { padding: clamp(1.25rem, 2.6vw, 1.85rem); }
.post-capa__texto h3 { margin: .5rem 0; transition: var(--transicao); }
.post-capa:hover .post-capa__texto h3 { color: var(--acento); }
.post-capa__texto p { color: var(--cinza-2); font-size: .96rem; margin: 0; }
.post-capa__meta {
  display: block; margin-top: .95rem; font-size: .74rem;
  letter-spacing: .12em; text-transform: uppercase; color: var(--cinza-3);
}
.lista-leitura .post:first-of-type { border-top: 0; padding-top: 0; }

/* ---------- 22. Controles do programa de parceiros ----------
   A calculadora precisa de dois controles deslizantes e de uma
   linha de consentimento. Ambos herdam o resto do formulario. */
.controle {
  -webkit-appearance: none; appearance: none;
  width: 100%; height: 4px; margin: .35rem 0 .25rem;
  background: var(--linha); border-radius: 999px; cursor: pointer;
}
.controle::-webkit-slider-thumb {
  -webkit-appearance: none; appearance: none;
  width: 22px; height: 22px; border-radius: 50%;
  background: var(--acento); border: 0; cursor: pointer;
}
.controle::-moz-range-thumb {
  width: 22px; height: 22px; border-radius: 50%;
  background: var(--acento); border: 0; cursor: pointer;
}
.controle:focus-visible { outline: 2px solid var(--acento); outline-offset: 6px; }

/* Consentimento: caixa e texto lado a lado, com o texto alinhado
   pelo topo. Sem isso a caixa centraliza no meio do paragrafo. */
.consenti { display: flex; gap: .7rem; align-items: flex-start; font-size: .9rem;
            color: var(--cinza-1); font-weight: 400; line-height: 1.55; }
.consenti input { width: 18px; height: 18px; margin-top: .18rem; flex: 0 0 auto; accent-color: var(--acento); }

/* Escolha entre os dois modelos de comissão. Duas opções lado a
   lado no desktop, empilhadas no celular. */
.rotulo-grupo { display: block; font-size: .88rem; font-weight: 600;
                margin-bottom: .6rem; color: var(--cinza-1); }
.escolha { display: grid; gap: .75rem; grid-template-columns: 1fr; }
@media (min-width: 48em) { .escolha { grid-template-columns: 1fr 1fr; } }
.escolha .consenti {
  border: 1px solid var(--linha); border-radius: 12px;
  padding: .9rem 1rem; cursor: pointer; transition: var(--transicao);
}
.escolha .consenti:hover { border-color: #414249; }
.escolha .consenti:has(input:checked) { border-color: var(--acento); background: rgba(204,255,0,.04); }

/* ---------- 23. Frases de impacto ---------------------------
   Tipo grande, linha curta e uma palavra em acento. A cor entra
   em UMA palavra por frase, nunca em duas: com duas, nenhuma
   das duas é o destaque. */
.faixa-impacto {
  padding-block: clamp(3rem, 7vw, 5.5rem);
  border-block: 1px solid var(--linha);
  background: linear-gradient(180deg, #09090a 0%, #000 100%);
}
.impacto {
  font-family: var(--fonte-display); font-weight: 700;
  font-size: clamp(1.85rem, 1.15rem + 3.4vw, 3.5rem);
  line-height: 1.08; letter-spacing: -.035em;
  text-wrap: balance; margin: 0; color: var(--branco);
}
.impacto em { font-style: normal; color: var(--acento); }
.impacto--menor { font-size: clamp(1.45rem, 1.05rem + 2vw, 2.35rem); }

/* ---------- 24. Calculadora do parceiro ---------------------
   Discreta de proposito. O numero aqui nao e manchete: e uma
   conta que a pessoa confere. Numero gigante em pagina de
   comissao parece promessa, e promessa e o que a gente evita. */
.calc { border: 1px solid var(--linha); border-radius: var(--raio);
        background: linear-gradient(180deg, #141417 0%, #0e0e10 100%);
        padding: clamp(1.35rem, 3vw, 2rem); max-width: 42rem; }
.calc__tipo { display: grid; gap: .6rem; grid-template-columns: 1fr; margin-bottom: 1.4rem; }
@media (min-width: 40em) { .calc__tipo { grid-template-columns: 1fr 1fr; } }

/* Pilula: caixa de seleção discreta, sem parecer botão de compra. */
.pilula { display: flex; align-items: flex-start; gap: .6rem; cursor: pointer;
          border: 1px solid var(--linha); border-radius: 10px; padding: .7rem .85rem;
          font-size: .88rem; color: var(--cinza-1); line-height: 1.4;
          transition: var(--transicao); }
.pilula:hover { border-color: #414249; }
.pilula input { width: 16px; height: 16px; margin-top: .15rem; flex: 0 0 auto; accent-color: var(--acento); }
.pilula b { display: block; color: var(--branco); font-weight: 600; margin-top: .15rem; }
.pilula:has(input:checked) { border-color: var(--acento); background: rgba(204,255,0,.05); }
.pilula:has(input:checked) b { color: var(--acento); }

.calc__campo { margin-bottom: 1.4rem; }
.calc__campo input { font-size: 1.15rem; font-weight: 600; }

.calc__saida { border-top: 1px solid var(--linha); padding-top: 1.1rem; }
.calc__linha { margin: 0; font-size: 1rem; color: var(--cinza-1); }
.calc__linha strong { font-family: var(--fonte-display); font-size: 1.9rem;
                      color: var(--acento); font-weight: 700; letter-spacing: -.02em;
                      margin: 0 .35rem; vertical-align: -.08em; }
.calc__sec { margin: .5rem 0 0; font-size: .9rem; color: var(--cinza-2); }
.calc__nota { margin-top: 1.1rem; }

/* Botao blindado contra regra de container.
   Duas classes no seletor (0,2,0) vencem qualquer ".container a"
   (0,1,1) que venha a existir. Foi assim que ".artigo a" apagou o
   texto do botao principal em nove artigos sem ninguem notar. */
.btn.btn--principal { color: #000; }
.btn.btn--linha     { color: var(--acento); }

/* ============================================================
   25. CONFORTO DE LEITURA
   ------------------------------------------------------------
   O acento é uma cor de altíssima luminância e saturação máxima.
   Como acento, ele é a marca. Como cor de texto em parágrafo,
   ele vibra sobre o escuro e cansa em minutos, que é o tempo
   que o visitante leva para desistir e fechar a aba.

   Regra adotada: o acento aparece em NO MÁXIMO um elemento por
   dobra de tela, e só nos pontos que decidem alguma coisa,
   botão principal, número grande, marcador de seção e a palavra
   destacada da frase de impacto. Em texto corrido ele não entra.
   ============================================================ */

/* Ênfase dentro de parágrafo: marca clara, não acento. Mesma família,
   metade da agressão. */
.destaque { color: var(--marca-clara); }
.artigo strong { color: var(--branco); }

/* ------------------------------------------------------------
   Superfície clara para leitura longa
   ------------------------------------------------------------
   Artigo, FAQ e páginas legais passam a fundo claro. É onde o
   visitante fica dez minutos lendo, e é onde o escuro cobra o
   preço. O escuro continua mandando no herói, nas faixas de
   impacto, nos números e no rodapé, que é onde ele impressiona
   e onde ninguém fica parado lendo.
   ------------------------------------------------------------ */
.secao--clara .artigo p,
.secao--clara .artigo li      { color: var(--tinta-2); }
.secao--clara .artigo strong  { color: var(--tinta); }
.secao--clara .artigo em      { color: var(--tinta); }
.secao--clara .apoio-2        { color: var(--tinta-2); }
.secao--clara .chamada        { color: var(--tinta-2); }
.secao--clara .artigo__meta   { color: #6e707b; }

.secao--clara .artigo p a,
.secao--clara .artigo li a,
.secao--clara .artigo blockquote a,
.secao--clara .artigo td a    { color: #1e3a8a; }

.secao--clara .artigo blockquote {
  border-left-color: var(--marca);
  color: var(--tinta);
}
.secao--clara .resumo {
  background: var(--claro-2);
  border-color: #e0e2eb;
}
.secao--clara .resumo h2 { color: var(--marca); }
.secao--clara .resumo li { color: var(--tinta-2); }

.secao--clara .post          { border-top-color: #e0e2eb; }
.secao--clara .post h3       { color: var(--tinta); }
.secao--clara .post p        { color: var(--tinta-2); }
.secao--clara .post:hover h3 { color: var(--marca); }
.secao--clara .post__tag     { color: #6e707b; }

.secao--clara .trilha a      { color: var(--tinta-2); }
/* O --cinza-3 clareou para passar no contraste do fundo escuro. Sobre
   superfície clara, clarear é o contrário do que ajuda: aqui o mesmo
   papel é do --tinta-2, que dá 6,16 de contraste. */
.secao--clara figcaption,
.secao--branca figcaption { color: var(--tinta-2); }
.secao--clara .metrica       { border-top-color: #e0e2eb; }
.secao--clara .metrica__valor{ color: var(--marca); }
.secao--clara .metrica__rot  { color: var(--tinta); }
.secao--clara .metrica__nota { color: var(--tinta-2); }

/* Faixa de impacto permanece preta de propósito: é a pausa
   escura no meio da leitura clara, e é ela que dá o contraste
   de ritmo que o site inteiro escuro não conseguia ter. */
.faixa-impacto { background: linear-gradient(180deg, #09090a 0%, #000 100%); }

/* ============================================================
   26. SUPERFÍCIE CLARA DE ALTO PADRÃO
   ------------------------------------------------------------
   Referência: apple.com. O que faz aquelas telas parecerem caras
   não é cor nenhuma, é o que NÃO tem: não tem borda, não tem
   linha divisória, não tem sombra dura, não tem mais de um
   acento. A separação entre blocos vem do espaço vazio.

   Três regras que sustentam o resultado:
   1. Cartão sem borda. Só um cinza um passo diferente do fundo.
   2. Canto generoso e MUITO ar interno, bem mais do que parece
      necessário. É o ar que comunica preço.
   3. Um acento só, e só em link e botão. Título é tinta, nunca
      cor de marca.

   O acento não pode ser texto sobre claro, o contraste reprova.
   Sobre claro ele vira PREENCHIMENTO de botão, com tinta preta
   por cima, e o azul fechado da marca assume os links. É a mesma
   lógica do logotipo: o azul é o quadrado, não a letra.
   ============================================================ */
:root {
  --claro:      #ffffff;   /* superfície principal clara */
  --claro-2:    #f5f5f7;   /* cartão sobre a superfície clara */
  --tinta:      #1a1b1e;   /* título e texto forte */
  --tinta-2:    #5b5d66;   /* texto de apoio */
}

/* Cartão claro: sem borda, sem sombra, só fundo e ar. */
.secao--clara .cartao {
  background: var(--claro-2);
  border: 0;
  border-radius: 20px;
  padding: clamp(1.6rem, 3.4vw, 2.4rem);
}
.secao--clara .cartao:hover {
  background: #eeeef1;
  border: 0;
  transform: none;   /* objeto caro não pula quando o mouse passa */
}
.secao--clara .cartao h3 { color: var(--tinta); }
.secao--clara .cartao__num { color: var(--marca); }

/* Sem régua divisória: no claro, a linha suja. O espaço separa. */
.secao--clara .cartao--fino { border-top: 0; }
.secao--clara .metrica { border-top-color: #e6e6ea; }
.secao--clara .post { border-top-color: #e6e6ea; }

/* Botão em pílula, como manda a referência. */
.btn { border-radius: 980px; }
.secao--clara .btn--principal { background: var(--acento); color: #000; }
.secao--clara .btn--linha { border-color: #d2d2d7; color: var(--tinta); }
.secao--clara .btn--linha:hover { border-color: var(--marca); color: var(--marca); }

/* Mais ar entre as seções claras: é onde o luxo aparece. */
.secao--clara { padding-block: clamp(4.5rem, 9.5vw, 8.5rem); }

/* Resumo do artigo: cartão claro, mesma regra, sem borda. */
.secao--clara .resumo { background: var(--claro-2); border: 0; border-radius: 20px; }

/* ---------- 27. Enfase dentro do nome da marca ---------------
   Quando o nome da empresa aparece com uma parte destacada no
   menu, na gaveta e no rodape, o destaque e sempre o mesmo em
   todos os tres lugares. O erro que isso evita e classico: o
   mesmo nome escrito de dois jeitos dentro do mesmo site. */
.topo__nav a strong,
.gaveta a strong,
.rodape a strong { color: var(--realce); font-weight: 700; }

/* Na seção clara o realce puro sobre branco não se lê. Ali o
   "SEGURO" fica no azul da marca, que é a mesma leitura de
   destaque com contraste que passa. */
.secao--clara .rodape a strong { color: var(--marca); }

/* ============================================================
   28. COMPOSIÇÃO DO TEXTO
   ------------------------------------------------------------
   Três correções de diagramação, na ordem do que mais pesa:

   1. HIFENIZAÇÃO. O português tem palavras longas, e sem hífen
      cada uma que não cabe é empurrada inteira para a linha
      seguinte. É isso que produz a borda direita serrilhada e o
      buraco branco no meio do parágrafo. Com hífen, a linha
      preenche.
   2. text-wrap: pretty. Impede a última linha do parágrafo de
      terminar com uma palavra sozinha (viúva), que é o defeito
      que mais denuncia texto não diagramado.
   3. Alinhamento pelo topo no par texto-imagem. Centralizar
      verticalmente faz o texto flutuar quando os dois lados têm
      alturas diferentes, e é o que dava a impressão de coisa
      solta no meio da seção.
   ============================================================ */

p, li, dd, figcaption {
  hyphens: auto;
  -webkit-hyphens: auto;
  /* Sem limite, o navegador quebra "a-cesso" e "e-letrônica". A regra
     tipográfica é não hifenizar palavra curta e nunca deixar menos de
     três letras de um dos lados do hífen. */
  hyphenate-limit-chars: 6 3 3;
  text-wrap: pretty;
}

/* Título nunca hifeniza: quebrar palavra em manchete é feio e
   some com a leitura rápida. Ele equilibra as linhas, só. */
h1, h2, h3, h4, .impacto { hyphens: manual; -webkit-hyphens: manual; }
h3, h4 { text-wrap: balance; }

/* Texto corrido do artigo justificado. Com hifenização ativa e
   medida de 44rem, justificar fecha as duas margens sem abrir
   rios de espaço. É o acabamento de publicação, e é onde o
   visitante passa mais tempo. */
.artigo p { text-align: justify; text-align-last: left; }

/* O cartão era exceção até 12/10/2026, por medo do vão entre
   palavras em coluna estreita. Com hyphenate-limit-chars no lugar, o
   hífen fecha a linha antes de o vão abrir, e o cartão entra na
   justificação como o resto. */

/* Par texto-imagem alinhado pelo topo. */
.duo { align-items: start; }

/* Cartão como coluna: o conteúdo distribui e a altura fica igual
   na linha inteira, em vez de cada cartão terminar num ponto. */
.grade > .cartao { display: flex; flex-direction: column; }
.grade > .cartao > :last-child { margin-top: auto; }

/* A abertura de seção estava presa a 46rem num container de
   1180px, ocupando só a esquerda e deixando um vazio à direita.
   Um pouco mais larga fecha a composição sem passar do limite de
   leitura confortável.

   A medida agora é em ch e não em rem. Em rem, o limite era o
   mesmo para qualquer corpo de texto, então o .apoio-2, que usa
   fonte menor, encaixava 111 caracteres por linha onde o .apoio
   encaixava 98. Em ch o limite acompanha a fonte, e os dois
   param no mesmo ponto de leitura. */
.medida { max-width: 84ch; }

/* ============================================================
   29. SEGURANÇA 360º, O CARRO-CHEFE
   ------------------------------------------------------------
   Esta seção não é uma seção comum: é a oferta principal, e vem
   logo depois do herói. Por isso ela tem tratamento próprio,
   mais escuro que o resto e com o nome em tamanho de manchete.

   O "360º" sai em acento e o resto em branco. Um acento só, na
   parte do nome que carrega a promessa. Pintar a frase inteira
   de acento faria o olho não saber onde pousar.
   ============================================================ */
.secao--360 {
  background:
    radial-gradient(90% 120% at 15% 0%, #1c1c20 0%, transparent 60%),
    linear-gradient(180deg, #09090a 0%, #000 100%);
  border-block: 1px solid var(--linha);
}
.secao--360 .chapeu { color: var(--acento); }

.titulo-360 {
  font-family: var(--fonte-display); font-weight: 700;
  font-size: clamp(2.6rem, 1.5rem + 5vw, 5rem);
  line-height: .98; letter-spacing: -.045em;
  margin: .35rem 0 0; color: var(--branco);
}
/* O "360º" é <span> no HTML, não conteúdo gerado por CSS. O
   Google indexa o DOM: com ::after o h2 do carro-chefe valeria
   apenas "Segurança", e leitor de tela trata conteúdo gerado de
   forma inconsistente. */
.titulo-360 span { color: var(--acento); }

.reforco-360 {
  font-family: var(--fonte-display); font-weight: 600;
  font-size: clamp(1.15rem, .95rem + .9vw, 1.6rem);
  color: var(--marca-clara); margin: .9rem 0 0; letter-spacing: -.015em;
}

/* Os quatro cartões da 360 com mais presença que o cartão comum. */
.secao--360 .cartao {
  background: linear-gradient(180deg, #17181b 0%, #0d0e0f 100%);
  border-color: #36373d;
}
.secao--360 .cartao:hover { border-color: var(--acento); }
.secao--360 .cartao__num { color: var(--acento); }

/* ============================================================
   30. JUSTIFICAÇÃO NO SITE INTEIRO
   ------------------------------------------------------------
   Todo texto corrido fecha as duas margens, no computador E no
   celular. Ordem do cliente em 12/10/2026, e ela só se sustenta
   porque a hifenização está ligada com limite (bloco acima):
   justificar sem hífen é o que abre rio de espaço no meio do
   parágrafo.

   text-align-last: left impede a ÚLTIMA linha de ser esticada.
   Sem isso, parágrafo que termina com duas palavras produz
   aquele efeito de palavras espalhadas de ponta a ponta, que é
   o defeito mais feio da justificação.

   O que NÃO se justifica, e não é esquecimento:
     . TÍTULO. Manchete justificada estica a primeira linha e
       mata a leitura de um golpe, que é a função dela.
     . ETIQUETA, RÓTULO, NÚMERO, BOTÃO. Texto de uma linha não
       tem o que justificar.
     . CÉLULA DE TABELA e item de navegação, pelo mesmo motivo.
   ============================================================ */
p, li, dd, figcaption, blockquote,
.chamada, .apoio, .apoio-2, .camada__p, .central,
.metrica__nota, .artigo__meta, .form__nota, .campo__ajuda,
.pic-saida__sub, .camadas__pe {
  text-align: justify;
  text-align-last: left;
}

/* Rótulo de uma linha: justificar não faz nada, ou estica. */
.chapeu, .cartao__num, .rotulo-grupo, .metrica__rot, .metrica__valor,
.ladrilho__t, .ladrilho__s, .post__tag, .mosaico__tag, .trilha,
.camada__t, .camada__n, .cam__n, .pic-regua__rot, .pic-saida__rot,
.registro__t, .registro__d, .registro__e, .registro__nome,
.registro__tag, .pic-slider__lim, .estrelas__rot, .indicacao-selo,
.topo__nav a, .gaveta a, .painel__extra a, .rodape__base,
.btn, .link-seta, .abre-menu, .pilula,
.tabela th, .tabela td { text-align: left; text-align-last: auto; }

/* Tipo de display nunca se justifica. */
.impacto, .reforco-360, .titulo-360, .titulo-cartao { text-align: left; }

/* Texto centralizado continua centralizado. */
.centro p, .faixa p, .centro .apoio, .faixa .apoio { text-align: center; }

/* ============================================================
   31. ATALHO DE WHATSAPP
   ------------------------------------------------------------
   No Brasil o WhatsApp não é um canal alternativo: para boa
   parte do público é O canal. O botão fica fixo, visível em
   qualquer ponto da rolagem, e leva com a mensagem já escrita.

   A mensagem pré-preenchida muda por página. Serve a duas
   coisas: tira do visitante o trabalho de começar a conversa,
   que é onde muita gente desiste, e diz de qual página o lead
   veio sem depender de rastreador nenhum.

   Posição: canto inferior direito. Não conflita com os
   marcadores laterais de seção, que ficam no meio da altura.
   ============================================================ */
.zap {
  position: fixed; z-index: 60;
  right: clamp(1rem, 2.5vw, 1.75rem);
  bottom: clamp(1rem, 2.5vw, 1.75rem);
  display: inline-flex; align-items: center; gap: .6rem;
  height: 56px; padding: 0 1.15rem 0 1rem;
  border-radius: 980px;
  background: #25d366; color: #06251a;
  text-decoration: none; font-weight: 600; font-size: .95rem;
  box-shadow: 0 6px 24px rgba(0,0,0,.35);
  transition: transform 200ms cubic-bezier(.2,.6,.3,1), box-shadow 200ms;
}
.zap:hover, .zap:focus-visible {
  transform: translateY(-2px);
  box-shadow: 0 10px 30px rgba(0,0,0,.45);
}
.zap svg { flex: 0 0 auto; }

/* No celular só o ícone: o rótulo cobriria conteúdo, e o ícone
   do WhatsApp é reconhecido sem legenda. O texto continua no
   HTML para quem usa leitor de tela. */
@media (max-width: 47.99em) {
  .zap { width: 56px; padding: 0; justify-content: center; }
  .zap__rot { position: absolute; width: 1px; height: 1px;
              overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
}

/* ============================================================
   32. MANCHETE DO HERÓI
   ------------------------------------------------------------
   "Segurança & Facilities" é a composição do Fábio, e ela está
   certa: as duas disciplinas nomeadas, unidas por um símbolo.

   O "&" ganha o acento sozinho. Não é enfeite: o argumento inteiro
   da MS está nele. As duas palavras não são a novidade, cada
   concorrente tem uma delas. A novidade é a conjunção. Colorir
   as duas palavras, como no rascunho, dividiria o olho em dois
   e diria justamente o contrário do que a frase promete.

   "com gestão 360º" fica DENTRO do h1, em corpo menor. Assim a
   manchete continua sendo uma frase completa para o Google, com
   os termos que interessam, e mantém o desenho de duas linhas.
   ============================================================ */
.heroi__titulo {
  font-size: clamp(2.5rem, 1.4rem + 5.2vw, 5.2rem);
  line-height: .96;
  letter-spacing: -.045em;
  text-wrap: balance;
  margin-bottom: .1em;
}
.heroi__titulo .amp {
  color: var(--acento);
  font-weight: 400;          /* leve, para não competir com as palavras */
  font-style: italic;        /* o & itálico é a forma clássica do glifo */
  padding-inline: .06em;
}
.heroi__titulo .heroi__sub {
  display: block;
  margin-top: .22em;
  font-size: .34em;
  font-weight: 500;
  letter-spacing: -.02em;
  color: var(--cinza-1);
}
.heroi__titulo .heroi__sub b { color: var(--acento); font-weight: 700; }

/* A chamada do herói ganha corpo: ela carrega o argumento agora,
   não é mais legenda. */
.heroi p.chamada {
  font-size: clamp(1.05rem, .98rem + .5vw, 1.3rem);
  /* 46rem, e nao 40: justificado numa medida curta abre rio de espaco
     entre as palavras, e o portugues tem palavra longa demais para isso.
     Com a linha mais larga cabem mais palavras e o vao fecha. */
  max-width: 46rem;
  color: var(--cinza-1);
  /* A hifenizacao global serve ao texto de artigo, onde fechar a linha
     vale mais que a palavra inteira. Aqui ela partia "pre-estabe-lecido"
     no meio, bem no argumento central da home. No heroi a palavra manda.
     balance distribui as quatro linhas em vez de deixar a ultima curta. */
  /* Justificado, para fechar as duas margens. So que justificar sem hifen,
     em portugues, abre rio de espaco: a linha com poucas palavras longas
     estica para preencher. Entao a hifenizacao volta AQUI, nas palavras
     comuns, e fica desligada nos termos em destaque logo abaixo, que sao
     justamente os que nao podem partir: a marca e o nome do SLA. */
  hyphens: auto;
  -webkit-hyphens: auto;
  text-align: justify;
  text-align-last: left;
}
/* Destaque do heroi em realce, nao em marca clara: pedido do Fabio em 10/10/2026.
   O realce e a cor da marca a marca de origem, entao o mesmo tom costura
   o nome do escopo e os termos que ele quer que saltem na primeira tela. */
.heroi p.chamada strong,
.heroi .heroi__conteudo p.apoio strong {
  color: var(--realce); font-weight: 700;
}

/* Os termos em destaque ficavam com hyphens:manual para nao partir
   "pre-estabe-lecido". So que sao quatro blocos longos dentro de um
   paragrafo justificado de 335 px no celular: travar a quebra neles e o
   que produzia o rio de espaco entre as palavras, porque a linha so
   podia esticar. Com o hyphenate-limit-chars de 6/3/3 no lugar, a quebra
   feia nao volta e a linha fecha sozinha.
   A marca continua inteira por outro caminho, o <wbr> no HTML, que
   permite a quebra apenas entre "meucondominio" e "SEGURO". */
.heroi p.chamada strong {
  hyphens: auto; -webkit-hyphens: auto;
}

/* Acesso à área do cliente fica junto do CTA, que é onde login
   mora em qualquer site. Não disputa espaço com a navegação. */
.topo__login {
  display: none; text-decoration: none; font-size: .88rem;
  font-weight: 500; color: var(--cinza-1); white-space: nowrap;
  padding: .5rem .2rem; transition: var(--transicao);
}
.topo__login:hover { color: var(--branco); }
@media (min-width: 62em) { .topo__login { display: inline-block; } }

.campo__ajuda { display: block; font-size: .84rem; color: var(--cinza-3); margin-top: .35rem; }
.secao--clara .campo__ajuda { color: var(--tinta-2); }
.resp { border-top: 1px solid var(--linha); padding-top: 1.2rem; }
.secao--clara .resp { border-top-color: #e6e6ea; }

/* ============================================================
   33. AVALIAÇÃO POR ESTRELAS
   ------------------------------------------------------------
   O preenchimento da esquerda para a direita sai de CSS puro,
   sem uma linha de JavaScript. O truque: as estrelas ficam em
   ordem INVERSA no HTML (5 a 1) e a direção do flex as devolve
   à ordem visual. Assim ~ alcança as irmãs seguintes, que na
   tela são as anteriores, e o hover acende a fileira toda.
   ============================================================ */
.estrelas-caixa { border: 0; padding: 0; margin: 0; }
.estrelas { display: inline-flex; flex-direction: row-reverse; gap: .25rem; }
.estrelas input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.estrelas label {
  cursor: pointer; font-size: 2.6rem; line-height: 1;
  color: #d2d2d7; transition: color 140ms, transform 140ms;
}
.estrelas label::before { content: "★"; }
.estrelas label:hover,
.estrelas label:hover ~ label,
.estrelas input:checked ~ label { color: #f5a524; }
.estrelas label:hover { transform: scale(1.12); }
.estrelas input:focus-visible + label { outline: 2px solid var(--marca); outline-offset: 3px; }
.estrelas__rot { margin: .6rem 0 0; font-size: .95rem; color: var(--tinta-2); min-height: 1.5em; }

/* ---------- 34. Bloco de divulgação e selo de indicação ------ */
.divulgar { display: grid; gap: clamp(1.25rem, 3vw, 2rem); grid-template-columns: 1fr; align-items: start; }
@media (min-width: 40em) { .divulgar { grid-template-columns: auto 1fr; } }
.divulgar__qr {
  width: clamp(140px, 30vw, 190px); aspect-ratio: 1;
  background: #fff; border-radius: 12px; padding: 10px;
  display: flex; align-items: center; justify-content: center;
}
.divulgar__qr svg { width: 100%; height: 100%; display: block; }
.divulgar__rotulo { font-size: .78rem; letter-spacing: .12em; text-transform: uppercase;
                    color: var(--cinza-3); margin: 0; }
.secao--clara .divulgar__rotulo { color: #6e707b; }
.divulgar__link { margin: .35rem 0 0; font-size: 1.05rem; word-break: break-all; }
.divulgar__link strong { color: var(--marca); }

/* Selo que aparece quando o visitante chegou por indicação. */
.indicacao-selo {
  margin: 1.5rem 0 0; padding: .7rem 1rem;
  border: 1px dashed var(--linha); border-radius: 10px;
  font-size: .88rem; color: var(--cinza-2); text-align: left;
}
.indicacao-selo strong { color: var(--acento); letter-spacing: .04em; }
.secao--clara .indicacao-selo { border-color: #d2d2d7; color: var(--tinta-2); }
.secao--clara .indicacao-selo strong { color: var(--marca); }

/* Frase de impacto sobre superfície clara. O .impacto nasceu para
   fundo preto e tinha branco fixo: numa seção clara sobrava só a
   palavra em acento flutuando, e o resto sumia. Quarta colisão do
   mesmo tipo, e a lição é sempre a mesma: componente com cor
   absoluta precisa da variante da outra superfície no mesmo dia
   em que nasce. */
.secao--clara .impacto    { color: var(--tinta); }
.secao--clara .impacto em { color: var(--marca); }

/* ============================================================
   35. TOKEN DE TEXTO FORTE, E FORMULÁRIO EM SUPERFÍCIE CLARA
   ------------------------------------------------------------
   Quatro bugs vieram da mesma causa: componente com cor branca
   fixa, colocado numa seção clara, sumindo no fundo. Remendar
   caso a caso só adia o quinto.

   A correção é semântica: --texto-forte quer dizer "a cor de
   texto mais forte DESTA superfície". No escuro é branco, no
   claro é tinta. O componente pede o papel, não a cor, e passa
   a funcionar nas duas superfícies sem saber em qual está.
   ============================================================ */
:root          { --texto-forte: var(--branco); }
.secao--clara  { --texto-forte: var(--tinta); }

.secao--clara .artigo strong,
.secao--clara .tabela tbody th,
.secao--clara .pilula b,
.secao--clara .metrica__rot,
.secao--clara .btn--linha { color: var(--texto-forte); }

/* Campo de formulário na superfície clara. Estava herdando a
   caixa escura do tema padrão: input preto sobre cartão branco,
   que é o que aparecia no bloco de divulgação. */
.secao--clara .campo input,
.secao--clara .campo select,
.secao--clara .campo textarea {
  background: #fff;
  border-color: #d2d2d7;
  color: var(--tinta);
}
.secao--clara .campo input:focus,
.secao--clara .campo select:focus,
.secao--clara .campo textarea:focus { border-color: var(--marca); }
.secao--clara .campo label { color: var(--tinta); }
.secao--clara .campo input::placeholder,
.secao--clara .campo textarea::placeholder { color: #9a9aa0; }
.secao--clara .rotulo-grupo { color: var(--tinta); }
.secao--clara .consenti { color: var(--tinta-2); }
.secao--clara .consenti strong { color: var(--tinta); }
.secao--clara .escolha .consenti { border-color: #d2d2d7; }
.secao--clara .escolha .consenti:has(input:checked) {
  border-color: var(--marca); background: rgba(43,75,168,.04);
}
.secao--clara .escolha .consenti:has(input:checked) b { color: var(--marca); }
.secao--clara .calc__linha strong { color: var(--marca); }

/* ============================================================
   36. MATERIAL PARA IMPRIMIR
   ------------------------------------------------------------
   Peça de papel, não de tela. Por isso: fundo branco fixo,
   medidas em milímetro e uma regra @media print que apaga tudo
   que não vai para a folha.

   Fundo branco e não preto porque cartaz preto em impressora de
   condomínio come um cartucho por folha, sai manchado e o QR
   perde contraste. O QR precisa ser escuro sobre claro.
   ============================================================ */
.mat-barra {
  background: var(--fundo); border-bottom: 1px solid var(--linha);
  padding-block: 1.25rem; position: sticky; top: 0; z-index: 50;
}
.mat-barra__linha { display: grid; gap: 1rem; align-items: end; }
@media (min-width: 48em) { .mat-barra__linha { grid-template-columns: 1fr auto; } }
.mat-barra__campo { margin-bottom: 0; }

.mat-folha { background: #fff; color: #111; padding: 2rem 1rem; }
.mat-peca {
  width: min(100%, 210mm); min-height: 297mm; margin: 0 auto 2rem;
  background: #fff; color: #111; padding: 18mm 16mm;
  border: 1px solid #e2e2e6; border-radius: 4px;
  display: flex; flex-direction: column;
}
.mat-logo { width: 46mm; height: auto; }
.mat-logo--peq { width: 32mm; }

.mat-chapeu {
  margin: 14mm 0 0; font-size: 10pt; letter-spacing: .18em;
  text-transform: uppercase; font-weight: 700; color: #1e3a8a;
}
.mat-titulo {
  margin: 4mm 0 0; font-family: var(--fonte-display); font-weight: 700;
  font-size: 30pt; line-height: 1.06; letter-spacing: -.03em; color: #111;
  text-align: left; hyphens: manual;
}
.mat-texto { margin: 8mm 0 0; font-size: 12.5pt; line-height: 1.5; color: #404148; max-width: 150mm; }

.mat-qr { margin-top: auto; display: flex; gap: 10mm; align-items: center; }
.mat-qr__img { width: 52mm; height: 52mm; flex: 0 0 auto; }
.mat-qr__img svg { width: 100%; height: 100%; display: block; }
.mat-qr__acao { margin: 0; font-size: 13pt; font-weight: 700; color: #111; }
.mat-qr__link { margin: 2mm 0 0; font-size: 11pt; color: #1e3a8a; font-weight: 600; word-break: break-all; }
.mat-qr__nota { margin: 3mm 0 0; font-size: 10pt; color: #6e707b; }
.mat-rodape { margin: 10mm 0 0; font-size: 8.5pt; color: #6e707b; border-top: 1px solid #e2e2e6; padding-top: 4mm; }

/* Dois cartões de balcão na mesma folha. */
.mat-peca--cartao { display: grid; gap: 8mm; grid-template-columns: 1fr; align-content: start; }
@media (min-width: 40em) { .mat-peca--cartao { grid-template-columns: 1fr 1fr; } }
.mat-cartao {
  border: 1px dashed #b8bbc6; border-radius: 6px; padding: 10mm 8mm;
  text-align: center; display: flex; flex-direction: column; align-items: center; gap: 5mm;
}
.mat-cartao__frase {
  margin: 0; font-family: var(--fonte-display); font-weight: 600;
  font-size: 14pt; line-height: 1.25; color: #111;
}
.mat-cartao__frase strong { color: #1e3a8a; }
.mat-cartao__qr { width: 40mm; height: 40mm; }
.mat-cartao__qr svg { width: 100%; height: 100%; display: block; }
.mat-cartao__pe { margin: 0; font-size: 9pt; color: #6e707b; }
.mat-instrucao { max-width: 210mm; margin: 0 auto; color: #6e707b; font-size: .9rem; padding: 0 1rem 2rem; }

/* ---------- O que vai para o papel ---------- */
@media print {
  [data-mat-barra] { display: none !important; }
  body { background: #fff; }
  .mat-folha { padding: 0; }
  .mat-peca {
    border: 0; border-radius: 0; margin: 0; padding: 15mm;
    width: 100%; min-height: auto;
    break-after: page; page-break-after: always;
  }
  .mat-peca:last-of-type { break-after: auto; page-break-after: auto; }
  .mat-peca--cartao { grid-template-columns: 1fr 1fr; }
  /* Cor de fundo e imagem precisam ser impressas, senão o
     navegador economiza tinta e apaga o QR. */
  * { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
}
@page { size: A4; margin: 10mm; }

/* ============================================================
   37. ÍCONES
   ------------------------------------------------------------
   Referência de leitura: o cartão de solução do Graber e a
   tabela comparativa da Apple. Nos dois, o ícone não decora,
   ele ACELERA. Quem varre a página encontra a frente que
   procura sem ler os títulos, e só então lê.

   Sprite único referenciado por <use>: um arquivo em cache para
   o site inteiro, e o desenho continua sendo vetor, nítido em
   qualquer densidade de tela.

   currentColor: o ícone assume a cor do texto onde estiver.
   É o que faz o mesmo arquivo servir a superfície escura e a
   clara sem existir uma segunda versão de nada.
   ============================================================ */
.ico {
  width: 1.65rem; height: 1.65rem;
  display: block; flex: 0 0 auto;
  color: var(--acento);
}
.secao--clara .ico { color: var(--marca); }
.ico--peq { width: 1.2rem; height: 1.2rem; }

/* Cabeçalho do cartão: ícone à esquerda, número à direita.
   O número continua importando, porque a numeração das doze
   frentes é o índice do escopo, mas ele recua para legenda. */
.cartao__topo {
  display: flex; align-items: center; justify-content: space-between;
  gap: 1rem; margin-bottom: 1.1rem;
}
.cartao__topo .cartao__num { margin: 0; }

/* Cartão com ícone ganha um pouco mais de respiro no topo:
   ícone colado no título perde a função de âncora visual. */
.cartao__topo + h3 { margin-top: 0; }

/* ============================================================
   38. MOSAICO DE LEITURAS
   ------------------------------------------------------------
   Não é galeria de fotos bonitas: é folha de evidência. Cada
   quadro mostra UMA leitura que o estudo faz, com etiqueta e
   legenda técnica. É o que transforma "confie em nós" em
   "olha o que a gente enxerga".

   Uma peça grande e quatro pequenas, de propósito: mosaico com
   todos os quadros do mesmo tamanho vira contato de fotógrafo,
   sem hierarquia e sem ponto de entrada para o olho.

   Os arquivos são de resolução modesta, e por isso vão em
   quadros pequenos. Foto de 480px esticada em largura total
   denuncia na hora; a mesma foto em 280px fica impecável.
   ============================================================ */
.mosaico { display: grid; gap: .75rem; grid-template-columns: repeat(2, 1fr); }
@media (min-width: 48em) {
  .mosaico { grid-template-columns: repeat(3, 1fr); gap: 1rem; }
  .mosaico__item--grande { grid-column: span 2; grid-row: span 2; }
}

.mosaico__item {
  position: relative; margin: 0; overflow: hidden;
  border-radius: 14px; border: 1px solid var(--linha);
  background: #0e0e10;
}
.mosaico__item img {
  width: 100%; height: 100%; object-fit: cover; display: block;
  aspect-ratio: 16 / 10;
  transition: transform 600ms cubic-bezier(.2,.6,.3,1);
}
.mosaico__item--grande img { aspect-ratio: 16 / 10; }
.mosaico__item:hover img { transform: scale(1.04); }

/* Legenda por cima, sobre um véu que nasce do próprio quadro.
   Retângulo chapado por baixo cortaria a imagem em duas. */
.mosaico__item figcaption {
  position: absolute; inset-inline: 0; bottom: 0;
  padding: 2.2rem .9rem .8rem;
  background: linear-gradient(180deg, transparent 0%, rgba(0,0,0,.55) 45%, rgba(0,0,0,.9) 100%);
  color: #e6e7f0; font-size: .82rem; line-height: 1.35; text-align: left;
}
.mosaico__item--grande figcaption { font-size: .95rem; padding-top: 3rem; }

.mosaico__tag {
  display: block; margin-bottom: .2rem;
  font-size: .66rem; letter-spacing: .14em; text-transform: uppercase;
  font-weight: 700; color: var(--acento);
}
.mosaico__item--grande .mosaico__tag { font-size: .72rem; }

/* Ênfase de texto sobre superfície clara. A marca clara nasceu para
   fundo preto: sobre branco ela reprova em contraste e a frase
   mais forte do bloco vira a mais fraca da tela. */
.secao--clara .destaque { color: var(--marca); font-weight: 600; }

/* ============================================================
   39. IMAGEM NO PAR TEXTO-IMAGEM
   ------------------------------------------------------------
   No .duo, a coluna de texto quase sempre é mais alta que a
   imagem. Com align-items: start, a imagem ficava encolhida no
   alto da coluna, com um vazio embaixo, e parecia fora de
   proporção mesmo estando na proporção certa.

   Agora ela ESTICA para a altura da coluna de texto e recorta
   pelo centro. Vira um painel, que é como as referências de alto
   padrão tratam imagem ao lado de texto: a foto acompanha o
   bloco, não flutua nele.
   ============================================================ */
@media (min-width: 56em) {
  .duo > div:has(> img.midia) { align-self: stretch; display: flex; }
  .duo > div > img.midia {
    width: 100%; height: 100%;
    object-fit: cover; object-position: center;
    min-height: 22rem;
  }
}
/* Sem :has(), a imagem apenas não estica: nada quebra. */
@supports not (selector(:has(*))) {
  .duo > div > img.midia { height: auto; }
}

/* Título de coluna do rodapé. Virou <h3> porque <h4> depois de um
   <h2> pula um nível, e leitor de tela anuncia a hierarquia errada.
   O tamanho continua vindo daqui: semântica é da tag, aparência é
   do CSS, e confundir os dois é o erro que gerou 16 achados. */
.rodape__titulo {
  font-size: .82rem; letter-spacing: .1em; text-transform: uppercase;
  font-weight: 700; color: var(--cinza-2); margin: 0 0 .9rem;
}

/* Título de cartão que precisa ser <h2> por hierarquia, mas tem
   corpo de <h3> na tela. Semântica vem da tag, tamanho vem daqui. */
.titulo-cartao { font-size: clamp(1.12rem, 1.04rem + .35vw, 1.35rem); margin-bottom: .5rem; }

/* Diagrama nunca é recortado. A regra de esticar a imagem para a
   altura da coluna usa object-fit: cover, que corta as bordas.
   Em foto isso é desejável; num desenho técnico corta legenda,
   número e escala, e foi exatamente o que aconteceu com a planta
   de vulnerabilidades.

   O seletor usa *=".svg" e não $=".svg" porque o build acrescenta
   ?v=<hash> no fim da URL: com $= a regra nunca casaria. */
.duo > div > img.midia[src*=".svg"] {
  object-fit: contain;
  height: auto;
  align-self: start;
  min-height: 0;
}
.duo > div:has(> img.midia[src*=".svg"]) { align-items: start; }

/* Imagem COMPOSTA tambem nunca e recortada. Quando as duas metades
   carregam informacao diferente, por exemplo o acesso de um lado e a
   central do outro, o cover corta justamente a metade que explica a
   primeira, e a imagem passa a dizer menos do que a legenda promete.
   Marcar com .midia--inteira. */
.duo > div > img.midia--inteira {
  object-fit: contain;
  height: auto;
  align-self: start;
  min-height: 0;
}
.duo > div:has(> img.midia--inteira) { align-items: start; }

/* Faixa de imagem em largura total, entre secoes. */
.faixa-foto { margin: 0; }
.faixa-foto img { display: block; width: 100%; height: auto; }
.faixa-foto figcaption {
  max-width: var(--larg, 1240px);
  margin: 10px auto 0;
  padding-inline: var(--gut, 1.5rem);
  font-size: .84rem;
  color: var(--cinza-3, #8d8f9b);
}

/* ============================================================
   40. FUNDO ESMAECIDO DE SEÇÃO
   ------------------------------------------------------------
   Fotografia atrás do texto, quase apagada. Duas regras que
   fazem a diferença entre atmosfera e poluição:

   1. Opacidade baixa E um véu por cima. Só baixar a opacidade
      deixa o meio-tom da foto brigando com a letra; o véu
      garante o contraste onde o texto realmente cai.
   2. A imagem é <img> e não background do CSS, para receber o
      ?v=<hash> do build e o loading="lazy". Fundo declarado em
      CSS não recebe nenhum dos dois.
   ============================================================ */
.secao__fundo { position: absolute; inset: 0; z-index: 0; overflow: hidden; pointer-events: none; }
.secao__fundo img {
  width: 100%; height: 100%; object-fit: cover; display: block;
  opacity: .13;
  filter: grayscale(.35) contrast(1.05);
}
.secao__fundo::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(100deg, rgba(0,0,0,.92) 0%, rgba(0,0,0,.78) 45%, rgba(0,0,0,.62) 100%);
}
.secao--360 { position: relative; isolation: isolate; }
.secao--360 > .container { position: relative; z-index: 1; }

/* ===========================================================================
   PAINEL DE NAVEGAÇÃO  (formato de sobreposição, referência graber.com.br)
   ---------------------------------------------------------------------------
   Substitui o menu horizontal por um botão MENU que abre a navegação inteira
   em tela cheia, com um ladrilho ilustrado por destino.

   Nomes conferidos contra as classes já existentes nesta folha: nenhum se
   repete. O menu antigo (.topo__nav e .gaveta) continua no HTML e só é
   escondido onde o painel está ligado, então nada quebra nas páginas que
   ainda não foram convertidas.
   =========================================================================== */

/* ------------------------------------------------------------ o gatilho */
.abre-menu {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  padding: 11px 18px 11px 22px;
  border: 1px solid rgba(255,255,255,.18);
  border-radius: 999px;
  background: rgba(255,255,255,.06);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  color: #fff;
  font: 700 .78rem/1 inherit;
  letter-spacing: .16em;
  text-transform: uppercase;
  cursor: pointer;
  transition: background .25s ease, border-color .25s ease;
}
.abre-menu:hover { background: rgba(255,255,255,.14); border-color: rgba(255,255,255,.4); }

/* os nove pontinhos */
.abre-menu i {
  display: grid;
  grid-template-columns: repeat(3, 3px);
  gap: 3px;
}
.abre-menu i b { width: 3px; height: 3px; background: currentColor; border-radius: 50%; }

/* na página com painel, o menu horizontal some e sobra só o botão */
.tem-painel .topo__nav,
.tem-painel .topo__hamburguer,
.tem-painel .topo__login { display: none; }

/* ------------------------------------------------ O CABEÇALHO NO CELULAR
   Defeito, não preferência: o botão MENU mora dentro de .topo__acoes, que
   só aparece a partir de 62em. Abaixo disso o painel escondia o
   hamburguer antigo e as ações não apareciam, então o cabeçalho do
   celular ficava com o logo e MAIS NADA. O site inteiro ficava sem
   navegação no telefone, nas 26 páginas com painel.

   Aqui as ações voltam a aparecer em qualquer largura. No celular sobra
   só o MENU ao lado do logo: logo (132 px) e botão não dividem os 335 px
   úteis com o CTA de visita sem espremer os três. Quem quer falar tem o
   botão flutuante do WhatsApp e o ladrilho de contato dentro do painel. */
.tem-painel .topo__acoes { display: flex; align-items: center; gap: .9rem; }

@media (max-width: 61.99em) {
  .tem-painel .topo__acoes .btn { display: none; }
  .abre-menu {
    padding: 9px 15px 9px 18px;
    gap: 10px;
    font-size: .72rem;
    letter-spacing: .12em;
  }
}

/* --------------------------------------------------------------- painel */
.painel {
  position: fixed;
  inset: 0;
  z-index: 200;
  background: #0A0B0C;
  overflow-y: auto;
  overscroll-behavior: contain;
  opacity: 0;
  visibility: hidden;
  transform: scale(1.015);
  transition: opacity .34s ease, transform .34s cubic-bezier(.22,.61,.36,1), visibility .34s;

  /* MEDIDO: sem esta linha, o painel fechado baixava 2,2 MB de
     imagem em toda página, sem ninguém abrir o menu.

     O motivo é sutil. O painel é position:fixed com
     visibility:hidden, e elemento com visibility:hidden CONTINUA
     tendo caixa de layout. Como ele é fixo, essas caixas ficam
     dentro da janela, e para o navegador as imagens estão
     visíveis. O loading="lazy" então não adia nada.

     content-visibility:hidden pula a renderização do conteúdo, e
     com isso o lazy volta a valer. A transição de opacidade do
     próprio painel continua funcionando, porque ela é do
     container e não do conteúdo. */
  content-visibility: hidden;
}
.painel[data-aberto="1"] {
  opacity: 1; visibility: visible; transform: none;
  content-visibility: visible;
}
body.painel-travado { overflow: hidden; }

.painel__topo {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 26px 24px 8px;
}
.painel__topo img { height: 76px; width: auto; }
@media (min-width: 48em) { .painel__topo img { height: 104px; } }

.painel__fechar {
  position: absolute;
  top: 22px; right: 24px;
  width: 46px; height: 46px;
  display: grid;
  place-items: center;
  border: 0;
  border-radius: 50%;
  background: #1C1C20;
  color: #fff;
  font-size: 1.15rem;
  line-height: 1;
  cursor: pointer;
  transition: background .22s ease, transform .22s ease;
}
.painel__fechar:hover { background: #2B2C31; transform: rotate(90deg); }

.painel__corpo { max-width: 1240px; margin-inline: auto; padding: 18px clamp(20px, 5vw, 48px) 56px; }

.painel__olho {
  margin: 0 0 18px;
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .24em;
  text-transform: uppercase;
  color: #A5ABE8;
}

.painel__grade {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(10px, 1.1vw, 16px);
}

/* ------------------------------------------------------------ ladrilhos */
.ladrilho {
  position: relative;
  display: block;
  aspect-ratio: 16 / 10;
  overflow: hidden;
  border-radius: 6px;
  text-decoration: none;
  background: #151518;
  isolation: isolate;
}
.ladrilho img {
  position: absolute;
  inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  filter: grayscale(1) contrast(1.06) brightness(.74);
  transform: scale(1.02);
  transition: filter .45s ease, transform .55s cubic-bezier(.22,.61,.36,1);
}
.ladrilho::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(0,0,0,0) 30%, rgba(0,0,0,.86) 100%);
}
.ladrilho:hover img, .ladrilho:focus-visible img {
  filter: grayscale(0) contrast(1.03) brightness(.9);
  transform: scale(1.06);
}
.ladrilho__txt { position: absolute; left: 0; bottom: 0; z-index: 2; padding: 18px 20px; }
.ladrilho__t {
  display: block;
  margin: 0;
  font-size: 1.02rem;
  font-weight: 700;
  letter-spacing: -.01em;
  color: #fff;
}
.ladrilho__s { display: block; margin: 3px 0 0; font-size: .82rem; color: rgba(255,255,255,.62); }
.ladrilho--marca .ladrilho__t strong { color: #FFD166; font-weight: 700; }

/* linha de links secundários abaixo da grade */
.painel__extra {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 26px;
  margin-top: 26px;
  padding-top: 22px;
  border-top: 1px solid #202125;
}
.painel__extra a {
  font-size: .86rem;
  color: rgba(255,255,255,.6);
  text-decoration: none;
  transition: color .2s ease;
}
.painel__extra a:hover { color: #A5ABE8; }
.painel__extra span { font-size: .86rem; color: rgba(255,255,255,.3); }

@media (max-width: 900px) { .painel__grade { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) {
  .painel__grade { grid-template-columns: 1fr; }
  .ladrilho { aspect-ratio: 16 / 7; }
  /* 42px deixava a assinatura 'Engenharia e Servicos' com 6,8px
     de faixa, ilegivel. 80px levam a faixa para 12,9px. */
  .painel__topo img { height: 80px; }
}
@media (prefers-reduced-motion: reduce) {
  .painel, .ladrilho img, .painel__fechar { transition-duration: .001ms; }
}

/* ===========================================================================
   CAMADAS DE PROTEÇÃO  (substitui diagrama-camadas.svg e camadas-protecao.svg)
   ---------------------------------------------------------------------------
   Os dois SVGs tinham o mesmo defeito: cor de texto cravada para fundo escuro,
   e trinta e nove linhas de texto dentro de uma imagem que a página exibia em
   meia coluna. Em seção clara o texto sumia, e em qualquer lugar ele ficava
   com cinco pixels de altura.

   Aqui o texto é texto: herda a cor da seção, o navegador impede colisão,
   reflui no celular e pesa zero byte de imagem. As camadas são caixas
   aninhadas com padding em porcentagem, então o quadrado se mantém quadrado
   em qualquer largura.

   O quadrado é proposital: é a forma do logotipo, e foi a razão de o diagrama
   original não usar círculos.
   =========================================================================== */
.camadas {
  display: grid;
  /* A foto larga pede a coluna maior: antes aqui morava um quadrado, e a
     proporcao era a inversa. Com 1.3fr a imagem fica legivel nos destaques. */
  grid-template-columns: minmax(320px, 1.3fr) 1fr;
  gap: clamp(28px, 4vw, 56px);
  align-items: center;
}

/* ---------------------------------------------------------------- o alvo */
.camadas__alvo { width: 100%; max-width: 440px; margin-inline: auto; }

.cam {
  position: relative;
  aspect-ratio: 1;
  padding: 6.4%;
  border: 1.5px solid var(--cam-cor, #aaaaf4);
}
.cam > .cam { aspect-ratio: auto; height: 100%; }

.cam__n {
  position: absolute;
  top: -1.5px; left: -1.5px;
  min-width: 17px; height: 17px;
  display: grid;
  place-items: center;
  padding-inline: 3px;
  background: var(--cam-cor, #aaaaf4);
  color: #000;
  font-size: 10.5px;
  font-weight: 700;
  line-height: 1;
}

.cam__centro {
  height: 100%;
  display: grid;
  place-items: center;
  text-align: center;
  padding: 6px;
  font-size: clamp(9px, 1.5vw, 11px);
  font-weight: 600;
  letter-spacing: .12em;
  color: var(--cinza-2);
  border: 1.5px dashed rgba(204, 255, 0, .34);
}

/* rampa do acento para o azul fechado, de fora para dentro */
.cam--1 { --cam-cor: #aaaaf4; }
.cam--2 { --cam-cor: #b4b9ee; }
.cam--3 { --cam-cor: #9aa2e4; }
.cam--4 { --cam-cor: #808ada; }
.cam--5 { --cam-cor: #6a74cf; }
.cam--6 { --cam-cor: #5560c2; }
.cam--7 { --cam-cor: #434eb0; }
.cam--8 { --cam-cor: #343f9c; }

/* --------------------------------------------------------------- a lista */
.camadas__lista { display: grid; gap: clamp(10px, 1.4vw, 15px); margin: 0; padding: 0; list-style: none; }

.camada {
  display: grid;
  grid-template-columns: 22px 1fr;
  gap: 14px;
  align-items: start;
}
.camada__n {
  width: 20px; height: 20px;
  display: grid;
  place-items: center;
  margin-top: 1px;
  background: var(--cam-cor, #aaaaf4);
  color: #000;
  font-size: 11px;
  font-weight: 700;
  line-height: 1;
}
.camada__t {
  display: block;
  font-size: 1rem;
  font-weight: 600;
  letter-spacing: -.01em;
  color: var(--branco);
}
.camada__p { display: block; margin-top: 2px; font-size: .9rem; line-height: 1.5; color: var(--cinza-2); }

.camadas__pe {
  grid-column: 1 / -1;
  margin: clamp(18px, 2.2vw, 26px) 0 0;
  padding-top: 16px;
  border-top: 1px solid var(--linha);
  font-size: .86rem;
  color: var(--cinza-3, #8d8f9b);
}

/* as duas centrais que observam as camadas, no diagrama de oito */
.centrais { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 18px; }
.central {
  flex: 1 1 190px;
  padding: 11px 14px;
  border: 1px solid var(--linha);
  border-left: 3px solid var(--acento);
}
.central b { display: block; font-size: .8rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; }
.central span { display: block; margin-top: 2px; font-size: .82rem; color: var(--cinza-2); }

/* ------------------------------------------------- versão em seção clara */
.secao--clara .camada__t,
.secao--branca .camada__t { color: var(--tinta); }
.secao--clara .camada__p,
.secao--branca .camada__p { color: var(--tinta-2); }
.secao--clara .cam__centro,
.secao--branca .cam__centro { color: var(--tinta-2); border-color: rgba(11, 59, 11, .3); }
/* #70727d dava 4,42 sobre a seção clara, a dois centésimos de reprovar.
   #676973 dá 4,88 e ninguém percebe a diferença. */
.secao--clara .camadas__pe,
.secao--branca .camadas__pe { color: #676973; }
/* em fundo claro o acento puro não tem contraste: a rampa escurece */
.secao--clara .cam--1, .secao--branca .cam--1 { --cam-cor: #1e3a8a; }
.secao--clara .cam--2, .secao--branca .cam--2 { --cam-cor: #24409b; }
.secao--clara .cam--3, .secao--branca .cam--3 { --cam-cor: #2542a6; }
.secao--clara .cam--4, .secao--branca .cam--4 { --cam-cor: #3a5cba; }
.secao--clara .cam--5, .secao--branca .cam--5 { --cam-cor: #4a6cc9; }
.secao--clara .cam--6, .secao--branca .cam--6 { --cam-cor: #5a7bd4; }
.secao--clara .cam--7, .secao--branca .cam--7 { --cam-cor: #6b8bdd; }
.secao--clara .cam--8, .secao--branca .cam--8 { --cam-cor: #7d9ae6; }
.secao--clara .cam__n, .secao--branca .cam__n,
.secao--clara .camada__n, .secao--branca .camada__n { color: #fff; }

/* O primeiro degrau da rampa é o mais claro, e branco em cima dele dava
   3,76 de contraste, abaixo dos 4,5 da AA. Escurecer o degrau estragaria
   a rampa, que é o que a seção explica. Então só ESTE número vira escuro,
   e aí sobe para 5,6. O degrau mais claro com texto escuro é padrão, não
   exceção: é assim que se lê que ele é o mais claro. */
.secao--clara .cam--1 .cam__n, .secao--branca .cam--1 .cam__n,
.secao--clara .cam--1 .camada__n, .secao--branca .cam--1 .camada__n,
.secao--clara .camada.cam--1 .camada__n { color: #0c0c0e; }

/* E o espelho disso no fundo escuro: lá a rampa nasce no acento puro e
   termina em azul fechado, com número preto. No ÚLTIMO degrau o preto
   cai para 3,98. Só ele vira branco, e sobe para 5,28. Em seção clara o
   oito já era branco, então a regra não muda nada lá. */
.cam--8 .camada__n,
.cam--8 .cam__n { color: #fff; }

@media (max-width: 900px) {
  .camadas { grid-template-columns: 1fr; }
  .camadas__alvo { max-width: 340px; }
}

/* ===========================================================================
   PIC — PROGRAMA DE INDICAÇÃO DE CLIENTES
   ---------------------------------------------------------------------------
   A régua existe para o morador descobrir sozinho que indicar compensa. Número
   dito numa frase não convence; número que se move com o dedo dele, sim. Foi o
   que funcionou no simulador do Consórcio Local, e o padrão é o mesmo aqui.

   Prefixo pic- em tudo: nenhuma destas classes existe no resto da folha.
   =========================================================================== */
.pic-regua { background: var(--grafite); border: 1px solid var(--linha); padding: clamp(20px, 3vw, 34px); }

.pic-regua__topo { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 8px; }
.pic-regua__rot { font-size: .95rem; color: var(--cinza-2); }
.pic-regua__n { font-size: clamp(2rem, 5vw, 3rem); font-weight: 700; line-height: 1; color: var(--acento); letter-spacing: -.03em; }

.pic-slider { width: 100%; -webkit-appearance: none; appearance: none; background: transparent; margin: 18px 0 6px; height: 30px; cursor: pointer; }
.pic-slider::-webkit-slider-runnable-track { height: 6px; border-radius: 99px; background: #2D2D33; }
.pic-slider::-moz-range-track { height: 6px; border-radius: 99px; background: #2D2D33; }
.pic-slider::-webkit-slider-thumb {
  -webkit-appearance: none; appearance: none; margin-top: -10px;
  width: 26px; height: 26px; border-radius: 50%;
  background: var(--acento); border: 3px solid #0C0C0E; box-shadow: 0 2px 10px rgba(0,0,0,.6);
}
.pic-slider::-moz-range-thumb {
  width: 26px; height: 26px; border-radius: 50%;
  background: var(--acento); border: 3px solid #0C0C0E; box-shadow: 0 2px 10px rgba(0,0,0,.6);
}
.pic-slider:focus-visible::-webkit-slider-thumb { box-shadow: 0 0 0 5px rgba(204,255,0,.3); }
.pic-slider__lim { display: flex; justify-content: space-between; font-size: .76rem; color: var(--cinza-3, #8d8f9b); }

.pic-regua__campo { margin-top: 22px; padding-top: 20px; border-top: 1px solid var(--linha); }
.pic-regua__campo label { display: block; font-size: .85rem; color: var(--cinza-2); margin-bottom: 6px; }
.pic-regua__campo input[type="text"] {
  width: 100%; background: #0C0C0E; border: 1px solid var(--linha); color: var(--branco);
  font-family: inherit; font-size: 1.3rem; font-weight: 700; letter-spacing: -.02em;
  padding: 12px 14px;
}
.pic-regua__campo input[type="text"]:focus { outline: none; border-color: var(--acento); }

.pic-mora { display: flex; align-items: flex-start; gap: 10px; margin-top: 16px; font-size: .9rem; color: var(--cinza-2); cursor: pointer; }
.pic-mora input { margin-top: .2em; accent-color: var(--acento); width: 17px; height: 17px; flex: none; }

.pic-saida { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; margin-top: 24px; }
.pic-saida__bloco { background: #0C0C0E; border: 1px solid var(--linha); border-left: 3px solid var(--acento); padding: 16px 18px; }
.pic-saida__rot { display: block; font-size: .78rem; letter-spacing: .1em; text-transform: uppercase; color: var(--cinza-3, #8d8f9b); }
.pic-saida__v { display: block; margin-top: 6px; font-size: clamp(1.5rem, 3.4vw, 2.1rem); font-weight: 700; letter-spacing: -.03em; color: var(--acento); }
.pic-saida__sub { display: block; margin-top: 3px; font-size: .82rem; color: var(--cinza-2); }
.pic-saida__bloco--realce { border-left-color: var(--realce); }
.pic-saida__bloco--realce .pic-saida__v { color: var(--realce); }
.pic-saida__bloco[hidden] { display: none; }

/* a frase de fecho do simulador, que é onde a conta vira argumento */
.pic-fecho {
  margin: 20px 0 0; padding: 15px 18px;
  background: rgba(204,255,0,.07); border-left: 3px solid var(--acento);
  font-size: 1rem; line-height: 1.5; color: var(--branco);
}
.pic-fecho strong { color: var(--acento); }
.pic-fecho--neutro { background: rgba(255,255,255,.04); border-left-color: #3D3E45; }
.pic-fecho--neutro strong { color: var(--branco); }

@media (max-width: 620px) { .pic-saida { grid-template-columns: 1fr; } }

/* ===========================================================================
   MAPA — foto de mapeamento com legenda
   ---------------------------------------------------------------------------
   Substituiu os diagramas de caixas aninhadas em 12/10/2026. A foto mostra
   as camadas sobre um empreendimento real, que e o que o cliente reconhece;
   a lista numerada ao lado continua, porque e ela que diz a ORDEM, e ordem
   nenhuma foto entrega.

   Tratamento identico nas tres ocorrencias, para o conjunto parecer um
   sistema e nao tres imagens avulsas.
   =========================================================================== */
.mapa { margin: 0; }
.mapa img {
  display: block;
  width: 100%;
  height: auto;
  border: 1px solid var(--linha);
}
.mapa figcaption {
  margin-top: 10px;
  font-size: .84rem;
  line-height: 1.5;
  color: var(--cinza-3, #8d8f9b);
}
.secao--clara .mapa figcaption,
.secao--branca .mapa figcaption { color: #70727d; }
.secao--clara .mapa img,
.secao--branca .mapa img { border-color: var(--risco-claro, #e3e3df); }

/* Dentro de um duo o componente ja ocupa meia pagina. Dividir de novo
   deixa a foto minuscula e a legenda num filete. Ali ele empilha. */
.duo .camadas { grid-template-columns: 1fr; gap: clamp(18px, 2.4vw, 28px); }
.duo .camadas .mapa img { max-height: 320px; object-fit: cover; }

/* dentro do componente de camadas a foto ocupa a coluna do antigo alvo */
.camadas .mapa { align-self: start; }

/* ===========================================================================
   LADRILHO DE AÇÃO  (painel de navegação)
   ---------------------------------------------------------------------------
   Os nove primeiros ladrilhos levam a páginas e por isso são fotográficos.
   Estes três levam a uma AÇÃO: indicar, abrir chamado, avaliar. Tratamento
   diferente de propósito, com ícone no lugar da foto, para o olho separar
   "ler sobre" de "fazer". Mesma caixa, mesma proporção, mesma tipografia,
   então o conjunto continua sendo uma grade só.
   =========================================================================== */
.ladrilho--acao {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  background: #161619;
  border: 1px solid #292A2F;
  padding: 20px;
}
.ladrilho--acao::after { display: none; }
.ladrilho--acao:hover { background: #1E1F22; border-color: var(--acento); }
.ladrilho--acao .ladrilho__ico {
  width: 34px; height: 34px;
  color: var(--acento);
  transition: transform .35s cubic-bezier(.22,.61,.36,1);
}
.ladrilho--acao:hover .ladrilho__ico { transform: translateY(-2px) scale(1.06); }
.ladrilho--acao .ladrilho__txt { position: static; padding: 0; }

/* ============================================================
   33. MS portarIA
   ------------------------------------------------------------
   Tres peças, todas pequenas, todas em portaria.html.

   A marca do produto no topo da seção: lockup próprio, vindo do
   arquivo original. Não é redesenho em fonte parecida, é o PDF
   da logomarca convertido, com o preto do fundo virando alfa.
   Por isso ela só pode pousar em superfície escura.
   ============================================================ */
.marca-pia {
  display: block;
  width: clamp(10rem, 24vw, 14rem);
  height: auto;
  margin-bottom: 1.1rem;
}

/* A coluna de texto do herói é bem mais alta que a foto ao lado.
   Com o align-items:start do .duo a foto cola no topo e abre um vão
   de uns 300 px embaixo. Centralizar fecha a composição, e fecha sem
   recortar a imagem, que é o que o object-fit:cover faria. */
@media (min-width: 56em) {
  .duo--centro { align-items: center; }
}

/* O histórico ilustrativo da seção de acompanhamento.
   Capturar a tela real do parceiro não é opção, não temos
   autorização de uso. Então a lista é HTML, montada aqui, e diz
   na própria etiqueta que é demonstração. */
.registro {
  max-width: 44rem;
  border: 1px solid var(--linha);
  border-radius: var(--raio);
  background: linear-gradient(180deg, #141417 0%, #0e0e10 100%);
  overflow: hidden;
}
.registro__topo {
  display: flex; align-items: center; justify-content: space-between;
  gap: 1rem; padding: .85rem 1.15rem;
  border-bottom: 1px solid var(--linha);
}
.registro__nome { font-weight: 600; color: var(--branco); font-size: .95rem; }
.registro__tag {
  font-size: .7rem; letter-spacing: .1em; text-transform: uppercase;
  color: var(--cinza-3); border: 1px solid var(--linha);
  border-radius: 999px; padding: .25rem .6rem; white-space: nowrap;
}
.registro__lista { list-style: none; margin: 0; padding: 0; }
.registro__lista li {
  display: flex; flex-wrap: wrap; align-items: baseline; gap: .3rem 1rem;
  padding: .95rem 1.15rem; border-top: 1px solid var(--linha);
}
.registro__lista li:first-child { border-top: 0; }
.registro__t { flex: 1 1 8rem; font-weight: 600; font-size: .95rem; color: var(--texto); }
.registro__d { flex: 3 1 15rem; font-size: .9rem; color: var(--cinza-2); }
.registro__e {
  flex: none; font-size: .72rem; letter-spacing: .07em;
  text-transform: uppercase; color: var(--cinza-3);
}
.registro__e--ok { color: var(--acento); }

.secao--clara .registro { background: var(--claro-2); border-color: #e3e4ed; }
.secao--clara .registro__topo,
.secao--clara .registro__lista li { border-color: #e3e4ed; }
.secao--clara .registro__tag { color: var(--tinta-2); border-color: #e0e2eb; }
.secao--clara .registro__nome,
.secao--clara .registro__t { color: var(--tinta); }
.secao--clara .registro__d { color: var(--tinta-2); }
/* #80828d dava 4,08 sobre a superfície clara, abaixo dos 4,5 da AA.
   --tinta-2 dá 6,16 e continua sendo o tom quieto da seção clara. */
.secao--clara .registro__e { color: var(--tinta-2); }
.secao--clara .registro__e--ok { color: #1e3a8a; }

/* A coluna do carro-chefe no comparativo. Fundo levíssimo e duas
   hairlines verticais: o olho acha a coluna sem que a tabela vire
   pódio. O :hover da linha tem de ser reescrito aqui, senão ele
   apaga o realce ao passar o mouse. */
.tabela .col-ia { background: rgba(204,255,0,.05); }
.tabela thead th.col-ia { background: rgba(204,255,0,.1); border-bottom-color: var(--acento); }
.tabela th.col-ia, .tabela td.col-ia {
  border-left: 1px solid rgba(204,255,0,.22);
  border-right: 1px solid rgba(204,255,0,.22);
}
.tabela tbody tr:hover td.col-ia { background: rgba(204,255,0,.09); }

.secao--clara .tabela .col-ia { background: rgba(43,75,168,.05); }
.secao--clara .tabela thead th.col-ia { background: rgba(43,75,168,.09); border-bottom-color: var(--marca); }
.secao--clara .tabela th.col-ia,
.secao--clara .tabela td.col-ia {
  border-left-color: rgba(43,75,168,.2);
  border-right-color: rgba(43,75,168,.2);
}
.secao--clara .tabela tbody tr:hover td.col-ia { background: rgba(43,75,168,.09); }

/* ---------- 34. Fundo dos ladrilhos de ação ------------------
   Os tres ladrilhos de acao (PIC, chamado tecnico e avaliacao)
   eram caixa escura com um icone de 34 px, ao lado de nove
   ladrilhos com fotografia sangrando ate a borda. Na grade de
   doze, os tres apareciam como buraco.

   A correcao nao e dar foto aos tres: dois deles nao tem foto
   honesta que os represente, e inventar uma seria pior. A
   correcao e dar fundo proprio e o mesmo COMPORTAMENTO dos outros
   nove: escurecido em repouso, e no hover a imagem aproxima e
   acende. E o comportamento, nao a imagem, que faz a grade
   parecer uma coisa so.

   Os tres fundos sao SVG desenhado nas cores da marca. Nao levam
   o grayscale das fotos: desenho de marca sem a cor da marca nao
   e tratamento, e perda. */
.ladrilho--acao { position: relative; overflow: hidden; }

/* O seletor precisa de DUAS classes: .ladrilho img vale (0,1,1) e
   venceria um .ladrilho__fundo sozinho, reimpondo o grayscale das
   fotos justamente sobre o desenho que existe para ter cor. */
.ladrilho--acao .ladrilho__fundo {
  position: absolute;
  inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  z-index: 0;
  opacity: 1;
  filter: brightness(.9);
  transform: scale(1.02);
  transition: filter .45s ease, opacity .45s ease,
              transform .55s cubic-bezier(.22,.61,.36,1);
}
.ladrilho--acao:hover .ladrilho__fundo,
.ladrilho--acao:focus-visible .ladrilho__fundo {
  opacity: 1;
  filter: brightness(1) saturate(1);
  transform: scale(1.06);
}

/* O veu volta a existir aqui: sem ele o titulo branco cai em cima
   da arte e some. Mais pesado embaixo, que e onde o texto está. */
.ladrilho--acao::after {
  display: block;
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  background: linear-gradient(180deg, rgba(10,12,10,.55) 0%,
                                      rgba(10,12,10,.74) 52%,
                                      rgba(10,12,10,.93) 100%);
}
.ladrilho--acao .ladrilho__ico,
.ladrilho--acao .ladrilho__txt { position: relative; z-index: 2; }

/* ---------- 35. Herói de duas colunas ------------------------
   O herói padrão sangra uma foto atrás do texto. Isso funciona
   com imagem de cenário, em que o recorte do object-fit:cover
   nao tira nada essencial.

   Nao funciona com foto de assunto. No PIC, o aperto de mao e o
   cartao sao a mensagem inteira, e o recorte do herói cortava os
   dois. Dai a variante: mesma altura e mesmo respiro de herói,
   sem fundo sangrado e sem veu, com a foto INTEIRA ao lado do
   texto.

   O veu precisa sair explicitamente: sem imagem atrás, ele vira
   um gradiente preto sobre a própria página, e escurece o topo
   sem motivo. */
.heroi--duo { min-height: 0; }
.heroi--duo::after { display: none; }
/* So o max-width de 44rem do herói sai. O width do .container nao
   pode ser mexido: e dele que vem a calha lateral de 4rem, e
   width:100% colava o texto na borda da tela. */
.heroi--duo .heroi__conteudo { max-width: none; }
.heroi--duo .chamada { max-width: none; }

/* ---------- 36. Chamada do herói no celular ------------------
   Aqui havia uma exceção que deixava a chamada alinhada à esquerda
   no telefone. Saiu em 12/10/2026: a ordem é justificar em toda
   largura, e o limite de hifenização do bloco de tipografia é o que
   segura o vão entre palavras na medida curta. */

/* ---------- 37. Recuo da justificação -------------------------
   Rede de segurança do bloco 30. O script inline no <head> de cada
   página mede, antes da primeira pintura, se o navegador hifeniza
   português. Se NÃO hifeniza, ele marca o documento aqui, e o texto
   volta ao alinhamento à esquerda.

   Por quê: justificar sem hifenizar é pior que não justificar. A
   linha não tem onde fechar, e o navegador estica o espaço entre as
   palavras até a margem, abrindo o rio branco que desce no meio do
   parágrafo. Com hífen, a mesma linha fecha com a palavra partida e
   o espaço fica regular.

   Na prática isto quase nunca dispara: Chrome, Safari e Firefox
   trazem o dicionário de pt-BR. Dispara em navegador embarcado sem
   dicionário, que existe e foi onde o caso apareceu. */
/* O recuo vale SÓ na medida curta. Em tela larga a linha tem 90
   caracteres ou mais, e aí justificar sem hifenizar não abre rio
   nenhum: sobra palavra para distribuir. O problema é a coluna de
   telefone, com 35 caracteres, onde uma palavra longa a mais ou a
   menos muda tudo. */
@media (max-width: 61.99em) {
  html.sem-hifen p,
  html.sem-hifen li,
  html.sem-hifen dd,
  html.sem-hifen figcaption,
  html.sem-hifen blockquote,
  html.sem-hifen .chamada,
  html.sem-hifen .apoio,
  html.sem-hifen .apoio-2,
  html.sem-hifen .camada__p,
  html.sem-hifen .central,
  html.sem-hifen .metrica__nota,
  html.sem-hifen .artigo__meta,
  html.sem-hifen .form__nota,
  html.sem-hifen .campo__ajuda,
  html.sem-hifen .pic-saida__sub,
  html.sem-hifen .camadas__pe { text-align: left; }

  html.sem-hifen .centro p,
  html.sem-hifen .faixa p,
  html.sem-hifen .centro .apoio,
  html.sem-hifen .faixa .apoio { text-align: center; }
}

/* ---------- 38. O ladrilho sozinho na última fileira ----------
   A grade do painel fecha de três em três. Com 13 ladrilhos sobra um
   sozinho na última fileira, encostado à esquerda, parecendo erro.

   Em vez de fixar a quantidade em múltiplo de três, que obrigaria a
   inventar ou cortar destino toda vez que o site crescer, o último
   ladrilho se estica quando está sozinho. Fica deliberado, e continua
   valendo para 13, 16 ou 19.

   Dois sozinhos na última fileira também: cada um ocupa metade. */
@media (min-width: 48em) {
  .painel__grade > :last-child:nth-child(3n + 1) { grid-column: 1 / -1; }
  .painel__grade > :nth-last-child(2):nth-child(3n + 1) { grid-column: span 2; }
}

/* ---------- 39. O recado pronto do PIC -----------------------
   Bloco com a mensagem que o cliente cola no grupo. Ele imita o
   balão do WhatsApp de propósito: a pessoa reconhece o formato e
   entende, sem ler nada, que aquilo é para ser enviado.

   white-space: pre-line preserva as quebras de linha que o texto
   traz do HTML. Sem isso a mensagem vira um parágrafo único e
   perde a leitura rápida que ela precisa ter no celular. */
.recado {
  background: var(--claro-2, #fff);
  border: 1px solid #e3e4ed;
  border-left: 3px solid var(--acento);
  border-radius: 14px;
  padding: 1.1rem 1.25rem;
}
.recado__texto {
  margin: 0;
  white-space: pre-line;
  text-align: left;
  font-size: .97rem;
  line-height: 1.6;
  color: var(--tinta-2);
}
.secao--grafite .recado, .secao:not(.secao--clara):not(.secao--branca) .recado {
  background: var(--grafite-2); border-color: var(--linha);
}
.secao--grafite .recado__texto { color: var(--cinza-1); }

/* O botão de copiar é <button> e não <a>: o .btn foi escrito para
   link, então aqui ele precisa dos reajustes que um botão traz de
   fábrica no navegador. */
button.btn { font: inherit; cursor: pointer; border: 0; }
button.btn--principal { border: 0; }

/* ============================================================
   41. ALVO DE TOQUE NO CELULAR
   ------------------------------------------------------------
   MEDIDO a 375px: 25 elementos clicáveis abaixo de 24px de
   altura. Quase todos são os links em lista do rodapé, com 18px,
   e o telefone e o e-mail, com 23px.

   Dedo não tem a precisão do ponteiro. A régua do Google é 48px,
   e a correção aqui é por preenchimento, não por tamanho de
   fonte: aumentar a letra mudaria o desenho do rodapé, aumentar
   a área de toque não muda nada que se veja.

   Só no celular. No computador o ponteiro acerta 18px sem
   esforço, e espaçar ali só deixaria o rodapé comprido à toa.
   ============================================================ */
@media (max-width: 47.99em) {
  .rodape ul li > a,
  .rodape__base a,
  .painel__extra a {
    display: inline-block;
    padding-block: .62rem;
  }
  .rodape ul li { margin-block: 0; }

  /* A trilha de migalhas fica numa linha só, então o alvo cresce
     para os lados junto com a altura. */
  .trilha a {
    display: inline-block;
    padding-block: .4rem;
  }
}

/* ============================================================
   42. OS DOIS PARÁGRAFOS QUE ESCAPARAM DO LIMITE DE LEITURA
   ------------------------------------------------------------
   MEDIDO a 1440px: 139 e 144 caracteres por linha, contra os 106
   do resto do site. Os dois moram em caixa de largura cheia, o
   fecho da régua do PIC e a nota de um cartão que ocupa o
   container inteiro, então não havia o que limitasse a linha.

   O seletor do cartão é de propósito ".container > .cartao": o
   cartão de grade mora dentro de .grade e já é estreito. Só o
   cartão que é filho direto do container é largo.
   ============================================================ */
.pic-fecho,
.container > .cartao p { max-width: 84ch; }

/* ============================================================
   43. FOTO DE LARGURA INTERMEDIÁRIA
   ------------------------------------------------------------
   Foto 3:2 ocupando os 1180px do container fica com 787px de
   altura. As fotos cheias do resto do site são 16:9 e param em
   665. Duas de 787 na mesma página, as duas mostrando totem em
   portaria, disputavam atenção uma com a outra.

   Cortar para 16:9 não resolveria: nestas duas o totem encosta no
   topo do quadro, e qualquer corte superior decepa o equipamento.
   Limitar a largura resolve sem tocar na imagem.
   ============================================================ */
.mapa--media { max-width: 920px; margin-inline: auto; }

/* ============================================================
   44. O CREDO, NO PAINEL DE NAVEGAÇÃO
   ------------------------------------------------------------
   Primeira versão tinha caixa: fundo com tinta, canto
   arredondado e filete grosso na lateral. Ele achou que chamava
   atenção demais, e tinha razão. Caixa é o jeito antigo de dizer
   "olhe aqui".

   Esta versão faz o contrário. Um fio de 32px em acento acima do
   texto, e espaço. Só isso. O bloco passa a existir por
   tipografia e por respiro, e não por moldura, que é o que
   separa um aviso de uma declaração.

   Peso 400, e não mais leve, porque a Inter do site só carrega
   de 400 a 700. Pedir 300 daria um peso falso, sintetizado pelo
   navegador, que fica sujo na tela. A leveza vem da entrelinha
   e da cor, não do traço.
   ============================================================ */
.credo {
  /* A medida e larga de proposito. A justificacao reparte a sobra
     da linha entre os espacos: com poucas palavras na linha, cada
     espaco recebe um pedacao e o paragrafo abre buraco. Com a
     linha longa, a mesma sobra se divide entre muito mais espacos
     e nenhum deles cresce o bastante para aparecer. */
  max-width: 84ch;
  margin: 4px 0 34px;
  padding-top: 1.1rem;
  position: relative;
}
.credo::before {
  content: "";
  position: absolute;
  top: 0; left: 0;
  width: 32px; height: 2px;
  background: var(--acento);
}
.credo p { margin: 0; }
.credo__texto {
  /* A ULTIMA linha nao estica. Tentei esticar, ele viu e reprovou,
     com razao: linha final curta esticada vira uma palavra solta
     em cada canto. O Ctrl+J do Word faz o mesmo que esta aqui. */
  text-align-last: left;

  /* Hifenizacao e obrigatoria onde se justifica. Ela deixa a linha
     quebrar no meio da palavra, e com isso a linha fecha sozinha,
     sem precisar afastar as palavras umas das outras. Justificar
     SEM hifen e exatamente o que abre o buraco.

     Este bloco ignora de proposito a trava .sem-hifen do site:
     aqui a justificacao nao sai, entao a hifenizacao tambem nao
     pode sair. */
  hyphens: auto;
  -webkit-hyphens: auto;
  hyphenate-limit-chars: 7 4 3;

  /* Corpo um pouco menor. Nao e economia de espaco, e mais
     caracteres por linha, que e o segundo fator que fecha o
     buraco entre as palavras. */
  font-size: clamp(.98rem, .94rem + .22vw, 1.08rem);
  line-height: 1.68;
  letter-spacing: -.003em;
  color: #DADCE6;
}
/* NAO force justificacao aqui quando o navegador nao hifeniza.
   MEDIDO a 390px com a forca ligada: linha de 6 palavras ficou
   com 17,3px de vao e a de 4 palavras com 25,5px, contra os
   4,5px naturais. Justificar texto estreito e sem hifen e
   exatamente o defeito que estamos tentando eliminar.

   Entao o bloco obedece a trava .sem-hifen do site como todo o
   resto: onde da para hifenizar, justifica; onde nao da, alinha
   a esquerda. */
/* Agora e <span> dentro do paragrafo, e nao paragrafo proprio.
   So a cor separa, que e o suficiente: o olho acha o
   agradecimento sem que ele precise de linha so para ele. */
.credo__fecho { color: rgba(204, 255, 0, .86); }

@media (max-width: 47.99em) {
  .credo { margin-bottom: 26px; padding-top: .95rem; }
}


/* ============================================================
   44. AJUSTES DA MS MULTISOLUCOES
   ------------------------------------------------------------
   O que este site acrescenta ao sistema herdado. Tudo aqui e
   adicao; nenhuma regra acima foi alterada, para que a folha
   continue podendo receber correcao vinda da origem.
   ============================================================ */

/* ---------- Assinatura no topo -------------------------------
   O logotipo e um brasao circular, nao um lockup horizontal.
   Sozinho ele nao diz o nome da empresa em tela pequena, entao
   o nome vem ao lado em texto, que ainda por cima e selecionavel
   e e lido por leitor de tela. */
.topo__logo { display: flex; align-items: center; gap: .7rem; text-decoration: none; }
.topo__logo img { width: 44px; height: 44px; }
.topo__marca {
  font-size: .74rem; line-height: 1.2; letter-spacing: .01em;
  color: var(--cinza-1); text-transform: uppercase;
}
.topo__marca b { display: block; color: var(--branco); font-weight: 600; font-size: .68rem; }
/* Abaixo de 36em o nome escrito disputaria espaco com o botao de
   orcamento, que e o que importa ali. Fica so o brasao. */
@media (max-width: 36em) { .topo__marca { display: none; } }

/* ---------- Heroi sem foto -----------------------------------
   Nem toda pagina tem imagem com lastro. Obras publicas nao pode
   ter foto ilustrativa com viatura ou fardamento, concretagem
   esta com as fotos retidas, e paginas de indice nao precisam de
   foto nenhuma. Em vez de preencher com banco de imagem, a
   abertura e o marinho da marca. */
.heroi--seco {
  min-height: 0;
  background: var(--marinho);
  background-image: radial-gradient(120% 90% at 85% -20%, #0e1a5c 0%, var(--marinho) 60%);
}
.heroi--seco::after { display: none; }
.heroi--seco .heroi__conteudo { padding-block: clamp(2.5rem, 6vw, 4.25rem); }

/* A legenda "Imagem ilustrativa" saiu em 04/11/2026, a pedido do
   Fabio. As regras dela foram removidas junto para nao ficar folha
   morta. A separacao entre foto gerada e registro de obra continua
   no gerador e no prefixo registro-* dos arquivos. */
figure { margin: 0; }
figure img { border-radius: var(--raio); }

/* ---------- O atalho de WhatsApp nao cobre conteudo ----------
   No celular o botao fica fixo no canto inferior direito. Sem
   folga embaixo ele pousa em cima da ultima linha do rodape,
   que e justamente onde moram o CNPJ e o link da politica de
   privacidade. A folga vai no rodape, e nao no body, para a
   faixa escura continuar ate o fim da tela. */
@media (max-width: 47.99em) {
  .rodape { padding-bottom: 6rem; }
}

/* ---------- Lista de dados de contato ------------------------ */
.dados { display: grid; gap: .9rem; }
.dados div { display: grid; gap: .15rem; }
.dados dt { font-size: .78rem; text-transform: uppercase; letter-spacing: .04em; color: var(--cinza-3); }
.dados dd { margin: 0; font-size: 1.02rem; }
.secao--clara .dados dt { color: var(--tinta-2); }

/* ---------- Aviso dentro da pagina ---------------------------
   Usado onde o site precisa dizer ao visitante que algo ainda
   nao esta disponivel, em vez de simular que esta. */
.aviso {
  border-left: 3px solid var(--realce);
  background: rgba(255,209,102,.07);
  padding: 1rem 1.15rem; border-radius: 0 var(--raio) var(--raio) 0;
}
.secao--clara .aviso { background: rgba(255,209,102,.16); }

/* ---------- Secao branca ------------------------------------
   DEFEITO QUE ISTO CORRIGE: a folha herdada usa .secao--branca
   so como modificador de contexto, em regras do tipo
   ".secao--branca .camada__t". Ela nunca teve fundo proprio.
   Usada sozinha, a secao herdava o fundo escuro do body e
   aparecia como uma faixa preta no meio da pagina.
   A correcao nao e dar fundo a ela isolada: e exigir que venha
   sempre junto de .secao--clara, de quem herda as dezenas de
   regras de contraste ja escritas para superficie clara, e aqui
   so trocar o tom para branco puro. */
.secao--clara.secao--branca { background: var(--claro-2); }

/* ---------- Botao de WhatsApp ---------------------------------
   DEFEITO QUE ISTO CORRIGE: o botao de WhatsApp usava .btn--linha,
   que e contorno sobre o fundo da secao. Sobre a faixa azul da
   marca, contorno claro sobre azul saturado quase desaparece, e
   era justamente o botao do canal que mais converte no Brasil.

   Agora ele tem cor propria, a mesma do atalho flutuante: verde
   do WhatsApp com tinta escura por cima. O par da 4,0 de contraste,
   acima dos 3,0 exigidos para componente de interface, e o verde
   e reconhecido antes de a pessoa ler o rotulo.

   A cor NAO e da marca da MS de proposito. E a cor do canal, nao
   do site: ela diz para onde o clique leva. */
.btn--zap {
  background: #25d366;
  color: #06251a;
  border: 1px solid #25d366;
  font-weight: 600;
}
.btn--zap:hover, .btn--zap:focus-visible {
  background: #1fbd5a;
  border-color: #1fbd5a;
  color: #06251a;
}
.faixa .btn--zap { box-shadow: 0 4px 16px rgba(0,0,0,.22); }

/* ---------- Video de fundo do heroi --------------------------
   Entra por cima da foto, nunca no lugar dela. A foto e a camada
   que sempre existe; o video e a que pode faltar, e some sem
   deixar buraco. A transicao de opacidade cobre a troca.

   object-fit: cover porque o arquivo tem 848 por 478 e precisa
   preencher um heroi muito mais largo. Nessa ampliacao a imagem
   perde definicao, e e o veu escuro do heroi que disfarca. Com
   um arquivo em 1920 por 1080 isso deixa de ser necessario. */
/* DEFEITO QUE ISTO CORRIGE: o video nascia com z-index negativo,
   igual ao do .heroi__fundo que o contem. Como esse pai ja cria um
   contexto de empilhamento proprio, o negativo jogava o video para
   TRAS da foto, dentro da mesma caixa. Ele tocava, consumia os 5 MB
   e ninguem via. Dentro do fundo, quem precisa subir e o video: a
   foto e a camada de baixo por definicao. */
.heroi__video {
  position: absolute; inset: 0; z-index: 1;
  width: 100%; height: 100%; object-fit: cover;
  opacity: 0; transition: opacity 700ms ease;
  pointer-events: none;
}
.heroi__video.tocando { opacity: 1; }

/* ---------- Galeria de registros de obra ---------------------
   As fotos vem de dentro dos PDFs institucionais e tem proporcao
   e resolucao muito diferentes entre si, de 334 a 1275 px de
   largura. Numa grade, isso produz fileiras desalinhadas.
   aspect-ratio com object-fit: cover resolve sem tocar no
   arquivo: todas ocupam o mesmo retangulo, recortadas pelo
   centro. */
.galeria {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 19rem), 1fr));
  gap: var(--gap);
}
/* Galeria de foto curta: o registro extraido do PDF as vezes so
   tem 480 px de largura. Esticado numa coluna inteira ele borra,
   entao aqui a coluna para de crescer em vez de a foto crescer. */
.galeria--peq {
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 19rem), 22rem));
}
.registro-obra { margin: 0; }
.registro-obra img {
  width: 100%; height: auto;
  aspect-ratio: 3 / 2;
  object-fit: cover;
  border-radius: var(--raio);
  background: var(--grafite);
}
.registro-obra figcaption {
  font-size: .86rem; line-height: 1.45; color: var(--cinza-2);
  margin-top: .6rem;
  text-align: left; text-align-last: auto;
}
.secao--clara .registro-obra figcaption { color: var(--tinta-2); }