/* ============================================================
   INICIO · 02-cuenta (#pagos) — Pilar 01 «Fital»
   Tres modos:
   · base             → bloques apilados (sin JS, ?reduce)
   · <1100px          → carrusel con scroll-snap (CSS puro; puntos con JS)
   · #pagos.cu--pin   → escenario fijado de 4 capítulos (≥1100px, lo activa el JS)
   ============================================================ */
#pagos{overflow-x:clip;background:linear-gradient(180deg,var(--ink) 0%,var(--deep) 30%,var(--ink-2) 72%,var(--ink) 100%)}
#pagos .cu-glow{position:absolute;left:50%;top:clamp(120px,22vw,360px);width:min(1100px,120vw);aspect-ratio:1.6;transform:translateX(-12%);pointer-events:none;
  background:radial-gradient(closest-side,rgba(216,166,70,.13),rgba(216,166,70,.04) 55%,transparent 75%);filter:blur(10px)}

/* ---------- Cabecera ---------- */
#pagos .cu-head{position:relative}
/* Fila superior: rótulo + logotipo dorado a la izquierda, «01» calado a la derecha.
   --lw ancho del logotipo (3048×1016 → alto = ancho/3). */
#pagos .cu-head__top{--lw:clamp(280px,45vw,640px);--lh:calc(var(--lw)/3);display:grid;grid-template-columns:minmax(0,1fr) auto;column-gap:24px;align-items:end}
#pagos .cu-eyebrow{grid-area:1/1;justify-self:start;margin:0}
#pagos .cu-title{grid-area:2/1;justify-self:start;margin:clamp(26px,3.2vw,46px) 0 0;font-size:0;line-height:0}
#pagos .cu-num{grid-area:1/2/3/3;align-self:end;flex:none;font:500 italic calc(var(--lh)*1.2)/.74 var(--serif);letter-spacing:-.04em;color:transparent;
  -webkit-text-stroke:1.25px rgba(244,213,138,.8);padding:0 .08em 0 0;user-select:none}

/* Logotipo: oro metálico vivo recortado con la máscara oficial */
#pagos .cu-logo{--lx:32%;--ly:18%;--lo:0;--sw:-140%;position:relative;display:block;width:var(--lw);aspect-ratio:3048/1016;
  filter:drop-shadow(0 22px 46px rgba(216,166,70,.2)) drop-shadow(0 2px 3px rgba(5,9,15,.55))}
#pagos .cu-logo i{display:block;font-style:normal}
#pagos .cu-logo__m{position:absolute;inset:0;
  -webkit-mask:url(../../../assets/img/brand/fital-logo-mask.svg) center/100% 100% no-repeat;mask:url(../../../assets/img/brand/fital-logo-mask.svg) center/100% 100% no-repeat}
#pagos .cu-logo__m{overflow:hidden;
  background:linear-gradient(180deg,rgba(255,248,224,.2) 0%,rgba(255,248,224,0) 36%,rgba(62,36,6,0) 58%,rgba(62,36,6,.36) 100%),
    linear-gradient(104deg,#8a6122 0%,#b0843a 10%,#cfa450 21%,#f3dca0 29%,#d9b160 35%,#b0843a 46%,#96702a 54%,#c79c4c 64%,#ecd08c 73%,#f9e9bb 77%,#d4ad60 84%,#a87c31 93%,#8a6122 100%);
  background-size:100% 100%,230% 100%;background-position:0 0,0% 50%;animation:cu-metal 22s ease-in-out infinite alternate}
@keyframes cu-metal{to{background-position:0 0,100% 50%}}
/* luz que sigue al puntero (--lx/--ly) y destello especular que cruza al entrar (--sw) */
#pagos .cu-logo__m:before{content:"";position:absolute;inset:0;opacity:var(--lo);
  background:radial-gradient(34% 110% at var(--lx) var(--ly),rgba(255,250,232,.85) 0%,rgba(255,244,210,.3) 42%,rgba(255,244,210,0) 100%)}
#pagos .cu-logo__m:after{content:"";position:absolute;top:-25%;bottom:-25%;left:0;width:30%;transform:translateX(var(--sw)) skewX(-20deg);
  background:linear-gradient(90deg,rgba(255,252,238,0) 0%,rgba(255,252,238,.25) 30%,rgba(255,253,244,.95) 50%,rgba(255,252,238,.25) 70%,rgba(255,252,238,0) 100%)}
/* Baño de oro líquido: el logotipo emerge de un nivel que sube con ola. El JS recorta con clip-path
   el baño (__bath), el relleno de las letras (__m) y el menisco (__line) con la MISMA curva.
   Sin JS / ?reduce estas capas no se ven y el logotipo queda completo. */
#pagos .cu-logo__bath,#pagos .cu-logo__line{position:absolute;inset:-16% -7% 0;opacity:0;pointer-events:none;
  -webkit-mask:linear-gradient(90deg,transparent 0%,#000 11%,#000 89%,transparent 100%);mask:linear-gradient(90deg,transparent 0%,#000 11%,#000 89%,transparent 100%)}
#pagos .cu-logo__bath i,#pagos .cu-logo__line i{position:absolute;inset:0}
#pagos .cu-logo__bath i{--y:100%;-webkit-mask:linear-gradient(180deg,#000 60%,transparent 100%);mask:linear-gradient(180deg,#000 60%,transparent 100%);
  background:linear-gradient(180deg,rgba(255,236,176,.56) var(--y),rgba(232,186,94,.34) calc(var(--y) + 8%),rgba(216,166,70,.2) calc(var(--y) + 30%),rgba(216,166,70,0) calc(var(--y) + 80%))}
#pagos .cu-logo__line{filter:drop-shadow(0 0 5px rgba(255,214,130,.95)) drop-shadow(0 3px 14px rgba(216,166,70,.55))}
#pagos .cu-logo__line i{background:#fff3c4}
/* destello en la pluma de la «A» cuando el oro termina de subir */
#pagos .cu-logo__glint{position:absolute;left:63.2%;top:21%;width:30%;aspect-ratio:1;opacity:0;pointer-events:none;mix-blend-mode:screen;
  background:radial-gradient(closest-side,rgba(255,251,236,.98) 0%,rgba(255,238,178,.5) 9%,rgba(244,213,138,.12) 30%,rgba(244,213,138,0) 62%),
    linear-gradient(90deg,rgba(255,246,214,0) 4%,rgba(255,248,224,.95) 50%,rgba(255,246,214,0) 96%) center/100% 1.5px no-repeat,
    linear-gradient(180deg,rgba(255,246,214,0) 18%,rgba(255,248,224,.9) 50%,rgba(255,246,214,0) 82%) center/1.5px 100% no-repeat}
