/* JW FLOW BUSINESS · RESPONSIVE ADAPTIVE V5 */

/*
  Objetivo:
  Ajustar a landing para telas pequenas, médias, grandes e ultrawide
  sem alterar a estrutura principal da página.
*/

/* Base refinada */
html{
  overflow-x:hidden;
}

body{
  overflow-x:hidden;
}

.wrap{
  width:min(var(--max,1240px),calc(100% - 40px));
}

/* Evita que elementos fiquem exageradamente largos */
.section-head,
.hero-grid,
.highlight-grid,
.compare,
.charts,
.module,
.grid-2,
.grid-3,
.grid-4,
.plans,
.steps{
  min-width:0;
}

.card,
.panel,
.mockup,
.step,
.report-card{
  min-width:0;
}

/* Imagens/assets futuros nunca estouram */
img,
svg,
video,
canvas{
  max-width:100%;
  height:auto;
}

/* Desktop grande comum */
@media (min-width:1440px){
  :root{
    --max:1360px;
  }

  .hero{
    padding-top:124px !important;
    padding-bottom:76px !important;
  }

  .hero-grid{
    grid-template-columns:minmax(0,1.08fr) minmax(420px,.82fr);
    gap:76px;
  }

  .mockup{
    max-width:560px;
    justify-self:end;
  }

  section.block{
    padding-top:76px;
    padding-bottom:76px;
  }

  .card{
    padding:26px;
  }
}

/* Monitor 34 ultrawide / 21:9 */
@media (min-width:1700px){
  :root{
    --max:1500px;
  }

  .nav-inner{
    height:82px;
  }

  .hero{
    min-height:calc(100vh - 82px);
    display:flex;
    align-items:center;
    padding-top:86px !important;
    padding-bottom:86px !important;
  }

  .hero-grid{
    width:100%;
    grid-template-columns:minmax(0,1fr) minmax(460px,.78fr);
    gap:92px;
  }

  h1{
    max-width:980px;
    font-size:clamp(5.8rem,6vw,8.2rem) !important;
  }

  .hero p{
    max-width:820px;
    font-size:1.24rem;
  }

  .mockup{
    max-width:590px;
  }

  .score b{
    font-size:3.65rem;
  }

  .grid-3{
    grid-template-columns:repeat(3,minmax(0,1fr));
  }

  .grid-4{
    grid-template-columns:repeat(4,minmax(0,1fr));
  }

  .plans{
    grid-template-columns:repeat(4,minmax(0,1fr));
  }

  .steps{
    grid-template-columns:repeat(5,minmax(0,1fr));
  }
}

/* Monitor 43 ultrawide e telas muito grandes */
@media (min-width:2100px){
  :root{
    --max:1660px;
  }

  body.jw-cinematic-v4::before{
    background-size:72px 72px !important;
  }

  .hero-grid{
    grid-template-columns:minmax(0,1.05fr) minmax(520px,.75fr);
    gap:118px;
  }

  h1{
    max-width:1080px;
    font-size:clamp(6.4rem,5.6vw,9rem) !important;
  }

  .hero p{
    max-width:900px;
    font-size:1.32rem;
  }

  .mockup{
    max-width:650px;
  }

  .section-head{
    margin-bottom:36px;
  }

  section.block{
    padding-top:88px;
    padding-bottom:88px;
  }

  .card{
    padding:30px;
  }

  .icon{
    width:50px;
    height:50px;
    border-radius:19px;
  }
}

/* Evita página gigante demais em telas absurdamente largas */
@media (min-width:2600px){
  :root{
    --max:1760px;
  }

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

  h1{
    font-size:8.8rem !important;
  }
}

/* Notebook e desktop menor */
@media (max-width:1280px){
  :root{
    --max:1160px;
  }

  .hero-grid{
    grid-template-columns:minmax(0,1fr) minmax(360px,.78fr);
    gap:42px;
  }

  h1{
    font-size:clamp(3.7rem,7vw,6.3rem) !important;
  }

  .mockup{
    max-width:500px;
  }

  .nav-links a{
    padding-left:10px;
    padding-right:10px;
    font-size:.84rem;
  }
}

/* Tablet horizontal / telas intermediárias */
@media (max-width:1080px){
  :root{
    --max:920px;
  }

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

  .hero-grid{
    grid-template-columns:1fr;
    gap:34px;
  }

  .mockup{
    justify-self:center;
    width:100%;
    max-width:620px;
  }

  h1{
    max-width:860px;
    font-size:clamp(3.2rem,10vw,5.8rem) !important;
  }

  .hero p{
    max-width:820px;
  }

  .section-head{
    align-items:flex-start;
  }

  .grid-4,
  .plans{
    grid-template-columns:repeat(2,minmax(0,1fr));
  }

  .steps{
    grid-template-columns:repeat(2,minmax(0,1fr));
  }
}

