/**
 * funnel-ux.css | Estudio Graphica
 * Piezas compartidas del flujo de reserva (armar paquete, contrato, pago):
 * la barra de pasos, el aviso de "retomar donde quedaste" y la barra de
 * precio fija de /precios en celular. Las pinta assets/js/funnel-ux.js.
 *
 * Se carga junto a eg-ui.css y eg-pages.css (usa sus variables).
 */

/* ---------- Barra de pasos ---------- */
.steps{display:flex;align-items:flex-start;justify-content:center;gap:0;margin:28px auto;max-width:640px;padding:0;list-style:none}
.step{flex:1;text-align:center;position:relative;list-style:none}
.step::before{content:"";position:absolute;top:19px;left:-50%;width:100%;height:2px;background:var(--hair);z-index:0;transform-origin:left}
.step:first-child::before{display:none}
.step.done::before,.step.current::before{background:var(--ink)}
.step-num{position:relative;z-index:1;width:40px;height:40px;margin:0 auto 10px;border-radius:14px;display:grid;place-items:center;font:600 15px/1 var(--f);font-variant-numeric:tabular-nums;background:#fff;border:2px solid var(--hair);color:var(--muted);transition:background .45s var(--ease),border-color .45s var(--ease),color .3s}
.step-num svg{width:16px;height:16px}
.step.done .step-num{background:var(--ink);border-color:var(--ink);color:var(--y)}
.step.current .step-num{background:var(--y);border-color:var(--ink);color:var(--ink);animation:stepPop .6s var(--ease)}
@keyframes stepPop{0%{scale:.82}55%{scale:1.12}100%{scale:1}}
.step-label{font-size:12.5px;color:var(--muted);line-height:1.3}
.step.current .step-label{color:var(--ink);font-weight:600}
@media(max-width:480px){.step-label{font-size:10.5px}}

/* ---------- Aviso "retomar donde quedaste" ---------- */
.eg-retomar{display:none;align-items:center;gap:14px;background:var(--y);border-radius:22px;padding:16px 20px;margin:0 auto 26px;max-width:640px}
.eg-retomar.show{display:flex;animation:rise .6s var(--ease)}
.eg-retomar-icon{flex:none;display:grid;place-items:center;width:42px;height:42px;border-radius:14px;background:var(--ink);color:var(--y)}
.eg-retomar-icon svg{width:22px;height:22px}
.eg-retomar-txt{flex:1;font-size:14px;line-height:1.5;color:var(--ink)}
.eg-retomar-link{font:600 14px/1 var(--f);background:var(--ink);color:var(--y);padding:13px 20px;border-radius:999px;text-decoration:none;white-space:nowrap;transition:transform .2s var(--ease),background .3s}
.eg-retomar-link:hover{background:#000}
.eg-retomar-link:active{transform:scale(.96)}
@media(max-width:480px){.eg-retomar{flex-wrap:wrap}}

/* ---------- Barra de precio fija (solo /precios, solo celular) ---------- */
.eg-sticky-bar{display:none;position:fixed;left:50%;translate:-50% 0;bottom:calc(14px + env(safe-area-inset-bottom,0px));width:min(520px,calc(100% - 24px));z-index:60;align-items:center;justify-content:space-between;gap:12px;padding:10px 10px 10px 22px;border-radius:999px;background:rgba(255,255,255,.7);border:1px solid rgba(255,255,255,.7);-webkit-backdrop-filter:blur(20px) saturate(190%);backdrop-filter:blur(20px) saturate(190%);box-shadow:0 18px 40px -16px rgba(24,24,24,.45),inset 0 1px 0 rgba(255,255,255,.9)}
.eg-sticky-info{display:flex;flex-direction:column;min-width:0}
.eg-sticky-name{font-size:11.5px;color:var(--muted);font-weight:500;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.eg-sticky-price{font:700 19px/1.15 var(--f);letter-spacing:-.02em;color:var(--ink);white-space:nowrap;font-variant-numeric:tabular-nums}
.eg-sticky-btn{font:600 15px/1 var(--f);padding:0 24px;min-height:50px;border-radius:999px;border:0;background:var(--ink);color:var(--paper);cursor:pointer;white-space:nowrap;flex-shrink:0;transition:background .3s,color .3s,transform .2s var(--ease)}
.eg-sticky-btn:hover{background:var(--y);color:var(--ink)}
.eg-sticky-btn:active{transform:scale(.96)}
@media(max-width:880px){
  .eg-sticky-bar{display:flex;animation:dockIn .9s var(--ease) .6s backwards}
  body.eg-has-sticky-bar{padding-bottom:96px}
}
@media(prefers-reduced-transparency:reduce){.eg-sticky-bar{-webkit-backdrop-filter:none;backdrop-filter:none;background:#fff}}