/* =================================
   HOME - HERO
================================= */

.hero {
  background:
    radial-gradient(circle at 20% 30%, rgba(67,170,139,0.18), transparent 40%),
    radial-gradient(circle at 80% 20%, rgba(23,81,108,0.20), transparent 40%),
    #f6fbfb;
}

.hero__content {
  max-width: 520px;
}

.hero__content h1 {
  margin-bottom: 20px;
}

.hero__visual {
  display: flex;
  justify-content: center;
  margin-top: 30px;
}

.hero__visual img {
  max-width: 680px;
  width: 100%;
  border-radius: 0;
  box-shadow: none;
}

/* =================================
   PROBLEM SECTION
================================= */

.problem {
  background: var(--cor-clara);
}

.problem__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 40px;
}

.problem__item {
  background: var(--cor-fundo);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  padding: 32px;
  box-shadow: var(--dropdown-shadow);
}

.problem__item h3 {
  margin-bottom: 12px;
}

/* =================================
   SECTION SPACING
================================= */

.audience {
  background: var(--cor-fundo);
}

.how {
  background: var(--cor-clara);
}

.hero__demo {
  margin-top: 16px;
  font-size: 14px;
}

.hero__demo a {
  font-weight: 600;
  text-decoration: underline;
}

/* =================================
   DEMO SECTION
================================= */

.demo {
  background: var(--cor-fundo);
}

.demo__card {

  max-width: 720px;

  margin: 0 auto;

  text-align: center;

  background: var(--cor-clara);

  border: 1px solid var(--color-border);

  border-radius: var(--radius-md);

  padding: 48px;

  box-shadow: var(--dropdown-shadow);

}

.demo__card h2 {
  margin-bottom: 14px;
}

.demo__card p {
  max-width: 520px;
  margin: 0 auto;
}

.demo__actions {
  margin-top: 28px;
  margin-bottom: 20px;
}


.demo__note {
  font-size: var(--font-size-xs);
  color: var(--muted);
}




/* =================================
   FOOTER BRAND
================================= */

.footer__brand img {
  height: 36px;
  margin-bottom: 12px;
}

.footer__brand p {
  font-size: var(--font-size-xs);
  max-width: 260px;
  color: var(--border);
}

#como-funciona {
  scroll-margin-top: calc(var(--header-height) + 20px);
}

/* =================================
   RESPONSIVE
================================= */

@media (max-width: 1024px) {

  .hero__container {
    grid-template-columns: 1fr;
    text-align: center;
    gap: 40px;
  }

  .hero__cta {
    justify-content: center;
  }

  .hero__content {
    margin: 0 auto;
  }

  .audience__grid {
    grid-template-columns: 1fr;
  }

  .problem__grid {
    grid-template-columns: 1fr;
  }

  .how__grid {
    grid-template-columns: 1fr;
  }

  .cta__actions {
    flex-direction: column;
  }

  .footer__container {
    flex-direction: column;
    gap: 40px;
  }

  .footer__links {
    gap: 40px;
  }

}

@media (max-width: 900px) {

  .hero__container {
    grid-template-columns: 1fr;
    gap: 50px;
    text-align: center;
  }

  .hero__content {
    margin: 0 auto;
  }

  .hero__cta {
    justify-content: center;
  }

  .audience__grid {
    grid-template-columns: 1fr;
  }

  .problem__grid {
    grid-template-columns: 1fr;
  }

  .how__grid {
    grid-template-columns: 1fr;
    gap: 30px;
  }

}

@media (max-width: 768px) {

  section {
    padding: 80px 0;
  }

  h1 {
    font-size: 2.2rem;
  }

  h2 {
    font-size: 1.7rem;
  }

  .hero__subtitle {
    font-size: 1.1rem;
  }

}



@media (max-width: 600px) {

  section {
    padding: 70px 0;
  }

  h1 { font-size: 2rem; }
  h2 { font-size: 1.6rem; }

  .hero__visual img {
    max-width: 100%;
  }

  .header__nav {
    display: none;
  }

  .hero__cta {
    flex-direction: column;
    gap: 12px;
  }

  .cta__actions {
    flex-direction: column;
  }

  .btn--large {
    width: 100%;
  }
}

@media (max-width: 480px) {

  h1 {
    font-size: 1.9rem;
  }

  h2 {
    font-size: 1.5rem;
  }

  .section-title {
    margin-bottom: 40px;
  }

  .audience__card {
    padding: 24px;
  }

  .problem__item {
    padding: 24px;
  }

}

@media (max-width: 360px) {

  h1 {
    font-size: 1.7rem;
  }

  h2 {
    font-size: 1.4rem;
  }

  .container {
    padding: 0 16px;
  }

  .btn {
    font-size: 0.9rem;
    padding: 12px 18px;
  }

}

/* =================================
   ARTIST PAGE - HERO
================================= */

.artist-hero {

  background:
    radial-gradient(circle at 20% 30%, rgba(67,170,139,0.18), transparent 40%),
    radial-gradient(circle at 80% 20%, rgba(23,81,108,0.20), transparent 40%),
    #f6fbfb;

  text-align: center;

}

