/* Verde Kit Quero — componentes e layout
   Direção "Galeria verde": o verde-floresta é a parede da galeria, as fotos são as obras,
   as faixas de linho fazem papel de etiqueta. Títulos grandes à esquerda, grade assimétrica. */

:root {
  /* recuo lateral que centraliza o conteúdo sem precisar de wrappers */
  --recuo: max(var(--margem-lateral), calc((100% - var(--largura-max)) / 2));
}

/* ==========================================================================
   Peças básicas
   ========================================================================== */

.rotulo {
  font-size: var(--tam-legenda);
  font-weight: 500;
  letter-spacing: var(--espacamento-rotulo);
  text-transform: uppercase;
  color: var(--acento);
}

.botao {
  display: inline-flex;
  align-items: center;
  gap: .6em;
  padding: 1rem 1.6rem;
  border: 0;
  border-radius: var(--raio-pilula);
  background: var(--botao-fundo);
  color: var(--botao-texto);
  font-family: var(--fonte-texto);
  font-weight: 500;
  font-size: 1rem;
  line-height: 1.1;
  text-decoration: none;
  cursor: pointer;
  transition: background-color var(--duracao-curta) var(--ease-organico), transform var(--duracao-curta) var(--ease-organico);
}
.botao:hover { background: var(--cor-linho); }
.botao:active { transform: scale(.98); }

.link-seta {
  display: inline-flex;
  align-items: baseline;
  gap: .5em;
  font-weight: 500;
  text-decoration: none;
  border-bottom: 1px solid currentColor;
  padding-bottom: .15em;
}
.link-seta::after {
  content: "→";
  transition: transform var(--duracao-curta) var(--ease-organico);
}
.link-seta:hover::after { transform: translateX(4px); }

.secao__intro {
  margin-top: var(--espaco-m);
  max-width: 46ch;
  font-size: var(--tam-lead);
  color: var(--texto-suave);
}

/* Faixas claras (linho): invertem os papéis de cor */
.diferenciais,
.depoimentos-destaque,
section.lista-depoimentos,
.sobre-atuacao,
.texto-legal {
  --texto: var(--cor-floresta);
  --texto-suave: rgb(30 51 40 / .78);
  --acento: var(--cor-musgo);
  --linha: var(--linha-escura);
  background: var(--fundo-claro);
  color: var(--texto);
}

/* ==========================================================================
   Topo
   ========================================================================== */

.topo {
  position: sticky;
  top: 0;
  z-index: 50;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .75rem 2rem;
  padding: .85rem var(--recuo);
  background: rgb(30 51 40 / .94);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--linha);
}
.topo__marca { display: block; flex-shrink: 0; }
.topo__marca img { width: 128px; height: auto; }
.topo__nav { margin-left: auto; }
.topo__nav ul { display: flex; flex-wrap: wrap; gap: .25rem 1.75rem; margin: 0; padding: 0; list-style: none; }
.topo__nav a {
  display: inline-block;
  padding-block: .35rem;
  font-size: .95rem;
  text-decoration: none;
  color: var(--texto-suave);
  border-bottom: 1px solid transparent;
  transition: color var(--duracao-curta) var(--ease-organico), border-color var(--duracao-curta) var(--ease-organico);
}
.topo__nav a:hover { color: var(--texto); }
.topo__nav a[aria-current="page"] { color: var(--texto); border-bottom-color: var(--acento); }
.topo__cta { padding: .7rem 1.2rem; font-size: .9rem; }

@media (max-width: 860px) {
  .topo { gap: .5rem 1rem; }
  .topo__marca img { width: 108px; }
  .topo__cta { margin-left: auto; }
  /* sem JS, a navegação vira uma linha rolável abaixo da marca */
  .topo__nav { order: 3; width: 100%; margin: 0; overflow-x: auto; scrollbar-width: none; }
  .topo__nav ul { flex-wrap: nowrap; gap: 1.25rem; }
  .topo__nav a { white-space: nowrap; font-size: .9rem; }
}

