/* ============================================================================
   🧭 BAQUEANO ECOSYSTEM — ESTILOS HISTORIA 1:1 (historia-exact.css)
   ============================================================================
   🎯 1. POR QUÉ (WHY / PROPÓSITO):
   - Replicar de forma idéntica la interfaz oficial de historia.html (Imagen 1).
   - Integrar la barra de navegación compartida, el hero "UNA HISTORIA QUE SIGUE VIVA",
     la línea del tiempo de Nicaragua con 7 periodos, el explorador de los 17 territorios
     con mapa departamental y panel interactivo de León, pueblos originarios,
     personajes que marcaron nuestra historia, patrimonio vivo, antes y ahora,
     audioguía Baqueano con waveform, fuentes y referencias oficiales y el footer.

   ⚙️ 2. CÓMO (HOW / ARQUITECTURA & IMPLEMENTACIÓN):
   - Paleta oficial: Navy (#0B253A / #081827), Teal (#165D6F), Naranja (#F65E01),
     Arena (#F4E6C1) y Blanco/Gris Claro (#F7F9FC).
   - Layout responsivo con CSS Grid y Flexbox.
   - Cero uso de términos prohibidos y 100% fidelidad visual.

   📦 3. QUÉ (WHAT / COMPONENTES EXPUESTOS):
   - .hist-hero-exact : Hero con titular "UNA HISTORIA QUE SIGUE VIVA" y accesos.
   - .hist-timeline-row : 7 tarjetas cronológicas desde la Época Prehispánica a la Contemporánea.
   - .hist-territories-split : Mapa departamental interactivo + explorador con lista de 17 departamentos.
   - .hist-peoples-row : 5 tarjetas de pueblos originarios (Chorotegas, Nicaraos, etc.).
   - .hist-characters-row : 5 tarjetas de líderes históricos (Diriangén, Darío, Sandino, etc.).
   - .hist-heritage-grid : 6 tarjetas de patrimonio vivo (El Güegüense, Acahualinca, etc.).
   - .hist-before-after-grid : 4 tarjetas comparativas antes y ahora (León, Granada, etc.).
   - .hist-audio-box : Reproductor de audio con waveform y categorías.
   - .hist-sources-bar : Logotipos de INTUR, INC, MINED, BCN, MARENA, UNESCO.
   ============================================================================ */

:root {
  --bq-navy: #0B253A;
  --bq-navy-dark: #081827;
  --bq-teal: #165D6F;
  --bq-orange: #F65E01;
  --bq-green: #4A7A5A;
  --bq-cream: #F4E6C1;
  --bq-bg-light: #F7F9FC;
  --bq-text-dark: #0B253A;
  --bq-text-muted: #64748B;
  --bq-border-light: #E2E8F0;
  --bq-font-heading: 'Montserrat', sans-serif;
  --bq-font-body: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
}

.page-historia-exact {
  background-color: var(--bq-bg-light);
  color: var(--bq-text-dark);
  font-family: var(--bq-font-body);
  margin: 0;
  padding: 0;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
}

/* ============================================================================
   1. HERO HISTORIA (IMAGEN 1)
   ============================================================================ */
.hist-hero-exact {
  position: relative;
  min-height: 480px;
  background-color: var(--bq-navy);
  background-image: 
    linear-gradient(90deg, rgba(8, 24, 39, 0.94) 0%, rgba(8, 24, 39, 0.7) 48%, rgba(8, 24, 39, 0.18) 100%),
    url('../../assets/images/destinos/Casa Señorial Colonial Granada.jpg');
  background-size: cover;
  background-position: center 45%;
  padding-top: 95px;
  padding-bottom: 40px;
  display: flex;
  align-items: center;
}

.hist-hero-exact .exact-container {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
}

.hist-hero-left {
  max-width: 620px;
}

.hist-hero-badge {
  display: inline-block;
  color: #38BDF8;
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  margin-bottom: 10px;
}

.hist-hero-title {
  font-family: var(--bq-font-heading);
  font-size: clamp(2.4rem, 4.8vw, 3.8rem);
  font-weight: 900;
  color: #FFFFFF;
  line-height: 1.05;
  margin: 0 0 14px 0;
  letter-spacing: -0.02em;
}

.hist-hero-title-accent {
  color: var(--bq-orange);
  font-style: italic;
}

.hist-hero-subtitle {
  font-size: 0.98rem;
  color: #F1F5F9;
  line-height: 1.5;
  margin: 0 0 22px 0;
  max-width: 540px;
}

.hist-hero-btns {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
}

.hist-btn-orange {
  background: var(--bq-orange);
  color: #FFFFFF;
  padding: 11px 22px;
  border-radius: 20px;
  font-size: 0.84rem;
  font-weight: 800;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  transition: background 0.2s ease;
}

.hist-btn-orange:hover {
  background: #E05400;
}

