/* ============================================================
   SITE — uma seção por bloco.
   Só lê variáveis de tokens.css. Nenhuma cor ou medida crua.
   ============================================================ */

.sprite { position: absolute; width: 0; height: 0; overflow: hidden; }


/* ============================================================ NAV */

.nav {
  /* Não é fixa: rola junto com a página, como no material de referência.
     Some naturalmente e devolve a tela inteira ao conteúdo. */
  position: relative;
  z-index: var(--z-nav);
  min-height: var(--nav-h);
  display: flex;
  align-items: center;
  padding-inline: var(--gutter);
  border-bottom: var(--hair) solid var(--line);
  background: var(--bg);
}

/* Três zonas: logo à esquerda, âncoras no centro exato, contato à direita.
   As colunas 1fr dos lados são o que mantém o centro centrado de verdade,
   independente da largura do logo ou do e-mail. */
.nav__in {
  width: 100%;
  max-width: var(--maxw);
  margin-inline: auto;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: var(--sp-md);
}

.nav__logo {
  display: flex;
  align-items: center;
  gap: var(--sp-2xs);
  font-size: clamp(1.0625rem, 1.5vw, 1.375rem);
  justify-self: start;
}
.nav__mark {
  width: var(--tick);
  height: var(--tick);
  background: var(--brand);
  flex: none;
}

.nav__links {
  display: none;
  justify-self: center;
  gap: clamp(var(--sp-md), 2.4vw, var(--sp-xl));
  font-size: var(--t-small);
  font-weight: var(--w-semi);
  letter-spacing: -.015em;
}
.nav__links a { transition: color var(--d-fast) var(--ease-out); }
.nav__links a:hover { color: var(--brand); }

.nav__fim {
  display: flex;
  align-items: center;
  gap: var(--sp-md);
  justify-self: end;
}
.nav__email {
  display: none;
  font-size: var(--t-small);
  white-space: nowrap;
}
.nav__email span { color: var(--muted); }
.nav__email a {
  font-weight: var(--w-semi);
  transition: color var(--d-fast) var(--ease-out);
}
.nav__email a:hover { color: var(--brand); }

.nav__cta { flex: none; }

@media (min-width: 860px)  { .nav__links { display: flex; } }
@media (min-width: 1100px) { .nav__email { display: block; } }


/* ============================================================ HERO */

.hero {
  /* Fica grudado enquanto a seção seguinte sobe por cima dele. Preso em
     top:0 ele pararia de vez; quem o mantém subindo — devagar, numa
     fração da rolagem — é a deriva aplicada no laço do main.js. */
  position: sticky;
  top: 0;
  z-index: 0;
  will-change: transform;
  /* Desconta a barra do topo e ainda deixa uma folga: sem ela os botões
     encostam na borda da dobra e o próximo bloco não dá sinal de que
     existe. A folga é o que convida a rolar. */
  min-height: calc(100svh - var(--nav-h) - clamp(2rem, 7vh, 5.5rem));
  /* Assimétrico: mais ar no topo, para a identidade não nascer colada na
     régua da barra. Em vh, não em rem — numa tela baixa são os custos
     fixos que empurram os botões para fora da dobra. */
  padding-block: clamp(2.5rem, 6.5vh, 5.5rem) clamp(1.25rem, 3.2vh, 3.5rem);
  display: flex;
  flex-direction: column;
  border-bottom: var(--hair) solid var(--line);
}
/* Três tempos: identidade no topo, título ao centro, ações no rodapé —
   com space-between os três se distribuem dentro de uma tela só. */
.hero__in {
  flex: 1;
  display: flex;
  flex-direction: column;
  /* Nada de space-between: ele reparte toda a sobra da tela entre os três
     blocos, o que abre buracos de 160px+ nas telas altas e, quando o
     conteúdo cresce, empurra os botões para fora da dobra. Com o vão
     declarado o ritmo é o mesmo em qualquer altura de janela. */
  justify-content: flex-start;
  gap: clamp(var(--sp-lg), 5.5vh, var(--sp-2xl));
}

.hero__id {
  display: flex;
  align-items: center;
  gap: var(--sp-md);
  flex-wrap: wrap;
}
.hero__avatar {
  width: min(68px, 8vh); height: min(68px, 8vh);
  flex: none;
}
.hero__id-txt { margin-right: auto; }
.hero__name { font-size: 1.0625rem; line-height: 1.2; }
.hero__role { font-size: var(--t-small); color: var(--muted); line-height: 1.3; }

