/* ===================================================================
   A CHAMADA DA CAPA, arquivo unico
   Criado em 19.09.2026. A capa do Programa Gratuito ja trazia subtitulo,
   data e um botao que leva direto para a inscricao, e as paginas do
   Despertar Inicial e do Programa de Aprofundamento nao traziam nada.
   Estas regras dao a mesma capa as tres, e o botao passa a ser dourado
   por inteiro, com borda mais grossa, para ter o destaque que faltava.

   As classes aparecem dobradas de proposito, para vencer as regras que
   ja vivem dentro de cada pagina sem depender da ordem de carregamento.
   =================================================================== */

.hero-parallax-content .hero-sub,
.hero-sub.hero-sub {
  margin-top: 26px;
  font-size: 19px;
  line-height: 1.6;
  color: rgba(245,213,142,0.94);
  max-width: 660px;
  margin-left: auto;
  margin-right: auto;
  text-shadow: 0 1px 12px rgba(0,0,0,0.55);
}

.hero-date.hero-date {
  margin-top: 24px;
  display: block;
  text-align: center;
  font-family: var(--serif), Georgia, serif;
  font-style: italic;
  font-size: clamp(19px, 2.5vw, 25px);
  color: #fff;
  text-shadow: 0 1px 12px rgba(0,0,0,0.55);
}
.hero-date.hero-date strong {
  color: var(--gold-light, #F4DBA0);
  font-weight: 600;
  font-style: normal;
}

.hero-info.hero-info {
  margin-top: 18px;
  font-size: 15px;
  line-height: 1.6;
  color: rgba(245,213,142,0.88);
  text-shadow: 0 1px 10px rgba(0,0,0,0.55);
}
.hero-info.hero-info a {
  color: var(--gold-light, #F4DBA0);
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* ---------- o botao dourado da capa ---------- */

.hero-parallax .btn.btn,
.hero-parallax .btn.btn:link,
.hero-parallax .btn.btn:visited {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  display: inline-block;
  margin-top: 30px;
  padding: 17px 44px;
  border-radius: 8px;
  font-size: 16px;
  font-weight: 700;
  letter-spacing: 0.05em;
  background: linear-gradient(135deg, rgba(232,181,71,0.95) 0%, rgba(246,227,176,0.98) 50%, rgba(217,146,62,0.95) 100%);
  border: 2px solid #F6E3B0;
  color: #16233D;
  text-shadow: none;
  box-shadow: 0 0 34px rgba(232,181,71,0.42), 0 12px 30px rgba(0,0,0,0.34), inset 0 1px 0 rgba(255,255,255,0.55);
  transition: transform .4s cubic-bezier(.2,.7,.3,1), box-shadow .4s ease, background .4s ease, border-color .4s ease;
}

/* O facho de luz que atravessa o botao quando o ponteiro passa. */
.hero-parallax .btn.btn::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background: linear-gradient(100deg, transparent 34%, rgba(255,255,255,.62) 47%, rgba(255,248,224,.78) 53%, transparent 66%);
  transform: translateX(-130%);
  transition: transform .95s cubic-bezier(.22,.7,.28,1);
}
.hero-parallax .btn.btn:hover::before,
.hero-parallax .btn.btn:focus-visible::before { transform: translateX(130%); }

.hero-parallax .btn.btn:hover,
.hero-parallax .btn.btn:focus-visible {
  transform: translateY(-3px);
  background: linear-gradient(135deg, #F4DBA0 0%, #FFF3D0 50%, #E8B547 100%);
  border-color: #FFF3D0;
  color: #0F1F3D;
  box-shadow: 0 0 46px rgba(232,181,71,0.60), 0 16px 34px rgba(0,0,0,0.40), inset 0 1px 0 rgba(255,255,255,0.7);
}

@media (max-width: 560px) {
  .hero-parallax .btn.btn { padding: 15px 30px; font-size: 15px; }
  .hero-parallax-content .hero-sub, .hero-sub.hero-sub { font-size: 17px; }
}

@media (prefers-reduced-motion: reduce) {
  .hero-parallax .btn.btn, .hero-parallax .btn.btn::before { transition: none; }
  .hero-parallax .btn.btn:hover { transform: none; }
}