/* Vitrine pública de refortax.com.br.
 *
 * Identidade da REFORTAX: o azul-pinho do painel de entrada e o ouro do marco
 * "2026". O ouro fica reservado ao que importa (chamada principal, preço de
 * venda, estado ativo, a tese do título); o resto da página é tipografia e
 * fio fino, como uma planilha fiscal bem diagramada.
 *
 * Fontes servidas do próprio site (a CSP só aceita font-src 'self'): Instrument
 * Sans no texto e Instrument Serif em itálico na tese. Licença OFL. */

@font-face {
  font-family: "Instrument Sans";
  src: url("fonts/instrument-sans-latin.woff2") format("woff2");
  font-weight: 400 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Instrument Serif";
  src: url("fonts/instrument-serif-italic-latin.woff2") format("woff2");
  font-weight: 400;
  font-style: italic;
  font-display: swap;
}

:root {
  --fundo: #050f1c;
  --fundo-2: #081829;
  --superficie: #0b1f35;
  --fio: rgba(150, 180, 215, .14);
  --fio-forte: rgba(150, 180, 215, .26);
  --texto: #e9eef5;
  --texto-2: #a3b4c8;
  /* 5,3:1 sobre o cartão e 6,5:1 sobre o fundo: passa no AA para texto pequeno. */
  --texto-3: #8098b2;
  --pinho: #14477e;
  --pinho-claro: #2d6bb0;
  --azul: #7fa9dc;
  --ouro: #d8b850;
  --ouro-claro: #ecd58b;
  --ok: #4cc493;
  --alerta: #e5a54b;
  --sans: "Instrument Sans", "Segoe UI", system-ui, -apple-system, Arial, sans-serif;
  --serif: "Instrument Serif", Georgia, "Times New Roman", serif;
  --mono: ui-monospace, "SFMono-Regular", Consolas, "Liberation Mono", monospace;
  --raio: 18px;
  --largura: 1180px;
  --curva: cubic-bezier(.2, .7, .2, 1);
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 88px; }
body.vitrine {
  margin: 0;
  background: var(--fundo);
  color: var(--texto);
  font: 400 16px/1.6 var(--sans);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}
img { max-width: 100%; display: block; }
a { color: inherit; }
h1, h2, h3 { margin: 0; font-weight: 600; letter-spacing: -.022em; line-height: 1.08; text-wrap: balance; }
p { margin: 0; }
em { font-family: var(--serif); font-style: italic; font-weight: 400; color: var(--ouro); letter-spacing: -.005em; }
code, kbd { font-family: var(--mono); font-size: .86em; }
.vitrine button { cursor: pointer; }

.faixa { width: min(var(--largura), calc(100% - 48px)); margin: 0 auto; }
.pular {
  position: absolute; left: 16px; top: -48px; z-index: 50;
  padding: 10px 14px; border-radius: 10px; background: var(--ouro); color: #1a1405; font-weight: 600;
}
.pular:focus { top: 12px; }
:focus-visible { outline: 2px solid var(--ouro); outline-offset: 3px; border-radius: 6px; }

/* Sobretítulos: as seções numeradas como índice (01 Produto, 02 Método…). */
main { counter-reset: secao; }
.sobre-titulo {
  font-size: 12.5px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase;
  color: var(--texto-3);
}
.abertura .sobre-titulo::before {
  content: ""; display: inline-block; width: 22px; height: 1px; margin-right: 10px;
  vertical-align: middle; background: var(--ouro);
}
.cabeca-secao .sobre-titulo, .acesso-texto .sobre-titulo { counter-increment: secao; }
.cabeca-secao .sobre-titulo::before, .acesso-texto .sobre-titulo::before {
  content: counter(secao, decimal-leading-zero); margin-right: 14px;
  font: 500 12.5px/1 var(--mono); letter-spacing: 0; color: var(--ouro);
}