.status {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2xs);
  font-size: var(--t-eyebrow);
  font-weight: var(--w-semi);
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--ink);
  padding: .6em 1em .6em .85em;
  border-radius: var(--radius-pill);
  box-shadow: inset 0 0 0 var(--hair) var(--line-2);
}
.status__dot {
  width: 7px; height: 7px; border-radius: 50%;
  background: var(--brand);
  flex: none;
}
.anim-pronta .status__dot { animation: pulso 2.4s var(--ease-in-out) infinite; }
@keyframes pulso {
  0%, 100% { opacity: 1;   transform: scale(1); }
  50%      { opacity: .45; transform: scale(.82); }
}

/* O clamp de --t-display olha só a largura. Aqui a altura também manda:
   sem isso, numa tela baixa o título empurra os botões para fora da
   primeira dobra. */
.hero__title {
  text-wrap: balance;
  font-size: min(var(--t-display), 12vh);
}
.hero__title-2 { color: var(--muted); }

/* O subtítulo agora vive fora do rodapé, colado no título. */
/* Sem margem própria: o vão já vem do gap do .hero__in, e somar os dois
   afastava o subtítulo mais do título do que dos botões. */
.hero > .wrap > .lead { max-width: 46ch; }

.hero__foot {
  display: flex;
  flex-direction: column;
  gap: var(--sp-md);
  /* Identidade e manchete ficam juntas no topo, com vão curto; toda a
     sobra da dobra desce para cá. É o respiro dos botões — e evita que
     ela se reparta em buracos no meio do conteúdo. */
  margin-top: auto;
}
.hero__foot .lead {
  max-width: 46ch;
  font-size: min(var(--t-lead), 2.6vh);
}

/* Barra de ações: os botões à esquerda, as redes à direita. */
.hero__acoes {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: var(--sp-md);
  /* Ar abaixo da régua, para os botões; acima dela fica o carrossel. */
  padding-top: clamp(var(--sp-lg), 3.5vh, var(--sp-2xl));
  padding-bottom: var(--sp-2xs);
  border-top: var(--hair) solid var(--line);
}
.hero__btns {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--sp-2xs);
}
/* ---- Botão do hero: texto à esquerda, seta num círculo à direita ----
   O círculo é o próprio svg com padding — nenhum elemento a mais no
   HTML. Vale em todos os tamanhos; o celular só o deixa maior.      */
.hero__btns .btn {
  justify-content: space-between;
  min-height: 3.25rem;
  padding: .4em .4em .4em 1.2em;
  font-size: var(--t-small);
  white-space: nowrap;
}
.hero__btns .btn .arrow {
  flex: none;
  width: 2.25rem;
  height: 2.25rem;
  padding: .625rem;
  box-sizing: border-box;
  border-radius: 50%;
  margin-left: var(--sp-sm);
  transition: transform var(--d-base) var(--ease-out),
              background var(--d-fast) var(--ease-out),
              color var(--d-fast) var(--ease-out);
}
.hero__btns .btn--brand .arrow { background: rgba(255,255,255,.2); }
.hero__btns .btn--ghost .arrow { background: var(--bg-2); }
/* A logo do Behance já ocupa a esquerda; encosta no texto. */
.hero__btns .btn__logo { margin-right: -.2em; }

/* Hover: o botão inverte (base.css) e o círculo enche de cor, com a
   seta girando 45° para apontar para a direita — "vai". Sobrescreve o
   deslize diagonal genérico do .btn .arrow. */
