/* ============================================================
   G&F Advogados — Landing pages individuais dos sócios
   Carregado APENAS nas páginas /socios/*.html (a home não baixa este arquivo).
   Depende dos tokens e componentes de style.css, que deve vir antes.

   Base compartilhada: .lp-*
   Layout único, replicado com fidelidade total nas 3 páginas (Evandro,
   João Paulo, Ana Luisa) — mesma composição, mesmo ritmo, mesma
   posição da imagem principal. O que muda entre elas é só o conteúdo
   (nome, foto, OAB, bio, áreas, dados) — não a estrutura.
   ============================================================ */

/* ---- Base ---- */
.lp-main{padding-top:0}

/* Breadcrumb */
.lp-crumb{padding:var(--space-lg) 0 0}
.lp-crumb ol{display:flex;flex-wrap:wrap;align-items:center;gap:var(--space-xs);font-size:12px;color:var(--gray-400)}
.lp-crumb a{color:var(--gray-500);transition:color .2s}
.lp-crumb a:hover{color:var(--red)}
.lp-crumb li[aria-current]{color:var(--gray-700);font-weight:500}
.lp-crumb .lp-crumb__sep{color:var(--gray-300)}

/* Hero — base comum */
.lp-hero{padding:var(--space-2xl) 0 var(--space-4xl)}
.lp-hero__eyebrow{
  display:block;font-size:11px;font-weight:600;letter-spacing:.15em;
  text-transform:uppercase;color:var(--red);margin-bottom:var(--space-md)
}
.lp-hero__name{
  font-family:var(--font-head);font-weight:700;color:var(--black);
  font-size:clamp(30px,4.4vw,50px);line-height:1.1;letter-spacing:-.02em;
  margin-bottom:var(--space-sm)
}
.lp-hero__oab{
  display:inline-block;font-size:12px;font-weight:600;letter-spacing:.06em;
  color:var(--red);background:rgba(155,27,48,.06);
  padding:6px 14px;border-radius:var(--radius);margin-bottom:var(--space-lg)
}
.lp-hero__lead{font-size:17px;line-height:1.75;color:var(--gray-600);max-width:56ch}
.lp-hero__actions{display:flex;gap:var(--space-sm);flex-wrap:wrap;margin-top:var(--space-xl)}
.lp-hero__inner{
  display:grid;grid-template-columns:minmax(0,1fr) minmax(0,340px);
  gap:var(--space-4xl);align-items:center
}
/* Refino 01/09/2026 - P3: a barra de acento saiu do FLUXO e foi para a
   sarjeta (left negativo), como ja fazem os marcadores da .lp-timeline.
   Antes o padding-left de 32px empurrava o H1 do hero 32px a direita de
   TODOS os H2 da pagina: era o desalinhamento mais visivel do layout.
   A barra continua la - so deixou de deslocar o texto. */
.lp-hero__text{position:relative;padding-left:0}
.lp-hero__text::after{
  content:'';position:absolute;left:calc(-1 * var(--space-md));top:6px;bottom:6px;width:3px;
  background:linear-gradient(180deg,var(--red) 0%,rgba(155,27,48,.15) 100%)
}
.lp-hero__media{max-width:340px;margin-left:auto;width:100%}
@media(max-width:900px){
  .lp-hero__inner{grid-template-columns:1fr;gap:var(--space-2xl)}
  .lp-hero__media{max-width:300px;margin:0 auto;order:-1}
}
@media(max-width:600px){
  /* Refinamento mobile (01/09/2026): no celular o texto do hero passa a
     alinhar na MESMA margem das demais seções (borda do container), e a
     barra de acento vertical — recurso editorial de desktop — sai de
     cena. Antes o hero ficava recuado ~16px a mais que o resto da
     página, o que dava a sensação de "desalinhado". */
  .lp-hero__text{padding-left:0}
  .lp-hero__text::after{display:none}
}

/* Seções */
.lp-section{padding:var(--space-4xl) 0}
.lp-section--tint{background:var(--veil-alt)}
.lp-section__tag{
  display:block;font-size:11px;font-weight:600;letter-spacing:.15em;
  text-transform:uppercase;color:var(--red);margin-bottom:var(--space-md)
}
.lp-section__title{
  font-family:var(--font-head);font-size:clamp(28px,3vw,36px);font-weight:700;
  color:var(--black);line-height:1.2;letter-spacing:-.01em;margin-bottom:var(--space-lg)
}
.lp-prose,.lp-prose p{font-size:16px;line-height:1.75;color:var(--gray-600)}
.lp-prose p{margin-bottom:var(--space-lg)}
.lp-prose p:last-child{margin-bottom:0}
/* Refino 01/09/2026 - P2: dentro de um card, quem define a medida de
   linha e a GRADE + o padding do card, nao um max-width de texto solto.
   No desktop este 66ch nunca chegava a agir (a coluna ja era menor); no
   tablet ele agia e deixava um vazio dentro do card branco. */
.lp-prose--narrow{max-width:66ch}
.lp-textcard .lp-prose--narrow,
.lp-textcard.lp-prose--narrow{max-width:none}

/* Refino 01/09/2026 - P1 (o ajuste central desta rodada).
   A coluna esquerda deixa de ser proporcional (.9fr, ~446px) e vira uma
   SARJETA DE RUBRICA de largura fixa: ela so carrega a tag + o H2. Com
   isso (a) a coluna de conteudo sai de ~450px de linha (~50ch, abaixo do
   legivel) para ~612px (~68ch), e (b) o conteudo passa a comecar SEMPRE
   no mesmo x, em todas as secoes e nos tres perfis - que e a "linha
   visual consistente" que faltava. */
.lp-split{display:grid;grid-template-columns:minmax(0,300px) minmax(0,1fr);gap:var(--space-3xl);align-items:start}
/* Teto de leitura da coluna de conteudo: sem ele a linha chegava a 76
   caracteres em telas largas (o confortavel vai ate ~75). Com 680px o
   card fica com ~604px de texto = ~71ch, dentro da faixa ideal — e o
   teto vale para TODOS os blocos da coluna (card, galeria, facts),
   mantendo a largura unica que e o objetivo desta rodada. */
