/* Estilos por seção, na ordem do documento.
   00 barra de status · 01 hero · 02 trabalhos · 03 IA
   04 processo · 05 carreira · 06 competências · 07 contato · 08 rodapé */

/* ── 00 · Barra de status ────────────────────────────────────────────── */

.statusbar {
  position: sticky;
  top: 0;
  z-index: var(--z-nav);
  background: color-mix(in srgb, var(--bg) 84%, transparent);
  -webkit-backdrop-filter: blur(18px);
  backdrop-filter: blur(18px);
  border-bottom: 1px solid var(--line);
}

.statusbar__in {
  max-width: var(--wrap);
  margin-inline: auto;
  padding: 0 var(--gutter);
  height: 2.875rem;
  display: flex;
  align-items: center;
  gap: var(--sp-5);
  font-family: var(--font-mono);
  font-size: var(--fs-micro);
}

.statusbar__marca {
  font-family: var(--font-sans);
  font-size: var(--fs-sm);
  font-weight: 800;
  letter-spacing: -.02em;
  text-decoration: none;
  flex-shrink: 0;
}

.statusbar__marca sup {
  color: var(--signal-tx);
  font-size: .5em;
}

.statusbar__nav {
  display: flex;
  gap: var(--sp-1);
  overflow-x: auto;
  scrollbar-width: none;
}

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

.statusbar__nav a {
  padding: var(--sp-1) var(--sp-3);
  border-radius: .3125rem;
  color: var(--muted);
  text-decoration: none;
  letter-spacing: .05em;
  white-space: nowrap;
  transition: color var(--dur-fast) var(--ease), background var(--dur-fast) var(--ease);
}

.statusbar__nav a:hover {
  color: var(--text);
  background: var(--surface-2);
}

.statusbar__estado {
  margin: 0 0 0 auto;
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  color: var(--ok);
  letter-spacing: .06em;
  white-space: nowrap;
}

.statusbar__ponto {
  width: .3125rem;
  height: .3125rem;
  border-radius: 50%;
  background: var(--ok);
  animation: pulsa 2.2s var(--ease) infinite;
}

@keyframes pulsa {

  0%,
  100% {
    opacity: 1;
  }

  50% {
    opacity: .35;
  }
}

.statusbar__cv {
  flex-shrink: 0;
  padding: var(--sp-1) var(--sp-3);
  border: 1px solid var(--line-2);
  border-radius: .3125rem;
  color: var(--text);
  text-decoration: none;
  letter-spacing: .05em;
  white-space: nowrap;
  transition: border-color var(--dur-fast) var(--ease), background var(--dur-fast) var(--ease);
}

.statusbar__cv:hover {
  border-color: var(--signal);
  background: color-mix(in srgb, var(--signal) 12%, transparent);
}

/* ── 01 · Hero ───────────────────────────────────────────────────────── */

.hero {
  border-bottom: 1px solid var(--line);
}

.hero__grid {
  max-width: var(--wrap);
  margin-inline: auto;
  display: grid;
  grid-template-columns: 1.25fr .85fr;
}

.hero__principal {
  padding: var(--sp-8) var(--gutter) var(--sp-7);
  border-right: 1px solid var(--line);
}

.hero__kv {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-5);
  margin: 0 0 var(--sp-6);
  font-size: var(--fs-micro);
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--muted);
  max-width: none;
}

.hero__kv b {
  color: var(--signal-tx);
  font-weight: 500;
}

.hero__titulo em {
  font-style: italic;
  font-weight: 200;
  color: var(--muted);
}

.hero__cursor {
  display: inline-block;
  width: .1875rem;
  height: .72em;
  margin-left: .1em;
  background: var(--signal);
  animation: pisca 1.05s steps(2) infinite;
}

@keyframes pisca {
  50% {
    opacity: 0;
  }
}

.hero__lead {
  margin: var(--sp-6) 0 var(--sp-6);
  font-size: var(--fs-mini);
  line-height: 1.9;
  color: var(--muted);
  max-width: 58ch;
  min-height: 7.5em;
}

.hero__lead b {
  color: var(--text);
  font-weight: 500;
}

.hero__acoes {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-2);
  max-width: none;
}

.botao {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  padding: var(--sp-3) var(--sp-4);
  border-radius: .375rem;
  font-family: var(--font-mono);
  font-size: var(--fs-micro);
  letter-spacing: .06em;
  text-decoration: none;
  transition: background var(--dur-fast) var(--ease),
    border-color var(--dur-fast) var(--ease),
    box-shadow var(--dur-fast) var(--ease);
}

.botao--primario {
  background: var(--signal);
  color: #fff;
  border: 1px solid var(--signal);
}

.botao--primario:hover {
  background: #c4232e;
  box-shadow: 0 0 1.375rem color-mix(in srgb, var(--signal) 40%, transparent);
}

.botao--secundario {
  border: 1px solid var(--line-2);
  color: var(--muted);
}

.botao--secundario:hover {
  color: var(--text);
  border-color: var(--line-2);
  background: var(--surface);
}

