/* ============================================================
   interactivo.css — Experiencia HTML navegable CRM ICG Latam
   Cargo: disenador-de-interfaz (el Vitralista) · linea C · TL-ICGITACA-004C
   ------------------------------------------------------------
   Consume assets/css/tokens.css (ANCLA). NO redefine ningun token
   de marca. Solo declara medidas de layout propias del documento
   scrolleable (--rail-w, --bar-h, --gut, --sec-air), que no son
   tokens de marca. Cero dependencia externa: tipografia self-hosted
   via fonts.css.
   ============================================================ */

/* ---------- 1. Medidas del documento (no son tokens de marca) ---------- */
:root{
  --rail-w:  clamp(212px, 18vw, 258px);
  --bar-h:   58px;
  --gut:     clamp(20px, 4vw, 56px);
  --sec-air: clamp(56px, 8vh, 104px);
}

/* ---------- 2. Reset minimo ---------- */
*,*::before,*::after{ box-sizing:border-box; }
html{ scroll-behavior:smooth; }
@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior:auto; }
  *,*::before,*::after{ animation-duration:.001ms !important; transition-duration:.001ms !important; }
}
body{
  margin:0;
  background:var(--paper);
  color:var(--ink);
  font-family:var(--sans);
  font-size:var(--fs-body);
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  font-optical-sizing:auto;
}
img{ max-width:100%; display:block; }
button{ font:inherit; color:inherit; background:none; border:0; cursor:pointer; }
h1,h2,h3,h4,p,ul,ol,figure,dl,dd{ margin:0; }
ul,ol{ padding:0; list-style:none; }
a{ color:inherit; text-decoration:none; }
table{ border-collapse:collapse; width:100%; }
::selection{ background:var(--accent-tint); color:var(--accent-ink); }
:focus-visible{ outline:2px solid var(--accent); outline-offset:3px; border-radius:3px; }

.u-sr{
  position:absolute; width:1px; height:1px; padding:0; margin:-1px;
  overflow:hidden; clip-path:inset(50%); white-space:nowrap; border:0;
}
.skip{
  position:absolute; left:12px; top:-60px; z-index:90;
  background:var(--navy); color:var(--paper-2);
  padding:.6em 1em; border-radius:var(--radius); font-size:.86rem;
  transition:top var(--dur-fast) var(--ease);
}
.skip:focus{ top:12px; }

/* ---------- 3. Estructura ---------- */
.doc{
  display:grid;
  grid-template-columns:var(--rail-w) minmax(0,1fr);
  min-height:100vh;
}
.main{ min-width:0; }
.wrap{
  width:min(var(--wrap), 100%);
  margin-inline:auto;
  padding-inline:var(--gut);
}

/* ---------- 4. Rail persistente ---------- */
.rail{
  position:sticky; top:0; align-self:start;
  height:100vh; height:100dvh;
  display:flex; flex-direction:column;
  padding:clamp(20px,2.4vh,30px) 0 clamp(16px,2vh,24px);
  border-right:1px solid var(--rule);
  background:var(--paper-2);
  z-index:20;
}
.rail__brand{
  display:flex; align-items:center; gap:9px;
  padding:0 clamp(16px,1.6vw,22px) clamp(16px,2vh,22px);
  border-bottom:1px solid var(--rule-soft);
}
.rail__brand img{ width:24px; height:24px; object-fit:contain; }
.rail__brand b{
  font-family:var(--mono); font-size:.66rem; font-weight:700;
  letter-spacing:.17em; color:var(--navy-deep);
}
.rail__eyebrow{
  padding:clamp(16px,2vh,22px) clamp(16px,1.6vw,22px) .6em;
  font-family:var(--mono); font-size:.6rem; font-weight:600;
  letter-spacing:.2em; text-transform:uppercase; color:var(--ink-mute);
}
.rail__list{ display:flex; flex-direction:column; gap:1px; padding:0 clamp(10px,1vw,14px); }
.rail__link{
  position:relative;
  display:flex; align-items:baseline; gap:.7em;
  padding:.62em clamp(8px,.8vw,12px);
  border-radius:6px;
  font-size:.88rem; font-weight:500; line-height:1.3;
  color:var(--ink-soft);
  transition:color var(--dur-fast) var(--ease), background var(--dur-fast) var(--ease);
}
.rail__link::before{
  content:""; position:absolute; left:0; top:50%; translate:0 -50%;
  width:2px; height:0; background:var(--accent); border-radius:2px;
  transition:height var(--dur) var(--ease);
}
.rail__num{
  font-family:var(--mono); font-size:.66rem; font-weight:600;
  color:var(--ink-mute); flex:0 0 auto;
  transition:color var(--dur-fast) var(--ease);
}
.rail__link:hover{ color:var(--ink); background:var(--paper-3); }
.rail__link[aria-current="true"]{ color:var(--ink); font-weight:600; }
.rail__link[aria-current="true"]::before{ height:60%; }
.rail__link[aria-current="true"] .rail__num{ color:var(--accent-ink); }
.rail__foot{
  margin-top:auto;
  padding:clamp(14px,2vh,20px) clamp(16px,1.6vw,22px) 0;
  border-top:1px solid var(--rule-soft);
}
.firma{
  font-family:var(--mono); font-size:.58rem; letter-spacing:.06em;
  color:var(--ink-mute); line-height:1.5;
}

