/* ============================================================
   MUNDO | Ferramentas, a conta
   ------------------------------------------------------------
   O terceiro móvel do sistema.

     ferramenta.css .. mostruário: tudo à vista, clicou abriu
     questionario.css  passo a passo: uma pergunta por tela
     conta.css ....... calculadora: você mexe, o número anda

   A diferença que decide tudo aqui: numa calculadora o
   resultado não vem no fim, vem junto. Cada ato tem os campos
   em cima e o número dele embaixo, na mesma folha, para o
   médico ver a conta virar enquanto digita. É por isso que os
   campos são pequenos e ficam lado a lado: se ocupassem uma
   tela inteira, o número sairia de vista e a graça acabaria.

   Depende, nesta ordem:
     sistema.css ..... cores, fontes, folha, botões, rodapé
     ferramenta.css .. abertura, dobra, ressalva, convite
     questionario.css  capa, conta, chave, faixa, cenários

   Quase nada aqui é novo. O que é novo tem nome próprio:

     1. os atos ......... a folha com campos em cima e conta embaixo
     2. os campos ....... número, pastilhas, régua de arrastar
     3. a troca ......... os dois lados da substituição
     4. o vale .......... o gráfico do buraco da transição
     5. o fecho ......... o carimbo, o levar comigo e o convite
     6. impressão ....... só o que foi calculado
   ============================================================ */

[hidden]{display:none!important}


/* ============================================================
   0 · A ABERTURA
   ------------------------------------------------------------
   Herda .abertura do ferramenta.css. O que muda é a peça do
   lado: em vez de três passos, um cartão que mostra o número
   que sai daqui, já respondido, com o carimbo de exemplo.
   ============================================================ */
.abre-topo{display:grid;gap:clamp(1.6rem,3.4vw,2.6rem);align-items:start}
@media(min-width:1000px){
  .abre-topo{grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);column-gap:clamp(36px,4.8vw,68px)}
}

/* ── O cartão da abertura: a troca, já feita ────────────────
   Duas folhas, como a ficha de exemplo do Por Onde Começar: a
   de baixo é a sombra de uma pilha, a de cima é a conta. ── */
.mostra{position:relative;margin:0;justify-self:center;width:100%;max-width:430px}
.mostra::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;
}
.mostra-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}
.mostra-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;
}
.mostra-cab{display:flex;align-items:center;gap:10px;padding:10px 14px;background:var(--verde);color:#F7F2E6}
.mostra-cab .mono-s{color:rgba(247,242,230,.6)}
.mostra-cab b{margin-left:auto;font-family:var(--fd);font-weight:800;font-size:.88rem;letter-spacing:-.024em}

/* os dois lados da troca, com a seta no meio */
.mostra-troca{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:10px;
  padding:16px 14px;border-bottom: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)}
.mostra-lado{display:grid;gap:3px;text-align:center;min-width:0}
.mostra-n{font-family:var(--fs);font-weight:700;font-size:2.3rem;line-height:.9;letter-spacing:-.03em}
.mostra-lado--conv .mostra-n{color:var(--tinta-45)}
.mostra-lado--part .mostra-n{color:var(--verde-vivo)}
.mostra-lado .mono-s{color:var(--tinta-45);line-height:1.5}
.mostra-seta{width:19px;height:19px;flex:none;color:var(--terra)}

.mostra-linhas{padding:11px 14px;display:grid;gap:0}
.mostra-linhas div{display:flex;align-items:baseline;justify-content:space-between;gap:12px;
  padding:9px 0;border-bottom:1px dashed var(--fio)}
.mostra-linhas div:last-child{border-bottom:0}
.mostra-linhas span:first-child{font-size:.88rem;color:var(--tinta-70);line-height:1.35}
.mostra-linhas b{font-family:var(--fd);font-weight:800;font-size:.98rem;letter-spacing:-.024em;
  white-space:nowrap;color:var(--tinta)}
.mostra-linhas b.emterra{color:var(--terra)}
@media(max-width:999px){.mostra{max-width:400px}.mostra::before{inset:11px -7px -9px 7px}}


/* ── O título, no respiro das outras páginas ────────────────
   O .abertura do ferramenta.css foi escrito para a Régua, que
   tem a manchete mais fechada do site: entrelinha 1,03, largura
   88 e espaçamento -.035em. A home e o Por Onde Começar usam a
   medida mais larga, e é ela que esta página segue, porque a
   manchete daqui é uma frase de duas linhas curtas e apertá-la
   faz as duas colarem uma na outra. ── */
.abertura h1{
  font-size:clamp(2.15rem,calc(1.72rem + 2.28vw),3.5rem);
  line-height:1.06;letter-spacing:-.03em;
  font-variation-settings:'wdth' 90,'opsz' 96;
  max-width:19ch;
}


/* ============================================================
   0b · A CAPA, em duas colunas
   ------------------------------------------------------------
   A capa do Por Onde Começar mora numa grade de duas colunas e
   ocupa a da esquerda, com a ficha do lado. Esta mora sozinha na
   largura inteira, e uma coluna de texto de 46 caracteres dentro
   de uma folha de 1100px deixa metade da folha vazia, com o
   botão esticado de ponta a ponta parecendo faixa de protesto.

   Então a folha se divide: o convite à esquerda, o formulário
   dentro de uma caixa à direita. O botão volta ao tamanho de um
   botão, os dois campos empilham, e o vazio some.
   ============================================================ */
