@import url('/default/style.css');

.historia {
  margin-top: var(--header-height);
  padding: 100px 20px;
  background: linear-gradient(rgba(14,66,34,0.7), rgba(14, 66, 109, 0.8)),
              url('/Imagens/WhatsApp\ Image\ 2025-07-14\ at\ 22.10.35.jpeg') center/cover no-repeat;
  color: var(--text-light);
  text-align: center;
}

.historia h1 {
  font-size: 2.5rem;
  color: var(--highlight-color);
  margin-bottom: 20px;
}

.historia p {
  font-size: 1.1rem;
  max-width: 700px;
  margin: 0 auto 40px auto;

}

.capitulos {
  display: flex;
  flex-direction: column;
  gap: 32px;
}

.capitulo {
  background: var(--card-bg);
  padding: 24px;
  border-radius: 12px;
  box-shadow: 0 4px 12px var(--shadow-color);
}
.capitulo h2 {
  color: var(--primary-color);
  margin-bottom: 12px;
}

/* Adicione ao historia.css */

/* Efeito de aparecimento suave nos capítulos */
.capitulo {
  opacity: 0;
  transform: translateY(20px);
  animation: fadeInUp 1s forwards;
}

.capitulo:nth-child(1) { animation-delay: 0.3s; }
.capitulo:nth-child(2) { animation-delay: 0.6s; }

@keyframes fadeInUp {
  to { opacity: 1; transform: translateY(0); }
}

/* Efeito de página antiga */
.historia {
  position: relative;
}

.historia::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="100" height="100" viewBox="0 0 100 100"><rect width="100" height="100" fill="none" stroke="%23D4A017" stroke-width="0.5" stroke-dasharray="2,2"/></svg>');
  opacity: 0.1;
  pointer-events: none;
}