/* ---------- 5. Hero ---------- */
.hero{
  position:relative; overflow:hidden;
  padding-block:clamp(38px,7vh,76px) clamp(34px,6vh,64px);
  background:linear-gradient(180deg, var(--paper-2) 0%, var(--paper) 62%, var(--paper-3) 100%);
  border-bottom:1px solid var(--rule);
}
.hero__net{
  position:absolute; inset:0; z-index:0;
  pointer-events:none; opacity:.5;
}
.hero__net svg{ width:100%; height:100%; }
.hero .wrap{ position:relative; z-index:1; }

.lockup{
  display:flex; align-items:center; gap:clamp(10px,1.2vw,16px);
  margin-bottom:clamp(24px,4vh,40px);
  flex-wrap:wrap;
}
.icg-plate{
  display:flex; align-items:center; height:38px; padding:6px 11px;
  border:1px solid var(--rule); background:var(--paper-2);
  border-radius:5px; box-shadow:var(--shadow-1);
}
.icg-plate img{ height:24px; width:auto; }
.lockup__plus{ position:relative; width:13px; height:13px; flex:0 0 13px; opacity:.42; }
.lockup__plus::before,.lockup__plus::after{ content:""; position:absolute; background:var(--ink); }
.lockup__plus::before{ top:5.5px; left:0; width:13px; height:2px; }
.lockup__plus::after{ left:5.5px; top:0; width:2px; height:13px; }
.aio-mark{ display:flex; align-items:center; gap:8px; }
.aio-mark img{ width:27px; height:27px; object-fit:contain; }
.aio-mark b{
  font-family:var(--mono); font-size:.72rem; font-weight:700;
  letter-spacing:.17em; color:var(--navy-deep);
}
.lockup__rol{
  font-family:var(--mono); font-size:.58rem; letter-spacing:.16em;
  text-transform:uppercase; color:var(--ink-mute);
  padding-left:clamp(6px,1vw,14px); border-left:1px solid var(--rule);
  line-height:1.5;
}

.eyebrow{
  display:flex; align-items:center; gap:.7em;
  font-family:var(--mono); font-size:var(--fs-eyebrow); font-weight:600;
  letter-spacing:.18em; text-transform:uppercase; color:var(--accent-ink);
  margin-bottom:.9em;
}
.eyebrow::before{
  content:""; width:26px; height:2px; background:var(--accent); flex:0 0 26px;
}
.hero__title{
  font-family:var(--display); font-size:var(--fs-h1);
  font-weight:600; line-height:1.08; letter-spacing:-.015em;
  color:var(--ink); max-width:17ch;
}
.hero__sub{
  margin-top:.85em; font-size:var(--fs-lead); line-height:1.45;
  color:var(--ink-soft); max-width:52ch; text-wrap:pretty;
}
.hero__rule{
  width:64px; height:3px; background:var(--accent);
  margin-block:clamp(20px,3vh,30px);
}
.hero__entrada{
  max-width:var(--ed-measure); color:var(--ink-soft); text-wrap:pretty;
}
.hero__metricas{
  display:grid; grid-template-columns:repeat(3,minmax(0,1fr));
  gap:clamp(12px,1.6vw,22px);
  margin-top:clamp(26px,4vh,42px);
}
.metrica{
  padding:clamp(14px,2vw,20px);
  background:var(--paper-2);
  border:1px solid var(--rule);
  border-top:3px solid var(--navy);
  border-radius:var(--radius);
  box-shadow:var(--shadow-1);
}
.metrica--acento{ border-top-color:var(--accent); }
.metrica__cifra{
  font-family:var(--display); font-weight:600;
  font-size:clamp(1.5rem,2.6vw,2.05rem); line-height:1.05;
  color:var(--ink); letter-spacing:-.01em;
  font-variant-numeric:tabular-nums;
}
.metrica--acento .metrica__cifra{ color:var(--accent-ink); }
.metrica__pie{
  margin-top:.5em; font-size:.8rem; color:var(--ink-soft); line-height:1.35;
}
.hero__acciones{
  display:flex; flex-wrap:wrap; gap:10px;
  margin-top:clamp(24px,3.4vh,36px);
}