/* ------------------------------------------------------------ botões */
.botao {
  display: inline-flex; align-items: center; gap: 10px; justify-content: center;
  padding: 10px 18px; border-radius: 999px; border: 1px solid transparent;
  font: 600 14.5px/1 var(--sans); text-decoration: none; white-space: nowrap;
  transition: background .25s var(--curva), color .25s, border-color .25s;
}
.botao-grande { padding: 15px 24px; font-size: 15.5px; }
.botao-ouro { background: var(--ouro); color: #1b1606; }
.botao-ouro:hover { background: var(--ouro-claro); }
.botao-linha { border-color: var(--fio-forte); color: var(--texto); }
.botao-linha:hover { border-color: var(--texto-2); background: rgba(255, 255, 255, .04); }
.botao-fantasma { color: var(--texto-2); padding-inline: 12px; }
.botao-fantasma:hover { color: var(--texto); }
/* A seta é desenhada: o "→" não existe no subconjunto latino das fontes. */
.seta {
  display: inline-block; width: .5em; height: .5em; margin-left: -2px;
  border: solid currentColor; border-width: 1.5px 1.5px 0 0; transform: rotate(45deg);
  transition: transform .25s var(--curva);
}
.botao-linha:hover .seta { transform: translateX(3px) rotate(45deg); }

/* ------------------------------------------------------------ topo */
.topo {
  position: fixed; inset: 0 0 auto; z-index: 20;
  transition: background .35s, border-color .35s;
  border-bottom: 1px solid transparent;
}
.topo.rolado {
  background: rgba(5, 15, 28, .82);
  backdrop-filter: blur(14px) saturate(140%);
  -webkit-backdrop-filter: blur(14px) saturate(140%);
  border-color: var(--fio);
}
.topo-faixa {
  width: min(var(--largura), calc(100% - 48px)); margin: 0 auto; height: 72px;
  display: flex; align-items: center; justify-content: space-between; gap: 24px;
}
.topo-marca { text-decoration: none; font-size: 22px; color: #fff; }
.topo-nav { display: flex; gap: 30px; }
.topo-nav a {
  position: relative; color: var(--texto-2); text-decoration: none; font-size: 14.5px;
  transition: color .2s;
}
.topo-nav a::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: -6px; height: 1px;
  background: var(--ouro); transform: scaleX(0); transform-origin: left;
  transition: transform .3s var(--curva);
}
.topo-nav a:hover { color: var(--texto); }
.topo-nav a:hover::after { transform: scaleX(1); }
.topo-acoes { display: flex; align-items: center; gap: 6px; }

/* ------------------------------------------------------------ abertura */
.abertura {
  position: relative; padding: 132px 0 0; overflow: hidden;
  background:
    radial-gradient(900px 520px at 78% 18%, rgba(20, 71, 126, .4), transparent 70%),
    var(--fundo);
}
/* A pauta da planilha fiscal, a mesma do painel de entrada, esmaecendo. */
.pauta {
  position: absolute; inset: 0; pointer-events: none; opacity: .5;
  background-image:
    repeating-linear-gradient(0deg, rgba(150, 180, 215, .06) 0 1px, transparent 1px 36px),
    repeating-linear-gradient(90deg, rgba(150, 180, 215, .035) 0 1px, transparent 1px 144px);
  mask-image: linear-gradient(180deg, #000 0%, rgba(0, 0, 0, .55) 55%, transparent 100%);
  -webkit-mask-image: linear-gradient(180deg, #000 0%, rgba(0, 0, 0, .55) 55%, transparent 100%);
}
.abertura-grade {
  position: relative; display: grid; grid-template-columns: minmax(0, 1.08fr) minmax(0, .92fr);
  gap: 64px; align-items: center;
}
.abertura h1 {
  margin-top: 22px; font-size: clamp(42px, 5.6vw, 76px); font-weight: 600;
  letter-spacing: -.035em; line-height: 1.02;
}
.abertura h1 em { display: block; font-size: 1.04em; line-height: 1.05; margin-top: 4px; }
.abertura-sub { margin-top: 26px; max-width: 54ch; color: var(--texto-2); font-size: 18px; line-height: 1.62; }
.abertura-acoes { margin-top: 34px; display: flex; flex-wrap: wrap; gap: 12px; }
.abertura-nota { margin-top: 26px; color: var(--texto-3); font-size: 13px; }
/* A entrada do título é só deslocamento: o texto nunca nasce invisível, então
   a primeira pintura (LCP) não espera o JavaScript. */
.abertura-texto > * { animation: subir .8s var(--curva) both; }
.abertura-texto > :nth-child(2) { animation-delay: .05s; }
.abertura-texto > :nth-child(3) { animation-delay: .1s; }
.abertura-texto > :nth-child(4) { animation-delay: .15s; }
.abertura-texto > :nth-child(5) { animation-delay: .2s; }
@keyframes subir { from { transform: translateY(14px); } }

/* O cartão do cálculo: um extrato, não uma janela de aplicativo. */
.calculo {
  margin: 0; position: relative; border-radius: 20px;
  background: linear-gradient(180deg, rgba(16, 40, 67, .94), rgba(9, 26, 45, .97));
  border: 1px solid var(--fio-forte);
  box-shadow: 0 40px 80px -34px rgba(0, 0, 0, .7), 0 1px 0 rgba(255, 255, 255, .05) inset;
}
.calculo-barra {
  display: flex; align-items: center; gap: 12px; padding: 16px 22px;
  border-bottom: 1px solid var(--fio); font-size: 13.5px;
}
.calculo-barra strong { font-weight: 600; color: var(--texto); }
.calculo-barra .rota { color: var(--texto-3); font-weight: 400; }
/* O carimbo de estimativa (trava 3): moldura dupla e leve inclinação. */
.selo-estimativa {
  margin-left: auto; flex: none; color: var(--alerta); background: transparent;
  font: 700 10.5px/1 var(--mono); font-style: normal; letter-spacing: .16em; text-transform: uppercase;
  padding: 7px 10px; border-radius: 3px; border: 1.5px solid rgba(229, 165, 75, .7);
  box-shadow: inset 0 0 0 2px var(--superficie), inset 0 0 0 3px rgba(229, 165, 75, .35);
  transform: rotate(-2.5deg);
}
.selo-pequeno { margin-left: 0; font-size: 9.5px; padding: 5px 8px; vertical-align: 1px; }
.calculo-corpo { padding: 6px 22px 20px; }
.linha-calc {
  display: flex; align-items: baseline; justify-content: space-between; gap: 18px;
  padding: 14px 0; border-bottom: 1px dashed var(--fio);
  transition: opacity .6s var(--curva);
}
.linha-calc span { font-size: 15px; color: var(--texto); }
.linha-calc small { display: block; margin-top: 3px; font-size: 12.5px; color: var(--texto-3); }
.linha-calc b { font: 600 20px/1 var(--sans); font-variant-numeric: tabular-nums; letter-spacing: -.01em; }
.linha-calc b::before { content: "R$ "; font-size: .66em; font-weight: 500; color: var(--texto-3); }
.linha-calc.total { border-bottom: 0; padding-top: 18px; }
.linha-calc.total span { font-weight: 600; }
.linha-calc.total b { font-size: 34px; color: var(--ouro-claro); }
.conferencia {
  display: flex; align-items: center; gap: 10px; margin-top: 4px; padding: 11px 13px;
  border-radius: 12px; background: rgba(76, 196, 147, .08); border: 1px solid rgba(76, 196, 147, .25);
  color: #bfe9d7; font-size: 13px; font-variant-numeric: tabular-nums;
  transition: opacity .6s var(--curva), transform .6s var(--curva);
}
.ok-marca { flex: none; width: 18px; height: 18px; border-radius: 50%; background: var(--ok); position: relative; }
.ok-marca::after {
  content: ""; position: absolute; left: 6px; top: 3px; width: 5px; height: 9px;
  border: solid #04241a; border-width: 0 2px 2px 0; transform: rotate(45deg);
}
/* A memória como razão: o dado à esquerda, a origem dele à direita. */
.memoria { margin: 14px 0 0; border-top: 1px solid var(--fio); transition: opacity .8s var(--curva) .15s; }
.memoria div { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 9px 0; border-bottom: 1px dashed var(--fio); }
.memoria div:last-child { border-bottom: 0; }
.memoria dt { font-size: 12.5px; color: var(--texto-2); }
.memoria dd { margin: 0; }
.calculo figcaption { padding: 14px 22px 18px; border-top: 1px solid var(--fio); font-size: 12.5px; color: var(--texto-3); line-height: 1.5; }

/* Os estados apagados só existem com JavaScript: sem ele, tudo fica aceso. */
.js .linha-calc { opacity: .25; }
.js .linha-calc.acesa { opacity: 1; }
.js .conferencia { opacity: 0; transform: translateY(6px); }
.js .conferencia.acesa { opacity: 1; transform: none; }
.js .memoria { opacity: 0; }
.js .memoria.acesa { opacity: 1; }

/* As etiquetas de origem de cada dado, as mesmas da memória de cálculo. */
.origem { display: inline-block; font-family: var(--mono); font-size: 11.5px; padding: 4px 8px; border-radius: 7px; white-space: nowrap; }
.o-xml { color: #bfe9d7; background: rgba(76, 196, 147, .1); }
.o-usuario { color: var(--azul); background: rgba(127, 169, 220, .1); }
.o-param { color: var(--ouro-claro); background: rgba(216, 184, 80, .1); }

/* A ficha técnica: o artigo de cada regra que o motor aplica. */
.ficha-tecnica-faixa { position: relative; margin-top: 76px; border-block: 1px solid var(--fio); background: rgba(5, 15, 28, .55); }
.ficha-tecnica { margin: 0 auto; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); }
.ficha-tecnica div { padding: 20px 24px 22px; border-left: 1px solid var(--fio); }
.ficha-tecnica div:first-child { border-left: 0; padding-left: 0; }
.ficha-tecnica dt { font: 500 12px/1.2 var(--mono); color: var(--ouro); }
.ficha-tecnica dd { margin: 6px 0 0; font-size: 14px; color: var(--texto-2); line-height: 1.45; }

/* ------------------------------------------------------------ seções */
section { position: relative; }
.cabeca-secao { max-width: 760px; }
.cabeca-secao h2, .principio h2, .acesso h2 {
  margin-top: 18px; font-size: clamp(32px, 4vw, 50px); letter-spacing: -.03em; line-height: 1.06;
}

/* produto: a lista rola e o palco fica parado ao lado */
.produto { padding: 128px 0 110px; }
.vitrine-produto {
  margin-top: 56px; display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: 72px; align-items: start;
}
.passos-produto { list-style: none; margin: 0; padding: 0; }
.passo-produto {
  position: relative; padding: 22px 0 22px 28px; border-left: 1px solid var(--fio);
  min-height: 32vh; display: flex; flex-direction: column; justify-content: center;
}
.passo-produto:first-child { justify-content: flex-start; min-height: 26vh; padding-top: 6px; }
.passo-produto::before {
  content: ""; position: absolute; left: -1px; top: 22px; bottom: 22px; width: 2px;
  background: var(--ouro); transform: scaleY(0); transform-origin: top; transition: transform .5s var(--curva);
}
.passo-produto.ativo::before { transform: scaleY(1); }
.passo-rotulo { display: block; margin-bottom: 10px; font: 600 11.5px/1 var(--mono); letter-spacing: .06em; color: var(--texto-3); transition: color .4s var(--curva); }
.passo-produto h3 { font-size: 25px; letter-spacing: -.02em; transition: color .4s var(--curva); }
.passo-produto p { margin-top: 12px; color: var(--texto-2); max-width: 44ch; font-size: 16px; transition: color .4s var(--curva); }
.passo-produto.ativo .passo-rotulo { color: var(--ouro); }
/* Inativo esmaece pela cor (continua legível), e não pela opacidade. */
.js .passo-produto:not(.ativo) h3 { color: var(--texto-2); }
.js .passo-produto:not(.ativo) p { color: var(--texto-3); }

.palco {
  position: sticky; top: calc(50vh - 240px); height: 480px; border-radius: 22px;
  background: linear-gradient(180deg, rgba(16, 40, 67, .72), rgba(8, 24, 41, .92));
  border: 1px solid var(--fio-forte); overflow: hidden;
  box-shadow: 0 50px 90px -40px rgba(0, 0, 0, .75);
}
.tela {
  position: absolute; inset: 0; padding: 28px 30px 24px; z-index: 1;
  display: flex; flex-direction: column;
  opacity: 0; transform: translateY(12px); pointer-events: none;
  transition: opacity .5s var(--curva), transform .5s var(--curva);
}
.tela.ativa { opacity: 1; transform: none; }
.tela-rotulo { font-size: 12px; letter-spacing: .12em; text-transform: uppercase; color: var(--texto-3); margin-bottom: 16px; display: flex; flex-wrap: wrap; align-items: center; gap: 8px 10px; }
.tela-pe { margin-top: auto; padding-top: 14px; border-top: 1px solid var(--fio); color: var(--texto-3); font-size: 13px; line-height: 1.5; }

.xml-linhas div {
  display: grid; grid-template-columns: 150px 1fr auto; gap: 14px; align-items: center;
  padding: 11px 0; border-bottom: 1px solid var(--fio); font-size: 14.5px; font-variant-numeric: tabular-nums;
}
.xml-linhas div:last-child { border-bottom: 0; }
.xml-linhas code { color: var(--azul); }
.xml-linhas i { font-style: normal; font-size: 12.5px; color: var(--texto-3); }
.xml-linhas i::before { content: "→ "; font-family: var(--mono); }
.xml-linhas .credito i { color: var(--ok); }
.tela.ativa .xml-linhas div { animation: entrar-linha .5s var(--curva) both; }
.tela.ativa .xml-linhas div:nth-child(2) { animation-delay: .07s; }
.tela.ativa .xml-linhas div:nth-child(3) { animation-delay: .14s; }
.tela.ativa .xml-linhas div:nth-child(4) { animation-delay: .21s; }
.tela.ativa .xml-linhas div:nth-child(5) { animation-delay: .28s; }
.tela.ativa .xml-linhas div:nth-child(6) { animation-delay: .35s; }
@keyframes entrar-linha { from { opacity: 0; transform: translateX(-8px); } to { opacity: 1; transform: none; } }

.ficha { padding: 16px 18px; border-radius: 14px; background: rgba(255, 255, 255, .035); border: 1px solid var(--fio); }
.ficha + .ficha { margin-top: 12px; }
.ficha-cabeca { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.ficha-cabeca code { font-size: 17px; color: var(--texto); letter-spacing: .02em; }
.ficha p { margin-top: 8px; color: var(--texto-2); font-size: 13.5px; line-height: 1.5; }
.ficha dl { margin: 10px 0 0; display: flex; flex-wrap: wrap; gap: 6px 26px; }
.ficha dt { font-size: 11px; color: var(--texto-3); text-transform: uppercase; letter-spacing: .08em; }
.ficha dd { margin: 3px 0 0; font-size: 13.5px; }
.etiqueta { font-size: 12px; font-weight: 600; padding: 5px 10px; border-radius: 999px; white-space: nowrap; }
.etiqueta-zero { color: #bfe9d7; background: rgba(76, 196, 147, .12); border: 1px solid rgba(76, 196, 147, .3); }
.etiqueta-reducao { color: var(--ouro-claro); background: rgba(216, 184, 80, .1); border: 1px solid rgba(216, 184, 80, .32); }
.tela.ativa .ficha-segunda { animation: entrar-linha .5s var(--curva) .15s both; }

.tela-fornecedores table { width: 100%; border-collapse: collapse; font-size: 14.5px; }
.tela-fornecedores th { text-align: left; font-weight: 500; font-size: 12px; color: var(--texto-3); padding: 0 0 8px; }
.tela-fornecedores td { padding: 11px 0; border-top: 1px solid var(--fio); vertical-align: top; }
.tela-fornecedores td small { display: block; color: var(--texto-3); font-size: 12px; margin-top: 2px; }
.nivel { display: inline-block; width: 34px; height: 6px; border-radius: 999px; margin-right: 10px; vertical-align: middle; background: rgba(255, 255, 255, .08); position: relative; overflow: hidden; }
.nivel::after { content: ""; position: absolute; inset: 0; border-radius: inherit; transform-origin: left; transform: scaleX(var(--n, 1)); transition: transform .8s var(--curva) .2s; }
.js .tela:not(.ativa) .nivel::after { transform: scaleX(0); }
.nivel-cheio::after { background: var(--ok); --n: 1; }
.nivel-parcial::after { background: var(--ouro); --n: .45; }
.nivel-nenhum::after { background: var(--alerta); --n: .12; }

.barras { height: 236px; display: flex; align-items: flex-end; gap: 14px; }
.barra { flex: 1; height: 100%; display: flex; flex-direction: column-reverse; position: relative; padding-bottom: 24px; }
.barra small { position: absolute; bottom: 0; left: 0; right: 0; text-align: center; font-size: 11.5px; color: var(--texto-3); }
.seg { display: block; border-radius: 4px; transform-origin: bottom; transition: transform .9s var(--curva); }
.js .tela:not(.ativa) .seg { transform: scaleY(0); }
.barra .seg-antigo { height: calc(var(--antigo) * 1.78px); background: rgba(127, 169, 220, .32); }
.barra .seg-cbs { height: calc(var(--cbs) * 1.78px); background: var(--pinho-claro); margin-bottom: 2px; }
.barra .seg-ibs { height: calc(var(--ibs) * 1.78px); background: var(--ouro); margin-bottom: 2px; }
.tela.ativa .barra:nth-child(2) .seg { transition-delay: .05s; }
.tela.ativa .barra:nth-child(3) .seg { transition-delay: .1s; }
.tela.ativa .barra:nth-child(4) .seg { transition-delay: .15s; }
.tela.ativa .barra:nth-child(5) .seg { transition-delay: .2s; }
.tela.ativa .barra:nth-child(6) .seg { transition-delay: .25s; }
.tela.ativa .barra:nth-child(7) .seg { transition-delay: .3s; }
.tela.ativa .barra:nth-child(8) .seg { transition-delay: .35s; }
.legenda { list-style: none; margin: 14px 0 0; padding: 0; display: flex; gap: 20px; font-size: 12.5px; color: var(--texto-2); flex-wrap: wrap; }
.legenda span { display: inline-block; width: 10px; height: 10px; border-radius: 3px; margin-right: 7px; vertical-align: -1px; }
.legenda .seg-antigo { background: rgba(127, 169, 220, .32); }
.legenda .seg-cbs { background: var(--pinho-claro); }
.legenda .seg-ibs { background: var(--ouro); }

.bolha { max-width: 90%; padding: 13px 15px; border-radius: 16px; font-size: 14px; line-height: 1.55; }
.bolha-pergunta { margin-left: auto; background: var(--pinho); border-bottom-right-radius: 5px; }
.bolha-resposta { margin-top: 12px; background: rgba(255, 255, 255, .045); border: 1px solid var(--fio); border-bottom-left-radius: 5px; color: var(--texto-2); }
.bolha-resposta p + p { margin-top: 8px; }
.tela.ativa .bolha-resposta { animation: entrar-linha .5s var(--curva) .25s both; }
.classe { display: inline-block; margin-right: 8px; font: 600 10.5px/1 var(--mono); letter-spacing: .05em; padding: 4px 7px; border-radius: 5px; text-transform: uppercase; vertical-align: 1px; }
.classe-vigente { color: #bfe9d7; background: rgba(76, 196, 147, .12); }
.classe-projeto { color: #f4d29f; background: rgba(229, 165, 75, .12); }
.classe-interpretacao { color: #c9d6f2; background: rgba(120, 150, 220, .14); }
.tela-ia .fontes { margin-top: 10px; font-size: 12px; color: var(--texto-3); }
.tela-ia .compositor { margin-top: auto; display: flex; align-items: center; justify-content: space-between; padding: 12px 14px; border-radius: 12px; border: 1px solid var(--fio-forte); color: var(--texto-3); font-size: 13.5px; }
.tela-ia .compositor kbd { font-weight: 600; color: var(--texto-2); padding: 5px 7px; border: 1px solid var(--fio); border-radius: 6px; }

/* princípio */
.principio {
  padding: 120px 0; background:
    radial-gradient(800px 380px at 50% 0%, rgba(20, 71, 126, .28), transparent 70%), var(--fundo-2);
  border-block: 1px solid var(--fio);
}
.principio h2 em { white-space: nowrap; }
.principio-colunas { margin-top: 56px; display: grid; grid-template-columns: 1fr 1fr; gap: 1px; background: var(--fio); border: 1px solid var(--fio); border-radius: var(--raio); overflow: hidden; }
.principio-colunas > div { padding: 32px 34px 34px; background: var(--fundo-2); }
.principio-colunas h3 { font-size: 21px; }
.coluna-quem { margin-top: 6px; font-size: 13.5px; color: var(--texto-3); }
.principio-colunas ul { list-style: none; margin: 20px 0 0; padding: 0; }
.principio-colunas li { padding: 11px 0; border-top: 1px solid var(--fio); color: var(--texto-2); display: flex; align-items: center; justify-content: space-between; gap: 14px; }
.coluna-norma { background: linear-gradient(180deg, rgba(216, 184, 80, .045), transparent 60%), var(--fundo-2) !important; }

/* método: linhas editoriais, com o numeral na margem */
.metodo { padding: 128px 0 120px; }
.etapas { list-style: none; margin: 56px 0 0; padding: 0; border-top: 1px solid var(--fio-forte); }
.etapa {
  display: grid; grid-template-columns: 88px minmax(0, 1fr) minmax(0, 1fr); grid-template-rows: auto 1fr;
  column-gap: 48px; align-content: start; padding: 34px 0; border-bottom: 1px solid var(--fio);
}
.etapa-num { grid-row: 1 / span 2; font-family: var(--serif); font-style: italic; font-size: 52px; color: var(--ouro); line-height: .9; }
.etapa h3 { grid-column: 2; margin-top: 2px; font-size: 23px; }
.etapa p { grid-column: 2; align-self: start; margin-top: 10px; color: var(--texto-2); font-size: 15.5px; max-width: 46ch; }
.etapa-visual { grid-column: 3; grid-row: 1 / span 2; padding: 2px 0 2px 32px; border-left: 1px solid var(--fio); }
.etiquetas { display: flex; flex-wrap: wrap; gap: 7px; align-content: flex-start; }
.etiquetas span { font-family: var(--mono); font-size: 11.5px; color: var(--azul); padding: 5px 9px; border-radius: 7px; background: rgba(127, 169, 220, .09); border: 1px solid rgba(127, 169, 220, .2); }
.vigencias div { display: flex; justify-content: space-between; gap: 14px; padding: 8px 0; border-bottom: 1px solid var(--fio); font-size: 13.5px; }
.vigencias div:first-child { padding-top: 0; }
.vigencias div:last-child { border-bottom: 0; }
.vigencias span { color: var(--texto-3); font-variant-numeric: tabular-nums; white-space: nowrap; }
.vigencias b { font-weight: 500; text-align: right; }
.origens { display: flex; flex-direction: column; gap: 8px; align-items: flex-start; }

.travas { margin-top: 56px; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 48px; }
.trava { padding-top: 20px; border-top: 2px solid var(--ouro); }
.trava h3 { font-size: 17px; letter-spacing: -.01em; }
.trava p { margin-top: 8px; font-size: 14.5px; color: var(--texto-2); }

/* transição */
.transicao { padding: 120px 0; background: var(--fundo-2); border-block: 1px solid var(--fio); }
.linha-tempo {
  /* --progresso vem do servidor no style do <ol>: sem JS a linha já para em hoje. */
  --progresso: 0; list-style: none; margin: 72px 0 0; padding: 34px 0 0; position: relative;
  display: grid; grid-template-columns: repeat(var(--marcos, 6), minmax(0, 1fr)); gap: 24px;
}
.linha-tempo::before, .linha-tempo::after { content: ""; position: absolute; top: 6px; left: 0; right: 0; height: 2px; border-radius: 2px; }
.linha-tempo::before { background: var(--fio-forte); }
/* A linha cresce por transform (sem refazer layout) e nunca passa de hoje. */
.linha-tempo::after {
  background: linear-gradient(90deg, var(--ouro), var(--ouro-claro));
  transform: scaleX(var(--progresso)); transform-origin: left; transition: transform .25s linear;
}
.marco-tempo { position: relative; }
.marco-tempo::before {
  content: ""; position: absolute; top: -34px; left: 0; width: 14px; height: 14px; border-radius: 50%;
  background: var(--fundo-2); border: 2px solid var(--texto-3); z-index: 1;
}
.marco-tempo.passado::before { background: var(--ouro); border-color: var(--ouro); }
.marco-tempo.agora::before { background: var(--ouro); border-color: var(--ouro); animation: pulsar 2.4s ease-out infinite; }
@keyframes pulsar { 0% { box-shadow: 0 0 0 0 rgba(216, 184, 80, .45); } 70%, 100% { box-shadow: 0 0 0 12px rgba(216, 184, 80, 0); } }
.marco-tempo .ano { display: block; font-size: 19px; font-weight: 600; letter-spacing: -.02em; }
.marco-tempo.agora .ano { color: var(--ouro); }
.marco-tempo .hoje { display: inline-block; margin-top: 6px; font: 600 10.5px/1 var(--mono); letter-spacing: .1em; text-transform: uppercase; color: var(--ouro); }
.marco-tempo p { margin-top: 10px; font-size: 14px; color: var(--texto-2); }
.marco-tempo:not(.passado):not(.agora) .ano { color: var(--texto-2); }
.transicao-nota { margin-top: 54px; font-size: 13.5px; color: var(--texto-3); max-width: 72ch; }

/* acesso */
.acesso { padding: 128px 0; }
.acesso-grade { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, .9fr); gap: 80px; align-items: center; }
.acesso-texto > p:not(.sobre-titulo) { margin-top: 22px; font-size: 17.5px; color: var(--texto-2); max-width: 48ch; }
.acesso-acoes { margin-top: 34px; display: flex; flex-wrap: wrap; gap: 12px; }
.acesso-passos { list-style: none; margin: 0; padding: 0; position: relative; }
.acesso-passos::before { content: ""; position: absolute; left: 21px; top: 30px; bottom: 30px; width: 1px; background: linear-gradient(var(--ouro), var(--fio)); }
.acesso-passos li { position: relative; display: flex; gap: 22px; padding: 18px 0; }
.acesso-passos li > span {
  flex: none; width: 43px; height: 43px; border-radius: 50%; display: grid; place-items: center;
  background: var(--fundo); border: 1px solid var(--fio-forte); font: 600 14px/1 var(--mono); color: var(--ouro);
}
.acesso-passos h3 { font-size: 19px; }
.acesso-passos p { margin-top: 5px; color: var(--texto-2); font-size: 15px; }

/* rodapé */
.rodape { position: relative; padding: 80px 0 0; border-top: 1px solid var(--fio); overflow: hidden; background: var(--fundo); }
.rodape-grade { display: grid; grid-template-columns: 1.6fr 1fr 1fr; gap: 48px; }
.rodape-marca .rc-marca { font-size: 22px; color: #fff; }
.rodape-marca p { margin-top: 16px; max-width: 46ch; font-size: 14px; color: var(--texto-3); }
.rodape nav { display: flex; flex-direction: column; gap: 10px; align-items: flex-start; }
.rodape nav h2 { font-size: 12px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--texto-3); margin-bottom: 6px; }
.rodape nav a, .link-botao { color: var(--texto-2); text-decoration: none; font: 400 14.5px/1.4 var(--sans); background: none; border: 0; padding: 0; }
.rodape nav a:hover, .link-botao:hover { color: var(--texto); }
.rodape-base { margin-top: 64px; padding: 22px 0; border-top: 1px solid var(--fio); display: flex; justify-content: space-between; gap: 18px; flex-wrap: wrap; font-size: 12.5px; color: var(--texto-3); }
/* Só preenchimento em degradê: contorno numa fonte variável mostra os traços
   internos sobrepostos de cada letra. */
.rodape-assinatura {
  font-weight: 700; font-size: clamp(80px, 18.2vw, 262px); letter-spacing: -.045em; line-height: .78;
  text-align: center; margin-top: 12px; user-select: none; color: transparent;
  background: linear-gradient(180deg, rgba(150, 180, 215, .11), rgba(150, 180, 215, 0) 78%);
  -webkit-background-clip: text; background-clip: text;
}

/* ------------------------------------------------------------ entrada por rolagem
 * Só nos cabeçalhos de seção e no cartão: o movimento com significado (o
 * cálculo, as barras, a linha do tempo) é que deve chamar atenção. */
.js .revelar { opacity: 0; transform: translateY(12px); transition: opacity .7s var(--curva), transform .7s var(--curva); transition-delay: var(--atraso, 0s); }
.js .revelar.visivel { opacity: 1; transform: none; }

/* ------------------------------------------------------------ cookies e políticas
 * O banner e o diálogo das políticas são os mesmos da plataforma
 * (privacidade.css), que leem as cores do aplicativo. Aqui elas viram a
 * paleta escura da vitrine: o botão principal fica dourado com texto escuro. */
.vitrine .cookie-banner,
.vitrine .politica-dialog {
  --branco: #0c2138;
  --tinta: #e9eef5;
  --pinho: #d8b850;
  --papel: #081829;
  --cinza: #a3b4c8;
  --fio: rgba(150, 180, 215, .22);
  --tijolo: #f0a39a; --tijolo-fundo: rgba(240, 163, 154, .1); --tijolo-fio: rgba(240, 163, 154, .35);
  --ambar: #e5a54b; --ambar-fundo: rgba(229, 165, 75, .1); --ambar-fio: rgba(229, 165, 75, .35);
  font-family: var(--sans);
  box-shadow: 0 30px 70px -20px rgba(0, 0, 0, .8);
}
.vitrine .cookie-banner h2 { color: var(--texto); }
.vitrine .cookie-acoes button { border-radius: 999px; font-family: var(--sans); font-weight: 600; font-size: 14px; }
.vitrine .cookie-acoes .cookie-recusar { background: transparent; color: var(--texto); border-color: rgba(150, 180, 215, .35); }
.vitrine .cookie-acoes .cookie-recusar:hover { background: rgba(255, 255, 255, .05); filter: none; }

/* ------------------------------------------------------------ telas menores */
@media (max-width: 1080px) {
  .topo-nav { display: none; }
  .abertura-grade { grid-template-columns: 1fr; gap: 56px; }
  .calculo { max-width: 600px; }
  .ficha-tecnica { grid-template-columns: 1fr 1fr; }
  .ficha-tecnica div:nth-child(3) { border-left: 0; padding-left: 0; }
  .ficha-tecnica div:nth-child(n+3) { border-top: 1px solid var(--fio); }
  .vitrine-produto { grid-template-columns: 1fr; gap: 0; }
  .palco { display: none; }
  .passo-produto, .passo-produto:first-child { min-height: 0; padding: 26px 0 30px 22px; justify-content: flex-start; }
  .passo-produto::before { transform: scaleY(1); top: 26px; bottom: auto; height: 28px; }
  .js .passo-produto:not(.ativo) h3 { color: var(--texto); }
  .js .passo-produto:not(.ativo) p { color: var(--texto-2); }
  .passo-produto .passo-rotulo { color: var(--ouro); }
  /* No celular as maquetes descem para dentro de cada passo (vitrine.js). */
  .passo-produto .tela {
    position: relative; inset: auto; opacity: 1; transform: none; pointer-events: auto;
    margin-top: 18px; padding: 18px 16px; border-radius: 14px; border: 1px solid var(--fio-forte);
    background: linear-gradient(180deg, rgba(16, 40, 67, .7), rgba(8, 24, 41, .9));
  }
  .passo-produto .tela .tela-pe { margin-top: 14px; }
  .passo-produto .xml-linhas div { grid-template-columns: minmax(0, 1fr) auto; gap: 2px 10px; }
  .passo-produto .xml-linhas i { grid-column: 1 / -1; }
  .passo-produto .barras { height: 190px; gap: 6px; }
  .passo-produto .barra .seg-antigo { height: calc(var(--antigo) * 1.4px); }
  .passo-produto .barra .seg-cbs { height: calc(var(--cbs) * 1.4px); }
  .passo-produto .barra .seg-ibs { height: calc(var(--ibs) * 1.4px); }
  .passo-produto .tela-ia .compositor { margin-top: 14px; }
  .js .passo-produto .tela .seg, .js .passo-produto .tela .nivel::after { transform: none; }
  .js .passo-produto .tela .nivel::after { transform: scaleX(var(--n, 1)); }
  .etapa { grid-template-columns: 56px minmax(0, 1fr); }
  .etapa-num { font-size: 36px; }
  .etapa-visual { grid-column: 2; grid-row: auto; margin-top: 18px; padding: 0; border-left: 0; }
  .travas { grid-template-columns: 1fr; gap: 28px; }
  .linha-tempo { grid-template-columns: 1fr; gap: 30px; padding: 0 0 0 34px; }
  .linha-tempo::before, .linha-tempo::after { top: 0; bottom: 0; left: 6px; right: auto; width: 2px; height: auto; }
  .linha-tempo::after { transform: scaleY(var(--progresso)); transform-origin: top; }
  .marco-tempo::before { top: 4px; left: -34px; }
  .acesso-grade { grid-template-columns: 1fr; gap: 48px; }
  .rodape-grade { grid-template-columns: 1fr 1fr; }
  .rodape-marca { grid-column: 1 / -1; }
}
@media (max-width: 640px) {
  .faixa, .topo-faixa { width: calc(100% - 32px); }
  .topo-faixa { height: 64px; gap: 10px; }
  .topo-marca { font-size: 19px; }
  .topo-acoes { gap: 2px; }
  .topo-acoes .botao-ouro { padding: 9px 13px; font-size: 13.5px; }
  .botao-fantasma { padding-inline: 8px; font-size: 13.5px; }
  .abertura { padding-top: 108px; }
  .abertura-sub { font-size: 16.5px; }
  .abertura-acoes .botao { width: 100%; }
  .calculo-barra { padding: 14px 16px; }
  .calculo-corpo { padding: 4px 16px 16px; }
  .calculo figcaption { padding: 12px 16px 16px; }
  .linha-calc.total b { font-size: 28px; }
  .memoria div { flex-wrap: wrap; }
  .ficha-tecnica-faixa { margin-top: 56px; }
  .ficha-tecnica div { padding: 16px 14px 18px; }
  .ficha-tecnica div:nth-child(odd) { padding-left: 0; }
  .produto, .metodo, .acesso { padding: 92px 0 84px; }
  .principio, .transicao { padding: 88px 0; }
  .principio h2 em { white-space: normal; }
  .principio-colunas { grid-template-columns: 1fr; }
  .principio-colunas > div { padding: 24px 20px 26px; }
  .principio-colunas li { flex-wrap: wrap; gap: 6px 12px; }
  .acesso-acoes .botao { width: 100%; }
  .rodape-grade { grid-template-columns: 1fr; gap: 32px; }
}
@media (max-width: 380px) {
  .topo-marca { font-size: 17px; }
  .topo-acoes .botao { padding: 9px 8px; font-size: 12px; }
  .topo-acoes .botao-fantasma { display: inline-flex; }
}

/* Quem pediu menos movimento recebe a página parada, com tudo já visível. */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation: none !important; transition: none !important; }
  .js .revelar { opacity: 1; transform: none; }
  .js .linha-calc, .js .conferencia, .js .memoria { opacity: 1; transform: none; }
  .js .tela:not(.ativa) .seg { transform: none; }
  .nivel::after { transform: scaleX(var(--n, 1)) !important; }
}