/* Menu, topo (hero), parceiros e Forbes. */

/* ── Menu flutuante ── */
.gx-nav { position: fixed; top: 16px; left: 0; right: 0; z-index: 50; display: flex; justify-content: center; padding: 0 var(--gutter); pointer-events: none; }
.gx-nav-bar {
  pointer-events: auto; width: 100%; max-width: 960px; height: 78px;
  display: flex; align-items: center; justify-content: space-between; gap: 24px;
  padding: 0 12px 0 20px; border-radius: 20px;
  background: rgba(250, 250, 250, 0.92); border: 1.5px solid var(--line);
  backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
}
.gx-logo { display: flex; width: 53px; height: 28px; color: var(--muted); }
.gx-logo svg { width: 100%; height: 100%; }
.gx-nav-links { display: flex; gap: 30px; margin-right: auto; margin-left: 36px; }
.gx-nav-links a, .gx-nav-falar { font-size: 14px; font-weight: 500; color: var(--ink); transition: opacity .2s; }
.gx-nav-links a:hover, .gx-nav-falar:hover { opacity: .6; }
.gx-nav-acoes { display: flex; align-items: center; gap: 24px; }
.gx-nav-menu { display: none; width: 44px; height: 44px; border-radius: 12px; border: 1.5px solid var(--line); background: var(--white); cursor: pointer; align-items: center; justify-content: center; }
.gx-nav-menu span { display: block; width: 18px; height: 1.5px; background: var(--ink); position: relative; }
.gx-nav-menu span::before, .gx-nav-menu span::after { content: ""; position: absolute; left: 0; width: 18px; height: 1.5px; background: var(--ink); }
.gx-nav-menu span::before { top: -6px; }
.gx-nav-menu span::after { top: 6px; }
.gx-nav-gaveta { display: none; }

/* ── Topo ── */
.gx-hero { position: relative; padding: 150px 0 110px; overflow: hidden; }
/* Como na goxfranquia.com: texto alinhado a coluna de 1074px do centro e foto
   sangrando ate a borda direita. Sem max-width, senao o recuo (calculado sobre
   a tela inteira) soma com a margem da caixa e empurra tudo pra direita. */
.gx-hero-grid { display: grid; grid-template-columns: minmax(0, 470px) 1fr; gap: clamp(60px, 7vw, 126px); align-items: center; padding-left: max(var(--gutter), calc((100vw - 1074px) / 2)); }
.gx-hero-copy { display: flex; flex-direction: column; align-items: flex-start; }
.gx-hero-selo { display: inline-flex; padding: 6px 14px; border-radius: 100px; border: 1.5px solid var(--line); background: var(--white); font-size: 14px; font-weight: 500; }
.gx-hero h1 { margin-top: 18px; font-family: var(--font-title); font-weight: 500; font-size: 40px; line-height: 44px; letter-spacing: -3.5px; }
.gx-hero-sem { margin-top: 26px; font-family: var(--font-title); font-weight: 500; font-size: 32px; line-height: 1.4; letter-spacing: -1.5px; color: var(--muted); }
.gx-hero-texto { margin-top: 22px; max-width: 440px; font-size: 16px; line-height: 1.7; color: var(--muted); }
.gx-hero .gx-btn { margin-top: 32px; }

