/* O visual do CriptoJus.
 *
 * Extraído dos protótipos aprovados (docs/prototipo-consulta.html e
 * docs/prototipo-painel.html), para que a página servida e o protótipo não
 * virem dois desenhos que divergem devagar.
 *
 * Fontes: Source Serif 4 nas respostas, IBM Plex Sans na interface, IBM Plex
 * Mono nos dados. Número, hora e impressão digital são coisas que se comparam
 * em coluna, e é o alinhamento tabular que torna isso legível.
 */

  :root{
    color-scheme: light;
    --papel:#f1f4f6; --carta:#ffffff; --linha:#e0e6ea; --linha-forte:#ccd6dc;
    --tinta:#16222a; --meia:#566871; --fraca:#84959e;
    --marca:#1d4b73; --marca-fraca:#e7eef4;
    --sim:#14663f;  --sim-fundo:#e6f2ea;  --sim-linha:#bcdcc9;
    --nao:#a5271d;  --nao-fundo:#fbeceb;  --nao-linha:#f0c6c1;
    --talvez:#8a6410; --talvez-fundo:#fbf2de; --talvez-linha:#ecd9a8;
    --sombra:0 1px 2px rgba(22,34,42,.05);
  }
  @media (prefers-color-scheme:dark){
    :root:not([data-theme="light"]){
      color-scheme: dark;
      --papel:#0d1418; --carta:#151f25; --linha:#25333b; --linha-forte:#33454f;
      --tinta:#e8eef1; --meia:#9aabb4; --fraca:#71848d;
      --marca:#7fb4de; --marca-fraca:#132632;
      --sim:#62c795;  --sim-fundo:#102a1e;  --sim-linha:#1f4a36;
      --nao:#f39084;  --nao-fundo:#2e1613;  --nao-linha:#5a2a24;
      --talvez:#e3bb6b; --talvez-fundo:#2b2311; --talvez-linha:#4d3f1d;
      --sombra:0 1px 2px rgba(0,0,0,.35);
    }
  }
  :root[data-theme="dark"]{
    color-scheme: dark;
    --papel:#0d1418; --carta:#151f25; --linha:#25333b; --linha-forte:#33454f;
    --tinta:#e8eef1; --meia:#9aabb4; --fraca:#71848d;
    --marca:#7fb4de; --marca-fraca:#132632;
    --sim:#62c795;  --sim-fundo:#102a1e;  --sim-linha:#1f4a36;
    --nao:#f39084;  --nao-fundo:#2e1613;  --nao-linha:#5a2a24;
    --talvez:#e3bb6b; --talvez-fundo:#2b2311; --talvez-linha:#4d3f1d;
    --sombra:0 1px 2px rgba(0,0,0,.35);
  }

  *{box-sizing:border-box}
  body{
    margin:0; background:var(--papel); color:var(--tinta);
    font-family:"IBM Plex Sans",system-ui,-apple-system,sans-serif;
    font-size:15px; line-height:1.5; -webkit-font-smoothing:antialiased;
  }
  .mono{font-family:"IBM Plex Mono",ui-monospace,"SF Mono",monospace; font-variant-numeric:tabular-nums}

  .folha{max-width:468px; margin:0 auto; padding-inline:16px; padding-block:0 56px}

  /* ---------------- topo ---------------- */
  .topo{padding-block:22px 16px; display:flex; align-items:baseline; justify-content:space-between; gap:12px}
  .escritorio{font-family:"Source Serif 4",Georgia,serif; font-weight:700; font-size:18px; letter-spacing:-.01em}
  .escritorio span{display:block; font-family:"IBM Plex Sans",sans-serif; font-weight:400;
    font-size:11.5px; letter-spacing:.09em; text-transform:uppercase; color:var(--fraca); margin-top:2px}
  .porcriptojus{font-size:11.5px; color:var(--fraca); white-space:nowrap}
  .porcriptojus b{color:var(--marca); font-weight:600}

  /* ---------------- faixa do CPF ---------------- */
  .quem{display:flex; align-items:center; gap:9px; flex-wrap:wrap;
    background:var(--carta); border:1px solid var(--linha); border-radius:11px;
    padding:10px 13px; font-size:13px; color:var(--meia); box-shadow:var(--sombra)}
  .quem .rot{color:var(--fraca)}
  .quem .val{color:var(--tinta); font-weight:500}
  .quem button{margin-left:auto; background:none; border:0; padding:0; cursor:pointer;
    font:inherit; font-size:12.5px; color:var(--marca); text-decoration:underline; text-underline-offset:2px}

  /* ---------------- a resposta ---------------- */
  .resposta{margin-top:18px; background:var(--carta); border:1px solid var(--linha);
    border-radius:16px; padding:22px 20px; box-shadow:var(--sombra)}
  .resposta h1{
    font-family:"Source Serif 4",Georgia,serif; font-weight:700;
    font-size:25px; line-height:1.24; letter-spacing:-.015em; text-wrap:balance;
    margin:0 0 12px;
  }
  .resposta h1 em{font-style:normal; color:var(--marca); white-space:nowrap}
  .resposta p{margin:0 0 14px; color:var(--meia); font-size:14.5px}
  .resposta p:last-child{margin-bottom:0}

  .numeros{display:flex; flex-direction:column; gap:7px; margin:0 0 16px}
  .numero{display:flex; align-items:center; gap:10px;
    border:1px solid var(--sim-linha); background:var(--sim-fundo); color:var(--sim);
    border-radius:10px; padding:10px 13px; font-size:16px; font-weight:500}
  .numero svg{width:17px;height:17px;flex:none;stroke:currentColor;stroke-width:2.1;fill:none;
    stroke-linecap:round;stroke-linejoin:round}
  .numero small{margin-left:auto; font-size:11.5px; font-weight:400; color:var(--meia);
    font-family:"IBM Plex Sans",sans-serif; text-align:right; line-height:1.3}

  .recado{border-top:1px solid var(--linha); padding-top:14px; margin-top:16px;
    font-size:14.5px; color:var(--tinta); font-weight:500}
  .recado span{display:block; font-weight:400; color:var(--meia); font-size:13.5px; margin-top:3px}

  /* ---------------- títulos de seção ---------------- */
  .secao{margin-top:34px}
  .secao > h2{font-size:12px; letter-spacing:.1em; text-transform:uppercase;
    color:var(--fraca); font-weight:600; margin:0 0 4px}
  .secao > .sub{margin:0 0 14px; font-size:13.5px; color:var(--meia)}

  /* ---------------- conferir ---------------- */
  .caixa{background:var(--carta); border:1px solid var(--linha); border-radius:14px;
    padding:16px 15px; box-shadow:var(--sombra)}
  .caixa + .caixa{margin-top:12px}
  .pergunta{font-size:14.5px; font-weight:600; margin:0 0 11px}

  .meios{display:flex; gap:7px; flex-wrap:wrap; margin-bottom:13px}
  .meio{border:1px solid var(--linha-forte); background:var(--papel); color:var(--meia);
    border-radius:999px; padding:7px 14px; font:inherit; font-size:13px; cursor:pointer}
  .meio[aria-pressed="true"]{background:var(--marca); border-color:var(--marca); color:var(--carta); font-weight:500}
  :root[data-theme="dark"] .meio[aria-pressed="true"]{color:#0b1a24}
  @media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .meio[aria-pressed="true"]{color:#0b1a24}}

  .campo{display:flex; gap:8px}
  .campo input, .caixa textarea{
    flex:1; min-width:0; width:100%; border:1px solid var(--linha-forte); background:var(--papel);
    color:var(--tinta); border-radius:10px; padding:11px 12px; font:inherit; font-size:15px}
  .campo input{font-family:"IBM Plex Mono",monospace; font-variant-numeric:tabular-nums}
  .caixa textarea{min-height:104px; resize:vertical; line-height:1.45; font-size:14px}
  input::placeholder, textarea::placeholder{color:var(--fraca)}
  input:focus-visible, textarea:focus-visible, button:focus-visible, summary:focus-visible{
    outline:2px solid var(--marca); outline-offset:2px}

  .bot{border:1px solid var(--marca); background:var(--marca); color:var(--carta);
    border-radius:10px; padding:11px 17px; font:inherit; font-size:14px; font-weight:600;
    cursor:pointer; white-space:nowrap}
  :root[data-theme="dark"] .bot{color:#0b1a24}
  @media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .bot{color:#0b1a24}}
  .bot.largo{width:100%; margin-top:10px}

  .exemplos{display:flex; gap:14px; flex-wrap:wrap; margin-top:10px}
  .exemplos button{background:none;border:0;padding:0;cursor:pointer;font:inherit;font-size:12.5px;
    color:var(--marca);text-decoration:underline;text-underline-offset:2px}
  .exemplos b{font-size:11.5px; letter-spacing:.07em; text-transform:uppercase; color:var(--fraca); font-weight:600}

  /* ---------------- vereditos ---------------- */
  .veredito{margin-top:13px; border-radius:12px; padding:14px 15px; border:1px solid}
  .veredito .titulo{display:flex; gap:9px; align-items:flex-start; font-size:15px; font-weight:600; line-height:1.35}
  .veredito .titulo svg{width:19px;height:19px;flex:none;margin-top:1px;stroke:currentColor;
    stroke-width:2.1;fill:none;stroke-linecap:round;stroke-linejoin:round}
  .veredito p{margin:9px 0 0; font-size:13.5px; line-height:1.5; color:var(--tinta)}
  .veredito .ordens{margin:11px 0 0; padding:0; list-style:none; display:flex; flex-direction:column; gap:5px}
  .veredito .ordens li{display:flex; gap:8px; font-size:14px; font-weight:600}
  .veredito .ordens li::before{content:"—"; color:currentColor; opacity:.55; font-weight:400}
  .veredito .telefone{margin-top:12px; padding-top:11px; border-top:1px solid; font-size:13px; color:var(--meia)}
  .v-sim{background:var(--sim-fundo); border-color:var(--sim-linha); color:var(--sim)}
  .v-sim .telefone{border-color:var(--sim-linha)}
  .v-nao{background:var(--nao-fundo); border-color:var(--nao-linha); color:var(--nao)}
  .v-nao .telefone{border-color:var(--nao-linha)}
  .v-talvez{background:var(--talvez-fundo); border-color:var(--talvez-linha); color:var(--talvez)}
  .v-talvez .telefone{border-color:var(--talvez-linha)}

  /* ---------------- o registro, em forma de andamento ---------------- */
  .dia{display:flex; align-items:center; gap:10px; margin:20px 0 10px; font-size:12px;
    letter-spacing:.06em; text-transform:uppercase; color:var(--fraca); font-weight:600}
  .dia::after{content:""; flex:1; height:1px; background:var(--linha)}
  .dia:first-of-type{margin-top:0}

  .mov{display:grid; grid-template-columns:52px 1fr; gap:0 14px; position:relative}
  .mov + .mov{margin-top:2px}
  .hora{font-family:"IBM Plex Mono",monospace; font-variant-numeric:tabular-nums;
    font-size:13px; color:var(--meia); text-align:right; padding-top:13px}
  .trilho{position:relative; padding:13px 0 13px 16px; border-left:1px solid var(--linha)}
  .mov:last-child .trilho{border-left-color:transparent}
  .mov:last-child .trilho::after{content:""; position:absolute; left:-1px; top:0; height:13px; width:1px; background:var(--linha)}
  .pino{position:absolute; left:-4.5px; top:17px; width:8px; height:8px; border-radius:50%;
    background:var(--marca); border:2px solid var(--papel)}
  .mov.apagada .pino{background:var(--fraca)}

  .ato{font-size:14.5px; font-weight:500; margin:0}
  .detalhe{margin:3px 0 0; font-size:13px; color:var(--meia)}
  .detalhe .mono{font-size:12.5px}
  .selos{display:flex; gap:6px; flex-wrap:wrap; margin-top:7px}
  .selo{font-size:11.5px; border-radius:6px; padding:2.5px 7px; border:1px solid var(--linha-forte);
    color:var(--meia); background:var(--papel)}
  .selo.lida{color:var(--sim); border-color:var(--sim-linha); background:var(--sim-fundo)}
  .selo.aviso{color:var(--talvez); border-color:var(--talvez-linha); background:var(--talvez-fundo)}

  details.impressao{margin-top:9px}
  details.impressao summary{cursor:pointer; font-size:12.5px; color:var(--marca); list-style:none;
    display:inline-flex; align-items:center; gap:5px}
  details.impressao summary::-webkit-details-marker{display:none}
  details.impressao summary::before{content:"+"; font-family:"IBM Plex Mono",monospace; font-weight:500}
  details.impressao[open] summary::before{content:"–"}
  .digital{margin-top:9px; border:1px solid var(--linha); border-radius:9px; background:var(--papel);
    padding:11px 12px; display:flex; flex-direction:column; gap:8px}
  .par{display:flex; gap:10px; font-size:12.5px; align-items:baseline}
  .par dt{color:var(--fraca); flex:none; width:82px}
  .par dd{margin:0; color:var(--tinta); word-break:break-all; font-family:"IBM Plex Mono",monospace; font-size:12px}
  .copiar,.baixar{align-self:flex-start; background:none; border:1px solid var(--linha-forte); color:var(--meia);
    border-radius:7px; padding:4px 9px; font:inherit; font-size:11.5px; cursor:pointer}

  /* O "conferindo…" enquanto o pedido está no ar. Sem ele, em rede ruim a tela
     ficava idêntica depois do toque — e o silêncio se lê como "não achou nada". */
  .htmx-indicator{display:none; color:var(--meia); font-size:13px}
  .htmx-request .htmx-indicator,.htmx-request.htmx-indicator{display:inline}
  button[disabled]{opacity:.6; cursor:progress}

  /* ---------------- cobertura ---------------- */
  .cobre{display:flex; flex-direction:column}
  .cobre .item{display:flex; align-items:flex-start; gap:11px; padding:11px 0; border-bottom:1px solid var(--linha)}
  .cobre .item:last-child{border-bottom:0; padding-bottom:0}
  .cobre .item:first-child{padding-top:0}
  .cobre svg{width:17px;height:17px;flex:none;margin-top:2px;stroke-width:2.1;fill:none;
    stroke-linecap:round;stroke-linejoin:round}
  .cobre .dentro svg{stroke:var(--sim)}
  .cobre .fora svg{stroke:var(--fraca)}
  .cobre b{font-weight:500; font-size:14.5px; display:block}
  .cobre span{font-size:13px; color:var(--meia)}
  .cobre .fora b{color:var(--meia)}

  .nota{margin-top:14px; padding:13px 14px; border-radius:11px;
    background:var(--marca-fraca); border:1px solid var(--linha); font-size:13.5px; color:var(--tinta)}
  .nota b{font-weight:600}

  .rodape{margin-top:36px; padding-top:18px; border-top:1px solid var(--linha);
    font-size:12.5px; color:var(--fraca); line-height:1.6}
  .rodape b{color:var(--meia); font-weight:600}
  .rodape .relogio{display:block; margin-top:9px; font-family:"IBM Plex Mono",monospace; font-size:11.5px}

  .demo{margin-top:20px; font-size:11.5px; color:var(--fraca); text-align:center; line-height:1.55}

  /* ---------------- a chave Pix, lista fechada ---------------- */
  .fechada{margin-top:11px; font-size:12.5px; color:var(--meia); line-height:1.5;
    border-left:2px solid var(--linha-forte); padding-left:11px}
  .fechada b{color:var(--tinta); font-weight:600}

  /* ---------------- se o dinheiro já saiu ---------------- */
  .socorro{border:1px solid var(--nao-linha); background:var(--carta);
    border-radius:14px; padding:18px 16px; box-shadow:var(--sombra); border-left:4px solid var(--nao)}
  .socorro h3{font-family:"Source Serif 4",Georgia,serif; font-weight:700; font-size:19px;
    line-height:1.3; margin:0 0 8px; letter-spacing:-.01em}
  .socorro > p{margin:0 0 14px; font-size:14px; color:var(--meia)}
  .escolha{display:flex; gap:8px; flex-wrap:wrap}
  .escolha button{flex:1; min-width:132px; border:1px solid var(--linha-forte); background:var(--papel);
    color:var(--tinta); border-radius:10px; padding:12px 14px; font:inherit; font-size:14px;
    font-weight:500; cursor:pointer}
  .escolha button[aria-pressed="true"]{border-color:var(--nao); background:var(--nao-fundo); color:var(--nao)}

  .formulario{margin-top:16px; display:flex; flex-direction:column; gap:13px}
  .campo-rot{display:flex; flex-direction:column; gap:5px}
  .campo-rot > span{font-size:12.5px; font-weight:600; color:var(--tinta)}
  .campo-rot > small{font-size:12px; color:var(--meia); line-height:1.45}
  .campo-rot input{border:1px solid var(--linha-forte); background:var(--papel); color:var(--tinta);
    border-radius:9px; padding:10px 11px; font:inherit; font-size:15px; width:100%}
  .campo-rot input.dado{font-family:"IBM Plex Mono",monospace; font-variant-numeric:tabular-nums}
  .dupla{display:grid; grid-template-columns:1fr 1fr; gap:13px}

  /* ---------------- o relógio ---------------- */
  .relogio-med{display:flex; align-items:baseline; gap:12px; flex-wrap:wrap;
    background:var(--nao-fundo); border:1px solid var(--nao-linha); border-radius:12px;
    padding:14px 15px; margin-top:16px}
  .relogio-med .grande{font-family:"IBM Plex Mono",monospace; font-size:26px; font-weight:500;
    color:var(--nao); line-height:1; font-variant-numeric:tabular-nums}
  .relogio-med .dizeres{font-size:13px; color:var(--tinta); flex:1; min-width:180px; line-height:1.45}
  .relogio-med .limite{width:100%; font-size:12px; color:var(--meia); border-top:1px solid var(--nao-linha);
    padding-top:10px; margin-top:2px}

  /* ---------------- relatórios ---------------- */
  .relatorio{margin-top:12px; border:1px solid var(--linha); border-radius:13px;
    background:var(--carta); overflow:hidden; box-shadow:var(--sombra)}
  .relatorio > summary{cursor:pointer; list-style:none; padding:14px 15px; display:flex;
    align-items:flex-start; gap:11px}
  .relatorio > summary::-webkit-details-marker{display:none}
  .ordem{flex:none; width:22px; height:22px; border-radius:50%; display:grid; place-items:center;
    font-family:"IBM Plex Mono",monospace; font-size:12px; font-weight:500;
    background:var(--papel); border:1px solid var(--linha-forte); color:var(--meia)}
  .relatorio.urgente .ordem{background:var(--nao); border-color:var(--nao); color:var(--carta)}
  :root[data-theme="dark"] .relatorio.urgente .ordem{color:#2e1613}
  @media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .relatorio.urgente .ordem{color:#2e1613}}
  .relatorio .nome{font-size:14.5px; font-weight:600; line-height:1.35}
  .relatorio .para{display:block; font-weight:400; font-size:12.5px; color:var(--meia); margin-top:2px}
  .relatorio .abrir{margin-left:auto; flex:none; font-size:12px; color:var(--marca); padding-top:2px}
  .relatorio[open] .abrir{visibility:hidden}
  .relatorio .conteudo{padding:0 15px 15px; border-top:1px solid var(--linha); margin-top:-1px; padding-top:14px}
  .relatorio pre{margin:0; background:var(--papel); border:1px solid var(--linha); border-radius:9px;
    padding:13px; font-family:"IBM Plex Mono",monospace; font-size:11px; line-height:1.62;
    white-space:pre-wrap; word-break:break-word; color:var(--tinta)}
  .relatorio .aviso{margin:0 0 11px; font-size:13px; color:var(--tinta); line-height:1.5}
  .relatorio .aviso.grave{color:var(--nao); font-weight:600}
  .relatorio .aviso.secundario{color:var(--meia); font-size:12.5px; margin-top:-5px}

  .passos{list-style:none; margin:16px 0 0; padding:0; display:flex; flex-direction:column}
  .passos li{display:grid; grid-template-columns:auto 1fr; gap:0 12px; padding:0 0 14px; position:relative}
  .passos li:last-child{padding-bottom:0}
  .passos .prazo{font-family:"IBM Plex Mono",monospace; font-size:12px; color:var(--nao);
    font-weight:500; white-space:nowrap; padding-top:1px; text-align:right; width:76px}
  .passos .oque{font-size:13.5px; color:var(--tinta); line-height:1.45}
  .passos .oque span{display:block; color:var(--meia); font-size:12.5px; margin-top:2px}

  .limites{margin-top:14px; font-size:12.5px; color:var(--meia); line-height:1.55;
    border-top:1px solid var(--linha); padding-top:13px}
  .limites b{color:var(--tinta); font-weight:600}

  /* ---------------- a caixa única ---------------- */
  .instrucao{margin:18px 0 12px; font-family:"Source Serif 4",Georgia,serif;
    font-weight:700; font-size:22px; line-height:1.28; letter-spacing:-.015em; text-wrap:balance}
  .instrucao span{display:block; font-family:"IBM Plex Sans",sans-serif; font-weight:400;
    font-size:14px; color:var(--meia); margin-top:7px; letter-spacing:0}

  .caixona{background:var(--carta); border:1px solid var(--linha-forte); border-radius:16px;
    padding:14px; box-shadow:var(--sombra)}
  .caixona textarea{width:100%; min-height:132px; border:0; background:transparent; color:var(--tinta);
    font:inherit; font-size:15.5px; line-height:1.5; resize:vertical; padding:4px 4px 10px}
  .caixona textarea:focus{outline:none}
  .caixona textarea::placeholder{color:var(--fraca)}
  .caixona:focus-within{border-color:var(--marca); box-shadow:0 0 0 3px var(--marca-fraca)}
  .caixona .rodape-da-caixa{display:flex; align-items:center; gap:10px; flex-wrap:wrap;
    border-top:1px solid var(--linha); padding-top:11px}
  .caixona .dica{font-size:12.5px; color:var(--fraca); flex:1; min-width:150px; line-height:1.4}
  .caixona .bot{padding:11px 22px}

  /* ---------------- a resposta empilhada ---------------- */
  .achados{margin-top:12px; display:flex; flex-direction:column; gap:8px}
  .achado{display:flex; gap:10px; align-items:flex-start; border:1px solid var(--linha);
    background:var(--carta); border-radius:11px; padding:11px 13px; font-size:13.5px;
    line-height:1.45; box-shadow:var(--sombra)}
  .achado svg{width:17px;height:17px;flex:none;margin-top:1px;stroke-width:2.1;fill:none;
    stroke-linecap:round;stroke-linejoin:round}
  .achado b{font-weight:600; display:block}
  .achado .mono{font-size:13px}
  .achado .oque{color:var(--meia); display:block; margin-top:1px}
  .achado.a-sim{border-color:var(--sim-linha)} .achado.a-sim svg{stroke:var(--sim)}
  .achado.a-sim b{color:var(--sim)}
  .achado.a-nao{border-color:var(--nao-linha)} .achado.a-nao svg{stroke:var(--nao)}
  .achado.a-nao b{color:var(--nao)}
  .achado.a-talvez{border-color:var(--talvez-linha)} .achado.a-talvez svg{stroke:var(--talvez)}
  .achado.a-talvez b{color:var(--talvez)}

  .urgente-link{background:none;border:0;padding:0;margin-top:3px;cursor:pointer;font:inherit;
    font-size:12.5px;color:var(--nao);text-decoration:underline;text-underline-offset:2px}

  .foi-ligacao{margin-top:11px; font-size:12.5px; color:var(--meia)}
  .foi-ligacao button{background:none;border:0;padding:0;cursor:pointer;font:inherit;
    font-size:12.5px;color:var(--marca);text-decoration:underline;text-underline-offset:2px}

  .tranquilo{margin-top:26px; background:var(--carta); border:1px solid var(--linha);
    border-radius:14px; padding:16px 15px; box-shadow:var(--sombra)}
  .tranquilo h3{font-family:"Source Serif 4",Georgia,serif; font-weight:700; font-size:17px;
    margin:0 0 4px; letter-spacing:-.01em}
  .tranquilo > p{margin:0 0 13px; font-size:13.5px; color:var(--meia)}
  /* ---------------- o painel ---------------- */
  .estado{margin:18px 0 6px; font-family:"Source Serif 4",Georgia,serif; font-weight:700;
    font-size:22px; line-height:1.28; letter-spacing:-.015em; text-wrap:balance}
  .estado em{font-style:normal; color:var(--nao)}
  .estado.tudo-bem em{color:var(--sim)}
  .estado + p{margin:0 0 6px; font-size:14px; color:var(--meia); line-height:1.5}

  /* uma falha: o que é, o que causa, e o que fazer */
  .falha{background:var(--carta); border:1px solid var(--linha); border-left:3px solid var(--nao);
    border-radius:12px; padding:14px 15px; box-shadow:var(--sombra)}
  .falha + .falha{margin-top:10px}
  .falha.media{border-left-color:var(--talvez)}
  .falha.leve{border-left-color:var(--linha-forte)}
  .falha h3{font-size:15px; font-weight:600; margin:0 0 5px; line-height:1.35}
  .falha .conta{margin:0 0 9px; font-size:13.5px; color:var(--meia); line-height:1.5}
  .falha .conta b{color:var(--tinta); font-weight:600}
  .falha .alvo{font-family:"IBM Plex Mono",monospace; font-size:13px; font-variant-numeric:tabular-nums}
  .falha .acao{display:flex; gap:9px; flex-wrap:wrap; align-items:center}
  .vazio{background:var(--sim-fundo); border:1px solid var(--sim-linha); border-radius:12px;
    padding:14px 15px; color:var(--sim); font-size:14.5px; font-weight:500}
  .vazio span{display:block; color:var(--meia); font-weight:400; font-size:13.5px; margin-top:3px}
  /* O verde do .vazio quer dizer "está tudo certo". Quando a caixa só aponta
     para a montagem, ainda não está: fica neutra. */
  .vazio.neutro{background:var(--carta); border-color:var(--linha); color:var(--tinta)}

  /* canais */
  .canal{display:flex; align-items:flex-start; gap:11px; padding:12px 0;
    border-bottom:1px solid var(--linha)}
  .canal:last-child{border-bottom:0; padding-bottom:0}
  .canal:first-child{padding-top:0}
  .canal .pino-sit{width:9px;height:9px;border-radius:50%;flex:none;margin-top:6px;background:var(--sim)}
  .canal.fora .pino-sit{background:var(--talvez)}
  .canal.morto .pino-sit{background:var(--fraca)}
  .canal .corpo{flex:1; min-width:0}
  .canal .num{font-family:"IBM Plex Mono",monospace; font-size:15px; font-weight:500;
    font-variant-numeric:tabular-nums}
  .canal .sob{display:block; font-size:12.5px; color:var(--meia); margin-top:2px; line-height:1.45}
  .canal .sit{font-size:11.5px; border-radius:6px; padding:2.5px 8px; border:1px solid var(--sim-linha);
    color:var(--sim); background:var(--sim-fundo); white-space:nowrap; flex:none; margin-top:2px}
  .canal.fora .sit{color:var(--talvez); border-color:var(--talvez-linha); background:var(--talvez-fundo)}
  .canal.morto .sit{color:var(--meia); border-color:var(--linha-forte); background:var(--papel)}

  /* incidentes */
  .inc{background:var(--carta); border:1px solid var(--linha); border-radius:12px;
    padding:14px 15px; box-shadow:var(--sombra)}
  .inc + .inc{margin-top:10px}
  .inc .cabeca{display:flex; align-items:baseline; gap:10px; flex-wrap:wrap; margin-bottom:8px}
  .inc .prot{font-family:"IBM Plex Mono",monospace; font-size:13px; font-weight:500}
  .inc .quando{font-size:12.5px; color:var(--fraca); margin-left:auto}
  .inc dl{margin:0 0 10px; display:grid; grid-template-columns:auto 1fr; gap:4px 12px; font-size:13px}
  .inc dt{color:var(--fraca)}
  .inc dd{margin:0; font-family:"IBM Plex Mono",monospace; font-size:12.5px; word-break:break-all}
  .inc .perdeu{color:var(--nao); font-weight:600; font-family:"IBM Plex Sans",sans-serif; font-size:13.5px}
  .confirmar{border-top:1px solid var(--linha); padding-top:11px; font-size:12.5px; color:var(--meia);
    line-height:1.5}
  .confirmar b{color:var(--tinta)}
  .passo2{margin-top:10px; padding:11px 12px; border-radius:9px; background:var(--nao-fundo);
    border:1px solid var(--nao-linha); font-size:13px; color:var(--nao); line-height:1.5}
  .passo2 .acao{margin-top:10px; display:flex; gap:8px; flex-wrap:wrap}
  .bot.perigo{background:var(--nao); border-color:var(--nao); color:#fff}
  :root[data-theme="dark"] .bot.perigo{color:#2e1613}
  @media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .bot.perigo{color:#2e1613}}
  .bot.calmo{background:var(--carta); border-color:var(--linha-forte); color:var(--tinta)}
  .feito{color:var(--sim); font-size:13.5px; font-weight:600; display:flex; gap:8px; align-items:center}
  .feito svg{width:17px;height:17px;stroke:currentColor;stroke-width:2.1;fill:none;
    stroke-linecap:round;stroke-linejoin:round}

  .endereco{display:flex; align-items:center; gap:8px; flex-wrap:wrap; background:var(--carta);
    border:1px solid var(--linha); border-radius:11px; padding:10px 13px; font-size:13px;
    color:var(--meia); box-shadow:var(--sombra); margin-top:2px}
  .endereco .mono{color:var(--tinta); font-weight:500}
  .endereco .copiar{margin-left:auto}

  /* A lista de conversas suspeitas é texto, não dado tabular: nome em cima,
     o que aconteceu embaixo, sem monoespaçado e sem quebrar palavra ao meio. */
  #conversas .par{flex-direction:column; gap:1px; align-items:stretch}
  #conversas dt{width:auto; color:var(--tinta); font-weight:500; font-size:13px}
  #conversas dd{font-family:"IBM Plex Sans",sans-serif; font-size:12.5px; color:var(--meia);
    word-break:normal; overflow-wrap:anywhere}


  @media (prefers-reduced-motion:reduce){*{animation:none!important; transition:none!important}}

  @media (max-width:380px){
    .resposta h1{font-size:22px}
    .mov{grid-template-columns:44px 1fr; gap:0 11px}
    .campo{flex-direction:column}
    .bot{width:100%}
  }

/* ---------------- a tela de entrada ---------------- */
.entrada{max-width:380px; margin:0 auto; padding-block:52px 0}
.entrada .marca{font-family:"Source Serif 4",Georgia,serif; font-weight:700; font-size:24px;
  letter-spacing:-.015em; margin:0 0 4px}
.entrada .sob{margin:0 0 24px; font-size:14px; color:var(--meia)}
.entrada .campo-rot{margin-bottom:14px}
.entrada .bot{width:100%; padding-block:12px}
.recusa{background:var(--nao-fundo); border:1px solid var(--nao-linha); color:var(--nao);
  border-radius:10px; padding:11px 13px; font-size:13.5px; margin-bottom:16px; line-height:1.45}
.sair{background:none;border:0;padding:0;cursor:pointer;font:inherit;font-size:12.5px;
  color:var(--marca);text-decoration:underline;text-underline-offset:2px}
@media (max-width:380px){
  .falha .acao .bot, .confirmar .acao .bot, .passo2 .acao .bot{width:100%}
  .canal{flex-wrap:wrap}
  .canal .sit{margin-left:20px}
}

/* ---------------- ações dentro de um canal ---------------- */
.acoes-do-canal{display:flex; gap:8px; flex-wrap:wrap; align-items:center; margin-top:9px}
.acoes-do-canal form{display:flex; gap:8px; margin:0}
.acoes-do-canal .campo{flex:1; min-width:210px}
.acoes-do-canal input{font-size:13px; padding:7px 10px}
.acoes-do-canal .bot{font-size:12px; padding:7px 12px}
.entrada a{color:var(--marca)}
.porcriptojus a{color:var(--marca); text-decoration:underline; text-underline-offset:2px}

/* ======================================================================
 * REDESENHO (25/09/2026) — três telas, três escalas.
 *
 * A pesquisa de referência está no relatório "12 referências para
 * redesenhar o CriptoJus". Em uma linha por tela:
 * - cliente: letra grande, um veredito que é o maior elemento da tela,
 *   explicação recolhida, atalho para quem já pagou (GOV.UK Panel,
 *   Norton Genie, NN/g);
 * - landing: hero com benefício e CTA, produto mostrado, preço aberto,
 *   objeções respondidas (NN/g, Baymard, Stripe Radar, EPPM);
 * - painel: fila de ação com botão, montagem como lista de tarefas,
 *   configuração recolhida (GOV.UK task list, Stripe Radar, NN/g).
 * ====================================================================== */

/* Texto auxiliar com contraste AA: o cinza de antes ficava em ~2,8:1. */
:root{ --fraca:#5f7079; }
@media (prefers-color-scheme:dark){ :root:not([data-theme="light"]){ --fraca:#8d9ea6; } }
:root[data-theme="dark"]{ --fraca:#8d9ea6; }

.sr{position:absolute!important; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0);
  white-space:nowrap; border:0; padding:0; margin:-1px}
[tabindex="-1"]:focus{outline:none}

/* ---------------- a página do cliente ---------------- */
.tela-cliente{font-size:18px; line-height:1.55}
.tela-cliente .folha{max-width:520px; padding-inline:18px}
.tela-cliente .topo{padding-block:20px 6px; align-items:flex-start}
.tela-cliente .escritorio{font-size:21px; line-height:1.25}
.tela-cliente .escritorio span{font-size:12.5px; letter-spacing:.08em}
.tela-cliente .porcriptojus{font-size:13px; padding-top:4px}

.chamada{font-family:"Source Serif 4",Georgia,serif; font-weight:700; font-size:clamp(27px,7vw,33px);
  line-height:1.18; letter-spacing:-.015em; text-wrap:balance; margin:22px 0 18px}
.chamada span{display:block; font-family:"IBM Plex Sans",sans-serif; font-weight:400; font-size:18px;
  line-height:1.45; letter-spacing:0; color:var(--meia); margin-top:10px}

.tela-cliente .caixona{padding:16px; border-radius:18px; border:2px solid var(--linha-forte);
  display:flex; flex-direction:column; gap:12px}
.tela-cliente .caixona:focus-within{border-color:var(--marca)}
.rotulo-caixa{font-size:16px; font-weight:600; color:var(--tinta)}
.tela-cliente .caixona textarea{font-size:18px; min-height:150px; padding:12px; border:1px solid var(--linha);
  border-radius:12px; background:var(--papel)}
.bot.enorme{width:100%; min-height:58px; font-size:19px; border-radius:14px; letter-spacing:.01em}
.tela-cliente .dica{margin:0; font-size:15px; color:var(--meia); display:flex; gap:10px; flex-wrap:wrap}
.tela-cliente .htmx-indicator{font-size:15px; font-weight:600; color:var(--marca)}

.atalho{margin:14px 0 0}
.atalho a{display:flex; align-items:center; gap:10px; min-height:52px; padding:12px 16px;
  border:1.5px solid var(--nao-linha); background:var(--carta); border-radius:14px;
  color:var(--nao); font-weight:600; font-size:17px; text-decoration:none}
.atalho a::before{content:""; flex:none; width:10px; height:10px; border-radius:50%; background:var(--nao)}
.atalho a::after{content:"›"; margin-left:auto; font-size:24px; line-height:1}

.tela-cliente #resposta:not(:empty){margin-top:22px}

/* O veredito: o maior elemento da tela, com cor, ícone e palavra. */
.tela-cliente .veredito{margin-top:0; border-width:2px; border-left-width:8px; border-radius:16px;
  padding:18px 18px 18px 16px}
.tela-cliente .veredito .titulo{font-family:"Source Serif 4",Georgia,serif; font-size:26px;
  line-height:1.2; gap:10px; letter-spacing:-.01em}
.tela-cliente .veredito .titulo svg{width:28px; height:28px; stroke-width:2.3; margin-top:2px}
.tela-cliente .veredito p{font-size:17.5px; line-height:1.5; margin-top:12px}
.tela-cliente .veredito .ordens{margin-top:14px; gap:8px}
.tela-cliente .veredito .ordens li{font-size:18px}
.tela-cliente .veredito .telefone{font-size:16px; color:var(--tinta); margin-top:14px; padding-top:13px}
.tela-cliente .achados{margin-top:12px; gap:10px}
.tela-cliente .achado{font-size:16px; padding:13px 15px}
.tela-cliente .achado .mono{font-size:15px}
.tela-cliente .foi-ligacao{font-size:16px; margin-top:16px}
.tela-cliente .foi-ligacao button{font-size:16px; min-height:40px}

.tela-cliente .secao{margin-top:28px}
.tela-cliente .secao > h2{font-size:14px}
.tela-cliente .socorro{padding:20px 18px; border-radius:18px}
.tela-cliente .socorro h3{font-size:24px}
.tela-cliente .socorro > p{font-size:17px}
.tela-cliente .escolha button{min-height:56px; font-size:17px}
.tela-cliente .campo-rot > span{font-size:15.5px}
.tela-cliente .campo-rot > small{font-size:14.5px}
.tela-cliente .campo-rot input, .tela-cliente .campo input{font-size:17px; min-height:48px}
.tela-cliente .bot{min-height:50px; font-size:17px}
.tela-cliente .sub, .tela-cliente .pergunta{font-size:16.5px}
.tela-cliente .relatorio .nome{font-size:17px}
.tela-cliente .relatorio .para, .tela-cliente .relatorio .aviso{font-size:15px}

.gaveta{margin-top:18px; background:var(--carta); border:1px solid var(--linha); border-radius:16px}
.gaveta > summary{list-style:none; cursor:pointer; padding:16px 18px; display:flex; flex-direction:column; gap:2px;
  position:relative; padding-right:48px}
.gaveta > summary::-webkit-details-marker{display:none}
.gaveta > summary::after{content:"+"; position:absolute; right:18px; top:14px; font-size:26px; color:var(--marca); line-height:1}
.gaveta[open] > summary::after{content:"–"}
.gaveta > summary span{font-weight:600; font-size:17.5px}
.gaveta > summary small{font-size:15px; color:var(--meia)}
.gaveta-corpo{padding:0 18px 18px}
.tela-cliente .cobre b{font-size:16.5px}
.tela-cliente .cobre span{font-size:15px}
.tela-cliente .nota{font-size:15.5px; line-height:1.55}
.tela-cliente .fechada{font-size:15px}
.tela-cliente .mov .ato{font-size:16.5px}
.tela-cliente .mov .detalhe{font-size:15px}
.tela-cliente .mov .hora{font-size:14.5px}

.tela-cliente .rodape{font-size:15px; margin-top:32px}
.selo-privacidade{display:flex; gap:12px; align-items:flex-start; background:var(--sim-fundo);
  border:1px solid var(--sim-linha); border-radius:14px; padding:14px 16px; color:var(--tinta)}
.selo-privacidade svg{width:24px; height:24px; flex:none; stroke:var(--sim); stroke-width:2; fill:none;
  stroke-linecap:round; stroke-linejoin:round; margin-top:2px}
.selo-privacidade p{margin:0; line-height:1.5}
.selo-privacidade b{color:var(--tinta)}
.tela-cliente .rodape .relogio{font-size:13px; margin-top:12px}

/* ---------------- a landing page ---------------- */
.tela-lp{font-size:17px; line-height:1.6}
.lp{max-width:1120px; margin:0 auto; padding-inline:20px; padding-block:0 0}
.lp a{color:var(--marca)}
.lp-nav{display:flex; align-items:center; justify-content:space-between; gap:12px; padding-block:22px}
.lp-marca{font-family:"Source Serif 4",Georgia,serif; font-weight:700; font-size:22px; color:var(--tinta)!important; text-decoration:none}
.lp-marca b{color:var(--marca)}
.lp-nav-acoes{display:flex; align-items:center; gap:18px; font-weight:500}
.lp-nav-acoes > a:first-child{text-decoration:none}
.lp-bot{display:inline-flex; align-items:center; justify-content:center; min-height:52px; padding:0 24px;
  border-radius:12px; background:var(--marca); color:#fff!important; font-weight:600; font-size:17px;
  text-decoration:none; border:2px solid var(--marca)}
:root[data-theme="dark"] .lp-bot{color:#0b1a24!important}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .lp-bot{color:#0b1a24!important}}
.lp-bot.pequeno{min-height:42px; padding:0 16px; font-size:15px}
.lp-bot.contorno{background:transparent; color:var(--marca)!important}
.lp-bot.claro{background:#fff; border-color:#fff; color:#1d4b73!important}

.lp-hero{display:grid; grid-template-columns:minmax(0,1.2fr) minmax(0,.8fr); gap:56px; align-items:center;
  padding-block:40px 64px}
.lp-olho{font-size:13px; font-weight:600; letter-spacing:.12em; text-transform:uppercase; color:var(--nao); margin:0 0 14px}
.lp-hero h1{font-family:"Source Serif 4",Georgia,serif; font-size:clamp(32px,4.6vw,52px); line-height:1.1;
  letter-spacing:-.02em; margin:0; text-wrap:balance}
.lp-lide{font-size:19px; color:var(--meia); margin:22px 0 0; max-width:36em}
.lp-ctas{display:flex; gap:12px; flex-wrap:wrap; margin-top:28px}
.lp-nota{font-size:14.5px; color:var(--meia); margin:12px 0 0}

.lp-celular{background:var(--carta); border:1px solid var(--linha-forte); border-radius:28px; padding:20px 18px;
  box-shadow:0 20px 50px -24px rgba(22,34,42,.35); display:flex; flex-direction:column; gap:12px; max-width:370px; justify-self:end}
.lp-celular-topo{display:flex; justify-content:space-between; gap:8px; align-items:baseline; font-size:13px; color:var(--meia)}
.lp-celular-topo b{font-family:"Source Serif 4",Georgia,serif; font-size:16px; color:var(--tinta)}
.lp-colado{background:var(--papel); border-radius:14px; padding:12px 13px; font-size:14px; line-height:1.5; color:var(--meia)}
.lp-colado mark{background:var(--nao-fundo); color:var(--nao); padding:0 2px; border-radius:3px}
.lp-veredito{border:2px solid; border-left-width:7px; border-radius:14px; padding:13px 14px; display:flex; flex-direction:column; gap:6px}
.lp-veredito.nao{background:var(--nao-fundo); border-color:var(--nao-linha); border-left-color:var(--nao); color:var(--nao)}
.lp-veredito strong{font-family:"Source Serif 4",Georgia,serif; font-size:21px; line-height:1.2}
.lp-veredito span{font-size:14.5px; color:var(--tinta)}
.lp-veredito ul{margin:4px 0 0; padding-left:18px; font-weight:600; font-size:15px}

.lp-titulo{font-family:"Source Serif 4",Georgia,serif; font-size:clamp(27px,3.2vw,36px); line-height:1.15;
  letter-spacing:-.015em; margin:0 0 16px; text-wrap:balance}
.lp-texto{font-size:18px; color:var(--meia); max-width:40em; margin:0 0 22px}
.lp-secao{padding-block:56px; border-top:1px solid var(--linha)}

.lp-risco{background:var(--carta); border:1px solid var(--linha); border-radius:22px; padding:36px 32px}
.lp-fatos{display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:24px; margin-top:10px}
.lp-fatos > div{display:flex; flex-direction:column; gap:6px; border-top:3px solid var(--nao); padding-top:14px}
.lp-fatos strong{font-family:"Source Serif 4",Georgia,serif; font-size:40px; line-height:1; color:var(--nao); font-variant-numeric:tabular-nums}
.lp-fatos span{font-size:16px}
.lp-fatos a{font-size:13px; color:var(--fraca)!important}
.lp-saida{margin:28px 0 0; padding:16px 18px; background:var(--marca-fraca); border-radius:14px; font-size:17.5px}

.lp-passos{list-style:none; counter-reset:p; margin:0; padding:0; display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:18px}
.lp-passos li{counter-increment:p; background:var(--carta); border:1px solid var(--linha); border-radius:18px; padding:22px 20px;
  display:flex; flex-direction:column; gap:6px}
.lp-passos li::before{content:counter(p); width:34px; height:34px; border-radius:50%; background:var(--marca); color:#fff;
  display:grid; place-items:center; font-weight:600; margin-bottom:6px}
.lp-passos b{font-size:19px}
.lp-passos span{color:var(--meia); font-size:16px}

.lp-duas{display:grid; grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr); gap:40px; align-items:start}
.lp-respostas{display:flex; flex-direction:column; gap:12px}
.lp-r{border:2px solid; border-left-width:7px; border-radius:14px; padding:14px 16px; display:flex; flex-direction:column; gap:2px}
.lp-r b{font-family:"Source Serif 4",Georgia,serif; font-size:21px}
.lp-r span{color:var(--tinta); font-size:16px}
.lp-r.sim{background:var(--sim-fundo); border-color:var(--sim-linha); border-left-color:var(--sim); color:var(--sim)}
.lp-r.nao{background:var(--nao-fundo); border-color:var(--nao-linha); border-left-color:var(--nao); color:var(--nao)}
.lp-r.talvez{background:var(--talvez-fundo); border-color:var(--talvez-linha); border-left-color:var(--talvez); color:var(--talvez)}

.lp-docs{display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:16px}
.lp-docs > div{background:var(--carta); border:1px solid var(--linha); border-radius:16px; padding:18px; display:flex; flex-direction:column; gap:4px}
.lp-docs small{font-size:13px; font-weight:600; letter-spacing:.06em; text-transform:uppercase; color:var(--nao)}
.lp-docs b{font-size:18px}
.lp-docs span{color:var(--meia); font-size:15.5px}

.lp-cofre{display:grid; grid-template-columns:auto minmax(0,1fr); gap:24px; background:var(--sim-fundo); border:1px solid var(--sim-linha);
  border-radius:22px; padding:36px 32px; margin-block:56px}
.lp-cofre > svg{width:44px; height:44px; stroke:var(--sim); stroke-width:1.8; fill:none; stroke-linecap:round; stroke-linejoin:round}
.lp-cofre ul{list-style:none; margin:0; padding:0; display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:16px 28px}
.lp-cofre li{font-size:16.5px}
.lp-cofre li b{display:block}

.lp-painel{background:var(--carta); border:1px solid var(--linha-forte); border-radius:20px; padding:22px; display:flex; flex-direction:column; gap:12px; max-width:720px}
.lp-painel-estado{margin:0; font-family:"Source Serif 4",Georgia,serif; font-size:21px}
.lp-alerta{border:2px solid var(--nao-linha); border-left:7px solid var(--nao); border-radius:14px; padding:14px 16px; display:flex; flex-direction:column; gap:4px}
.lp-alerta b{color:var(--nao)}
.lp-alerta span{font-size:15.5px; color:var(--meia)}
.lp-linha{display:flex; gap:14px; flex-wrap:wrap; align-items:center; border:1px solid var(--linha); border-radius:12px; padding:12px 16px; font-size:15.5px}
.lp-linha span:first-child{font-family:"IBM Plex Mono",monospace; font-weight:500}
.lp-linha span{color:var(--meia)}
.lp-linha em{margin-left:auto; font-style:normal; font-weight:600; color:var(--marca)}

.lp-faq{display:flex; flex-direction:column; gap:10px; max-width:820px}
.lp-faq details{background:var(--carta); border:1px solid var(--linha); border-radius:14px}
.lp-faq summary{cursor:pointer; list-style:none; padding:16px 48px 16px 18px; font-weight:600; font-size:17.5px; position:relative}
.lp-faq summary::-webkit-details-marker{display:none}
.lp-faq summary::after{content:"+"; position:absolute; right:18px; top:12px; font-size:26px; color:var(--marca)}
.lp-faq details[open] summary::after{content:"–"}
.lp-faq p{margin:0; padding:0 18px 18px; color:var(--meia); font-size:16.5px}

.lp-planos{display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:16px; max-width:720px}
.lp-plano{background:var(--carta); border:1px solid var(--linha); border-radius:18px; padding:22px; display:flex; flex-direction:column; gap:6px}
.lp-plano.destaque{border:2px solid var(--marca)}
.lp-plano small{font-size:13px; font-weight:600; letter-spacing:.08em; text-transform:uppercase; color:var(--fraca)}
.lp-plano strong{font-family:"Source Serif 4",Georgia,serif; font-size:36px; line-height:1.1}
.lp-plano strong em{font-family:"IBM Plex Sans",sans-serif; font-style:normal; font-weight:400; font-size:16px; color:var(--meia)}
.lp-plano span{color:var(--meia)}

.lp-final{background:#1d4b73; color:#fff; border-radius:24px; padding:48px 32px; text-align:center; margin-top:40px}
.lp-final h2{font-family:"Source Serif 4",Georgia,serif; font-size:clamp(28px,3.4vw,40px); margin:0 0 10px; color:#fff}
.lp-final p{margin:0 0 24px; font-size:18px; opacity:.9}
.lp-rodape{display:flex; justify-content:space-between; gap:12px; flex-wrap:wrap; padding-block:28px 40px; font-size:14.5px; color:var(--meia)}

@media (max-width:880px){
  .lp-hero{grid-template-columns:1fr; gap:36px; padding-block:20px 48px}
  .lp-celular{justify-self:start}
  .lp-fatos, .lp-passos, .lp-docs{grid-template-columns:1fr}
  .lp-duas{grid-template-columns:1fr; gap:10px}
  .lp-cofre{grid-template-columns:1fr; padding:28px 22px}
  .lp-cofre ul{grid-template-columns:1fr}
}
@media (max-width:560px){
  .lp-risco{padding:26px 20px}
  .lp-planos{grid-template-columns:1fr}
  .lp-nav-acoes > a:first-child{display:none}
  .lp-ctas .lp-bot{width:100%}
}

/* ---------------- o painel do escritório ---------------- */
.tela-painel{font-size:16.5px; line-height:1.55}
.folha.painel{max-width:780px; padding-inline:20px}
.tela-painel .topo{padding-block:24px 14px}
.tela-painel .escritorio{font-size:22px}
.tela-painel .escritorio span{font-size:12.5px}
.tela-painel .porcriptojus{font-size:14.5px}
.tela-painel .sair{font-size:14.5px}

.painel-estado{background:var(--carta); border:1px solid var(--linha); border-radius:18px; padding:20px 22px;
  display:flex; flex-direction:column; gap:10px; box-shadow:var(--sombra)}
.tela-painel .estado{margin:0; font-size:26px; line-height:1.25}
.estado-sub{margin:0; color:var(--meia); font-size:16px}
.painel-estado .endereco{margin:4px 0 0; box-shadow:none; background:var(--papel); font-size:15px}
.painel-estado .endereco a{color:var(--marca); font-weight:500}

.tela-painel .secao{margin-top:38px}
.tela-painel .secao > h2{font-family:"Source Serif 4",Georgia,serif; font-size:23px; letter-spacing:-.01em;
  text-transform:none; color:var(--tinta); font-weight:700; margin:0 0 4px}
.tela-painel .secao > .sub, .tela-painel .sub{font-size:15.5px}
.sub-titulo{font-size:17px; margin:26px 0 10px}

/* a montagem, como lista de tarefas */
.tarefas{list-style:none; margin:12px 0 0; padding:0; background:var(--carta); border:1px solid var(--linha);
  border-radius:16px; overflow:hidden}
.tarefas li{display:flex; align-items:center; gap:16px; padding:16px 18px; border-bottom:1px solid var(--linha)}
.tarefas li:last-child{border-bottom:0}
.tarefas li > div{flex:1; min-width:0; display:flex; flex-direction:column; gap:2px}
.tarefas b{font-size:17px}
.tarefas li > div span{font-size:15px; color:var(--meia)}
.tarefas li.feita b{color:var(--meia); font-weight:500}
.tarefas li.feita > div span{display:none}
.tarefas .bot{flex:none; text-decoration:none; min-height:44px; display:inline-flex; align-items:center}
.etiqueta{flex:none; font-size:13.5px; font-weight:600; border-radius:999px; padding:4px 12px}
.etiqueta.feita{color:var(--sim); background:var(--sim-fundo); border:1px solid var(--sim-linha)}

/* o que precisa de você: cada item com um botão */
.tela-painel .falha{border-radius:14px; border-left-width:6px; padding:18px 20px}
.tela-painel .falha + .falha{margin-top:12px}
.tela-painel .falha h3{font-size:19px; margin-bottom:8px}
.tela-painel .falha .conta{font-size:15.5px}
.tela-painel .falha .alvo{font-size:15px}
.tela-painel .falha > .bot{display:inline-flex; align-items:center; min-height:46px; text-decoration:none; margin-top:4px}
.tela-painel .vazio{font-size:17px; border-radius:14px; padding:16px 18px}
.tela-painel .vazio span{font-size:15.5px}

.secao.urgente{background:var(--nao-fundo); border:2px solid var(--nao-linha); border-left:6px solid var(--nao);
  border-radius:18px; padding:20px 22px}
.secao.urgente > h2{color:var(--nao)!important}
.secao.urgente .nota{background:var(--carta)}

/* incidentes: uma linha que abre */
.tela-painel .inc{padding:0; border-radius:14px}
.tela-painel .inc > summary{list-style:none; cursor:pointer; padding:16px 18px; margin:0; align-items:center}
.tela-painel .inc > summary::-webkit-details-marker{display:none}
.tela-painel .inc .prot{font-size:15px}
.tela-painel .inc .perdeu{font-size:16px}
.tela-painel .inc .canal-inc{font-size:14.5px; color:var(--meia)}
.tela-painel .inc .quando{font-size:14.5px}
.inc .decidir{font-weight:600; color:var(--marca); font-size:15px}
.inc[open] .decidir{visibility:hidden}
.tela-painel .inc > dl, .tela-painel .inc > .acao, .tela-painel .inc > .confirmar,
.tela-painel .inc > .passo2, .tela-painel .inc > div[id^="decidido"]{margin-inline:18px}
.tela-painel .inc > div[id^="decidido"]{margin-bottom:16px}
.tela-painel .inc dl{font-size:15px}
.tela-painel .inc dd{font-size:14.5px}
.tela-painel .confirmar{font-size:15px}
.tela-painel .passo2{font-size:15px}

/* canais */
.tela-painel .canal .num{font-size:17px}
.tela-painel .canal .sob{font-size:14.5px}
.tela-painel .canal .sit{font-size:13.5px; padding:3px 10px}
.tela-painel .caixa{padding:18px 20px; border-radius:16px}
.sem-caixa{margin:0}
.tela-painel .campo-rot > span{font-size:14.5px}
.tela-painel .campo-rot input, .tela-painel .campo input{font-size:16px; min-height:44px}
.tela-painel .bot{min-height:44px; font-size:15.5px}
.tela-painel .gaveta > summary span{font-size:17px}
.tela-painel .nota{font-size:15px}

/* o registro */
.tela-painel .mov .ato{font-size:16px}
.tela-painel .mov .detalhe{font-size:14.5px}
.tela-painel .mov .hora{font-size:14px}
.tela-painel .selo{font-size:13px}
.porque{margin-top:14px}
.porque > summary{cursor:pointer; color:var(--marca); font-size:15px; font-weight:500}
.porque > p{margin:10px 0 0; font-size:15px; color:var(--meia)}
.tela-painel .rodape{font-size:14.5px}

@media (max-width:560px){
  .tarefas li{flex-wrap:wrap}
  .tela-painel .estado{font-size:22px}
  .secao.urgente, .painel-estado{padding:16px}
}
.tela-painel .porcriptojus{white-space:normal; text-align:right}
.tela-painel .acoes-do-canal{display:flex; flex-wrap:wrap; gap:10px; align-items:center; margin-top:10px}
.tela-painel .acoes-do-canal .campo{flex:1 1 100%}
.tela-painel .acoes-do-canal .campo input{min-width:0}
@media (max-width:560px){
  .tela-painel .topo{flex-direction:column; align-items:flex-start; gap:6px}
  .tela-painel .porcriptojus{text-align:left}
}

/* ---------------- o cartão de segurança: as telas da cliente (§1.7) ----------------
 * Público idoso, no celular: nenhuma letra abaixo de 16 px, todo alvo com pelo
 * menos 44 px, foco sempre visível, e nada que role de lado em 360 px. Toda
 * classe nova leva o prefixo `cartao-`: um nome curto colide com o painel em
 * silêncio (`.quem`, `.selo`, `.endereco` e `.escritorio` já existem aqui). */
.cartao-tela{overflow-wrap:anywhere}
.cartao-topo{display:flex; flex-wrap:wrap; justify-content:space-between; align-items:baseline;
  gap:4px 14px; padding-block:20px 10px}
.cartao-escritorio{font-family:"Source Serif 4",Georgia,serif; font-weight:700; font-size:22px; line-height:1.25}
.cartao-plataforma{font-size:16px; color:var(--meia)}
.cartao-plataforma b{color:var(--marca); font-weight:600}
.cartao-aviso{margin-top:22px; display:flex; flex-direction:column; gap:14px}
/* `display:flex` vence o `[hidden]{display:none}` do navegador: sem esta linha, os
 * blocos escondidos da página do QR (cartao.html) apareciam todos juntos. */
.cartao-aviso[hidden]{display:none}
.cartao-aviso p{margin:0; font-size:18px}
.cartao-titulo{margin:0; font-family:"Source Serif 4",Georgia,serif; font-weight:700;
  font-size:clamp(25px,7vw,30px); line-height:1.2; letter-spacing:-.01em}
.cartao-botao{display:flex; align-items:center; justify-content:center; min-height:56px; padding:10px 18px;
  border-radius:14px; border:2px solid var(--marca); background:var(--marca); color:var(--carta);
  font:inherit; font-size:18px; font-weight:600; text-decoration:none; text-align:center; cursor:pointer}
:root[data-theme="dark"] .cartao-botao{color:#0b1a24}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .cartao-botao{color:#0b1a24}}
.cartao-botao.calmo{background:var(--carta); color:var(--tinta); border-color:var(--linha-forte);
  min-height:48px; font-size:17px}
.cartao-tela a:focus-visible, .cartao-botao:focus-visible{outline:3px solid var(--marca); outline-offset:3px}
.cartao-tela .veredito + .cartao-botao, .cartao-aviso .cartao-botao{margin-top:16px}
.cartao-faixa{display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:10px 16px;
  margin-top:6px; padding:10px 14px; background:var(--marca-fraca); border-radius:14px; font-size:17px; font-weight:600}
.cartao-faixa form{margin:0}
.cartao-ola{margin:22px 0 4px; font-family:"Source Serif 4",Georgia,serif; font-weight:700;
  font-size:clamp(23px,6.4vw,28px); line-height:1.25}
.cartao-sub{margin:0 0 16px; font-size:17px; color:var(--meia)}
.cartao-alerta{margin:6px 0 18px; padding:14px 16px; border:2px solid var(--nao-linha); border-left:8px solid var(--nao);
  border-radius:14px; background:var(--nao-fundo); color:var(--nao); font-size:17px; font-weight:600}
.cartao-alerta p{margin:0}
.cartao-alerta p + p{margin-top:8px}
.cartao-notas{margin-top:22px; display:flex; flex-direction:column; gap:12px}
.cartao-notas p{margin:0; padding:14px 16px; border-radius:14px; background:var(--carta);
  border:1px solid var(--linha); font-size:17px; line-height:1.5}
.cartao-notas .mono{font-size:16px; overflow-wrap:anywhere}
.cartao-nao-vale{margin-top:22px}
/* A cobertura à vista e a pergunta que termina a página em ação (§2, §7.1). */
.cartao-cobertura{margin:18px 0 0; padding:14px 16px; border-radius:14px; background:var(--carta);
  border:1px solid var(--linha); font-size:17px; line-height:1.5}
.cartao-conferir{margin-top:24px}
.cartao-pergunta{margin:0 0 6px; font-family:"Source Serif 4",Georgia,serif; font-weight:700;
  font-size:clamp(22px,6vw,26px); line-height:1.25}
.cartao-casos{margin:0; display:flex; flex-direction:column; gap:10px}
.cartao-caso{padding:14px 16px; border-radius:14px; border:1px solid var(--linha); background:var(--carta)}
.cartao-caso dt{font-size:18px; font-weight:700}
.cartao-caso dd{margin:6px 0 0; font-size:17px; line-height:1.5}
.cartao-caso-nao{border:2px solid var(--nao-linha); border-left:8px solid var(--nao); background:var(--nao-fundo)}
.cartao-caso-nao dd{color:var(--nao); font-weight:600}
.cartao-caminhos{margin-top:16px; display:flex; flex-direction:column; gap:10px}
/* A lista é a mesma da consulta por CPF; aqui, nenhuma letra abaixo de 16 px. */
.cartao-tela .dia{font-size:16px}
.cartao-tela .mov .detalhe, .cartao-tela .mov .hora, .cartao-tela .detalhe .mono{font-size:16px}
/* A 16 px, "00h38" não cabe na coluna de 52 px da lista, e a hora quebrava ao meio. */
.cartao-tela .mov{grid-template-columns:64px 1fr; gap:0 12px}
.cartao-tela .mov .hora{white-space:nowrap}
.cartao-tela .selo{font-size:16px; padding:3px 9px}
.cartao-tela details.impressao summary{font-size:16px; min-height:44px; display:flex; align-items:center}
.cartao-tela .par, .cartao-tela .par dd, .cartao-tela .digital p{font-size:16px!important}
.cartao-tela .veredito .titulo{font-size:26px}
.cartao-tela .veredito p, .cartao-tela .veredito .telefone{font-size:17px}
.cartao-tela .gaveta > summary{min-height:56px}
.cartao-tela .gaveta > summary small, .cartao-tela .cobre span, .cartao-tela .nota{font-size:16px}
/* ---------------- o cartão de segurança: o painel ---------------- */
.cartao-busca{margin:4px 0 12px}
.cartao-busca input{min-height:44px; font-size:16px}
.tela-painel .canal .num a{color:var(--tinta)}
.cartao-abrir{flex:none; text-decoration:none; min-height:44px; display:inline-flex; align-items:center;
  align-self:center}
.cartao-ficha p{margin:6px 0 0; font-size:16px}
.cartao-ficha-topo{display:flex; align-items:center; gap:12px; font-size:18px}
.cartao-baixar{margin:14px 0 4px}
.tela-painel select{min-height:44px; font:inherit; font-size:16px; padding:8px 10px; border-radius:10px;
  border:1px solid var(--linha-forte); background:var(--papel); color:var(--tinta); width:100%}
.cartao-acoes{display:flex; flex-wrap:wrap; gap:10px; margin-top:12px}
.cartao-acoes .bot{min-height:44px; display:inline-flex; align-items:center; text-decoration:none}
.cartao-previa{margin:0; padding-left:20px; font-size:16px; display:flex; flex-direction:column; gap:4px}
.cartao-historico{margin:0 0 8px; font-size:15.5px}
.cartao-historico:last-child{margin-bottom:0}