/* filete de oro que va del logotipo al «01» (se traza cuando termina el llenado) */
#pagos .cu-head__top:after{content:"";grid-area:2/1;align-self:end;height:1px;margin:0 -18px calc(var(--lh)*.2) calc(var(--lw) + clamp(20px,2.8vw,44px));
  background:linear-gradient(90deg,rgba(244,213,138,.75) 0%,rgba(216,166,70,.5) 55%,rgba(216,166,70,.22) 100%);transform:scaleX(var(--fl,1));transform-origin:0 50%;pointer-events:none}
html.reduce #pagos .cu-logo__m{animation:none;background-position:0 0,38% 50%}
@supports not ((mask-image:url("")) or (-webkit-mask-image:url(""))){
  #pagos .cu-logo__m{background:url(../../../assets/img/brand/fital-logo-gold.svg) center/100% 100% no-repeat;animation:none}
  #pagos .cu-logo__m:before,#pagos .cu-logo__m:after,#pagos .cu-logo__bath,#pagos .cu-logo__line{display:none}
}
#pagos .cu-head__cols{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:clamp(28px,6vw,110px);align-items:start;
  margin-top:clamp(32px,4.4vw,64px);padding-top:clamp(26px,3vw,44px);border-top:1px solid var(--line)}
#pagos .cu-lead{max-width:46ch}
#pagos .cu-cite{margin:0;font:500 clamp(1.9rem,3.9vw,3.9rem)/1.04 var(--serif);letter-spacing:-.025em;color:var(--cream);text-wrap:balance}
#pagos .cu-cite em{font-style:italic}

/* ---------- Escenario · base (apilado) ---------- */
#pagos .cu-track{position:relative;margin-top:clamp(64px,9vw,130px)}
#pagos .cu-box{position:relative}
/* Subtítulo del escenario: para quién son los 4 pasos */
#pagos .cu-label{position:relative;margin:0 0 clamp(22px,2.6vw,36px);padding-top:clamp(16px,1.8vw,22px);max-width:22ch;
  font:500 clamp(1.5rem,2.05vw,2rem)/1.16 var(--serif);letter-spacing:-.018em;color:var(--cream);text-wrap:balance}
#pagos .cu-label:before{content:"";position:absolute;left:0;top:0;width:44px;height:2px;border-radius:2px;background:var(--gold-grad)}
#pagos .cu-label em{font:800 .86em/1 var(--sans);font-style:normal;letter-spacing:-.01em;font-variant-numeric:tabular-nums;white-space:nowrap}
#pagos .cu-tablist{display:none}
#pagos .cu-stage{display:grid;gap:clamp(64px,9vw,130px);counter-reset:cu}
#pagos .cu-step{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);grid-template-areas:"tab media";align-items:center;--cg:clamp(40px,7vw,110px);column-gap:var(--cg)}
#pagos .cu-step:nth-child(even){grid-template-columns:minmax(0,7fr) minmax(0,5fr);grid-template-areas:"media tab"}
@media (min-width:1100px){
  /* base apilada: el primer paso arranca pegado al subtítulo, no centrado contra la imagen */
  #pagos .cu-step:first-child{align-items:start}
  #pagos .cu-step:first-child .cu-tab{padding-top:clamp(6px,1vw,14px)}
}

#pagos .cu-tab{grid-area:tab;position:relative;counter-increment:cu;display:grid;grid-template-columns:auto minmax(0,1fr);column-gap:18px;align-items:baseline}
#pagos .cu-tab:before{content:counter(cu,decimal-leading-zero);font:700 .8rem/1 var(--sans);letter-spacing:.18em;color:var(--gold-2);font-variant-numeric:tabular-nums}
#pagos .cu-tab__t{grid-column:2;margin:0;font:600 clamp(1.75rem,2.5vw,2.4rem)/1.06 var(--serif);letter-spacing:-.02em;color:var(--cream)}
#pagos .cu-tab__d{grid-column:2}
#pagos .cu-tab__d p{margin:0;color:var(--cream-2);font-size:var(--fs-body);line-height:1.6;max-width:36ch}
#pagos .cu-tab__d p:before{content:"";display:block;height:12px}
#pagos .cu-tab__bar{display:none}

#pagos .cu-media{grid-area:media;position:relative;margin:0;aspect-ratio:3/2;border-radius:var(--r);overflow:hidden;background:var(--ink-2);border:1px solid var(--hair)}
#pagos .cu-media:after{content:counter(cu,decimal-leading-zero);position:absolute;top:clamp(16px,1.8vw,26px);right:clamp(18px,2vw,30px);z-index:2;
  font:500 italic clamp(1.9rem,2.6vw,2.7rem)/1 var(--serif);color:var(--gold-2);text-shadow:0 2px 24px rgba(5,9,15,.7)}
#pagos .cu-media__in{position:absolute;inset:0}
#pagos .cu-media__in:after{content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(205deg,rgba(5,9,15,.28) 0%,rgba(5,9,15,0) 30%,rgba(5,9,15,0) 52%,rgba(5,9,15,.62) 100%)}
#pagos .cu-media img,#pagos .cu-vid{position:absolute;inset:0;width:100%;height:100%;max-width:none;object-fit:cover;object-position:var(--op,50% 40%)}
#pagos .cu-vid{opacity:0;transition:opacity 1.1s var(--ease)}
#pagos .cu-vid.is-on{opacity:1}

/* Panel «Tu cuenta FITAL» */
#pagos .cu-panel{grid-area:media;align-self:end;justify-self:start;position:relative;z-index:4;display:flex;flex-direction:column;
  width:min(372px,82%);margin:0 0 -44px calc(24px - var(--cg,44px));border-radius:20px;border:1px solid var(--hair);overflow:hidden;
  background:linear-gradient(158deg,rgba(16,39,58,.8) 0%,rgba(6,14,23,.86) 100%);
  -webkit-backdrop-filter:blur(22px) saturate(140%);backdrop-filter:blur(22px) saturate(140%);
  box-shadow:0 44px 90px -28px rgba(0,0,0,.9),0 0 0 1px rgba(5,9,15,.4),inset 0 1px rgba(244,213,138,.18)}
#pagos .cu-step:nth-child(even) .cu-panel{justify-self:end;margin:0 calc(24px - var(--cg,44px)) -44px 0}
#pagos .cu-panel__head{display:flex;align-items:center;gap:12px;padding:15px 18px;border-bottom:1px solid var(--line)}
#pagos .cu-avatar{flex:none;width:34px;height:34px;border-radius:50%;display:grid;place-items:center;background:var(--gold-grad);color:var(--ink);font:800 .95rem/1 var(--sans)}
#pagos .cu-panel__title{font:700 .96rem/1.2 var(--sans);color:var(--cream)}
#pagos .cu-live{margin-left:auto;display:inline-flex;align-items:center;gap:8px;font:600 .8125rem/1 var(--sans);color:var(--ok);white-space:nowrap}
#pagos .cu-live i{width:7px;height:7px;border-radius:50%;background:var(--ok);animation:cu-pulse 2.6s ease-out infinite}
@keyframes cu-pulse{0%{box-shadow:0 0 0 0 rgba(127,214,168,.55)}70%,to{box-shadow:0 0 0 9px rgba(127,214,168,0)}}
#pagos .cu-panel__body{flex:1;display:flex;flex-direction:column;justify-content:center;gap:15px;padding:18px}
#pagos .cu-panel__foot{margin:0;padding:12px 12px 13px;border-top:1px solid var(--line);text-align:center;letter-spacing:.08em;text-wrap:balance}

