/* ============================================
   Historia del Resguardo Aduanero del Perú
   Estilo: Libro clásico — Serif, fondo blanco
   ============================================ */

@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:ital,wght@0,400;0,600;0,700;1,400;1,600&family=Lora:ital,wght@0,400;0,500;1,400&display=swap');

:root {
  --cream: #faf8f5;
  --ink: #1c1c1c;
  --ink-light: #4a4a4a;
  --ink-muted: #888;
  --accent: #8b4513;
  --accent-light: rgba(139, 69, 19, 0.08);
  --border: #e8e3dc;
  --sidebar-bg: #f4f1ec;
}

/* === BASE === */
body {
  background: var(--cream) !important;
  color: var(--ink) !important;
}

/* === SIDEBAR === */
.sidebar {
  background: var(--sidebar-bg) !important;
  border-right: 1px solid var(--border) !important;
  padding-top: 0 !important;
}

.sidebar > h1 {
  font-family: 'Playfair Display', serif !important;
  font-size: 0.95rem !important;
  font-weight: 700 !important;
  letter-spacing: 0.06em !important;
  color: var(--ink) !important;
  background: var(--sidebar-bg) !important;
  border-bottom: 1px solid var(--border) !important;
  padding: 28px 24px 20px !important;
  margin: 0 !important;
  line-height: 1.35 !important;
}

.sidebar > h1 a {
  color: var(--ink) !important;
  text-decoration: none !important;
}

.sidebar ul {
  padding: 8px 0 !important;
}

.sidebar ul li a {
  font-family: 'Lora', serif !important;
  font-size: 0.87rem !important;
  color: var(--ink-light) !important;
  padding: 6px 24px !important;
  display: block !important;
  border-left: 2px solid transparent !important;
  transition: all 0.15s !important;
  line-height: 1.5 !important;
}

.sidebar ul li a:hover {
  color: var(--accent) !important;
  background: var(--accent-light) !important;
  text-decoration: none !important;
}

.sidebar ul li.active > a {
  color: var(--accent) !important;
  border-left-color: var(--accent) !important;
  background: var(--accent-light) !important;
  font-weight: 500 !important;
}

/* Secciones del sidebar */
.sidebar ul li p {
  font-family: 'Lora', serif !important;
  font-size: 0.7rem !important;
  font-weight: 700 !important;
  letter-spacing: 0.14em !important;
  text-transform: uppercase !important;
  color: var(--ink-muted) !important;
  padding: 18px 24px 6px !important;
  margin: 0 !important;
}

/* === CONTENT === */
.content {
  background: var(--cream) !important;
  padding-top: 60px !important;
}

.markdown-section {
  max-width: 700px !important;
  margin: 0 auto !important;
  padding: 0 40px 80px !important;
}

/* === TIPOGRAFÍA === */

/* Título principal H1 */
.markdown-section h1 {
  font-family: 'Playfair Display', serif !important;
  font-size: 2.5rem !important;
  font-weight: 700 !important;
  line-height: 1.2 !important;
  color: var(--ink) !important;
  margin: 0 0 12px !important;
  padding-bottom: 0 !important;
  border-bottom: none !important;
}

/* H2 — títulos de sección */
.markdown-section h2 {
  font-family: 'Playfair Display', serif !important;
  font-size: 1.5rem !important;
  font-weight: 600 !important;
  color: var(--ink) !important;
  margin: 2.5em 0 0.8em !important;
  padding-bottom: 0 !important;
  border-bottom: none !important;
  line-height: 1.3 !important;
}

/* H2 con línea decorativa */
.markdown-section h2::before {
  content: '— ';
  color: var(--accent);
  font-style: italic;
}

/* H3 — subtítulos */
.markdown-section h3 {
  font-family: 'Playfair Display', serif !important;
  font-size: 1.1rem !important;
  font-style: italic !important;
  font-weight: 600 !important;
  color: var(--ink-light) !important;
  margin: 2em 0 0.6em !important;
}

/* Párrafos */
.markdown-section p {
  font-family: 'Lora', serif !important;
  font-size: 1.1rem !important;
  line-height: 1.9 !important;
  color: var(--ink) !important;
  margin-bottom: 1.5em !important;
  text-align: justify !important;
  hyphens: auto !important;
}

/* Letra capital en primer párrafo */
.markdown-section > p:first-of-type::first-letter {
  font-family: 'Playfair Display', serif !important;
  font-size: 3.6rem !important;
  font-weight: 700 !important;
  line-height: 0.85 !important;
  float: left !important;
  margin: 6px 10px 0 0 !important;
  color: var(--accent) !important;
}

/* === BLOCKQUOTE === */
.markdown-section blockquote {
  border-left: 3px solid var(--accent) !important;
  margin: 2em 0 !important;
  padding: 4px 0 4px 24px !important;
  background: none !important;
}

.markdown-section blockquote p {
  font-style: italic !important;
  color: var(--ink-light) !important;
  font-size: 1.05rem !important;
  margin-bottom: 0 !important;
}

/* === LÍNEA HORIZONTAL === */
.markdown-section hr {
  border: none !important;
  border-top: 1px solid var(--border) !important;
  margin: 3em auto !important;
  width: 60% !important;
}

/* === LINKS === */
.markdown-section a {
  color: var(--accent) !important;
  text-decoration: none !important;
  border-bottom: 1px solid rgba(139,69,19,0.3) !important;
  transition: border-color 0.15s !important;
}

.markdown-section a:hover {
  border-bottom-color: var(--accent) !important;
}

/* === STRONG / EM === */
.markdown-section strong {
  font-weight: 600 !important;
  color: var(--ink) !important;
}

.markdown-section em {
  font-style: italic !important;
  color: var(--ink-light) !important;
}

/* === SEARCH === */
.search input {
  font-family: 'Lora', serif !important;
  font-size: 0.85rem !important;
  border: 1px solid var(--border) !important;
  border-radius: 2px !important;
  background: white !important;
  color: var(--ink) !important;
}

/* === PAGINACIÓN === */
.pagination-item a {
  font-family: 'Lora', serif !important;
  color: var(--accent) !important;
  font-style: italic !important;
}

/* === RESPONSIVE === */
@media (max-width: 768px) {
  .markdown-section {
    padding: 0 20px 60px !important;
  }

  .markdown-section h1 {
    font-size: 1.9rem !important;
  }

  .markdown-section p {
    font-size: 1rem !important;
    text-align: left !important;
  }
}