/* Prumbit — estilos do app, com a identidade P2 (brand/guia-de-marca.docx; tokens em brand/web/tokens.css).
   Fontes servidas pelo próprio site (licença OFL, em /fontes): nenhuma chamada a terceiros, e a CSP continua 'self'. */

@font-face { font-family: "Instrument Sans"; font-style: normal; font-weight: 400; font-display: swap; src: url("/fontes/instrument-sans-latin-400-normal.woff2") format("woff2"); }
@font-face { font-family: "Instrument Sans"; font-style: normal; font-weight: 600; font-display: swap; src: url("/fontes/instrument-sans-latin-600-normal.woff2") format("woff2"); }
@font-face { font-family: "Instrument Sans"; font-style: normal; font-weight: 700; font-display: swap; src: url("/fontes/instrument-sans-latin-700-normal.woff2") format("woff2"); }
@font-face { font-family: "JetBrains Mono"; font-style: normal; font-weight: 500; font-display: swap; src: url("/fontes/jetbrains-mono-latin-500-normal.woff2") format("woff2"); }

:root {
  /* Marca. O laranja (#FF5A1F) é o "pixel": usado em gráfico e foco, nunca como texto sobre fundo claro. */
  --cor-marca: #15171B;           /* Tinta: botão principal, bordas ativas */
  --cor-marca-escura: #2A2E35;    /* Grafite: hover do botão */
  --cor-marca-clara: #ECEDEA;     /* fundo de faixas e avisos informativos */
  --cor-destaque: #FF5A1F;        /* Laranja prumo */
  --cor-link: #B93D0A;            /* Laranja texto (5,2:1 sobre o fundo) */
  --cor-sobre-marca: #F5F6F4;     /* texto sobre a Tinta */
  --cor-sobre-destaque: #15171B;  /* texto sobre o laranja (5,9:1) */
  --cor-lacuna-fundo: #ffe58a;    /* lacunas [[A DEFINIR]]: não seguem a marca, de propósito */
  --cor-lacuna-texto: #5a3d00;

  /* Neutros */
  --cor-fundo: #F5F6F4;           /* Branco técnico */
  --cor-superficie: #FFFFFF;
  --cor-texto: #15171B;
  --cor-texto-suave: #5C626C;
  --cor-borda: #D9DCE0;

  /* Status (sempre com palavra, nunca só cor) */
  --cor-ok: #1F7A4D;
  --cor-ok-fundo: #E6F2EB;
  --cor-perigo: #B42318;
  --cor-perigo-fundo: #FBEBE9;
  --cor-atencao: #8A5A00;
  --cor-atencao-fundo: #FBF1DC;
  --cor-neutro: #5C626C;
  --cor-neutro-fundo: #ECEDEA;

  /* Tipografia */
  --fonte-texto: "Instrument Sans", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  --fonte-mono: "JetBrains Mono", ui-monospace, "Cascadia Mono", Consolas, monospace;
  --fonte-titulo: var(--fonte-texto);
  --tamanho-base: 1rem;

  /* Forma */
  --raio: 10px;
  --raio-pequeno: 6px;
  --sombra: 0 1px 2px rgba(16, 24, 40, 0.06), 0 1px 3px rgba(16, 24, 40, 0.08);
  --largura-maxima: 1040px;
  --espaco: 1rem;
}

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

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  font-family: var(--fonte-texto);
  font-size: var(--tamanho-base);
  line-height: 1.55;
  color: var(--cor-texto);
  background: var(--cor-fundo);
}

h1, h2, h3 { font-family: var(--fonte-titulo); line-height: 1.2; margin: 0 0 0.6em; }
h1 { font-size: clamp(1.6rem, 4vw, 2.4rem); letter-spacing: -0.01em; }
h2 { font-size: clamp(1.2rem, 2.6vw, 1.5rem); }
h3 { font-size: 1.05rem; }
p { margin: 0 0 1em; }
a { color: var(--cor-link); }
h1 { letter-spacing: -0.02em; }
.pb-codigo, code { font-family: var(--fonte-mono); font-variant-numeric: tabular-nums; letter-spacing: 0.02em; font-size: 0.92em; }

.conteudo { max-width: var(--largura-maxima); margin: 0 auto; padding: 0 16px; }
.conteudo-estreito { max-width: 720px; }

