:root{
  --purple:#2D246F; --purple2:#42348F; --lilac:#8C7FD1; --lilac-soft:#C6BEEA;
  --ink:#1E2A38; --muted:#5C6E80; --line:#DAD7EC;
  --paper:#F3F1FA; --paper2:#EAE6F6; --card:#FFFFFF;
  --disp:'Archivo',system-ui,sans-serif;
  --body:'Inter',system-ui,sans-serif;
  --mono:'Space Mono',ui-monospace,monospace;
  --wrap:960px;
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{
  font-family:var(--body); color:var(--ink);
  background:var(--paper);
  background-image:radial-gradient(circle at 12% -5%,#F9F8FD 0,rgba(249,248,253,0) 42%),
                   radial-gradient(circle at 100% 8%,#EDE9F8 0,rgba(237,233,248,0) 40%);
  line-height:1.55; -webkit-font-smoothing:antialiased; overflow-x:hidden;
}
.wrap{max-width:var(--wrap); margin:0 auto; padding:0 28px}
section{padding:88px 0; position:relative}

.eyebrow{
  font-family:var(--mono); font-size:12px; font-weight:700; letter-spacing:.16em;
  text-transform:uppercase; color:var(--purple2); display:inline-flex; align-items:center; gap:9px;
}
.eyebrow::before{content:""; width:9px; height:9px; background:var(--lilac); display:inline-block; transform:rotate(45deg)}
.eyebrow.on-dark{color:var(--lilac-soft)}
.eyebrow.on-dark::before{background:var(--lilac-soft)}
.eyebrow.centered{justify-content:center}
h2.sec{font-family:var(--disp); font-weight:800; font-size:clamp(26px,4vw,40px); line-height:1.08; letter-spacing:-.015em; margin:14px 0 8px; max-width:18ch}
.lead{font-size:clamp(15px,1.6vw,18px); color:var(--muted); max-width:62ch; margin-top:12px}

/* ================= HERO ================= */
.hero{
  background:linear-gradient(160deg,#1A1440 0%,#2D246F 48%,#42348F 100%);
  color:#F1EEFB; padding:0; overflow:hidden; position:relative;
}
.hero::after{content:""; position:absolute; inset:0;
  background:
   radial-gradient(circle at 88% 12%,rgba(140,127,209,.32),transparent 34%),
   radial-gradient(circle at 4% 92%,rgba(140,127,209,.18),transparent 32%);
  pointer-events:none}
.hero-inner{max-width:var(--wrap); margin:0 auto; padding:96px 28px 84px; position:relative; z-index:2;
  display:grid; grid-template-columns:1fr auto; gap:48px; align-items:center}
.badge{display:inline-flex; align-items:center; gap:10px; font-family:var(--mono); font-size:12px;
  letter-spacing:.14em; text-transform:uppercase; color:#CBC0F0;
  border:1px solid rgba(198,190,234,.4); border-radius:100px; padding:8px 16px}
.badge b{color:#fff}
h1{font-family:var(--disp); font-weight:900; font-size:clamp(32px,5.4vw,58px); line-height:1.03;
  letter-spacing:-.025em; color:#fff; margin:26px 0 0}
h1 .hl{color:var(--lilac-soft)}
.hero-role{font-size:clamp(15px,1.6vw,19px); color:#D9D4F2; max-width:52ch; margin-top:18px; font-weight:500}
.hero-sub{font-size:clamp(14px,1.4vw,16px); color:#B7AEDE; max-width:56ch; margin-top:14px}
.hero-links{margin-top:32px; display:flex; flex-wrap:wrap; gap:12px}
.btn{
  display:inline-flex; align-items:center; gap:8px; font-family:var(--mono); font-size:12.5px;
  letter-spacing:.06em; text-transform:uppercase; font-weight:700; text-decoration:none;
  padding:12px 22px; border-radius:100px; transition:transform .2s ease, background .2s ease;
}
.btn.primary{background:#fff; color:var(--purple)}
.btn.primary:hover{transform:translateY(-2px); background:var(--lilac-soft)}
.btn.ghost{border:1px solid rgba(198,190,234,.5); color:#EFEBFB}
.btn.ghost:hover{transform:translateY(-2px); background:rgba(255,255,255,.08)}
.btn.spaced{margin-top:16px}
.photo-wrap{position:relative; width:220px; height:220px; flex:0 0 auto; justify-self:center}
.photo-wrap img{
  width:100%; height:100%; object-fit:cover; border-radius:28px;
  border:3px solid rgba(255,255,255,.25); box-shadow:0 24px 48px -20px rgba(15,8,50,.7);
}
.photo-wrap::before{content:""; position:absolute; inset:-14px; border:1px solid rgba(198,190,234,.35);
  border-radius:36px; z-index:-1}

/* ================= ABOUT ================= */
.about-grid{display:grid; grid-template-columns:repeat(4,1fr); gap:16px; margin-top:40px}
.pill-card{background:var(--card); border:1px solid var(--line); border-radius:14px; padding:22px 20px;
  box-shadow:0 8px 24px -16px rgba(45,36,111,.35)}
.pill-card h3{font-family:var(--disp); font-weight:700; font-size:16px; margin-bottom:8px; color:var(--purple)}
.pill-card p{font-size:13.5px; color:var(--muted); line-height:1.5}
.pill-card.pic{padding:0; overflow:hidden; display:flex}
.pill-card.pic img{width:100%; height:100%; min-height:160px; object-fit:cover}

/* ================= FOCUS AREAS ================= */
.dark{background:linear-gradient(165deg,#241c58,#2D246F); color:#F1EEFB}
.dark h2.sec{color:#fff}
.dark .lead{color:#D9D4F2}
.focus-grid{display:grid; grid-template-columns:repeat(2,1fr); gap:18px; margin-top:40px}
.focus{background:rgba(255,255,255,.06); border:1px solid rgba(198,190,234,.25); border-radius:16px; padding:26px 24px}
.focus h3{font-family:var(--disp); font-weight:700; font-size:19px; color:#fff; margin-bottom:10px}
.focus p{font-size:14px; color:#D9D4F2; line-height:1.55}

/* ================= EXPERIENCE ================= */
.timeline{margin-top:40px; display:flex; flex-direction:column; gap:0}
.tl-item{display:grid; grid-template-columns:170px 1fr; gap:24px; padding:24px 0; border-top:1px solid var(--line)}
.tl-item:last-child{border-bottom:1px solid var(--line)}
.tl-item .role-tag{font-family:var(--mono); font-size:12px; letter-spacing:.08em; text-transform:uppercase; color:var(--purple2); font-weight:700}
.tl-item h3{font-family:var(--disp); font-weight:700; font-size:18px; margin-bottom:6px}
.tl-item p{font-size:14px; color:var(--muted); line-height:1.55; max-width:56ch}
.dark .tl-item{border-top-color:rgba(198,190,234,.25)}
.dark .tl-item:last-child{border-bottom-color:rgba(198,190,234,.25)}
.dark .tl-item .role-tag{color:var(--lilac-soft)}
.dark .tl-item h3{color:#fff}
.dark .tl-item p{color:#D9D4F2}

/* ================= CONTACT ================= */
.close{text-align:center}
.close h2.sec{max-width:none; margin-left:auto; margin-right:auto}
.close p{font-size:clamp(15px,1.7vw,18px); color:var(--muted); max-width:56ch; margin:16px auto 0}
.close-links{margin-top:32px; display:flex; justify-content:center; gap:14px; flex-wrap:wrap}
.close .btn.primary{background:var(--purple); color:#fff}
.close .btn.primary:hover{background:var(--purple2)}

footer{background:#150F38; color:#8E82C4; font-family:var(--mono); font-size:11.5px; text-align:center; padding:26px 20px; letter-spacing:.03em}
footer a{color:#C6BEEA}

@media(max-width:760px){
  .hero-inner{grid-template-columns:1fr; text-align:center}
  .photo-wrap{margin:0 auto}
  .hero-links{justify-content:center}
  .about-grid,.focus-grid{grid-template-columns:1fr}
  .tl-item{grid-template-columns:1fr; gap:6px}
}