
/* JW FLOW BUSINESS · HERO PREMIUM ADAPTIVE V6 */

/*
  Objetivo:
  Corrigir o hero em telas grandes/ultrawide sem quebrar mobile.
  Ajustes:
  - centraliza melhor a composição;
  - aproxima o card executivo do texto;
  - reduz vazio excessivo;
  - impede título grudado na borda;
  - deixa o hero mais premium/cinematográfico.
*/

body.jw-hero-premium-v6{
  --flow-stage-max: 1420px;
  --flow-stage-pad: clamp(22px, 4vw, 72px);
}

/* Palco principal do hero */
body.jw-hero-premium-v6 .hero{
  position:relative;
  overflow:hidden;
}

/* Centraliza qualquer wrap/grid dentro do hero */
body.jw-hero-premium-v6 .hero > .wrap,
body.jw-hero-premium-v6 .hero .wrap{
  width:min(var(--flow-stage-max), calc(100vw - var(--flow-stage-pad) * 2)) !important;
  margin-inline:auto !important;
}

/* Corrige grids principais do hero */
body.jw-hero-premium-v6 .hero-grid{
  width:100% !important;
  margin-inline:auto !important;
  align-items:center !important;
}

/* Camada visual central para preencher o vazio sem poluir */
body.jw-hero-premium-v6 .hero::before{
  content:"";
  position:absolute;
  left:50%;
  top:48%;
  width:min(980px, 72vw);
  height:420px;
  transform:translate(-50%,-50%);
  border-radius:999px;
  background:
    radial-gradient(circle at 45% 50%, rgba(103,232,249,.11), transparent 58%),
    radial-gradient(circle at 56% 34%, rgba(214,179,90,.075), transparent 62%);
  filter:blur(24px);
  opacity:.82;
  z-index:-1;
  pointer-events:none;
}

/* Linha premium superior do palco */
body.jw-hero-premium-v6 .hero::after{
  content:"";
  position:absolute;
  left:50%;
  top:34px;
  width:min(1120px, 78vw);
  height:1px;
  transform:translateX(-50%);
  background:linear-gradient(
    90deg,
    transparent,
    rgba(214,179,90,.48),
    rgba(103,232,249,.34),
    transparent
  );
  pointer-events:none;
}

/* Desktop comum e grande */
@media (min-width:1281px){
  body.jw-hero-premium-v6 .hero{
    min-height:auto !important;
    display:block !important;
    padding-top:clamp(78px, 8vh, 116px) !important;
    padding-bottom:clamp(64px, 7vh, 96px) !important;
  }

  body.jw-hero-premium-v6 .hero-grid{
    display:grid !important;
    grid-template-columns:minmax(0, 760px) minmax(360px, 460px) !important;
    justify-content:space-between !important;
    gap:clamp(48px, 5.5vw, 92px) !important;
  }

  body.jw-hero-premium-v6 .hero h1{
    max-width:780px !important;
    font-size:clamp(4.4rem, 5.15vw, 7rem) !important;
    line-height:.89 !important;
    letter-spacing:-.092em !important;
  }

  body.jw-hero-premium-v6 .hero p{
    max-width:680px !important;
    font-size:clamp(1rem, 1.04vw, 1.2rem) !important;
  }

  body.jw-hero-premium-v6 .hero-actions,
  body.jw-hero-premium-v6 .trust-row{
    max-width:720px !important;
  }

  /* Card executivo / mockup do hero */
  body.jw-hero-premium-v6 .hero aside,
  body.jw-hero-premium-v6 .hero .mockup,
  body.jw-hero-premium-v6 .hero .panel,
  body.jw-hero-premium-v6 .hero [class*="executive"],
  body.jw-hero-premium-v6 .hero [class*="dashboard"],
  body.jw-hero-premium-v6 .hero [class*="mock"]{
    justify-self:end !important;
    align-self:center !important;
    width:min(100%, 440px) !important;
    max-width:440px !important;
  }
}

