/* =========================================================
   Sistema visual — "painel de instrumentos"
   Tinta profunda + papel milimetrado + acentos de data-viz
   ========================================================= */
:root {
  --ink: #0b1020;
  --ink-2: #131a30;
  --paper: #f6f7fb;
  --paper-2: #ffffff;
  --violet: #6c3ce0;
  --cyan: #16c0d9;
  --amber: #ffb347;
  --slate: #6b7796;
  --linha: rgba(107, 119, 150, 0.18);
  --linha-forte: rgba(107, 119, 150, 0.34);

  --display: "Space Grotesk", "Segoe UI", sans-serif;
  --corpo: "IBM Plex Sans", system-ui, sans-serif;
  --mono: "IBM Plex Mono", ui-monospace, monospace;

  --raio: 16px;
  --max: 1160px;
  --transicao: 280ms cubic-bezier(0.22, 1, 0.36, 1);
  --sombra-cartao: 0 1px 2px rgba(11,16,32,.05), 0 10px 30px -18px rgba(11,16,32,.25);
  --sombra-alta: 0 24px 55px -28px rgba(11,16,32,.55);
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  font-family: var(--corpo);
  color: var(--ink);
  background: var(--paper);
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
}

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

.container { width: min(100% - 2.5rem, var(--max)); margin-inline: auto; }

/* ---------- Tipografia ---------- */
h1, h2, h3, h4 { font-family: var(--display); font-weight: 600; line-height: 1.1; letter-spacing: -0.02em; margin: 0 0 0.6em; }
h1 { font-size: clamp(2.4rem, 6vw, 4.2rem); }
h2 { font-size: clamp(1.8rem, 3.6vw, 2.6rem); }
h3 { font-size: 1.25rem; }
p { margin: 0 0 1.1em; }

.eixo {
  font-family: var(--mono);
  font-size: 0.75rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--slate);
  display: flex;
  align-items: center;
  gap: 0.7rem;
  margin-bottom: 1.4rem;
}
.eixo::before {
  content: "";
  width: 26px; height: 1px;
  background: var(--violet);
  box-shadow: 0 -4px 0 -0.5px var(--violet), 0 4px 0 -0.5px var(--violet);
}

