/*
 * Camada final e isolada da primeira dobra.
 * Este arquivo deve permanecer depois dos estilos globais de branding.
 */
.topbar .hero-brand::before {
  content: none !important;
  display: none !important;
  background: none !important;
}

.topbar .hero-brand {
  display: inline-flex;
  flex: 0 1 auto;
  align-items: center;
  min-width: 0;
}

.topbar .hero-brand img {
  display: block;
  width: min(374px, 35vw);
  max-width: 100%;
  height: 79px;
  object-fit: cover;
  object-position: left center;
}

.hero-offer-pill strong,
.hero-offer-pill small {
  display: block;
}

.hero-offer-pill strong {
  color: #17104f;
  font-size: 12px;
  line-height: 1.15;
}

.hero-offer-pill small {
  margin-top: 3px;
  color: #6b2af2;
  font-size: 10px;
  font-weight: 850;
  line-height: 1.15;
}

main .hero {
  color: #171139;
  background: linear-gradient(180deg, #fff 0%, #fff 70%, #fbf9ff 100%);
}

main .hero h1 {
  max-width: 810px;
  color: #0d0a43;
  font-family: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-size: clamp(59px, 3.9vw, 75px);
  font-weight: 900;
  line-height: .96;
  letter-spacing: -.052em;
}

main .hero h1 b {
  font-family: inherit;
  font-weight: inherit;
}

main .hero .hero-lead {
  color: #36304d;
}

main .hero .hero-benefits li {
  color: #17123d;
}

main .hero .timer-unit {
  display: flex;
  min-width: 42px;
  align-items: center;
  flex-direction: column;
  line-height: 1;
}

main .hero .timer-unit small {
  display: block;
  margin-top: 4px;
  color: #70698a;
  font-size: 8px;
  font-weight: 800;
  letter-spacing: .06em;
  text-transform: uppercase;
}

@media (min-width: 821px) {
  .topbar {
    height: clamp(82px, 9.5vh, 96px);
  }

  .topbar-inner {
    width: min(1650px, calc(100% - 68px));
  }

  main .hero {
    min-height: 0;
    padding: clamp(18px, 2.5vh, 28px) 0 20px;
  }

  main .hero .hero-grid {
    width: min(1650px, calc(100% - 68px));
    grid-template-columns: minmax(0, .92fr) minmax(0, 1.08fr);
    gap: 24px;
  }

  main .hero .hero-copy {
    min-width: 0;
    padding: 0;
  }

  main .hero .hero-kicker {
    margin-bottom: 9px;
  }

  main .hero h1 {
    margin-bottom: 12px;
  }

  main .hero .hero-lead {
    max-width: 715px;
    margin-bottom: 16px;
    font-size: clamp(17px, 1.18vw, 21px);
    line-height: 1.42;
  }

  main .hero .hero-benefits {
    max-width: 682px;
    gap: 9px 18px;
    margin-bottom: 16px;
  }

  main .hero .hero-benefits svg {
    width: 20px;
    height: 20px;
    padding: 8px;
  }

  main .hero .hero-main-cta {
    width: min(550px, 100%);
    min-height: 64px;
    padding-block: 12px;
    font-size: clamp(17px, 1.16vw, 20px);
  }

  main .hero .hero-access-note {
    margin: 9px 0 11px;
  }

  main .hero .hero-price-timer {
    width: min(572px, 100%);
  }

  main .hero .hero-price-timer > span {
    padding-block: 10px;
  }

  main .hero .hero-price-timer [data-countdown] > div {
    gap: 5px;
  }

  main .hero .hero-visual {
    width: 100%;
    max-width: 935px;
    margin: 0;
    justify-self: end;
    align-self: center;
  }

  main .hero .hero-visual img {
    width: 100%;
    max-width: 100%;
    height: auto;
  }

  main .hero .hero-bottom-proof {
    width: min(792px, 50%);
    margin: -28px max(34px, calc((100% - 1650px) / 2)) 0 auto;
    padding: 18px 15px;
  }
}

@media (max-width: 1240px) {
  main .hero h1 {
    font-size: clamp(52px, 5.1vw, 66px);
  }
}

@media (min-width: 821px) and (max-height: 780px) {
  .topbar {
    height: 76px;
  }

  .topbar .hero-brand img {
    height: 60px;
  }

  main .hero {
    min-height: 0;
    padding: 14px 0 16px;
  }

  main .hero h1 {
    margin-bottom: 9px;
    font-size: clamp(46px, 3.15vw, 60px);
  }

  main .hero .hero-lead {
    margin-bottom: 11px;
    font-size: 16px;
  }

  main .hero .hero-benefits {
    gap: 6px 14px;
    margin-bottom: 11px;
  }

  main .hero .hero-benefits svg {
    width: 16px;
    height: 16px;
    padding: 6px;
  }

  main .hero .hero-main-cta {
    min-height: 52px;
  }

  main .hero .hero-access-note {
    margin: 7px 0 8px;
  }

  main .hero .hero-visual {
    max-width: 760px;
  }

  main .hero .hero-bottom-proof {
    margin-top: -24px;
    padding-block: 12px;
  }
}

@media (max-width: 820px) {
  .topbar .hero-brand img {
    width: min(235px, 57vw);
    height: 54px;
  }

  .hero-offer-pill strong {
    font-size: 9px;
  }

  .hero-offer-pill small {
    font-size: 8px;
  }

  main .hero {
    min-height: auto;
    background: linear-gradient(180deg, #fff 0%, #fff 46%, #fbf9ff 100%);
  }

  main .hero h1 {
    max-width: 95%;
    color: #0d0a43;
    font-size: clamp(43px, 12.3vw, 64px);
    line-height: .97;
  }
}

@media (max-width: 390px) {
  .topbar .hero-brand img {
    width: 205px;
    height: 48px;
  }

  main .hero h1 {
    font-size: 43px;
  }
}

/* A próxima seção deve aparecer como continuação natural da primeira dobra. */
@media (min-width: 821px) {
  main .courses-section {
    padding-top: 64px;
    padding-bottom: 88px;
  }

  main .courses-section .section-heading {
    margin-bottom: 40px;
  }
}

@media (min-width: 821px) and (max-height: 780px) {
  main .courses-section {
    padding-top: 48px;
  }
}

/* Ampliação adicional de 10% apenas em monitores desktop largos. */
@media (min-width: 1241px) and (min-height: 781px) {
  .topbar-inner,
  main .hero .hero-grid {
    width: min(1815px, calc(100% - 48px));
  }

  .topbar .hero-brand img {
    width: min(411px, 37vw);
    height: 87px;
  }

  main .hero .hero-grid {
    gap: 26px;
  }

  main .hero h1 {
    max-width: 890px;
    font-size: clamp(65px, 4.3vw, 82px);
  }

  main .hero .hero-lead {
    max-width: 787px;
    font-size: clamp(18px, 1.3vw, 23px);
  }

  main .hero .hero-benefits {
    max-width: 750px;
    gap: 10px 20px;
  }

  main .hero .hero-benefits li {
    font-size: 15px;
  }

  main .hero .hero-benefits svg {
    width: 22px;
    height: 22px;
    padding: 9px;
  }

  main .hero .hero-main-cta {
    width: min(605px, 100%);
    min-height: 70px;
    font-size: clamp(18px, 1.28vw, 22px);
  }

  main .hero .hero-price-timer {
    width: min(629px, 100%);
  }

  main .hero .hero-visual {
    max-width: 1028px;
  }

  main .hero .hero-bottom-proof {
    width: min(871px, 50%);
    margin-right: max(24px, calc((100% - 1815px) / 2));
    padding: 20px 17px;
  }
}