/* ============================================================
   REFINO FINAL — varredura de design (set/2026)
   Camada de fechamento: carrega DEPOIS de home-refinement.css.
   Só correção e acabamento; nenhum conceito novo.

   1. Menu mobile — de lista genérica a sumário do documento
   2. Capa no tablet — enquadramento da prancha
   3. Alvos de toque (44px) no rodapé e nos links de contato
   4. Linhas do extrato — afordância de clique mais legível
   5. Cartela "65+" — deixa de parecer card vazio
   6. Ritmo vertical — ar com função
   ============================================================ */

/* ------------------------------------------------------------
   1. MENU MOBILE
   O painel era uma lista de links sem hierarquia, com o CTA
   renderizado em ink sobre ink (invisível) e sem véu por baixo.
   Vira o sumário do documento: índice numerado, CTA dourado,
   linha direta de WhatsApp e véu que fecha ao toque.
   ------------------------------------------------------------ */
.mobile-menu {
  top: var(--header-h, 80px);
  padding: var(--space-5) 24px var(--space-8);
  gap: 0;
  box-shadow: 0 28px 60px rgba(15, 17, 22, 0.32);
}
.mobile-menu.open {
  max-height: calc(100vh - var(--header-h, 80px));
  max-height: calc(100dvh - var(--header-h, 80px));
}

.mm-eyebrow {
  display: block;
  font-family: var(--font-sans);
  font-size: var(--text-micro);
  font-weight: 500;
  letter-spacing: var(--tracking-widest);
  text-transform: uppercase;
  color: var(--text-inverse-tertiary);
  padding-bottom: 12px;
  margin-bottom: 4px;
  border-bottom: 1px solid var(--border-inverse-subtle);
}
.site-header.theme-light .mm-eyebrow {
  color: var(--text-tertiary);
  border-bottom-color: var(--border-subtle);
}

.mobile-menu a[role="menuitem"]:not(.btn):not(.mm-wa) {
  display: grid;
  grid-template-columns: 2.25rem 1fr;
  align-items: center;
  gap: 0;
  padding: var(--space-4) 0;
  min-height: 52px;
}
.mm-num {
  font-family: var(--font-display);
  font-style: italic;
  font-size: 0.875rem;
  line-height: 1;
  color: var(--brand-300);
  opacity: 0.75;
}
.site-header.theme-light .mm-num { color: var(--brand-600); opacity: 0.8; }
.mm-txt {
  font-family: var(--font-sans);
  font-size: 1.0625rem;
  font-weight: 500;
  letter-spacing: var(--tracking-snug);
}

/* CTA: o mesmo dourado dos outros dois pontos de conversão. */
#mobile-menu .btn.mm-cta {
  width: 100%;
  margin-top: var(--space-6);
  padding: var(--space-4) var(--space-6);
  min-height: 52px;
  border: 1px solid var(--brand-300);
  background-color: var(--brand-300);
  color: var(--cool-900);
  font-weight: 500;
  letter-spacing: var(--tracking-wide);
}
#mobile-menu .btn.mm-cta:hover,
#mobile-menu .btn.mm-cta:active {
  background-color: var(--brand-400);
  border-color: var(--brand-400);
  color: var(--cool-900);
}

/* Linha direta: quem abre o menu no celular quer falar agora. */
.mobile-menu .mm-wa {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 2px;
  margin-top: var(--space-5);
  padding-top: var(--space-4);
  min-height: 44px;
  border-top: 1px solid var(--border-inverse-subtle);
  border-bottom: 0;
}
.site-header.theme-light .mobile-menu .mm-wa { border-top-color: var(--border-subtle); }
.mm-wa-label {
  font-family: var(--font-sans);
  font-size: var(--text-micro);
  font-weight: 500;
  letter-spacing: var(--tracking-widest);
  text-transform: uppercase;
  color: var(--text-inverse-tertiary);
}
.site-header.theme-light .mm-wa-label { color: var(--text-tertiary); }
.mm-wa-num {
  font-family: var(--font-display);
  font-size: 1.125rem;
  letter-spacing: 0.01em;
  color: var(--text-inverse);
}
.site-header.theme-light .mm-wa-num { color: var(--text-primary); }
.mm-wa:hover .mm-wa-num { color: var(--brand-300); }
.site-header.theme-light .mm-wa:hover .mm-wa-num { color: var(--brand-600); }

