/* =============================================================
   HERO · Soluciones a tu medida
   Hoja de estilos principal — construida sobre la identidad visual v1
   Color: Ink · Signal · Flow · Paper · Grey
   Tipografía: Sora (títulos) · Archivo (texto) · IBM Plex Mono (etiquetas)
   ============================================================= */

/* ---------- 1. TOKENS ---------- */
:root{
  /* Paleta de marca */
  --ink:#0A0C0F;
  --signal:#1B4FD8;
  --flow:#5FA8B8;
  --paper:#F4F3EF;
  --grey:#6E747D;
  --white:#FFFFFF;

  /* Derivados */
  --signal-dark:#1642B4;
  --ink-soft:#171B21;
  --line:#E3E1DB;          /* borde sobre claro */
  --line-strong:#D3D0C8;
  --line-dark:rgba(244,243,239,.14);   /* borde sobre tinta */
  --line-dark-soft:rgba(244,243,239,.08);
  --text-on-ink:#F4F3EF;
  --text-on-ink-dim:rgba(244,243,239,.62);
  --danger:#B3261E;

  /* Tipografía */
  --font-title:'Sora','Segoe UI',system-ui,-apple-system,Helvetica,Arial,sans-serif;
  --font-body:'Archivo','Segoe UI',system-ui,-apple-system,Helvetica,Arial,sans-serif;
  --font-mono:'IBM Plex Mono','SFMono-Regular',Consolas,'Liberation Mono',monospace;

  /* Escala (identidad: 52 / 32 / 22 / 17 / 15 / 12) */
  --h1:clamp(2.25rem, 1.35rem + 3.2vw, 3.25rem);
  --h2:clamp(1.65rem, 1.2rem + 1.6vw, 2rem);
  --h3:clamp(1.2rem, 1.08rem + .4vw, 1.375rem);
  --p:1.0625rem;   /* 17 */
  --s:.9375rem;    /* 15 */
  --l:.75rem;      /* 12 */

  /* Ritmo */
  --container:1180px;
  --gutter:clamp(1.25rem, 4vw, 2.5rem);
  --section-y:clamp(4.5rem, 8vw, 8.5rem);
  --radius:14px;
  --radius-sm:10px;

  --ease:cubic-bezier(.22,.61,.36,1);
  --nav-h:72px;
}

/* ---------- 2. RESET ---------- */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
html:focus-within{scroll-behavior:smooth}
body{
  margin:0;
  background:var(--white);
  color:var(--ink);
  font-family:var(--font-body);
  font-size:var(--p);
  line-height:1.6;
  font-weight:400;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  overflow-x:hidden;
}
body.is-locked{overflow:hidden}
img,svg{max-width:100%;display:block}
h1,h2,h3{font-family:var(--font-title);font-weight:600;margin:0;text-wrap:balance}
h1{font-size:var(--h1);line-height:1.05;letter-spacing:-.01em}
h2{font-size:var(--h2);line-height:1.15;letter-spacing:-.01em}
h3{font-size:var(--h3);line-height:1.25;font-weight:500;letter-spacing:-.005em}
p{margin:0}
ul,ol,dl,dd{margin:0;padding:0}
ul,ol{list-style:none}
a{color:inherit;text-decoration:none}
button,input,textarea,select{font:inherit;color:inherit}
:focus-visible{outline:2px solid var(--signal);outline-offset:3px;border-radius:2px}
.section--ink :focus-visible{outline-color:var(--flow)}
::selection{background:var(--signal);color:var(--white)}

.sr-only{
  position:absolute;width:1px;height:1px;padding:0;margin:-1px;
  overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0;
}
.skip-link{
  position:fixed;top:8px;left:8px;z-index:200;
  transform:translateY(-200%);
  background:var(--ink);color:var(--text-on-ink);
  padding:.7rem 1.1rem;border-radius:var(--radius-sm);
  font-family:var(--font-mono);font-size:var(--l);letter-spacing:.12em;text-transform:uppercase;
  transition:transform .2s var(--ease);
}
.skip-link:focus{transform:translateY(0)}

/* ---------- 3. LAYOUT ---------- */
[hidden]{display:none !important}
section[id],footer[id]{scroll-margin-top:calc(var(--nav-h) + 12px)}
.container{width:100%;max-width:var(--container);margin-inline:auto;padding-inline:var(--gutter)}
.section{padding-block:var(--section-y);position:relative}
.section--paper{background:var(--paper)}
.section--ink{background:var(--ink);color:var(--text-on-ink)}
.section--ink h1,.section--ink h2,.section--ink h3{color:var(--text-on-ink)}

