/* Home no celular · faixas (amostra 24/10/2026). Só abaixo de 640 px; o desktop não muda.
   1) A barra do topo fica fixa e translúcida (vidro escuro): o que passa por baixo aparece em
      transparência e o texto branco fica em destaque; nada "nasce cortado" no alto da tela.
   2) A página rola por faixas: hero, How+preços e rodapé encostam no topo por si (scroll-snap
      "proximity", que não briga com o dedo).
   3) A foto do trio termina num degradê para o preto da faixa seguinte, em vez de um corte seco. */
/* viewport-fit=cover (25/10/2026): no iPhone deitado, o conteúdo não entra embaixo do notch; em pé e no desktop vale 0 */
html { padding-left: env(safe-area-inset-left); padding-right: env(safe-area-inset-right); }
@layer utilities {
@media (max-width: 639px) {
  html:has(main.m3sh-landing) { scroll-snap-type: y proximity; scroll-padding-top: calc(40px + env(safe-area-inset-top)); }
  /* o cabeçalho mora dentro da seção do hero (que corta o que sai dela): por isso fixo na tela, não sticky */
  main.m3sh-landing header {
    position: fixed !important; top: 0; left: 0; right: 0; width: 100% !important; z-index: 60 !important;
    background: rgba(26, 26, 26, .82) !important;
    padding-top: env(safe-area-inset-top) !important;
    -webkit-backdrop-filter: blur(16px) saturate(150%); backdrop-filter: blur(16px) saturate(150%);
    border-bottom: 1px solid rgba(255, 255, 255, .08);
  }
  /* hero = uma tela inteira: texto em cima, foto preenche o resto e some num degradê para o preto */
  main.m3sh-landing > section:first-child { min-height: 100svh !important; padding-top: calc(40px + env(safe-area-inset-top)) !important; scroll-snap-align: start; }
  main.m3sh-landing > section:first-child > div:has(> img[data-nimg="fill"]) {
    flex: 1 1 auto !important; aspect-ratio: auto !important; min-height: 0 !important; height: auto !important;
  }
  main.m3sh-landing > section:first-child::after {
    content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 26%; pointer-events: none;
    background: linear-gradient(to bottom, rgba(26, 26, 26, 0) 0%, rgba(26, 26, 26, .55) 55%, #1a1a1a 100%);
  }
  main.m3sh-landing > section:nth-of-type(2) { scroll-snap-align: start; }
  main.m3sh-landing > section:nth-of-type(3) { scroll-snap-align: start; }
  main.m3sh-landing > footer { scroll-snap-align: end; padding-bottom: env(safe-area-inset-bottom); }

  /* acabamento 25/10/2026: alvos de toque de pelo menos 44 px (Login do topo, botões e perguntas) */
  main.m3sh-landing header a[href="/login"] { min-height: 44px; display: inline-flex !important; align-items: center; }
  main.m3sh-landing a[data-slot].h-\[40px\], main.m3sh-landing button.h-\[40px\] { height: 44px !important; }
  main.m3sh-landing [data-slot="accordion-trigger"] { min-height: 44px; align-items: center !important; }
}
/* quem pede menos movimento: sem rolagem por faixas */
@media (max-width: 639px) and (prefers-reduced-motion: reduce) {
  html:has(main.m3sh-landing) { scroll-snap-type: none; }
}
}

/* 26/10/2026: chamada no celular com o mesmo peso do computador (o HTML exportado fixa 600/900 abaixo de 640 px).
   Fora do @layer de propósito: regra sem camada vence as classes utilitárias. */
@media (max-width: 639px) {
  main.m3sh-landing h1 [data-m3sh-wordmark] { font-weight: 200 !important; }
  main.m3sh-landing h1 > span:not([data-m3sh-wordmark]) { font-weight: 400 !important; }
}