/* Múltipla · site 2026 · mundo visual: sala de controle da empresa */

:root {
  --fundo: #070B16;
  --painel: rgba(13, 20, 41, .8);
  --painel-solido: #0F1730;
  --linha: #1F2C55;
  --linha-forte: #35478A;
  --azul: #2E8FE0;
  --azul-claro: #7CC0FF;
  --ambar: #F5B942;
  --ambar-escuro: rgba(245, 185, 66, .14);
  --branco: #F2F5FF;
  --texto: #D6DDF0;
  --texto-2: #9AA8CC;
  --texto-3: #8290B8;
  --zap: #25D366;
  --fonte: 'Archivo', 'Helvetica Neue', Arial, sans-serif;
  --mono: 'JetBrains Mono', 'SFMono-Regular', Consolas, monospace;
  --gutter: clamp(16px, 4vw, 56px);
  --max: 1360px;
  --barra: 64px;
}

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

html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; background: var(--fundo); }

body {
  margin: 0;
  font-family: var(--fonte);
  font-size: 17px;
  line-height: 1.55;
  color: var(--texto);
  background: var(--fundo);
  -webkit-font-smoothing: antialiased;
}

#sistema { position: fixed; inset: 0; width: 100vw; height: 100vh; z-index: 0; display: block; transition: opacity .7s ease; }
body.fundo-calmo #sistema { opacity: .72; }
body.sobre-no { cursor: pointer; }
main, .barra, footer, .zap-fixo { position: relative; z-index: 1; }

img { max-width: 100%; height: auto; display: block; }
p { margin: 0 0 1em; }
ul, ol, dl, dd { margin: 0; padding: 0; }
li { list-style: none; }
a { color: inherit; }
button, input, select, textarea { font: inherit; color: inherit; }
:focus-visible { outline: 2px solid var(--azul-claro); outline-offset: 3px; }

/* ---------- tipografia ---------- */

h1, h2, h3 { margin: 0; font-weight: 800; letter-spacing: -.03em; line-height: .98; color: var(--branco); text-wrap: balance; }
h1 { font-size: clamp(2.4rem, 5.6vw, 5rem); line-height: .94; font-stretch: 112.5%; letter-spacing: -.035em; }
h2 { font-size: clamp(1.8rem, 3.6vw, 3rem); font-stretch: 112.5%; }
h3 { font-size: clamp(1.4rem, 2.4vw, 2rem); font-stretch: 100%; }

h1 em {
  font-style: normal;
  color: var(--ambar);
  display: inline-block;
  border: .06em solid var(--ambar);
  padding: 0 .16em;
  line-height: .96;
  margin-top: .1em;
}

.rotulo-linha {
  display: flex; align-items: center; gap: 10px;
  font-stretch: 75%; font-weight: 600; font-size: .74rem; letter-spacing: .16em; text-transform: uppercase;
  color: var(--azul-claro); margin: 0 0 12px;
}
.rotulo-linha::before { content: ''; width: 18px; height: 1px; background: currentColor; flex: 0 0 auto; }
.rotulo-linha--ambar { color: var(--ambar); }
.rotulo-linha--branco { color: var(--branco); }
span.rotulo-linha { display: inline-flex; margin: 0; }

.dado { font-family: var(--mono); font-size: .92rem; color: var(--branco); font-variant-numeric: tabular-nums; }
.ordem { font-family: var(--mono); font-size: .72em; color: var(--azul-claro); margin-right: .6em; vertical-align: .18em; font-weight: 500; }
.lede { font-size: clamp(1.08rem, 1.45vw, 1.28rem); max-width: 34em; margin: 1.4em 0 1.9em; color: var(--texto); }
.miudo { font-size: .84rem; color: var(--texto-2); margin: 0; }
.texto { margin: 0; max-width: 34em; }
.anotacao { font-size: .8rem; margin: 12px 0 0; color: var(--texto-2); }
.exemplo { font-stretch: 75%; font-size: .66rem; letter-spacing: .12em; text-transform: uppercase; color: var(--texto-3); margin: 10px 0 0; }

.pular { position: absolute; left: -999px; top: 8px; z-index: 100; background: var(--branco); color: var(--fundo); padding: 10px 14px; }
.pular:focus { left: 8px; }

/* ---------- painel (HUD) ---------- */

.painel {
  position: relative;
  background: var(--painel);
  border: 1px solid var(--linha);
}
.painel::before, .painel::after {
  content: ''; position: absolute; width: 12px; height: 12px; pointer-events: none;
  border-color: var(--azul-claro); border-style: solid;
}
.painel::before { left: -1px; top: -1px; border-width: 2px 0 0 2px; }
.painel::after { right: -1px; bottom: -1px; border-width: 0 2px 2px 0; }

/* ---------- barra ---------- */

