/* ============================================================
   /quandotodomundoparecebom: folha da experiencia da aula

   Carrega DEPOIS de /estilo.css e nao reescreve nenhum seletor dele.
   Tudo que e desta pagina leva o prefixo `qd-`, que nao existe em
   nenhum outro arquivo do projeto. As unicas classes compartilhadas
   sao as do site (.sec, .faixa, .dentro, .rotulo, .corpo, .lead,
   .botao, .assinatura, .topo, .fecho, .rodape, dialog.ficha), e elas
   sao usadas como estao.

   O DESENHO
   Tipografico, com muito ar. Uma pergunta principal por tela, titulos
   grandes, poucos elementos por viewport. O ritmo claro e escuro que
   a /tese usa continua valendo aqui: descoberta e confianca no escuro,
   espelho, verificacao e criterio no claro. O azul e reservado para
   progresso, estado ativo, dado e chamada, exatamente como no resto
   do site. Zero card decorativo, zero sombra, zero gradiente enfeite,
   zero icone generico, zero imagem de banco.

   AS DUAS FONTES DO SITE TEM UM PESO SO (400). Como em estilo.css, a
   hierarquia se faz por TAMANHO, CAIXA, COR e ESPACEJAMENTO. Nao ha
   negrito em lugar nenhum: pedir um faz o navegador engordar a letra e
   sujar as duas familias.
   ============================================================ */

[hidden] { display: none !important; }

.skip { position: absolute; left: 16px; top: -80px; z-index: 200; background: var(--ouro-claro); color: var(--tinta); font-size: 12px; letter-spacing: .12em; text-transform: uppercase; padding: 12px 16px; }
.skip:focus { top: 16px; }

body.pg-quiz { background: var(--tinta); }

/* REDE DE SEGURANCA DA ENTRADA EM CENA.

   estilo.css esconde todo `[data-ent]` quando o <html> tem a classe
   `anima`, e conta com o IntersectionObserver para revelar. Se um
   elemento nao chegar a ser registrado no observador, ele fica
   invisivel PARA SEMPRE, e a pagina abre preta com so o topo e o
   rodape na tela. Aconteceu aqui na primeira montagem, e um teste que
   le texto do DOM nao pega, porque o texto existe.

   O app marca com `data-ent-obs` tudo que registrou. Esta regra
   devolve a visibilidade a quem nao tem a marca: a pior falha possivel
   passa a ser "entrou sem animacao", nunca "sumiu". */
.anima body.pg-quiz [data-ent]:not([data-ent-obs]) {
  opacity: 1;
  transform: none;
}

/* Cada etapa e uma tela. O min-height mantem o respiro mesmo quando a
   etapa tem pouco conteudo, sem prender a rolagem quando tem muito. */
.qd-etapa { min-height: 72vh; padding: 76px 0 84px; }
.qd-etapa:focus { outline: none; }
.qd-etapa .lead { max-width: 34ch; }
.qd-etapa h2 { max-width: 20ch; }
/* estilo.css nao prevê `.lead` seguido de `.corpo`: sem esta regra a
   frase de preparacao nasce colada no primeiro paragrafo e as duas
   viram um bloco so. */
.qd-etapa .lead + .corpo { margin-top: 20px; }

.qd-realce { color: var(--ouro); }

.qd-nota {
  margin-top: 22px;
  font-size: .8125rem;
  line-height: 1.6;
  max-width: 52ch;
  color: var(--claro-3);
}
.sec--clara .qd-nota { color: var(--escuro-2); }
.qd-aviso { color: var(--ouro-claro); }

.qd-acoes {
  margin-top: 38px;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 14px;
}
.qd-acoes .botao { margin-top: 0; }
.qd-acoes .botao + .botao { margin-left: 0; }

/* O botao que leva adiante e o unico azul da tela. */
.qd-botao--principal { border-color: var(--ouro); color: var(--ouro-claro); }
.sec--clara .qd-botao--principal { color: var(--ouro); }
.sec--escura .qd-botao--principal:hover,
.sec--clara .qd-botao--principal:hover { background: var(--ouro); color: var(--tinta); }
.botao:disabled { opacity: .38; cursor: not-allowed; }
.sec--escura .botao:disabled:hover { background: none; color: inherit; }
.sec--clara .botao:disabled:hover { background: none; color: inherit; }
.qd-botao--perigo { border-color: var(--ouro); color: var(--ouro-claro); }

