/* ---------- O telefone (13/10, o pedido: a otimização para o celular) ----------
   - os cartões do "como funciona" e os depoimentos viram carrossel de arrastar com o dedo (com os pontos embaixo), em vez de uma pilha longa;
   - o simulador do topo mais justo: os estados numa fileira que desliza, e os toques com 44 px;
   - menos ar em cima e embaixo de cada dobra;
   - o WhatsApp flutuante espera enquanto os botões do topo estão na tela (lá já há o WhatsApp), para não cobrir o simulador. */

/* o toque: 44 px em tudo que se aperta com o dedo */
@media (pointer:coarse){
  .ufs button,.periodos button{min-height:44px;min-width:48px}
  .faixa__ufs button{min-height:44px;min-width:46px}
}

@media (max-width:760px){
  /* o simulador: os 9 estados numa fileira só, que desliza */
  .ufs{flex-wrap:nowrap;overflow-x:auto;scroll-snap-type:x proximity;scrollbar-width:none;margin-inline:-20px;padding:2px 20px 6px;
    -webkit-mask:linear-gradient(90deg,transparent,#000 20px,#000 calc(100% - 28px),transparent);mask:linear-gradient(90deg,transparent,#000 20px,#000 calc(100% - 28px),transparent)}
  .ufs::-webkit-scrollbar{display:none}
  .ufs button{flex:none;scroll-snap-align:start}

  /* os carrosséis: o cartão ocupa quase a tela e o próximo aparece na borda, chamando o dedo */
  .passos,.citacoes{display:flex;gap:14px;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none;overscroll-behavior-x:contain;
    margin-inline:calc(var(--gutter) * -1);padding:4px var(--gutter) 10px;scroll-padding-inline:var(--gutter);max-width:none}
  .passos::-webkit-scrollbar,.citacoes::-webkit-scrollbar{display:none}
  .passo,.citacao{flex:0 0 84%;scroll-snap-align:start;scroll-snap-stop:always}
  .citacao{top:0!important}
  .citacoes{padding-bottom:10px}
  /* os pontos do carrossel (o motion.js os cria): o da vez se alonga */
  .pontos{display:flex;justify-content:center;gap:8px;margin-top:14px}
  .pontos button{width:8px;height:8px;padding:0;border:0;border-radius:999px;background:currentColor;opacity:.25;cursor:pointer;transition:width .4s var(--ease),opacity .4s var(--ease);position:relative}
  .pontos button::before{content:"";position:absolute;inset:-18px -10px}
  .pontos button[aria-current=true]{width:26px;opacity:.9}
  .como .pontos{color:var(--tinta)}
  .clientes .pontos{color:var(--sol)}
}
.pontos{display:none}
@media (max-width:760px){.pontos{display:flex}}

@media (max-width:560px){
  /* menos ar em cada dobra */
  .sec{padding-top:72px;padding-bottom:72px}
  .como,.clientes,.fecho{padding-top:96px}
  .grupo{padding-top:72px}
  .parceiros__placa{padding-top:64px;padding-bottom:110px}
  .sec h2{font-size:clamp(30px,8.4vw,36px)}
  .dobra{padding-top:92px}
  .sub{font-size:15.5px}
  .nota{font-size:11.5px}
}

/* o WhatsApp no telefone: espera os botões do topo saírem da tela */
.zap{transition:transform .35s cubic-bezier(.3,1.5,.5,1),box-shadow .35s var(--ease),opacity .35s var(--ease),translate .45s cubic-bezier(.3,1.4,.5,1),scale .45s cubic-bezier(.3,1.4,.5,1)}
@media (max-width:1000px){.js .zap.espera{opacity:0;translate:0 24px;scale:.6;pointer-events:none}}
@media (prefers-reduced-motion:reduce){.passos,.citacoes{scroll-behavior:auto}}