:root{
  --ink:#0d0d0b;
  --panel:#15140f;
  --panel-2:#1c1a13;
  --gold:#c9a24b;
  --gold-bright:#e6c579;
  --gold-dim:#8c723a;
  --ivory:#f3eee3;
  --ivory-dim:rgba(243,238,227,.64);
  --ivory-faint:rgba(243,238,227,.34);
  --rule:rgba(201,162,75,.28);

  --font-display:'Fraunces', 'Iowan Old Style', Georgia, serif;
  --font-body:'Archivo', 'Helvetica Neue', Arial, sans-serif;

  --maxw:1180px;
  --spine-w:64px;
  --gap-section: clamp(5rem, 11vw, 8rem);
}

*{box-sizing:border-box;}
html{scroll-behavior:smooth; overflow-x:hidden;}
body{
  margin:0;
  overflow-x:hidden;
  background:var(--ink);
  color:var(--ivory);
  font-family:var(--font-body);
  font-size:16px;
  line-height:1.7;
  -webkit-font-smoothing:antialiased;
}
img{max-width:100%; display:block;}
a{color:inherit; text-decoration:none;}
h1,h2,h3{font-family:var(--font-display); font-weight:600; margin:0; text-wrap:balance;}
p{margin:0;}
button{font-family:inherit;}
:focus-visible{outline:2px solid var(--gold-bright); outline-offset:3px;}

.container{
  max-width:var(--maxw);
  margin:0 auto;
  padding:0 1.75rem;
}
.eyebrow{
  display:flex; align-items:center; gap:.6rem;
  font-size:.72rem; letter-spacing:.22em; text-transform:uppercase;
  color:var(--gold); font-weight:500;
}
.eyebrow::before{
  content:''; width:22px; height:1px; background:var(--gold-dim); display:inline-block;
}

.topbar{
  display:none;
  position:sticky; top:0; z-index:50;
  align-items:center; justify-content:space-between;
  padding:1.1rem 1.25rem;
  background:rgba(13,13,11,.92);
  backdrop-filter:blur(6px);
  border-bottom:1px solid var(--rule);
}
.topbar .brand{
  font-family:var(--font-display); font-size:1.05rem; letter-spacing:.02em;
}
.menu-btn{
  background:none; border:1px solid var(--rule); color:var(--ivory);
  width:40px; height:40px; border-radius:1px; display:grid; place-items:center;
  cursor:pointer;
}
.menu-btn span{display:block; width:16px; height:1px; background:var(--gold); position:relative;}
.menu-btn span::before,.menu-btn span::after{
  content:''; position:absolute; left:0; width:16px; height:1px; background:var(--gold);
}
.menu-btn span::before{top:-5px;}
.menu-btn span::after{top:5px;}

.mobile-nav{
  position:fixed; inset:0; z-index:60;
  background:var(--ink);
  display:flex; flex-direction:column; justify-content:center; gap:1.6rem;
  padding:2rem;
  transform:translateY(-100%);
  transition:transform .45s cubic-bezier(.65,0,.35,1);
}
.mobile-nav.is-open{transform:translateY(0);}
.mobile-nav a{
  font-family:var(--font-display); font-size:2rem; color:var(--ivory);
}
.mobile-nav a span{color:var(--gold-dim); font-size:1rem; margin-right:.6rem;}
.mobile-nav .close-btn{
  position:absolute; top:1.25rem; right:1.25rem;
  background:none; border:1px solid var(--rule); color:var(--gold);
  width:40px; height:40px; cursor:pointer; font-size:1.1rem;
}
.mobile-nav .cta{
  margin-top:1rem; align-self:flex-start;
  border:1px solid var(--gold); padding:.75rem 1.5rem; font-size:1rem;
  font-family:var(--font-body); letter-spacing:.05em; color:var(--gold);
}

