@font-face { font-family: 'Poppins'; font-style: normal; font-weight: 300; font-display: swap; src: url('/site-assets/poppins-300-normal-78bc3aa7.woff2') format('woff2'); }
@font-face { font-family: 'Poppins'; font-style: italic; font-weight: 300; font-display: swap; src: url('/site-assets/poppins-300-italic-f0ae296f.woff2') format('woff2'); }
@font-face { font-family: 'Poppins'; font-style: normal; font-weight: 400; font-display: swap; src: url('/site-assets/poppins-400-normal-7d93459d.woff2') format('woff2'); }
@font-face { font-family: 'Poppins'; font-style: normal; font-weight: 500; font-display: swap; src: url('/site-assets/poppins-500-normal-cd36de20.woff2') format('woff2'); }
@font-face { font-family: 'Poppins'; font-style: normal; font-weight: 600; font-display: swap; src: url('/site-assets/poppins-600-normal-f4e80d9d.woff2') format('woff2'); }
@font-face { font-family: 'Poppins'; font-style: normal; font-weight: 700; font-display: swap; src: url('/site-assets/poppins-700-normal-9338e65f.woff2') format('woff2'); }
@font-face { font-family: 'Poppins'; font-style: normal; font-weight: 800; font-display: swap; src: url('/site-assets/poppins-800-normal-60bf0aba.woff2') format('woff2'); }
/* Site público do João Online. Desenho aprovado na ficha 00.1 (`docs/superpowers/specs/paginas-publicas/pp-00-fundacao/mockup-00.1.html`).
   Tokens com os mesmos valores do painel (`web/src/index.css`, tema claro); desvios "Site" do §10 do design system.
   Sempre claro, sem tema escuro (decisão 11 da análise). As @font-face da Poppins são postas na frente deste arquivo pelo build. */
:root {
  --navy: #001d43;
  --navy-2: #00306b;
  --azul: #1d4f91;
  --gelo: #c5d6ee;
  --nevoa: #9bb8de;
  --papel: #ffffff;
  --fundo: #f0f2f5;
  --linha: #e2e8f0;
  --tinta: #0f172a;
  --tinta-2: #334155;
  --tinta-3: #64748b;
  --ambar: #92400e;
  --ambar-fundo: #fffbeb;
  --verde: #047857;
  --verde-fundo: #ecfdf5;
  --display: 'Poppins', ui-sans-serif, system-ui, sans-serif;
  --curva: cubic-bezier(0.4, 0, 0.2, 1);
  color-scheme: light;
}
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--papel); color: var(--tinta); font-family: var(--display); font-size: 16px; line-height: 1.65; }
a { color: inherit; }
:focus-visible { outline: 2px solid var(--azul); outline-offset: 3px; border-radius: 4px; }
h1, h2, h3 { margin: 0; text-wrap: balance; letter-spacing: -0.035em; }
p { margin: 0; }
.fx { max-width: 1240px; margin: 0 auto; padding-left: max(20px, env(safe-area-inset-left, 0px)); padding-right: max(20px, env(safe-area-inset-right, 0px)); }
.pular { position: absolute; left: -9999px; top: 0; background: var(--papel); color: var(--navy); padding: 8px 14px; border-radius: 8px; z-index: 10; }
.pular:focus { left: 12px; top: 12px; }
.seta { width: 16px; height: 16px; stroke: currentColor; fill: none; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; transition: transform .2s var(--curva); flex: none; }

