/* public/styles/landing-motion.css — capa de movimiento de la landing.
   Se apoya en los tokens .lp-* de landing.css y NO los redefine. Todo el
   movimiento es mejora progresiva: sin JS (o con movimiento reducido) la
   página se ve completa y legible. Solo transform/opacity (compositor). */

.mediador-app .lp-root{ --lp-ease: cubic-bezier(.22,.8,.24,1); }

/* ---------- reveal al hacer scroll (una sola vez) ---------- */
.lp-js [data-reveal]{ opacity: 0; transition: opacity .7s var(--lp-ease), transform .8s var(--lp-ease); transition-delay: calc(var(--d, 0) * 90ms); will-change: opacity, transform; }
.lp-js [data-reveal="up"]{ transform: translateY(26px); }
.lp-js [data-reveal="left"]{ transform: translateX(-34px); }
.lp-js [data-reveal="right"]{ transform: translateX(34px); }
.lp-js [data-reveal="zoom"]{ transform: scale(.94); }
.lp-js [data-reveal].is-in{ opacity: 1; transform: none; will-change: auto; }

/* ---------- nav: móvil animado ---------- */
.lp-burger{ display: none; width: 42px; height: 42px; border-radius: 10px; border: 1px solid var(--lp-glass-border); background: var(--lp-glass); color: var(--lp-text); cursor: pointer; align-items: center; justify-content: center; }
.lp-burger span{ display: block; width: 18px; height: 2px; background: currentColor; border-radius: 2px; position: relative; transition: background .2s; }
.lp-burger span::before, .lp-burger span::after{ content: ""; position: absolute; left: 0; width: 18px; height: 2px; background: currentColor; border-radius: 2px; transition: transform .3s var(--lp-ease); }
.lp-burger span::before{ top: -6px; } .lp-burger span::after{ top: 6px; }
.lp-burger[aria-expanded="true"] span{ background: transparent; }
.lp-burger[aria-expanded="true"] span::before{ transform: translateY(6px) rotate(45deg); }
.lp-burger[aria-expanded="true"] span::after{ transform: translateY(-6px) rotate(-45deg); }
.lp-mobile-menu{
  position: fixed; left: 0; right: 0; top: 68px; z-index: 39; padding: 12px 16px 20px;
  background: rgba(10,13,14,.96); backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px);
  border-bottom: 1px solid var(--lp-glass-border);
  transform: translateY(-12px); opacity: 0; visibility: hidden;
  transition: transform .3s var(--lp-ease), opacity .25s, visibility 0s .3s;
}
.lp-mobile-menu.is-open{ transform: none; opacity: 1; visibility: visible; transition-delay: 0s; }
.lp-mobile-menu a{ display: block; padding: 14px 4px; font-size: 17px; color: var(--lp-text); text-decoration: none; border-bottom: 1px solid var(--lp-glass-border); }
.lp-mobile-menu .lp-btn{ margin-top: 14px; width: 100%; border-bottom: 0; }
.lp-nav-links a{ position: relative; }
.lp-nav-links a::after{ content: ""; position: absolute; left: 0; right: 0; bottom: -6px; height: 2px; background: var(--lp-accent); transform: scaleX(0); transform-origin: left; transition: transform .3s var(--lp-ease); }
.lp-nav-links a:hover::after, .lp-nav-links a:focus-visible::after{ transform: scaleX(1); }

/* ---------- hero ---------- */
.lp-hero.is-full{ display: flex; flex-direction: column; justify-content: center; padding-top: 56px; padding-bottom: 40px; }
/* alto completo solo en pantallas anchas: en teléfonos y tabletas (aunque midan más de 720px) el alto lo da el contenido */
@media (min-width: 961px){ .lp-hero.is-full{ min-height: calc(100vh - 68px); min-height: calc(100svh - 68px); } }
.lp-hero.is-full .lp-hero-actions .lp-btn,
.lp-hero.is-full .lp-hero-actions .google-btn{ transition: transform .25s var(--lp-ease), box-shadow .25s; }
.lp-hero.is-full .lp-hero-actions .google-btn:hover{ transform: translateY(-2px); box-shadow: 0 10px 28px rgba(34,199,184,.25); }
.lp-aurora{ position: absolute; inset: -10% 0 auto 0; height: 80%; pointer-events: none; z-index: 0; opacity: .8;
  background: radial-gradient(40% 50% at 30% 30%, rgba(34,199,184,.20), transparent 70%), radial-gradient(35% 45% at 72% 38%, rgba(47,111,200,.14), transparent 70%);
  animation: lp-aurora 18s ease-in-out infinite alternate; }