#pagos .cu-fig{display:grid;gap:5px}
#pagos .cu-rot{font:700 .7rem/1.3 var(--sans);letter-spacing:.16em;text-transform:uppercase;color:var(--cream-2)}
#pagos .cu-cifra{display:block;font-size:clamp(1.72rem,2.25vw,2.1rem);line-height:1.08;color:var(--cream);white-space:nowrap}
#pagos .cu-cifra small{font-size:.44em;letter-spacing:.06em;margin-left:.5em}
#pagos .cu-cifra--ok{color:var(--gold-2)}
#pagos .cu-sub{font-size:.9rem;line-height:1.4;color:var(--cream-2)}
#pagos .cu-checks{list-style:none;margin:0;padding:0;gap:9px;font-size:.92rem}
#pagos .cu-checks li{padding-left:28px;line-height:1.4}
#pagos .cu-checks li:before{top:.1em}
#pagos .cu-badge{align-self:flex-start;display:inline-flex;align-items:center;gap:8px;margin:0;padding:9px 15px 9px 11px;border-radius:999px;
  border:1px solid rgba(127,214,168,.36);background:rgba(127,214,168,.1);color:var(--ok);font:700 .9rem/1.2 var(--sans)}
#pagos .cu-badge svg{flex:none;width:17px;height:17px;fill:none;stroke:currentColor;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}
#pagos .cu-toast{display:flex;align-items:center;gap:12px;padding:11px 13px;border-radius:14px;border:1px solid var(--hair);background:rgba(244,213,138,.08)}
#pagos .cu-toast__i{flex:none;width:34px;height:34px;border-radius:50%;display:grid;place-items:center;background:var(--gold-grad)}
#pagos .cu-toast__i svg{width:18px;height:18px;fill:none;stroke:var(--ink);stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}
#pagos .cu-toast__t{display:grid;gap:2px;min-width:0}
#pagos .cu-toast__t b{font:700 .94rem/1.2 var(--sans);color:var(--cream)}
#pagos .cu-toast__t span{font-size:.9rem;line-height:1.3;color:var(--cream-2)}
#pagos .cu-rows{list-style:none;margin:0;padding:0}
#pagos .cu-rows li{display:flex;align-items:center;justify-content:space-between;gap:14px;padding:10px 0;border-top:1px solid var(--line);font-size:.9rem;line-height:1.3;color:var(--cream-2)}
#pagos .cu-rows li:last-child{padding-bottom:0}
#pagos .cu-rows b{color:var(--cream);white-space:nowrap}
#pagos .cu-rows .cu-paid{padding:5px 11px;border-radius:999px;background:rgba(127,214,168,.12);color:var(--ok);font:700 .8125rem/1 var(--sans)}
#pagos .cu-tiles{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
#pagos .cu-tiles li{display:grid;gap:3px;padding:13px 14px;border-radius:14px;border:1px solid var(--line);background:rgba(243,234,219,.045)}
#pagos .cu-tiles svg{width:22px;height:22px;margin-bottom:7px;fill:none;stroke:var(--gold-2);stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round}
#pagos .cu-tiles b{font:700 .94rem/1.2 var(--sans);color:var(--cream)}
#pagos .cu-tiles span{font-size:.9rem;line-height:1.25;color:var(--cream-2)}
#pagos .cu-bars{display:flex;align-items:flex-end;gap:6px;height:54px}
#pagos .cu-bars i{flex:1;height:var(--h,50%);border-radius:4px 4px 0 0;transform-origin:50% 100%;background:linear-gradient(180deg,rgba(244,213,138,.75),rgba(216,166,70,.16))}
#pagos .cu-bars i:nth-child(1){--h:36%}#pagos .cu-bars i:nth-child(2){--h:52%}#pagos .cu-bars i:nth-child(3){--h:44%}#pagos .cu-bars i:nth-child(4){--h:66%}
#pagos .cu-bars i:nth-child(5){--h:58%}#pagos .cu-bars i:nth-child(6){--h:80%}#pagos .cu-bars i:nth-child(7){--h:100%;background:var(--gold-grad)}

#pagos .cu-dots{display:none}
/* Acción dentro del escenario (solo en los modos con JS: fijado y carrusel) */
#pagos .cu-go{display:none}
#pagos .cu-go .btn{min-height:48px;font-size:.9375rem}

/* ---------- Cierre: 3 ventanas de video + franja de acción ----------
   base (sin JS / ?reduce) → 3 ventanas iguales con la imagen · #pagos.cu--wins (JS) → velo sobre las que esperan y ola de oro al activarse
   #pagos.cu--acc (≥900px) → acordeón: la activa se abre · <900px → carrusel con scroll-snap y medios verticales */
#pagos .cu-after{margin-top:clamp(64px,7vw,104px)}
#pagos .cu-wins{--gap:clamp(10px,1.1vw,16px);--pad:clamp(20px,2vw,30px);position:relative;list-style:none;margin:0;padding:0;display:flex;gap:var(--gap);
  height:clamp(460px,70vh,700px);counter-reset:cw}
#pagos .cu-win{position:relative;flex:1 1 0;min-width:0;counter-increment:cw;border-radius:var(--r);overflow:hidden;isolation:isolate;background:var(--ink-2);outline-offset:5px;
  box-shadow:0 50px 90px -56px rgba(0,0,0,.9);transition:box-shadow 1.1s var(--ease)}
#pagos .cu-win:focus-visible{outline:2px solid var(--gold-2)}
/* marco de hilo de oro */
#pagos .cu-win:after{content:"";position:absolute;inset:0;z-index:5;border-radius:inherit;border:1px solid var(--hair);pointer-events:none;
  box-shadow:inset 0 1px rgba(244,213,138,.1);transition:border-color .9s var(--ease),box-shadow .9s var(--ease)}
#pagos .cu-win__m{position:absolute;inset:-16px;z-index:0}
#pagos .cu-win__m img,#pagos .cu-win__v{position:absolute;inset:0;width:100%;height:100%;max-width:none;object-fit:cover;object-position:var(--op,50% 40%)}
#pagos .cu-win__v{opacity:0;transition:opacity 1.1s var(--ease),transform 2s var(--ease)}
#pagos .cu-win__v.is-on{opacity:1}
/* reinicio del clip: un parpadeo corto de tinta tapa el corte (nunca se superponen dos composiciones) */
#pagos .cu-win__dip{position:absolute;inset:0;z-index:1;pointer-events:none;opacity:0;background:radial-gradient(120% 90% at 50% 100%,#0b1a29 0%,var(--ink-2) 60%);transition:opacity .6s var(--ease)}
#pagos .cu-win__dip.is-dip{opacity:1;transition:opacity .24s ease-in}
#pagos .cu-win__m img{transition:transform 2s var(--ease);color:transparent;font-size:0}   /* si la imagen tarda o falla, su texto alternativo no se pinta sobre la ventana */
#pagos .cu-win__shade{position:absolute;inset:0;z-index:1;pointer-events:none;
  background:linear-gradient(180deg,rgba(5,9,15,.5) 0%,rgba(5,9,15,.08) 22%,rgba(5,9,15,0) 38%,rgba(5,9,15,.6) 62%,rgba(5,9,15,.9) 82%,rgba(5,9,15,.95) 100%)}
