/* T9 — refinos autorizados pelo CTO em 07/10/2026 (comuns às páginas com títulos .tech-heading).
   O brilho dos títulos (titleSweep) terminava em background-position -110%: como o fundo se repete, uma faixa
   colorida ficava congelada no meio das palavras. Aqui o brilho termina em 0%, onde o gradiente é só tinta. */
@keyframes czTitleSweep {
  from { background-position: 122% 0; }
  to { background-position: 0 0; }
}

.tech-heading.spark {
  animation-name: czTitleSweep;
}

.tech-heading {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: geometricPrecision;
}

/* T9 — refinos autorizados pelo CTO em 07/10/2026 (Landing Modo Evento): espaçamento, responsividade e
   legibilidade. A moldura de overlay (laterais) está em overlay-host.css; aqui o conteúdo respeita o painel. */

/* Entrelinha do título principal: com 0,94 os acentos (Á, É, Ê) colidiam com a linha de cima. */
html .hero h1 {
  line-height: 1.04 !important;
}

/* Cada linha do título ocupa só a largura do próprio texto, com folga à direita: o gradiente (background-clip)
   passa a cobrir a última letra ("SENTIDO" perdia o "O" quando a linha excedia o bloco). */
html .hero-line {
  width: fit-content;
  padding-right: 0.12em;
  margin-right: -0.12em;
  padding-bottom: 0.03em;
}

/* Títulos de seção herdavam a entrelinha do texto corrido (1,55): "Sua primeira / conexão é por / nossa conta" ficava espaçado. */
html .benefit h2,
html .section h2 {
  line-height: 1.08;
}

/* O botão do cabeçalho não quebra em duas linhas. */
html .top-cta {
  white-space: nowrap;
  flex-shrink: 0;
}

/* Margens laterais confortáveis: 20 px no celular (o pacote usava 15 px) e 40 px a partir de tablet (24 px). */
@media (max-width: 720px) {
  html .container {
    width: min(100% - 40px, var(--max));
  }
}

@media (min-width: 721px) {
  html .container {
    width: min(var(--max), calc(100% - 80px));
  }
}

/* Painel sobreposto (≥ 1180 px): conteúdo, cabeçalho, animação de fundo e selo 18+ ficam dentro do painel,
   entre as laterais com a página principal desfocada. */
@media (min-width: 1180px) {
  html[data-cz-overlay] .container {
    width: min(var(--max), calc(100% - 2 * var(--cz-overlay-side) - 96px));
  }

  html[data-cz-overlay] .header {
    left: var(--cz-overlay-side);
    right: var(--cz-overlay-side);
  }

  /* O cabeçalho já tem a largura do painel: o contêiner dele só desconta as margens internas. */
  html[data-cz-overlay] .header .container {
    width: min(var(--max), calc(100% - 96px));
  }

  html[data-cz-overlay] #ambient {
    left: var(--cz-overlay-side);
    right: var(--cz-overlay-side);
    width: auto;
  }

  html[data-cz-overlay] .age {
    right: calc(var(--cz-overlay-side) + 14px);
  }
}

/* Os caminhos SVG da animação de fundo ultrapassavam a janela em ~2 px no celular (rolagem horizontal). */
html {
  overflow-x: clip;
}

/* Telas muito estreitas: o título (linhas sem quebra) passava da largura da tela em 320 px. */
@media (max-width: 360px) {
  html .hero h1 {
    font-size: clamp(1.8rem, 8.9vw, 2.18rem) !important;
  }
}