/* ---------- 7 · RESPONSIVO ----------------------------------------------- */
@media(max-width:1080px){
  .grid4{grid-template-columns:repeat(2,1fr);}
  .gband{gap:var(--s6);}
  .num+.num::before{display:none;}
}
@media(max-width:960px){
  .duo,.grid3,.nums,.gband,#cta .box{grid-template-columns:1fr;}
  nav .links{display:none;}
  .sidx{font-size:clamp(72px,16vw,110px);top:var(--s5);}
  h2{max-width:20ch;}
  :root{--gl-blur:14px;}
}
@media(pointer:coarse){
  #metodo{height:auto;padding:var(--sec) var(--gut);}
  .pinwrap{height:auto;}
  .tl{flex-direction:column;gap:var(--s6);}
  .tl::before,.tl::after{display:none;}
  .step{flex:1 1 auto;min-width:0;padding:0;}
}
html.semmov #metodo{height:auto;padding:var(--sec) var(--gut);}
html.semmov .pinwrap{height:auto;}
html.semmov .tl{flex-direction:column;gap:var(--s6);}
html.semmov .tl::before,html.semmov .tl::after{display:none;}
html.semmov .step{flex:1 1 auto;min-width:0;padding:0;}
@media(max-width:700px){
  .grid4{grid-template-columns:1fr;}
  .duo{gap:var(--s4);}
  .panel,#cta .box{padding:var(--pad);}
}
@media(max-width:620px){
  /* navbar suspensa: pílula flutuante em vez de barra colada no topo.
     Ganha respiro lateral e deixa o conteúdo passar por baixo com folga. */
  nav{top:10px;left:10px;right:10px;padding:7px 7px 7px 16px;
    border-radius:100px;border:1px solid rgba(255,255,255,.11);
    background:rgba(9,7,26,.72);
    box-shadow:0 14px 34px rgba(3,2,12,.55);}
  nav.hide{transform:translateY(calc(-100% - 14px));}
  .logo{font-size:12.5px;letter-spacing:.2em;gap:var(--s2);}
  .tri{width:15px;height:18px;}
  nav .btn{display:none;}
  nav .navr{gap:var(--s2);}
  #menubtn{padding:9px 14px;font-size:11px;gap:8px;}
  #notebtn{bottom:14px;right:14px;padding:9px 13px;font-size:10.5px;opacity:.86;}
  .sidx{font-size:clamp(60px,19vw,92px);right:var(--gut);top:20px;}
  .cockpit{padding:var(--s5) var(--s4);}
  .lane{gap:var(--s3);}
  .lane .lv{display:none;}
  .lane .ln{width:8ch;font-size:10.5px;}
  footer .cols{gap:var(--s6);}
  footer .fl{flex:1 1 44%;}
  .ph{gap:var(--s3);}
}
@media(max-width:400px){
  nav .logo span{letter-spacing:.14em;}
  .chip{font-size:10px;padding:8px 12px;}
}

/* --- hero em tela baixa: a dobra 1 tem que caber ---------------------- */
@media(max-width:620px),(max-height:620px){
  .heromq{display:none;}   /* colidia com as chips: ~2px em retrato, 24px em paisagem */
}

/* Celular em retrato. A dobra 1 tem eyebrow + título + parágrafo + 2 CTAs +
   3 chips; em 568px de altura só cabe se cada peça encolher junto. Escala
   proporcional, não corte: nada some, tudo fica menor na mesma medida. */
@media(max-width:620px){
  :root{--sec:clamp(76px,15vw,120px);--blk:clamp(36px,8vw,56px);}
  #hero{padding-top:86px;padding-bottom:var(--s7);}
  #hero .eyebrow{font-size:11px;letter-spacing:.12em;margin-bottom:var(--s4);}
  #hero h1{font-size:clamp(33px,9.4vw,46px);max-width:16ch;}
  #hero .sub{font-size:15px;line-height:1.5;margin-top:var(--s4);max-width:46ch;}
  #hero .ctas{margin-top:var(--s5);gap:10px;}
  /* CTA de largura cheia: o polegar acerta sem mirar */
  #hero .ctas .btn{flex:1 1 100%;text-align:center;padding:14px 20px;font-size:14.5px;}
  #hero .chips{margin-top:var(--s4);gap:6px;}
  .chip{padding:7px 11px;letter-spacing:.1em;}
}
@media(max-width:400px){
  #hero{padding-top:80px;padding-bottom:var(--s6);}
  #hero h1{font-size:clamp(30px,8.8vw,38px);}
  #hero .sub{font-size:14.5px;line-height:1.46;margin-top:var(--s3);}
  #hero .ctas{margin-top:var(--s4);}
  #hero .chips{margin-top:var(--s3);}
}

/* Telas baixas (paisagem, ou retrato curto). Aqui a dobra deixa de ser uma
   tela cheia: forçar 100vh só empurraria o conteúdo para fora. */
@media(max-height:720px){
  #hero{padding-top:clamp(76px,10vh,140px);padding-bottom:clamp(52px,7vh,120px);}
  #hero .sub{margin-top:var(--s3);}
}
@media(max-height:560px){
  #hero{min-height:auto;padding-top:78px;padding-bottom:var(--s7);}
  #hero .sub{margin-top:var(--s2);max-width:52ch;}
  #hero .ctas{margin-top:var(--s4);}
  #hero .chips{margin-top:var(--s3);}
  #hero .eyebrow{margin-bottom:var(--s3);}
}
/* Celular deitado. A tela é larga e baixíssima: o parágrafo pode ocupar toda
   a largura para gastar menos linhas, e tudo encolhe junto. */
@media(max-height:440px){
  #hero{padding-top:70px;padding-bottom:var(--s5);}
  #hero .eyebrow{font-size:11px;letter-spacing:.1em;margin-bottom:var(--s3);}
  #hero h1{font-size:clamp(28px,4.4vw,40px);max-width:32ch;}
  #hero .sub{font-size:14px;line-height:1.45;margin-top:var(--s3);max-width:82ch;}
  #hero .ctas{margin-top:var(--s4);gap:10px;}
  #hero .ctas .btn{padding:12px 22px;font-size:14px;min-height:44px;}
  #hero .chips{margin-top:var(--s3);}
  .chip{padding:6px 10px;}
}

/* --- alvos de toque: piso de 44px onde o dedo e o ponteiro ------------ */
nav .links a{padding:14px 0;margin:-14px 0;}   /* area de toque sem mexer no layout */
.skip{min-height:44px;}
@media(pointer:coarse){
  #menubtn{min-height:44px;}
  #notebtn{display:inline-flex;align-items:center;min-height:44px;}
  .ncard .btn,.btn{min-height:44px;}
  .ncard .btn{padding:15px 16px;}
  /* link de rodapé é inline: sem virar bloco, o padding não vira alvo real */
  footer .fl{line-height:1.7;}
  footer .fl a{display:inline-flex;align-items:center;min-height:44px;padding:6px 0;}
  footer .fl br{line-height:0;}
  #menu a.ml{padding:6px 0;}
}

/* --- piso de legibilidade: nada de corpo abaixo de 11px no toque ------ */
@media(pointer:coarse){
  .ptag,.antag,.ncard .full,.step .tag,.ncard .k,.gband .gi .k,
  .ckh .mono,.lane .lv,.lane .ln,.chip,.lgcap,#notebtn,
  .ph .pt,.deliv li .i{font-size:11px;}
  .assur span{font-size:11.5px;}
}