:root{
  --ink:#14243F;
  --ink-soft:#4E5D78;
  --blue:#2674D9;
  --blue-deep:#1B5198;
  --blue-pale:#B1CDF1;
  --gold:#986E1B;
  --paper:#FFFFFF;
  --paper-alt:#F4F7FB;
  --rule:#DBE3F0;
  --sans:"Montserrat", "Segoe UI", system-ui, sans-serif;
  --serif:"Source Serif 4", Georgia, "Times New Roman", serif;
  --measure:38rem;
  --pad:clamp(1.25rem, 5vw, 4.5rem);
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
section{scroll-margin-top:4.5rem}
body{
  margin:0;
  background:var(--paper);
  color:var(--ink);
  font-family:var(--serif);
  font-size:clamp(1rem,0.96rem + 0.2vw,1.125rem);
  line-height:1.65;
  -webkit-font-smoothing:antialiased;
}
h1,h2,h3,nav,.ui{font-family:var(--sans)}
a{color:var(--blue-deep)}
:focus-visible{outline:2px solid var(--blue-deep);outline-offset:3px;border-radius:2px}

.wrap{max-width:66rem;margin-inline:auto;padding-inline:var(--pad)}
.skip{position:absolute;left:-999px}
.skip:focus{left:1rem;top:1rem;background:var(--ink);color:#fff;padding:.6rem 1rem;z-index:20}

/* ---------- header ---------- */
.site-head{
  position:sticky;top:0;z-index:10;
  background:var(--paper);
  border-bottom:2px solid var(--blue);
  transition:box-shadow .2s ease;
}
.site-head.scrolled{box-shadow:0 1px 0 rgba(20,36,63,.06),0 6px 16px -10px rgba(20,36,63,.25)}
.site-head .wrap{display:flex;align-items:center;justify-content:space-between;gap:1.5rem;min-height:4.5rem}
.brand{display:inline-flex;align-items:center;gap:.7rem;text-decoration:none;color:var(--ink)}
.brand svg{height:1.45rem;width:auto;display:block;color:var(--blue)}
.brand span{
  font-family:var(--sans);font-weight:600;font-size:1.28rem;
  letter-spacing:.005em;color:var(--blue);line-height:1;
}
.site-nav{display:flex;gap:1.75rem;font-size:.9rem;font-weight:500}
.site-nav a{white-space:nowrap;color:var(--ink);text-decoration:none;padding-block:.35rem;border-bottom:2px solid transparent}
.site-nav a:hover,.site-nav a.active{color:var(--blue-deep);border-bottom-color:var(--blue)}
@media (max-width:44rem){
  .site-nav{gap:1rem;font-size:.8rem}
  .site-head .wrap{min-height:3.9rem;gap:.75rem}
  .brand span{font-size:1.12rem}
  .brand svg{height:1.25rem}
}
@media (max-width:34rem){
  .site-head .wrap{flex-wrap:wrap;min-height:0;padding-block:.65rem;row-gap:.35rem}
  .site-nav{flex:0 0 100%;gap:1.15rem;font-size:.78rem}
  section{scroll-margin-top:5.4rem}
}

/* ---------- shared ---------- */
section{padding-block:clamp(3.5rem,8vw,7rem)}
.eyebrow{
  font-family:var(--sans);font-size:.82rem;font-weight:500;
  color:var(--blue-deep);margin:0 0 1.5rem;
}
h1{
  font-weight:600;line-height:1.08;letter-spacing:-.02em;
  font-size:clamp(2.05rem,1.45rem + 2.6vw,3.5rem);
  margin:0 0 1.5rem;max-width:19ch;
}
h2{
  font-weight:600;line-height:1.18;letter-spacing:-.015em;
  font-size:clamp(1.55rem,1.15rem + 1.6vw,2.4rem);
  margin:0 0 2.75rem;max-width:24ch;
}
h3{font-weight:600;font-size:1.06rem;letter-spacing:.005em;margin:0 0 .7rem}
p{max-width:var(--measure)}

.lede{font-size:clamp(1.1rem,1rem + .45vw,1.35rem);color:var(--ink-soft);margin:0 0 2.25rem}

.cta{
  display:inline-block;font-family:var(--sans);font-weight:500;font-size:.95rem;
  background:var(--blue-deep);color:#fff;text-decoration:none;
  padding:.85rem 1.9rem;border-radius:2px;
  transition:background .18s ease;
}
.cta:hover{background:var(--ink)}

/* ---------- hero ---------- */
.hero{padding-top:clamp(1.75rem,3.5vw,3rem);padding-bottom:clamp(2.5rem,5vw,4rem)}
.hero h1{max-width:none;font-size:clamp(1.8rem,.9rem + 1.85vw,2.6rem);margin-bottom:1.1rem;white-space:nowrap}
@media (max-width:52rem){.hero h1{white-space:normal}}
.hero .lede{margin-bottom:0;max-width:none;white-space:nowrap}
@media (max-width:52rem){.hero .lede{white-space:normal}}
.hero .model{margin-top:clamp(1.5rem,3vw,2.5rem)}
.hero .cta{margin-top:2.25rem}
.hero .wrap:first-of-type{text-align:center}
.hero .lede{margin-inline:auto}
.hero .eyebrow{max-width:none;margin-bottom:1rem}

.model{margin:clamp(3rem,7vw,5.5rem) 0 0;width:100%}
.model-canvas{position:relative}
.model-canvas svg{display:block;width:100%}
.model .node{
  position:absolute;left:50%;top:50%;
  width:clamp(9px,1.15vw,15px);aspect-ratio:1;border-radius:50%;
  background:var(--blue);transform:translate(-50%,-50%);
  --halo:clamp(5px,.85vw,12px);
  box-shadow:0 0 0 var(--halo) var(--paper),
             0 0 0 calc(var(--halo) + 1.5px) rgba(69,116,198,.4);
}
.model .strand{fill:none;stroke:var(--blue);stroke-width:2.75;vector-effect:non-scaling-stroke;stroke-linecap:round}
.model .strand-out{stroke:var(--blue-pale)}

.model figcaption{
  position:absolute;left:50%;top:50%;
  transform:translate(-50%,calc(-50% - clamp(1.5rem,2.6vw,2.4rem)));
  font-family:var(--sans);font-size:.78rem;font-weight:600;letter-spacing:.14em;text-transform:uppercase;
  color:var(--blue);white-space:nowrap;background:var(--paper);padding:.15em .5em;
}
@media (max-width:44rem){
  .model figcaption{font-size:.66rem;letter-spacing:.12em;transform:translate(-50%,calc(-50% - 1.2rem))}
}

.model-note{margin:2.5rem 0 0;color:var(--ink-soft)}

@media (prefers-reduced-motion:no-preference){
  .model .strand{stroke-dasharray:1400;stroke-dashoffset:1400;animation:draw 1.5s cubic-bezier(.22,.61,.36,1) forwards}
  .model .strand:nth-child(2n){animation-delay:.07s}
  .model .strand:nth-child(3n){animation-delay:.14s}
  .model .node{opacity:0;animation:pop .6s ease .8s forwards}
  @keyframes draw{to{stroke-dashoffset:0}}
  @keyframes pop{from{transform:translate(-50%,-50%) scale(.4)}to{opacity:1;transform:translate(-50%,-50%) scale(1)}}
}

/* ---------- services ---------- */

.grid-3{display:grid;gap:clamp(2rem,4vw,3rem);grid-template-columns:repeat(3,1fr)}
.grid-3 p{margin:0;font-size:.98rem;color:var(--ink-soft)}
.service{border-top:2px solid var(--blue);padding-top:1.1rem}
@media (max-width:52rem){ .grid-3{grid-template-columns:1fr;gap:2rem} }


/* ---------- track record ---------- */
.track{padding-block:clamp(3rem,6vw,5rem)}
.stats{display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(1.5rem,3vw,2.5rem)}
.stat{border-top:2px solid var(--blue);padding-top:1rem}
.stat strong{
  display:block;font-family:var(--sans);font-weight:600;letter-spacing:-.02em;line-height:1;
  font-size:clamp(1.9rem,1.3rem + 1.8vw,2.8rem);color:var(--ink);margin-bottom:.45rem;
}
.stat span{font-family:var(--sans);font-size:.9rem;color:var(--ink-soft)}
.clients{margin-top:clamp(2.5rem,5vw,3.5rem);padding-top:clamp(1.5rem,3vw,2rem);border-top:1px solid var(--rule)}
.clients p{font-family:var(--sans);font-size:.8rem;font-weight:500;color:var(--ink-soft);margin:0 0 1rem;max-width:none}
.clients-img{display:block;width:auto;max-width:100%;height:auto;margin-inline:auto;filter:grayscale(1);opacity:.7;transition:filter .25s ease,opacity .25s ease}
.clients-img:hover{filter:none;opacity:1}
.partner{margin-top:1.5rem;font-family:var(--sans);font-size:.85rem;color:var(--ink-soft);max-width:none;text-align:center}
.partner a{color:var(--blue-deep);font-weight:600;text-decoration:none;border-bottom:1px solid var(--blue-pale)}
.partner a:hover{border-bottom-color:var(--blue-deep)}

/* ---------- solutions ---------- */

.sol-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:clamp(1.25rem,2.5vw,2rem)}
.sol{background:var(--paper);border:1px solid var(--rule);padding:clamp(1.4rem,2.5vw,2rem);display:flex;flex-direction:column;gap:.9rem}
.sol h3{margin:0}
.sol > p{margin:0;font-size:.95rem;color:var(--ink-soft)}
.sol ul{margin:0;padding-left:1.1rem;font-size:.92rem;color:var(--ink-soft);display:grid;gap:.3rem}
.sol .result{margin-top:auto;padding-top:.9rem;border-top:1px solid var(--rule);font-size:.92rem;color:var(--ink)}
.sol .result b{font-family:var(--sans);font-weight:600;color:var(--blue-deep)}
.tags{display:flex;flex-wrap:wrap;gap:.4rem}
.tag{font-family:var(--sans);font-size:.7rem;font-weight:500;letter-spacing:.04em;text-transform:uppercase;
  color:var(--blue-deep);background:var(--blue-pale);padding:.25em .6em;border-radius:2px}
@media (max-width:52rem){ .sol-grid{grid-template-columns:1fr} }

/* ---------- whatsapp ---------- */
.wa{
  display:inline-flex;align-items:center;gap:.55rem;
  font-family:var(--sans);font-weight:500;font-size:.95rem;
  background:#25D366;color:#fff;text-decoration:none;
  padding:.85rem 1.6rem;border-radius:2px;transition:background .18s ease;
}
.wa:hover{background:#1DA851}
.wa svg{width:1.1em;height:1.1em;fill:currentColor}
.contact .actions{display:flex;flex-wrap:wrap;align-items:center;gap:1.25rem 2.5rem;margin-top:2rem}
.contact .mail{margin-top:0}

/* ---------- channels ---------- */
.channels .grid-2{display:grid;grid-template-columns:repeat(2,1fr);gap:clamp(2rem,4vw,3.5rem)}
.channel{border-top:2px solid var(--blue);padding-top:1.1rem}
.channel:last-child{border-top-color:var(--gold)}
.channel p{margin:0;font-size:.98rem;color:var(--ink-soft)}
.channel p + p{margin-top:.8rem}
@media (max-width:52rem){ .channels .grid-2{grid-template-columns:1fr;gap:2rem} }

/* ---------- approach ---------- */
.steps{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(1.5rem,4vw,3rem);position:relative}
.steps::before{
  content:"";position:absolute;left:0;right:0;top:.4rem;
  border-top:1px solid var(--rule);
}
.step{position:relative;padding-top:2.1rem}
.step::before{
  content:"";position:absolute;top:0;left:0;
  width:.8rem;height:.8rem;border-radius:50%;
  background:var(--blue);box-shadow:0 0 0 5px var(--paper);
}
.step:last-child::before{background:var(--gold)}
.step p{margin:0;font-size:.98rem;color:var(--ink-soft)}
@media (max-width:52rem){
  .steps{grid-template-columns:1fr;gap:2.25rem}
  .steps::before{top:.4rem;bottom:.4rem;left:.35rem;right:auto;border-top:0;border-left:1px solid var(--rule)}
  .step{padding-top:0;padding-left:2.1rem}
  .step::before{top:.4rem}
}

/* ---------- contact ---------- */
.contact{background:var(--ink);color:#fff}
.contact h2{color:#fff}
.contact .eyebrow{color:var(--blue-pale)}
.contact p{color:#C3CEE0}
.mail{
  display:inline-block;margin-top:2rem;
  font-family:var(--sans);font-weight:500;color:#fff;text-decoration:none;
  font-size:clamp(1.15rem,.95rem + 1.1vw,1.9rem);
  border-bottom:2px solid var(--blue);padding-bottom:.25rem;
  transition:border-color .18s ease;
}
.mail:hover{border-bottom-color:#fff}

/* ---------- footer ---------- */
.site-foot{border-top:1px solid var(--rule);padding-block:2.5rem}
.site-foot .wrap{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:1.25rem}
.site-foot small{font-family:var(--sans);font-size:.82rem;color:var(--ink-soft)}

/* ---------- page links (Trayectoria) ---------- */
.more{display:flex;flex-wrap:wrap;gap:1rem 2.5rem;margin-top:clamp(2rem,4vw,3rem);padding-top:1.5rem;border-top:1px solid var(--rule)}
.more a{font-family:var(--sans);font-weight:500;font-size:.95rem;color:var(--blue-deep);text-decoration:none;border-bottom:1px solid var(--blue-pale);padding-bottom:.15rem}
.more a:hover{border-bottom-color:var(--blue-deep)}

/* ---------- footer nav ---------- */
.foot-nav{display:flex;gap:1.5rem;font-family:var(--sans);font-size:.85rem;font-weight:500}
.foot-nav a{color:var(--ink-soft);text-decoration:none}
.foot-nav a:hover{color:var(--blue-deep)}

/* ---------- subpages ---------- */
.page-head{padding-top:clamp(2.5rem,5vw,4.5rem);padding-bottom:clamp(2rem,4vw,3rem);border-bottom:1px solid var(--rule)}
.page-head h1{max-width:24ch;font-size:clamp(1.9rem,1.3rem+2vw,3rem)}
.page-head .lede{margin-bottom:0}

/* ---------- equipo ---------- */
.person{display:grid;grid-template-columns:minmax(0,17rem) minmax(0,1fr);gap:clamp(2rem,5vw,4.5rem);align-items:start}
.portrait{aspect-ratio:4/5;background:var(--paper-alt);border:1px solid var(--rule);display:grid;place-items:center;color:var(--blue-pale);overflow:hidden}
.portrait img{width:100%;height:100%;object-fit:cover;display:block}
.portrait svg{width:45%}
.creds{margin-top:1.5rem;font-family:var(--sans);font-size:.88rem}
.creds h3{font-size:.82rem;color:var(--blue-deep);margin:1.35rem 0 .5rem}
.creds h3:first-child{margin-top:0}
.creds ul{list-style:none;margin:0;padding:0;display:grid;gap:.35rem;color:var(--ink-soft)}
.creds li b{font-weight:600;color:var(--ink)}
.creds li small{display:block;font-size:.78rem;color:var(--ink-soft)}
.bio p:first-child{margin-top:0}
.bio .lede{font-size:clamp(1.05rem,1rem+.3vw,1.25rem);margin-bottom:1.5rem}
.timeline{margin:clamp(2.5rem,5vw,3.5rem) 0 0;padding:0;list-style:none;position:relative}
.timeline::before{content:"";position:absolute;left:.35rem;top:.5rem;bottom:.5rem;border-left:1px solid var(--rule)}
.timeline li{position:relative;padding-left:2.1rem;padding-bottom:1.6rem}
.timeline li:last-child{padding-bottom:0}
.timeline li::before{content:"";position:absolute;left:0;top:.45rem;width:.8rem;height:.8rem;border-radius:50%;background:var(--blue);box-shadow:0 0 0 4px var(--paper)}
.timeline li:first-child::before{background:var(--gold)}
.timeline .when{font-family:var(--sans);font-size:.8rem;font-weight:500;color:var(--ink-soft);display:block;margin-bottom:.15rem}
.timeline h3{margin-bottom:.3rem}
.timeline p{margin:0;font-size:.95rem;color:var(--ink-soft)}
.talks{margin:clamp(2.5rem,5vw,3.5rem) 0 0;padding-top:1.5rem;border-top:1px solid var(--rule)}
.talks h2{font-size:1.25rem;margin-bottom:1rem}
.talks ul{margin:0;padding-left:1.1rem;font-size:.95rem;color:var(--ink-soft);display:grid;gap:.4rem}
@media (max-width:52rem){.person{grid-template-columns:1fr}.portrait{max-width:16rem}}

/* ---------- casos ---------- */
.cases{display:grid;gap:clamp(2.5rem,5vw,4rem)}
.case{border-top:2px solid var(--blue);padding-top:1.25rem}
.case.alt{border-top-color:var(--gold)}
.case-head{display:flex;flex-wrap:wrap;align-items:baseline;gap:.5rem 1.25rem;margin-bottom:1.25rem}
.case-head h2{font-size:clamp(1.25rem,1.1rem+.7vw,1.6rem);margin:0;max-width:none}
.case-head .who{font-family:var(--sans);font-size:.88rem;color:var(--ink-soft)}
.case-head .tags{margin-left:auto}
.case dl{margin:0;display:grid;grid-template-columns:8rem minmax(0,1fr);gap:.7rem 1.5rem}
.case dt{font-family:var(--sans);font-size:.85rem;font-weight:600;color:var(--blue-deep);padding-top:.1rem}
.case dd{margin:0;font-size:.98rem;color:var(--ink-soft);max-width:var(--measure)}
.case dd.aud{color:var(--ink)}
@media (max-width:40rem){.case dl{grid-template-columns:1fr;gap:.2rem .5rem}.case dd{margin-bottom:.6rem}.case-head .tags{margin-left:0}}
.refs{margin-top:clamp(3rem,6vw,4.5rem);padding-top:1.5rem;border-top:1px solid var(--rule);font-family:var(--sans);font-size:.92rem;color:var(--ink-soft)}
.refs a{color:var(--blue-deep);font-weight:500;text-decoration:none;border-bottom:1px solid var(--blue-pale)}

/* ---------- que hacemos (parts) ---------- */
.what .part{margin-top:clamp(3rem,7vw,5.5rem);padding-top:clamp(2.5rem,5vw,4rem);border-top:1px solid var(--rule)}
.part-title{font-size:clamp(1.35rem,1.1rem+1vw,1.9rem);margin-bottom:.75rem}
.part-lede{margin-bottom:clamp(1.75rem,3.5vw,2.5rem);max-width:var(--measure)}
.channels-block{margin-top:clamp(2.5rem,5vw,4rem)}
.channels-block .grid-2{display:grid;grid-template-columns:repeat(2,1fr);gap:clamp(2rem,4vw,3.5rem)}
@media (max-width:52rem){.channels-block .grid-2{grid-template-columns:1fr;gap:2rem}}

/* ---------- quienes somos ---------- */
.who{background:var(--paper-alt);border-block:1px solid var(--rule)}
.who .clients{border-top-color:var(--rule)}
.entries{display:grid;grid-template-columns:repeat(2,1fr);gap:clamp(1.25rem,2.5vw,2rem);margin-top:clamp(2.5rem,5vw,3.5rem)}
.entry{display:flex;flex-direction:column;gap:.6rem;background:var(--paper);border:1px solid var(--rule);border-top:2px solid var(--blue);padding:clamp(1.4rem,2.5vw,2rem);text-decoration:none;color:var(--ink);transition:border-color .18s ease}
.entry:last-child{border-top-color:var(--gold)}
.entry h3{margin:0}
.entry p{margin:0;font-size:.95rem;color:var(--ink-soft)}
.entry .ui{margin-top:auto;padding-top:.75rem;font-size:.9rem;font-weight:500;color:var(--blue-deep)}
.entry:hover{border-color:var(--blue-pale);border-top-color:var(--blue-deep)}
.entry:last-child:hover{border-top-color:var(--gold)}
@media (max-width:52rem){.entries{grid-template-columns:1fr}}

.group-title{font-size:clamp(1.35rem,1.1rem+1vw,1.9rem);margin-bottom:clamp(1.5rem,3vw,2.5rem)}
.group-title + .cases{margin-top:0}
.cases + .group-title{margin-top:clamp(4rem,8vw,6rem);padding-top:clamp(2rem,4vw,3rem);border-top:1px solid var(--rule)}
.group-lede{font-family:var(--sans);font-size:.92rem;color:var(--ink-soft);margin:-1rem 0 clamp(1.5rem,3vw,2.5rem);max-width:var(--measure)}