/* Depto de Engenharia e Automacao - Master Automacao - Autor: Derlivon Silva */
/* Folha unica do site: home e as cinco paginas internas.                     */
/* Direcao: registro de engenharia seria. Fundo escuro no topo, tipografia    */
/* grande, faixa de numeros como prova, e o vermelho da marca usado como      */
/* acento cortante - nunca como area. Sem foto, porque nao temos foto ainda:  */
/* o impacto vem de tipografia, contraste e ritmo, nao de imagem.             */

:root{
  --azul:#241F86; --azul-esc:#12102E; --azul-md:#1E1A6E; --azul-cla:#3A34B5;
  --verm:#FF0219; --verm-cla:#FF7080;   /* era #FF6172: 4,46 sobre o azul, abaixo dos 4,5. Agora 4,88 */
  /* O vermelho da marca so serve como FIO ou FUNDO: como letra da 3,56 sobre
     claro, e o minimo e 4,5. Estes dois existem para quando ele precisa ser
     lido. Ficam AQUI, e nao so na pele, para o site continuar legivel se a
     pele for removida. */
  --verm-txt:#C4000F;      /* vermelho que pode ser letra: 5,49 sobre o fundo */
  --verm-fundo:#B00010;    /* vermelho que aguenta letra branca em cima: 7,36 */
  --tinta:#0E1016; --tinta-2:#565C6B; --tinta-3:#8A90A0;
  --linha:#E4E7F0; --fundo:#FFFFFF; --fundo-2:#F5F6FB;
  --zap:#25D366;
  --fonte:"Segoe UI",system-ui,-apple-system,Roboto,"Helvetica Neue",Arial,sans-serif;
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;font-family:var(--fonte);color:var(--tinta);background:var(--fundo);
     line-height:1.6;-webkit-font-smoothing:antialiased}
img{max-width:100%;display:block}
a{color:var(--azul)}
.wrap{width:min(1240px,92%);margin-inline:auto}
.secao{padding:104px 0}
@media(max-width:820px){.secao{padding:68px 0}}

/* ============ tipografia de impacto ============ */
.titulo-gigante{font-size:clamp(2.4rem,6.2vw,4.6rem);line-height:1.02;
  letter-spacing:-.035em;font-weight:800;margin:0}
.titulo{font-size:clamp(1.8rem,3.4vw,2.9rem);line-height:1.08;
  letter-spacing:-.028em;font-weight:800;margin:0 0 18px}
.apoio{font-size:clamp(1rem,1.25vw,1.14rem);color:var(--tinta-2);max-width:58ch;margin:0}

/* etiqueta de secao com numero editorial */
.etiq{display:flex;align-items:center;gap:14px;margin:0 0 22px;
  font-size:.74rem;font-weight:800;letter-spacing:.22em;text-transform:uppercase;
  color:var(--azul)}
.etiq::before{content:"";width:46px;height:3px;background:var(--verm);flex:none}
.etiq.clara{color:rgba(255,255,255,.72)}

/* ============ topo ============ */
/* Sem backdrop-filter de proposito: o efeito de vidro custa de 15 a 30% de FPS
   em aparelho Android, e a maior parte do nosso trafego chega por celular
   Android no interior. Fundo solido rende igual e nao trava a rolagem. */
/* Cabecalho ACOMPANHA a rolagem, mas nao muda de aparencia no caminho.
   Com position:static o menu sumia assim que a pessoa rolava - em pagina
   longa como a da balanca, quem chegava embaixo ficava sem navegacao.
   O que o usuario queria era o logo grande e PARADO no tamanho, nao o
   cabecalho ausente. Entao: gruda no topo, fundo branco sempre, logo
   sem transicao e sem encolher. */
header{position:sticky;top:0;z-index:80;background:#fff;
  border-bottom:1px solid var(--linha)}

/* ---- CABECALHO QUE ENCOLHE AO ROLAR ---------------------------------
   Numa tela de notebook, um cabecalho de altura cheia come um pedaco do
   texto o tempo todo. Ele encolhe depois dos primeiros 160px de rolagem.

   Feito com animation-timeline: scroll(), que e animacao ligada a rolagem
   SEM JavaScript. Onde o navegador nao souber fazer (Safari e Firefox hoje),
   nada acontece: o cabecalho fica na altura cheia, que e o que ja era. Nao
   quebra em lugar nenhum - so nao encolhe. Por isso nao vale a pena um
   script so para isso.
   -------------------------------------------------------------------- */
