/* hero.css — hero da home (protótipo de 28 set 2026)
   Ordem pedida pelo Sr. Felipe: frase, marca grande (ISAI · Intelligent Storytelling /
   inteligência editorial), subtítulo, a vitrine de listas que rolam, botão Entrar,
   e logo abaixo a primeira dobra com o resultado. Só lê tokens de tokens.css. */

/* 29 set 2026: espaços apertados para o botão Entrar caber na primeira tela de um notebook (medido em produção: 1440x900, janela útil ~800 px) */
.h28 { padding-block: clamp(var(--space-5), 3vh, var(--space-7)) var(--space-4); }

.h28__frase {
  margin: 0 0 var(--space-5);
  font-family: var(--font-display); font-weight: 400;
  font-size: clamp(1.35rem, 0.95rem + 1.4vw, 2.25rem);
  line-height: var(--leading-snug); letter-spacing: var(--tracking-tight);
  color: var(--fg); max-width: 30ch;
}

.h28__linha-marca { display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--space-2) var(--space-5); }
.h28 .v-abertura__marca { font-size: clamp(3.5rem, 1.2rem + 7.5vw, 8.5rem); }
.h28__sigla {
  font-family: var(--font-mono); font-size: var(--text-sm);
  letter-spacing: 0.14em; text-transform: uppercase; color: var(--fg-muted);
}

.h28__sub {
  margin: var(--space-5) 0 0; max-width: 52ch;
  font-family: var(--font-text); font-size: var(--text-lg);
  line-height: var(--leading-body); color: var(--fg-muted);
}

/* A vitrine vinha com respiro grande embaixo; aqui o botão precisa ficar logo abaixo dela, ainda na primeira tela */
.h28 + .v-troca { padding-top: var(--space-4); padding-bottom: var(--space-3); }
.h28 + .v-troca .v-troca__controles { margin-top: var(--space-3); }
.h28-cta { padding-block: 0 var(--space-8); }
.h28-cta__btn { min-height: 52px; padding-inline: var(--space-7); font-size: var(--text-base); }

.h28-resultado { padding-block: var(--section-y); border-top: var(--border-w) solid var(--line); }
.h28-resultado__titulo {
  margin: 0; max-width: 24ch;
  font-family: var(--font-display); font-weight: 400;
  font-size: clamp(2rem, 1.1rem + 3vw, 3.5rem);
  line-height: var(--leading-tight); letter-spacing: var(--tracking-display);
  color: var(--fg);
}


/* 29 set 2026: no celular o botão Entrar sobe para logo abaixo do subtítulo,
   e o de baixo some (um só botão principal por tela). */
.h28-so-celular { display: none; }
/* ...e em tela baixa (notebook de 768 px de altura) também, para o botão não cair abaixo da dobra */
@media (max-width: 899px), (max-height: 740px) {
  .h28-so-celular { display: inline-flex; margin-top: var(--space-5); }
  .h28-cta { display: none; }
}