/* MAGNYN · site, onda 1 · o hero (diretor de arte, 14/10/2026). Carregado depois de estilo.css e movimento.css;
   sobrepõe ao estilo.css só o que é do hero (o <header id="topo"> menos o .mg-cabecalho, que é do diagramador).

   Herói 2 (a escolha da Paula na enquete E18, P0166): o do ciclo 3, "ao lado", texto à esquerda e caminho à direita.
   De 900 px para cima, o bloco junto (rótulo, promessa, subtítulo e o botão "Fale com nosso time"), sob a régua do
   rótulo; a régua é o caminho, que passa por cima da promessa e, à direita, ao lado do título, desce, nivela e volta a
   subir um terço do que desceu, saindo pela borda (svg heroi-d, 1440 × 820). O conjunto (o bloco e o desenho preso ao
   fio) fica no meio da altura do herói: o vão do cabeçalho ao rótulo e o dos nomes das frentes ao fim do herói são
   iguais (crítica do herói 2: o ar vira margem, em vez de faixa vazia sob os botões). Abaixo de 900, "menor": a faixa
   de pontos mais baixa entre o rótulo e o título (heroi-t, 768 × 300; heroi-m, 390 × 190), como estava.
   A margem é a do site, sem escala (64 px de 1200 para cima, 40 de 900 a 1199, a coluna de 1312 centrada além de
   1440): o logotipo, o rótulo e o texto ficam na vertical do logotipo das páginas internas e do texto dos capítulos.
   O texto e o desenho medem na mesma unidade (--mg-s): o desenho vai da margem do rótulo até a borda direita da tela,
   então em qualquer largura a régua começa sob o rótulo, a descida passa à direita do título e a subida sai inteira.
   A saída 1 está guardada em .design/pecas/site-onda1/alternativas/heroi-saida1/, o ciclo 3 em heroi-ciclo3/; a
   versão com o subtítulo e as ofertas no pé, em NOTAS.md ("Herói 2 com a onda").
   Cor: Ink de fundo, Paper no texto, Expansion só no caminho e em "simule" (R009, R061); botões nunca vermelhos. */

/* ---------- 900 px para cima ---------- */
.mg-heroi__rotulo, .mg-heroi__titulo, .mg-heroi__texto, .mg-heroi__acoes, .mg-heroi__assinatura { position: relative; z-index: 2; }
.mg-heroi__frase { display: block; }
/* o rótulo do herói é o rótulo de seção do primeiro capítulo: Kode Mono 600 a 15 px em toda largura (R113, P0311) */
.mg-heroi__rotulo { font-weight: 600; font-size: 15px; line-height: 1.3; }
/* sob cada botão, o nome da frente: o rótulo da casa (Kode Mono, Mist sobre Noite, 10,75:1) */
.mg-heroi__oferta { display: grid; justify-items: start; }
.mg-heroi__frente { color: var(--mg-c-mist); }

