/* ============================================================
   MUNDO | LP "Primeiro consultório" — o que é só desta página
   ------------------------------------------------------------
   O resto vem de fora, nesta ordem:

     /ferramentas/_motor/sistema.css   cores, fontes, o papel
     /assets/nav.css                   a barra
     /assets/lp.css                    as peças de toda LP

   Aqui mora só o que esta página tem e nenhuma outra:

     1 · a ordem de montagem, na abertura
     2 · o comprovante da bolsa
     3 · o documento do conselho, em azul
     4 · os três passos com preço
   ============================================================ */

/* O azul-petróleo é a cor do documento do conselho. Ele já
   existe na home, na Ficha 07, e entra aqui pelo mesmo motivo:
   é a cor de uma coisa que não é minha. Vive só na Ficha 04. */
:root{
  --cfm:#15606B;
  --cfm-vivo:#2A8695;
  --cfm-fraco:rgba(21,96,107,.07);
  --cfm-fio:rgba(21,96,107,.3);
}

/* ============================================================
   1 · A ORDEM DE MONTAGEM
   ------------------------------------------------------------
   A figura da abertura é a página inteira em miniatura: três
   coisas marcadas com "agora" e três riscadas com "depois".
   Quem só olhar a figura já sabe o que a página entrega.

   É HTML e não desenho, de propósito: assim o texto é texto de
   verdade, com a fonte da marca e legível para leitor de tela.
   ============================================================ */
.ordem{
  background:var(--folha);border:1px solid var(--fio-medio);border-radius:2px;
  box-shadow:var(--papel-2);overflow:hidden;transform:rotate(-.5deg);
}
.ordem-cab{
  display:flex;align-items:center;justify-content:space-between;gap:14px;
  padding:11px 15px 10px;border-bottom:1.5px solid var(--fio-forte);background:var(--folha-2);
}
.ordem-cab .mono-s{color:var(--tinta-45)}

.ordem-grupo{padding:13px 15px 15px}
.ordem-grupo + .ordem-grupo{border-top:1px solid var(--fio-medio);background:var(--folha-2)}
.ordem-tit{
  display:flex;align-items:center;gap:9px;
  padding-bottom:10px;margin-bottom:4px;border-bottom:1px dashed var(--fio-medio);
}
.ordem-grupo--agora .ordem-tit{color:var(--verde-vivo)}
.ordem-grupo--depois .ordem-tit{color:var(--tinta-25)}

.ordem-lista{list-style:none;display:grid;gap:2px}
.ordem-lista li{
  display:grid;grid-template-columns:18px minmax(0,1fr) auto;gap:10px;align-items:center;
  padding:8px 0;font-size:.925rem;line-height:1.3;
}
.ordem-mk{
  width:18px;height:18px;border-radius:2px;display:grid;place-items:center;
  border:1.4px solid var(--verde-vivo);color:var(--verde-vivo);background:var(--folha);
}
.ordem-mk svg{width:10px;height:10px}
.ordem-grupo--depois .ordem-mk{border-color:var(--fio-medio);border-style:dashed;background:transparent}
.ordem-grupo--depois li{color:var(--tinta-45)}
.ordem-custo{
  font-family:var(--fm);font-size:.475rem;font-weight:700;letter-spacing:.13em;
  text-transform:uppercase;color:var(--tinta-45);white-space:nowrap;
}
.ordem-custo--zero{color:var(--verde-vivo)}

/* ============================================================
   2 · O COMPROVANTE DA BOLSA
   ------------------------------------------------------------
   A seção do dinheiro abre com um número que não é meu: o valor
   da bolsa de residência, com a portaria que o fixou escrita no
   pé. É a régua de honestidade da página virada em objeto.

   Monoespaçada e alinhado à direita, como um contracheque de
   verdade. A linha do líquido é a que importa, então é a que
   ganha traço grosso e corpo maior.
   ============================================================ */
