/* NetCon Tec: site estático. Sem scripts nem fontes externas. Coluna central; os dois sistemas em cartões que viram uma
   coluna no celular. Tema claro/escuro pelo sistema do aparelho. */
:root {
  --fundo: #f5f7fa; --superficie: #ffffff; --texto: #1b2633; --suave: #586779; --marca: #24507a; --marca-fundo: #e2eaf3;
  --marca-texto: #ffffff; --linha: #d7dfe8;
  --fonte: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; --largura: 980px; --leitura: 68ch;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --fundo: #10161d; --superficie: #17202a; --texto: #e5ecf3; --suave: #9eadbd; --marca: #7fb0e0; --marca-fundo: #1b2a3a;
    --marca-texto: #0e141a; --linha: #283544; color-scheme: dark;
  }
}
:root[data-theme="dark"] {
  --fundo: #10161d; --superficie: #17202a; --texto: #e5ecf3; --suave: #9eadbd; --marca: #7fb0e0; --marca-fundo: #1b2a3a;
  --marca-texto: #0e141a; --linha: #283544; color-scheme: dark;
}
* { box-sizing: border-box; }
body { margin: 0; background: var(--fundo); color: var(--texto); font-family: var(--fonte); font-size: 1rem; line-height: 1.6;
  -webkit-text-size-adjust: 100%; }
.pagina { padding-inline: 16px; }
.faixa { max-width: var(--largura); margin: 0 auto; padding-block: 48px; }
h1, h2, h3 { text-wrap: balance; line-height: 1.2; }
h1 { font-size: clamp(2rem, 6vw, 2.8rem); font-weight: 700; letter-spacing: -0.02em; margin: 16px 0 12px; }
h2 { font-size: clamp(1.4rem, 3.6vw, 1.8rem); font-weight: 650; margin: 0 0 20px; }
h3 { font-size: 1.15rem; font-weight: 650; margin: 0; }
p { margin: 0; }
a { color: var(--marca); }
a:focus-visible, .botao:focus-visible { outline: 2px solid var(--marca); outline-offset: 3px; border-radius: 6px; }
.topo { text-align: center; padding-block: 72px 32px; }
.marca { display: block; margin: 0 auto; }
.marca rect { fill: var(--marca); }
.marca path { fill: none; stroke: var(--marca-texto); stroke-width: 5; stroke-linecap: round; stroke-linejoin: round; }
.frase { max-width: 60ch; margin: 0 auto; color: var(--suave); font-size: 1.1rem; }
.sistemas { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 20px; }
.sistema { background: var(--superficie); border: 1px solid var(--linha); border-radius: 16px; padding: 24px; display: flex;
  flex-direction: column; gap: 12px; }
.sistema p { color: var(--suave); flex: 1; }
.icone { width: 44px; height: 44px; border-radius: 12px; background: var(--marca-fundo); color: var(--marca); display: grid; place-items: center; }
.botao { align-self: flex-start; display: inline-block; background: var(--marca); color: var(--marca-texto); text-decoration: none;
  font-weight: 600; padding: 12px 20px; border-radius: 10px; min-height: 44px; }
.botao:hover { filter: brightness(1.08); }
.leitura { max-width: var(--leitura); color: var(--suave); }
.rodape { border-top: 1px solid var(--linha); padding-block: 24px 40px; color: var(--suave); font-size: 0.9rem; text-align: center; }
.selo { display: inline-block; vertical-align: middle; margin-left: 6px; padding: 2px 10px; border-radius: 999px; font-size: 0.8rem;
  font-weight: 600; background: var(--marca-fundo); color: var(--marca); white-space: nowrap; }