/* Com JS: botão de menu e painel com os links (o botão é criado em main.js) */
.topo__menu { display: none; }
@media (max-width: 860px) {
  /* marca + WhatsApp + menu cabem numa linha a partir de 320px */
  .topo { column-gap: .75rem; }
  .topo__marca img { width: 100px; }
  .topo__cta { padding: .6rem .9rem; font-size: .875rem; }
  .topo__menu {
    display: inline-grid;
    place-items: center;
    flex-shrink: 0;
    width: 44px;
    height: 44px;
    padding: 0;
    border: 1px solid var(--linha);
    border-radius: var(--raio-pilula);
    background: transparent;
    cursor: pointer;
  }
  /* duas linhas que se cruzam em "x" quando o painel abre */
  .topo__menu-linhas,
  .topo__menu-linhas::before {
    display: block;
    width: 18px;
    height: 1.5px;
    background: var(--texto);
    transition: transform var(--duracao-curta) var(--ease-organico);
  }
  .topo__menu-linhas { transform: translateY(-3px); }
  .topo__menu-linhas::before { content: ""; transform: translateY(6px); }
  .topo[data-menu="aberto"] .topo__menu-linhas { transform: rotate(45deg); }
  .topo[data-menu="aberto"] .topo__menu-linhas::before { transform: rotate(-90deg); }

  .js .topo__nav { display: none; overflow: visible; }
  .js .topo[data-menu="aberto"] .topo__nav { display: block; }
  .js .topo__nav ul { flex-direction: column; gap: 0; padding-block: .5rem 1rem; }
  .js .topo__nav li { border-top: 1px solid var(--linha); }
  .js .topo__nav a {
    display: block;
    padding-block: .9rem;
    font-family: var(--fonte-titulo);
    font-size: 1.6rem;
    line-height: 1.1;
    border-bottom: 0;
  }
  .js .topo__nav a[aria-current="page"] { color: var(--acento); }
  .js .topo[data-menu="aberto"] .topo__nav li { animation: menu-entra var(--duracao-media) var(--ease-organico) both; }
  .js .topo[data-menu="aberto"] .topo__nav li:nth-child(2) { animation-delay: .04s; }
  .js .topo[data-menu="aberto"] .topo__nav li:nth-child(3) { animation-delay: .08s; }
  .js .topo[data-menu="aberto"] .topo__nav li:nth-child(4) { animation-delay: .12s; }
  .js .topo[data-menu="aberto"] .topo__nav li:nth-child(5) { animation-delay: .16s; }
}
/* WhatsApp fixo (criado em main.js): só no celular, e só um WhatsApp visível por vez */
.whatsapp-fixo { display: none; }
@media (max-width: 860px) {
  .whatsapp-fixo {
    position: fixed;
    right: var(--margem-lateral);
    bottom: calc(var(--margem-lateral) + env(safe-area-inset-bottom));
    z-index: 40;
    display: inline-flex;
    align-items: center;
    gap: .55rem;
    min-height: 48px;
    padding: .8rem 1.25rem .8rem 1rem;
    border-radius: var(--raio-pilula);
    background: var(--botao-fundo);
    color: var(--botao-texto);
    font-weight: 500;
    font-size: .95rem;
    line-height: 1;
    text-decoration: none;
    box-shadow: 0 10px 30px rgb(18 27 22 / .35);
    opacity: 0;
    visibility: hidden;
    transform: translateY(1rem);
    transition: opacity var(--duracao-curta) var(--ease-organico), transform var(--duracao-media) var(--ease-organico), visibility 0s var(--duracao-curta);
  }
  .topo[data-whatsapp="fixo"]:not([data-menu="aberto"]) ~ .whatsapp-fixo {
    opacity: 1;
    visibility: visible;
    transform: none;
    transition-delay: 0s;
  }
  /* o botão do topo sai de cena (sem mudar o layout do cabeçalho) enquanto o fixo aparece */
  .topo__cta { transition: opacity var(--duracao-curta) var(--ease-organico), visibility 0s; }
  .topo:is([data-whatsapp="fixo"], [data-whatsapp="secao"]):not([data-menu="aberto"]) .topo__cta {
    opacity: 0;
    visibility: hidden;
    transition: opacity var(--duracao-curta) var(--ease-organico), visibility 0s var(--duracao-curta);
  }
}

@media (max-width: 359px) {
  .topo { column-gap: .5rem; }
  .topo__marca img { width: 84px; }
  .topo__cta { padding-inline: .75rem; }
}
@keyframes menu-entra { from { opacity: 0; transform: translateY(-8px); } }

/* ==========================================================================
   Seções: ritmo vertical e recuo
   ========================================================================== */

main > section,
.trilha,
.case > *,
.case__navegacao {
  padding-inline: var(--recuo);
}
main > section { padding-block: var(--espaco-xl); }
/* o topo fixo não cobre o destino de âncoras, do "pular para o conteúdo" nem o foco do teclado */
html { scroll-padding-top: 7.5rem; }
main, main [id] { scroll-margin-top: 7.5rem; }
main > section > .rotulo + h1,
main > section > .rotulo + h2 { margin-top: var(--espaco-s); }

main > section > h2 { font-size: var(--tam-h2); max-width: 16ch; }

/* ==========================================================================
   Início — abertura
   ========================================================================== */

.abertura {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr);
  grid-template-rows: auto auto auto 1fr;
  column-gap: clamp(2rem, 6vw, 6rem);
  align-items: start;
  padding-top: clamp(2.5rem, 5vw, 4.5rem) !important;
  container-type: inline-size;
}
.abertura > :not(.abertura__imagem) { grid-column: 1; }
/* as cidades nunca se separam; em telas estreitas descem juntas para a segunda linha */
.abertura__local { white-space: nowrap; }
@media (max-width: 560px) {
  .abertura__separador { display: none; }
  .abertura__local { display: block; }
}
.abertura h1 {
  font-size: var(--tam-h1);
  line-height: .9;
  letter-spacing: -.02em;
  margin-top: var(--espaco-m) !important;
}
/* em duas colunas, o título acompanha a largura da coluna: "manutenção" (a palavra mais longa,
   ~5,4em) nunca invade a foto, em nenhuma largura de tela */
