/* 597D · modal «Así se hace» (recorrido de 4 pasos) + franja naranja en los planes. Sobrio: radios ≤ 8, sin degradados.
   El marco del modal (minimizar, maximizar, arrastrar) es el de la casa: .erp-modal + bloque 551-B de app.js. */
/* Estilo del sitio (591/594): borde casi nulo, LÍNEA SUPERIOR de 1 px con degradado centrado que se desvanece a los lados,
   sombras neutras y suaves (sin tinte azul ni glow). Botones: .btn .btn-primary / .btn-ghost del sitio, en tamaño compacto. */
.m597d{--m597d-nar:#ea580c;--m597d-azul:var(--navy,#002863);--m597d-linea:var(--line,#dbe3ee);
  --m597d-top:linear-gradient(90deg,transparent,var(--m597d-linea) 18%,var(--m597d-linea) 82%,transparent);
  width:min(1080px,calc(100vw - 32px));border-radius:8px;border:0;
  background:var(--m597d-top) top/100% 1px no-repeat,var(--panel,#fff);box-shadow:0 18px 48px rgba(0,0,0,.16),0 2px 6px rgba(0,0,0,.06)}
.m597d::backdrop{background:rgba(15,20,28,.48);backdrop-filter:none}
.m597d .erp-modal-head{background:var(--m597d-top) bottom/100% 1px no-repeat,transparent;color:var(--text);padding:14px 18px;border-bottom:0;gap:12px}
.m597d .erp-modal-head h2{color:var(--text);font-size:1.18rem;margin:2px 0 0;line-height:1.3}
.m597d .erp-modal-head .erp-eyebrow{color:var(--muted);font-size:.72rem;letter-spacing:.04em;text-transform:uppercase}
.m597d .erp-modal-close,.m597d .erp-modal-head .erp-modal-maxbtn,.m597d .erp-modal-head .erp-modal-minbtn{border-radius:6px;width:34px;height:34px;
  border:1px solid transparent;background:transparent;color:var(--muted);font-size:1.25rem}
.m597d .erp-modal-close:hover,.m597d .erp-modal-head .erp-modal-maxbtn:hover,.m597d .erp-modal-head .erp-modal-minbtn:hover{background:rgba(127,127,127,.10);color:var(--text)}
.m597d.erp-modal-arrastra{box-shadow:0 24px 60px rgba(0,0,0,.22)!important}
.m597d.erp-modal-max{background:var(--panel,#fff)}
.m597d-body{padding:16px 18px 18px;display:flex;flex-direction:column;gap:12px}
.m597d-intro{margin:0;color:var(--text);font-size:.95rem;line-height:1.5;max-width:80ch}
.m597d-planes{display:flex;flex-wrap:wrap;align-items:center;gap:8px 12px}
.m597d-planes[hidden]{display:none}
.m597d-pill{display:inline-flex;align-items:center;gap:6px;padding:5px 10px;border-radius:6px;border:0;background:rgba(234,88,12,.08);color:#9a3412;font-weight:700;font-size:.86rem}
.m597d-pill::before{content:"";width:4px;height:14px;border-radius:2px;background:var(--m597d-nar)}
/* tamaño compacto de los .btn del sitio dentro del modal */
.m597d .btn{padding:8px 15px;border-radius:8px;font-size:.86rem;gap:7px;line-height:1.2;text-decoration:none}
.m597d .btn-primary{box-shadow:0 4px 12px rgba(0,0,0,.12)}
.m597d .btn-primary:hover{box-shadow:0 6px 16px rgba(0,0,0,.16)}
.m597d .btn:focus-visible,.m597d-c:focus-visible,.m597d-paso:focus-visible{outline:2px solid var(--m597d-azul);outline-offset:2px}
.m597d .btn[hidden]{display:none}

/* escenario */
.m597d-esc{display:grid;grid-template-columns:minmax(0,1.75fr) minmax(250px,1fr);gap:16px;align-items:start}
.m597d-esc[hidden],.m597d-ficha[hidden]{display:none}
.m597d-marco{position:relative;overflow:hidden;border:1px solid color-mix(in srgb,var(--line,#dbe3ee) 70%,transparent);border-radius:8px;background:#eef2f7;aspect-ratio:var(--ar,1.32);--x:50%;--y:50%;width:min(100%,calc((100dvh - 250px) * var(--ar,1.32)));justify-self:center;user-select:none;-webkit-user-select:none}
.m597d-img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:top left;opacity:0;transition:opacity .45s ease;transform-origin:var(--x) var(--y)}
.m597d-img.m597d-vis{opacity:1}
.m597d-anim .m597d-img.m597d-vis{animation:m597dZoom 3.6s ease both}
@keyframes m597dZoom{0%,20%{transform:none}75%,100%{transform:scale(1.05)}}
.m597d-foco{position:absolute;left:var(--x);top:var(--y);width:76px;height:44px;margin:-22px 0 0 -38px;border:2px solid var(--m597d-nar);border-radius:8px;background:rgba(234,88,12,.10);opacity:0;transition:left .9s cubic-bezier(.4,.1,.2,1),top .9s cubic-bezier(.4,.1,.2,1);pointer-events:none}
.m597d-anim .m597d-foco{animation:m597dFoco 3.6s ease both}
@keyframes m597dFoco{0%,22%{opacity:0;transform:scale(1.25)}32%{opacity:1;transform:scale(1)}88%{opacity:1}100%{opacity:.85}}
.m597d-cursor{position:absolute;left:var(--x);top:var(--y);width:26px;height:26px;margin:-3px 0 0 -4px;transition:left .9s cubic-bezier(.4,.1,.2,1),top .9s cubic-bezier(.4,.1,.2,1);pointer-events:none;z-index:3;filter:drop-shadow(0 1px 1px rgba(0,0,0,.35))}
.m597d-cursor svg{display:block}
.m597d-onda{position:absolute;left:4px;top:3px;width:30px;height:30px;margin:-15px 0 0 -15px;border-radius:50%;border:2px solid var(--m597d-nar);opacity:0}
.m597d-a-clic.m597d-anim .m597d-onda{animation:m597dOnda .7s ease-out 1s both}
.m597d-a-clic.m597d-anim .m597d-cursor svg{animation:m597dClic .3s ease 1s both}
@keyframes m597dOnda{from{opacity:.9;transform:scale(.3)}to{opacity:0;transform:scale(1.6)}}
@keyframes m597dClic{50%{transform:scale(.82)}}
.m597d-tecla{position:absolute;left:24px;top:22px;display:none;align-items:center;gap:3px;padding:3px 7px;border-radius:6px;background:#1f2937;color:#fff;font-family:inherit;font-weight:600;font-size:.72rem;line-height:1;white-space:nowrap}
.m597d-tecla i{display:block;width:0;height:3px;border-radius:2px;background:#9fd4ff}
.m597d-a-escribe .m597d-tecla{display:flex}
.m597d-a-escribe.m597d-anim .m597d-tecla{animation:m597dAparece .2s ease 1s both}
.m597d-a-escribe.m597d-anim .m597d-tecla i{animation:m597dEscribe 1.4s steps(9) 1.1s both}
.m597d-tecla::after{content:"";width:1px;height:11px;background:#fff;animation:m597dCaret .8s steps(1) infinite}
@keyframes m597dAparece{from{opacity:0;transform:translateY(4px)}to{opacity:1;transform:none}}
@keyframes m597dEscribe{from{width:0}to{width:46px}}
@keyframes m597dCaret{50%{opacity:0}}
.m597d-chip{position:absolute;left:10px;top:10px;z-index:4;min-width:26px;height:26px;padding:0 7px;display:grid;place-items:center;border-radius:6px;background:var(--m597d-nar);color:#fff;font-weight:800;font-size:.9rem}
.m597d-pausa .m597d-anim .m597d-foco,.m597d-pausa .m597d-anim .m597d-img.m597d-vis{animation-play-state:paused}
.m597d-pausa .m597d-barra i{animation-play-state:paused}

.m597d-lado{display:flex;flex-direction:column;gap:10px;min-width:0}
.m597d-lista{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:6px}
.m597d-paso{width:100%;display:flex;align-items:flex-start;gap:10px;padding:8px 10px;border:0;border-radius:6px;background:var(--m597d-top) top/100% 1px no-repeat,transparent;color:var(--text);text-align:left;font-family:inherit;font-weight:600;font-size:.9rem;line-height:1.35;cursor:pointer}
.m597d-paso:hover{background-color:rgba(127,127,127,.06)}
.m597d-n{flex:0 0 auto;width:22px;height:22px;display:grid;place-items:center;border-radius:5px;background:rgba(127,127,127,.14);font-size:.78rem;font-weight:800}
.m597d-ya .m597d-n{background:rgba(11,92,171,.14);color:var(--m597d-azul)}
.m597d-on .m597d-paso{background-color:rgba(234,88,12,.07);box-shadow:inset 2px 0 0 var(--m597d-nar)}
.m597d-on .m597d-n{background:var(--m597d-nar);color:#fff}
.m597d-txt{margin:0;min-height:4.2em;font-size:.88rem;line-height:1.5;color:var(--muted)}
.m597d-txt b{display:block;color:var(--text);margin-bottom:2px}
.m597d-ctl{display:flex;align-items:center;gap:6px}
.m597d-c{width:34px;height:34px;display:grid;place-items:center;border:1px solid color-mix(in srgb,var(--line,#dbe3ee) 80%,transparent);border-radius:8px;background:var(--panel);color:var(--text);cursor:pointer;padding:0}
.m597d-c:hover{background:rgba(127,127,127,.08)}
.m597d-barra{flex:1 1 auto;height:4px;border-radius:2px;background:rgba(127,127,127,.18);overflow:hidden}
.m597d-barra i{display:block;height:100%;width:100%;background:var(--m597d-nar);transform-origin:left;animation:m597dBarra 3.6s linear both}
@keyframes m597dBarra{from{transform:scaleX(0)}to{transform:scaleX(1)}}

/* ficha (sin recorrido): la descripción de 597C */
.m597d-ficha{display:flex;gap:16px;align-items:flex-start;padding:14px 4px 4px;border:0;background:var(--m597d-top) top/100% 1px no-repeat}
.m597d-ficha .d597-mini{flex:0 0 120px;color:var(--m597d-azul)}
.m597d-ficha .d597-mini svg{width:120px;height:90px;fill:none;stroke:currentColor;stroke-width:1.6}
.m597d-fc{min-width:0;font-size:.92rem;line-height:1.5}
.m597d-fc .d597-pts{margin:8px 0;padding-left:18px}
.m597d-fc .d597-pant{color:var(--muted);font-size:.85rem}
.m597d-pie{display:flex;flex-wrap:wrap;gap:8px;justify-content:flex-end;padding-top:12px;border:0;background:var(--m597d-top) top/100% 1px no-repeat}

.erp-modal-max.m597d .m597d-esc{grid-template-columns:minmax(0,2.4fr) minmax(260px,1fr)}

/* tarjetas clicables */
.m597d-card{cursor:pointer;position:relative}
.m597d-card:focus-visible{outline:2px solid var(--navy,#002863);outline-offset:3px}
.m597d-hint{position:absolute;right:12px;bottom:10px;z-index:2;display:inline-flex;align-items:center;gap:5px;padding:3px 8px;border-radius:6px;font-size:.74rem;font-weight:700;color:var(--navy,#002863);background:var(--panel,#fff);border:0;opacity:0;transform:translateY(3px);transition:opacity .2s,transform .2s;pointer-events:none}
.m597d-card:hover .m597d-hint,.m597d-card:focus-visible .m597d-hint{opacity:1;transform:none}
@media (hover:none){.m597d-hint{opacity:1;transform:none}}

/* planes: ítems que abren el modal + franja naranja (historial: 1 = más reciente) */
#planes .p-features>li.m597d-li{cursor:pointer}
#planes .p-features>li{transition:background-color .4s,box-shadow .4s}
#planes .p-features>li.m597d-h1{box-shadow:inset 4px 0 0 #ea580c;background:rgba(234,88,12,.15)}
#planes .p-features>li.m597d-h2{box-shadow:inset 4px 0 0 #f97316;background:rgba(249,115,22,.10)}
#planes .p-features>li.m597d-h3{box-shadow:inset 4px 0 0 #fb923c;background:rgba(251,146,60,.07)}
#planes .p-features>li.m597d-h4{box-shadow:inset 4px 0 0 #fdba74;background:rgba(253,186,116,.06)}
#planes .p-features>li.m597d-pulso{animation:m597dPulso 6.5s ease both}
@keyframes m597dPulso{0%{background:rgba(234,88,12,.42)}12%{background:rgba(234,88,12,.20)}24%{background:rgba(234,88,12,.40)}40%,100%{background:rgba(234,88,12,.15)}}
tr.m597d-fila{cursor:pointer}
tr.m597d-fila:hover>*{background:rgba(234,88,12,.06)}
tr.m597d-fila:focus-visible{outline:2px solid var(--m597d-azul,#0b5cab);outline-offset:-2px}

[data-theme="dark"] .m597d-marco{background:#0e1825}
[data-theme="dark"] .m597d-pill{color:#fdba74;border-color:rgba(251,146,60,.5);background:rgba(251,146,60,.10)}
[data-theme="dark"] #planes .p-features>li.m597d-h1{background:rgba(234,88,12,.24)}
[data-theme="dark"] #planes .p-features>li.m597d-h2{background:rgba(249,115,22,.15)}
[data-theme="dark"] #planes .p-features>li.m597d-h3{background:rgba(251,146,60,.10)}
[data-theme="dark"] #planes .p-features>li.m597d-h4{background:rgba(253,186,116,.07)}
[data-theme="dark"] .m597d{--m597d-azul:#6fb3ff}

@media (max-width:760px){
  .m597d{width:100vw;max-width:100vw;max-height:100dvh;height:100dvh;border-radius:0;margin:0}
  .m597d-body{padding:12px}
  .m597d-esc{grid-template-columns:1fr}
  .m597d-lista{flex-direction:row;overflow-x:auto;gap:6px;padding-bottom:2px}
  .m597d-lista li{flex:0 0 auto}
  .m597d-paso{padding:6px 8px;white-space:nowrap}
  .m597d-paso .m597d-pt{display:none}
  .m597d-on .m597d-paso .m597d-pt{display:inline}
  .m597d-ficha{flex-direction:column}
  .m597d-pie{justify-content:stretch}.m597d-pie .btn{flex:1 1 auto;justify-content:center}
}
@media (prefers-reduced-motion:reduce){
  .m597d-img,.m597d-foco,.m597d-cursor{transition:none!important}
  .m597d-anim .m597d-img.m597d-vis{animation:none}
  .m597d-anim .m597d-foco{animation:none;opacity:1}
  .m597d-onda,.m597d-tecla i,.m597d-barra i,#planes .p-features>li.m597d-pulso{animation:none!important}
}

/* 597D(b) · carga, avisos (límite → registro) y pie con el manual */
.m597d-cargando .m597d-body::after{content:"Cargando el recorrido…";display:block;padding:40px 0;text-align:center;color:var(--muted);font-size:.92rem}
.m597d-aviso{padding:14px 16px;border:0;border-radius:8px;background:linear-gradient(90deg,transparent,#ea580c 18%,#ea580c 82%,transparent) top/100% 1px no-repeat,rgba(234,88,12,.05);display:flex;flex-wrap:wrap;gap:10px 16px;align-items:center}
.m597d-aviso[hidden],.m597d-pie[hidden]{display:none}
.m597d-aviso p{margin:0;flex:1 1 280px;line-height:1.5}

.m597d-pie{align-items:center}
.m597d-nota{flex:1 1 240px;color:var(--muted);font-size:.84rem;line-height:1.4}
.m597d-man svg{flex:0 0 auto}
.m597d-img{-webkit-user-drag:none;pointer-events:none}
[data-theme="dark"] .m597d{--m597d-linea:#2a3c55;box-shadow:0 18px 48px rgba(0,0,0,.45)}

/* 597P · modo liviano: sin animación (paso quieto, sin zoom, cursor ni barra); se avanza con las flechas */
html.lite .m597d .m597d-img,html.lite .m597d .m597d-foco,html.lite .m597d .m597d-cursor,.m597d-lite .m597d-img,.m597d-lite .m597d-foco,.m597d-lite .m597d-cursor{transition:none!important;animation:none!important}
html.lite .m597d .m597d-foco,.m597d-lite .m597d-foco{opacity:1}
html.lite .m597d .m597d-onda,html.lite .m597d .m597d-tecla,html.lite .m597d .m597d-barra,.m597d-lite .m597d-onda,.m597d-lite .m597d-tecla,.m597d-lite .m597d-barra{display:none!important}
html.lite .m597d-card .m597d-hint{transition:none}
/* 597D(c) · línea discreta del público: el recorrido completo es para clientes con plan de pago */
.m597d-mas{margin:0;font-size:.82rem;color:var(--muted);line-height:1.45}
.m597d-mas[hidden]{display:none}
.m597d-mas a{color:var(--navy,#002863);font-weight:600;text-decoration:underline;text-underline-offset:2px}
[data-theme="dark"] .m597d-mas a{color:#9dbcf5}

/* 601 · paso sin coordenadas reales (captura suelta): el cursor no finge un clic ni un foco en un sitio inventado */
.m597d-marco.m597d-ap .m597d-cursor,.m597d-marco.m597d-ap .m597d-foco{display:none!important}
/* 601G · valor que escribe el cursor (pasos grabados): se teclea letra a letra */
.m597d-tecla .m597d-v{display:block;overflow:hidden;white-space:nowrap;max-width:0;font:600 .74rem/1.1 ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;color:#fff}
.m597d-a-escribe.m597d-anim .m597d-tecla .m597d-v{animation:m597dTeclea 1.3s steps(var(--n,8)) 1.1s both}
@keyframes m597dTeclea{from{max-width:0}to{max-width:calc(var(--n,8) * 1ch + 2px)}}
@media (prefers-reduced-motion:reduce){.m597d-tecla .m597d-v{max-width:none;animation:none!important}}


/* 604A · la captura ya trae su marca numerada dibujada: un solo círculo (sin el foco naranja encima; el cursor sí) */
.m597d-marco.m597d-qm .m597d-foco{display:none!important}

/* ============================================================
   PRE0710b · ilustración cuando no hay captura (fuera de Perú o sin captura positiva): cómo se conecta + antes → con Adiasoft.
   Sobrio (sin glow ni degradados), iconos de trazo, flechas grandes; animación suave solo sin «reducir movimiento».
   ============================================================ */
.m597d-ficha:has(> .m597i){display:block}
.m597i{--m597i-azul:var(--m597d-azul,#002863);--m597i-ok:#1f8a5b;--m597i-gris:#5b6b82;--m597i-fondo:#f5f7fb;--m597i-linea:var(--m597d-linea,#dbe3ee);width:100%;color:var(--text,#0f1f3d)}
.m597i-h{font:700 .72rem/1.2 var(--mono,monospace);letter-spacing:.06em;text-transform:uppercase;color:var(--m597i-gris);margin:2px 0 12px}
.m597i-flujo{list-style:none;margin:0 0 18px;padding:0;display:flex;align-items:flex-start;justify-content:space-between;gap:4px}
.m597i-paso{flex:1 1 0;min-width:0;display:flex;flex-direction:column;align-items:center;text-align:center;gap:8px}
.m597i-ico{width:64px;height:64px;border-radius:50%;display:grid;place-items:center;background:var(--m597i-fondo);border:1px solid var(--m597i-linea);color:var(--m597i-azul)}
.m597i-ico svg{width:32px;height:32px}
.m597i-paso:last-child .m597i-ico{background:#eaf6f0;border-color:#bfe3cf;color:var(--m597i-ok)}
.m597i-t{font:600 .86rem/1.25 var(--body,inherit);color:var(--text,#0f1f3d);overflow-wrap:anywhere}
.m597i-flecha{flex:0 0 40px;color:var(--m597i-azul);opacity:.55;margin-top:20px}
.m597i-flecha svg{width:40px;height:24px;display:block}
.m597i-ad{display:grid;grid-template-columns:minmax(0,1fr) 56px minmax(0,1fr);align-items:center;gap:8px}
.m597i-col{border:1px solid var(--m597i-linea);border-radius:8px;padding:12px 14px;background:var(--panel,#fff)}
.m597i-col b{display:block;font:700 .78rem/1.2 var(--body,inherit);text-transform:uppercase;letter-spacing:.04em;margin-bottom:8px}
.m597i-col ul{list-style:none;margin:0;padding:0;display:grid;gap:7px}
.m597i-col li{display:flex;align-items:flex-start;gap:7px;font-size:.88rem;line-height:1.35}
.m597i-antes b{color:var(--m597i-gris)}
.m597i-antes li{color:var(--m597i-gris)}
.m597i-antes li::before{content:"";flex:0 0 6px;height:6px;border-radius:50%;background:#b8c3d3;margin-top:.45em}
.m597i-desp{border-color:#bfe3cf;background:#f3faf6}
.m597i-desp b{color:var(--m597i-ok)}
.m597i-desp li{color:var(--text,#0f1f3d);font-weight:600}
.m597i-ok{flex:0 0 18px;width:18px;height:18px;color:var(--m597i-ok)}
.m597i-gran{color:var(--m597i-ok);display:grid;place-items:center}
.m597i-gran svg{width:48px;height:48px}
/* modo oscuro del portal: fondo oscuro → letra clara */
[data-theme="dark"] .m597i{--m597i-fondo:#16223a;--m597i-gris:#a3b1c6;--m597i-linea:#2a3c55;--m597i-azul:#8fb1f2;color:#e6ecf5}
[data-theme="dark"] .m597i-t,[data-theme="dark"] .m597i-desp li{color:#e6ecf5}
[data-theme="dark"] .m597i-col{background:#131c29}
[data-theme="dark"] .m597i-desp{background:#13261d;border-color:#2c5a43}
[data-theme="dark"] .m597i-paso:last-child .m597i-ico{background:#13261d;border-color:#2c5a43}
[data-theme="dark"] .m597i{--m597i-ok:#4cc38a}
/* entrada escalonada (suave) */
@media (prefers-reduced-motion:no-preference){
  .m597i:not(.m597i-quieto) .m597i-paso,.m597i:not(.m597i-quieto) .m597i-flecha{animation:m597i-entra .45s ease both;animation-delay:calc(var(--i,0) * .18s)}
  .m597i:not(.m597i-quieto) .m597i-flecha{animation-delay:calc(var(--i,0) * .18s + .1s)}
  .m597i:not(.m597i-quieto) .m597i-desp{animation:m597i-entra .5s ease both;animation-delay:.9s}
}
@keyframes m597i-entra{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
/* celular: el flujo baja en columna con flechas hacia abajo; antes/después uno sobre otro */
@media (max-width:620px){
  .m597i-flujo{flex-direction:column;align-items:stretch;gap:2px}
  .m597i-paso{flex-direction:row;text-align:start;gap:12px}
  .m597i-ico{width:48px;height:48px;flex:none}
  .m597i-ico svg{width:26px;height:26px}
  .m597i-flecha{flex:none;margin:0 0 0 12px;height:22px}
  .m597i-flecha svg{transform:rotate(90deg);width:24px;height:22px}
  .m597i-ad{grid-template-columns:minmax(0,1fr)}
  .m597i-gran{transform:rotate(90deg);height:40px}
  .m597i-gran svg{width:36px;height:36px}
}