/* Estilos para la portada y el índice */
.index-hero {
  background: #0e0e0e;
  display: flex;
  align-items: center;
  justify-content: center;
  /* Ocupa el alto disponible entre menú (60px) y barra (56px) */
  height: calc(100vh - 56px);
  padding-top: 60px; /* compensa menú fijo superior */
  min-height: 0;
}
.index-hero img { height: 100%; width: auto; max-width: none; }

.index-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  justify-content: center;
  padding: 16px;
  background: #AE0057;
}
.index-actions a.btn { text-decoration: none; background: darkred; color: #fff; padding: 10px 16px; border-radius: 8px; font-weight: 600; }
.index-actions a.btn:hover { background: red; }

.index-section { padding: 20px 16px; }
.index-section h2 { margin: 0 0 10px 0; font-size: 20px; }

.index-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 12px;
}
.card { border: 1px solid #ddd; border-radius: 8px; padding: 12px; background: #fff; }
.card a { text-decoration: none; color: #0B3861; font-weight: 600; }
.card a:hover { text-decoration: underline; }

.list { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 8px; }
.list a { color: #0B3861; }

.page-jump { display: flex; gap: 8px; align-items: center; justify-content: center; padding: 12px; }
.page-jump input { padding: 8px 10px; border: 1px solid #ccc; border-radius: 6px; width: 140px; }
.page-jump button { padding: 8px 14px; border: none; border-radius: 6px; background: #4164B0; color: #fff; font-weight: 600; }
.page-jump button:hover { background: #0B3861; }

/* Botón iniciar lectura */
.index-nav { display: flex; align-items: center; justify-content: center; height: 56px; background: #ffffff; border-top: 1px solid #eee; }
.index-start { display: flex; justify-content: center; align-items: center; gap: 12px; }
.index-start a.start-btn { text-decoration: none; background: #2D2E45; color: #fff; padding: 10px 16px; border-radius: 8px; font-weight: 600; }
.index-start a.start-btn:hover { background: #3a3b59; }