/*
  estilos.css
  ------------------------------------------------------------------
  Arquivo unico combinando variables.css + reset.css + components.css
  + layout.css, nessa ordem -- reduz de 4 requisicoes HTTP pra 1,
  diminuindo o tempo de bloqueio de renderizacao (apontado pelo
  Google PageSpeed Insights). A separacao por responsabilidade
  continua existindo como secoes comentadas abaixo, na mesma ordem
  de antes: tokens -> base -> componentes reutilizaveis -> montagem
  de cada secao da pagina. Editar a secao correspondente conforme
  o que precisar mudar.
*/

/* =================================================================
   SECAO 1: VARIABLES (tokens de cor, espacamento, tipografia)
   ================================================================= */

/*
  variables.css
  ------------------------------------------------------------------
  Ponto único de verdade para cores, espaçamentos e tipografia.
  Regra do projeto: nenhuma cor "solta" (hexadecimal direto) deve
  aparecer em outros arquivos CSS — sempre usar uma destas variáveis.
  Isso permite trocar a identidade visual inteira mudando só este arquivo.
  Fonte: .docs/paleta_cores_seufuturo.pdf
*/

:root {
  /* Cores da marca (nomes iguais aos da paleta oficial) */
  --cor-azul-marinho: #101b63;       /* títulos, textos fortes, rodapé */
  --cor-azul-institucional: #12399b; /* ícones secundários, detalhes de confiança */
  --cor-azul-vivo: #2588f5;          /* chapéu de formatura, detalhes ilustrativos */
  --cor-roxo-principal: #5a2ae8;     /* botões, destaques, números das etapas */
  --cor-roxo-claro: #7650f5;         /* gradientes, fundos circulares suaves */
  --cor-verde-whatsapp: #159447;     /* ícone whatsapp, confirmações, "gratuito" */
  --cor-amarelo-destaque: #ffc400;   /* selos, lâmpada, setas de destaque */
  --cor-rosa-coral: #ff4e79;         /* corações, pequenos detalhes afetivos */
  --cor-lavanda-clara: #f1f0ff;      /* fundos circulares dos ícones, caixas suaves */
  --cor-cinza-azulado-claro: #f7f8fc;/* fundo geral das seções */
  --cor-branco: #ffffff;             /* cartões, contraste */
  --cor-texto-secundario: #28335f;   /* parágrafos e textos auxiliares */

  /* Gradiente usado no botão principal e em destaques (roxo principal -> roxo claro) */
  --gradiente-roxo: linear-gradient(135deg, var(--cor-roxo-principal), var(--cor-roxo-claro));

  /* Tipografia: uma única família de fonte para manter consistência visual */
  --fonte-principal: "Poppins", "Segoe UI", Arial, sans-serif;

  /* Escala de espaçamento (em rem) usada em margens/paddings do projeto inteiro */
  --espaco-xs: 0.5rem;
  --espaco-sm: 1rem;
  --espaco-md: 1.5rem;
  --espaco-lg: 2.5rem;
  --espaco-xl: 4rem;
  --espaco-xxl: 6rem;

  /* Padding vertical padrão de cada <section>. Menor no celular (rolagem
     custa caro em tela pequena) e maior no desktop — valor redefinido
     dentro dos breakpoints em layout.css, então toda seção que usar esta
     variável escala junto, sem precisar repetir a regra em cada uma. */
  --espaco-secao: 2.5rem;

  /* Espaçamento reduzido usado só nas bordas onde duas seções vizinhas
     foram propositalmente aproximadas (ex.: fim de "Como funciona?" +
     início de "Último passo"). Variável própria, separada de --espaco-md,
     pra ajustar esse padrão específico num lugar só, sem afetar outros
     usos de --espaco-md (gap entre etapas, campos de formulário etc.). */
  --espaco-transicao-secao: 1rem;

  /* Raios de borda padronizados para botões, cartões e badges */
  --raio-botao: 0.75rem;
  --raio-cartao: 1.25rem;
  --raio-circulo: 50%;

  /* Largura máxima de conteúdo, para o texto não esticar demais em telas grandes */
  --largura-maxima-conteudo: 1200px;

  /* Sombra suave reutilizada em cartões e botões */
  --sombra-suave: 0 10px 30px rgba(16, 27, 99, 0.08);
  --sombra-botao: 0 12px 24px rgba(90, 42, 232, 0.35);
}

