/* ==========================================================================
   MUNI — PÁGINAS DE CAPTURA (variações curta/longa)
   Componentes novos que estendem o design system original (style.css),
   reutilizando os mesmos tokens, fontes, easings e padrões de motion.
   ========================================================================== */

/* ---------- Hero dividido (versão curta): texto à esquerda, captura à direita ---------- */
.hero--split .hero__inner {
  display: grid;
  grid-template-columns: 1.08fr .92fr;
  gap: clamp(40px, 5vw, 84px);
  align-items: center;
}
@media (max-width: 1020px) {
  .hero--split .hero__inner { grid-template-columns: 1fr; }
}
.hero--split .hero__title { font-size: clamp(38px, 4.9vw, 78px); }
.hero--split .hero__sub { max-width: 52ch; }
.hero--split .countdown { margin-top: 40px; }

/* ---------- Painel de captura inline ----------
   Mesmo visual do modal original (card off-white, filete laranja no topo),
   agora embutido direto na página — como na referência de captura simples. */
.capture {
  position: relative;
  background: var(--off);
  color: var(--preto);
  border-radius: 8px;
  padding: clamp(26px, 3.4vw, 42px);
  overflow: hidden;
  box-shadow: 0 50px 110px -50px rgba(0, 0, 0, .8),
              0 0 90px -34px rgba(255, 107, 0, .35);
}
.capture::before {
  content: ''; position: absolute; top: 0; left: 0; right: 0; height: 6px;
  background: linear-gradient(90deg, var(--laranja), var(--laranja-hot));
}
.capture__eyebrow {
  font-family: var(--font-mono); font-size: 11px;
  letter-spacing: .3em; text-transform: uppercase; color: var(--laranja);
}
.capture__title {
  margin-top: 12px;
  font-family: var(--font-black); font-size: clamp(21px, 2.6vw, 28px);
  line-height: 1.08; text-transform: uppercase;
}
.capture__sub { margin-top: 10px; font-size: 14.5px; color: #55524b; }
.capture__sub b { color: var(--preto); }
.capture .form { margin-top: 24px; }

/* entrada do painel no hero — mesmo timing da entrada do CTA original */
.hero--split .capture {
  transition: opacity .8s .6s, transform .8s .6s var(--ease-out);
}
.js-enabled .hero--split .capture { opacity: 0; transform: translateY(24px); }
.hero--split.is-revealed .capture { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  .js-enabled .hero--split .capture { opacity: 1 !important; transform: none !important; }
}

/* ---------- Painel de captura dentro da faixa final laranja ---------- */
.final .capture {
  max-width: 540px;
  margin: clamp(36px, 5vw, 52px) auto 0;
  text-align: left;
}

/* ---------- Bios detalhadas dos mentores (curta e longa) ---------- */
.mentor-bios { display: grid; gap: 20px; margin-top: 30px; }
.mentor-bio {
  padding: 22px 24px;
  border: 1px solid var(--line-dark);
  border-radius: 6px;
  background: rgba(243, 240, 233, .03);
  transition: border-color .35s, background .35s, transform .35s var(--ease-out);
}
.mentor-bio:hover {
  border-color: var(--laranja);
  background: rgba(255, 107, 0, .05);
  transform: translateY(-4px);
}
.mentor-bio__name {
  font-family: var(--font-black); font-size: 17px;
  text-transform: uppercase; letter-spacing: .04em;
}
.mentor-bio__role {
  margin-top: 5px;
  font-family: var(--font-mono); font-size: 10.5px;
  letter-spacing: .2em; text-transform: uppercase; color: var(--laranja);
}
.mentor-bio__text { margin-top: 12px; color: var(--off-dim); font-size: 15.5px; line-height: 1.65; }
.mentor-bio__text b { color: var(--off); }

/* ---------- Seletor de versão (somente para comparar as prévias) ---------- */
.version-switch {
  position: fixed; right: 18px; bottom: 18px; z-index: 3400;
  display: flex; align-items: center; gap: 4px;
  padding: 5px;
  background: rgba(14, 14, 14, .92);
  border: 1px solid var(--line-dark);
  border-radius: 100px;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  box-shadow: 0 16px 40px -18px rgba(0, 0, 0, .8);
}
.version-switch__label {
  font-family: var(--font-mono); font-size: 9px;
  letter-spacing: .2em; text-transform: uppercase;
  color: var(--cinza); padding: 0 6px 0 10px;
}
.version-switch a {
  font-family: var(--font-mono); font-size: 10.5px;
  letter-spacing: .16em; text-transform: uppercase;
  color: var(--cinza);
  padding: 9px 15px; border-radius: 100px;
  transition: color .3s, background .3s;
  white-space: nowrap;
}
.version-switch a:hover { color: var(--off); }
.version-switch a.is-active { background: var(--laranja); color: var(--preto); font-weight: 600; }
@media (max-width: 860px) {
  .version-switch { right: 12px; bottom: 82px; } /* acima do sticky CTA */
  .version-switch__label { display: none; }
}

/* ---------- Âncoras da captura não ficam atrás do header ---------- */
[id="inscricao"], [id="cadastro"] { scroll-margin-top: 92px; }