@media (min-width: 861px) {
  .abertura h1 { font-size: min(var(--tam-h1), 9cqi); }
}
/* notebooks de tela baixa: título e respiros encolhem para o botão de orçamento caber na primeira tela */
@media (min-width: 861px) and (max-height: 900px) {
  .abertura { padding-top: 2rem !important; }
  .abertura h1 { font-size: min(var(--tam-h1), 9cqi, 11.5svh); margin-top: var(--espaco-s) !important; }
  .abertura__acoes { margin-top: var(--espaco-m); }
}
.abertura__texto {
  margin-top: var(--espaco-m);
  max-width: 34ch;
  font-size: var(--tam-lead);
  color: var(--texto-suave);
}
.abertura__acoes {
  margin-top: var(--espaco-l);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 1rem 2rem;
}
.abertura__imagem {
  grid-column: 2;
  grid-row: 1 / -1;
  position: relative;
  aspect-ratio: 4 / 5;
  overflow: hidden;
  margin-top: clamp(0rem, 4vw, 3rem);
  /* em telas baixas (notebook), a foto não empurra a dobra para baixo */
  max-height: calc(100svh - 12rem);
}
.abertura__imagem img { object-position: 50% 35%; }
.abertura__imagem picture { height: 100%; }
.abertura__imagem img { width: 100%; height: 100%; object-fit: cover; }
.abertura__imagem figcaption {
  position: absolute;
  left: 0;
  bottom: 0;
  padding: .7rem 1rem .6rem;
  background: var(--cor-floresta);
  font-size: var(--tam-legenda);
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--texto-suave);
}

@media (max-width: 860px) {
  .abertura { grid-template-columns: 1fr; }
  .abertura__imagem { grid-column: 1; grid-row: auto; margin-top: var(--espaco-l); max-height: none; aspect-ratio: auto; overflow: visible; }
  .abertura__imagem picture { height: auto; aspect-ratio: 4 / 5; max-height: 70vh; overflow: hidden; }
  .abertura__imagem img { object-position: 50% 30%; }
  /* no celular a etiqueta cobriria quase toda a largura da foto: vira legenda abaixo dela */
  .abertura__imagem figcaption {
    position: static;
    padding: .9rem 0 0;
    background: none;
    color: var(--acento);
    letter-spacing: .12em;
  }
}

/* ==========================================================================
   Listas de argumentos (diferenciais e "por que")
   ========================================================================== */

.lista-itens {
  margin: var(--espaco-l) 0 0;
  padding: 0;
  list-style: none;
}
.lista-itens li { display: grid; gap: .6rem; align-content: start; }
.lista-itens h3 { font-size: var(--tam-h3); line-height: 1.1; }
.lista-itens p { color: var(--texto-suave); max-width: 44ch; }

/* Diferenciais: título à esquerda, itens empilhados com fios à direita */
.diferenciais {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.35fr);
  column-gap: clamp(2rem, 7vw, 7rem);
  align-items: start;
}
/* o título fica parado enquanto a lista passa ao lado */
.diferenciais__cabeca {
  grid-column: 1;
  grid-row: 1;
  position: sticky;
  top: 7.5rem;
}
.diferenciais__cabeca h2 { margin-top: var(--espaco-s); font-size: var(--tam-h2); max-width: 16ch; }
.diferenciais .secao__intro { margin-top: var(--espaco-m); }
.diferenciais .lista-itens {
  grid-column: 2;
  grid-row: 1;
  margin-top: 0;
  border-top: 1px solid var(--linha);
}
.diferenciais .lista-itens li {
  grid-template-columns: minmax(0, 14rem) minmax(0, 1fr);
  gap: 1.5rem;
  padding-block: 1.6rem;
  border-bottom: 1px solid var(--linha);
}
.diferenciais .lista-itens h3 { font-size: 1.4rem; }

@media (max-width: 860px) {
  .diferenciais { grid-template-columns: 1fr; }
  .diferenciais__cabeca { position: static; }
  .diferenciais .lista-itens { grid-column: 1; grid-row: auto; margin-top: var(--espaco-l); }
  .diferenciais .lista-itens li { grid-template-columns: 1fr; gap: .5rem; }
}

/* Por que plantas permanentes: faixa funda, quatro colunas separadas por fios */
.porque { background: var(--cor-floresta-funda); }
.porque .secao__intro { margin-top: var(--espaco-m); }
.porque .lista-itens {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  border-top: 1px solid var(--linha);
}
.porque .lista-itens li { padding: 2rem 1.5rem 0 0; }
.porque .lista-itens li + li { padding-left: 1.5rem; border-left: 1px solid var(--linha); }
.porque__destaque {
  margin-top: var(--espaco-l);
  max-width: 52ch;
  padding-left: 1.25rem;
  border-left: 2px solid var(--acento);
  font-family: var(--fonte-titulo);
  font-size: clamp(1.3rem, 1.1rem + .8vw, 1.7rem);
  line-height: 1.3;
}
.porque__destaque strong { font-weight: 500; color: var(--acento); }

