/* ============================================================
   MUNDO | LP "Site para médicos" — 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 pasta de três abas, sem JavaScript
     2 · a conta da captação
     3 · as duas folhas de proposta

   A página de busca em miniatura mudou de casa: agora mora no
   /assets/lp.css, porque as três LPs usam.
   ============================================================ */

/* ============================================================
   1 · A PASTA DE TRÊS ABAS
   ------------------------------------------------------------
   O nome da página é "site", mas o que ela entrega são três
   coisas. As abas mostram as três de uma vez e deixam a
   primeira aberta, que é a que a pessoa veio buscar.

   Abre sem uma linha de JavaScript: cada aba é um
   <input type="radio"> invisível e o CSS mostra o painel do
   que estiver marcado. Funciona no celular, no teclado e
   mesmo se o script da página falhar.

   Os rádios ficam presos no canto da tela (fixed) e não no
   topo da caixa (absolute): ao tocar num rótulo o navegador dá
   foco ao rádio dele, e se o rádio estivesse fora da tela ele
   rolaria a página até lá.
   ============================================================ */
.pasta{position:relative}
.pasta-r{position:fixed;top:0;left:0;width:1px;height:1px;opacity:0;pointer-events:none}

.pasta-abas{display:flex;gap:4px;flex-wrap:wrap;position:relative;z-index:2}
.pasta-abas label{
  display:inline-flex;align-items:center;gap:9px;
  font-family:var(--fm);font-size:.6rem;font-weight:700;letter-spacing:.15em;
  text-transform:uppercase;line-height:1;cursor:pointer;
  padding:12px 16px 11px;border:1px solid var(--fio-medio);border-bottom:0;
  border-radius:3px 3px 0 0;background:var(--folha-2);color:var(--tinta-45);
  position:relative;top:1px;
  transition:background .2s,color .2s,top .18s var(--ease);
}
.pasta-abas label:hover{color:var(--tinta)}
.pasta-abas label svg{flex:none;opacity:.5;transition:opacity .2s,color .2s}
#ent-1:checked ~ .pasta-abas label[for="ent-1"] svg,
#ent-2:checked ~ .pasta-abas label[for="ent-2"] svg,
#ent-3:checked ~ .pasta-abas label[for="ent-3"] svg{opacity:1;color:var(--terra)}
@media(max-width:640px){.pasta-abas label svg{display:none}}

.pasta-folha{
  position:relative;background:var(--folha);
  border:1px solid var(--fio-medio);border-radius:0 2px 2px 2px;box-shadow:var(--papel-2);
}
.pasta-painel{display:none}

#ent-1:checked ~ .pasta-abas label[for="ent-1"],
#ent-2:checked ~ .pasta-abas label[for="ent-2"],
#ent-3:checked ~ .pasta-abas label[for="ent-3"]{
  background:var(--folha);color:var(--tinta);border-color:var(--fio-forte);top:0;padding-bottom:12px;
}
#ent-1:focus-visible ~ .pasta-abas label[for="ent-1"],
#ent-2:focus-visible ~ .pasta-abas label[for="ent-2"],
#ent-3:focus-visible ~ .pasta-abas label[for="ent-3"]{outline:2.5px solid var(--terra);outline-offset:3px}