@keyframes lp-aurora{ from{ transform: translate3d(-3%,0,0) scale(1); } to{ transform: translate3d(3%,4%,0) scale(1.08); } }

/* entrada por bloques: cada hijo de .lp-hero-seq entra con retraso */
.lp-js .lp-hero-seq > *{ opacity: 0; transform: translateY(22px); transition: opacity .8s var(--lp-ease), transform .9s var(--lp-ease); transition-delay: calc(var(--i, 0) * 110ms + 80ms); }
.lp-js .lp-hero.is-ready .lp-hero-seq > *{ opacity: 1; transform: none; }

/* escenario del producto con tarjetas flotantes */
.lp-stage-wrap{ position: relative; z-index: 1; margin-top: 56px; }
.lp-stage{ --mx: 0; --my: 0; position: relative; max-width: 1000px; margin: 0 auto; padding: 40px 0 28px; }
.lp-stage-label{ position: absolute; top: 4px; left: 50%; transform: translateX(-50%); font-family: var(--font-mono); font-size: 10.5px; letter-spacing: .08em; text-transform: uppercase; color: var(--lp-text-dim); white-space: nowrap; }
.lp-win{ position: relative; max-width: 760px; margin: 0 auto; border-radius: 18px; background: linear-gradient(180deg, var(--lp-panel-2), var(--lp-panel)); border: 1px solid var(--lp-glass-border-strong);
  box-shadow: 0 40px 100px rgba(0,0,0,.55), 0 0 120px -30px var(--lp-accent-glow); text-align: left; overflow: hidden;
  transform: translate3d(calc(var(--mx) * -6px), calc(var(--my) * -4px), 0); transition: transform .5s var(--lp-ease); }
