/* ============================================================
   EVO — PÁGINAS INTERNAS
   Se carga DESPUÉS de index.css y sólo añade lo que las páginas
   internas necesitan. Tokens, header, footer, botones, .eyebrow,
   .rise y el fallback de reduced-motion se heredan de allí, así que
   no pueden divergir de la HOME.

   La HOME es la experiencia; estas páginas son explicación y
   conversión: menos capas, menos pinning, más lectura.
   ============================================================ */

/* El fondo cósmico de la HOME se sustituye por una atmósfera estática:
   mismo universo, sin canvas ni coste de repintado. */
.page-atmos{position:fixed;inset:0;z-index:0;pointer-events:none;overflow:hidden}
.page-atmos::before,
.page-atmos::after{content:"";position:absolute;border-radius:50%;filter:blur(90px)}
.page-atmos::before{
  width:min(120vw,1400px);aspect-ratio:1;left:50%;top:-58vh;transform:translateX(-50%);
  background:radial-gradient(circle,rgba(20,74,168,.20) 0%,rgba(12,44,110,.09) 42%,transparent 68%);
}
.page-atmos::after{
  width:min(90vw,900px);aspect-ratio:1;right:-24vw;bottom:-34vh;
  background:radial-gradient(circle,rgba(53,226,255,.09) 0%,transparent 66%);
}
/* Filo del horizonte, compartido con la HOME para dar continuidad. */
.page-horizon{
  position:fixed;left:50%;bottom:-92vw;width:220vw;aspect-ratio:1;
  transform:translateX(-50%);border-radius:50%;z-index:0;pointer-events:none;
  border-top:1px solid rgba(150,215,255,.16);
  box-shadow:0 -1px 60px rgba(46,140,255,.13);
  background:radial-gradient(circle at 50% 0,rgba(10,32,74,.34) 0%,transparent 34%);
}

body.page{background:var(--bg);}
.page-main{position:relative;z-index:1}

/* ---------- Migas ---------- */
.crumbs{font-size:.78rem;color:var(--faint);display:flex;flex-wrap:wrap;gap:8px;align-items:center;margin-bottom:26px}
.crumbs a{color:var(--muted);display:inline-block;padding:6px 0}
.crumbs a:hover{color:var(--text)}
.crumbs span[aria-hidden]{opacity:.5}

/* ---------- Bandas ---------- */
.band{padding:clamp(44px,7vh,84px) 0;border-top:1px solid var(--line);position:relative}
.band > .container > .eyebrow{margin-bottom:16px}
.band h2{font-size:clamp(1.5rem,1.2rem + 1.35vw,2.4rem);max-width:22ch;margin-bottom:18px;line-height:1.14}
.band .band-lead{color:var(--text-dim);max-width:60ch;font-size:var(--fs-body);line-height:1.72}

/* Pares problema → cambio */
.shift{display:grid;gap:2px;margin-top:30px}
.shift-row{display:grid;grid-template-columns:minmax(0,1fr) 40px minmax(0,1fr);gap:14px;align-items:center;
  padding:18px 0;border-top:1px solid var(--line)}
.shift-row:last-child{border-bottom:1px solid var(--line)}
.shift-row b{font-weight:500;color:var(--muted);font-size:.98rem;line-height:1.5}
.shift-row .to{color:var(--cyan-soft);opacity:.7;text-align:center;font-size:1.1rem}
.shift-row em{font-style:normal;color:var(--text);font-size:.98rem;line-height:1.5}


/* Recorrido numerado */
.flow{counter-reset:step;margin-top:32px;display:grid;gap:0}
.flow > li{counter-increment:step;display:grid;grid-template-columns:56px minmax(0,1fr);gap:20px;
  padding:22px 0;border-top:1px solid var(--line)}
.flow > li:last-child{border-bottom:1px solid var(--line)}
/* El contador ocupa la primera columna en TODAS las filas del ítem y el
   contenido va siempre a la segunda. Sin esta colocación explícita el `li`
   tenía tres elementos de rejilla (::before, h3 y p) en dos columnas, así que
   el párrafo se colocaba solo en la columna del contador: 56px de ancho, ocho
   caracteres por línea y el 80% de la pantalla vacía. Afectaba a las siete
   páginas que usan este bloque. */
.flow > li::before{content:counter(step,decimal-leading-zero);
  grid-column:1;grid-row:1;
  font:600 .78rem/1 ui-monospace,monospace;letter-spacing:.16em;color:rgba(120,215,255,.62);padding-top:5px}
/* Todo el contenido a la columna 2; las filas las crea la propia colocación
   automática, así que no se generan filas vacías de más. */
.flow > li > *{grid-column:2}
.flow h3{font-size:1.04rem;margin-bottom:7px}
.flow p{font-size:.93rem;color:var(--muted);line-height:1.64;max-width:58ch}

/* Listas de inclusión / exclusión */
.ticks{margin-top:26px;display:grid;gap:11px}
.ticks li{position:relative;padding-left:24px;font-size:.96rem;color:var(--text-dim);line-height:1.6}
.ticks li::before{content:"";position:absolute;left:0;top:.62em;width:10px;height:1px;background:var(--line-lit)}

/* Nota discreta */
.note{margin-top:24px;padding-top:18px;border-top:1px solid var(--line);
  font-size:.88rem;color:var(--faint);max-width:60ch;line-height:1.62}


/* ---------- Bloque de conversión ---------- */
.convert{padding:clamp(52px,8vh,96px) 0 clamp(60px,9vh,110px);border-top:1px solid var(--line);position:relative}
.convert::before{content:"";position:absolute;left:50%;top:0;width:min(90vw,760px);height:1px;transform:translateX(-50%);
  background:linear-gradient(90deg,transparent,rgba(53,226,255,.42),transparent)}
.convert-grid{display:grid;grid-template-columns:minmax(0,.82fr) minmax(0,1.18fr);gap:clamp(32px,5vw,76px);align-items:start}
.convert h2{font-size:clamp(1.6rem,1.25rem + 1.5vw,2.5rem);max-width:16ch;margin-bottom:16px;line-height:1.12}
.convert .band-lead{margin-bottom:26px}
.convert .expect{display:grid;gap:10px;margin-top:26px}
.convert .expect li{font-size:.9rem;color:var(--muted);padding-left:22px;position:relative;line-height:1.58}
.convert .expect li::before{content:"";position:absolute;left:0;top:.6em;width:9px;height:1px;background:var(--line-lit)}
.convert .alt{margin-top:28px;font-size:.92rem;color:var(--muted)}
.convert .alt a{color:var(--cyan-soft);border-bottom:1px solid rgba(166,230,255,.3)}
.convert .alt a:hover{border-bottom-color:var(--cyan-soft)}

/* ---------- Formulario ---------- */
.evo-form{display:grid;gap:18px}
.evo-form .row{display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));gap:18px}
.field{display:grid;gap:7px;min-width:0}
.field > label{font-size:.79rem;letter-spacing:.1em;text-transform:uppercase;color:var(--muted);font-weight:600}
.field > label .opt{text-transform:none;letter-spacing:0;font-weight:400;color:var(--faint);margin-left:6px}
.field input,.field select,.field textarea{
  width:100%;background:rgba(6,12,22,.72);border:1px solid var(--line-hi);border-radius:var(--r-sm);
  color:var(--text);font:inherit;font-size:.98rem;padding:13px 14px;min-height:48px;
  transition:border-color var(--t-fast) ease,box-shadow var(--t-fast) ease,background var(--t-fast) ease;
}
.field textarea{min-height:118px;resize:vertical;line-height:1.6}
.field select{appearance:none;cursor:pointer;
  background-image:linear-gradient(45deg,transparent 50%,rgba(166,230,255,.7) 50%),linear-gradient(135deg,rgba(166,230,255,.7) 50%,transparent 50%);
  background-position:calc(100% - 19px) 21px,calc(100% - 13px) 21px;background-size:6px 6px;background-repeat:no-repeat;
  padding-right:42px}