#ent-1:checked ~ .pasta-folha #painel-1,
#ent-2:checked ~ .pasta-folha #painel-2,
#ent-3:checked ~ .pasta-folha #painel-3{display:block;animation:folhear .3s var(--ease)}
@keyframes folhear{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
@media(prefers-reduced-motion:reduce){.pasta-painel{animation:none!important}}

/* A ordem destas duas importa: a de 560 precisa vir depois da de
   760 para vencer, porque as duas têm a mesma força. */
@media(max-width:760px){
  .pasta-abas label{font-size:.585rem}
}
@media(max-width:560px){
  .pasta-abas{gap:3px}
  .pasta-abas label{font-size:.5rem;padding:10px 10px 9px;letter-spacing:.11em}
}

/* O cabeçalho e o corpo de cada painel da pasta */
.pasta-cab{padding:clamp(22px,3vw,32px) var(--pad-dir) 16px var(--margem);border-bottom:1.5px solid var(--fio-forte)}
.pasta-cab h3{
  font-size:clamp(1.38rem,calc(1.37rem + .48vw),1.8rem);
  letter-spacing:-.03em;font-variation-settings:'wdth' 88;
}
.pasta-cab h3 em{font-style:normal;color:var(--verde-vivo)}
.pasta-cab > p{margin-top:10px;color:var(--tinta-70);font-size:.97rem;line-height:1.56;max-width:62ch}
/* ── O corpo da aba: a lista de um lado, o desenho do outro ──
   Seis itens curtos numa folha larga viravam seis linhas quase
   vazias. Agora a lista divide a linha com o desenho do que
   está sendo entregue, e a folha para de ter meia largura em
   branco. No celular o desenho vem primeiro: ele é o gancho,
   e a lista é a confirmação.                                  */
.pasta-corpo{
  padding:clamp(18px,2.6vw,26px) var(--pad-dir) clamp(22px,3vw,30px) var(--margem);
  display:grid;grid-template-columns:minmax(0,1fr) clamp(228px,29vw,340px);
  gap:clamp(20px,3.2vw,42px);align-items:start;
}
.pasta-corpo > *{min-width:0}
.pasta-corpo .lista-check{order:1}
.pasta-fig{
  order:2;background:var(--folha-2);border:1px solid var(--fio-medio);border-radius:2px;
  padding:clamp(13px,1.8vw,18px);box-shadow:var(--papel-3);
}
.pasta-fig svg{width:100%;height:auto;display:block}

@media(max-width:880px){
  .pasta-corpo{grid-template-columns:1fr;gap:22px}
  .pasta-corpo .lista-check{order:2}
  .pasta-fig{order:1;transform:rotate(-.5deg)}
}

/* ============================================================
   2 · A CONTA DA CAPTAÇÃO
   ------------------------------------------------------------
   O que eu controlo, você digita. O que ninguém controla, você
   arrasta. Esta caixa não tem número meu nenhum: os valores que
   nascem preenchidos são exemplo, e mudam no primeiro toque.

   A mesma peça existe na home. Se mudar o desenho lá, o certo
   é mudar aqui também.

   A grade que segura o texto de um lado e a caixa do outro
   mudou de casa: mora no /assets/lp.css, porque a LP do
   primeiro consultório usa a mesma para o comprovante.
   ============================================================ */


.painel{
  border:1px solid var(--fio-medio);border-radius:2px;background:var(--folha-2);
  box-shadow:var(--papel-3);overflow:hidden;
}
.painel-cab{padding:13px 15px;border-bottom:1px solid var(--fio-medio);background:var(--folha)}
.painel-cab h3{font-family:var(--fd);font-weight:800;font-size:1.02rem;letter-spacing:-.02em}
.painel-cab p{font-family:var(--fm);font-size:.55rem;letter-spacing:.14em;text-transform:uppercase;color:var(--tinta-45);margin-top:5px}
.painel-corpo{display:flex;flex-direction:column;gap:11px;padding:14px}
.painel-linha{display:flex;justify-content:space-between;gap:14px;flex-wrap:wrap;padding-bottom:12px;border-bottom:1px dashed var(--fio-medio)}
.painel-num .mono-s{color:var(--tinta-45);display:block;margin-bottom:5px}
.painel-num b{font-family:var(--fs);font-weight:700;font-size:1.4rem;line-height:1;font-variant-numeric:tabular-nums}
.painel-num b.verde{color:var(--verde-vivo)}

.calc-campo{display:flex;flex-direction:column;gap:5px}
.calc-rot{color:var(--verde-vivo);line-height:1.5}
.calc-campo--suposicao .calc-rot{color:var(--terra)}

.calc-entrada{
  display:flex;align-items:stretch;border:1px solid var(--fio-medio);border-radius:2px;
  background:var(--folha);overflow:hidden;transition:border-color .18s,box-shadow .18s;
}
.calc-entrada:focus-within{border-color:var(--terra);box-shadow:0 0 0 3px var(--terra-fraca)}
.calc-prefixo{
  display:flex;align-items:center;padding:0 3px 0 12px;font-family:var(--fs);font-size:1.02rem;
  font-weight:700;color:var(--tinta-45);flex:none;user-select:none;
}
.calc-input{
  flex:1;min-width:0;width:100%;border:0;background:transparent;outline:none;
  padding:8px 12px 8px 3px;min-height:44px;
  font-family:var(--fs);font-size:1.12rem;font-weight:700;line-height:1.1;color:var(--tinta);
  font-variant-numeric:tabular-nums;-moz-appearance:textfield;
}
.calc-input::-webkit-outer-spin-button,.calc-input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}
.calc-dica{font-family:var(--fm);font-size:.54rem;letter-spacing:.04em;line-height:1.6;color:var(--tinta-45)}

/* ── A suposição: a única linha que não é de ninguém ── */
.calc-campo--suposicao{padding-top:10px;border-top:1px dashed var(--fio-medio)}
.calc-faixa{display:flex;align-items:center;gap:14px}
.calc-taxa-val{
  font-family:var(--fs);font-size:1.12rem;font-weight:700;color:var(--terra);
  font-variant-numeric:tabular-nums;min-width:2.1ch;text-align:right;flex:none;
}
.calc-range{
  flex:1;min-width:0;-webkit-appearance:none;appearance:none;background:transparent;
  height:24px;margin:0;cursor:grab;outline:none;
}
.calc-range:active{cursor:grabbing}
.calc-range::-webkit-slider-runnable-track{height:2px;border-radius:2px;background:var(--fio-medio)}
.calc-range::-moz-range-track{height:2px;border-radius:2px;background:var(--fio-medio)}
/* o polegar é o "O" da marca: anel de tinta com miolo terracota */
.calc-range::-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);
}
.calc-range::-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);
}
.calc-range:hover::-webkit-slider-thumb,.calc-range:active::-webkit-slider-thumb{transform:scale(1.14)}
.calc-range:hover::-moz-range-thumb,.calc-range:active::-moz-range-thumb{transform:scale(1.14)}
.calc-range:focus-visible::-webkit-slider-thumb{box-shadow:0 0 0 4px var(--terra-fraca)}
.calc-range:focus-visible::-moz-range-thumb{box-shadow:0 0 0 4px var(--terra-fraca)}

