/* Precifica Contábil · Virtual Hub · direção "visor" (2026-11-09)
   Navy e branco do manual, Poppins. Vermelho, âmbar e verde só para estado real do preço. */
@font-face { font-family: "Poppins"; font-weight: 400; font-display: swap; src: url("../fontes/poppins-latin-400-normal.woff2") format("woff2"); }
@font-face { font-family: "Poppins"; font-weight: 500; font-display: swap; src: url("../fontes/poppins-latin-500-normal.woff2") format("woff2"); }
@font-face { font-family: "Poppins"; font-weight: 600; font-display: swap; src: url("../fontes/poppins-latin-600-normal.woff2") format("woff2"); }
@font-face { font-family: "Poppins"; font-weight: 700; font-display: swap; src: url("../fontes/poppins-latin-700-normal.woff2") format("woff2"); }

:root {
  --navy: #003B95;
  --navy-forte: #002E75;
  --noite: #0A2346;          /* texto navy escuro do manual; também a lateral */
  --tinta: #0A2346;
  --tinta-2: #44556F;
  --tinta-3: #6E7D94;
  --fundo: #F8FAFD;
  --fundo-alt: #EEF3FA;
  --branco: #FFFFFF;
  --linha: #DCE3EE;
  --linha-forte: #C3CEDF;
  --no-navy: #A9BEE0;        /* texto secundário sobre navy */
  --no-navy-2: #C9D6EA;
  --ok: #12704A;      --ok-fundo: #E6F4EC;  --ok-barra: #6CC59A;
  --atencao: #8A5A00; --atencao-fundo: #FDF3DC; --atencao-barra: #EBC067;
  --erro: #B42318;    --erro-fundo: #FDECEA; --erro-barra: #E5807A;
  --raio: 8px;
  --raio-g: 14px;
  --lateral: 240px;
  --foco: 0 0 0 3px rgba(0, 59, 149, .28);
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; font-family: "Poppins", system-ui, sans-serif; font-size: 14px; line-height: 1.55; color: var(--tinta); background: var(--fundo); }
a { color: var(--navy); text-decoration: none; }
a:hover { text-decoration: underline; text-underline-offset: 3px; }
h1, h2, h3 { margin: 0; font-weight: 600; letter-spacing: -.015em; }
h1 { font-size: 28px; line-height: 1.2; }
h2 { font-size: 18px; line-height: 1.35; }
h3 { font-size: 15px; }
p { margin: 0; }
[hidden] { display: none !important; }
.num { font-variant-numeric: tabular-nums; white-space: nowrap; }
.discreto { color: var(--tinta-3); }
.secundario { color: var(--tinta-2); }
.pequeno { font-size: 12.5px; }
.oculto { display: none !important; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
code, .mono { font-family: ui-monospace, "Cascadia Mono", Consolas, monospace; font-size: 12.5px; }
:focus-visible { outline: none; box-shadow: var(--foco); }

/* ================================================================ casca */
.casca { display: grid; grid-template-columns: var(--lateral) minmax(0, 1fr); min-height: 100vh; }
.lateral { position: sticky; top: 0; height: 100vh; display: flex; flex-direction: column; background: var(--noite); color: #B9C7DD; padding: 24px 14px 18px; overflow-y: auto; }
.produto { display: block; padding: 0 12px 24px; color: var(--branco); font-weight: 600; font-size: 18px; line-height: 1.1; letter-spacing: -.01em; }
.produto span { display: block; margin-top: 3px; font-weight: 500; font-size: 10.5px; letter-spacing: .16em; text-transform: uppercase; color: #8FA3C4; }
.produto:hover { text-decoration: none; }
.nav-acao { margin: 0 0 18px; }
.nav-acao .botao { background: var(--branco); color: var(--navy); border-color: var(--branco); font-weight: 600; min-height: 42px; }
.nav-acao .botao:hover { background: #E8EEF8; border-color: #E8EEF8; }
.nav { display: flex; flex-direction: column; gap: 2px; }
.nav a { display: block; padding: 9px 12px; border-radius: var(--raio); color: #B9C7DD; font-weight: 500; }
.nav a:hover { background: rgba(255, 255, 255, .06); color: var(--branco); text-decoration: none; }
.nav a.ativo { background: rgba(255, 255, 255, .1); color: var(--branco); }
.nav .grupo { margin: 20px 12px 6px; font-size: 10.5px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: #6F86AB; }
.lateral-pe { margin-top: auto; padding: 16px 12px 0; border-top: 1px solid rgba(255, 255, 255, .08); font-size: 12.5px; }
.lateral-pe .quem { display: block; color: var(--no-navy-2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lateral-pe form { margin-top: 4px; }
.lateral-pe .link-botao { color: var(--no-navy); }
.assinatura { display: flex; align-items: center; gap: 8px; margin-top: 16px; color: #6F86AB; font-size: 11px; }
.assinatura img { height: 15px; width: auto; opacity: .75; }
.principal { min-width: 0; }
.conteudo { max-width: 1240px; margin: 0 auto; padding: 36px 44px 72px; }
.topo-movel { display: none; }

@media (max-width: 900px) {
  .casca { grid-template-columns: 1fr; }
  .lateral { position: fixed; z-index: 40; left: 0; top: 0; width: 280px; transform: translateX(-100%); transition: transform .2s ease; }
  .menu-aberto .lateral { transform: none; box-shadow: 0 0 0 100vmax rgba(10, 35, 70, .45); }
  .topo-movel { display: flex; align-items: center; justify-content: space-between; position: sticky; top: 0; z-index: 30; padding: 12px 16px; background: var(--noite); }
  .topo-movel .produto { padding: 0; font-size: 16px; }
  .topo-movel .produto span { display: none; }
  .topo-movel .botao { background: transparent; color: var(--branco); border-color: #36507A; }
  .conteudo { padding: 22px 16px 120px; }
  h1 { font-size: 23px; }
}
@media (prefers-reduced-motion: reduce) { * { transition: none !important; animation: none !important; } }

/* ================================================================ cabeçalho de página */
.cabecalho { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px 24px; margin-bottom: 28px; flex-wrap: wrap; }
.cabecalho .sobre, .sobre { font-size: 11.5px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--tinta-3); margin-bottom: 6px; }
.cabecalho p { color: var(--tinta-2); margin-top: 8px; max-width: 660px; }
.acoes { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.migalha { font-size: 13px; color: var(--tinta-3); margin-bottom: 12px; }
.migalha a { color: var(--tinta-2); }

/* ================================================================ botões */
.botao { display: inline-flex; align-items: center; justify-content: center; gap: 6px; min-height: 40px; padding: 0 18px; border: 1px solid var(--linha-forte); border-radius: var(--raio); background: var(--branco); color: var(--tinta); font: 500 14px/1 "Poppins", sans-serif; cursor: pointer; white-space: nowrap; }
.botao:hover { border-color: var(--tinta-3); text-decoration: none; }
.botao.primario { background: var(--navy); border-color: var(--navy); color: var(--branco); font-weight: 600; }
.botao.primario:hover { background: var(--navy-forte); border-color: var(--navy-forte); }
.botao.perigo { color: var(--erro); }
.botao.perigo:hover { border-color: var(--erro); }
.botao.bloco { width: 100%; }
.botao.pequeno { min-height: 34px; padding: 0 13px; font-size: 13px; }
.botao.grande { min-height: 46px; padding: 0 24px; }
.link-botao { background: none; border: 0; padding: 0; font: inherit; color: var(--navy); cursor: pointer; }
.link-botao:hover { text-decoration: underline; text-underline-offset: 3px; }
details.mais { position: relative; }
details.mais summary { list-style: none; }
details.mais summary::-webkit-details-marker { display: none; }
details.mais .menu { position: absolute; right: 0; top: calc(100% + 6px); z-index: 20; min-width: 200px; padding: 6px; background: var(--branco); border: 1px solid var(--linha); border-radius: var(--raio); box-shadow: 0 10px 30px rgba(10, 35, 70, .14); }
details.mais .menu button, details.mais .menu a { display: block; width: 100%; text-align: left; padding: 9px 12px; border: 0; background: none; border-radius: 6px; font: 500 13.5px "Poppins", sans-serif; color: var(--tinta); cursor: pointer; }
details.mais .menu button:hover, details.mais .menu a:hover { background: var(--fundo-alt); text-decoration: none; }

/* ================================================================ avisos e selos */
.avisos { margin-bottom: 22px; display: grid; gap: 8px; }
.aviso { padding: 11px 15px; border-radius: var(--raio); border: 1px solid var(--linha); background: var(--branco); color: var(--tinta-2); }
.aviso.ok { border-color: #BFE3CF; background: var(--ok-fundo); color: var(--ok); }
.aviso.erro { border-color: #F5C2BD; background: var(--erro-fundo); color: var(--erro); }
.aviso.atencao { border-color: #F1D9A6; background: var(--atencao-fundo); color: var(--atencao); }
.aviso.info { border-color: #C9D8F2; background: var(--fundo-alt); color: var(--navy); }
.selo { display: inline-flex; align-items: center; gap: 6px; padding: 3px 10px; border-radius: 999px; font-size: 12px; font-weight: 600; background: var(--fundo-alt); color: var(--tinta-2); white-space: nowrap; }
.selo::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: currentColor; }
.selo.ok { background: var(--ok-fundo); color: var(--ok); }
.selo.atencao { background: var(--atencao-fundo); color: var(--atencao); }
.selo.erro { background: var(--erro-fundo); color: var(--erro); }
.selo.neutro::before { display: none; }

/* ================================================================ seções e grades */
.secao { padding: 26px 0; border-top: 1px solid var(--linha); }
.secao:first-of-type { border-top: 0; padding-top: 0; }
.secao > header { margin-bottom: 16px; }
.secao > header p { color: var(--tinta-2); margin-top: 4px; max-width: 640px; }
.secao > details.dobra:first-child { border-top: 0; padding-top: 0; }
.duas { display: grid; grid-template-columns: minmax(0, 1fr) 400px; gap: 40px; align-items: start; }
.lado { position: sticky; top: 24px; }
@media (max-width: 1120px) { .duas { grid-template-columns: 1fr; } .lado { position: static; } }
.grade { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px 20px; }
.grade.tres { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.grade .largo { grid-column: 1 / -1; }
@media (max-width: 640px) { .grade, .grade.tres { grid-template-columns: 1fr; } }
.superficie { background: var(--branco); border: 1px solid var(--linha); border-radius: var(--raio-g); }
.bloco-lado { padding: 20px 22px; }
.bloco-lado + .bloco-lado { border-top: 1px solid var(--linha); }
.bloco-lado h3 { margin-bottom: 10px; }
.bloco-condicional { margin-top: 16px; }
.form-estreito { max-width: 760px; }

/* ================================================================ passos numerados */
.passo { position: relative; padding: 0 0 30px 46px; }
.passo::before { content: attr(data-n); position: absolute; left: 0; top: 0; width: 28px; height: 28px; border-radius: 50%; background: var(--navy); color: var(--branco); font-weight: 600; font-size: 13px; display: grid; place-items: center; }
.passo::after { content: ""; position: absolute; left: 13.5px; top: 36px; bottom: 8px; width: 1px; background: var(--linha); }
.passo:last-child::after { display: none; }
.passo > h2 { margin: 1px 0 4px; }
.passo > .explica { color: var(--tinta-2); margin-bottom: 14px; }
.passo > h2 + :not(.explica) { margin-top: 12px; }
@media (max-width: 560px) { .passo { padding-left: 0; } .passo > h2 { padding-left: 38px; min-height: 28px; } .passo::before { width: 26px; height: 26px; font-size: 12px; } .passo::after { display: none; } }

/* ================================================================ campos */
.campo label, .rotulo { display: block; font-weight: 500; font-size: 13px; color: var(--tinta); margin-bottom: 6px; }
.campo .ajuda, .ajuda { font-size: 12.5px; color: var(--tinta-3); margin-top: 6px; }
.erro-campo { font-size: 12.5px; color: var(--erro); margin-top: 6px; }
input[type=text], input[type=email], input[type=password], input[type=number], input[type=search], select, textarea {
  width: 100%; min-height: 44px; padding: 9px 14px; border: 1px solid var(--linha-forte); border-radius: var(--raio);
  background: var(--branco); color: var(--tinta); font: 400 14px/1.4 "Poppins", sans-serif; }
select { appearance: none; padding-right: 40px; font-weight: 500; cursor: pointer;
  background: var(--branco) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5l5 5 5-5' fill='none' stroke='%23003B95' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat right 15px center; }
textarea { min-height: 100px; resize: vertical; }
input::placeholder, textarea::placeholder { color: #9AA6B8; }
input:focus, select:focus, textarea:focus { border-color: var(--navy); }
.com-erro input, .com-erro select, .com-erro textarea, .com-erro .afixo { border-color: var(--erro); }
.afixo { display: flex; align-items: stretch; border: 1px solid var(--linha-forte); border-radius: var(--raio); background: var(--branco); overflow: hidden; min-height: 44px; }
.afixo:focus-within { border-color: var(--navy); box-shadow: var(--foco); }
.afixo span { display: flex; align-items: center; padding: 0 12px; background: var(--fundo-alt); color: var(--tinta-2); font-size: 13px; white-space: nowrap; }
.afixo input { border: 0; border-radius: 0; min-width: 0; flex: 1; min-height: 42px; }
.afixo input:focus { box-shadow: none; }
input.valor { text-align: right; font-variant-numeric: tabular-nums; font-weight: 500; }
input[type=checkbox], input[type=radio] { appearance: none; flex: 0 0 auto; width: 20px; height: 20px; margin: 0; border: 1.5px solid var(--linha-forte); background: var(--branco); display: inline-grid; place-content: center; cursor: pointer; }
input[type=checkbox] { border-radius: 6px; }
input[type=radio] { border-radius: 50%; }
input[type=checkbox]:checked { background: var(--navy); border-color: var(--navy); }
input[type=checkbox]:checked::after { content: ""; width: 5px; height: 10px; border-right: 2px solid #fff; border-bottom: 2px solid #fff; transform: rotate(45deg) translate(-1px, -1px); }
input[type=radio]:checked { border: 6px solid var(--navy); }
.opcoes { display: grid; gap: 8px; }
fieldset.opcoes { border: 0; padding: 0; margin: 18px 0 0; min-width: 0; }
.opcao { display: flex; gap: 12px; align-items: flex-start; padding: 13px 15px; border: 1px solid var(--linha); border-radius: 10px; background: var(--branco); cursor: pointer; }
.opcao:hover { border-color: var(--linha-forte); }
.opcao input { margin-top: 2px; }
.opcao.marcada { border-color: var(--navy); box-shadow: inset 0 0 0 1px var(--navy); }
.opcao strong { display: block; font-weight: 500; }
.opcao small { display: block; color: var(--tinta-3); font-size: 12.5px; }
.marcar { display: flex; gap: 10px; align-items: center; font-size: 13.5px; cursor: pointer; }
.segmento { display: inline-flex; flex-wrap: wrap; padding: 4px; gap: 4px; background: var(--fundo-alt); border-radius: 10px; }
.segmento label { position: relative; cursor: pointer; }
.segmento input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.segmento span { display: block; padding: 8px 15px; border-radius: 7px; color: var(--tinta-2); font-weight: 500; font-size: 13.5px; }
.segmento input:checked + span { background: var(--branco); color: var(--navy); box-shadow: 0 1px 2px rgba(10, 35, 70, .14); }
.segmento input:focus-visible + span { box-shadow: var(--foco); }
.arquivo { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.arquivo input[type=file] { position: absolute; width: 1px; height: 1px; opacity: 0; }
.arquivo .nome-arquivo { color: var(--tinta-3); font-size: 13px; }
.logo-previa { height: 44px; width: auto; padding: 5px; border: 1px solid var(--linha); border-radius: 6px; background: var(--branco); }
.rodape-form { display: flex; gap: 10px; justify-content: flex-end; align-items: center; padding-top: 22px; border-top: 1px solid var(--linha); margin-top: 8px; flex-wrap: wrap; }
.busca { display: flex; gap: 8px; margin-bottom: 20px; flex-wrap: wrap; align-items: center; }
.busca input[type=search] { max-width: 360px; padding-left: 38px;
  background: var(--branco) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16'%3E%3Ccircle cx='7' cy='7' r='5' fill='none' stroke='%236E7D94' stroke-width='1.6'/%3E%3Cpath d='M11 11l3.5 3.5' stroke='%236E7D94' stroke-width='1.6' stroke-linecap='round'/%3E%3C/svg%3E") no-repeat 13px center; }
.js .so-sem-js { display: none !important; }
.linha-sim { display: flex; gap: 8px; align-items: stretch; flex-wrap: wrap; }
.linha-sim input { min-width: 0; flex: 1; }
.linha-sim .curto { max-width: 100px; flex: 0 0 100px; }

/* ================================================================ serviços (passo 2) */
.servicos { display: grid; gap: 8px; }
.servico { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 8px 14px; align-items: center; padding: 12px 14px; background: var(--branco); border: 1px solid var(--linha); border-radius: 10px; }
.servico-rotulo { display: flex; gap: 14px; align-items: center; min-width: 0; cursor: pointer; }
.servico > .erro-campo { grid-column: 1 / -1; margin-top: 0; }
.servico:hover { border-color: var(--linha-forte); }
.servico.marcado { border-color: var(--navy); box-shadow: inset 0 0 0 1px var(--navy); }
.servico strong { display: block; font-weight: 500; }
.servico small { display: block; color: var(--tinta-3); font-size: 12.5px; }
.servico .nome-outro { width: 100%; min-height: 36px; padding: 6px 10px; }
.horas { display: flex; align-items: center; height: 38px; border: 1px solid var(--linha-forte); border-radius: var(--raio); overflow: hidden; background: var(--branco); cursor: default; }
.horas button { width: 34px; height: 100%; border: 0; background: var(--fundo-alt); color: var(--navy); font: 600 17px/1 "Poppins", sans-serif; cursor: pointer; }
.horas button:hover { background: #E1E9F5; }
.horas input { width: 56px; min-height: 0; height: 100%; border: 0; padding: 0 4px; text-align: center; font-weight: 600; }
.horas input:focus { box-shadow: none; }
.horas span { padding: 0 10px 0 0; color: var(--tinta-3); font-size: 12px; }
.servico:not(.marcado) .horas { opacity: .5; }
.servico:not(.marcado) .horas:hover, .servico:not(.marcado) .horas:focus-within { opacity: 1; }
@media (max-width: 560px) { .servico small { display: none; } .horas button { width: 30px; } .horas input { width: 44px; } }
.apoio { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 12px; padding: 0; }
.apoio > div { background: var(--fundo-alt); border-radius: 999px; padding: 4px 12px; font-size: 12.5px; color: var(--tinta-2); display: flex; gap: 5px; }
.apoio dt { color: var(--tinta-3); }
.apoio dd { margin: 0; font-weight: 600; color: var(--tinta); }

/* ================================================================ o visor */
.visor { background: var(--navy); color: var(--branco); border-radius: var(--raio-g); overflow: hidden; }
.visor .topo-visor { padding: 22px 24px 6px; }
.visor .rot { display: flex; justify-content: space-between; align-items: center; gap: 10px; font-size: 12.5px; color: var(--no-navy); }
.visor .grande { font-size: 42px; font-weight: 600; letter-spacing: -.02em; line-height: 1.1; margin-top: 6px; font-variant-numeric: tabular-nums; }
.visor .grande small { font-size: 15px; font-weight: 400; color: var(--no-navy); margin-left: 4px; letter-spacing: 0; }
.visor .modo { margin-top: 4px; font-size: 12.5px; color: var(--no-navy-2); }
.visor .selo { background: rgba(255, 255, 255, .92); }
.visor .selo.ok { background: #D7F0E2; color: #0E5C3C; }
.visor .selo.atencao { background: #FCEBC4; color: #6E4700; }
.visor .selo.erro { background: #FBD9D5; color: #8F1B12; }
.regua { position: relative; padding: 26px 24px 4px; }
.regua .trilho { position: relative; height: 14px; }
.regua .trilho svg { display: block; width: 100%; height: 14px; border-radius: 7px; }
.regua.arrastavel .trilho { cursor: ew-resize; touch-action: none; }
.regua .marco { position: absolute; top: -7px; width: 2px; height: 28px; margin-left: -1px; background: rgba(255, 255, 255, .92); border-radius: 1px; }
.regua .pino { position: absolute; top: 50%; width: 28px; height: 28px; margin: -14px 0 0 -14px; border-radius: 50%; background: var(--branco); box-shadow: 0 0 0 5px rgba(255, 255, 255, .22), 0 2px 8px rgba(0, 0, 0, .35); }
.regua .pino::after { content: ""; position: absolute; inset: 9px; border-radius: 50%; background: var(--navy); }
.regua:not(.posicionada) .marco, .regua:not(.posicionada) .pino, .regua:not(.posicionada) .legenda span { visibility: hidden; }
.regua .legenda { position: relative; height: 42px; margin-top: 10px; font-size: 11.5px; color: var(--no-navy); }
.regua .legenda span { position: absolute; transform: translateX(-50%); text-align: center; white-space: nowrap; line-height: 1.3; }
.regua .legenda span.a-esq { transform: none; text-align: left; }
.regua .legenda span.a-dir { transform: translateX(-100%); text-align: right; }
.regua .legenda b { display: block; color: var(--branco); font-weight: 600; font-size: 13px; }
.visor .dica { font-size: 12px; color: #8FA3C4; padding: 0 24px 16px; }
.visor .mini { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); border-top: 1px solid rgba(255, 255, 255, .14); }
.visor .mini > div { padding: 14px 16px; border-left: 1px solid rgba(255, 255, 255, .14); min-width: 0; }
.visor .mini > div:first-child { border-left: 0; }
.visor .mini span { display: block; font-size: 11.5px; color: var(--no-navy); }
.visor .mini b { display: block; font-size: 16px; font-weight: 600; font-variant-numeric: tabular-nums; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.visor .avisos-visor { padding: 0 24px 14px; font-size: 12.5px; color: #FCEBC4; }
.visor .vazio-visor { padding: 34px 26px; color: var(--no-navy-2); font-size: 13.5px; }
.visor .vazio-visor strong { display: block; color: var(--branco); font-size: 17px; font-weight: 600; margin-bottom: 6px; }
.visor .vazio-visor .erro-campo { color: #FBD9D5; font-size: 13.5px; }
.visor details.conta-visor { background: var(--branco); color: var(--tinta); }
.visor details.conta-visor summary { list-style: none; padding: 14px 24px; font-weight: 500; color: var(--navy); cursor: pointer; display: flex; justify-content: space-between; }
.visor details.conta-visor summary::-webkit-details-marker { display: none; }
.visor details.conta-visor summary::after { content: "+"; font-weight: 600; }
.visor details.conta-visor[open] summary::after { content: "-"; }
.visor .conta { padding: 0 24px 16px; }
.visor .simulado { padding: 10px 24px; background: rgba(255, 255, 255, .08); font-size: 12.5px; color: var(--no-navy-2); display: flex; justify-content: space-between; gap: 10px; align-items: center; }
.visor .simulado .link-botao { color: var(--branco); font-weight: 500; }
.barra-movel { display: none; }
@media (max-width: 1120px) {
  .barra-movel { position: fixed; left: 0; right: 0; bottom: 0; z-index: 25; display: flex; align-items: center; gap: 14px; padding: 12px 18px calc(12px + env(safe-area-inset-bottom)); background: var(--navy); color: var(--branco); border-radius: 16px 16px 0 0; box-shadow: 0 -6px 24px rgba(10, 35, 70, .25); }
  .barra-movel:hover { text-decoration: none; }
  .barra-movel small { display: block; font-size: 11px; color: var(--no-navy); }
  .barra-movel strong { font-size: 22px; font-weight: 600; letter-spacing: -.01em; font-variant-numeric: tabular-nums; }
  .barra-movel .selo { margin-left: auto; }
  .barra-movel .selo.ok { background: #D7F0E2; color: #0E5C3C; } .barra-movel .selo.atencao { background: #FCEBC4; color: #6E4700; } .barra-movel .selo.erro { background: #FBD9D5; color: #8F1B12; }
}

/* contas (extrato) */
.conta { width: 100%; font-size: 13px; border-collapse: collapse; }
.conta td { padding: 6px 0; border: 0; }
.conta td.d { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.conta tr.total td { border-top: 1px solid var(--linha); padding-top: 10px; font-weight: 600; }
.conta tr.recuo td:first-child { padding-left: 14px; color: var(--tinta-2); }
.conta-larga { font-size: 14px; }
.conta-larga td { padding: 8px 0; }
table.conta td:first-child, table.conta td:last-child { padding-left: 0; padding-right: 0; }

/* régua pequena nas listas */
.mini-regua { display: block; width: 100%; max-width: 240px; height: 18px; }

/* ================================================================ herói da Início */
.heroi { display: grid; grid-template-columns: 1.3fr 1fr 1fr; background: var(--navy); color: var(--branco); border-radius: var(--raio-g); padding: 26px 28px; }
.heroi > div { padding: 0 26px; border-left: 1px solid rgba(255, 255, 255, .14); min-width: 0; }
.heroi > div:first-child { padding-left: 0; border-left: 0; }
.heroi .rot { font-size: 12.5px; color: var(--no-navy); }
.heroi .v { font-size: 36px; font-weight: 600; letter-spacing: -.02em; line-height: 1.2; margin-top: 4px; font-variant-numeric: tabular-nums; }
.heroi .v.m { font-size: 26px; }
.heroi p { margin-top: 6px; font-size: 12.5px; color: var(--no-navy-2); }
.heroi a { color: var(--branco); text-decoration: underline; text-underline-offset: 3px; }
.contagens { display: flex; gap: 22px; flex-wrap: wrap; margin-top: 14px; font-size: 13px; color: var(--tinta-2); }
.contagens b { color: var(--tinta); font-weight: 600; }
@media (max-width: 860px) {
  .heroi { grid-template-columns: 1fr; padding: 22px; }
  .heroi > div { padding: 14px 0 0; margin-top: 14px; border-left: 0; border-top: 1px solid rgba(255, 255, 255, .14); }
  .heroi > div:first-child { padding-top: 0; margin-top: 0; border-top: 0; }
  .heroi .v { font-size: 32px; }
}

/* ================================================================ listas de linhas (viram cartão no celular) */
.linhas { display: grid; gap: 8px; }
.linha-item { display: grid; grid-template-columns: minmax(0, 1fr) 240px 150px 130px; gap: 24px; align-items: center; padding: 16px 20px; background: var(--branco); border: 1px solid var(--linha); border-radius: 12px; color: var(--tinta); }
.linha-item:hover { border-color: var(--linha-forte); text-decoration: none; box-shadow: 0 2px 10px rgba(10, 35, 70, .05); }
.linha-item strong { display: block; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.linha-item small { display: block; color: var(--tinta-3); font-size: 12.5px; }
.linha-item .valor-linha { text-align: right; font-weight: 600; font-size: 16px; font-variant-numeric: tabular-nums; white-space: nowrap; }
.linha-item .valor-linha small { font-weight: 400; }
.linha-item .fim { text-align: right; }
@media (max-width: 860px) {
  .linha-item { grid-template-columns: minmax(0, 1fr) auto; gap: 10px 14px; padding: 14px 16px; }
  .linha-item .mini-regua { grid-column: 1 / -1; grid-row: 2; max-width: none; }
  .linha-item .fim { grid-column: 1 / -1; text-align: left; }
}

/* ================================================================ tabelas */
.tabela-envolta { overflow-x: auto; background: var(--branco); border: 1px solid var(--linha); border-radius: 12px; }
table { width: 100%; border-collapse: collapse; }
.tabela-envolta table th { text-align: left; font-size: 12px; font-weight: 500; color: var(--tinta-3); padding: 12px 16px; border-bottom: 1px solid var(--linha); white-space: nowrap; background: #FBFCFE; }
.tabela-envolta table td { padding: 13px 16px; border-bottom: 1px solid var(--linha); vertical-align: middle; }
.tabela-envolta table tr:last-child td { border-bottom: 0; }
td.d, th.d { text-align: right; }
tr.clicavel:hover td { background: #FBFCFE; }
td .titulo-linha { font-weight: 600; color: var(--tinta); }
td .sub-linha { font-size: 12.5px; color: var(--tinta-3); }
@media (max-width: 760px) {
  .tabela-envolta { background: none; border: 0; overflow: visible; }
  .tabela-envolta table, .tabela-envolta tbody, .tabela-envolta tr, .tabela-envolta td { display: block; width: 100%; }
  .tabela-envolta thead { display: none; }
  .tabela-envolta tr { background: var(--branco); border: 1px solid var(--linha); border-radius: 12px; padding: 12px 16px; margin-bottom: 8px; }
  .tabela-envolta table td { border: 0; padding: 3px 0; text-align: left; }
  .tabela-envolta table td[data-rotulo]::before { content: attr(data-rotulo) " · "; color: var(--tinta-3); font-size: 12px; }
}

/* ================================================================ números soltos, vazio, detalhes */
.indicadores { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); border: 1px solid var(--linha); border-radius: var(--raio-g); background: var(--branco); }
.indicadores > div { padding: 18px 22px; border-left: 1px solid var(--linha); }
.indicadores > div:first-child { border-left: 0; }
.indicadores .rot { font-size: 12.5px; color: var(--tinta-2); }
.indicadores .val { font-size: 28px; font-weight: 600; line-height: 1.25; margin-top: 2px; font-variant-numeric: tabular-nums; }
.indicadores .val.destaque { color: var(--navy); }
.indicadores .nota { font-size: 12px; color: var(--tinta-3); margin-top: 4px; }
.indicadores-um { grid-template-columns: 1fr; max-width: 380px; }
@media (max-width: 720px) { .indicadores { grid-template-columns: 1fr; } .indicadores > div { border-left: 0; border-top: 1px solid var(--linha); } .indicadores > div:first-child { border-top: 0; } }
.vazio { padding: 44px 24px; text-align: center; border: 1px dashed var(--linha-forte); border-radius: var(--raio-g); background: var(--branco); }
.vazio h2 { margin-bottom: 6px; }
.vazio p { color: var(--tinta-2); margin: 0 auto 18px; max-width: 460px; }
.dados { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 16px 24px; margin: 0; }
.dados dt { font-size: 12px; color: var(--tinta-3); }
.dados dd { margin: 2px 0 0; font-weight: 500; }
details.dobra { border-top: 1px solid var(--linha); padding: 15px 0; }
details.dobra summary { cursor: pointer; font-weight: 500; color: var(--navy); list-style: none; }
details.dobra summary::-webkit-details-marker { display: none; }
details.dobra summary::after { content: " +"; color: var(--tinta-3); }
details.dobra[open] summary::after { content: " -"; }
details.dobra > div { margin-top: 12px; }
ol.metodo { margin: 0; padding-left: 20px; color: var(--tinta-2); display: grid; gap: 4px; font-size: 13px; }
.versoes { list-style: none; padding: 0; margin: 0; }
.versoes li { display: flex; justify-content: space-between; gap: 10px; padding: 10px 0; border-bottom: 1px solid var(--linha); font-size: 13px; }
.versoes li:last-child { border-bottom: 0; }
.versoes li.atual { font-weight: 600; }
.passos-inicio { list-style: none; padding: 0; margin: 0; display: grid; gap: 8px; counter-reset: p; }
.passos-inicio li { display: flex; gap: 14px; align-items: center; padding: 16px 18px; background: var(--branco); border: 1px solid var(--linha); border-radius: 12px; }
.passos-inicio li::before { counter-increment: p; content: counter(p); flex: 0 0 28px; height: 28px; border-radius: 50%; background: var(--navy); color: #fff; font-weight: 600; font-size: 13px; display: grid; place-items: center; }
.passos-inicio li.feito { color: var(--tinta-3); }
.passos-inicio li.feito::before { content: "✓"; background: var(--ok-fundo); color: var(--ok); }
.passos-inicio li .acao { margin-left: auto; }
.texto-livre { white-space: pre-line; color: var(--tinta-2); }
.observacoes { margin-top: 16px; white-space: pre-line; }
.nota-versao, .nota-lado { margin-top: 12px; }
.grande-lado { font-size: 30px; font-weight: 600; color: var(--navy); line-height: 1.2; margin-bottom: 4px; font-variant-numeric: tabular-nums; }
.lado-navy { background: var(--navy); color: var(--branco); border-radius: var(--raio-g) var(--raio-g) 0 0; }
.lado-navy h3 { color: var(--no-navy); font-weight: 500; font-size: 12.5px; }
.lado-navy .grande-lado { color: var(--branco); }
.lado-navy p { color: var(--no-navy-2) !important; }

/* ================================================================ páginas de acesso */
.publico { min-height: 100vh; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
.publico .vitrine { background: var(--navy); color: var(--branco); padding: 48px 56px; display: flex; flex-direction: column; }
.publico .vitrine .produto { padding: 0; font-size: 22px; }
.publico .vitrine h2 { font-size: 32px; line-height: 1.2; margin: auto 0 12px; max-width: 460px; letter-spacing: -.02em; }
.publico .vitrine p { color: var(--no-navy-2); max-width: 440px; }
.publico .vitrine .visor { background: rgba(255, 255, 255, .06); border: 1px solid rgba(255, 255, 255, .12); margin: 30px 0 auto; max-width: 460px; }
.publico .vitrine .vh { margin-top: 30px; display: flex; align-items: center; gap: 10px; font-size: 12px; color: #8FA3C4; }
.publico .vitrine .vh img { height: 16px; opacity: .8; }
.publico .lado-form { display: flex; align-items: center; justify-content: center; padding: 48px 24px; }
.publico .caixa { width: 100%; max-width: 380px; }
.publico h1 { font-size: 26px; margin-bottom: 8px; }
.publico .intro { color: var(--tinta-2); margin-bottom: 24px; }
.publico form { display: grid; gap: 16px; }
.publico .pe { margin-top: 24px; font-size: 13px; color: var(--tinta-2); }
.publico .marca-movel { display: none; }
@media (max-width: 900px) {
  .publico { grid-template-columns: 1fr; }
  .publico .vitrine { display: none; }
  .publico .marca-movel { display: block; margin-bottom: 28px; }
  .publico .marca-movel .produto { color: var(--navy); padding: 0; }
  .publico .marca-movel .produto span { color: var(--tinta-3); }
  .publico .lado-form { align-items: flex-start; padding-top: 40px; }
}

/* ================================================================ admin */
.admin-faixa { background: #061730; color: var(--no-navy-2); font-size: 12px; padding: 7px 16px; text-align: center; }
.admin-faixa strong { color: var(--branco); font-weight: 500; }

@media print { .lateral, .topo-movel, .acoes, .avisos, .barra-movel { display: none !important; } .casca { display: block; } }

/* ================================================================ acabamento da segunda rodada (nota 87) */
/* botão da lateral: branco sobre a lateral escura (vence o .primario) */
.nav-acao .botao.primario { background: var(--branco); border-color: var(--branco); color: var(--navy); }
.nav-acao .botao.primario:hover { background: #E8EEF8; border-color: #E8EEF8; }
@media (min-width: 901px) { .so-celular { display: none !important; } }
/* label que é botão (arquivo do logotipo) */
.campo label.botao, label.botao { display: inline-flex; align-items: center; margin: 0; }
/* "Mais" com seta */
.botao.com-seta::after { content: ""; width: 7px; height: 7px; margin: -3px 0 0 4px; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: rotate(45deg); }
details.mais[open] .botao.com-seta::after { transform: rotate(-135deg); margin-top: 3px; }
/* seção recolhida com título de seção */
details.dobra-titulo { border-top: 0; padding-top: 0; }
details.dobra-titulo > summary { font-size: 18px; font-weight: 600; color: var(--tinta); }
/* legenda do visor: números maiores; explicação sob demanda */
.regua .legenda { height: 46px; font-size: 12px; }
.regua .legenda b { font-size: 14px; }
.visor .dica { display: flex; flex-wrap: wrap; gap: 4px 14px; align-items: baseline; }
.como-ler summary { cursor: pointer; color: var(--no-navy-2); text-decoration: underline; text-underline-offset: 3px; list-style: none; }
.como-ler summary::-webkit-details-marker { display: none; }
.como-ler p { margin-top: 6px; color: var(--no-navy-2); }
/* alvo de toque maior na régua arrastável */
.regua.arrastavel .trilho::before { content: ""; position: absolute; left: -6px; right: -6px; top: -16px; bottom: -16px; }
.regua .pino::before { content: ""; position: absolute; inset: -8px; border-radius: 50%; }
/* início: contagem um degrau abaixo do dinheiro */
.heroi .v.c { font-size: 22px; }
.linha-item.tres { grid-template-columns: minmax(0, 1fr) 150px 130px; }
/* barra fixa do celular com a régua */
@media (max-width: 1120px) {
  .barra-movel { flex-direction: column; align-items: stretch; gap: 8px; }
  .barra-movel .barra-linha { display: flex; align-items: center; gap: 14px; }
  .barra-regua { display: block; width: 100%; height: 6px; border-radius: 3px; }
}
/* listas no celular: nome inteiro em cima, valor e selo embaixo, régua por último */
@media (max-width: 860px) {
  .linha-item { grid-template-columns: minmax(0, 1fr) auto; }
  .linha-item > span:first-child { grid-column: 1 / -1; }
  .linha-item strong { white-space: normal; }
  .linha-item .valor-linha { grid-column: 1; grid-row: 2; text-align: left; }
  .linha-item .fim { grid-column: 2; grid-row: 2; text-align: right; align-self: center; }
  .linha-item .mini-regua { grid-column: 1 / -1; grid-row: 3; }
  .linha-item.tres .fim { display: none; }
}
@media (max-width: 760px) {
  .tabela-envolta tr { display: grid; grid-template-columns: 1fr 1fr; gap: 4px 14px; }
  .tabela-envolta td.cabeca-cartao, .tabela-envolta tr > td:first-child { grid-column: 1 / -1; margin-bottom: 4px; }
  .tabela-envolta table td[data-rotulo]::before { content: attr(data-rotulo); display: block; font-size: 11.5px; color: var(--tinta-3); }
  .tabela-envolta td.d { text-align: left; }
}
/* login no celular: faixa navy com a promessa e a régua */
.regua-faixa { display: none; }
@media (max-width: 900px) {
  .publico { grid-template-rows: auto 1fr; }
  .publico .vitrine { display: flex; padding: 24px 20px 22px; }
  .publico .vitrine .visor { display: none; }
  .publico .vitrine .produto { font-size: 18px; }
  .publico .vitrine h2 { font-size: 22px; margin: 18px 0 6px; }
  .publico .vitrine p { font-size: 13px; }
  .regua-faixa { display: block; width: 100%; height: 8px; margin-top: 16px; border-radius: 4px; }
  .publico .vitrine .vh { margin-top: 14px; }
  .publico .lado-form { padding-top: 28px; }
}

/* ================================================================ terceira rodada (nota 91) */
/* os três números do visor: valor sempre no pé da célula, mesma altura */
.visor .mini > div { display: flex; flex-direction: column; justify-content: space-between; gap: 2px; }
/* seções que abrem e fecham: um estilo só, seta à direita */
details.secao-dobra { padding: 16px 0; }
details.secao-dobra > summary { display: flex; justify-content: space-between; align-items: center; gap: 12px; color: var(--tinta); font-size: 16px; font-weight: 600; }
details.secao-dobra > summary::after { content: ""; flex: 0 0 auto; width: 8px; height: 8px; margin-right: 4px; border-right: 2px solid var(--navy); border-bottom: 2px solid var(--navy); transform: rotate(45deg); }
details.secao-dobra[open] > summary::after { content: ""; transform: rotate(-135deg); }
details.secao-dobra > summary small { display: block; font-size: 12.5px; font-weight: 400; color: var(--tinta-3); }
.secao > details.secao-dobra:first-child { border-top: 0; }
.link-navy { color: var(--navy); font-weight: 500; }
@media (max-width: 1120px) { .duas { gap: 20px; } }
@media (max-width: 560px) {
  .apoio { gap: 2px 14px; }
  .apoio > div { background: none; padding: 0; }
}

/* ================================================================ logo do produto (opção B, 2026-11-09) */
.logo-produto { display: block; height: 40px; width: auto; }
.logo-produto.pequeno { height: 28px; }
.produto .logo-produto + span { margin-top: 8px; }
.publico .vitrine .logo-produto { height: 46px; }
@media (max-width: 900px) { .publico .vitrine .logo-produto { height: 36px; } }

/* ================================================================ barra lateral v2 (2026-11-09) */
.lateral { padding: 22px 12px 14px; background: linear-gradient(180deg, #0B264C 0%, var(--noite) 100%); border-right: 1px solid rgba(255, 255, 255, .04); }
.lateral-topo { display: flex; align-items: center; justify-content: space-between; padding: 0 10px; }
.lateral .produto { padding: 0; }
.lateral .logo-produto { height: 38px; }
.fechar-menu { display: none; width: 36px; height: 36px; border: 0; border-radius: 8px; background: rgba(255, 255, 255, .06); color: #C9D6EA; cursor: pointer; place-items: center; }
.fechar-menu .icone { width: 18px; height: 18px; }
.lateral-escritorio { margin: 14px 10px 18px; padding: 8px 12px; border-radius: 8px; background: rgba(255, 255, 255, .05); color: var(--no-navy-2); font-size: 12.5px; font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.lateral .nav-acao { margin: 0 0 20px; padding: 0 2px; }
.lateral .nav-acao .botao { gap: 8px; min-height: 42px; box-shadow: 0 6px 16px rgba(0, 0, 0, .22); }
.lateral .nav-acao .icone { width: 18px; height: 18px; stroke-width: 2.2; }
.icone { width: 20px; height: 20px; flex: 0 0 auto; }
.nav { gap: 3px; }
.nav a { position: relative; display: flex; align-items: center; gap: 12px; padding: 10px 12px; border-radius: 9px; color: #AFC0DA; font-weight: 500; transition: background .15s ease, color .15s ease; }
.nav a .icone { opacity: .85; }
.nav a:hover { background: rgba(255, 255, 255, .06); color: var(--branco); }
.nav a.ativo { background: rgba(255, 255, 255, .11); color: var(--branco); }
.nav a.ativo .icone { opacity: 1; }
.nav a.ativo::before { content: ""; position: absolute; left: -12px; top: 9px; bottom: 9px; width: 3px; border-radius: 0 3px 3px 0; background: var(--branco); }
.nav a:focus-visible, .lateral .conta-link:focus-visible, .lateral .sair:focus-visible, .fechar-menu:focus-visible { box-shadow: 0 0 0 2px rgba(255, 255, 255, .7); }
.nav .contador { margin-left: auto; min-width: 22px; height: 20px; padding: 0 7px; border-radius: 999px; background: #FCEBC4; color: #6E4700; font-size: 11.5px; font-weight: 700; display: inline-grid; place-items: center; }
.nav .grupo { margin: 22px 12px 8px; }
.lateral-pe { padding: 14px 4px 0; border-top: 1px solid rgba(255, 255, 255, .08); }
.conta-bloco { display: flex; align-items: center; gap: 4px; border-radius: 10px; }
.conta-bloco.ativo, .conta-bloco:hover { background: rgba(255, 255, 255, .06); }
.conta-link { flex: 1; min-width: 0; display: flex; align-items: center; gap: 10px; padding: 8px; border-radius: 10px; color: var(--branco); }
.conta-link:hover { text-decoration: none; }
.avatar { flex: 0 0 34px; width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center; background: var(--branco); color: var(--navy); font-size: 12.5px; font-weight: 700; letter-spacing: .02em; }
.conta-texto { min-width: 0; display: block; line-height: 1.3; }
.conta-texto strong { display: block; font-size: 13px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.conta-texto small { display: block; font-size: 11.5px; color: #8FA3C4; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.conta-texto small.acaba { color: #FCEBC4; }
.lateral .sair { width: 36px; height: 36px; flex: 0 0 36px; border: 0; border-radius: 8px; background: transparent; color: #8FA3C4; display: grid; place-items: center; cursor: pointer; }
.lateral .sair:hover { background: rgba(255, 255, 255, .08); color: var(--branco); }
.lateral .sair .icone { width: 19px; height: 19px; }
.lateral .lateral-pe form { margin: 0; }
.lateral .assinatura { padding: 0 10px; margin-top: 14px; }
@media (max-width: 900px) {
  .fechar-menu { display: grid; }
  .lateral { width: 288px; }
}

/* ================================================================ barra lateral: cores do item ativo e do contador (2026-11-09) */
/* item ativo: o navy da marca sobre a lateral escura, o mesmo azul do visor e da logo */
.nav a.ativo { background: var(--navy); color: var(--branco); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .12), 0 4px 12px rgba(0, 18, 50, .35); }
.nav a.ativo::before { display: none; }
.nav a.ativo .icone { opacity: 1; color: var(--branco); }
.nav a:hover:not(.ativo) { background: rgba(255, 255, 255, .06); }
/* contador: o mesmo âmbar do trecho "abaixo da meta" da régua, com o texto navy escuro */
.nav .contador { background: #EBC067; color: var(--noite); font-weight: 700; box-shadow: 0 0 0 2px rgba(10, 35, 70, .35); }
.nav a.ativo .contador { box-shadow: 0 0 0 2px var(--navy); }
.conta-texto small.acaba { color: #EBC067; }
.conta-bloco.ativo { background: var(--navy); }
.conta-bloco.ativo .conta-texto small { color: var(--no-navy-2); }

/* alertas da Início */
.linha-item.alerta { grid-template-columns: minmax(0, 1fr) auto; }
.linha-item.alerta strong { white-space: normal; }
@media (max-width: 860px) { .linha-item.alerta .fim { grid-column: 1; grid-row: 2; text-align: left; } }

/* visor: horas que o preço paga e travas de escopo */
.visor .horas-visor { padding: 12px 24px; border-top: 1px solid rgba(255, 255, 255, .14); font-size: 13px; color: var(--no-navy-2); }
.visor .horas-visor b { color: var(--branco); font-weight: 600; }
.visor .horas-visor.aperto { color: #FCEBC4; }
.visor .cortes-visor { padding: 14px 24px 16px; background: rgba(0, 0, 0, .14); font-size: 13px; color: var(--no-navy-2); }
.visor .cortes-visor strong { display: block; color: var(--branco); font-weight: 600; margin-bottom: 6px; }
.visor .cortes-visor ul { margin: 0; padding-left: 18px; display: grid; gap: 3px; }
.visor .cortes-visor li span { color: var(--no-navy); }
/* logo final (selo + Régua / Contábil), proporção 3:1 */
.lateral .logo-produto { height: 46px; }
.logo-produto.pequeno, .topo-movel .logo-produto { height: 34px; }
.publico .vitrine .logo-produto { height: 56px; }
@media (max-width: 900px) { .publico .vitrine .logo-produto { height: 44px; } }
/* logo do menu: versão para tamanho pequeno, um pouco maior e em pixel inteiro */
.lateral .logo-produto { height: 52px; }
.logo-produto.pequeno, .topo-movel .logo-produto { height: 38px; }


/* =====================================================================================
   TEMA PREMIUM SÓBRIO (2026-11-09): neutro, linhas finas, números grandes em traço fino.
   A cor forte fica para o que importa: a régua, o cartão de honorários (cor do escritório)
   e o botão principal. Este bloco sobrepõe o anterior.
   ===================================================================================== */
:root { --papel: #FFFFFF; --fundo: #FBFBFA; --linha: #ECECEA; --linha-forte: #E2E2DF; --tinta-2: #5A6475; --tinta-3: #8A93A3; --hover: #F5F5F3;
        --cor-escritorio: #003B95; --cor-escritorio-texto: #FFFFFF; --cor-escritorio-suave: #EEF3FA; }
body { background: var(--fundo); -webkit-font-smoothing: antialiased; }
h1 { font-weight: 500; font-size: 30px; letter-spacing: -.025em; }
h2 { font-weight: 500; font-size: 16px; }
.cabecalho .sobre, .sobre { text-transform: none; letter-spacing: 0; font-weight: 400; font-size: 12.5px; color: var(--tinta-3); margin-bottom: 2px; }
.cabecalho p strong { font-weight: 500; color: var(--tinta); }
.botao.primario { background: var(--tinta); border-color: var(--tinta); }
.botao.primario:hover { background: #13305C; border-color: #13305C; }
input[type=checkbox]:checked { background: var(--tinta); border-color: var(--tinta); }
input[type=radio]:checked { border-color: var(--tinta); }
input:focus, select:focus, textarea:focus, .afixo:focus-within { border-color: var(--tinta); }

/* menu claro */
.lateral { background: #F7F7F5; color: var(--tinta-2); border-right: 1px solid var(--linha); }
.lateral .logo-produto { height: 44px; }
.lateral-escritorio { background: none; margin: 10px 10px 16px; padding: 0; color: var(--tinta-2); font-size: 12.5px; display: flex; align-items: center; gap: 8px; }
.lateral-escritorio::before { content: ""; flex: 0 0 7px; height: 7px; border-radius: 50%; background: #3FA47A; }
.lateral .nav-acao .botao.primario { background: var(--tinta); border-color: var(--tinta); color: #fff; box-shadow: none; min-height: 40px; }
.lateral .nav-acao .botao.primario:hover { background: #13305C; border-color: #13305C; }
.nav a { color: var(--tinta-2); padding: 8px 10px; }
.nav a .icone { color: var(--tinta-3); opacity: 1; }
.nav a:hover:not(.ativo) { background: #EFEFEC; color: var(--tinta); }
.nav a.ativo { background: #fff; color: var(--tinta); font-weight: 500; box-shadow: 0 0 0 1px var(--linha-forte), 0 1px 2px rgba(0, 0, 0, .04); }
.nav a.ativo .icone { color: var(--navy); }
.nav .contador { background: #FBF1DC; color: #9A6A10; box-shadow: none; font-weight: 600; }
.nav a.ativo .contador { box-shadow: none; }
.nav .grupo { color: #B4BBC6; letter-spacing: .1em; }
.lateral-pe { border-top: 1px solid var(--linha); }
.conta-link { color: var(--tinta); }
.avatar { background: var(--cor-escritorio-suave); color: var(--navy); }
.conta-texto small { color: var(--tinta-3); }
.conta-texto small.acaba { color: #A06B0C; }
.conta-bloco.ativo, .conta-bloco:hover { background: #EFEFEC; }
.conta-bloco.ativo .conta-texto small { color: var(--tinta-3); }
.lateral .sair { color: var(--tinta-3); }
.lateral .sair:hover { background: #E8E8E5; color: var(--tinta); }
.assinatura img { opacity: .55; }
.fechar-menu { background: #EFEFEC; color: var(--tinta-2); }
.nav a:focus-visible, .lateral .conta-link:focus-visible, .lateral .sair:focus-visible, .fechar-menu:focus-visible { box-shadow: var(--foco); }
@media (max-width: 900px) {
  .topo-movel { background: #fff; border-bottom: 1px solid var(--linha); }
  .topo-movel .botao { background: #fff; color: var(--tinta); border-color: var(--linha-forte); }
}

/* números da Início: o primeiro na cor do escritório */
.metricas { display: grid; grid-template-columns: 1.35fr 1fr 1fr; gap: 0; align-items: stretch; }
.metricas > div { padding: 22px 28px; border-top: 1px solid var(--linha); border-bottom: 1px solid var(--linha); }
.metricas > div + div { border-left: 1px solid var(--linha); }
.metricas .rot { font-size: 12.5px; color: var(--tinta-3); }
.metricas .v { font-size: 44px; font-weight: 300; letter-spacing: -.035em; line-height: 1.15; margin-top: 4px; font-variant-numeric: tabular-nums; }
.metricas .v.m { font-size: 30px; }
.metricas p { font-size: 12.5px; color: var(--tinta-2); margin-top: 8px; }
.metricas a { font-weight: 500; }
.metrica-marca { background: var(--cor-escritorio); color: var(--cor-escritorio-texto); border-radius: 16px; border: 0 !important;
                 box-shadow: 0 14px 34px rgba(10, 35, 70, .14); }
.metrica-marca .rot, .metrica-marca p { color: inherit; opacity: .78; }
.barra-carteira { display: block; width: 100%; max-width: 360px; height: 6px; margin-top: 14px; border-radius: 3px; overflow: hidden; color: inherit; opacity: .9; }
@media (max-width: 860px) {
  .metricas { grid-template-columns: 1fr; }
  .metricas > div + div { border-left: 0; }
  .metricas > div:nth-child(2) { border-top: 0; }
  .metricas .v { font-size: 36px; }
}
.contagens { display: none; }

/* listas como linhas finas, sem cartão */
.secao > header.cab-secao { display: flex; justify-content: space-between; align-items: baseline; }
.cab-secao a { font-size: 13px; color: var(--tinta-2); }
.linhas { gap: 0; }
.linha-item { background: transparent; border: 0; border-bottom: 1px solid var(--linha); border-radius: 0; padding: 14px 8px; box-shadow: none !important; }
.linhas .linha-item:first-child { border-top: 1px solid var(--linha); }
.linha-item:hover { background: var(--hover); border-color: var(--linha); }
.linha-item strong { font-weight: 500; }
.linha-item .valor-linha { font-weight: 500; }
.cli { display: flex; align-items: center; gap: 12px; min-width: 0; }
.cli > span:last-child { min-width: 0; }
.ini { flex: 0 0 34px; width: 34px; height: 34px; border-radius: 9px; display: grid; place-items: center; font-size: 12px; font-weight: 600; letter-spacing: .02em; }
.ini-0 { background: #EAF1FB; color: #1F4E9A; } .ini-1 { background: #F3EDE4; color: #8A5A2B; } .ini-2 { background: #E8F3EE; color: #2F7D5C; }
.ini-3 { background: #F1ECF7; color: #5B3E96; } .ini-4 { background: #EDEFF3; color: #4A5568; } .ini-5 { background: #FBEDEA; color: #9C3D33; }
.selo { background: transparent !important; padding: 0; font-weight: 500; }
.selo.ok { color: #2F7D5C; } .selo.atencao { color: #A06B0C; } .selo.erro { color: #B5463E; }

/* atenção: tarja fina e ação em texto */
.linha-item.alerta { position: relative; padding-left: 20px; }
.linha-item.alerta::before { content: ""; position: absolute; left: 4px; top: 14px; bottom: 14px; width: 3px; border-radius: 2px; background: #C9CED6; }
.linha-item.alerta.alerta-erro::before { background: #D9534A; }
.linha-item.alerta.alerta-atencao::before { background: #E3A63B; }
.linha-item.alerta strong { font-weight: 500; }
.linha-item.alerta .selo { color: var(--navy); }
.linha-item.alerta .selo::before { display: none; }
.linha-item.alerta .selo::after { content: " →"; }

/* tabelas e superfícies */
.tabela-envolta { background: transparent; border: 0; border-radius: 0; }
.tabela-envolta table th { background: transparent; padding-left: 0; font-weight: 400; }
.tabela-envolta table td { padding-left: 0; }
.superficie { border-color: var(--linha); border-radius: 14px; box-shadow: 0 1px 2px rgba(0, 0, 0, .03); }
.indicadores { border-color: var(--linha); }
.indicadores .val { font-weight: 300; letter-spacing: -.03em; }
.vazio { border-color: var(--linha-forte); }
.lado-navy { background: #fff; color: var(--tinta); border-bottom: 1px solid var(--linha); }
.lado-navy h3 { color: var(--tinta-3); }
.lado-navy .grande-lado { color: var(--tinta); font-weight: 300; font-size: 36px; letter-spacing: -.03em; }
.lado-navy p { color: var(--tinta-2) !important; }

/* formulário de precificação: linhas no lugar de cartões */
.passo::before { background: none; color: var(--tinta-3); font-weight: 500; font-size: 12px; width: auto; height: auto; top: 4px; content: "0" attr(data-n); }
.passo::after { left: 8px; top: 30px; background: var(--linha); }
.servicos { gap: 0; border-top: 1px solid var(--linha); }
.servico { background: transparent; border: 0; border-bottom: 1px solid var(--linha); border-radius: 0; padding: 12px 4px; }
.servico.marcado { box-shadow: none; border-color: var(--linha); }
.servico:not(.marcado) strong { color: var(--tinta-3); font-weight: 400; }
.servico strong { font-weight: 500; }
.horas { border: 0; background: transparent; }
.horas button { background: transparent; color: var(--tinta-2); border-radius: 7px; }
.horas button:hover { background: var(--hover); }
.apoio { gap: 4px 18px; }
.apoio > div { background: none; padding: 0; }
.opcao.marcada { border-color: var(--tinta); box-shadow: inset 0 0 0 1px var(--tinta); }

/* o visor em papel branco: a régua é a única cor */
.visor { background: #fff; color: var(--tinta); border: 1px solid var(--linha-forte); border-radius: 16px; box-shadow: 0 1px 2px rgba(0, 0, 0, .03), 0 12px 32px rgba(10, 35, 70, .06); }
.visor .rot { color: var(--tinta-3); }
.visor .grande { font-weight: 300; font-size: 50px; letter-spacing: -.04em; }
.visor .grande small { color: var(--tinta-3); }
.visor .modo { color: var(--tinta-2); }
.regua .marco { background: var(--tinta); opacity: .5; width: 1.5px; }
.regua .pino { width: 24px; height: 24px; margin: -12px 0 0 -12px; background: #fff; border: 2px solid var(--tinta); box-shadow: 0 2px 8px rgba(10, 35, 70, .25); }
.regua .pino::after { display: none; }
.regua .legenda { color: var(--tinta-3); }
.regua .legenda b { color: var(--tinta); font-weight: 500; }
.visor .dica { color: var(--tinta-3); }
.como-ler summary { color: var(--tinta-2); }
.como-ler p { color: var(--tinta-2); }
.visor .mini { border-top-color: var(--linha); }
.visor .mini > div { border-left-color: var(--linha); }
.visor .mini span { color: var(--tinta-3); }
.visor .mini b { font-weight: 500; }
.visor .horas-visor { border-top-color: var(--linha); color: var(--tinta-2); }
.visor .horas-visor b { color: var(--tinta); }
.visor .horas-visor.aperto { color: #A06B0C; }
.visor .cortes-visor { background: #FCFBF7; border-top: 1px solid var(--linha); color: var(--tinta-2); }
.visor .cortes-visor strong { color: var(--tinta); font-weight: 500; }
.visor .cortes-visor li span { color: var(--tinta-3); }
.visor .avisos-visor { color: #A06B0C; }
.visor details.conta-visor { border-top: 1px solid var(--linha); }
.visor .simulado { background: #F5F5F3; color: var(--tinta-2); }
.visor .simulado .link-botao { color: var(--navy); }
.visor .vazio-visor { color: var(--tinta-2); }
.visor .vazio-visor strong { color: var(--tinta); font-weight: 500; }
.visor .vazio-visor .erro-campo { color: var(--erro); }
@media (max-width: 1120px) {
  .barra-movel { background: #fff; color: var(--tinta); border-top: 1px solid var(--linha); box-shadow: 0 -6px 24px rgba(10, 35, 70, .08); }
  .barra-movel small { color: var(--tinta-3); }
  .barra-movel strong { color: var(--tinta); font-weight: 500; }
}

/* entrar: claro */
.publico .vitrine { background: #F7F7F5; color: var(--tinta); border-right: 1px solid var(--linha); }
.publico .vitrine h2 { font-weight: 500; }
.publico .vitrine p { color: var(--tinta-2); }
.publico .vitrine .visor { background: #fff; border: 1px solid var(--linha-forte); }
.publico .vitrine .vh { color: var(--tinta-3); }
.publico .vitrine .vh img { opacity: .6; }
.publico { background: #fff; }

/* escolha da cor do escritório */
.cor-escolha { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.cor-escolha input[type=color] { width: 44px; height: 36px; padding: 2px; border: 1px solid var(--linha-forte); border-radius: 8px; background: #fff; cursor: pointer; }
.amostra { border: 0; background: none; padding: 2px; border-radius: 50%; cursor: pointer; line-height: 0; }
.amostra:hover, .amostra:focus-visible { box-shadow: 0 0 0 2px var(--linha-forte); }


/* ================================================================ modo claro e escuro (botão no menu) */
.so-escuro { display: none !important; }
[data-tema="escuro"] .so-claro { display: none !important; }
[data-tema="escuro"] .so-escuro { display: initial !important; }
[data-tema="escuro"] img.so-escuro { display: block !important; }
.assinatura img.so-escuro, .publico .vitrine .vh img.so-escuro { display: none; }
[data-tema="escuro"] .assinatura img.so-escuro, [data-tema="escuro"] .publico .vitrine .vh img.so-escuro { display: inline-block !important; }
.botao-tema { display: flex; width: 100%; align-items: center; gap: 10px; margin: 0 0 8px; padding: 8px 10px; border: 0; border-radius: 8px; background: transparent; color: var(--tinta-2); font: 500 13px "Poppins", sans-serif; cursor: pointer; text-align: left; }
.botao-tema > span { display: flex; align-items: center; gap: 10px; }
[data-tema="escuro"] .botao-tema > span.so-escuro { display: flex !important; }
.botao-tema .icone { width: 18px; height: 18px; color: var(--tinta-3); }
.botao-tema:hover { background: #EFEFEC; color: var(--tinta); }

[data-tema="escuro"] {
  color-scheme: dark;
  --fundo: #0A0A0A; --papel: #151515; --linha: #262626; --linha-forte: #333333; --hover: #1C1C1C;
  --tinta: #EDEDED; --tinta-2: #A3A3A3; --tinta-3: #7A7A7A;
  --navy-claro: #8FB4FF; --foco: 0 0 0 3px rgba(143, 180, 255, .35);
  --ok: #5CC497; --ok-fundo: rgba(92, 196, 151, .12); --atencao: #E8B45A; --atencao-fundo: rgba(232, 180, 90, .12);
  --erro: #F08A80; --erro-fundo: rgba(240, 138, 128, .12);
}
[data-tema="escuro"] body { background: var(--fundo); color: var(--tinta); }
[data-tema="escuro"] a { color: var(--navy-claro); }
[data-tema="escuro"] .lateral { background: #050505; border-right-color: var(--linha); }
[data-tema="escuro"] .nav a { color: var(--tinta-2); }
[data-tema="escuro"] .nav a:hover:not(.ativo), [data-tema="escuro"] .botao-tema:hover, [data-tema="escuro"] .conta-bloco:hover, [data-tema="escuro"] .conta-bloco.ativo { background: var(--hover); color: var(--tinta); }
[data-tema="escuro"] .nav a.ativo { background: var(--papel); color: var(--tinta); box-shadow: 0 0 0 1px var(--linha-forte); }
[data-tema="escuro"] .nav a.ativo .icone { color: var(--navy-claro); }
[data-tema="escuro"] .nav .contador { background: var(--atencao-fundo); color: var(--atencao); }
[data-tema="escuro"] .lateral .nav-acao .botao.primario, [data-tema="escuro"] .botao.primario { background: #E6EAF2; border-color: #E6EAF2; color: #0A2346; }
[data-tema="escuro"] .lateral .nav-acao .botao.primario:hover, [data-tema="escuro"] .botao.primario:hover { background: #fff; border-color: #fff; }
[data-tema="escuro"] .conta-link { color: var(--tinta); }
[data-tema="escuro"] .avatar { background: var(--cor-escritorio-suave); color: var(--cor-escritorio-tinta); }
[data-tema="escuro"] .conta-texto small.acaba { color: var(--atencao); }
[data-tema="escuro"] .lateral .sair:hover, [data-tema="escuro"] .fechar-menu { background: var(--hover); color: var(--tinta); }
[data-tema="escuro"] .topo-movel { background: #050505; border-bottom-color: var(--linha); }
[data-tema="escuro"] .topo-movel .botao { background: transparent; color: var(--tinta); border-color: var(--linha-forte); }

[data-tema="escuro"] .botao { background: var(--papel); color: var(--tinta); border-color: var(--linha-forte); }
[data-tema="escuro"] .botao:hover { border-color: var(--tinta-3); }
[data-tema="escuro"] .botao.perigo { color: var(--erro); }
[data-tema="escuro"] input[type=text], [data-tema="escuro"] input[type=email], [data-tema="escuro"] input[type=password],
[data-tema="escuro"] input[type=number], [data-tema="escuro"] input[type=search], [data-tema="escuro"] textarea,
[data-tema="escuro"] select, [data-tema="escuro"] .afixo, [data-tema="escuro"] .afixo input { background-color: #101010; color: var(--tinta); border-color: var(--linha-forte); }
[data-tema="escuro"] select { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5l5 5 5-5' fill='none' stroke='%23A3A3A3' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); }
[data-tema="escuro"] .afixo span { background: #1C1C1C; color: var(--tinta-2); }
[data-tema="escuro"] input::placeholder, [data-tema="escuro"] textarea::placeholder { color: #666666; }
[data-tema="escuro"] input[type=checkbox], [data-tema="escuro"] input[type=radio] { background: #101010; border-color: #404040; }
[data-tema="escuro"] input[type=checkbox]:checked { background: var(--navy-claro); border-color: var(--navy-claro); }

[data-tema="escuro"] input[type=radio]:checked { border-color: var(--navy-claro); }
[data-tema="escuro"] .opcao { background: var(--papel); border-color: var(--linha); }
[data-tema="escuro"] .opcao.marcada { border-color: var(--navy-claro); box-shadow: inset 0 0 0 1px var(--navy-claro); }
[data-tema="escuro"] .segmento { background: #1C1C1C; }
[data-tema="escuro"] .segmento input:checked + span { background: var(--papel); color: var(--tinta); box-shadow: 0 0 0 1px var(--linha-forte); }
[data-tema="escuro"] .horas button { color: var(--tinta-2); }
[data-tema="escuro"] .horas button:hover { background: var(--hover); }
[data-tema="escuro"] .horas input { background: transparent; }

[data-tema="escuro"] .superficie, [data-tema="escuro"] .vazio, [data-tema="escuro"] .indicadores,
[data-tema="escuro"] .passos-inicio li, [data-tema="escuro"] details.mais .menu { background: var(--papel); border-color: var(--linha); }
[data-tema="escuro"] details.mais .menu button, [data-tema="escuro"] details.mais .menu a { color: var(--tinta); }
[data-tema="escuro"] details.mais .menu button:hover { background: var(--hover); }
[data-tema="escuro"] .lado-navy { background: var(--papel); }
[data-tema="escuro"] .aviso { background: var(--papel); border-color: var(--linha); color: var(--tinta-2); }
[data-tema="escuro"] .aviso.ok { background: var(--ok-fundo); color: var(--ok); border-color: transparent; }
[data-tema="escuro"] .aviso.erro { background: var(--erro-fundo); color: var(--erro); border-color: transparent; }
[data-tema="escuro"] .aviso.atencao { background: var(--atencao-fundo); color: var(--atencao); border-color: transparent; }
[data-tema="escuro"] .aviso.info { background: #1C1C1C; color: var(--navy-claro); border-color: transparent; }
[data-tema="escuro"] .selo.ok { color: var(--ok); } [data-tema="escuro"] .selo.atencao { color: var(--atencao); } [data-tema="escuro"] .selo.erro { color: var(--erro); }
[data-tema="escuro"] .linha-item { color: var(--tinta); }
[data-tema="escuro"] .linha-item:hover, [data-tema="escuro"] tr.clicavel:hover td { background: var(--hover); }
[data-tema="escuro"] .linha-item.alerta .selo { color: var(--navy-claro); }
[data-tema="escuro"] td .titulo-linha { color: var(--tinta); }
[data-tema="escuro"] .ini-0 { background: #1A2A47; color: #9DBCF5; } [data-tema="escuro"] .ini-1 { background: #33291C; color: #E1B98C; }
[data-tema="escuro"] .ini-2 { background: #173328; color: #82D1AE; } [data-tema="escuro"] .ini-3 { background: #2A2240; color: #BBA5EA; }
[data-tema="escuro"] .ini-4 { background: #262626; color: #BDBDBD; } [data-tema="escuro"] .ini-5 { background: #3A2020; color: #F0A49A; }
[data-tema="escuro"] .metrica-marca { box-shadow: 0 14px 34px rgba(0, 0, 0, .35); }

[data-tema="escuro"] .visor { background: var(--papel); border-color: var(--linha-forte); box-shadow: 0 12px 32px rgba(0, 0, 0, .35); color: var(--tinta); }
[data-tema="escuro"] .regua .marco { background: var(--tinta); }
[data-tema="escuro"] .regua .pino { background: var(--papel); border-color: var(--tinta); }
[data-tema="escuro"] .visor .cortes-visor { background: #111111; }
[data-tema="escuro"] .visor details.conta-visor { background: var(--papel); color: var(--tinta); }
[data-tema="escuro"] .visor details.conta-visor summary { color: var(--navy-claro); }
[data-tema="escuro"] .visor .simulado { background: var(--hover); }
[data-tema="escuro"] .visor .simulado .link-botao { color: var(--navy-claro); }
@media (max-width: 1120px) { [data-tema="escuro"] .barra-movel { background: var(--papel); border-top-color: var(--linha); } }
[data-tema="escuro"] .publico, [data-tema="escuro"] .publico .lado-form { background: var(--fundo); }
[data-tema="escuro"] .publico .vitrine { background: #050505; border-right-color: var(--linha); }
[data-tema="escuro"] .publico .vitrine .visor { background: var(--papel); }
[data-tema="escuro"] .cor-escolha input[type=color] { background: var(--papel); border-color: var(--linha-forte); }
[data-tema="escuro"] .admin-faixa { background: #000000; }
[data-tema="escuro"] .logo-previa { background: #fff; }

/* modo de cor e sair: canto superior direito */
.principal { position: relative; }
.acoes-topo { position: absolute; top: 22px; right: 28px; z-index: 5; display: flex; gap: 6px; align-items: center; }
.acoes-topo form { margin: 0; }
.icone-botao { width: 38px; height: 38px; display: grid; place-items: center; border: 1px solid var(--linha); border-radius: 10px; background: #fff; color: var(--tinta-2); cursor: pointer; }
.icone-botao:hover { color: var(--tinta); border-color: var(--linha-forte); }
.icone-botao .icone { width: 18px; height: 18px; }
.icone-botao .so-escuro, .icone-botao .so-claro { line-height: 0; }
[data-tema="escuro"] .icone-botao { background: var(--papel); border-color: var(--linha-forte); color: var(--tinta-2); }
[data-tema="escuro"] .icone-botao:hover { color: var(--tinta); }
.acoes-topo.no-movel { display: none; }
.conteudo > .cabecalho:first-child, .conteudo > .migalha:first-child { padding-right: 96px; }
@media (max-width: 900px) {
  .principal > .acoes-topo { display: none; }
  .topo-movel .acoes-topo.no-movel { display: flex; position: static; margin-left: auto; margin-right: 8px; }
  .topo-movel .icone-botao { width: 36px; height: 36px; }
  .conteudo > .cabecalho:first-child, .conteudo > .migalha:first-child { padding-right: 0; }
}

/* marcador da régua pequena visível no escuro */


/* =====================================================================================
   COR PRINCIPAL = COR DO ESCRITÓRIO (2026-11-09). O /escritorio/tema.css troca os valores
   (dominio/cores.py); estes são os do padrão, para as páginas sem login.
   --ce-tinta-*: a cor com a luz ajustada para dar leitura como texto em cada modo.
   ===================================================================================== */
:root { --cor-escritorio-forte: #00327D; --ce-tinta-claro: #003B95; --ce-tinta-escuro: #3585FF; --ce-suave-claro: #EBEFF7; --ce-suave-escuro: #101D31; --ce-foco-claro: rgba(0,59,149,.28); --ce-foco-escuro: rgba(53,133,255,.35);
        --cor-escritorio-tinta: var(--ce-tinta-claro); --cor-escritorio-suave: var(--ce-suave-claro); --cor-escritorio-foco: var(--ce-foco-claro);
        --navy: var(--cor-escritorio-tinta); --navy-forte: var(--cor-escritorio-forte); --navy-claro: var(--cor-escritorio-tinta);
        --foco: 0 0 0 3px var(--cor-escritorio-foco); }
[data-tema="escuro"] { --cor-escritorio-tinta: var(--ce-tinta-escuro); --cor-escritorio-suave: var(--ce-suave-escuro); --cor-escritorio-foco: var(--ce-foco-escuro); }

.botao.primario, .lateral .nav-acao .botao.primario,
[data-tema="escuro"] .botao.primario, [data-tema="escuro"] .lateral .nav-acao .botao.primario { background: var(--cor-escritorio); border-color: var(--cor-escritorio); color: var(--cor-escritorio-texto); }
.botao.primario:hover, .lateral .nav-acao .botao.primario:hover,
[data-tema="escuro"] .botao.primario:hover, [data-tema="escuro"] .lateral .nav-acao .botao.primario:hover { background: var(--cor-escritorio-forte); border-color: var(--cor-escritorio-forte); }
a, .link-botao, .linha-item.alerta .selo, .visor .simulado .link-botao, .visor details.conta-visor summary, .link-navy, details.dobra summary,
[data-tema="escuro"] a, [data-tema="escuro"] .linha-item.alerta .selo, [data-tema="escuro"] .visor .simulado .link-botao, [data-tema="escuro"] .visor details.conta-visor summary { color: var(--cor-escritorio-tinta); }
.cab-secao a, [data-tema="escuro"] .cab-secao a, .nav a, [data-tema="escuro"] .nav a, .migalha a { color: var(--tinta-2); }
.nav a.ativo, [data-tema="escuro"] .nav a.ativo, .conta-link, [data-tema="escuro"] .conta-link, a.botao, a.linha-item, [data-tema="escuro"] a.linha-item { color: var(--tinta); }
a.botao.primario { color: var(--cor-escritorio-texto); }
.nav a.ativo .icone, [data-tema="escuro"] .nav a.ativo .icone { color: var(--cor-escritorio-tinta); }
.lateral-escritorio::before { background: var(--cor-escritorio); }
input[type=checkbox]:checked, [data-tema="escuro"] input[type=checkbox]:checked { background: var(--cor-escritorio); border-color: var(--cor-escritorio); }
input[type=checkbox]:checked::after { border-color: var(--cor-escritorio-texto); }
input[type=radio]:checked, [data-tema="escuro"] input[type=radio]:checked { border-color: var(--cor-escritorio-tinta); }
input:focus, select:focus, textarea:focus, .afixo:focus-within { border-color: var(--cor-escritorio-tinta); }
.opcao.marcada, [data-tema="escuro"] .opcao.marcada { border-color: var(--cor-escritorio-tinta); box-shadow: inset 0 0 0 1px var(--cor-escritorio-tinta); }
.avatar { background: var(--cor-escritorio-suave); color: var(--cor-escritorio-tinta); }
.regua .pino, [data-tema="escuro"] .regua .pino { border-color: var(--cor-escritorio-tinta); }
.mini-regua .pino-mini { fill: var(--cor-escritorio-tinta); }
.passos-inicio li::before { background: var(--cor-escritorio); color: var(--cor-escritorio-texto); }
.aviso.info, [data-tema="escuro"] .aviso.info { background: var(--cor-escritorio-suave); color: var(--cor-escritorio-tinta); border-color: transparent; }

/* números da Início: três cartões de canto arredondado */
.metricas { gap: 14px; }
.metricas > div { border: 1px solid var(--linha); border-radius: 16px; background: var(--papel); }
.metricas > div + div { border-left: 1px solid var(--linha); }
.metricas > .metrica-marca { background: var(--cor-escritorio); }
@media (max-width: 860px) {
  .metricas { gap: 10px; }
  .metricas > div:nth-child(2) { border-top: 1px solid var(--linha); }
  .metricas > div { padding: 20px 22px; }
}

/* escolha da cor do escritório */
.cor-painel { display: grid; grid-template-columns: minmax(0, 1fr) 270px; gap: 20px 28px; align-items: start; margin-top: 4px; }
.cor-paleta { display: flex; flex-wrap: wrap; gap: 4px; }
.cor-chip { position: relative; display: flex; flex-direction: column; align-items: center; gap: 6px; width: 66px; padding: 8px 0 6px; border: 0; border-radius: 12px; background: none; color: var(--tinta-2); font: 400 11.5px/1.2 "Poppins", sans-serif; cursor: pointer; }
.cor-chip:hover { background: var(--hover); color: var(--tinta); }
.cor-chip svg { display: block; border-radius: 50%; }
.cor-chip .marca { display: none; }
.cor-chip[aria-checked="true"] { color: var(--tinta); font-weight: 500; }
.cor-chip[aria-checked="true"] svg, .cor-propria[aria-checked="true"] .arco { box-shadow: 0 0 0 2px var(--papel), 0 0 0 4px var(--tinta); }
.cor-chip[aria-checked="true"] .marca { display: inline; }
.cor-propria .arco { width: 36px; height: 36px; border-radius: 50%; background: conic-gradient(#E5484D, #F5A524, #F2E94C, #46A758, #0E7490, #3E63DD, #8E4EC6, #E5484D); display: grid; place-items: center; }
.cor-propria .arco::after { content: ""; width: 16px; height: 16px; border-radius: 50%; background: var(--papel); }
.cor-propria input[type=color] { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; cursor: pointer; border: 0; padding: 0; }
.cor-codigo { display: flex; align-items: center; gap: 10px; margin-top: 14px; }
.campo .cor-codigo label { margin: 0; font-weight: 400; color: var(--tinta-2); font-size: 12.5px; }
.cor-codigo input { width: 118px; font-family: ui-monospace, "Cascadia Mono", Consolas, monospace; text-transform: uppercase; }
.cor-previa { border: 1px solid var(--linha); border-radius: 16px; padding: 14px; background: var(--fundo); }
.cor-previa .rot-previa { font-size: 11.5px; color: var(--tinta-3); margin-bottom: 10px; }
.cor-previa-cartao { border-radius: 12px; padding: 14px 16px; background: var(--cor-escritorio); color: var(--cor-escritorio-texto); }
.cor-previa-cartao small { display: block; font-size: 11.5px; opacity: .8; }
.cor-previa-cartao strong { display: block; font-size: 24px; font-weight: 300; letter-spacing: -.03em; margin-top: 2px; }
.cor-previa-itens { display: flex; align-items: center; gap: 12px; margin-top: 12px; flex-wrap: wrap; }
.cor-previa-itens .botao { pointer-events: none; }
.cor-previa-itens .elo { color: var(--cor-escritorio-tinta); font-weight: 500; font-size: 13px; }
.cor-previa-itens .caixa { width: 18px; height: 18px; border-radius: 5px; background: var(--cor-escritorio); display: grid; place-items: center; }
.cor-previa-itens .caixa::after { content: ""; width: 4px; height: 8px; border-right: 2px solid var(--cor-escritorio-texto); border-bottom: 2px solid var(--cor-escritorio-texto); transform: rotate(45deg) translate(-1px, -1px); }
.cor-aviso { margin-top: 10px; font-size: 12px; color: var(--tinta-3); }
@media (max-width: 900px) { .cor-painel { grid-template-columns: 1fr; } }

/* =====================================================================================
   RÉGUAS (2026-11-09): a faixa onde o preço está fica com a cor cheia, as outras ficam
   suaves; o marcador é a tinta do texto com um contorno da cor do fundo.
   ===================================================================================== */
:root { --z-erro: #F6D4D1; --z-erro-cheia: #E0786F; --z-atencao: #F5E3BC; --z-atencao-cheia: #DDAA45;
        --z-ok: #CDEBDC; --z-ok-cheia: #3FAE7C; --marcador: #0A2346; }
[data-tema="escuro"] { --z-erro: #4A2826; --z-erro-cheia: #E2675D; --z-atencao: #4A3D24; --z-atencao-cheia: #D9A441;
        --z-ok: #213F31; --z-ok-cheia: #3FB07D; --marcador: #F2F2F2; }
.z-erro { fill: var(--z-erro); } .z-erro.ativa { fill: var(--z-erro-cheia); }
.z-atencao { fill: var(--z-atencao); } .z-atencao.ativa { fill: var(--z-atencao-cheia); }
.z-ok { fill: var(--z-ok); } .z-ok.ativa { fill: var(--z-ok-cheia); }
.regua .trilho svg .z { transition: fill .15s ease; }
.mini-regua .pino-mini, [data-tema="escuro"] .mini-regua .pino-mini { fill: var(--marcador); stroke: var(--fundo); stroke-width: 2px; paint-order: stroke; }
.linha-item:hover .mini-regua .pino-mini { stroke: var(--hover); }
.regua .pino, [data-tema="escuro"] .regua .pino { border-color: var(--marcador); }
.regua .marco, [data-tema="escuro"] .regua .marco { background: var(--marcador); opacity: .35; }
.barra-regua .marcador-barra { fill: var(--marcador); }

/* =====================================================================================
   ESCOLHA DA COR v2 (2026-11-09): abas "Cores prontas" e "Personalizada", salvar só a cor.
   ===================================================================================== */
.cor-campo .ajuda:first-of-type { margin-top: 0; margin-bottom: 12px; }
.cor-painel { grid-template-columns: minmax(0, 1fr) 250px; gap: 20px 32px; padding: 18px; border: 1px solid var(--linha); border-radius: 16px; background: var(--papel); }
.cor-abas { display: inline-flex; gap: 2px; padding: 3px; border-radius: 10px; background: var(--hover); margin-bottom: 14px; }
.cor-abas button { border: 0; background: none; padding: 7px 14px; border-radius: 8px; font: 500 12.5px "Poppins", sans-serif; color: var(--tinta-2); cursor: pointer; }
.cor-abas button[aria-selected="true"] { background: var(--papel); color: var(--tinta); box-shadow: 0 0 0 1px var(--linha-forte), 0 1px 2px rgba(0, 0, 0, .06); }
.sem-js .cor-abas, .sem-js .cor-manual { display: none; }
.cor-grade { display: grid; grid-template-columns: repeat(6, 44px); gap: 10px; }
.cor-tile { width: 44px; height: 44px; padding: 0; border: 0; border-radius: 12px; background: none; cursor: pointer; line-height: 0; transition: transform .12s ease; }
.cor-tile svg { width: 44px; height: 44px; border-radius: 12px; }
.cor-tile:hover { transform: translateY(-1px); }
.cor-tile .marca { display: none; }
.cor-tile[aria-checked="true"] .marca { display: inline; }
.cor-tile[aria-checked="true"] svg { box-shadow: 0 0 0 2px var(--papel), 0 0 0 4px var(--tinta); }
.cor-tile:focus-visible { box-shadow: none; outline: 2px solid var(--cor-escritorio-tinta); outline-offset: 4px; }
.cor-nome { margin-top: 12px; font-size: 12.5px; color: var(--tinta-2); min-height: 18px; }
.cor-manual { display: grid; gap: 12px; }
.cor-manual[hidden] { display: none; }
.cor-sv { position: relative; height: 168px; border-radius: 12px; cursor: crosshair; touch-action: none;
          background: linear-gradient(to top, #000, rgba(0, 0, 0, 0)), linear-gradient(to right, #fff, rgba(255, 255, 255, 0)), var(--matiz, #0047FF); }
.cor-sv-pino { position: absolute; width: 20px; height: 20px; margin: -10px 0 0 -10px; border-radius: 50%; border: 3px solid #fff; background: var(--pino-cor, transparent); box-shadow: 0 0 0 1px rgba(0, 0, 0, .25), 0 2px 6px rgba(0, 0, 0, .3); pointer-events: none; }
.cor-matiz { position: relative; height: 14px; border-radius: 7px; cursor: pointer; touch-action: none;
             background: linear-gradient(to right, #F00 0%, #FF0 16.66%, #0F0 33.33%, #0FF 50%, #00F 66.66%, #F0F 83.33%, #F00 100%); }
.cor-matiz-pino { position: absolute; top: 50%; width: 20px; height: 20px; margin: -10px 0 0 -10px; border-radius: 50%; border: 3px solid #fff; background: var(--pino-cor, #F00); box-shadow: 0 0 0 1px rgba(0, 0, 0, .25), 0 2px 6px rgba(0, 0, 0, .3); pointer-events: none; }
.cor-sv:focus-visible, .cor-matiz:focus-visible { box-shadow: 0 0 0 3px var(--cor-escritorio-foco); }
.cor-rodape { display: flex; align-items: center; gap: 8px; margin-top: 16px; flex-wrap: wrap; }
.cor-atual { flex: 0 0 34px; width: 34px; height: 34px; border-radius: 9px; background: var(--cor-escritorio); box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .12); }
.cor-rodape input[type=text] { width: 96px; min-height: 34px; height: 34px; padding: 0 10px; font-family: ui-monospace, "Cascadia Mono", Consolas, monospace; font-size: 13px; text-transform: uppercase; }
.cor-rodape .botao[disabled] { opacity: .45; cursor: default; }
.cor-status { margin-top: 8px; font-size: 12.5px; color: var(--tinta-3); min-height: 18px; }
.cor-status.ok { color: var(--ok); }
.cor-status.erro { color: var(--erro); }
.cor-previa { align-self: start; display: flex; flex-direction: column; }
@media (max-width: 1180px) { .cor-painel { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 420px) { .cor-grade { grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 8px; } .cor-tile, .cor-tile svg { width: 100%; height: auto; aspect-ratio: 1; } }

/* =====================================================================================
   INÍCIO v2 (2026-11-09, nota do Teddy): evolução no cartão, propostas em aberto, carteira
   pela pior situação, cinza com leitura, sem linha dupla e movimento curto ao abrir.
   ===================================================================================== */
:root { --tinta-3: #6B7383; }
[data-tema="escuro"] { --tinta-3: #858585; }
.metrica-marca .variacao { font-size: 13px; margin-top: 2px; }
.metrica-marca .variacao b { font-weight: 600; }
.linha-evolucao { display: block; width: 100%; height: 46px; margin-top: 14px; overflow: visible; color: inherit; }
.linha-evolucao .traco { fill: none; stroke: currentColor; stroke-width: 2px; stroke-linejoin: round; stroke-linecap: round; }
.linha-evolucao .area { fill: currentColor; opacity: .1; }
.eixo-evolucao { display: flex; justify-content: space-between; font-size: 11px; opacity: .65; margin-top: 4px; }
.metrica-marca .barra-carteira { max-width: none; margin-top: 14px; opacity: 1; }
.barra-carteira .parte-ok { fill: currentColor; }
.barra-carteira .parte-meta { fill: currentColor; opacity: .5; }
.barra-carteira .parte-eq { fill: currentColor; opacity: .2; }
.metricas .taxa-aceite { margin-top: 10px; padding-top: 10px; border-top: 1px solid var(--linha); color: var(--tinta-2); }
.metricas .taxa-aceite b { font-weight: 600; color: var(--tinta); }

/* sem linha dupla: a última linha de uma lista não fecha com borda quando vem outra seção */
.secao:not(:last-child) .linhas .linha-item:last-child { border-bottom: 0; }

/* carteira: régua mais larga e legenda das faixas */
.cab-secao { gap: 16px; }
.cab-secao h2 { margin-right: auto; }
.legenda-faixas { display: flex; gap: 14px; font-size: 12px; color: var(--tinta-3); }
.legenda-faixas span { display: inline-flex; align-items: center; gap: 6px; }
.legenda-faixas i { width: 14px; height: 4px; border-radius: 2px; }
.legenda-faixas .f-erro { background: var(--z-erro-cheia); }
.legenda-faixas .f-atencao { background: var(--z-atencao-cheia); }
.legenda-faixas .f-ok { background: var(--z-ok-cheia); }
@media (min-width: 1101px) { .lista-carteira .linha-item { grid-template-columns: minmax(0, 1fr) 320px 140px 130px; } .lista-carteira .mini-regua { max-width: 320px; } }
@media (max-width: 860px) { .legenda-faixas { display: none; } }

/* propostas com situação: no celular a situação continua visível */
@media (max-width: 860px) { .linha-item.tres.com-situacao .fim { display: block; grid-column: 1 / -1; grid-row: 3; text-align: left; } }
.selo.recusada { color: var(--tinta-3); }

/* movimento curto ao abrir (o "reduzir movimento" do aparelho desliga tudo) */
@keyframes desenhar { from { stroke-dasharray: 1; stroke-dashoffset: 1; } to { stroke-dasharray: 1; stroke-dashoffset: 0; } }
@keyframes surgir { from { opacity: 0; } to { opacity: 1; } }
@keyframes crescer { from { transform: scaleX(0); } to { transform: scaleX(1); } }
.linha-evolucao .traco { animation: desenhar .9s cubic-bezier(.3, .7, .2, 1) both; }
.linha-evolucao .area { animation: surgir .9s ease-out both; }
.mini-regua .z.ativa, .barra-carteira rect { transform-box: fill-box; transform-origin: left center; animation: crescer .45s cubic-bezier(.3, .7, .2, 1) both; }
.mini-regua .pino-mini { animation: surgir .3s ease-out .3s both; }
.lista-carteira .linha-item:nth-child(2) .z.ativa { animation-delay: .04s; }
.lista-carteira .linha-item:nth-child(3) .z.ativa { animation-delay: .08s; }
.lista-carteira .linha-item:nth-child(4) .z.ativa { animation-delay: .12s; }
.lista-carteira .linha-item:nth-child(n+5) .z.ativa { animation-delay: .16s; }

/* ajustes depois dos prints: área da linha com fill-opacity (a animação mexe na opacity), situação da proposta com espaço,
   cartão de honorários ocupando a altura dos outros dois empilhados */
.linha-evolucao .area { opacity: 1; fill-opacity: .14; }
@media (min-width: 861px) { .linha-item.tres.com-situacao { grid-template-columns: minmax(0, 1fr) 150px 230px; } }
@media (min-width: 861px) { .metricas { grid-template-columns: 1.25fr 1fr; } .metricas > .metrica-marca { grid-row: span 2; } .metricas > div:not(.metrica-marca) { padding: 18px 24px; } }

/* cor do escritório muito escura no modo escuro: o cartão não some no fundo */
[data-tema="escuro"] .metrica-marca { box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .09), 0 14px 34px rgba(0, 0, 0, .35); }

/* gráfico da evolução: aparece da esquerda para a direita, meses do mais antigo ao atual com o ano,
   e ao passar o mouse (ou com as setas) mostra o mês, o valor e quantos clientes */
.grafico-evolucao { position: relative; margin-top: 14px; outline: none; cursor: crosshair; }
.grafico-evolucao .linha-evolucao { margin-top: 0; }
.linha-evolucao .traco { animation: none; }
.linha-evolucao .area { animation: none; }
@keyframes revelar { from { clip-path: inset(0 100% 0 0); } to { clip-path: inset(0 0 0 0); } }
.linha-evolucao { animation: revelar .9s cubic-bezier(.3, .7, .2, 1) both; }
.guia-grafico { position: absolute; top: -4px; bottom: 0; width: 1px; margin-left: -.5px; background: currentColor; opacity: .35; pointer-events: none; }
.marca-grafico { position: absolute; width: 10px; height: 10px; margin: -5px 0 0 -5px; border-radius: 50%; background: currentColor; box-shadow: 0 0 0 3px var(--cor-escritorio); pointer-events: none; }
.dica-grafico { position: absolute; bottom: calc(100% + 8px); z-index: 3; transform: translateX(-50%); padding: 8px 11px; border-radius: 10px; background: var(--papel); color: var(--tinta); box-shadow: 0 8px 24px rgba(0, 0, 0, .18), 0 0 0 1px var(--linha); font-size: 12px; line-height: 1.4; white-space: nowrap; pointer-events: none; }
.dica-grafico strong { display: block; font-weight: 600; font-size: 13px; }
.dica-grafico span { color: var(--tinta-2); }
.grafico-evolucao:focus-visible { box-shadow: 0 0 0 2px currentColor; border-radius: 6px; }
.eixo-evolucao { display: flex; justify-content: space-between; gap: 2px; font-size: 10.5px; }
.eixo-evolucao span { flex: 0 0 auto; }
@media (max-width: 1200px) { .eixo-evolucao span:not(.chave) { visibility: hidden; } }

/* segunda nota do Teddy: cartão sem vazio no pé (o gráfico ocupa a altura que sobra), rótulos do eixo só nas
   pontas em tela estreita, tarja neutra discreta no escuro, propostas mais juntas e ponto em todas as situações */
.metrica-marca { display: flex; flex-direction: column; }
.metrica-marca .grafico-evolucao { flex: 1 1 auto; display: flex; min-height: 46px; }
.metrica-marca .grafico-evolucao .linha-evolucao { height: auto; min-height: 46px; flex: 1 1 auto; }
@media (max-width: 1200px) { .eixo-evolucao span:not(.chave) { visibility: hidden; } }
[data-tema="escuro"] .linha-item.alerta::before { background: #3A3A3A; }
[data-tema="escuro"] .linha-item.alerta.alerta-erro::before { background: #E2675D; }
[data-tema="escuro"] .linha-item.alerta.alerta-atencao::before { background: #D9A441; }
@media (min-width: 861px) {
  .linha-item.tres.com-situacao { grid-template-columns: minmax(0, 1fr) 170px 250px; }
  .linha-item.tres.com-situacao .valor-linha { text-align: left; }
  .linha-item.tres.com-situacao .fim { text-align: left; }
}
.selo.neutro.com-ponto::before { display: inline-block; background: var(--tinta-3); }
.selo.neutro.com-ponto { color: var(--tinta-2); }
.eixo-evolucao.posicionado { position: relative; display: block; height: 16px; }
.eixo-evolucao.posicionado span { position: absolute; top: 0; transform: translateX(-50%); white-space: nowrap; }
.eixo-evolucao.posicionado span:first-child { transform: none; }
.eixo-evolucao.posicionado span:last-child { transform: translateX(-100%); }
/* gráfico com a altura que sobra no cartão (sem crescer pela proporção do desenho) */
.metrica-marca .grafico-evolucao { position: relative; display: block; flex: 1 1 0; min-height: 56px; }
.metrica-marca .grafico-evolucao .linha-evolucao { position: absolute; inset: 0; width: 100%; height: 100%; min-height: 0; }

/* ================================================================ lateral, caminho B escolhido pelo Vx (2026-11-09)
   "by Virtual Hub" pequeno em cima, com um fio até a borda; a logo do sistema embaixo; um fio separa o topo do resto.
   Contrato: PRECIFICA/prototipos/lateral-v1/index.html, opção B. */
.lateral { padding-top: 22px; }
.lateral-topo { align-items: flex-start; padding: 0 8px 20px; margin: 0 0 22px; border-bottom: 1px solid var(--linha); }
.marca-lateral { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 14px; }
.por-vh { display: flex; align-items: center; gap: 10px; padding: 0; font-size: 13px; font-weight: 500; line-height: 1; color: #8D97A6; letter-spacing: 0; }
.por-vh .vh-link { display: inline-flex; align-items: center; gap: 7px; margin: -4px -6px; padding: 4px 6px; border-radius: 6px; color: inherit; text-decoration: none; }
.por-vh .vh-link:hover { background: var(--hover, rgba(0, 0, 0, .04)); text-decoration: none; }
.por-vh .vh-link:hover img { opacity: 1; }
.por-vh .vh-link:focus-visible { box-shadow: var(--foco); outline: none; }
.por-vh img { height: 15px; width: auto; opacity: .8; transition: opacity .15s ease; }
.por-vh .fio { flex: 1; height: 1px; background: var(--linha); }
.por-vh img.so-escuro { display: none; }
[data-tema="escuro"] .por-vh { color: #7A7A7A; }
[data-tema="escuro"] .por-vh img.so-escuro { display: block !important; }
[data-tema="escuro"] .por-vh img.so-claro { display: none !important; }
.lateral .produto { align-self: flex-start; }
.lateral .logo-produto { height: 40px; }
.lateral-topo .fechar-menu { margin-left: 10px; }
.lateral-escritorio { margin: 0 10px 22px; }
.lateral .nav-acao { margin: 0 2px 28px; }
/* item em que a pessoa está: fundo suave na cor do escritório, ícone na cor dele */
.nav a.ativo, [data-tema="escuro"] .nav a.ativo { background: var(--cor-escritorio-suave); color: var(--tinta); font-weight: 600; box-shadow: none; }
.nav a.ativo .contador, [data-tema="escuro"] .nav a.ativo .contador { box-shadow: none; }

/* ================================================================ PRIMEIRO ACESSO (2026-11-09)
   Boas-vindas, os 3 passos do cadastro e o "pronto". Contrato: prototipos/fluxos-v2/index.html, cadastro em
   "Primeiro acesso". A cor de destaque é a do escritório. */
/* boas-vindas */
.bv { max-width: 720px; margin: 24px auto 40px; }
.bv h1 { margin: 2px 0 10px; font-size: 32px; }
.bv-intro { margin: 0; color: var(--tinta-2); font-size: 15px; line-height: 1.65; }
.bv-intro strong { color: var(--tinta); font-weight: 600; }
.bv-passos { list-style: none; margin: 28px 0 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.bv-passos li { display: flex; flex-direction: column; gap: 12px; padding: 18px; border: 1px solid var(--linha); border-radius: var(--raio-g); background: var(--papel); }
.bv-passos strong { display: block; font-weight: 600; font-size: 14.5px; color: var(--tinta); }
.bv-passos small { display: block; margin-top: 3px; color: var(--tinta-2); font-size: 12.5px; line-height: 1.5; }
.bv-n { width: 30px; height: 30px; border-radius: 9px; display: grid; place-items: center; background: var(--cor-escritorio-suave); color: var(--cor-escritorio-tinta); font-weight: 700; font-size: 13px; }
.bv-mao { margin-top: 16px; padding: 13px 16px; border-radius: 12px; background: var(--hover); color: var(--tinta-2); font-size: 13px; }
.bv-mao strong { color: var(--tinta); font-weight: 600; }
.bv-acoes { display: flex; align-items: center; gap: 18px; margin-top: 26px; flex-wrap: wrap; }
.bv-acoes .botao { min-width: 180px; }
.bv-depois { color: var(--tinta-2); font-weight: 500; font-size: 13.5px; }
.bv-depois:hover { color: var(--tinta); }
.bv-nota { margin: 14px 0 0; font-size: 12.5px; color: var(--tinta-3); }
@media (max-width: 720px) { .bv { margin-top: 4px; } .bv h1 { font-size: 26px; } .bv-passos { grid-template-columns: 1fr; } .bv-passos li { flex-direction: row; align-items: flex-start; } .bv-n { flex: 0 0 30px; } }

/* os 3 passos */
.pp-passos { display: flex; gap: 6px; margin: 0 0 26px; padding: 0; list-style: none; flex-wrap: wrap; }
.pp-passos button { display: flex; align-items: center; gap: 9px; padding: 7px 14px 7px 7px; border: 1px solid var(--linha); border-radius: 999px; background: var(--papel); color: var(--tinta-2); cursor: pointer; font: 500 13px "Poppins", sans-serif; }
.pp-n { width: 24px; height: 24px; border-radius: 50%; display: grid; place-items: center; background: var(--hover); font-size: 12px; font-weight: 600; color: var(--tinta-3); }
.pp-passos li.feito .pp-n { background: var(--ok-fundo); color: var(--ok); }
.pp-passos li.atual button { border-color: var(--cor-escritorio-tinta); color: var(--tinta); box-shadow: 0 0 0 1px var(--cor-escritorio-tinta); }
.pp-passos li.atual .pp-n { background: var(--cor-escritorio); color: var(--cor-escritorio-texto); }
.pp-grade { display: grid; grid-template-columns: minmax(0, 1fr) 360px; gap: 40px; align-items: start; }
@media (max-width: 1120px) { .pp-grade { grid-template-columns: 1fr; gap: 24px; } }
.pp-etapa + .pp-etapa { margin-top: 36px; padding-top: 28px; border-top: 1px solid var(--linha); }
.pp.pp-js .pp-etapa + .pp-etapa { margin-top: 0; padding-top: 0; border-top: 0; }
.pp-etapa h2 { margin: 0 0 4px; font-size: 19px; letter-spacing: -.01em; }
.pp-desc { margin: 0 0 22px; color: var(--tinta-2); max-width: 640px; }
.pp-meio .afixo { max-width: calc(50% - 10px); }
@media (max-width: 640px) { .pp-meio .afixo { max-width: none; } }
.pp-mais { margin-top: 14px; border: 1px solid var(--linha); border-radius: 12px; background: var(--papel); }
.pp-mais summary { cursor: pointer; list-style: none; padding: 12px 16px; font-weight: 500; font-size: 13px; color: var(--tinta-2); display: flex; justify-content: space-between; gap: 10px; }
.pp-mais summary::-webkit-details-marker { display: none; }
.pp-mais summary::after { content: "+"; color: var(--tinta-3); }
.pp-mais[open] summary::after { content: "\2212"; }
.pp-dentro { padding: 4px 16px 16px; }
.pp-usar-soma { margin-top: 12px; }
.pp-conta { margin-top: 14px; padding: 12px 14px; border-radius: 12px; background: var(--cor-escritorio-suave); color: var(--tinta); font-size: 13px; }
.pp-conta b { font-weight: 600; }
.pp-pergunta { margin: 0; padding: 18px 0; border: 0; border-top: 1px solid var(--linha); min-width: 0; }
.pp-pergunta.pp-primeira { border-top: 0; padding-top: 0; }
.pp-pergunta > .rotulo { font-size: 14.5px; padding: 0; }
.pp-ajuda-topo { margin: 0 0 12px; }
.pp-setores { border-top: 1px solid var(--linha); }
.pp-setor { display: grid; grid-template-columns: minmax(0, 1fr) auto 100px; gap: 16px; align-items: center; padding: 10px 2px; border-bottom: 1px solid var(--linha); }
.pp-setor strong { display: block; font-weight: 500; }
.pp-setor small { display: block; color: var(--tinta-3); font-size: 12px; }
.pp-cap { font-size: 12px; color: var(--tinta-3); text-align: right; white-space: nowrap; }
.pp-contador { display: inline-flex; align-items: center; border: 1px solid var(--linha-forte); border-radius: 10px; overflow: hidden; background: var(--papel); }
.pp-contador button { width: 36px; height: 38px; border: 0; background: var(--hover); font-size: 17px; color: var(--tinta-2); cursor: pointer; }
.pp-contador button:hover { color: var(--tinta); }
.pp-contador input, .pp-contador input:focus { width: 48px; height: 38px; min-height: 0; border: 0; padding: 0; text-align: center; font-weight: 500; background: transparent; color: var(--tinta); box-shadow: none; }
.com-erro .pp-contador { border-color: var(--erro); }
.pp-total-setores { margin-top: 10px; font-size: 13px; color: var(--tinta-2); text-align: right; }
.pp-total-setores b { color: var(--tinta); font-weight: 600; }
.pp-dias { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.pp-dia { display: block; cursor: pointer; }
.pp-dia-caixa { display: block; height: 100%; padding: 14px 16px; border: 1px solid var(--linha-forte); border-radius: 12px; background: var(--papel); }
.pp-dia-caixa strong { display: block; font-weight: 500; color: var(--tinta); }
.pp-dia-caixa small { display: block; color: var(--tinta-3); font-size: 12px; margin-top: 2px; }
.pp-dia:hover .pp-dia-caixa { border-color: var(--tinta-3); }
.pp-dia input:checked + .pp-dia-caixa { border-color: var(--cor-escritorio-tinta); box-shadow: inset 0 0 0 1px var(--cor-escritorio-tinta); background: var(--cor-escritorio-suave); }
.pp-dia input:focus-visible + .pp-dia-caixa { box-shadow: var(--foco); }
.pp-depois { margin-top: 22px; padding: 14px 16px; border: 1px dashed var(--linha-forte); border-radius: 12px; font-size: 13px; color: var(--tinta-2); }
.pp-depois strong { color: var(--tinta); font-weight: 500; }
.pp-rodape { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin-top: 28px; padding-top: 20px; border-top: 1px solid var(--linha); }
.pp-direita { display: flex; gap: 8px; margin-left: auto; }
.pp-rodape .invisivel { visibility: hidden; }
.pp-resumo { border: 1px solid var(--linha-forte); border-radius: 16px; background: var(--papel); overflow: hidden; box-shadow: 0 12px 32px rgba(10, 35, 70, .06); }
.pp-topo { padding: 20px 22px 16px; }
.pp-rot { font-size: 12.5px; color: var(--tinta-3); }
.pp-grande { font-size: 38px; font-weight: 300; letter-spacing: -.035em; line-height: 1.15; margin-top: 2px; color: var(--tinta); }
.pp-grande.pp-vazio { color: var(--tinta-3); }
.pp-sub { font-size: 12.5px; color: var(--tinta-2); margin-top: 4px; }
.pp-resumo dl { margin: 0; padding: 4px 22px 14px; border-top: 1px solid var(--linha); }
.pp-resumo dl div { display: flex; justify-content: space-between; gap: 12px; padding: 9px 0; border-bottom: 1px solid var(--linha); font-size: 13px; }
.pp-resumo dl div:last-child { border-bottom: 0; }
.pp-resumo dt { color: var(--tinta-2); }
.pp-resumo dd { margin: 0; font-weight: 500; text-align: right; color: var(--tinta); }
.pp-resumo dd.pp-vazio { color: var(--tinta-3); font-weight: 400; }
.pp-explica { padding: 12px 22px 16px; background: var(--fundo); border-top: 1px solid var(--linha); font-size: 12.5px; color: var(--tinta-2); }
.pp-resumo [data-pp-painel] + [data-pp-painel] { border-top: 1px solid var(--linha); }
.pp.pp-js .pp-resumo [data-pp-painel] + [data-pp-painel] { border-top: 0; }
@media (max-width: 720px) { .pp-dias { grid-template-columns: 1fr; } .pp-setor { grid-template-columns: minmax(0, 1fr) auto; } .pp-cap { display: none; } .pp-rodape .botao.grande { padding: 0 16px; } }
[data-tema="escuro"] .pp-resumo { box-shadow: none; }

/* pronto */
.pp-fim { max-width: 640px; margin: 40px auto; text-align: center; }
.pp-selo { width: 56px; height: 56px; margin: 0 auto 16px; border-radius: 50%; display: grid; place-items: center; background: var(--ok-fundo); color: var(--ok); font-size: 26px; }
.pp-fim h1 { font-size: 28px; margin: 0 0 8px; }
.pp-fim-texto { margin: 0 auto; color: var(--tinta-2); max-width: 520px; }
.pp-fim-texto strong { color: var(--tinta); font-weight: 600; }
.pp-fim-acoes { display: flex; justify-content: center; gap: 10px; margin-top: 24px; flex-wrap: wrap; }
.pp-proximos { margin: 22px auto 0; padding: 14px 16px; border: 1px solid var(--linha); border-radius: 12px; background: var(--papel); text-align: left; font-size: 13px; color: var(--tinta-2); }
.pp-proximos strong { color: var(--tinta); font-weight: 500; }

/* ================================================================ BOAS-VINDAS ANIMADA, jeito Apple (2026-11-09, pedido do Vx)
   Luz suave em movimento atrás (cores derivadas da cor do escritório), "Boas-vindas," entrando do desfoque,
   o nome grande em degradê com um brilho que passa, e a saída que atravessa a tela. Depois o caminho de cadastro
   entra em sequência. Só com JavaScript; sem nada disso para quem pede "reduzir movimento". */
html.bv-travado { overflow: hidden; }
.bv-cena { position: fixed; inset: 0; z-index: 200; display: grid; place-items: center; overflow: hidden; cursor: pointer; background: var(--bv-base);
  --bv-base: #0B2766; --bv-a: #1F5BD6; --bv-b: #5B3FD0; --bv-c: #138BB8; }
.bv-aurora { position: absolute; inset: -25%; filter: blur(80px) saturate(1.15); opacity: 0; animation: bv-aurora-entra 1.8s .05s cubic-bezier(.16, 1, .3, 1) forwards; }
.bv-aurora i { position: absolute; width: 52vmax; height: 52vmax; border-radius: 50%; opacity: .9; }
.bv-aurora i:nth-child(1) { left: 6%; top: 18%; background: var(--bv-a); animation: bv-deriva-1 9s ease-in-out infinite alternate; }
.bv-aurora i:nth-child(2) { right: 4%; top: 2%; background: var(--bv-b); animation: bv-deriva-2 11s ease-in-out infinite alternate; }
.bv-aurora i:nth-child(3) { left: 34%; bottom: -6%; background: var(--bv-c); animation: bv-deriva-3 10s ease-in-out infinite alternate; }
[data-tema="escuro"] .bv-aurora i { opacity: .75; }
.bv-cena-texto { position: relative; z-index: 1; text-align: center; padding: 0 24px; }
/* brilho do fundo: uma luz clara que acende atrás do nome quando ele aparece */
.bv-cena::after { content: ""; position: absolute; left: 50%; top: 50%; width: 70vmax; height: 38vmax; transform: translate(-50%, -50%) scale(.8);
  background: radial-gradient(closest-side, rgba(255, 255, 255, .22), rgba(255, 255, 255, 0)); opacity: 0; pointer-events: none;
  animation: bv-luz-fundo 2.6s .6s cubic-bezier(.16, 1, .3, 1) forwards; }
[data-tema="escuro"] .bv-cena::after { opacity: 0; animation: none; }
@keyframes bv-luz-fundo { 45% { opacity: 1; transform: translate(-50%, -50%) scale(1.05); } to { opacity: .75; transform: translate(-50%, -50%) scale(1); } }
.bv-cena-oi { font-size: clamp(20px, 2.6vw, 30px); font-weight: 500; letter-spacing: -.015em; color: rgba(255, 255, 255, .82);
  animation: bv-foco 1.1s .3s cubic-bezier(.16, 1, .3, 1) both; }
/* o nome em cor sólida (a cor do escritório); o degradê e o brilho ficam só no fundo (pedido do Vx) */
.bv-cena-nome { margin: 2px 0 0; padding: 0 .04em .1em; font-size: clamp(64px, 11.5vw, 150px); font-weight: 600; letter-spacing: -.055em; line-height: 1.02;
  color: #FFFFFF; text-shadow: 0 2px 30px rgba(0, 0, 0, .12); animation: bv-nome 1.5s .65s cubic-bezier(.16, 1, .3, 1) both; }
.bv-cena-sub { margin-top: 14px; font-size: clamp(15px, 1.7vw, 19px); font-weight: 400; color: rgba(255, 255, 255, .78);
  animation: bv-foco 1.1s 1.55s cubic-bezier(.16, 1, .3, 1) both; }
.bv-pular { position: absolute; right: 24px; bottom: 22px; padding: 8px 14px; border: 0; border-radius: 999px; background: rgba(255, 255, 255, .16);
  color: rgba(255, 255, 255, .9); font: 500 13px "Poppins", sans-serif; cursor: pointer; backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
  animation: bv-foco .6s 1s ease both; }
.bv-pular:hover { color: #FFFFFF; background: rgba(255, 255, 255, .26); }
.bv-pular:focus-visible { box-shadow: var(--foco); outline: none; }
/* saída: o texto vem na direção de quem olha e se desfaz, a luz apaga */
.bv-cena.sai { animation: bv-some 1s cubic-bezier(.65, 0, .35, 1) forwards; pointer-events: none; }
.bv-cena.sai .bv-cena-texto { animation: bv-atravessa .9s cubic-bezier(.65, 0, .35, 1) forwards; }
@keyframes bv-aurora-entra { to { opacity: 1; } }
@keyframes bv-deriva-1 { to { transform: translate(8vmax, 5vmax) scale(1.12); } }
@keyframes bv-deriva-2 { to { transform: translate(-7vmax, 8vmax) scale(.9); } }
@keyframes bv-deriva-3 { to { transform: translate(5vmax, -7vmax) scale(1.08); } }
@keyframes bv-foco { from { opacity: 0; filter: blur(14px); transform: translateY(10px) scale(1.02); } to { opacity: 1; filter: none; transform: none; } }
@keyframes bv-nome { from { opacity: 0; filter: blur(22px); letter-spacing: .02em; transform: scale(.93); } to { opacity: 1; filter: none; letter-spacing: -.055em; transform: none; } }
@keyframes bv-some { 0%, 35% { opacity: 1; } 100% { opacity: 0; visibility: hidden; } }
@keyframes bv-atravessa { to { opacity: 0; filter: blur(18px); transform: scale(1.12); } }
/* o caminho de cadastro entra em sequência, saindo do desfoque */
.bv.entrando [data-bv-entra] { animation: bv-foco .9s cubic-bezier(.16, 1, .3, 1) both; animation-delay: calc(.15s + var(--i, 0) * 70ms); }

/* pronto: o check se desenha, como no Apple Pay */
.pp-check { display: block; width: 64px; height: 64px; margin: 0 auto 18px; overflow: visible; }
.pp-check circle { fill: var(--ok-fundo); stroke: var(--ok); stroke-width: 2.5px; stroke-dasharray: 1; stroke-dashoffset: 1; transform: rotate(-90deg); transform-origin: 50% 50%;
  animation: pp-traca .75s .15s cubic-bezier(.65, 0, .35, 1) forwards; }
.pp-check path { fill: none; stroke: var(--ok); stroke-width: 4px; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 1; stroke-dashoffset: 1;
  animation: pp-traca .45s .8s cubic-bezier(.65, 0, .35, 1) forwards; }
.pp-fim .pp-entra { animation: bv-foco .9s cubic-bezier(.16, 1, .3, 1) both; animation-delay: calc(.9s + var(--i, 0) * 90ms); }
@keyframes pp-traca { to { stroke-dashoffset: 0; } }
@media (prefers-reduced-motion: reduce) { .pp-check circle, .pp-check path { stroke-dashoffset: 0; } }

/* ================================================================ IMPORTAR CLIENTES (2026-11-09, pedido do Vx) */
.imp-envio { max-width: 760px; }
.imp-alvo { display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 36px 24px; border: 1.5px dashed var(--linha-forte); border-radius: 16px; background: var(--papel); text-align: center; cursor: pointer; transition: border-color .15s ease, background .15s ease; }
.imp-alvo:hover, .imp-alvo.arrastando { border-color: var(--cor-escritorio-tinta); background: var(--cor-escritorio-suave); }
.imp-envio input[type=file]:focus-visible + .imp-rodape, .imp-alvo:focus-within { box-shadow: var(--foco); }
.imp-icone { width: 34px; height: 34px; color: var(--cor-escritorio-tinta); margin-bottom: 4px; }
.imp-alvo strong { font-size: 15px; font-weight: 600; color: var(--tinta); }
.imp-alvo small { max-width: 520px; color: var(--tinta-3); font-size: 12.5px; }
.imp-alvo .botao { margin-top: 10px; pointer-events: none; }
.imp-rodape { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-top: 14px; }
.imp-rodape .ajuda { margin: 0; max-width: 440px; }
.imp-dicas { max-width: 760px; margin-top: 34px; padding-top: 22px; border-top: 1px solid var(--linha); }
.imp-dicas h2 { font-size: 15px; margin: 0 0 8px; }
.imp-dicas ul { margin: 0; padding-left: 18px; color: var(--tinta-2); font-size: 13px; display: grid; gap: 6px; }
.imp-dicas strong { color: var(--tinta); font-weight: 500; }
.imp-resumo { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; margin: 4px 0 16px; }
.imp-resumo > div { padding: 14px 16px; border: 1px solid var(--linha); border-radius: 12px; background: var(--papel); }
.imp-resumo b { display: block; font-size: 24px; font-weight: 500; letter-spacing: -.02em; color: var(--tinta); }
.imp-resumo span { font-size: 12.5px; color: var(--tinta-2); }
.imp-resumo > div:first-child { border-color: var(--cor-escritorio-tinta); background: var(--cor-escritorio-suave); }
.imp-resumo > .atencao b { color: var(--atencao); }
.imp-resumo > .neutro b { color: var(--tinta-3); }
.imp-colunas { margin: 0 0 14px; font-size: 12.5px; color: var(--tinta-2); display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.imp-coluna { padding: 2px 9px; border-radius: 999px; background: var(--hover); color: var(--tinta); }
.imp-tabela td { vertical-align: top; }
.imp-tabela .imp-marca { width: 40px; }
.imp-tabela input[type=checkbox] { width: 17px; height: 17px; accent-color: var(--cor-escritorio); }
.imp-nome { font-weight: 500; }
.imp-origem { display: block; color: var(--tinta-3); font-size: 11.5px; margin-top: 2px; }
.imp-campo { width: 100%; min-width: 150px; height: 34px; padding: 0 10px; border: 1px solid var(--linha-forte); border-radius: 8px; background: var(--papel); color: var(--tinta); font: inherit; font-size: 13px; }
.imp-campo.com-erro-campo { border-color: var(--atencao); }
.imp-erro { display: block; color: var(--atencao); font-size: 11.5px; margin-top: 3px; }
.imp-tabela tr.imp-fora td { color: var(--tinta-3); }
.imp-tabela tr.imp-fora .imp-nome { font-weight: 400; }
.imp-final { position: sticky; bottom: 0; display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-top: 16px; padding: 14px 0; background: var(--fundo); border-top: 1px solid var(--linha); }
.imp-final .ajuda { margin: 0; max-width: 520px; }
.imp-botoes { display: flex; gap: 8px; flex-shrink: 0; }
.imp-filtro { margin: 0 0 14px; }
.imp-aviso-cliente { margin: 0 0 22px; }
.imp-completar { display: inline-flex; margin-top: 4px; font-size: 11.5px; }
.imp-duas { display: inline-flex; gap: 6px; }
.centro { text-align: center; }
@media (max-width: 760px) { .imp-resumo { grid-template-columns: repeat(2, minmax(0, 1fr)); } .imp-final { position: static; } .imp-tabela thead { display: none; }
  .imp-tabela tr { grid-template-columns: 26px minmax(0, 1fr) !important; }
  .imp-tabela tr > td:first-child { grid-column: 1 !important; grid-row: 1 / span 4; margin: 2px 0 0 !important; }
  .imp-tabela tr > td:not(:first-child) { grid-column: 2; }
  .imp-campo { min-width: 0; font-size: 14px; } .imp-rodape, .imp-final { flex-direction: column; align-items: stretch; } .imp-botoes { flex-direction: column-reverse; } }

/* ================================================================ LOGIN: painel da marca (2026-11-09, pedido do Vx)
   Painel escuro com a luz da marca em movimento (mesma linguagem da abertura de boas-vindas), conteúdo numa
   coluna centrada (logo, promessa, exemplo e assinatura alinhados pela mesma borda) e o exemplo em vidro. */
.publico .vitrine { position: relative; overflow: hidden; padding: 0; border-right: 0; color: #FFFFFF;
  background: #05112A; }
[data-tema="escuro"] .publico .vitrine { background: #040C1F; }
.vit-luz { position: absolute; inset: -20%; filter: blur(90px) saturate(1.1); pointer-events: none; }
.vit-luz i { position: absolute; width: 46vmax; height: 46vmax; border-radius: 50%; opacity: .5; }
.vit-luz i:nth-child(1) { left: -6%; top: 2%; background: #1E3A8A; animation: bv-deriva-1 14s ease-in-out infinite alternate; }
.vit-luz i:nth-child(2) { right: -12%; top: 30%; background: #43237F; opacity: .32; animation: bv-deriva-2 17s ease-in-out infinite alternate; }
.vit-luz i:nth-child(3) { left: 18%; bottom: -16%; background: #0B5566; opacity: .36; animation: bv-deriva-3 15s ease-in-out infinite alternate; }
/* logo e assinatura na borda esquerda do painel; promessa e exemplo numa coluna no meio */
.vit-miolo { position: relative; z-index: 1; width: 100%; min-height: 100%;
  display: flex; flex-direction: column; padding: 44px 56px 40px; }
.publico .vitrine .produto { padding: 0; }
.publico .vitrine .logo-produto { height: 48px; display: block; }
.vit-meio { width: 100%; max-width: 480px; margin: auto; padding: 48px 0; }
.publico .vitrine h2 { margin: 0 0 12px; max-width: none; text-wrap: balance; font-size: 34px; font-weight: 600; line-height: 1.15; letter-spacing: -.03em; color: #FFFFFF; }
.publico .vitrine p { max-width: none; margin: 0; font-size: 15px; line-height: 1.6; color: rgba(255, 255, 255, .72); }
/* o exemplo em vidro */
:is(html, [data-tema]) .publico .vitrine .visor { margin: 32px 0 0; max-width: none; color: #FFFFFF; border-radius: 18px;
  background: rgba(255, 255, 255, .07); border: 1px solid rgba(255, 255, 255, .14);
  backdrop-filter: blur(18px) saturate(1.2); -webkit-backdrop-filter: blur(18px) saturate(1.2);
  box-shadow: 0 24px 60px rgba(0, 0, 0, .28), inset 0 1px 0 rgba(255, 255, 255, .08);
  /* as três faixas em cor sólida e viva (pedido do Vx); o ponto branco mostra onde está o preço */
  --z-erro: #F26B63; --z-erro-cheia: #F26B63; --z-atencao: #F5B83F; --z-atencao-cheia: #F5B83F;
  --z-ok: #34D399; --z-ok-cheia: #34D399; }
:is(html, [data-tema]) .publico .vitrine .visor .topo-visor { padding: 22px 24px 4px; }
:is(html, [data-tema]) .publico .vitrine .visor .rot { color: rgba(255, 255, 255, .62); }
:is(html, [data-tema]) .publico .vitrine .visor .grande { color: #FFFFFF; font-weight: 500; }
:is(html, [data-tema]) .publico .vitrine .visor .grande small { color: rgba(255, 255, 255, .6); }
:is(html, [data-tema]) .publico .vitrine .visor .selo.atencao { color: #F3CC79; background: transparent !important; }
:is(html, [data-tema]) .publico .vitrine .visor .selo.ok { color: #7FE0B0; background: transparent !important; }
:is(html, [data-tema]) .publico .vitrine .visor .regua .legenda b { color: #FFFFFF; }
:is(html, [data-tema]) .publico .vitrine .visor .regua .legenda span { color: rgba(255, 255, 255, .6); }
:is(html, [data-tema]) .publico .vitrine .visor .regua .marco { background: rgba(255, 255, 255, .85); }
:is(html, [data-tema]) .publico .vitrine .visor .regua .pino { background: #FFFFFF; box-shadow: 0 0 0 5px rgba(255, 255, 255, .18), 0 2px 10px rgba(0, 0, 0, .4); }
:is(html, [data-tema]) .publico .vitrine .visor .regua .pino::after { background: #0B2766; }
:is(html, [data-tema]) .publico .vitrine .visor .dica { color: rgba(255, 255, 255, .55); border-top: 0; background: transparent; padding: 4px 24px 20px; }
/* assinatura: "Um produto da" + logo */
/* assinatura assentada no pé do painel, com um fio em cima; a logo na mesma linha de base do texto
   (as letras da logo ocupam 80% da altura da imagem e ficam a 10% do fundo, por isso a margem negativa) */
.publico .vitrine .vh { margin: 0; padding-top: 18px; border-top: 1px solid rgba(255, 255, 255, .12);
  display: flex; align-items: baseline; gap: .45em; font-size: 12.5px; letter-spacing: .01em; color: rgba(255, 255, 255, .6); }
.publico .vitrine .vh img { height: 1.12em; width: auto; margin-bottom: -.25em; position: relative; top: .12em; opacity: .9; display: block; }
/* lado do formulário: a caixa centrada na mesma altura do conteúdo da marca */
.publico .lado-form { padding: 48px 32px; }
.publico .caixa { max-width: 400px; }
@media (max-width: 900px) {
  .vit-miolo { max-width: none; min-height: 0; padding: 22px 20px 20px; }
  .vit-meio { padding: 18px 0 0; margin: 0; max-width: none; }
  .publico .vitrine .logo-produto { height: 38px; }
  .publico .vitrine h2 { font-size: 22px; margin: 0 0 6px; }
  .publico .vitrine p { font-size: 13px; }
  .publico .vitrine .vh { margin-top: 14px; }
  .publico .lado-form { padding: 28px 20px; }
}

@media (max-width: 900px) { .publico .vitrine .vh { border-top: 0; padding-top: 0; } }  /* no celular a régua colorida já separa a assinatura */

/* ================================================================ LOGIN: três slides no painel da marca (2026-11-09, pedido do Vx)
   Os três ficam empilhados no mesmo lugar (a altura não pula); só o ativo aparece. Sem JavaScript, fica o primeiro. */
.vit-slides { display: grid; }
.vit-slide { grid-area: 1 / 1; opacity: 0; visibility: hidden; transform: translateY(10px);
  transition: opacity .6s cubic-bezier(.16, 1, .3, 1), transform .6s cubic-bezier(.16, 1, .3, 1), visibility 0s .6s; }
.vit-slide.ativo { opacity: 1; visibility: visible; transform: none; transition: opacity .6s cubic-bezier(.16, 1, .3, 1), transform .6s cubic-bezier(.16, 1, .3, 1), visibility 0s; }
.vit-etiqueta { display: inline-block; margin-bottom: 14px; padding: 4px 10px; border-radius: 999px; font-size: 11.5px; font-weight: 600;
  letter-spacing: .02em; color: #F3CC79; background: rgba(243, 204, 121, .12); border: 1px solid rgba(243, 204, 121, .28); }
/* as barras de cima, como nos stories: a do slide atual enche com o tempo, as anteriores ficam cheias */
.vit-barras { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; margin: 0 0 30px; }
.vit-barras span { height: 3px; border-radius: 999px; background: rgba(255, 255, 255, .22); overflow: hidden; }
.vit-barras i { display: block; height: 100%; width: 100%; border-radius: inherit; background: #FFFFFF; transform: scaleX(0); transform-origin: left center; }
.vit-barras span.feito i { transform: scaleX(1); }
.vit-barras span.agora i { animation: vit-enche var(--tempo, 9000ms) linear forwards; }
.vit-barras.pausado span.agora i { animation-play-state: paused; }
@keyframes vit-enche { from { transform: scaleX(0); } to { transform: scaleX(1); } }
/* slide 2: a linha do tempo */
.vit-tempo { list-style: none; margin: 0; padding: 4px 24px 22px; display: grid; gap: 2px; }
.vit-tempo li { position: relative; display: grid; grid-template-columns: 96px minmax(0, 1fr); gap: 12px; padding: 9px 0 9px 18px; font-size: 13px; color: rgba(255, 255, 255, .78); }
.vit-tempo li::before { content: ""; position: absolute; left: 0; top: 15px; width: 8px; height: 8px; border-radius: 50%; background: rgba(255, 255, 255, .35); }
.vit-tempo li::after { content: ""; position: absolute; left: 3.5px; top: 25px; bottom: -11px; width: 1px; background: rgba(255, 255, 255, .16); }
.vit-tempo li:last-child::after { display: none; }
.vit-tempo li:first-child::before { background: #7FE0B0; box-shadow: 0 0 0 4px rgba(127, 224, 176, .2); }
.vit-tempo b { color: #FFFFFF; font-weight: 600; }
/* slide 3: a lista importada */
.vit-lista { list-style: none; margin: 0; padding: 2px 16px 16px; display: grid; gap: 6px; }
.vit-lista li { display: grid; grid-template-columns: 32px minmax(0, 1fr) auto; gap: 10px; align-items: center; padding: 9px 10px;
  border-radius: 12px; background: rgba(255, 255, 255, .06); }
.vit-ini { width: 32px; height: 32px; border-radius: 9px; display: grid; place-items: center; font-size: 11px; font-weight: 700;
  color: #FFFFFF; background: rgba(255, 255, 255, .14); }
.vit-lista b { display: block; font-size: 13px; font-weight: 500; color: #FFFFFF; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.vit-lista small { display: block; font-size: 11.5px; color: rgba(255, 255, 255, .55); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.vit-lista i { font-style: normal; font-size: 11.5px; font-weight: 600; }
.vit-lista i.ok { color: #7FE0B0; }
.vit-lista i.at { color: #F3CC79; }
@media (max-width: 900px) { .vit-slide:not(:first-child), .vit-barras { display: none !important; } .vit-slide:first-child { opacity: 1; visibility: visible; transform: none; } }

/* slide 3: a aba de anexo (o arquivo cai, a barra enche, a leitura termina); recomeça sempre que o slide entra */
.vit-anexo { padding: 18px; display: grid; gap: 12px; }
.vit-solta { display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 22px 16px 18px; text-align: center;
  border: 1.5px dashed rgba(255, 255, 255, .28); border-radius: 14px; background: rgba(255, 255, 255, .03); }
.vit-nuvem { width: 28px; height: 28px; color: rgba(255, 255, 255, .85); }
.vit-solta strong { font-size: 14px; font-weight: 500; color: #FFFFFF; }
.vit-formatos { display: flex; gap: 6px; margin-top: 4px; }
.vit-formatos i { font-style: normal; font-size: 11px; padding: 2px 8px; border-radius: 999px; color: rgba(255, 255, 255, .7); background: rgba(255, 255, 255, .08); }
.vit-arquivo { display: grid; grid-template-columns: 38px minmax(0, 1fr) 24px; gap: 12px; align-items: center; padding: 12px 14px;
  border-radius: 14px; background: rgba(255, 255, 255, .08); border: 1px solid rgba(255, 255, 255, .12); }
.vit-icone-planilha { width: 38px; height: 44px; border-radius: 7px; display: grid; place-items: center; font-size: 10.5px; font-weight: 700;
  letter-spacing: .04em; color: #FFFFFF; background: linear-gradient(160deg, #22A06B, #15803D); box-shadow: 0 4px 12px rgba(0, 0, 0, .2); }
.vit-arq-texto { display: grid; gap: 6px; min-width: 0; position: relative; }
.vit-arq-texto b { font-size: 13.5px; font-weight: 500; color: #FFFFFF; }
.vit-progresso { display: block; height: 4px; border-radius: 999px; background: rgba(255, 255, 255, .16); overflow: hidden; }
.vit-progresso i { display: block; height: 100%; width: 100%; border-radius: inherit; background: #7FE0B0; transform: scaleX(0); transform-origin: left; }
.vit-arq-texto small { grid-row: 3; grid-column: 1; font-size: 11.5px; }
.vit-lendo { color: rgba(255, 255, 255, .6); }
.vit-achou { color: #7FE0B0; opacity: 0; }
.vit-ok { width: 24px; height: 24px; border-radius: 50%; display: grid; place-items: center; font-size: 13px; color: #0B2766; background: #7FE0B0; opacity: 0; transform: scale(.4); }
.vit-slide.ativo .vit-arquivo { animation: vit-cai .7s .5s cubic-bezier(.16, 1, .3, 1) both; }
.vit-slide.ativo .vit-progresso i { animation: vit-carrega 2.4s 1.1s cubic-bezier(.45, 0, .2, 1) forwards; }
.vit-slide.ativo .vit-lendo { animation: vit-some 0.3s 3.5s ease forwards; }
.vit-slide.ativo .vit-achou { animation: vit-aparece .4s 3.6s ease forwards; }
.vit-slide.ativo .vit-ok { animation: vit-pula .5s 3.6s cubic-bezier(.2, 1.5, .4, 1) forwards; }
.vit-slide.ativo .vit-solta { animation: vit-recebe 1.2s .3s ease; }
@keyframes vit-cai { from { opacity: 0; transform: translateY(-26px) scale(.96); } to { opacity: 1; transform: none; } }
@keyframes vit-carrega { to { transform: scaleX(1); } }
@keyframes vit-some { to { opacity: 0; } }
@keyframes vit-aparece { to { opacity: 1; } }
@keyframes vit-pula { to { opacity: 1; transform: none; } }
@keyframes vit-recebe { 30% { border-color: rgba(127, 224, 176, .7); background: rgba(127, 224, 176, .08); } }
@media (prefers-reduced-motion: reduce) { .vit-progresso i { transform: none; } .vit-lendo { opacity: 0; } .vit-achou, .vit-ok { opacity: 1; transform: none; } }