.hist-btn-glass {
  background: rgba(11, 37, 58, 0.45);
  border: 1px solid rgba(255, 255, 255, 0.7);
  color: #FFFFFF;
  padding: 11px 22px;
  border-radius: 20px;
  font-size: 0.84rem;
  font-weight: 700;
  text-decoration: none;
  backdrop-filter: blur(8px);
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.hist-hero-right {
  display: flex;
  align-items: center;
  justify-content: flex-end;
}

.hist-hero-script {
  font-family: 'Brush Script MT', 'Segoe Script', cursive;
  font-size: 2.5rem;
  color: #FFFFFF;
  transform: rotate(-6deg);
  text-shadow: 0 3px 12px rgba(0, 0, 0, 0.6);
  white-space: nowrap;
}

/* ============================================================================
   2. LÍNEA DEL TIEMPO DE NICARAGUA (7 PERIODOS - IMAGEN 1)
   ============================================================================ */
.hist-timeline-section {
  margin: 24px 0 40px 0;
}

.hist-timeline-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 16px;
}

.hist-timeline-title-group h2 {
  font-family: var(--bq-font-heading);
  font-size: 1.45rem;
  font-weight: 900;
  color: var(--bq-navy);
  margin: 0 0 2px 0;
  display: flex;
  align-items: center;
  gap: 8px;
}

.hist-timeline-title-group p {
  font-size: 0.82rem;
  color: var(--bq-text-muted);
  margin: 0;
}

.hist-timeline-arrows {
  display: flex;
  gap: 6px;
}

.hist-arrow-btn {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  border: 1px solid var(--bq-border-light);
  background: #FFFFFF;
  color: var(--bq-navy);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.72rem;
  cursor: pointer;
}

.hist-timeline-scroller {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 10px;
}

.hist-era-card {
  background: #FFFFFF;
  border: 1px solid var(--bq-border-light);
  border-radius: 12px;
  padding: 10px;
  display: flex;
  flex-direction: column;
  box-shadow: 0 3px 10px rgba(11, 37, 58, 0.04);
}

.hist-era-thumb {
  width: 100%;
  height: 80px;
  border-radius: 8px;
  object-fit: cover;
  margin-bottom: 8px;
}

.hist-era-card h4 {
  font-size: 0.8rem;
  font-weight: 800;
  color: var(--bq-navy);
  margin: 0 0 2px 0;
}

.hist-era-card span.dates {
  font-size: 0.65rem;
  color: var(--bq-orange);
  font-weight: 700;
  margin-bottom: 4px;
}

.hist-era-card p {
  font-size: 0.66rem;
  color: var(--bq-text-muted);
  line-height: 1.3;
  margin: 0 0 8px 0;
  flex: 1;
}

.hist-era-link {
  font-size: 0.68rem;
  font-weight: 700;
  color: var(--bq-navy);
  text-decoration: none;
  border: 1px solid var(--bq-border-light);
  border-radius: 6px;
  padding: 4px;
  text-align: center;
}

/* ============================================================================
   3. EXPLORÁ LOS 17 TERRITORIOS (IMAGEN 1)
   ============================================================================ */
.hist-territories-section {
  margin-bottom: 44px;
}

.hist-territories-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
  gap: 18px;
  align-items: start;
}

/* Izquierda: Mapa departamental */
.hist-dept-map-card {
  background: #08283C;
  border-radius: 18px;
  padding: 16px;
  position: relative;
  overflow: hidden;
  box-shadow: 0 8px 24px rgba(11, 37, 58, 0.08);
  min-width: 0;
}

.hist-dept-map-header {
  margin-bottom: 10px;
  color: #FFFFFF;
}

.hist-dept-map-header h3 {
  font-family: var(--bq-font-heading);
  font-size: 1.35rem;
  font-weight: 900;
  margin: 0 0 2px 0;
}

.hist-dept-map-header p {
  font-size: 0.78rem;
  color: #CBD5E1;
  margin: 0;
}

.hist-dept-map-viewport {
  width: 100%;
  height: 440px;
  border-radius: 14px;
  overflow: hidden;
  background: #051C2C;
}

/* Derecha: Explorador de los 17 territorios */
.hist-dept-explorer-card {
  background: #FFFFFF;
  border: 1px solid var(--bq-border-light);
  border-radius: 18px;
  padding: 18px;
  box-shadow: 0 8px 24px rgba(11, 37, 58, 0.06);
  min-width: 0;
}

html[data-theme] .hist-dept-map-card .hist-dept-map-header h3 {
  color: #FFFFFF !important;
}

html[data-theme] .hist-dept-map-card .hist-dept-map-header p {
  color: #CBD5E1 !important;
}

.hist-explorer-top-highlight {
  background: #F8FAFC;
  border: 1px solid var(--bq-border-light);
  border-radius: 12px;
  padding: 12px;
  display: flex;
  gap: 12px;
  margin-bottom: 14px;
}

.hist-highlight-img {
  width: 100px;
  height: 70px;
  border-radius: 8px;
  object-fit: cover;
}

.hist-highlight-info h4 {
  font-size: 0.95rem;
  font-weight: 800;
  color: var(--bq-navy);
  margin: 0 0 2px 0;
}

.hist-highlight-info p {
  font-size: 0.72rem;
  color: var(--bq-text-muted);
  margin: 0 0 6px 0;
  line-height: 1.3;
}

