/* ============================================================
   MUNDO | Ferramentas, o passo a passo
   ------------------------------------------------------------
   O segundo móvel do sistema. O primeiro (ferramenta.css) sabe
   montar mostruário: tudo à vista, clicou abriu a gaveta. Este
   sabe montar questionário: uma pergunta por tela, com a ficha
   se preenchendo ao lado.

   Na ordem em que aparecem:

     0c. a capa ......... a porta, onde ela diz quem é
     1. o palco ......... a pergunta da vez, na folha de papel
     2. a régua ......... os sete traços do progresso
     3. as opções ....... os cartões de resposta
     4. a ficha ......... o carimbo que se preenche ao lado
     5. o resultado ..... os três blocos
     6. a conta ......... o cartão de papel quadriculado
     7. impressão ....... tudo em uma folha só

   Nada aqui sabe do que a ferramenta trata. Trocar as perguntas
   e as respostas faz nascer outro questionário com esta cara.

   Depende de /ferramentas/_motor/sistema.css, que traz as cores,
   as fontes e a folha, e de ferramenta.css, que traz a abertura,
   a ressalva e o convite.
   ============================================================ */

/* Quem tem display:grid ou flex ignora o atributo hidden sozinho,
   porque a regra do CSS ganha da regra do navegador. Esta linha
   devolve o comportamento esperado para a página inteira. */
[hidden]{display:none!important}


/* ============================================================
   0 · A ABERTURA DESTA FERRAMENTA
   ------------------------------------------------------------
   A Régua abre com um card de três passos, e a home abre com o
   alvo. Esta abre com outra coisa: uma ficha pronta, de mentira,
   ao lado da manchete. Em vez de explicar o que a ferramenta
   faz, ela mostra o que sai no fim.

   É a única peça da página que existe só para vender a ideia,
   então ela mostra exatamente o que a pessoa vai receber, e
   carimba EXEMPLO em cima para ninguém confundir com caso real.
   ============================================================ */
.entrada{padding:clamp(6.5rem,11vw,8.5rem) 0 clamp(1rem,2vw,1.6rem)}
.entrada-cabeco{
  display:flex;align-items:center;gap:14px;flex-wrap:wrap;
  border-bottom:1.5px solid var(--fio-forte);padding-bottom:9px;
  margin-bottom:clamp(1.6rem,3.4vw,2.6rem);
}
.entrada-cabeco .fim{margin-left:auto;color:var(--tinta-45)}
@media(max-width:640px){.entrada-cabeco .fim{margin-left:0;width:100%}}

.entrada-topo{display:grid;gap:clamp(2rem,4vw,3rem);align-items:center}
@media(min-width:1000px){
  /* start, e não center: a ficha de exemplo encosta no alto do
     título em vez de flutuar no meio da coluna. */
  .entrada-topo{grid-template-columns:minmax(0,1.12fr) minmax(0,.88fr);column-gap:clamp(36px,4.8vw,72px);align-items:start}
}

.entrada h1{
  font-size:clamp(2.15rem,calc(1.72rem + 2.28vw),3.65rem);line-height:1.06;letter-spacing:-.03em;
  font-variation-settings:'wdth' 90,'opsz' 96;max-width:18ch;text-wrap:pretty;
}
/* O verde é o que separa o que já existe do que precisa mudar.
   É o contraste que faz a frase virar argumento. */
.entrada h1 em{font-style:normal;color:var(--verde-vivo)}
@media(max-width:560px){.entrada h1 br{display:none}}

.entrada-sub{margin-top:clamp(1rem,2.2vw,1.5rem);font-size:1.08rem;line-height:1.55;color:var(--tinta-70);max-width:46ch}
.entrada-sub strong{color:var(--tinta);font-weight:600}

.entrada-acao{display:flex;align-items:center;gap:13px;flex-wrap:wrap;margin-top:clamp(1.4rem,2.8vw,2rem)}
.entrada-acao .btn{font-size:.68rem;padding:17px 26px}
@media(max-width:520px){.entrada-acao{align-items:stretch;flex-direction:column}.entrada-acao .btn{width:100%}}

.entrada-pe{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-top:clamp(1rem,2vw,1.3rem);
  padding-top:clamp(.9rem,1.8vw,1.2rem);border-top:1px dashed var(--fio-medio)}
.entrada-pe .mono-s{color:var(--tinta-45)}

/* ── A ficha de exemplo ─────────────────────────────────────
   Duas folhas: a de baixo é só a sombra de uma pilha de papel,
   girada um grau e meio. A de cima é a ficha. ── */
.exemplo{position:relative;margin:0;justify-self:center;width:100%;max-width:430px}
.exemplo::before{
  content:'';position:absolute;inset:14px -9px -11px 9px;background:var(--folha-2);
  border:1px solid var(--fio-medio);border-radius:2px;transform:rotate(1.6deg);
  box-shadow:var(--papel-3);z-index:0;
}
.ex-folha{position:relative;z-index:1;background:var(--folha);border:1px solid var(--fio-forte);
  border-radius:2px;box-shadow:var(--papel-2);overflow:hidden}

/* o carimbo EXEMPLO, torto como carimbo de verdade */
.ex-selo{
  position:absolute;z-index:3;bottom:-19px;left:-17px;transform:rotate(-4.5deg);
  font-family:var(--fm);font-size:.55rem;font-weight:700;letter-spacing:.2em;text-transform:uppercase;
  color:var(--terra);border:2px solid var(--terra);border-radius:3px;padding:6px 12px;
  background:var(--folha);box-shadow:var(--papel-3);opacity:.92;
}