/* ── O resultado ── */
.calc-saida{padding-top:11px;border-top:1px solid var(--fio-medio)}
.calc-saida .painel-linha{border-bottom:0;padding-bottom:0}
.calc-conta{
  font-family:var(--fm);font-size:.55rem;letter-spacing:.03em;line-height:1.7;
  color:var(--tinta-70);margin-top:10px;padding-top:9px;border-top:1px dashed var(--fio-medio);
}
/* A conta em cima é aritmética. Esta linha é a conclusão, e é a
   única parte que não muda quando a pessoa mexe nos campos. */
.calc-fecho{
  margin-top:11px;padding:11px 13px;border-left:2.5px solid var(--verde-vivo);
  border-radius:0 2px 2px 0;background:var(--verde-fraco);
  font-family:var(--fd);font-weight:600;font-size:.92rem;line-height:1.45;
  letter-spacing:-.014em;color:var(--tinta);
}
.calc-fecho[hidden]{display:none}

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

/* ============================================================
   3 · AS DUAS FOLHAS DE PROPOSTA
   ============================================================ */
.propostas{display:grid;grid-template-columns:1fr 1fr;gap:clamp(14px,2.2vw,22px);align-items:stretch}
@media(max-width:820px){.propostas{grid-template-columns:1fr}}

.proposta{display:flex;flex-direction:column}
.proposta-aba{
  align-self:flex-start;display:inline-flex;align-items:center;gap:9px;
  font-family:var(--fm);font-size:.575rem;font-weight:700;letter-spacing:.15em;
  text-transform:uppercase;line-height:1;
  background:var(--verde);color:#F7F2E6;padding:11px 16px 10px;border-radius:3px 3px 0 0;
}
.proposta--recorrente .proposta-aba{background:var(--terra)}

.proposta-corpo{
  flex:1;display:flex;flex-direction:column;
  background:var(--folha);border:1.5px solid var(--verde);border-radius:0 2px 2px 2px;
  box-shadow:var(--papel-1);padding:clamp(20px,2.6vw,28px) clamp(18px,2.2vw,26px) clamp(18px,2.4vw,24px);
}
.proposta--recorrente .proposta-corpo{border-color:var(--terra)}
.proposta-corpo h3{font-size:clamp(1.3rem,calc(1.28rem + .4vw),1.6rem);letter-spacing:-.032em;font-variation-settings:'wdth' 88}
.proposta-corpo > p{margin-top:9px;font-size:.95rem;line-height:1.55;color:var(--tinta-70)}
.proposta .lista-check{margin-top:clamp(14px,2vw,18px)}
.proposta .lista-check li:last-child{border-bottom:0;padding-bottom:0}

@media(max-width:760px){.proposta-aba{font-size:.615rem}}

/* ============================================================
   4 · O CARIMBO DO FIM DA TRILHA
   ------------------------------------------------------------
   A pergunta que fecha a Ficha 02 não é mais uma frase solta no
   pé do cartão: é um carimbo, pressado torto no canto da folha
   depois dos três passos.
   ============================================================ */
.caminho-fecho{
  display:flex;justify-content:flex-end;
  margin-top:clamp(22px,3.2vw,32px);padding-top:clamp(18px,2.6vw,24px);
  border-top:1px dashed var(--fio-medio);
}
@media(max-width:820px){
  .caminho-fecho{justify-content:flex-start}
}

/* ============================================================
   5 · A FIGURA DA ABERTURA, NA ALTURA DA MANCHETE
   ------------------------------------------------------------
   A grade da abertura nasce centralizada no /assets/lp.css: a
   figura procura o meio da coluna de texto. Com a manchete em
   duas frases, esse meio caía na altura do botão, e a busca em
   miniatura só começava depois do argumento que ela ilustra.

   Aqui a figura encosta no topo, junto da primeira linha do
   título. É a mesma decisão que a página do paciente particular
   tomou com o --larga; esta não usa o modificador, então a
   correção mora na folha da própria página.
   ============================================================ */
@media(min-width:1024px){
  .abertura-topo{align-items:start}
}