.hero__btns .btn:hover .arrow { transform: rotate(45deg); }
.hero__btns .btn--brand:hover .arrow { background: #FFFFFF; color: var(--ink); }
.hero__btns .btn--ghost:hover .arrow { background: var(--brand); color: #FFFFFF; }

/* "Sobre mim" desce a página: a seta aponta para baixo (o ícone é ↗,
   135° vira ↓) e no hover só afunda um pouco, sem girar. */
.hero__btns .btn--desce .arrow { transform: rotate(135deg); }
.hero__btns .btn--desce:hover .arrow { transform: translateY(2px) rotate(135deg); }

/* Portfólio: só a logo do Behance e o nome, sem seta. Centralizado
   para não sobrar um vazio à direita onde a seta ficava. */
.hero__btns .btn--logo { justify-content: center; padding-right: 1.2em; }

@media (prefers-reduced-motion: reduce) {
  .hero__btns .btn .arrow { transition: none; }
  .hero__btns .btn:hover .arrow { transform: none; }
}

@media (max-width: 560px) {
  /* Numa tela estreita o orçamento ocupa a linha inteira — é a ação
     principal — e os outros dois dividem a linha de baixo. Duas fileiras
     em vez de três: é o que faz a barra caber na primeira dobra. */
  .hero__btns { width: 100%; gap: var(--sp-xs); }
  .hero__btns .btn--brand { flex: 1 0 100%; }
  /* Os dois de baixo dividem a linha em metades iguais, sempre — num
     celular de 360px eles empilhavam. Para caberem na metade, ficam um
     pouco mais compactos que o laranja: círculo menor, menos ar. */
  .hero__btns .btn--ghost { flex: 1 1 0; min-width: 0; overflow: hidden; }
  /* No celular o botão é mais alto e o círculo maior: é o alvo do dedo. */
  .hero__btns .btn { min-height: 3.6rem; padding: .5em .5em .5em 1.1em; }
  .hero__btns .btn .arrow { width: 2.5rem; height: 2.5rem; padding: .7rem; margin-left: var(--sp-2xs); }
  .hero__btns .btn--ghost { padding-left: .9em; font-size: .875rem; gap: var(--sp-2xs); }
  .hero__btns .btn--logo { padding-right: .9em; }
  /* space-between já separa texto e círculo; a margem só somava largura */
  .hero__btns .btn--ghost .arrow { width: 2.25rem; height: 2.25rem; padding: .625rem; margin-left: 0; }
}

/* O hero tem muita coisa: identidade, status, display, frase e a barra de
   ações. Numa tela de celular só cabe tudo na primeira dobra se o conjunto
   encolher junto. */
/* Abaixo do desktop o conteúdo do hero é bem mais curto que a tela. Com
   min-height cheia + space-between, toda essa diferença virava vão entre
   os blocos. Aqui a altura é a do conteúdo e os vãos são fixos: sobra
   espaço no fim da dobra, que é o que convida a rolar — sem os buracos
   no meio. Vale até 900px, que é onde a faixa de tablet ainda esticava. */
@media (max-width: 900px) {
  /* No celular o hero é a primeira tela inteira: preenche até a dobra
     e os botões descem para o pé dela. Antes o min-height era auto, o
     hero encolhia e a faixa escura seguinte já aparecia sem rolar. svh
     é a altura com a barra de endereço visível — a de quando se abre. */
  .hero { min-height: calc(100svh - var(--nav-h)); padding-block: var(--sp-lg) var(--sp-lg); }
  .hero__in { gap: var(--sp-lg); }
}

@media (max-width: 640px) {
  .hero__avatar { width: 52px; height: 52px; }
  .hero__foot { gap: var(--sp-md); }
  .hero .lead { font-size: 1.0625rem; }
  .hero__acoes { padding-top: var(--sp-md); gap: var(--sp-sm); }

  /* No celular os três botões são a ação; a fileira de redes é o que
     empurrava a barra para fora da dobra. Elas seguem inteiras na
     seção de Contato, que é onde alguém vai procurá-las. */
  .hero .social { display: none; }
}

.social { display: flex; gap: var(--sp-2xs); }
.social a {
  display: grid;
  place-items: center;
  width: 42px; height: 42px;
  border-radius: 50%;
  color: var(--muted);
  box-shadow: inset 0 0 0 var(--hair) var(--line);
  transition: color var(--d-fast) var(--ease-out),
              background var(--d-fast) var(--ease-out),
              box-shadow var(--d-fast) var(--ease-out);
}
.social a:hover {
  color: var(--brand-ink);
  background: var(--brand);
  box-shadow: none;
}
.social svg { fill: currentColor; }


/* ============================================================ ESTEIRA
   Uma trilha, duplicada pelo JS. O rAF empurra o translateX.
   Sem JS: fica estática e legível.                                  */

.esteira-band {
  padding-block: var(--sp-lg);
  overflow: hidden;
  /* Traço leve na base: separa a faixa da seção escura seguinte, que
     tem o mesmo fundo. Mais apagado que a hairline invertida padrão. */
  border-bottom: var(--hair) solid rgba(255,255,255,.08);
}

.esteira { overflow: hidden; }
.esteira__trilha {
  display: flex;
  align-items: baseline;
  gap: var(--sp-2xl);
  width: max-content;
  will-change: transform;
}
.esteira__trilha > li {
  display: flex;
  align-items: baseline;
  gap: var(--sp-sm);
  white-space: nowrap;
}
/* Separador: quadrado de 9px, não bullet nem ícone */
.esteira__trilha > li::after {
  content: "";
  width: var(--tick); height: var(--tick);
  background: var(--brand);
  margin-left: var(--sp-2xl);
  align-self: center;
}
.esteira__trilha b {
  font-size: clamp(1.75rem, 3.2vw, 3rem);
  font-weight: var(--w-black);
  letter-spacing: -.05em;
  color: #FFFFFF;
}
.esteira__trilha span {
  /* Uns 40% do número (era ~28%): o rótulo estava sumindo ao lado dele. */
  font-size: clamp(.9375rem, 1.3vw, 1.25rem);
  font-weight: var(--w-medium);
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--muted-invert);
}


/* ============================================================ CABEÇALHO DE SEÇÃO */

/* O cap estreito é do título, não do parágrafo: herdado, ele espremia a
   lead em seis linhas curtas e deixava metade da largura vazia. */
.sec-head { max-width: none; }
.sec-head > h2 { max-width: 14ch; }
.sec-head .lead { max-width: 46ch; }
/* Sem título acima, a lead vira a abertura da seção: ganha corpo. */
#porque .sec-head .lead {
  font-size: clamp(1.5rem, 2.8vw, 2.5rem);
  line-height: 1.25;
  letter-spacing: -.03em;
  max-width: 26ch;
}

