/* =============================================================================
   TR2 Engenharia - cartoes, breadcrumb e animacao de entrada

   Mesma regra: nenhuma cor ou fonte fixa. Tudo das variaveis do Kit.
   ========================================================================== */

/* =============================================================================
   Grade de cartoes
   ========================================================================== */

.tr2-grade-cartoes {
  display: grid;
  gap: var(--tr2-esp-md);
  /* Mobile primeiro: uma coluna. */
  grid-template-columns: 1fr;
}

@media (min-width: 768px) {
  .tr2-grade-cartoes { grid-template-columns: repeat(2, 1fr); gap: var(--tr2-esp-lg); }
}

@media (min-width: 1100px) {
  .tr2-grade-cartoes { grid-template-columns: repeat(3, 1fr); }
}

/* =============================================================================
   Cartao de servico
   ========================================================================== */

.tr2-cartao-servico {
  background: var(--e-global-color-fundo);
  border: 1px solid var(--e-global-color-borda);
  border-radius: var(--tr2-raio-lg);
  overflow: hidden;
  /* As 6 areas tem PESO VISUAL IGUAL - decisao do cliente. Nenhuma recebe
     destaque, borda dourada ou tamanho maior. */
  display: flex;
}

.tr2-cartao-servico__link {
  display: flex;
  /* O cartao inteiro e um link, e `text-decoration` de um ancestral ancora
     NAO pode ser cancelado pelos filhos - por isso o `*`. Sem isto, titulo,
     paragrafo e linha de servicos saiam todos sublinhados. */
  /* No celular a imagem vai em cima; a partir de 768px, a esquerda. */
  flex-direction: column;
  gap: 0;
  text-decoration: none;
  color: inherit;
  width: 100%;
}

/* `a.` no seletor NAO e enfeite: o Hello usa `.entry-content a` (0,1,1) e o
   nosso `.tr2-cartao-servico__link` sozinho e (0,1,0) - perdia. Com o elemento
   no seletor empatamos e vencemos pela ordem, porque componentes.css carrega
   depois.

   E tem de ser na ANCORA. `text-decoration` de um ancestral e PROPAGADO aos
   filhos, nao herdado: declarar `none` no titulo nao apaga o risco, e o
   getComputedStyle do filho ainda responde "none" enquanto o sublinhado
   continua desenhado. Foi o que me enganou na primeira verificacao. */
a.tr2-cartao-servico__link,
a.tr2-cartao-servico__link:hover,
a.tr2-cartao-servico__link:focus { text-decoration: none; }

/* O icone fica SEMPRE em faixa no topo. A regra antiga virava o cartao para
   linha entre 480 e 767px, porque uma foto de 38% de largura economizava
   altura; com um icone de 48px isso deixaria uma faixa vazia enorme ao lado. */

/* --- icone -------------------------------------------------------------- */

/* Substituiu a area de foto por decisao do cliente (07/10/2026).

   A COR VEM DAQUI, nao do SVG: o <svg> inline usa `stroke="currentColor"` e
   herda esta declaracao, que por sua vez le a Cor Global. Nenhum hex no
   desenho - e trocar a Primaria no Kit troca os seis icones. */
.tr2-cartao-servico__icone {
  display: flex;
  align-items: center;
  justify-content: center;
  /* Altura fixa em vez de aspect-ratio: o bloco nao e mais uma foto de
     proporcao variavel, e altura constante alinha os seis titulos na mesma
     linha quando os cartoes ficam lado a lado. */
  min-height: 104px;
  flex-shrink: 0;
  background: var(--e-global-color-fundoalternativo);
  border-bottom: 1px solid var(--e-global-color-borda);
  color: var(--e-global-color-primary);
}

/* ALTURA FIXA, LARGURA LIVRE.
   Desde 15/10 o icone e a figura dele, e as cinco tem a mesma altura com
   larguras diferentes - a do parque eolico e a mais larga. Fixar os dois
   lados esmagaria essa. 48px e o tamanho em que o desenho se le. */
.tr2-icone {
  display: block;
  width: auto;
  height: 48px;
}

/* O icone acompanha o estado do cartao, junto com o titulo. */
.tr2-cartao-servico:hover .tr2-cartao-servico__icone,
.tr2-cartao-servico:focus-within .tr2-cartao-servico__icone {
  background: var(--e-global-color-secondary);
  color: var(--e-global-color-branco);
}

/* Cartao sem icone (os de servico): o corpo ocupa tudo e nao sobra faixa. */
.tr2-cartao-servico__link > .tr2-cartao-servico__corpo:first-child {
  padding-top: var(--tr2-esp-md);
}

/* --- corpo -------------------------------------------------------------- */

.tr2-cartao-servico__corpo {
  padding: var(--tr2-esp-md);
  display: flex;
  flex-direction: column;
  gap: 10px;
  flex: 1;
}

.tr2-cartao-servico__num {
  font-family: var(--e-global-typography-etiqueta-font-family), system-ui, sans-serif;
  font-size: var(--e-global-typography-etiqueta-font-size);
  font-weight: 600;
  letter-spacing: var(--e-global-typography-etiqueta-letter-spacing);
  /* Primaria, nao Destaque.
     O Destaque sobre branco da 2,01:1 - e o par que design-tokens.json marca
     como PROIBIDO, e eu o usei aqui mesmo assim. O Lighthouse apontou nos 6
     cartoes. O check-contrast valida os pares do JSON, nao o uso real deles no
     CSS, entao nao pegava. */
  color: var(--e-global-color-primary);
  line-height: 1;
}

.tr2-cartao-servico__titulo {
  margin: 0;
  font-size: var(--e-global-typography-accent-font-size);
  font-weight: var(--e-global-typography-accent-font-weight);
  line-height: 1.25;
  color: var(--e-global-color-primary);
  text-wrap: balance;
}

.tr2-cartao-servico__texto {
  margin: 0;
  max-width: none;
  font-size: .9375rem;
  line-height: 1.55;
  color: var(--e-global-color-text);
}

/* Linha de servicos: menor e mais discreta. Sem rotulo "Servicos:" - o
   contraste de tamanho e cor ja a separa do paragrafo. 6,55:1 sobre branco. */
.tr2-cartao-servico__linha {
  margin: auto 0 0;
  padding-top: var(--tr2-esp-xs);
  max-width: none;
  font-size: .8125rem;
  line-height: 1.5;
  color: var(--e-global-color-textosuave);
  border-top: 1px solid var(--e-global-color-borda);
}

/* --- estados ------------------------------------------------------------ */

.tr2-cartao-servico:hover,
.tr2-cartao-servico:focus-within {
  border-color: var(--e-global-color-primary);
}

/* Estado de hover no TITULO, nao em todo o texto. `text-decoration-line` em
   vez de `text-decoration` para nao reintroduzir sublinhado herdado nos
   filhos. */
.tr2-cartao-servico:hover .tr2-cartao-servico__titulo,
.tr2-cartao-servico:focus-within .tr2-cartao-servico__titulo {
  text-decoration-line: underline;
  text-underline-offset: .18em;
}

/* O cartao inteiro e clicavel, mas o foco precisa aparecer no cartao, nao no
   link invisivel de largura total. */
.tr2-cartao-servico__link:focus-visible { outline: none; }
.tr2-cartao-servico:focus-within {
  outline: 3px solid var(--e-global-color-accent);
  outline-offset: 2px;
}

/* =============================================================================
   Breadcrumb
   ========================================================================== */

.tr2-breadcrumb ol {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 10px;
  margin: 0 0 var(--tr2-esp-sm);
  padding: 0;
  list-style: none;
  font-size: .8125rem;
}

.tr2-breadcrumb li + li::before {
  content: "/";
  margin-right: 10px;
  opacity: .5;
}

.tr2-breadcrumb a { text-decoration: none; }
.tr2-breadcrumb a:hover { text-decoration: underline; }
.tr2-breadcrumb [aria-current="page"] { font-weight: 600; }

/* =============================================================================
   Lista de contato
   ========================================================================== */

.tr2-contato { list-style: none; margin: 0; padding: 0; }
.tr2-contato li + li { margin-top: 10px; }
.tr2-contato strong { color: var(--e-global-color-primary); }

/* =============================================================================
   Animacao de entrada: .tr2-reveal
   ========================================================================== */

/*
  COMO FUNCIONA, E POR QUE ASSIM

  O estado escondido NAO e o padrao do CSS. Ele e aplicado por uma classe que o
  JavaScript adiciona no <html> (`tr2-js`) assim que roda. Se o JavaScript
  falhar, nao carregar ou estiver bloqueado, nada recebe a classe e TODO o
  conteudo fica visivel - que e a unica opcao aceitavel. A alternativa comum
  (opacity:0 no CSS, revelado por JS) esconde o site inteiro quando o script
  quebra.

  Nada acima da dobra e animado: o hero nunca recebe .tr2-reveal. Animar o
  primeiro elemento da pagina atrasa o Largest Contentful Paint e e percebido
  como lentidao, nao como refinamento.

  So transform e opacity, que o navegador compoe sem recalcular layout - por
  isso nao gera deslocamento de layout (CLS).
*/

.tr2-js .tr2-reveal {
  opacity: 0;
  transform: translateY(16px);
  /* 400ms: perceptivel sem fazer esperar. */
  transition: opacity .4s ease-out, transform .4s ease-out;
  /* Escalonamento entre cartoes da mesma linha, definido pelo JS. */
  transition-delay: var(--tr2-reveal-delay, 0ms);
}

.tr2-js .tr2-reveal.tr2-visivel {
  opacity: 1;
  transform: none;
}

/* Quem pediu menos movimento recebe o conteudo direto, sem transicao. */
@media (prefers-reduced-motion: reduce) {
  .tr2-js .tr2-reveal {
    opacity: 1;
    transform: none;
    transition: none;
  }
}

/* Impressao: tudo visivel. */
@media print {
  .tr2-js .tr2-reveal { opacity: 1; transform: none; }
}

/* =============================================================================
   Secao de conteudo (home, Servicos, areas)
   ========================================================================== */

/* A coluna central, para o que NAO e faixa de largura total.

   SEM RESPIRO LATERAL PROPRIO desde 18/10. O .site-main ja tem os 24px de
   cada lado (design-system.css); somar outros 24 aqui punha estas secoes
   24px para dentro do logo e de todos os titulos das faixas - medido em
   1440: logo e faixas em x=120, "Principais clientes", os cartoes do Blog e
   o corpo das paginas de servico e dos artigos em x=144. As faixas de
   largura total declaram o proprio respiro mais abaixo e nao mudam. */
.tr2-secao--servicos,
.tr2-secao {
  max-width: var(--tr2-container);
  margin-inline: auto;
  padding-inline: 0;
}

.tr2-secao__intro {
  max-width: var(--tr2-medida);
  margin-bottom: var(--tr2-esp-lg);
}

.tr2-secao__intro p + p { margin-top: var(--tr2-esp-sm); }

/* Hero em conteudo classico - a Fase 5 recria isto no Elementor usando os
   mesmos tokens. */
.tr2-hero {
  padding: var(--tr2-secao-y) var(--tr2-container-pad);
  /* Sem margem embaixo desde 19/10: com a faixa "ponte" fora da home, o
     hero passou a encostar em "Nossos servicos" (bege), e a margem virava
     uma tira branca entre os dois. */
  margin-bottom: 0;
}

/* UMA coluna de conteudo, e todo filho comeca na borda esquerda dela.

   A versao anterior era `.tr2-hero > * { max-width:1200px; margin-inline:auto }`
   e produzia TRES alinhamentos diferentes no mesmo hero (medido a 1440px):
   etiqueta em x=24, h1 em x=120, apoio em x=388. Porque `margin-inline:auto`
   centraliza cada filho dentro da SUA largura maxima - e o apoio tem 62ch, nao
   1200px, entao ele se centralizava sozinho no meio do hero.

   Com grid, a coluna e centralizada uma vez e `justify-items: start` encosta
   todo mundo na mesma borda, qualquer que seja a largura maxima de cada um. */
.tr2-hero {
  display: grid;
  grid-template-columns: minmax(0, var(--tr2-container));
  justify-content: center;
  justify-items: start;
}

.tr2-hero > * { margin-inline: 0; max-width: 100%; }

.tr2-hero__sub {
  font-size: 1.0625rem;
  /* Medida de leitura menor que a do corpo: o apoio do hero e uma frase, nao
     um paragrafo tecnico. */
  max-width: 62ch;
  margin-bottom: var(--tr2-esp-lg);
}

.tr2-hero__acoes {
  display: flex;
  flex-wrap: wrap;
  gap: var(--tr2-esp-sm);
  max-width: none;
}

/* =============================================================================
   Figura ilustrativa e selo de acreditacao
   ========================================================================== */

.tr2-figura {
  margin: var(--tr2-esp-lg) 0;
  max-width: 100%;
}

.tr2-figura img {
  display: block;
  width: 100%;
  height: auto;
  border: 1px solid var(--e-global-color-borda);
  border-radius: var(--tr2-raio-md);
}

.tr2-figura figcaption {
  margin-top: var(--tr2-esp-xs);
  font-size: .8125rem;
  line-height: 1.5;
  color: var(--e-global-color-textosuave);
}

/* Selo INMETRO: so na pagina do Laudo de Ruido. */
.tr2-selo {
  display: flex;
  flex-direction: column;
  gap: var(--tr2-esp-md);
  margin: var(--tr2-esp-lg) 0;
  padding: var(--tr2-esp-md);
  background: var(--e-global-color-fundoalternativo);
  border: 1px solid var(--e-global-color-borda);
  border-radius: var(--tr2-raio-lg);
}

@media (min-width: 768px) {
  .tr2-selo { flex-direction: row; align-items: flex-start; gap: var(--tr2-esp-lg); }
  .tr2-selo__img { flex: 0 0 200px; }
}

.tr2-selo__img img { display: block; width: 100%; height: auto; }
.tr2-selo__texto p { font-size: .9375rem; }
.tr2-selo__link { font-weight: 600; }

.tr2-resumo {
  font-size: 1.125rem;
  line-height: 1.55;
  color: var(--e-global-color-textosuave);
  margin-bottom: var(--tr2-esp-lg);
}

/* =============================================================================
   Setores atendidos (home, secao 4)

   Dois itens, nunca mais: o cliente nomeou energia e infraestrutura e so. Por
   isso `repeat(2, 1fr)` fixo em vez de `auto-fit` - se alguem acrescentar um
   terceiro setor, o layout quebrar e o sinal certo de que houve uma decisao de
   negocio sem decisao do cliente.
   ========================================================================== */