@media(min-width:900px){
  .capa-corpo{
    display:grid;grid-template-columns:minmax(0,1fr) minmax(300px,.82fr);
    column-gap:clamp(30px,4.2vw,58px);align-items:start;
  }
  /* o rótulo, o título e a linha de apoio moram na coluna 1 */
  .capa-corpo > .mono,.capa-corpo > h2,.capa-corpo > .capa-sub,.capa-corpo > .capa-atos{grid-column:1}
  .capa-forma{grid-column:2;grid-row:1 / span 4;margin-top:0;padding-top:0;border-top:0}
  .capa-erro{grid-column:2}
}

/* A caixa do formulário: uma folha clara dentro da folha verde,
   para o formulário ter borda de formulário e não flutuar. */
.capa-forma{
  display:grid;gap:11px;align-content:start;
  margin-top:clamp(18px,2.6vw,24px);padding-top:clamp(17px,2.4vw,21px);
  border-top:1px solid rgba(247,242,230,.2);
}
@media(min-width:900px){
  .capa-forma{
    grid-template-columns:1fr;gap:13px;
    padding:clamp(19px,2.4vw,24px);border:1px solid rgba(247,242,230,.26);border-radius:2px;
    background:rgba(247,242,230,.05);
  }
  .capa-forma .capa-btn{grid-column:auto}
}

/* O que vem depois do botão, em três palavras. Existe para a
   pessoa saber o que está trocando pelo e-mail antes de dar. */
.capa-atos{display:grid;gap:0;margin-top:clamp(15px,2.2vw,20px);
  padding-top:clamp(13px,1.8vw,16px);border-top:1px solid rgba(247,242,230,.2)}
.capa-atos div{display:grid;grid-template-columns:auto minmax(0,1fr);gap:11px;align-items:baseline;
  padding:8px 0;border-bottom:1px dashed rgba(247,242,230,.14)}
.capa-atos div:last-child{border-bottom:0}
/* A linha do que eu guardo. Mora dentro da caixa do formulário,
   embaixo do botão, que é onde a pergunta nasce: a pessoa acabou
   de escrever o e-mail dela. Era um cartão inteiro na abertura e
   virou uma linha, porque cartão de aviso no alto da página faz
   parecer que tem algo a esconder. */
.capa-fino{font-size:.795rem;line-height:1.5;color:rgba(247,242,230,.55)}

.capa-atos b{font-family:var(--fd);font-weight:800;font-size:.98rem;line-height:1;color:var(--terra-viva);
  font-variation-settings:'wdth' 78;letter-spacing:-.04em}
.capa-atos span{font-size:.93rem;line-height:1.35;color:rgba(247,242,230,.82)}


/* ============================================================
   0c · O PLACAR
   ------------------------------------------------------------
   A faixa com os três números que importam, grudada no alto da
   conta enquanto ela rola. É a peça que faz a ferramenta parecer
   ferramenta: sem ela, mexer num campo do ato 01 muda um número
   do ato 03 que está a oitocentos pixels dali, e o efeito
   acontece sem ninguém ver.

   Ela gruda ENCOSTADA na barra do menu, que é fixa e flutua a
   12px do alto. O pé da barra fica em 76px acima de 1024 e em
   72px abaixo disso, e é exatamente esse o valor daqui.

   Encostada, e não com folga: qualquer folga entre as duas vira
   uma fresta por onde passa uma fatia de texto rolando, e uma
   fatia de texto de dez pixels entre duas barras é a coisa mais
   suja que uma página pode ter.

   No papel ela para de grudar e vira o cabeçalho do documento,
   que é o resumo que o contador lê primeiro.
   ============================================================ */
.placar{
  position:sticky;top:76px;z-index:6;
  display:grid;grid-template-columns:repeat(3,minmax(0,1fr));
  background:var(--folha);border:1.5px solid var(--fio-forte);border-radius:2px;
  box-shadow:var(--papel-1);
  margin-bottom:clamp(1.1rem,2.4vw,1.6rem);
}
.placar > div{padding:12px 16px;border-right:1px dashed var(--fio-medio);min-width:0;
  transition:background .5s var(--ease)}
