/* ============================================================
   lp.css — folha das páginas de área de atuação.

   Era gerada em PHP e injetada inline em <style> (partials/lp-css.php),
   herança de quando estas páginas eram landing pages de visita única.
   Como agora são páginas centrais do site, com visitas repetidas e
   navegação entre elas pelo menu, virou arquivo: ~20 KB que deixam de
   voltar no HTML a cada pageview. Carregada DEPOIS do styles.css, de
   onde vêm os tokens var(--*).
   ============================================================ */
/* ==========================================================================
   TOKENS LOCAIS DAS PÁGINAS DE ÁREA
   Esta folha só é carregada nas páginas de área: as variáveis abaixo não
   vazam para o resto do site.
   --lp-tinta é o oliva mais fundo da faixa de credenciais (#312c25 = a
   --azul-900 do styles.css; o bege #D7C4B3 dá 9,0:1 sobre ele).
   ========================================================================== */
:root{
  --lp-sec:clamp(4rem,3rem + 4.6vw,7.5rem);
  --lp-tinta:#312c25;
}
.lp-sec{padding-block:var(--lp-sec);position:relative}
.lp-sec-tinta{background:var(--surface-page)}

/* --------------------------------------------------------------------------
   CABEÇALHO DE SEÇÃO — centralizado.

   Sem numeração: sem ela não há razão para a grade de duas colunas
   (`auto 1fr`), que existia só para acomodar o numeral na margem esquerda.

   CENTRALIZADO, e não à esquerda, por três motivos:
     1. é a convenção do próprio site — home, Áreas de Atuação, página da
        médica e o blog usam cabeçalho de seção centralizado (.sh center). As
        LPs eram a exceção, e a exceção existia por causa do numeral;
     2. seis dos 28 cabeçalhos destas páginas já eram `.lp-sh center`;
        centralizar o resto acaba com a mistura dentro da própria página;
     3. sem o numeral, um bloco à esquerda com teto de 940px dentro de um
        contêiner de 1180 fica sem âncora visual — flutua.

   A exceção é o cabeçalho que vive DENTRO da coluna do bloco da consulta:
   ver `.lp-consulta .lp-sh` mais abaixo.
   -------------------------------------------------------------------------- */
.lp-sh{display:grid;grid-template-columns:1fr;justify-items:center;text-align:center;
  max-width:820px;margin-inline:auto;margin-bottom:var(--space-8)}
.lp-sh .eyebrow{margin-bottom:var(--space-4)}
/* Marcellus 400: tamanho do --fs-h2 (já recalibrado), entrelinha do
   --lh-heading e espaçamento neutro — os -.03em eram ajuste do Manrope. */
/* margin-inline:auto no h2 e no .lead (QA 29/09/2026): com teto em ch,
   os dois ficavam encostados à esquerda da caixa centralizada e saíam do
   eixo (h2 20–39px à esquerda a 1024/768; lead 21px a 1440). */
.lp-sh h2{font-family:var(--font-display);font-weight:400;font-size:var(--fs-h2);line-height:var(--lh-heading);
  letter-spacing:var(--ls-display);color:var(--text-strong);text-wrap:balance;max-width:26ch;margin-inline:auto}
.lp-sh .lead{margin-top:var(--space-4);font-size:var(--fs-lead);line-height:1.55;
  color:var(--text-muted);max-width:60ch;text-wrap:pretty;margin-inline:auto}
/* `.center` virou redundante — o padrão já é esse. Fica definida porque o
   markup ainda a usa em vários cabeçalhos e ela não custa nada; remover
   exigiria mexer em todas as páginas de área para não ganhar nada. */
.lp-sh.center{max-width:820px;margin-inline:auto}

/* --------------------------------------------------------------------------
   BLOCO DA CONSULTA COM RETRATO
   Retrato a esquerda, cabecalho numerado e texto a direita, centrados um
   contra o outro. A coluna da foto e travada em 400px e alinhada a esquerda
   para o retrato encostar na mesma margem do resto da pagina.
   -------------------------------------------------------------------------- */
.lp-consulta{display:grid;grid-template-columns:minmax(0,400px) minmax(0,1fr);
  gap:clamp(2rem,4.5vw,4rem);align-items:center}
/* -20px e a sobra da moldura a direita; descontar aqui evita que ela invada
   a coluna do texto. */