.tr2-setores {
  display: grid;
  gap: var(--tr2-esp-md);
  grid-template-columns: 1fr;
  margin-top: var(--tr2-esp-lg);
}

@media (min-width: 768px) {
  .tr2-setores { grid-template-columns: repeat(2, 1fr); gap: var(--tr2-esp-lg); }
}

.tr2-setor {
  background: var(--e-global-color-fundoalternativo);
  border-left: 4px solid var(--e-global-color-accent);
  padding: var(--tr2-esp-md);
}

.tr2-setor__titulo { margin: 0 0 var(--tr2-esp-xs); }
.tr2-setor__texto  { margin: 0; color: var(--e-global-color-textosuave); }

/* =============================================================================
   Como trabalhamos, em 3 passos (home, secao 5)
   ========================================================================== */

/* O cartao bege do modelo dele (18/10). */
.tr2-passos {
  display: grid;
  gap: var(--tr2-esp-lg);
  grid-template-columns: 1fr;
  margin-top: var(--tr2-esp-lg);
  padding: var(--tr2-esp-lg) var(--tr2-esp-md);
  background: var(--e-global-color-fundoalternativo);
  border: 1px solid var(--e-global-color-borda);
  border-radius: var(--tr2-raio-lg);
}

@media (min-width: 768px) {
  .tr2-passos {
    grid-template-columns: repeat(3, 1fr);
    gap: var(--tr2-esp-md);
    padding: var(--tr2-esp-lg) var(--tr2-esp-lg);
  }
}

/* Numero + icone numa linha, e o traco dourado ate o proximo passo. */
.tr2-passo__topo {
  display: flex;
  align-items: center;
  gap: var(--tr2-esp-sm);
  margin-bottom: var(--tr2-esp-sm);
}

@media (min-width: 768px) {
  .tr2-passo:not(:last-child) .tr2-passo__topo::after {
    content: "";
    flex: 1;
    height: 2px;
    margin-left: var(--tr2-esp-xs);
    background: var(--e-global-color-accent);
  }
}

.tr2-passo__icone {
  display: grid;
  place-items: center;
  flex: none;
  width: 56px;
  height: 56px;
  border: 1px solid var(--e-global-color-accent);
  border-radius: 50%;
  color: var(--e-global-color-primary);
}

.tr2-passo__icone svg { display: block; }

.tr2-passo__num {
  /* Numero grande e DECORATIVO - aria-hidden no HTML. O tamanho vem da escala
     fluida (tipografia `secondary`, a dos h2).

     A cor e Primaria, nao Destaque. Eu havia escrito aqui que o Destaque era
     "permitido porque e um numero grande" - estava errado, e afirmei sem medir.
     O limite para texto grande e 3:1 e o par da 2,01:1: reprova em qualquer
     tamanho. `aria-hidden` tambem nao isenta - quem ve a tela continua vendo o
     numero. */
  display: block;
  font-family: var(--e-global-typography-primary-font-family), sans-serif;
  font-size: var(--e-global-typography-secondary-font-size);
  font-weight: 700;
  line-height: 1;
  /* DOURADO desde 18/10, como no modelo dele - mas ESCURECIDO: o Destaque
     puro sobre o bege mede 2,01:1 e reprova ate como texto grande (3:1).
     Misturado com 35% da Primaria Escura fica dourado e passa. Medido nos
     pixels, ver o commit. */
  color: color-mix(in srgb, var(--e-global-color-accent) 65%, var(--e-global-color-secondary));
  /* Digitos de mesma largura: o icone do 01 e o do 02 alinham no celular. */
  font-variant-numeric: tabular-nums;
}

.tr2-passo__titulo { margin: 0 0 var(--tr2-esp-xs); }
.tr2-passo__texto  { margin: 0; color: var(--e-global-color-textosuave); }

/* =============================================================================
   Faixa de CTA (home, secao 6)

   Herda tudo de `.tr2-faixa-escura` - fundo, cor de titulo e de paragrafo. Aqui
   so centraliza.
   ========================================================================== */

.tr2-faixa-cta { text-align: center; }
.tr2-faixa-cta .tr2-hero__acoes { justify-content: center; }
/* =============================================================================
   Pagina 404
   ========================================================================== */

.tr2-404 { padding: var(--tr2-secao-y) var(--tr2-container-pad); }

.tr2-404__corpo {
  max-width: var(--tr2-container);
  margin-inline: auto;
}
/* =============================================================================
   Fotos de campo

   Sao fotos do cliente, do equipamento dele. Herdam o enquadramento de
   `.tr2-figura` e so ajustam o que difere: foto tem proporcao propria e pode
   ir em coluna lateral, mapa nao.
   ========================================================================== */

.tr2-foto img {
  width: 100%;
  height: auto;
  border-radius: var(--tr2-raio-md);
}

/* Coluna lateral a partir de 768px, empilhada abaixo disso.

   `float` e nao grid: o texto que vem depois PRECISA correr ao lado da foto, e
   e justamente isso que float faz e grid nao - num grid o paragrafo seria uma
   celula e nao envolveria a imagem.

   So para a foto VERTICAL. Uma horizontal em meia largura deixaria o medidor
   pequeno demais para se enxergar, que e o assunto da imagem. */
@media (min-width: 768px) {
  .tr2-foto--lateral {
    float: right;
    width: 38%;
    max-width: 320px;
    margin: 0 0 var(--tr2-esp-md) var(--tr2-esp-lg);
  }
}

/* Impede que a foto flutuante "vaze" para dentro da proxima secao quando o
   texto ao lado e curto. */
.tr2-foto--lateral + * { clear: none; }
.tr2-secao { clear: both; }
/* =============================================================================
   Hero com foto (variante aguardando decisao do cliente)

   Liga/desliga em inc/branding.php, constante TR2_HERO_FOTO. Sem a constante
   ligada nada aqui tem efeito - a classe `tr2-hero--foto` nem sai no HTML.
   ========================================================================== */

.tr2-hero--foto {
  position: relative;
  /* A textura de curvas sai: aqui o fundo e a foto. */
  background-image: none;
}

.tr2-hero__fundo,
.tr2-hero__fundo img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  margin: 0;
  max-width: none;
}

.tr2-hero__fundo img {
  object-fit: cover;
  /* Desktop: o medidor fica em baixo ao centro - ancora a imagem ai para que o
     recorte da altura do hero nunca o corte fora. */
  object-position: center 62%;
}

/* O escurecimento NAO esta aqui: esta gravado nos proprios arquivos, por
   scripts/fotos-preparar.py (brilho 0,34 e saturacao 0,75).

   Ja foi `filter` no CSS. Tirar de la tem duas vantagens: o arquivo viaja
   escuro, que comprime muito melhor - o AVIF de desktop caiu de 282 KB para
   28 KB - e o navegador nao gasta trabalho filtrando a maior imagem da pagina
   durante a primeira pintura.

   Antes disso tentei uma camada `::before` com gradiente. Nao funcionava no
   topo do hero: `::before` de um container `grid` e um GRID ITEM, e o bloco
   continente de um item de grid posicionado em absoluto e a AREA DE GRID, que
   comeca depois do padding-top de 96px. */

/* Cor de fundo sob a foto: enquanto a imagem nao carrega, o hero ja aparece na
   cor certa em vez de branco - e o texto branco nunca fica sobre nada. */
.tr2-hero--foto { background-color: var(--e-global-color-secondary); }
.tr2-hero__fundo { z-index: 0; }

/* O conteudo acima das duas camadas. */
.tr2-hero--foto > :not(.tr2-hero__fundo) { position: relative; z-index: 2; }

@media (max-width: 767px) {
  /* No celular a derivada ja vem recortada no medidor e na turbina; centralizar
     e o suficiente e nao corta nenhum dos dois. */
  .tr2-hero__fundo img { object-position: center center; }

  /* Altura vem do PADDING, nao de min-height + centralizacao.

     A primeira versao usava `min-height: 78vh` com `align-content: center`. O
     texto centralizado dentro de uma caixa de altura fixa se recentraliza
     quando a fonte web entra no lugar da de sistema, e tudo abaixo do hero
     anda junto: CLS medido em 0,115 no celular, contra 0,032 da versao com
     textura, que nao tem nem um nem outro.

     Com padding o hero cresce a partir do conteudo, como o resto do site, e a
     troca de fonte muda a altura sem mover nada que ja esteja posicionado. */
  .tr2-hero--foto {
    padding-top: calc(var(--tr2-secao-y) * 1.6);
    padding-bottom: calc(var(--tr2-secao-y) * 1.6);
  }
}
/* =============================================================================
   Faixa de hero das paginas internas

   Vem dos designs do cliente: toda pagina interna abre com faixa escura sobre
   foto, com breadcrumb, titulo e uma linha de apoio.

   A foto ja vem ESCURECIDA do arquivo (fotos-preparar.py grava com brilho
   0,34), entao aqui nao ha filtro nem camada: so a cor de fundo por baixo,
   para a faixa aparecer certa enquanto a imagem nao carrega.
   ========================================================================== */

.tr2-hero-pagina {
  position: relative;
  padding: var(--tr2-secao-y) var(--tr2-container-pad);
  /* Sem margem embaixo desde 18/10 - ver "Ritmo vertical entre secoes". */
  margin-bottom: 0;
  background-color: var(--e-global-color-secondary);
  overflow: hidden;
}

.tr2-hero-pagina__fundo,
.tr2-hero-pagina__fundo img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  margin: 0;
  max-width: none;
}

.tr2-hero-pagina__fundo img { object-fit: cover; object-position: center 62%; }
.tr2-hero-pagina__fundo { z-index: 0; }

.tr2-hero-pagina__corpo {
  position: relative;
  z-index: 1;
  max-width: var(--tr2-container);
  /* 0, NAO auto: dentro do grid da faixa, `auto` encolhia o bloco ate a
     largura do texto e o CENTRALIZAVA - no celular "Quem Somos" e "Blog"
     ficavam no meio da faixa, e a home a esquerda. Ele pediu (18/10) os
     titulos alinhados a esquerda como na pagina Inicio. A coluna ja e
     centralizada pelo grid da faixa. */
  margin-inline: 0;
}

/* Texto branco sobre a faixa, como no hero da home. O titulo da pagina ja nao
   e impresso pelo Hello aqui - ver inc/hero-pagina.php. */
.tr2-hero-pagina :is(h1, h2, h3) { color: var(--e-global-color-branco); }
.tr2-hero-pagina h1 { margin: var(--tr2-esp-sm) 0 0; }

.tr2-hero-pagina__apoio {
  margin: var(--tr2-esp-sm) 0 0;
  max-width: 62ch;
  color: var(--e-global-color-branco);
  font-size: 1.0625rem;
  line-height: 1.6;
}

/* Breadcrumb sobre a foto: o link herdaria a cor escura da regra geral. */
.tr2-hero-pagina .tr2-breadcrumb ol { margin-bottom: 0; }
.tr2-hero-pagina .tr2-breadcrumb,
.tr2-hero-pagina .tr2-breadcrumb a,
.tr2-hero-pagina .tr2-breadcrumb [aria-current="page"] {
  color: var(--e-global-color-branco);
}
.tr2-hero-pagina .tr2-breadcrumb a { opacity: .85; }
.tr2-hero-pagina .tr2-breadcrumb a:hover { opacity: 1; }
/* =============================================================================
   REDESENHO V1 - ritmo de secoes, faixas com imagem

   O cliente achou o site claro demais. A resposta e o RITMO: nunca duas
   secoes claras seguidas. Escura e imagem contam como escura.
   ========================================================================== */

/* --- faixa com imagem de fundo ----------------------------------------- */

.tr2-escura,
.tr2-faixa-img {
  position: relative;
  background-color: var(--e-global-color-secondary);
  overflow: hidden;
}

.tr2-fundo,
.tr2-fundo img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  margin: 0;
  max-width: none;
}

.tr2-fundo { z-index: 0; }
.tr2-fundo img { object-fit: cover; object-position: center 55%; }

/* O conteudo sempre acima da imagem. `> *` e nao uma classe: assim qualquer
   bloco que entre na faixa fica por cima, sem ninguem lembrar de marcar. */
.tr2-escura > :not(.tr2-fundo),
.tr2-faixa-img > :not(.tr2-fundo) { position: relative; z-index: 1; }

.tr2-escura :is(h1, h2, h3, h4, p, li),
.tr2-faixa-img :is(h1, h2, h3, h4, p, li) { color: var(--e-global-color-branco); }

/* --- secao clara -------------------------------------------------------- */

.tr2-clara { background-color: var(--e-global-color-fundoalternativo); }

/* --- cartoes sobre faixa escura ---------------------------------------- */
/* Translucido com borda clara, como nos mockups: o cartao branco sobre foto
   criaria um bloco que compete com a imagem. */

.tr2-escura .tr2-cartao-servico,
.tr2-faixa-img .tr2-cartao-servico {
  background: rgb(255 255 255 / 7%);
  border-color: rgb(255 255 255 / 22%);
  backdrop-filter: blur(2px);
}

.tr2-escura .tr2-cartao-servico__icone,
.tr2-faixa-img .tr2-cartao-servico__icone {
  background: rgb(255 255 255 / 8%);
  border-bottom-color: rgb(255 255 255 / 18%);
  color: var(--e-global-color-branco);
}

.tr2-escura .tr2-cartao-servico :is(.tr2-cartao-servico__titulo, .tr2-cartao-servico__texto),
.tr2-faixa-img .tr2-cartao-servico :is(.tr2-cartao-servico__titulo, .tr2-cartao-servico__texto) {
  color: var(--e-global-color-branco);
}

/* --- paineis de setor: imagem com texto por cima ----------------------- */

.tr2-paineis {
  display: grid;
  gap: var(--tr2-esp-md);
  grid-template-columns: 1fr;
  margin-top: var(--tr2-esp-lg);
}

@media (min-width: 768px) {
  .tr2-paineis { grid-template-columns: repeat(2, 1fr); gap: var(--tr2-esp-lg); }
}

.tr2-painel {
  position: relative;
  min-height: 260px;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding: var(--tr2-esp-md);
  border-radius: var(--tr2-raio-lg);
  overflow: hidden;
  background-color: var(--e-global-color-secondary);
}