/* Topo e rodapé */
.topo { background: var(--cor-superficie); border-bottom: 1px solid var(--cor-borda); }
.topo-linha { display: flex; align-items: center; justify-content: space-between; min-height: 60px; gap: 1rem; }
.logo { display: inline-flex; align-items: center; gap: 0.5rem; font-weight: 700; font-size: 1.1rem; color: var(--cor-texto); text-decoration: none; }
.logo-img { display: block; height: 30px; width: auto; }
.topo-links a:hover { color: var(--cor-texto); }
.topo-links a { color: var(--cor-texto-suave); text-decoration: none; font-size: 0.95rem; }
.rodape { margin-top: 3rem; padding: 1.5rem 0; border-top: 1px solid var(--cor-borda); color: var(--cor-texto-suave); font-size: 0.9rem; }
.rodape-linha { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 0.5rem; }
.rodape a { color: inherit; }

.faixa-demo { background: var(--cor-destaque); color: var(--cor-sobre-destaque); text-align: center; padding: 0.5rem 16px; font-size: 0.9rem; font-weight: 600; }
.marca-provisoria { display: inline-block; margin-bottom: 0.75rem; padding: 0.15rem 0.5rem; border: 1px dashed var(--cor-atencao); border-radius: var(--raio-pequeno); color: var(--cor-atencao); background: var(--cor-atencao-fundo); font-size: 0.75rem; font-weight: 700; letter-spacing: 0.02em; }

/* Seções */
.destaque { background: var(--cor-superficie); border-bottom: 1px solid var(--cor-borda); padding: 3rem 0; }
.destaque-grade { display: grid; gap: 2rem; grid-template-columns: 1fr; align-items: center; }
@media (min-width: 860px) { .destaque-grade { grid-template-columns: 1.4fr 1fr; } }
.subchamada { font-size: 1.15rem; color: var(--cor-texto-suave); max-width: 38em; }
.secao { padding: 2.5rem 0; }
.secao-alternada { background: var(--cor-superficie); border-top: 1px solid var(--cor-borda); border-bottom: 1px solid var(--cor-borda); }
.nota { color: var(--cor-texto-suave); font-size: 0.92rem; }
.aviso-juridico { margin-top: 2rem; font-size: 0.85rem; }

/* Botões */
.botao { display: inline-flex; align-items: center; justify-content: center; gap: 0.4rem; min-height: 44px; padding: 0.6rem 1.1rem; border-radius: var(--raio-pequeno); border: 1px solid var(--cor-borda); background: var(--cor-superficie); color: var(--cor-texto); font: inherit; font-weight: 600; text-decoration: none; cursor: pointer; text-align: center; }
.botao:hover { border-color: var(--cor-marca); }
.botao:focus-visible, a:focus-visible, button:focus-visible { outline: 3px solid var(--cor-destaque); outline-offset: 2px; }
.botao-principal { background: var(--cor-marca); border-color: var(--cor-marca); color: var(--cor-sobre-marca); }
.botao-principal:hover { background: var(--cor-marca-escura); }
.botao-grande { min-height: 52px; padding: 0.8rem 1.5rem; font-size: 1.05rem; }
.botao-discreto { background: transparent; }
.botao-link { background: none; border: 0; padding: 0; color: var(--cor-texto-suave); text-decoration: underline; font: inherit; font-size: 0.9rem; cursor: pointer; }
.pilha { display: grid; gap: 0.75rem; }
.acoes { display: flex; flex-wrap: wrap; gap: 0.6rem; margin: 1.25rem 0 0.75rem; }
.form-desconectar { margin-top: 1rem; }

/* Cartões */
.cartao { background: var(--cor-superficie); border: 1px solid var(--cor-borda); border-radius: var(--raio); padding: 1.25rem; box-shadow: var(--sombra); }
.cartao-leitura { border-left: 4px solid var(--cor-ok); }
.passos { padding-left: 1.25rem; display: grid; gap: 0.6rem; max-width: 46em; }
.lista-status { list-style: none; padding: 0; margin: 0; display: grid; gap: 0.75rem; }
.lista-status > li { display: grid; gap: 0.25rem; grid-template-columns: 1fr; }
@media (min-width: 700px) { .lista-status > li { grid-template-columns: 230px 1fr; align-items: center; } }

/* Selos de status */
.etiqueta-status { display: inline-block; padding: 0.15rem 0.6rem; border-radius: 999px; font-size: 0.82rem; font-weight: 700; white-space: nowrap; }
.status-OK { color: var(--cor-ok); background: var(--cor-ok-fundo); }
.status-SUSPENSO, .status-OUTRO_PRODUTO, .status-INEXISTENTE { color: var(--cor-perigo); background: var(--cor-perigo-fundo); }
.status-SEM_CODIGO { color: var(--cor-atencao); background: var(--cor-atencao-fundo); }
.status-INCONCLUSIVO { color: var(--cor-neutro); background: var(--cor-neutro-fundo); }
.risco { font-size: 0.8rem; font-weight: 600; color: var(--cor-texto-suave); }
.risco-muito_alto { color: var(--cor-perigo); }