/* painel lateral */

.painel {
  display: flex;
  flex-direction: column;
}

.painel__cabeca {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  margin: 0;
  padding: var(--sp-3) var(--sp-5);
  border-bottom: 1px solid var(--line);
  font-size: var(--fs-micro);
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--muted);
  max-width: none;
}

.painel__ponto {
  width: .3125rem;
  height: .3125rem;
  border-radius: 50%;
  background: var(--signal);
  animation: pulsa 2s var(--ease) infinite;
}

.painel__log {
  flex: 1;
  padding: var(--sp-4) var(--sp-5);
  font-size: var(--fs-micro);
  line-height: 2.1;
  color: var(--muted);
}

.painel__hora {
  color: var(--muted);
}

.painel__ok {
  color: var(--ok);
}

.painel__alerta {
  color: var(--signal-tx);
}

.painel__log b {
  color: var(--text);
  font-weight: 500;
}

.painel__log li {
  opacity: 0;
  transform: translateX(-.375rem);
  transition: opacity var(--dur) var(--ease), transform var(--dur) var(--ease);
}

.painel__log li.is-visible {
  opacity: 1;
  transform: none;
}

@media (prefers-reduced-motion: reduce) {
  .painel__log li {
    opacity: 1;
    transform: none;
  }
}

.painel__metricas {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  margin: 0;
  border-top: 1px solid var(--line);
}

.painel__metricas>div {
  display: flex;
  flex-direction: column-reverse;
  /* em column-reverse o eixo principal corre de baixo para cima,
     então flex-end ancora o conteúdo no topo visual da célula */
  justify-content: flex-end;
  padding: var(--sp-4) var(--sp-5);
  border-right: 1px solid var(--line);
}

.painel__metricas>div:last-child {
  border-right: 0;
}

.painel__metricas dd {
  margin: 0;
  font-size: var(--fs-xl);
  font-weight: 800;
  letter-spacing: -.04em;
  line-height: 1;
}

.painel__metricas>div:nth-child(-n+2) dd::after {
  content: '+';
  color: var(--signal-tx);
}

.painel__metricas dt {
  margin-top: var(--sp-2);
  font-size: var(--fs-micro);
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--muted);
}

@media (max-width: 56.25rem) {
  .hero__grid {
    grid-template-columns: 1fr;
  }

  .hero__principal {
    border-right: 0;
    border-bottom: 1px solid var(--line);
    padding-block: var(--sp-7) var(--sp-6);
  }

  .hero__lead {
    min-height: 0;
  }
}

/* ── 01b · Marcas ────────────────────────────────────────────────────── */

/* faixa de logotipos das empresas, logo abaixo do hero. Os arquivos são os
   logos oficiais em SVG, neutralizados para uma cor só com brightness(0)
   invert(1) — assim a faixa lê como um conjunto e não como sete marcas
   competindo por atenção. Cada item traz sua própria altura óptica em --h,
   porque um wordmark largo e um símbolo compacto não pesam igual. */

.marcas {
  border-bottom: 1px solid var(--line);
}

.marcas__in {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  column-gap: var(--sp-6);
  row-gap: var(--sp-4);
  padding-block: var(--sp-5);
}

.marcas__rotulo {
  margin: 0;
  font-size: var(--fs-micro);
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--muted);
}

.marcas__lista {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  column-gap: var(--sp-6);
  row-gap: var(--sp-4);
  justify-content: space-around;
  width: 100%;
}

.marcas__lista li {
  display: flex;
  align-items: center;
  opacity: 0;
  transform: translateY(.35rem);
  transition: opacity var(--dur) var(--ease), transform var(--dur) var(--ease);
}

.marcas__logo {
  height: var(--h, 1.5rem);
  width: auto;
  filter: brightness(0) invert(1);
  opacity: .58;
  transition: opacity var(--dur-fast) var(--ease), transform var(--dur-fast) var(--ease);
}

/* o atraso da cascata fica no <li> (entrada) e não no logo, para o hover
   responder na hora */
.marcas__in.is-visible .marcas__lista li {
  opacity: 1;
  transform: none;
}

.marcas__in.is-visible .marcas__lista li:nth-child(2) {
  transition-delay: .05s;
}

.marcas__in.is-visible .marcas__lista li:nth-child(3) {
  transition-delay: .1s;
}

.marcas__in.is-visible .marcas__lista li:nth-child(4) {
  transition-delay: .15s;
}

.marcas__in.is-visible .marcas__lista li:nth-child(5) {
  transition-delay: .2s;
}

.marcas__in.is-visible .marcas__lista li:nth-child(6) {
  transition-delay: .25s;
}

.marcas__in.is-visible .marcas__lista li:nth-child(7) {
  transition-delay: .3s;
}

.marcas__lista li:hover .marcas__logo {
  opacity: 1;
  transform: translateY(-.125rem);
}

@media (max-width: 56.25rem) {
  .marcas__lista {
    column-gap: var(--sp-5);
  }

  .marcas__logo {
    height: calc(var(--h, 1.5rem) * .85);
  }
}

