/* Faixas de tela das páginas de conteúdo (SPA/RESPONSIVIDADE.md). Depois do CSS da página; os ajustes de faixa da página vêm depois deste. */

@media (min-width:1024px) and (max-width:1279px){
  .pg .nav-in{padding:0 24px}
  .pg .nav-logo{padding-right:24px}
  .pg .nav-links{gap:18px;font-size:14.5px}
  .pg .nav-links a,.pg .nav-acc,.pg .btn-nav{white-space:nowrap}
  .pg .nav .nav-right{gap:18px;padding-left:20px;font-size:14.5px}
  .pg .btn-nav{padding:0 14px;font-size:14.5px}
}

@media (max-width:1279px){
  .hero-g{gap:48px}
  .sp{gap:48px}
  .ex-g{grid-template-columns:repeat(2,minmax(0,1fr))}
  .pl-w{max-width:calc(100% - 56px);margin-left:auto;margin-right:auto}
  .lnav .wrap{overflow-x:auto;scrollbar-width:none;justify-content:safe center}
  .lnav .wrap::-webkit-scrollbar{display:none}
  .lnav ol{flex:none}
}

@media (max-width:1023px){
  .pg main{--gutter:24px}
  html{scroll-padding-top:calc(var(--nav-h) + var(--banner-h,0px) + 56px + 16px)}
  .wrap,.in{padding-left:var(--gutter);padding-right:var(--gutter)}

  .hero-g{grid-template-columns:minmax(0,1fr);gap:32px;padding-top:32px;padding-bottom:40px}
  .topo .lead{max-width:60ch}
  .vis,.vis-w,.vis-f{width:100%;max-width:564px;margin-left:auto;margin-right:auto}

  .ben{grid-template-columns:1fr}
  .ben li,.ben li+li{padding:20px 0;border-left:0}
  .ben li+li{border-top:1px solid var(--n200)}

  .lnav .wrap{justify-content:flex-start;overflow-x:auto;scrollbar-width:none;-webkit-overflow-scrolling:touch}
  .lnav .wrap::-webkit-scrollbar{display:none}
  .lnav ol{gap:0;flex:none}

  .band{padding:64px 0}
  .sp{grid-template-columns:minmax(0,1fr);gap:24px}
  .sp-h .ans,.sh .ans{max-width:60ch}
  .sp+.sp{margin-top:48px;padding-top:48px}
  .dn-p{grid-template-columns:1fr}
  .dn+.dn{border-left:0;border-top:1px solid var(--n200)}
  .stp,.stg{grid-template-columns:repeat(2,minmax(0,1fr));gap:32px 32px}
  .stp li::after,.stp li+li::after{display:none}
  .ca-f{flex-direction:column;align-items:stretch}
  .ca-f .nt{max-width:none}
  .cto,.cta-b{flex-wrap:wrap}
  .pl-w,.cmp-w{max-width:none}
  .pl-h .stamp{display:none}
  .pl-h:has(.stamp) .pl-n::after{content:'Mais completa';display:block;width:max-content;margin:6px auto 0;padding:2px 10px;border-radius:var(--r-full);background:var(--white);border:1.5px solid var(--rusty);color:var(--n900);font-size:12.5px;font-weight:600}
}

@media (max-width:767px){
  .pg main{--gutter:16px}
  .wrap,.in{padding-left:var(--gutter);padding-right:var(--gutter)}
  .h2,.sh .h2,.sp-h .h2,.end .h2{font-size:24px}
  .ans,.topo .lead,.end p{font-size:17px}
  .sup,.ben p,.stp p,.stg p{font-size:14px}
  .nt{font-size:15px}
  .band{padding:48px 0}
  .sh{margin-bottom:28px}

  .hero-b,.mh-b{flex-direction:column;align-items:stretch}
  .btn{min-height:44px;font-size:16px}
  .btn-lg{min-height:48px;font-size:16px}
  .hero-b .btn,.cta-b .btn,.cto .btn{width:100%}

  .vis:has(.cal){height:auto;padding:20px 16px 16px;display:flex;flex-direction:column;align-items:center}
  .vis:has(.cal)>img{position:static;height:260px;width:auto}
  .vis .lead-l{display:none}
  .vis .cal{position:static;display:grid;gap:8px;width:100%;margin-top:16px}
  .vis .cal li{position:static;width:auto;top:auto!important;right:auto}

  .pl-w{margin:0}
  .pl,.pl thead,.pl tbody,.pl tfoot,.pl tr{display:block;width:100%}
  .pl colgroup,.pl-l0{display:none}
  .pl thead tr,.pl tbody tr,.pl tfoot tr{display:grid;grid-template-columns:1fr 1fr;column-gap:10px}
  .pl-h{border-radius:var(--r-lg);border-bottom:1.5px solid var(--n200)}
  .pl-n{font-size:15px;padding:12px 8px}
  .pl-pr{padding:12px 8px}
  .pl-pr b{font-size:20px}
  .pl-pr i{display:block;margin:2px 0 0}
  .pl tbody th{grid-column:1/-1;padding:16px 0 8px;border-top:0;font-size:15px}
  .pl tbody th small{font-size:14px}
  .pl tbody td,.pl tbody tr:last-child td{padding:12px 8px;border:1.5px solid var(--n200);border-radius:var(--r-md);font-size:15px}
  .pl tbody td::before{display:none}
  .pl td>span{flex-direction:column;gap:4px}
  .pl-f td{border:0!important;padding:12px 0 0!important}

  .cmp,.cmp thead,.cmp tbody,.cmp tr{display:block}
  .cmp thead tr,.cmp tbody tr{display:flex;flex-wrap:wrap}
  .cmp thead th,.cmp td{flex:1 1 0;min-width:0}
  .cmp thead th:first-child{display:none}
  .cmp tbody th{flex:1 0 100%}
  .cmp th,.cmp td{padding:10px 10px;font-size:14.5px}
  .cmp thead th{font-size:13.5px}
  .cmp tbody th{width:auto;padding:14px 10px 4px;background:var(--n50);font-size:15px}
  .cmp tbody td{border-top:0}
  .cmp tbody tr{border-top:1px solid var(--n200)}

  .ex-g,.stp,.stg,.dn-g{grid-template-columns:1fr}
  .ls.no{grid-template-columns:1fr}
}

@media (max-width:359px){
  .pg main{--gutter:12px}
  .vis:has(.cal)>img{height:220px}
}

@media (orientation:landscape) and (max-height:500px){
  .hero-g{padding-top:24px;padding-bottom:28px}
  .lnav{position:static}
  html{scroll-padding-top:calc(var(--nav-h) + var(--banner-h,0px) + 16px)}
}

@media (pointer:coarse) and (min-width:1024px){
  .pg .nav-acc{min-height:44px}
  .pg .social a{width:44px;height:44px}
}
@media (pointer:coarse){
  .bc a{display:inline-flex;align-items:center;min-height:44px;padding:0 6px;margin:-12px -6px}
  .btn{min-height:44px}
  .btn-lg{min-height:48px}
  .lnav ol a{min-height:44px}
  .lk{padding:13px 0;margin:-13px 0}
  .faq summary{min-height:56px}
}