/* ---------------------------------------------------------
   TOKENS
--------------------------------------------------------- */
:root{
  --ink:        #17150F;
  --ink-soft:   #3A362C;
  --paper:      #E6E2D3;
  --paper-2:    #DAD5C1;
  --paper-3:    #CFC9B2;
  --line:       #B9B29A;
  --clay:       #A0431E;
  --clay-soft:  #C97C55;
  --moss:       #545C43;

  --bg:         var(--paper);
  --bg-raised:  var(--paper-2);
  --bg-sunken:  var(--paper-3);
  --fg:         var(--ink);
  --fg-muted:   var(--ink-soft);
  --border:     var(--line);
  --accent:     var(--clay);
  --accent-fg:  #F6F1E4;
  --accent-soft:var(--clay-soft);
  --logo-filter: none;

  --display: "Poppins", "Arial Black", sans-serif;
  --body:    "Source Serif 4", Georgia, "Times New Roman", serif;
  --mono:    "IBM Plex Mono", "Courier New", monospace;
}

@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --ink:        #EDE8D8;
    --ink-soft:   #C7C0AA;
    --paper:      #171510;
    --paper-2:    #201D16;
    --paper-3:    #2A261C;
    --line:       #45402F;
    --clay:       #E08A54;
    --clay-soft:  #C97C55;
    --moss:       #9BA684;

    --bg:         var(--paper);
    --bg-raised:  var(--paper-2);
    --bg-sunken:  var(--paper-3);
    --fg:         var(--ink);
    --fg-muted:   var(--ink-soft);
    --border:     var(--line);
    --accent:     var(--clay);
    --accent-fg:  #171510;
    --logo-filter: invert(1);
  }
}
:root[data-theme="dark"]{
  --ink:        #EDE8D8;
  --ink-soft:   #C7C0AA;
  --paper:      #171510;
  --paper-2:    #201D16;
  --paper-3:    #2A261C;
  --line:       #45402F;
  --clay:       #E08A54;
  --clay-soft:  #C97C55;
  --moss:       #9BA684;

  --bg:         var(--paper);
  --bg-raised:  var(--paper-2);
  --bg-sunken:  var(--paper-3);
  --fg:         var(--ink);
  --fg-muted:   var(--ink-soft);
  --border:     var(--line);
  --accent:     var(--clay);
  --accent-fg:  #171510;
  --logo-filter: invert(1);
}

