/* ------------------------------------------------------------------
   Estilos dos formulários — os mesmos no site e na bio.
   As variáveis têm valor de reserva porque a bio não carrega estilo.css.
------------------------------------------------------------------ */

#dialogoForm {
  margin: auto; border: 0; padding: 0; border-radius: var(--raio, 28px);
  background: var(--branco, #fff); color: var(--preto, #0E0E0E);
  width: min(560px, calc(100vw - 32px));
  max-height: calc(100dvh - 24px); overflow-y: auto;
  font-family: Aileron, "Helvetica Neue", Helvetica, sans-serif;
}
#dialogoForm::backdrop { background: rgba(14,14,14,.55); backdrop-filter: blur(3px); }
#dialogoForm *, #dialogoForm *::before, #dialogoForm *::after { box-sizing: border-box; }
#dialogoForm h3, #dialogoForm p, #dialogoForm fieldset { margin: 0; }
#dialogoForm [hidden] { display: none !important; }

/* os botões que o formulário usa, pra funcionar fora do site também */
#dialogoForm .botao-grande {
  display: inline-flex; align-items: center; justify-content: space-between; gap: 18px;
  background: var(--preto, #0E0E0E); color: var(--branco, #fff);
  border-radius: var(--raio-pilula, 40px); padding: 14px 16px 14px 26px;
  font-size: 17px; font-weight: 700; letter-spacing: -.02em;
}
#dialogoForm .botao-grande .seta {
  display: inline-flex; align-items: center; justify-content: center;
  width: 38px; height: 38px; border-radius: 50%; background: var(--branco, #fff); color: var(--preto, #0E0E0E); font-size: 15px;
}
#dialogoForm .botao-branco {
  display: inline-flex; align-items: center; justify-content: space-between; gap: 12px; width: 100%;
  background: var(--branco, #fff); border: 1px solid var(--preto, #0E0E0E); color: var(--preto, #0E0E0E);
  border-radius: var(--raio-pilula, 40px); padding: 15px 22px;
  font-size: 14px; font-weight: 700; text-decoration: none;
}

/* ---------- formulários dentro do site ----------
   O formulário e a tela de "recebido" usam .detalhe. Esses estilos tinham
   sumido junto com o card antigo da marca, e o formulário ficou cru:
   texto colado na borda, título sem estilo, o ✕ virado quadradinho. */
.detalhe { padding: 26px 24px 24px; }
.topo-detalhe { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; margin-bottom: 14px; }
.topo-detalhe h3 { font-size: 28px; font-weight: 700; letter-spacing: -.035em; line-height: 1.05; }
.topo-detalhe .peca { display: block; margin-top: 8px; font-size: 10px; letter-spacing: .14em; font-weight: 600; color: var(--cinza-texto); }
.detalhe .fechar {
  flex: none; width: 44px; height: 44px; border-radius: 50%;
  border: 1px solid var(--cinza-borda); background: var(--branco);
  font-size: 16px; font-family: inherit; color: var(--preto); cursor: pointer;
}
.detalhe .fechar:hover { border-color: var(--preto); }
.detalhe > p:not(.aviso-form) { font-size: 14px; line-height: 1.6; color: #3C3C40; margin: 0 0 20px; }
#dialogoForm { max-height: calc(100dvh - 24px); overflow-y: auto; }

.intro-form { font-size: 15px; line-height: 1.5; color: var(--cinza-texto, #6E6E74); margin-bottom: 22px !important; }
.formulario .campos { display: grid; gap: 16px; margin-bottom: 20px; }
.bloco-form { font-size: 10px; letter-spacing: .16em; font-weight: 600; color: var(--cinza-texto); margin: 8px 0 -4px; }
.campo { display: flex; flex-direction: column; gap: 7px; }
.campo > span, .campo legend {
  font-size: 13px; font-weight: 600; letter-spacing: -.005em; color: var(--preto);
}
.campo .opcional { font-weight: 400; color: var(--cinza-texto); }
/* 16px no campo: abaixo disso o iPhone dá zoom sozinho quando a pessoa toca */
.campo input, .campo select, .campo textarea {
  font-family: inherit; font-size: 16px; color: var(--preto);
  background: var(--cinza-fundo); border: 1px solid transparent;
  border-radius: 16px; padding: 14px 16px; width: 100%; min-height: 50px;
  transition: border-color .2s, background .2s;
}
.campo input::placeholder, .campo textarea::placeholder, .campo select:invalid { color: var(--cinza-claro); }
.campo select option { color: var(--preto); }
.campo textarea { resize: vertical; min-height: 96px; }
.campo input:focus, .campo select:focus, .campo textarea:focus {
  outline: none; border-color: var(--preto); background: var(--branco);
}

/* porteiro da curadoria: pergunta e resposta, sem caixa em volta */
.gate { border: 0; padding: 0; margin: 0; min-width: 0; }
.gate legend { padding: 0; margin-bottom: 9px; }
.gate .escolhas { display: flex; flex-wrap: wrap; gap: 8px; }
.escolha { position: relative; }
.escolha input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.escolha span {
  display: inline-flex; align-items: center; min-height: 44px; padding: 0 18px;
  border: 1px solid var(--cinza-borda); border-radius: var(--raio-pilula, 40px);
  font-size: 14px; cursor: pointer; transition: background .18s, color .18s, border-color .18s;
}
.escolha span:hover { border-color: var(--preto); }
.escolha input:checked + span { background: var(--preto); color: var(--branco); border-color: var(--preto); }
.escolha input:focus-visible + span { outline: 2px solid var(--preto); outline-offset: 2px; }
.gate.travado .escolha input:checked + span { background: var(--cinza-fundo); color: var(--preto); border-color: var(--preto); }
.gate .motivo {
  margin: 12px 0 0; font-size: 13px; line-height: 1.55; color: #3C3C40;
  background: var(--cinza-fundo); border-radius: 16px; padding: 14px 16px;
}

.formulario .botao-grande { border: 0; cursor: pointer; font-family: inherit; }
.formulario .botao-grande:disabled { opacity: .35; cursor: not-allowed; transform: none; }
.formulario .botao-grande { width: 100%; }
.aviso-form { font-size: 11px; line-height: 1.5; color: var(--cinza-texto); margin-top: 12px; }


/* o campo que só robô preenche: fora da tela, fora do leitor de tela */
.pote { position: absolute !important; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.lugar-turnstile:empty { display: none; }
.lugar-turnstile { margin: 0 0 14px; }
.aviso-barrado { color: #B42318 !important; }