/* Ultrawide 34 polegadas */
@media (min-width:1700px){
  body.jw-hero-premium-v6{
    --flow-stage-max: 1480px;
  }

  body.jw-hero-premium-v6 .hero{
    min-height:min(760px, calc(100svh - 82px)) !important;
    padding-top:clamp(82px, 8vh, 118px) !important;
    padding-bottom:clamp(70px, 7vh, 104px) !important;
  }

  body.jw-hero-premium-v6 .hero-grid{
    grid-template-columns:minmax(0, 800px) minmax(380px, 455px) !important;
    gap:clamp(60px, 6vw, 112px) !important;
  }

  body.jw-hero-premium-v6 .hero h1{
    max-width:820px !important;
    font-size:clamp(5rem, 4.7vw, 7.25rem) !important;
  }

  body.jw-hero-premium-v6 .hero p{
    max-width:700px !important;
  }

  body.jw-hero-premium-v6 .hero aside,
  body.jw-hero-premium-v6 .hero .mockup,
  body.jw-hero-premium-v6 .hero .panel,
  body.jw-hero-premium-v6 .hero [class*="executive"],
  body.jw-hero-premium-v6 .hero [class*="dashboard"],
  body.jw-hero-premium-v6 .hero [class*="mock"]{
    max-width:430px !important;
    transform:translateY(4px);
  }
}

/* Ultrawide muito grande / 43 polegadas */
@media (min-width:2100px){
  body.jw-hero-premium-v6{
    --flow-stage-max: 1540px;
  }

  body.jw-hero-premium-v6 .hero{
    min-height:760px !important;
  }

  body.jw-hero-premium-v6 .hero-grid{
    grid-template-columns:minmax(0, 840px) minmax(400px, 470px) !important;
    gap:116px !important;
  }

  body.jw-hero-premium-v6 .hero h1{
    max-width:860px !important;
    font-size:7.35rem !important;
  }
}

/* Evita que em telas absurdamente largas o conteúdo abra demais */
@media (min-width:2600px){
  body.jw-hero-premium-v6{
    --flow-stage-max: 1580px;
  }

  body.jw-hero-premium-v6 .hero{
    min-height:780px !important;
  }

  body.jw-hero-premium-v6 .hero h1{
    font-size:7.5rem !important;
  }
}

/* Notebook menor */
@media (max-width:1280px){
  body.jw-hero-premium-v6 .hero{
    padding-top:68px !important;
    padding-bottom:56px !important;
  }

  body.jw-hero-premium-v6 .hero-grid{
    gap:42px !important;
  }

  body.jw-hero-premium-v6 .hero h1{
    font-size:clamp(3.55rem, 7vw, 5.8rem) !important;
    max-width:760px !important;
  }
}

/* Tablet e mobile */
@media (max-width:1080px){
  body.jw-hero-premium-v6 .hero{
    min-height:auto !important;
    padding-top:56px !important;
    padding-bottom:42px !important;
  }

  body.jw-hero-premium-v6 .hero-grid{
    grid-template-columns:1fr !important;
  }

  body.jw-hero-premium-v6 .hero h1{
    max-width:820px !important;
  }

  body.jw-hero-premium-v6 .hero aside,
  body.jw-hero-premium-v6 .hero .mockup,
  body.jw-hero-premium-v6 .hero .panel,
  body.jw-hero-premium-v6 .hero [class*="executive"],
  body.jw-hero-premium-v6 .hero [class*="dashboard"],
  body.jw-hero-premium-v6 .hero [class*="mock"]{
    justify-self:center !important;
    width:100% !important;
    max-width:620px !important;
  }
}

@media (max-width:720px){
  body.jw-hero-premium-v6{
    --flow-stage-pad: 14px;
  }

  body.jw-hero-premium-v6 .hero{
    padding-top:40px !important;
    padding-bottom:34px !important;
  }

  body.jw-hero-premium-v6 .hero::before,
  body.jw-hero-premium-v6 .hero::after{
    display:none !important;
  }

  body.jw-hero-premium-v6 .hero h1{
    font-size:clamp(2.45rem, 13vw, 4rem) !important;
    line-height:.93 !important;
    letter-spacing:-.075em !important;
  }
}

/* Corrige quando a tela é larga, mas baixa */
@media (min-width:1281px) and (max-height:820px){
  body.jw-hero-premium-v6 .hero{
    min-height:auto !important;
    padding-top:68px !important;
    padding-bottom:56px !important;
  }

  body.jw-hero-premium-v6 .hero h1{
    font-size:clamp(4.2rem, 4.8vw, 6.4rem) !important;
  }
}
