/* =========================================================
   TEMA CLARO — histórias de sucesso
   Carregado só nestas páginas (page['css']), depois do fuse.css.

   A paleta não é nova: são os mesmos tons da dobra clara do bloco Método
   (.s-msys), que já é o "claro" desta marca. Aqui eles sobem para o nível do
   documento, então todo o CSS que usa os tokens (--bg, --ink, --line…) se
   adapta sozinho. O que precisa de regra explícita abaixo é só o que tem cor
   cravada no fuse.css — decoração escura pensada para o fundo #030208.
   ========================================================= */

body.page-historia,
body.page-historias {
  --bg:     #f7f5fc;
  --bg-2:   #efebf8;
  --bg-3:   #e8e3f4;

  --ink:    #191636;  /* era #f3f1ff */
  --ink-2:  #4c4869;
  /* Um tom mais escuro que o #78748f da dobra clara: aqui o token carrega os
     rótulos de 10–11px da ficha e dos cards, e nesse tamanho 4.14:1 não passa
     no mínimo de 4.5:1. Com #6a6685 fica em 4.9:1. */
  --ink-3:  #6a6685;

  --line:   rgba(25, 22, 54, 0.10);
  --line-2: rgba(25, 22, 54, 0.16);

  /* O violeta escurece: #A9A8EE tem contraste insuficiente sobre claro. */
  --violet-1: #5E43CA;

  --shadow-neon:
    0 0 0 1px rgba(94, 67, 202, 0.12),
    0 18px 60px -24px rgba(94, 67, 202, 0.35);

  background:
    radial-gradient(60% 40% at 50% 0%, rgba(122, 116, 230, 0.10), transparent 60%),
    linear-gradient(180deg, #f7f5fc 0%, #efebf8 100%);
  background-attachment: fixed;
  color: var(--ink);
}

/* ---------- Decoração escura que não cabe no claro ---------- */

/* Orbs são manchas de luz para fundo preto; no claro viram sujeira cinza. */
body.page-historia .orb,
body.page-historias .orb { display: none; }

/* O overlay do hero existe para escurecer a base da imagem. Sem imagem de
   fundo escura, ele só cobriria a página de preto. */
body.page-historia .hero-overlay,
body.page-historia .hero-grain,
body.page-historias .hero-overlay,
body.page-historias .hero-grain { display: none; }

body.page-historias .page-hero::after,
body.page-historia .historia-hero::after {
  background: radial-gradient(55% 55% at 25% 35%, rgba(122, 116, 230, 0.12), transparent 70%);
}

/* ---------- Navegação ---------- */
/* A pílula da nav só recebe tratamento claro nas variantes que a mantêm; a
   `logo` já a dispensa por completo no fuse.css. */
body.page-historia .nav:not(.nav--logo) .nav-inner,
body.page-historias .nav:not(.nav--logo) .nav-inner {
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.86), rgba(255, 255, 255, 0.62));
  border-color: rgba(25, 22, 54, 0.10);
  box-shadow: 0 18px 50px -24px rgba(25, 22, 54, 0.28), inset 0 1px 0 rgba(255, 255, 255, 0.8);
}

/* A única logo em arquivo é a negativa (branca) — some no claro. O filtro a
   escurece preservando a transparência. Trocar por uma logo positiva quando
   existir: aí é só apagar esta regra. */
body.page-historia .logo,
body.page-historias .logo { filter: brightness(0) saturate(100%); opacity: .88; }

/* ---------- Superfícies ---------- */
body.page-historia .historia-metrica,
body.page-historias .historia-metrica {
  background: rgba(255, 255, 255, 0.72);
  border-color: rgba(25, 22, 54, 0.08);
}

body.page-historia .historia-card,
body.page-historias .historia-card {
  background: rgba(255, 255, 255, 0.72);
  border-color: rgba(25, 22, 54, 0.08);
}
body.page-historia .historia-card:hover,
body.page-historias .historia-card:hover { border-color: rgba(94, 67, 202, 0.35); }

body.page-historia .historia-depoimento,
body.page-historias .historia-depoimento {
  background: linear-gradient(135deg, rgba(122, 116, 230, 0.10), rgba(94, 67, 202, 0.08));
  border-color: rgba(94, 67, 202, 0.18);
}

body.page-historia .historia-links a:hover,
body.page-historias .historia-links a:hover { background: rgba(25, 22, 54, 0.04); }

/* O badge nasce de um gradiente translúcido claro sobre preto — no claro
   precisa de mais corpo para não sumir. */
body.page-historia .badge,
body.page-historias .badge {
  background: linear-gradient(135deg, rgba(122, 116, 230, 0.16), rgba(94, 67, 202, 0.14));
  border-color: rgba(94, 67, 202, 0.20);
  color: #2b2555;
}

/* ---------- Rodapé ---------- */
body.page-historia footer,
body.page-historias footer {
  background: rgba(255, 255, 255, 0.55);
  border-top-color: rgba(25, 22, 54, 0.08);
}
body.page-historia .footer-bg,
body.page-historias .footer-bg {
  background-image:
    linear-gradient(rgba(25, 22, 54, 0.045) 1px, transparent 1px),
    linear-gradient(90deg, rgba(25, 22, 54, 0.045) 1px, transparent 1px);
}
body.page-historia footer .logo,
body.page-historias footer .logo,
body.page-historia .foot-brand .brand,
body.page-historias .foot-brand .brand { filter: brightness(0) saturate(100%); opacity: .88; }

body.page-historia .foot-col h4,
body.page-historias .foot-col h4 { color: rgba(25, 22, 54, 0.65); }

/* ---------- Detalhes ---------- */
body.page-historia ::selection,
body.page-historias ::selection { background: rgba(94, 67, 202, 0.22); color: #191636; }

/* O retrato do fechamento é PNG recortado sobre fundo escuro. No claro a
   sombra sob ele evita a sensação de recorte flutuando. */
body.page-historia .final-visual img,
body.page-historias .final-visual img { filter: drop-shadow(0 30px 50px rgba(25, 22, 54, 0.22)); }