#pagos .cu-win__top{position:absolute;z-index:3;left:var(--pad);right:var(--pad);top:var(--pad);display:flex;align-items:center;justify-content:space-between}
#pagos .cu-win__top:after{content:counter(cw,decimal-leading-zero);font:500 italic clamp(1.7rem,2.2vw,2.3rem)/1 var(--serif);color:var(--gold-2);text-shadow:0 2px 24px rgba(5,9,15,.75)}
#pagos .cu-win__ico{flex:none;display:grid;place-items:center;width:48px;height:48px;border-radius:50%;border:1px solid var(--hair);background:rgba(5,9,15,.5);
  -webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}
#pagos .cu-ico{width:25px;height:25px;fill:none;stroke:var(--gold-2);stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
/* el texto tiene el ancho de la ventana en reposo (--cw0, lo mide el JS): al abrirse el acordeón no se reacomoda ni una línea */
#pagos .cu-win__tx{position:absolute;z-index:3;left:var(--pad);bottom:calc(var(--pad) + 2px);width:calc(var(--cw0,100%) - var(--pad)*2)}
#pagos .cu-win__tx:before{content:"";display:block;width:44px;height:2px;margin-bottom:clamp(14px,1.4vw,20px);border-radius:2px;background:var(--gold-grad);transform-origin:0 50%}
#pagos .cu-win__t{margin:0 0 10px;font:600 clamp(1.45rem,1.85vw,1.95rem)/1.1 var(--serif);letter-spacing:-.02em;color:var(--cream);text-wrap:balance;text-shadow:0 1px 18px rgba(5,9,15,.6)}
#pagos .cu-win__t strong{font:800 .86em/1 var(--sans);letter-spacing:-.01em;font-variant-numeric:tabular-nums;white-space:nowrap;color:var(--gold-2)}
#pagos .cu-win__d{margin:0;color:var(--cream-2);font-size:.975rem;line-height:1.5;text-shadow:0 1px 14px rgba(5,9,15,.7)}
#pagos .cu-lq,#pagos .cu-wins__ind{display:none}
#pagos .cu-nav,#pagos .cu-hint,#pagos .cu-wbar{display:none}   /* controles del carrusel: solo celular (bloque final) */

/* Con JS: las ventanas en espera quedan bajo un velo de tinta que además les quita color; la activa se destapa con una ola de oro */
#pagos.cu--wins .cu-lq{display:block;position:absolute;inset:0;z-index:2;pointer-events:none;overflow:hidden}
#pagos .cu-lq i{display:block;position:absolute;inset:0;font-style:normal}
#pagos .cu-lq__veil{background:linear-gradient(180deg,rgba(5,9,15,.5) 0%,rgba(7,17,27,.56) 100%);-webkit-backdrop-filter:saturate(.28);backdrop-filter:saturate(.28);transition:opacity .9s var(--ease)}
#pagos.cu--wins .cu-win.is-on .cu-lq__veil{opacity:0}
#pagos.cu--wins .cu-win.is-sweep .cu-lq__veil{opacity:1;transition:none}
#pagos .cu-lq__body{--y:110%;opacity:0;
  background:linear-gradient(180deg,rgba(250,222,146,.72) var(--y),rgba(232,182,84,.5) calc(var(--y) + 4%),rgba(206,150,52,.28) calc(var(--y) + 11%),rgba(196,140,44,.1) calc(var(--y) + 19%),rgba(196,140,44,0) calc(var(--y) + 26%))}
#pagos .cu-lq__line{opacity:0;filter:drop-shadow(0 0 4px rgba(255,222,146,.95)) drop-shadow(0 -5px 16px rgba(244,213,138,.6))}
#pagos .cu-lq__line i{background:#fff3c4}
#pagos.cu--wins .cu-win__m img,#pagos.cu--wins .cu-win__v{transform:scale(1.07)}
#pagos.cu--wins .cu-win.is-on .cu-win__m img,#pagos.cu--wins .cu-win.is-on .cu-win__v{transform:none}
#pagos.cu--wins .cu-win__tx:before{transform:scaleX(.36);transition:transform 1.1s var(--ease)}
#pagos.cu--wins .cu-win.is-on .cu-win__tx:before{transform:none}
#pagos.cu--wins .cu-win.is-on{box-shadow:0 60px 110px -50px rgba(0,0,0,.95),0 0 130px -46px rgba(216,166,70,.42)}
#pagos.cu--wins .cu-win.is-on:after{border-color:rgba(244,213,138,.6);box-shadow:inset 0 1px rgba(255,236,176,.3),inset 0 0 0 1px rgba(5,9,15,.3)}
/* Acordeón (≥900px): la ventana activa se abre con paso viscoso; las otras dos quedan más angostas */
#pagos.cu--acc .cu-win{cursor:pointer;transition:flex-grow 1.15s cubic-bezier(.3,.78,.18,1),box-shadow 1.1s var(--ease)}
#pagos.cu--acc .cu-win.is-on{flex-grow:var(--ga,2.2);cursor:default}
#pagos .cu-ctas{position:relative;display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:16px 20px;
  margin-top:clamp(48px,6vw,96px);padding-top:clamp(36px,4.4vw,64px);border-top:1px solid var(--line)}
#pagos .cu-ctas__glow{position:absolute;left:50%;top:0;width:min(760px,92%);height:220px;transform:translate(-50%,-50%);pointer-events:none;
  background:radial-gradient(closest-side,rgba(216,166,70,.2),rgba(216,166,70,.05) 55%,transparent 78%)}
#pagos .cu-ctas .btn{min-height:56px;z-index:1}
#pagos .cu-ctas .cu-main{min-height:62px;padding-inline:2.5em;font-size:1.02rem}

/* ============================================================
   ≥1100px con movimiento: escenario fijado (clase puesta por JS)
   --fm margen del marco · --fa alto útil bajo el menú · --fh alto del marco (con tope --fhm)
   ============================================================ */