/* Véu: separa o painel da página e fecha ao toque fora. */
.menu-scrim {
  position: fixed;
  inset: 0;
  z-index: 190;
  background: rgba(15, 17, 22, 0.55);
  opacity: 0;
  visibility: hidden;
  transition:
    opacity var(--duration-moderate) var(--ease-standard),
    visibility 0s linear var(--duration-moderate);
}
.menu-scrim.is-visible {
  opacity: 1;
  visibility: visible;
  transition-delay: 0s;
}
@media (min-width: 1024px) {
  .menu-scrim { display: none; }
}

/* Hambúrguer vira X quando aberto. */
.menu-toggle { position: relative; }
.mt-icon {
  transition:
    opacity   var(--duration-base) var(--ease-standard),
    transform var(--duration-base) var(--ease-standard);
}
.mt-icon-close {
  position: absolute;
  top: 50%; left: 50%;
  margin: -11px 0 0 -11px;
  opacity: 0;
  transform: rotate(-90deg);
}
.menu-toggle[aria-expanded="true"] .mt-icon-open {
  opacity: 0;
  transform: rotate(90deg);
}
.menu-toggle[aria-expanded="true"] .mt-icon-close {
  opacity: 1;
  transform: rotate(0deg);
}

@media (prefers-reduced-motion: reduce) {
  .mt-icon { transition: none; }
  .menu-scrim { transition: opacity 1ms linear; }
}

/* ------------------------------------------------------------
   2. CAPA NO TABLET (768–1023)
   A prancha virava uma faixa de vidro e céu: o corte a 32%
   descartava justamente o letreiro e a coroa do prédio, que
   é o que a imagem tem a dizer. Desce o enquadramento e dá
   altura para a leitura.
   ------------------------------------------------------------ */
@media (min-width: 768px) and (max-width: 1023.98px) {
  .hero-v2 .hero-panel-img { object-position: center 52%; }
  .hero-v2 .hero-panel { height: clamp(340px, 46vw, 480px); }
  /* Com o letreiro no quadro, a legenda precisa de base mais firme. */
  .hero-v2 .hero-panel::after {
    background:
      linear-gradient(200deg, rgba(240, 187, 74, 0.05) 0%, transparent 46%),
      linear-gradient(0deg, rgba(15, 17, 22, 0.62) 0%, rgba(15, 17, 22, 0) 34%),
      linear-gradient(180deg, rgba(26, 29, 36, 0.55) 0%, rgba(26, 29, 36, 0) 32%);
  }
}

/* ------------------------------------------------------------
   3. ALVOS DE TOQUE
   Links de rodapé tinham 32px de altura; o número de WhatsApp,
   30px. Mesma mancha visual, área de toque no padrão (44px).
   ------------------------------------------------------------ */
@media (max-width: 767.98px) {
  .footer-list { gap: 0; }
  .footer-list a { min-height: 44px; padding: 6px 0; }
  .footer-legal { gap: var(--space-3) var(--space-4); }
  .footer-legal a { min-height: 44px; display: inline-flex; align-items: center; }
  .whatsapp-number {
    min-height: 44px;
    display: inline-flex;
    align-items: center;
  }
}

/* ------------------------------------------------------------
   4. LINHAS DO EXTRATO
   Cada linha leva a uma página de núcleo, mas o único sinal de
   clique era o numeral mudando de cor. Ganha lavagem de fundo,
   fio dourado à esquerda e seta com curso visível — sem sair
   da sobriedade do demonstrativo.
   ------------------------------------------------------------ */
.ext-link {
  position: relative;
  padding-left: 12px;
  margin-left: -12px;
  transition: background-color var(--duration-base) var(--ease-standard);
}
.ext-link::before {
  content: '';
  position: absolute;
  left: 0;
  top: 6px;
  bottom: 6px;
  width: 2px;
  background: var(--brand-300);
  transform: scaleY(0);
  transform-origin: 50% 0;
  transition: transform var(--duration-moderate) var(--ease-emphasized);
}
@media (hover: hover) and (pointer: fine) {
  a.ext-link:hover { background-color: rgba(240, 187, 74, 0.06); }
  a.ext-link:hover::before { transform: scaleY(1); }
  a.ext-link:hover .ext-go { transform: translateX(7px); }
  a.ext-link:hover .ext-nome { color: var(--brand-700); }
}
a.ext-link:focus-visible::before { transform: scaleY(1); }

@media (prefers-reduced-motion: reduce) {
  .ext-link, .ext-link::before { transition: none; }
}

/* ------------------------------------------------------------
   5. CARTELA "65+"
   Entre três retratos, um retângulo vazado lia como card que
   não carregou. Ganha material (a mesma superfície das outras
   peças escuras), cabeçalho de cartela e fio dourado no topo.
   ------------------------------------------------------------ */
