/* TELA — home */

/* ============================================================================
   SCREEN · HOME  (id: home)
   Capa do diagnóstico "A Caixa Preta do Mercado Solar".
   Composição "O DESVIO" (2026-07-20, escolhida entre 3 direções): tela
   ASSIMÉTRICA, tudo alinhado à esquerda, sem card, sem chip, sem glow.
   O elemento-assinatura é um diagrama SVG: uma linha de dinheiro nasce
   cheia na mão do integrador, atravessa a tela e se divide em três fios
   que engordam para o banco, a distribuidora e a seguradora; o que segue
   até "sua margem" é um pontilhado de 1px. O gráfico é a tese da página —
   e é o mesmo desenho que as telas de resultado depois confirmam com
   números.

   HISTÓRICO: antes disso a tela teve (a) um `.cta-card` com dois feature
   cards de ícone em chip — layout de template, removido; (b) uma versão
   centrada só-tipografia com fio de progresso. O desvio substitui ambos.
   Só estiliza classes desta tela; tokens/primitivas vêm do kernel.
   ========================================================================== */

/* ===== HERO ======================================================== */
/* alinhado à esquerda de propósito: o desvio corre da esquerda para a
   direita, então a coluna de texto ancora onde a linha nasce */
.hero {
  max-width: var(--maxw-home);
  margin-inline: auto;
  text-align: left;
  padding: var(--space-5) var(--space-2) 0;
  flex: 0 0 auto;
}

.hero h1 {
  font-size: clamp(1.875rem, 8.5vw, 2.125rem); /* ~30–34px */
  font-weight: var(--weight-heavy);            /* Heavy 900 */
  line-height: var(--leading-tight);           /* leading apertado */
  letter-spacing: var(--tracking-tighter);
  margin-bottom: var(--space-4);
  text-wrap: balance;
}
/* palavra-destaque em Mel (classe do kernel = sólido, sem gradiente em texto) */
.hero h1 .am { color: var(--accent); }

.hero p {
  font-size: var(--text-sm);
  line-height: var(--leading-normal);
  color: var(--text-muted);
  max-width: 44ch;
}

/* ===== DESVIO — o elemento-assinatura ============================== */
/* Traçado, cores e movimento vivem em css/components/desvio.css (o
   componente é compartilhado com o cinema). Aqui só o LAYOUT da home. */
.desvio {
  max-width: var(--maxw-home);
  margin: var(--space-5) auto 0;
  padding-inline: var(--space-2);
}
/* o svg NÃO centraliza: encosta na mesma margem esquerda do texto */
.desvio .desvio-svg {
  max-width: 480px;
}

/* ===== START — o único ponto de ação da tela ======================= */
/*
 * Botão e meta na mesma linha, presos à margem esquerda como todo o
 * resto. Sem moldura: o que separa o botão do fundo é SOMBRA PROJETADA —
 * curta, direcional, cor de tinta (nunca do Mel; o brand book proíbe
 * glow, e glow é o que se obtém borrando a cor do próprio botão).
 */
.start {
  max-width: var(--maxw-home);
  margin: var(--space-6) auto 0;
  padding-inline: var(--space-2);
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--space-3) var(--space-5);
}

.start .btn-start {
  width: auto;
  min-width: 220px;
  box-shadow: 0 14px 28px -18px rgba(10, 11, 21, 0.95),
              0 2px 4px rgba(10, 11, 21, 0.45);
}
@media (hover: hover) and (pointer: fine) {
  /* o componente troca por --shadow-accent (âmbar borrado) no hover, que
     acende halo; aqui a sombra continua de tinta, só sobe um degrau */
  .start .btn-start:hover {
    box-shadow: 0 18px 34px -18px rgba(10, 11, 21, 0.95),
                0 3px 6px rgba(10, 11, 21, 0.45);
  }
}

