/* ===== otimizações para celular ===== */
@media (max-width:960px){
  .frente{padding:48px 0}
  .frente .side{margin-bottom:0}
}
@media (max-width:620px){
  html{scroll-padding-top:68px}
  body{font-size:16px;-webkit-text-size-adjust:100%}
  .wrap{padding:0 18px}
  header .wrap{height:58px;gap:12px}
  .logo img{height:30px}
  .logo{font-size:14.5px}
  .burger{width:44px;height:44px}
  .mobnav a{padding:17px 20px;font-size:16px}

  /* hero */
  .hero{padding:34px 0 52px}
  .hero::before{width:560px;height:560px}
  .emblem-wrap{width:92px;margin-bottom:26px}
  .hero h1{font-size:clamp(34px,10.4vw,44px);letter-spacing:-.04em}
  .hero .sub{font-size:17px;margin-top:18px;line-height:1.5}
  .hero .cta{flex-direction:column;align-items:stretch;gap:10px;margin-top:26px}
  .hero .cta .btn{width:100%;padding:16px 24px}
  .chips{flex-wrap:nowrap;overflow-x:auto;justify-content:flex-start;margin:34px -18px 0;padding:2px 18px 10px;gap:8px;scroll-snap-type:x proximity;-webkit-overflow-scrolling:touch;scrollbar-width:none}
  .chips::-webkit-scrollbar{display:none}
  .chip{flex:0 0 auto;scroll-snap-align:start;font-size:13px;padding:9px 15px}
  .hero .meta{margin-top:22px;font-size:12px}
  .marq{padding:13px 0}
  .marq span{font-size:11.5px;letter-spacing:.18em}
  .marq .track{gap:26px}

  /* seções */
  section{padding:56px 0}
  .sec-head{margin-bottom:34px}
  .sec-head h2{font-size:clamp(28px,8.4vw,36px)}
  .sec-head p{font-size:16.5px;margin-top:14px}
  .eyebrow{font-size:11px;letter-spacing:.16em;margin-bottom:14px}
  .intro .wrap>p{font-size:16.5px!important;margin-bottom:34px!important}
  .pillars{gap:12px}
  .pillar{padding:24px 22px}
  .pillar h3{font-size:19px}
  .quote{margin-top:36px;font-size:22px}
  .quote br{display:none}

  /* cartões das frentes */
  .grid{gap:12px}
  .fcard{min-height:0;padding:22px 20px;gap:10px}
  .fcard h3{font-size:19px}
  .fcard .go{padding-top:4px}

  /* detalhamento */
  .frente{gap:20px;padding:40px 0}
  .frente .fnum{font-size:68px;margin-bottom:16px}
  .frente h3{font-size:24px;margin-bottom:12px}
  .frente .lead{font-size:16.5px}
  .items{gap:10px}
  .item{padding:16px 18px}
  .item:hover{transform:none}
  .item span{font-size:15px}

  /* tecnologia */
  .tech-grid{gap:12px}
  .tcard{padding:24px 20px}
  .tcard h3{font-size:20px}
  .tcard:hover{transform:none}
  .mods{gap:8px}
  .note{font-size:13.5px}

  /* indicadores e formulário */
  .kpis{gap:10px}
  .kpi{padding:20px 18px}
  .sform{padding:22px 18px;gap:16px}
  .sform input,.sform textarea{font-size:16px;padding:14px}
  .sform .btn{width:100%;justify-self:stretch;padding:16px}
  .final img{width:76px;margin-bottom:20px}
  .final p{font-size:16.5px}
  .final .big{font-size:21px;margin-top:26px}
  footer{padding:28px 0}
  footer .wrap{flex-direction:column;gap:6px}

  /* menos efeito pesado */
  .blob{display:none}
  .embers .ember:nth-child(n+11){display:none}
  .fcard::after,.tcard::after,.pillar::after,.kpi::after{display:none}
}

@media (max-width:960px){
  section,.final,.tech,.intro{overflow-x:clip}
  .rv.from-l,.rv.from-r{transform:translateY(26px)}
  .rv.from-l.in,.rv.from-r.in{transform:none}
}

@media (max-width:960px){
  section,.final,.tech,.intro{overflow-x:clip}
  .rv.from-l,.rv.from-r{transform:translateY(26px)}
  .rv.from-l.in,.rv.from-r.in{transform:none}
}

.sform label{display:flex;flex-wrap:wrap;align-items:baseline;gap:6px 8px}
.sform label input,.sform label textarea{flex:1 1 100%}

.sform label{display:flex;flex-wrap:wrap;align-items:baseline;gap:6px 8px}
.sform label input,.sform label textarea{flex:1 1 100%}