/* =============================================================
   FASE 5 — CAMADA DE SUBSTITUIÇÃO
   Só a MARCA muda. Este arquivo redefine exclusivamente os tokens
   de cor; grade, escala tipográfica, ritmo de espaço, anatomia dos
   componentes e comportamento continuam os mesmos, que é o que a
   Fase 1 existiu para produzir.

   Paleta: a do laudo (_rascunhos/design-contract.md).
   Carregar DEPOIS de design-tokens.css.
   ============================================================= */

:root {
  /* papel e tinta do laudo, no lugar do cinza do NexStudio */
  --color-bg:            #F3F1EC;   /* era #e9e9e7 */
  --color-text:          #15171B;   /* era #111    */
  --color-text-muted:    #A9A79F;   /* era #aeaeaa */
  --color-brand:         #1447C4;   /* era #178f9d */
  --color-surface-dark:  #101114;   /* era #0d0d0d */
  --color-paper:         #F3F1EC;   /* era #f1f0ec */
  --color-chrome:        #EDEBE5;   /* era #f4f4f2 */

  /* a faixa do contato: no original é verde-água decorativo.
     Aqui é o azul do sinal, a única tela saturada do site, no
     exato ponto em que se pede a ação. */
  --color-surface-mint:  #1447C4;
  --color-text-contact:  #F3F1EC;

  /* linhas: mesmas funções, recalculadas sobre a tinta nova */
  --color-border-ink:      rgba(21, 23, 27, .2);
  --color-border-ink-soft: rgba(21, 23, 27, .11);
  --color-border-paper:      rgba(243, 241, 236, .24);
  --color-border-paper-soft: rgba(243, 241, 236, .28);
  --color-border-contact:    rgba(243, 241, 236, .38);

  /* ---------- TRACKING ----------
     O original é em inglês. Os mesmos valores negativos, aplicados
     a texto em português (mais acento, outros pares de letras),
     colam as palavras. Afrouxei cerca de .02em em cada display e
     abri o espaço entre palavras, que é o que separa de fato.
     A escala de corpo e a entrelinha continuam iguais. */
  --tracking-intro:    -.055em;   /* era -.085em */
  --tracking-contact:  -.045em;   /* era -.075em */
  --tracking-work:     -.05em;    /* era -.074em */
  --tracking-counter:  -.045em;   /* era -.065em */
  --tracking-project:  -.042em;   /* era -.062em */
  --tracking-about:    -.035em;   /* era -.06em  */
  --tracking-email:    -.03em;    /* era -.055em */
  --tracking-wordmark: -.06em;    /* era -.085em */

  /* placas dos projetos: no original, três pastéis decorativos.
     Aqui, dois tons de papel e um tom do sinal. A cor deixa de ser
     enfeite e passa a marcar qual projeto tem IA por dentro. */
  --project-1: #D8D4CA;   /* Portal Atlas      — papel escurecido */
  --project-2: #C6CBD6;   /* Cherry Store      — papel frio       */
  --project-3: #9FB2DE;   /* Oráculo Business  — tom do sinal     */
}

/* a fita do Awwwards é do NexStudio e sai aqui */
.fita { display: none !important; }

/* Tracking negativo aperta a LETRA e, de quebra, come o espaço entre
   palavras. Devolver um pouco de word-spacing separa as palavras sem
   afrouxar o desenho do tipo, que é o que dá a densidade do original. */
.about__copy,
.work__header h2,
.projeto__cabeca h3,
.contato__corpo h2,
.contato__intro-titulo,
.loader__marca { word-spacing: .07em; }

/* a caixa alta em português precisa de mais ar que em inglês */
.work__header h2 { word-spacing: .1em; }

/* o contato inverte: campo saturado, tinta em papel. O contorno
   vazado da última linha precisa ser recalculado para o papel. */
/* No original a última linha é vazada em contorno. Aqui ela passa a
   ser preenchimento suave: mesma hierarquia (a linha recua), sem a
   aspereza do stroke em corpo grande. */
.contato__linha--vazada > span {
  -webkit-text-stroke: 0;
  color: rgba(243, 241, 236, .52);
}
.contato__email { border-color: rgba(243, 241, 236, .55); }
.contato__email::before { background: var(--color-paper); }
.contato__email:hover, .contato__email:focus-visible { color: var(--color-brand); }
.contato__email:hover .contato__email-icone,
.contato__email:focus-visible .contato__email-icone { background: var(--color-brand); color: var(--color-paper); }
.contato__header span:first-child { color: rgba(243, 241, 236, .58); }
.contato__sticky::before { color: rgba(243, 241, 236, .07); }
.contato__sticky {
  background:
    radial-gradient(circle at 82% 18%, rgba(255, 255, 255, .13), transparent 28%),
    var(--color-surface-mint);
}
.contato__cortina {
  background: radial-gradient(circle at 50% 48%, rgba(20, 71, 196, .16), transparent 28%), #0B0D12;
}
.contato__intro { color: var(--color-paper); }
.contato__intro-k, .contato__intro-rolar { border-top-color: rgba(243, 241, 236, .42); }
.contato__intro-titulo span:last-child {
  -webkit-text-stroke: 0;
  color: rgba(243, 241, 236, .46);
}

/* o número gigante sobre as placas claras precisa de mais peso de
   contraste do que tinha sobre os pastéis do original */
.projeto__numero { color: rgba(21, 23, 27, .13); }


/* =============================================================
   STATUS DO PROJETO
   Terceiro item da linha de topo de cada projeto: um ponto e a
   fase. "feito" usa o papel; "breve" usa o azul do sinal.
   ============================================================= */