.qd-voltar {
  font-family: var(--dado);
  font-size: 11px;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--claro-3);
  padding: 13px 4px;
  border-bottom: 1px solid transparent;
}
.qd-voltar:hover { color: var(--ouro-claro); border-bottom-color: var(--ouro-claro); }
.sec--clara .qd-voltar { color: var(--escuro-2); }
.sec--clara .qd-voltar:hover { color: var(--ouro); border-bottom-color: var(--ouro); }

/* O topo e a barra de progresso sao fixos e somam 120px. Sem esta
   margem, qualquer rolagem ate um elemento (foco por teclado, ancora,
   navegacao entre etapas) para com o alvo ESCONDIDO atras das duas
   barras. Achado ao percorrer a pagina com o navegador. */
.qd-etapa, .qd-q, .qd-inv, .qd-prompt, .qd-campo, .qd-criterio, .qd-acoes,
.qd-opcao__rotulo, .qd-campo__entrada, .qd-texto, .qd-copiar,
.pg-quiz .botao, .qd-voltar { scroll-margin-top: 136px; }

/* Foco visivel em tudo que recebe teclado, nas duas peles. */
.pg-quiz :focus-visible {
  outline: 2px solid var(--ouro-claro);
  outline-offset: 3px;
  border-radius: 2px;
}
.sec--clara :focus-visible { outline-color: var(--ouro); }

/* ============================================================
   ABERTURA
   ============================================================ */
.qd-abertura { min-height: calc(100vh - 66px); display: grid; align-content: center; }
.qd-abertura__h1 { max-width: 14ch; font-size: clamp(2.5rem, 7vw, 5rem); line-height: 1.04; }
.qd-abertura .lead { margin-top: 26px; }
.qd-abertura__marca {
  margin-top: 54px;
  font-family: var(--titulo);
  font-size: clamp(1.125rem, 2.4vw, 1.75rem);
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--claro);
}
.qd-abertura__corpo { margin-top: 20px; max-width: 44ch; }

.qd-retomar {
  margin-top: 40px;
  padding: 20px 22px;
  border: 1px solid var(--fio-claro);
  max-width: 44ch;
}
.qd-retomar__linha { margin-top: 10px; font-size: .875rem; line-height: 1.6; color: var(--claro-2); }
.qd-retomar .qd-voltar { margin-top: 8px; display: inline-block; }

/* ============================================================
   PROGRESSO: 01 / 07 e a linha que se completa
   ============================================================ */
#trilho {
  position: sticky;
  top: 66px;
  z-index: 50;
  background: rgba(10, 18, 22, .94);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--fio-claro);
  --ouro: #20BDF3;
  --ouro-claro: #75D9FF;
}
.qd-progresso__in { display: flex; align-items: center; justify-content: space-between; gap: 20px; height: 54px; }
.qd-progresso__n {
  display: flex;
  align-items: center;
  gap: 14px;
  font-family: var(--dado);
  font-size: 11px;
  letter-spacing: .22em;
  color: var(--ouro-claro);
}
.qd-progresso__total { color: var(--claro-3); }
.qd-progresso__barra {
  display: block;
  width: min(38vw, 260px);
  height: 1px;
  background: var(--fio-claro);
}
.qd-progresso__barra i {
  display: block;
  height: 1px;
  background: var(--ouro);
  transform-origin: left center;
  transition: transform .6s cubic-bezier(.16, 1, .3, 1);
}
.qd-recomecar {
  font-family: var(--dado);
  font-size: 10px;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--claro-3);
  padding: 10px 2px;
}
.qd-recomecar:hover { color: var(--ouro-claro); }

/* ============================================================
   CAMPOS: o espelho
   ============================================================ */
.qd-campos {
  margin-top: 40px;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 26px 34px;
  max-width: 760px;
}
.qd-campo__rotulo {
  display: block;
  font-family: var(--dado);
  font-size: 11px;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--ouro);
}
.qd-campo__opcional { color: var(--escuro-2); letter-spacing: .12em; }
.sec--escura .qd-campo__opcional { color: var(--claro-3); }
.qd-campo__entrada {
  width: 100%;
  margin-top: 10px;
  padding: 14px 0;
  font-family: var(--dado);
  font-size: 1.0625rem;
  color: inherit;
  background: none;
  border: 0;
  border-bottom: 1px solid var(--fio-escuro);
  border-radius: 0;
  transition: border-color .2s ease;
}
.sec--escura .qd-campo__entrada { border-bottom-color: var(--fio-claro); }
.qd-campo__entrada:focus { border-bottom-color: var(--ouro); }
.qd-campo__dica { margin-top: 8px; font-size: .8125rem; line-height: 1.5; color: var(--escuro-2); }
.sec--escura .qd-campo__dica { color: var(--claro-3); }