.lp-win-bar{ display: flex; align-items: center; gap: 8px; padding: 12px 16px; border-bottom: 1px solid var(--lp-glass-border); font-size: 12.5px; color: var(--lp-text-dim); }
.lp-win-bar b{ color: var(--lp-text); font-weight: 600; }
.lp-win-body{ padding: 18px 20px 20px; display: grid; gap: 14px; }
.lp-chips{ display: flex; flex-wrap: wrap; gap: 6px; }
.lp-chip{ font-size: 11.5px; padding: 5px 10px; border-radius: 999px; border: 1px solid var(--lp-glass-border); color: var(--lp-text-dim); background: var(--lp-glass); }
.lp-chip.is-done{ color: var(--lp-accent); border-color: rgba(34,199,184,.35); background: var(--lp-accent-dim); }
.lp-chip.is-now{ color: #06201C; background: var(--lp-accent); border-color: var(--lp-accent); font-weight: 600; box-shadow: 0 0 0 0 var(--lp-accent-glow); animation: lp-pulse 2.4s ease-out infinite; }
@keyframes lp-pulse{ 0%{ box-shadow: 0 0 0 0 rgba(34,199,184,.45); } 70%,100%{ box-shadow: 0 0 0 10px rgba(34,199,184,0); } }
.lp-next{ border: 1px solid var(--lp-glass-border); border-radius: 12px; padding: 12px 14px; background: var(--lp-glass); }
.lp-next small{ display: block; font-size: 10.5px; letter-spacing: .06em; text-transform: uppercase; color: var(--lp-text-dim); margin-bottom: 4px; }
.lp-next strong{ font-size: 15px; color: var(--lp-text); }
.lp-feed{ display: grid; gap: 8px; }
.lp-feed-row{ display: flex; align-items: center; gap: 10px; font-size: 13px; color: var(--lp-text-dim); }
.lp-dot{ width: 8px; height: 8px; border-radius: 50%; background: var(--lp-accent); flex: 0 0 8px; }
.lp-dot.is-warn{ background: #E8B04A; } .lp-dot.is-mute{ background: rgba(244,247,247,.25); }
.lp-feed-row time{ margin-left: auto; font-size: 11.5px; opacity: .7; white-space: nowrap; }

.lp-float{ position: absolute; z-index: 2; width: 232px; padding: 12px 14px; border-radius: 14px; text-align: left;
  background: rgba(19,26,28,.78); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
  border: 1px solid var(--lp-glass-border-strong); box-shadow: 0 18px 44px rgba(0,0,0,.45);
  transform: translate3d(calc(var(--mx) * var(--k, 10) * 1px), calc(var(--my) * var(--k, 10) * .7px), 0);
  transition: transform .45s var(--lp-ease), border-color .25s; }
.lp-float:hover{ border-color: rgba(34,199,184,.5); }
.lp-float .t{ display: block; font-size: 12.5px; font-weight: 600; color: var(--lp-text); }
.lp-float .s{ display: block; margin-top: 3px; font-size: 11.5px; color: var(--lp-text-dim); }
.lp-float .tag{ display: inline-block; margin-bottom: 6px; font-size: 10px; letter-spacing: .06em; text-transform: uppercase; color: var(--lp-accent); }
.lp-float > .lp-bob{ display: block; animation: lp-bob 7s ease-in-out infinite; animation-delay: var(--bd, 0s); }
@keyframes lp-bob{ 0%,100%{ transform: translateY(0); } 50%{ transform: translateY(-9px); } }
.lp-float.f1{ left: -2%; top: 14%; --k: 14; --bd: -1s; }
.lp-float.f2{ right: -2%; top: 8%; --k: 20; --bd: -3s; }
.lp-float.f3{ left: 2%; bottom: 4%; --k: 18; --bd: -5s; }
.lp-float.f4{ right: 1%; bottom: 10%; --k: 12; --bd: -2s; }
.lp-js .lp-float{ opacity: 0; }
.lp-js .lp-hero.is-ready .lp-float{ opacity: 1; transition: opacity .9s var(--lp-ease) .9s, transform .45s var(--lp-ease); }

/* ---------- franja de actividad (marquee) ---------- */
.lp-marquee{ position: relative; z-index: 1; border-top: 1px solid var(--lp-glass-border); border-bottom: 1px solid var(--lp-glass-border); overflow: hidden; background: rgba(244,247,247,.02);
  mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); }
.lp-marquee-track{ display: flex; gap: 40px; width: max-content; padding: 16px 0; animation: lp-marquee 48s linear infinite; }
.lp-marquee:hover .lp-marquee-track, .lp-marquee.is-paused .lp-marquee-track{ animation-play-state: paused; }
.lp-marquee-track span{ display: inline-flex; align-items: center; gap: 10px; font-size: 14px; color: var(--lp-text-dim); white-space: nowrap; }
.lp-marquee-track span::before{ content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--lp-accent); opacity: .8; }
@keyframes lp-marquee{ to{ transform: translateX(-50%); } }