.grid{display:grid;gap:1.25rem}
.grid--2{grid-template-columns:repeat(2,minmax(0,1fr))}
.grid--3{grid-template-columns:repeat(3,minmax(0,1fr))}
.grid--4{grid-template-columns:repeat(4,minmax(0,1fr))}
@media (max-width:960px){
  .grid--3,.grid--4{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:640px){
  .grid--2,.grid--3,.grid--4{grid-template-columns:minmax(0,1fr)}
}

/* ---------- 4. TIPOGRAFÍA DE APOYO ---------- */
.label{
  font-family:var(--font-mono);font-weight:500;font-size:var(--l);
  letter-spacing:.12em;text-transform:uppercase;color:var(--grey);margin:0;
}
.label--signal{color:var(--signal)}
.label--flow{color:var(--flow)}
.lead{font-size:clamp(1.0625rem,1rem + .35vw,1.1875rem);line-height:1.6;color:var(--text-on-ink-dim)}
.lead--dark{color:var(--grey)}

.sec-head{max-width:44rem;margin-bottom:clamp(2.25rem,4vw,3.5rem)}
.sec-head .label{margin-bottom:1rem}
.sec-head h2{margin-bottom:1.1rem}
.sec-head__text{color:var(--grey);font-size:var(--p)}
.sec-head__text strong{color:var(--ink);font-weight:500}
.section--ink .sec-head__text{color:var(--text-on-ink-dim)}
.sec-head--center{margin-inline:auto;text-align:center}

.sec-foot{
  margin-top:clamp(2rem,4vw,3rem);
  display:flex;flex-wrap:wrap;align-items:center;gap:1rem 1.5rem;
}
.sec-foot__note{color:var(--grey);font-size:var(--s)}

/* ---------- 5. BOTONES ---------- */
.btn{
  --btn-bg:transparent;--btn-fg:var(--ink);--btn-bd:transparent;
  display:inline-flex;align-items:center;justify-content:center;gap:.6rem;
  background:var(--btn-bg);color:var(--btn-fg);
  border:1px solid var(--btn-bd);
  padding:.85rem 1.5rem;border-radius:var(--radius-sm);
  font-family:var(--font-body);font-weight:500;font-size:var(--s);
  line-height:1;cursor:pointer;text-align:center;
  transition:background .22s var(--ease),border-color .22s var(--ease),
             color .22s var(--ease),transform .22s var(--ease),box-shadow .22s var(--ease);
}
.btn:hover{transform:translateY(-1px)}
.btn:active{transform:translateY(0)}
.btn--primary{--btn-bg:var(--signal);--btn-fg:var(--white);--btn-bd:var(--signal)}
.btn--primary:hover{--btn-bg:var(--signal-dark);--btn-bd:var(--signal-dark);box-shadow:0 8px 24px -12px rgba(27,79,216,.9)}
.btn--dark{--btn-bg:var(--ink);--btn-fg:var(--text-on-ink);--btn-bd:var(--ink)}
.btn--dark:hover{--btn-bg:var(--ink-soft);box-shadow:0 10px 24px -14px rgba(10,12,15,.9)}
.btn--ghost{--btn-fg:var(--text-on-ink);--btn-bd:rgba(244,243,239,.3)}
.btn--ghost:hover{--btn-bd:var(--text-on-ink);--btn-bg:rgba(244,243,239,.06)}
.btn--ghost-dark{--btn-fg:var(--ink);--btn-bd:var(--line-strong)}
.btn--ghost-dark:hover{--btn-bd:var(--ink)}
.btn--sm{padding:.65rem 1.15rem;font-size:.875rem}
.btn--lg{padding:1.05rem 2rem;font-size:var(--p)}
.btn--block{width:100%}

/* ---------- 6. NAVBAR ---------- */
.nav{
  position:sticky;top:0;z-index:100;
  color:var(--text-on-ink);
  background:transparent;
  border-bottom:1px solid transparent;
  transition:background .3s var(--ease),border-color .3s var(--ease),backdrop-filter .3s var(--ease);
}
.nav.is-stuck{
  background:rgba(10,12,15,.88);
  backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);
  border-bottom-color:var(--line-dark-soft);
}
.nav__inner{display:flex;align-items:center;justify-content:space-between;gap:1.5rem;height:var(--nav-h)}
.brand{display:inline-flex;align-items:center;gap:.6rem}
.brand__mark{width:22px;height:22px;color:currentColor;flex:none}
.brand__word{
  font-family:var(--font-title);font-weight:600;font-size:1.125rem;
  letter-spacing:.08em;line-height:1;
}
.nav__links{display:flex;align-items:center;gap:2rem}
.nav__links a{
  position:relative;font-size:var(--s);color:rgba(244,243,239,.72);
  padding-block:.35rem;transition:color .2s var(--ease);
}
.nav__links a::after{
  content:"";position:absolute;left:0;right:0;bottom:0;height:1.5px;
  background:var(--signal);transform:scaleX(0);transform-origin:left;
  transition:transform .25s var(--ease);
}
.nav__links a:hover,.nav__links a.is-active{color:var(--text-on-ink)}
.nav__links a:hover::after,.nav__links a.is-active::after{transform:scaleX(1)}
.nav__actions{display:flex;align-items:center;gap:.75rem}

.burger{
  display:none;width:42px;height:42px;padding:0;
  background:transparent;border:1px solid var(--line-dark);border-radius:var(--radius-sm);
  cursor:pointer;position:relative;
}
.burger span{
  position:absolute;left:11px;width:20px;height:1.5px;background:var(--text-on-ink);
  transition:transform .25s var(--ease),opacity .2s var(--ease);
}
.burger span:nth-child(1){top:17px}
.burger span:nth-child(2){top:23px}
.burger[aria-expanded="true"] span:nth-child(1){transform:translateY(3px) rotate(45deg)}
.burger[aria-expanded="true"] span:nth-child(2){transform:translateY(-3px) rotate(-45deg)}

.menu{
  position:fixed;inset:var(--nav-h) 0 0;z-index:99;
  background:var(--ink);
  padding-block:2rem 3rem;
  overflow-y:auto;
  animation:menuIn .28s var(--ease);
}
@keyframes menuIn{from{opacity:0;transform:translateY(-8px)}to{opacity:1;transform:none}}
.menu__nav{display:flex;flex-direction:column;gap:.25rem}
.menu__nav a:not(.btn){
  display:flex;align-items:baseline;gap:1rem;
  font-family:var(--font-title);font-weight:500;font-size:1.5rem;
  padding-block:.9rem;border-bottom:1px solid var(--line-dark-soft);
  color:var(--text-on-ink);
}
.menu__idx{font-family:var(--font-mono);font-size:var(--l);color:var(--grey);letter-spacing:.12em}
.menu .btn{margin-top:1.75rem}

