:root {
      color-scheme: light;
      font-family:
        Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont,
        "Segoe UI", sans-serif;
      color: #152336;
      background: #f5f2eb;
      --azul: #10283f;
      --azul-claro: #edf3f6;
      --verde: #174b43;
      --verde-claro: #e7f1ed;
      --borda: #c9d6dc;
      --branco: #ffffff;
      --texto-suave: #5b6977;
    }

    * { box-sizing: border-box; }

    body {
      max-width: 980px;
      margin: 0 auto;
      padding: 30px 22px 48px;
      line-height: 1.5;
    }

    a { color: #174f69; }

    .nota-versao-manual {
      padding: 10px 14px;
      border-left: 3px solid #c99942;
      background: var(--azul-claro);
      font-size: .88rem;
      color: var(--texto-suave);
    }

    .topo {
      display: flex;
      align-items: center;
      gap: 12px;
      margin-bottom: 24px;
    }

    .topo img {
      width: 46px;
      height: 46px;
      border-radius: 12px;
    }

    .marca {
      color: var(--azul);
      font-size: 1.08rem;
      font-weight: 850;
    }

    .selo {
      display: inline-block;
      margin-top: 2px;
      color: var(--verde);
      font-size: 0.74rem;
      font-weight: 800;
      letter-spacing: 0.06em;
      text-transform: uppercase;
    }

    .hero {
      display: grid;
      grid-template-columns: minmax(0, 1fr) auto;
      gap: 22px;
      align-items: end;
      padding: 26px;
      background: var(--branco);
      border: 1px solid var(--borda);
      border-radius: 18px;
      box-shadow: 0 10px 30px rgba(16, 40, 63, 0.07);
    }

    h1 {
      max-width: 700px;
      margin: 0 0 10px;
      color: #0a1b2e;
      font-size: clamp(2rem, 5vw, 3.5rem);
      line-height: 1.02;
      letter-spacing: -0.04em;
    }

    h2 {
      margin: 32px 0 14px;
      color: var(--azul);
      font-size: 1.25rem;
    }

    h3 {
      margin: 0 0 6px;
      color: var(--azul);
      font-size: 1rem;
    }

    p { margin: 0; }

    .resumo {
      max-width: 700px;
      color: #34485a;
      font-size: 1.04rem;
    }

    .botao {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      min-height: 46px;
      padding: 10px 18px;
      color: #ffffff;
      background: var(--azul);
      border: 1px solid var(--azul);
      border-radius: 10px;
      font-weight: 850;
      text-align: center;
      text-decoration: none;
    }

    .passos {
      display: grid;
      grid-template-columns: repeat(4, minmax(0, 1fr));
      gap: 12px;
    }

    .passo {
      min-height: 172px;
      padding: 16px;
      background: var(--branco);
      border: 1px solid var(--borda);
      border-radius: 14px;
    }

    .numero {
      display: grid;
      width: 30px;
      height: 30px;
      margin-bottom: 12px;
      place-items: center;
      color: #ffffff;
      background: var(--azul);
      border-radius: 999px;
      font-size: 0.84rem;
      font-weight: 900;
    }

    .passo p,
    .nota p,
    .sistema p {
      color: var(--texto-suave);
      font-size: 0.9rem;
    }

    .sistemas,
    .notas {
      display: grid;
      grid-template-columns: repeat(2, minmax(0, 1fr));
      gap: 14px;
    }

    .sistema,
    .nota {
      padding: 17px 18px;
      border-radius: 14px;
    }

    .sistema {
      background: var(--azul-claro);
      border: 1px solid #cbdce5;
    }

    .sistema--pasta-digital {
      grid-column: 1 / -1;
      background: var(--verde-claro);
      border-color: #bfd8ce;
    }

    kbd {
      display: inline-block;
      padding: 2px 7px;
      color: var(--azul);
      background: var(--branco);
      border: 1px solid #aebfc8;
      border-bottom-width: 2px;
      border-radius: 6px;
      font: 800 0.82rem/1.35 ui-monospace, "Cascadia Code", Consolas, monospace;
      white-space: nowrap;
    }

    .suite-apresentacao {
      display: grid;
      grid-template-columns: minmax(220px, 0.72fr) minmax(0, 1.8fr);
      gap: 12px;
      align-items: stretch;
    }

    .suite-entrada {
      display: flex;
      flex-direction: column;
      justify-content: space-between;
      gap: 18px;
      padding: 18px;
      color: #ffffff;
      background: var(--azul);
      border: 1px solid var(--azul);
      border-radius: 14px;
    }

    .suite-entrada h3,
    .suite-entrada p {
      color: inherit;
    }

    .suite-entrada p {
      font-size: 0.9rem;
    }

    .suite-entrada small {
      color: #d6e3ea;
      font-size: 0.78rem;
    }

    .suite-modulos {
      display: grid;
      grid-template-columns: repeat(2, minmax(0, 1fr));
      overflow: hidden;
      background: var(--borda);
      border: 1px solid var(--borda);
      border-radius: 14px;
      gap: 1px;
    }

    .suite-modulo {
      min-width: 0;
      padding: 13px 14px;
      background: var(--branco);
    }

    .suite-modulo h3 {
      margin-bottom: 3px;
      font-size: 0.9rem;
    }

    .suite-modulo p {
      color: var(--texto-suave);
      font-size: 0.8rem;
      line-height: 1.42;
    }

    .nota {
      background: var(--verde-claro);
      border: 1px solid #b9d8cd;
    }

    .nota--neutra {
      background: var(--branco);
      border-color: var(--borda);
    }

    .destaque {
      color: var(--azul);
      font-weight: 800;
    }

    .rodape {
      display: flex;
      flex-wrap: wrap;
      justify-content: space-between;
      gap: 12px;
      margin-top: 34px;
      padding-top: 18px;
      color: var(--texto-suave);
      border-top: 1px solid var(--borda);
      font-size: 0.82rem;
    }

    .rodape nav {
      display: flex;
      flex-wrap: wrap;
      gap: 14px;
    }

    @media (max-width: 820px) {
      .hero { grid-template-columns: 1fr; align-items: start; }
      .hero .botao { justify-self: start; }
      .passos { grid-template-columns: repeat(2, minmax(0, 1fr)); }
      .suite-apresentacao { grid-template-columns: 1fr; }
    }

    @media (max-width: 560px) {
      body { padding: 20px 14px 36px; }
      .hero { padding: 20px; }
      .passos,
      .sistemas,
      .notas,
      .suite-modulos { grid-template-columns: 1fr; }
      .passo { min-height: 0; }
      .hero .botao { width: 100%; }
    }
    .manual-extensao-detalhado {margin-top:28px;padding:24px;background:var(--branco);border:1px solid var(--borda);border-radius:14px}
    .manual-extensao-detalhado section {margin-top:32px;scroll-margin-top:20px}
    .manual-extensao-detalhado p+p {margin-top:12px}
    .manual-extensao-detalhado li {margin:8px 0}
    .manual-extensao-detalhado dd {margin:4px 0 16px}
    .farol-manual__figura {margin:20px 0;max-width:480px}
    .farol-manual__figura > svg {display:block;width:100%;height:auto}
    .farol-manual__figura figcaption {margin-top:10px;line-height:1.6}
    .farol-manual__legenda {font-size:.85rem;color:var(--texto-suave)}
    .farol-ajuda-link {margin-left:auto;display:inline-flex;align-items:center;gap:8px;flex-shrink:0;padding:8px 10px;border:1px solid var(--borda);border-radius:10px;background:var(--branco);color:var(--azul);font-weight:700;text-decoration:none}
    .farol-ajuda-link__simbolo {display:inline-flex;align-items:center;justify-content:center;width:28px;height:28px;border-radius:50%;background:var(--azul);color:var(--branco);font-size:18px}
    .farol-ajuda-link:hover {background:var(--azul-claro)}
    .farol-ajuda-link:focus-visible {outline:3px solid #1763b4;outline-offset:3px}
    .fixar-extensao-imagens {display:grid;grid-template-columns:1fr 1fr;align-items:start;gap:24px;margin:24px 0}
    .fixar-extensao-imagens .farol-manual__figura {margin:0;max-width:360px}
    .fixar-extensao-imagens .farol-manual__legenda {grid-column:1/-1;margin:0}
    @media(max-width:680px) {.fixar-extensao-imagens {grid-template-columns:1fr}}
    @media(max-width:600px) {.farol-ajuda-link__rotulo {display:none}.topo {flex-wrap:wrap}}