.sec-head--row {
  max-width: none;
  display: flex;
  flex-direction: column;
  gap: var(--sp-lg);
}
@media (min-width: 900px) {
  .sec-head--row {
    flex-direction: row;
    align-items: flex-end;
    justify-content: space-between;
  }
  .sec-head--row .body { max-width: 34ch; text-align: right; }
}


/* ============================================================ 01 SOBRE

   Duas colunas que começam na mesma linha: texto à esquerda, retrato à
   direita. Os traços vivem dentro da coluna de texto — atravessando a
   seção inteira, sobrava metade da largura vazia à direita deles.

   ============================================================ */

.sobre {
  display: grid;
  gap: var(--sp-xl);
  /* Curto: colado na eyebrow, não a 130px dela. */
  margin-top: var(--sp-xl);
}
@media (min-width: 900px) {
  .sobre {
    grid-template-columns: minmax(0, 1fr) minmax(0, 22rem);
    gap: clamp(var(--sp-2xl), 6vw, 6rem);
    align-items: start;
  }
}

.sobre__col { min-width: 0; }

.sobre__t {
  /* Menor que antes: em 52px ele esmagava o corpo do texto ao lado. */
  font-size: clamp(2rem, 3.6vw, 3rem);
  font-weight: var(--w-black);
  letter-spacing: -.04em;
  line-height: 1.02;
  text-wrap: balance;
}

/* ---------- Retrato ---------- */

.sobre__foto { margin: 0; }
.sobre__foto img {
  width: 100%;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  border-radius: var(--radius-img);
  background: var(--bg-2);
}
.sobre__foto figcaption {
  margin-top: var(--sp-sm);
  color: var(--muted);
}
.on-dark .sobre__foto figcaption { color: var(--muted-invert); }

/* ---------- Parágrafos, abertos por traço opaco ---------- */

.sobre__p {
  border-top: var(--hair) solid var(--line);
  padding-top: var(--sp-lg);
  margin-top: var(--sp-lg);
  /* Sobe de 16 para 17–19px: no corpo anterior o texto sumia ao lado do
     título. */
  font-size: clamp(1.0625rem, 1.25vw, 1.1875rem);
  line-height: 1.6;
  color: var(--muted);
  text-wrap: pretty;
}
.sobre__p:first-of-type { margin-top: clamp(var(--sp-xl), 5vh, var(--sp-2xl)); }
.on-dark .sobre__p { border-top-color: var(--line-invert); color: var(--muted-invert); }