/* no celular os sete logos só se distribuem em 4+3 (em vez de deixar um
   órfão na terceira linha) apertando o gap antes do corpo do logo */
@media (max-width: 30rem) {
  .marcas__lista {
    column-gap: var(--sp-3);
  }

  .marcas__logo {
    height: calc(var(--h, 1.5rem) * .75);
  }
}

@media (prefers-reduced-motion: reduce) {
  .marcas__lista li {
    opacity: 1;
    transform: none;
  }
}

/* ── Blocos comuns de seção ──────────────────────────────────────────── */

.secao {
  padding-block: clamp(var(--sp-8), 7vw, var(--sp-9));
  border-bottom: 1px solid var(--line);
}

.secao h2 {
  margin-block: var(--sp-4) var(--sp-4);
}

.secao h2 em {
  font-style: italic;
  font-weight: 200;
  color: var(--muted);
}

.secao__intro {
  /* medida em rem, não em ch: o "0" da Plus Jakarta Sans é largo (1ch ≈
     0.73em), então 58ch ainda dava 87 caracteres por linha. 32rem cai na
     faixa confortável de leitura (~65). */
  max-width: 32rem;
  margin-bottom: var(--sp-7);
  color: var(--muted);
  font-size: var(--fs-base);
}

/* Assinatura comum de entrada: um ponto de sinal que passa a pulsar no
   eyebrow e uma hairline que se desenha sob o h2, disparados quando o
   próprio eyebrow (marcado com [data-reveal]) entra na viewport. */

.eyebrow__ponto {
  display: inline-block;
  width: .3125rem;
  height: .3125rem;
  border-radius: 50%;
  background: var(--signal);
}

.eyebrow.is-visible .eyebrow__ponto {
  animation: pulsa 2.2s var(--ease) infinite;
}

.secao__regua {
  width: 100%;
  height: 1px;
  margin: 0 0 var(--sp-5);
  background: var(--line-2);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform var(--dur-slow) var(--ease);
}

.eyebrow.is-visible~.secao__regua {
  transform: scaleX(1);
}

@media (prefers-reduced-motion: reduce) {
  .secao__regua {
    transform: scaleX(1);
  }
}

/* ── 02 · Trabalhos ──────────────────────────────────────────────────── */

.cases {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--sp-4);
}

.case {
  display: block;
  width: 100%;
  padding: 0;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface);
  color: inherit;
  text-align: left;
  font: inherit;
  cursor: pointer;
  overflow: hidden;
  transition: border-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease),
    transform var(--dur-fast) var(--ease);
}

.case:hover,
.case:focus-visible {
  border-color: color-mix(in srgb, var(--signal) 55%, transparent);
  box-shadow: 0 0 1.75rem color-mix(in srgb, var(--signal) 14%, transparent);
  transform: translateY(-.125rem);
  transition-duration: var(--dur-fast);
}

.case picture {
  display: block;
  overflow: hidden;
  border-bottom: 1px solid var(--line);
}

.case img {
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 10;
  object-fit: cover;
  /* Os screenshots sao de pagina inteira, varios em retrato extremo.
     Ancorar no topo faz o card mostrar o hero do site, nao uma faixa do meio. */
  object-position: top;
  clip-path: inset(0 0 0 0);
  transition: transform var(--dur-slow) var(--ease);
}

.case:hover img {
  transform: scale(1.03);
}

.case__semimg {
  display: grid;
  place-items: center;
  aspect-ratio: 16 / 10;
  border-bottom: 1px solid var(--line);
  font-size: var(--fs-micro);
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--muted);
}

.case__meta {
  display: block;
  padding: var(--sp-4);
}

.case__titulo {
  display: block;
  font-size: var(--fs-base);
  font-weight: 700;
  letter-spacing: -.02em;
}

.case__tags {
  display: block;
  margin-top: var(--sp-1);
  font-size: var(--fs-micro);
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--muted);
}

@media (max-width: 62rem) {
  .cases {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 40rem) {
  .cases {
    grid-template-columns: 1fr;
  }
}

/* ── 03 · IA aplicada ────────────────────────────────────────────────── */

.ia {
  position: relative;
  overflow: hidden;
  background: var(--surface);
  padding-block: var(--sp-9);
}

.ia__scan {
  position: absolute;
  inset-inline: 0;
  top: -6rem;
  height: 6rem;
  pointer-events: none;
  background: linear-gradient(180deg,
      transparent,
      color-mix(in srgb, var(--signal) 12%, transparent),
      transparent);
}

.ia.is-visible .ia__scan {
  animation: varre 2.6s var(--ease) .25s 1;
}

@keyframes varre {
  to {
    top: 100%;
  }
}

.ia__tese {
  font-size: var(--fs-sm);
  line-height: 1.6;
  color: var(--muted);
  /* max-width: 58ch; */
  border-left: 2px solid var(--signal);
  padding-left: var(--sp-4);
  margin-top: var(--sp-7);
  margin-bottom: var(--sp-7);
}

.ia__tese b {
  color: var(--text);
  font-weight: 500;
}

.modulos {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  overflow: hidden;
}

.modulo {
  border-right: 1px solid var(--line);
  opacity: 0;
  transform: translateY(1rem);
  transition: opacity var(--dur-slow) var(--ease), transform var(--dur-slow) var(--ease);
}

.modulo:last-child {
  border-right: 0;
}

.modulo.is-visible {
  opacity: 1;
  transform: none;
}

.modulo:nth-child(2) {
  transition-delay: .12s;
}

.modulo:nth-child(3) {
  transition-delay: .24s;
}

.modulo__cabeca {
  display: flex;
  justify-content: space-between;
  gap: var(--sp-3);
  margin: 0;
  padding: var(--sp-3) var(--sp-5);
  border-bottom: 1px solid var(--line);
  font-size: var(--fs-micro);
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--muted);
  max-width: none;
}

