.timeline-container{padding:3rem 1rem;margin-bottom:4rem}.timeline-header{text-align:center;margin-bottom:3rem}.timeline-title{font-family:Outfit,sans-serif;font-size:2.2rem;font-weight:800;color:#fff;margin-bottom:.5rem}.timeline-sub{color:var(--text-muted);font-size:.9rem}.timeline-track{position:relative;max-width:800px;margin:0 auto;padding:2rem 0}.t-line{position:absolute;left:50%;top:0;bottom:0;width:2px;background:linear-gradient(to bottom,transparent,var(--purple-400),var(--pink-400),transparent);transform:translate(-50%);box-shadow:0 0 10px #8b5cf680}.t-event{position:relative;width:50%;margin-bottom:3rem}.t-event.left{left:0;padding-right:3rem;text-align:right}.t-event.right{left:50%;padding-left:3rem;text-align:left}.t-dot{position:absolute;top:10px;width:16px;height:16px;background:var(--gold);border-radius:50%;box-shadow:0 0 15px #ffd700cc,inset 0 0 5px #00000080;z-index:2}.t-event.left .t-dot{right:-8px}.t-event.right .t-dot{left:-8px}.t-content{background:#141423b3;border:1px solid rgba(139,92,246,.2);padding:1.5rem;border-radius:12px;transition:transform .3s,border-color .3s;backdrop-filter:blur(5px)}.t-event:hover .t-content{border-color:var(--pink-400);transform:translateY(-5px);box-shadow:0 5px 20px #f472b626}.t-date{display:inline-block;color:var(--purple-400);font-weight:800;font-size:.75rem;letter-spacing:.1em;text-transform:uppercase;margin-bottom:.5rem}.t-event-title{color:#fff;font-size:1.3rem;margin:0 0 .5rem;font-family:Outfit,sans-serif}.t-event-desc{color:var(--text-secondary);font-size:.9rem;line-height:1.5;margin:0}@media(max-width:768px){.t-line{left:20px;transform:none}.t-event{width:100%;left:0!important;padding-left:50px!important;padding-right:0!important;text-align:left!important}.t-dot{left:12px!important;right:auto!important}}.lore-page{min-height:100vh;position:relative;padding-bottom:6rem}.lore-bg{position:fixed;inset:0;z-index:0;pointer-events:none;background:radial-gradient(ellipse 60% 50% at 10% 20%,rgba(139,92,246,.1) 0%,transparent 60%),radial-gradient(ellipse 55% 45% at 90% 80%,rgba(244,114,182,.07) 0%,transparent 60%)}.lore-header{position:relative;z-index:1;padding-top:6rem;padding-bottom:3rem}.back-btn{display:inline-flex;align-items:center;font-size:.8rem;font-weight:600;color:var(--text-muted);border:1px solid var(--border);padding:.4rem 1rem;border-radius:50px;transition:var(--transition);margin-bottom:1.5rem}.back-btn:hover{color:var(--purple-400);border-color:var(--border-glow)}.lore-sub{color:var(--text-secondary);font-size:.95rem;margin-top:.3rem}.lore-main{position:relative;z-index:1}.lore-section{margin-bottom:5rem}.lore-section-header{margin-bottom:2rem;max-width:600px}.lore-section-title{font-family:Outfit,sans-serif;font-size:clamp(1.4rem,3vw,2rem);font-weight:800;color:var(--text-primary);letter-spacing:-.5px;margin:.3rem 0 .5rem}.lore-section-desc{font-size:.9rem;color:var(--text-secondary);line-height:1.6}.section-divider{height:1px;margin:3rem 0 4rem;background:linear-gradient(90deg,transparent,var(--border-glow),transparent)}.cuentos-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:1.5rem}.cuento-card{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius-md);overflow:hidden;transition:var(--transition);display:flex;flex-direction:column;background-image:radial-gradient(circle at 100% 0%,rgba(245,201,122,.03),transparent 50%)}.cuento-card:hover{border-color:var(--border-glow);transform:translateY(-4px);box-shadow:var(--shadow-glow);background-color:#14142899}.cuento-cover{height:160px;overflow:hidden;position:relative}.cuento-cover img{width:100%;height:100%;object-fit:cover}.cuento-cover-ph{width:100%;height:100%;background:linear-gradient(135deg,#8b5cf61f,#f472b60f);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:.5rem;border-bottom:1px solid var(--border)}.ph-icon{font-size:2.5rem}.ph-text{font-size:.72rem;color:var(--text-muted)}.cuento-body{padding:1.25rem;display:flex;flex-direction:column;gap:.5rem;flex:1}.cuento-tags{display:flex;flex-wrap:wrap;gap:.4rem}.ctag{font-size:.62rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--purple-400);background:#8b5cf61f;border:1px solid rgba(139,92,246,.2);border-radius:50px;padding:2px 8px}.canon-tag{background:#ffffff0d;border-color:#fff3;color:var(--text-secondary)}.canon-tag.canon{color:var(--gold);background:#f5c97a1a;border-color:#f5c97a33}.canon-tag.non-canon{color:#f472b6;background:#f472b61a;border-color:#f472b633}.canon-tag.alternate{color:#60a5fa;background:#60a5fa1a;border-color:#60a5fa33}.cuento-title{font-family:Playfair Display,serif;font-size:1.1rem;font-weight:700;color:var(--text-primary);line-height:1.3}.cuento-autor{font-size:.75rem;color:var(--text-muted);font-style:italic}.cuento-desc{font-size:.83rem;color:var(--text-secondary);line-height:1.6;flex:1}.perso-rpg-preview{display:flex;gap:4px;margin:.5rem 0;background:#0003;padding:4px;border-radius:4px;height:12px;align-items:center}.spr{height:4px;background:var(--purple-400);border-radius:2px;box-shadow:0 0 8px var(--purple-400)}.spr.magic{background:#34d399;box-shadow:0 0 8px #34d399}.spr.agility{background:#f472b6;box-shadow:0 0 8px #f472b6}.cuento-footer{display:flex;align-items:center;justify-content:space-between;padding-top:.75rem;border-top:1px solid var(--border);margin-top:auto}.cuento-fecha{font-size:.68rem;color:var(--text-muted)}.btn-leer{font-size:.75rem;font-weight:700;color:var(--purple-400);letter-spacing:.04em;transition:var(--transition)}.cuento-card:hover .btn-leer{color:var(--pink-400)}.personajes-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(340px,1fr));gap:1.5rem}.personaje-card{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius-md);overflow:hidden;display:flex;flex-direction:column;transition:var(--transition);height:460px}.personaje-card:hover{border-color:var(--border-glow);box-shadow:var(--shadow-card)}.perso-portrait{height:180px;position:relative;overflow:hidden;background:linear-gradient(135deg,#8b5cf61a,#0c0c1ccc)}.perso-portrait img{width:100%;height:100%;object-fit:cover}.perso-portrait-ph{width:100%;height:100%;display:flex;align-items:center;justify-content:center}.ph-icon-lg{font-size:3.5rem;color:var(--purple-400);opacity:.4}.perso-role-badge{position:absolute;bottom:.75rem;left:.75rem;font-size:.62rem;font-weight:800;letter-spacing:.1em;text-transform:uppercase;color:#fff;background:#8b5cf6d9;backdrop-filter:blur(8px);padding:3px 10px;border-radius:50px}.perso-role-badge.protagonista{background:#ec4899e6}.perso-role-badge.villano{background:#ef4444e6}.perso-role-badge.aliado{background:#10b981e6}.perso-info{padding:1.25rem;display:flex;flex-direction:column;gap:.65rem;flex-grow:1}.perso-nombre{font-size:1.1rem;font-weight:800;color:var(--text-primary)}.perso-alias{font-size:.82rem;color:var(--purple-400);font-style:italic}.perso-stats{display:flex;gap:1rem;flex-wrap:wrap}.pstat{display:flex;flex-direction:column;gap:2px}.pstat-label{font-size:.6rem;font-weight:700;letter-spacing:.15em;text-transform:uppercase;color:var(--text-muted)}.pstat-val{font-size:.82rem;font-weight:600;color:var(--text-secondary)}.perso-desc{font-size:.83rem;color:var(--text-secondary);line-height:1.65;display:-webkit-box;-webkit-line-clamp:4;-webkit-box-orient:vertical;overflow:hidden;text-overflow:ellipsis}.perso-habilidades{margin-top:.25rem}.hab-label{font-size:.62rem;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--text-muted)}.hab-tags{display:flex;flex-wrap:wrap;gap:.35rem;margin-top:.4rem}.hab-tag{font-size:.7rem;font-weight:600;color:var(--gold);background:#f5c97a1a;border:1px solid rgba(245,201,122,.2);border-radius:50px;padding:2px 8px}.cuento-card-link,.personaje-card-link{text-decoration:none;display:block;color:inherit}.perso-footer-link{margin-top:auto;padding-top:1rem;border-top:1px solid rgba(255,255,255,.05);text-align:right}.view-profile{font-size:.75rem;font-weight:800;color:var(--purple-400);text-transform:uppercase;letter-spacing:.05em;transition:var(--transition)}.personaje-card:hover .view-profile{color:var(--pink-400);transform:translate(5px);display:inline-block}@media(max-width:640px){.cuentos-grid,.personajes-grid{grid-template-columns:1fr}.lore-header{padding-top:5.5rem}}