/* ─────────────────────────────────────────────────────────────
   Tema Fulcrum IA — regras próprias do WordPress.

   O que o React resolvia medindo a janela, aqui resolve o CSS.
   Ponto de virada do layout: 1000px, o mesmo do design.
   ───────────────────────────────────────────────────────────── */

/* Os blocos do design trazem `display` no atributo style, que vence uma regra
   comum — por isso a visibilidade do menu precisa de !important para valer. */
.fx-menu-btn,
.fx-menu-panel { display: none !important; }

@media (max-width: 999px) {
  .fx-nav-desktop,
  .fx-cta-desktop { display: none !important; }

  .fx-menu-btn { display: grid !important; }
  .fx-menu-panel[hidden] { display: none !important; }
  .fx-menu-panel:not([hidden]) { display: flex !important; }

  /* Soluções: o olho de IA sobe para o topo e as trilhas descem pela esquerda. */
  .fx-org-grid { grid-template-columns: minmax(0, 1fr) !important; }
  .fx-org-grid [data-org-core] { order: -1 !important; }
  .fx-org-col { padding-left: 30px !important; }

  /* Antes e depois do caso, e o método: uma coluna. */
  .fx-cmp-grid,
  .fx-method-grid { grid-template-columns: minmax(0, 1fr) !important; }

  /* O reator não cabe numa coluna só. */
  .fx-reactor-col { display: none !important; }
}

/* Alvos de toque com no mínimo 44px, como manda o design. */
@media (hover: none) {
  .fx-menu-panel a { min-height: 44px; }
}

/* O iframe do vídeo entra no lugar da capa, no mesmo enquadramento. */
.fx-video-frame { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }

/* ── Páginas comuns (Política de Privacidade e afins) ──────────
   A landing page traz o próprio estilo inteiro; estas não. */
body { margin: 0; background: #050505; }

.fx-pagina-interna {
  min-height: 100vh;
  background: #050505;
  color: rgba(255, 255, 255, .78);
  font-family: 'Inter', ui-sans-serif, system-ui, sans-serif;
  font-size: 16px;
  line-height: 1.7;
  padding: 96px max(22px, 5vw) 120px;
}

.fx-interna-wrap { max-width: 760px; margin: 0 auto; }

.fx-voltar {
  display: inline-block;
  margin-bottom: 40px;
  font-size: 14px;
  color: #d4af37;
  text-decoration: none;
}
.fx-voltar:hover { color: #f0d77a; }

.fx-pagina-interna h1 {
  margin: 0 0 32px;
  font-size: clamp(32px, 4.5vw, 50px);
  font-weight: 800;
  line-height: 1.05;
  letter-spacing: -.04em;
  color: #fff;
  text-wrap: balance;
}

.fx-conteudo h2 {
  margin: 48px 0 14px;
  font-size: clamp(21px, 2.4vw, 27px);
  font-weight: 700;
  letter-spacing: -.02em;
  color: #fff;
}

.fx-conteudo h3 { margin: 32px 0 10px; font-size: 18px; font-weight: 600; color: #fff; }
.fx-conteudo p, .fx-conteudo li { margin: 0 0 14px; }
.fx-conteudo ul, .fx-conteudo ol { padding-left: 22px; }
.fx-conteudo a { color: #d4af37; }
.fx-conteudo a:hover { color: #f0d77a; }
.fx-conteudo strong { color: #fff; }

.fx-pagina-interna :focus-visible { outline: 2px solid #d4af37; outline-offset: 3px; }