/* Site público do Emissor em Planilha (landing, termos, privacidade).
   Marca do app: azul #0098D7, preto #020202, fundo #F9FDFE; Archivo (títulos largos) + Martian Mono (números).
   O azul fica na seleção e na fita de progresso (como no app); botões principais são pretos, como o
   botão de emitir em produção. */
:root {
  --tinta: #020202;
  --texto-2: #43535b;
  --papel: #f9fdfe;
  --branco: #ffffff;
  --azul: #0098d7;
  --azul-texto: #00719f;
  --selecao: #e2f3fa;
  --grade: #d4e5ec;
  --cabecalho: #eef5f8;
  --rejeitada: #c2281d;
  --rejeitada-fundo: #fdedeb;
  --fonte: "Archivo", system-ui, -apple-system, "Segoe UI", sans-serif;
  --mono: "Martian Mono", ui-monospace, "SFMono-Regular", Menlo, monospace;
  --largura: 1120px;
}
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
body { margin: 0; background: var(--papel); color: var(--tinta); font: 400 17px/1.55 var(--fonte); font-stretch: 100%; }
img { max-width: 100%; height: auto; display: block; }
a { color: var(--azul-texto); text-underline-offset: 0.18em; }
a:hover { color: var(--tinta); }
:focus-visible { outline: 3px solid var(--azul); outline-offset: 2px; }
.mono { font-family: var(--mono); font-size: 0.86em; letter-spacing: -0.01em; }
.envelope { max-width: var(--largura); margin: 0 auto; padding: 0 16px; }
@media (min-width: 720px) { .envelope { padding: 0 32px; } }

/* Topo */
.topo { border-bottom: 1px solid var(--grade); background: var(--branco); }
.topo .envelope { display: flex; align-items: center; gap: 24px; min-height: 64px; }
.marca { display: flex; align-items: center; gap: 10px; color: var(--tinta); text-decoration: none; font-weight: 700; font-stretch: 112%; font-size: 18px; white-space: nowrap; }
.marca img { width: 28px; height: 28px; }
.topo nav { display: flex; gap: 22px; margin-left: auto; align-items: center; }
.topo nav a:not(.botao) { color: var(--tinta); text-decoration: none; font-size: 15px; }
.topo nav a:not(.botao):hover { text-decoration: underline; }
@media (max-width: 719px) { .topo nav a.opcional { display: none; } }