.modulo__cabeca em {
  font-style: normal;
  color: var(--signal-tx);
}

.modulo__status {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
}

.modulo__led {
  display: inline-block;
  width: .3125rem;
  height: .3125rem;
  border-radius: 50%;
  background: var(--ok);
  animation: pulsa 2.4s var(--ease) infinite;
}

/* fases levemente distintas — três "processos" rodando em paralelo */
.modulo:nth-child(1) .modulo__led {
  animation-delay: 0s;
}

.modulo:nth-child(2) .modulo__led {
  animation-delay: .5s;
}

.modulo:nth-child(3) .modulo__led {
  animation-delay: 1s;
}

.modulo__corpo {
  padding: var(--sp-6);
}

.modulo__corpo h3 {
  margin-bottom: var(--sp-4);
}

.modulo__corpo ul {
  display: flex;
  flex-direction: column;
  gap: var(--sp-4);
}

.modulo__corpo li {
  position: relative;
  padding-left: var(--sp-5);
  font-size: var(--fs-sm);
  line-height: 1.7;
  color: var(--muted);
}

/* o lead-in de cada item é o ponto de ancoragem para quem escaneia:
   sobe para a cor do texto enquanto o resto da frase fica no tom de apoio. */
.modulo__corpo li b {
  color: var(--text);
  font-weight: 600;
}

.modulo__corpo li::before {
  content: '';
  position: absolute;
  left: 0;
  top: .45em;
  width: .4375rem;
  height: .4375rem;
  border: 1px solid var(--signal);
  border-radius: 1px;
  transform: rotate(45deg) scale(0);
  transition: transform var(--dur) var(--ease);
}

.modulo.is-visible li::before {
  transform: rotate(45deg) scale(1);
}

.modulo.is-visible li:nth-child(2)::before {
  transition-delay: .1s;
}

.modulo.is-visible li:nth-child(3)::before {
  transition-delay: .2s;
}

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

  .modulo li::before {
    transform: rotate(45deg) scale(1);
  }
}

.stack-barra {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--sp-2);
  margin-top: var(--sp-5);
}

.stack-barra__rotulo {
  margin: 0 var(--sp-2) 0 0;
  font-size: var(--fs-micro);
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--muted);
}

.stack {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-2);
}

.stack li {
  padding: var(--sp-1) var(--sp-3);
  border: 1px solid var(--line);
  border-radius: .25rem;
  font-size: var(--fs-micro);
  color: var(--muted);
  transition: color var(--dur-fast) var(--ease), border-color var(--dur-fast) var(--ease),
    transform var(--dur-fast) var(--ease);
}

.stack li:hover {
  color: var(--signal-tx);
  border-color: color-mix(in srgb, var(--signal) 45%, transparent);
  transform: translateY(-.125rem);
}

@media (max-width: 56.25rem) {
  .modulos {
    grid-template-columns: 1fr;
  }

  .modulo {
    border-right: 0;
    border-bottom: 1px solid var(--line);
  }

  .modulo:last-child {
    border-bottom: 0;
  }
}

/* ── 04 · Processo ───────────────────────────────────────────────────── */

/* margem superior compensa a intro removida desta seção: sem ela, a régua
   do h2 e o trilho ficariam a 24px um do outro, como duas hairlines
   paralelas sem conteúdo entre elas. */
.etapas-envolucro {
  position: relative;
  margin-top: var(--sp-6);
}

/* trilho: hairline que progride da etapa 01 até a 04, como um traçado de
   processo. No mobile vira um eixo vertical (as etapas empilham). */
.etapas {
  /* .etapas é um <ol> semântico (a ordem das etapas importa); o reset de
     margin/padding/list-style vem de `ul, ol` em css/base.css. */
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1px;
  background: var(--line);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  overflow: hidden;
}

.etapa {
  background: var(--bg);
  padding: var(--sp-5);
  opacity: 0;
  transform: translateY(.75rem);
  transition: opacity var(--dur-slow) var(--ease), transform var(--dur-slow) var(--ease),
    background var(--dur) var(--ease);
}

.etapa.is-visible {
  opacity: 1;
  transform: none;
}

