:root {
  --azul-escuro: #001f3f;
  --verde: #84fa8a;
  --branco-sujo: #f6f7ed;
  --cinza: #8f8f8f;

  /* Guias do layout: banda esquerda 537 + banda direita 782 = 1319 de conteúdo */
  --content-max: 1319px;

  /* Respiro entre a coluna esquerda e a linha central */
  --col-gutter: clamp(20px, 4.2vw, 60px);

  /* Espaço entre os cards — usado também na conta do carrossel */
  --gap-cards: clamp(8px, 1.26vw, 18px);

  /* Respiro entre as seções — um valor só para toda a página */
  --espaco-secao: clamp(64px, 9.5vw, 140px);

  /* Quanto a cesta de limões passa da caixa do "sobre", em cima e embaixo.
     Medido em três larguras (1000/1224/1440px): 12,26 a 12,40vw, e trava
     acima de 1440, onde o conteúdo para de crescer. As seções vizinhas somam
     este valor à margem, senão a cesta encosta nelas. */
  --sangra-frutas: min(12.35vw, 178px);

  /* Quanto o lobo-guará desce abaixo da borda verde do "fale conosco".
     Na referência são 25px de um conteúdo de 858 — 2,9% da largura. */
  --sangra-lobo-baixo: min(2.68vw, 38px);

  /* Quanto ele sobe acima dela. Não dá para calcular em CSS, porque depende da
     altura da caixa verde, que muda com o texto — então é reta ajustada sobre
     medições: 94px em 900, 115 em 1000, 161 em 1224 e 203 em 1440, onde trava
     junto com o conteúdo. A seção soma isto à margem para não subir nos logos
     de clientes. */
  --sangra-lobo-cima: clamp(94px, 20.2vw - 88px, 203px);
}

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

body {
  font-family: 'Outfit', sans-serif;
  background: var(--branco-sujo);
  color: var(--azul-escuro);
  line-height: 1.45;
  font-size: clamp(15px, calc(10.71px + 1.143vw), 21px);
}

h1, h2, h3 {
  font-weight: 800;
  line-height: 1.1;
}

/* Peso fixo, não "bolder": o padrão do navegador é relativo ao pai, e com o
   corpo em Thin ele resultava em 400 — quase sem contraste. */
strong {
  font-weight: 700;
}

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

/* O <picture> só existe para oferecer o AVIF; quem o navegador desenha é o
   <img> dentro dele. Sem isto o picture viraria a caixa filha no lugar da
   imagem — item do flex, item da grade — e o layout inteiro se deslocaria.
   O do "sobre" é a exceção: lá ele é posicionado de propósito. */
picture:not(.sobre-frutas) {
  display: contents;
}

/* E os <source> precisam sair de cena junto. Sem a caixa do picture, eles
   sobem para o mesmo contexto de layout do <img> e viram itens de flex e de
   grade — de largura zero, mas cada um comendo um "gap". Na fileira de
   clientes isso dobrava a conta: 4 logos e 3 vãos viravam 4 logos e 7 vãos,
   e o Danone caía para a linha de baixo. Na grade do celular, os quatro logos
   iam parar todos na segunda coluna. */
picture > source {
  display: none;
}

.page {
  width: 92%;
  max-width: var(--content-max);
  margin: 0 auto;
}

/* ---------- Grid: linha central em 537/1319 ---------- */

.grid2 {
  display: grid;
  grid-template-columns: 537fr 782fr;
}

/* Conteúdo da coluna esquerda para antes da linha central */
.col-left {
  padding-right: var(--col-gutter);
}

/* ---------- Menu ---------- */

.topo {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: clamp(16px, 3vw, 40px);
  padding-top: clamp(20px, 2.6vw, 38px);
}

.topo-logo img {
  width: clamp(120px, 14vw, 200px);
  height: auto;
}

/* Botão do menu: só existe no celular */
.topo-botao {
  display: none;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  width: 44px;
  height: 44px;
  padding: 0;
  border: 0;
  background: none;
  cursor: pointer;
  z-index: 60;
}

.topo-risco {
  display: block;
  width: 26px;
  height: 2.5px;
  border-radius: 2px;
  background: var(--azul-escuro);
  transition: transform 0.28s ease, opacity 0.2s ease, background-color 0.28s ease;
}

.topo-links {
  display: flex;
  align-items: center;
  gap: clamp(14px, 2.2vw, 32px);
}

.topo-links a {
  color: var(--azul-escuro);
  font-weight: 700;
  font-size: clamp(13px, calc(10.30px + 0.700vw), 18px);
  text-decoration: none;
  white-space: nowrap;
  /* o sublinhado nasce recolhido e cresce ao passar o mouse */
  background-image: linear-gradient(currentColor, currentColor);
  background-repeat: no-repeat;
  background-position: 0 100%;
  background-size: 0 2px;
  transition: background-size 0.25s ease, color 0.25s ease;
}

/* O verde vai para o sublinhado, não para a letra: verde sobre creme dá
   contraste de 1,21 — o link sumia justamente ao ser apontado. No sublinhado
   ele destaca sem precisar ser legível, e a palavra continua em azul. */
.topo-links a:hover,
.topo-links a:focus-visible {
  background-image: linear-gradient(var(--verde), var(--verde));
  background-size: 100% 3px;
}

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

/* ---------- Hero ---------- */

.hero {
  padding-top: clamp(24px, 3.4vw, 48px);
}

.hero-top {
  display: flex;
  justify-content: flex-end;
}

.logo-mark {
  width: clamp(120px, 20.9vw, 300px);
  height: auto;
}

.logo-mark.small {
  width: clamp(48px, 4.2vw, 60px);
  flex-shrink: 0;
}

.hero-headline {
  margin-top: clamp(20px, 2.37vw, 34px);
  row-gap: clamp(16px, 2.75vw, 40px);
  font-size: clamp(30px, calc(21.30px + 2.321vw), 55px);
}

.line-1 {
  grid-column: 2;
  grid-row: 1;
}

.line-2 {
  grid-column: 1;
  grid-row: 2;
}

/* Desktop: cada frase ocupa uma linha só, preservando o desnível
   (fazemos em cima à direita, pensamos embaixo à esquerda) */
@media (min-width: 900px) {
  .line-1,
  .line-2 {
    white-space: nowrap;
  }
}

/* ---------- Sobre ---------- */

.sobre {
  background: var(--azul-escuro);
  color: var(--branco-sujo);
  border-radius: clamp(18px, 2.2vw, 32px);
  position: relative;
  /* A margem carrega a sangria da cesta, que sobe acima da caixa */
  margin-top: calc(var(--espaco-secao) + var(--sangra-frutas));
  /* O texto começa abaixo da altura do "sobre", que fica solto por cima da
     imagem. Medido na referência: 9,6% da largura do conteúdo. */
  padding-top: min(8.83vw, 127px);
  padding-bottom: clamp(32px, 3.6vw, 52px);
}

/* A cesta é maior que a caixa e sangra para fora dela em cima e embaixo, então
   aqui não há recorte — ao contrário do sapo, que era aparado pela borda.
   Largura medida na referência: 42% do conteúdo, encostada na borda esquerda.
   Centrada na vertical, a sobra se divide igual entre cima e baixo. */
.sobre-frutas {
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 42%;
  z-index: 1;
  pointer-events: none;
  /* a imagem passa da borda arredondada; sem isto o clique não atravessaria */
  line-height: 0;
}

.sobre-frutas img {
  width: 100%;
  height: auto;
}

/* Mantém o texto acima da imagem */
.sobre > .grid2 {
  position: relative;
  z-index: 2;
}

/* Texto na banda direita */
.sobre-col {
  grid-column: 2;
  padding-right: clamp(16px, 3vw, 45px);
}

/* Solto por cima da cesta, e não mais empilhado sobre o texto: encosta no topo
   da caixa e fica centrado na imagem. Corpo e recuo saem da referência —
   9,9% e 11,2% da largura do conteúdo. */
.sobre-title {
  position: absolute;
  left: 11.2%;
  top: 0;
  z-index: 3;
  font-size: min(9.12vw, 131px);
  line-height: 1.1;
}

.sobre-text p + p {
  margin-top: 1.1em;
}

/* ---------- O que fazemos ---------- */

/* A margem carrega também a parte da cesta que desce abaixo da caixa do
   "sobre" — a sangria é simétrica, já que a imagem é centrada nela. */
.fazemos {
  margin-top: calc(var(--espaco-secao) + var(--sangra-frutas));
  /* O giro do bloco diagonal joga o canto inferior direito da caixa para fora
     da página — canto vazio, o texto termina bem antes, mas o navegador conta
     a caixa e abria uma barra de rolagem lateral (medida: 15px em 768px).
     "clip" apara só na horizontal; "hidden" viraria caixa de rolagem e
     cortaria o que sangra para cima e para baixo. */
  overflow-x: clip;
}

