/* Shared "read more" product-story pages: cambio.html, tico.html, apibjj.html, muralvivo.html */

.story-back { display: inline-flex; align-items: center; gap: 9px; margin-top: 118px; color: var(--muted); font-family: ui-monospace, "SFMono-Regular", Menlo, monospace; font-size: 11px; letter-spacing: 0.06em; text-transform: uppercase; transition: color 180ms var(--ease); }
.story-back:hover { color: var(--blue-light); }
.story-back span:first-child { transition: transform 180ms var(--ease); }
.story-back:hover span:first-child { transform: translateX(-3px); }

.story-hero { position: relative; padding-bottom: 72px; overflow: hidden; }
.story-hero::before { position: absolute; z-index: -1; inset: 0; background: #172033; content: ""; }
.story-hero-tico::before { background: #14254b; }
.story-hero-muralvivo::before { background: #201617; }
.story-hero-apibjj::before { background: #101214; }
.story-hero::after { position: absolute; z-index: -1; inset: 0; background-image: linear-gradient(rgba(175, 208, 255, 0.06) 1px, transparent 1px), linear-gradient(90deg, rgba(175, 208, 255, 0.06) 1px, transparent 1px); background-size: 44px 44px; content: ""; }
.story-hero-muralvivo::after, .story-hero-apibjj::after { background-image: linear-gradient(rgba(255, 255, 255, 0.05) 1px, transparent 1px), linear-gradient(90deg, rgba(255, 255, 255, 0.05) 1px, transparent 1px); }

.story-eyebrow { margin: 26px 0 0; color: var(--blue-light); }
.story-hero-muralvivo .story-eyebrow { color: #ff8a7c; }
.story-hero-apibjj .story-eyebrow { color: #e2717b; }

.story-title { max-width: 780px; margin: 20px 0 0; color: var(--paper); font-size: clamp(50px, 7vw, 92px); font-weight: 600; letter-spacing: -0.065em; line-height: 0.92; }
.story-title em { color: var(--blue-light); font-family: "Iowan Old Style", "Palatino Linotype", Palatino, Georgia, serif; font-size: 0.97em; font-style: italic; font-weight: 400; }
.story-hero-muralvivo .story-title em { color: #ffd7d1; }
.story-hero-apibjj .story-title em { color: #f2b3b9; }

.story-lede { max-width: 620px; margin: 26px 0 0; color: var(--muted-strong); font-size: 19px; letter-spacing: -0.012em; line-height: 1.55; }

.story-status-row { display: flex; flex-wrap: wrap; gap: 10px 16px; margin-top: 32px; color: var(--muted); font-family: ui-monospace, "SFMono-Regular", Menlo, monospace; font-size: 10px; letter-spacing: 0.07em; text-transform: uppercase; }
.story-status-row span { padding: 8px 12px; border: 1px solid var(--line-strong); }

.story-timeline { position: relative; }
.timeline { position: relative; max-width: 700px; margin: 0 auto; padding: 0; list-style: none; }
.timeline::before { position: absolute; top: 8px; bottom: 8px; left: 7px; width: 1px; background: var(--line-strong); content: ""; }
.timeline-entry { position: relative; padding: 0 0 64px 42px; }
.timeline-entry:last-child { padding-bottom: 0; }
.timeline-entry::before { position: absolute; top: 6px; left: 0; width: 15px; height: 15px; border: 1px solid var(--blue-light); border-radius: 50%; background: var(--canvas); content: ""; }
.story-timeline-muralvivo .timeline-entry::before { border-color: #ff8a7c; }
.story-timeline-apibjj .timeline-entry::before { border-color: #b3202e; }
.timeline-era { margin: 0; color: var(--blue-light); font-family: ui-monospace, "SFMono-Regular", Menlo, monospace; font-size: 11px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; }
.story-timeline-muralvivo .timeline-era { color: #ff8a7c; }
.story-timeline-apibjj .timeline-era { color: #b3202e; }
.timeline-title { max-width: 560px; margin: 12px 0 16px; color: var(--paper); font-size: clamp(24px, 3vw, 34px); font-weight: 600; letter-spacing: -0.045em; line-height: 1.05; }
.timeline-body { max-width: 600px; margin: 0; color: var(--muted-strong); font-size: 17px; letter-spacing: -0.012em; line-height: 1.6; }
.timeline-body + .timeline-body { margin-top: 16px; }

.story-cta { border-top: 1px solid var(--line); }
.story-cta-inner { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 24px 40px; }
.story-cta-title { max-width: 520px; margin: 0; color: var(--paper); font-size: clamp(30px, 3.6vw, 44px); font-weight: 600; letter-spacing: -0.05em; line-height: 1.05; }
.story-cta-links { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 22px; }

@media (max-width: 700px) {
  .story-back { margin-top: 100px; }
  .story-hero { padding-bottom: 56px; }
  .timeline-entry { padding-left: 32px; }
  .timeline::before { left: 6px; }
  .timeline-entry::before { width: 13px; height: 13px; }
}