/* ══════════════════════════════════════════════════════════════════
   REFINO VISUAL 2026-07 — camada de acabamento das páginas principais
   (index, mentoria, sobre). Linkado DEPOIS do <style> inline de cada
   página, então vence o cascade em especificidade igual.

   Contém: liquid glass da nav pílula, bloco de stats repensado,
   orgânicos discretos do hero e fios de hover nos links textuais.

   Reversão: remover o <link> da página (ou apagar este arquivo).
   ══════════════════════════════════════════════════════════════════ */

/* ── 1. NAV LIQUID GLASS ───────────────────────────────────────────
   Camadas: gradiente interno de reflexo (topo mais claro), highlight
   interno na borda superior (luz batendo no vidro), sombra externa
   macia em duas camadas. Estados distintos via CLASSES (.scrolled,
   .nav-over-light), trocadas pelo listener rAF-throttled já existente
   nas páginas. Nenhum estilo inline contínuo. */
.nav {
  border-radius: var(--r-pill, 999px);
  background:
    linear-gradient(180deg, rgba(255,255,255,.10), rgba(255,255,255,0) 42%),
    linear-gradient(180deg, rgba(28,28,36,.30), rgba(10,10,15,.14));
  backdrop-filter: blur(28px) saturate(180%);
  -webkit-backdrop-filter: blur(28px) saturate(180%);
  border: 1px solid rgba(255,255,255,.20);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.45),
    inset 0 -1px 0 rgba(255,255,255,.05),
    inset 0 0 0 1px rgba(255,255,255,.03),
    0 18px 44px -18px rgba(0,0,0,.48),
    0 2px 8px -2px rgba(0,0,0,.26);
  transition:
    background .35s cubic-bezier(.2,.7,.2,1),
    box-shadow .4s cubic-bezier(.2,.7,.2,1),
    border-color .35s cubic-bezier(.2,.7,.2,1),
    backdrop-filter .35s ease;
}

/* Estado "rolado": vidro mais denso e elevado, fio de luz mais forte */
.nav-wrap.scrolled .nav {
  background:
    linear-gradient(180deg, rgba(255,255,255,.13), rgba(255,255,255,0) 46%),
    linear-gradient(180deg, rgba(20,20,28,.52), rgba(9,9,13,.36));
  border-color: rgba(255,255,255,.28);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.55),
    inset 0 -1px 0 rgba(255,255,255,.06),
    inset 0 0 0 1px rgba(255,255,255,.04),
    0 26px 56px -20px rgba(0,0,0,.62),
    0 3px 12px -3px rgba(0,0,0,.40);
}

/* Estado sobre seção clara: vidro leitoso quente, texto escuro */
.nav.nav-over-light {
  background:
    linear-gradient(180deg, rgba(255,255,255,.55), rgba(255,255,255,0) 52%),
    linear-gradient(180deg, rgba(255,252,246,.62), rgba(255,249,238,.38));
  border-color: rgba(160,122,63,.20);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.85),
    inset 0 -1px 0 rgba(160,122,63,.06),
    0 18px 42px -20px rgba(64,52,28,.25),
    0 2px 10px -3px rgba(64,52,28,.14);
}
.nav-wrap.scrolled .nav.nav-over-light {
  background:
    linear-gradient(180deg, rgba(255,255,255,.62), rgba(255,255,255,0) 55%),
    linear-gradient(180deg, rgba(255,252,246,.78), rgba(255,248,236,.55));
  border-color: rgba(160,122,63,.26);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.9),
    inset 0 -1px 0 rgba(160,122,63,.08),
    0 24px 52px -22px rgba(64,52,28,.30),
    0 3px 12px -3px rgba(64,52,28,.16);
}

/* Fallback digno sem backdrop-filter: vidro vira superfície quase sólida */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .nav { background: rgba(16,16,20,.94); }
  .nav.nav-over-light { background: rgba(250,248,243,.97); }
}

/* Telas pequenas: menos blur (GPU) e sombra mais curta; layout intacto */
@media (max-width: 768px) {
  .nav {
    backdrop-filter: blur(16px) saturate(150%);
    -webkit-backdrop-filter: blur(16px) saturate(150%);
    box-shadow:
      inset 0 1px 0 rgba(255,255,255,.40),
      0 12px 28px -14px rgba(0,0,0,.45),
      0 2px 8px -2px rgba(0,0,0,.25);
  }
}

/* Respiro do menu mobile: canto curvo combinando com a pílula */
.nav-mobile { border-radius: var(--r-lg, 20px); }