.hist-btn-explore-dept {
  background: var(--bq-orange);
  color: #FFFFFF;
  font-size: 0.72rem;
  font-weight: 800;
  padding: 5px 12px;
  border-radius: 12px;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 4px;
}

/* Lista 2 columnas de los 17 departamentos */
.hist-depts-list-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 6px;
  max-height: 310px;
  overflow-y: auto;
  padding-right: 4px;
}

.hist-dept-pill {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 5px 8px;
  border-radius: 8px;
  border: 1px solid #F1F5F9;
  background: #FFFFFF;
  text-decoration: none;
  color: var(--bq-navy);
  font-size: 0.72rem;
  font-weight: 700;
  transition: background 0.2s ease;
}

.hist-dept-pill:hover {
  background: #F1F5F9;
  border-color: #CBD5E1;
}

.hist-dept-thumb {
  width: 22px;
  height: 22px;
  border-radius: 4px;
  object-fit: cover;
}

/* ============================================================================
   EXPLORADOR TERRITORIAL EN MOVIMIENTO
   ============================================================================
   POR QUÉ: Dar visibilidad continua a los 17 territorios sin obligar a usar
   una lista vertical estrecha ni ocultar destinos bajo desplazamiento interno.
   CÓMO: Carril horizontal, ficha sincronizada, controles táctiles y estados de
   pausa con transiciones basadas en transformaciones aceleradas.
   QUÉ: Recorrido circular accesible, adaptable y controlable por el visitante.
   ============================================================================ */
.hist-territory-heading {
  align-items: flex-start;
  gap: 18px;
  margin-bottom: 14px;
}