/* Botões */
.botao { display: inline-flex; align-items: center; justify-content: center; gap: 8px; font: 600 16px/1 var(--fonte); padding: 15px 22px; border-radius: 6px; border: 2px solid var(--tinta); background: var(--tinta); color: var(--branco); text-decoration: none; cursor: pointer; }
.botao:hover { background: #262626; color: var(--branco); border-color: #262626; }
.botao.secundario { background: transparent; color: var(--tinta); }
.botao.secundario:hover { background: var(--branco); }
.botao.pequeno { padding: 10px 14px; font-size: 14px; }

/* Abertura */
.abertura { padding: 56px 0 64px; }
.abertura .envelope { display: grid; gap: 48px; align-items: center; }
@media (min-width: 980px) { .abertura .envelope { grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: 56px; } .abertura { padding: 80px 0 96px; } }
.abertura h1 { margin: 0 0 24px; font-weight: 800; font-stretch: 118%; font-size: clamp(2.3rem, 5vw, 3.9rem); line-height: 1.02; letter-spacing: -0.015em; }
/* O título é uma faixa selecionada da planilha: contorno azul, preenchimento claro e a alça de preencher no canto. */
.selecionado { display: inline-block; background: var(--selecao); border: 2px solid var(--azul); padding: 0.08em 0.18em 0.12em; margin-left: -0.2em; position: relative; }
.alca { position: absolute; right: -6px; bottom: -6px; width: 10px; height: 10px; background: var(--azul); border: 2px solid var(--papel); box-sizing: content-box; }
.abertura p.lide { font-size: 19px; color: var(--texto-2); max-width: 34em; margin: 0 0 32px; }
.acoes { display: flex; flex-wrap: wrap; gap: 12px 20px; align-items: center; }
.acoes .nota { font-size: 14px; color: var(--texto-2); }

/* Demonstração do lote */
.demo { margin: 0; background: var(--branco); border: 1px solid var(--grade); border-radius: 8px; overflow: hidden; }
.demo-topo { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; padding: 16px 18px 12px; }
.demo-topo strong { font-stretch: 110%; font-size: 16px; }
.contador { font-family: var(--mono); font-size: 13px; color: var(--texto-2); white-space: nowrap; }
.fita { display: grid; grid-template-columns: repeat(6, 1fr); gap: 3px; padding: 0 18px 14px; }
.fita span { height: 12px; border-radius: 2px; background: var(--cabecalho); transition: background-color 0.2s; }
.fita span.ok { background: var(--azul); }
.fita span.erro { background: var(--rejeitada); }
.demo table { width: 100%; border-collapse: collapse; table-layout: fixed; font-size: 13.5px; }
.demo th { text-align: left; font-weight: 500; color: var(--texto-2); background: var(--cabecalho); padding: 8px 10px; border-top: 1px solid var(--grade); border-bottom: 1px solid var(--grade); }
.demo td { padding: 9px 10px; border-bottom: 1px solid var(--grade); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.demo th + th, .demo td + td { border-left: 1px solid var(--grade); }
.demo .valor { text-align: right; font-family: var(--mono); font-size: 12.5px; }
.demo .doc { font-family: var(--mono); font-size: 11.5px; }
.demo col.c-cliente { width: 33%; } .demo col.c-doc { width: 31%; } .demo col.c-valor { width: 18%; } .demo col.c-sit { width: 18%; }
.demo .sit { color: var(--texto-2); }
.demo tr.ok .sit { color: var(--azul-texto); }
.demo tr.erro .sit { color: var(--rejeitada); font-weight: 600; }
.demo tr.erro td { background: var(--rejeitada-fundo); }
@media (max-width: 599px) {
  .demo .doc, .demo col.c-doc { display: none; }
  .demo col.c-cliente { width: 46%; } .demo col.c-valor { width: 27%; } .demo col.c-sit { width: 27%; }
}
.demo-rodape { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 14px 18px; flex-wrap: wrap; }
.demo-rodape .total { font-family: var(--mono); font-size: 13px; }
.explicacao { margin: 0 18px 18px; padding: 12px 14px; border: 1px solid #f1b8b2; background: var(--rejeitada-fundo); border-radius: 6px; font-size: 14px; color: #6d1a13; }
.explicacao p { margin: 0; }
.explicacao p + p { margin-top: 6px; }
.explicacao code { font-family: var(--mono); font-size: 12.5px; background: var(--branco); padding: 1px 5px; border-radius: 3px; }
.legenda-demo { font-size: 13px; color: var(--texto-2); margin: 10px 2px 0; }

/* Seções */
section { padding: 72px 0; }
section + section { border-top: 1px solid var(--grade); }
h2 { margin: 0 0 12px; font-weight: 750; font-stretch: 112%; font-size: clamp(1.7rem, 3vw, 2.35rem); line-height: 1.1; letter-spacing: -0.01em; }
.intro { color: var(--texto-2); max-width: 40em; margin: 0 0 36px; font-size: 18px; }
h3 { margin: 0 0 6px; font-size: 18px; font-weight: 650; font-stretch: 106%; line-height: 1.3; }

/* Passos como linhas de planilha: o número da linha à esquerda é a ordem. */
.passos { border: 1px solid var(--grade); border-radius: 8px; overflow: hidden; background: var(--branco); }
.passo { display: grid; grid-template-columns: 52px 1fr; }
.passo + .passo { border-top: 1px solid var(--grade); }
.passo .linha { background: var(--cabecalho); border-right: 1px solid var(--grade); font-family: var(--mono); font-size: 14px; color: var(--texto-2); display: flex; justify-content: center; padding-top: 22px; }
.passo .celulas { display: grid; gap: 4px 32px; padding: 20px 22px; }
@media (min-width: 800px) { .passo .celulas { grid-template-columns: minmax(0, 2fr) minmax(0, 3fr); align-items: baseline; } }
.passo h3 { margin: 0; }
.passo p { margin: 0; color: var(--texto-2); }

/* Recursos */
.recursos { display: grid; gap: 32px 56px; }
@media (min-width: 800px) { .recursos { grid-template-columns: 1fr 1fr; } }
.recursos p { margin: 0; color: var(--texto-2); max-width: 34em; }
.captura { margin: 56px 0 0; }
.captura img { border: 1px solid var(--grade); border-radius: 8px; background: var(--branco); }
.captura figcaption { font-size: 14px; color: var(--texto-2); margin-top: 10px; }

/* Preço e assinatura */
.assinar .envelope { display: grid; gap: 48px; }
@media (min-width: 900px) { .assinar .envelope { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 72px; } }
.preco { font-family: var(--mono); font-weight: 600; font-size: clamp(2.4rem, 5.5vw, 3.3rem); letter-spacing: -0.06em; word-spacing: -0.3em; line-height: 1; margin: 32px 0 8px; }
.preco-sub { color: var(--texto-2); margin: 0 0 28px; }
.incluso { list-style: none; padding: 0; margin: 0 0 28px; }
.incluso li { padding: 10px 0 10px 28px; border-top: 1px solid var(--grade); position: relative; }
.incluso li::before { content: ""; position: absolute; left: 4px; top: 17px; width: 9px; height: 9px; background: var(--azul); }
.proprio { font-size: 15px; color: var(--texto-2); margin: 0; max-width: 32em; }
.formulario { background: var(--branco); border: 1px solid var(--grade); border-radius: 8px; padding: 28px 24px; align-self: start; }
@media (min-width: 900px) { .formulario { padding: 32px; } }
.formulario h3 { font-size: 20px; margin-bottom: 20px; }
.formulario form { display: grid; gap: 18px; }
.campo { display: grid; gap: 6px; }
.campo label { font-weight: 600; font-size: 15px; }
.campo input { font: 16px/1.3 var(--fonte); padding: 12px 12px; border: 1px solid #b9cdd6; border-radius: 6px; background: var(--branco); width: 100%; color: var(--tinta); }
.campo input:focus { outline: none; border-color: var(--azul); box-shadow: 0 0 0 3px var(--selecao); }
.dominio { display: flex; align-items: stretch; border: 1px solid #b9cdd6; border-radius: 6px; overflow: hidden; background: var(--branco); }
.dominio:focus-within { border-color: var(--azul); box-shadow: 0 0 0 3px var(--selecao); }
.dominio input { border: 0; border-radius: 0; min-width: 0; flex: 1; }
.dominio input:focus { box-shadow: none; }
.dominio span { display: flex; align-items: center; padding: 0 12px; background: var(--cabecalho); color: var(--texto-2); font-family: var(--mono); font-size: 13px; border-left: 1px solid #b9cdd6; white-space: nowrap; }
.dica { font-size: 14px; color: var(--texto-2); margin: 0; min-height: 1.4em; }
.dica.livre { color: var(--azul-texto); }
.dica.ocupado { color: var(--rejeitada); }
.erro-form { margin: 0; padding: 12px 14px; border-radius: 6px; background: var(--rejeitada-fundo); color: #6d1a13; border: 1px solid #f1b8b2; font-size: 15px; }
.aviso-form { margin: 0; padding: 12px 14px; border-radius: 6px; background: var(--selecao); border: 1px solid #b7def0; font-size: 15px; }
.miudo { font-size: 13.5px; color: var(--texto-2); margin: 0; }
.formulario .botao { width: 100%; }

/* Perguntas */
.perguntas { max-width: 760px; }
.perguntas details { border-top: 1px solid var(--grade); }
.perguntas details:last-child { border-bottom: 1px solid var(--grade); }
.perguntas summary { cursor: pointer; padding: 18px 32px 18px 0; font-weight: 600; font-size: 18px; list-style: none; position: relative; }
.perguntas summary::-webkit-details-marker { display: none; }
.perguntas summary::after { content: "+"; position: absolute; right: 4px; top: 14px; font: 400 24px/1 var(--mono); color: var(--texto-2); }
.perguntas details[open] summary::after { content: "−"; }
.perguntas details p { margin: 0 0 18px; color: var(--texto-2); max-width: 40em; }

/* Contato, no fim das perguntas */
.contato { display: grid; gap: 28px 56px; margin-top: 48px; max-width: 980px; }
@media (min-width: 800px) { .contato { grid-template-columns: 1fr 1fr; } }
.contato p { margin: 0; color: var(--texto-2); max-width: 34em; }

/* Rodapé */
.rodape { border-top: 1px solid var(--grade); background: var(--branco); padding: 40px 0 48px; font-size: 15px; color: var(--texto-2); }
.rodape .envelope { display: grid; gap: 20px; }
@media (min-width: 800px) { .rodape .envelope { grid-template-columns: 1fr auto; align-items: start; } }
.rodape p { margin: 0 0 6px; }
.rodape nav { display: flex; flex-wrap: wrap; gap: 8px 22px; }
.rodape nav a { color: var(--tinta); }

/* Páginas de texto (termos, privacidade) */
.texto { max-width: 720px; padding: 48px 0 72px; }
.texto h1 { font-weight: 800; font-stretch: 112%; font-size: clamp(2rem, 4vw, 2.75rem); line-height: 1.08; margin: 0 0 8px; }
.texto .data { color: var(--texto-2); margin: 0 0 32px; }
.texto h2 { font-size: 21px; margin: 36px 0 8px; font-stretch: 106%; }
.texto p, .texto li { color: #1f2a2f; }
.texto ul { padding-left: 20px; }
.texto li { margin: 4px 0; }
.passo .mono { overflow-wrap: anywhere; }
.demo th.valor, .demo th.doc { font-family: var(--fonte); font-size: inherit; }
@media (max-width: 719px) { .selecionado { margin-left: 0; } }
@media (max-width: 479px) { .dominio span { font-size: 11.5px; padding: 0 8px; } }

/* Guia (artigos): a planilha de exemplo repete a grade do app; as etapas são uma sequência real. */
.guia .lide { font-size: 19px; color: var(--texto-2); margin: 0 0 8px; }
.guia h3 { margin: 0 0 4px; }
.guia .etapas { list-style: none; padding: 0; margin: 20px 0 0; counter-reset: etapa; }
.guia .etapas > li { counter-increment: etapa; position: relative; padding: 0 0 24px 48px; margin: 0; }
.guia .etapas > li::before { content: counter(etapa); position: absolute; left: 0; top: 0; width: 30px; height: 30px; display: grid; place-items: center; border: 1px solid var(--grade); border-radius: 6px; background: var(--cabecalho); font: 600 13px/1 var(--mono); color: var(--texto-2); }
.guia .etapas > li:not(:last-child)::after { content: ""; position: absolute; left: 15px; top: 36px; bottom: 6px; border-left: 1px solid var(--grade); }
.guia .etapas p { margin: 0; }
.planilha { margin: 16px 0 4px; }
.planilha .rolagem { overflow-x: auto; background: var(--branco); border: 1px solid var(--grade); border-radius: 8px; }
.planilha table { border-collapse: collapse; font-size: 13.5px; min-width: 640px; width: 100%; }
.planilha th { text-align: left; font-weight: 500; color: var(--texto-2); background: var(--cabecalho); padding: 8px 10px; border-bottom: 1px solid var(--grade); white-space: nowrap; }
.planilha td { padding: 8px 10px; border-bottom: 1px solid var(--grade); white-space: nowrap; color: var(--tinta); }
.planilha tr:last-child td { border-bottom: 0; }
.planilha th + th, .planilha td + td { border-left: 1px solid var(--grade); }
.planilha .doc { font-family: var(--mono); font-size: 12px; }
.planilha .valor { text-align: right; font-family: var(--mono); font-size: 12.5px; }
.planilha td.valor { background: var(--selecao); box-shadow: inset 2px 0 0 var(--azul), inset -2px 0 0 var(--azul); }
.planilha tbody tr:first-child td.valor { box-shadow: inset 2px 0 0 var(--azul), inset -2px 0 0 var(--azul), inset 0 2px 0 var(--azul); }
.planilha tbody tr:last-child td.valor { box-shadow: inset 2px 0 0 var(--azul), inset -2px 0 0 var(--azul), inset 0 -2px 0 var(--azul); }
.planilha figcaption { font-size: 13px; color: var(--texto-2); margin-top: 8px; }
.chamada { margin-top: 48px; padding: 28px; background: var(--branco); border: 1px solid var(--grade); border-left: 4px solid var(--azul); border-radius: 8px; }
.chamada h2 { margin-top: 0; }
.chamada p { margin: 0 0 16px; }
.chamada p:last-child { margin: 0; }
.planilha th.valor { font-family: var(--fonte); font-size: inherit; }
/* Vídeos do guia: a gravação 16:9 numa moldura de tela; o principal passa da coluna de texto até a largura do site. */
.video { margin: 24px 0 8px; }
.video video { display: block; width: 100%; height: auto; aspect-ratio: 16 / 9; background: var(--cabecalho); border: 1px solid var(--grade); border-radius: 8px; }
.video figcaption { font-size: 13.5px; color: var(--texto-2); margin-top: 10px; max-width: 46em; }
.video .duracao { font-family: var(--mono); font-size: 12px; white-space: nowrap; margin-left: 4px; }
@media (min-width: 1000px) { .video.largo { width: min(1056px, calc(100vw - 64px)); margin: 32px 0 16px; } }
.guia .etapas .video { margin: 16px 0 4px; }