/* ============================================================
   VIROMII — design system
   Concept: "The Transfer Line". One continuous gradient — teal
   (research) to coral (market) — carries the whole identity:
   it is the scroll progress, the hero pathway, the service
   steppers and the dots over the double i of the wordmark.
   ============================================================ */
:root{
  --paper:#FFFFFF;
  --paper-2:#EFF6FB;
  --ink:#08222F;
  --ink-2:#0B2C3D;
  --ink-3:#041721;
  --teal:#6FB9DE;
  --teal-soft:#D6EAF6;
  --coral:#268BBF;
  --coral-soft:#D3E9F5;
  --muted:#4F6B7A;
  --muted-on-dark:#9CBBCD;
  --line:#D6E4ED;
  --line-on-dark:rgba(255,255,255,.14);
  --grad:linear-gradient(90deg,var(--teal) 0%,var(--coral) 55%,#17608A 100%);
  --font-display:"Archivo","Helvetica Neue",Helvetica,Arial,sans-serif;
  --font-body:"Instrument Sans",system-ui,-apple-system,"Segoe UI",sans-serif;
  --font-mono:"IBM Plex Mono",ui-monospace,SFMono-Regular,Menlo,monospace;
  --wrap:1180px;
  --radius:18px;
  --shadow:0 18px 50px -24px rgba(8,34,47,.35);
}
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
@media (prefers-reduced-motion: no-preference){
  html{scroll-behavior:smooth}
}
html{-webkit-text-size-adjust:100%}
body{
  font-family:var(--font-body);
  background:var(--paper);
  color:var(--ink);
  line-height:1.6;
  font-size:17px;
  overflow-x:hidden;
}
::selection{background:var(--coral);color:#fff}
img,svg{display:block;max-width:100%}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
ul{list-style:none}
:focus-visible{outline:3px solid var(--coral);outline-offset:3px;border-radius:4px}

/* ---------- texture: faint lab-paper dot grid on light sections ---------- */
.dotted{
  background-image:radial-gradient(rgba(8,34,47,.08) 1px,transparent 1px);
  background-size:26px 26px;
}
/* ---------- expertise grid ---------- */
.exp-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:18px}
.exp-card{
  background:var(--paper);border:1px solid var(--line);border-radius:var(--radius);
  padding:22px;transition:transform .35s,box-shadow .35s,border-color .35s;
}
.exp-card:hover{transform:translateY(-6px);box-shadow:var(--shadow);border-color:var(--coral)}
.exp-ico{
  height:118px;border-radius:12px;background:var(--paper-2);color:var(--coral);
  display:flex;align-items:center;justify-content:center;margin-bottom:18px;
}
.exp-ico svg{width:62px;height:62px}
.exp-card h3{
  font-family:var(--font-display);font-weight:800;text-transform:uppercase;
  font-size:14.5px;letter-spacing:.05em;
}
@media (max-width:980px){.exp-grid{grid-template-columns:repeat(2,1fr)}}
/* ---------- TRL interactive ---------- */
.trl{
  background:var(--ink);color:var(--paper);border-radius:var(--radius);
  padding:30px 28px 24px;min-height:420px;height:100%;
  display:flex;flex-direction:column;justify-content:space-between;gap:26px;
}
.trl-tag{
  font-family:var(--font-mono);font-size:11.5px;letter-spacing:.16em;color:var(--teal);
  border:1px solid var(--line-on-dark);padding:6px 13px;border-radius:99px;
  display:inline-block;margin-bottom:16px;
}
.trl-top h3{
  font-family:var(--font-display);font-weight:800;text-transform:uppercase;
  font-size:clamp(20px,2.2vw,25px);letter-spacing:-.01em;margin-bottom:10px;
}
.trl-top p{color:var(--muted-on-dark);font-size:15.5px;line-height:1.65;min-height:80px}
.trl-bar{display:grid;grid-template-columns:repeat(9,1fr);gap:7px;margin-bottom:14px}
.trl-bar button{
  height:54px;border-radius:9px;background:rgba(255,255,255,.07);
  border:1px solid var(--line-on-dark);font-family:var(--font-mono);font-size:11.5px;
  color:var(--muted-on-dark);transition:background .25s,transform .25s,color .25s,border-color .25s;
}
.trl-bar button.lit{background:var(--coral);border-color:var(--coral);color:#fff;transform:translateY(-4px)}
.trl-axis{
  display:flex;justify-content:space-between;align-items:center;
  font-family:var(--font-mono);font-size:10.5px;letter-spacing:.2em;color:var(--muted-on-dark);
}
.trl-hint{letter-spacing:.08em;opacity:.65}
/* ---------- testimonials ---------- */
.testi-layout{display:grid;grid-template-columns:300px 1fr;gap:22px;align-items:stretch}
.score-card{
  background:var(--ink);color:var(--paper);border-radius:var(--radius);
  padding:34px 30px;display:flex;flex-direction:column;justify-content:center;gap:14px;
}
.score{
  font-family:var(--font-display);font-weight:900;letter-spacing:-.03em;line-height:1;
  font-size:clamp(54px,6vw,78px);
  background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent;
}
.score small{font-size:.4em;font-weight:800}
.score-lab{color:var(--muted-on-dark);font-size:14.5px;line-height:1.55}
.carousel{display:flex;flex-direction:column;gap:16px;min-width:0}
.car-viewport{overflow:hidden;border-radius:var(--radius);flex:1}
.car-track{display:flex;height:100%;transition:transform .6s cubic-bezier(.4,0,.2,1)}
.t-card{
  flex:0 0 100%;background:var(--paper);border:1px solid var(--line);border-radius:var(--radius);
  padding:32px 36px;display:flex;flex-direction:column;gap:20px;justify-content:space-between;min-height:230px;
}
.t-quote{font-size:clamp(17px,1.7vw,20.5px);line-height:1.55;font-weight:500}
.t-quote::before{
  content:"\201C";color:var(--coral);font-family:var(--font-display);font-weight:900;
  font-size:1.7em;line-height:0;vertical-align:-9px;margin-right:7px;
}
.t-by{display:flex;align-items:center;justify-content:space-between;gap:14px;flex-wrap:wrap}
.t-role{font-family:var(--font-mono);font-size:12px;letter-spacing:.06em;color:var(--muted)}
.t-score{
  font-family:var(--font-mono);font-size:12px;color:#17608A;background:var(--coral-soft);
  padding:5px 11px;border-radius:99px;flex:none;
}
.car-ctrl{display:flex;align-items:center;justify-content:center;gap:18px}
.car-btn{
  width:42px;height:42px;border-radius:50%;border:1.5px solid var(--line);font-size:17px;
  transition:background .25s,color .25s,border-color .25s;
}
.car-btn:hover{background:var(--coral);border-color:var(--coral);color:#fff}
.car-dots{display:flex;gap:8px}
.car-dots button{width:9px;height:9px;border-radius:50%;background:var(--line);padding:0;transition:background .25s,transform .25s}
.car-dots button.on{background:var(--coral);transform:scale(1.3)}
@media (max-width:880px){.testi-layout{grid-template-columns:1fr}.t-card{padding:26px 24px}}

/* ---------- layout helpers ---------- */
.wrap{max-width:var(--wrap);margin:0 auto;padding:0 28px}
section{position:relative}
.sec-pad{padding:110px 0}
.eyebrow{
  font-family:var(--font-mono);
  font-size:18px;letter-spacing:.22em;text-transform:uppercase;
  display:inline-flex;align-items:center;gap:12px;
  color:var(--muted);
}
.eyebrow::before{
  content:"";width:30px;height:2px;background:var(--grad);border-radius:2px;flex:none;
}
.on-dark .eyebrow{color:var(--muted-on-dark)}
.sec-head{display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;gap:24px;margin-bottom:56px}
.sec-title{
  font-family:var(--font-display);
  font-weight:800;
  font-size:clamp(34px,4.6vw,58px);
  line-height:1.02;
  letter-spacing:-.02em;
  text-transform:uppercase;
}
.sec-sub{max-width:520px;color:var(--muted);font-size:17px}
.on-dark .sec-sub{color:var(--muted-on-dark)}

/* ---------- logo ---------- */
.logo{display:flex;align-items:center;flex:none}
.logo img{height:38px;width:auto;display:block}

/* ---------- scroll progress = the transfer line ---------- */
#progress{
  position:fixed;top:0;left:0;height:4px;width:0;
  background:var(--grad);z-index:1001;
}

/* ---------- nav ---------- */
header{
  position:fixed;top:0;left:0;right:0;z-index:1000;
  transition:background .35s,box-shadow .35s,backdrop-filter .35s;
}
header.scrolled{
  background:rgba(255,255,255,.86);
  backdrop-filter:blur(14px);
  -webkit-backdrop-filter:blur(14px);
  box-shadow:0 1px 0 var(--line);
}
.nav{
  display:flex;align-items:center;justify-content:space-between;
  gap:24px;padding:20px 28px;max-width:1320px;margin:0 auto;
}
.nav-links{display:flex;align-items:center;gap:30px}
.nav-links a{
  font-family:var(--font-mono);font-size:12px;letter-spacing:.14em;text-transform:uppercase;
  color:var(--ink);position:relative;padding:6px 0;
}
.nav-links a::after{
  content:"";position:absolute;left:0;bottom:0;height:2px;width:0;
  background:var(--grad);transition:width .3s;
}
.nav-links a:hover::after{width:100%}
.nav-right{display:flex;align-items:center;gap:16px}
.lang{
  display:flex;border:1.5px solid var(--ink);border-radius:99px;overflow:hidden;
}
.lang button{
  font-family:var(--font-mono);font-size:11px;letter-spacing:.1em;
  padding:7px 13px;color:var(--ink);transition:background .25s,color .25s;
}
.lang button[aria-pressed="true"]{background:var(--ink);color:var(--paper)}
.btn{
  display:inline-flex;align-items:center;gap:10px;
  font-family:var(--font-mono);font-size:12px;letter-spacing:.14em;text-transform:uppercase;
  padding:14px 26px;border-radius:99px;position:relative;overflow:hidden;
  transition:transform .25s,box-shadow .25s;isolation:isolate;
}
.btn span{position:relative;z-index:2}
.btn::before{
  content:"";position:absolute;inset:0;background:var(--grad);
  transform:translateX(-101%);transition:transform .4s cubic-bezier(.7,0,.2,1);z-index:1;
}
.btn:hover::before{transform:translateX(0)}
.btn:hover{transform:translateY(-2px);box-shadow:var(--shadow)}
.btn-solid{background:var(--ink);color:#fff}
.btn-ghost{border:1.5px solid var(--ink);color:var(--ink)}
.btn-ghost:hover{color:#fff;border-color:transparent}
.btn-light{background:var(--paper);color:var(--ink)}
.btn .arr{transition:transform .3s;position:relative;z-index:2}
.btn:hover .arr{transform:translateX(5px)}
#burger{display:none;width:44px;height:44px;position:relative;z-index:1100}
#burger span{
  position:absolute;left:10px;right:10px;height:2px;background:var(--ink);
  transition:transform .3s,opacity .3s,top .3s;
}
#burger span:nth-child(1){top:16px}
#burger span:nth-child(2){top:22px}
#burger span:nth-child(3){top:28px}
#burger.open span:nth-child(1){top:22px;transform:rotate(45deg)}
#burger.open span:nth-child(2){opacity:0}
#burger.open span:nth-child(3){top:22px;transform:rotate(-45deg)}

/* ---------- hero ---------- */
.hero{padding:172px 0 0;min-height:92vh;display:flex;flex-direction:column}
.hero-top{display:grid;grid-template-columns:1.55fr 1fr;gap:48px;align-items:end}
.hero h1{
  font-family:var(--font-display);font-weight:900;
  font-size:clamp(44px,7.2vw,104px);
  line-height:.96;letter-spacing:-.035em;text-transform:uppercase;
  margin:22px 0 0;
  max-width:100%;
  overflow-wrap:normal;word-break:normal;hyphens:none;
}
.hero h1 .accent{
  background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent;
}
.hero-side{padding-bottom:10px}
.hero-side p{font-size:18px;color:var(--muted);max-width:380px;font-weight:500}
.hero-side p strong{color:var(--ink)}
.hero-cta{margin-top:30px;display:flex;flex-direction:column;gap:14px;align-items:flex-start}
.hero-cta .ask{font-family:var(--font-mono);font-size:12px;letter-spacing:.16em;text-transform:uppercase;color:var(--ink)}
.hero-line{margin-top:auto;padding:64px 0 0}
.hero-line svg{width:100%;height:auto;overflow:visible}
.hl-path{
  fill:none;stroke:url(#lineGrad);stroke-width:3;
  stroke-dasharray:1700;stroke-dashoffset:1700;
  animation:draw 2.2s .35s cubic-bezier(.6,0,.2,1) forwards;
}
@keyframes draw{to{stroke-dashoffset:0}}
.hl-node{fill:var(--paper);stroke-width:3}
.hl-node.start{stroke:var(--teal)}
.hl-node.mid{stroke:#3D9BCB}
.hl-node.end{stroke:var(--coral)}
.hl-label{
  font-family:var(--font-mono);font-size:11px;letter-spacing:.18em;
  fill:var(--muted);text-transform:uppercase;
}
.hero-line-mobile-labels{display:none}
.hl-fade{opacity:0;animation:fadeUp .8s ease forwards}
@keyframes fadeUp{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}

/* ---------- marquee bands ---------- */
.band{background:var(--ink);color:var(--paper);overflow:hidden;padding:34px 0}
.band .track{display:flex;width:max-content;animation:scroll 60s linear infinite}
.band:hover .track{animation-play-state:paused}
.band .item{
  display:flex;align-items:center;gap:34px;padding-right:34px;
  font-family:var(--font-display);font-weight:700;font-size:30px;
  letter-spacing:-.01em;text-transform:uppercase;white-space:nowrap;
}
.band .item::after{
  content:"";width:9px;height:9px;border-radius:50%;background:var(--grad);flex:none;
}
@keyframes scroll{to{transform:translateX(-50%)}}
.band.rev .track{animation-direction:reverse}
.band.clients-band{background:var(--ink-3)}
.band-label{
  text-align:center;font-family:var(--font-mono);font-size:12px;letter-spacing:.22em;
  text-transform:uppercase;color:var(--muted-on-dark);padding:22px 0 8px;
}
.band.clients-band .item{
  font-family:var(--font-mono);font-weight:700;font-size:20px;letter-spacing:.1em;
  color:var(--muted-on-dark);text-transform:uppercase;
}
.band.clients-band .item::after{background:var(--teal)}
.band.clients-band .row2 .item::after{background:var(--coral)}
.band.clients-band{padding:0}
.band.clients-band .row{padding:20px 0;border-top:1px solid var(--line-on-dark)}
.band.clients-band .row:first-child{border-top:0}
/* ---------- clients: logo wall (transparent PNG / SVG) ---------- */
.band.clients-band .item{padding-right:62px;gap:0}
.band.clients-band .item::after{display:none}            /* sin puntos cuando son logos */
.band.clients-band .item img{
  height:42px;width:auto;max-width:180px;object-fit:contain;
  filter:brightness(0) invert(1);opacity:.72;            /* logos en blanco uniforme sobre fondo oscuro */
  transition:opacity .3s,filter .3s;
}
.band.clients-band .item:hover img{opacity:1}
.band.clients-band .item .lname{display:none}            /* el nombre solo se ve si falta el logo */
.band.clients-band .item.noimg{padding-right:50px}
.band.clients-band .item.noimg .lname{display:inline-flex;align-items:center}

/* ---------- intro under industries ---------- */
.focus-intro{padding:90px 0}
.focus-intro .lead{
  font-family:var(--font-display);font-weight:600;
  font-size:clamp(22px,3vw,34px);line-height:1.32;letter-spacing:-.015em;
  max-width:960px;
}
.focus-intro .lead em{font-style:normal;color:var(--teal)}
.focus-intro .lead em.mk{color:var(--coral)}

/* ---------- services ---------- */
#services{background:var(--ink);color:var(--paper)}
#services .sec-title{color:var(--paper)}
.aud-tabs{display:flex;gap:12px;flex-wrap:wrap}
.aud-tab{
  font-family:var(--font-mono);font-size:12px;letter-spacing:.14em;text-transform:uppercase;
  padding:13px 22px;border:1.5px solid var(--line-on-dark);border-radius:99px;
  color:var(--muted-on-dark);transition:all .3s;
}
.aud-tab[aria-selected="true"]{
  background:var(--paper);color:var(--ink);border-color:var(--paper);
}
.aud-tab:hover{border-color:var(--paper);color:var(--paper)}
.aud-tab[aria-selected="true"]:hover{color:var(--ink)}
.aud-panel{display:none}
.aud-panel.active{display:block;animation:fadeUp .5s ease}
.svc-intro{
  font-family:var(--font-display);font-weight:600;font-size:clamp(20px,2.4vw,28px);
  line-height:1.3;letter-spacing:-.01em;max-width:720px;margin:46px 0 60px;
}

/* pathway stepper */
.pathway{position:relative;margin:0 0 70px}
.pathway .rail{
  position:absolute;left:0;right:0;top:10px;height:3px;border-radius:3px;
  background:var(--line-on-dark);overflow:hidden;
}
.pathway .rail i{
  position:absolute;inset:0;background:var(--grad);
  transform:scaleX(0);transform-origin:left;transition:transform 1.6s cubic-bezier(.6,0,.2,1);
}
.pathway.in .rail i{transform:scaleX(1)}
.pathway ol{display:grid;grid-template-columns:repeat(5,1fr);gap:18px;counter-reset:step;list-style:none;margin:0;padding:0}
.pathway li{position:relative;padding-top:34px;opacity:0;transform:translateY(12px);transition:opacity .5s,transform .5s}
.pathway.in li{opacity:1;transform:none}
.pathway.in li:nth-child(1){transition-delay:.15s}
.pathway.in li:nth-child(2){transition-delay:.4s}
.pathway.in li:nth-child(3){transition-delay:.65s}
.pathway.in li:nth-child(4){transition-delay:.9s}
.pathway.in li:nth-child(5){transition-delay:1.15s}
.pathway li::before{
  content:"";position:absolute;top:3px;left:0;width:17px;height:17px;border-radius:50%;
  background:var(--ink);border:3px solid var(--paper);
}
.pathway li:nth-child(1)::before{border-color:var(--teal)}
.pathway li:nth-child(2)::before{border-color:#3D8E7B}
.pathway li:nth-child(3)::before{border-color:#5E9A77}
.pathway li:nth-child(4)::before{border-color:#C97F5E}
.pathway li:nth-child(5)::before{border-color:var(--coral)}
.pathway .step-n{
  font-family:var(--font-mono);font-size:11px;letter-spacing:.18em;color:var(--muted-on-dark);
  display:block;margin-bottom:6px;
}
.pathway .step-t{
  font-family:var(--font-display);font-weight:700;font-size:16px;line-height:1.25;
  letter-spacing:.01em;text-transform:uppercase;
}

/* accordion */
.acc{border-top:1px solid var(--line-on-dark)}
.acc-item{border-bottom:1px solid var(--line-on-dark)}
.acc-btn{
  width:100%;display:flex;align-items:center;gap:26px;
  padding:30px 4px;text-align:left;transition:padding .3s;
}
.acc-btn:hover{padding-left:14px}
.acc-btn .idx{
  font-family:var(--font-mono);font-size:12px;letter-spacing:.14em;color:var(--muted-on-dark);
  flex:none;width:64px;
}
.acc-btn .acc-title{
  font-family:var(--font-display);font-weight:800;letter-spacing:-.01em;
  font-size:clamp(21px,2.6vw,30px);text-transform:uppercase;flex:1;
}
.acc-btn .plus{
  flex:none;width:38px;height:38px;border:1.5px solid var(--line-on-dark);border-radius:50%;
  position:relative;transition:transform .4s,background .3s,border-color .3s;
}
.acc-btn .plus::before,.acc-btn .plus::after{
  content:"";position:absolute;top:50%;left:50%;background:currentColor;
  transform:translate(-50%,-50%);
}
.acc-btn .plus::before{width:14px;height:1.5px}
.acc-btn .plus::after{width:1.5px;height:14px;transition:transform .3s}
.acc-item.open .acc-btn .plus{transform:rotate(45deg);background:var(--coral);border-color:var(--coral);color:#fff}
.acc-body{
  max-height:0;overflow:hidden;transition:max-height .55s cubic-bezier(.6,0,.2,1);
}
.acc-inner{padding:0 4px 40px;max-width:760px;margin-left:90px}
.acc-inner p{color:var(--muted-on-dark);margin-bottom:16px}
.acc-inner p:last-child{margin-bottom:0}
.acc-inner ul{margin-top:6px}
.acc-inner li{
  position:relative;padding:8px 0 8px 28px;color:var(--muted-on-dark);
  border-bottom:1px dashed var(--line-on-dark);
}
.acc-inner li:last-child{border-bottom:0}
.acc-inner li::before{
  content:"";position:absolute;left:4px;top:16px;width:8px;height:8px;border-radius:50%;
  background:var(--grad);
}

/* ---------- why ---------- */
.why-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}
.why-card{
  background:#fff;border:1px solid var(--line);border-radius:var(--radius);
  padding:34px 30px 38px;position:relative;overflow:hidden;
  transition:transform .35s,box-shadow .35s;
}
.why-card::before{
  content:"";position:absolute;left:0;top:0;bottom:0;width:5px;background:var(--grad);
  transform:scaleY(0);transform-origin:top;transition:transform .4s;
}
.why-card:hover{transform:translateY(-6px);box-shadow:var(--shadow)}
.why-card:hover::before{transform:scaleY(1)}
.why-card .tag{
  font-family:var(--font-mono);font-size:11px;letter-spacing:.2em;color:var(--teal);
  text-transform:uppercase;display:block;margin-bottom:18px;
}
.why-card h3{
  font-family:var(--font-display);font-weight:800;font-size:21px;letter-spacing:-.01em;
  text-transform:uppercase;margin-bottom:12px;
}
.why-card p{color:var(--muted);font-size:15.5px}

/* ---------- stats ---------- */
.stats{border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.stats .wrap{
  display:grid;grid-template-columns:repeat(3,1fr);
}
.stat{padding:56px 36px;border-left:1px solid var(--line);text-align:center}
.stat:first-child{border-left:0}
.stat .num{
  font-family:var(--font-display);font-weight:900;letter-spacing:-.03em;
  font-size:clamp(46px,5.6vw,76px);line-height:1;
  background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent;
}
.stat .lab{
  font-family:var(--font-mono);font-size:12px;letter-spacing:.16em;text-transform:uppercase;
  color:var(--muted);margin:14px auto 0;display:block;max-width:240px;line-height:1.7;
}

/* ---------- about ---------- */
.about-grid{display:grid;grid-template-columns:1.1fr .9fr;gap:70px;align-items:start}
.about-copy p{color:var(--muted);margin-bottom:18px;font-size:17px}
.about-copy p strong{color:var(--ink)}
.about-visual{position:sticky;top:120px}
.about-visual svg{width:100%;height:auto;border-radius:var(--radius)}
.values{margin-top:80px;border-top:1px solid var(--line)}
.value{
  display:grid;grid-template-columns:70px 320px 1fr;gap:30px;align-items:baseline;
  padding:32px 0;border-bottom:1px solid var(--line);
}
.value .v-idx{font-family:var(--font-mono);font-size:12px;letter-spacing:.16em;color:var(--coral)}
.value h3{
  font-family:var(--font-display);font-weight:800;font-size:20px;letter-spacing:-.01em;
  text-transform:uppercase;
}
.value p{color:var(--muted);font-size:16px}
.way{
  margin-top:90px;background:var(--ink);color:var(--paper);
  border-radius:calc(var(--radius) + 8px);padding:70px 64px;position:relative;overflow:hidden;
}
.way::after{
  content:"";position:absolute;left:0;right:0;bottom:0;height:5px;background:var(--grad);
}
.way .eyebrow{color:var(--muted-on-dark)}
.way blockquote{
  font-family:var(--font-display);font-weight:600;
  font-size:clamp(21px,2.7vw,31px);line-height:1.35;letter-spacing:-.01em;
  max-width:880px;margin-top:24px;
}

/* ---------- team ---------- */
#team{background:var(--paper-2)}
.team-grid{display:grid;grid-template-columns:repeat(5,1fr);gap:20px}
.member{
  background:#fff;border:1px solid var(--line);border-radius:var(--radius);
  overflow:hidden;transition:transform .35s,box-shadow .35s;
}
.member:hover{transform:translateY(-6px);box-shadow:var(--shadow)}
.member .photo{aspect-ratio:4/4.6;position:relative;overflow:hidden}
.member .photo svg{width:100%;height:100%;object-fit:cover;transition:transform .6s}
.member:hover .photo svg{transform:scale(1.05)}
.member .info{padding:20px 20px 24px}
.member h3{font-family:var(--font-display);font-weight:800;font-size:17.5px;letter-spacing:-.01em}
.member .role{
  font-family:var(--font-mono);font-size:10.5px;letter-spacing:.12em;text-transform:uppercase;
  color:var(--teal);display:block;margin:7px 0 12px;line-height:1.7;
}
.member .bio{font-size:13.5px;color:var(--muted);line-height:1.55}
.member .li{
  margin-top:14px;display:inline-flex;align-items:center;gap:7px;
  font-family:var(--font-mono);font-size:11px;letter-spacing:.12em;color:var(--ink);
  border-bottom:1.5px solid var(--coral);padding-bottom:2px;
}
.member .li:hover{color:var(--coral)}
/* ---------- team teaser (foto clicable + texto) ---------- */
.team-teaser{display:grid;grid-template-columns:.82fr 1.18fr;gap:64px;align-items:center}
.tt-photo{position:relative;display:block;border-radius:var(--radius);overflow:hidden;box-shadow:var(--shadow)}
.tt-photo img{width:100%;height:auto;display:block;transition:transform .6s cubic-bezier(.4,0,.2,1)}
.tt-photo:hover img{transform:scale(1.045)}
.tt-photo::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,transparent 52%,rgba(4,23,33,.6));opacity:0;transition:opacity .4s}
.tt-photo:hover::after{opacity:1}
.tt-badge{
  position:absolute;left:20px;bottom:18px;z-index:2;display:inline-flex;align-items:center;gap:9px;
  font-family:var(--font-mono);font-size:12.5px;letter-spacing:.06em;text-transform:uppercase;color:#fff;
  background:rgba(8,34,47,.5);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);
  padding:10px 16px;border-radius:99px;opacity:0;transform:translateY(7px);
  transition:opacity .4s,transform .4s;
}
.tt-photo:hover .tt-badge{opacity:1;transform:none}
.tt-badge .arr{transition:transform .3s}
.tt-photo:hover .tt-badge .arr{transform:translateX(4px)}
.tt-copy .eyebrow{margin-bottom:20px}
.tt-copy h2{margin-bottom:26px}
.tt-copy p{color:var(--muted);margin-bottom:18px;font-size:17px}
.tt-copy p strong{color:var(--ink)}
.tt-btn{margin-top:12px}

/* ---------- latest ---------- */
.latest-grid{display:grid;grid-template-columns:1fr 1fr;gap:64px}
.latest-col .col-head{
  display:flex;align-items:baseline;justify-content:space-between;gap:18px;
  margin-bottom:30px;border-bottom:2px solid var(--ink);padding-bottom:16px;
}
.latest-col h3{
  font-family:var(--font-display);font-weight:800;font-size:clamp(20px,2.2vw,26px);
  letter-spacing:-.01em;text-transform:uppercase;
}
.more-link{
  font-family:var(--font-mono);font-size:11px;letter-spacing:.14em;text-transform:uppercase;
  color:var(--coral);white-space:nowrap;
}
.more-link:hover{text-decoration:underline}
.post{
  display:grid;grid-template-columns:86px 1fr;gap:22px;align-items:center;
  padding:22px 0;border-bottom:1px solid var(--line);transition:padding .3s;
}
.post:hover{padding-left:10px}
.post .thumb{
  width:86px;height:86px;border-radius:14px;overflow:hidden;flex:none;
}
.post .thumb svg{width:100%;height:100%}
.post .p-tag{
  font-family:var(--font-mono);font-size:10px;letter-spacing:.18em;color:var(--teal);
  text-transform:uppercase;display:block;margin-bottom:6px;
}
.post h4{
  font-family:var(--font-display);font-weight:700;font-size:16.5px;line-height:1.35;
  letter-spacing:-.005em;
}
.post:hover h4{color:var(--coral)}
.post .date{
  font-family:var(--font-mono);font-size:11px;color:var(--muted);display:block;margin-top:7px;
}

/* ---------- contact ---------- */
#contact{background:var(--ink);color:var(--paper);overflow:hidden}
#contact .inner{position:relative;text-align:center;padding:130px 0}
#contact h2{
  font-family:var(--font-display);font-weight:900;text-transform:uppercase;
  font-size:clamp(54px,10vw,140px);line-height:.95;letter-spacing:-.035em;
}
#contact h2 .accent{
  background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent;
}
#contact p{
  max-width:560px;margin:30px auto 44px;color:var(--muted-on-dark);font-size:18px;
}
#contact .mail{
  font-family:var(--font-mono);font-size:13px;letter-spacing:.14em;color:var(--muted-on-dark);
  display:block;margin-top:26px;
}
#contact .mail a{display:table;margin-inline:auto;border-bottom:1px solid var(--coral);padding-bottom:2px}
#contact .mail a + a{margin-top:26px}
#contact .mail a:hover{color:var(--coral)}
#contact .addr{margin-top:26px;font-family:var(--font-mono);font-size:13px;letter-spacing:.06em;color:var(--muted-on-dark)}
#contact .addr a:hover{color:var(--teal)}
.contact-line{
  position:absolute;left:-5%;right:-5%;top:50%;height:2px;background:var(--grad);
  opacity:.25;transform:rotate(-3deg);
}

/* ---------- footer ---------- */
footer{background:var(--ink-3);color:var(--muted-on-dark);padding:54px 0 40px}
.foot{
  display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:24px;
}
.foot .logo img{height:32px}
.foot-links{display:flex;flex-wrap:wrap;gap:26px}
.foot-links a{
  font-family:var(--font-mono);font-size:11px;letter-spacing:.12em;text-transform:uppercase;
}
.foot-links a:hover{color:var(--paper)}
.foot .copy{font-family:var(--font-mono);font-size:11px;letter-spacing:.1em}

/* ---------- reveal on scroll ---------- */
section{scroll-margin-top:96px}
.reveal{opacity:0;transform:translateY(28px);transition:opacity .8s ease,transform .8s cubic-bezier(.4,0,.2,1)}
.reveal.in{opacity:1;transform:none}
.reveal.d1{transition-delay:.1s}
.reveal.d2{transition-delay:.2s}
.reveal.d3{transition-delay:.3s}
.reveal.d4{transition-delay:.4s}

/* ---------- mobile nav ---------- */
#mobile-menu{
  position:fixed;inset:0;background:var(--ink);color:var(--paper);z-index:1050;
  display:flex;flex-direction:column;justify-content:center;padding:40px 32px;
  transform:translateY(-102%);transition:transform .5s cubic-bezier(.7,0,.2,1);
}
#mobile-menu.open{transform:none}
#mobile-menu a{
  font-family:var(--font-display);font-weight:800;text-transform:uppercase;
  font-size:clamp(30px,8vw,44px);letter-spacing:-.02em;padding:12px 0;
  border-bottom:1px solid var(--line-on-dark);
}
#mobile-menu a:hover{color:var(--coral)}
#mobile-menu .mm-foot{margin-top:34px;display:flex;gap:16px;align-items:center}

