/* =========================================================
   JLCosta Soluções Tecnológicas
   Design system enxuto: hierarquia por tipografia, separação
   por borda de 1px. Uma cor de marca. Sem gradiente decorativo.
   ========================================================= */

:root {
  /* tinta */
  --ink-900: #0a1a2f;
  --ink-800: #1d2d42;
  --ink-700: #3d4d61;
  --ink-600: #56677c;
  --ink-500: #5f7085;
  --ink-400: #93a1b3;

  /* superfícies */
  --sf-0: #ffffff;
  --sf-1: #fafbfc;
  --sf-2: #f4f6f9;

  /* bordas */
  --bd:       #e4e9ef;
  --bd-forte: #d2dae4;
  --bd-campo:  #8293a8;   /* borda de campo: 3.14:1, exigido para componente */

  /* marca */
  --marca:        #006fdf;
  --marca-escura: #0057b3;
  --marca-fraca:  #eef5ff;

  /* escuro (rodapé) */
  --navy: #012650;

  /* forma */
  --r-sm: 4px;
  --r:    6px;
  --r-md: 8px;

  --sombra: 0 1px 2px rgba(10, 26, 47, .06);

  --wrap: 1120px;
  --topo-h: 64px;

  --fonte: "Inter", -apple-system, "Segoe UI", system-ui, sans-serif;
}

/* ---------------- reset e base ---------------- */

*, *::before, *::after { box-sizing: border-box; }

html { scroll-behavior: smooth; scroll-padding-top: calc(var(--topo-h) + 24px); }

body {
  margin: 0;
  font-family: var(--fonte);
  font-size: 16px;
  line-height: 1.6;
  color: var(--ink-700);
  background: var(--sf-0);
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3 { margin: 0; color: var(--ink-900); font-weight: 600; letter-spacing: -.021em; }
h1 { font-size: clamp(2.125rem, 4vw, 3.125rem); line-height: 1.08; letter-spacing: -.032em; }
h2 { font-size: clamp(1.5rem, 2.4vw, 1.9375rem); line-height: 1.2; letter-spacing: -.026em; }
h3 { font-size: 1rem; line-height: 1.45; }

p { margin: 0 0 1rem; }
p:last-child { margin-bottom: 0; }
ul, dl, dd { margin: 0; padding: 0; }
ul { list-style: none; }
img { max-width: 100%; height: auto; display: block; }

a, button, input, textarea, select { touch-action: manipulation; }
a { color: var(--marca); text-decoration: none; }
a:hover { text-decoration: underline; text-underline-offset: 3px; }

svg { width: 100%; height: 100%; fill: none; stroke: currentColor;
      stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }

.wrap { width: min(100% - 40px, var(--wrap)); margin-inline: auto; }

.sr {
  position: absolute; width: 1px; height: 1px; overflow: hidden;
  clip-path: inset(50%); white-space: nowrap;
}

.skip {
  position: absolute; left: -9999px; top: 0; z-index: 100;
  background: var(--ink-900); color: #fff; padding: 10px 16px; font-size: .875rem;
}
.skip:focus { left: 0; }

:focus-visible { outline: 2px solid var(--marca); outline-offset: 2px; border-radius: var(--r-sm); }

/* ---------------- tipografia utilitária ---------------- */

.rotulo {
  font-size: .75rem; font-weight: 600; line-height: 1.4;
  letter-spacing: .07em; text-transform: uppercase;
  color: var(--ink-500); margin: 0 0 12px;
}

.lead { font-size: 1.0625rem; line-height: 1.65; color: var(--ink-600); max-width: 56ch; }

/* ---------------- botões e links de ação ---------------- */

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  font: inherit; font-size: .9375rem; font-weight: 500; letter-spacing: -.006em;
  padding: 10px 18px; border: 1px solid transparent; border-radius: var(--r);
  cursor: pointer; white-space: nowrap;
  transition: background-color .14s ease, border-color .14s ease, color .14s ease;
}
.btn:hover { text-decoration: none; }
.btn:active { transform: translateY(.5px); }
.btn[disabled] { opacity: .6; cursor: default; }
.btn[disabled]:active { transform: none; }

