/* Ferramenta primeiro no celular, páginas do layout site.* (Onda 2, 27/10/2026): Escudo LGPD, Acessibilidade, Velocidade, Assinatura de e-mail
   e Simulador de receita perdida. Mesmo padrão do marca-ferramenta.css, mas com data-sf (as páginas site.* não carregam o CSS da marca).
   Tudo dentro de @media (max-width:640px): no desktop nada muda. Marcação: hero (wrapper sem estilo no desktop), txt (cabeçalho que vira
   display:contents), selo, h1, col (campo e botão), campo, botao, sub, prova. Ordem no celular: selo, título, campo e botão, subtítulo, prova.
   !important só onde o HTML tem style= inline (margens, tamanhos e cor do selo). */
@media (max-width:640px){
  [data-sf=hero]{display:flex;flex-direction:column;padding-bottom:8px}
  [data-sf=txt]{display:contents}

  /* Selo igual ao das ferramentas da marca: texto simples, sem ponto, com respiro abaixo do topo. */
  [data-sf=selo]{order:1;align-self:flex-start;margin:20px 24px 0 !important;gap:0 !important;font-size:11px !important;font-weight:500 !important;letter-spacing:.12em !important;color:#6E6E74 !important}
  [data-sf=selo]>span{display:none}
  [data-sf=h1]{order:2;margin:20px 24px 24px !important;font-size:clamp(28px,8vw,34px) !important;line-height:1.06 !important}
  [data-sf=col] .at-status:empty{min-height:0}
  [data-sf=col]{order:3;margin:0 !important;max-width:none !important;width:auto}
  [data-sf=sub]{order:4;margin:16px 24px 0 !important;max-width:none !important;font-size:15px !important;line-height:1.45 !important}
  [data-sf=prova]{order:5;display:grid;grid-template-columns:1fr 1fr;gap:16px;margin:24px 24px 0 !important;padding-top:20px}
  [data-sf=prova] .at-stat{max-width:none}

  /* Campo de 16 px ou mais (o iPhone não dá zoom) e toque confortável. */
  .at-input,.lw-input,.qz-input{font-size:16px}
  [data-sf=campo]{min-height:48px;padding:12px 16px}
  [data-sf=botao]{min-height:48px;width:100%}

  /* Escudo LGPD e Acessibilidade: campo e botão empilhados, sem o flex 320px que esticaria a altura em coluna. */
  #lg-form,#ac-form{flex-direction:column;flex-wrap:nowrap;gap:12px}
  #lg-form .at-input,#ac-form .at-input{flex:none !important}

  /* Velocidade: três endereços, depois ticket e visitas, botão logo abaixo e a nota por último. */
  [data-sf=form]{display:flex;flex-direction:column}
  [data-sf=urls]{order:1}
  [data-sf=opc]{order:2;margin-top:10px !important}
  [data-sf=botao]{order:3}
  #vl-submit{margin-top:12px !important}
  [data-sf=nota]{order:4}
  [data-sf=form] .at-input{min-height:48px;padding:12px 16px}
  [data-sf=opc] .at-input{flex:1 1 100% !important}

  /* Assinatura de e-mail: o cabeçalho está dentro da coluna esquerda do componente. O subtítulo desce para depois dos campos. */
  .lw-wrap{padding-top:20px;padding-bottom:48px}
  .lw-grid{gap:28px}
  .lw-col-left>[data-sf=selo]{order:-3;margin:0 !important}
  .lw-col-left>[data-sf=h1]{order:-2;margin:0 0 4px !important}
  .lw-col-left>[data-sf=sub]{order:1;margin:0 !important}
  .lw-input{min-height:48px}

  /* Simulador de receita perdida: título, progresso e cartões de segmento à vista; o texto longo e a faixa descem. */
  [data-sf=hero] [data-sf=progresso]{order:3;width:100%;box-sizing:border-box;padding-bottom:12px !important}
  [data-sf=hero] [data-sf=col][style*="max-width:680px"]{order:4;width:100%;box-sizing:border-box;padding-bottom:8px !important}
  [data-sf=hero]:has([data-sf=progresso]) [data-sf=sub]{order:5}
  [data-sf=hero]>[data-sf=faixa]{order:6;margin-bottom:24px}
  [data-sf=hero] .qz-card{padding:14px 16px}
  [data-sf=hero]:has(#rp-stage-1[style*="display: none"]) [data-sf=sub]{display:none}
}