@media (max-width: 1024px) {
  .porque .lista-itens { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .porque .lista-itens li:nth-child(3) { padding-left: 0; border-left: 0; }
  .porque .lista-itens li:nth-child(n + 3) { margin-top: 2rem; border-top: 1px solid var(--linha); }
}
@media (max-width: 560px) {
  .porque .lista-itens { grid-template-columns: 1fr; }
  .porque .lista-itens li,
  .porque .lista-itens li + li { padding: 1.5rem 0; border-left: 0; margin-top: 0; }
  .porque .lista-itens li + li { border-top: 1px solid var(--linha); }
}

/* ==========================================================================
   Grade de projetos (galeria assimétrica)
   ========================================================================== */

.grade-projetos {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(2rem, 4vw, 3.5rem) clamp(1rem, 2vw, 1.75rem);
  margin: var(--espaco-l) 0;
  padding: 0;
  list-style: none;
}
.cartao-projeto { min-width: 0; }
.cartao-projeto a { display: grid; gap: .9rem; text-decoration: none; }
/* todas as molduras iguais (3:4); a foto aparece inteira dentro dela, sem corte,
   e o verde da moldura preenche a sobra nas fotos mais quadradas ou mais estreitas */
.cartao-projeto picture { display: block; aspect-ratio: 3 / 4; overflow: hidden; background: var(--cor-floresta-media); }
.cartao-projeto img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  transition: transform var(--duracao-longa) var(--ease-organico);
}
.cartao-projeto a:hover img { transform: scale(1.04); }
.cartao-projeto__nome { font-size: clamp(1.3rem, 1.1rem + .6vw, 1.6rem); line-height: 1.1; }
.cartao-projeto__segmento {
  margin-top: -.5rem;
  font-size: var(--tam-legenda);
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--acento);
}

@media (max-width: 760px) {
  .grade-projetos { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 480px) {
  .grade-projetos { grid-template-columns: 1fr; }
}

/* Filtros por segmento (ativados pelo JS) */
/* só com JS (a classe .js entra no <head>, antes da primeira pintura: sem salto de layout) */
.filtros { display: none; flex-wrap: wrap; gap: .5rem; }
.js .filtros { display: flex; }
.filtros button {
  padding: .6rem 1.1rem;
  border: 1px solid var(--linha);
  border-radius: var(--raio-pilula);
  background: transparent;
  font-size: .9rem;
  cursor: pointer;
  transition: background-color var(--duracao-curta) var(--ease-organico), border-color var(--duracao-curta) var(--ease-organico), color var(--duracao-curta) var(--ease-organico);
}
.filtros button:hover { border-color: var(--acento); }
.filtros button[aria-pressed="true"] { background: var(--botao-fundo); border-color: var(--botao-fundo); color: var(--botao-texto); }
.cartao-projeto[hidden] { display: none; }
.portfolio { padding-top: 0 !important; }

/* ==========================================================================
   Depoimentos
   ========================================================================== */

.depoimento { display: grid; gap: 1.5rem; align-content: start; }
.depoimento blockquote { margin: 0; }
.depoimento blockquote p {
  font-family: var(--fonte-titulo);
  font-size: clamp(1.2rem, 1.05rem + .6vw, 1.5rem);
  line-height: 1.4;
  text-wrap: pretty;
}
.depoimento blockquote p::before { content: "“"; }
.depoimento blockquote p::after { content: "”"; }
.depoimento figcaption {
  display: grid;
  grid-template-columns: 56px minmax(0, 1fr);
  grid-template-rows: auto auto;
  column-gap: .9rem;
  align-items: center;
}
.depoimento__logo { grid-row: span 2; width: 56px; height: 56px; border-radius: 50%; overflow: hidden; background: var(--cor-linho); }
.depoimento__logo img { width: 100%; height: 100%; object-fit: cover; }
.depoimento__autor { font-weight: 500; line-height: 1.3; }
.depoimento__empresa { font-size: var(--tam-pequeno); color: var(--texto-suave); text-decoration: none; }
.depoimento__empresa:hover { text-decoration: underline; }

/* Início: depoimento principal com a foto do projeto de quem falou; o segundo vem menor, abaixo */
.depoimentos-destaque {
  display: grid;
  grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr);
  column-gap: clamp(2rem, 6vw, 6rem);
  align-items: start;
}
.depoimentos-destaque > :not(.depoimentos-destaque__foto) { grid-column: 1; }
.depoimentos-destaque > .link-seta { justify-self: start; }
.depoimentos-destaque__foto {
  grid-column: 2;
  grid-row: 1 / span 4;
  position: sticky;
  top: 7.5rem;
}
.depoimentos-destaque__foto a { display: grid; gap: .9rem; text-decoration: none; }
.depoimentos-destaque__foto picture { display: block; overflow: hidden; aspect-ratio: 4 / 5; max-height: calc(100svh - 12rem); }
.depoimentos-destaque__foto img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform var(--duracao-longa) var(--ease-organico);
}
.depoimentos-destaque__foto a:hover img { transform: scale(1.04); }
.depoimentos-destaque__foto figcaption {
  font-size: var(--tam-legenda);
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--acento);
}
.depoimentos-destaque .lista-depoimentos { display: grid; margin-block: var(--espaco-l); }
.depoimentos-destaque .depoimento + .depoimento {
  margin-top: var(--espaco-l);
  padding-top: var(--espaco-l);
  border-top: 1px solid var(--linha);
}
.depoimentos-destaque .depoimento:first-child blockquote p { font-size: clamp(1.3rem, 1.1rem + .8vw, 1.75rem); line-height: 1.35; }
.depoimentos-destaque .depoimento + .depoimento blockquote p { font-size: clamp(1.1rem, 1rem + .4vw, 1.3rem); }
@media (max-width: 860px) {
  .depoimentos-destaque { grid-template-columns: 1fr; }
  .depoimentos-destaque__foto { grid-column: 1; grid-row: auto; position: static; margin-top: var(--espaco-l); }
  .depoimentos-destaque__foto picture { aspect-ratio: 4 / 3; }
}