.placar > div:last-child{border-right:0}
.placar .mono-s{color:var(--tinta-45);display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.placar b{display:block;margin-top:4px;font-family:var(--fs);font-weight:700;
  font-size:clamp(1.32rem,3.4vw,1.95rem);line-height:1;letter-spacing:-.03em;color:var(--verde-vivo);
  font-variant-numeric:tabular-nums;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.placar b[data-mau="sim"]{color:var(--terra)}
.placar b i{font-style:normal;font-family:var(--fd);font-weight:700;font-size:.42em;
  color:var(--tinta-45);padding-left:.3em;letter-spacing:-.01em}

/* O pisca: num placar de três números, sem ele a pessoa não sabe
   qual dos três se mexeu. */
@media(prefers-reduced-motion:no-preference){
  .placar > div[data-pisca]{animation:placarPisca .55s var(--ease)}
  @keyframes placarPisca{0%{background:var(--terra-fraca)}100%{background:transparent}}
}

/* No celular a barra do menu é mais baixa, e três números em
   390px pedem letra menor e rótulo em duas linhas. */
@media(max-width:1023px){.placar{top:72px}}

@media(max-width:700px){
  .placar > div{padding:10px 11px}
  .placar .mono-s{font-size:.45rem;letter-spacing:.1em}
  .placar b{font-size:clamp(1.02rem,4.6vw,1.3rem)}
  .placar b i{display:none}
}


/* ============================================================
   0d · OS DOIS CENÁRIOS
   ------------------------------------------------------------
   Guardar congela a conta de agora numa coluna. A partir daí
   toda mexida move só a outra, e a diferença entre as duas
   aparece escrita embaixo.

   Duas colunas, e não cinco. Comparador de muitas colunas vira
   planilha, e planilha é exatamente o que o médico já não
   conseguiu preencher.
   ============================================================ */
.guardar{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)}
.guardar .mono-s{color:var(--tinta-25);margin-right:auto;line-height:1.8;max-width:48ch}
@media(max-width:640px){.guardar .mono-s{margin-right:0;width:100%}.guardar .btn{width:100%}}

.duas{display:grid;grid-template-columns:1fr 1fr;border-top:1.5px solid var(--fio-forte)}
@media(max-width:640px){.duas{grid-template-columns:1fr}}
.col{padding:clamp(16px,2.2vw,21px) clamp(15px,2.2vw,22px)}
.col--a{border-right:1px dashed var(--fio-medio);padding-left:var(--margem);background:var(--folha-2)}
.col--b{padding-right:var(--pad-dir)}
@media(max-width:640px){
  .col{padding-left:var(--margem);padding-right:var(--pad-dir)}
  .col--a{border-right:0;border-bottom:1px dashed var(--fio-medio)}
}
.col-cab{display:flex;align-items:center;gap:9px;padding-bottom:11px;margin-bottom:3px;
  border-bottom:1.5px solid var(--fio-forte)}
.col-pin{width:9px;height:9px;border-radius:50%;flex:none;background:var(--tinta-45)}
.col--b .col-pin{background:var(--terra)}
.col-cab .mono-s{color:var(--tinta)}
.col-cab em{margin-left:auto;font-style:normal;font-family:var(--fm);font-size:.46rem;font-weight:700;
  letter-spacing:.12em;text-transform:uppercase;color:var(--tinta-45);white-space:nowrap}
.col-l{display:flex;align-items:baseline;justify-content:space-between;gap:12px;
  padding:9px 0;border-bottom:1px dashed var(--fio)}
.col-l:last-child{border-bottom:0}
.col-l span{font-size:.885rem;line-height:1.35;color:var(--tinta-70)}
.col-l b{font-family:var(--fd);font-weight:800;font-size:1rem;letter-spacing:-.026em;white-space:nowrap;
  font-variant-numeric:tabular-nums;color:var(--tinta)}
.col-l b.melhor{color:var(--verde-vivo)}
.col-l b.pior{color:var(--terra)}

.duas-pe{display:flex;align-items:center;gap:12px;flex-wrap:wrap;
  padding:14px var(--pad-dir) 15px var(--margem);
  border-top:1.5px solid var(--fio-forte);background:var(--verde-fraco)}
.duas-pe p{flex:1 1 340px;font-size:.93rem;line-height:1.55;color:var(--tinta-70)}
.duas-pe strong{color:var(--tinta);font-weight:600}
.duas-pe em{font-style:normal;color:var(--verde-vivo);font-weight:600}
.mini{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;white-space:nowrap}
.mini:hover{color:var(--terra);border-color:var(--terra)}


/* ============================================================
   1 · OS ATOS
   ------------------------------------------------------------
   Três folhas empilhadas, numeradas. Cada uma é um pedaço da
   pergunta, e cada uma responde o próprio pedaço antes de a
   seguinte começar. Quem só quiser o preço para na primeira.
   ============================================================ */
/* A barra do menu é fixa e flutua a 12px do alto, então rolar
   até o começo da conta sem margem enfiaria a primeira folha
   por baixo dela. O recuo é a altura da barra mais o respiro
   dela, e vale para a rolagem da capa e para qualquer link que
   apontar para #ferramenta. */
.calc{padding:clamp(.6rem,1.6vw,1.2rem) 0 clamp(1.4rem,3vw,2.2rem);scroll-margin-top:96px}
.ato{margin-top:clamp(1.1rem,2.4vw,1.6rem);overflow:hidden}
.ato:first-child{margin-top:0}

.ato-cab{padding:clamp(20px,2.8vw,26px) var(--pad-dir) clamp(15px,2.2vw,19px) var(--margem)}
.ato-cab h2{font-size:clamp(1.28rem,calc(1.14rem + .62vw),1.68rem);letter-spacing:-.032em;margin-top:9px;max-width:26ch}
.ato-cab h2 em{font-style:normal;color:var(--verde-vivo)}
.ato-cab p{margin-top:10px;font-size:.955rem;line-height:1.55;color:var(--tinta-70);max-width:60ch}
.ato-cab strong{color:var(--tinta);font-weight:600}
.ato-no{margin-left:auto;font-family:var(--fm);font-size:.535rem;font-weight:700;letter-spacing:.155em;
  text-transform:uppercase;color:var(--tinta-25)}
.ato-rot{display:flex;align-items:center;gap:9px;flex-wrap:wrap}


/* ============================================================
   2 · OS CAMPOS
   ------------------------------------------------------------
   Pequenos e lado a lado, porque precisam caber junto com o
   número que eles movem. Três feitios só:

     número     caixa com o R$ ou a unidade grudada
     pastilhas  escolhas curtas, do tamanho do polegar
     régua      o que é porcentagem e se entende arrastando
   ============================================================ */
.campos{
  display:grid;gap:clamp(13px,1.8vw,17px);
  padding:clamp(15px,2.2vw,19px) var(--pad-dir) clamp(18px,2.6vw,23px) var(--margem);
  border-top:1px dashed var(--fio-medio);
  background:var(--folha-2);
}
@media(min-width:660px){.campos{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(min-width:980px){.campos[data-cols="3"]{grid-template-columns:repeat(3,minmax(0,1fr))}}
/* um campo que precisa da linha inteira, como a régua */
.campo--largo{grid-column:1 / -1}

.campo{display:grid;gap:6px;align-content:start;min-width:0}
.campo-rot{color:var(--verde-vivo);line-height:1.5}
.campo-nota{font-family:var(--fm);font-size:.455rem;font-weight:600;letter-spacing:.11em;text-transform:uppercase;
  color:var(--tinta-45);line-height:1.7}

/* ── número ── */
.campo-cx{display:flex;align-items:stretch;border:1.5px solid var(--fio-forte);border-radius:2px;
  background:var(--folha);transition:border-color .16s var(--ease),box-shadow .16s var(--ease)}
.campo-cx:focus-within{border-color:var(--terra);box-shadow:0 0 0 3px var(--terra-fraca)}
.campo-un{display:flex;align-items:center;padding:0 2px 0 11px;font-family:var(--fs);font-size:1rem;
  color:var(--tinta-45);flex:none}
.campo-un--dir{padding:0 11px 0 4px;font-family:var(--fm);font-size:.5rem;font-weight:700;
  letter-spacing:.11em;text-transform:uppercase}
.campo-cx input{
  flex:1;min-width:0;width:100%;border:0;background:transparent;outline:none;
  font-family:var(--fd);font-weight:800;font-size:clamp(1.06rem,2.2vw,1.24rem);letter-spacing:-.03em;
  color:var(--tinta);padding:11px 10px 11px 4px;
}
.campo-cx input::-webkit-outer-spin-button,
.campo-cx input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}
.campo-cx input[type=number]{-moz-appearance:textfield;appearance:textfield}

/* ── pastilhas ── */
.chips{display:flex;gap:6px;flex-wrap:wrap}
.chips 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:10px 13px;background:var(--folha);color:var(--tinta-70);
  transition:border-color .16s var(--ease),color .16s var(--ease),background .16s var(--ease);
}
.chips button:hover{border-color:var(--verde-vivo);color:var(--verde-vivo)}
.chips button[aria-pressed="true"]{background:var(--verde-vivo);border-color:var(--verde-vivo);color:#F7F2E6}

/* ── régua de arrastar ──
   O polegar é o "O" da marca, igual ao da home: anel de tinta
   com miolo terracota. ── */
.regua-l{display:flex;align-items:center;gap:13px}
.regua-v{font-family:var(--fs);font-size:1.1rem;font-weight:700;color:var(--terra);
  min-width:4.2ch;text-align:right;flex:none}
.regua-i{flex:1;min-width:0;-webkit-appearance:none;appearance:none;background:transparent;
  height:24px;margin:0;cursor:grab;outline:none}
.regua-i:active{cursor:grabbing}
.regua-i::-webkit-slider-runnable-track{height:2px;border-radius:2px;background:var(--fio-medio)}
.regua-i::-moz-range-track{height:2px;border-radius:2px;background:var(--fio-medio)}
.regua-i::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;width:19px;height:19px;
  margin-top:-8.5px;border-radius:50%;background:var(--terra);border:3.4px solid var(--fio-forte);
  box-shadow:var(--papel-3);transition:transform .16s var(--ease)}
.regua-i::-moz-range-thumb{width:19px;height:19px;border-radius:50%;background:var(--terra);
  border:3.4px solid var(--fio-forte);box-shadow:var(--papel-3);transition:transform .16s var(--ease)}
.regua-i:hover::-webkit-slider-thumb,.regua-i:active::-webkit-slider-thumb{transform:scale(1.14)}
.regua-i:hover::-moz-range-thumb,.regua-i:active::-moz-range-thumb{transform:scale(1.14)}
.regua-i:focus-visible::-webkit-slider-thumb{box-shadow:0 0 0 4px var(--terra-fraca)}
.regua-i:focus-visible::-moz-range-thumb{box-shadow:0 0 0 4px var(--terra-fraca)}

/* ── a gaveta da lista comprida ─────────────────────────────
   Um <select> desenha a lista aberta com o sistema operacional,
   fora do alcance do CSS: fundo branco de sistema e realce azul
   de sistema no meio de uma folha de papel bege. Numa página em
   que tudo é papel, ele é a única peça que denuncia o formulário.

   Aqui a lista é uma gaveta que sai da própria caixa: mesma
   folha, mesma borda, mesma sombra. O item escolhido carrega um
   tique em terracota, e o item sob o cursor escurece um tom, sem
   azul nenhum. ── */
.escolha{position:relative}
.escolha-botao{
  display:flex;align-items:center;gap:10px;width:100%;
  border:1.5px solid var(--fio-forte);border-radius:2px;background:var(--folha);
  font-family:var(--fc);font-size:.97rem;color:var(--tinta);padding:12px 12px 12px 11px;
  transition:border-color .16s var(--ease),box-shadow .16s var(--ease);
}
.escolha-botao [data-valor]{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.escolha-botao svg{width:11px;height:11px;flex:none;color:var(--tinta-45);transition:transform .18s var(--ease)}
.escolha-botao:hover{border-color:var(--verde-vivo)}
.escolha-botao[aria-expanded="true"]{border-color:var(--terra);box-shadow:0 0 0 3px var(--terra-fraca)}
.escolha-botao[aria-expanded="true"] svg{transform:rotate(180deg);color:var(--terra)}

/* Acima da barra do menu, que é fixa e vale 200. Uma gaveta
   aberta é passageira: enquanto ela está de pé, é ela que manda
   na tela. Sem isso, um campo perto do alto abre a lista POR
   BAIXO da barra e as primeiras especialidades somem.

   A altura e o lado quem decide é o motor, na hora de abrir,
   medindo o espaço que sobra: cabe embaixo, abre embaixo; não
   cabe e sobra em cima, abre para cima. */
.escolha-lista{
  position:absolute;z-index:250;top:calc(100% + 5px);left:0;right:0;
  max-height:min(46vh,320px);overflow-y:auto;overscroll-behavior:contain;
  background:var(--folha);border:1.5px solid var(--fio-forte);border-radius:2px;
  box-shadow:var(--papel-2);padding:4px;
}
.escolha-lista[data-lado="cima"]{top:auto;bottom:calc(100% + 5px)}
.escolha-lista [data-op]{
  display:flex;align-items:center;gap:9px;width:100%;
  font-family:var(--fc);font-size:.94rem;line-height:1.35;color:var(--tinta-70);
  padding:9px 10px;border-radius:2px;
}
.escolha-lista [data-op]:hover{background:var(--folha-2);color:var(--tinta)}
.escolha-lista [data-op]:focus{outline:0;background:var(--verde-fraco);color:var(--tinta)}
.escolha-lista [data-op]:focus-visible{outline:2px solid var(--terra);outline-offset:-2px}
.escolha-lista [data-op][aria-selected="true"]{color:var(--tinta);font-weight:600}
.escolha-marca{width:11px;height:11px;flex:none;color:var(--terra);opacity:0}
.escolha-marca svg{width:11px;height:11px;display:block}
[aria-selected="true"] > .escolha-marca{opacity:1}


/* ============================================================
   3 · A SAÍDA DE CADA ATO
   ------------------------------------------------------------
   O .chave do questionario.css já é o número grande em campo
   verde, e é ele que abre cada ato. O que vem abaixo muda de
   ato para ato.
   ============================================================ */
/* dois números do mesmo tamanho, um do lado do outro */
.dupla{display:grid;grid-template-columns:1fr 1fr;
  border-top:1px dashed var(--fio-medio)}
@media(max-width:640px){.dupla{grid-template-columns:1fr}}
.dupla > div{padding:clamp(15px,2.2vw,20px) clamp(15px,2.2vw,22px)}
.dupla > div:first-child{border-right:1px dashed var(--fio-medio);padding-left:var(--margem)}
.dupla > div:last-child{padding-right:var(--pad-dir)}
@media(max-width:640px){
  .dupla > div{padding-left:var(--margem);padding-right:var(--pad-dir)}
  .dupla > div:first-child{border-right:0;border-bottom:1px dashed var(--fio-medio)}
}
.dupla .mono-s{color:var(--tinta-45)}
.dupla-n{display:block;margin-top:9px;font-family:var(--fs);font-weight:700;
  font-size:clamp(1.85rem,5vw,2.5rem);line-height:.94;letter-spacing:-.03em;color:var(--tinta)}
.dupla-n--verde{color:var(--verde-vivo)}
.dupla-n--terra{color:var(--terra)}
.dupla p{margin-top:9px;font-size:.885rem;line-height:1.5;color:var(--tinta-70)}
.dupla strong{color:var(--tinta);font-weight:600}

/* ── O piso na régua do preço ───────────────────────────────
   A régua do questionario.css tem duas peças: uma faixa (o que
   se pratica) e uma barra (o número dele). O piso da FENAM é
   uma terceira coisa, e é um número só, não uma faixa: então é
   um traço, e não uma tarja. ── */
/* top e bottom em zero, e não estourando para fora: a régua do
   questionario.css corta o que passa da borda (overflow:hidden),
   então um traço que saísse dela apareceria menor, não maior. */
.faixa-piso{position:absolute;top:0;bottom:0;width:2.5px;background:var(--tinta);opacity:.85}
.lg--piso i{width:3px;height:13px;border-radius:0;background:var(--tinta)}
.lg--piso{color:var(--tinta-70)}

/* ── O número grande, no celular ────────────────────────────
   O .chave do questionario.css põe o número e o texto lado a
   lado, e lá isso funciona porque ele mora numa coluna larga.
   Aqui, num celular de 390px, o número come metade da linha e
   sobra uma coluna de quatro palavras para o texto. Abaixo de
   560px os dois empilham: o número em cima, inteiro, e o texto
   embaixo com a largura toda. ── */
@media(max-width:560px){
  .chave{grid-template-columns:1fr;gap:12px}
  .chave-num{font-size:clamp(3rem,17vw,4.2rem);line-height:.85}
}

/* ── A troca: os dois lados e a seta ──────────────────────
   O número da esquerda é o que ele faz hoje, o da direita é o
   que substituiria. A seta no meio é o que a ferramenta tem
   para dizer, então ela é a única coisa em terracota. ── */
.troca{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:clamp(12px,2.6vw,26px);
  padding:clamp(20px,3vw,30px) var(--pad-dir) clamp(20px,3vw,30px) var(--margem);
  border-top:1.5px solid var(--fio-forte);background:var(--verde-fraco)}
@media(max-width:560px){
  .troca{grid-template-columns:1fr;text-align:center;gap:14px}
  .troca-seta{transform:rotate(90deg);justify-self:center}
}
.troca-lado{display:grid;gap:5px;min-width:0}
.troca-lado .mono-s{color:var(--tinta-45)}
.troca-n{font-family:var(--fs);font-weight:700;font-size:clamp(2.9rem,9vw,4.4rem);line-height:.85;
  letter-spacing:-.04em}
.troca-lado--conv .troca-n{color:var(--tinta-45)}
.troca-lado--part .troca-n{color:var(--verde-vivo)}
.troca-lado b{font-family:var(--fd);font-weight:800;font-size:clamp(.95rem,2.2vw,1.1rem);
  letter-spacing:-.026em;line-height:1.2}
.troca-lado span.troca-p{font-size:.86rem;line-height:1.45;color:var(--tinta-70)}
.troca-seta{width:clamp(30px,5vw,44px);height:clamp(30px,5vw,44px);flex:none;color:var(--terra)}

/* a leitura que fica embaixo da troca */
.leitura{padding:clamp(15px,2.2vw,20px) var(--pad-dir) clamp(17px,2.6vw,22px) var(--margem);
  border-top:1px dashed var(--fio-medio);display:grid;gap:11px}
.leitura p{font-size:.93rem;line-height:1.55;color:var(--tinta-70);max-width:64ch}
.leitura strong{color:var(--tinta);font-weight:600}
.leitura em{font-style:normal;color:var(--verde-vivo);font-weight:600}


/* ============================================================
   4 · O VALE
   ------------------------------------------------------------
   O gráfico do buraco. É a peça mais importante da ferramenta e
   a única que ninguém mais mostra: entre largar o convênio e
   encher a agenda de particular existe um vão, e ele tem
   tamanho em reais e em meses.

   Desenhado em SVG na hora, sobre papel quadriculado, com três
   coisas só: a linha do que ele fatura hoje, a curva do que
   passaria a faturar, e o vão entre as duas pintado.
   ============================================================ */
.vale{border-top:1.5px solid var(--fio-forte);
  padding:clamp(18px,2.6vw,24px) var(--pad-dir) clamp(16px,2.4vw,20px) var(--margem);
  background:var(--folha)}
.vale-cab{display:flex;align-items:baseline;gap:12px;flex-wrap:wrap;margin-bottom:14px}
.vale-cab .mono-s{color:var(--tinta-45)}
.vale-cab b{margin-left:auto;font-family:var(--fd);font-weight:800;font-size:.98rem;letter-spacing:-.026em}
@media(max-width:520px){.vale-cab b{margin-left:0}}

.vale-fig{display:block;width:100%;height:auto}
.vale-quadro{fill:var(--folha);stroke:var(--fio-medio);stroke-width:1}
.vale-hoje{stroke:var(--tinta-45);stroke-width:1;stroke-dasharray:4 3.5;fill:none}
.vale-buraco{fill:var(--terra);fill-opacity:.22}
.vale-curva{stroke:var(--verde-vivo);stroke-width:1.7;fill:none;stroke-linejoin:round;stroke-linecap:round}
.vale-marca{fill:var(--verde-vivo)}
/* Os meses ficam FORA do desenho, em letra de verdade. Dentro do
   SVG eles esticariam junto com ele, e a mesma letra sairia enorme
   no computador e ilegível no celular. As duas pontas encostam na
   borda; as do meio se centram no próprio mês. */
.vale-eixo-x{position:relative;height:15px;margin-top:7px}
.vale-eixo-x span{position:absolute;top:0;white-space:nowrap;
  font-family:var(--fm);font-size:.45rem;font-weight:600;letter-spacing:.11em;
  text-transform:uppercase;color:var(--tinta-25);line-height:1.6}
.vale-cruza{stroke:var(--verde-vivo);stroke-width:.8;stroke-dasharray:2.5 2.5}

.vale-leg{display:flex;flex-wrap:wrap;gap:7px 16px;margin-top:12px}
.lg--hoje i{background:transparent;border-top:2px dashed var(--tinta-45);border-radius:0;height:2px}
.lg--hoje{color:var(--tinta-45)}
.lg--curva i{background:var(--verde-vivo)}
.lg--curva{color:var(--verde-vivo)}
.lg--buraco i{background:rgba(181,85,31,.22);border:1px solid var(--terra)}
.lg--buraco{color:var(--terra)}

/* os dois números do vale, no pé do gráfico */
.vale-conta{display:grid;grid-template-columns:1fr 1fr;gap:clamp(12px,2.4vw,22px);
  margin-top:15px;padding-top:14px;border-top:1px dashed var(--fio-medio)}
@media(max-width:520px){.vale-conta{grid-template-columns:1fr;gap:14px}}
.vale-conta > div .mono-s{color:var(--tinta-45)}
.vale-conta b{display:block;margin-top:7px;font-family:var(--fs);font-weight:700;
  font-size:clamp(1.5rem,4vw,1.95rem);line-height:1;letter-spacing:-.03em;color:var(--terra)}
.vale-conta b[data-zero="sim"]{color:var(--verde-vivo)}
.vale-conta p{margin-top:7px;font-size:.855rem;line-height:1.45;color:var(--tinta-70)}


/* ============================================================
   4b · O GRÁFICO QUE RESPONDE
   ------------------------------------------------------------
   O desenho do vale era a peça mais forte da página e a única
   que não respondia a nada: mostrava o formato do buraco e
   escondia o número de cada mês, que é justamente o que se leva
   para o contador.

   Agora o dedo lê o mês debaixo dele, e o pior mês fica marcado
   mesmo quando ninguém está tocando. Leitura que some junto com
   o dedo não vai para conversa nenhuma.
   ============================================================ */
.vale-fig{cursor:crosshair;touch-action:none}
.vale-agulha{stroke:var(--terra);stroke-width:1}
.vale-ponto{fill:var(--terra);stroke:var(--folha);stroke-width:1.4}
/* o pior mês: anel vazado, para não competir com o ponto cheio
   que segue o dedo */
.vale-pior{fill:none;stroke:var(--terra);stroke-width:1;stroke-dasharray:2 2}

.vale-leitura{display:flex;align-items:baseline;gap:9px;flex-wrap:wrap;
  margin-top:12px;padding-top:12px;border-top:1px dashed var(--fio-medio);
  min-height:46px}
.vale-leitura .mono-s{color:var(--tinta-45);white-space:nowrap}
.vale-leitura b{font-family:var(--fd);font-weight:800;font-size:1.02rem;letter-spacing:-.026em;
  font-variant-numeric:tabular-nums;white-space:nowrap}
.vale-leitura b.emterra{color:var(--terra)}
.vale-leitura span{font-size:.9rem;line-height:1.45;color:var(--tinta-70)}
.vale-leitura strong{color:var(--tinta);font-weight:600}
.vale-dica{font-family:var(--fm);font-size:.45rem;font-weight:600;letter-spacing:.11em;
  text-transform:uppercase;color:var(--tinta-25);margin-left:auto;white-space:nowrap}
@media(max-width:640px){.vale-dica{margin-left:0}}


/* ============================================================
   4c · QUAL BOTÃO MUDA MAIS
   ------------------------------------------------------------
   O médico tem quatorze campos e nenhuma pista de qual deles
   pesa. Esta tira compara, na mesma unidade, o que cada mexida
   realista faria com o buraco.

   A barra mais longa é a alavanca que mais rende, e ela troca de
   linha conforme a conta muda. É por isso que a tira existe: a
   resposta não é a mesma para dois médicos.
   ============================================================ */
.alavancas{padding:clamp(16px,2.4vw,22px) var(--pad-dir) clamp(17px,2.6vw,22px) var(--margem);
  border-top:1.5px solid var(--fio-forte);background:var(--folha)}
.alav-cab{display:flex;align-items:baseline;gap:12px;flex-wrap:wrap;margin-bottom:14px}
.alav-cab .mono-s{color:var(--tinta-45)}
.alav-cab b{margin-left:auto;font-family:var(--fd);font-weight:800;font-size:.98rem;letter-spacing:-.026em}
@media(max-width:560px){.alav-cab b{margin-left:0}}

.alav{display:grid;gap:10px}
.alav-l{display:grid;grid-template-columns:minmax(130px,1.05fr) minmax(0,2fr) auto;gap:13px;align-items:center}
@media(max-width:620px){.alav-l{grid-template-columns:1fr;gap:5px}}
.alav-l .mono-s{color:var(--tinta-70);line-height:1.6}
.alav-barra{position:relative;height:19px;background:var(--folha-2);
  border:1px solid var(--fio);border-radius:2px;overflow:hidden}
.alav-barra i{position:absolute;left:0;top:0;bottom:0;display:block;
  background:var(--verde-vivo);opacity:.72;transition:width .42s var(--ease)}
.alav-l[data-campea="sim"] .alav-barra i{background:var(--terra);opacity:.88}
.alav-l[data-campea="sim"] .mono-s{color:var(--terra)}
.alav-v{font-family:var(--fd);font-weight:800;font-size:.96rem;letter-spacing:-.026em;
  white-space:nowrap;color:var(--tinta);font-variant-numeric:tabular-nums}
.alav-diz{margin-top:14px;padding-top:12px;border-top:1px dashed var(--fio-medio);
  font-size:.92rem;line-height:1.55;color:var(--tinta-70);max-width:66ch}
.alav-diz strong{color:var(--tinta);font-weight:600}
.alav-diz em{font-style:normal;color:var(--verde-vivo);font-weight:600}


/* ============================================================
   5 · O FECHO
   ------------------------------------------------------------
   O carimbo com tudo que foi respondido, o botão de levar a
   folha e o convite. O carimbo existe para a folha impressa
   fazer sentido sozinha: papel não tem campo de digitar, então
   o que foi digitado precisa estar escrito.
   ============================================================ */
.carimbo{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)}
.carimbo-l{display:flex;flex-wrap:wrap;gap:6px;margin-top:11px}
.carimbo-l 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)}
.carimbo-l span b{color:var(--tinta);font-weight:700}