/* ---------- responsive ---------- */
@media (max-width:1020px){
  .why-grid{grid-template-columns:repeat(2,1fr)}
  .team-grid{grid-template-columns:repeat(3,1fr)}
  .hero-top{grid-template-columns:1fr}
  .about-grid{grid-template-columns:1fr;gap:46px}
  .about-visual{position:static;max-width:560px}
  .team-teaser{grid-template-columns:1fr;gap:34px}
  .tt-photo{max-width:460px}
  .tt-badge{opacity:1;transform:none}
  .pathway ol{grid-template-columns:repeat(5,minmax(150px,1fr));overflow-x:auto;padding-bottom:10px}
  .latest-grid{grid-template-columns:1fr;gap:70px}
}
@media (max-width:1020px){
  .hero-line .hl-label{display:none}
  .hero-line-mobile-labels{
    display:block;position:relative;height:18px;margin-top:-7px;
    font-family:var(--font-mono);font-size:clamp(9px,1.15vw,11px);
    line-height:1;letter-spacing:.12em;text-transform:uppercase;color:var(--muted);
    white-space:nowrap;
  }
  .hero-line-mobile-labels span{position:absolute;top:0}
  .hero-line-mobile-labels span:nth-child(1){left:0}
  .hero-line-mobile-labels span:nth-child(2){left:40%;transform:translateX(-50%)}
  .hero-line-mobile-labels span:nth-child(3){left:66.6667%;transform:translateX(-50%)}
  .hero-line-mobile-labels span:nth-child(4){right:0}
}
@media (max-width:680px){
  .hero-line-mobile-labels{font-size:9px;letter-spacing:.06em;margin-top:-4px}
}
@media (max-width:860px){
  .nav-links{display:none}
  #burger{display:block}
  .nav .btn{display:none}
  .sec-pad{padding:84px 0}
  .value{grid-template-columns:50px 1fr;grid-template-rows:auto auto}
  .value p{grid-column:2}
  .stats .wrap{grid-template-columns:1fr}
  .stat{border-left:0;border-top:1px solid var(--line);padding:36px 0}
  .stat:first-child{border-top:0}
  .way{padding:54px 32px}
}
@media (max-width:680px){
  body{font-size:16px}
  .team-grid{grid-template-columns:repeat(2,1fr)}
  .why-grid{grid-template-columns:1fr}
  .acc-inner{margin-left:0}
  .acc-btn .idx{width:44px}
  .hero{padding-top:140px}
  .post{grid-template-columns:70px 1fr;gap:16px}
  .post .thumb{width:70px;height:70px}
  .pathway ol{grid-template-columns:1fr;gap:0}
  .pathway .rail{left:8px;right:auto;top:0;bottom:0;width:3px;height:auto}
  .pathway .rail i{transform:scaleY(0);transform-origin:top}
  .pathway.in .rail i{transform:scaleY(1)}
  .pathway li{padding:14px 0 14px 40px}
  .pathway li::before{top:18px}
}
@media (max-width:460px){
  .team-grid{grid-template-columns:1fr}
  .band .item{font-size:22px}
}