#pagos.cu--pin .cu-track{height:400vh}
#pagos.cu--pin .cu-pin{position:sticky;top:0;height:100vh;overflow:clip}
#pagos.cu--pin .cu-wrap{height:100%}
#pagos.cu--pin .cu-box{height:100%;display:flex;flex-direction:column;justify-content:center;--nh:var(--cu-nh,var(--nav-h));padding-top:var(--nh);
  --fw:57%;--lw:35%;--fm:clamp(24px,3.6vh,40px);--fa:calc(100vh - var(--nh) - var(--fm)*2);--fh:min(var(--fa),var(--fhm,300vh));
  --ftop:calc(var(--nh) + var(--fm) + (var(--fa) - var(--fh))/2);--fbot:calc(var(--fm) + (var(--fa) - var(--fh))/2)}
#pagos.cu--pin .cu-box:before,#pagos.cu--pin .cu-box:after{content:"";position:absolute;right:0;top:var(--ftop);bottom:var(--fbot);width:var(--fw);border-radius:var(--r);pointer-events:none}
#pagos.cu--pin .cu-box:before{background:var(--ink-2);box-shadow:0 70px 130px -50px rgba(0,0,0,.9),0 0 160px -40px rgba(216,166,70,.22)}
#pagos.cu--pin .cu-box:after{z-index:3;border:1px solid var(--hair);box-shadow:inset 0 0 0 1px rgba(5,9,15,.35)}
#pagos.cu--pin .cu-label{width:var(--lw);max-width:none;margin-bottom:clamp(10px,2vh,26px)}
#pagos.cu--pin .cu-stage{display:block;width:var(--lw)}
#pagos.cu--pin .cu-step{display:contents}
#pagos.cu--pin .cu-go{display:flex;width:var(--lw);margin-top:clamp(18px,3.2vh,34px)}

#pagos.cu--pin .cu-step .cu-tab{padding:clamp(13px,2.3vh,22px) 0;border-bottom:1px solid var(--line);cursor:pointer;outline-offset:6px}
#pagos.cu--pin .cu-tab:before{color:var(--mute);transition:color .6s var(--ease)}
#pagos.cu--pin .cu-tab__t{color:var(--mute);transform:scale(.8);transform-origin:0 60%;transition:color .7s var(--ease),transform 1s var(--ease)}
#pagos.cu--pin .cu-tab:hover .cu-tab__t{color:var(--cream)}
#pagos.cu--pin .cu-tab__d{display:grid;grid-template-rows:0fr;opacity:0;transition:grid-template-rows 1s var(--ease),opacity .5s var(--ease)}
#pagos.cu--pin .cu-tab__d p{overflow:hidden;min-height:0}
#pagos.cu--pin .cu-tab__bar{display:block;position:absolute;left:0;right:0;bottom:-1px;height:2px;background:var(--gold-grad);transform:scaleX(var(--f,0));transform-origin:0 50%}
#pagos.cu--pin .cu-step.is-active .cu-tab:before{color:var(--gold-2)}
#pagos.cu--pin .cu-step.is-active .cu-tab__t{color:var(--gold-2);transform:none}
#pagos.cu--pin .cu-step.is-active .cu-tab__d{grid-template-rows:1fr;opacity:1;transition:grid-template-rows 1s var(--ease),opacity .9s var(--ease) .15s}

#pagos.cu--pin .cu-media{position:absolute;right:0;top:var(--ftop);bottom:var(--fbot);width:var(--fw);aspect-ratio:auto;border:0;z-index:1;visibility:hidden;will-change:clip-path}
#pagos.cu--pin .cu-step.is-active .cu-media{visibility:visible}
#pagos.cu--pin .cu-media img,#pagos.cu--pin .cu-vid{inset:-4%;width:108%;height:108%;
  transform:translate3d(calc(var(--mx,0)*10px),calc(var(--my,0)*8px + (var(--sp,.5) - .5)*-3%),0)}
#pagos.cu--pin .cu-media__in:after{background:linear-gradient(205deg,rgba(5,9,15,.3) 0%,rgba(5,9,15,0) 28%,rgba(5,9,15,0) 46%,rgba(5,9,15,.74) 100%)}

/* El panel visible lo decide .is-panel (el JS lo cambia a mitad de la máscara, no al instante) */
#pagos.cu--pin .cu-step .cu-panel{position:absolute;left:calc(100% - var(--fw) - clamp(48px,5.6vw,84px));bottom:calc(var(--fbot) + clamp(26px,5vh,48px));
  width:clamp(318px,27vw,384px);margin:0;visibility:hidden;
  transform:perspective(1100px) translate3d(calc(var(--mx,0)*-16px),calc(var(--my,0)*-12px),0) rotateY(calc(var(--mx,0)*3.5deg)) rotateX(calc(var(--my,0)*-2.5deg))}
#pagos.cu--pin .cu-step.is-panel .cu-panel{visibility:visible}
#pagos.cu--pin .cu-panel:before{content:"";position:absolute;inset:0;z-index:2;pointer-events:none;opacity:0;
  background:linear-gradient(112deg,transparent 34%,rgba(244,213,138,.2) 50%,transparent 66%);transform:translateX(-110%)}
#pagos.cu--pin .cu-step.is-panel .cu-panel:before{animation:cu-sheen 1.4s var(--ease) 1}
@keyframes cu-sheen{0%{opacity:1;transform:translateX(-110%)}99%{opacity:1;transform:translateX(110%)}to{opacity:0;transform:translateX(110%)}}
/* Oro líquido (WebGL): un canvas dentro del marco hace la transición entre los 4 medios.
   Las imágenes y videos del DOM siguen ahí (alimentan las texturas) pero no se pintan;
   la sombra y el número del paso se quedan encima. Sin .cu--gl todo es lo de arriba. */
#pagos .cu-gl,#pagos .cu-wv{display:none}
#pagos.cu--pin .cu-gl{display:block;position:absolute;right:0;top:var(--ftop);bottom:var(--fbot);width:var(--fw);z-index:1;border-radius:var(--r);overflow:hidden;
  pointer-events:none;background:var(--ink-2);contain:strict}
#pagos.cu--pin .cu-gl canvas{display:block;width:100%;height:100%}
#pagos.cu--pin.cu--gl .cu-media{background:transparent;will-change:auto}
#pagos.cu--pin.cu--gl .cu-media img,#pagos.cu--pin.cu--gl .cu-media .cu-vid{opacity:0;transition:none;transform:none}
#pagos.cu--pin.cu--gl .cu-media:after{opacity:var(--no,1)}
#pagos.cu--pin.cu--gl.cu--glfade .cu-media img,#pagos.cu--pin.cu--gl.cu--glfade .cu-media .cu-vid{transition:opacity .4s ease}
@media (max-width:1279px){
  #pagos.cu--pin .cu-box{--fw:55%;--lw:37%}
  #pagos.cu--pin .cu-step .cu-panel{left:calc(100% - var(--fw) - 34px);width:318px}
}
@media (min-width:1600px){
  #pagos.cu--pin .cu-box{--fw:62%;--lw:31%;--fhm:780px}
  #pagos.cu--pin .cu-step .cu-panel{left:calc(100% - var(--fw) - 70px)}
}
@media (max-height:719px){
  #pagos.cu--pin .cu-panel__body{gap:11px;padding:14px 18px}
  #pagos.cu--pin .cu-panel__head{padding-block:11px}
  #pagos.cu--pin .cu-tab__t{font-size:clamp(1.6rem,2.2vw,2rem)}
  #pagos.cu--pin .cu-label{font-size:1.45rem;padding-top:14px}
}

