/* ─────────────────────────────────────────────────────────────────────────────
   O CARTÃO DE FORMULÁRIO, de vidro sobre a faixa escura.

   Estava dentro de `pagina/contato.css`, e a página de fundadores pede o mesmo
   cartão: mesmo campo, mesmo foco, mesmo estado de enviado. Duas cópias das
   mesmas 40 linhas divergem na primeira correção que só uma das duas recebe.
   ───────────────────────────────────────────────────────────────────────────── */

.fcard { position: relative; border-radius: 22px; padding: 28px 30px; color: #fff;
  background:
    radial-gradient(260px 220px at var(--cx, 50%) var(--cy, 0%), rgba(255,255,255,.06), transparent 70%),
    rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.14); border-top-color: rgba(255,255,255,.28);
  box-shadow: var(--shadow-dark); }

.fgrid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.fgrid .full { grid-column: 1 / -1; }
@media (max-width: 560px) { .fgrid { grid-template-columns: 1fr; } }

.field { display: flex; flex-direction: column; gap: 7px; }
.field label { font-family: var(--font-mono); font-size: 10.5px; letter-spacing: .14em; text-transform: uppercase; color: rgba(234,240,245,.6); }
.field input, .field select, .field textarea { border: 1px solid rgba(255,255,255,.16); border-radius: 11px;
  background: rgba(255,255,255,.07); color: #fff; font: inherit; font-size: 14.5px; padding: 11px 13px; outline: none;
  transition: border-color var(--dur-1) var(--ease-out), box-shadow var(--dur-1) var(--ease-out), background var(--dur-1) var(--ease-out); }
