/* Marca do produto: navy #16243D, verde #16B364, anel #dbe0e8, Segoe UI.
     Página de marca — comprometida com o tema claro, com toda cor pintada. */
  :root {
    --navy:   #16243D;
    --n70:    #45536b;
    --n45:    #7c8798;
    --verde:  #16B364;
    --vtxt:   #0b7040;
    --anel:   #dbe0e8;
    --linha:  #e6e6e6;
    --painel: #f4f7fa;
    --papel:  #ffffff;
    --erro:   #c50f1f;
    --sans: "Segoe UI", "Segoe UI Variable", system-ui, -apple-system, Roboto, "Helvetica Neue", Arial, sans-serif;
    --mono: Consolas, "Cascadia Mono", ui-monospace, Menlo, monospace;
    --pad: clamp(1.25rem, 5vw, 5rem);
    --max: 1140px;
  }
  * { box-sizing: border-box; }
  body { margin:0; background: var(--papel); color: var(--navy); font-family: var(--sans);
         font-size:16px; line-height:1.55; -webkit-font-smoothing:antialiased; }
  .env { max-width: var(--max); margin:0 auto; padding-inline: var(--pad); }
  section { padding-block: clamp(3.5rem, 8vw, 6.5rem); }
  h1,h2,h3 { margin:0; font-weight:300; letter-spacing:-.02em; text-wrap:balance; overflow-wrap:break-word; }
  h1 { font-size: clamp(2.3rem, 5.6vw, 4rem); line-height:1.05; max-width: min(18ch,100%); }
  h2 { font-size: clamp(1.75rem, 3.6vw, 2.6rem); line-height:1.14; max-width: min(24ch,100%); }
  h3 { font-size:1.0625rem; font-weight:600; line-height:1.3; }
  h1 b, h2 b { font-weight:700; }
  p { margin:0; }
  .lede { font-size: clamp(1.02rem,1.5vw,1.18rem); color: var(--n70); max-width:60ch; }
  .olho { font-size:.6875rem; font-weight:700; letter-spacing:.15em; text-transform:uppercase; color: var(--vtxt); }
  .mini { font-size:.8125rem; color: var(--n45); }
  a { color: inherit; }

  /* ------- topo ------- */
  .topo { position:sticky; top:0; z-index:20; background: rgb(255 255 255 / .92);
          backdrop-filter: blur(8px); border-bottom:1px solid var(--linha); }
  .topo .env { display:flex; align-items:center; justify-content:space-between; gap:1rem; padding-block:.85rem; }
  .marca { display:flex; align-items:center; gap:.55rem; font-size:1.0625rem; }
  .marca .a { font-weight:300; } .marca .b { font-weight:700; }
  .menu { display:flex; align-items:center; gap:1.4rem; font-size:.875rem; color: var(--n70); }
  .menu a { text-decoration:none; }
  .menu a:hover { color: var(--navy); }
  @media (max-width: 820px) { .menu .some { display:none; } }

  .btn { display:inline-flex; align-items:center; gap:.5rem; padding:.72rem 1.25rem; border-radius:8px;
         font-size:.9375rem; font-weight:600; text-decoration:none; border:1.5px solid transparent; white-space:nowrap; }
  .btn.cheio { background: var(--navy); color:#fff; }
  .btn.cheio:hover { background:#0f1a2c; }
  .btn.linha { border-color: var(--anel); color: var(--navy); }
  .btn.linha:hover { border-color: var(--n45); }
  .btn.verde { background: var(--verde); color:#08301c; }
  .btn.pequeno { padding:.5rem .9rem; font-size:.875rem; }

  /* ------- herói ------- */
  .heroi { padding-top: clamp(3rem,7vw,5rem); }
  .heroi .grade { display:grid; grid-template-columns: 1.05fr .95fr; gap: clamp(2rem,4vw,4rem); align-items:center; }
  @media (max-width: 980px) { .heroi .grade { grid-template-columns:1fr; } }
  .heroi .col { display:flex; flex-direction:column; gap:1.4rem; align-items:flex-start; }
  .acoes { display:flex; gap:.75rem; flex-wrap:wrap; }

  .provas-barra { display:flex; flex-wrap:wrap; gap:.5rem 1.75rem; padding-top:1.4rem;
                  border-top:1px solid var(--linha); width:100%; }
  .prova-num { display:flex; flex-direction:column; }
  .prova-num b { font-size:1.5rem; font-weight:300; letter-spacing:-.02em; font-variant-numeric:tabular-nums; }
  .prova-num span { font-size:.75rem; color: var(--n45); }

  /* ------- tela do app ------- */
  .tela { border:1px solid var(--anel); border-radius:12px; overflow:hidden;
          box-shadow: 0 18px 50px rgb(22 36 61 / .16); background:#fff; }
  .tela img { display:block; width:100%; height:auto; }
  .tela.corta { max-height: 430px; }
  .tela.corta img { object-fit:cover; object-position:top; }

  /* ------- atalhos ------- */
  .fundo { background: var(--painel); border-block:1px solid var(--linha); }
  .tres { display:grid; grid-template-columns:repeat(auto-fit,minmax(min(260px,100%),1fr)); gap:1.25rem; }
  .atalho { background: var(--papel); border:1px solid var(--linha); border-radius:12px; padding:1.5rem;
            display:flex; flex-direction:column; gap:.7rem; }
  .atalho .frase { font-size:1.125rem; font-weight:600; line-height:1.35; }
  .atalho .exp { font-size:.9rem; color: var(--n70); }
  .atalho .med { font-family: var(--mono); font-size:.78rem; color: var(--erro);
                 padding-top:.7rem; border-top:1px solid var(--anel); }

  /* ------- regras ------- */
  .regras { display:grid; grid-template-columns:repeat(auto-fit,minmax(min(250px,100%),1fr)); gap:1rem 1.75rem; }
  .regra { display:flex; flex-direction:column; gap:.35rem; padding-top:.85rem; border-top:2px solid var(--verde); }
  .regra .n { font-family: var(--mono); font-size:.7rem; color: var(--vtxt); }
  .regra .d { font-size:.875rem; color: var(--n70); }

  /* ------- catálogo ------- */
  .provas { display:grid; grid-template-columns:repeat(auto-fit,minmax(min(220px,100%),1fr)); gap:1rem; }
  .cartao-prova { border:1px solid var(--linha); border-radius:12px; padding:1.25rem; background: var(--papel);
                  display:flex; flex-direction:column; gap:.4rem; }
  .cartao-prova .cod { font-size:1.25rem; font-weight:700; letter-spacing:-.01em; }
  .cartao-prova .nome { font-size:.875rem; color: var(--n70); min-height:2.6em; }
  .cartao-prova .qtd { font-size:.8125rem; color: var(--vtxt); font-weight:600; font-variant-numeric:tabular-nums; }
  .selo-nivel { align-self:flex-start; font-size:.6875rem; font-weight:600; letter-spacing:.06em;
                text-transform:uppercase; color: var(--n45); border:1px solid var(--anel);
                border-radius:999px; padding:.14rem .5rem; }

  /* ------- integridade ------- */
  .duas { display:grid; grid-template-columns:1fr 1fr; gap: clamp(1.75rem,4vw,3.5rem); align-items:start; }
  @media (max-width: 900px) { .duas { grid-template-columns:1fr; } }
  ul.checks { margin:0; padding:0; list-style:none; display:flex; flex-direction:column; gap:.95rem; }
  ul.checks li { display:grid; grid-template-columns:20px 1fr; gap:.8rem; align-items:start; }
  ul.checks .t { font-size:.9375rem; font-weight:600; }
  ul.checks .d { font-size:.875rem; color: var(--n70); }

  /* ------- times ------- */
  .times { background: var(--navy); color:#eef2f7; }
  .times h2 { color:#fff; }
  .times .lede { color:#a7b7ce; }
  .times .mini { color:#8698b3; }
  .numeros { display:grid; grid-template-columns:repeat(auto-fit,minmax(min(180px,100%),1fr)); gap:1.5rem; }
  .numeros .n { font-size:2.4rem; font-weight:300; line-height:1; letter-spacing:-.03em; color:#fff; }
  .numeros .n.v { color: #2ad183; }
  .numeros .r { font-size:.875rem; font-weight:600; color:#eef2f7; margin-top:.3rem; }
  .numeros .s { font-size:.8125rem; color:#8698b3; }

  /* ------- autor ------- */
  .autor { display:flex; gap:1.25rem; align-items:flex-start; border:1px solid var(--linha);
           border-radius:12px; padding:1.5rem; background: var(--painel); }
  .autor .ini { flex:none; width:52px; height:52px; border-radius:50%; background: var(--navy); color:#fff;
                display:grid; place-items:center; font-weight:600; }

  /* ------- fecho ------- */
  .fecho { text-align:center; }
  .fecho .env { display:flex; flex-direction:column; align-items:center; gap:1.4rem; }
  .fecho h2 { max-width:20ch; }
  .rodape { border-top:1px solid var(--linha); padding-block:2rem; font-size:.8125rem; color: var(--n45); }
  .rodape .env { display:flex; justify-content:space-between; gap:1rem; flex-wrap:wrap; }