/* Alertas */
.alerta { padding: 0.75rem 1rem; border-radius: var(--raio-pequeno); }
.alerta-erro { background: var(--cor-perigo-fundo); color: var(--cor-perigo); }
.alerta-info { background: var(--cor-marca-clara); color: var(--cor-marca-escura); }

/* Progresso */
.barra { width: 100%; height: 14px; appearance: none; border: 0; border-radius: 999px; background: var(--cor-neutro-fundo); overflow: hidden; }
.barra::-webkit-progress-bar { background: var(--cor-neutro-fundo); border-radius: 999px; }
.barra::-webkit-progress-value { background: var(--cor-destaque); border-radius: 999px; }
.barra::-moz-progress-bar { background: var(--cor-destaque); border-radius: 999px; }

/* Relatório */
.resumo-frase { font-size: 1.15rem; font-weight: 600; }
.resumo { list-style: none; padding: 0; margin: 1rem 0; display: grid; gap: 0.5rem; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); }
.resumo-item, .resumo-item a { display: flex; flex-direction: column; align-items: flex-start; gap: 0.3rem; text-decoration: none; color: inherit; }
.resumo-item { background: var(--cor-superficie); border: 1px solid var(--cor-borda); border-radius: var(--raio); padding: 0.75rem; }
.resumo-item.ativo { border-color: var(--cor-marca); box-shadow: 0 0 0 2px var(--cor-marca-clara); }
.resumo-numero { font-size: 1.6rem; font-weight: 800; line-height: 1; }
.resumo-item .etiqueta-status { white-space: normal; }

.itens { display: grid; gap: 0.9rem; margin: 1rem 0 1.5rem; }
.item { background: var(--cor-superficie); border: 1px solid var(--cor-borda); border-left-width: 5px; border-radius: var(--raio); padding: 1rem 1.1rem; box-shadow: var(--sombra); min-width: 0; }
.status-borda-OK { border-left-color: var(--cor-ok); }
.status-borda-SUSPENSO, .status-borda-OUTRO_PRODUTO, .status-borda-INEXISTENTE { border-left-color: var(--cor-perigo); }
.status-borda-SEM_CODIGO { border-left-color: var(--cor-atencao); }
.status-borda-INCONCLUSIVO { border-left-color: var(--cor-neutro); }
.item-topo { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem; margin-bottom: 0.4rem; }
.item-id { margin-left: auto; color: var(--cor-texto-suave); font-size: 0.8rem; font-variant-numeric: tabular-nums; }
.item-titulo { margin: 0.2rem 0 0.4rem; overflow-wrap: anywhere; }
.item-titulo a { color: var(--cor-texto); }
.item-motivo { margin-bottom: 0.5rem; }
.item-dados { display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: 0.4rem 1rem; margin: 0 0 0.5rem; font-size: 0.9rem; }
.item-dados dt { color: var(--cor-texto-suave); font-size: 0.8rem; }
.item-dados dd { margin: 0; overflow-wrap: anywhere; }
.item-fazer { margin: 0.5rem 0 0; padding: 0.6rem 0.75rem; background: var(--cor-fundo); border-radius: var(--raio-pequeno); font-size: 0.92rem; }

.bloqueado { margin: 1.5rem 0; text-align: left; }
.fantasmas { display: grid; gap: 0.5rem; margin: 1rem 0; }
.fantasmas div { height: 42px; border-radius: var(--raio-pequeno); background: repeating-linear-gradient(90deg, var(--cor-neutro-fundo) 0 40%, var(--cor-fundo) 40% 100%); opacity: 0.8; }
.preco { font-size: 2rem; font-weight: 800; }
.paginacao { display: flex; align-items: center; justify-content: center; gap: 1rem; flex-wrap: wrap; }

@media print {
  .topo, .rodape, .acoes, .form-desconectar, .faixa-demo, .paginacao { display: none; }
  .item { break-inside: avoid; box-shadow: none; }
}

/* Ajustes finos */
.lista-status .etiqueta-status { justify-self: start; }
.resumo-item .etiqueta-status { border-radius: var(--raio-pequeno); }