.field input::placeholder, .field textarea::placeholder { color: rgba(234,240,245,.38); }
.field select { color: #fff; }
.field select option { color: var(--foreground); background: var(--card); }
.field input:focus, .field select:focus, .field textarea:focus { border-color: #E8776F;
  background: rgba(255,255,255,.1); box-shadow: 0 0 0 3px rgba(232,119,111,.22); }
.field textarea { min-height: 104px; resize: vertical; }
.field[hidden] { display: none; }
.facademia { border: 1px solid rgba(255,255,255,.16); border-radius: 16px; background: rgba(14,27,40,.34);
  transition: border-color var(--dur-1) var(--ease-out), box-shadow var(--dur-1) var(--ease-out), background var(--dur-1) var(--ease-out); }
.facademia:hover { border-color: rgba(255,255,255,.3); background: rgba(14,27,40,.4); }
.facademia:has(.facademia-input:checked) { border-color: #E8776F; background: linear-gradient(rgba(232,119,111,.1), rgba(232,119,111,.1)), rgba(14,27,40,.4); }
.facademia:has(.facademia-input:focus-visible) { border-color: #E8776F; box-shadow: 0 0 0 3px rgba(232,119,111,.22); }
.facademia-cartao { position: relative; display: flex; align-items: center; gap: 14px; min-height: 68px;
  padding: 12px 16px; cursor: pointer; -webkit-tap-highlight-color: transparent; }
.facademia-input { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; border: 0; overflow: hidden;
  clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; }
.facademia-selo { flex: none; width: 44px; height: 44px; border-radius: 50%; display: grid; place-items: center;
  background: #F6F4F1; }
.facademia-selo img { width: 25px; height: auto; display: block; }
.facademia-texto { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px; text-wrap: pretty; }
.facademia-tit { font-size: 14.5px; font-weight: 600; line-height: 1.3; color: #fff; }
.facademia-apoio { font-size: 13px; line-height: 1.4; color: rgba(234,240,245,.8); }
.facademia-indicador { flex: none; width: 24px; height: 24px; border-radius: 50%; display: grid; place-items: center;
  border: 1.5px solid rgba(255,255,255,.5); color: #0E1B28;
  transition: background var(--dur-1) var(--ease-out), border-color var(--dur-1) var(--ease-out); }
.facademia-indicador svg { opacity: 0; transform: scale(.6);
  transition: opacity var(--dur-1) var(--ease-out), transform var(--dur-2) var(--ease-out); }
.facademia-cartao:hover .facademia-indicador { border-color: rgba(255,255,255,.7); }
.facademia-input:checked ~ .facademia-indicador { background: #E8776F; border-color: #E8776F; }
.facademia-input:checked ~ .facademia-indicador svg { opacity: 1; transform: none; }
.facademia-curso { display: grid; grid-template-rows: 0fr; opacity: 0; visibility: hidden;
  transition: grid-template-rows var(--dur-3) var(--ease-out), opacity var(--dur-2) var(--ease-out), visibility 0s linear var(--dur-3); }
.facademia:has(.facademia-input:checked) .facademia-curso { grid-template-rows: 1fr; opacity: 1; visibility: visible;
  transition: grid-template-rows var(--dur-3) var(--ease-out), opacity var(--dur-2) var(--ease-out) 60ms, visibility 0s; }
.facademia-curso-dentro { min-height: 0; overflow: hidden; }
.facademia-curso .field { padding: 14px 16px 16px; border-top: 1px solid rgba(255,255,255,.1); }
@media (max-width: 560px) {
  .facademia-cartao { gap: 12px; padding: 12px 14px; }
  .facademia-selo { width: 40px; height: 40px; }
  .facademia-curso .field { padding: 12px 14px 14px; }
}
@media (prefers-reduced-motion: reduce) {
  .facademia, .facademia-indicador, .facademia-indicador svg, .facademia-curso,
  .facademia:has(.facademia-input:checked) .facademia-curso { transition: none; }
}
form.enviando .facademia-cartao { opacity: .7; cursor: progress; }


.fcard .btn { width: 100%; justify-content: center; margin-top: 22px; }
.trust { margin: 12px 0 0; font-family: var(--font-mono); font-size: 10.5px; letter-spacing: .08em;
  text-align: center; color: rgba(234,240,245,.5); }

/* O enviado troca o formulário, e não aparece por cima dele. */
.ok { display: none; text-align: center; padding: 38px 10px; }
.ok .ring { width: 64px; height: 64px; border-radius: 50%; margin: 0 auto 16px; display: grid; place-items: center;
  background: rgba(232,119,111,.16); color: #E8776F; }
.ok h2 { font-family: var(--font-display); font-size: 1.5rem; margin: 0 0 6px; color: #fff; }
.ok p { color: rgba(234,240,245,.72); margin: 0; font-size: 14.5px; }
form.sent { display: none; }
form.sent + .ok { display: block; }

/* 🔴 A armadilha some da tela e do leitor, mas NÃO com `display:none` nem
   `hidden`: robô que varre o HTML pula campo escondido assim. Fora da vista
   com posição, e ainda focável só por programa (`tabindex="-1"`), é o que
   ele preenche sem perceber. */
.armadilha {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

/* O erro do envio, dentro do cartão. Ele nasce vazio e só ganha texto quando
   o servidor recusa — `:empty` mantém o espaço fora do layout até lá. */
.ferro {
  margin: 12px 0 0;
  border: 1px solid rgba(232, 119, 111, .5);
  border-radius: 10px;
  background: rgba(232, 119, 111, .12);
  padding: 9px 12px;
  color: #FFD9D5;
  font-size: 13px;
  text-align: center;
}

.ferro:empty { display: none; }

/* Enquanto manda, o cartão não pisca: só o botão muda de rótulo e o cursor
   avisa que não é hora de clicar de novo. */
form.enviando .field input { opacity: .7; }
form.enviando button[type="submit"] { cursor: progress; }

/* O widget entra como mais uma linha do cartão: largura inteira, o mesmo
   raio dos campos e o mesmo espaço entre eles. A `min-height` reserva o
   lugar antes de ele chegar, para o botão não pular quando carrega. */
.fundador-captcha { display: block; width: 100%; margin-top: 16px; min-height: 66px; }
.fundador-captcha iframe { border-radius: 11px; }

/* O aviso fala em voz de rodapé de campo, alinhado com os rótulos, e não
   centralizado no meio do cartão como se fosse um erro do formulário. */
.captcha-status { margin: 8px 0 0; font-family: var(--font-mono); font-size: 10.5px;
  letter-spacing: .06em; text-transform: uppercase; color: rgba(234,240,245,.55); }
.captcha-status:empty { display: none; }
.fcard button[type="submit"]:disabled { opacity: .55; cursor: not-allowed; }