.socio-card--more {
  position: relative;
  justify-content: flex-start;
  gap: 0;
  padding: 24px 22px 22px;
  background:
    linear-gradient(180deg, rgba(245, 242, 236, 0.045) 0%, rgba(245, 242, 236, 0) 46%),
    rgba(255, 255, 255, 0.015);
  border-color: rgba(240, 187, 74, 0.22);
}
.socio-card--more::before {
  content: 'A equipe';
  font-family: var(--font-sans);
  font-size: var(--text-micro);
  font-weight: 500;
  letter-spacing: var(--tracking-widest);
  text-transform: uppercase;
  color: var(--text-inverse-tertiary);
  padding-bottom: 12px;
  margin-bottom: auto;
  border-bottom: 1px solid rgba(245, 242, 236, 0.12);
  align-self: stretch;
}
.socio-card--more .more-num { margin-top: auto; }
.socio-card--more .more-label { margin-top: 6px; }
.socio-card--more .more-cta { margin-top: 18px; }
@media (hover: hover) and (pointer: fine) {
  .socio-card--more:hover {
    border-color: rgba(240, 187, 74, 0.5);
    background:
      linear-gradient(180deg, rgba(240, 187, 74, 0.07) 0%, rgba(245, 242, 236, 0) 52%),
      rgba(255, 255, 255, 0.02);
  }
}

/* ------------------------------------------------------------
   6. RITMO VERTICAL
   Dois pontos em que o ar não tinha função: a entrada da prova
   social (logo depois de uma seção escura densa) e o fecho das
   unidades antes da ponte "próximo passo".
   ------------------------------------------------------------ */
@media (min-width: 1024px) {
  .clientes { padding-top: var(--space-24); }
  .unidades { padding-bottom: var(--space-24); }
}

/* ============================================================
   FLUIDEZ — passe de desempenho (set/2026)
   Nenhum efeito sai de cena; o que muda é o custo de cada quadro.
   ============================================================ */

/* 1. Brilho ambiente do herói: a animação incluía scale(1.04), e
   escala num elemento de 1,2 viewport cheio de gradiente obriga o
   navegador a rasterizar de novo enquanto o usuário rola a capa.
   Só translate → a camada é composta na GPU, sem repintura. */
@keyframes ambient-drift {
  0%   { transform: translate3d(0, 0, 0); }
  100% { transform: translate3d(2%, -1%, 0); }
}

/* 2. Halo do diagrama: animar stroke-width muda a geometria do
   traço e força recálculo do path a cada quadro. Opacidade e
   escala dão o mesmo pulso de graça. */
@keyframes halo-pulse {
  0%, 100% { opacity: 0.15; transform: scale(1); }
  50%      { opacity: 0.45; transform: scale(1.08); }
}

/* 3. Esteira de logos: a animação corria mesmo com a seção fora da
   tela. O observador abaixo marca a seção; aqui ela para. */
.logos-marquee.is-offscreen .logos-track { animation-play-state: paused; }

/* 4. Cena da sede (celular): a foto já vem graduada do arquivo, então o
   filtro CSS sai de cena. Era ele que obrigava o navegador a refiltrar
   a imagem inteira a cada quadro da animação de scroll. */
@media (max-width: 767.98px) {
  .office-story-media img { filter: none; }
}

/* ============================================================
   NAV COM 7 ITENS (entrou "Artigos")
   Entre 1024 e 1200 o menu ficava a ~30px de folga e o CTA
   quebrava em duas linhas. O respiro entre itens diminui nessa
   faixa e o CTA deixa de quebrar.
   ============================================================ */
.nav-cta { white-space: nowrap; }
@media (min-width: 1024px) and (max-width: 1259.98px) {
  .nav-list { gap: var(--space-5); }
  .nav-list a { letter-spacing: -0.012em; }
}

/* ============================================================
   POSICIONAMENTO SEM A FIGURA (set/2026)
   Saiu a prancha dos 11 núcleos. Para o lado direito não ficar
   vazio, o capítulo passa a dividir título e texto em duas
   colunas, alinhadas pelo topo.
   ============================================================ */
.clinica-grid { align-items: start; }
.clinica-col { min-width: 0; }
@media (min-width: 1024px) {
  .clinica-grid { grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); gap: clamp(48px, 6vw, 88px); }
  .clinica-col--texto { padding-top: clamp(8px, 1.6vw, 22px); }
}
.clinica-col--titulo h2 { margin-bottom: 0; max-width: 15ch; }
.clinica-col--texto .lead { margin-bottom: var(--space-6); }
.clinica-col--texto .body-text { max-width: 54ch; }
/* No empilhado, o respiro da grade já separa título e texto. */