/* identidade-visual: as correções do critique de 29/10 (impeccable, recorte celular), por cima do site.css.
   Só vale abaixo de 1024px, o mesmo corte do CELULAR em motion.ts; o desktop segue o site.css sem mudança.
   Copy não mudou: tudo aqui é tamanho, ritmo, toque e acessibilidade. */

@media (max-width: 1023px) {
  /* USP: a palavra mais longa ("indispensável", 7,66em) cabe em 11 colunas até a 320px, com folga para a fonte de reserva; 85% do teto, pedido do Léo em 29/10 */
  .usp__titulo { font-size: calc(0.85 * min(var(--t52), 10vw)); }

  /* conceito: o bloco ganha a margem da grade; antes encostava na borda da tela */
  .conceito__texto { padding-inline: var(--margin); }

  /* condições: 130lvh por cartão e 5rem entre eles (eram 220lvh e 18,75rem, 5.002px para três cartões) */
  .condicoes__lista { row-gap: 5rem; }
  .condicoes__item { height: 130lvh; }
  /* svh: a altura que sobra com a barra do browser à mostra; com lvh a barra tampava o pé do cartão */
  .condicoes__cartao { height: calc(100svh - 0.375rem - var(--nav)); }
  /* o título leve cabe ao lado do número até a 320px ("storytelling", 3,64em) */
  .condicoes__titulo--leve { font-size: min(calc(1.5 * var(--t52)), 19vw); }
  /* o parágrafo grande alinhado à esquerda e a 18px (eram 24px, -25% a pedido do Léo em 29/10): o justify em 32px abria rios e comia a foto do cartão */
  .condicoes__p--grande { font-size: calc(1.125 * var(--t16)); text-align: left; }
  .condicoes__p--grande .line, .condicoes__p--grande > :last-child .line, .condicoes__p--grande > .line:last-child { text-align-last: auto; }
  /* o rótulo âmbar do cartão a 10px (era 12px; o Léo pediu -35%, parou em 10px pela leitura, 29/10) */
  .condicoes__sub { font-size: 10px; }
  /* o CTA do cartão 01 volta no celular */
  .condicoes__acao { display: block; padding-inline: 1.5rem; }
  /* em tela baixa (SE, 320) o botão tirava a foto do cartão; o atalho fixo que fazia o papel dele saiu em 29/10, a pedido do Léo */
  @media (max-height: 700px) { .condicoes__acao { display: none; } }

  /* clube: a lista cabe nas 10 colunas até a 320px ("presença", 3,75em em 55 Roman) */
  .clube__linha { font-size: min(calc(var(--t36) * var(--linha-escala, 1)), 20vw); }
}
.hero__frase--esq .frase-cel, .hero__frase--esq .frase-desk { display: block; }
@media (min-width: 768px) { .hero__frase--esq .frase-cel { display: none; } }

@media (max-width: 767px) {
  /* hero: 140lvh (eram 190lvh); a saída lateral é proporcional à seção e só acelera */
  .hero { min-height: 140lvh; }
  /* o gancho passa do corpo do texto (estava em 15,5px, menor que os 16px do parágrafo) */
  .hero__frase--esq { font-size: max(18px, 4.8vw); }
  /* o gancho tem uma quebra por tela (ver o span no HTML) */
  .hero__frase--esq .frase-desk { display: none; }
  /* o nome cobre quase a largura da grade ("id. visual" + asterisco ≈ 3,25em) e sobe do pé da tela */
  .hero__nome { font-size: 27vw; }
  .hero__layout { padding-bottom: 6rem; }
  /* a frase descritiva do serviço volta no celular, abaixo do gancho */
  .hero__coluna--dir { display: block; }
  .hero__frase--dir { max-width: 34ch; font-size: var(--t16); line-height: 1.5; letter-spacing: -0.01em; color: var(--ink-soft); text-wrap: pretty; }
  .hero__frases { gap: 1.25rem; }
  /* o gancho sai do pé e sobe pro terço de cima, deslocado à direita (pedido do Léo em 29/10); o "tem um projeto?" fica onde estava */
  .hero__coluna--esq { position: absolute; top: 31svh; left: 25vw; right: var(--hero-margin); text-align: right; }
}