/* GITEC — estilos base e componentes */

*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  background: var(--bg);
  color: var(--texto);
  font-family: var(--fonte);
  font-size: var(--t-base);
  line-height: var(--entrelinha);
  -webkit-font-smoothing: antialiased;
}

h1,
h2,
h3,
h4 {
  color: var(--titulo);
  font-weight: var(--peso-forte);
  line-height: var(--entrelinha-apertada);
  letter-spacing: var(--espacamento-titulo);
  margin: 0 0 var(--e-4);
  text-wrap: balance;
}

h1 { font-size: var(--t-2xl); font-weight: var(--peso-extra); }
h2 { font-size: var(--t-xl); }
h3 { font-size: var(--t-lg); }

p {
  margin: 0 0 var(--e-4);
  max-width: var(--largura-texto);
  text-wrap: pretty;
}

a {
  color: var(--destaque);
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
  transition: color var(--transicao);
}

a:hover { color: var(--caramelo-forte); }

img {
  max-width: 100%;
  height: auto;
  display: block;
}

ul { margin: 0; padding: 0; list-style: none; }

:focus-visible {
  outline: 3px solid var(--caramelo);
  outline-offset: 3px;
  border-radius: var(--raio-sm);
}

/* ---------- utilitários ---------- */

.container {
  width: 100%;
  max-width: var(--largura-max);
  margin-inline: auto;
  padding-inline: var(--respiro-lateral);
}

.secao { padding-block: var(--secao-y); }
.secao--alt { background: var(--bg-alt); }

.rotulo {
  display: block;
  color: var(--destaque);
  font-size: var(--t-xs);
  font-weight: var(--peso-forte);
  letter-spacing: var(--espacamento-rotulo);
  text-transform: uppercase;
  margin-bottom: var(--e-3);
}

.destaque { color: var(--destaque); }
.texto-suave { color: var(--texto-suave); }

.pular-para-conteudo {
  position: absolute;
  left: -9999px;
  top: 0;
  background: var(--caramelo);
  color: var(--marinho-profundo);
  padding: var(--e-3) var(--e-5);
  font-weight: var(--peso-forte);
  z-index: 200;
}

.pular-para-conteudo:focus { left: var(--e-4); top: var(--e-4); }

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* ---------- botões ---------- */

.btn {
  display: inline-flex;
  align-items: center;
  gap: var(--e-2);
  padding: 0.8rem 1.5rem;
  border-radius: var(--raio-sm);
  font-size: var(--t-sm);
  font-weight: var(--peso-forte);
  text-decoration: none;
  border: 2px solid transparent;
  cursor: pointer;
  transition: background var(--transicao), color var(--transicao),
    border-color var(--transicao), transform var(--transicao);
}

.btn:hover { transform: translateY(-2px); }

.btn--primario {
  background: var(--caramelo);
  color: var(--marinho-profundo);
}

.btn--primario:hover {
  background: var(--caramelo-forte);
  color: var(--marinho-profundo);
}

.btn--contorno {
  border-color: var(--caramelo);
  color: var(--caramelo);
}

.btn--contorno:hover {
  background: var(--caramelo);
  color: var(--marinho-profundo);
}

/* ---------- cabeçalho ---------- */

.cabecalho {
  position: sticky;
  top: 0;
  z-index: 100;
  background: rgb(22 41 63 / 0.92);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid rgb(54 90 128 / 0.4);
}

.cabecalho__interno {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--e-5);
  min-height: 68px;
}

.cabecalho__logo img { height: 38px; width: auto; }

.nav__lista {
  display: flex;
  align-items: center;
  gap: var(--e-5);
}

.nav__link {
  color: var(--branco-quente);
  font-size: var(--t-sm);
  font-weight: var(--peso-medio);
  text-decoration: none;
  padding-block: var(--e-2);
  border-bottom: 2px solid transparent;
}

.nav__link:hover,
.nav__link[aria-current="page"] {
  color: var(--caramelo);
  border-bottom-color: var(--caramelo);
}

/* Área do cliente: leva para fora do site (cliente.gitec.net.br), por isso tem
   aparência de botão e não de mais um item do menu. */