.tr2-painel > :not(.tr2-fundo) { position: relative; z-index: 1; }
.tr2-painel :is(h3, p) { color: var(--e-global-color-branco); margin: 0; }
.tr2-painel h3 { margin-bottom: var(--tr2-esp-xs); }
.tr2-painel p { font-size: .9375rem; line-height: 1.55; }

/* --- faixa de CTA com imagem ------------------------------------------- */

.tr2-faixa-cta__corpo {
  max-width: var(--tr2-container);
  margin-inline: auto;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--tr2-esp-md);
}

.tr2-folha { color: var(--e-global-color-accent); display: flex; flex-shrink: 0; }

.tr2-faixa-cta__frase {
  flex: 1 1 22ch;
  margin: 0;
  font-family: var(--e-global-typography-primary-font-family), system-ui, sans-serif;
  font-size: var(--e-global-typography-accent-font-size);
  line-height: 1.35;
}

/* --- chips de legislacao ----------------------------------------------- */

.tr2-chips { display: flex; flex-wrap: wrap; gap: var(--tr2-esp-xs); margin: var(--tr2-esp-sm) 0 0; padding: 0; list-style: none; }

.tr2-chip {
  padding: 6px 12px;
  border: 1px solid var(--e-global-color-borda);
  border-radius: var(--tr2-raio-pill);
  background: var(--e-global-color-fundo);
  font-size: .8125rem;
  color: var(--e-global-color-text);
}

.tr2-escura .tr2-chip,
.tr2-faixa-img .tr2-chip {
  background: rgb(255 255 255 / 8%);
  border-color: rgb(255 255 255 / 22%);
  color: var(--e-global-color-branco);
}

/* --- barra de abas (ancoras na propria pagina) -------------------------- */

.tr2-abas {
  display: flex;
  flex-wrap: wrap;
  gap: var(--tr2-esp-md);
  margin: 0;
  padding: 0 var(--tr2-esp-md);
  list-style: none;
  border-bottom: 1px solid var(--e-global-color-borda);
  background: var(--e-global-color-fundo);
}

@media (min-width: 1024px) {
  /* Gruda abaixo do cabecalho. So no desktop: no celular rouba altura util. */
  .tr2-abas { position: sticky; top: 0; z-index: 20; }
}

.tr2-abas a {
  display: block;
  padding: var(--tr2-esp-sm) 0;
  border-bottom: 2px solid transparent;
  text-decoration: none;
  font-size: .9375rem;
  color: var(--e-global-color-textosuave);
}

.tr2-abas a:hover,
.tr2-abas a:focus-visible { color: var(--e-global-color-primary); }
.tr2-abas a[aria-current="true"] {
  color: var(--e-global-color-primary);
  border-bottom-color: var(--e-global-color-accent);
  font-weight: 600;
}
/* --- faixas de largura total -------------------------------------------
   Nos mockups toda faixa escura ou com imagem vai de borda a borda. O Hello
   prende o conteudo numa coluna, entao a faixa saia com margem branca dos
   dois lados - era a diferenca mais visivel contra o mockup.
   100vw com deslocamento de metade da sobra: funciona sem saber a largura da
   coluna. `max-width:100vw` evita a barra horizontal quando ha scrollbar. */
.tr2-hero,
.tr2-faixa-img,
.tr2-escura,
.tr2-clara,
.tr2-abas-wrap,
.tr2-hero-pagina {
  width: 100vw;
  max-width: 100vw;
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
}

/* O conteudo volta para a coluna central dentro da faixa.

   POR GRID, NAO POR `margin-inline: auto`. A versao anterior era
   `.tr2-clara > * { max-width: 1200px; margin-inline: auto }` e falhava de
   duas maneiras, as duas visiveis so em tela larga:

     1. `margin-inline: auto` nao centraliza um `inline-block`. A etiqueta
        "O QUE FAZEMOS" e inline-block e ficava em x=24 enquanto o h2 logo
        abaixo ficava em x=356.

     2. Qualquer componente que declarasse `margin: X 0` DEPOIS desta regra
        empatava em especificidade (0,1,0) e vencia pela ordem, zerando o
        `auto`. Foi o que jogou o diagrama LP/LI/LO inteiro para x=24.

   Com grid a coluna e posicionada pelo CONTAINER, nao pelo filho: nenhuma
   margem de componente alcanca isso, e `inline-block` vira item de grid. E
   o mesmo padrao que `.tr2-hero` ja usava desde que teve o mesmo problema.

   `minmax(0, ...)` e nao `1fr`: sem o minimo zero, um filho com conteudo
   largo (tabela, bloco de codigo) estoura a coluna em vez de encolher.

   A medida e em `%` da propria faixa, nao em `vw`: com barra de rolagem
   classica, `50vw` fica meia barra deslocado do centro real e a faixa
   desalinharia do cabecalho justamente onde o problema apareceu. */
.tr2-faixa-img,
.tr2-escura,
.tr2-clara,
.tr2-abas-wrap,
.tr2-hero-pagina {
  display: grid;
  grid-template-columns: minmax(0, var(--tr2-container));
  justify-content: center;
  padding-inline: var(--tr2-container-pad);
}

/* O FUNDO NAO LEVA `grid-column`. NUNCA.
 *
 * Eu tinha escrito aqui `grid-column: 1 / -1; justify-self: stretch`
 * achando que era uma rede de seguranca para a imagem cobrir a faixa
 * inteira. E exatamente o contrario:
 *
 *   um elemento ABSOLUTO filho de um grid, COM posicao de grid declarada,
 *   passa a ter a CELULA como bloco contentor - nao mais a caixa de
 *   preenchimento do container.
 *
 * Como a grade tem uma coluna so, a de `--tr2-container`, o `inset: 0` da
 * imagem passou a valer 1200px em vez da largura da tela. A 1920 sobravam
 * duas faixas de verde escuro nas laterais do hero da home: a foto no meio,
 * o veu por cima da tela toda.
 *
 * Sem `grid-column`, o bloco contentor volta a ser a caixa de preenchimento
 * da faixa - que e 100vw - e `inset: 0` cobre tudo de novo. Nenhuma regra
 * e necessaria aqui: o certo e a ausencia dela.
 *
 * A REGRA, para nao se perder de novo:
 *   FUNDO (foto, cor, gradiente)  ->  largura da tela
 *   CONTEUDO (texto, botao, cartao, diagrama)  ->  --tr2-container
 *
 * qa/container.spec.js confere as duas metades. */

.tr2-secao--ponte .tr2-secao__intro {
  max-width: var(--tr2-container);
  margin-inline: auto;
}
/* =============================================================================
   O VEU DAS FAIXAS COM IMAGEM

   Daqui para baixo os gradientes usam `rgb(var(--tr2-veu-rgb) / N%)`, nunca
   `rgb(27 42 30 / N%)`.

   --tr2-veu-rgb sao os canais da Primaria Escura, emitidos por
   inc/design-system.php a partir do Kit ATIVO do Elementor. Com a cor escrita
   a mao aqui - e eram 21 ocorrencias - trocar a paleta deixaria o site inteiro
   novo e os veus verdes, contra o que o proprio design-tokens.json promete no
   cabecalho: "nenhum CSS do tema tem cor fixa".

   Nao da para decompor `var(--e-global-color-secondary)` em canais dentro do
   CSS: `rgb(var(--x) / 50%)` so funciona se a variavel ja for "r g b". Por
   isso os canais vem do PHP, em ~40 bytes de CSS inline por pagina.
   ========================================================================== */

/* Painel de setor: imagem por background, escurecida por gradiente - aqui o
   arquivo nao vem escurecido (nao e hero). */
.tr2-painel {
  background-size: cover;
  background-position: center;
}
.tr2-painel::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgb(var(--tr2-veu-rgb) / 35%) 0%, rgb(var(--tr2-veu-rgb) / 88%) 100%);
}

/* O hero tem grid proprio (uma coluna, justify-items:start). A regra de
   largura total nao pode recentralizar os filhos dele. */
.tr2-hero > :not(.tr2-fundo) { max-width: none; margin-inline: 0; }
/* =============================================================================
   CONTRASTE LOCAL: gradiente so atras do texto

   A V1 gravava brilho 0,40 em toda imagem de fundo. O cliente viu e disse que
   as fotos ficaram opacas e quase pretas - estava certo: aquilo apagava a cor
   da foto inteira, inclusive onde nao havia texto nenhum por cima.

   Os mockups fazem o contrario: a foto viva, e o escurecimento LOCAL, atras do
   texto. O arquivo agora sai em brilho 0,85 e o contraste vem daqui.

   DESKTOP: gradiente HORIZONTAL, forte a esquerda (onde o texto fica) e
   transparente aos 75% - a metade direita da foto fica intacta.
   CELULAR: o texto ocupa a largura toda, entao o gradiente vira VERTICAL,
   mais forte embaixo, onde fica o bloco de texto.
   ========================================================================== */

.tr2-hero--img::after,
.tr2-faixa-img::after,
.tr2-hero-pagina--foto::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background: linear-gradient(
    90deg,
    rgb(var(--tr2-veu-rgb) / 85%) 0%,
    rgb(var(--tr2-veu-rgb) / 55%) 45%,
    rgb(var(--tr2-veu-rgb) / 0%) 75%
  );
}

/* O conteudo acima do gradiente. */
.tr2-hero--img > :not(.tr2-fundo),
.tr2-faixa-img > :not(.tr2-fundo),
.tr2-hero-pagina--foto > :not(.tr2-hero-pagina__fundo) { z-index: 1; }

@media (max-width: 767px) {
  .tr2-hero--img::after,
  .tr2-faixa-img::after,
  .tr2-hero-pagina--foto::after {
    background: linear-gradient(
      180deg,
      rgb(var(--tr2-veu-rgb) / 45%) 0%,
      rgb(var(--tr2-veu-rgb) / 72%) 40%,
      rgb(var(--tr2-veu-rgb) / 90%) 100%
    );
  }
}

/* A faixa de CTA aguenta mais: o texto cruza a imagem inteira. Ainda assim
   nao chega a preto - a mata continua verde. */
.tr2-faixa-cta::after {
  background: linear-gradient(
    90deg,
    rgb(var(--tr2-veu-rgb) / 88%) 0%,
    rgb(var(--tr2-veu-rgb) / 72%) 55%,
    rgb(var(--tr2-veu-rgb) / 55%) 100%
  );
}

/* REDE DE SEGURANCA, nao a fonte principal do contraste: cobre o caso de uma
   imagem futura com um ponto claro bem onde cai uma letra. */
.tr2-hero--img :is(h1, h2),
.tr2-faixa-img :is(h1, h2, h3),
.tr2-hero-pagina--foto :is(h1, h2),
.tr2-faixa-cta .tr2-faixa-cta__frase,
.tr2-painel :is(h3, p) {
  text-shadow: 0 1px 2px rgb(0 0 0 / 35%);
}

/* O painel de setor ja tem o seu proprio gradiente no ::before; aqui so
   clareia a foto, que agora sai natural do arquivo. */
.tr2-painel::before {
  background: linear-gradient(180deg, rgb(var(--tr2-veu-rgb) / 20%) 0%, rgb(var(--tr2-veu-rgb) / 82%) 100%);
}
/* O TEXTO DO HERO NAO ATRAVESSA A FOTO.
   Medido: com o h1 ocupando os 1200px da coluna, o pior pixel atras dele caia
   no por do sol (235,202,166) e o contraste dava 1,55:1. O gradiente ja e
   transparente aos 75% - de proposito, para a metade direita ficar com a cor
   cheia, que e o alvo.
   A correcao e o texto caber no lado escuro, como no mockup, e nao escurecer
   a foto toda. */
@media (min-width: 768px) {
  .tr2-hero--img > :not(.tr2-fundo) { max-width: 640px; }
  .tr2-hero--img .tr2-hero__sub { max-width: 560px; }
  /* O trecho opaco cobre um pouco alem do texto, para a borda nao coincidir
     com a ultima letra. */
  .tr2-hero--img::after {
    background: linear-gradient(
      90deg,
      rgb(var(--tr2-veu-rgb) / 88%) 0%,
      rgb(var(--tr2-veu-rgb) / 80%) 38%,
      rgb(var(--tr2-veu-rgb) / 35%) 62%,
      rgb(var(--tr2-veu-rgb) / 0%) 82%
    );
  }
}
/* Faixa de hero das paginas internas: o texto fica no lado escuro, como no
   hero da home. Medido antes: o h1 atravessava os 1200px e o pior pixel atras
   dele era o ceu da foto (221,216,222), dando 1,40:1. Nao se escurece a foto
   para resolver - encolhe-se o texto. */
@media (min-width: 768px) {
  .tr2-hero-pagina--foto .tr2-hero-pagina__corpo { max-width: 680px; margin-inline: 0; }
  .tr2-hero-pagina--foto::after {
    background: linear-gradient(
      90deg,
      rgb(var(--tr2-veu-rgb) / 88%) 0%,
      rgb(var(--tr2-veu-rgb) / 80%) 40%,
      rgb(var(--tr2-veu-rgb) / 35%) 64%,
      rgb(var(--tr2-veu-rgb) / 0%) 84%
    );
  }
}
/* A barra de abas gruda abaixo do cabecalho e ocupa a largura da tela, mas o
   conteudo dela acompanha a coluna central - a sangria e o grid vem da regra
   compartilhada das faixas, la em cima. Aqui so a cor. */
.tr2-abas-wrap {
  background: var(--e-global-color-fundo);
  border-bottom: 1px solid var(--e-global-color-borda);
}
@media (min-width: 1024px) { .tr2-abas-wrap { position: sticky; top: 0; z-index: 20; } }
.tr2-abas-wrap .tr2-abas { border-bottom: 0; }

/* Alvo de ancora nao pode ficar atras da barra fixa. */
[id="sobre"], [id="o-que-fazemos"], [id="legislacao"], [id="relacionados"] { scroll-margin-top: 72px; }
/* "Uma nova fase": texto e imagem lado a lado no desktop, empilhados no
   celular. A imagem nao e fundo aqui - ela divide a faixa com o texto, como
   no mockup. */
