/* Amper — responsive layer. Overrides inline desktop styles below breakpoints. */
@media (min-width: 768px){ .nav-drawer, .sticky-cta { display: none !important; } }
/* Mini-card flutuante é só desktop — no mobile a barra .sticky-cta já cobre. */
@media (max-width: 767px){ .float-cta { display: none !important; } }
@media (max-width: 1080px){
.hiw-head{grid-template-columns:1fr !important;gap:28px !important;}
.hiw-steps{grid-template-columns:1fr 1fr !important;}
.hiw-step{border-right:none !important;border-bottom:1px solid var(--ink-100) !important;}
.hiw-step:last-child{border-bottom:none !important;}
.footer-cols{grid-template-columns:1fr 1fr !important;}
.footer-cols > div:first-child{grid-column:1 / -1;}
.step-shell{grid-template-columns:1fr !important;}
.sched-grid{grid-template-columns:1fr !important;}
.offer-grid{grid-template-columns:1fr !important;gap:32px !important;}
.stats-grid{grid-template-columns:1fr 1fr !important;}
.stats-grid > div{border-left:none !important;padding-left:0 !important;}
.feat-grid{grid-template-columns:1fr !important;}
.feat-grid > div{grid-column:auto !important;grid-row:auto !important;}
.partners-grid{grid-template-columns:repeat(3,1fr) !important;}
.posts-grid{grid-template-columns:1fr !important;}
}
@media (max-width: 1080px) and (min-width: 861px){
.hero-grid{gap:36px !important;}
.hero-grid h1{font-size:clamp(38px,4.4vw,56px) !important;}
.hero-section{padding-left:28px !important;padding-right:28px !important;}
}
@media (max-width: 860px){
.hero-grid{grid-template-columns:1fr !important;gap:44px !important;max-width:640px !important;}
.hero-section{padding:96px 20px 48px !important;}
.hero-grid{margin:0 auto !important;}
.hero-sim-card{max-width:none !important;justify-self:stretch !important;}
/* Item de grid não encolhe abaixo do min-content por padrão (min-width:auto
   implícito) — com 1 coluna só, isso fazia o texto do hero forçar a coluna
   inteira mais larga que a tela e vazar pra fora (cortando "Sem pressa," e o
   card da direita). min-width:0 remove esse piso e deixa o texto quebrar
   normalmente dentro da largura real disponível. */
.hero-grid, .hero-parallax-text, .hero-sim-card{min-width:0 !important;}
}
@media (max-width: 767px){
html,body{overflow-x:hidden;max-width:100vw;}
img,svg,video{max-width:100%;}
.stats-bar{padding:24px 20px !important;}
.stats-grid{gap:20px !important;}
.stats-grid > div > div:first-child{font-size:26px !important;}
.feat-grid > div{min-height:0 !important;padding:24px 20px !important;}
.feat-grid h3{font-size:28px !important;}
.partners-grid{grid-template-columns:repeat(2,1fr) !important;gap:16px !important;}
h1{font-size:clamp(34px,9.5vw,42px) !important;}
h2{font-size:clamp(28px,7.6vw,34px) !important;}
/* :not(.hero-pin) — o Hero também é uma <section>, mas ele já controla o
   próprio respiro internamente (.hero-section, mais abaixo). Essa regra
   genérica caindo nele também empurrava a foto de fundo pra dentro, sobrando
   uma borda preta (o fundo escuro do .hero-pin) em volta — foi o "banner
   ruim" que o Rian reportou. */
section:not(.hero-pin){padding-left:20px !important;padding-right:20px !important;padding-top:56px !important;padding-bottom:56px !important;}
.hero-section{padding:72px 20px 40px !important;}
.hero-sim-card{padding:22px !important;border-radius:20px !important;}
.turbo-section{padding:56px 16px !important;}
.cta-band{padding:36px 24px !important;border-radius:22px !important;}
.hero-grid{gap:28px !important;}
.hero-section p{font-size:16px !important;}
.hero-trust{flex-direction:column !important;align-items:flex-start !important;gap:12px !important;}
/* Referência do design (visto num viewport maior, ~550px) fica bem mais
   compacto que o nosso mobile real — o texto do hero e o espaço entre
   "como funciona" e os steps estavam com folga grande demais pra tela de
   celular de verdade. Aperta esses dois pontos específicos. */
.hero-grid h1{margin-bottom:14px !important;}
.hiw-head{margin-bottom:36px !important;}
.hero-sim-card{padding:20px 18px !important;border-radius:18px !important;}
.nav-inner{padding:14px 20px !important;}
.nav-links,.nav-actions{display:none !important;}
.nav-burger{display:inline-flex !important;}
.sticky-cta{display:block !important;}
footer{padding:64px 20px 110px !important;}
input,select,textarea{font-size:16px !important;}
/* Mesmo problema do hero-grid: flex item não encolhe abaixo do seu
   min-content por padrão, e com font-size 24px o placeholder "ABC-1D23"
   exigia mais espaço que a caixa tinha — cortava o último caractere. */
.plate-input{font-size:24px !important;letter-spacing:0.1em !important;min-width:0 !important;}
.btn{white-space:normal;}
.hiw-steps{grid-template-columns:1fr !important;}
.hiw-step{min-height:0 !important;padding:24px 20px !important;}
.hiw-step > div:first-child{margin-bottom:16px !important;}
.cta-band{grid-template-columns:1fr !important;padding:36px 22px !important;gap:24px !important;border-radius:20px !important;}
.cta-band h2 br{display:none;}
.cta-band-cta{text-align:left !important;}
.cta-band-cta .btn{width:100%;}
.sec-head{margin-bottom:36px !important;}
.testi-grid{grid-template-columns:1fr !important;}
.testi-grid > div{min-height:220px !important;padding:24px !important;}
.faq-q{padding:18px 16px !important;}
.faq-q > span:first-child{font-size:16px !important;}
.faq-a{padding:0 16px 20px !important;}
.footer-cta{grid-template-columns:1fr !important;padding:36px 22px !important;gap:16px !important;border-radius:20px !important;}
.footer-cta h2 br{display:none;}
.footer-cta-right{text-align:left !important;}
.footer-cta-right p{margin-left:0 !important;max-width:none !important;margin-bottom:20px !important;}
.footer-cta-right .btn{width:100%;}
.footer-cols{gap:28px !important;margin-bottom:40px !important;}
.footer-bottom{flex-direction:column !important;align-items:flex-start !important;}
.simnav-inner{padding:10px 16px 12px !important;gap:10px !important;flex-wrap:wrap !important;}
.simnav-progress{order:3;flex:1 1 100% !important;max-width:none !important;margin:0 !important;}
.simnav-label{display:none !important;}
.simnav-steps{justify-content:space-between;}
.step-shell{padding:32px 20px 96px !important;gap:0 !important;}
.step-shell aside{display:none !important;}
.grid-brands{grid-template-columns:1fr 1fr !important;}
.grid-models{grid-template-columns:1fr !important;}
.grid-years{grid-template-columns:repeat(3,1fr) !important;}
.grid-cond{grid-template-columns:1fr !important;}
.grid-2{grid-template-columns:1fr !important;}
.analyzing-wrap{padding:56px 20px !important;}
.analyzing-ring{width:84px !important;height:84px !important;margin-bottom:24px !important;}
.analyzing-ring svg{width:100% !important;height:100% !important;}
.analyzing-ring svg + div svg{width:28px !important;height:28px !important;}
.analyzing-title{font-size:24px !important;margin-bottom:20px !important;}
.analyzing-phase{padding:10px 14px !important;}
.analyzing-phase span{font-size:13px !important;}
.offer-wrap{padding:28px 20px 90px !important;}
.offer-card{padding:28px 20px !important;border-radius:20px !important;}
.offer-price{font-size:44px !important;}
.offer-price-big{font-size:54px !important;}
.offer-scheduler{padding:24px 16px !important;}
.date-grid{display:flex !important;overflow-x:auto !important;gap:8px !important;padding-bottom:6px !important;scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch;}
.date-grid > button{flex:0 0 68px;scroll-snap-align:start;}
.slot-grid{grid-template-columns:1fr 1fr !important;}
.offer-ctas .btn{min-width:0 !important;flex:1 1 100% !important;}
.sched-wrap{padding:28px 20px 90px !important;}
.success-wrap{padding:56px 20px 90px !important;}
.success-check{width:64px !important;height:64px !important;margin-bottom:20px !important;}
.success-check svg{width:32px !important;height:32px !important;}
}