.nav__link--cliente {
  color: var(--caramelo);
  border: 1px solid var(--caramelo);
  border-radius: var(--raio-pill);
  padding: var(--e-2) var(--e-4);
}

.nav__link--cliente:hover {
  background: var(--caramelo);
  color: var(--marinho-profundo);
  border-color: var(--caramelo);
}

.nav__alternar {
  display: none;
  background: none;
  border: 0;
  color: var(--branco);
  padding: var(--e-2);
  cursor: pointer;
}

/* ---------- hero ---------- */

.hero {
  position: relative;
  display: grid;
  align-items: center;
  min-height: clamp(420px, 62vh, 620px);
  overflow: hidden;
  background: var(--marinho-profundo);
}

/* Duas camadas empilhadas se revezam no rodízio: a de baixo já carrega a
   próxima obra e sobe pela opacidade, sem piscar. */
.hero__fundo {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
  transition: opacity 1200ms ease-in-out;
}

.hero__fundo--ativa { opacity: 0.55; }

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

.hero::after {
  content: "";
  position: absolute;
  inset: 0;
  /* garante contraste do texto sobre qualquer obra sorteada:
     mais opaco à esquerda, onde fica o título */
  background: linear-gradient(
    100deg,
    rgb(22 41 63 / 0.94) 0%,
    rgb(22 41 63 / 0.86) 50%,
    rgb(22 41 63 / 0.74) 100%
  );
}

/* A entrada é a única seção que rompe a largura máxima do site: as frentes de
   atuação vão até a beirada direita da tela. O recuo da esquerda é calculado
   para continuar alinhado com o resto da página — se fosse simétrico, o título
   sairia do prumo em relação às seções de baixo. */
.hero__conteudo {
  position: relative;
  z-index: 1;
  max-width: none;
  padding-block: var(--e-8);
  padding-inline:
    max(var(--respiro-lateral), calc((100% - var(--largura-max)) / 2 + var(--respiro-lateral)))
    clamp(var(--respiro-lateral), 7vw, 9rem);
}

/* duas colunas: discurso à esquerda, frentes de atuação encostadas à direita */
.hero__grade {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, auto);
  gap: var(--e-7);
  align-items: center;
}

.hero__titulo {
  max-width: 15ch;
  margin-bottom: var(--e-4);
}

.hero__subtitulo-forte {
  font-size: var(--t-lg);
  font-weight: var(--peso-forte);
  color: var(--caramelo);
  line-height: 1.25;
  margin: 0 0 var(--e-5);
  max-width: 22ch;
}

/* bloco das frentes de atuação */
/* 46ch é a medida que mantém cada frente em duas linhas. Estreitar joga a
   linha do SPDA para três e desalinha o bloco. */
.hero__frentes {
  justify-self: end;
  max-width: 46ch;
  border-left: 3px solid var(--caramelo);
  padding-left: var(--e-5);
}

.hero__frentes-lista {
  display: flex;
  flex-direction: column;
  gap: var(--e-4);
}

.hero__frente {
  font-size: var(--t-lg);
  font-weight: var(--peso-forte);
  color: var(--branco);
  line-height: 1.25;
}

@media (max-width: 900px) {
  /* em coluna única não há bloco à direita para afastar da borda: o recuo extra
     só deixaria a entrada fora de esquadro com o resto da página */
  .hero__conteudo {
    padding-inline-end: var(--respiro-lateral);
  }

  .hero__grade {
    grid-template-columns: 1fr;
    gap: var(--e-6);
  }

  /* em coluna única o bloco volta a ocupar a largura toda: encostar à direita
     só faz sentido enquanto existem duas colunas */
  .hero__frentes {
    justify-self: stretch;
    max-width: none;
    border-left: 0;
    border-top: 2px solid var(--caramelo);
    padding-left: 0;
    padding-top: var(--e-5);
  }

  .hero__frentes-lista {
    gap: var(--e-3);
  }

  .hero__frente { font-size: var(--t-md); }
}

/* as três afirmações da entrada, uma por linha */
.hero__linhas {
  display: flex;
  flex-direction: column;
  gap: var(--e-3);
  margin: 0 0 var(--e-6);
  max-width: 46ch;
}