/* ============================================================
   6 · A FICHA 02 — o caminho do paciente, visto e não lido
   ------------------------------------------------------------
   A seção contava o caminho em dois parágrafos longos e três
   colunas de texto solto. Quem passava o olho via um bloco
   cinza e continuava rolando: era texto demais para uma ideia
   que é, no fundo, visual.

   Duas mudanças, nenhuma delas inventa vocabulário novo.

   1 · A VIRADA EM DUAS COLUNAS
   A frase que carrega a seção sai do meio do texto e fica em pé
   sozinha à esquerda, na mesma régua terracota que o resto da
   página usa quando afirma. Os dois parágrafos vão para a
   direita, menores e mais claros. Empilhados eles eram um bloco
   só; lado a lado, um vira manchete e o outro vira nota.

   O tamanho da frase é de propósito menor que o do título da
   ficha. Ela é a segunda voz da seção, não a primeira: se ficar
   do tamanho da manchete as duas brigam e a seção perde o eixo.
   É a mesma regra que a .citacao já segue no lp.css.

   2 · AS ETAPAS VIRAM CARTÕES PENDURADOS NA RÉGUA
   O fio horizontal continua sendo o caminho, e agora cada etapa
   é um cartão dependurado nele pelo alvo. Dentro do cartão mora
   uma moldura com o que o paciente vê naquele passo: a busca
   que ele digita, as opções que ele compara, a pergunta que ele
   responde.

   As três molduras são idênticas de propósito. O que muda é só
   o conteúdo, e é a repetição da moldura que faz as três lerem
   como uma sequência de telas em vez de três avisos soltos.

   Elas esticam (flex:1) para que as três frases de baixo comecem
   todas na mesma altura. Cartão de altura irregular lê como
   descuido, e três alturas diferentes matariam a sequência.

   A .trilha e a .etapa continuam intactas no /assets/lp.css: a
   home e outras três páginas usam as duas. Aqui só entram
   modificadores, e só esta página carrega esta folha.
   ============================================================ */

/* ── 1 · A virada ── */
.disputa{display:grid;gap:clamp(15px,2.2vw,22px)}
@media(min-width:900px){
  .disputa{
    grid-template-columns:minmax(0,.92fr) minmax(0,1.08fr);
    align-items:center;gap:clamp(28px,4vw,54px);
  }
}
.disputa > *{min-width:0}
.disputa-frase{
  padding-left:15px;border-left:2px solid var(--terra);
  font-family:var(--fd);font-weight:800;
  font-size:clamp(1.16rem,calc(1.04rem + .58vw),1.5rem);
  line-height:1.24;letter-spacing:-.03em;color:var(--tinta);max-width:25ch;
}
/* O verde marca a metade que carrega o argumento, como no hero. */
.disputa-frase em{font-style:normal;color:var(--verde-vivo)}
.disputa-corpo .txt{max-width:54ch}

/* ── 2 · Os cartões ── */
.trilha--cartoes .etapa{
  display:flex;flex-direction:column;
  background:var(--folha-2);border:1px solid var(--fio-medio);border-radius:2px;
  box-shadow:var(--papel-3);
  padding:clamp(15px,1.9vw,19px) clamp(14px,1.8vw,18px) clamp(16px,2vw,20px);
}
/* O alvo pendura o cartão no fio: fica acima da borda de cima,
   sobre a folha, e por isso o fundo dele é o da folha e não o
   do cartão. */
.trilha--cartoes .etapa-no{left:-1px}
.trilha--cartoes .etapa h3{margin-top:6px}

/* ── Os quatro andares dos três cartões, na mesma linha ──────
   "Decide quem merece um contato" quebra em duas linhas e os
   outros dois títulos não. Em telas estreitas as etiquetas
   pedem mais uma fileira. Cada um desses acidentes descia um
   andar de um cartão só, e a leitura horizontal (os três
   números, depois os três títulos, depois as três telas)
   desmontava.

   Altura mínima chumbada resolvia numa largura e quebrava na
   seguinte. Quem resolve em todas é o subgrid: os cartões
   deixam de ter altura própria e passam a usar as fileiras da
   própria trilha, então cada andar mede o mais alto dos três e
   os outros dois acompanham, em qualquer largura.

   São quatro fileiras porque são quatro filhos em fluxo: o
   número, o título, a moldura e a frase. O .etapa-no não conta:
   é absoluto, e elemento absoluto não ocupa fileira.

   O row-gap:0 é obrigatório. Sem ele o cartão herda o gap de
   44px da trilha e se esparrama por dentro.

   Navegador sem subgrid ignora a linha e cai no empilhamento
   normal: perde o alinhamento fino, não perde o conteúdo. */
@media(min-width:821px){
  .trilha--cartoes{grid-template-rows:auto auto auto auto}
  .trilha--cartoes .etapa{
    display:grid;grid-template-rows:subgrid;grid-row:span 4;row-gap:0;
  }
}
.trilha--cartoes .etapa > p{
  margin-top:clamp(11px,1.5vw,14px);font-size:.925rem;max-width:none;
}