/* ---------- explorador de producto ---------- */
.lp-xp{ display: grid; grid-template-columns: 250px minmax(0,1fr); gap: 28px; align-items: start; }
.lp-xp-tabs{ display: flex; flex-direction: column; gap: 6px; position: relative; }
.lp-xp-tab{ text-align: left; padding: 12px 14px; border-radius: 12px; border: 1px solid transparent; background: transparent; color: var(--lp-text-dim); font: inherit; font-size: 14.5px; cursor: pointer; position: relative; overflow: hidden; transition: color .2s, background .2s, border-color .2s; }
.lp-xp-tab:hover{ color: var(--lp-text); background: var(--lp-glass); }
.lp-xp-tab[aria-selected="true"]{ color: var(--lp-text); background: var(--lp-glass); border-color: var(--lp-glass-border-strong); }
.lp-xp-tab:focus-visible{ outline: 2px solid var(--lp-accent); outline-offset: 2px; }
.lp-xp-tab i{ position: absolute; left: 0; bottom: 0; height: 2px; width: 100%; background: var(--lp-accent); transform: scaleX(0); transform-origin: left; }
.lp-xp.is-playing .lp-xp-tab[aria-selected="true"] i{ animation: lp-fill var(--xp-ms, 7000ms) linear forwards; }
@keyframes lp-fill{ to{ transform: scaleX(1); } }
.lp-xp-stage{ position: relative; min-height: 420px; border-radius: 20px; background: linear-gradient(180deg, var(--lp-panel-2), var(--lp-panel)); border: 1px solid var(--lp-glass-border-strong); box-shadow: 0 30px 80px rgba(0,0,0,.45), 0 0 100px -40px var(--lp-accent-glow); overflow: hidden; }
.lp-xp-pane{ position: absolute; inset: 0; padding: 26px; display: grid; grid-template-columns: minmax(0,.9fr) minmax(0,1.1fr); gap: 24px; align-items: center; opacity: 0; visibility: hidden; transform: translateY(10px); transition: opacity .45s var(--lp-ease), transform .5s var(--lp-ease), visibility 0s .45s; }
.lp-xp-pane.is-active{ opacity: 1; visibility: visible; transform: none; transition-delay: 0s; }
.lp-xp-pane h3{ margin: 0; font-size: 22px; line-height: 1.25; color: var(--lp-text); }
.lp-xp-pane p{ margin: 10px 0 0; font-size: 14.5px; line-height: 1.6; color: var(--lp-text-dim); }
.lp-xp-pane ul{ margin: 14px 0 0; padding: 0; list-style: none; display: grid; gap: 8px; }
.lp-xp-pane li{ font-size: 13.5px; color: var(--lp-text-dim); padding-left: 20px; position: relative; }
.lp-xp-pane li::before{ content: ""; position: absolute; left: 0; top: 7px; width: 8px; height: 8px; border-radius: 2px; background: var(--lp-accent); opacity: .85; }
.lp-xp-mock{ border: 1px solid var(--lp-glass-border); border-radius: 14px; background: rgba(10,13,14,.5); padding: 14px; display: grid; gap: 9px; font-size: 12.5px; color: var(--lp-text-dim); }
.lp-xp-mock .row{ display: flex; justify-content: space-between; gap: 10px; padding: 8px 10px; border-radius: 9px; background: var(--lp-glass); border: 1px solid var(--lp-glass-border); }
.lp-xp-mock .row b{ color: var(--lp-text); font-weight: 600; }
.lp-xp-mock .row.is-hot{ border-color: rgba(232,92,92,.45); }
.lp-xp-mock .row.is-ok{ border-color: rgba(34,199,184,.4); }
.lp-xp-mock .bubble{ max-width: 82%; padding: 8px 11px; border-radius: 12px; background: var(--lp-glass); border: 1px solid var(--lp-glass-border); }
.lp-xp-mock .bubble.me{ margin-left: auto; background: var(--lp-accent-dim); border-color: rgba(34,199,184,.3); color: var(--lp-text); }
.lp-xp-mock .hash{ font-family: var(--font-mono); font-size: 11px; word-break: break-all; color: var(--lp-accent); }
.lp-xp-ctrl{ display: flex; align-items: center; gap: 8px; margin-top: 14px; }
.lp-xp-ctrl button{ width: 38px; height: 38px; border-radius: 10px; border: 1px solid var(--lp-glass-border); background: var(--lp-glass); color: var(--lp-text); cursor: pointer; font-size: 16px; }
.lp-xp-ctrl button:hover{ border-color: var(--lp-glass-border-strong); }
.lp-xp-ctrl button:focus-visible{ outline: 2px solid var(--lp-accent); outline-offset: 2px; }
.lp-xp-ctrl .lp-demo-note{ margin-left: auto; font-size: 11px; color: var(--lp-text-dim); }

