/* ══════════════════════════════════════════════════════
   HISTORIA ANIMADA (video interactivo del inicio)
══════════════════════════════════════════════════════ */
.historia-sec { background: var(--white); }

.historia-head { text-align: center; max-width: 720px; margin: 0 auto 2.5rem; }
.historia-desc { margin-top: .9rem; color: var(--gray-600); font-size: 1rem; line-height: 1.7; }

.historia-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.7fr) minmax(0, 1fr);
  gap: 1.75rem; align-items: start;
}

/* ── Video ── */
.historia-video {
  position: relative; aspect-ratio: 16 / 9;
  border-radius: var(--radius-xl); overflow: hidden;
  background: var(--orange-l);
  box-shadow: var(--shadow-xl);
  border: 1px solid var(--gray-200);
}
.historia-video video { width: 100%; height: 100%; display: block; object-fit: cover; background: #000; }

.historia-play {
  position: absolute; inset: 0;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .9rem;
  border: 0; cursor: pointer;
  background: linear-gradient(180deg, rgba(15,17,23,.05) 0%, rgba(15,17,23,.45) 100%);
  color: #fff; font-family: var(--font-body);
}
.historia-play-ico {
  width: 86px; height: 86px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  background: var(--orange); color: #fff;
  box-shadow: 0 0 0 12px rgba(255,87,34,.25), 0 14px 30px rgba(255,87,34,.45);
  transition: transform .3s var(--ease), box-shadow .3s var(--ease);
  animation: historiaPulso 2.4s ease-in-out infinite;
}
.historia-play-ico svg { width: 36px; height: 36px; margin-left: 4px; }
.historia-play:hover .historia-play-ico { transform: scale(1.07); }
.historia-play-txt {
  font-weight: 800; font-size: 1.05rem;
  background: rgba(15,17,23,.55); padding: .45rem 1rem; border-radius: 999px;
  backdrop-filter: blur(4px);
}
.historia-play-txt small { font-weight: 600; opacity: .8; margin-left: .35rem; }
@keyframes historiaPulso {
  0%, 100% { box-shadow: 0 0 0 10px rgba(255,87,34,.25), 0 14px 30px rgba(255,87,34,.45); }
  50%      { box-shadow: 0 0 0 20px rgba(255,87,34,.10), 0 14px 30px rgba(255,87,34,.45); }
}
.historia-video.reproduciendo .historia-play { display: none; }

/* ── Notas bajo el video ── */
.historia-notas {
  list-style: none; margin: 1.1rem 0 0; padding: 0;
  display: flex; flex-wrap: wrap; gap: .5rem;
}
.historia-notas li {
  display: inline-flex; align-items: center; gap: .4rem;
  padding: .45rem .85rem; border-radius: 999px;
  background: var(--gray-50); border: 1px solid var(--gray-200);
  font-size: .82rem; font-weight: 600; color: var(--gray-600);
}

/* ── Pantalla final ── */
.historia-fin {
  position: absolute; inset: 0;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: .5rem; padding: 1.5rem; text-align: center;
  background: rgba(15,17,23,.82); backdrop-filter: blur(3px); color: #fff;
}
.historia-fin[hidden] { display: none; }
.historia-fin-eyebrow { color: #FF8A50; font-weight: 700; font-size: .85rem; letter-spacing: .08em; text-transform: uppercase; }
.historia-fin h3 { font-family: var(--font-head); font-size: clamp(1.3rem, 2.4vw, 2rem); margin-bottom: .6rem; }
.historia-fin-btns { display: flex; gap: .6rem; flex-wrap: wrap; justify-content: center; }
.historia-btn {
  border: 0; cursor: pointer; font-family: var(--font-body);
  font-weight: 700; font-size: .95rem;
  padding: .75rem 1.3rem; border-radius: 999px;
  background: var(--orange); color: #fff;
  transition: transform .2s var(--ease), background .2s;
}
.historia-btn:hover { transform: translateY(-2px); background: var(--orange-d); }
.historia-btn-alt { background: rgba(255,255,255,.14); }
.historia-btn-alt:hover { background: rgba(255,255,255,.24); }

/* ── Capítulos ── */
.historia-caps { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: .55rem; }
.historia-cap {
  position: relative; overflow: hidden;
  width: 100%; text-align: left; cursor: pointer;
  display: grid; grid-template-columns: auto 1fr auto; gap: .85rem; align-items: center;
  padding: .85rem 1rem; border-radius: var(--radius);
  background: var(--gray-50); border: 1.5px solid var(--gray-200);
  color: var(--gray-900); font-family: var(--font-body);
  transition: border-color .25s, background .25s, transform .25s var(--ease);
}
.historia-cap:hover { border-color: var(--orange); transform: translateX(3px); }
.hc-num {
  width: 34px; height: 34px; border-radius: 10px;
  display: flex; align-items: center; justify-content: center;
  background: var(--orange-m); color: var(--orange); font-weight: 800; font-size: .95rem;
}
.hc-txt b { display: block; font-size: .95rem; }
.hc-txt small { display: block; font-size: .8rem; color: var(--gray-600); line-height: 1.4; margin-top: .15rem; }
.hc-tiempo { font-size: .75rem; font-weight: 700; color: var(--gray-400); font-variant-numeric: tabular-nums; }
.hc-barra { position: absolute; left: 0; right: 0; bottom: 0; height: 3px; background: transparent; }
.hc-barra i { display: block; height: 100%; width: 0; background: var(--orange); transition: width .25s linear; }

.historia-cap.activo { background: var(--orange-l); border-color: var(--orange); }
.historia-cap.activo .hc-num { background: var(--orange); color: #fff; }
.historia-cap.activo .hc-tiempo { color: var(--orange); }
.historia-cap.visto .hc-num { background: var(--gray-200); color: var(--gray-600); }

[data-theme="dark"] .historia-video { border-color: var(--gray-200); }

/* ── Celular: capítulos en fila deslizable debajo del video ── */
@media (max-width: 900px) {
  .historia-grid { grid-template-columns: 1fr; gap: 1rem; }
  .historia-video { border-radius: var(--radius-lg); }
  .historia-notas { margin-top: .75rem; }
  .historia-notas li:last-child { display: none; }
  .historia-caps {
    flex-direction: row; overflow-x: auto; scroll-snap-type: x mandatory;
    gap: .6rem; padding-bottom: .4rem; margin: 0 -1rem; padding-left: 1rem; padding-right: 1rem;
    scrollbar-width: none;
  }
  .historia-caps::-webkit-scrollbar { display: none; }
  .historia-caps li { flex: 0 0 74%; scroll-snap-align: start; }
  .historia-cap { height: 100%; }
  .historia-cap:hover { transform: none; }
}
@media (max-width: 600px) {
  .historia-head { margin-bottom: 1.5rem; }
  .historia-desc { font-size: .92rem; }
  .historia-play-ico { width: 68px; height: 68px; }
  .historia-play-ico svg { width: 28px; height: 28px; }
  .historia-play-txt { font-size: .92rem; }
  .historia-fin h3 { font-size: 1.15rem; margin-bottom: .3rem; }
  .historia-btn { font-size: .85rem; padding: .6rem 1rem; }
}
@media (prefers-reduced-motion: reduce) {
  .historia-play-ico { animation: none; }
}