/* Página de depoimentos: lista editorial, alternando o lado */
section.lista-depoimentos { display: grid; gap: var(--espaco-xl); }
.lista-depoimentos__item { display: grid; gap: 1.25rem; max-width: 58ch; }
.lista-depoimentos__item:nth-child(even) { margin-left: auto; }
.lista-depoimentos__item .link-seta { justify-self: start; font-size: var(--tam-pequeno); }

/* ==========================================================================
   Sobre (resumo no início) e chamada final
   ========================================================================== */

.sobre-resumo {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  column-gap: clamp(2rem, 7vw, 7rem);
  row-gap: var(--espaco-m);
  align-items: end;
}
.sobre-resumo > .rotulo,
.sobre-resumo > h2 { grid-column: 1; }
.sobre-resumo > p:not(.rotulo) { grid-column: 2; grid-row: 2; max-width: 48ch; font-size: var(--tam-lead); color: var(--texto-suave); }
.sobre-resumo > .link-seta { grid-column: 2; justify-self: start; }
@media (max-width: 760px) {
  .sobre-resumo { grid-template-columns: 1fr; }
  .sobre-resumo > * { grid-column: 1 !important; grid-row: auto !important; }
}

.cta-final {
  background: var(--cor-floresta-media);
  display: grid;
  gap: var(--espaco-m);
  justify-items: start;
}
.cta-final h2 { font-size: var(--tam-h2); max-width: 14ch; }
.cta-final p { max-width: 46ch; font-size: var(--tam-lead); color: var(--texto-suave); }
.cta-final__acoes { display: flex; flex-wrap: wrap; align-items: center; gap: 1rem 2rem; margin-top: var(--espaco-s); }

/* Início: o convite divide a faixa com uma parede verde que vai até a borda da tela */
.cta-final--foto {
  --vao: clamp(2rem, 6vw, 6rem);
  position: relative;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  column-gap: var(--vao);
  align-content: center;
  min-height: min(44rem, 85svh);
}
.cta-final--foto > :not(.cta-final__foto) { grid-column: 1; }
/* a foto ocupa a metade direita da faixa, de cima a baixo, até a borda da tela */
.cta-final__foto {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  width: calc(50% - var(--vao) / 2);
  overflow: hidden;
}
.cta-final__foto picture { display: block; height: 100%; }
.cta-final__foto img { width: 100%; height: 100%; object-fit: cover; object-position: 30% 92%; }
@media (max-width: 860px) {
  .cta-final--foto { grid-template-columns: 1fr; min-height: 0; }
  .cta-final__foto {
    position: static;
    width: auto;
    aspect-ratio: 4 / 3;
    margin: var(--espaco-m) calc(-1 * var(--recuo)) calc(-1 * var(--espaco-xl));
  }
}

/* ==========================================================================
   Cabeçalho das páginas internas
   ========================================================================== */

.cabecalho-pagina { padding-bottom: var(--espaco-l) !important; }
.cabecalho-pagina h1 { font-size: clamp(2.8rem, 1.6rem + 5.5vw, 6.5rem); max-width: 14ch; }
.cabecalho-pagina__lead { margin-top: var(--espaco-m); max-width: 44ch; font-size: var(--tam-lead); color: var(--texto-suave); }
.cabecalho-pagina p + p { margin-top: var(--espaco-m); display: flex; gap: 2rem; flex-wrap: wrap; }

/* ==========================================================================
   Sobre nós
   ========================================================================== */

