/* Blocos das paginas institucionais.

   A composicao vem das tres referencias que o cliente escolheu:
   Logico/about-us (Sobre) e Loginet/services-version-two + /contact
   (Servicos, Contato, Trabalhe). O que vem delas e o ARRANJO: numero
   gigante vazado, rotulo entre barras, faixa correndo, linha em
   ziguezague com numero fantasma e seta na emenda, passos numerados,
   acordeao, blocos de contato em cartao com icone circular no topo.

   O hero delas (caixa arredondada com respiro em volta, pilula de
   migalha sobre a foto) SAIU a pedido do cliente — ver o comentario do
   bloco HERO, logo abaixo.

   O que NAO vem delas: fonte (Cairo), cor (#FCAF17 / #2E2D2F / #636362),
   grade (.tk-dentro, 1560px) e conteudo, que sao da Trucket.

   Regra que organiza tudo: blocos vizinhos nunca tem o mesmo fundo.
   Branco, cinza, foto e grafite se alternam, porque e a troca de ritmo
   que faz a pessoa continuar descendo.

   PREFIXOS, para nao colidir com style.css / internas.css / v2.css:
   pgh- hero · pgb- blocos · pgz- ziguezague · pgf- formulario em passos
   pgc- contato · pgk- clientes
*/

:root {
  --pg-amarelo: #FCAF17;
  --pg-grafite: #2E2D2F;
  --pg-grafite2: #414042;
  --pg-cinza: #636362;
  --pg-cinza-fundo: #F4F4F3;
  --pg-linha: #E4E4E2;
  --pg-r: 0;             /* reto, como a home: o style.css nao tem um unico raio */
  --pg-r-g: 0;           /* idem, nos blocos grandes */
}

/* ====================================================================
   HERO  —  faixa sangrada com o pe cortado na diagonal.

   A caixa arredondada com respiro em volta (a assinatura da referencia
   Logico/about-us) SAIU a pedido do cliente. Emoldurada, a foto lia como
   cartao de template, e como as dez internas usam o mesmo hero, as dez
   abriam exatamente iguais.

   O que entrou no lugar:
   · a foto sangra de ponta a ponta;
   · o texto entra no eixo do resto da pagina (`.tk-dentro`, 1560px) em
     vez de se alinhar pela borda da caixa, que era um eixo so dele;
   · a migalha e uma trilha discreta em caixa alta, nao mais uma pilula
     branca com sombra pousada sobre a foto;
   · a base e um corte diagonal em grafite. A diagonal nao e enfeite
     novo: e o que a marca ja usa no "K" do logo, nas faixas das fotos
     de servico e nos cortes do bloco do canal.

   Quando a pagina tem numeros, eles moram DENTRO desse corte. Antes
   vinham logo abaixo, num slab escuro proprio — era esse slab repetido
   que fazia financiar, oficina e personalizacao abrirem identicas.
   ==================================================================== */

