/* Hero dos catálogos (/cursos e /projetos), 17/10/2026: mesmo fundo claro do hero da home
   (.hero--premium em personalizado.css) e das páginas de nível, curso e projeto (nivel-hero.css). */

/* ---------- fundo ---------- */
.sp-proj-hero {
  background:
    radial-gradient(ellipse 70% 50% at 15% 20%, rgba(59, 130, 246, 0.16) 0%, transparent 60%),
    radial-gradient(ellipse 60% 50% at 85% 15%, rgba(16, 185, 129, 0.12) 0%, transparent 60%),
    radial-gradient(ellipse 50% 40% at 50% 100%, rgba(99, 102, 241, 0.10) 0%, transparent 60%),
    linear-gradient(180deg, #f6f9fc 0%, #eaf2f8 100%);
}
.sp-proj-hero::before {
  top: -150px; right: -120px; bottom: -150px; left: -120px;
  width: auto; height: auto; border-radius: 0;
  background:
    radial-gradient(circle 190px at 210px 210px, rgba(59, 130, 246, 0.32) 0%, transparent 100%),
    radial-gradient(circle 230px at calc(100% - 230px) calc(100% - 230px), rgba(16, 185, 129, 0.3) 0%, transparent 100%);
  filter: blur(40px);
  animation: sp-catalogo-brilho 14s ease-in-out infinite;
}
@keyframes sp-catalogo-brilho {
  0%, 100% { transform: translate(0, 0); }
  50% { transform: translate(20px, -30px); }
}
.sp-proj-hero::after {
  background-image:
    linear-gradient(to right, rgba(29, 58, 81, 0.06) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(29, 58, 81, 0.06) 1px, transparent 1px);
  background-size: 56px 56px;
  -webkit-mask-image: radial-gradient(ellipse 80% 60% at 50% 40%, #000 30%, transparent 80%);
  mask-image: radial-gradient(ellipse 80% 60% at 50% 40%, #000 30%, transparent 80%);
  opacity: 0.7;
}

/* ---------- texto ---------- */
.sp-proj-hero .section-id { color: #0f7a0c; }
.sp-proj-hero__title { color: #12242f; }
/* 2ª linha do título: mesmo tratamento do hero dos níveis, muda só o peso e o tom */
.sp-proj-hero__title em {
  display: block; margin-top: 6px; font-style: normal; font-weight: 400;
  font-size: 0.78em; line-height: 1.18; letter-spacing: -0.01em; color: #4a5f70;
}
.sp-proj-hero__sub { color: #4a5f70; }
.sp-proj-hero__sub strong { color: #1d3a51; }
.sp-proj-hero__pills li { color: #4a5f70; background: rgba(255, 255, 255, 0.85); border-color: rgba(29, 58, 81, 0.12); }
.sp-proj-hero__pills b { color: #1d3a51; }

/* ---------- quadro de números ---------- */
.sp-proj-hero .sp-proj-nums {
  background: rgba(29, 58, 81, 0.1); border-color: rgba(29, 58, 81, 0.1);
  box-shadow: 0 24px 60px rgba(29, 58, 81, 0.12);
}
.sp-proj-hero .sp-proj-nums__item { background: rgba(255, 255, 255, 0.92); }
.sp-proj-hero .sp-proj-nums__valor { color: #12242f; }
.sp-proj-hero .sp-proj-nums__item:first-child .sp-proj-nums__valor { color: #0f7a0c; }
.sp-proj-hero .sp-proj-nums__rot { color: #6b7f8f; }

/* ---------- /cursos: a IA como etiqueta logo abaixo do título ---------- */
.sp-cursos-ia {
  display: inline-flex; align-items: center; gap: 10px;
  margin: -4px 0 20px; padding: 7px 16px 7px 8px; border-radius: 999px;
  background: #fff; border: 1px solid rgba(29, 58, 81, 0.12);
  font-family: 'Outfit', sans-serif; font-weight: 600; font-size: 1.05rem; line-height: 1.3; color: #1d3a51;
}
.sp-cursos-ia__ico {
  width: 26px; height: 26px; flex-shrink: 0; border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  background: #119a0e; color: #fff;
}

/* ---------- /cursos: números em linha, botões e mapa da trilha ---------- */
.sp-cursos-numeros {
  display: flex; flex-wrap: wrap; gap: 8px 26px;
  list-style: none; margin: 0 0 30px; padding: 0;
  font-size: 15px; color: #4a5f70;
}
.sp-cursos-numeros b { font-family: 'Outfit', sans-serif; font-weight: 700; font-size: 22px; color: #12242f; }

.sp-cursos-ctas { display: flex; flex-wrap: wrap; gap: 12px; }
.sp-proj-hero .sp-lp-btn { --nv: 17, 154, 14; background: #1d3a51; border-color: #1d3a51; color: #fff; box-shadow: none; }
.sp-proj-hero .sp-lp-btn:hover { background: #12242f; border-color: #12242f; color: #fff; box-shadow: none; }
.sp-proj-hero .sp-lp-btn__selo { color: #0d1b24; }
.sp-proj-hero .sp-lp-btn--ghost { background: #fff; border-color: rgba(29, 58, 81, 0.25); color: #1d3a51; }
.sp-proj-hero .sp-lp-btn--ghost:hover { background: #fff; border-color: rgba(29, 58, 81, 0.5); color: #12242f; }

.sp-proj-hero--cursos { padding-top: 150px; }
@media (max-width: 991px) { .sp-proj-hero--cursos { padding-top: 120px; padding-bottom: 56px; } }
@media (min-width: 992px) {
  .sp-proj-hero--cursos .sp-proj-hero__grid { grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: 56px; }
}

/* as capas em leque do lado direito estão em css/mosaico.css */

@media (max-width: 767px) {
  .sp-cursos-ia { font-size: 0.86rem; gap: 8px; padding: 6px 12px 6px 6px; }
  .sp-cursos-ia__ico { width: 22px; height: 22px; }
  .sp-cursos-numeros { gap: 6px 18px; font-size: 14px; }
}

/* ---------- /faqs: respostas mais pedidas ---------- */
.sp-proj-hero--faqs { padding-top: 150px; }
@media (min-width: 992px) {
  .sp-proj-hero--faqs .sp-proj-hero__grid { grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr); }
}
@media (max-width: 991px) { .sp-proj-hero--faqs { padding-top: 120px; padding-bottom: 56px; } }
.sp-faq-resumo {
  background: #fff; border: 1px solid rgba(29, 58, 81, 0.1); border-radius: 20px;
  padding: 22px 24px; box-shadow: 0 24px 60px rgba(29, 58, 81, 0.12);
}
.sp-faq-resumo__titulo { font-family: 'Outfit', sans-serif; font-weight: 700; font-size: 1rem; color: #12242f; margin: 0 0 14px; }
.sp-faq-resumo ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 14px; }
.sp-faq-resumo li { display: flex; gap: 12px; align-items: flex-start; }
.sp-faq-resumo li > span:last-child { display: flex; flex-direction: column; gap: 2px; font-size: 0.9rem; line-height: 1.5; color: #4a5f70; }
.sp-faq-resumo b { font-family: 'Outfit', sans-serif; font-weight: 600; font-size: 0.98rem; color: #12242f; }
.sp-faq-resumo__ico {
  width: 26px; height: 26px; flex-shrink: 0; border-radius: 50%; margin-top: 1px;
  display: inline-flex; align-items: center; justify-content: center;
  background: rgba(17, 154, 14, 0.12); color: #0f7a0c;
}

/* ---------- menu do topo: hero claro pede menu escuro e logo colorido ---------- */
@media only screen and (min-width: 992px) {
  .sp-lp .wsmainfull:not(.scroll) .wsmenu > .wsmenu-list > li > a.h-link { color: #1d3a51; }
  .sp-lp .wsmainfull:not(.scroll) .wsmenu > .wsmenu-list > li > a.h-link:hover { color: #12242f; }
}
.sp-lp .wsmainfull:not(.scroll) .desktoplogo img,
.sp-lp .wsmainfull:not(.scroll) .smllogo img { filter: none; }

@media (prefers-reduced-motion: reduce) {
  .sp-proj-hero::before { animation: none; }
}

/* cards do catálogo de /cursos: texto justificado (pedido em 17/10/2026). A hifenização
   evita os buracos entre palavras que o justify abre em coluna estreita; o lang="pt-br" do html já está lá. */
[data-cursos-grid] .sp-cat-card__text {
  text-align: justify;
  -webkit-hyphens: auto; hyphens: auto;
}