/* O traço é posicionado em absoluto — como item de flex ele quebraria a linha
   antes de qualquer elemento inline do texto (o <strong>BIM</strong>). */
.hero__linha {
  position: relative;
  margin: 0;
  padding-left: 34px;
  font-size: var(--t-md);
  font-weight: var(--peso-medio);
  color: var(--texto);
  line-height: 1.4;
  max-width: none;
}

.hero__linha::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.68em;
  width: 18px;
  height: 2px;
  background: var(--caramelo);
}

.hero__acoes {
  display: flex;
  flex-wrap: wrap;
  gap: var(--e-3);
}

.btn--grande {
  padding: 1rem 2rem;
  font-size: var(--t-base);
}

/* ---------- ênfase da área de serviços ---------- */

.secao--enfase {
  position: relative;
  background: var(--bg-alt);
}

.secao--enfase::before {
  content: "";
  position: absolute;
  inset-inline: 0;
  top: 0;
  height: 3px;
  background: linear-gradient(90deg, var(--caramelo), transparent 70%);
}

.secao__cabecalho {
  max-width: 62ch;
  margin-bottom: var(--e-7);
}

/* Todos os títulos de seção com o mesmo peso, tamanho e caixa.
   A caixa alta vem do CSS, não do texto — leitores de tela e o Google
   continuam recebendo a grafia normal. */
.secao > .container > .secao__cabecalho > h2,
.secao > .container > .revelar > h2,
.secao > .container > h2 {
  font-size: var(--t-xl);
  font-weight: var(--peso-extra);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  margin-bottom: var(--e-4);
}

/* parágrafo de abertura, maior que o corpo */
.chamada {
  font-size: var(--t-md);
  line-height: 1.6;
  color: var(--texto);
  max-width: 60ch;
}

/* Mesma soltura do parágrafo de fecho de "A empresa": o texto acompanha a
   largura da seção em vez dos 60 caracteres de leitura, ficando alinhado com
   os cartões logo abaixo.

   Solta as duas travas — a do parágrafo e a do cabeçalho que o contém. Mexer
   só na de baixo não adianta: o filho não passa da largura do pai. */
.chamada--larga {
  max-width: none;
}

.secao__cabecalho--largo {
  max-width: none;
}

.chamada strong {
  color: var(--caramelo);
  font-weight: var(--peso-forte);
}

.chamada__abertura {
  display: block;
  margin-bottom: var(--e-2);
}

/* ---------- grade de cards ---------- */

.grade {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr));
  gap: var(--e-4);
}

.card {
  background: var(--superficie);
  border-radius: var(--raio);
  border-top: 3px solid var(--caramelo);
  padding: var(--e-5);
  transition: transform var(--transicao), box-shadow var(--transicao);
}

.card:hover {
  transform: translateY(-4px);
  box-shadow: var(--sombra-alta);
}

.card__titulo {
  color: var(--destaque);
  font-size: var(--t-md);
  margin-bottom: var(--e-2);
}

.card__texto {
  font-size: var(--t-sm);
  color: var(--texto-suave);
  margin: 0;
}

.card__link {
  display: inline-block;
  margin-top: var(--e-3);
  font-size: var(--t-sm);
  font-weight: var(--peso-forte);
  text-decoration: none;
}

/* ---------- grade das frentes de projeto ---------- */

/* Os cards não têm mais texto de apoio: o nome sozinho precisa de outro
   ancoradouro visual, e é isso que o ícone faz. Quatro colunas em tela cheia
   fecham as 8 frentes em duas fileiras exatas — por isso o mínimo é 240px e
   não os 280px da grade genérica, que deixaria uma fileira de 5 + 3. */
.grade--projetos {
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr));
  list-style: none;
  padding: 0;
  margin: 0;
}

.card--projeto {
  display: grid;
  grid-template-rows: auto 1fr;
  justify-items: center;
  align-content: start;
  gap: var(--e-3);
  padding-block: var(--e-5);
  text-align: center;
  /* o traço superior sai: com 8 ícones em caramelo a faixa vira excesso */
  border-top: 0;
  border: 1px solid rgb(54 90 128 / 0.5);
}

