/* =============================================================================
   TR2 Engenharia - camada base do design system

   REGRA ABSOLUTA DESTE ARQUIVO: nenhum valor de cor, familia de fonte, tamanho
   ou peso escrito aqui. Tudo vem das variaveis que o Kit Ativo do Elementor
   gera. Se voce precisa de uma cor, use var(--e-global-color-*). Se o valor nao
   existe como token, o lugar de cria-lo e design-tokens.json, nao aqui.

   Nem fallback de cor: `var(--x, #36493D)` seria uma cor fixa escondida, e a
   primeira a sair do tom quando o cliente trocar a marca. Se o CSS do Kit nao
   carregar, queremos notar - nao conviver com uma copia desatualizada.

   Carregado DEPOIS do CSS do Kit. Veja inc/design-system.php.
   ========================================================================== */

:root {
  /* --- escala de espacamento (briefing) --------------------------------- */
  --tr2-esp-xs: 8px;
  --tr2-esp-sm: 16px;
  --tr2-esp-md: 24px;
  --tr2-esp-lg: 40px;
  --tr2-esp-xl: 64px;
  --tr2-esp-xxl: 96px;

  /* Respiro vertical de secao: encolhe no celular sem media query.
     O rascunho do cliente usava ~1600px por secao e a pagina chegou a 15.000px;
     esta escala existe para isso nao se repetir. */
  --tr2-secao-y: clamp(var(--tr2-esp-xl), 4rem + 3vw, var(--tr2-esp-xxl));

  --tr2-raio-sm: 4px;
  --tr2-raio-md: 8px;
  --tr2-raio-lg: 14px;
  --tr2-raio-pill: 999px;

  /* Largura maxima de linha de texto. ~70 caracteres em Inter: acima disso o
     olho perde a linha ao voltar, o que importa em pagina tecnica longa. */
  --tr2-medida: 68ch;

  /* --- A COLUNA CENTRAL ---------------------------------------------------
     UMA definicao para o site inteiro: cabecalho, corpo, faixas e rodape.

     POR QUE ISTO EXISTE. Ate aqui havia TRES colunas competindo, e so se via
     em tela larga. Medido a 1912px: o cabecalho e o corpo vinham do Hello e
     comecavam em x=386 (1140px); as faixas e o rodape usavam 1200px e
     comecavam em 356; e os blocos que declaravam `margin: X 0` depois da
     regra da faixa perdiam o `margin-inline: auto` e grudavam em x=24.

     `--tr2-container` e a largura do CONTEUDO. O respiro lateral fica FORA
     dela: quem centraliza por `max-width` usa o TOTAL, quem centraliza por
     grid usa so o conteudo. Os dois caem no mesmo pixel. */
  --tr2-container: 1200px;
  --tr2-container-pad: var(--tr2-esp-md);
  --tr2-container-total: calc(var(--tr2-container) + var(--tr2-container-pad) * 2);

  /* Troque esta variavel por url(...) de uma foto quando o cliente enviar
     imagens de campo. O hero nao precisa de nenhuma outra alteracao. */
  --tr2-hero-textura: url("../img/textura-topografica.svg");
}

/* O cabecalho e o corpo vem do Hello, que usa uma coluna escalonada de
   Bootstrap - 500 / 600 / 800 / 1140px. Nao e decisao de design deste
   projeto: o site inteiro foi desenhado em 1200, e a 1024px a coluna de 800
   deixaria o conteudo apertado. Entao o Hello e que se alinha ao site.

   SEM o `body:not([class*="elementor-page-"])` que o Hello usa, e isso e o
   centro do problema. Aquela guarda SOLTA a coluna em qualquer pagina que ja
   tenha sido aberta no Elementor: o body ganha `elementor-page-N` e o
   `.site-main` vira largura cheia. Ou seja, a coluna do site dependia de
   quem abriu o que no painel - a home, a area 02 e as paginas de servico
   estavam soltas, a area 01 e Quem Somos nao. Era a origem real do
   desalinhamento, e nenhuma largura de tela explicava o padrao.

   O conteudo deste site e HTML classico dos seeds. O que precisa sangrar de
   borda a borda ja faz isso sozinho, por `margin-left: calc(50% - 50vw)`.

   O `body:not(.tr2-largura-cheia)` NAO e enfeite de especificidade: o
   seletor do Hello e (0,2,1) e um `.site-main` solto e (0,1,0) - perderia, e
   a coluna continuaria dependendo do Elementor. Com o `:not()` empatamos e
   vencemos pela ordem, porque design-system.css carrega depois. De quebra,
   `tr2-largura-cheia` no body e a saida para a pagina que um dia precise da
   largura inteira, sem mexer nesta regra. */
