/* ============================================================
   GRUPO SEGIL — folha de estilo única
   Cores da marca: ouro #BB9240 extraído do logo.
   Regra de ouro do projeto: o dourado brilha no escuro.
   NUNCA use o ouro #BB9240 como cor de texto sobre fundo claro:
   o contraste fica em 2,88:1, abaixo do minimo legivel de 4,5:1.
   Para texto dourado em fundo claro existe --ouro-escuro (#87692D),
   que passa em 4,60:1 sobre a areia e 5,14:1 sobre o branco.
   ============================================================ */

:root{
  --ouro:#BB9240;
  --ouro-escuro:#87692D;
  --ouro-claro:#D4AC5E;
  --grafite:#15171B;
  --grafite-2:#1E2126;
  --grafite-3:#2A2E35;
  --areia:#F6F2EA;
  --areia-2:#EFEADF;
  --branco:#FFFFFF;
  --tinta:#1A1C20;
  --tinta-suave:#3D4149;
  --cinza:#6B6558;
  --linha:#DED6C6;
  --linha-escura:#33373E;

  --texto-escuro:#B9B2A4;
  --fonte-titulo:"Spectral",Georgia,"Times New Roman",serif;
  --fonte-texto:"Archivo",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;

  --largura:1160px;
  --leitura:68ch;
  --topo:78px;
}

*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth; scroll-padding-top:calc(var(--topo) + 20px)}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *{animation-duration:.01ms !important; transition-duration:.01ms !important}
}
body{
  margin:0; background:var(--branco); color:var(--tinta);
  font-family:var(--fonte-texto); font-size:17px; line-height:1.68;
  -webkit-font-smoothing:antialiased; overflow-x:hidden;
}
img{max-width:100%; height:auto; display:block}
a{color:var(--ouro-escuro); text-underline-offset:3px; text-decoration-thickness:1px}
a:hover{color:var(--grafite)}
:focus-visible{outline:2px solid var(--ouro); outline-offset:3px}

.container{max-width:var(--largura); margin:0 auto; padding:0 24px}
.leitura{max-width:var(--leitura)}
.pular{position:absolute; left:-9999px}
.pular:focus{left:12px; top:12px; z-index:200; background:var(--ouro); color:var(--grafite); padding:10px 16px; font-weight:600}

/* ---------- tipografia ---------- */
h1,h2,h3,h4{font-family:var(--fonte-titulo); margin:0; text-wrap:balance; line-height:1.15}
h1{font-weight:300; font-size:clamp(2.1rem,5.2vw,3.5rem)}
h2{font-weight:400; font-size:clamp(1.7rem,3.6vw,2.5rem); line-height:1.2}
h3{font-weight:600; font-size:clamp(1.15rem,2vw,1.4rem); line-height:1.3}
p{margin:0 0 1.1rem}
.rotulo{
  font-family:var(--fonte-texto); font-size:.73rem; font-weight:700;
  letter-spacing:.17em; text-transform:uppercase; margin:0 0 14px;
  color:var(--ouro-escuro);
}
.escuro .rotulo,.capa .rotulo,.caminho .rotulo{color:var(--ouro-claro)}
.chamada{font-size:1.12rem; color:var(--tinta-suave); max-width:64ch}
.escuro .chamada,.capa .chamada{color:var(--texto-escuro)}