/* Textos definitivos (content/textos-da-pagina.md) */
.topo-links { display: flex; gap: 1rem; flex-wrap: wrap; }
.conteudo-hero { max-width: 820px; }
.aviso-fixo { margin: 1.5rem 0 0; font-size: 0.88rem; color: var(--cor-texto-suave); border-top: 1px solid var(--cor-borda); padding-top: 0.75rem; }
.passos li h3 { margin-bottom: 0.25rem; }
.lista-status ul { margin: 0.25rem 0 0; padding-left: 1.2rem; }
.lista-status p { margin: 0; }
.precos { display: grid; gap: 1rem; grid-template-columns: 1fr; margin-bottom: 1rem; }
@media (min-width: 760px) { .precos { grid-template-columns: 1fr 1fr; } }
.precos .cartao { display: flex; flex-direction: column; align-items: flex-start; }
.precos .botao { margin-top: auto; }
.cartao-destaque { border: 2px solid var(--cor-marca); }
.faq { border-bottom: 1px solid var(--cor-borda); padding: 0.75rem 0; }
.faq summary { cursor: pointer; font-weight: 700; list-style-position: outside; }
.faq[open] summary { margin-bottom: 0.5rem; }
.secao-cta { text-align: center; background: var(--cor-marca-clara); }
.formulario input[type="email"] { font: inherit; padding: 0.7rem 0.8rem; border: 1px solid var(--cor-borda); border-radius: var(--raio-pequeno); width: 100%; }
.formulario input[type="email"]:focus { outline: 3px solid var(--cor-destaque); border-color: var(--cor-marca); }
.aceite { display: flex; gap: 0.6rem; align-items: flex-start; }
.aceite input { width: 20px; height: 20px; margin-top: 0.15rem; flex: none; }
.rodape p { margin: 0 0 0.5rem; }

/* Lacunas [[A DEFINIR: ...]]: visíveis de propósito, para ninguém publicar sem perceber */
.lacuna { background: var(--cor-lacuna-fundo); color: var(--cor-lacuna-texto); padding: 0 0.2em; border-radius: 3px; font-weight: 600; }

/* Demonstração: e-mails simulados */
.email-simulado { margin-bottom: 1rem; }
.email-texto { white-space: pre-wrap; overflow-wrap: anywhere; font: inherit; font-size: 0.92rem; margin: 0; }
.faixa-demo a { color: inherit; }
@media (max-width: 560px) {
  .topo-links { display: none; }
  .logo { white-space: nowrap; }
}

/* Marca: logo + frase de assinatura */
.logo-assinatura { font-weight: 400; font-size: 0.85rem; color: var(--cor-texto-suave); margin-left: 0.6rem; padding-left: 0.6rem; border-left: 1px solid var(--cor-borda); }
.rodape-assinatura { font-weight: 600; color: var(--cor-texto); }
@media (max-width: 560px) { .logo-assinatura { display: none; } }
#relatorio h3 { margin-top: 1.5rem; }
.campo-oculto { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.formulario input[type="text"], .formulario textarea { font: inherit; padding: 0.7rem 0.8rem; border: 1px solid var(--cor-borda); border-radius: var(--raio-pequeno); width: 100%; }

/* Termos e Política */
.texto-legal h2 { font-size: 1.15rem; margin-top: 1.8rem; }
.texto-legal h3 { font-size: 1rem; margin-top: 1.2rem; }
.texto-legal li p { margin: 0 0 0.4rem; }
.resumo-termos { background: var(--cor-superficie); border: 1px solid var(--cor-borda); border-left: 4px solid var(--cor-destaque); border-radius: var(--raio); padding: 1rem 1.25rem; margin: 1.25rem 0; }
.resumo-termos h2 { margin-top: 0; }
.tabela-rolagem { overflow-x: auto; margin: 1rem 0; }
.texto-legal table { border-collapse: collapse; width: 100%; font-size: 0.9rem; }
.texto-legal th, .texto-legal td { border: 1px solid var(--cor-borda); padding: 0.5rem 0.6rem; text-align: left; vertical-align: top; }
.texto-legal th { background: var(--cor-marca-clara); }
.texto-legal td p { margin: 0 0 0.3rem; }

/* Vídeo de demonstração (abaixo do hero) */
.secao-video h2 { margin-bottom: 16px; }
.video-demo { display: block; width: 100%; height: auto; aspect-ratio: 16 / 9; background: var(--cor-marca); border-radius: 10px; box-shadow: 0 1px 2px rgba(21, 23, 27, .08), 0 8px 24px rgba(21, 23, 27, .08); }
.secao-video .nota { margin-top: 10px; }
.transcricao { margin-top: 8px; }
.transcricao summary { cursor: pointer; color: var(--cor-link); font-weight: 600; }
.transcricao p { margin: 8px 0 0; }