.projeto__status { display: inline-flex; align-items: center; gap: 10px; }
.projeto__status > i { width: 7px; height: 7px; border-radius: 50%; background: currentColor; }
.projeto__status[data-fase="breve"] { color: var(--project-3); }
.projeto__status[data-fase="breve"] > i { animation: vaga-pulso 2.2s ease-in-out infinite; }
.projeto__topo > .projeto__status { transition-delay: .155s; }
@media (max-width: 640px) { .projeto__status { display: none; } }

/* =============================================================
   VAGA DE BRANDING
   Chamada ao fim da lista de trabalho, na mesma anatomia dos
   projetos (linha de topo, título com máscara, coluna de texto).
   Só o botão é novo, e ele repete o desenho do "Ver o projeto".
   ============================================================= */
.vaga { position: relative; margin-top: var(--gap-projects); }
.vaga__topo {
  position: relative;
  display: flex; align-items: center; justify-content: space-between;
  padding: var(--space-3) 0 20px;
  font-size: var(--text-label); font-weight: var(--weight-semibold);
  letter-spacing: var(--tracking-topline); text-transform: uppercase;
}
.vaga__topo::before {
  content: ""; position: absolute; top: 0; left: 0; right: 0; height: 1px;
  background: var(--color-border-paper);
  transform: scaleX(0); transform-origin: left; transition: transform .95s var(--ease);
}
.vaga__topo > span { display: inline-flex; align-items: center; gap: 10px; opacity: 0; transform: translateY(14px); transition: opacity .55s .12s, transform .75s var(--ease) .12s; }
.vaga__topo > span > i { width: 7px; height: 7px; border-radius: 50%; background: var(--project-3); animation: vaga-pulso 2.2s ease-in-out infinite; }
.vaga__corpo {
  display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(280px, .75fr);
  align-items: end; gap: 7vw; padding-bottom: var(--space-8);
}
.vaga__corpo h3 {
  font-size: var(--display-project); font-weight: var(--weight-display);
  line-height: var(--leading-project); letter-spacing: var(--tracking-project);
  word-spacing: .07em;
}
.vaga__corpo .linha-mascara { display: block; overflow: hidden; }
.vaga__corpo .linha-mascara > span { display: block; transform: translateY(110%) rotate(1.5deg); transform-origin: 0 100%; transition: transform 1.05s var(--ease) .12s; }
.vaga__corpo .linha-mascara:last-child > span { transition-delay: .2s; color: var(--project-3); }
.vaga__lado { display: grid; gap: var(--space-5); }
.vaga__lado p {
  max-width: 36ch; font-size: var(--text-project-lead); font-weight: var(--weight-soft);
  line-height: var(--leading-body); opacity: 0; transform: translateY(18px);
  transition: opacity .6s .3s, transform .8s var(--ease) .3s;
}
.vaga__cta {
  justify-self: start; display: inline-flex; align-items: center; gap: 14px;
  padding: 16px 22px 16px 26px; border-radius: 999px;
  background: var(--color-bg); color: var(--color-surface-dark);
  font-size: var(--text-label); font-weight: var(--weight-semibold);
  letter-spacing: var(--tracking-topline); text-transform: uppercase;
  opacity: 0; transform: translateY(18px) scale(.96);
  transition: opacity .6s .42s, transform .8s var(--ease) .42s, background .26s, color .26s;
}
.vaga__cta svg { width: 17px; height: 17px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; transition: transform .26s; }
.vaga__cta:hover, .vaga__cta:focus-visible { background: var(--project-3); color: var(--color-surface-dark); }
.vaga__cta:hover svg { transform: translateX(5px); }
.vaga[data-entrou="true"] .vaga__topo::before { transform: scaleX(1); }
.vaga[data-entrou="true"] .vaga__topo > span { opacity: .58; transform: translateY(0); }
.vaga[data-entrou="true"] .linha-mascara > span { transform: translateY(0) rotate(0); }
.vaga[data-entrou="true"] .vaga__lado p { opacity: .68; transform: translateY(0); }
.vaga[data-entrou="true"] .vaga__cta { opacity: 1; transform: translateY(0) scale(1); }
@keyframes vaga-pulso { 0%, 100% { opacity: 1; transform: scale(1); } 50% { opacity: .35; transform: scale(.7); } }
@media (max-width: 640px) {
  .vaga__corpo { grid-template-columns: 1fr; gap: var(--space-6); }
}


/* =============================================================
   MARCAS E ÍNDICE DE ENTREGAS
   Mural de logos sobre a tela escura do trabalho, seguido do
   índice do que já foi entregue, em três grupos. Os logos chegam
   em cores e pesos diferentes: normalizo todos para papel puro
   (brightness 0 + invert) e devolvo a cor só no hover, que é o
   que mantém o mural com uma leitura só.
   ============================================================= */
.marcas { position: relative; margin-top: var(--gap-projects); }
.marcas__topo {
  position: relative;
  display: flex; align-items: center; justify-content: space-between;
  padding: var(--space-3) 0 20px;
  font-size: var(--text-label); font-weight: var(--weight-semibold);
  letter-spacing: var(--tracking-topline); text-transform: uppercase;
}
.marcas__topo::before {
  content: ""; position: absolute; top: 0; left: 0; right: 0; height: 1px;
  background: var(--color-border-paper);
  transform: scaleX(0); transform-origin: left; transition: transform .95s var(--ease);
}
.marcas__topo > span { opacity: 0; transform: translateY(14px); transition: opacity .55s .12s, transform .75s var(--ease) .12s; }
.marcas__topo > span:last-child { transition-delay: .19s; }