.etapa:nth-child(2) {
  transition-delay: .08s;
}

.etapa:nth-child(3) {
  transition-delay: .16s;
}

.etapa:nth-child(4) {
  transition-delay: .24s;
}

.etapa:hover {
  background: var(--surface);
}

.etapa__n {
  margin: 0 0 var(--sp-3);
  font-size: var(--fs-micro);
  letter-spacing: .2em;
  color: var(--muted);
  opacity: 0;
  transform: translateX(-.5rem);
  transition: opacity var(--dur) var(--ease), transform var(--dur) var(--ease);
}

/* o número entra junto com a própria etapa (antes dependia do trilho, que
   foi removido); o atraso por etapa já vem de .etapa:nth-child acima. */
.etapa.is-visible .etapa__n {
  opacity: 1;
  transform: none;
}

/* ícone da etapa: o traço se desenha quando a etapa entra na viewport
   (pathLength="1" torna o dash independente da geometria de cada ícone) e
   ganha a cor de sinal no hover do card. */
.etapa__icone {
  display: block;
  width: 1.75rem;
  height: 1.75rem;
  margin-bottom: var(--sp-3);
  color: var(--muted-2);
  transition: color var(--dur) var(--ease), transform var(--dur) var(--ease);
}

.etapa__icone svg {
  width: 100%;
  height: 100%;
  display: block;
  overflow: visible;
}

.etapa__icone svg>* {
  stroke-dasharray: 1;
  stroke-dashoffset: 1;
  transition: stroke-dashoffset 1s var(--ease);
}

.etapa.is-visible .etapa__icone {
  color: var(--muted);
}

.etapa.is-visible .etapa__icone svg>* {
  stroke-dashoffset: 0;
}

/* cada traço do mesmo ícone parte com um pequeno atraso, dando a leitura
   de desenho em sequência em vez de tudo aparecendo de uma vez */
.etapa.is-visible .etapa__icone svg>*:nth-child(2) {
  transition-delay: .18s;
}

.etapa.is-visible .etapa__icone svg>*:nth-child(3) {
  transition-delay: .36s;
}

.etapa:hover .etapa__icone {
  color: var(--signal-tx);
  transform: translateY(-.125rem);
}

@media (prefers-reduced-motion: reduce) {

  .etapa__icone,
  .etapa__icone svg>* {
    transition: none;
    stroke-dashoffset: 0;
  }
}

.etapa h3 {
  margin-bottom: var(--sp-4);
  font-size: var(--fs-base);
}

.etapa__itens {
  display: flex;
  flex-direction: column;
  gap: var(--sp-2);
  margin-bottom: var(--sp-4);
}

.etapa__itens li {
  position: relative;
  padding-left: var(--sp-4);
  font-size: var(--fs-sm);
  line-height: 1.55;
  color: var(--muted);
}

.etapa__itens li::before {
  content: '';
  position: absolute;
  left: 0;
  top: .62em;
  width: .3125rem;
  height: 1px;
  background: var(--muted-2);
}

/* ── 05 · Carreira ───────────────────────────────────────────────────── */

.cargos-envolucro {
  position: relative;
  padding-left: var(--sp-5);
}

/* eixo: hairline vertical que se traça de cima para baixo, reforçando a
   leitura do mais recente ao mais antigo. */
.cargos__eixo {
  position: absolute;
  left: 0;
  top: 0;
  width: 1px;
  height: 100%;
  background: var(--line-2);
  transform: scaleY(0);
  transform-origin: top;
  transition: transform 1.1s var(--ease);
}

.cargos__eixo.is-visible {
  transform: scaleY(1);
}

.cargos {
  /* mesmo motivo do .etapas: <ol> semântico, reset vindo de `ul, ol` em base.css. */
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--sp-5);
}

.cargo {
  position: relative;
  padding: var(--sp-5);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface);
  opacity: 0;
  transform: translateY(.75rem);
  transition: opacity var(--dur-slow) var(--ease), transform var(--dur-slow) var(--ease),
    border-color var(--dur) var(--ease);
}

.cargo.is-visible {
  opacity: 1;
  transform: none;
}

.cargo:hover {
  border-color: var(--line-2);
  transform: translateY(-.125rem);
  transition-duration: var(--dur-fast);
}

.cargo h3 {
  font-size: var(--fs-base);
  margin-bottom: var(--sp-1);
}

.cargo__empresa {
  margin-bottom: var(--sp-3);
  font-size: var(--fs-sm);
  font-weight: 600;
  color: var(--signal-tx);
}

.cargo__periodo {
  margin-bottom: var(--sp-2);
  font-size: var(--fs-micro);
  letter-spacing: .12em;
  color: var(--muted);
}

.cargo__desc {
  font-size: var(--fs-sm);
  line-height: 1.7;
  color: var(--muted);
}

.cargo__marcas {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-2);
  margin-top: var(--sp-4);
}