.card__icone {
  display: grid;
  place-items: center;
  width: 54px;
  height: 54px;
  border-radius: var(--raio-pill);
  color: var(--caramelo);
  background: rgb(232 183 122 / 0.1);
  border: 1px solid rgb(232 183 122 / 0.32);
  transition: background var(--transicao), border-color var(--transicao);
}

.card__icone svg {
  width: 27px;
  height: 27px;
}

.card--projeto .card__titulo {
  align-self: center;
  margin: 0;
  font-size: var(--t-base);
  line-height: 1.35;
  color: var(--titulo);
}

.card--projeto:hover {
  border-color: var(--caramelo);
}

.card--projeto:hover .card__icone {
  background: rgb(232 183 122 / 0.2);
  border-color: var(--caramelo);
}

/* ---------- lista de vantagens ---------- */

.vantagens {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr));
  gap: var(--e-4) var(--e-6);
}

.vantagem {
  display: flex;
  gap: var(--e-3);
  align-items: flex-start;
  font-size: var(--t-sm);
}

.vantagem::before {
  content: "";
  flex-shrink: 0;
  width: 8px;
  height: 8px;
  margin-top: 0.55em;
  border-radius: 50%;
  background: var(--caramelo);
}

/* ---------- carrossel do portfólio ---------- */

/* Ocupa a largura total da seção. Fica fora do .container de propósito, então
   já nasce full-bleed — usar 100vw aqui criaria rolagem horizontal, porque
   100vw inclui a largura da barra de rolagem. */
.sangria-total {
  width: 100%;
}

.carrossel {
  position: relative;
}

.carrossel__trilho {
  display: flex;
  gap: 2px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  scrollbar-width: none;
  -ms-overflow-style: none;
  overscroll-behavior-x: contain;
}

.carrossel__trilho::-webkit-scrollbar { display: none; }

/* 3 por tela no desktop; ver consultas de mídia abaixo */
.carrossel__slide {
  flex: 0 0 calc((100% - 4px) / 3);
  scroll-snap-align: start;
}

/* setas de navegação */
.carrossel__seta {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 3;
  display: grid;
  place-items: center;
  width: clamp(44px, 4.5vw, 68px);
  aspect-ratio: 1;
  border: 0;
  border-radius: 50%;
  background: rgb(22 41 63 / 0.42);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  color: var(--branco-quente);
  cursor: pointer;
  transition: background var(--transicao), opacity var(--transicao),
    transform var(--transicao);
}

.carrossel__seta:hover:not(:disabled) {
  background: rgb(22 41 63 / 0.72);
  transform: translateY(-50%) scale(1.06);
}

.carrossel__seta:disabled {
  opacity: 0.25;
  cursor: default;
}

.carrossel__seta svg {
  width: 45%;
  height: 45%;
}

.carrossel__seta--anterior { left: clamp(0.5rem, 1.6vw, 1.5rem); }
.carrossel__seta--proxima { right: clamp(0.5rem, 1.6vw, 1.5rem); }

/* ---------- paginação numérica ---------- */

.paginacao {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: var(--e-2);
  margin-top: var(--e-5);
}

.paginacao__botao {
  min-width: 2.4rem;
  padding: 0.4rem 0.6rem;
  border: 1px solid var(--borda);
  border-radius: var(--raio-sm);
  background: transparent;
  color: var(--texto-suave);
  font-family: inherit;
  font-size: var(--t-sm);
  font-weight: var(--peso-forte);
  cursor: pointer;
  transition: background var(--transicao), color var(--transicao),
    border-color var(--transicao);
}

.paginacao__botao:hover {
  border-color: var(--caramelo);
  color: var(--caramelo);
}

.paginacao__botao[aria-current="true"] {
  background: var(--caramelo);
  border-color: var(--caramelo);
  color: var(--marinho-profundo);
}

.paginacao__reticencias {
  color: var(--texto-suave);
  padding-inline: var(--e-1);
  user-select: none;
}

/* ---------- cartão da obra ---------- */

.projeto {
  position: relative;
  margin: 0;
  overflow: hidden;
  aspect-ratio: 4 / 3;
  background: var(--marinho-profundo);
  isolation: isolate;
}