.lp-consulta-fig{position:relative;margin:0;justify-self:start;width:min(400px,100% - 20px)}
.lp-consulta-fig img{width:100%;height:auto;aspect-ratio:4/5;object-fit:cover;
  object-position:50% 16%;border-radius:var(--radius-2xl);
  box-shadow:0 0 0 8px #fff,var(--shadow-xl);position:relative;z-index:1}
/* ::before com z-index 0 em vez de ::after com -1: a secao tem fundo proprio
   (.lp-sec-tinta), e um filho com z-index negativo sumiria atras dele. */
.lp-consulta-fig::before{content:"";position:absolute;inset:22px -20px -20px 22px;
  border-radius:var(--radius-2xl);border:2px solid var(--teal-500);opacity:.45;z-index:0}
/* A EXCEÇÃO ao cabeçalho centralizado. Este não é cabeçalho de largura cheia:
   é o topo de uma coluna de texto ao lado do retrato, e centralizar aqui
   brigaria com o parágrafo alinhado à esquerda logo abaixo.
   Também não precisa do teto de largura nem da margem inferior cheia: o texto
   vem logo em seguida, no mesmo bloco. */
.lp-consulta .lp-sh{max-width:none;margin-inline:0;margin-bottom:var(--space-6);
  justify-items:start;text-align:left}
.lp-consulta .lp-sh h2,.lp-consulta .lp-sh .lead{margin-inline:0}
.lp-consulta .prose{max-width:none}
/* o teto de 26ch do h2 foi pensado para a largura cheia da pagina; dentro da
   coluna ele forcava uma quarta linha desnecessaria. */
.lp-consulta .lp-sh h2{max-width:none}

/* Centrado no tablet (QA2 01/10/2026, TB1), como o retrato do herói
   (.lp-retrato): preso à esquerda sobrava um vão de 217–382px à direita.
   O celular (≤560) continua à esquerda, como estava: ali a figura já vai
   quase de borda a borda e a moldura usa os 10px da direita. */
@media (max-width:940px){
  .lp-consulta{grid-template-columns:1fr;gap:var(--space-7)}
  .lp-consulta-fig{width:min(480px,100% - 20px);justify-self:center}
}
@media (max-width:560px){
  .lp-consulta-fig::before{inset:18px -10px -10px 18px}
  .lp-consulta-fig{width:min(480px,100% - 10px);justify-self:start}
}

/* ==========================================================================
   01. HERO — assimétrico, com painel sangrando à direita
   ========================================================================== */
.lp-hero{position:relative;isolation:isolate;overflow:hidden;background:var(--gradient-paper)}
.lp-hero::before{content:"";position:absolute;inset:0;z-index:-2;pointer-events:none;background:var(--glow-teal)}
/* painel tingido que sangra até a borda direita da viewport: quebra a grade
   e ancora o retrato sem precisar de imagem de fundo */
.lp-hero::after{content:"";position:absolute;z-index:-1;pointer-events:none;
  top:0;bottom:0;left:53%;right:-10vw;background:var(--teal-50);opacity:.55;
  border-radius:56px 0 0 56px;transform:skewX(-4deg)}
/* migalhas no topo do herói: estas páginas deixaram de ser landing pages
   isoladas e passaram a ter lugar na navegação do site. */
.lp-hero .crumbs{padding-top:clamp(1.4rem,2.4vw,2.1rem);position:relative;z-index:1}
.lp-hero .crumbs + .grid{padding-top:clamp(1.4rem,1.1rem + 2vw,2.9rem)}
.lp-hero .grid{display:grid;grid-template-columns:1fr 1fr;gap:clamp(2rem,4vw,4rem);
  align-items:center;padding-block:clamp(2.75rem,2rem + 4vw,5.25rem)}
/* arcos decorativos: grafismo neutro de fundo, em marrom a 16% de opacidade */
.lp-arcos{position:absolute;top:-12%;right:-14%;width:min(58vw,680px);height:auto;
  z-index:-1;color:var(--teal-500);opacity:.16;pointer-events:none}

/* Sobretítulo e H1 IGUAIS aos da home (29/09/2026): o .eyebrow do
   styles.css (fio + caixa alta marrom) no lugar da antiga pílula, e o H1 no
   mesmo clamp e espaçamento do .hero h1 do index.php. A largura é 12em (a
   home usa 10.4em): os títulos das áreas são mais longos, e com 10.4em o de
   Tecnologias ia a 4 linhas. No celular o sobretítulo fica só com a cidade:
   a frase inteira não cabe numa linha. */
@media (max-width:560px){.lp-hero .eb-mais{display:none}}
.lp-hero h1{margin-top:var(--space-5);font-family:var(--font-display);font-weight:400;
  font-size:clamp(1.75rem,1.15rem + 2.25vw,3rem);line-height:var(--lh-display);letter-spacing:0;
  color:var(--text-strong);text-wrap:balance;max-width:12em}
.lp-hero .lead{margin-top:var(--space-5);font-size:var(--fs-lead);line-height:1.58;
  color:var(--text-body);max-width:52ch;text-wrap:pretty}
.lp-hero .micro{margin-top:var(--space-4);font-size:.86rem;line-height:1.6;color:var(--text-muted);max-width:44ch;
  text-wrap:pretty}

/* retrato: painel branco + moldura de fio, com o cartão de credencial
   atravessando a borda inferior esquerda */
/* margin:0 é obrigatório: <figure> traz 40px laterais do user-agent. No
   desktop o justify-self:center escondia o efeito, mas a partir de 940px,
   com justify-self:start, os 40px da esquerda somavam-se à largura 100% e
   o retrato vazava ~20px além da viewport em telas estreitas. */
/* o desconto de 20px tambem na regra base: entre 941 e 1085px a coluna fica
   com ~370px e a moldura (inset -20px) furava a margem direita. */
/* desktop: até 500px de largura (~625px de altura), pedido do Marco em
   24/09/2026; a grade do herói passou a colunas iguais para caber. */
.lp-retrato{position:relative;margin:0;justify-self:center;width:min(500px,100% - 20px)}
/* cards de nota (Doctoralia e Google): visual e posição em styles.css
   (.nota-doc, .nota-pos-esq, .nota-pos-dir), os mesmos da home (29/09/2026) */
.lp-retrato img{width:100%;height:auto;aspect-ratio:4/5;object-fit:cover;object-position:50% 18%;
  border-radius:var(--radius-2xl);box-shadow:0 0 0 8px #fff,var(--shadow-xl);position:relative;z-index:1}
/* anel branco de 8px e moldura 24/-22 a 50%: os mesmos do retrato da home */
.lp-retrato::before{content:"";position:absolute;inset:24px -22px -22px 24px;
  border-radius:var(--radius-2xl);border:2px solid var(--teal-500);opacity:.5;z-index:0}
.lp-cartao{position:relative;z-index:2;margin:-30px 0 0 -18px;background:var(--surface-card);
  border:1px solid var(--linha);border-radius:var(--radius-lg);box-shadow:var(--shadow-lg);
  padding:16px 19px;max-width:265px}
.lp-cartao .nm{display:block;font-family:var(--font-display);font-size:1.06rem;font-weight:400;letter-spacing:0;
  color:var(--text-strong);line-height:1.2}
/* rótulo micro em caixa alta: 11px é o piso prático de legibilidade */
.lp-cartao .sp{display:flex;align-items:center;gap:8px;margin-top:6px;font-size:.75rem;font-weight:700;
  letter-spacing:.14em;text-transform:uppercase;color:var(--color-secondary)}
.lp-cartao .sp::before{content:"";width:13px;height:2px;background:var(--teal-500);border-radius:2px;flex-shrink:0}

/* barra de confiança no pé do herói, com divisores */
.lp-conf{list-style:none;margin:var(--space-7) 0 0;padding:var(--space-5) 0 0;
  border-top:1px solid var(--linha);display:flex;flex-wrap:wrap;gap:12px clamp(1.25rem,3vw,2.5rem)}
.lp-conf li{display:inline-flex;align-items:center;gap:9px;font-size:.83rem;font-weight:700;
  color:var(--text-body);position:relative}
.lp-conf li + li::before{content:"";position:absolute;left:calc(-1 * clamp(.625rem,1.5vw,1.25rem));
  top:50%;transform:translateY(-50%);width:1px;height:15px;background:var(--linha-forte)}
.lp-conf li svg{width:15px;height:15px;flex-shrink:0;color:var(--teal-500);
  stroke:currentColor;fill:none;stroke-width:3;stroke-linecap:round;stroke-linejoin:round}

@media (max-width:940px){
  .lp-hero::after{display:none}
  .lp-hero .grid{grid-template-columns:1fr;gap:var(--space-8)}
  /* Empilhado, a FOTO vem primeiro: foto, selo + título, apresentação e
     botões (pedido do Marco, 26/09/2026 — o mesmo na home). Só a ordem
     visual muda: no HTML o texto continua antes, e assim o teclado e o
     desktop seguem texto → foto. */
  .lp-hero-media{order:-1}
  /* A entrada em escala do retrato saiu do markup nas seis páginas (QA
     29/09/2026): ele é o LCP e o reveal o deixava invisível até o
     reveal.js rodar, também no desktop. A exceção que vivia aqui perdeu o
     alvo. */
  .lp-hero h1{max-width:none}
  /* 100% menos a sobra da moldura (20px a direita): assim ela encosta
     exatamente na margem do texto em vez de furar a coluna. */
  /* centralizado no tablet (30/09/2026, pedido do Marco): preso à esquerda,
     sobrava um vão de 70–340px à direita. margin-inline, e não justify-self:
     o retrato está num bloco comum (.lp-hero-media), não numa grade. O
     celular (≤560) volta a width:auto e vai de borda a borda. */
  .lp-retrato{width:min(480px,100% - 20px);margin-inline:auto}
  /* o -18px do cartao so faz sentido ao lado do texto; em coluna unica ele
     furava a margem esquerda. Zerado a partir de 940px, nao de 560px. */
  .lp-cartao{margin-left:0;max-width:none}
  /* Empilhado, os arcos ficavam cortados junto do H1 e do CTA (QA
     29/09/2026): somem abaixo de 940px. */
  .lp-arcos{display:none}
}
@media (max-width:560px){
  /* CELULAR: RETRATO EM FAIXA 4:3 DE BORDA A BORDA, como o da página da
     médica (QA 30/09/2026). O retrato 4/5 emoldurado tinha ~420px de altura
     e, com a foto primeiro, o "Agendar avaliação" caía entre 1.080 e 1.140px,
     abaixo da primeira tela (844). A faixa sai da calha pela margem negativa
     do --gutter (não por 100vw) e perde o anel, o canto e a moldura, que são
     recursos de retrato emoldurado. object-position 50% 24%: as fotos são
     3:4 e a janela 4:3 mostra 56% da altura; com 24% o rosto (22–31% do
     arquivo) fica no terço de cima e o queixo acima dos cards de nota, que
     no celular empilham no canto de baixo à esquerda (styles.css). Com 18%
     o card do Google encostava no queixo no deep plane e nos injetáveis;
     o topo do cabelo pode encostar na borda, a testa não.
     Os espaços do topo encolhem junto: migalhas, grade, título, texto e
     botão. */
  .lp-hero .crumbs{padding-top:14px;margin-bottom:0}
  .lp-hero .crumbs + .grid{padding-top:14px}
  /* Migalhas numa linha só: com três níveis, a página atual (que é o
     próprio H1, logo abaixo) sai da VISTA junto com a seta que a antecede,
     e a trilha deixava de ocupar duas linhas. Continua para o leitor de
     tela (clip, não display:none). Com dois níveis (face e pescoço, o hub)
     nada muda. */
  .lp-hero .crumbs a + .sep + a + .sep{display:none}
  .lp-hero .crumbs a + .sep + a + .sep + [aria-current]{position:absolute;width:1px;height:1px;
    margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
  .lp-hero .grid{gap:24px}
  .lp-hero-media{margin-inline:calc(-1 * var(--gutter))}
  /* stretch, não o start dos 940px: com width:auto e start, o retrato
     encolhia para ~328px em vez de ir de borda a borda */
  .lp-retrato{width:auto;justify-self:stretch}
  .lp-retrato::before{display:none}
  .lp-retrato img{aspect-ratio:4/3;object-position:50% 24%;border-radius:0;box-shadow:none}
  /* olho 14 → título 20 → texto 20 → botão: com isso o botão cabe na
     primeira tela (844) também em injetáveis e tecnologias, que têm o
     texto mais longo (7 linhas a 390px) */
  .lp-hero h1{margin-top:var(--space-3)}
  .lp-hero .lead{margin-top:var(--space-4)}
  .lp-hero .stack-cta{margin-top:var(--space-4)}
  .lp-conf{gap:10px 0;flex-direction:column;align-items:flex-start}
  .lp-conf li + li::before{display:none}
}

/* 02. FAIXA DE CREDENCIAIS: mudou para styles.css (.lp-cred) em 25/09/2026,
   porque a home passou a usar a mesma faixa. */

/* ==========================================================================
   03. REGIÃO EM DESTAQUE — ilustração esquemática ampliada, painel tingido
   ========================================================================== */
.lp-regiao{display:grid;grid-template-columns:1fr 1fr;gap:clamp(20px,2.4vw,30px)}
@media (max-width:900px){.lp-regiao{grid-template-columns:1fr}}
.lp-reg{display:flex;flex-direction:column;padding:0;overflow:hidden}
.lp-reg .fig{margin:0;position:relative;background:linear-gradient(160deg,var(--teal-50),var(--surface-page));
  border-bottom:1px solid var(--linha);display:flex;align-items:center;justify-content:center;
  padding:clamp(1.25rem,2.6vw,2.25rem)}
.lp-reg .fig svg{width:100%;max-width:330px;height:auto;display:block}
.lp-reg .fig figcaption{position:absolute;left:clamp(1rem,2vw,1.5rem);top:clamp(1rem,2vw,1.5rem);
  font-size:.7rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--color-secondary)}
.lp-reg .corpo{padding:clamp(1.5rem,3vw,2.25rem);display:flex;flex-direction:column;flex-grow:1}
.lp-reg h3{font-family:var(--font-display);font-weight:400;font-size:1.3rem;letter-spacing:var(--ls-display);
  line-height:var(--lh-heading);color:var(--text-strong);margin-bottom:var(--space-5);text-wrap:balance}
/* .75rem (12px), o piso do rótulo em caixa alta (QA 29/09/2026; era 11,2px) */
.lp-reg h4{font-size:.75rem;font-weight:700;letter-spacing:.16em;text-transform:uppercase;
  color:var(--color-secondary);margin:0 0 var(--space-4)}
.lp-reg .cond{margin:var(--space-5) 0 0;padding:var(--space-5);background:var(--surface-page);
  border-radius:var(--radius-lg);font-size:.9rem;line-height:1.68;color:var(--text-body)}
.lp-reg .cond strong{color:var(--text-strong)}
.lp-reg .nota{margin:var(--space-4) 0 var(--space-6);font-size:.84rem;line-height:1.6;color:var(--text-muted);
  text-wrap:pretty}
/* celular: o respiro de 28px dentro do .corpo (24px) deixava o texto do
   quadro com ~213px a 360 (QA 29/09/2026) */
@media (max-width:560px){.lp-reg .cond{padding:18px 20px}}
.lp-reg .btn{margin-top:auto}
/* Cartão com IMAGEM no lugar do desenho em SVG (bb_ilustrativa: a <img
   class="ilustrativa"> ou, sem o arquivo, o espaço reservado .capa-pendente).
   A .fig acima foi pensada para o SVG (respiro interno, conteúdo centrado);
   com imagem, a figura perde o respiro e a imagem encosta nas bordas do
   cartão, de ponta a ponta. A legenda, quando houver, ganha fundo de pílula
   para ler sobre qualquer foto. Vale para todas as LPs (frontoplastia e
   deep plane usam hoje).
   O :has() fica em regras PRÓPRIAS: seletor que o navegador não entende
   derruba a regra inteira. Sem :has(), a imagem continua de largura cheia,
   só que dentro do respiro de antes.
   Com a legenda visível "Imagem ilustrativa" (styles.css §10.9), a <img>
   vem dentro de <span class="ilus">: o invólucro assume o papel de filho
   direto da .fig, e a imagem dentro dele mantém a largura cheia. A legenda
   fica no canto inferior esquerdo; o figcaption, no superior. */
.lp-reg .fig>.ilustrativa,.lp-reg .fig>.capa-pendente,.lp-reg .fig>.ilus,
.lp-reg .fig>.ilus>.ilustrativa{display:block;width:100%}
.lp-reg .fig:has(>img,>.capa-pendente,>.ilus){padding:0;display:block}
.lp-reg .fig:has(>img,>.capa-pendente,>.ilus) figcaption{z-index:1;padding:6px 12px;background:var(--surface-card);
  border-radius:var(--radius-pill);box-shadow:var(--shadow-xs)}
/* Celular: no canto superior a pílula cobria a testa das fotos da
   frontoplastia (QA 29/09/2026). Vai para o canto INFERIOR DIREITO, na
   mesma linha e no mesmo recuo de 8px da legenda "Imagem ilustrativa"
   (inferior esquerdo). Abaixo de 375px a pílula fica mais compacta para
   as duas caberem lado a lado (a 360 sobram 16px entre elas); abaixo de
   355px nem assim: ela sobe para cima da legenda (8px + 23px + 9px).
   O recuo de 40px só vale com a legenda na tela (o .ilus): sem ela, a
   pílula ficava solta a 40px do pé, por cima da foto (QA2 01/10/2026,
   VA2-08). */
@media (max-width:600px){
  .lp-reg .fig:has(>img,>.capa-pendente,>.ilus) figcaption{top:auto;left:auto;right:8px;bottom:8px}
}
@media (max-width:374px){
  .lp-reg .fig:has(>img,>.capa-pendente,>.ilus) figcaption{padding:6px 10px;letter-spacing:.06em}
}
@media (max-width:354px){
  .lp-reg .fig:has(>.ilus) figcaption{bottom:40px}
}

/* traço da ilustração que entra ao rolar. Gate .js-rv: sem JS nada fica oculto. */
html.js-rv .lp-anat .an-osso{opacity:0;transform:translateY(10px);
  transition:opacity .75s var(--ease-out-quart),transform .75s var(--ease-out-quart)}
html.js-rv .lp-anat.rv-in .an-osso{opacity:1;transform:none}
html.js-rv .lp-anat .an-artic{opacity:0;transform:scale(.72);transform-box:fill-box;transform-origin:center;
  transition:opacity .6s var(--ease-out-quart) .22s,transform .7s cubic-bezier(.34,1.36,.64,1) .22s}
html.js-rv .lp-anat.rv-in .an-artic{opacity:1;transform:none}
html.js-rv .lp-anat .an-eixo{opacity:0;transition:opacity .7s ease .5s}
@media print{html.js-rv .lp-anat .an-osso,html.js-rv .lp-anat .an-artic,html.js-rv .lp-anat .an-eixo{opacity:1!important;transform:none!important}}
html.js-rv .lp-anat.rv-in .an-eixo{opacity:1}
@media (prefers-reduced-motion:reduce){
  html.js-rv .lp-anat .an-osso,html.js-rv .lp-anat .an-artic,html.js-rv .lp-anat .an-eixo{
    opacity:1!important;transform:none!important;transition:none!important}
}

/* ==========================================================================
   04. ETAPAS — sequência conectada, de 4 a 6 passos.

   Uso:
   <div class="lp-passos" style="--n:4">
     <div class="lp-passo" data-rv-auto><h3>Título</h3><p>Texto curto.</p></div>
     … (4, 5 ou 6 .lp-passo)
   </div>

   --n = número de colunas no desktop = número de passos (padrão 5). A
   página DEVE escrever style="--n:<quantidade>" quando tiver 4 ou 6; as
   regras :has() abaixo acertam a conta sozinhas nos navegadores atuais e
   ficam como rede de segurança. Abaixo de 1000px vira a linha do tempo
   vertical, qualquer que seja o --n. O numeral é contador (::before) e o
   fio entre os marcos some no último passo: nada no HTML precisa mudar.
   Com 6 passos a coluna fica estreita entre 1001 e ~1180px (≈140px):
   título de etapa curto, de até duas palavras.
   ========================================================================== */
.lp-passos{--n:5;--etapa-gap:clamp(18px,2.2vw,30px);counter-reset:lp;display:grid;
  grid-template-columns:repeat(var(--n),minmax(0,1fr));gap:var(--space-7) var(--etapa-gap);margin-top:var(--space-8)}
.lp-passos:has(> .lp-passo:nth-child(4):last-child){--n:4}
.lp-passos:has(> .lp-passo:nth-child(6):last-child){--n:6}
/* 6 colunas entre 1001 e 1240px: coluna de 135–160px, e "Acompanhamento"
   na Marcellus a 1.1rem mede 149px (medido a 1024px). A .96rem mede ≈130px
   e cabe até na coluna de 135px (1001px com barra de rolagem). */
@media (min-width:1001px) and (max-width:1240px){
  .lp-passos:has(> .lp-passo:nth-child(6):last-child) .lp-passo h3,
  .lp-passos[style*="--n:6"] .lp-passo h3{font-size:.96rem;hyphens:auto}
  /* 5 colunas (QA 29/09/2026): nesta faixa alguns títulos quebram em duas
     linhas e empurravam só o texto deles para baixo. Altura de duas linhas
     (2 × line-height 1.3) para todos: os parágrafos começam na mesma linha. */
  .lp-passos:has(> .lp-passo:nth-child(5):last-child) .lp-passo h3,
  .lp-passos[style*="--n:5"] .lp-passo h3{min-height:2.6em}
}
/* MESMO desenho das etapas da home (.step, 25/09/2026, pedido do Marco):
   marco em círculo de 52px, fio marrom de uma etapa à seguinte que se
   desenha quando a etapa entra na tela (.rv-in do reveal.js) e, abaixo de
   1000px, linha do tempo vertical. O numeral é um contador no ::before,
   então o HTML das páginas de área não muda.
   Numeral em Manrope 600, como o .numeral da home, e não na Marcellus: nela
   o zero é um O redondo e "01" lia "OI" no círculo. Marrom sobre branco,
   6,7:1 (branco sobre marrom no hover, idem). */
.lp-passo{counter-increment:lp;position:relative;padding-top:72px}
.lp-passo::before{content:counter(lp,decimal-leading-zero);position:absolute;top:0;left:0;z-index:1;
  display:grid;place-items:center;width:52px;height:52px;border-radius:50%;
  background:var(--surface-card);border:2px solid var(--teal-500);color:var(--teal-700);
  font-family:var(--font-sans);font-size:1.05rem;font-weight:600;font-variant-numeric:tabular-nums;
  box-shadow:0 10px 22px -14px rgba(140,106,75,.6);
  transition:background-color .3s,border-color .3s,color .3s,transform .35s var(--ease-out-quart)}
.lp-passo::after{content:"";position:absolute;top:25px;left:66px;right:calc(14px - var(--etapa-gap));
  height:2px;border-radius:2px;background:linear-gradient(90deg,var(--teal-500),rgba(163,125,90,.18));
  transform-origin:left center}
.lp-passo:last-child::after{display:none}
html.js-rv .lp-passo[data-rv-auto]::after{transform:scaleX(0);
  transition:transform .8s var(--ease-out-quart) calc(var(--rv-i,0) * 78ms + .3s)}
html.js-rv .lp-passo.rv-in::after{transform:scaleX(1)}
@media (hover:hover){.lp-passo:hover::before{background:var(--teal-700);border-color:var(--teal-700);color:#fff;transform:scale(1.06)}}
/* títulos de cartão/etapa: Marcellus 400 um pouco maior que o Manrope 700
   de antes (mais leve e de olho menor, no tamanho antigo perdia presença) */
.lp-passo h3{font-family:var(--font-display);font-size:1.1rem;font-weight:400;letter-spacing:var(--ls-display);
  color:var(--text-strong);margin-bottom:6px;line-height:1.3;text-wrap:balance}
.lp-passo p{font-size:var(--fs-body);line-height:1.62;color:var(--text-muted);text-wrap:pretty}
/* 5 etapas não fecham grade de 2 colunas (e 4 ou 6 em 2 colunas perdem o
   fio da sequência): abaixo de 1000px vira a linha do tempo vertical da
   home (marco à esquerda, texto à direita, fio descendo), para qualquer --n. */
@media (max-width:1000px){
  /* margin-inline:0 (QA 29/09/2026): centrada, a coluna de 640px ficava
     recuada 36px no tablet, fora do alinhamento do texto acima. */
  .lp-passos{grid-template-columns:minmax(0,1fr);gap:0;max-width:640px;margin-inline:0}
  .lp-passo{display:grid;grid-template-columns:52px minmax(0,1fr);column-gap:18px;padding:0 0 30px}
  .lp-passo:last-child{padding-bottom:0}
  .lp-passo::before{position:relative;grid-row:1 / span 2}
  .lp-passo h3{grid-column:2;margin-top:13px}
  .lp-passo p{grid-column:2}
  .lp-passo::after{top:62px;bottom:8px;left:25px;right:auto;width:2px;height:auto;
    background:linear-gradient(180deg,var(--teal-500),rgba(163,125,90,.18));transform-origin:center top}
  html.js-rv .lp-passo[data-rv-auto]::after{transform:scaleY(0)}
  html.js-rv .lp-passo.rv-in::after{transform:scaleY(1)}
}
@media (prefers-reduced-motion:reduce){
  html.js-rv .lp-passo[data-rv-auto]::after{transform:none;transition:none}
  .lp-passo::before{transition:none}
}

/* ==========================================================================
   05/06. CARDS DE CAMINHO
   ========================================================================== */
.lp-caminho{display:flex;flex-direction:column;position:relative}
.lp-caminho .itile{width:50px;height:50px;font-size:24px;margin-bottom:var(--space-4)}
.lp-caminho h3{font-family:var(--font-display);font-size:1.08rem;font-weight:400;letter-spacing:var(--ls-display);
  color:var(--text-strong);margin-bottom:9px;line-height:1.32;text-wrap:balance}
.lp-caminho p{font-size:var(--fs-body);line-height:1.62;color:var(--text-muted);flex-grow:1;text-wrap:pretty}
/* O respiro do cartão no celular vem do --card-pad do .card (styles.css,
   QA 29/09/2026: 20px a 360); aqui não há regra própria. */
.lp-caminho .lim{margin:var(--space-4) 0 var(--space-5);padding-top:var(--space-4);
  border-top:1px solid var(--linha);font-size:.82rem;line-height:1.6;color:var(--text-muted);flex-grow:0}
.lp-caminho .go{margin-top:auto}
/* Chamada de agendar do cartao: botao, e nao link de texto, para a mesma
   frase ter a mesma aparencia aqui e mais abaixo. Ocupa a largura do cartao
   e quebra linha: rotulo longo nao cabe numa linha em cartao de ~280px. */
.lp-caminho .btn{margin-top:auto;width:100%;white-space:normal;text-align:center;line-height:1.3;
  padding:12px;gap:6px;font-size:.9rem;min-height:63px}
/* Os cartoes COM capa tinham 36px de respiro de cada lado: o botao ficava com
   188px (desktop, 4 por linha) ou 210px (celular) e os rotulos longos quebravam
   em 3 linhas, deixando um botao 19px mais alto que os vizinhos. Com 22px todos
   cabem em ate 2 linhas, e o min-height de 63px (= 2 linhas) iguala os quatro.
   Só nos cartões com capa E botão (QA 29/09/2026): nos de capa sem botão os
   22px deixavam o texto mais largo que o dos cartões de ícone vizinhos. */
.lp-caminho:has(> .capa):has(> .btn){padding-inline:22px}
.lp-caminho:has(> .capa):has(> .btn) > .capa{margin-inline:-22px}

/* ==========================================================================
   07. ABAS EM CSS PURO — genéricas, de 2 a 4 abas por grupo, sem id no CSS.

   Markup (copie exatamente; troque só o que está entre < >):

   <div class="lp-abas">
     <input class="lp-aba-r" type="radio" name="<grupo>" id="<grupo>-1" checked>
     <input class="lp-aba-r" type="radio" name="<grupo>" id="<grupo>-2">
     <!-- … até 4 rádios, sempre ANTES de .tabs e de .lp-paineis -->
     <div class="tabs">
       <label for="<grupo>-1"><span class="ico" data-icon="<ícone>" aria-hidden="true"></span> <Rótulo 1></label>
       <label for="<grupo>-2"><Rótulo 2></label>
     </div>
     <div class="lp-paineis">
       <div class="lp-painel"> …conteúdo da aba 1… </div>
       <div class="lp-painel"> …conteúdo da aba 2… </div>
     </div>
   </div>

   Regras do contrato:
   - O rádio N liga o <label> N e o painel N, pela POSIÇÃO (:nth-of-type):
     a ordem dos três tem de ser a mesma. Dentro de .tabs só <label>; dentro
     de .lp-paineis só os <div class="lp-painel"> (nenhum outro <div> entre
     eles). Os rádios são os únicos <input> do .lp-abas.
   - `name` único POR GRUPO na página (dois grupos com o mesmo name viram um
     grupo só) e `id` único na página: o id só serve ao for= do <label>, o
     CSS não o lê. O primeiro rádio leva `checked`.
   - Sem role="tablist"/"tab": o controle são os RÁDIOS (foco, setas e
     "opção 1 de 2" nativos); o <label> dá o nome. Tablist sem filhos
     role="tab" reprova no PageSpeed (aria-required-children).
   - Teclado: Tab entra no grupo pelo rádio marcado; ←/→ trocam de aba. O
     rádio é invisível, então o anel de foco é desenhado no <label> dele.
   - Rótulo longo quebra em duas linhas. No celular (≤560px) a barra vira
     grade de 2 colunas: 2 abas lado a lado, 3 abas = 2 + 1 de largura
     cheia, 4 abas = 2 × 2. Nada rola nem vaza na horizontal.
   ========================================================================== */
.lp-abas{margin-top:var(--space-8)}
.lp-abas input{position:absolute;opacity:0;width:1px;height:1px;pointer-events:none}
/* A barra centraliza sozinha (fit-content + margin auto), com ou sem o
   .tabs-wrap do markup antigo; flex-wrap leva 3–4 rótulos longos para uma
   segunda linha em vez de estourar a coluna. */
.lp-abas .tabs{display:flex;flex-wrap:wrap;gap:5px;padding:6px;width:fit-content;max-width:100%;
  margin:0 auto var(--space-7);background:var(--surface-page);border:1px solid var(--linha);
  border-radius:var(--radius-lg);justify-content:center}
.lp-abas .tabs-wrap{display:flex;justify-content:center}
.lp-abas .tabs label{display:inline-flex;align-items:center;justify-content:center;gap:9px;padding:12px 26px;
  min-height:48px;min-width:0;text-align:center;line-height:1.3;overflow-wrap:break-word;
  border-radius:var(--radius-md);font-weight:700;font-size:.94rem;color:var(--text-muted);cursor:pointer;
  transition:background var(--dur),color var(--dur),box-shadow var(--dur)}
.lp-abas .tabs label .ico{flex-shrink:0}
.lp-abas .tabs label:hover{color:var(--text-strong)}
.lp-abas .painel,.lp-abas .lp-painel{display:none}
@keyframes lpFade{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}

/* Aba ativa: fundo branco + fio marrom embaixo. O fio é o sinal de estado
   que não depende só da diferença branco × papel (1,1:1): marrom sobre
   branco dá 6,7:1 (WCAG 1.4.11). */
.lp-aba-r:nth-of-type(1):checked ~ .tabs > label:nth-of-type(1),
.lp-aba-r:nth-of-type(2):checked ~ .tabs > label:nth-of-type(2),
.lp-aba-r:nth-of-type(3):checked ~ .tabs > label:nth-of-type(3),
.lp-aba-r:nth-of-type(4):checked ~ .tabs > label:nth-of-type(4){
  background:var(--surface-card);color:var(--text-strong);
  box-shadow:inset 0 -2px 0 var(--teal-500),var(--shadow-sm)}
.lp-aba-r:nth-of-type(1):checked ~ .lp-paineis > .lp-painel:nth-of-type(1),
.lp-aba-r:nth-of-type(2):checked ~ .lp-paineis > .lp-painel:nth-of-type(2),
.lp-aba-r:nth-of-type(3):checked ~ .lp-paineis > .lp-painel:nth-of-type(3),
.lp-aba-r:nth-of-type(4):checked ~ .lp-paineis > .lp-painel:nth-of-type(4){
  display:block;animation:lpFade .42s var(--ease-out-quart)}
/* foco pelo teclado: o rádio focado acende o anel no rótulo dele */
.lp-aba-r:nth-of-type(1):focus-visible ~ .tabs > label:nth-of-type(1),
.lp-aba-r:nth-of-type(2):focus-visible ~ .tabs > label:nth-of-type(2),
.lp-aba-r:nth-of-type(3):focus-visible ~ .tabs > label:nth-of-type(3),
.lp-aba-r:nth-of-type(4):focus-visible ~ .tabs > label:nth-of-type(4){
  outline:2px solid var(--teal-700);outline-offset:3px}

@media (max-width:560px){
  .lp-abas .tabs{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));width:100%}
  .lp-abas .tabs label{padding:11px 12px;font-size:.9rem}
  /* número ímpar de abas: a última ocupa a linha inteira (3 = 2 + 1) */
  .lp-abas .tabs > label:last-child:nth-child(odd){grid-column:1 / -1}
}
@media (prefers-reduced-motion:reduce){
  .lp-abas .lp-painel{animation:none!important}
}

.lp-proc{display:grid;grid-template-columns:1fr 1fr;gap:clamp(18px,2vw,26px)}
@media (max-width:860px){.lp-proc{grid-template-columns:1fr}}
.lp-proc .bx{padding:clamp(1.5rem,3vw,2.1rem);display:flex;flex-direction:column}
.lp-proc h3{font-family:var(--font-display);font-size:1.08rem;font-weight:400;letter-spacing:var(--ls-display);
  line-height:1.3;color:var(--text-strong);margin-bottom:var(--space-4);text-wrap:balance}
.lp-proc .obs{margin-top:var(--space-5);padding-top:var(--space-4);border-top:1px solid var(--linha);
  font-size:.85rem;line-height:1.65;color:var(--text-muted)}
.lp-proc .obs strong{color:var(--text-body)}
.lp-proc .btn{margin-top:var(--space-5)}
/* Botão no pé do cartão (QA 29/09/2026): no cartão mais baixo do par ele
   ficava no meio, com um vão embaixo. margin-top:auto o leva ao pé; o
   respiro mínimo de 28px passa para a margem do elemento anterior (margem
   automática não tem piso). Sem :has(), fica a regra de cima. */
@supports selector(:has(+ a)){
  .lp-proc .bx > .btn{margin-top:auto}
  .lp-proc .bx > :has(+ .btn){margin-bottom:var(--space-5)}
}

/* ==========================================================================
   08. SOBRE A MÉDICA
   ========================================================================== */
.lp-sobre .grid{display:grid;grid-template-columns:.7fr 1.3fr;gap:clamp(2rem,4.5vw,3.75rem);align-items:center}
@media (max-width:900px){.lp-sobre .grid{grid-template-columns:1fr}}
/* ocupa a coluna inteira (era travado em 300px): o -16px e a sobra da
   moldura a direita, entao o conjunto encosta exatamente na margem.
   A altura acompanha sozinha pelo aspect-ratio 4/5. */
.lp-sobre-fig{position:relative;margin:0;justify-self:start;width:calc(100% - 16px)}
.lp-sobre-fig img{width:100%;height:auto;aspect-ratio:4/5;object-fit:cover;object-position:50% 16%;border-radius:var(--radius-2xl);
  box-shadow:0 0 0 8px #fff,var(--shadow-lg);position:relative;z-index:1}
/* ::before com z-index 0, nao ::after com -1: quando a secao e .lp-sec-tinta e
   nenhum ancestral cria contexto de empilhamento, o pseudo negativo fica ATRAS
   do fundo da secao e a moldura nunca aparece.
   Mesmo par ja usado em .lp-consulta-fig. */
.lp-sobre-fig::before{content:"";position:absolute;inset:-16px -16px 20px 20px;border-radius:var(--radius-2xl);
  border:2px solid var(--teal-500);opacity:.4;z-index:0}
/* Coluna unica: o retrato ocupa a coluna inteira menos os 16px que a moldura
   vaza a direita, para ela encostar na margem do texto em vez de furar.
   Precisa vir DEPOIS da regra base: mesma especificidade, vence a ultima. */
@media (max-width:900px){
  .lp-sobre-fig{justify-self:start;width:min(480px,100% - 16px)}
}
.lp-sobre h2{font-family:var(--font-display);font-weight:400;font-size:var(--fs-h2);line-height:var(--lh-heading);
  letter-spacing:var(--ls-display);color:var(--text-strong);margin-top:var(--space-4);text-wrap:balance}

/* ==========================================================================
   09. FECHAMENTO DA PAGINA
   O formulario saiu em 04/08/2026: as paginas mandam direto para
   /agendamento. Sobrou aqui o bloco de avisos que antecede o pedido
   — duvida respondida imediatamente antes do CTA escuro — e os cartoes
   de artigo e de outra área, herdados do antigo template area.php
   (removido junto com as páginas de área antigas).

   O .lp-avisos vivia sobre a faixa escura do formulario e era branco
   sobre transparencia. Agora fica em superficie clara: as cores foram
   invertidas, senao o texto sumiria.
   ========================================================================== */
.lp-avisos{max-width:760px;margin:var(--space-7) auto 0;display:grid;gap:11px}
.lp-avisos .a{display:flex;gap:14px;align-items:flex-start;padding:17px 20px;
  background:var(--surface-card);border:1px solid var(--linha);border-radius:var(--radius-md);
  box-shadow:var(--shadow-sm)}
.lp-avisos .a svg{width:18px;height:18px;flex-shrink:0;margin-top:3px;color:var(--teal-600);
  stroke:currentColor;fill:none;stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round}
.lp-avisos .a b{display:block;font-size:.92rem;color:var(--text-strong);margin-bottom:4px}
.lp-avisos .a span{display:block;font-size:.88rem;line-height:1.62;color:var(--text-body)}

/* O cartao de artigo saiu daqui em 22/09/2026: a definicao unica vive em
   styles.css (secao 10.6). Esta folha carrega DEPOIS do styles.css, entao uma
   copia aqui venceria a definicao boa por ordem de arquivo — foi assim que as
   paginas de area ficaram com um cartao diferente do da home. */

/* ==========================================================================
   CAPA DO CARTÃO DE CAMINHO — foto (ou espaço reservado) no lugar do ícone.

   A proporção mora num ::before com padding em PORCENTAGEM, não em
   aspect-ratio: porcentagem de padding resolve contra a largura do bloco que
   a contém, e a caixa não ganha a regra de dimensionamento que, num item
   esticado, a alargaria além da coluna — a mesma armadilha já documentada nos
   cartões de artigo.
   A capa sangra até a borda do cartão pela margem negativa que anula o
   padding do .card; o overflow:hidden que o .card já tem recorta o canto.
   ========================================================================== */
/* --card-pad: o mesmo token do padding do .card (styles.css, QA 29/09/2026),
   para a capa continuar encostada nas bordas em qualquer largura; o
   --space-6 é só a rede para quando o token não existir. */
.lp-caminho .capa{position:relative;overflow:hidden;background:var(--surface-page);
  margin:calc(-1 * var(--card-pad, var(--space-6))) calc(-1 * var(--card-pad, var(--space-6))) var(--space-5)}
.lp-caminho .capa::before{content:"";display:block;padding-top:56.25%}   /* 16/9 */
.lp-caminho .capa img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}
/* Com a legenda visível (styles.css §10.9) a <img> vem dentro do .ilus: é
   ele que ocupa a capa inteira, e a <img> absoluta preenche o .ilus. */
.lp-caminho .capa>.ilus{position:absolute;inset:0}
/* Espaço reservado: tracejado para ler como marcador de produção, e não como
   uma imagem que não carregou. */
.lp-caminho .capa-pendente{border-bottom:1px dashed var(--linha-forte)}
.lp-caminho .capa-pendente>span{position:absolute;inset:10px;display:flex;align-items:center;
  justify-content:center;border:1px dashed var(--linha-forte);border-radius:var(--radius-md);
  font-size:.72rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase;
  color:var(--text-muted);text-align:center}

/* FAQ */
.lp-faq{max-width:840px;margin:var(--space-8) auto 0}

/* LINKS NO TEXTO das páginas de área (QA 29/09/2026): regra única, no
   marrom de ação (--teal-700), 600 e sublinhado. Antes só injetáveis e a
   face tinham regra local; nas outras o link herdava o cinza do texto.
   :not([class]) deixa de fora botões e .go; o li fica restrito à
   .checklist para não pegar o título-link dos cartões de lp-outros. */
.lp-sec :is(p,.checklist li) a:not([class]){color:var(--teal-700);font-weight:600;
  text-decoration:underline;text-underline-offset:2px}

/* No celular, todo CTA da LP ocupa a largura inteira: alvo de toque generoso
   e nenhum rótulo longo empurrando a viewport. */
@media (max-width:620px){
  .lp-hero .btn,.lp-reg .btn,.lp-proc .btn,
  .lp-sobre .btn,.lp-sec .center > .btn,.ex-cta-mid .btn{width:100%}
}

/* ==========================================================================
   FOTO DA SEÇÃO DE ESCOPO / CONDIÇÕES (25/09/2026) — capa de artigo do blog
   logo abaixo do título da seção, nas páginas de área.
   ========================================================================== */
.lp-escopo-foto{max-width:820px;margin:0 auto var(--space-6);border-radius:var(--radius-xl);overflow:hidden;
  box-shadow:0 0 0 6px #fff,var(--shadow-lg);background:var(--surface-page)}
.lp-escopo-foto img{display:block;width:100%;height:auto;aspect-ratio:16/9;object-fit:cover}
.lp-escopo-nota{max-width:820px;margin:var(--space-4) auto 0;text-align:center;font-size:.84rem;line-height:1.55;color:var(--text-muted);
  text-wrap:balance}
/* NOTA SOB O CTA centrado de fim de seção (QA 29/09/2026): substitui o
   style="font-size:.87rem;color:…" repetido nas páginas e a .lp-escopo-nota
   que fazia o mesmo papel em duas delas (eram dois tamanhos). balance evita
   a palavra órfã na segunda linha. */
.lp-cta-nota{max-width:820px;margin:var(--space-4) auto 0;text-align:center;font-size:.87rem;line-height:1.55;
  color:var(--text-muted);text-wrap:balance}
@media (max-width:560px){.lp-escopo-foto{box-shadow:0 0 0 4px #fff,var(--shadow-md)}}
/* --largo: quando o conteúdo abaixo ocupa a largura toda (abas, grade de 2
   cartões, carrossel de 4), a foto acompanha essa largura para as bordas
   alinharem (Marco, 25/09/2026). Formato mais panorâmico no desktop para a
   altura continuar parecida com a de 820px. */
.lp-escopo-foto--largo{max-width:none}
@media (min-width:901px){.lp-escopo-foto--largo img{aspect-ratio:21/9;object-position:50% 42%}}

/* ==========================================================================
   10. BLOCOS QUE VIVIAM NO CSS EMBUTIDO DOS MOLDES
   Cópia fiel das regras que estavam repetidas no $P['css'] das páginas-molde
   (.lp-2col em três, .lp-destaque em duas, .lp-urgencia em uma). Aqui, as
   páginas novas não precisam de CSS embutido para usá-las.

   <div class="lp-2col">
     <figure class="fig" style="margin:0"> imagem (bb_ilustrativa) </figure>
     <div class="prose"> texto </div>
   </div>
   <p class="lp-destaque">Recado central da seção, uma ou duas frases.</p>
   <div class="lp-urgencia">
     <span class="ic ico" data-icon="alert-triangle" aria-hidden="true"></span>
     <div><b>Título do aviso</b><p>Texto do aviso.</p></div>
   </div>
   ========================================================================== */
/* faixa de destaque para o recado central da seção. Teto de 820px e
   centrada (QA 29/09/2026): solta na largura da página ia a 1099px; dentro
   de coluna estreita continua ocupando a coluna. */
.lp-destaque{margin:var(--space-6) auto 0;max-width:820px;padding:var(--space-5) var(--space-6);
  background:var(--teal-50);border:1px solid var(--teal-100);border-radius:var(--radius-lg);
  font-size:1.02rem;line-height:1.6;color:var(--text-strong);font-weight:600;text-wrap:pretty}
/* celular: respiro menor, o de 36px espremia o texto a 360 (QA 29/09/2026) */
@media (max-width:560px){.lp-destaque{padding:20px}}
/* grade de duas colunas com a imagem ao lado do texto */
.lp-2col{display:grid;grid-template-columns:.85fr 1.15fr;gap:clamp(1.5rem,3.5vw,3rem);align-items:center}
@media (max-width:900px){.lp-2col{grid-template-columns:1fr}}
/* aviso sóbrio: encontrável por quem precisa, sem assustar quem não precisa.
   Teto de 820px e centrado (QA 29/09/2026): na largura cheia a linha ia a
   103–121 caracteres; tecnologias fazia isso com style inline. */
.lp-urgencia{margin:var(--space-7) auto 0;max-width:820px;padding:var(--space-6);background:var(--surface-page);
  border:1px solid var(--linha-forte);border-radius:var(--radius-lg);display:flex;gap:16px;align-items:flex-start}
.lp-urgencia .ic{width:34px;height:34px;flex-shrink:0;display:inline-flex;align-items:center;
  justify-content:center;border-radius:var(--radius-md);background:var(--azul-50);color:var(--azul-500);font-size:18px}
.lp-urgencia b{display:block;font-size:.95rem;color:var(--text-strong);margin-bottom:6px}
.lp-urgencia p{font-size:.9rem;line-height:1.62;color:var(--text-body);margin:0;text-wrap:pretty}
/* Na seção de fundo papel (.lp-sec-tinta) o aviso, também papel, sumia no
   fundo: ali ele vira cartão branco, com a mesma borda. */
.lp-sec-tinta .lp-urgencia{background:var(--surface-card)}
@media (max-width:560px){.lp-urgencia{flex-direction:column;gap:12px;padding:24px 20px}}

/* ==========================================================================
   11. OUTROS PROCEDIMENTOS — partials/lp-outros.php
   Seção entre o CTA escuro e os artigos do blog (ou o rodapé, também
   escuro): fundo BRANCO, para não encostar no papel da seção de artigos
   quando ela aparecer. Cartões com a imagem da área (bb_ilustrativa), nome
   e a frase 'card' de areas-data.php.
   Desktop: 3 por linha; 5 cartões = 3 + 2 CENTRADOS (flex-wrap, não grid:
   a grade deixaria um buraco à direita da última linha). Tablet: 2 por
   linha. Celular (≤600px): lista compacta, miniatura à esquerda e nome à
   direita — cinco cartões inteiros empilhados passariam de 2.000px no fim
   da página; a frase do cartão fica para a página de destino.
   O cartão inteiro é clicável: o link é o nome (<h3><a>), esticado por
   ::after sobre o cartão; o anel de foco é desenhado nesse ::after, isto é,
   em volta do cartão todo.
   ========================================================================== */
.lp-outros{background:var(--surface-card)}
.lp-outros-lista{--g:clamp(16px,2vw,24px);list-style:none;margin:0;padding:0;
  display:flex;flex-wrap:wrap;justify-content:center;gap:var(--g)}
.lp-outros-lista > li{flex:0 0 calc((100% - 2 * var(--g)) / 3);min-width:0;display:flex}
.lp-outros-card{display:flex;flex-direction:column;width:100%;padding:0}
/* > .ilus > .ilustrativa: a mesma imagem quando sai com a legenda visível
   (styles.css §10.9) — o .ilus vira o item do cartão, do tamanho da <img>. */
.lp-outros-card > .ilustrativa,.lp-outros-card > .ilus > .ilustrativa{width:100%;height:auto;aspect-ratio:16/9;object-fit:cover;
  background:var(--surface-page)}
.lp-outros-corpo{display:flex;flex-direction:column;flex-grow:1;
  padding:var(--space-5) var(--space-6) var(--space-6)}
.lp-outros-card h3{font-family:var(--font-display);font-weight:400;font-size:1.12rem;letter-spacing:0;
  line-height:1.24;color:var(--text-strong);text-wrap:balance;margin-bottom:9px}
.lp-outros-card h3 a{color:inherit;text-decoration:none}
.lp-outros-card h3 a::after{content:"";position:absolute;inset:0;z-index:1;border-radius:inherit}
.lp-outros-card h3 a:focus-visible{outline:none}
.lp-outros-card h3 a:focus-visible::after{outline:2px solid var(--teal-700);outline-offset:-3px;
  border-radius:var(--radius-xl)}
.lp-outros-card p{color:var(--text-muted);line-height:1.58;font-size:var(--fs-body);flex-grow:1;
  margin-bottom:var(--space-5);text-wrap:pretty}
.lp-outros-card .go{margin-top:auto}
.lp-outros-card:hover .go{color:var(--teal-700)}
.lp-outros-card:hover .go .ico{transform:translateX(4px)}
@media (max-width:900px){
  .lp-outros-lista > li{flex-basis:calc((100% - var(--g)) / 2)}
}
@media (max-width:600px){
  .lp-outros-lista{gap:12px}
  .lp-outros-lista > li{flex-basis:100%}
  .lp-outros-card{display:grid;grid-template-columns:96px minmax(0,1fr);align-items:center;
    column-gap:16px;padding:10px}
  .lp-outros-card > .ilustrativa,.lp-outros-card > .ilus > .ilustrativa{width:96px;aspect-ratio:1/1;border-radius:var(--radius-md)}
  /* miniatura de 96px: a legenda "Imagem ilustrativa" ficaria ilegível e
     cobriria a imagem inteira — aqui o aviso fica no alt */
  .lp-outros-card .ilus-tag{display:none}
  .lp-outros-card > .capa-pendente{width:96px;min-width:0;border-radius:var(--radius-md)}
  .lp-outros-card > .capa-pendente::before{padding-top:100%}
  .lp-outros-card > .capa-pendente>span{inset:6px;font-size:.6rem;letter-spacing:.06em}
  .lp-outros-corpo{padding:4px 6px 4px 0}
  .lp-outros-card h3{font-size:1.04rem;margin-bottom:6px}
  .lp-outros-card p{display:none}
}