/* ---------- Bloco na diagonal, por cima do carrossel ---------- */

.fazemos-row--destaque {
  position: relative;
}

/* Sai do fluxo e cruza a coluna das fotos. O giro parte da esquerda, para o
   bloco subir para a direita sem descolar da margem. */
.fazemos-marca {
  position: absolute;
  left: 0;
  /* O alinhamento é feito pelo "O que fazemos", não pela caixa do bloco: com o
     giro, o alto da caixa é a ponta direita de "Consultoria", que fica bem
     acima do olho. Medido a 1440px: o olho precisava subir 110px, deixando
     79px de deslocamento — 5,5vw. O teto vale de 1434px para cima, onde a
     página trava em 1319 e o bloco para de crescer. */
  top: clamp(24px, 5.5vw, 79px);
  z-index: 3;
  transform: rotate(-15deg);
  /* Pivô no canto superior esquerdo: assim o "O que fazemos" fica encostado
     na margem e as linhas seguintes é que descem para a direita. Com o pivô
     no centro, as linhas de cima saíam para fora da página. */
  transform-origin: left top;
  pointer-events: none;
}

/* É o elemento mais à esquerda do bloco: sem recuo, encostado na margem.
   Tamanho perto da metade das palavras grandes, como na referência. */
.fazemos-olho {
  display: block;
  font-size: clamp(18px, 2.9vw, 42px);
  font-weight: 800;
  margin-bottom: 0.12em;
}

/* Entrelinha bem fechada: as palavras quase se tocam, como na referência */
.fazemos-palavras span {
  display: block;
  font-size: clamp(34px, 6.4vw, 92px);
  font-weight: 800;
  line-height: 0.82;
}

/* Cada palavra entra mais recuada, formando a escada da referência */
.fazemos-palavras span:nth-child(1) {
  margin-left: 0.25em;
}

.fazemos-palavras span:nth-child(2) {
  margin-left: 1.35em;
}

.fazemos-palavras span:nth-child(3) {
  margin-left: 2.45em;
}

/* O texto na diagonal cobre o card encostado na borda esquerda, então só ele
   recua; os demais ficam cheios. O alvo é o ".is-focado" (o slide encaixado
   na esquerda) e não o nth-child: com o loop infinito quem ocupa a primeira
   posição vai alternando entre originais e clones, e a foto certa mudava.

   Só no desktop: no celular o bloco diagonal fica acima do carrossel, não
   por cima das fotos — lá o recuo apagaria a foto sem motivo. */
@media (min-width: 900px) {
  .carousel--ampliavel .card.is-focado .card-visual {
    opacity: 0.6;
  }
}

/* O texto desce para a base: o alto da coluna é onde passa a diagonal.
   O recuo inferior desconta as bolinhas do carrossel (16px de margem + 9px),
   senão o parágrafo alinharia com elas em vez de com a base das fotos. */
.fazemos-row--destaque .col-left {
  display: flex;
  align-items: flex-end;
  padding-bottom: 25px;
}

.cards-3 {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--gap-cards);
  align-content: start;
}

.cards-3 .card {
  aspect-ratio: 152 / 270;
}

/* O .card é só a caixa de layout — é dela que o scroll-snap tira o ponto de
   encaixe, então ela nunca pode ser transformada. Todo o visual (e qualquer
   animação de escala) vive no .card-visual dentro dela. */
.card {
  position: relative;
}

.card-visual {
  position: absolute;
  inset: 0;
  background: var(--verde);
  border-radius: clamp(12px, 1.5vw, 22px);
  overflow: hidden;
}

/* A foto preenche o card recortando o excedente. Como o card é bem vertical,
   cada foto precisa do seu ponto de corte para o palestrante não ficar de
   fora — por isso o object-position individual abaixo. */
.card img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  display: block;
}

/* 01: foto deitada, palestrante à direita */
.card img[src^="artur01"] {
  object-position: 88% center;
}

/* 02: palestrante à esquerda, apontando para a tela */
.card img[src^="artur02"] {
  object-position: 28% center;
}

/* 03: palestrante ao centro, ao fundo da roda */
.card img[src^="artur03"] {
  object-position: 44% center;
}

/* 04: foto bem vertical, corte pelo alto para manter o rosto */
.card img[src^="artur04"] {
  object-position: center 22%;
}

/* ---------- Informação da palestra sobre a foto ----------
   No mouse: a foto cresce e recua atrás de um véu azul, e o texto sobe.
   Em telas de toque (sem hover) a legenda fica sempre visível, num degradê
   curto que não cobre a foto. */

.card img {
  transition: transform 0.5s cubic-bezier(0.22, 0.61, 0.36, 1);
}

.card-info {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding: clamp(14px, 1.5vw, 22px);
  /* o recuo alto empurra o degradê para longe do topo, deixando a foto à
     mostra na parte de cima */
  padding-top: 30%;
  color: var(--branco-sujo);
  /* Legenda sempre visível, com degradê leve na base */
  background: linear-gradient(
    to top,
    rgba(0, 31, 63, 0.94) 0%,
    rgba(0, 31, 63, 0.78) 45%,
    rgba(0, 31, 63, 0) 100%
  );
}

.card-info h4 {
  font-size: clamp(14px, calc(12.20px + 0.480vw), 17px);
  font-weight: 800;
  line-height: 1.2;
  color: var(--verde);
}

/* Fiozinho verde acima do título */
.card-info h4::before {
  content: '';
  display: block;
  width: 2.2em;
  height: 3px;
  border-radius: 2px;
  background: var(--verde);
  margin-bottom: 0.7em;
}

.card-info p {
  margin-top: 0.55em;
  font-size: clamp(11px, calc(9.80px + 0.320vw), 13px);
  line-height: 1.4;
}

/* Camada mais densa, revelada no hover. São duas camadas sobrepostas porque
   navegador não faz transição suave entre dois degradês — o que se anima
   aqui é a opacidade desta. */
.card-info::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(
    to top,
    rgba(0, 31, 63, 0.97) 0%,
    rgba(0, 31, 63, 0.93) 50%,
    rgba(0, 31, 63, 0.78) 100%
  );
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.35s ease;
}

/* O texto fica acima das duas camadas */
.card-info h4,
.card-info p {
  position: relative;
  z-index: 1;
}

@media (hover: hover) {
  /* Um texto por vez: a legenda some por padrão e aparece só no card do meio
     do carrossel ou no que estiver sob o mouse. Vai no do meio, e não no da
     esquerda, porque é o da esquerda que fica esmaecido sob o texto na
     diagonal. No celular não vale — lá só um card aparece por vez. */
  .carousel .card-info {
    opacity: 0;
    transition: opacity 0.4s ease;
  }

  .carousel .card.is-legenda .card-info,
  .carousel .card:hover .card-info {
    opacity: 1;
  }

  /* Com o mouse sobre algum card, a legenda automática cede a vez a ele */
  .carousel .cards-3:has(.card:hover) .card.is-legenda:not(:hover) .card-info {
    opacity: 0;
  }

  .card:hover .card-info::after {
    opacity: 1;
  }

  /* O logo do Instagram fica de fora: ele é um ícone no verso, não uma foto
     de capa — crescer no hover faria a marca "respirar" sem motivo. */
  .card:hover img:not(.verso-marca) {
    transform: scale(1.07);
  }
}

@media (prefers-reduced-motion: reduce) {
  .card img,
  .card-info,
  .card-info h4,
  .card-info p {
    transition: none;
  }

  .card:hover img {
    transform: none;
  }
}

/* ---------- Foto ampliada (celular) ---------- */

.foto-aberta {
  position: fixed;
  inset: 0;
  z-index: 100;
  /* azul da paleta com leve transparência */
  background: rgba(0, 31, 63, 0.97);
  color: var(--branco-sujo);
  display: flex;
  flex-direction: column;
  align-items: center;
  /* Ancorado no topo, não centralizado: as fotos têm proporções diferentes
     e os textos, tamanhos diferentes — centralizar faria tudo dançar a cada
     troca. Assim a imagem começa sempre na mesma altura. */
  justify-content: flex-start;
  padding: clamp(60px, 13vw, 80px) 20px clamp(24px, 6vw, 36px);
  overscroll-behavior: contain;
}

.foto-aberta[hidden] {
  display: none;
}

.foto-palco {
  display: flex;
  flex-direction: column;
  gap: clamp(14px, 3.5vw, 22px);
  max-width: 560px;
  width: 100%;
}

/* Altura fixa (não max-height): o quadro da foto é sempre o mesmo, seja ela
   deitada ou vertical. O contain encaixa a imagem dentro dele. */