.spine{
  position:fixed; left:0; top:0; bottom:0; width:var(--spine-w);
  display:flex; flex-direction:column; align-items:center; justify-content:space-between;
  padding:2rem 0; border-right:1px solid var(--rule); z-index:40;
}
.spine-top{display:flex; flex-direction:column; align-items:center; gap:.85rem;}
.spine-mark{
  writing-mode:vertical-rl; text-orientation:mixed;
  font-family:var(--font-display); letter-spacing:.14em; font-size:.85rem;
  color:var(--ivory);
}
.spine-logo{width:32px; height:32px; object-fit:contain; opacity:.95;}
.spine-dots{
  display:flex; flex-direction:column; align-items:center; gap:1.35rem;
}
.spine-dots a{
  position:relative; width:8px; height:8px; border-radius:50%;
  border:1px solid var(--gold-dim); display:block;
}
.spine-dots a[aria-current="true"]{background:var(--gold); border-color:var(--gold);}
.spine-dots a .tip{
  position:absolute; left:18px; top:50%; transform:translateY(-50%);
  white-space:nowrap; font-size:.68rem; letter-spacing:.12em; text-transform:uppercase;
  color:var(--ivory-dim); opacity:0; transition:opacity .2s ease;
  pointer-events:none;
}
.spine-dots a:hover .tip,.spine-dots a:focus-visible .tip{opacity:1;}
.spine-flags{display:flex; flex-direction:column; align-items:center; gap:.65rem;}
.spine-flags .flag{
  width:22px; height:15px; display:block;
  box-shadow:inset 0 0 0 1px rgba(201,162,75,.35);
}

.shell{margin-left:var(--spine-w);}
main{overflow-x:hidden;}
section{scroll-margin-top:1.5rem;}

.hero{
  padding:clamp(4.5rem,9vw,7rem) 0 clamp(6rem,12vw,9rem);
  border-bottom:1px solid var(--rule);
}
.hero .container{
  display:grid; grid-template-columns:minmax(0,34rem) 1fr; align-items:center; gap:2.5rem;
}
.hero-text{display:grid; gap:1.1rem; min-width:0;}
.hero-text .hero-lede{margin-top:0;}
.hero-portrait{
  min-width:0;
  aspect-ratio:4/5;
  max-width:480px;
  width:100%;
  justify-self:start;
  border:1px solid var(--rule);
  background:var(--panel);
  position:relative;
  overflow:hidden;
}
.hero-portrait img{
  width:100%; height:100%; object-fit:cover; object-position:center 22%;
  filter:grayscale(.12) saturate(.85) contrast(1.06) brightness(.96);
}
.hero-portrait::after{
  content:'';
  position:absolute; inset:0;
  background:linear-gradient(195deg, rgba(201,162,75,.22), rgba(13,13,11,.4) 68%);
  mix-blend-mode:multiply;
  pointer-events:none;
}
.hero-portrait::before{
  content:'';
  position:absolute; inset:0;
  box-shadow:inset 0 0 0 1px rgba(201,162,75,.18);
  pointer-events:none;
  z-index:1;
}
.hero h1{
  font-size:clamp(3.1rem,9vw,6.4rem);
  line-height:.98;
  letter-spacing:-.01em;
}
.hero h1 em{
  font-style:normal; color:var(--gold-bright);
}
.hero-tagline{
  font-family:var(--font-display); font-style:italic; font-size:clamp(1.15rem,2vw,1.5rem);
  color:var(--ivory-dim); max-width:46ch; margin-top:1.1rem; text-wrap:balance;
}
.hero-lede{
  max-width:54ch; color:var(--ivory-dim); font-size:1.05rem; margin-top:.5rem; text-wrap:balance;
}
.hero-actions{display:flex; flex-wrap:wrap; gap:1rem; margin-top:1rem;}
.btn{
  display:inline-flex; align-items:center; gap:.6rem;
  padding:.85rem 1.6rem; font-size:.92rem; letter-spacing:.03em;
  border:1px solid var(--gold); transition:background .2s ease, color .2s ease;
  cursor:pointer; background:none; color:var(--ivory);
}
.btn-solid{background:var(--gold); color:var(--ink); border-color:var(--gold);}
.btn-solid:hover{background:var(--gold-bright); border-color:var(--gold-bright);}
.btn-ghost:hover{background:rgba(201,162,75,.1);}