.pgh { background: #fff; }

.pgh-arte {
  position: relative;
  /* altura unica em todas as internas, a pedido do cliente. Quem tem
     numeros cresce no PE, nao aqui: a faixa de foto continua igual nas
     dez, que e o que se compara ao navegar entre elas. */
  min-height: 450px;
  display: flex;
  align-items: center;
  overflow: hidden;
  isolation: isolate;
}
.pgh--alto .pgh-arte { min-height: 540px; }

.pgh-foto {
  position: absolute;
  inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  z-index: -2;
}
.pgh-veu {
  position: absolute; inset: 0; z-index: -1;
  background:
    linear-gradient(to right,
      rgba(22,21,23,.86) 0%, rgba(22,21,23,.62) 32%,
      rgba(22,21,23,.2) 58%, rgba(22,21,23,0) 76%),
    linear-gradient(to top,
      rgba(22,21,23,.78) 0%, rgba(22,21,23,.42) 42%,
      rgba(22,21,23,.12) 78%, rgba(22,21,23,.28) 100%);
}
.pgh-dentro {
  position: relative;
  width: 100%;
  padding-top: 34px;
  padding-bottom: 46px;
}

/* No claro o veu INVERTE, nao some: vira um gradiente branco da
   esquerda, para o texto grafite aguentar artes de contraste diferente.
   Medido nas dez: titulo entre 11,7:1 e 12,6:1. */
.pgh--claro .pgh-veu {
  background: linear-gradient(to right,
    rgba(255,255,255,.72) 0%, rgba(255,255,255,.3) 34%, rgba(255,255,255,0) 56%);
}
.pgh--claro .pgh-h1 { color: var(--pg-grafite); }
.pgh--claro .pgh-kicker { color: #8A5E04; }
.pgh--claro .pgh-trilha { color: rgba(46,45,47,.6); }
.pgh--claro .pgh-trilha a { color: rgba(46,45,47,.6); }
.pgh--claro .pgh-trilha a:hover { color: var(--pg-grafite); }
.pgh--claro .pgh-trilha [aria-current] { color: var(--pg-grafite); }

/* a migalha como trilha, nao como pilula */
.pgh-trilha {
  display: flex; flex-wrap: wrap; align-items: center; gap: 9px;
  margin-bottom: 20px;
  font-size: 11.5px; font-weight: 700;
  letter-spacing: .15em; text-transform: uppercase;
  color: rgba(255,255,255,.62);
}
.pgh-trilha a { color: rgba(255,255,255,.62); text-decoration: none; }
.pgh-trilha a:hover { color: #fff; }
.pgh-trilha span[aria-hidden] { opacity: .45; }
.pgh-trilha [aria-current] { color: var(--pg-amarelo); }

.pgh-kicker {
  display: inline-flex; align-items: center; gap: 12px;
  margin: 0 0 14px;
  font-size: 12px; font-weight: 700; letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--pg-amarelo);
}
/* barra, nao quadradinho: a barra puxa o olho para a direita, para
   dentro do titulo; o quadrado so pontuava */
.pgh-kicker::before {
  content: ''; width: 38px; height: 3px;
  background: var(--pg-amarelo);
}

/* Menor que o da home de proposito: ali o titulo e a chamada da marca,
   aqui e so o nome da pagina. Em 86px "PERSONALIZACAO E IMPLEMENTOS"
   tomava o banner inteiro e empurrava a migalha para fora. */
.pgh-h1 {
  margin: 0;
  font-size: clamp(30px, 3.4vw, 58px);
  line-height: 1.02;
  font-weight: 800;
  letter-spacing: -.02em;
  text-transform: uppercase;
  color: #fff;
  max-width: 16ch;
}

/* ----------------------------------------------- o pe com os numeros */

/* A emenda com a foto e RETA. Chegou a ser um corte diagonal, no angulo
   das faixas da marca; o cliente recusou — leu como torto, nao como
   grafismo. Nao tentar de novo. */
.pgh-pe {
  position: relative;
  background: var(--pg-grafite);
}

.pgh-nums {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 26px;
  padding: clamp(34px, 3.4vw, 54px) 40px;
}
.pgh-nums > div {
  padding-left: 22px;
  border-left: 2px solid rgba(252,175,23,.5);
}
.pgh-nums b {
  display: block;
  font-size: clamp(26px, 2.6vw, 42px); font-weight: 800;
  letter-spacing: -.03em; line-height: 1;
  color: var(--pg-amarelo);
  font-variant-numeric: tabular-nums;
}
.pgh-nums span {
  display: block; margin-top: 10px;
  font-size: 14px; line-height: 1.5; color: rgba(255,255,255,.76);
}

/* A entrada e o unico movimento do topo: uma cascata curta, do miolo
   para o pe. Mais do que isso numa pagina de servico vira enfeite. */
@keyframes pgh-sobe {
  from { opacity: 0; transform: translateY(16px); }
  to   { opacity: 1; transform: none; }
}
.pgh-trilha, .pgh-kicker, .pgh-h1, .pgh-pe {
  animation: pgh-sobe .72s cubic-bezier(.2,.7,.3,1) both;
}
.pgh-kicker { animation-delay: .07s; }
.pgh-h1     { animation-delay: .14s; }
.pgh-pe     { animation-delay: .22s; }

/* ====================================================================
   TITULOS DE SECAO
   Loginet: kicker dentro de uma pilula contornada e o titulo com UMA
   palavra na cor de destaque. Dois niveis de leitura: a pessoa varre
   os kickers e para no que interessa.
   ==================================================================== */

/* a largura vai em px, nao em ch: `ch` se mede na fonte do PROPRIO
   elemento, e `.pgb-tit` herda o corpo de 16px — 44ch dava uma caixa de
   350px para um titulo de 54px, que entao quebrava em quatro linhas */
.pgb-tit { margin: 0 0 clamp(34px, 3.4vw, 54px); max-width: 620px; }
.pgb-tit--centro { margin-left: auto; margin-right: auto; text-align: center; max-width: 780px; }

.pgb-tit-k {
  display: inline-flex; align-items: center; gap: 9px;
  margin: 0 0 16px;
  padding: 7px 18px 7px 14px;
  border: 1px solid rgba(252,175,23,.55);
  border-radius: 0;
  font-size: 11.5px; font-weight: 700; letter-spacing: .15em;
  text-transform: uppercase;
  color: #8A5E04;
  background: rgba(252,175,23,.08);
}
.pgb-tit-k::before {
  content: ''; width: 7px; height: 7px; border-radius: 50%;
  background: var(--pg-amarelo);
}

.pgb-tit-h {
  margin: 0;
  font-size: clamp(30px, 3.5vw, 54px);
  line-height: 1.08;
  font-weight: 800;
  letter-spacing: -.02em;
  color: var(--pg-grafite);
}
.pgb-tit-h em { font-style: normal; color: var(--pg-amarelo); }
.pgb-tit-h--solo { margin-bottom: clamp(34px, 3.4vw, 54px); }

.pgb-tit--claro .pgb-tit-h { color: #fff; }
.pgb-tit--claro .pgb-tit-k {
  color: var(--pg-amarelo);
  border-color: rgba(252,175,23,.4);
  background: rgba(252,175,23,.12);
}

/* fundo das secoes — a alternancia e a regra */
.pgb { padding: clamp(56px, 6vw, 108px) 0; }
.pgb--branco { background: #fff; }
.pgb--cinza  { background: var(--pg-cinza-fundo); }
.pgb--escuro { background: var(--pg-grafite); }

/* ====================================================================
   NUMERO GIGANTE VAZADO  —  abertura do Logico/about.
   O numero e desenho, nao dado: so o contorno, e o rotulo sobe
   rotacionado ao lado dele.
   ==================================================================== */

.pgb-numerao {
  display: grid;
  grid-template-columns: minmax(0, 0.76fr) minmax(0, 1.24fr);
  gap: clamp(32px, 4vw, 76px);
  align-items: start;
}

/* O numero era VAZADO, em contorno fino de amarelo claro, com a unidade
   girada 90 graus ao lado — o desenho da referencia do Sobre. Dois
   problemas para quem nao e de internet: contorno claro sobre branco da
   perto de 1,5:1 de contraste, e texto girado custa para ler bem onde
   ele e a unica explicacao do numero. Agora o numero e grafite cheio e
   a unidade esta de pe, do lado. */
.pgb-numerao-cifra {
  display: flex; align-items: flex-start; gap: 16px;
  line-height: 1;
}
.pgb-numerao-cifra b {
  font-size: clamp(96px, 11.5vw, 180px);
  font-weight: 900;
  letter-spacing: -.055em;
  line-height: .78;
  color: var(--pg-grafite);
}
.pgb-numerao-cifra span {
  padding-top: 10px;
  font-size: clamp(18px, 1.6vw, 25px);
  font-weight: 800; line-height: 1.1;
  color: var(--pg-grafite);
  max-width: 7ch;
}
/* a regra amarela separa o numero da frase que o explica: e o unico
   amarelo do bloco, e aqui ele aponta, nao enfeita */
.pgb-numerao-nota {
  margin: 26px 0 0;
  padding-top: 22px;
  border-top: 3px solid var(--pg-amarelo);
  font-size: 16.5px; line-height: 1.6;
  color: var(--pg-grafite2);
}
.pgb-numerao-nota b { color: var(--pg-grafite); font-weight: 800; }

.pgb-numerao-btn {
  margin-top: 30px;
  display: inline-flex; align-items: center; gap: 11px;
  padding: 17px 30px;
  background: var(--pg-amarelo); color: var(--pg-grafite);
  text-decoration: none; font-size: 16px; font-weight: 800;
  transition: transform .18s ease, box-shadow .18s ease;
}
.pgb-numerao-btn:hover { transform: translateY(-2px); box-shadow: 0 10px 26px rgba(252,175,23,.32); }
.pgb-numerao-btn svg { width: 17px; height: 17px; }

.pgb-numerao-t p {
  margin: 0 0 20px;
  font-size: clamp(16px, 1.15vw, 18.5px);
  line-height: 1.72;
  color: #4C4C4B;
}
.pgb-numerao-h {
  margin: 0 0 22px;
  font-size: clamp(27px, 3.1vw, 42px);
  line-height: 1.12;
  letter-spacing: -.02em;
  font-weight: 800;
  color: var(--pg-grafite);
}
/* a palavra destacada fica GRAFITE com grifo amarelo, nao amarela:
   #FCAF17 sobre branco da ~1,9:1 e nao passa nem como texto grande.
   O grifo entrega o mesmo destaque de marca sem custar a leitura. */
.pgb-numerao-h b {
  color: var(--pg-grafite); font-weight: 800;
  box-shadow: inset 0 -.26em 0 var(--pg-amarelo);
}
.pgb-numerao-t p b { color: var(--pg-grafite); font-weight: 700; }

/* ====================================================================
   FAIXA CORRENDO  —  separa dois blocos pesados e carrega o argumento
   da marca sem gastar uma secao inteira.
   ==================================================================== */

.pgb-faixa {
  overflow: hidden;
  background: var(--pg-amarelo);
  padding: 17px 0;
  border-top: 1px solid rgba(0,0,0,.08);
  border-bottom: 1px solid rgba(0,0,0,.08);
}
.pgb-faixa-trilho { display: flex; width: max-content; animation: pgb-corre 34s linear infinite; }
.pgb-faixa-grupo { display: flex; align-items: center; }
.pgb-faixa-grupo span {
  padding: 0 14px;
  font-size: clamp(14px, 1.15vw, 18px);
  font-weight: 800; letter-spacing: .02em;
  text-transform: uppercase;
  color: var(--pg-grafite);
  white-space: nowrap;
}
.pgb-faixa-grupo i { color: rgba(46,45,47,.45); font-style: normal; }
@keyframes pgb-corre { to { transform: translateX(-50%); } }

/* a mesma faixa em grafite, para quando a vizinha ja for clara demais */
.pgb-faixa--escura { background: var(--pg-grafite); border-color: rgba(255,255,255,.08); }
.pgb-faixa--escura .pgb-faixa-grupo span { color: #fff; }
.pgb-faixa--escura .pgb-faixa-grupo i { color: var(--pg-amarelo); }

/* ====================================================================
   ROTULO ENTRE BARRAS  —  / historia /  do Logico
   ==================================================================== */

.pgb-rotulo {
  margin: 0 0 14px;
  text-align: center;
  font-size: 12.5px; font-weight: 700; letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--pg-cinza);
}
.pgb-rotulo i { font-style: normal; color: var(--pg-amarelo); padding: 0 6px; }

/* ====================================================================
   LINHA DO TEMPO
   ==================================================================== */

.pgb-marcos {
  list-style: none; margin: 0; padding: 0;
  display: grid; grid-template-columns: repeat(4, minmax(0,1fr));
}
.pgb-marcos li {
  position: relative;
  padding: 42px 26px 0 0;
  border-top: 2px solid var(--pg-linha);
}
.pgb-marcos li::before {
  content: '';
  position: absolute; top: -9px; left: 0;
  width: 16px; height: 16px; border-radius: 50%;
  background: #fff;
  border: 4px solid var(--pg-amarelo);
}
/* todos os pontos em amarelo, e a linha toda cinza: so o primeiro
   trecho pintado lia como barra de progresso pela metade, que e o
   oposto do que uma linha do tempo de empresa quer dizer */

.pgb-marco-p {
  display: block;
  font-size: clamp(26px, 2.2vw, 36px); font-weight: 800;
  letter-spacing: -.02em;
  color: var(--pg-amarelo);
  line-height: 1;
}
.pgb-marco-t {
  display: block; margin: 12px 0 8px;
  font-size: 17.5px; font-weight: 700; color: var(--pg-grafite);
}
.pgb-marcos li span {
  display: block;
  font-size: 15px; line-height: 1.62; color: var(--pg-cinza);
}

/* ====================================================================
   FRASE GRANDE sobre grafite — o respiro da pagina: uma ideia so.
   ==================================================================== */

.pgb-frase-t {
  margin: 0 0 30px;
  font-size: clamp(28px, 4vw, 62px);
  line-height: 1.1; font-weight: 800; letter-spacing: -.025em;
  color: #fff;
  max-width: 20ch;
}
.pgb-frase-t em { font-style: normal; color: var(--pg-amarelo); }
.pgb-frase-pe {
  display: flex; flex-wrap: wrap; align-items: center; gap: 28px;
  border-top: 1px solid rgba(255,255,255,.14);
  padding-top: 28px;
}
.pgb-frase-pe > span {
  flex: 1 1 380px;
  font-size: 16px; line-height: 1.72; color: rgba(255,255,255,.72);
}
.pgb-frase-btn {
  flex: 0 0 auto;
  display: inline-flex; align-items: center; gap: 10px;
  padding: 15px 30px; border-radius: 0;
  background: var(--pg-amarelo); color: var(--pg-grafite);
  font-weight: 700; font-size: 15.5px; text-decoration: none;
  transition: transform .18s ease, box-shadow .18s ease;
}
.pgb-frase-btn:hover { transform: translateY(-2px); box-shadow: 0 10px 26px rgba(252,175,23,.3); }

/* ====================================================================
   GRADE DE NUMEROS
   ==================================================================== */

.pgb-numeros { background: var(--pg-grafite2); padding: clamp(44px, 4.4vw, 72px) 0; }
.pgb-numeros .tk-dentro {
  display: grid; grid-template-columns: repeat(4, minmax(0,1fr));
  gap: 26px;
}
.pgb-numeros .tk-dentro > div {
  padding-left: 22px;
  border-left: 2px solid rgba(252,175,23,.5);
}
.pgb-numeros b {
  display: block;
  font-size: clamp(30px, 3.1vw, 50px); font-weight: 800;
  letter-spacing: -.03em; line-height: 1;
  color: var(--pg-amarelo);
  font-variant-numeric: tabular-nums;
}
.pgb-numeros span {
  display: block; margin-top: 11px;
  font-size: 14.5px; line-height: 1.5; color: rgba(255,255,255,.76);
}

/* ====================================================================
   ZIGUEZAGUE DE SERVICOS  —  Loginet/services-version-two.
   Linha alternada: foto arredondada de um lado, cartao grafite do
   outro, com numero fantasma no canto, etiqueta em pilula, lista com
   tiques e a seta circular pousada na emenda entre os dois.
   ==================================================================== */

.pgz { display: grid; gap: clamp(26px, 2.6vw, 44px); }

.pgz-l {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: clamp(18px, 1.8vw, 30px);
  align-items: stretch;
  text-decoration: none;
  color: inherit;
}

.pgz-foto {
  position: relative;
  border-radius: var(--pg-r);
  overflow: hidden;
  /* Mais alto do que parece preciso, e de proposito: as fotos de
     servico sao retrato (1024x1536) num quadro paisagem. Com 260px o
     quadro ficava 2:1 e o `cover` jogava fora 67% da foto. Em ~420px
     ele fica 1,5:1 e o desperdicio cai para 57%, o que ja deixa o
     caminhao inteiro caber. A linha e `align-items: stretch`, entao o
     cartao ao lado acompanha a altura. */
  min-height: clamp(300px, 29vw, 440px);
  background: var(--pg-cinza-fundo);
}
.pgz-foto img {
  position: absolute; inset: 0;
  width: 100%; height: 100%; object-fit: cover;
  transition: transform .7s cubic-bezier(.2,.7,.3,1);
}
.pgz-l:hover .pgz-foto img { transform: scale(1.05); }

.pgz-cartao {
  position: relative;
  border-radius: var(--pg-r);
  background: var(--pg-grafite);
  color: #fff;
  padding: clamp(30px, 2.8vw, 48px) clamp(26px, 2.6vw, 46px);
  display: flex; flex-direction: column;
  /* sem `overflow: hidden` de proposito: ele cortava metade da seta
     circular, que precisa pousar em cima da emenda. Nenhum filho
     chega na borda — o numero fantasma cabe dentro do padding e o
     entalhe triangular e desenhado para dentro. */
}

/* o numero fantasma no canto — e ele que da ritmo a grade */
.pgz-n {
  position: absolute;
  top: clamp(14px, 1.4vw, 24px); right: clamp(18px, 1.8vw, 34px);
  font-size: clamp(62px, 7vw, 116px);
  font-weight: 800; line-height: 1; letter-spacing: -.04em;
  color: rgba(255,255,255,.07);
  pointer-events: none;
  font-variant-numeric: tabular-nums;
}

.pgz-tag {
  align-self: flex-start;
  padding: 6px 15px; border-radius: 0;
  background: var(--pg-amarelo); color: var(--pg-grafite);
  font-size: 11px; font-weight: 800; letter-spacing: .13em;
  text-transform: uppercase;
}

.pgz-cartao h3 {
  margin: 18px 0 0;
  font-size: clamp(22px, 2vw, 32px);
  line-height: 1.14; font-weight: 800; letter-spacing: -.02em;
  text-transform: uppercase;
  color: #fff;
  max-width: 15ch;
}
.pgz-d {
  margin: 14px 0 0;
  font-size: 15.5px; line-height: 1.68;
  color: rgba(255,255,255,.7);
  max-width: 52ch;
}

.pgz-ck {
  list-style: none; margin: 22px 0 0; padding: 20px 0 0;
  border-top: 1px solid rgba(255,255,255,.12);
  display: grid; gap: 10px;
}
.pgz-ck li {
  display: flex; align-items: flex-start; gap: 10px;
  font-size: 14.5px; line-height: 1.45; color: rgba(255,255,255,.85);
}
.pgz-ck li::before {
  content: '';
  flex: 0 0 17px; height: 17px; margin-top: 1px;
  border-radius: 50%;
  background: var(--pg-amarelo) no-repeat center;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%232E2D2F' stroke-width='4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6L9 17l-5-5'/%3E%3C/svg%3E");
  background-size: 11px;
}

/* a seta circular pousada na emenda entre a foto e o cartao */
.pgz-seta {
  position: absolute;
  left: 0; top: 50%;
  transform: translate(-50%, -50%);
  width: clamp(50px, 4.4vw, 68px); height: clamp(50px, 4.4vw, 68px);
  border-radius: 50%;
  background: var(--pg-amarelo);
  display: grid; place-items: center;
  color: var(--pg-grafite);
  z-index: 2;
  box-shadow: 0 8px 24px rgba(0,0,0,.26);
  transition: transform .25s ease;
}
.pgz-seta svg { width: 40%; height: 40%; }
.pgz-l:hover .pgz-seta { transform: translate(-50%, -50%) rotate(45deg); }

/* linha invertida: o cartao vai para a esquerda, a seta para a direita */
.pgz-l--inv .pgz-foto { order: 2; }
.pgz-l--inv .pgz-cartao { order: 1; }
.pgz-l--inv .pgz-seta { left: auto; right: 0; transform: translate(50%, -50%); }
.pgz-l--inv:hover .pgz-seta { transform: translate(50%, -50%) rotate(45deg); }

/* o entalhe triangular na borda do cartao, como na referencia */
.pgz-cartao::before {
  content: '';
  position: absolute; top: 0; left: clamp(26px, 2.6vw, 46px);
  border-left: 17px solid transparent;
  border-right: 17px solid transparent;
  border-top: 20px solid var(--pg-amarelo);
}
.pgz-l--inv .pgz-cartao::before { left: auto; right: clamp(26px, 2.6vw, 46px); }

/* ====================================================================
   POR QUE  —  quatro motivos com icone
   ==================================================================== */

.pgb-pq {
  list-style: none; margin: 0; padding: 0;
  display: grid; grid-template-columns: repeat(4, minmax(0,1fr));
  gap: clamp(16px, 1.6vw, 26px);
}
.pgb-pq li {
  background: rgba(255,255,255,.05);
  border: 1px solid rgba(255,255,255,.1);
  border-radius: var(--pg-r);
  padding: clamp(24px, 2.2vw, 36px);
  transition: background .25s ease, transform .25s ease;
}
.pgb-pq li:hover { background: rgba(255,255,255,.09); transform: translateY(-4px); }
.pgb-pq-i {
  display: grid; place-items: center;
  width: 54px; height: 54px; border-radius: 50%;
  background: var(--pg-amarelo); color: var(--pg-grafite);
  margin-bottom: 20px;
}
.pgb-pq-i svg { width: 26px; height: 26px; }
.pgb-pq li b {
  display: block; margin-bottom: 9px;
  font-size: 18px; font-weight: 700; color: #fff;
}
.pgb-pq li > span:not(.pgb-pq-i) {
  display: block;
  font-size: 15px; line-height: 1.62; color: rgba(255,255,255,.68);
}

/* ====================================================================
   PASSOS  —  Loginet: "PASSO — 01" em cartao, ligados por tracejado
   ==================================================================== */

.pgb-proc-topo {
  display: grid; grid-template-columns: minmax(0,1fr) minmax(0,1fr);
  gap: clamp(26px, 3vw, 60px); align-items: end;
  margin-bottom: clamp(34px, 3.4vw, 54px);
}
.pgb-proc-topo .pgb-tit { margin-bottom: 0; }
.pgb-proc-txt {
  margin: 0; font-size: 16.5px; line-height: 1.72; color: var(--pg-cinza);
}

.pgb-passos {
  list-style: none; margin: 0; padding: 0;
  display: grid; grid-template-columns: repeat(3, minmax(0,1fr));
  gap: clamp(18px, 1.8vw, 30px);
}
.pgb-passos li {
  position: relative;
  background: #fff;
  border: 1px solid var(--pg-linha);
  border-radius: var(--pg-r);
  padding: clamp(26px, 2.4vw, 40px);
}
/* o tracejado que liga um passo ao seguinte */
.pgb-passos li:not(:last-child)::after {
  content: '';
  position: absolute; top: 50%; right: calc(-1 * clamp(18px, 1.8vw, 30px));
  width: clamp(18px, 1.8vw, 30px); height: 2px;
  background: repeating-linear-gradient(to right, var(--pg-amarelo) 0 6px, transparent 6px 11px);
}
.pgb-passo-r {
  display: inline-block; margin-bottom: 16px;
  font-size: 11.5px; font-weight: 800; letter-spacing: .16em;
  text-transform: uppercase; color: #8A5E04;
}
.pgb-passos li b {
  display: block; margin-bottom: 10px;
  font-size: 19px; font-weight: 700; color: var(--pg-grafite);
}
.pgb-passo-d {
  display: block; font-size: 15px; line-height: 1.65; color: var(--pg-cinza);
}

/* ====================================================================
   FAQ  —  <details> nativo: abre sem JS, anda com teclado e o
   buscador le o conteudo fechado.
   ==================================================================== */

.pgb-faq {
  display: grid; grid-template-columns: minmax(0,.8fr) minmax(0,1.2fr);
  gap: clamp(26px, 3vw, 64px); align-items: start;
}
.pgb-faq .pgb-tit { margin-bottom: 0; position: sticky; top: 110px; }
.pgb-faq-lista { display: grid; gap: 12px; }

.pgb-faq-i {
  border: 1px solid var(--pg-linha);
  border-radius: 0;
  background: #fff;
  overflow: hidden;
  transition: border-color .2s ease;
}
.pgb-faq-i[open] { border-color: var(--pg-amarelo); }
.pgb-faq-i summary {
  display: flex; align-items: center; justify-content: space-between; gap: 18px;
  padding: 19px 22px;
  cursor: pointer;
  font-size: 16.5px; font-weight: 700; color: var(--pg-grafite);
  list-style: none;
}
.pgb-faq-i summary::-webkit-details-marker { display: none; }
.pgb-faq-i summary i {
  flex: 0 0 28px; height: 28px; border-radius: 50%;
  background: var(--pg-cinza-fundo);
  position: relative; transition: background .2s ease;
}
.pgb-faq-i summary i::before,
.pgb-faq-i summary i::after {
  content: ''; position: absolute; top: 50%; left: 50%;
  width: 11px; height: 2px; background: var(--pg-grafite);
  transform: translate(-50%, -50%);
  transition: transform .25s ease;
}
.pgb-faq-i summary i::after { transform: translate(-50%, -50%) rotate(90deg); }
.pgb-faq-i[open] summary i { background: var(--pg-amarelo); }
.pgb-faq-i[open] summary i::after { transform: translate(-50%, -50%) rotate(0); }
.pgb-faq-i p {
  margin: 0; padding: 0 22px 22px;
  font-size: 15.5px; line-height: 1.72; color: var(--pg-cinza);
  max-width: 68ch;
}

/* ====================================================================
   FOTO + LISTA
   ==================================================================== */

.pgb--foto { background: #fff; padding: 0; }
.pgb-foto-grade {
  display: grid; grid-template-columns: minmax(0,1fr) minmax(0,1fr);
  gap: clamp(26px, 3vw, 64px); align-items: center;
}
.pgb-foto-texto { padding: clamp(50px, 5vw, 96px) 0; }
.pgb--foto-inv .pgb-foto-texto { order: 2; }
.pgb--foto-inv .pgb-foto-img { order: 1; }
.pgb-foto-img {
  border-radius: var(--pg-r);
  overflow: hidden;
  aspect-ratio: 4 / 3.1;
}
.pgb-foto-img img { width: 100%; height: 100%; object-fit: cover; display: block; }
.pgb-foto-txt { margin: -10px 0 22px; font-size: 15.5px; line-height: 1.65; color: var(--pg-cinza); max-width: 54ch; }
/* ====================================================================
   DE -> PARA  —  tabela de servico e implemento sobre foto escurecida.
   Substituiu uma lista de oito linhas iguais com foto alta ao lado: o
   conteudo e par, e par se le em duas colunas, nao depois de dois
   pontos no meio da frase.
   ==================================================================== */

.pgd { position: relative; isolation: isolate; overflow: hidden; background: var(--pg-grafite); }
.pgd-foto { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: -2; }
/* o veu e mais pesado na esquerda, onde mora o titulo, e abre na
   direita para a foto ainda aparecer atras da tabela */
.pgd-veu {
  position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(to right,
    rgba(22,21,23,.95) 0%, rgba(22,21,23,.9) 38%, rgba(22,21,23,.74) 100%);
}
.pgd .tk-dentro {
  display: grid;
  grid-template-columns: minmax(0, .92fr) minmax(0, 1.28fr);
  gap: clamp(30px, 4vw, 76px);
  padding-top: clamp(56px, 5.6vw, 100px);
  padding-bottom: clamp(56px, 5.6vw, 100px);
  align-items: start;
}
.pgd-txt {
  margin: 18px 0 0;
  font-size: 15.5px; line-height: 1.65; color: rgba(255,255,255,.7);
  max-width: 42ch;
}
.pgd-pares {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
  border-top: 1px solid rgba(255,255,255,.18);
}
.pgd-par {
  padding: 19px 0 17px;
  border-bottom: 1px solid rgba(255,255,255,.18);
}
.pgd-par:nth-child(odd) { padding-right: 30px; border-right: 1px solid rgba(255,255,255,.18); }
.pgd-par:nth-child(even) { padding-left: 30px; }
.pgd-par b {
  display: block;
  font-size: 11.5px; font-weight: 700; letter-spacing: .14em;
  text-transform: uppercase; color: rgba(255,255,255,.55);
}
.pgd-par span {
  display: block; margin-top: 7px;
  font-size: clamp(16px, 1.3vw, 20px); font-weight: 700; line-height: 1.25;
  color: #fff;
}

/* 16:9, senao o player entra na caixa 4:3 da foto e o YouTube devolve
   faixa preta em cima e embaixo */
.pgb-foto-img--video { aspect-ratio: 16 / 9; }
.pgb-foto-img iframe { width: 100%; height: 100%; display: block; border: 0; }

/* capa do video: o player so nasce no clique (ver foto_lista no blocos.py) */
.pgb-video {
  position: relative; display: block; width: 100%; height: 100%;
  padding: 0; border: 0; background: none; cursor: pointer;
}
.pgb-video::after {
  content: ''; position: absolute; inset: 0;
  background: linear-gradient(to top, rgba(22,21,23,.62), rgba(22,21,23,.08) 55%);
}
.pgb-video-play {
  position: absolute; top: 50%; left: 50%; z-index: 1;
  transform: translate(-50%, -50%);
  width: 86px; height: 86px; border-radius: 50%;
  display: grid; place-items: center;
  background: var(--pg-amarelo); color: var(--pg-grafite);
  transition: transform .3s cubic-bezier(.2,.7,.3,1);
}
.pgb-video-play svg { width: 34px; height: 34px; margin-left: 4px; }
.pgb-video:hover .pgb-video-play { transform: translate(-50%, -50%) scale(1.08); }
.pgb-video:focus-visible { outline: 3px solid var(--pg-amarelo); outline-offset: 3px; }
.pgb-video-r {
  position: absolute; z-index: 1; left: 24px; bottom: 22px;
  font-size: 12px; font-weight: 700; letter-spacing: .15em;
  text-transform: uppercase; color: #fff;
}

.pgb-lista {
  list-style: none; margin: 0; padding: 0;
  display: grid; gap: 1px; background: var(--pg-linha);
  border-top: 1px solid var(--pg-linha); border-bottom: 1px solid var(--pg-linha);
}
/* duas colunas para lista longa: em coluna unica oito itens viram oito
   linhas iguais e a secao fica mais alta que a foto ao lado */
.pgb-lista--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.pgb-lista--2 li:nth-child(odd) { padding-right: 20px; }
.pgb-lista--2 li:nth-child(even) { padding-left: 20px; }
/* numero impar de itens: o ultimo ocupa a linha inteira. Sem isto sobrava
   uma celula vazia pintada com o cinza das linhas divisorias */
.pgb-lista--2 li:last-child:nth-child(odd) { grid-column: 1 / -1; }

.pgb-lista li {
  background: #fff;
  display: flex; align-items: center; gap: 13px;
  padding: 15px 2px;
  font-size: 16px; font-weight: 600; color: var(--pg-grafite);
}
.pgb-lista li::before {
  content: ''; flex: 0 0 20px; height: 20px; border-radius: 50%;
  background: var(--pg-amarelo) no-repeat center;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%232E2D2F' stroke-width='4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6L9 17l-5-5'/%3E%3C/svg%3E");
  background-size: 12px;
}

/* ====================================================================
   GRADE DE ITENS CURTOS
   ==================================================================== */

.pgb-entrada-txt {
  margin: -22px 0 clamp(30px, 3vw, 46px);
  max-width: 62ch; font-size: 16.5px; line-height: 1.72; color: var(--pg-cinza);
}
.pgb-grade { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }
.pgb-grade li {
  background: #fff;
  border: 1px solid var(--pg-linha);
  border-radius: 0;
  padding: 16px 18px;
  font-size: 15.5px; font-weight: 600; color: var(--pg-grafite);
  display: flex; align-items: center; gap: 11px;
  transition: border-color .2s ease, transform .2s ease;
}
.pgb-grade li:hover { border-color: var(--pg-amarelo); transform: translateY(-2px); }
.pgb-grade li::before {
  content: ''; flex: 0 0 7px; height: 7px; border-radius: 50%;
  background: var(--pg-amarelo);
}

/* ====================================================================
   CARDS COM FOTO
   ==================================================================== */

.pgb-cards { display: grid; gap: clamp(16px, 1.6vw, 26px); }
.pgb-card {
  display: block; text-decoration: none;
  border-radius: var(--pg-r); overflow: hidden;
  background: #fff; border: 1px solid var(--pg-linha);
  transition: transform .25s ease, box-shadow .25s ease;
}
.pgb-card:hover { transform: translateY(-5px); box-shadow: 0 16px 40px rgba(0,0,0,.09); }
.pgb-card-foto { display: block; aspect-ratio: 16 / 10; overflow: hidden; background: var(--pg-cinza-fundo); }
.pgb-card-foto img { width: 100%; height: 100%; object-fit: cover; display: block; }
.pgb-card b { display: block; padding: 22px 24px 0; font-size: 19px; font-weight: 700; color: var(--pg-grafite); }
.pgb-card-d { display: block; padding: 10px 24px 0; font-size: 15px; line-height: 1.62; color: var(--pg-cinza); }
.pgb-card-i { display: block; padding: 16px 24px 24px; font-size: 14.5px; font-weight: 700; color: #8A5E04; }

/* ====================================================================
   CHAMADA FINAL
   ==================================================================== */

.pgb-chamada { background: var(--pg-amarelo); padding: clamp(44px, 4.6vw, 78px) 0; }
.pgb-chamada .tk-dentro {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
  gap: 28px;
}
.pgb-chamada h2 {
  margin: 0 0 8px;
  font-size: clamp(25px, 2.8vw, 42px); font-weight: 800;
  letter-spacing: -.02em; color: var(--pg-grafite);
}
.pgb-chamada p { margin: 0; font-size: 16.5px; line-height: 1.6; color: rgba(46,45,47,.8); max-width: 56ch; }
.pgb-chamada-btn {
  display: inline-flex; align-items: center; gap: 11px;
  padding: 17px 34px; border-radius: 0;
  background: var(--pg-grafite); color: #fff;
  font-size: 16px; font-weight: 700; text-decoration: none;
  transition: transform .18s ease, box-shadow .18s ease;
}
.pgb-chamada-btn svg { width: 20px; height: 20px; }
.pgb-chamada-btn:hover { transform: translateY(-2px); box-shadow: 0 12px 30px rgba(0,0,0,.25); }
.pgb-chamada-btn--zap { background: #1EA952; }

.pgb-chamada--escura { background: var(--pg-grafite); }
.pgb-chamada--escura h2 { color: #fff; }
.pgb-chamada--escura p { color: rgba(255,255,255,.7); }
.pgb-chamada--escura .pgb-chamada-btn { background: var(--pg-amarelo); color: var(--pg-grafite); }

/* ====================================================================
   CONTATO  —  Loginet/contact: o formulario num cartao branco com
   sombra, e os canais diretos em cartoes com icone circular no topo.
   ==================================================================== */

.pgc-grade {
  display: grid;
  grid-template-columns: minmax(0, 1.08fr) minmax(0, .92fr);
  gap: clamp(26px, 3vw, 56px);
  align-items: start;
}

.pgc-blocos {
  display: grid; grid-template-columns: repeat(2, minmax(0,1fr));
  gap: clamp(14px, 1.4vw, 22px);
}
.pgc-bloco {
  display: block; text-align: center; text-decoration: none;
  background: #fff;
  border: 1px solid var(--pg-linha);
  border-radius: var(--pg-r);
  padding: clamp(26px, 2.4vw, 38px) 20px;
  transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease;
}
.pgc-bloco:hover { transform: translateY(-5px); border-color: var(--pg-amarelo); box-shadow: 0 14px 34px rgba(0,0,0,.08); }
.pgc-bloco-i {
  display: grid; place-items: center; margin: 0 auto 16px;
  width: 58px; height: 58px; border-radius: 50%;
  background: rgba(252,175,23,.16); color: #8A5E04;
  transition: background .25s ease, color .25s ease;
}
.pgc-bloco:hover .pgc-bloco-i { background: var(--pg-amarelo); color: var(--pg-grafite); }
.pgc-bloco-i svg { width: 26px; height: 26px; }
.pgc-bloco-r {
  display: block; margin-bottom: 7px;
  font-size: 11.5px; font-weight: 800; letter-spacing: .14em;
  text-transform: uppercase; color: var(--pg-cinza);
}
.pgc-bloco b { display: block; font-size: 18px; font-weight: 700; color: var(--pg-grafite); }
.pgc-bloco-d { display: block; margin-top: 6px; font-size: 13.5px; line-height: 1.5; color: var(--pg-cinza); }

.pgc-horario {
  margin-top: clamp(14px, 1.4vw, 22px);
  background: var(--pg-grafite); color: #fff;
  border-radius: var(--pg-r);
  padding: clamp(26px, 2.4vw, 38px);
}
.pgc-horario > b { display: block; margin-bottom: 18px; font-size: 18px; font-weight: 700; }
.pgc-horario dl { margin: 0; display: grid; }
.pgc-horario dl > div {
  display: flex; justify-content: space-between; gap: 16px;
  padding: 11px 0;
  border-bottom: 1px solid rgba(255,255,255,.1);
  font-size: 15px;
}
.pgc-horario dt { color: rgba(255,255,255,.66); margin: 0; }
.pgc-horario dd { margin: 0; font-weight: 700; color: var(--pg-amarelo); }
.pgc-horario p { margin: 18px 0 0; font-size: 14px; line-height: 1.6; color: rgba(255,255,255,.6); }

/* ====================================================================
   FORMULARIO EM PASSOS
   Formulario longo numa tela so e a maior causa de abandono. Um passo
   por vez, com a trilha mostrando onde a pessoa esta e quanto falta.
   ==================================================================== */

.pgf {
  background: #fff;
  border: 1px solid var(--pg-linha);
  border-radius: var(--pg-r-g);
  padding: clamp(28px, 2.8vw, 48px);
  box-shadow: 0 18px 50px rgba(0,0,0,.06);
}
.pgb--cinza .pgf, .pgb--escuro .pgf { box-shadow: 0 18px 50px rgba(0,0,0,.1); }

/* Duas colunas: identidade e progresso a esquerda, etapa atual a
   direita. Empilhado, o passo 1 passava de 850px e nao cabia numa tela
   — e o cabecalho que diz onde a pessoa esta saia da vista justamente
   quando ela precisava dele. Assim a altura do cartao e a do MAIOR dos
   dois lados, nao a soma. */
.pgf {
  display: grid;
  grid-template-columns: minmax(0, 280px) minmax(0, 1fr);
  gap: clamp(26px, 3vw, 52px);
  align-items: start;
}
.pgf-lado { border-right: 1px solid var(--pg-linha); padding-right: clamp(20px, 2vw, 34px); }
.pgf-lado-k {
  margin: 0 0 10px;
  font-size: 11.5px; font-weight: 700; letter-spacing: .15em;
  text-transform: uppercase; color: #8A5E04;
}
.pgf-lado-h {
  margin: 0 0 clamp(20px, 2vw, 28px);
  font-size: clamp(21px, 1.75vw, 28px); font-weight: 800;
  line-height: 1.12; letter-spacing: -.02em; color: var(--pg-grafite);
}
.pgf-lado-h em { font-style: normal; color: var(--pg-amarelo); }
.pgf-corpo { min-width: 0; }

/* empilhado, para o formulario que ja divide a linha com outra coluna
   (contato e trabalhe): ali a coluna fixa espremeria os campos */
.pgf--pilha { display: block; }
.pgf--pilha .pgf-lado { border-right: 0; padding-right: 0; margin-bottom: clamp(22px, 2.2vw, 32px); }
.pgf--pilha .pgf-trilha { display: flex; flex-wrap: wrap; gap: 6px; }
.pgf--pilha .pgf-trilha li { background: var(--pg-cinza-fundo); }
.pgf--pilha .pgf-trilha li[data-estado="atual"] { background: var(--pg-grafite); }
.pgf--pilha .pgf-trilha li[data-estado="feito"] { background: rgba(252,175,23,.16); }
.pgf--pilha .pgf-nota { border-top: 0; padding-top: 12px; }

/* a trilha: nome de cada passo, com estado. Em pe, uma por linha: na
   coluna estreita ela vira indice do formulario, e nao mais uma fila
   de pilulas disputando largura com os campos. */
.pgf-trilha {
  list-style: none; margin: 0 0 18px; padding: 0;
  display: grid; gap: 2px;
}
.pgf-trilha li {
  display: flex; align-items: center; gap: 11px;
  padding: 9px 12px 9px 9px;
  border-radius: 0;
  background: transparent;
  font-size: 13.5px; font-weight: 600; color: var(--pg-cinza);
  transition: background .25s ease, color .25s ease;
}
.pgf-trilha li b {
  display: grid; place-items: center;
  width: 23px; height: 23px; border-radius: 50%;
  background: #fff; border: 1px solid var(--pg-linha);
  font-size: 12px; font-weight: 800; color: var(--pg-cinza);
  transition: background .25s ease, color .25s ease, border-color .25s ease;
}
.pgf-trilha li[data-estado="atual"] { background: var(--pg-grafite); color: #fff; }
.pgf-trilha li[data-estado="atual"] b { background: var(--pg-amarelo); border-color: var(--pg-amarelo); color: var(--pg-grafite); }
.pgf-trilha li[data-estado="feito"] { background: rgba(252,175,23,.16); color: #8A5E04; }
.pgf-trilha li[data-estado="feito"] b {
  border-color: var(--pg-amarelo); color: transparent;
  background: var(--pg-amarelo) no-repeat center;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%232E2D2F' stroke-width='4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6L9 17l-5-5'/%3E%3C/svg%3E");
  background-size: 13px;
}

.pgf-barra { height: 5px; border-radius: 0; background: var(--pg-cinza-fundo); overflow: hidden; }
.pgf-barra i { display: block; height: 100%; width: 0; background: var(--pg-amarelo); border-radius: 0; transition: width .35s cubic-bezier(.2,.7,.3,1); }

.pgf-etapa { border: 0; margin: 0; padding: 0; min-width: 0; }
.pgf-etapa[hidden] { display: none; }
.pgf-etapa > legend {
  padding: 0; margin: 0 0 6px;
  font-size: clamp(20px, 1.7vw, 27px); font-weight: 800;
  letter-spacing: -.015em; color: var(--pg-grafite);
}
.pgf-ajuda { margin: 0 0 20px; font-size: 15px; line-height: 1.6; color: var(--pg-cinza); max-width: 58ch; }

.pgf-campos { display: grid; gap: 15px; }
.pgf-par { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 16px; }

/* campos, com rotulo em cima */
.pgf-campo { display: block; }
/* `> span` pega os DOIS spans do campo: o rotulo e a mensagem de erro.
   Como `.pgf-campo > span` (0,1,1) vence `.pgf-campo-e` (0,1,0), o erro
   aparecia sempre, em cinza, lido como texto de apoio — inclusive
   "Preencha implemento." debaixo de um campo marcado "se tiver". Por
   isso o rotulo e marcado por classe, e nao por tag. */
.pgf-campo > .pgf-campo-r {
  display: block; margin-bottom: 7px;
  font-size: 13.5px; font-weight: 700; color: var(--pg-grafite2);
}
.pgf-campo > .pgf-campo-r i { font-style: normal; font-weight: 500; color: var(--pg-cinza); }
.pgf-campo input,
.pgf-campo select,
.pgf-campo textarea {
  width: 100%;
  padding: 14px 17px;
  border: 1px solid var(--pg-linha);
  border-radius: 0;
  background: #fff;
  font: inherit; font-size: 15.5px; color: var(--pg-grafite);
  transition: border-color .2s ease, box-shadow .2s ease;
}
.pgf-campo textarea { resize: vertical; min-height: 120px; }
.pgf-campo select {
  appearance: none; cursor: pointer;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23636362' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 15px center; background-size: 18px;
  padding-right: 44px;
}
.pgf-campo input:focus,
.pgf-campo select:focus,
.pgf-campo textarea:focus {
  outline: none;
  border-color: var(--pg-amarelo);
  box-shadow: 0 0 0 3px rgba(252,175,23,.22);
}
.pgf-campo[data-erro] input,
.pgf-campo[data-erro] select,
.pgf-campo[data-erro] textarea { border-color: #C2392F; box-shadow: 0 0 0 3px rgba(194,57,47,.14); }
.pgf-campo-e { display: none; margin: 7px 0 0; font-size: 13px; font-weight: 600; color: #C2392F; }
.pgf-campo[data-erro] .pgf-campo-e { display: block; }

/* escolha em cartao — melhor que <select> quando as opcoes sao poucas
   e a resposta muda o resto do formulario */
.pgf-opcoes { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 12px; }
.pgf-opcao { position: relative; display: block; cursor: pointer; }
.pgf-opcao input { position: absolute; opacity: 0; width: 0; height: 0; }
.pgf-opcao span {
  display: flex; flex-direction: column; gap: 5px;
  padding: 18px 18px 18px 46px;
  border: 1px solid var(--pg-linha);
  border-radius: 0;
  font-size: 15.5px; font-weight: 700; color: var(--pg-grafite);
  transition: border-color .2s ease, background .2s ease;
  height: 100%;
}
.pgf-opcao span i { font-style: normal; font-size: 13px; font-weight: 500; line-height: 1.45; color: var(--pg-cinza); }
.pgf-opcao span::before {
  content: '';
  position: absolute; left: 17px; top: 20px;
  width: 18px; height: 18px; border-radius: 50%;
  border: 2px solid #CFCFCC;
  transition: border-color .2s ease, background .2s ease;
}
.pgf-opcao input:checked + span { border-color: var(--pg-amarelo); background: rgba(252,175,23,.07); }
.pgf-opcao input:checked + span::before {
  border-color: var(--pg-amarelo);
  background: var(--pg-amarelo) no-repeat center;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%232E2D2F' stroke-width='4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6L9 17l-5-5'/%3E%3C/svg%3E");
  background-size: 11px;
}
.pgf-opcao input:focus-visible + span { box-shadow: 0 0 0 3px rgba(252,175,23,.3); }

/* as quatro fotos pedidas na consignacao */
.pgf-fotos {
  list-style: none; margin: 0 0 16px; padding: 0;
  display: grid; grid-template-columns: repeat(4, minmax(0,1fr)); gap: 12px;
}
.pgf-fotos li {
  border: 1px dashed #CFCFCC; border-radius: 0;
  padding: 16px 14px; text-align: center;
}
.pgf-fotos li b { display: block; font-size: 14.5px; font-weight: 700; color: var(--pg-grafite); }
.pgf-fotos li span { display: block; margin-top: 4px; font-size: 12.5px; line-height: 1.4; color: var(--pg-cinza); }

.pgf-arquivo { position: relative; display: block; }
.pgf-arquivo input { position: absolute; opacity: 0; width: 0; height: 0; }
.pgf-arquivo > span {
  display: flex; flex-direction: column; align-items: center; gap: 6px;
  padding: 28px 20px;
  border: 2px dashed #CFCFCC; border-radius: 0;
  cursor: pointer; text-align: center;
  transition: border-color .2s ease, background .2s ease;
}
.pgf-arquivo:hover > span { border-color: var(--pg-amarelo); background: rgba(252,175,23,.05); }
.pgf-arquivo b { font-size: 15.5px; font-weight: 700; color: var(--pg-grafite); }
.pgf-arquivo i { font-style: normal; font-size: 13px; color: var(--pg-cinza); }
.pgf-arquivo input:focus-visible + span { border-color: var(--pg-amarelo); box-shadow: 0 0 0 3px rgba(252,175,23,.25); }

/* revisao: o ultimo passo mostra o que a pessoa escreveu */
.pgf-revisao {
  margin: 0; display: grid; gap: 1px; background: var(--pg-linha);
  border: 1px solid var(--pg-linha); border-radius: 0; overflow: hidden;
}
.pgf-revisao > div { background: #fff; display: flex; justify-content: space-between; gap: 18px; padding: 13px 18px; font-size: 15px; }
.pgf-revisao dt { margin: 0; color: var(--pg-cinza); }
.pgf-revisao dd { margin: 0; font-weight: 700; color: var(--pg-grafite); text-align: right; }

.pgf-aceite {
  display: flex; align-items: flex-start; gap: 11px; margin-top: 20px;
  font-size: 14.5px; line-height: 1.55; color: var(--pg-cinza); cursor: pointer;
}
.pgf-aceite input { margin-top: 2px; width: 18px; height: 18px; accent-color: var(--pg-amarelo); flex: 0 0 auto; }
.pgf-aceite a { color: var(--pg-grafite); }

.pgf-pe {
  display: flex; flex-wrap: wrap; align-items: center; gap: 12px;
  margin-top: clamp(24px, 2.4vw, 34px);
  padding-top: clamp(20px, 2vw, 28px);
  border-top: 1px solid var(--pg-linha);
}
.pgf-btn {
  display: inline-flex; align-items: center; gap: 9px;
  padding: 15px 30px; border-radius: 0; border: 0;
  font: inherit; font-size: 15.5px; font-weight: 700; cursor: pointer;
  background: var(--pg-amarelo); color: var(--pg-grafite);
  transition: transform .18s ease, box-shadow .18s ease;
}
.pgf-btn:hover { transform: translateY(-2px); box-shadow: 0 10px 26px rgba(252,175,23,.32); }
.pgf-btn svg { width: 17px; height: 17px; }
.pgf-btn--vazio { background: transparent; border: 1px solid var(--pg-linha); color: var(--pg-grafite2); }
.pgf-btn--vazio:hover { background: var(--pg-cinza-fundo); box-shadow: none; }
.pgf-btn[hidden] { display: none; }
/* a nota mora na coluna da esquerda, com o resto do que a pessoa
   precisa saber antes de decidir — e nao no pe, disputando a linha dos
   botoes */
.pgf-nota {
  margin: 0; padding-top: 16px; border-top: 1px solid var(--pg-linha);
  font-size: 13px; line-height: 1.55; color: var(--pg-cinza);
}

/* o painel de sucesso nao tem as duas colunas */
.pgf-ok { display: block; }

/* o painel de sucesso substitui o formulario */
.pgf-ok { text-align: center; padding: clamp(36px, 3.6vw, 60px) clamp(24px, 2.4vw, 44px); }
.pgf-ok[hidden] { display: none; }
.pgf-ok-i {
  display: grid; place-items: center; margin: 0 auto 22px;
  width: 68px; height: 68px; border-radius: 50%;
  background: var(--pg-amarelo); color: var(--pg-grafite);
}
.pgf-ok-i svg { width: 32px; height: 32px; }
.pgf-ok h2 { margin: 0 0 10px; font-size: clamp(22px, 2vw, 32px); font-weight: 800; color: var(--pg-grafite); }
.pgf-ok p { margin: 0 auto 24px; max-width: 48ch; font-size: 16px; line-height: 1.65; color: var(--pg-cinza); }

/* ====================================================================
   CLIENTES  —  entregas reais, com filtro por tipo de servico
   ==================================================================== */

.pgk-filtros { display: flex; flex-wrap: wrap; gap: 9px; margin-bottom: clamp(26px, 2.6vw, 40px); }
.pgk-f {
  padding: 10px 19px; border-radius: 0; border: 1px solid var(--pg-linha);
  background: #fff; font: inherit; font-size: 14.5px; font-weight: 600;
  color: var(--pg-grafite2); cursor: pointer;
  transition: background .2s ease, color .2s ease, border-color .2s ease;
}
.pgk-f:hover { border-color: var(--pg-amarelo); }
.pgk-f[aria-pressed="true"] { background: var(--pg-grafite); border-color: var(--pg-grafite); color: #fff; }
.pgk-f b { font-weight: 800; color: #8A5E04; margin-left: 5px; font-variant-numeric: tabular-nums; }
.pgk-f[aria-pressed="true"] b { color: var(--pg-amarelo); }

.pgk-grade {
  list-style: none; margin: 0; padding: 0;
  display: grid; grid-template-columns: repeat(3, minmax(0,1fr));
  gap: clamp(16px, 1.6vw, 26px);
}
.pgk-c {
  display: flex; flex-direction: column;
  background: #fff;
  border: 1px solid var(--pg-linha);
  border-radius: var(--pg-r);
  padding: clamp(24px, 2.2vw, 34px);
  transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease;
}
.pgk-c:hover { transform: translateY(-4px); border-color: var(--pg-amarelo); box-shadow: 0 16px 38px rgba(0,0,0,.07); }
.pgk-c[hidden] { display: none; }

.pgk-c-topo { display: flex; align-items: center; justify-content: space-between; gap: 14px; margin-bottom: 16px; }
.pgk-tag {
  padding: 5px 13px; border-radius: 0;
  background: rgba(252,175,23,.16); color: #8A5E04;
  font-size: 11px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase;
}
.pgk-uf {
  font-size: 12.5px; font-weight: 800; letter-spacing: .08em;
  color: var(--pg-cinza);
  display: inline-flex; align-items: center; gap: 5px;
}
.pgk-uf svg { width: 13px; height: 13px; }

.pgk-c > b { display: block; font-size: 18px; line-height: 1.26; font-weight: 800; color: var(--pg-grafite); }
.pgk-impl { display: block; margin-top: 8px; font-size: 14.5px; font-weight: 600; color: #8A5E04; }
.pgk-c blockquote {
  margin: 16px 0 0; padding: 16px 0 0;
  border-top: 1px solid var(--pg-linha);
  font-size: 14.5px; line-height: 1.65; color: var(--pg-cinza);
  flex: 1;
}
.pgk-quem {
  display: block; margin-top: 16px;
  font-size: 13.5px; font-weight: 700; color: var(--pg-grafite2);
}
.pgk-quem::before { content: '— '; color: var(--pg-amarelo); }

.pgk-mais { display: grid; place-items: center; margin-top: clamp(26px, 2.6vw, 40px); }
.pgk-vazio { margin: 40px 0; text-align: center; font-size: 16px; color: var(--pg-cinza); }

/* alcance — o argumento que a lista sozinha nao fazia */
.pgk-mapa { display: grid; grid-template-columns: repeat(auto-fit, minmax(118px, 1fr)); gap: 12px; }
.pgk-mapa div {
  background: rgba(255,255,255,.05); border: 1px solid rgba(255,255,255,.1);
  border-radius: 0; padding: 20px 18px;
}
.pgk-mapa b { display: block; font-size: clamp(22px, 2vw, 30px); font-weight: 800; color: var(--pg-amarelo); line-height: 1; }
.pgk-mapa span { display: block; margin-top: 8px; font-size: 13.5px; color: rgba(255,255,255,.72); }

/* ====================================================================
   RESPONSIVO
   Os cortes ja vem multiplicados por .9, por causa do `zoom: .9` do
   body (ver CLAUDE.md). 1152 = 1280, 900 = 1000, 810 = 900, 594 = 660.
   ==================================================================== */

@media (max-width: 1152px) {
  .pgb-pq, .pgb-numeros .tk-dentro, .pgb-marcos { grid-template-columns: repeat(2, minmax(0,1fr)); }
  .pgk-grade { grid-template-columns: repeat(2, minmax(0,1fr)); }
  .pgb-marcos li { padding-right: 18px; }
}

@media (max-width: 900px) {
  .pgb-numerao, .pgb-faq, .pgb-proc-topo, .pgc-grade, .pgb-foto-grade { grid-template-columns: minmax(0,1fr); }
  .pgb-faq .pgb-tit { position: static; }
  /* `!important` porque o numero de colunas vem inline, de `processo()` */
  .pgb-passos { grid-template-columns: minmax(0,1fr) !important; }
  .pgb-passos li:not(:last-child)::after {
    top: auto; bottom: calc(-1 * clamp(18px, 1.8vw, 30px)); right: auto; left: 50%;
    width: 2px; height: clamp(18px, 1.8vw, 30px);
    background: repeating-linear-gradient(to bottom, var(--pg-amarelo) 0 6px, transparent 6px 11px);
  }
  .pgb--foto-inv .pgb-foto-texto, .pgb--foto-inv .pgb-foto-img { order: 0; }
  .pgb-foto-texto { padding: clamp(40px,5vw,60px) 0 0; }
  .pgb--foto { padding-bottom: clamp(40px,5vw,60px); }
  .pgf-opcoes { grid-template-columns: repeat(2, minmax(0,1fr)) !important; }
}

@media (max-width: 810px) {
  .pgz-l, .pgz-l--inv { grid-template-columns: minmax(0,1fr); }
  .pgz-l--inv .pgz-foto, .pgz-l--inv .pgz-cartao { order: 0; }
  .pgz-seta, .pgz-l--inv .pgz-seta {
    left: 50%; top: 0; right: auto;
    transform: translate(-50%, -50%);
  }
  .pgz-l:hover .pgz-seta, .pgz-l--inv:hover .pgz-seta { transform: translate(-50%, -50%) rotate(45deg); }
  .pgz-cartao { padding-top: clamp(42px, 5vw, 56px); }
  .pgz-cartao::before { display: none; }
  .pgh-h1 { font-size: clamp(32px, 7.5vw, 52px); }
  /* a coluna fixa do formulario vira topo: abaixo de 810 ela deixaria
     os campos com menos de 300px */
  .pgf { display: block; }
  .pgf-lado { border-right: 0; padding-right: 0; margin-bottom: 26px; }
  .pgf-trilha { display: flex; flex-wrap: wrap; gap: 6px; }
  .pgf-trilha li { background: var(--pg-cinza-fundo); }
  .pgf-nota { border-top: 0; padding-top: 12px; }
  .pgb-numeros .tk-dentro, .pgh-nums { gap: 20px; }
  .pgh-nums { grid-template-columns: repeat(2, minmax(0,1fr)); }
  .pgf-fotos { grid-template-columns: repeat(2, minmax(0,1fr)); }
}

@media (max-width: 594px) {
  .pgh-arte { min-height: 320px; }
  .pgh-nums { padding: 32px 24px; grid-template-columns: minmax(0,1fr); }
  .pgh-dentro { padding-bottom: 34px; }
  .pgb-pq, .pgb-numeros .tk-dentro, .pgb-marcos, .pgk-grade,
  .pgc-blocos, .pgf-par, .pgf-fotos { grid-template-columns: minmax(0,1fr); }
  /* `!important` porque `escolha()` grava as colunas INLINE (o numero
     vem do conteudo). Sem ele, os tres cartoes de "Sobre o que voce quer
     falar?" ficavam com 82px cada numa tela de 375 e o formulario
     empurrava contato e trabalhe para os lados. Mesma razao do
     `.pgb-grade` e do `.pgb-cards` logo abaixo. */
  .pgf-opcoes { grid-template-columns: minmax(0,1fr) !important; }
  .pgb-grade { grid-template-columns: minmax(0,1fr) !important; }
  .pgb-cards { grid-template-columns: minmax(0,1fr) !important; }
  .pgb-marcos li { padding-right: 0; }
  .pgf-trilha li span { display: none; }
  .pgf-trilha li { padding: 8px; }
  .pgb-chamada .tk-dentro { flex-direction: column; align-items: flex-start; }
}

@media (prefers-reduced-motion: reduce) {
  .pgb-faixa-trilho { animation: none; }
  .pgh-trilha, .pgh-kicker, .pgh-h1, .pgh-pe { animation: none; }
  .pgz-foto img, .pgz-seta, .pgb-card, .pgk-c, .pgc-bloco, .pgf-btn { transition: none; }
}