.foto-palco img {
  width: 100%;
  height: 52vh;
  object-fit: contain;
  border-radius: clamp(12px, 3vw, 18px);
  display: block;
}

.foto-palco figcaption h4 {
  font-size: clamp(17px, 4.6vw, 22px);
  font-weight: 800;
  color: var(--verde);
  line-height: 1.2;
}

.foto-palco figcaption p {
  margin-top: 0.6em;
  font-size: clamp(14px, 3.7vw, 17px);
  line-height: 1.45;
}

/* Botões: X no alto e as setas na base, ao alcance do polegar */
.foto-fechar,
.foto-anterior,
.foto-proxima {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: rgba(246, 247, 237, 0.12);
  color: var(--branco-sujo);
  cursor: pointer;
  transition: background-color 0.2s ease, color 0.2s ease;
}

.foto-fechar svg,
.foto-anterior svg,
.foto-proxima svg {
  width: 22px;
  height: 22px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2.2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.foto-fechar:hover,
.foto-anterior:hover,
.foto-proxima:hover,
.foto-fechar:focus-visible,
.foto-anterior:focus-visible,
.foto-proxima:focus-visible {
  background: var(--verde);
  color: var(--azul-escuro);
}

.foto-fechar {
  position: absolute;
  top: clamp(14px, 4vw, 22px);
  right: clamp(14px, 4vw, 22px);
}

/* Logo abaixo da legenda, e não mais presas na base da tela — de lá ficavam
   longe demais do texto. Continuam sem mudar de lugar entre uma foto e outra
   porque o JS reserva na legenda a altura da maior do grupo. */
.foto-navegacao {
  margin-top: clamp(18px, 4.5vw, 28px);
  display: flex;
  align-items: center;
  gap: clamp(28px, 9vw, 44px);
}

/* Fora da tela, mas ainda anunciado por leitores de tela ao trocar de foto */
.foto-contador {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

/* ---------- Carrossel ----------
   Estes estilos valem por padrão; no desktop os carrosséis que NÃO são
   ".carousel--sempre" voltam a ser grade (ver a regra min-width: 900px). */

.carousel .cards-3 {
  display: flex;
  position: relative;
  grid-template-columns: none;
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;

  /* Degradê que dissolve o card cortado na borda.
     O JS liga/desliga cada lado conforme a posição do scroll. */
  --fade-l: 0%;
  --fade-r: 14%;
  -webkit-mask-image: linear-gradient(
    to right,
    transparent 0%,
    #000 var(--fade-l),
    #000 calc(100% - var(--fade-r)),
    transparent 100%
  );
  mask-image: linear-gradient(
    to right,
    transparent 0%,
    #000 var(--fade-l),
    #000 calc(100% - var(--fade-r)),
    transparent 100%
  );
}

.carousel .cards-3::-webkit-scrollbar {
  display: none;
}

/* Momento do salto invisível do loop: sem transição, senão a escala do card
   recomeça no meio do caminho e vira um engasgo. */
.sem-transicao .card-visual,
.sem-transicao .card-info,
.sem-transicao img {
  transition: none !important;
}

.carousel .card {
  flex: 0 0 78%;
  scroll-snap-align: start;
  cursor: pointer;
}

.dots {
  display: flex;
  justify-content: center;
  gap: 9px;
  margin-top: 16px;
}

.dot {
  width: 9px;
  height: 9px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: var(--azul-escuro);
  opacity: 0.25;
  cursor: pointer;
  transition: opacity 0.2s ease, transform 0.2s ease;
}

.dot[aria-current="true"] {
  opacity: 1;
  transform: scale(1.3);
}

/* Desktop: só o carrossel de palestras continua carrossel (4 fotos, 3 à
   mostra). Os demais voltam ao layout de grade do projeto. */
/* Quantos cards aparecem por vez no desktop. Aceita fração: 1.25 quer dizer
   um card inteiro mais uma fatia do próximo, indicando que há mais adiante. */
.carousel--sempre {
  --por-vista: 3;
}

@media (min-width: 900px) {
  .carousel--sempre .card {
    flex: 0 0 calc(
      (100% - (var(--por-vista) - 1) * var(--gap-cards)) / var(--por-vista)
    );
  }

  .carousel:not(.carousel--sempre) .cards-3 {
    display: grid;
    position: static;
    overflow: visible;
    scroll-snap-type: none;
    -webkit-mask-image: none;
    mask-image: none;
  }

  .carousel:not(.carousel--sempre) .cards-3 {
    grid-template-columns: repeat(3, 1fr);
  }

  .carousel:not(.carousel--sempre) .card {
    cursor: default;
  }

  .carousel:not(.carousel--sempre) .card--clone,
  .carousel:not(.carousel--sempre) .dots {
    display: none;
  }
}

/* ---------- Entrada no scroll: o texto sobe enquanto aparece ----------
   Só vale quando a classe js-reveal está no <html>. Sem JS o conteúdo
   fica visível normalmente. */

.js-reveal .reveal {
  opacity: 0;
  transform: translateY(26px);
  transition:
    opacity 0.7s cubic-bezier(0.22, 0.61, 0.36, 1),
    transform 0.7s cubic-bezier(0.22, 0.61, 0.36, 1);
  transition-delay: var(--reveal-delay, 0ms);
  will-change: opacity, transform;
}

.js-reveal .reveal.is-visible {
  opacity: 1;
  transform: none;
  will-change: auto;
}

@media (prefers-reduced-motion: reduce) {
  .js-reveal .reveal {
    opacity: 1;
    transform: none;
    transition: none;
  }
}

/* ---------- Incubação de novas ideias (faixa espacial) ---------- */

.incubacao {
  /* Sangra de borda a borda da tela, para fora da caixa da página. Metade da
     barra de rolagem é descontada porque o "100vw" a inclui e a página não —
     sem isso a faixa fica alguns pixels maior que a tela e abre rolagem
     lateral em sistemas de barra clássica. */
  margin-left: calc(50% - 50vw + var(--barra-rolagem, 0px) / 2);
  margin-right: calc(50% - 50vw + var(--barra-rolagem, 0px) / 2);
  margin-top: var(--espaco-secao);
  padding-top: clamp(40px, 5.4vw, 78px);
  padding-bottom: clamp(44px, 6vw, 86px);
  color: var(--branco-sujo);
  /* as estrelas param na borda da faixa */
  overflow: hidden;

  /* Céu desenhado em CSS, sem imagem: três camadas de estrelas em ladrilhos
     de tamanhos diferentes (420, 670 e 930) — como os tamanhos não são
     múltiplos, os padrões nunca coincidem e a repetição não aparece. */
  background-color: #050710;
  background-image:
    radial-gradient(2.2px 2.2px at 296px 456px,#ffff,#fff0),
    radial-gradient(1.8px 1.8px at 314px 216px,#fffe,#fff0),
    radial-gradient(2.2px 2.2px at 133px 371px,#fffe,#fff0),
    radial-gradient(2.2px 2.2px at 455px 7px,#fffe,#fff0),
    radial-gradient(2.2px 2.2px at 25px 54px,#fffe,#fff0),
    radial-gradient(1.6px 1.6px at 431px 10px,#fffe,#fff0),
    radial-gradient(2.2px 2.2px at 367px 394px,#ffff,#fff0),
    radial-gradient(1.8px 1.8px at 36px 301px,#ffff,#fff0),
    radial-gradient(1.8px 1.8px at 221px 376px,#fffe,#fff0),
    radial-gradient(1.8px 1.8px at 288px 338px,#ffff,#fff0),
    radial-gradient(1.6px 1.6px at 485px 90px,#fffe,#fff0),
    radial-gradient(1.6px 1.6px at 458px 345px,#ffff,#fff0),
    radial-gradient(2.2px 2.2px at 186px 409px,#fffe,#fff0),
    radial-gradient(1.6px 1.6px at 532px 100px,#ffff,#fff0),
    radial-gradient(1.4px 1.4px at 42px 50px,#fffe,#fff0),
    radial-gradient(1.0px 1.0px at 290px 141px,#fffc,#fff0),
    radial-gradient(1.2px 1.2px at 302px 169px,#fffc,#fff0),
    radial-gradient(1.4px 1.4px at 147px 277px,#fffc,#fff0),
    radial-gradient(1.4px 1.4px at 281px 111px,#fffe,#fff0),
    radial-gradient(1.2px 1.2px at 54px 317px,#fffa,#fff0),
    radial-gradient(1.2px 1.2px at 407px 252px,#fffc,#fff0),
    radial-gradient(1.0px 1.0px at 279px 72px,#fffa,#fff0),
    radial-gradient(1.2px 1.2px at 51px 196px,#fffc,#fff0),
    radial-gradient(1.0px 1.0px at 17px 28px,#fffc,#fff0),
    radial-gradient(1.2px 1.2px at 201px 11px,#fffe,#fff0),
    radial-gradient(1.2px 1.2px at 351px 6px,#fffa,#fff0),
    radial-gradient(1.4px 1.4px at 29px 275px,#fffa,#fff0),
    radial-gradient(1.2px 1.2px at 47px 177px,#fffc,#fff0),
    radial-gradient(1.2px 1.2px at 251px 98px,#fffe,#fff0),
    radial-gradient(1.0px 1.0px at 135px 238px,#fffe,#fff0),
    radial-gradient(1.4px 1.4px at 386px 235px,#fffe,#fff0),
    radial-gradient(1.0px 1.0px at 46px 52px,#fffa,#fff0),
    radial-gradient(1.0px 1.0px at 332px 86px,#fffa,#fff0),
    radial-gradient(1.4px 1.4px at 285px 122px,#fffe,#fff0),
    radial-gradient(1.2px 1.2px at 215px 84px,#fffc,#fff0),
    radial-gradient(1.0px 1.0px at 390px 175px,#fffc,#fff0),
    radial-gradient(1.0px 1.0px at 416px 84px,#fffa,#fff0),
    radial-gradient(1.2px 1.2px at 414px 211px,#fffa,#fff0),
    radial-gradient(1.0px 1.0px at 327px 122px,#fffc,#fff0),
    radial-gradient(1.4px 1.4px at 217px 209px,#fffa,#fff0),
    radial-gradient(1.2px 1.2px at 312px 281px,#fffc,#fff0),
    radial-gradient(1.0px 1.0px at 55px 12px,#fffe,#fff0),
    radial-gradient(1.0px 1.0px at 170px 286px,#fffc,#fff0),
    radial-gradient(1.0px 1.0px at 127px 84px,#fffe,#fff0),
    radial-gradient(1.0px 1.0px at 172px 287px,#fffa,#fff0),
    radial-gradient(1.0px 1.0px at 58px 120px,#fffc,#fff0),
    radial-gradient(1.0px 1.0px at 409px 230px,#fffc,#fff0),
    radial-gradient(1.4px 1.4px at 2px 173px,#fffe,#fff0),
    radial-gradient(1.0px 1.0px at 402px 72px,#fffc,#fff0),
    radial-gradient(1.2px 1.2px at 104px 348px,#fffe,#fff0),
    radial-gradient(1.0px 1.0px at 335px 230px,#fffc,#fff0),
    radial-gradient(1.0px 1.0px at 41px 215px,#fffc,#fff0),
    radial-gradient(1.0px 1.0px at 245px 305px,#fffa,#fff0),
    radial-gradient(1.2px 1.2px at 368px 284px,#fffa,#fff0),
    radial-gradient(1.0px 1.0px at 545px 304px,#fff9,#fff0),
    radial-gradient(1.0px 1.0px at 231px 63px,#fff7,#fff0),
    radial-gradient(1.2px 1.2px at 18px 467px,#fff7,#fff0),
    radial-gradient(1.0px 1.0px at 298px 327px,#fff7,#fff0),
    radial-gradient(1.0px 1.0px at 309px 280px,#fff9,#fff0),
    radial-gradient(1.0px 1.0px at 396px 43px,#fff5,#fff0),
    radial-gradient(1.2px 1.2px at 489px 261px,#fff7,#fff0),
    radial-gradient(0.8px 0.8px at 91px 393px,#fff7,#fff0),
    radial-gradient(1.0px 1.0px at 149px 514px,#fff9,#fff0),
    radial-gradient(0.8px 0.8px at 635px 473px,#fff7,#fff0),
    radial-gradient(0.8px 0.8px at 579px 452px,#fff9,#fff0),
    radial-gradient(0.8px 0.8px at 265px 113px,#fff5,#fff0),
    radial-gradient(0.8px 0.8px at 649px 480px,#fff7,#fff0),
    radial-gradient(0.8px 0.8px at 81px 282px,#fff7,#fff0),
    radial-gradient(1.2px 1.2px at 578px 150px,#fff9,#fff0),
    radial-gradient(1.0px 1.0px at 184px 521px,#fff5,#fff0),
    radial-gradient(0.8px 0.8px at 369px 300px,#fff5,#fff0),
    radial-gradient(0.8px 0.8px at 619px 173px,#fff9,#fff0),
    radial-gradient(0.8px 0.8px at 186px 19px,#fff5,#fff0),
    radial-gradient(1.0px 1.0px at 142px 301px,#fff5,#fff0),
    radial-gradient(0.8px 0.8px at 302px 48px,#fff5,#fff0),
    radial-gradient(1.0px 1.0px at 605px 104px,#fff9,#fff0),
    radial-gradient(0.8px 0.8px at 137px 358px,#fff9,#fff0),
    radial-gradient(1.0px 1.0px at 219px 211px,#fff7,#fff0),
    radial-gradient(1.2px 1.2px at 634px 227px,#fff5,#fff0),
    radial-gradient(1.2px 1.2px at 446px 370px,#fff5,#fff0),
    radial-gradient(1.0px 1.0px at 224px 319px,#fff5,#fff0),
    radial-gradient(1.0px 1.0px at 653px 132px,#fff7,#fff0),
    radial-gradient(1.0px 1.0px at 317px 40px,#fff7,#fff0),
    radial-gradient(1.2px 1.2px at 358px 215px,#fff5,#fff0),
    radial-gradient(1.0px 1.0px at 165px 215px,#fff7,#fff0),
    radial-gradient(0.8px 0.8px at 432px 59px,#fff7,#fff0),
    radial-gradient(0.8px 0.8px at 437px 483px,#fff5,#fff0),
    radial-gradient(0.8px 0.8px at 424px 375px,#fff7,#fff0),
    radial-gradient(1.0px 1.0px at 35px 303px,#fff9,#fff0),
    radial-gradient(1.2px 1.2px at 408px 376px,#fff7,#fff0),
    radial-gradient(1.2px 1.2px at 16px 437px,#fff9,#fff0),
    radial-gradient(1.2px 1.2px at 450px 194px,#fff7,#fff0),
    radial-gradient(0.8px 0.8px at 64px 467px,#fff7,#fff0),
    radial-gradient(1.0px 1.0px at 652px 391px,#fff9,#fff0),
    radial-gradient(1.0px 1.0px at 34px 431px,#fff7,#fff0),
    radial-gradient(0.8px 0.8px at 279px 172px,#fff5,#fff0),
    radial-gradient(1.0px 1.0px at 65px 526px,#fff5,#fff0),
    radial-gradient(1.0px 1.0px at 124px 69px,#fff7,#fff0),
    radial-gradient(0.8px 0.8px at 149px 316px,#fff5,#fff0),
    radial-gradient(1.2px 1.2px at 18px 213px,#fff5,#fff0),
    radial-gradient(1.0px 1.0px at 202px 355px,#fff7,#fff0),
    radial-gradient(1.0px 1.0px at 291px 440px,#fff5,#fff0),
    radial-gradient(1.0px 1.0px at 554px 302px,#fff5,#fff0),
    radial-gradient(1.2px 1.2px at 22px 225px,#fff5,#fff0),
    radial-gradient(0.8px 0.8px at 575px 156px,#fff5,#fff0),
    radial-gradient(1.2px 1.2px at 143px 115px,#fff7,#fff0),
    radial-gradient(0.6px 0.6px at 256px 113px,#fff5,#fff0),
    radial-gradient(0.8px 0.8px at 814px 34px,#fff3,#fff0),
    radial-gradient(0.8px 0.8px at 36px 523px,#fff4,#fff0),
    radial-gradient(0.8px 0.8px at 557px 586px,#fff3,#fff0),
    radial-gradient(0.6px 0.6px at 662px 7px,#fff3,#fff0),
    radial-gradient(0.6px 0.6px at 675px 749px,#fff3,#fff0),
    radial-gradient(0.6px 0.6px at 839px 134px,#fff5,#fff0),
    radial-gradient(0.6px 0.6px at 500px 62px,#fff4,#fff0),
    radial-gradient(0.8px 0.8px at 0px 614px,#fff5,#fff0),
    radial-gradient(0.8px 0.8px at 582px 585px,#fff5,#fff0),
    radial-gradient(0.6px 0.6px at 651px 18px,#fff5,#fff0),
    radial-gradient(0.8px 0.8px at 815px 14px,#fff3,#fff0),
    radial-gradient(0.8px 0.8px at 597px 524px,#fff5,#fff0),
    radial-gradient(0.6px 0.6px at 873px 508px,#fff4,#fff0),
    radial-gradient(0.6px 0.6px at 333px 292px,#fff5,#fff0),
    radial-gradient(0.6px 0.6px at 212px 314px,#fff5,#fff0),
    radial-gradient(0.6px 0.6px at 161px 143px,#fff3,#fff0),
    radial-gradient(0.6px 0.6px at 858px 438px,#fff5,#fff0),
    radial-gradient(0.6px 0.6px at 534px 693px,#fff5,#fff0),
    radial-gradient(0.6px 0.6px at 272px 672px,#fff3,#fff0),
    radial-gradient(0.6px 0.6px at 735px 130px,#fff3,#fff0),
    radial-gradient(0.6px 0.6px at 440px 366px,#fff5,#fff0),
    radial-gradient(0.8px 0.8px at 693px 512px,#fff4,#fff0),
    radial-gradient(0.6px 0.6px at 786px 101px,#fff5,#fff0),
    radial-gradient(0.8px 0.8px at 378px 646px,#fff4,#fff0),
    radial-gradient(0.6px 0.6px at 222px 163px,#fff4,#fff0),
    radial-gradient(0.6px 0.6px at 39px 577px,#fff5,#fff0),
    radial-gradient(0.6px 0.6px at 753px 156px,#fff3,#fff0),
    radial-gradient(0.6px 0.6px at 381px 652px,#fff5,#fff0),
    radial-gradient(0.6px 0.6px at 457px 54px,#fff4,#fff0),
    radial-gradient(0.6px 0.6px at 357px 756px,#fff4,#fff0),
    radial-gradient(0.8px 0.8px at 722px 689px,#fff4,#fff0),
    radial-gradient(0.8px 0.8px at 94px 438px,#fff5,#fff0),
    radial-gradient(0.8px 0.8px at 413px 544px,#fff4,#fff0),
    radial-gradient(0.6px 0.6px at 656px 750px,#fff5,#fff0),
    radial-gradient(0.6px 0.6px at 578px 664px,#fff5,#fff0),
    radial-gradient(0.6px 0.6px at 36px 336px,#fff5,#fff0),
    radial-gradient(0.8px 0.8px at 871px 750px,#fff4,#fff0),
    radial-gradient(0.6px 0.6px at 648px 716px,#fff4,#fff0),
    radial-gradient(0.8px 0.8px at 305px 130px,#fff3,#fff0),
    radial-gradient(0.8px 0.8px at 556px 611px,#fff3,#fff0),
    radial-gradient(0.8px 0.8px at 757px 182px,#fff4,#fff0),
    radial-gradient(0.6px 0.6px at 742px 347px,#fff5,#fff0),
    radial-gradient(0.8px 0.8px at 913px 344px,#fff3,#fff0),
    radial-gradient(0.8px 0.8px at 83px 497px,#fff4,#fff0),
    radial-gradient(0.8px 0.8px at 733px 55px,#fff3,#fff0),
    radial-gradient(0.8px 0.8px at 775px 80px,#fff5,#fff0),
    radial-gradient(0.6px 0.6px at 119px 19px,#fff4,#fff0),
    radial-gradient(0.6px 0.6px at 435px 251px,#fff3,#fff0),
    radial-gradient(0.8px 0.8px at 536px 709px,#fff4,#fff0),
    radial-gradient(0.6px 0.6px at 205px 219px,#fff3,#fff0),
    radial-gradient(0.8px 0.8px at 151px 503px,#fff3,#fff0),
    radial-gradient(0.8px 0.8px at 789px 749px,#fff4,#fff0),
    radial-gradient(0.6px 0.6px at 379px 556px,#fff3,#fff0),
    radial-gradient(0.6px 0.6px at 436px 762px,#fff3,#fff0),
    radial-gradient(0.6px 0.6px at 384px 322px,#fff5,#fff0),
    radial-gradient(0.6px 0.6px at 63px 130px,#fff5,#fff0),
    radial-gradient(0.8px 0.8px at 118px 445px,#fff5,#fff0),
    radial-gradient(0.6px 0.6px at 363px 173px,#fff3,#fff0),
    radial-gradient(0.8px 0.8px at 372px 340px,#fff3,#fff0),
    radial-gradient(0.8px 0.8px at 888px 765px,#fff3,#fff0),
    radial-gradient(0.8px 0.8px at 634px 210px,#fff3,#fff0),
    radial-gradient(0.8px 0.8px at 764px 613px,#fff3,#fff0),
    radial-gradient(0.6px 0.6px at 37px 670px,#fff3,#fff0);
  background-size:
    560px 470px,
    560px 470px,
    560px 470px,
    560px 470px,
    560px 470px,
    560px 470px,
    560px 470px,
    560px 470px,
    560px 470px,
    560px 470px,
    560px 470px,
    560px 470px,
    560px 470px,
    560px 470px,
    420px 380px,
    420px 380px,
    420px 380px,
    420px 380px,
    420px 380px,
    420px 380px,
    420px 380px,
    420px 380px,
    420px 380px,
    420px 380px,
    420px 380px,
    420px 380px,
    420px 380px,
    420px 380px,
    420px 380px,
    420px 380px,
    420px 380px,
    420px 380px,
    420px 380px,
    420px 380px,
    420px 380px,
    420px 380px,
    420px 380px,
    420px 380px,
    420px 380px,
    420px 380px,
    420px 380px,
    420px 380px,
    420px 380px,
    420px 380px,
    420px 380px,
    420px 380px,
    420px 380px,
    420px 380px,
    420px 380px,
    420px 380px,
    420px 380px,
    420px 380px,
    420px 380px,
    420px 380px,
    670px 530px,
    670px 530px,
    670px 530px,
    670px 530px,
    670px 530px,
    670px 530px,
    670px 530px,
    670px 530px,
    670px 530px,
    670px 530px,
    670px 530px,
    670px 530px,
    670px 530px,
    670px 530px,
    670px 530px,
    670px 530px,
    670px 530px,
    670px 530px,
    670px 530px,
    670px 530px,
    670px 530px,
    670px 530px,
    670px 530px,
    670px 530px,
    670px 530px,
    670px 530px,
    670px 530px,
    670px 530px,
    670px 530px,
    670px 530px,
    670px 530px,
    670px 530px,
    670px 530px,
    670px 530px,
    670px 530px,
    670px 530px,
    670px 530px,
    670px 530px,
    670px 530px,
    670px 530px,
    670px 530px,
    670px 530px,
    670px 530px,
    670px 530px,
    670px 530px,
    670px 530px,
    670px 530px,
    670px 530px,
    670px 530px,
    670px 530px,
    670px 530px,
    670px 530px,
    930px 770px,
    930px 770px,
    930px 770px,
    930px 770px,
    930px 770px,
    930px 770px,
    930px 770px,
    930px 770px,
    930px 770px,
    930px 770px,
    930px 770px,
    930px 770px,
    930px 770px,
    930px 770px,
    930px 770px,
    930px 770px,
    930px 770px,
    930px 770px,
    930px 770px,
    930px 770px,
    930px 770px,
    930px 770px,
    930px 770px,
    930px 770px,
    930px 770px,
    930px 770px,
    930px 770px,
    930px 770px,
    930px 770px,
    930px 770px,
    930px 770px,
    930px 770px,
    930px 770px,
    930px 770px,
    930px 770px,
    930px 770px,
    930px 770px,
    930px 770px,
    930px 770px,
    930px 770px,
    930px 770px,
    930px 770px,
    930px 770px,
    930px 770px,
    930px 770px,
    930px 770px,
    930px 770px,
    930px 770px,
    930px 770px,
    930px 770px,
    930px 770px,
    930px 770px,
    930px 770px,
    930px 770px,
    930px 770px,
    930px 770px,
    930px 770px,
    930px 770px,
    930px 770px,
    930px 770px,
    930px 770px,
    930px 770px,
    930px 770px,
    930px 770px;
}

/* Volta à largura da página dentro da faixa */
.incubacao-inner {
  width: 92%;
  max-width: var(--content-max);
  margin: 0 auto;
}

/* As imagens ocupam a banda esquerda inteira e as duas fileiras; ao lado, o
   título encosta no topo e a lista na base, acompanhando a altura delas. */
.incubacao-grade {
  grid-column: 1;
  grid-row: 1 / span 2;
  padding-right: var(--col-gutter);
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--gap-cards);
}

.incubacao-grade .card {
  aspect-ratio: 1;
  /* a perspectiva vive no pai: aplicada na peça que gira, cada card teria o
     próprio ponto de fuga e o giro sairia achatado */
  perspective: 900px;
}

/* A peça que gira carrega as duas faces */
.card-giro {
  position: absolute;
  inset: 0;
  transform-style: preserve-3d;
  transition: transform 0.55s cubic-bezier(0.4, 0.1, 0.2, 1);
}

.card.is-virado .card-giro {
  transform: rotateY(180deg);
}

/* Frente e verso ocupam a mesma caixa; cada uma some quando mostra as costas */
.incubacao-grade .card-visual,
.card-verso {
  backface-visibility: hidden;
  /* o Safari antigo ignora a versão sem prefixo */
  -webkit-backface-visibility: hidden;
}

/* A frente virou botão para responder ao teclado: aqui só os resets.

   Sem o fundo verde que o .card-visual traz do carrossel: a imagem cobre a
   caixa inteira, então ele nunca aparecia de propósito — só vazava como um fio
   na borda arredondada quando a foto cresce no hover e ganha camada própria.
   Nas artes claras isso passava batido; na do Unknown Gold, que é preta, o
   fio verde saltava. */
.card-frente {
  border: 0;
  padding: 0;
  font: inherit;
  cursor: pointer;
  display: block;
  width: 100%;
  background: transparent;
}

.card-verso {
  position: absolute;
  inset: 0;
  transform: rotateY(180deg);
  background: var(--verde);
  border-radius: clamp(12px, 1.5vw, 22px);
  color: var(--azul-escuro);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: clamp(14px, 2vw, 24px);
  padding: clamp(16px, 2.4vw, 28px);
}

/* Precisa vencer o ".card img" do carrossel, que estica qualquer imagem
   dentro de um card para 100% x 100% — daí os dois níveis no seletor. */
.card-verso .verso-marca {
  width: clamp(52px, 7.4vw, 96px);
  height: auto;
  object-fit: contain;
}

.verso-link,
.verso-breve {
  font-weight: 800;
  font-size: clamp(13px, 1.35vw, 19px);
  line-height: 1;
  padding: 0.72em 1.5em;
  border-radius: 999px;
}

/* Mesmas cores do botão "fale conosco": creme com texto azul, invertendo
   para azul com texto verde no hover. Os dois vivem sobre o verde. */
.verso-link {
  background: var(--branco-sujo);
  color: var(--azul-escuro);
  text-decoration: none;
  transition:
    background-color 0.2s ease,
    color 0.2s ease,
    transform 0.25s cubic-bezier(0.22, 0.61, 0.36, 1);
}

.verso-link:hover,
.verso-link:focus-visible {
  background: var(--azul-escuro);
  color: var(--verde);
  transform: scale(1.06);
}

/* Sem link ainda: mesmo lugar do botão, mas sem parecer clicável */
.verso-breve {
  border: 2px solid rgba(0, 31, 63, 0.35);
  color: rgba(0, 31, 63, 0.7);
}

.verso-fechar {
  position: absolute;
  top: clamp(8px, 1.1vw, 14px);
  right: clamp(8px, 1.1vw, 14px);
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: rgba(0, 31, 63, 0.1);
  color: var(--azul-escuro);
  cursor: pointer;
  transition: background-color 0.2s ease;
}

.verso-fechar:hover,
.verso-fechar:focus-visible {
  background: rgba(0, 31, 63, 0.22);
}

.verso-fechar svg {
  width: 16px;
  height: 16px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2.4;
  stroke-linecap: round;
}

@media (prefers-reduced-motion: reduce) {
  .card-giro,
  .verso-link {
    transition: none;
  }
}

.incubacao-titulo {
  grid-column: 2;
  grid-row: 1;
  font-size: min(7.8vw, 112px);
  line-height: 0.98;
}

.incubacao-lista {
  grid-column: 2;
  grid-row: 2;
  /* colada na base, alinhada com a última fileira de imagens */
  align-self: end;
  padding-top: clamp(20px, 3vw, 44px);
  font-size: clamp(13px, calc(8.71px + 1.143vw), 19px);
  line-height: 1.6;
  /* Outfit Thin só aqui: é deste bloco o contraste entre o nome em negrito e
     a descrição leve que a referência mostra. O resto do site fica no peso
     normal. */
  font-weight: 100;
}

/* ---------- Clientes ---------- */

.clientes {
  margin-top: var(--espaco-secao);
}

/* Na guia central, como "sobre" e "o que fazemos" — os títulos de seção
   seguem todos a mesma regra. */
/* O título vai para a banda esquerda, ao lado dos logos e não mais acima
   deles, e cresce — a escala vai até 74px, contra os 55px dos outros
   títulos de seção. */
.clientes > .grid2 {
  align-items: center;
}

.clientes-title {
  grid-column: 1;
  padding-right: var(--col-gutter);
  /* Teto de 74px mantido; o que subiu foi o pé, para emendar com o celular,
     onde o título é bem maior por ocupar a largura toda. */
  font-size: clamp(30px, calc(42.00px + 2.222vw), 74px);
}

/* Distribuídos pela banda inteira, e não amontoados à esquerda dela: com um
   gap fixo, os logos travavam no teto de tamanho e sobrava um vão grande à
   direita em telas largas. O gap vira o espaço mínimo entre eles. */
.clientes-logos {
  grid-column: 2;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: clamp(20px, 3.9vw, 56px);
}

/* Os arquivos são quadrados com o logo dentro, então basta uma medida só */
.clientes-logos img {
  width: clamp(56px, calc(32.00px + 6.400vw), 96px);
  height: auto;
  flex-shrink: 0;
}

/* ---------- Fale conosco ---------- */

.fale-conosco {
  background: var(--verde);
  border-radius: clamp(18px, 2.2vw, 32px);
  /* O lobo sobe bem acima da caixa, então a margem soma o espaço padrão mais
     a altura dele que fica para fora — senão o respiro até os clientes some
     e ele encosta nos logos. */
  margin-top: calc(var(--espaco-secao) + var(--sangra-lobo-cima));
  padding-top: clamp(36px, 4.4vw, 64px);
  padding-bottom: clamp(48px, 6.2vw, 90px);
  position: relative;
  z-index: 1;
}

/* O lobo-guará passa da caixa em cima e um pouco embaixo. Ancorado na largura
   (e não na altura, como era o mico): a referência dá a posição pelas bordas
   laterais — começa em 40,2% e termina em 79,2% do conteúdo. */
.lobo {
  position: absolute;
  left: 40.2%;
  width: 39%;
  height: auto;
  /* O quanto desce abaixo da borda verde, medido na referência */
  bottom: calc(-1 * var(--sangra-lobo-baixo));
  z-index: 2;
  pointer-events: none;
}

.fale-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: clamp(20px, 4vw, 60px);
  /* 5,14% do conteúdo, medido na referência — o texto entra mais que antes */
  padding-left: clamp(20px, 4.72vw, 68px);
  padding-right: clamp(20px, 3.6vw, 48px);
  /* acima do lobo, para texto e botão nunca ficarem por baixo dele */
  position: relative;
  z-index: 3;
}

/* Bem maior que os 30px de antes: medido na referência, "mente alienígena"
   ocupa 28,5% da largura do conteúdo, o que dá 47px no teto.

   Proporcional ao conteúdo, e não uma reta em px: com a reta, ao estreitar a
   tela o texto encolhia mais devagar que a caixa e "mente alienígena" entrava
   no lobo (medido: -12px em 900). Assim a linha guarda sempre a mesma fatia
   da largura, e a folga até ele nunca fecha. */
.fale-titulo {
  font-size: min(3.278vw, 47px);
  line-height: 0.92;
}

.fale-l1,
.fale-l2 {
  display: block;
}

/* A segunda linha entra recuada, e não mais a primeira: na referência o recuo
   dela é o dobro do recuo do bloco, ou 1,45 vez o corpo do título. Em "em"
   para acompanhar o tamanho da fonte em qualquer largura. */
.fale-l2 {
  margin-left: 1.45em;
}

.fale-sub {
  margin-top: 1.4em;
  font-size: clamp(13px, calc(10.30px + 0.700vw), 18px);
  /* Negrito, como na referência — destoa do Thin do resto por ser assinatura,
     não texto corrido. */
  font-weight: 700;
  /* Quebra em duas linhas, no mesmo ponto da referência */
  max-width: 17em;
}

.fale-botao {
  font: inherit;
  font-size: clamp(17px, calc(13.48px + 0.939vw), 27px);
  font-weight: 800;
  color: var(--azul-escuro);
  background: var(--branco-sujo);
  border: 0;
  border-radius: 999px;
  padding: 0.6em 1.5em;
  cursor: pointer;
  white-space: nowrap;
  flex-shrink: 0;
  position: relative;
  transition:
    background-color 0.2s ease,
    color 0.2s ease,
    transform 0.25s cubic-bezier(0.22, 0.61, 0.36, 1);
}

.fale-botao:hover,
.fale-botao:focus-visible,
.fale-botao.is-copied {
  background: var(--azul-escuro);
  color: var(--verde);
}

/* Cresce um pouco ao passar o mouse — só onde há mouse */
@media (hover: hover) {
  .fale-botao:hover,
  .fale-botao:focus-visible {
    transform: scale(1.09);
  }
}

@media (prefers-reduced-motion: reduce) {
  .fale-botao {
    transition: background-color 0.2s ease, color 0.2s ease;
  }

  .fale-botao:hover,
  .fale-botao:focus-visible {
    transform: none;
  }
}

/* ---------- Footer ---------- */

footer {
  background: var(--azul-escuro);
  color: var(--branco-sujo);
  /* Um pouco mais estreito que a caixa verde acima. A caixa segue alinhada
     ao grid da página; quem recua é o rodapé. */
  margin-left: 2.6%;
  margin-right: 2.6%;
  margin-top: clamp(-38px, -2.6vw, -18px);
  /* O rodapé sobe por baixo da caixa verde, e o lobo desce por cima dele: sem
     somar a sangria aqui, a pata da escafandra cobria a primeira linha. */
  padding-top: calc(clamp(40px, 4.5vw, 64px) + var(--sangra-lobo-baixo));
  padding-bottom: clamp(40px, 5vw, 72px);
  padding-left: clamp(16px, 1.7vw, 24px);
  padding-right: clamp(16px, 3.5vw, 50px);
  display: flex;
  align-items: flex-start;
  gap: clamp(20px, 5vw, 72px);
}

.footer-text {
  font-size: clamp(14px, calc(11.00px + 0.800vw), 19px);
}

/* Email: clicar copia para a área de transferência */
.copy-email {
  font: inherit;
  /* Verde por padrão, como na referência: destaca o único link do rodapé */
  color: var(--verde);
  background: none;
  border: 0;
  padding: 0;
  cursor: pointer;
  text-decoration: underline;
  text-underline-offset: 0.18em;
  position: relative;
  transition: color 0.18s ease;
}

/* Pisca junto com o balão, confirmando o clique. Agora que o normal já é
   verde, a confirmação inverte para o creme — senão não haveria mudança. */
.copy-email.is-copied {
  color: var(--branco-sujo);
}

.copy-toast {
  position: absolute;
  left: 50%;
  bottom: calc(100% + 10px);
  transform: translate(-50%, 6px);
  z-index: 5;
  background: var(--cinza);
  color: #fff;
  /* Tamanho próprio, não herdado: senão o balão do botão "fale conosco"
     (fonte 27px) sairia bem maior que o do rodapé (fonte 19px). */
  font-size: clamp(13px, calc(11.29px + 0.456vw), 18px);
  font-weight: 700;
  white-space: nowrap;
  padding: 0.5em 1em;
  border-radius: 999px;
  box-shadow: 0 6px 18px rgba(0, 31, 63, 0.3);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.18s ease, transform 0.18s ease;
}

/* Rabinho do balão */
.copy-toast::after {
  content: '';
  position: absolute;
  top: 100%;
  left: 50%;
  margin-left: -7px;
  border: 7px solid transparent;
  border-top-color: var(--cinza);
  border-bottom: 0;
}

/* Vale para o link do rodapé e para o botão "fale conosco" */
.is-copied .copy-toast {
  opacity: 1;
  transform: translate(-50%, 0);
}

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

.footer-local {
  margin-top: 1.8em;
}

/* Assinatura logo abaixo do local, colada nele — não é outro bloco */
.footer-copy {
  margin-top: 0.2em;
}

/* ---------- Mobile (ajuste fino pendente) ---------- */

@media (max-width: 899px) {
  /* No celular o lobo fica inteiro dentro da caixa, ao lado do botão: não há
     sangria para baixo, e o rodapé volta ao recuo normal. */
  :root {
    --sangra-lobo-baixo: 0px;

    /* Aqui ele é bem menor, e o que sobe é a altura dele menos a da caixa.
       Reta ajustada sobre medições: 16px em 320 e 82px em 543, onde a largura
       dele bate no teto de 190px e para de crescer. */
    --sangra-lobo-cima: clamp(16px, 29.6vw - 79px, 82px);
  }

  .line-1,
  .line-2 {
    white-space: normal;
  }

  /* As duas frases sempre quebram em duas linhas */
  .line-1 span,
  .line-2 span {
    display: block;
  }

  /* A linha empilha para o carrossel ocupar a largura toda */
  .fazemos-row {
    grid-template-columns: 1fr;
    row-gap: clamp(24px, 5vw, 36px);
  }

  /* Incubação empilha: título, imagens e por fim a lista. As duas colunas do
     grid dariam um texto espremido ao lado das fotos. */
  .incubacao-inner {
    grid-template-columns: 1fr;
    row-gap: clamp(20px, 5vw, 34px);
  }

  .incubacao-titulo,
  .incubacao-grade,
  .incubacao-lista {
    grid-column: 1;
    /* as linhas fixas do desktop dariam sobreposição aqui */
    grid-row: auto;
  }

  .incubacao-titulo {
    order: 1;
    text-align: center;
    /* Encontra o tamanho do desktop exatamente em 900px, sem degrau no
       ponto de virada: lá o corpo é 7,8vw, aqui a reta chega no mesmo valor. */
    font-size: calc(32.1px + 4.23vw);
  }

  .incubacao-grade {
    order: 2;
    padding-right: 0;
  }

  .incubacao-lista {
    order: 3;
    align-self: auto;
    padding-top: 0;
  }

  /* Empilhamento do bloco na diagonal: palavras, fotos e só então o
     parágrafo. No desktop o texto cruza as fotos e por isso flutua por cima;
     aqui ele volta para o fluxo e ocupa o seu próprio espaço. */
  .fazemos-marca {
    position: static;
    order: 1;
    /* A caixa girada é medida pelos cantos, e os cantos aqui são vazios: em
       cima sobra o canto direito, acima do "O que fazemos"; embaixo sobra o
       canto esquerdo, abaixo de "Consultoria". As margens descontam as duas
       sobras — sem isso o bloco abre um buraco em cima e encosta nas fotos
       embaixo. Cada sobra tem a sua régua, e é por isso que uma medida só
       não serve para as duas.

       O corpo sai da largura disponível, e não de um tamanho fixo: "Consultoria"
       é a linha mais longa e, girada, avança 8,47px para cada pixel de corpo
       (medido). Dividir a largura do conteúdo por isso faz o bloco ocupar a
       extensão toda; o 8,7 no lugar do 8,47 deixa uma folga de 3% para o
       texto não encostar na borda. Também é a régua dos "em" abaixo. */
    font-size: calc((100vw - 2 * var(--col-gutter)) / 8.7);

    /* Sobra de cima = largura do "O que fazemos" x sen 15°, ou 1,89 vezes o
       corpo dele — que aqui é 0,53em. Descontada, o texto nasce a um
       --espaco-secao da seção anterior. O meio em a mais desce o bloco todo,
       afastando-o da seção de cima e aproximando-o das fotos. */
    margin-top: 1.5em;

    /* Sobra de baixo = recuo de "Consultoria" x sen 15°: 0,43em das palavras,
       medido igual a 34px e a 56px. Desconta também o vão da grade. O -6px
       fecha o resto: a caixa de linha entra 6px na foto, e como a tinta do
       "C" para uns 3px antes da caixa, o texto encosta sem cobrir nada. */
    margin-bottom: calc(-6px - clamp(24px, 5vw, 36px) - 0.43em);
  }

  /* As duas linhas passam a acompanhar o bloco, guardando a proporção que
     tinham entre si (18/34) — assim o conjunto cresce inteiro. */
  .fazemos-olho {
    font-size: 0.53em;
  }

  .fazemos-palavras span {
    font-size: 1em;
  }

  .fazemos-row--destaque .carousel {
    order: 2;
  }

  /* O parágrafo desce para depois das fotos e perde o alinhamento pela base,
     que só fazia sentido ao lado do carrossel. */
  .fazemos-row--destaque .col-left {
    order: 3;
    display: block;
    padding-bottom: 0;
  }

  .col-left {
    padding-right: 0;
  }

  /* ---------- Sobre no celular ----------
     A imagem de celular é deitada (736x572), então em vez de ficar ao lado do
     texto ela atravessa o topo da caixa, com o "sobre" por cima e o texto
     embaixo. A cesta continua maior que a caixa, sangrando para cima. */

  /* As contas abaixo são porcentagens porque margem e padding resolvem "%"
     contra a largura da caixa — a mesma largura da cesta. A frutas-mobile.png
     tem proporção 572/736 = 0,777, então a altura dela é 77,7% da largura. */
  .sobre {
    /* A cesta ocupa 89% da caixa, então a altura dela é 0,89 x 0,777 = 69,2%
       da largura. Dessa altura, 16% ficam acima da caixa. */
    --sangra-frutas: 11.1%;
    /* Os outros 84% entram na caixa (0,84 x 69,2%), e o texto começa logo
       abaixo da cesta. */
    padding-top: calc(58.1% + 10px);
    padding-bottom: clamp(28px, 7%, 46px);
    /* Respiro nas laterais: sem isto o texto encostava na borda da caixa */
    padding-left: 6%;
    padding-right: 6%;
  }

  .sobre-frutas {
    left: 50%;
    top: 0;
    /* 16% da cesta para fora, em cima. A conta é em % da própria imagem, que
       é o que o translate usa — daí não depender da altura da caixa. */
    transform: translate(-50%, -16%);
    width: 89%;
  }

  /* Centrado na cesta, e não mais recuado como no desktop. A centragem é por
     largura + text-align, e não por translateX: o .reveal zera o transform
     quando o elemento aparece, e levaria a centragem junto. */
  .sobre-title {
    left: 0;
    width: 100%;
    text-align: center;
    /* Em "em", e não em "%": porcentagem no top resolve contra a altura da
       caixa, que muda com o texto, e o título passearia junto. */
    top: 1.05em;
    font-size: 20vw;
  }

  /* Aqui a cesta fica no topo da caixa e não desce abaixo dela, então a seção
     seguinte volta ao respiro normal. */
  .fazemos {
    margin-top: var(--espaco-secao);
  }

  /* Texto ocupa a largura toda: não há mais coluna de imagem ao lado */
  .sobre > .grid2 {
    grid-template-columns: 1fr;
  }

  .sobre-col {
    grid-column: 1;
    padding-right: 0;
  }

  /* Rodapé empilha: logo acima do texto */
  footer {
    flex-direction: column;
    gap: 24px;
  }

  /* No celular o bloco ocupa a largura toda, e não só a banda direita: preso
     lá, sobrava a banda esquerda inteira vazia e tudo ficava amontoado. */
  .clientes-title,
  .clientes-logos {
    grid-column: 1 / -1;
  }

  .clientes-title {
    padding-right: 0;
    text-align: center;
    margin-bottom: clamp(22px, 3.2vw, 46px);
    /* Encontra o tamanho do desktop em 900px, sem degrau na virada */
    font-size: calc(51.71px + 1.145vw);
  }

  /* Dois e dois, em colunas de mesma largura: cada logo fica centrado na sua
     metade, então a fileira se distribui sozinha em qualquer tela. */
  .clientes-logos {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    justify-items: center;
    row-gap: clamp(16px, 4vw, 26px);
  }

  /* ---------- Menu de hambúrguer ---------- */

  .topo-botao {
    display: flex;
  }

  /* Painel em tela cheia: os links ficam grandes, fáceis de acertar */
  .topo-links {
    position: fixed;
    inset: 0;
    z-index: 50;
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
    gap: clamp(20px, 5vw, 32px);
    padding: 0 12%;
    background: var(--azul-escuro);
    /* fora de vista e inerte enquanto fechado */
    opacity: 0;
    visibility: hidden;
    transform: translateY(-12px);
    transition: opacity 0.28s ease, transform 0.28s ease, visibility 0.28s;
  }

  .menu-aberto .topo-links {
    opacity: 1;
    visibility: visible;
    transform: none;
  }

  .topo-links a {
    color: var(--branco-sujo);
    font-size: clamp(26px, 8vw, 40px);
    font-weight: 800;
  }

  /* O primeiro item é o destino da página, então ganha destaque */
  .topo-links a:first-child {
    color: var(--verde);
  }

  /* Riscos viram um X quando aberto */
  .menu-aberto .topo-risco {
    background: var(--branco-sujo);
  }

  .menu-aberto .topo-risco:nth-child(1) {
    transform: translateY(7.5px) rotate(45deg);
  }

  .menu-aberto .topo-risco:nth-child(2) {
    opacity: 0;
  }

  .menu-aberto .topo-risco:nth-child(3) {
    transform: translateY(-7.5px) rotate(-45deg);
  }

  /* Fale conosco: só o mico e o botão. O texto sai por não caber bem. */
  .fale-texto {
    display: none;
  }

  /* Reserva à direita a faixa ocupada pelo lobo, para o botão centralizar
     no espaço verde que sobra — e não no centro da caixa, onde bateria nele.
     Os valores acompanham os do .lobo abaixo. */
  .fale-inner {
    justify-content: center;
    /* padding-left zerado para o centro ser medido a partir da borda da
       caixa, e não de um recuo interno */
    padding-left: 0;
    padding-right: calc(2% + min(38%, 190px));
  }

  .fale-conosco {
    padding-top: 26px;
    padding-bottom: 32px;
  }

  /* Acompanha a largura da tela: em telas estreitas encolhe o suficiente
     para não encostar no lobo. */
  .fale-botao {
    font-size: clamp(16px, 5vw, 22px);
    padding: 0.7em 1.5em;
  }

  /* No celular o texto sai de cena e o lobo vai para a direita, ao lado do
     botão. A âncora continua sendo a largura: é ela que limita o espaço que
     sobra para o botão. */
  .lobo {
    left: auto;
    /* Dentro da caixa: nada de vazar pela borda direita. */
    right: 2%;
    /* O teto em px impede que em telas largas (tablet) ele cresça tanto a
       ponto de subir até os logos de clientes. */
    width: min(38%, 190px);
  }

  /* Verso dos cards da Incubação: logo e botão amarrados ao card, não à tela.
     Aqui a grade é 2x2 na largura toda, então em 768px o card chega a 348px —
     maior que os 238 do desktop. Com a escala antiga o logo ficava em 16% do
     card (contra 31% no celular) e o botão em 30% (contra 61%). */
  .card-verso .verso-marca {
    width: 14vw;
  }

  .verso-link,
  .verso-breve {
    font-size: calc(4.41px + 2.290vw);
  }

  /* A legenda acompanha o card, não a tela. Aqui o carrossel mostra pouco mais
     de um card por vez, então a foto cresce junto com a largura: em 768px o
     card tem 551px, o dobro dos 269px do celular. Com a escala antiga a
     legenda ficava em 12px ali — 2,2% do card contra 4,1% no telefone, e 93
     caracteres por linha. Na virada para o desktop os valores caem de novo, e
     é o certo: lá cabem três cards e cada um encolhe para menos da metade. */
  .card-info h4 {
    font-size: calc(8.99px + 1.336vw);
  }

  .card-info p {
    font-size: calc(6.71px + 1.145vw);
  }

  /* No celular o espaçamento é fixo, independente da largura */
  .carousel .cards-3 {
    gap: 12px;
  }

  .carousel .cards-3 .card {
    aspect-ratio: 3 / 4;
  }

  .dot {
    width: 9px;
    height: 9px;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: var(--azul-escuro);
    opacity: 0.25;
    cursor: pointer;
    transition: opacity 0.2s ease, transform 0.2s ease;
  }

  .dot[aria-current="true"] {
    opacity: 1;
    transform: scale(1.3);
  }
}

/* ---------- Fale conosco no tablet ----------
   Entre 700 e 899px o layout ainda é o de celular, mas a faixa verde já tem
   quase o dobro da largura: escondendo o texto, sobrava metade dela vazia com
   o botão flutuando no meio do nada. Aqui o texto volta e o botão desce para
   baixo dele — a faixa da direita segue reservada para o lobo. */
@media (min-width: 700px) and (max-width: 899px) {
  /* A sobra do lobo acima da faixa aqui é bem menor que no resto do celular,
     porque a faixa ficou alta com o texto de volta. Medida em três larguras
     (700/768/899): 33, 53 e 39px — a variação vem da quebra do texto. Um
     valor médio deixa o erro em ±12px, contra os 26 a 49 de sobra do valor
     de celular. */
  :root {
    --sangra-lobo-cima: 45px;
  }

  .fale-texto {
    display: block;
  }

  .fale-inner {
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-start;
    gap: clamp(18px, 2.6vw, 26px);
    padding-left: clamp(20px, 4.72vw, 68px);
  }

  /* Maior que o 3,278vw do desktop: aqui o texto tem só a banda esquerda da
     faixa, e não a largura toda do conteúdo. */
  .fale-titulo {
    font-size: 4vw;
  }

  /* Com o texto de volta a faixa fica bem mais alta, e no tamanho de celular
     o lobo passava a caber inteiro dentro dela — perdendo a sangria que ele
     tem em toda a página. Aqui ele cresce e volta a extrapolar por cima. */
  .lobo {
    width: min(42%, 300px);
  }

  /* A reserva à direita acompanha o novo tamanho dele */
  .fale-inner {
    padding-right: calc(2% + min(42%, 300px));
  }
}