.lp-split>*:last-child{max-width:680px}
@media(min-width:901px) and (max-width:1023px){
  .lp-split{grid-template-columns:minmax(0,260px) minmax(0,1fr);gap:var(--space-2xl)}
}
@media(max-width:900px){
  .lp-split{grid-template-columns:1fr;gap:var(--space-2xl)}
}

/* Áreas de atuação */
/* Refino 01/09/2026 - P6: quando a sarjeta termina no H2 (sem texto
   abaixo), o margin-bottom dele virava espaco morto - e no empilhado
   somava com o gap do grid (24+48=72px onde se le 48). */
.lp-split>*>.lp-section__title:last-child{margin-bottom:0}

.lp-areas{display:flex;flex-wrap:wrap;gap:var(--space-sm)}
.lp-area-tag{
  font-size:14px;font-weight:500;color:var(--gray-700);
  background:var(--white);border:1px solid var(--gray-200);
  padding:10px 18px;border-radius:var(--radius);transition:border-color .25s ease,transform .25s ease
}
.lp-area-tag:hover{border-color:var(--red);transform:translateY(-2px)}
.lp-section--tint .lp-area-tag{background:var(--white)}

/* Refino 02/09/2026 - Areas em que atua (padronizacao dos 3 socios)
   O paragrafo de introducao saiu da sarjeta estreita (~28ch, ilegivel)
   e passou a viver na coluna de conteudo, acima dos chips, nas TRES
   paginas. Como o <p> e ele proprio .lp-prose, a regra ".lp-prose p"
   nao o alcanca e ele ficaria colado nos chips - dai a classe abaixo.
   Os chips ganharam respiro interno e mais folga entre linhas, que
   com 8 itens (Dr. Evandro) formavam duas fileiras apertadas. */
.lp-areas__intro{margin-bottom:var(--space-lg)}
.lp-areas{gap:14px 12px}
.lp-area-tag{padding:12px 22px;letter-spacing:.01em}

/* Formação — linha do tempo vertical */
.lp-timeline{position:relative;padding-left:var(--space-xl)}
.lp-timeline::before{
  content:'';position:absolute;left:5px;top:6px;bottom:6px;width:1px;background:var(--gray-200)
}
.lp-timeline__item{position:relative;padding-bottom:var(--space-xl)}
.lp-timeline__item:last-child{padding-bottom:0}
.lp-timeline__item::before{
  content:'';position:absolute;left:calc(-1 * var(--space-xl) + 1px);top:6px;
  width:11px;height:11px;border-radius:50%;background:var(--white);border:2px solid var(--red)
}
.lp-timeline__year{
  display:block;font-size:11px;font-weight:600;letter-spacing:.1em;
  text-transform:uppercase;color:var(--red);margin-bottom:4px
}
.lp-timeline__text{font-size:15px;line-height:1.7;color:var(--gray-600)}
.lp-timeline__text strong{color:var(--black);font-weight:600}

/* Card de dado institucional */
/* Refino 01/09/2026 - P4: com a grade nova a faixa util e ~708px; o
   minmax sobe para 210px para caber 3 cards sem esticar, e o caso de
   2 cards (Ana Luisa) deixa de virar dois blocos gigantes e vazios. */
.lp-facts{display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));gap:var(--space-lg)}
.lp-fact{
  background:var(--white);border:1px solid var(--gray-200);border-top:3px solid var(--red);
  border-radius:var(--radius);padding:var(--space-xl);transition:border-color .25s ease,box-shadow .25s ease
}
.lp-fact:hover{border-color:var(--gray-400);box-shadow:0 12px 24px -8px rgba(0,0,0,.05)}
.lp-fact__label{
  display:block;font-size:11px;font-weight:600;letter-spacing:.12em;
  text-transform:uppercase;color:var(--gray-400);margin-bottom:var(--space-xs)
}
.lp-fact__value{font-size:15px;line-height:1.6;color:var(--black);font-weight:500}
.lp-fact__value a{color:inherit;text-decoration:underline;text-underline-offset:2px}
/* Refino 01/09/2026 - P7: endereco da unidade. Substitui o
   style="font-size:13px;color:var(--gray-500);font-weight:400" inline,
   que era um 5o degrau tipografico solto. */
.lp-fact__sub{display:block;font-size:14px;font-weight:400;color:var(--gray-500);margin-top:2px}
.lp-section--dark .lp-fact__sub{color:rgba(255,255,255,.55)}
[data-theme="dark"] .lp-fact__sub{color:var(--gray-400)}

/* Citação editorial */
.lp-quote{
  position:relative;padding:var(--space-2xl);background:var(--white);
  border:1px solid var(--gray-200);border-radius:var(--radius);
  border-left:3px solid var(--red)
}
.lp-quote p{
  font-family:var(--font-head);font-style:italic;font-size:clamp(17px,1.7vw,21px);
  line-height:1.6;color:var(--black)
}
.lp-quote cite{
  display:block;font-family:var(--font-body);font-style:normal;font-size:13px;
  color:var(--gray-500);margin-top:var(--space-md)
}

/* Conteúdo provisório — visualmente identificado como pendente */
.lp-pending{
  border:1px dashed var(--gray-300);border-radius:var(--radius);
  background:var(--gray-50);padding:var(--space-xl);
  display:flex;gap:var(--space-md);align-items:flex-start
}
.lp-pending svg{flex-shrink:0;color:var(--gray-400);margin-top:1px}
.lp-pending__text{font-size:14px;line-height:1.7;color:var(--gray-500)}
.lp-pending__text strong{display:block;color:var(--gray-700);font-weight:600;margin-bottom:2px}