@supports (animation-timeline: scroll()) {
  @media (min-width:901px) and (prefers-reduced-motion:no-preference) {
    @keyframes encolhe{
      to{ padding-block:2px; box-shadow:0 2px 14px rgba(11,13,18,.07) }
    }
    header .topo{
      animation:encolhe linear both;
      animation-timeline:scroll();
      animation-range:120px 260px;
    }
  }
}
/* alvo de ancora nao pode nascer atras do cabecalho grudento */
html{scroll-padding-top:112px}
@media(max-width:640px){html{scroll-padding-top:92px}}
header.no-topo{background:transparent;border-bottom-color:transparent}
header.no-topo nav a{color:rgba(255,255,255,.82)}
header.no-topo nav a:hover{color:#fff}
/* Em fundo escuro o logo NAO pode ser invertido por filtro: ele tem fundo
   branco e a letra M nasce desse branco - o filtro transforma tudo num bloco.
   A regra da marca manda plaquinha clara, e e o que fazemos aqui. */
header.no-topo .marca{background:#fff;border-radius:10px;padding:7px 14px;
  display:inline-block;line-height:0}
.topo{display:flex;align-items:center;gap:22px;padding:11px 0}
.marca{display:inline-block;line-height:0;border-radius:10px;flex:0 0 auto}
.marca img{height:92px;width:auto}
/* O gap encolheu de 32 para 22 porque cada item ganhou respiro proprio no
   padding - a distancia entre as PALAVRAS continua parecida, mas agora a
   area clicavel de cada uma e um retangulo inteiro, nao so a altura da letra.
   Antes o alvo tinha 8px de folga vertical; agora tem 20. */
/* MEDIDO em 10-09-2026: a faixa do cabecalho tem 1240px e nao cresce mais.
   Tirando logo (187) e botao (170) sobram 839 para o menu, e com 7 itens ele
   ocupa 837 - cabe com DOIS pixels de folga. Portanto folga lateral no item
   e proibida: cada pixel dela custa 14 (dois lados, sete itens) e derruba o
   menu para a gaveta.
   O alvo de clique cresce so na VERTICAL, que nao custa largura nenhuma:
   era 46x36, agora e 46x48. E o hover vira uma pastilha desenhada por ::before
   com inset negativo - ela transborda o item de proposito, sem ocupar espaco
   no calculo do flex. */
nav{margin-left:auto;display:flex;gap:22px;align-items:center}
nav a{color:var(--tinta-2);text-decoration:none;font-size:.94rem;font-weight:600;
  position:relative;padding:14px 0;white-space:nowrap;
  transition:color .18s}
/* A PASTILHA.
   Desenhada por ::before com inset NEGATIVO nas laterais: ela transborda o
   item de proposito e por isso NAO entra na conta de largura do flex. E o que
   permite ter pastilha num menu que cabia com 2px de folga. Com gap de 22px e
   9px de transbordo de cada lado, sobram 4px entre pastilhas vizinhas.

   A cor da pagina atual escurece 62%: com a cor cheia, letra branca reprova em
   contraste em 7 dos 10 assuntos - o dourado da metrologia da 1,96, e o minimo
   e 4,5. A 62% o pior caso vira 4,74 e o melhor 12,00, e a cor continua sendo
   reconhecivel como a do assunto. */
nav a::before{content:"";position:absolute;inset:4px -9px;border-radius:8px;
  background:transparent;transition:background .18s;z-index:-1}
nav a:hover::before{background:var(--fundo-2)}
nav a.atual::before{background:color-mix(in srgb,var(--acento,var(--verm)) 62%,#000000)}
nav a.atual,nav a.atual:hover{color:#FFFFFF}
nav a.atual:hover::before{background:color-mix(in srgb,var(--acento,var(--verm)) 54%,#000000)}

/* A marca do item onde a pessoa esta: filete embaixo, na cor do assunto da
   pagina. No hover ele cresce da esquerda para a direita. */
/* O filete que existia aqui saiu: pastilha e filete juntos brigam. Quem
   marca a pagina atual agora e a pastilha cheia. */

/* Fundo suave no hover - e o que sinaliza "isto e clicavel" antes do clique,
   e o padrao que se usa hoje. Cor de fundo, nao sombra: sombra em item de
   menu deixa o cabecalho sujo. */
nav a:hover{background:var(--fundo-2)}
nav a:hover{color:var(--azul)}
nav a:focus-visible{outline:2px solid var(--azul);outline-offset:2px}

/* Em fundo escuro o realce nao pode ser o fundo-2 claro */
header.no-topo nav a:hover::before{background:rgba(255,255,255,.14)}
nav a{isolation:isolate}
/* ---- Submenu de "Nossos parceiros" -------------------------------------
   "Relogio de ponto" saiu do primeiro nivel e vive aqui dentro, junto das
   tres paginas de fabricante. Sem JavaScript: :hover atende o mouse e
   :focus-within atende quem navega por TAB - o teclado abre o mesmo painel.
   So vale no menu de cima. Abaixo de 1300px quem manda e a gaveta, que
   lista os mesmos quatro itens indentados, sempre visiveis.
   O padding vertical do grupo e proposital: e a ponte que o mouse atravessa
   ate o painel. Sem ela o menu fecha no caminho. */
.tem-sub{position:relative;display:flex;align-items:center;gap:6px;
  padding-block:14px;margin-block:-14px}
.tem-sub::after{content:"";width:5px;height:5px;flex:0 0 auto;
  border-right:1.6px solid currentColor;border-bottom:1.6px solid currentColor;
  transform:rotate(45deg) translate(-1px,-1px);opacity:.5;
  transition:transform .18s ease}
.tem-sub:hover::after,.tem-sub:focus-within::after{opacity:.9;
  transform:rotate(225deg) translate(-2px,-2px)}
.tem-sub > .sub{position:absolute;top:100%;left:-16px;min-width:212px;
  background:#fff;border:1px solid var(--linha);border-radius:3px;
  display:flex;flex-direction:column;padding:7px 0;
  opacity:0;visibility:hidden;transform:translateY(-5px);
  transition:opacity .18s ease,transform .18s ease,visibility .18s;
  box-shadow:0 20px 44px rgba(11,13,18,.15);z-index:90}
.tem-sub:hover > .sub,.tem-sub:focus-within > .sub{
  opacity:1;visibility:visible;transform:none}
.tem-sub > .sub a{padding:9px 18px;font-size:.9rem;white-space:nowrap;
  color:var(--tinta-2)}
/* o fio vermelho e do menu de cima; dentro do painel ele so polui */
.tem-sub > .sub a::after{display:none}
.tem-sub > .sub a:hover,.tem-sub > .sub a.aqui{background:var(--fundo-2);color:var(--azul)}
/* em fundo escuro o painel continua claro - senao o texto some */
header.no-topo .tem-sub > .sub a{color:var(--tinta-2)}

/* Na gaveta os quatro ficam abertos: menu que abre e fecha dentro de menu
   que abre e fecha e um toque a mais para chegar no mesmo lugar. */
.menu-lista .sub-item{padding-left:26px;font-size:.93rem;opacity:.82;
  position:relative}
.menu-lista .sub-item::before{content:"";position:absolute;left:12px;top:50%;
  width:7px;height:1px;background:currentColor;opacity:.5}
.menu-lista .sub-item.aqui{opacity:1;color:var(--azul)}

/* A faixa do cabecalho para de crescer em 1240px, entao acima disso o espaco
   NAO melhora: sobram sempre 839px para o menu, tirando logo e botao. Com 7
   itens, cada pixel de folga lateral custa 14 (dois lados, sete itens). Por
   isso a folga aperta junto com o gap conforme a tela diminui - o alvo de
   clique continua alto (48px), que e o que importa para o dedo e para o mouse.
   Medido em 10-09-2026: com 12px de folga o cabecalho transbordava 132px. */
@media(max-width:1560px){nav{gap:20px}}
@media(max-width:1380px){nav{gap:16px}}
@media(max-width:1300px){nav{display:none}}
@media(max-width:560px){.marca img{height:64px}}

/* ============ botoes ============ */
.btn{display:inline-flex;align-items:center;gap:10px;text-decoration:none;
  font-weight:700;padding:15px 28px;border-radius:10px;font-size:.98rem;
  transition:.2s;border:2px solid transparent}
/* Branco sobre o verde do WhatsApp da 1,98:1 - o pior contraste do site, e
   ele estava em TODA pagina, no botao mais importante. O verde fica (e ele
   que faz a pessoa reconhecer o botao de longe); a letra escurece: 7,98:1.
   Mesma solucao ja usada no cabecalho das tabelas. */
.btn-zap{background:var(--zap);color:#06281A}
.btn-zap:hover{transform:translateY(-2px);box-shadow:0 12px 28px rgba(37,211,102,.34)}
.btn-luz{background:#fff;color:var(--azul)}
.btn-luz:hover{transform:translateY(-2px);box-shadow:0 12px 30px rgba(0,0,0,.22)}
.btn-borda{border-color:rgba(255,255,255,.32);color:#fff}
.btn-borda:hover{border-color:#fff;background:rgba(255,255,255,.08)}
.btn-azul{background:var(--azul);color:#fff}
.btn-azul:hover{background:var(--azul-cla);transform:translateY(-2px)}
.acoes{display:flex;gap:14px;flex-wrap:wrap;margin-top:34px}

/* ============ HERO escuro ============ */
/* O hero sobe para passar por baixo do cabecalho transparente. A medida vem
   de --altura-topo, nao de um numero chutado: o cabecalho muda de altura
   conforme a largura da tela, e o -71px fixo cortava o topo em telas baixas. */
.capa-forte{position:relative;background:var(--azul-esc);color:#fff;overflow:hidden;
  padding:clamp(112px,14vh,150px) 0 clamp(72px,9vh,108px);margin-top:calc(var(--altura-topo,82px) * -1)}
/* malha de luz: profundidade sem nenhuma imagem */
.capa-forte::before{content:"";position:absolute;inset:0;
  background:
    radial-gradient(900px 520px at 12% -10%, rgba(58,52,181,.55), transparent 62%),
    radial-gradient(760px 460px at 88% 8%, rgba(255,2,25,.16), transparent 60%),
    radial-gradient(1000px 700px at 60% 120%, rgba(36,31,134,.5), transparent 66%)}
/* trama tecnica discreta */
.capa-forte::after{content:"";position:absolute;inset:0;opacity:.05;
  background-image:linear-gradient(rgba(255,255,255,.7) 1px,transparent 1px),
                   linear-gradient(90deg,rgba(255,255,255,.7) 1px,transparent 1px);
  background-size:64px 64px}
.capa-forte .wrap{position:relative;z-index:2}

.selo-topo{display:inline-flex;align-items:center;gap:12px;
  background:rgba(255,255,255,.09);border:1px solid rgba(255,255,255,.2);
  border-radius:999px;padding:9px 20px;font-size:.83rem;font-weight:600;
  color:rgba(255,255,255,.92);margin-bottom:30px}
.selo-topo b{color:#fff;font-weight:800}
.ponto{width:8px;height:8px;border-radius:50%;background:var(--verm);flex:none;
  box-shadow:0 0 0 4px rgba(255,2,25,.22)}

.capa-forte h1{font-size:clamp(2.5rem,6.4vw,4.7rem);line-height:1.02;
  letter-spacing:-.038em;font-weight:800;margin:0 0 24px;max-width:17ch}
.capa-forte h1 em{font-style:normal;color:var(--verm-cla)}
.capa-forte .chamada{font-size:clamp(1.04rem,1.5vw,1.24rem);
  color:rgba(255,255,255,.76);max-width:56ch;margin:0}

/* ============ faixa de numeros ============ */
.numeros{position:relative;z-index:3;margin-top:-56px}
.numeros-grade{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;
  background:var(--linha);border:1px solid var(--linha);border-radius:16px;
  overflow:hidden;box-shadow:0 26px 60px rgba(14,16,22,.16)}
.num{background:#fff;padding:30px 26px;transition:.2s}
.num:hover{background:var(--fundo-2)}
.num b{display:block;font-size:clamp(1.7rem,2.7vw,2.3rem);font-weight:800;
  color:var(--azul);letter-spacing:-.035em;line-height:1}
.num span{display:block;font-size:.87rem;color:var(--tinta-2);margin-top:9px;
  line-height:1.45}
@media(max-width:900px){.numeros-grade{grid-template-columns:repeat(2,1fr)}}
@media(max-width:460px){.numeros-grade{grid-template-columns:1fr}}

/* ============ cartoes de servico ============ */
/* min() no minmax: sem ele, um cartao de 310px numa tela de 320px estoura a
   lateral - medido em 320px, que e o piso real de celular pequeno. */
  .tres{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,310px),1fr));
    gap:26px}
.servico{position:relative;background:#fff;border:1px solid var(--linha);
  border-radius:18px;padding:38px 32px 34px;overflow:hidden;transition:.25s}
.servico::before{content:"";position:absolute;top:0;left:0;right:0;height:4px;
  background:var(--verm);transform:scaleX(0);transform-origin:left;transition:.3s}
.servico:hover{transform:translateY(-6px);border-color:transparent;
  box-shadow:0 24px 54px rgba(14,16,22,.13)}
.servico:hover::before{transform:scaleX(1)}
.servico .n{font-size:.76rem;font-weight:800;letter-spacing:.2em;color:var(--tinta-3);
  display:block;margin-bottom:16px}
.servico h3{font-size:1.34rem;font-weight:800;color:var(--tinta);margin:0 0 12px;
  letter-spacing:-.02em}
.servico p{margin:0 0 12px;color:var(--tinta-2);font-size:.96rem}
.servico .onde{display:inline-block;margin-top:8px;font-size:.82rem;font-weight:700;
  color:var(--azul);background:var(--fundo-2);border-radius:7px;padding:7px 13px}

/* ============ bloco de destaque escuro ============ */
.escuro{background:var(--azul-esc);color:#fff;position:relative;overflow:hidden}
.escuro::before{content:"";position:absolute;inset:0;
  background:radial-gradient(820px 460px at 82% -18%,rgba(58,52,181,.5),transparent 62%)}
.escuro .wrap{position:relative;z-index:2}
.escuro .titulo{color:#fff}
.escuro .apoio{color:rgba(255,255,255,.74)}

/* citacao de destaque - o argumento honesto da casa */
.frase{border-left:4px solid var(--verm);padding:6px 0 6px 28px;margin:34px 0 0;
  max-width:60ch}
.frase p{margin:0;font-size:clamp(1.08rem,1.6vw,1.3rem);line-height:1.5;
  color:#fff;font-weight:600;letter-spacing:-.012em}
.frase small{display:block;margin-top:12px;font-size:.86rem;font-weight:400;
  color:rgba(255,255,255,.6)}

/* ============ cartoes de conteudo ============ */
.conteudos{display:grid;grid-template-columns:repeat(auto-fit,minmax(258px,1fr));gap:20px}
.leitura{display:block;text-decoration:none;background:#fff;border:1px solid var(--linha);
  border-radius:16px;padding:30px 26px;transition:.25s;position:relative}
.leitura:hover{transform:translateY(-5px);box-shadow:0 20px 46px rgba(14,16,22,.12);
  border-color:var(--azul)}
.leitura h3{font-size:1.1rem;font-weight:800;color:var(--tinta);margin:0 0 9px;
  letter-spacing:-.015em}
.leitura p{margin:0;font-size:.92rem;color:var(--tinta-2);line-height:1.58}
.leitura .seta{display:inline-block;margin-top:18px;font-weight:800;color:var(--azul);
  font-size:.9rem;transition:.25s}
.leitura:hover .seta{transform:translateX(5px)}

/* ============ marcas ============ */
.marcas-linha{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));
  gap:22px;margin-top:14px}
.marca-cx{border:1px solid var(--linha);border-radius:14px;padding:26px 24px;
  background:#fff;transition:.2s}
.marca-cx:hover{border-color:var(--azul);box-shadow:0 14px 34px rgba(14,16,22,.09)}
.marca-cx img{height:34px;width:auto;margin-bottom:14px}
.marca-cx b{display:block;font-size:1.06rem;color:var(--azul);font-weight:800;
  margin-bottom:6px;letter-spacing:-.015em}
.marca-cx span{display:block;font-size:.9rem;color:var(--tinta-2);line-height:1.55}

/* ============ passos ============ */
.trilha{counter-reset:t;display:grid;gap:0;list-style:none;padding:0;margin:0;
  border-left:2px solid var(--linha);margin-left:20px}
.trilha li{counter-increment:t;position:relative;padding:0 0 32px 40px}
.trilha li:last-child{padding-bottom:0}
.trilha li::before{content:counter(t);position:absolute;left:-21px;top:-2px;
  width:40px;height:40px;border-radius:50%;background:var(--azul);color:#fff;
  display:grid;place-items:center;font-weight:800;font-size:.98rem;
  border:4px solid #fff}
.trilha b{display:block;font-size:1.08rem;font-weight:800;margin-bottom:5px;
  letter-spacing:-.015em}
.trilha span{color:var(--tinta-2);font-size:.95rem}

/* ============ regiao ============ */
.cidades{display:flex;flex-wrap:wrap;gap:9px}
/* O chip nasce para fundo CLARO. A versao branca vive so dentro de .escuro.
   Estava ao contrario: branco 85% sobre o bege da pele da 1,21:1 - o texto
   some. Sobre a faixa azul o mesmo branco da 9,70:1, e por isso passava
   despercebido em quem so olhava a home. */
.cidade{background:var(--fundo);border:1px solid var(--linha);
  border-radius:8px;padding:9px 15px;font-size:.9rem;color:var(--tinta-2)}
.escuro .cidade{background:rgba(255,255,255,.07);border-color:rgba(255,255,255,.15);
  color:rgba(255,255,255,.85)}
.uf{font-size:.75rem;font-weight:800;letter-spacing:.2em;text-transform:uppercase;
  color:var(--verm-cla);margin:0 0 12px}

/* ============ contato ============ */
.contato-grade{display:grid;grid-template-columns:1.15fr .85fr;gap:46px;align-items:start}
@media(max-width:900px){.contato-grade{grid-template-columns:1fr;gap:34px}}
.dado{border-top:1px solid var(--linha);padding:20px 0}
.dado:first-of-type{border-top:0;padding-top:0}
.dado b{display:block;font-size:.75rem;letter-spacing:.16em;text-transform:uppercase;
  color:var(--tinta-3);margin-bottom:7px;font-weight:800}
.dado p{margin:0;font-size:1.02rem;line-height:1.65}
.dado a{color:var(--tinta);text-decoration:none;font-weight:600}
.dado a:hover{color:var(--azul)}
.telefone-grande{display:block;text-decoration:none;background:var(--azul);color:#fff;
  border-radius:16px;padding:30px 32px;transition:.25s}
.telefone-grande:hover{background:var(--azul-cla);transform:translateY(-3px);
  box-shadow:0 20px 44px rgba(36,31,134,.3)}
.telefone-grande small{display:block;font-size:.75rem;letter-spacing:.16em;
  text-transform:uppercase;color:var(--verm-cla);font-weight:800;margin-bottom:8px}
.telefone-grande strong{font-size:clamp(1.5rem,2.6vw,1.95rem);letter-spacing:-.02em;
  display:block}
.telefone-grande span{display:block;margin-top:10px;font-size:.9rem;
  color:rgba(255,255,255,.72)}

/* ============ rodape ============ */
.rodape{background:#08090F;color:rgba(255,255,255,.78);padding:64px 0 28px;
  font-size:.93rem}
.rodape-cols{display:grid;grid-template-columns:1.4fr 1fr 1fr;gap:44px}
@media(max-width:820px){.rodape-cols{grid-template-columns:1fr;gap:30px}}
.rodape h4{color:#fff;font-size:.75rem;letter-spacing:.18em;text-transform:uppercase;
  margin:0 0 15px;font-weight:800}
.rodape p{margin:0;line-height:1.9}
.rodape a{color:rgba(255,255,255,.92);text-decoration:none}
.rodape a:hover{color:#fff}
/* Contraste: branco a 40% sobre #08090F da menos de 5:1 e some na tela de
   celular no balcao, com luz batendo. A 76% passa de 9:1. O tamanho tambem
   subiu - e a linha que carrega marca registrada e ano. */
.rodape-base{border-top:1px solid rgba(255,255,255,.16);margin-top:44px;padding-top:22px;
  font-size:.88rem;line-height:1.7;color:rgba(255,255,255,.76);
  display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap}

/* bloco de marca MASTER sobre escuro */
.master-bloco{display:flex;align-items:center;gap:16px;margin-bottom:26px}
.master-bloco .placa{background:#fff;border-radius:12px;padding:10px 16px}
.master-bloco .placa img{height:36px;width:auto}
.master-bloco .nm{font-weight:800;letter-spacing:.22em;color:#fff;font-size:1.02rem}
.master-bloco .ds{font-size:.82rem;color:rgba(255,255,255,.65)}

/* ============ zap flutuante ============ */
.zap-fixo{position:fixed;right:20px;bottom:20px;z-index:90;background:var(--zap);
  color:#06281A;   /* branco no verde do zap da 1,98 - ver .btn-zap */border-radius:999px;height:58px;display:flex;align-items:center;
  gap:11px;padding:0 24px 0 18px;text-decoration:none;font-weight:700;font-size:.95rem;
  box-shadow:0 12px 30px rgba(37,211,102,.42);transition:.25s}
.zap-fixo:hover{transform:translateY(-3px);box-shadow:0 18px 40px rgba(37,211,102,.5)}
.zap-fixo svg{flex:none}
@media(max-width:560px){.zap-fixo{padding:0;width:58px;justify-content:center}
  .zap-fixo .txt{display:none}}

/* ============ BARRA DO POLEGAR (so no celular) ============
   Por que existe: o site e usado principalmente no celular, e num aparelho de
   6 polegadas o canto de cima - onde mora o menu sanduiche - e o ponto mais
   dificil de alcancar com uma mao so. A navegacao principal desce para onde o
   polegar ja esta.

   Sao 4 destinos, nao mais: a pesquisa de navegacao movel converge em 3 a 5.
   Acima disso os alvos ficam estreitos demais para o dedo.

   O botao do WhatsApp entrou aqui em vez de ficar boiando no canto: dois
   elementos fixos no mesmo canto se atropelam, e a acao mais importante
   merece estar na barra, nao escondida atras dela.

   Feito so com CSS e HTML - sem script. Para desligar, basta apagar este
   bloco: o menu sanduiche continua funcionando sozinho.
   ------------------------------------------------------------------- */
.barra-polegar{display:none}

@media(max-width:900px){
  .barra-polegar{
    display:grid;grid-template-columns:repeat(4,1fr);
    position:fixed;left:0;right:0;bottom:0;z-index:95;
    background:#fff;border-top:1px solid var(--linha);
    /* respeita a faixa do gesto de voltar no iPhone e nos Android novos */
    padding-bottom:env(safe-area-inset-bottom,0);
    box-shadow:0 -6px 20px rgba(11,13,18,.10)}

  .barra-polegar a{
    display:flex;flex-direction:column;align-items:center;justify-content:center;
    gap:3px;text-decoration:none;color:var(--tinta-2);
    font-size:.68rem;font-weight:700;letter-spacing:.01em;
    /* 56px: o minimo confortavel de alvo de toque e 48px */
    min-height:56px;padding:7px 4px 6px;line-height:1.15;text-align:center}

  .barra-polegar svg{width:21px;height:21px;stroke:currentColor;fill:none;
    stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round}

  /* onde a pessoa esta agora - o trilho em cima repete o vermelho do menu */
  .barra-polegar a.aqui{color:var(--azul)}
  .barra-polegar a.aqui::before{content:"";position:absolute;top:0;
    width:34px;height:3px;border-radius:0 0 3px 3px;background:var(--verm)}
  .barra-polegar a{position:relative}

  .barra-polegar a.zap{color:#06281A;background:var(--zap)}
  .barra-polegar a.zap svg{stroke-width:0;fill:currentColor}

  /* o conteudo nao pode terminar embaixo da barra */
  body{padding-bottom:calc(58px + env(safe-area-inset-bottom,0))}

  /* o botao que boiava no canto sai: a barra ja leva o WhatsApp */
  .zap-fixo{display:none}
}

/* ============ revelar ao rolar ============ */
.revela{opacity:0;transform:translateY(24px);transition:opacity .6s,transform .6s}
.revela.visivel{opacity:1;transform:none}
@media(prefers-reduced-motion:reduce){
  .revela{opacity:1;transform:none;transition:none}
  html{scroll-behavior:auto}
}

  /* ============ Onde atendemos: lista dentro de um botao ============
     A lista de 36 cidades tomava a secao inteira. Fica recolhida atras de um
     botao, em <details> puro - sem JavaScript, e o conteudo continua no HTML,
     que e o que faz o site aparecer na busca das cidades vizinhas. */
  .regioes{margin-top:34px}
  .regioes summary{list-style:none;cursor:pointer;display:inline-flex;
    align-items:center;gap:12px;font-weight:700;font-size:.98rem;color:#fff;
    background:rgba(255,255,255,.09);border:2px solid rgba(255,255,255,.28);
    border-radius:10px;padding:15px 26px;transition:.2s;user-select:none}
  .regioes summary::-webkit-details-marker{display:none}
  .regioes summary:hover{background:rgba(255,255,255,.16);border-color:#fff}
  .regioes summary .cruz{display:inline-block;width:16px;height:16px;flex:none;
    position:relative;transition:transform .25s}
  .regioes summary .cruz::before,.regioes summary .cruz::after{content:"";
    position:absolute;background:var(--verm-cla);border-radius:2px}
  .regioes summary .cruz::before{left:0;right:0;top:7px;height:2px}
  .regioes summary .cruz::after{top:0;bottom:0;left:7px;width:2px;transition:opacity .25s}
  .regioes[open] summary .cruz{transform:rotate(90deg)}
  .regioes[open] summary .cruz::after{opacity:0}
  .regioes summary .qtd{font-weight:400;color:rgba(255,255,255,.62);font-size:.9rem}
  .regioes-corpo{padding-top:30px}

  /* ============ Faixa rolante (marquee) ============
     Uso aprovado pela pesquisa: banda DECORATIVA entre secoes, com as marcas
     representadas. Nao e conteudo principal, e nao e carrossel de hero - esse
     derruba a interacao de 43% para 2%.
     - anima com transform, que roda na GPU e nao trava no Android
     - a copia do trilho leva aria-hidden para o leitor de tela nao repetir
     - para no hover e desliga em prefers-reduced-motion */
  .faixa-rolante{background:var(--azul-esc);color:#fff;padding:22px 0;overflow:hidden;
    position:relative;border-block:1px solid rgba(255,255,255,.1)}
  .faixa-rolante::before,.faixa-rolante::after{content:"";position:absolute;top:0;bottom:0;
    width:110px;z-index:2;pointer-events:none}
  .faixa-rolante::before{left:0;background:linear-gradient(90deg,var(--azul-esc),transparent)}
  .faixa-rolante::after{right:0;background:linear-gradient(270deg,var(--azul-esc),transparent)}
  .trilho{display:flex;width:max-content;animation:desliza 38s linear infinite}
  .faixa-rolante:hover .trilho{animation-play-state:paused}
  .trilho .grupo{display:flex;align-items:center;gap:52px;padding-right:52px}
  .trilho .item{display:inline-flex;align-items:center;gap:12px;white-space:nowrap;
    font-size:1.02rem;font-weight:700;color:rgba(255,255,255,.9);letter-spacing:-.01em}
  .trilho .item img{height:26px;width:auto;opacity:.95}
  .trilho .sep{width:7px;height:7px;border-radius:50%;background:var(--verm);flex:none}
  .trilho .leve{font-weight:500;color:rgba(255,255,255,.62);font-size:.95rem}
  @keyframes desliza{from{transform:translateX(0)} to{transform:translateX(-50%)}}
  @media(prefers-reduced-motion:reduce){
    .trilho{animation:none;flex-wrap:wrap;width:auto;justify-content:center}
  }

  /* ============ Hero em duas colunas + carrossel de apoio ============
     A manchete e os botoes ficam PARADOS a esquerda: e o que converte.
     O carrossel ocupa a direita como apoio - nunca substitui a mensagem.
     Para no hover e no foco do teclado, e desliga em prefers-reduced-motion. */
  .capa-grade{display:grid;grid-template-columns:1.08fr .92fr;gap:56px;align-items:center}
  @media(max-width:980px){.capa-grade{grid-template-columns:1fr;gap:44px}}

  .vitrine{background:rgba(255,255,255,.055);border:1px solid rgba(255,255,255,.16);
    border-radius:20px;padding:34px 32px 26px;position:relative;overflow:hidden}
  .vitrine::before{content:"";position:absolute;top:0;left:0;right:0;height:3px;
    background:linear-gradient(90deg,var(--verm),transparent)}

  
  .slide{position:absolute;inset:0;opacity:0;visibility:hidden;
    transform:translateY(12px);transition:opacity .5s,transform .5s,visibility .5s}
  .slide.ativo{opacity:1;visibility:visible;transform:none;position:relative}
  .slide .marcador{display:inline-block;font-size:.72rem;font-weight:800;
    letter-spacing:.2em;color:var(--verm-cla);margin-bottom:14px}
  .slide h3{font-size:1.48rem;font-weight:800;color:#fff;margin:0 0 12px;
    letter-spacing:-.022em;line-height:1.16}
  .slide p{margin:0 0 16px;color:rgba(255,255,255,.74);font-size:.97rem;line-height:1.62}
  .slide ul{list-style:none;margin:0;padding:0}
  .slide li{display:flex;gap:11px;padding:8px 0;font-size:.92rem;
    color:rgba(255,255,255,.86);align-items:flex-start}
  .slide li::before{content:"";flex:none;width:6px;height:6px;border-radius:50%;
    background:var(--verm);margin-top:8px}

  .controles{display:flex;align-items:center;gap:10px;margin-top:22px;
    padding-top:20px;border-top:1px solid rgba(255,255,255,.13)}
  .bolinha{width:34px;height:5px;border-radius:99px;border:0;padding:0;cursor:pointer;
    background:rgba(255,255,255,.24);transition:.25s}
  .bolinha:hover{background:rgba(255,255,255,.5)}
  .bolinha[aria-selected="true"]{background:var(--verm);width:48px}
  .bolinha:focus-visible{outline:2px solid #fff;outline-offset:3px}
  .contador{margin-left:auto;font-size:.82rem;color:rgba(255,255,255,.5);
    font-variant-numeric:tabular-nums}

  @media(prefers-reduced-motion:reduce){
    .slide{transition:none}
  }

  /* ---- blocos de sinal clicaveis ---- */
  .sinal-bloco{cursor:pointer}
  .sinal-bloco:hover h3{color:var(--azul)}
  .sinal-bloco:focus-visible{outline:2px solid var(--azul);outline-offset:6px;
    border-radius:8px}
  .sinal-bloco .toque{display:block;margin-top:9px;font-size:.75rem;font-weight:700;
    letter-spacing:.1em;text-transform:uppercase;color:var(--tinta-3);opacity:0;
    transition:.2s}
  .sinal-bloco:hover .toque,.sinal-bloco.focado .toque{opacity:1;color:var(--verm)}

  /* ---- etiqueta impressa: entra no lugar do visor quando o defeito
          e de IMPRESSAO, nao de pesagem ---- */
  .etiqueta{background:#FBFBF7;border-radius:6px;padding:16px 18px 14px;
    box-shadow:0 22px 48px rgba(0,0,0,.4);border:1px solid rgba(0,0,0,.12);
    font-family:"Consolas","SF Mono",Menlo,monospace;color:#15170F;
    max-width:280px;margin:0 auto;position:relative}
  .etiqueta::after{content:"";position:absolute;left:0;right:0;bottom:-7px;height:7px;
    background:repeating-linear-gradient(90deg,#FBFBF7 0 7px,transparent 7px 14px)}
  .etiqueta .topo-et{font-size:.66rem;font-weight:700;letter-spacing:.06em;
    text-transform:uppercase;border-bottom:1px dashed rgba(0,0,0,.28);
    padding-bottom:7px;margin-bottom:9px}
  .etiqueta .linha{display:flex;justify-content:space-between;font-size:.74rem;
    padding:2px 0}
  .etiqueta .linha b{font-weight:700}
  .etiqueta .total{border-top:1px dashed rgba(0,0,0,.28);margin-top:8px;padding-top:8px;
    font-size:1.02rem;font-weight:700}
  .etiqueta .barras{display:flex;gap:1.5px;align-items:flex-end;height:34px;
    margin-top:11px}
  .etiqueta .barras i{background:#15170F;display:block;width:2px;height:100%}
  .etiqueta .barras i:nth-child(3n){width:1px}
  .etiqueta .barras i:nth-child(4n){width:3px}
  .etiqueta .barras i:nth-child(5n){height:78%}
  .etiqueta .cod{font-size:.64rem;letter-spacing:.22em;text-align:center;
    margin-top:5px;color:rgba(0,0,0,.6)}

  /* estado com defeito: impressao fraca e falhada */
  .etiqueta.falha{color:rgba(21,23,15,.42)}
  .etiqueta.falha .barras i{background:rgba(21,23,15,.34)}
  .etiqueta.falha .barras i:nth-child(7n){opacity:.12}
  .etiqueta.falha::before{content:"";position:absolute;left:0;right:0;top:38%;
    height:9px;background:#FBFBF7;opacity:.85;pointer-events:none}

  /* ===================================================================
     COMPONENTES DAS PAGINAS INTERNAS
     Portados para ca para o site inteiro rodar em UM arquivo de estilo.
     Antes, metrologia/perguntas/fabricantes usavam estilo.css e pareciam
     outro site ao lado da home.
     Tudo aqui e pensado para celular primeiro - e de onde vem o trafego.
     =================================================================== */

  /* capa das paginas internas */
  .capa{position:relative;background:var(--azul-esc);color:#fff;overflow:hidden;
    padding:clamp(46px,7vh,72px) 0 clamp(42px,6vh,60px)}
  .capa::before{content:"";position:absolute;inset:0;
    background:radial-gradient(760px 420px at 86% -16%,rgba(58,52,181,.5),transparent 62%)}
  .capa .wrap{position:relative;z-index:2}
  .capa h1{font-size:clamp(1.75rem,4.4vw,2.8rem);line-height:1.1;margin:0 0 14px;
    font-weight:800;max-width:20ch;letter-spacing:-.028em}
  .capa p{font-size:clamp(.98rem,1.3vw,1.12rem);color:rgba(255,255,255,.78);
    max-width:58ch;margin:0}
  .capa .rotulo{color:rgba(255,255,255,.72)}

  /* rotulo e subtitulo */
  .rotulo{display:flex;align-items:center;gap:13px;margin:0 0 18px;
    font-size:.72rem;font-weight:800;letter-spacing:.2em;text-transform:uppercase;
    color:var(--azul)}
  .rotulo::before{content:"";width:40px;height:3px;background:var(--verm);flex:none}
  section > .wrap > h2{font-size:clamp(1.6rem,3.1vw,2.5rem);line-height:1.1;
    letter-spacing:-.026em;font-weight:800;margin:0 0 16px}
  .sub-sec{color:var(--tinta-2);max-width:60ch;margin:0 0 36px;
    font-size:clamp(.98rem,1.2vw,1.08rem)}
  section{padding:clamp(56px,8vh,96px) 0}

  /* texto corrido */
  .prosa{max-width:70ch}
  .prosa h3{font-size:1.18rem;color:var(--azul);margin:32px 0 10px;font-weight:800;
    letter-spacing:-.015em}
  .prosa h3:first-child{margin-top:0}
  .prosa p{margin:0 0 15px;color:var(--tinta-2)}
  .prosa p strong,.prosa li strong{color:var(--tinta)}
  .prosa ul{margin:0 0 18px;padding-left:20px;color:var(--tinta-2)}
  .prosa li{margin-bottom:8px}

  /* caixa de aviso */
  .nota{border-left:4px solid var(--azul);background:var(--fundo-2);
    border-radius:0 12px 12px 0;padding:20px 24px;margin:26px 0}
  .nota.atencao{border-left-color:var(--verm)}
  .nota b{display:block;color:var(--azul);margin-bottom:6px;font-size:.98rem}
  .nota.atencao b{color:var(--verm)}
  .nota p{margin:0;font-size:.94rem;color:var(--tinta-2);line-height:1.66}
  .nota p + p{margin-top:11px}

  /* tabela vira cartao no celular */
  .tabela-rolante{overflow-x:auto}
  .tab{width:100%;border-collapse:collapse;font-size:.94rem;margin:22px 0}
  .tab th,.tab td{text-align:left;padding:15px 16px;
    border-bottom:1px solid var(--linha);vertical-align:top}
  .tab th{background:var(--fundo-2);color:var(--azul);font-size:.72rem;
    letter-spacing:.12em;text-transform:uppercase;font-weight:800}
  .tab td:first-child{font-weight:700;color:var(--tinta)}
  .tab tr:last-child td{border-bottom:0}
  @media(max-width:760px){
    .tab,.tab thead,.tab tbody,.tab tr,.tab th,.tab td{display:block;width:100%}
    .tab thead{display:none}
    .tab tr{background:#fff;border:1px solid var(--linha);
      border-left:4px solid var(--azul);border-radius:0 12px 12px 0;
      padding:4px 20px 14px;margin-bottom:14px}
    .tab td{border-bottom:0;padding:10px 0 0}
    .tab td:first-child{font-size:1.06rem;color:var(--azul);padding-top:14px}
    .tab td[data-rotulo]::before{content:attr(data-rotulo);display:block;
      font-size:.68rem;letter-spacing:.13em;text-transform:uppercase;
      color:var(--tinta-3);font-weight:800;margin-bottom:4px}
  }

  /* cartoes genericos - minmax com min() evita estouro no celular */
  .grade{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,270px),1fr));
    gap:22px}
  .card{border:1px solid var(--linha);border-radius:16px;padding:28px 26px;
    background:#fff;transition:.25s}
  .card:hover{border-color:var(--azul);box-shadow:0 16px 40px rgba(14,16,22,.1)}
  .card h3{margin:0 0 9px;font-size:1.1rem;color:var(--tinta);font-weight:800}
  .card p{margin:0;color:var(--tinta-2);font-size:.95rem}

  /* passos numerados */
  .passos{counter-reset:p;display:grid;gap:18px;padding:0;list-style:none;margin:0}
  .passos li{counter-increment:p;display:flex;gap:16px;align-items:flex-start}
  .passos li::before{content:counter(p);flex:none;width:36px;height:36px;
    border-radius:50%;background:var(--azul);color:#fff;display:grid;
    place-items:center;font-weight:800;font-size:.95rem}
  .passos b{display:block;margin-bottom:3px}
  .passos span{color:var(--tinta-2);font-size:.95rem}

  /* listas faca / evite */
  .duas-colunas{display:grid;grid-template-columns:1fr 1fr;gap:26px}
  @media(max-width:820px){.duas-colunas{grid-template-columns:1fr}}
  .lista-marcada{list-style:none;padding:0;margin:0}
  .lista-marcada li{display:flex;gap:12px;padding:12px 0;
    border-top:1px solid var(--linha);font-size:.94rem;color:var(--tinta-2);
    line-height:1.6}
  .lista-marcada li:first-child{border-top:0}
  .lista-marcada li::before{flex:none;font-weight:800;font-size:1rem;line-height:1.5}
  .lista-sim li::before{content:"\2713";color:#12855C}
  .lista-nao li::before{content:"\00D7";color:var(--verm)}

  /* perguntas frequentes */
  .faq{border:1px solid var(--linha);border-radius:16px;overflow:hidden;background:#fff}
  .faq details{border-top:1px solid var(--linha)}
  .faq details:first-child{border-top:0}
  .faq summary{cursor:pointer;padding:19px 22px;font-weight:700;color:var(--tinta);
    font-size:1rem;list-style:none;display:flex;gap:14px;align-items:flex-start}
  .faq summary::-webkit-details-marker{display:none}
  .faq summary::before{content:"+";flex:none;color:var(--verm);font-weight:800;
    font-size:1.2rem;line-height:1.35}
  .faq details[open] summary::before{content:"\2212"}
  .faq summary:hover{background:var(--fundo-2)}
  .faq .resposta{padding:0 22px 22px 48px;color:var(--tinta-2);font-size:.95rem;
    line-height:1.68}
  .faq .resposta p{margin:0 0 12px}
  .faq .resposta p:last-child{margin-bottom:0}
  @media(max-width:520px){.faq .resposta{padding-left:22px}}

  /* fabricante: em tela larga vira duas colunas.
     Antes o texto ficava travado em 72 caracteres dentro de um cartao
     que ocupava a tela toda - sobrava metade da largura em branco. */
  .fab{border:1px solid var(--linha);border-radius:18px;padding:34px 32px;
    background:#fff;margin-bottom:24px}
  @media(max-width:560px){.fab{padding:26px 22px}}
  .fab-topo{display:flex;align-items:center;gap:18px;flex-wrap:wrap;
    margin-bottom:22px;padding-bottom:20px;border-bottom:1px solid var(--linha)}
  .fab-logo{height:40px;width:auto}
  .fab-nome{font-size:1.34rem;font-weight:800;color:var(--azul);letter-spacing:-.02em}
  .fab-papel{margin-left:auto;font-size:.74rem;letter-spacing:.14em;
    text-transform:uppercase;color:var(--tinta-3);font-weight:800}
  @media(max-width:600px){.fab-papel{margin-left:0;width:100%}}
  .fab-corpo{display:grid;grid-template-columns:minmax(0,1fr) 290px;gap:44px;
    align-items:start}
  @media(max-width:920px){.fab-corpo{grid-template-columns:1fr;gap:26px}
    .fab-fatos{position:static}}
  .fab-corpo .prosa{max-width:none}
  .fab-fatos{position:sticky;top:104px;align-self:start;
  display:grid;grid-template-columns:1fr 1fr;gap:18px;
    background:var(--fundo-2);border-radius:14px;padding:24px 22px;
    border:1px solid var(--linha)}
  .fab-fatos div b{display:block;font-size:1.3rem;color:var(--azul);font-weight:800;
    letter-spacing:-.025em}
  .fab-fatos div span{display:block;font-size:.82rem;color:var(--tinta-2);margin-top:3px}

  /* etiquetas de cidade */
  .etiquetas{display:flex;flex-wrap:wrap;gap:9px;margin-top:12px}
  .etiquetas .etiqueta{background:var(--fundo-2);border:1px solid var(--linha);
    border-radius:8px;padding:9px 15px;font-size:.91rem;color:var(--tinta-2);
    box-shadow:none;max-width:none;font-family:inherit;margin:0}

  /* indice */
  .indice{background:var(--fundo-2);border:1px solid var(--linha);border-radius:14px;
    padding:22px 24px;margin-bottom:36px}
  .indice b{display:block;font-size:.72rem;letter-spacing:.14em;text-transform:uppercase;
    color:var(--tinta-3);margin-bottom:12px;font-weight:800}
  .indice ol{margin:0;padding-left:20px;color:var(--tinta-2);font-size:.95rem}
  .indice li{margin-bottom:7px}
  .indice a{color:var(--azul);text-decoration:none}
  .indice a:hover{text-decoration:underline}

  /* faixa de quem veio do QR code */
  .veio-do-qr{background:var(--verm-fundo);color:#fff;padding:11px 0;font-size:.88rem;
    font-weight:700}
  .veio-do-qr .wrap{display:flex;align-items:center;gap:10px;flex-wrap:wrap}

  /* sinais em cartao */
  .sinais{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,290px),1fr));
    gap:18px;list-style:none;padding:0;margin:0}
  .sinais li{background:#fff;border:1px solid var(--linha);
    border-left:4px solid var(--verm);border-radius:0 12px 12px 0;padding:20px 22px}
  .sinais b{display:block;color:var(--tinta);margin-bottom:5px;font-size:1rem}
  .sinais span{display:block;color:var(--tinta-2);font-size:.92rem;line-height:1.62}

  /* rodape das internas */
  footer.rodape-novo{background:#08090F;color:rgba(255,255,255,.78);
    padding:56px 0 26px;font-size:.92rem}
  footer.rodape-novo .wrap{display:block}
  .rodape-grid{display:grid;grid-template-columns:1.4fr 1fr 1fr;gap:40px}
  @media(max-width:820px){.rodape-grid{grid-template-columns:1fr;gap:28px}}
  .rodape-grid h4{color:#fff;font-size:.72rem;letter-spacing:.18em;
    text-transform:uppercase;margin:0 0 13px;font-weight:800}
  .rodape-grid p{margin:0;line-height:1.9}
  footer.rodape-novo a{color:rgba(255,255,255,.85);text-decoration:none}
  footer.rodape-novo a:hover{color:#fff}
  .rodape-fim{border-top:1px solid rgba(255,255,255,.16);margin-top:40px;
    padding-top:20px;font-size:.88rem;line-height:1.7;
    color:rgba(255,255,255,.76)}

  /* botoes legados */
  .btn-2{display:inline-flex;align-items:center;gap:8px;border:2px solid var(--linha);
    color:var(--azul);background:#fff;text-decoration:none;font-weight:700;
    padding:13px 24px;border-radius:10px;font-size:.96rem;transition:.2s}
  .btn-2:hover{border-color:var(--azul);background:var(--fundo-2)}
  .zap-flutua{position:fixed;right:18px;bottom:18px;z-index:90;background:var(--zap);
    color:#fff;border-radius:50%;width:56px;height:56px;display:grid;place-items:center;
    box-shadow:0 10px 26px rgba(37,211,102,.42);text-decoration:none}

  /* topo das internas: fundo branco desde o inicio, nao ha hero escuro */
  header.sem-hero{background:#fff}

  /* .btn-zap tem que funcionar sozinho: as paginas internas usam so ele,
     sem a classe .btn que trazia forma, espacamento e o tira-sublinhado. */
  .btn-zap{display:inline-flex;align-items:center;gap:9px;text-decoration:none;
    font-weight:700;padding:13px 24px;border-radius:10px;font-size:.96rem;
    background:var(--zap);color:#06281A;border:2px solid transparent;transition:.2s;
    white-space:nowrap}
  .btn-zap:hover{transform:translateY(-2px);box-shadow:0 12px 28px rgba(37,211,102,.34);
    color:#fff}
  .topo .btn-zap{padding:11px 20px}

  /* Capa das internas em duas colunas: o texto sozinho deixava metade da
     faixa escura vazia. A coluna da direita leva o contato, que assim
     aparece no topo de toda pagina em vez de so no rodape. */
  /* Capa de largura cheia. Antes o titulo ficava numa coluna e a caixa lateral
     na outra - em monitor largo sobrava um vao morto no meio, que e exatamente
     o defeito que nao pode existir. Agora as duas colunas carregam CONTEUDO:
     titulo de um lado, texto de entrada do outro, alinhados pela base. */
  .capa .wrap{display:grid;grid-template-columns:1.12fr .88fr;
    gap:20px 56px;align-items:end}
  @media(max-width:900px){
    .capa .wrap{grid-template-columns:1fr;gap:18px}
  }
  /* Sem trava de largura aqui: a coluna da grade ja define a medida. Travar o
     titulo em 16ch dentro de uma coluna de 700px abria 276px de vao morto
     entre ele e o texto de entrada - medido. Quem controla e a grade. */
  .capa h1{max-width:none;margin-bottom:0}
  .capa-lead p{margin:0;font-size:1.06rem;line-height:1.62;
    color:rgba(255,255,255,.72);max-width:none}

  /* ---- Tira de novidades: faixa de largura cheia sob a capa -------------- */
  .tira-novidades{background:rgba(0,0,0,.22);
    border-top:1px solid rgba(255,255,255,.12);
    border-bottom:1px solid rgba(255,255,255,.12)}
  .tira-novidades .novidades{border-left:0;padding:20px 0;min-height:0;
    display:grid;grid-template-columns:auto minmax(0,1fr) auto;
    gap:28px;align-items:center}
  .tira-novidades .novidades-topo{margin:0;padding-right:26px;
    border-right:1px solid rgba(255,255,255,.14)}
  .tira-novidades .novidades-tit{white-space:nowrap}
  .tira-novidades .novidades-item{display:grid;
    grid-template-columns:auto minmax(0,1fr);gap:4px 18px;align-items:center}
  .tira-novidades .novidades-rot{margin:0;grid-row:1 / span 2;align-self:center}
  .tira-novidades .novidades-item h3{margin:0;font-size:1.06rem;line-height:1.3}
  .tira-novidades .novidades-item p{grid-column:2}
  .tira-novidades .novidades-pe{margin:0;flex-direction:column;align-items:flex-end;
    gap:8px;white-space:nowrap}

  @media(max-width:1000px){
    .tira-novidades .novidades{grid-template-columns:1fr;gap:14px;padding:18px 0}
    .tira-novidades .novidades-topo{padding-right:0;border-right:0}
    .tira-novidades .novidades-pe{flex-direction:row;align-items:center;
      justify-content:space-between;width:100%}
  }
  @media(max-width:620px){
    .tira-novidades .novidades-item{grid-template-columns:1fr;gap:8px}
    .tira-novidades .novidades-rot{grid-row:auto}
    .tira-novidades .novidades-item p{grid-column:1}
  }
  /* Sem caixa flutuante. Cartao arredondado de vidro sobre fundo escuro e o
     visual mais copiado que existe - le como enfeite colado, nao como parte da
     pagina. Aqui o contato e composicao: um fio vermelho que ancora o bloco na
     coluna, tipografia grande e canto vivo. */
  .capa-atalho{
    border-left:2px solid var(--verm);
    padding:2px 0 2px 22px;
    background:none;border-radius:0;
  }
  .capa-atalho .tit{font-size:.68rem;font-weight:800;letter-spacing:.2em;
    text-transform:uppercase;color:rgba(255,255,255,.5);margin:0 0 10px}
  .capa-atalho .fone{display:block;font-size:1.72rem;font-weight:800;color:#fff;
    text-decoration:none;letter-spacing:-.025em;line-height:1.05;margin-bottom:8px;
    font-variant-numeric:tabular-nums}
  .capa-atalho .fone:hover{color:var(--verm-cla)}
  .capa-atalho .obs{margin:0 0 18px;font-size:.86rem;color:rgba(255,255,255,.62);
    line-height:1.55;max-width:30ch}
  .capa-atalho .btn-zap{border-radius:3px;padding:13px 24px}

  /* ===================================================================
     PAINEL DE NOVIDADES - a coluna da capa deixou de ser recado fixo.
     Telefone parado ali nao dava motivo para voltar; o WhatsApp ja mora
     no cabecalho de toda pagina. Aqui roda conteudo que muda: novidade
     nossa e manchete do blog da Toledo, servidas por novidades.php.
     =================================================================== */
  .novidades{border-left:2px solid var(--verm);padding:2px 0 2px 22px;min-height:186px}
  .novidades-topo{display:flex;align-items:center;justify-content:space-between;
    gap:10px;margin-bottom:14px}
  .novidades-tit{font-size:.68rem;font-weight:800;letter-spacing:.2em;
    text-transform:uppercase;color:rgba(255,255,255,.5);margin:0}
  /* luzinha que pisca: sinaliza conteudo vivo sem escrever "ao vivo" */
  .novidades-tit::before{content:"";display:inline-block;width:6px;height:6px;
    border-radius:50%;background:var(--verm);margin-right:9px;vertical-align:middle;
    animation:pulsa 2.4s ease-in-out infinite}
  @keyframes pulsa{0%,100%{opacity:1}50%{opacity:.25}}
  @media(prefers-reduced-motion:reduce){.novidades-tit::before{animation:none}}

  .novidades-item{display:block;text-decoration:none;color:inherit}
  .novidades-item.sai{opacity:0;transform:translateY(-6px)}
  .novidades-item{opacity:1;transform:none;
    transition:opacity .35s ease, transform .35s ease}
  .novidades-rot{display:inline-block;font-size:.6rem;font-weight:800;
    letter-spacing:.16em;text-transform:uppercase;color:var(--verm-cla);
    border:1px solid rgba(255,255,255,.2);border-radius:2px;
    padding:3px 8px;margin-bottom:10px}
  .novidades-item h3{margin:0 0 7px;font-size:1.06rem;font-weight:800;
    line-height:1.28;letter-spacing:-.015em;color:#fff}
  .novidades-item:hover h3{color:var(--verm-cla)}
  .novidades-item p{margin:0;font-size:.84rem;line-height:1.5;
    color:rgba(255,255,255,.6)}
  .novidades-pe{display:flex;align-items:center;justify-content:space-between;
    gap:10px;margin-top:14px;font-size:.72rem;color:rgba(255,255,255,.42)}
  .novidades-pe .fonte{font-variant-numeric:tabular-nums}
  /* bolinhas de posicao - o leitor ve quantas novidades existem */
  .novidades-bolas{display:flex;gap:5px}
  .novidades-bolas i{width:5px;height:5px;border-radius:50%;
    background:rgba(255,255,255,.25);transition:background .25s}
  .novidades-bolas i.on{background:var(--verm)}



  /* ===================================================================
     SECAO EM DUAS COLUNAS
     Regra do site: nenhuma faixa de tela fica vazia. O texto corrido tem
     largura de leitura confortavel, e o que sobra a direita recebe as
     caixas de aviso - informacao de verdade, nao enfeite.
     =================================================================== */
  .dupla{display:grid;grid-template-columns:minmax(0,1fr) 340px;gap:48px;
    align-items:start}
  @media(max-width:1000px){.dupla{grid-template-columns:1fr;gap:0}}
  .dupla .corpo .prosa{max-width:none}
  .dupla .lado{position:sticky;top:104px;display:grid;gap:18px}
  @media(max-width:1000px){.dupla .lado{position:static;margin-top:26px}}
  .dupla .lado .nota{margin:0}

  /* indice em duas colunas: a lista sozinha deixava metade da caixa vazia */
  .indice ol{columns:2;column-gap:40px}
  @media(max-width:720px){.indice ol{columns:1}}
  .indice li{break-inside:avoid}

  /* ===================================================================
     VISOR VFD AZUL - referencia: painel fluorescente da Toledo
     Fundo azul escuro, digitos ciano com brilho, linha de texto embaixo
     e a régua de indicadores. Desenhado em CSS: carrega instantaneo,
     nunca pixeliza e nao depende de foto.
     =================================================================== */
  .prix{position:relative;background:linear-gradient(180deg,#12151C,#05070C);
    border-radius:12px;padding:12px;
    box-shadow:0 34px 74px rgba(0,0,0,.6), inset 0 1px 0 rgba(255,255,255,.09);
    border:1px solid rgba(255,255,255,.1)}

  .prix .selo-org{position:absolute;top:-12px;right:20px;background:#F2C14E;
    color:#3A2E08;font-size:.62rem;font-weight:800;letter-spacing:.1em;
    padding:6px 12px;border-radius:4px;text-transform:uppercase;
    box-shadow:0 6px 16px rgba(0,0,0,.5);z-index:2}

  /* a tela fluorescente */
  .prix .janela{background:
      radial-gradient(120% 140% at 50% 0%, #123A86 0%, #0A2258 46%, #06153A 100%);
    border-radius:7px;padding:13px 16px 10px;border:1px solid #000;
    box-shadow:inset 0 2px 14px rgba(0,0,0,.6), inset 0 0 40px rgba(60,150,255,.14)}

  /* rotulos brancos por cima dos numeros, como no painel real */
  .prix .faixa-rot{display:grid;grid-template-columns:1.1fr 1fr 1fr;
    border-bottom:1px solid rgba(150,215,255,.22);padding-bottom:6px;margin-bottom:9px}
  .prix .faixa-rot span{color:#DCEEFF;font-size:.62rem;font-weight:700;
    letter-spacing:.04em;text-align:center;white-space:nowrap;
    text-shadow:0 0 8px rgba(150,215,255,.5)}
  @media(max-width:400px){.prix .faixa-rot span{font-size:.54rem}}

  .prix .numeros-lcd{display:grid;grid-template-columns:1.1fr 1fr 1fr;
    align-items:baseline}
  .prix .campo{position:relative;text-align:center;padding:0 3px}

  /* digitos fluorescentes */
  .prix .val{position:relative;display:inline-block;
    font-family:"Consolas","SF Mono",Menlo,monospace;font-variant-numeric:tabular-nums;
    color:#B8ECFF;line-height:1;letter-spacing:.02em;
    text-shadow:0 0 5px rgba(150,225,255,.95), 0 0 16px rgba(80,180,255,.65),
                0 0 34px rgba(50,140,255,.4)}
  /* segmentos apagados: no VFD ficam quase invisiveis, nao cinza */
  .prix .fantasma{position:absolute;inset:0;color:rgba(150,215,255,.09);
    text-shadow:none;pointer-events:none;user-select:none}
  .prix .peso .val{font-size:clamp(1.7rem,3.8vw,2.5rem);font-weight:700}
  .prix .menor .val{font-size:clamp(1.05rem,2.1vw,1.45rem);font-weight:700}

  /* linha de texto do visor */
  .prix .linha-texto{margin-top:9px;padding-top:8px;
    border-top:1px solid rgba(150,215,255,.2);text-align:center;
    font-family:"Consolas","SF Mono",Menlo,monospace;font-size:clamp(.82rem,1.7vw,1.06rem);
    font-weight:700;letter-spacing:.16em;color:#B8ECFF;
    text-shadow:0 0 6px rgba(150,225,255,.9), 0 0 18px rgba(80,180,255,.5);
    white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

  /* regua de indicadores do rodape do visor */
  .prix .regua{display:flex;flex-wrap:wrap;gap:4px 14px;justify-content:center;
    margin-top:9px;padding-top:7px;border-top:1px solid rgba(150,215,255,.18)}
  .prix .ind{font-size:.55rem;font-weight:700;letter-spacing:.1em;
    text-transform:uppercase;color:rgba(184,236,255,.3)}
  .prix .ind.on{color:#B8ECFF;text-shadow:0 0 7px rgba(150,225,255,.9)}

  /* carcaca fora da tela */
  .prix .carcaca{display:flex;align-items:center;gap:10px;margin-top:11px;padding:0 4px}
  .prix .marca-painel{font-size:.7rem;font-weight:800;letter-spacing:.18em;
    color:rgba(255,255,255,.34);text-transform:uppercase}
  .prix .teclas{margin-left:auto;display:flex;gap:4px}
  .prix .teclas i{width:16px;height:8px;border-radius:2px;
    background:rgba(255,255,255,.13);display:block}

  /* estados de defeito, usados na pagina do guia */
  .prix.defeito .val{color:#FFC9C9;
    text-shadow:0 0 6px rgba(255,140,140,.9), 0 0 20px rgba(255,60,60,.5)}
  .prix.piscando .janela{animation:pisca 1.1s steps(2,end) infinite}
  @keyframes pisca{50%{opacity:.4}}
  .prix .val .apagado{opacity:.1}

  /* ===================================================================
     GUIA: painel que gruda e reage a rolagem
     (recolocado - foi removido por engano junto com o estilo do LCD antigo)
     A cada sinal que o leitor alcanca, o visor mostra aquele defeito.
     No celular o painel some: grudar peca em tela pequena rouba a leitura.
     =================================================================== */
  .guia-grade{display:grid;grid-template-columns:minmax(0,1fr) 400px;gap:52px;
    align-items:start}
  @media(max-width:1000px){
    .guia-grade{grid-template-columns:1fr}
    .guia-painel{display:none}
  }
  .guia-painel{position:sticky;top:110px}
  .guia-painel .legenda{margin:16px 0 0;font-size:.86rem;line-height:1.6;
    color:var(--tinta-2);text-align:center;min-height:3.2em}
  .guia-painel .legenda b{color:var(--verm);display:block;margin-bottom:4px;
    font-size:.72rem;letter-spacing:.14em;text-transform:uppercase}

  /* barra de progresso de leitura */
  .progresso{position:fixed;top:0;left:0;height:3px;background:var(--verm);
    width:0;z-index:120;transition:width .1s linear}
  @media(prefers-reduced-motion:reduce){.progresso{transition:none}}

  /* o bloco que esta sendo lido ganha realce */
  .sinal-bloco{padding:26px 0;border-top:1px solid var(--linha);transition:.3s}
  .sinal-bloco:first-of-type{border-top:0}
  .sinal-bloco.focado{border-left:3px solid var(--verm);padding-left:22px;
    margin-left:-25px;background:linear-gradient(90deg,rgba(255,2,25,.04),transparent 60%)}
  .sinal-bloco h3{font-size:1.16rem;font-weight:800;margin:0 0 7px;
    letter-spacing:-.018em;color:var(--tinta)}
  .sinal-bloco p{margin:0;color:var(--tinta-2);font-size:.96rem;line-height:1.66}

  /* Cada marca da faixa vem com a area dela. Sem isso os nomes passam em fila
     e viram um borrao so - o cliente nao percebe que sao tres fabricantes
     de ramos diferentes, e que Prix e a linha da Toledo, nao outra marca. */
  .trilho .marca-item{display:inline-flex;flex-direction:column;gap:2px;
    line-height:1.2;text-align:left}
  .trilho .marca-item .nome-marca{font-size:1rem;font-weight:800;color:#fff}
  .trilho .marca-item .area-marca{font-size:.72rem;font-weight:600;
    letter-spacing:.09em;text-transform:uppercase;color:var(--verm-cla)}
  .trilho a.marca-item:hover .nome-marca{color:var(--verm-cla)}

  /* ===================================================================
     PAINEL DO PIX - dados ao vivo do Banco Central (dados abertos)
     A API do BCB responde a consulta feita pelo proprio navegador, entao
     nao precisa de servidor no meio. Se ela nao responder, o bloco mostra
     o aviso e os links - nunca fica quebrado nem com numero velho.
     =================================================================== */
  .pix-painel{background:linear-gradient(160deg,#0B2B24,#06170F);color:#fff;
    border-radius:18px;padding:30px 28px;border:1px solid rgba(88,230,168,.22);
    box-shadow:0 26px 60px rgba(0,0,0,.4)}
  .pix-painel .cabeca{display:flex;align-items:center;gap:11px;margin-bottom:22px;
    font-size:.72rem;font-weight:800;letter-spacing:.18em;text-transform:uppercase;
    color:rgba(88,230,168,.85)}
  .pix-painel .cabeca i{width:9px;height:9px;border-radius:50%;background:#58E6A8;
    box-shadow:0 0 0 4px rgba(88,230,168,.18);flex:none}
  .pix-painel.instavel .cabeca{color:#FFC98A}
  .pix-painel.instavel .cabeca i{background:#FFA53A;box-shadow:0 0 0 4px rgba(255,165,58,.2)}
  .pix-painel.sem-dado .cabeca{color:rgba(255,255,255,.55)}
  .pix-painel.sem-dado .cabeca i{background:rgba(255,255,255,.4);box-shadow:none}

  .pix-numero{font-size:clamp(2.3rem,5.4vw,3.4rem);font-weight:800;line-height:1;
    letter-spacing:-.035em;color:#58E6A8;font-variant-numeric:tabular-nums}
  .pix-legenda{margin:9px 0 0;font-size:.94rem;color:rgba(255,255,255,.66)}
  .pix-linhas{display:grid;gap:1px;background:rgba(255,255,255,.1);
    border-radius:12px;overflow:hidden;margin-top:24px}
  .pix-linha{background:rgba(255,255,255,.03);padding:14px 18px;display:flex;
    justify-content:space-between;gap:14px;font-size:.92rem;flex-wrap:wrap}
  .pix-linha span{color:rgba(255,255,255,.6)}
  .pix-linha b{color:#fff;font-weight:700;font-variant-numeric:tabular-nums}
  .pix-fonte{margin:18px 0 0;font-size:.8rem;color:rgba(255,255,255,.42)}
  .pix-fonte a{color:rgba(255,255,255,.7)}

  /* A frase que fecha o painel do Pix: e a conclusao pratica, nao um rodape */
  .pix-conclusao{margin:20px 0 0;font-size:.95rem;line-height:1.6;
    color:rgba(255,255,255,.82);border-top:1px solid rgba(88,230,168,.22);
    padding-top:18px}
  .pix-conclusao b{color:#58E6A8}
  .pix-painel .pix-numero{font-size:clamp(1.9rem,4.4vw,2.7rem)}

  /* ===================================================================
     CENTRAL DE CONSULTAS - tudo o que se CONSULTA fica junto, no topo.
     Antes as ferramentas estavam espalhadas pelas barras laterais de cinco
     secoes: quem chegava com pressa nao achava. Agora as secoes de baixo
     sao leitura; aqui em cima e ferramenta.
     =================================================================== */
  .central{display:grid;grid-template-columns:minmax(0,1fr) 340px;gap:40px;
    align-items:start}
  @media(max-width:1000px){.central{grid-template-columns:1fr;gap:28px}}

  .consultas{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,230px),1fr));
    gap:16px}
  .consulta{display:flex;flex-direction:column;gap:7px;text-decoration:none;
    background:#fff;border:1px solid var(--linha);border-radius:14px;
    padding:20px 20px 18px;transition:.22s;position:relative}
  .consulta::after{content:"";position:absolute;top:0;left:0;right:0;height:3px;
    background:var(--verm);border-radius:14px 14px 0 0;transform:scaleX(0);
    transform-origin:left;transition:.28s}
  .consulta:hover{transform:translateY(-4px);border-color:transparent;
    box-shadow:0 18px 42px rgba(14,16,22,.13)}
  .consulta:hover::after{transform:scaleX(1)}
  .consulta:focus-visible{outline:2px solid var(--azul);outline-offset:3px}
  .consulta .doc{font-size:.68rem;font-weight:800;letter-spacing:.16em;
    text-transform:uppercase;color:var(--verm-txt)}
  .consulta b{font-size:1.04rem;color:var(--tinta);font-weight:800;
    letter-spacing:-.015em}
  .consulta span{font-size:.88rem;color:var(--tinta-2);line-height:1.55}
  .consulta .abre{margin-top:auto;padding-top:10px;font-size:.8rem;font-weight:700;
    color:var(--azul)}



  /* Prato vazio: alguns defeitos aparecem SEM carga (nao volta ao zero,
     nao liga). Nesses casos o peso sai do desenho, senao o visor mostrando
     zero com 20 kg em cima vira contradicao. */

  /* referencia do peso-padrao, acima do visor */
  .referencia{display:flex;align-items:center;justify-content:space-between;
    gap:12px;background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.14);
    border-radius:10px;padding:11px 15px;margin-bottom:14px;flex-wrap:wrap}
  .referencia .rot{font-size:.66rem;font-weight:800;letter-spacing:.14em;
    text-transform:uppercase;color:rgba(255,255,255,.45)}
  .referencia .valor{font-family:"Consolas","SF Mono",Menlo,monospace;
    font-weight:700;color:#fff;font-size:1rem}
  .guia-painel .referencia{background:var(--fundo-2);border-color:var(--linha)}
  .guia-painel .referencia .rot{color:var(--tinta-3)}
  .guia-painel .referencia .valor{color:var(--tinta)}
  .guia-painel .referencia.vazio .valor{color:var(--tinta-3)}

  /* ===================================================================
     MENU NO CELULAR
     O nav some abaixo de 1300px, e o site tem 10 paginas: sem isto, quem
     entra pelo celular fica preso na pagina em que caiu.
     Feito com <details>: funciona sem JavaScript e responde ao teclado.
     =================================================================== */
  .menu-movel{display:none;position:relative}
  @media(max-width:1300px){ .menu-movel{display:block} }

  .menu-movel > summary{list-style:none;cursor:pointer;width:46px;height:46px;
    border-radius:11px;border:1.5px solid var(--linha);background:#fff;
    display:grid;place-items:center;gap:4px;padding:12px 11px;
    align-content:center;transition:.2s}
  .menu-movel > summary::-webkit-details-marker{display:none}
  .menu-movel > summary i{display:block;width:22px;height:2.5px;border-radius:2px;
    background:var(--azul);transition:.25s}
  .menu-movel[open] > summary i:nth-child(1){transform:translateY(6.5px) rotate(45deg)}
  .menu-movel[open] > summary i:nth-child(2){opacity:0}
  .menu-movel[open] > summary i:nth-child(3){transform:translateY(-6.5px) rotate(-45deg)}
  .menu-movel > summary:focus-visible{outline:2px solid var(--azul);outline-offset:3px}

  /* no topo escuro da home o botao acompanha */
  header.no-topo .menu-movel > summary{background:rgba(255,255,255,.1);
    border-color:rgba(255,255,255,.28)}
  header.no-topo .menu-movel > summary i{background:#fff}

  .menu-lista{position:absolute;right:0;top:calc(100% + 12px);z-index:90;
    background:#fff;border:1px solid var(--linha);border-radius:14px;
    box-shadow:0 24px 54px rgba(14,16,22,.22);padding:8px;
    min-width:min(78vw,270px);display:grid;gap:2px}
  .menu-lista a{display:block;padding:14px 16px;border-radius:9px;
    text-decoration:none;color:var(--tinta);font-weight:600;font-size:1rem}
  .menu-lista a:hover{background:var(--fundo-2);color:var(--azul)}
  .menu-lista a.atual{background:var(--fundo-2);color:var(--azul)}
  .menu-lista a.atual::after{content:" •";color:var(--verm)}

  /* em tela pequena o botao de WhatsApp encolhe para caber os tres */
  @media(max-width:520px){
    .topo .btn-zap{padding:11px 14px;font-size:.88rem}
    .topo{gap:10px}
  }
  @media(max-width:380px){
    .topo .btn-zap span.rotulo-zap{display:none}
  }

  /* ===================================================================
     RITMO VERTICAL NO CELULAR
     O espacamento estava calibrado para monitor: no telefone sobrava um
     vao morto antes do conteudo, e o hero passava de uma tela e meia.
     Aqui o topo encolhe e o selo para de quebrar em duas linhas.
     =================================================================== */
  @media(max-width:640px){
    .capa-forte{padding:clamp(74px,10vh,104px) 0 clamp(46px,6vh,68px)}

    /* o selo cabia mal e quebrava: fonte menor e sem forcar linha */
    .selo-topo{margin-bottom:18px;padding:8px 15px;font-size:.75rem;
      line-height:1.35;gap:9px}
    .selo-topo br{display:none}

    .capa-forte h1{margin-bottom:16px;line-height:1.06}
    .capa-forte .chamada{font-size:1rem;line-height:1.55}
    .acoes{margin-top:22px;gap:10px}
    .acoes .btn{width:100%;justify-content:center;padding:14px 20px}

    /* a faixa de numeros nao precisa subir tanto no telefone */
    .numeros{margin-top:-30px}
    .num{padding:20px 18px}

    /* secoes: respiro menor, sem virar aperto */
    .secao{padding:52px 0}
    .titulo{margin-bottom:12px}
    .etiq{margin-bottom:16px}
  }

  @media(max-width:400px){
    .selo-topo{font-size:.7rem;padding:7px 13px}
  }

  /* Marca da versao no rodape. Serve para saber, olhando a pagina, qual
     build esta no ar - sem isso, "corrigi" e "continua igual" viram
     discussao sem prova. */
  .marca-versao{opacity:.68;font-size:.84rem;letter-spacing:.04em}

  /* No celular a marca era o MENOR dos tres elementos do topo: 79px contra
     112px do botao. A marca vem primeiro na hierarquia - quem chega tem que
     saber de quem e o site antes de ver o botao. Como sobravam 94px, da
     para crescer o logo sem apertar nada. */
  @media(max-width:640px){
    .marca img{height:70px}
    .topo{padding:9px 0}
  }
  @media(max-width:400px){
    .marca img{height:60px}
    .topo .btn-zap{padding:11px 15px;font-size:.86rem}
  }

  /* No celular o nav some, e com ele o margin-left:auto que empurrava o lado
     direito. Sem isso os tres elementos ficavam amontoados a esquerda com o
     canto direito vazio. O menu tem que ficar no canto superior direito -
     e onde o polegar procura. */
  @media(max-width:1080px){
    .topo .btn-zap{margin-left:auto}
    .menu-movel{margin-left:0}
  }

  /* ===================================================================
     LINHA DO TEMPO - historia da pesagem
     Fica na abertura da pagina de metrologia: explica POR QUE pesar e
     assunto de lei muito melhor que qualquer argumento abstrato.
     =================================================================== */
  .tempo{list-style:none;margin:0;padding:0;position:relative}
  .tempo::before{content:"";position:absolute;left:0;top:8px;bottom:8px;width:2px;
    background:linear-gradient(180deg,var(--verm),var(--azul) 30%,var(--linha))}
  .tempo li{position:relative;padding:0 0 30px 34px}
  .tempo li:last-child{padding-bottom:0}
  .tempo li::before{content:"";position:absolute;left:-6px;top:6px;width:14px;
    height:14px;border-radius:50%;background:#fff;border:3px solid var(--azul)}
  .tempo li.marco::before{border-color:var(--verm);background:var(--verm);
    box-shadow:0 0 0 5px rgba(255,2,25,.14)}
  .tempo .quando{display:block;font-size:.74rem;font-weight:800;letter-spacing:.14em;
    text-transform:uppercase;color:var(--verm-txt);margin-bottom:5px}
  .tempo b{display:block;font-size:1.08rem;color:var(--tinta);margin-bottom:5px;
    letter-spacing:-.015em}
  .tempo span.txt{display:block;color:var(--tinta-2);font-size:.95rem;line-height:1.62}

  /* ===================================================================
     LEGIBILIDADE EM TELA GRANDE
     O site nasceu calibrado em 16px, que e miudo num monitor de 1700px+.
     E como a largura do texto e medida em caracteres (ch), fonte pequena
     produz coluna estreita - dai a sobra a direita. Crescer a fonte
     resolve os dois de uma vez: le melhor E preenche.
     =================================================================== */
  html{font-size:clamp(16px, 0.3vw + 14.4px, 19px)}

  /* texto corrido um pouco maior e mais arejado */
  .prosa p, .prosa li{font-size:1.03rem;line-height:1.7}
  .nota p{font-size:1rem;line-height:1.7}
  .nota b{font-size:1.04rem}
  .tempo span.txt{font-size:1rem;line-height:1.68}
  .card p, .servico p{font-size:1rem}
  .faq .resposta{font-size:1rem;line-height:1.72}
  .faq summary{font-size:1.05rem}

  /* a coluna de texto acompanha, sem passar do confortavel */
  .prosa{max-width:74ch}
  .dupla .corpo .prosa{max-width:none}

  /* container respira mais em monitor largo */
  @media(min-width:1500px){
    .wrap{width:min(1360px,92%)}
  }

  /* Bloco de texto SEM barra lateral ao lado: centralizar em vez de encostar
     a esquerda. Texto de 1360px de largura e ilegivel - o olho perde a linha.
     Centralizado, a margem vira composicao; encostado, vira sobra. */
  .wrap > .prosa,
  .wrap > .tempo{margin-inline:auto}

  /* v42 - lista numerada da prosa: mesmo peso visual da lista comum */
  .prosa ol{margin:0 0 18px;padding-left:22px;color:var(--tinta-2)}
  .prosa ol li{margin-bottom:10px}
  .prosa ol li::marker{color:var(--azul);font-weight:800}