.field input::placeholder,.field textarea::placeholder{color:rgba(99,121,154,.8)}
.field input:hover,.field select:hover,.field textarea:hover{border-color:var(--line-lit)}
.field input:focus-visible,.field select:focus-visible,.field textarea:focus-visible{
  outline:none;border-color:rgba(53,226,255,.7);box-shadow:0 0 0 3px rgba(53,226,255,.16);background:rgba(8,16,28,.9)}
.field .hint{font-size:.82rem;color:var(--faint);line-height:1.5}
/* El error es rojo pero legible sobre fondo oscuro, no rojo puro. */
.field .err{font-size:.84rem;color:#FF9BA3;min-height:0;line-height:1.45}
.field.invalid input,.field.invalid select,.field.invalid textarea{border-color:rgba(255,120,132,.72)}
.field.invalid input:focus-visible,.field.invalid select:focus-visible,.field.invalid textarea:focus-visible{
  box-shadow:0 0 0 3px rgba(255,120,132,.16)}

/* Consentimiento */
.consent{display:grid;grid-template-columns:22px minmax(0,1fr);gap:12px;align-items:start;margin-top:4px}
.consent input[type=checkbox]{
  appearance:none;width:20px;height:20px;margin:1px 0 0;min-height:0;padding:0;border-radius:5px;
  border:1px solid var(--line-hi);background:rgba(6,12,22,.72);cursor:pointer;flex:none}
.consent input[type=checkbox]:checked{background:var(--blue);border-color:rgba(53,226,255,.7)}
.consent input[type=checkbox]:checked::after{content:"";display:block;width:5px;height:10px;margin:2px auto 0;
  border:solid #fff;border-width:0 2px 2px 0;transform:rotate(42deg)}
.consent input[type=checkbox]:focus-visible{outline:none;box-shadow:0 0 0 3px rgba(53,226,255,.2)}
.consent label{font-size:.88rem;color:var(--muted);line-height:1.58}
.consent a{color:var(--cyan-soft);border-bottom:1px solid rgba(166,230,255,.3)}
.consent.invalid label{color:#FFB4BA}

.form-foot{display:flex;flex-wrap:wrap;gap:16px;align-items:center;margin-top:6px}
.form-foot .button[aria-busy=true]{opacity:.72;pointer-events:none}
.form-foot .privacy{font-size:.82rem;color:var(--faint);max-width:38ch;line-height:1.5}

/* Resumen de errores y estados */
.form-status{font-size:.9rem;line-height:1.6}
.form-status:empty{display:none}
.form-status.error{color:#FF9BA3;border-left:2px solid rgba(255,120,132,.5);padding:12px 0 12px 14px;background:rgba(60,10,18,.22)}

/* Éxito: sustituye al formulario, no un alert */
.form-done{border:1px solid var(--line-hi);border-radius:var(--r-md);padding:clamp(26px,4vw,38px);
  background:linear-gradient(180deg,rgba(10,22,40,.6),rgba(4,9,17,.6))}
.form-done h3{font-size:1.32rem;margin-bottom:12px}
.form-done p{color:var(--text-dim);font-size:.98rem;line-height:1.68;max-width:52ch}
.form-done .actions{display:flex;flex-wrap:wrap;gap:14px;margin-top:26px}

/* Contexto de solución fijado por la página: se muestra, no se pregunta */
.ctx-note{font-size:.84rem;color:var(--muted);padding:12px 14px;border:1px solid var(--line);
  border-radius:var(--r-sm);background:rgba(8,16,28,.5);line-height:1.55}
.ctx-note b{color:var(--cyan-soft);font-weight:600}

/* ---------- Página legal ---------- */
.legal-page{max-width:74ch}
.legal-page h2{font-size:1.24rem;margin:38px 0 12px}
.legal-page h3{font-size:1rem;margin:24px 0 8px;color:var(--text-dim)}
.legal-page p,.legal-page li{color:var(--text-dim);font-size:.98rem;line-height:1.76}
.legal-page ul{margin:12px 0 12px 20px;display:grid;gap:8px;list-style:disc}
.legal-page .updated{font-size:.84rem;color:var(--faint);margin-top:8px}
/* Aviso de contenido no aprobado. Debe ser imposible de confundir con
   texto legal vigente. */
.draft-notice{border:1px solid rgba(255,196,120,.42);background:rgba(60,40,10,.3);border-radius:var(--r-md);
  padding:20px 22px;margin:28px 0 8px}
.draft-notice b{display:block;color:#FFD79B;font-size:.92rem;letter-spacing:.04em;margin-bottom:8px}
.draft-notice p{color:#E6CFA8;font-size:.9rem;line-height:1.66;max-width:64ch}

/* ---------- /agendar/ · el calendario como tramo de la pagina ----------
   El bloque hereda el envoltorio del sistema, asi que reservar deja de ser
   una herramienta aparte y pasa a ser el paso siguiente del diagnostico.
   El iframe de GHL ajusta su altura mediante form_embed.js. */
.calendario{margin-top:clamp(8px,1.6vh,20px)}
.calendario-head{display:flex;flex-wrap:wrap;gap:16px 24px;align-items:flex-end;justify-content:space-between;
  padding-bottom:20px;border-bottom:1px solid var(--line);margin-bottom:clamp(20px,3vh,34px)}
.calendario-head .eyebrow{display:block;margin-bottom:12px}
.calendario-head h2{font-size:clamp(1.5rem,1.2rem + 1.3vw,2.3rem);line-height:1.14;max-width:18ch}
.calendario-duracion{font:600 .72rem/1 ui-monospace,monospace;letter-spacing:.14em;text-transform:uppercase;
  color:var(--cyan-soft);border:1px solid var(--line-hi);border-radius:100px;padding:8px 15px;white-space:nowrap}
.calendario-marco{position:relative;border:1px solid var(--line-hi);border-radius:var(--r-md);overflow:hidden;
  background:linear-gradient(168deg,rgba(10,26,58,.42),rgba(4,10,24,.36))}
.calendario-marco iframe{display:block;width:100%;min-height:720px;border:0}
.calendario-pie{display:grid;gap:12px;margin-top:22px;max-width:64ch}
.calendario-pie p{color:var(--muted);font-size:.93rem;line-height:1.66;margin:0}
.calendario-privacidad{color:var(--faint);font-size:.85rem}
.calendario-privacidad a{color:var(--muted);text-decoration:underline;text-underline-offset:2px}
@media (max-width:760px){
  .calendario-marco iframe{min-height:760px}
  .calendario-head{align-items:flex-start}
}

/* ---------- Responsive ---------- */
@media (max-width:1024px){
  .convert-grid{grid-template-columns:1fr;gap:38px}
}
@media (max-width:760px){
  /* Móvil: menos columnas, menos capas, más lectura. */
  .page-hero{padding-top:calc(var(--header) + 40px)}
  .page-hero h1{max-width:none}
  .shift-row{grid-template-columns:1fr;gap:6px;padding:16px 0}
  .shift-row .to{text-align:left;transform:rotate(90deg);width:1.1rem;opacity:.55}
  .flow > li{grid-template-columns:40px minmax(0,1fr);gap:14px}
  .page-atmos::after{display:none}
  .evo-form .row{grid-template-columns:1fr}
  .form-foot{flex-direction:column;align-items:stretch}
  .form-foot .button{width:100%;justify-content:center}
  .form-foot .privacy{max-width:none}
}

/* El motion de estas páginas es sólo revelado por scroll; sin ella,
   todo queda visible y estático. */
@media (prefers-reduced-motion:reduce){
  .page-atmos,.page-horizon{opacity:.55}
}

/* ============================================================
   SISTEMA DE PÁGINAS EVO v2 — bloques editoriales
   ------------------------------------------------------------
   Las clases anteriores (.band, .siblings, .convert-grid…) se conservan
   porque las siguen usando /evaluacion/, /agendar/ y las legales.
   Lo que viene son los bloques del sistema modular: composición editorial
   asimétrica en lugar de rejillas de tarjetas.

   PRINCIPIOS
   · una sola idea por tramo, con aire alrededor;
   · la jerarquía la hace la tipografía y el espacio, no las cajas;
   · líneas de 1px en vez de bordes de tarjeta;
   · el color se usa para señalar, nunca para decorar;
   · medida de línea acotada: nunca una columna de ocho caracteres.
   ============================================================ */

/* ---------- Tramo: envoltorio común y ritmo vertical ---------- */
.tramo{padding:clamp(58px,9vh,124px) 0;position:relative}
.tramo + .tramo{border-top:1px solid var(--line)}
.tramo-head{max-width:64ch;margin-bottom:clamp(30px,4.5vh,54px)}
.tramo-head .eyebrow{display:block;margin-bottom:14px}
.tramo-head h2{font-size:clamp(1.62rem,1.24rem + 1.5vw,2.6rem);line-height:1.13;max-width:20ch;margin-bottom:16px}
.tramo-lead{color:var(--text-dim);font-size:var(--fs-body);line-height:1.72;max-width:60ch}

/* ---------- Insight: composición asimétrica ---------- */
.insight{display:grid;grid-template-columns:minmax(0,1.02fr) minmax(0,1fr);
  gap:clamp(30px,5vw,84px);align-items:start}
.insight h2{font-size:clamp(1.72rem,1.24rem + 1.85vw,2.95rem);line-height:1.1;max-width:15ch}
.insight-lead{font-size:var(--fs-lead);color:var(--text-dim);line-height:1.7;max-width:52ch}
.insight-coste{margin-top:22px;padding-top:20px;border-top:1px solid var(--line);
  font-size:.92rem;color:var(--muted);line-height:1.68;max-width:52ch}

/* ---------- Antes → Después ---------- */
.shift{display:grid;gap:0}
.shift > li{display:grid;grid-template-columns:minmax(0,1fr) 46px minmax(0,1fr);
  gap:clamp(12px,2vw,28px);align-items:baseline;padding:20px 0;border-top:1px solid var(--line)}
.shift > li:last-child{border-bottom:1px solid var(--line)}
.shift-antes{color:var(--faint);font-size:.96rem;line-height:1.55}
.shift-flecha{color:var(--cyan-soft);opacity:.5;text-align:center;font-size:.95rem}
.shift-despues{color:var(--text);font-size:1rem;line-height:1.55;font-weight:500}

/* ---------- Recorrido: raíl con línea que avanza ---------- */
.recorrido{position:relative;display:grid;gap:0;padding-left:clamp(28px,4vw,48px);counter-reset:paso}
.recorrido-linea{position:absolute;left:6px;top:14px;bottom:14px;width:1px;background:var(--line)}
.recorrido-linea i{position:absolute;inset:0 auto auto 0;width:1px;height:0;display:block;
  background:linear-gradient(180deg,rgba(53,226,255,.75),rgba(53,226,255,.14));
  transition:height .45s var(--ease-soft)}
.recorrido > li{position:relative;padding:20px 0 22px;border-top:1px solid var(--line);counter-increment:paso}
.recorrido > li:first-of-type{border-top:0}
.recorrido .paso-nodo{position:absolute;left:calc(-1 * clamp(28px,4vw,48px) + 2px);top:28px;
  width:9px;height:9px;border-radius:50%;border:1px solid var(--line-hi);background:var(--bg);
  transition:border-color var(--t-base) ease,box-shadow var(--t-base) ease}
.recorrido > li.paso-activo .paso-nodo{border-color:var(--cyan-soft);box-shadow:0 0 0 4px rgba(53,226,255,.1)}
.recorrido h3{font-size:1.14rem;margin-bottom:7px;display:flex;align-items:baseline;gap:12px}
.recorrido h3::before{content:counter(paso,decimal-leading-zero);
  font:600 .7rem/1 ui-monospace,monospace;letter-spacing:.16em;color:var(--faint);flex:none}
.recorrido p{color:var(--muted);font-size:.95rem;line-height:1.68;max-width:58ch;padding-left:34px}

/* ---------- Anatomía ---------- */
.anatomia{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,238px),1fr));
  gap:clamp(24px,3vw,44px)}
.anatomia > li{padding-top:20px;border-top:1px solid var(--line-hi)}
.anatomia-n{font:600 .7rem/1 ui-monospace,monospace;letter-spacing:.16em;color:rgba(120,215,255,.6)}
.anatomia h3{font-size:1.1rem;margin:12px 0 8px}
.anatomia p{color:var(--muted);font-size:.93rem;line-height:1.66}


/* ---------- Entrega + alcance ---------- */
.entrega{display:grid;grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr);
  gap:clamp(34px,5vw,86px);align-items:start}
.entrega-col .eyebrow{display:block;margin-bottom:12px}
.entrega-col h2{font-size:clamp(1.45rem,1.2rem + 1.1vw,2.1rem);line-height:1.15;margin-bottom:16px;max-width:18ch}
.alcance{display:grid;gap:0;margin-top:24px}
.alcance > li{padding:20px 0;border-top:1px solid var(--line)}
.alcance > li:last-child{border-bottom:1px solid var(--line)}
.alcance h4{font-size:1rem;margin-bottom:7px}
.alcance p{color:var(--muted);font-size:.92rem;line-height:1.66;max-width:56ch}

/* ---------- Respaldo: alcance y entregables en segundo plano ---------- */
.respaldo{border:1px solid var(--line);border-radius:var(--r-md);padding:clamp(24px,4vw,48px);background:linear-gradient(168deg,rgba(8,20,42,.34),rgba(3,8,18,.2))}
.respaldo-head{display:grid;grid-template-columns:minmax(0,.45fr) minmax(0,1fr);gap:20px 44px;align-items:end;padding-bottom:22px;border-bottom:1px solid var(--line)}
.respaldo-head .eyebrow{align-self:start}
.respaldo-head h2{font-size:clamp(1.28rem,1.08rem + .8vw,1.8rem);line-height:1.2;max-width:28ch}
.respaldo-cols{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,260px),1fr));gap:28px 42px;margin-top:26px}
.respaldo-col h3{font-size:1rem;margin-bottom:14px;color:var(--text-dim)}
.respaldo-lead{color:var(--muted);font-size:.88rem;line-height:1.62;margin-bottom:12px}
.respaldo-lista{display:grid;gap:9px;color:var(--muted);font-size:.86rem;line-height:1.55}
.respaldo-lista li{position:relative;padding-left:16px}
.respaldo-lista li::before{content:"";position:absolute;left:0;top:.68em;width:5px;height:1px;background:var(--cyan-soft)}
.respaldo-lista--def{gap:14px}
.respaldo-lista--def b,.respaldo-lista--def span{display:block}
.respaldo-lista--def b{color:var(--text-dim);font-size:.88rem;margin-bottom:3px}

