/* 
    cores padrões da escola
    essas cores estão definidas no arquivo header.php
    --azul: #27348B
    --amarelo: #FEA800
    --vermelho: #BE1D2C 

    --azul-escuro: #0A1455;
    --escuro: #333333;
    */

h3,
h4,
h5 {
  color: var(--vermelho);
  margin-top: 0;
  /* line-height: 131%; */
  text-wrap: auto;
}

.botao-nav-prog-bra {
  margin-top: 8px;
  margin-right: 12px;
  font-size: 1rem;
  background-color: gainsboro;
  color: var(--escuro);
  border-color: gainsboro;
  font-weight: bold;
}

.botao-nav-prog-bra:hover {
  background-color: var(--vermelho);
  border-color: var(--vermelho);
}

.btn-primary:not(:disabled):not(.disabled).active,
.btn-primary:not(:disabled):not(.disabled):active,
.show > .btn-primary.dropdown-toggle {
  color: whitesmoke;
  background-color: var(--vermelho);
  border-color: var(--vermelho);
}

.botao-alem-sala {
  background-color: var(--amarelo);
  border-color: gainsboro;
  color: var(--escuro);
}

.botao-alem-sala:hover {
  background-color: var(--vermelho);
  border-color: var(--vermelho);
  color: whitesmoke;
}

.card-img-top {
  max-height: 130px;
}

.div-item-alem-sala:hover {
  cursor: pointer;

  /* animation: rubberBand; */
  animation: pulse;
  /* referring directly to the animation's @keyframe declaration */
  animation-duration: 1s;
  /* don't forget to set a duration! */
}

a.link-paginas {
  text-decoration: underline;
  color: var(--escuro) !important;
}

.badge-links {
  font-size: large;
  margin-right: 8px;
  background-color: var(--vermelho);
  color: whitesmoke;
  font-weight: 300;
  margin-bottom: 8px;
}

.badge {
  background-color: var(--vermelho);
  color: whitesmoke;
  font-weight: 300;
  margin-right: 8px;
}

.badge-brasileiro {
  background-color: var(--azul);
}

h6 {
  font-weight: bold;
}

p {
  line-height: 1.6;
}

/* ===== Blocos estruturais alinhados ao Programa Brasileiro (variação vermelho) ===== */
.ens-fund-af-conteudo {
  display: flex;
  flex-direction: column;
  gap: 1.75rem;
}

.ens-fund-af-conteudo .intro {
  background: linear-gradient(135deg, #ffffff 0%, #fff5f5 100%);
  padding: 1.5rem 1.75rem;
  border: 1px solid #f1d9d9;
  border-radius: 18px;
  box-shadow: 0 4px 14px -4px rgba(190, 29, 44, 0.15);
}

.ens-fund-af-conteudo .title-main {
  font-size: 1.45rem;
  margin-bottom: 0.25rem;
}

.ens-fund-af-conteudo .subtitle-first {
  color: var(--vermelho);
  font-weight: 600;
  margin-bottom: 1rem;
}

.ens-fund-af-conteudo .section-block {
  background: #fff;
  padding: 1.25rem 1.5rem;
  border-left: 5px solid var(--vermelho);
  border-radius: 14px;
  box-shadow: 0 2px 8px -2px rgba(0, 0, 0, 0.08);
}

.ens-fund-af-conteudo .section-block.highlight {
  border-left-color: var(--amarelo);
  background: linear-gradient(90deg, #fffaf1 0%, #ffffff 60%);
}

.ens-fund-af-conteudo .section-block h6 {
  margin-top: 0;
}

.cta-block {
  margin-top: 0.5rem;
}

.btn-whatsapp-modern {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-weight: 600;
  letter-spacing: 0.3px;
  padding: 0.9rem 1.4rem;
  box-shadow: 0 4px 14px -4px rgba(34, 139, 64, 0.45) !important;
  transition: transform 0.2s, box-shadow 0.2s, background 0.2s;
}
.btn-whatsapp-modern:hover {
  transform: translateY(-2px);
}
.btn-whatsapp-modern:active {
  transform: translateY(0);
}

@media (max-width: 575.98px) {
  .ens-fund-af-conteudo .title-main {
    font-size: 1.25rem;
  }
  .ens-fund-af-conteudo .intro {
    padding: 1rem 1rem;
  }
  .ens-fund-af-conteudo .section-block {
    padding: 1rem 1rem;
  }
  .btn-whatsapp-modern {
    width: 100%;
    justify-content: center;
  }
}

/* ==== Animações com Animate.css ==== */
[data-animate] {
  visibility: hidden;
}

[data-animate].in-view {
  visibility: visible;
}

/* Mantém animação original como fallback */
[data-animate]:not(.animate__animated) {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity 0.7s ease, transform 0.7s cubic-bezier(0.21, 0.72, 0.34, 1);
}

[data-animate]:not(.animate__animated).in-view {
  opacity: 1;
  transform: translateY(0);
}

/* Personalização das animações do Animate.css */
.animate__animated {
  --animate-duration: 0.8s;
}

.animate__animated.animate__slow {
  --animate-duration: 1.2s;
}

.animate__animated.animate__fast {
  --animate-duration: 0.6s;
}

@media (max-width: 575.98px) {
  /* Força alinhamento à esquerda em mobile */
  .text-center,
  .text-justify,
  .comum-programa [data-animate],
  .ens-fund-af-conteudo,
  .ens-fund-af-aside,
  .ens-fund-af-conteudo p,
  .ens-fund-af-conteudo h3,
  .ens-fund-af-conteudo h4,
  .ens-fund-af-conteudo h5 {
    text-align: left !important;
  }
}