/* ==========================================================================
   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; }

/* ---------- Título longo (variantes B e C do teste A/B) ----------
   A página original tem um título de quatro linhas curtas (~20 caracteres
   cada). As variantes trazem uma frase corrida de 105 e 118 caracteres, que
   quebra em linhas de ~26. No corpo padrão (até 78px) o bloco passaria de
   700px de altura e empurraria o formulário para fora da primeira tela — o
   teste passaria a medir "formulário visível ou não" em vez de medir o
   título, que é a única variável que o dossiê quer isolar.
   Esta é a ÚNICA concessão de layout feita às variantes: o corpo cai na mesma
   proporção em que a linha ficou mais larga (20/26), então o título ocupa a
   mesma área que ocupava. Nada mais muda. */
.hero--split .hero__title--longo { font-size: clamp(29px, 3.8vw, 60px); }

/* O título original tem 4 linhas e o style.css só escalona o atraso da
   animação até a quarta. A variante C tem 5 — sem esta linha a última subiria
   junto com a primeira, fora do compasso das outras. */
.hero__title .line:nth-child(5) > span { transition-delay: .4s; }

/* ---------- 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); }

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

/* ---------- LGPD: consentimento explicito ---------- */
.field--consent { margin-top: 4px; }
.consent {
  display: grid; grid-template-columns: auto 1fr; gap: 10px;
  align-items: start; cursor: pointer;
  font-size: 13px; line-height: 1.5; color: #55524b;
}
/* O reset de `.field input` no style.css aplica `appearance: none` e
   `padding: 15px 16px` a TODO input dentro de .field — incluindo este checkbox.
   Isso apaga a marca nativa e incha a caixa: ficava um retangulo branco grande
   que nunca mostrava se estava marcado. `accent-color` nao ajuda depois de
   appearance:none. Entao desenhamos a marca aqui, em vez de brigar com o reset.
   O seletor com [type] tem especificidade maior que `.field input`. */
.consent input[type="checkbox"] {
  width: 22px; height: 22px;
  min-width: 22px; flex: 0 0 auto;
  padding: 0; margin: 1px 0 0;
  border: 1.5px solid var(--line-light);
  border-radius: 5px;
  background-color: #fff;
  background-repeat: no-repeat;
  background-position: center;
  background-size: 13px 13px;
  cursor: pointer;
  transition: background-color .2s var(--ease-out), border-color .2s var(--ease-out);
}
.consent input[type="checkbox"]:hover { border-color: var(--laranja); }
.consent input[type="checkbox"]:checked {
  background-color: var(--laranja);
  border-color: var(--laranja);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M2.5 8.5l3.5 3.5 7.5-7.5' fill='none' stroke='%23fff' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}
.consent input[type="checkbox"]:focus-visible {
  outline: none;
  border-color: var(--laranja);
  box-shadow: 0 0 0 4px rgba(255, 107, 0, .18);
}
.field--consent.show-err .consent input[type="checkbox"] {
  border-color: #e02b2b;
  box-shadow: 0 0 0 4px rgba(224, 43, 43, .1);
}
.consent a { color: var(--laranja); text-decoration: underline; }
.consent a:hover { text-decoration: none; }
.field--consent.show-err .consent span { color: #e02b2b; }