/* ---------- Seguridad ---------- */
.seguridad{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,272px),1fr));
  gap:clamp(22px,3vw,40px)}
.seguridad > li{padding:22px 0 0;border-top:1px solid var(--line-hi);position:relative}
.seguridad > li::before{content:"";position:absolute;top:-1px;left:0;width:34px;height:1px;background:var(--cyan-soft);opacity:.6}
.seguridad h3{font-size:1.04rem;margin-bottom:8px}
.seguridad p{color:var(--muted);font-size:.92rem;line-height:1.66}

/* ---------- Continuidad: la cadena comercial ---------- */
.cadena{display:flex;flex-wrap:wrap;gap:0;margin-bottom:26px;
  border-top:1px solid var(--line);border-left:1px solid var(--line)}
.cadena > li{flex:1 1 150px;display:grid;gap:7px;padding:18px 20px;
  border-right:1px solid var(--line);border-bottom:1px solid var(--line);
  font-size:.95rem;color:var(--text);position:relative}
.cadena > li span{font:600 .68rem/1 ui-monospace,monospace;letter-spacing:.16em;color:rgba(120,215,255,.55)}
.cadena-cierre{color:var(--text-dim);font-size:var(--fs-body);line-height:1.7;max-width:58ch;margin-bottom:20px}
.enlace-fino{color:var(--cyan-soft);font-size:.95rem;display:inline-flex;gap:8px;align-items:center;padding:8px 0}
.enlace-fino:hover{color:#fff}

/* ---------- Agentes construidos ---------- */
.agentes{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,330px),1fr));gap:clamp(24px,3vw,40px)}
.agente{padding-top:24px;border-top:1px solid var(--line-hi)}
.agente-id{display:flex;gap:16px;align-items:center;margin-bottom:16px}
.agente-marca{width:44px;height:44px;flex:none;border-radius:50%;display:grid;place-items:center;
  border:1px solid var(--line-hi);font:600 .82rem/1 ui-monospace,monospace;letter-spacing:.08em;color:var(--cyan-soft)}