.qd-contador {
  margin-top: 30px;
  font-family: var(--dado);
  font-size: 11px;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--escuro-2);
}
.sec--escura .qd-contador { color: var(--claro-3); }

/* ============================================================
   PERGUNTA DE ESCALA: sim, parcialmente, nao

   Grupo de radio de verdade. O campo fica invisivel mas continua no
   fluxo de foco, entao setas do teclado e leitor de tela funcionam
   sem uma linha de JavaScript.
   ============================================================ */
.qd-perguntas { margin-top: 40px; display: grid; gap: 4px; }
/* O FIO DE SEPARACAO E UM PSEUDO-ELEMENTO, E NAO `border-top`.

   Num <fieldset>, o navegador ABRE a borda para encaixar a <legend>:
   o fio nasce cortado e reaparece depois do texto da pergunta, como se
   estivesse quebrado. Visto no render, nao no DOM. Com a borda zerada e
   o fio desenhado por `::before`, a linha atravessa inteira e a legenda
   fica por cima dela, no lugar certo.

   A <legend> tambem precisa flutuar com largura total: e o unico jeito
   confiavel de faze-la respeitar o `padding-top` do fieldset em vez de
   subir para a moldura. O `clear` volta ao normal em `.qd-opcoes`. */
.qd-q {
  position: relative;
  border: 0;
  padding: 26px 0 22px;
  margin: 0;
  min-width: 0;
}
.qd-q::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 1px;
  background: var(--fio-escuro);
}
.sec--escura .qd-q::before { background: var(--fio-claro); }
.qd-q__texto {
  float: left;
  width: 100%;
  padding: 0;
  font-family: var(--titulo);
  font-size: 1.25rem;
  line-height: 1.32;
  max-width: 34ch;
}
.qd-q__n {
  display: inline-block;
  min-width: 34px;
  font-family: var(--dado);
  font-size: 11px;
  letter-spacing: .18em;
  color: var(--ouro);
  vertical-align: 2px;
}

/* PADDING, e nao MARGIN: com `clear: both` a clearance engole a margem
   de cima e as opcoes encostam na pergunta. Visto no render depois de
   trocar a borda do fieldset pelo pseudo-elemento. */
.qd-opcoes { clear: both; padding-top: 20px; display: flex; flex-wrap: wrap; gap: 10px; }
.qd-opcao { position: relative; }
/* O campo fica escondido do olho, mas nao do foco nem do leitor de tela.
   NAO usar `inset: 0` com opacidade zero aqui: isso poe o input POR CIMA
   do rotulo e faz o proprio campo interceptar o clique, o que atrapalha
   teste automatizado e qualquer camada que dependa de acertar o label.
   Com a caixa de 1px o rotulo volta a ser a unica superficie clicavel,
   ligada ao campo pelo `for`. */
.qd-opcao__campo {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}
.qd-opcao__rotulo {
  display: flex;
  align-items: center;
  min-height: 48px;
  padding: 0 24px;
  border: 1px solid var(--fio-escuro);
  border-radius: 999px;
  font-family: var(--dado);
  font-size: 11px;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--escuro-2);
  cursor: pointer;
  transition: border-color .2s ease, color .2s ease, background .2s ease;
}
.sec--escura .qd-opcao__rotulo { border-color: var(--fio-claro); color: var(--claro-2); }
.qd-opcao__rotulo:hover { border-color: var(--ouro); color: var(--ouro); }
.sec--escura .qd-opcao__rotulo:hover { color: var(--ouro-claro); }
/* BRANCO PURO, e nao --creme, na pele clara. O rotulo tem 11px, entao
   precisa de 4,5:1: creme sobre Blue Deep da 4,02:1 e reprova; branco
   da 4,66:1 e passa. Na pele escura o fundo e o ZEITH Blue e o texto e
   a tinta, que ja da 8,6:1. */