/* faixa da pré-visualização (só no build de prévia) */
.previa { background: var(--ambar-fundo); color: var(--ambar); font-size: 12.5px; border-bottom: 1px solid #fde68a; }
.previa .fx { padding-block: 8px; }

/* cabeçalho */
.topo { background: var(--navy); color: #fff; position: relative; z-index: 5; }
.topo .fx { display: flex; align-items: center; gap: 28px; padding-block: 12px; min-height: 76px; }
.wordmark { display: inline-flex; align-items: center; gap: 12px; font-weight: 800; font-size: 22px; letter-spacing: -0.045em; text-decoration: none; line-height: 1; }
.wordmark .simbolo { flex: none; width: 1.55em; height: 1.55em; }
.wordmark i { font-style: normal; font-weight: 300; color: var(--nevoa); }
/* Menu do computador; até 900 px ele vai para o <details> "Menu" (análise de 14/11/2026, D1). Alvos com 40 px de altura (WCAG 2.5.8). */
.topo nav { display: flex; flex-wrap: wrap; column-gap: 22px; font-size: 14px; flex: 1; }
.topo nav a { display: inline-flex; align-items: center; min-height: 40px; text-decoration: none; color: rgba(255,255,255,.72); transition: color .2s var(--curva); }
.topo nav a:hover, .topo nav a[aria-current="page"] { color: #fff; }
.falar { text-decoration: none; font-size: 14px; font-weight: 600; border-radius: 8px; padding: 10px 16px; background: #fff; color: var(--navy); transition: background .2s var(--curva); margin-left: auto; white-space: nowrap; }
.falar:hover { background: var(--gelo); }
.entrar { text-decoration: none; font-size: 14px; font-weight: 600; border: 1px solid rgba(255,255,255,.28); border-radius: 8px; padding: 9px 16px; transition: all .2s var(--curva); white-space: nowrap; }
.topo nav + .entrar, .topo .wordmark + .entrar { margin-left: auto; }
.entrar:hover { border-color: #fff; }
.menu-celular { display: none; }
.menu-celular summary { list-style: none; display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 0 14px; border-radius: 8px; border: 1px solid rgba(255,255,255,.28); font-size: 14px; font-weight: 600; cursor: pointer; user-select: none; }
.menu-celular summary::-webkit-details-marker { display: none; }
.menu-celular[open] summary { background: rgba(255,255,255,.1); border-color: #fff; }
.tracos { width: 18px; height: 18px; stroke: currentColor; fill: none; stroke-width: 2; stroke-linecap: round; }
.menu-celular nav { position: absolute; left: 0; right: 0; top: 100%; background: var(--navy); border-top: 1px solid rgba(255,255,255,.14); box-shadow: 0 24px 40px -24px rgba(0,0,0,.5); display: grid; padding: 8px max(20px, env(safe-area-inset-left, 0px)) 16px; font-size: 16px; }
.menu-celular nav a { min-height: 48px; border-bottom: 1px solid rgba(255,255,255,.1); color: rgba(255,255,255,.85); }
.menu-celular nav a:last-child { border-bottom: 0; }
.topo.claro { background: var(--papel); color: var(--tinta); border-bottom: 1px solid var(--linha); }
.topo.claro .wordmark i { color: var(--azul); }
.topo.claro nav a { color: var(--tinta-3); }
.topo.claro nav a:hover, .topo.claro nav a[aria-current="page"] { color: var(--navy); }
.topo.claro .entrar { border-color: var(--linha); color: var(--navy); }
.topo.claro .entrar:hover { border-color: var(--navy); }
.topo.claro .falar { background: var(--navy); color: #fff; }
.topo.claro .falar:hover { background: var(--navy-2); }
.topo.claro .menu-celular summary { border-color: var(--linha); color: var(--navy); }
.topo.claro .menu-celular[open] summary { background: var(--fundo); border-color: var(--navy); }
.topo.claro .menu-celular nav { background: var(--papel); border-top-color: var(--linha); box-shadow: 0 24px 40px -24px rgba(0,29,67,.28); }
.topo.claro .menu-celular nav a { color: var(--tinta-2); border-bottom-color: var(--linha); }

/* botões */
.btn { display: inline-flex; align-items: center; gap: 10px; text-decoration: none; font-weight: 600; font-size: 15px; border-radius: 8px; padding: 13px 22px; transition: all .2s var(--curva); cursor: pointer; }
.btn.claro { background: #fff; color: var(--navy); }
.btn.claro:hover { background: var(--gelo); }
.btn.escuro { background: var(--navy); color: #fff; }
.btn.escuro:hover { background: var(--navy-2); }
.btn:hover .seta { transform: translateX(3px); }

/* abertura escura (usada pela página de prova e pela 404) */
.abre { background: var(--navy); color: #fff; }
.abre .fx { padding-block: 68px 96px; }
.abre h1 { font-size: clamp(40px, 6.2vw, 82px); line-height: 0.98; font-weight: 800; max-width: 13em; }
.abre h1 em { font-style: italic; font-weight: 300; color: var(--nevoa); letter-spacing: -0.03em; }
.abre .lead { margin-top: 28px; max-width: 40em; color: rgba(255,255,255,.78); font-size: 17px; font-weight: 300; }
.abre .acoes { margin-top: 32px; display: flex; flex-wrap: wrap; gap: 12px; }

/* rodapé */
.rod { background: var(--navy); color: rgba(255,255,255,.62); font-size: 14px; }
.rod .fx { padding-block: 64px 28px; }
.rod .alto { display: grid; grid-template-columns: minmax(0, 5fr) repeat(3, minmax(0, 2fr)); gap: 32px; }
.rod .wordmark { color: #fff; font-size: 28px; }
.rod address { font-style: normal; margin-top: 18px; line-height: 1.75; }
.rod .col b { display: block; color: #fff; font-weight: 600; font-size: 13px; margin-bottom: 10px; }
.rod .col a { display: block; text-decoration: none; padding: 5px 0; color: rgba(255,255,255,.8); }
.rod .col a:hover { color: #fff; }
.rod .col a.outro { color: rgba(255,255,255,.55); }
.rod .baixo { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 8px 24px; margin-top: 56px; padding-top: 20px; border-top: 1px solid rgba(255,255,255,.14); font-size: 12.5px; }

/* Documento (políticas, ficha 02.1): texto em largura de leitura de 68ch (desvio "Site" do §10), índice ao lado no computador. */
.doc-topo { border-bottom: 1px solid var(--linha); }
.doc-topo .fx { padding-block: 56px 36px; }
.doc-topo h1 { font-size: clamp(32px, 4.4vw, 52px); line-height: 1.05; font-weight: 800; color: var(--navy); max-width: 18em; }
.doc-meta { margin-top: 14px; color: var(--tinta-3); font-size: 14px; }
.doc-aviso { margin-top: 18px; max-width: 68ch; background: var(--ambar-fundo); color: var(--ambar); border: 1px solid #fde68a; border-radius: 12px; padding: 12px 16px; font-size: 14px; }
.doc { display: grid; grid-template-columns: minmax(0, 15rem) minmax(0, 68ch); gap: 56px; padding-block: 48px 72px; align-items: start; }
.doc-indice { position: sticky; top: 24px; font-size: 13.5px; }
.doc-indice b { display: block; color: var(--navy); font-weight: 600; margin-bottom: 10px; }
.doc-indice ol { margin: 0; padding: 0; list-style: none; border-left: 1px solid var(--linha); }
.doc-indice a { display: block; padding: 4px 0 4px 14px; color: var(--tinta-3); text-decoration: none; }
.doc-indice a:hover { color: var(--navy); }
.doc-texto { grid-column: 2; color: var(--tinta-2); }
.doc-texto h2 { color: var(--navy); font-size: 24px; font-weight: 700; margin: 44px 0 14px; scroll-margin-top: 24px; }
.doc-texto h2:first-child { margin-top: 0; }
.doc-texto h3 { color: var(--tinta); font-size: 17px; font-weight: 600; margin: 28px 0 10px; letter-spacing: -0.02em; }
.doc-texto p, .doc-texto ul, .doc-texto ol { margin: 0 0 14px; }
.doc-texto ul, .doc-texto ol { padding-left: 22px; }
.doc-texto li { margin-bottom: 6px; }
.doc-texto strong { color: var(--tinta); font-weight: 600; }
.doc-texto a { color: var(--azul); }
.doc-texto code { font-size: 0.9em; background: var(--fundo); border-radius: 4px; padding: 1px 5px; }
.doc-texto .tabela { overflow-x: auto; margin: 0 0 18px; border: 1px solid var(--linha); border-radius: 12px; }
.doc-texto table { border-collapse: collapse; width: 100%; font-size: 14px; }
.doc-texto th { text-align: left; background: var(--fundo); color: var(--tinta); font-weight: 600; }
.doc-texto th, .doc-texto td { padding: 10px 14px; border-bottom: 1px solid var(--linha); vertical-align: top; }
.doc-texto tr:last-child td { border-bottom: 0; }
.doc-versoes { background: var(--fundo); }
.doc-versoes .fx { padding-block: 32px; font-size: 14px; }
.doc-versoes b { display: block; color: var(--navy); font-weight: 600; margin-bottom: 8px; }
.doc-versoes ul { margin: 0; padding-left: 18px; color: var(--tinta-3); }
.doc-versoes a { color: var(--azul); }
.doc-versoes [aria-current] { color: var(--tinta); font-weight: 600; }

/* Página inicial (ficha 01.1), pelo mockup aprovado na 00.1. A CSP recusa `style=""`: posições e larguras em classes. */
.duas { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); gap: 48px; }
.tit-secao { font-size: clamp(30px, 3.4vw, 46px); font-weight: 800; line-height: 1.04; }
.tit-secao em { font-style: italic; font-weight: 300; color: var(--tinta-3); letter-spacing: -0.02em; }
.escuro .tit-secao em { color: var(--nevoa); }

.bloco .intro { color: var(--tinta-2); font-size: 16.5px; font-weight: 300; margin-top: 18px; max-width: 30em; }

.bloco { padding-block: 88px; border-top: 1px solid var(--linha); }
.bloco.cinza { background: var(--fundo); border-top: 0; }
.bloco.escuro { background: var(--navy); color: #fff; border-top: 0; }
.bloco.escuro .intro { color: rgba(255,255,255,.75); }
.itens { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 30px 44px; align-content: start; }
.item { border-top: 2px solid var(--navy); padding-top: 14px; }
.bloco.escuro .item { border-top-color: rgba(255,255,255,.5); }
.item b { display: block; font-size: 17px; font-weight: 600; letter-spacing: -0.015em; margin-bottom: 6px; }
.item p { color: var(--tinta-2); font-size: 15px; }
.bloco.escuro .item p { color: rgba(255,255,255,.72); font-weight: 300; }



.busca { margin: 0; border: 1px solid var(--linha); border-radius: 20px; background: var(--papel); box-shadow: 0 30px 60px -32px rgba(0,29,67,.28); overflow: hidden; }
.busca .campo { display: flex; align-items: center; gap: 12px; padding: 18px 22px; border-bottom: 1px solid var(--linha); font-size: 16px; }
.busca .lupa { width: 18px; height: 18px; stroke: var(--tinta-3); fill: none; stroke-width: 2; flex: none; }
.busca .cursor { display: inline-block; width: 1px; height: 18px; background: var(--azul); vertical-align: middle; margin-left: 1px; }
.busca .pe { padding: 12px 22px; font-size: 12px; color: var(--tinta-3); }


/* Páginas das soluções (ficha 01.2), pela tela do emissor do mockup 00.1. */
.abre-claro { padding-block: 60px 24px; }
.abre-claro .trilha { font-size: 13px; color: var(--tinta-3); margin-bottom: 18px; }
.abre-claro .trilha a { text-decoration: none; }
.abre-claro .trilha a:hover { color: var(--navy); }
.abre-claro .grade { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: 56px; align-items: start; }
.abre-claro .grade.so { grid-template-columns: minmax(0, 1fr); max-width: 52em; }
.abre-claro h1 { font-size: clamp(38px, 5vw, 66px); font-weight: 800; line-height: 1; }
.abre-claro h1 em { font-style: italic; font-weight: 300; color: var(--azul); }
.abre-claro .lead { color: var(--tinta-2); font-size: 17px; font-weight: 300; margin: 24px 0 28px; max-width: 30em; }
.nota-pe { font-size: 13px; color: var(--tinta-3); margin-top: 16px; }

/* Formulário de contato (ficha 03.1). */
.form { display: grid; gap: 16px; border: 1px solid var(--linha); border-radius: 20px; padding: 26px; background: var(--papel); }
.form .tipos { border: 0; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px 20px; }
.form legend { font-size: 13px; font-weight: 600; color: var(--tinta); margin-bottom: 8px; padding: 0; }
.form .tipos label { display: inline-flex; align-items: center; gap: 8px; font-size: 15px; color: var(--tinta-2); cursor: pointer; }
.form .campo { display: grid; gap: 6px; }
.form .campo span { font-size: 13px; font-weight: 600; color: var(--tinta); }
.form input:not([type="radio"]), .form textarea { font: inherit; font-size: 15px; color: var(--tinta); background: var(--papel); border: 1px solid #cbd5e1; border-radius: 8px; padding: 10px 12px; width: 100%; }
.form input:focus, .form textarea:focus { outline: 2px solid var(--azul); outline-offset: 1px; border-color: var(--azul); }
.form textarea { resize: vertical; min-height: 140px; }
.form .par { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.form .aviso { font-size: 13px; color: var(--tinta-3); }
.form .aviso a { color: var(--azul); }
.form button { border: 0; justify-self: start; font-family: inherit; }
.mel { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

/* Marca e design system (/marca, pedido do operador de 14/11/2026): resumo de consulta do §13 e do §2 do design system. A CSP recusa
   `style=""`: cada amostra de cor e de canto tem a sua classe. */
.ds-atalhos { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 4px; }
.ds-atalhos a { text-decoration: none; font-size: 14px; font-weight: 600; color: var(--navy); border: 1px solid var(--linha); border-radius: 999px; padding: 6px 14px; transition: all .2s var(--curva); }
.ds-atalhos a:hover { border-color: var(--navy); }
.ds-corpo { margin-top: 40px; }
.ds-sub { font-size: 15px; font-weight: 600; color: var(--navy); letter-spacing: -0.01em; margin: 36px 0 14px; }
.ds-corpo > .ds-sub:first-child { margin-top: 0; }
.ds-uso { display: block; font-size: 13.5px; color: var(--tinta-3); line-height: 1.5; }
.ds-nota { margin-top: 22px; font-size: 14px; color: var(--tinta-2); max-width: 52em; }
.ds-corpo code { font-size: 0.88em; background: var(--fundo); border-radius: 4px; padding: 1px 5px; color: var(--tinta); word-break: break-word; }
.bloco.cinza .ds-corpo code { background: var(--papel); }

.ds-vitrine { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.ds-vitrine.dois { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.ds-palco { margin: 0; border-radius: 20px; min-height: 220px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 18px; padding: 28px 20px 18px; border: 1px solid var(--linha); }
.ds-palco.claro { background: var(--papel); }
.ds-palco.escuro { background: var(--navy); border-color: var(--navy); color: #fff; }
.ds-palco figcaption { font-size: 13px; color: var(--tinta-3); text-align: center; }
.ds-palco.escuro figcaption { color: rgba(255,255,255,.7); }
.ds-palco.escuro figcaption code { background: rgba(255,255,255,.12); color: #fff; }
.ds-tamanhos { display: flex; align-items: flex-end; gap: 18px; }
.ds-logo { font-size: 30px; color: var(--navy); }
.ds-logo .simbolo { width: 1.55em; height: 1.55em; }
.ds-logo i { color: var(--azul); }
.ds-palco.escuro .ds-logo { color: #fff; }
.ds-palco.escuro .ds-logo i { color: var(--nevoa); }

.ds-dados { margin: 28px 0 0; display: grid; gap: 0; border-top: 1px solid var(--linha); }
.ds-dados div { display: grid; grid-template-columns: minmax(0, 11rem) minmax(0, 1fr); gap: 16px; padding: 12px 0; border-bottom: 1px solid var(--linha); font-size: 14.5px; }
.ds-dados dt { font-weight: 600; color: var(--tinta); }
.ds-dados dd { margin: 0; color: var(--tinta-2); }

.ds-cores { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: 16px; }
.ds-cor { background: var(--papel); border: 1px solid var(--linha); border-radius: 20px; overflow: hidden; padding-bottom: 14px; }
.ds-cor b, .ds-cor code, .ds-cor .ds-uso { margin: 0 16px; }
.ds-cor b { display: block; font-size: 15px; font-weight: 600; margin-top: 12px; }
.ds-cor code { display: inline-block; margin-top: 2px; margin-bottom: 6px; user-select: all; }
.ds-amostra { display: block; height: 92px; border-bottom: 1px solid var(--linha); }
.c-marinho { background: #001d43; } .c-marinho-2 { background: #00306b; } .c-azul { background: #1d4f91; } .c-nevoa { background: #9bb8de; }
.c-gelo { background: #c5d6ee; } .c-fundo { background: #f0f2f5; } .c-tinta { background: #0f172a; } .c-tinta-2 { background: #334155; }
.c-tinta-3 { background: #64748b; } .c-linha { background: #e2e8f0; } .c-papel { background: #ffffff; } .c-verde { background: #047857; }
.c-ambar { background: #92400e; }

.ds-pesos { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--linha); }
.ds-pesos li { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 2fr) minmax(0, 5fr); gap: 16px; align-items: baseline; padding: 14px 0; border-bottom: 1px solid var(--linha); }
.ds-pesos b { font-size: 14px; font-weight: 600; color: var(--tinta); }
.ds-specimen { font-size: clamp(26px, 3vw, 38px); line-height: 1.1; letter-spacing: -0.045em; color: var(--navy); }
.ds-specimen.p300 { font-weight: 300; } .ds-specimen.p400 { font-weight: 400; } .ds-specimen.p600 { font-weight: 600; }
.ds-specimen.p700 { font-weight: 700; } .ds-specimen.p800 { font-weight: 800; }

.ds-tabela { overflow-x: auto; border: 1px solid var(--linha); border-radius: 20px; background: var(--papel); margin-top: 16px; }
.ds-tabela table { border-collapse: collapse; width: 100%; font-size: 14px; }
.ds-tabela th { text-align: left; font-weight: 600; color: var(--tinta); }
.ds-tabela thead th { background: var(--fundo); font-size: 12px; text-transform: uppercase; letter-spacing: .06em; color: var(--tinta-3); }
.ds-tabela th, .ds-tabela td { padding: 11px 16px; border-bottom: 1px solid var(--linha); vertical-align: top; color: var(--tinta-2); }
.ds-tabela tbody th { color: var(--tinta); width: 30%; }
.ds-tabela tr:last-child th, .ds-tabela tr:last-child td { border-bottom: 0; }

.ds-cantos { list-style: none; margin: 0 0 8px; padding: 0; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 16px; }
.ds-cantos b { display: block; font-size: 15px; font-weight: 600; margin-top: 12px; }
.ds-canto { display: block; height: 72px; background: var(--papel); border: 2px solid var(--navy); }
.ds-canto.r20 { border-radius: 20px; } .ds-canto.r12 { border-radius: 12px; } .ds-canto.r10 { border-radius: 10px; }
.ds-canto.r8 { border-radius: 8px; } .ds-canto.rfull { border-radius: 999px; }

.ds-baixar { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 32px; }
.ds-baixar ul { list-style: none; margin: 0; padding: 0; border-top: 2px solid var(--navy); }
.ds-baixar a { display: flex; align-items: center; justify-content: space-between; gap: 12px; text-decoration: none; padding: 12px 0; border-bottom: 1px solid var(--linha); }
.ds-baixar a b { display: block; font-size: 14.5px; font-weight: 600; color: var(--navy); }
.ds-baixar a:hover b { color: var(--azul); }
.ds-baixar .seta { color: var(--navy); transform: rotate(90deg); }
.ds-baixar a:hover .seta { transform: rotate(90deg) translateX(3px); }

@media (max-width: 960px) {
  .ds-vitrine, .ds-baixar { grid-template-columns: minmax(0, 1fr); }
  .ds-cantos { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .ds-pesos li { grid-template-columns: minmax(0, 1fr); gap: 4px; }
}
@media (max-width: 760px) {
  .ds-vitrine.dois { grid-template-columns: minmax(0, 1fr); }
  .ds-dados div { grid-template-columns: minmax(0, 1fr); gap: 2px; }
  .ds-cantos { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 900px) {
  .topo nav, .topo .falar { display: none; }
  .topo .fx { gap: 12px; min-height: 64px; padding-block: 10px; }
  .wordmark { font-size: 20px; }
  .entrar { margin-left: auto; min-height: 44px; display: inline-flex; align-items: center; }
  .menu-celular { display: block; }
  .menu-celular nav { display: grid; }
}
@media (max-width: 400px) {
  .topo .fx { gap: 8px; }
  .topo .wordmark { font-size: 18px; gap: 9px; white-space: nowrap; }
  .entrar { padding-inline: 12px; }
  .menu-celular summary { padding: 0 12px; gap: 6px; }
}
@media (max-width: 960px) {
  .doc { grid-template-columns: minmax(0, 1fr); gap: 28px; }
  .doc-indice { position: static; }
  .doc-texto { grid-column: auto; }
  .duas, .abre-claro .grade { grid-template-columns: minmax(0, 1fr); gap: 28px; }
  .rod .alto { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .rod .alto > div:first-child { grid-column: 1 / -1; }
}
@media (max-width: 760px) {
  .itens { grid-template-columns: minmax(0, 1fr); gap: 22px; }
  /* Celular mais curto (D4) e texto corrido em 400 (D5): a Poppins 300 fica fina demais em tela pequena. */
  .bloco { padding-block: 48px; }
  .abre .fx { padding-block: 44px 72px; }
  .abre .lead, .abre-claro .lead { font-size: 16px; font-weight: 400; margin-top: 20px; }
  .bloco .intro { font-weight: 400; font-size: 15.5px; }
  .rod .fx { padding-block: 48px 24px; }
  .rod .col a { padding: 10px 0; }
  .rod .baixo { margin-top: 36px; }
  .form .par { grid-template-columns: minmax(0, 1fr); }
}
@media (prefers-reduced-motion: no-preference) {
  .abre h1, .abre .lead { animation: sobe .6s var(--curva) both; }
  .abre .lead { animation-delay: .08s; }
  @keyframes sobe { from { transform: translateY(14px); } to { transform: none; } }
}
/* Página inicial de 14/11/2026 (design system §14; `specs/paginas-publicas/2026-11-14-inicio-analise-premium.md`). Celular primeiro: a base é
   390 px e as larguras maiores entram por `min-width`. Dias e abas são botões de rádio (`:checked`), sem script. */
.so-leitor { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.ic { width: 18px; height: 18px; stroke: currentColor; fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; flex: none; }
.ic.certo { color: var(--verde); }
.ic.pdf { color: #b91c1c; }
.selo { display: inline-flex; align-items: center; font-size: 12px; font-weight: 600; border-radius: 999px; padding: 3px 10px; white-space: nowrap; }
.selo.ok { background: var(--verde-fundo); color: var(--verde); }
.selo.alerta { background: var(--ambar-fundo); color: var(--ambar); }
.selo.neutro { background: #eef3fa; color: var(--azul); }
.btn.grande { display: flex; justify-content: center; min-height: 54px; border-radius: 12px; padding-inline: 26px; font-size: 16px; }
.tit-duo { font-size: clamp(27px, 3.4vw, 44px); line-height: 1.12; font-weight: 700; letter-spacing: -0.035em; color: var(--navy); max-width: 17em; }
.tit-duo span { color: var(--tinta-3); }
.i-secao { padding-block: 72px; }
.i-secao.cinza { background: #f6f7f9; }
.i-secao.escura { background: var(--navy); color: #fff; }
.escura .tit-duo { color: #fff; }
.escura .tit-duo span { color: var(--nevoa); }
.saiba { display: inline-flex; align-items: center; min-height: 44px; margin-top: 12px; font-weight: 600; color: var(--azul); text-decoration: none; }
.saiba:hover { text-decoration: underline; text-underline-offset: 4px; }
.ficticio { margin-top: 16px; font-size: 12.5px; color: var(--tinta-3); }
.i-duas { display: grid; gap: 28px; }

/* Abertura: a grade de linhas finas dá profundidade sem gradiente de cor nem vidro fosco (desvio "Site" do §10). */
.i-abre { background-color: var(--navy); color: #fff; overflow: hidden;
  background-image: linear-gradient(rgba(255,255,255,.035) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.035) 1px, transparent 1px); background-size: 56px 56px; }
.i-abre .fx { padding-block: 44px 0; }
.i-grade { display: grid; gap: 36px; }
.aviso-reforma { display: inline-flex; align-items: center; gap: 8px; font-size: 13px; font-weight: 500; color: var(--gelo); border: 1px solid rgba(255,255,255,.18); border-radius: 999px; padding: 5px 14px 5px 10px; }
.aviso-reforma i { width: 8px; height: 8px; border-radius: 999px; background: #34d399; }
.i-abre h1 { margin-top: 18px; font-size: clamp(38px, 5.2vw, 66px); line-height: 1.03; font-weight: 700; letter-spacing: -0.042em; }
.i-abre h1 em, .i-fecho h2 em { font-style: italic; font-weight: 300; color: var(--nevoa); letter-spacing: -0.03em; }
.i-abre .lead { margin-top: 18px; font-size: 17px; line-height: 1.5; color: rgba(255,255,255,.8); max-width: 28em; }
.i-acao { margin-top: 28px; display: grid; gap: 12px; }
.i-acao p { font-size: 13px; line-height: 1.4; color: rgba(255,255,255,.62); text-align: center; }

.vivo { border: 0; margin: 0; padding: 0; min-width: 0; }
.vivo legend { padding: 0; margin-bottom: 10px; font-size: 13px; font-weight: 500; color: var(--gelo); }
.vivo-dias { display: flex; gap: 6px; }
.vivo-dias label { flex: 1; min-height: 52px; display: grid; place-content: center; text-align: center; border-radius: 12px; border: 1px solid rgba(255,255,255,.18); color: rgba(255,255,255,.75); font-size: 13px; font-weight: 600; line-height: 1.15; cursor: pointer; transition: border-color .2s var(--curva), background .2s var(--curva), color .2s var(--curva); }
.vivo-dias label b { display: block; font-size: 18px; font-weight: 700; letter-spacing: -0.02em; }
.vivo-dias label:hover { border-color: rgba(255,255,255,.5); }
#dia-2:checked ~ .vivo-dias label[for="dia-2"], #dia-5:checked ~ .vivo-dias label[for="dia-5"], #dia-10:checked ~ .vivo-dias label[for="dia-10"], #dia-20:checked ~ .vivo-dias label[for="dia-20"], #dia-30:checked ~ .vivo-dias label[for="dia-30"] { background: #fff; color: var(--navy); border-color: #fff; }
#dia-2:focus-visible ~ .vivo-dias label[for="dia-2"], #dia-5:focus-visible ~ .vivo-dias label[for="dia-5"], #dia-10:focus-visible ~ .vivo-dias label[for="dia-10"], #dia-20:focus-visible ~ .vivo-dias label[for="dia-20"], #dia-30:focus-visible ~ .vivo-dias label[for="dia-30"] { outline: 2px solid var(--gelo); outline-offset: 3px; }
.vivo-cartao { margin-top: 12px; min-height: 262px; padding-bottom: 18px; background: #fff; color: var(--tinta); border-radius: 20px 20px 0 0; box-shadow: 0 -18px 60px rgba(0,0,0,.35); }
.estado { display: none; }
#dia-2:checked ~ .vivo-cartao .e-2, #dia-5:checked ~ .vivo-cartao .e-5, #dia-10:checked ~ .vivo-cartao .e-10, #dia-20:checked ~ .vivo-cartao .e-20, #dia-30:checked ~ .vivo-cartao .e-30 { display: block; }
.topo-do-estado { display: grid; padding: 18px 18px 16px; }
.topo-do-estado small { font-size: 12px; font-weight: 500; color: var(--tinta-3); }
.topo-do-estado b { margin-top: 4px; font-size: 19px; line-height: 1.25; font-weight: 700; letter-spacing: -0.02em; color: var(--navy); }
.topo-do-estado span { font-size: 14px; color: #475569; }
.estado ul { list-style: none; margin: 0; padding: 0; }
.estado li { display: flex; align-items: center; gap: 12px; padding: 13px 18px; border-top: 1px solid #eef1f5; font-size: 14px; }
.sigla { width: 30px; height: 30px; border-radius: 9px; background: #eef3fa; color: var(--navy); font-size: 11px; font-weight: 700; display: grid; place-items: center; flex: none; }
.nome { flex: 1; min-width: 0; font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* Com quem o sistema conversa: logotipos oficiais em cinza, numa faixa discreta (G4). */
.i-ligado { border-bottom: 1px solid #eef1f5; }
.i-ligado .fx { padding-block: 26px; display: grid; gap: 14px; }
.i-ligado .rotulo { font-size: 13px; font-weight: 500; color: var(--tinta-3); white-space: nowrap; }
.logos { display: flex; flex-wrap: wrap; align-items: center; gap: 16px 28px; }
.logos img { height: 28px; width: auto; filter: grayscale(1) contrast(1.05); opacity: .72; }
.logos img.baixo { height: 21px; }
.logos img.nfe { height: 32px; mix-blend-mode: multiply; }
.i-ligado .quais { font-size: 12.5px; color: var(--tinta-3); }

/* Os três trabalhos: fragmentos do produto redesenhados em HTML. */
.trabalhos { display: grid; gap: 16px; margin-top: 32px; }
.trabalho { display: flex; flex-direction: column; padding: 22px 22px 0; background: #fff; border: 1px solid var(--linha); border-radius: 20px; box-shadow: 0 1px 2px rgba(15,23,42,.04), 0 24px 48px -28px rgba(0,29,67,.28); overflow: hidden; }
.trabalho h3 { font-size: 20px; line-height: 1.2; font-weight: 700; letter-spacing: -0.025em; color: var(--navy); }
.trabalho > p { flex: 1; margin-top: 8px; font-size: 15px; color: #475569; }
.fragmento { margin: 20px -8px 0; min-height: 152px; border: 1px solid var(--linha); border-bottom: 0; border-radius: 14px 14px 0 0; background: #f8fafc; overflow: hidden; }
.fragmento .linha { display: flex; align-items: center; gap: 12px; padding: 13px 16px; border-top: 1px solid #eef1f5; font-size: 14px; }
.fragmento .linha:first-child { border-top: 0; }
.fragmento .hora { font-size: 12px; color: var(--tinta-3); font-variant-numeric: tabular-nums; }
.conta { display: flex; justify-content: space-between; margin-top: 10px; padding: 0 18px; font-size: 14px; }
.conta:first-child { margin-top: 18px; }
.conta span { color: #475569; }
.conta b { font-variant-numeric: tabular-nums; }
.confere { display: flex; align-items: center; gap: 8px; margin: 14px 18px 0; padding-top: 12px; border-top: 1px solid var(--linha); font-size: 13px; font-weight: 600; color: var(--verde); }
.email { display: grid; justify-items: start; padding: 16px 18px; }
.i-secao .email small { font-size: 12px; color: var(--tinta-3); }
.i-secao .email b { margin-top: 4px; font-size: 15px; font-weight: 600; }
.anexo { display: inline-flex; align-items: center; gap: 8px; margin-top: 12px; padding: 8px 12px; border: 1px solid var(--linha); border-radius: 10px; background: #fff; font-size: 13px; font-weight: 500; }

/* Para quem é: abas por rádio. */
.abas { border: 0; margin: 0; padding: 0; min-width: 0; }
.abas-botoes { display: flex; gap: 4px; max-width: 420px; margin-top: 24px; padding: 4px; background: #e9ecf1; border-radius: 14px; }
.abas-botoes label { flex: 1; min-height: 46px; display: grid; place-items: center; border-radius: 11px; font-size: 14px; font-weight: 600; color: #475569; cursor: pointer; transition: background .2s var(--curva), color .2s var(--curva); }
#publico-escritorio:checked ~ .abas-botoes label[for="publico-escritorio"], #publico-emissor:checked ~ .abas-botoes label[for="publico-emissor"] { background: #fff; color: var(--navy); box-shadow: 0 1px 3px rgba(15,23,42,.12); }
#publico-escritorio:focus-visible ~ .abas-botoes label[for="publico-escritorio"], #publico-emissor:focus-visible ~ .abas-botoes label[for="publico-emissor"] { outline: 2px solid var(--azul); outline-offset: 3px; }
.publico { display: none; max-width: 34em; margin-top: 22px; }
#publico-escritorio:checked ~ .abas-paineis .p-escritorio, #publico-emissor:checked ~ .abas-paineis .p-emissor { display: block; }
.publico .frase { font-size: clamp(20px, 2.4vw, 28px); line-height: 1.25; font-weight: 700; letter-spacing: -0.025em; color: var(--navy); }
.publico ul { list-style: none; margin: 18px 0 0; padding: 0; display: grid; gap: 14px; font-size: 15px; color: var(--tinta-2); }
.publico li { display: flex; gap: 12px; }
.publico li .ic { margin-top: 3px; }

/* O painel de verdade: carrossel de arrastar no celular (scroll-snap), grade de três no computador. */
.telas { display: flex; gap: 14px; margin-top: 28px; padding: 0 20px 8px; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; }
.telas::-webkit-scrollbar { display: none; }
.tela { flex: 0 0 296px; margin: 0; scroll-snap-align: center; }
.moldura { border-radius: 18px; border: 1px solid var(--linha); background: var(--fundo); overflow: hidden; box-shadow: 0 24px 48px -30px rgba(0,29,67,.35); }
.moldura img { display: block; width: 100%; height: auto; }
.tela figcaption { margin-top: 14px; font-size: 14px; color: #475569; }
.tela figcaption b { display: block; font-size: 15px; font-weight: 600; color: var(--tinta); }

/* Como funciona. */
.passos { list-style: none; margin: 32px 0 0; padding: 0; display: grid; }
.passos li { position: relative; display: flex; gap: 18px; padding-bottom: 28px; }
.passos li:last-child { padding-bottom: 0; }
.passos li:not(:last-child)::before { content: ""; position: absolute; left: 17px; top: 40px; bottom: 2px; width: 2px; background: rgba(255,255,255,.18); }
.passos .n { width: 36px; height: 36px; border-radius: 999px; border: 1.5px solid rgba(255,255,255,.45); font-weight: 600; display: grid; place-items: center; flex: none; }
.passos .n.cheio { background: #fff; color: var(--navy); border-color: #fff; font-weight: 700; }
.passos b { display: block; font-weight: 600; }
.passos p { font-size: 15px; color: rgba(255,255,255,.72); }

/* Segurança e dúvidas. */
.cuidados { list-style: none; margin: 0; padding: 0; }
.cuidados li { display: flex; gap: 14px; padding: 18px 0; border-top: 1px solid var(--linha); }
.cuidados li:last-child { border-bottom: 1px solid var(--linha); }
.cuidados .ic { margin-top: 3px; color: var(--azul); }
.cuidados b { display: block; font-size: 15px; font-weight: 600; }
.cuidados p { font-size: 14px; color: #475569; }
.duvidas details { border-top: 1px solid var(--linha); }
.duvidas details:last-child { border-bottom: 1px solid var(--linha); }
.duvidas summary { list-style: none; display: flex; align-items: center; gap: 12px; min-height: 64px; padding-block: 8px; font-size: 16px; font-weight: 600; cursor: pointer; }
.duvidas summary::-webkit-details-marker { display: none; }
.duvidas .mais { margin-left: auto; width: 28px; height: 28px; border-radius: 999px; background: #fff; border: 1px solid var(--linha); display: grid; place-items: center; color: var(--navy); flex: none; transition: transform .2s var(--curva); }
.duvidas .mais .ic { width: 14px; height: 14px; }
.duvidas details[open] .mais { transform: rotate(45deg); }
.duvidas details p { max-width: 40em; padding-bottom: 20px; font-size: 15px; color: #475569; }

/* Fecho. */
.i-fecho h2 { font-size: clamp(32px, 4.6vw, 56px); line-height: 1.05; font-weight: 700; letter-spacing: -0.04em; }
.i-fecho .lead { max-width: 30em; margin-top: 14px; color: rgba(255,255,255,.78); }
.depois { list-style: none; counter-reset: passo; margin: 0 0 28px; padding: 0; display: grid; gap: 10px; font-size: 15px; color: rgba(255,255,255,.85); }
.depois li { counter-increment: passo; display: flex; gap: 12px; }
.depois li::before { content: counter(passo); font-weight: 600; color: var(--nevoa); }
.contato-email { display: block; margin-top: 14px; font-size: 14px; text-align: center; color: var(--gelo); user-select: all; }
.rod { border-top: 1px solid rgba(255,255,255,.14); }

@media (min-width: 600px) {
  .btn.grande { display: inline-flex; }
  .i-acao { display: flex; align-items: center; gap: 22px; }
  .i-acao p { max-width: 16em; text-align: left; font-size: 14px; }
  .contato-email { text-align: left; }
}
@media (min-width: 900px) {
  .so-celular { display: none; }
  .i-secao { padding-block: 112px; }
  .i-duas { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 72px; align-items: start; }
  .i-ligado .fx { display: flex; align-items: center; gap: 44px; }
  .logos { gap: 16px 44px; }
  .i-ligado .quais { margin-left: auto; max-width: 26em; text-align: right; }
  .trabalhos { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; margin-top: 48px; }
  .abas { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 72px; align-items: start; margin-top: 40px; }
  .abas-botoes { margin-top: 0; }
  .publico { margin-top: 0; }
  .telas { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; max-width: 1240px; margin: 48px auto 0; overflow: visible; }
  .tela { flex: none; }
  .passos { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 32px; margin-top: 56px; }
  .passos li { flex-direction: column; padding-bottom: 0; }
  .passos li:not(:last-child)::before { left: 48px; right: -32px; top: 17px; bottom: auto; width: auto; height: 2px; }
}
@media (min-width: 1024px) {
  .i-abre .fx { padding-top: 88px; }
  .i-grade { grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); gap: 72px; align-items: end; }
  .i-texto { padding-bottom: 96px; }
  .i-abre .lead { font-size: 19px; }
  .vivo-cartao { min-height: 290px; box-shadow: 0 -24px 80px rgba(0,0,0,.4); }
  .topo-do-estado { padding: 22px 22px 18px; }
  .topo-do-estado b { font-size: 22px; }
  .estado li { padding: 14px 22px; }
}
@media (prefers-reduced-motion: no-preference) {
  .estado { animation: entra .35s var(--curva) both; }
  @keyframes entra { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
}
@media (prefers-reduced-motion: reduce) { * { transition: none !important; animation: none !important; } }

/* Página da contabilidade de 14/11/2026 (`specs/paginas-publicas/2026-11-14-contabilidade-analise-premium.md`, C1 a C9). Reaproveita as peças da
   inicial (abertura, rádios do `.vivo`, faixa de logotipos, `.trabalho`, `.telas`, `.duvidas`, fecho); aqui só o que é desta página. */
.trilha-escura { font-size: 13px; color: var(--gelo); }
.trilha-escura a { display: inline-flex; align-items: center; min-height: 44px; color: var(--gelo); text-decoration: none; }
.trilha-escura a:hover { color: #fff; text-decoration: underline; text-underline-offset: 4px; }
.c-abre .fx { padding-block: 8px 44px; }
.c-abre h1 { margin-top: 6px; }
.c-abre .vivo-cartao { min-height: 0; padding-bottom: 0; border-radius: 20px; overflow: hidden; box-shadow: 0 1px 2px rgba(15,23,42,.04), 0 24px 48px -28px rgba(0,0,0,.5); }
.c-abre .ficticio { color: var(--nevoa); }
.nota-viva .vivo-dias label { font-size: 12.5px; font-weight: 500; }
.nota-viva .vivo-dias label b { font-size: 12px; font-weight: 600; opacity: .8; }
#etapa-1:checked ~ .vivo-dias label[for="etapa-1"], #etapa-2:checked ~ .vivo-dias label[for="etapa-2"], #etapa-3:checked ~ .vivo-dias label[for="etapa-3"], #etapa-4:checked ~ .vivo-dias label[for="etapa-4"] { background: #fff; color: var(--navy); border-color: #fff; font-weight: 600; }
#etapa-1:focus-visible ~ .vivo-dias label[for="etapa-1"], #etapa-2:focus-visible ~ .vivo-dias label[for="etapa-2"], #etapa-3:focus-visible ~ .vivo-dias label[for="etapa-3"], #etapa-4:focus-visible ~ .vivo-dias label[for="etapa-4"] { outline: 2px solid var(--gelo); outline-offset: 3px; }
#etapa-1:checked ~ .vivo-cartao .n-1, #etapa-2:checked ~ .vivo-cartao .n-2, #etapa-3:checked ~ .vivo-cartao .n-3, #etapa-4:checked ~ .vivo-cartao .n-4 { display: block; }
.nota-viva .estado li .nome { font-weight: 400; }
.etapa-conta { padding-bottom: 16px; }
.nota-viva .confere { margin-bottom: 0; }
.nota-viva .email { border-top: 1px solid #eef1f5; padding-bottom: 20px; }
.nota-viva .email small { font-size: 12px; color: var(--tinta-3); }
.nota-viva .email b { margin-top: 4px; font-size: 15px; font-weight: 600; }

.trabalho .de { font-size: 12.5px; font-weight: 600; color: var(--azul); margin-bottom: 6px; }
#notas .fragmento { min-height: 0; padding-bottom: 6px; }
.fragmento .pasta { padding: 12px 16px 2px; font-family: ui-monospace, Menlo, Consolas, monospace; font-size: 12.5px; color: var(--tinta-2); }
.fragmento .pasta + .linha { border-top: 0; }
.fragmento .linha .ic { color: var(--tinta-3); }

.regras-receita { list-style: none; margin: 20px 0 0; padding: 0; display: grid; gap: 10px; font-size: 15px; color: var(--tinta-2); }
.regras-receita li { display: flex; gap: 10px; }
.regras-receita .ic { margin-top: 3px; color: var(--azul); }
.regras-receita .ic.certo { color: var(--verde); }
.servicos-receita { list-style: none; margin: 0; padding: 0; }
.servicos-receita li { display: flex; gap: 14px; padding: 14px 0; border-top: 1px solid var(--linha); font-size: 15px; }
.servicos-receita li:last-child { border-bottom: 1px solid var(--linha); }
.servicos-receita b { flex: 0 0 92px; color: var(--navy); font-weight: 600; }
.servicos-receita span { color: #475569; }

.catalogo .grupo { display: grid; font-size: 17px; color: var(--navy); }
.catalogo .grupo small { font-size: 13.5px; font-weight: 400; color: var(--tinta-3); }
.catalogo ul { list-style: none; margin: 0; padding: 0 0 20px; display: grid; gap: 10px; font-size: 15px; color: var(--tinta-2); }
.catalogo ul b { font-weight: 600; color: var(--tinta); }

.anos-reforma { list-style: none; margin: 28px 0 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px 18px; }
.anos-reforma b { display: flex; align-items: center; gap: 8px; font-size: 24px; font-weight: 700; letter-spacing: -0.03em; font-variant-numeric: tabular-nums; }
.anos-reforma .agora b::after { content: "agora"; font-size: 11px; font-weight: 600; letter-spacing: .02em; color: var(--navy); background: var(--gelo); border-radius: 999px; padding: 2px 8px; }
.anos-reforma .barra { display: block; height: 4px; margin: 10px 0; background: rgba(255,255,255,.16); border-radius: 999px; overflow: hidden; }
.anos-reforma .barra i { display: block; height: 100%; background: var(--nevoa); border-radius: 999px; }
.barra .b8 { width: 8%; } .barra .b40 { width: 40%; } .barra .b55 { width: 55%; } .barra .b100 { width: 100%; }
.anos-reforma p { font-size: 14px; line-height: 1.5; color: var(--gelo); }
.legenda-anos { margin-top: 20px; font-size: 12.5px; color: rgba(255,255,255,.62); }
.itens-reforma { list-style: none; margin: 36px 0 0; padding: 0; display: grid; }
.itens-reforma li { padding: 16px 0; border-top: 1px solid rgba(255,255,255,.14); }
.itens-reforma b { display: block; font-size: 15.5px; font-weight: 600; }
.itens-reforma span { font-size: 14px; color: var(--gelo); }

.c-sub { margin-top: 14px; max-width: 30em; font-size: 16px; color: var(--tinta-2); }
.busca .campo span { line-height: 1.45; }
.busca .resultado { display: grid; justify-items: start; gap: 4px; padding: 16px 22px; border-bottom: 1px solid var(--linha); }
.busca .resultado small { font-size: 12px; font-weight: 500; color: var(--tinta-3); }
.busca .resultado b { font-size: 16px; font-weight: 700; letter-spacing: -0.015em; color: var(--navy); }
.busca .resultado span { font-size: 14px; color: #475569; }
.busca .resultado .selo { margin-top: 6px; }

@media (min-width: 900px) {
  .anos-reforma { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 32px; margin-top: 48px; }
  .itens-reforma { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0 40px; margin-top: 56px; }
}
@media (min-width: 1024px) {
  .c-abre .fx { padding-block: 24px 96px; }
  .c-abre .i-grade { align-items: center; margin-top: 24px; }
  .c-abre .i-texto { padding-bottom: 0; }
}

/* Página do emissor de NFS-e de 14/11/2026 (`specs/paginas-publicas/2026-11-14-emissor-analise-premium.md`, E1 a E8). Usa a abertura, a
   trilha, os rádios da `.nota-viva`, o `.trabalho`, o `.catalogo` e o fecho da contabilidade; aqui só o que é desta página. */
.venda-viva .vivo-cartao { display: grid; }
.venda-viva .estado { display: block; grid-area: 1 / 1; visibility: hidden; padding-bottom: 6px; }
#parte-1:checked ~ .vivo-dias label[for="parte-1"], #parte-2:checked ~ .vivo-dias label[for="parte-2"], #parte-3:checked ~ .vivo-dias label[for="parte-3"], #parte-4:checked ~ .vivo-dias label[for="parte-4"] { background: #fff; color: var(--navy); border-color: #fff; font-weight: 600; }
#parte-1:focus-visible ~ .vivo-dias label[for="parte-1"], #parte-2:focus-visible ~ .vivo-dias label[for="parte-2"], #parte-3:focus-visible ~ .vivo-dias label[for="parte-3"], #parte-4:focus-visible ~ .vivo-dias label[for="parte-4"] { outline: 2px solid var(--gelo); outline-offset: 3px; }
#parte-1:checked ~ .vivo-cartao .p-1, #parte-2:checked ~ .vivo-cartao .p-2, #parte-3:checked ~ .vivo-cartao .p-3, #parte-4:checked ~ .vivo-cartao .p-4 { visibility: visible; }
.venda-viva .estado li .nome, .cartao-claro li .nome { display: grid; white-space: normal; color: #475569; }
.venda-viva .estado li .nome b, .cartao-claro li .nome b { font-weight: 600; color: var(--tinta); }
.valor { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; padding: 14px 18px; border-top: 1px solid #eef1f5; font-size: 14px; color: #475569; }
.valor b { font-size: 20px; font-weight: 700; letter-spacing: -0.01em; color: var(--navy); font-variant-numeric: tabular-nums; }
.danfse { display: grid; gap: 8px; margin: 2px 18px 0; padding: 14px; border: 1px solid var(--linha); border-radius: 10px; }
.danfse-topo { display: flex; justify-content: space-between; align-items: center; gap: 8px; font-size: 12px; font-weight: 700; letter-spacing: .02em; color: var(--navy); }
.danfse-topo small { font-weight: 500; letter-spacing: 0; color: var(--tinta-3); }
.danfse i { display: block; height: 7px; border-radius: 3px; background: #eef1f5; }
.danfse .l1 { width: 84%; } .danfse .l2 { width: 62%; } .danfse .l3 { width: 45%; }
.danfse-total { display: flex; justify-content: space-between; padding-top: 8px; border-top: 1px dashed var(--linha); font-size: 12.5px; color: var(--tinta-2); }
.danfse-total b { color: var(--navy); }
.arquivos { display: flex; flex-wrap: wrap; gap: 0 8px; padding: 0 18px 12px; }
.ic.xml { color: var(--azul); }
.pix { margin: 0 18px 12px; padding: 10px 12px; border: 1px dashed var(--gelo); border-radius: 10px; font-family: ui-monospace, Menlo, Consolas, monospace; font-size: 12px; color: var(--tinta-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.recebido { display: flex; align-items: center; gap: 8px; padding: 14px 18px; background: var(--verde-fundo); color: var(--verde); font-size: 14px; font-weight: 600; }
.recebido .ic { color: var(--verde); }
#cadastro .fragmento { min-height: 0; padding-bottom: 6px; }
.catalogo li a { display: inline-flex; align-items: center; min-height: 44px; }
.fragmento .valor-linha { font-size: 14px; font-weight: 600; color: var(--navy); font-variant-numeric: tabular-nums; }

.dois-cartoes { display: grid; gap: 32px; margin-top: 32px; }
.dois-cartoes h3 { font-size: 20px; font-weight: 700; letter-spacing: -0.025em; color: var(--navy); }
.texto-cartao { margin: 6px 0 16px; font-size: 15px; color: #475569; }
.cartao-claro { background: #fff; border: 1px solid var(--linha); border-radius: 20px; overflow: hidden; box-shadow: 0 1px 2px rgba(15,23,42,.04), 0 24px 48px -28px rgba(0,29,67,.28); }
.cartao-claro ul { list-style: none; margin: 0; padding: 0; }
.cartao-claro li { display: flex; align-items: center; gap: 12px; padding: 13px 18px; border-top: 1px solid #eef1f5; font-size: 14px; }
.meses li > b { flex: 0 0 40px; font-weight: 700; color: var(--navy); }
.meses .nome { font-weight: 400; color: #475569; }
.receber { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); margin: 0; border-top: 1px solid #eef1f5; }
.receber div { display: grid; gap: 2px; padding: 14px 12px; border-left: 1px solid #eef1f5; }
.receber div:first-child { border-left: 0; padding-left: 18px; }
.receber dt { font-size: 12px; font-weight: 500; color: var(--tinta-3); }
.receber dd { margin: 0; font-size: 15px; font-weight: 700; color: var(--navy); white-space: nowrap; font-variant-numeric: tabular-nums; letter-spacing: -0.01em; }
.receber .atraso dd { color: var(--ambar); }

@media (min-width: 900px) {
  .dois-cartoes { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 32px; margin-top: 48px; }
  .venda-viva .estado li, .cartao-claro li { padding-inline: 22px; }
  .valor, .recebido { padding-inline: 22px; }
  .danfse, .pix { margin-inline: 22px; }
  .arquivos { padding-inline: 22px; }
}