/* ============================================================
   <1100px: una tarjeta por paso (título → imagen → panel)
   ============================================================ */
@media (max-width:1099px){
  #pagos .cu-step,#pagos .cu-step:nth-child(even){display:flex;flex-direction:column;align-items:stretch;grid-template-areas:none;grid-template-columns:minmax(0,1fr)}
  #pagos .cu-tab{order:0;grid-area:auto;align-self:start;margin:0 0 18px;padding-inline:2px;column-gap:14px}
  #pagos .cu-tab__t{font-size:clamp(1.6rem,3.4vw,1.9rem)}
  #pagos .cu-tab__d p{max-width:none}
  #pagos .cu-tab__d p:before{height:10px}
  #pagos .cu-media{order:1;grid-area:auto;aspect-ratio:4/3}
  #pagos .cu-media:after{font-size:1.7rem;top:12px;right:16px}
  #pagos .cu-panel,#pagos .cu-step:nth-child(even) .cu-panel{order:2;grid-area:auto;align-self:stretch;justify-self:stretch;width:auto;margin:-40px 10px 0}

  /* Panel compacto y con texto ≥ 15px */
  #pagos .cu-panel__head{padding:10px 16px;gap:10px}
  #pagos .cu-avatar{width:30px;height:30px;font-size:.875rem}
  #pagos .cu-panel__title{font-size:1rem}
  #pagos .cu-panel__body{padding:14px 16px;gap:11px}
  #pagos .cu-panel__foot{padding:9px 10px 10px;font-size:.75rem;letter-spacing:.05em}
  #pagos .cu-rot{font-size:.8125rem;letter-spacing:.08em}
  #pagos .cu-fig{gap:3px}
  #pagos .cu-cifra{font-size:clamp(1.6rem,7.4vw,2rem)}
  #pagos .cu-checks{gap:7px;font-size:.9375rem}
  #pagos .cu-checks li{line-height:1.35}
  #pagos .cu-badge{padding:7px 13px 7px 10px;font-size:.9375rem}
  #pagos .cu-toast{padding:9px 12px}
  #pagos .cu-toast__t b{font-size:1rem}
  #pagos .cu-toast__t span,#pagos .cu-sub,#pagos .cu-rows li,#pagos .cu-tiles span{font-size:.9375rem}
  #pagos .cu-rows li{padding:8px 0}
  #pagos .cu-tiles{gap:8px}
  #pagos .cu-tiles li{padding:10px 12px;gap:2px}
  #pagos .cu-tiles svg{width:20px;height:20px;margin-bottom:4px}
  #pagos .cu-tiles b{font-size:.9375rem}
  #pagos .cu-bars{height:42px}

  /* Carrusel (sin ?reduce): subgrid → título, imagen y panel alineados entre tarjetas */
  html:not(.reduce) #pagos .cu-stage{--cw:min(84vw,430px);display:grid;grid-auto-flow:column;grid-auto-columns:var(--cw);grid-template-rows:auto auto auto;gap:0 14px;
    overflow-x:auto;scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch;overscroll-behavior-x:contain;scrollbar-width:none;
    margin-inline:calc(var(--gut)*-1);padding:4px max(var(--gut),calc(100vw - var(--cw) - var(--gut))) 8px var(--gut);scroll-padding-inline:var(--gut)}
  html:not(.reduce) #pagos .cu-stage::-webkit-scrollbar{display:none}
  html:not(.reduce) #pagos .cu-step,html:not(.reduce) #pagos .cu-step:nth-child(even){display:grid;grid-row:1/span 3;grid-template-rows:subgrid;row-gap:0;scroll-snap-align:start;scroll-snap-stop:always}
  html:not(.reduce) #pagos .cu-step .cu-tab{align-self:start}
  html.js:not(.reduce) #pagos.cu--car .cu-dots{display:flex;justify-content:center;margin-top:8px}
  #pagos .cu-dot{width:44px;height:44px;padding:0;border:0;background:none;display:grid;place-items:center;cursor:pointer}
  #pagos .cu-dot i{position:relative;overflow:hidden;width:8px;height:8px;border-radius:999px;background:var(--line-2);transition:width .6s var(--ease),background-color .4s}
  #pagos .cu-dot.is-active i{width:30px;background:rgba(244,213,138,.24)}
  /* el punto activo se llena de oro, con el frente claro y redondeado de un líquido */
  #pagos .cu-dot i:after{content:"";position:absolute;inset:0 0 0 -8px;border-radius:999px;transform:translateX(-102%);
    background:linear-gradient(90deg,#b0843a 0%,#d8a646 45%,#f4d58a 82%,#fff3c4 100%);box-shadow:0 0 10px rgba(244,213,138,.7)}
  #pagos .cu-dot.is-active i:after{transform:none;transition:transform 1.15s cubic-bezier(.3,.7,.2,1) .12s}

  /* Oro líquido sin WebGL: las tarjetas en espera quedan bajo un velo de tinta; al activarse una, un frente de oro
     (menisco claro + cuerpo translúcido que se desvanece) sube y DESTAPA la foto. El JS recorta las tres capas con la misma curva. */
  #pagos.cu--car .cu-wv{display:block;position:absolute;inset:0;z-index:3;pointer-events:none;overflow:hidden}
  #pagos .cu-wv i{display:block;position:absolute;inset:0;font-style:normal}
  #pagos .cu-wv__veil{opacity:0;background:linear-gradient(180deg,rgba(5,9,15,.5) 0%,rgba(7,17,27,.6) 100%);transition:opacity .7s var(--ease)}
  #pagos.cu--car.cu--idle .cu-wv__veil,#pagos.cu--car .cu-step:not(.is-active) .cu-wv__veil{opacity:1}
  #pagos.cu--car .cu-step.is-sweep .cu-wv__veil{opacity:1;transition:none}
  #pagos .cu-wv__body{--y:110%;opacity:0;
    background:linear-gradient(180deg,rgba(250,222,146,.88) var(--y),rgba(232,182,84,.66) calc(var(--y) + 5%),rgba(206,150,52,.4) calc(var(--y) + 13%),rgba(196,140,44,.14) calc(var(--y) + 22%),rgba(196,140,44,0) calc(var(--y) + 30%))}
  #pagos .cu-wv__line{opacity:0;filter:drop-shadow(0 0 4px rgba(255,222,146,.95)) drop-shadow(0 -5px 16px rgba(244,213,138,.6))}
  #pagos .cu-wv__line i{background:#fff3c4}
  /* el encabezado de las tarjetas en espera se atenúa: lo que asoma al borde es un anticipo, no un rótulo suelto */
  #pagos.cu--car .cu-step .cu-tab{transition:opacity .7s var(--ease)}
  #pagos.cu--car .cu-step:not(.is-active) .cu-tab{opacity:.35}
  #pagos.cu--car .cu-go{display:flex;justify-content:center;margin-top:6px}
}
@media (min-width:700px) and (max-width:1099px){
  html.reduce #pagos .cu-stage{grid-template-columns:repeat(2,minmax(0,1fr));gap:0 28px}
  html.reduce #pagos .cu-step,html.reduce #pagos .cu-step:nth-child(even){display:grid;grid-row:span 3;grid-template-rows:subgrid;row-gap:0;margin-bottom:56px}
  html.reduce #pagos .cu-step .cu-tab{align-self:end}
}
@media (max-width:899px){
  /* Medios VERTICALES: tarjeta alta, la persona completa arriba y el panel de vidrio sobre la franja oscura de abajo */
  /* el alto de la foto cede para que rótulo, título, foto, panel, puntos y botón entren en el alto visible:
     bajo la barra de navegación en 844 px y completos (con la barra oculta) en 664 px */
  #pagos .cu-media{aspect-ratio:auto;height:clamp(180px,calc(100vh - 546px),388px);height:clamp(180px,calc(100svh - 546px),388px)}
  #pagos .cu-tab{margin-bottom:10px}
  #pagos .cu-tab__t{font-size:1.5rem}   /* el título más largo cabe en un renglón a 390 px */
  /* el texto del paso usa todo el ancho de la tarjeta: ningún paso pasa de 2 líneas y la fila no reserva alto de más */
  #pagos .cu-tab__d{grid-column:1/-1}
  #pagos .cu-tab__d p{font-size:.9375rem;line-height:1.45}
  #pagos .cu-tab__d p:before{height:7px}
  /* puntos y botón en un mismo renglón */
  html.js:not(.reduce) #pagos.cu--car .cu-box{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center}
  html.js:not(.reduce) #pagos.cu--car .cu-label,html.js:not(.reduce) #pagos.cu--car .cu-stage{grid-column:1/-1;min-width:0}
  html.js:not(.reduce) #pagos.cu--car .cu-dots{justify-content:flex-start;margin:2px 0 0 -11px}
  html.js:not(.reduce) #pagos.cu--car .cu-go{margin-top:2px}

  /* Ventanas de video: carrusel con medios verticales (2:3, sin recorte) */
  html:not(.reduce) #pagos .cu-wins{--cw:min(78vw,340px);--pad:20px;height:auto;display:grid;grid-auto-flow:column;grid-auto-columns:var(--cw);gap:12px;
    overflow-x:auto;scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch;overscroll-behavior-x:contain;scrollbar-width:none;
    margin-inline:calc(var(--gut)*-1);padding:4px max(var(--gut),calc(100vw - var(--cw) - var(--gut))) 10px var(--gut);scroll-padding-inline:var(--gut)}
  html:not(.reduce) #pagos .cu-wins::-webkit-scrollbar{display:none}
  html:not(.reduce) #pagos .cu-win{aspect-ratio:2/3;max-height:72vh;max-height:72svh;scroll-snap-align:start;scroll-snap-stop:always}
  html.reduce #pagos .cu-wins{height:auto;display:grid;grid-template-columns:minmax(0,1fr);gap:16px;--pad:20px}
  html.reduce #pagos .cu-win{aspect-ratio:4/5}
  #pagos .cu-win__m{inset:0}
  #pagos .cu-win__m img,#pagos .cu-win__v{object-position:50% 50%}
  #pagos .cu-win__tx{width:auto;right:var(--pad)}
  #pagos .cu-win__t{font-size:1.6rem}
  #pagos .cu-win__shade{background:linear-gradient(180deg,rgba(5,9,15,.46) 0%,rgba(5,9,15,.06) 20%,rgba(5,9,15,0) 46%,rgba(5,9,15,.5) 64%,rgba(5,9,15,.86) 100%)}
  html.js:not(.reduce) #pagos.cu--wins .cu-wins__ind{display:flex;justify-content:center;margin-top:2px}
  #pagos .cu-wins__ind button{width:44px;height:44px;padding:0;border:0;background:none;display:grid;place-items:center;cursor:pointer}
  #pagos .cu-wins__ind i{position:relative;overflow:hidden;width:8px;height:8px;border-radius:999px;background:var(--line-2);transition:width .6s var(--ease),background-color .4s}
  #pagos .cu-wins__ind .is-on i{width:30px;background:rgba(244,213,138,.24)}
  #pagos .cu-wins__ind i:after{content:"";position:absolute;inset:0 0 0 -8px;border-radius:999px;transform:translateX(-102%);
    background:linear-gradient(90deg,#b0843a 0%,#d8a646 45%,#f4d58a 82%,#fff3c4 100%)}
  #pagos .cu-wins__ind .is-on i:after{transform:none;transition:transform 1.15s cubic-bezier(.3,.7,.2,1) .12s}
  #pagos .cu-media img,#pagos .cu-vid{object-position:50% 0%}
  #pagos .cu-media__in:after{background:linear-gradient(180deg,rgba(5,9,15,.22) 0%,rgba(5,9,15,0) 22%,rgba(5,9,15,0) 56%,rgba(5,9,15,.7) 100%)}
  /* el panel de vidrio monta 96 px sobre la franja oscura de la foto vertical (la persona queda arriba, a la vista) */
  #pagos .cu-panel,#pagos .cu-step:nth-child(even) .cu-panel{margin-top:-96px}
  #pagos .cu-panel__head{padding-block:7px}
  #pagos .cu-panel__body{padding:10px 16px;gap:7px}
  #pagos .cu-panel__foot{padding:5px 10px 6px}
  #pagos .cu-rows li{padding:6px 0}
  #pagos .cu-checks{gap:5px}
  #pagos .cu-badge{padding-block:6px}
  #pagos .cu-tiles{gap:6px}
  #pagos .cu-tiles li{padding:8px 12px;grid-template-columns:auto minmax(0,1fr);column-gap:10px;align-items:center}
  #pagos .cu-tiles svg{grid-row:1/span 2;margin-bottom:0}
  /* Cabecera: rótulo y «01» en la misma línea; el logotipo ocupa su renglón */
  #pagos .cu-head__top{--lw:clamp(280px,80vw,480px);align-items:center}
  #pagos .cu-title{grid-column:1/-1}
  #pagos .cu-head__top:after{display:none}
  #pagos .cu-num{grid-area:1/2;align-self:center;font-size:clamp(2.6rem,9vw,3.6rem);line-height:.8;padding-bottom:.06em}
  #pagos .cu-head__cols{grid-template-columns:minmax(0,1fr);gap:26px}
  #pagos .cu-label{margin-bottom:12px}
  #pagos .cu-ctas .btn{flex:1 1 260px}
}
@media (max-width:759px){
  #pagos .cu-ctas .btn{flex:1 1 100%}
}