/* Links da nav: fio dourado que cresce por baixo no hover */
.nav-links a {
  position: relative;
  padding-bottom: 3px;
}
.nav-links a::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0;
  height: 1px; background: currentColor;
  transform: scaleX(0); transform-origin: left center;
  transition: transform .22s cubic-bezier(.2,.7,.2,1);
}
.nav-links a:hover::after { transform: scaleX(1); }
.nav-links a[aria-current="page"] { border-bottom-color: transparent; }
.nav-links a[aria-current="page"]::after { transform: scaleX(1); background: var(--gold-soft, #d9c8a3); }

/* CTA da nav: pílula curva + brilho no hover */
.nav-cta {
  border-radius: var(--r-pill, 999px);
  box-shadow: 0 3px 12px rgba(160,122,63,.30), inset 0 1px 0 rgba(255,255,255,.22);
  transition: background .2s cubic-bezier(.2,.7,.2,1), border-color .2s cubic-bezier(.2,.7,.2,1), box-shadow .25s cubic-bezier(.2,.7,.2,1), transform .15s cubic-bezier(.2,.7,.2,1);
}
.nav-cta:hover {
  transform: translateY(-1px);
  box-shadow: 0 6px 18px rgba(126,95,49,.42), inset 0 1px 0 rgba(255,255,255,.20);
}
.nav-cta:active { transform: translateY(0); }

/* Botão hambúrguer: canto curvo */
.nav-toggle { border-radius: var(--r-sm, 10px); transition: border-color .2s cubic-bezier(.2,.7,.2,1), color .2s cubic-bezier(.2,.7,.2,1), background .2s cubic-bezier(.2,.7,.2,1); }
.nav-toggle:hover { background: rgba(217,200,163,.10); }

/* ── 2. STATS REPENSADOS ───────────────────────────────────────────
   Saem as colunas com divisórias verticais duras. Entram: números com
   um arco curto dourado de apoio embaixo (linha curva editorial) e
   respiro horizontal, sem nenhuma régua reta. */
.stats-grid { gap: 0 40px; }
.stat-cell { border-left: 0 !important; padding: 8px 28px; }
.stat-cell:first-child { padding-left: 0; }
.stats-grid .stat { position: relative; display: inline-block; padding-bottom: 14px; }
.stats-grid .stat::after {
  content: ""; position: absolute; left: 2px; bottom: 0;
  width: 34px; height: 3px; border-radius: 3px;
  background: linear-gradient(90deg, var(--gold, #a07a3f), rgba(160,122,63,0));
}
@media (max-width: 640px) {
  .stats-grid { gap: 28px 0; }
  .stat-cell { border-top: 0 !important; padding: 0 !important; }
}

/* ── 3. ORGÂNICOS DO HERO ──────────────────────────────────────────
   Glow dourado vem do cca-system (.sec-dark::before/::after). Aqui só
   o avatar ganha um anel quente suave. */
.avatar-sm { box-shadow: 0 0 0 3px rgba(217,200,163,.12); }

/* ── 4. FIOS DE HOVER EM LINKS TEXTUAIS ────────────────────────────
   cta-links e footer: sublinhado que cresce, sem mudar cor base. */
.cta-links a {
  border-bottom: 0; padding-bottom: 3px;
  background: linear-gradient(currentColor, currentColor) left bottom / 0% 1px no-repeat;
  transition: background-size .25s cubic-bezier(.2,.7,.2,1), color .2s cubic-bezier(.2,.7,.2,1);
}
.cta-links a:hover { background-size: 100% 1px; }
.footer-links a {
  background: linear-gradient(currentColor, currentColor) left bottom / 0% 1px no-repeat;
  padding-bottom: 2px;
  transition: background-size .25s cubic-bezier(.2,.7,.2,1), color .18s cubic-bezier(.2,.7,.2,1);
}
.footer-links a:hover { background-size: 100% 1px; }

/* Chips: curva total + hover que respira */
.chip {
  border-radius: var(--r-pill, 999px);
  transition: border-color .2s cubic-bezier(.2,.7,.2,1), color .2s cubic-bezier(.2,.7,.2,1), background .2s cubic-bezier(.2,.7,.2,1);
}
.chip:hover { border-color: var(--accent-gold, #a07a3f); color: var(--text); background: rgba(160,122,63,.06); }

/* Tópicos: a régua superior ganha vida no hover (fio dourado) */
.topic { position: relative; transition: background .2s cubic-bezier(.2,.7,.2,1); }
.topic::before {
  content: ""; position: absolute; top: -1px; left: 0; height: 1px; width: 100%;
  background: linear-gradient(90deg, var(--accent-gold, #a07a3f), transparent 70%);
  transform: scaleX(0); transform-origin: left center;
  transition: transform .3s cubic-bezier(.2,.7,.2,1);
}
.topic:hover::before { transform: scaleX(1); }

/* ── 5. REDUCED MOTION ───────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  .nav, .nav-cta, .chip, .topic::before, .nav-links a::after,
  .cta-links a, .footer-links a { transition: none; }
  .nav-cta:hover { transform: none; }
  .topic:hover::before, .nav-links a:hover::after { transform: scaleX(1); }
}


/* ── Fix overflow mobile (pré-existente, consertado 23/07/2026): em <=520px a
   barra (brand + CTA lista de espera + hambúrguer) media ~403px. brand-sub sai,
   CTA comprime, botões do hero podem quebrar linha. Zero mudança de copy. ── */
@media (max-width: 520px) {
  .nav-wrap .nav { padding: 9px 10px 9px 14px; gap: 8px; }
  .nav-wrap .brand-sub { display: none; }
  .nav-wrap .nav-cta { padding: 9px 12px; font-size: 10px; letter-spacing: .05em; }
  .hero-actions a, .section-cta a, .cta-gold, .cta-light, .cta-terra { white-space: normal; text-align: center; max-width: 100%; box-sizing: border-box; }
}