/* Home enxuta no celular (22/10/2026, publicada). Só abaixo de 640 px; o desktop não muda.
   Dentro de @layer utilities: o !important das classes do site (em camada) venceria regra fora de camada. */
@layer utilities {
/* 27/10/2026 · os passos do "How" viraram div[role=list]/div[role=listitem] (robôs não numeram): seletores aceitam os dois */
@media (max-width: 639px) {
  /* largura útil maior (era no máximo 270 px) */
  main.m3sh-landing .m3sh-container { width: calc(100% - 48px) !important; }

  /* Hero: tudo cabe numa tela; a foto ocupa só o que sobra, sem altura mínima */
  main.m3sh-landing > section:first-child > .m3sh-container { padding-top: 26px; }
  main.m3sh-landing [data-landing-hero-copy] { margin-top: 20px; font-size: 13px; line-height: 1.5; padding-left: 16px; border-left-width: 8px; }
  main.m3sh-landing > section:first-child a[href="/login"][data-slot] { margin-top: 22px; }
  main.m3sh-landing #available-for { font-size: 12px; }
  main.m3sh-landing section[aria-labelledby="available-for"] { margin-top: 20px; }
  main.m3sh-landing section[aria-labelledby="available-for"] > div { margin-top: 12px; max-width: 270px; }
  main.m3sh-landing > section:first-child > div:has(> img[data-nimg="fill"]) { min-height: 0 !important; margin-top: 18px !important; }

  /* How: título menor */
  main.m3sh-landing > section:nth-of-type(2) { padding: 44px 0 !important; }
  main.m3sh-landing > section:nth-of-type(2) > .m3sh-container { gap: 30px !important; }
  main.m3sh-landing > section:nth-of-type(2) h2 { font-size: 72px; }
  main.m3sh-landing > section:nth-of-type(2) h2 + p { font-size: 13px; }
  main.m3sh-landing > section:nth-of-type(2) h3 { padding-bottom: 6px; font-size: 13px; white-space: nowrap; }

  /* Preços: os três na mesma linha */
  main.m3sh-landing > section:nth-of-type(3) { min-height: 0 !important; padding-bottom: 40px !important; }
  main.m3sh-landing > section:nth-of-type(3) > .m3sh-container:first-child { padding-top: 44px; }
  main.m3sh-landing > section:nth-of-type(3) .font-widescreen.text-\[clamp\(50px\,17\.5vw\,70px\)\] {
    display: grid; grid-template-rows: auto auto; grid-auto-flow: column; justify-content: space-between;
    font-size: 17px; white-space: nowrap;
  }
  main.m3sh-landing > section:nth-of-type(3) .font-widescreen.text-\[clamp\(50px\,17\.5vw\,70px\)\] > p { margin-top: 0 !important; }
  main.m3sh-landing > section:nth-of-type(3) .font-widescreen.text-\[clamp\(50px\,17\.5vw\,70px\)\] > p:nth-child(even) { font-size: 34px; margin-top: 6px !important; }
  main.m3sh-landing > section:nth-of-type(3) img[src*="card-mobile"] { width: 70vw; margin-top: -10px; margin-bottom: -10px; }
  main.m3sh-landing > section:nth-of-type(3) > .m3sh-container:last-child { margin-top: 0; }

  /* Perguntas: mais juntas */
  main.m3sh-landing > section:nth-of-type(4) > .m3sh-container { padding-top: 44px; padding-bottom: 44px; }
  main.m3sh-landing > section:nth-of-type(4) h2 { font-size: 24px; }
  main.m3sh-landing [data-slot="accordion"] { margin-top: 24px; }
  main.m3sh-landing [data-slot="accordion"] > * + * { margin-top: 18px !important; }
  main.m3sh-landing [data-slot="accordion-trigger"] { font-size: 15px; }
  main.m3sh-landing > section:nth-of-type(4) [data-slot="accordion"] + div { margin-top: 32px; }

  /* Rodapé com a cidade: mais baixo */
  main.m3sh-landing > footer { min-height: 300px !important; }
}

/* How com os três passos lado a lado */
@media (max-width: 639px) {
  main.m3sh-landing > section:nth-of-type(2) :is(ol, [role="list"]) { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; justify-items: start; align-items: start; }
  main.m3sh-landing > section:nth-of-type(2) :is(li, [role="listitem"]) > p { font-size: 76px; }
  main.m3sh-landing > section:nth-of-type(2) :is(li, [role="listitem"]) > div { padding-left: 0; margin-top: 12px; font-size: 11px; line-height: 1.35; }
  main.m3sh-landing > section:nth-of-type(2) :is(li, [role="listitem"]) > div > div { display: none; }
  main.m3sh-landing > section:nth-of-type(2) h3 { font-size: 11px; }
}


}