.artist-hero__container {
  max-width: 760px;
}

.artist-hero__subtitle {
  margin-top: 20px;
  font-size: var(--font-size-md);
  color: var(--paragrafos);
}

.artist-hero .btn {
  margin-top: 30px;
}



/* =================================
   BENEFITS
================================= */

.artist-benefits {
  background: var(--cor-fundo);
}

.artist-benefits__grid {

  display: grid;

  grid-template-columns: repeat(2, 1fr);

  gap: 32px;

}

.artist-benefit {

  border: 1px solid var(--color-border);

  border-radius: var(--radius-md);

  padding: 32px;

  background: var(--cor-clara);

  transition: transform .25s ease, box-shadow .25s ease;

}

.artist-benefit:hover {

  transform: translateY(-6px);

  box-shadow: var(--dropdown-shadow);

}

.artist-benefit h3 {
  margin-bottom: 10px;
}



/* =================================
   HOW IT WORKS
================================= */

.artist-how {
  background: var(--cor-clara);
}

.artist-how__grid {

  display: grid;

  grid-template-columns: repeat(3, 1fr);

  gap: 40px;

  text-align: center;

}



/* =================================
   FEATURE - AGENDA
================================= */

.artist-feature {
  background: var(--cor-fundo);
}

.artist-feature__container {
  max-width: 760px;
  text-align: center;
}

.artist-feature p {
  margin-top: 12px;
}



/* =================================
   CTA FINAL
================================= */

.artist-cta {
  background: var(--cor-clara);
}

.artist-cta__container {
  text-align: center;
}

.artist-cta__container p {
  margin-top: 12px;
}

.artist-cta__container .btn {
  margin-top: 24px;
}

/* =================================
   CHURCH PAGE - HERO
================================= */

.church-hero {

  background:
    radial-gradient(circle at 20% 30%, rgba(67,170,139,0.18), transparent 40%),
    radial-gradient(circle at 80% 20%, rgba(23,81,108,0.20), transparent 40%),
    #f6fbfb;

  text-align: center;

}

.church-hero__container {
  max-width: 760px;
}

.church-hero__subtitle {
  margin-top: 20px;
  font-size: var(--font-size-md);
  color: var(--paragrafos);
}

.church-hero .btn {
  margin-top: 30px;
}



/* =================================
   BENEFITS
================================= */

.church-benefits {
  background: var(--cor-fundo);
}

.church-benefits__grid {

  display: grid;

  grid-template-columns: repeat(2, 1fr);

  gap: 32px;

}

.church-benefit {

  border: 1px solid var(--color-border);

  border-radius: var(--radius-md);

  padding: 32px;

  background: var(--cor-clara);

  transition: transform .25s ease, box-shadow .25s ease;

}

.church-benefit:hover {

  transform: translateY(-6px);

  box-shadow: var(--dropdown-shadow);

}

.church-benefit h3 {
  margin-bottom: 10px;
}



/* =================================
   HOW IT WORKS
================================= */

.church-how {
  background: var(--cor-clara);
}

.church-how__grid {

  display: grid;

  grid-template-columns: repeat(3, 1fr);

  gap: 40px;

  text-align: center;

}

.church-how__step h3 {
  margin-top: 12px;
}



/* =================================
   FEATURE
================================= */

.church-feature {
  background: var(--cor-fundo);
}

.church-feature__container {
  max-width: 760px;
  text-align: center;
}

.church-feature p {
  margin-top: 12px;
}



/* =================================
   CTA FINAL
================================= */

.church-cta {
  background: var(--cor-clara);
}

.church-cta__container {
  text-align: center;
}

.church-cta__container p {
  margin-top: 12px;
}

.church-cta__container .btn {
  margin-top: 24px;
}



/* =================================
   RESPONSIVE
================================= */

@media (max-width: 900px) {

  .church-benefits__grid {
    grid-template-columns: 1fr;
  }

  .church-how__grid {
    grid-template-columns: 1fr;
  }

}



@media (max-width: 768px) {

  .church-hero__subtitle {
    font-size: 1.1rem;
  }

}



@media (max-width: 600px) {

  .church-benefit {
    padding: 26px;
  }

}



@media (max-width: 480px) {

  .church-benefit {
    padding: 22px;
  }

}



@media (max-width: 360px) {

  .church-hero h1 {
    font-size: 1.7rem;
  }

}



/* =================================
   RESPONSIVE
================================= */

@media (max-width: 900px) {

  .artist-benefits__grid {
    grid-template-columns: 1fr;
  }

  .artist-how__grid {
    grid-template-columns: 1fr;
  }

}



@media (max-width: 768px) {

  .artist-hero__subtitle {
    font-size: 1.1rem;
  }

}



@media (max-width: 600px) {

  .artist-benefit {
    padding: 26px;
  }

}



@media (max-width: 480px) {

  .artist-benefit {
    padding: 22px;
  }

}



@media (max-width: 360px) {

  .artist-hero h1 {
    font-size: 1.7rem;
  }

}