:root{--history-purple:#5b21b6;--history-blue:#2563eb;--history-gold:#c26a05;--history-green:#0f766e}
.history-page{background:radial-gradient(900px 500px at 10% 0,#ede9fe 0,transparent 65%),radial-gradient(800px 520px at 100% 10%,#dbeafe 0,transparent 58%),#f8faff!important}
.history-shell{width:min(calc(100% - 28px),1080px);margin:1.2rem auto 3rem}
.history-hero,.history-card{border:1px solid #e1e7fa;border-radius:26px;background:rgba(255,255,255,.96);box-shadow:0 14px 38px rgba(42,52,105,.11)}
.history-hero{padding:clamp(1.25rem,5vw,2.8rem);text-align:center;overflow:hidden;position:relative}
.history-hero:after{content:"";position:absolute;width:210px;height:210px;border-radius:50%;right:-75px;bottom:-105px;background:linear-gradient(145deg,#fef3c7,#fde68a);opacity:.72}
.history-kicker,.history-eyebrow{margin:0 0 .35rem;color:var(--history-purple);font-size:.84rem;font-weight:950;letter-spacing:.06em;text-transform:uppercase}
.history-hero h1{margin:.1rem 0 .7rem;font-size:clamp(2rem,7vw,3.45rem);line-height:1.05;color:#20284a}
.history-hero>p:not(.history-kicker){max-width:780px;margin:.5rem auto;color:#526079;font-size:clamp(1rem,2.4vw,1.15rem)}
.history-actions,.era-nav{display:flex;justify-content:center;gap:.65rem;flex-wrap:wrap;margin-top:1.1rem}
.history-button{min-height:46px;border:1px solid #d8def3;border-radius:14px;background:#fff;color:#33436a;padding:.62rem .9rem;font-weight:900;cursor:pointer}
.history-button:hover{background:#f2f5ff}.history-button--primary{border-color:transparent;background:linear-gradient(135deg,#5b7cfa,#7048d7);color:#fff;box-shadow:0 7px 18px rgba(91,124,250,.28)}
.history-card{margin-top:1.1rem;padding:clamp(1rem,3.2vw,1.7rem)}
.history-section-heading{display:flex;align-items:center;justify-content:space-between;gap:1rem;margin-bottom:1rem}
.history-section-heading h2{margin:0;color:#26345d;font-size:clamp(1.35rem,4vw,2rem)}
.history-counter{flex:0 0 auto;border-radius:999px;background:#eef2ff;color:#3d4e8f;padding:.42rem .72rem;font-size:.84rem;font-weight:900}
.era-tabs{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:.5rem}
.era-tab{min-height:64px;border:2px solid transparent;border-radius:16px;background:#f6f8ff;color:#465475;padding:.55rem .3rem;font-weight:900;cursor:pointer}
.era-tab span{display:block;font-size:1.4rem}.era-tab:hover{background:#edf1ff}.era-tab.is-active{border-color:#6d5ce7;background:#ede9fe;color:#4c1d95;box-shadow:0 6px 16px rgba(91,33,182,.15)}
.era-tab.is-visited:not(.is-active):after{content:" ✓";color:#087f5b}
.era-track{display:flex;height:10px;margin:1rem .3rem;border-radius:999px;overflow:hidden;background:#eef2ff}.era-track__segment{flex:1}.era-pre{background:#d97706}.era-ant{background:#2563eb}.era-med{background:#7c3aed}.era-mod{background:#db2777}.era-con{background:#0f766e}
.era-panel{display:grid;grid-template-columns:minmax(230px,.78fr) minmax(0,1.4fr);gap:clamp(1rem,4vw,2rem);align-items:center;border-radius:22px;background:#fffbeb;padding:clamp(.85rem,3vw,1.5rem);transition:background .2s}
.era-panel--antigua{background:#eff6ff}.era-panel--media{background:#f5f3ff}.era-panel--moderna{background:#fdf2f8}.era-panel--contemporanea{background:#ecfdf5}
.era-illustration{display:grid;min-height:290px;place-items:center;border:1px solid rgba(255,255,255,.8);border-radius:22px;background:rgba(255,255,255,.58);font-size:clamp(5rem,14vw,8rem);position:relative;overflow:hidden}
.era-illustration:before,.era-illustration:after{position:absolute;font-size:.36em}.era-illustration:before{content:attr(data-left);left:8%;bottom:12%}.era-illustration:after{content:attr(data-right);right:8%;top:12%}
.era-position{margin:0;color:#6d5a29;font-size:.82rem;font-weight:950;text-transform:uppercase;letter-spacing:.05em}.era-copy h3{margin:.15rem 0;font-size:clamp(1.8rem,5vw,2.6rem);color:#222d50}.era-dates{margin:.1rem 0 .8rem;color:#4e5c76;font-weight:850}.era-summary{font-size:1.04rem;color:#43516a}
.era-memory{display:flex;gap:.65rem;align-items:flex-start;border-left:5px solid #f59e0b;border-radius:0 14px 14px 0;background:rgba(255,255,255,.78);padding:.72rem .85rem}.era-memory span{font-size:1.35rem}.era-memory p{margin:0;color:#35415b}
.era-facts{display:grid;gap:.45rem;margin:.8rem 0;padding:0;list-style:none}.era-facts li{position:relative;padding-left:1.5rem;color:#45526a}.era-facts li:before{content:"●";position:absolute;left:.25rem;color:#6d5ce7}
.history-note{margin:1rem 0 0;border-radius:14px;background:#f8faff;color:#57657c;padding:.75rem .9rem;font-size:.9rem}
.history-quiz{scroll-margin-top:1rem}.quiz-help{color:#59677d}.quiz-progress{height:10px;border-radius:999px;background:#e7ebf9;overflow:hidden}.quiz-progress span{display:block;width:10%;height:100%;background:linear-gradient(90deg,#5b7cfa,#8b5cf6);transition:width .25s}
.quiz-box{margin-top:1rem;border-radius:20px;background:#f8faff;padding:clamp(1rem,3vw,1.4rem)}.quiz-question{margin:.1rem 0 1rem;color:#222e52;font-size:clamp(1.15rem,3vw,1.45rem);font-weight:950}.quiz-options{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:.7rem}.quiz-option{min-height:58px;border:2px solid #dce3f7;border-radius:15px;background:#fff;color:#354260;padding:.7rem;text-align:left;font-weight:850;cursor:pointer}.quiz-option:hover{border-color:#8ea0ef;background:#f5f7ff}.quiz-option.is-correct{border-color:#16a070;background:#e9fbf4;color:#075e45}.quiz-option.is-wrong{border-color:#dc5669;background:#fff0f2;color:#a31831}.quiz-option:disabled{cursor:default;opacity:1}.quiz-feedback{min-height:2.5rem;margin:.8rem 0 .3rem;color:#3f4d67;font-weight:750}.quiz-result{border-radius:20px;background:linear-gradient(145deg,#eef2ff,#f5f3ff);padding:1.3rem;text-align:center}.quiz-result h3{margin:.2rem 0;color:#342c72;font-size:1.7rem}
@media(max-width:760px){.era-tabs{display:flex;overflow-x:auto;scroll-snap-type:x mandatory;padding-bottom:.25rem}.era-tab{min-width:125px;scroll-snap-align:start}.era-panel{grid-template-columns:1fr}.era-illustration{min-height:190px}.quiz-options{grid-template-columns:1fr}.history-section-heading{align-items:flex-start;flex-direction:column}.history-counter{align-self:flex-start}}
@media(max-width:480px){.history-shell{width:min(calc(100% - 16px),1080px)}.history-card{padding:.8rem}.history-actions .history-button,.era-nav .history-button{width:100%}.era-nav{display:grid;grid-template-columns:1fr 1fr}.era-nav .history-button{padding:.5rem}.history-hero:after{display:none}}
@media(prefers-reduced-motion:reduce){.era-panel,.quiz-progress span{transition:none}}