.qd-opcao__campo:checked + .qd-opcao__rotulo {
  border-color: var(--ouro);
  background: var(--ouro);
  color: #FFFFFF;
}
.sec--escura .qd-opcao__campo:checked + .qd-opcao__rotulo { color: var(--tinta); }
.qd-opcao__campo:focus-visible + .qd-opcao__rotulo { outline: 2px solid var(--ouro-claro); outline-offset: 3px; }
.sec--clara .qd-opcao__campo:focus-visible + .qd-opcao__rotulo { outline-color: var(--ouro); }

/* ============================================================
   INVESTIGACAO: o botao que abre a busca de verdade
   ============================================================ */
.qd-invs { margin-top: 44px; display: grid; gap: 4px; }
.qd-inv { border-top: 1px solid var(--fio-claro); padding: 30px 0 8px; }
.sec--clara .qd-inv { border-top-color: var(--fio-escuro); }
.qd-inv__n {
  font-family: var(--dado);
  font-size: 11px;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--ouro);
}
.qd-inv .botao { margin-top: 16px; }
.qd-inv__explica { margin-top: 14px; font-size: .875rem; line-height: 1.65; max-width: 46ch; color: var(--claro-3); }
.sec--clara .qd-inv__explica { color: var(--escuro-2); }
/* a pergunta precisa respirar depois da explicacao do botao, senao as
   duas leem como um paragrafo so */
.qd-inv .qd-q { border-top: 0; padding-top: 26px; }
.qd-inv .qd-q__texto { font-size: 1.0625rem; }

/* ============================================================
   PROMPTS PARA COPIAR
   ============================================================ */
.qd-prompts { margin-top: 42px; display: grid; gap: 4px; }
.qd-prompt {
  display: grid;
  grid-template-columns: 40px minmax(0, 1fr) auto;
  align-items: center;
  gap: 18px;
  border-top: 1px solid var(--fio-claro);
  padding: 22px 0;
}
.qd-prompt__n { font-family: var(--dado); font-size: 11px; letter-spacing: .18em; color: var(--ouro); }
.qd-prompt__texto { font-family: var(--dado); font-size: 1rem; line-height: 1.6; color: var(--claro); }
.qd-copiar {
  min-height: 44px;
  padding: 0 20px;
  border: 1px solid var(--fio-claro);
  border-radius: 999px;
  font-family: var(--dado);
  font-size: 10px;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--claro-2);
  white-space: nowrap;
  transition: border-color .2s ease, color .2s ease;
}
.qd-copiar:hover { border-color: var(--ouro); color: var(--ouro-claro); }
.qd-copiar--ok { border-color: var(--ouro); color: var(--ouro-claro); }

.qd-conceito { margin-top: 46px; padding-top: 26px; border-top: 1px solid var(--fio-claro); }
.qd-conceito .corpo { max-width: 52ch; }
.qd-conceito .corpo + .corpo { margin-top: 12px; }

/* ============================================================
   CRITERIO: a parte que nao pontua
   ============================================================ */
.qd-criterio { margin-top: 36px; max-width: 640px; }
.qd-criterio__titulo { display: none; }
.qd-criterio__dica { font-size: .875rem; line-height: 1.6; color: var(--escuro-2); max-width: 46ch; }
.sec--escura .qd-criterio__dica { color: var(--claro-3); }
.qd-texto {
  width: 100%;
  margin-top: 20px;
  padding: 20px 22px;
  font-family: var(--dado);
  font-size: 1.0625rem;
  line-height: 1.7;
  color: inherit;
  background: none;
  border: 1px solid var(--fio-escuro);
  border-radius: 0;
  resize: vertical;
}
.sec--escura .qd-texto { border-color: var(--fio-claro); }
.qd-texto:focus { border-color: var(--ouro); }
.qd-texto::placeholder { color: var(--escuro-2); opacity: .7; }

.qd-composicao { margin-top: 34px; max-width: 640px; }
.qd-composicao__linha { margin-top: 26px; padding-top: 20px; border-top: 1px solid var(--fio-escuro); }
.sec--escura .qd-composicao__linha { border-top-color: var(--fio-claro); }
.qd-composicao__prefixo {
  display: block;
  font-family: var(--dado);
  font-size: 11px;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--ouro);
}
.qd-composicao__resposta {
  margin-top: 12px;
  font-family: var(--titulo);
  font-size: 1.375rem;
  line-height: 1.34;
}
.qd-composicao__resposta--vazia { font-family: var(--dado); font-size: .9375rem; color: var(--escuro-2); }
.sec--escura .qd-composicao__resposta--vazia { color: var(--claro-3); }
.qd-composicao .qd-voltar { margin-top: 22px; display: inline-block; }

