/* ============================================================
   Nós pela Educação — página de inscrição em aula aberta
   Depende de base.css.

   Uma pergunta por tela, no formato conversa. 99% das inscrições
   vêm de celular, então o layout é pensado para o polegar: campo
   na altura confortável, botão grande, nada de rolagem dentro da
   pergunta.
   ============================================================ */

/* ---------- Capa ---------- */
.aula-capa {
  padding-block: clamp(2rem, 7vw, 4.5rem) clamp(1.5rem, 5vw, 3rem);
}
.aula-capa .wrap {
  max-width: 720px;
}
.aula-capa h1 {
  font-size: clamp(1.9rem, 6vw, 3.1rem);
  font-weight: 380;
  margin: 0.6rem 0 0.9rem;
}
.aula-chamada {
  font-family: var(--font-display);
  font-weight: 380;
  font-size: clamp(1.05rem, 3.2vw, 1.32rem);
  line-height: 1.4;
  color: var(--muted);
  margin: 0 0 1.8rem;
}

.aula-quando {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem;
  list-style: none;
  margin: 0 0 2rem;
  padding: 0;
}
.aula-quando li {
  display: inline-flex;
  align-items: center;
  gap: 0.5em;
  background: var(--paper-card);
  border: 1px solid var(--line);
  border-radius: 100px;
  padding: 0.5em 1em;
  font-size: 0.92rem;
}
.aula-quando svg {
  width: 16px;
  height: 16px;
  flex: 0 0 auto;
  color: var(--sage-ink);
}
.aula-quando b {
  font-weight: 600;
}

/* CTA de inscrição no topo — logo após título/data, sem precisar rolar. */
.aula-inscrever-topo {
  margin: 0 0 2rem;
}

.aula-formadora {
  display: flex;
  align-items: center;
  gap: 0.9rem;
  margin: 0 0 2rem;
}
.aula-formadora img {
  width: 60px;
  height: 60px;
  border-radius: 50%;
  object-fit: cover;
  object-position: center top;
  flex: 0 0 auto;
}
.aula-formadora .quem {
  font-family: var(--font-mono);
  font-size: 0.7rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--muted);
  margin: 0 0 0.15rem;
}
.aula-formadora .nome {
  font-family: var(--font-display);
  font-size: 1.15rem;
  font-weight: 460;
  margin: 0;
}

.aula-texto p {
  font-size: 1.06rem;
  margin: 0 0 1.15rem;
}

.aula-combinados {
  list-style: none;
  margin: 1.8rem 0 0;
  padding: 1.3rem 1.4rem;
  background: var(--paper-card);
  border: 1px solid var(--line);
  border-left: 4px solid var(--sage);
  border-radius: var(--radius);
}
.aula-combinados li + li {
  margin-top: 0.85rem;
}
.aula-combinados .data {
  display: block;
  font-family: var(--font-mono);
  font-size: 0.72rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--sage-ink);
  margin-bottom: 0.15rem;
}

/* ---------- Chamada para inscrição ---------- */
.aula-cta {
  padding-block: clamp(1.5rem, 4vw, 2.5rem) clamp(3rem, 8vw, 5rem);
}
.aula-cta .wrap {
  max-width: 720px;
}
.aula-cta .btn {
  font-size: 1.05rem;
  padding: 1em 2em;
}
.aula-encerrada {
  background: var(--paper-card);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 1.5rem;
}
.aula-encerrada h2 {
  font-size: 1.3rem;
  margin-bottom: 0.6rem;
}
.aula-encerrada p {
  color: var(--muted);
  margin: 0;
}

/* ============================================================
   Formulário em tela cheia
   ============================================================ */
.form-aula {
  position: fixed;
  inset: 0;
  z-index: 100;
  background: var(--paper);
  display: none;
  flex-direction: column;
  /* dvh acompanha a barra de endereço do navegador no celular */
  height: 100dvh;
}
.form-aula.aberto {
  display: flex;
}

