/* ============================================================ MUNDO | LP "Paciente particular" — 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 · o mapa da abertura 2 · a tabela de um dia de consultório 3 · dois ajustes da ficha "quem faz" ============================================================ */ /* ============================================================ 1 · O MAPA DA ABERTURA ------------------------------------------------------------ A manchete promete que existe um caminho entre dois lugares. A figura desenha o caminho: à esquerda o dia de hoje, trinta marcas apertadas; à direita o alvo, com poucas marcas e todas dentro; no meio, a linha tracejada com as três etapas que a Ficha 04 detalha. Embaixo do desenho ficam as duas fichinhas que antes flutuavam soltas sobre o fundo, com as mesmas três linhas de cada uma. ============================================================ */ .mapa{ background:var(--folha);border:1px solid var(--fio-medio);border-radius:2px; box-shadow:var(--papel-2);overflow:hidden;transform:rotate(-.4deg); } .mapa-topo{ display:flex;align-items:center;justify-content:space-between;gap:14px; padding:11px 15px 10px;border-bottom:1px solid var(--fio-medio);background:var(--folha-2); } .mapa-topo .mono-s{color:var(--tinta-45)} .mapa-fim{color:var(--verde-vivo)!important} .mapa-desenho{display:block;width:100%;height:auto} .mapa-pe{ display:grid;grid-template-columns:1fr 1fr;gap:1px; border-top:1px solid var(--fio-medio);background:var(--fio-medio); } .mapa-pe .prova{ transform:none;border:0;border-radius:0;box-shadow:none; background:var(--folha-2);padding:12px 13px 13px; } @media(max-width:400px){.mapa-pe{grid-template-columns:1fr}} /* A entrada do mapa: os anéis assentam, a rota é riscada da esquerda para a direita e as marcas do alvo caem por último. Sequência curta e finita, como a do alvo da home. Quem pediu menos movimento recebe tudo parado, pela regra do lp.css. */ @media(prefers-reduced-motion:no-preference){ .rv .m-anel,.rv .m-pt,.rv .m-no{opacity:0} .rv .m-rota{stroke-dashoffset:210;opacity:0} .rv.on .m-anel{animation:mapaEntra .5s var(--ease) both} .rv.on .m-rota{animation:mapaRisca .9s var(--ease) .3s both} .rv.on .m-no{animation:mapaEntra .4s var(--ease) .95s both} .rv.on .m-pt{animation:mapaPonto .42s cubic-bezier(.3,1.5,.5,1) both} .rv.on .m-pt:nth-child(1){animation-delay:1.1s} .rv.on .m-pt:nth-child(2){animation-delay:1.19s} .rv.on .m-pt:nth-child(3){animation-delay:1.28s} .rv.on .m-pt:nth-child(4){animation-delay:1.37s} @keyframes mapaEntra{from{opacity:0}to{opacity:1}} @keyframes mapaRisca{from{stroke-dashoffset:210;opacity:1}to{stroke-dashoffset:0;opacity:1}} @keyframes mapaPonto{from{opacity:0;transform:scale(.3)}to{opacity:1;transform:none}} .m-pt{transform-box:fill-box;transform-origin:center} } /* ============================================================ 2 · UM DIA DE CONSULTÓRIO ------------------------------------------------------------ A tabela é o argumento inteiro da seção, então ela não divide a linha com o texto: fica sozinha, na largura da folha, como um anexo grampeado. Foi o que resolveu a rolagem lateral que ela tinha no celular. ============================================================ */ .conta-rolo{overflow-x:auto;-webkit-overflow-scrolling:touch} .conta-tab{width:100%;border-collapse:collapse;font-variant-numeric:tabular-nums} .conta-tab th,.conta-tab td{padding:11px 14px;text-align:right;white-space:nowrap} .conta-tab th:first-child,.conta-tab td:first-child{padding-left:0} .conta-tab thead th{ font-family:var(--fm);font-size:.53rem;font-weight:700;letter-spacing:.13em; text-transform:uppercase;color:var(--tinta-45);line-height:1.6; vertical-align:bottom;border-bottom:1.5px solid var(--fio-forte); } .conta-tab tbody th{ text-align:left;font-family:var(--fc);font-weight:600;font-size:.93rem; color:var(--tinta);white-space:normal;min-width:8.4rem; } .conta-tab tbody td{font-family:var(--fs);font-weight:700;font-size:1.14rem;color:var(--tinta-70);line-height:1.2} .conta-tab tbody tr{border-bottom:1px dashed var(--fio-medio)} .conta-tab tbody tr:last-child{border-bottom:0} /* As duas colunas do particular ganham cor: a do cenário ruim em terracota, a do bom em verde. É a mesma dupla que o site usa em todo lugar onde existe um "não" e um "sim". */ .conta-tab .c-ruim{color:var(--terra)} .conta-tab .c-bom{color:var(--verde-vivo)} .conta-tab thead .c-ruim,.conta-tab thead .c-bom{white-space:normal;line-height:1.5} /* A coluna do cenário bom é a resposta da tabela: ganha fundo próprio, para o olho cair nela sem precisar de seta. */ .conta-tab .c-bom{background:var(--verde-fraco)} .conta-tab thead .c-bom{border-bottom-color:var(--verde-vivo)} /* A linha do total: traço grosso em cima, número maior. */ .conta-tab .conta-tot{border-top:1.5px solid var(--fio-forte);border-bottom:0} .conta-tab .conta-tot th{padding-top:15px} .conta-tab .conta-tot td{padding-top:15px;font-size:1.42rem;color:var(--tinta)} .conta-tab .conta-tot .c-ruim{color:var(--terra)} .conta-tab .conta-tot .c-bom{color:var(--verde-vivo)} @media(max-width:760px){ .conta-tab th,.conta-tab td{padding:9px 9px} .conta-tab thead th{font-size:.5rem;letter-spacing:.1em} .conta-tab tbody th{min-width:6.6rem;font-size:.86rem} .conta-tab tbody td{font-size:1rem} .conta-tab .conta-tot td{font-size:1.16rem} } /* ============================================================ 3 · A FICHA "QUEM FAZ" ------------------------------------------------------------ As quatro fichinhas da Casa Tohmé moram dentro de um anexo, que já é estreito. Elas encolhem um pouco para caber. ============================================================ */ .sobre-anexo{margin-top:clamp(16px,2.4vw,22px)} .sobre-anexo .provas{margin-top:14px} .sobre-anexo .prova{padding:11px 12px 12px} .sobre-anexo .prova .mono-s{margin-bottom:6px} .sobre-anexo .prova b{font-size:1.08rem} /* ── A tabela no celular ──────────────────────────────────── Quatro colunas de números não cabem numa tela de telefone, e rolar para o lado dentro de uma caixa é um jeito ruim de ler uma comparação: some sempre a coluna que você quer comparar. Então no telefone ela deixa de ser tabela e vira três blocos empilhados, um por linha da tabela. O nome da coluna, que estava lá em cima no cabeçalho, desce e passa a viver ao lado de cada número, escrito no data-rot de cada célula. A tabela continua sendo uma de verdade no HTML: quem usa leitor de tela continua ouvindo a comparação inteira. ─────────────────────────────────────────────────────────── */ @media(max-width:600px){ .conta-rolo{overflow-x:visible} .conta-tab,.conta-tab tbody,.conta-tab tr,.conta-tab tbody th,.conta-tab tbody td{display:block;width:100%} .conta-tab thead{display:none} .conta-tab tbody tr{ border:1px solid var(--fio-medio);border-radius:2px;background:var(--folha); padding:12px 13px 13px;margin-bottom:11px; } .conta-tab tbody tr:last-child{margin-bottom:0} /* O tr:last-child lá de cima zera a borda de baixo e tem mais especificidade que .conta-tab .conta-tot. Escrito assim a especificidade empata e a ordem decide: o quadro fecha. */ .conta-tab tbody tr.conta-tot{border:1.5px solid var(--fio-forte)} .conta-tab tbody th{ min-width:0;padding:0 0 9px;font-size:.95rem; border-bottom:1.5px solid var(--fio-forte); } .conta-tab tbody td{ display:flex;align-items:baseline;justify-content:space-between;gap:14px; padding:9px 0;border-bottom:1px dashed var(--fio);text-align:right; background:none;font-size:1.06rem; } .conta-tab tbody td:last-child{border-bottom:0;padding-bottom:0} /* o nome da coluna volta, agora ao lado do número */ .conta-tab tbody td::before{ content:attr(data-rot);flex:1;text-align:left; font-family:var(--fm);font-size:.5rem;font-weight:600;letter-spacing:.13em; text-transform:uppercase;color:var(--tinta-45);line-height:1.6; } /* a coluna do cenário bom continua sendo a resposta */ .conta-tab tbody td.c-bom{ background:var(--verde-fraco);margin:0 -13px;padding-left:13px;padding-right:13px; } .conta-tab tbody td.c-bom::before{color:var(--verde-vivo)} .conta-tab .conta-tot td{font-size:1.18rem;padding-top:9px} } /* ============================================================ 4 · O QUE ESTA PÁGINA NÃO MOSTRA NO CELULAR ------------------------------------------------------------ No computador as sete fichas ficam à vista de relance e a numeração ajuda a situar. No telefone só existe uma ficha por tela: o número vira enfeite, e ainda empurra o rótulo para uma linha a mais, porque o lp.css reserva 96px para ele no canto. Some o número, some a reserva, e o rótulo ganha a folha toda. A nota da amostra e as três fichinhas dela também saem. As duas andam juntas: a nota existe para dizer de onde vêm os números das fichinhas, então mostrar uma sem a outra deixaria ou um dado sem origem, ou uma origem sem dado. ============================================================ */ @media(max-width:560px){ .cab-folio,.bloco-folio{display:none} .cab-ficha .rotulo{max-width:100%} /* O lp.css reserva espaço no topo para o número da ficha abaixo de 349px. Sem número, o card volta ao respiro normal dele. */ .cab-ficha{padding-top:clamp(24px,3.4vw,36px)} .nota-margem,.provas--3{display:none} } /* ============================================================ 5 · O RESPIRO DA CARTA ------------------------------------------------------------ Aqui a nota subiu para o cabeçalho, então a coluna da ação ficou com dois itens em vez de três e encolheu. Centralizada contra um selo que continua do mesmo tamanho, ela passou a nascer 28px 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 até o topo do botão. Aqui viram uns 80. As outras três 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); }