/* ══════════════════════════════════════════════════════════════════
   VANDER TECHFIT — HUB
   Escuro sóbrio · ouro para o fluxo do profissional autônomo ·
   steel exclusivamente para a ramificação B2B (IDGym).
   Elemento-assinatura: o fio, que desce a página e se bifurca no B2B.
   ══════════════════════════════════════════════════════════════════ */

/* ─────────── fontes (self-hosted, subset PT-BR) ─────────── */

@font-face {
  font-family: "Archivo";
  src: url("assets/fonts/archivo.woff2") format("woff2");
  font-weight: 400 800;
  font-stretch: 75% 125%;
  font-display: swap;
}
@font-face {
  font-family: "InterVF";
  src: url("assets/fonts/inter.woff2") format("woff2");
  font-weight: 400 700;
  font-display: swap;
}
@font-face {
  font-family: "JBMono";
  src: url("assets/fonts/mono.woff2") format("woff2");
  font-weight: 400 600;
  font-display: swap;
}

/* ─────────── tokens ─────────── */

:root {
  --noir: #0F1110;
  --carbon: #161917;
  --carbon-hi: #1C201E;

  --gold: #E3CB3C;
  --gold-deep: #8A7A1E;

  --bone: #EDEFE7;
  /* --mist: texto sobre painel (superfície clareada) — mínimo 6,7:1
     --sage: texto sobre o fundo da página — mínimo 5,0:1
     Não trocar um pelo outro: --sage sobre painel cai para 4,0:1. */
  --mist: #A8AEA1;
  --sage: #7E8577;

  --steel: #6E8CA0;

  --f-display: "Archivo", system-ui, sans-serif;
  --f-body: "InterVF", system-ui, sans-serif;
  --f-mono: "JBMono", ui-monospace, "SF Mono", monospace;

  --ease: cubic-bezier(0.2, 0.65, 0.3, 1);
  --rail: 34px;
  --measure: 700px;
}

/* ─────────── base ─────────── */

* { margin: 0; padding: 0; box-sizing: border-box; }

[hidden] { display: none !important; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
}

body {
  min-height: 100dvh;
  background: var(--noir) url("assets/bg-texture.webp") repeat;
  color: var(--bone);
  font-family: var(--f-body);
  font-size: 15px;
  line-height: 1.6;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
}

main { position: relative; z-index: 1; }

/* Sem border-radius aqui: os cards já têm raio próprio (16px) e o
   outline moderno acompanha o raio do elemento. Forçar 8px fazia os
   cantos do card mudarem de forma no momento do foco. */
a:focus-visible,
.btn:focus-visible {
  outline: 2px solid var(--gold);
  outline-offset: 4px;
}

/* ─────────── ambiência (estática, sem animação) ─────────── */

.ambience {
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background:
    radial-gradient(780px 540px at 50% -8%, rgba(227, 203, 60, 0.085), transparent 62%),
    radial-gradient(620px 620px at 106% 60%, rgba(110, 140, 160, 0.05), transparent 60%);
}

/* ═══════════════ HERÓI ═══════════════ */

.hero {
  position: relative;
  overflow: hidden;
  padding: 92px 24px 56px;
  text-align: center;
}

.hero__arc,
.hero__horizon {
  position: absolute;
  left: 50%;
  top: 154px;
  width: 3600px;
  height: 3600px;
  transform: translateX(-50%);
  border-radius: 50%;
  pointer-events: none;
}

.hero__arc {
  background: linear-gradient(180deg, #1B1D1C 0%, #171918 160px, var(--noir) 420px);
  box-shadow: 0 -40px 80px rgba(0, 0, 0, 0.45);
}

/* fio dourado que corre o horizonte e passa atrás da foto */
.hero__horizon { border: 1px solid rgba(227, 203, 60, 0.28); }

.halo {
  position: relative;
  z-index: 1;
  display: grid;
  place-items: center;
  width: 174px;
  height: 174px;
  margin: 0 auto;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.055);
  -webkit-backdrop-filter: blur(14px) saturate(140%);
  backdrop-filter: blur(14px) saturate(140%);
  border: 1px solid rgba(255, 255, 255, 0.16);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.22),
    0 18px 50px rgba(0, 0, 0, 0.55),
    0 0 60px rgba(227, 203, 60, 0.12);
}