.agente h3{font-size:1.12rem}
.agente h4{font-size:.8rem;font-weight:500;color:var(--faint);letter-spacing:.02em;margin-top:3px}
.agente p{color:var(--muted);font-size:.93rem;line-height:1.68;max-width:52ch}
.agente-tags{display:flex;flex-wrap:wrap;gap:8px;margin-top:16px}
.agente-tags li{font-size:.72rem;letter-spacing:.06em;text-transform:uppercase;color:var(--faint);
  border:1px solid var(--line);border-radius:100px;padding:5px 11px}

/* ---------- Casos y testimonios (vacío hasta tener reales) ---------- */
.casos{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,320px),1fr));gap:clamp(24px,3vw,44px)}
.caso{padding-top:24px;border-top:1px solid var(--line-hi)}
.caso-metrica{font-size:clamp(1.7rem,1.3rem + 1.4vw,2.5rem);color:var(--cyan-soft);line-height:1;margin-bottom:14px}
.caso blockquote p{color:var(--text-dim);font-size:1rem;line-height:1.7}
.caso footer{margin-top:16px;display:grid;gap:3px}
.caso footer b{font-size:.92rem}
.caso footer span{font-size:.82rem;color:var(--faint)}

/* ---------- Soluciones hermanas ---------- */
.hermanas{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,268px),1fr));gap:0}
.hermana{display:grid;gap:9px;padding:26px clamp(38px,3.4vw,50px) 26px 0;
  border-top:1px solid var(--line);position:relative;transition:background var(--t-base) ease}
.hermana:hover{background:rgba(120,190,255,.032)}
.hermana-eyebrow{font:600 .68rem/1 ui-monospace,monospace;letter-spacing:.14em;color:var(--faint);text-transform:uppercase}
.hermana h3{font-size:1.1rem}
.hermana p{color:var(--muted);font-size:.9rem;line-height:1.62}
.hermana-ir{position:absolute;right:clamp(14px,1.8vw,22px);top:26px;color:var(--cyan-soft);opacity:0;
  transform:translateX(-6px);transition:opacity var(--t-base) ease,transform var(--t-base) var(--ease-out)}
.hermana:hover .hermana-ir,.hermana:focus-visible .hermana-ir{opacity:.85;transform:none}

/* ---------- Conversión: intro + formulario ---------- */
.convert-intro .eyebrow{display:block;margin-bottom:14px}
.convert-intro h2{font-size:clamp(1.5rem,1.2rem + 1.3vw,2.3rem);line-height:1.14;margin-bottom:16px;max-width:18ch}
.expect{counter-reset:paso;display:grid;gap:0;margin:26px 0}
.expect > li{counter-increment:paso;display:grid;gap:4px;padding:16px 0 16px 38px;
  border-top:1px solid var(--line);position:relative}
.expect > li:last-child{border-bottom:1px solid var(--line)}
.expect > li::before{content:counter(paso,decimal-leading-zero);position:absolute;left:0;top:18px;
  font:600 .68rem/1 ui-monospace,monospace;letter-spacing:.14em;color:rgba(120,215,255,.55)}
.expect b{font-size:.96rem;font-weight:600}
.expect span{color:var(--muted);font-size:.9rem;line-height:1.62}

/* ============================================================
   FORMULARIO EVO
   Oscuro, con aire, bordes finos y foco inequívoco. La estructura, los
   `name`, los `id` y los `data-*` son los que espera assets/forms.js: aquí
   sólo cambia cómo se ve.
   ============================================================ */
.convert-form{position:relative;border:1px solid var(--line-hi);border-radius:var(--r-lg);
  padding:clamp(24px,3vw,40px);
  background:linear-gradient(168deg,rgba(10,26,58,.5),rgba(4,10,24,.42));
  box-shadow:0 24px 70px rgba(2,6,18,.45)}
/* Filo de luz superior: el mismo recurso que usa la HOME en sus paneles. */
.convert-form::before{content:"";position:absolute;left:clamp(24px,3vw,40px);right:clamp(24px,3vw,40px);top:-1px;height:1px;
  background:linear-gradient(90deg,transparent,rgba(120,215,255,.42),transparent)}

.form-head{margin-bottom:24px;padding-bottom:20px;border-bottom:1px solid var(--line)}
.form-kicker{font:600 .68rem/1 ui-monospace,monospace;letter-spacing:.18em;text-transform:uppercase;color:rgba(120,215,255,.7)}
.form-head h3{font-size:1.22rem;margin-top:10px;line-height:1.3;max-width:22ch}

.evo-form .form-grupo{border:0;padding:0;margin:0 0 22px}
.evo-form .form-grupo legend{font:600 .68rem/1 ui-monospace,monospace;letter-spacing:.16em;
  text-transform:uppercase;color:var(--faint);padding:0;margin-bottom:14px}
.evo-form .row{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,190px),1fr));gap:16px}
.evo-form .field{display:grid;gap:7px;margin-bottom:16px}
.evo-form label{font-size:.83rem;color:var(--text-dim);letter-spacing:.01em}
.evo-form input,.evo-form select,.evo-form textarea{
  width:100%;font:inherit;font-size:.95rem;color:var(--text);
  background:rgba(3,9,22,.62);border:1px solid var(--line);border-radius:var(--r-sm);
  padding:12px 14px;transition:border-color var(--t-fast) ease,box-shadow var(--t-fast) ease,background var(--t-fast) ease}
.evo-form textarea{min-height:118px;resize:vertical;line-height:1.6}
.evo-form select{appearance:none;cursor:pointer;padding-right:38px;
  background-image:linear-gradient(45deg,transparent 50%,rgba(150,200,240,.7) 50%),linear-gradient(135deg,rgba(150,200,240,.7) 50%,transparent 50%);
  background-position:calc(100% - 19px) calc(50% + 1px),calc(100% - 14px) calc(50% + 1px);
  background-size:5px 5px,5px 5px;background-repeat:no-repeat}
/* Campo fijado por la página. Va `readonly` y no `disabled` a propósito: un
   control deshabilitado no se envía y External Tracking no lo captura. Se
   distingue del resto para que se lea como un dato ya resuelto y no como una
   casilla que alguien olvidó rellenar. */
.evo-form input[readonly]{background:rgba(3,9,22,.34);border-style:dashed;
  color:var(--text-dim);cursor:default}
.evo-form input[readonly]:hover{border-color:var(--line)}
.evo-form input[readonly]:focus-visible{border-color:var(--line-hi);
  background:rgba(3,9,22,.34);box-shadow:0 0 0 3px rgba(120,190,255,.1)}
.field-fijo label{color:var(--faint)}

.evo-form input::placeholder,.evo-form textarea::placeholder{color:rgba(140,168,200,.42)}
.evo-form input:hover,.evo-form select:hover,.evo-form textarea:hover{border-color:var(--line-hi)}
.evo-form input:focus-visible,.evo-form select:focus-visible,.evo-form textarea:focus-visible{
  outline:0;border-color:rgba(120,215,255,.6);background:rgba(6,16,36,.8);
  box-shadow:0 0 0 3px rgba(53,226,255,.13)}
