/* Blocos nomeados. Consomem apenas tokens — nenhum valor cru de cor ou espaço. */

/* --- Cabeçalho --- */
.cabecalho {
  position: sticky; top: 0; z-index: 50;
  background: rgba(253,253,251,.94);
  backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--linha);
}
.cabecalho__interno {
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--esp-5); padding-block: var(--esp-4);
}
.cabecalho__logo img { height: 40px; width: auto; }
.nav { display: flex; gap: var(--esp-5); flex-wrap: wrap; }
.nav a {
  font-size: var(--t-sm); font-weight: 600; color: var(--tinta-suave);
  text-decoration: none; padding-block: var(--esp-2);
  border-bottom: 2px solid transparent; transition: var(--transicao);
}
.nav a:hover { color: var(--verde); }
.nav a[aria-current="page"] { color: var(--verde); border-bottom-color: var(--verde); }

/* O cabeçalho fixo cobriria o título ao pular para uma âncora. Só onde ele é
   sticky — abaixo de 700px a barra rola junto e a folga seria buraco à toa. */
@media (min-width: 701px) {
  [id] { scroll-margin-top: 5rem; }
}

/* Em tela estreita o cabeçalho fixo com 5 itens de menu comia um quarto do visor.
   Logo acima, navegação abaixo, e sem sticky: a barra rola junto e devolve a tela
   ao conteúdo. Nada de menu sanfona — exigiria JS, e a spec pede o mínimo. */
@media (max-width: 700px) {
  .cabecalho { position: static; }
  .cabecalho__interno {
    flex-direction: column; align-items: flex-start;
    gap: var(--esp-3); padding-block: var(--esp-3);
  }
  .cabecalho__logo img { height: 34px; }
  /* Rótulos longos ("Engenharia Ambiental") quebram em mais linhas; sem apertar
     o espaçamento o cabeçalho passava de 200px numa tela de 800. */
  .nav { gap: var(--esp-2) var(--esp-4); font-size: var(--t-xs); }
  .nav a { padding-block: 0; font-size: inherit; }
}

/* --- Hero ---
   Foto de fundo com véu verde por cima. A foto vem da apresentação institucional
   (1280px), não do acervo em PDF (615px), que ficava suave em tela larga — foi
   por isso que o hero passou um tempo em verde chapado.
   O véu é o que garante o contraste do texto branco: sem ele, o título fica
   ilegível sobre as partes claras da foto. */