.btn--primario { background: var(--marca); color: #fff; box-shadow: var(--sombra); }
.btn--primario:hover { background: var(--marca-escura); }

.btn--sm    { padding: 7px 14px; font-size: .875rem; }
.btn--bloco { width: 100%; padding: 12px 18px; }

.link-seta {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: .9375rem; font-weight: 500; color: var(--ink-800);
}
.link-seta::after { content: "→"; color: var(--marca); transition: transform .14s ease; }
.link-seta:hover { text-decoration: none; color: var(--marca); }
.link-seta:hover::after { transform: translateX(3px); }

.acoes { display: flex; align-items: center; gap: 24px; flex-wrap: wrap; margin-top: 32px; }

/* ---------------- topo ---------------- */

.topo {
  position: sticky; top: 0; z-index: 50;
  background: var(--sf-0);
  border-bottom: 1px solid var(--bd);
}
.topo__inner {
  height: var(--topo-h);
  display: flex; align-items: center; justify-content: space-between; gap: 24px;
}
.topo__logo { display: block; flex: none; }
.topo__logo img { height: 30px; width: auto; }
.topo__logo:hover { text-decoration: none; }

.nav { display: flex; align-items: center; gap: 28px; }
.nav > a:not(.btn) {
  font-size: .9375rem; font-weight: 500; color: var(--ink-700);
  transition: color .14s ease;
}
.nav > a:not(.btn):hover { color: var(--ink-900); text-decoration: none; }

.menu-btn {
  display: none; width: 36px; height: 36px; padding: 0;
  border: 1px solid var(--bd-forte); background: var(--sf-0); border-radius: var(--r);
  cursor: pointer; flex-direction: column; align-items: center; justify-content: center; gap: 4px;
}
.menu-btn span { display: block; width: 15px; height: 1.5px; background: var(--ink-800); transition: .18s ease; }
.menu-btn[aria-expanded="true"] span:nth-child(1) { transform: translateY(5.5px) rotate(45deg); }
.menu-btn[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.menu-btn[aria-expanded="true"] span:nth-child(3) { transform: translateY(-5.5px) rotate(-45deg); }

/* ---------------- hero ---------------- */

.hero { padding: clamp(56px, 8vw, 104px) 0 clamp(48px, 6vw, 80px); }
.hero__inner {
  display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, .85fr);
  gap: clamp(32px, 5vw, 72px); align-items: start;
}
.hero h1 { margin-bottom: 20px; max-width: 14ch; }

/* ficha lateral: informação, não enfeite */
.ficha {
  border: 1px solid var(--bd); border-radius: var(--r-md);
  background: var(--sf-0); box-shadow: var(--sombra); overflow: hidden;
}
.ficha__topo {
  display: flex; align-items: center; gap: 12px;
  padding: 16px 20px; border-bottom: 1px solid var(--bd); background: var(--sf-1);
}
.ficha__topo img { width: 26px; flex: none; }
.ficha__topo strong { display: block; font-size: .9375rem; color: var(--ink-900); font-weight: 600; }
.ficha__topo span   { display: block; font-size: .8125rem; color: var(--ink-500); }

.ficha__lista > div {
  display: grid; grid-template-columns: 104px 1fr; gap: 16px;
  padding: 12px 20px; border-bottom: 1px solid var(--bd);
}
.ficha__lista > div:last-child { border-bottom: 0; }
.ficha__lista dt { font-size: .8125rem; color: var(--ink-500); }
.ficha__lista dd { font-size: .8125rem; color: var(--ink-800); font-weight: 500; }

/* ---------------- tira de capacidades ---------------- */

.capacidades { padding-bottom: clamp(48px, 6vw, 80px); }

.tira {
  display: grid; grid-template-columns: repeat(4, 1fr);
  border: 1px solid var(--bd); border-radius: var(--r-md); overflow: hidden;
}
.tira > li { padding: 22px 24px; border-right: 1px solid var(--bd); }
.tira > li:last-child { border-right: 0; }
.tira svg { width: 18px; height: 18px; color: var(--marca); margin-bottom: 12px; }
.tira h2 {
  font-size: .75rem; font-weight: 600; letter-spacing: .07em; text-transform: uppercase;
  color: var(--ink-900); margin-bottom: 6px;
}
.tira p { font-size: .875rem; line-height: 1.55; color: var(--ink-600); margin: 0; }

/* ---------------- seções ---------------- */

.secao { padding: clamp(56px, 7vw, 96px) 0; }
.secao--alt { background: var(--sf-1); border-block: 1px solid var(--bd); }

.secao__grid {
  display: grid; grid-template-columns: minmax(0, .78fr) minmax(0, 1.22fr);
  gap: clamp(32px, 5vw, 72px); align-items: start;
}
.secao__cabeca h2 { margin-bottom: 14px; }
.secao__cabeca--larga { max-width: 60ch; margin-bottom: 40px; }
.secao__nota { font-size: .9375rem; line-height: 1.65; color: var(--ink-600); max-width: 58ch; margin: 0; }

/* lista de definições — substitui a grade de cards */
.definicoes { border-top: 1px solid var(--bd); }
.definicoes > div { padding: 20px 0; border-bottom: 1px solid var(--bd); }
.definicoes dt {
  display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap;
  font-size: 1rem; font-weight: 600; color: var(--ink-900); margin-bottom: 5px;
}
.definicoes dt span {
  font-size: .6875rem; font-weight: 600; letter-spacing: .06em; text-transform: uppercase;
  color: var(--ink-500); border: 1px solid var(--bd-forte); border-radius: var(--r-sm);
  padding: 1px 6px;
}
.definicoes dd { font-size: .9375rem; line-height: 1.6; color: var(--ink-600); max-width: 62ch; }

/* ---------------- tabela de modalidades ---------------- */

.tabela-rolo { overflow-x: auto; }

.tabela {
  width: 100%; border-collapse: collapse; text-align: left;
  border: 1px solid var(--bd); border-radius: var(--r-md); overflow: hidden;
  background: var(--sf-0);
}
.tabela thead th {
  vertical-align: bottom; padding: 20px 20px 18px;
  font-size: 1rem; font-weight: 600; color: var(--ink-900);
  border-bottom: 1px solid var(--bd-forte); border-left: 1px solid var(--bd);
  background: var(--sf-0);
}
.tabela thead td { border-bottom: 1px solid var(--bd-forte); background: var(--sf-0); }

.tabela__n {
  display: block; font-size: .75rem; font-weight: 600; letter-spacing: .07em;
  color: var(--ink-500); margin-bottom: 8px;
}
.marca-sutil {
  display: inline-block; margin-left: 8px; vertical-align: 1px;
  font-size: .6875rem; font-weight: 600; letter-spacing: .04em;
  color: var(--marca-escura); background: var(--marca-fraca);
  border: 1px solid #d5e6fb; border-radius: var(--r-sm); padding: 1px 6px;
}

.tabela tbody th {
  width: 148px; padding: 16px 20px; vertical-align: top;
  font-size: .8125rem; font-weight: 500; color: var(--ink-500);
  border-bottom: 1px solid var(--bd); background: var(--sf-1);
}
.tabela tbody td {
  padding: 16px 20px; vertical-align: top;
  font-size: .9375rem; line-height: 1.55; color: var(--ink-700);
  border-bottom: 1px solid var(--bd); border-left: 1px solid var(--bd);
}
.tabela tbody tr:last-child th,
.tabela tbody tr:last-child td { border-bottom: 0; }

.tabela .is-destaque { background: var(--marca-fraca); }
.tabela thead th.is-destaque { box-shadow: inset 0 2px 0 var(--marca); }

/* ---------------- sobre ---------------- */

/* retrato: a origem tem 400x400, entao 200px exibidos = 2x exato.
   Quadrado com o mesmo raio das outras superficies, nao circulo. */
/* ---------------- linha do tempo ---------------- */
/* Lista de definicoes em linhas, nao cartoes: a separacao e por borda de 1px,
   como no resto da pagina. O ultimo marco e o unico com cor, porque e o presente. */
.linha-tempo { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--bd); }
.linha-tempo > li {
  display: grid; grid-template-columns: 104px minmax(0, 1fr); gap: 24px;
  padding: 22px 0; border-bottom: 1px solid var(--bd);
}
.linha-tempo__ano {
  font-size: .9375rem; font-weight: 600; color: var(--ink-900); padding-top: 1px;
  font-variant-numeric: tabular-nums; letter-spacing: -.01em;
}
.linha-tempo > li:last-child .linha-tempo__ano { color: var(--marca-escura); }
.linha-tempo__corpo h3 { margin: 0 0 5px; font-weight: 600; }
.linha-tempo__corpo p { margin: 0; color: var(--ink-600); }
/* duas classes vencem ".linha-tempo__corpo p" sem precisar de !important */
.linha-tempo__corpo .linha-tempo__marcas {
  margin-top: 10px;
  display: flex; flex-wrap: wrap; gap: 6px;
}
.linha-tempo__marcas span {
  font-size: .75rem; color: var(--ink-700);
  border: 1px solid var(--bd); border-radius: var(--r);
  padding: 2px 7px; background: var(--sf-0);
}

