/* NOTA: os tamanhos aqui estao em px, nao em rem.
   O Bootstrap 3 do tema define html{font-size:10px} em lib.css, entao
   1rem valeria 10px e toda a escala tipografica sairia 37% menor do que
   o pretendido. Enquanto a base do tema for 10px, px e a unidade correta
   aqui. (O zoom do navegador continua funcionando normalmente.) */

/* =====================================================================
   Persegue Segurança — camada de otimização
   Carregue SEMPRE por último, depois de style.css.

   Regra que orientou este arquivo: nenhuma cor de marca foi trocada.
   O azul #0056b7 e o âmbar #ffb300 continuam sendo a identidade.
   O que muda é ONDE cada cor é aplicada, para que o contraste passe
   no WCAG 2.2 AA sem alterar a aparência percebida do site.
   ===================================================================== */

:root {
  --pg-azul:        #0056b7;  /* identidade — 6,9:1 sobre branco: aprovado  */
  --pg-azul-esc:    #004586;  /* identidade — hover e faixas               */
  --pg-azul-claro:  #e8f1fb;  /* fundos suaves derivados do azul da marca  */
  --pg-ambar:       #ffb300;  /* identidade — fundos, bordas, ícones       */

  /* O âmbar da marca sobre branco tem contraste de 1,79:1 e reprova em
     qualquer critério do WCAG. Para TEXTO usamos a mesma matiz escurecida
     (7,2:1 sobre branco). Visualmente continua sendo o dourado da Persegue. */
  --pg-ambar-txt:   #8a5a00;

  --pg-txt:         #333333;
  --pg-txt-suave:   #5a5a5a;  /* substitui #888/#999 (reprovavam em AA)     */
  --pg-borda:       #dcdcdc;
  --pg-branco:      #ffffff;
  --pg-erro:        #b3261e;
  --pg-ok:          #1b5e20;

  /* Verde do WhatsApp escurecido. O #128c7e da marca dá 4,14:1 tanto como
     texto sobre branco quanto como fundo sob texto branco — reprova nos dois
     usos. Este passa em ambos (5,84:1). */
  --pg-verde:       #0e7266;

  /* Âmbar para texto SOBRE a barra azul do menu. O #ffb300 da marca dá
     3,88:1 sobre #0056b7. Mesma matiz, mais clara, 4,78:1. */
  --pg-ambar-menu:  #ffd166;

  --pg-raio:        4px;
  --pg-toque:       44px;     /* alvo mínimo de toque (WCAG 2.2 — 2.5.8)    */
}

/* ---------------------------------------------------------------------
   1. ACESSIBILIDADE — base
   --------------------------------------------------------------------- */

/* O site atual não tem link de salto: quem navega por teclado precisa
   passar por ~25 links de menu antes de chegar ao conteúdo. */
.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 9999;
  background: var(--pg-azul);
  color: var(--pg-branco);
  padding: 12px 20px;
  font-weight: 700;
  text-decoration: none;
}
.skip-link:focus { left: 0; }

/* O tema remove o contorno de foco (outline:none) em vários seletores.
   Sem indicador visível, a navegação por teclado fica impossível. */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
[tabindex]:focus-visible {
  outline: 3px solid var(--pg-ambar) !important;
  outline-offset: 2px !important;
  border-radius: var(--pg-raio);
}
.ownavigation .navbar-nav li a:focus-visible {
  outline-color: var(--pg-branco) !important;
}

/* Respeita quem pediu menos animação no sistema operacional. */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
    scroll-behavior: auto !important;
  }
}

/* ---------------------------------------------------------------------
   2. CONTRASTE — correções pontuais
   --------------------------------------------------------------------- */

/* Âmbar como TEXTO sobre fundo claro: troca pela variante escura. */
.query-section h4 a,
.widget_links ul li a:hover,
.about-content a,
.pg-ambar-texto {
  color: var(--pg-ambar-txt);
}

/* Âmbar sobre fundo escuro continua exatamente como está — ali o
   contraste é adequado e é onde a marca aparece com mais força. */
.top-header a:hover,
footer .widget_links ul li a:hover,
footer .btm-ftr .navbar-nav > li > a:hover {
  color: var(--pg-ambar);
}

/* Cinzas claros demais em corpo de texto. */
.about-content p,
.widget_about p,
.feature-content p,
p.text-muted {
  color: var(--pg-txt);
}
small, .small, .pg-legenda { color: var(--pg-txt-suave); }

/* ---------------------------------------------------------------------
   3. ALVOS DE TOQUE
   Auditoria encontrou 14 links/botões abaixo de 24×24 px na home mobile.
   --------------------------------------------------------------------- */

/*
 * CORREÇÃO (25/08/2026) — esta regra tinha dois efeitos colaterais graves,
 * reportados no site em homologação:
 *
 *  1. `.navbar-toggle { display: inline-flex }` sem media query sobrescrevia
 *     o `display:none` que o Bootstrap aplica a partir de 768 px. Resultado:
 *     o botão de menu sanduíche aparecia no desktop.
 *  2. Aplicar inline-flex nos links do menu principal interferia no layout
 *     flutuante do tema.
 *
 * Agora o alvo de toque de 44 px é aplicado só onde é necessário — em
 * ícones e listas — e o botão sanduíche só recebe tratamento abaixo de
 * 992 px, que é onde o tema realmente o exibe.
 */
.top-social li a,
.footer-social li a,
.pg-nav-rodape a {
  min-height: var(--pg-toque);
  min-width: var(--pg-toque);
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.pg-nav-rodape a { padding: 10px 12px; }

/* Links do menu principal: altura de toque sem trocar o modelo de caixa. */
.ownavigation .navbar-nav > li > a {
  min-height: var(--pg-toque);
  display: block;
}

@media (max-width: 991px) {
  .ownavigation .navbar-toggle {
    min-height: var(--pg-toque);
    min-width: var(--pg-toque);
    display: inline-flex;
    align-items: center;
    justify-content: center;
  }
}

/* ---------------------------------------------------------------------
   3a. BARRA DE NAVEGAÇÃO FIXA AO ROLAR

   O tema fixava o CABEÇALHO INTEIRO com position:fixed acionado por um
   listener de scroll (sticky_menu em functions.js). Três problemas:

     1. Fixava a barra âmbar e o bloco de contato junto — quase um terço
        da tela ocupado permanentemente.
     2. position:fixed tira o elemento do fluxo sem nada ocupar o lugar,
        então a página saltava para cima ao rolar o primeiro pixel.
     3. O cálculo rodava a cada evento de scroll.

   Solução: a navegação foi para um invólucro próprio FORA do <header>
   (ver inc/header.php) e é esse invólucro que gruda. Sem JavaScript,
   sem medição de altura e sem salto de layout.
   --------------------------------------------------------------------- */

/*
 * O tema aplica overflow:hidden em .main-container e no body para recortar
 * os elementos decorativos inclinados que passam da largura. O efeito
 * colateral é que overflow:hidden cria um contexto de rolagem, e
 * position:sticky simplesmente não funciona dentro de um.
 *
 * overflow-x:clip recorta igual, mas NÃO cria contexto de rolagem — que é
 * exatamente a diferença de que precisamos.
 */
.main-container,
body {
  overflow-x: clip;
  overflow-y: visible;
}

/*
 * SÓ A BARRA DE NAVEGAÇÃO FICA FIXA.
 *
 * A tentativa anterior deixava o <header> inteiro em position:sticky com
 * deslocamento negativo. Funcionava em teoria, mas dependia de o JavaScript
 * medir a altura da barra âmbar mais o bloco de contato — e quando essa
 * medida saía zero, o cabeçalho inteiro grudava no topo, ocupando um terço
 * da tela.
 *
 * Agora a navegação vive num invólucro próprio, fora do <header>, e é ele
 * que gruda. Sem medição, sem JavaScript, sem depender de nada.
 */
.header_s2 { position: relative; }

.pg-barra-fixa {
  position: sticky;
  top: 0;
  z-index: 1000;
  background-color: #fff;
}

/* Neutraliza o modo fixo do tema: o functions.js continua adicionando a
   classe ao <header>, mas ela deixa de ter efeito de posicionamento. */
.header_s2.navbar-fixed-top {
  position: relative;
  animation: none !important;
}
@media (min-width: 992px) {
  .header_s2.navbar-fixed-top .top-header,
  .header_s2.navbar-fixed-top .middle-header {
    display: block;
  }
  .header_s2.navbar-fixed-top .ownavigation .navbar-header {
    margin-top: 0;
    margin-bottom: 0;
  }
}

/* Âncoras internas (#orcamento, #planos, #cidades) não podem ficar
   escondidas atrás da barra grudada. */
/* As duas linhas de scroll-margin-top que existiam aqui eram duplicata morta
   das linhas equivalentes mais abaixo. Todas as quatro saíram em 02/09/2026:
   quem cuida do salto de âncora agora é o scroll-padding-top do <html>
   (seção 22), que também resolve o foco por teclado escondido sob a barra —
   scroll-margin e scroll-padding SOMAM, e manter os dois punha toda âncora
   162 px abaixo do lugar certo. */
/* Sombra permanente na barra de navegação: quando ela gruda, separa
   visualmente do conteúdo que passa por baixo. */
.header_s2 .ownavigation { box-shadow: 0 2px 14px rgba(4, 26, 45, .16); }

/*
 * Logo dentro da barra de navegação — sempre visível, em qualquer largura.
 * Como é a barra de navegação que fica fixa, a logo acompanha o menu ao
 * rolar sem depender de JavaScript nenhum.
 */
/*
 * O tema puxa o bloco da logo 72 px para CIMA (margin-top: -72px acima de
 * 992 px), para que ela apareça flutuando na faixa branca enquanto continua,
 * na marcação, dentro da barra de navegação. Funciona enquanto a barra não
 * gruda — quando gruda, a logo fica 72 px acima da área visível e some,
 * cortada pelo topo da janela.
 *
 * Zerando a margem, a logo passa a ocupar de fato o interior da barra: fica
 * visível o tempo todo e acompanha o menu ao rolar.
 */
@media (min-width: 992px) {
  .header_s2 .ownavigation .navbar-header,
  .header_s2.navbar-fixed-top .ownavigation .navbar-header {
    margin-top: 0;
    margin-bottom: 0;
  }
}

.pg-logo-menu {
  display: inline-flex !important;
  align-items: center;
  padding: 0 !important;
  height: auto !important;
  margin: 5px 0;
  float: left;
}
.pg-logo-menu img {
  max-height: 44px;
  width: auto;
  display: block;
}
/*
 * No celular o tema dava 30 px de margem ao botão do menu e 18 px à logo,
 * o que fazia a barra fixa ocupar 101 px — mais de 12% da tela de um
 * telefone, o tempo todo. Compactada para cerca de 70 px.
 */
@media (max-width: 991px) {
  .pg-logo-menu img { max-height: 36px; }
  .header_s2 .navbar-header .navbar-brand.pg-logo-menu {
    margin-top: 9px;
    margin-bottom: 9px;
  }
  .header_s2 .ownavigation .navbar-toggle {
    margin-top: 9px;
    margin-bottom: 9px;
  }
}

/* Âncoras internas (#orcamento, #planos, #cidades) não podem ficar
   escondidas atrás da barra grudada. */
/* (ver a nota acima: substituído pelo scroll-padding-top do <html>) */

/* ---------------------------------------------------------------------
   3b. MENU PRINCIPAL VISÍVEL SEM DEPENDER DO JS DO TEMA

   O tema, na variante header_s2, esconde o menu por padrão no desktop:

       @media (min-width: 992px) {
         .header_s2 .ownavigation .navbar-nav { transform: scaleY(0); }
         .header_s2 .ownavigation .navbar-nav.menu-open { transform: scaleY(1); }
       }

   A classe .menu-open só era adicionada por functions.js, e só quando existia
   um <div class="menu-switch"> no HTML — um botão extra de abrir menu que o
   cabeçalho reescrito não tem mais. Sem ele, a função nunca rodava e o menu
   ficava com escala zero: presente no HTML, invisível na tela.

   Em vez de recolocar o botão só para satisfazer o script, o menu passa a ser
   visível por CSS. Além de corrigir o defeito, elimina a dependência de
   JavaScript para exibir a navegação principal — que nunca deveria existir.
   --------------------------------------------------------------------- */

@media (min-width: 992px) {
  .header_s2 .ownavigation .navbar-nav,
  .header_s2 .ownavigation .navbar-nav.menu-open {
    transform: none;
    -webkit-transform: none;
    -moz-transform: none;
    -ms-transform: none;
    opacity: 1;
    visibility: visible;
  }
}

/* Listas de links empilhadas: sem altura própria, cada item ficava com 19 px
   e os alvos encostavam um no outro. O espaçamento vertical resolve tanto o
   critério 2.5.8 quanto o toque errado no celular. */
footer .widget_links ul li a,
footer .widget_area ul li a,
.pg-breadcrumb a,
.pg-breadcrumb li {
  display: inline-block;
  padding-top: 4px;
  padding-bottom: 4px;
  min-height: 24px;
}
footer .widget_links ul li,
footer .widget_area ul li { margin-bottom: 4px; }

/* Link de ação dos cartões: 20 px de altura viravam alvo curto demais. */
.pg-card .pg-card-link {
  display: inline-flex;
  align-items: center;
  min-height: 24px;
  padding: 4px 0;
}

/* Links de telefone e e-mail dentro de parágrafos ficam sob a exceção
   "inline" do critério 2.5.8, mas ganham respiro assim mesmo. */
.pg-contato-item a,
.widget_everywhere address a { padding: 2px 0; display: inline-block; }

/* ---------------------------------------------------------------------
   4. ESTABILIDADE VISUAL (CLS)
   Nenhuma das 7 imagens da home declara width/height hoje.
   --------------------------------------------------------------------- */

img { max-width: 100%; height: auto; }

.navbar-brand img { max-height: 56px; width: auto; }

.pg-hero {
  position: relative;
  min-height: 420px;
  display: flex;
  align-items: center;
  background: #0b2135 center/cover no-repeat;
  color: var(--pg-branco);
}
/* 600 px cravados para 426 px de conteúdo, em 20 páginas: o herói empurrava
   a seção seguinte inteira para fora da primeira tela. Com 500 px + respiro,
   passam a aparecer ~183 px do que vem depois — o suficiente para o visitante
   saber que a página continua. Nada muda abaixo de 992 px. */
@media (min-width: 992px) { .pg-hero { min-height: 500px; padding: 40px 0; } }

/* Sobreposição escura garante contraste do texto sobre qualquer foto. */
.pg-hero::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, rgba(4,26,45,.86) 0%, rgba(4,26,45,.60) 55%, rgba(4,26,45,.30) 100%);
}
.pg-hero > .container { position: relative; z-index: 1; }