/* Tablet vertical */
@media (max-width:860px){
  .wrap{
    width:min(100% - 32px,var(--max,760px));
  }

  .nav-inner{
    height:68px;
  }

  .brand-title strong{
    font-size:.95rem;
  }

  .nav .btn{
    min-height:40px;
    padding-left:14px;
    padding-right:14px;
    border-radius:14px;
    font-size:.84rem;
  }

  .hero-actions{
    gap:10px;
  }

  .grid-2,
  .grid-3,
  .grid-4,
  .compare,
  .charts,
  .module,
  .plans,
  .steps,
  .features,
  .mock-grid{
    grid-template-columns:1fr !important;
  }

  .module-title{
    padding:22px;
  }

  .bars{
    height:170px;
  }
}

/* Celular grande */
@media (max-width:720px){
  .wrap{
    width:calc(100% - 28px);
  }

  .nav{
    position:sticky;
  }

  .nav-inner{
    height:64px;
  }

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

  .brand-title strong{
    font-size:.9rem;
  }

  .brand-title small{
    display:none !important;
  }

  .nav .btn{
    min-height:38px;
    padding:0 12px;
    font-size:.78rem;
  }

  .hero{
    padding-top:42px !important;
    padding-bottom:28px !important;
  }

  .eyebrow{
    font-size:.65rem;
    letter-spacing:.13em;
    padding:8px 11px;
  }

  h1{
    font-size:clamp(2.45rem,13vw,4rem) !important;
    line-height:.92 !important;
    letter-spacing:-.078em !important;
  }

  h2{
    font-size:clamp(1.85rem,9.8vw,3rem) !important;
    line-height:1 !important;
  }

  h3{
    font-size:1.06rem;
  }

  .hero p,
  .section-head p,
  .card p,
  .quote small,
  .cta p{
    font-size:.96rem;
    line-height:1.6;
  }

  .hero-actions{
    width:100%;
  }

  .hero-actions .btn{
    width:100%;
  }

  .trust-row{
    gap:8px;
  }

  .chip{
    font-size:.76rem;
    padding:8px 10px;
  }

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

  .score{
    padding:18px;
    border-radius:22px;
  }

  .score b{
    font-size:2.65rem;
  }

  .ring{
    width:74px;
    height:74px;
  }

  .mini{
    padding:14px;
    border-radius:18px;
  }

  section.block{
    padding-top:38px;
    padding-bottom:38px;
  }

  .section-head{
    margin-bottom:18px;
  }

  .card{
    padding:18px;
    border-radius:22px !important;
  }

  .panel{
    border-radius:24px !important;
  }

  .highlight{
    padding:20px;
  }

  .quote{
    font-size:clamp(1.45rem,7.5vw,2.35rem) !important;
  }

  .bars{
    height:150px;
    padding:10px;
    gap:6px;
    overflow:hidden;
  }

  .bar:after{
    font-size:.68rem;
    bottom:-22px;
  }

  .donut{
    width:150px;
    height:150px;
  }

  .donut span{
    font-size:1.35rem;
  }

  .cta{
    padding-top:46px;
    padding-bottom:64px;
  }

  .cta-box{
    padding:24px 18px;
  }

  /* Reduz efeitos no mobile para manter leve */
  .jw-cursor-glow,
  .hero::after{
    display:none !important;
  }

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

/* Celulares pequenos */
@media (max-width:420px){
  .wrap{
    width:calc(100% - 22px);
  }

  .nav-inner{
    gap:8px;
  }

  .brand{
    gap:8px;
  }

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

  .nav .btn{
    font-size:.72rem;
    padding:0 10px;
  }

  h1{
    font-size:clamp(2.18rem,12.7vw,3.25rem) !important;
  }

  .hero p{
    font-size:.92rem;
  }

  .eyebrow{
    max-width:100%;
    white-space:normal;
    line-height:1.35;
  }

  .mock-head{
    align-items:flex-start;
    flex-direction:column;
    gap:8px;
  }

  .score{
    padding:16px;
  }

  .score b{
    font-size:2.35rem;
  }

  .card{
    padding:16px;
  }

  .icon{
    width:40px;
    height:40px;
    border-radius:15px;
  }

  .item{
    font-size:.9rem;
    padding:10px;
  }
}

/* Celular muito estreito */
@media (max-width:360px){
  .nav .btn{
    display:none;
  }

  .brand-title strong{
    font-size:.84rem;
  }

  h1{
    font-size:2.1rem !important;
  }

  h2{
    font-size:1.75rem !important;
  }
}

/* Altura baixa: notebooks com tela curta */
@media (max-height:760px) and (min-width:1081px){
  .hero{
    min-height:auto !important;
    padding-top:86px !important;
    padding-bottom:54px !important;
  }

  h1{
    font-size:clamp(4.4rem,6vw,6.8rem) !important;
  }

  .mockup{
    transform:none !important;
  }
}