/* ============================================================================
   AJUSTES DE CELULAR DA LP DO HUVEN GROWTH
   ----------------------------------------------------------------------------
   Arquivo SEPARADO de propósito. O growth.html é um artefato exportado de outra
   ferramenta: se ele for baixado de novo, só esta linha precisa voltar, em vez
   de alguém ter que reencontrar cada correção dentro de 1,5 MB de HTML.
   Nada aqui muda o desktop: tudo vive dentro de media query.

   O QUE ESTAVA QUEBRADO (medido no navegador a 390px, não no olho):
   `h1,h2,h3{line-height:.98}` vale pro site inteiro. No desktop o título ocupa
   uma ou duas linhas e a entrelinha apertada é escolha de design. No celular o
   mesmo título vira cinco ou seis linhas, e aí as linhas literalmente se tocam:
   32px de fonte com 31,36px de entrelinha. Junto com letter-spacing -.025em em
   peso 900, as palavras colam umas nas outras ("conseguir instalar" lia
   "conseguirinstalar"). É isso que dá a sensação de página desconfigurada.
   ========================================================================== */

@media (max-width: 560px) {

  /* 1. ENTRELINHA. O principal. Título de 5 linhas precisa de ar entre elas. */
  h1, h2, h3 { line-height: 1.1; letter-spacing: -.012em; }

  /* 2. Os displays grandes tinham entrelinha ainda menor que 1 e corpo de
        desktop. Reduzidos pro tamanho em que cabem sem quebrar palavra. */
  .hook .q      { font-size: 30px; line-height: 1.1; }
  .exameband .q { font-size: 27px; line-height: 1.15; }
  .exbig .q     { font-size: 29px; line-height: 1.12; }
  .council .tx .t { font-size: 27px; line-height: 1.12; }
  .cyc2 .c .t   { font-size: 23px; line-height: 1.12; }
  .infobox .v   { font-size: 22px; line-height: 1.15; }
  .drow .t      { font-size: 21px; line-height: 1.2; min-width: 0; }
  .sc .t        { font-size: 19px; line-height: 1.25; }
  .numrow .n .v { font-size: 34px; line-height: 1.05; }
  .step .n      { font-size: 32px; }

  /* 3. CABEÇALHO. 72px de altura com um botão de 156px (40% da largura) comia
        a tela e cobria o texto a cada rolagem. */
  .hdr .in { height: 56px; gap: 12px; }
  .hdr .mv { height: 26px; }
  .hdr .btn { padding: 9px 13px; font-size: 11.5px; letter-spacing: .02em; }

  /* 4. FORMULÁRIO. Campo com fonte abaixo de 16px faz o iOS DAR ZOOM sozinho ao
        focar, e a página inteira sai do lugar. Esse é o momento de converter:
        não pode ser o momento em que a tela pula. 16px é o mínimo que o Safari
        aceita sem ampliar. */
  #lf input, #lf select, input[type="text"], input[type="email"], input[type="tel"], select {
    font-size: 16px;
  }

  /* 5. "PRESENÇA DF MG SP / GO PR" quebrava no meio, com o rótulo grudado no
        primeiro estado. O rótulo passa a ocupar a própria linha e os estados
        fluem embaixo, alinhados. */
  .states { gap: 8px; }
  .states .lb { flex: 0 0 100%; margin: 0 0 2px; }
  .states .uf { font-size: 16px; padding: 7px 13px; }

  /* 6. MICROTEXTOS. Rótulos de 9,5 a 11px com tracking de até .22em viravam
        três linhas e ficavam ilegíveis no celular. Tracking menor e piso de
        11px: continuam sendo rótulo, e dá pra ler. */
  .hero .brandline, .snum .l, .ticker .t .k, .tgrid .c span, .exameband .mark .st,
  .numrow .n .l, .case .h, .case .row b, .infobox .l, .role .k, .cyc2 .c .k,
  .asset .n, .asset .p, .want .k, .sc .n, .closer .sig {
    letter-spacing: .1em;
    font-size: 11px;
    line-height: 1.5;
  }
  /* `.hero .brandline` e nao `.brandline`: a regra da pagina tem dois seletores,
     entao um so perderia o empate de especificidade e nada mudaria. */
  .hero .brandline { font-size: 11.5px; margin-top: 22px; }

  /* 7. O rodapé do formulário no popup ficava com 11px e três linhas. */
  .formcard .fine { font-size: 11.5px; }

  /* 8. "MARCAS QUE CONFIAM" sumia no celular, e por dois motivos OPOSTOS, os dois
        reproduzidos no navegador a 390px antes de mexer:

        a) com a animação ligada, a esteira tem 5248px porque o item é de 150px.
           Numa tela de 390px cabia UM logo inteiro e dois cortados pela metade,
           então quem passava rolando via um pedaço de logo e mais nada;

        b) com "Reduzir movimento" ligado no aparelho, a regra da própria página
           desliga a animação e manda quebrar linha. Viravam 1216px de parede,
           porque os 32 itens são 16 logos DUPLICADOS pro laço ficar contínuo.

        A esteira CONTINUA ANDANDO, que é o efeito certo: o que muda é o tamanho
        do item. Com 112px cabem três logos na tela ao mesmo tempo, e aí dá pra
        ver que são marcas passando, em vez de um recorte. A duração cai junto
        porque a animação é por porcentagem: com item menor a esteira encurta, e
        os mesmos 38s ficariam lentos demais. 26s mantém o ritmo do desktop. */
  .mq-item { width: 112px; height: 52px; margin-right: 10px; padding: 8px 11px; }
  .mq-track { animation-duration: 26s; }
  /* a borrada das pontas era de 8% de cada lado: em 390px isso comia 31px de
     cada ponta, quase um terço de um logo. 4% mantém o efeito e devolve o espaço */
  .mq {
    -webkit-mask-image: linear-gradient(90deg, transparent, #000 4%, #000 96%, transparent);
    mask-image: linear-gradient(90deg, transparent, #000 4%, #000 96%, transparent);
  }
  /* no celular não existe hover, então o logo nasce na opacidade final */
  .mq-item img { opacity: .78; }

  /* 9. "PARECE QUE ESTÁ COM ZOOM". Era isso mesmo: a página usa a escala de
        tipos do desktop no celular. O h2 chegava a 34px, MAIOR que o h1 de 32px,
        numa tela de 390px. Escala reduzida cerca de 15%, que é o que faz caber
        mais de uma ideia por tela sem perder a força do título. */
  .hero h1 { font-size: 28px; }
  /* a pagina dimensiona h2 por SECAO (h2.big, .tension h2, .closer h2, .capture h2),
     entao um `h2` solto perderia o empate e nada mudaria. Cada um pelo seu nome. */
  h2.big, .tension h2 { font-size: 27px; }
  .closer h2 { font-size: 26px; }
  .capture h2 { font-size: 25px; }
  h2 { font-size: 26px; }
  h3 { font-size: 20px; }
  .hero .lead { font-size: 16.5px; line-height: 1.5; }
  .tgrid .c { font-size: 15.5px; padding: 22px 22px; }
  .dlist li { font-size: 15.5px; }
  .sysend { font-size: 18px; }
  .qa .a, .f90 .d, .exbig .d { font-size: 15px; }
  .role li { font-size: 14.5px; }
  .presscard .q { font-size: 16px; }
  .wrap { padding: 0 18px; }

  /* 10. A linha de posicionamento ao lado da logo, no topo branco. A página já
         tinha o elemento, escondido no celular. No 390px ele não cabe ao lado do
         logo COM o botão: fica embaixo do logo, que é onde sobra espaço e onde
         continua sendo lido como assinatura da marca. */
  .hdr .meta {
    display: block;
    font-size: 8.5px;
    letter-spacing: .07em;
    line-height: 1.25;
    max-width: 150px;
  }
  /* O botao vinha quebrando em duas linhas ("QUERO / APLICAR") e crescia em
     altura, porque a frase nova disputa a mesma linha. nowrap resolve: o botao
     fica numa linha so e a frase ocupa o espaco que sobra, em duas linhas
     curtas. Testado: cabecalho continua com 56px de altura. */
  .hdr .btn { white-space: nowrap; }
  .hdr .in { gap: 10px; }
}

/* Entre 561px e 820px (celular deitado e tablet pequeno) o problema da
   entrelinha também aparece, só que mais suave. */
@media (min-width: 561px) and (max-width: 820px) {
  h1, h2, h3 { line-height: 1.06; }
  #lf input, #lf select { font-size: 16px; }
}

/* Quem liga "Reduzir movimento" no aparelho está pedindo pra nada se mexer, e
   isso se respeita: só pra essas pessoas a esteira vira grade parada. Sem a
   regra das cópias, a tela delas mostrava os 16 logos DUPLICADOS, 1216px de
   parede — que foi o segundo jeito de a seção ficar quebrada. */
@media (max-width: 560px) and (prefers-reduced-motion: reduce) {
  .mq { overflow: visible; -webkit-mask-image: none; mask-image: none; }
  .mq-track {
    animation: none;
    width: auto;
    flex-wrap: wrap;
    justify-content: center;
    gap: 9px;
  }
  .mq-item { width: calc(33.333% - 6px); height: 58px; margin-right: 0; }
  /* os 16 primeiros são os logos; do 17 em diante é a cópia que só serve pro laço */
  .mq-item:nth-child(n+17) { display: none; }
}