/* ---------- 6. Botones ---------- */
.btn{
  display:inline-flex; align-items:center; gap:.55em;
  padding:.72em 1.25em;
  border:1px solid var(--rule);
  border-radius:var(--radius);
  background:var(--paper-2);
  font-size:.9rem; font-weight:600; color:var(--ink-soft);
  transition:color var(--dur-fast) var(--ease), border-color var(--dur-fast) var(--ease),
             background var(--dur-fast) var(--ease), transform var(--dur-fast) var(--ease);
}
.btn:hover{ color:var(--ink); border-color:var(--ink-mute); transform:translateY(-1px); }
.btn::after{
  content:""; width:.5em; height:.5em; flex:0 0 auto;
  border-right:1.6px solid currentColor; border-bottom:1.6px solid currentColor;
  rotate:-45deg; translate:0 -1px;
  transition:translate var(--dur-fast) var(--ease);
}
.btn:hover::after{ translate:2px -1px; }
.btn--primary{
  background:var(--accent); border-color:var(--accent); color:#fff;
}
.btn--primary:hover{ background:var(--accent-ink); border-color:var(--accent-ink); color:#fff; }
.btn--lg{ padding:.95em 1.7em; font-size:.98rem; }

/* ---------- 7. Secciones ---------- */
.sec{
  padding-block:var(--sec-air);
  border-bottom:1px solid var(--rule-soft);
  scroll-margin-top:24px;
}
.sec--reposo{ background:var(--paper-3); }
.sec--cierre{ border-bottom:0; }
.sec__head{ margin-bottom:clamp(24px,3.6vh,40px); }
.sec__title{
  font-family:var(--display); font-size:var(--fs-h2);
  font-weight:600; line-height:1.14; letter-spacing:-.012em; color:var(--ink);
  max-width:24ch;
}
.sec__lead{
  margin-top:.75em; font-size:var(--fs-lead); line-height:1.5;
  color:var(--ink-soft); max-width:56ch; text-wrap:pretty;
}
.sec__nota{
  margin-top:1.4em; font-size:.8rem; color:var(--ink-soft);
  max-width:70ch; line-height:1.5;
}
.h3{
  font-family:var(--display); font-size:1.06rem; font-weight:600;
  color:var(--ink); line-height:1.3;
}
h3.sec__title{ max-width:34ch; }
.p{ color:var(--ink-soft); max-width:var(--ed-measure); text-wrap:pretty; }
.p + .p{ margin-top:.85em; }
.p strong{ color:var(--ink); font-weight:600; }

/* ---------- 8. Resumen ---------- */
.resumen__mensaje{
  font-family:var(--display); font-size:clamp(1.18rem,2vw,1.62rem);
  font-weight:500; line-height:1.35; color:var(--ink);
  max-width:44ch; text-wrap:pretty;
  padding-left:clamp(16px,2vw,26px);
  border-left:3px solid var(--accent);
}
.ideas{
  display:grid; grid-template-columns:repeat(3,minmax(0,1fr));
  gap:clamp(16px,2vw,28px);
  margin-top:clamp(28px,4vh,46px);
}
.idea{ padding-top:14px; border-top:2px solid var(--data); }
.idea__num{
  font-family:var(--mono); font-size:.64rem; font-weight:700;
  letter-spacing:.16em; color:var(--data); display:block; margin-bottom:.6em;
}
.idea__txt{ font-size:.94rem; color:var(--ink-soft); line-height:1.55; }
.idea__txt strong{ color:var(--ink); font-weight:600; }

/* ---------- 9. Cards expandibles (alcance) ---------- */
.cards{
  display:grid; grid-template-columns:repeat(3,minmax(0,1fr));
  gap:clamp(12px,1.5vw,18px);
  align-items:start;            /* al expandir una card, las hermanas no se estiran */
}
.card{
  display:flex; flex-direction:column;
  background:var(--paper-2);
  border:1px solid var(--rule);
  border-radius:var(--radius);
  box-shadow:var(--shadow-1);
  transition:border-color var(--dur-fast) var(--ease), box-shadow var(--dur-fast) var(--ease);
}
.card:hover{ box-shadow:var(--shadow-2); }
.card.is-open{ border-color:var(--accent); }
.card__toggle{
  display:block; width:100%; text-align:left;
  padding:clamp(16px,1.9vw,22px);
  border-radius:var(--radius);
}
.card__ttl{
  display:flex; align-items:flex-start; gap:.6em;
  font-family:var(--display); font-size:1rem; font-weight:600;
  color:var(--ink); line-height:1.28;
}
.card__ttl::before{
  content:""; flex:0 0 auto; width:7px; height:7px; margin-top:.45em;
  border-radius:50%; background:var(--data);
  transition:background var(--dur-fast) var(--ease), scale var(--dur-fast) var(--ease);
}
.card.is-open .card__ttl::before{ background:var(--accent); scale:1.3; }
.card__sub{
  margin-top:.6em; font-size:.875rem; color:var(--ink-soft); line-height:1.5;
}
.card__mas{
  display:flex; align-items:center; gap:.45em;
  margin-top:1em;
  font-family:var(--mono); font-size:.62rem; font-weight:600;
  letter-spacing:.14em; text-transform:uppercase; color:var(--accent-ink);
}
.card__mas::after{
  content:""; width:.42em; height:.42em;
  border-right:1.6px solid currentColor; border-bottom:1.6px solid currentColor;
  rotate:45deg; translate:0 -1px;
  transition:rotate var(--dur-fast) var(--ease);
}
.card.is-open .card__mas::after{ rotate:-135deg; translate:0 1px; }
.card__body{
  padding:clamp(12px,1.4vw,16px) clamp(16px,1.9vw,22px) clamp(16px,1.9vw,22px);
  font-size:.875rem; color:var(--ink-soft); line-height:1.6;
  border-top:1px solid var(--rule-soft);
}
.card__body[hidden]{ display:none; }

/* ---------- 10. Bloque colapsable generico ---------- */
.panel{
  margin-top:clamp(20px,2.6vh,30px);
  border:1px solid var(--rule);
  border-radius:var(--radius);
  background:var(--paper-2);
  overflow:hidden;
}
.panel--fuera{ background:var(--paper-3); border-style:dashed; }
.panel__toggle{
  display:flex; align-items:center; justify-content:space-between; gap:1em;
  width:100%; text-align:left;
  padding:clamp(13px,1.6vw,18px) clamp(14px,1.8vw,22px);
  font-size:.92rem; font-weight:600; color:var(--ink);
  transition:background var(--dur-fast) var(--ease);
}
.panel__toggle:hover{ background:var(--accent-tint); }
.panel__toggle::after{
  content:""; flex:0 0 auto; width:.5em; height:.5em;
  border-right:1.7px solid var(--accent-ink); border-bottom:1.7px solid var(--accent-ink);
  rotate:45deg; translate:0 -2px;
  transition:rotate var(--dur-fast) var(--ease);
}
.panel__toggle[aria-expanded="true"]::after{ rotate:-135deg; translate:0 2px; }
.panel__body{
  padding:0 clamp(14px,1.8vw,22px) clamp(16px,1.9vw,22px);
  font-size:.88rem; color:var(--ink-soft); line-height:1.62;
}
.panel__body[hidden]{ display:none; }
.panel__body > * + *{ margin-top:.9em; }

/* ---------- 11. Checklist decisiones tecnicas ---------- */
.checklist{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:clamp(10px,1.3vw,16px); align-items:start; }
.check{
  border:1px solid var(--rule); border-radius:var(--radius);
  background:var(--paper-2); overflow:hidden;
}
.check.is-open{ border-color:var(--accent); }
.check__toggle{
  display:flex; align-items:flex-start; gap:.75em;
  width:100%; text-align:left; padding:clamp(14px,1.7vw,19px);
  transition:background var(--dur-fast) var(--ease);
}
.check__toggle:hover{ background:var(--accent-tint); }
.check__mark{
  flex:0 0 auto; width:20px; height:20px; margin-top:1px;
  border-radius:50%; background:var(--ok);
  display:grid; place-items:center;
}
.check__mark svg{ width:11px; height:11px; display:block; }
.check__txt{ font-size:.92rem; font-weight:600; color:var(--ink); line-height:1.4; }
.check__body{
  display:flex; gap:.6em;
  padding:0 clamp(14px,1.7vw,19px) clamp(14px,1.7vw,19px) calc(clamp(14px,1.7vw,19px) + 20px + .75em);
  font-size:.86rem; color:var(--ink-soft); line-height:1.55;
}
.check__body[hidden]{ display:none; }
.check__body::before{ content:"\2192"; color:var(--accent-ink); flex:0 0 auto; }

/* ---------- 12. Tabs metodo ---------- */
.tabs__list{
  display:flex; gap:4px; flex-wrap:wrap;
  padding:4px; border-radius:var(--radius);
  background:var(--paper-3); border:1px solid var(--rule);
}
.tab{
  flex:1 1 200px;
  padding:.8em 1.1em; border-radius:7px; text-align:left;
  font-size:.88rem; font-weight:600; color:var(--ink-soft); line-height:1.35;
  transition:background var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease),
             box-shadow var(--dur-fast) var(--ease);
}
.tab small{
  display:block; font-family:var(--mono); font-size:.58rem; font-weight:600;
  letter-spacing:.15em; text-transform:uppercase; color:var(--ink-mute);
  margin-bottom:.35em;
}
.tab:hover{ color:var(--ink); }
.tab[aria-selected="true"]{
  background:var(--paper-2); color:var(--ink);
  box-shadow:var(--shadow-1), inset 0 -2px 0 var(--accent);
}
.tab[aria-selected="true"] small{ color:var(--accent-ink); }
.tabs__panel{ padding-top:clamp(22px,3vh,34px); }
.tabs__panel[hidden]{ display:none; }
.callout{
  margin-top:1.5em; padding:clamp(14px,1.8vw,20px) clamp(16px,2vw,24px);
  border-left:3px solid var(--accent); background:var(--accent-tint);
  border-radius:0 var(--radius) var(--radius) 0;
  font-family:var(--display); font-size:1.02rem; font-weight:500;
  color:var(--ink); line-height:1.45; max-width:60ch; text-wrap:pretty;
}
.callout--sobrio{
  border-left-color:var(--data); background:var(--data-tint);
  font-family:var(--sans); font-size:.92rem; font-weight:400; color:var(--ink-soft);
}

