@charset "UTF-8";
/* Tema visual del libro de Mesopotamia */
@font-face {
  font-family: "mesopotamia";
  src: url("../assets/fonts/Cuneiforme.ttf") format("truetype");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
/* ==================================================
   MESOPOTAMIA
   Identidad visual del periodo
   Lapislázuli como color principal y oro/bronce
   como acento secundario.
================================================== */
/* ==================================================
   LECTOR
================================================== */
.page-chapter-reader.mesopotamia,
.page-prologue-reader.mesopotamia {
  /* ----------------------------------------------
     COLORES BASE
  ---------------------------------------------- */
  --reader-ink: #2e2b28;
  --reader-muted: #607078;
  --reader-accent: #1f4e5f;
  --reader-accent-light: #4f7c8c;
  --reader-accent-mid: #2f6172;
  --reader-accent-dark: #163947;
  --reader-gold: #b58b38;
  --reader-gold-soft: #d2b46b;
  /*
   * En Mesopotamia el color secundario de la UI
   * también pertenece a la familia lapislázuli.
   */
  --reader-secondary: var(--reader-accent-mid);
  /* ----------------------------------------------
     DIVISORES DEL LIBRO
  ---------------------------------------------- */
  --book-divider-line:
  	color-mix(
  		in srgb,
  		var(--reader-accent) 28%,
  		transparent
  	);
  --book-divider-paper: var(--reader-paper);
  --book-divider-image:
  	url("../assets/images/mesopotamia/inanna-star.png");
  /* ----------------------------------------------
     CONTROLES / FOCO
  ---------------------------------------------- */
  --reader-control-focus:
  	color-mix(
  		in srgb,
  		var(--reader-accent) 50%,
  		transparent
  	);
  --reader-focus:
  	color-mix(
  		in srgb,
  		var(--reader-accent) 28%,
  		transparent
  	);
  /* ----------------------------------------------
     PANEL PRINCIPAL
  ---------------------------------------------- */
  --reader-panel-border:
  	color-mix(
  		in srgb,
  		var(--reader-accent) 24%,
  		transparent
  	);
  --reader-panel-shadow:
  	rgba(10, 32, 40, 0.16);
  /* ----------------------------------------------
     FLECHAS
  ---------------------------------------------- */
  --reader-arrow:
  	var(--reader-accent);
  /* ----------------------------------------------
     CITAS / BLOQUES
  ---------------------------------------------- */
  --reader-quote-border:
  	color-mix(
  		in srgb,
  		var(--reader-accent) 45%,
  		transparent
  	);
  /* ----------------------------------------------
     BARRA DE PROGRESO
  ---------------------------------------------- */
  --reader-track-start:
  	color-mix(
  		in srgb,
  		var(--reader-accent) 18%,
  		transparent
  	);
  --reader-track-end:
  	color-mix(
  		in srgb,
  		var(--reader-accent) 8%,
  		transparent
  	);
  --reader-track-border:
  	color-mix(
  		in srgb,
  		var(--reader-accent) 22%,
  		transparent
  	);
  --reader-track-shadow:
  	rgba(17, 49, 61, 0.12);
  --reader-progress-highlight:
  	rgba(255, 255, 255, 0.28);
  --reader-progress-start:
  	var(--reader-accent-light);
  --reader-progress-mid:
  	var(--reader-accent-mid);
  --reader-progress-end:
  	var(--reader-accent);
  --reader-progress-shadow:
  	rgba(11, 41, 52, 0.22);
  --reader-progress-glow:
  	color-mix(
  		in srgb,
  		var(--reader-accent) 18%,
  		transparent
  	);
}
.page-chapter-reader.mesopotamia .reader-progress__separator,
.page-prologue-reader.mesopotamia .reader-progress__separator {
  color: var(--reader-accent-mid);
}
.page-chapter-reader.mesopotamia .reader-progress__percentage,
.page-prologue-reader.mesopotamia .reader-progress__percentage {
  color: var(--reader-accent-mid);
}
.page-chapter-reader.mesopotamia,
.page-prologue-reader.mesopotamia {
  /* ----------------------------------------------
     CAPITULAR
  ---------------------------------------------- */
  --reader-dropcap:
  	var(--reader-accent);
  --reader-decorative-font:
  	"mesopotamia",
  	Georgia,
  	"Times New Roman",
  	serif;
  --reader-dropcap-weight: 400;
  /* ----------------------------------------------
     DIVISORES INTERNOS
  ---------------------------------------------- */
  --reader-divider:
  	color-mix(
  		in srgb,
  		var(--reader-accent) 24%,
  		transparent
  	);
  /* ----------------------------------------------
     NOTAS HISTÓRICAS
  ---------------------------------------------- */
  --reader-note-backdrop:
  	rgba(10, 32, 40, 0.58);
  --reader-note-grain-primary:
  	color-mix(
  		in srgb,
  		var(--reader-accent) 3.2%,
  		transparent
  	);
  --reader-note-grain-secondary:
  	color-mix(
  		in srgb,
  		var(--reader-accent) 2.4%,
  		transparent
  	);
  --reader-note-wash:
  	color-mix(
  		in srgb,
  		var(--reader-accent) 2.5%,
  		transparent
  	);
  --reader-note-border:
  	color-mix(
  		in srgb,
  		var(--reader-accent) 24%,
  		transparent
  	);
  --reader-note-shadow-near:
  	rgba(10, 32, 40, 0.12);
  --reader-note-shadow-far:
  	rgba(10, 32, 40, 0.28);
  --reader-note-frame:
  	color-mix(
  		in srgb,
  		var(--reader-accent) 18%,
  		transparent
  	);
  --reader-note-focus:
  	color-mix(
  		in srgb,
  		var(--reader-accent) 30%,
  		transparent
  	);
  --reader-note-section-line:
  	color-mix(
  		in srgb,
  		var(--reader-accent) 16%,
  		transparent
  	);
  /*----------------------------------------------
  	NOTAS
  -----------------------------------------------*/
}
.page-chapter-reader.mesopotamia .historical-note-link,
.page-chapter-reader.mesopotamia .historical-map-link,
.page-chapter-reader.mesopotamia .historical-place,
.page-prologue-reader.mesopotamia .historical-note-link,
.page-prologue-reader.mesopotamia .historical-map-link,
.page-prologue-reader.mesopotamia .historical-place {
  display: inline;
  padding: 0;
  vertical-align: baseline;
  color: var(--reader-accent);
  background: transparent;
  border: 0;
  font: inherit;
  font-weight: 600;
  line-height: inherit;
  cursor: pointer;
  text-decoration: none;
  transition: color var(--reader-transition), opacity var(--reader-transition);
}
.page-chapter-reader.mesopotamia .historical-note-link:hover,
.page-chapter-reader.mesopotamia .historical-map-link:hover,
.page-chapter-reader.mesopotamia .historical-place:hover,
.page-prologue-reader.mesopotamia .historical-note-link:hover,
.page-prologue-reader.mesopotamia .historical-map-link:hover,
.page-prologue-reader.mesopotamia .historical-place:hover {
  color: var(--reader-accent-light, var(--reader-accent));
}
.page-chapter-reader.mesopotamia .historical-note-link:focus-visible,
.page-chapter-reader.mesopotamia .historical-map-link:focus-visible,
.page-chapter-reader.mesopotamia .historical-place:focus-visible,
.page-prologue-reader.mesopotamia .historical-note-link:focus-visible,
.page-prologue-reader.mesopotamia .historical-map-link:focus-visible,
.page-prologue-reader.mesopotamia .historical-place:focus-visible {
  outline: 0.15rem solid var(--reader-focus);
  outline-offset: 0.12rem;
  border-radius: 0.12rem;
}
.page-chapter-reader.mesopotamia,
.page-prologue-reader.mesopotamia {
  /* ----------------------------------------------
     BOTÓN CERRAR NOTAS
  ---------------------------------------------- */
  --reader-close-ink:
  	var(--reader-gold-soft);
  --reader-close-start:
  	var(--reader-accent-light);
  --reader-close-mid:
  	var(--reader-accent);
  --reader-close-end:
  	var(--reader-accent-dark);
  --reader-close-border:
  	var(--reader-accent-light);
  --reader-close-shadow:
  	rgba(10, 32, 40, 0.65);
  --reader-close-highlight:
  	rgba(255, 255, 255, 0.16);
  --reader-close-hover-border:
  	var(--reader-gold);
  --reader-close-hover-ring:
  	rgba(22, 57, 71, 0.9);
  --reader-close-hover-shadow:
  	rgba(10, 32, 40, 0.34);
  /* ----------------------------------------------
     SUPERFICIES
  ---------------------------------------------- */
  --reader-soft-surface:
  	#edf2f3;
  /* ----------------------------------------------
     ILUSTRACIONES
  ---------------------------------------------- */
  --reader-illustration-shadow:
  	rgba(10, 32, 40, 0.14);
  --reader-illustration-border:
  	color-mix(
  		in srgb,
  		var(--reader-accent) 22%,
  		transparent
  	);
  /* ----------------------------------------------
     PLACEHOLDERS
  ---------------------------------------------- */
  --reader-placeholder-start:
  	color-mix(
  		in srgb,
  		var(--reader-accent) 5%,
  		transparent
  	);
  --reader-placeholder-end:
  	color-mix(
  		in srgb,
  		var(--reader-accent-light) 10%,
  		transparent
  	);
  /* ----------------------------------------------
     CABECERA
  ---------------------------------------------- */
  --reader-header-subtitle:
  	var(--reader-accent-mid);
  --reader-header-title:
  	var(--reader-accent);
  /* ----------------------------------------------
     ORNAMENTOS
  ---------------------------------------------- */
  --reader-ornament-line:
  	color-mix(
  		in srgb,
  		var(--reader-accent) 34%,
  		transparent
  	);
  --reader-ornament-border:
  	color-mix(
  		in srgb,
  		var(--reader-accent) 42%,
  		transparent
  	);
  --reader-ornament-paper:
  	var(--reader-paper);
  /* ----------------------------------------------
     PRÓLOGO
  ---------------------------------------------- */
  --reader-prologue-title:
  	var(--reader-accent);
  --reader-prologue-lead:
  	var(--reader-muted);
  --reader-prologue-line:
  	color-mix(
  		in srgb,
  		var(--reader-accent) 30%,
  		transparent
  	);
  /* ----------------------------------------------
     BACKGROUND
  ---------------------------------------------- */
  --reader-background:
  	#163947
  	url("../assets/images/mesopotamia/background.jpg")
  	center top / cover no-repeat fixed;
  /* ----------------------------------------------
     HOVERS ESPECÍFICOS
  ---------------------------------------------- */
}
.page-chapter-reader.mesopotamia .chapter-reader__arrow:hover,
.page-prologue-reader.mesopotamia .chapter-reader__arrow:hover {
  color: var(--reader-accent-light);
}
.page-chapter-reader.mesopotamia .chapter-reader,
.page-prologue-reader.mesopotamia .chapter-reader {
  --reader-shell-width: min(calc(100% - 2rem), 98rem);
}

/* ==================================================
   VARIABLES GENERALES DE MESOPOTAMIA
================================================== */
.mesopotamia,
.page-introduccion--mesopotamia {
  --reader-accent: #1f4e5f;
  --reader-gold: #b58b38;
  --book-bg: #1f4e5f;
  --book-bg-dark: #163947;
  --book-sand: #c9a46a;
  --book-sand-light: #e8d2a5;
  --book-gold: #b6782d;
  --book-gold-soft: #d4b07a;
  --book-text: #2f241c;
  --book-title: #1f4e5f;
  --book-border: #1f4e5f;
  --book-icon: #1f4e5f;
  --book-accent: #2f6172;
  /* Tema del componente de mapas, disponible también dentro del lector. */
  --map-paper: #f6f5f0;
  --map-paper-light: #fff;
  --map-text: #2e2b28;
  --map-muted: #607078;
  --map-accent: #2f6172;
  --map-accent-dark: #163947;
  --map-medium: #1f4e5f;
  --map-accent-soft: #9ab3bc;
  --map-line: color-mix(in srgb, #1f4e5f 28%, transparent);
}

/* ==================================================
   NAVEGACIÓN
================================================== */
.mesopotamia,
.page-introduccion--mesopotamia {
  /* ----------------------------------------------
     BOTÓN MENÚ
  ---------------------------------------------- */
  --navigation-skip-ink:
  	#163947;
  --navigation-header-ink:
  	#e8d2a5;
  --navigation-toggle-ink:
  	#e8d2a5;
  --navigation-toggle-start:
  	#163947;
  --navigation-toggle-mid:
  	#1f4e5f;
  --navigation-toggle-end:
  	#163947;
  --navigation-toggle-border:
  	#2f6172;
  --navigation-toggle-inset:
  	rgba(22, 57, 71, 0.75);
  --navigation-toggle-highlight:
  	rgba(232, 210, 165, 0.14);
  --navigation-toggle-shadow:
  	rgba(0, 0, 0, 0.55);
  --navigation-toggle-hover-ink:
  	#e8d2a5;
  --navigation-toggle-hover-border:
  	#4f7c8c;
  --navigation-toggle-hover-highlight:
  	rgba(232, 210, 165, 0.2);
  --navigation-toggle-hover-glow:
  	color-mix(
  		in srgb,
  		#4f7c8c 28%,
  		transparent
  	);
  --navigation-toggle-focus:
  	#e8d2a5;
  /* ----------------------------------------------
     PANEL
  ---------------------------------------------- */
  --navigation-panel-ink:
  	#e8d2a5;
  --navigation-panel-edge-light:
  	rgba(232, 210, 165, 0.04);
  --navigation-panel-edge-shadow:
  	rgba(0, 0, 0, 0.2);
  --navigation-panel-glow:
  	rgba(22, 57, 71, 0.28);
  --navigation-panel-grain:
  	rgba(255, 255, 255, 0.018);
  --navigation-panel-start:
  	#163947;
  --navigation-panel-mid:
  	#1f4e5f;
  --navigation-panel-end:
  	#163947;
  --navigation-panel-border:
  	#1f4e5f;
  --navigation-panel-inset-shadow:
  	rgba(0, 0, 0, 0.25);
  --navigation-panel-inset-light:
  	color-mix(
  		in srgb,
  		#4f7c8c 12%,
  		transparent
  	);
  --navigation-panel-shadow:
  	rgba(0, 0, 0, 0.48);
  --navigation-scrollbar:
  	color-mix(
  		in srgb,
  		#4f7c8c 65%,
  		transparent
  	);
  --navigation-panel-frame:
  	color-mix(
  		in srgb,
  		#4f7c8c 50%,
  		transparent
  	);
  --navigation-panel-frame-shadow:
  	rgba(22, 57, 71, 0.5);
  --navigation-panel-frame-glow:
  	rgba(0, 0, 0, 0.34);
  /* ----------------------------------------------
     HOME
  ---------------------------------------------- */
  --navigation-home-ink:
  	#e8d2a5;
  --navigation-home-active:
  	#e8d2a5;
  --navigation-home-glow:
  	color-mix(
  		in srgb,
  		#4f7c8c 30%,
  		transparent
  	);
  /* ----------------------------------------------
     LINKS
  ---------------------------------------------- */
  --navigation-link-focus:
  	#4f7c8c;
  --navigation-icon:
  	#4f7c8c;
  --navigation-title:
  	#d2b46b;
  --navigation-title-line:
  	color-mix(
  		in srgb,
  		#4f7c8c 42%,
  		transparent
  	);
  --navigation-link-ink:
  	#e8d2a5;
  --navigation-link-marker-edge:
  	#4f7c8c;
  --navigation-link-marker-center:
  	#2f6172;
  --navigation-link-active:
  	#e8d2a5;
  --navigation-link-glow:
  	color-mix(
  		in srgb,
  		#4f7c8c 25%,
  		transparent
  	);
  --navigation-link-marker-glow:
  	color-mix(
  		in srgb,
  		#4f7c8c 55%,
  		transparent
  	);
  --navigation-link-period:
  	#d2b46b;
  /* ----------------------------------------------
     BACKDROP
  ---------------------------------------------- */
  --navigation-backdrop:
  	rgba(22, 57, 71, 0.48);
}
.mesopotamia .cover-navigation,
.page-introduccion--mesopotamia .cover-navigation {
  background: #163947;
}

/* ==================================================
   INTRODUCCIÓN DE MESOPOTAMIA
================================================== */
.page-introduccion--mesopotamia {
  --intro-color-dark:
  	#163947;
  --intro-color-medium:
  	#1f4e5f;
  --intro-color-accent:
  	#2f6172;
  --intro-color-accent-soft:
  	#9ab3bc;
  --intro-color-paper:
  	#f6f5f0;
  --intro-color-paper-light:
  	#fff;
  --intro-color-text:
  	#2e2b28;
  --intro-color-muted:
  	#607078;
  --intro-color-line:
  	color-mix(
  		in srgb,
  		var(--reader-accent) 28%,
  		transparent
  	);
  --intro-background-image:
  	url("../assets/images/mesopotamia/background.jpg");
}

.page-chapter-reader.mesopotamia .chapter-reader,
.page-prologue-reader.mesopotamia .chapter-reader {
  --reader-shell-width: min(calc(100% - 2rem), 108rem);
}

@media (max-width: 1280px) {
  .page-chapter-reader.mesopotamia .chapter-reader,
  .page-prologue-reader.mesopotamia .chapter-reader {
    --reader-shell-width: min(calc(100% - 2rem), 98rem);
  }
}
@media (max-width: 1024px) {
  .page-chapter-reader.mesopotamia .chapter-reader,
  .page-prologue-reader.mesopotamia .chapter-reader {
    --reader-shell-width: min(calc(100% - 2rem), 84rem);
  }
}
@media (max-width: 768px) {
  .page-chapter-reader.mesopotamia .chapter-reader,
  .page-prologue-reader.mesopotamia .chapter-reader {
    --reader-shell-width: 100%;
  }
}

/*# sourceMappingURL=mesopotamia.css.map */