/* ============================================================
   Celular (<900px): que el carrusel se descubra solo
   · la tarjeta siguiente asoma ≥54 px (15vw) · contador «01 — 04» y flechas de 44 px (patrón .nv)
   · los puntos se compactan (indicador; toda la tira es un solo blanco táctil que lleva al punto más cercano)
   · pista «Desliza →» la primera vez que el escenario entra en vista
   ============================================================ */
@media (max-width:899.98px){
  #pagos .cu-eyebrow{font-size:.75rem}                 /* texto ≥12 px en celular */
  #pagos .cu-cifra small{font-size:max(.44em,12px)}
  html:not(.reduce) #pagos .cu-stage{--cw:min(calc(100vw - var(--gut) - 14px - max(54px,15vw)),430px)}
  html:not(.reduce) #pagos .cu-wins{--cw:min(calc(100vw - var(--gut) - 12px - max(54px,15vw)),340px)}
  /* la tarjeta es más angosta: el panel de vidrio aprovecha más ancho */
  html:not(.reduce) #pagos .cu-panel,html:not(.reduce) #pagos .cu-step:nth-child(even) .cu-panel{margin-inline:6px}
  /* fila nueva de controles: la foto cede su alto para que el paso siga entrando en la pantalla */
  html.js:not(.reduce) #pagos.cu--car .cu-media{height:clamp(170px,calc(100vh - 596px),388px);height:clamp(170px,calc(100svh - 596px),388px)}

  /* Escenario: [puntos ……… ‹ 01 — 04 ›] y debajo el botón */
  html.js:not(.reduce) #pagos.cu--car .cu-dots{grid-column:1;grid-row:3;align-self:center;justify-self:start;margin:0 0 0 -7px;cursor:pointer;-webkit-tap-highlight-color:transparent}
  html.js:not(.reduce) #pagos.cu--car .cu-nav{grid-column:2;grid-row:3;display:flex}
  html.js:not(.reduce) #pagos.cu--car .cu-go{grid-column:1/-1;grid-row:4;margin-top:10px}
  html.js:not(.reduce) #pagos.cu--car .cu-dot{width:22px;pointer-events:none}
  html.js:not(.reduce) #pagos.cu--car .cu-dot.is-active{width:44px}

  #pagos .cu-nav{align-items:center;gap:4px;margin-right:-2px}
  #pagos .cu-arrow{flex:none;width:44px;height:44px;padding:0;border-radius:50%;border:1px solid var(--line-2);background:rgba(243,234,219,.04);color:var(--cream);
    display:grid;place-items:center;cursor:pointer;-webkit-tap-highlight-color:transparent;transition:border-color .4s,color .4s,opacity .4s,background-color .4s}
  #pagos .cu-arrow svg{width:19px;height:19px}
  #pagos .cu-arrow:active{background:rgba(244,213,138,.14);border-color:var(--gold-2);color:var(--gold-2)}
  #pagos .cu-arrow[disabled]{opacity:.3;cursor:default}
  #pagos .cu-nav__n{display:flex;align-items:center;justify-content:center;gap:7px;min-width:5.2em;font-size:.875rem;line-height:1;color:var(--cream-2);white-space:nowrap}
  #pagos .cu-nav__n b{color:var(--gold-2)}
  #pagos .cu-nav__n i{font-style:normal;color:var(--mute)}

  /* Pista «Desliza →»: píldora de vidrio sobre la tarjeta que asoma; no recibe toques */
  html.js:not(.reduce) #pagos.cu--car .cu-hint{display:inline-flex;position:absolute;z-index:6;right:calc(10px - var(--gut));top:var(--hy,40%);transform:translate(12px,-50%);opacity:0;
    align-items:center;gap:8px;padding:10px 14px 10px 16px;border-radius:999px;border:1px solid rgba(244,213,138,.5);pointer-events:none;
    background:rgba(5,9,15,.72);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);box-shadow:0 14px 34px -12px rgba(0,0,0,.85),0 0 26px -8px rgba(216,166,70,.45);
    font:700 .8125rem/1 var(--sans);letter-spacing:.08em;text-transform:uppercase;color:var(--gold-2);transition:opacity .5s var(--ease),transform .7s var(--ease)}
  #pagos .cu-hint svg{width:16px;height:16px}
  html.js:not(.reduce) #pagos.cu--car .cu-hint.is-on{opacity:1;transform:translate(0,-50%)}
  #pagos .cu-hint.is-on svg{animation:cu-hint 1.3s var(--ease) infinite}
  @keyframes cu-hint{0%,100%{transform:none}45%{transform:translateX(5px)}}

  /* Ventajas: [puntos ……… ‹ 01 — 03 ›] */
  html.js:not(.reduce) #pagos.cu--wins .cu-wbar{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-top:4px}
  html.js:not(.reduce) #pagos.cu--wins .cu-wins__ind{margin:0 0 0 -7px;cursor:pointer;-webkit-tap-highlight-color:transparent}
  html.js:not(.reduce) #pagos.cu--wins .cu-wins__ind button{width:22px;pointer-events:none}
  html.js:not(.reduce) #pagos.cu--wins .cu-wins__ind button.is-on{width:44px}
  html.js:not(.reduce) #pagos.cu--wins .cu-wnav{display:flex}
}
/* teléfonos angostos (<400px): la tarjeta mide ~234–300 px; el panel se compacta para que nada se desborde */
@media (max-width:399.98px){
  html:not(.reduce) #pagos .cu-panel,html:not(.reduce) #pagos .cu-step:nth-child(even) .cu-panel{margin-inline:4px}
  #pagos .cu-panel__head{padding:7px 12px;gap:8px}
  #pagos .cu-avatar{width:26px;height:26px;font-size:.8125rem}
  #pagos .cu-panel__title{font-size:.9375rem}
  #pagos .cu-live{gap:6px}
  #pagos .cu-panel__body{padding:10px 12px}
  #pagos .cu-tiles li{padding:8px 9px;column-gap:7px}
  #pagos .cu-tiles svg{grid-row:1;width:18px;height:18px}
  #pagos .cu-tiles span{grid-column:1/-1;font-size:.875rem;-webkit-hyphens:auto;hyphens:auto;overflow-wrap:break-word}
}
@media (max-width:420px){
  #pagos .cu-num{-webkit-text-stroke-width:.8px}
}

/* DUEÑO (13-nov, captura de iPhone): "queda encimada, no se ven las imágenes de atrás".
   En celular la foto/video del paso se ve completa y el panel solo la pisa un filo. No volver a encimar. */
@media (max-width:899.98px){
  #pagos .cu-media,
  html.js:not(.reduce) #pagos.cu--car .cu-media{height:clamp(250px,68vw,340px)}
  #pagos .cu-panel,#pagos .cu-step:nth-child(even) .cu-panel{margin-top:-26px}
  #pagos .cu-media img,#pagos .cu-vid{object-position:50% 30%}
}