.projeto img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 500ms cubic-bezier(0.4, 0, 0.2, 1);
}

/* Pista discreta no canto: sinaliza que há informação sob o cursor.
   Some quando o painel abre. */
.projeto__pista {
  position: absolute;
  top: var(--e-3);
  right: var(--e-3);
  z-index: 2;
  /* oculta por padrão; só aparece onde existe hover para revelar o painel
     (ver a consulta de mídia adiante) — assim a pista nunca sobra numa tela
     de toque, onde o painel já está aberto. */
  display: none;
  place-items: center;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: rgb(22 41 63 / 0.45);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  color: var(--branco-quente);
  pointer-events: none;
  transition: opacity var(--transicao);
}

.projeto__pista svg {
  width: 14px;
  height: 14px;
}

.projeto:hover .projeto__pista,
.projeto:focus-within .projeto__pista {
  opacity: 0;
}

/* Painel translúcido com desfoque: a obra continua legível por trás,
   e o texto ganha contraste sem "chapar" a imagem. */
.projeto__info {
  position: absolute;
  inset-inline: 0;
  bottom: 0;
  padding: var(--e-4);
  background: rgb(22 41 63 / 0.55);
  backdrop-filter: blur(14px) saturate(1.1);
  -webkit-backdrop-filter: blur(14px) saturate(1.1);
  border-top: 1px solid rgb(232 183 122 / 0.28);
  color: var(--branco);
}

/* Se o navegador não suporta desfoque, escurece um pouco mais para manter o
   contraste do texto. */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .projeto__info {
    background: linear-gradient(to top, rgb(22 41 63 / 0.94), rgb(22 41 63 / 0.78));
  }
}

.projeto__titulo {
  font-size: var(--t-md);
  font-weight: var(--peso-forte);
  color: var(--branco);
  line-height: 1.25;
  margin: 0;
}

.projeto__local {
  display: block;
  font-size: var(--t-xs);
  font-weight: var(--peso-forte);
  letter-spacing: var(--espacamento-rotulo);
  text-transform: uppercase;
  color: var(--caramelo);
  margin-bottom: var(--e-1);
}

/* detalhe revelado ao passar o mouse */
.projeto__detalhe {
  margin-top: var(--e-3);
  padding-top: var(--e-3);
  border-top: 1px solid rgb(232 183 122 / 0.35);
}

.projeto__tags {
  display: flex;
  flex-wrap: wrap;
  gap: var(--e-2);
  margin-bottom: var(--e-2);
}

.projeto__tag {
  font-size: var(--t-xs);
  font-weight: var(--peso-forte);
  color: var(--marinho-profundo);
  background: var(--caramelo);
  padding: 0.15rem 0.6rem;
  border-radius: var(--raio-pill);
}

.projeto__escopo {
  font-size: var(--t-xs);
  line-height: 1.5;
  color: var(--texto-suave);
  margin: 0;
  max-width: none;
}

/* Com mouse, o painel fica oculto e sobe inteiro ao passar por cima — a imagem
   aparece limpa até o visitante demonstrar interesse. Em telas de toque não há
   hover, então o painel permanece sempre visível. */
@media (hover: hover) and (pointer: fine) {
  /* mesma condição que oculta o painel: a pista existe exatamente onde
     há um hover capaz de revelá-lo */
  .projeto__pista { display: grid; }

  .projeto__info {
    transform: translateY(101%);
    opacity: 0;
    transition: transform 420ms cubic-bezier(0.22, 1, 0.36, 1),
      opacity 260ms ease;
  }

  .projeto:hover img,
  .projeto:focus-within img {
    transform: scale(1.05);
  }

  .projeto:hover .projeto__info,
  .projeto:focus-within .projeto__info {
    transform: translateY(0);
    opacity: 1;
  }
}

/* ---------- quantidade de slides por tela ---------- */

/* São 3 obras por página em qualquer largura de tablet ou desktop.
   Abaixo de 640px cada obra ficaria com ~120px e a foto não se leria,
   então no celular passa a ser uma por vez — o número de páginas do
   carrossel se ajusta sozinho. */
