/* ============================================
   HUMANIDAD — Design System
   ============================================ */

@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:ital,wght@0,400;0,500;0,600;0,700;1,400&family=Inter:wght@300;400;500;600;700&display=swap');

:root{
  --bg-dark:      #0b0b0b;
  --bg-dark-2:    #151412;
  --bg-cream:     #f5efe3;
  --bg-cream-2:   #ebe3d2;
  --text-light:   #ffffff;
  --text-muted-l: #b6b1a6;
  --text-dark:    #1c1a17;
  --text-muted-d: #6d675c;
  --gold:         #a9834c;
  --gold-bright:  #c7a468;
  --hairline-l:   rgba(255,255,255,0.13);
  --hairline-d:   rgba(28,26,23,0.12);
  --radius-sm:    4px;
  --radius-md:    10px;
  --maxw:         1280px;
}

*{box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{
  margin:0;
  font-family:'Inter',sans-serif;
  color:var(--text-dark);
  background:var(--bg-cream);
  -webkit-font-smoothing:antialiased;
}
img{max-width:100%;display:block;}
a{color:inherit;text-decoration:none;}
.eyebrow{
  font-family:'Inter',sans-serif;
  font-size:12px;
  font-weight:600;
  letter-spacing:.16em;
  text-transform:uppercase;
  color:var(--gold);
}
h1,h2,h3{
  font-family:'Playfair Display',serif;
  margin:0;
  font-weight:600;
  letter-spacing:.01em;
}
.wrap{max-width:var(--maxw);margin:0 auto;padding:0 48px;}

/* ---------- NAV ---------- */
.nav{
  position:sticky;top:0;z-index:50;
  background:var(--bg-dark);
  border-bottom:1px solid var(--hairline-l);
}
.nav-inner{
  max-width:var(--maxw);margin:0 auto;padding:18px 48px;
  display:flex;align-items:center;justify-content:space-between;
}
.brand{display:flex;align-items:center;gap:12px;color:var(--text-light);}
.brand svg{width:30px;height:30px;flex:none;}
.brand-text{display:flex;flex-direction:column;line-height:1.15;}
.brand-name{font-family:'Playfair Display',serif;font-size:18px;letter-spacing:.18em;font-weight:600;}
.brand-url{font-size:10.5px;letter-spacing:.06em;color:var(--gold);}
.nav-links{display:flex;gap:36px;list-style:none;margin:0;padding:0;}
.nav-links a{
  font-size:12.5px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;
  color:var(--text-muted-l);padding-bottom:4px;border-bottom:1px solid transparent;
  transition:color .2s ease, border-color .2s ease;
}
.nav-links a:hover{color:var(--text-light);}
.nav-links a.active{color:var(--text-light);border-color:var(--gold);}
.btn{
  display:inline-block;
  font-size:12px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;
  padding:13px 26px;border-radius:3px;
  transition:transform .2s ease, box-shadow .2s ease, background .2s ease;
}
.btn-gold{background:var(--gold-bright);color:#1c1812;}
.btn-gold:hover{background:var(--gold);transform:translateY(-1px);}
.btn-outline{border:1px solid var(--hairline-l);color:var(--text-light);}
.btn-outline:hover{border-color:var(--gold);color:var(--gold-bright);}

/* ---------- SECTION (light) ---------- */
.section{padding:96px 0;}
.section.tight{padding:72px 0;}
.section-dark{background:var(--bg-dark);color:var(--text-light);}
.section-alt{background:var(--bg-cream-2);}
.section-head{max-width:640px;margin-bottom:48px;}
.section-head h2{font-size:clamp(30px,4vw,44px);margin-top:14px;line-height:1.1;}
.section-head p{font-size:16px;line-height:1.65;color:var(--text-muted-d);margin-top:18px;}
.section-dark .section-head p{color:var(--text-muted-l);}

/* ---------- CARDS ---------- */
.cards3{display:grid;grid-template-columns:repeat(3,1fr);gap:28px;}
.card{
  background:var(--bg-cream);
  border:1px solid var(--hairline-d);
  border-radius:var(--radius-md);
  padding:34px 28px;
}
.card .ic{width:34px;height:34px;color:var(--gold);margin-bottom:18px;}
.card h3{font-size:17px;font-family:'Inter',sans-serif;font-weight:700;letter-spacing:.02em;text-transform:uppercase;margin-bottom:12px;}
.card p{font-size:14.5px;line-height:1.6;color:var(--text-muted-d);margin:0;}

/* ---------- STATS BAR ---------- */
.statsbar{
  display:flex;justify-content:space-between;align-items:center;
  background:var(--bg-dark);color:var(--text-light);
  border-radius:var(--radius-md);
  padding:30px 44px;margin-top:56px;
}
.statsbar .stat{display:flex;align-items:center;gap:14px;}
.statsbar .stat .num{font-family:'Playfair Display',serif;font-size:30px;color:var(--gold-bright);}
.statsbar .stat .lbl{font-size:11.5px;letter-spacing:.08em;text-transform:uppercase;color:var(--text-muted-l);}

/* ---------- TWO COLUMN ---------- */
.split{display:grid;grid-template-columns:1fr 1fr;gap:64px;align-items:center;}
.split img, .split .ph{border-radius:var(--radius-md);}
.ph{
  aspect-ratio:4/3;width:100%;
  background:linear-gradient(135deg,#3a3327,#1c1812 70%);
  display:flex;align-items:center;justify-content:center;
  color:var(--gold);position:relative;overflow:hidden;
}
.ph::after{
  content:'';position:absolute;inset:0;
  background:repeating-linear-gradient(115deg, rgba(201,163,90,.05) 0 2px, transparent 2px 26px);
}
.lede-block p{font-size:16.5px;line-height:1.8;color:var(--text-muted-d);margin:0 0 18px;}
.section-dark .lede-block p{color:var(--text-muted-l);}

/* ---------- PROJECT LIST ---------- */
.projlist{display:flex;flex-direction:column;gap:20px;}
.projitem{
  display:grid;grid-template-columns:140px 1fr;gap:26px;align-items:center;
  background:var(--bg-cream);border:1px solid var(--hairline-d);border-radius:var(--radius-md);
  padding:18px;
}
.projitem .ph{aspect-ratio:1/1;border-radius:var(--radius-sm);}
.projitem h3{font-size:15px;font-family:'Inter',sans-serif;font-weight:700;letter-spacing:.04em;text-transform:uppercase;margin-bottom:8px;}
.projitem p{font-size:14px;line-height:1.55;color:var(--text-muted-d);margin:0;}

.trio{display:grid;grid-template-columns:repeat(3,1fr);gap:28px;margin-top:56px;}
.trio .item{text-align:center;}
.trio .ic{width:32px;height:32px;color:var(--gold);margin:0 auto 14px;}
.trio h4{font-size:12.5px;letter-spacing:.06em;text-transform:uppercase;font-weight:700;margin-bottom:8px;}
.trio p{font-size:13.5px;color:var(--text-muted-d);margin:0;line-height:1.5;}

/* ---------- NEWSLETTER ---------- */
.newsletter{
  background:var(--bg-dark);color:var(--text-light);
  text-align:center;padding:120px 0;
}
.newsletter .eyebrow{display:none;}
.newsletter h2{font-size:clamp(32px,5vw,48px);}
.newsletter p{font-size:16px;color:var(--text-muted-l);max-width:480px;margin:18px auto 38px;line-height:1.6;}
.nl-form{display:flex;justify-content:center;gap:10px;max-width:460px;margin:0 auto;}
.nl-form input{
  flex:1;padding:14px 18px;border-radius:3px;border:1px solid var(--hairline-l);
  background:rgba(246,242,232,.04);color:var(--text-light);font-size:14px;font-family:inherit;
}
.nl-form input::placeholder{color:var(--text-muted-l);}
.nl-note{margin-top:16px;font-size:12px;color:var(--text-muted-l);display:flex;gap:6px;justify-content:center;align-items:center;}

/* ---------- FOOTER (legacy full) ---------- */
.footer{background:var(--bg-dark);color:var(--text-muted-l);border-top:1px solid var(--hairline-l);padding:56px 0 28px;}
.footer-top{display:grid;grid-template-columns:1.4fr 1fr 1fr 1fr;gap:40px;padding-bottom:40px;border-bottom:1px solid var(--hairline-l);}
.footer .brand{margin-bottom:14px;}
.footer-top p{font-size:13.5px;line-height:1.6;max-width:260px;}
.footer-col h5{font-size:11.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--text-light);margin:0 0 16px;}
.footer-col ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:10px;}
.footer-col a{font-size:13.5px;color:var(--text-muted-l);}
.footer-col a:hover{color:var(--gold-bright);}
.footer-bottom{display:flex;justify-content:space-between;align-items:center;padding-top:24px;font-size:12.5px;}
.socials{display:flex;gap:14px;}
.socials a{width:30px;height:30px;border:1px solid var(--hairline-l);border-radius:50%;display:flex;align-items:center;justify-content:center;}
.socials svg{width:14px;height:14px;}

/* ---------- ARBOL FAMILIAR PAGE ---------- */
.tree-layout{
  padding:48px 0;
  background:var(--bg-cream-2);
}
.tree-side h2{font-size:32px;line-height:1.1;}
.tree-side p.lede{font-size:14.5px;color:var(--text-muted-d);line-height:1.6;margin:16px 0 28px;}
.statlist{display:flex;flex-direction:column;gap:18px;}
.statitem{display:flex;align-items:center;gap:12px;background:var(--bg-cream);border:1px solid var(--hairline-d);border-radius:var(--radius-sm);padding:12px 14px;}
.statitem .ic{width:20px;height:20px;color:var(--gold);flex:none;}
.statitem .num{font-family:'Playfair Display',serif;font-size:18px;line-height:1;}
.statitem .lbl{font-size:11px;color:var(--text-muted-d);}

.tree-canvas{
  background:var(--bg-cream);
  border:1px solid var(--hairline-d);
  border-radius:var(--radius-md);
  padding:36px 20px 24px;
  position:relative;
  overflow-x:auto;
}
.gen-row{position:relative;display:flex;justify-content:center;gap:38px;margin-bottom:52px;}
.gen-row::before{
  content:attr(data-label);
  position:absolute;left:-2px;top:50%;transform:translateY(-50%) rotate(0deg);
  writing-mode:vertical-rl;
  font-size:10px;letter-spacing:.1em;text-transform:uppercase;color:var(--gold);font-weight:700;
}
.person{display:flex;flex-direction:column;align-items:center;width:92px;text-align:center;}
.avatar{
  width:64px;height:64px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  font-family:'Playfair Display',serif;font-size:18px;color:#fff;
  border:2px solid var(--gold-bright);
  background:linear-gradient(135deg,#b08d57,#6e5732);
  margin-bottom:8px;
}
.person.root .avatar{border-color:var(--gold);box-shadow:0 0 0 4px rgba(201,163,90,.18);}
.person .pname{font-size:11.5px;font-weight:700;line-height:1.25;}
.person .pyear{font-size:10px;color:var(--text-muted-d);}
.gen-connector{display:flex;justify-content:center;margin:-30px 0 22px;color:var(--hairline-d);}

.timeline{display:flex;flex-direction:column;gap:0;}
.tl-item{display:grid;grid-template-columns:42px 1fr;gap:12px;padding:10px 0;border-left:1px solid var(--hairline-l);margin-left:6px;padding-left:18px;position:relative;}
.tl-item::before{content:'';position:absolute;left:-4px;top:14px;width:7px;height:7px;border-radius:50%;background:var(--gold);}
.tl-year{font-family:'Playfair Display',serif;font-size:13px;color:var(--gold-bright);}
.tl-text{font-size:12.5px;line-height:1.4;color:var(--text-muted-l);}
.side-panel{background:var(--bg-dark);color:var(--text-light);border-radius:var(--radius-md);padding:24px;margin-bottom:24px;}
.side-panel h5{font-size:11.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--gold);margin:0 0 18px;}
.maplist{display:flex;flex-direction:column;gap:14px;}
.maplist .mi{display:flex;gap:10px;align-items:flex-start;}
.maplist .dot{width:8px;height:8px;border-radius:50%;background:var(--gold);margin-top:5px;flex:none;}
.maplist .mt strong{font-size:13px;display:block;}
.maplist .mt span{font-size:11.5px;color:var(--text-muted-l);}

.stories-strip{background:var(--bg-dark);padding:48px 0 60px;}
.stories-head{display:flex;justify-content:space-between;align-items:flex-end;margin-bottom:30px;color:var(--text-light);}
.stories-head p{font-size:13.5px;color:var(--text-muted-l);margin-top:8px;max-width:340px;}
.stories-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:22px;}
.story-card{border-radius:var(--radius-md);overflow:hidden;background:var(--bg-dark-2);border:1px solid var(--hairline-l);}
.story-card .ph{aspect-ratio:16/10;border-radius:0;}
.story-card .sc-body{padding:18px 18px 22px;}
.story-card h4{font-family:'Playfair Display',serif;font-size:16px;color:var(--text-light);margin-bottom:6px;}
.story-card .by{font-size:11px;color:var(--gold-bright);letter-spacing:.04em;margin-bottom:10px;}
.story-card p{font-size:12.5px;line-height:1.5;color:var(--text-muted-l);margin:0;}

/* ---------- RESPONSIVE ---------- */
@media (max-width:1080px){
  .features-grid{grid-template-columns:repeat(3,1fr);}
  .cards3,.trio,.stories-grid{grid-template-columns:repeat(2,1fr);}
  .split{grid-template-columns:1fr;}
  .tree-layout .wrap{grid-template-columns:1fr;}
  .footer-top{grid-template-columns:1fr 1fr;}
}
@media (max-width:980px){
  .nav-links{display:none;}
}
@media (max-width:680px){
  .wrap{padding:0 22px;}
  .nav-inner{padding:16px 22px;}
  .cards3,.trio,.stories-grid{grid-template-columns:1fr;}
  .statsbar{flex-direction:column;gap:18px;align-items:flex-start;}
  .footer-top{grid-template-columns:1fr;}
}

/* focus visibility */
a:focus-visible,button:focus-visible,input:focus-visible{outline:2px solid var(--gold-bright);outline-offset:2px;}
@media (prefers-reduced-motion:reduce){*{transition:none!important;}}