/* cargo, logo abaixo do nome — o h2 ja deixa 14px, o recuo aperta para ~7px */
.cargo {
  margin: -7px 0 0;
  font-size: .9375rem; font-weight: 500; color: var(--ink-600);
}

.retrato { margin: 24px 0 0; width: 200px; max-width: 100%; }
.retrato img {
  width: 100%; height: auto; display: block;
  border-radius: var(--r-md);
  border: 1px solid var(--bd);
  background: var(--sf-1);
}

.sobre__texto p { font-size: .9375rem; line-height: 1.7; color: var(--ink-600); max-width: 62ch; }

.indicadores {
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
  margin-top: 32px; border: 1px solid var(--bd); border-radius: var(--r-md); overflow: hidden;
}
.indicadores > div { padding: 14px 18px; border-right: 1px solid var(--bd); }
.indicadores > div:last-child { border-right: 0; }
.indicadores dt { font-size: .75rem; color: var(--ink-500); margin-bottom: 2px; }
.indicadores dd {
  font-size: 1.25rem; font-weight: 600; color: var(--ink-900);
  letter-spacing: -.02em; font-variant-numeric: tabular-nums;
}

/* ---------------- contato ---------------- */

.contato {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, .88fr);
  gap: clamp(32px, 5vw, 72px); align-items: start;
}
.contato h2 { margin-bottom: 14px; }

.canais { margin-top: 32px; border-top: 1px solid var(--bd); max-width: 44ch; }
.canais > div {
  display: grid; grid-template-columns: 116px 1fr; gap: 16px;
  padding: 12px 0; border-bottom: 1px solid var(--bd);
}
.canais dt { font-size: .8125rem; color: var(--ink-500); }
.canais dd { font-size: .875rem; color: var(--ink-800); }
.canais dd a { display: inline-block; padding-block: 4px; }   /* alvo >= 24px */

.form {
  background: var(--sf-0); border: 1px solid var(--bd); border-radius: var(--r-md);
  box-shadow: var(--sombra); padding: 24px; display: grid; gap: 16px;
}
.campo { display: grid; gap: 6px; }
.campo label { font-size: .8125rem; font-weight: 500; color: var(--ink-800); }
.campo label span { color: var(--ink-500); font-weight: 400; }