/* A moldura: o que o paciente vê naquele passo. */
.etapa-fig{
  display:flex;flex-wrap:wrap;align-items:center;align-content:center;gap:7px;
  margin-top:clamp(12px,1.6vw,15px);min-height:104px;
  padding:12px;border:1px solid var(--fio-medio);border-radius:2px;
  background:var(--folha);
}

/* 01 · a busca. O mono e a lupa já dizem que é um campo de
   busca, sem precisar desenhar o Google inteiro. */
.etapa-fig--busca{flex-wrap:nowrap;gap:10px}
.etapa-fig--busca svg{flex:none;color:var(--tinta-45);opacity:.55}
.etapa-fig--busca span{
  min-width:0;font-family:var(--fm);font-size:.6rem;letter-spacing:.02em;
  line-height:1.7;color:var(--tinta-70);
}

/* 02 · as opções. Seis etiquetas no lugar de uma lista com
   vírgulas: dá para contar de relance, e nenhuma precisa ser
   lida para a pessoa entender que são muitas. */
.etapa-fig--opcoes{gap:6px}

/* 03 · a resposta. O visto verde responde a pergunta antes de
   ela ser lida, que é exatamente o que a frase de baixo diz. */
.etapa-fig--resposta{flex-wrap:nowrap;align-items:flex-start;gap:11px}
.etapa-fig--resposta > span:last-child{
  min-width:0;font-size:.885rem;line-height:1.5;
  font-weight:600;color:var(--tinta);
}

/* No celular a trilha vira uma coluna e o fio fica em pé à
   esquerda. O alvo sai do cartão e vai para cima do fio. */
@media(max-width:820px){
  .trilha--cartoes .etapa-no{left:-34px}
  .etapa-fig{min-height:0}
}

/* ============================================================
   7 · O APOIO DE SEÇÃO, EM CIMA DA MESA
   ------------------------------------------------------------
   Toda folha abre com um .txt--lede dentro do corpo dela. As
   Fichas 03 e 05 não têm folha: uma tem pasta de abas, a outra
   tem cartões soltos, e as duas começam direto no objeto. O
   parágrafo que explica a seção fica então na mesa, entre o fio
   do cabeçalho e o primeiro objeto.

   Só falta a margem de baixo: sem ela o parágrafo encosta no
   objeto e parece legenda dele, e não abertura da seção.
   ============================================================ */
.mesa-lede{margin-bottom:clamp(1.4rem,2.6vw,2.1rem)}

/* ============================================================
   8 · AS CINCO FUNÇÕES, E O PAINEL QUE PARA DE COBRAR PREÇO
   ------------------------------------------------------------
   A Ficha 04 defendia a conta. Agora defende a estrutura, e a
   conta virou prova. Isso pediu duas peças.

   A LISTA DAS FUNÇÕES
   Cinco pares de ponto e função. É uma lista de descrição de
   verdade (<dl>): o ponto é o termo, a função é a definição
   dele, e o leitor de tela lê o par junto. Uma lista com marcador
   diria que são cinco itens soltos; são cinco pares.

   A grade de duas colunas serve a uma coisa só: como todos os
   termos dividem a mesma coluna, ela cresce até o mais largo e
   as cinco setas nascem alinhadas em régua. Alinhamento aqui é
   o que faz as cinco lerem como um sistema em vez de cinco
   frases empilhadas.

   A seta é a #seta da página, a mesma dos botões, em terracota:
   é gesto, e gesto nesta marca é sempre terracota.

   O SUBTÍTULO DO PAINEL
   O .painel-cab p nasceu rótulo: mono, caixa alta, meio corpo de
   letra. Servia para "Troque pelos seus números", que são três
   palavras. A frase nova tem oito e um verbo, e a marca é
   explícita: mono nunca em texto corrido. Então aqui, e só aqui,
   o subtítulo vira frase.
   ============================================================ */

.funcoes{
  display:grid;grid-template-columns:auto minmax(0,1fr);
  margin-top:clamp(17px,2.6vw,24px);
}
.funcoes dt,.funcoes dd{
  padding:11px 0;border-top:1px dashed var(--fio-medio);line-height:1.42;
}
.funcoes dt{
  font-family:var(--fd);font-weight:800;font-size:.99rem;
  letter-spacing:-.022em;color:var(--tinta);padding-right:6px;
}
.funcoes dd{
  display:flex;align-items:flex-start;gap:11px;margin:0;
  font-size:.96rem;color:var(--tinta-70);
}
/* A caixa da seta tem a altura de uma linha, então a seta centra
   no primeiro tempo do texto mesmo quando a função quebra. */
.funcoes-seta{
  flex:none;display:grid;place-items:center;
  width:13px;height:1.42em;color:var(--terra);
}
.funcoes-seta svg{display:block;width:12px;height:12px}

/* No celular a coluna do termo espremia a função contra a borda.
   Empilhados, o termo vira o título da linha e a função nasce
   embaixo, sem régua entre os dois. */