.levar{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)}
.levar .mono-s{color:var(--tinta-25);margin-right:auto;line-height:1.8;max-width:44ch}
@media(max-width:600px){.levar .mono-s{margin-right:0;width:100%}.levar .btn{width:100%}}


/* ============================================================
   5b · O CONVITE DO FIM, em duas colunas
   ------------------------------------------------------------
   Era o mesmo defeito da capa: dois parágrafos numa coluna
   estreita e meia folha verde vazia à direita. Dois parágrafos
   no fim de um relatório de três atos ninguém lê.

   Agora a esquerda tem a pergunta e uma frase, e a direita tem
   a resposta em número: o que ele disse conseguir por mês contra
   o que a saída dele pede. Os dois números são dele, saíram da
   conta que ele acabou de fazer, e é isso que faz o bloco parar
   de ser anúncio e virar conclusão.
   ============================================================ */
@media(min-width:900px){
  .convite .folha-corpo{
    display:grid;grid-template-columns:minmax(0,1fr) minmax(280px,.76fr);
    column-gap:clamp(30px,4.2vw,58px);align-items:start;
  }
  .convite .folha-corpo > .mono,
  .convite .folha-corpo > h3,
  .convite .folha-corpo > p,
  .convite .folha-corpo > .convite-ctas,
  .convite .folha-corpo > .convite-nota{grid-column:1}
  .convite-conta{grid-column:2;grid-row:1 / span 5;margin-top:0}
}