/* ---------- Cabeçalho ---------- */
.topo {
  position: sticky; top: 0; z-index: 60;
  backdrop-filter: blur(14px);
  background: rgba(11, 16, 32, 0.82);
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}
.topo__interno { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: 0.9rem 0; }
.marca { display: flex; align-items: center; gap: 0.7rem; min-height: 42px; text-decoration: none; color: #fff; font-family: var(--display); font-weight: 600; letter-spacing: -0.02em; }
.marca__glifo { width: 34px; height: 34px; flex-shrink: 0; }
.marca__texto { display: grid; line-height: 1.15; }
.marca__nome { font-size: 1.02rem; }
.marca__papel { font-family: var(--mono); font-weight: 400; font-size: .7rem; letter-spacing: .14em; text-transform: uppercase; color: var(--cyan); }
.nav { display: flex; gap: 1.6rem; }
.nav a {
  color: rgba(255, 255, 255, 0.74);
  text-decoration: none;
  font-size: 0.92rem;
  padding-bottom: 3px;
  border-bottom: 1px solid transparent;
  transition: color var(--transicao), border-color var(--transicao);
}
.nav a:hover, .nav a:focus-visible { color: #fff; border-color: var(--cyan); }
.menu-botao {
  display: none; background: none; border: 1px solid rgba(255,255,255,.25);
  color: #fff; border-radius: 9px; padding: .6rem .9rem; min-height: 42px;
  font: inherit; font-size: .9rem; cursor: pointer;
}

/* ---------- Hero ---------- */
.hero {
  position: relative;
  background: var(--ink);
  color: #fff;
  overflow: hidden;
  padding: clamp(3.5rem, 9vw, 7rem) 0 0;
}
.hero::before {
  content: "";
  position: absolute; inset: 0;
  background-image:
    linear-gradient(rgba(255,255,255,.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.05) 1px, transparent 1px);
  background-size: 48px 48px;
  mask-image: radial-gradient(ellipse 90% 70% at 30% 20%, #000 30%, transparent 75%);
}
.hero::after {
  content: "";
  position: absolute; right: -12%; top: -25%;
  width: 620px; height: 620px;
  background: radial-gradient(circle, rgba(108,60,224,.55), transparent 62%);
  filter: blur(28px);
  pointer-events: none;
}
.hero__interno { position: relative; z-index: 2; display: grid; gap: 2.5rem; }
.hero h1 { max-width: 20ch; text-wrap: balance; }
.hero h1 em {
  font-style: normal;
  background: linear-gradient(100deg, var(--cyan), #8a5cf0 60%, var(--cyan));
  background-size: 200% 100%;
  -webkit-background-clip: text; background-clip: text; color: transparent;
  animation: brilho 6s ease infinite;
}
@keyframes brilho { 0%,100% { background-position: 0% 50%; } 50% { background-position: 100% 50%; } }

.hero__badge {
  display: inline-flex; align-items: center; gap: .5rem;
  font-family: var(--mono); font-size: .72rem; letter-spacing: .1em; text-transform: uppercase;
  color: rgba(255,255,255,.78);
  border: 1px solid rgba(255,255,255,.18); border-radius: 999px;
  padding: .38rem .9rem; margin-bottom: 1.4rem;
  background: rgba(255,255,255,.05); backdrop-filter: blur(6px);
}
.hero__badge::before {
  content: ""; width: 7px; height: 7px; border-radius: 50%;
  background: var(--cyan); box-shadow: 0 0 10px var(--cyan);
  animation: pulsar 2.4s ease infinite;
}
@keyframes pulsar { 0%,100% { opacity: 1; } 50% { opacity: .35; } }
.hero__sub { color: rgba(255,255,255,.74); font-size: 1.1rem; max-width: 58ch; line-height: 1.65; }
.hero .eixo { color: rgba(255,255,255,.6); }

.acoes { display: flex; flex-wrap: wrap; gap: 0.8rem; margin-top: 0.4rem; }
.botao {
  display: inline-flex; align-items: center; gap: 0.5rem;
  font-family: var(--corpo); font-weight: 600; font-size: 0.95rem;
  padding: 0.8rem 1.4rem; border-radius: 999px;
  text-decoration: none; border: 1px solid transparent; cursor: pointer;
  transition: transform var(--transicao), box-shadow var(--transicao), background var(--transicao);
}
.botao--principal {
  background: linear-gradient(100deg, var(--violet), #8a5cf0);
  color: #fff; box-shadow: 0 10px 24px -12px rgba(108,60,224,.9);
  position: relative; overflow: hidden;
}
.botao--principal::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(105deg, transparent 35%, rgba(255,255,255,.28) 50%, transparent 65%);
  transform: translateX(-120%);
  transition: transform 650ms ease;
}
.botao--principal:hover { transform: translateY(-2px); box-shadow: 0 16px 32px -12px rgba(108,60,224,1); }
.botao--principal:hover::after { transform: translateX(120%); }
.botao--fantasma { border-color: rgba(255,255,255,.28); color: #fff; }
.botao--fantasma:hover { background: rgba(255,255,255,.08); }
.botao--escuro { background: var(--ink); color: #fff; }
.botao--escuro:hover { transform: translateY(-2px); }

/* Assinatura: linha plotada que se desenha no carregamento */
.plot { width: 100%; height: clamp(120px, 18vw, 210px); display: block; margin-top: 1rem; }
.plot__linha { fill: none; stroke: url(#gradPlot); stroke-width: 2.5; stroke-linecap: round; stroke-dasharray: 1400; stroke-dashoffset: 1400; animation: desenhar 2.4s cubic-bezier(.6,.05,.2,1) .3s forwards; }
.plot__area { fill: url(#gradArea); opacity: 0; animation: aparecer 1.4s ease 1.6s forwards; }
.plot__ponto { fill: var(--cyan); opacity: 0; animation: aparecer .5s ease forwards; }
.plot__eixo { stroke: rgba(255,255,255,.14); stroke-width: 1; }
@keyframes desenhar { to { stroke-dashoffset: 0; } }
@keyframes aparecer { to { opacity: 1; } }

/* Métricas */
.metricas {
  display: grid; grid-template-columns: repeat(4, 1fr);
  border-top: 1px solid rgba(255,255,255,.12);
  position: relative; z-index: 2;
}
.metrica {
  padding: 1.5rem 1.4rem 1.9rem 0;
  border-right: 1px solid rgba(255,255,255,.1);
  display: flex; flex-direction: column; gap: .35rem;
}
.metrica:last-child { border-right: 0; }
.metrica__valor { font-family: var(--display); font-size: clamp(1.7rem, 3vw, 2.3rem); font-weight: 600; color: var(--cyan); letter-spacing: -0.03em; }
.metrica__rotulo {
  font-family: var(--mono); font-size: .73rem; line-height: 1.45;
  text-transform: uppercase; letter-spacing: .09em;
  color: rgba(255,255,255,.6); text-wrap: balance;
}

/* ---------- Seções ---------- */
.secao { padding: clamp(4rem, 8vw, 6.5rem) 0; }
.secao--clara { background: var(--paper-2); }
.secao__cabecalho { max-width: 58ch; margin-bottom: 3rem; }
.secao__cabecalho p { color: var(--slate); font-size: 1.05rem; }

/* ---------- Carrossel ----------
   Controles no alto à direita, texto embaixo à esquerda: as duas zonas
   nunca se encontram, em nenhuma largura. */
.carrossel { position: relative; border-radius: var(--raio); overflow: hidden; background: var(--ink-2); }
.carrossel__trilho { display: flex; transition: transform 620ms cubic-bezier(.22,1,.36,1); }
.carrossel__slide { min-width: 100%; position: relative; aspect-ratio: 21 / 9; display: grid; }
.carrossel__midia { grid-area: 1 / 1; overflow: hidden; }
.carrossel__midia img, .carrossel__midia svg { width: 100%; height: 100%; object-fit: cover; display: block; }

.carrossel__texto {
  grid-area: 1 / 1; align-self: end; z-index: 2;
  width: 100%;
  padding: clamp(1.4rem, 3vw, 2.4rem);
  padding-top: clamp(3rem, 7vw, 5rem);
  background: linear-gradient(to top,
    rgba(11,16,32,.97) 0%,
    rgba(11,16,32,.9) 40%,
    rgba(11,16,32,.45) 75%,
    rgba(11,16,32,0) 100%);
  color: #fff;
}
.carrossel__texto h3 {
  font-size: clamp(1.25rem, 2.5vw, 1.85rem);
  margin-bottom: .45rem; max-width: 24ch; text-wrap: balance;
}
.carrossel__texto p {
  color: rgba(255,255,255,.82); margin: 0;
  max-width: 56ch; line-height: 1.6; font-size: clamp(.9rem, 1.4vw, 1rem);
}

/* Controles agrupados no alto à direita */
.carrossel__controles {
  position: absolute; top: clamp(.9rem, 2vw, 1.2rem); right: clamp(.9rem, 2vw, 1.2rem);
  z-index: 3; display: flex; gap: .5rem;
}
.carrossel__seta {
  width: 38px; height: 38px; border-radius: 50%;
  background: rgba(11,16,32,.55); border: 1px solid rgba(255,255,255,.22);
  color: #fff; font-size: 1.05rem; line-height: 1; cursor: pointer; padding: 0;
  display: grid; place-items: center;
  backdrop-filter: blur(6px);
  transition: background var(--transicao), border-color var(--transicao), transform var(--transicao);
}
.carrossel__seta:hover { background: var(--violet); border-color: var(--violet); transform: translateY(-1px); }

.carrossel__pontos {
  position: absolute; bottom: clamp(.35rem, 1vw, .6rem); right: clamp(1.4rem, 3vw, 2.4rem);
  display: flex; gap: .5rem; z-index: 3;
}
/* O botão tem altura real de 40px (área de toque) e fundo transparente;
   o traço visível é desenhado por dentro. Ampliar com ::before não
   funciona: o alvo de clique segue a caixa do próprio botão. */
.carrossel__ponto {
  width: 30px; height: 40px; border: 0; padding: 0;
  background: none; cursor: pointer;
  display: grid; place-items: center;
}
.carrossel__ponto::after {
  content: ""; display: block;
  width: 26px; height: 3px; border-radius: 3px;
  background: rgba(255,255,255,.38);
  transition: background var(--transicao), width var(--transicao);
}
.carrossel__ponto:hover::after { background: rgba(255,255,255,.6); }
.carrossel__ponto[aria-current="true"]::after { background: var(--cyan); width: 34px; }

/* ---------- Sobre + skills ---------- */
.sobre { display: grid; grid-template-columns: 1.05fr .95fr; gap: clamp(2rem, 5vw, 4rem); align-items: start; }
.sobre__texto p { color: #313a54; }
.retrato { border-radius: var(--raio); overflow: hidden; border: 1px solid var(--linha); background: linear-gradient(140deg, #eef0f8, #dfe3f2); aspect-ratio: 4/5; display: grid; place-items: center; color: var(--slate); font-family: var(--mono); font-size: .8rem; }

.skill { margin-bottom: 1.25rem; }
.skill__topo { display: flex; justify-content: space-between; align-items: baseline; gap: 1rem; font-size: .95rem; }
.skill__nome { font-weight: 600; }
.skill__cat { font-family: var(--mono); font-size: .72rem; text-transform: uppercase; letter-spacing: .08em; color: var(--slate); }
.skill__barra { height: 6px; background: var(--linha); border-radius: 99px; margin-top: .5rem; overflow: hidden; }
.skill__preenchimento { height: 100%; width: 0; border-radius: 99px; background: linear-gradient(90deg, var(--violet), var(--cyan)); transition: width 1.1s cubic-bezier(.22,1,.36,1); }

/* ---------- Cartões ---------- */
.grade { display: grid; gap: 1.6rem; grid-template-columns: repeat(3, 1fr); grid-auto-rows: 1fr; align-items: stretch; }
.cartao {
  background: var(--paper-2);
  border: 1px solid var(--linha);
  border-radius: var(--raio);
  overflow: hidden;
  display: flex; flex-direction: column;
  text-decoration: none; color: inherit;
  box-shadow: var(--sombra-cartao);
  transition: transform var(--transicao), box-shadow var(--transicao), border-color var(--transicao);
}
.cartao:hover { transform: translateY(-5px); border-color: rgba(108,60,224,.45); box-shadow: var(--sombra-alta); }
.cartao__capa { position: relative; }
.cartao__capa::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(to top, rgba(11,16,32,.12), transparent 40%);
  pointer-events: none;
}
.cartao__capa img, .cartao__capa svg { transition: transform 600ms cubic-bezier(.22,1,.36,1); }
.cartao:hover .cartao__capa img, .cartao:hover .cartao__capa svg { transform: scale(1.045); }
.cartao h3 { transition: color var(--transicao); }
.cartao:hover h3 { color: var(--violet); }
.cartao__capa { aspect-ratio: 16/9; background: var(--ink-2); position: relative; overflow: hidden; }
.cartao__capa img, .cartao__capa svg { width: 100%; height: 100%; object-fit: cover; display: block; }
.cartao__corpo {
  padding: 1.4rem; display: flex; flex-direction: column; gap: .55rem;
  flex: 1; min-width: 0;
}
.cartao__corpo h3 { margin: 0; font-size: 1.16rem; line-height: 1.28; text-wrap: balance; }
.cartao__corpo p {
  color: var(--slate); font-size: .94rem; margin: 0; line-height: 1.55;
  display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical;
  overflow: hidden;
}
.cartao__meta { font-family: var(--mono); font-size: .72rem; letter-spacing: .08em; text-transform: uppercase; color: var(--slate); }
.tags { display: flex; flex-wrap: wrap; gap: .4rem; margin-top: auto; padding-top: .8rem; }
.tag { font-family: var(--mono); font-size: .7rem; letter-spacing: .06em; padding: .25rem .6rem; border-radius: 99px; background: rgba(108,60,224,.09); color: var(--violet); }

.destaque-flag { position: absolute; top: .8rem; left: .8rem; z-index: 2; font-family: var(--mono); font-size: .7rem; letter-spacing: .08em; text-transform: uppercase; background: var(--amber); color: #3a2600; padding: .25rem .55rem; border-radius: 6px; }

/* ---------- Trajetória (linha do tempo) ---------- */
/* A trajetória é uma coluna de leitura. A linha do tempo, a formação, a
   nota e os botões partem do mesmo recuo e terminam na mesma largura —
   antes cada bloco acabava num ponto diferente da tela. */
#trajetoria {
  --recuo: calc(6px + clamp(1.2rem, 3vw, 2.2rem));
  /* em rem, e não em ch: a unidade ch muda com o corpo de cada bloco e
     fazia a nota terminar 30px antes dos cartões de formação. */
  --medida: 45rem;
}
#trajetoria .formacao,
#trajetoria .trajetoria__nota,
#trajetoria .acoes {
  /* +1px: a espessura da linha do tempo, para o texto bater na vertical */
  margin-left: calc(var(--recuo) + 1px);
  max-width: var(--medida);
}

.trajetoria {
  border-left: 1px solid var(--linha-forte); margin-left: 6px;
  padding-left: clamp(1.2rem, 3vw, 2.2rem);
  /* desconta a própria borda e a margem para o conteúdo medir --medida */
  max-width: calc(var(--medida) + var(--recuo) - 5px);
}
.etapa { position: relative; padding-bottom: 2.6rem; }
.etapa:last-child { padding-bottom: 0; }
.etapa::before {
  content: ""; position: absolute;
  left: calc(-1 * clamp(1.2rem, 3vw, 2.2rem) - 5px);
  top: .55rem; width: 9px; height: 9px; border-radius: 50%;
  background: var(--paper); border: 2px solid var(--violet);
}
.etapa:first-child::before { background: var(--violet); box-shadow: 0 0 0 4px rgba(108,60,224,.15); }
.etapa__periodo { font-family: var(--mono); font-size: .74rem; letter-spacing: .1em; text-transform: uppercase; color: var(--violet); }
.etapa__cargo { font-family: var(--display); font-size: 1.2rem; font-weight: 600; margin: .25rem 0 .1rem; }
.etapa__empresa { font-weight: 600; color: var(--ink); font-size: .96rem; }
.etapa__local { color: var(--slate); font-size: .86rem; }
.etapa__descricao { color: #313a54; font-size: .96rem; margin: .7rem 0 0; }
.etapa__descricao p { margin: 0 0 .7rem; }
.etapa__descricao p:last-child { margin-bottom: 0; }

.formacao { display: grid; gap: 1.2rem; grid-template-columns: repeat(2, 1fr); margin-top: 3rem; align-items: stretch; }
.formacao__item { border: 1px solid var(--linha); border-left: 3px solid var(--cyan); border-radius: var(--raio); padding: 1.1rem 1.3rem; background: var(--paper-2); }
.formacao__item h4 { font-family: var(--display); margin: 0 0 .2rem; font-size: 1.02rem; }
.formacao__item p { margin: 0; color: var(--slate); font-size: .9rem; }
.formacao__item span { font-family: var(--mono); font-size: .72rem; letter-spacing: .08em; color: var(--slate); }

/* ---------- Setores atendidos ---------- */
.setores { display: grid; gap: 1.1rem; grid-template-columns: repeat(4, 1fr); grid-auto-rows: 1fr; align-items: stretch; }
.setor {
  padding: 1.6rem 1.5rem; border-radius: var(--raio);
  background: var(--paper-2); border: 1px solid var(--linha);
  box-shadow: var(--sombra-cartao);
  position: relative; overflow: hidden;
  transition: transform var(--transicao), border-color var(--transicao);
}
.setor::before { content: ""; position: absolute; inset: 0 auto 0 0; width: 3px; background: var(--violet); }
.setor:nth-child(2)::before { background: var(--cyan); }
.setor:nth-child(3)::before { background: var(--amber); }
.setor:nth-child(4)::before { background: #12a37a; }
.setor:hover { transform: translateY(-4px); border-color: rgba(108,60,224,.4); box-shadow: var(--sombra-alta); }
.setor h3 { font-size: 1.05rem; margin-bottom: .4rem; }
.setor p { margin: 0; color: var(--slate); font-size: .93rem; }

/* ---------- Processo ---------- */
.processo { display: grid; grid-template-columns: repeat(4, 1fr); grid-auto-rows: 1fr; gap: 1.1rem; counter-reset: passo; }
.passo {
  position: relative; padding: 1.6rem 1.4rem 1.5rem;
  background: var(--paper-2); border: 1px solid var(--linha); border-radius: var(--raio);
  box-shadow: var(--sombra-cartao);
}
.passo__num {
  font-family: var(--mono); font-size: .74rem; letter-spacing: .14em;
  color: var(--violet); display: inline-flex; align-items: center; gap: .55rem; margin-bottom: .8rem;
}
.passo__num::after { content: ""; width: 26px; height: 1px; background: linear-gradient(90deg, var(--violet), transparent); }
.passo h3 { font-size: 1.04rem; margin-bottom: .4rem; }
.passo p { margin: 0; color: var(--slate); font-size: .92rem; }
.passo:not(:last-child)::after {
  content: "→"; position: absolute; right: -1rem; top: 50%; transform: translateY(-50%);
  color: var(--linha-forte); font-size: 1.1rem; z-index: 2;
}

/* ---------- Faixa de chamada ---------- */
.chamada {
  background: linear-gradient(115deg, #1c1240, var(--ink) 55%, #0a2b38);
  border-radius: var(--raio); color: #fff;
  padding: clamp(2rem, 5vw, 3.2rem);
  display: flex; align-items: center; justify-content: space-between; gap: 2rem; flex-wrap: wrap;
  position: relative; overflow: hidden;
}
.chamada::before {
  content: ""; position: absolute; right: -8%; top: -50%;
  width: 380px; height: 380px; border-radius: 50%;
  background: radial-gradient(circle, rgba(22,192,217,.25), transparent 65%);
  pointer-events: none;
}
.chamada h2 { margin: 0 0 .35rem; font-size: clamp(1.4rem, 3vw, 1.9rem); max-width: 24ch; }
.chamada p { margin: 0; color: rgba(255,255,255,.72); max-width: 48ch; }
.chamada .botao { flex-shrink: 0; }

/* ---------- Serviços ---------- */
.servicos { display: grid; gap: 1.5rem; grid-template-columns: repeat(3, 1fr); grid-auto-rows: 1fr; align-items: stretch; }
.servico { padding: 1.6rem; border-radius: var(--raio); background: var(--paper-2); border: 1px solid var(--linha); border-top: 3px solid var(--violet); }
.servico:nth-child(2) { border-top-color: var(--cyan); }
.servico:nth-child(3) { border-top-color: var(--amber); }
.servico h3 { margin-bottom: .4rem; }
.servico p { color: var(--slate); margin: 0; font-size: .95rem; }

/* ---------- Formulário de briefing ---------- */
.secao__cabecalho--centro { margin-inline: auto; text-align: center; }
.eixo--centro { justify-content: center; }

.briefing {
  max-width: 820px; margin-inline: auto;
  background: var(--ink); color: #fff;
  border-radius: 18px; padding: clamp(1.5rem, 4vw, 2.75rem);
  display: grid; gap: 1.35rem;
  box-shadow: 0 30px 60px -40px rgba(11, 16, 32, .8);
}
.briefing__grade { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.1rem 1.35rem; }
.briefing__grade--tres { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.campo-f { display: grid; gap: .4rem; align-content: start; min-width: 0; }
.campo-f label, .campo-f .rotulo {
  font-family: var(--mono); font-size: .7rem; letter-spacing: .12em;
  text-transform: uppercase; color: rgba(255, 255, 255, .6);
}
.campo-f .opcional { text-transform: none; letter-spacing: 0; color: rgba(255, 255, 255, .35); }

.briefing input, .briefing textarea, .briefing select {
  width: 100%; min-width: 0; font: inherit; font-size: .95rem; color: #fff;
  background: rgba(255, 255, 255, .06);
  border: 1px solid rgba(255, 255, 255, .16);
  border-radius: 10px; padding: .72rem .85rem; height: 46px;
  transition: border-color var(--transicao), background var(--transicao);
}
.briefing textarea { height: auto; min-height: 108px; resize: vertical; line-height: 1.6; }
.briefing select {
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5 6 6.5 11 1.5' fill='none' stroke='%2394a3c4' stroke-width='1.8' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right .9rem center; background-size: 11px;
  padding-right: 2.4rem; cursor: pointer;
}
.briefing select:not([data-preenchido]) { color: rgba(255, 255, 255, .45); }
.briefing select option { background: var(--ink-2); color: #fff; }
.briefing input::placeholder, .briefing textarea::placeholder { color: rgba(255, 255, 255, .33); }
.briefing input:focus, .briefing textarea:focus, .briefing select:focus {
  outline: 0; border-color: var(--cyan); background: rgba(255, 255, 255, .1);
}
.briefing [aria-invalid="true"] { border-color: #ff8b9a; }

.dica-campo { margin: .15rem 0 0; font-size: .78rem; line-height: 1.55; color: rgba(255, 255, 255, .45); }
.dica-campo strong { color: rgba(255, 255, 255, .7); font-weight: 600; }
.dica-campo--largo { margin-top: -.5rem; }

.chips { display: flex; flex-wrap: wrap; gap: .45rem; }
.chip {
  font-size: .85rem; padding: .45rem .85rem; border-radius: 999px; cursor: pointer;
  border: 1px solid rgba(255, 255, 255, .2); color: rgba(255, 255, 255, .82);
  transition: background var(--transicao), border-color var(--transicao), color var(--transicao);
  user-select: none;
}
.chip input { position: absolute; opacity: 0; width: 0; height: 0; }
.chip:hover { border-color: rgba(255, 255, 255, .45); }
.chip:has(input:checked) { background: var(--violet); border-color: var(--violet); color: #fff; }
.chip:has(input:focus-visible) { outline: 2px solid var(--cyan); outline-offset: 2px; }

/* Campo-isca contra robôs de formulário: fica fora da tela e sem
   dimensão. O padding e a borda precisam ir a zero, senão o box-sizing
   mantém ~25px de altura e o campo aparece em auditorias de layout. */
#b-isca {
  position: absolute; left: -9999px; top: 0;
  width: 1px; height: 1px; min-height: 0;
  padding: 0; border: 0; opacity: 0;
}
.briefing__rodape { display: flex; flex-wrap: wrap; align-items: center; gap: 1rem; margin-top: .3rem; }
#b-enviar[disabled] { opacity: .6; cursor: progress; }
.briefing__retorno { margin: 0; font-size: .9rem; flex: 1; min-width: 200px; }
.briefing__retorno[data-estado="erro"] { color: #ff9aa8; }
.briefing__retorno[data-estado="ok"] { color: var(--cyan); }
.briefing__nota {
  margin: .2rem 0 0; font-size: .86rem; line-height: 1.6;
  color: rgba(255, 255, 255, .55);
  border-top: 1px solid rgba(255, 255, 255, .1); padding-top: 1.1rem;
}
.briefing__nota a { color: var(--cyan); text-decoration: none; border-bottom: 1px solid rgba(22,192,217,.35); }
.briefing__nota a:hover { border-bottom-color: var(--cyan); }

.briefing--enviado { text-align: center; padding: 2.5rem 1rem; }
.briefing--enviado h3 { color: #fff; margin-bottom: .5rem; }
.briefing--enviado p { color: rgba(255, 255, 255, .72); margin: 0; }

/* ---------- Rodapé ---------- */
.rodape { background: var(--ink); color: rgba(255, 255, 255, .62); padding: clamp(2.5rem, 5vw, 3.5rem) 0 1.5rem; font-size: .92rem; }
.rodape__grade {
  display: grid; grid-template-columns: 1.6fr 1fr 1fr;
  gap: clamp(1.75rem, 4vw, 3.5rem); padding-bottom: 2.25rem;
  border-bottom: 1px solid rgba(255, 255, 255, .1);
}
.rodape__nome { font-family: var(--display); font-size: 1.15rem; font-weight: 600; color: #fff; margin: 0 0 .5rem; }
.rodape__pitch { margin: 0; max-width: 42ch; line-height: 1.6; }
.rodape__titulo {
  font-family: var(--mono); font-size: .7rem; letter-spacing: .14em; text-transform: uppercase;
  color: rgba(255, 255, 255, .45); margin: 0 0 .9rem; font-weight: 500;
}
.rodape__lista { list-style: none; margin: 0; padding: 0; display: grid; gap: .55rem; }
.rodape__lista a { color: rgba(255, 255, 255, .78); text-decoration: none; transition: color var(--transicao); }
.rodape__lista a:hover { color: var(--cyan); }
.rodape__lista .rotulo-linha {
  display: block; font-family: var(--mono); font-size: .7rem; letter-spacing: .1em;
  text-transform: uppercase; color: rgba(255, 255, 255, .4);
}
.rodape__barra {
  display: flex; flex-wrap: wrap; justify-content: space-between; gap: .75rem;
  padding-top: 1.5rem; font-size: .84rem; color: rgba(255, 255, 255, .45);
}
.rodape__barra p { margin: 0; }
.rodape__barra a { color: rgba(255, 255, 255, .6); text-decoration: none; }
.rodape__barra a:hover { color: #fff; }

/* ---------- Página de post / projeto ---------- */
.artigo { max-width: 68ch; margin-inline: auto; padding: clamp(2.5rem, 6vw, 4.5rem) 0; }
.artigo h1 { font-size: clamp(2rem, 4.5vw, 3rem); }
.artigo h2 { font-size: 1.5rem; margin-top: 2.2rem; }
.artigo p { font-size: 1.06rem; color: #26304a; }
.artigo__capa { border-radius: var(--raio); overflow: hidden; margin: 2rem 0; }
.voltar { font-family: var(--mono); font-size: .78rem; letter-spacing: .1em; text-transform: uppercase; color: var(--violet); text-decoration: none; }

.trajetoria__nota {
  margin: 2.5rem 0 0; padding: 1.2rem 1.4rem; border-radius: var(--raio);
  background: var(--paper-2); border: 1px solid var(--linha); border-left: 3px solid var(--cyan);
  color: #313a54; font-size: .96rem;
}
.botao--secundario-claro { border: 1px solid var(--linha-forte); color: var(--ink); background: var(--paper-2); }
.botao--secundario-claro:hover { border-color: var(--violet); color: var(--violet); }

/* ---------- Estudo de caso e artigos ---------- */
.artigo__autor {
  font-size: .88rem; color: var(--slate);
  border-left: 2px solid var(--violet); padding-left: .8rem; margin: 0 0 1.8rem;
}
.caso { display: grid; gap: 1.6rem; margin: 2.5rem 0 1.5rem; padding: 1.8rem; background: var(--paper); border-radius: var(--raio); border: 1px solid var(--linha); }
.caso__item p { margin: 0; color: #26304a; font-size: .98rem; }
.caso__rotulo {
  font-family: var(--mono); font-size: .7rem; letter-spacing: .14em; text-transform: uppercase;
  color: var(--violet); margin: 0 0 .35rem; font-weight: 500;
}
.caso__nota { font-size: .84rem; color: var(--slate); font-style: italic; border-top: 1px solid var(--linha); padding-top: 1rem; }

.cta-artigo {
  margin: 3rem 0 0; padding: 2rem; border-radius: var(--raio);
  background: linear-gradient(115deg, #1c1240, var(--ink) 60%, #0a2b38); color: #fff;
}
.cta-artigo h2 { margin: 0 0 .5rem; font-size: 1.3rem; }
.cta-artigo p { color: rgba(255,255,255,.75); margin: 0 0 1.3rem; font-size: .96rem; }

.relacionados__titulo { font-size: 1.1rem; margin: 3rem 0 1rem; }
.relacionados { list-style: none; padding: 0; margin: 0; display: grid; gap: .8rem; }
.relacionados a {
  display: block; padding: 1rem 1.2rem; border: 1px solid var(--linha); border-radius: 12px;
  text-decoration: none; color: var(--ink); font-weight: 600;
  transition: border-color var(--transicao), transform var(--transicao);
}
.relacionados a:hover { border-color: var(--violet); transform: translateX(3px); }
.relacionados__data { display: block; font-family: var(--mono); font-size: .7rem; color: var(--slate); font-weight: 400; letter-spacing: .08em; }

/* ---------- Utilitários ---------- */
.revela { opacity: 0; transform: translateY(18px); transition: opacity .7s ease, transform .7s cubic-bezier(.22,1,.36,1); }
.revela.visivel { opacity: 1; transform: none; }
.vazio { color: var(--slate); font-family: var(--mono); font-size: .85rem; }
:focus-visible { outline: 2px solid var(--cyan); outline-offset: 3px; border-radius: 4px; }

/* ---------- Responsivo ----------
   Contagem de colunas declarada por faixa: evita as tracks vazias que o
   auto-fit criava e mantém os cartões com a mesma largura em cada linha. */

/* Desktop estreito e tablet deitado */
@media (max-width: 1180px) {
  .setores { grid-template-columns: repeat(2, 1fr); }
  .processo { grid-template-columns: repeat(2, 1fr); }
  .passo:not(:last-child)::after { content: none; }
  .rodape__grade { grid-template-columns: 1.4fr 1fr 1fr; }
}

@media (max-width: 1000px) {
  .grade { grid-template-columns: repeat(2, 1fr); }
  .servicos { grid-template-columns: repeat(2, 1fr); }
  .briefing__grade--tres { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .rodape__grade { grid-template-columns: 1fr 1fr; }
  .rodape__marca { grid-column: 1 / -1; }
  .metricas { grid-template-columns: repeat(2, 1fr); }
  .metrica:nth-child(2n) { border-right: 0; }
  .metrica { padding-right: 1rem; }
}

/* Tablet em pé */
@media (max-width: 900px) {
  .sobre { grid-template-columns: 1fr; gap: 2rem; }
  .retrato { max-width: 300px; aspect-ratio: 1; }
  .nav {
    position: fixed; inset: 62px 0 auto; flex-direction: column;
    background: var(--ink); padding: 1.2rem 1.5rem 2rem; gap: 1rem; display: none;
    border-bottom: 1px solid rgba(255, 255, 255, .1);
  }
  .nav.aberto { display: flex; }
  .menu-botao { display: block; }
  .contato { grid-template-columns: 1fr; }
  .carrossel__slide { aspect-ratio: 16 / 10; }

  /* Alvos de toque confortáveis: a recomendação de acessibilidade é
     pelo menos 40px de altura para qualquer elemento clicável. Vale a
     partir daqui, e não de 760px, porque é neste ponto que o menu vira
     gaveta e a tela passa a ser de toque. */
  .rodape__lista a, .rodape__barra a, .nav a { display: block; padding: .5rem 0; min-height: 40px; }
  .rodape__lista { gap: .2rem; }
  .chip { min-height: 40px; display: inline-flex; align-items: center; }
  .briefing input, .briefing select { min-height: 46px; }
}

/* Celular deitado e tablet pequeno */
@media (max-width: 760px) {
  .grade, .setores, .servicos, .processo, .formacao { grid-template-columns: 1fr; }

  /* Nome e categoria lado a lado só cabem em tela larga: em celular a
     categoria encosta na borda. Aqui ela desce para a linha seguinte. */
  .skill__topo { flex-direction: column; align-items: flex-start; gap: .15rem; }
  .skill__cat { letter-spacing: .06em; }
  /* Em telas estreitas a proporção fixa espremia o texto contra os
     controles. A altura passa a seguir o conteúdo, com um piso. */
  .carrossel__slide { aspect-ratio: auto; min-height: 400px; }
  .carrossel__texto { padding-top: 5.5rem; }
  .trajetoria { padding-left: 1.25rem; }
  #trajetoria { --recuo: calc(6px + 1.25rem); --medida: none; }
  .etapa::before { left: calc(-1.25rem - 5px); }
  .chamada { flex-direction: column; align-items: flex-start; }
  .cartao__corpo p { -webkit-line-clamp: 4; }
}

/* Celular em pé */
@media (max-width: 560px) {
  .container { width: min(100% - 2rem, var(--max)); }
  .carrossel__slide { min-height: 430px; }
  .carrossel__texto h3 { font-size: 1.2rem; max-width: 20ch; }
  .briefing__grade, .briefing__grade--tres { grid-template-columns: 1fr; }
  .rodape__grade { grid-template-columns: 1fr; gap: 2rem; }
  .chip { font-size: .82rem; padding: .4rem .75rem; }
  .briefing__rodape { flex-direction: column; align-items: stretch; }
  #b-enviar { justify-content: center; }
  .caso { padding: 1.3rem; }
  .cta-artigo { padding: 1.5rem; }
}

/* Celular estreito: a faixa de métricas empilha de vez */
@media (max-width: 430px) {
  .metricas { grid-template-columns: 1fr; }
  .metrica {
    border-right: 0; border-bottom: 1px solid rgba(255,255,255,.1);
    padding: 1.1rem 0 1.1rem;
  }
  .metrica:last-child { border-bottom: 0; }
  .acoes { flex-direction: column; align-items: stretch; }
  .acoes .botao { justify-content: center; }
  .hero__badge { font-size: .7rem; padding: .4rem .8rem; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; scroll-behavior: auto !important; }
  .plot__linha { stroke-dashoffset: 0; }
  .plot__area, .plot__ponto { opacity: 1; }
  .revela { opacity: 1; transform: none; }
}

.capa-vazia { width: 100%; height: 100%; background: linear-gradient(130deg, #1a2140, #3a2a72); }