.comprovante{
  background:var(--folha);border:1px solid var(--fio-medio);border-radius:2px;
  box-shadow:var(--papel-2);overflow:hidden;transform:rotate(.5deg);
}
.comprovante-cab{
  padding:12px 16px;border-bottom:1.5px solid var(--fio-forte);background:var(--folha-2);
}
.comprovante-cab .mono-s{color:var(--terra);display:block}
.comprovante-cab b{
  display:block;margin-top:6px;font-family:var(--fd);font-weight:800;
  font-size:1rem;letter-spacing:-.024em;line-height:1.2;
}
.comprovante-corpo{padding:14px 16px 16px}
.comprovante-linha{
  display:flex;align-items:baseline;justify-content:space-between;gap:16px;
  padding:9px 0;border-bottom:1px dashed var(--fio-medio);
}
.comprovante-linha span{
  font-family:var(--fm);font-size:.505rem;font-weight:600;letter-spacing:.13em;
  text-transform:uppercase;color:var(--tinta-45);line-height:1.6;
}
.comprovante-linha b{
  font-family:var(--fs);font-weight:700;font-size:1.06rem;
  font-variant-numeric:tabular-nums;color:var(--tinta-70);white-space:nowrap;
}
.comprovante-linha--menos b{color:var(--terra)}
.comprovante-linha--total{
  border-bottom:0;border-top:1.5px solid var(--fio-forte);margin-top:4px;padding-top:13px;
}
.comprovante-linha--total span{color:var(--tinta)}
.comprovante-linha--total b{font-size:1.5rem;color:var(--tinta)}
.comprovante-pe{
  padding:11px 16px 13px;border-top:1px solid var(--fio-medio);background:var(--folha-2);
  font-family:var(--fm);font-size:.475rem;font-weight:600;letter-spacing:.11em;
  text-transform:uppercase;color:var(--tinta-45);line-height:1.85;
}
.comprovante-pe b{color:var(--terra);font-weight:700}

/* ============================================================
   3 · O DOCUMENTO DO CONSELHO
   ------------------------------------------------------------
   Duas colunas: o que passou a poder e o que continua proibido.
   Cada linha é uma frase do texto da página, não um resumo meu.

   O azul cuida da identidade do documento. Verde e terracota só
   aparecem dentro dos sinais, onde têm significado.
   ============================================================ */
.doc-cfm{
  border:1.5px solid var(--cfm-fio);border-radius:2px;background:var(--folha);
  box-shadow:var(--papel-2);overflow:hidden;margin-top:clamp(20px,3vw,28px);
}
.doc-cfm-cab{
  display:flex;align-items:center;justify-content:space-between;gap:14px;flex-wrap:wrap;
  padding:13px 17px;background:var(--cfm-fraco);border-bottom:1.5px solid var(--cfm-fio);
}
.doc-cfm-cab .mono-s{color:var(--cfm)}
.doc-cfm-cab b{font-family:var(--fm);font-size:.5rem;font-weight:700;letter-spacing:.14em;
  text-transform:uppercase;color:var(--tinta-45)}

.doc-cfm-grade{display:grid;grid-template-columns:minmax(0,1.25fr) minmax(0,.75fr)}
@media(max-width:760px){.doc-cfm-grade{grid-template-columns:1fr}}
.doc-cfm-col{padding:clamp(15px,2.2vw,20px) clamp(15px,2.2vw,20px) clamp(17px,2.4vw,22px)}
.doc-cfm-col + .doc-cfm-col{border-left:1px solid var(--fio-medio);background:var(--folha-2)}
@media(max-width:760px){
  .doc-cfm-col + .doc-cfm-col{border-left:0;border-top:1px solid var(--fio-medio)}
}
.doc-cfm-tit{
  display:block;padding-bottom:11px;margin-bottom:6px;
  border-bottom:1.5px solid currentColor;
}
.doc-cfm-col--pode .doc-cfm-tit{color:var(--verde-vivo)}
.doc-cfm-col--nao .doc-cfm-tit{color:var(--terra)}