/* Bloco de contato final */
.lp-cta{
  background:var(--gray-50);border:1px solid var(--gray-200);border-radius:var(--radius);
  padding:var(--space-3xl) var(--space-2xl);text-align:center;
  /* P8: o card ocupava os 1072px inteiros com um texto de 440px centrado
     dentro - 630px de vazio simetrico. Mesma regua editorial que o
     .section__header ja usa na home. */
  max-width:var(--container-sm);margin-inline:auto
}
/* Refino 01/09/2026 - P7: o CTA e um CARD, nao uma secao; o titulo
   recua um degrau para nao empatar com o .lp-section__title. */
.lp-cta__title{
  font-family:var(--font-head);font-size:clamp(20px,2vw,24px);font-weight:700;letter-spacing:-.01em;
  color:var(--black);margin-bottom:var(--space-sm)
}
/* Refino 01/09/2026 - P7/P8: o desc deixa de ter teto proprio - quem
   limita a leitura agora e o proprio card. */
.lp-cta__desc{font-size:15px;line-height:1.7;color:var(--gray-500);max-width:none;margin:0 auto var(--space-xl)}
.lp-cta__actions{display:flex;gap:var(--space-sm);justify-content:center;flex-wrap:wrap}

/* Navegação de rodapé entre sócios */
.lp-nav{
  display:flex;justify-content:space-between;align-items:center;gap:var(--space-lg);
  flex-wrap:wrap;padding:var(--space-2xl) 0;border-top:1px solid var(--gray-200)
}
.lp-nav__back{display:inline-flex;align-items:center;gap:8px;font-size:14px;font-weight:500;color:var(--gray-600)}
.lp-nav__back:hover{color:var(--red)}
.lp-nav__back svg{transition:transform .25s ease}
.lp-nav__back:hover svg{transform:translateX(-3px)}
.lp-nav__others{display:flex;gap:var(--space-md);flex-wrap:wrap;align-items:center}
.lp-nav__label{font-size:12px;color:var(--gray-400)}
.lp-nav__link{display:inline-flex;align-items:center;min-height:24px;font-size:13px;font-weight:500;color:var(--red)}
.lp-nav__link:hover{text-decoration:underline}
.lp-crumb a{display:inline-flex;align-items:center;min-height:24px}

/* ---- Ajustes gerais de responsividade ---- */
@media(max-width:767px){
  .lp-hero{padding:var(--space-xl) 0 var(--space-3xl)}
  .lp-section{padding:var(--space-3xl) 0}
  .lp-hero__actions .btn,.lp-cta__actions .btn{width:100%;justify-content:center}
  .lp-hero__actions,.lp-cta__actions{width:100%}
  /* Pilha de botões de WhatsApp por unidade (até 3 + secundário): gap
     mais enxuto pra não esticar demais o hero e o bloco de contato no
     celular. (Refinamento 01/09/2026.) */
  .lp-hero__actions,.lp-cta__actions{gap:var(--space-xs)}
  .lp-cta{padding:var(--space-2xl) var(--space-lg)}
  .lp-quote{padding:var(--space-xl)}
  .lp-fact{padding:var(--space-lg)}
  .lp-nav{flex-direction:column;align-items:flex-start;gap:var(--space-md)}
  /* Mesma régua de .section__title na home (style.css) — o H2 das
     páginas de sócio segue exatamente o mesmo passo em telas
     pequenas, não só a partir do desktop. */
  .lp-section__title{font-size:24px}
  /* Nome do sócio no hero: o clamp base sobe até 50px (peso de
     desktop). No celular isso dominava a tela e quebrava em linhas
     ruins — recua para uma escala coerente com o .lp-section__title.
     (Refinamento 01/09/2026, aplicado às 3 páginas de sócio.) */
  .lp-hero__name{font-size:clamp(26px,7.4vw,34px)}
}
@media(max-width:480px){
  .lp-section__title{font-size:21px}
  .lp-hero__name{font-size:25px}
}

/* ============================================================
   FASE 3 — presença premium (hero, textura, galeria, ritmo)
   Adições sobre o sistema .lp-* existente — nenhum componente da
   Fase 2 foi removido, só reforçado. Compartilhado pelas 3 páginas;
   posição/tom do glow é único, compartilhado pelas 3 (ver .lp-hero__glow).
   ============================================================ */

/* ---- Névoa vermelha no hero — assinatura visual discreta ----
   Um único elemento .lp-hero__glow por página, posição e tamanho
   fixos, compartilhados pelas 3. Nunca chamativo: opacidade baixa,
   blur generoso, nunca sobre o texto. */
.lp-hero{position:relative;overflow:hidden}
.lp-hero__glow{
  position:absolute;z-index:0;pointer-events:none;
  right:-8%;top:-20%;width:52%;height:130%;
  background:radial-gradient(closest-side,rgba(155,27,48,.11) 0%,rgba(155,27,48,0) 72%);
  filter:blur(8px)
}
.lp-hero__inner,.lp-hero>.container:not(.lp-hero__inner){position:relative;z-index:1}

/* ---- Retrato do hero — profundidade e presença ----
   Borda muito fina + sombra em duas camadas (contato + ambiente),
   mesma linguagem "arquitetônica" usada na hero da home. Padronizado
   nos 3 sócios em 19/08/2026 (antes João e Ana tinham receitas de
   sombra próprias, mais fracas) — a mesma sombra pros 3 dá
   consistência de "profundidade"; o que muda entre eles é só o
   enquadramento da própria foto (data-foto-position no HTML de cada
   página), não o tratamento visual ao redor dela. */
.lp-hero__media .photo{
  border-radius:4px;border:1px solid rgba(26,26,26,.08);
  /* Sombra de contato reforçada (3ª rodada, 19/08/2026) — mesma
     receita de Nível B usada nas demais fotos de destaque do site
     (ver style.css), pra manter as 3 páginas de sócio e a Home no
     mesmo padrão visual. */
  box-shadow:0 2px 5px -1px rgba(26,26,26,.28),0 20px 36px -20px rgba(26,26,26,.4)
}
/* ---- Vidro fosco — proteção de texto do Hero (19/08/2026) ----
   Mesma técnica e mesmo token (--frost) já usados em .section__header
   e .sobre__text-inner (ver style.css) — não é uma proteção nova,
   é a MESMA "respiração" de contraste que faltava justamente no
   texto do Hero das 3 páginas de sócio (nome, OAB, texto de
   apresentação), que corria direto sobre a textura crua do .site-bg.
   Desktop E mobile, igual ao restante do sistema de vidro fosco. */
