/* ============================================================
   lp.css — folha das quatro 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 quatro páginas de área: as variáveis
   abaixo não vazam para o resto do site.
   ========================================================================== */
:root{
  --lp-sec:clamp(4rem,3rem + 4.6vw,7.5rem);
  --lp-tinta:#0a1224;
}
.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 do
        médico 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)}
.lp-sh h2{font-weight:600;font-size:var(--fs-h2);line-height:1.1;/* 390px: 27,8 -> 24 */
  letter-spacing:-.03em;color:var(--text-strong);text-wrap:balance;max-width:26ch}
.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}
/* `.center` virou redundante — o padrão já é esse. Fica definida porque o
   markup ainda a usa em seis cabeçalhos e ela não custa nada; remover exigiria
   mexer nas quatro páginas 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 .prose{max-width:none}
/* o teto de 22ch 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}

@media (max-width:940px){
  .lp-consulta{grid-template-columns:1fr;gap:var(--space-7)}
  .lp-consulta-fig{width:min(480px,100% - 20px)}
}
@media (max-width:560px){
  .lp-consulta-fig::before{inset:18px -10px -10px 18px}
  .lp-consulta-fig{width:min(480px,100% - 10px)}
}

/* ==========================================================================
   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 dourado 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}

.lp-selo{display:inline-flex;align-items:center;gap:10px;padding:9px 18px;background:var(--surface-card);
  border:1px solid var(--teal-200);border-radius:var(--radius-pill);font-size:.75rem;font-weight:700;
  letter-spacing:.04em;color:var(--color-secondary);box-shadow:var(--shadow-xs)}
.lp-selo .pt{width:7px;height:7px;border-radius:50%;background:var(--teal-500);flex-shrink:0}
.lp-hero h1{margin-top:var(--space-5);font-weight:600;
  font-size:clamp(1.75rem,1.1rem + 2.3vw,2.9rem);/* 390px: 34,4 -> 28 */line-height:1.03;letter-spacing:-.038em;
  color:var(--text-strong);text-wrap:balance;max-width:15ch}
.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}

/* 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)}
/* card da nota do Doctoralia (componente .nota-doc, styles.css) no lugar do
   antigo cartão "Dr. Diogo Smith · Urologia" (removido a pedido do Marco,
   25/09/2026): sai da foto pela borda de BAIXO, à esquerda, no fluxo — longe
   do rosto em qualquer foto e sem cobrir o retrato. */
.lp-retrato .nota-doc{position:relative;width:max-content;max-width:calc(100% - 8px);margin:-30px 0 0 -18px}
@media (max-width:940px){.lp-retrato .nota-doc{margin-left:14px}}
.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 9px #fff,var(--shadow-xl);position:relative;z-index:1}
.lp-retrato::before{content:"";position:absolute;inset:26px -20px -20px 26px;
  border-radius:var(--radius-2xl);border:2px solid var(--teal-500);opacity:.45;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-size:1.02rem;font-weight:600;letter-spacing:-.02em;
  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}
  /* ...e sem a entrada em escala: primeira coisa da tela, o retrato é o LCP,
     e o reveal o deixava invisível até o reveal.js rodar. */
  html.js-rv .lp-retrato[data-rv]{opacity:1;transform:none;transition:none}
  .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. */
  .lp-retrato{justify-self:start;width:min(480px,100% - 20px)}
  /* 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}
  .lp-arcos{top:auto;bottom:-8%;right:-30%;width:70vw;opacity:.1}
}
@media (max-width:560px){
  .lp-retrato::before{inset:18px -10px -10px 18px}
  .lp-retrato{width:min(480px,100% - 10px)}
  .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-weight:600;font-size:1.3rem;letter-spacing:-.028em;color:var(--text-strong);
  margin-bottom:var(--space-5)}
.lp-reg h4{font-size:.7rem;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)}
.lp-reg .btn{margin-top:auto}

/* 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 DA CONSULTA — sequência conectada
   ========================================================================== */
.lp-passos{--etapa-gap:clamp(18px,2.2vw,30px);counter-reset:lp;display:grid;
  grid-template-columns:repeat(5,minmax(0,1fr));gap:var(--space-7) var(--etapa-gap);margin-top:var(--space-8)}
/* MESMO desenho das etapas da home (.step, 25/09/2026, pedido do Marco):
   marco em círculo de 52px, fio dourado 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 quatro páginas de área não muda. */
.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-display);font-size:1.05rem;font-weight:600;font-variant-numeric:tabular-nums;
  box-shadow:0 10px 22px -14px rgba(127,98,48,.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(156,123,62,.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)}}
.lp-passo h3{font-size:1.04rem;font-weight:700;color:var(--text-strong);margin-bottom:6px;line-height:1.3}
.lp-passo p{font-size:var(--fs-body);line-height:1.62;color:var(--text-muted)}
/* 5 etapas não fecham grade de 2 colunas: abaixo de 1000px vira a linha do
   tempo vertical da home (marco à esquerda, texto à direita, fio descendo). */
@media (max-width:1000px){
  .lp-passos{grid-template-columns:minmax(0,1fr);gap:0;max-width:640px;margin-inline:auto}
  .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(156,123,62,.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-size:1rem;font-weight:700;color:var(--text-strong);margin-bottom:9px;line-height:1.32}
.lp-caminho p{font-size:var(--fs-body);line-height:1.62;color:var(--text-muted);flex-grow:1}
.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. */
.lp-caminho:has(> .capa){padding-inline:22px}
.lp-caminho:has(> .capa) > .capa{margin-inline:-22px}

/* ==========================================================================
   07. PROCEDIMENTOS — abas em CSS puro
   ========================================================================== */
.lp-abas{margin-top:var(--space-8)}
.lp-abas input{position:absolute;opacity:0;width:1px;height:1px;pointer-events:none}
.lp-abas .tabs{display:inline-flex;gap:5px;padding:6px;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;gap:9px;padding:12px 26px;
  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:hover{color:var(--text-strong)}
.lp-abas .painel{display:none}
#aba-sexual:checked ~ .tabs-wrap label[for="aba-sexual"],
#aba-hormonal:checked ~ .tabs-wrap label[for="aba-hormonal"]{
  background:var(--surface-card);color:var(--text-strong);box-shadow:var(--shadow-sm)}
#aba-sexual:checked ~ .paineis .p-sexual,
#aba-hormonal:checked ~ .paineis .p-hormonal{display:block;animation:lpFade .42s var(--ease-out-quart)}
@keyframes lpFade{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
#aba-sexual:focus-visible ~ .tabs-wrap label[for="aba-sexual"],
#aba-hormonal:focus-visible ~ .tabs-wrap label[for="aba-hormonal"]{outline:2px solid var(--teal-700);outline-offset:3px}
@media (prefers-reduced-motion:reduce){
  #aba-sexual:checked ~ .paineis .p-sexual,#aba-hormonal:checked ~ .paineis .p-hormonal{animation:none}
}
.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-size:1rem;font-weight:700;color:var(--text-strong);margin-bottom:var(--space-4)}
.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)}

/* ==========================================================================
   08. SOBRE O MÉDICO
   ========================================================================== */
.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-weight:600;font-size:var(--fs-h2);line-height:1.12;/* 390px: 27,0 -> 24 */
  letter-spacing:-.03em;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.
   ========================================================================== */
.lp-caminho .capa{position:relative;overflow:hidden;background:var(--surface-page);
  margin:calc(-1 * var(--space-6)) calc(-1 * 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}
/* 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}

/* 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 quatro 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)}
@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%}}