.gx-hero-foto { position: relative; height: 640px; }
.gx-hero-fundo { position: absolute; inset: 30px 0 0 0; border-radius: 64px 0 0 64px; overflow: hidden; background: #0e1016; }
.gx-hero-fundo img { width: 100%; height: 100%; object-fit: cover; }
.gx-hero-pessoa { position: absolute; left: 50px; bottom: 0; height: 100%; width: auto; max-width: 80%; object-fit: contain; object-position: bottom left; }
.gx-hero-aviso {
  position: absolute; left: 80px; bottom: 24px; display: flex; align-items: center; gap: 14px;
  padding: 12px 14px; border-radius: 20px; color: #fff;
  background: rgba(40, 40, 46, 0.55); border: 1px solid rgba(255, 255, 255, 0.14);
  backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
}
.gx-hero-aviso img { width: 38px; height: 38px; border-radius: 10px; background: #fff; padding: 4px; }
.gx-hero-aviso strong { display: block; font-size: 16px; font-weight: 600; }
.gx-hero-aviso small { font-size: 15px; font-weight: 500; opacity: .9; }
.gx-hero-hora { align-self: flex-start; margin-left: 16px; font-size: 16px; font-weight: 500; }

/* ── Parceiros ── */
.gx-parceiros { padding: 80px 0 90px; }
.gx-parceiros-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 420px)); justify-content: center; gap: 32px; margin-top: 60px; }
.gx-parceiro { position: relative; aspect-ratio: 1; border-radius: 24px; overflow: hidden; background: #111827; box-shadow: 0 30px 60px -24px rgba(0, 0, 0, 0.35); }
.gx-parceiro img { width: 100%; height: 100%; object-fit: cover; }
.gx-parceiro figcaption { position: absolute; left: 24px; bottom: 24px; color: #fff; }
.gx-parceiro strong { display: block; font-family: var(--font-title); font-size: 26px; font-weight: 600; letter-spacing: -0.52px; line-height: 1.15; }
.gx-parceiro span { font-family: var(--font-title); font-size: 15px; font-weight: 300; letter-spacing: 0.15px; line-height: 1.3; opacity: .85; }

/* ── Forbes ── */
.gx-forbes { padding: 80px 0 40px; }
.gx-forbes-card { margin: 60px auto 0; max-width: 1060px; background: rgb(26, 26, 26); color: #fff; padding: 120px 150px; }
/* Forbes + Valor lado a lado: mesmo card, com respiro e citacao menores pra caber em 2 colunas. */
.gx-forbes-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; max-width: 1060px; margin: 60px auto 0; }
.gx-forbes-grid .gx-forbes-card { margin: 0; max-width: none; padding: 64px 56px; display: flex; flex-direction: column; }
.gx-forbes-grid .gx-forbes-card blockquote { font-size: 24px; line-height: 1.5; }
.gx-forbes-grid .gx-forbes-fonte { margin-top: auto; padding-top: 44px; flex-wrap: wrap; }
.gx-forbes-link { margin-left: auto; font-size: 14px; font-weight: 500; color: rgba(255, 255, 255, .8); border-bottom: 1px solid rgba(255, 255, 255, .3); padding-bottom: 2px; transition: color .2s, border-color .2s; }
.gx-forbes-link:hover { color: #fff; border-color: #fff; }
.gx-forbes-card blockquote { margin: 0; font-family: var(--font-title); font-size: 28px; font-weight: 500; line-height: 1.6; letter-spacing: -0.6px; max-width: 760px; }
.gx-forbes-fonte { display: flex; align-items: center; gap: 14px; margin-top: 54px; }
.gx-forbes-fonte img { width: 54px; height: 54px; border-radius: 50%; background: #000; }
.gx-forbes-fonte strong { display: block; font-size: 16px; font-weight: 600; }
.gx-forbes-fonte span { font-size: 14px; opacity: .85; }

/* ── Celular e tablet ── */
@media (max-width: 991px) {
  .gx-nav-links, .gx-nav-falar { display: none; }
  .gx-nav-menu { display: inline-flex; }
  .gx-nav-bar { height: 64px; padding: 0 10px 0 16px; }
  .gx-nav-bar .gx-btn { min-height: 40px; padding: 8px 14px; font-size: 13px; }
  .gx-nav-gaveta.is-aberta { display: flex; flex-direction: column; gap: 4px; position: fixed; top: 92px; left: var(--gutter); right: var(--gutter); z-index: 49; padding: 12px; border-radius: 20px; background: var(--white); border: 1.5px solid var(--line); box-shadow: var(--pill-shadow); }
  .gx-nav-gaveta a { padding: 12px 10px; font-size: 16px; font-weight: 500; border-radius: 12px; }
  .gx-nav-gaveta a:hover { background: var(--soft); }

  .gx-hero { padding: 120px 0 64px; }
  .gx-hero-grid { grid-template-columns: 1fr; gap: 40px; padding: 0 var(--gutter); }
  .gx-hero h1 { font-size: 36px; line-height: 40px; letter-spacing: -2.4px; }
  .gx-hero-sem { font-size: 26px; }
  .gx-hero-foto { height: 460px; margin-right: calc(var(--gutter) * -1); }
  .gx-hero-pessoa { left: 20px; }
  .gx-hero-aviso { left: 16px; right: 16px; bottom: 16px; }

  .gx-parceiros-grid { grid-template-columns: 1fr; max-width: 420px; margin-left: auto; margin-right: auto; }
  .gx-forbes-card { padding: 56px 28px; }
  .gx-forbes-card blockquote { font-size: 22px; }
  .gx-forbes-grid { grid-template-columns: 1fr; gap: 16px; }
  .gx-forbes-grid .gx-forbes-card { padding: 48px 28px; }
  .gx-forbes-grid .gx-forbes-card blockquote { font-size: 21px; }
  .gx-forbes-grid .gx-forbes-fonte { display: grid; grid-template-columns: 54px minmax(0, 1fr); column-gap: 14px; align-items: center; }
  .gx-forbes-link { grid-column: 1 / -1; justify-self: start; margin: 18px 0 0; }
}
@media (max-width: 420px) {
  .gx-hero-aviso strong { font-size: 14px; }
  .gx-hero-aviso small, .gx-hero-hora { font-size: 13px; }
}

/* Menu some ao descer a pagina e volta ao subir (js/topo.js) */
.gx-nav { transition: transform .35s cubic-bezier(.16, 1, .3, 1); will-change: transform; }
.gx-nav.is-oculto { transform: translateY(calc(-100% - 24px)); }
@media (prefers-reduced-motion: reduce) { .gx-nav { transition: none; } }