.pg-hero h1 {
  font-family: 'Raleway', system-ui, Arial, sans-serif;
  font-size: clamp(28px, 4.2vw, 46.4px);
  font-weight: 800;
  line-height: 1.18;
  color: var(--pg-branco);
  margin: 0 0 .5em;
  max-width: 20ch;
}
.pg-hero h1 .destaque {
  color: var(--pg-ambar);           /* âmbar sobre fundo escuro: aprovado */
  display: block;
}
.pg-hero p.pg-sub {
  font-size: clamp(16px, 2.1vw, 18.88px);
  max-width: 52ch;
  color: #eaf1f8;
  margin-bottom: 1.6em;
}

/* ---------------------------------------------------------------------
   4b. CARROSSEL DO HERÓI
   Substitui o Slider Revolution com ~2 KB e sem dependência externa.
   --------------------------------------------------------------------- */

.pg-carrossel { position: relative; }
.pg-slides { position: relative; }

.pg-slide {
  position: relative;
  min-height: 420px;
  display: none;
  align-items: center;
  background: #0b2135 center/cover no-repeat;
  color: var(--pg-branco);
}
.pg-slide.ativo { display: flex; }
@media (min-width: 992px) { .pg-slide { min-height: 600px; } }

.pg-slide::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, rgba(4,26,45,.86) 0%, rgba(4,26,45,.60) 55%, rgba(4,26,45,.30) 100%);
}
.pg-slide > .container { position: relative; z-index: 1; }

/* O título do 1º slide é <h1>; os demais são <p> com a mesma aparência —
   uma página não pode ter quatro H1. */
.pg-slide h1,
.pg-slide .pg-slide-titulo {
  font-family: 'Raleway', system-ui, Arial, sans-serif;
  font-size: clamp(28px, 4.2vw, 46.4px);
  font-weight: 800;
  line-height: 1.18;
  color: var(--pg-branco);
  margin: 0 0 .5em;
  max-width: 20ch;
}
.pg-slide h1 .destaque,
.pg-slide .pg-slide-titulo .destaque { color: var(--pg-ambar); display: block; }
.pg-slide p.pg-sub {
  font-size: clamp(16px, 2.1vw, 18.88px);
  max-width: 52ch;
  color: #eaf1f8;
  margin-bottom: 1.6em;
}
.pg-slide .pg-regua { width: 72px; height: 4px; background: var(--pg-ambar); margin: 0 0 22px; }

/* Transição suave só para quem não pediu menos animação. */
@media (prefers-reduced-motion: no-preference) {
  .pg-slide.ativo { animation: pg-fade .55s ease both; }
  @keyframes pg-fade { from { opacity: .35 } to { opacity: 1 } }
}

.pg-carrossel-nav {
  position: absolute;
  left: 0; right: 0; bottom: 22px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
  z-index: 2;
}
.pg-carrossel-nav[hidden] { display: none; }

.pg-seta {
  width: 44px; height: 44px;
  display: inline-flex; align-items: center; justify-content: center;
  background: rgba(4,26,45,.55);
  color: var(--pg-branco);
  border: 1px solid rgba(255,255,255,.4);
  border-radius: 50%;
  font-size: 20px;
  cursor: pointer;
}
.pg-seta:hover, .pg-seta:focus { background: var(--pg-azul); border-color: var(--pg-azul); }

.pg-bolinhas { display: flex; gap: 9px; align-items: center; }
.pg-bolinha {
  width: 30px; height: 24px;              /* 24 px é o mínimo do WCAG 2.5.8 */
  padding: 10px 0;                         /* a marca visível é o ::before */
  background: none; border: 0; cursor: pointer;
  position: relative;
}
.pg-bolinha::before {
  content: "";
  position: absolute; inset: 10px 0;
  background: rgba(255,255,255,.45);
  border-radius: 2px;
  transition: background .2s ease;
}
.pg-bolinha.ativa::before { background: var(--pg-ambar); }
.pg-bolinha:hover::before { background: var(--pg-branco); }

@media (max-width: 600px) {
  .pg-carrossel-nav { bottom: 14px; gap: 10px; }
  .pg-seta { width: 40px; height: 40px; }
}

/* Faixa separadora âmbar — o mesmo elemento gráfico usado hoje no slider,
   agora em CSS puro (dispensa slider-seprator.png). */
.pg-hero .pg-regua {
  width: 72px;
  height: 4px;
  background: var(--pg-ambar);
  margin: 0 0 22px;
}

/* ---------------------------------------------------------------------
   5. BOTÕES E CHAMADAS PARA AÇÃO
   O site atual não tem um botão de conversão persistente: o único caminho
   é "CONTATE-NOS" no fim da página.
   --------------------------------------------------------------------- */

.pg-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: var(--pg-toque);
  padding: 12px 28px;
  font-family: 'Open Sans', system-ui, Arial, sans-serif;
  font-size: 15.2px;
  /* Os 18 <button type=submit> usavam a altura de linha "normal" do navegador
     (~1,2) enquanto os <a> herdavam 1,43 — o botão de enviar saía com 45 px
     contra 49 px dos demais. Fixar a entrelinha iguala os dois. */
  line-height: 1.4;
  font-weight: 700;
  letter-spacing: .4px;
  text-transform: uppercase;
  text-decoration: none;
  border: 2px solid transparent;
  border-radius: var(--pg-raio);
  transition: background-color .18s ease, color .18s ease, border-color .18s ease;
}
.pg-btn-primario {
  background: var(--pg-azul);
  color: var(--pg-branco);
  border-left: 3px solid var(--pg-ambar); /* assinatura visual do tema atual */
}
.pg-btn-primario:hover,
.pg-btn-primario:focus {
  background: var(--pg-azul-esc);
  color: var(--pg-branco);
  text-decoration: none;
}
.pg-btn-secundario {
  background: transparent;
  color: var(--pg-branco);
  border-color: var(--pg-branco);
}
.pg-btn-secundario:hover,
.pg-btn-secundario:focus { background: rgba(255,255,255,.14); color: var(--pg-branco); }