.barra {
  position: sticky; top: 0; z-index: 50;
  height: var(--barra);
  display: flex; align-items: center; gap: 28px;
  padding: 0 var(--gutter);
  background: var(--fundo);
  border-bottom: 1px solid var(--linha);
}
.progresso { position: absolute; left: 0; right: 0; bottom: -1px; height: 2px; background: var(--linha); }
.progresso span { display: block; height: 100%; width: 100%; background: var(--azul-claro); transform: scaleX(0); transform-origin: left; transition: transform .6s cubic-bezier(.2, .8, .2, 1); }
.barra-logo img { width: 150px; height: auto; }
.barra-nav { display: flex; gap: 24px; margin-left: auto; }
.barra-nav a {
  text-decoration: none; font-stretch: 87.5%; font-weight: 600; font-size: .92rem; color: var(--texto-2);
  padding: 4px 0; border-bottom: 1px solid transparent;
}
.barra-nav a:hover { color: var(--branco); border-color: var(--azul-claro); }
.hud { margin: 0; font-stretch: 75%; font-weight: 600; font-size: .74rem; letter-spacing: .14em; text-transform: uppercase; color: var(--texto-2); display: flex; align-items: baseline; gap: 8px; white-space: nowrap; }
.hud b { color: var(--azul-claro); font-weight: 700; font-size: 1.05rem; letter-spacing: 0; font-variant-numeric: tabular-nums; }
.hud-de { color: var(--texto-3); }
.hud-curto { display: none; }
.barra-zap {
  text-decoration: none; font-stretch: 75%; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; font-size: .84rem;
  color: var(--fundo); background: var(--zap); padding: 9px 14px;
}
.barra-zap:hover { background: #4FE28A; }

/* ---------- botões e campos ---------- */

.acao {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  min-height: 52px; padding: 0 24px;
  background: var(--branco); color: var(--fundo);
  border: 0; cursor: pointer; text-decoration: none;
  font-stretch: 87.5%; font-weight: 700; font-size: .95rem; letter-spacing: .08em; text-transform: uppercase;
  transition: background .15s ease, transform .15s ease;
}
.acao:hover { background: var(--azul-claro); }
.acao:active { transform: translateY(1px); }
.acao[disabled] { opacity: .6; cursor: progress; }
.acao--zap { background: var(--zap); color: var(--fundo); }
.acao--zap:hover { background: #4FE28A; }

.campo { margin: 0; }
.campo label { margin-bottom: 8px; }
.campo-linha {
  display: flex; gap: 12px; align-items: stretch;
  background: rgba(255, 255, 255, .03);
  border: 1px solid var(--linha); border-bottom: 2px solid var(--azul-claro);
  padding: 6px 6px 6px 16px;
}
.campo-linha:focus-within { border-color: var(--linha-forte); border-bottom-color: var(--branco); }
.campo-linha input {
  flex: 1; min-width: 0; background: transparent; border: 0; outline: none;
  font-size: 1.05rem; color: var(--branco); padding: 10px 0;
}
.campo-linha input::placeholder { color: var(--texto-3); }
.miudo--forte { display: inline-flex; align-items: center; gap: 8px; color: var(--texto); font-size: .92rem; }
.miudo--forte svg { flex: 0 0 auto; color: var(--azul-claro); }
.campo .miudo { margin-top: 10px; }

.campo textarea {
  display: block; width: 100%; resize: vertical; min-height: 130px;
  background: rgba(255, 255, 255, .03); border: 1px solid var(--linha); border-bottom: 2px solid var(--azul-claro);
  padding: 14px 16px; outline: none;
  font-size: 1rem; color: var(--branco); caret-color: var(--azul-claro);
}
.campo textarea:focus { border-color: var(--linha-forte); border-bottom-color: var(--branco); }
.campo textarea::placeholder { color: var(--texto-3); }
.campo-acoes { display: flex; align-items: center; gap: 18px; flex-wrap: wrap; margin-top: 16px; }

select {
  appearance: none; -webkit-appearance: none;
  background: rgba(255, 255, 255, .03); border: 1px solid var(--linha); border-bottom: 2px solid var(--azul-claro);
  color: var(--branco); padding: 10px 40px 10px 14px; font-stretch: 87.5%; font-weight: 600; font-size: 1rem;
  background-image: linear-gradient(45deg, transparent 50%, var(--azul-claro) 50%), linear-gradient(135deg, var(--azul-claro) 50%, transparent 50%);
  background-position: calc(100% - 18px) 55%, calc(100% - 12px) 55%;
  background-size: 6px 6px, 6px 6px; background-repeat: no-repeat;
  cursor: pointer; max-width: 100%;
}
select option { background: var(--painel-solido); color: var(--branco); }

/* ---------- abertura ---------- */

.heroi {
  min-height: calc(100vh - var(--barra));
  display: grid; grid-template-columns: minmax(0, 600px) 1fr;
  align-content: center; align-items: end;
  padding: 60px var(--gutter) 40px;
  position: relative;
  overflow: hidden;
}
.heroi-texto { position: relative; align-self: center; padding-right: 24px; }
.heroi-texto::before {
  content: ''; position: absolute; inset: -40px -10% -30px -20%; z-index: -1; pointer-events: none;
  background: radial-gradient(ellipse at 35% 45%, rgba(7, 11, 22, .92) 0%, rgba(7, 11, 22, .6) 45%, rgba(7, 11, 22, 0) 72%);
}
.heroi-texto h1 { max-width: 14ch; }
.heroi-hud { justify-self: end; align-self: end; width: min(100%, 430px); padding: 12px 14px 10px; font-size: .86rem; color: var(--texto); }
.hud-topo { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin-bottom: 10px; }
.hud-topo .rotulo-linha { margin: 0; }
.chave { display: inline-flex; align-items: center; gap: 8px; background: transparent; border: 0; padding: 4px 0; cursor: pointer; color: var(--branco); font-stretch: 87.5%; font-weight: 600; font-size: .84rem; }
.chave-trilho { width: 34px; height: 18px; border: 1px solid var(--linha-forte); background: var(--painel-solido); position: relative; flex: 0 0 auto; transition: background .25s ease, border-color .25s ease; }
.chave-trilho::after { content: ''; position: absolute; top: 2px; left: 2px; width: 12px; height: 12px; background: var(--ambar); transition: transform .25s cubic-bezier(.2, .8, .2, 1), background .25s ease; }
.chave[aria-pressed="true"] .chave-trilho { border-color: var(--azul-claro); background: rgba(46, 143, 224, .25); }
.chave[aria-pressed="true"] .chave-trilho::after { transform: translateX(16px); background: var(--azul-claro); }
.hud-legenda { display: flex; flex-wrap: wrap; gap: 4px 16px; margin: 0 0 10px; font-size: .8rem; color: var(--texto-2); }
.hud-legenda > span { display: inline-flex; align-items: center; gap: 7px; }
.ponto--branco { background: var(--branco); box-shadow: 0 0 8px rgba(242, 245, 255, .7); }
.hud-numeros { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; padding: 8px 0; border-top: 1px solid var(--linha); border-bottom: 1px solid var(--linha); }
.hud-numeros dt { font-stretch: 75%; font-weight: 600; font-size: .68rem; letter-spacing: .14em; text-transform: uppercase; color: var(--texto-2); }
.hud-numeros dd { font-size: 1.35rem; font-weight: 700; color: var(--branco); font-variant-numeric: tabular-nums; line-height: 1.1; margin-top: 2px; }
.hud-log { margin: 6px 0 0; min-height: 54px; }
.hud-log li { display: grid; grid-template-columns: 42px 76px minmax(0, 1fr); gap: 8px; font-family: var(--mono); font-size: .74rem; line-height: 1.5; color: var(--texto-2); white-space: nowrap; overflow: hidden; }
.hud-log li > * { overflow: hidden; text-overflow: ellipsis; }
.hud-log time { color: var(--texto-3); }
.hud-log b { font-weight: 500; color: var(--branco); }
.hud-log-azul span { color: var(--azul-claro); }
.hud-log-ambar span { color: var(--ambar); }
.hud-log-branco span { color: var(--branco); }
.hud-dica { margin-top: 6px; font-size: .74rem; color: var(--texto-3); }
.dica-no { position: fixed; z-index: 45; width: 280px; padding: 12px 14px 10px; background: var(--painel-solido); pointer-events: none; }
.dica-cabeca { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; margin-bottom: 6px; }
.dica-nome { font-stretch: 87.5%; font-weight: 700; font-size: 1rem; color: var(--branco); text-transform: uppercase; }
.dica-estado { font-stretch: 75%; font-weight: 600; font-size: .66rem; letter-spacing: .14em; text-transform: uppercase; }
.dica-estado--azul { color: var(--azul-claro); }
.dica-estado--ambar { color: var(--ambar); }
.dica-texto { margin: 0 0 6px; font-size: .88rem; line-height: 1.45; color: var(--texto); }
.dica-no .miudo { font-size: .72rem; color: var(--texto-3); }
.ponto { display: inline-block; width: 9px; height: 9px; border-radius: 50%; flex: 0 0 auto; }
.ponto--ambar { background: var(--ambar); box-shadow: 0 0 10px rgba(245, 185, 66, .7); }
.ponto--azul { background: var(--azul-claro); box-shadow: 0 0 10px rgba(124, 192, 255, .8); }

/* ---------- os 8 processos ---------- */

.processos { padding: clamp(80px, 12vw, 160px) var(--gutter) 40px; }
.processos-intro { max-width: 860px; margin-bottom: 56px; }
.processos-intro h2 { margin-bottom: 18px; }
.processos-intro > p { max-width: 62ch; font-size: 1.06rem; color: var(--texto); }
.processos-controle { margin-top: 26px; display: grid; gap: 10px; max-width: 520px; }

.processos-grade { display: grid; grid-template-columns: 240px minmax(0, 1fr); gap: 48px; max-width: var(--max); margin: 0 auto; }
.trilho { position: sticky; top: calc(var(--barra) + 24px); align-self: start; padding: 18px 18px 16px; }
.trilho-lista { margin: 6px 0 16px; }
.trilho-lista li a {
  display: flex; align-items: center; gap: 10px;
  padding: 9px 4px; border-top: 1px solid var(--linha);
  text-decoration: none; font-stretch: 87.5%; font-weight: 600; font-size: .98rem; color: var(--texto-2);
  transition: color .25s ease, transform .25s ease;
}
.trilho-lista li a .ordem { margin: 0; font-size: .72rem; }
.trilho-lista .estado { width: 7px; height: 7px; border-radius: 50%; background: var(--ambar); flex: 0 0 auto; box-shadow: 0 0 8px rgba(245, 185, 66, .6); transition: background .4s ease, box-shadow .4s ease; }
.trilho-lista li.ligado .estado { background: var(--azul-claro); box-shadow: 0 0 8px rgba(124, 192, 255, .8); }
.trilho-lista li.ativa a { color: var(--branco); transform: translateX(8px); }
.trilho-lista li.ativa a::after { content: ''; flex: 1; height: 1px; background: var(--azul-claro); margin-left: 6px; opacity: .8; }
.trilho-contador { display: none; }
.trilho-contador .rotulo-linha { margin: 0; }
.trilho-contador .dado { font-size: 1.2rem; color: var(--azul-claro); }

.folhas { min-width: 0; }
.processo { margin-bottom: clamp(72px, 12vh, 140px); scroll-margin-top: calc(var(--barra) + 20px); }
.processo-cabeca { display: flex; justify-content: space-between; align-items: flex-end; gap: 24px; margin-bottom: 18px; }
.processo-cabeca h3 { font-size: clamp(1.6rem, 3.2vw, 2.6rem); text-transform: uppercase; font-stretch: 87.5%; letter-spacing: -.02em; line-height: .95; }
.processo-cabeca h3 .ordem { font-size: .85em; vertical-align: .05em; margin-right: .5em; }
.processo-estado {
  font-stretch: 75%; font-weight: 600; font-size: .74rem; letter-spacing: .14em; text-transform: uppercase;
  color: var(--ambar); padding: 6px 10px; border: 1px solid rgba(245, 185, 66, .45); white-space: nowrap;
  transition: color .4s ease, border-color .4s ease;
}
.processo.ligado .processo-estado { color: var(--azul-claro); border-color: rgba(124, 192, 255, .6); }

.processo-corpo { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 14px; }
.hoje, .agente { padding: 22px 24px 26px; }
.hoje::before, .hoje::after { border-color: var(--ambar); }
.hoje .texto { color: var(--texto); }
.agente .texto { color: var(--branco); }
.gente {
  grid-column: 1 / -1;
  display: flex; gap: 22px; align-items: baseline; flex-wrap: wrap;
  padding: 14px 24px; border: 1px solid var(--linha); border-left: 0; border-right: 0;
}
.gente .rotulo-linha { margin: 0; }
.gente .texto { font-weight: 600; font-stretch: 87.5%; color: var(--branco); }

.log { margin-top: 22px; border-top: 1px solid var(--linha); }
.log li {
  display: grid; grid-template-columns: 62px minmax(0, 1fr); gap: 12px;
  padding: 10px 0; border-bottom: 1px solid var(--linha);
  font-family: var(--mono); font-size: .86rem; line-height: 1.45; color: var(--texto);
  opacity: 0; transform: translateY(8px);
  transition: opacity .5s ease-out, transform .5s cubic-bezier(.2,.8,.2,1);
}
.log time { color: var(--azul-claro); font-size: .76rem; padding-top: 2px; white-space: nowrap; }
.processo.vista .log li { opacity: 1; transform: none; }
.processo.vista .log li:nth-child(1) { transition-delay: .15s; }
.processo.vista .log li:nth-child(2) { transition-delay: .9s; }
.processo.vista .log li:nth-child(3) { transition-delay: 1.7s; }
.log li:last-child span { color: var(--branco); }

[data-campo] { transition: opacity .35s ease; }
.batendo [data-campo] { opacity: 0; }
.processo.carbono .agente [data-campo] { animation: bater .6s ease-out .25s both; }
@keyframes bater { 0% { opacity: 0; color: var(--azul-claro); } 100% { opacity: 1; } }

/* cenas do "hoje" */
.cena { position: relative; margin-top: 20px; }
.cena-titulo { font-stretch: 75%; font-weight: 700; font-size: .78rem; letter-spacing: .14em; text-transform: uppercase; color: var(--texto-2); margin: 0 0 6px; }
.cena .linha { border-bottom: 1px solid var(--linha-forte); min-height: 1.7em; margin: 0; padding: 4px 0 2px; }
.cena .marcada { background: var(--ambar-escuro); color: var(--branco); }

.cena-zap .bolha {
  position: relative; background: var(--painel-solido); border: 1px solid var(--linha-forte);
  padding: 12px 14px 8px; max-width: 92%; font-size: .98rem; line-height: 1.4; color: var(--branco);
  display: flex; flex-direction: column; gap: 4px;
}
.cena-zap .bolha::before { content: ''; position: absolute; left: -9px; top: 12px; border: 8px solid transparent; border-right-color: var(--linha-forte); border-left: 0; }
.cena-zap .bolha time { align-self: flex-end; font-family: var(--mono); font-size: .72rem; color: var(--texto-3); }

.cena-orcamento, .cena-nota { background: var(--painel-solido); border: 1px solid var(--linha-forte); padding: 12px 14px 12px; }
.cena-foto .foto {
  background: var(--painel-solido); border: 1px solid var(--linha-forte); outline: 6px solid rgba(255, 255, 255, .04);
  padding: 18px 16px; min-height: 90px; display: grid; place-items: center; text-align: center;
  transform: rotate(-1.5deg); width: 88%; margin: 6px 0 8px 4px;
}
.cena-boleto { background: var(--painel-solido); border: 1px solid var(--linha-forte); padding: 12px 14px; }
.cena-boleto .barras {
  height: 30px; margin-bottom: 12px; opacity: .55;
  background: repeating-linear-gradient(90deg, var(--branco) 0 2px, transparent 2px 4px, var(--branco) 4px 7px, transparent 7px 9px, var(--branco) 9px 10px, transparent 10px 14px, var(--branco) 14px 16px, transparent 16px 19px);
}
.cena-boleto .dado { margin: 0; }
.cena-cotacoes, .cena-curriculos { min-height: 150px; padding-bottom: 34px; }
.cotacao, .curriculo {
  position: absolute; background: var(--painel-solido); border: 1px solid var(--linha);
  width: 74%; min-height: 96px; padding: 10px 12px; display: flex; flex-direction: column; gap: 6px;
}
.cotacao:nth-child(1), .curriculo:nth-child(1) { left: 0; top: 0; transform: rotate(-3deg); }
.cotacao:nth-child(2), .curriculo:nth-child(2) { left: 22px; top: 10px; transform: rotate(1.5deg); }
.cotacao.topo, .curriculo.topo { left: 44px; top: 22px; transform: rotate(-.5deg); border-color: var(--linha-forte); }
.cena-cotacoes .anotacao, .cena-curriculos .anotacao { position: absolute; left: 0; bottom: 0; }
.curriculo { min-height: 110px; }
.curriculo:not(.topo)::after { content: ''; display: block; height: 40px; background: repeating-linear-gradient(0deg, var(--linha) 0 1px, transparent 1px 9px); }
.cena-fala .fala { font-size: clamp(1.25rem, 2vw, 1.55rem); font-stretch: 87.5%; font-weight: 500; line-height: 1.25; margin: 0; padding-left: .9em; position: relative; color: var(--branco); }
.cena-fala .fala::before { content: '\201C'; position: absolute; left: 0; top: -.1em; color: var(--ambar); font-weight: 800; font-size: 1.6em; line-height: 1; }

/* ---------- resumo das 18h ---------- */

.resumo {
  padding: clamp(80px, 12vw, 160px) var(--gutter);
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 56px; align-items: center;
  max-width: calc(var(--max) + 2 * var(--gutter)); margin: 0 auto;
}
.resumo-texto h2 { margin-bottom: 18px; }
.resumo-texto > p:last-child { font-size: 1.06rem; color: var(--texto); max-width: 46ch; }
.conversa { max-width: 520px; padding: 18px 20px 16px; }
.conversa-cabeca { display: flex; justify-content: space-between; margin-bottom: 12px; }
.conversa-nome { font-stretch: 75%; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; font-size: .76rem; color: var(--azul-claro); }
.conversa-hora { font-size: .78rem; color: var(--texto-2); }
.conversa-bolha { margin: 0; white-space: pre-line; font-size: 1rem; line-height: 1.55; color: var(--branco); }

/* ---------- método ---------- */

.metodo { padding: clamp(80px, 12vw, 160px) var(--gutter); max-width: calc(var(--max) + 2 * var(--gutter)); margin: 0 auto; }
.metodo h2 { margin-bottom: 36px; }
.passos { position: relative; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; }
.passos::before { content: ''; position: absolute; left: 4%; right: 4%; top: 50%; height: 1px; background: var(--linha-forte); z-index: 0; }
.passo { padding: 24px 22px 26px; }
.passo .rotulo-linha { margin-bottom: 16px; }
.passo h3 { font-stretch: 87.5%; text-transform: uppercase; font-size: 1.5rem; margin-bottom: 12px; }
.passo p:last-child { margin: 0; font-size: .98rem; color: var(--texto); }
.passo--gerir { border-color: var(--azul); background: rgba(46, 143, 224, .12); }
.passo--gerir::before, .passo--gerir::after { border-color: var(--branco); }

/* ---------- registros ---------- */

.casos { padding: clamp(80px, 12vw, 160px) var(--gutter); max-width: calc(var(--max) + 2 * var(--gutter)); margin: 0 auto; }
.casos-texto { margin-bottom: 32px; }
.casos-texto h2 { margin-bottom: 14px; }
.casos-texto > p:last-child { max-width: 52ch; font-size: 1.06rem; color: var(--texto); }
.registros { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; }
.registro > header { display: flex; justify-content: space-between; align-items: baseline; gap: 16px; padding: 12px 18px; border-bottom: 1px solid var(--linha); }
.registro > header .rotulo-linha { margin: 0; }
.registro-resultado { margin: 0; padding: 18px 18px 8px; font-size: clamp(1.1rem, 1.5vw, 1.35rem); font-weight: 700; line-height: 1.3; color: var(--branco); text-wrap: balance; }
.registro dl { padding: 6px 18px 14px; }
.registro dl > div { display: grid; grid-template-columns: 120px minmax(0, 1fr); gap: 14px; padding: 11px 0; border-bottom: 1px solid var(--linha); }
.registro dl > div:last-child { border-bottom: 0; }
.registro dt { font-stretch: 75%; font-weight: 600; font-size: .72rem; letter-spacing: .14em; text-transform: uppercase; color: var(--texto-2); padding-top: 3px; }
.registro dd { font-size: .98rem; line-height: 1.45; color: var(--branco); }

/* ---------- quem entra ---------- */

.quem { padding: clamp(80px, 12vw, 160px) var(--gutter); }
.ficha { max-width: 1040px; margin: 0 auto; display: grid; grid-template-columns: 220px minmax(0, 1fr); gap: 40px; padding: 30px 28px 34px; }
.ficha-foto { width: 220px; aspect-ratio: 3 / 4; border: 1px dashed var(--linha-forte); display: grid; place-items: center; overflow: hidden; background: rgba(255, 255, 255, .02); }
.ficha-foto .rotulo-linha { margin: 0; color: var(--texto-3); }
.ficha-foto img { width: 100%; height: 100%; object-fit: cover; filter: grayscale(1) contrast(1.05); }
.ficha-dados h2 { margin-bottom: 22px; max-width: 14ch; }
.ficha-dados dl > div { display: grid; grid-template-columns: 90px minmax(0, 1fr); gap: 14px; padding: 8px 0; border-bottom: 1px solid var(--linha); }
.ficha-dados dt { font-stretch: 75%; font-weight: 600; font-size: .72rem; letter-spacing: .14em; text-transform: uppercase; color: var(--texto-2); padding-top: 4px; }
.ficha-dados dd { color: var(--branco); }
.ficha-dados p { margin: 22px 0 0; max-width: 56ch; font-size: 1.03rem; color: var(--texto); }

/* ---------- demo ---------- */

.demo {
  padding: clamp(80px, 12vw, 160px) var(--gutter) clamp(72px, 10vw, 130px);
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 56px;
  max-width: calc(var(--max) + 2 * var(--gutter)); margin: 0 auto;
}
.demo-texto { grid-column: 1; }
.demo-texto h2 { margin-bottom: 18px; }
.demo-texto > p { color: var(--texto); max-width: 50ch; font-size: 1.04rem; margin-bottom: 26px; }

.impressao { grid-column: 1; align-self: start; }
.demo-livre { grid-column: 2; grid-row: 1 / span 2; }
.impressao-vazia { padding: 34px 26px; color: var(--texto-2); }
.impressao-vazia p:last-child { margin: 0; }
.demo.imprimindo .impressao-vazia { border-color: var(--azul); }
.demo.imprimindo .impressao-vazia::after {
  content: ''; display: block; height: 2px; background: var(--azul-claro); margin-top: 20px;
  animation: cabecote 1.1s ease-in-out infinite alternate;
}
@keyframes cabecote { from { transform: scaleX(.1); transform-origin: left; } to { transform: scaleX(1); transform-origin: left; } }

.registro--desenho { animation: sair .8s cubic-bezier(.2,.8,.2,1) both; }
.registro--desenho h3 { font-stretch: 87.5%; text-transform: uppercase; font-size: 1.45rem; padding: 16px 18px 4px; }
.registro--desenho ol li { list-style: decimal; margin-left: 1.2em; padding: 2px 0; }
.registro--desenho ul li { position: relative; padding-left: 1em; }
.registro--desenho ul li::before { content: ''; position: absolute; left: 0; top: .62em; width: .5em; height: 2px; background: var(--ambar); }
.registro--desenho .miudo { padding: 8px 18px 18px; }
.registro--desenho dl > div, .registro--desenho h3 { opacity: 0; animation: imprimir .5s ease-out forwards; }
.registro--desenho h3 { animation-delay: .2s; }
.registro--desenho dl > div:nth-child(1) { animation-delay: .6s; }
.registro--desenho dl > div:nth-child(2) { animation-delay: 1.1s; }
.registro--desenho dl > div:nth-child(3) { animation-delay: 1.8s; }
.registro--desenho dl > div:nth-child(4) { animation-delay: 2.3s; }
.registro--desenho dl > div:nth-child(5) { animation-delay: 2.7s; }
@keyframes sair { from { transform: translateY(-16px); opacity: 0; } to { transform: none; opacity: 1; } }
@keyframes imprimir { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: none; } }

.chamada {
  grid-column: 1 / -1; margin-top: 24px; padding-top: 44px;
  border-top: 1px solid var(--linha);
  display: grid; gap: 14px; justify-items: start;
}
.chamada > p { color: var(--texto); max-width: 46ch; margin: 0; }
.chamada .acao { margin-top: 10px; }

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

.contracapa {
  border-top: 1px solid var(--linha);
  background: rgba(7, 11, 22, .92);
  padding: 48px var(--gutter) 56px;
  display: grid; grid-template-columns: 1.1fr 1fr 1.2fr; gap: 40px;
}
.contracapa-marca p { margin: 14px 0 0; font-stretch: 87.5%; font-weight: 600; line-height: 1.4; color: var(--texto); }
.contracapa-contatos > div { display: grid; grid-template-columns: 90px 1fr; gap: 12px; padding: 7px 0; border-bottom: 1px solid var(--linha); }
.contracapa-contatos dt { font-stretch: 75%; font-weight: 600; font-size: .72rem; letter-spacing: .14em; text-transform: uppercase; color: var(--texto-2); padding-top: 4px; }
.contracapa-contatos dd { color: var(--branco); }
.contracapa-contatos a { text-decoration: none; border-bottom: 1px solid var(--linha-forte); }
.contracapa-contatos a:hover { border-color: var(--azul-claro); }
.contracapa-nota { margin: 0; font-size: .9rem; max-width: 46ch; color: var(--texto-2); }
.contracapa-nota a { color: var(--branco); }

/* ---------- WhatsApp fixo e turnstile ---------- */

.zap-fixo {
  position: fixed; right: 20px; bottom: 20px; z-index: 60;
  display: inline-flex; align-items: center; gap: 10px;
  background: var(--zap); color: var(--fundo);
  padding: 12px 18px 12px 14px; text-decoration: none;
  font-stretch: 87.5%; font-weight: 700; font-size: .92rem; letter-spacing: .03em;
  box-shadow: 0 8px 22px rgba(0, 0, 0, .45);
  transition: transform .2s ease;
}
.zap-fixo:hover { transform: translateY(-2px); }
.zap-fixo { transition: transform .2s ease, opacity .3s ease; }
body.no-topo .zap-fixo, body.no-demo .zap-fixo { opacity: 0; pointer-events: none; }
@media (min-width: 900px) { .zap-fixo { display: none; } }
.turnstile-caixa { position: fixed; left: 0; bottom: 0; width: 1px; height: 1px; overflow: hidden; opacity: 0; pointer-events: none; }

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

@media (max-width: 1100px) {
  .passos { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .passos::before { display: none; }
  .contracapa { grid-template-columns: 1fr 1fr; }
  .heroi { grid-template-columns: minmax(0, 560px) 1fr; }
}

@media (max-width: 900px) {
  .barra-nav { display: none; }
  .hud { margin-left: auto; }
  .processos-grade { grid-template-columns: minmax(0, 1fr); gap: 24px; }
  .trilho {
    top: var(--barra); z-index: 40; padding: 8px var(--gutter);
    display: flex; align-items: center; gap: 12px;
    margin: 0 calc(-1 * var(--gutter)); border-left: 0; border-right: 0;
    background: var(--fundo);
  }
  .trilho::before, .trilho::after { display: none; }
  .trilho > .rotulo-linha { display: none; }
  .trilho-lista { display: flex; gap: 6px; margin: 0; flex: 1; overflow-x: auto; scrollbar-width: none; }
  .trilho-lista li a { border: 1px solid var(--linha); border-top: 1px solid var(--linha); padding: 5px 8px; font-size: .78rem; gap: 6px; white-space: nowrap; }
  .trilho-lista li a .ordem { display: none; }
  .trilho-lista li.ativa a { transform: none; border-color: var(--azul-claro); }
  .trilho-lista li.ativa a::after { display: none; }

  .resumo, .demo { grid-template-columns: minmax(0, 1fr); gap: 36px; }
  .demo-livre { display: none; }
  .registros { grid-template-columns: minmax(0, 1fr); }
  .ficha { grid-template-columns: 160px minmax(0, 1fr); gap: 26px; }
  .ficha-foto { width: 160px; }
}

@media (max-width: 760px) {
  body { font-size: 16px; }
  .barra { gap: 14px; }
  .barra-logo img { width: 116px; }
  .hud-rotulo { display: none; }
  .hud-curto { display: inline; }
  .heroi { grid-template-columns: minmax(0, 1fr); min-height: calc(100vh - var(--barra)); padding: 30vh var(--gutter) 24px; align-content: end; }
  .heroi-texto::before { inset: -14px -12px -12px -12px; background: rgba(7, 11, 22, .72); }
  .heroi-texto h1 { font-size: clamp(2.2rem, 10vw, 2.9rem); }
  .lede { margin: 1em 0 1.3em; font-size: 1rem; }
  .heroi-hud { justify-self: start; margin-top: 16px; width: 100%; padding: 12px; }
  .hud-numeros dd { font-size: 1.2rem; }
  .hud-log li { grid-template-columns: 40px 64px minmax(0, 1fr); font-size: .7rem; }
  .hud-dica { display: none; }
  .dica-no { width: min(280px, calc(100vw - 24px)); }
  .processo-cabeca { flex-wrap: wrap; align-items: baseline; gap: 10px 16px; }
  .processo-cabeca h3 { font-size: 1.7rem; }
  .processo-estado { font-size: .7rem; padding: 5px 8px; }
  .processo-corpo { grid-template-columns: minmax(0, 1fr); }
  .hoje, .agente { padding: 20px 18px 24px; }
  .passos { grid-template-columns: minmax(0, 1fr); }
  .ficha { grid-template-columns: minmax(0, 1fr); }
  .ficha-foto { width: 140px; }
  .contracapa { grid-template-columns: minmax(0, 1fr); gap: 28px; }
  .zap-fixo span { display: none; }
  .zap-fixo { padding: 12px; right: 14px; bottom: 14px; }
  .campo-linha { flex-direction: column; gap: 6px; padding: 6px; }
  .campo-linha input { padding: 10px; }
  .campo-linha .acao { width: 100%; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation: none !important; transition: none !important; }
  .log li { opacity: 1; transform: none; }
  .registro--desenho dl > div, .registro--desenho h3 { opacity: 1; }
}


/* ---------- unificação: o card é o nó ---------- */
.processos-grade { grid-template-columns: minmax(0, 30%) minmax(0, 1fr); gap: 40px; }
.trilho { background: transparent; border: 0; padding: 0; width: 180px; }
.trilho::before, .trilho::after { display: none; }
.processo {
  position: relative; background: var(--painel); border: 1px solid var(--linha); padding: 22px 26px 0;
  opacity: 0; transform: translateY(26px);
  transition: opacity .6s ease, transform .8s cubic-bezier(.2, .8, .2, 1), border-color .5s ease;
}
.processo.vista { opacity: 1; transform: none; }
.processo.ligado { border-color: rgba(124, 192, 255, .5); }
.processo.ligado::after { content: ''; position: absolute; inset: -1px; pointer-events: none; animation: acender 1.4s ease-out both; }
@keyframes acender { from { box-shadow: 0 0 0 0 rgba(124, 192, 255, .55); } to { box-shadow: 0 0 60px 18px rgba(124, 192, 255, 0); } }
.porta {
  position: absolute; left: -8px; top: 46%; width: 14px; height: 14px; border-radius: 50%;
  border: 2px solid var(--ambar); background: var(--fundo); transition: border-color .4s ease, box-shadow .4s ease;
}
.processo.ligado .porta { border-color: var(--azul-claro); box-shadow: 0 0 14px rgba(124, 192, 255, .9); }
.processo-cabeca { margin-bottom: 16px; }
.processo-corpo { gap: 0; border-top: 1px solid var(--linha); margin: 0 -26px; }
.hoje, .agente { background: transparent; border: 0; padding: 22px 26px 26px; }
.hoje::before, .hoje::after, .agente::before, .agente::after { display: none; }
.agente { border-left: 1px solid var(--linha); }
.gente { border: 0; border-top: 1px solid var(--linha); background: rgba(255, 255, 255, .025); }
@media (max-width: 900px) {
  .processos-grade { grid-template-columns: minmax(0, 1fr); }
  .trilho { width: auto; padding: 8px var(--gutter); background: var(--fundo); border-bottom: 1px solid var(--linha); }
}
@media (max-width: 760px) {
  .processo { padding: 18px 18px 0; }
  .processo-corpo { margin: 0 -18px; }
  .hoje, .agente { padding: 18px; }
  .agente { border-left: 0; border-top: 1px solid var(--linha); }
  .porta { display: none; }
}
@media (prefers-reduced-motion: reduce) { .processo { opacity: 1; transform: none; } }
@media (min-width: 901px) {
  .trilho { display: none; }
  .processos-grade { grid-template-columns: minmax(0, 32%) minmax(0, 1fr); }
}
@media (min-width: 901px) { .folhas { grid-column: 2; } }

/* ---------- 3D e efeitos (2026-09-30) ---------- */
html.lenis, html.lenis body { height: auto; }
.lenis.lenis-smooth { scroll-behavior: auto !important; }
.linha-split { padding-bottom: .06em; margin-bottom: -.06em; }
html.intro .heroi-texto h1, html.intro .heroi-texto .lede, html.intro .heroi-texto .campo { visibility: hidden; }
html.intro.pronto .heroi-texto h1, html.intro.pronto .heroi-texto .lede, html.intro.pronto .heroi-texto .campo { visibility: visible; }

#sistema-rotulos { position: fixed; inset: 0; z-index: 0; pointer-events: none; overflow: hidden; }
body.fundo-calmo #sistema-rotulos { opacity: .7; }
.rot { position: absolute; left: 0; top: 0; display: flex; flex-direction: column; align-items: center; gap: 2px; white-space: nowrap; transition: opacity .35s ease; will-change: transform; }
.rot b { font-stretch: 87.5%; font-weight: 700; font-size: 11px; letter-spacing: .14em; color: var(--ambar); }
.rot i { font-style: normal; font-stretch: 75%; font-weight: 600; font-size: 9px; letter-spacing: .16em; text-transform: uppercase; color: rgba(245, 185, 66, .75); opacity: 0; transition: opacity .3s ease; }
.rot-no.ligado b { color: var(--branco); }
.rot-no.ligado i { color: var(--azul-claro); }
.rot-no.marcado b { font-size: 13px; }
.rot-no.marcado i { opacity: 1; }
.rot-empresa b { color: var(--branco); font-size: 12px; }
.rot-empresa i { display: none; }
.rot-dono b { color: var(--branco); }
.rot-dono i { opacity: 1; color: var(--texto-2); }
.rot-origem b { color: var(--texto-2); font-size: 10px; }
.rot-origem i { display: none; }

#sistema-ligacao { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; transition: opacity .4s ease; }
#sistema-ligacao.ativo { opacity: 1; }
#sistema-ligacao path { fill: none; }
#sistema-ligacao .lig-base { stroke: rgba(245, 185, 66, .35); stroke-width: 1.2; }
#sistema-ligacao .lig-traco { stroke: rgba(245, 185, 66, .85); stroke-width: 1.6; stroke-dasharray: 4 10; animation: lig-correr 1s linear infinite; }
#sistema-ligacao.ligado .lig-base { stroke: rgba(124, 192, 255, .4); }
#sistema-ligacao.ligado .lig-traco { stroke: rgba(124, 192, 255, .95); }
#sistema-ligacao.pulso .lig-traco { animation: lig-correr 1s linear infinite, lig-pulso 1.2s ease-out; }
@keyframes lig-correr { to { stroke-dashoffset: -14; } }
@keyframes lig-pulso { 0% { stroke: #fff; stroke-width: 4; filter: drop-shadow(0 0 6px #7CC0FF); } 100% { stroke-width: 1.6; filter: none; } }

.sistema-varredura { position: absolute; top: 0; bottom: 0; left: -80px; width: 70px; background: linear-gradient(90deg, rgba(124, 192, 255, 0), rgba(124, 192, 255, .22)); border-right: 2px solid rgba(242, 245, 255, .9); opacity: 0; }
.sistema-varredura.ativa { animation: varrer 1.5s cubic-bezier(.45, 0, .2, 1); }
@keyframes varrer { 0% { opacity: 1; transform: translateX(0); } 90% { opacity: 1; } 100% { opacity: 0; transform: translateX(calc(100vw + 90px)); } }
@media (prefers-reduced-motion: reduce) { .sistema-varredura.ativa { animation: none; } #sistema-ligacao .lig-traco { animation: none; } }

@media (max-width: 760px) { .heroi-texto::before { background: linear-gradient(180deg, rgba(7, 11, 22, 0) 0, rgba(7, 11, 22, .82) 70px); inset: -60px -40px -12px -40px; } }

/* ---------- Veja um agente trabalhando (2026-09-30) ---------- */
.sim { grid-column: 1; padding: 0; overflow: hidden; }
.sim-escolha { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 22px; }
.sim-chip {
  display: inline-flex; align-items: center; gap: 8px; cursor: pointer;
  background: rgba(255, 255, 255, .03); border: 1px solid var(--linha); color: var(--texto);
  padding: 9px 14px; font-stretch: 87.5%; font-weight: 600; font-size: .95rem;
  transition: border-color .2s ease, background .2s ease, color .2s ease;
}
.sim-chip .ordem { margin: 0; font-size: .72rem; vertical-align: 0; }
.sim-chip:hover { border-color: var(--linha-forte); color: var(--branco); }
.sim-chip[aria-pressed="true"] { border-color: var(--azul-claro); background: rgba(46, 143, 224, .18); color: var(--branco); }
.sim-cabeca { display: flex; justify-content: space-between; align-items: center; padding: 14px 20px; border-bottom: 1px solid var(--linha); }
.sim-titulo { display: inline-flex; align-items: center; gap: 10px; font-stretch: 87.5%; font-weight: 600; color: var(--texto-2); }
.sim-titulo b { color: var(--branco); }
.sim-luz { width: 8px; height: 8px; border-radius: 50%; background: var(--azul-claro); box-shadow: 0 0 10px rgba(124, 192, 255, .9); }
.sim-rodando .sim-luz { animation: piscar 1s ease-in-out infinite; }
@keyframes piscar { 50% { opacity: .3; } }
.sim-relogio { font-family: var(--mono); font-size: 1.1rem; color: var(--branco); font-variant-numeric: tabular-nums; }
.sim-relogio.tique { animation: tique .5s ease-out; }
@keyframes tique { from { color: var(--azul-claro); text-shadow: 0 0 12px rgba(124, 192, 255, .9); } }
.sim-antes { display: grid; gap: 4px; margin: 0; padding: 14px 20px; border-bottom: 1px solid var(--linha); color: var(--texto-2); font-size: .92rem; background: var(--ambar-escuro); }
.sim-antes .rotulo-linha { margin: 0; }
.sim-passos { min-height: 280px; padding: 8px 20px 4px; }
.sim-passo {
  position: relative; display: grid; grid-template-columns: 112px minmax(0, 1fr); gap: 14px;
  padding: 14px 0; border-bottom: 1px solid var(--linha);
  opacity: 0; transform: translateY(10px); transition: opacity .45s ease, transform .6s cubic-bezier(.2, .8, .2, 1);
}
.sim-passo.dentro { opacity: 1; transform: none; }
.sim-passo:last-child { border-bottom: 0; }
.sim-rotulo { font-stretch: 75%; font-weight: 700; font-size: .72rem; letter-spacing: .14em; text-transform: uppercase; padding-top: 3px; display: inline-flex; align-items: flex-start; gap: 8px; }
.sim-rotulo::before { content: ''; width: 7px; height: 7px; border-radius: 50%; margin-top: 3px; flex: 0 0 auto; background: currentColor; box-shadow: 0 0 8px currentColor; }
.sim-entrada .sim-rotulo { color: var(--ambar); }
.sim-agente .sim-rotulo, .sim-saida .sim-rotulo { color: var(--azul-claro); }
.sim-gente .sim-rotulo { color: var(--branco); }
.sim-texto { margin: 0; line-height: 1.45; min-height: 1.45em; }
.sim-entrada .sim-texto { color: var(--branco); background: var(--painel-solido); border: 1px solid var(--linha-forte); padding: 10px 12px; }
.sim-agente .sim-texto { font-family: var(--mono); font-size: .88rem; color: var(--texto); }
.sim-saida .sim-texto { color: var(--branco); font-weight: 600; }
.sim-gente .sim-texto { color: var(--branco); font-stretch: 87.5%; font-weight: 700; }
.sim-texto.pensando::after { content: '···'; font-family: var(--mono); color: var(--azul-claro); animation: piscar .9s steps(3) infinite; }
.sim-rodape { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 12px 20px; border-top: 1px solid var(--linha); }
.sim-repetir { background: transparent; border: 1px solid var(--linha-forte); color: var(--branco); padding: 8px 14px; cursor: pointer; font-stretch: 87.5%; font-weight: 600; }
.sim-repetir:hover { border-color: var(--azul-claro); }
@media (max-width: 760px) {
  .sim-passo { grid-template-columns: minmax(0, 1fr); gap: 6px; }
  .sim-passos { min-height: 360px; padding: 4px 16px; }
  .sim-cabeca, .sim-antes, .sim-rodape { padding-left: 16px; padding-right: 16px; }
}
@media (prefers-reduced-motion: reduce) { .sim-passo { opacity: 1; transform: none; } }

/* herói sem campo: dois botões (2026-09-30) */
.heroi-acoes { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 8px; }
.acao--vazado { background: transparent; color: var(--branco); box-shadow: inset 0 0 0 1px var(--linha-forte); }
.acao--vazado:hover { background: rgba(124, 192, 255, .12); color: var(--branco); }
@media (max-width: 600px) { .heroi-acoes .acao { width: 100%; } }

/* foto do Jonas (2026-10-26): colorida, moldura sólida */
.ficha-foto:has(img) { border-style: solid; }
.ficha-foto img { filter: none; object-position: 62% 30%; }

/* ícones dos 8 processos no sistema 3D (2026-10-26): cor própria; parado e fraco "na mão", aceso e animado com agente */
.ico-no { position: absolute; left: 0; top: 0; color: var(--cor); opacity: 0; transition: opacity .35s ease; will-change: transform; }
.ico-no svg { width: 100%; height: 100%; display: block; overflow: visible; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; opacity: .5; filter: drop-shadow(0 0 3px color-mix(in srgb, var(--cor) 45%, transparent)); transition: opacity .4s ease, filter .4s ease; }
.ico-no .pt, .ico-no .pupila { fill: currentColor; stroke: none; }
.ico-no.ligado svg, .ico-no.marcado svg { opacity: 1; filter: drop-shadow(0 0 4px var(--cor)) drop-shadow(0 0 10px color-mix(in srgb, var(--cor) 55%, transparent)); }
.ico-no * { transform-box: fill-box; transform-origin: center; }
.rot-no b { color: var(--cor, var(--ambar)); }

@media (prefers-reduced-motion: no-preference) {
  .ico-no.ligado .pt { animation: ico-pula 1.2s ease-in-out infinite; }
  .ico-no.ligado .pt:nth-of-type(2) { animation-delay: .15s; }
  .ico-no.ligado .pt:nth-of-type(3) { animation-delay: .3s; }
  .ico-no.ligado .tr { stroke-dasharray: 26; animation: ico-traca 2s ease-in-out infinite; }
  .ico-no.ligado .ln { transform-origin: left center; animation: ico-escreve 2.4s ease-in-out infinite; }
  .ico-no.ligado .ln:nth-of-type(4) { animation-delay: .3s; }
  .ico-no.ligado .ln:nth-of-type(5) { animation-delay: .6s; }
  .ico-no.ligado .moeda { animation: ico-gira 2.6s ease-in-out infinite; }
  .ico-no.ligado .ck { stroke-dasharray: 14; animation: ico-traca-ck 2.2s ease-in-out infinite; }
  .ico-no.ligado .carro { animation: ico-anda 1.6s ease-in-out infinite; }
  .ico-no.ligado .mais { animation: ico-pulsa 1.4s ease-in-out infinite; }
  .ico-no.ligado .palp { animation: ico-pisca 3.2s ease-in-out infinite; }
  .ico-no.ligado .pupila { animation: ico-olha 3.2s ease-in-out infinite; }
}
@keyframes ico-pula { 0%, 60%, 100% { transform: translateY(0); } 30% { transform: translateY(-2.2px); } }
@keyframes ico-traca { 0% { stroke-dashoffset: 26; } 55%, 100% { stroke-dashoffset: 0; } }
@keyframes ico-escreve { 0% { transform: scaleX(0); } 40%, 100% { transform: scaleX(1); } }
@keyframes ico-gira { 0%, 55%, 100% { transform: scaleX(1); } 70% { transform: scaleX(.08); } 85% { transform: scaleX(1); } }
@keyframes ico-traca-ck { 0% { stroke-dashoffset: 14; } 45%, 100% { stroke-dashoffset: 0; } }
@keyframes ico-anda { 0%, 100% { transform: translateX(-1.2px); } 50% { transform: translateX(1.2px); } }
@keyframes ico-pulsa { 0%, 100% { transform: scale(1); opacity: 1; } 50% { transform: scale(1.35); opacity: .6; } }
@keyframes ico-pisca { 0%, 44%, 52%, 100% { transform: scaleY(1); } 48% { transform: scaleY(.1); } }
@keyframes ico-olha { 0%, 44%, 52%, 100% { transform: translateX(0) scaleY(1); } 48% { transform: translateX(0) scaleY(.1); } 70% { transform: translateX(1.6px); } 88% { transform: translateX(-1.6px); } }

/* cada processo com a sua cor também no cartão, na linha e no tom da tela (2026-10-26) */
[data-verbo="atender"] { --cor: #38BDF8; }
[data-verbo="vender"] { --cor: #4ADE80; }
[data-verbo="registrar"] { --cor: #A78BFA; }
[data-verbo="cobrar"] { --cor: #2DD4BF; }
[data-verbo="conferir"] { --cor: #BEF264; }
[data-verbo="comprar"] { --cor: #FB7185; }
[data-verbo="contratar"] { --cor: #E879F9; }
[data-verbo="enxergar"] { --cor: #818CF8; }
@property --cor-foco { syntax: '<color>'; inherits: true; initial-value: rgba(0, 0, 0, 0); }
html { transition: --cor-foco 1.1s ease; }
html[data-foco="atender"] { --cor-foco: #38BDF8; }
html[data-foco="vender"] { --cor-foco: #4ADE80; }
html[data-foco="registrar"] { --cor-foco: #A78BFA; }
html[data-foco="cobrar"] { --cor-foco: #2DD4BF; }
html[data-foco="conferir"] { --cor-foco: #BEF264; }
html[data-foco="comprar"] { --cor-foco: #FB7185; }
html[data-foco="contratar"] { --cor-foco: #E879F9; }
html[data-foco="enxergar"] { --cor-foco: #818CF8; }

/* tom da tela: luz da cor do processo em foco, por trás do conteúdo */
.ambiente {
  position: fixed; inset: 0; z-index: 0; pointer-events: none;
  background:
    radial-gradient(70% 65% at 20% 55%, color-mix(in srgb, var(--cor-foco) 16%, transparent), transparent 72%),
    radial-gradient(55% 55% at 82% 35%, color-mix(in srgb, var(--cor-foco) 9%, transparent), transparent 70%);
}

/* cartão do processo */
.processo {
  border-color: color-mix(in srgb, var(--cor) 26%, var(--linha));
  background: linear-gradient(155deg, color-mix(in srgb, var(--cor) 10%, var(--painel)) 0%, var(--painel) 55%);
  transition: opacity .6s ease, transform .8s cubic-bezier(.2, .8, .2, 1), border-color .5s ease, box-shadow .6s ease;
}
.processo .processo-cabeca .ordem { color: var(--cor); }
.processo .agente .rotulo-linha { color: var(--cor); }
.processo .log time { color: var(--cor); }
.processo .processo-corpo, .processo .agente, .processo .gente, .processo .log, .processo .log li { border-color: color-mix(in srgb, var(--cor) 18%, var(--linha)); }
.processo.ligado {
  border-color: color-mix(in srgb, var(--cor) 70%, transparent);
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--cor) 22%, transparent), 0 24px 90px -30px color-mix(in srgb, var(--cor) 60%, transparent);
}
.processo.ligado::after { animation: acender-cor 1.4s ease-out both; }
@keyframes acender-cor { from { box-shadow: 0 0 0 0 color-mix(in srgb, var(--cor) 55%, transparent); } to { box-shadow: 0 0 60px 18px transparent; } }
.processo.ligado .processo-estado { color: var(--cor); border-color: color-mix(in srgb, var(--cor) 60%, transparent); }
.processo.ligado .porta { border-color: var(--cor); box-shadow: 0 0 14px var(--cor); }
.trilho-lista li.ligado .estado { background: var(--cor); box-shadow: 0 0 8px var(--cor); }

/* linha viva até o cartão, na cor do processo */
#sistema-ligacao.ligado .lig-base { stroke: color-mix(in srgb, var(--cor-foco) 45%, transparent); }
#sistema-ligacao.ligado .lig-traco { stroke: var(--cor-foco); }

/* simulação: painel e botões na cor do processo escolhido */
.sim[data-verbo] { border-color: color-mix(in srgb, var(--cor) 40%, var(--linha)); background: linear-gradient(160deg, color-mix(in srgb, var(--cor) 9%, var(--painel)) 0%, var(--painel) 60%); transition: border-color .5s ease; }
.sim[data-verbo] .sim-luz { background: var(--cor); box-shadow: 0 0 10px var(--cor); }
.sim[data-verbo] .sim-agente .sim-rotulo, .sim[data-verbo] .sim-saida .sim-rotulo, .sim[data-verbo] .sim-texto.pensando::after { color: var(--cor); }
.sim-chip[aria-pressed="true"] { border-color: var(--cor); background: color-mix(in srgb, var(--cor) 16%, transparent); }
.sim-chip .ordem { color: var(--cor); }

/* ícones da empresa, de quem decide e das etapas da simulação (2026-10-26) */
.ico-empresa svg, .ico-dono svg, .ico-cadeia svg { opacity: 1; }
.rot-cadeia b { color: var(--cor); font-size: 10px; }
@media (prefers-reduced-motion: no-preference) {
  .ico-empresa .jan { animation: ico-janela 2.8s ease-in-out infinite; }
  .ico-empresa .jan:nth-of-type(5) { animation-delay: .5s; }
  .ico-empresa .jan:nth-of-type(6) { animation-delay: 1.1s; }
  .ico-empresa .jan:nth-of-type(7) { animation-delay: 1.7s; }
  .ico-empresa .jan:nth-of-type(8) { animation-delay: 2.2s; }
  .ico-dono svg { animation: ico-respira 3s ease-in-out infinite; }
  .ico-cadeia .entra { animation: ico-pula 1.4s ease-in-out infinite; }
}
@keyframes ico-janela { 0%, 100% { opacity: .35; } 50% { opacity: 1; } }
@keyframes ico-respira { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.06); } }

/* como começa + perguntas (2026-10-26) */
.comeco { padding: clamp(80px, 12vw, 160px) var(--gutter); max-width: calc(var(--max) + 2 * var(--gutter)); margin: 0 auto; }
.comeco-texto { max-width: 720px; margin-bottom: 36px; }
.comeco-texto h2 { margin-bottom: 18px; }
.comeco-lede { font-size: 1.06rem; color: var(--texto); max-width: 58ch; margin: 0; }
.comeco-passos { list-style: none; margin: 0 0 56px; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
.comeco-passos li { padding: 24px 24px 26px; }
.comeco-num { display: block; font-family: var(--mono); font-size: .9rem; color: var(--azul-claro); margin-bottom: 14px; }
.comeco-passos h3 { font-size: 1.35rem; font-stretch: 87.5%; margin: 0 0 10px; }
.comeco-passos p { margin: 0; color: var(--texto); }
.comeco-perguntas { max-width: 760px; }
.pergunta { border-top: 1px solid var(--linha); }
.pergunta:last-of-type { border-bottom: 1px solid var(--linha); margin-bottom: 30px; }
.pergunta summary {
  list-style: none; cursor: pointer; display: flex; justify-content: space-between; align-items: center; gap: 16px;
  padding: 18px 0; font-size: 1.12rem; font-weight: 600; color: var(--branco);
}
.pergunta summary::-webkit-details-marker { display: none; }
.pergunta summary::after { content: '+'; font-family: var(--mono); font-size: 1.3rem; color: var(--azul-claro); transition: transform .25s ease; }
.pergunta[open] summary::after { transform: rotate(45deg); }
.pergunta summary:hover { color: var(--azul-claro); }
.pergunta summary:focus-visible { outline: 2px solid var(--azul-claro); outline-offset: 4px; }
.pergunta p { margin: 0 0 20px; max-width: 62ch; color: var(--texto); }
@media (max-width: 900px) { .comeco-passos { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 600px) { .comeco-perguntas .acao { width: 100%; } }

/* barra do topo com 6 links: sem quebra de linha em telas médias */
@media (max-width: 1279px) { .barra .hud { display: none; } .barra-nav { gap: 18px; } .barra-nav a { white-space: nowrap; } }
@media (max-width: 1100px) { .barra-nav a[href="#metodo"], .barra-nav a[href="#casos"] { display: none; } }

/* grupo A (2026-10-26) */
/* ramo escolhido: some o que é do exemplo genérico */
#verbos.ramo-especifico .anotacao,
#verbos.ramo-especifico .cena-titulo,
#verbos.ramo-especifico .cena-boleto .barras,
#verbos.ramo-especifico .cotacao .rotulo-linha,
#verbos.ramo-especifico .curriculo .rotulo-linha { display: none; }
/* partes de leitura e decisão: fundo animado quase some */
#sistema, #sistema-rotulos { transition: opacity .7s ease; }
body.fundo-apagado #sistema, body.fundo-apagado #sistema-rotulos { opacity: .14; }
/* "Na mão." não se parte em duas caixas */
.heroi-texto h1 em { white-space: nowrap; }
/* celular: botão do topo encostado à direita; sem o botão flutuante, que cobria o texto (o do topo fica sempre visível) */
@media (max-width: 760px) {
  .barra-zap { margin-left: auto; }
  .zap-fixo { display: none; }
}

/* grupo B (2026-10-26) */
/* quem atende, na abertura */
.heroi-quem { display: flex; align-items: center; gap: 12px; margin: 22px 0 0; color: var(--texto-2); font-size: .92rem; line-height: 1.4; max-width: 46ch; }
.heroi-quem img { width: 44px; height: 44px; flex: 0 0 auto; border-radius: 50%; object-fit: cover; object-position: 62% 25%; border: 1px solid var(--linha-forte); }
.heroi-quem b { color: var(--branco); font-weight: 600; }
html.intro .heroi-texto .heroi-quem { visibility: hidden; }
html.intro.pronto .heroi-texto .heroi-quem { visibility: visible; }
/* resumo das 18h com a escolha do ramo */
.resumo-lede { font-size: 1.06rem; color: var(--texto); max-width: 46ch; }
.ramo-escolha { margin-top: 28px; }
.ramo-chips { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 10px; }
.ramo-chip {
  min-height: 44px; padding: 0 16px; background: rgba(7, 11, 22, .6); border: 1px solid var(--linha-forte);
  color: var(--texto); font: inherit; font-size: .95rem; font-weight: 600; font-stretch: 87.5%; cursor: pointer;
  transition: background .2s ease, color .2s ease, border-color .2s ease;
}
.ramo-chip:hover { border-color: var(--azul-claro); color: var(--branco); }
.ramo-chip[aria-pressed="true"] { background: var(--branco); color: var(--fundo); border-color: var(--branco); }
.ramo-chip:focus-visible { outline: 2px solid var(--azul-claro); outline-offset: 2px; }
/* processos compactos: o passo a passo abre no botão */
.processo { margin-bottom: clamp(24px, 5vh, 48px); }
.processo.compacto:not(.aberto) .cena, .processo.compacto:not(.aberto) .log { display: none; }
.processo-abrir {
  display: inline-flex; align-items: center; gap: 10px; margin-top: 16px; min-height: 44px; padding: 0 14px;
  background: transparent; border: 1px solid color-mix(in srgb, var(--cor, var(--azul-claro)) 50%, transparent);
  color: var(--branco); font: inherit; font-size: .92rem; font-weight: 600; font-stretch: 87.5%; cursor: pointer;
  transition: border-color .2s ease, background .2s ease;
}
.processo-abrir::after { content: '+'; font-family: var(--mono); font-size: 1.1rem; color: var(--cor, var(--azul-claro)); }
.processo.aberto .processo-abrir::after { content: '−'; }
.processo-abrir:hover { border-color: var(--cor, var(--azul-claro)); background: color-mix(in srgb, var(--cor, var(--azul-claro)) 10%, transparent); }
.processo-abrir:focus-visible { outline: 2px solid var(--cor, var(--azul-claro)); outline-offset: 2px; }

/* onde já roda: números + ramos (2026-10-26) */
.casos-numeros { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0; margin: 0 0 40px; border-top: 1px solid var(--linha); border-bottom: 1px solid var(--linha); }
.casos-numeros > div { padding: 22px 24px 24px 0; }
.casos-numeros > div + div { padding-left: 24px; border-left: 1px solid var(--linha); }
.casos-numeros dt { font-stretch: 75%; font-weight: 600; font-size: .78rem; letter-spacing: .14em; text-transform: uppercase; color: var(--texto-2); margin-bottom: 10px; }
.casos-numeros dd { margin: 0; display: grid; gap: 6px; }
.casos-numeros b { font-size: clamp(2.6rem, 5vw, 4rem); font-weight: 800; font-stretch: 112%; line-height: .95; color: var(--branco); letter-spacing: -.02em; }
.casos-numeros dd span { color: var(--texto); font-size: .98rem; }
.ramos-grade { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 12px; }
.ramo-tile {
  display: grid; justify-items: center; align-content: center; gap: 14px; min-height: 170px; padding: 22px 12px; text-align: center;
  background: linear-gradient(160deg, color-mix(in srgb, var(--cor) 12%, var(--painel-solido)) 0%, var(--painel-solido) 70%);
  border: 1px solid color-mix(in srgb, var(--cor) 30%, var(--linha));
  transition: border-color .3s ease, transform .3s ease, box-shadow .3s ease;
}
.ramo-tile svg { width: 52px; height: 52px; fill: none; stroke: var(--cor); stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; filter: drop-shadow(0 0 6px color-mix(in srgb, var(--cor) 55%, transparent)); overflow: visible; }
.ramo-tile svg .pisca { fill: var(--cor); }
.ramo-tile svg * { transform-box: fill-box; transform-origin: center bottom; }
.ramo-tile span { font-weight: 700; font-stretch: 87.5%; font-size: 1.02rem; line-height: 1.25; color: var(--branco); }
.ramo-tile:hover { border-color: var(--cor); transform: translateY(-3px); box-shadow: 0 18px 50px -24px var(--cor); }
@media (prefers-reduced-motion: no-preference) {
  .ramo-tile .pisca { animation: ramo-pisca 2.6s ease-in-out infinite; }
  .ramo-tile .pisca:nth-of-type(odd) { animation-delay: .6s; }
  .ramo-tile .sobe { animation: ramo-sobe 2.4s ease-in-out infinite; }
  .ramo-tile .aperto { animation: ramo-aperto 2.4s ease-in-out infinite; transform-origin: center; }
}
@keyframes ramo-pisca { 0%, 100% { opacity: .35; } 50% { opacity: 1; } }
@keyframes ramo-sobe { 0%, 100% { transform: scaleY(.75); } 50% { transform: scaleY(1); } }
@keyframes ramo-aperto { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-1.2px); } }
@media (max-width: 1100px) { .ramos-grade { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 760px) {
  .casos-numeros { grid-template-columns: minmax(0, 1fr); }
  .casos-numeros > div, .casos-numeros > div + div { padding: 18px 0; border-left: 0; }
  .casos-numeros > div + div { border-top: 1px solid var(--linha); }
  .ramos-grade { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ramo-tile { min-height: 140px; }
  .ramo-tile svg { width: 44px; height: 44px; }
}

/* sete ramos + "o seu ramo" (2026-10-26) */
.ramos-grade { grid-template-columns: repeat(7, minmax(0, 1fr)); }
.ramo-tile--seu { padding: 0; border-style: dashed; background: transparent; }
.ramo-tile--seu a { display: grid; justify-items: center; align-content: center; gap: 14px; height: 100%; padding: 22px 12px; text-decoration: none; color: inherit; }
.ramo-tile--seu:hover { border-style: solid; }
@media (max-width: 1100px) { .ramos-grade { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
@media (max-width: 760px) { .ramos-grade { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* prova de resultado: 4 números (2026-10-26) */
.casos-numeros { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.casos-numeros b { font-size: clamp(2.2rem, 3.8vw, 3.4rem); }
.numero-destaque b { color: var(--azul-claro); white-space: nowrap; font-size: clamp(2rem, 3.1vw, 2.9rem); }
.numero-destaque b i { font-style: normal; color: var(--texto-2); font-weight: 600; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
@media (max-width: 1100px) {
  .casos-numeros { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .casos-numeros > div:nth-child(3) { padding-left: 0; border-left: 0; }
  .casos-numeros > div:nth-child(n+3) { border-top: 1px solid var(--linha); }
}
@media (max-width: 760px) { .casos-numeros { grid-template-columns: minmax(0, 1fr); } }

/* 8 cartões (7 ramos + o seu): 4 por linha (2026-10-26) */
.ramos-grade { grid-template-columns: repeat(4, minmax(0, 1fr)); }
@media (max-width: 760px) { .ramos-grade { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* 9 cartões (8 ramos + o seu): 3 por linha */
.ramos-grade { grid-template-columns: repeat(3, minmax(0, 1fr)); }
@media (max-width: 760px) { .ramos-grade { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* 14 cartões (13 ramos + o seu) e 14 botões de ramo (2026-10-26) */
.ramos-grade { grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 10px; }
.ramo-tile { min-height: 150px; padding: 18px 10px; }
.ramo-tile svg { width: 44px; height: 44px; }
.ramo-tile span { font-size: .95rem; }
@media (max-width: 1100px) { .ramos-grade { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
@media (max-width: 760px) {
  .ramos-grade { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ramo-tile { min-height: 128px; }
  /* no celular os botões de ramo correm de lado, numa faixa só */
  .ramo-chips { flex-wrap: nowrap; overflow-x: auto; margin-right: calc(-1 * var(--gutter)); padding-right: var(--gutter); scrollbar-width: none; -webkit-overflow-scrolling: touch; }
  .ramo-chips::-webkit-scrollbar { display: none; }
  .ramo-chip { flex: 0 0 auto; }
}