.tr2-nova-fase { display: grid; gap: var(--tr2-esp-lg); align-items: center; }
@media (min-width: 768px) { .tr2-nova-fase { grid-template-columns: 1fr 1fr; } }
.tr2-nova-fase__img {
  position: relative;
  min-height: 260px;
  border-radius: var(--tr2-raio-lg);
  overflow: hidden;
}
.tr2-nova-fase__img .tr2-fundo img { position: absolute; inset: 0; object-fit: cover; }
.tr2-nova-fase__texto h2 { margin-top: 0; }
/* Area 03: texto e foto lado a lado no desktop, empilhados no celular. */
.tr2-intro-foto { display: grid; gap: var(--tr2-esp-lg); align-items: start; }
@media (min-width: 900px) { .tr2-intro-foto { grid-template-columns: 1.1fr .9fr; } }
.tr2-intro-foto__img { margin: 0; }
.tr2-intro-foto__img img { width: 100%; height: auto; border-radius: var(--tr2-raio-lg); }
/* Chip de norma dentro do cartao: menor e discreto, acima da linha de
   servicos. Nao e link - e rotulo. */
.tr2-chip--cartao {
  align-self: flex-start;
  padding: 3px 9px;
  font-size: .75rem;
  border-color: var(--e-global-color-accent);
  color: var(--e-global-color-primary);
  background: var(--e-global-color-fundoalternativo);
}
/* =============================================================================
   AREA 01 - as tres licencas como diagrama de 3 passos

   O explicador central da pagina. Tres colunas no desktop, empilhadas no
   celular, com um conector entre elas que mostra a ORDEM - LP, depois LI,
   depois LO - que e a informacao que a pessoa foi buscar.

   O conector e geometria pura (um triangulo de bordas), nao texto: `content`
   com uma seta e lido por parte dos leitores de tela, e a ordem ja esta no
   <ol>.
   ========================================================================== */

.tr2-licencas {
  display: grid;
  gap: var(--tr2-esp-lg);
  grid-template-columns: 1fr;
  margin: 0;
  padding: 0;
  list-style: none;
  counter-reset: none;
}

.tr2-licenca {
  position: relative;
  background: var(--e-global-color-fundo);
  border: 1px solid var(--e-global-color-borda);
  border-top: 3px solid var(--e-global-color-primary);
  border-radius: var(--tr2-raio-md);
  padding: var(--tr2-esp-md);
}

/* O selo da sigla. Primaria sobre branco, nao Destaque: o par
   Destaque/branco mede 2,01:1 e reprova em qualquer tamanho. */
.tr2-licenca__sigla {
  display: inline-block;
  background: var(--e-global-color-primary);
  color: var(--e-global-color-branco);
  font-family: var(--e-global-typography-primary-font-family), sans-serif;
  font-weight: 700;
  font-size: .9375rem;
  letter-spacing: .04em;
  line-height: 1;
  padding: 7px 11px;
  border-radius: var(--tr2-raio-sm);
}

.tr2-licenca__nome  { margin: var(--tr2-esp-sm) 0 var(--tr2-esp-xs); }
.tr2-licenca__texto { margin: 0; color: var(--e-global-color-textosuave); }

@media (min-width: 900px) {
  .tr2-licencas { grid-template-columns: repeat(3, 1fr); gap: var(--tr2-esp-xl); }

  /* O conector vive no espaco do `gap`, por isso a metade do gap de recuo. */
  .tr2-licenca + .tr2-licenca::before {
    content: "";
    position: absolute;
    top: 2.25rem;
    left: calc(var(--tr2-esp-xl) / -2 - 5px);
    width: 0;
    height: 0;
    border-top: 7px solid transparent;
    border-bottom: 7px solid transparent;
    border-left: 9px solid var(--e-global-color-accent);
  }
}

/* =============================================================================
   Lista de links (area 01: os tres estudos; area 02: os sete programas)
   ========================================================================== */

/* A margem de baixo nao e enfeite: estas listas sao o ultimo bloco antes de
   uma faixa clara de largura total, e sem ela o ultimo item encosta na borda
   da faixa. */
.tr2-lista-links {
  display: grid;
  gap: var(--tr2-esp-sm);
  grid-template-columns: 1fr;
  margin: var(--tr2-esp-md) 0 var(--tr2-esp-xl);
  padding: 0;
  list-style: none;
}

@media (min-width: 768px) { .tr2-lista-links { grid-template-columns: repeat(3, 1fr); } }

.tr2-lista-links a {
  display: block;
  background: var(--e-global-color-fundoalternativo);
  border-left: 4px solid var(--e-global-color-accent);
  border-radius: 0 var(--tr2-raio-sm) var(--tr2-raio-sm) 0;
  padding: var(--tr2-esp-sm) var(--tr2-esp-md);
  color: var(--e-global-color-primary);
  font-weight: 600;
  text-decoration: none;
  height: 100%;
}

.tr2-lista-links a:hover,
.tr2-lista-links a:focus-visible {
  background: var(--e-global-color-primary);
  border-left-color: var(--e-global-color-primary);
  color: var(--e-global-color-branco);
}

/* =============================================================================
   AREA 02 - os sete programas como grade de links

   Cada item mostra o numero da area a que o programa pertence. E o que a
   pagina 02 precisa dizer: ela nao executa os programas sozinha, eles moram
   nas areas 03 e 04.
   ========================================================================== */

.tr2-programas {
  display: grid;
  gap: var(--tr2-esp-sm);
  grid-template-columns: 1fr;
  margin: var(--tr2-esp-md) 0 var(--tr2-esp-xl);
  padding: 0;
  list-style: none;
}

@media (min-width: 640px)  { .tr2-programas { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) { .tr2-programas { grid-template-columns: repeat(3, 1fr); } }

.tr2-programa a {
  display: flex;
  align-items: center;
  gap: var(--tr2-esp-sm);
  height: 100%;
  padding: var(--tr2-esp-sm) var(--tr2-esp-md);
  background: var(--e-global-color-fundoalternativo);
  border: 1px solid var(--e-global-color-borda);
  border-radius: var(--tr2-raio-md);
  color: var(--e-global-color-text);
  text-decoration: none;
}

.tr2-programa a:hover,
.tr2-programa a:focus-visible {
  border-color: var(--e-global-color-primary);
  background: var(--e-global-color-fundo);
}

/* O numero da area. Primaria sobre branco, nunca Destaque: o par
   Destaque/branco mede 2,01:1. */
.tr2-programa__area {
  flex: none;
  display: grid;
  place-items: center;
  width: 2.25rem;
  height: 2.25rem;
  border-radius: 50%;
  background: var(--e-global-color-primary);
  color: var(--e-global-color-branco);
  font-family: var(--e-global-typography-primary-font-family), sans-serif;
  font-weight: 700;
  font-size: .8125rem;
  line-height: 1;
}

.tr2-programa__nome { font-weight: 600; line-height: 1.35; }

/* =============================================================================
   Cartao destacado (area 02: o PBA, filho unico)
   ========================================================================== */

.tr2-destaque {
  display: flex;
  align-items: flex-start;
  gap: var(--tr2-esp-md);
  padding: var(--tr2-esp-lg);
  background: var(--e-global-color-fundo);
  border: 1px solid var(--e-global-color-borda);
  border-left: 5px solid var(--e-global-color-primary);
  border-radius: var(--tr2-raio-md);
  color: var(--e-global-color-text);
  text-decoration: none;
}

/* `a.` no seletor pelo mesmo motivo do cartao: o Hello usa `.entry-content a`
   (0,1,1) e `.tr2-destaque` sozinho e (0,1,0) - perdia, e titulo e texto saiam
   sublinhados. Tem de ser na ANCORA: `text-decoration` e propagado aos filhos,
   nao herdado, entao `none` no titulo nao apaga o risco. */
a.tr2-destaque,
a.tr2-destaque:hover,
a.tr2-destaque:focus { text-decoration: none; }

.tr2-destaque:hover,
.tr2-destaque:focus-visible { border-color: var(--e-global-color-primary); }

/* O sublinhado volta so no titulo, no hover - o mesmo gesto do cartao. */
.tr2-destaque:hover .tr2-destaque__titulo,
.tr2-destaque:focus-visible .tr2-destaque__titulo { text-decoration-line: underline; }

.tr2-destaque__icone { flex: none; color: var(--e-global-color-primary); line-height: 0; }
.tr2-destaque__icone svg { width: 36px; height: 36px; }

.tr2-destaque__corpo  { display: block; }

.tr2-destaque__titulo {
  display: block;
  font-family: var(--e-global-typography-primary-font-family), sans-serif;
  font-size: 1.25rem;
  font-weight: 700;
  line-height: 1.25;
  color: var(--e-global-color-primary);
  margin-bottom: var(--tr2-esp-xs);
}

.tr2-destaque__texto { display: block; color: var(--e-global-color-textosuave); }

/* No celular o icone some: 36px ao lado de um titulo de duas linhas rouba
   largura de leitura e nao acrescenta informacao. */
@media (max-width: 479px) { .tr2-destaque__icone { display: none; } }

/* =============================================================================
   PAGINAS DE SERVICO - blocos especificos (DESIGN_SPEC §4, paginas 10-30)

   Todos vivem dentro da coluna de leitura, nao em faixa de largura total: sao
   parte do texto, e tirar o leitor da coluna para le-los quebraria a leitura.
   ========================================================================== */

/* --- Painel de normas ----------------------------------------------------- */

.tr2-fatos {
  margin: var(--tr2-esp-lg) 0;
  padding: var(--tr2-esp-md);
  background: var(--e-global-color-fundoalternativo);
  border-left: 4px solid var(--e-global-color-primary);
  border-radius: 0 var(--tr2-raio-md) var(--tr2-raio-md) 0;
  max-width: var(--tr2-medida);
}

.tr2-fatos__titulo {
  margin: 0 0 var(--tr2-esp-sm);
  /* O rotulo era um <h2> e virou <p> para sair do sumario da pagina - ver
     tr2_painel_fatos() no seed 50. Como <p> ele passou a herdar DUAS coisas
     que o h2 nao dava: a medida de leitura (`p { max-width: 68ch }`) e a
     altura de linha do corpo (1,65). Medido: o rotulo foi de 677x16 para
     583x28 e o painel cresceu 12px. Eu tinha escrito no commit que "nenhum
     pixel muda" - estava errado, e foi a medicao que mostrou.
     Estas duas linhas devolvem a geometria exata do h2. */
  max-width: none;
  line-height: 1.2;
  font-size: .8125rem;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--e-global-color-primary);
}

.tr2-fatos__lista { margin: 0; padding: 0; list-style: none; }

.tr2-fatos__lista li {
  position: relative;
  padding-left: 1.1rem;
  line-height: 1.5;
}

.tr2-fatos__lista li + li { margin-top: .4rem; }

/* O quadradinho e decoracao: a lista ja e lista para quem usa leitor de tela. */
.tr2-fatos__lista li::before {
  content: "";
  position: absolute;
  left: 0;
  top: .55em;
  width: 6px;
  height: 6px;
  background: var(--e-global-color-accent);
}

/* --- Linha de processo vertical (Pocos, 10 passos; PGRSS, 9 etapas) -------- */

.tr2-linha {
  list-style: none;
  margin: var(--tr2-esp-lg) 0;
  padding: 0;
  counter-reset: tr2-passo;
  max-width: var(--tr2-medida);
}

.tr2-linha__passo {
  counter-increment: tr2-passo;
  position: relative;
  padding: 0 0 var(--tr2-esp-md) 3rem;
  line-height: 1.5;
}

/* O numero e desenhado pelo contador, nao escrito no HTML: assim o leitor de
   tela nao ouve "um" duas vezes - a <ol> ja numera. */
.tr2-linha__passo::before {
  content: counter(tr2-passo);
  position: absolute;
  left: 0;
  top: -.15em;
  display: grid;
  place-items: center;
  width: 2rem;
  height: 2rem;
  border-radius: 50%;
  background: var(--e-global-color-primary);
  color: var(--e-global-color-branco);
  font-family: var(--e-global-typography-primary-font-family), sans-serif;
  font-size: .8125rem;
  font-weight: 700;
  line-height: 1;
}

/* O fio que liga um passo ao proximo. O ultimo nao tem continuacao. */
.tr2-linha__passo:not(:last-child)::after {
  content: "";
  position: absolute;
  left: calc(1rem - 1px);
  top: 2.05em;
  bottom: .35rem;
  width: 2px;
  background: var(--e-global-color-borda);
}

.tr2-linha__passo:last-child { padding-bottom: 0; }

/* --- Checklist (PGRS: 7 diretrizes; EIV: 7 topicos em 2 colunas) ---------- */

.tr2-checklist {
  list-style: none;
  margin: var(--tr2-esp-md) 0;
  padding: 0;
  max-width: var(--tr2-medida);
}

.tr2-checklist li {
  position: relative;
  padding-left: 1.85rem;
  line-height: 1.5;
}

.tr2-checklist li + li { margin-top: .55rem; }

/* O tique e desenhado com duas bordas giradas - sem fonte de icone e sem
   caractere, que o leitor de tela anunciaria. */
.tr2-checklist li::before {
  content: "";
  position: absolute;
  left: .25rem;
  top: .35em;
  width: .45rem;
  height: .8rem;
  border: solid var(--e-global-color-primary);
  border-width: 0 2px 2px 0;
  transform: rotate(45deg);
}

@media (min-width: 768px) {
  .tr2-checklist--duas {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    column-gap: var(--tr2-esp-lg);
    max-width: none;
  }
  .tr2-checklist--duas li + li { margin-top: 0; }
  .tr2-checklist--duas li { margin-bottom: .55rem; }
}

/* --- Lista numerada (Erosivos: os 3 objetivos) ---------------------------- */

.tr2-numerada {
  list-style: none;
  margin: var(--tr2-esp-md) 0;
  padding: 0;
  counter-reset: tr2-obj;
  max-width: var(--tr2-medida);
}

.tr2-numerada li {
  counter-increment: tr2-obj;
  position: relative;
  padding-left: 2.4rem;
  line-height: 1.55;
}

.tr2-numerada li + li { margin-top: var(--tr2-esp-sm); }

.tr2-numerada li::before {
  content: counter(tr2-obj);
  position: absolute;
  left: 0;
  top: 0;
  font-family: var(--e-global-typography-primary-font-family), sans-serif;
  font-size: 1.5rem;
  font-weight: 700;
  line-height: 1.1;
  color: var(--e-global-color-primary);
}

/* --- Cartoes curtos (Outorga: os 4 tipos) --------------------------------- */

.tr2-curtos {
  display: grid;
  gap: var(--tr2-esp-sm);
  grid-template-columns: 1fr;
  margin: var(--tr2-esp-md) 0;
  padding: 0;
  list-style: none;
}

@media (min-width: 640px) { .tr2-curtos { grid-template-columns: repeat(2, 1fr); } }