.cargo__marcas li {
  padding: var(--sp-1) var(--sp-3);
  border: 1px solid var(--line);
  border-radius: .25rem;
  font-size: var(--fs-micro);
  color: var(--muted);
  opacity: 0;
  transform: translateY(.35rem);
  transition: opacity var(--dur) var(--ease), transform var(--dur) var(--ease),
    color var(--dur-fast) var(--ease), border-color var(--dur-fast) var(--ease);
}

.cargo.is-visible .cargo__marcas li {
  opacity: 1;
  transform: none;
}

.cargo.is-visible .cargo__marcas li:nth-child(2) {
  transition-delay: .06s;
}

.cargo.is-visible .cargo__marcas li:nth-child(3) {
  transition-delay: .12s;
}

.cargo.is-visible .cargo__marcas li:nth-child(4) {
  transition-delay: .18s;
}

.cargo.is-visible .cargo__marcas li:nth-child(5) {
  transition-delay: .24s;
}

.cargo.is-visible .cargo__marcas li:nth-child(6) {
  transition-delay: .3s;
}

.cargo.is-visible .cargo__marcas li:nth-child(7) {
  transition-delay: .36s;
}

.cargo__marcas li:hover {
  color: var(--text);
  border-color: var(--line-2);
  transform: translateY(-.125rem);
  transition-delay: 0s;
}

.credenciais {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--sp-5);
  margin-top: var(--sp-6);
  padding-top: var(--sp-6);
  border-top: 1px solid var(--line);
}

.credencial__rotulo {
  margin: 0 0 var(--sp-2);
  font-size: var(--fs-micro);
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--muted);
}

.credencial__valor {
  font-size: var(--fs-sm);
  font-weight: 600;
}

.credencial__nota {
  margin-top: var(--sp-1);
  font-size: var(--fs-micro);
  color: var(--muted);
}

@media (prefers-reduced-motion: reduce) {

  .etapa,
  .cargo {
    opacity: 1;
    transform: none;
  }

  .cargos__eixo {
    transform: none;
  }

  .etapa__icone svg>* {
    stroke-dashoffset: 0;
  }

  .etapa__n,
  .cargo__marcas li {
    opacity: 1;
    transform: none;
    transition-delay: 0s;
  }
}

@media (max-width: 62rem) {
  .etapas {
    grid-template-columns: repeat(2, 1fr);
  }

  .credenciais {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 40rem) {

  .etapas,
  .cargos {
    grid-template-columns: 1fr;
  }

}

/* ── 06 · Competências ───────────────────────────────────────────────── */

.grupos {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--sp-6);
}

.grupo {
  opacity: 0;
  transform: translateY(.75rem);
  transition: opacity var(--dur-slow) var(--ease), transform var(--dur-slow) var(--ease);
}

.grupo.is-visible {
  opacity: 1;
  transform: none;
}

.grupo:nth-child(2) {
  transition-delay: .1s;
}

.grupo:nth-child(3) {
  transition-delay: .2s;
}

.grupo__titulo {
  margin-bottom: var(--sp-4);
  padding-bottom: var(--sp-3);
  border-bottom: 1px solid var(--line);
  font-family: var(--font-mono);
  font-size: var(--fs-micro);
  font-weight: 500;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--signal-tx);
}

.grupo__itens {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-2);
}

.grupo__itens li {
  padding: var(--sp-2) var(--sp-3);
  border: 1px solid var(--line);
  border-radius: .25rem;
  font-size: var(--fs-sm);
  color: var(--muted);
  opacity: 0;
  transform: translateY(.35rem);
  transition: color var(--dur-fast) var(--ease), border-color var(--dur-fast) var(--ease),
    opacity var(--dur) var(--ease), transform var(--dur) var(--ease);
}

.grupo.is-visible .grupo__itens li {
  opacity: 1;
  transform: none;
}

.grupo.is-visible .grupo__itens li:nth-child(2) {
  transition-delay: .03s;
}

.grupo.is-visible .grupo__itens li:nth-child(3) {
  transition-delay: .06s;
}

.grupo.is-visible .grupo__itens li:nth-child(4) {
  transition-delay: .09s;
}

.grupo.is-visible .grupo__itens li:nth-child(5) {
  transition-delay: .12s;
}

.grupo.is-visible .grupo__itens li:nth-child(6) {
  transition-delay: .15s;
}

.grupo.is-visible .grupo__itens li:nth-child(7) {
  transition-delay: .18s;
}

.grupo.is-visible .grupo__itens li:nth-child(8) {
  transition-delay: .21s;
}

.grupo.is-visible .grupo__itens li:nth-child(9) {
  transition-delay: .24s;
}

.grupo.is-visible .grupo__itens li:nth-child(10) {
  transition-delay: .27s;
}

.grupo.is-visible .grupo__itens li:nth-child(11) {
  transition-delay: .3s;
}

.grupo.is-visible .grupo__itens li:nth-child(12) {
  transition-delay: .33s;
}

.grupo__itens li:hover,
.grupo.is-visible .grupo__itens li:hover {
  color: var(--text);
  border-color: var(--line-2);
  transform: translateY(-.125rem);
  transition-delay: 0s;
}

