/* RYSTEN SAB · landing-showcase.css — Página pública de ventas: botón de acceso, carrusel de beneficios,
   Smart Vision con imagen arriba y "Cómo funciona" en pasos deslizables. Cargar DESPUÉS de landing-refresh.css. */

:root {
  --sc-navy: #0b2a46;
  --sc-ink: #102a43;
  --sc-green: #0d9b73;
  --sc-green-dark: #0a7d5d;
  --sc-line: #dde6ee;
  --sc-text: #33495f;
  --sc-app: #0e1c2c;
  --sc-app-2: #15283c;
  --sc-app-line: #243b53;
  --sc-app-text: #c9d7e4;
  --sc-up: #3ddc97;
  --sc-down: #ff6b6b;
}

/* ───────── 1. Botón "Iniciar sesión" siempre visible ───────── */
.topbar #top-login.login-link {
  display: inline-flex !important; align-items: center; gap: .45rem;
  min-height: 42px; padding: 0 1rem; border: 1.5px solid var(--sc-navy); border-radius: 11px;
  color: var(--sc-navy) !important; background: #fff; font-size: .86rem; font-weight: 750; text-decoration: none;
  transition: background .2s, color .2s;
}
.topbar #top-login.login-link::before {
  content: ""; width: 16px; height: 16px; background: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='8' r='4'/%3E%3Cpath d='M4 21a8 8 0 0 1 16 0'/%3E%3C/svg%3E") center / contain no-repeat;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='8' r='4'/%3E%3Cpath d='M4 21a8 8 0 0 1 16 0'/%3E%3C/svg%3E") center / contain no-repeat;
}
.topbar #top-login.login-link:hover { background: var(--sc-navy); color: #fff !important; }
@media (max-width: 600px) {
  .topbar .topbar-actions { display: flex !important; margin-left: auto; gap: .5rem; }
  .topbar .topbar-actions .demo-cta { display: none !important; }       /* la prueba gratis ya está en la barra inferior */
  .topbar #top-login.login-link { min-height: 40px; padding: 0 .85rem; font-size: .86rem; white-space: nowrap; }
  .topbar #top-login.login-link span { display: none; }
  .topbar #top-login.login-link::after { content: "Entrar"; }
  .topbar .mobile-nav { margin-left: .25rem !important; }
}

