:root{--canvas:#f4eee0;--surface:#fbf7ee;--subtle:#d9cfb8;--strong:#102b39;--accent:#a8452c;--primary:#102b39;--secondary:#1b4c66;--muted:#2f7091;--credits:#8a6224;--sunken:#e8e0ce;--display:#a9cbd6;--rust200:#e5bfb4;--brass300:#e0c48a;--ink300:#7fb0c1;--paper300:#d9cfb8}
*{box-sizing:border-box}
body{margin:0;background:var(--canvas);color:var(--primary);font-family:'Nunito Sans',system-ui,sans-serif;font-size:15px;line-height:1.6}
a{color:inherit;text-decoration:none}button{font:inherit;cursor:pointer}
.anton{font-family:'Anton',Impact,sans-serif;font-weight:400}
.label{font-size:10px;font-weight:700;letter-spacing:1.2px;text-transform:uppercase;line-height:1.2;color:var(--muted)}
.label.accent{color:var(--accent)}.label.credits{color:var(--credits)}
.h-xl{font-family:'Anton';font-size:60px;line-height:.92;letter-spacing:-1.2px;margin:0;text-transform:uppercase}
.h-m{font-family:'Anton';font-size:26px;line-height:1;margin:0;text-transform:uppercase}
.h-s{font-family:'Anton';font-size:18px;line-height:1.1;margin:0}
.num-xl{font-family:'Anton';font-size:34px;line-height:1;letter-spacing:-.34px}
.num-m{font-weight:800;font-size:20px;line-height:1.1;letter-spacing:-.2px}
.body-l{font-size:15px;line-height:1.6;color:var(--secondary);margin:0}
.body-m{font-size:14px;line-height:1.6;color:var(--secondary);margin:0}
.body-s{font-size:12px;line-height:1.5;color:var(--muted);margin:0}
.btn{display:inline-flex;align-items:center;justify-content:center;padding:15px 28px;border-radius:2px;font-size:11px;font-weight:700;letter-spacing:.88px;text-transform:uppercase;border:1.5px solid transparent;white-space:nowrap}
.btn.primary{background:var(--accent);color:var(--surface)}
.btn.outlined{border-color:var(--strong);color:var(--primary);background:transparent}
/* shell */
.nav{background:var(--surface);border-bottom:1px solid var(--subtle);padding:16px 40px}
.nav-in{max-width:1328px;margin:auto;display:flex;align-items:center;gap:40px}
.logo{position:relative;font-family:'Anton';font-size:26px;line-height:1;width:50px}
.logo img{position:absolute;left:36px;top:-6px;width:25px;height:30px;transform:scaleY(-1) rotate(180deg)}
.nav-links{display:flex;gap:28px;font-size:11px;font-weight:700;letter-spacing:.88px;text-transform:uppercase;color:var(--secondary)}
.nav-links .on{color:var(--accent)}
.sp{flex:1}
.chip{border:1px solid var(--subtle);padding:6px 12px;border-radius:2px}
.acct{display:flex;align-items:center;gap:20px}.acct .tier{font-weight:700;font-size:14px;line-height:1.4}
.avatar{width:36px;height:36px;border-radius:50%;background:#7fb0c1;object-fit:cover}
.main{max-width:1328px;margin:auto;padding:16px 56px 56px;display:flex;flex-direction:column;gap:24px}
.tabs{display:flex;gap:32px;border-bottom:1px solid var(--subtle);height:36px}
.tab{padding:8px 4px 12px;font-size:11px;font-weight:700;letter-spacing:.88px;text-transform:uppercase;color:var(--muted);cursor:pointer;background:none;border:0;border-bottom:2px solid transparent;margin-bottom:-1px}
.tab.on{color:var(--accent);border-bottom-color:var(--accent)}
.rule-t{border-top:1px solid var(--subtle);padding-top:26px}
.row{display:flex;gap:20px}.col{display:flex;flex-direction:column}
.grow{flex:1;min-width:0}
.vr{width:1px;background:var(--subtle);align-self:stretch}
.crumb{display:flex;gap:8px}.crumb a{cursor:pointer}
.img{position:relative;overflow:hidden;background:var(--sunken)}
.img img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}
.img.contain img{object-fit:contain}
.card{background:var(--surface);border:1px solid var(--subtle);border-radius:2px;overflow:hidden}
.clickable{cursor:pointer}
.card .body{padding:14px 16px;display:flex;flex-direction:column;gap:6px}
.bar{display:flex;gap:4px}.bar i{flex:1;height:8px;background:var(--sunken)}.bar i.f{background:var(--accent)}
.stats{display:flex;gap:64px}.stat .num-m{display:block}
.filters{display:flex;gap:18px}.filters span{cursor:pointer}.filters .on{color:var(--accent)}
.sec-head{display:flex;align-items:flex-end;gap:16px}
/* timeline */
.canvas{position:relative;height:560px}
.canvas .abs{position:absolute}
.ruler{position:absolute;top:0;height:530px;width:1px;background:var(--subtle)}
.axis{position:absolute;left:0;right:0;top:320px;height:1px;background:var(--strong)}
.dot{position:absolute;top:306px;width:28px;height:28px}
.dot img{width:100%;height:100%}
.conn{position:absolute;width:1px;background:var(--subtle)}.conn.acc{background:var(--accent)}
.plate{position:absolute;background:var(--surface);border:1px solid var(--subtle);border-radius:2px;overflow:hidden;text-align:left;padding:0;font-family:inherit;color:inherit}
.plate.sel{border:1.5px solid var(--accent)}
.plate .ph{height:92px}
.plate .cu{padding:12px 14px;display:flex;flex-direction:column;gap:6px}
.era{position:absolute;top:8px;white-space:nowrap}.era .anton{font-size:18px;color:var(--display);line-height:1.1;display:block}
.era .label{display:block;margin-top:6px;color:var(--accent)}
/* status */
.sprite{position:relative;overflow:hidden}.sprite img{position:absolute;max-width:none}
.benefit .ph{height:116px;background:#efebe0}
/* credits band */
.band{display:flex;gap:40px;background:var(--sunken);padding:26px 32px;border-radius:2px}
.chrome-hide{display:none}
/* carousel */
.scroller{overflow-x:auto;padding-bottom:6px}.scroller .track{display:flex;gap:20px;width:max-content}
.partner{width:300px;padding:16px 18px 18px;display:flex;flex-direction:column;gap:8px}
@media(max-width:1100px){.main{padding:16px 20px}.h-xl{font-size:40px}.row.wrap{flex-wrap:wrap}}
.veil{position:fixed;inset:0;background:#0b1a22;opacity:.5;z-index:49;cursor:pointer}

/* ---------- responsive / móvil ---------- */
@media(max-width:820px){
 body{font-size:14px}
 .nav{padding:12px 16px}.nav-in{gap:16px}.nav-links,.acct .tier{display:none}
 .main{padding:12px 16px 40px;gap:20px}
 .tabs{overflow-x:auto;gap:22px;white-space:nowrap;scrollbar-width:none}.tabs::-webkit-scrollbar{display:none}
 .h-xl{font-size:36px}.h-m{font-size:22px}.num-xl{font-size:28px}
 .stack{flex-direction:column!important;align-items:stretch!important;gap:16px!important}
 .stack>.vr{display:none}
 .stack>[style*="width:300px"],.stack>[style*="width:340px"]{width:100%!important}
 .stack>[style*="height:10px"]{height:auto!important}
 .stack>.sprite{width:150px!important;height:208px!important}
 .stack>.col,.stack>.card{padding-left:0!important;padding-right:0!important}
 .stack>.card{padding:0!important}
 .stats{gap:20px 28px;flex-wrap:wrap}
 .filters{overflow-x:auto;white-space:nowrap;scrollbar-width:none}.filters::-webkit-scrollbar{display:none}
 .sec-head{flex-wrap:wrap;gap:6px}.sec-head .sp{display:none}
 .crumb{flex-wrap:wrap}
 .grid2{display:grid!important;grid-template-columns:1fr 1fr;gap:12px!important}
 .grid2 .card .img{height:96px!important}.grid2 .h-s{font-size:15px}
 .band{flex-direction:column;padding:20px;gap:16px}.band>.vr{display:none}
 /* timeline vertical */
 .canvas{height:auto;display:flex;flex-direction:column;gap:12px}
 .canvas .ruler,.canvas .axis,.canvas .dot,.canvas .conn,.canvas .era{display:none}
 .canvas .plate{position:static;width:100%!important;display:flex;flex-direction:row;align-items:stretch}
 .canvas .plate .ph{width:104px;height:auto!important;flex:none}.canvas .plate .cu{flex:1}
 .canvas .plate.sel{border-width:1.5px}
 .scroller .partner{width:260px}
 .btn{padding:14px 20px}
 .row[style*="align-items:center;gap:12px"],.row[style*="gap:12px;padding-top:4px"]{flex-wrap:wrap}
 .stack img{max-width:100%}
}
@media(max-width:480px){.grid2{grid-template-columns:1fr}.h-xl{font-size:32px}}
/* hotspots (clic en falso) */
.hs-flash:not(.plate){position:relative}
.hs-flash::after{content:'';position:absolute;inset:0;background:rgba(13,153,255,.3);outline:2px solid #0d99ff;outline-offset:-2px;border-radius:2px;pointer-events:none;z-index:5;animation:hs .8s ease-out forwards}
@keyframes hs{0%{opacity:0}15%{opacity:1}70%{opacity:1}100%{opacity:0}}