/* max-width igual ao usado em .section__header/--container-sm
   (style.css) — sem isso, o halo abaixo abraça a coluna INTEIRA do
   grid, não o aglomerado real de nome+OAB+lead, virando uma caixa
   translúcida grande em vez de "respiração" ajustada ao texto —
   exatamente o efeito que a técnica original evita em .section__header.
   A coluna do grid (comum às 3 páginas) já é mais estreita que este
   max-width, então na prática ele só entra em ação no breakpoint
   empilhado (mobile), onde a coluna vira 100% do container. */
.lp-hero__text{position:relative;max-width:min(var(--container-sm),100%)}
.lp-hero__text::before{
  content:'';position:absolute;inset:-20px -28px;z-index:-1;pointer-events:none;
  background:var(--frost);
  -webkit-mask-image:radial-gradient(ellipse 130% 140% at center,#000 45%,transparent 100%);
  mask-image:radial-gradient(ellipse 130% 140% at center,#000 45%,transparent 100%);
  backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px)
}
@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){
  .lp-hero__text::before{background:var(--veil)}
}

/* ---- Textura arquitetônica discreta ----
   Um numeral serifado enorme, quase invisível, ancorado no canto de
   .lp-section__tag — eco tipográfico sutil (não é ícone, não é clipart).
   Só entra onde chamado via data-chapter no HTML (número do capítulo). */
.lp-section{position:relative}
.lp-section__head,.lp-section>.container>.reveal:first-child{position:relative}
.lp-chapter-num{
  position:absolute;right:0;top:-.15em;z-index:0;pointer-events:none;
  font-family:var(--font-head);font-weight:700;font-size:clamp(64px,9vw,128px);
  line-height:1;color:var(--black);opacity:.035;user-select:none
}
.lp-section--dark .lp-chapter-num{color:var(--white);opacity:.05}
@media(max-width:767px){.lp-chapter-num{display:none}}

/* ---- Capítulo escuro — dá presença máxima à Formação/Trajetória ----
   Único trecho de fundo escuro da página: quebra a sequência de
   branco/off-white pedida e reforça a timeline, com o mesmo eco de
   vermelho institucional da hero. */
.lp-section--dark{background:var(--black);color:rgba(255,255,255,.86);overflow:hidden}
.lp-section--dark::before{
  content:'';position:absolute;inset:0;pointer-events:none;z-index:0;
  background:radial-gradient(55% 65% at 85% 12%,rgba(155,27,48,.16) 0%,rgba(155,27,48,0) 70%)
}
.lp-section--dark .container{position:relative;z-index:1}
.lp-section--dark .lp-section__tag{color:rgba(255,255,255,.55)}
.lp-section--dark .lp-section__title{color:var(--white)}
.lp-section--dark .lp-prose p{color:rgba(255,255,255,.72)}
.lp-section--dark .lp-timeline::before{background:rgba(255,255,255,.16)}
.lp-section--dark .lp-timeline__item::before{background:var(--black);border-color:var(--red)}
/* Vermelho de marca padrão (#9B1B30) não passa em contraste AA sobre
   preto (~2.15:1) — versão clareada só para este contexto escuro,
   mede ~5.6:1, mantendo a mesma família de cor. */