.qd-fluxo {
  margin-top: 26px;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px;
  font-family: var(--dado);
  font-size: 11px;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--ouro);
}
.qd-fluxo__seta { color: var(--escuro-2); }
.sec--escura .qd-fluxo__seta { color: var(--claro-3); }
.qd-fluxo + .corpo { margin-top: 16px; }

/* ============================================================
   RESULTADO: o placar
   ============================================================ */
.qd-placar { margin-top: 34px; }
.qd-placar__linha { display: flex; align-items: baseline; gap: 16px; }
.qd-placar__n {
  font-family: var(--titulo);
  font-size: clamp(4.5rem, 18vw, 11rem);
  line-height: .9;
  letter-spacing: -.03em;
  color: var(--ouro-claro);
  font-variant-numeric: tabular-nums;
}
.qd-placar__de {
  font-family: var(--dado);
  font-size: clamp(1rem, 2.4vw, 1.5rem);
  letter-spacing: .1em;
  color: var(--claro-3);
}
.qd-placar__classe {
  margin-top: 22px;
  font-family: var(--dado);
  font-size: 13px;
  letter-spacing: .3em;
  color: var(--ouro);
}
.qd-placar__msg { margin-top: 16px; max-width: 46ch; }

.qd-dims { margin-top: 52px; display: grid; gap: 2px; }
.qd-dim { border-top: 1px solid var(--fio-claro); padding: 22px 0 20px; }
.sec--clara .qd-dim { border-top-color: var(--fio-escuro); }
.qd-dim__topo { display: flex; align-items: baseline; justify-content: space-between; gap: 18px; }
.qd-dim__nome { font-family: var(--dado); font-size: 11px; letter-spacing: .22em; color: var(--claro); }
.sec--clara .qd-dim__nome { color: var(--escuro); }
.qd-dim__n { font-family: var(--dado); font-size: 13px; letter-spacing: .12em; color: var(--ouro-claro); font-variant-numeric: tabular-nums; }
.sec--clara .qd-dim__n { color: var(--ouro); }
.qd-dim__trilho { margin-top: 14px; height: 2px; background: var(--fio-claro); }
.sec--clara .qd-dim__trilho { background: var(--fio-escuro); }
.qd-dim__barra {
  display: block;
  height: 2px;
  background: var(--ouro);
  transform-origin: left center;
  transition: transform 1.1s cubic-bezier(.16, 1, .3, 1);
}
.qd-dim__resumo { margin-top: 12px; font-size: .8125rem; line-height: 1.55; color: var(--claro-3); max-width: 48ch; }
.sec--clara .qd-dim__resumo { color: var(--escuro-2); }

.qd-gargalo { margin-top: 62px; padding-top: 30px; border-top: 1px solid var(--fio-claro); }
.sec--clara .qd-gargalo { border-top-color: var(--fio-escuro); }
.qd-gargalo__nome {
  margin-top: 14px;
  font-family: var(--titulo);
  font-size: clamp(1.75rem, 4vw, 2.75rem);
  line-height: 1.1;
  color: var(--ouro-claro);
}
.sec--clara .qd-gargalo__nome { color: var(--ouro); }
.qd-gargalo .corpo { margin-top: 14px; }
.qd-gargalo__rotulo {
  margin-top: 26px;
  font-family: var(--dado);
  font-size: 11px;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--claro-3);
}

.qd-lista { margin-top: 14px; padding: 0; list-style: none; max-width: 56ch; }
.qd-lista li {
  position: relative;
  padding-left: 22px;
  font-size: .9375rem;
  line-height: 1.6;
  color: var(--claro-2);
}
.sec--clara .qd-lista li { color: var(--escuro-2); }
.qd-lista li + li { margin-top: 10px; }
.qd-lista li::before { content: ''; position: absolute; left: 0; top: .72em; width: 10px; height: 1px; background: var(--ouro); }

/* ============================================================
   PLANO
   ============================================================ */
