/* © Allison Navarro. Todos los derechos reservados. */
.timeline-page{display:flex;min-height:100vh;background:var(--bg)}
.sidebar{width:160px;min-width:160px;padding:2rem 1rem;display:flex;flex-direction:column;gap:1rem;background:var(--bg);position:sticky;top:0;height:100vh;overflow-y:auto}
.sidebar-btn{display:block;width:100%;padding:.75rem 1rem;border:none;border-radius:12px;font-family:var(--font);font-size:.9rem;font-weight:700;color:var(--white);cursor:pointer;text-align:center;text-decoration:none;transition:transform .2s ease,box-shadow .2s ease,opacity .2s ease}
.sidebar-btn:hover{transform:scale(1.05);box-shadow:0 6px 18px rgba(0,0,0,.15)}
.sidebar-btn.active{box-shadow:0 6px 20px rgba(0,0,0,.2);transform:scale(1.04)}
.sidebar-btn.inactive{opacity:.75}
.btn-xvii{background:#7c3aed}
.btn-xviii{background:#dc2650}
.btn-xix{background:#fb923c}
.btn-xx{background:#22d3ee}
.btn-xxi{background:#f06292}
.timeline-content{flex:1;padding:2.5rem 2.5rem 4rem;overflow-y:auto}
.century-title{font-size:2rem;font-weight:900;text-align:center;margin-bottom:2.5rem}
.title-xvii{color:#7c3aed}
.title-xviii{color:#dc2650}
.title-xix{color:#fb923c}
.title-xx{color:#22d3ee}
.title-xxi{color:#f472b6}
.timeline-track{position:relative;margin:0 auto;max-width:800px}
.timeline-bar{height:54px;border-radius:30px;display:grid;grid-auto-flow:column;grid-auto-columns:1fr;align-items:center;padding:0 2rem;position:relative;z-index:1;margin:5rem 0 4rem}
.bar-xvii{background:#7c3aed}
.bar-xviii{background:#dc2650}
.bar-xix{background:#fb923c}
.bar-xx{background:#22d3ee}
.bar-xxi{background:#f06292}
.bar-year{font-size:1.5rem;font-weight:900;color:var(--white);position:relative;display:flex;flex-direction:column;align-items:center;justify-self:center}
.bar-year::before{content:'';position:absolute;width:18px;height:18px;background:#1a1a2e;border-radius:50%;left:50%;transform:translateX(-50%)}
.bar-year.dot-top::before{top:-38px}
.bar-year.dot-bottom::before{bottom:-38px}
.events-grid{display:grid;gap:1.5rem 1rem;max-width:800px;margin:0 auto 2rem;padding:0 2rem}
.events-grid.cols-1{grid-template-columns:1fr;max-width:300px;padding:0}
.events-grid.cols-2{grid-template-columns:repeat(2,1fr)}
.events-grid.cols-3{grid-template-columns:repeat(3,1fr)}
.events-grid.cols-4{grid-template-columns:repeat(4,1fr)}
.event-card{background:0 0;text-align:center}
.event-img{width:100%;max-width:180px;height:140px;object-fit:cover;border-radius:10px;margin:0 auto .75rem;background:#e8e8e8;display:block}
.event-text{font-size:.78rem;line-height:1.55;color:#444;text-align:center;max-width:220px;margin:0 auto;text-decoration:none}
.event-text strong{display:block;color:#111;font-weight:700;margin-bottom:.2rem;text-decoration:none}
@media (max-width:768px){
    .timeline-page{flex-direction:column}
    .sidebar{width:100%;height:auto;flex-direction:row;flex-wrap:wrap;position:static;padding:1rem;gap:.5rem}
    .sidebar-btn{flex:1;min-width:80px;font-size:.75rem;padding:.5rem}
    .timeline-content{padding:1.5rem 1rem 3rem}
    .events-grid,.events-grid.cols-1,.events-grid.cols-2,.events-grid.cols-3,.events-grid.cols-4{grid-template-columns:1fr;max-width:100%;padding:0}
    .timeline-bar{margin:4rem 0 2rem}
    .bar-year{font-size:1.1rem}}