:root{
  --paper:#eef1f5; --paper-2:#e7ebf0; --surface:#ffffff; --surface-2:#f7f9fb;
  --ink:#1f2b37; --ink-2:#4a5a6a; --ink-3:#71818f;
  --line:#dde3ea; --line-2:#c6d0db;
  --accent:#1e73be; --accent-2:#143c6b; --brass:#f4a32a; --brass-2:#d88914;
  --current:#3f7d57;
  --shadow:0 1px 2px rgba(20,40,60,.05),0 8px 24px rgba(20,40,60,.06);
  --shadow-sm:0 1px 2px rgba(20,40,60,.05);
  --radius:14px;
  --font-display:"Fraunces",Georgia,"Times New Roman",serif;
  --font-body:"Archivo",system-ui,-apple-system,"Segoe UI",sans-serif;
}
@media (prefers-color-scheme:dark){ :root:not([data-theme="light"]){
  --paper:#0e151c; --paper-2:#111a23; --surface:#161f28; --surface-2:#1b2530;
  --ink:#e8eef4; --ink-2:#aebccb; --ink-3:#8394a3;
  --line:#273441; --line-2:#33475a;
  --accent:#4b9fe6; --accent-2:#8fc2ef; --brass:#f6b44e; --brass-2:#d99a3f;
  --current:#69b58a;
  --shadow:0 1px 2px rgba(0,0,0,.4),0 12px 34px rgba(0,0,0,.5);
  --shadow-sm:0 1px 2px rgba(0,0,0,.4);
}}
:root[data-theme="dark"]{
  --paper:#0e151c; --paper-2:#111a23; --surface:#161f28; --surface-2:#1b2530;
  --ink:#e8eef4; --ink-2:#aebccb; --ink-3:#8394a3;
  --line:#273441; --line-2:#33475a;
  --accent:#4b9fe6; --accent-2:#8fc2ef; --brass:#f6b44e; --brass-2:#d99a3f;
  --current:#69b58a;
  --shadow:0 1px 2px rgba(0,0,0,.4),0 12px 34px rgba(0,0,0,.5);
  --shadow-sm:0 1px 2px rgba(0,0,0,.4);
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0; background:var(--paper); color:var(--ink);
  font-family:var(--font-body); font-size:16px; line-height:1.55; -webkit-font-smoothing:antialiased;}
img{max-width:100%; display:block}
a{color:inherit}
h1,h2,h3,h4{margin:0; text-wrap:balance; font-weight:600}
p{margin:0}
.wrap{max-width:1180px; margin-inline:auto; padding-inline:20px}
.eyebrow{font-family:"Archivo",system-ui,sans-serif; text-transform:uppercase;
  letter-spacing:.16em; font-size:.72rem; font-weight:600; color:var(--brass);}

.topbar{position:sticky; top:0; z-index:20; background:color-mix(in srgb,var(--surface) 88%,transparent);
  backdrop-filter:saturate(140%) blur(10px); border-bottom:1px solid var(--line);}
