/* ==========================================================
   Formulário de candidatura do Sinta-se AMF
   Usado igual em index.html e assista.html — mexer aqui muda
   as duas páginas. A marcação é gerada por js/candidatura.js.

   Depende dos tokens de cor definidos em cada página
   (--orange, --orange-2, --ease) e das classes .field, .card,
   .kicker, .h-display, .body-copy, .serif-i, .btn-orange.
   ========================================================== */

.pergunta + .pergunta { margin-top: 2rem; }
.pergunta-titulo { font-weight: 700; color: #14100A; line-height: 1.45; }
.pergunta-ajuda  { margin-top: .35rem; font-size: .82rem; color: #4A3A20; line-height: 1.5; }
.obrigatorio     { color: var(--orange); font-weight: 800; }

/* Cada alternativa é um cartão clicável. O input nativo continua
   presente (só visualmente escondido), então teclado, leitor de tela
   e validação do navegador seguem funcionando. */
.opcao {
  display: flex; align-items: flex-start; gap: .75rem;
  padding: .8rem .9rem; border-radius: .85rem;
  background: #FFFDF7; border: 1.5px solid rgba(20,16,10,.14);
  cursor: pointer; line-height: 1.45; font-size: .88rem;
  transition: border-color .25s var(--ease), background .25s var(--ease), box-shadow .25s var(--ease);
}
.opcao + .opcao { margin-top: .5rem; }
.opcao:hover { border-color: rgba(238,78,0,.5); background: #fff; }
.opcao:has(input:checked) {
  border-color: var(--orange); background: #FFF6E8;
  box-shadow: 0 0 0 3px rgba(238,78,0,.14);
}
.opcao:has(input:focus-visible) { outline: 3px solid #14100A; outline-offset: 2px; }

.opcao input { position: absolute; opacity: 0; width: 0; height: 0; }
.opcao .marca {
  flex-shrink: 0; margin-top: .12rem;
  height: 1.15rem; width: 1.15rem;
  border: 2px solid rgba(20,16,10,.3);
  display: grid; place-items: center;
  transition: border-color .25s var(--ease), background .25s var(--ease);
}
.opcao .marca.radio { border-radius: 9999px; }
.opcao .marca.check { border-radius: .35rem; }
.opcao .marca::after {
  content: ""; opacity: 0;
  transition: opacity .2s var(--ease), transform .2s var(--ease);
  transform: scale(.5);
}
.opcao .marca.radio::after { height: .55rem; width: .55rem; border-radius: 9999px; background: #fff; }
.opcao .marca.check::after {
  height: .62rem; width: .35rem; margin-top: -.15rem;
  border-right: 2.5px solid #fff; border-bottom: 2.5px solid #fff;
  transform: rotate(45deg) scale(.5);
}
.opcao:has(input:checked) .marca { border-color: var(--orange); background: var(--orange); }
.opcao:has(input:checked) .marca::after { opacity: 1; transform: scale(1); }
.opcao:has(input:checked) .marca.check::after { transform: rotate(45deg) scale(1); }

/* Escala de 1 a 5 — os cinco cabem lado a lado até no celular estreito */
.escala { display: grid; grid-template-columns: repeat(5, 1fr); gap: .45rem; }
.escala .opcao {
  flex-direction: column; align-items: center; justify-content: center;
  gap: .35rem; padding: .8rem .3rem; text-align: center;
  font-weight: 800; font-size: 1rem;
}
.escala .opcao .marca { display: none; }

textarea.field { min-height: 7rem; resize: vertical; line-height: 1.6; }

/* Campo reprovado na validação da seção */
.invalido,
.opcoes-invalidas .opcao {
  border-color: #C93F00;
  box-shadow: 0 0 0 3px rgba(201,63,0,.16);
}

.secao-passo { animation: passoEntra .38s var(--ease); }
@keyframes passoEntra { from { opacity: 0; transform: translateX(14px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .secao-passo { animation: none; } }