/* =================================================================
   SECAO 2: RESET (ajustes basicos de navegador)
   ================================================================= */

/*
  reset.css
  ------------------------------------------------------------------
  Reset mínimo: zera margens/paddings padrão do navegador e define
  box-sizing consistente, para o layout não ter surpresas de um
  navegador para o outro. Também define a base tipográfica do site.
*/

*,
*::before,
*::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  /* Permite usar "rem" de forma previsível (1rem = 16px) */
  font-size: 16px;
  scroll-behavior: smooth;
}

body {
  font-family: var(--fonte-principal);
  color: var(--cor-texto-secundario);
  background-color: var(--cor-branco);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

img {
  max-width: 100%;
  display: block;
}

a {
  color: inherit;
  text-decoration: none;
}

button {
  font-family: inherit;
  cursor: pointer;
  border: none;
  background: none;
}

ul {
  list-style: none;
}

h1,
h2,
h3 {
  color: var(--cor-azul-marinho);
  font-weight: 700;
  line-height: 1.25;
}

/* Facilita a navegação por teclado sem deixar um contorno feio em cliques de mouse */
:focus-visible {
  outline: 3px solid var(--cor-azul-vivo);
  outline-offset: 2px;
}

/* =================================================================
   SECAO 3: COMPONENTS (pecas reutilizaveis: botoes, selos, cartoes)
   ================================================================= */

/*
  components.css
  ------------------------------------------------------------------
  Peças reutilizáveis da interface: botões, selos (badges), círculos
  de ícone, cartões e o aviso de sucesso. Cada seção do layout.css
  monta a página combinando estes componentes.
*/

/* Botão principal (roxo, com gradiente) usado no CTA "FAZER TESTE AGORA" */
.botao-primario {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--espaco-xs);
  padding: 1rem 2rem;
  background: var(--gradiente-roxo);
  color: var(--cor-branco);
  font-weight: 700;
  font-size: 1rem;
  letter-spacing: 0.02em;
  border-radius: var(--raio-botao);
  box-shadow: var(--sombra-botao);
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}

.botao-primario:hover,
.botao-primario:focus-visible {
  transform: translateY(-2px);
  box-shadow: 0 16px 30px rgba(90, 42, 232, 0.45);
}

.botao-primario svg {
  width: 1.25rem;
  height: 1.25rem;
}

/* Variação grande e horizontal (ocupa a largura do container até um
   limite), usada nos CTAs de reforço fora do hero. */
.botao-primario--grande {
  width: 100%;
  max-width: 480px;
  padding: 1.15rem 2rem;
  font-size: 1.1rem;
}

/* Botão secundário (contorno), usado na página de placeholder do teste */
.botao-secundario {
  display: inline-flex;
  align-items: center;
  gap: var(--espaco-xs);
  padding: 0.85rem 1.75rem;
  border: 2px solid var(--cor-roxo-principal);
  color: var(--cor-roxo-principal);
  font-weight: 700;
  border-radius: var(--raio-botao);
  transition: background-color 0.15s ease, color 0.15s ease;
}

.botao-secundario:hover,
.botao-secundario:focus-visible {
  background-color: var(--cor-roxo-principal);
  color: var(--cor-branco);
}

.botao-secundario svg {
  width: 1.25rem;
  height: 1.25rem;
  flex-shrink: 0;
}

/* Selo pequeno com ícone + texto (ex: "Teste rápido e gratuito") */
.selo {
  display: flex;
  align-items: center;
  gap: var(--espaco-xs);
}

.selo__icone {
  width: 2.75rem;
  height: 2.75rem;
  flex-shrink: 0;
}

.selo__texto {
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--cor-azul-marinho);
  line-height: 1.3;
}

/* Círculo colorido que serve de fundo para um ícone de linha */
.circulo-icone {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 5rem;
  height: 5rem;
  border-radius: var(--raio-circulo);
  background-color: var(--cor-lavanda-clara);
  flex-shrink: 0;
}

.circulo-icone img,
.circulo-icone svg {
  width: 2.75rem;
  height: 2.75rem;
  object-fit: contain;
}

/* Numerinho roxo (1, 2, 3, 4) que fica sobre o círculo de ícone nas etapas */
.numero-etapa {
  position: absolute;
  top: -0.4rem;
  left: -0.4rem;
  width: 1.75rem;
  height: 1.75rem;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--gradiente-roxo);
  color: var(--cor-branco);
  font-weight: 700;
  font-size: 0.85rem;
  border-radius: var(--raio-circulo);
  border: 2px solid var(--cor-branco);
}