/* ---------- reduced motion ---------- */
@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{animation:none!important;transition:none!important}
  .reveal{opacity:1;transform:none}
  .hl-path{stroke-dashoffset:0}
  .hl-fade{opacity:1}
  .pulse{display:none}
  .pathway li{opacity:1;transform:none}
  .pathway .rail i{transform:scaleX(1)}
}

/* Version 3 layout rhythm and editable client logos. */
:root{--section-space:104px;--section-space-mobile:76px}
.sec-pad{padding:var(--section-space) 0}
.sec-head{margin-bottom:46px}
.sec-sub,.hero-side p,.about-copy p,.team-copy p,.focus-intro .lead{line-height:1.62}
.focus-intro{padding:78px 0}
.about-copy p{margin-bottom:20px}
.about-copy p:last-child{margin-bottom:0}
.acc-inner p+p{margin-top:14px}
.acc-inner ul{margin-top:14px}
.hero-actions{display:flex;align-items:center;flex-wrap:wrap;gap:12px}
.hero-actions .btn-outline{white-space:nowrap;flex-shrink:0}
.btn-outline{border:1.5px solid var(--ink);color:var(--ink);background:rgba(255,255,255,.45)}
.btn-outline:hover{background:var(--ink);color:var(--paper)}

.band-label{font-size:12px;padding:22px 0 10px}
.band.clients-band .row{padding:16px 0}
.band.clients-band .row.is-empty{display:none}
.band.clients-band .track{align-items:center;gap:22px;animation-duration:144s}
.band.clients-band .row2 .track{animation-direction:reverse}
.client-logo-link{display:block;color:inherit;flex:none}
.client-logo-item{width:196px;height:84px;display:flex;align-items:center;justify-content:center;flex:none;padding:13px 18px;border:1px solid rgba(255,255,255,.16);border-radius:14px;background:#fff;box-shadow:0 8px 24px rgba(0,0,0,.12);transition:transform .25s,box-shadow .25s}
.client-logo-link:hover .client-logo-item,.client-logo-item:hover{transform:translateY(-2px);box-shadow:0 12px 30px rgba(0,0,0,.2)}
.client-logo-item img{width:100%;height:100%;max-width:160px;max-height:56px;object-fit:contain;filter:none!important;opacity:1!important}
.client-logo-item .lname{display:none;font-family:var(--font-mono);font-size:11px;line-height:1.3;letter-spacing:.08em;text-align:center;text-transform:uppercase;color:var(--ink)}
.client-logo-item.logo-missing .lname{display:block}

@media(max-width:760px){
  .sec-pad{padding:var(--section-space-mobile) 0}
  .sec-head{margin-bottom:36px}
  .focus-intro{padding:62px 0}
  .hero-actions{align-items:stretch}
  .hero-actions .btn{justify-content:center}
  .client-logo-item{width:164px;height:72px;padding:11px 15px}
}

/* 3.5.3: evenly distributed desktop navigation when Spanish is active. */
html[lang^="es"] .nav-links{flex:1 1 auto;max-width:760px;min-width:0;justify-content:space-between;gap:0}
html[lang^="es"] .nav-links>li{flex:0 0 auto}
html[lang^="es"] .nav-links a{white-space:nowrap}


/* 3.5.6: balanced home rhythm and vertical centering.
   Desktop uses a 160px perceived content-to-content rhythm from B1 onward.
   Header -> B1 remains an optical exception at ~96px so the hero stays visible.
   Dark/boxed blocks use symmetrical vertical breathing room wherever their
   content is meant to sit visually in the middle of the container. */

/* Desktop: 96px optical header/hero gap; 160px visual rhythm afterwards. */
.hero{padding-top:174px;padding-bottom:80px}
.band-label{padding-top:80px}
.band.clients-band{padding-bottom:64px}
.focus-intro{padding-top:80px;padding-bottom:78px}
#expertise{padding-top:82px;padding-bottom:80px}
#services{padding-top:80px;padding-bottom:80px}
#why{padding-top:80px;padding-bottom:104px}
#about{padding-top:104px;padding-bottom:45px}
#about .values{margin-top:128px}
#about .way{margin-top:58px}
#team{padding-top:45px;padding-bottom:80px}
#testimonials{padding-top:80px;padding-bottom:80px}
#contact .inner{padding-top:80px;padding-bottom:80px}
footer{padding-top:80px;padding-bottom:80px}

/* Minor optical centering inside cards that previously had unequal top/bottom padding. */
.why-card{padding-top:36px;padding-bottom:36px}

/* Tablet: 120px visual rhythm, with a smaller optical header/hero gap. */
@media (max-width:860px){
  .hero{padding-top:158px;padding-bottom:60px}
  .band-label{padding-top:60px}
  .band.clients-band{padding-bottom:44px}
  .focus-intro{padding-top:60px;padding-bottom:78px}
  #expertise{padding-top:42px;padding-bottom:60px}
  #services{padding-top:60px;padding-bottom:60px}
  #why{padding-top:60px;padding-bottom:84px}
  #about{padding-top:84px;padding-bottom:33px}
  #about .values{margin-top:88px}
  #about .way{margin-top:34px}
  #team{padding-top:33px;padding-bottom:60px}
  #testimonials{padding-top:60px;padding-bottom:60px}
  #contact .inner{padding-top:60px;padding-bottom:60px}
  footer{padding-top:60px;padding-bottom:60px}
}

/* Mobile: 112px visual rhythm and compact but symmetrical boxed sections. */
@media (max-width:760px){
  .hero{padding-top:142px;padding-bottom:56px}
  .band-label{padding-top:56px}
  .band.clients-band{padding-bottom:40px}
  .focus-intro{padding-top:56px;padding-bottom:62px}
  #expertise{padding-top:50px;padding-bottom:56px}
  #services{padding-top:56px;padding-bottom:56px}
  #why{padding-top:56px;padding-bottom:76px}
  #about{padding-top:76px;padding-bottom:29px}
  #about .values{margin-top:80px}
  #about .way{margin-top:26px}
  #team{padding-top:29px;padding-bottom:56px}
  #testimonials{padding-top:56px;padding-bottom:56px}
  #contact .inner{padding-top:56px;padding-bottom:56px}
  footer{padding-top:56px;padding-bottom:56px}
}


/* 3.5.7: fine-grained desktop vertical spacing based on the user's measured layout.
   These rules intentionally replace the broad 3.5.6 rhythm only on desktop.
   EN and ES share exactly the same geometry. */

/* Keep the three value rows visually centred between their divider lines. */
.value{align-items:center}

/* Keep the three statistics labels on one line in both EN and ES. */
.stat .lab{
  max-width:none;
  white-space:nowrap;
  font-size:clamp(10px,1.05vw,12px);
  letter-spacing:.12em;
}

@media (min-width:861px){
  /* 3.6.1: move the hero copy ~0.3 cm closer to the header (about 11 CSS px on desktop). */
  .hero{padding-top:99px;padding-bottom:99px}

  /* Keep the longer Spanish consultancy descriptor on one line. */
  html[lang^="es"] .hero .eyebrow{white-space:nowrap;font-size:18px;letter-spacing:.08em}

  /* B1 transfer line -> B2 dark client block: user-measured 6.7 cm -> 2.2 cm. */

  /* B2 dark block -> 'Confían en nosotros': reduce by ~1 cm. */
  .band-label{padding-top:42px}

  /* End of B3 lead -> B4 'Áreas de especialización': 4.5 cm -> 2.2 cm. */
  .focus-intro{padding-bottom:39px}
  #expertise{padding-top:39px}

  /* Start of dark B5 panel -> 'Qué hacemos': 2.2 cm -> 1.9 cm. */
  #services{padding-top:69px}

  /* End of stats panel -> B8 'Quiénes somos': 2.8 cm -> 2.2 cm. */
  #about{padding-top:82px}

  /* End of final About paragraph -> first Values divider: 3.2 cm -> 2.2 cm. */
  #about .values{margin-top:88px}

  /* End of Values divider -> dark 'Nuestra manera' panel: 1.4 cm -> 2.2 cm. */
  #about .way{margin-top:91px}

  /* Dark panel top -> 'Nuestra manera': 1.9 cm -> 1.7 cm.
     Equal bottom padding keeps the content optically centred in the panel. */
  .way{padding:63px 64px}

  /* 3.6.14: subtle horizontal-width adjustments requested for the home only. */
  .way blockquote{max-width:1000px}
  #contact .inner > p{max-width:none}

  /* Team light-blue panel: image bottom -> panel bottom, 1.9 cm -> 1.1 cm. */
  #team{padding-bottom:46px}

  /* Testimonials score-card bottom -> section bottom, 1.9 cm -> 2.2 cm. */
  #testimonials{padding-bottom:93px}

  /* Contact address -> end of dark contact panel, 3.1 cm -> 2.2 cm. */
  #contact .inner{padding-bottom:57px}
}

@media (min-width:1200px){
  /* Move the descriptive/CTA column approximately 3 cm to the right on the audited desktop layout. */
  .hero-side{margin-left:82px}
  html[lang^="es"] .hero-top{grid-template-columns:1.78fr .92fr;gap:32px}
}

/* 3.6.0: expertise cards link to their matching Technology portfolio filter. */
.exp-card[href]{cursor:pointer}
.exp-card[href]:focus-visible{border-color:var(--coral);box-shadow:var(--shadow)}


/* 3.6.3: curated Client voices display one testimonial at a time, navigated manually. */
@media (min-width:861px){
  /* Keep the audited compact footer height from 3.6.2. */
  footer{padding-top:45px;padding-bottom:45px}
}
@media (max-width:520px){
  .car-ctrl{gap:12px}
}

/* 3.6.17: testimonial intro keeps one line and aligns with the main content left edge. */
@media (min-width:1200px){
  #testimonials .sec-sub{
    flex:0 0 100%;
    max-width:none;
    width:100%;
    margin-left:0;
    white-space:nowrap;
  }
}


