/* LeaderBrand · páginas públicas do site (30/09/2026): cadastro de ONG (/ongs) e pedido de diagnóstico (/diagnostico).
   Mesmo desenho do leaderbrand.com.br: Hanken Grotesk, marinho, azul da marca, cantos retos, a linha antes do título
   e o degradê violeta para azul na segunda linha. Só tema claro, como o site. */
:root {
  --lb-marinho: #0a1733;
  --lb-azul: #3b63f1;
  --lb-azul-escuro: #2447c9;
  --lb-violeta: #7c3aed;
  --lb-texto: #0a1733;
  --lb-texto-2: #3f4c70;
  --lb-mudo: #56648b;
  --lb-fraco: #8c97b5;
  --lb-linha: #e6e9f1;
  --lb-linha-2: #c7d3f2;
  --lb-suave: #f5f7ff;
  --lb-tinta: #eef2fe;
  --lb-campo: #fafbfe;
  --lb-ponto: rgba(59, 99, 241, 0.14);
  --lb-ponto-marinho: rgba(143, 169, 255, 0.13);
  --lb-erro: #c0343f;
  --lb-erro-fundo: #fbeced;
  --lb-ok: #158f62;
  --lb-ok-fundo: #e7f5ef;
  --lb-fonte: 'Hanken Grotesk', system-ui, -apple-system, 'Segoe UI', Roboto, Arial, sans-serif;
  --lb-degrade: linear-gradient(90deg, #7c3aed, #5b7bff 55%, #3b63f1);
  --lb-largura: 1160px;
  --lb-gutter: clamp(16px, 4vw, 44px);
  color-scheme: light;
}
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0; background: #ffffff; color: var(--lb-texto); font-family: var(--lb-fonte);
  font-size: 16px; line-height: 1.6; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility;
}
a { color: var(--lb-azul); text-decoration: none; }
a:hover { color: var(--lb-azul-escuro); }
:focus-visible { outline: 2px solid var(--lb-azul); outline-offset: 3px; }
img, svg { display: block; max-width: 100%; }
.lbs-oculto { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.lbs-pular { position: fixed; left: 12px; top: -60px; z-index: 50; padding: 10px 14px; background: var(--lb-marinho); color: #fff; font-weight: 700; }
.lbs-pular:focus { top: 12px; color: #fff; }

/* topo */
.lbs-topo { position: sticky; top: 0; z-index: 20; background: rgba(255, 255, 255, 0.94); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); border-bottom: 1px solid var(--lb-linha); }
.lbs-topo-in { max-width: var(--lb-largura); margin: 0 auto; padding: 0 var(--lb-gutter); height: 72px; display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.lbs-logo img { height: 34px; width: auto; }
.lbs-voltar { font-size: 12px; font-weight: 800; letter-spacing: 0.1em; text-transform: uppercase; color: var(--lb-texto); display: inline-flex; align-items: center; gap: 8px; }
.lbs-voltar:hover { color: var(--lb-azul); }

/* corpo com as linhas verticais do site */
.lbs-pagina { position: relative; }
.lbs-grade { max-width: var(--lb-largura); margin: 0 auto; padding: clamp(36px, 6vw, 72px) var(--lb-gutter) clamp(48px, 7vw, 96px); position: relative; }
@media (min-width: 1100px) {
  .lbs-grade::before, .lbs-grade::after { content: ""; position: absolute; top: 0; bottom: 0; width: 1px; background: var(--lb-linha); }
  .lbs-grade::before { left: 0; }
  .lbs-grade::after { right: 0; }
}
.lbs-colunas { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: clamp(32px, 5vw, 72px); align-items: start; }
@media (max-width: 960px) { .lbs-colunas { grid-template-columns: minmax(0, 1fr); } }

/* título */
.lbs-kicker { display: flex; align-items: center; gap: 14px; margin: 0 0 18px; font-size: 12px; font-weight: 800; letter-spacing: 0.26em; text-transform: uppercase; color: var(--lb-mudo); }
.lbs-kicker::before { content: ""; width: 34px; height: 2px; background: var(--lb-azul); flex: none; }
.lbs-h1 { margin: 0; font-size: clamp(32px, 4.6vw, 46px); line-height: 1.08; font-weight: 700; letter-spacing: -0.032em; text-wrap: balance; }
.lbs-grad { display: block; background: var(--lb-degrade); -webkit-background-clip: text; background-clip: text; color: transparent; }
.lbs-lead { margin: 20px 0 0; font-size: clamp(16.5px, 1.4vw, 18px); line-height: 1.7; color: var(--lb-mudo); max-width: 34em; }

/* os 10% */
.lbs-dez { margin-top: 30px; background-color: var(--lb-marinho); background-image: radial-gradient(var(--lb-ponto-marinho) 1px, transparent 1px); background-size: 22px 22px; color: #fff; padding: 24px 26px; display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 20px; align-items: center; }
.lbs-dez-n { font-size: clamp(44px, 5vw, 58px); line-height: 1; font-weight: 800; letter-spacing: -0.04em; background: linear-gradient(90deg, #a78bfa, #8fa9ff); -webkit-background-clip: text; background-clip: text; color: transparent; font-variant-numeric: tabular-nums; }
.lbs-dez p { margin: 0; font-size: 15.5px; line-height: 1.6; color: #c7d3f2; }
.lbs-dez strong { color: #fff; font-weight: 700; }

/* passos (é uma sequência de verdade, por isso numerada) */
.lbs-passos { list-style: none; margin: 32px 0 0; padding: 0; display: grid; gap: 0; border-top: 1px solid var(--lb-linha); }
.lbs-passos li { display: grid; grid-template-columns: 44px minmax(0, 1fr); gap: 12px; padding: 18px 0; border-bottom: 1px solid var(--lb-linha); }
.lbs-passos .n { font-size: 12px; font-weight: 800; letter-spacing: 0.12em; color: var(--lb-azul); padding-top: 3px; font-variant-numeric: tabular-nums; }
.lbs-passos b { display: block; font-size: 16.5px; font-weight: 700; letter-spacing: -0.01em; color: var(--lb-texto); }
.lbs-passos span { display: block; margin-top: 2px; font-size: 15px; color: var(--lb-mudo); line-height: 1.55; }

.lbs-btn.lbs-so-movel { display: none; }
@media (max-width: 960px) { .lbs-btn.lbs-so-movel { display: inline-flex; margin-top: 26px; } }
.lbs-alt { margin-top: 28px; display: flex; flex-wrap: wrap; align-items: center; gap: 12px 18px; font-size: 15px; color: var(--lb-mudo); }

/* cartão do formulário, com as marcas de canto do sistema */
.lbs-cartao { position: relative; background: #fff; border: 1px solid var(--lb-linha-2); padding: clamp(22px, 3.2vw, 36px); }
/* a cruz azul nos cantos de cima à esquerda e de baixo à direita, em cima da borda (a borda fica a 6 px da caixa) */
.lbs-cartao::before { content: ""; position: absolute; inset: -7px; pointer-events: none;
  background:
    linear-gradient(var(--lb-azul), var(--lb-azul)) left 6px top 0 / 1px 13px no-repeat,
    linear-gradient(var(--lb-azul), var(--lb-azul)) left 0 top 6px / 13px 1px no-repeat,
    linear-gradient(var(--lb-azul), var(--lb-azul)) right 6px bottom 0 / 1px 13px no-repeat,
    linear-gradient(var(--lb-azul), var(--lb-azul)) right 0 bottom 6px / 13px 1px no-repeat; }
.lbs-cartao-tit { margin: 0 0 4px; font-size: 22px; line-height: 1.2; font-weight: 700; letter-spacing: -0.025em; }
.lbs-cartao-sub { margin: 0 0 22px; font-size: 14.5px; color: var(--lb-mudo); }
.lbs-grupo { margin: 26px 0 14px; padding-top: 18px; border-top: 1px solid var(--lb-linha); font-size: 12px; font-weight: 800; letter-spacing: 0.2em; text-transform: uppercase; color: var(--lb-mudo); }

/* campos */
.lbs-campos { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 16px 14px; }
.lbs-campo { grid-column: span 6; min-width: 0; }
.lbs-campo--4 { grid-column: span 4; }
.lbs-campo--3 { grid-column: span 3; }
.lbs-campo--2 { grid-column: span 2; }
@media (max-width: 560px) { .lbs-campo--4, .lbs-campo--3 { grid-column: span 6; } .lbs-campo--2 { grid-column: span 6; } }
.lbs-rot { display: flex; justify-content: space-between; gap: 10px; margin: 0 0 6px; font-size: 12px; font-weight: 800; letter-spacing: 0.1em; text-transform: uppercase; color: var(--lb-texto-2); }
.lbs-rot small { font-size: 11.5px; font-weight: 600; letter-spacing: 0.02em; text-transform: none; color: var(--lb-fraco); }
.lbs-in, .lbs-sel, .lbs-area {
  width: 100%; font: inherit; font-size: 16px; color: var(--lb-texto); background: var(--lb-campo);
  border: 1px solid var(--lb-linha-2); border-radius: 0; padding: 12px 14px; min-height: 48px; appearance: none; -webkit-appearance: none;
  transition: border-color 150ms, box-shadow 150ms, background-color 150ms;
}
.lbs-area { min-height: 112px; resize: vertical; line-height: 1.55; }
.lbs-sel { padding-right: 40px; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5l5 5 5-5' fill='none' stroke='%2356648b' stroke-width='1.6'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 14px center; }
.lbs-in::placeholder, .lbs-area::placeholder { color: #9aa4c0; }
.lbs-in:hover, .lbs-sel:hover, .lbs-area:hover { border-color: #aebcec; }
.lbs-in:focus, .lbs-sel:focus, .lbs-area:focus { outline: none; border-color: var(--lb-azul); background-color: #fff; box-shadow: 0 0 0 3px rgba(59, 99, 241, 0.2); }
.lbs-campo[data-erro] .lbs-in, .lbs-campo[data-erro] .lbs-sel, .lbs-campo[data-erro] .lbs-area { border-color: var(--lb-erro); background-color: #fff; }
.lbs-msg { display: none; margin-top: 6px; font-size: 13.5px; line-height: 1.4; color: var(--lb-erro); }
.lbs-campo[data-erro] .lbs-msg { display: block; }
.lbs-conta { display: block; margin-top: 6px; font-size: 12.5px; color: var(--lb-fraco); text-align: right; font-variant-numeric: tabular-nums; }

/* escolhas (interesses) */
.lbs-chips { display: flex; flex-wrap: wrap; gap: 8px; margin: 0; padding: 0; border: 0; }
.lbs-chip { position: relative; }
.lbs-chip input { position: absolute; opacity: 0; inset: 0; margin: 0; cursor: pointer; }
.lbs-chip span { display: inline-flex; align-items: center; gap: 8px; padding: 9px 13px; border: 1px solid var(--lb-linha-2); background: #fff; font-size: 14px; font-weight: 600; color: var(--lb-texto-2); transition: background-color 150ms, border-color 150ms, color 150ms; user-select: none; }
.lbs-chip span::before { content: ""; width: 12px; height: 12px; border: 1.5px solid #9aa9d6; flex: none; }
.lbs-chip input:checked + span { background: var(--lb-tinta); border-color: var(--lb-azul); color: var(--lb-marinho); }
.lbs-chip input:checked + span::before { border-color: var(--lb-azul); background: var(--lb-azul) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='8' viewBox='0 0 10 8'%3E%3Cpath d='M1 4l2.6 2.6L9 1.2' fill='none' stroke='white' stroke-width='1.8'/%3E%3C/svg%3E") center / 9px no-repeat; }
.lbs-chip input:focus-visible + span { outline: 2px solid var(--lb-azul); outline-offset: 2px; }
.lbs-chip:hover span { border-color: #aebcec; }

/* consentimento */
.lbs-aceite { display: grid; grid-template-columns: 22px minmax(0, 1fr); gap: 10px; align-items: start; margin-top: 22px; font-size: 14.5px; line-height: 1.55; color: var(--lb-texto-2); cursor: pointer; }
.lbs-aceite input { width: 20px; height: 20px; margin: 1px 0 0; accent-color: var(--lb-azul); cursor: pointer; }
.lbs-campo[data-erro] .lbs-aceite { color: var(--lb-erro); }

/* botões */
.lbs-btn { display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-height: 52px; padding: 16px 28px; border: 1px solid transparent; background: var(--lb-azul); color: #fff; font: inherit; font-size: 12.5px; font-weight: 800; letter-spacing: 0.1em; text-transform: uppercase; cursor: pointer; transition: background-color 150ms, transform 150ms; text-decoration: none; }
.lbs-btn:hover { background: var(--lb-azul-escuro); color: #fff; }
.lbs-btn:active { transform: translateY(1px); }
.lbs-btn[disabled] { opacity: 0.7; cursor: progress; }
.lbs-btn--contorno { background: transparent; color: var(--lb-marinho); border-color: var(--lb-marinho); }
.lbs-btn--contorno:hover { background: var(--lb-marinho); color: #fff; }
.lbs-btn--largo { width: 100%; margin-top: 24px; }
.lbs-roda { width: 16px; height: 16px; border: 2px solid rgba(255, 255, 255, 0.45); border-top-color: #fff; border-radius: 50%; animation: lbs-gira 0.8s linear infinite; }
@keyframes lbs-gira { to { transform: rotate(360deg); } }

.lbs-aviso { display: none; margin-top: 16px; padding: 12px 14px; font-size: 14.5px; line-height: 1.5; background: var(--lb-erro-fundo); color: #8f1f2a; border-left: 3px solid var(--lb-erro); }
.lbs-aviso[data-on] { display: block; }
.lbs-letra { margin: 16px 0 0; font-size: 12.5px; line-height: 1.55; color: var(--lb-fraco); }

/* resposta depois do envio */
.lbs-pronto { display: none; text-align: left; }
.lbs-pronto[data-on] { display: block; animation: lbs-surge 420ms ease-out both; }
@keyframes lbs-surge { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
.lbs-pronto-sinal { width: 56px; height: 56px; display: grid; place-items: center; background: var(--lb-azul); color: #fff; margin-bottom: 20px; }
.lbs-pronto h2 { margin: 0; font-size: clamp(26px, 3vw, 32px); line-height: 1.15; font-weight: 700; letter-spacing: -0.03em; text-wrap: balance; }
.lbs-pronto p { margin: 12px 0 0; font-size: 16.5px; line-height: 1.65; color: var(--lb-mudo); }
.lbs-pronto .lbs-acoes { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 26px; }

/* rodapé */
.lbs-rodape { border-top: 1px solid var(--lb-linha); }
.lbs-rodape-in { max-width: var(--lb-largura); margin: 0 auto; padding: 22px var(--lb-gutter); display: flex; flex-wrap: wrap; gap: 8px 22px; justify-content: space-between; font-size: 13.5px; color: var(--lb-mudo); }
.lbs-rodape-in nav { display: flex; flex-wrap: wrap; gap: 8px 18px; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
}