/* ---------- Aparecer ao rolar ---------- */

.anim-pronta .sobre .reveal {
  opacity: 0;
  transform: translate3d(0, 42px, 0);
  filter: blur(10px);
  transition: opacity 1.15s var(--ease-out),
              transform 1.15s var(--ease-out),
              filter 1.15s var(--ease-out);
}
.anim-pronta .sobre .reveal.vis { opacity: 1; transform: none; filter: none; }

.anim-pronta .sobre__foto img {
  transform: scale(1.05);
  transition: transform 1.5s var(--ease-out);
}
.anim-pronta .sobre__foto.vis img { transform: none; }

@media (prefers-reduced-motion: reduce) {
  .anim-pronta .sobre .reveal { opacity: 1; transform: none; filter: none; transition: none; }
  .anim-pronta .sobre__foto img { transform: none; transition: none; }
}


/* ============================================================ FAIXA DE RESPIRO */

.respiro { padding-block: clamp(var(--sp-2xl), 9vw, 9rem); }
.respiro__frase { max-width: 18ch; }


/* ============================================================ 02 ECOSSISTEMA
   Pilha: cada frente é sticky e a seguinte cobre a anterior.       */

.pilha { display: flex; flex-direction: column; gap: var(--sp-md); }

.frente {
  position: sticky;
  /* Cada cartão para um pouco mais abaixo que o anterior */
  top: calc(6rem + var(--i) * var(--sp-sm));
  background: var(--bg-invert);
  border-top: var(--hair-2) solid var(--brand);
  border-bottom: var(--hair) solid var(--line-invert);
  padding-top: var(--sp-lg);
  padding-bottom: var(--sp-2xl);
}
/* Só a primeira ganha a régua laranja; as demais, hairline discreta. */
.frente:not(:first-child) { border-top-color: var(--line-invert); }

.frente__in {
  display: grid;
  gap: var(--sp-md);
  align-items: start;
}
@media (min-width: 800px) {
  /* Faixa lateral estreita fixa + conteúdo */
  .frente__in { grid-template-columns: 5rem minmax(0, 1fr) minmax(0, 1.1fr); gap: var(--sp-lg); }
}
.frente__idx {
  font-size: var(--t-small);
  font-weight: var(--w-bold);
  letter-spacing: .12em;
  color: var(--brand);
  padding-top: .6em;
}
.frente__nome { color: #FFFFFF; }
.frente__itens {
  display: flex;
  flex-direction: column;
  gap: var(--sp-2xs);
  font-size: var(--t-body);
  color: var(--muted-invert);
}
.frente__itens li {
  display: flex;
  align-items: baseline;
  gap: var(--sp-sm);
  padding-block: var(--sp-2xs);
  border-bottom: var(--hair) solid var(--line-invert);
}
/* O último item já é fechado pela borda da própria frente: com os dois,
   saíam dois traços colados entre um tópico e o seguinte. */
.frente__itens li:last-child { border-bottom: 0; }
.frente__itens li::before {
  content: "";
  flex: none;
  width: var(--bullet); height: var(--bullet);
  border-radius: 50%;
  background: var(--brand);
  transform: translateY(-.25em);
}


/* ---------- Balanço − / + ---------- */

.balanco {
  display: grid;
  gap: var(--sp-xl);
  padding-top: var(--sp-xl);
  border-top: var(--hair) solid var(--line-invert);
}
@media (min-width: 800px) { .balanco { grid-template-columns: 1fr 1fr; gap: var(--sp-2xl); } }
.balanco__intro { max-width: 40ch; }
/* O bloco vinha órfão: a pilha já rolou e o título da frente 04 saiu de
   cena, então ele precisa se identificar sozinho. */
.balanco__rotulo { margin-bottom: var(--sp-md); }
@media (min-width: 800px) { .balanco__rotulo { grid-column: 1; } }
.balanco__lista {
  display: flex;
  flex-direction: column;
  font-size: clamp(1.25rem, 2.4vw, 2rem);
  font-weight: var(--w-black);
  letter-spacing: -.035em;
  color: #FFFFFF;
}
.balanco__lista li {
  display: flex;
  align-items: baseline;
  gap: var(--sp-md);
  padding-block: var(--sp-sm);
  border-bottom: var(--hair) solid var(--line-invert);
}
.sinal { color: var(--muted); font-weight: var(--w-light); }
.sinal--mais { color: var(--brand); }


/* ============================================================ 03 PROJETOS */

.projetos { border-top: var(--hair) solid var(--line); }

.projeto { border-bottom: var(--hair) solid var(--line); }
.projeto__link {
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: var(--sp-md);
  align-items: start;
  padding-block: var(--sp-xl);
  transition: padding-inline var(--d-base) var(--ease-out);
}
@media (min-width: 800px) {
  .projeto__link { gap: var(--sp-2xl); }
  .projeto__link:hover { padding-inline: var(--sp-md); }
}
.projeto__num {
  font-size: var(--t-small);
  font-weight: var(--w-bold);
  letter-spacing: .12em;
  color: var(--muted);
  padding-top: .35em;
}
.projeto__corpo { min-width: 0; }

.projeto__tags {
  display: flex;
  align-items: center;
  gap: var(--sp-md);
  flex-wrap: wrap;
  margin-bottom: var(--sp-md);
}
.tag {
  font-size: var(--t-eyebrow);
  font-weight: var(--w-semi);
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--ink);
  padding: .5em .9em;
  border-radius: var(--radius-pill);
  box-shadow: inset 0 0 0 var(--hair) var(--line-2);
}
.projeto__data {
  font-size: var(--t-eyebrow);
  font-weight: var(--w-semi);
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--muted);
}
.projeto__titulo { max-width: 22ch; transition: color var(--d-fast) var(--ease-out); }
.projeto__link:hover .projeto__titulo { color: var(--brand); }
.projeto__ctx { margin-top: var(--sp-sm); max-width: 46ch; }
.projeto__disc { margin-top: var(--sp-md); color: var(--muted); letter-spacing: .02em; }

