:root{
  --ink:#141414; --paper:#F3EFE8; --muted:#4A4640; --rule:#CFC8BC;
  --gold:#B08D57; --gold-text:#7A5F33;
  --verde:#2B3A33; --azul:#2E3B4E; --terracota:#5A3E36; --oliva:#3F4B3A;
}
*,*::before,*::after{box-sizing:border-box}
html,body{margin:0}
body{font-family:'Libre Franklin',system-ui,sans-serif;color:var(--ink);background:var(--paper);line-height:1.5;-webkit-font-smoothing:antialiased}
a{color:inherit}
:focus-visible{outline:2px solid var(--gold);outline-offset:3px}
.skip{position:absolute;left:-9999px;top:0;background:var(--ink);color:var(--paper);padding:12px 16px;z-index:10}
.skip:focus{left:16px;top:16px}
.light{font-weight:300}

/* Header */
.top{background:var(--ink);color:var(--paper);padding:0 40px;min-height:72px;display:flex;flex-wrap:wrap;gap:8px 24px;align-items:center;justify-content:space-between}
.brand{display:flex;align-items:baseline;gap:12px;text-decoration:none;padding:12px 0}
.brand__name{font-size:17px;letter-spacing:.18em;text-transform:uppercase}
.brand__sub{font-size:11px;letter-spacing:.18em;text-transform:uppercase;color:#A9A39A}
.nav{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:4px 28px}
.nav a{display:block;padding:14px 0 12px;font-size:12px;letter-spacing:.16em;text-transform:uppercase;text-decoration:none;color:#A9A39A;border-bottom:2px solid transparent}
.nav a:hover{color:var(--paper)}
.nav a[aria-current="true"]{color:var(--paper);border-bottom-color:var(--gold)}

/* Panels */
.panel{display:flex;flex-wrap:wrap;min-height:100%}
.panel__text{flex:1.25 1 480px;padding:56px 64px;display:flex;flex-direction:column;justify-content:center;gap:24px}
.panel__media{flex:1 1 420px;min-height:420px;position:relative;display:flex;align-items:flex-end;justify-content:center;overflow:hidden}
.media--verde{background:var(--verde)} .media--azul{background:var(--azul)}
.media--terracota{background:var(--terracota)} .media--oliva{background:var(--oliva)}
.media__label{position:absolute;top:28px;left:32px;font-size:11px;letter-spacing:.18em;text-transform:uppercase;color:#D6D0C4}
.media__num{position:absolute;bottom:20px;left:32px;font-size:96px;font-weight:700;line-height:1;color:var(--gold)}
.media__svg{display:block;width:92%;height:auto}
.media__svg--one{width:68%}
.panel__media img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}

.kicker{margin:0;font-size:12px;letter-spacing:.2em;text-transform:uppercase;color:var(--gold-text)}
.big{margin:0;font-size:clamp(48px,6.5vw,88px);line-height:.95;letter-spacing:-.03em;font-weight:400}
.big strong{font-weight:700}
.lead{margin:0;max-width:460px;font-size:18px;color:var(--muted)}

.team{list-style:none;margin:8px 0 0;padding:0;display:flex;flex-wrap:wrap;border-top:1px solid var(--ink)}
.team li{flex:1 1 160px}
.team li+li a{border-left:1px solid var(--rule);padding-left:16px}
.team a{display:flex;flex-direction:column;gap:4px;padding:18px 16px 6px 0;text-decoration:none}
.team__name{font-size:17px;font-weight:600}
.team__more{font-size:13px;color:var(--muted)}
.team a:hover .team__more{color:var(--gold-text)}

.meta{margin:0;display:flex;flex-wrap:wrap;border-top:1px solid var(--ink);border-bottom:1px solid var(--rule);font-size:14px}
.meta div{flex:1 1 180px;display:flex;gap:6px;padding:14px 0}
.meta dt{color:var(--muted)} .meta dt::after{content:":"} .meta dd{margin:0}
.quote{margin:0;max-width:520px;font-size:21px;font-style:italic;font-weight:300;line-height:1.5}

.rows{margin:0;max-width:520px;border-top:1px solid var(--ink);font-size:16px}
.rows div{display:flex;justify-content:space-between;gap:16px;padding:16px 0;border-bottom:1px solid var(--rule)}
.rows dt{color:var(--muted)} .rows dd{margin:0;text-align:right}

.actions{display:flex;flex-wrap:wrap;gap:20px;align-items:center;padding-top:8px}
.btn{background:var(--ink);color:var(--paper);text-decoration:none;font-size:14px;font-weight:600;letter-spacing:.06em;padding:16px 26px}
.btn:hover{background:#2A2A2A;color:var(--paper)}
.link{text-decoration:none;border-bottom:1px solid var(--gold);padding:12px 0;font-size:14px}
.link:hover{color:var(--gold-text)}

/* Footer bar */
.bar{background:var(--paper);border-top:1px solid var(--rule);padding:0 40px;min-height:60px;display:flex;flex-wrap:wrap;gap:12px;align-items:center;justify-content:space-between}
.bar__count{margin:0;font-size:13px;letter-spacing:.14em;text-transform:uppercase;color:var(--muted)}
.bar__count strong{color:var(--ink);margin-right:10px}
.bar__arrows{display:flex;gap:8px}
.arrow{width:44px;height:44px;border:1px solid var(--ink);display:flex;align-items:center;justify-content:center;color:var(--ink)}
.arrow svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:1.6}
.arrow--dark{background:var(--ink);color:var(--paper)}

/* Sin JS: todo se ve como una página con scroll y la barra no hace falta */
.no-js .bar{display:none}

/* Con JS: pantallas fijas, sin scroll */
.js body{height:100vh;height:100dvh;display:flex;flex-direction:column;overflow:hidden}
.js .top,.js .bar{flex:0 0 auto}
.js main{flex:1 1 auto;min-height:0;overflow-y:auto}
.js .panel[hidden]{display:none}

@media (max-width:820px){
  .top,.bar{padding:0 20px}
  .brand__sub{display:none}
  .nav{gap:0 18px}
  .nav a{font-size:11px;padding:10px 0}
  .panel__text{padding:36px 20px}
  .panel__media{min-height:280px}
  .panel--person .panel__media{order:-1}
  .media__num{font-size:64px}
}
@media (prefers-reduced-motion:no-preference){
  .js .panel:not([hidden]){animation:in .35s ease-out}
  @keyframes in{from{opacity:0}to{opacity:1}}
}