/* Cartão branco genérico com sombra suave, usado nos benefícios e etapas */
.cartao {
  background-color: var(--cor-branco);
  border-radius: var(--raio-cartao);
  box-shadow: var(--sombra-suave);
}

/* Rótulo pequeno em maiúsculas (ex: "ÚLTIMO PASSO") acima de um título de seção */
.rotulo-secao {
  display: inline-block;
  color: var(--cor-roxo-principal);
  font-weight: 700;
  font-size: 0.85rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  margin-bottom: var(--espaco-xs);
}

/* Caixa verde clara de confirmação (ex: "o resultado é enviado via WhatsApp") */
.aviso-sucesso {
  display: flex;
  align-items: center;
  gap: var(--espaco-sm);
  background-color: #e9f9ee;
  border: 1px solid #bfe8cc;
  color: var(--cor-azul-marinho);
  padding: var(--espaco-sm) var(--espaco-md);
  border-radius: var(--raio-cartao);
  font-size: 0.95rem;
}

.aviso-sucesso__icone {
  width: 2.25rem;
  height: 2.25rem;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: var(--cor-verde-whatsapp);
  color: var(--cor-branco);
  border-radius: var(--raio-circulo);
}

.aviso-sucesso__icone svg {
  width: 1.25rem;
  height: 1.25rem;
}

/* =================================================================
   SECAO 4: LAYOUT (montagem de cada secao da pagina)
   ================================================================= */

/*
  layout.css
  ------------------------------------------------------------------
  Estrutura visual de cada seção da página (header, hero, "como
  funciona", "último passo", benefícios, rodapé). Mobile-first: os
  estilos "soltos" valem para telas pequenas (a maioria do tráfego
  de anúncios do Meta chega pelo navegador do Instagram/Facebook no
  celular) e os blocos dentro de @media ajustam para telas maiores.
*/

/* Container central que limita a largura do conteúdo em telas grandes */
.container {
  width: 100%;
  max-width: var(--largura-maxima-conteudo);
  margin: 0 auto;
  padding: 0 var(--espaco-md);
}

/* ================= CABEÇALHO ================= */

.cabecalho {
  padding: var(--espaco-sm) 0;
  background-color: var(--cor-branco);
}

.cabecalho .container {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--espaco-sm);
  flex-wrap: wrap;
}

.logo-marca {
  display: flex;
  align-items: center;
  gap: var(--espaco-xs);
}

.logo-marca__icone {
  width: 2.5rem;
  height: 2.5rem;
  object-fit: contain;
}

.logo-marca__nome {
  font-weight: 800;
  font-size: 1.1rem;
  color: var(--cor-azul-marinho);
  line-height: 1.1;
}

.logo-marca__nome span {
  color: var(--cor-roxo-principal);
}

.logo-marca__subtitulo {
  display: block;
  font-size: 0.65rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  color: var(--cor-texto-secundario);
}

/* No mobile o cabeçalho não tem espaço pra logo e contato lado a lado,
   então o contato quebra pra uma segunda linha — nesse caso, melhor
   centralizado do que preso à esquerda. Do tablet em diante os dois
   cabem na mesma linha, então volta ao alinhamento normal (ver
   breakpoint ≥768px). */
.contato-duvidas {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--espaco-xs);
  font-weight: 600;
  font-size: 0.9rem;
  color: var(--cor-azul-marinho);
  width: 100%;
}

.contato-duvidas__icone-whatsapp {
  width: 1.75rem;
  height: 1.75rem;
}

/* ================= HERO (dobra inicial) ================= */

.hero {
  /* Padding-top menor que o padrão no mobile: logo abaixo de um
     cabeçalho já enxuto, não precisa de tanto respiro extra. Volta ao
     padding padrão em telas maiores (ver breakpoints). */
  padding: var(--espaco-md) 0 var(--espaco-secao);
  overflow: hidden;
}

.hero .container {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--espaco-xl);
  align-items: center;
}

.hero__coluna-texto {
  display: flex;
  flex-direction: column;
}

/* No mobile, os selos e o botão principal ficam centralizados (o
   título/parágrafo continuam à esquerda) — melhora o equilíbrio visual
   numa coluna estreita. No desktop voltam a alinhar à esquerda, próximos
   do título (ver breakpoint ≥1024px). */