/* ── 07 · Contato ────────────────────────────────────────────────────── */

.contato__grid {
  display: grid;
  grid-template-columns: 1.3fr .8fr;
  gap: var(--sp-7);
}

.formulario {
  display: flex;
  flex-direction: column;
  gap: var(--sp-4);
}

.campo {
  display: flex;
  flex-direction: column;
  gap: var(--sp-2);
  margin: 0;
  max-width: none;
}

.campo label {
  font-family: var(--font-mono);
  font-size: var(--fs-micro);
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--muted);
}

.campo input,
.campo textarea {
  padding: var(--sp-3) var(--sp-4);
  border: 1px solid var(--line-2);
  border-radius: var(--radius);
  background: var(--surface);
  color: var(--text);
  font-family: var(--font-sans);
  font-size: var(--fs-base);
  transition: border-color var(--dur-fast) var(--ease);
}

.campo input:focus,
.campo textarea:focus {
  border-color: var(--signal);
}

.campo input[aria-invalid='true'],
.campo textarea[aria-invalid='true'] {
  border-color: var(--signal-tx);
}

.campo textarea {
  resize: vertical;
  min-height: 8rem;
}

.campo__erro {
  font-size: var(--fs-sm);
  color: var(--signal-tx);
  min-height: 1.2em;
}

.formulario__acoes {
  margin: 0;
  max-width: none;
}

.formulario__estado {
  margin: 0;
  font-size: var(--fs-sm);
  color: var(--muted);
  min-height: 1.4em;
}

.canais__titulo {
  margin-bottom: var(--sp-4);
  padding-bottom: var(--sp-3);
  border-bottom: 1px solid var(--line);
  font-family: var(--font-mono);
  font-size: var(--fs-micro);
  font-weight: 500;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--signal-tx);
}

.canais__lista {
  display: flex;
  flex-direction: column;
  gap: var(--sp-3);
}

.canais__lista li {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  opacity: 0;
  transform: translateY(.5rem);
  transition: opacity var(--dur) var(--ease), transform var(--dur) var(--ease);
}

/* mesmo mecanismo de traço desenhado dos ícones do Processo, na escala do
   texto ao lado; o ícone acompanha o link no hover. */
.canal__icone {
  flex-shrink: 0;
  width: 1.125rem;
  height: 1.125rem;
  color: var(--muted-2);
  transition: color var(--dur-fast) var(--ease), transform var(--dur-fast) var(--ease);
}

.canal__icone svg {
  width: 100%;
  height: 100%;
  display: block;
}

.canal__icone svg>* {
  stroke-dasharray: 1;
  stroke-dashoffset: 1;
  transition: stroke-dashoffset .9s var(--ease);
}

.canais.is-visible .canal__icone svg>* {
  stroke-dashoffset: 0;
}

.canais.is-visible .canais__lista li:nth-child(2) .canal__icone svg>* {
  transition-delay: .1s;
}

.canais.is-visible .canais__lista li:nth-child(3) .canal__icone svg>* {
  transition-delay: .2s;
}

.canais.is-visible .canal__icone svg>*:nth-child(2) {
  transition-delay: .15s;
}

.canais.is-visible .canal__icone svg>*:nth-child(3) {
  transition-delay: .3s;
}

.canais__lista li:hover .canal__icone {
  color: var(--signal-tx);
  transform: translateX(.125rem);
}

.canais.is-visible .canais__lista li {
  opacity: 1;
  transform: none;
}

.canais.is-visible .canais__lista li:nth-child(2) {
  transition-delay: .1s;
}

.canais.is-visible .canais__lista li:nth-child(3) {
  transition-delay: .2s;
}

.canais__lista a {
  font-size: var(--fs-sm);
  color: var(--muted);
  text-decoration: none;
  transition: color var(--dur-fast) var(--ease);
}

.canais__lista a:hover {
  color: var(--text);
  text-decoration: underline;
  text-underline-offset: .25em;
}

.canais__local {
  margin-top: var(--sp-5);
  font-size: var(--fs-micro);
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--muted);
}

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

  .grupo__itens li,
  .canais__lista li {
    opacity: 1;
    transform: none;
    transition-delay: 0s;
  }

  .canal__icone svg>* {
    stroke-dashoffset: 0;
    transition: none;
  }
}

@media (max-width: 56.25rem) {

  .grupos,
  .contato__grid {
    grid-template-columns: 1fr;
  }
}

/* ── Drawer de case ──────────────────────────────────────────────────── */

.drawer-fundo {
  position: fixed;
  inset: 0;
  z-index: calc(var(--z-drawer) - 1);
  background: rgba(0, 0, 0, .68);
  backdrop-filter: blur(3px);
  opacity: 0;
  transition: opacity var(--dur) var(--ease);
}

.drawer-fundo.is-aberto {
  opacity: 1;
}

