/* Versão MOBILE — todo o conteúdo fica dentro de @media (≤900px): no desktop nada se aplica */
@media(max-width:900px){
/* ===== Versão MOBILE (só carrega em telas ≤ 900px; o desktop não é afetado) =====
   Regra: título -> imagem -> cards 2x2. Sem textos longos. */

/* ---------- Capa ---------- */
.hero{min-height:0;padding-bottom:340px;background-size:auto 340px}
.hero::before{background:linear-gradient(180deg,#000b18 0,rgba(0,11,24,.96) calc(100% - 340px),rgba(0,11,24,.35) calc(100% - 260px),transparent calc(100% - 170px),transparent 100%)}
.hero-body{padding:22px 0 0;flex:none}
.hero-feats{display:none}
.hero-sub{margin:18px 0 0}

/* ---------- Seções "título -> imagem -> cards" ---------- */
.maq,.online,.totens,.caixas,.lp-top{display:flex;flex-direction:column;align-items:center;height:auto;min-height:0;padding:38px 0 42px;overflow:hidden}
.maq-grid,.maq-text,.vo-grid,.vo-text,.totens-grid,.totens-text,.caixas-grid,.caixas-text,.lp-grid,.lp-text{display:contents}

.maq h2,.online h2,.totens h2,.caixas h2,.lp-top h1{order:1;width:min(100% - 40px,560px);max-width:none;margin:0 0 18px;text-align:center;font-size:clamp(24px,7vw,30px);line-height:1.15;text-wrap:balance}
.totens .t-sub,.caixas .t-sub,.lp-top .t-sub{margin-top:10px;font-size:.62em;line-height:1.3}
.maq p,.online p,.totens p,.caixas p{display:none}

/* imagens centralizadas */
.maq .maq-bg,.online .vo-bg{order:2;position:relative;inset:auto;transform:none;display:block;width:min(100% - 24px,520px);max-width:none;height:auto;margin:0 auto 22px;background-size:cover;background-position:center;-webkit-mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent),linear-gradient(180deg,transparent,#000 8%,#000 92%,transparent);mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent),linear-gradient(180deg,transparent,#000 8%,#000 92%,transparent);-webkit-mask-composite:source-in;mask-composite:intersect}
.maq .maq-bg{aspect-ratio:1448/1086}
.online .vo-bg{aspect-ratio:1288/760}
.totens-img,.caixas-img,.lp-img{order:2;width:min(100% - 24px,440px);max-width:none;margin:0 auto 22px;justify-self:auto}
.totens-img img,.caixas-img img,.lp-img img{margin-inline:auto;max-width:none;width:100%}
.lp-img{position:relative}
.lp-top{background-position:62% center}
.lp-top::before{background:linear-gradient(180deg,rgba(2,15,32,.9),rgba(2,15,32,.78) 45%,rgba(2,15,32,.88))}
.lp-stage{order:2;display:flex;flex-direction:column;align-items:center;width:100%;max-width:none;margin:0;min-height:0}
.lp-stage .lp-anim--hero{position:relative;left:auto;top:auto;transform:none;order:0;width:min(100% - 24px,420px);max-width:none;margin:0 auto 22px}
.lp-how .lp-img{order:-1}

/* cards pequenos 2x2 */
.maq .circ-list,.online .circ-list,.totens .circ-list,.caixas .circ-list,.lp-top .circ-list{order:3;display:grid;grid-template-columns:1fr 1fr;gap:8px;width:min(100% - 40px,480px);max-width:none;margin:0}
.circ-list li{flex-direction:column;justify-content:flex-start;align-items:center;gap:6px;padding:11px 6px 10px;text-align:center;font-size:12px;line-height:1.28;border:1.5px solid rgba(27,95,158,.7);border-radius:12px;background:rgba(0,22,52,.55)}
.circ-list i,.maq .circ-list i,.online .circ-list i,.totens .circ-list i{width:36px;height:36px;border-width:1.5px;box-shadow:0 0 8px rgba(0,130,255,.4)}
.circ-list i svg{width:18px;height:18px}
.circ-list li br{display:none}
.vo-cta,.lp-cta{order:4;margin-top:22px;align-self:center}

/* ---------- Home: remove "ideal para" e cards da plataforma ---------- */
.ideal-strip{display:none}
.plat .stage .col,.plat .arrows{display:none}
.plat .stage{display:block;height:auto}
.plat{padding:36px 0 28px}
.plat .sec-title{margin-bottom:6px}
.plat .center img{max-width:440px;margin-inline:auto}

/* ---------- Página /maquininhas ---------- */
.hero--page{padding-bottom:0;background-size:auto;overflow:visible;z-index:60}
.lp-cta{width:auto}
.lp-how{gap:26px}
.lp-sec{padding:38px 0 42px}
.lp-title{font-size:clamp(24px,7vw,30px);margin-bottom:22px}

/* ---------- Ajustes pós-teste no iPhone ---------- */
/* maquininha animada centralizada (o quadro é mais largo à direita para o cartão) */
.lp-anim .lp-frame{transform:translateX(6.5%)}
/* carrossel de clientes um pouco mais rápido */
.clientes .clientes__track{animation-duration:23.3s}

}