.hero__selos,
.hero__coluna-texto .botao-primario {
  align-self: center;
}

.hero__titulo {
  font-size: 2rem;
  margin-bottom: var(--espaco-sm);
}

.hero__paragrafo {
  font-size: 1.05rem;
  margin-bottom: var(--espaco-md);
  max-width: 42ch;
}

.hero__paragrafo strong {
  color: var(--cor-roxo-principal);
}

.hero__selos {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--espaco-md);
  margin-bottom: var(--espaco-lg);
}

.hero__coluna-imagem {
  position: relative;
  display: flex;
  justify-content: center;
}

.hero__foto {
  width: 100%;
  max-width: 420px;
  /* Sem isso, o atributo height="825" do HTML (adicionado pra ajudar o
     Google PageSpeed a reservar espaço antes da imagem carregar) vira a
     altura de verdade, esticando a foto — height:auto deixa a altura
     escalar junto com a largura, mantendo a proporção original. */
  height: auto;
}

/* Ícones decorativos que ficam soltos ao redor da ilustração da estudante.
   A engrenagem não existe em nenhum pacote de ícones disponível, então
   continua desenhada à mão em SVG usando a paleta de cores do projeto. */
.hero__decoracao {
  position: absolute;
  width: 3.75rem;
  height: 3.75rem;
  color: var(--cor-azul-institucional);
}

.hero__decoracao--alvo {
  top: 18%;
  right: 2%;
}

.hero__decoracao--engrenagem {
  bottom: 12%;
  right: -2%;
  color: var(--cor-roxo-claro);
}

/* ================= "PARA QUEM É ESTE TESTE?" ================= */

.secao-publico {
  /* Padding-bottom usa --espaco-transicao-secao: encurta de propósito a
     distância até a seção "Como funciona?" logo abaixo. */
  padding: var(--espaco-secao) 0 var(--espaco-transicao-secao);
  text-align: center;
  background-color: var(--cor-cinza-azulado-claro);
}

.secao-publico__titulo {
  font-size: 1.6rem;
  margin-bottom: var(--espaco-sm);
}

.secao-publico__paragrafo {
  max-width: 60ch;
  margin: 0 auto;
}

/* ================= "COMO FUNCIONA?" ================= */

.secao-como-funciona {
  /* Padding-top e padding-bottom usam --espaco-transicao-secao: continua
     a aproximação com "Para quem é este teste?" (de um lado) e encurta a
     distância até "Último passo" (do outro). */
  padding: var(--espaco-transicao-secao) 0 var(--espaco-transicao-secao);
}

.como-funciona {
  background-color: var(--cor-lavanda-clara);
  border-radius: var(--raio-cartao);
  padding: var(--espaco-lg) var(--espaco-md);
}

.como-funciona__titulo {
  text-align: center;
  font-size: 1.6rem;
  margin-bottom: var(--espaco-lg);
}

.etapas {
  display: flex;
  flex-direction: column;
  gap: var(--espaco-md);
}

.etapa {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: var(--espaco-sm);
  max-width: 220px;
  margin: 0 auto;
}

.etapa__circulo-wrapper {
  position: relative;
}

.etapa__seta {
  display: none; /* as setas conectoras só aparecem em telas largas */
}

/* ================= "ÚLTIMO PASSO" (sem o formulário por enquanto) ================= */

.secao-ultimo-passo {
  /* Padding-top usa --espaco-transicao-secao: continua a aproximação com
     "Como funciona" iniciada no padding-bottom daquela seção. */
  padding: var(--espaco-transicao-secao) 0 var(--espaco-secao);
}

.ultimo-passo {
  max-width: 640px;
  margin: 0 auto;
  text-align: center;
}

.ultimo-passo__titulo {
  font-size: 1.8rem;
  margin-bottom: var(--espaco-sm);
}

.ultimo-passo__titulo span {
  color: var(--cor-roxo-principal);
}

.ultimo-passo__paragrafo {
  margin-bottom: var(--espaco-md);
}

/* ================= CTA FINAL (reforço) ================= */

.secao-cta-final {
  padding: 0 0 var(--espaco-secao);
  text-align: center;
}

/* ================= "POR QUE FAZER NOSSO TESTE?" ================= */

.secao-beneficios {
  padding: var(--espaco-secao) 0;
  background-color: var(--cor-cinza-azulado-claro);
}