/* Versão enxuta (por cima do bloco anterior) */
@layer utilities {
@media (max-width: 639px) {
  /* hero: 2 linhas de texto; a foto aparece inteira (proporção dela), e a faixa do How vem ao rolar */
  main.m3sh-landing [data-landing-hero-copy] .lg\:hidden > p:nth-child(n+3),
  main.m3sh-landing [data-landing-hero-copy] > p { display: none; }
  main.m3sh-landing [data-landing-hero-copy] { margin-top: 16px; }
  main.m3sh-landing > section:first-child a[href="/login"][data-slot] { margin-top: 18px; }
  main.m3sh-landing > section:first-child > div:has(> img[data-nimg="fill"]) { flex: none !important; height: auto; aspect-ratio: 1086 / 1250; margin-top: 14px !important; }

  /* How numa faixa curta */
  main.m3sh-landing > section:nth-of-type(2) { padding: 18px 0 20px !important; }
  main.m3sh-landing > section:nth-of-type(2) > .m3sh-container { gap: 12px !important; }
  main.m3sh-landing > section:nth-of-type(2) h2 { font-size: 38px; }
  main.m3sh-landing > section:nth-of-type(2) h2 + p { font-size: 9px; margin-top: 4px; }
  main.m3sh-landing > section:nth-of-type(2) :is(ol, [role="list"]) { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; justify-items: start; }
  main.m3sh-landing > section:nth-of-type(2) :is(li, [role="listitem"]) > p { font-size: 36px; }
  main.m3sh-landing > section:nth-of-type(2) :is(li, [role="listitem"]) > div { padding-left: 0; margin-top: 6px; }
  main.m3sh-landing > section:nth-of-type(2) :is(li, [role="listitem"]) > div > div { display: none; }
  main.m3sh-landing > section:nth-of-type(2) h3 { font-size: 11px; font-weight: 400; padding-bottom: 0; }

  /* preços + cartão menor, sem o parágrafo */
  main.m3sh-landing > section:nth-of-type(3) { padding-bottom: 8px !important; }
  main.m3sh-landing > section:nth-of-type(3) > .m3sh-container:first-child { padding-top: 30px; }
  main.m3sh-landing > section:nth-of-type(3) img[src*="card-mobile"] { width: 52vw; margin-top: 0; margin-bottom: -6px; }
  main.m3sh-landing > section:nth-of-type(3) > .m3sh-container:last-child { display: none; }
  /* o cartão desenhado (m3sh-cartoes.js) fica num palco quase quadrado; aqui mais baixo e estreito */
  .m3-palco { width: 72vw !important; aspect-ratio: 1 / .62 !important; margin: 14px auto 0 !important; }

  /* perguntas: saem da home no celular; o link logo abaixo do How leva à subpágina */
  main.m3sh-landing > section:nth-of-type(4) { display: none; }
  main.m3sh-landing > .m3-faq-link {
    display: flex; align-items: center; justify-content: space-between; gap: 12px;
    padding: 18px 24px; border-bottom: 1px solid #ececec; background: #fff; color: #1a1a1a;
    font-family: var(--font-widescreen-ex); font-weight: 500; font-size: 15px; white-space: nowrap; text-decoration: none;
  }
  main.m3sh-landing > .m3-faq-link b { font-weight: 500; font-size: 18px; }
  /* sem as perguntas, o preço fica logo depois do link e o rodapé fecha a página */
  main.m3sh-landing > section:nth-of-type(3) { padding-bottom: 28px !important; }

  /* perguntas compactas */
  main.m3sh-landing > section:nth-of-type(4) > .m3sh-container { padding-top: 20px; padding-bottom: 30px; }
  main.m3sh-landing > section:nth-of-type(4) h2 { font-size: 20px; }
  main.m3sh-landing [data-slot="accordion"] { margin-top: 16px; }
  main.m3sh-landing [data-slot="accordion"] > * + * { margin-top: 12px !important; }
  main.m3sh-landing [data-slot="accordion-trigger"] { font-size: 13px; }
  main.m3sh-landing > section:nth-of-type(4) [data-slot="accordion"] + div { margin-top: 24px; }

  /* rodapé baixo */
  main.m3sh-landing > footer { min-height: 300px !important; }
  /* valores dos preços no peso de informação, sem o negrito pesado */
  main.m3sh-landing > section:nth-of-type(3) .font-widescreen.text-\[clamp\(50px\,17\.5vw\,70px\)\] > p:nth-child(even) { font-weight: 500 !important; }
  /* além do fim da página (rolagem elástica do iPhone) aparece o preto do rodapé, não o fundo do navegador */
  html:has(main.m3sh-landing) { background: #1a1a1a !important; }
  /* 27/10/2026 · rodapé no celular: links e aviso menores, com margem lateral, sobre faixa escura (não sobre a foto) */
  main.m3sh-landing > footer > div[class*="1a1a1a"] { height: 130px !important; mix-blend-mode: normal !important; background: linear-gradient(to bottom, rgba(26,26,26,0), #1a1a1a 42%) !important; }
  main.m3sh-landing > footer > p[data-m3legal] { font-size: 11px !important; line-height: 1.4 !important; padding: 0 16px; box-sizing: border-box; bottom: calc(10px + env(safe-area-inset-bottom)) !important; }
  main.m3sh-landing > footer > p[data-m3legal] > .m3-links { font-size: 9.5px !important; line-height: 1.7 !important; margin-top: 5px !important; }
  main.m3sh-landing > footer > p[data-m3legal] > .m3-risco { font-size: 9px !important; line-height: 1.45 !important; margin-top: 4px !important; }
}
}
/* o link das perguntas só existe no celular (em camada, para a regra do celular acima vencer) */
@layer utilities { .m3-faq-link { display: none; } }