.fa-topo {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.6rem var(--gutter);
  border-bottom: 1px solid var(--line);
}
.fa-sair {
  width: var(--touch);
  height: var(--touch);
  display: grid;
  place-items: center;
  border: none;
  background: none;
  color: var(--muted);
  cursor: pointer;
  border-radius: 8px;
  flex: 0 0 auto;
}
.fa-sair:hover {
  color: var(--petrol);
  background: color-mix(in srgb, var(--petrol) 7%, transparent);
}
.fa-titulo {
  font-family: var(--font-display);
  font-size: 0.98rem;
  font-weight: 460;
  margin: 0;
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.fa-contador {
  font-family: var(--font-mono);
  font-size: 0.72rem;
  color: var(--muted);
  flex: 0 0 auto;
}

.fa-progresso {
  flex: 0 0 auto;
  height: 3px;
  background: var(--line);
}
.fa-progresso span {
  display: block;
  height: 100%;
  width: 0;
  background: var(--sage-ink);
  transition: width 0.35s ease;
}

.fa-palco {
  flex: 1 1 auto;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  padding: 1.5rem var(--gutter);
}
/* margin:auto centraliza o passo quando cabe na tela e, quando ele é mais
   alto que a área visível, colapsa para 0 — deixando o topo rolar sem ficar
   escondido atrás da barra de progresso. */
.fa-passos {
  width: 100%;
  max-width: 620px;
  margin: auto;
}

.fa-passo {
  display: none;
  /* fieldset traz borda e recuo próprios do navegador */
  border: 0;
  padding: 0;
  margin: 0;
  min-width: 0;
}
.fa-passo.ativo {
  display: block;
}
@media (prefers-reduced-motion: no-preference) {
  .fa-passo.ativo {
    animation: passoEntra 0.32s ease both;
  }
  @keyframes passoEntra {
    from {
      opacity: 0;
      transform: translateY(14px);
    }
    to {
      opacity: 1;
      transform: none;
    }
  }
}

.fa-numero {
  font-family: var(--font-mono);
  font-size: 0.72rem;
  letter-spacing: 0.12em;
  color: var(--sage-ink);
  display: block;
  margin-bottom: 0.5rem;
}
.fa-pergunta {
  font-family: var(--font-display);
  font-size: clamp(1.5rem, 5.5vw, 2.1rem);
  font-weight: 380;
  line-height: 1.2;
  margin: 0 0 0.5rem;
}
.fa-obrigatorio {
  color: var(--sage-ink);
}
.fa-ajuda {
  color: var(--muted);
  font-size: 0.98rem;
  margin: 0 0 1.5rem;
}

/* ---------- Campos ---------- */
.fa-campo input[type="text"],
.fa-campo input[type="email"],
.fa-campo input[type="tel"],
.fa-campo select,
.fa-campo textarea {
  width: 100%;
  font-family: var(--font-body);
  /* 16px impede o zoom automático do Safari no iOS ao focar */
  font-size: 1.15rem;
  padding: 0.7em 0;
  border: none;
  border-bottom: 2px solid var(--line);
  border-radius: 0;
  background: transparent;
  color: var(--petrol);
  transition: border-color 0.2s;
}
.fa-campo textarea {
  resize: vertical;
  min-height: 5rem;
}
.fa-campo select {
  padding-inline: 0;
  appearance: none;
  background-image: linear-gradient(45deg, transparent 50%, var(--muted) 50%),
    linear-gradient(135deg, var(--muted) 50%, transparent 50%);
  background-position:
    calc(100% - 14px) calc(1.15em),
    calc(100% - 8px) calc(1.15em);
  background-size: 6px 6px, 6px 6px;
  background-repeat: no-repeat;
}
.fa-campo input:focus,
.fa-campo select:focus,
.fa-campo textarea:focus {
  outline: none;
  border-bottom-color: var(--sage-ink);
}
.fa-campo input::placeholder,
.fa-campo textarea::placeholder {
  color: color-mix(in srgb, var(--muted) 55%, transparent);
}

/* ---------- Opções de escolha ---------- */
.fa-opcoes {
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
}
.fa-opcao {
  display: flex;
  align-items: flex-start;
  gap: 0.8rem;
  min-height: var(--touch);
  padding: 0.85rem 1rem;
  border: 1.5px solid var(--line);
  border-radius: 12px;
  background: var(--paper-card);
  cursor: pointer;
  transition:
    border-color 0.15s,
    background 0.15s;
}
.fa-opcao:hover {
  border-color: var(--sage);
}
.fa-opcao input {
  /* O input real fica acessível ao teclado e ao leitor de tela,
     mas o desenho é do quadradinho ao lado. */
  position: absolute;
  opacity: 0;
  width: 1px;
  height: 1px;
}
.fa-marca {
  flex: 0 0 auto;
  width: 22px;
  height: 22px;
  margin-top: 0.1rem;
  border: 1.5px solid var(--slate);
  display: grid;
  place-items: center;
  color: transparent;
  transition:
    background 0.15s,
    border-color 0.15s,
    color 0.15s;
}
.fa-opcao.tipo-unica .fa-marca {
  border-radius: 50%;
}
.fa-opcao.tipo-multipla .fa-marca {
  border-radius: 6px;
}
.fa-marca svg {
  width: 13px;
  height: 13px;
}
.fa-opcao:has(input:checked) {
  border-color: var(--sage-ink);
  background: color-mix(in srgb, var(--sage) 14%, var(--paper-card));
}
.fa-opcao:has(input:checked) .fa-marca {
  background: var(--sage-ink);
  border-color: var(--sage-ink);
  color: var(--paper);
}
.fa-opcao:has(input:focus-visible) {
  outline: 2.5px solid var(--sage-ink);
  outline-offset: 2px;
}
.fa-opcao .rotulo {
  font-size: 1rem;
  line-height: 1.35;
}
.fa-outro {
  margin-top: 0.2rem;
}
.fa-outro input {
  font-size: 1rem !important;
}

.fa-erro {
  color: #a8503a;
  font-size: 0.92rem;
  margin: 0.85rem 0 0;
  min-height: 1.2em;
}

/* ---------- Rodapé de navegação ---------- */
.fa-rodape {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.9rem var(--gutter);
  /* respeita a área do gesto de voltar do iPhone */
  padding-bottom: max(0.9rem, env(safe-area-inset-bottom));
  border-top: 1px solid var(--line);
  background: var(--paper);
}
.fa-voltar {
  min-height: var(--touch);
  padding: 0.6em 1em;
  border: 1.5px solid var(--line);
  border-radius: 100px;
  background: transparent;
  color: var(--muted);
  cursor: pointer;
  font-size: 0.92rem;
  flex: 0 0 auto;
}
.fa-voltar:hover {
  border-color: var(--petrol);
  color: var(--petrol);
}
.fa-avancar {
  flex: 1;
  min-height: var(--touch);
  justify-content: center;
  font-size: 1rem;
}
.fa-dica {
  display: none;
  font-family: var(--font-mono);
  font-size: 0.68rem;
  color: var(--muted);
  flex: 0 0 auto;
  padding-left: 0.5rem;
}
/* A dica de teclado só faz sentido em quem tem teclado */
@media (hover: hover) and (min-width: 700px) {
  .fa-dica {
    display: block;
  }
  .fa-avancar {
    flex: 0 0 auto;
    padding-inline: 2.2em;
  }
}

/* ---------- Fim: sucesso ---------- */
/* Fica fora da contagem de passos: não é uma pergunta. */
.fa-fim {
  display: none;
  text-align: center;
  max-width: 460px;
  margin-inline: auto;
}
.fa-fim.ativo {
  display: block;
}
.fa-selo {
  width: 68px;
  height: 68px;
  margin: 0 auto 1.4rem;
  border-radius: 50%;
  background: color-mix(in srgb, var(--sage) 26%, transparent);
  color: var(--sage-ink);
  display: grid;
  place-items: center;
}
.fa-selo svg {
  width: 32px;
  height: 32px;
}
@media (prefers-reduced-motion: no-preference) {
  .fa-fim.ativo .fa-selo {
    animation: seloEntra 0.5s cubic-bezier(0.2, 1.3, 0.5, 1) both;
  }
  @keyframes seloEntra {
    from {
      transform: scale(0.5);
      opacity: 0;
    }
    to {
      transform: none;
      opacity: 1;
    }
  }
}
.fa-fim h2 {
  font-size: clamp(1.5rem, 5vw, 2rem);
  font-weight: 380;
  margin-bottom: 0.8rem;
}
.fa-fim p {
  color: var(--muted);
  margin-bottom: 0.8rem;
}
.fa-fim .destaque {
  color: var(--petrol);
  font-weight: 600;
}
.fa-fim .btn {
  margin-top: 1rem;
}

@media (max-width: 400px) {
  .fa-titulo {
    display: none;
  }
}