/* ==========================================================================
   INTERNAL PAGES — shared layout for every page except the Home (which
   keeps its own bespoke sections in home.css). Built strictly from
   design-system/{tokens,base,components}.css.
   ========================================================================== */

/* ---- Page hero: shorter than the Home hero, no forced two-column split ---- */
.page-hero{ padding-block: var(--space-9) var(--space-8); }
.page-hero .eyebrow{ display:block; margin-bottom: var(--space-4); }
.page-hero h1{ max-width: 16ch; }
.page-hero .intro{ margin-top: var(--space-5); max-width: 56ch; color: var(--color-muted); font-size: var(--text-small); }
.page-hero-grid{
  display:grid; grid-template-columns: minmax(0,1.2fr) minmax(0,1fr); gap: var(--space-8); align-items:center;
  position: relative;
  /* MD20: validado nos 3 casos-piloto (Home M1/M2, Empresas) — um brilho
     morno pintado atrás da foto (não a foto em si) para que ela nasça de
     uma área que já está esquentando, em vez de um preto plano. Foto fica
     à direita por padrão, então o brilho fica à direita; `.flip` inverte
     ambos. */
  background: radial-gradient(ellipse 42% 66% at 78% 48%, rgba(74,58,44,0.32), transparent 72%);
}
@media (max-width: 860px){ .page-hero-grid{ grid-template-columns: 1fr; background: radial-gradient(ellipse 70% 46% at 50% 30%, rgba(74,58,44,0.3), transparent 74%); } }
.page-hero-grid .photo-slot{ width: 100%; min-height: 320px; }
/* MD19 §11: Empresas/Formação/Lapide-se/Sobre share the identical
   eyebrow+H1+intro+photo-right template — visually interchangeable.
   Modifier flips the photo to visual-left while keeping text first in DOM
   order (heading still reached first by assistive tech). */
.page-hero-grid.flip{
  grid-template-columns: minmax(0,1fr) minmax(0,1.2fr);
  background: radial-gradient(ellipse 42% 66% at 22% 48%, rgba(74,58,44,0.32), transparent 72%);
}
.page-hero-grid.flip > :last-child{ order: -1; }
/* MD20: mesma lógica de vinheta tonal do Home — a máscara (mask-tight/
   mask-open) dissolve a FORMA, o multiply escurece a LUMINÂNCIA da própria
   foto antes do corte, para que fundos claros de estúdio não sobrevivam
   como um retângulo. Generalizado para todo .page-hero-grid depois de
   validado no piloto (Empresas). */
.page-hero-grid .portrait{ position: relative; }
.page-hero-grid .portrait::before{
  content: "";
  position: absolute; inset: 0; z-index: 1;
  background: radial-gradient(ellipse 86% 88% at 50% 34%, transparent 28%, rgba(23,19,15,0.5) 70%, rgba(23,19,15,0.95) 100%);
  mix-blend-mode: multiply;
  pointer-events: none;
}
/* keep the data-caption label (shared .portrait::after, pages.css) legible
   above the new vignette instead of being multiplied along with it */
.page-hero-grid .portrait::after{ z-index: 2; }
/* empresas-visual-audit.md §3: a referência (site.pdf pág. 10) sangra esta
   foto sem nenhuma dissolução — nem máscara alfa, nem escurecimento de
   luminância nas bordas. Mantido: a própria foto segue nítida, sem máscara.
   PROTÓTIPO ATMOSFERA (ref. site(1).pdf, 2ª rodada): a 1ª tentativa (dissolve
   sólido só nos últimos 8%) tirou a aresta, mas ainda lia como "foto com
   moldura", não como "parte do fundo" — porque a cor da própria foto
   (neutra) nunca conversava com o marrom do fundo. Na referência da
   Fernanda, as fotos recebem uma correção de cor quente (sépia) que já
   aproxima os tons da foto da paleta marrom/preta da página antes de
   qualquer transição — por isso a borda quase não precisa de efeito. Um
   filtro sutil faz esse trabalho aqui; o escurecimento nas bordas volta a
   ser gradual por luminância (multiply, raio grande, sem anel), não uma
   transparência que "apaga" a foto. */