/* mono: é dado, não frase */
.start-meta {
  font-family: var(--font-mono);
  font-size: var(--text-2xs);
  letter-spacing: var(--tracking-wide);
  color: var(--text-subtle);
}

/* ===== RESPONSIVO: 10-home ===== */
/*
 * HOME — media queries responsivas (mobile-first, só overrides aditivos)
 *
 * Seletores tocados:
 *   .hero, .hero h1, .hero h1 .am, .hero p
 *   .desvio, .desvio .desvio-svg, .desvio .lbl
 *   .start, .start .btn-start, .start-meta
 *
 * Breakpoints cobertos: sm(600) · md(900) · lg(1280) · xl(1680) · xxl(2560)
 *
 * Não existe telão neste produto — é tudo desktop. ≥1680px é só um monitor
 * de trabalho comum (1920×1080, iMac 2560×1440), não uma sala projetada.
 * A curva cresce até lg; daí em diante é um degrau pequeno.
 *
 * Os rótulos do svg escalam JUNTO com ele (unidades do viewBox), então
 * quando o svg alarga, o font-size interno DIMINUI para o rótulo
 * renderizado ficar ~12px — sem isso, um svg de 560px imprime mono de
 * 17px, maior que o texto do parágrafo ao lado.
 */

/* ─── sm · 600px ──────────────────────────────────────────────────── */
@media (min-width: 600px) {
  .hero {
    padding-top: var(--space-6);
  }

  .hero h1 {
    font-size: clamp(1.875rem, 4vw, 2.25rem);
  }

  .hero p {
    font-size: var(--text-base);
  }

  .desvio .desvio-svg { max-width: 500px; }
  .desvio .lbl { font-size: 10px; }
}

/* ─── md · 900px ──────────────────────────────────────────────────── */
@media (min-width: 900px) {
  .hero {
    padding-top: var(--space-7);
  }

  .hero h1 {
    font-size: clamp(2rem, 3vw, 2.5rem);
    margin-bottom: var(--space-4);
  }

  .hero p {
    font-size: var(--text-base);
  }

  .desvio { margin-top: var(--space-6); }
  .desvio .desvio-svg { max-width: 540px; }
  .desvio .lbl { font-size: 9px; }

  .start { margin-top: var(--space-7); }
}

/* ─── lg · 1280px ─────────────────────────────────────────────────── */
@media (min-width: 1280px) {
  .hero {
    padding-top: var(--space-7);
  }

  .hero h1 {
    font-size: clamp(2.25rem, 2vw, 2.625rem);
    margin-bottom: var(--space-4);
  }

  .hero p {
    font-size: var(--text-base);
    line-height: var(--leading-relaxed);
  }

  .desvio .desvio-svg { max-width: 580px; }
  .desvio .lbl { font-size: 8.5px; }

  .start-meta { font-size: var(--text-xs); }
}

/* ─── xl/xxl · 1680px / 2560px — monitor grande, não telão ─────────── */
@media (min-width: 1680px) {
  .hero {
    padding-top: var(--space-8);
  }

  .hero h1 {
    font-size: clamp(2.5rem, 1.6vw, 2.875rem);
    line-height: 1.08;
    margin-bottom: var(--space-5);
  }

  .hero p {
    font-size: var(--text-md);
    line-height: var(--leading-relaxed);
  }

  .desvio { margin-top: var(--space-7); }
  .desvio .desvio-svg { max-width: 620px; }
  .desvio .lbl { font-size: 8px; }

  .start { margin-top: var(--space-8); }
}
@media (min-width: 2560px) {
  .hero h1 {
    font-size: clamp(2.75rem, 1.3vw, 3.125rem);
    line-height: 1.08;
    margin-bottom: var(--space-5);
  }

  .hero p {
    font-size: var(--text-md);
    line-height: var(--leading-relaxed);
  }

  .desvio .desvio-svg { max-width: 680px; }
  .desvio .lbl { font-size: 7.5px; }

  .start-meta { font-size: var(--text-sm); }
}