/* ---------- cómo funciona con línea de progreso ---------- */
.lp-flow{ position: relative; display: grid; grid-template-columns: repeat(5, minmax(0,1fr)); gap: 18px; padding-top: 30px; }
.lp-flow::before, .lp-flow-line{ content: ""; position: absolute; top: 11px; left: 10%; right: 10%; height: 2px; background: var(--lp-glass-border-strong); border-radius: 2px; }
.lp-flow-line{ background: var(--lp-accent); transform: scaleX(0); transform-origin: left; transition: transform 1.6s var(--lp-ease); box-shadow: 0 0 14px var(--lp-accent-glow); }
.lp-flow.is-in .lp-flow-line{ transform: scaleX(1); }
.lp-flow-step{ position: relative; text-align: center; padding: 22px 14px 18px; border-radius: 16px; border: 1px solid var(--lp-glass-border); background: var(--lp-glass); transition: transform .35s var(--lp-ease), border-color .25s; }
.lp-flow-step:hover{ transform: translateY(-4px); border-color: rgba(34,199,184,.4); }
.lp-flow-step .node{ position: absolute; top: -30px; left: 50%; width: 22px; height: 22px; margin-left: -11px; border-radius: 50%; background: var(--lp-void); border: 2px solid var(--lp-glass-border-strong); transition: border-color .4s, background .4s, box-shadow .4s; }
.lp-flow.is-in .lp-flow-step .node{ border-color: var(--lp-accent); background: var(--lp-accent); box-shadow: 0 0 0 6px var(--lp-accent-dim); transition-delay: calc(var(--i) * 280ms); }
.lp-flow-step h3{ margin: 0; font-size: 15px; color: var(--lp-text); }
.lp-flow-step p{ margin: 8px 0 0; font-size: 13px; line-height: 1.5; color: var(--lp-text-dim); }
.lp-flow-step .ico{ width: 30px; height: 30px; margin: 0 auto 10px; fill: none; stroke: var(--lp-accent); stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }

/* ---------- casos de uso ---------- */
.lp-cases{ display: grid; grid-template-columns: repeat(4, minmax(0,1fr)); gap: 16px; }
.lp-case{ position: relative; padding: 24px 20px; border-radius: 18px; border: 1px solid var(--lp-glass-border); background: var(--lp-glass); transition: transform .35s var(--lp-ease), border-color .25s, background .25s; overflow: hidden; }
.lp-case::after{ content: ""; position: absolute; inset: 0; background: radial-gradient(300px 140px at 50% -20%, var(--lp-accent-dim), transparent 70%); opacity: 0; transition: opacity .3s; pointer-events: none; }
.lp-case:hover, .lp-case:focus-within{ transform: translateY(-6px); border-color: rgba(34,199,184,.45); }
.lp-case:hover::after, .lp-case:focus-within::after{ opacity: 1; }
.lp-case h3{ margin: 0; font-size: 18px; color: var(--lp-text); }
.lp-case .prob{ margin: 10px 0 0; font-size: 13.5px; line-height: 1.55; color: var(--lp-text-dim); }
.lp-case .sol{ margin: 12px 0 0; font-size: 13.5px; line-height: 1.55; color: var(--lp-text); padding-top: 12px; border-top: 1px solid var(--lp-glass-border); }
.lp-case small{ display: block; margin-bottom: 4px; font-size: 10.5px; letter-spacing: .06em; text-transform: uppercase; color: var(--lp-accent); }
.lp-disclaimer{ margin-top: 22px; text-align: center; font-size: 12.5px; color: var(--lp-text-dim); }