.tr2-curtos li {
  padding: var(--tr2-esp-sm) var(--tr2-esp-md);
  background: var(--e-global-color-fundoalternativo);
  border: 1px solid var(--e-global-color-borda);
  border-radius: var(--tr2-raio-md);
  font-weight: 600;
  line-height: 1.4;
}

/* --- Paineis de valor (Outorga: os limites de uso insignificante) --------- */

.tr2-valores {
  display: grid;
  gap: var(--tr2-esp-md);
  grid-template-columns: 1fr;
  margin: var(--tr2-esp-md) 0;
  padding: 0;
  list-style: none;
}

@media (min-width: 768px) { .tr2-valores { grid-template-columns: repeat(2, 1fr); } }

.tr2-valor {
  padding: var(--tr2-esp-md);
  background: var(--e-global-color-fundo);
  border: 1px solid var(--e-global-color-borda);
  border-top: 3px solid var(--e-global-color-accent);
  border-radius: var(--tr2-raio-md);
}

/* Primaria, nao Destaque: o numero e grande, mas 3:1 e o piso para texto
   grande e o par Destaque/branco mede 2,01:1. */
.tr2-valor__num {
  display: block;
  font-family: var(--e-global-typography-primary-font-family), sans-serif;
  font-size: 2rem;
  font-weight: 700;
  line-height: 1.1;
  color: var(--e-global-color-primary);
  margin-bottom: var(--tr2-esp-xs);
}

/* `vertical-align: super` jogava o 3 para o topo da caixa de linha, longe do
   "m". Deslocamento relativo poe o expoente onde ele e lido como expoente. */
.tr2-valor__num sup {
  font-size: .5em;
  vertical-align: baseline;
  position: relative;
  top: -.72em;
}

.tr2-valor__texto {
  display: block;
  font-size: .9375rem;
  line-height: 1.5;
  color: var(--e-global-color-textosuave);
}

/* --- Grupos de parametros (Solo: fisicos e quimicos) ---------------------- */

.tr2-grupos {
  display: grid;
  gap: var(--tr2-esp-md);
  grid-template-columns: 1fr;
  margin: var(--tr2-esp-md) 0;
}

@media (min-width: 768px) { .tr2-grupos { grid-template-columns: repeat(2, 1fr); } }

.tr2-grupo {
  padding: var(--tr2-esp-md);
  background: var(--e-global-color-fundoalternativo);
  border-radius: var(--tr2-raio-md);
}

.tr2-grupo__titulo {
  margin: 0 0 var(--tr2-esp-xs);
  font-size: 1rem;
  color: var(--e-global-color-primary);
}

.tr2-grupo p { margin: 0; line-height: 1.55; }

/* --- Diagrama de fluxo (PBA; APM/PACM) ------------------------------------ */

.tr2-fluxo { margin: var(--tr2-esp-lg) 0; }

.tr2-fluxo__rotulo {
  margin: 0 0 var(--tr2-esp-xs);
  font-size: .8125rem;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--e-global-color-textosuave);
}

.tr2-fluxo__rotulo:not(:first-child) { margin-top: var(--tr2-esp-lg); }

.tr2-fluxo__passos {
  display: grid;
  gap: var(--tr2-esp-md);
  grid-template-columns: 1fr;
  margin: 0;
  padding: 0;
  list-style: none;
}

.tr2-fluxo__caixa {
  position: relative;
  padding: var(--tr2-esp-sm) var(--tr2-esp-md);
  background: var(--e-global-color-fundo);
  border: 1px solid var(--e-global-color-borda);
  border-radius: var(--tr2-raio-md);
}

.tr2-fluxo__caixa--foco {
  background: var(--e-global-color-fundoalternativo);
  border-color: var(--e-global-color-primary);
}

.tr2-fluxo__sigla {
  display: block;
  font-family: var(--e-global-typography-primary-font-family), sans-serif;
  font-weight: 700;
  color: var(--e-global-color-primary);
  line-height: 1.2;
}

.tr2-fluxo__nome {
  display: block;
  font-size: .875rem;
  line-height: 1.4;
  color: var(--e-global-color-textosuave);
}

@media (min-width: 768px) {
  .tr2-fluxo__passos { grid-auto-flow: column; grid-auto-columns: 1fr; gap: var(--tr2-esp-lg); }

  /* A seta vive no espaco do gap. Triangulo de bordas, nao caractere. */
  .tr2-fluxo__caixa + .tr2-fluxo__caixa::before {
    content: "";
    position: absolute;
    top: 50%;
    left: calc(var(--tr2-esp-lg) / -2 - 5px);
    margin-top: -7px;
    width: 0;
    height: 0;
    border-top: 7px solid transparent;
    border-bottom: 7px solid transparent;
    border-left: 9px solid var(--e-global-color-accent);
  }
}

/* --- Paragrafo em destaque (EVA: a analise conclusiva) -------------------- */

.tr2-destacado {
  max-width: var(--tr2-medida);
  padding: var(--tr2-esp-md) 0 var(--tr2-esp-md) var(--tr2-esp-md);
  border-left: 4px solid var(--e-global-color-accent);
  font-size: 1.125rem;
  line-height: 1.6;
  color: var(--e-global-color-primary);
}

/* --- Paginas em perguntas (variante B): H2 numerado ----------------------- */

.tr2-perguntas { counter-reset: tr2-pergunta; }

/* So os titulos do cliente. O do painel de normas nao e pergunta - e por
   isso que ele fica de fora do contador. */
.tr2-perguntas h2:not(.tr2-fatos__titulo) {
  counter-increment: tr2-pergunta;
  position: relative;
  padding-left: 2.9rem;
}

.tr2-perguntas h2:not(.tr2-fatos__titulo)::before {
  content: counter(tr2-pergunta, decimal-leading-zero);
  position: absolute;
  left: 0;
  top: .1em;
  font-family: var(--e-global-typography-primary-font-family), sans-serif;
  font-size: .75em;
  font-weight: 700;
  line-height: 1.5;
  /* Primaria, nao Destaque.
     Eu tinha posto Destaque aqui - dourado sobre branco, 2,01:1, exatamente o
     par que design-tokens.json lista em `pares_proibidos`. O Lighthouse deu
     100 em acessibilidade mesmo assim, porque ele nao le texto de
     pseudoelemento; quem pegou foi a propria regra do projeto, na troca de
     paleta. Terceira vez que escorrego neste mesmo par. */
  color: var(--e-global-color-primary);
}

@media (max-width: 479px) {
  /* Em 360px o recuo de 2,9rem come quase 15% da largura de leitura. O
     numero sobe para a linha de cima e o titulo volta para a margem. */
  .tr2-perguntas h2:not(.tr2-fatos__titulo) { padding-left: 0; padding-top: 1.5rem; }
  .tr2-perguntas h2:not(.tr2-fatos__titulo)::before { top: 0; }
}

/* =============================================================================
   AMOSTRA DA REVISAO DE 14/10/2026

   Variantes para as tres paginas de /revisao-14-10/, que o cliente avalia
   antes de replicar. Nada aqui altera as 33 paginas no ar: todo seletor passa
   por `--v2`, `--servico` ou `.tr2-faq`.
   ========================================================================== */

/* --- Cartao de grupo, primeira pagina ------------------------------------
   Literal do pedido: "Retirar o numero e o texto que fica abaixo da caixa e
   colocar fundo amarelo no espaco onde tem o icone (o icone fica em verde).
   Deixar o tamanho das caixas padronizados para todos os servicos, inclusive
   a fonte do texto." */

.tr2-grade-cartoes--v2 { align-items: stretch; }

/* Faixa do icone em Destaque, icone em Primaria. O par Primaria sobre
   Destaque mede 4,62:1 - acima do minimo de 3,0 para elemento grafico, e o
   par ja estava validado em design-tokens.json para botao. */
/* INVERTIDO em 14/10, vendo a pagina: o documento dele pedia "fundo amarelo
   no espaco onde tem o icone (o icone fica em verde)", e ao ver pronto ele
   pediu "colocar o verde como fundo". Sao as MESMAS duas cores, trocadas
   de lugar.

   Dourado sobre Primaria mede 4,62:1 - acima do piso de 3,0 para elemento
   grafico, e o par ja consta em design-tokens.json como "Detalhe dourado
   sobre Primaria". */
.tr2-cartao-servico--v2 .tr2-cartao-servico__icone {
  background: var(--e-global-color-primary);
  border-bottom: 0;
  color: var(--e-global-color-accent);
}

/* O hover do componente base troca a faixa para Primaria Escura com icone
   branco. Sobre fundo ja verde isso quase nao se nota, entao aqui o estado
   escurece de verdade. */
.tr2-cartao-servico--v2:hover .tr2-cartao-servico__icone,
.tr2-cartao-servico--v2:focus-within .tr2-cartao-servico__icone {
  background: var(--e-global-color-secondary);
  color: var(--e-global-color-accent);
}

/* ALTURA IGUAL EM TODOS, que e a parte de "padronizados".
   As descricoes tem de 330 a 420 caracteres; sem altura minima o cartao do
   texto mais curto fica visivelmente mais baixo que o do mais longo. */
.tr2-cartao-servico--v2 .tr2-cartao-servico__corpo {
  display: flex;
  flex-direction: column;
  gap: var(--tr2-esp-xs);
}

.tr2-cartao-servico--v2 .tr2-cartao-servico__titulo {
  display: block;
  font-size: 1.125rem;
  line-height: 1.3;
  min-height: 2.6em;   /* dois titulos de linha dupla alinham o paragrafo */
}

/* Fonte unica nas cinco caixas - o `clamp` do corpo variava com a largura e
   deixava um cartao com texto um fio maior que o vizinho. */
.tr2-cartao-servico--v2 .tr2-cartao-servico__texto {
  display: block;
  font-size: .9375rem;
  line-height: 1.55;
}

/* --- Lista de servicos, segunda pagina ------------------------------------ */

.tr2-lista-links--servicos { grid-template-columns: 1fr; }
@media (min-width: 768px) { .tr2-lista-links--servicos { grid-template-columns: 1fr 1fr; } }

/* --- Pagina de servico, terceira pagina ----------------------------------- */

/* A FIGURA EM POSICAO FIXA: logo abaixo do titulo, largura do conteudo, antes
   de qualquer texto. E o que responde ao "padrao de localizacao das figuras" -
   hoje ela aparece antes do titulo numa pagina, depois do primeiro subtitulo
   em outra e no meio da pagina numa terceira. */
.tr2-figura--servico {
  margin: 0 0 var(--tr2-esp-lg);
  max-width: none;
}

.tr2-figura--servico img {
  width: 100%;
  height: auto;
  border-radius: var(--tr2-raio-lg);
  display: block;
}

/* HIERARQUIA E RITMO, o outro pedido: "proporcionalmente os paragrafos,
   linhas de titulo e subtitulo tivessem harmonia de distancias e hierarquia
   de posicao."

   Um unico valor separa as secoes e um unico valor separa titulo de texto -
   assim a distancia nao depende de qual secao veio antes. */
.tr2-bloco { margin-bottom: var(--tr2-esp-xl); }
.tr2-bloco > h2 { margin: 0 0 var(--tr2-esp-sm); }
.tr2-bloco > p { margin: 0 0 var(--tr2-esp-sm); max-width: var(--tr2-medida); }
.tr2-bloco > p:last-child { margin-bottom: 0; }

/* Secao em faixa clara dentro do corpo: o respiro vem do padding da faixa,
   nao da margem do bloco, senao soma duas vezes. */
.tr2-bloco.tr2-clara { margin-bottom: var(--tr2-esp-xl); padding-block: var(--tr2-secao-y); }
.tr2-bloco.tr2-clara > :last-child { margin-bottom: 0; }

/* --- Perguntas frequentes ------------------------------------------------- */

.tr2-faq__item { max-width: var(--tr2-medida); }
.tr2-faq__item + .tr2-faq__item { margin-top: var(--tr2-esp-md); }

/* A pergunta e <h3>: esta DENTRO da secao, nao e irma dela. Mesmo cuidado de
   hierarquia do rotulo do painel de normas. */
.tr2-faq__pergunta {
  margin: 0 0 var(--tr2-esp-xs);
  font-size: 1.0625rem;
  line-height: 1.4;
  color: var(--e-global-color-primary);
}

.tr2-faq__resposta { margin: 0; color: var(--e-global-color-textosuave); }

/* Cartao de grupo ainda sem pagina: mesmo desenho, sem afordancia de clique.
   Nao e `opacity` - desbotar reduziria o contraste do texto que ele precisa
   ler para julgar o layout. */
.tr2-cartao-servico--previa { cursor: default; }
.tr2-cartao-servico--previa:hover { border-color: var(--e-global-color-borda); }
.tr2-cartao-servico--previa .tr2-cartao-servico__link { cursor: default; }
.tr2-cartao-servico--previa:hover .tr2-cartao-servico__icone {
  background: var(--e-global-color-primary);
  color: var(--e-global-color-accent);
}

/* ALTURA IGUAL NAS CINCO CAIXAS, nao so dentro de cada linha.
   Com as linhas automaticas, a segunda ficava mais alta que a primeira porque
   o texto mais longo cai nela - e "padronizados" nao e isso. `1fr` nas linhas
   faz todas receberem a altura da maior. */
@media (min-width: 768px) {
  .tr2-grade-cartoes--v2 { grid-auto-rows: 1fr; }
}

/* --- Caixas de servico, segunda pagina ------------------------------------
   O modelo que ele enviou em 14/10 ("Segunda Pagina de Servicos.docx"): caixa
   verde escura de canto arredondado, icone dourado no alto e titulo branco em
   negrito. A descricao que o modelo mostra abaixo do titulo saiu a pedido
   dele - "Apenas o texto de fonte maior. o de baixo pode retirar".

   TRES EM UMA LINHA no desktop. Com duas colunas sobrava uma caixa sozinha
   embaixo, que e o desalinhamento que ele apontou. */

.tr2-caixas-servico {
  display: grid;
  gap: var(--tr2-esp-md);
  grid-template-columns: 1fr;
  margin: 0;
  padding: 0;
  list-style: none;
}