/* 3.6.47.1: robust mobile/tablet width guards after real-device audit.
   Keep the client marquee full-bleed without allowing its max-content track
   to enlarge the page, and size logo cards with viewport-safe dimensions. */
main#top{width:100%;max-width:100%;min-width:0;overflow-x:clip}
.band.clients-band{width:100%;max-width:100%;min-width:0;overflow:hidden}
.band.clients-band .row{width:100%;max-width:100%;min-width:0;overflow:hidden}
.band.clients-band .track{max-width:none;min-width:max-content}

@media (max-width:760px){
  .band.clients-band{
    width:100vw;
    max-width:none;
  }
  .band.clients-band .track{gap:14px}
  .client-logo-item{
    width:clamp(132px,42vw,158px);
    height:70px;
    padding:10px 12px;
  }
  .client-logo-item img{
    max-width:100%;
    max-height:50px;
  }
}

@media (max-width:360px){
  .band.clients-band .track{gap:12px}
  .client-logo-item{
    width:clamp(126px,41vw,146px);
    height:66px;
    padding:9px 10px;
  }
  .client-logo-item img{max-height:46px}
}

/* 3.6.47.2: keep the Home hero title fully visible without horizontal transforms.
   The three existing title spans remain the desktop line structure; on narrow
   screens they can wrap only at normal word boundaries. */