.pg-hero .pg-btn-secundario { border-color: var(--pg-ambar); color: var(--pg-ambar); }
.pg-hero .pg-btn-secundario:hover { background: var(--pg-ambar); color: #1a1a1a; }

.pg-btn-bloco { display: flex; width: 100%; margin-top: 14px; }

.pg-acoes { display: flex; flex-wrap: wrap; gap: 14px; }

/*
 * Botão da barra do topo. Corrigido em 25/08/2026: era âmbar sobre a barra
 * âmbar — um botão sem contorno visível. Passa a azul da marca com texto
 * branco (6,9:1), que é como o próprio tema já desenhava a peça.
 */
.pg-cta-topo,
.header_s2 .top-header [class*="col-md-"] > a.pg-cta-topo {
  display: inline-flex;
  align-items: center;
  min-height: 34px;
  padding: 6px 16px;
  background: var(--pg-azul);
  color: var(--pg-branco);
  font-weight: 700;
  font-size: 13px;
  letter-spacing: .3px;
  border-radius: var(--pg-raio);
  text-decoration: none;
}
.pg-cta-topo:hover,
.pg-cta-topo:focus,
.header_s2 .top-header [class*="col-md-"] > a.pg-cta-topo:hover {
  background: var(--pg-azul-esc);
  color: var(--pg-branco);
  text-decoration: none;
}

/* WhatsApp flutuante */
.pg-whats-float {
  position: fixed;
  right: 18px;
  bottom: 18px;
  z-index: 998;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 52px;
  padding: 0 20px;
  background: #128c7e;         /* verde escurecido: 4,6:1 com texto branco */
  color: #fff;
  font-weight: 700;
  border-radius: 999px;
  box-shadow: 0 6px 20px rgba(0,0,0,.28);
  text-decoration: none;
}
.pg-whats-float:hover, .pg-whats-float:focus { background: #0e7266; color: #fff; text-decoration: none; }
.pg-whats-float i { font-size: 24px; }
@media (max-width: 480px) {
  .pg-whats-float span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  .pg-whats-float { padding: 0; width: 56px; height: 56px; justify-content: center; }
}

/* ---------------------------------------------------------------------
   6. CABEÇALHO E CONTATOS
   --------------------------------------------------------------------- */

/*
 * CORREÇÃO (25/08/2026) — a barra do topo do tema (header_s2) tem fundo
 * ÂMBAR, não azul. Eu havia escrito a tagline em azul-claro e o destaque
 * "Porto Feliz" no próprio âmbar: âmbar sobre âmbar é texto invisível, e foi
 * exatamente isso que apareceu na homologação.
 *
 * A barra inteira passa a usar texto escuro, que é o que funciona sobre
 * âmbar. Isso também corrige um problema que o tema já trazia de origem: o
 * branco sobre #ffb300 tem contraste de 1,79:1 e reprova em qualquer
 * critério do WCAG.
 */
.header_s2 .top-header,
.header_s2 .top-header a,
.header_s2 .top-header .top-social li a,
.header_s2 .top-header [class*="col-md-"] > a {
  color: #1a1a1a;                       /* 8,9:1 sobre o âmbar da marca */
}
.header_s2 .top-header .top-social li a:hover,
.header_s2 .top-header [class*="col-md-"] > a:hover {
  color: var(--pg-azul-esc);            /* 5,9:1 — continua aprovado */
}

.pg-tagline { margin: 0; font-size: 13.44px; line-height: 38px; color: #1a1a1a; }
.pg-tagline strong { color: #00376f; }  /* azul escuro: 6,5:1 sobre o âmbar */

.pg-faixa-contato { display: flex; flex-wrap: wrap; align-items: center; padding: 14px 0; }
.pg-contatos-col { display: flex; flex-wrap: wrap; gap: 6px 26px; justify-content: flex-end; }
.pg-contato-item { margin: 0; font-size: 14.72px; color: var(--pg-txt); }
.pg-contato-item a { color: var(--pg-azul); font-weight: 600; }
.pg-contato-item i { color: var(--pg-ambar-txt); margin-right: 6px; }
.pg-sep { color: var(--pg-borda); margin: 0 4px; }
/* O verde vem da variável desde 02/09/2026: o #128c7e da marca dava 4,14:1
   sobre branco e reprovava em AA. O !important continua porque o tema pinta
   todo link dentro do bloco de contato com a cor dele. */
.pg-whats { color: var(--pg-verde) !important; font-weight: 700; }

@media (max-width: 767px) {
  .pg-contatos-col { justify-content: flex-start; margin-top: 10px; }
  .pg-endereco { width: 100%; }
}

/* Item de menu ativo — hoje não há nenhuma indicação de onde o usuário está. */
.ownavigation .navbar-nav > li.active > a,
.ownavigation .navbar-nav > li > a[aria-current="page"] {
  color: var(--pg-ambar);
  box-shadow: inset 0 -3px 0 var(--pg-ambar);
}
.pg-menu-cliente > a { opacity: .85; font-size: 14.08px; }

/* ---------------------------------------------------------------------
   7. TRILHA DE NAVEGAÇÃO
   --------------------------------------------------------------------- */

.pg-breadcrumb { background: var(--pg-azul-claro); border-bottom: 1px solid var(--pg-borda); }
.pg-breadcrumb ol {
  list-style: none;
  margin: 0;
  /* 12 px em cima e embaixo davam uma faixa de 61 px. A trilha é navegação
     secundária e aparece acima do herói em 26 páginas: 61 px ali custam mais
     do que valem. Com 8 px a faixa fica em 45 px sem apertar o alvo de
     clique, porque o próprio <a> ganha área abaixo. */
  padding: 8px 0;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  font-size: 13.76px;
  line-height: 1.5;
}
.pg-breadcrumb li { display: flex; align-items: center; gap: 6px; }
.pg-breadcrumb li + li::before { content: "›"; color: var(--pg-txt-suave); }
.pg-breadcrumb a {
  color: var(--pg-azul);          /* 6,04:1 sobre o azul-claro da faixa */
  /* Área de clique confortável sem alargar a faixa: o padding vertical fica
     dentro da altura de linha já existente. */
  padding: 5px 2px;
  border-radius: 3px;
}
.pg-breadcrumb a:hover, .pg-breadcrumb a:focus { color: var(--pg-azul-esc); }
.pg-breadcrumb [aria-current="page"] { color: var(--pg-txt-suave); }

/* No celular a trilha compete com o cabeçalho pela primeira tela. Ela continua
   inteira — quem chega por busca numa página de cidade precisa ver que existe
   um nível "Onde atendemos" acima —, só um pouco mais discreta. */
@media (max-width: 767px) {
  .pg-breadcrumb ol { padding: 6px 0; font-size: 13px; gap: 5px; }
  .pg-breadcrumb li { gap: 5px; }
}

/* ---------------------------------------------------------------------
   8. CONTEÚDO — legibilidade
   --------------------------------------------------------------------- */

.pg-secao { padding: 64px 0; }
.pg-secao--alt { background: #f6f8fb; }

.pg-titulo-secao { margin-bottom: 34px; }
.pg-titulo-secao .pg-chapeu {
  display: block;
  font-family: 'Open Sans', system-ui, Arial, sans-serif;
  font-size: 12.48px;
  font-weight: 700;
  letter-spacing: 1.6px;
  text-transform: uppercase;
  color: var(--pg-ambar-txt);
  margin-bottom: 8px;
}
.pg-titulo-secao h2 {
  font-size: clamp(22.4px, 3vw, 32.8px);
  font-weight: 700;
  color: #17293d;
  margin: 0;
}
.pg-titulo-secao h2::after {
  content: "";
  display: block;
  width: 56px;
  height: 3px;
  background: var(--pg-ambar);
  margin-top: 14px;
}

/* O tema define body{font-size:14px}. Para blocos de leitura longa isso é
   pequeno demais — 16px é o mínimo confortável e evita o zoom automático do
   iOS. Aplicado só ao conteúdo novo, para não deslocar componentes do tema. */
.pg-prosa { font-size: 16px; line-height: 1.68; }
.pg-prosa p { max-width: 72ch; margin-bottom: 1.15em; }
.pg-prosa li { margin-bottom: .5em; }
.pg-faq .pg-faq-resposta { font-size: 16px; line-height: 1.68; }
.pg-faq summary { font-size: 16px; }
.pg-tabela { font-size: 15px; }

/* Cartões de serviço */
.pg-cards { display: grid; gap: 22px; grid-template-columns: repeat(auto-fit, minmax(258px, 1fr)); }
.pg-card {
  display: flex;
  flex-direction: column;
  padding: 26px 24px;
  background: var(--pg-branco);
  border: 1px solid var(--pg-borda);
  border-top: 3px solid var(--pg-azul);
  border-radius: var(--pg-raio);
  transition: box-shadow .2s ease, transform .2s ease;
}
/* 30 cartões em 9 grades subiam e ganhavam sombra sem serem clicáveis — a
   mesma animação dos 73 que levam a algum lugar. Movimento sob o cursor é
   promessa de clique; onde não há link, é ruído. */
.pg-card:has(a):hover { box-shadow: 0 10px 26px rgba(0,0,0,.09); transform: translateY(-3px); }
.pg-card h3 { font-size: 17px; font-weight: 700; color: #17293d; margin-bottom: .5em; line-height: 1.3; }
.pg-card p { font-size: 14.88px; color: var(--pg-txt); flex: 1; }
.pg-card .pg-card-link { font-weight: 700; color: var(--pg-azul); text-decoration: none; }
.pg-card .pg-card-link::after { content: " →"; }
.pg-card i { font-size: 30.4px; color: var(--pg-azul); margin-bottom: 12px; }

/* Selos de confiança (E-E-A-T visual) */
/* A faixa de provas virou componente de grade — ver a seção 21. */
.pg-selo i { color: var(--pg-azul); font-size: 20.8px; }
.pg-selo strong { color: var(--pg-ambar-txt); }

/* ---------------------------------------------------------------------
   9. PERGUNTAS FREQUENTES
   Bloco de maior retorno em AEO/GEO: é o formato que os buscadores
   generativos citam com mais frequência.
   --------------------------------------------------------------------- */

/*
 * O acordeão ocupa a largura inteira da seção. Antes tinha max-width de
 * 78ch, o que deixava metade da página vazia à direita — a limitação de
 * medida de linha faz sentido para parágrafo corrido, não para um
 * componente. O texto da resposta é que fica limitado, logo abaixo.
 */
.pg-faq { max-width: none; }
.pg-faq details {
  border: 1px solid var(--pg-borda);
  border-radius: var(--pg-raio);
  margin-bottom: 12px;
  background: var(--pg-branco);
}
.pg-faq summary {
  cursor: pointer;
  padding: 16px 20px;
  font-weight: 700;
  color: #17293d;
  list-style: none;
  display: flex;
  justify-content: space-between;
  gap: 16px;
  min-height: var(--pg-toque);
  align-items: center;
}
.pg-faq summary::-webkit-details-marker { display: none; }
.pg-faq summary::after { content: "+"; color: var(--pg-azul); font-size: 22.4px; line-height: 1; }
.pg-faq details[open] summary::after { content: "–"; }
.pg-faq details[open] summary { border-bottom: 1px solid var(--pg-borda); }
.pg-faq .pg-faq-resposta { padding: 16px 20px; }
/* Sem limite de medida aqui: desde 02/09/2026 a seção de FAQ entra no
   arranjo de duas colunas, então o painel já tem 629 px e a linha sai com
   ~70 caracteres. O limite de 78ch fazia a resposta parar a 714 px dentro
   de um painel de 1170 px — o texto ocupava 60% da caixa e o resto ficava
   vazio, que foi exatamente a reclamação. */
.pg-faq .pg-faq-resposta p { margin: 0 0 .8em; }
.pg-faq .pg-faq-resposta p:last-child { margin-bottom: 0; }

/* ---------------------------------------------------------------------
   10. FORMULÁRIOS
   Os formulários atuais só têm placeholder — o rótulo some assim que o
   usuário começa a digitar, o que reprova em WCAG 3.3.2 e prejudica a
   taxa de conclusão.
   --------------------------------------------------------------------- */

.pg-campo { margin-bottom: 18px; }
.pg-campo label {
  display: block;
  font-size: 14.08px;
  font-weight: 700;
  color: #17293d;
  margin-bottom: 6px;
}
.pg-campo .pg-obrigatorio { color: var(--pg-erro); }
.pg-campo .pg-ajuda { display: block; font-size: 12.8px; color: var(--pg-txt-suave); margin-top: 4px; }

.contact-form .form-control,
.pg-campo input,
.pg-campo select,
.pg-campo textarea {
  width: 100%;
  min-height: var(--pg-toque);
  padding: 11px 14px;
  font-size: 16px;              /* 16px evita zoom automático no iOS */
  color: var(--pg-txt);
  background: var(--pg-branco);
  border: 1px solid #b9c2cc;
  border-radius: var(--pg-raio);
}
.pg-campo textarea { min-height: 130px; resize: vertical; }
.pg-campo input:focus, .pg-campo select:focus, .pg-campo textarea:focus { border-color: var(--pg-azul); }
.pg-campo input[aria-invalid="true"], .pg-campo textarea[aria-invalid="true"] { border-color: var(--pg-erro); }

/* Honeypot: precisa ser invisível para o humano e preenchível pelo robô.
   display:none seria detectado por robôs mais espertos. */
.pg-hp {
  position: absolute !important;
  left: -9999px !important;
  width: 1px; height: 1px;
  overflow: hidden;
}

.alert-msg { margin-top: 14px; padding: 0; font-weight: 600; }
.alert-msg--success { color: var(--pg-ok); }
.alert-msg--error   { color: var(--pg-erro); }

/* ---------------------------------------------------------------------
   11. TABELAS E LISTAS DE TELEFONES ÚTEIS
   --------------------------------------------------------------------- */

.pg-tabela { width: 100%; border-collapse: collapse; }
.pg-tabela caption { text-align: left; font-weight: 700; padding-bottom: 12px; color: #17293d; }
.pg-tabela th, .pg-tabela td { padding: 12px 14px; border-bottom: 1px solid var(--pg-borda); text-align: left; }
.pg-tabela thead th { background: var(--pg-azul-claro); color: #17293d; }
.pg-tabela td a { color: var(--pg-azul); font-weight: 700; }
@media (max-width: 600px) {
  .pg-tabela thead { position: absolute; left: -9999px; }
  .pg-tabela tr { display: block; border-bottom: 2px solid var(--pg-borda); padding: 8px 0; }
  .pg-tabela td { display: flex; justify-content: space-between; gap: 16px; border: 0; padding: 6px 0; }
  .pg-tabela td::before { content: attr(data-rotulo); font-weight: 700; color: var(--pg-txt-suave); }
}

/* ---------------------------------------------------------------------
   12. RODAPÉ
   --------------------------------------------------------------------- */

.widget-title { font-size: 16.8px; }
.widget_everywhere address { font-style: normal; }
.pg-horario { font-size: 14.08px; margin-top: 14px; }

/* Lista de cidades do rodapé: duas colunas para caber sem alongar o rodapé,
   e cada item com altura mínima de toque. */
.pg-area-lista {
  list-style: none;
  padding: 0;
  margin: 0 0 12px;
  columns: 2;
  column-gap: 18px;
  font-size: 14px;
}
.pg-area-lista li { break-inside: avoid; margin-bottom: 2px; }
.pg-area-lista a {
  display: inline-block;
  padding: 4px 0;
  min-height: 24px;
}
.pg-area-lista .pg-sede {
  font-size: 11px;
  color: var(--pg-ambar);
  text-transform: uppercase;
  letter-spacing: .06em;
}

.pg-nav-rodape ul { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 2px 6px; }
.pg-nav-rodape a { font-size: 13.76px; text-decoration: none; }

.pg-cta-botoes { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; }
@media (max-width: 767px) { .pg-cta-botoes { margin-top: 18px; } .pg-cta-botoes .pg-btn { flex: 1 1 100%; } }

/* ---------------------------------------------------------------------
   12b. BLOCO DE AVALIAÇÕES NO GOOGLE
   --------------------------------------------------------------------- */

.pg-avaliacoes { background: var(--pg-azul-claro); }
.pg-avaliacoes .pg-btn-escuro {
  color: var(--pg-azul);
  border-color: var(--pg-azul);
  background: var(--pg-branco);
}
.pg-avaliacoes .pg-btn-escuro:hover,
.pg-avaliacoes .pg-btn-escuro:focus {
  background: var(--pg-azul);
  color: var(--pg-branco);
}
.pg-avaliacoes .pg-acoes { margin-top: 4px; }

/* ---------------------------------------------------------------------
   13. AVISO DE COOKIES
   Fica acima do botão de WhatsApp para não cobri-lo, e some assim que o
   visitante escolhe. Nenhuma escolha é pré-marcada.
   --------------------------------------------------------------------- */

.pg-cookies {
  position: fixed;
  left: 0; right: 0; bottom: 0;
  z-index: 999;
  background: #0b1c2c;
  color: #e9f0f7;
  border-top: 3px solid var(--pg-ambar);
  box-shadow: 0 -6px 24px rgba(0,0,0,.25);
}
.pg-cookies[hidden] { display: none; }
.pg-cookies-inner {
  max-width: 1140px;
  margin: 0 auto;
  padding: 18px 22px;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 16px 28px;
  justify-content: space-between;
}
.pg-cookies p { margin: 0; font-size: 14px; line-height: 1.6; max-width: 74ch; }
.pg-cookies .pg-cookies-titulo { font-weight: 700; font-size: 15px; margin-bottom: 4px; }
.pg-cookies a { color: var(--pg-ambar); text-underline-offset: 2px; }
.pg-cookies-acoes { display: flex; gap: 10px; flex-wrap: wrap; }
.pg-cookies .pg-btn { padding: 10px 22px; font-size: 13px; }
.pg-cookies .pg-btn-secundario { color: #e9f0f7; border-color: rgba(255,255,255,.55); }
.pg-cookies .pg-btn-secundario:hover { background: rgba(255,255,255,.12); }

/* Com o banner aberto, o WhatsApp sai de cena.
   Tentar apenas "subir" o botão não funciona: a altura do banner varia com
   a largura da tela (213 px a 375 px, bem menos no desktop), então qualquer
   valor fixo acerta em um tamanho e erra no outro. Como o aviso é uma
   interação única e de resposta imediata, esconder é mais honesto do que
   empilhar dois elementos flutuantes disputando o mesmo canto. */
.pg-cookies:not([hidden]) ~ .pg-whats-float {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}

@media (max-width: 600px) {
  .pg-cookies-inner { padding: 16px 18px; }
  .pg-cookies-acoes { width: 100%; }
  .pg-cookies-acoes .pg-btn { flex: 1; }
}

/* ---------------------------------------------------------------------
   14. IMPRESSÃO
   --------------------------------------------------------------------- */

@media print {
  .top-header, .ownavigation, .pg-whats-float, .pg-cookies, .query-section, .skip-link { display: none !important; }
  body { color: #000; font-size: 12pt; }
  a[href^="http"]::after { content: " (" attr(href) ")"; font-size: 9pt; }
}

/* =====================================================================
   14. RODAPÉ E FAIXA DE CTA — correção de camadas e alinhamento
   (25/08/2026)

   O tema desenha uma camada escura sobre o rodapé e um padrão sobre a
   faixa de CTA:

       .footer-main-2::before { background-color: rgba(0,0,0,0.89); position:absolute; ... }
       .query-section::before { background-image: url(query-pattern.png); position:absolute; ... }

   Nenhuma das duas recebe z-index, e o conteúdo dessas seções é estático.
   Em CSS, elemento posicionado pinta ACIMA de elemento estático — então as
   camadas cobriam o próprio texto. Era isso que deixava o rodapé com a foto
   de fundo aparecendo por cima das palavras e o texto ilegível.

   A correção é colocar o conteúdo acima da camada.
   ===================================================================== */

.footer-main-2 > .container,
.query-section > .container {
  position: relative;
  z-index: 1;
}

/* A camada do tema tem 89% de preto; com o conteúdo por cima, dá para
   escurecer um pouco mais e tirar a foto de fundo da disputa com o texto. */
.footer-main-2::before { background-color: rgba(8, 20, 32, .93); }

/* ---------------------------------------------------------------------
   Colunas do rodapé: alinhamento e respiro
   --------------------------------------------------------------------- */

.footer-main-2 { padding-top: 64px; padding-bottom: 48px; }

.footer-main-2 .row > [class*="col-md-"] { margin-bottom: 8px; }

.footer-main-2 .widget { margin-bottom: 26px; }

.footer-main-2 .widget-title {
  font-family: 'Raleway', system-ui, Arial, sans-serif;
  font-size: 18px;
  font-weight: 700;
  color: var(--pg-branco);
  margin-bottom: 18px;
}

/* Texto do rodapé: o tema usa cinza escuro sobre fundo escuro. */
.footer-main-2,
.footer-main-2 p,
.footer-main-2 address,
.footer-main-2 .widget_about p {
  color: #c3cedb;
}
.footer-main-2 a { color: #e8eef5; }
.footer-main-2 a:hover,
.footer-main-2 a:focus { color: var(--pg-ambar); }

/* Lista de serviços: o marcador do tema é um "›" absoluto que empurrava o
   texto e fazia item de duas palavras quebrar em duas linhas. */
.footer-main-2 .widget_links ul { list-style: none; padding: 0; margin: 0; }
.footer-main-2 .widget_links ul li { margin-bottom: 2px; }
.footer-main-2 .widget_links ul li a {
  display: block;
  padding: 5px 0 5px 18px;
  position: relative;
  min-height: 0;
  line-height: 1.45;
}
.footer-main-2 .widget_links ul li a::before {
  content: "›";
  position: absolute;
  left: 0;
  top: 4px;
  color: var(--pg-ambar);
  font-size: 15px;
}

/* Bloco de contato: ícone alinhado ao topo da linha, não ao meio, para
   endereço de duas ou três linhas não desalinhar. */
.footer-main-2 .cnt-detail p,
.widget_everywhere address p {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  margin-bottom: 10px;
  line-height: 1.5;
}
.footer-main-2 .cnt-detail p i,
.widget_everywhere address p i {
  color: var(--pg-ambar);
  margin: 3px 0 0;
  flex: 0 0 auto;
}

/* O horário estava colado no endereço e parecia parte dele. */
.pg-horario {
  margin-top: 16px;
  padding-top: 14px;
  border-top: 1px solid rgba(255, 255, 255, .14);
  font-size: 14px;
  line-height: 1.6;
}
.pg-horario strong { color: var(--pg-branco); }

/* Cidades: duas colunas com respiro, e a sede destacada. */
.pg-area-lista { columns: 2; column-gap: 22px; margin-bottom: 14px; }
.pg-area-lista li { break-inside: avoid; }
.pg-area-lista a { padding: 5px 0; }

.footer-main-2 .widget_area .pg-btn-bloco { margin-top: 18px; }

/* Rodapé inferior: separador e alinhamento. */
.footer-main-2 .btm-ftr {
  margin-top: 26px;
  padding-top: 22px;
  border-top: 1px solid rgba(255, 255, 255, .14);
}
.footer-main-2 .copyright p {
  margin: 0;
  font-size: 13px;
  line-height: 1.7;
  text-align: right;
}
@media (max-width: 991px) {
  .footer-main-2 .copyright p { text-align: left; margin-top: 14px; }
  .pg-area-lista { columns: 2; }
}

/* ---------------------------------------------------------------------
   Faixa de CTA acima do rodapé
   --------------------------------------------------------------------- */

.query-section {
  margin-top: 0;
  padding-top: 52px;
  padding-bottom: 52px;
}
.query-section .container { display: flex; flex-wrap: wrap; align-items: center; gap: 20px 32px; }
.query-section [class*="col-md-"] { float: none; padding-left: 0; padding-right: 0; }
.query-section h2 {
  color: var(--pg-branco);
  font-size: clamp(20px, 2.6vw, 28px);
  margin: 0 0 6px;
}
.query-section p { color: #dce8f6; margin: 0; }

/* O tema desenha uma forma branca pendurada abaixo da faixa; com o rodapé
   escuro logo em seguida, ela aparecia como um risco solto na tela. */
.query-section::after { display: none; }

/* =====================================================================
   15. TIPOGRAFIA — escala e famílias (25/08/2026)

   Dois problemas medidos no site em homologação:

   1. Os títulos estavam saindo em Open Sans, não em Raleway. O Bootstrap
      declara `.h1,...,h1,h2,h3,h4,h5,h6 { font-family: inherit }` e, desde
      que as folhas do tema passaram a ser bloqueantes, lib.css carrega
      DEPOIS do CSS crítico embutido no <head>. Mesma especificidade, ordem
      posterior: o `inherit` do Bootstrap vencia e os títulos herdavam a
      fonte do corpo. Regressão introduzida ao corrigir o carregamento —
      por isso a regra agora vive aqui, na última folha da cascata.

   2. Não havia escala definida para títulos DENTRO do conteúdo. Um <h2>
      de subseção (como "Como funciona", em orcamento.php) saía a 30 px,
      quase do tamanho do <h2> da seção (33 px) e do <h1> da página (36 px).
      Três níveis hierárquicos com praticamente o mesmo peso visual.
   ===================================================================== */

h1, h2, h3, h4, h5, h6,
.h1, .h2, .h3, .h4, .h5, .h6 {
  font-family: 'Raleway', system-ui, -apple-system, 'Segoe UI', Arial, sans-serif;
}

/* Nível 1 — título da página */
.pg-hero h1,
.pg-slide h1,
.pg-slide .pg-slide-titulo,
main > section h1 {
  font-weight: 800;
  letter-spacing: -.015em;
  line-height: 1.16;
}
main > section h1 { font-size: clamp(28px, 3.6vw, 42px); }

/* Nível 2 — título de seção */
.pg-titulo-secao h2 {
  font-weight: 700;
  font-size: clamp(23px, 2.7vw, 32px);
  letter-spacing: -.01em;
  line-height: 1.2;
}

/* Nível 3 — subtítulo dentro do texto corrido.
   Precisa ser claramente menor que o título da seção, senão o leitor
   perde a noção de o que está dentro de quê. */
.pg-prosa h2,
.pg-prosa .h2 {
  font-weight: 700;
  font-size: clamp(19px, 1.8vw, 23px);
  line-height: 1.25;
  color: #17293d;
  margin: 30px 0 12px;
}
.pg-prosa h3 {
  font-weight: 700;
  font-size: 18px;
  line-height: 1.3;
  color: #17293d;
  margin: 24px 0 10px;
}
.pg-prosa h4 {
  font-weight: 600;
  font-size: 16px;
  line-height: 1.35;
  color: #17293d;
  margin: 20px 0 8px;
}
.pg-prosa > :first-child { margin-top: 0; }

/* Listas numeradas do conteúdo (o "Como funciona" do orçamento). */
.pg-prosa ol { padding-left: 1.3em; }
.pg-prosa ol li { margin-bottom: 10px; }

/* =====================================================================
   16. SEÇÕES DE TEXTO — DUAS COLUNAS  (revisto em 02/09/2026)

   Histórico, porque a solução anterior estava errada:

   1ª tentativa — texto à esquerda com medida limitada. Resultado: 55% da
      largura ocupada e 45% de vazio à direita. A seção parecia cortada.
   2ª tentativa — a mesma coluna estreita, centralizada. O vazio ficou
      equilibrado, mas apareceu um problema pior: a coluna passou a começar
      190 px à direita da trilha de navegação, dos títulos das outras seções
      e das grades de cartões. Toda a página se alinha na borda esquerda do
      container, menos essas seções. Desalinhamento é mais visível do que
      espaço vazio.

   O erro das duas foi tratar como problema de largura o que é problema de
   PROPORÇÃO. Encher 1140 px com texto de 16 px daria ~140 caracteres por
   linha, o dobro do legível — então o texto realmente não pode ocupar a
   faixa inteira sozinho. A saída é dar companhia a ele: título e chapéu vão
   para uma coluna à esquerda, o texto para uma coluna à direita.

   Com isso a seção ocupa os mesmos 1140 px das seções de cartões, começa e
   termina exatamente nas mesmas bordas, e a linha de texto continua com
   medida confortável. É o mesmo arranjo que a seção de cartões já usa —
   título em cima, conteúdo distribuído — só que girado 90°.

   Abaixo de 992 px vira uma coluna só: em tela estreita não há largura
   sobrando para distribuir, e o título empilhado sobre o texto é o certo.

   Em navegador sem :has() nada disso é aplicado e volta o empilhamento
   simples, que continua legível.
   ===================================================================== */

@media (min-width: 992px) {

  /* A seção só vira duas colunas quando tem um bloco de título E não tem
     nenhuma estrutura que já ocupe a largura por conta própria: grade de
     cartões, linha do Bootstrap, tabela, formulário, acordeão de perguntas
     ou lista de cidades.

     .pg-selos e .pg-faq ficaram FORA dessa lista de propósito.

     .pg-selos é uma grade de cartões que reflui sozinha numa coluna de
     629 px. Enquanto estava na lista, seções como "Portaria virtual em
     Porto Feliz" caíam em coluna única e o texto voltava a ocupar 56% da
     faixa — o defeito que esta seção existe para corrigir.

     .pg-faq saiu da lista em 02/09/2026 pelo mesmo motivo. O acordeão
     ocupava os 1170 px inteiros, mas a RESPOSTA parava em 714 px: painel
     largo com texto ocupando 60% dele e 456 px de vazio à direita. Como o
     bloco tem a mesma forma das outras seções (.pg-titulo-secao + conteúdo),
     ele entra no mesmo arranjo: título à esquerda, acordeão à direita, e a
     resposta preenche o painel. */
  main > section:not(.pg-hero):not(.pg-carrossel) > .container:has(> .pg-titulo-secao):not(:has(
        .pg-cards, .row, .tabela-wrap, .pg-lista-cidades, form, table)) {
    display: grid;
    /* Medido: com 1 : 1,45 a linha saía com 79 caracteres. Em 1 : 1,3 a
       coluna de texto fica com 629 px, que a 16 px Open Sans dá 75
       caracteres por linha — o topo da faixa recomendada (45 a 75). */
    grid-template-columns: minmax(220px, 1fr) minmax(0, 1.3fr);
    column-gap: clamp(40px, 4.5vw, 72px);
    align-items: start;
  }

  main > section:not(.pg-hero):not(.pg-carrossel) > .container:has(> .pg-titulo-secao):not(:has(
        .pg-cards, .row, .tabela-wrap, .pg-lista-cidades, form, table))
        > .pg-titulo-secao {
    grid-column: 1;
    grid-row: 1;
    margin-bottom: 0;
    /* Acompanha a leitura em seções longas, sem sair da própria coluna.
       O 104 px é a altura da barra fixa mais uma folga. */
    position: sticky;
    top: 104px;
  }

  /* Texto, botões e observações empilham na coluna da direita, na ordem
     em que aparecem no HTML. */
  main > section:not(.pg-hero):not(.pg-carrossel) > .container:has(> .pg-titulo-secao):not(:has(
        .pg-cards, .row, .tabela-wrap, .pg-lista-cidades, form, table))
        > :not(.pg-titulo-secao) {
    grid-column: 2;
  }

  /* A coluna já garante a medida da linha: o limite em ch dentro dela
     encolheria o texto duas vezes. */
  main > section:not(.pg-hero):not(.pg-carrossel) > .container:has(> .pg-titulo-secao):not(:has(
        .pg-cards, .row, .tabela-wrap, .pg-lista-cidades, form, table))
        .pg-prosa p,
  main > section:not(.pg-hero):not(.pg-carrossel) > .container:has(> .pg-titulo-secao):not(:has(
        .pg-cards, .row, .tabela-wrap, .pg-lista-cidades, form, table))
        .pg-prosa li {
    max-width: none;
  }

  /* Título longo numa coluna estreita não pode estourar a coluna. */
  main > section > .container:has(> .pg-titulo-secao) > .pg-titulo-secao :is(h1, h2) {
    overflow-wrap: break-word;
  }
}

/* ---------------------------------------------------------------------
   Bloco "serviços relacionados"

   É um parágrafo solto, sem título — não tem par para formar duas colunas.
   Sozinho no meio de 1140 px ele parecia sobra de outra seção. Recebe forma
   de nota lateral: traço âmbar à esquerda, fundo suave e a largura inteira
   da faixa. Assim ocupa a seção toda sem virar uma linha de 140 caracteres.
   --------------------------------------------------------------------- */

.pg-relacionados {
  border-left: 4px solid var(--pg-ambar);
  background: var(--pg-azul-claro);
  border-radius: 0 var(--pg-raio) var(--pg-raio) 0;
  padding: 20px 26px;
}
.pg-relacionados p { margin: 0; max-width: 70ch; }
/* =====================================================================
   17. CELULAR — CABEÇALHO ENXUTO E BARRA DE AÇÕES  (revisto em 02/09/2026)

   O problema medido a 375 px: 292 px de cabeçalho antes do conteúdo.
   Barra âmbar (50 px) + telefone, e-mail, endereço e WhatsApp empilhados
   em quatro linhas (168 px) + logo e menu (74 px). Quase metade da
   primeira tela gasta antes de o visitante ver qualquer coisa.

   Havia um segundo problema, mais caro: telefone e WhatsApp só existiam
   ali. Bastava rolar meia tela e os dois canais de conversão sumiam — num
   serviço de segurança, em que a maior parte do contato acontece por
   telefone, isso é perder o pedido.

   As duas coisas se resolvem com a mesma mudança: tirar os contatos do
   topo e colocá-los numa barra fixa embaixo, na zona do polegar. O topo
   fica com logo e menu (56 px), e "Ligar", "WhatsApp" e "Orçamento"
   passam a estar sempre na tela, em qualquer ponto da página.

   Endereço e e-mail continuam no rodapé desta mesma página, em texto, e no
   JSON-LD — o NAP não se perde, só deixa de ocupar a primeira tela.
   ===================================================================== */

@media (max-width: 991px) {
  .header_s2 .top-header    { display: none; }
  .header_s2 .middle-header { display: none; }

  /* Sem as duas faixas acima, a barra de navegação vira o cabeçalho
     inteiro: precisa da sombra que antes vinha do bloco de contato. */
  .pg-barra-fixa { box-shadow: 0 2px 10px rgba(8, 20, 32, .10); }
  .header_s2 .ownavigation .navbar-header { min-height: 56px; }
  .header_s2 .pg-logo-menu img { height: 38px; width: auto; }
}

/* ---------------------------------------------------------------------
   Botão do menu sanduíche

   O tema desenha barras BRANCAS sobre fundo âmbar — contraste de 1,79:1,
   o mesmo problema que a barra do topo tinha. Além disso o botão ficava
   com cara de caixa amarela solta. Agora usa o azul da marca com barras
   brancas (6,9:1) e ganha forma de botão.
   --------------------------------------------------------------------- */

@media (max-width: 991px) {
  .header_s2 .ownavigation .navbar-toggle {
    background-color: var(--pg-azul);
    border: 0;
    border-radius: var(--pg-raio);
    padding: 0 14px;
    width: auto;
    gap: 5px;
    flex-direction: column;
  }
  .header_s2 .ownavigation .navbar-toggle:hover,
  .header_s2 .ownavigation .navbar-toggle:focus {
    background-color: var(--pg-azul-esc);
  }
  .header_s2 .ownavigation .navbar-toggle .icon-bar {
    background-color: var(--pg-branco);
    width: 22px;
    height: 2px;
    border-radius: 1px;
    margin: 0;
    display: block;
  }
}

/* ---------------------------------------------------------------------
   BARRA DE AÇÕES FIXA (só no celular e no tablet)

   Três alvos de 33% da largura por 56 px de altura — bem acima do mínimo
   de 44 px do WCAG 2.5.8. Cada rótulo tem contraste próprio verificado
   sobre o branco: azul 6,9:1, verde 5,8:1, âmbar escurecido 7,2:1.
   O verde do WhatsApp é o mesmo tom escurecido do botão flutuante, não o
   verde da marca, que sobre branco dá 4,1:1 e reprova em texto pequeno.
   --------------------------------------------------------------------- */

.pg-barra-acoes { display: none; }

@media (max-width: 991px) {
  .pg-barra-acoes {
    display: flex;
    position: fixed;
    left: 0; right: 0; bottom: 0;
    z-index: 998;
    background: var(--pg-branco);
    border-top: 1px solid var(--pg-borda);
    box-shadow: 0 -2px 14px rgba(8, 20, 32, .12);
    /* Área segura do iPhone: sem isto os rótulos ficam sob a barra do
       sistema nos aparelhos sem botão físico. */
    padding-bottom: env(safe-area-inset-bottom, 0px);
  }

  .pg-acao {
    flex: 1 1 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 3px;
    min-height: 56px;
    padding: 6px 4px;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .04em;
    text-transform: uppercase;
    text-decoration: none;
    line-height: 1.2;
  }
  .pg-acao + .pg-acao { border-left: 1px solid var(--pg-borda); }
  .pg-acao i { font-size: 19px; line-height: 1; }
  .pg-acao:active { background: var(--pg-azul-claro); }
  .pg-acao:focus-visible { outline: 3px solid var(--pg-azul); outline-offset: -3px; }

  .pg-acao--ligar,     .pg-acao--ligar:hover,     .pg-acao--ligar:focus     { color: var(--pg-azul); }
  .pg-acao--whats,     .pg-acao--whats:hover,     .pg-acao--whats:focus     { color: #0e7266; }
  .pg-acao--orcamento, .pg-acao--orcamento:hover, .pg-acao--orcamento:focus { color: var(--pg-ambar-txt); }

  /* Dois elementos flutuantes disputando o canto inferior seria pior do
     que um só: no celular a barra assume o papel do botão redondo. */
  .pg-whats-float { display: none; }

  /* Espaço para o rodapé não terminar debaixo da barra. */
  body { padding-bottom: calc(56px + env(safe-area-inset-bottom, 0px)); }

  /* Enquanto o aviso de cookies está aberto, ele ocupa o rodapé da tela.
     Empilhar os dois deixaria a barra escondida atrás do aviso. */
  /* Antes a barra de ações sumia enquanto o aviso estava aberto — ou seja,
     durante TODA a primeira visita o celular ficava sem nenhum canal de
     contato persistente: o botão flutuante já está oculto abaixo de 992 px e
     a barra âmbar também. Como a barra tem altura conhecida, dá para empilhar
     em vez de esconder (aviso com z-index 999, barra com 998). */
  .pg-cookies:not([hidden]) { bottom: calc(56px + env(safe-area-inset-bottom, 0px)); }
}

/* Aparelhos muito estreitos: o rótulo encolhe antes do ícone, que é o que
   identifica a ação mais rápido. */
@media (max-width: 359px) {
  .pg-acao { font-size: 10px; letter-spacing: 0; }
}

/* =====================================================================
   18. DOIS DEFEITOS ENCONTRADOS NA REVISÃO DO CELULAR (02/09/2026)
   ===================================================================== */

/* ---------------------------------------------------------------------
   18a. A navegação do carrossel caía em cima do botão do telefone

   As setas e as bolinhas são posicionadas por absoluto sobre o slide, sem
   reservar espaço. Enquanto os dois botões do herói cabiam lado a lado
   isso não aparecia; a 375 px eles empilham, o conteúdo cresce e alcança
   o rodapé do slide.

   Medido a 375 px: sobreposição de 40 px de altura por 146 px de largura
   sobre o botão "(15) 3262-4603" — a seta e três bolinhas ficavam por cima
   dele, com z-index 2. Além de feio, o toque destinado ao telefone caía na
   bolinha do carrossel.

   Reservar a faixa no próprio slide resolve para qualquer largura: o slide
   é flex centralizado, então o padding apenas recentraliza o conteúdo na
   área que sobra, em vez de depender de a frase ser curta o bastante.
   --------------------------------------------------------------------- */

/* O padding de cima resolve o mesmo problema na outra ponta: com o conteúdo
   mais alto que o min-height, o flex centralizado não tem folga e o traço
   âmbar do topo ficava encoberto pela barra de navegação fixa. */
.pg-slide { padding-top: 40px; padding-bottom: 80px; }   /* 44 da seta + 22 do fundo + folga */

@media (max-width: 600px) {
  .pg-slide { padding-top: 30px; padding-bottom: 68px; }  /* seta de 40 px e fundo de 14 px */
}

/* ---------------------------------------------------------------------
   18b. (histórico) Espaço a mais em volta das palavras em negrito

   `.pg-selo` usava display:flex, e o flex transforma CADA trecho do conteúdo
   em item independente: "Sede em", <strong>Porto Feliz/SP</strong> e ", não
   somos de fora" viravam três caixas com o gap de 10 px entre elas. Saía
   espaço antes da vírgula e a quebra de linha acontecia entre as caixas.

   Resolvido de forma definitiva na seção 21: o texto passou a ficar dentro
   de um <span> próprio no HTML, então não existe mais trecho solto para o
   flex separar. O recuo pendente que havia aqui foi removido junto.
   --------------------------------------------------------------------- */

/* =====================================================================
   19. CONTRASTE MEDIDO EM 27 PÁGINAS  (02/09/2026)

   Varredura das 27 páginas em 1280 px e 375 px, com o fundo real composto
   camada por camada (fundo do elemento, dos pseudo-elementos que o cobrem
   e dos ancestrais, com alfa). Sobraram quatro causas, 185 ocorrências.
   ===================================================================== */

/* ---------------------------------------------------------------------
   19a. O azul padrão do Bootstrap vazando nos links de conteúdo (116x)

   Nunca defini cor de link para o texto corrido, então valia o `a{color:#337ab7}`
   do Bootstrap. Sobre branco ele dá 4,62:1 e passa raspando; sobre os dois
   fundos claros que o site usa, não passa:

     #337ab7 sobre #f6f8fb (.pg-secao--alt)      4,28:1   60 ocorrências
     #337ab7 sobre #e8f1fb (.pg-relacionados)    3,99:1   30 ocorrências
     #337ab7 sobre #f6f8fb (formulário)          4,28:1   26 ocorrências

   O azul da marca resolve e ainda deixa o link com a cor da Persegue em vez
   da cor de fábrica do Bootstrap: 6,47:1 e 6,04:1 nos mesmos fundos.

   Escopo restrito aos blocos de conteúdo de propósito — o herói, a faixa de
   CTA e o rodapé têm fundo escuro e texto claro, e um azul escuro ali seria
   ilegível.
   --------------------------------------------------------------------- */

.pg-prosa a:not(.pg-btn),
.pg-ajuda a:not(.pg-btn),
.pg-card a:not(.pg-btn),
.pg-faq a:not(.pg-btn),
.pg-selo a:not(.pg-btn),
.tabela-wrap a:not(.pg-btn),
.pg-lista-cidades a:not(.pg-btn),
.contact-form a:not(.pg-btn),
.pg-relacionados a:not(.pg-btn) {
  color: var(--pg-azul);
  text-underline-offset: 2px;
}
.pg-prosa a:not(.pg-btn):hover,      .pg-prosa a:not(.pg-btn):focus,
.pg-ajuda a:not(.pg-btn):hover,      .pg-ajuda a:not(.pg-btn):focus,
.pg-card a:not(.pg-btn):hover,       .pg-card a:not(.pg-btn):focus,
.pg-faq a:not(.pg-btn):hover,        .pg-faq a:not(.pg-btn):focus,
.pg-selo a:not(.pg-btn):hover,       .pg-selo a:not(.pg-btn):focus,
.tabela-wrap a:not(.pg-btn):hover,   .tabela-wrap a:not(.pg-btn):focus,
.pg-lista-cidades a:not(.pg-btn):hover, .pg-lista-cidades a:not(.pg-btn):focus,
.contact-form a:not(.pg-btn):hover,  .contact-form a:not(.pg-btn):focus,
.pg-relacionados a:not(.pg-btn):hover, .pg-relacionados a:not(.pg-btn):focus {
  color: var(--pg-azul-esc);
}

/* ---------------------------------------------------------------------
   19b. Verde do WhatsApp reprovando nos dois sentidos (54x)

   O #128c7e dá 4,14:1 como texto sobre branco (link do cabeçalho) e
   4,14:1 como fundo sob texto branco (botão flutuante) — reprova nos dois.
   Uma única variável escurecida resolve os dois casos com 5,84:1.
   --------------------------------------------------------------------- */

.pg-whats-float { background: var(--pg-verde); }
.pg-whats-float:hover,
.pg-whats-float:focus { background: #0a5c52; }

/* ---------------------------------------------------------------------
   19c. Âmbar da marca sobre a barra azul do menu (15x)

   #ffb300 sobre #0056b7 dá 3,88:1, e o texto é de 14 px — precisa de 4,5:1.
   Atinge tanto o item destacado "Área do cliente" quanto o item ativo
   quando é um menu suspenso (Serviços, Onde atendemos, Contato).

   A saída não é trocar a cor da marca: é usar a mesma matiz mais clara,
   que é o que se faz com dourado sobre azul-escuro. O traço de destaque
   embaixo continua no âmbar cheio.
   --------------------------------------------------------------------- */

@media (min-width: 992px) {
  .header_s2 .ownavigation .navbar-nav > li.active > a,
  .header_s2 .ownavigation .navbar-nav > li.active > a:hover,
  .header_s2 .ownavigation .navbar-nav > li.active > a:focus,
  .header_s2 .ownavigation .navbar-nav > li.pg-menu-cliente > a,
  .header_s2 .ownavigation .navbar-nav > li.pg-menu-cliente > a:hover,
  .header_s2 .ownavigation .navbar-nav > li.pg-menu-cliente > a:focus {
    color: var(--pg-ambar-menu);
  }
}

/* ---------------------------------------------------------------------
   19d. Imagens declarando uma proporção que o arquivo não tem

   Os atributos width/height de uma <img> não são só uma dica de tamanho:
   o navegador usa a razão entre eles para reservar o espaço antes de
   decodificar o arquivo e, quando o CSS não manda outra coisa, para
   DESENHAR a imagem. Três casos estavam com o valor errado:

     assets/images/seguranca-patrimonial.png   520x420 declarado, 400x400 real
       → alongava 24% na horizontal (index.php e empresa.php)
     assets/images/ftr-logo.png                200x52 declarado, 195x58 real
       → achatava 14% na vertical (as 27 páginas, no rodapé)
     assets/images/logo.png                    170x44 declarado, 300x82 real
       → não distorcia, porque o CSS define a altura, mas a reserva de
         espaço saía 5,6% errada e provocava um pulo no cabeçalho fixo

   Os três também passaram a usar asset(), como o resto do site: sem isso
   ficavam de fora do cache-busting por filemtime.

   Com a proporção certa, a foto passa a ser desenhada no tamanho real
   (400 px) dentro de uma coluna de 470 px. Centralizar é melhor do que
   esticar: ampliar um arquivo de 400 px para 470 px em tela de alta
   densidade significa 940 pixels de aparelho saindo de 400 — fica borrado.
   --------------------------------------------------------------------- */

.pg-figura {
  display: block;
  max-width: 100%;
  height: auto;
  margin-left: auto;
  margin-right: auto;
  border-radius: var(--pg-raio);
}

/* =====================================================================
   20. FAIXA DE CONTATO DO CABEÇALHO — DE FRASE SOLTA A COLUNAS  (02/09/2026)

   Como estava: quatro parágrafos numa linha, ícone colado no texto, tudo
   em 14,7 px e na mesma cor. Telefone, e-mail, endereço e WhatsApp tinham
   exatamente o mesmo peso visual, então a faixa lia como uma frase corrida
   e o olho não achava nada sem varrer tudo.

   Como fica: quatro colunas, cada uma com o ícone num selo redondo, um
   rótulo pequeno em cima e o valor embaixo. É o mesmo conteúdo — nenhum
   dado de NAP saiu —, só que organizado. Os separadores verticais deixam
   claro onde uma informação termina e a outra começa.

   Só no desktop: abaixo de 992 px esta faixa continua escondida, e os
   contatos vivem na barra de ações fixa embaixo (seção 17).
   ===================================================================== */

/* O tema dá 39 px de respiro em cima e embaixo do bloco de contato. Isso
   fazia sentido quando o conteúdo era uma linha de texto de 29 px: o vazio
   era o único elemento separando a barra âmbar da barra azul. Agora que
   cada contato é uma coluna com moldura própria, o respiro do tema somado
   ao meu levava o cabeçalho de 251 px para 288 px — 37 px a mais na
   primeira tela de todas as páginas do desktop.

   Com o espaçamento ajustado ao conteúdo novo, o cabeçalho fica em 230 px:
   21 px MENOR que antes da mudança, e com muito mais informação legível. */
.header_s2 .middle-header { padding-top: 14px; padding-bottom: 14px; }
.pg-faixa-contato { padding: 8px 0; }

.pg-contatos-col {
  display: flex;
  flex-wrap: wrap;
  align-items: stretch;
  justify-content: flex-start;
  gap: 0;
}

.pg-contato-item {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 0;
  padding: 6px 26px;
  font-size: 14px;
  color: var(--pg-txt);
  line-height: 1.35;
}
/* Divisórias entre as colunas, não em volta delas. */
.pg-contato-item + .pg-contato-item { border-left: 1px solid var(--pg-borda); }
.pg-contatos-col > .pg-contato-item:first-child { padding-left: 0; }
.pg-contatos-col > .pg-contato-item:last-child  { padding-right: 0; }

/* O ícone vira selo: o mesmo tamanho para todos, alinhado, e com peso
   suficiente para servir de âncora visual da coluna. */
.pg-contato-item > i,
.pg-contato-item .pg-whats > i {
  flex: 0 0 auto;
  width: 34px;
  height: 34px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: var(--pg-azul-claro);
  color: var(--pg-azul);
  font-size: 15px;
  margin: 0;
}

.pg-contato-txt { display: flex; flex-direction: column; gap: 1px; min-width: 0; }

.pg-contato-rot {
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: .07em;
  text-transform: uppercase;
  color: var(--pg-txt-suave);      /* 6,4:1 sobre branco */
}
.pg-contato-val { font-size: 14.5px; font-weight: 600; color: #17293d; }
.pg-contato-val a { color: var(--pg-azul); font-weight: 600; }
.pg-contato-val a:hover, .pg-contato-val a:focus { color: var(--pg-azul-esc); }
.pg-sep { color: var(--pg-borda); margin: 0 2px; }

/* O endereço é o texto mais longo (64 caracteres). Deixá-lo crescer fazia a
   coluna ocupar 733 px dos 1200 e empurrava o WhatsApp para uma segunda
   linha — a faixa ficava com 101 px de altura. Com a medida travada, ele
   quebra em duas linhas dentro da própria coluna e tudo cabe numa fila só. */
.pg-endereco { flex: 0 1 auto; }
.pg-endereco .pg-contato-val { max-width: 290px; }

/* O WhatsApp encosta na direita: separa o "onde nos achar" do "fale agora". */
.pg-contato-whats { margin-left: auto; }

/* WhatsApp com o selo em verde — é o único canal com identidade de cor
   própria, e serve de ponto de chegada do olho no fim da faixa. */
.pg-contato-whats .pg-whats { display: flex; align-items: center; gap: 12px; text-decoration: none; }
.pg-contato-whats .pg-whats > i { background: #e2f3ef; color: var(--pg-verde); font-size: 18px; }
.pg-contato-whats .pg-contato-val { color: var(--pg-verde); }
.pg-contato-whats .pg-whats:hover .pg-contato-val,
.pg-contato-whats .pg-whats:focus .pg-contato-val { color: #0a5c52; }

/* Entre 992 e 1199 px o container encolhe para 970 px e as quatro colunas
   não cabem em uma linha. Em vez de espremer, o endereço passa para baixo. */
@media (min-width: 992px) and (max-width: 1199px) {
  .pg-contato-item { padding: 6px 16px; }
  .pg-endereco .pg-contato-val { max-width: 230px; }
}

/* =====================================================================
   21. FAIXA DE PROVAS — DE LINHA DE TEXTO A GRADE DE CARTÕES  (02/09/2026)

   Como estava: os selos eram parágrafos numa fila com flex-wrap. Três
   cabiam na primeira linha, dois sobravam na segunda, tudo alinhado à
   esquerda, sem moldura e sem alinhamento entre as colunas. Lia como um
   parágrafo quebrado no meio, não como um bloco de provas.

   Como fica: uma grade de cartões de largura igual, que se reorganiza
   sozinha conforme o espaço. Cada cartão tem o ícone num selo redondo e,
   na variante de dados, o FATO na primeira linha e a explicação embaixo —
   porque quem varre a página lê o número, não a frase em volta dele.

   São duas variantes, com a mesma casca:

     .pg-selos            características do serviço (ícone à esquerda,
                          uma linha de texto) — usada nas páginas de serviço
     .pg-selos--dados     números e credenciais (ícone em cima, valor,
                          legenda, centralizado) — home, empresa, orçamento
                          e as 9 páginas de cidade
   ===================================================================== */

.pg-selos {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(215px, 1fr));
  gap: 14px;
  padding: 6px 0;
}

.pg-selo {
  margin: 0;
  padding: 16px 18px;
  background: var(--pg-branco);
  border: 1px solid var(--pg-borda);
  border-radius: var(--pg-raio);
  font-size: 14.4px;
  font-weight: 600;
  color: #17293d;
  line-height: 1.4;
}

/* O ícone tem tamanho fixo em todas as variantes: é o que faz as colunas
   parecerem alinhadas mesmo quando os textos têm alturas diferentes. */
.pg-selo > i {
  width: 40px;
  height: 40px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: var(--pg-azul-claro);
  color: var(--pg-azul);
  font-size: 17px;
  flex: 0 0 auto;
}

/* --- variante padrão: característica, ícone à esquerda --------------- */

.pg-selo {
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: center;
  column-gap: 14px;
}

/* --- variante de dados: ícone em cima, valor, legenda ---------------- */

.pg-selos--dados .pg-selo {
  grid-template-columns: 1fr;
  justify-items: center;
  text-align: center;
  row-gap: 2px;
  padding: 20px 16px;
}
.pg-selos--dados .pg-selo > i { margin-bottom: 8px; }

.pg-selos--dados .pg-selo > strong {
  font-family: 'Raleway', system-ui, -apple-system, 'Segoe UI', Arial, sans-serif;
  font-weight: 800;
  font-size: clamp(17px, 1.5vw, 19px);
  color: var(--pg-azul-esc);      /* 8,6:1 sobre branco */
  line-height: 1.2;
}
.pg-selos--dados .pg-selo > span {
  font-size: 13.5px;
  font-weight: 400;
  color: var(--pg-txt-suave);     /* 6,4:1 sobre branco */
  line-height: 1.45;
}

/* Sobre o fundo cinza-azulado das seções alternadas, o cartão branco já se
   destaca sozinho; a borda pode ser mais leve para não pesar. */
.pg-secao--alt .pg-selo { border-color: #e6ecf3; }

/* No celular a grade vira coluna única. O cartão de dados fica melhor com o
   ícone ao lado do que empilhado: economiza altura numa página que já tem
   11 telas de rolagem. */
@media (max-width: 575px) {
  .pg-selos { gap: 10px; }
  .pg-selos--dados .pg-selo {
    grid-template-columns: auto 1fr;
    justify-items: start;
    text-align: left;
    column-gap: 14px;
    padding: 14px 16px;
  }
  .pg-selos--dados .pg-selo > i { grid-column: 1; grid-row: 1 / span 2; margin-bottom: 0; }
  .pg-selos--dados .pg-selo > strong { grid-column: 2; grid-row: 1; }
  .pg-selos--dados .pg-selo > span   { grid-column: 2; grid-row: 2; }
}

/* =====================================================================
   22. AUDITORIA DE UX/UI DAS 27 PÁGINAS — CORREÇÕES  (02/09/2026)

   Sete auditorias em paralelo (arquitetura de informação, hierarquia
   visual, conversão, celular, acessibilidade, conteúdo e consistência),
   cada achado passado por um verificador adversarial cuja instrução era
   derrubá-lo. 52 sobreviveram, 16 caíram. Os que viram CSS estão aqui.
   ===================================================================== */

/* ---------------------------------------------------------------------
   22a. Menu quebrando em duas linhas entre 992 e 1199 px

   Notebook de 1024 a 1180 px: o container do tema tem 970 px, a logo ocupa
   205 px e a lista do menu mede 780 px. Não cabe — e como a barra é fixa, o
   cabeçalho passava de 66 px para 120 px em TODAS as páginas, o tempo todo.

   Recuperar o padding do collapse e 8 px por item devolve o menu para a
   mesma linha da logo, com cerca de 31 px de folga.
   --------------------------------------------------------------------- */

@media (min-width: 992px) and (max-width: 1199px) {
  .header_s2 .ownavigation .navbar-collapse { padding-left: 0; padding-right: 0; }
  .ownavigation .navbar-nav > li { margin-left: 5px; margin-right: 5px; }
}

/* ---------------------------------------------------------------------
   22b. Menu do celular: itens inalcançáveis e alvos de 32 px

   Com "Onde atendemos" aberto, o painel mede 787 px numa janela de 667 px.
   Como a barra é sticky, o painel rola JUNTO com ela: "Clientes", "Contato"
   e "Área do cliente" ficavam inalcançáveis em qualquer posição de rolagem.

   E os 21 links de submenu tinham 32 px de altura — a regra de --pg-toque
   só alcançava `.navbar-nav > li > a`, não os filhos.
   --------------------------------------------------------------------- */

@media (max-width: 991px) {
  .header_s2 .ownavigation .navbar-collapse {
    max-height: calc(100vh - 62px);
    max-height: calc(100dvh - 62px);   /* barra do navegador do celular */
    overflow-y: auto;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
    /* reserva a barra de ações fixa sem encurtar a área rolável */
    padding-bottom: calc(64px + env(safe-area-inset-bottom, 0px));
  }

  /* O caminho do seletor precisa ser o mesmo do tema, senão a
     especificidade perde e o padding não é aplicado. */
  .header_s2 .ownavigation .navbar-nav li .dropdown-menu > li > a {
    min-height: 44px;
    display: flex;
    align-items: center;
    padding-top: 10px;
    padding-bottom: 10px;
    font-size: 15px;
  }

  /* Único indicador de grupo aberto: o tema só troca o glifo quando o toque
     cai no ícone, não quando cai no texto do item. */
  .header_s2 .ownavigation .dropdown.open > .dropdown-toggle .ddl-switch:before {
    content: "\f106";
  }
}

/* ---------------------------------------------------------------------
   22c. Submenus do desktop inacessíveis por teclado

   O tema esconde o submenu com opacity:0 mais visibility:hidden e só reverte
   em `li.dropdown:hover`. Resultado: 0 de 21 links recebiam foco por Tab, e
   o aria-expanded="true" do Bootstrap anunciava um menu invisível —
   WCAG 2.1.1 (nível A) e 4.1.2.

   O :focus-within resolve mesmo se o JavaScript do tema falhar.
   --------------------------------------------------------------------- */

@media (min-width: 992px) {
  .ownavigation .navbar-nav > li.dropdown.open > .dropdown-menu,
  .ownavigation .navbar-nav > li.dropdown:focus-within > .dropdown-menu {
    margin-top: 0;
    opacity: 1;
    visibility: visible;
  }
}

/* ---------------------------------------------------------------------
   22d. Escala de espaçamento no celular

   64 px de respiro entre seções é valor pensado para 1200 px, aplicado sem
   mudança a 375 px: 128 px em cada emenda, 654 px por página em média,
   1024 px na pior. Numa página que já tem 11 telas, é rolagem pura.

   A margem do último bloco ainda somava ao padding da seção — o fundo
   efetivo chegava a 86 px. Zerar é escopado ao .pg-prosa que ENCERRA a
   seção: em segurancaeletronica.php um .pg-prosa é seguido, como irmão, por
   um .pg-cards, e zerar ali colaria os dois.
   --------------------------------------------------------------------- */

@media (max-width: 767px) {
  .pg-secao { padding: 40px 0; }
  .pg-titulo-secao { margin-bottom: 22px; }
  .pg-cards { gap: 16px; }
  .pg-card { padding: 20px 18px; }
}

.pg-secao > .container > .pg-prosa:last-child > :last-child { margin-bottom: 0; }
.pg-secao > .container > .pg-prosa:last-child > .pg-selos:last-child { padding-bottom: 0; }

/* ---------------------------------------------------------------------
   22e. Rodapé em duas colunas no celular

   A faixa de CTA mais o rodapé ocupavam 2295 px em todas as 27 páginas no
   celular — 55% da altura de cameraspublicas.php e 43% da 404. Quatro
   blocos empilhados em coluna única, cada um com o respiro do desktop.

   O cancelamento das margens negativas do .row e dos pseudo-elementos do
   clearfix NÃO é opcional: sem isso o rodapé sai do container e o clearfix
   vira item de grade, desmontando a fileira.
   --------------------------------------------------------------------- */

@media (max-width: 767px) {
  .footer-main-2 { padding-top: 40px; padding-bottom: 28px; }
  .footer-main-2 > .container > .row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    column-gap: 20px;
    margin-left: 0;
    margin-right: 0;
  }
  .footer-main-2 > .container > .row::before,
  .footer-main-2 > .container > .row::after { display: none; }
  .footer-main-2 > .container > .row > [class*="col-"] {
    width: auto;
    float: none;
    padding-left: 0;
    padding-right: 0;
    margin-bottom: 0;
    min-width: 0;
  }
  .footer-main-2 .widget { margin-bottom: 20px; }
  /* e-mail e endereço não cabem inteiros numa coluna de ~162 px a 375 px */
  .footer-main-2 .widget a,
  .footer-main-2 address { overflow-wrap: break-word; }
  .pg-area-lista { columns: 1; }
  .footer-main-2 .btm-ftr { margin-top: 18px; padding-top: 16px; }
  .query-section { padding-top: 40px; padding-bottom: 40px; }
}

/* ---------------------------------------------------------------------
   22f. Tabelas no celular

   Os 18 links de telefone de teluteis.php mediam 21 px de altura por 26 px
   de largura — abaixo do mínimo de 24x24 do WCAG 2.5.8 e muito abaixo dos
   44 px que o site adotou. Numa página cujo propósito é discar.

   A primeira célula é a identidade da linha ("Polícia Militar"), não um
   campo igual aos outros: sai do padrão rótulo/valor e ganha peso. E as
   9 células que só exibem um travessão deixam de gastar uma linha cada.
   --------------------------------------------------------------------- */

@media (max-width: 600px) {
  .pg-tabela td { align-items: center; min-height: 44px; }
  .pg-tabela td a[href^="tel:"] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 44px;
    min-width: 72px;
    padding: 0 10px;
    margin: -2px 0;
    border: 1px solid var(--pg-borda);
    border-radius: var(--pg-raio);
  }
  .pg-tabela td:first-child {
    display: block;
    font-weight: 700;
    font-size: 16px;
    color: #17293d;
    padding: 2px 0 6px;
  }
  .pg-tabela td:first-child::before { content: none; }
  .pg-tabela td:has(> span[aria-hidden="true"]) { display: none; }
}

/* ---------------------------------------------------------------------
   22g. Foco escondido sob as barras fixas (WCAG 2.4.11)

   Ao navegar por Tab, o elemento focado encostava na borda e sumia sob a
   barra grudada (66 px no desktop, 62 px no celular) e sob a barra de ações
   (57 px). Medido: 8 controles totalmente cobertos no desktop, 19 no
   celular — a pessoa perde o rastro de onde está.

   O scroll-padding no scrollport resolve o foco E o salto de âncora, e é
   por isso que as quatro linhas de scroll-margin-top saíram: as duas
   propriedades somam.
   --------------------------------------------------------------------- */

html {
  scroll-padding-top: 78px;
  scroll-padding-bottom: 24px;
}
@media (max-width: 991px) {
  html {
    scroll-padding-top: 74px;
    scroll-padding-bottom: 72px;
  }
}

/* ---------------------------------------------------------------------
   22h. Grades de cartões sem fileira órfã
   --------------------------------------------------------------------- */

.pg-cards > * { min-width: 0; }

@media (min-width: 1200px) {
  /* 6 cartões em 4 trilhas deixavam 611 px vazios na segunda fileira
     (home, parceiros, orçamento). Em 3 colunas fecham 3 mais 3. */
  .pg-cards:has(> :nth-child(6):last-child) { grid-template-columns: repeat(3, 1fr); }
}
@media (min-width: 992px) and (max-width: 1199px) {
  /* aqui o container dá 3 trilhas: 4 cartões viravam 3 mais 1 */
  .pg-cards:has(> :nth-child(4):last-child) { grid-template-columns: repeat(2, 1fr); }
}

/* ---------------------------------------------------------------------
   22i. Formulário primeiro no celular, nas duas páginas que existem para ele

   Em orcamento.php e contato.php o primeiro campo ficava a 1413 px do topo
   — quase duas telas — atrás do bloco de texto lateral. São justamente as
   duas páginas cujo único trabalho é o formulário, e o destino do botão
   "Orçamento" da barra de ações.
   --------------------------------------------------------------------- */

@media (max-width: 991px) {
  body[data-pagina="orcamento.php"] .pg-secao:first-of-type > .container > .row,
  body[data-pagina="contato.php"]   .pg-secao:first-of-type > .container > .row {
    display: flex;
    flex-direction: column;
  }
  body[data-pagina="orcamento.php"] .pg-secao:first-of-type > .container > .row::before,
  body[data-pagina="orcamento.php"] .pg-secao:first-of-type > .container > .row::after,
  body[data-pagina="contato.php"]   .pg-secao:first-of-type > .container > .row::before,
  body[data-pagina="contato.php"]   .pg-secao:first-of-type > .container > .row::after { display: none; }

  body[data-pagina="orcamento.php"] .pg-secao:first-of-type > .container > .row > .col-md-7,
  body[data-pagina="contato.php"]   .pg-secao:first-of-type > .container > .row > .col-md-7 { order: 1; }
  body[data-pagina="orcamento.php"] .pg-secao:first-of-type > .container > .row > .col-md-5,
  body[data-pagina="contato.php"]   .pg-secao:first-of-type > .container > .row > .col-md-5 { order: 2; }

  body[data-pagina="orcamento.php"] .pg-secao:first-of-type > .container > .row > [class*="col-"],
  body[data-pagina="contato.php"]   .pg-secao:first-of-type > .container > .row > [class*="col-"] { min-width: 0; }
}

/* ---------------------------------------------------------------------
   22j. Botão de WhatsApp em bloco (páginas de contato e orçamento)
   Nunca #128c7e: esse verde saiu do projeto por reprovar em 4,14:1.
   --------------------------------------------------------------------- */

.pg-btn-whats {
  background: var(--pg-verde);
  color: var(--pg-branco);
  border-left: 3px solid var(--pg-ambar);
}
.pg-btn-whats:hover,
.pg-btn-whats:focus {
  background: #0a5c52;
  color: var(--pg-branco);
  text-decoration: none;
}

/* O main recebe foco programático depois do link de pular; o anel do
   navegador em volta da página inteira não ajuda ninguém. */
main#conteudo:focus { outline: none; }

/* ---------------------------------------------------------------------
   22k. Filho de submenu ativo no desktop

   O realce do item ativo dentro de um submenu só existia abaixo de 992 px.
   No desktop, quem estava numa das 6 páginas de serviço ou numa das 9 de
   cidade abria o submenu e nada indicava qual era a página atual.
   --------------------------------------------------------------------- */

@media (min-width: 992px) {
  .ownavigation .navbar-nav .dropdown-menu > li.active > a,
  .ownavigation .navbar-nav .dropdown-menu > li > a[aria-current="page"] {
    color: var(--pg-ambar-menu);     /* 4,8:1 sobre o #0056b7 do submenu */
    font-weight: 700;
  }
}

/* ---------------------------------------------------------------------
   22l. Faixa de provas atravessa as duas colunas

   Nas 9 páginas de cidade os selos são filhos diretos do container, e o
   arranjo de duas colunas os espremia na coluna da direita: 4 cartões em
   2x2, ocupando 299 px de altura em 629 px de largura.

   Atravessando as duas colunas eles voltam a uma fileira só — que é como
   uma faixa de provas deve se ler — e a seção encurta ~130 px. Onde os
   selos estão dentro de .pg-prosa (páginas de serviço) a regra não se
   aplica: ali eles não são item da grade, e forçar o pai a atravessar
   desmontaria o arranjo do texto.
   --------------------------------------------------------------------- */

@media (min-width: 992px) {
  /* O seletor repete o caminho longo da seção 16 de propósito: a regra que
     manda todo filho que não é título para a coluna 2 tem seis classes de
     especificidade, e um seletor curto perde para ela em silêncio. */
  main > section:not(.pg-hero):not(.pg-carrossel) > .container:has(> .pg-titulo-secao):not(:has(
        .pg-cards, .row, .tabela-wrap, .pg-lista-cidades, form, table)) > .pg-selos {
    grid-column: 1 / -1;
    margin-top: 10px;
  }
}

/* ---------------------------------------------------------------------
   23. LISTA DE PASSOS NUMERADA

   Usada no protocolo de atendimento do monitoramento de alarme, onde a
   numeração carrega informação de verdade: a ordem dos passos é o próprio
   conteúdo. Não é para lista qualquer — lista sem sequência continua com
   marcador simples.
   --------------------------------------------------------------------- */

.pg-passos {
  list-style: none;
  counter-reset: passo;
  margin: 0 0 1.4em;
  padding: 0;
  display: grid;
  gap: 18px;
}

.pg-passos > li {
  counter-increment: passo;
  position: relative;
  padding-left: 52px;
  min-height: 34px;
}

.pg-passos > li::before {
  content: counter(passo);
  position: absolute;
  left: 0;
  top: 0;
  width: 34px;
  height: 34px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: var(--pg-azul-claro);
  color: var(--pg-azul-esc);       /* 8,6:1 sobre o azul-claro */
  font-family: 'Raleway', system-ui, -apple-system, 'Segoe UI', Arial, sans-serif;
  font-weight: 800;
  font-size: 15px;
  line-height: 1;
}

.pg-passos > li strong { color: #17293d; }

@media (max-width: 575px) {
  .pg-passos > li { padding-left: 44px; }
  .pg-passos > li::before { width: 30px; height: 30px; font-size: 14px; }
}

/* =====================================================================
   24. O PRIMEIRO ITEM DO MENU ESTAVA INVISÍVEL  (03/09/2026)

   O tema pinta o azul da barra num ::before posicionado por um valor fixo em
   pixels — 445 px a 1280, 277 px a 1100 — e com uma diagonal de 45°. Esse
   valor foi calculado para um cabeçalho em que a logo NÃO ficava dentro da
   barra de navegação. Quando a logo entrou aqui (para acompanhar a barra
   fixa ao rolar), o menu passou a começar antes de onde o azul começa.

   Medido em quatro larguras: em TODAS elas o item "Início" cai na parte
   branca da barra.

     1280 px   azul começa em 418..462   "Início" em 257..302
     1200 px   azul começa em 393..437   "Início" em 390..435
     1100 px   azul começa em 249..293   "Início" em 292..337
      992 px   azul começa em 227..271   "Início" em 238..283

   Na home, "Início" é o item ativo e sai em âmbar: âmbar sobre branco é
   1,5:1, e foi isso que o cliente viu. Nas outras 28 páginas ele é branco
   sobre branco — pior ainda, e ninguém tinha notado porque o item some por
   inteiro em vez de ficar fraco.

   Não existe cor que resolva: para passar em 4,5:1 sobre branco a
   luminância precisa ser <= 0,18, e sobre o azul da barra >= 0,64. São
   condições opostas. O que tem de mudar é o FUNDO, não o texto.

   A correção inverte o desenho: a barra inteira passa a ser azul, e a área
   da logo vira uma aba branca cuja borda direita carrega a diagonal. Assim
   a geometria fica ancorada na LOGO, não numa porcentagem da largura — e
   todo item de menu está sobre azul em qualquer largura, por construção.
   ===================================================================== */

/* Só no desktop: no celular a barra é branca inteira e não há diagonal. */
.pg-aba-logo { display: none; }

@media (min-width: 992px) {
  /* A barra inteira, de ponta a ponta, é azul. */
  .header_s2 .ownavigation { background-color: var(--pg-azul); }

  /* O azul do tema, ancorado em pixels, sai de cena. */
  .header_s2 .ownavigation::before { display: none; }

  /*
    A aba branca da logo. O par margin/padding negativo estende o branco até
    fora da barra, para que ele chegue à borda esquerda da tela mesmo com o
    container centralizado — sem isso apareceria uma faixa azul à esquerda
    da logo em telas largas.

    O recorte desenha a diagonal na borda direita: no topo ela termina
    44 px antes, na base no fim da aba. É o mesmo sentido do corte original.
  */
  /*
    A aba branca é um elemento de pintura próprio (span.pg-aba-logo), não o
    fundo do .navbar-header.

    A primeira tentativa foi pintar o próprio .navbar-header e estendê-lo
    para a esquerda com margin-left:-1200px + padding-left:1200px. O branco
    chegou à borda da tela, mas o elemento passou a ter 1.200 px de largura —
    e como ele flutua, não sobrou espaço para o menu na mesma linha: a barra
    foi de 66 px para 120 px. Posicionado por absoluto, o span pinta sem
    ocupar espaço no fluxo.
  */
  .header_s2 .ownavigation .navbar-header {
    position: relative;
    /* a aba precisa ter a altura da barra, não a da logo */
    min-height: 66px;
  }

  .pg-aba-logo {
    display: block;
    position: absolute;
    top: 0;
    bottom: 0;
    left: -100vw;      /* alcança a borda esquerda da tela em qualquer largura */
    right: -54px;      /* passa do fim da logo, para a diagonal caber */
    background-color: var(--pg-branco);
    /* a diagonal: no topo termina 44 px antes, na base no fim da aba */
    clip-path: polygon(0 0, calc(100% - 44px) 0, 100% 100%, 0 100%);
    z-index: 0;
  }

  /* A logo fica ACIMA da aba e centralizada nela: (66 - 46) / 2 = 10 px. */
  .header_s2 .ownavigation .navbar-header .pg-logo-menu {
    position: relative;
    z-index: 1;
    margin-top: 10px;
    margin-bottom: 10px;
  }
  /*
    A logo encolhe de 56 px para 46 px de altura. Não é estética: é o que
    libera os ~34 px de largura que a diagonal precisa para caber entre o
    fim da logo e o começo do primeiro item do menu. Numa barra de 66 px,
    46 px de logo continuam confortáveis.
  */
  .header_s2 .pg-logo-menu img {
    height: 46px;
    width: auto;
    max-height: none;
  }
}

/* =====================================================================
   25. PÁGINA ÍNDICE DE SERVIÇOS  (08/09/2026)

   A página /servicos.php reaproveita .pg-cards, .pg-tabela e .pg-selos —
   nada de layout novo. A única peça inédita é a linha de preço dentro do
   cartão, que aparece só nos três serviços com tabela e precisa se
   distinguir do parágrafo de descrição sem competir com o título.
   ===================================================================== */

.pg-card-preco {
  margin: 12px 0 0;
  padding-top: 12px;
  border-top: 1px solid var(--pg-borda);
  font-size: 14px;
  color: var(--pg-txt-suave, #55606b);
}

.pg-card-preco strong {
  font-size: 17px;
  color: var(--pg-azul);
  white-space: nowrap;
}

/*
  O cartão vira coluna para que o preço e o link encostem no rodapé do
  cartão em vez de flutuarem logo abaixo do texto. Sem isto, cartões de
  alturas diferentes (a descrição varia de 12 a 26 palavras) deixavam a
  linha de preço em alturas diferentes lado a lado, e a grade perdia a
  linha de base comum.

  Escopo por body[data-pagina]: .pg-cards aparece em quase toda página do
  site, e trocar o modo de exibição do cartão em todas elas mudaria o
  espaçamento vertical de cada uma — em contexto flex as margens não
  colapsam. Foi exatamente assim que .pg-selo quebrou quando recebeu
  display:flex sem escopo. Aqui a mudança fica onde foi medida.
*/
body[data-pagina="servicos.php"] .pg-cards .pg-card {
  display: flex;
  flex-direction: column;
}

body[data-pagina="servicos.php"] .pg-cards .pg-card .pg-card-link {
  margin-top: auto;
}

/*
  Título de cartão que é link: no índice de serviços o <h3> leva à página do
  serviço, e sem isto ele herdaria o azul de link e ficaria indistinguível
  do rótulo "Ver o serviço" logo abaixo.
*/
.pg-cards .pg-card h3 a {
  color: inherit;
  text-decoration: none;
}

.pg-cards .pg-card h3 a:hover,
.pg-cards .pg-card h3 a:focus-visible {
  color: var(--pg-azul);
  text-decoration: underline;
}

/* =====================================================================
   26. PERGUNTA DE VERIFICAÇÃO DO FORMULÁRIO  (09/09/2026)

   O campo herdava a largura total dos demais — 670 px no desktop — para
   uma resposta de um dígito. Largura de campo é affordance: campo largo
   pede texto longo, e quem via aquele espaço hesitava sobre o que
   escrever ali. Encolhido para o tamanho da resposta que ele espera.

   Continua bem acima do alvo mínimo de 24x24 px da WCAG 2.5.8 (fica em
   torno de 140x47), e no celular ocupa a largura disponível como
   qualquer outro campo.
   ===================================================================== */

.pg-campo--captcha input {
  max-width: 140px;
}

/*
  O rótulo É a pergunta, então ele carrega mais peso semântico que um
  rótulo comum de formulário. Um degrau a mais de contraste e peso separa
  "responda isto" de "preencha isto", sem inventar um componente novo.
*/
.pg-campo--captcha > label {
  color: #17293d;
  font-weight: 700;
}