/* ---------- precios ---------- */
.lp-plans{ display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 18px; align-items: stretch; }
.lp-plan{ display: flex; flex-direction: column; padding: 28px 24px; border-radius: 20px; border: 1px solid var(--lp-glass-border); background: var(--lp-glass); transition: transform .35s var(--lp-ease), border-color .25s; }
.lp-plan:hover{ transform: translateY(-5px); border-color: var(--lp-glass-border-strong); }
.lp-plan-badge{ display:inline-block; align-self:flex-start; margin-bottom:10px; padding:4px 10px; border-radius:999px; background: rgba(34,199,184,.16); color:#5eead4; font-size:12px; font-weight:600; letter-spacing:.01em; }
.lp-plan-fine{ margin:10px 0 0; font-size:12.5px; line-height:1.4; opacity:.7; text-align:center; }
.lp-plan.is-featured{ border-color: rgba(34,199,184,.5); background: linear-gradient(180deg, rgba(34,199,184,.10), var(--lp-glass)); }
.lp-plan h3{ margin: 0; font-size: 18px; color: var(--lp-text); }
.lp-plan .price{ margin: 14px 0 4px; font-size: 34px; font-weight: 700; letter-spacing: -.02em; color: var(--lp-text); }
.lp-plan .price small{ font-size: 13px; font-weight: 400; color: var(--lp-text-dim); }
.lp-plan .desc{ margin: 0; font-size: 13.5px; color: var(--lp-text-dim); min-height: 40px; }
.lp-plan ul{ margin: 16px 0 22px; padding: 0; list-style: none; display: grid; gap: 9px; flex: 1; }
.lp-plan li{ font-size: 13.5px; color: var(--lp-text-dim); padding-left: 22px; position: relative; }
.lp-plan li::before{ content: "✓"; position: absolute; left: 0; color: var(--lp-accent); font-weight: 700; }
.lp-plan .lp-btn{ width: 100%; }
.lp-plans-note{ margin-top: 18px; text-align: center; font-size: 12.5px; color: var(--lp-text-dim); }

/* ---------- CTA final ---------- */
.lp-cta-final{ position: relative; overflow: hidden; }
.lp-cta-final::before{ content: ""; position: absolute; left: 50%; top: 50%; width: 900px; height: 520px; transform: translate(-50%,-50%); pointer-events: none;
  background: radial-gradient(ellipse at center, rgba(34,199,184,.22), rgba(34,199,184,.05) 50%, transparent 72%); animation: lp-breathe 9s ease-in-out infinite alternate; }
@keyframes lp-breathe{ from{ opacity: .6; transform: translate(-50%,-50%) scale(.94); } to{ opacity: 1; transform: translate(-50%,-50%) scale(1.06); } }
.lp-cta-final .lp-container{ position: relative; z-index: 1; }
.lp-cta-final h2{ font-size: 46px; }

/* ---------- responsive ---------- */
@media (max-width: 1080px){
  .lp-float{ width: 200px; }
  .lp-float.f1{ left: 0; } .lp-float.f2{ right: 0; }
  .lp-xp{ grid-template-columns: 1fr; }
  .lp-xp-tabs{ flex-direction: row; overflow-x: auto; scrollbar-width: none; padding-bottom: 4px; }
  .lp-xp-tabs::-webkit-scrollbar{ display: none; }
  .lp-xp-tab{ flex: 0 0 auto; white-space: nowrap; }
  .lp-cases{ grid-template-columns: repeat(2, minmax(0,1fr)); }
  .lp-plans{ grid-template-columns: 1fr; max-width: 460px; margin-left: auto; margin-right: auto; }
}
@media (max-width: 860px){
  .lp-xp-stage{ min-height: 0; }
  .lp-xp-pane{ position: relative; display: none; grid-template-columns: 1fr; padding: 20px; }
  .lp-xp-pane.is-active{ display: grid; }
}
@media (max-width: 720px){
  .lp-burger{ display: inline-flex; }
  .lp-nav-actions .lp-nav-login{ display: none; }
  .lp-hero.is-full{ min-height: 0; padding-top: 36px; }
  .lp-stage{ padding-top: 28px; }
  .lp-win{ transform: none !important; }
  .lp-float{ position: relative; width: auto; left: auto !important; right: auto !important; top: auto !important; bottom: auto !important; transform: none !important; margin-top: 10px; }
  .lp-stage{ display: block; }
  .lp-flow{ grid-template-columns: 1fr; padding-top: 0; padding-left: 34px; }
  .lp-flow::before, .lp-flow-line{ top: 8px; bottom: 8px; left: 11px; right: auto; width: 2px; height: auto; }
  .lp-flow-line{ transform: scaleY(0); transform-origin: top; }
  .lp-flow.is-in .lp-flow-line{ transform: scaleY(1); }
  .lp-flow-step{ text-align: left; }
  .lp-flow-step .node{ top: 18px; left: -34px; margin-left: 0; }
  .lp-flow-step .ico{ margin: 0 0 8px; }
  .lp-cases{ grid-template-columns: 1fr; }
  .lp-cta-final h2{ font-size: 30px; }
}

/* ---------- movimiento reducido: todo estático y visible ---------- */
@media (prefers-reduced-motion: reduce){
  .lp-js [data-reveal], .lp-js .lp-hero-seq > *, .lp-js .lp-float{ opacity: 1 !important; transform: none !important; transition: none !important; }
  .lp-aurora, .lp-float > .lp-bob, .lp-chip.is-now, .lp-marquee-track, .lp-cta-final::before{ animation: none !important; }
  .lp-xp-pane, .lp-flow-line, .lp-flow-step .node{ transition: none !important; }
  .lp-flow-line{ transform: none !important; }
  .lp-flow-step .node{ border-color: var(--lp-accent); background: var(--lp-accent); }
}

.lp-marquee{ position: relative; }
.lp-marquee-btn{ position: absolute; right: 12px; top: 50%; transform: translateY(-50%); z-index: 2; width: 30px; height: 30px; border-radius: 8px; border: 1px solid var(--lp-glass-border); background: rgba(10,13,14,.85); color: var(--lp-text-dim); font-size: 11px; cursor: pointer; }
.lp-marquee-btn:hover, .lp-marquee-btn:focus-visible{ color: var(--lp-text); border-color: var(--lp-accent); outline: none; }

/* nav: con 7 enlaces, el menú móvil entra antes para que nada se apriete */
.lp-nav-links a{ white-space: nowrap; }
@media (max-width: 1180px){ .lp-nav-links{ gap: var(--space-4); } .lp-nav-links a{ font-size: 14px; } }
@media (max-width: 960px){
  .lp-nav-links{ display: none; }
  .lp-burger{ display: inline-flex; }
}

/* selector mensual / anual de la sección de planes */
.lp-plans-switch{ display: flex; justify-content: center; gap: 6px; margin: 0 auto 22px; }
.lp-plans-switch[hidden]{ display: none; }
.lp-sw{ padding: 9px 16px; border-radius: 999px; border: 1px solid var(--lp-glass-border); background: var(--lp-glass); color: var(--lp-text-dim); font: inherit; font-size: 13.5px; cursor: pointer; transition: background .2s, color .2s, border-color .2s; }
.lp-sw.is-on{ background: var(--lp-accent); border-color: var(--lp-accent); color: #06201C; font-weight: 600; }
.lp-sw:focus-visible{ outline: 2px solid var(--lp-accent); outline-offset: 2px; }

/* tarjetas flotantes: por debajo de 960px no se superponen; pasan a una grilla bajo la ventana */
@media (max-width: 960px){
  .lp-stage{ display: block; padding-top: 30px; }
  .lp-win{ transform: none !important; max-width: 100%; }
  .lp-float{ position: relative; left: auto !important; right: auto !important; top: auto !important; bottom: auto !important; transform: none !important; width: auto; }
  .lp-stage-floats{ display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; margin-top: 12px; }
  .lp-nav-actions .lp-nav-login{ display: none; }
}
@media (max-width: 480px){
  .lp-stage-floats{ grid-template-columns: 1fr; }
  .lp-hero h1{ font-size: 30px; }
}

@media (min-width: 961px){ .lp-stage-floats{ display: contents; } }

@media (max-width: 960px){ .lp-float{ margin: 0 !important; } }

/* en el hero (flex en columna) los contenedores con margin:auto se encogían al contenido */
.lp-hero.is-full > .lp-container{ width: 100%; }