/* ============================================================
   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 DA LANDING PAGE
   Este <style> só existe nesta página: as variáveis abaixo não vazam
   para o resto do site.
   ========================================================================== */
:root{
  --lp-sec:clamp(4rem,3rem + 4.6vw,7.5rem);
  --lp-tinta:#0f212b;
  --lp-num:clamp(2.4rem,1.9rem + 2.2vw,3.9rem);
}
.lp-sec{padding-block:var(--lp-sec);position:relative}
.lp-sec-tinta{background:var(--surface-page)}

/* --------------------------------------------------------------------------
   CABEÇALHO DE SEÇÃO NUMERADO — o dispositivo editorial da página.
   O numeral vive na margem esquerda, como num dossiê. No celular ele sobe
   para a linha do olho, mantendo a leitura numa coluna só.
   -------------------------------------------------------------------------- */
.lp-sh{display:grid;grid-template-columns:auto 1fr;gap:0 clamp(1.5rem,3vw,2.75rem);
  align-items:start;max-width:940px;margin-bottom:var(--space-8)}
.lp-sh-num{font-size:var(--lp-num);font-weight:800;line-height:.82;letter-spacing:-.05em;
  font-variant-numeric:tabular-nums;color:var(--teal-500);opacity:.28;user-select:none}
.lp-sh .eyebrow{margin-bottom:var(--space-4)}
.lp-sh h2{font-weight:800;font-size:clamp(1.7rem,1.2rem + 2.2vw,2.65rem);line-height:1.1;
  letter-spacing:-.03em;color:var(--text-strong);text-wrap:balance;max-width:22ch}
.lp-sh .lead{margin-top:var(--space-4);font-size:var(--fs-lead);line-height:1.55;
  color:var(--text-muted);max-width:62ch;text-wrap:pretty}
.lp-sh.center{max-width:820px;margin-inline:auto;grid-template-columns:1fr;justify-items:center;text-align:center}
.lp-sh.center .lp-sh-num{margin-bottom:var(--space-4)}
.lp-sh.center h2,.lp-sh.center .lead{max-width:26ch}
.lp-sh.center .lead{max-width:60ch}
@media (max-width:720px){
  .lp-sh{grid-template-columns:1fr;gap:var(--space-4)}
  .lp-sh-num{font-size:2.2rem}
}

/* --------------------------------------------------------------------------
   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}
/* dentro da coluna o cabecalho nao precisa do teto de 940px nem da margem
   inferior cheia: o texto vem logo abaixo, no mesmo bloco. */
.lp-consulta .lp-sh{max-width:none;margin-bottom:var(--space-6)}
.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:58%;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:1.18fr .82fr;gap:clamp(2rem,4vw,4rem);
  align-items:center;padding-block:clamp(2.75rem,2rem + 4vw,5.25rem)}
/* arcos decorativos: mesma família do favicon e da arte de compartilhamento */
.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:800;
  font-size:clamp(2.15rem,1.25rem + 3.6vw,3.65rem);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. */
.lp-retrato{position:relative;margin:0;justify-self:center;width:min(360px,100% - 20px)}
.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:800;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:.69rem;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)}
  .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
   ========================================================================== */
.lp-cred{background:var(--lp-tinta);position:relative;isolation:isolate;overflow:hidden}
.lp-cred::before{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;
  background:radial-gradient(60% 100% at 50% 0%,rgba(0,155,162,.22) 0%,rgba(0,155,162,0) 68%)}
.lp-cred .in{max-width:var(--container);margin:0 auto;padding:clamp(2.25rem,3.4vw,3rem) var(--gutter);
/* 3 colunas desde 23/09/2026 (eram 4). Com 3 itens, um passo de 2 colunas
   deixaria SEMPRE um orfao na segunda linha — por isso vai direto para 1. */
  display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(20px,2.4vw,34px)}
@media (max-width:860px){.lp-cred .in{grid-template-columns:1fr;gap:22px}}
.lp-cred .it{display:flex;gap:15px;align-items:flex-start;position:relative}
.lp-cred .it + .it::before{content:"";position:absolute;left:calc(-1 * clamp(10px,1.2vw,17px));
  top:2px;bottom:2px;width:1px;background:rgba(255,255,255,.13)}
