/*
 * Landing con el lenguaje de elanai.dev (fondo casi negro, auroras violeta y
 * naranja, títulos enormes y apretados, cards de vidrio) más dos gestos de
 * loybox: la pila de notificaciones "en vivo" y la franja que se desplaza.
 *
 * Todo usa clases lx-* nuevas o está acotado a .lx-*, así el wizard y el
 * teléfono (que siguen usando el CSS original) no se tocan.
 *
 * Contraste: el violeta de marca #6D45F9 no alcanza para texto chico sobre
 * este fondo (3.4:1). Rellenos saturados llevan texto blanco (≥5:1) y el
 * texto de acento usa las variantes claras.
 */

:root {
  --lx-bg: #0A0A10;
  --lx-card: #13131C;
  --lx-card2: #181824;
  --lx-line: rgba(255,255,255,.08);
  --lx-t1: #F4F3F8;
  --lx-t2: #C9C8D6;
  --lx-t3: #A09FB4;
  --lx-violet: #6D45F9;
  --lx-violet-t: #B9A6FF;
  --lx-orange: #F57400;
  --lx-orange-t: #FFA45C;
  --lx-grad: linear-gradient(135deg, #6D45F9 0%, #C2410C 100%);      /* botones, texto blanco */
  --lx-grad-text: linear-gradient(110deg, #B39BFF 8%, #F59E5B 92%);  /* títulos grandes */
  --lx-mono: 'JetBrains Mono', ui-monospace, monospace;
}

body { background: var(--lx-bg); }

/* ── Nav ─────────────────────────────────────────────────────────────────── */
.nav {
  background: rgba(10,10,16,.72);
  -webkit-backdrop-filter: blur(18px); backdrop-filter: blur(18px);
  border-bottom: 1px solid var(--lx-line);
}
.nav-links a { color: var(--lx-t3); }
.nav-links a:hover, .nav-login:hover { color: var(--lx-t1); }
.nav-login { color: var(--lx-t2); }
.nav-cta {
  background: var(--lx-grad); color: #fff; border-radius: 999px; padding: 9px 18px;
  box-shadow: 0 8px 26px -10px rgba(109,69,249,.8);
}
.nav-cta:hover { background: var(--lx-grad); filter: brightness(1.08); }

/* ── Botones ─────────────────────────────────────────────────────────────── */
.lx-btn {
  display: inline-flex; align-items: center; gap: 10px;
  padding: 16px 28px; border-radius: 999px; border: 0; cursor: pointer;
  font-family: inherit; font-size: 16px; font-weight: 700; letter-spacing: -.01em;
  color: #fff; background: var(--lx-grad);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.1), 0 14px 40px -14px rgba(109,69,249,.9);
  transition: transform .2s ease, filter .2s ease;
  animation: lx-glow 3.2s ease-in-out infinite;
}
.lx-btn:hover { transform: translateY(-2px); filter: brightness(1.08); }
.lx-btn span { transition: transform .2s ease; }
.lx-btn:hover span { transform: translateX(3px); }
.lx-ghost {
  display: inline-flex; align-items: center; padding: 15px 24px; border-radius: 999px;
  color: var(--lx-t1); text-decoration: none; font-weight: 600; font-size: 15px;
  border: 1px solid rgba(255,255,255,.16); background: rgba(255,255,255,.03);
  transition: background .2s, border-color .2s;
}
.lx-ghost:hover { background: rgba(255,255,255,.07); border-color: rgba(185,166,255,.5); }
.lx-btn:focus-visible, .lx-ghost:focus-visible, .nav-cta:focus-visible, .lx-plan-btn:focus-visible {
  outline: 2px solid var(--lx-violet-t); outline-offset: 3px;
}

/* ── Hero ────────────────────────────────────────────────────────────────── */
.lx-hero {
  position: relative; overflow: hidden;
  padding: 132px 24px 90px;
  background:
    radial-gradient(760px 520px at 12% 8%, rgba(109,69,249,.22), transparent 62%),
    radial-gradient(640px 520px at 92% 88%, rgba(245,116,0,.13), transparent 60%),
    var(--lx-bg);
}
/* Grilla de puntos muy tenue, como el fondo de elanai.dev */
.lx-hero::before {
  content: ''; position: absolute; inset: 0; pointer-events: none;
  background-image: radial-gradient(rgba(255,255,255,.07) 1px, transparent 1px);
  background-size: 28px 28px;
  -webkit-mask-image: radial-gradient(ellipse at 40% 40%, #000 20%, transparent 70%);
  mask-image: radial-gradient(ellipse at 40% 40%, #000 20%, transparent 70%);
}
.lx-hero-grid {
  position: relative; max-width: 1180px; margin: 0 auto;
  display: grid; grid-template-columns: 1.08fr .92fr; gap: 56px; align-items: center;
}
.lx-eyebrow {
  display: inline-flex; align-items: center; gap: 9px;
  padding: 6px 14px 6px 10px; border-radius: 999px;
  font-size: 13px; font-weight: 600; color: var(--lx-t2);
  background: rgba(255,255,255,.04); border: 1px solid var(--lx-line);
  margin-bottom: 26px;
}
.lx-eyebrow .pill-mark {
  display: block; width: 5px; height: 15px; border-radius: 5px; transform: rotate(22deg);
  background: linear-gradient(180deg, #B26BFA, #F57225); box-shadow: 0 0 10px rgba(178,107,250,.6);
}
.lx-h1 {
  font-size: clamp(48px, 7.2vw, 96px); font-weight: 800; line-height: .96;
  letter-spacing: -.05em; color: var(--lx-t1); margin: 0 0 24px; text-wrap: balance;
}
.lx-h1 .g, .lx-title .g {
  background: var(--lx-grad-text);
  -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
}
.lx-sub { font-size: 19px; line-height: 1.55; color: var(--lx-t2); max-width: 30ch; margin: 0 0 34px; }
.lx-actions { display: flex; gap: 12px; flex-wrap: wrap; align-items: center; }
.lx-fine { margin-top: 22px; font-size: 13.5px; color: var(--lx-t3); display: flex; gap: 16px; flex-wrap: wrap; }
.lx-fine span::before { content: '✓ '; color: var(--lx-orange-t); }

/* Entrada del hero al cargar */
.lx-anim { animation: lx-reveal .9s cubic-bezier(.2,.7,.2,1) both; }
.lx-anim.d1 { animation-delay: .08s; } .lx-anim.d2 { animation-delay: .18s; }
.lx-anim.d3 { animation-delay: .28s; } .lx-anim.d4 { animation-delay: .4s; }

/* Teléfono: se mantiene el mockup original, flotando */
.lx-phone-col { position: relative; display: flex; flex-direction: column; align-items: center; }
.lx-phone-col .phone-wrap { animation: lx-float 7s ease-in-out infinite; }
.lx-phone-col .phone { box-shadow: 0 50px 110px -30px rgba(0,0,0,.8), 0 0 0 1px rgba(255,255,255,.06), 0 0 80px -20px rgba(109,69,249,.45); }

/* Pila de notificaciones en vivo (loybox) */
.lx-notifs {
  position: absolute; left: -64px; bottom: 70px; width: 268px; z-index: 3;
  display: flex; flex-direction: column; gap: 8px; pointer-events: none;
}
.lx-notif {
  display: flex; align-items: center; gap: 10px;
  padding: 10px 12px; border-radius: 14px;
  background: rgba(22,21,34,.72);
  -webkit-backdrop-filter: blur(16px) saturate(140%); backdrop-filter: blur(16px) saturate(140%);
  border: 1px solid rgba(255,255,255,.1);
  box-shadow: 0 16px 40px -18px rgba(0,0,0,.8);
  animation: lx-notif-in .55s cubic-bezier(.2,.8,.2,1) both;
}
.lx-notif.out { animation: lx-notif-out .4s ease both; }
.lx-notif:nth-child(2) { opacity: .82; transform: scale(.97); }
.lx-notif:nth-child(3) { opacity: .55; transform: scale(.94); }
.lx-notif-ico {
  width: 30px; height: 30px; border-radius: 9px; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center; color: #fff;
}
.lx-notif-ico.reply  { background: linear-gradient(135deg, #6D45F9, #8B63FF); }
.lx-notif-ico.order  { background: linear-gradient(135deg, #059669, #10B981); }
.lx-notif-ico.follow { background: linear-gradient(135deg, #C2410C, #F57400); }
.lx-notif-ico.human  { background: linear-gradient(135deg, #334155, #475569); }
.lx-notif-t { font-size: 12.5px; font-weight: 700; color: var(--lx-t1); line-height: 1.25; }
.lx-notif-s { font-size: 11.5px; color: var(--lx-t3); line-height: 1.3; }

/* ── Franja que se desplaza ──────────────────────────────────────────────── */
.lx-marquee {
  position: relative; overflow: hidden; padding: 20px 0;
  border-top: 1px solid var(--lx-line); border-bottom: 1px solid var(--lx-line);
  background: rgba(255,255,255,.015);
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent);
}
.lx-marquee-track { display: flex; width: max-content; animation: lx-marquee 38s linear infinite; }
.lx-marquee:hover .lx-marquee-track { animation-play-state: paused; }
.lx-marquee-item {
  display: inline-flex; align-items: center; gap: 22px; padding-right: 22px;
  font-size: 18px; font-weight: 700; letter-spacing: -.02em; color: var(--lx-t2); white-space: nowrap;
}
.lx-marquee-item i {
  display: block; width: 5px; height: 16px; border-radius: 5px; transform: rotate(22deg);
  background: linear-gradient(180deg, #B26BFA, #F57225);
}

/* ── Secciones ───────────────────────────────────────────────────────────── */
.lx-section { position: relative; padding: 92px 24px; }
.lx-section.alt { background: linear-gradient(180deg, rgba(255,255,255,.018), rgba(255,255,255,0)); }
.lx-head { max-width: 760px; margin: 0 auto 48px; text-align: center; }
.lx-kicker {
  font-family: var(--lx-mono); font-size: 12px; letter-spacing: .18em; text-transform: uppercase;
  color: var(--lx-violet-t); margin-bottom: 16px;
}
.lx-title {
  font-size: clamp(36px, 5vw, 64px); font-weight: 800; line-height: 1.02;
  letter-spacing: -.045em; color: var(--lx-t1); margin: 0; text-wrap: balance;
}
.lx-lead { margin-top: 18px; font-size: 18px; color: var(--lx-t2); line-height: 1.55; }

/* Revelado al hacer scroll (solo se oculta si el JS ya está listo) */
html.lx-ready [data-reveal] {
  opacity: 0; filter: blur(8px); transform: translateY(28px);
  transition: opacity .8s cubic-bezier(.2,.7,.2,1), filter .8s cubic-bezier(.2,.7,.2,1), transform .8s cubic-bezier(.2,.7,.2,1);
  transition-delay: var(--d, 0s);
}
html.lx-ready [data-reveal].in { opacity: 1; filter: blur(0); transform: none; }

/* ── Funciones: filas alternadas, texto corto + demo ─────────────────────── */
.lx-caps { max-width: 1120px; margin: 0 auto; display: flex; flex-direction: column; gap: 68px; }
.lx-cap { display: grid; grid-template-columns: .9fr 1.1fr; gap: 64px; align-items: center; }
.lx-cap.rev .lx-cap-text { order: 2; }
.lx-cap-eyebrow {
  font-family: var(--lx-mono); font-size: 11.5px; letter-spacing: .18em; text-transform: uppercase;
  color: var(--lx-orange-t); margin-bottom: 14px;
}
.lx-cap h3 {
  font-size: clamp(28px, 3.4vw, 44px); font-weight: 800; line-height: 1.04;
  letter-spacing: -.04em; color: var(--lx-t1); margin: 0 0 16px; text-wrap: balance;
}
.lx-cap p { font-size: 17px; line-height: 1.6; color: var(--lx-t2); margin: 0; max-width: 38ch; }
.lx-cap-visual { display: flex; flex-direction: column; gap: 12px; }
.lx-caption { font-size: 13px; color: var(--lx-t3); text-align: center; }

/* Cards de vidrio con brillo que sigue al mouse */
.lx-card {
  position: relative; overflow: hidden; border-radius: 20px;
  background: linear-gradient(180deg, rgba(255,255,255,.04), rgba(255,255,255,.012)), var(--lx-card);
  border: 1px solid var(--lx-line);
  box-shadow: 0 40px 80px -40px rgba(0,0,0,.8);
}
.lx-card::after {
  content: ''; position: absolute; inset: 0; pointer-events: none; border-radius: inherit;
  background: radial-gradient(260px circle at var(--mx, -300px) var(--my, -300px), rgba(155,123,255,.14), transparent 60%);
}
.lx-card > * { position: relative; z-index: 1; }

/* Demos reutilizados, en versión oscura */
.lx-cap .mini-chat { background: transparent; box-shadow: none; padding: 20px; }
.lx-cap .rule-demo, .lx-cap .csv-demo, .lx-cap .follow-demo { background: transparent; border: 0; box-shadow: none; }
.lx-cap .rule-demo { padding: 20px; }
.lx-cap .rule-demo-head, .lx-cap .csv-head { color: var(--lx-t3); }
.lx-cap .rule-demo-input { background: rgba(109,69,249,.14); border-color: rgba(155,123,255,.34); color: var(--lx-t1); }
.lx-cap .rule-demo-arrow { color: var(--lx-violet-t); }
.lx-cap .mini-chat.compact { background: rgba(0,0,0,.25); border: 1px solid var(--lx-line); }
.lx-cap .csv-demo { padding: 10px 8px 18px; }
.lx-cap .csv-row { color: var(--lx-t2); border-bottom-color: var(--lx-line); }
.lx-cap .csv-ok { color: #6EE7B7; }
.lx-cap .follow-demo { padding: 10px; }
.lx-cap .fd-item { background: rgba(255,255,255,.035); color: var(--lx-t2); }
.lx-cap .fd-item strong { color: var(--lx-t1); }
.lx-cap .fd-item span { color: var(--lx-t3); }
.lx-cap .fd-tag.pend { background: rgba(251,191,36,.13); color: #FCD34D; }
.lx-cap .fd-tag.skip { background: rgba(255,255,255,.07); color: var(--lx-t2); }
.lx-cap .fd-tag.esc  { background: rgba(109,69,249,.2); color: #D6C9FF; }
.lx-cap .fd-dot.warn { background: #8B63FF; }

/* Las burbujas aparecen de a una cuando la card entra en pantalla */
html.lx-ready .lx-cap [data-reveal] .mc,
html.lx-ready .lx-cap [data-reveal] .fd-item,
html.lx-ready .lx-cap [data-reveal] .csv-row,
html.lx-ready .lx-cap [data-reveal] .csv-ok {
  opacity: 0; transform: translateY(10px);
  transition: opacity .5s ease, transform .5s cubic-bezier(.2,.8,.2,1);
}
html.lx-ready .lx-cap [data-reveal].in .mc,
html.lx-ready .lx-cap [data-reveal].in .fd-item,
html.lx-ready .lx-cap [data-reveal].in .csv-row,
html.lx-ready .lx-cap [data-reveal].in .csv-ok { opacity: 1; transform: none; }
.lx-cap [data-reveal].in :is(.mc, .fd-item, .csv-row):nth-child(2) { transition-delay: .45s; }
.lx-cap [data-reveal].in :is(.mc, .fd-item, .csv-row):nth-child(3) { transition-delay: .9s; }
.lx-cap [data-reveal].in :is(.mc, .fd-item, .csv-row):nth-child(4) { transition-delay: 1.35s; }
.lx-cap [data-reveal].in .csv-ok { transition-delay: 1.7s; }

/* ── Cómo funciona ───────────────────────────────────────────────────────── */
.lx-steps {
  max-width: 1040px; margin: 0 auto; position: relative;
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px;
}
.lx-steps::before {
  content: ''; position: absolute; top: 27px; left: 16%; right: 16%; height: 1px;
  background: linear-gradient(90deg, transparent, rgba(155,123,255,.6), rgba(245,116,0,.6), transparent);
  background-size: 200% 100%; animation: lx-slide 6s linear infinite;
}
.lx-step { text-align: center; padding: 0 12px; }
.lx-step-n {
  position: relative; width: 54px; height: 54px; margin: 0 auto 20px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-family: var(--lx-mono); font-size: 15px; font-weight: 600; color: #fff;
  background: var(--lx-grad); box-shadow: 0 0 0 6px var(--lx-bg), 0 0 30px -4px rgba(109,69,249,.7);
}
.lx-step h4 { font-size: 20px; font-weight: 800; letter-spacing: -.02em; color: var(--lx-t1); margin: 0 0 8px; }
.lx-step p { font-size: 15px; color: var(--lx-t3); margin: 0; line-height: 1.5; }

/* ── Comparación ─────────────────────────────────────────────────────────── */
.lx-compare { max-width: 900px; margin: 0 auto; display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
.lx-compare .compare-card { margin: 0; }

/* ── Precios ─────────────────────────────────────────────────────────────── */
.lx-plans {
  max-width: 1060px; margin: 0 auto;
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; align-items: stretch;
}
.lx-plan { padding: 30px 26px; display: flex; flex-direction: column; }
.lx-plan.pro { transform: translateY(-10px); box-shadow: 0 0 0 1px rgba(155,123,255,.4), 0 30px 80px -30px rgba(109,69,249,.7); }
.lx-plan.pro::before {
  content: ''; position: absolute; inset: 0; border-radius: inherit; padding: 1px; pointer-events: none;
  background: linear-gradient(135deg, #9B7BFF, rgba(255,255,255,.05) 45%, #F57400);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor; mask-composite: exclude;
}
.lx-plan-badge {
  align-self: flex-start; margin-bottom: 16px; padding: 4px 11px; border-radius: 999px;
  font-size: 12px; font-weight: 700; color: #fff; background: var(--lx-grad);
}
.lx-plan-name { font-size: 20px; font-weight: 800; color: var(--lx-t1); letter-spacing: -.02em; }
.lx-plan-price { margin: 14px 0 20px; font-size: 56px; font-weight: 800; letter-spacing: -.05em; color: var(--lx-t1); line-height: 1; }
.lx-plan-price sup { font-size: 24px; vertical-align: top; position: relative; top: 8px; margin-right: 2px; }
.lx-plan-price small { font-size: 16px; font-weight: 500; color: var(--lx-t3); letter-spacing: 0; }
.lx-plan ul { list-style: none; padding: 0; margin: 0 0 26px; display: flex; flex-direction: column; gap: 11px; flex: 1; }
.lx-plan li { display: flex; gap: 10px; font-size: 14.5px; color: var(--lx-t2); line-height: 1.4; }
.lx-plan li::before { content: '✓'; color: var(--lx-violet-t); font-weight: 700; flex-shrink: 0; }
.lx-plan li b { color: var(--lx-t1); }
.lx-plan-btn {
  width: 100%; padding: 13px; border-radius: 999px; cursor: pointer; font-family: inherit;
  font-size: 14.5px; font-weight: 700; color: var(--lx-t1);
  background: rgba(255,255,255,.04); border: 1px solid rgba(255,255,255,.16);
  transition: background .2s, border-color .2s;
}
.lx-plan-btn:hover { background: rgba(255,255,255,.08); border-color: rgba(185,166,255,.5); }
.lx-plan.pro .lx-plan-btn { background: var(--lx-grad); border-color: transparent; color: #fff; }
.lx-note { text-align: center; margin-top: 28px; font-size: 14px; color: var(--lx-t3); }

/* ── Cierre ──────────────────────────────────────────────────────────────── */
.lx-cta {
  position: relative; overflow: hidden; text-align: center; padding: 140px 24px;
  background:
    radial-gradient(620px 360px at 50% 110%, rgba(245,116,0,.18), transparent 70%),
    radial-gradient(620px 360px at 50% -10%, rgba(109,69,249,.22), transparent 70%),
    var(--lx-bg);
}
.lx-cta .lx-title { font-size: clamp(38px, 5.6vw, 72px); margin-bottom: 18px; }
.lx-cta p { color: var(--lx-t2); font-size: 18px; margin: 0 0 34px; }

.lx-footer {
  display: flex; align-items: center; gap: 22px; flex-wrap: wrap;
  max-width: 1180px; margin: 0 auto; padding: 34px 24px;
  border-top: 1px solid var(--lx-line); color: var(--lx-t3); font-size: 13.5px;
}
.lx-footer img { height: 22px; width: auto; display: block; }
.lx-footer a { color: var(--lx-t2); text-decoration: none; }
.lx-footer a:hover { color: var(--lx-t1); }
.lx-footer .sp { flex: 1; }

/* ── Animaciones (las de elanai.dev + marquee de loybox) ─────────────────── */
@keyframes lx-reveal { 0% { opacity: 0; filter: blur(10px); transform: translateY(30px); } to { opacity: 1; filter: blur(0); transform: none; } }
@keyframes lx-float { 0%, to { transform: translateY(0); } 50% { transform: translateY(-12px); } }
@keyframes lx-glow {
  0%, to { box-shadow: inset 0 0 0 1px rgba(255,255,255,.1), 0 14px 40px -14px rgba(109,69,249,.9), 0 0 0 rgba(245,116,0,0); }
  50%    { box-shadow: inset 0 0 0 1px rgba(255,255,255,.1), 0 18px 50px -12px rgba(109,69,249,1), 0 0 42px -6px rgba(245,116,0,.45); }
}
@keyframes lx-marquee { from { transform: translateX(0); } to { transform: translateX(-50%); } }
@keyframes lx-slide { 0% { background-position: 0% 0; } to { background-position: 200% 0; } }
@keyframes lx-notif-in { 0% { opacity: 0; filter: blur(6px); transform: translateY(-14px) scale(.96); } to { opacity: 1; filter: blur(0); transform: none; } }
@keyframes lx-notif-out { to { opacity: 0; filter: blur(4px); transform: translateY(10px) scale(.92); } }

@media (prefers-reduced-motion: reduce) {
  .lx-anim, .lx-btn, .lx-phone-col .phone-wrap, .lx-marquee-track, .lx-steps::before, .lx-notif { animation: none !important; }
  html.lx-ready [data-reveal], html.lx-ready .lx-cap [data-reveal] :is(.mc, .fd-item, .csv-row, .csv-ok) {
    opacity: 1 !important; filter: none !important; transform: none !important; transition: none !important;
  }
}

/* ── Responsive ──────────────────────────────────────────────────────────── */
@media (max-width: 980px) {
  .lx-hero { padding: 112px 20px 70px; }
  .lx-hero-grid { grid-template-columns: 1fr; gap: 48px; text-align: center; }
  .lx-sub { margin-left: auto; margin-right: auto; }
  .lx-actions, .lx-fine { justify-content: center; }
  /* El CSS original ocultaba el teléfono en pantallas chicas: acá se mantiene
     visible y la notificación en vivo pasa arriba, sin taparlo. */
  .lx-phone-col { flex-direction: column; align-items: center; gap: 16px; }
  .lx-phone-col .phone-wrap { display: flex; }
  .lx-notifs { position: relative; left: auto; bottom: auto; width: min(300px, 90vw); min-height: 58px; }
  .lx-notif:nth-child(n+2) { display: none; }
  .lx-cap, .lx-cap.rev { grid-template-columns: 1fr; gap: 28px; }
  .lx-cap.rev .lx-cap-text { order: 0; }
  .lx-cap p { max-width: none; }
  .lx-plans { grid-template-columns: 1fr; max-width: 460px; }
  .lx-plan.pro { transform: none; }
  .lx-compare { grid-template-columns: 1fr; }
}
@media (max-width: 720px) {
  .nav-cta { white-space: nowrap; padding: 9px 14px; font-size: 13.5px; }
  .lx-section { padding: 72px 20px; }
  .lx-caps { gap: 56px; }
  .lx-steps { grid-template-columns: 1fr; gap: 34px; }
  .lx-steps::before { display: none; }
  .lx-marquee-item { font-size: 16px; }
}

/* ── Llamado a la acción intermedio ──────────────────────────────────────── */
.lx-midcta {
  max-width: 1120px; margin: 0 auto; padding: 0 24px 80px;
  display: flex; flex-direction: column; align-items: center; gap: 12px; text-align: center;
}
.lx-midcta p { margin: 0; font-size: 19px; color: var(--lx-t2); }
.lx-midcta-fine { font-size: 13px; color: var(--lx-t3); }
.lx-cta-fine { margin-top: 16px; font-size: 13px; color: var(--lx-t3); }
@media (max-width: 720px) { .lx-midcta { padding-bottom: 72px; } .lx-midcta p { font-size: 17px; } }
.lx-steps-line {
  display: flex; gap: 10px 28px; flex-wrap: wrap; justify-content: center;
  font-size: 14px; color: var(--lx-t3); margin-bottom: 4px;
}
.lx-steps-line b {
  display: inline-flex; align-items: center; justify-content: center;
  width: 20px; height: 20px; margin-right: 7px; border-radius: 50%;
  background: rgba(185,166,255,.14); color: var(--lx-violet-t); font-size: 12px;
}
.lx-midcta.compacto { padding-bottom: 88px; }

/* El marco abraza al teléfono: así las notificaciones y las flechas quedan
   colgadas de sus bordes y no encima de la pantalla. */
.lx-phone-col .phone-wrap { width: max-content; }

/* Las notificaciones "en vivo" van al costado del teléfono, nunca encima: la
   conversación es lo que el visitante tiene que poder leer. */
.lx-notifs { left: auto; right: calc(100% + 14px); bottom: 54px; width: 236px; }
@media (max-width: 1180px) and (min-width: 981px) { .lx-notifs { display: none; } }

/* ── Celular y tablet: nada más ancho que la pantalla ────────────────────────
   El marco del teléfono es flex en fila; con las notificaciones adentro, en
   pantallas chicas quedaban al costado y estiraban la página a 536 px. */
@media (max-width: 980px) {
  .lx-phone-col .phone-wrap { flex-direction: column; width: 100%; max-width: 100%; }
  .lx-notifs {
    position: relative; left: auto; right: auto; bottom: auto;
    width: min(300px, 92vw); margin: 0 auto 14px;
  }
  .phone { max-width: 100%; }
  .lx-hero-grid { width: 100%; }
  .lx-h1, .lx-title { overflow-wrap: anywhere; }
}
.lx-plan-para { font-size: 13px; color: var(--lx-t3); margin: -6px 0 14px; }