.marcas__mural {
  display: flex; flex-wrap: wrap; align-items: center;
  gap: clamp(30px, 4.4vw, 68px);
  padding: clamp(36px, 5vw, 66px) 0 clamp(40px, 5.5vw, 72px);
}
.marcas__mural img {
  height: var(--h); width: auto; max-width: 168px;
  object-fit: contain;
  filter: brightness(0) invert(1);
  opacity: 0; transform: translateY(16px);
  transition: opacity .7s var(--ease), transform .9s var(--ease), filter .3s;
  transition-delay: calc(.14s + var(--i) * .035s);
}
.marcas[data-entrou="true"] .marcas__mural img { opacity: .52; transform: translateY(0); }
.marcas__mural img:hover { opacity: 1; }

.marcas__indice {
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(28px, 3.4vw, 56px);
  padding-bottom: var(--space-8);
  border-top: 1px solid var(--color-border-paper-soft);
  padding-top: clamp(28px, 3.4vw, 52px);
}
.marcas__grupo h4 {
  margin-bottom: 18px;
  font-size: var(--text-label); font-weight: var(--weight-semibold);
  letter-spacing: var(--tracking-topline); text-transform: uppercase;
  opacity: 0; transform: translateY(16px);
  transition: opacity .6s .28s, transform .8s var(--ease) .28s;
}
.marcas[data-entrou="true"] .marcas__grupo h4 { opacity: .42; transform: translateY(0); }
.marcas__grupo ul { display: grid; gap: 2px; list-style: none; margin: 0; padding: 0; }
.marcas__grupo li > * {
  display: flex; align-items: baseline; justify-content: space-between; gap: 16px;
  padding: 11px 0;
  border-bottom: 1px solid var(--color-border-paper-soft);
  font-size: var(--text-project-lead); font-weight: var(--weight-soft);
  line-height: 1.25;
  opacity: 0; transform: translateY(16px);
  transition: opacity .6s var(--ease), transform .8s var(--ease), color .24s, border-color .24s;
}
.marcas__grupo li:nth-child(1) > * { transition-delay: 0.34s; }
.marcas__grupo li:nth-child(2) > * { transition-delay: 0.39s; }
.marcas__grupo li:nth-child(3) > * { transition-delay: 0.43s; }
.marcas__grupo li:nth-child(4) > * { transition-delay: 0.48s; }
.marcas__grupo li:nth-child(5) > * { transition-delay: 0.52s; }
.marcas__grupo li:nth-child(6) > * { transition-delay: 0.57s; }
.marcas__grupo li:nth-child(7) > * { transition-delay: 0.61s; }
.marcas__grupo li:nth-child(8) > * { transition-delay: 0.66s; }
.marcas__grupo li:nth-child(9) > * { transition-delay: 0.70s; }
.marcas__grupo li:nth-child(10) > * { transition-delay: 0.75s; }
.marcas[data-entrou="true"] .marcas__grupo li > * { opacity: 1; transform: translateY(0); }
.marcas__grupo li > * > span:last-child {
  flex: none;
  font-size: var(--text-label); letter-spacing: var(--tracking-topline);
  text-transform: uppercase; opacity: .4;
}
.marcas__grupo a:hover, .marcas__grupo a:focus-visible { color: var(--project-3); border-color: var(--project-3); }
.marcas[data-entrou="true"] .marcas__grupo .marcas__fechado { opacity: .46; }
.marcas[data-entrou="true"] .marcas__topo::before { transform: scaleX(1); }
.marcas[data-entrou="true"] .marcas__topo > span { opacity: .58; transform: translateY(0); }