.secao-beneficios__titulo {
  text-align: center;
  font-size: 1.6rem;
  margin-bottom: var(--espaco-xl);
}

.beneficios {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--espaco-lg);
}

.beneficio {
  display: flex;
  gap: var(--espaco-sm);
}

.beneficio__circulo {
  width: 3.75rem;
  height: 3.75rem;
}

.beneficio__circulo img,
.beneficio__circulo svg {
  width: 2rem;
  height: 2rem;
  object-fit: contain;
}

.beneficio__titulo {
  font-size: 1rem;
  margin-bottom: 0.25rem;
}

.beneficio__descricao {
  font-size: 0.9rem;
}

/* ================= RODAPÉ ================= */

.rodape {
  background-color: var(--cor-azul-marinho);
  color: var(--cor-branco);
  padding: var(--espaco-secao) 0;
}

.rodape .container {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--espaco-lg);
}

.rodape__logo .logo-marca__nome,
.rodape__logo .logo-marca__subtitulo {
  color: var(--cor-branco);
}

/* Sem isso, o "Futuro" continua com a cor roxa usada no cabeçalho (fundo
   branco lá) — no rodapé, escuro, essa combinação não passa no teste de
   contraste do WCAG (2,16:1, precisa de 4,5:1). Bug encontrado pelo
   Google PageSpeed Insights. */
.rodape__logo .logo-marca__nome span {
  color: var(--cor-branco);
}

/* No rodapé a marca ganha mais destaque que no cabeçalho, então o
   ícone/logo e o selo do WhatsApp aparecem maiores. */
.rodape__logo .logo-marca__icone {
  width: 3.25rem;
  height: 3.25rem;
}

.rodape__proposito {
  font-size: 0.9rem;
  opacity: 0.85;
  max-width: 32ch;
}

.rodape__titulo-coluna {
  font-size: 1rem;
  color: var(--cor-branco);
  margin-bottom: var(--espaco-xs);
}

.rodape__contato {
  display: flex;
  align-items: center;
  gap: var(--espaco-xs);
  font-weight: 600;
  margin-bottom: var(--espaco-xs);
}

.rodape__contato .contato-duvidas__icone-whatsapp {
  width: 2.25rem;
  height: 2.25rem;
}

.rodape__horario {
  font-size: 0.85rem;
  opacity: 0.8;
}

/* ================= PÁGINA "TESTE VOCACIONAL" — perguntas ================= */

.quiz {
  min-height: 70vh;
  display: flex;
  align-items: center;
  padding: var(--espaco-secao) 0;
}

/* Sem isso, o "display: flex" acima venceria o "display: none" que o
   atributo [hidden] pede — regra de autor sempre tem prioridade sobre a
   regra padrão do navegador, mesmo com a mesma especificidade. Por causa
   disso, quiz.hidden = true (em js/quizVocacional.js) não escondia
   visualmente as perguntas depois da última etapa. */
.quiz[hidden] {
  display: none;
}

.quiz__container {
  max-width: 640px;
}

/* Trilho cinza + barra roxa que cresce conforme a pessoa avança nas
   perguntas (largura definida via JS em js/quizVocacional.js). */
.quiz__progresso {
  width: 100%;
  height: 0.5rem;
  background-color: var(--cor-lavanda-clara);
  border-radius: var(--raio-botao);
  margin-bottom: var(--espaco-lg);
  overflow: hidden;
}

.quiz__progresso-barra {
  height: 100%;
  width: 0%;
  background: var(--gradiente-roxo);
  transition: width 0.25s ease;
}

.quiz__contador {
  display: block;
  color: var(--cor-roxo-principal);
  font-weight: 700;
  font-size: 0.85rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  margin-bottom: var(--espaco-xs);
}

/* Instrução da escala (1 a 5), mostrada só na primeira tela do quiz. */
.quiz__instrucao {
  font-size: 0.9rem;
  background-color: var(--cor-lavanda-clara);
  border-radius: var(--raio-botao);
  padding: var(--espaco-sm);
  margin-bottom: var(--espaco-lg);
}

.quiz__afirmacoes {
  display: flex;
  flex-direction: column;
  gap: var(--espaco-md);
  margin-bottom: var(--espaco-lg);
}

.quiz__afirmacao-texto {
  font-size: 1.05rem;
  font-weight: 600;
  color: var(--cor-azul-marinho);
  margin-bottom: var(--espaco-sm);
}