/* Texto institucional e vídeo lado a lado (mesmas trilhas laterais do contato) */
main:has(.sobre-video) {
  display: grid;
  grid-template-columns:
    [cheio-start] minmax(var(--margem-lateral), 1fr)
    [conteudo-start] minmax(0, calc(var(--largura-max) * .6)) minmax(0, calc(var(--largura-max) * .4)) [conteudo-end]
    minmax(var(--margem-lateral), 1fr) [cheio-end];
}
main:has(.sobre-video) > * { grid-column: cheio; }
main > .sobre-texto { grid-column: 2; padding: 0 clamp(2rem, 5vw, 5rem) var(--espaco-xl) 0; }
main > .sobre-video { grid-column: 3; padding: 0 0 var(--espaco-xl); }
@media (max-width: 860px) {
  main:has(.sobre-video) { grid-template-columns: [cheio-start] var(--margem-lateral) [conteudo-start] minmax(0, 1fr) [conteudo-end] var(--margem-lateral) [cheio-end]; }
  main > .sobre-texto,
  main > .sobre-video { grid-column: conteudo; padding-right: 0; }
}
.sobre-texto p {
  max-width: 26ch;
  font-family: var(--fonte-titulo);
  font-size: clamp(1.5rem, 1.1rem + 1.6vw, 2.4rem);
  line-height: 1.25;
}
.sobre-video video { width: 100%; max-width: 420px; aspect-ratio: 9 / 16; object-fit: cover; background: var(--cor-floresta-funda); }

.sobre-atuacao h2 { font-size: var(--tam-h3); }
.sobre-atuacao h2 + * { margin-top: var(--espaco-m); }
.sobre-atuacao * + h2 { margin-top: var(--espaco-l); }
.lista-segmentos { display: flex; flex-wrap: wrap; gap: .6rem; margin: 0; padding: 0; list-style: none; }
.lista-segmentos li { padding: .55rem 1.1rem; border: 1px solid var(--linha); border-radius: var(--raio-pilula); }
.sobre-atuacao > p { font-family: var(--fonte-titulo); font-size: var(--tam-h3); }
.sobre-projetos .grade-projetos { margin-bottom: var(--espaco-l); }

/* ==========================================================================
   Case
   ========================================================================== */

.trilha { padding-top: var(--espaco-m); }
.trilha ol { display: flex; flex-wrap: wrap; gap: .4rem; margin: 0; padding: 0; list-style: none; font-size: var(--tam-pequeno); color: var(--texto-suave); }
.trilha li + li::before { content: "/"; margin-right: .4rem; opacity: .5; }
.trilha a { text-decoration: none; }
.trilha a:hover { text-decoration: underline; }
.trilha a[aria-current="page"] { color: var(--texto); }

.case__cabecalho { padding-block: var(--espaco-l); display: grid; gap: var(--espaco-s); }
.case__cabecalho h1 { font-size: clamp(2.8rem, 1.6rem + 5.5vw, 6.5rem); }
.case__resumo { max-width: 46ch; font-size: var(--tam-lead); color: var(--texto-suave); margin-top: var(--espaco-xs); }

.case > .case__capa { padding-inline: 0; }
/* a capa mostra a foto inteira, na proporção dela (as fotos são verticais ou quadradas) */
.case__capa picture { display: block; width: fit-content; max-width: 100%; height: min(88vh, 900px); margin-inline: auto; overflow: hidden; background: var(--cor-floresta-media); }
.case__capa img { width: auto; max-width: 100%; height: 100%; object-fit: contain; }

.case__texto {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr);
  gap: var(--espaco-m) clamp(2rem, 7vw, 7rem);
  padding-block: var(--espaco-xl);
}
.case__texto h2 { font-size: var(--tam-h3); }
.case__texto p { font-size: var(--tam-lead); max-width: 52ch; }
.case__corpo { display: grid; gap: 1.25rem; }
/* cidade, ano e área: só aparecem quando preenchidos no painel */
.case__detalhes { display: flex; flex-wrap: wrap; gap: 1rem 2.5rem; margin: .75rem 0 0; padding-top: 1.25rem; border-top: 1px solid var(--linha); }
.case__detalhes dt { font-size: var(--tam-legenda); letter-spacing: .12em; text-transform: uppercase; color: var(--acento); }
.case__detalhes dd { margin: .25rem 0 0; }

.case__galeria { padding-bottom: var(--espaco-xl); }
.case__galeria h2 { font-size: var(--tam-h3); }
.case__galeria ul { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(1rem, 2vw, 1.75rem); margin: var(--espaco-m) 0 0; padding: 0; list-style: none; }
.case__galeria li:nth-child(even) { margin-top: clamp(0rem, 8vw, 6rem); }
.case__galeria li:only-child { grid-column: 1 / -1; max-width: 70%; }
.case__galeria picture { display: block; overflow: hidden; background: var(--cor-floresta-media); }
.case__galeria img { width: 100%; height: auto; }

.case__depoimento { padding-block: var(--espaco-xl); background: var(--cor-floresta-funda); }
.case__depoimento .depoimento { max-width: 60ch; }