/* anel dourado em degradê — preservado da versão anterior */
.halo::after {
  content: "";
  position: absolute;
  width: 158px;
  height: 158px;
  border-radius: 50%;
  background: conic-gradient(
    from 200deg,
    rgba(227, 203, 60, 0.95) 0deg,
    rgba(227, 203, 60, 0.55) 60deg,
    rgba(227, 203, 60, 0.08) 145deg,
    rgba(227, 203, 60, 0) 195deg,
    rgba(227, 203, 60, 0.3) 265deg,
    rgba(227, 203, 60, 0.95) 360deg
  );
  -webkit-mask: radial-gradient(circle, transparent 0 76px, #000 76.5px);
  mask: radial-gradient(circle, transparent 0 76px, #000 76.5px);
  pointer-events: none;
}

.halo__img {
  width: 150px;
  height: 150px;
  border-radius: 50%;
  object-fit: cover;
  box-shadow: 0 8px 26px rgba(0, 0, 0, 0.5);
}

.hero__id {
  position: relative;
  z-index: 1;
  margin-top: 22px;
  font-family: var(--f-mono);
  font-size: 11px;
  font-weight: 400;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--sage);
}
.hero__id span { color: var(--gold); }

.hero__claim {
  position: relative;
  z-index: 1;
  display: grid;
  gap: 9px;
  max-width: 470px;
  margin: 26px auto 0;
  font-weight: 400;
}

.hero__claim-a {
  font-family: var(--f-display);
  font-weight: 400;
  font-size: clamp(17px, 4.6vw, 21px);
  line-height: 1.3;
  color: var(--sage);
}

.hero__claim-b {
  font-family: var(--f-display);
  font-weight: 700;
  font-stretch: 112%;
  font-size: clamp(23px, 6.2vw, 32px);
  line-height: 1.17;
  letter-spacing: -0.022em;
  color: var(--bone);
}

/* ═══════════════ GRADE + FIO ═══════════════ */

.page {
  position: relative;
  display: grid;
  grid-template-columns: var(--rail) minmax(0, 1fr);
  align-content: start;
  width: min(var(--measure), 100%);
  margin-inline: auto;
  padding: 8px 20px 0 18px;
}

.thread {
  grid-column: 1;
  grid-row: 1 / -1;
  position: relative;
}

.thread > span {
  position: absolute;
  left: 50%;
  width: 1px;
}

.thread__base {
  top: 0;
  bottom: 0;
  transform: translateX(-50%);
  background: linear-gradient(
    180deg,
    transparent 0,
    var(--gold-deep) 40px,
    var(--gold-deep) calc(100% - 30px),
    transparent 100%
  );
  opacity: 0.5;
}

.thread__lit {
  top: 0;
  height: 100%;
  transform: translateX(-50%) scaleY(var(--p, 0));
  transform-origin: 50% 0;
  background: var(--gold);
  opacity: 0.7;
}

.thread__head {
  top: 0;
  width: 7px;
  height: 7px;
  margin-left: -3.5px;
  border-radius: 50%;
  background: var(--gold);
  box-shadow: 0 0 12px 1px rgba(227, 203, 60, 0.55);
  transform: translateY(var(--py, 0px));
  opacity: var(--head-o, 0);
}

/* nó de cada seção, cravado no fio */
.block {
  grid-column: 2;
  position: relative;
  margin-bottom: 58px;
}
.block:last-child { margin-bottom: 0; }

.block::before {
  content: "";
  position: absolute;
  top: 11px;
  left: calc(var(--rail) / -2);
  transform: translateX(-50%);
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--noir);
  border: 1px solid var(--gold-deep);
  z-index: 2;
  transition: background 0.45s ease, border-color 0.45s ease, box-shadow 0.45s ease;
}

.block.is-in::before {
  background: var(--gold);
  border-color: var(--gold);
  box-shadow: 0 0 10px rgba(227, 203, 60, 0.5);
}

/* ─────────── rubrica (eyebrow) ─────────── */

.rubric {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
  margin-bottom: 18px;
  font-weight: 400;
}

.rubric__label {
  font-family: var(--f-mono);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--gold);
}

.rubric--steel .rubric__label { color: var(--steel); }

.badge {
  font-family: var(--f-mono);
  font-size: 11px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--mist);
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: 999px;
  padding: 4px 10px;
  line-height: 1;
}

/* ═══════════════ 1 · MINICURSO ═══════════════ */

.start__panel {
  position: relative;
  overflow: hidden;
  border-radius: 20px;
  padding: 30px 26px 32px;
  background:
    radial-gradient(120% 150% at 0% 0%, rgba(227, 203, 60, 0.10), transparent 58%),
    linear-gradient(180deg, var(--carbon-hi), var(--carbon));
  border: 1px solid rgba(227, 203, 60, 0.20);
  box-shadow:
    0 26px 64px -30px rgba(0, 0, 0, 0.95),
    inset 0 1px 0 rgba(255, 255, 255, 0.06);
}

