/* FokoCool · landing pública. Misma paleta que la app (violeta sobre negro
   violáceo). Todo lo que se mueve respeta "reducir movimiento". */

@property --lp-angle { syntax: '<angle>'; inherits: false; initial-value: 0deg; }

.lp { position: relative; min-height: 100dvh; overflow-x: clip; color: var(--text); background: var(--bg); font-size: 15px;
  font-family: 'Geist', var(--font); font-feature-settings: normal; -webkit-tap-highlight-color: transparent; }
.lp ::selection { background: rgba(139, 92, 246, 0.45); }
.lp a { color: inherit; touch-action: manipulation; }
.lp-wrap { width: min(1180px, 100% - 48px); margin: 0 auto; position: relative; }
.lp :is(a, button):focus-visible { outline: 2px solid var(--accent-3); outline-offset: 3px; border-radius: 10px; }
.lp h1, .lp h2, .lp h3 { text-wrap: balance; }
.lp p { text-wrap: pretty; }
.lp-skip { position: absolute; left: 16px; top: -60px; z-index: 60; padding: 10px 14px; border-radius: 10px; background: var(--accent); color: #fff; font-weight: 600; transition: top 0.2s; }
.lp-skip:focus { top: 12px; }
.lp-sec, .lp-hero { scroll-margin-top: 76px; }

/* ---------------------------------------------------------------- nav */
.lp-nav { position: fixed; top: 0; left: 0; right: 0; z-index: 50; transition: background 0.3s, border-color 0.3s, backdrop-filter 0.3s; border-bottom: 1px solid transparent; }
.lp-nav.stuck { background: rgba(12, 6, 22, 0.72); backdrop-filter: blur(14px) saturate(140%); border-bottom-color: rgba(58, 40, 96, 0.5); }
.lp-nav .lp-wrap { display: flex; align-items: center; gap: 28px; height: 68px; }
.lp-logo { display: flex; align-items: center; gap: 10px; font-weight: 700; font-size: 17px; letter-spacing: -0.02em; }
.lp-logo img { width: 30px; height: 30px; border-radius: 9px; box-shadow: 0 6px 22px rgba(139, 92, 246, 0.45); }
.lp-logo b { font-weight: 700; }
.lp-logo b span { background: linear-gradient(135deg, #d9c4ff, #8b5cf6); -webkit-background-clip: text; background-clip: text; color: transparent; }
.lp-links { display: flex; gap: 4px; margin-left: 12px; }
.lp-links a { padding: 8px 12px; border-radius: 9px; color: var(--text-2); font-size: 14px; transition: color 0.15s, background 0.15s; }
.lp-links a:hover { color: var(--text); background: rgba(255, 255, 255, 0.04); }
.lp-nav .lp-cta-row { margin-left: auto; display: flex; gap: 8px; }

.lp-top-mark { position: absolute; top: 0; left: 0; width: 1px; height: 16px; pointer-events: none; }
.lp-btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; height: 40px; padding: 0 18px; border-radius: 10px; font-weight: 600; font-size: 14px;
  white-space: nowrap; border: 1px solid transparent; transition: transform 0.15s, box-shadow 0.2s, background 0.2s, border-color 0.2s; cursor: pointer; }
.lp-btn:active { transform: translateY(1px) scale(0.99); }
.lp-btn.primary { color: #fff; background: linear-gradient(180deg, #9669f7, #7547e6); box-shadow: 0 1px 0 rgba(255, 255, 255, 0.22) inset, 0 6px 16px rgba(76, 38, 170, 0.45); }
.lp-btn.primary:hover { background: linear-gradient(180deg, #a07af9, #7f52ec); transform: translateY(-1px); }
.lp-btn.ghost { color: var(--text); background: rgba(255, 255, 255, 0.035); border-color: rgba(120, 95, 180, 0.35); }
.lp-btn.ghost:hover { background: rgba(255, 255, 255, 0.07); border-color: rgba(165, 124, 255, 0.55); }
.lp-btn.lg { height: 48px; padding: 0 22px; border-radius: 11px; font-size: 15px; }
.lp-btn svg { flex: none; }

/* ---------------------------------------------------------------- héroe */
.lp-hero { position: relative; padding: 132px 0 40px; text-align: center; isolation: isolate; }
.lp-bg { position: absolute; inset: -80px 0 0; z-index: -1; pointer-events: none; overflow: hidden;
  background: radial-gradient(900px 520px at 50% 0%, rgba(118, 70, 235, 0.24), transparent 70%); }
.lp-grid { position: absolute; inset: 0; background-image: linear-gradient(rgba(139, 92, 246, 0.07) 1px, transparent 1px), linear-gradient(90deg, rgba(139, 92, 246, 0.07) 1px, transparent 1px);
  background-size: 64px 64px; mask-image: radial-gradient(900px 520px at 50% 30%, #000 20%, transparent 75%); -webkit-mask-image: radial-gradient(900px 520px at 50% 30%, #000 20%, transparent 75%); }
.lp-blob { position: absolute; border-radius: 50%; filter: blur(80px); opacity: 0.55; will-change: transform; }
.lp-blob.b1 { width: 620px; height: 420px; left: calc(50% - 560px); top: 40px; background: #5b2bc0; animation: lp-drift1 18s ease-in-out infinite alternate; }
.lp-blob.b2 { width: 520px; height: 380px; left: calc(50% + 40px); top: 0; background: #8b3fd9; opacity: 0.4; animation: lp-drift2 22s ease-in-out infinite alternate; }
.lp-blob.b3 { width: 700px; height: 300px; left: calc(50% - 350px); top: 420px; background: #3b1a86; opacity: 0.5; animation: lp-drift1 26s ease-in-out infinite alternate-reverse; }
@keyframes lp-drift1 { from { transform: translate(0, 0) scale(1); } to { transform: translate(80px, 40px) scale(1.12); } }
@keyframes lp-drift2 { from { transform: translate(0, 0) scale(1.05); } to { transform: translate(-90px, 60px) scale(0.95); } }
.lp-bigstar { position: absolute; left: 50%; top: 120px; width: 760px; height: 760px; margin-left: -380px; opacity: 0.05; animation: lp-spin 120s linear infinite; }
@keyframes lp-spin { to { transform: rotate(360deg); } }
.lp-twinkle { position: absolute; width: 10px; height: 10px; opacity: 0; animation: lp-twinkle 5s ease-in-out infinite; }
.lp-twinkle path { fill: #e3d4ff; }
@keyframes lp-twinkle { 0%, 100% { opacity: 0; transform: scale(0.4) rotate(0); } 50% { opacity: 0.9; transform: scale(1) rotate(45deg); } }

.lp-pill { display: inline-flex; align-items: center; gap: 8px; padding: 7px 14px; border-radius: 999px; font-size: 13px; color: var(--text-2);
  background: rgba(139, 92, 246, 0.1); border: 1px solid rgba(165, 124, 255, 0.28); }
.lp-pill b { display: inline-flex; align-items: center; justify-content: center; height: 22px; padding: 0 9px; border-radius: 999px; font-size: 11.5px; font-weight: 700; color: #fff;
  background: linear-gradient(135deg, #a57cff, #7c4df0); letter-spacing: 0.01em; }

.lp-h1 { margin: 26px auto 0; max-width: 980px; font-size: clamp(40px, 7vw, 80px); line-height: 1.03; letter-spacing: -0.042em; font-weight: 650; }
.lp-h1 .w { display: inline-block; opacity: 0; transform: translateY(0.45em); filter: blur(10px); }
.lp-h1.in .w { animation: lp-word 0.9s cubic-bezier(0.2, 0.8, 0.2, 1) forwards; animation-delay: calc(var(--i) * 70ms + 120ms); }
@keyframes lp-word { to { opacity: 1; transform: none; filter: blur(0); } }
/* Un solo acento, sin texto degradado en los títulos grandes. */
.lp-grad { color: #b99bff; }
.lp-sub { margin: 24px auto 0; max-width: 640px; font-size: clamp(16px, 1.6vw, 19px); line-height: 1.55; color: var(--text-2); }
.lp-hero .lp-actions { display: flex; justify-content: center; gap: 12px; margin-top: 34px; flex-wrap: wrap; }
.lp-note { margin-top: 16px; font-size: 13px; color: var(--text-3); display: inline-flex; gap: 8px; align-items: center; }
.lp-note i { width: 6px; height: 6px; border-radius: 50%; background: var(--good); box-shadow: 0 0 10px var(--good); }

.lp-fade { opacity: 0; transform: translateY(14px); transition: opacity 0.9s ease, transform 0.9s cubic-bezier(0.2, 0.8, 0.2, 1); }
.lp-fade.in { opacity: 1; transform: none; }

/* Ventana del producto (con perspectiva que se endereza al bajar) */
.lp-stage { position: relative; margin: 70px auto 0; max-width: 1120px; perspective: 1800px; }
.lp-stage::before { content: ''; position: absolute; inset: 12% 10% -6%; background: radial-gradient(closest-side, rgba(118, 70, 235, 0.32), transparent); filter: blur(60px); z-index: -1; }
/* Borde fino con un reflejo arriba; sin brillos alrededor. */
.lp-frame { position: relative; border-radius: 16px; overflow: hidden; background: #0e0819; transform-origin: 50% 0;
  border: 1px solid rgba(120, 95, 180, 0.38); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.07), 0 40px 100px rgba(3, 0, 12, 0.55); }
@keyframes lp-rotate { to { --lp-angle: 360deg; } }
/* Se endereza a medida que entra en pantalla: animación ligada al scroll, sin JS. */
@keyframes lp-tilt { from { transform: rotateX(18deg) scale(0.93) translateY(26px); } to { transform: none; } }
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    .lp-frame { animation: lp-tilt linear both; animation-timeline: view(); animation-range: entry 0% cover 42%; }
  }
}
.lp-chrome { display: flex; align-items: center; gap: 7px; height: 38px; padding: 0 14px; border-bottom: 1px solid rgba(58, 40, 96, 0.6); background: rgba(22, 14, 39, 0.9); }
.lp-chrome i { width: 10px; height: 10px; border-radius: 50%; background: #3a2860; }
.lp-chrome i:nth-child(1) { background: #fb7185aa; } .lp-chrome i:nth-child(2) { background: #fbbf24aa; } .lp-chrome i:nth-child(3) { background: #4ade80aa; }
.lp-url { margin: 0 auto; display: inline-flex; align-items: center; gap: 6px; height: 24px; padding: 0 14px; border-radius: 7px; font-size: 11.5px; color: var(--text-3); background: rgba(255, 255, 255, 0.04); }

/* Mini app */
.mx { display: grid; grid-template-columns: 190px 1fr; min-height: 560px; text-align: left; font-size: 12px; }
.mx-side { border-right: 1px solid rgba(58, 40, 96, 0.55); padding: 16px 12px; background: #0f0919; display: flex; flex-direction: column; gap: 3px; }
.mx-brand { display: flex; align-items: center; gap: 8px; font-weight: 700; font-size: 13px; margin: 0 4px 16px; }
.mx-brand img { width: 22px; height: 22px; border-radius: 7px; }
.mx-brand b span { color: var(--accent-3); }
.mx-lbl { font-size: 9.5px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--text-3); margin: 10px 8px 4px; font-weight: 600; }
.mx-item { display: flex; align-items: center; gap: 9px; padding: 7px 9px; border-radius: 8px; color: var(--text-2); font-weight: 500; }
.mx-item.on { background: rgba(139, 92, 246, 0.16); color: var(--text); box-shadow: inset 2px 0 0 var(--accent-2); }
.mx-item svg { color: var(--text-3); } .mx-item.on svg { color: var(--accent-3); }
.mx-main { padding: 18px 20px; display: flex; flex-direction: column; gap: 14px; min-width: 0; }
.mx-head { display: flex; align-items: center; gap: 10px; }
.mx-head h4 { margin: 0; font-size: 18px; letter-spacing: -0.02em; }
.mx-seg { margin-left: auto; display: flex; padding: 3px; border-radius: 9px; background: rgba(255, 255, 255, 0.03); border: 1px solid rgba(58, 40, 96, 0.6); }
.mx-seg span { padding: 4px 9px; border-radius: 6px; color: var(--text-3); font-size: 11px; font-weight: 600; }
.mx-seg span.on { background: rgba(139, 92, 246, 0.25); color: var(--text); }
.mx-tabs { display: flex; gap: 6px; flex-wrap: wrap; }
.mx-tab { display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px 4px 4px; border-radius: 999px; border: 1px solid rgba(58, 40, 96, 0.7); color: var(--text-2); font-weight: 600; font-size: 11.5px; }
.mx-tab.on { background: rgba(139, 92, 246, 0.18); border-color: rgba(165, 124, 255, 0.5); color: var(--text); padding-left: 10px; }
.mx-card { border-radius: 12px; border: 1px solid rgba(58, 40, 96, 0.65); background: linear-gradient(180deg, #1a1030, #160e27); padding: 12px 14px; }
.mx-card-h { display: flex; align-items: center; gap: 8px; font-weight: 650; font-size: 12.5px; margin-bottom: 10px; }
.mx-card-h svg { color: var(--accent-3); }
.mx-card-h small { margin-left: auto; color: var(--text-3); font-weight: 500; font-size: 10.5px; display: flex; align-items: center; gap: 5px; }
.mx-card-h small i { display: inline-block; width: 9px; height: 9px; border-radius: 3px; }

.av { display: inline-grid; place-items: center; flex: none; width: 22px; height: 22px; border-radius: 50%; font-size: 9.5px; font-weight: 700; color: #fff;
  background: linear-gradient(135deg, var(--c1, #a57cff), var(--c2, #5b2bc0)); box-shadow: 0 0 0 1.5px rgba(255, 255, 255, 0.08); }

/* Calendario */
.hm { display: grid; gap: 3px; align-items: center; }
.hm-lbl { display: flex; align-items: center; gap: 6px; font-weight: 600; font-size: 11px; white-space: nowrap; overflow: hidden; padding-right: 6px; }
.hm-c { position: relative; height: 19px; border-radius: 4px; background: rgba(255, 255, 255, 0.04); display: grid; place-items: center; font-size: 9.5px; font-weight: 700; color: rgba(255, 255, 255, 0.9);
  opacity: 0; transform: scale(0.4); }
.in .hm-c, .hm.in .hm-c { animation: lp-pop 0.5s cubic-bezier(0.3, 1.4, 0.5, 1) forwards; animation-delay: calc(var(--d) * 22ms); }
@keyframes lp-pop { to { opacity: 1; transform: none; } }
.hm-c.l1 { background: var(--heat-1); } .hm-c.l2 { background: var(--heat-2); } .hm-c.l3 { background: var(--heat-3); }
.hm-c.l4 { background: var(--heat-4); color: #1a1030; } .hm-c.l5 { background: var(--heat-5); color: #1a1030; }
.hm-c.hot::before { content: ''; position: absolute; top: 2px; left: 2px; width: 5px; height: 5px; border-radius: 50%; background: #fbbf24; box-shadow: 0 0 6px #fbbf24; }
.hm-c.lnk::after { content: ''; position: absolute; top: 2px; right: 2px; width: 5px; height: 5px; border-radius: 50%; background: var(--good); box-shadow: 0 0 6px var(--good); }
.hm-c.today { box-shadow: inset 0 0 0 1px rgba(201, 169, 255, 0.5); }
.hm-c.tipped { box-shadow: 0 0 0 2px #0e0819, 0 0 0 3.5px var(--accent-3); z-index: 2; }
.hm-days { font-size: 9px; color: var(--text-3); text-align: center; }
.lp-panel .hm { gap: 4px; }
.lp-panel .hm-c { height: 26px; border-radius: 5px; font-size: 10.5px; }
.lp-panel .hm-lbl { font-size: 12px; }

/* Tarjetas de cuenta */
.mx-accs { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.mx-acc { border-radius: 12px; border: 1px solid rgba(58, 40, 96, 0.65); background: linear-gradient(180deg, #1a1030, #160e27); padding: 11px; display: flex; flex-direction: column; gap: 8px; }
.mx-acc-top { display: flex; align-items: center; gap: 8px; font-weight: 650; font-size: 11.5px; }
.mx-acc-top .av { width: 26px; height: 26px; }
.mx-badge { display: inline-flex; align-items: center; height: 16px; padding: 0 6px; border-radius: 5px; font-size: 9.5px; font-weight: 700; background: rgba(139, 92, 246, 0.2); color: var(--accent-3); }
.mx-big { font-size: 19px; font-weight: 750; letter-spacing: -0.03em; display: flex; align-items: baseline; gap: 6px; }
.mx-big small { font-size: 11px; font-weight: 650; color: var(--good); }
.mx-stats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 4px; }
.mx-stats div { padding: 5px 6px; border-radius: 7px; background: rgba(255, 255, 255, 0.025); border: 1px solid rgba(58, 40, 96, 0.45); }
.mx-stats > div > span { display: block; font-size: 8.5px; letter-spacing: 0.05em; text-transform: uppercase; color: var(--text-3); font-weight: 600; }
.mx-stats b { font-size: 12.5px; }
.mx-redir { display: flex; align-items: center; gap: 5px; padding: 5px 7px; border-radius: 7px; font-size: 10px; color: var(--text-3); background: rgba(74, 222, 128, 0.05); border: 1px solid rgba(74, 222, 128, 0.16); }
.mx-redir b { color: var(--text); } .mx-redir svg { color: var(--good); flex: none; } .mx-redir span { margin-left: auto; white-space: nowrap; }
.mx-stats > div > span, .mx-redir { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
/* Si el panel queda angosto, dos tarjetas en vez de tres. */
@container (max-width: 560px) {
  .mx-accs { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .mx-accs > :nth-child(3) { display: none; }
}
@container (max-width: 360px) {
  .mx-accs { grid-template-columns: 1fr; }
  .mx-accs > :nth-child(2) { display: none; }
}

/* Cartel flotante del calendario */
.mx-tip { position: absolute; z-index: 5; width: 210px; padding: 10px; border-radius: 11px; background: rgba(22, 13, 41, 0.98); border: 1px solid var(--line-2);
  box-shadow: 0 18px 44px rgba(0, 0, 0, 0.6); font-size: 11px; opacity: 0; transform: translateY(6px) scale(0.97); transition: opacity 0.35s, transform 0.35s; pointer-events: none; }
.mx-tip.on { opacity: 1; transform: none; }
.mx-tip-h { display: flex; justify-content: space-between; margin-bottom: 7px; } .mx-tip-h span { color: var(--text-3); }
.mx-tip-g { padding: 6px 8px; border-radius: 8px; background: rgba(139, 92, 246, 0.12); border: 1px solid rgba(139, 92, 246, 0.25); margin-bottom: 7px; color: var(--text-2); }
.mx-tip-r { display: grid; grid-template-columns: 26px 1fr; gap: 8px; align-items: center; padding: 3px 0; color: var(--text-2); }
.mx-tip-r i { width: 26px; height: 44px; border-radius: 5px; background: linear-gradient(160deg, var(--c1), var(--c2)); }
.mx-tip-r b { color: var(--text); font-size: 12px; } .mx-tip-r em { font-style: normal; color: #fbbf24; font-weight: 700; }

/* ---------------------------------------------------------------- secciones */
.lp-sec { position: relative; padding: 112px 0; }
.lp-eyebrow { display: inline-flex; align-items: center; gap: 8px; padding: 5px 12px; border-radius: 999px; font-size: 12.5px; font-weight: 650; color: var(--accent-3);
  background: rgba(139, 92, 246, 0.1); border: 1px solid rgba(165, 124, 255, 0.25); }
.lp-h2 { margin: 18px 0 0; font-size: clamp(32px, 4.4vw, 54px); line-height: 1.06; letter-spacing: -0.036em; font-weight: 620; max-width: 820px; }
.lp-h2 .dim { color: #6f6390; }
.lp-lead { margin: 18px 0 0; max-width: 620px; font-size: 17px; line-height: 1.6; color: var(--text-2); }
.lp-center { text-align: center; } .lp-center .lp-h2, .lp-center .lp-lead { margin-left: auto; margin-right: auto; }

[data-reveal] { opacity: 0; transform: translateY(26px); filter: blur(6px); transition: opacity 0.9s ease, transform 0.9s cubic-bezier(0.2, 0.8, 0.2, 1), filter 0.9s ease; transition-delay: calc(var(--i, 0) * 90ms); }
[data-reveal].in { opacity: 1; transform: none; filter: none; }

.lp-divider { height: 1px; background: linear-gradient(90deg, transparent, rgba(165, 124, 255, 0.35), transparent); }

/* Cinta de funciones */
.lp-marquee { position: relative; overflow: hidden; padding: 26px 0; mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent); -webkit-mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent); }
.lp-marquee-track { display: flex; gap: 12px; width: max-content; animation: lp-marquee 42s linear infinite; }
.lp-chip { display: inline-flex; align-items: center; gap: 8px; padding: 10px 16px; border-radius: 12px; white-space: nowrap; font-size: 14px; color: var(--text-2);
  background: rgba(255, 255, 255, 0.025); border: 1px solid rgba(58, 40, 96, 0.7); }
.lp-chip svg { color: var(--accent-3); }
@keyframes lp-marquee { to { transform: translateX(-50%); } }

/* Relato con panel fijo */
.lp-story { display: grid; grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.25fr); gap: 60px; margin-top: 60px; }
.lp-steps { display: flex; flex-direction: column; }
.lp-step { min-height: 72vh; display: flex; flex-direction: column; justify-content: center; opacity: 0.28; transition: opacity 0.5s; }
.lp-step.on { opacity: 1; }
.lp-step .n { width: 40px; height: 40px; border-radius: 12px; display: grid; place-items: center; color: var(--accent-3);
  background: rgba(139, 92, 246, 0.12); border: 1px solid rgba(165, 124, 255, 0.25); }
.lp-step h3 { margin: 18px 0 0; font-size: 30px; letter-spacing: -0.03em; line-height: 1.12; font-weight: 620; }
.lp-step p { margin: 14px 0 0; color: var(--text-2); font-size: 16px; line-height: 1.65; max-width: 440px; }
.lp-step .scene-inline { display: none; }
.lp-sticky { position: sticky; top: 14vh; height: 72vh; display: flex; align-items: center; }
.lp-scenes { position: relative; width: 100%; aspect-ratio: 1.18; }
.lp-scene { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; opacity: 0; transform: translateY(24px) scale(0.97); filter: blur(8px);
  transition: opacity 0.7s ease, transform 0.8s cubic-bezier(0.2, 0.8, 0.2, 1), filter 0.7s ease; pointer-events: none; }
.lp-scene.on { opacity: 1; transform: none; filter: none; }
.lp-panel { container-type: inline-size; position: relative; width: 100%; border-radius: 18px; padding: 18px; background: linear-gradient(180deg, rgba(29, 18, 54, 0.95), rgba(19, 12, 34, 0.95));
  border: 1px solid rgba(90, 64, 150, 0.5); box-shadow: 0 30px 90px rgba(3, 0, 12, 0.6), 0 0 0 1px rgba(255, 255, 255, 0.02) inset; overflow: hidden; }
.lp-panel::before { content: ''; position: absolute; inset: -40% -20% auto; height: 60%; background: radial-gradient(closest-side, rgba(139, 92, 246, 0.22), transparent); pointer-events: none; }
.lp-panel.open { overflow: visible; }
.lp-panel.open::before { display: none; }

/* Gráfico de línea */
.lp-line path.l { fill: none; stroke-width: 2.4; stroke-linecap: round; stroke-dasharray: 1400; stroke-dashoffset: 1400; }
.lp-line.in path.l, .lp-scene.on .lp-line path.l { transition: stroke-dashoffset 2.2s cubic-bezier(0.4, 0, 0.2, 1); stroke-dashoffset: 0; }
.lp-line path.a { opacity: 0; transition: opacity 1.4s 0.6s; } .lp-line.in path.a, .lp-scene.on .lp-line path.a { opacity: 1; }

/* Alertas */
.lp-alerts { display: flex; flex-direction: column; gap: 10px; }
.lp-alert { display: flex; align-items: center; gap: 12px; padding: 12px 14px; border-radius: 12px; border: 1px solid; font-size: 13.5px; font-weight: 600;
  opacity: 0; transform: translateX(30px); transition: opacity 0.6s, transform 0.7s cubic-bezier(0.2, 0.8, 0.2, 1); transition-delay: calc(var(--i) * 140ms + 150ms); }
.lp-scene.on .lp-alert, .in .lp-alert { opacity: 1; transform: none; }
.lp-alert .ic { width: 32px; height: 32px; border-radius: 9px; display: grid; place-items: center; flex: none; }
.lp-alert small { display: block; font-weight: 500; color: var(--text-3); font-size: 12px; margin-top: 2px; }
.lp-alert.warn { background: rgba(251, 191, 36, 0.06); border-color: rgba(251, 191, 36, 0.25); } .lp-alert.warn .ic { background: rgba(251, 191, 36, 0.14); color: var(--warn); }
.lp-alert.bad { background: rgba(251, 113, 133, 0.06); border-color: rgba(251, 113, 133, 0.25); } .lp-alert.bad .ic { background: rgba(251, 113, 133, 0.14); color: var(--bad); }
.lp-alert.good { background: rgba(74, 222, 128, 0.06); border-color: rgba(74, 222, 128, 0.25); } .lp-alert.good .ic { background: rgba(74, 222, 128, 0.14); color: var(--good); }

/* Métricas grandes */
.lp-kpis { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; margin-bottom: 14px; }
.lp-kpi { padding: 12px; border-radius: 12px; background: rgba(255, 255, 255, 0.03); border: 1px solid rgba(58, 40, 96, 0.6); }
.lp-kpi > span { display: block; font-size: 11px; color: var(--text-3); font-weight: 600; }
.lp-kpi b { display: block; font-size: 22px; letter-spacing: -0.03em; margin-top: 4px; font-variant-numeric: tabular-nums; }
.lp-kpi small { font-size: 11.5px; font-weight: 650; color: var(--good); }

/* ---------------------------------------------------------------- reels */
.lp-split { display: grid; grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr); gap: 60px; align-items: center; margin-top: 50px; }
.lp-list { list-style: none; padding: 0; margin: 28px 0 0; display: flex; flex-direction: column; gap: 14px; }
.lp-list li { display: flex; gap: 12px; color: var(--text-2); font-size: 15px; line-height: 1.5; }
.lp-list li svg { flex: none; margin-top: 2px; color: var(--accent-3); }
.lp-list b { color: var(--text); }
.lp-reels { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
.lp-reel { position: relative; border-radius: 14px; overflow: hidden; aspect-ratio: 9 / 15; border: 1px solid rgba(90, 64, 150, 0.45); background: #140c24; }
.lp-reel .ph { position: absolute; inset: 0; background: radial-gradient(120% 80% at 30% 20%, var(--c1), transparent 60%), radial-gradient(100% 70% at 80% 90%, var(--c2), transparent 60%), #1a1030; }
.lp-reel .ph::after { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg, transparent 45%, rgba(8, 4, 16, 0.85)); }
.lp-reel .fig { position: absolute; left: 50%; bottom: 18%; width: 46%; aspect-ratio: 0.55; margin-left: -23%; border-radius: 50% 50% 40% 40% / 30% 30% 20% 20%; background: rgba(255, 255, 255, 0.08); filter: blur(1px); }
.lp-reel .fig::before { content: ''; position: absolute; left: 30%; top: -26%; width: 40%; aspect-ratio: 1; border-radius: 50%; background: rgba(255, 255, 255, 0.1); }
.lp-reel .vir { position: absolute; top: 8px; left: 8px; padding: 3px 7px; border-radius: 7px; font-size: 11px; font-weight: 800; color: #fff; background: rgba(12, 6, 22, 0.6); backdrop-filter: blur(6px); border: 1px solid rgba(255, 255, 255, 0.12); }
.lp-reel.top .vir { background: linear-gradient(135deg, #fbbf24, #f97316); color: #1a0f00; border-color: transparent; }
.lp-reel .meta { position: absolute; left: 10px; right: 10px; bottom: 10px; font-size: 11px; color: rgba(255, 255, 255, 0.85); }
.lp-reel .meta b { display: block; font-size: 15px; color: #fff; letter-spacing: -0.02em; }
.lp-reel .dl { position: absolute; top: 8px; right: 8px; width: 28px; height: 28px; border-radius: 8px; display: grid; place-items: center; color: #fff; background: rgba(12, 6, 22, 0.55); border: 1px solid rgba(255, 255, 255, 0.14); overflow: hidden; }
.lp-reel.top { box-shadow: 0 0 0 2px rgba(251, 191, 36, 0.8), 0 20px 50px rgba(251, 146, 60, 0.25); }
.lp-reel.top .dl { background: var(--accent); }
.lp-reel.top .dl::after { content: ''; position: absolute; left: 0; bottom: 0; height: 3px; width: 0; background: #fff; animation: lp-dl 2.6s ease-in-out infinite; }
@keyframes lp-dl { 0% { width: 0; } 70%, 100% { width: 100%; } }

/* ---------------------------------------------------------------- spoofer */
.lp-spoof { position: relative; border-radius: 26px; padding: 56px; overflow: hidden; border: 1px solid rgba(90, 64, 150, 0.5);
  background: radial-gradient(700px 400px at 90% 10%, rgba(139, 92, 246, 0.22), transparent 60%), radial-gradient(500px 300px at 0% 100%, rgba(236, 72, 153, 0.12), transparent 60%), linear-gradient(180deg, #170e2b, #110a20); }
.lp-spoof-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); gap: 50px; align-items: center; }
.lp-spoof-logo { width: 64px; height: 64px; border-radius: 18px; box-shadow: 0 14px 40px rgba(139, 92, 246, 0.5); }
/* Todo en proporciones: la animación se adapta al ancho de la columna. */
.lp-machine { position: relative; width: 100%; max-width: 520px; aspect-ratio: 520 / 380; margin-left: auto; }
.lp-src, .lp-var { position: absolute; border-radius: 14px; overflow: hidden; border: 1px solid rgba(165, 124, 255, 0.35); background: #1a1030; box-shadow: 0 20px 50px rgba(3, 0, 12, 0.6); }
.lp-src { width: 29%; height: 66%; left: 0; top: 16%; }
.lp-src .ph, .lp-var .ph { position: absolute; inset: 0; background: radial-gradient(120% 80% at 30% 20%, #c084fc, transparent 60%), radial-gradient(100% 70% at 80% 90%, #7c3aed, transparent 60%), #1a1030; }
.lp-scan { position: absolute; left: 0; right: 0; height: 40px; top: -40px; background: linear-gradient(180deg, transparent, rgba(201, 169, 255, 0.55), transparent); animation: lp-scan 3.2s ease-in-out infinite; }
@keyframes lp-scan { 0% { top: -40px; } 60%, 100% { top: 100%; } }
.lp-src .tag { position: absolute; left: 8px; bottom: 8px; padding: 3px 8px; border-radius: 6px; font-size: 10.5px; font-weight: 700; background: rgba(12, 6, 22, 0.65); color: #fff; }
.lp-flow { position: absolute; left: 29%; top: 49%; width: 14%; height: 2px; margin-top: -1px; background: linear-gradient(90deg, rgba(165, 124, 255, 0.8), transparent);
  background-size: 200% 100%; animation: lp-flow 1.2s linear infinite; }
@keyframes lp-flow { from { background-position: 100% 0; } to { background-position: -100% 0; } }
.lp-var { width: 21.5%; height: 49%; left: 47%; top: 25.5%; opacity: 0; animation: lp-fan 6s cubic-bezier(0.2, 0.8, 0.2, 1) infinite; animation-delay: calc(var(--i) * 0.35s); }
@keyframes lp-fan {
  0% { opacity: 0; transform: translate(-50%, 0) scale(0.7) rotate(0); }
  18%, 78% { opacity: 1; transform: translate(var(--x), var(--y)) rotate(var(--r)); }
  100% { opacity: 0; transform: translate(var(--x), var(--y)) rotate(var(--r)) scale(0.96); }
}
.lp-var .bits { position: absolute; left: 7px; right: 7px; bottom: 7px; padding: 5px 6px; border-radius: 7px; background: rgba(12, 6, 22, 0.72); font-size: 9.5px; color: var(--text-2); }
.lp-var .bits i { display: block; height: 3px; border-radius: 3px; margin-top: 4px; background: rgba(255, 255, 255, 0.12); overflow: hidden; }
.lp-var .bits i::after { content: ''; display: block; height: 100%; width: 0; background: linear-gradient(90deg, #a57cff, #4ade80); animation: lp-bits 6s ease-out infinite; animation-delay: calc(var(--i) * 0.35s + 0.8s); }
@keyframes lp-bits { 0% { width: 0; } 30%, 100% { width: var(--w); } }
.lp-var .ok { position: absolute; top: 7px; right: 7px; width: 20px; height: 20px; border-radius: 50%; display: grid; place-items: center; background: var(--good); color: #062b14; }

/* ---------------------------------------------------------------- datos bajo el héroe */
.lp-head { max-width: 780px; }
.lp-head-wide { max-width: 980px; }
.lp-head-wide .lp-h2 { max-width: 980px; }
.lp-defs > div:first-child { border-top: 0; padding-top: 0; }
.lp-facts { list-style: none; margin: 0; padding: 24px 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr));
  border-top: 1px solid rgba(58, 40, 96, 0.55); border-bottom: 1px solid rgba(58, 40, 96, 0.55); }
.lp-facts li { display: flex; gap: 12px; align-items: flex-start; padding: 4px 22px; border-left: 1px solid rgba(58, 40, 96, 0.55); }
.lp-facts li:first-child { padding-left: 0; border-left: 0; }
.lp-facts .ic { color: var(--accent-3); margin-top: 2px; flex: none; }
.lp-facts b { display: block; font-size: 14.5px; font-weight: 600; }
.lp-facts div > span { display: block; font-size: 13px; color: var(--text-3); margin-top: 3px; line-height: 1.45; }

/* ---------------------------------------------------------------- calendario grande */
.lp-show { position: relative; margin-top: 44px; padding: 18px; border-radius: 20px; border: 1px solid rgba(120, 95, 180, 0.38);
  background: linear-gradient(180deg, #160e2a, #110a20); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06), 0 40px 100px rgba(3, 0, 12, 0.5); }
.lp-show-top { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; padding: 2px 2px 16px; margin-bottom: 16px; border-bottom: 1px solid rgba(58, 40, 96, 0.5); }
.lp-show-grid { display: grid; grid-template-columns: minmax(0, 1fr) 272px; gap: 16px; }
.lp-show-main { position: relative; display: flex; flex-direction: column; gap: 14px; min-width: 0; }
.lp-cal { border-radius: 14px; border: 1px solid rgba(58, 40, 96, 0.6); background: rgba(255, 255, 255, 0.015); padding: 14px 16px 16px; overflow-x: auto; }
.lp-cal .hm { min-width: 560px; }
.lp-cal-h { display: flex; align-items: center; gap: 12px 16px; flex-wrap: wrap; margin-bottom: 12px; }
.lp-cal-h b { display: flex; align-items: center; gap: 8px; font-size: 14.5px; font-weight: 600; }
.lp-cal-h b svg { color: var(--accent-3); }
.lp-cal-h .lg { margin-left: auto; display: flex; align-items: center; justify-content: flex-end; gap: 6px 16px; flex-wrap: wrap; font-size: 11.5px; color: var(--text-3); position: sticky; right: 0; }
.lp-cal-h .lg > span { white-space: nowrap; }
.lp-cal-h .sw { display: inline-flex; align-items: center; gap: 4px; }
.lp-cal-h .sw i { width: 10px; height: 10px; border-radius: 3px; }
.lp-cal-h .sw i.l1 { background: var(--heat-1); } .lp-cal-h .sw i.l3 { background: var(--heat-3); } .lp-cal-h .sw i.l5 { background: var(--heat-5); }
.lp-cal-h .lp-dot::before { content: ''; display: inline-block; width: 7px; height: 7px; border-radius: 50%; margin-right: 6px; vertical-align: 1px; }
.lp-cal-h .lp-dot.y::before { background: #fbbf24; } .lp-cal-h .lp-dot.g::before { background: var(--good); }
.hm-days.today { color: var(--accent-3); font-weight: 700; }
.hm-lbl .ellipsis { overflow: hidden; text-overflow: ellipsis; }
.hm-c.col-on { box-shadow: inset 0 0 0 1px rgba(233, 220, 255, 0.5); }
.hm-c.col-on.tipped { box-shadow: 0 0 0 2px #120b22, 0 0 0 3.5px var(--accent-3); }

/* Cartel del calendario: se mueve con transform (nada de top/left animados). */
.lp-tip { position: absolute; left: 0; top: 0; z-index: 6; width: 262px; padding: 12px; border-radius: 14px; font-size: 12px; pointer-events: none;
  background: rgba(20, 12, 38, 0.97); border: 1px solid rgba(120, 95, 180, 0.5); box-shadow: 0 24px 60px rgba(0, 0, 0, 0.6);
  opacity: 0; transition: opacity 0.4s ease, transform 0.6s cubic-bezier(0.2, 0.8, 0.2, 1); }
.lp-tip.on { opacity: 1; }
.lp-tip-h { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 10px; font-weight: 600; }
.lp-tip-h > span:first-child { display: inline-flex; align-items: center; gap: 7px; }
.lp-tip-h .d { color: var(--text-3); font-weight: 500; font-size: 11.5px; }
.lp-tip-sec { padding-top: 9px; border-top: 1px solid rgba(58, 40, 96, 0.6); }
.lp-tip-sec + .lp-tip-sec { margin-top: 9px; }
.lp-tip-sec .k { display: block; font-size: 10px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--text-3); font-weight: 600; margin-bottom: 7px; }
.lp-tip-reel { display: grid; grid-template-columns: 24px 1fr; gap: 9px; align-items: center; margin-bottom: 6px; }
.lp-tip-reel i { width: 24px; height: 40px; border-radius: 5px; background: linear-gradient(160deg, var(--c1), var(--c2)); }
.lp-tip-reel b { display: block; font-size: 12.5px; } .lp-tip-reel span { color: var(--text-3); font-size: 11.5px; }
.lp-tip-reel em { font-style: normal; color: #fbbf24; font-weight: 600; }
.lp-tip-story { color: var(--text-2); } .lp-tip-story b { color: var(--text); } .lp-tip-story b.good { color: var(--good); }
.lp-tip-story .lnk { display: flex; align-items: center; gap: 6px; margin-top: 7px; padding: 6px 8px; border-radius: 8px; color: var(--good);
  background: rgba(74, 222, 128, 0.07); border: 1px solid rgba(74, 222, 128, 0.2); font-size: 11.5px; }

.lp-show-side { display: flex; flex-direction: column; gap: 12px; }
.lp-kpi2 { padding: 14px 16px; border-radius: 14px; border: 1px solid rgba(58, 40, 96, 0.6); background: rgba(255, 255, 255, 0.02); }
.lp-kpi2 > span { display: block; font-size: 12px; color: var(--text-3); font-weight: 600; }
.lp-kpi2 b { display: block; margin-top: 6px; font-size: 30px; font-weight: 650; letter-spacing: -0.03em; line-height: 1.05; font-variant-numeric: tabular-nums; }
.lp-kpi2 small { display: block; margin-top: 4px; font-size: 12px; color: var(--text-3); font-variant-numeric: tabular-nums; }
.lp-kpi2 small.good { color: var(--good); }
.lp-side-alerts { display: flex; flex-direction: column; gap: 8px; margin-top: 2px; }
.lp-side-alerts .k { font-size: 11px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--text-3); font-weight: 600; }
.lp-alert2 { display: flex; gap: 9px; align-items: flex-start; padding: 10px 11px; border-radius: 11px; font-size: 12.5px; line-height: 1.4; color: var(--text-2); border: 1px solid; }
.lp-alert2 svg { flex: none; margin-top: 1px; }
.lp-alert2 b { color: var(--text); font-weight: 600; }
.lp-alert2.warn { background: rgba(251, 191, 36, 0.06); border-color: rgba(251, 191, 36, 0.22); } .lp-alert2.warn svg { color: var(--warn); }
.lp-alert2.bad { background: rgba(251, 113, 133, 0.06); border-color: rgba(251, 113, 133, 0.22); } .lp-alert2.bad svg { color: var(--bad); }

.lp-points { list-style: none; padding: 0; margin: 52px 0 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); }
.lp-points li { padding: 0 28px; border-left: 1px solid rgba(58, 40, 96, 0.6); }
.lp-points li:first-child { padding-left: 0; border-left: 0; }
.lp-points .ic, .lp-step .n { width: 38px; height: 38px; border-radius: 11px; display: grid; place-items: center; color: var(--accent-3);
  background: rgba(139, 92, 246, 0.12); border: 1px solid rgba(165, 124, 255, 0.25); }
.lp-points h3 { margin: 16px 0 0; font-size: 17px; font-weight: 620; letter-spacing: -0.015em; }
.lp-points p { margin: 8px 0 0; color: var(--text-2); font-size: 14.5px; line-height: 1.6; }

/* ---------------------------------------------------------------- reels */
.lp-reelstage { position: relative; padding-bottom: 56px; }
.lp-reel .meta { font-size: 10.5px; color: rgba(255, 255, 255, 0.75); }
.lp-dlcard { position: absolute; right: -14px; bottom: 0; width: min(330px, 86%); padding: 14px; border-radius: 14px;
  background: rgba(20, 12, 38, 0.97); border: 1px solid rgba(120, 95, 180, 0.5); box-shadow: 0 24px 60px rgba(0, 0, 0, 0.55);
  opacity: 0; transform: translateY(16px); transition: opacity 0.7s ease 0.4s, transform 0.8s cubic-bezier(0.2, 0.8, 0.2, 1) 0.4s; }
.lp-dlcard.in { opacity: 1; transform: none; }
.lp-dl-h { display: flex; align-items: center; gap: 8px; font-size: 13px; }
.lp-dl-h svg { color: var(--accent-3); }
.lp-dl-h span { margin-left: auto; font-size: 11px; color: var(--text-3); font-weight: 600; }
.lp-dlbar { height: 4px; border-radius: 4px; background: rgba(255, 255, 255, 0.08); margin: 10px 0; overflow: hidden; }
.lp-dlbar i { display: block; height: 100%; transform-origin: left; transform: scaleX(0); background: linear-gradient(90deg, #8b5cf6, #c9a9ff); }
.lp-dlcard.in .lp-dlbar i { animation: lp-dlfill 4.2s cubic-bezier(0.4, 0, 0.2, 1) infinite; }
@keyframes lp-dlfill { 0% { transform: scaleX(0); } 70%, 100% { transform: scaleX(1); } }
.lp-dlcard ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; font-size: 11.5px; color: var(--text-2); font-family: ui-monospace, 'SF Mono', Menlo, monospace; }
.lp-dlcard li { display: flex; gap: 7px; align-items: center; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.lp-dlcard li svg { color: var(--good); flex: none; }
.lp-defs { margin: 28px 0 0; }
.lp-defs > div { padding: 16px 0; border-top: 1px solid rgba(58, 40, 96, 0.55); }
.lp-defs dt { font-weight: 600; font-size: 15px; }
.lp-defs dt b { color: #b99bff; font-variant-numeric: tabular-nums; }
.lp-defs dd { margin: 6px 0 0; color: var(--text-2); font-size: 14.5px; line-height: 1.6; }

/* ---------------------------------------------------------------- foko spoofer */
.lp-spoof-brand { display: flex; align-items: center; gap: 14px; }
.lp-spoof .lp-spoof-logo { width: 56px; height: 56px; border-radius: 16px; box-shadow: 0 12px 30px rgba(76, 38, 170, 0.45); }
.lp-kicker { font-size: 13px; font-weight: 600; color: var(--accent-3); padding: 5px 11px; border-radius: 999px; background: rgba(139, 92, 246, 0.12); border: 1px solid rgba(165, 124, 255, 0.25); }
.lp-wordmark { margin: 22px 0 0; font-size: clamp(46px, 6.4vw, 80px); line-height: 1; letter-spacing: -0.045em; font-weight: 700; }
.lp-mini { list-style: none; padding: 0; margin: 26px 0 0; display: flex; flex-direction: column; gap: 16px; }
.lp-mini li { display: flex; gap: 14px; align-items: flex-start; }
.lp-mini li > span { width: 28px; height: 28px; border-radius: 50%; display: grid; place-items: center; flex: none; font-size: 12.5px; font-weight: 700; color: #fff;
  background: rgba(139, 92, 246, 0.35); border: 1px solid rgba(165, 124, 255, 0.45); font-variant-numeric: tabular-nums; }
.lp-mini div { color: var(--text-2); font-size: 14px; line-height: 1.55; }
.lp-mini b { display: block; font-size: 15px; color: var(--text); font-weight: 600; }
.lp-fine { display: flex; align-items: center; gap: 8px; margin: 24px 0 0; font-size: 13px; color: var(--text-3); }
.lp-var .bits { font-weight: 600; color: var(--text); }

/* ---------------------------------------------------------------- equipo */
.lp-split-rev { grid-template-columns: minmax(0, 1.2fr) minmax(0, 0.8fr); }
.lp-teamgrid { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr); gap: 14px; margin-top: 44px; align-items: stretch; }
.lp-teamcol { display: flex; flex-direction: column; gap: 14px; }
.lp-teamgrid > div:last-child .lp-panel { height: 100%; }
.lp-teamgrid .lp-feed { height: auto; max-height: 520px; }
.lp-perms table { width: 100%; border-collapse: collapse; font-size: 13.5px; }
.lp-perms th, .lp-perms td { padding: 11px 8px; border-top: 1px solid rgba(58, 40, 96, 0.45); }
.lp-perms thead th { border-top: 0; padding-top: 2px; font-size: 12px; color: var(--text-3); font-weight: 600; text-align: center; }
.lp-perms tbody th { text-align: left; font-weight: 500; color: var(--text-2); }
.lp-perms td { text-align: center; width: 17%; }
.lp-yes { display: inline-grid; place-items: center; width: 22px; height: 22px; border-radius: 7px; background: rgba(139, 92, 246, 0.18); color: var(--accent-3); }
.lp-no { color: var(--text-3); font-weight: 700; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; }

/* Pasos: una línea de tiempo, sin tarjetas. */
.lp-timeline { list-style: none; padding: 0; margin: 52px auto 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 36px; position: relative; max-width: 980px; text-align: left; }
.lp-timeline::before { content: ''; position: absolute; top: 19px; left: 19px; right: 19px; height: 1px; background: linear-gradient(90deg, rgba(165, 124, 255, 0.65), rgba(165, 124, 255, 0.12));
  transform: scaleX(0); transform-origin: left; transition: transform 1.4s cubic-bezier(0.2, 0.8, 0.2, 1) 0.2s; }
.lp-timeline.in::before { transform: scaleX(1); }
.lp-timeline li { position: relative; }
.lp-timeline .num { position: relative; z-index: 1; width: 38px; height: 38px; border-radius: 50%; display: grid; place-items: center; font-weight: 700; color: #fff; background: #7c5cf0; box-shadow: 0 0 0 6px var(--bg); font-variant-numeric: tabular-nums; }
.lp-timeline h3 { margin: 20px 0 0; font-size: 19px; letter-spacing: -0.02em; font-weight: 620; }
.lp-timeline p { margin: 8px 0 0; color: var(--text-2); line-height: 1.6; font-size: 14.5px; max-width: 32ch; }
.lp-team { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; margin-top: 50px; }
.lp-role { position: relative; padding: 24px; border-radius: 18px; background: linear-gradient(180deg, #1a1030, #140c24); border: 1px solid rgba(90, 64, 150, 0.45); overflow: hidden; }
.lp-role::before { content: ''; position: absolute; inset: 0; background: radial-gradient(360px circle at var(--mx, 50%) var(--my, 0%), rgba(165, 124, 255, 0.16), transparent 50%); opacity: 0; transition: opacity 0.3s; pointer-events: none; }
.lp-role:hover::before { opacity: 1; }
.lp-role .ic { width: 42px; height: 42px; border-radius: 12px; display: grid; place-items: center; color: var(--accent-3); background: rgba(139, 92, 246, 0.14); border: 1px solid rgba(165, 124, 255, 0.25); }
.lp-role h4 { margin: 16px 0 0; font-size: 18px; letter-spacing: -0.02em; }
.lp-role p { margin: 8px 0 0; color: var(--text-2); line-height: 1.6; font-size: 14.5px; }
.lp-feedwrap { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 14px; margin-top: 14px; }
.lp-feed { display: flex; flex-direction: column; gap: 8px; height: 286px; overflow: hidden; mask-image: linear-gradient(180deg, #000 70%, transparent); -webkit-mask-image: linear-gradient(180deg, #000 70%, transparent); }
.lp-ev { display: flex; align-items: center; gap: 11px; padding: 10px 12px; border-radius: 12px; background: rgba(255, 255, 255, 0.025); border: 1px solid rgba(58, 40, 96, 0.55); font-size: 13.5px; color: var(--text-2);
  animation: lp-evin 0.6s cubic-bezier(0.2, 0.8, 0.2, 1); }
.lp-ev b { color: var(--text); } .lp-ev small { margin-left: auto; color: var(--text-3); font-size: 11.5px; white-space: nowrap; }
.lp-ev .ic { width: 28px; height: 28px; border-radius: 8px; display: grid; place-items: center; background: rgba(139, 92, 246, 0.14); color: var(--accent-3); flex: none; }
@keyframes lp-evin { from { opacity: 0; transform: translateY(-14px) scale(0.98); } to { opacity: 1; transform: none; } }
.lp-assign { display: flex; flex-direction: column; gap: 10px; }
.lp-person { display: flex; align-items: center; gap: 12px; padding: 12px; border-radius: 14px; background: rgba(255, 255, 255, 0.025); border: 1px solid rgba(58, 40, 96, 0.55); }
.lp-person .who { flex: 1; min-width: 0; } .lp-person .who b { display: block; font-size: 14px; } .lp-person .who span { font-size: 12px; color: var(--text-3); }
.lp-person .av { width: 34px; height: 34px; font-size: 12px; }
.lp-mchips { display: flex; gap: 5px; flex-wrap: wrap; justify-content: flex-end; }
.lp-mchip { display: inline-flex; align-items: center; gap: 5px; padding: 3px 8px 3px 3px; border-radius: 999px; font-size: 11.5px; font-weight: 600; background: rgba(139, 92, 246, 0.14); border: 1px solid rgba(165, 124, 255, 0.25); }
.lp-mchip .av { width: 18px; height: 18px; font-size: 8.5px; }

/* ---------------------------------------------------------------- pasos */
.lp-how { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; margin-top: 54px; position: relative; }
.lp-how::before { content: ''; position: absolute; top: 44px; left: 12%; right: 12%; height: 1px; background: linear-gradient(90deg, transparent, rgba(165, 124, 255, 0.5), transparent); transform: scaleX(0); transition: transform 1.6s cubic-bezier(0.2, 0.8, 0.2, 1); }
.lp-how.in::before { transform: scaleX(1); }
.lp-howc { position: relative; padding: 26px; border-radius: 18px; background: linear-gradient(180deg, #1a1030, #140c24); border: 1px solid rgba(90, 64, 150, 0.45); }
.lp-howc .num { width: 38px; height: 38px; border-radius: 12px; display: grid; place-items: center; font-weight: 800; color: #fff; background: linear-gradient(135deg, #a57cff, #6d3fe0); box-shadow: 0 10px 26px rgba(124, 77, 240, 0.45); }
.lp-howc h4 { margin: 18px 0 0; font-size: 18px; letter-spacing: -0.02em; }
.lp-howc p { margin: 8px 0 0; color: var(--text-2); line-height: 1.6; font-size: 14.5px; }

/* ---------------------------------------------------------------- cierre */
.lp-final { position: relative; margin: 0 auto; max-width: 1040px; border-radius: 24px; padding: 84px 40px; text-align: center; overflow: hidden; isolation: isolate;
  border: 1px solid rgba(120, 95, 180, 0.38); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06);
  background: radial-gradient(620px 300px at 50% 0%, rgba(118, 70, 235, 0.26), transparent 70%), #110a20; }
.lp-final .lp-bigstar { top: -220px; width: 600px; height: 600px; margin-left: -300px; opacity: 0.08; z-index: -1; }
.lp-final h2 { margin: 0; font-size: clamp(34px, 5vw, 58px); letter-spacing: -0.04em; line-height: 1.04; font-weight: 650; }
.lp-final p { margin: 18px auto 0; max-width: 520px; color: var(--text-2); font-size: 17px; line-height: 1.6; }
.lp-final .lp-actions { display: flex; justify-content: center; gap: 12px; margin-top: 32px; flex-wrap: wrap; }

.lp-foot { padding: 60px 0 40px; margin-top: 120px; border-top: 1px solid rgba(58, 40, 96, 0.5); color: var(--text-3); font-size: 13px; }
.lp-foot .lp-wrap { display: flex; align-items: center; gap: 20px; flex-wrap: wrap; }
.lp-foot nav { margin-left: auto; display: flex; gap: 18px; }
.lp-foot nav a:hover { color: var(--text); }

/* ---------------------------------------------------------------- pantallas medianas */
@media (max-width: 1180px) {
  .lp-show-grid { grid-template-columns: 1fr; }
  .lp-show-side { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .lp-side-alerts { grid-column: 1 / -1; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .lp-side-alerts .k { grid-column: 1 / -1; }
}

/* ---------------------------------------------------------------- pantallas chicas */
@media (max-width: 960px) {
  .lp-links { display: none; }
  .lp-hero { padding-top: 120px; }
  .mx { grid-template-columns: 1fr; min-height: 0; }
  .mx-side { display: none; }
  .mx-accs { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .mx-accs > :nth-child(3) { display: none; }
  .lp-story { grid-template-columns: 1fr; gap: 0; }
  .lp-sticky { display: none; }
  .lp-step { min-height: 0; padding: 40px 0; opacity: 1; }
  .lp-step .scene-inline { display: block; margin-top: 24px; }
  .lp-split, .lp-split-rev, .lp-spoof-grid, .lp-feedwrap, .lp-teamgrid, .lp-show-grid { grid-template-columns: 1fr; }
  .lp-side-alerts { grid-template-columns: 1fr; }
  .lp-show { padding: 12px; }
  .lp-points { grid-template-columns: 1fr; gap: 28px; }
  .lp-points li { padding: 0; border-left: 0; }
  .lp-facts { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px 0; }
  .lp-facts li:nth-child(3) { padding-left: 0; border-left: 0; }
  .lp-dlcard { position: relative; right: auto; margin-top: 14px; width: 100%; }
  .lp-reelstage { padding-bottom: 0; }
  .lp-split-rev .lp-split-media { order: 2; }
  .lp-timeline { grid-template-columns: 1fr; gap: 28px; }
  .lp-timeline::before { display: none; }
  .lp-reels { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .lp-team, .lp-how { grid-template-columns: 1fr; }
  .lp-how::before { display: none; }
  .lp-spoof { padding: 32px 22px; }
  .lp-machine { margin: 20px auto 0; }
  .lp-sec { padding: 80px 0; }
}
@media (max-width: 560px) {
  .lp-wrap { width: calc(100% - 32px); }
  .lp-nav .lp-btn.ghost { display: none; }
  .mx-accs { grid-template-columns: 1fr; }
  .mx-accs > :nth-child(2) { display: none; }
  .lp-kpis { grid-template-columns: 1fr 1fr; }
  .lp-show-side { grid-template-columns: 1fr; }
  .lp-facts { grid-template-columns: 1fr; }
  .lp-facts li { padding-left: 0; border-left: 0; }
  .lp-final-in { padding: 56px 20px; }
}

@media (prefers-reduced-motion: reduce) {
  .lp *, .lp *::before, .lp *::after { animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; transition-duration: 0.001ms !important; }
  .lp-h1 .w, [data-reveal], .lp-fade, .hm-c, .lp-alert { opacity: 1 !important; transform: none !important; filter: none !important; }
  .lp-var { opacity: 1; transform: translate(var(--x), var(--y)) rotate(var(--r)); }
}

/* ---------------------------------------------------------------- precios */
.lp-price-head { margin: 0 auto; }
.lp-price-toggle { margin-top: 30px; display: flex; justify-content: center; }
.lp-pricing { margin-top: 56px; }
.lp-pricing .pr-card { padding: 32px 28px 30px; }
.lp-pricing .pr-price b { font-size: 50px; }
.lp-free { margin: 22px auto 0; max-width: 1180px; }
.lp-included { margin-top: 64px; padding: 34px 36px; border-radius: 20px; border: 1px solid rgba(58, 40, 96, 0.6); background: linear-gradient(180deg, rgba(22, 14, 39, 0.7), rgba(16, 9, 29, 0.4)); }
.lp-included h3 { margin: 0 0 22px; font-size: 13px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--text-3); }
.lp-faq { margin: 72px auto 0; max-width: 780px; }
.lp-faq h3 { margin: 0 0 18px; font-size: 24px; letter-spacing: -0.02em; font-weight: 620; text-align: center; }
.lp-faq details { border-bottom: 1px solid rgba(58, 40, 96, 0.6); }
.lp-faq summary { list-style: none; display: flex; align-items: center; gap: 16px; padding: 20px 4px; cursor: pointer; font-size: 16px; font-weight: 560; color: var(--text); }
.lp-faq summary::-webkit-details-marker { display: none; }
.lp-faq summary svg { margin-left: auto; flex: none; color: var(--text-3); transition: transform 0.25s ease, color 0.2s; }
.lp-faq details[open] summary svg { transform: rotate(45deg); color: var(--accent-3); }
.lp-faq summary:hover svg { color: var(--text); }
.lp-faq summary:focus-visible { outline: 2px solid var(--accent-3); outline-offset: 2px; border-radius: 8px; }
.lp-faq details p { margin: 0 0 20px; padding: 0 4px; max-width: 64ch; color: var(--text-2); font-size: 15px; line-height: 1.65; }
@media (max-width: 560px) {
  .lp-included { padding: 24px 20px; }
  .lp-faq summary { font-size: 15px; }
}