.band{
  background:var(--gold); color:var(--ink);
  overflow:hidden; white-space:nowrap;
  transform:rotate(-1.1deg) scale(1.02);
  margin:0 0 var(--gap-section);
  position:relative; z-index:5;
}
.band-track{
  display:inline-flex; gap:2.5rem; padding:.85rem 0;
  animation:marquee 32s linear infinite;
}
.band span{
  font-family:var(--font-display); font-style:italic; font-weight:600;
  font-size:1.1rem; letter-spacing:.02em; display:inline-flex; align-items:center; gap:2.5rem;
}
.band span::after{content:'·'; opacity:.55; font-style:normal;}
@keyframes marquee{from{transform:translateX(0);} to{transform:translateX(-50%);}}
@media (prefers-reduced-motion: reduce){
  .band-track{animation:none;}
}

.section{padding:0 0 var(--gap-section);}
.section-head{
  display:flex; align-items:baseline; gap:1rem; margin-bottom:2.75rem;
}
.section-head h2{font-size:clamp(2rem,4vw,2.9rem);}

.about-grid{
  display:grid; grid-template-columns: 1.1fr .9fr; gap:3.5rem;
  align-items:stretch;
}
.about-grid > div{min-width:0;}
.about-grid p + p{margin-top:1.15rem;}
.about-grid p{color:var(--ivory-dim); font-size:1.05rem; max-width:58ch;}
.about-photo{
  width:100%; max-width:100%; min-width:0;
  height:100%; min-height:260px;
  border:1px solid var(--rule);
  background:linear-gradient(165deg, var(--panel), var(--panel-2));
  position:relative; overflow:hidden;
}
.about-photo img{
  position:absolute; inset:0; width:100%; height:100%; object-fit:cover;
  object-position:62% 42%;
  filter:grayscale(.12) saturate(.85) contrast(1.06) brightness(.96);
}
.about-photo::after{
  content:'';
  position:absolute; inset:0;
  background:linear-gradient(195deg, rgba(201,162,75,.22), rgba(13,13,11,.4) 68%);
  mix-blend-mode:multiply; pointer-events:none;
}
.about-photo::before{
  content:''; position:absolute; inset:0;
  box-shadow:inset 0 0 0 1px rgba(201,162,75,.18);
  pointer-events:none; z-index:1;
}
.about-photo .about-caption{
  position:absolute; bottom:1.1rem; left:0; right:0; text-align:center; z-index:1;
  font-size:.68rem; letter-spacing:.16em; text-transform:uppercase; color:var(--ivory-faint);
}

#enfoque{
  background:var(--panel);
  border-top:1px solid var(--rule);
  border-bottom:1px solid var(--rule);
  padding-top:var(--gap-section);
}
#enfoque + .section{padding-top:var(--gap-section);}

#formacion{
  background:var(--panel);
  border-top:1px solid var(--rule);
  border-bottom:1px solid var(--rule);
  padding-top:var(--gap-section);
}
#formacion + .section{padding-top:var(--gap-section);}
.pillars{
  display:grid; grid-template-columns:repeat(3,1fr);
}
.pillar{
  padding:0 2rem 1rem;
  border-left:1px solid var(--rule);
}
.pillar:first-child{border-left:none; padding-left:0;}
.pillar .mark{
  font-family:var(--font-display); font-style:italic; font-size:1.4rem; color:var(--gold-dim);
}
.pillar h3{font-size:1.35rem; margin-top:.9rem;}
.pillar p{color:var(--ivory-dim); margin-top:.75rem; font-size:.98rem;}

.timeline{border-top:1px solid var(--rule);}
.tl-item{
  display:grid; grid-template-columns:180px 1fr; gap:2rem;
  padding:2.1rem 0; border-bottom:1px solid var(--rule);
}
.tl-item .when{
  font-size:.82rem; letter-spacing:.08em; text-transform:uppercase; color:var(--gold);
  padding-top:.3rem;
}
.tl-item h3{font-size:1.4rem;}
.tl-item .role-co{color:var(--ivory-dim); font-size:.95rem; margin-top:.25rem;}
.tl-item .role-co a{
  color:var(--ivory); border-bottom:1px solid var(--rule); padding-bottom:1px;
}
.tl-item .role-co a:hover{color:var(--gold-bright); border-color:var(--gold);}
.tl-item .desc{margin:1rem 0 0; color:var(--ivory-dim); font-size:.95rem;}