/* ───────── 2. Carrusel de beneficios ───────── */
.lp-showcase {
  max-width: 1180px; margin: 3.5rem auto 4rem; padding: 0 24px;
  display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 2.5rem; align-items: center;
}
.lp-sc-tabs { display: flex; flex-direction: column; gap: .35rem; }
.lp-sc-tab {
  position: relative; display: grid; grid-template-columns: 2.4rem 1fr; gap: .2rem .6rem; align-items: start;
  width: 100%; padding: .85rem 1rem .95rem; text-align: left; cursor: pointer;
  background: transparent; border: 1px solid transparent; border-radius: 14px; color: var(--sc-ink); font: inherit;
  transition: background .25s, border-color .25s, box-shadow .25s;
}
.lp-sc-tab:hover { background: #fff; }
.lp-sc-tab i { font-style: normal; font-weight: 800; font-size: .78rem; color: #8aa0b4; padding-top: .2rem; letter-spacing: .04em; }
.lp-sc-tab b { display: block; font-size: 1.02rem; line-height: 1.3; font-weight: 750; color: #4a627a; transition: color .25s; }
.lp-sc-tab small { display: block; max-height: 0; overflow: hidden; opacity: 0; margin-top: 0; color: var(--sc-text); font-size: .92rem; line-height: 1.5; transition: max-height .4s ease, opacity .3s, margin-top .3s; }
.lp-sc-tab.is-active { background: #fff; border-color: var(--sc-line); box-shadow: 0 14px 30px -18px rgba(11, 42, 70, .35); }
.lp-sc-tab.is-active i { color: var(--sc-green); }
.lp-sc-tab.is-active b { color: var(--sc-ink); }
.lp-sc-tab.is-active small { max-height: 7rem; opacity: 1; margin-top: .35rem; }
.lp-sc-bar { position: absolute; left: 1rem; right: 1rem; bottom: 0; height: 3px; border-radius: 3px; background: transparent; overflow: hidden; }
.lp-sc-tab.is-active .lp-sc-bar { background: #e7eef4; }
.lp-sc-tab.is-active .lp-sc-bar::after { content: ""; position: absolute; inset: 0; background: var(--sc-green); transform-origin: left; transform: scaleX(0); }
.lp-showcase.is-playing .lp-sc-tab.is-active .lp-sc-bar::after { animation: lp-sc-progress var(--lp-sc-ms, 6500ms) linear forwards; }
.lp-showcase.is-paused .lp-sc-tab.is-active .lp-sc-bar::after { animation-play-state: paused; }
@keyframes lp-sc-progress { to { transform: scaleX(1); } }

.lp-sc-stage { min-width: 0; position: relative; }
.lp-sc-track {
  display: flex; overflow-x: auto; scroll-snap-type: x mandatory; scroll-behavior: smooth;
  border-radius: 22px; scrollbar-width: none; overscroll-behavior-x: contain;
}
.lp-sc-track::-webkit-scrollbar { display: none; }
.lp-sc-slide {
  flex: 0 0 100%; margin: 0; scroll-snap-align: center; scroll-snap-stop: always;
  aspect-ratio: 16 / 11; position: relative; overflow: hidden; border-radius: 22px;
  background: radial-gradient(120% 90% at 85% 0%, #1d4a6b 0%, var(--sc-navy) 55%, #071a2c 100%);
  display: flex; align-items: center; justify-content: center; padding: 6%;
}
.lp-sc-photo { padding: 0; background: #071b2b; }
.lp-sc-photo img { width: 100%; height: 100%; object-fit: cover; display: block; }
.lp-sc-photo figcaption { position: absolute; right: 12px; bottom: 10px; padding: .25rem .6rem; border-radius: 999px; background: rgba(7, 27, 43, .72); color: #cfe0ec; font-size: .7rem; }

/* Copia de comprobante: maqueta visual basada en la ventana de impresión y
   datos ficticios. Es una explicación comercial; no consulta operaciones ni
   activa una impresión desde la página pública. */
.lp-sc-copy-receipt{padding:5.5%;background:radial-gradient(120% 95% at 90% 0,#1b5868 0,var(--sc-navy) 55%,#071a2c 100%)}
.lp-copy-window{width:min(100%,520px);overflow:hidden;border:1px solid #4f7891;border-radius:14px;background:#101923;box-shadow:0 20px 40px #0008;color:#eaf6ff}.lp-copy-window>header{display:flex;justify-content:space-between;align-items:center;padding:.75em 1em;border-bottom:1px solid #2b5068;font-weight:800}.lp-copy-window>header i{font-style:normal;font-size:1.3em}.lp-copy-window-body{display:grid;grid-template-columns:1.1fr .9fr;gap:1em;align-items:center;padding:1em}.lp-copy-window-body section{display:grid;gap:.55em}.lp-copy-window-body small{color:#8eb7cf;font-weight:800;letter-spacing:.08em}.lp-copy-window-body section>b{font-size:1.12em;color:#fff}.lp-copy-window-body p{margin:0;color:#c5d9e8}.lp-copy-window-body button{justify-self:start;border:0;border-radius:7px;padding:.65em .85em;background:#19a875;color:#fff;font:800 .88em inherit}.lp-copy-ticket{display:grid;gap:.35em;padding:.75em;background:#fff;color:#000;text-align:center;font:800 .65em/1.25 Arial,sans-serif;box-shadow:0 5px 16px #0008}.lp-copy-ticket img{justify-self:center;width:auto;height:28px;max-width:100px;object-fit:contain;filter:grayscale(1) contrast(1.5)}.lp-copy-ticket>b{font-size:1.05em}.lp-copy-ticket hr{width:100%;margin:.25em 0;border:0;border-top:1px dashed #000}.lp-copy-ticket strong{display:block;padding:.35em;background:#000;color:#fff;font-size:1.3em}.lp-copy-ticket em{font-style:normal;font-weight:900}

.lp-sc-tabs { grid-column: 1; grid-row: 1 / span 2; }
.lp-sc-stage { grid-column: 2; grid-row: 1; }
.lp-sc-controls { grid-column: 2; grid-row: 2; display: flex; align-items: center; justify-content: center; gap: 1rem; margin-top: -1.25rem; }
.lp-sc-dots { display: none; gap: .4rem; }
.lp-sc-dots i { width: 7px; height: 7px; border-radius: 99px; background: #c3d0dc; transition: width .3s, background .3s; }
.lp-sc-dots i.is-active { width: 22px; background: var(--sc-green); }
.lp-sc-pause { display: inline-flex; align-items: center; gap: .4rem; width: 36px; height: 36px; justify-content: center; border-radius: 99px; border: 1px solid var(--sc-line); background: #fff; color: var(--sc-ink); cursor: pointer; }
.lp-sc-pause svg { width: 14px; height: 14px; fill: currentColor; }
.lp-sc-pause .i-play, .lp-showcase.is-paused .lp-sc-pause .i-pause { display: none; }
.lp-showcase.is-paused .lp-sc-pause .i-play { display: inline; }
.lp-showcase:not(.has-autoplay) .lp-sc-pause { display: none; }

/* Maquetas: imitan las pantallas reales del sistema con datos de demostración */
.lp-mock { width: 100%; max-width: 520px; color: var(--sc-app-text); font-size: clamp(.7rem, 1.05vw, .86rem); }
.lp-mock header { display: flex; justify-content: space-between; align-items: baseline; gap: .5rem; margin-bottom: .8em; }
.lp-mock header span { color: #fff; font-weight: 750; font-size: 1.12em; }
.lp-mock header small { color: #8fb0c9; font-size: .85em; }
.lp-mock b { color: #fff; font-variant-numeric: tabular-nums; white-space: nowrap; }
.lp-mock small { display: block; color: #8fb0c9; font-size: .8em; }
.lp-mock-kpis { display: grid; grid-template-columns: 1fr 1fr; gap: .6em; }
.lp-mock-kpis p, .lp-mock-result, .lp-mock-cash, .lp-mock-formula, .lp-mock-last { margin: 0; padding: .8em 1em; background: var(--sc-app-2); border: 1px solid var(--sc-app-line); border-radius: .8em; }
.lp-mock-kpis b, .lp-mock-cash b { font-size: 1.6em; }
.lp-mock-result { margin-top: .6em; }
.lp-mock-result.ok { background: rgba(61, 220, 151, .12); border-color: rgba(61, 220, 151, .45); }
.lp-mock-result.ok b { color: var(--sc-up); font-size: 1.35em; }
.lp-mock-formula { margin-top: .6em; font-size: .82em; line-height: 1.45; }
.lp-mock-rows { list-style: none; margin: .6em 0 0; padding: 0; }
.lp-mock-rows li { display: flex; justify-content: space-between; padding: .45em .2em; border-bottom: 1px solid var(--sc-app-line); }
.lp-mock-rows b { color: #9cc7e4; }
.lp-mock .up { color: var(--sc-up); }
.lp-mock .down { color: var(--sc-down); }
.lp-mock .eq { color: #9cc7e4; }
.lp-dot { display: inline-block; width: .55em; height: .55em; border-radius: 99px; background: var(--sc-up); margin-right: .2em; box-shadow: 0 0 0 .25em rgba(61, 220, 151, .2); }
.lp-mock-cash { display: flex; justify-content: space-between; align-items: center; }
.lp-mock-cards { display: grid; grid-template-columns: 1fr 1fr; gap: .55em; margin-top: .6em; }
.lp-mock-cards p { margin: 0; padding: .75em .9em; border-radius: .8em; position: relative; overflow: hidden; min-height: 4.6em; }
.lp-mock-cards p::after { content: ""; position: absolute; inset: 0; background: linear-gradient(135deg, rgba(255, 255, 255, .16), transparent 55%); pointer-events: none; }
.lp-mock-cards img { height: 1.35em; width: auto; max-width: 5.5em; object-fit: contain; filter: brightness(0) invert(1); opacity: .95; display: block; margin-bottom: .35em; }
.lp-mock-cards small { color: rgba(255, 255, 255, .78); }
.lp-mock-cards b { font-size: 1.2em; }
.bk-res { background: linear-gradient(135deg, #0a5aa8, #0b3a73); }
.bk-bhd { background: linear-gradient(135deg, #12a150, #0b6b37); }
.bk-pop { background: linear-gradient(135deg, #1468c8, #0a3f86); }
.bk-ado { background: linear-gradient(135deg, #f08a24, #1b4ea0 70%); }
.lp-mock-last { margin-top: .6em; display: flex; justify-content: space-between; }
.lp-mock-chips { display: flex; gap: .4em; margin-bottom: .7em; }
.lp-mock-chips span { padding: .3em .8em; border-radius: 99px; background: rgba(13, 155, 115, .18); color: #7fe3bf; font-weight: 700; font-size: .85em; }
.lp-mock-turns { list-style: none; margin: 0; padding: 0; display: grid; gap: .45em; }
.lp-mock-turns li { display: flex; justify-content: space-between; align-items: center; gap: .5em; padding: .65em .9em; background: var(--sc-app-2); border: 1px solid var(--sc-app-line); border-radius: .75em; }
.lp-mock-turns em { font-style: normal; font-weight: 800; white-space: nowrap; }
.lp-mock-foot { margin: .7em 0 0; color: #8fb0c9; font-size: .8em; text-align: center; }
.lp-mock-devices { position: relative; max-width: 560px; height: 100%; display: flex; align-items: center; justify-content: center; }
.lp-laptop { width: 78%; }
.lp-laptop-screen { aspect-ratio: 16 / 10; border: .55em solid #1d2a38; border-radius: .9em .9em 0 0; background: var(--sc-app); display: grid; grid-template-columns: 18% 1fr; overflow: hidden; }
.lp-laptop-screen > i { background: #0a1522; border-right: 1px solid var(--sc-app-line); }
.lp-laptop-screen > div { padding: 6% 30% 6% 6%; font-size: .85em; display: grid; grid-template-columns: 1fr 1fr; gap: .5em; align-content: start; }
.lp-laptop-screen p { margin: 0; padding: .6em .7em; border-radius: .6em; background: var(--sc-app-2); border: 1px solid var(--sc-app-line); }
.lp-laptop-screen p.g b, .lp-phone-screen b { color: var(--sc-up); }
.lp-laptop-screen b { font-size: 1.05em; }
.lp-bars { grid-column: 1 / -1; display: flex; align-items: flex-end; gap: 6%; height: 4.5em; padding: .5em .7em; border-radius: .6em; background: var(--sc-app-2); }
.lp-bars i { flex: 1; border-radius: .3em .3em 0 0; background: linear-gradient(#3ddc97, #0d9b73); }
.lp-bars i:nth-child(1) { height: 45%; } .lp-bars i:nth-child(2) { height: 75%; } .lp-bars i:nth-child(3) { height: 55%; } .lp-bars i:nth-child(4) { height: 95%; }
.lp-laptop-base { height: .9em; margin: 0 -6%; border-radius: 0 0 1em 1em; background: linear-gradient(#c9d4de, #8d9cab); }
.lp-phone { position: absolute; right: 2%; bottom: 6%; width: 24%; aspect-ratio: 9 / 18; border: .45em solid #1d2a38; border-radius: 1.3em; background: var(--sc-app); box-shadow: 0 1.5em 2.5em -1em rgba(0, 0, 0, .6); overflow: hidden; }
.lp-phone-screen { padding: 22% 12%; display: grid; gap: .45em; }
.lp-phone-screen b { font-size: .95em; }
.lp-phone-screen span { height: 1.6em; border-radius: .4em; background: var(--sc-app-2); border: 1px solid var(--sc-app-line); }
.lp-phone-screen span.g { background: rgba(61, 220, 151, .25); }

/* Móvil: la imagen arriba, el texto de la tarjeta activa debajo, puntos y pausa */
@media (max-width: 900px) {
  .lp-showcase { display: flex; flex-direction: column; align-items: stretch; gap: 0; margin: 2rem auto 2.5rem; padding: 0; }
  .lp-sc-stage { order: 1; }
  .lp-sc-tabs { order: 2; margin-top: .9rem; min-height: 8.6rem; }
  .lp-sc-tab { display: none; padding: 0; border: 0 !important; box-shadow: none !important; background: transparent !important; cursor: default; grid-template-columns: 2.1rem 1fr; }
  .lp-sc-tab.is-active { display: grid; }
  .lp-sc-tab b { font-size: 1.15rem; }
  .lp-sc-tab small { max-height: none !important; opacity: 1 !important; margin-top: .35rem !important; font-size: .95rem; }
  .lp-sc-bar { display: none; }
  .lp-sc-controls { order: 3; justify-content: space-between; margin-top: .4rem; }
  .lp-sc-dots { display: flex; }
  .lp-sc-slide { aspect-ratio: 4 / 3.3; border-radius: 18px; padding: 4.5% 5%; }
  .lp-sc-track { border-radius: 18px; }
  .lp-mock { font-size: clamp(.6rem, 2.7vw, .82rem); }
  .lp-mock-close .lp-mock-rows, .lp-mock-banks .lp-mock-last, .lp-mock-report .lp-mock-foot, .lp-mock-report li:nth-child(4) { display: none; }
  .lp-sc-photo { aspect-ratio: 4 / 3.3; }
  .lp-copy-window-body{gap:.7em;padding:.75em}.lp-copy-window{font-size:.9rem}
}
/* La sección anterior queda sustituida por el carrusel */
.commercial-value-cards { display: none !important; }

/* ───────── 3. Smart Vision: mensaje e imagen arriba, detalles debajo ───────── */
.smart-vision-pricing.lp-sv, .smart-vision-pricing.lp-sv:has(.smart-vision-art) { display: block !important; max-width: 1180px; }
.lp-sv .lp-sv-head { text-align: center; max-width: 860px; margin: 0 auto 2rem; }
.lp-sv .lp-sv-head h2 { font-size: clamp(1.9rem, 3.6vw, 3rem) !important; line-height: 1.1; letter-spacing: -.02em; color: var(--sc-ink); margin: .4rem 0 1rem; }
.lp-sv .lp-sv-head h2 .lp-accent { color: var(--sc-green); }
.lp-sv-tagline { display: flex; flex-wrap: wrap; justify-content: center; gap: .3rem .9rem; margin: 0; font-size: clamp(1.05rem, 1.7vw, 1.3rem); font-weight: 750; color: var(--sc-navy) !important; }
.lp-sv-tagline span { display: inline-flex; align-items: center; gap: .45rem; }
.lp-sv-tagline span + span::before { content: ""; width: 6px; height: 6px; border-radius: 99px; background: var(--sc-green); margin-right: .45rem; }
.lp-sv .smart-vision-art { max-width: 960px; margin: 0 auto !important; }
.lp-sv .smart-vision-marketing-copy { display: grid; grid-template-columns: 1.2fr 1fr; gap: 2.5rem; max-width: 960px; margin: 2rem auto 0; align-items: start; }
.lp-sv .smart-vision-marketing-copy > div > p { margin-top: 0; }
.lp-sv .smart-vision-marketing-copy ul { margin: 0; }
@media (max-width: 780px) {
  .lp-sv .lp-sv-head { text-align: left; margin-bottom: 1.25rem; }
  .lp-sv .lp-sv-head h2 { font-size: 1.85rem !important; }
  .lp-sv-tagline { justify-content: flex-start; flex-direction: column; gap: .2rem; font-size: 1.05rem; }
  .lp-sv-tagline span + span::before { display: none; }
  .lp-sv-tagline span::before { content: "" !important; display: inline-block !important; width: 6px; height: 6px; border-radius: 99px; background: var(--sc-green); }
  .lp-sv .smart-vision-marketing-copy { grid-template-columns: 1fr; gap: 1rem; margin-top: 1.25rem; }
}

/* Sección comercial de la recuperación de comprobantes. */
.lp-receipt-copy{display:grid;grid-template-columns:minmax(0,1fr) minmax(330px,.92fr);gap:clamp(2rem,5vw,5rem);align-items:center;max-width:1180px;margin:5rem auto;padding:0 24px}.lp-receipt-copy-copy{max-width:590px}.lp-receipt-copy h2{margin:.4rem 0 1rem;color:var(--sc-ink);font-size:clamp(2rem,3.5vw,3rem);line-height:1.08;letter-spacing:-.025em}.lp-receipt-copy-copy p{color:#4a627a;line-height:1.65}.lp-receipt-copy-types{font-weight:800;color:var(--sc-ink)!important}.lp-receipt-copy-copy>small{display:block;margin-top:1.1rem;color:#527087;line-height:1.55}.lp-receipt-printer{margin:0;min-height:455px;display:grid;place-items:center;position:relative;overflow:hidden;border-radius:24px;padding:2.2rem;background:radial-gradient(100% 90% at 84% 8%,#22536c 0,#102b43 57%,#071b2d 100%);color:#fff}.lp-receipt-printer figcaption{z-index:2;align-self:start;max-width:330px;text-align:center;font-size:clamp(1.15rem,2.2vw,1.6rem);font-weight:900;line-height:1.15}.lp-receipt-printer figcaption span{display:block;margin-top:.55rem;color:#b8d2df;font-size:.77rem;font-weight:650;line-height:1.45}.lp-receipt-printer-body{position:relative;align-self:end;width:min(100%,330px);height:198px;margin-top:-3.3rem;border-radius:20px 20px 12px 12px;background:linear-gradient(160deg,#243d52,#0b1723 70%);box-shadow:0 18px 38px #0008}.lp-receipt-printer-body>i{position:absolute;z-index:1;right:12%;bottom:28px;left:12%;height:14px;border-radius:99px;background:#05090d;box-shadow:inset 0 2px 4px #000}.lp-receipt-demo-ticket{position:absolute;z-index:0;right:16%;bottom:18px;left:16%;display:grid;gap:3px;padding:13px 12px 15px;transform:translateY(-54px);background:#fff;color:#000;text-align:center;font:800 10px/1.2 Arial,sans-serif;box-shadow:0 2px 9px #0006}.lp-receipt-demo-ticket img{justify-self:center;width:auto;height:31px;max-width:115px;object-fit:contain;filter:grayscale(1) contrast(1.6)}.lp-receipt-demo-ticket>b{font-size:12px}.lp-receipt-demo-ticket time,.lp-receipt-demo-ticket>span{font-size:9px}.lp-receipt-demo-ticket hr{width:100%;margin:2px 0;border:0;border-top:1px dashed #000}.lp-receipt-demo-ticket em{font-style:normal;font-size:10px}.lp-receipt-demo-ticket mark{display:block;padding:5px 3px;background:#000;color:#fff;font-size:17px;line-height:1}.lp-receipt-demo-ticket small{font-size:8px}.lp-receipt-printer>p{position:absolute;right:16px;bottom:8px;margin:0;color:#b8d2df;font-size:.68rem}
@media (max-width:780px){.lp-receipt-copy{grid-template-columns:1fr;margin:3.25rem auto;padding:0 16px}.lp-receipt-printer{min-height:410px;padding:1.5rem}.lp-receipt-copy h2{font-size:2rem}.lp-receipt-printer-body{width:min(100%,310px)}}

/* ───────── 4. Cómo funciona: los 6 pasos como tarjetas deslizables ───────── */
#como-funciona .lp-steps-nav { display: flex; gap: .4rem; justify-content: center; flex-wrap: wrap; margin: 0 auto 1.25rem; max-width: 980px; }
#como-funciona .lp-steps-nav button { display: inline-flex; align-items: center; gap: .5rem; padding: .55rem .95rem; border: 1px solid var(--sc-line); border-radius: 999px; background: #fff; color: #4a627a; font: inherit; font-size: .86rem; font-weight: 700; cursor: pointer; transition: all .2s; }
#como-funciona .lp-steps-nav button i { font-style: normal; font-size: .75rem; color: #8aa0b4; }
#como-funciona .lp-steps-nav button.is-active { background: var(--sc-navy); border-color: var(--sc-navy); color: #fff; }
#como-funciona .lp-steps-nav button.is-active i { color: #4fd1a5; }
#como-funciona .workflow-list.lp-steps-track {
  display: flex !important; flex-direction: row !important; gap: 1rem !important; overflow-x: auto; scroll-snap-type: x mandatory; scroll-behavior: smooth;
  scrollbar-width: none; max-width: 980px; margin: 0 auto; padding: .25rem .25rem 1rem;
}
#como-funciona .lp-steps-track::-webkit-scrollbar { display: none; }
#como-funciona .lp-steps-track .workflow-step {
  flex: 0 0 100%; scroll-snap-align: center; scroll-snap-stop: always; margin: 0 !important;
  display: grid !important; grid-template-columns: 1fr 1fr !important; gap: 2rem !important; align-items: center;
  padding: 2rem !important; background: #f6f9fc; border: 1px solid var(--sc-line); border-radius: 20px; min-height: 0 !important;
}
#como-funciona .lp-steps-track .workflow-step.reverse .workflow-copy { order: 0 !important; }
#como-funciona .lp-steps-track .workflow-step.reverse .workflow-visual { order: 1 !important; }
#como-funciona .lp-steps-track .workflow-step::before, #como-funciona .lp-steps-track .workflow-step::after { display: none !important; }
#como-funciona .lp-steps-arrows { display: flex; justify-content: center; align-items: center; gap: .8rem; margin-top: .25rem; }
#como-funciona .lp-steps-arrows button { width: 42px; height: 42px; border-radius: 99px; border: 1px solid var(--sc-line); background: #fff; color: var(--sc-ink); font-size: 1.1rem; cursor: pointer; }
#como-funciona .lp-steps-arrows button:disabled { opacity: .35; cursor: default; }
#como-funciona .lp-steps-arrows span { font-size: .85rem; font-weight: 700; color: #4a627a; min-width: 3.5rem; text-align: center; }
@media (max-width: 720px) {
  #como-funciona .lp-steps-nav { flex-wrap: nowrap; overflow-x: auto; justify-content: flex-start; scrollbar-width: none; margin: 0 -16px 1rem; padding: 0 16px; }
  #como-funciona .lp-steps-nav::-webkit-scrollbar { display: none; }
  #como-funciona .lp-steps-nav button { flex: 0 0 auto; padding: .45rem .8rem; font-size: .8rem; }
  #como-funciona .lp-steps-track .workflow-step { grid-template-columns: 1fr !important; gap: 1rem !important; padding: 1.25rem !important; }
  #como-funciona .lp-steps-track .workflow-step .workflow-visual { display: block !important; order: 1 !important; margin: 0 !important; max-width: none !important; }
}

@media (prefers-reduced-motion: reduce) {
  .lp-sc-track, #como-funciona .lp-steps-track { scroll-behavior: auto; }
  .lp-sc-tab small { transition: none; }
}

/* Ajustes finos */
#como-funciona .workflow-intro { text-align: center; max-width: 760px; margin-left: auto !important; margin-right: auto !important; }
@media (max-width: 720px) { #como-funciona .workflow-intro { text-align: left; } }
.lp-sv .lp-sv-head h2 { font-size: clamp(1.9rem, 3.2vw, 2.65rem) !important; }
@media (max-width: 780px) {
  .lp-sv-tagline span { gap: .55rem; }
  .lp-sv-tagline span::before { margin-right: 0 !important; }
}
/* Portada en móvil: evita 3 px de desplazamiento lateral */
@media (max-width: 720px) { #inicio.intro { grid-template-columns: minmax(0, 1fr) !important; } #inicio.intro .hero-copy { min-width: 0; max-width: 100%; } }
@media (max-width: 720px) { #inicio.intro .hero-trust { display: flex !important; flex-wrap: wrap !important; } #inicio.intro .hero-trust span { flex: 0 0 auto; max-width: 100%; } }