/* =========================================================
   QUALIFICAÇÃO DE PALESTRA — Pedro Cortella
   CSS3 puro, mobile-first. Sem framework, sem CDN, sem !important.

   Ordem: 1 tokens · 2 reset · 3 base · 4 layout · 5 cartão
          6 telas · 7 botão · 8 utilitários
========================================================= */

/* ---------- 0. FONTES LOCAIS ----------
   Bricolage Grotesque + Poppins auto-hospedadas em ../fonts/, decisão do
   projeto em 2026-09-02: mesma tipografia do diagnostico-fluencia-ia, sem
   Google Fonts e sem nenhuma CDN.

   Só os pesos que a linguagem visual realmente aplica:
     Bricolage 700/800 -> títulos     Poppins 400/500/600 -> corpo, rótulos, botões
   Subconjunto latin, que já cobre todo o repertório do português.
   font-display: swap — o texto aparece na fonte de sistema e troca ao chegar,
   em vez de ficar invisível esperando o download.
*/
@font-face {
  font-family: "Bricolage Grotesque";
  src: url("../fonts/bricolage-grotesque-700-800.woff2") format("woff2");
  font-weight: 700 800; /* arquivo variável no eixo wght: interpola, não sintetiza */
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Poppins";
  src: url("../fonts/poppins-400.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Poppins";
  src: url("../fonts/poppins-500.woff2") format("woff2");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Poppins";
  src: url("../fonts/poppins-600.woff2") format("woff2");
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}

/* ---------- 1. TOKENS ----------
   Valores idênticos aos de www/diagnostico-fluencia-ia/assets/style.css, que
   por sua vez vêm de source/design-system.md. Os nomes também são os mesmos:
   assim qualquer regra lida na referência funciona aqui sem tradução.
   Esta é uma CÓPIA — não há import nem caminho apontando para o outro projeto.
*/
:root {
  /* Marca */
  --c-primary:         #910304;
  --c-primary-hover:   #820304;
  --c-secondary:       #000000;
  --c-secondary-hover: #1A1A1A;

  /* Texto */
  --c-text:    #000000;
  --c-muted:   #5A5A52;

  /* Fundo */
  --c-bg:      #E6E6DC;
  --c-bg-alt:  #FFFFFF;
  --c-dark:    #000000;

  /* Interface */
  --c-border:  #D2D2C8;

  /* Tipografia — famílias auto-hospedadas na seção 0 */
  --ff-display: "Bricolage Grotesque", system-ui, -apple-system, Segoe UI, Roboto, sans-serif;
  --ff-base:    "Poppins", system-ui, -apple-system, Segoe UI, Roboto, sans-serif;

  --fs-xs:   0.75rem;
  --fs-sm:   0.875rem;
  --fs-md:   1rem;
  --fs-lg:   1.25rem;
  --fs-xl:   2rem;
  --fs-hero: 2.25rem;

  --fw-light:     300;
  --fw-regular:   400;
  --fw-medium:    500;
  --fw-semibold:  600;
  --fw-bold:      700;
  --fw-extrabold: 800;

  --lh-base:  1.6;
  --lh-tight: 1.2;

  /* Espaçamento */
  --space-1: 8px;
  --space-2: 16px;
  --space-3: 24px;
  --space-4: 40px;
  --space-5: 64px;
  --space-6: 96px;

  /* Layout */
  --container: 1200px;

  /* Bordas */
  --radius-sm: 6px;
  --radius-md: 10px;
  --radius-lg: 16px;

  /* Sombras — usar com parcimônia: a identidade do cliente é flat */
  --shadow-sm: 0 2px 8px rgba(0,0,0,0.06);
  --shadow-md: 0 8px 24px rgba(0,0,0,0.10);

  /* Transição */
  --transition: 0.25s ease;
}

/* ---------- 2. RESET ---------- */
*,
*::before,
*::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

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

/* ---------- 3. BASE ---------- */
body {
  font-family: var(--ff-base);
  font-size: var(--fs-md);
  line-height: var(--lh-base);
  color: var(--c-text);
  background: var(--c-bg);
}

/* ---------- 4. TIPOGRAFIA ---------- */
h1,
h2,
h3,
h4 {
  font-family: var(--ff-display);
  font-weight: var(--fw-bold);
  line-height: var(--lh-tight);
}

h1 {
  font-size: var(--fs-hero);
  font-weight: var(--fw-extrabold);
  letter-spacing: -0.02em;
}

h2 {
  font-size: var(--fs-xl);
  letter-spacing: -0.01em;
}

h3 { font-size: var(--fs-lg); }

p {
  margin-bottom: var(--space-2);
  color: var(--c-muted);
}

@media (min-width: 768px) {
  h1 { font-size: 3rem; }
  h2 { font-size: 2.25rem; }
}

@media (min-width: 1024px) {
  h2 { font-size: 2.5rem; }
}

/* ---------- 5. LAYOUT ---------- */
.container {
  max-width: var(--container);
  margin: 0 auto;
  padding: 0 var(--space-2);
}

@media (min-width: 768px) {
  .container { padding: 0 var(--space-4); }
}

/* A aplicação é de tela única: centralizar na vertical evita o vazio que
   sobraria embaixo num desktop alto. A referência não precisa disso porque
   tem outras seções abaixo do hero.
   dvh sobrescreve vh onde houver suporte — no celular, vh ignora a barra
   do navegador e empurra o conteúdo para fora da área visível. */
.app {
  display: flex;
  min-height: 100vh;
  min-height: 100dvh;
}

/* Centralização vertical por margin auto, não por align-items: center.
   Com conteúdo mais alto que a viewport, align-items: center empurra o
   topo para fora da área rolável e o progresso fica inalcançável.
   margin auto centra quando sobra espaço e encosta no topo quando falta. */
.quiz {
  width: 100%;
  min-width: 0;
  margin-block: auto;
}

/* Honeypot — invisível para humanos, mas presente no DOM/tab order normal
   para bots que só checam display:none via seletor simples. Mesmo padrão de
   www/diagnostico-fluencia-ia/assets/app.css. position:absolute fora da
   viewport preserva foco/leitura de tela corretamente caso um leitor ignore
   aria-hidden por engano. */
.quiz__honeypot {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

/* ---------- 6. BOTÕES ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-1);
  text-align: center;
  text-decoration: none;
  cursor: pointer;
  font-family: var(--ff-base);
}

.btn-primary {
  background: var(--c-primary);
  color: var(--c-bg-alt);
  border: 2px solid var(--c-primary);
  padding: 12px 24px;
  font-size: var(--fs-sm);
  font-weight: var(--fw-semibold);
  border-radius: var(--radius-sm);
  transition: background var(--transition), border-color var(--transition), transform var(--transition);
}

.btn-primary:hover {
  background: var(--c-primary-hover);
  border-color: var(--c-primary-hover);
}

/* Pressionado: escurece e afunda 1px. O deslocamento é o mesmo recurso que
   o .card da referência usa no hover — não é vocabulário novo. */
.btn-primary:active {
  background: var(--c-primary-hover);
  border-color: var(--c-primary-hover);
  transform: translateY(1px);
}

.btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.btn:disabled:hover {
  background: var(--c-primary);
  border-color: var(--c-primary);
}

@media (prefers-reduced-motion: reduce) {
  .btn-primary,
  .btn-primary:active {
    transition: background var(--transition), border-color var(--transition);
    transform: none;
  }
}

/* ---------- 7. ACESSIBILIDADE ---------- */
/* Vermelho da marca sobre o osso do fundo: 7,53:1, bem acima do mínimo AA.
   O offset de 3px mantém o contorno fora do botão vermelho, onde ele seria
   invisível. */
:focus-visible {
  outline: 2px solid var(--c-primary);
  outline-offset: 3px;
}

/* ---------- 8. TELA DE ABERTURA ---------- */
/* Mesma composição do hero de diagnostico-fluencia-ia: coluna estreita,
   centralizada, sem cartão e sem moldura. */
.abertura {
  width: 100%;
  padding: var(--space-5) 0;
  text-align: center;
}

.abertura__inner {
  max-width: 640px;
  margin: 0 auto;
}

.abertura__logo {
  width: 160px;
  height: auto;
  margin: 0 auto var(--space-4);
}

.abertura__titulo {
  color: var(--c-text);
  margin-bottom: var(--space-3);
  text-wrap: balance;
}

.abertura__texto {
  font-size: var(--fs-lg);
  color: var(--c-text);
  margin-bottom: var(--space-4);
}

.abertura__cta {
  margin-bottom: var(--space-2);
}

.abertura__microcopy {
  font-size: var(--fs-xs);
  color: var(--c-muted);
  margin-bottom: 0;
}

@media (min-width: 768px) {
  .abertura { padding: var(--space-6) 0; }
}


/* ---------- 9. TELAS ---------- */
/* A visibilidade é o atributo hidden, não uma classe: assim a tela inativa
   sai também da árvore de acessibilidade e da ordem de tabulação, coisa que
   display:none via classe não garantiria sozinho de forma semântica. */
.tela[hidden] {
  display: none;
}

/* Recebe foco por programa na troca de etapa, para o leitor de tela anunciar
   a pergunta nova. Sem contorno: quem pediu o foco foi o script, não o Tab. */
.tela:focus {
  outline: none;
}

/* ---------- 10. PROGRESSO ---------- */
.progresso {
  --progresso-altura: 6px;
  max-width: 640px;
  margin: 0 auto var(--space-4);
}

.progresso__rotulo {
  font-size: var(--fs-xs);
  font-weight: var(--fw-medium);
  color: var(--c-muted);
  text-align: center;
  margin-bottom: var(--space-1);
}

.progresso__trilho {
  height: var(--progresso-altura);
  background: var(--c-border);
  border-radius: var(--radius-sm);
  overflow: hidden;
}

.progresso__barra {
  display: block; /* é um <span>: sem isto, width e height não se aplicam */
  height: 100%;
  background: var(--c-primary);
  border-radius: var(--radius-sm);
  transition: width var(--transition);
}

@media (prefers-reduced-motion: reduce) {
  .progresso__barra { transition: none; }
}

/* ---------- 11. ETAPA DO QUESTIONÁRIO ---------- */
.etapa__inner {
  max-width: 640px;
  margin: 0 auto;
}

/* fieldset sem borda: quem agrupa visualmente é o espaçamento; o elemento
   está aqui pela semântica de grupo de radio, que o leitor de tela usa. */
.etapa__grupo {
  border: none;
  padding: 0;
  margin: 0;
}

.etapa__pergunta {
  display: block;
  width: 100%;
  font-family: var(--ff-display);
  font-size: var(--fs-xl);
  font-weight: var(--fw-bold);
  line-height: var(--lh-tight);
  color: var(--c-text);
  text-align: center;
  margin-bottom: var(--space-1);
  text-wrap: balance;
}

.etapa__microcopy {
  font-size: var(--fs-xs);
  color: var(--c-muted);
  text-align: center;
  margin-bottom: var(--space-3);
}

/* Etapa 5: a nota sobre a agenda do Pedro vem depois do campo de data (um
   .campo condicional), não depois de uma pergunta — .campo já tem margem
   própria só no topo, então sem isto o texto encosta na borda do campo. */
.campo + .etapa__microcopy {
  margin-top: var(--space-3);
}

.etapa__erro {
  font-size: var(--fs-sm);
  font-weight: var(--fw-semibold);
  color: var(--c-primary);
  text-align: center;
  margin-bottom: var(--space-2);
}

.etapa__erro[hidden] {
  display: none;
}

.etapa__acoes {
  display: flex;
  justify-content: space-between;
  gap: var(--space-2);
  margin-top: var(--space-3);
}

/* ---------- 12. OPÇÕES DE RESPOSTA ---------- */
.opcao {
  display: flex;
  align-items: flex-start;
  gap: var(--space-2);
  padding: var(--space-2);
  margin-bottom: var(--space-1);
  border: 1px solid var(--c-border);
  border-radius: var(--radius-sm);
  background: var(--c-bg-alt);
  cursor: pointer;
  transition: border-color var(--transition), box-shadow var(--transition);
}

.opcao:hover {
  border-color: var(--c-primary);
}

/* Selecionada: além da cor, um anel interno que engrossa a borda sem
   deslocar o layout. O próprio marcador do radio já sinaliza por forma,
   então a seleção nunca depende só de cor. */
.opcao:has(input:checked) {
  border-color: var(--c-primary);
  box-shadow: inset 0 0 0 1px var(--c-primary);
}

/* O contorno de foco cerca o bloco inteiro, não a bolinha do radio */
.opcao:has(input:focus-visible) {
  outline: 2px solid var(--c-primary);
  outline-offset: 3px;
}

.opcao__controle {
  flex-shrink: 0;
  width: 20px;
  height: 20px;
  margin-top: 2px; /* alinha com a primeira linha do rótulo */
  accent-color: var(--c-primary);
  cursor: pointer;
}

.opcao__texto {
  display: block;
}

.opcao__titulo {
  display: block;
  font-size: var(--fs-sm);
  font-weight: var(--fw-medium);
  color: var(--c-text);
}

.opcao__detalhe {
  display: block;
  font-size: var(--fs-xs);
  color: var(--c-muted);
}

/* ---------- 13. BOTÃO SECUNDÁRIO ---------- */
.btn-secondary {
  background: transparent;
  color: var(--c-secondary);
  border: 2px solid var(--c-secondary);
  padding: 12px 24px;
  font-size: var(--fs-sm);
  font-weight: var(--fw-semibold);
  border-radius: var(--radius-sm);
  transition: background var(--transition), color var(--transition);
}

.btn-secondary:hover {
  background: var(--c-secondary);
  color: var(--c-bg-alt);
}

.btn-secondary:active {
  background: var(--c-secondary-hover);
  border-color: var(--c-secondary-hover);
  color: var(--c-bg-alt);
}

/* ---------- 14. CAMPO DE TEXTO ---------- */
/* Mesmo componente .input do design system da referência. */
.campo {
  margin-top: var(--space-2);
}

.campo[hidden] {
  display: none;
}

.input {
  width: 100%;
  padding: 12px var(--space-2);
  border: 1px solid var(--c-border);
  border-radius: var(--radius-sm);
  font-family: var(--ff-base);
  font-size: var(--fs-sm);
  color: var(--c-text);
  background: var(--c-bg-alt);
  transition: border-color var(--transition);
}

.input:focus {
  border-color: var(--c-primary);
}

/* Remove o contorno só no foco por mouse; no teclado o :focus-visible
   global continua valendo. Sem esta ressalva, a especificidade de
   .input:focus (0,2,0) anularia o outline (0,1,0). */
.input:focus:not(:focus-visible) {
  outline: none;
}

/* Erro sinalizado por borda escura e mais grossa, não por cor vermelha:
   nesta paleta o vermelho é a cor da marca, não a de alerta. */
.input--error {
  border-color: var(--c-dark);
  border-width: 2px;
}

/* ---------- 15. UTILITÁRIOS ---------- */
/* Disponível ao leitor de tela, invisível na tela. */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* ---------- 16. ETAPA COM VÁRIAS PERGUNTAS ---------- */
/* Respiro entre grupos quando a mesma etapa traz mais de uma pergunta. */
.etapa__grupo + .etapa__grupo,
.etapa__grupo + .campo,
.campo + .etapa__grupo,
.campo + .campo {
  margin-top: var(--space-4);
}

/* ---------- 17. RÓTULOS E CAMPOS ---------- */
.campo__label {
  display: block;
  margin-bottom: var(--space-1);
  font-family: var(--ff-display);
  font-size: var(--fs-lg);
  font-weight: var(--fw-bold);
  line-height: var(--lh-tight);
  color: var(--c-text);
}

.campo__ajuda {
  font-size: var(--fs-xs);
  color: var(--c-muted);
  margin-bottom: var(--space-2);
}

/* Cidade e UF lado a lado a partir do tablet; empilhados no celular, onde
   dividir 343px em duas colunas deixaria a cidade curta demais. */
.campo__linha {
  display: grid;
  gap: var(--space-2);
}

@media (min-width: 480px) {
  .campo__linha {
    grid-template-columns: 1fr 7rem;
    align-items: end;
  }
}

.campo__coluna {
  min-width: 0;
}

/* O select usa o mesmo componente .input; só precisa da altura igualada,
   já que não tem o padding vertical de um input de texto. */
select.input {
  height: 3rem;
  cursor: pointer;
}

/* ---------- 18. ETAPA DE CONTATO ---------- */
/* Rótulo de campo: menor que .campo__label, que é para pergunta. Mesmo
   tratamento do .diagnostico__label da referência. */
.campo__rotulo {
  display: block;
  margin-bottom: var(--space-1);
  font-size: var(--fs-sm);
  font-weight: var(--fw-medium);
  color: var(--c-text);
}

.etapa__intro {
  font-size: var(--fs-lg);
  color: var(--c-text);
  text-align: center;
  margin-bottom: var(--space-4);
}

/* Mesmo componente do .input, com altura livre para as linhas do textarea. */
.textarea {
  width: 100%;
  padding: 12px var(--space-2);
  border: 1px solid var(--c-border);
  border-radius: var(--radius-sm);
  font-family: var(--ff-base);
  font-size: var(--fs-sm);
  line-height: var(--lh-base);
  color: var(--c-text);
  background: var(--c-bg-alt);
  resize: vertical;
  transition: border-color var(--transition);
}

.textarea:focus {
  border-color: var(--c-primary);
}

.textarea:focus:not(:focus-visible) {
  outline: none;
}

/* A caixa de erro fica entre o rótulo e o campo: aparecer depois deixaria
   a mensagem fora de vista quando o campo é o último visível na tela. */
.campo .etapa__erro {
  text-align: left;
  margin-bottom: var(--space-1);
}

/* ---------- 19. AGRADECIMENTO ---------- */
.agradecimento {
  width: 100%;
  padding: var(--space-5) 0;
  text-align: center;
}

.agradecimento[hidden] {
  display: none;
}

.agradecimento:focus {
  outline: none;
}

/* Cartão elevado sobre o osso do fundo: os tokens --radius-lg e --shadow-md
   já existiam no Design System mas nenhum componente os usava ainda — é
   exatamente o par pensado para um destaque como este, a última tela do
   fluxo. Anima a entrada porque troca de [hidden] para visível é o único
   momento em que esta tela aparece na tela do visitante. */
.agradecimento__card {
  max-width: 560px;
  margin: 0 auto;
  padding: var(--space-4) var(--space-3);
  background: var(--c-bg-alt);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-md);
  animation: agradecimento-entrada 0.5s ease;
}

@keyframes agradecimento-entrada {
  from {
    opacity: 0;
    transform: translateY(12px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@media (prefers-reduced-motion: reduce) {
  .agradecimento__card {
    animation: none;
  }
}

/* Logo: mesma marca da abertura, menor porque o cartão é mais estreito que
   a coluna do hero — fecha a consistência de início e fim do fluxo (P08). */
.agradecimento__logo {
  width: 120px;
  height: auto;
  margin: 0 auto var(--space-3);
}

/* Selo de confirmação: decorativo (aria-hidden no HTML), o texto "Recebemos"
   já diz o mesmo — o ícone só reforça visualmente, não substitui. */
.agradecimento__selo {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 64px;
  height: 64px;
  margin: 0 auto var(--space-3);
  background: var(--c-primary);
  color: var(--c-bg-alt);
  border-radius: 50%;
}

.agradecimento__texto {
  font-size: var(--fs-lg);
  color: var(--c-text);
  margin-bottom: var(--space-3);
}

.agradecimento__texto--secundario {
  font-size: var(--fs-sm);
  color: var(--c-muted);
  margin-bottom: var(--space-2);
}

.agradecimento__divisor {
  width: 48px;
  height: 0;
  margin: var(--space-3) auto;
  border: none;
  border-top: 2px solid var(--c-border);
}

.agradecimento__links {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  margin-top: var(--space-2);
}

@media (min-width: 768px) {
  .agradecimento { padding: var(--space-6) 0; }

  .agradecimento__card { padding: var(--space-5) var(--space-4); }
}