@media (min-width: 900px) {
  .mg-capa .mg-capa__palco {
    /* a margem do site, não escalada (DESIGN.md, Layout; a mesma das seções e das páginas internas) */
    --mg-heroi-m: max(64px, (100cqw - 1312px) / 2);
    /* a unidade do desenho: 1376 unidades da margem à borda direita (o desenho tem 1440, e o começo do caminho, em
       x 64, fica sob o rótulo). A 1440 vale 1 px; abaixo, cresce com a tela; acima, cresce mais devagar que ela */
    --mg-s: calc((100cqw - var(--mg-heroi-m)) / 1376);
    /* 88% da tela (o capítulo 01, vermelho, aparece no pé: cerca de 12% da primeira tela, abaixo dos 15% da R061, e o
       rótulo dele entra inteiro), e nunca menos que o desenho com o pé (790 u) */
    min-height: max(88vh, calc(790 * var(--mg-s)));
    min-height: max(88svh, calc(790 * var(--mg-s)));
    /* o topo do conjunto: o bloco mede ~487 u do alto do rótulo ao pé do botão (pedido 16: um botão só, sem os nomes das
       frentes) e o cabeçalho ~65 u; com (altura − 552 u) / 2 + 65 u os dois vãos ficam iguais (120/120 px a 1440 × 900);
       quando a altura é a do desenho (790 u, em tela baixa), o mesmo cálculo dá 184 u */
    --mg-heroi-topo: max(calc(44vh - 211 * var(--mg-s)), calc(184 * var(--mg-s)));
    --mg-heroi-topo: max(calc(44svh - 211 * var(--mg-s)), calc(184 * var(--mg-s)));
    display: flex; flex-direction: column; align-items: flex-start;
    padding: var(--mg-heroi-topo) var(--mg-heroi-m) calc(34 * var(--mg-s));
  }
  /* o cabeçalho da home na mesma margem (região do diagramador; só a margem) */
  .mg-capa .mg-cabecalho { left: var(--mg-heroi-m); right: var(--mg-heroi-m); }
  /* o desenho: o x 64 dele sob o rótulo, a borda direita dele na borda da tela */
  .mg-capa .mg-capa__multidao { left: calc(var(--mg-heroi-m) - 64 * var(--mg-s)); right: auto;
    width: calc(1440 * var(--mg-s)); aspect-ratio: 1440 / 820;
    /* desce junto com o rótulo: o fio (y 140 do desenho) continua sob ele */
    top: calc(var(--mg-heroi-topo) - 97 * var(--mg-s)); }
  /* a promessa: um título, três frases, uma por linha; uma palavra em Expansion (R034) */
  .mg-heroi__titulo { margin: calc(74 * var(--mg-s)) 0 calc(30 * var(--mg-s)); max-width: calc(840 * var(--mg-s));
    font-weight: 700; font-size: calc(64 * var(--mg-s)); line-height: 1.0; letter-spacing: -.01em; }
  /* o subtítulo junto do título (o bloco da escolha dela) */
  .mg-heroi__texto { margin-top: calc(30 * var(--mg-s)); max-width: 34em; font-size: max(16px, calc(21 * var(--mg-s)));
    line-height: 1.5; }
  .mg-heroi__acoes { margin-top: calc(32 * var(--mg-s)); gap: calc(12 * var(--mg-s)); }
  .mg-heroi__acoes .mg-botao { min-height: max(44px, calc(48 * var(--mg-s)));
    padding: calc(12 * var(--mg-s)) max(18px, calc(22 * var(--mg-s))); font-size: max(15px, calc(16 * var(--mg-s))); }
  .mg-heroi__oferta { gap: calc(10 * var(--mg-s)); }
  .mg-heroi__frente { font-size: max(12px, calc(13 * var(--mg-s))); }
  .mg-heroi__assinatura { margin-top: calc(40 * var(--mg-s)); font-weight: 500; font-size: max(15px, calc(17 * var(--mg-s)));
    color: var(--mg-c-mist); }
}
@media (min-width: 900px) and (max-width: 1199px) {
  .mg-capa .mg-capa__palco { --mg-heroi-m: 40px; }
}
@media (min-width: 900px) and (min-aspect-ratio: 2/1) {
  /* tela baixa (pedido 13: notebook com a barra do navegador, 1280 × 600, 1366 × 625): o topo inteiro, com o botão,
     na primeira tela. A letra e os vãos do bloco descem ~14% (o bloco, com um botão só desde o
     pedido 16, mede ~414 u); a onda e o desenho ficam como estão, e os dois vãos continuam iguais.
     Acima de 2:1 o bloco de tamanho normal não cabe com ar (iria a ~660 u, mais que meia largura). */
  .mg-capa .mg-capa__palco {
    /* o herói vai até 56 px da dobra (a crítica do pedido 13: com 88% da tela o rótulo do 01 caía cortado na dobra);
       o topo continua no meio dessa altura */
    --mg-heroi-topo: max(calc(50vh - 28px - 174 * var(--mg-s)), calc(95 * var(--mg-s)));
    --mg-heroi-topo: max(calc(50svh - 28px - 174 * var(--mg-s)), calc(95 * var(--mg-s)));
    min-height: max(calc(100vh - 56px), calc(582 * var(--mg-s)));
    min-height: max(calc(100svh - 56px), calc(582 * var(--mg-s)));
  }
  .mg-heroi__titulo { margin: calc(58 * var(--mg-s)) 0 calc(22 * var(--mg-s)); font-size: calc(55 * var(--mg-s)); }
  .mg-heroi__texto { margin-top: calc(20 * var(--mg-s)); font-size: max(16px, calc(19 * var(--mg-s))); }
  .mg-heroi__acoes { margin-top: calc(24 * var(--mg-s)); }
}

