/* /historia/ — "80 anos em um scroll". Auto-contida, tokens do design system. */
:root{
  --bg:#070a12; --bg2:#0b0f1c; --panel:#0e1424; --panel2:#121a2e;
  --line:rgba(124,154,210,.14); --line2:rgba(124,154,210,.28);
  --ink:#e8eefc; --ink2:#a7b3cf; --ink3:#8593b3;
  --green:#3ff0b2; --cyan:#56c8ff; --amber:#ffce5a; --violet:#a98bff;
  --font:'Inter',system-ui,-apple-system,sans-serif; --display:'Space Grotesk',var(--font); --mono:'JetBrains Mono',ui-monospace,monospace;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:
  radial-gradient(1100px 600px at 85% -5%,rgba(63,240,178,.06),transparent 60%),
  radial-gradient(900px 520px at -5% 100%,rgba(169,139,255,.06),transparent 55%),
  var(--bg);
  color:var(--ink);font-family:var(--font);line-height:1.6;-webkit-font-smoothing:antialiased}
a{color:inherit}

.back-link{position:fixed;top:14px;left:16px;z-index:30;font-family:var(--mono);font-size:.8rem;color:var(--ink2);
  text-decoration:none;background:rgba(7,10,18,.7);backdrop-filter:blur(8px);border:1px solid var(--line2);
  border-radius:100px;padding:7px 14px;transition:all .18s}
.back-link:hover{color:var(--green);border-color:var(--green)}

.hist-head{max-width:780px;margin:0 auto;padding:84px 22px 26px;text-align:center}
.hist-kicker{font-family:var(--mono);font-size:.74rem;letter-spacing:.16em;text-transform:uppercase;color:var(--green);margin:0 0 12px}
.hist-head h1{font-family:var(--display);font-size:clamp(2rem,6vw,3.4rem);line-height:1.04;margin:0 0 14px;letter-spacing:-.015em}
.hist-head p{color:var(--ink2);font-size:clamp(1rem,2.4vw,1.15rem);margin:0}

.hist-wrap{max-width:920px;margin:0 auto;padding:20px 22px 60px;position:relative}
/* linha do tempo vertical */
.hist-wrap::before{content:"";position:absolute;left:max(22px,calc((100% - 920px)/2 + 22px));top:0;bottom:120px;width:2px;
  background:linear-gradient(180deg,transparent,var(--line2) 8%,var(--line2) 92%,transparent);opacity:.5}
@media(min-width:760px){.hist-wrap::before{left:148px}}

.era{position:relative;display:grid;grid-template-columns:1fr;gap:6px;padding:26px 0 30px;
  opacity:0;transform:translateY(26px);transition:opacity .7s ease,transform .7s cubic-bezier(.22,1,.36,1);transition-delay:calc(var(--i,0)*40ms)}
.era.in{opacity:1;transform:none}
@media(min-width:760px){.era{grid-template-columns:150px 1fr;gap:26px;align-items:start}}
.era-year{font-family:var(--display);font-weight:700;font-size:clamp(2.2rem,7vw,3.2rem);line-height:1;
  color:transparent;-webkit-text-stroke:1.5px var(--green-dim,#1c7a5c);text-stroke:1.5px #1c7a5c;
  background:linear-gradient(180deg,rgba(63,240,178,.9),rgba(86,200,255,.5));-webkit-background-clip:text;background-clip:text;
  position:relative}
@media(min-width:760px){.era-year{text-align:right;position:sticky;top:20px}}
.era-body{min-width:0;background:linear-gradient(180deg,var(--panel),rgba(11,15,28,.4));border:1px solid var(--line);
  border-radius:16px;padding:20px 22px 22px}
.era-period{font-family:var(--mono);font-size:.74rem;letter-spacing:.08em;color:var(--ink3);text-transform:uppercase}
.era-title{font-family:var(--display);font-size:clamp(1.3rem,3.4vw,1.7rem);margin:4px 0 10px;color:var(--ink);line-height:1.15}
.era-text{margin:0 0 14px;color:var(--ink2);font-size:1rem}
.era-stat{margin:0 0 14px;font-family:var(--mono);font-size:.78rem;color:var(--ink3)}
.era-stat b{color:var(--green)}

.era-anchor{display:flex;gap:13px;align-items:center;text-decoration:none;background:rgba(124,154,210,.05);
  border:1px solid var(--line);border-radius:12px;padding:11px;transition:border-color .2s,transform .2s}
.era-anchor:hover{border-color:var(--green);transform:translateY(-2px)}
.era-anchor-im{flex:0 0 64px;height:64px;border-radius:9px;overflow:hidden;background:#efeadd;display:flex;align-items:center;justify-content:center}
.era-thumb{width:100%;height:100%;object-fit:cover}
.era-art{font-size:2rem}
.era-anchor-tx{display:flex;flex-direction:column;gap:2px;min-width:0}
.era-anchor-tx b{font-family:var(--display);font-size:.95rem;color:var(--ink)}
.era-anchor-t{font-size:.82rem;color:var(--ink2);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.era-anchor-loc{font-family:var(--mono);font-size:.72rem;color:var(--green)}

.hist-foot{max-width:920px;margin:0 auto;padding:6px 22px 80px;text-align:center;color:var(--ink3);font-size:.84rem}
.hist-foot a{color:var(--ink2)} .hist-foot a:hover{color:var(--green)}
.hist-empty{max-width:520px;margin:50px auto;text-align:center;color:var(--ink2);background:var(--panel);
  border:1px solid var(--line);border-radius:14px;padding:30px}
@media(prefers-reduced-motion:reduce){*{transition:none!important;scroll-behavior:auto}.era{opacity:1;transform:none}}