@media(max-width:520px){
  .funcoes{grid-template-columns:minmax(0,1fr)}
  .funcoes dt{padding-bottom:0}
  .funcoes dd{padding-top:5px;border-top:0}
}

.painel--calc .painel-cab p{
  font-family:var(--fc);font-size:.875rem;font-weight:400;
  letter-spacing:0;text-transform:none;line-height:1.5;color:var(--tinta-70);
}

/* ── A coluna do painel, larga o bastante para a frase ───────
   "Faça uma simulação com os números da sua região." pede 329px
   numa linha. A coluna do painel dava 328: faltava um pixel, e
   por um pixel a frase quebrava em duas linhas com a palavra
   "região." sozinha embaixo.

   Encolher a letra resolveria de 1180px para cima e só. Alargar
   a coluna resolve de 1024px para cima e não mexe no corpo do
   texto, que já está no menor tamanho confortável desta página.
   Como sobra vazio embaixo da coluna da esquerda, os 40px saem
   de onde não fazem falta.

   A regra é desta página: a .conta-grade mora no lp.css e a LP
   do primeiro consultório usa a mesma.

   O min-width é obrigatório. O lp.css empilha as duas colunas
   num @media(max-width:900px), e media query não soma
   especificidade: uma regra solta aqui, que vem depois no
   carregamento, venceria aquela e desmontaria o celular.

   Abaixo de 1024px a coluna é mais estreita que a frase, e aí
   ela quebra mesmo. É tela de tablet deitado, não de desktop. */
@media(min-width:901px){
  .conta-grade{grid-template-columns:minmax(0,1fr) clamp(260px,36vw,400px)}
}

/* ============================================================
   9 · A ESCADA DA FICHA 05
   ------------------------------------------------------------
   A seção mostrava duas propostas lado a lado, do mesmo tamanho
   e do mesmo peso. Lado a lado, com o mesmo peso, o olho lê
   cardápio: escolha A ou B. Mas não são duas opções, são dois
   momentos, e a página inteira defende a ordem entre eles.
   Primeiro arruma a casa, depois coloca gente dentro dela.

   Peso psicológico não se pede por favor: se constrói com
   sinais que empurram todos para o mesmo lado. Aqui são seis,
   e nenhum deles depende de o leitor parar para ler.

     1 · ORDEM      um em cima do outro, não lado a lado: quem
                    está embaixo veio depois
     2 · RECUO      o passo 2 entra pela esquerda. Recuo é como
                    todo texto marca subordinação, de citação a
                    lista aninhada
     3 · LARGURA    recuado, o passo 2 é mais estreito. Área
                    menor lê como importância menor
     4 · FUNDO      folha cheia no passo 1, folha-2 no passo 2
     5 · SOMBRA     papel-1 no passo 1, papel-3 no passo 2. O
                    primeiro está mais alto na mesa
     6 · ABA        cheia no passo 1, vazada no passo 2. Vazado
                    é o que ainda não foi preenchido

   Nenhum sinal precisa vencer sozinho, e é por isso que
   funciona: seis empurrões fracos na mesma direção assentam
   antes da primeira palavra lida.

   O degrau entre os dois não é enfeite. É o fio tracejado que
   diz que um leva ao outro, e a condição escrita nele ("se
   fizer sentido") é a promessa da seção, que a página não
   vende o que o médico não precisa.
   ============================================================ */

/* O recuo do passo 2. Uma variável só, porque o cartão e o
   degrau precisam começar exatamente no mesmo x. */
/* A escada não ocupa a mesa inteira. Em largura cheia sobravam
   quase 400px de fio tracejado vazio entre as duas colunas da
   lista, e fio sem nada em cima lê como erro de diagramação.
   Em 980px as colunas ficam justas e a linha mais longa da
   captação ainda cabe numa linha só. Papel sobre mesa não
   precisa cobrir a mesa. */
.escada{--recuo:clamp(20px,8vw,120px);max-width:980px}

.escada .proposta--passo{margin-left:var(--recuo)}

/* ── 1 · O cartão base, mais alto na mesa ── */
.escada .proposta--base .proposta-corpo{
  background:var(--folha);border:1.5px solid var(--verde);box-shadow:var(--papel-1);
}

/* ── 2 · O cartão do passo, mais leve ──
   Fundo mais apagado, fio mais fino, sombra mais rasa. */
.escada .proposta--passo .proposta-aba{
  background:var(--folha);color:var(--terra);
  border:1.5px solid var(--terra);border-bottom:0;
}
.escada .proposta--passo .proposta-no{border-right-color:var(--terra-fio)}
.escada .proposta--passo .proposta-corpo{
  background:var(--folha-2);border:1.5px solid var(--terra);box-shadow:var(--papel-3);
}

/* O número dentro da aba, separado do verbo por um fio. */
.proposta-no{
  padding-right:9px;border-right:1px solid rgba(247,242,230,.38);
  font-size:.66rem;letter-spacing:.1em;
}

