/* JW FLOW BUSINESS · MOBILE FIX V9 */
/* Esta camada atua SOMENTE no mobile/tablet pequeno */

@media (max-width: 820px){

  html{
    background:#040b16 !important;
    overflow-x:hidden !important;
    -webkit-text-size-adjust:100%;
  }

  body,
  body.jw-cinematic-v4,
  body.jw-hero-premium-v6,
  body.jw-final-polish-v8{
    background:
      radial-gradient(circle at 20% 10%, rgba(214,179,90,.10), transparent 28%),
      radial-gradient(circle at 82% 16%, rgba(103,232,249,.14), transparent 30%),
      linear-gradient(135deg,#02060d 0%,#071426 52%,#03101d 100%) !important;
    color:#f8fafc !important;
    overflow-x:hidden !important;
  }

  body::before{
    opacity:.26 !important;
    background-image:
      linear-gradient(rgba(246,223,156,.02) 1px,transparent 1px),
      linear-gradient(90deg,rgba(103,232,249,.02) 1px,transparent 1px) !important;
    background-size:34px 34px !important;
  }

  body::after{
    opacity:.18 !important;
  }

  .jw-cursor-glow,
  .hero::after{
    display:none !important;
  }

  .wrap{
    width:calc(100% - 24px) !important;
    max-width:100% !important;
  }

  .nav{
    position:sticky !important;
    top:0 !important;
    z-index:50 !important;
    background:rgba(2,6,23,.92) !important;
    backdrop-filter:blur(14px);
  }

  .nav-inner{
    min-height:64px !important;
    height:auto !important;
    gap:10px !important;
  }

  .brand{
    gap:10px !important;
    min-width:0 !important;
  }

  .brand-mark{
    width:38px !important;
    height:38px !important;
    border-radius:14px !important;
    flex:0 0 auto !important;
  }

  .brand-title{
    min-width:0 !important;
  }

  .brand-title strong{
    font-size:.88rem !important;
    line-height:1.05 !important;
  }

  .brand-title small{
    font-size:.63rem !important;
    letter-spacing:.14em !important;
    line-height:1.2 !important;
  }

  .nav-links{
    display:none !important;
  }

  .nav .btn{
    min-height:38px !important;
    padding:0 12px !important;
    font-size:.78rem !important;
    border-radius:14px !important;
    flex:0 0 auto !important;
  }

  .hero{
    min-height:auto !important;
    padding-top:34px !important;
    padding-bottom:30px !important;
  }

  .hero::before{
    opacity:.34 !important;
    width:min(92vw,520px) !important;
    top:18px !important;
  }

  .hero > .wrap,
  .hero .wrap{
    width:calc(100% - 24px) !important;
  }

  .hero-grid{
    display:grid !important;
    grid-template-columns:1fr !important;
    gap:22px !important;
    align-items:start !important;
  }

  .eyebrow{
    font-size:.65rem !important;
    padding:8px 10px !important;
    line-height:1.25 !important;
    white-space:normal !important;
    max-width:100% !important;
  }

  .hero-logo-lockup{
    width:100% !important;
    max-width:100% !important;
    padding:12px !important;
    gap:10px !important;
    margin:14px 0 16px !important;
    border-radius:20px !important;
    flex-direction:column !important;
    align-items:flex-start !important;
  }

  .hero-logo-lockup img{
    width:min(100%,220px) !important;
    height:auto !important;
  }

  .hero-logo-note{
    width:100% !important;
  }

  .hero-logo-note strong{
    font-size:.88rem !important;
    line-height:1.2 !important;
  }

  .hero-logo-note span{
    font-size:.78rem !important;
    line-height:1.45 !important;
    max-width:none !important;
  }

  .hero h1{
    max-width:8.2ch !important;
    font-size:clamp(2.35rem,15vw,4.1rem) !important;
    line-height:.92 !important;
    letter-spacing:-.075em !important;
    margin-top:6px !important;
    margin-bottom:12px !important;
  }

  .hero p{
    max-width:none !important;
    font-size:.98rem !important;
    line-height:1.6 !important;
    color:rgba(226,236,248,.88) !important;
  }

  .hero-actions{
    display:grid !important;
    grid-template-columns:1fr !important;
    gap:10px !important;
    margin-top:18px !important;
    width:100% !important;
  }

  .hero-actions .btn{
    width:100% !important;
    justify-content:center !important;
  }

  .trust-row{
    display:flex !important;
    flex-wrap:wrap !important;
    gap:8px !important;
    margin-top:16px !important;
  }

  .chip{
    font-size:.76rem !important;
    padding:8px 10px !important;
    line-height:1.2 !important;
  }

  .hero aside,
  .hero .mockup,
  .hero .panel,
  .hero [class*="executive"],
  .hero [class*="dashboard"],
  .hero [class*="mock"]{
    width:100% !important;
    max-width:100% !important;
    margin:0 !important;
    justify-self:stretch !important;
    align-self:stretch !important;
    transform:none !important;
  }

  .mockup{
    padding:16px !important;
    border-radius:24px !important;
  }

  .mock-head{
    gap:8px !important;
    margin-bottom:12px !important;
    flex-wrap:wrap !important;
  }

  .score{
    padding:18px !important;
    border-radius:22px !important;
    grid-template-columns:1fr auto !important;
    gap:14px !important;
  }

  .score b{
    font-size:2.45rem !important;
    line-height:1 !important;
  }

  .ring{
    width:72px !important;
    height:72px !important;
  }

  .mini{
    padding:12px !important;
    border-radius:18px !important;
  }

  .mini strong{
    font-size:.96rem !important;
  }

  section.block{
    padding-top:34px !important;
    padding-bottom:34px !important;
  }

  .section-head{
    display:block !important;
    margin-bottom:18px !important;
  }

  .section-head h2{
    max-width:none !important;
    font-size:clamp(1.85rem,9vw,3rem) !important;
    line-height:1.02 !important;
  }

  .section-head p{
    font-size:.95rem !important;
    line-height:1.6 !important;
  }

  .grid-2,
  .grid-3,
  .grid-4,
  .plans,
  .steps,
  .proof-grid,
  .use-grid,
  .report-grid,
  .bridge,
  .benefit-split,
  .authority-box,
  .compare,
  .charts,
  .module{
    display:grid !important;
    grid-template-columns:1fr !important;
    gap:14px !important;
  }

  .card,
  .panel,
  .step,
  .report-card,
  details.faq{
    background:
      linear-gradient(145deg, rgba(255,255,255,.05), rgba(255,255,255,.015)),
      rgba(8,18,34,.74) !important;
    color:#f8fafc !important;
    border-color:rgba(214,179,90,.12) !important;
    border-radius:22px !important;
    padding:18px !important;
    box-shadow:
      0 20px 56px rgba(0,0,0,.30),
      inset 0 1px 0 rgba(255,255,255,.04) !important;
  }

  .card h3,
  .panel h3,
  .step h3,
  .report-card b,
  details.faq summary{
    color:#f8fafc !important;
  }

  .card p,
  .panel p,
  .step p,
  .report-card p,
  details.faq p,
  .benefit-list span{
    color:rgba(222,233,246,.86) !important;
  }

  .icon{
    width:40px !important;
    height:40px !important;
    border-radius:14px !important;
  }

  .highlight{
    padding:18px !important;
    border-radius:24px !important;
  }

  .quote{
    font-size:clamp(1.35rem,7vw,2rem) !important;
    line-height:1.05 !important;
  }

  .bars{
    height:150px !important;
    gap:6px !important;
    padding:10px !important;
  }

  .donut{
    width:140px !important;
    height:140px !important;
    margin-inline:auto !important;
  }

  .donut span{
    font-size:1.2rem !important;
  }

  .mini-cta{
    display:block !important;
    padding:18px !important;
    border-radius:22px !important;
  }

  .mini-cta .btn{
    width:100% !important;
    margin-top:12px !important;
    justify-content:center !important;
  }

  .faq-list{
    gap:10px !important;
  }

  details.faq summary{
    padding:16px 16px !important;
    font-size:.95rem !important;
  }

  details.faq p{
    padding:0 16px 16px !important;
    font-size:.92rem !important;
  }

  .cta{
    padding-top:40px !important;
    padding-bottom:58px !important;
  }

  .cta-box{
    padding:22px 18px !important;
    border-radius:24px !important;
  }

  .cta-box h2{
    font-size:clamp(1.9rem,9vw,3rem) !important;
  }

  .cta-box p{
    font-size:.95rem !important;
    line-height:1.6 !important;
  }

  .cta-box .btn{
    width:100% !important;
    justify-content:center !important;
  }

  .card:hover,
  .panel:hover,
  .btn:hover,
  .mockup:hover{
    transform:none !important;
  }
}

@media (max-width: 420px){
  .wrap{
    width:calc(100% - 20px) !important;
  }

  .brand-title strong{
    font-size:.82rem !important;
  }

  .brand-title small{
    font-size:.58rem !important;
  }

  .hero h1{
    max-width:7.8ch !important;
    font-size:clamp(2.18rem,14.5vw,3.65rem) !important;
  }

  .hero p{
    font-size:.94rem !important;
  }

  .hero-logo-lockup img{
    width:min(100%,200px) !important;
  }

  .score b{
    font-size:2.25rem !important;
  }

  .ring{
    width:66px !important;
    height:66px !important;
  }

  .chip{
    font-size:.72rem !important;
  }
}

@media (max-width: 360px){
  .nav .btn{
    display:none !important;
  }

  .hero h1{
    font-size:2.05rem !important;
  }

  .section-head h2{
    font-size:1.7rem !important;
  }
}