@media (min-width: 768px)  { .tr2-caixas-servico { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) { .tr2-caixas-servico { grid-template-columns: repeat(3, 1fr); } }

.tr2-caixa-servico a {
  display: flex;
  flex-direction: column;
  gap: var(--tr2-esp-sm);
  height: 100%;
  padding: var(--tr2-esp-md);
  /* Um tom acima da faixa, para a caixa se destacar do fundo. No modelo dele a
     separacao vem de a caixa estar sobre uma FOTO; aqui o fundo e verde
     chapado, entao a borda clara faz esse trabalho. */
  background: var(--e-global-color-primary);
  border: 1px solid rgb(255 255 255 / 18%);
  border-radius: var(--tr2-raio-lg);
  text-decoration: none;
}

/* `a.` pelo mesmo motivo de sempre: `.entry-content a` do Hello e (0,1,1). */
a.tr2-caixa-servico__link,
.tr2-caixa-servico a:hover,
.tr2-caixa-servico a:focus { text-decoration: none; }

.tr2-caixa-servico a:hover,
.tr2-caixa-servico a:focus-visible {
  border-color: var(--e-global-color-accent);
  background: var(--e-global-color-secondary);
}

.tr2-caixa-servico__icone { color: var(--e-global-color-accent); line-height: 0; }
.tr2-caixa-servico__icone .tr2-icone { height: 32px; }

/* Branco sobre Primaria: 7,04:1. Negrito como no modelo. */
.tr2-caixa-servico__titulo {
  font-family: var(--e-global-typography-primary-font-family), sans-serif;
  font-size: 1.0625rem;
  font-weight: 700;
  line-height: 1.35;
  color: var(--e-global-color-branco);
}

/* --- Ajustes pedidos em 14/10 na primeira pagina -------------------------- */

/* "Colocar a fonte dos grupos na cor verde (Bold)". A cor ja era Primaria; o
   peso vinha da tipografia Destaque do Kit, que e 600. Negrito e 700. */
.tr2-cartao-servico--v2 .tr2-cartao-servico__titulo { font-weight: 700; }

/* "consegue reduzir um pouco a dimensao das caixas de texto? Pouca coisa."
   Faixa do icone de 104px para 88px e respiro interno um grau abaixo na
   escala - de `md` (24px) para `sm` (16px). Nada mais: "pouca coisa". */
.tr2-cartao-servico--v2 .tr2-cartao-servico__icone { min-height: 88px; }
.tr2-cartao-servico--v2 .tr2-cartao-servico__corpo { padding: var(--tr2-esp-sm); }

/* A faixa de hero tem margem embaixo para separar do texto que normalmente
   vem a seguir. Quando o PROXIMO bloco e outra faixa escura, essa margem vira
   uma tira branca entre duas areas escuras - foi o que apareceu na segunda
   pagina da amostra. Encostando as duas, a transicao fica continua. */
/* =============================================================================
   RITMO VERTICAL ENTRE SECOES (18/10)
   ========================================================================== */

/* Revisao de espacos pedida por ele em 18/10: "voce pode avaliar e corrigir
   os espacos de todas as paginas". Medido em 1440px, do fim do conteudo de
   uma secao ao comeco da seguinte, havia tres vazios que somavam respiros:

     1. Faixa de hero -> conteudo: 160 a 275px (margem de 64px da faixa + o
        respiro de 96px da secao). Agora: sem margem, e 40px de respiro -
        a mudanca da foto para o fundo ja separa. Vale para TODA pagina com
        faixa, nao so as tres em que ele apontou primeiro.
     2. Duas secoes de mesmo fundo em sequencia (na home: Servicos, Setores,
        Do escopo - todas bege): 213px, os 96 de baixo de uma mais os 96 de
        cima da outra, sem nada marcando a divisao. Agora a segunda nao tem
        respiro em cima - a separacao fica em ~110px, a de uma secao so.
     3. Fim da pagina -> rodape: uma tira BRANCA de 96px entre a faixa
        escura de CTA e o rodape escuro (302px no total). Ver header-footer.css.
     E uma quarta, achada na mesma medicao: ver o item 4 abaixo. */

/* TODA FAIXA DE HERO COM A MESMA ALTURA (19/10) - dele: "Reproduzir a mesma
   altura da figura de SERVICOS EXECUTADOS em todas as outras paginas".
   Antes a altura vinha do texto: 298px em Quem Somos (so o titulo), 511px no
   grupo de Ruido (quatro linhas de apoio). Agora 368px - a de Servicos
   Executados no desktop - com o texto centralizado na vertical. O respiro
   interno cai para 40px para as paginas de texto longo caberem nela. */
.tr2-hero-pagina {
  min-height: 368px;
  padding-block: var(--tr2-esp-lg);
  align-content: center;
}

.tr2-hero-pagina + .tr2-secao { padding-top: var(--tr2-esp-lg); }

/* Quem Somos e Nossa Atuacao abrem com um .tr2-bloco, que nao e .tr2-secao:
   sem esta linha o texto encostava na foto (0px, medido) - ele apontou em
   19/10: "Aumentar um enter de espaco entre a figura e o texto". Os mesmos
   40px das outras paginas. */
.tr2-hero-pagina + .tr2-bloco { margin-top: var(--tr2-esp-lg); }

.tr2-clara + .tr2-clara { padding-top: 0; }

/* E a de cima fecha com 64px em vez de 96 (18/10, segunda rodada: ele ainda
   achou grande o vao entre "Nossos servicos", "Setores atendidos" e "Do
   escopo ao relatorio"). */
.tr2-clara:has(+ .tr2-clara) { padding-bottom: var(--tr2-esp-xl); }

/* 4. Bloco bege -> faixa de CTA, no fim das paginas de servico: a margem de
      64px do bloco virava outra tira BRANCA entre o bege e a faixa escura. */
.tr2-bloco:has(+ .tr2-faixa-cta) { margin-bottom: 0; }

/* --- Abertura da pagina de servico: foto e texto lado a lado --------------

   Ele viu a versao anterior e disse "achei a foto muito grande" - tinha razao:
   a figura ocupava os 1200px da coluna e uns 800px de altura antes de o texto
   comecar. A proposta de arranjo e dele, textualmente: "diminuir a foto e
   colocar ao lado direito da foto o texto [...] e logo abaixo os links para os
   demais programas [...] na altura da foto teriamos o texto e os links".

   Proporcao 42/58: a foto fica grande o bastante para se ler a cena e o texto
   ganha largura suficiente para nao quebrar em linhas curtas demais. */

.tr2-intro-servico {
  display: grid;
  gap: var(--tr2-esp-lg);
  grid-template-columns: 1fr;
  align-items: start;
  margin-bottom: var(--tr2-esp-xl);
}

@media (min-width: 900px) {
  .tr2-intro-servico { grid-template-columns: 1fr 1fr; }

  /* SEM FIGURA, UMA COLUNA SO.
     Hoje so o Programa de Monitoramento do Solo: vieram 19 figuras para 20
     servicos. Sem isto o texto ficava na metade esquerda e a direita vazia,
     parecendo imagem que nao carregou. A medida de leitura segura o
     comprimento da linha. */
  .tr2-intro-servico--sem-figura { grid-template-columns: 1fr; }
  .tr2-intro-servico--sem-figura .tr2-intro-servico__texto > p { max-width: var(--tr2-medida); }
}

.tr2-intro-servico__figura .tr2-figura--servico { margin: 0; }

/* No celular a ordem e foto primeiro, depois texto - a mesma da leitura. */
.tr2-intro-servico__texto > p {
  margin: 0 0 var(--tr2-esp-md);
  max-width: none;   /* a coluna ja limita; a medida de leitura apertaria */
}

/* --- Os irmaos do grupo, sob o texto da abertura --------------------------
   "sem necessitar de voltar na pagina anterior para selecionar o PGRCC". */

.tr2-irmaos { margin: 0; }

.tr2-irmaos__rotulo {
  margin: 0 0 var(--tr2-esp-xs);
  max-width: none;
  font-size: .8125rem;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--e-global-color-textosuave);
}

/* A TARJA BEGE COM BORDA AMARELA SAIU em 14/10 (noite).
   Ele pediu: "substitua estas caixas pelas caixas de texto principais". Os
   <li> passaram a carregar .tr2-caixa-servico, mas eu deixei estas regras
   para tras - e `.tr2-irmaos a` e (0,1,1), igual a `.tr2-caixa-servico a`,
   so que 110 linhas DEPOIS. Vencia pela ordem: pintava o cartao de bege e
   deixava o titulo no branco que veio do cartao. Branco sobre bege da
   1,04:1 - o texto sumia.

   E o mesmo erro de sempre: trocar o desenho e esquecer a regra antiga no
   lugar. O cartao agora manda sozinho; `--menor` so reduz. */

.tr2-irmaos ul { margin: 0; }

/* --- O tique como marcador unico das listas ------------------------------
   Dele: "sempre use esse bullet para os demais servicos. Nao enumere e nem
   coloque um ponto para cada linha. Gostei do simbolo."

   O tique ja era o marcador de "O que o servico contempla?". A regra abaixo
   torna-o o padrao de QUALQUER lista dentro de uma pagina de servico da
   amostra, para que nenhuma lista nova volte a sair com ponto ou numero. */

.tr2-intro-servico ~ .tr2-bloco ul:not(.tr2-checklist):not(.tr2-irmaos ul),
.tr2-bloco ul:not(.tr2-checklist) {
  list-style: none;
  margin: var(--tr2-esp-md) 0;
  padding: 0;
  max-width: var(--tr2-medida);
}

.tr2-bloco ul:not(.tr2-checklist) > li {
  position: relative;
  padding-left: 1.85rem;
  line-height: 1.5;
}

.tr2-bloco ul:not(.tr2-checklist) > li + li { margin-top: .55rem; }

.tr2-bloco ul:not(.tr2-checklist) > li::before {
  content: "";
  position: absolute;
  left: .25rem;
  top: .35em;
  width: .45rem;
  height: .8rem;
  border: solid var(--e-global-color-primary);
  border-width: 0 2px 2px 0;
  transform: rotate(45deg);
}


/* --- Ajustes de 14/10 (noite), pedidos vendo a amostra ------------------- */

/* A FAIXA DAS CAIXAS DE SERVICO AGORA E BEGE.
   De manha ele pediu verde; vendo pronto, pediu bege. Como a caixa continua
   verde escura, sobre bege ela ganha mais separacao do fundo que ganhava sobre
   verde - a borda clara deixa de ser necessaria para destacar, mas fica, que e
   ela que arredonda o contorno. */
.tr2-secao--caixas.tr2-clara .tr2-caixa-servico a {
  border-color: rgb(0 0 0 / 10%);
}

/* FONTE MAIOR NA CAIXA, icone menor.
   "podemos aumentar o tamanho da fonte desses cards. o icone ficou maior que o
   texto" - estava 32px de icone para 17px de texto. */
.tr2-caixa-servico__titulo { font-size: 1.125rem; }
.tr2-caixa-servico__icone .tr2-icone { height: 26px; }

/* OS IRMAOS VIRARAM CARTAO, nao mais lista com barra lateral.
   "substitua estas caixas pelas caixas de texto principais. Pode deixar eles
   menores para diferenciar" - entao: mesmo desenho, um grau abaixo. */
.tr2-caixas-servico--menor { gap: var(--tr2-esp-sm); }

@media (min-width: 900px) {
  .tr2-caixas-servico--menor { grid-template-columns: 1fr 1fr; }
}

.tr2-caixas-servico--menor .tr2-caixa-servico a { padding: var(--tr2-esp-sm); }
.tr2-caixas-servico--menor .tr2-caixa-servico__titulo { font-size: .9375rem; line-height: 1.3; }
.tr2-caixas-servico--menor .tr2-caixa-servico__icone .tr2-icone { height: 20px; }

/* O FECHO COM BOTAO AO LADO.
   "no lado direito que esta vazio, um botao clicavel amarelo" - o espaco a
   direita vinha da medida de leitura do paragrafo, que para em 68ch. */
.tr2-solicitar {
  display: grid;
  gap: var(--tr2-esp-lg);
  grid-template-columns: 1fr;
  align-items: center;
}

@media (min-width: 900px) {
  .tr2-solicitar { grid-template-columns: 1fr auto; }
  .tr2-solicitar__acao { justify-self: end; }
}

.tr2-solicitar__texto > h2 { margin: 0 0 var(--tr2-esp-sm); }
.tr2-solicitar__texto > p { margin: 0; max-width: var(--tr2-medida); }
.tr2-solicitar__acao { margin: 0; }

/* --- A COLUNA FIXA DOS IRMAOS, pedida em 15/10 --------------------------
   Dele: "Esses cards nao poderiam ficar suspensos do lado direito do texto e
   se mantendo no meio da pagina mesmo quando estamos rolando a descendo a
   pagina para a leitura do conteudo?" e, depois, "por favor, consiga deixar os
   cards flutuantes nas paginas de servicos. Ai poderemos eliminar esses
   espacos entre a figura e os cards".

   A largura de 340px nao e estetica: e o minimo em que "Programa de
   Gerenciamento de Residuos da Construcao Civil (PGRCC)" cabe em tres linhas
   dentro do cartao. Abaixo disso o titulo quebra em quatro e a torre volta.

   O conteudo fica com o resto - cerca de 800px no container de 1200 - que da
   em torno de 70 letras por linha. Esticar ate a borda, como o pedido dele diz
   ao pe da letra, daria 110 letras: o espaco seria ocupado e a leitura
   pioraria. */

.tr2-servico-grade {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--tr2-esp-lg);
  align-items: start;
}

@media (min-width: 1024px) {
  .tr2-servico-grade {
    grid-template-columns: minmax(0, 1fr) 340px;
    column-gap: var(--tr2-esp-xl);
  }

  /* Sem irmaos - um grupo de um servico so - a coluna unica ocupa tudo. */
  .tr2-servico-grade--sozinha { grid-template-columns: minmax(0, 1fr); }

  .tr2-servico-grade__lado {
    position: sticky;
    /* ABAIXO DO CABECALHO, nao por baixo dele.
       O cabecalho e sticky e mede 155px - identico a 1024, 1280, 1440 e 1920,
       porque a altura vem do logo e do respiro, nao da largura. Com `top` de
       40px o primeiro cartao subia por tras dele e sumia, que foi o
       "o primeiro card de servicos flutuante das paginas fica escondido".
       O valor esta num token para nao ficar espalhado: se o cabecalho mudar
       de altura, muda aqui. */
    top: calc(var(--tr2-altura-cabecalho) + var(--tr2-esp-md));
    /* COM SEIS IRMAOS A LISTA PASSA DA TELA - e o "nao ficou legal assim" da
       segunda imagem dele. Limitada a altura da janela, a propria coluna
       rola por dentro em vez de empurrar a pagina. */
    max-height: calc(100vh - var(--tr2-altura-cabecalho) - var(--tr2-esp-md) * 2);
    overflow-y: auto;
    overscroll-behavior: contain;
  }
}

