*{box-sizing:border-box}html{scroll-behavior:smooth;scroll-padding-top:80px}body{margin:0;background:#f5f0e5;color:#203833;font:16px/1.5 system-ui,sans-serif}header{padding:28px clamp(16px,4vw,56px);display:flex;align-items:center;justify-content:space-between;gap:20px;border-bottom:1px solid #c5c8bc}h1{font-family:Georgia,serif;font-size:clamp(34px,6vw,64px);line-height:1.1;margin:4px 0 12px}p{margin:6px 0}.eyebrow{letter-spacing:.15em;font-size:11px;font-weight:700}a{color:inherit;text-underline-offset:4px}header>a{white-space:nowrap}aside{padding:16px;text-align:center;background:#ffe1a2;color:#533b14}nav{position:sticky;top:0;z-index:2;display:flex;align-items:center;justify-content:center;gap:16px;padding:12px;background:#203833;color:white;flex-wrap:wrap}nav a,select{min-height:44px;display:inline-flex;align-items:center}select{font:inherit;border:1px solid #9eafa9;border-radius:4px;background:#fff;color:#203833;padding:6px}main{width:100%;margin:0;padding:0}figure{width:100%;margin:0;scroll-margin-top:12px}figcaption{padding:8px 16px;font-size:11px;font-weight:700;letter-spacing:.1em;background:#e6e4d8}figcaption span{color:#65766d}img{display:block;width:100%;height:auto;max-width:none}img[hidden],.missing[hidden]{display:none}.missing{margin:0;min-height:240px;display:grid;place-items:center;background:#edece3;color:#53685f;border-bottom:1px solid #c5c8bc}footer{text-align:center;padding:40px 16px}a:focus-visible,select:focus-visible{outline:3px solid #dba83b;outline-offset:4px}@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}}@media(max-width:400px){nav{gap:10px}header{align-items:flex-start}header>a{font-size:14px}}
/* Identidad del afiche: marca original, rojo, azul, amarillo y verde. */
body{background:#fff;color:#0033a5}
.brand-header{position:relative;display:grid;grid-template-columns:1fr 1fr 1fr;align-items:center;gap:clamp(14px,3vw,52px);padding:24px clamp(18px,5vw,80px) 38px;background:#fff;border:0;overflow:hidden}
.brand-name{justify-self:start;width:clamp(170px,25vw,360px);max-width:100%;margin:0;line-height:1}
.name-underline{position:absolute;bottom:-10px;left:3%;width:100%;height:clamp(6px,.7vw,10px);border-radius:70% 25% 50% 40%;background:#ffd400;transform:rotate(-2deg)}
.brand-logo{justify-self:center;display:block;width:clamp(110px,18vw,245px);aspect-ratio:330/220;background-image:url("assets/marca-afiche.png");background-repeat:no-repeat;background-size:310.30303% auto;background-position:85.014409% 4.93921%;mix-blend-mode:multiply}
.brand-message{justify-self:end;font-size:clamp(15px,1.8vw,25px);font-weight:850;line-height:1.3;color:#0033a5;text-decoration:none;white-space:normal;max-width:270px}
.brand-message span{display:block}.brand-message b{color:#007fe5}.brand-message:hover{text-decoration:underline;text-decoration-color:#ffd400;text-decoration-thickness:3px}
.brand-ribbon{position:absolute;left:0;right:0;bottom:0;display:flex;height:8px}.brand-ribbon i{flex:1;background:#ffd400}.brand-ribbon i:nth-child(2){background:#ff2538}.brand-ribbon i:nth-child(3){background:#008ee8}.brand-ribbon i:nth-child(4){background:#80bf18}
nav{background:#0033a5}select{color:#0033a5;border-color:#80b9ee}a:focus-visible,select:focus-visible{outline-color:#ffca00}
@keyframes dario-arrive{from{opacity:0;transform:translateY(12px) rotate(-9deg)}to{opacity:1;transform:translateY(0) rotate(-5deg)}}
@keyframes dario-sway{0%,100%{transform:rotate(-5deg)}50%{transform:translateY(-3px) rotate(-3deg)}}
@media(max-width:600px){.brand-header{grid-template-columns:1fr 1fr;gap:16px 20px;padding:20px 22px 28px}.brand-name{width:100%}.brand-logo{justify-self:center;width:clamp(118px,31vw,160px)}.brand-message{grid-column:1/-1;justify-self:center;text-align:center;max-width:none;font-size:17px}.brand-message span{display:inline}.brand-message span:before{content:" "}}
@media(prefers-reduced-motion:reduce){.brand-name{animation:none}}

/* Navegación por etapas de su vida. */
.story-nav{display:flex;align-items:center;justify-content:center;gap:22px;padding:14px clamp(16px,3vw,40px);background:#0033a5;box-shadow:0 4px 0 rgba(0,22,87,.14);isolation:isolate}
.nav-intro{display:flex;align-items:center;gap:18px;flex-shrink:0}.begin-link{display:flex;align-items:center;justify-content:space-between;gap:14px;padding:9px 17px;background:#ffd400;border:2px solid #ffd400;border-radius:100px;color:#09275e;font-size:16px;font-weight:900;text-decoration:none;line-height:1.1;white-space:nowrap;box-shadow:0 3px 0 #d5ad00;transition:transform .18s ease,box-shadow .18s ease}.begin-link span{font-size:23px}.begin-link:hover{transform:translateY(-2px);box-shadow:0 5px 0 #d5ad00}.nav-label{max-width:90px;color:#fff;font-size:12px;font-weight:850;line-height:1.3;text-transform:uppercase;letter-spacing:.08em}
.section-links{display:grid;grid-template-columns:.85fr 1.25fr 1.05fr;gap:10px;max-width:850px;flex:1}.section-link{display:flex;align-items:center;justify-content:center;gap:10px;min-height:54px;padding:9px 16px;border:2px solid rgba(255,255,255,.35);border-radius:18px;color:#fff;text-decoration:none;font-size:15px;font-weight:850;line-height:1.2;transition:background .18s ease,transform .18s ease,border-color .18s ease}.section-link:hover{background:rgba(255,255,255,.12);border-color:#fff;transform:translateY(-2px)}.section-link.is-active{background:#fff;border-color:#fff;color:#0033a5;box-shadow:0 4px 0 #008ee8}.section-number{display:grid;place-items:center;flex-shrink:0;width:29px;height:29px;border-radius:50%;background:#008ee8;color:#fff;font-size:12px;font-weight:900}.section-link:nth-child(2) .section-number{background:#ff3346}.section-link:nth-child(3) .section-number{background:#80bf18;color:#143400}.section-link:focus-visible,.begin-link:focus-visible{outline:3px solid #ffd400;outline-offset:5px}.life-section[hidden]{display:none}.life-section{scroll-margin-top:110px}.section-heading{padding:25px clamp(18px,4vw,56px) 28px;background:#fff;color:#0033a5;border-bottom:5px solid #ffd400}.section-heading>span{font-size:11px;font-weight:850;letter-spacing:.13em}.section-heading h2{margin:5px 0 0;font-size:clamp(26px,4vw,44px);line-height:1.1;font-weight:900;letter-spacing:-.035em}.coming-soon{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:16px;min-height:380px;padding:40px 22px;text-align:center;background:#f0f7ff}.coming-symbol{display:grid;place-items:center;width:76px;height:76px;border-radius:24px;background:#ffd400;color:#0033a5;font-size:48px;font-weight:900;transform:rotate(-7deg)}.coming-soon p{max-width:520px;font-size:clamp(21px,4vw,30px);font-weight:850;line-height:1.25}.coming-soon a{font-weight:800;min-height:44px;display:inline-flex;align-items:center;gap:10px}footer{font-weight:750;color:#0033a5}
@media(max-width:1000px){.story-nav{gap:14px}.nav-label{display:none}.section-number{display:none}.section-link{padding:10px 12px;font-size:14px}}
@media(max-width:650px){.story-nav{display:block;padding:12px 12px 15px}.nav-intro{justify-content:space-between;margin-bottom:12px}.nav-label{display:block;max-width:none;font-size:11px}.begin-link{padding:7px 14px;min-height:38px;font-size:14px}.begin-link span{font-size:20px}.section-links{grid-template-columns:.9fr 1.15fr 1.05fr;gap:7px}.section-link{border-radius:13px;min-height:55px;padding:8px 6px;font-size:13px;line-height:1.15;text-align:center}.life-section{scroll-margin-top:155px}.section-heading{padding:21px 18px 24px}.coming-soon{min-height:320px}}
@media(prefers-reduced-motion:reduce){.section-link,.begin-link{transition:none}}

/* Relato de vida política y profesional. */
.section-intro{margin:12px 0 0;max-width:720px;font-size:clamp(16px,1.7vw,22px);line-height:1.4;color:#355681;font-weight:600}.trajectory-scene{position:relative;width:100%;margin:0;isolation:isolate;overflow:hidden}.trajectory-scene>img{width:100%;height:auto;display:block}.trajectory-scene>.narration{position:absolute;top:3.5%;left:3.5%;width:39%;margin:0;padding:clamp(10px,1.3vw,20px);background:#fff1a9;color:#141b15;border:clamp(2px,.3vw,5px) solid #181c15;box-shadow:3px 4px 0 rgba(0,0,0,.18);font-family:"Arial Narrow","Roboto Condensed",Arial,sans-serif;font-size:clamp(13px,1.65vw,26px);font-weight:650;line-height:1.3;letter-spacing:-.025em;text-transform:none}.narration .scene-period{display:block;color:#0033a5;font-family:system-ui,sans-serif;font-weight:900;font-size:.58em;letter-spacing:.08em;text-transform:uppercase;margin:0 0 .7em}.narration p{margin:0}.chapter-end{display:flex;align-items:center;justify-content:space-between;gap:24px;padding:32px clamp(20px,4vw,56px);color:#0033a5;background:#fff7d1}.chapter-end p{margin:0;font-size:clamp(21px,3vw,32px);font-weight:850;line-height:1.2}.chapter-end a{display:inline-flex;align-items:center;gap:14px;font-weight:850;min-height:48px}.trajectory-scene .missing:not([hidden]){min-height:500px}
@media(max-width:650px){.trajectory-scene>.narration{position:absolute;left:2%;width:42%;padding:9px 10px;font-size:clamp(11px,3vw,19px);line-height:1.25}.narration .scene-period{font-size:.68em;letter-spacing:.025em;margin-bottom:.6em}.chapter-end{display:block;padding:30px 20px}.chapter-end a{margin-top:16px}.trajectory-scene .missing:not([hidden]){min-height:300px}}
@media(max-width:350px){.trajectory-scene>.narration{padding:7px 8px}}