.hero { position: relative; background: var(--verde-escuro); color: #fff; overflow: hidden; }
.hero__fundo {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; opacity: .34;
}
.hero::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(160deg, rgba(0,45,0,.62), rgba(0,45,0,.30) 62%);
}
.hero__interno { position: relative; z-index: 1; padding-block: clamp(4rem, 12vw, 9rem); }
.hero h1 { color: #fff; max-width: 16ch; }
.hero__sub {
  margin-top: var(--esp-5); font-size: var(--t-lg);
  color: rgba(255,255,255,.9); max-width: 46ch;
}
.hero .rotulo { color: #9ec7a4; }

/* --- Barra de credenciais --- */
/* Mesma largura e mesma margem lateral do `.container`. Antes esta faixa era a
   única seção da página sem container: ia de ponta a ponta, e o primeiro número
   ficava a ~25px da borda da tela enquanto todo o resto do conteúdo começava a
   42px e parava em 1180px. Em monitor largo a faixa esticava sozinha e denunciava
   o desalinhamento. Repetir a regra em vez de aplicar a classe no HTML mantém a
   marcação limpa — a faixa é uma seção, não um bloco dentro de uma. */
.credenciais {
  width: min(100% - 2.5rem, var(--largura)); margin-inline: auto;
  display: grid; gap: 1px; background: var(--linha);
  grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
  border-block: 1px solid var(--linha);
}
.credencial { background: var(--papel); padding: var(--esp-6) var(--esp-5); }
.credencial__valor {
  font-family: var(--fonte-titulo); font-size: var(--t-2xl);
  font-weight: 600; color: var(--verde); line-height: 1;
}
.credencial__rotulo {
  margin-top: var(--esp-3); font-size: var(--t-sm);
  color: var(--tinta-suave); max-width: 24ch;
}

/* --- Ciclo completo --- */
/* 200px de minimo, e nao 260px, para que as cinco etapas caibam numa linha so em
   telas largas: o ciclo se le como ciclo, nao como 4 + 1 sobrando. */
.ciclo { display: grid; gap: var(--esp-6); grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); }
/* Coluna flex para poder empurrar a foto ao rodapé do cartão. Sem isso a foto
   vem logo depois do texto, e como os cinco parágrafos têm tamanhos diferentes
   cada foto começa numa altura — a fileira fica serrilhada. */
.etapa { border-top: 3px solid var(--verde); padding-top: var(--esp-4);
         display: flex; flex-direction: column; }
.etapa__num {
  font-family: var(--fonte-titulo); font-size: var(--t-sm);
  font-weight: 600; color: var(--verde); letter-spacing: .08em;
}
.etapa h3 { margin-top: var(--esp-2); font-size: var(--t-md); }
.etapa p { margin-top: var(--esp-3); margin-bottom: var(--esp-4);
           font-size: var(--t-sm); color: var(--tinta-suave); }
/* 1,9 pelo mesmo motivo de `.foto img`: as cinco fotos do ciclo são todas ~1,9
   nativas, e qualquer recorte lateral parte a marca d'água no canto direito.
   `margin-top: auto` cola a foto no rodapé do cartão: as cinco ficam na mesma
   linha por baixo, independente do tamanho do parágrafo acima. O respiro entre
   texto e foto vem do `margin-bottom` do parágrafo, que o `auto` não anula. */
.etapa img { margin-top: auto; border-radius: var(--raio); aspect-ratio: 1.9; object-fit: cover; }

/* --- Capacidade técnica --- */
.capacidade { padding-block: var(--esp-7); border-top: 1px solid var(--linha); }
.capacidade__cabeca { display: grid; gap: var(--esp-5); grid-template-columns: minmax(0,1fr); }
@media (min-width: 900px) {
  .capacidade__cabeca { grid-template-columns: 22ch minmax(0,1fr); gap: var(--esp-7); }
}
/* h2 e nao h3: a capacidade e seção de primeiro nivel da pagina, logo abaixo do
   h1, e com h3 a sequencia saltaria um nivel. */
.capacidade h2 { font-size: var(--t-xl); }
.capacidade__dado {
  margin-top: var(--esp-4); font-family: var(--fonte-titulo);
  font-size: var(--t-lg); color: var(--verde); font-weight: 600;
}
.capacidade__dado span {
  display: block; font-family: var(--fonte-texto); font-size: var(--t-xs);
  color: var(--tinta-suave); font-weight: 400;
}

/* --- Grade de fotos ---
   1,9 é a proporção nativa de 64 das 97 fotos (o acervo pós-corte do carimbo), e
   por isso é o enquadramento que NÃO corta: `cover` só recorta o que sobra, e
   nessas não sobra nada.
   Já foi 3/2, que parecia próximo o bastante. Não era: 3/2 sobre 1,9 tira ~10% de
   cada lateral, e a marca d'água da Montante fica no canto superior direito das
   fotos — o corte a partia no meio de "ENGENHARIA E SERVIÇOS". Um logo cortado ao
   meio é pior que um enquadramento menos convencional.
   O custo está nas 11 fotos publicadas com proporção abaixo de 1,7, que passam a
   perder até 30% da altura em vez de ~11%. Foram conferidas uma a uma no navegador:
   são quase todas talude e área aberta, assunto que o corte mais largo até favorece.
   O hero não entra nisso — usa `.hero__fundo`, que não declara proporção.
   O teto em --foto-max impede exibir foto acima do tamanho natural. */
.grade-fotos {
  display: grid; gap: var(--esp-5); margin-top: var(--esp-6);
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
}
/* O teto de 615px vai no item, nao na trilha: com `minmax(240px, 615px)` o
   navegador conta as colunas pelo maximo e cabe uma so, empilhando fotos enormes. */
.foto { max-width: var(--foto-max); }
.foto figure { margin: 0; }

.foto img { border-radius: var(--raio); aspect-ratio: 1.9; object-fit: cover; background: var(--papel-alt); }

/* Foto em pé. Enquadrar retrato num 3/2 deixaria só uma faixa horizontal do meio,
   e deixá-la na proporção nativa faria uma foto de 1000x2059 ocupar meia tela.
   3/4 é a proporção de retrato, e o teto de largura mantém a coluna equilibrada
   ao lado das paisagens.
   Precisa vir DEPOIS de `.foto img`: mesma especificidade, quem vence é a ordem. */
.foto--retrato { max-width: var(--foto-retrato-max); }
.foto--retrato img { aspect-ratio: 3/4; }
.foto figcaption { margin-top: var(--esp-3); font-size: var(--t-xs); color: var(--tinta-suave); line-height: 1.45; }

/* --- Bloco alternado: texto de um lado, foto do outro ---
   Usado na Engenharia Civil. A versão anterior era texto empilhado e todas as
   fotos numa galeria no fim; lia como duas páginas coladas e não segurava quem
   estava rolando. Aqui cada capacidade aparece junto da foto que a comprova.
   O zigue-zague vem de `.bloco--invertido`, que troca a ordem no desktop. No
   celular a ordem visual seria imprevisível, então lá é sempre texto e foto
   empilhados na ordem do HTML. */
.bloco { padding-block: var(--esp-7); border-top: 1px solid var(--linha); }
.bloco__grade {
  display: grid; gap: var(--esp-5); align-items: center;
  grid-template-columns: minmax(0, 1fr);
}
@media (min-width: 900px) {
  .bloco__grade { grid-template-columns: 1fr 1fr; gap: var(--esp-7); }
  /* `order` só na coluna de texto: mexer nas duas é redundante e uma acaba
     desfazendo a outra quando o bloco tem mais de dois filhos. */
  .bloco--invertido .bloco__texto { order: 2; }
}
.bloco__texto h2 { font-size: var(--t-xl); }
.bloco__texto p { margin-top: var(--esp-4); }
.bloco__foto figure { margin: 0; }
/* Mesma proporção e mesmo teto das fotos em pé do resto do site. Chegou a ser
   4/5 aqui — proporção que não existia em lugar nenhum, inventada só para
   encolher a foto quando o problema era o teto de largura, não a proporção.
   Duas proporções bastam para o site inteiro: 1,9 para paisagem (a nativa do
   acervo) e 3/4 para retrato. Uma terceira só faria o leitor sentir que algo
   está fora de esquadro sem saber dizer o quê. */
.bloco__foto img {
  width: 100%; max-width: var(--foto-retrato-max);
  border-radius: var(--raio); aspect-ratio: 3/4;
  object-fit: cover; background: var(--papel-alt);
}
.bloco__foto figcaption { max-width: var(--foto-retrato-max); }
.bloco__foto figcaption {
  margin-top: var(--esp-3); font-size: var(--t-xs);
  color: var(--tinta-suave); line-height: 1.45;
}
/* Faixa de apoio dentro de um bloco, para a capacidade que tem mais material
   fotográfico do que cabe ao lado do texto. */
.bloco__apoio { margin-top: var(--esp-6); }

/* --- Chamada e botão --- */
.chamada { background: var(--verde-escuro); color: #fff; padding-block: var(--esp-8); }
.chamada h2, .chamada p { color: #fff; }
.chamada p { color: rgba(255,255,255,.85); margin-top: var(--esp-4); }
.botao {
  display: inline-block; margin-top: var(--esp-5);
  background: var(--verde); color: #fff; text-decoration: none;
  padding: var(--esp-3) var(--esp-6); border-radius: var(--raio);
  font-weight: 600; font-size: var(--t-sm); border: 1px solid var(--verde);
  transition: var(--transicao); cursor: pointer;
}
.botao:hover { background: var(--verde-claro); border-color: var(--verde-claro); color: #fff; }
.chamada .botao { background: #fff; color: var(--verde-escuro); border-color: #fff; }
.chamada .botao:hover { background: var(--papel-alt); color: var(--verde-escuro); }

/* --- Lista marcada --- */
.lista-marcada { list-style: none; padding: 0; }
.lista-marcada li { padding-left: var(--esp-5); position: relative; }
.lista-marcada li::before {
  content: ""; position: absolute; left: 0; top: .62em;
  width: 8px; height: 8px; background: var(--verde);
}

/* --- Clientes e parceiros ---
   Cartões em vez de lista com marcadores. Uma lista vertical de seis nomes lê
   como anexo de proposta; em grade, os nomes ganham peso visual sem depender de
   logotipo — que exigiria autorização de uso de marca de cada empresa.
   Serifada e em verde escuro: é a mesma família dos títulos, e trata o nome do
   cliente como afirmação, não como item de inventário. */
.clientes {
  list-style: none; padding: 0; margin-top: var(--esp-6);
  display: grid; gap: var(--esp-4);
  /* 150px e não 180px: é o que faz caber duas colunas num celular de 390px. Com
     180px cai para uma coluna só, e seis cartões empilhados viram 560px de
     rolagem para uma lista de nomes. Em duas colunas são 325px. No desktop não
     muda nada — são seis itens e sobra largura para os seis de qualquer jeito. */
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
}
/* `li` herda `max-width: var(--medida)`, `margin-top` entre irmãos e o
   `text-align: justify` do texto corrido. Nada disso serve num cartão. */
.clientes li {
  margin: 0; max-width: none; padding: var(--esp-5) var(--esp-4);
  background: var(--papel); border: 1px solid var(--linha);
  border-radius: var(--raio);
  display: flex; align-items: center; justify-content: center;
  min-height: 5rem; text-align: center;
  font-family: var(--fonte-titulo); font-size: var(--t-md);
  font-weight: 600; color: var(--verde-escuro);
  -webkit-hyphens: manual; hyphens: manual;
}

/* --- Formulário --- */
.formulario { display: grid; gap: var(--esp-4); max-width: 34rem; }
.campo { display: grid; gap: var(--esp-2); }
.campo label { font-size: var(--t-sm); font-weight: 600; }
.campo input, .campo textarea, .campo select {
  font: inherit; font-size: var(--t-base); padding: var(--esp-3);
  border: 1px solid var(--linha); border-radius: var(--raio);
  background: var(--papel); color: var(--tinta);
}
.campo textarea { min-height: 8rem; resize: vertical; }
.formulario__aviso { font-size: var(--t-xs); color: var(--tinta-suave); }

/* Armadilha de spam. Fora da tela e não `display: none`: robô de spam aprendeu a
   pular campo com display none, mas continua preenchendo o que está só deslocado.
   O `aria-hidden` e o `tabindex="-1"` no HTML mantêm leitor de tela e teclado
   longe daqui — de outro modo a defesa contra robô viraria armadilha para quem
   navega sem enxergar a tela. */
.armadilha { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

/* --- Rodapé --- */
.rodape { background: var(--verde-escuro); color: rgba(255,255,255,.82); padding-block: var(--esp-7); font-size: var(--t-sm); }
.rodape__grade { display: grid; gap: var(--esp-6); grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); }
/* h2 e não h4: o rodapé é igual em toda página, e com h4 a sequência saltaria de
   h1 para h4 em qualquer página que ainda não tenha seções. Rodapé cuja validade
   depende do conteúdo do main é frágil. */
.rodape h2 {
  color: #fff; font-size: var(--t-xs); letter-spacing: .1em; text-transform: uppercase;
  font-family: var(--fonte-texto); font-weight: 600; line-height: 1.4;
}
.rodape p, .rodape li { color: rgba(255,255,255,.82); max-width: 32ch; margin-top: var(--esp-3); }
.rodape a { color: #fff; }
.rodape__base { margin-top: var(--esp-6); padding-top: var(--esp-5); border-top: 1px solid rgba(255,255,255,.16); font-size: var(--t-xs); }