/* ── O topo do cartão: o nome à esquerda, o modelo à direita ── */
.proposta-topo{
  display:flex;align-items:center;justify-content:space-between;
  gap:14px;flex-wrap:wrap;
}
.proposta-topo h3{margin:0}
.escada .proposta--passo .etq{border-color:var(--terra-fio);color:var(--terra)}

/* ── O degrau ──
   O fio desce por trás do anel, e o anel tem o fundo da mesa
   para abrir o buraco por onde o fio passa. É o mesmo truque do
   .etapa-no na trilha, e o mesmo desenho do alvo da marca. */
.degrau{
  position:relative;display:flex;align-items:center;gap:14px;
  margin-left:var(--recuo);padding:clamp(19px,2.8vw,28px) 0;
}
.degrau::before{
  content:'';position:absolute;left:18px;top:0;bottom:0;
  border-left:1.5px dashed var(--fio-terra);
}
.degrau-no{
  position:relative;flex:none;width:37px;height:37px;border-radius:50%;
  border:1.5px solid var(--terra);background:var(--mesa);
  display:grid;place-items:center;color:var(--terra);
}
.degrau-no svg{transform:rotate(90deg)}
.degrau-rot{color:var(--terra)}

/* ── A lista em duas colunas ──
   Quatro itens curtos numa coluna só faziam o cartão crescer
   sem precisar, e cartão alto demais quebra a escada em duas
   telas. Em duas colunas cada cartão cabe num relance.

   As bordas precisam ser reescritas: a regra de origem dá fio
   de cima ao primeiro item e tira o de baixo do último, o que
   em duas colunas deixa o segundo item sem topo e o terceiro
   com um fio sobrando embaixo. */
@media(min-width:620px){
  .lista-check--par{grid-template-columns:1fr 1fr;column-gap:clamp(18px,3vw,38px)}
  .lista-check--par li:nth-child(-n+2){border-top:1px dashed var(--fio-medio)}
  .lista-check--par li:nth-last-child(-n+2){border-bottom:0;padding-bottom:0}
  .proposta .lista-check--par li:last-child{padding-bottom:0}
}

/* No celular a escada continua escada, mas com recuo curto: o
   cartão já é estreito, e recuo grande espremeria a lista. */
@media(max-width:560px){
  .escada{--recuo:16px}
  .degrau{gap:11px}
}

/* ── O fecho da Ficha 05 ─────────────────────────────────────
   Estava numa .nota-margem, que o lp.css define como "ressalva,
   fonte, aviso: o que alguém escreveu ao lado do texto, não o
   texto". Mas este parágrafo não ressalva nada. Ele é a promessa
   da seção, e talvez a frase mais importante da página: a Mundo
   não vende o que o médico não precisa.

   Componente errado, peso errado. Agora as três frases de
   preparo são corpo de texto, e a promessa vai na .txt--frase,
   que é a mesma régua da margem ao contrário: fio cheio no lugar
   do fio fraco, tinta cheia no lugar do cinza. Como manda o
   comentário da própria classe, esta afirma em vez de ressalvar.

   Só falta o respiro que separa o fecho dos cartões. */
.escada-fecho{margin-top:clamp(22px,3.2vw,34px)}

/* ============================================================
   10 · O ANTES E DEPOIS
   ------------------------------------------------------------
   A prova que esta página pode dar. Não dá para mostrar
   paciente, e o CFM não deixa prometer resultado, mas dá para
   mostrar o documento antes e o documento depois.

   O comparativo é o .compara do lp.css, que já nasce com os dois
   lados: o que não tem, hachurado e em terracota, e o que tem,
   limpo e em verde. O que entra aqui é o que ele não tinha: a
   figura antes da lista, a lista de itens e a virada no meio.

   AS DUAS FIGURAS
   Usam a mesma moldura de navegador de propósito. Mesmo
   esqueleto, conteúdo diferente: é a única forma de a diferença
   ser lida como diferença, e não como dois desenhos distintos.
   O lado de antes é cinza inteiro, sem uma gota de cor, e essa
   ausência diz mais que qualquer legenda.

   A figura sobe para antes da lista, então perde o margin-top
   auto que a empurrava para o pé da coluna. Como as duas têm o
   mesmo viewBox e as colunas têm a mesma largura, as duas listas
   começam na mesma altura sozinhas.
   ============================================================ */

.compara--obra .compara-fig{margin-top:clamp(13px,1.9vw,17px)}

.compara--obra .compara-lista{display:grid;margin-top:clamp(14px,2vw,18px)}
.compara--obra .compara-lista li{
  display:grid;grid-template-columns:17px minmax(0,1fr);gap:11px;align-items:center;
  padding:9px 0;border-top:1px dashed var(--fio-medio);
  font-size:.94rem;line-height:1.45;
}
/* O sinal pega a cor do lado pelo currentColor, como no cabeçalho.
   O texto volta ao cinza do corpo: quem carrega a cor é a marca,
   não a frase. */