.doc-cfm-lista{list-style:none;display:grid}
.doc-cfm-lista li{
  display:grid;grid-template-columns:19px minmax(0,1fr);gap:11px;align-items:start;
  padding:10px 0;border-bottom:1px dashed var(--fio);
  font-size:.925rem;line-height:1.45;color:var(--tinta-70);
}
.doc-cfm-lista li:last-child{border-bottom:0}
.doc-cfm-lista li strong{color:var(--tinta);font-weight:600}
.doc-cfm-sinal{
  width:19px;height:19px;flex:none;margin-top:1px;border-radius:2px;
  border:1.4px solid currentColor;display:grid;place-items:center;
}
.doc-cfm-sinal svg{width:10px;height:10px}
.doc-cfm-col--pode .doc-cfm-sinal{color:var(--verde-vivo)}
.doc-cfm-col--nao .doc-cfm-sinal{color:var(--terra)}
/* a linha que surpreende ganha o destaque que ela merece */
.doc-cfm-lista li[data-destaque]{background:var(--terra-fraca);margin:0 -9px;padding-left:9px;padding-right:9px}

.doc-cfm-pe{
  padding:12px 17px;border-top:1.5px solid var(--cfm-fio);background:var(--cfm-fraco);
  font-size:.875rem;line-height:1.55;color:var(--tinta-70);
}
.doc-cfm-pe strong{color:var(--cfm);font-weight:600}

/* ── As três perguntas, em serifa itálica ──
   É como o site marca gente falando. São as perguntas de quem
   lê, não uma citação do conselho. */
.cfm-perguntas{margin-top:clamp(18px,2.6vw,24px);padding-left:clamp(13px,1.4vw,17px);border-left:2px solid var(--cfm-fio)}
.cfm-perguntas p{
  font-family:var(--fs);font-style:italic;
  font-size:clamp(1.02rem,calc(.96rem + .3vw),1.2rem);line-height:1.32;letter-spacing:-.012em;
  color:var(--cfm);max-width:40ch;
}
.cfm-perguntas p + p{margin-top:8px}

.cfm-acao{display:flex;align-items:center;gap:clamp(14px,2.4vw,24px);flex-wrap:wrap;margin-top:clamp(18px,2.6vw,24px)}
.btn--cfm{background:var(--cfm);color:#F2FAFB;border-color:var(--cfm)}
.cfm-acao > p{font-size:.9rem;line-height:1.5;color:var(--tinta-45);max-width:42ch;flex:1 1 260px}

/* ============================================================
   4 · OS TRÊS PASSOS, COM PREÇO
   ------------------------------------------------------------
   A trilha do lp.css, com duas coisas a mais: um desenho por
   passo e uma etiqueta de quanto custa. O preço é o argumento
   inteiro desta página, então ele não fica escondido no texto.
   ============================================================ */
.passo-fig{
  background:var(--folha-2);border:1px solid var(--fio-medio);border-radius:2px;
  padding:12px;margin-bottom:14px;display:grid;place-items:center;box-shadow:var(--papel-3);
}
.passo-fig svg{width:100%;height:auto;max-width:190px;display:block}
.passo-custo{margin-top:11px}

@media(max-width:820px){
  /* na coluna única a figura não precisa da largura toda */
  .passo-fig{max-width:280px}
}

/* A nota da coluna do "pode": a linha do preço é a que
   surpreende, então ela ganha destaque e a explicação vem logo
   embaixo, sem sair da coluna. */
.doc-cfm-nota{
  margin-top:13px;padding-left:12px;border-left:2px solid var(--fio-terra);
  font-size:.865rem;line-height:1.55;color:var(--tinta-70);max-width:52ch;
}

/* As figuras dos passos entram depois do título, então o
   parágrafo precisa respirar por cima delas. */
.etapa .passo-fig + .etq{margin-bottom:4px}
.etapa .etq + p{margin-top:10px}