.site-header .header-inner,
body:not(.tr2-largura-cheia) .site-main {
  max-width: var(--tr2-container-total);
  margin-inline: auto;
  padding-inline: var(--tr2-container-pad);
}

/* O titulo da pagina que o Hello imprime (paginas de servico e artigos)
   tinha max-width de 1140px CENTRALIZADO na coluna de 1200: caia 30px para
   dentro do logo (x=150 contra 120, em 1440). Na borda da coluna, como
   todo o resto. */
.page-header .entry-title {
  max-width: none;
  margin-inline: 0;
}

/* =============================================================================
   Base
   ========================================================================== */

body {
  background-color: var(--e-global-color-fundo);
  color: var(--e-global-color-text);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* Hierarquia tipografica para conteudo fora do Elementor: pagina 404, editor
   classico, avisos do WordPress. Dentro do Elementor os widgets ja referenciam
   as mesmas Fontes Globais. */
h1, h2, h3, h4, h5, h6 {
  color: var(--e-global-color-primary);
  font-family: var(--e-global-typography-primary-font-family), system-ui, sans-serif;
  text-wrap: balance;  /* evita a ultima linha do titulo com uma palavra so */
}

h1 {
  font-size: var(--e-global-typography-primary-font-size);
  font-weight: var(--e-global-typography-primary-font-weight);
  line-height: var(--e-global-typography-primary-line-height);
  letter-spacing: var(--e-global-typography-primary-letter-spacing);
}

h2 {
  font-size: var(--e-global-typography-secondary-font-size);
  font-weight: var(--e-global-typography-secondary-font-weight);
  line-height: var(--e-global-typography-secondary-line-height);
}

h3 {
  font-size: var(--e-global-typography-accent-font-size);
  font-weight: var(--e-global-typography-accent-font-weight);
  line-height: var(--e-global-typography-accent-line-height);
}

p, li {
  max-width: var(--tr2-medida);
}

a {
  color: var(--e-global-color-primary);
  text-underline-offset: 0.2em;
}

/* Foco visivel em TODO elemento interativo. Nao e detalhe: sem isso, quem
   navega por teclado nao sabe onde esta. O contorno usa o Destaque, que da
   4,80:1 sobre a Primaria e 7,48:1 sobre a Primaria Escura. */
:where(a, button, input, select, textarea, [tabindex]):focus-visible {
  outline: 3px solid var(--e-global-color-accent);
  outline-offset: 2px;
  border-radius: var(--tr2-raio-sm);
}

/* =============================================================================
   Secoes e faixas
   ========================================================================== */

.tr2-secao {
  padding-block: var(--tr2-secao-y);
}

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

/* Faixa escura: hero, CTA e rodape. E AQUI que a Primaria Escura e usada - o
   verde que o proprio cliente usou como fundo no rascunho dele. */
.tr2-faixa-escura {
  background-color: var(--e-global-color-secondary);
  color: var(--e-global-color-branco);
}

/* O hero entra na MESMA regra das faixas escuras.
   Sem isto, os titulos dentro de .tr2-hero caiam na regra geral
   `h1..h6 { color: Primaria }` e ficavam #36493D sobre #1B2A1E: 1,56:1 - ou
   seja, praticamente ilegiveis. Encontrado olhando o screenshot do guia de
   estilo, nao por leitura do codigo. */
.tr2-faixa-escura :is(h1, h2, h3, h4, h5, h6),
.tr2-hero :is(h1, h2, h3, h4, h5, h6) {
  color: var(--e-global-color-branco);
}

.tr2-faixa-escura a:not(.tr2-botao),
.tr2-hero a:not(.tr2-botao) {
  color: var(--e-global-color-accent);
}

/* Texto de apoio sobre faixa escura. Herdar `color` resolveria, mas qualquer
   paragrafo com classe propria voltaria ao Texto escuro sem avisar. */
.tr2-faixa-escura :is(p, li),
.tr2-hero :is(p, li) {
  color: var(--e-global-color-branco);
}

/* Hero com a textura de curvas de nivel. currentColor vem do `color` abaixo,
   entao as linhas herdam o branco e aparecem com a opacidade do proprio SVG. */
.tr2-hero {
  position: relative;
  background-color: var(--e-global-color-secondary);
  color: var(--e-global-color-branco);
  overflow: hidden;
}

.tr2-hero::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image: var(--tr2-hero-textura);
  background-size: cover;
  background-position: center;
  /* Decorativo: nunca deve capturar clique nem aparecer para leitor de tela. */
  pointer-events: none;
}