/* ---------- cabeçalho ---------- */
.topo{
  position:sticky; top:0; z-index:100; background:var(--grafite);
  border-bottom:1px solid var(--linha-escura); height:var(--topo);
}
.topo .container{display:flex; align-items:center; gap:24px; height:100%}
.marca{color:#FFF; display:flex; align-items:center; gap:12px; text-decoration:none; flex:0 0 auto}
.marca img{height:52px; width:auto}
.marca span{
  font-family:var(--fonte-titulo); color:#FFF; font-size:1.12rem; font-weight:400;
  letter-spacing:.02em; line-height:1.1;
}
.marca small{display:block; font-family:var(--fonte-texto); font-size:.62rem; letter-spacing:.18em; color:var(--ouro-claro); text-transform:uppercase; margin-top:2px}
.nav{margin-left:auto; display:flex; align-items:center; gap:26px}
.nav a{
  color:#CFC8BB; text-decoration:none; font-size:.93rem; font-weight:500;
  padding:6px 0; border-bottom:2px solid transparent; transition:color .18s, border-color .18s;
}
.nav a:hover,.nav a[aria-current="page"]{color:#FFF; border-bottom-color:var(--ouro)}
.nav .btn{border:0; padding:11px 20px}
.hamburguer{
  display:none; margin-left:auto; background:none; border:1px solid var(--linha-escura);
  color:#FFF; width:44px; height:44px; cursor:pointer; font-size:1.3rem; line-height:1;
}

/* ---------- botões ---------- */
.btn{
  display:inline-block; font-family:var(--fonte-texto); font-size:.94rem; font-weight:600;
  padding:14px 26px; border:1px solid var(--ouro); background:var(--ouro); color:var(--grafite);
  text-decoration:none; cursor:pointer; transition:background .18s, color .18s;
}
.btn:hover{background:var(--ouro-claro); border-color:var(--ouro-claro); color:var(--grafite)}
.btn-vazado{background:transparent; color:var(--ouro-claro); border-color:#5A5044}
.btn-vazado:hover{background:transparent; border-color:var(--ouro-claro); color:#FFF}
.btn-claro{background:transparent; color:var(--ouro-escuro); border-color:var(--linha)}
.btn-claro:hover{background:var(--areia-2); color:var(--grafite); border-color:var(--ouro)}

/* Correção de cascata: .escuro a e .nav a são mais específicos que .btn e
   roubavam a cor do texto dos botões. Estas regras devolvem a cor certa.
   Se criar um botão novo dentro de área escura, ele já nasce coberto aqui. */
.escuro a.btn,.capa a.btn,.caminho a.btn,.nav a.btn,.zap a.btn{color:var(--grafite)}
.escuro a.btn:hover,.capa a.btn:hover,.caminho a.btn:hover,.nav a.btn:hover,.zap a.btn:hover{color:var(--grafite)}
.escuro a.btn-vazado,.capa a.btn-vazado,.caminho a.btn-vazado{color:var(--ouro-claro)}
.escuro a.btn-vazado:hover,.capa a.btn-vazado:hover,.caminho a.btn-vazado:hover{color:#FFF}
.btns{display:flex; gap:14px; flex-wrap:wrap; margin-top:28px}

/* ---------- faixas ---------- */
.faixa{padding:clamp(56px,8vw,96px) 0}
.faixa-areia{background:var(--areia)}
.faixa-branca{background:var(--branco)}
.escuro{background:var(--grafite); color:#E8E3D9}
.escuro h1,.escuro h2,.escuro h3{color:#FFF}
.escuro p{color:var(--texto-escuro)}
.escuro a{color:var(--ouro-claro)}

/* ---------- capa ---------- */
.capa{
  background:var(--grafite); color:#E8E3D9; position:relative; overflow:hidden;
  padding:clamp(72px,11vw,132px) 0 clamp(64px,9vw,108px);
}
/* marca d'água: o triângulo da marca, discreto no canto */
.capa::after{
  content:""; position:absolute; right:-60px; bottom:-90px; width:460px; height:400px;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 88'%3E%3Cpath d='M50 4 L96 84 L4 84 Z' fill='none' stroke='%23BB9240' stroke-width='1.1'/%3E%3C/svg%3E");
  background-repeat:no-repeat; background-size:contain; opacity:.22;
  pointer-events:none;
}
.capa .container{position:relative; z-index:1}
.capa p{color:var(--texto-escuro)}
.capa a:not(.btn){color:var(--ouro-claro)}
.capa h1{max-width:19ch}
/* A home tem título mais longo que as internas: um passo a menos na escala
   para não estourar em quatro linhas no notebook. */
.capa-home h1{font-size:clamp(1.9rem,4.2vw,2.9rem); max-width:24ch}
.capa .chamada{max-width:56ch; margin-top:18px}
.capa-interna{padding:clamp(56px,7vw,88px) 0}
.capa-interna h1{font-size:clamp(1.9rem,4.4vw,2.9rem); max-width:24ch}

/* ---------- números ---------- */
.numeros{background:var(--grafite-2); padding:44px 0; border-top:1px solid var(--linha-escura)}
/* Três números iguais e uma quarta coluna mais larga, que abriga o mapa
   e o nome do estado sem quebrar a linha. */
.numeros .grade{display:grid; grid-template-columns:repeat(3,1fr) 1.45fr; gap:32px}
@media (max-width:860px){ .numeros .grade{grid-template-columns:1fr 1fr; gap:28px} }
@media (max-width:420px){ .numeros .grade{grid-template-columns:1fr} }
.num .v{font-family:var(--fonte-titulo); font-weight:300; font-size:clamp(2.2rem,4vw,3rem); color:#FFF; line-height:1}
.num .l{font-size:.76rem; letter-spacing:.13em; text-transform:uppercase; color:#918A7D; margin-top:8px}


/* ---------- número com o esboço do mapa ---------- */
.num-mapa{display:flex; align-items:center; gap:16px}
.mapa-rj{width:96px; flex:0 0 auto; opacity:.95}
.mapa-rj svg{width:100%; height:auto; display:block}
.v-lugar{font-size:clamp(1.2rem,1.9vw,1.6rem) !important; line-height:1.12; white-space:nowrap}
@media (max-width:620px){
  .mapa-rj{width:76px}
}

/* ---------- grades e cartões ---------- */
.grade{display:grid; gap:26px}
.grade-3{grid-template-columns:repeat(auto-fit,minmax(280px,1fr))}
.grade-2{grid-template-columns:repeat(auto-fit,minmax(330px,1fr))}
.cartao{
  background:var(--branco); border:1px solid var(--linha); padding:30px 28px;
  display:flex; flex-direction:column; transition:border-color .2s, transform .2s;
}
.faixa-branca .cartao{background:var(--areia); border-color:var(--areia-2)}
.cartao:hover{border-color:var(--ouro)}
.cartao h3{margin-bottom:10px}
.cartao p{color:var(--tinta-suave); font-size:.98rem}
.cartao .mais{margin-top:auto; padding-top:14px; font-weight:600; font-size:.92rem; text-decoration:none}
.cartao .mais::after{content:" →"}
.cartao-escuro{background:var(--grafite-2); border-color:var(--linha-escura)}
.cartao-escuro h3{color:#FFF}
.cartao-escuro p{color:#A9A296}

.selo{
  display:inline-flex; align-items:center; gap:9px; border:1px solid var(--ouro);
  padding:9px 16px; font-size:.83rem; font-weight:600; color:var(--ouro-escuro);
  background:var(--branco);
}
.escuro .selo{color:var(--ouro-claro); background:transparent}

/* ---------- listas de destaque ---------- */
.pilares{display:grid; gap:38px; grid-template-columns:repeat(auto-fit,minmax(290px,1fr)); margin-top:44px}
.pilar{border-top:2px solid var(--ouro); padding-top:22px}
.pilar h3{margin-bottom:10px}
.pilar p{color:var(--tinta-suave); font-size:.99rem; margin:0}
.escuro .pilar p{color:#A9A296}

.lista-check{list-style:none; padding:0; margin:0 0 1.2rem}
.lista-check li{position:relative; padding-left:26px; margin-bottom:11px}
.lista-check li::before{
  content:""; position:absolute; left:0; top:.62em; width:10px; height:10px;
  border-left:2px solid var(--ouro); border-bottom:2px solid var(--ouro);
  transform:rotate(-45deg);
}


/* ---------- então e agora (página O Grupo) ----------
   As duas fachadas lado a lado. O contraste entre a placa antiga e o
   prédio de hoje é o argumento da página — por isso as duas imagens
   têm o mesmo peso, e a legenda fica discreta. */
.entao-agora{display:grid; grid-template-columns:1fr 1fr; gap:26px; margin-top:44px; align-items:end}
.entao-agora figure{margin:0}
.entao-agora img{width:100%; height:auto; display:block; border:1px solid var(--linha); aspect-ratio:5/4; object-fit:cover}
.entao-agora figcaption{
  margin-top:12px; font-size:.74rem; letter-spacing:.15em; text-transform:uppercase;
  font-weight:700; color:var(--ouro-escuro);
}
@media (max-width:700px){
  .entao-agora{grid-template-columns:1fr; gap:30px}
}

/* ---------- clientes ---------- */


/* ---------- fotos da operação ----------
   Grade de quatro cenas na home e faixas largas de apoio. As imagens são
   recortes do ensaio próprio, enquadrados de forma que nenhum rosto fique
   identificável — o que mostra uniforme, posto e equipamento sem depender
   de autorização de imagem. */
.cenas{display:grid; grid-template-columns:repeat(auto-fit,minmax(230px,1fr)); gap:20px; margin-top:44px}
.cena{margin:0; position:relative; overflow:hidden; background:var(--grafite)}
.cena img{width:100%; aspect-ratio:4/3; object-fit:cover; display:block}
.cena figcaption{
  position:absolute; left:0; right:0; bottom:0; padding:34px 16px 14px;
  font-size:.78rem; letter-spacing:.13em; text-transform:uppercase; font-weight:700;
  color:#FFF; background:linear-gradient(to top, rgba(10,11,13,.86), transparent);
}
.faixa-foto{margin:0; position:relative; overflow:hidden; background:var(--grafite)}
.faixa-foto img{width:100%; aspect-ratio:21/9; object-fit:cover; display:block}
/* Faixa mais alta, para imagens que não cabem numa tira de 21:9 —
   a da viatura perderia rodas e o logo da porta. */
.faixa-foto--alta img{aspect-ratio:16/9}
.faixa-foto figcaption{
  position:absolute; left:0; right:0; bottom:0; padding:52px 26px 20px;
  color:#FFF; font-size:.92rem; max-width:52ch;
  background:linear-gradient(to top, rgba(10,11,13,.88), transparent);
}
.faixa-foto figcaption strong{
  display:block; font-size:.76rem; letter-spacing:.15em; text-transform:uppercase;
  color:var(--ouro-claro); margin-bottom:5px;
}
@media (max-width:620px){
  .cenas{grid-template-columns:1fr 1fr; gap:12px}
  .cena figcaption{font-size:.66rem; padding:26px 10px 10px; letter-spacing:.09em}
  .faixa-foto img{aspect-ratio:16/9}
  .faixa-foto figcaption{font-size:.86rem; padding:40px 18px 16px}
}

/* ---------- cartões de segmento ----------
   Foto no topo, ícone dourado sobreposto no canto e o nome embaixo.
   Sem foto cadastrada, o espaço vira um bloco grafite com o ícone
   centralizado — parece decisão de projeto, não erro. */
.segmentos{
  display:grid; gap:22px; margin-top:44px;
  grid-template-columns:repeat(auto-fit,minmax(188px,1fr));
}
.segmento{
  background:var(--branco); border:1px solid var(--linha); overflow:hidden;
  display:block; text-decoration:none; color:inherit;
  transition:border-color .2s, transform .2s, box-shadow .2s;
}
.segmento:hover{border-color:var(--ouro); transform:translateY(-2px); box-shadow:0 6px 20px rgba(21,23,27,.09)}
.segmento:hover .segmento-nome{color:var(--ouro-escuro)}
.segmento-visual{
  display:flex; position:relative; aspect-ratio:4/3; background:var(--grafite);
  display:flex; align-items:center; justify-content:center; overflow:hidden;
}
.segmento-visual img{width:100%; height:100%; object-fit:cover; display:block}
.segmento-icone{
  color:var(--ouro-claro); width:52px; height:52px; display:block;
}
.segmento-visual img + .segmento-icone{
  position:absolute; left:14px; bottom:14px; width:38px; height:38px;
  background:rgba(21,23,27,.82); padding:7px; border:1px solid rgba(212,172,94,.45);
}
.segmento-icone svg{width:100%; height:100%; display:block}
.segmento-nome{
  display:block; font-size:1.05rem; padding:18px 20px 20px;
  font-family:var(--fonte-texto); font-weight:600; letter-spacing:.01em;
  color:var(--tinta); transition:color .2s;
}
.segmento-nome::after{content:" →"; color:var(--ouro-escuro)}
@media (max-width:620px){
  .segmentos{grid-template-columns:1fr 1fr; gap:14px}
  .segmento-nome{font-size:.93rem; padding:14px 14px 16px}
  .segmento-icone{width:42px; height:42px}
}

/* ---------- carrossel de clientes ----------
   Laço contínuo por CSS: a trilha tem a lista duplicada e desliza metade
   da própria largura, o que faz o fim encontrar o começo sem emenda.
   Não para no passar do mouse — decisão do cliente. Quem tem "reduzir
   movimento" ligado no sistema continua recebendo uma faixa parada e
   rolável, que é o comportamento correto de acessibilidade. */
.carrossel{
  overflow:hidden; margin-top:34px; position:relative;
  -webkit-mask-image:linear-gradient(to right,transparent,#000 7%,#000 93%,transparent);
  mask-image:linear-gradient(to right,transparent,#000 7%,#000 93%,transparent);
}
.carrossel-trilho{display:flex; width:max-content; align-items:center; animation:desliza 45s linear infinite}
@keyframes desliza{from{transform:translateX(0)} to{transform:translateX(-50%)}}
/* Marcas com brasão — MPRJ, Ministério da Economia — só ficam legíveis com
   altura suficiente. A 66px viravam borrão. As logos vão em cor original. */
.cliente-slide{
  flex:0 0 auto; width:252px; height:134px; padding:0 26px;
  display:flex; align-items:center; justify-content:center; text-align:center;
}
.cliente-slide img{
  max-height:92px; max-width:200px; width:auto; height:auto;
}
.cliente-slide span{font-weight:600; font-size:.95rem; line-height:1.35; color:var(--tinta-suave)}
.carrossel-nota{margin-top:18px; font-size:.9rem; color:var(--cinza)}
@media (prefers-reduced-motion:reduce){
  .carrossel{overflow-x:auto; -webkit-mask-image:none; mask-image:none}
  .carrossel-trilho{animation:none}
}
@media (max-width:620px){
  .cliente-slide{width:190px; height:112px; padding:0 16px}
  .cliente-slide img{max-height:74px; max-width:158px}
}

/* Grade de clientes com bordas nas células, não com gap colorido:
   assim a última linha incompleta não deixa um bloco vazio na página. */
.clientes{display:grid; grid-template-columns:repeat(auto-fit,minmax(190px,1fr));
  border-top:1px solid var(--linha); border-left:1px solid var(--linha); margin-top:34px}
.cliente{padding:26px 18px; text-align:center; font-size:.93rem; font-weight:600;
  color:var(--tinta-suave); display:flex; align-items:center; justify-content:center;
  min-height:96px; border-right:1px solid var(--linha); border-bottom:1px solid var(--linha)}
.cliente img{max-height:56px; max-width:100%; width:auto; object-fit:contain}

/* ---------- depoimentos ---------- */
.depo{border-left:3px solid var(--ouro); padding:4px 0 4px 22px}
.depo p{font-family:var(--fonte-titulo); font-size:1.12rem; font-style:italic; color:var(--tinta)}
.escuro .depo p{color:#E8E3D9}
.depo cite{font-style:normal; font-size:.86rem; color:var(--cinza); font-weight:600}

/* ---------- tabelas ---------- */
.tabela-rolagem{overflow-x:auto; margin:24px 0}
table{width:100%; border-collapse:collapse; font-size:.96rem}
th,td{text-align:left; padding:14px 16px; border-bottom:1px solid var(--linha); vertical-align:top}
th{font-size:.72rem; letter-spacing:.12em; text-transform:uppercase; color:var(--cinza); font-weight:700}

/* ---------- formulários ---------- */
.form{display:grid; gap:18px; max-width:620px}
.campo{display:flex; flex-direction:column; gap:7px}
.campo label{font-size:.85rem; font-weight:600; letter-spacing:.02em}
.escuro .campo label{color:#CFC8BB}
.campo input,.campo textarea,.campo select{
  font-family:var(--fonte-texto); font-size:1rem; padding:13px 15px;
  border:1px solid var(--linha); background:var(--branco); color:var(--tinta); width:100%;
}
.escuro .campo input,.escuro .campo textarea,.escuro .campo select{
  background:var(--grafite-2); border-color:var(--linha-escura); color:#FFF;
}
.campo input:focus,.campo textarea:focus{outline:2px solid var(--ouro); outline-offset:1px}
.campo textarea{min-height:130px; resize:vertical}
.campo .ajuda{font-size:.8rem; color:var(--cinza)}
.escuro .campo .ajuda{color:#918A7D}
.campo .erro{font-size:.82rem; color:#D96B5A; font-weight:600; display:none}
.campo.invalido .erro{display:block}
.campo.invalido input{border-color:#D96B5A}
.consenti{display:flex; gap:11px; align-items:flex-start; font-size:.87rem; line-height:1.5}
.consenti input{width:auto; margin-top:3px; flex:0 0 auto}
.dupla{display:grid; grid-template-columns:1fr 1fr; gap:18px}


/* ---------- grupo de caixas de seleção do formulário ---------- */
.campo-opcoes{border:0; padding:0; margin:0; display:flex; flex-direction:column; gap:7px}
.campo-opcoes legend{padding:0; font-size:.85rem; font-weight:600; letter-spacing:.02em}
.escuro .campo-opcoes legend{color:#CFC8BB}
.opcoes{display:grid; grid-template-columns:1fr 1fr; gap:10px 22px; margin-top:6px}
.opcoes label{
  display:flex; gap:10px; align-items:flex-start; font-size:.94rem; line-height:1.45;
  cursor:pointer;
}
.escuro .opcoes label{color:#CFC8BB}
.opcoes input{width:auto; margin-top:3px; flex:0 0 auto; accent-color:var(--ouro)}
.opcoes label:hover{color:#FFF}
@media (max-width:620px){ .opcoes{grid-template-columns:1fr} }

/* ---------- aviso de retorno do formulário ----------
   Fica na faixa escura da página de contato, por isso as cores são
   pensadas para fundo grafite. Some por completo quando não há retorno. */
.aviso-envio{
  border-left:3px solid var(--ouro); background:var(--grafite-2);
  padding:20px 22px; margin:0 0 34px; max-width:620px;
}
.aviso-envio strong{display:block; font-size:1.05rem; margin-bottom:6px; color:#FFF}
.aviso-envio span{display:block; font-size:.95rem; color:#B9B2A4; line-height:1.6}
.aviso-envio.ok{border-left-color:#7FB08C}
.aviso-envio.ok strong{color:#A8CFB2}
.aviso-envio.erro{border-left-color:#D98E7F}
.aviso-envio.erro strong{color:#E8AFA3}

.zap{
  display:none; margin-top:26px; border:1px solid var(--ouro); padding:24px;
  background:#221F1B;
}
.zap.aberto{display:block}
.zap h3{margin-bottom:8px}
.zap p{margin-bottom:16px; font-size:.96rem}

.aviso{padding:16px 20px; border-left:3px solid var(--ouro); background:var(--areia-2); font-size:.95rem; margin:24px 0}
.escuro .aviso{background:var(--grafite-2); border-color:var(--ouro-claro)}
.aviso p:last-child{margin-bottom:0}

/* ---------- caminhos (contato) ---------- */
.caminhos{display:grid; grid-template-columns:repeat(auto-fit,minmax(280px,1fr)); gap:20px; margin-bottom:52px}
.caminho{border:1px solid var(--linha-escura); padding:28px; background:var(--grafite-2)}
.caminho h3{color:#FFF; margin-bottom:8px}
.caminho p{font-size:.95rem; margin-bottom:18px}

/* ---------- mapa ---------- */
.mapa{border:1px solid var(--linha); width:100%; height:380px; filter:grayscale(.35)}

/* ---------- blog ---------- */
.posts{display:grid; gap:1px; background:var(--linha); border:1px solid var(--linha)}
.post-item{background:var(--branco); padding:28px; display:block; text-decoration:none; color:inherit; transition:background .18s}
.post-item:hover{background:var(--areia)}
.post-item .data{font-size:.76rem; letter-spacing:.12em; text-transform:uppercase; color:var(--ouro-escuro); font-weight:700}
.post-item h3{margin:8px 0 8px}
.post-item p{color:var(--tinta-suave); font-size:.97rem; margin:0}
.artigo{max-width:var(--leitura); margin:0 auto}
.artigo h2{margin:38px 0 12px; font-size:1.55rem}
.artigo h3{margin:30px 0 10px}
.artigo ul,.artigo ol{padding-left:1.2rem}
.artigo li{margin-bottom:9px}


/* ---------- formulário do Google incorporado ----------
   O Google não deixa a página de fora saber a altura do formulário, então
   ela é fixada aqui. Damos folga suficiente para não sobrar barra de rolagem
   dentro do quadro, e mais folga ainda no celular, onde os campos empilham. */
.formulario-google{margin:30px 0; background:var(--branco); border:1px solid var(--linha)}
.formulario-google iframe{display:block; width:100%; height:1750px; border:0}
@media (max-width:760px){ .formulario-google iframe{height:2100px} }
@media (max-width:420px){ .formulario-google iframe{height:2350px} }

/* ---------- rodapé ---------- */
.rodape{background:var(--grafite); color:#8E877A; padding:66px 0 30px; font-size:.92rem}
/* Três colunas desde que a coluna de Serviços saiu do rodapé. */
.rodape .grade{grid-template-columns:1.5fr 1fr 1.4fr; gap:42px}
.rodape h4{font-family:var(--fonte-texto); font-size:.74rem; letter-spacing:.15em; text-transform:uppercase; color:var(--ouro-claro); margin:0 0 16px; font-weight:700}
.rodape a{color:#B5AEA1; text-decoration:none; display:block; margin-bottom:9px}
.rodape a:hover{color:#FFF}
.rodape p{margin:0 0 9px; line-height:1.6}
.rodape img{height:56px; width:auto; margin-bottom:16px}
.rodape .fim{
  border-top:1px solid var(--linha-escura); margin-top:46px; padding-top:24px;
  display:flex; justify-content:space-between; gap:18px; flex-wrap:wrap; font-size:.84rem; color:#6E685C;
}
.rodape .fim a{display:inline; margin:0}


/* ---------- selo da Polícia Federal (rodapé) ----------
   Texto e escudo próprios, na linguagem da marca. Não usa o brasão da
   Polícia Federal: emblema de órgão público em site comercial sugere
   endosso oficial, que não existe. O que existe é autorização de
   funcionamento — e é isso que o selo afirma, com todas as letras. */
.selo-pf{
  display:flex; gap:12px; align-items:center; margin-top:18px;
  border:1px solid var(--linha-escura); padding:13px 15px; max-width:290px;
}
.selo-pf-escudo{width:30px; height:36px; flex:0 0 auto; color:var(--ouro-claro)}
.selo-pf-texto strong{display:block; color:#D9D3C7; font-size:.86rem; font-weight:600; line-height:1.3}
.selo-pf-texto span{display:block; font-size:.79rem; color:#8E877A; margin-top:3px}

/* ---------- responsivo ---------- */
@media (max-width:900px){
  .rodape .grade{grid-template-columns:1fr 1fr}
  .dupla{grid-template-columns:1fr}
}
@media (max-width:820px){
  .hamburguer{display:block}
  .nav{
    position:fixed; inset:var(--topo) 0 auto 0; background:var(--grafite);
    flex-direction:column; align-items:stretch; gap:0; padding:12px 24px 26px;
    border-bottom:1px solid var(--linha-escura); display:none; max-height:calc(100vh - var(--topo)); overflow-y:auto;
  }
  .nav.aberta{display:flex}
  .nav a{padding:14px 0; border-bottom:1px solid var(--linha-escura)}
  .nav a:hover,.nav a[aria-current="page"]{border-bottom-color:var(--linha-escura); color:var(--ouro-claro)}
  .nav .btn{margin-top:16px; text-align:center; border-bottom:0}
  .nav .btn:hover{border-bottom:0}
}
@media (max-width:620px){
  body{font-size:16px}
  .rodape .grade{grid-template-columns:1fr}
  .marca span{font-size:.95rem}
  .capa::after{width:300px; height:260px; right:-90px; bottom:-70px; opacity:.13}
}