.start__panel::before {
  content: "";
  position: absolute;
  inset: 0 0 auto;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(227, 203, 60, 0.7) 22%, rgba(227, 203, 60, 0.14) 72%, transparent);
}

.start__title {
  font-family: var(--f-display);
  font-weight: 700;
  font-stretch: 108%;
  font-size: clamp(25px, 6.2vw, 33px);
  line-height: 1.14;
  letter-spacing: -0.022em;
  color: var(--bone);
}

.start__lede {
  margin-top: 15px;
  max-width: 46ch;
  font-size: 15.5px;
  line-height: 1.62;
  color: var(--mist);
}

.start__meta {
  margin-top: 20px;
  font-family: var(--f-mono);
  font-size: 11.5px;
  letter-spacing: 0.1em;
  color: var(--gold);
}

.btn {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  margin-top: 22px;
  padding: 13px 22px;
  border-radius: 10px;
  background: var(--gold);
  color: #14150F;
  font-family: var(--f-mono);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  text-decoration: none;
  transition: background 0.22s ease, box-shadow 0.22s ease;
}
.btn:hover { background: #EFD84F; box-shadow: 0 12px 28px -12px rgba(227, 203, 60, 0.7); }
.btn svg { width: 15px; height: 15px; }

/* ═══════════════ 2 · ASSISTENTES (GPTs) ═══════════════ */

.tiles {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
  gap: 12px;
}

.tile {
  display: block;
  padding: 18px 18px 16px;
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.028);
  border: 1px solid rgba(255, 255, 255, 0.085);
  text-decoration: none;
  transition: border-color 0.28s ease, background 0.28s ease;
}

.tile[data-state="soon"] { cursor: default; }
.tile[data-state="live"]:hover {
  border-color: rgba(227, 203, 60, 0.4);
  background: rgba(227, 203, 60, 0.05);
}

.tile__name {
  display: block;
  font-family: var(--f-display);
  font-weight: 600;
  font-size: 16.5px;
  line-height: 1.3;
  color: var(--bone);
}

.tile__desc {
  display: block;
  margin-top: 7px;
  font-size: 14px;
  line-height: 1.55;
  color: var(--mist);
}

.tile__state {
  display: block;
  margin-top: 12px;
  font-family: var(--f-mono);
  font-size: 11px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--mist);
}
.tile[data-state="live"] .tile__state { color: var(--gold); }

/* ═══════════════ 3 · ROTAS ═══════════════ */

.routes > .route { margin-top: 14px; }

.route {
  position: relative;
  display: grid;
  align-items: center;
  gap: 20px;
  padding: 22px;
  border-radius: 16px;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.035), rgba(255, 255, 255, 0.014));
  border: 1px solid rgba(255, 255, 255, 0.09);
  text-decoration: none;
  transition: border-color 0.28s var(--ease), background 0.28s var(--ease), box-shadow 0.28s var(--ease);
}

.route--media { grid-template-columns: minmax(0, 1fr) auto; }

/* espelhado: a coluna elástica também troca de lado, senão o texto
   cai na coluna `auto` e estoura a largura da página */
.route--flip { grid-template-columns: auto minmax(0, 1fr); }
.route--flip .route__body { order: 2; }
.route--flip .route__object { order: 1; }

/* ── rota "pessoa" ──────────────────────────────────────────────
   Este card não leva a um produto, leva a mim. A fotografia ocupa
   a mesma função visual da mídia dos outros dois cards, mas sangra
   até as bordas e se dissolve no escuro — sem borda dura entre
   texto e foto. Superfície segue sem preenchimento, só o fio de 1px.
   ─────────────────────────────────────────────────────────────── */
.route--person {
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: stretch;
  overflow: hidden;
  background: none;
  border-color: rgba(255, 255, 255, 0.13);
}

.route__portrait {
  position: relative;
  display: block;
  width: 128px;
  align-self: stretch;
  overflow: hidden;
  /* cancela o padding do card para a foto encostar nas bordas */
  margin: -22px -22px -22px 0;
  /* a máscara vive no contêiner, não na imagem: assim a transição
     fica parada enquanto a foto escala no hover */
  -webkit-mask-image: linear-gradient(to right, transparent 0%, rgba(0, 0, 0, 0.45) 30%, #000 78%);
  mask-image: linear-gradient(to right, transparent 0%, rgba(0, 0, 0, 0.45) 30%, #000 78%);
}

.route__portrait img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 58% 16%;
  /* leve, só para assentar no card — o rosto continua claro
     e o croma da pele não é tocado */
  filter: contrast(1.04) brightness(0.98);
  transition: transform 0.6s var(--ease);
}

/* Escurecimento posicional: baixa o suéter claro e aprofunda a borda
   direita, sem alcançar o rosto. É sombra na cor do fundo, não efeito. */
.route__portrait::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    linear-gradient(to top, rgba(15, 17, 16, 0.86) 0%, rgba(15, 17, 16, 0.46) 24%, transparent 50%),
    linear-gradient(to left, rgba(15, 17, 16, 0.42) 0%, transparent 40%);
}