@media (max-width: 640px) {
  .carrossel__slide { flex-basis: 100%; }
  .carrossel__seta { width: 40px; }
}

/* ---------- contato compacto ---------- */

/* Seção de apoio, não de destaque: menos respiro em cima e embaixo
   que as demais, para não competir com o portfólio e a empresa. */
.secao--compacta {
  padding-block: var(--e-7);
}

.secao__cabecalho--compacto {
  margin-bottom: var(--e-5);
}

.contatos {
  list-style: none;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr));
  gap: var(--e-4) var(--e-5);
  margin: 0;
  padding: 0;
}

.contato {
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
  padding-left: var(--e-3);
  border-left: 2px solid rgb(232 183 122 / 0.4);
}

.contato__rotulo {
  font-size: var(--t-xs);
  font-weight: var(--peso-forte);
  letter-spacing: var(--espacamento-rotulo);
  text-transform: uppercase;
  color: var(--caramelo);
}

/* um toque no número já abre a conversa — sem escolher entre ligar e WhatsApp */
.contato__valor {
  font-size: var(--t-base);
  font-weight: var(--peso-medio);
  color: var(--branco);
  text-decoration: none;
  width: fit-content;
}

.contato__valor:hover,
.contato__valor:focus-visible {
  color: var(--caramelo);
  text-decoration: underline;
  text-underline-offset: 3px;
}

.contato__texto {
  font-size: var(--t-sm);
  line-height: 1.5;
  color: var(--texto-suave);
}

/* mapa menor, já que a seção deixou de ser um bloco de destaque */
.secao--compacta .mapa iframe {
  height: clamp(200px, 28vw, 300px);
}

/* ---------- faixa de logos no rodapé da entrada ---------- */

/* Rolagem contínua sem pausa: o trilho traz a lista de logos duas vezes e
   desliza exatamente metade da própria largura. Ao chegar lá, a segunda
   cópia está na posição onde a primeira começou — a volta ao início é
   invisível e o laço parece infinito.

   A faixa ocupa metade da largura da tela, centralizada. É essa janela estreita
   que resolve a impressão de parceiro repetido: com 13 logos no ciclo e no
   máximo 8 visíveis de uma vez (medido a 1920px), as duas cópias do trilho
   nunca aparecem juntas. Alargar a faixa traz o problema de volta. */
.marquee {
  position: relative;
  z-index: 1;
  overflow: hidden;
  inline-size: 50%;
  min-inline-size: min(100%, 340px);
  margin-inline: auto;
  padding-block: var(--e-4);
  border-radius: var(--raio-lg);
  background: rgb(22 41 63 / 0.55);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  /* esmaece as pontas para o corte não ficar seco */
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
}

.marquee__trilho {
  display: flex;
  align-items: center;
  gap: var(--e-8);
  width: max-content;
  /* trilho mais longo por causa do respiro maior: sem alongar a duracao,
     as logos passariam correndo */
  animation: correr-logos 40s linear infinite;
}

/* Placa clara atras de cada logo.
   Sem ela "sempre colorido" nao funciona: das 13 logos, duas sao traco escuro
   sobre fundo transparente (a Guasii tem brilho 8, quase preto) e quatro tem
   fundo escuro proprio — todas sumiriam no marinho. O filtro cinza que havia
   antes escondia esse problema ao clarear tudo por igual. */
.marquee__item {
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  padding: var(--e-2) var(--e-4);
  border-radius: var(--raio);
  /* Translucida para nao pesar sobre as fotos das obras.
     Nao baixe muito de 0.85: e a placa que sustenta as logos de traco escuro
     sobre fundo transparente. Quanto mais o marinho atravessa, menor o
     contraste delas. */
  background: rgb(242 238 232 / 0.85);
  box-shadow: 0 2px 10px rgb(8 18 30 / 0.22);
}

.marquee__item img {
  height: 34px;
  width: auto;
  object-fit: contain;
}

@keyframes correr-logos {
  from { transform: translateX(0); }
  to { transform: translateX(-50%); }
}

@media (max-width: 640px) {
  .marquee { padding-block: var(--e-3); }
  .marquee__trilho { gap: var(--e-6); animation-duration: 28s; }
  .marquee__item { padding: var(--e-1) var(--e-3); }
  .marquee__item img { height: 26px; }
}