/* Lista vertical com as 5 opções sempre visíveis (não é um menu que
   esconde/mostra) — cada uma já mostra o próprio texto, em vez de só
   as duas pontas, pra ficar claro à primeira vista o que cada uma
   significa (era confuso no celular quando só "Discordo totalmente" e
   "Concordo totalmente" apareciam longe uma da outra). Igual em
   qualquer tamanho de tela, não só no mobile. */
.quiz__opcoes {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

/* Botão de largura total: área de toque confortável (mínimo de 44px de
   altura, recomendação de acessibilidade para elementos clicáveis) e
   fácil de ler no celular. */
.quiz__opcao {
  min-height: 44px;
  padding: 0.65rem 1rem;
  text-align: left;
  border: 2px solid var(--cor-lavanda-clara);
  border-radius: var(--raio-botao);
  background-color: var(--cor-branco);
  color: var(--cor-texto-secundario);
  font-size: 0.95rem;
  font-weight: 600;
  transition: border-color 0.15s ease, background-color 0.15s ease, color 0.15s ease;
}

.quiz__opcao:hover {
  border-color: var(--cor-roxo-claro);
}

.quiz__opcao--selecionada {
  border-color: var(--cor-roxo-principal);
  background: var(--gradiente-roxo);
  color: var(--cor-branco);
}

.quiz__navegacao {
  display: flex;
  justify-content: space-between;
  gap: var(--espaco-sm);
}

/* Some sem confirmação de tamanho quando desabilitado (evita duplo clique
   antes da alternativa ser escolhida). */
.quiz__navegacao .botao-primario:disabled {
  opacity: 0.5;
  cursor: not-allowed;
  transform: none;
}

/* ================= PÁGINA "TESTE VOCACIONAL" — escolaridade ================= */

/* Reaproveita o .cartao e o .quiz__opcoes/.quiz__opcao (lista vertical de
   opção única, sempre visível) já usados no quiz — mesmo padrão visual,
   sem duplicar CSS. */
.tela-escolaridade__cartao {
  max-width: 560px;
  margin: 0 auto;
  padding: var(--espaco-lg);
  text-align: center;
}

.tela-escolaridade__titulo {
  font-size: 1.3rem;
  color: var(--cor-azul-marinho);
  margin-bottom: var(--espaco-lg);
}

.tela-escolaridade__opcoes {
  text-align: left;
  margin-bottom: var(--espaco-lg);
}

.tela-escolaridade__botao {
  width: 100%;
}

/* ================= FORMULÁRIO "PREENCHA SEUS DADOS" ================= */

.formulario-resultado {
  padding: var(--espaco-secao) 0;
}

.formulario-resultado__cartao {
  max-width: 560px;
  margin: 0 auto;
  padding: var(--espaco-lg);
  text-align: center;
}

.formulario-resultado__titulo {
  font-size: 1.5rem;
}

.formulario-resultado__subtitulo {
  margin-bottom: var(--espaco-lg);
}

.formulario-resultado__form {
  text-align: left;
  display: flex;
  flex-direction: column;
  gap: var(--espaco-md);
}

.campo-formulario {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
  /* Sem isso, o navegador não deixa o campo encolher abaixo da largura
     "natural" do texto do input/select, mesmo a coluna do grid sendo
     menor — o campo vazava pra fora do cartão (bug já encontrado e
     corrigido uma vez). */
  min-width: 0;
}

.campo-formulario__rotulo {
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--cor-azul-marinho);
}

.campo-formulario input[type="text"],
.campo-formulario input[type="tel"],
.campo-formulario select {
  padding: 0.75rem 1rem;
  border: 1px solid var(--cor-lavanda-clara);
  border-radius: var(--raio-botao);
  font-family: var(--fonte-principal);
  font-size: 0.95rem;
  background-color: var(--cor-cinza-azulado-claro);
  color: var(--cor-texto-secundario);
}

.campo-formulario input[type="text"]:focus,
.campo-formulario input[type="tel"]:focus,
.campo-formulario select:focus {
  outline: none;
  border-color: var(--cor-roxo-principal);
  background-color: var(--cor-branco);
}

.campo-formulario__linha {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--espaco-md);
}

.campo-formulario--checkbox {
  flex-direction: row;
  align-items: flex-start;
  gap: 0.6rem;
  font-size: 0.85rem;
}

.campo-formulario--checkbox input {
  margin-top: 0.2rem;
  flex-shrink: 0;
}