.evo-form [aria-invalid="true"]{border-color:rgba(255,138,138,.62)}
.evo-form [aria-invalid="true"]:focus-visible{box-shadow:0 0 0 3px rgba(255,120,120,.14)}
.evo-form .err{font-size:.8rem;color:#ff9b9b;line-height:1.45}
.evo-form .err:empty{display:none}

.evo-form .ctx-note{font-size:.85rem;color:var(--muted);margin-bottom:20px;padding:11px 14px;
  border-left:1px solid rgba(120,215,255,.4);background:rgba(20,60,120,.14);border-radius:0 var(--r-sm) var(--r-sm) 0}
.evo-form .consent{display:grid;grid-template-columns:auto minmax(0,1fr);gap:10px 12px;align-items:start;
  padding-top:18px;border-top:1px solid var(--line)}
.evo-form .consent input{width:17px;height:17px;margin-top:2px;accent-color:#2f7fe0;cursor:pointer}
.evo-form .consent label{font-size:.85rem;color:var(--muted);line-height:1.6}
.evo-form .consent label a{color:var(--cyan-soft);text-decoration:underline;text-underline-offset:2px}
.evo-form .consent .err{grid-column:2}
.evo-form .form-foot{display:flex;flex-wrap:wrap;gap:16px;align-items:center;margin-top:22px}
.evo-form .privacy{font-size:.8rem;color:var(--faint);max-width:34ch;line-height:1.55}
.evo-form .form-status{margin-top:16px;font-size:.88rem;line-height:1.6;color:var(--muted)}
.evo-form .form-status:empty{display:none}

.form-done{text-align:left;padding:clamp(24px,3vw,40px);border:1px solid var(--line-hi);border-radius:var(--r-lg);
  background:linear-gradient(168deg,rgba(10,30,64,.55),rgba(4,10,24,.42))}
.form-done-marca{display:block;width:34px;height:34px;border-radius:50%;margin-bottom:18px;
  border:1px solid rgba(120,215,255,.5);position:relative}
.form-done-marca::after{content:"";position:absolute;left:11px;top:9px;width:8px;height:14px;
  border:solid rgba(150,235,255,.9);border-width:0 1.5px 1.5px 0;transform:rotate(42deg)}
.form-done h3{font-size:1.24rem;margin-bottom:12px}
.form-done p{color:var(--muted);font-size:.95rem;line-height:1.7;max-width:52ch}
.form-done .actions{display:flex;flex-wrap:wrap;gap:14px;margin-top:24px}

/* ============================================================
   MÓVIL — diseñado, no comprimido
   Cada bloque cambia de ESTRUCTURA en pantalla estrecha, no sólo de ancho.
   ============================================================ */
@media (max-width:1100px){
  /* El diagrama del hero pasa a ser un remate bajo el texto, no un fondo. */
  .insight{grid-template-columns:1fr;gap:24px}
  .entrega{grid-template-columns:1fr;gap:40px}
}
@media (max-width:760px){
  .tramo{padding:clamp(44px,7vh,72px) 0}
  .tramo-head h2,.insight h2{max-width:none}
  /* Antes → Después: en vertical la flecha pasa a ser un separador. */
  .shift > li{grid-template-columns:1fr;gap:6px;padding:16px 0}
  .shift-flecha{text-align:left;transform:rotate(90deg);transform-origin:left center;width:1.1rem;opacity:.45}
  .recorrido{padding-left:26px}
  .recorrido .paso-nodo{left:-26px}
  .recorrido p{padding-left:0}
  .cadena > li{flex:1 1 100%}
  .hermana-ir{opacity:.6;transform:none}
  .puente{padding-left:26px;margin-bottom:26px}
  .puente-linea{left:4px;height:calc(clamp(44px,7vh,72px) + 1.4em)}
  .convert-form{padding:22px 18px;border-radius:var(--r-md)}
  .evo-form .row{grid-template-columns:1fr}
  .respaldo-head{grid-template-columns:1fr}
}

@media (prefers-reduced-motion:reduce){
  .recorrido-linea i{transition:none}
}

/* ============================================================
   HERO DE PÁGINA — un pliego, no una portada
   ------------------------------------------------------------
   Antes cada solución traía su propio diagrama SVG ocupando la mitad derecha
   del primer viewport: nodos, órbitas, ondas concéntricas, retículas. Ninguno
   explicaba nada que el texto no dijera mejor. Estaban ahí para no dejar el
   lado vacío, y competían con el titular justo en el momento en que hay que
   leerlo.

   Un recurso visual se gana su sitio cuando explica un proceso, una relación
   o una transformación. Eso ya ocurre en el bloque de capacidades y en el
   raíl del recorrido, que sí tienen algo que enseñar. Aquí no hacía falta.

   Lo que queda es lo que sostiene un hero premium: tipografía, espacio, una
   línea y una luz. La diferencia entre una página y otra la lleva la
   afirmación de apertura, no un dibujo.
   ============================================================ */

/* El pliego: el titular ocupa su columna y la promesa vive al lado, separada
   por una línea. Ésa es toda la composición, y por eso usa el ancho entero
   sin necesidad de rellenarlo. */
.hero-pliego{display:grid;grid-template-columns:minmax(0,1.18fr) minmax(0,.82fr);
  gap:clamp(26px,4.2vw,80px);align-items:start;
  padding-top:clamp(18px,2.4vh,28px);border-top:1px solid var(--line);margin-top:20px}
.hero-lateral{display:grid;gap:0;padding-left:clamp(0px,2.4vw,34px);
  border-left:1px solid var(--line)}
/* `balance` reparte las líneas por sí solo y evita que la última se quede
   con una palabra suelta. Medido sin él, cuatro de las ocho afirmaciones
   partían por donde no debían: «del mundo» y «resolviendo» quedaban solas y
   «funciona. Verla» cortaba una frase por la mitad. Con él, el corte cae en
   el límite sintáctico sin tener que fijar una medida distinta por página.
   Donde el navegador no lo soporte, el texto simplemente fluye: no se rompe
   nada. */
.page-hero h1{margin:0;font-size:clamp(2rem,1.42rem + 2.3vw,3.05rem);line-height:1.08;
  letter-spacing:-.018em;text-wrap:balance}
.page-hero .hero-lead{font-size:var(--fs-lead);color:var(--text-dim);max-width:44ch;
  line-height:1.66;margin:0}
/* El identificador de la solución encabeza la página, sobre el titular. La
   tipografía es la misma que tenía al pie de la composición: nombre en peso
   fuerte y descriptor en voz baja. Lo que cambia es que ya no necesita su
   propio filo, porque el del pliego viene justo debajo y dos hairlines
   seguidas a sesenta píxeles se leen como un error de maqueta. */
.hero-producto{display:grid;gap:4px;margin:16px 0 0;max-width:52ch}
.hero-producto b{font-size:1rem;font-weight:650;letter-spacing:-.01em;color:var(--text)}
.hero-producto span{font-size:.93rem;color:var(--muted);line-height:1.55}
.hero-cta{display:flex;flex-wrap:wrap;gap:14px;margin-top:clamp(26px,3.6vh,42px)}
.page-hero .hero-promesa{margin:clamp(24px,3.2vh,36px) 0 0;padding-left:18px;
  border-left:1px solid var(--line-hi);font-size:.94rem;color:var(--muted);
  max-width:62ch;line-height:1.68}

/* La luz. Un solo foco muy contenido detrás del titular: da profundidad al
   primer viewport sin dibujar nada y sin moverse. */
.page-hero{position:relative;overflow:clip;
  padding:calc(var(--header) + clamp(30px,4.6vh,66px)) 0 clamp(44px,6.5vh,80px)}
.page-hero::before{content:"";position:absolute;left:-8%;top:6%;
  width:min(64vw,860px);height:min(52vh,460px);border-radius:50%;
  background:radial-gradient(closest-side,rgba(31,111,255,.13),transparent 70%);
  pointer-events:none;z-index:0}
.page-hero .container{position:relative;z-index:2}
.crumbs{margin-bottom:22px}

/* La cadena de EVO Growth es la única pieza que sobrevive al recorte, porque
   no es decoración: dice el sistema entero —contacto, conversación,
   seguimiento, recuperación, cita, oportunidad, cliente— antes de nombrar el
   producto. Cruza el hero a lo ancho, bajo el pliego. */
.hero-cadena{display:flex;flex-wrap:wrap;align-items:center;gap:0;
  margin:clamp(22px,3vh,32px) 0 0;padding-top:clamp(18px,2.4vh,26px);
  border-top:1px solid var(--line)}
.hero-cadena li{position:relative;font-size:.82rem;letter-spacing:.02em;color:var(--muted);
  padding:7px 0;white-space:nowrap}
.hero-cadena li + li{padding-left:34px}
.hero-cadena li + li::before{content:"";position:absolute;left:12px;top:50%;width:12px;height:1px;
  background:var(--line-lit);opacity:.75}
.hero-cadena li:last-child{color:var(--cyan-soft)}

/* Ya no hace falta una medida por página: el reparto de líneas lo resuelve
   `balance` y la columna del pliego pone el límite. */

/* Intro comercial del formulario. Sustituye a la nota que explicaba nuestra
   lógica interna: el visitante no tiene por qué saber cómo fijamos el
   contexto, sólo qué le estamos preguntando. */
.form-intro{font-size:.92rem;color:var(--text-dim);line-height:1.62;margin-bottom:22px;max-width:44ch}

/* Una sola columna: el pliego deja de tener dos lados, así que la línea
   vertical pasa a ser horizontal y el titular recupera todo el ancho. */
@media (max-width:900px){
  .hero-pliego{grid-template-columns:minmax(0,1fr);gap:clamp(20px,3vh,28px)}
  .hero-lateral{padding-left:0;border-left:0;padding-top:clamp(18px,2.4vh,24px);
    border-top:1px solid var(--line)}
  .page-hero h1,.page-hero .hero-lead,.hero-producto{max-width:none}
  .page-hero::before{left:-24%;width:118vw;opacity:.7}
}
@media (max-width:760px){
  /* Medido a 390x844: con el ritmo de escritorio la acción de EVO Growth
     caía 44px por debajo del pliegue, porque su cadena añade una fila más.
     Se aprieta el ritmo del hero, no la tipografía. */
  .page-hero{padding:calc(var(--header) + 22px) 0 clamp(34px,5vh,52px)}
  .hero-pliego{margin-top:14px;padding-top:16px}
  .hero-producto{margin-top:12px}
  .hero-cta{margin-top:22px}
  .page-hero .hero-promesa{margin-top:22px}
  .hero-cadena{margin-top:16px;padding-top:14px}
  .hero-cadena li{font-size:.78rem;padding:5px 0}
  .hero-cadena li + li{padding-left:24px}
  .hero-cadena li + li::before{left:8px;width:9px}
}

/* Escritorio de poca altura: el hero se aprieta lo justo para que la acción
   siga entrando en el primer golpe de vista. Sólo espaciado; ni tipografía
   ni composición cambian. */
@media (min-width:1024px) and (max-height:760px){
  .page-hero{padding-top:calc(var(--header) + 22px);padding-bottom:34px}
  .hero-pliego{margin-top:14px;padding-top:16px}
  .hero-producto{margin-top:12px}
  .hero-cadena{margin-top:16px;padding-top:14px}
  .hero-cta{margin-top:22px}
  .page-hero .hero-promesa{margin-top:20px}
}

/* ============================================================
   HERO DE SERVICIOS — misma calidad, cinco relaciones distintas
   Cada página comparte jerarquía y ritmo, pero su mapa cuenta un sistema
   propio: convergencia, ciclo, cadena, orquesta o módulos conectados.
   ============================================================ */
.page-hero--service{min-height:min(820px,100svh);display:flex;align-items:center;
  padding-bottom:clamp(48px,7vh,84px)}
.page-hero--service::before{left:auto;right:-12%;top:-10%;width:min(66vw,880px);
  background:radial-gradient(closest-side,rgba(31,111,255,.11),transparent 72%)}
.service-hero{display:grid;grid-template-columns:minmax(0,1.08fr) minmax(340px,.72fr);
  gap:clamp(54px,8vw,142px);align-items:center;margin-top:clamp(26px,4vh,52px)}
.service-hero-copy{max-width:760px}
.service-kicker{margin:18px 0 12px;color:var(--cyan-soft);font-size:.92rem;font-weight:650}
.page-hero--service h1{font-size:clamp(2.7rem,2rem + 3vw,4.95rem);line-height:.99;
  letter-spacing:-.043em;max-width:12ch;text-wrap:balance}
.page-hero--service .hero-lead{margin-top:clamp(22px,3vh,34px);max-width:52ch;
  font-size:clamp(1.03rem,.98rem + .35vw,1.28rem);line-height:1.62}
.page-hero--service .hero-cta{margin-top:clamp(28px,4vh,44px)}
.service-proof{margin:clamp(42px,6vh,72px) 0 0;padding-top:22px;border-top:1px solid var(--line);
  color:var(--muted);font-size:.9rem;line-height:1.6;max-width:70ch}

.service-map{position:relative;display:grid;grid-template-columns:minmax(120px,.74fr) 68px minmax(150px,1fr);
  align-items:center;min-height:286px;padding:26px 0}
.service-map-items{display:grid;gap:18px}
.service-map-items li,.service-map-result{border:1px solid rgba(120,215,255,.23);
  background:linear-gradient(145deg,rgba(10,25,48,.66),rgba(5,12,23,.45));
  box-shadow:inset 0 1px 0 rgba(255,255,255,.025)}
.service-map-items li{display:flex;align-items:center;gap:11px;min-height:50px;padding:0 15px;
  border-radius:10px;color:var(--text-dim);font-size:.84rem}
.service-map-items li > span{font:600 .62rem/1 ui-monospace,monospace;letter-spacing:.1em;
  color:rgba(120,215,255,.52)}
.service-map-link{position:relative;height:100%}
.service-map-link::before{content:"";position:absolute;left:0;top:50%;width:100%;height:1px;
  background:linear-gradient(90deg,rgba(85,169,255,.18),rgba(53,226,255,.7))}
.service-map-link::after{content:"";position:absolute;left:0;top:17%;bottom:17%;width:1px;
  background:linear-gradient(180deg,transparent,rgba(85,169,255,.38),transparent)}
.service-map-result{position:relative;display:grid;gap:7px;padding:24px 22px;border-radius:14px;
  border-color:rgba(53,226,255,.48);box-shadow:0 18px 60px rgba(0,93,255,.12),inset 0 1px 0 rgba(255,255,255,.05)}
.service-map-result::before{content:"";position:absolute;left:-4px;top:50%;width:7px;height:7px;
  border-radius:50%;transform:translateY(-50%);background:var(--cyan-soft);box-shadow:0 0 20px rgba(53,226,255,.7)}
.service-map-result span{font-size:1rem;font-weight:680;color:var(--text)}
.service-map-result small{font-size:.78rem;line-height:1.45;color:var(--muted)}

/* Marketing: el aprendizaje vuelve al inicio del siguiente ciclo. */
.service-map--ciclo .service-map-items{position:relative;padding-left:18px}
.service-map--ciclo .service-map-items::before{content:"";position:absolute;left:0;top:23px;bottom:23px;
  width:1px;background:linear-gradient(180deg,var(--line-lit),rgba(53,226,255,.18),var(--line-lit))}
.service-map--ciclo .service-map-items li{border-radius:6px 14px 14px 6px}
.service-map--ciclo .service-map-link::after{top:12%;bottom:12%;border:1px solid rgba(53,226,255,.25);
  border-left:0;border-radius:0 30px 30px 0;background:none}

/* Growth: las etapas forman un recorrido y desembocan en el sistema. */
.service-map--cadena{grid-template-columns:1fr;grid-template-rows:auto 42px auto;align-items:start}
.service-map--cadena .service-map-items{grid-template-columns:repeat(4,minmax(0,1fr));gap:7px}
.service-map--cadena .service-map-items li{position:relative;display:grid;gap:7px;align-content:center;
  padding:12px 11px;min-height:72px}
.service-map--cadena .service-map-items li + li::before{content:"";position:absolute;left:-8px;top:50%;
  width:8px;height:1px;background:rgba(53,226,255,.45)}
.service-map--cadena .service-map-link{height:42px;width:1px;justify-self:center}
.service-map--cadena .service-map-link::before{left:0;top:0;width:1px;height:100%;
  background:linear-gradient(180deg,rgba(85,169,255,.2),rgba(53,226,255,.68))}
.service-map--cadena .service-map-link::after{display:none}
.service-map--cadena .service-map-result{justify-self:center;min-width:220px;text-align:center}
.service-map--cadena .service-map-result::before{left:50%;top:-4px;transform:translateX(-50%)}

/* Agentes: un núcleo coordina tres tipos de trabajo. */
.service-map--orquesta{display:block;min-height:330px}
.service-map--orquesta .service-map-items{position:absolute;inset:0;display:block}
.service-map--orquesta .service-map-items li{position:absolute;width:128px;min-height:46px;justify-content:center}
.service-map--orquesta .service-map-items li:nth-child(1){left:0;top:24px}
.service-map--orquesta .service-map-items li:nth-child(2){right:0;top:24px}
.service-map--orquesta .service-map-items li:nth-child(3){left:18px;bottom:24px}
.service-map--orquesta .service-map-link{position:absolute;inset:52px 58px;border:1px solid rgba(53,226,255,.18);
  border-radius:50%;height:auto}
.service-map--orquesta .service-map-link::before{left:50%;top:50%;width:1px;height:50%;
  transform:translateY(-50%);background:linear-gradient(180deg,transparent,rgba(53,226,255,.5),transparent)}
.service-map--orquesta .service-map-link::after{left:0;right:0;top:50%;bottom:auto;width:100%;height:1px;
  background:linear-gradient(90deg,transparent,rgba(53,226,255,.5),transparent)}
.service-map--orquesta .service-map-result{position:absolute;left:50%;top:50%;width:188px;
  transform:translate(-50%,-50%);text-align:center}
.service-map--orquesta .service-map-result::before{display:none}

/* ERP: varios módulos alimentan una sola operación. */
.service-map--modulos{grid-template-columns:minmax(180px,1fr) 52px minmax(145px,.82fr)}
.service-map--modulos .service-map-items{grid-template-columns:repeat(2,minmax(0,1fr));gap:9px}
.service-map--modulos .service-map-items li{display:grid;gap:7px;align-content:center;min-height:76px;padding:12px}

.tramo-insight--service{padding-top:clamp(68px,10vh,126px);padding-bottom:clamp(70px,11vh,138px)}
.service-intro{display:grid;grid-template-columns:minmax(280px,.72fr) minmax(0,1.28fr);
  gap:clamp(52px,8vw,140px);align-items:start}
.service-intro-head{position:sticky;top:calc(var(--header) + 36px)}
.service-intro-head h2{font-size:clamp(2.1rem,1.55rem + 2.2vw,4rem);line-height:1.02;
  letter-spacing:-.035em;max-width:11ch;margin-top:18px}
.service-steps{display:grid}
.service-steps li{display:grid;grid-template-columns:44px minmax(120px,.42fr) minmax(0,1fr);
  gap:clamp(16px,2.2vw,34px);align-items:start;padding:28px 0;border-top:1px solid var(--line)}
.service-steps li:last-child{border-bottom:1px solid var(--line)}
.service-steps li > span{font:600 .72rem/1 ui-monospace,monospace;letter-spacing:.14em;
  color:rgba(120,215,255,.58);padding-top:7px}
.service-steps h3{font-size:1.05rem;line-height:1.35}
.service-steps p{font-size:.93rem;color:var(--muted);line-height:1.68;max-width:58ch}

@media (max-width:1000px){
  .page-hero--service{min-height:auto}
  .service-hero{grid-template-columns:1fr;gap:36px}
  .service-map{max-width:660px}
  .service-proof{margin-top:34px}
  .service-intro{grid-template-columns:1fr;gap:34px}
  .service-intro-head{position:static}
  .service-intro-head h2{max-width:14ch}
}
@media (max-width:620px){
  .page-hero--service h1{font-size:clamp(2.45rem,12vw,3.7rem);max-width:10ch}
  .service-map{grid-template-columns:1fr;gap:20px;min-height:0;padding:4px 0}
  .service-map-items{grid-template-columns:repeat(3,1fr);gap:8px}
  .service-map-items li{justify-content:center;min-height:44px;padding:0 8px;font-size:.72rem}
  .service-map-link{height:30px;width:1px;justify-self:center}
  .service-map-link::before{left:0;top:0;width:1px;height:100%;background:linear-gradient(180deg,rgba(85,169,255,.25),rgba(53,226,255,.7))}
  .service-map-link::after{display:none}
  .service-map-result{justify-self:stretch;text-align:center}
  .service-map-result::before{left:50%;top:-4px;transform:translateX(-50%)}
  .service-map--ciclo .service-map-items{padding-left:0}
  .service-map--ciclo .service-map-items::before{display:none}
  .service-map--cadena{grid-template-rows:auto 30px auto}
  .service-map--cadena .service-map-items{grid-template-columns:repeat(2,minmax(0,1fr))}
  .service-map--cadena .service-map-items li{min-height:58px}
  .service-map--cadena .service-map-items li + li::before{display:none}
  .service-map--orquesta{display:grid;min-height:0}
  .service-map--orquesta .service-map-items{position:static;display:grid}
  .service-map--orquesta .service-map-items li{position:static;width:auto}
  .service-map--orquesta .service-map-link{position:relative;inset:auto;border:0;border-radius:0;height:30px}
  .service-map--orquesta .service-map-result{position:relative;left:auto;top:auto;width:auto;transform:none}
  .service-map--modulos .service-map-items{grid-template-columns:repeat(2,minmax(0,1fr))}
  .service-steps li{grid-template-columns:34px minmax(0,1fr);gap:12px 14px;padding:22px 0}
  .service-steps h3,.service-steps p{grid-column:2}
}

/* ============================================================
   SOLUCIONES A MEDIDA — hero y entrada propios
   El mapa explica la decisión (integrar, automatizar o desarrollar) y ocupa
   un papel secundario. No es una ilustración grande ni una plantilla común.
   ============================================================ */
.page-hero--decision{min-height:min(820px,100svh);display:flex;align-items:center;
  padding-bottom:clamp(48px,7vh,84px)}
.page-hero--decision::before{left:auto;right:-12%;top:-10%;width:min(66vw,880px);
  background:radial-gradient(closest-side,rgba(31,111,255,.11),transparent 72%)}
.decision-hero{display:grid;grid-template-columns:minmax(0,1.08fr) minmax(340px,.72fr);
  gap:clamp(54px,8vw,142px);align-items:center;margin-top:clamp(26px,4vh,52px)}
.decision-hero-copy{max-width:760px}
.decision-kicker{margin:18px 0 12px;color:var(--cyan-soft);font-size:.92rem;font-weight:650}
.page-hero--decision h1{font-size:clamp(2.7rem,2rem + 3.2vw,5.35rem);line-height:.98;
  letter-spacing:-.045em;max-width:12ch;text-wrap:balance}
.page-hero--decision .hero-lead{margin-top:clamp(22px,3vh,34px);max-width:52ch;
  font-size:clamp(1.03rem,.98rem + .35vw,1.28rem);line-height:1.62}
.page-hero--decision .hero-cta{margin-top:clamp(28px,4vh,44px)}
.decision-map{position:relative;display:grid;grid-template-columns:minmax(120px,.74fr) 72px minmax(150px,1fr);
  align-items:center;min-height:280px;padding:28px 0}
.decision-routes{display:grid;gap:24px}
.decision-routes span,.decision-result{border:1px solid rgba(120,215,255,.23);
  background:linear-gradient(145deg,rgba(10,25,48,.66),rgba(5,12,23,.45));
  box-shadow:inset 0 1px 0 rgba(255,255,255,.025)}
.decision-routes span{display:flex;align-items:center;min-height:52px;padding:0 17px;
  border-radius:10px;color:var(--text-dim);font-size:.86rem}
.decision-connector{position:relative;height:100%}
.decision-connector::before{content:"";position:absolute;left:0;top:50%;width:100%;height:1px;
  background:linear-gradient(90deg,rgba(85,169,255,.2),rgba(53,226,255,.7))}
.decision-connector::after{content:"";position:absolute;left:0;top:18%;bottom:18%;width:1px;
  background:linear-gradient(180deg,transparent,rgba(85,169,255,.38),transparent)}
.decision-result{position:relative;display:grid;gap:7px;padding:24px 22px;border-radius:14px;
  border-color:rgba(53,226,255,.48);box-shadow:0 18px 60px rgba(0,93,255,.12),inset 0 1px 0 rgba(255,255,255,.05)}
.decision-result::before{content:"";position:absolute;left:-4px;top:50%;width:7px;height:7px;
  border-radius:50%;transform:translateY(-50%);background:var(--cyan-soft);box-shadow:0 0 20px rgba(53,226,255,.7)}
.decision-result span{font-size:1rem;font-weight:680;color:var(--text)}
.decision-result small{font-size:.78rem;line-height:1.45;color:var(--muted)}
.decision-proof{margin:clamp(42px,6vh,72px) 0 0;padding-top:22px;border-top:1px solid var(--line);
  color:var(--muted);font-size:.9rem;line-height:1.6;max-width:70ch}

.tramo-insight--decision{padding-top:clamp(68px,10vh,126px);padding-bottom:clamp(70px,11vh,138px)}
.decision-intro{display:grid;grid-template-columns:minmax(280px,.72fr) minmax(0,1.28fr);
  gap:clamp(52px,8vw,140px);align-items:start}
.decision-intro-head{position:sticky;top:calc(var(--header) + 36px)}
.decision-intro-head h2{font-size:clamp(2.1rem,1.55rem + 2.2vw,4rem);line-height:1.02;
  letter-spacing:-.035em;max-width:10ch;margin-top:18px}
.decision-steps{counter-reset:none;display:grid}
.decision-steps li{display:grid;grid-template-columns:44px minmax(120px,.42fr) minmax(0,1fr);
  gap:clamp(16px,2.2vw,34px);align-items:start;padding:28px 0;border-top:1px solid var(--line)}
.decision-steps li:last-child{border-bottom:1px solid var(--line)}
.decision-steps li > span{font:600 .72rem/1 ui-monospace,monospace;letter-spacing:.14em;
  color:rgba(120,215,255,.58);padding-top:7px}
.decision-steps h3{font-size:1.05rem;line-height:1.35}
.decision-steps p{font-size:.93rem;color:var(--muted);line-height:1.68;max-width:58ch}

@media (max-width:1000px){
  .page-hero--decision{min-height:auto}
  .decision-hero{grid-template-columns:1fr;gap:36px}
  .decision-map{max-width:660px;grid-template-columns:minmax(110px,.74fr) 64px minmax(150px,1fr);min-height:244px}
  .decision-proof{margin-top:34px}
  .decision-intro{grid-template-columns:1fr;gap:34px}
  .decision-intro-head{position:static}
  .decision-intro-head h2{max-width:14ch}
}
@media (max-width:620px){
  .page-hero--decision h1{font-size:clamp(2.45rem,12vw,3.7rem);max-width:10ch}
  .decision-map{grid-template-columns:1fr;gap:20px;min-height:0;padding:4px 0}
  .decision-routes{grid-template-columns:repeat(3,1fr);gap:8px}
  .decision-routes span{justify-content:center;min-height:44px;padding:0 8px;font-size:.75rem}
  .decision-connector{height:30px;width:1px;justify-self:center}
  .decision-connector::before{left:0;top:0;width:1px;height:100%;background:linear-gradient(180deg,rgba(85,169,255,.25),rgba(53,226,255,.7))}
  .decision-connector::after{display:none}
  .decision-result{justify-self:stretch;text-align:center}
  .decision-result::before{left:50%;top:-4px;transform:translateX(-50%)}
  .decision-steps li{grid-template-columns:34px minmax(0,1fr);gap:12px 14px;padding:22px 0}
  .decision-steps h3{grid-column:2}
  .decision-steps p{grid-column:2}
}

/* ============================================================
   FLUJO ENTRE SECCIONES
   ------------------------------------------------------------
   Una página no es una pila de bloques separados por cortes. El puente es la
   frase que enlaza lo leído con lo que viene, y su línea cruza físicamente
   el límite entre las dos secciones: entra por arriba desde el tramo
   anterior y baja hasta el texto.

   Donde hay puente NO hay borde. El puente ES el límite, y un límite que
   explica por qué sigues leyendo vale más que una raya.
   ============================================================ */
.tramo--puenteado{border-top:0 !important}
.puente{position:relative;margin:0 0 clamp(30px,4.6vh,58px);padding-left:34px;
  font-size:.92rem;line-height:1.6;color:var(--faint);max-width:52ch}
.puente-linea{position:absolute;left:6px;bottom:.7em;width:1px;
  height:calc(clamp(58px,9vh,124px) + 1.4em);
  background:linear-gradient(180deg,transparent,var(--line-lit));opacity:.55}
.puente-linea::after{content:"";position:absolute;left:-3px;bottom:0;width:7px;height:7px;
  border-radius:50%;border:1px solid var(--line-lit);background:var(--bg);opacity:.9}

/* El límite entre tramos sin puente deja de ser una raya de lado a lado y
   pasa a ser un filo que se apaga en los extremos: separa sin cortar. */
.tramo + .tramo{border-top:0;position:relative}
.tramo + .tramo::before{content:"";position:absolute;left:var(--gutter);right:var(--gutter);top:0;height:1px;
  background:linear-gradient(90deg,transparent,var(--line-hi) 22%,var(--line-hi) 78%,transparent)}
/* `border-top:0` no bastaba: el filo lo dibuja un pseudoelemento, así que un
   tramo con puente seguía llevando la raya encima del puente y se veían los
   dos límites a la vez. Misma especificidad y más abajo, así que gana. */
.tramo + .tramo--puenteado::before{display:none}

/* Promesa del hero: qué se compromete la solución, en positivo. */
.hero-promesa{margin:26px 0 0;padding-left:18px;border-left:1px solid var(--line-hi);
  font-size:.94rem;color:var(--muted);max-width:54ch;line-height:1.68}

/* Lo que el problema cuesta. Antes era una nota al pie; ahora es la mitad
   del argumento, así que pesa como texto y no como advertencia. */
.insight-coste{margin-top:22px;padding-top:20px;border-top:1px solid var(--line);
  font-size:.95rem;color:var(--muted);line-height:1.72;max-width:54ch}

/* ------------------------------------------------------------
   /EVALUACION/ — la puerta de quien todavía no sabe qué necesita
   Sin nombre de producto y sin diagrama de línea: aquí lo que se ofrece es
   criterio, no una solución concreta.
   ------------------------------------------------------------ */
.page-hero--evaluacion .hero-lead{max-width:56ch}

/* Las seis líneas van al final: contar tu caso es el camino, mirar el
   catálogo es la alternativa. */
.tramo-hermanas .tramo-head{max-width:60ch}