.formacion-grid{display:grid; grid-template-columns:1fr 1fr; gap:3.5rem;}
.formacion-label{
  font-size:.75rem; letter-spacing:.16em; text-transform:uppercase;
  color:var(--gold); margin:0 0 1.5rem;
}
.formacion-list{list-style:none; margin:0; padding:0; border-top:1px solid var(--rule);}
.formacion-list li{
  display:flex; flex-direction:column; gap:.3rem;
  padding:1.1rem 0; border-bottom:1px solid var(--rule);
}
.formacion-list .f-title{font-family:var(--font-display); font-size:1.05rem; color:var(--ivory);}
.formacion-list .f-inst{color:var(--ivory-dim); font-size:.9rem;}
.formacion-list a.f-inst{
  border-bottom:1px solid var(--rule); padding-bottom:1px; width:fit-content;
}
.formacion-list a.f-inst:hover{color:var(--gold-bright); border-color:var(--gold);}
.formacion-list .f-place{
  font-size:.72rem; letter-spacing:.1em; text-transform:uppercase; color:var(--gold-dim);
}

.contact-center{
  max-width:640px; margin:0 auto; text-align:center;
  display:flex; flex-direction:column; align-items:center;
}
.contact-center h2{font-size:clamp(2.2rem,4.5vw,3.2rem);}
.contact-lede{color:var(--ivory-dim); max-width:34rem; margin-top:1.25rem; font-size:1.05rem; text-wrap:balance;}
.contact-note{color:var(--ivory-faint); font-size:.92rem; margin-top:.6rem;}
.contact-email{
  font-family:var(--font-display); font-style:italic; font-weight:500;
  font-size:clamp(1.5rem,4vw,2.3rem); color:var(--gold-bright);
  margin-top:2.25rem; border-bottom:1px solid var(--rule); padding-bottom:.4rem;
}
.contact-email:hover{border-color:var(--gold);}
.contact-copy-row{display:flex; align-items:center; gap:.5rem; margin-top:1rem;}
.contact-copy-row button.copy{
  background:none; border:none; color:var(--gold-dim); cursor:pointer;
  font-size:.72rem; letter-spacing:.1em; text-transform:uppercase;
  padding:0; font-family:inherit;
}
.copy-hint{font-size:.78rem; color:var(--gold-bright); opacity:0; transition:opacity .2s;}
.copy-hint.show{opacity:1;}
.contact-meta{
  display:flex; align-items:center; gap:.9rem; margin-top:3rem;
  font-size:.85rem; letter-spacing:.08em; text-transform:uppercase; color:var(--ivory-dim);
}
.contact-meta a:hover{color:var(--gold);}
.contact-meta .dot{color:var(--gold-dim);}

footer{
  border-top:1px solid var(--rule);
  padding:2.5rem 0 3rem;
}
.footer-row{
  display:flex; justify-content:space-between; align-items:baseline; gap:1rem; flex-wrap:wrap;
}
.footer-row .fmark{font-family:var(--font-display); font-style:italic; color:var(--ivory-dim);}
.footer-row .froute{font-size:.78rem; letter-spacing:.14em; text-transform:uppercase; color:var(--gold-dim);}

[data-reveal]{transition:opacity .7s ease, transform .7s ease;}

@media (max-width:900px){
  .spine{display:none;}
  .shell{margin-left:0;}
  .topbar{display:flex;}
  .hero .container{grid-template-columns:1fr; gap:2.5rem;}
  .hero-portrait{max-width:220px; margin:0 auto; order:-1; justify-self:center;}
  .about-grid{grid-template-columns:1fr; gap:2.5rem;}
  .about-photo{height:auto; aspect-ratio:16/10;}
  .pillars{grid-template-columns:1fr; row-gap:2rem;}
  .pillar{border-left:none; padding-left:0; border-top:1px solid var(--rule); padding-top:1.75rem;}
  .pillar:first-child{border-top:none; padding-top:0;}
  .tl-item{grid-template-columns:1fr; gap:.5rem;}
  .formacion-grid{grid-template-columns:1fr; gap:2.5rem;}
}
@media (max-width:520px){
  .hero h1{font-size:clamp(2.6rem,13vw,3.4rem);}
}