.qd-plano { margin-top: 44px; }
.qd-plano__bloco { padding-top: 30px; border-top: 1px solid var(--fio-escuro); }
.qd-plano__bloco + .qd-plano__bloco { margin-top: 44px; }
.qd-plano__linha { margin-top: 10px; font-size: .875rem; line-height: 1.6; color: var(--escuro-2); max-width: 46ch; }
.sec--escura .qd-plano__linha { color: var(--claro-3); }
.qd-plano__lista { margin-top: 22px; padding: 0; list-style: none; counter-reset: passo; max-width: 62ch; }
.qd-plano__lista li {
  counter-increment: passo;
  position: relative;
  padding-left: 44px;
  padding-bottom: 18px;
  margin-bottom: 18px;
  border-bottom: 1px solid var(--fio-escuro);
}
.sec--escura .qd-plano__lista li { border-bottom-color: var(--fio-claro); }
.qd-plano__lista li:last-child { border-bottom: 0; margin-bottom: 0; padding-bottom: 0; }
.qd-plano__lista li::before {
  content: counter(passo, decimal-leading-zero);
  position: absolute;
  left: 0;
  top: .1em;
  font-family: var(--dado);
  font-size: 11px;
  letter-spacing: .16em;
  color: var(--ouro);
}
.qd-plano__acao { display: block; font-size: 1rem; line-height: 1.62; }
.qd-plano__grupo {
  display: inline-block;
  margin-top: 10px;
  font-family: var(--dado);
  font-size: 10px;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--escuro-2);
}
.sec--escura .qd-plano__grupo { color: var(--claro-3); }

.qd-acelerador { margin-top: 52px; padding-top: 28px; border-top: 1px solid var(--fio-escuro); }
.sec--escura .qd-acelerador { border-top-color: var(--fio-claro); }
.qd-acelerador__t {
  font-family: var(--titulo);
  font-size: clamp(1.5rem, 3.4vw, 2.25rem);
  line-height: 1.15;
  color: var(--ouro);
}
.qd-acelerador .corpo { margin-top: 14px; max-width: 52ch; }

/* ============================================================
   DECISAO: fazer, delegar, construir
   ============================================================ */
.qd-decisao { margin-top: 42px; }
.qd-decisao__grade { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 40px; }
.qd-decisao__col { padding-top: 22px; border-top: 1px solid var(--fio-escuro); }
.sec--escura .qd-decisao__col { border-top-color: var(--fio-claro); }
.qd-decisao__linha { margin-top: 10px; font-size: .8125rem; line-height: 1.55; color: var(--escuro-2); }
.sec--escura .qd-decisao__linha { color: var(--claro-3); }
.qd-decisao__vazio { margin-top: 14px; font-size: .875rem; color: var(--escuro-2); }
.qd-decisao .qd-lista li { font-size: .875rem; }

/* ============================================================
   ZEITH: a oferta, so depois do resultado e do plano
   ============================================================ */
.qd-oferta .corpo { max-width: 48ch; }
.qd-zeith { margin-top: 44px; }
.qd-zeith__grade { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1px; background: var(--fio-claro); border: 1px solid var(--fio-claro); }
.qd-zeith__item { background: var(--tinta); padding: 22px 24px; }
/* Sao cinco componentes em duas colunas: sem isto a ultima celula fica
   vazia e o fundo da grade aparece como uma caixa oca ao lado do quinto
   item. O ultimo em posicao impar ocupa a linha inteira. */
.qd-zeith__item:last-child:nth-child(odd) { grid-column: 1 / -1; }
.qd-zeith__item b {
  display: block;
  font-weight: 400;
  font-family: var(--dado);
  font-size: 11px;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--ouro-claro);
  margin-bottom: 10px;
}
.qd-zeith__item span { display: block; font-size: .9375rem; line-height: 1.6; color: var(--claro-2); }
/* a que produto a peca pertence. Evita que alguem leia a grade como se
   tudo estivesse dentro do mesmo contrato. */
.qd-zeith__produto {
  display: block;
  margin-top: 12px;
  font-style: normal;
  font-size: 10px;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--claro-3);
}

.qd-fechamento { min-height: 0; padding-bottom: 92px; }

/* ============================================================
   DIALOGO DE CONFIRMACAO: reaproveita dialog.ficha do site
   ============================================================ */
.qd-dialogo { width: min(520px, calc(100vw - 36px)); }
.qd-dialogo .qd-acoes { margin-top: 30px; }

/* ============================================================
   IMPRESSAO: so a folha, nunca a interface
   ============================================================ */
