/* Machine — CSS autoral da home.
   Só o que o runtime de design resolvia em tempo de execução: os estados :hover
   que vinham de style-hover, o sizing dos ícones inline, e a camada mobile.
   O <style> do <helmet> do documento de design sai em design-helmet.css,
   gerado por tools/port-design.ps1 — não edite aquele arquivo à mão. */

/* era style-hover="filter:brightness(1.06)" */
.m-hov-bright { transition: filter var(--t-hover); }
.m-hov-bright:hover { filter: brightness(1.06); }

/* era style-hover="background:rgba(255,255,255,.14)" */
.m-hov-wash { transition: background var(--t-hover); }
.m-hov-wash:hover { background: rgba(255, 255, 255, .14); }

/* links de CTA não devem ganhar o sublinhado global de base.css */
.m-hov-bright:hover,
.m-hov-wash:hover { text-decoration: none; }

/* ícones Lucide inline (antes: <x-import Icon>, que buscava o SVG no unpkg) */
.ic {
  flex: none;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* o sprite não ocupa espaço */
.m-sprite { position: absolute; width: 0; height: 0; overflow: hidden; }

/* o hero do mobile não existe acima de 860px */
.m-hero-m { display: none; }


/* ═══════════════════════════════════════════════════════════════════════
   CAMADA MOBILE — abaixo de 860px
   O !important é necessário: o design deste site vive em style="" inline,
   e nenhum seletor vence um atributo inline sem ele.
   ═══════════════════════════════════════════════════════════════════════ */
@media (max-width: 859px) {

  /* ── 1. hero: estrutura própria, não o desktop reempacotado ─────────── */
  #topo { display: none; }

  .m-hero-m {
    display: flex;
    flex-direction: column;
    min-height: calc(100svh - 64px);
    box-sizing: border-box;
    padding: 32px 20px 0;
    background: linear-gradient(180deg, #FFFFFF 0%, #FFFFFF 22%, #F5F6FF 62%, #E8EBFF 100%);
  }

  .m-hm-eyebrow {
    display: flex; align-items: center; gap: 10px;
    font-size: 12px; line-height: 16px; font-weight: 700;
    letter-spacing: .08em; text-transform: uppercase;
    color: var(--text-brand);
  }
  .m-hm-rule { width: 24px; height: 1px; background: var(--indigo-300); flex: none; }

  .m-hm-h1 {
    margin: 16px 0 0;
    font-family: var(--font-display); font-weight: 800;
    font-size: clamp(30px, 8.6vw, 36px); line-height: 1.12;
    letter-spacing: -.035em; color: var(--text-primary);
    text-wrap: balance;
  }

  .m-hm-sub {
    margin: 16px 0 0;
    font-size: 16px; line-height: 26px; color: var(--text-secondary);
    text-wrap: pretty;
  }

  .m-hm-cta {
    margin-top: 28px;
    display: flex; align-items: center; justify-content: center; gap: 12px;
    height: 60px; border-radius: 12px;
    background: #25D366; color: #06281B;
    font-size: 17px; font-weight: 700; letter-spacing: -.015em;
    box-shadow: 0 4px 14px rgba(37, 211, 102, .30);
  }
  .m-hm-cta:hover { color: #06281B; text-decoration: none; filter: brightness(1.06); }

  .m-hm-trust {
    margin-top: 14px;
    display: flex; align-items: center; gap: 8px;
    font-size: 14px; line-height: 22px; color: var(--text-secondary);
  }
  .m-hm-trust .ic { stroke: var(--primary); stroke-width: 2.5; }

  /* a superfície do resultado: sobe do rodapé da dobra e é cortada pela
     borda da tela de propósito — o corte convida a rolar (NN/g) */
  .m-hm-vis {
    margin-top: 28px;
    flex: 1 1 auto; min-height: 0;
    box-sizing: border-box;
    padding: 16px 16px 0;
    border-radius: 20px 20px 0 0;
    background: var(--surface-1);
    box-shadow: 0 -2px 24px rgba(30, 27, 75, .12);
    display: flex; flex-direction: column; gap: 16px;
  }
  .m-hm-vis > * { flex: none; }

  .m-hm-busca {
    display: flex; align-items: center; gap: 10px;
    height: 44px; padding: 0 14px; border-radius: var(--r-full);
    background: var(--neutral-100);
    font-size: 15px; color: var(--text-secondary);
  }
  .m-hm-busca .ic { stroke: var(--neutral-500); }

  .m-hm-res { display: flex; flex-direction: column; gap: 6px; }
  .m-hm-res-sep { padding-top: 16px; border-top: 1px solid var(--border-subtle); gap: 4px; }
  .m-hm-nome {
    font-family: var(--font-display); font-weight: 700;
    font-size: 17px; line-height: 22px; letter-spacing: -.02em;
    color: var(--indigo-700);
  }
  .m-hm-meta { display: flex; align-items: center; gap: 8px; font-size: 13px; line-height: 18px; color: var(--text-secondary); }
  .m-hm-estrelas { color: #B45309; letter-spacing: 1px; }
  .m-hm-aberto { color: #15803D; font-weight: 600; }
  .m-hm-chips { display: flex; gap: 8px; margin-top: 6px; }
  .m-hm-chip {
    flex: 1 1 0; display: inline-flex; align-items: center; justify-content: center; gap: 6px;
    height: 36px; border-radius: var(--r-full);
    background: var(--surface-icon); color: var(--indigo-700);
    font-size: 13px; font-weight: 600;
  }
  .m-hm-chip-wa { background: #25D366; color: #06281B; font-weight: 700; }
  .m-hm-url { font-size: 13px; line-height: 18px; color: #15803D; }
  .m-hm-titulo {
    font-family: var(--font-display); font-weight: 700;
    font-size: 16px; line-height: 22px; letter-spacing: -.02em;
    color: var(--indigo-700);
  }
  .m-hm-desc { font-size: 13px; line-height: 20px; color: var(--text-secondary); }

  /* ── 2. o header nasce do mesmo branco do hero ──────────────────────── */
  /* a tarja branca só incomodava porque batia num hero navy; agora some */
  .m-padbar > header {
    background: #FFFFFF !important;
    border-bottom-color: transparent !important;
    -webkit-backdrop-filter: none !important;
    backdrop-filter: none !important;
    transition: border-bottom-color var(--t-hover), box-shadow var(--t-hover);
  }
  /* ao descolar do topo, volta o filete para separar do conteúdo */
  .m-padbar > header.m-head-on {
    border-bottom-color: var(--border-subtle) !important;
    box-shadow: var(--sh-xs);
  }
  /* o menu com rolagem horizontal mostrava um item e escondia quatro, sem
     nenhum sinal de que rolava. No mobile o header fica só com marca e CTA;
     os mesmos links estão no rodapé. */
  .m-padbar > header nav { display: none !important; }
  .m-padbar > header > div { gap: 16px !important; height: 64px !important; }

  /* ── 3. terrenos: família clara contínua + dois momentos escuros ─────
     "Não colora todas as seções — uma em cada cinco serve." (Tilda)
     Eram nove trocas de fundo; no mobile cada seção é uma tela cheia e
     isso vira pilha de blocos avulsos. */
  .m-s2 {
    background: linear-gradient(180deg, #E8EBFF 0%, var(--bg-soft) 160px, var(--bg-soft) 100%) !important;
    border-bottom: 0 !important;
  }
  .m-s4, .m-s10 { background: var(--bg-soft) !important; }
  .m-s8 { background: var(--bg-soft) !important; }  /* era --bg-tint: um terreno a menos */
  .m-s3, .m-s5, .m-s7, .m-s9 { background: var(--bg-page) !important; }

  /* os filetes entre seções claras marcavam a borda dos "blocos" */
  .m-s4, .m-s9, .m-s10 { border-top: 0 !important; }
  .m-s4 { border-bottom: 0 !important; }

  /* ── 4. ritmo vertical: escala de 8, 64px por seção ─────────────────── */
  .m-padbar > section { padding-top: 64px !important; padding-bottom: 64px !important; }
  .m-padbar > section.m-hero-m { padding-top: 32px !important; padding-bottom: 0 !important; }
  .m-s2 { padding-top: 32px !important; padding-bottom: 32px !important; }
  .m-s6 { padding-top: 0 !important; padding-bottom: 0 !important; }

  /* ── 5. a barra fixa vira botão flutuante ───────────────────────────
     A tarja escura de largura total comia ~84px permanentes de leitura. */
  .m-bar {
    left: auto; right: 20px; bottom: 20px;
    width: 60px; height: 60px;
    padding: 0; border-top: 0; border-radius: var(--r-full);
    background: none;
    -webkit-backdrop-filter: none; backdrop-filter: none;
    transform: translate3d(0, 150%, 0);
  }
  .m-bar.m-bar-on { transform: translate3d(0, 0, 0); }
  /* o <a> traz width/padding/border-radius/font-size no style inline: sem
     !important o inline vence e o botão continua retangular com rótulo */
  .m-bar a {
    width: 60px !important; height: 60px !important; min-height: 0 !important;
    padding: 0 !important; gap: 0 !important;
    border-radius: var(--r-full) !important;
    box-shadow: 0 6px 20px rgba(15, 23, 42, .22), 0 2px 6px rgba(15, 23, 42, .12);
    /* esconde o rótulo sem tirá-lo do DOM: o leitor de tela continua lendo */
    font-size: 0 !important;
  }
  .m-bar a svg { width: 30px !important; height: 30px !important; flex: none; }

  /* ── 6. o branco depois do rodapé ───────────────────────────────────
     .m-padbar reservava 84px para a barra fixa, mas o wrapper é branco e o
     rodapé é quase preto: sobrava uma faixa branca colada embaixo dele.
     Sem barra, não há o que reservar. */
  .m-padbar { padding-bottom: 0; }
}

/* quem pediu menos movimento não deve ver o botão deslizar */
@media (max-width: 859px) and (prefers-reduced-motion: reduce) {
  .m-bar { transition: none; }
}