/* =========================================================================
   DESIGN SYSTEM — Suplicy Estadual 2026 (manual oficial de identidade visual)
   Ajuste cores/fontes aqui. NÃO espalhar valores fixos pelo resto do código.
   ========================================================================= */
:root {
  /* Paleta oficial (manual "Suplicy Estadual 2026 — Identidade visual.pdf") */
  --vermelho: #FF3A2F;   /* assinatura / primária */
  --amarelo:  #FFC400;   /* renda, sol */
  --verde:    #00A85A;   /* pautas */
  --violeta:  #4733FF;   /* digital */
  --rosa:     #FF4D9D;   /* afeto */
  --tinta:    #15120E;   /* texto / fundo escuro */
  --papel:    #FAF4E8;   /* base / fundo creme */

  /* Papéis funcionais */
  --bg:        var(--papel);
  --fg:        var(--tinta);
  --acento:    var(--vermelho);
  --acento-ink:#fff;               /* texto sobre o vermelho */
  --muted:     #6b665e;
  --card:      #fffdf8;
  --borda:     #e2dccf;
  --erro:      #c02616;
  --foco:      var(--violeta);

  /* Tipografia (Google Fonts) */
  --font-display: "Bricolage Grotesque", system-ui, sans-serif; /* títulos */
  --font-texto:   "Hanken Grotesk", system-ui, sans-serif;      /* corpo */

  /* Espaçamento / raio */
  --gap: 1rem;
  --radius: 14px;
  --maxw: 640px;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  font-family: var(--font-texto);
  background: var(--bg);
  color: var(--fg);
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
}

/* Foco visível em tudo que é interativo (acessibilidade) */
a:focus-visible, button:focus-visible, input:focus-visible, :focus-visible {
  outline: 3px solid var(--foco);
  outline-offset: 2px;
}

.container { max-width: var(--maxw); margin: 0 auto; padding: 0 1.25rem; }

/* -------- Cabeçalho / identidade -------- */
.site-header {
  background: var(--tinta);
  color: var(--papel);
  /* Grafismo de pontos do DS (textura de fundo) */
  background-image: radial-gradient(var(--vermelho) 1.5px, transparent 1.6px);
  background-size: 22px 22px;
  padding: 1.1rem 0;
  border-bottom: 4px solid var(--vermelho);
}
.site-header .container { display: flex; align-items: center; gap: .75rem; }
/* Logo oficial: lockup "Suplicy · Dep. Estadual" (marca.png do Drive),
   wordmark recolorido pra creme p/ ler no fundo escuro. */
.logo { display: inline-flex; text-decoration: none; }
.logo img { height: 52px; width: auto; display: block; }

/* -------- Hero / convocação -------- */
.hero { padding: 2.5rem 0 1rem; }
h1 {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(1.9rem, 6vw, 2.8rem);
  line-height: 1.05;
  letter-spacing: -.02em;
  margin: 0 0 .75rem;
}
/* Barra colorida preenchida — molde do DS */
.barra {
  background: var(--vermelho);
  color: var(--acento-ink);
  padding: .05em .3em;
  box-decoration-break: clone;
  -webkit-box-decoration-break: clone;
}
.lead { font-size: 1.1rem; color: var(--muted); max-width: 52ch; margin: 0 0 1.5rem; }

/* -------- Formulário -------- */
.card {
  background: var(--card);
  border: 1px solid var(--borda);
  border-radius: var(--radius);
  padding: 1.5rem;
  margin: 1rem 0 2.5rem;
}
.field { margin-bottom: 1.15rem; }
label { display: block; font-weight: 600; margin-bottom: .35rem; }
.req { color: var(--vermelho); }
.opt { color: var(--muted); font-weight: 400; }

input[type="text"],
input[type="tel"],
input[type="email"] {
  width: 100%;
  font: inherit;
  padding: .7rem .8rem;
  border: 1.5px solid var(--borda);
  border-radius: 10px;
  background: #fff;
  color: var(--fg);
}
input:invalid:not(:placeholder-shown) { border-color: var(--erro); }

.checkbox {
  display: flex;
  gap: .6rem;
  align-items: flex-start;
  font-weight: 400;
}
.checkbox input { margin-top: .25rem; width: 1.15rem; height: 1.15rem; flex: none; }

.error-msg { color: var(--erro); font-size: .9rem; margin-top: .35rem; display: none; }
.field.has-error .error-msg { display: block; }
.field.has-error input { border-color: var(--erro); }

/* -------- Botões -------- */
.btn {
  display: inline-block;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.05rem;
  text-align: center;
  text-decoration: none;
  cursor: pointer;
  border: none;
  border-radius: 12px;
  padding: .85rem 1.4rem;
  background: var(--vermelho);
  color: var(--acento-ink);
  width: 100%;
  transition: filter .15s;
}
.btn:hover { filter: brightness(1.06); }
.btn[disabled] { opacity: .6; cursor: progress; }
.btn.secondary { background: var(--tinta); color: var(--papel); }

/* -------- Sucesso -------- */
.success {
  display: none;
  background: var(--card);
  border: 1px solid var(--borda);
  border-left: 6px solid var(--verde);
  border-radius: var(--radius);
  padding: 1.5rem;
  margin: 1rem 0 2.5rem;
}
.success h2 { font-family: var(--font-display); margin-top: 0; }
.passos { margin: 1rem 0 1.5rem; padding-left: 1.2rem; }
.passos li { margin-bottom: .5rem; }

/* -------- Repositório (voluntarios.html) -------- */
.aviso {
  background: #fff6d6;
  border: 1px solid var(--amarelo);
  border-radius: var(--radius);
  padding: 1rem 1.2rem;
  margin: 1.5rem 0;
}
.secao { margin: 1.75rem 0; }
.secao h2 { font-family: var(--font-display); }
.placeholder {
  border: 1.5px dashed var(--borda);
  border-radius: var(--radius);
  padding: 2rem;
  text-align: center;
  color: var(--muted);
  background: var(--card);
}

/* -------- Rodapé -------- */
.site-footer {
  background: var(--tinta);
  color: #b8b2a6;
  font-size: .85rem;
  padding: 1.75rem 0;
  margin-top: 2rem;
}
.site-footer a { color: var(--papel); }