.drawer {
  position: fixed;
  inset-block: 0;
  right: 0;
  z-index: var(--z-drawer);
  width: min(40rem, 100vw);
  display: flex;
  flex-direction: column;
  background: var(--surface);
  border-left: 1px solid var(--line-2);
  transform: translateX(100%);
  transition: transform var(--dur) var(--ease);
  overflow: hidden;
}

.drawer.is-aberto {
  transform: none;
}

/* .drawer define display: flex incondicionalmente para o layout aberto;
   sem esta regra o atributo hidden nunca venceria a cascata (regra de
   autor sempre supera a regra [hidden] do agente de usuário, mesmo com
   especificidade igual), e o drawer ficaria "visível" fora da tela. */
.drawer[hidden] {
  display: none;
}

.drawer__topo {
  display: flex;
  align-items: center;
  gap: var(--sp-4);
  padding: var(--sp-4) var(--sp-5);
  border-bottom: 1px solid var(--line);
}

.drawer__tags {
  margin: 0;
  font-size: var(--fs-micro);
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--signal-tx);
  max-width: none;
}

.drawer__fechar {
  margin-left: auto;
  width: 2rem;
  height: 2rem;
  display: grid;
  place-items: center;
  border: 1px solid var(--line-2);
  border-radius: var(--radius);
  background: transparent;
  color: var(--muted);
  cursor: pointer;
  transition: color var(--dur-fast) var(--ease), border-color var(--dur-fast) var(--ease);
}

.drawer__fechar:hover {
  color: var(--text);
  border-color: var(--signal);
}

.drawer__corpo {
  overflow-y: auto;
  padding: var(--sp-6) var(--sp-5) var(--sp-8);
}

.drawer__titulo {
  font-size: var(--fs-xl);
  margin-bottom: var(--sp-5);
}

.drawer__figura {
  margin: 0 0 var(--sp-6);
}

.drawer__figura img {
  width: 100%;
  height: auto;
  /* `display: block` vem do reset em base.css — por isso a centralização
     abaixo usa margem automática, não `text-align`. Quando `max-width`
     (aplicado em js/drawer.js, a partir da largura nativa do screenshot)
     deixa a imagem mais estreita que o drawer, ela fica centralizada em
     vez de encostada à esquerda. */
  margin-inline: auto;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  /* Os nove screenshots são de página inteira — cinco em retrato extremo.
     Sem limite de altura, a imagem empurra os três blocos de texto
     (contexto, papel, entregas) para muito além da primeira dobra. */
  max-height: min(60vh, 34rem);
  object-fit: cover;
  object-position: top;
}

.drawer__texto {
  display: flex;
  flex-direction: column;
  gap: var(--sp-2);
}

.drawer__rotulo {
  margin: var(--sp-5) 0 var(--sp-1);
  font-size: var(--fs-micro);
  font-weight: 500;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--muted);
}

.drawer__texto p {
  color: var(--muted);
  font-size: var(--fs-sm);
}

.drawer__entregas {
  display: flex;
  flex-direction: column;
  gap: var(--sp-2);
}

.drawer__entregas li {
  position: relative;
  padding-left: var(--sp-4);
  font-size: var(--fs-sm);
  color: var(--muted);
}

.drawer__entregas li::before {
  content: '';
  position: absolute;
  left: 0;
  top: .6em;
  width: .3125rem;
  height: 1px;
  background: var(--signal);
}

/* ── 08 · Rodapé ─────────────────────────────────────────────────────── */

/* uma única barra de assinatura: marca à esquerda, voltar ao topo e
   copyright à direita. A navegação vive na barra de status fixa e os
   contatos na seção de contato, então o rodapé não os repete. */
.rodape {
  /* border-top: 1px solid var(--line); */
  padding-block: var(--sp-6);
  /* margin-top: var(--sp-9); */
}

.rodape__barra {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-4);
}

.rodape__marca {
  margin: 0;
  font-size: var(--fs-lg);
  font-weight: 700;
  letter-spacing: -.02em;
}

.rodape__marca sup {
  color: var(--signal-tx);
  font-size: .5em;
}

.rodape__meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--sp-5);
}

.rodape__copy {
  font-size: var(--fs-micro);
  color: var(--muted);
  letter-spacing: .1em;
}

.rodape__topo {
  font-size: var(--fs-micro);
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--muted);
  text-decoration: none;
  transition: color var(--dur-fast) var(--ease);
}

.rodape__topo:hover {
  color: var(--text);
  text-decoration: underline;
  text-underline-offset: .25em;
}

/* Abaixo de ~416px a barra fica apertada: marca + nav + estado + cv não
   cabem todos por extenso. Ordem de sacrifício — a navegação é o que deve
   sobreviver: primeiro o texto "Disponível" some (o ponto colorido continua,
   e o texto permanece no DOM só visualmente oculto — leitor de tela ainda
   o anuncia); se ainda faltar espaço, o texto "currículo" some também (o
   ícone ↓ permanece, com o aria-label do link garantindo o nome acessível). */
@media (max-width: 28rem) {
  .statusbar__estado-texto {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
  }
}

@media (max-width: 25rem) {
  .statusbar__cv-texto {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
  }
}