.projeto__seta {
  display: grid;
  place-items: center;
  width: 46px; height: 46px;
  border-radius: 50%;
  color: var(--ink);
  box-shadow: inset 0 0 0 var(--hair) var(--line-2);
  transition: background var(--d-base) var(--ease-out),
              color var(--d-base) var(--ease-out),
              box-shadow var(--d-base) var(--ease-out);
}
.projeto__link:hover .projeto__seta {
  background: var(--brand);
  color: var(--brand-ink);
  box-shadow: none;
}


/* A esteira de bastidores é faixa própria: dentro do Sobre ela sozinha
   somava 400px e estourava a dobra. */

/* ---------- Tira de bastidores ---------- */

.tira { overflow: hidden; }
.tira__trilha {
  display: flex;
  gap: var(--sp-md);
  width: max-content;
  will-change: transform;
}
.tira__trilha li { flex: none; }
.tira__trilha img {
  width: clamp(180px, 22vw, 300px);
  aspect-ratio: 4 / 5;
  object-fit: cover;
  border-radius: var(--radius-img);
  background: var(--bg-2);
}


/* ============================================================ 04 POR QUÊ */

.porques {
  display: grid;
  gap: var(--sp-xl);
  border-top: var(--hair-2) solid var(--ink);
  padding-top: var(--sp-xl);
}
@media (min-width: 800px) {
  .porques { grid-template-columns: repeat(3, 1fr); gap: var(--sp-2xl); }
}
.porque { display: flex; flex-direction: column; }
@media (max-width: 799px) {
  .porque + .porque { border-top: var(--hair) solid var(--line-2); padding-top: var(--sp-xl); }
}
.porque__idx {
  font-size: var(--t-small);
  font-weight: var(--w-bold);
  letter-spacing: .12em;
  color: var(--brand);
  margin-bottom: var(--sp-md);
}
.porque__t { margin-bottom: var(--sp-sm); }

/* Os três pontos vivem dentro do card de Comunicação clara: é dele que
   eles falam. Soltos no rodapé da seção, repetiam o assunto. */