.case__navegacao {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  border-top: 1px solid var(--linha);
}
.case__navegacao a {
  display: grid;
  gap: .4rem;
  padding-block: var(--espaco-l);
  font-family: var(--fonte-titulo);
  font-size: clamp(1.4rem, 1.1rem + 1.2vw, 2.2rem);
  line-height: 1.1;
  text-decoration: none;
  transition: color var(--duracao-curta) var(--ease-organico);
}
.case__navegacao a:hover { color: var(--acento); }
.case__navegacao a + a { text-align: right; padding-left: 1rem; border-left: 1px solid var(--linha); }
.case__navegacao span {
  font-family: var(--fonte-texto);
  font-size: var(--tam-legenda);
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--texto-suave);
}

@media (max-width: 760px) {
  .case__capa picture { height: 70vh; }
  .case__texto { grid-template-columns: 1fr; }
  .case__galeria ul { grid-template-columns: 1fr; }
  .case__galeria li:nth-child(even) { margin-top: 0; }
  .case__galeria li:only-child { max-width: none; }
}

/* ==========================================================================
   Contato
   ========================================================================== */

/* Canais e formulário lado a lado; as trilhas laterais reproduzem o --recuo das outras seções */
main:has(.contato-formulario) {
  display: grid;
  grid-template-columns:
    [cheio-start] minmax(var(--margem-lateral), 1fr)
    [conteudo-start] minmax(0, calc(var(--largura-max) * .4)) minmax(0, calc(var(--largura-max) * .6)) [conteudo-end]
    minmax(var(--margem-lateral), 1fr) [cheio-end];
}
main:has(.contato-formulario) > * { grid-column: cheio; }
main > .contato-canais { grid-column: 2; padding: 0 0 var(--espaco-xl); }
main > .contato-formulario { grid-column: 3; padding: 0 0 var(--espaco-xl) clamp(2rem, 5vw, 5rem); }

.contato-canais h2,
.contato-formulario h2,
.contato-mapa h2 { font-size: var(--tam-h3); margin-bottom: var(--espaco-m); }
.contato-canais ul { display: grid; gap: 1rem; margin: 0 0 var(--espaco-l); padding: 0; list-style: none; }
.contato-canais li span {
  display: block;
  font-size: var(--tam-legenda);
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--texto-suave);
}
.contato-canais li a:not(.botao) { font-size: 1.15rem; text-decoration: none; }
.contato-canais li a:not(.botao):hover { text-decoration: underline; }
.contato-canais address { font-style: normal; color: var(--texto-suave); margin-bottom: var(--espaco-s); }
.contato-canais > p { color: var(--texto-suave); }

.formulario { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.5rem 1.25rem; }
.campo { display: grid; gap: .45rem; align-content: start; }
.campo--largo,
.formulario__aviso,
.formulario__status { grid-column: 1 / -1; }
.campo label {
  font-size: var(--tam-legenda);
  font-weight: 500;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--texto-suave);
}
.campo input,
.campo select,
.campo textarea {
  width: 100%;
  padding: .85rem 1rem;
  border: 1px solid var(--linha);
  border-radius: 4px;
  background: var(--cor-floresta-media);
  color: var(--texto);
  transition: border-color var(--duracao-curta) var(--ease-organico);
}
.campo textarea { resize: vertical; min-height: 9rem; }
.campo input::placeholder { color: rgb(244 237 228 / .5); }
.campo input:hover,
.campo select:hover,
.campo textarea:hover { border-color: rgb(244 237 228 / .35); }
.campo input:focus-visible,
.campo select:focus-visible,
.campo textarea:focus-visible { outline: 2px solid var(--foco); outline-offset: 0; border-color: var(--foco); }
.campo__dica { font-size: var(--tam-pequeno); color: var(--texto-suave); }
.formulario__aviso { font-size: var(--tam-pequeno); color: var(--texto-suave); }
.formulario .botao { justify-self: start; }
.formulario__status:empty { display: none; }

.contato-mapa iframe { width: 100%; height: clamp(300px, 45vw, 480px); border: 0; filter: grayscale(.35) contrast(1.05); }
.contato-mapa .link-seta { margin-top: var(--espaco-s); }

@media (max-width: 860px) {
  main:has(.contato-formulario) { grid-template-columns: [cheio-start] var(--margem-lateral) [conteudo-start] minmax(0, 1fr) [conteudo-end] var(--margem-lateral) [cheio-end]; }
  main > .contato-canais,
  main > .contato-formulario { grid-column: conteudo; padding-left: 0; }
  .formulario { grid-template-columns: 1fr; }
}

/* ==========================================================================
   Texto legal
   ========================================================================== */

.texto-legal { padding: var(--espaco-xl) var(--recuo); }
.texto-legal > * { max-width: var(--medida-texto); }
.texto-legal h1 { font-size: var(--tam-h2); margin-bottom: var(--espaco-l); }
.texto-legal h2 { font-size: var(--tam-h3); margin-top: var(--espaco-l); margin-bottom: var(--espaco-s); }

/* ==========================================================================
   Rodapé
   ========================================================================== */