.empresas-hero-portrait .portrait-img{
  /* 1ª tentativa (raio 88%/88%) media a distância a partir do centro (36%)
     até cada borda — o topo fica a só 36 unidades do centro, bem menor que
     o raio, então nunca alcançava sequer o início do fade (68%). Raio
     recalibrado (60%/42%) para que TODAS as quatro bordas (não só
     laterais) cheguem à zona de transição, com transparência total aos 90%
     do raio — nunca exatamente no limite da caixa. */
  -webkit-mask-image: radial-gradient(ellipse 60% 42% at 50% 36%, #000 68%, transparent 90%);
          mask-image: radial-gradient(ellipse 60% 42% at 50% 36%, #000 68%, transparent 90%);
  filter: sepia(0.28) saturate(1.15) brightness(0.97) contrast(1.04);
}
.page-hero-grid .empresas-hero-portrait::before{
  background: radial-gradient(ellipse 66% 48% at 50% 36%, transparent 25%, rgba(23,19,15,0.4) 55%, rgba(23,19,15,0.78) 80%, rgba(23,19,15,0.94) 100%);
  mix-blend-mode: multiply;
}
/* o brilho ambiente padrão de .page-hero-grid.flip (pico 0.32) é pensado
   para qualquer foto da família; aqui, reforçado para preencher com tom
   quente a margem que a máscara acima garante transparente, completando a
   atmosfera em vez de deixar preto plano aparecer. Só a partir de 861px: o
   brilho mobile (abaixo de 860px, layout empilhado) já tem posição própria
   e não deve ser sobrescrito por este, pensado para a foto à esquerda. */
@media (min-width: 861px){
  .empresas-hero-grid.flip{
    background: radial-gradient(ellipse 58% 80% at 22% 50%, rgba(94,74,56,0.5), transparent 76%);
  }
}

/* formacao-visual-audit.md §3: exceção deliberada — a referência (site.pdf
   pág. 11) usa moldura fina dourada + etiqueta nesta foto específica, não o
   tratamento sem-máscara de Empresas nem o fade das demais páginas. Foto
   nítida (mask-image:none); o ::before genérico de vinheta é reaproveitado
   (não removido) para desenhar o filete, em vez de escurecer a foto. */
.formacao-hero-portrait .portrait-img{ mask-image: none; -webkit-mask-image: none; }
.page-hero-grid .formacao-hero-portrait::before{
  background: none;
  mix-blend-mode: normal;
  inset: 14px;
  border: 1px solid var(--color-accent);
}

/* lapide-se-visual-audit.md §2: a referência (site.pdf pág. 21) usa a mesma
   família de moldura fina dourada + etiqueta já confirmada em Formação —
   nítida, sem dissolução. */
.lapide-se-hero-portrait .portrait-img{ mask-image: none; -webkit-mask-image: none; }
.page-hero-grid .lapide-se-hero-portrait::before{
  background: none;
  mix-blend-mode: normal;
  inset: 14px;
  border: 1px solid var(--color-accent);
}

/* lapide-se-visual-audit.md §4: página alterna dossie→autoridade→dossie→
   autoridade em três pontos sem ponte — mesmo princípio de atmosfera/fundo
   já validado em Formação/Resultados. #etapas e #prova são ids reaproveitados
   (VisageVision também tem #etapas; Consultoria também tem #prova), por isso
   escopados pelas classes próprias de Lapide-se; #filosofia é exclusivo
   desta página. */
#filosofia{ position: relative; }
#filosofia::before{
  content: "";
  position: absolute; top: 0; left: 0; right: 0; height: var(--space-7);
  background: linear-gradient(to bottom, #17130F, var(--color-bg));
  pointer-events: none;
}
.lapide-se-etapas{ position: relative; }
.lapide-se-etapas::before{
  content: "";
  position: absolute; top: 0; left: 0; right: 0; height: var(--space-7);
  background: linear-gradient(to bottom, #0E0C0A, var(--color-bg));
  pointer-events: none;
}
/* .section-tight tem padding-top (32px) menor que a ponte (48px) — sem
   isso o ::before absoluto pinta por cima do eyebrow "Prova". */
.lapide-se-prova{ position: relative; padding-top: var(--space-7); }
.lapide-se-prova::before{
  content: "";
  position: absolute; top: 0; left: 0; right: 0; height: var(--space-7);
  background: linear-gradient(to bottom, #17130F, var(--color-bg));
  pointer-events: none;
}

/* MD-ritmo (composição final): calibração de espaçamento/eixo/pontes
   tonais — mesma disciplina já aprovada em Consultoria/Sobre/Empresas.
   Hero, Diferencial (texto/tipografia/alinhamento) e mobile permanecem
   intocados; .page-hero, .section, .statement e .close-quiet são
   compartilhados com outras páginas, por isso cada ajuste é escopado por
   id/classe própria de Formação, só a partir de 641px (mobile preserva o
   espaçamento original, conforme pedido). */
@media (min-width: 641px){
  .formacao-hero{ padding-bottom: var(--space-5); }
  /* #para-quem é id reaproveitado por Lapide-se — escopado via
     .formacao-para-quem (achado na auditoria técnica final; antes vazava
     para lapide-se.html, mudando seu padding-top de 32px para 24px). */
  .formacao-para-quem{ padding-top: var(--space-5); }
  .formacao-copy{ font-size: 1.125rem; line-height: 1.65; }
}

/* Três pontes tonais (a página alterna dossie→autoridade→dossie→autoridade),
   alternando a direção do gradiente conforme o sentido da transição —
   mesmo princípio da Home/Consultoria/Sobre, nunca uma linha ou borda. */
#diferencial{ position: relative; padding-top: var(--space-7); padding-bottom: var(--space-6); }
#diferencial::before{
  content: "";
  position: absolute; top: 0; left: 0; right: 0; height: var(--space-7);
  background: linear-gradient(to bottom, #17130F, var(--color-bg));
  pointer-events: none;
}
#formato{ position: relative; padding-top: var(--space-7); padding-bottom: var(--space-6); }
#formato::before{
  content: "";
  position: absolute; top: 0; left: 0; right: 0; height: var(--space-7);
  background: linear-gradient(to bottom, #0E0C0A, var(--color-bg));
  pointer-events: none;
}
/* #cta.formacao-cta (id + classe) em vez de .formacao-cta sozinho: precisa
   bater a especificidade de .close-quiet, que é definido mais abaixo neste
   mesmo arquivo e, com a mesma especificidade de uma classe só, venceria
   pela ordem do cascade. */
#cta.formacao-cta{ position: relative; padding-top: var(--space-7); padding-bottom: var(--space-6); }
#cta.formacao-cta::before{
  content: "";
  position: absolute; top: 0; left: 0; right: 0; height: var(--space-7);
  background: linear-gradient(to bottom, #17130F, var(--color-bg));
  pointer-events: none;
}
/* Fechamento: frase e CTA mais próximos, como consequência uma da outra. */
#cta.formacao-cta .actions{ margin-top: var(--space-4); }
@media (max-width: 860px){
  .page-hero-grid.flip > :last-child{ order: 0; }
  /* empresas-visual-audit.md §3: .page-hero-grid.flip (duas classes) tinha
     especificidade maior que a regra mobile genérica de .page-hero-grid (uma
     classe) acima — o grid nunca colapsava para 1 coluna em telas pequenas
     quando .flip estava presente (único uso: Empresas). Repetir a mesma
     especificidade aqui, depois no cascade, resolve sem tocar a regra base. */
  .page-hero-grid.flip{ grid-template-columns: 1fr; }
}

/* resultados-visual-audit.md §9 CRÍTICO 1: fernanda-tv-eres.jpg é uma
   captura de celular de uma tela de TV (prova documental), não um retrato —
   mesma lógica já usada para o .exhibit-plate de VisageVision ("a foto é a
   prova, não dissolver"): nítida, contida em tamanho próprio (proporção
   real da captura, sem distorcer nem cortar os elementos gráficos da TV),
   com borda fina em vez de máscara/vinheta. Escopado à foto de #midia; o
   resto de .page-hero-grid continua recebendo o tratamento padrão de
   retrato. */
/* #midia e #cta são ids reaproveitados em outras páginas (Sobre também tem
   #midia; praticamente toda página tem #cta) — por isso as classes
   .resultados-midia/.resultados-cta (próprias de resultados.html) entram no
   seletor combinado, para não vazar estas regras para as outras páginas. */
#midia.resultados-midia .media-proof-plate{
  aspect-ratio: 941 / 1672;
  max-width: 260px;
  margin-left: auto;
  border: var(--border-hairline);
}
#midia.resultados-midia .media-proof-plate .portrait-img{
  object-fit: cover;
  mask-image: none;
  -webkit-mask-image: none;
}
.page-hero-grid .media-proof-plate::before{ content: none; }
@media (max-width: 860px){ #midia.resultados-midia .media-proof-plate{ margin-left: 0; max-width: 220px; } }

/* resultados-visual-audit.md §9 CRÍTICO 2/3 e RECOMENDADO: página alternava
   dossie→autoridade→dossie→autoridade em três pontos sem nenhuma ponte —
   mesmo princípio de atmosfera/fundo já validado em Formação, nunca uma
   linha ou borda. */
#midia.resultados-midia{ position: relative; padding-bottom: var(--space-6); }
#midia.resultados-midia::before{
  content: "";
  position: absolute; top: 0; left: 0; right: 0; height: var(--space-7);
  background: linear-gradient(to bottom, #17130F, var(--color-bg));
  pointer-events: none;
}
/* valores replicados explicitamente do bloco .sobre-midia (achado na
   auditoria técnica final: antes disto, #midia.resultados-midia só definia
   position:relative e herdava padding-bottom/tipografia de um #midia
   compartilhado e não escopado em sobre.html — o vazamento foi fechado lá,
   e os mesmos valores foram replicados aqui para não alterar a aparência já
   aprovada desta página). */
#midia.resultados-midia .media-proof .meta{ font-family: var(--font-body); font-size: 0.9375rem; }
#midia.resultados-midia .media-proof .outlet{ font-size: 1.1875rem; }
#reconhecimento{ position: relative; }
#reconhecimento::before{
  content: "";
  position: absolute; top: 0; left: 0; right: 0; height: var(--space-7);
  background: linear-gradient(to bottom, #0E0C0A, var(--color-bg));
  pointer-events: none;
}
#cta.resultados-cta{ position: relative; }
#cta.resultados-cta::before{
  content: "";
  position: absolute; top: 0; left: 0; right: 0; height: var(--space-7);
  background: linear-gradient(to bottom, #17130F, var(--color-bg));
  pointer-events: none;
}

/* ---- Hero editorial sem foto (MD09 P0.4) — substitui o .page-hero
   centralizado (eyebrow + h1 + intro, tudo no meio) nas páginas sem
   fotografia própria no topo (Consultoria, Contato, Métodos, Resultados,
   VisageVision). Título ancorado à esquerda, linha de apoio deslocada —
   nenhuma das duas fica no eixo central da página. */
.hero-open{ padding-block: var(--space-10) var(--space-8); }
.hero-open .kicker{
  font-family: var(--font-body); font-weight:600; font-size: var(--text-label);
  text-transform: uppercase; letter-spacing: var(--tracking-label); color: var(--color-accent);
  display:block;
}
.hero-open h1{ font-family: var(--font-display); line-height: 1.05; margin-top: var(--space-4); }
.hero-open .support{ color: var(--color-muted); }
/* VisageVision hero: the method name itself as the dominant visual element,
   the way a maison treats its own name — not a headline about the method. */
.visagevision-wordmark{
  font-family: var(--font-display);
  font-size: clamp(3.25rem, 6.5vw, 6.5rem);
  line-height: 0.95;
  margin-top: var(--space-4);
}
.visagevision-wordmark .reg{ font-size: 0.45em; vertical-align: super; }
@media (max-width: 640px){
  .hero-open .support{ margin-left:0 !important; }
}

/* ---- Encerramento editorial (MD09 P0.2) — duas variações que substituem
   o .cta-band uniforme repetido em 7 páginas. Variante "statement" (grande,
   assimétrica) para as páginas primárias; variante "quiet" (linha em
   itálico + link) para as sub-páginas de método. Nenhuma delas é
   centralizada por padrão — a intenção é que o fechamento pareça
   consequência da página, não um componente reaproveitado. ---- */
.close-statement{ padding-block: var(--space-10); }
.close-statement .kicker{
  font-family: var(--font-body); font-weight:600; font-size: var(--text-label);
  text-transform: uppercase; letter-spacing: var(--tracking-label); color: var(--color-accent);
  display:block; margin-bottom: var(--space-4);
}
.close-statement h2{ font-family: var(--font-display); font-size: clamp(2rem, 2.4vw + 1.4rem, 3.25rem); max-width: 16ch; line-height: 1.08; }
.close-statement .actions{ display:flex; gap: var(--space-4); flex-wrap:wrap; margin-top: var(--space-7); }
.close-statement.align-right{ text-align:right; }
.close-statement.align-right .container-narrow, .close-statement.align-right .container{ margin-left:auto; }
.close-statement.align-right h2{ margin-left:auto; }
.close-statement.align-right .actions{ justify-content:flex-end; }
@media (max-width: 640px){
  .close-statement, .close-statement.align-right{ text-align:center; padding-block: var(--space-9); }
  .close-statement h2, .close-statement.align-right h2{ max-width:14ch; margin-inline:auto; }
  .close-statement .actions, .close-statement.align-right .actions{ justify-content:center; }
}

.close-quiet{ padding-block: var(--space-9); }
.close-quiet .line{ font-family: var(--font-display); font-style: italic; font-size: var(--text-h3); max-width: 30ch; }
.close-quiet .actions{ display:flex; gap: var(--space-6); flex-wrap:wrap; margin-top: var(--space-6); align-items:center; }
@media (max-width: 640px){ .close-quiet{ text-align:center; } .close-quiet .line{ margin-inline:auto; } .close-quiet .actions{ justify-content:center; } }

/* ---- Par editorial (MD09 P0.3) — substitui pares de "card" (Contato,
   Métodos, Lapide-se, VisageVision) por duas colunas de texto corrido. A
   única linha usada é a divisória vertical entre as duas colunas — ela tem
   função real (marca a bifurcação entre as duas opções), não é decoração. ---- */
.pair-editorial{ display:grid; grid-template-columns: 1fr 1fr; gap: var(--space-8); }
.pair-editorial > div{ padding-left: var(--space-7); border-left: 1px solid var(--color-border); }
.pair-editorial > div:first-child{ padding-left:0; border-left:none; }
.pair-editorial .service-label{ font-family: var(--font-body); font-weight:600; font-size: var(--text-label); text-transform:uppercase; letter-spacing: var(--tracking-label); color: var(--color-muted); }
.pair-editorial h3{ margin-top: var(--space-2); }
.pair-editorial p{ color: var(--color-muted); margin-top: var(--space-3); }
.pair-editorial .link-arrow{ margin-top: var(--space-4); display:inline-flex; }
@media (max-width: 640px){
  .pair-editorial{ grid-template-columns: 1fr; gap: var(--space-6); }
  .pair-editorial > div{ padding-left:0; border-left:none; padding-top: var(--space-6); border-top: 1px solid var(--color-border); }
  .pair-editorial > div:first-child{ padding-top:0; border-top:none; }
}

/* ---- Trio editorial (MD09 P0.3) — versão de três itens (Sobre, "O que
   sustenta o método"): rótulo à esquerda, conteúdo à direita, sem card. ---- */
.trio-editorial{ display:flex; flex-direction:column; gap: var(--space-6); }
.trio-editorial .trio-item{ display:grid; grid-template-columns: 150px 1fr; gap: var(--space-6); align-items:baseline; }
.trio-editorial .service-label{ font-family: var(--font-body); font-weight:600; font-size: var(--text-label); text-transform:uppercase; letter-spacing: var(--tracking-label); color: var(--color-accent); }
.trio-editorial h3{ font-family: var(--font-display); }
.trio-editorial p{ font-size: 1.0625rem; line-height: 1.6; color: var(--color-muted); margin-top: var(--space-2); max-width: 44ch; }
@media (max-width: 640px){ .trio-editorial .trio-item{ grid-template-columns: 1fr; gap: var(--space-2); } }

/* ---- Provisional / pending content marker — visible on purpose during
   this structural review pass (not hidden like the earlier confirm-tags on
   the approved Home copy). ---- */
p.provisional{ font-style: italic; color: var(--color-muted); max-width: 66ch; }
p.provisional .confirm-tag{ font-style: normal; margin-right: var(--space-2); }

/* ---- Section head, reused across most internal sections ---- */
.section-head{ max-width: 52ch; margin-bottom: var(--space-7); }
.section-head .eyebrow{ display:block; margin-bottom: var(--space-3); }

/* ---- Consultoria: os três caminhos (MD-consultoria, referência site.pdf
   pág. 9) — três blocos tipográficos puros, empilhados, SEM fotografia e
   sem card. A referência da Fernanda não usa foto nesta seção: a
   integração vem de um brilho ambiente (mesma técnica do Home/MD20)
   pintado no fundo da seção, à direita da coluna de texto, nunca por trás
   dela. Substitui a versão anterior (texto + uma foto grande sticky),
   que não corresponde à composição da referência. */
/* MD-ritmo: calibração fina de espaçamento só — nenhuma mudança de
   conteúdo, ordem ou linguagem visual. Cada redução abaixo é proporcional
   (não um valor arbitrário), para a página ler como narrativa contínua em
   vez de blocos isolados por vazio. */
.consultoria-caminhos{
  position: relative;
  padding-top: var(--space-7);
  padding-bottom: var(--space-6);
  background: radial-gradient(ellipse 36% 50% at 86% 38%, rgba(74,58,44,0.3), transparent 72%);
}
/* AJUSTE FINAL §5: coluna única (max-width:620px) deixava os 3 caminhos
   concentrados à esquerda, com um vazio grande à direita do .container
   (1200px). Redistribuído em 3 colunas lado a lado, separadas por um
   hairline vertical — mesma linguagem editorial já usada em Contato
   (.pair-editorial), não um card. */
.caminhos-list{
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  column-gap: var(--space-7);
  max-width: none;
}
.caminho-item{ padding-left: var(--space-6); border-left: 1px solid var(--color-border); }
.caminho-item:first-child{ padding-left: 0; border-left: none; }
.caminho-item p{ color: var(--color-muted); margin-top: var(--space-3); max-width: 48ch; }
/* Auditoria §6: .type-h3 atinge seu teto (1.75rem) já a partir de ~1300px —
   mesmo sintoma corrigido na Home (Universo, Método+Autoridade). Sobrescrita
   só aqui (não no token .type-h3, usado por outras páginas) para o título
   de cada caminho continuar crescendo em telas grandes. */
.caminho-item h2{ margin-top: var(--space-2); font-size: clamp(1.375rem, 1.3vw + 1.05rem, 2.25rem); }
.caminho-item .link-arrow{ margin-top: var(--space-4); display: inline-flex; }
@media (max-width: 860px){
  .caminhos-list{ grid-template-columns: 1fr; row-gap: calc(var(--space-8) * 0.7); }
  .caminho-item{ padding-left: 0; border-left: none; padding-top: var(--space-6); border-top: 1px solid var(--color-border); }
  .caminho-item:first-child{ padding-top: 0; border-top: none; }
}
@media (max-width: 640px){
  .consultoria-caminhos{ background: radial-gradient(ellipse 60% 36% at 50% 85%, rgba(74,58,44,0.26), transparent 74%); }
}

/* ---- Consultoria: Métodos/Prova/CTA final (auditoria consultoria-visual-
   audit.md §2) — essas três seções não existem no PDF da Fernanda; eram
   reaproveitamento genérico de .section-tight/.close-quiet, com
   .container-narrow (880px) enquanto Hero/caminhos usam .container
   (1200px) — um salto de margem de ~160px sem motivo de composição.
   Recompostas como uma unidade só, no mesmo eixo da página: Métodos e CTA
   final flush ao eixo principal (como a Hero), Prova levemente recuada —
   ritmo assimétrico deliberado em vez de três blocos idênticos
   centralizados. */
.consultoria-bridge{ padding-block: var(--space-7); }

/* AJUSTE FINAL (Consultoria): "Métodos que sustentam" e "Prova" foram
   removidos (excesso de conteúdo no fechamento da página) — a ponte tonal
   dossie→autoridade que vivia em .consultoria-prova foi movida para
   .consultoria-cta, que agora é o único bloco de fechamento antes do
   footer. Mesmo princípio da Home (MD18 §10): a mudança de tom é suavizada
   num gradiente, nunca cortada. */
.consultoria-cta{ position: relative; padding-top: var(--space-8); }
.consultoria-cta::before{
  content: "";
  position: absolute; top: 0; left: 0; right: 0; height: var(--space-8);
  background: linear-gradient(to bottom, #17130F, var(--color-bg));
  pointer-events: none;
}
.consultoria-cta .cta-line{
  font-family: var(--font-display);
  font-style: italic;
  font-size: clamp(1.625rem, 1.5vw + 1.2rem, 2.5rem);
  max-width: 20ch;
}
.consultoria-cta .btn-primary{ margin-top: var(--space-4); }

@media (max-width: 640px){
  .consultoria-bridge{ text-align: left; }
  .consultoria-cta{ padding-top: var(--space-8); }
}

/* ---- Step list: numbered process (Consultoria, Lapide-se, VisageVision) ---- */
.step-list{ display:flex; flex-direction:column; }
.step-item{ display:grid; grid-template-columns: 56px 1fr; gap: var(--space-5); padding: var(--space-5) 0; border-top: var(--border-hairline); }
.step-item:first-child{ border-top:none; }
.step-item .num{ font-family: var(--font-mono); font-size: var(--text-h3); color: var(--color-accent); font-variant-numeric: tabular-nums; }
.step-item h3{ font-size: 1.25rem; }
.step-item p{ margin-top: var(--space-2); color: var(--color-muted); max-width: 60ch; }

/* Editorial variant: bigger display-serif numbers, slight scale/indent
   variation per row instead of four uniform rows (MD07 §9 — "evitar bloco
   de texto em cima de bloco de texto"). */
/* AJUSTE FINAL §6 (Empresas · "Workshops e treinamentos"): o leve indent
   escalonado por linha (nth-child 2/3/4) deixava números, títulos e textos
   começando em posições horizontais diferentes entre si — removido para os
   4 itens compartilharem o mesmo eixo vertical exato. Único uso desta
   classe no site (empresas.html), então o ajuste não afeta nenhuma outra
   página. */
.step-list-editorial .step-item{ grid-template-columns: 72px 1fr; padding-block: var(--space-6); }
.step-list-editorial .num{ font-family: var(--font-display); font-size: clamp(1.75rem, 2.4vw, 2.5rem); font-variant-numeric: tabular-nums; line-height: 1; }

/* ---- Audience / two-path card row (reused on Consultoria, Mentoria, Sobre) ---- */
.card-row{ display:grid; grid-template-columns: repeat(2, 1fr); gap: var(--space-5); }
@media (max-width: 720px){ .card-row{ grid-template-columns: 1fr; } }
.card-row.cols-3{ grid-template-columns: repeat(3, 1fr); }
@media (max-width: 960px){ .card-row.cols-3{ grid-template-columns: 1fr 1fr; } }
@media (max-width: 600px){ .card-row.cols-3{ grid-template-columns: 1fr; } }

/* ---- Simple centered dark CTA band — single destination, unlike the
   Home's dual cta-split. The one "authority moment" most internal pages
   get, kept to a single instance per page. ---- */
.cta-band{ text-align:center; padding-block: var(--space-9); }
.cta-band .eyebrow{ display:block; margin-bottom: var(--space-3); }
.cta-band h2{ max-width: 32ch; margin-inline:auto; }
.cta-band .actions{ display:flex; gap: var(--space-4); justify-content:center; margin-top: var(--space-6); flex-wrap:wrap; }

/* ---- Result / proof placeholder card (Resultados page) ---- */
.proof-card{ border: var(--border-hairline); padding: var(--space-6); background: var(--color-surface); }
.proof-card .confirm-tag{ display:inline-block; margin-top: var(--space-3); }

/* ---- Simple contact form shell (structural only — no backend yet) ---- */
.form-shell{ display:flex; flex-direction:column; gap: var(--space-5); max-width: 46ch; }
.form-row{ display:flex; flex-direction:column; gap: var(--space-2); }
.form-row label{ font-family: var(--font-body); font-weight:600; font-size: var(--text-caption); text-transform:uppercase; letter-spacing: var(--tracking-label); color: var(--color-muted); }
.form-row input, .form-row select, .form-row textarea{
  font-family: var(--font-body); font-size: var(--text-body); color: var(--color-text);
  background: var(--color-surface); border: var(--border-hairline); padding: var(--space-3) var(--space-4);
  border-radius: var(--radius-none);
}
.form-row textarea{ min-height: 120px; resize: vertical; }
.form-row input:focus, .form-row select:focus, .form-row textarea:focus{ outline: 2px solid var(--color-accent); outline-offset: 1px; }

/* ---- Signature quote — "Advogada da Sua Imagem" treatment, reused on
   Sobre (and originally on Home, retired there in v5 — see home.css). ---- */
/* MD-ritmo: era space-9/space-9 (96/96) — reduzido para manter o momento
   de pausa deliberada (é a citação-assinatura da marca), mas sem o exagero
   que fazia a página inteira sentir "bloco → vazio → bloco". */
/* MD-lapidação: assimétrico em vez de space-8/space-8 — um pouco mais de
   ar chegando de Trajetória (ainda é uma pausa editorial, não um corte),
   um pouco menos saindo para Visão, para a leitura seguir fluindo em vez
   de "flutuar" isolado entre dois vazios iguais. */
.posicionamento{ text-align: center; padding-top: var(--space-8); padding-bottom: var(--space-7); }
.posicionamento .kicker{ font-family: var(--font-body); font-weight: 600; font-size: var(--text-label); text-transform: uppercase; letter-spacing: var(--tracking-label); color: var(--color-accent); }
.posicionamento .signature{
  font-family: var(--font-display); font-style: italic; font-weight: 500;
  font-size: clamp(2.75rem, 5vw, 4.75rem);
  line-height: 1.15; margin: var(--space-5) auto 0; max-width: 17ch;
}
.posicionamento cite{ display: block; margin-top: var(--space-5); font-style: normal; font-family: var(--font-body); font-size: var(--text-caption); color: var(--color-muted); }

/* ---- Sobre Mim — ajustes escopados a esta página (sobre-mim-visual-audit.md).
   Nenhuma destas classes é usada por outra página — seguro editar livremente. */

/* §3.3/§6: a referência (site.pdf pág. 15) não dissolve esta foto — nítida,
   só a etiqueta (já coberta pelo .portrait::after padrão). mask-image:none
   sobrescreve tanto a base .portrait-img quanto .portrait.portrait-lg. */
.sobre-hero-portrait .portrait-img{
  /* PROTÓTIPO ATMOSFERA (ref. site(1).pdf pág. 15, 2ª rodada): o arquivo
     fonte é um P&B neutro/frio (confirmado por inspeção direta) — a
     referência mostra esta MESMA foto com uma correção sépia quente, que já
     aproxima os cinzas da foto do marrom/preto da página antes de qualquer
     fade. Isso explica por que o dissolve sozinho (1ª tentativa) ainda lia
     como "moldura": a cor nunca batia com o fundo. */
  filter: sepia(0.55) saturate(1.3) brightness(0.93) contrast(1.06);
  /* raio recalibrado (mesma correção de Empresas): com raio 88%/88% a
     distância do centro (34%) até o topo era de só 34 unidades, menor que
     o início do fade (68% do raio) — o topo nunca chegava a esmaecer.
     60%/42% faz as quatro bordas alcançarem a transição, com opacidade
     zero garantida aos 90% do raio (nunca exatamente no limite da caixa). */
  -webkit-mask-image: radial-gradient(ellipse 60% 42% at 50% 34%, #000 68%, transparent 90%);
          mask-image: radial-gradient(ellipse 60% 42% at 50% 34%, #000 68%, transparent 90%);
}
/* Escurecimento gradual por luminância (multiply, raio grande, sem anel)
   em vez de transparência que apaga a foto — a mesma técnica do retrato de
   Empresas. */
.page-hero-grid .sobre-hero-portrait::before{
  background: radial-gradient(ellipse 66% 48% at 50% 34%, transparent 25%, rgba(23,19,15,0.4) 55%, rgba(23,19,15,0.78) 80%, rgba(23,19,15,0.94) 100%);
  mix-blend-mode: multiply;
}
/* brilho ambiente reforçado atrás da foto, preenchendo com tom quente a
   margem que a máscara acima garante transparente (mesma lógica de
   Empresas — .sobre-hero já é classe própria desta página, no <section>).
   Só a partir de 861px, mesmo motivo do brilho de Empresas. */
@media (min-width: 861px){
  .sobre-hero .page-hero-grid{
    background: radial-gradient(ellipse 58% 80% at 78% 50%, rgba(94,74,56,0.5), transparent 76%);
  }
}
/* MD-lapidação: --text-body (17px fixo) é compartilhado por todo o site —
   em 1440px, lido isoladamente nesta página, perdia presença editorial.
   Escopado só aqui: corpo um pouco maior e com mais entrelinha, hierarquia
   eyebrow→título→corpo→secundário mais clara, sem tocar o token global. */
.sobre-hero-p{ font-size: 1.125rem; line-height: 1.65; color: var(--color-muted); max-width: 54ch; margin-top: var(--space-4); }
#trajetoria p{ font-size: 1.125rem; line-height: 1.65; }
#visao .type-body{ font-size: 1.125rem; line-height: 1.6; }

/* MD-ritmo: calibração proporcional dos vazios entre blocos, mesma
   disciplina já aprovada na Consultoria — reduzir pausas sem função,
   manter respiro onde a composição pede. .page-hero e .section são
   compartilhados com outras páginas, por isso cada ajuste é escopado por
   id/classe própria de Sobre, nunca no componente base. */
.sobre-hero{ padding-bottom: var(--space-7); }
#trajetoria{ padding-top: var(--space-7); padding-bottom: var(--space-6); }
#visao{ padding-top: var(--space-6); padding-bottom: var(--space-7); }
.sobre-abordagem{ padding-top: var(--space-5); padding-bottom: var(--space-5); }
#diferenciais{ padding-top: var(--space-6); padding-bottom: var(--space-7); }
/* Mesma ponte tonal dossie→autoridade já validada na Home/Consultoria —
   sem ela, a troca de fundo entre Diferenciais e Mídia era um corte reto.
   #midia é id reaproveitado por Resultados — por isso escopado via
   .sobre-midia (achado e corrigido na auditoria técnica final; antes era
   #midia sozinho e vazava para resultados.html, que replica os mesmos
   valores explicitamente em seu próprio bloco .resultados-midia). */
#midia.sobre-midia{ position: relative; padding-top: var(--space-8); padding-bottom: var(--space-6); }
#midia.sobre-midia::before{
  content: "";
  position: absolute; top: 0; left: 0; right: 0; height: var(--space-8);
  background: linear-gradient(to bottom, #17130F, var(--color-bg));
  pointer-events: none;
}
/* .media-proof é compartilhado com Resultados — escopado aqui só para
   .meta deixar de ler como "técnico" (mono, 13px) e ganhar um pouco mais
   de presença/voz editorial, sem tocar o componente base. */
#midia.sobre-midia .media-proof .meta{ font-family: var(--font-body); font-size: 0.9375rem; }
#midia.sobre-midia .media-proof .outlet{ font-size: 1.1875rem; }

/* MD-lapidação §4: a foto de Visão ainda lia como "retângulo inserido na
   página" mesmo com mask-tight + o glow/vinheta padrão de .page-hero-grid
   (herdados, não removidos). Fundo claro e quente desta foto (estante
   iluminada, flores brancas, parede clara) precisa de mais integração
   tonal do que o padrão genérico dá — reforçar os MESMOS dois mecanismos
   já validados (glow atrás + multiply nas bordas da própria foto), só
   recalibrados para esta foto específica. Nenhuma máscara nova, nenhum
   corte de rosto, nenhuma moldura. */
#visao .page-hero-grid{
  background: radial-gradient(ellipse 48% 74% at 76% 46%, rgba(138,101,58,0.42), transparent 76%);
}
#visao .portrait::before{
  background: radial-gradient(ellipse 88% 90% at 50% 32%, transparent 16%, rgba(23,19,15,0.62) 64%, rgba(23,19,15,0.97) 100%);
}

/* §7/§3.5: mesma lógica do bridge-statement da Consultoria (itálico serifado
   com mais presença que .type-body simples) — sem adicionar conteúdo. */
.abordagem-statement{
  font-family: var(--font-display);
  font-style: italic;
  font-size: clamp(1.375rem, 1vw + 1.1rem, 1.875rem);
  line-height: 1.4;
  max-width: 56ch;
  color: var(--color-text);
}

/* §3.2/§7: fechamento substituído pelo texto da referência (site.pdf pág.
   18) — um único CTA sólido, sem links secundários. */
.sobre-cta{ padding-top: var(--space-5); padding-bottom: var(--space-7); }
.sobre-cta .cta-line{
  font-family: var(--font-display);
  font-style: italic;
  font-size: clamp(1.625rem, 1.5vw + 1.2rem, 2.5rem);
  max-width: 16ch;
}
.sobre-cta .cta-support{ margin-top: var(--space-3); color: var(--color-muted); max-width: 46ch; }
.sobre-cta .btn-primary{ margin-top: var(--space-4); }

/* ---- Statement — a single centered display-size line, the "authority
   moment" punctuation reused across internal pages (Consultoria's
   "problema", Lapide-se's "filosofia", etc). ---- */
.statement{ padding-block: var(--space-9); text-align: center; }
.statement .type-display{ max-width: 22ch; margin-inline: auto; }

/* ---- Testimonial / case grid (Resultados page) ---- */
.testimonial-grid{ display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--space-6); }
@media (max-width: 720px){ .testimonial-grid{ grid-template-columns: 1fr; } }
.testimonial .pending{ font-style: italic; color: var(--color-muted); }

/* ---- Portrait: real photography, dissolving into the near-black ground on
   every edge — no border, no card, no visible rectangle (MD07 §4: "a borda
   da foto deve parecer desaparecer no fundo preto... imagem + fundo = uma
   composição única", not "imagem + caixa preta"). The soft radial mask lives
   on .portrait-img itself, so every existing usage across every page gets
   the dissolve automatically with no markup changes. The wide diagonal-hash
   .photo-slot remains correct for non-portrait placeholders (e.g.
   VisageVision's reading diagram) — this component is portraits only. */
.portrait{
  position: relative;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(155deg, var(--color-surface) 0%, var(--color-secondary) 145%);
}
.portrait.ratio-portrait{ aspect-ratio: 4 / 5; }
.portrait.ratio-wide{ aspect-ratio: 16 / 9; }
.portrait-mark{
  font-family: var(--font-display);
  font-style: italic;
  font-size: clamp(2.75rem, 7vw, 5.5rem);
  color: var(--color-light);
  opacity: 0.4;
}
.portrait-img{
  width: 100%; height: 100%; object-fit: cover; object-position: center 25%; display: block;
  -webkit-mask-image: radial-gradient(ellipse 84% 88% at 50% 38%, #000 52%, transparent 94%);
          mask-image: radial-gradient(ellipse 84% 88% at 50% 38%, #000 52%, transparent 94%);
}
/* Hero-scale portraits (Consultoria/Empresas/Formação) run larger and
   closer to the frame edge — a slightly wider mask keeps more of the photo
   intact while the same soft dissolve still reads at the corners. */
.portrait.portrait-lg .portrait-img{
  -webkit-mask-image: radial-gradient(ellipse 92% 94% at 50% 38%, #000 62%, transparent 97%);
          mask-image: radial-gradient(ellipse 92% 94% at 50% 38%, #000 62%, transparent 97%);
}

/* MD12 §12: one fade applied to every photo reads as a template, not a
   composition decision — the mask has to respect what's actually in each
   frame. Two more variants, chosen per photo by what its own background
   and crop need, not applied uniformly:
   - mask-open: tight/intimate crops already sitting on a dark, even
     ground (a close portrait, a documentary screenshot with its own
     background) — a wider, later falloff keeps more of the frame intact
     instead of eating into a composition that's already dark enough to
     read against black.
   - mask-tight: photos shot against a light or warm-bright ground (a
     cream sweater, a sunlit office, a pale blurred backdrop) — those need
     an earlier, harder falloff or the light background survives as a
     visible rectangle against the page's near-black. */
.portrait.mask-open .portrait-img{
  -webkit-mask-image: radial-gradient(ellipse 96% 98% at 50% 34%, #000 70%, transparent 99%);
          mask-image: radial-gradient(ellipse 96% 98% at 50% 34%, #000 70%, transparent 99%);
}
.portrait.mask-tight .portrait-img{
  -webkit-mask-image: radial-gradient(ellipse 74% 80% at 50% 36%, #000 34%, transparent 86%);
          mask-image: radial-gradient(ellipse 74% 80% at 50% 36%, #000 34%, transparent 86%);
}
.portrait.portrait-lg.mask-tight .portrait-img{
  -webkit-mask-image: radial-gradient(ellipse 80% 86% at 50% 34%, #000 40%, transparent 90%);
          mask-image: radial-gradient(ellipse 80% 86% at 50% 34%, #000 40%, transparent 90%);
}
/* MD19: mask-open's 70%-opaque zone reads fine at thumbnail scale but is
   imperceptible at full-hero scale (Sobre) — same fix pattern as the
   mask-tight combo above, opaque zone pulled in so the dissolve actually
   shows at this size. */
.portrait.portrait-lg.mask-open .portrait-img{
  -webkit-mask-image: radial-gradient(ellipse 90% 92% at 50% 32%, #000 52%, transparent 98%);
          mask-image: radial-gradient(ellipse 90% 92% at 50% 32%, #000 52%, transparent 98%);
}

/* VisageVision's "Simulações reais" pair sits directly in the section (no
   .case-study ancestor), so it needs its own grid rather than relying on
   the scoped .case-study .case-media rule. */
.case-media{ display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-4); }
@media (max-width: 640px){ .case-media{ grid-template-columns: 1fr; } }

/* Exhibit plate: VisageVision's before/after comparisons are diagnostic
   proof, not environmental portraiture — the white studio background is
   the content (it's what makes the hair-color comparison legible), so
   dissolving it into black would fight the image instead of framing it.
   Presented as a specimen on the black page instead: a hairline edge and
   room to breathe, never a filled card. */
.exhibit-plate{
  border: var(--border-hairline);
  overflow: hidden;
}
.exhibit-plate.ratio-portrait{ aspect-ratio: 4 / 5; }
.exhibit-plate img{ width: 100%; height: 100%; object-fit: cover; display: block; }
.portrait::after{
  content: attr(data-caption);
  position: absolute;
  left: var(--space-4);
  bottom: var(--space-4);
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: var(--tracking-label);
  color: var(--color-light);
  background: rgba(58,48,41,0.4);
  padding: 3px 10px;
}

/* ---- Badge: terracotta as a deliberate, sparing highlight — a filled
   chip (white-on-terracotta passes AA on its own), never terracotta as
   small text directly on the page background. ---- */
.badge{
  display: inline-block;
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: var(--tracking-label);
  color: #fff;
  background: var(--color-terracotta);
  padding: 4px 10px;
}

/* ---- Stat row: a quieter way to show real numbers than a full dark
   section — used sparingly, on light ground. ---- */
.stat-row{ display: flex; flex-wrap: wrap; gap: var(--space-8); }
.stat-row .stat .n{ font-family: var(--font-display); font-size: var(--text-h2); display: block; }
.stat-row .stat .l{ font-family: var(--font-body); font-size: var(--text-caption); color: var(--color-muted); text-transform: uppercase; letter-spacing: var(--tracking-label); margin-top: var(--space-1); }

/* ---- Contact channel list ---- */
.channel-list{ display:flex; flex-direction:column; gap: var(--space-4); max-width: 52ch; }
.channel-item{ display:flex; justify-content:space-between; align-items:center; padding: var(--space-5) 0; border-top: var(--border-hairline); gap: var(--space-4); flex-wrap: wrap; }
.channel-item:first-child{ border-top:none; }
.channel-item .label{ font-family: var(--font-body); font-weight:600; font-size: var(--text-caption); text-transform:uppercase; letter-spacing: var(--tracking-label); color: var(--color-muted); }
@media (max-width: 480px){
  .channel-item{ flex-direction: column; align-items: flex-start; gap: var(--space-3); }
}