/* ---------- 600 a 899 e celular: a faixa em cima, mais baixa, e o texto embaixo, em fluxo ---------- */
@media (max-width: 899px) {
  .mg-capa .mg-capa__palco { min-height: calc(100vh - 72px); min-height: calc(100svh - 72px);
    grid-template-rows: auto auto auto auto auto auto 1fr; padding: 14px 20px 32px; }
  .mg-capa .mg-crowd__svg--m { aspect-ratio: 390 / 190; }
  /* correção final (crítica 2, item 4; revisor): o testar-peca lê o rótulo como corpo de texto (parágrafo de 20
     caracteres ou mais) e pede 15 px a 390 */
  .mg-heroi__rotulo { order: 1; margin-top: 16px; }
  .mg-capa .mg-capa__multidao { order: 2; margin: 8px -20px 0; }
  .mg-heroi__titulo { order: 3; margin-top: 14px; max-width: none; font-weight: 700; letter-spacing: -.01em;
    /* a frase mais longa partida em duas ("Antes de escalar IA," mede 8,9 em) cabe na largura útil */
    font-size: min(38px, calc((100vw - 40px) / 9.1)); line-height: 1.02; }
  .mg-heroi__texto { order: 4; margin-top: 18px; font-size: 16.5px; line-height: 1.5; }
  .mg-heroi__acoes { order: 5; margin-top: 22px; gap: 10px; }
  .mg-heroi__acoes { row-gap: 16px; }
  .mg-heroi__acoes .mg-botao { min-height: 46px; padding: 12px 16px; font-size: 15px; }
  .mg-heroi__oferta { gap: 8px; }
  .mg-heroi__frente { font-size: 13px; }
  .mg-heroi__assinatura { order: 6; margin-top: 26px; font-size: 15px; }
}
@media (min-width: 600px) and (max-width: 899px) {
  /* crítica, HOME item 2: no tablet o herói termina 72 px abaixo dos botões, em vez de ocupar a altura da tela; mas
     nunca abaixo de 86% da tela, senão a capa vermelha do 01 passa de 15% da primeira tela (R061: 16,6% medido a
     768 × 1024 com o herói terminando a 72 px). A sobra, quando há, se reparte entre as linhas da grade (as faixas
     automáticas se esticam), e não vira vão embaixo dos botões */
  .mg-capa .mg-capa__palco { min-height: 86vh; min-height: 86svh; grid-template-rows: none; padding-bottom: 72px; }
  .mg-heroi__rotulo, .mg-capa .mg-capa__multidao, .mg-heroi__titulo, .mg-heroi__texto, .mg-heroi__acoes { align-self: start; }
  .mg-capa .mg-crowd__svg--t { aspect-ratio: 768 / 300; }
  /* cada frase numa linha (12,4 em a mais longa) */
  .mg-heroi__titulo { margin-top: 22px; font-size: min(54px, calc((100vw - 40px) / 13)); line-height: 1.0; }
  .mg-heroi__texto { max-width: 36em; font-size: 18px; }
}