.lp-section--dark .lp-timeline__year{color:#F0637C}
.lp-section--dark .lp-timeline__text{color:rgba(255,255,255,.74)}
.lp-section--dark .lp-timeline__text strong{color:var(--white)}
.lp-section--dark .lp-fact{background:rgba(255,255,255,.04);border-color:rgba(255,255,255,.14);border-top-color:var(--red)}
.lp-section--dark .lp-fact:hover{border-color:rgba(255,255,255,.32);box-shadow:0 16px 30px -12px rgba(0,0,0,.5)}
.lp-section--dark .lp-fact__label{color:rgba(255,255,255,.6)}
.lp-section--dark .lp-fact__value{color:var(--white)}
.lp-section--dark .lp-fact__value span{color:rgba(255,255,255,.55)!important}

/* ---- Timeline — mais presença (marcadores maiores, texto mais firme) ---- */
.lp-timeline__item::before{width:13px;height:13px}
.lp-timeline__year{font-size:11.5px}
/* Refino 01/09/2026 - P7: 15.5px era um degrau que nao existia em
   nenhum outro ponto do site; convivia com 16/15/14 e o olho lia como
   descuido, nao como hierarquia. */
.lp-timeline__text{font-size:15px;line-height:1.7}

/* ---- Áreas de atuação — hover premium, sem depender de toque ----
   Pill tags (.lp-area-tag): vermelho "entra" da esquerda no hover.
   Mantém o estado base 100% legível sem hover — mobile não perde nada. */
.lp-area-tag{position:relative;overflow:hidden;z-index:0;transition:border-color .22s ease,color .22s ease,transform .22s ease}
.lp-area-tag::before{
  content:'';position:absolute;inset:0;z-index:-1;background:var(--red);
  transform:scaleX(0);transform-origin:left;transition:transform .3s cubic-bezier(.4,0,.2,1)
}
.lp-area-tag:hover{border-color:var(--red);color:var(--white);transform:translateY(-2px)}
.lp-area-tag:hover::before{transform:scaleX(1)}
.lp-area-tag:active{transform:translateY(0) scale(.97)}

/* ============================================================
   Galeria — "além do escritório" (fotos adicionais em carrossel)
   Crossfade GSAP entre 2-3 fotos (ver IIFE "Sócios: galeria" em
   script.js), pausa no hover/foco, pontos discretos (sem seta).
   Sob prefers-reduced-motion vira uma pequena grade estática — o
   CSS decide sozinho, sem precisar de JS condicional para o layout.
   ============================================================ */
.lp-gallery-section{padding-top:var(--space-2xl)}
/* Refino 01/09/2026 - P4: a galeria travava em 620px dentro de um
   container de 1072px, deixando ~450px de vazio a direita e parecendo
   "de outra pagina". Agora acompanha a coluna de conteudo. */
.lp-gallery{max-width:none}
.lp-gallery__stage{
  position:relative;aspect-ratio:4/3;width:100%;
  border-radius:4px;overflow:hidden;background:var(--gray-100);
  box-shadow:0 3px 10px -4px rgba(26,26,26,.2),0 30px 60px -28px rgba(26,26,26,.4)
}
.lp-gallery__slide{position:absolute;inset:0;margin:0;opacity:0}
.lp-gallery__slide:first-child{opacity:1}
.lp-gallery__slide img{width:100%;height:100%;object-fit:cover;display:block}
.lp-gallery__caption{
  position:absolute;left:0;right:0;bottom:0;z-index:2;
  margin:0;padding:var(--space-lg) var(--space-lg) var(--space-md);
  background:linear-gradient(to top,rgba(13,12,11,.8) 0%,rgba(13,12,11,0) 100%);
  color:var(--white);font-size:13px;font-weight:500
}
.lp-gallery__dots{display:flex;gap:4px;margin-top:var(--space-md)}
/* Alvo de toque real 32×24px (WCAG), mesmo a barra visual sendo fina —
   o botão inteiro é clicável, só o ::before pinta a marcação. */
.lp-gallery__dot{
  width:32px;height:24px;padding:0;border:none;background:transparent;
  cursor:pointer;display:flex;align-items:center;justify-content:center
}
.lp-gallery__dot::before{
  content:'';display:block;width:22px;height:3px;border-radius:2px;
  background:var(--gray-200);transition:background-color .3s ease
}
.lp-gallery__dot[aria-current="true"]::before{background:var(--red)}
.lp-gallery__dot:hover::before{background:var(--gray-400)}
.lp-gallery__dot[aria-current="true"]:hover::before{background:var(--red-dark)}

.lp-gallery__grid{display:none;grid-template-columns:repeat(3,1fr);gap:var(--space-sm)}
.lp-gallery__grid img{width:100%;aspect-ratio:3/4;object-fit:cover;border-radius:4px;display:block}
.lp-gallery__grid figcaption{margin-top:6px;font-size:11.5px;color:var(--gray-500)}

@media(max-width:600px){
  .lp-gallery__caption{font-size:12px;padding:var(--space-md)}
}
@media(prefers-reduced-motion:reduce){
  .lp-gallery__stage,.lp-gallery__dots{display:none}
  .lp-gallery__grid{display:grid}
}

/* ---- Movimento reduzido ----
   Só os componentes que existem NESTE arquivo. As regras de
   .unit-member e .team-card__link vivem em style.css, junto dos
   próprios componentes — a home não carrega socios.css, então se
   ficassem aqui não teriam efeito nenhum lá. */
@media(prefers-reduced-motion:reduce){
  .lp-area-tag:hover,.lp-fact:hover{transform:none}
  .lp-area-tag::before{transition:none}
  .lp-nav__back:hover svg{transform:none}
}

/* ---- Corte assimétrico — mesma assinatura visual da home ----
   Ajuste de padronização: .lp-fact/.lp-cta/.lp-quote SAÍRAM daqui
   (18/08/2026) — na home, os cards de conteúdo equivalentes
   (.area-card, .diff-card, .contato-form) nunca usam o corte, só
   `var(--radius)` uniforme. O corte fica reservado para fotos e
   botões de destaque, mesmo critério dos dois em ambos os lugares. */
.lp-hero__media .photo{border-radius:0 var(--cut-img) var(--cut-img) var(--cut-img)!important}
.lp-gallery__stage{border-radius:0 var(--cut-img) var(--cut-img) var(--cut-img)}
.lp-hero__actions .btn,.lp-cta__actions .btn{border-radius:0 var(--radius) var(--radius) var(--radius)}

/* ============================================================
   TEMA ESCURO — light touch (mesma lógica do style.css: reusa a
   escala de cinza invertida, não flipa --white/--black globalmente)
   Re-baseado no cinza institucional em 19/08/2026 — mesmo degrau de
   ajuste do style.css (ver comentário completo lá): preto→gray-800,
   gray-800→gray-700, gray-700→gray-600. --red/--red-dark também
   ganham o tom mais claro do modo escuro herdado do :root global.
   ============================================================ */
[data-theme="dark"] body{background:var(--gray-800)}
[data-theme="dark"] .lp-hero__name,
[data-theme="dark"] .lp-section__title,
[data-theme="dark"] .lp-fact__value,
[data-theme="dark"] .lp-quote p,
[data-theme="dark"] .lp-cta__title,
[data-theme="dark"] .lp-timeline__text strong{color:var(--gray-50)}
[data-theme="dark"] .lp-hero__lead,
[data-theme="dark"] .lp-prose,
[data-theme="dark"] .lp-prose p,
[data-theme="dark"] .lp-timeline__text,
[data-theme="dark"] .lp-nav__back,
[data-theme="dark"] .lp-crumb a,
[data-theme="dark"] .lp-gallery__grid figcaption{color:var(--gray-400)}
/* Texto dentro dos cards (.lp-quote/.lp-pending/.lp-cta, agora
   gray-700) precisa de um tom mais claro que o texto solto sobre a
   página — mesmo ajuste de contraste feito no style.css. */
[data-theme="dark"] .lp-quote cite,
[data-theme="dark"] .lp-pending__text,
[data-theme="dark"] .lp-cta__desc{color:var(--gray-300)}
[data-theme="dark"] .lp-fact,
[data-theme="dark"] .lp-quote,
[data-theme="dark"] .lp-cta,
[data-theme="dark"] .lp-pending{background:var(--gray-700);border-color:var(--gray-600)}
/* .lp-area-tag isolado do grupo acima (21/08/2026): faltava "color"
   nessa regra — o texto continuava herdando var(--gray-700) do estado
   claro (a MESMA cor do novo fundo escuro), ficando ilegível no
   estado normal sem hover. gray-50 é o mesmo tom já usado pra texto
   principal sobre superfícies gray-700 nesta página (.lp-fact__value
   etc.). border-color e color ficam presos ao ":not(:hover)" pelo
   mesmo motivo: ".lp-area-tag:hover{border-color:var(--red);
   color:var(--white)}" tem a MESMA especificidade e perderia por vir
   antes no arquivo — sem o ":not(:hover)", passar o mouse no escuro
   manteria a borda cinza e trocaria o branco do hover por gray-50,
   quebrando o efeito já aprovado. background não precisa do mesmo
   isolamento: o hover não define background no elemento (o preenchimento
   vermelho é o ::before, numa camada própria). */
[data-theme="dark"] .lp-area-tag{background:var(--gray-700)}
[data-theme="dark"] .lp-area-tag:not(:hover){border-color:var(--gray-600);color:var(--gray-50)}
[data-theme="dark"] .lp-section--tint .lp-area-tag{background:var(--gray-700)}
[data-theme="dark"] .lp-timeline::before{background:var(--gray-600)}
[data-theme="dark"] .lp-timeline__item::before{background:var(--gray-800);border-color:var(--red)}
[data-theme="dark"] .lp-crumb li[aria-current]{color:var(--gray-200)}
/* .lp-crumb__sep herdava var(--gray-300) do claro sem ajuste — no
   claro isso é o tom mais CLARO dos três (recua contra o fundo branco);
   sem inverter no escuro, o separador virava o mais CLARO dos três
   sobre fundo escuro (mais claro até que o link ".lp-crumb a", em
   gray-400), invertendo a hierarquia: o "/" decorativo chamava mais
   atenção que os links de verdade. gray-600 recua do mesmo jeito
   contra o fundo escuro que gray-300 recuava contra o branco. */
[data-theme="dark"] .lp-crumb .lp-crumb__sep{color:var(--gray-600)}
[data-theme="dark"] .lp-nav{border-top-color:var(--gray-600)}
[data-theme="dark"] .lp-gallery__stage{background:var(--gray-700)}

/* ============================================================
   REFINAMENTO VISUAL — DESKTOP (19/08/2026)
   Mesma rodada de padronização do style.css (ver comentário lá).
   Objetivo: as 3 páginas de sócio (Evandro/João/Ana) e o blog
   passarem a usar exatamente a mesma régua de espaçamento, o mesmo
   tratamento de textura e a mesma "resposta" de card ao hover que já
   existe nos blocos mais resolvidos da home — sem mexer em texto,
   composição por sócio (foto, layout do hero) ou estrutura.
   Travado em min-width:1024px: nada aqui muda o mobile aprovado.
   ============================================================ */
@media(min-width:1024px){
  /* Ritmo vertical: .lp-section usava 80px, a home usa 96px
     (.section/.sobre) para o mesmo papel de "seção de conteúdo" —
     as páginas de sócio pareciam um pouco mais apertadas ao navegar
     vindo da home. */
  .lp-section{padding:var(--space-5xl) 0}

  /* .lp-section (base) mostrava a textura de fundo crua, enquanto
     .lp-section--tint já usava véu — a intensidade da textura mudava
     de seção pra seção sem critério. Passa a seguir o MESMO padrão
     alternado que a home já usa (.section--white/.section--gray):
     base = véu claro, --tint = véu levemente mais escuro, criando um
     ritmo de duas tonalidades em vez de "crua ou véu" ao acaso.
     :not(.lp-section--dark) exclui a seção "Formação acadêmica" da
     Ana, que é um bloco escuro proposital (mesmo em tema claro) —
     sem essa exclusão, esta regra (mais recente na cascata) venceria
     o fundo preto por engano. */
  .lp-section:not(.lp-section--dark){background:var(--veil)}
  .lp-section--tint{background:var(--veil-alt)}

  /* Espaço abaixo do bloco "tag + título" de cada seção estava solto
     em inline style, com 3 valores diferentes por página (24/32/48px)
     sem critério. Unificado em --space-xl (32px, o valor já
     predominante nas 3 páginas) via classe própria, sobrepondo o
     inline style só no desktop (mobile mantém o valor original de
     cada bloco, intocado). */
  /* (movido para fora deste media query no refino de 01/09/2026 -
     ver a regua de espacamento no fim do arquivo) */

  /* .lp-fact era o único card da "família de referência" (mesma
     borda/radius/sombra de .area-card etc.) sem a elevação de hover
     (translateY(-3px)) — o suporte a prefers-reduced-motion já
     previa isso (".lp-area-tag:hover,.lp-fact:hover{transform:none}"
     mais abaixo neste arquivo), só faltava o efeito em si. Sombra e
     duração também alinhadas à mesma receita (.06/.3s, não .05/.25s). */
  .lp-fact{transition:border-color .3s ease,box-shadow .3s ease,transform .3s ease}
  .lp-fact:hover{box-shadow:0 12px 24px -8px rgba(0,0,0,.06);transform:translateY(-3px)}

  /* Blog: o Hero (.lp-hero, régua assimétrica 48px/80px) entregava
     pro primeiro .section (régua simétrica de 96px) uma transição de
     espaçamento abrupta — só nesta página o Hero antecede seções
     genéricas .section, não conteúdo em .lp-section como nas páginas
     de sócio. Fecha a régua do Hero em 96px embaixo, igualando ao
     topo do primeiro .section que vem a seguir. */
  .lp-hero--blog{padding-bottom:var(--space-5xl)}

  /* Título de seção mais "editorial" — mesmo ajuste do style.css
     (eyebrow mais colado no título, mais respiro antes do texto). */
  .lp-section__tag{margin-bottom:var(--space-xs)}

  /* .lp-section__title é o mesmo papel de "título de seção" que
     .section__title na home (mesmo clamp de origem, clamp(28px,3vw,
     36px)) — mas ficou de fora da "RECALIBRAÇÃO DE ESCALA — DESKTOP"
     de style.css, que reduziu .section__title para clamp(25px,2.6vw,
     32px) nesta mesma largura de tela (interface "grande, pesada
     demais" a 100% de zoom). Resultado: os 5 títulos de cada página
     de sócio renderizavam maiores/mais pesados que os títulos
     equivalentes da home no mesmo breakpoint. Aplicando o valor
     idêntico aqui, não um novo. */
  .lp-section__title{font-size:clamp(25px,2.6vw,32px)}
}

/* Acento vermelho no hover (19/08/2026), pra fechar a mesma
   "linguagem de hover" do .lp-area-tag de referência (sobe, ganha
   profundidade E vira vermelho institucional) — aqui só na borda,
   não um preenchimento cheio como no tag: .lp-fact carrega texto de
   verdade (rótulo + valor), um fundo vermelho sólido apagaria a
   legibilidade em vez de reforçá-la. Fora do media query de
   propósito: .lp-area-tag:hover também vale em qualquer largura, e
   .lp-fact já tinha transition de border-color no base (não-3D)
   desde sempre, então a transição continua suave em qualquer tela —
   só o tilt 3D abaixo é que fica reservado ao desktop. */
.lp-fact:hover{border-color:var(--red)}
/* Achado da auditoria desta rodada (3ª): a sombra de hover ANTIGA
   (".lp-fact:hover{...box-shadow:0 12px 24px -8px rgba(0,0,0,.05)}",
   linha ~101) só era substituída dentro de min-width:1024px — abaixo
   disso (tablet com mouse/trackpad) o halo fraco de antes ainda
   aparecia. Cobrindo aqui sem media query, sem tocar border-color (o
   acento vermelho no hover, linha acima, é um comportamento já
   aprovado e intencional, fora do escopo desta correção de
   profundidade). */
.lp-fact:hover{box-shadow:0 2px 5px -1px rgba(20,19,18,.20),0 18px 32px -10px rgba(20,19,18,.26),0 38px 64px -28px rgba(20,19,18,.20)}

/* ---- Profundidade 3D — intensidade média (19/08/2026, 2ª rodada) ----
   Mesma receita/mesmos valores do bloco "PROFUNDIDADE 3D —
   INTENSIDADE MÉDIA" em style.css (ver comentário completo lá) —
   só .lp-fact tem papel de "card" nesta página (.lp-area-tag/
   .lp-quote/.lp-cta/.lp-pending são blocos de conteúdo, não cartões
   navegáveis: inclinar um bloco de citação ou texto pendente não
   teria a mesma leitura de "card premium" e soaria estranho — mas
   ganham sombra de painel em repouso logo abaixo, Nível C). Sombra
   de repouso agora existe em qualquer largura de tela (mobile não
   depende de hover pra mostrar profundidade); o tilt continua só
   no hover desktop. */
/* 3ª rodada (19/08/2026) — mesma recalibração por evidência
   fotográfica do style.css (ver comentário completo lá): sombra de
   contato mais definida (blur menor, alfa mais alto) em vez de halo
   difuso, que se dissolvia contra o --veil da página. */
.lp-fact{
  border-left-color:rgba(20,19,18,.14);border-right-color:rgba(20,19,18,.14);border-bottom-color:rgba(20,19,18,.14);
  box-shadow:0 1px 3px rgba(20,19,18,.16),0 8px 16px -6px rgba(20,19,18,.22),0 20px 34px -22px rgba(20,19,18,.14)
}
@media(min-width:1024px){
  /* !important só no transform (mesmo achado do style.css): .lp-facts
     é ".lp-facts stagger reveal" no HTML — ".js .stagger.visible>*"
     (3 classes de especificidade) supera este seletor de 1 classe +
     :hover (2), então sem !important a animação de entrada por
     scroll cancelava o tilt pra sempre depois de revelado. */
  .lp-fact{
    transform:perspective(900px) rotateX(0deg) rotateY(0deg) translateY(0) translateZ(0)!important;
    transition:transform .35s cubic-bezier(.22,.61,.36,1),border-color .3s ease,box-shadow .35s ease;
    box-shadow:0 1px 3px rgba(20,19,18,.16),0 10px 20px -8px rgba(20,19,18,.22),0 26px 44px -26px rgba(20,19,18,.15)
  }
  .lp-fact:hover{
    transform:perspective(900px) rotateX(2.5deg) rotateY(-2.5deg) translateY(-6px) translateZ(0)!important;
    box-shadow:0 2px 5px -1px rgba(20,19,18,.20),0 18px 32px -10px rgba(20,19,18,.26),0 38px 64px -28px rgba(20,19,18,.20)
  }
}
[data-theme="dark"] .lp-fact{
  border-left-color:var(--gray-500);border-right-color:var(--gray-500);border-bottom-color:var(--gray-500);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.12),0 1px 2px rgba(0,0,0,.3),0 14px 26px -16px rgba(0,0,0,.55)
}
@media(min-width:1024px){
  [data-theme="dark"] .lp-fact:hover{
    border-left-color:var(--gray-400);border-right-color:var(--gray-400);border-bottom-color:var(--gray-400);
    box-shadow:inset 0 1px 0 rgba(255,255,255,.14),0 2px 3px rgba(0,0,0,.35),0 26px 46px -20px rgba(0,0,0,.6)
  }
}
/* Mesmo cuidado do style.css: a elevação nova do .lp-fact precisa
   continuar desligada sob prefers-reduced-motion — !important pelo
   mesmo motivo acima (precisa vencer um transform:...!important). */