/* Caixa vazia é caixa que não existe. Antes de a pessoa passar
   pela capa a conta não rodou, então não há número nenhum para
   pôr aqui, e sem esta linha o que aparece é um retângulo oco no
   meio do convite. */
.convite-conta:empty{display:none}

.convite-conta{
  margin-top:clamp(16px,2.4vw,20px);
  border:1px solid rgba(247,242,230,.26);border-radius:2px;background:rgba(247,242,230,.05);
  padding:clamp(17px,2.2vw,21px);display:grid;gap:0;
}
.convite-conta > div{padding:11px 0;border-bottom:1px dashed rgba(247,242,230,.16)}
.convite-conta > div:first-child{padding-top:0}
.convite-conta > div:last-of-type{border-bottom:0;padding-bottom:0}
.convite-conta .mono-s{color:rgba(247,242,230,.55);display:block}
.convite-conta b{display:block;margin-top:6px;font-family:var(--fs);font-weight:700;
  font-size:clamp(1.85rem,4.6vw,2.5rem);line-height:1;letter-spacing:-.03em;color:#F7F2E6}
.convite-conta b i{font-style:normal;font-family:var(--fd);font-weight:700;font-size:.4em;
  letter-spacing:-.01em;color:rgba(247,242,230,.6);padding-left:.3em}
.convite-conta b[data-falta="sim"]{color:var(--terra-viva)}
.convite-conta .convite-diz{
  margin-top:13px;padding-top:13px;border-top:1px solid rgba(247,242,230,.2);
  font-size:.885rem;line-height:1.5;color:rgba(247,242,230,.82);
}
.convite-conta .convite-diz strong{color:#F7F2E6;font-weight:600}

/* ============================================================
   6 · IMPRESSÃO
   ------------------------------------------------------------
   No papel some tudo que se mexe: a barra, a abertura, a capa,
   os campos e os botões. Fica a conta, que é o que ele levaria
   para conversar com o contador ou com o sócio.
   ============================================================ */
/* A assinatura da folha impressa. Na tela ela não existe: a
   página inteira já diz de quem é, e o rodapé está logo abaixo.
   No papel, não: a folha vai parar na mão do contador ou do
   sócio, e uma conta sem procedência não vale nada. */
.assinatura-papel{display:none}

@media print{
  body{background:#fff}
  body::before,.nav-wrapper,.pular,.abertura,.capa,.campos,.levar,.footer,
  .convite-ctas,.guardar,.duas-pe .mini,.vale-dica{display:none!important}
  /* O placar para de grudar e vira o cabeçalho do documento, que
     é o resumo que o contador lê antes de tudo. */
  .placar{position:static;box-shadow:none;border:1px solid #999;margin-bottom:14px}
  .placar > div{padding-left:22px}
  /* O convite fica de fora do papel (quem esconde é o
     ferramenta.css, e está certo: folha impressa é documento,
     não anúncio). A ressalva, ao contrário, sai INTEIRA, com o
     título junto: "eu não sou contador" é a frase mais
     importante dela, e some se só o miolo for impresso. */
  .ressalva[open] > summary,.ressalva > summary{display:flex!important}
  .ressalva > .dobra-corpo{display:block!important}
  .folha{box-shadow:none;border:1px solid #999;break-inside:avoid;page-break-inside:avoid}
  .folha::before,.furos{display:none}
  .ato{margin-top:14px}
  .ato-cab,.leitura,.vale,.carimbo,.conta-pe{padding-left:22px;padding-right:22px}
  .chave,.troca{background:#fff;padding-left:22px;padding-right:22px}
  .dupla > div:first-child,.troca{padding-left:22px}
  .vale-buraco{fill-opacity:.3}

  .assinatura-papel{
    display:block;padding:13px 22px;border-top:1px dashed #999;
    font-family:var(--fm);font-size:.5rem;font-weight:600;letter-spacing:.12em;
    text-transform:uppercase;color:#555;line-height:1.8;
  }
}

@media(prefers-reduced-motion:reduce){
  .regua-i::-webkit-slider-thumb,.regua-i::-moz-range-thumb{transition:none}
  .regua-i:hover::-webkit-slider-thumb,.regua-i:active::-webkit-slider-thumb{transform:none}
}