.qd-print { display: none; }
.qd-print__folha { color: #000; background: #fff; font-family: var(--dado); }
.qd-print__marca { font-size: 9pt; letter-spacing: .18em; text-transform: uppercase; color: #444; }
.qd-print__titulo { font-family: var(--titulo); font-size: 24pt; line-height: 1.1; margin-top: 6pt; }
.qd-print__ident { margin-top: 14pt; display: grid; grid-template-columns: auto 1fr; gap: 4pt 14pt; font-size: 10pt; }
.qd-print__ident dt { color: #555; letter-spacing: .1em; text-transform: uppercase; font-size: 8pt; padding-top: 2pt; }
.qd-print__ident dd { margin: 0; }
.qd-print__total { margin-top: 18pt; font-family: var(--titulo); }
.qd-print__total b { font-weight: 400; font-size: 34pt; }
.qd-print__total span { font-size: 12pt; }
.qd-print__tab { margin-top: 10pt; border-collapse: collapse; width: 100%; max-width: 320pt; font-size: 10pt; }
.qd-print__tab th { text-align: left; font-weight: 400; padding: 5pt 0; border-bottom: 1px solid #ccc; }
.qd-print__tab td { text-align: right; padding: 5pt 0; border-bottom: 1px solid #ccc; }
.qd-print__sec { margin-top: 16pt; page-break-inside: avoid; }
.qd-print__sec h2 { font-family: var(--dado); font-size: 8pt; letter-spacing: .2em; text-transform: uppercase; color: #555; margin-bottom: 6pt; }
.qd-print__sec p, .qd-print__sec li { font-size: 10pt; line-height: 1.5; }
.qd-print__sec ul, .qd-print__sec ol { margin: 0; padding-left: 16pt; }
.qd-print__sec li { margin-bottom: 4pt; }
.qd-print__sec b { font-weight: 400; color: #000; }
.qd-print__rodape { margin-top: 14pt; font-size: 8pt; color: #555; }

@media print {
  .topo, #trilho, #experiencia, .fecho, dialog { display: none !important; }
  .qd-print { display: block !important; }
  body { background: #fff; color: #000; }
  @page { margin: 16mm; }
}

/* ============================================================
   CELULAR: a experiencia nasce aqui

   Coluna unica, campos grandes, alvo de toque confortavel, nenhuma
   letra abaixo de 13px em texto corrido e nenhuma grade espremida.
   ============================================================ */
@media (max-width: 900px) {
  #trilho { top: 56px; }
  .qd-progresso__in { height: 48px; }
  .qd-etapa, .qd-q, .qd-inv, .qd-prompt, .qd-campo, .qd-criterio, .qd-acoes,
  .qd-opcao__rotulo, .qd-campo__entrada, .qd-texto, .qd-copiar,
  .pg-quiz .botao, .qd-voltar { scroll-margin-top: 118px; }
  .qd-progresso__barra { width: min(34vw, 150px); }

  .qd-etapa { min-height: 0; padding: 46px 0 56px; }
  .qd-abertura { min-height: calc(100vh - 56px); }
  .qd-abertura__h1 { font-size: clamp(2.25rem, 11vw, 3rem); }
  .qd-abertura__marca { margin-top: 40px; }

  .qd-etapa h2, .qd-etapa .lead, .qd-q__texto, .qd-composicao__resposta { max-width: none; }
  .qd-campos { grid-template-columns: 1fr; gap: 22px; }
  .qd-campo__entrada { font-size: 1rem; padding: 12px 0; }

  .qd-opcoes { gap: 8px; }
  .qd-opcao { flex: 1 1 100%; }
  .qd-opcao__rotulo { justify-content: center; padding: 0 18px; }

  .qd-q__texto { font-size: 1.125rem; }
  .qd-q__n { display: block; min-width: 0; margin-bottom: 8px; }

  .qd-prompt { grid-template-columns: minmax(0, 1fr); gap: 12px; }
  .qd-copiar { justify-self: start; }

  .qd-decisao__grade { grid-template-columns: 1fr; gap: 30px; }
  .qd-zeith__grade { grid-template-columns: 1fr; }
  .qd-placar__linha { flex-direction: column; gap: 6px; align-items: flex-start; }
  .qd-acoes { gap: 12px; }
  .qd-acoes .botao { width: 100%; text-align: center; }
  .qd-fechamento { padding-bottom: 64px; }
}

/* Movimento reduzido: nada se move, nada some. */
@media (prefers-reduced-motion: reduce) {
  .qd-progresso__barra i,
  .qd-dim__barra { transition: none; }
}