@media (prefers-reduced-motion: reduce) {
  .marquee__trilho { animation: none; }
  .marquee { overflow-x: auto; }
}

/* ---------- carrossel de logos de clientes ---------- */

.logos {
  position: relative;
  overflow: hidden;
}

.logos__trilho {
  display: flex;
  gap: var(--e-4);
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  scrollbar-width: none;
  padding-block: var(--e-2);
}

.logos__trilho::-webkit-scrollbar { display: none; }

.logos__item {
  flex: 0 0 calc((100% - 5 * var(--e-4)) / 6);
  scroll-snap-align: start;
  display: grid;
  place-items: center;
  aspect-ratio: 3 / 2;
  padding: var(--e-3);
  background: rgb(255 255 255 / 0.05);
  border: 1px solid rgb(54 90 128 / 0.35);
  border-radius: var(--raio-sm);
}

.logos__item img {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
  /* logos coloridas convivem melhor com o fundo escuro esmaecidas */
  opacity: 0.75;
  filter: grayscale(1) brightness(1.6);
  transition: opacity var(--transicao), filter var(--transicao);
}

.logos__item:hover img {
  opacity: 1;
  filter: none;
}

.logos__vazio {
  padding: var(--e-6);
  text-align: center;
  color: var(--texto-suave);
  font-size: var(--t-sm);
  border: 1px dashed var(--borda);
  border-radius: var(--raio);
}

@media (max-width: 1024px) {
  .logos__item { flex-basis: calc((100% - 3 * var(--e-4)) / 4); }
}

@media (max-width: 640px) {
  .logos__item { flex-basis: calc((100% - var(--e-4)) / 2); }
}

/* ---------- mapa ---------- */

.mapa {
  border: 1px solid var(--borda);
  border-radius: var(--raio);
  overflow: hidden;
  line-height: 0;
}

.mapa iframe {
  width: 100%;
  height: clamp(300px, 42vw, 460px);
  border: 0;
  filter: grayscale(0.35) contrast(1.05);
}

/* ---------- lista de execuções ---------- */

.execucoes {
  display: grid;
  gap: var(--e-3);
  margin: var(--e-5) 0 var(--e-6);
}

.execucao {
  display: flex;
  gap: var(--e-3);
  align-items: flex-start;
  padding: var(--e-4);
  background: var(--superficie);
  border-radius: var(--raio-sm);
  border-left: 3px solid var(--caramelo);
  font-size: var(--t-md);
}

.execucao svg {
  flex-shrink: 0;
  /* acompanha o corpo do texto: com 20px o visto ficava miúdo ao lado da fonte maior */
  width: 23px;
  height: 23px;
  color: var(--caramelo);
  margin-top: 0.15em;
}

.execucao strong { color: var(--branco); }

/* Fecha a seção no mesmo corpo dos itens acima, para não virar nota de rodapé.
   Solta o limite de 68 caracteres que vale para todo <p>: aqui o texto
   acompanha a largura da seção, alinhado com os cartões de serviço acima. */
.sobre__equipe {
  font-size: var(--t-md);
  max-width: none;
}

/* ---------- revelar ao rolar ---------- */

.revelar {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 600ms cubic-bezier(0.4, 0, 0.2, 1),
    transform 600ms cubic-bezier(0.4, 0, 0.2, 1);
}

.revelar.visivel {
  opacity: 1;
  transform: none;
}

/* escalonamento dos filhos dentro de uma grade */
.revelar-grupo > * {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 500ms cubic-bezier(0.4, 0, 0.2, 1),
    transform 500ms cubic-bezier(0.4, 0, 0.2, 1);
}

.revelar-grupo.visivel > * {
  opacity: 1;
  transform: none;
}

.revelar-grupo.visivel > *:nth-child(1) { transition-delay: 0ms; }
.revelar-grupo.visivel > *:nth-child(2) { transition-delay: 70ms; }
.revelar-grupo.visivel > *:nth-child(3) { transition-delay: 140ms; }
.revelar-grupo.visivel > *:nth-child(4) { transition-delay: 210ms; }
.revelar-grupo.visivel > *:nth-child(5) { transition-delay: 280ms; }
.revelar-grupo.visivel > *:nth-child(6) { transition-delay: 350ms; }
.revelar-grupo.visivel > *:nth-child(n + 7) { transition-delay: 420ms; }