.ex-cab{display:flex;align-items:center;gap:10px;padding:10px 14px;background:var(--verde);color:#F7F2E6}
.ex-cab .mono-s{color:rgba(247,242,230,.6)}
.ex-cab b{margin-left:auto;font-family:var(--fd);font-weight:800;font-size:.88rem;letter-spacing:-.024em}

.ex-quem{display:flex;flex-wrap:wrap;gap:5px;padding:11px 14px;border-bottom:1.5px solid var(--fio-forte);background:var(--folha-2)}
.ex-quem span{font-family:var(--fm);font-size:.45rem;font-weight:700;letter-spacing:.13em;text-transform:uppercase;
  border:1px solid var(--fio-medio);border-radius:2px;padding:6px 8px;color:var(--tinta-70);line-height:1;background:var(--folha)}

.ex-rot{display:block;padding:12px 14px 0;color:var(--tinta-45)}
.ex-ordem{padding:9px 14px 13px;display:grid;gap:0}
.ex-ordem div{display:grid;grid-template-columns:auto minmax(0,1fr);gap:11px;align-items:baseline;
  padding:9px 0;border-bottom:1px dashed var(--fio)}
.ex-ordem div:last-child{border-bottom:0}
.ex-no{font-family:var(--fd);font-weight:800;font-size:1.16rem;line-height:1;color:var(--terra);
  font-variation-settings:'wdth' 78;letter-spacing:-.045em}
.ex-t{font-family:var(--fd);font-weight:700;font-size:.94rem;letter-spacing:-.024em;line-height:1.22}

.ex-conta{display:grid;grid-template-columns:auto minmax(0,1fr);gap:13px;align-items:center;
  padding:13px 14px;border-top:1.5px solid var(--fio-forte);
  background:repeating-linear-gradient(0deg,transparent 0 13px,rgba(19,36,27,.05) 13px 14px),
             repeating-linear-gradient(90deg,transparent 0 13px,rgba(19,36,27,.05) 13px 14px),var(--folha-2)}
.ex-num{font-family:var(--fs);font-weight:700;font-size:2.1rem;line-height:.9;letter-spacing:-.03em;color:var(--verde-vivo)}
.ex-de{font-size:.83rem;line-height:1.4;color:var(--tinta-70)}

@media(max-width:999px){
  .exemplo{max-width:400px}
  .exemplo::before{inset:11px -7px -9px 7px}
}

/* ============================================================
   0b · O SEGREDO
   ------------------------------------------------------------
   A linha sobre os dados precisa estar visível, mas não precisa
   ocupar um bloco inteiro na abertura. Vira uma pastilha que
   abre no clique e, em quem tem mouse, também na passagem.
   ============================================================ */
/* Cada .container da página é uma camada própria (z-index:1),
   e a do formulário vem depois na página, então ela passava por
   cima desta caixa por mais alto que fosse o z-index dela aqui
   dentro. Levantar a camada da abertura resolve na raiz. */
.entrada > .container{position:relative;z-index:3}
.segredo{position:relative;display:inline-block}
.segredo > summary{
  display:inline-flex;align-items:center;gap:8px;cursor:pointer;list-style:none;
  font-family:var(--fm);font-size:.5rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase;line-height:1;
  border:1px dashed var(--fio-medio);border-radius:50px;padding:8px 12px;color:var(--tinta-45);background:var(--folha);
  transition:color .16s var(--ease),border-color .16s var(--ease);
}
.segredo > summary::-webkit-details-marker{display:none}
.segredo > summary:hover{color:var(--verde-vivo);border-color:var(--verde-fio)}
.segredo[open] > summary{color:var(--verde-vivo);border-color:var(--verde-vivo);border-style:solid}
.segredo > summary svg{width:9px;height:9px;flex:none;transition:transform .2s var(--ease)}
.segredo[open] > summary .segredo-seta{transform:rotate(180deg)}

.segredo-corpo{
  position:absolute;z-index:20;top:calc(100% + 9px);left:0;width:min(94vw,410px);
  background:var(--folha);border:1px solid var(--fio-forte);border-radius:2px;box-shadow:var(--papel-2);
  padding:14px 16px;animation:qzEntra .2s var(--ease) both;
}
.segredo-corpo::before{
  content:'';position:absolute;top:-7px;left:22px;width:12px;height:12px;background:var(--folha);
  border-left:1px solid var(--fio-forte);border-top:1px solid var(--fio-forte);transform:rotate(45deg);
}
.segredo-corpo p{font-size:.875rem;line-height:1.55;color:var(--tinta-70)}
.segredo-corpo p + p{margin-top:8px;padding-top:8px;border-top:1px dashed var(--fio)}
.segredo-corpo strong{color:var(--tinta);font-weight:600}
@media(max-width:560px){.segredo-corpo{left:auto;right:0}.segredo-corpo::before{left:auto;right:22px}}

/* ============================================================
   0c · A CAPA, a porta das perguntas
   ------------------------------------------------------------
   Ela pede duas coisas, nome e e-mail, e sai de cena assim que a
   pessoa entra. Mora na coluna da esquerda da grade, no mesmo
   lugar onde a caixa da pergunta vai aparecer, e as duas nunca
   estão de pé ao mesmo tempo.

   Fundo verde é de propósito. As sete perguntas moram numa folha
   de papel clara, então a capa é a única peça escura do trecho:
   fica evidente que ela é uma porta, e não mais uma pergunta.
   É o mesmo gesto que o bloco do e-mail faz no fim do resultado.
   ============================================================ */
/* Sem altura mínima, ao contrário da caixa da pergunta. A capa é
   uma porta, e porta não precisa ter a altura do cômodo: esticada
   ela abriria um vão morto entre o texto e os campos. Compacta,
   ela fica mais baixa que a ficha do lado, o que é a mesma
   assimetria que a abertura da página já tem. */
.capa{background:var(--verde);border-color:var(--verde);color:#F7F2E6;overflow:hidden}
.capa::before{background:rgba(211,116,47,.55)}
.capa .furos span{background:var(--verde);border-color:rgba(247,242,230,.3);box-shadow:none}
.capa-corpo{padding:clamp(22px,3vw,30px) var(--pad-dir) clamp(22px,3vw,28px) var(--margem)}
.capa .mono{color:var(--terra-viva)}
.capa h2{
  margin-top:11px;max-width:15ch;color:#F7F2E6;
  font-size:clamp(1.5rem,calc(1.3rem + 1vw),2.1rem);line-height:1.06;letter-spacing:-.034em;
  font-variation-settings:'wdth' 89;text-wrap:pretty;
}
.capa h2 em{font-style:normal;color:var(--terra-viva)}
.capa-sub{margin-top:12px;font-size:.975rem;line-height:1.55;color:rgba(247,242,230,.82);max-width:46ch}

.capa-forma{
  display:grid;gap:11px;align-items:end;
  margin-top:clamp(18px,2.6vw,24px);padding-top:clamp(17px,2.4vw,21px);
  border-top:1px solid rgba(247,242,230,.2);
}
/* Da largura em que a grade abre em duas colunas para cima, a
   capa tem uns 600px e os dois campos cabem lado a lado, com o
   botão fechando a linha de baixo. Abaixo disso tudo empilha,
   que é o que o grid já faz sozinho. */
@media(min-width:1000px){
  .capa-forma{grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
  .capa-forma .capa-btn{grid-column:1 / -1}
}
.capa-campo{display:grid;gap:7px;min-width:0}
.capa-campo label{color:rgba(247,242,230,.6)}
.capa-campo input{
  width:100%;font-family:var(--fc);font-size:1rem;color:#F7F2E6;
  background:rgba(247,242,230,.07);border:1px solid rgba(247,242,230,.34);border-radius:2px;padding:14px 15px;
  transition:border-color .16s var(--ease),background .16s var(--ease);
}
.capa-campo input::placeholder{color:rgba(247,242,230,.4)}
.capa-campo input:focus{outline:0;border-color:var(--terra-viva);background:rgba(247,242,230,.11)}
.capa-campo input:focus-visible{outline:2.5px solid var(--terra-viva);outline-offset:2px}
.capa-campo input[data-erro]{border-color:var(--terra-viva);background:rgba(211,116,47,.14)}
.capa-btn{background:var(--terra);border-color:var(--terra);color:#FFF6EE;box-shadow:none;padding:16px 22px;width:100%}
.capa-btn:hover{background:var(--terra-viva);border-color:var(--terra-viva)}
.capa-erro{margin-top:10px;font-size:.9rem;line-height:1.45;color:var(--terra-viva)}
.capa-erro[hidden]{display:none}

/* A capa sai, a pergunta entra no lugar dela. Sem susto: o mesmo
   fade curto que a troca de pergunta já usa. */
@media(prefers-reduced-motion:no-preference){
  .qz-caixa[data-entrando]{animation:qzEntra .34s var(--ease) both}
}

/* ============================================================
   1 · O PALCO
   ============================================================ */
.qz{padding:clamp(.6rem,1.6vw,1.2rem) 0 clamp(1.4rem,3vw,2.2rem)}

.qz-grade{display:grid;gap:clamp(14px,2vw,20px);align-items:start}
@media(min-width:1000px){
  .qz-grade{grid-template-columns:minmax(0,1.42fr) minmax(0,.78fr)}
}

.qz-caixa{position:relative;overflow:hidden;display:flex;flex-direction:column;min-height:clamp(420px,58vh,560px)}
.qz-corpo{padding:clamp(18px,2.6vw,26px) var(--pad-dir) clamp(18px,2.6vw,24px) var(--margem);flex:1}

/* ── A cabeça do palco: rótulo da etapa e contagem ── */
.qz-cab{
  display:flex;align-items:center;gap:12px;flex-wrap:wrap;
  padding:12px var(--pad-dir) 12px var(--margem);
  border-bottom:1.5px solid var(--fio-forte);background:var(--folha-2);
}
.qz-cab .mono-s{color:var(--tinta-45)}
.qz-conta-passo{margin-left:auto;font-family:var(--fm);font-size:.535rem;font-weight:700;letter-spacing:.155em;color:var(--tinta)}
.qz-conta-passo b{color:var(--terra);font-weight:700}

/* ============================================================
   2 · A RÉGUA, os sete traços
   ------------------------------------------------------------
   Não é barra de carregamento. É uma régua de verdade: traço
   alto no ponto onde a pessoa está, traços inteiros atrás,
   traços fracos à frente.
   ============================================================ */
.qz-regua{display:flex;align-items:flex-end;gap:0;height:22px;padding:0 var(--pad-dir) 0 var(--margem);
  border-bottom:1px dashed var(--fio-medio);background:var(--folha-2)}
.qz-tr{flex:1;position:relative;height:100%;display:flex;align-items:flex-end;justify-content:center}
.qz-tr::before{content:'';width:1.5px;height:7px;background:var(--fio-medio);transition:height .3s var(--ease),background .3s var(--ease)}
.qz-tr[data-e="feito"]::before{height:11px;background:var(--verde-vivo)}
.qz-tr[data-e="agora"]::before{height:18px;width:2px;background:var(--terra)}
/* o fio que liga os traços já vencidos */
.qz-regua::after{content:'';position:absolute;pointer-events:none}

/* ============================================================
   3 · A PERGUNTA E AS OPÇÕES
   ============================================================ */
.qz-tit{font-size:clamp(1.44rem,calc(1.28rem + .86vw),2.1rem);line-height:1.06;letter-spacing:-.034em;
  font-variation-settings:'wdth' 89;max-width:19ch;text-wrap:pretty}
.qz-tit em{font-style:normal;color:var(--verde-vivo)}
.qz-ajuda{margin-top:11px;font-size:.985rem;line-height:1.5;color:var(--tinta-70);max-width:46ch}

.qz-campo{margin-top:clamp(1.1rem,2.4vw,1.6rem)}
.qz-campo + .qz-campo{margin-top:clamp(1.3rem,2.8vw,1.9rem);padding-top:clamp(1.1rem,2.4vw,1.5rem);border-top:1px dashed var(--fio-medio)}
.qz-campo-rot{display:block;margin-bottom:11px;color:var(--tinta-45)}

.qz-ops{display:grid;gap:9px}
.qz-ops[data-cols="2"]{grid-template-columns:repeat(2,minmax(0,1fr))}
.qz-ops[data-cols="3"]{grid-template-columns:repeat(3,minmax(0,1fr));gap:7px}
@media(max-width:760px){
  .qz-ops[data-cols="3"]{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media(max-width:460px){
  .qz-ops[data-cols="2"]{grid-template-columns:1fr}
}

/* O rádio de verdade fica escondido, mas continua sendo ele que
   responde ao teclado e ao leitor de tela. O cartão é só a roupa. */
.qz-op{position:relative;display:block}
.qz-op input{position:absolute;opacity:0;width:1px;height:1px;margin:0;pointer-events:none}
.qz-op span.cx{
  display:grid;grid-template-columns:auto minmax(0,1fr) auto;gap:11px;align-items:start;
  padding:13px 14px;cursor:pointer;height:100%;
  background:var(--folha);border:1px solid var(--fio-medio);border-radius:2px;box-shadow:var(--papel-3);
  transition:transform .16s var(--ease),box-shadow .16s var(--ease),border-color .16s var(--ease),background .16s var(--ease);
}
.qz-op span.cx:hover{transform:translateY(-1px);box-shadow:var(--papel-1);border-color:var(--fio-forte)}

/* a caixinha de marcar, desenhada como a de um formulário de papel */
.qz-marca{width:17px;height:17px;flex:none;margin-top:2px;border:1.5px solid var(--fio-medio);border-radius:2px;
  display:grid;place-items:center;background:var(--folha-2);color:transparent;transition:all .16s var(--ease)}
.qz-marca svg{width:10px;height:10px}
.qz-op input:checked ~ .cx .qz-marca{background:var(--verde-vivo);border-color:var(--verde-vivo);color:#F7F2E6}

.qz-op-t{font-family:var(--fd);font-weight:700;font-size:1rem;letter-spacing:-.024em;line-height:1.2;display:block}
.qz-op-s{display:block;margin-top:4px;font-size:.885rem;line-height:1.4;color:var(--tinta-45)}
.qz-op-n{font-family:var(--fm);font-size:.5rem;font-weight:700;letter-spacing:.1em;color:var(--tinta-25);
  border:1px solid var(--fio);border-radius:2px;padding:3px 5px;line-height:1;margin-top:3px}
@media(max-width:900px){.qz-op-n{display:none}}

.qz-op input:checked ~ .cx{
  background:var(--verde-fraco);border-color:var(--verde-vivo);
  box-shadow:var(--papel-1), inset 3px 0 0 var(--verde-vivo);
}
.qz-op input:checked ~ .cx .qz-op-n{border-color:var(--verde-fio);color:var(--verde-vivo)}
.qz-op input:focus-visible ~ .cx{outline:2.5px solid var(--terra);outline-offset:3px}

/* Compacto: as especialidades, que são muitas */
.qz-ops[data-cols="3"] .cx{padding:10px 11px;gap:8px}
.qz-ops[data-cols="3"] .qz-op-t{font-size:.9rem}
.qz-ops[data-cols="3"] .qz-marca{width:14px;height:14px}
.qz-ops[data-cols="3"] .qz-marca svg{width:8px;height:8px}

/* ── O campo de escrever ── */
.qz-txt{
  width:100%;font-family:var(--fd);font-weight:700;font-size:clamp(1.1rem,2.4vw,1.34rem);letter-spacing:-.026em;
  color:var(--tinta);background:var(--folha-2);border:0;border-bottom:2px solid var(--fio-forte);border-radius:2px 2px 0 0;
  padding:12px 14px;transition:background .16s var(--ease),border-color .16s var(--ease);
}
.qz-txt::placeholder{color:var(--tinta-25);font-weight:400}
.qz-txt:focus{outline:0;background:var(--verde-fraco);border-bottom-color:var(--verde-vivo)}
.qz-txt:focus-visible{outline:2.5px solid var(--terra);outline-offset:3px}

/* ── O pé: voltar e continuar ── */
.qz-pe{
  display:flex;align-items:center;gap:11px;flex-wrap:wrap;
  padding:14px var(--pad-dir) 14px var(--margem);
  border-top:1.5px solid var(--fio-forte);background:var(--folha-2);
}
.qz-voltar{
  display:inline-flex;align-items:center;gap:8px;
  font-family:var(--fm);font-size:.53rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase;line-height:1;
  color:var(--tinta-45);border:1px solid var(--fio-medio);border-radius:50px;padding:10px 14px;background:var(--folha);
  transition:color .16s var(--ease),border-color .16s var(--ease);
}
.qz-voltar:hover{color:var(--terra);border-color:var(--terra-fio)}
.qz-voltar svg{width:10px;height:10px;transform:rotate(180deg)}
.qz-voltar[hidden]{display:none}
.qz-dica{margin-left:auto;color:var(--tinta-25);text-align:right;line-height:1.7}
@media(max-width:720px){
  .qz-dica{display:none}
  .qz-pe .btn{flex:1}
}
.qz-pe .btn[disabled]{opacity:.4;cursor:not-allowed;transform:none;box-shadow:var(--papel-3)}

/* ── A entrada de cada pergunta ── */
@keyframes qzEntra{from{opacity:0;transform:translateY(9px)}to{opacity:1;transform:none}}
.qz-palco{animation:qzEntra .26s var(--ease) both}

/* ============================================================
   4 · A FICHA, o carimbo que se preenche ao lado
   ------------------------------------------------------------
   Toda planta e toda folha técnica tem um carimbo no canto com
   os dados do desenho. É o que este bloco é: as respostas
   entrando linha por linha, à vista, enquanto a pessoa avança.
   ============================================================ */
.qz-ficha{position:relative;background:var(--folha);border:1px solid var(--fio-forte);border-radius:2px;
  box-shadow:var(--papel-2);overflow:hidden;align-self:start}
@media(min-width:1000px){.qz-ficha{position:sticky;top:92px}}

.fi-cab{display:flex;align-items:center;gap:10px;padding:11px 15px;
  border-bottom:1.5px solid var(--fio-forte);background:var(--verde);color:#F7F2E6}
.fi-cab .mono-s{color:rgba(247,242,230,.62)}
.fi-cab .fi-nome{font-family:var(--fd);font-weight:800;font-size:.95rem;letter-spacing:-.026em;margin-left:auto;color:#F7F2E6}

.carimbo{display:grid}
.ca-l{display:grid;grid-template-columns:8.4ch minmax(0,1fr);gap:10px;align-items:baseline;
  padding:9px 15px;border-bottom:1px dashed var(--fio)}
.ca-l:last-child{border-bottom:0}
.ca-r{font-family:var(--fm);font-size:.46rem;font-weight:700;letter-spacing:.13em;text-transform:uppercase;color:var(--tinta-25);line-height:1.7}
.ca-v{font-family:var(--fd);font-weight:700;font-size:.92rem;letter-spacing:-.022em;line-height:1.25;color:var(--tinta);
  overflow-wrap:anywhere}
/* enquanto não respondeu, uma linha pontilhada esperando */
.ca-v[data-vazio]{display:block;height:1px;border-bottom:1.5px dotted var(--fio-medio);transform:translateY(-4px)}
/* quando responde, a tinta entra da esquerda para a direita */
@keyframes qzTinta{from{clip-path:inset(0 100% 0 0)}to{clip-path:inset(0 0 0 0)}}
.ca-v:not([data-vazio]){animation:qzTinta .42s var(--ease) both}
.ca-v .ca-mais{display:block;margin-top:3px;font-family:var(--fm);font-size:.45rem;font-weight:600;
  letter-spacing:.12em;text-transform:uppercase;color:var(--terra);line-height:1.6}

/* ── As cinco peças ── */
.fi-pecas{padding:13px 15px 14px;border-top:1.5px solid var(--fio-forte);background:var(--folha-2)}
.fi-pecas .mono-s{display:block;color:var(--tinta-45);margin-bottom:10px}
.pecas{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:6px}
.pc{display:flex;flex-direction:column;align-items:center;gap:5px;text-align:center}
.pc-q{width:100%;aspect-ratio:1;max-height:46px;border:1.4px dashed var(--fio-medio);border-radius:2px;
  display:grid;place-items:center;color:var(--tinta-25);background:var(--folha);
  transition:all .3s var(--ease)}
.pc-q svg{width:17px;height:17px}
.pc-t{font-family:var(--fm);font-size:.4rem;font-weight:600;letter-spacing:.07em;text-transform:uppercase;
  color:var(--tinta-25);line-height:1.3}
.pc[data-e="tem"] .pc-q{border-style:solid;border-color:var(--verde-vivo);color:var(--verde-vivo);background:var(--verde-fraco)}
.pc[data-e="tem"] .pc-t{color:var(--verde-vivo)}
.pc[data-e="falta"] .pc-q{border-color:var(--terra-fio);color:var(--terra);
  background:repeating-linear-gradient(135deg,transparent 0 5px,var(--terra-fraca) 5px 10px)}
.pc[data-e="falta"] .pc-t{color:var(--terra)}

/* ── As duas linhas de fichas coloridas ── */
.fi-tags{padding:12px 15px;border-top:1px dashed var(--fio-medio)}
.fi-tags + .fi-tags{border-top:1px dashed var(--fio)}
.fi-tags .mono-s{display:block;color:var(--tinta-25);margin-bottom:8px}
.fi-chips{display:flex;flex-wrap:wrap;gap:5px}
.fi-chip{font-family:var(--fm);font-size:.45rem;font-weight:700;letter-spacing:.11em;text-transform:uppercase;
  border:1px solid var(--fio-medio);border-radius:50px;padding:5px 9px;color:var(--tinta-70);line-height:1;background:var(--folha)}
.fi-chip--terra{border-color:var(--terra-fio);color:var(--terra);background:var(--terra-fraca)}
.fi-vazio{font-size:.84rem;color:var(--tinta-25);font-style:italic}

/* No celular a ficha vem depois da pergunta. Linha vazia ali só
   ocupa tela, então ela só aparece quando tem resposta dentro:
   a ficha cresce junto com quem responde. */
@media(max-width:999px){
  .qz-ficha{order:2}
  .qz-caixa{order:1}
  .pecas{gap:5px}
  .pc-q{max-height:40px}
  .ca-l[data-vazio],.fi-tags[data-vazio]{display:none}
  .carimbo:empty{display:none}
}

/* ============================================================
   5 · O RESULTADO
   ============================================================ */
.res-cab{padding:clamp(22px,3.2vw,32px) var(--pad-dir) clamp(16px,2.4vw,20px) var(--margem)}
.res-cab h2{font-size:clamp(1.5rem,calc(1.34rem + .9vw),2.2rem);letter-spacing:-.036em;margin-top:10px;max-width:20ch;
  font-variation-settings:'wdth' 89}
.res-cab h2 em{font-style:normal;color:var(--verde-vivo)}

/* A linha de identidade: é ela que impede duas fichas iguais */
.res-quem{display:flex;flex-wrap:wrap;gap:7px;margin-top:15px}
.res-quem span{
  font-family:var(--fm);font-size:.5rem;font-weight:700;letter-spacing:.13em;text-transform:uppercase;line-height:1;
  border:1px solid var(--fio-forte);border-radius:2px;padding:8px 11px;background:var(--folha-2);color:var(--tinta);
}
.res-quem span:first-child{background:var(--verde);border-color:var(--verde);color:#F7F2E6}

.res-blocos{border-top:1.5px solid var(--fio-forte)}
.bloco{padding:clamp(18px,2.6vw,26px) var(--pad-dir) clamp(18px,2.6vw,26px) var(--margem);
  border-bottom:1px dashed var(--fio-medio)}
.bloco:last-child{border-bottom:0}
.bl-rot{display:flex;align-items:center;gap:10px;margin-bottom:5px}
.bl-ic{width:21px;height:21px;border-radius:2px;display:grid;place-items:center;flex:none;border:1.5px solid currentColor}
.bl-ic svg{width:11px;height:11px}
.bl-rot h3{font-family:var(--fd);font-weight:800;font-size:clamp(1.06rem,calc(1rem + .38vw),1.3rem);
  letter-spacing:-.028em;color:inherit}
.bl-sub{font-size:.92rem;line-height:1.45;color:var(--tinta-45);max-width:52ch;margin-bottom:15px}

.bloco--pe .bl-rot{color:var(--verde-vivo)}
.bloco--ordem .bl-rot{color:var(--tinta)}
.bloco--nao .bl-rot{color:var(--terra)}
.bloco--nao{background:var(--terra-fraca)}

/* ── Bloco 1: lista simples ── */
.lista-pe{display:grid;gap:11px}
.lista-pe li{display:grid;grid-template-columns:auto minmax(0,1fr);gap:11px;align-items:flex-start;
  padding-bottom:11px;border-bottom:1px dotted var(--fio-medio)}
.lista-pe li:last-child{border-bottom:0;padding-bottom:0}
.lista-pe .pt{width:16px;height:16px;border-radius:2px;flex:none;margin-top:2px;display:grid;place-items:center;
  background:var(--verde-vivo);color:#F7F2E6}
.lista-pe .pt svg{width:9px;height:9px}
.lista-pe b{font-family:var(--fd);font-weight:700;font-size:.985rem;letter-spacing:-.022em;display:block;margin-bottom:3px}
.lista-pe p{font-size:.915rem;line-height:1.45;color:var(--tinta-70)}

/* ── Bloco 2: a ordem, numerada e grande ── */
.ordem{display:grid;gap:0}
.ordem li{display:grid;grid-template-columns:auto minmax(0,1fr);gap:clamp(13px,2vw,20px);align-items:start;
  padding:16px 0;border-bottom:1px dashed var(--fio)}
.ordem li:first-child{padding-top:0}
.ordem li:last-child{border-bottom:0;padding-bottom:0}
.or-no{font-family:var(--fd);font-weight:800;font-size:clamp(1.6rem,3.4vw,2.3rem);line-height:.85;color:var(--terra);
  font-variation-settings:'wdth' 78;letter-spacing:-.05em}
.or-t{font-family:var(--fd);font-weight:800;font-size:clamp(1.06rem,calc(1rem + .42vw),1.32rem);
  letter-spacing:-.028em;line-height:1.16;display:block}
.or-p{margin-top:8px;font-size:.945rem;line-height:1.5;color:var(--tinta-70);max-width:60ch}
.or-p b{color:var(--tinta);font-weight:600}
.or-por{display:inline-flex;align-items:center;gap:7px;margin-top:10px;
  font-family:var(--fm);font-size:.46rem;font-weight:700;letter-spacing:.13em;text-transform:uppercase;
  border:1px dashed var(--fio-medio);border-radius:50px;padding:6px 10px;color:var(--tinta-45);line-height:1.5}
.or-por b{color:var(--verde-vivo);font-weight:700}

/* ── Bloco 3: o que não fazer ── */
.lista-nao{display:grid;gap:13px}
.lista-nao li{display:grid;grid-template-columns:auto minmax(0,1fr);gap:11px;align-items:flex-start}
.lista-nao .pt{width:16px;height:16px;border-radius:2px;flex:none;margin-top:2px;display:grid;place-items:center;
  background:var(--terra);color:#FFF6EE}
.lista-nao .pt svg{width:9px;height:9px}
.lista-nao b{font-family:var(--fd);font-weight:700;font-size:.985rem;letter-spacing:-.022em;display:block;margin-bottom:3px}
.lista-nao p{font-size:.915rem;line-height:1.45;color:var(--tinta-70)}
.lista-nao a{color:var(--terra);border-bottom:1.5px solid var(--terra-fio)}
.lista-nao a:hover{color:var(--verde-vivo);border-color:var(--verde-claro)}

/* Cada bloco entra um pouquinho depois do anterior */
@keyframes qzSobe{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}}
.res-anima > *{animation:qzSobe .4s var(--ease) both}
.res-anima > *:nth-child(2){animation-delay:.07s}
.res-anima > *:nth-child(3){animation-delay:.14s}
.res-anima > *:nth-child(4){animation-delay:.21s}

/* ── A faixa de socorro ─────────────────────────────────────
   Vem logo depois dos três blocos, no momento em que a pessoa
   acabou de ler a ordem e pensa “tá, mas como eu faço isso?”.
   Antes disso o único caminho para falar comigo era o card do
   fim da página, longe demais. ── */
.socorro{
  display:grid;grid-template-columns:auto minmax(0,1fr) auto;gap:clamp(13px,2vw,20px);align-items:center;
  padding:clamp(15px,2.2vw,20px) var(--pad-dir) clamp(15px,2.2vw,20px) var(--margem);
  border-top:1.5px solid var(--fio-forte);background:var(--verde);color:#F7F2E6;
}
.socorro-ic{width:38px;height:38px;flex:none;align-self:start;margin-top:2px;
  border:1.4px solid rgba(247,242,230,.38);border-radius:2px;
  display:grid;place-items:center;color:var(--terra-viva)}
.socorro-ic svg{width:20px;height:20px}
.socorro b{display:block;font-family:var(--fd);font-weight:800;font-size:clamp(1rem,calc(.95rem + .3vw),1.16rem);
  letter-spacing:-.026em;line-height:1.2;color:#F7F2E6}
.socorro p{margin-top:5px;font-size:.895rem;line-height:1.45;color:rgba(247,242,230,.76);max-width:52ch}
.socorro .btn{background:var(--terra);border-color:var(--terra);color:#FFF6EE;box-shadow:none;flex:none}
.socorro .btn:hover{background:var(--terra-viva);border-color:var(--terra-viva)}
@media(max-width:760px){
  .socorro{grid-template-columns:auto minmax(0,1fr)}
  .socorro .btn{grid-column:1/-1;width:100%}
}

/* ============================================================
   6 · A CONTA
   ------------------------------------------------------------
   Papel quadriculado, porque é uma conta feita à mão. Ela nunca
   diz quanto vai acontecer. Diz quanto precisaria acontecer.
   ============================================================ */
.conta{border-top:1.5px solid var(--fio-forte);
  background:
    repeating-linear-gradient(0deg,transparent 0 15px,rgba(19,36,27,.055) 15px 16px),
    repeating-linear-gradient(90deg,transparent 0 15px,rgba(19,36,27,.055) 15px 16px),
    var(--folha)}
.conta-cab{padding:clamp(18px,2.6vw,24px) var(--pad-dir) clamp(12px,2vw,16px) var(--margem)}
.conta-cab h3{font-size:clamp(1.16rem,calc(1.06rem + .5vw),1.46rem);letter-spacing:-.03em;margin-top:9px;max-width:24ch}
.conta-cab h3 em{font-style:normal;color:var(--verde-vivo)}
.conta-cab p{margin-top:10px;font-size:.94rem;line-height:1.5;color:var(--tinta-70);max-width:58ch}

/* o campo de verba, editável e à vista */
.verba{display:grid;gap:12px;margin-top:16px;
  padding:15px 16px;background:var(--folha);border:1px solid var(--fio-medio);border-radius:2px;box-shadow:var(--papel-3)}
.verba-topo{display:flex;align-items:center;gap:13px;flex-wrap:wrap}
.verba label{font-family:var(--fm);font-size:.5rem;font-weight:700;letter-spacing:.13em;text-transform:uppercase;
  color:var(--tinta-45);line-height:1.6;flex:1 1 170px}
/* a caixa de digitar tem cara de caixa de digitar: fundo, borda e
   um lápis do lado */
.verba-campo{display:flex;align-items:center;gap:6px;padding:8px 11px;
  background:var(--folha-2);border:1.5px solid var(--fio-forte);border-radius:2px;
  transition:border-color .16s var(--ease),background .16s var(--ease)}
.verba-campo:focus-within{border-color:var(--verde-vivo);background:var(--verde-fraco)}
.verba-cifra{font-family:var(--fd);font-weight:700;font-size:1rem;color:var(--tinta-45)}
.verba input{width:6ch;border:0;background:transparent;font-family:var(--fd);font-weight:800;
  font-size:clamp(1.24rem,2.6vw,1.52rem);letter-spacing:-.03em;color:var(--tinta);padding:0}
.verba input:focus{outline:0}
.verba input:focus-visible{outline:0}
.verba-lapis{width:14px;height:14px;flex:none;color:var(--terra);margin-left:2px}
.verba-dica{font-family:var(--fm);font-size:.46rem;font-weight:700;letter-spacing:.13em;text-transform:uppercase;
  color:var(--terra);line-height:1.6;flex:none}

.verba-atalhos{display:flex;gap:6px;flex-wrap:wrap;align-items:center}
.verba-atalhos .mono-s{color:var(--tinta-25);margin-right:3px}
.verba-atalhos button{
  font-family:var(--fm);font-size:.5rem;font-weight:700;letter-spacing:.1em;line-height:1;
  border:1px solid var(--fio-medio);border-radius:50px;padding:8px 12px;background:var(--folha);color:var(--tinta-70);
  transition:all .16s var(--ease);
}
.verba-atalhos button:hover{border-color:var(--verde-vivo);color:var(--verde-vivo)}
.verba-atalhos button[aria-pressed="true"]{background:var(--verde-vivo);border-color:var(--verde-vivo);color:#F7F2E6}
.verba-nota{font-size:.85rem;line-height:1.5;color:var(--tinta-45);padding-top:11px;border-top:1px dashed var(--fio)}

/* ── O número que importa ────────────────────────────────────
   A conta antes abria em porcentagem, que é abstração dupla:
   um por cento de uma coisa por cem. Agora ela abre no número
   de consultas, que é o que o médico conta de verdade. ── */
.chave{display:grid;grid-template-columns:auto minmax(0,1fr);gap:clamp(15px,2.6vw,26px);align-items:center;
  padding:clamp(18px,2.8vw,26px) var(--pad-dir) clamp(18px,2.8vw,26px) var(--margem);
  border-top:1.5px solid var(--fio-forte);background:var(--verde-fraco)}
.chave-num{font-family:var(--fs);font-weight:700;font-size:clamp(3.4rem,9vw,5rem);line-height:.82;
  letter-spacing:-.04em;color:var(--verde-vivo)}
.chave b{display:block;font-family:var(--fd);font-weight:800;
  font-size:clamp(1.16rem,calc(1.02rem + .62vw),1.62rem);letter-spacing:-.03em;line-height:1.14;max-width:22ch}
.chave p{margin-top:9px;font-size:.955rem;line-height:1.5;color:var(--tinta-70);max-width:54ch}
.chave strong{color:var(--tinta);font-weight:600}

/* ── A parte técnica, dobrada ──────────────────────────────
   Os dois cenários e a régua nascem fechados. A dobra é a mesma
   das fontes (details.dobra), então o dobra.js já a abre sozinha
   na hora de imprimir. O que muda aqui é só o encaixe: ela não
   flutua como uma folha, ela é uma faixa dentro do cartão da
   conta, encostada nas duas bordas. ── */
.dobra--conta{margin-top:0;border-top:1px dashed var(--fio-medio)}
.dobra--conta > summary{padding-top:clamp(15px,2.2vw,20px);padding-bottom:clamp(15px,2.2vw,20px)}
.dobra--conta .dobra-tit{font-size:clamp(.96rem,calc(.92rem + .22vw),1.1rem)}
.dobra--conta .dobra-ic{width:26px;height:26px}
.dobra--conta .dobra-ic svg{width:13px;height:13px}
/* Os cenários já trazem o próprio recuo nas bordas, então o
   corpo da dobra não pode acrescentar outro por cima. */
.dobra--conta .dobra-corpo{padding:0;border-top:1px dashed var(--fio-medio)}
.dobra-regua{padding:clamp(15px,2.2vw,20px) var(--pad-dir) clamp(16px,2.4vw,22px) var(--margem);
  border-top:1px dashed var(--fio-medio)}

.cenarios{display:grid;grid-template-columns:1fr 1fr}
@media(max-width:640px){.cenarios{grid-template-columns:1fr}}
.cn{padding:clamp(16px,2.4vw,22px) clamp(15px,2.2vw,22px)}
.cn--bom{border-right:1px dashed var(--fio-medio);padding-left:var(--margem)}
.cn--ruim{padding-right:var(--pad-dir)}
@media(max-width:640px){
  .cn{padding-left:var(--margem);padding-right:var(--pad-dir)}
  .cn--bom{border-right:0;border-bottom:1px dashed var(--fio-medio)}
}
.cn-rot{display:flex;align-items:center;gap:8px;margin-bottom:13px}
.cn-rot .mono-s{color:inherit}
.cn-pin{width:9px;height:9px;border-radius:50%;flex:none}
.cn--bom .cn-rot{color:var(--verde-vivo)}
.cn--bom .cn-pin{background:var(--verde-vivo)}
.cn--ruim .cn-rot{color:var(--terra)}
.cn--ruim .cn-pin{background:var(--terra)}

.cn-cpc{margin-left:auto;font-family:var(--fm);font-size:.46rem;font-weight:700;letter-spacing:.11em;
  text-transform:uppercase;color:var(--tinta-45)}
.cn-num{font-family:var(--fs);font-weight:700;font-size:clamp(2.3rem,6.4vw,3.1rem);line-height:.92;
  letter-spacing:-.03em;color:var(--tinta);display:block}
.cn-num i{font-style:normal;font-family:var(--fd);font-weight:700;font-size:.42em;color:var(--tinta-45);
  letter-spacing:-.01em;padding:0 .12em}
.cn--bom .cn-num{color:var(--verde-vivo)}
.cn--ruim .cn-num{color:var(--terra)}
.cn-de{display:block;margin-top:8px;font-family:var(--fd);font-weight:700;font-size:.985rem;letter-spacing:-.024em;
  line-height:1.3;color:var(--tinta);max-width:26ch}
.cn-apoio{display:block;margin-top:11px;padding-top:10px;border-top:1px dotted var(--fio-medio);
  font-size:.855rem;line-height:1.45;color:var(--tinta-45)}

/* o rodapé da conta: a régua do que é publicado, e o aviso */
.conta-pe{padding:clamp(15px,2.2vw,20px) var(--pad-dir) clamp(17px,2.6vw,22px) var(--margem);
  border-top:1.5px solid var(--fio-forte);background:var(--folha-2);display:grid;gap:11px}
.conta-pe p{font-size:.9rem;line-height:1.5;color:var(--tinta-70);max-width:62ch}
.conta-pe strong{color:var(--tinta);font-weight:600}
.conta-alerta{display:grid;grid-template-columns:auto minmax(0,1fr);gap:11px;align-items:start;
  padding:12px 14px;background:var(--terra-fraca);border:1px dashed var(--terra-fio);border-radius:2px}
.conta-alerta .mono-s{color:var(--terra)}
.conta-alerta p{color:var(--tinta);max-width:none}

/* A régua da conta: a faixa verde é o que se publica, a barra
   terracota é o que a conta dele pede. Ver as duas na mesma
   linha responde sozinho se a aposta é razoável. */
.faixa{margin-top:4px}
.faixa-l{position:relative;height:30px;border:1px solid var(--fio-medio);border-radius:2px;
  background:repeating-linear-gradient(90deg,transparent 0 11px,rgba(19,36,27,.07) 11px 12px),var(--folha);overflow:hidden}
.faixa-pub{position:absolute;top:0;bottom:0;background:rgba(45,94,63,.19);
  border-left:2px solid var(--verde-vivo);border-right:2px solid var(--verde-vivo)}
.faixa-voce{position:absolute;top:6px;bottom:6px;background:var(--terra);border-radius:2px;
  box-shadow:0 0 0 3px var(--terra-fraca)}
.faixa-eixo{display:flex;justify-content:space-between;margin-top:5px;
  font-family:var(--fm);font-size:.44rem;font-weight:600;letter-spacing:.11em;color:var(--tinta-25)}
.faixa-tit{display:block;margin-bottom:9px;color:var(--tinta-45)}
.faixa-leg{display:flex;flex-wrap:wrap;gap:7px 16px;margin-top:11px}
.lg{display:inline-flex;align-items:center;gap:7px;
  font-family:var(--fm);font-size:.46rem;font-weight:700;letter-spacing:.115em;text-transform:uppercase;
  color:var(--tinta-45);line-height:1.6}
.lg i{width:11px;height:11px;flex:none;border-radius:2px}
.lg--voce i{background:var(--terra)}
.lg--voce{color:var(--terra)}
.lg--pub i{background:rgba(45,94,63,.19);border:1.5px solid var(--verde-vivo)}
.lg--pub{color:var(--verde-vivo)}
.faixa-diz{margin-top:10px;font-size:.9rem;line-height:1.5;color:var(--tinta-70)}
.faixa-diz strong{color:var(--tinta);font-weight:600}

/* a mesma linha, em versão clara, na abertura da página */
.aviso-lgpd{display:grid;grid-template-columns:auto minmax(0,1fr);gap:11px;align-items:start;
  margin-top:clamp(1rem,2.2vw,1.4rem);padding:12px 14px;
  border:1px dashed var(--fio-medio);border-radius:2px;background:var(--folha)}
.aviso-lgpd .mono-s{color:var(--verde-vivo);white-space:nowrap}
.aviso-lgpd p{font-size:.865rem;line-height:1.55;color:var(--tinta-70)}
.aviso-lgpd strong{color:var(--tinta);font-weight:600}

/* ── O pé do resultado ── */
.res-pe{display:flex;align-items:center;gap:12px;flex-wrap:wrap;
  padding:13px var(--pad-dir) 13px var(--margem);
  border-top:1px dashed var(--fio-medio);background:var(--folha-2)}
.res-pe .mono-s{color:var(--tinta-25);margin-right:auto;line-height:1.8}
.refazer{font-family:var(--fm);font-size:.5rem;font-weight:700;letter-spacing:.13em;text-transform:uppercase;
  color:var(--tinta-45);border-bottom:1px solid var(--fio-medio);line-height:1.9}
.refazer:hover{color:var(--terra);border-color:var(--terra)}

/* ============================================================
   7 · IMPRESSÃO, tudo em uma folha só
   ============================================================ */
@media print{
  body{background:#fff}
  body::before,.nav-wrapper,.pular,.abertura,.entrada,.capa,.qz-grade,.footer,.res-pe,.socorro,.convite-ctas{display:none!important}
  .folha{box-shadow:none;border:1px solid #999;break-inside:avoid;page-break-inside:avoid}
  .folha::before,.furos{display:none}
  .res-cab,.bloco,.conta-cab,.conta-pe{padding-left:22px;padding-right:22px}
  .cn--bom{padding-left:22px}
  .cn--ruim{padding-right:22px}
  .res-anima > *{animation:none}
  .conta{background:#fff}
  .bloco--nao{background:#fff;border:1px solid #ccc}
  .chave{background:#fff;padding-left:22px;padding-right:22px}
  .dobra-regua{padding-left:22px;padding-right:22px}
}

/* ── Sem movimento ── */
@media(prefers-reduced-motion:reduce){
  .qz-palco,.res-anima > *,.ca-v:not([data-vazio]){animation:none!important}
}