/* Píldora POS · Página de inicio: recorrido visual */
.ld-wrap { max-width: 1120px; margin: 0 auto; padding: 0 24px; }
.ld-eyebrow { font-size: 13px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--pill); }
.ld-go { justify-self: start; display: inline-flex; gap: 8px; align-items: center; background: var(--pill); color: var(--teal-ink); border: 0; border-radius: 999px; padding: 12px 20px; font: 700 15px var(--body); cursor: pointer; box-shadow: 0 10px 30px -12px rgba(255, 201, 60, .7); }
.ld-go span { display: inline-block; animation: ld-bob 1.6s ease-in-out infinite; }
@keyframes ld-bob { 50% { transform: translateY(3px); } }

/* Revelado al hacer scroll */
.ld-rv { opacity: 0; transform: translateY(36px); transition: opacity .8s ease var(--d, 0ms), transform .8s cubic-bezier(.2, .7, .2, 1) var(--d, 0ms); }
.ld-rv.in { opacity: 1; transform: none; }

/* 1 · Lanzador */
.ld-show { padding: 40px 0 110px; color: #EAF3F1; }
.ld-head { text-align: center; display: grid; gap: 12px; justify-items: center; margin-bottom: 44px; }
.ld-head h2 { margin: 0; color: #fff; font-size: clamp(30px, 4.6vw, 52px); line-height: 1.04; max-width: 16ch; }
.ld-head p { margin: 0; color: #C9DEDA; font-size: 18px; max-width: 54ch; }
.ld-browser { background: #F6F8F7; border-radius: 22px; overflow: hidden; box-shadow: 0 40px 90px -40px rgba(0, 0, 0, .7), 0 0 0 1px rgba(255, 255, 255, .08); transform-origin: 50% 0; }
.ld-browser.ld-rv { transform: perspective(1400px) rotateX(16deg) translateY(60px) scale(.94); }
.ld-browser.ld-rv.in { transform: perspective(1400px) rotateX(0) translateY(0) scale(1); transition-duration: 1.1s; }
.ld-bar { display: flex; align-items: center; gap: 6px; padding: 12px 16px; background: #fff; border-bottom: 1px solid var(--line-soft); }
.ld-bar i { width: 10px; height: 10px; border-radius: 50%; background: #E4E8E6; }
.ld-bar i:first-child { background: #F28B82; } .ld-bar i:nth-child(2) { background: #FFC93C; } .ld-bar i:nth-child(3) { background: #7FD3A8; }
.ld-bar span { margin: 0 auto; font-size: 12.5px; color: var(--ink-3); background: var(--bg); padding: 4px 14px; border-radius: 999px; }
.ld-screen { display: grid; grid-template-columns: 64px 1fr; min-height: 420px; }
.ld-mside { background: var(--teal-ink); display: grid; align-content: start; gap: 12px; padding: 18px 16px; }
.ld-mlogo { width: 30px; height: 14px; border-radius: 99px; background: linear-gradient(90deg, #fff 50%, var(--pill) 50%); margin-bottom: 10px; }
.ld-mside b { height: 8px; border-radius: 4px; background: rgba(255, 255, 255, .18); }
.ld-mside b.on { background: var(--pill); }
.ld-mmain { padding: 26px 30px 34px; color: var(--ink); }
.ld-mhi { margin: 0; color: var(--ink-3); font-weight: 600; font-size: 13px; }
.ld-mh1 { margin: 2px 0 22px; font: 700 26px var(--display); color: var(--teal-ink); }
.ld-mgrid { display: grid; grid-template-columns: repeat(6, 1fr); gap: 18px 10px; }
.ld-mtile { display: grid; justify-items: center; gap: 8px; opacity: 0; transform: translateY(18px) scale(.8); }
.ld-browser.in .ld-mtile { animation: ld-pop .55s cubic-bezier(.2, .9, .3, 1.3) calc(450ms + var(--d)) forwards; }
@keyframes ld-pop { to { opacity: 1; transform: none; } }
.ld-mtile span { width: 64px; height: 64px; border-radius: 17px; background: #fff; display: grid; place-items: center; box-shadow: 0 10px 22px -14px rgba(7, 46, 44, .45); }
.ld-mtile svg { width: 38px; height: 38px; }
.ld-mtile em { font-style: normal; font-weight: 600; font-size: 12.5px; text-align: center; line-height: 1.2; }

/* 2 · Recorrido con pantalla fija */
.ld-story { background: var(--bg); color: var(--ink); padding: 90px 0 40px; border-radius: 40px 40px 0 0; }
.ld-sgrid { display: grid; grid-template-columns: minmax(0, .72fr) minmax(0, 1.28fr); gap: 48px; align-items: start; }
.ld-steps { display: grid; padding: 18vh 0 28vh; }
.ld-step { min-height: 62vh; display: grid; align-content: center; gap: 12px; opacity: .28; transition: opacity .5s ease, transform .5s ease; transform: translateX(-8px); }
.ld-step.on { opacity: 1; transform: none; }
.ld-num { font: 700 14px var(--body); color: var(--teal); letter-spacing: .06em; }
.ld-step h3 { margin: 0; font-size: clamp(28px, 3.4vw, 42px); line-height: 1.05; color: var(--teal-ink); }
.ld-step p { margin: 0; font-size: 18px; color: var(--ink-2); max-width: 36ch; }
.ld-stage { position: sticky; top: 0; height: 100vh; display: grid; align-items: center; }
.ld-device { background: #fff; border-radius: 24px; overflow: hidden; box-shadow: 0 40px 80px -40px rgba(7, 46, 44, .45), 0 0 0 1px var(--line-soft); }
.ld-stitle { margin: 0 auto; font-weight: 700; font-size: 13px; color: var(--ink-2); }
.ld-dscreen { position: relative; height: 440px; background: #F6F8F7; overflow: hidden; }
.ld-scr { position: absolute; inset: 0; padding: 22px; opacity: 0; transform: translateY(30px) scale(.98); transition: opacity .45s ease, transform .55s cubic-bezier(.2, .7, .2, 1); pointer-events: none; }
.ld-scr.on { opacity: 1; transform: none; }
.ld-dots { display: flex; justify-content: center; gap: 8px; padding: 12px; }
.ld-dots i { width: 8px; height: 8px; border-radius: 99px; background: var(--line); transition: width .3s, background .3s; }
.ld-dots i.on { width: 26px; background: var(--teal); }
.ld-th { margin: 0 0 12px; font: 700 15px var(--display); color: var(--teal-ink); }
.ld-panel { background: #fff; border: 1px solid var(--line-soft); border-radius: 16px; padding: 18px; height: 100%; display: grid; align-content: start; gap: 10px; position: relative; }

/* Vender */
.ld-pos { display: grid; grid-template-columns: 1.3fr 1fr; gap: 14px; height: 100%; }
.ld-tiles { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; align-content: start; }
.ld-pt { background: #fff; border: 1px solid var(--line-soft); border-radius: 14px; padding: 10px; display: grid; gap: 4px; font-size: 12.5px; }
.ld-pt i { height: 46px; border-radius: 10px; background: var(--c); opacity: .85; }
.ld-pt span { font-weight: 600; line-height: 1.2; }
.ld-pt b { color: var(--teal); }
.ld-scr.on .ld-pt.tap { animation: ld-tap .5s ease var(--d); }
@keyframes ld-tap { 40% { transform: scale(.92); box-shadow: 0 0 0 3px var(--pill); } }
.ld-ticket { background: #fff; border: 1px solid var(--line-soft); border-radius: 14px; padding: 14px; display: grid; align-content: start; gap: 8px; }
.ld-tl { display: flex; justify-content: space-between; font-size: 13px; padding-bottom: 8px; border-bottom: 1px dashed var(--line); opacity: 0; transform: translateX(16px); }
.ld-scr.on .ld-tl { animation: ld-in .4s ease var(--d) forwards; }
@keyframes ld-in { to { opacity: 1; transform: none; } }
.ld-tt { display: flex; justify-content: space-between; align-items: baseline; margin-top: 6px; }
.ld-tt b { font: 700 26px var(--display); color: var(--teal-ink); }
.ld-pay { background: var(--teal); color: #fff; text-align: center; border-radius: 12px; padding: 12px; font-weight: 700; }
.ld-scr.on .ld-pay { animation: ld-pulse 1.4s ease 1.6s 2; }
@keyframes ld-pulse { 50% { box-shadow: 0 0 0 8px rgba(14, 94, 90, .18); } }

/* Inventario */
.ld-inv { display: grid; grid-template-columns: 1.1fr 1.4fr 32px; gap: 12px; align-items: center; font-size: 14px; padding: 8px 0; border-bottom: 1px solid var(--line-soft); position: relative; opacity: 0; }
.ld-scr.on .ld-inv { animation: ld-in .4s ease var(--d) forwards; }
.ld-inv b { text-align: right; }
.ld-barw { height: 8px; border-radius: 4px; background: var(--line-soft); overflow: hidden; }
.ld-barw i { display: block; height: 100%; width: 0; border-radius: 4px; background: var(--teal); transition: width 1s cubic-bezier(.2, .7, .2, 1) calc(var(--d) + 200ms); }
.ld-scr.on .ld-barw i { width: var(--w); }
.ld-inv.low .ld-barw i { background: var(--red, #D64545); }
.ld-inv.low b { color: var(--red, #D64545); }
.ld-inv em { grid-column: 1 / -1; font-style: normal; font-size: 12px; font-weight: 700; color: var(--red, #D64545); background: var(--red-soft, #FBE7E5); border-radius: 99px; padding: 2px 10px; justify-self: start; margin-top: -2px; }

/* Fiado */
.ld-cli { display: grid; grid-template-columns: 36px 1fr auto; gap: 12px; align-items: center; padding: 8px 0; border-bottom: 1px solid var(--line-soft); font-size: 14px; font-weight: 600; opacity: 0; }
.ld-scr.on .ld-cli { animation: ld-in .4s ease var(--d) forwards; }
.ld-av { width: 36px; height: 36px; border-radius: 50%; background: var(--teal-soft); color: var(--teal); display: grid; place-items: center; font-size: 12px; font-weight: 700; }
.ld-cli .neg { color: var(--red, #D64545); } .ld-cli .ok { color: var(--green, #1F8A55); }
.ld-toast { position: absolute; left: 18px; right: 18px; bottom: 18px; background: var(--teal-ink); color: #fff; border-radius: 12px; padding: 12px 14px; font-size: 13.5px; font-weight: 600; opacity: 0; transform: translateY(20px); }
.ld-scr.on .ld-toast { animation: ld-in .5s ease 1.1s forwards; }

/* Corte */
.ld-kpis { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.ld-kpis div { background: var(--bg); border-radius: 12px; padding: 12px; display: grid; gap: 2px; }
.ld-kpis span { font-size: 12px; color: var(--ink-3); }
.ld-kpis b { font: 700 22px var(--display); color: var(--teal-ink); }
.ld-chart { display: grid; grid-template-columns: repeat(7, 1fr); gap: 10px; align-items: end; height: 190px; margin-top: 10px; }
.ld-chart div { display: grid; grid-template-rows: 1fr auto; gap: 6px; height: 100%; text-align: center; font-size: 12px; color: var(--ink-3); }
.ld-chart i { align-self: end; height: 0; border-radius: 8px 8px 3px 3px; background: linear-gradient(180deg, var(--pill), #F5A623); transition: height .9s cubic-bezier(.2, .8, .2, 1) var(--d); }
.ld-scr.on .ld-chart i { height: var(--h); }
.ld-chart div:nth-child(6) i { background: linear-gradient(180deg, #2BC4A9, var(--teal)); }

/* CRM */
.ld-kb { grid-template-columns: repeat(3, 1fr); gap: 10px; align-content: stretch; }
.ld-kcol { background: var(--bg); border-radius: 12px; padding: 10px; display: grid; gap: 8px; align-content: start; position: relative; }
.ld-kcol p { margin: 0 0 2px; font-weight: 700; font-size: 13px; color: var(--ink-2); }
.ld-kcard { background: #fff; border: 1px solid var(--line-soft); border-radius: 10px; padding: 10px; font-size: 13.5px; font-weight: 600; display: grid; gap: 2px; box-shadow: 0 6px 14px -12px rgba(7, 46, 44, .5); }
.ld-kcard small { color: var(--teal); font-weight: 700; }
.ld-kslot { height: 58px; }
.ld-scr.on .ld-kcard.mover { animation: ld-move 1.6s cubic-bezier(.5, 0, .2, 1) .7s forwards; position: relative; z-index: 2; }
@keyframes ld-move { 0% { transform: none; } 25% { transform: translateY(-6px) rotate(-3deg); box-shadow: 0 18px 30px -14px rgba(7, 46, 44, .6); } 100% { transform: translate(calc(100% + 30px), 52px) rotate(0); box-shadow: 0 0 0 2px #1F9D63; } }

/* 3 · Datos */
.ld-strip { background: var(--bg); padding: 30px 0 90px; color: var(--ink); }
.ld-facts { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.ld-facts div { background: var(--teal-deep); border-radius: 22px; padding: 28px; display: grid; gap: 4px; color: #C9DEDA; }
.ld-facts b { font: 700 clamp(40px, 5vw, 58px)/1 var(--display); color: var(--pill); }
.pos-info { padding-top: 20px; }

@media (max-width: 900px) {
  .ld-mgrid { grid-template-columns: repeat(4, 1fr); }
  .ld-mtile:nth-child(n+13) { display: none; }
  .ld-screen { grid-template-columns: 1fr; }
  .ld-mside { display: none; }
  .ld-sgrid { grid-template-columns: 1fr; gap: 0; }
  .ld-stage { order: -1; top: 0; height: auto; z-index: 3; padding: 10px 24px 14px; margin: 0 -24px; background: var(--bg); box-shadow: 0 14px 18px -16px rgba(7, 46, 44, .25); }
  .ld-dscreen { height: 300px; }
  .ld-steps { padding: 4vh 0 30vh; }
  .ld-step { min-height: 60vh; align-content: end; padding-bottom: 4vh; }
  .ld-step h3 { font-size: 26px; } .ld-step p { font-size: 16px; }
  .ld-facts { grid-template-columns: 1fr; }
  .ld-show { padding-bottom: 70px; }
}
@media (max-width: 560px) {
  .ld-wrap { padding: 0 16px; }
  .ld-mmain { padding: 18px 14px 24px; }
  .ld-mgrid { grid-template-columns: repeat(3, 1fr); gap: 14px 6px; }
  .ld-mtile:nth-child(n+10) { display: none; }
  .ld-mtile span { width: 54px; height: 54px; }
  .ld-mh1 { font-size: 21px; }
  .ld-dscreen { height: 300px; }
  .ld-stage { padding: 8px 16px 12px; margin: 0 -16px; }
  .ld-ticket { padding: 10px; gap: 5px; }
  .ld-tl { font-size: 11.5px; padding-bottom: 5px; }
  .ld-pay { padding: 8px; }
  .ld-th { margin-bottom: 6px; }
  .ld-panel { padding: 12px; gap: 6px; }
  .ld-inv, .ld-cli { font-size: 12.5px; padding: 5px 0; }
  .ld-av { width: 30px; height: 30px; }
  .ld-cli { grid-template-columns: 30px 1fr auto; }
  .ld-scr { padding: 12px; }
  .ld-pos { grid-template-columns: 1fr 1fr; gap: 8px; }
  .ld-tiles { grid-template-columns: repeat(2, 1fr); gap: 6px; }
  .ld-pt:nth-child(n+5) { display: none; }
  .ld-pt i { height: 30px; }
  .ld-tt b { font-size: 20px; }
  .ld-chart { height: 130px; }
  .ld-kpis b { font-size: 17px; }
  .ld-kcard { font-size: 12px; padding: 8px; }
}
@media (prefers-reduced-motion: reduce) {
  .ld-rv, .ld-browser.ld-rv, .ld-mtile, .ld-tl, .ld-inv, .ld-cli, .ld-toast { opacity: 1 !important; transform: none !important; animation: none !important; transition: none !important; }
  .ld-scr, .ld-step, .ld-barw i, .ld-chart i { transition: none !important; }
  .ld-scr.on .ld-kcard.mover, .ld-scr.on .ld-pt.tap, .ld-scr.on .ld-pay, .ld-go span { animation: none !important; }
}

/* ---------- Entrada más limpia ---------- */
.auth-body .auth { min-height: 86vh; grid-template-columns: minmax(0, 1fr) minmax(0, 330px); gap: 40px; }
.auth-pitch h1.ld-h1 { font-size: clamp(32px, 4.4vw, 54px); max-width: 17ch; line-height: 1.04; }
.auth-card.ld-login { padding: 22px 22px 18px; gap: 12px; border-radius: 20px; align-self: center; }
.auth-card.ld-login h2 { font-size: 18px; margin: 0; }
.auth-card.ld-login input { padding-top: 8px; padding-bottom: 8px; }
.auth-card.ld-login .btn, .auth-card.ld-login button[type="submit"] { padding-top: 10px; padding-bottom: 10px; }
.auth-card.ld-login p, .auth-card.ld-login .auth-switch { font-size: 13px; }
.auth-pitch .auth-more { font-size: 14px; }
/* La explicación larga se queda solo con el comparativo */
.pos-info .pi-head p, .pos-info .pi-sub, .pos-info .pi-steps, .pos-info .pi-faq { display: none; }
.pos-info .pi-wrap { gap: 26px; }

/* ---------- Todas las funciones ---------- */
.ld-fx { background: var(--teal-ink); padding: 96px 0 110px; overflow: hidden; color: #EAF3F1; }
.ld-head--dark { margin-bottom: 34px; }
.ld-mqs { display: grid; gap: 12px; margin-bottom: 56px; mask-image: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent); -webkit-mask-image: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent); }
.ld-mq { overflow: hidden; }
.ld-mqt { display: flex; gap: 12px; width: max-content; animation: ld-mq 60s linear infinite; }
.ld-mq.rev .ld-mqt { animation-direction: reverse; animation-duration: 70s; }
@keyframes ld-mq { to { transform: translateX(-50%); } }
.ld-mqs:hover .ld-mqt { animation-play-state: paused; }
.ld-chip { display: inline-flex; align-items: center; gap: 10px; background: rgba(255, 255, 255, .07); border: 1px solid rgba(255, 255, 255, .1); border-radius: 999px; padding: 6px 16px 6px 6px; font-weight: 600; font-size: 14.5px; color: #fff; white-space: nowrap; }
.ld-chip svg { width: 34px; height: 34px; background: #fff; border-radius: 50%; padding: 5px; }
.ld-areas { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
.ld-area { background: rgba(255, 255, 255, .05); border: 1px solid rgba(255, 255, 255, .1); border-radius: 24px; padding: 22px; display: grid; gap: 6px; align-content: start; position: relative; overflow: hidden; transition: border-color .3s, background .3s; }
.ld-area::before { content: ""; position: absolute; top: -60px; right: -60px; width: 160px; height: 160px; border-radius: 50%; background: var(--ac); opacity: .18; filter: blur(30px); transition: opacity .4s; }
.ld-area:hover { border-color: rgba(255, 255, 255, .25); background: rgba(255, 255, 255, .08); }
.ld-area:hover::before { opacity: .35; }
.ld-area.big { grid-column: span 1; }
.ld-ahead { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; }
.ld-ahead h3 { margin: 0; color: #fff; font-size: 22px; }
.ld-ahead span { font: 700 13px var(--body); color: var(--teal-ink); background: var(--ac); border-radius: 999px; padding: 2px 10px; }
.ld-area p { margin: 0 0 10px; color: #A9C4BF; font-size: 14.5px; }
.ld-aicons { display: grid; grid-template-columns: repeat(auto-fill, minmax(82px, 1fr)); gap: 14px 8px; }
.ld-ai { display: grid; justify-items: center; gap: 6px; text-align: center; opacity: 0; transform: translateY(12px) scale(.85); }
.ld-area.in .ld-ai { animation: ld-pop .5s cubic-bezier(.2, .9, .3, 1.3) calc(var(--d, 0ms) + 250ms + var(--j)) forwards; }
.ld-ai span { width: 54px; height: 54px; border-radius: 15px; background: #fff; display: grid; place-items: center; box-shadow: 0 10px 20px -12px rgba(0, 0, 0, .6); transition: transform .2s; }
.ld-ai:hover span { transform: translateY(-3px) rotate(-4deg); }
.ld-ai svg { width: 32px; height: 32px; }
.ld-ai em { font-style: normal; font-size: 12.5px; font-weight: 600; color: #EAF3F1; line-height: 1.2; }
.ld-story { border-radius: 0; }

@media (max-width: 900px) {
  .auth-body .auth { grid-template-columns: 1fr; min-height: auto; padding-top: 32px; padding-bottom: 40px; gap: 24px; }
  .auth-card.ld-login { max-width: 380px; width: 100%; }
  .ld-areas { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ld-area.big { grid-row: auto; }
}
@media (max-width: 560px) {
  .ld-areas { grid-template-columns: 1fr; }
  .ld-fx { padding: 70px 0 80px; }
  .ld-aicons { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px 4px; }
  .ld-ai span { width: 46px; height: 46px; border-radius: 13px; }
  .ld-ai svg { width: 28px; height: 28px; }
  .ld-ai em { font-size: 11px; }
  .ld-chip { font-size: 13px; }
}
@media (prefers-reduced-motion: reduce) {
  .ld-mqt { animation: none !important; }
  .ld-ai { opacity: 1 !important; transform: none !important; animation: none !important; }
}