/* ---------- 13. Tablas ---------- */
.tabla-wrap{ margin-top:1.5em; overflow-x:auto; }
.tabla{ font-size:.87rem; min-width:min(100%, 460px); }
.tabla th, .tabla td{
  padding:.72em .85em; text-align:left; vertical-align:top;
  border-bottom:1px solid var(--rule-soft);
}
.tabla thead th{
  font-family:var(--mono); font-size:.6rem; font-weight:700;
  letter-spacing:.14em; text-transform:uppercase; color:var(--ink-mute);
  border-bottom:1px solid var(--rule);
  white-space:nowrap;
}
.tabla td{ color:var(--ink-soft); }
.tabla th[scope="row"]{ color:var(--ink); font-weight:500; }
.tabla .num{ text-align:right; font-family:var(--mono); font-variant-numeric:tabular-nums; white-space:nowrap; }
.tabla tr.is-total th, .tabla tr.is-total td{
  border-top:1px solid var(--rule); border-bottom:0;
  color:var(--ink); font-weight:700; background:var(--paper-3);
}
.tabla col.is-base{ background:var(--accent-tint); }

/* ---------- 14. Escenarios (horas) ---------- */
.escenarios{
  display:grid; grid-template-columns:repeat(3,minmax(0,1fr));
  gap:clamp(12px,1.6vw,20px); align-items:stretch;
}
.esc{
  display:flex; flex-direction:column;
  padding:clamp(18px,2.2vw,26px);
  background:var(--paper-2); border:1px solid var(--rule);
  border-radius:var(--radius); box-shadow:var(--shadow-1);
}
.esc--destacado{
  border-color:var(--accent); border-width:1.5px;
  box-shadow:var(--shadow-2);
}
.esc__tag{
  font-family:var(--mono); font-size:.6rem; font-weight:700;
  letter-spacing:.16em; text-transform:uppercase; color:var(--ink-mute);
}
.esc--destacado .esc__tag{ color:var(--accent-ink); }
.esc__horas{
  margin-top:.5em;
  font-family:var(--display); font-weight:600;
  font-size:clamp(1.8rem,3.4vw,2.6rem); line-height:1;
  color:var(--ink); font-variant-numeric:tabular-nums; letter-spacing:-.02em;
}
.esc--destacado .esc__horas{ color:var(--accent-ink); }
.esc__horas span{ font-size:.42em; font-weight:500; color:var(--ink-mute); margin-left:.15em; }
.esc__txt{ margin-top:.75em; font-size:.86rem; color:var(--ink-soft); line-height:1.5; }