/* O conteudo ja esta numa coluna com largura propria: a medida de leitura
   global apertaria de novo, e sobraria faixa branca a direita DENTRO da
   coluna - exatamente o que ele pediu para tirar. */
.tr2-servico-grade__conteudo > .tr2-bloco { padding-inline: 0; }
.tr2-servico-grade__conteudo p,
.tr2-servico-grade__conteudo li { max-width: none; }

/* A FONTE UM POUCO MAIOR, a outra metade do pedido: "ai da para aumentar o
   tamanho da letra um pouco". De 17px para 18px no corpo do servico - 6%, que
   se nota sem reflowar a pagina inteira. */
.tr2-servico-grade__conteudo { font-size: 1.125rem; }

/* Na coluna fixa os cartoes vao um sob o outro, nunca dois a dois: a coluna
   tem 340px e dois cartoes lado a lado dariam 160px cada. */
.tr2-servico-grade__lado .tr2-caixas-servico,
.tr2-servico-grade__lado .tr2-caixas-servico--menor { grid-template-columns: 1fr; }
.tr2-servico-grade__lado .tr2-irmaos { margin: 0; }

/* O ICONE VOLTA A 26px NA COLUNA FIXA.
   A variante `--menor` o deixava em 20px, que fazia sentido quando os cartoes
   dos irmaos eram pequenos sob o texto. Num cartao de 340px com titulo de duas
   linhas, 20px some - visto na tela depois de montar a coluna. */
.tr2-servico-grade__lado .tr2-caixas-servico--menor .tr2-caixa-servico__icone .tr2-icone {
  height: 26px;
}

/* --- Ajustes de 15/10 (tarde) ------------------------------------------- */

/* CAIXAS DO MESMO TAMANHO E ICONE MAIOR.
   Dele: "Podemos aumentar o tamanho dos icones e ajustar o tamanho dos cards
   para um tamanho unico?" As alturas variavam entre 141px e 165px conforme o
   titulo tivesse duas ou tres linhas. `grid-auto-rows: 1fr` iguala a linha
   inteira pelo cartao mais alto. */
.tr2-caixas-servico { grid-auto-rows: 1fr; }
.tr2-caixas-servico > .tr2-caixa-servico { height: 100%; }

/* De 26px para 40px. O desenho dele tem detalhe - a estacao meteorologica, a
   escavadeira - e a 26px virava mancha. */
.tr2-secao--caixas .tr2-caixa-servico__icone .tr2-icone { height: 40px; }

/* O CARTAO DE GRUPO TAMBEM: de 48px para 56px.
   "Aqui tambem podemos aumentar o tamanho dos icones" */
.tr2-cartao-servico--v2 .tr2-cartao-servico__icone .tr2-icone { height: 56px; }
.tr2-cartao-servico--v2 .tr2-cartao-servico__icone { min-height: 104px; }

/* AS DUAS ULTIMAS CAIXAS CENTRALIZADAS.
   Dele: "centralizar as duas caixas de texto de baixo (Gestao de Residuos e
   Ruido, Vibracao e Modelagem Acustica)". Sao cinco cartoes numa grade de
   tres: os dois ultimos ficavam encostados a esquerda, com um vazio a
   direita. Em seis colunas, cada cartao ocupa duas e o quarto comeca na
   segunda - os dois ultimos ficam no meio. */
@media (min-width: 1024px) {
  .tr2-grade-cartoes--v2 { grid-template-columns: repeat(6, 1fr); }
  .tr2-grade-cartoes--v2 > * { grid-column: span 2; }
  .tr2-grade-cartoes--v2 > :nth-child(4):nth-last-child(2) { grid-column: 2 / span 2; }
}

/* O SELO DO INMETRO COM O TEXTO MAIS LARGO.
   Dele: "Esta desconfigurado os paragrafos". O texto tinha 466px numa coluna
   de 796 - cerca de 40 letras por linha, com palavras como
   "Metrologia, Qualidade e Tecnologia" quebrando em pedacos curtos e
   deixando o paragrafo esfarrapado. Com o selo em 160px o texto vai a 604px,
   cerca de 52 letras. */
@media (min-width: 900px) {
  .tr2-selo__img { flex: 0 0 160px; }
}

/* O ESPACO ENTRE O TITULO E A FIGURA.
   Dele: "Uniformizar a distancia nas paginas de Servicos do titulo e a foto e
   o texto, estao muito distantes" e "E possivel subir um pouco mais os
   textos?". A abertura herdava 96px de respiro de `.tr2-secao`, o que faz
   sentido entre duas faixas, nao entre o titulo da pagina e a primeira
   imagem. */
/* O RESPIRO DA ABERTURA, EM CIMA E EMBAIXO.
   Em 15/10 ele pediu para aproximar titulo, foto e texto e eu so mexi no de
   cima - "Voce esqueceu de diminuir o espaco entre o texto e a figura", duas
   vezes. Medido: 200px entre o fim da figura e o primeiro subtitulo, dos
   quais 160 eram respiro morto da propria secao (96 de padding + 64 de
   margem). O respiro de faixa faz sentido ENTRE faixas, nao entre a abertura
   e o texto que a continua. */
.tr2-intro-servico {
  padding-top: var(--tr2-esp-md);
  padding-bottom: var(--tr2-esp-sm);
  margin-bottom: var(--tr2-esp-md);
}

/* --- Servicos Executados (16/10) ---------------------------------------- */

/* Quatro projetos reais, cada um com figura, ficha e tres secoes. O arranjo e
   o mesmo das paginas de servico - figura de um lado, texto do outro - para a
   pagina nao parecer de outro site. Alternado, para a lista nao virar uma
   escada de quatro degraus iguais. */

.tr2-executados {
  display: grid;
  gap: var(--tr2-esp-xl);
}

.tr2-executado {
  display: grid;
  gap: var(--tr2-esp-lg);
  grid-template-columns: 1fr;
  align-items: start;
}

@media (min-width: 900px) {
  .tr2-executado { grid-template-columns: 1fr 1fr; }

  /* O impar inverte: figura a direita. `direction` nao serve aqui porque
     viraria o texto junto; a ordem das colunas resolve sozinha. */
  .tr2-executado--invertido > figure { order: 2; }
}

.tr2-executado figure { margin: 0; }
.tr2-executado figure img { border-radius: var(--tr2-raio-lg); }

/* O titulo vem em caixa alta do documento dele. Normalizado aqui, no CSS: o
   HTML guarda o texto como ele escreveu, entao quem copia copia o original. */
/* NUMERO, TRACO E NOME NA MESMA LINHA - do mockup de 16/10.
   O traco e um pseudo-elemento e nao um caractere: assim nao e lido em voz
   alta nem copiado junto com o nome do projeto. */
.tr2-executado__titulo {
  display: grid;
  /* barra vertical | nome. A barra tem a ALTURA DO NOME: dele, em 17/10,
     "coloque o traco amarelo que esta ao lado do texto do servico, na
     vertical abrangendo o texto". O numero que vinha antes saiu no mesmo dia,
     tambem a pedido dele. */
  grid-template-columns: 3px 1fr;
  align-items: start;
  column-gap: var(--tr2-esp-sm);
  margin: 0 0 var(--tr2-esp-sm);
  font-size: 1.25rem;
  line-height: 1.25;
  text-transform: none;
}


/* A BARRA VERTICAL, do tamanho do nome - estica junto quando o nome quebra
   em duas ou tres linhas, que e o caso dos quatro projetos. Pseudo-elemento
   e nao caractere: nao e lido em voz alta nem copiado com o nome.
   `currentColor` nao serve: herdaria o verde do titulo. */
.tr2-executado__titulo::after {
  content: "";
  grid-column: 1;
  grid-row: 1;
  width: 3px;
  align-self: stretch;
  border-radius: 2px;
  background: var(--e-global-color-accent);
}

.tr2-executado__nome { grid-column: 2; }

/* O DIVISOR ENTRE PROJETOS - uma linha inteira, delicada e visivel.
 *
 * ESTAVA QUEBRADO, e foi erro meu: era uma grade `1fr auto 1fr` com so dois
 * pseudo-elementos. O primeiro ocupava a coluna da esquerda, o segundo caia
 * na do meio, que media ZERO - entao so a METADE ESQUERDA da linha era
 * desenhada, e na cor da borda, quase igual ao bege do fundo. Medido em
 * 17/10: 576px de linha num divisor de 1200, rgb(216,220,213) sobre
 * rgb(246,244,238). Era isso o "deixe mais visivel".
 *
 * Agora: uma borda so, de ponta a ponta. Continua fina - ele pediu "uma
 * linha delicada".
 *
 * AMARELA desde 17/10: "o traco que divide os servicos executados pode ser
 * amarelo?". Em 16/10 eu tinha posto a Primaria a 30%. A Destaque e a mesma
 * cor da barra vertical ao lado dos titulos, entao a pagina passa a ter um
 * acento so, repetido - em vez de dois tons de linha competindo.
 *
 * Variavel do Kit, nao cor escrita: a regra do tema e nenhuma cor fixa. */
.tr2-executados__divisor {
  height: 0;
  border-top: 1px solid var(--e-global-color-accent);
}

/* A FICHA: pares rotulo-valor em <dl>. Em tela larga o rotulo fica a esquerda
   numa coluna fixa, para os valores alinharem entre si. */
.tr2-ficha {
  margin: 0 0 var(--tr2-esp-md);
  padding: var(--tr2-esp-sm) 0;
  border-top: 1px solid var(--e-global-color-borda);
  border-bottom: 1px solid var(--e-global-color-borda);
  font-size: .9375rem;
}

.tr2-ficha__par {
  display: grid;
  grid-template-columns: 7.5rem 1fr;
  gap: var(--tr2-esp-xs);
}

.tr2-ficha__par + .tr2-ficha__par { margin-top: .35rem; }

.tr2-ficha dt {
  font-weight: 600;
  color: var(--e-global-color-primary);
}

.tr2-ficha dd { margin: 0; }

.tr2-executado__secao + .tr2-executado__secao { margin-top: var(--tr2-esp-md); }

.tr2-executado__secao h3 {
  margin: 0 0 var(--tr2-esp-xs);
  font-size: 1rem;
  font-weight: 700;
  color: var(--e-global-color-primary);
}

.tr2-executado__secao p { margin: 0; max-width: none; }

/* O texto do projeto como a equipe escreve no editor (20/10): titulos H2/H3
   viram os cabecalhos de secao acima, paragrafos e listas seguem o mesmo
   ritmo. */
.tr2-executado__texto > :first-child { margin-top: 0; }
.tr2-executado__texto > :last-child { margin-bottom: 0; }

.tr2-executado__texto :is(h2, h3, h4) {
  margin: var(--tr2-esp-md) 0 var(--tr2-esp-xs);
  font-size: 1rem;
  font-weight: 700;
  color: var(--e-global-color-primary);
}

.tr2-executado__texto p,
.tr2-executado__texto ul,
.tr2-executado__texto ol { margin: 0 0 var(--tr2-esp-xs); max-width: none; }

/* --- Contato nos dois paineis (16/10) ----------------------------------- */

.tr2-contato__cabeca { margin-bottom: var(--tr2-esp-lg); }

/* O traco dourado acima do titulo. */
.tr2-contato__risco {
  display: block;
  width: 2.5rem;
  height: 3px;
  margin-bottom: var(--tr2-esp-sm);
  background: var(--e-global-color-accent);
}

.tr2-contato__cabeca h2 { margin: 0 0 var(--tr2-esp-xs); }
.tr2-contato__cabeca .tr2-resumo { margin: 0; }

.tr2-contato__paineis {
  display: grid;
  gap: var(--tr2-esp-lg);
  grid-template-columns: 1fr;
  align-items: start;
}

/* Em tela larga a lista fica mais larga que as acoes: sao quatro linhas de
   dado, e o endereco e longo. As acoes sao tres botoes. */
@media (min-width: 900px) {
  .tr2-contato__paineis { grid-template-columns: 1.4fr 1fr; }
}

.tr2-contato__dados,
.tr2-contato__acoes {
  padding: var(--tr2-esp-lg);
  border-radius: var(--tr2-raio-lg);
}

.tr2-contato__dados {
  /* 32px nas laterais, como o cartao verde. Com os 40px de antes o endereco
     ficava 1px maior que a linha e quebrava - ele pediu "de preferencia numa
     unica linha" (17/10). Cabe a partir de 1280px e em 768px; entre 900 e
     1024 o cartao e estreito demais e o endereco quebra depois da cidade. */
  padding-inline: 32px;
  background: var(--e-global-color-fundo);
  border: 1px solid var(--e-global-color-borda);
}

/* Branco sobre Primaria Escura, o mesmo par do rodape. */
.tr2-contato__acoes {
  background: var(--e-global-color-secondary);
  color: var(--e-global-color-branco);
}

.tr2-contato__dados h3,
.tr2-contato__acoes h3 {
  margin: 0 0 var(--tr2-esp-md);
  font-size: 1.125rem;
}

.tr2-contato__dados h3 { color: var(--e-global-color-primary); }
.tr2-contato__acoes h3 { color: var(--e-global-color-branco); }

.tr2-contato__acoes p {
  margin: 0 0 var(--tr2-esp-md);
  max-width: none;
  font-size: .9375rem;
  color: rgb(255 255 255 / 82%);
}

/* Os botoes empilhados e de largura cheia: a coluna e estreita e tres botoes
   lado a lado quebrariam o texto de cada um. */
.tr2-contato__acoes .tr2-botao {
  display: block;
  width: 100%;
  margin-bottom: var(--tr2-esp-sm);
  text-align: center;
}

/* O botao de contorno, do mockup: borda clara sobre o verde escuro, para o
   amarelo do primeiro continuar sendo o unico destaque. */
.tr2-botao--contorno {
  background: transparent;
  border: 1px solid rgb(255 255 255 / 45%);
  color: var(--e-global-color-branco);
}

.tr2-botao--contorno:hover,
.tr2-botao--contorno:focus-visible {
  background: rgb(255 255 255 / 10%);
  border-color: var(--e-global-color-branco);
  color: var(--e-global-color-branco);
}

.tr2-contato__mapa {
  display: inline-block;
  margin-top: var(--tr2-esp-xs);
  color: var(--e-global-color-branco);
  font-size: .9375rem;
  text-underline-offset: .2em;
}

/* --- Principais clientes (17/10) ---------------------------------------- */