@media (max-width: 900px) { .marcas__indice { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 640px) {
  .marcas__indice { grid-template-columns: 1fr; }
  .marcas__mural { gap: 26px 34px; }
  .marcas__mural img { height: calc(var(--h) * .78); }
}
@media (prefers-reduced-motion: reduce) {
  .marcas__mural img, .marcas__grupo h4, .marcas__grupo li > * { transition: none; }
}

/* A Record nao e um desenho chapado: e uma esfera com sombreado. Com
   brightness(0) ela virava uma bolha branca sem leitura. Inverter sem
   achatar preserva o volume e ela continua sendo a Record. */
.marcas__mural img[data-tom="volume"] { filter: grayscale(1) invert(1); }
.marcas[data-entrou="true"] .marcas__mural img[data-tom="volume"] { opacity: .7; }


/* =============================================================
   NAV SÓLIDA FORA DA HERO
   Na hero o nav vive em mix-blend-mode difference, como no
   original: ele se inverte contra o vidro e contra o tipo. Isso
   só funciona sobre um fundo. Assim que a hero sai de cena, a
   barra ganha corpo próprio e o blend é desligado, senão o texto
   inverteria contra a própria barra.
   ============================================================= */
.nav {
  transition: background .4s var(--ease-soft), backdrop-filter .4s,
              padding .4s var(--ease-soft), box-shadow .4s;
}
.nav[data-solido="true"] {
  mix-blend-mode: normal;
  color: var(--color-bg);
  background: rgba(16, 17, 20, .82);
  backdrop-filter: blur(16px) saturate(1.3);
  -webkit-backdrop-filter: blur(16px) saturate(1.3);
  padding-top: calc(var(--nav-y) * .62);
  padding-bottom: calc(var(--nav-y) * .62);
  box-shadow: inset 0 -1px 0 var(--color-border-paper-soft);
}
@media (prefers-reduced-motion: reduce) { .nav { transition: none; } }

/* o botão do painel: mesmo corpo dos links, com um ponto vivo */
.nav__quem {
  display: inline-flex; align-items: center; gap: 9px;
  font: inherit;
  font-size: var(--text-nav); font-weight: var(--weight-medium);
  letter-spacing: var(--tracking-nav); text-transform: uppercase;
  color: inherit; background: none; border: 0; padding: 0;
  cursor: pointer; opacity: .7; transition: opacity .25s;
}
.nav__quem:hover, .nav__quem:focus-visible, .nav__quem[aria-expanded="true"] { opacity: 1; }
.nav__quem-ponto {
  width: 7px; height: 7px; border-radius: 50%;
  background: currentColor;
  animation: vaga-pulso 2.2s ease-in-out infinite;
}
/* "O que Hans faz?" cabe inteiro em qualquer largura, então não há
   mais versão curta. Em telas bem estreitas, quem sai é "Método",
   porque a mesma resposta está dentro do painel. */
@media (max-width: 560px) {
  .nav__links > li:nth-child(2) { display: none; }
}

/* =============================================================
   PAINEL "QUEM É HANS WERNER"
   Entra pela direita na tela azul do contato, que é a única cor
   saturada do site. Mesma anatomia das outras seções: microtítulo
   em caixa alta, display com máscara, listas em duas colunas
   separadas por fio.
   ============================================================= */
.quem__fundo {
  position: fixed; inset: 0; z-index: 40;
  background: rgba(16, 17, 20, .55);
  backdrop-filter: blur(3px);
  opacity: 0; transition: opacity .5s var(--ease-soft);
}
.quem__fundo[data-aberto="true"] { opacity: 1; }

.quem {
  position: fixed; top: 0; right: 0; bottom: 0; z-index: 41;
  display: flex; flex-direction: column;
  width: min(560px, 100vw);
  background: var(--color-surface-mint);
  color: var(--color-text-contact);
  transform: translateX(100%);
  transition: transform .72s var(--ease);
  will-change: transform;
}
.quem[data-aberto="true"] { transform: translateX(0); }

.quem__barra {
  flex: none;
  display: flex; align-items: center; justify-content: space-between;
  padding: var(--space-4) var(--space-5);
  border-bottom: 1px solid var(--color-border-contact);
  font-size: var(--text-label); font-weight: var(--weight-semibold);
  letter-spacing: var(--tracking-topline); text-transform: uppercase;
}
.quem__fechar {
  display: grid; place-items: center;
  width: 40px; height: 40px; margin: -8px -8px -8px 0;
  color: inherit; background: none; border: 0; cursor: pointer;
  border-radius: 50%; transition: background .24s, transform .24s;
}
.quem__fechar svg { width: 19px; height: 19px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; }
.quem__fechar:hover, .quem__fechar:focus-visible { background: rgba(243, 241, 236, .16); transform: rotate(90deg); }

.quem__rolo {
  flex: 1; min-height: 0;
  overflow-y: auto; overscroll-behavior: contain;
  padding: var(--space-5) var(--space-5) var(--space-7);
  display: grid; gap: var(--space-5);
}

.quem__retrato { margin: 0; }
.quem__retrato img {
  /* height:auto e obrigatorio: sem ele o atributo height do <img>
     conta como altura definida e o aspect-ratio nao entra */
  width: 100%; height: auto; aspect-ratio: 900 / 760;
  object-fit: cover; object-position: 50% 28%;
  border-radius: var(--radius-media);
  filter: saturate(.42) contrast(1.05);
}
.quem__retrato figcaption {
  padding-top: 12px;
  font-size: var(--text-label); font-weight: var(--weight-semibold);
  letter-spacing: var(--tracking-topline); text-transform: uppercase;
  opacity: .58;
}

.quem__titulo {
  font-size: clamp(34px, 7.2vw, 54px);
  font-weight: var(--weight-display);
  line-height: .96;
  letter-spacing: var(--tracking-contact);
  word-spacing: .07em;
}
.quem__titulo .linha-mascara { display: block; overflow: hidden; }
.quem__titulo .linha-mascara > span { display: block; transform: translateY(110%); transition: transform .9s var(--ease) .2s; }
.quem__titulo .linha-mascara:last-child > span { transition-delay: .28s; opacity: .62; }
.quem[data-aberto="true"] .quem__titulo .linha-mascara > span { transform: translateY(0); }

.quem__lead {
  max-width: 44ch;
  font-size: var(--text-project-lead); font-weight: var(--weight-soft);
  line-height: var(--leading-body); opacity: .82;
}

.quem__bloco { display: grid; gap: 14px; }
.quem__k {
  font-size: var(--text-label); font-weight: var(--weight-semibold);
  letter-spacing: var(--tracking-topline); text-transform: uppercase; opacity: .52;
}
.quem__lista { list-style: none; margin: 0; padding: 0; display: grid; gap: 0; }
.quem__lista li {
  display: grid; grid-template-columns: minmax(0, 8.5rem) minmax(0, 1fr);
  gap: 16px; align-items: baseline;
  padding: 12px 0;
  border-top: 1px solid var(--color-border-contact);
  line-height: 1.32;
}
.quem__lista li:last-child { border-bottom: 1px solid var(--color-border-contact); }
.quem__lista li > span:first-child { font-weight: var(--weight-semibold); }
.quem__lista li > span:last-child { opacity: .72; }
.quem__lista--seis li > span:last-child { font-size: .94em; }

.quem__cta {
  justify-self: start;
  display: inline-flex; align-items: center; gap: 14px;
  margin-top: var(--space-2);
  padding: 16px 22px 16px 26px; border-radius: 999px;
  background: var(--color-text-contact); color: var(--color-surface-mint);
  font-size: var(--text-label); font-weight: var(--weight-semibold);
  letter-spacing: var(--tracking-topline); text-transform: uppercase;
  transition: transform .26s var(--ease-soft);
}
.quem__cta svg { width: 17px; height: 17px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; transition: transform .26s; }
.quem__cta:hover svg { transform: translateX(5px); }
.quem__cta:hover { transform: translateY(-2px); }

/* a seta do cursor sumiria contra o azul; dentro do painel ela some
   e o ponteiro do sistema volta, que é o que se espera de um painel */
.quem, .quem__fundo { cursor: auto; }

@media (max-width: 640px) {
  .quem { width: 100vw; }
  .quem__rolo { padding: var(--space-4) 22px var(--space-6); }
  .quem__lista li { grid-template-columns: 1fr; gap: 4px; }
}
@media (prefers-reduced-motion: reduce) {
  .quem, .quem__fundo, .quem__titulo .linha-mascara > span { transition: none; }
}


/* =============================================================
   AJUSTES FINOS DE FECHAMENTO
   ============================================================= */

/* O bloco do método é curto e vive sozinho no meio da tela. Em
   inglês, alinhado à esquerda, ele funcionava como parágrafo; em
   português, com as linhas mais desiguais, centrado ele vira bloco
   e o eixo bate com o resto da seção. */
.about__copy { text-align: center; }
.about__palavra:not(:last-child) { margin-right: .22em; }

/* O número gigante ao fundo do contato marcava a terceira seção.
   No fim do site ele não precisa mais contar nada, e a marca d'água
   passa a ser um aceno. Sobe o peso e a opacidade porque ":)" tem
   muito menos tinta que "03". */
.contato__sticky::before {
  content: ":)";
  right: .06em; bottom: .04em;
  font-size: min(48vw, 44rem);
  line-height: .9;
  letter-spacing: -.02em;
  color: rgba(7, 17, 17, .085);
}
@media (max-width: 640px) {
  .contato__sticky::before { font-size: 80vw; right: .02em; }
}

/* A bolinha do botão no azul do painel que ela abre. Só quando a nav
   já está sólida: sobre a hero a barra vive em mix-blend-mode
   difference, e ali qualquer cor chapada sai invertida (o azul
   viraria laranja). Enquanto isso ela segue a cor da própria barra. */
.nav[data-solido="true"] .nav__quem-ponto {
  background: #E33B2E;
  box-shadow: 0 0 0 3px rgba(227, 59, 46, .3);
}

/* =============================================================
   DESCIDAS DAS LETRAS DENTRO DAS MÁSCARAS
   As máscaras de entrada cortam com overflow:hidden. O original é
   em inglês e em caixa alta nesses títulos; em português aparecem
   g, p, q minúsculos, e a perna da letra batia no corte ("Billions
   Networkin_"). Abro espaço embaixo e puxo de volta com margem
   negativa, então o corte continua no mesmo lugar e a letra cabe.
   ============================================================= */
.projeto__cabeca h3 { padding-bottom: .18em; margin-bottom: -.18em; }
.linha-mascara { padding-bottom: .18em; margin-bottom: -.18em; }
.vaga__corpo .linha-mascara,
.quem__titulo .linha-mascara { padding-bottom: .18em; margin-bottom: -.18em; }

/* =============================================================
   MINI CTA NO PÉ DE CADA COLUNA
   Um convite por grupo, no corpo dos rótulos e não no do título:
   ele fecha a coluna sem competir com a lista. Só ganha cor ao
   passar o ponteiro, que é quando deixa de ser legenda e vira
   botão.
   ============================================================= */
.marcas__cta {
  display: inline-flex; align-items: center; gap: 9px;
  margin-top: 16px;
  font-size: var(--text-label); font-weight: var(--weight-semibold);
  letter-spacing: var(--tracking-topline); text-transform: uppercase;
  opacity: 0; transform: translateY(14px);
  transition: opacity .6s .62s, transform .8s var(--ease) .62s, color .24s;
}
.marcas[data-entrou="true"] .marcas__cta { opacity: .48; transform: translateY(0); }
.marcas__cta svg { width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; transition: transform .26s; }
.marcas[data-entrou="true"] .marcas__cta:hover,
.marcas[data-entrou="true"] .marcas__cta:focus-visible { opacity: 1; color: var(--project-3); }
.marcas__cta:hover svg { transform: translateX(4px); }

/* =============================================================
   ÚLTIMOS AJUSTES DE COR E LIMPEZA
   ============================================================= */

/* Os numerais gigantes atrás de cada case pertencem ao original e
   aqui só disputam atenção com a captura do projeto. Saem. */
.projeto__numero { display: none !important; }

/* A segunda linha da vaga e os convites das colunas passam a usar o
   azul do painel, a mesma cor que a marca já usa no contato. */
.vaga__corpo .linha-mascara:last-child > span { color: var(--color-surface-mint); }
.marcas[data-entrou="true"] .marcas__cta { color: var(--color-surface-mint); opacity: 1; }
.marcas[data-entrou="true"] .marcas__cta:hover,
.marcas[data-entrou="true"] .marcas__cta:focus-visible { color: var(--project-3); }

/* =============================================================
   ONDE O AZUL APARECE
   A regra do original é dura: o acento tem dois usos no site
   inteiro. Eu mantenho a disciplina e só amplio onde o azul
   informa em vez de enfeitar.

   1. Os três contadores de seção (01, 02, 03). O 01 já era azul;
      agora os três combinam e o número vira o fio condutor.
      Sobre as telas escuras o azul chapado morre, então lá entra
      a versão clara da mesma família.
   2. A seleção de texto: aparece só quando alguém está lendo com
      o mouse, que é quando a marca pode piscar.
   3. O anel de foco no papel: quem navega por teclado passa a ver
      a marca em vez de um contorno preto.
   ============================================================= */
.work__conta { color: var(--project-3); }
.contato__header > span:first-child { color: rgba(243, 241, 236, .62); }
.marcas__topo > span:last-child { color: var(--project-3); opacity: 1; }
.marcas[data-entrou="true"] .marcas__topo > span:last-child { opacity: 1; }

::selection { background: var(--color-surface-mint); color: var(--color-paper); }

.about :focus-visible,
.hero :focus-visible,
.nav[data-solido="false"] :focus-visible { outline-color: var(--color-brand); }

/* =============================================================
   A VAGA EM PAPEL
   A seção de trabalho é uma tela escura contínua. A vaga é a única
   coisa ali que pede ação, e inverter a tela é o jeito mais direto
   de dizer isso sem aumentar corpo nem cor. A faixa sangra até a
   borda porque ela é um corte na tela escura, não um cartão em
   cima dela.
   ============================================================= */
.vaga {
  margin-left: calc(var(--pad-x) * -1);
  margin-right: calc(var(--pad-x) * -1);
  padding: var(--space-10) var(--pad-x) var(--space-11);
  background: var(--color-bg);
  color: var(--color-surface-dark);
}
.vaga__topo::before { background: var(--color-border-ink); }
.vaga__corpo { padding-bottom: var(--space-6); }
.vaga__cta {
  background: var(--color-surface-dark);
  color: var(--color-bg);
}
.vaga__cta:hover, .vaga__cta:focus-visible {
  background: var(--color-surface-mint);
  color: var(--color-paper);
}

/* =============================================================
   HERO RESPONSIVA
   No original o bloco de tipo tem largura fixa de 1.128 x a altura
   da viewport e é CORTADO em telas estreitas. Isso é fiel, e é
   ruim no celular: some metade da palavra. Aqui a largura passa a
   ser a menor entre a medida original e a largura útil da tela, e
   o ajuste por linha (que já existe no JS) faz o resto: o tipo
   encolhe junto em vez de sair pela borda.
   ============================================================= */
.hero__tipo {
  width: min(calc(var(--hero-scene) * 1svh), calc(100vw - var(--pad-x) * 2));
}

/* =============================================================
   VAGA: AS ETAPAS E A FITA
   Duas adições, cada uma com um trabalho.
   As ETAPAS respondem à pergunta que o dono da empresa faz depois
   de ler o título ("o que exatamente vai acontecer?"). Três linhas,
   numeradas, no mesmo desenho do índice de entregas.
   A FITA é o movimento: uma faixa que atravessa a seção devagar,
   em laço contínuo. É o único elemento do site que anda sozinho
   fora da hero, e por isso ela fica no fio de baixo, onde marca a
   saída da faixa branca sem disputar com o título.
   ============================================================= */
.vaga__etapas {
  list-style: none; margin: var(--space-3) 0 0; padding: 0;
  display: grid; gap: 0;
  counter-reset: etapa;
}
.vaga__etapas li {
  display: grid; grid-template-columns: 2.6rem minmax(0, 1fr);
  gap: 14px; align-items: baseline;
  padding: 11px 0;
  border-top: 1px solid var(--color-border-ink-soft);
  font-size: var(--text-label); font-weight: var(--weight-medium);
  letter-spacing: .01em; text-transform: none; line-height: 1.35;
  opacity: 0; transform: translateY(14px);
  transition: opacity .6s var(--ease), transform .8s var(--ease);
}
.vaga__etapas li:last-child { border-bottom: 1px solid var(--color-border-ink-soft); }
.vaga__etapas li:nth-child(1) { transition-delay: .5s; }
.vaga__etapas li:nth-child(2) { transition-delay: .56s; }
.vaga__etapas li:nth-child(3) { transition-delay: .62s; }
.vaga[data-entrou="true"] .vaga__etapas li { opacity: 1; transform: translateY(0); }
.vaga__etapas li > span:first-child {
  font-weight: var(--weight-semibold); letter-spacing: var(--tracking-topline);
  color: var(--color-surface-mint);
}
.vaga__etapas li > span:last-child { opacity: .66; }

.vaga__fita {
  margin: var(--space-10) calc(var(--pad-x) * -1) calc(var(--space-11) * -1);
  padding: 18px 0;
  border-top: 1px solid var(--color-border-ink-soft);
  overflow: hidden;
  opacity: 0; transition: opacity .8s .7s;
}
.vaga[data-entrou="true"] .vaga__fita { opacity: 1; }
.vaga__fita-trilho {
  display: flex; width: max-content;
  /* o passo é a largura de UMA cópia, medida no JS. Animar em -50%
     só funciona quando as duas cópias juntas cobrem a tela inteira;
     com o texto mais curto que a faixa, sobrava um buraco no fim de
     cada volta. */
  --fita-passo: 0px;
  animation: fita-anda 38s linear infinite;
}
.vaga__fita-trilho > span {
  display: inline-flex; align-items: center;
  padding-right: 0;
  font-size: var(--text-label); font-weight: var(--weight-semibold);
  letter-spacing: var(--tracking-topline); text-transform: uppercase;
  white-space: nowrap; opacity: .38;
}
.vaga__fita-trilho i {
  display: inline-block; width: 7px; height: 7px; margin: 0 26px;
  border-radius: 50%; background: var(--color-surface-mint); opacity: .8;
}
@keyframes fita-anda { to { transform: translateX(calc(var(--fita-passo) * -1)); } }
/* pausa só com o ponteiro sobre a própria faixa. Antes valia para a
   seção inteira, e ela parava toda vez que o ponteiro passava por
   qualquer canto da vaga, o que parecia defeito. */
.vaga__fita:hover .vaga__fita-trilho { animation-play-state: paused; }

@media (max-width: 640px) {
  .vaga__etapas li { grid-template-columns: 2.2rem minmax(0, 1fr); gap: 10px; }
}
@media (prefers-reduced-motion: reduce) {
  .vaga__fita-trilho { animation: none; }
  .vaga__etapas li { transition: none; }
}

/* =============================================================
   FECHAMENTO DA SEÇÃO DE TRABALHO
   O original fecha a tela escura com um valor fixo (180px) porque
   ali o último bloco era sempre um projeto. Aqui entraram o mural
   e a vaga, e o ritmo interno da seção passou a ser --gap-projects,
   que encolhe com a tela (190px no desktop, 120px no tablet). Com
   o fecho fixo, o vão final ficava 50% maior que todos os outros
   em telas médias. Agora ele usa a mesma medida e o intervalo é o
   mesmo do topo ao fim.
   ============================================================= */
.work { padding-bottom: var(--gap-projects); }

/* =============================================================
   LEGIBILIDADE NO CELULAR
   O original encolhe os rótulos para 9px (e o micro para 8px) em
   tela pequena. Funciona lá porque são três palavras em inglês,
   sempre em caixa alta e sempre como etiqueta. Aqui esses mesmos
   tokens carregam frase de verdade em português, e 9px vira um
   texto que ninguém lê no telefone.

   Dois movimentos:
   1. O piso dos rótulos sobe para 11px (micro para 10px). Continua
      pequeno e subordinado, mas é lido.
   2. Onde o corpo de rótulo estava sendo usado para PROSA (o escopo
      de cada case, as etapas da vaga, a chamada do contato), o texto
      passa para 13px com entrelinha de leitura. Etiqueta continua
      etiqueta; frase vira frase.
   ============================================================= */
@media (max-width: 640px) {
  :root {
    --text-label: 11px;
    --text-meta: 11px;
    --text-micro: 10px;
  }

  /* prosa que estava em corpo de etiqueta */
  .projeto__footer > p {
    font-size: 13px;
    line-height: 1.45;
    letter-spacing: .02em;
  }
  .vaga__etapas li {
    font-size: 13px;
    line-height: 1.45;
    padding: 13px 0;
  }
  .contato__corpo > p {
    font-size: 13px;
    letter-spacing: .06em;
  }

  /* a lista de entregas ganha ar: são duas informações por linha */
  .marcas__grupo li > * { padding: 13px 0; }
}

/* =============================================================
   ENTRADA DO CONTATO NO CELULAR
   As duas linhas são dimensionadas para preencher a largura do
   bloco, e o token do original entrega 343px de linha dentro de
   331px de área útil: as duas estouravam 12px de cada lado, o
   ponto final da segunda ficava cortado na borda. O corpo passa a
   ser calculado em vw, com folga, e a proporção entre as linhas
   (.7) continua a mesma, que é o que mantém as duas com a mesma
   largura e o bloco fechado dos dois lados.
   ============================================================= */
@media (max-width: 640px) {
  :root { --display-contact-intro: 17.4vw; }
  .contato__intro-titulo { line-height: .84; }
  .contato__intro-titulo span:last-child { margin-top: .06em; }
}

/* =============================================================
   O BOTÃO DO PAINEL
   Era mais um link no meio de outros três. Vira cápsula: ganha
   contorno, respiro próprio e um ponto vermelho que pulsa. É o
   único elemento da barra que abre algo em vez de levar para
   baixo, e agora parece isso. Ao abrir, ele inverte e fica
   preenchido, marcando o estado.
   ============================================================= */
.nav__links { align-items: center; }
.nav__quem {
  padding: 9px 16px 9px 13px;
  border: 1px solid;
  border-color: color-mix(in srgb, currentColor 42%, transparent);
  border-radius: 999px;
  opacity: .92;
  transition: opacity .25s, background .26s, color .26s, border-color .26s;
}
.nav__quem:hover, .nav__quem:focus-visible { opacity: 1; border-color: currentColor; }
.nav[data-solido="true"] .nav__quem:hover,
.nav[data-solido="true"] .nav__quem:focus-visible,
.nav[data-solido="true"] .nav__quem[aria-expanded="true"] {
  background: var(--color-bg);
  color: var(--color-surface-dark);
  border-color: var(--color-bg);
}
@media (max-width: 560px) {
  .nav__quem { padding: 8px 13px 8px 11px; }
}
/* em telas de 320 a 400 a cápsula, os dois links e a marca não cabem
   com o vão original: fecho o vão e aperto a cápsula em vez de tirar
   um item do menu */
@media (max-width: 400px) {
  .nav__links { gap: 12px; }
  .nav__quem { padding: 7px 11px 7px 9px; gap: 7px; }
}

/* =============================================================
   A MARCA DO LOADER NO CELULAR
   No desktop as duas palavras são escalonadas (HANS à esquerda,
   WERNER empurrado para a direita) e o encaixe apertado é o
   desenho. Em 375px as caixas se encostam com zero de folga e as
   duas linhas colam. Aqui elas passam a ser centradas, com um
   respiro pequeno entre uma e outra: o bloco continua compacto,
   mas as palavras se leem separadas.
   ============================================================= */
@media (max-width: 640px) {
  .loader__marca {
    align-items: center;
    text-align: center;
    line-height: .82;
    transform: none;
  }
  .loader__marca span:last-child {
    align-self: center;
    margin-top: .07em;
  }
}

/* =============================================================
   LUZ DA HERO
   O fundo do original é uma chapada só. Com o objeto de vidro no
   meio, a chapada deixa a cena sem ar: não há de onde a luz vir.
   Três camadas quase invisíveis resolvem: um claro no alto, onde
   o ambiente do vidro já tem a fonte de luz; um azul de longe no
   canto inferior direito, para o papel não ficar morto; e um chão
   levemente mais fechado, que dá pé à composição. Nenhuma delas
   passa de 5% de opacidade: se der para apontar onde começa, está
   forte demais.
   ============================================================= */
.hero::before {
  content: "";
  position: absolute; inset: 0; z-index: 0;
  pointer-events: none;
  background:
    /* vinheta: clarear o centro sobre um papel que já é quase branco
       não muda nada, então quem trabalha é a borda. O centro fica
       intocado e passa a parecer iluminado por comparação. */
    radial-gradient(132% 94% at 50% 26%, transparent 38%, rgba(21, 23, 27, .058) 100%),
    /* o azul da marca, de muito longe, no canto de baixo */
    radial-gradient(76% 54% at 86% 84%, rgba(20, 71, 196, .075), transparent 62%),
    /* e uma claridade no alto, de onde vem a luz do ambiente do vidro */
    linear-gradient(180deg, rgba(255, 255, 255, .6) 0%, transparent 32%);
}

/* =============================================================
   RODAPÉ-PONTE
   Esta página é curta de propósito. O conteúdo que responde
   pergunta, sustenta busca e alimenta as páginas satélite está no
   site anterior, que continua no ar inteiro. O rodapé existe para
   que nada daquilo fique órfão: ele é a única parte do site com
   muitos links, e por isso usa o corpo de leitura, não o corpo de
   display. Fecha na tinta escura, que é onde a sequência de cor
   termina bem depois do azul do contato.
   ============================================================= */
.rodape {
  position: relative; z-index: 6;
  padding: var(--space-10) var(--pad-x) var(--space-6);
  background: var(--color-surface-dark);
  color: var(--color-bg);
}
.rodape__topo {
  width: 100%;
  display: flex; align-items: center; gap: 16px;
  padding: 18px 0;
  border: 0; border-bottom: 1px solid var(--color-border-paper-soft);
  background: none; color: inherit; cursor: pointer;
  font: inherit;
  font-size: var(--text-label); font-weight: var(--weight-semibold);
  letter-spacing: var(--tracking-topline); text-transform: uppercase;
  text-align: left;
  transition: color .24s, border-color .24s;
}
.rodape__topo:hover, .rodape__topo:focus-visible { color: var(--project-3); border-color: var(--project-3); }
/* o sinal é uma cruz que vira traço: dois riscos, um deles gira 90° */
.rodape__sinal { position: relative; width: 13px; height: 13px; flex: none; margin-left: auto; }
.rodape__sinal::before, .rodape__sinal::after {
  content: ""; position: absolute; inset: 50% 0 auto 0;
  height: 1.5px; background: currentColor; translate: 0 -50%;
  transition: rotate .45s var(--ease), opacity .3s;
}
.rodape__sinal::after { rotate: 90deg; }
.rodape__mais[data-aberto="true"] .rodape__sinal::after { rotate: 0deg; }

/* a gaveta: 0fr a 1fr anima a altura sem precisar medir nada em JS */
.rodape__gaveta {
  display: grid; grid-template-rows: 0fr;
  transition: grid-template-rows .6s var(--ease);
}
.rodape__gaveta > div { overflow: hidden; }
.rodape__mais[data-aberto="true"] .rodape__gaveta { grid-template-rows: 1fr; }

.rodape__lista {
  list-style: none; margin: 0; padding: clamp(24px, 3vw, 40px) 0 clamp(26px, 3.2vw, 46px);
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
  column-gap: clamp(28px, 3.4vw, 56px);
}
.rodape__lista a {
  display: grid; gap: 3px;
  padding: 13px 0;
  border-top: 1px solid var(--color-border-paper-soft);
  line-height: 1.3;
  opacity: 0; transform: translateY(10px);
  transition: color .24s, border-color .24s, opacity .5s, transform .6s var(--ease);
}
.rodape__mais[data-aberto="true"] .rodape__lista a { opacity: 1; transform: translateY(0); }
.rodape__lista li:nth-child(2) a { transition-delay: .06s; }
.rodape__lista li:nth-child(3) a { transition-delay: .12s; }
.rodape__lista li:nth-child(4) a { transition-delay: .18s; }
.rodape__lista li:nth-child(5) a { transition-delay: .24s; }
.rodape__lista a > span:first-child { font-size: var(--text-project-lead); font-weight: var(--weight-soft); }
.rodape__lista a > span:last-child:not(:first-child) { font-size: var(--text-label); letter-spacing: .01em; text-transform: none; opacity: .46; }
.rodape__lista a:hover, .rodape__lista a:focus-visible { color: var(--project-3); border-color: var(--project-3); }
.rodape__lista li:nth-last-child(-n+2) a { border-bottom: 1px solid var(--color-border-paper-soft); }

@media (max-width: 640px) {
  .rodape__lista { grid-template-columns: 1fr; }
  .rodape__lista li:nth-last-child(-n+2) a { border-bottom: 0; }
  .rodape__lista li:last-child a { border-bottom: 1px solid var(--color-border-paper-soft); }
}
@media (prefers-reduced-motion: reduce) {
  .rodape__gaveta, .rodape__lista a, .rodape__sinal::before, .rodape__sinal::after { transition: none; }
}

.rodape__base {
  display: flex; align-items: center; justify-content: space-between; gap: var(--space-4);
  padding-top: 20px;
  font-size: var(--text-label); font-weight: var(--weight-semibold);
  letter-spacing: var(--tracking-topline); text-transform: uppercase;
}
.rodape__base > span:first-child { opacity: .45; margin-right: auto; }
.rodape__base a { opacity: .7; transition: opacity .24s; }
.rodape__base a:hover { opacity: 1; }

@media (max-width: 640px) {
  .rodape { padding-top: var(--space-9); }
  
  .rodape__base { flex-wrap: wrap; row-gap: 12px; }
  .rodape__base > span:first-child { flex: 1 0 100%; margin-right: 0; }
}