.formulario-resultado__botao {
  width: 100%;
}

.formulario-resultado__privacidade {
  text-align: center;
  font-size: 0.8rem;
  opacity: 0.75;
}

/* ================= TELA FINAL (sucesso ou erro) ================= */

.resultado-final {
  padding: var(--espaco-secao) 0;
  min-height: 50vh;
}

.resultado-final__cartao {
  max-width: 560px;
  margin: 0 auto var(--espaco-md);
  padding: var(--espaco-lg);
  text-align: center;
}

.resultado-final__cartao h2 {
  font-size: 1.6rem;
  margin-bottom: var(--espaco-sm);
}

.resultado-final__cartao h3 {
  font-size: 1.1rem;
  margin: var(--espaco-md) 0 var(--espaco-xs);
}

.resultado-final__cartao p {
  margin-bottom: var(--espaco-sm);
}

/* Um cartão por área vencedora (formato combinado com o cliente em
   2026-07-22): texto alinhado à esquerda, diferente do cartão de aviso
   final (que continua centralizado). */
.resultado-final__area-cartao {
  text-align: left;
  border-top: 4px solid var(--cor-roxo-principal);
}

.resultado-final__area-cartao--secundaria {
  border-top-color: var(--cor-roxo-claro);
}

.resultado-final__intro {
  max-width: 560px;
  margin: 0 auto var(--espaco-md);
  text-align: center;
  color: var(--cor-texto-secundario);
}

.resultado-final__cursos-pills {
  display: flex;
  flex-wrap: wrap;
  gap: var(--espaco-xs);
  margin-top: var(--espaco-sm);
}

.pill-curso {
  display: inline-block;
  background-color: var(--cor-lavanda-clara);
  color: var(--cor-roxo-principal);
  font-size: 0.8rem;
  font-weight: 600;
  padding: 0.4rem 0.85rem;
  border-radius: 999px;
}

.resultado-final__cartao--sucesso .aviso-sucesso {
  text-align: left;
}

.resultado-final__botao-bolsa {
  margin-top: var(--espaco-md);
}

.resultado-final__disclaimer {
  margin-top: var(--espaco-md);
  font-size: 0.8rem;
  font-style: italic;
  text-align: left;
  opacity: 0.75;
}

.resultado-final__botao-refazer {
  width: 100%;
  margin-top: var(--espaco-md);
}

.resultado-final__cartao--erro {
  border-top: 4px solid var(--cor-rosa-coral);
}

/* ================= TELAS MÉDIAS EM DIANTE (tablets) ================= */

@media (min-width: 768px) {
  :root {
    --espaco-secao: 3rem;
  }

  .hero {
    padding-top: var(--espaco-secao);
  }

  .hero__titulo {
    font-size: 2.5rem;
  }

  .beneficios {
    grid-template-columns: repeat(2, 1fr);
  }

  .rodape .container {
    grid-template-columns: repeat(2, 1fr);
  }

  .campo-formulario__linha {
    /* Ordem dos campos é Estado, Cidade, WhatsApp — Estado só precisa de
       espaço pra 2 letras, Cidade precisa de mais espaço (nomes de
       cidade podem ser bem longos, ex: "Governador Valadares"). */
    grid-template-columns: 0.7fr 1.8fr 1.6fr;
  }

  .contato-duvidas {
    width: auto;
    justify-content: flex-start;
  }
}

/* ================= TELAS GRANDES (desktop) ================= */

@media (min-width: 1024px) {
  :root {
    --espaco-secao: 3.5rem;
  }

  .hero .container {
    grid-template-columns: 1.1fr 0.9fr;
  }

  .hero__selos,
  .hero__coluna-texto .botao-primario {
    align-self: flex-start;
  }

  .hero__selos {
    justify-content: flex-start;
  }

  .hero__titulo {
    font-size: 2.85rem;
  }

  .etapas {
    flex-direction: row;
    align-items: flex-start;
    justify-content: space-between;
  }

  .etapa {
    max-width: 240px;
  }

  .etapa__seta {
    display: block;
    align-self: center;
    width: 2.5rem;
    height: auto; /* mantém a proporção original do icone-seta.webp */
    margin-top: 2.25rem;
  }

  .beneficios {
    grid-template-columns: repeat(4, 1fr);
  }

  .rodape .container {
    grid-template-columns: 1.2fr 1fr 1fr;
  }
}