/* Tela 1 — refinamento isolado, centralizado e sem altura fantasma */
.app:has(.hero) .header{
  min-height:54px;
  padding-top:max(10px,env(safe-area-inset-top));
  padding-bottom:3px;
}

.app:has(.hero) .header .crown{
  visibility:hidden;
}

.app:has(.hero) .progress-wrap{
  margin-top:0;
}

.app:has(.hero) .viewport{
  padding:clamp(24px,4vh,48px) 18px calc(116px + var(--safe));
}

.app:has(.hero) .hero{
  padding-top:0;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:flex-start;
  text-align:center;
}

/* Usa a eyebrow original apenas como container real da marca.
   A proporção corresponde exatamente ao asset vetorial 934×232. */
.app:has(.hero) .hero .eyebrow{
  display:block;
  width:clamp(360px,42vw,480px);
  max-width:92%;
  aspect-ratio:934 / 232;
  margin:0 auto clamp(28px,3.2vh,36px);
  background:url('/assets/spx-logo-hero.svg?v=hero-logo-horizontal-1') center / contain no-repeat;
  color:transparent;
  font-size:0;
  line-height:0;
  letter-spacing:0;
  text-indent:-9999px;
  overflow:hidden;
}

.app:has(.hero) .hero h1{
  width:min(100%,660px);
  max-width:660px;
}

.app:has(.hero) .lead{
  margin-top:clamp(26px,3.2vh,34px);
  max-width:600px;
}

.app:has(.hero) .hero-note{
  margin-top:clamp(18px,2.2vh,24px);
  max-width:560px;
  padding:0;
  border:0;
  background:transparent;
  color:#b9c8c1;
  font-size:12px;
  line-height:1.55;
}

.app:has(.hero) .fixed-cta{
  bottom:clamp(20px,3.5vh,38px);
  padding:0 18px;
  background:none;
}

.app:has(.hero) .fixed-cta .cta{
  width:min(100%,540px);
}

@media(max-width:560px){
  .app:has(.hero) .header{
    min-height:48px;
    padding-bottom:2px;
  }

  .app:has(.hero) .viewport{
    padding:18px 16px calc(108px + var(--safe));
  }

  .app:has(.hero) .hero .eyebrow{
    width:min(88vw,340px);
    max-width:100%;
    margin-bottom:24px;
  }

  .app:has(.hero) .hero h1{
    font-size:clamp(34px,10vw,44px);
    line-height:1.03;
  }

  .app:has(.hero) .lead{
    margin-top:24px;
    font-size:15px;
    line-height:1.5;
  }

  .app:has(.hero) .hero-note{
    margin-top:18px;
    max-width:350px;
    font-size:11px;
    line-height:1.5;
  }

  .app:has(.hero) .fixed-cta{
    bottom:max(18px,env(safe-area-inset-bottom));
    padding:0 16px;
  }
}

@media(max-height:720px){
  .app:has(.hero) .viewport{
    padding-top:12px;
    padding-bottom:98px;
  }

  .app:has(.hero) .hero .eyebrow{
    width:min(72vw,310px);
    margin-bottom:17px;
  }

  .app:has(.hero) .lead{
    margin-top:16px;
  }

  .app:has(.hero) .hero-note{
    margin-top:13px;
  }

  .app:has(.hero) .fixed-cta{
    bottom:12px;
  }
}