.route:hover .route__portrait img { transform: scale(1.04); }

.route:hover,
.route:focus-visible {
  border-color: rgba(227, 203, 60, 0.42);
  background: linear-gradient(180deg, rgba(227, 203, 60, 0.055), rgba(255, 255, 255, 0.016));
  box-shadow: 0 20px 48px -28px rgba(0, 0, 0, 0.95), inset 0 1px 0 rgba(227, 203, 60, 0.14);
}

.route__body { display: block; }

.route__problem {
  display: block;
  font-family: var(--f-display);
  font-weight: 500;
  font-size: clamp(17px, 4.4vw, 20px);
  line-height: 1.3;
  letter-spacing: -0.012em;
  color: var(--bone);
}

.route__answer {
  display: block;
  margin-top: 10px;
  font-size: 14.5px;
  line-height: 1.6;
  color: var(--mist);
}

.route__note {
  display: block;
  margin-top: 8px;
  font-family: var(--f-mono);
  font-size: 11.5px;
  letter-spacing: 0.04em;
  color: var(--mist);
}

.route__tag {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  margin-top: 14px;
  font-family: var(--f-mono);
  font-size: 11.5px;
  font-weight: 500;
  letter-spacing: 0.11em;
  text-transform: uppercase;
  color: var(--gold);
}
.route__tag svg { width: 14px; height: 14px; transition: transform 0.28s var(--ease); }
.route:hover .route__tag svg { transform: translateX(3px); }

/* ── objeto: carrossel do SequenceFit (peça real do produto) ── */

.route__object--carousel {
  display: block;
  width: 104px;
  overflow: hidden;
  border-radius: 11px;
  border: 1px solid rgba(255, 255, 255, 0.13);
  box-shadow: 0 16px 34px -16px rgba(0, 0, 0, 0.95);
}

.route__object--carousel video {
  display: block;
  width: 100%;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  object-position: center 8%;
  background: #0B0C0B;
  transition: transform 0.6s var(--ease);
}
.route:hover .route__object--carousel video { transform: scale(1.05); }

/* ── objeto: leque de páginas reais da IA7 ── */

.route__object--pages {
  display: block;
  position: relative;
  width: 122px;
  height: 138px;
  flex: none;
}

.route__object--pages img {
  position: absolute;
  top: 14px;
  width: 66px;
  height: 108px;
  object-fit: cover;
  object-position: top center;
  border-radius: 7px;
  border: 1px solid rgba(255, 255, 255, 0.15);
  box-shadow: 0 12px 26px -12px rgba(0, 0, 0, 0.95);
  transition: transform 0.42s var(--ease);
}

.route__object--pages img:nth-child(1) { left: 0;    transform: rotate(-8deg); }
.route__object--pages img:nth-child(2) { left: 28px; top: 4px; z-index: 2; }
.route__object--pages img:nth-child(3) { left: 56px; transform: rotate(8deg); }

.route:hover .route__object--pages img:nth-child(1) { transform: rotate(-12deg) translate(-5px, -3px); }
.route:hover .route__object--pages img:nth-child(3) { transform: rotate(12deg) translate(5px, -3px); }

/* ═══════════════ 4 · BIFURCAÇÃO B2B ═══════════════ */

.branchwrap {
  position: relative;
  display: grid;
  grid-template-columns: var(--rail) minmax(0, 1fr);
  width: min(var(--measure), 100%);
  margin-inline: auto;
  padding: 0 20px 0 18px;
}

/* o fio se abre: desce e curva para dentro do território B2B */
.fork {
  grid-column: 1 / -1;
  width: 27px;
  height: 52px;
  margin-left: calc(var(--rail) / 2);
  border-left: 1px solid var(--steel);
  border-bottom: 1px solid var(--steel);
  border-bottom-left-radius: 16px;
  opacity: 0.5;
}

.branch {
  grid-column: 2;
  max-width: 94%;
  padding-top: 14px;
}

.b2b {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 16px;
  align-items: start;
  padding: 20px;
  border-radius: 14px;
  background: linear-gradient(180deg, rgba(110, 140, 160, 0.06), rgba(110, 140, 160, 0.02));
  border: 1px solid rgba(110, 140, 160, 0.22);
  text-decoration: none;
  transition: border-color 0.28s var(--ease), background 0.28s var(--ease);
}

