/* ==========================================================================
   CASJ — Sobre | Espiritualidade (sobre-espiritualidade.html)
   Componente Figma: "Sobre | Espiritualidade" (171:4860)
   ========================================================================== */

/* Blocos de texto (badge + título + parágrafos) — container 1000px, igual ao
   Figma (CAIXA TEXTO, 1020px com padding interno de 10px). */
.espirit-section { padding-block: 64px; text-align: center; }
.espirit-section + .espirit-section { padding-top: 0; }
.espirit-intro__content { max-width: 1000px; margin-inline: auto; }
.espirit-intro__text {
  font-size: 20px;
  font-weight: 300;
  line-height: 1.8;
  color: #000;
  margin-bottom: 24px;
}
.espirit-intro__text:last-child { margin-bottom: 0; }
.espirit-intro__text strong { font-weight: 600; }

/* Selos "Fé que inspira..." / "Projetos que inspiram" (Pastoral Educativa):
   mesmo tamanho de fonte do parágrafo que segue, não o padrão pill pequeno
   (14px) do .section-badge global. */
.espirit-intro__content .section-badge { font-size: 20px; padding: 4px 16px; }

/* Espaço entre o bloco da Pastoral Educativa e o título seguinte — sem
   divisor decorativo aqui (só entre a fileira de ícones e a Pastoral), mas
   ainda precisa do respiro que o Figma dá antes de "Essência que permanece". */
.espirit-intro__content + .section-heading { margin-top: 56px; }

/* Fileira de ícones (Autoconhecimento, Respeito, Empatia, Solidariedade,
   Responsabilidade social, Propósito de vida) */
.valores-icons {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: flex-start;
  gap: 32px 56px;
  margin-top: 48px;
}
.valor-icon {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  width: 110px;
}
.valor-icon__box {
  width: 95px;
  height: 95px;
  border-radius: 12px;
  background: var(--casj-azul);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.valor-icon__box img {
  max-width: 68%;
  max-height: 68%;
  width: auto;
  height: auto;
}
.valor-icon__label {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 16px;
  color: #000;
  text-align: center;
  letter-spacing: .1px;
}

/* Divisor decorativo entre a fileira de ícones e o segundo bloco de texto */
.espirit-divider {
  width: 42px;
  height: 2px;
  background: var(--casj-azul);
  margin: 48px auto 40px;
  border: 0;
}

/* Momentos da Pastoral — reaproveita .img-carousel (carousels.css), que já
   cobre bullets e margem no mobile pra todas as galerias do site. */
.pastoral-section { background: #eceff5; padding-block: 56px; }

/* Setas do carrossel (Figma "IMAGE CAROUSEL PASTORAL", 2142:2759): o ícone
   (icon-carousel-arrow.svg) já desenha a pílula azul vazada sozinho — no
   hover, ele dá lugar a uma segunda pílula, já preenchida de azul com a
   seta branca (sem adicionar caixa/borda própria ao botão, que duplicaria
   o contorno). */
.pastoral-section .img-carousel__nav:hover .img-carousel__nav-icon {
  opacity: 0;
}
.pastoral-section .img-carousel__nav::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  translate: -50% -50%;
  width: 49px;
  height: 26px;
  background: url("../img/icon-carousel-arrow-azul-preenchido.svg") center / contain no-repeat;
  opacity: 0;
  transition: opacity .2s ease;
  pointer-events: none;
}
.pastoral-section .img-carousel__nav--prev::after { rotate: -90deg; }
.pastoral-section .img-carousel__nav--next::after { rotate: 90deg; }
.pastoral-section .img-carousel__nav:hover::after { opacity: 1; }