@media (max-width:1024px){
  .nav__links{display:none}
  .burger{display:block}
  .nav__actions .btn--primary{display:none}
}
@media (max-width:420px){
  .nav__actions .btn--primary{display:none}
}

/* ---------- 7. HERO ---------- */
.hero{
  position:relative;overflow:hidden;
  padding-block:clamp(3.5rem,7vw,6rem) clamp(4.5rem,8vw,7.5rem);
  margin-top:calc(var(--nav-h) * -1);
  padding-top:calc(var(--nav-h) + clamp(3rem,6vw,5rem));
}
.hero__trama{
  position:absolute;inset:auto 0 -6% 0;height:46%;
  color:var(--paper);opacity:.05;pointer-events:none;
}
.hero__trama svg{width:100%;height:100%}
.hero__inner{
  position:relative;display:grid;gap:clamp(3rem,5vw,4.5rem);
  grid-template-columns:minmax(0,1.02fr) minmax(0,1fr);
  align-items:center;
}
@media (max-width:980px){.hero__inner{grid-template-columns:minmax(0,1fr)}}

.hero__copy .label{margin-bottom:1.25rem}
.hero__copy h1{margin-bottom:1.35rem;max-width:14ch}
@media (max-width:980px){.hero__copy h1{max-width:20ch}}
.hero__copy .lead{max-width:46ch;margin-bottom:2.25rem}
.hero__ctas{display:flex;flex-wrap:wrap;gap:.85rem;margin-bottom:2.5rem}
.hero__trust{
  display:flex;flex-wrap:wrap;align-items:center;gap:.5rem 1.15rem;
  padding-top:1.5rem;border-top:1px solid var(--line-dark-soft);
  font-family:var(--font-mono);font-size:var(--l);letter-spacing:.1em;
  text-transform:uppercase;color:var(--grey);
}
.hero__trust li{display:flex;align-items:center;gap:1.15rem}
.hero__trust li:not(:last-child)::after{content:"·";color:var(--flow)}
@media (max-width:520px){
  .hero__ctas .btn{width:100%}
}