@media(min-width:1024px) and (prefers-reduced-motion:reduce){
  .lp-fact{transform:none!important}
  .lp-fact:hover{transform:none!important}
}

/* ---- Nível C — painéis de conteúdo (repouso apenas, sem tilt, sem
   hover extra: não são clicáveis). Mesma receita do style.css. ---- */
:is(.lp-quote,.lp-cta,.lp-pending){
  box-shadow:0 1px 3px rgba(20,19,18,.10),0 10px 20px -12px rgba(20,19,18,.16)
}
[data-theme="dark"] :is(.lp-quote,.lp-cta,.lp-pending){
  box-shadow:inset 0 1px 0 rgba(255,255,255,.08),0 10px 20px -12px rgba(0,0,0,.5)
}

/* ---- Nível B — retrato do hero e galeria: sombra de contato mais
   definida (3ª rodada), mesma receita do style.css. ---- */
.lp-gallery__stage{box-shadow:0 2px 5px -1px rgba(26,26,26,.28),0 20px 36px -20px rgba(26,26,26,.4)}

/* ============================================================
   Bloco de texto em card branco — .lp-textcard (ajuste 01/09/2026)
   Pedido: destacar os textos das páginas de sócio sobre a textura
   do fundo (.site-bg), principalmente no mobile, SEM esconder o
   fundo — ele segue aparecendo ao redor do card. Reaproveita a
   receita de card já usada em .lp-quote / .lp-cta: fundo branco,
   borda fina, raio --radius, sombra leve "Nível C". Opt-in: só onde
   .lp-textcard é adicionada no HTML das 3 páginas (Evandro / João
   Paulo / Ana Luisa) — nenhum componente existente foi alterado.
   ============================================================ */