.sempre {
  margin-top: var(--sp-lg);
  padding-top: var(--sp-md);
  border-top: var(--hair-2) solid var(--brand);
  display: grid;
  gap: var(--sp-2xs);
}
.sempre li {
  display: flex;
  align-items: baseline;
  gap: var(--sp-sm);
  padding-block: var(--sp-2xs);
  font-size: var(--t-small);
  font-weight: var(--w-bold);
  letter-spacing: -.02em;
}
.sempre li + li { border-top: var(--hair) solid var(--line-2); }
.sempre span {
  font-size: var(--t-eyebrow);
  font-weight: var(--w-bold);
  letter-spacing: .1em;
  color: var(--muted);
}

/* ============================================================ 05 PROCESSO */

.processo { border-top: var(--hair-2) solid var(--ink); }

.passo {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: var(--sp-sm) var(--sp-md);
  padding-block: var(--sp-xl);
  border-bottom: var(--hair) solid var(--line);
}
@media (min-width: 800px) {
  .passo {
    grid-template-columns: 5rem minmax(0, .9fr) minmax(0, 1.1fr);
    gap: var(--sp-lg);
    align-items: baseline;
  }
}
.passo__n {
  font-size: var(--t-small);
  font-weight: var(--w-bold);
  letter-spacing: .12em;
  color: var(--brand);
}
.passo__d { max-width: 48ch; }
@media (max-width: 799px) { .passo__d { grid-column: 1 / -1; } }


/* ============================================================ 06 LINKS */

.links { display: grid; gap: var(--sp-sm); max-width: 720px; }

/* No desktop a seção vira duas colunas: cabeçalho à esquerda, links à
   direita. Empilhados, os links ficavam num bloco estreito à esquerda e
   metade da largura sobrava vazia. */
@media (min-width: 900px) {
  #contato .wrap {
    display: grid;
    grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr);
    gap: clamp(var(--sp-2xl), 6vw, 6rem);
    align-items: start;
  }
  #contato .sec-head { max-width: none; position: sticky; top: var(--sp-2xl); }
  #contato .links { margin-top: 0; max-width: none; }
}