.b2b:hover,
.b2b:focus-visible {
  border-color: rgba(110, 140, 160, 0.5);
  background: linear-gradient(180deg, rgba(110, 140, 160, 0.1), rgba(110, 140, 160, 0.03));
}

.b2b__mark { display: block; width: 36px; height: 36px; color: var(--steel); }
.b2b__mark svg { width: 100%; height: 100%; }

.b2b__title {
  display: block;
  font-family: var(--f-display);
  font-weight: 600;
  font-size: 18px;
  line-height: 1.26;
  letter-spacing: -0.01em;
  color: var(--bone);
}

.b2b__desc {
  display: block;
  margin-top: 9px;
  font-size: 14px;
  line-height: 1.58;
  color: var(--mist);
}

.b2b__tag {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  margin-top: 13px;
  font-family: var(--f-mono);
  font-size: 11.5px;
  font-weight: 500;
  letter-spacing: 0.11em;
  text-transform: uppercase;
  color: var(--steel);
}
.b2b__tag svg { width: 13px; height: 13px; transition: transform 0.28s var(--ease); }
.b2b:hover .b2b__tag svg { transform: translateX(3px); }

/* ═══════════════ RODAPÉ ═══════════════ */

.footer {
  text-align: center;
  padding: 72px 22px calc(40px + env(safe-area-inset-bottom));
}

.footer p {
  font-family: var(--f-mono);
  font-size: 12px;
  letter-spacing: 0.1em;
  color: var(--sage);
}
/* padding vertical só para engordar o alvo de toque no celular —
   não muda o desenho, o link é inline */
.footer a {
  display: inline-block;
  padding: 5px 3px;
  margin: -5px -3px;
  color: var(--gold);
  text-decoration: none;
}
.footer a:hover { text-decoration: underline; }

/* seletor precisa casar a especificidade de `.footer p`, senão o
   tamanho abaixo é ignorado */
.footer .footer__fine {
  margin-top: 9px;
  font-size: 11px;
  letter-spacing: 0.03em;
}

/* ═══════════════ REVELAÇÃO ═══════════════ */

.js [data-reveal] {
  opacity: 0;
  transform: translateY(14px);
  transition:
    opacity 0.52s var(--ease),
    transform 0.52s var(--ease);
  transition-delay: calc(var(--i, 0) * 60ms);
}

.js [data-reveal].is-in {
  opacity: 1;
  transform: none;
}

/* ═══════════════ MOBILE ═══════════════ */

@media (max-width: 560px) {
  :root { --rail: 26px; }

  .hero { padding: 74px 20px 46px; }
  .hero__arc, .hero__horizon { top: 132px; }

  .halo { width: 152px; height: 152px; }
  .halo::after {
    width: 138px;
    height: 138px;
    -webkit-mask: radial-gradient(circle, transparent 0 66px, #000 66.5px);
    mask: radial-gradient(circle, transparent 0 66px, #000 66.5px);
  }
  .halo__img { width: 130px; height: 130px; }

  .hero__id { font-size: 11px; letter-spacing: 0.14em; margin-top: 18px; }

  .page, .branchwrap { padding-inline: 14px 16px; }

  .block { margin-bottom: 46px; }

  .start__panel { padding: 24px 20px 26px; border-radius: 17px; }

  /* Nada de reduzir corpo de texto no celular: o painel ganha ar,
     a tipografia não encolhe. */
  .route { padding: 18px; gap: 14px; }

  .route__object--carousel { width: 88px; }

  /* retrato menor no celular: o texto continua sendo a prioridade */
  .route__portrait { width: 88px; margin: -18px -18px -18px 0; }
  .route__portrait img { object-position: 48% 16%; }

  .route__object--pages { width: 92px; height: 112px; }
  .route__object--pages img { width: 50px; height: 84px; }
  .route__object--pages img:nth-child(2) { left: 21px; }
  .route__object--pages img:nth-child(3) { left: 42px; }

  .b2b { padding: 17px; gap: 13px; }
  .b2b__mark { width: 30px; height: 30px; }

  .footer { padding-top: 56px; }
}

/* ═══════════════ MOVIMENTO REDUZIDO ═══════════════ */

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }

  /* o fio nasce aceso por inteiro; o ponto de luz não existe */
  .thread__lit { --p: 1; }
  .thread__head { display: none; }

  .js [data-reveal] {
    opacity: 1;
    transform: none;
    transition: none;
  }

  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}