.lp-textcard{
  background:var(--white);
  border:1px solid var(--gray-200);
  border-radius:var(--radius);
  padding:var(--space-2xl);
  box-shadow:0 1px 3px rgba(20,19,18,.10),0 10px 20px -12px rgba(20,19,18,.16)
}
.lp-textcard>:last-child{margin-bottom:0}
p.lp-textcard{margin:0}

/* Refino 01/09/2026 - P5: os paineis de conteudo tinham tres paddings
   diferentes (48 / 32 / 40-48) e apareciam empilhados na mesma coluna,
   o que os fazia parecer "desconectados". A CAIXA passa a ser uma so;
   o que distingue cada um continua sendo o acento (barra vermelha a
   esquerda = citacao, no topo = dado) e o tracejado do pendente. */
:is(.lp-textcard,.lp-quote,.lp-pending){padding:var(--space-2xl);border-radius:var(--radius)}
.lp-pending{gap:var(--space-md);align-items:flex-start}
/* Um unico respiro entre blocos irmaos dentro da mesma coluna. */
.lp-split>*>*+*{margin-top:var(--space-lg)}
/* Mobile: margem interna mais enxuta pra não apertar a linha de
   texto dentro do container de 20px. Mesma régua de .lp-quote/.lp-fact. */
@media(max-width:767px){.lp-textcard{padding:var(--space-xl)}}
@media(max-width:480px){.lp-textcard{padding:var(--space-lg)}}
/* Tema escuro — mesma superfície/again dos outros cards de conteúdo
   (.lp-quote/.lp-cta/.lp-pending): gray-700 com texto gray-300. */