@media (max-width:860px){.lp-cred .it + .it::before{display:none}}
.lp-cred .ic{width:42px;height:42px;flex-shrink:0;display:inline-flex;align-items:center;justify-content:center;
  border-radius:var(--radius-md);background:rgba(0,155,162,.18);color:#628ab5;font-size:20px}
.lp-cred b{display:block;font-size:.92rem;font-weight:700;color:#fff;line-height:1.3;margin-bottom:4px}
.lp-cred span{font-size:.84rem;line-height:1.55;color:rgba(255,255,255,.62);display:block}

/* ==========================================================================
   03. OMBRO E COTOVELO — ilustração 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:800;font-size:1.55rem;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 anatômico 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}
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{counter-reset:lp;display:grid;grid-template-columns:repeat(5,1fr);
  gap:clamp(14px,1.6vw,22px);margin-top:var(--space-8);position:relative}
@media (max-width:1000px){.lp-passos{grid-template-columns:repeat(2,1fr)}}
@media (max-width:560px){.lp-passos{grid-template-columns:1fr}}
/* 36px do círculo + respiro: o título não pode encostar no numeral */
.lp-passo{counter-increment:lp;position:relative;padding-top:52px}
/* fio horizontal que costura os passos no desktop */
.lp-passo::after{content:"";position:absolute;top:17px;left:36px;right:calc(-1 * clamp(14px,1.6vw,22px));
  height:2px;background:var(--linha);z-index:0}
.lp-passo:last-child::after{display:none}
@media (max-width:1000px){.lp-passo::after{display:none}}
.lp-passo::before{content:counter(lp,decimal-leading-zero);position:absolute;top:0;left:0;
  width:36px;height:36px;border-radius:50%;background:var(--surface-card);
  border:2px solid var(--teal-500);color:var(--teal-700);font-size:.82rem;font-weight:800;
  font-variant-numeric:tabular-nums;display:flex;align-items:center;justify-content:center;z-index:1;
  transition:background var(--dur),color var(--dur),transform var(--dur) var(--ease)}
.lp-passo:hover::before{background:var(--teal-500);color:#fff;transform:scale(1.08)}
.lp-passo h3{font-size:1rem;font-weight:700;color:var(--text-strong);margin-bottom:7px;line-height:1.32}
.lp-passo p{font-size:.9rem;line-height:1.6;color:var(--text-muted)}
@media (prefers-reduced-motion:reduce){.lp-passo:hover::before{transform: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:1.08rem;font-weight:700;color:var(--text-strong);margin-bottom:9px;line-height:1.32}
.lp-caminho p{font-size:.92rem;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}

/* ==========================================================================
   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-ombro:checked ~ .tabs-wrap label[for="aba-ombro"],
#aba-cotovelo:checked ~ .tabs-wrap label[for="aba-cotovelo"]{
  background:var(--surface-card);color:var(--text-strong);box-shadow:var(--shadow-sm)}
#aba-ombro:checked ~ .paineis .p-ombro,
#aba-cotovelo:checked ~ .paineis .p-cotovelo{display:block;animation:lpFade .42s var(--ease-out-quart)}
@keyframes lpFade{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
#aba-ombro:focus-visible ~ .tabs-wrap label[for="aba-ombro"],
#aba-cotovelo:focus-visible ~ .tabs-wrap label[for="aba-cotovelo"]{outline:2px solid var(--teal-500);outline-offset:3px}
@media (prefers-reduced-motion:reduce){
  #aba-ombro:checked ~ .paineis .p-ombro,#aba-cotovelo:checked ~ .paineis .p-cotovelo{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:1.06rem;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. DR. BRUNO
   ========================================================================== */
.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: em /avaliacao-ombro-e-cotovelo a
   secao e .lp-sec-tinta e nenhum ancestral cria contexto de empilhamento, entao
   o pseudo negativo ficava ATRAS do fundo da secao e a moldura nunca aparecia.
   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:800;font-size:clamp(1.7rem,1.2rem + 2vw,2.45rem);line-height:1.12;
  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 garantias que antecede o pedido
   — objecao 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)}

.post-card{display:flex;flex-direction:column}
/* Capa sangrando ate a borda do cartao: a margem negativa anula o padding do
   .card, e o overflow:hidden que ele ja tem recorta a imagem no canto
   arredondado sozinho. 16/9 com cover para todas terem a mesma altura. */
.post-card .capa{margin:calc(-1 * var(--space-6)) calc(-1 * var(--space-6)) var(--space-5);
  background:var(--surface-page)}
.post-card .capa img{display:block;width:100%;height:auto;aspect-ratio:16/9;object-fit:cover}
.post-card h3{font-weight:800;font-size:1.16rem;letter-spacing:-.02em;
  line-height:1.27;color:var(--text-strong);margin-bottom:9px}
.post-card p{font-size:.92rem;line-height:1.57;color:var(--text-muted);
  flex-grow:1;margin-bottom:var(--space-5)}

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