/* ==============================
   Susurros de mi Alma – Estilo “En Busca De Tus Ojos Verdes”
   Colores: Lavanda grisáceo de acento, fondo claro
   ============================== */

/* 1. Reset */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

/* 2. Fuente y fondo */
body {
  font-family: 'Caveat', cursive;
  background-color: #F7F3FA; /* Fondo claro */
  color: #2c1b3b;             /* Ciruela oscuro */
  line-height: 1.6;
}

/* 3. Header */
header {
  text-align: center;
  padding: 1rem;
  background-color: #c1b6d8; /* Lavanda grisáceo */
}
header h1 {
  font-family: 'Modern Love', cursive;
  font-size: 2.5rem;
  color: #2c1b3b;
}
.nav-capitulos {
  margin-top: 0.5rem;
  display: flex;
  justify-content: center;
  gap: 1rem;
}
.nav-capitulos a {
  text-decoration: none;
  color: #2c1b3b;
  font-weight: bold;
  padding: 0.3rem 0.6rem;
  border-radius: 8px;
  transition: background 0.3s;
}
.nav-capitulos a:hover {
  background: rgba(193,182,216,0.4);
}

/* 4. Banner con hover */
.story-banner {
  position: relative;
  overflow: hidden;
}
.banner-img {
  width: 100%;
  max-height: 400px;
  object-fit: cover;
  transition: transform 0.5s ease, filter 0.5s ease;
}
.story-banner:hover .banner-img {
  transform: scale(1.05);
  filter: brightness(1.1);
}
.banner-text {
  position: absolute;
  bottom: 1rem;
  left: 1rem;
  color: #2c1b3b;
}
.banner-text h1 {
  font-family: 'Modern Love', cursive;
  font-size: 2.2rem;
}
.banner-text p {
  font-size: 1rem;
  font-style: italic;
  color: #4c2a85; /* Violeta galaxia */
}

/* 5. Contenido */
.container {
  max-width: 800px;
  margin: 2rem auto;
  padding: 0 1rem;
}
.dropcap {
  font-size: 3rem;
  float: left;
  line-height: 1;
  margin-right: 0.5rem;
  color: #4c2a85;
}
.container p {
  margin-bottom: 1rem;
  text-align: justify;
}

/* 6. Footer */
footer {
  text-align: center;
  padding: 1rem;
  background-color: #c1b6d8;
  color: #2c1b3b;
  font-size: 0.9rem;
}

/* 7. Responsive */
@media (max-width: 600px) {
  header h1 { font-size: 2rem; }
  .banner-img { max-height: 250px; }
  .banner-text h1 { font-size: 1.6rem; }
}