@media (prefers-reduced-motion: reduce) {
  .revelar,
  .revelar-grupo > * {
    opacity: 1;
    transform: none;
    transition: none;
  }

  .projeto img,
  .projeto__info,
  .projeto__detalhe {
    transition: none;
  }
}

/* ---------- números / credenciais ---------- */

.numeros {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 200px), 1fr));
  gap: var(--e-5);
  text-align: center;
}

.numero__valor {
  display: block;
  color: var(--destaque);
  font-size: var(--t-2xl);
  font-weight: var(--peso-extra);
  line-height: 1.1;
}

.numero__rotulo {
  font-size: var(--t-sm);
  color: var(--texto-suave);
}

/* ---------- rodapé ---------- */

.rodape {
  background: var(--marinho-profundo);
  border-top: 1px solid var(--borda);
  padding-block: var(--e-7) var(--e-5);
}

.rodape__grade {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 230px), 1fr));
  gap: var(--e-6);
  margin-bottom: var(--e-6);
}

.rodape__titulo {
  color: var(--destaque);
  font-size: var(--t-xs);
  font-weight: var(--peso-forte);
  letter-spacing: var(--espacamento-rotulo);
  text-transform: uppercase;
  margin-bottom: var(--e-3);
}

.rodape__lista li { margin-bottom: var(--e-2); font-size: var(--t-sm); }
.rodape__lista a { color: var(--texto); text-decoration: none; }
.rodape__lista a:hover { color: var(--destaque); }

.rodape__base {
  border-top: 1px solid rgb(54 90 128 / 0.35);
  padding-top: var(--e-5);
  font-size: var(--t-xs);
  color: var(--texto-suave);
  display: flex;
  flex-wrap: wrap;
  gap: var(--e-3);
  justify-content: space-between;
}

/* responsáveis técnicos */
.rodape__responsaveis {
  list-style: none;
  margin: var(--e-5) 0 0;
  padding: var(--e-4) 0 0;
  border-top: 1px solid rgb(54 90 128 / 0.22);
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--e-2) var(--e-5);
  font-size: var(--t-xs);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--destaque);
}

/* ---------- botão flutuante do WhatsApp ---------- */

.whatsapp-flutuante {
  position: fixed;
  right: clamp(1rem, 3vw, 2rem);
  bottom: clamp(1rem, 3vw, 2rem);
  z-index: 90;
  display: inline-flex;
  align-items: center;
  gap: var(--e-2);
  background: #25d366;
  color: #0b2818;
  font-weight: var(--peso-forte);
  font-size: var(--t-sm);
  padding: 0.8rem 1.2rem;
  border-radius: var(--raio-pill);
  text-decoration: none;
  box-shadow: var(--sombra-alta);
  transition: transform var(--transicao);
}

.whatsapp-flutuante:hover {
  transform: scale(1.05);
  color: #0b2818;
}

/* ---------- responsivo ---------- */

@media (max-width: 820px) {
  .nav__alternar { display: block; }

  .nav__lista {
    position: absolute;
    inset-inline: 0;
    top: 100%;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    background: var(--marinho-profundo);
    border-bottom: 1px solid var(--borda);
    padding: var(--e-3) var(--respiro-lateral) var(--e-5);
    display: none;
  }

  .nav__lista[data-aberto="true"] { display: flex; }

  .nav__link {
    padding-block: var(--e-3);
    border-bottom: 1px solid rgb(54 90 128 / 0.3);
  }

  /* No menu empilhado o botão vira item de lista, como os outros */
  .nav__link--cliente {
    border: 0;
    border-bottom: 1px solid rgb(54 90 128 / 0.3);
    border-radius: 0;
    padding-inline: 0;
  }

  .whatsapp-flutuante span { display: none; }
  .whatsapp-flutuante { padding: 0.9rem; }
}

/* publicado em 22/09/2026 — botão Área do cliente */