.link {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: var(--sp-md);
  padding: var(--sp-md);
  border: var(--hair) solid var(--line-2);
  transition: background var(--d-base) var(--ease-out),
              border-color var(--d-base) var(--ease-out),
              color var(--d-base) var(--ease-out);
}
.link:hover { background: var(--ink); border-color: var(--ink); color: #FFFFFF; }

.link__ico {
  display: grid; place-items: center;
  width: 44px; height: 44px;
  border-radius: 50%;
  background: var(--bg-2);
  color: var(--ink);
  flex: none;
  transition: background var(--d-base) var(--ease-out), color var(--d-base) var(--ease-out);
}
.link:hover .link__ico { background: var(--brand); color: var(--brand-ink); }
.link__ico svg { fill: currentColor; }

.link__txt { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.link__txt b {
  font-weight: var(--w-bold);
  letter-spacing: -.025em;
  font-size: var(--t-body);
}
.link__txt em {
  font-style: normal;
  font-size: var(--t-small);
  color: var(--muted);
  transition: color var(--d-base) var(--ease-out);
}
.link:hover .link__txt em { color: var(--muted-invert); }

.link__seta { flex: none; transition: transform var(--d-base) var(--ease-out); }
.link:hover .link__seta { transform: translate(3px, -3px); }

/* O destaque é o orçamento: fundo laranja, sem exceção no resto. */
.link--destaque { background: var(--brand); border-color: var(--brand); color: var(--brand-ink); }
.link--destaque .link__ico { background: color-mix(in srgb, #000 16%, transparent); color: var(--brand-ink); }
.link--destaque .link__txt em { color: color-mix(in srgb, #FFF 80%, transparent); }
.link--destaque:hover { background: var(--ink); border-color: var(--ink); color: #FFFFFF; }
.link--destaque:hover .link__ico { background: var(--brand); color: var(--brand-ink); }

/* Variante escura: se a seção de links voltar a ser faixa invertida,
   é só recolocar .on-dark que tudo se ajusta. */
.on-dark .link { border-color: var(--line-invert); }
.on-dark .link:hover { background: #FFFFFF; border-color: #FFFFFF; color: var(--ink); }
.on-dark .link__ico { background: var(--line-invert); color: #FFFFFF; }
.on-dark .link:hover .link__ico { background: var(--brand); color: var(--brand-ink); }
.on-dark .link__txt em { color: var(--muted-invert); }
.on-dark .link:hover .link__txt em { color: var(--muted); }
.on-dark .link--destaque { border-color: var(--brand); }
.link--destaque:hover .link__ico { background: var(--brand); color: var(--brand-ink); }


/* ============================================================ RODAPÉ */

.rodape { padding-block: var(--sp-xl); border-top: var(--hair) solid var(--line-invert); }
.rodape__in {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-sm) var(--sp-lg);
  justify-content: space-between;
  align-items: center;
}
.rodape__marca { color: #FFFFFF; }
.rodape__ano { color: var(--muted-invert); }


/* ---------- Logo de plataforma dentro do botão ----------------------
   Vem antes do rótulo, como assinatura de onde o link leva. Herda a cor
   do botão, então funciona no fantasma e no invertido.               */

.btn__logo {
  flex: none;
  fill: currentColor;
  margin-right: calc(var(--sp-2xs) * -1);
}


/* ============================================================ CLIENTES
   Perfil + nome, em esteira. A foto é opcional: sem ela, as iniciais de
   data-inicial ficam no lugar, então a lista já funciona antes de você
   ter as imagens.
   ============================================================ */

/* Encosta na régua que abre a barra de ações: o respiro abaixo dele é
   curto de propósito, para os dois lerem como um bloco só. */
.clientes { overflow: hidden; }
.clientes__trilha {
  display: flex;
  align-items: center;
  gap: clamp(var(--sp-lg), 3vw, var(--sp-2xl));
  width: max-content;
  will-change: transform;
}

.cliente {
  display: flex;
  align-items: center;
  gap: var(--sp-xs);
  white-space: nowrap;
}

.cliente__foto {
  position: relative;
  flex: none;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  overflow: hidden;
  background: var(--bg-2);
  box-shadow: inset 0 0 0 var(--hair) var(--line-2);
  /* As iniciais ficam por baixo; a foto, quando existe, cobre. */
  display: grid;
  place-items: center;
}
.cliente__foto::before {
  content: attr(data-inicial);
  font-size: .6875rem;
  font-weight: var(--w-bold);
  color: var(--muted);
}
.cliente__foto img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.cliente__txt { display: flex; flex-direction: column; line-height: 1.2; }
.cliente__txt b {
  font-size: var(--t-small);
  font-weight: var(--w-bold);
  letter-spacing: -.025em;
}
.cliente__txt em {
  font-style: normal;
  font-size: var(--t-eyebrow);
  color: var(--muted);
}


/* ============================================================ BORDAS DAS ESTEIRAS
   As três esteiras desaparecem nas laterais em vez de serem cortadas
   pela borda. É máscara, não gradiente de cor: o que some é o conteúdo,
   não há tinta nova entrando na paleta.
   ============================================================ */

/* Esteiras aceitam arrastar (main.js). pan-y entrega o gesto horizontal
   ao script e deixa o vertical rolar a página normalmente. */
[data-esteira] {
  touch-action: pan-y;
  cursor: grab;
  user-select: none;
  -webkit-user-select: none;
}
[data-esteira].arrastando { cursor: grabbing; }
[data-esteira] img { -webkit-user-drag: none; user-drag: none; pointer-events: none; }

.clientes,
.esteira,
.tira {
  --fade: clamp(1.5rem, 7vw, 9rem);
  -webkit-mask-image: linear-gradient(90deg,
    transparent 0,
    #000 var(--fade),
    #000 calc(100% - var(--fade)),
    transparent 100%);
  mask-image: linear-gradient(90deg,
    transparent 0,
    #000 var(--fade),
    #000 calc(100% - var(--fade)),
    transparent 100%);
}

/* O carrossel de clientes é estreito: a máscara ali precisa ser curta,
   senão come metade dos nomes. */
.clientes { --fade: clamp(1rem, 3vw, 3.5rem); }


/* ============================================================ COBERTURA
   Tudo que vem depois do hero passa por cima dele. Precisa de fundo
   próprio (resolvido em .section e aqui) e de ficar acima na pilha.
   ============================================================ */

main > .hero ~ * { position: relative; z-index: 1; }
/* Padding, não margem: a margem de um filho escapa da seção quando ela
   não tem borda nem padding no topo, e o vão que sobrava deixava o hero
   grudado aparecer por baixo. */
.bastidores {
  background: var(--bg);
  padding-block: var(--section-y-s);
}