/* ---------------------------------------------------------
   RESET-ish
--------------------------------------------------------- */
*,*::before,*::after{ box-sizing:border-box; }
html{ scroll-behavior:smooth; }
@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior:auto; }
  *,*::before,*::after{ animation-duration:0.01ms !important; animation-iteration-count:1 !important; transition-duration:0.01ms !important; }
}
body{
  margin:0;
  background:var(--bg);
  color:var(--fg);
  font-family:var(--body);
  font-size:17px;
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
img{ max-width:100%; display:block; }
a{ color:inherit; }
h1,h2,h3{ font-family:var(--display); text-wrap:balance; margin:0; }
p{ margin:0; }
.wrap{ max-width:1180px; margin:0 auto; padding-inline:clamp(20px,5vw,64px); }
section{ position:relative; }

::selection{ background:var(--accent); color:var(--accent-fg); }

a:focus-visible, button:focus-visible{
  outline:2px solid var(--accent);
  outline-offset:3px;
}

/* ---------------------------------------------------------
   TYPE SCALE
--------------------------------------------------------- */
.eyebrow{
  font-family:var(--mono);
  font-size:12.5px;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:var(--fg-muted);
  display:flex;
  align-items:center;
  gap:.6em;
}
.eyebrow::before{
  content:"";
  width:.85em; height:.85em;
  border:1.4px solid var(--accent);
  border-radius:50%;
  flex:none;
}
.h-xl{ font-weight:900; font-size:clamp(2.6rem,7vw,5.6rem); line-height:.98; letter-spacing:-.01em; }
.h-lg{ font-weight:800; font-size:clamp(2rem,4.6vw,3.1rem); line-height:1.04; letter-spacing:-.01em; }
.h-md{ font-weight:800; font-size:clamp(1.3rem,2.4vw,1.7rem); line-height:1.15; }
.lede{ font-size:clamp(1.05rem,2vw,1.28rem); line-height:1.55; color:var(--fg-muted); max-width:42em; }
.prose{ max-width:38em; }
.prose p + p{ margin-top:1.1em; }
.num{ font-variant-numeric:tabular-nums; }

/* ---------------------------------------------------------
   TOPO BACKGROUND (generative contour lines)
--------------------------------------------------------- */
.topo{
  position:absolute; inset:0;
  pointer-events:none;
  opacity:.55;
  mix-blend-mode:multiply;
}
.topo svg{ width:100%; height:100%; }
.topo path, .topo ellipse{ fill:none; stroke:var(--border); stroke-width:1; }

/* ---------------------------------------------------------
   NAV
--------------------------------------------------------- */
header{
  position:sticky; top:0; z-index:40;
  background:color-mix(in srgb, var(--bg) 88%, transparent);
  backdrop-filter:blur(8px);
  border-bottom:1px solid var(--border);
}
.nav{
  display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between;
  padding-block:14px;
  gap:12px;
}
.nav-mark{ height:20px; width:auto; flex:none; filter:var(--logo-filter); }
.nav-mark img{ height:100%; width:auto; }
.nav-links{
  display:flex; gap:clamp(14px,2.4vw,30px);
  list-style:none; margin:0; padding:0;
  font-family:var(--mono); font-size:12.5px; letter-spacing:.06em; text-transform:uppercase;
}
.nav-links li{ flex:none; }
.nav-links a{
  text-decoration:none; color:var(--fg-muted);
  padding-block:4px; border-bottom:1px solid transparent;
  transition:color .15s ease, border-color .15s ease;
  white-space:nowrap;
}
.nav-links a:hover{ color:var(--fg); border-color:var(--accent); }
.nav-links a[aria-current="page"]{ color:var(--accent); }

.lang-switch{
  display:flex; align-items:center; gap:2px;
  flex:none;
  font-family:var(--mono); font-size:11.5px; letter-spacing:.05em;
  border:1px solid var(--border);
}
.lang-switch button{
  all:unset;
  cursor:pointer;
  padding:5px 8px;
  color:var(--fg-muted);
  transition:background .15s ease, color .15s ease;
}
.lang-switch button + button{ border-left:1px solid var(--border); }
.lang-switch button:hover{ color:var(--fg); }
.lang-switch button[aria-pressed="true"]{ background:var(--ink); color:var(--bg); }

.nav-toggle{
  all:unset;
  display:none;
  flex:none;
  width:32px; height:32px;
  cursor:pointer;
  flex-direction:column; align-items:center; justify-content:center; gap:5px;
}
.nav-toggle span{
  display:block; width:20px; height:1.6px; background:var(--fg);
  transition:transform .2s ease, opacity .2s ease;
}
.nav-toggle[aria-expanded="true"] span:nth-child(1){ transform:translateY(6.6px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] span:nth-child(2){ opacity:0; }
.nav-toggle[aria-expanded="true"] span:nth-child(3){ transform:translateY(-6.6px) rotate(-45deg); }

@media (max-width: 720px){
  .nav-toggle{ display:flex; order:1; margin-left:auto; }
  .lang-switch{ order:2; }
  .nav-links{
    order:3;
    flex-basis:100%;
    flex-direction:column;
    gap:0;
    max-height:0;
    overflow:hidden;
    transition:max-height .25s ease;
  }
  .nav-links.is-open{ max-height:320px; padding-top:8px; }
  .nav-links li{ border-top:1px solid var(--border); }
  .nav-links a{ display:block; padding-block:12px; }
  .lang-switch{ font-size:10.5px; }
  .lang-switch button{ padding:4px 6px; }
}

/* ---------------------------------------------------------
   HERO
--------------------------------------------------------- */
.hero{
  padding-block:clamp(56px,11vw,116px) clamp(48px,8vw,88px);
  overflow:hidden;
}
.hero-grid{
  position:relative; z-index:1;
  display:grid; gap:28px;
}
.hero-logo{
  width:min(100%,720px);
  filter:var(--logo-filter);
}
.hero-tagline{
  font-family:var(--mono);
  font-size:clamp(13px,1.6vw,15px);
  letter-spacing:.1em;
  text-transform:uppercase;
  color:var(--fg-muted);
  padding-top:6px;
  border-top:1px solid var(--border);
  max-width:560px;
}
.hero-headline{
  font-family:var(--display);
  font-weight:800;
  font-size:clamp(1.3rem,2.6vw,1.85rem);
  line-height:1.28;
  color:var(--fg);
  max-width:34em;
  margin-top:24px;
  text-wrap:balance;
}
.hero-foot{
  margin-top:clamp(20px,4vw,36px);
  display:flex; flex-wrap:wrap; gap:24px 40px;
  align-items:flex-end; justify-content:space-between;
}
.hero-lede{ max-width:34em; }
.btn{
  font-family:var(--mono);
  font-size:13px; letter-spacing:.08em; text-transform:uppercase;
  display:inline-flex; align-items:center; gap:10px;
  background:var(--ink); color:var(--bg);
  padding:13px 22px;
  text-decoration:none;
  border:1px solid var(--ink);
  white-space:nowrap;
  transition:transform .15s ease, background .15s ease, color .15s ease;
}
.btn:hover{ background:var(--accent); border-color:var(--accent); color:var(--accent-fg); transform:translateY(-1px); }

.cta-pills{
  display:flex; flex-wrap:wrap; gap:10px;
  margin-top:clamp(22px,4vw,34px);
}
.pill{
  font-family:var(--mono);
  font-size:12.5px; letter-spacing:.06em; text-transform:uppercase;
  padding:11px 20px;
  border:1px solid var(--border);
  border-radius:999px;
  text-decoration:none;
  color:var(--fg);
  background:var(--bg);
  white-space:nowrap;
  transition:background .15s ease, border-color .15s ease, color .15s ease, transform .15s ease;
}
.pill:hover{ border-color:var(--accent); color:var(--accent); transform:translateY(-1px); }
.pill-primary{ background:var(--ink); color:var(--bg); border-color:var(--ink); }
.pill-primary:hover{ background:var(--accent); border-color:var(--accent); color:var(--accent-fg); }

/* ---------------------------------------------------------
   PAGE HEADER (for subpages without the full hero)
--------------------------------------------------------- */
.page-head{
  padding-block:clamp(48px,9vw,88px) clamp(28px,5vw,44px);
}
.page-head .h-xl{ margin-top:14px; max-width:14em; }

/* ---------------------------------------------------------
   SECTION SHELL
--------------------------------------------------------- */
.band{ padding-block:clamp(52px,9vw,100px); border-top:1px solid var(--border); background:var(--bg); }
main > .band:first-child{ border-top:none; padding-top:clamp(40px,7vw,64px); }
.band-tint{ background:var(--bg-raised); }
.band-head{
  display:grid; grid-template-columns:minmax(0,1fr); gap:14px;
  margin-bottom:clamp(30px,5vw,56px);
}
.band-head .h-lg{ max-width:16em; }

@media (min-width: 900px){
  .band-split{
    display:grid; grid-template-columns:minmax(180px,260px) 1fr; gap:clamp(28px,5vw,72px);
  }
}

/* ---------------------------------------------------------
   CASOS
--------------------------------------------------------- */
.case-grid{
  display:grid; gap:1px;
  background:var(--border);
  border:1px solid var(--border);
  grid-template-columns:1fr;
}
@media (min-width: 800px){
  .case-grid{ grid-template-columns:repeat(3,1fr); }
}
.case-card{
  background:var(--bg);
  padding:clamp(24px,3vw,32px);
  display:flex; flex-direction:column; gap:12px;
}
.case-tag{
  font-family:var(--mono); font-size:11.5px; letter-spacing:.1em;
  color:var(--accent); text-transform:uppercase;
}
.case-date{
  font-family:var(--mono); font-size:11.5px;
  color:var(--fg-muted);
  margin-top:-8px;
}
.case-card h3{ font-size:1.06rem; font-weight:800; line-height:1.25; }
.case-card p{ color:var(--fg-muted); font-size:.93rem; line-height:1.55; }
.case-client{
  font-family:var(--mono); font-size:11.5px;
  color:var(--fg-muted);
  padding-top:12px; margin-top:auto;
  border-top:1px dashed var(--border);
}

/* ---------------------------------------------------------
   MANIFESTO
--------------------------------------------------------- */
.pull{
  font-family:var(--display);
  font-weight:800;
  font-size:clamp(1.5rem,3.4vw,2.3rem);
  line-height:1.16;
  letter-spacing:-.005em;
  color:var(--fg);
  margin-block:clamp(30px,5vw,50px);
  padding-left:clamp(18px,3vw,28px);
  border-left:3px solid var(--accent);
  text-wrap:balance;
}

/* ---------------------------------------------------------
   ENFOQUE GRID
--------------------------------------------------------- */
.foco-grid{
  display:grid; gap:1px;
  background:var(--border);
  border:1px solid var(--border);
  grid-template-columns:1fr;
}
@media (min-width: 640px){
  .foco-grid{ grid-template-columns:repeat(2,1fr); }
}
@media (min-width: 1000px){
  .foco-grid{ grid-template-columns:repeat(3,1fr); }
}
.foco-item{
  background:var(--bg);
  padding:clamp(22px,3vw,30px);
  display:flex; flex-direction:column; gap:12px;
}
.foco-tag{
  font-family:var(--mono); font-size:11.5px; letter-spacing:.1em;
  color:var(--accent); text-transform:uppercase;
}
.foco-item h3{ font-size:1.06rem; font-weight:800; }
.foco-item p{ color:var(--fg-muted); font-size:.95rem; line-height:1.55; }

/* ---------------------------------------------------------
   LIDER
--------------------------------------------------------- */
.lider-photo{
  width:100%;
  aspect-ratio:4 / 5;
  object-fit:cover;
  border:1px solid var(--border);
  filter:grayscale(.15) contrast(1.02);
}
.lider-facts{
  display:grid; gap:14px;
  font-family:var(--mono); font-size:13px;
  color:var(--fg-muted);
  padding-top:18px; margin-top:18px;
  border-top:1px solid var(--border);
}
.lider-facts dt{ color:var(--fg); text-transform:uppercase; letter-spacing:.08em; font-size:11px; margin-bottom:3px;}
.lider-facts dd{ margin:0; }
.lider-facts > div + div{ padding-top:14px; border-top:1px dashed var(--border); }

.cv-btn{ margin-top:18px; width:100%; justify-content:center; }

.tl-label{
  font-family:var(--mono); font-size:11.5px; letter-spacing:.1em; text-transform:uppercase;
  color:var(--accent);
  margin-top:34px; margin-bottom:4px;
}

.timeline{ list-style:none; margin:0; padding:0; }
.timeline li{
  display:grid; grid-template-columns:6.5em 1fr; gap:18px;
  padding-block:16px;
  border-top:1px solid var(--border);
}
.timeline li:last-child{ border-bottom:1px solid var(--border); }
.timeline time{
  font-family:var(--mono); font-size:12.5px; color:var(--accent);
  padding-top:.15em;
}
.timeline h4{ font-family:var(--display); font-weight:800; font-size:1rem; margin:0 0 4px; }
.timeline p{ color:var(--fg-muted); font-size:.93rem; }

/* ---------------------------------------------------------
   INSTITUCIONES
--------------------------------------------------------- */
.org-list{
  display:flex; flex-wrap:wrap; gap:0;
  border-top:1px solid var(--border);
}
.org-list span{
  font-family:var(--display); font-weight:600;
  font-size:clamp(.95rem,1.6vw,1.15rem);
  padding:16px clamp(16px,2.4vw,26px);
  border-bottom:1px solid var(--border);
  border-right:1px solid var(--border);
  color:var(--fg-muted);
  flex:1 1 auto;
  white-space:nowrap;
}

/* ---------------------------------------------------------
   PUBLICACIONES
--------------------------------------------------------- */
.pub-list{ list-style:none; margin:0; padding:0; }
.pub-list li{
  padding-block:18px;
  border-top:1px solid var(--border);
  display:grid; gap:6px;
}
.pub-list li:last-child{ border-bottom:1px solid var(--border); }
.pub-list .pub-year{ font-family:var(--mono); font-size:12px; color:var(--accent); }
.pub-list .pub-title{ font-family:var(--body); font-style:italic; font-size:1rem; }
.pub-list .pub-src{ font-family:var(--mono); font-size:12px; color:var(--fg-muted); }

/* ---------------------------------------------------------
   CONTACT / FOOTER
--------------------------------------------------------- */
.contact{
  background:var(--ink);
  color:var(--bg);
  padding-block:clamp(56px,10vw,110px);
}
.contact .eyebrow{ color:color-mix(in srgb, var(--bg) 65%, transparent); }
.contact .eyebrow::before{ border-color:var(--accent); }
.contact-title{
  font-family:var(--display); font-weight:900;
  font-size:clamp(2.1rem,6vw,4rem); line-height:1;
  margin-top:14px; text-wrap:balance;
}
.contact-grid{
  margin-top:clamp(32px,6vw,56px);
  display:grid; gap:28px;
}
@media (min-width:760px){
  .contact-grid{ grid-template-columns:1fr 1fr auto; align-items:end; }
}
.contact-line{
  display:block; font-family:var(--mono); font-size:clamp(1rem,2.4vw,1.3rem);
  text-decoration:none; border-bottom:1px solid color-mix(in srgb, var(--bg) 30%, transparent);
  padding-bottom:10px; width:fit-content;
  transition:border-color .15s ease, color .15s ease;
}
.contact-line:hover{ color:var(--accent); border-color:var(--accent); }
.contact-label{ font-family:var(--mono); font-size:11px; letter-spacing:.1em; text-transform:uppercase; color:color-mix(in srgb, var(--bg) 55%, transparent); margin-bottom:8px; }
.footer-bottom{
  margin-top:clamp(48px,8vw,80px);
  padding-top:22px;
  border-top:1px solid color-mix(in srgb, var(--bg) 22%, transparent);
  display:flex; flex-wrap:wrap; gap:14px 24px; justify-content:space-between; align-items:center;
  font-family:var(--mono); font-size:12px; color:color-mix(in srgb, var(--bg) 55%, transparent);
}
.footer-mark{ height:16px; filter:brightness(0) invert(1); opacity:.85; }

/* ---------------------------------------------------------
   SITE FOOTER (slim, on non-contact pages)
--------------------------------------------------------- */
.site-footer{
  background:var(--ink);
  color:var(--bg);
  padding-block:26px;
}
.footer-row{
  display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between;
  gap:14px 24px;
  font-family:var(--mono); font-size:12px;
  color:color-mix(in srgb, var(--bg) 65%, transparent);
}
.footer-row .footer-mark{ height:16px; opacity:.9; }
.footer-row a{
  color:color-mix(in srgb, var(--bg) 85%, transparent);
  text-decoration:none;
  border-bottom:1px solid color-mix(in srgb, var(--bg) 30%, transparent);
}
.footer-row a:hover{ color:var(--accent); border-color:var(--accent); }