.tr2-hero > * {
  position: relative; /* acima da textura */
}

/* Quem pediu menos animacao/efeito tambem costuma pedir menos ruido visual. */
@media (prefers-reduced-motion: reduce) {
  .tr2-hero::before { opacity: 0.4; }
}

/* =============================================================================
   Botoes
   ========================================================================== */

/* . no seletor, e nao .tr2-botao sozinho: o Hello declara
   .entry-content a { text-decoration: underline } com especificidade (0,1,1),
   e a nossa classe sozinha e (0,1,0) - perdia. Resultado medido: TODOS os
   botoes dentro do conteudo saiam sublinhados ("Fale no WhatsApp", "Ver
   servicos", "Ver no Google Maps"), enquanto os do cabecalho e do rodape, que
   estao fora de .entry-content, saiam certos. Foi o mesmo mecanismo que
   sublinhou os cartoes. */
a.tr2-botao,
a.tr2-botao:hover,
a.tr2-botao:focus { text-decoration: none; }

.tr2-botao {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--tr2-esp-xs);
  padding: 14px 28px;
  border: 2px solid transparent;
  border-radius: var(--tr2-raio-md);
  font-family: var(--e-global-typography-text-font-family), system-ui, sans-serif;
  font-weight: 600;
  line-height: 1.2;
  text-decoration: none;
  cursor: pointer;
  transition: background-color .15s ease, border-color .15s ease, color .15s ease;
  /* Alvo de toque confortavel no celular (WCAG 2.5.5 sugere 44px). */
  min-height: 48px;
}

/* Primario: fundo Destaque com texto ESCURO.
   Texto branco sobre #F2A900 daria 2,01:1 - reprovado. Com a Primaria Escura
   sao 7,48:1. A regra do cliente e a norma apontam para o mesmo lado. */
.tr2-botao--primario {
  background-color: var(--e-global-color-accent);
  color: var(--e-global-color-secondary);
}

.tr2-botao--primario:hover,
.tr2-botao--primario:focus-visible {
  background-color: var(--e-global-color-primary);
  color: var(--e-global-color-branco);
}

/* Secundario sobre fundo claro. */
.tr2-botao--secundario {
  background-color: transparent;
  border-color: var(--e-global-color-primary);
  color: var(--e-global-color-primary);
}

.tr2-botao--secundario:hover,
.tr2-botao--secundario:focus-visible {
  background-color: var(--e-global-color-primary);
  color: var(--e-global-color-branco);
}

/* Secundario sobre faixa escura - o par "fantasma" do hero. */
.tr2-faixa-escura .tr2-botao--secundario,
.tr2-hero .tr2-botao--secundario {
  border-color: var(--e-global-color-branco);
  color: var(--e-global-color-branco);
}