.hist-territory-kicker,
.hist-highlight-eyebrow {
  color: #F65E01;
  font-size: 0.66rem;
  font-weight: 900;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.hist-territory-heading h3 {
  color: #0F172A;
  font-family: var(--bq-font-heading);
  font-size: clamp(1.15rem, 2vw, 1.45rem);
  font-weight: 900;
  margin: 4px 0;
}

.hist-territory-heading h3 i { color: #165D6F; }
.hist-territory-heading p { color: #64748B; font-size: 0.76rem; margin: 0; }

.hist-territory-directory-link {
  align-items: center;
  background: #E8F3F5;
  border: 1px solid rgba(22, 93, 111, 0.18);
  border-radius: 999px;
  color: #165D6F;
  display: inline-flex;
  flex: 0 0 auto;
  font-size: 0.7rem;
  font-weight: 800;
  gap: 6px;
  padding: 8px 12px;
  text-decoration: none;
}

.hist-explorer-top-highlight {
  background: linear-gradient(135deg, #FFFFFF 0%, #F0F8F8 100%);
  border-color: rgba(22, 93, 111, 0.2);
  box-shadow: 0 14px 35px rgba(15, 23, 42, 0.1);
  min-height: 130px;
  overflow: hidden;
  position: relative;
}

.hist-territory-count {
  background: #0F172A;
  border-radius: 0 0 0 14px;
  color: #FFFFFF;
  font-size: 0.65rem;
  padding: 7px 10px;
  position: absolute;
  right: 0;
  top: 0;
}

.hist-territory-count strong { color: #F65E01; font-size: 0.82rem; }
.hist-highlight-img { height: 106px; width: 138px; }
.hist-highlight-info { align-self: center; padding-right: 36px; }
.hist-highlight-info h4 { font-size: 1.15rem; margin: 3px 0; }
.hist-highlight-info p { font-size: 0.76rem; }
.hist-btn-explore-dept { border-radius: 999px; padding: 7px 13px; }

.hist-territory-carousel {
  overflow: hidden;
  padding: 4px 1px 10px;
  position: relative;
}

.hist-depts-list-grid {
  display: flex;
  gap: 10px;
  max-height: none;
  overflow: visible;
  padding: 0;
  scroll-behavior: smooth;
  transition: transform 650ms cubic-bezier(0.16, 1, 0.3, 1);
  will-change: transform;
}

.hist-dept-pill {
  align-items: flex-start;
  background: #FFFFFF;
  border: 1px solid #E2E8F0;
  border-radius: 13px;
  box-shadow: 0 8px 20px rgba(15, 23, 42, 0.06);
  flex: 0 0 118px;
  flex-direction: column;
  font-size: 0.72rem;
  gap: 7px;
  min-height: 100px;
  padding: 8px;
  transform: translateZ(0);
  transition: border-color 220ms ease, box-shadow 220ms ease, transform 220ms ease;
}

.hist-dept-pill:hover,
.hist-dept-pill:focus-visible,
.hist-dept-pill.is-active {
  background: #FFFFFF;
  border-color: #F65E01;
  box-shadow: 0 12px 28px rgba(246, 94, 1, 0.18);
  transform: translateY(-3px);
}

.hist-dept-thumb { border-radius: 9px; height: 58px; width: 100%; }

.hist-territory-controls {
  align-items: center;
  display: flex;
  gap: 8px;
  margin-top: 4px;
}

.hist-territory-controls button {
  align-items: center;
  background: #FFFFFF;
  border: 1px solid #CBD5E1;
  border-radius: 999px;
  color: #0F172A;
  cursor: pointer;
  display: inline-flex;
  font: inherit;
  font-size: 0.72rem;
  font-weight: 800;
  gap: 7px;
  justify-content: center;
  min-height: 36px;
  padding: 0 12px;
}

.hist-territory-controls button:hover,
.hist-territory-controls button:focus-visible { border-color: #165D6F; color: #165D6F; }
.hist-territory-pause { min-width: 96px; }

.hist-territory-progress {
  background: #E2E8F0;
  border-radius: 999px;
  flex: 1;
  height: 4px;
  overflow: hidden;
}

.hist-territory-progress span {
  background: linear-gradient(90deg, #165D6F, #F65E01);
  display: block;
  height: 100%;
  transform: scaleX(0);
  transform-origin: left;
}

.hist-territory-progress span.is-running { animation: hist-territory-progress 4.8s linear forwards; }
@keyframes hist-territory-progress { to { transform: scaleX(1); } }

@media (max-width: 640px) {
  .hist-territory-heading { flex-direction: column; }
  .hist-explorer-top-highlight { align-items: flex-start; min-height: 150px; }
  .hist-highlight-img { height: 112px; width: 112px; }
  .hist-highlight-info { padding-right: 0; }
  .hist-territory-directory-link { width: 100%; justify-content: center; }
}

@media (prefers-reduced-motion: reduce) {
  .hist-depts-list-grid { transition: none; }
  .hist-territory-progress span.is-running { animation: none; }
}

/* ============================================================================
   4. PUEBLOS ORIGINARIOS Y MEMORIA VIVA (IMAGEN 1)
   ============================================================================ */
.hist-peoples-section {
  margin-bottom: 40px;
}

.hist-section-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  margin-bottom: 16px;
}

.hist-section-header h2 {
  font-family: var(--bq-font-heading);
  font-size: 1.45rem;
  font-weight: 900;
  color: var(--bq-navy);
  margin: 0 0 2px 0;
}

.hist-section-header p {
  font-size: 0.82rem;
  color: var(--bq-text-muted);
  margin: 0;
}

.hist-section-link {
  font-size: 0.8rem;
  font-weight: 700;
  color: var(--bq-navy);
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.hist-peoples-row {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 12px;
}

.hist-people-card {
  background: #FFFFFF;
  border: 1px solid var(--bq-border-light);
  border-radius: 14px;
  overflow: hidden;
  box-shadow: 0 4px 14px rgba(11, 37, 58, 0.05);
  display: flex;
  flex-direction: column;
}

.hist-people-media {
  position: relative;
  height: 110px;
}

.hist-people-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.hist-people-body {
  padding: 10px;
  display: flex;
  flex-direction: column;
  flex: 1;
}

.hist-people-body h4 {
  font-size: 0.86rem;
  font-weight: 800;
  color: var(--bq-navy);
  margin: 0 0 2px 0;
}

.hist-people-body p {
  font-size: 0.68rem;
  color: var(--bq-text-muted);
  line-height: 1.35;
  margin: 0 0 8px 0;
  flex: 1;
}

.hist-people-arrow {
  width: 26px;
  height: 26px;
  border-radius: 50%;
  border: 1px solid var(--bq-border-light);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.7rem;
  color: var(--bq-navy);
  align-self: flex-end;
}

/* ============================================================================
   5. PERSONAJES QUE MARCARON NUESTRA HISTORIA (IMAGEN 1)
   ============================================================================ */
.hist-characters-section {
  margin-bottom: 40px;
}

.hist-characters-row {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 12px;
}

.hist-character-card {
  background: #FFFFFF;
  border: 1px solid var(--bq-border-light);
  border-radius: 14px;
  overflow: hidden;
  box-shadow: 0 4px 14px rgba(11, 37, 58, 0.05);
  display: flex;
  flex-direction: column;
}

.hist-character-media {
  position: relative;
  height: 130px;
}

.hist-character-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.hist-character-body {
  padding: 10px;
  display: flex;
  flex-direction: column;
  flex: 1;
}

.hist-character-body h4 {
  font-size: 0.86rem;
  font-weight: 800;
  color: var(--bq-navy);
  margin: 0;
}

.hist-character-body span.years {
  font-size: 0.66rem;
  color: var(--bq-text-muted);
  margin-bottom: 4px;
}

.hist-character-body p {
  font-size: 0.68rem;
  color: var(--bq-text-muted);
  line-height: 1.35;
  margin: 0 0 8px 0;
  flex: 1;
}

/* ============================================================================
   6. PATRIMONIO VIVO (IMAGEN 1)
   ============================================================================ */
.hist-heritage-section {
  margin-bottom: 40px;
}

.hist-heritage-row {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 12px;
}

.hist-heritage-card {
  background: #FFFFFF;
  border: 1px solid var(--bq-border-light);
  border-radius: 12px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

.hist-heritage-media {
  height: 95px;
}

.hist-heritage-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.hist-heritage-body {
  padding: 8px;
}

.hist-heritage-body h4 {
  font-size: 0.78rem;
  font-weight: 800;
  color: var(--bq-navy);
  margin: 0 0 2px 0;
}

.hist-heritage-body p {
  font-size: 0.64rem;
  color: var(--bq-text-muted);
  margin: 0;
}

/* ============================================================================
   7. ANTES Y AHORA (IMAGEN 1)
   ============================================================================ */
.hist-before-after-section {
  margin-bottom: 40px;
}

.hist-before-after-row {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 12px;
}

.hist-compare-card {
  position: relative;
  height: 130px;
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 4px 14px rgba(11, 37, 58, 0.06);
}

.hist-compare-card img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.hist-compare-label {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  background: linear-gradient(180deg, transparent 0%, rgba(0,0,0,0.85) 100%);
  color: #FFFFFF;
  padding: 8px;
  font-size: 0.72rem;
  font-weight: 700;
}

/* ============================================================================
   8. ESCUCHÁ NUESTRA HISTORIA (AUDIO AUDIOGUÍA)
   ============================================================================ */
.hist-audio-section {
  background: #FFFFFF;
  border: 1px solid var(--bq-border-light);
  border-radius: 18px;
  padding: 22px;
  margin-bottom: 40px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
}

.hist-audio-left {
  display: flex;
  align-items: center;
  gap: 16px;
}

.hist-bird-avatar {
  width: 60px;
  height: auto;
}

.hist-audio-play-btn {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: #0284C7;
  color: #FFFFFF;
  border: none;
  font-size: 1rem;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}

.hist-waveform-bar {
  display: flex;
  align-items: center;
  gap: 3px;
  height: 28px;
}

.hist-waveform-bar span {
  width: 3px;
  background: #93C5FD;
  border-radius: 2px;
}

.hist-audio-categories {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
  max-width: 450px;
}

.hist-audio-tag {
  background: #F1F5F9;
  border-radius: 12px;
  padding: 4px 10px;
  font-size: 0.68rem;
  font-weight: 700;
  color: var(--bq-navy);
  cursor: pointer;
}

/* ============================================================================
   9. FUENTES Y REFERENCIAS (IMAGEN 1)
   ============================================================================ */
.hist-sources-section {
  background: #FFFFFF;
  border: 1px solid var(--bq-border-light);
  border-radius: 18px;
  padding: 18px 24px;
  margin-bottom: 40px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
}

.hist-sources-logos {
  display: flex;
  align-items: center;
  gap: 20px;
  flex-wrap: wrap;
}

.hist-source-pill {
  font-size: 0.74rem;
  font-weight: 800;
  color: var(--bq-navy);
  display: flex;
  align-items: center;
  gap: 6px;
}

.hist-btn-all-sources {
  background: #0B253A;
  color: #FFFFFF;
  font-size: 0.76rem;
  font-weight: 800;
  padding: 8px 18px;
  border-radius: 16px;
  text-decoration: none;
  white-space: nowrap;
}

/* ============================================================================
   10. CTA BANNER (IMAGEN 1)
   ============================================================================ */
.hist-cta-banner {
  border-radius: 20px;
  background-color: var(--bq-navy-dark);
  background-image: 
    linear-gradient(90deg, rgba(8, 24, 39, 0.94) 0%, rgba(8, 24, 39, 0.65) 50%, rgba(8, 24, 39, 0.85) 100%),
    url('../../assets/images/footer.webp');
  background-size: cover;
  background-position: center;
  padding: 30px 40px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  margin-bottom: 44px;
}

.hist-cta-left h3 {
  font-family: var(--bq-font-heading);
  font-size: 1.45rem;
  font-weight: 900;
  color: #FFFFFF;
  margin: 0 0 4px 0;
}

.hist-cta-left p {
  font-size: 0.84rem;
  color: #E2E8F0;
  margin: 0;
}

.hist-cta-btns {
  display: flex;
  gap: 12px;
}

/* ============================================================================
   11. RESPONSIVO
   ============================================================================ */
@media (max-width: 1024px) {
  .hist-timeline-scroller { grid-template-columns: repeat(4, 1fr); }
  .hist-territories-grid { grid-template-columns: 1fr; }
  .hist-dept-explorer-card { order: -1; }
  .hist-dept-map-viewport { height: 330px; }
  .hist-peoples-row { grid-template-columns: repeat(3, 1fr); }
  .hist-characters-row { grid-template-columns: repeat(3, 1fr); }
  .hist-heritage-row { grid-template-columns: repeat(3, 1fr); }
  .hist-before-after-row { grid-template-columns: repeat(2, 1fr); }
  .hist-audio-section { flex-direction: column; align-items: flex-start; }
  .hist-sources-section { flex-direction: column; align-items: flex-start; }
  .hist-cta-banner { flex-direction: column; align-items: flex-start; }
}

@media (max-width: 680px) {
  .hist-hero-exact .exact-container { flex-direction: column; align-items: flex-start; gap: 14px; }
  .hist-timeline-scroller { grid-template-columns: 1fr 1fr; }
  .hist-peoples-row { grid-template-columns: 1fr; }
  .hist-characters-row { grid-template-columns: 1fr; }
  .hist-heritage-row { grid-template-columns: 1fr 1fr; }
  .hist-before-after-row { grid-template-columns: 1fr; }
}

/* ============================================================================
 * AUDIOGUÍA "ESCUCHÁ NUESTRA HISTORIA" — corrección y estados (2026-10-03)
 * 🎯 POR QUÉ: el indicador de tiempo vivía dentro de .hist-waveform-bar y
 *   heredaba la regla de cada barrita (3 px de ancho, fondo azul): se leía en
 *   vertical, un carácter por línea. Los capítulos no respondían al toque.
 * ⚙️ CÓMO: el indicador (.hist-audio-time) recupera su ancho natural; las
 *   barritas excluyen ese span; capítulos como botones con estado activo;
 *   la onda se anima solo mientras habla (js/historia-audioguia.js).
 * 📦 QUÉ: reproductor legible en 320–2560 px, objetivos táctiles ≥ 36 px.
 * ========================================================================== */
.hist-audio-left > div { min-width: 0; }

.hist-waveform-bar .hist-audio-time {
  width: auto;
  height: auto;
  background: none;
  border-radius: 0;
  white-space: nowrap;
  margin-left: 10px;
  font-size: 0.72rem;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  color: #4F5E6B;
}

.hist-audio-play-btn {
  flex: 0 0 auto;
  background: #165D6F;
  box-shadow: 0 10px 22px -12px rgba(22, 93, 111, 0.8);
  transition: background-color 160ms ease, transform 160ms cubic-bezier(0.22, 1, 0.36, 1);
}
.hist-audio-play-btn:hover { background: #0E4655; }
.hist-audio-section.is-playing .hist-audio-play-btn { background: #C54B01; }
.hist-audio-play-btn:focus-visible { outline: 3px solid #F65E01; outline-offset: 3px; }

.hist-audio-caption {
  margin: 8px 0 0;
  max-width: 56ch;
  font-size: 0.8rem;
  line-height: 1.5;
  color: #4F5E6B;
}

.hist-audio-tag {
  font-family: inherit;
  min-height: 36px;
  padding: 6px 12px;
  border: 1px solid transparent;
  cursor: pointer;
  transition: background-color 160ms ease, border-color 160ms ease, color 160ms ease;
}
.hist-audio-tag:hover { border-color: rgba(22, 93, 111, 0.35); background: #E6EEF0; }
.hist-audio-tag:focus-visible { outline: 3px solid #F65E01; outline-offset: 2px; }
.hist-audio-tag.is-active { background: #165D6F; color: #FFFFFF; border-color: #165D6F; }

@keyframes hist-wave {
  from { transform: scaleY(0.35); }
  to   { transform: scaleY(1); }
}
.hist-audio-section.is-playing .hist-waveform-bar span:not(.hist-audio-time) {
  background: #165D6F;
  animation: hist-wave 0.7s ease-in-out infinite alternate;
}
.hist-audio-section.is-playing .hist-waveform-bar span:nth-child(2n) { animation-delay: -0.25s; }
.hist-audio-section.is-playing .hist-waveform-bar span:nth-child(3n) { animation-delay: -0.5s; }

@media (max-width: 600px) {
  .hist-audio-left { align-items: flex-start; flex-wrap: wrap; }
  .hist-audio-left > div { flex: 1 1 200px; }
  .hist-audio-categories { max-width: none; }
}
@media (prefers-reduced-motion: reduce) {
  .hist-audio-section.is-playing .hist-waveform-bar span:not(.hist-audio-time) { animation: none; }
}

/* ============================================================================
 * FICHA DE ÉPOCA "CONOCER MÁS" (<dialog>, js/historia-epocas.js) — 2026-10-03
 * 🎯 POR QUÉ: los botones no abrían nada (anclas inexistentes).
 * ⚙️ CÓMO: diálogo nativo; foto de la época como cabecera con título sobre
 *   velo noche; cuerpo papel con datos y lugares; hoja inferior en celular.
 * 📦 QUÉ: lectura cómoda (≤ 62ch), objetivos táctiles ≥ 44 px, AA.
 * ========================================================================== */
.hist-era-dialog {
  width: min(680px, calc(100vw - 32px));
  max-height: min(88vh, 860px);
  padding: 0;
  border: 0;
  border-radius: 22px;
  background: #F7F3EA;
  color: #15232F;
  box-shadow: 0 30px 70px -24px rgba(15, 23, 42, 0.6);
  overflow: hidden;
}
.hist-era-dialog::backdrop { background: rgba(15, 23, 42, 0.62); backdrop-filter: blur(4px); }
.hist-era-dialog[open] { animation: hist-era-in 320ms cubic-bezier(0.22, 1, 0.36, 1); }
@keyframes hist-era-in { from { opacity: 0; transform: translateY(16px) scale(0.98); } to { opacity: 1; transform: none; } }
.hist-era-dialog-card { display: flex; flex-direction: column; max-height: inherit; }

.hist-era-dialog-media {
  position: relative; flex: 0 0 auto; height: 200px; background: #0F172A;
}
.hist-era-dialog-media img { width: 100%; height: 100%; object-fit: cover; display: block; }
.hist-era-dialog-media::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(to top, rgba(15, 23, 42, 0.92) 0%, rgba(15, 23, 42, 0.35) 55%, rgba(15, 23, 42, 0.15) 100%);
}
.hist-era-dialog-head { position: absolute; left: 22px; right: 70px; bottom: 16px; z-index: 1; display: grid; gap: 4px; }
.hist-era-dialog-dates {
  justify-self: start; padding: 3px 10px; border-radius: 999px;
  background: #C54B01; color: #FFFFFF; font: 700 0.72rem/1.3 'Montserrat', sans-serif; letter-spacing: 0.04em;
}
.hist-era-dialog-title { margin: 0; color: #FFFFFF !important; font: 900 clamp(1.5rem, 1.2rem + 1.4vw, 2.1rem)/1.05 'Montserrat', sans-serif; letter-spacing: -0.02em; text-wrap: balance; }
.hist-era-dialog-close {
  position: absolute; top: 12px; right: 12px; z-index: 2;
  width: 44px; height: 44px; border-radius: 50%; border: 1.5px solid rgba(244, 230, 193, 0.6);
  background: rgba(15, 23, 42, 0.55); color: #FFFFFF; font-size: 1.05rem; cursor: pointer;
  display: grid; place-items: center; backdrop-filter: blur(6px);
}
.hist-era-dialog-close:hover { background: rgba(15, 23, 42, 0.8); }
.hist-era-dialog-close:focus-visible { outline: 3px solid #F65E01; outline-offset: 2px; }

.hist-era-dialog-body { overflow-y: auto; padding: 20px 22px 22px; display: grid; gap: 12px; }
.hist-era-dialog-summary { margin: 0; max-width: 62ch; font-size: 0.98rem; line-height: 1.6; color: #15232F; }
.hist-era-dialog-sub {
  margin: 6px 0 0; font: 700 0.72rem/1.2 'Montserrat', sans-serif; letter-spacing: 0.14em;
  text-transform: uppercase; color: #A74001;
}
.hist-era-dialog-facts { margin: 0; padding: 0; list-style: none; display: grid; gap: 8px; }
.hist-era-dialog-facts li {
  position: relative; padding-left: 20px; font-size: 0.9rem; line-height: 1.55; color: #33424F; max-width: 62ch;
}
.hist-era-dialog-facts li::before {
  content: ""; position: absolute; left: 4px; top: 0.6em; width: 7px; height: 7px; border-radius: 50%; background: #165D6F;
}
.hist-era-dialog-places { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 10px; }
.hist-era-dialog-place {
  display: flex; gap: 10px; align-items: flex-start; min-height: 44px;
  padding: 10px 12px; border-radius: 14px; background: #FFFFFF;
  border: 1px solid rgba(21, 35, 47, 0.12); text-decoration: none; color: #15232F;
  transition: border-color 160ms ease, transform 160ms ease;
}
.hist-era-dialog-place:hover { border-color: rgba(246, 94, 1, 0.5); transform: translateY(-2px); }
.hist-era-dialog-place:focus-visible { outline: 3px solid #F65E01; outline-offset: 2px; }
.hist-era-dialog-place > i { color: #C54B01; margin-top: 3px; }
.hist-era-dialog-place span { display: grid; gap: 2px; }
.hist-era-dialog-place strong { font: 700 0.88rem/1.25 'Montserrat', sans-serif; }
.hist-era-dialog-place small { font-size: 0.76rem; color: #4F5E6B; }

.hist-era-dialog-actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 6px; }
.hist-era-dialog-listen, .hist-era-dialog-explore {
  display: inline-flex; align-items: center; gap: 8px; min-height: 46px; padding: 0 18px;
  border-radius: 8px; font: 700 0.9rem/1 'Montserrat', sans-serif; cursor: pointer; text-decoration: none;
}
.hist-era-dialog-listen { background: #165D6F; color: #FFFFFF; border: 0; }
.hist-era-dialog-listen:hover { background: #0E4655; }
.hist-era-dialog-explore { background: transparent; color: #165D6F; border: 1.5px solid rgba(22, 93, 111, 0.4); }
.hist-era-dialog-explore:hover { border-color: #165D6F; }
.hist-era-dialog-listen:focus-visible, .hist-era-dialog-explore:focus-visible { outline: 3px solid #F65E01; outline-offset: 2px; }

@media (max-width: 600px) {
  .hist-era-dialog {
    width: 100vw; max-width: 100vw; margin: auto 0 0; max-height: 92vh;
    border-radius: 22px 22px 0 0;
  }
  .hist-era-dialog-media { height: 170px; }
  .hist-era-dialog-body { padding-bottom: calc(22px + env(safe-area-inset-bottom, 0px)); }
  .hist-era-dialog-actions > * { flex: 1 1 100%; justify-content: center; }
}
@media (prefers-reduced-motion: reduce) { .hist-era-dialog[open] { animation: none; } }
/* Reglas globales de <dialog> y de títulos (sistema/tema) le ganaban a la
   ficha: se fija posición centrada y tinta blanca con mayor especificidad. */
dialog.hist-era-dialog[open] {
  position: fixed; inset: 0; margin: auto; height: fit-content;
}
dialog.hist-era-dialog .hist-era-dialog-title {
  color: #FFFFFF !important; -webkit-text-fill-color: #FFFFFF !important;
  text-shadow: 0 2px 14px rgba(15, 23, 42, 0.6);
}
@media (max-width: 600px) {
  dialog.hist-era-dialog[open] { inset: auto 0 0 0; margin: 0; }
}

/* ============================================================================
 * AUDIOGUÍA → BIBLIOTECA SONORA (2026-10-05)
 * 🎯 POR QUÉ: la tarjeta pasa de 7 relatos sueltos a períodos con capítulos,
 *   cada uno con tipo (hecho histórico / patrimonio / tradición oral), ficha
 *   y fuentes verificadas, sin cambiar la identidad visual de la tarjeta.
 * ⚙️ CÓMO: columna derecha = chips de período + lista de capítulos del
 *   período activo + "Siguiente capítulo"; columna izquierda suma la ficha
 *   (.hist-audio-meta) y las fuentes (.hist-audio-sources) bajo el subtítulo.
 * 📦 QUÉ: mismos chips y paleta; objetivos táctiles ≥ 36 px; 320–2560 px.
 * ========================================================================== */
.hist-audio-section { align-items: flex-start; }
.hist-audio-left { align-items: flex-start; flex: 1 1 auto; min-width: 0; }
.hist-audio-left > .hist-bird-avatar,
.hist-audio-left > .hist-audio-play-btn { margin-top: 4px; }
.hist-audio-right { display: flex; flex-direction: column; gap: 12px; flex: 0 1 450px; min-width: 0; }

.hist-audio-chapters-wrap {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding-top: 10px;
  border-top: 1px dashed #E2E8F0;
}
.hist-audio-chapters-label {
  font-size: 0.66rem;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: #64748B;
}
.hist-audio-chapters { display: flex; flex-direction: column; gap: 4px; }
.hist-audio-chapter {
  display: flex;
  align-items: center;
  gap: 8px;
  min-height: 36px;
  padding: 6px 10px;
  border: 1px solid #E2E8F0;
  border-radius: 10px;
  background: #FFFFFF;
  font-family: inherit;
  font-size: 0.74rem;
  font-weight: 700;
  color: #0F172A;
  text-align: left;
  cursor: pointer;
  transition: border-color 160ms ease, background-color 160ms ease;
}
.hist-audio-chapter:hover { border-color: rgba(22, 93, 111, 0.35); background: #F8FAFC; }
.hist-audio-chapter:focus-visible { outline: 3px solid #F65E01; outline-offset: 2px; }
.hist-audio-chapter.is-active { border-color: #165D6F; background: #E6EEF0; }
.hist-audio-chapter-n {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: #F4E6C1;
  color: #165D6F;
  font-size: 0.66rem;
  font-variant-numeric: tabular-nums;
}
.hist-audio-chapter.is-active .hist-audio-chapter-n { background: #165D6F; color: #FFFFFF; }

.hist-audio-next {
  align-self: flex-start;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 36px;
  padding: 6px 12px;
  border: 1px solid #165D6F;
  border-radius: 999px;
  background: transparent;
  color: #165D6F;
  font-family: inherit;
  font-size: 0.72rem;
  font-weight: 800;
  cursor: pointer;
}
.hist-audio-next:hover { background: #165D6F; color: #FFFFFF; }
.hist-audio-next:focus-visible { outline: 3px solid #F65E01; outline-offset: 2px; }
.hist-audio-next:disabled { opacity: 0.45; cursor: default; background: transparent; color: #165D6F; }

.hist-audio-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px 12px;
  margin-top: 10px;
  font-size: 0.72rem;
  color: #4F5E6B;
}
.hist-audio-meta:empty { display: none; }
.hist-audio-meta-item i { color: #F65E01; }
.hist-audio-type {
  padding: 3px 10px;
  border-radius: 999px;
  font-size: 0.64rem;
  font-weight: 800;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
.hist-audio-type--historical_fact { background: #E6EEF0; color: #165D6F; }
.hist-audio-type--heritage { background: #F4E6C1; color: #7A4A12; }
.hist-audio-type--oral_tradition { background: #FDEBDD; color: #A43F00; }
.hist-audio-map-link { font-weight: 800; color: #165D6F; text-decoration: none; }
.hist-audio-map-link:hover, .hist-audio-map-link:focus-visible { color: #F65E01; text-decoration: underline; }

.hist-audio-sources {
  margin: 8px 0 0;
  max-width: 64ch;
  font-size: 0.68rem;
  line-height: 1.5;
  color: #64748B;
}
.hist-audio-sources a { color: #165D6F; text-decoration: underline; text-underline-offset: 2px; }
.hist-audio-verified { white-space: nowrap; font-weight: 700; color: #3F7A55; }

@media (max-width: 1100px) {
  .hist-audio-right { flex-basis: auto; width: 100%; }
}