[data-theme="dark"] .lp-textcard{
  background:var(--gray-700);border-color:var(--gray-600);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.08),0 10px 20px -12px rgba(0,0,0,.5)
}
[data-theme="dark"] .lp-textcard,
[data-theme="dark"] .lp-textcard p{color:var(--gray-300)}

/* Quando vários .lp-textcard aparecem empilhados (uma parte por card),
   um respiro maior entre eles do que o gap padrão do .lp-split. */
.lp-textcard + .lp-textcard{margin-top:var(--space-lg)}


/* ============================================================
   REFINO DE LAYOUT DOS PERFIS — 01/09/2026
   Fecha a regua unica desta rodada. Ver tambem P1 (.lp-split),
   P3 (hero), P5 (caixa dos paineis) e P7 (tipografia) acima.

   REGUA (tres valores, nenhum inline no HTML):
     secao <-> secao ....... --space-5xl (desktop) / --space-3xl (<=767)
     cabecalho -> conteudo . --space-xl  (todos os breakpoints)
     bloco <-> bloco irmao . --space-lg
   ============================================================ */

/* O respiro do cabecalho de secao valia so a partir de 1024px; entre
   768 e 1023 sobravam os inline styles (24px na galeria, 48px em "Onde
   atende") na MESMA pagina. Agora vale em todo lugar. */
.lp-section__head{margin-bottom:var(--space-xl)!important}
@media(max-width:767px){
  .lp-section__head{margin-bottom:var(--space-lg)!important}
}

/* ---- MOBILE ---- */
@media(max-width:767px){
  /* D1 - os <br> dos titulos foram desenhados para coluna larga de
     desktop; a 320-480px forcam linhas curtissimas e um bloco de titulo
     ralo. Aqui eles sao desligados e o titulo quebra sozinho.
     DEPENDE de haver um espaco real antes do <br> no HTML
     ("Formacao <br>academica") - sem ele as palavras colam quando o
     <br> some. Os 7 titulos das 3 paginas ja estao assim. */
  .lp-hero__name br,.lp-section__title br{display:none}

  /* D4 - no empilhado o gap nao precisa ser o de desktop. */
  .lp-split{gap:var(--space-xl)}

  /* D5 - na pilha de ate 4 botoes, um respiro separa "canais de
     atendimento" da acao alternativa. */
  .lp-hero__actions .btn--secondary,
  .lp-cta__actions .btn--secondary{margin-top:var(--space-sm)}
}

@media(max-width:600px){
  /* D3 - o halo de vidro fosco avancava 28px para cada lado, mas o
     container so tem 20px de padding no mobile: ele encostava e
     ultrapassava a borda da tela, virando uma faixa cortada. */
  .lp-hero__text::before{inset:-16px -20px}

  /* D6 - as fontes da galeria sao verticais (720x1280, 900x1200); com
     4/3 na largura total do celular o retrato era cortado com agressao. */
  .lp-gallery__stage{aspect-ratio:4/5}
}

@media(max-width:480px){
  /* D2 - o nome do socio (elemento mais importante da pagina) ficava a
     apenas 4px do H2 de secao: a hierarquia colapsava. */
  .lp-hero__name{font-size:28px;line-height:1.15}
}