/* IntelliBov — site público. Só fontes do sistema, nada externo. */
:root {
  --papel: #eef1ea;
  --superficie: #ffffff;
  --tinta: #1c2418;
  --tinta-suave: #4b5744;
  --pasto: #2f5a24;
  --pasto-forte: #24471b;
  --brinco: #f2c230;
  --linha: #c9d1c1;
  --erro: #9b2c1f;
  --ok: #2f5a24;
  --foco: #1f5fbf;
  --titulo: "Bahnschrift", "DIN Alternate", "Roboto Condensed", "sans-serif-condensed", "Arial Narrow", sans-serif;
  --texto: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  color-scheme: light dark;
}
@media (prefers-color-scheme: dark) {
  :root {
    --papel: #141912;
    --superficie: #1d241a;
    --tinta: #e6ebdf;
    --tinta-suave: #aab4a1;
    --pasto: #3f7a30;
    --pasto-forte: #3a7029;
    --linha: #33402e;
    --erro: #f08a7a;
    --ok: #9fd18b;
    --foco: #8ab8ff;
  }
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--papel);
  color: var(--tinta);
  font: 17px/1.55 var(--texto);
  overflow-x: hidden;
}
a { color: inherit; text-underline-offset: 3px; }
:focus-visible { outline: 3px solid var(--foco); outline-offset: 2px; }

.faixa { max-width: 1080px; margin: 0 auto; padding: 0 16px; }

/* Cabeçalho */
.topo { border-bottom: 1px solid var(--linha); }
.topo .faixa { display: flex; align-items: center; justify-content: space-between; min-height: 64px; gap: 12px; }
.marca { display: inline-flex; align-items: center; gap: 10px; min-height: 44px; padding-block: 6px; text-decoration: none; font: 700 1.35rem/1 var(--titulo); letter-spacing: .01em; }
.marca svg { width: 26px; height: 32px; flex: none; }
.marca .tag { fill: var(--brinco); stroke: var(--tinta); stroke-width: 1.5; }
.marca .furo { fill: var(--papel); stroke: var(--tinta); stroke-width: 1.5; }

/* Títulos */
h1, h2, h3 { font-family: var(--titulo); font-stretch: condensed; line-height: 1.08; margin: 0 0 .5em; }
h1 { margin-bottom: .35em; font-size: clamp(2.3rem, 8vw, 4.1rem); font-weight: 700; letter-spacing: -.01em; max-width: 14ch; }
h2 { font-size: clamp(1.6rem, 5vw, 2.2rem); font-weight: 700; }
h3 { font-size: 1.3rem; font-weight: 600; }

/* Abertura */
.abertura { padding: 40px 0 48px; }
.abertura .faixa { display: grid; gap: 32px; }
.sub { font-size: 1.15rem; color: var(--tinta-suave); max-width: 38ch; margin: 0 0 24px; }
.acoes { display: flex; flex-wrap: wrap; gap: 12px; }

/* Botões */
.botao {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 48px; padding: 0 22px; border-radius: 6px;
  font: 600 1.05rem/1 var(--texto); text-decoration: none; cursor: pointer;
  border: 2px solid transparent;
}
.botao-pasto { background: var(--pasto); color: #fff; }
.botao-pasto:hover { background: var(--pasto-forte); }
.botao-pasto:disabled { opacity: .6; cursor: wait; }
.botao-contorno { border-color: var(--tinta); color: var(--tinta); background: transparent; }
.botao-tinta { background: #1c2418; color: var(--brinco); }

/* Demonstração: o brinco */
.brinco {
  position: relative; align-self: start;
  background: var(--brinco); color: #1c2418;
  border-radius: 28px 28px 10px 10px;
  padding: 52px 24px 24px;
  max-width: 420px;
}
.brinco::before {
  content: ""; position: absolute; top: 16px; left: 50%;
  width: 18px; height: 18px; margin-left: -9px; border-radius: 50%;
  background: var(--papel); box-shadow: inset 0 0 0 2px #1c2418;
}
.brinco h2 { font-size: 1.7rem; }
.brinco p { margin: 0 0 16px; }
.credenciais { margin: 0 0 20px; padding: 12px 14px; border: 2px dashed #1c2418; border-radius: 6px; font-size: 1rem; }
.credenciais div + div { margin-top: 4px; }
.credenciais span { font-weight: 700; word-break: break-all; }

/* Provas */
.provas { padding: 8px 0 48px; }
.provas ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 16px; }
.provas li { background: var(--superficie); border: 1px solid var(--linha); border-top: 6px solid var(--pasto); border-radius: 4px; padding: 20px; }
.provas p { margin: 0; color: var(--tinta-suave); }

/* Formulário + perguntas */
.contato { padding: 48px 0; border-top: 1px solid var(--linha); }
.contato .faixa { display: grid; gap: 40px; }
.painel { background: var(--superficie); border: 1px solid var(--linha); border-radius: 6px; padding: 24px 20px; }
.campos { display: grid; gap: 16px; }
.campo label, .campo > span { display: block; font-weight: 600; margin-bottom: 6px; }
.campo small { font-weight: 400; color: var(--tinta-suave); }
input, select, textarea {
  width: 100%; min-height: 48px; padding: 10px 12px;
  font: inherit; color: var(--tinta); background: var(--papel);
  border: 1px solid var(--tinta-suave); border-radius: 4px;
}
textarea { min-height: 110px; resize: vertical; }
::placeholder { color: var(--tinta-suave); opacity: 1; }
.linha-dupla { display: grid; grid-template-columns: 1fr 96px; gap: 12px; }
.aceite { display: flex; gap: 12px; align-items: flex-start; font-size: .97rem; }
.aceite a { display: inline-block; padding-block: 12px; margin-block: -12px; }
.obrigatorio { margin: 0 0 16px; font-size: .95rem; color: var(--tinta-suave); }
.provas h2 { font-size: 1.15rem; color: var(--tinta-suave); margin-bottom: 16px; }
.aceite input { width: 24px; height: 24px; min-height: 0; margin: 2px 0 0; flex: none; accent-color: var(--pasto); }
.hp { position: absolute; left: -10000px; }
.envio { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 16px; margin-top: 8px; }
.msg { margin: 12px 0 0; font-weight: 600; min-height: 1.5em; }
.msg.ok { color: var(--ok); }
.msg.erro { color: var(--erro); }
.ou { margin: 20px 0 0; color: var(--tinta-suave); }
.ou .botao { margin-top: 8px; }

details { border-bottom: 1px solid var(--linha); }
summary { cursor: pointer; min-height: 48px; padding: 12px 0; font-weight: 600; display: flex; align-items: center; }
details p { margin: 0 0 16px; color: var(--tinta-suave); }

/* Texto corrido (privacidade) */
.texto { padding: 40px 0 56px; }
.texto .faixa { max-width: 720px; }
.texto h2 { font-size: 1.4rem; margin-top: 1.6em; }
.texto p, .texto li { color: var(--tinta-suave); }

/* Rodapé */
.rodape { border-top: 1px solid var(--linha); padding: 24px 0 32px; font-size: .95rem; color: var(--tinta-suave); }
.rodape .faixa { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 8px 24px; }
.rodape a { display: inline-flex; align-items: center; min-height: 44px; }

@media (min-width: 721px) {
  .abertura { padding: 64px 0 72px; }
  .abertura .faixa { grid-template-columns: 1.3fr 1fr; align-items: center; }
  .provas ul { grid-template-columns: repeat(3, 1fr); }
  .contato .faixa { grid-template-columns: 1.2fr 1fr; align-items: start; }
  .painel { padding: 32px; }
}