.rodape {
  display: grid;
  grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr) minmax(0, 1.2fr);
  gap: var(--espaco-l) clamp(2rem, 5vw, 5rem);
  padding: var(--espaco-xl) var(--recuo) var(--espaco-m);
  background: var(--cor-floresta-funda);
  font-size: var(--tam-pequeno);
}
.rodape__marca img { width: 150px; height: auto; margin-bottom: var(--espaco-s); }
.rodape__marca p { max-width: 26ch; font-family: var(--fonte-titulo); font-size: 1.3rem; line-height: 1.25; }
.rodape__titulo {
  font-family: var(--fonte-texto);
  font-size: var(--tam-legenda);
  font-weight: 500;
  letter-spacing: var(--espacamento-rotulo);
  text-transform: uppercase;
  color: var(--acento);
  margin-bottom: var(--espaco-s);
}
.rodape ul { display: grid; gap: .55rem; margin: 0; padding: 0; list-style: none; }
.rodape ul a { text-decoration: none; color: var(--texto-suave); }
.rodape ul a:hover { color: var(--texto); text-decoration: underline; }
.rodape address { margin-top: var(--espaco-m); font-style: normal; color: var(--texto-suave); }
.rodape__direitos { grid-column: 1 / -1; padding-top: var(--espaco-m); border-top: 1px solid var(--linha); color: var(--texto-suave); }

@media (max-width: 860px) {
  .rodape { grid-template-columns: 1fr 1fr; }
  .rodape__marca { grid-column: 1 / -1; }
}
@media (max-width: 480px) {
  .rodape { grid-template-columns: 1fr; }
}

/* ==========================================================================
   Ideia A: o painel se abre (módulos criados por js/animations.js)
   ========================================================================== */

.cartao-projeto picture,
.abertura__imagem picture,
[data-painel-rolagem] picture { position: relative; }

/* Antes do JS montar os módulos, a foto já fica coberta de verde (sem "piscar").
   Se o JS falhar, a cobertura some sozinha depois de 2,5 s. */
@media (prefers-reduced-motion: no-preference) {
  .js .cartao-projeto picture::after,
  .js .abertura__imagem picture::after,
  .js [data-painel-rolagem] picture::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 1;
    background: var(--cor-floresta-media);
    animation: painel-seguranca 0s 2.5s forwards;
  }
}
.js .painel-montado::after,
.painel-livre picture::after { display: none !important; }
@keyframes painel-seguranca { to { visibility: hidden; } }

.painel {
  position: absolute;
  inset: 0;
  z-index: 2;
  display: grid;
  grid-template-columns: repeat(var(--colunas), 1fr);
  grid-template-rows: repeat(var(--linhas), 1fr);
  pointer-events: none;
}
.painel__modulo {
  background-color: var(--m, var(--cor-floresta-media));
  /* textura fina e repetida sugerindo folhagem densa, sem imagem extra */
  background-image:
    radial-gradient(ellipse 40% 30% at 30% 40%, rgb(170 166 131 / .16), transparent),
    radial-gradient(ellipse 35% 45% at 70% 70%, rgb(18 27 22 / .45), transparent),
    radial-gradient(ellipse 30% 25% at 75% 20%, rgb(109 110 76 / .3), transparent);
  background-size: 13px 11px, 19px 17px, 23px 29px;
  box-shadow: inset 0 0 0 1px rgb(18 27 22 / .55);
  will-change: transform, opacity;
}

/* ==========================================================================
   Transição entre páginas: a foto do cartão cresce e vira a capa do case
   ========================================================================== */

@view-transition { navigation: auto; }
@media (prefers-reduced-motion: reduce) {
  @view-transition { navigation: none; }
}
.topo { view-transition-name: topo; }
::view-transition-group(*) {
  animation-duration: .75s;
  animation-timing-function: cubic-bezier(.22, 1, .36, 1);
}
::view-transition-old(root) { animation: .35s cubic-bezier(.7, 0, .2, 1) both vt-sai; }
::view-transition-new(root) { animation: .55s cubic-bezier(.22, 1, .36, 1) .1s both vt-entra; }
@keyframes vt-sai { to { opacity: 0; } }
@keyframes vt-entra { from { opacity: 0; transform: translateY(16px); } }

/* ==========================================================================
   Formulário: erros e status de envio
   ========================================================================== */

.campo [aria-invalid="true"] { border-color: #E8A99A; }
.campo__erro { font-size: var(--tam-pequeno); color: #F0B8AA; }
.formulario__status { padding: 1rem 1.25rem; border-left: 2px solid var(--acento); background: rgb(18 27 22 / .4); }
.formulario__status[data-estado="erro"] { border-left-color: #E8A99A; }
.formulario__status a { font-weight: 500; }
.formulario .botao:disabled { opacity: .6; cursor: progress; }
.campo-isca { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

/* ==========================================================================
   Lenis (rolagem suave) — regras do lenis.css 1.3.26
   ========================================================================== */

html.lenis, html.lenis body { height: auto; }
.lenis:not(.lenis-autoToggle).lenis-stopped { overflow: clip; }
.lenis [data-lenis-prevent] { overscroll-behavior: contain; }
.lenis.lenis-smooth iframe { pointer-events: none; }