:root{
  /* Grises medidos sobre el vidrio (fondo más oscuro rgb 180,184,197): --ink-2 5,4:1 y --ink-3 4,7:1; antes 3,6:1 y 1,5:1 */
  --navy:#081030; --cyan:#20a8e0; --cyan-d:#0898d8; --sky:#8fdcff;
  --ink:#081030; --ink-2:#333e5a; --ink-3:#3a4766;
  --glass:rgba(255,255,255,.72); --glass-b:rgba(255,255,255,.6);
  --field:#fff; --field-b:rgba(8,16,48,.08); --soft:rgba(8,16,48,.06);
  --danger:#e5484d; --ok:#0ea472; --warn:#b26b00;
  --ease-spring:cubic-bezier(.34,1.56,.64,1);
  --ease-out:cubic-bezier(.22,1,.36,1);
}
*{box-sizing:border-box;margin:0}
[hidden]{display:none!important}
html,body{min-height:100%}
body{font-family:"Plus Jakarta Sans",system-ui,sans-serif;color:var(--ink);background:var(--navy);-webkit-font-smoothing:antialiased;overflow-x:hidden}

.bg{position:fixed;inset:0;overflow:hidden;background:
  radial-gradient(120% 80% at 10% 0%,#0d3a7a 0%,transparent 60%),
  radial-gradient(100% 80% at 100% 100%,#0a6fb8 0%,transparent 55%),var(--navy)}
.blob{position:absolute;border-radius:50%;filter:blur(70px);opacity:.75;will-change:transform}
.b1{width:46vmax;height:46vmax;background:var(--cyan);top:-12vmax;left:-10vmax;animation:f1 22s ease-in-out infinite alternate}
.b2{width:38vmax;height:38vmax;background:#1e6fd9;bottom:-14vmax;right:-8vmax;animation:f2 26s ease-in-out infinite alternate}
.b3{width:26vmax;height:26vmax;background:var(--sky);top:40%;left:55%;opacity:.45;animation:f3 30s ease-in-out infinite alternate}
@keyframes f1{to{transform:translate(18vmax,14vmax) scale(1.15)}}
@keyframes f2{to{transform:translate(-16vmax,-12vmax) scale(.9)}}
@keyframes f3{to{transform:translate(-30vmax,10vmax) scale(1.2)}}
.grid{position:absolute;inset:0;
  background-image:linear-gradient(rgba(255,255,255,.07) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.07) 1px,transparent 1px);
  background-size:44px 44px;
  -webkit-mask-image:radial-gradient(ellipse at center,#000 15%,transparent 70%);mask-image:radial-gradient(ellipse at center,#000 15%,transparent 70%)}

.wrap{position:relative;min-height:100dvh;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:32px 16px;gap:20px}
.glass{background:var(--glass);backdrop-filter:blur(24px) saturate(160%);-webkit-backdrop-filter:blur(24px) saturate(160%);
  border:1px solid var(--glass-b);box-shadow:0 30px 80px -20px rgba(4,10,40,.55),inset 0 1px 0 rgba(255,255,255,.7)}
.view{width:100%;display:flex;flex-direction:column;align-items:center;gap:20px;animation:rise .6s var(--ease-out) both}
@keyframes rise{from{opacity:0;transform:translateY(16px) scale(.98)}}

.card{width:100%;max-width:420px;border-radius:26px;padding:36px 32px 26px}
.logo{display:block;width:288px;max-width:100%;height:auto;margin:0 auto 24px}
h1{font-size:23px;font-weight:800;letter-spacing:-.02em;text-align:center}
.sub{font-size:14px;color:var(--ink-2);text-align:center;margin-top:6px}
.lbl{display:flex;align-items:center;justify-content:space-between;gap:8px;font-size:11.5px;font-weight:700;color:var(--ink-2);text-transform:uppercase;letter-spacing:.08em;margin:24px 0 10px}

.seg{display:grid;grid-template-columns:repeat(5,1fr);gap:4px;padding:4px;background:var(--soft);border-radius:14px}
.seg button{all:unset;cursor:pointer;text-align:center;padding:10px 0;border-radius:10px;font-weight:700;font-size:15px;color:var(--ink-2);
  transition:background .25s var(--ease-out),color .25s,box-shadow .25s,transform .15s}
.seg button:hover{color:var(--ink)}
.seg button:active{transform:scale(.94)}
.seg button[aria-checked=true]{background:#fff;color:var(--cyan-d);box-shadow:0 6px 16px -6px rgba(8,152,216,.55)}
.seg button:focus-visible{outline:2px solid var(--cyan);outline-offset:2px}
.seg.mini{display:inline-grid;grid-template-columns:1fr 1fr;padding:3px;border-radius:10px;text-transform:none;letter-spacing:0}
.seg.mini button{padding:5px 12px;font-size:12.5px;border-radius:8px}
.hint{font-size:12.5px;color:var(--ink-3);margin-top:8px;padding-left:4px}

.field{display:flex;align-items:center;background:var(--field);border:1.5px solid var(--field-b);border-radius:14px;transition:border-color .2s,box-shadow .2s;position:relative}
.field:focus-within{border-color:var(--cyan);box-shadow:0 0 0 4px rgba(32,168,224,.2)}
.field.err{border-color:var(--danger);box-shadow:0 0 0 4px rgba(229,72,77,.16);animation:shake .4s}
.pre{padding:0 2px 0 16px;font-weight:800;color:var(--cyan-d);font-size:17px}
.field input{all:unset;flex:1;min-width:0;padding:16px 16px 16px 2px;font-size:17px;font-weight:600;letter-spacing:.05em;color:var(--ink)}
.field input.solo{padding-left:16px}
.field input::placeholder{color:#b4bdd0;font-weight:500}
.field select{appearance:none;-webkit-appearance:none;border:0;background:transparent;font:inherit;color:var(--ink);font-weight:700;font-size:16px;padding:16px 40px 16px 16px;cursor:pointer;width:100%;outline:none}
.field .chev{position:absolute;right:14px;width:18px;height:18px;color:var(--ink-3);pointer-events:none}
.field.phone .code{position:relative;display:flex;align-items:center;border-right:1.5px solid var(--field-b);flex:0 0 auto}
.field.phone .code select{color:var(--cyan-d);width:auto;padding-right:34px}
.field.phone .code .chev{right:10px}
/* Falta solo el código: se marca solo ese selector, no todo el teléfono. Relleno y letra en rojo, sin otro marco
   (con el borde del campo y el foco se veía doble) y con la misma curva que la esquina del campo. */
.field.phone .code.err{border-radius:12.5px 0 0 12.5px;background:rgba(229,72,77,.1);border-right-color:var(--danger)}
.field.phone .code.err select,.field.phone .code.err .chev{color:var(--danger)}
.field.phone input{padding-left:14px}
@keyframes shake{20%,60%{transform:translateX(-6px)}40%,80%{transform:translateX(6px)}}

.cta{all:unset;box-sizing:border-box;cursor:pointer;width:100%;margin-top:20px;display:flex;align-items:center;justify-content:center;gap:10px;
  padding:16px;border-radius:14px;font-weight:700;font-size:16px;color:#fff;
  background:linear-gradient(135deg,var(--cyan) 0%,#1478c8 55%,#0b3f8f 100%);
  box-shadow:0 12px 28px -10px rgba(20,120,200,.85);position:relative;overflow:hidden;transition:transform .15s,box-shadow .25s}
.cta:hover{box-shadow:0 18px 36px -10px rgba(20,120,200,1)}
.cta:active{transform:scale(.98)}
.cta::after{content:"";position:absolute;inset:0;background:linear-gradient(110deg,transparent 30%,rgba(255,255,255,.35) 50%,transparent 70%);transform:translateX(-100%);transition:transform .9s var(--ease-out)}
.cta:hover::after{transform:translateX(100%)}
.cta svg{width:18px;height:18px;transition:transform .25s var(--ease-out)}
.cta:hover svg{transform:translateX(4px)}
.cta:focus-visible{outline:3px solid #fff;outline-offset:3px}
.secure{display:flex;align-items:center;justify-content:center;gap:6px;font-size:12.5px;color:var(--ink-3);margin-top:18px;text-align:center}
.secure svg{width:14px;height:14px;flex:0 0 auto}

/* Distribución "pasos": estado a todo el ancho; Paso 1 y Paso 2 lado a lado con la misma altura */
.res{width:100%;max-width:980px;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:20px;align-items:stretch}
.res > .topbar,.res > #p-resumen{grid-column:1/-1}
/* Distribución "columna" y casos sin reporte: una sola columna centrada */
.res.columna,.res.single{max-width:560px;grid-template-columns:minmax(0,1fr)}
.topbar{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:12px 14px 12px 20px;border-radius:20px}
.topbar .logo{width:210px;margin:0 8px 0 0;flex:0 0 auto}
.total-line{display:flex;align-items:center;gap:12px;margin-top:6px}
.total-line .total{margin-top:0}
.who{display:flex;align-items:center;gap:12px;min-width:0;flex:1}
.who b{display:block;font-size:18px;font-weight:800;line-height:1.3;letter-spacing:-.01em;overflow-wrap:anywhere}
/* Mano que saluda dos veces al llegar */
.wave{display:inline-block;transform-origin:70% 70%;animation:saludar 1.8s .4s ease-in-out 2}
@keyframes saludar{0%,60%,100%{transform:rotate(0)}10%,30%{transform:rotate(14deg)}20%{transform:rotate(-8deg)}40%{transform:rotate(-4deg)}50%{transform:rotate(10deg)}}
.who small{display:block;font-size:12.5px;color:var(--ink-3);font-weight:600;margin-top:2px}
.step-card{display:flex;flex-direction:column}
.step-card .foot{margin-top:auto;padding-top:20px}
.step-card .foot .cta{margin-top:0}
.cpall2{all:unset;box-sizing:border-box;cursor:pointer;width:100%;display:flex;align-items:center;justify-content:center;gap:8px;padding:15px;border-radius:14px;font-weight:700;font-size:15px;color:var(--cyan-d);background:rgba(32,168,224,.12);border:1.5px solid rgba(32,168,224,.3);transition:background .2s,transform .15s}
.cpall2:hover{background:rgba(32,168,224,.2)}
.cpall2:active{transform:scale(.98)}
.cpall2 svg{width:18px;height:18px}
/* Distribución "asistente": resumen fijo a la izquierda, un paso a la vez a la derecha */
.res.wizard{grid-template-columns:minmax(0,.92fr) minmax(0,1.08fr);grid-template-areas:"top top" "sum card";align-items:stretch}
.res.wizard > .topbar{grid-area:top}
.res.wizard > #p-resumen{grid-area:sum}
@media (min-width:861px){
  .res.wizard > #p-resumen{display:flex;flex-direction:column}
  .res.wizard #p-resumen > #deuda:not([hidden]),.res.wizard #p-resumen > #solvente:not([hidden]){flex:1;display:flex;flex-direction:column}
  .res.wizard #deuda .rows{margin-top:auto;padding-top:16px}
  .res.wizard #solvente .mini-rows{margin-top:auto;padding-top:16px}
}
.res.wizard > #p-adelanto,.res.wizard > #p-pago,.res.wizard > #rep{grid-area:card}
.js .res.wizard[data-step="1"] > #rep,.js .res.wizard[data-step="2"] > #p-pago{display:none}
/* Paso 0 (solvente que puede adelantar): solo la invitación. Sin JS no se puede avanzar, así que se ocultan la invitación y se muestran los datos. */
.js .res.wizard[data-step="0"] > #p-pago,.js .res.wizard[data-step="0"] > #rep,.js .res.wizard:not([data-step="0"]) > #p-adelanto,html:not(.js) #p-adelanto{display:none}
.res.wizard.single{grid-template-columns:minmax(0,1fr);grid-template-areas:"top" "sum"}
.res.wizard.single > #p-resumen{position:static}
.only-wiz{display:none!important}
.res.wizard .only-wiz{display:flex!important}
.foot.row{display:flex;gap:10px;align-items:stretch}
.foot.row .cta{flex:1}
.foot.col{display:flex;flex-direction:column;gap:10px}
.back2{all:unset;box-sizing:border-box;cursor:pointer;display:flex;align-items:center;justify-content:center;gap:6px;padding:0 18px;border-radius:14px;font-weight:700;font-size:15px;color:var(--ink-2);background:var(--soft)}
.back2 svg{width:18px;height:18px}
.step:focus{outline:none}
.det-toggle{all:unset;display:none;cursor:pointer;margin-top:12px;font-size:13.5px;font-weight:700;color:var(--cyan-d);align-items:center;gap:6px}
.det-toggle svg{width:16px;height:16px;transition:transform .25s}
#deuda.open .det-toggle svg{transform:rotate(180deg)}
@media (max-width:860px){
  .res.wizard{grid-template-columns:minmax(0,1fr);grid-template-areas:"top" "sum" "card"}
  .res.wizard > #p-resumen{position:static}
  /* Detalle plegable: la altura se anima de 0fr a 1fr (display:none no se puede animar) */
  .js .res.wizard #deuda .rows{display:grid;grid-template-rows:0fr;margin-top:0;opacity:0;visibility:hidden;
    transition:grid-template-rows .4s var(--ease-out),margin-top .4s var(--ease-out),opacity .2s,visibility 0s .4s}
  .js .res.wizard #deuda.open .rows{grid-template-rows:1fr;margin-top:12px;opacity:1;visibility:visible;
    transition:grid-template-rows .4s var(--ease-out),margin-top .4s var(--ease-out),opacity .3s .1s,visibility 0s}
  .res.wizard #deuda .rows-in{min-height:0;overflow:hidden}
  .js .res.wizard .det-toggle{display:inline-flex}
}
.pm-list{margin-top:14px;border-radius:16px;background:rgba(255,255,255,.5);border:1px solid rgba(255,255,255,.75);box-shadow:inset 0 1px 0 rgba(255,255,255,.6);overflow:hidden}
.pm-list .cp{display:grid;grid-template-columns:minmax(58px,auto) minmax(0,1fr) auto;align-items:center;gap:10px;margin:0;padding:8px 8px 8px 14px;border-radius:0;background:transparent}
.pm-list .cp + .cp{border-top:1px solid rgba(8,16,48,.07)}
.pm-list .cp > div{display:contents}
.pm-list .cp small{font-size:12.5px;font-weight:700;color:var(--ink-3)}
.pm-list .cp strong{font-size:15.5px;text-align:right;overflow-wrap:anywhere}
.pm-list .cpb{width:34px;height:34px;border-radius:10px}
#cpall{margin-top:12px}
.tip b{color:var(--ink)}

/* Resumen compacto (asistente): menos alto para reducir el scroll */
.res.wizard #p-resumen{padding:20px 22px}
.res.wizard .total .amt{font-size:32px}
.res.wizard .total .cur{font-size:16px}
.res.wizard .save{margin-top:8px;padding:4px 10px;font-size:12px}
.res.wizard .rows{margin-top:12px}
.res.wizard .r{padding:8px 0;font-size:14px}
.res.wizard .solv{padding:0}
.res.wizard .solv .big{width:56px;height:56px;margin-bottom:12px}
.res.wizard .solv .big svg{width:28px;height:28px}
.res.wizard .solv h2{font-size:19px}
.res.wizard .solv p{font-size:13.5px;margin-top:4px}
.res.wizard .mini-rows{margin-top:12px}
@media (max-width:860px){
  .res.wizard #p-resumen{padding:14px 16px}
  .res.wizard #deuda > div:first-child{display:flex;align-items:center;justify-content:space-between;gap:4px 12px;flex-wrap:wrap}
  .res.wizard #deuda .tl{width:100%}
  .res.wizard .total{margin-top:0}
  .res.wizard .total .amt{font-size:26px}
  .res.wizard .save{margin-top:0}
  .res.wizard .det-toggle{margin-top:8px}
  .res.wizard .solv{display:grid;grid-template-columns:auto minmax(0,1fr);gap:4px 12px;align-items:center;text-align:left}
  .res.wizard .solv .big{width:40px;height:40px;margin:0}
  .res.wizard .solv .big svg{width:20px;height:20px}
  .res.wizard .solv h2{font-size:16px}
  .res.wizard .solv p{font-size:13px;margin-top:2px}
  .res.wizard .solv .mini-rows{grid-column:1/-1;margin-top:8px}
  .res.wizard .solv .mini-rows .r{padding:6px 0 0}
}
.tip{display:flex;gap:10px;align-items:flex-start;margin-top:16px;padding:12px 14px;border-radius:14px;font-size:13px;line-height:1.45;color:var(--ink-2);background:rgba(32,168,224,.08);border:1px dashed rgba(32,168,224,.35)}
.tip svg{width:18px;height:18px;flex:0 0 auto;color:var(--cyan-d);margin-top:1px}
.back{all:unset;cursor:pointer;flex:0 0 auto;display:flex;align-items:center;gap:6px;font-weight:700;font-size:13px;color:var(--cyan-d);padding:9px 12px;border-radius:12px;background:var(--soft)}
.back svg{width:16px;height:16px}
.panel{border-radius:26px;padding:28px}
.step{display:flex;align-items:center;gap:10px;font-size:16px;font-weight:800}
.step i{font-style:normal;width:26px;height:26px;border-radius:8px;display:grid;place-items:center;font-size:13px;color:#fff;background:linear-gradient(135deg,var(--cyan),#1478c8)}
.psub{font-size:13.5px;color:var(--ink-2);margin:6px 0 0 36px}
.badge{display:inline-flex;align-items:center;gap:6px;padding:5px 11px;border-radius:999px;font-size:12px;font-weight:800;color:var(--warn);background:rgba(245,159,10,.16);margin-left:auto}

.tl{font-size:11.5px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--ink-2)}
.total{display:flex;align-items:baseline;gap:8px;margin-top:6px;flex-wrap:wrap}
.total .cur{font-size:20px;font-weight:700;color:var(--ink-2)}
.total .amt{font-size:42px;line-height:1.1;font-weight:800;letter-spacing:-.03em;font-variant-numeric:tabular-nums;
  background:linear-gradient(135deg,var(--navy) 20%,#1478c8);-webkit-background-clip:text;background-clip:text;color:transparent}
.save{display:inline-flex;align-items:center;gap:6px;margin-top:12px;padding:6px 12px;border-radius:999px;font-size:12.5px;font-weight:700;color:var(--ok);background:rgba(14,164,114,.12)}
.save svg{width:14px;height:14px}
.rows{margin-top:18px}
.r{display:flex;justify-content:space-between;gap:12px;padding:11px 0;font-size:14.5px;border-top:1px solid var(--soft)}
.r span{color:var(--ink-2)}
.r b{font-weight:700;font-variant-numeric:tabular-nums;white-space:nowrap}
.r b.neg{color:var(--ok)}
.r.sum{border-top:1.5px dashed var(--field-b);font-size:15.5px}
.r.sum span{color:var(--ink);font-weight:800}

.solv{text-align:center;padding:8px 0 4px}
.solv .big{width:84px;height:84px;margin:0 auto 18px;border-radius:50%;display:grid;place-items:center;position:relative;isolation:isolate;background:linear-gradient(135deg,#34d3a0,#0ea472)}
.solv .big::before{content:"";position:absolute;inset:0;border-radius:50%;background:inherit;animation:pulse 2.2s ease-out infinite;z-index:-1}
.solv .big svg{width:40px;height:40px;stroke:#fff;stroke-width:3;fill:none;stroke-linecap:round;stroke-linejoin:round}
.solv .big .draw{stroke-dasharray:60;stroke-dashoffset:60;animation:draw .7s .35s var(--ease-out) forwards}
.solv h2{font-size:22px;font-weight:800;letter-spacing:-.02em}
.solv p{font-size:14.5px;color:var(--ink-2);margin-top:8px;line-height:1.55}
.mini-rows{margin-top:18px;text-align:left}
/* Tarjeta de estado en horizontal cuando hay ancho (solo distribución "pasos") */
@media (min-width:861px){
  .res.pasos:not(.single) #solvente{display:grid;grid-template-columns:auto minmax(0,1fr) minmax(200px,auto);align-items:center;gap:24px;text-align:left;padding:0}
  .res.pasos:not(.single) #solvente .big{margin:0;width:72px;height:72px}
  .res.pasos:not(.single) #solvente .mini-rows{margin:0}
  .res.pasos:not(.single) #solvente .mini-rows .r{border:0;border-radius:14px;padding:12px 16px;background:var(--soft);gap:24px}
  .res.pasos:not(.single) #deuda{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.15fr);gap:36px;align-items:center}
  .res.pasos:not(.single) #deuda .rows{margin-top:0}
}

.pm{margin-top:22px;border-radius:20px;padding:20px;background:linear-gradient(135deg,rgba(32,168,224,.14),rgba(20,120,200,.05));border:1px solid rgba(32,168,224,.28)}
.cp{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:10px 10px 10px 14px;border-radius:14px;background:var(--field);margin-top:10px}
.cp small{display:block;font-size:11.5px;color:var(--ink-3);font-weight:700}
.cp strong{font-size:16px;font-weight:700;font-variant-numeric:tabular-nums;letter-spacing:.02em}
.cpb{all:unset;cursor:pointer;flex:0 0 auto;width:38px;height:38px;border-radius:11px;display:grid;place-items:center;color:var(--cyan-d);background:var(--soft);transition:transform .15s,color .2s,background .2s}
.cpb:hover{background:rgba(32,168,224,.16)}
.cpb:active{transform:scale(.9)}
.cpb:focus-visible{outline:2px solid var(--cyan);outline-offset:2px}
.cpb svg{width:18px;height:18px;grid-area:1/1}
.cpb .ck{opacity:0;transform:scale(.5);transition:opacity .2s,transform .3s var(--ease-spring)}
.cpb .cy{transition:opacity .2s,transform .2s}
.cpb.done{color:var(--ok)}
.cpb.done .cy{opacity:0;transform:scale(.5)}
.cpb.done .ck{opacity:1;transform:none}
.cpall{all:unset;cursor:pointer;display:block;width:100%;text-align:center;margin-top:12px;font-size:13.5px;font-weight:700;color:var(--cyan-d)}

.toast{position:fixed;left:50%;bottom:24px;z-index:60;transform:translate(-50%,20px);opacity:0;pointer-events:none;display:flex;align-items:center;gap:8px;
  padding:12px 18px;border-radius:14px;color:#fff;background:rgba(8,16,48,.85);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);font-weight:600;font-size:14px;
  box-shadow:0 12px 30px -10px rgba(0,0,0,.5);transition:opacity .25s,transform .35s var(--ease-spring)}
.toast.show{opacity:1;transform:translate(-50%,0)}
.toast{width:max-content;max-width:calc(100vw - 32px)}
.toast svg{width:18px;height:18px;color:#34d3a0}

.ov{position:fixed;inset:0;z-index:50;display:grid;place-items:center;padding:16px;background:rgba(5,10,32,.35);
  -webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);opacity:0;pointer-events:none;transition:opacity .3s var(--ease-out)}
.ov.open{opacity:1;pointer-events:auto}
.dlg{width:100%;max-width:380px;border-radius:28px;padding:34px 28px 24px;text-align:center;transform:translateY(24px) scale(.92);opacity:0;outline:none;
  transition:transform .55s var(--ease-spring),opacity .3s}
.ov.open .dlg{transform:none;opacity:1}
.ic{width:72px;height:72px;margin:0 auto 18px;border-radius:50%;display:grid;place-items:center;position:relative;isolation:isolate}
.ic::before{content:"";position:absolute;inset:0;border-radius:50%;background:inherit;animation:pulse 2.2s ease-out infinite;z-index:-1}
.ic.ok{background:linear-gradient(135deg,#34d3a0,#0ea472)}
.ic.err{background:linear-gradient(135deg,#ff7a7f,#e5484d)}
.ic.warn{background:linear-gradient(135deg,#ffc966,#f59f0a)}
.ic.info{background:linear-gradient(135deg,var(--cyan),#1478c8)}
.ic svg{width:34px;height:34px;stroke:#fff;stroke-width:3;fill:none;stroke-linecap:round;stroke-linejoin:round}
.ic .draw{stroke-dasharray:60;stroke-dashoffset:60}
.ov.open .ic .draw{animation:draw .6s .25s var(--ease-out) forwards}
@keyframes draw{to{stroke-dashoffset:0}}
@keyframes pulse{from{transform:scale(1);opacity:.4}to{transform:scale(1.5);opacity:0}}
/* Carga estilo líquido: gota de vidrio que se llena con el degradado de la marca y ondea mientras flota */
.liquido{position:relative;width:78px;height:78px;margin:2px auto 20px;border-radius:50%;overflow:hidden;isolation:isolate;
  background:rgba(255,255,255,.38);box-shadow:0 14px 30px -12px rgba(8,152,216,.65);animation:flotar 2.6s ease-in-out infinite}
.liquido::before,.liquido::after{content:"";position:absolute;left:-50%;width:200%;height:200%;z-index:-1}
.liquido::before{top:46%;border-radius:40%;background:linear-gradient(160deg,var(--cyan),#1e6fd9 70%);
  animation:ola 3.2s linear infinite,llenar 1.1s var(--ease-out) both}
.liquido::after{top:40%;border-radius:44%;background:rgba(32,168,224,.32);animation:ola 5s linear infinite reverse,llenar 1.3s var(--ease-out) both}
/* Brillo y borde de vidrio por encima del líquido */
.liquido i{position:absolute;inset:0;border-radius:50%;background:radial-gradient(circle at 32% 24%,rgba(255,255,255,.9),rgba(255,255,255,0) 40%);
  box-shadow:inset 0 0 0 1.5px rgba(255,255,255,.85),inset 0 -6px 14px rgba(8,40,120,.18)}
@keyframes ola{to{transform:rotate(360deg)}}
@keyframes llenar{from{translate:0 22%}}
@keyframes flotar{50%{transform:translateY(-5px)}}
.dlg h2{font-size:20px;font-weight:800;letter-spacing:-.01em}
.dlg p{font-size:14.5px;color:var(--ink-2);margin-top:8px;line-height:1.55}
.acts{display:flex;gap:10px;margin-top:24px}
.acts .cta{margin:0;padding:14px}
.ghost{all:unset;cursor:pointer;flex:1;text-align:center;padding:14px;border-radius:14px;font-weight:600;color:var(--ink-2);background:var(--soft)}

@media (max-width:860px){ .res{grid-template-columns:minmax(0,1fr);max-width:520px} }
/* Barra superior a una columna (≤860px, igual que .res): logo y "Nueva consulta" arriba; el nombre completo abajo, con todo el ancho */
@media (max-width:860px){
  .topbar{display:grid;grid-template-columns:minmax(0,1fr) auto;grid-template-areas:"logo back" "who who";gap:12px;align-items:center;padding:12px 12px 14px 16px}
  .topbar .logo{grid-area:logo;width:184px}
  .topbar .back{grid-area:back}
  .topbar .who{grid-area:who;padding-top:12px;border-top:1px solid var(--soft)}
}
@media (max-width:560px){
  .card{padding:28px 20px 22px;border-radius:22px}
  .panel{padding:18px 16px;border-radius:22px}
  .step{font-size:15px}
  .psub{font-size:13px;margin-top:4px}
  .step-card .foot{padding-top:16px}
  .logo{width:256px}
  .total .amt{font-size:36px}
  .ov{place-items:end center;padding:0}
  .dlg{max-width:none;border-radius:28px 28px 0 0;padding:12px 22px calc(26px + env(safe-area-inset-bottom));transform:translateY(100%);opacity:1;transition:transform .45s var(--ease-out)}
  .dlg::before{content:"";display:block;width:40px;height:5px;border-radius:9px;background:var(--soft);margin:0 auto 22px}
}
@media (prefers-reduced-motion:reduce){*,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}}

/* ===== Producción ===== */
@font-face{font-family:"Plus Jakarta Sans";font-style:normal;font-weight:400 800;font-display:swap;src:url(/static/fonts/plus-jakarta-sans-latin.woff2) format("woff2")}
/* Tipo de documento con radios nativos: funciona sin JS */
.tipos{border:0;padding:0;margin:24px 0 0;min-width:0}
.tipos legend{padding:0;width:100%;margin:0 0 10px}
.seg{position:relative}
.seg input{position:absolute;opacity:0;pointer-events:none;width:1px;height:1px}
.seg label{cursor:pointer;text-align:center;padding:10px 0;border-radius:10px;font-weight:700;font-size:15px;color:var(--ink-2);transition:background .25s var(--ease-out),color .25s,box-shadow .25s,transform .15s}
.seg label:hover{color:var(--ink)}
.seg label:active{transform:scale(.94)}
.seg input:checked + label{background:#fff;color:var(--cyan-d);box-shadow:0 6px 16px -6px rgba(8,152,216,.55)}
.seg input:focus-visible + label{outline:2px solid var(--cyan);outline-offset:2px}
/* Burbuja del tipo de documento: una sola pieza blanca que viaja con resorte hasta la opción marcada
   y se puede arrastrar (app.js). La posición la da CSS con :has(), así que también funciona sin JS. */
.seg-thumb{display:none}
@supports selector(:has(*)){
  #form-consulta .seg{touch-action:pan-y;-webkit-user-select:none;user-select:none}
  #form-consulta .seg-thumb{display:block;position:absolute;top:4px;bottom:4px;left:4px;width:calc((100% - 24px) / 5);border-radius:10px;
    background:#fff;box-shadow:0 6px 16px -6px rgba(8,152,216,.55);pointer-events:none;
    transform:translateX(calc(var(--i, 0) * (100% + 4px)));transition:transform .55s var(--ease-spring),scale .25s var(--ease-out),box-shadow .25s}
  #form-consulta .seg label{position:relative;z-index:1}
  #form-consulta .seg input:checked + label{background:transparent;box-shadow:none}
  #form-consulta .seg:has(#tipo-J:checked){--i:1}
  #form-consulta .seg:has(#tipo-E:checked){--i:2}
  #form-consulta .seg:has(#tipo-G:checked){--i:3}
  #form-consulta .seg:has(#tipo-P:checked){--i:4}
  /* Se estira un instante al llegar, como una gota */
  #form-consulta .seg-thumb.salta{animation:salta .5s var(--ease-out)}
  /* Mientras se arrastra sigue al dedo sin retraso y se agranda un poco */
  #form-consulta .seg.arrastrando{cursor:grabbing}
  #form-consulta .seg.arrastrando .seg-thumb{transition:scale .2s var(--ease-out),box-shadow .2s;scale:1.06;box-shadow:0 10px 22px -6px rgba(8,152,216,.7)}
}
@keyframes salta{35%{scale:1.16 .88}70%{scale:.97 1.04}}
/* El texto del tipo y el prefijo entran suave al cambiar */
.cambia{animation:cambia .35s var(--ease-out)}
@keyframes cambia{from{opacity:0;transform:translateY(4px)}}
.ferr{font-size:12.5px;font-weight:600;color:var(--danger);margin:6px 0 0 4px}
.who-txt{min-width:0}
/* Detalle del aviso (p. ej. pago acreditado): etiqueta a la izquierda y dato a la derecha */
.detalle{margin:14px 0 0;padding:10px 14px;border-radius:14px;background:var(--soft);display:grid;gap:6px;text-align:left}
.detalle div{display:flex;justify-content:space-between;align-items:baseline;gap:12px;font-size:14px;line-height:1.4}
.detalle dt{color:var(--ink-2);flex:none}
.detalle dd{margin:0;font-weight:700;color:var(--ink);text-align:right;overflow-wrap:anywhere}
a.back{text-decoration:none}
/* Diálogos nativos <dialog> */
/* margin:auto centra el modal: el reinicio *{margin:0} le quita el que trae el navegador.
   overflow:visible: el navegador le pone overflow:auto y un píxel de redondeo basta para mostrar una barra de scroll. */
dialog.dlg{border:0;color:var(--ink);width:calc(100% - 32px);max-width:380px;margin:auto;opacity:1;transform:none;padding:34px 28px 24px;overflow:visible}
@media (max-height:480px){ dialog.dlg{overflow-y:auto} }
dialog.dlg::backdrop{background:rgba(5,10,32,.35);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}
dialog.dlg[open]{animation:dlgIn .55s var(--ease-spring)}
@keyframes dlgIn{from{opacity:0;transform:translateY(24px) scale(.92)}}
dialog[open] .ic .draw{animation:draw .6s .25s var(--ease-out) forwards}
@keyframes sheetIn{from{transform:translateY(100%)}}
@media (max-width:560px){
  dialog.dlg{width:100%;max-width:none;margin:auto 0 0;border-radius:28px 28px 0 0;padding:12px 22px calc(26px + env(safe-area-inset-bottom))}
  dialog.dlg[open]{animation:sheetIn .45s var(--ease-out)}
}
/* Sin JavaScript: los dos pasos uno debajo del otro y sin controles que dependen de JS */
html:not(.js) .res.wizard{grid-template-areas:"top top" "sum card" "sum rep"}
html:not(.js) .res.wizard > #rep{grid-area:rep}
html:not(.js) .res.wizard .only-wiz,html:not(.js) .cpb,html:not(.js) #cpall,html:not(.js) #tel-type,html:not(.js) .det-toggle{display:none!important}
@media (max-width:860px){ html:not(.js) .res.wizard{grid-template-areas:"top" "sum" "card" "rep"} }
/* Cambio de paso (Paga ↔ Reporta): la tarjeta actual sale rápido y la nueva entra con resorte, en la dirección del avance */
#res > .step-card.sale{animation:pasoSale .16s var(--ease-out) both}
#res > .step-card.sale.atras{animation-name:pasoSaleAtras}
#res > .step-card.entra{animation:pasoEntra .5s var(--ease-spring) both}
#res > .step-card.entra.atras{animation-name:pasoEntraAtras}
@keyframes pasoSale{to{opacity:0;transform:translateX(-24px) scale(.98)}}
@keyframes pasoSaleAtras{to{opacity:0;transform:translateX(24px) scale(.98)}}
@keyframes pasoEntra{from{opacity:0;transform:translateX(36px) scale(.98)}}
@keyframes pasoEntraAtras{from{opacity:0;transform:translateX(-36px) scale(.98)}}
/* Servicio suspendido con el diseño nuevo (/suspendido-nuevo): mismo contenido que suspended.html */
/* Colores medidos sobre la tarjeta (fondo real ≈ rgb 180–191): el celeste #0898d8 daba 1,7:1. Estos pasan WCAG AA. */
.susp{--s-acento:#0b4f9c;--s-fuerte:#0b3f8f;text-align:center}
/* 30px: el anillo del ícono crece 1,5× y con 22px tocaba el lema del logo */
.susp .logo{margin-bottom:30px}
.susp .ic{width:84px;height:84px;margin-bottom:20px}
.susp .ic svg{width:40px;height:40px;stroke:#fff;stroke-width:2.2}
.susp h1{font-size:24px;line-height:1.25;text-wrap:balance}
.susp h1 span{color:var(--s-acento)}
.susp .sub{font-size:15px;line-height:1.55;margin-top:10px;color:var(--ink-2);text-wrap:balance}
.susp-calma{margin-top:14px;padding:11px 14px;border-radius:14px;font-size:14.5px;line-height:1.5;font-weight:700;color:var(--s-fuerte);
  background:rgba(32,168,224,.12);border:1px solid rgba(32,168,224,.3);text-wrap:balance}
.susp .cta{margin-top:22px;text-decoration:none}
/* Ícono en línea con el texto: con flex quedaba en el borde, lejos del texto centrado en dos líneas */
.susp-reco{margin-top:14px;font-size:13px;font-weight:600;line-height:1.45;color:var(--ink-2);text-wrap:balance}
.susp-reco svg{display:inline-block;width:15px;height:15px;margin-right:6px;vertical-align:-3px;color:var(--s-acento)}
.susp-pie{font-size:12px;color:rgba(255,255,255,.88);text-align:center}
/* Botones de soporte (portada, resultado y /suspendido) */
.soporte{margin-top:22px;padding-top:18px;border-top:1px solid var(--soft);text-align:center}
.soporte .lbl{justify-content:center;margin:0 0 12px}
.sop-btns{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.sop-btn{display:flex;align-items:center;gap:10px;padding:10px 12px;border-radius:14px;text-decoration:none;text-align:left;color:var(--ink);
  background:rgba(255,255,255,.6);border:1px solid rgba(255,255,255,.85);box-shadow:0 8px 20px -14px rgba(8,16,48,.45);
  transition:transform .25s var(--ease-spring),box-shadow .25s}
.sop-btn:hover{transform:translateY(-2px);box-shadow:0 14px 26px -14px rgba(8,16,48,.55)}
.sop-btn:active{transform:scale(.97)}
.sop-btn:focus-visible{outline:2px solid var(--cyan);outline-offset:2px}
.sop-btn .sic{flex:none;width:38px;height:38px;border-radius:11px;display:grid;place-items:center;background:#25d366;box-shadow:0 6px 14px -6px rgba(37,211,102,.8)}
.sop-btn.tg .sic{background:#29a9e0;box-shadow:0 6px 14px -6px rgba(41,171,226,.8)}
.sop-btn .sic svg{width:22px;height:22px;fill:#fff}
.sop-btn b{display:block;font-size:14px;font-weight:800}
.sop-btn small{display:block;font-size:11.5px;font-weight:600;color:var(--ink-2)}
@media (max-width:360px){ .sop-btns{grid-template-columns:1fr} }
/* En el resultado van en su propio panel, a todo el ancho y debajo de las tarjetas */
.res > .sop-panel{grid-column:1/-1}
.sop-panel .soporte{margin-top:0;padding-top:0;border-top:0}
@media (min-width:861px){ .sop-panel .soporte{display:flex;align-items:center;justify-content:space-between;gap:20px;text-align:left}
  .sop-panel .soporte .lbl{margin:0}
  .sop-panel .sop-btns{flex:0 1 420px} }
/* Invitación a pagar por adelantado (paso 0) */
.step i svg{width:16px;height:16px}
/* Ícono al centro: el contenedor ocupa el espacio libre (centra el ícono si la tarjeta es más alta que su contenido)
   y su relleno de 28px deja lugar al anillo que late (crece 21px por lado) sin tocar el título ni el aviso */
.adel-centro{flex:1 0 auto;display:grid;place-items:center;padding:28px 0}
.adelanto .adel-ic{width:84px;height:84px;margin:0}
.adelanto .adel-ic svg{width:40px;height:40px;stroke:#fff;stroke-width:2}
.adelanto .foot{margin-top:0}
.adelanto .adel-nota{margin-top:0}
/* Aviso de reportar: mismo recuadro celeste que en /suspendido; azul #0b3f8f medido en 5:1 */
.adel-nota{margin-top:14px;padding:11px 14px;border-radius:14px;font-size:14px;font-weight:700;line-height:1.45;color:#0b3f8f;
  background:rgba(32,168,224,.12);border:1px solid rgba(32,168,224,.3);text-wrap:balance}
/* Líneas parejas en textos cortos de varias líneas: evita palabras solas al final ("puntualidad!") */
.sub,.solv p,.dlg p{text-wrap:balance}
/* Botones Atrás + acción: en celulares se apilan (la acción arriba) porque lado a lado el texto se partía en dos o tres líneas */
@media (max-width:480px){
  .foot.row{flex-direction:column-reverse}
  .foot.row .back2{min-height:48px}
}