.tr2-faixa-escura .tr2-botao--secundario:hover,
.tr2-hero .tr2-botao--secundario:hover {
  background-color: var(--e-global-color-branco);
  color: var(--e-global-color-secondary);
}

/* =============================================================================
   Etiqueta (eyebrow)
   ========================================================================== */

.tr2-etiqueta {
  display: inline-block;
  font-family: var(--e-global-typography-etiqueta-font-family), system-ui, sans-serif;
  font-size: var(--e-global-typography-etiqueta-font-size);
  font-weight: var(--e-global-typography-etiqueta-font-weight);
  letter-spacing: var(--e-global-typography-etiqueta-letter-spacing);
  text-transform: uppercase;
  color: var(--e-global-color-accent);
  margin-bottom: var(--tr2-esp-sm);
}

/* Sobre fundo claro o dourado nao passa em texto pequeno (2,01:1).
   A etiqueta clara usa a Primaria, que da 9,65:1. */
.tr2-etiqueta--claro {
  color: var(--e-global-color-primary);
}

/* =============================================================================
   Cartao
   ========================================================================== */

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

/* Borda em vez de sombra: e o que o rascunho do cliente faz, fica mais limpo e
   nao custa repintura de camada ao rolar. */
.tr2-cartao--destaque {
  border-color: var(--e-global-color-accent);
}

/* =============================================================================
   Logo e wordmark
   ========================================================================== */

.tr2-logo { display: block; height: auto; max-width: 100%; }

/* Reserva do wordmark de texto, usado se o arquivo do logo sumir. Herda as
   Fontes Globais, entao acompanha a tipografia do site. */
.tr2-wordmark {
  display: inline-flex;
  align-items: baseline;
  gap: .4em;
  font-family: var(--e-global-typography-primary-font-family), system-ui, sans-serif;
  line-height: 1;
}
.tr2-wordmark b { font-weight: 700; font-size: 1.5rem; letter-spacing: -0.02em; }
.tr2-wordmark span { font-weight: 500; font-size: .8rem; letter-spacing: .06em; text-transform: uppercase; }
.tr2-wordmark--color b { color: var(--e-global-color-primary); }
.tr2-wordmark--color span { color: var(--e-global-color-textosuave); }
.tr2-wordmark--white b,
.tr2-wordmark--white span { color: var(--e-global-color-branco); }

/* =============================================================================
   Botao flutuante de WhatsApp
   ========================================================================== */

.tr2-zap {
  position: fixed;
  right: var(--tr2-esp-sm);
  bottom: var(--tr2-esp-sm);
  z-index: 900;

  /* 52px: confortavel para o polegar (WCAG 2.5.5 sugere 44) sem virar um
     carimbo em cima do conteudo, que e o que o briefing pede para evitar. */
  width: 52px;
  height: 52px;
  display: inline-flex;
  align-items: center;
  justify-content: center;

  border-radius: var(--tr2-raio-pill);
  /* Verde do WhatsApp, nao da marca: e um icone de produto de terceiro e as
     pessoas o reconhecem pela cor. Por isso NAO vem das Cores Globais - e a
     unica excecao do projeto, e esta registrada. */
  background: #25D366;
  color: #fff;
  box-shadow: 0 2px 10px rgb(0 0 0 / .22);
  transition: transform .15s ease;
}

.tr2-zap:hover,
.tr2-zap:focus-visible { transform: scale(1.06); }

/* Em telas largas ha espaco para afastar um pouco mais da borda. */
@media (min-width: 768px) {
  .tr2-zap { right: var(--tr2-esp-md); bottom: var(--tr2-esp-md); width: 56px; height: 56px; }
}

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

@media print { .tr2-zap { display: none; } }

/* =============================================================================
   Utilitarios
   ========================================================================== */

.tr2-pilha > * + * { margin-top: var(--tr2-esp-sm); }
.tr2-pilha-lg > * + * { margin-top: var(--tr2-esp-lg); }

.tr2-visualmente-oculto {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}