/* ---------- 15. Selector de escenario + cifra dinamica ---------- */
.inversion{
  display:grid; grid-template-columns:minmax(0,5fr) minmax(0,7fr);
  gap:clamp(20px,3vw,44px); align-items:start;
}
.selector__label{
  font-family:var(--mono); font-size:.6rem; font-weight:600;
  letter-spacing:.18em; text-transform:uppercase; color:var(--ink-mute);
  margin-bottom:.8em;
}
.selector{ display:flex; flex-direction:column; gap:6px; }
.opt{
  display:flex; align-items:center; justify-content:space-between; gap:1em;
  padding:.85em 1.05em; text-align:left;
  border:1px solid var(--rule); border-radius:var(--radius);
  background:var(--paper-2);
  font-size:.92rem; font-weight:600; color:var(--ink-soft);
  transition:border-color var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease),
             background var(--dur-fast) var(--ease);
}
.opt:hover{ color:var(--ink); border-color:var(--ink-mute); }
.opt__rec{
  font-family:var(--mono); font-size:.55rem; font-weight:700;
  letter-spacing:.14em; text-transform:uppercase; color:var(--accent-ink);
  padding:.3em .6em; border:1px solid var(--accent); border-radius:99px;
}
.opt[aria-checked="true"]{
  border-color:var(--accent); background:var(--accent-tint); color:var(--ink);
  box-shadow:inset 3px 0 0 var(--accent);
}
.cifra{
  padding:clamp(22px,3vw,34px);
  background:var(--paper-2); border:1px solid var(--rule);
  border-top:3px solid var(--accent);
  border-radius:var(--radius); box-shadow:var(--shadow-2);
}
.cifra__label{
  font-family:var(--mono); font-size:.6rem; font-weight:600;
  letter-spacing:.18em; text-transform:uppercase; color:var(--ink-mute);
}
.cifra__valor{
  margin-top:.45em;
  font-family:var(--display); font-weight:600;
  font-size:clamp(1.9rem,4.6vw,3.05rem); line-height:1.02;
  letter-spacing:-.025em; color:var(--navy-deep);
  font-variant-numeric:tabular-nums;
}
.cifra__valor em{
  font-style:normal; font-size:.36em; font-weight:600;
  color:var(--ink-mute); letter-spacing:.06em; margin-right:.3em;
  vertical-align:.28em; font-family:var(--mono);
}
.cifra__pie{ margin-top:.9em; font-size:.86rem; color:var(--ink-soft); line-height:1.5; }
.cifra.is-cambiando .cifra__valor{ animation:cifraIn .34s var(--ease) both; }
@keyframes cifraIn{
  from{ opacity:0; transform:translateY(6px); }
  to{ opacity:1; transform:none; }
}