.compara-lado--nao .compara-lista{color:var(--terra)}
.compara-lado--sim .compara-lista{color:var(--verde-vivo)}
.compara--obra .compara-lista li > span:last-child{color:var(--tinta-70)}
.compara--obra .compara-lista .compara-sinal{width:17px;height:17px}
.compara--obra .compara-lista .compara-sinal svg{width:9px;height:9px}

/* ── A virada ──
   Mora dentro do lado de depois e se apoia na borda que separa os
   dois. No computador a borda é vertical e ela fica em pé, na
   metade da altura. No celular a borda vira horizontal e ela
   deita, na metade da largura. Mesmo elemento, duas âncoras.

   O fundo é folha porque ela precisa abrir um buraco na borda
   por onde passa, do mesmo jeito que o alvo da trilha faz. */
.compara-lado--sim{position:relative}
.compara-vira{
  position:absolute;z-index:2;
  width:34px;height:34px;border-radius:50%;
  border:1.5px solid var(--terra);background:var(--folha);
  display:grid;place-items:center;color:var(--terra);
  left:0;top:50%;transform:translate(-50%,-50%);
}
@media(max-width:640px){
  .compara-vira{left:50%;top:0;transform:translate(-50%,-50%) rotate(90deg)}
}

/* ============================================================
   11 · O RESPIRO DA CARTA
   ------------------------------------------------------------
   A nota subiu para o cabeçalho, e a coluna da ação ficou com
   dois itens em vez de três. Centralizada contra um selo que
   continua do mesmo tamanho, ela passou a nascer mais baixo, e
   isso somou ao respiro que o lp.css já reservava entre o
   subtítulo e o fio.

   Eram 110px do fim do subtítulo ao topo do botão. Aqui viram
   uns 80, que é onde a LP do paciente particular já está: lá a
   mesma mudança aconteceu antes, e a regra é a mesma.

   As outras duas LPs continuam com a nota embaixo do botão,
   coluna alta, sem essa sobra. Por isso o ajuste mora nesta
   folha e não no lp.css.
   ============================================================ */
.carta-fecho{
  margin-top:clamp(20px,2.8vw,30px);
  padding-top:clamp(16px,2.2vw,24px);
}

/* ── O vão entre o fio e o botão ─────────────────────────────
   Não era padding. O lp.css centraliza a linha do fecho, e o
   selo tem 232px contra os 90 da coluna do botão: centralizar
   empurrava a coluna 71px para baixo, e era isso que separava o
   fio do botão.

   Encostando a coluna no topo, o botão nasce logo depois do
   respiro, e a sobra vai para baixo, onde o selo já ocupa. O
   selo continua onde estava: ele é o item mais alto da linha,
   então alinhar ao topo não o move.

   Vale só no computador. No celular o lp.css já empilha os dois
   numa coluna e não existe centralização para desfazer. */
@media(min-width:901px){
  .carta-fecho{align-items:start}
}

/* ── Os dois parágrafos deixam de ser dois parágrafos ────────
   Empilhados e do mesmo tamanho, viravam texto corrido, e texto
   corrido no fecho é onde a leitura desiste. Eles têm trabalhos
   diferentes e agora têm tratamentos diferentes.

   O deque é o argumento, e fecha a manchete: corpo maior, tinta
   mais cheia, e o que ele afirma em negrito. Fica em cima do
   fio, junto do título, porque é dele que ele fala.

   A instrução é o que acontece depois do clique. Desceu para
   junto do botão, menor e mais clara, no mesmo papel que a linha
   de apoio faz embaixo do botão da abertura. */
.carta-deque{
  margin-top:clamp(15px,2.2vw,22px);
  font-size:clamp(1.1rem,calc(1.04rem + .3vw),1.32rem);
  line-height:1.5;color:var(--tinta-70);max-width:50ch;
  /* O deque tem três linhas e a terceira vinha com uma palavra só.
     Não dá para alargar: quem manda na largura é o max-width do
     .carta-cab, e mexer nele mudaria a quebra da manchete. Então
     o navegador reparte as três linhas em tamanhos parecidos, e o
     toco some. Navegador sem suporte quebra do jeito de sempre. */
  text-wrap:balance;
}
.carta-deque strong{color:var(--tinta);font-weight:600}

.carta-instrucao{
  font-size:clamp(.97rem,calc(.95rem + .1vw),1.04rem);
  /* 46ch deixava a instrução em três linhas, com a última curta.
     56 fecha em duas. */
  line-height:1.55;color:var(--tinta-45);max-width:56ch;
}

/* A linha de garantias trocou os pontos finais por separadores, e
   separador só funciona se a quebra cair nele. O texto já tem
   espaço fixo dentro de cada item, então falta largura: em 44ch,
   que é a medida do sistema, os três itens caíam um por linha.
   Solta, a linha inteira cabe numa só no computador, e no celular
   quebra nos separadores, que é onde deve quebrar. */
.carta-nota--mono{max-width:none}