.campo input, .campo textarea {
  font: inherit; font-size: .9375rem; color: var(--ink-900);
  background: var(--sf-0); border: 1px solid var(--bd-campo); border-radius: var(--r);
  padding: 9px 12px; resize: vertical;
  transition: border-color .14s ease, box-shadow .14s ease;
}
.campo input::placeholder, .campo textarea::placeholder { color: var(--ink-500); }
.campo input:hover, .campo textarea:hover { border-color: var(--ink-500); }
.campo input:focus, .campo textarea:focus {
  outline: none; border-color: var(--marca);
  box-shadow: 0 0 0 3px rgba(0, 111, 223, .13);
}
.campo input:user-invalid, .campo textarea:user-invalid { border-color: #c0392b; }
.campo input:user-invalid:focus, .campo textarea:user-invalid:focus {
  box-shadow: 0 0 0 3px rgba(192, 57, 43, .13);
}

/* armadilha de robô: fora da tela, fora do foco, fora do leitor de tela */
.armadilha {
  position: absolute; left: -9999px; width: 1px; height: 1px;
  overflow: hidden; opacity: 0; pointer-events: none;
}

.form__nota { margin: 0; font-size: .8125rem; color: var(--ink-500); min-height: 1.2em; }
.form__nota[data-estado="erro"] { color: #c0392b; }
.form__nota[data-estado="ok"]   { color: #1a7f4b; }

/* ---------------- rodapé ---------------- */

.rodape { background: var(--navy); color: rgba(255, 255, 255, .62); font-size: .875rem; }

.rodape__topo {
  display: flex; align-items: center; justify-content: space-between; gap: 24px; flex-wrap: wrap;
  padding: 32px 0;
}
.rodape__marca { display: flex; align-items: center; gap: 12px; }
.rodape__marca img { width: 24px; }
.rodape__marca p { margin: 0; font-size: .9375rem; color: rgba(255, 255, 255, .82); }
.rodape__marca strong { color: #fff; font-weight: 600; }

.rodape__nav { display: flex; gap: 24px; flex-wrap: wrap; }
.rodape__nav a { color: rgba(255, 255, 255, .62); display: inline-block; padding-block: 2px; }
.rodape__nav a:hover { color: #fff; text-decoration: none; }

.rodape__base {
  display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap;
  padding: 16px 0 28px; border-top: 1px solid rgba(255, 255, 255, .12);
  font-size: .8125rem;
}
.rodape__base p { margin: 0; }
.rodape__lema {
  font-weight: 500; letter-spacing: .1em; text-transform: uppercase;
  color: rgba(255, 255, 255, .5); font-size: .75rem;
}

/* =========================================================
   Seções da versão ampliada: prova, dores, processo, casos, FAQ.
   Mesmos tokens — nenhuma paleta paralela.
   ========================================================= */

/* ---- prova ---- */
.prova { padding-bottom: clamp(48px, 6vw, 80px); }
.indicadores--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); margin-top: 0; }
/* o texto de apoio fica menor que o numero: quem manda na faixa sao os dois numeros */
.indicadores--4 dd { font-size: .9375rem; font-weight: 500; letter-spacing: 0; }
.indicadores--4 dd.num {
  font-size: 1.375rem; font-weight: 600; letter-spacing: -.02em;
  font-variant-numeric: tabular-nums;
}

.credenciais { margin-top: 24px; }
.credenciais .rotulo { margin-bottom: 10px; }

.fichas-cred { display: flex; flex-wrap: wrap; gap: 8px; }
.fichas-cred li {
  font-size: .875rem; color: var(--ink-700);
  border: 1px solid var(--bd); border-radius: var(--r);
  background: var(--sf-0); padding: 7px 13px;
}

/* lista de credenciais: densa e escaneável, sem virar grade de cards */
.creds {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
  column-gap: 32px;
  border-top: 1px solid var(--bd);
}
.creds li {
  display: flex; align-items: baseline; justify-content: space-between; gap: 16px;
  padding: 9px 0; border-bottom: 1px solid var(--bd);
  font-size: .875rem; line-height: 1.45;
}
.creds span { color: var(--ink-700); }
.creds em {
  font-style: normal; color: var(--ink-500); font-size: .8125rem;
  white-space: nowrap;
}
.creds em::before { content: "· "; }
.creds b {
  flex: none; font-size: .6875rem; font-weight: 600;
  letter-spacing: .06em; text-transform: uppercase; color: var(--ink-500);
}

/* ---- o problema ---- */
.dores {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
  border-top: 1px solid var(--bd); border-left: 1px solid var(--bd);
}
.dores > li {
  padding: 24px 28px;
  border-right: 1px solid var(--bd); border-bottom: 1px solid var(--bd);
  background: var(--sf-0);
}
.dores h3 { font-size: 1rem; margin-bottom: 6px; }
.dores p { font-size: .9375rem; line-height: 1.6; color: var(--ink-600); margin: 0; max-width: 46ch; }

/* ---- processo ---- */
.passos {
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr));
  list-style: none; padding: 0; margin: 0;
  border-top: 1px solid var(--bd-forte);
}
.passos > li {
  display: flex; flex-direction: column;      /* alinha o rodapé entre as colunas */
  padding: 26px 24px 26px 0;
  border-right: 1px solid var(--bd);
}
.passos > li:last-child { border-right: 0; }
.passos > li:not(:first-child) { padding-left: 24px; }

.passos__n {
  display: inline-grid; place-items: center;
  width: 26px; height: 26px; margin-bottom: 14px;
  border: 1px solid var(--marca); border-radius: 50%;
  font-size: .8125rem; font-weight: 600; color: var(--marca);
}
.passos h3 { font-size: 1rem; margin-bottom: 8px; }
.passos p { font-size: .9375rem; line-height: 1.6; color: var(--ink-600); }
.passos__saida {
  margin-top: auto; padding-top: 12px; border-top: 1px solid var(--bd);
  font-size: .875rem; color: var(--ink-700);
}
.passos__saida strong { color: var(--ink-900); font-weight: 600; }

/* ---- casos ---- */
.casos { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; align-items: start; }
.caso {
  border: 1px solid var(--bd); border-radius: var(--r-md);
  background: var(--sf-0); padding: 24px;
}
.caso__setor {
  font-size: .75rem; font-weight: 600; letter-spacing: .07em; text-transform: uppercase;
  color: var(--ink-500); margin-bottom: 10px;
}
.caso h3 { font-size: 1.0625rem; margin-bottom: 16px; }
.caso dl { display: grid; gap: 12px; }
.caso dl > div { border-top: 1px solid var(--bd); padding-top: 12px; }
.caso dt {
  font-size: .75rem; font-weight: 600; letter-spacing: .06em; text-transform: uppercase;
  color: var(--ink-500); margin-bottom: 3px;
}
.caso dd { font-size: .9375rem; line-height: 1.55; color: var(--ink-700); }

/* ---- faq ---- */
.faq { border-top: 1px solid var(--bd); }
.faq details { border-bottom: 1px solid var(--bd); }

.faq summary {
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  padding: 16px 0; cursor: pointer; list-style: none;
  font-size: 1rem; font-weight: 600; color: var(--ink-900);
  transition: color .2s ease;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary:hover { color: var(--marca); }
.faq summary::after {
  content: ""; flex: none; width: 10px; height: 10px;
  border-right: 1.6px solid var(--ink-500); border-bottom: 1.6px solid var(--ink-500);
  transform: rotate(45deg) translate(-2px, -2px);
  transition: transform .2s ease;
}
.faq details[open] summary::after { transform: rotate(225deg) translate(-2px, -2px); }
.faq details p {
  margin: 0 0 12px; max-width: 62ch;
  font-size: .9375rem; line-height: 1.65; color: var(--ink-600);
}
.faq details > :last-child { margin-bottom: 18px; }

/* ---- responsivo das seções novas ---- */
@media (max-width: 960px) {
  .indicadores--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .indicadores--4 > div:nth-child(2n) { border-right: 0; }
  .indicadores--4 > div:nth-child(-n+2) { border-bottom: 1px solid var(--bd); }
  .creds { grid-template-columns: 1fr; }
  .passos { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .passos > li { border-bottom: 1px solid var(--bd); padding-inline: 20px; }
  .passos > li:nth-child(2n) { border-right: 0; }
  .casos { grid-template-columns: 1fr; }
}

/* o ano sobe para cima do texto quando a coluna de 104px aperta */
@media (max-width: 620px) {
  .linha-tempo > li { grid-template-columns: 1fr; gap: 6px; padding: 18px 0; }
}

@media (max-width: 620px) {
  .dores { grid-template-columns: 1fr; }
  .passos { grid-template-columns: 1fr; }
  .passos > li { border-right: 0; }
}

/* ---------------- responsivo ---------------- */

@media (max-width: 960px) {
  .hero__inner, .secao__grid, .contato { grid-template-columns: minmax(0, 1fr); }
  .hero h1 { max-width: 18ch; }
  .ficha { max-width: 520px; }
  .tira { grid-template-columns: repeat(2, 1fr); }
  .tira > li:nth-child(2n) { border-right: 0; }
  .tira > li:nth-child(-n+2) { border-bottom: 1px solid var(--bd); }
}

/* O menu vira sanfona em 860px, não em 760: a barra horizontal precisa de 808px
   de conteúdo (logo 122 + navegação 604 + botão de tema 34 + dois vãos de 24) e o
   .wrap tira 40px das laterais, então ela só cabe a partir de 848px de janela.
   Entre 761 e 847 os itens transbordavam para fora da tela. */
@media (max-width: 860px) {
  .menu-btn { display: flex; }

  .nav {
    position: absolute; top: var(--topo-h); left: 0; right: 0;
    display: none; flex-direction: column; align-items: stretch; gap: 0;
    background: var(--sf-0); border-bottom: 1px solid var(--bd); box-shadow: var(--sombra);
    padding: 4px 20px 16px;
  }
  .nav.aberto { display: flex; }
  .nav > a:not(.btn) { padding: 13px 0; border-bottom: 1px solid var(--bd); font-size: 1rem; }
  .nav .btn { margin-top: 14px; }
}

@media (max-width: 760px) {
  /* a tabela vira blocos — não some, só muda de forma */
  .tabela-rolo { overflow: visible; }
  .tabela, .tabela thead, .tabela tbody, .tabela tr, .tabela th, .tabela td { display: block; }
  .tabela { border: 0; }
  .tabela thead { display: none; }

  .tabela tbody { display: grid; gap: 16px; }
  .tabela tbody tr {
    border: 1px solid var(--bd); border-radius: var(--r-md); background: var(--sf-0); overflow: hidden;
  }
  .tabela tbody th {
    width: auto; background: var(--sf-2); border-bottom: 1px solid var(--bd);
    font-size: .75rem; font-weight: 600; letter-spacing: .07em; text-transform: uppercase;
    color: var(--ink-700); padding: 10px 16px;
  }
  .tabela tbody td { border-left: 0; border-bottom: 1px solid var(--bd); padding: 12px 16px 14px; }
  .tabela tbody td::before {
    content: attr(data-coluna);
    display: block; font-size: .75rem; font-weight: 600; color: var(--ink-500); margin-bottom: 3px;
  }
  .tabela tbody tr:last-child td:last-child { border-bottom: 0; }
  .tabela .is-destaque { background: var(--marca-fraca); }
}

@media (max-width: 560px) {
  .tira { grid-template-columns: 1fr; }
  .tira > li { border-right: 0; border-bottom: 1px solid var(--bd); }
  .tira > li:last-child { border-bottom: 0; }

  .indicadores, .indicadores--4 { grid-template-columns: 1fr; }
  .indicadores--4 > div:nth-child(-n+2) { border-bottom: 1px solid var(--bd); }
  .indicadores > div { border-right: 0; border-bottom: 1px solid var(--bd); }
  .indicadores > div:last-child { border-bottom: 0; }

  .ficha__lista > div, .canais > div { grid-template-columns: 1fr; gap: 2px; }
  .acoes { gap: 16px; }
  .acoes .btn { width: 100%; }
  .form { padding: 20px; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  * { transition-duration: .01ms !important; }
}

/* =========================================================
   Camada moderna: modo escuro, diagrama de fluxo, cockpit,
   bloco de código, navegação de progresso e faixa de chamada.
   Nada de glass, gradiente decorativo ou raio grande: o ganho
   vem de modo escuro, peças de produto e movimento com função.
   ========================================================= */

/* =========================================================
   1. MODO ESCURO — construído sobre o navy da marca
   ========================================================= */

:root { color-scheme: light; }

@media (prefers-color-scheme: dark) {
  :root:not([data-tema="claro"]) { color-scheme: dark; }
  :root:not([data-tema="claro"]) {
    --ink-900: #eef3f9;
    --ink-800: #d5e0ec;
    --ink-700: #aebed0;
    --ink-600: #94a6bb;
    --ink-500: #8a9cb2;
    --ink-400: #64768c;

    --sf-0: #04203f;
    --sf-1: #062949;
    --sf-2: #093055;

    --bd:       #12436f;
    --bd-forte: #1b568a;
    --bd-campo: #3d7cb0;

    --marca:        #4da3ff;
    --marca-escura: #75b8ff;
    --marca-fraca:  #0a3a63;

    --navy: #021a35;
    --sombra: 0 1px 2px rgba(0, 0, 0, .3);
  }
}

:root[data-tema="escuro"] {
  color-scheme: dark;
  --ink-900: #eef3f9;
  --ink-800: #d5e0ec;
  --ink-700: #aebed0;
  --ink-600: #94a6bb;
  --ink-500: #8a9cb2;
  --ink-400: #64768c;

  --sf-0: #04203f;
  --sf-1: #062949;
  --sf-2: #093055;

  --bd:       #12436f;
  --bd-forte: #1b568a;
  --bd-campo: #3d7cb0;

  --marca:        #4da3ff;
  --marca-escura: #75b8ff;
  --marca-fraca:  #0a3a63;

  --navy: #021a35;
  --sombra: 0 1px 2px rgba(0, 0, 0, .3);
}

/* troca de logo conforme o tema */
.topo__logo .no-escuro { display: block; }
.topo__logo .no-claro  { display: none; }

@media (prefers-color-scheme: dark) {
  :root:not([data-tema="claro"]) .topo__logo .no-escuro { display: none; }
  :root:not([data-tema="claro"]) .topo__logo .no-claro  { display: block; }
}
:root[data-tema="escuro"] .topo__logo .no-escuro { display: none; }
:root[data-tema="escuro"] .topo__logo .no-claro  { display: block; }
:root[data-tema="claro"]  .topo__logo .no-escuro { display: block; }
:root[data-tema="claro"]  .topo__logo .no-claro  { display: none; }

/* botão de tema */
.tema-btn {
  display: inline-grid; place-items: center;
  width: 34px; height: 34px; padding: 0; flex: none;
  border: 1px solid var(--bd-forte); border-radius: var(--r);
  background: var(--sf-0); color: var(--ink-700); cursor: pointer;
  transition: color .15s ease, border-color .15s ease;
}
.tema-btn:hover { color: var(--ink-900); border-color: var(--ink-500); }
.tema-btn svg { width: 16px; height: 16px; }
.tema-btn .icone-lua { display: none; }
@media (prefers-color-scheme: dark) {
  :root:not([data-tema="claro"]) .tema-btn .icone-sol { display: none; }
  :root:not([data-tema="claro"]) .tema-btn .icone-lua { display: block; }
}
:root[data-tema="escuro"] .tema-btn .icone-sol { display: none; }
:root[data-tema="escuro"] .tema-btn .icone-lua { display: block; }

/* no escuro a cor de marca é clara: o texto do botão precisa ser escuro
   (branco sobre #4da3ff dá 2.63:1 e reprova). */
:root[data-tema="escuro"] .btn--primario { color: var(--navy); }
:root[data-tema="escuro"] .btn--primario:hover { color: #010f20; }
@media (prefers-color-scheme: dark) {
  :root:not([data-tema="claro"]) .btn--primario { color: var(--navy); }
  :root:not([data-tema="claro"]) .btn--primario:hover { color: #010f20; }
}
/* a faixa de chamada inverte: fundo claro, texto navy - já tem contraste */
:root[data-tema="escuro"] .chamada .btn--primario { color: var(--navy); }

/* =========================================================
   2. HERO — diagrama do fluxo, no lugar da ficha estática
   ========================================================= */

.fluxo {
  border: 1px solid var(--bd); border-radius: var(--r-md);
  background: var(--sf-0); box-shadow: var(--sombra); overflow: hidden;
}
.fluxo__topo {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 11px 16px; border-bottom: 1px solid var(--bd); background: var(--sf-1);
}
.fluxo__titulo {
  font-size: .75rem; font-weight: 600; letter-spacing: .07em; text-transform: uppercase;
  color: var(--ink-500); margin: 0;
}
.fluxo__estado {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: .75rem; color: var(--ink-500);
}
.fluxo__estado::before {
  content: ""; width: 6px; height: 6px; border-radius: 50%;
  background: #1a9e5f; box-shadow: 0 0 0 3px rgba(26, 158, 95, .16);
}
/* =========================================================
   A — trilha do evento (HTML, então o texto nunca encolhe)
   ========================================================= */

.trilha { padding: 24px 20px 20px; }

.trilha__linha {
  display: grid; grid-template-columns: repeat(3, 1fr);
  column-gap: 14px;
  list-style: none; margin: 0; padding: 0; position: relative;
}
.trilha__linha li { position: relative; padding-top: 30px; }

/* uma linha só, atrás dos três nós — sobrevive ao espaço entre colunas */
.trilha__linha::before {
  /* termina no ultimo ponto, nao na borda: 3 colunas com 14px de intervalo */
  content: ""; position: absolute; top: 9px; left: 8px;
  right: calc(33.333% - 17px);
  height: 2px; background: var(--bd-forte); border-radius: 2px;
}

/* o ponto de cada estágio */
.trilha__linha li::after {
  content: ""; position: absolute; top: 4px; left: 2px;
  width: 12px; height: 12px; border-radius: 50%;
  background: var(--sf-0); border: 2px solid var(--marca);
}
.trilha__linha li:last-child::after {
  background: var(--marca); box-shadow: 0 0 0 4px var(--marca-fraca);
}

.trilha__linha .no {
  display: block; font-size: .875rem; font-weight: 600;
  color: var(--ink-900); line-height: 1.3;
}
.trilha__linha em {
  display: block; font-style: normal; font-size: .75rem; line-height: 1.4;
  color: var(--ink-500); margin-top: 3px; text-wrap: pretty;
}

/* o evento que percorre a trilha */
.trilha__linha::after {
  content: ""; position: absolute; top: 5px; left: 4px;
  width: 8px; height: 8px; border-radius: 50%; background: var(--marca);
  animation: andar 4s cubic-bezier(.5, 0, .5, 1) infinite;
}
@keyframes andar {
  0%, 8%    { left: 4px; opacity: 0; }
  12%       { opacity: 1; }
  45%       { left: calc(33.33% + 4px); }
  80%, 100% { left: calc(66.66% + 4px); opacity: 1; }
}

.trilha__desvios {
  margin-top: 22px; padding-top: 16px; border-top: 1px dashed var(--bd-forte);
  display: grid; gap: 8px;
}
.trilha__desvios p {
  margin: 0; font-size: .8125rem; color: var(--ink-600);
  display: flex; align-items: baseline; gap: 8px;
}
.trilha__desvios b { color: var(--ink-900); font-weight: 600; }

/* coluna estreita: a trilha vira vertical. Precisa vir DEPOIS da regra base,
   senão o cascade devolve o layout horizontal. */
@media (max-width: 1180px) {
  .trilha__linha { grid-template-columns: 1fr; gap: 16px; }
  .trilha__linha li { padding-top: 0; padding-left: 26px; }
  .trilha__linha::before {
    top: 6px; bottom: 6px; left: 5px; right: auto; width: 2px; height: auto;
  }
  .trilha__linha li::after { top: 3px; left: 0; }
  .trilha__linha::after { display: none; }
  .trilha__linha em { font-size: .8125rem; }
}
.marca-desvio {
  width: 7px; height: 7px; border-radius: 2px; flex: none; transform: translateY(-1px);
}
.marca-desvio--descarte { background: #b3902f; }
.marca-desvio--retry    { background: var(--marca); }

/* =========================================================
   3. COCKPIT — réplica do entregável dele
   ========================================================= */

/* a tabela do cockpit rola dentro do próprio quadro em qualquer largura:
   é tabela de dados, e a página nunca rola de lado por causa dela. */
.cockpit-rolo { overflow-x: auto; }
.cockpit table { min-width: 460px; }

.cockpit {
  border: 1px solid var(--bd); border-radius: var(--r-md);
  background: var(--sf-0); overflow: hidden; box-shadow: var(--sombra);
}
.cockpit__barra {
  display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
  padding: 10px 14px; border-bottom: 1px solid var(--bd); background: var(--sf-1);
}
.cockpit__barra strong {
  font-size: .8125rem; font-weight: 600; color: var(--ink-900);
}
.cockpit__filtros { display: flex; gap: 6px; margin-left: auto; flex-wrap: wrap; }
.cockpit__filtros span {
  font-size: .6875rem; color: var(--ink-600);
  border: 1px solid var(--bd-forte); border-radius: var(--r-sm); padding: 2px 8px;
}
.cockpit__filtros .on { color: var(--marca); border-color: var(--marca); }

.cockpit table { width: 100%; border-collapse: collapse; font-size: .8125rem; }
.cockpit th {
  text-align: left; font-weight: 600; color: var(--ink-500);
  font-size: .6875rem; letter-spacing: .06em; text-transform: uppercase;
  padding: 9px 14px; border-bottom: 1px solid var(--bd); background: var(--sf-1);
}
.cockpit td {
  padding: 9px 14px; border-bottom: 1px solid var(--bd); color: var(--ink-700);
  font-variant-numeric: tabular-nums; white-space: nowrap;
}
.cockpit tbody tr:last-child td { border-bottom: 0; }
.cockpit tbody tr:hover td { background: var(--sf-1); }

.tag {
  display: inline-flex; align-items: center; gap: 5px;
  font-size: .6875rem; font-weight: 600; letter-spacing: .03em;
  border-radius: var(--r-sm); padding: 2px 8px; border: 1px solid;
}
.tag::before { content: ""; width: 5px; height: 5px; border-radius: 50%; background: currentColor; }
.tag--ok   { color: #1a7f4b; border-color: #b6e0c8; background: #eefaf3; }
.tag--erro { color: #b3402f; border-color: #f0c4bc; background: #fdf0ed; }
.tag--rep  { color: #8a6116; border-color: #eddcb0; background: #fdf7e8; }

:root[data-tema="escuro"] .tag--ok   { color: #5fd39a; border-color: #17583a; background: #0a3122; }
:root[data-tema="escuro"] .tag--erro { color: #ff9c8a; border-color: #6b2c22; background: #3a1712; }
:root[data-tema="escuro"] .tag--rep  { color: #f0c96a; border-color: #5d4713; background: #33280a; }
@media (prefers-color-scheme: dark) {
  :root:not([data-tema="claro"]) .tag--ok   { color: #5fd39a; border-color: #17583a; background: #0a3122; }
  :root:not([data-tema="claro"]) .tag--erro { color: #ff9c8a; border-color: #6b2c22; background: #3a1712; }
  :root:not([data-tema="claro"]) .tag--rep  { color: #f0c96a; border-color: #5d4713; background: #33280a; }
}

.cockpit__nota {
  padding: 10px 14px; border-top: 1px solid var(--bd); background: var(--sf-1);
  font-size: .75rem; color: var(--ink-500); margin: 0;
}

/* =========================================================
   4. CÓDIGO — sinaliza que aqui tem técnico de verdade
   ========================================================= */

.codigo {
  border: 1px solid var(--bd); border-radius: var(--r-md);
  background: var(--sf-1); overflow: hidden;
}
.codigo__topo {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 9px 14px; border-bottom: 1px solid var(--bd);
  font-size: .75rem; color: var(--ink-500);
}
.codigo__topo b { font-weight: 600; color: var(--ink-700); }
.codigo pre {
  margin: 0; padding: 14px; overflow-x: auto;
  font-family: ui-monospace, "SFMono-Regular", "Cascadia Mono", Consolas, monospace;
  font-size: .8125rem; line-height: 1.7; color: var(--ink-700);
  tab-size: 2;
}
.cod-kw  { color: #8250df; font-weight: 600; }
.cod-str { color: #0a6b3d; }
.cod-com { color: var(--ink-400); font-style: italic; }
.cod-fn  { color: #0550ae; }

:root[data-tema="escuro"] .cod-kw  { color: #d2a8ff; }
:root[data-tema="escuro"] .cod-str { color: #7ee2a8; }
:root[data-tema="escuro"] .cod-fn  { color: #79c0ff; }
@media (prefers-color-scheme: dark) {
  :root:not([data-tema="claro"]) .cod-kw  { color: #d2a8ff; }
  :root:not([data-tema="claro"]) .cod-str { color: #7ee2a8; }
  :root:not([data-tema="claro"]) .cod-fn  { color: #79c0ff; }
}

/* =========================================================
   5. NAVEGAÇÃO DE PROGRESSO (desktop)
   ========================================================= */

.progresso {
  position: fixed; left: 24px; top: 50%; transform: translateY(-50%);
  z-index: 40; display: none; gap: 2px; flex-direction: column;
}
.progresso a {
  display: flex; align-items: center; gap: 10px;
  padding: 5px 0; font-size: .75rem; color: var(--ink-400);
  transition: color .2s ease;
}
.progresso a::before {
  content: ""; width: 14px; height: 1px; background: currentColor;
  transition: width .2s ease;
}
.progresso a:hover { color: var(--ink-700); text-decoration: none; }
.progresso a[aria-current="true"] { color: var(--marca); }
.progresso a[aria-current="true"]::before { width: 26px; }

@media (min-width: 1500px) { .progresso { display: flex; } }

/* =========================================================
   6. REVELAR AO ROLAR — o preset "subtle" da skill
   ========================================================= */

.rev { opacity: 0; transform: translateY(12px); }
.rev.visivel {
  opacity: 1; transform: none;
  transition: opacity .35s ease-out, transform .35s ease-out;
}

/* =========================================================
   7. FAIXA DE CHAMADA antes do rodapé
   ========================================================= */

.chamada { background: var(--navy); color: rgba(255, 255, 255, .72); padding: 56px 0; }
.chamada__inner {
  display: flex; align-items: center; justify-content: space-between;
  gap: 32px; flex-wrap: wrap;
}
.chamada h2 { color: #fff; margin-bottom: 8px; max-width: 18ch; }
.chamada p { margin: 0; max-width: 46ch; font-size: .9375rem; }
.chamada .btn--primario { background: #fff; color: var(--navy); }
.chamada .btn--primario:hover { background: #dbe9fb; }

/* =========================================================
   ajustes de escala tipográfica
   ========================================================= */

.hero h1 { font-size: clamp(2.375rem, 4.6vw, 3.75rem); max-width: 15ch; }
.hero .lead { font-size: 1.125rem; }

/* ---- responsivo ---- */
@media (max-width: 960px) {
}

@media (max-width: 620px) {
  .chamada__inner .btn { width: 100%; }
}

@media (prefers-reduced-motion: reduce) {
  .trilha__linha::after { animation: none; }
  .rev { opacity: 1; transform: none; }
}