/* Interfaz ficticia */
.hero__visual{position:relative}
.mock{
  background:linear-gradient(180deg,#12161C 0%,#0D1116 100%);
  border:1px solid var(--line-dark);border-radius:var(--radius);
  box-shadow:0 40px 80px -50px rgba(0,0,0,.9);
  overflow:hidden;
}
.mock__bar{
  display:flex;align-items:center;gap:.9rem;
  padding:.75rem 1rem;border-bottom:1px solid var(--line-dark-soft);
  background:rgba(244,243,239,.02);
}
.mock__dots{display:flex;gap:.35rem}
.mock__dots i{width:8px;height:8px;border-radius:50%;background:rgba(244,243,239,.18)}
.mock__path{
  font-family:var(--font-mono);font-size:.6875rem;letter-spacing:.08em;
  color:var(--grey);text-transform:lowercase;
}
.mock__body{padding:clamp(1.1rem,2.5vw,1.6rem)}

.mock__flow{display:flex;align-items:center;gap:.4rem;margin-bottom:1.4rem}
.fnode{flex:1;display:flex;flex-direction:column;align-items:center;gap:.5rem;min-width:0}
.fnode__ico{
  width:38px;height:38px;display:grid;place-items:center;
  border:1px solid var(--line-dark);border-radius:11px;
  background:rgba(244,243,239,.03);color:var(--text-on-ink-dim);
}
.fnode__ico svg{width:17px;height:17px;fill:none;stroke:currentColor;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round}
.fnode__txt{
  font-family:var(--font-mono);font-size:.625rem;letter-spacing:.08em;
  text-transform:uppercase;color:var(--grey);white-space:nowrap;
}
.fnode.is-done .fnode__ico{color:var(--flow);border-color:rgba(95,168,184,.45)}
.fnode.is-active .fnode__ico{
  color:var(--white);background:var(--signal);border-color:var(--signal);
  box-shadow:0 0 0 4px rgba(27,79,216,.18);
}
.fnode.is-active .fnode__txt{color:var(--text-on-ink)}
.flink{position:relative;flex:0 0 auto;width:clamp(14px,4vw,34px);height:1px;background:var(--line-dark);margin-bottom:1.35rem;overflow:hidden}
.flink i{
  position:absolute;top:-1px;left:-30%;width:30%;height:3px;border-radius:2px;
  background:var(--flow);animation:pulse 2.8s var(--ease) infinite;
}
.flink:nth-of-type(2) i{animation-delay:.35s}
.flink:nth-of-type(3) i{animation-delay:.7s}
@keyframes pulse{0%{left:-30%;opacity:0}25%{opacity:1}60%{left:100%;opacity:0}100%{left:100%;opacity:0}}

.mock__grid{display:grid;grid-template-columns:minmax(0,1.35fr) minmax(0,1fr);gap:.9rem}
@media (max-width:420px){.mock__grid{grid-template-columns:minmax(0,1fr)}}
.mrows{
  border:1px solid var(--line-dark-soft);border-radius:var(--radius-sm);
  padding:.35rem .8rem;background:rgba(244,243,239,.015);
}
.mrows li{
  display:flex;align-items:center;justify-content:space-between;gap:.6rem;
  padding-block:.6rem;border-bottom:1px solid var(--line-dark-soft);
}
.mrows li:last-child{border-bottom:0}
.mrows__k{font-size:.8125rem;color:var(--text-on-ink-dim);min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.pill{
  flex:none;font-family:var(--font-mono);font-size:.5625rem;letter-spacing:.1em;text-transform:uppercase;
  padding:.25rem .5rem;border-radius:999px;border:1px solid var(--line-dark);color:var(--grey);
}
.pill--ok{color:var(--flow);border-color:rgba(95,168,184,.4);background:rgba(95,168,184,.08)}
.pill--wait{color:#C9CDD3;border-color:var(--line-dark)}

.mchart{
  border:1px solid var(--line-dark-soft);border-radius:var(--radius-sm);
  padding:.8rem;display:flex;flex-direction:column;justify-content:space-between;gap:.9rem;
  background:rgba(244,243,239,.015);
}
.mchart__label{font-family:var(--font-mono);font-size:.5625rem;letter-spacing:.1em;text-transform:uppercase;color:var(--grey)}
.mchart__bars{display:flex;align-items:flex-end;gap:5px;height:78px}
.mchart__bars i{
  flex:1;height:var(--h);min-height:12px;border-radius:999px;
  background:rgba(244,243,239,.22);
  transform-origin:bottom;animation:grow .9s var(--ease) both;
}
.mchart__bars i.is-signal{background:var(--signal)}
.mchart__bars i.is-flow{background:var(--flow)}
.mchart__bars i:nth-child(2){animation-delay:.06s}
.mchart__bars i:nth-child(3){animation-delay:.12s}
.mchart__bars i:nth-child(4){animation-delay:.18s}
.mchart__bars i:nth-child(5){animation-delay:.24s}
.mchart__bars i:nth-child(6){animation-delay:.3s}
.mchart__bars i:nth-child(7){animation-delay:.36s}
.mchart__bars i:nth-child(8){animation-delay:.42s}
@keyframes grow{from{transform:scaleY(.05);opacity:0}to{transform:scaleY(1);opacity:1}}

.chip-float{
  position:absolute;right:-.5rem;bottom:-1.1rem;
  display:inline-flex;align-items:center;gap:.55rem;
  background:var(--paper);color:var(--ink);
  padding:.6rem .9rem;border-radius:999px;
  font-family:var(--font-mono);font-size:.625rem;letter-spacing:.09em;text-transform:uppercase;
  box-shadow:0 16px 32px -22px rgba(0,0,0,.9);
}
.chip-float .dot{
  width:7px;height:7px;border-radius:50%;background:var(--signal);
  box-shadow:0 0 0 0 rgba(27,79,216,.55);animation:ping 2.4s ease-out infinite;
}
@keyframes ping{
  0%{box-shadow:0 0 0 0 rgba(27,79,216,.5)}
  70%{box-shadow:0 0 0 8px rgba(27,79,216,0)}
  100%{box-shadow:0 0 0 0 rgba(27,79,216,0)}
}
@media (max-width:980px){.chip-float{right:auto;left:0;bottom:-1.1rem}}

/* ---------- 8. CARDS (problema) ---------- */
.cards .card{
  background:var(--white);border:1px solid var(--line);border-radius:var(--radius);
  padding:1.6rem 1.5rem 1.7rem;
  transition:border-color .25s var(--ease),transform .25s var(--ease),box-shadow .25s var(--ease);
}
.cards .card:hover{
  border-color:var(--ink);transform:translateY(-3px);
  box-shadow:0 22px 40px -34px rgba(10,12,15,.8);
}
.card__ico{
  display:grid;place-items:center;width:40px;height:40px;margin-bottom:1.4rem;
  border:1px solid var(--line);border-radius:11px;color:var(--ink);
  transition:background .25s var(--ease),color .25s var(--ease),border-color .25s var(--ease);
}
.card__ico svg{width:19px;height:19px;fill:none;stroke:currentColor;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round}
.cards .card:hover .card__ico{background:var(--signal);border-color:var(--signal);color:var(--white)}
.card h3{margin-bottom:.5rem}
.card p{color:var(--grey);font-size:var(--s)}

/* ---------- 9. SOLUCIONES ---------- */
.sols{gap:1.25rem}
.sol{
  position:relative;border:1px solid var(--line);border-radius:var(--radius);
  padding:clamp(1.5rem,3vw,2.1rem);background:var(--white);
  transition:border-color .25s var(--ease),box-shadow .25s var(--ease);
}
.sol::before{
  content:"";position:absolute;left:-1px;top:1.9rem;width:3px;height:0;
  background:var(--signal);border-radius:2px;
  transition:height .3s var(--ease);
}
.sol:hover{border-color:var(--line-strong);box-shadow:0 26px 50px -44px rgba(10,12,15,.9)}
.sol:hover::before{height:44px}
.sol__head{display:flex;align-items:center;justify-content:space-between;margin-bottom:1.5rem}
.sol__ico{
  display:grid;place-items:center;width:44px;height:44px;
  background:var(--ink);color:var(--paper);border-radius:12px;
}
.sol__ico svg{width:21px;height:21px;fill:none;stroke:currentColor;stroke-width:1.4;stroke-linecap:round;stroke-linejoin:round}
.sol h3{margin-bottom:.55rem}
.sol > p{color:var(--grey);font-size:var(--s);margin-bottom:1.4rem}
.tags{display:flex;flex-wrap:wrap;gap:.45rem}
.tags li{
  font-family:var(--font-mono);font-size:.6875rem;letter-spacing:.06em;
  padding:.35rem .65rem;border:1px solid var(--line);border-radius:999px;
  color:var(--grey);background:var(--paper);
  transition:border-color .2s var(--ease),color .2s var(--ease);
}
.sol:hover .tags li{border-color:var(--line-strong);color:var(--ink)}

/* ---------- 10. DIFERENCIADOR ---------- */
.diff{text-align:center}
.diff__head{max-width:52rem;margin-inline:auto}
.sep{display:inline-block;width:54px;color:var(--paper);margin-bottom:1.75rem}
.sep svg{width:100%;height:auto}
.sep__accent{fill:var(--signal)}
.diff__title{font-size:clamp(2rem,1.2rem + 3vw,3.25rem);line-height:1.05;margin-bottom:.6rem}
.diff__sub{
  font-family:var(--font-title);font-weight:500;
  font-size:clamp(1.15rem,1rem + 1vw,1.6rem);color:var(--flow);
}

.seq{
  display:flex;flex-wrap:wrap;align-items:stretch;justify-content:center;gap:.6rem;
  margin-block:clamp(2.75rem,5vw,4rem);
}
.seq__item{
  position:relative;flex:1 1 150px;max-width:220px;
  border:1px solid var(--line-dark);border-radius:var(--radius-sm);
  padding:1.15rem .9rem;background:rgba(244,243,239,.02);
  display:flex;flex-direction:column;align-items:center;gap:.55rem;
  transition:border-color .25s var(--ease),background .25s var(--ease),transform .25s var(--ease);
}
.seq__item:hover{border-color:var(--flow);background:rgba(95,168,184,.06);transform:translateY(-3px)}
.seq__item:not(:last-child)::after{
  content:"";position:absolute;right:calc(-.6rem - 1px);top:50%;width:.6rem;height:1px;
  background:var(--line-dark);
}
@media (max-width:760px){.seq__item:not(:last-child)::after{display:none}}
.seq__n{font-family:var(--font-mono);font-size:.625rem;letter-spacing:.12em;color:var(--grey)}
.seq__t{font-family:var(--font-title);font-weight:500;font-size:1.0625rem;color:var(--text-on-ink)}

.diff__foot{max-width:46rem;margin-inline:auto}
.diff__foot p{color:var(--text-on-ink-dim)}
.diff__claim{
  margin-top:1.75rem;font-family:var(--font-title);font-weight:600;
  font-size:clamp(1.25rem,1rem + 1.2vw,1.75rem);color:var(--text-on-ink);
  display:inline-block;padding-bottom:.35rem;
  border-bottom:2px solid var(--signal);
}

/* ---------- 11. CASOS ---------- */
.casos{gap:1.25rem}
.caso{
  background:var(--white);border:1px solid var(--line);border-radius:var(--radius);
  padding:clamp(1.4rem,2.5vw,1.9rem);
  transition:border-color .25s var(--ease),transform .25s var(--ease),box-shadow .25s var(--ease);
}
.caso:hover{border-color:var(--ink);transform:translateY(-3px);box-shadow:0 26px 44px -38px rgba(10,12,15,.8)}
.caso .label{margin-bottom:.9rem}
.caso h3{margin-bottom:1.3rem;padding-bottom:1.3rem;border-bottom:1px solid var(--line)}
.caso dt{
  font-family:var(--font-mono);font-size:.625rem;letter-spacing:.12em;text-transform:uppercase;
  color:var(--grey);margin-bottom:.3rem;
}
.caso dd{font-size:var(--s);color:var(--ink);margin-bottom:1rem;line-height:1.55}
.caso dd:last-child{margin-bottom:0}

/* ---------- 12. PROCESO ---------- */
.steps{
  display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:1rem;
  position:relative;
}
.steps::before{
  content:"";position:absolute;left:0;right:0;top:19px;height:1px;background:var(--line);
}
.step{position:relative;padding-top:3.25rem}
.step__n{
  position:absolute;top:0;left:0;
  display:grid;place-items:center;width:38px;height:38px;border-radius:50%;
  background:var(--white);border:1px solid var(--line-strong);
  font-family:var(--font-mono);font-size:.6875rem;letter-spacing:.06em;color:var(--ink);
  transition:background .25s var(--ease),color .25s var(--ease),border-color .25s var(--ease);
}
.step:hover .step__n{background:var(--ink);border-color:var(--ink);color:var(--paper)}
.step h3{margin-bottom:.5rem}
.step p{color:var(--grey);font-size:var(--s);max-width:26ch}
@media (max-width:1024px){
  .steps{grid-template-columns:repeat(2,minmax(0,1fr));gap:2rem 1.5rem}
  .steps::before{display:none}
}
@media (max-width:640px){
  .steps{grid-template-columns:minmax(0,1fr);gap:0}
  .step{padding:0 0 2rem 3.75rem;min-height:3.5rem}
  .step:not(:last-child)::before{
    content:"";position:absolute;left:19px;top:44px;bottom:.4rem;width:1px;background:var(--line);
  }
  .step p{max-width:none}
}

/* ---------- 13. CONFIANZA ---------- */
.trust{display:grid;grid-template-columns:minmax(0,.95fr) minmax(0,1.05fr);gap:clamp(2.5rem,5vw,4.5rem);align-items:start}
@media (max-width:900px){.trust{grid-template-columns:minmax(0,1fr)}}
.trust__left .label{margin-bottom:1rem}
.trust__left h2{margin-bottom:1.75rem}
.quote{
  margin:0 0 2rem;padding:1.4rem 0 1.4rem 1.5rem;
  border-left:2px solid var(--signal);
  font-family:var(--font-title);font-weight:500;
  font-size:clamp(1.0625rem,1rem + .5vw,1.25rem);line-height:1.45;
}
.trust__list{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:1.5rem 1.75rem}
@media (max-width:560px){.trust__list{grid-template-columns:minmax(0,1fr)}}
.trust__list li{display:flex;gap:.85rem;align-items:flex-start}
.trust__list li > span{
  flex:none;display:grid;place-items:center;width:22px;height:22px;margin-top:2px;
  border-radius:50%;background:var(--ink);color:var(--paper);font-size:.6875rem;
}
.trust__list h3{font-size:1rem;font-weight:500;margin-bottom:.2rem}
.trust__list p{color:var(--grey);font-size:.875rem;line-height:1.5}

/* ---------- 14. TECNOLOGÍA ---------- */
.techs{gap:1px;background:var(--line-dark-soft);border:1px solid var(--line-dark-soft);border-radius:var(--radius);overflow:hidden}
.tech{
  background:var(--ink);padding:1.6rem 1.5rem;
  transition:background .25s var(--ease);
}
.tech:hover{background:var(--ink-soft)}
.tech h3{font-size:1.0625rem;font-weight:500;margin-bottom:.4rem;color:var(--text-on-ink)}
.tech h3::before{
  content:"";display:inline-block;width:6px;height:14px;border-radius:3px;
  background:var(--flow);margin-right:.6rem;vertical-align:-2px;
  transition:background .25s var(--ease);
}
.tech:hover h3::before{background:var(--signal)}
.tech p{color:var(--text-on-ink-dim);font-size:.875rem;line-height:1.55}

/* ---------- 15. FORMULARIO ---------- */
.form-wrap{
  display:grid;grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr);
  gap:clamp(2.5rem,5vw,4.5rem);align-items:start;
}
@media (max-width:960px){.form-wrap{grid-template-columns:minmax(0,1fr)}}
.form-intro{position:sticky;top:calc(var(--nav-h) + 2rem)}
@media (max-width:960px){.form-intro{position:static}}
.form-intro .label{margin-bottom:1rem}
.form-intro h2{margin-bottom:.85rem}
.form-intro .lead{margin-bottom:1.1rem}
.form-intro__mini{
  font-family:var(--font-mono);font-size:var(--l);letter-spacing:.1em;
  text-transform:uppercase;color:var(--signal);
}
.form-intro__list{margin-top:2rem;display:grid;gap:.85rem}
.form-intro__list li{
  position:relative;padding-left:1.4rem;color:var(--grey);font-size:var(--s);
}
.form-intro__list li::before{
  content:"";position:absolute;left:0;top:.6em;width:6px;height:6px;border-radius:50%;
  background:var(--flow);
}

.form-card{
  position:relative;
  border:1px solid var(--line);border-radius:var(--radius);
  background:var(--paper);
  padding:clamp(1.5rem,3.5vw,2.5rem);
}
.field{border:0;padding:0;margin:0 0 1.6rem}
.field legend,.field > label{
  display:block;font-size:var(--s);font-weight:500;line-height:1.45;
  margin-bottom:.65rem;padding:0;
}
.q{
  font-family:var(--font-mono);font-size:.625rem;letter-spacing:.12em;
  color:var(--signal);margin-right:.5rem;
}
.hint{font-family:var(--font-body);font-weight:400;font-size:.8125rem;color:var(--grey);margin-left:.35rem}
.opt{font-weight:400;color:var(--grey);font-size:.8125rem}
.req{color:var(--signal)}

input[type=text],input[type=email],input[type=tel],textarea{
  width:100%;padding:.85rem .95rem;
  background:var(--white);border:1px solid var(--line-strong);border-radius:var(--radius-sm);
  font-size:var(--s);line-height:1.5;
  transition:border-color .2s var(--ease),box-shadow .2s var(--ease);
}
textarea{resize:vertical;min-height:88px}
input::placeholder,textarea::placeholder{color:#A4A29B}
input:hover,textarea:hover{border-color:var(--grey)}
input:focus,textarea:focus{
  outline:0;border-color:var(--signal);box-shadow:0 0 0 3px rgba(27,79,216,.14);
}
input[aria-invalid="true"],textarea[aria-invalid="true"]{border-color:var(--danger)}
#herramientas-detalle{margin-top:.75rem}

.chips{display:flex;flex-wrap:wrap;gap:.5rem}
.chip{position:relative;cursor:pointer}
.chip input{position:absolute;opacity:0;width:0;height:0}
.chip span{
  display:inline-block;padding:.6rem .95rem;
  background:var(--white);border:1px solid var(--line-strong);border-radius:999px;
  font-size:.875rem;line-height:1;color:var(--ink);
  transition:background .18s var(--ease),border-color .18s var(--ease),color .18s var(--ease);
}
.chip:hover span{border-color:var(--grey)}
.chip input:checked + span{background:var(--ink);border-color:var(--ink);color:var(--paper)}
.chip input:focus-visible + span{outline:2px solid var(--signal);outline-offset:2px}
.chips--radio .chip input:checked + span{background:var(--signal);border-color:var(--signal);color:var(--white)}

.grid-2{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:1rem}
@media (max-width:520px){.grid-2{grid-template-columns:minmax(0,1fr)}}
.sub label{display:block;font-size:.8125rem;font-weight:500;margin-bottom:.4rem}

.field--privacy{margin-bottom:1.75rem}
.check--soft{margin-top:.85rem;padding-top:.85rem;border-top:1px solid var(--line)}
.hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.check{display:flex;align-items:flex-start;gap:.7rem;cursor:pointer;font-size:.875rem;color:var(--grey)}
.check input{
  flex:none;width:18px;height:18px;margin-top:2px;
  accent-color:var(--signal);cursor:pointer;
}
.check a{color:var(--ink);text-decoration:underline;text-underline-offset:2px}
.check a:hover{color:var(--signal)}

.err{
  display:none;margin-top:.4rem;font-size:.8125rem;color:var(--danger);
}
.err.is-visible{display:block}
.form-error-global{
  margin-top:1rem;padding:.8rem 1rem;border-radius:var(--radius-sm);
  background:rgba(179,38,30,.08);border:1px solid rgba(179,38,30,.25);
  color:var(--danger);font-size:.875rem;
}
.form-actions{margin-top:.5rem}
.form-note{margin-top:.9rem;text-align:center;font-size:.8125rem;color:var(--grey);line-height:1.5}

.btn__spin{display:none;width:15px;height:15px;border-radius:50%;
  border:2px solid rgba(255,255,255,.35);border-top-color:#fff;animation:spin .7s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}
[data-submit].is-loading{pointer-events:none;opacity:.85}
[data-submit].is-loading .btn__spin{display:block}

.form-success{
  text-align:center;padding:clamp(2rem,5vw,3.5rem) 1rem;
}
.form-success__ico{
  display:grid;place-items:center;width:56px;height:56px;margin:0 auto 1.5rem;
  border-radius:50%;background:var(--signal);color:var(--white);
  animation:popIn .45s var(--ease) both;
}
.form-success__ico svg{width:26px;height:26px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
@keyframes popIn{from{transform:scale(.6);opacity:0}to{transform:scale(1);opacity:1}}
.form-success h3{margin-bottom:.6rem}
.form-success p{color:var(--grey);font-size:var(--s);max-width:34ch;margin:0 auto 1.75rem}

/* ---------- 16. CTA FINAL ---------- */
.cta{position:relative;overflow:hidden;padding-block:clamp(4.5rem,8vw,7.5rem);text-align:center}
.cta__trama{position:absolute;inset:0;color:var(--paper);opacity:.045;pointer-events:none}
.cta__trama svg{width:100%;height:100%}
.cta__inner{position:relative;max-width:44rem}
.cta h2{font-size:clamp(1.9rem,1.2rem + 2.6vw,3rem);line-height:1.08;margin-bottom:1rem}
.cta p{color:var(--text-on-ink-dim);font-size:clamp(1.0625rem,1rem + .35vw,1.1875rem);margin-bottom:2.25rem}
.cta__btns{display:flex;flex-wrap:wrap;gap:.85rem;justify-content:center}
@media (max-width:520px){.cta__btns .btn{width:100%}}

/* ---------- 17. FOOTER ---------- */
.footer{padding-top:clamp(3.5rem,6vw,5rem);border-top:1px solid var(--line-dark-soft)}
.footer__inner{
  display:grid;grid-template-columns:minmax(0,1.4fr) minmax(0,1fr) minmax(0,1fr) minmax(0,1.1fr);gap:2.5rem 2rem;
  padding-bottom:3rem;
}
@media (max-width:900px){.footer__inner{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:560px){.footer__inner{grid-template-columns:minmax(0,1fr);gap:2.25rem}}
.footer__brand .brand{margin-bottom:1rem}
.footer__tag{color:var(--grey);font-size:var(--s)}
.footer__col .label{margin-bottom:1.1rem}
.footer__col ul{display:grid;gap:.6rem}
.footer__col a{
  font-size:var(--s);color:var(--text-on-ink-dim);
  transition:color .2s var(--ease);
}
.footer__col a:hover{color:var(--text-on-ink)}
.footer__contact li{display:flex;flex-direction:column;gap:.15rem}
.footer__k{font-family:var(--font-mono);font-size:.625rem;letter-spacing:.12em;text-transform:uppercase;color:var(--grey)}
[data-placeholder]{
  color:var(--flow);border-bottom:1px dashed rgba(95,168,184,.45);
  align-self:flex-start;
}
[data-placeholder]:hover{color:var(--flow)}
.footer__cta p{color:var(--text-on-ink-dim);font-size:var(--s);margin-bottom:1.1rem}
.footer__base{
  display:flex;flex-wrap:wrap;gap:.75rem 1.5rem;justify-content:space-between;
  padding-block:1.5rem;border-top:1px solid var(--line-dark-soft);
  font-family:var(--font-mono);font-size:.625rem;letter-spacing:.1em;
  text-transform:uppercase;color:var(--grey);
}

/* ---------- 18. ACCESO INTERNO ---------- */
.acceso{position:fixed;inset:0;z-index:300;display:grid;place-items:center;padding:1.25rem}
.acceso__fondo{
  position:absolute;inset:0;background:rgba(10,12,15,.72);
  backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);
  animation:fundido .2s var(--ease);
}
@keyframes fundido{from{opacity:0}to{opacity:1}}
.acceso__card{
  position:relative;width:min(26rem,100%);
  max-height:min(88vh,44rem);overflow-y:auto;
  background:var(--ink);color:var(--text-on-ink);
  border:1px solid var(--line-dark);border-radius:var(--radius);
  padding:clamp(1.6rem,4vw,2.25rem);
  box-shadow:0 40px 80px -40px rgba(0,0,0,.9);
  animation:accesoIn .28s var(--ease);
}
@keyframes accesoIn{from{opacity:0;transform:translateY(10px) scale(.985)}to{opacity:1;transform:none}}
.acceso__mark{width:22px;height:22px;color:var(--text-on-ink);margin-bottom:1.35rem}
.acceso__card .label{margin-bottom:.6rem}
.acceso__card h2{font-size:1.375rem;margin-bottom:1.5rem}
.acceso__card input{
  width:100%;padding:.85rem .95rem;
  background:rgba(244,243,239,.05);color:var(--text-on-ink);
  border:1px solid var(--line-dark);border-radius:var(--radius-sm);
  font-size:var(--s);letter-spacing:.02em;
  transition:border-color .2s var(--ease),background .2s var(--ease);
}
.acceso__card input::placeholder{color:var(--grey)}
.acceso__card input:hover{border-color:rgba(244,243,239,.28)}
.acceso__card input:focus{
  outline:0;border-color:var(--flow);background:rgba(244,243,239,.08);
  box-shadow:0 0 0 3px rgba(95,168,184,.14);
}
.acceso__card input[aria-invalid="true"]{border-color:#C4534C}
.acceso__err{
  display:none;margin-top:.55rem;font-size:.8125rem;color:#E08E88;
}
.acceso__err.is-visible{display:block}
.acceso__btns{display:flex;gap:.6rem;margin-top:1.35rem}
.acceso__btns .btn{flex:1}
.acceso__btns--col{flex-direction:column}

.acceso__ayuda{
  color:var(--text-on-ink-dim);font-size:.875rem;line-height:1.55;
  margin:-.85rem 0 1.5rem;
}
.acceso__ayuda code{
  font-family:var(--font-mono);font-size:.85em;color:var(--flow);
  background:rgba(95,168,184,.1);padding:.1rem .35rem;border-radius:4px;
}
.acceso__campo{margin-bottom:.9rem}
.acceso__campo label{
  display:block;font-size:.8125rem;font-weight:500;margin-bottom:.35rem;
  color:var(--text-on-ink);
}
.acceso__campo small{
  display:block;margin-top:.45rem;font-size:.75rem;line-height:1.45;color:var(--grey);
}
.acceso__fuerza{
  height:3px;border-radius:2px;background:rgba(244,243,239,.12);
  overflow:hidden;margin-top:.5rem;
}
.acceso__fuerza i{
  display:block;height:100%;width:0;background:#C4534C;
  transition:width .25s var(--ease),background .25s var(--ease);
}
.acceso.is-sacudida .acceso__card{animation:sacudida .32s var(--ease)}
@keyframes sacudida{
  0%,100%{transform:translateX(0)}
  20%{transform:translateX(-6px)}
  40%{transform:translateX(6px)}
  60%{transform:translateX(-4px)}
  80%{transform:translateX(4px)}
}

/* ---------- 19. MOVIMIENTO ----------
   Cada animación dice algo del sistema: los títulos entran desde debajo de
   una máscara, la trama respira su propio desfase, y las líneas de proceso
   se dibujan en el sentido en que avanza el trabajo. Nada decorativo. */

/* Títulos: revelado con máscara ------------------------------- */
.mask{
  display:inline-block;overflow:hidden;vertical-align:bottom;
  padding-bottom:.14em;margin-bottom:-.14em;   /* deja respirar las colas de g, y, j */
}
.mask__in{
  display:inline-block;
  transform:translateY(112%);
  transition:transform .9s var(--ease);
}
.is-revelado .mask__in{transform:translateY(0)}

/* La trama viva: las dos filas alternan su paso, en contrafase.
   Es el desfase del isotipo convertido en movimiento. */
.trama__a,.trama__b{will-change:transform}
.trama__a{animation:paso 11s ease-in-out infinite}
.trama__b{animation:paso 11s ease-in-out infinite reverse}
@keyframes paso{
  0%,100%{transform:translateY(0)}
  50%{transform:translateY(9px)}
}
.cta__trama .trama__a,.cta__trama .trama__b{animation-duration:14s}

/* Líneas que se dibujan al entrar en pantalla ------------------ */
.steps::before{transform:scaleX(0);transform-origin:left;transition:transform 1.1s var(--ease)}
.steps.is-revelado::before{transform:scaleX(1)}

.seq__item:not(:last-child)::after{
  transform:scaleX(0);transform-origin:left;
  transition:transform .5s var(--ease);
}
.seq.is-revelado .seq__item:not(:last-child)::after{transform:scaleX(1)}
.seq.is-revelado .seq__item:nth-child(1)::after{transition-delay:.25s}
.seq.is-revelado .seq__item:nth-child(2)::after{transition-delay:.4s}
.seq.is-revelado .seq__item:nth-child(3)::after{transition-delay:.55s}
.seq.is-revelado .seq__item:nth-child(4)::after{transition-delay:.7s}

/* El nodo del proceso se enciende al llegar su turno */
.step__n{transition:background .25s var(--ease),color .25s var(--ease),
                    border-color .25s var(--ease),transform .5s var(--ease)}
.steps:not(.is-revelado) .step__n{transform:scale(.75)}

/* El dashboard del hero flota unos píxeles con el scroll */
.hero__visual{will-change:transform}

/* La cápsula acentuada del separador entra con un paso propio */
.sep svg .sep__accent{transition:transform .7s var(--ease) .2s;transform-origin:center bottom}
.diff:not(.is-revelado) .sep__accent{transform:translateY(-6px)}

/* ---------- 20. REVEAL ---------- */
.reveal{opacity:0;transform:translateY(14px);transition:opacity .6s var(--ease),transform .6s var(--ease)}
.reveal.is-in{opacity:1;transform:none}
.reveal[data-delay="1"]{transition-delay:.07s}
.reveal[data-delay="2"]{transition-delay:.14s}
.reveal[data-delay="3"]{transition-delay:.21s}
.reveal[data-delay="4"]{transition-delay:.28s}

@media (prefers-reduced-motion:reduce){
  html:focus-within{scroll-behavior:auto}
  *,*::before,*::after{
    animation-duration:.001ms !important;animation-iteration-count:1 !important;
    transition-duration:.001ms !important;scroll-behavior:auto !important;
  }
  .reveal{opacity:1;transform:none}
}

/* ---------- 21. IMPRESIÓN ---------- */
@media print{
  .nav,.menu,.hero__visual,.cta,.form-card,.acceso{display:none}
  body{color:#000;background:#fff}
  .section--ink{background:#fff;color:#000}
}