/* ---------- 16. Costos vivos ---------- */
.costos{
  display:grid; grid-template-columns:repeat(3,minmax(0,1fr));
  gap:clamp(12px,1.6vw,18px);
}
.costo{
  padding:clamp(16px,2vw,22px);
  background:var(--paper-2); border:1px solid var(--rule);
  border-left:3px solid var(--data); border-radius:0 var(--radius) var(--radius) 0;
}
.costo__ttl{ font-family:var(--display); font-size:.98rem; font-weight:600; color:var(--ink); }
.costo__tag{
  display:inline-block; margin-top:.4em;
  font-family:var(--mono); font-size:.56rem; font-weight:600;
  letter-spacing:.13em; text-transform:uppercase; color:var(--ink-mute);
}
.costo__txt{ margin-top:.7em; font-size:.85rem; color:var(--ink-soft); line-height:1.5; }
.costo__val{
  margin-top:.85em; padding-top:.7em; border-top:1px solid var(--rule-soft);
  font-family:var(--mono); font-size:.92rem; font-weight:700; color:var(--data);
  font-variant-numeric:tabular-nums;
}

/* ---------- 17. Remuneracion (bloque destacado) ---------- */
.remun{
  margin-top:clamp(30px,4.4vh,52px);
  padding:clamp(24px,3.2vw,42px);
  background:var(--navy-deep); color:#E8EEF7;
  border-radius:var(--radius);
}
.remun .eyebrow{ color:#9FC0FF; }
.remun .eyebrow::before{ background:#9FC0FF; }
.remun__ttl{
  font-family:var(--display); font-size:clamp(1.15rem,2.1vw,1.55rem);
  font-weight:600; line-height:1.25; color:#fff; max-width:34ch;
}
.remun__p{ margin-top:1em; color:#C6D4E8; max-width:var(--ed-measure); line-height:1.62; }
.remun__dos{
  display:grid; grid-template-columns:repeat(2,minmax(0,1fr));
  gap:clamp(14px,2vw,26px); margin-top:clamp(20px,2.8vh,32px);
}
.remun__bloque{
  padding:clamp(16px,2vw,22px);
  background:rgba(255,255,255,.055);
  border:1px solid rgba(255,255,255,.14);
  border-radius:var(--radius);
}
.remun__bloque h4{
  font-family:var(--display); font-size:1rem; font-weight:600; color:#fff;
}
.remun__bloque p{ margin-top:.55em; font-size:.88rem; color:#C6D4E8; line-height:1.55; }
.remun__cierre{
  margin-top:clamp(18px,2.4vh,28px); padding-top:clamp(16px,2vh,22px);
  border-top:1px solid rgba(255,255,255,.14);
  font-size:.9rem; color:#C6D4E8; max-width:var(--ed-measure); line-height:1.6;
}

/* ---------- 18. Diferenciadores ---------- */
.difs{
  display:grid; grid-template-columns:repeat(3,minmax(0,1fr));
  gap:clamp(14px,2vw,26px);
}
.dif{ padding-top:13px; border-top:2px solid var(--navy); }
.dif__ttl{ font-family:var(--display); font-size:.99rem; font-weight:600; color:var(--ink); line-height:1.3; }
.dif__txt{ margin-top:.5em; font-size:.86rem; color:var(--ink-soft); line-height:1.55; }

/* ---------- 19. Siguiente paso ---------- */
.pasos{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:clamp(14px,2vw,26px); }
.paso{ display:flex; gap:.9em; }
.paso__num{
  flex:0 0 auto; width:28px; height:28px; border-radius:50%;
  display:grid; place-items:center;
  border:1.5px solid var(--accent); color:var(--accent-ink);
  font-family:var(--mono); font-size:.72rem; font-weight:700;
}
.paso__txt{ font-size:.92rem; color:var(--ink-soft); line-height:1.55; }
.paso__txt strong{ color:var(--ink); font-weight:600; }

/* ---------- 20. Timeline horizontal ---------- */
.timeline{
  position:relative;
  display:grid; grid-template-columns:repeat(5,minmax(0,1fr));
  gap:clamp(10px,1.4vw,18px);
  margin-top:clamp(20px,2.8vh,32px);
  padding-top:26px;
}
.timeline::before{
  content:""; position:absolute; top:9px; left:0; right:0;
  height:2px; background:linear-gradient(90deg, var(--navy), var(--accent));
  opacity:.32; border-radius:2px;
}
.etapa{ position:relative; }
.etapa::before{
  content:""; position:absolute; top:-26px; left:0;
  width:12px; height:12px; border-radius:50%;
  background:var(--paper); border:2.5px solid var(--accent);
  box-shadow:0 0 0 4px var(--paper);
}
.etapa__dias{
  font-family:var(--mono); font-size:.66rem; font-weight:700;
  letter-spacing:.12em; color:var(--accent-ink);
}
.etapa__ttl{
  margin-top:.4em; font-family:var(--display); font-size:.94rem;
  font-weight:600; color:var(--ink); line-height:1.28;
}
.etapa__txt{ margin-top:.45em; font-size:.82rem; color:var(--ink-soft); line-height:1.5; }

.cta{
  display:flex; flex-wrap:wrap; align-items:center; gap:clamp(14px,2vw,24px);
  margin-top:clamp(30px,4.4vh,50px);
  padding:clamp(20px,2.8vw,32px);
  background:var(--paper-2); border:1px solid var(--rule); border-left:4px solid var(--accent);
  border-radius:0 var(--radius) var(--radius) 0; box-shadow:var(--shadow-2);
}
.cta__txt{
  font-family:var(--display); font-size:clamp(1.1rem,1.9vw,1.42rem);
  font-weight:600; color:var(--ink); line-height:1.25; flex:1 1 300px;
}

/* ---------- 21. Pie ---------- */
.pie{
  padding-block:clamp(26px,4vh,40px);
  border-top:1px solid var(--rule);
  background:var(--paper-3);
}
.pie__row{
  display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between;
  gap:clamp(12px,2vw,24px);
}
.pie__marca{ display:flex; align-items:center; gap:9px; }
.pie__marca img{ width:22px; height:22px; object-fit:contain; }
.pie__marca b{
  font-family:var(--mono); font-size:.62rem; font-weight:700;
  letter-spacing:.16em; color:var(--navy-deep);
}
.pie__meta{ font-size:.78rem; color:var(--ink-soft); }

/* ---------- 22. Responsive ---------- */
@media (max-width: 1080px){
  .inversion{ grid-template-columns:minmax(0,1fr); }
  .cards, .difs, .costos{ grid-template-columns:repeat(2,minmax(0,1fr)); }
  .timeline{ grid-template-columns:repeat(3,minmax(0,1fr)); row-gap:30px; }
}

/* Tablet y movil: el rail pasa a barra superior con scroll horizontal */
@media (max-width: 900px){
  .doc{ grid-template-columns:minmax(0,1fr); }
  .rail{
    position:sticky; top:0; height:auto;
    flex-direction:row; align-items:center; gap:clamp(10px,2vw,18px);
    padding:0 var(--gut);
    border-right:0; border-bottom:1px solid var(--rule);
    box-shadow:var(--shadow-1);
  }
  .rail__brand{
    padding:0; border-bottom:0; flex:0 0 auto;
    height:var(--bar-h); align-items:center;
  }
  .rail__brand b{ display:none; }
  .rail__eyebrow, .rail__foot{ display:none; }
  .rail__list{
    flex-direction:row; gap:2px; padding:0;
    overflow-x:auto; scrollbar-width:none;
    -webkit-overflow-scrolling:touch;
    height:var(--bar-h); align-items:center;
    margin-left:auto;
    mask-image:linear-gradient(90deg,transparent 0,#000 14px,#000 calc(100% - 14px),transparent 100%);
  }
  .rail__list::-webkit-scrollbar{ display:none; }
  .rail__link{ white-space:nowrap; padding:.45em .7em; font-size:.82rem; }
  .rail__link::before{
    left:8px; right:8px; top:auto; bottom:2px; translate:0 0;
    width:auto; height:2px;
  }
  .rail__link[aria-current="true"]::before{ height:2px; }
  .rail__num{ display:none; }
  .sec, .hero{ scroll-margin-top:var(--bar-h); }

  .hero__metricas{ grid-template-columns:minmax(0,1fr); }
  .ideas, .escenarios, .difs, .costos, .pasos, .checklist{ grid-template-columns:minmax(0,1fr); }
  .cards{ grid-template-columns:repeat(2,minmax(0,1fr)); }
  .esc--destacado{ order:-1; }
  .remun__dos{ grid-template-columns:minmax(0,1fr); }
  .timeline{ grid-template-columns:minmax(0,1fr); gap:0; padding-top:0; padding-left:22px; }
  .timeline::before{ top:6px; bottom:6px; left:5px; right:auto; width:2px; height:auto; }
  .etapa{ padding-block:12px; }
  .etapa::before{ top:16px; left:-22px; }
}

@media (max-width: 600px){
  .cards{ grid-template-columns:minmax(0,1fr); }   /* movil: una card por fila */
  .hero__title{ max-width:none; }
  .hero__acciones .btn{ flex:1 1 100%; justify-content:space-between; }
  .lockup{ gap:12px; }
  .lockup__plus{ display:none; }        /* en movil el lockup se apila: placa ICG arriba, AIONOVA debajo */
  .icg-plate{ height:34px; }
  .icg-plate img{ height:20px; }
  .aio-mark{ flex:1 1 100%; }
  .lockup__rol{ border-left:0; padding-left:0; flex:1 1 100%; }

  /* movil: los tabs se convierten en accordion */
  .tabs__list{ flex-direction:column; background:none; border:0; padding:0; gap:0; }
  .tab{
    flex:none; border:1px solid var(--rule); border-radius:0; margin-top:-1px;
    display:flex; align-items:center; justify-content:space-between; gap:1em;
  }
  .tab small{ display:none; }
  .tab:first-child{ border-radius:var(--radius) var(--radius) 0 0; margin-top:0; }
  .tab:last-of-type{ border-radius:0 0 var(--radius) var(--radius); }
  .tab::after{
    content:""; flex:0 0 auto; width:.5em; height:.5em;
    border-right:1.7px solid var(--accent-ink); border-bottom:1.7px solid var(--accent-ink);
    rotate:45deg; translate:0 -2px; transition:rotate var(--dur-fast) var(--ease);
  }
  .tab[aria-selected="true"]{
    background:var(--accent-tint); box-shadow:inset 3px 0 0 var(--accent);
    border-radius:var(--radius) var(--radius) 0 0;
  }
  .tab[aria-selected="true"]::after{ rotate:-135deg; translate:0 2px; }
  .tabs__panel{
    padding:clamp(16px,4vw,22px);
    border:1px solid var(--rule); border-top:0;
    border-radius:0 0 var(--radius) var(--radius);
    margin-bottom:14px;
  }
  .cta{ flex-direction:column; align-items:stretch; }
  .cta .btn{ justify-content:space-between; }
}

/* ---------- 23. Print (cortesia) ---------- */
@media print{
  .rail, .hero__acciones, .cta .btn{ display:none; }
  .doc{ grid-template-columns:1fr; }
  .card__body[hidden], .panel__body[hidden], .check__body[hidden], .tabs__panel[hidden]{ display:block !important; }
  .remun{ background:none; color:var(--ink); border:1px solid var(--rule); }
  .remun__ttl,.remun__p,.remun__bloque h4,.remun__bloque p,.remun__cierre{ color:var(--ink); }
}