/* A esquerda, como os outros titulos da home - pedido dele em 18/10. */
.tr2-clientes h2 { margin-bottom: var(--tr2-esp-lg); }

/* Dez marcas: cinco por linha no desktop, duas linhas iguais. */
.tr2-clientes__grade {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--tr2-esp-sm);
  margin: 0;
  padding: 0;
  list-style: none;
}

@media (min-width: 768px)  { .tr2-clientes__grade { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 1024px) { .tr2-clientes__grade { grid-template-columns: repeat(5, 1fr); } }

/* CARTAO BRANCO: os logotipos vieram com fundo branco opaco, e sobre branco
   esse fundo some. A borda fina e o que desenha o cartao. */
.tr2-clientes__item {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 112px;
  padding: var(--tr2-esp-sm);
  background: var(--e-global-color-branco);
  border: 1px solid var(--e-global-color-borda);
  border-radius: var(--tr2-raio-lg);
}

/* TAMANHO OPTICO: altura maxima e largura maxima juntas. O logo largo
   (Energisa, Hanon) bate na largura; o quadrado (Torrano, Enel) bate na
   altura. Fixar so um dos dois deixaria os largos enormes ou os quadrados
   minusculos. */
.tr2-clientes__item img {
  display: block;
  width: auto;
  height: auto;
  max-width: 100%;
  max-height: 64px;
  object-fit: contain;
  /* COLORIDOS desde 19/10, e preto e branco ao passar o mouse - o inverso
     de antes, a pedido dele: "Deixar os icones coloridos e quando o mouse
     passar sobre, vira branco e preto". */
  transition: filter .2s ease;
}

.tr2-clientes__item:hover img { filter: grayscale(100%); }

@media (prefers-reduced-motion: reduce) {
  .tr2-clientes__item img { transition: none; }
}

/* OS DOIS CARTOES DO CONTATO NA MESMA ALTURA - pedido dele em 17/10: "reduzir
   a altura da caixa de texto verde eliminando o espaco vazio dela, para mesma
   altura da caixa de texto com as informacoes".

   Medido antes: branco 300px, verde 398px. O verde sobrava por dois motivos:
     - 64px de vazio no fim: 40 de respiro mais os 24 de margem do ultimo
       elemento;
     - o WordPress embrulhou os tres links num <p> - que ele nem fecha direito
       - e esse paragrafo trazia margem propria.
   Agora o espacamento do verde e do proprio cartao, com intervalo fixo entre
   os itens e margem zero em todos, e o respiro desceu de 40 para 32px.

   E o verde ESTICA ate a altura do branco, nunca o contrario: o que ele pediu
   foi o verde menor. O link do mapa fica preso embaixo, alinhado com a ultima
   linha do cartao branco - a sobra, se houver, vira distribuicao, nao buraco. */
@media (min-width: 900px) {
  .tr2-contato__paineis { align-items: stretch; }
}

/* O CEP nao se parte no hifen ("05849-" numa linha, "270" na outra). */
.tr2-contato__cep { white-space: nowrap; }

.tr2-contato__acoes {
  display: flex;
  flex-direction: column;
  gap: var(--tr2-esp-sm);
  padding: var(--tr2-esp-md) 32px;
}

.tr2-contato__acoes > *,
.tr2-contato__acoes p { margin: 0; }

/* O <p> que o WordPress criou em volta dos links vira so um agrupador. */
.tr2-contato__acoes > p:last-child {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-top: auto;
}

.tr2-contato__acoes .tr2-botao { margin-bottom: 0; }
.tr2-contato__acoes h3 { margin: 0; }
.tr2-contato__mapa { margin-top: 2px; }

/* =============================================================================
   Blog (18/10)
   ========================================================================== */

/* --- A lista: dois cartoes por linha a partir do tablet ------------------ */

.tr2-blog-grade {
  display: grid;
  gap: var(--tr2-esp-lg);
  grid-template-columns: 1fr;
}

@media (min-width: 768px) {
  .tr2-blog-grade { grid-template-columns: repeat(2, 1fr); gap: var(--tr2-esp-md); }
}

/* O cartao inteiro e o link. Altura igual na linha: o "Ler artigo" fica no
   pe dos dois, mesmo com titulos de tamanhos diferentes. */
.tr2-blog-cartao__link {
  display: flex;
  flex-direction: column;
  height: 100%;
  overflow: hidden;
  background: var(--e-global-color-branco);
  border: 1px solid var(--e-global-color-borda);
  border-radius: var(--tr2-raio-lg);
  color: inherit;
  text-decoration: none;
  transition: box-shadow .2s ease, transform .2s ease;
}

/* `a.` no seletor: o Hello sublinha `.entry-content a` com especificidade
   (0,1,1) - o mesmo mecanismo que ja sublinhou os botoes e os cartoes. */
a.tr2-blog-cartao__link,
a.tr2-blog-cartao__link:hover,
a.tr2-blog-cartao__link:focus { text-decoration: none; }

.tr2-blog-cartao__link:hover {
  box-shadow: 0 8px 24px color-mix(in srgb, var(--e-global-color-secondary) 14%, transparent);
  transform: translateY(-2px);
}

.tr2-blog-cartao__link:focus-visible {
  outline: 3px solid var(--e-global-color-accent);
  outline-offset: 3px;
}

@media (prefers-reduced-motion: reduce) {
  .tr2-blog-cartao__link { transition: none; }
  .tr2-blog-cartao__link:hover { transform: none; }
}

/* As figuras tem tres proporcoes; no cartao todas entram em 16:9, cortadas
   pelo centro, para os quatro cartoes alinharem. */
.tr2-blog-cartao__imagem {
  aspect-ratio: 16 / 9;
  overflow: hidden;
  background: var(--e-global-color-fundoalternativo);
}

/* .tr2-figura traz 40px de margem e borda arredondada, feitas para a figura
   solta no texto; no cartao elas abriam uma faixa bege sob a imagem. */
.tr2-blog-cartao__imagem .tr2-figura,
.tr2-blog-cartao__imagem picture { display: block; height: 100%; margin: 0; }

.tr2-blog-cartao__imagem .tr2-figura img {
  border: 0;
  border-radius: 0;
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.tr2-blog-cartao__corpo {
  display: flex;
  flex: 1;
  flex-direction: column;
  gap: var(--tr2-esp-xs);
  padding: var(--tr2-esp-md);
}

/* A linha "data | autor" (19/10): pequena, em cinza, com icones de traco. */
.tr2-assinatura {
  display: flex;
  flex-wrap: wrap;
  gap: 4px var(--tr2-esp-sm);
  margin: 0;
  font-size: .875rem;
  color: var(--e-global-color-textosuave);
}

.tr2-assinatura__item { display: inline-flex; align-items: center; gap: 6px; }
.tr2-assinatura svg { flex: none; color: var(--e-global-color-primary); }

.tr2-artigo > .tr2-assinatura { margin-bottom: var(--tr2-esp-md); }

.tr2-blog-cartao__titulo {
  margin: 0;
  font-size: 1.25rem;
  line-height: 1.3;
  color: var(--e-global-color-secondary);
}

.tr2-blog-cartao__resumo { margin: 0; color: var(--e-global-color-textosuave); }

.tr2-blog-cartao__mais {
  margin-top: auto;
  padding-top: var(--tr2-esp-xs);
  font-weight: 600;
  color: var(--e-global-color-primary);
}

/* --- O artigo: uma coluna de leitura ------------------------------------- */

.tr2-artigo > * { max-width: var(--tr2-medida); }

/* Titulo e figura proximos, como nas paginas de servico - ele pediu para
   diminuir essa distancia la em 15/10. */
.tr2-secao.tr2-artigo { padding-top: var(--tr2-esp-md); }

/* Respiro entre paragrafos e listas: o texto e longo, e sem isto a lista
   colava no paragrafo seguinte. */
.tr2-artigo p,
.tr2-artigo ul,
.tr2-artigo ol { margin: 0 0 var(--tr2-esp-sm); }

.tr2-artigo li + li { margin-top: 6px; }

.tr2-artigo > .tr2-artigo__figura {
  max-width: 860px;
  margin: 0 0 var(--tr2-esp-lg);
  overflow: hidden;
  border-radius: var(--tr2-raio-lg);
}

.tr2-artigo__figura img { display: block; width: 100%; height: auto; }

/* A linha fina: o resumo que ele escreveu abaixo do titulo, em dois dos
   quatro artigos. */
.tr2-artigo__linha-fina {
  padding-left: var(--tr2-esp-sm);
  border-left: 3px solid var(--e-global-color-accent);
  font-size: 1.1875rem;
  line-height: 1.55;
  color: var(--e-global-color-secondary);
}

.tr2-artigo h2 { margin-top: var(--tr2-esp-xl); }
.tr2-artigo h3 { margin-top: var(--tr2-esp-lg); }

/* As referencias trazem enderecos longos (o do CONAMA tem 80 caracteres sem
   espaco): sem isto empurrariam a pagina para o lado no celular. */
.tr2-artigo a { overflow-wrap: anywhere; }

/* Formulas do artigo de ruido: L<sub>Aeq,T</sub> nao se parte no fim da
   linha, e a da subtracao energetica vai em destaque. */
.tr2-formula { white-space: nowrap; }

.tr2-formula-bloco {
  padding: var(--tr2-esp-sm);
  background: var(--e-global-color-fundoalternativo);
  border-radius: var(--tr2-raio-lg);
  font-size: clamp(.9375rem, 3.8vw, 1.125rem);
  text-align: center;
}

/* No celular a formula nao cabe numa linha de 260px: quebra, mas so nos
   espacos em volta do "=" e do "−" - nunca no meio de um termo. */
.tr2-formula-bloco .tr2-formula { white-space: normal; }
.tr2-formula-bloco sub,
.tr2-formula-bloco sup { white-space: nowrap; }

.tr2-artigo__voltar { margin-top: var(--tr2-esp-xl); font-weight: 600; }

/* --- Setores atendidos: a figura dele em cinco paineis (19/10) ----------- */

.tr2-setores-fig {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: var(--tr2-esp-sm);
  margin: 0;
  padding: 0;
  list-style: none;
}

/* O canto arredondado da figura original vai junto no recorte, sobre o
   branco dela; o raio no CSS o recobre, para nao aparecer canto branco no
   bege da secao. */
.tr2-setores-fig__item img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: var(--tr2-raio-lg);
}

.tr2-setores-fig:focus-visible {
  outline: 3px solid var(--e-global-color-accent);
  outline-offset: 4px;
}

/* NO CELULAR, UMA FILEIRA QUE ROLA DE LADO. Cinco colunas em 360px dariam
   paineis de 60px com o nome ilegivel; em duas, sobraria um painel sozinho.
   Cada painel com 58% da largura: o nome se le, e a ponta do proximo
   aparecendo avisa que ha mais. */
@media (max-width: 767px) {
  .tr2-setores-fig {
    grid-template-columns: none;
    grid-auto-flow: column;
    grid-auto-columns: 58%;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    padding-bottom: var(--tr2-esp-xs);
  }

  .tr2-setores-fig__item { scroll-snap-align: start; }
}

/* --- Formulario de contato (20/10), do modelo dele ----------------------- */

.tr2-form {
  max-width: 880px;
  padding: var(--tr2-esp-lg);
  background: var(--e-global-color-branco);
  border: 1px solid var(--e-global-color-borda);
  border-radius: var(--tr2-raio-lg);
}

.tr2-form__titulo { margin: 0 0 4px; font-size: 1.375rem; }
.tr2-form__intro { margin: 0 0 var(--tr2-esp-md); color: var(--e-global-color-textosuave); }

.tr2-form__campo { margin-bottom: var(--tr2-esp-sm); }

.tr2-form__campo label {
  display: block;
  margin-bottom: 6px;
  font-size: .875rem;
  font-weight: 600;
  color: var(--e-global-color-secondary);
}

.tr2-form__campo input,
.tr2-form__campo textarea {
  width: 100%;
  padding: 10px 14px;
  font: inherit;
  color: var(--e-global-color-text);
  background: var(--e-global-color-branco);
  border: 1px solid var(--e-global-color-borda);
  border-radius: var(--tr2-raio-md);
}

.tr2-form__campo input { border-radius: 999px; }
.tr2-form__campo textarea { resize: vertical; min-height: 120px; }

.tr2-form__campo input:focus-visible,
.tr2-form__campo textarea:focus-visible {
  outline: 3px solid color-mix(in srgb, var(--e-global-color-accent) 70%, transparent);
  outline-offset: 1px;
  border-color: var(--e-global-color-primary);
}

/* O campo-isca: fora da tela para gente, presente para robo. */
.tr2-form__isca { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

.tr2-form__lgpd { margin: 0 0 var(--tr2-esp-sm); font-size: .8125rem; color: var(--e-global-color-textosuave); }

/* `.tr2-form button.` no seletor: o Kit do Elementor pinta todo `button`
   de amarelo com especificidade (0,1,1), e a classe sozinha perdia - o
   botao saia amarelo, e o modelo dele e escuro. */
.tr2-form button.tr2-form__enviar {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 100%;
  padding: 12px 20px;
  font: inherit;
  font-weight: 600;
  color: var(--e-global-color-branco);
  background: var(--e-global-color-secondary);
  border: 0;
  border-radius: 999px;
  cursor: pointer;
}

.tr2-form button.tr2-form__enviar:hover:not(:disabled) { background: var(--e-global-color-primary); color: var(--e-global-color-branco); }
.tr2-form button.tr2-form__enviar:focus-visible { outline: 3px solid var(--e-global-color-accent); outline-offset: 3px; }
.tr2-form button.tr2-form__enviar:disabled { opacity: .55; cursor: not-allowed; }

.tr2-form__aviso {
  margin: 0 0 var(--tr2-esp-sm);
  padding: 10px 14px;
  font-size: .9375rem;
  border-radius: var(--tr2-raio-md);
  border-left: 4px solid currentColor;
}

.tr2-form__aviso--sucesso { color: var(--e-global-color-primary); background: color-mix(in srgb, var(--e-global-color-primary) 8%, transparent); }
.tr2-form__aviso--erro { color: var(--e-global-color-secondary); background: color-mix(in srgb, var(--e-global-color-accent) 18%, transparent); }
.tr2-form__aviso--info { color: var(--e-global-color-secondary); background: var(--e-global-color-fundoalternativo); }

/* A ancora #formulario nao para atras do cabecalho fixo. */
#formulario { scroll-margin-top: var(--tr2-altura-cabecalho); }