.topbar__in{display:flex; align-items:center; justify-content:space-between; gap:18px; padding-block:12px;}
.brand{display:flex; align-items:center; gap:14px; text-decoration:none; min-width:0}
.brand img{height:42px; width:auto; padding:3px 6px; border-radius:9px; background:#fff}
:root[data-theme="dark"] .brand img{filter:none}
@media(prefers-color-scheme:dark){:root:not([data-theme="light"]) .brand img{filter:none}}
.brand__txt{font-family:var(--font-body); font-size:.72rem; letter-spacing:.1em; text-transform:uppercase; color:var(--ink-3); line-height:1.35}
.brand__txt b{display:block; color:var(--ink); letter-spacing:.1em}
.topbar__actions{display:flex; align-items:center; gap:12px}
.portal-link{font-family:"Archivo",sans-serif; font-size:.7rem; letter-spacing:.1em; text-transform:uppercase;
  color:var(--ink-2); text-decoration:none}
.portal-link:hover{color:var(--accent)}
.theme-btn{font-family:var(--font-body); font-size:.68rem; letter-spacing:.08em; text-transform:uppercase;
  background:var(--surface); border:1px solid var(--line-2); color:var(--ink-2); padding:9px 13px; border-radius:10px; cursor:pointer}
.theme-btn:hover{border-color:var(--accent); color:var(--accent)}

.hero{margin-top:28px; padding:clamp(32px,5vw,56px); background:var(--surface); border:1px solid var(--line); border-radius:var(--radius); box-shadow:var(--shadow)}
.hero__kick{font-family:"Archivo",sans-serif; text-transform:uppercase; letter-spacing:.2em; font-size:.74rem; font-weight:600; color:var(--brass)}
.hero__rule{width:54px; height:2px; background:var(--brass); margin:16px 0 20px}
.hero h1{font-family:var(--font-display); font-weight:600; font-size:clamp(2.5rem,6vw,4.4rem); line-height:1.02; letter-spacing:-.01em}
.hero h1 .yr{display:block; color:var(--accent); font-style:italic; font-weight:500; font-size:clamp(1.5rem,3.4vw,2.4rem); margin-top:10px; letter-spacing:0}
.hero__sub{font-family:"Archivo",sans-serif; font-size:.86rem; letter-spacing:.04em; color:var(--ink-2); margin-top:18px}
.hero__lede{max-width:63ch; margin-top:22px; color:var(--ink-2); font-size:1.06rem}
.hero__stats{display:flex; flex-wrap:wrap; gap:34px; margin-top:34px}
.stat{display:flex; flex-direction:column}
.stat b{font-family:var(--font-display); font-size:2.1rem; line-height:1; color:var(--ink); font-variant-numeric:tabular-nums}
.stat span{font-family:"Archivo",sans-serif; text-transform:uppercase; letter-spacing:.12em; font-size:.66rem; color:var(--ink-3); margin-top:7px}

section.block{padding-block:56px}
.sec-head{display:flex; align-items:baseline; gap:16px; margin-bottom:34px; flex-wrap:wrap}
.sec-head h2{font-family:var(--font-display); font-size:clamp(1.7rem,3.4vw,2.4rem); font-weight:600; letter-spacing:-.01em}
.sec-head h2:before{content:""; display:inline-block; width:7px; height:7px; border-radius:50%; background:var(--brass); margin-right:10px; vertical-align:.18em}
.sec-head p{color:var(--ink-3); font-size:.98rem; max-width:52ch}

.tl{list-style:none; margin:0; padding:0; position:relative}
.tl:before{content:""; position:absolute; left:calc(60px + 22px); top:14px; bottom:14px; width:2px;
  background:linear-gradient(var(--line-2),var(--brass) 40%,var(--brass) 60%,var(--line-2));}
.tl__item{position:relative}
.tl__link{display:grid; grid-template-columns:88px 1fr auto; align-items:center; gap:20px; text-decoration:none;
  padding:12px 16px 12px 0; border-radius:var(--radius); border:1px solid transparent; transition:background .18s,border-color .18s,box-shadow .18s}
.tl__link:hover{background:var(--surface); border-color:var(--line); box-shadow:var(--shadow)}
.tl__medal{position:relative; width:60px; height:74px; border-radius:8px; overflow:hidden; background:var(--surface-2);
  border:1px solid var(--line-2); box-shadow:var(--shadow-sm); justify-self:end}
.tl__medal img{width:100%; height:100%; object-fit:cover; filter:grayscale(.35) contrast(1.02)}
.tl__link:hover .tl__medal img{filter:grayscale(0)}
.tl__node{position:absolute; left:calc(60px + 15px); top:50%; transform:translateY(-50%); width:15px; height:15px;
  border-radius:50%; background:var(--paper); border:3px solid var(--brass); z-index:2}
.tl__item--current .tl__node{border-color:var(--current); box-shadow:0 0 0 4px color-mix(in srgb,var(--current) 22%,transparent)}
.tl__years{font-family:"Archivo",sans-serif; font-weight:600; letter-spacing:.03em; font-size:.82rem; color:var(--accent); font-variant-numeric:tabular-nums; display:block}
.tl__name{font-family:var(--font-display); font-size:1.32rem; font-weight:600; display:block; line-height:1.15; margin-top:2px}
.tl__note{font-family:"Archivo",sans-serif; font-size:.7rem; text-transform:uppercase; letter-spacing:.1em; color:var(--ink-3); display:block; margin-top:4px}
.tl__item--current .tl__note{color:var(--current)}
.tl__go{font-size:1.3rem; color:var(--ink-3); transition:transform .18s,color .18s}
.tl__link:hover .tl__go{color:var(--accent); transform:translateX(4px)}
.ia-badge{position:absolute; top:5px; right:5px; z-index:3; font-family:"Archivo",sans-serif; font-size:.56rem;
  letter-spacing:.08em; font-weight:700; background:color-mix(in srgb,var(--ink) 78%,transparent); color:var(--paper); padding:2px 5px; border-radius:5px}
.ia-badge--sm{top:3px; right:3px; font-size:.5rem; padding:1px 4px}

.grid-2{display:grid; grid-template-columns:1fr 1fr; gap:26px}
.panel{background:var(--surface); border:1px solid var(--line); border-radius:var(--radius); padding:26px; box-shadow:var(--shadow)}
.reforms{list-style:none; margin:0; padding:0}
.rf{display:grid; grid-template-columns:88px 1fr; gap:6px 18px; padding:16px 0; border-top:1px solid var(--line)}
.rf:first-child{border-top:0; padding-top:0}
.rf__yr{grid-row:span 2; font-family:var(--font-display); font-size:1.5rem; color:var(--brass); font-variant-numeric:tabular-nums; line-height:1}
.rf__k{font-family:"Archivo",sans-serif; text-transform:uppercase; letter-spacing:.12em; font-size:.7rem; color:var(--ink-2); align-self:end}
.rf__d{color:var(--ink-2); font-size:.94rem; line-height:1.5}
.lproll{list-style:none; margin:0; padding:0}
.lp{padding:15px 0; border-top:1px solid var(--line)}
.lp:first-child{border-top:0; padding-top:0}
.lp__name{font-family:var(--font-display); font-size:1.16rem; font-weight:600}
.lp__when{font-family:"Archivo",sans-serif; font-size:.68rem; text-transform:uppercase; letter-spacing:.1em; color:var(--brass); margin-left:10px}
.lp__d{color:var(--ink-2); font-size:.92rem; margin-top:3px}

.view--president{padding-block:30px 70px}
.back{display:inline-block; font-family:"Archivo",sans-serif; font-size:.76rem; letter-spacing:.1em; text-transform:uppercase;
  color:var(--ink-2); text-decoration:none; margin-block:8px 26px}
.back:hover{color:var(--accent)}
.back--foot{margin-top:34px}
.dossier{display:grid; grid-template-columns:300px 1fr; gap:44px; align-items:start; padding:30px; background:var(--surface); border:1px solid var(--line); border-radius:var(--radius); box-shadow:var(--shadow)}
.dossier__portrait{display:flex; flex-direction:column; gap:16px; position:sticky; top:74px}
.portrait figure,.portrait{margin:0}
.frame{position:relative; border-radius:12px; overflow:hidden; background:var(--surface-2); border:1px solid var(--line-2); box-shadow:var(--shadow)}
.portrait--lead .frame{aspect-ratio:4/5}
.portrait--lead .frame img{width:100%; height:100%; object-fit:cover}
.portrait--extra{display:flex; gap:12px; align-items:center}
.portrait--extra .frame{width:78px; aspect-ratio:4/5; flex:none}
.portrait--extra .frame img{width:100%; height:100%; object-fit:cover; filter:grayscale(.3)}
.portrait--extra figcaption{font-family:"Archivo",sans-serif; font-size:.72rem; color:var(--ink-3); letter-spacing:.03em; line-height:1.4}
.portrait--lead figcaption{display:none}
.dossier__name{font-family:var(--font-display); font-size:clamp(2.2rem,4.6vw,3.4rem); font-weight:600; line-height:1.02; letter-spacing:-.015em; margin-top:8px}
.dossier__life{font-family:"Archivo",sans-serif; font-size:.82rem; letter-spacing:.04em; color:var(--ink-3); margin-top:12px}
.dossier__lede{margin-top:22px; font-size:1.1rem; color:var(--ink-2); max-width:56ch}
.chips{list-style:none; display:flex; flex-wrap:wrap; gap:9px; padding:0; margin:16px 0 0}
.chips--spans li{font-family:"Archivo",sans-serif; font-weight:600; font-size:.82rem; letter-spacing:.03em; color:var(--accent);
  background:color-mix(in srgb,var(--accent) 10%,var(--surface)); border:1px solid color-mix(in srgb,var(--accent) 26%,transparent);
  padding:6px 13px; border-radius:999px; font-variant-numeric:tabular-nums}
.chips--years{margin-top:6px}
.chips--years li{font-family:"Archivo",sans-serif; font-size:.82rem; font-weight:600; color:var(--ink-2); background:var(--surface-2);
  border:1px solid var(--line-2); padding:6px 12px; border-radius:8px; font-variant-numeric:tabular-nums}

.fichas{margin-top:40px; display:flex; flex-direction:column; gap:26px}
.ficha{background:var(--surface); border:1px solid var(--line); border-radius:var(--radius); padding:28px 30px; box-shadow:var(--shadow)}
.ficha--current{border-color:color-mix(in srgb,var(--current) 45%,var(--line)); box-shadow:0 0 0 1px color-mix(in srgb,var(--current) 30%,transparent),var(--shadow)}
.ficha--lacuna{background:var(--surface-2); border-style:dashed}
.ficha--soft{background:transparent; box-shadow:none; border-style:dashed}
.ficha__title{font-family:var(--font-display); font-size:1.5rem; font-weight:600; letter-spacing:-.01em}
.ficha--current .ficha__title{color:var(--current)}
.ficha__meta{font-family:"Archivo",sans-serif; font-size:.78rem; letter-spacing:.03em; color:var(--ink-3); margin-top:8px; line-height:1.5}
.board{margin:22px 0 0; display:grid; gap:1px; background:var(--line); border:1px solid var(--line); border-radius:10px; overflow:hidden}
.board__row{display:grid; grid-template-columns:210px 1fr; gap:20px; background:var(--surface); padding:12px 18px}
.ficha--lacuna .board__row{background:var(--surface-2)}
.board__row dt{font-family:"Archivo",sans-serif; text-transform:uppercase; letter-spacing:.08em; font-size:.7rem; font-weight:600; color:var(--brass); padding-top:3px}
.board__row dd{margin:0; color:var(--ink); font-size:.98rem; line-height:1.5}
.board__lead{margin-top:16px; font-size:.98rem; color:var(--ink-2)}
.roll{list-style:none; margin-top:12px; padding:0; columns:2; column-gap:26px}
.roll li{font-size:.95rem; color:var(--ink-2); padding:3px 0; break-inside:avoid}
.roll li:before{content:"•"; color:var(--brass); margin-right:8px}
.note{position:relative; margin-top:16px; padding:12px 16px 12px 18px; background:var(--surface-2); border-left:3px solid var(--brass);
  border-radius:0 8px 8px 0; font-size:.92rem; color:var(--ink-2); line-height:1.55}
.note__mk{display:inline-block; font-family:"Archivo",sans-serif; text-transform:uppercase; letter-spacing:.1em; font-size:.62rem; font-weight:700; color:var(--brass); margin-right:9px}
.photo{margin:22px 0 0}
.photo img{border-radius:12px; border:1px solid var(--line-2); box-shadow:var(--shadow-sm)}
.photo figcaption{font-family:"Archivo",sans-serif; font-size:.76rem; color:var(--ink-3); margin-top:10px; letter-spacing:.02em}

/* sub-blocks: marcos + documentos */
.subblock{margin-top:24px; padding-top:22px; border-top:1px dashed var(--line-2)}
.subblock__h{font-family:"Archivo",sans-serif; text-transform:uppercase; letter-spacing:.13em; font-size:.72rem; font-weight:700; color:var(--brass); margin-bottom:14px}
.marcos{list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:14px}
.marco{display:grid; grid-template-columns:96px 1fr; gap:18px; align-items:start}
.marco__yr{font-family:var(--font-display); font-size:1.05rem; font-weight:600; color:var(--accent); font-variant-numeric:tabular-nums;
  padding-top:2px; border-right:2px solid var(--brass-2); padding-right:12px; text-align:right}
.marco__b h4{font-family:var(--font-display); font-size:1.06rem; font-weight:600; color:var(--ink)}
.marco__d{color:var(--ink-2); font-size:.94rem; margin-top:3px; line-height:1.55}
.docs{list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:8px}
.doc a,.doc span{display:flex; align-items:center; gap:12px; text-decoration:none; padding:11px 14px; background:var(--surface-2);
  border:1px solid var(--line); border-radius:10px}
.doc a:hover{border-color:var(--accent)}
.doc__ic{color:var(--brass); font-size:1rem}
.doc__t{font-size:.96rem; color:var(--ink)}
.doc__meta{display:block; font-family:"Archivo",sans-serif; font-size:.72rem; color:var(--ink-3); letter-spacing:.03em; margin-top:2px}
.docs__empty{font-family:"Archivo",sans-serif; font-size:.8rem; letter-spacing:.02em; color:var(--ink-3);
  padding:12px 14px; border:1px dashed var(--line-2); border-radius:10px; background:transparent}

.pagenav{display:flex; justify-content:space-between; gap:16px; margin-top:44px; padding-top:26px; border-top:1px solid var(--line)}
.pn{text-decoration:none; display:flex; flex-direction:column; gap:3px; max-width:48%}
.pn--next{text-align:right; margin-left:auto}
.pn span{font-family:"Archivo",sans-serif; text-transform:uppercase; letter-spacing:.1em; font-size:.68rem; color:var(--ink-3)}
.pn b{font-family:var(--font-display); font-size:1.1rem; color:var(--accent); font-weight:600}
.pn:hover b{color:var(--accent-2)}

.foot{border-top:1px solid var(--line); background:var(--paper-2); padding-block:44px; margin-top:20px}
.foot h3{font-family:"Archivo",sans-serif; text-transform:uppercase; letter-spacing:.14em; font-size:.74rem; color:var(--brass); font-weight:600}
.foot ol{margin:16px 0 0; padding-left:20px; color:var(--ink-3); font-size:.86rem; line-height:1.7; max-width:78ch}
.foot__meta{font-family:"Archivo",sans-serif; font-size:.76rem; color:var(--ink-3); letter-spacing:.04em; margin-top:26px; line-height:1.7}

@media(max-width:820px){
  .grid-2{grid-template-columns:1fr}
  .dossier{grid-template-columns:1fr; gap:26px}
  .dossier__portrait{position:static; flex-direction:row; flex-wrap:wrap; align-items:flex-start}
  .portrait--lead{width:180px}
  .board__row{grid-template-columns:1fr; gap:3px}
  .board__row dt{padding-top:0}
  .roll{columns:1}
}
@media(max-width:520px){
  body{font-size:16px}
  .brand__txt{display:none}
  .tl__link{grid-template-columns:64px 1fr; gap:14px}
  .tl:before{left:calc(46px + 16px)}
  .tl__node{left:calc(46px + 9px)}
  .tl__medal{width:46px; height:58px}
  .tl__go{display:none}
  .hero{margin-top:18px; padding:28px 22px}
  .dossier{padding:22px}
  .marco{grid-template-columns:74px 1fr; gap:12px}
}
@media(prefers-reduced-motion:reduce){*{transition:none!important; scroll-behavior:auto!important}}