@media (max-width:1020px){
  .hero h1{
    font-size:clamp(31px,9.5vw,42px);
    line-height:.98;
    letter-spacing:-.03em;
  }
  .hero h1 > span{
    width:100%;
    max-width:100%;
    white-space:normal;
    overflow-wrap:normal;
    word-break:normal;
    hyphens:none;
  }
}

/* 3.6.47.3: tiny ES-only mobile correction. Keep the complete word
   TRANSFERENCIA on one line without changing the English title or the rest
   of the authored line. The word is wrapped by home.js only in Spanish. */
@media (max-width:760px){
  html[lang^="es"] .hero h1 .hero-transfer-word,
  html[lang^="es"] .hero h1 .hero-research-word{font-size:.94em}
}


/* On desktop the canonical title stays on its three authored lines. Spanish
   uses balanced line-specific font sizes because those lines differ greatly
   in length; this keeps the existing two-column hero layout unchanged. */
@media (min-width:1021px){
  .hero h1{font-size:44px}
  .hero h1 > span{white-space:nowrap}
  html[lang^="es"] .hero h1 > span:nth-child(1){font-size:52px}
  html[lang^="es"] .hero h1 > span:nth-child(2){font-size:40px}
  html[lang^="es"] .hero h1 > span:nth-child(3){font-size:31px}
}