/* =========================================================================
   Prestami - sitio comercial (portada y landings)
   Tipografía grande y apretada, bloques de color a sangre, mucho aire y
   maquetas de producto construidas en HTML/SVG (no imágenes genéricas).
   ========================================================================= */

.ps {
  --ink: #07080d;
  --ink-2: #2b2d36;
  --muted: #5f6270;
  --line: rgba(7, 8, 13, .1);
  --paper: #ffffff;
  --cloud: #f4f5f8;
  --violet: #5b4dff;
  --violet-2: #8a7dff;
  --mint: #12d69a;
  --lime: #d6ff3d;
  --yellow: #fff200;
  --amber: #ffb020;
  --rose: #ff4d6d;
  --navy: #0a1a3a;
  --gold: #e8b85a;
  --accent: var(--violet);
  --accent-ink: #fff;
  --hero-bg: #07080d;
  --hero-ink: #fff;
  --hero-muted: rgba(255, 255, 255, .72);
  --glow-1: rgba(91, 77, 255, .55);
  --glow-2: rgba(18, 214, 154, .28);
  --radius: 28px;
  background: var(--paper);
  color: var(--ink);
  font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  font-size: 17px;
  line-height: 1.55;
  overflow: hidden;
  -webkit-font-smoothing: antialiased;
}
.ps *, .ps *::before, .ps *::after { box-sizing: border-box; }
.ps :where(h1, h2, h3, h4) { color: inherit; font-family: "Inter Tight", "Inter", sans-serif; font-weight: 800; letter-spacing: -.035em; line-height: 1.02; margin: 0; }
:where(.ps) p { margin: 0; }
.ps a { text-decoration: none; }
.ps em { font-style: normal; }
:where(.ps) ul, :where(.ps) ol, :where(.ps) li { color: inherit; list-style: none; margin: 0; padding: 0; }
.ps-container { margin: 0 auto; max-width: 1240px; padding: 0 24px; position: relative; }
[id] { scroll-margin-top: 80px; }

/* ---------- temas por página ---------- */
.ps--ink    { --accent: var(--violet); --hero-bg: #07080d; --glow-1: rgba(91,77,255,.55); --glow-2: rgba(18,214,154,.25); }
.ps--violet { --accent: #ffffff; --accent-ink: var(--violet); --hero-bg: var(--violet); --glow-1: rgba(255,255,255,.35); --glow-2: rgba(214,255,61,.3); }
.ps--yellow { --accent: #07080d; --accent-ink: var(--yellow); --hero-bg: var(--yellow); --hero-ink: #07080d; --hero-muted: rgba(7,8,13,.72); --glow-1: rgba(255,255,255,.7); --glow-2: rgba(255,176,32,.35); }
.ps--mint   { --accent: var(--mint); --accent-ink: #04130d; --hero-bg: #04130d; --glow-1: rgba(18,214,154,.45); --glow-2: rgba(214,255,61,.2); }
.ps--green  { --accent: #0f9d58; --hero-bg: #f2fbf5; --hero-ink: #07080d; --hero-muted: #3f4a44; --glow-1: rgba(15,157,88,.22); --glow-2: rgba(91,77,255,.14); }
.ps--navy   { --accent: var(--gold); --accent-ink: #1a1305; --hero-bg: var(--navy); --glow-1: rgba(232,184,90,.28); --glow-2: rgba(91,77,255,.3); }
.ps--light  { --accent: var(--violet); --hero-bg: #f5f4ff; --hero-ink: #07080d; --hero-muted: #4b4e5b; --glow-1: rgba(91,77,255,.2); --glow-2: rgba(18,214,154,.16); }

/* cabecera del layout sobre héroes oscuros */
body:has(.ps-hero.is-dark) #header .navbar-brand-logo { filter: brightness(0) invert(1); }
body:has(.ps-hero.is-dark) #header .nav-link { color: rgba(255,255,255,.8); }
body:has(.ps-hero.is-dark) #header .nav-link:hover { color: #fff; }
body:has(.ps-hero.is-dark) #header .navbar-toggler { color: #fff; }
body:has(.ps-hero.is-dark) #header .btn-dark { background: transparent; border-color: rgba(255,255,255,.7); color: #fff; }
body:has(.ps-hero) #header .btn-primary { background: #5b4dff; border-color: #5b4dff; border-radius: 999px; color: #fff; font-weight: 600; }
body:has(.ps-hero) #header .btn-dark { border-radius: 999px; font-weight: 600; }
body:has(.ps-hero.is-dark) #header.navbar-scrolled .navbar-brand-logo { filter: none; }
body:has(.ps-hero.is-dark) #header.navbar-scrolled .nav-link { color: #2b2d36 !important; }
body:has(.ps-hero.is-dark) #header.navbar-scrolled .navbar-toggler { color: #111; }
body:has(.ps-hero.is-dark) #header.navbar-scrolled .btn-dark { border-color: #111; color: #111; }
body:has(.ps) #header .nav-link { font-weight: 500; }

/* ---------- botones ---------- */
.ps-btn {
  align-items: center; border: 0; border-radius: 999px; cursor: pointer; display: inline-flex; font-size: 16px;
  font-weight: 700; gap: 10px; height: 58px; justify-content: center; letter-spacing: -.01em; padding: 0 30px;
  transition: transform .2s ease, box-shadow .2s ease, background-color .2s ease; white-space: nowrap;
}
.ps-btn:hover { transform: translateY(-2px); }
.ps-btn:focus-visible { outline: 3px solid var(--accent); outline-offset: 3px; }
.ps-btn i { font-size: 18px; transition: transform .2s ease; }
.ps-btn:hover i { transform: translateX(3px); }
.ps-btn-accent { background: var(--accent); box-shadow: 0 18px 40px -18px var(--glow-1); color: var(--accent-ink) !important; }
.ps-btn-ghost { background: transparent; box-shadow: inset 0 0 0 1.5px currentColor; color: inherit !important; }
.ps-btn-dark { background: var(--ink); color: #fff !important; }
.ps-btn-white { background: #fff; color: var(--ink) !important; }
.ps-actions { align-items: center; display: flex; flex-wrap: wrap; gap: 14px; }

/* ---------- héroe ---------- */
.ps-hero { background: var(--hero-bg); color: var(--hero-ink); isolation: isolate; overflow: hidden; padding: 150px 0 110px; position: relative; }
.ps-hero::before, .ps-hero::after { border-radius: 50%; content: ""; filter: blur(80px); pointer-events: none; position: absolute; z-index: -1; }
.ps-hero::before { background: var(--glow-1); height: 620px; right: -120px; top: -80px; width: 620px; animation: ps-drift 16s ease-in-out infinite alternate; }
.ps-hero::after { background: var(--glow-2); bottom: -260px; height: 520px; left: -160px; width: 520px; animation: ps-drift 20s ease-in-out infinite alternate-reverse; }
.ps-hero-grid { background-image: linear-gradient(rgba(255,255,255,.05) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.05) 1px, transparent 1px); background-size: 64px 64px; inset: 0; mask-image: radial-gradient(ellipse at 60% 40%, #000 20%, transparent 70%); position: absolute; z-index: -1; }
.ps-hero:not(.is-dark) .ps-hero-grid { background-image: linear-gradient(rgba(7,8,13,.06) 1px, transparent 1px), linear-gradient(90deg, rgba(7,8,13,.06) 1px, transparent 1px); }
.ps-hero h1 { font-size: clamp(38px, 4.6vw, 64px); line-height: 1.04; }
.ps-hero--split h1, .ps-hero--phones h1, .ps-hero--price h1, .ps-hero--calculator h1 { font-size: clamp(36px, 3.9vw, 54px); }
.ps-hero h1 em { background: linear-gradient(100deg, var(--hero-ink) 0%, var(--hero-ink) 30%, color-mix(in srgb, var(--accent) 70%, var(--hero-ink)) 100%); -webkit-background-clip: text; background-clip: text; color: transparent; }
.ps--ink .ps-hero h1 em, .ps--mint .ps-hero h1 em, .ps--navy .ps-hero h1 em { background: linear-gradient(100deg, #fff 0%, var(--accent) 90%); -webkit-background-clip: text; background-clip: text; }
.ps--violet .ps-hero h1 em { background: none; color: var(--lime); }
.ps--yellow .ps-hero h1 em { background: none; box-shadow: inset 0 -.18em 0 #fff; color: var(--ink); }
.ps--green .ps-hero h1 em, .ps--light .ps-hero h1 em { background: linear-gradient(100deg, var(--ink) 0%, var(--accent) 80%); -webkit-background-clip: text; background-clip: text; }
.ps-hero-text { color: var(--hero-muted); font-size: clamp(17px, 1.5vw, 20px); margin: 28px 0 38px; max-width: 580px; }
.ps-notes { display: flex; flex-wrap: wrap; gap: 10px 22px; margin-top: 34px; }
.ps-notes li { align-items: center; color: var(--hero-muted); display: flex; font-size: 14px; font-weight: 500; gap: 8px; }
.ps-notes li i { color: var(--accent); font-size: 16px; }
.ps--yellow .ps-notes li i, .ps--violet .ps-notes li i { color: currentColor; }

.ps-hero--split .ps-hero-layout { align-items: center; display: grid; gap: 56px; grid-template-columns: minmax(0, 1fr) minmax(0, 1.08fr); }
.ps-hero--mega { text-align: center; }
.ps-hero--mega .ps-hero-copy { margin: 0 auto; max-width: 1040px; }
.ps-hero--mega .ps-hero-text { margin-left: auto; margin-right: auto; }
.ps-hero--mega .ps-actions, .ps-hero--mega .ps-notes { justify-content: center; }
.ps-hero--mega .ps-hero-stage { margin: 80px auto 0; max-width: 980px; perspective: 1800px; }
.ps-hero--mega .ps-hero-stage > .ui-window { transform: rotateX(14deg) scale(.98); transform-origin: top center; transition: transform 1.2s cubic-bezier(.2,.8,.2,1); }
.ps-hero--mega .ps-hero-stage.is-visible > .ui-window { transform: rotateX(0) scale(1); }
.ps-hero--block .ps-hero-layout, .ps-hero--price .ps-hero-layout, .ps-hero--phones .ps-hero-layout, .ps-hero--calculator .ps-hero-layout { align-items: center; display: grid; gap: 56px; grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr); }
.ps-hero--block h1 { font-size: clamp(42px, 5.4vw, 76px); }
.ps-hero--price h1 { font-size: clamp(44px, 5.6vw, 80px); }
.ps-hero--calculator { padding-bottom: 80px; }
.ps-hero--calculator .ps-hero-layout { align-items: start; grid-template-columns: minmax(0, .82fr) minmax(0, 1.18fr); }
.ps-hero-stage { position: relative; }

/* ---------- secciones base ---------- */
.ps-section { padding: 120px 0; position: relative; }
.ps-section.is-dark { background: var(--ink); color: #fff; }
.ps-section.is-cloud { background: var(--cloud); }
.ps-h2 { font-size: clamp(30px, 3.2vw, 46px); line-height: 1.08; max-width: 820px; }
.ps-lead { color: var(--muted); font-size: 19px; margin-top: 22px; max-width: 640px; }
.is-dark .ps-lead { color: rgba(255,255,255,.7); }
.ps-heading { margin-bottom: 64px; }
.ps-heading.is-center { margin-left: auto; margin-right: auto; max-width: 860px; text-align: center; }
.ps-heading.is-center .ps-h2, .ps-heading.is-center .ps-lead { margin-left: auto; margin-right: auto; }

/* frase grande */
.ps-statement { padding: 140px 0; }
.ps-statement p { font-family: "Inter Tight", sans-serif; font-size: clamp(26px, 3vw, 44px); font-weight: 800; letter-spacing: -.03em; line-height: 1.14; max-width: 1000px; }
.ps-statement p em { color: var(--violet); }
.ps-statement.is-dark p em { color: var(--yellow); }
.ps-chips { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 48px; }
.ps-chips span { align-items: center; background: var(--cloud); border-radius: 999px; display: inline-flex; font-size: 15px; font-weight: 600; gap: 8px; padding: 12px 20px; }
.ps-chips span i { color: var(--mint); }
.is-dark .ps-chips span { background: rgba(255,255,255,.08); color: #fff; }

/* bloque texto + maqueta */
.ps-split { align-items: center; display: grid; gap: 80px; grid-template-columns: minmax(0, .95fr) minmax(0, 1.05fr); }
.ps-split.is-reverse .ps-split-copy { order: 2; }
.ps-split-copy .ps-h2 { font-size: clamp(28px, 2.8vw, 40px); }
.ps-points { display: grid; gap: 14px; margin-top: 34px; }
.ps-points li { align-items: flex-start; display: flex; font-size: 17px; font-weight: 500; gap: 14px; }
.ps-points li i { align-items: center; background: color-mix(in srgb, var(--mint) 16%, transparent); border-radius: 50%; color: #07a877; display: inline-flex; flex-shrink: 0; font-size: 14px; height: 26px; justify-content: center; margin-top: 1px; width: 26px; }
.ps-stage {
  align-items: center; border-radius: 36px; display: flex; justify-content: center; min-height: 560px; overflow: hidden;
  padding: 56px 40px; position: relative;
  background: radial-gradient(120% 90% at 100% 0%, rgba(91,77,255,.22), transparent 55%), radial-gradient(90% 80% at 0% 100%, rgba(18,214,154,.2), transparent 55%), #0d0f18;
}
.ps-stage.is-soft { background: radial-gradient(120% 90% at 100% 0%, rgba(91,77,255,.16), transparent 55%), radial-gradient(90% 80% at 0% 100%, rgba(255,176,32,.14), transparent 55%), #eef0f6; }
.ps-stage::after { background: linear-gradient(115deg, transparent 35%, rgba(255,255,255,.06) 50%, transparent 65%); content: ""; inset: 0; pointer-events: none; position: absolute; }

/* cifras */
.ps-stats { display: grid; gap: 1px; grid-template-columns: repeat(4, 1fr); }
.ps-stat { border-left: 1px solid rgba(255,255,255,.14); padding: 8px 32px; }
.ps-stat:first-child { border-left: 0; padding-left: 0; }
.ps-stat b { display: block; font-family: "Inter Tight", sans-serif; font-size: clamp(46px, 4.6vw, 70px); font-weight: 800; letter-spacing: -.05em; line-height: 1; }
.ps-stat span { color: rgba(255,255,255,.7); display: block; font-size: 16px; margin-top: 14px; max-width: 220px; }
.ps--navy .ps-stat b { color: var(--gold); }

/* comparación */
.ps-compare { border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; }
.ps-compare-row { display: grid; grid-template-columns: 1.1fr 1fr 1fr; }
.ps-compare-row > div { align-items: center; border-top: 1px solid var(--line); display: flex; font-size: 16px; gap: 12px; padding: 22px 28px; }
.ps-compare-row.is-head > div { border-top: 0; font-size: 13px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; }
.ps-compare-row > div:nth-child(1) { font-weight: 700; }
.ps-compare-row > div:nth-child(2) { color: var(--muted); }
.ps-compare-row > div:nth-child(3) { background: color-mix(in srgb, var(--violet) 5%, #fff); font-weight: 600; }
.ps-compare-row.is-head > div:nth-child(3) { background: var(--ink); color: #fff; }
.ps-compare-row .bi-x-circle-fill { color: var(--rose); }
.ps-compare-row .bi-check-circle-fill { color: #07a877; }

/* pasos */
.ps-steps { counter-reset: paso; display: grid; gap: 20px; grid-template-columns: repeat(var(--n, 4), minmax(0, 1fr)); position: relative; }
.ps-step { background: var(--cloud); border-radius: var(--radius); min-height: 250px; padding: 34px 30px; position: relative; transition: transform .3s ease, background-color .3s ease; }
.ps-step:hover { background: var(--ink); color: #fff; transform: translateY(-6px); }
.ps-step:hover p { color: rgba(255,255,255,.72); }
.ps-step::before { counter-increment: paso; content: "0" counter(paso); display: block; font-family: "Inter Tight", sans-serif; font-size: 64px; font-weight: 800; letter-spacing: -.05em; line-height: 1; margin-bottom: 40px; opacity: .16; }
.ps-step h3 { font-size: 24px; letter-spacing: -.02em; }
.ps-step p { color: var(--muted); font-size: 16px; margin-top: 10px; }

/* línea de tiempo (gota a gota) */
.ps-timeline { display: grid; gap: 0; grid-template-columns: repeat(4, 1fr); position: relative; }
.ps-timeline::before { background: rgba(255,255,255,.15); content: ""; height: 2px; left: 0; position: absolute; right: 0; top: 34px; }
.ps-timeline::after { background: var(--yellow); content: ""; height: 2px; left: 0; position: absolute; top: 34px; transform: scaleX(0); transform-origin: left; transition: transform 2.4s cubic-bezier(.2,.8,.2,1); width: 100%; }
.ps-timeline.is-visible::after { transform: scaleX(1); }
.ps-moment { padding-right: 30px; position: relative; }
.ps-moment time { background: var(--ink); border: 2px solid var(--yellow); border-radius: 999px; color: var(--yellow); display: inline-block; font-family: "Inter Tight", sans-serif; font-size: 20px; font-weight: 800; margin-bottom: 30px; padding: 16px 22px; position: relative; z-index: 1; }
.ps-moment h3 { font-size: 26px; }
.ps-moment p { color: rgba(255,255,255,.7); margin-top: 10px; }

/* tarjetas */

/* lista de lo incluido */
.ps-checklist { display: grid; gap: 0 48px; grid-template-columns: repeat(2, 1fr); }
.ps-checklist li { align-items: center; border-bottom: 1px solid rgba(255,255,255,.14); display: flex; font-size: 20px; font-weight: 600; gap: 18px; padding: 22px 0; }
.ps-checklist li i { color: var(--lime); font-size: 24px; }

/* sección honesta */
.ps-honest { background: var(--lime); border-radius: 40px; color: var(--ink); padding: 80px; }
.ps-honest h2 { font-size: clamp(28px, 3vw, 42px); }
.ps-honest p { font-size: 22px; font-weight: 500; line-height: 1.5; margin-top: 26px; max-width: 900px; }

/* marquesina de modalidades */
.ps-marquee { border-block: 1px solid var(--line); overflow: hidden; padding: 28px 0; white-space: nowrap; }
.ps-marquee-track { animation: ps-marquee 36s linear infinite; display: inline-flex; gap: 56px; padding-right: 56px; }
.ps-marquee span { align-items: center; display: inline-flex; font-family: "Inter Tight", sans-serif; font-size: clamp(26px, 3vw, 42px); font-weight: 800; gap: 48px; letter-spacing: -.04em; }
.ps-marquee span::after { background: var(--accent); border-radius: 50%; content: ""; height: 14px; width: 14px; }
.ps--yellow .ps-marquee span::after { background: var(--ink); }

/* públicos */
.ps-audiences { display: grid; gap: 20px; grid-template-columns: repeat(4, minmax(0, 1fr)); }
.ps-audience { border-radius: var(--radius); color: #fff !important; display: flex; flex-direction: column; min-height: 360px; overflow: hidden; padding: 34px 30px; position: relative; transition: transform .35s ease; }
.ps-audience:hover { transform: translateY(-8px); }
.ps-audience::before { background: radial-gradient(circle at 80% 10%, rgba(255,255,255,.25), transparent 50%); content: ""; inset: 0; position: absolute; }
.ps-audience:nth-child(1) { background: linear-gradient(160deg, #5b4dff, #2a1fb8); }
.ps-audience:nth-child(2) { background: linear-gradient(160deg, #1b1c24, #07080d); }
.ps-audience:nth-child(3) { background: linear-gradient(160deg, #10c28e, #07664b); }
.ps-audience:nth-child(4) { background: linear-gradient(160deg, #13295c, #0a1a3a); }
.ps-audience h3 { font-size: 26px; margin-top: auto; position: relative; }
.ps-audience p { color: rgba(255,255,255,.78); font-size: 15px; margin-top: 12px; position: relative; }
.ps-audience b { align-items: center; display: inline-flex; font-size: 15px; gap: 8px; margin-top: 22px; position: relative; }
.ps-audience b i { transition: transform .25s ease; }
.ps-audience:hover b i { transform: translateX(5px); }

/* confianza */

/* precios */
.ps-pricing { display: grid; gap: 24px; grid-template-columns: repeat(2, minmax(0, 1fr)); margin: 0 auto; max-width: 1000px; }
.ps-plan { border: 1px solid var(--line); border-radius: 32px; display: flex; flex-direction: column; padding: 44px; }
.ps-plan.is-premium { background: var(--ink); border-color: var(--ink); color: #fff; position: relative; }
.ps-plan.is-premium::before { background: linear-gradient(135deg, var(--violet), var(--mint)); border-radius: 33px; content: ""; inset: -1px; mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); mask-composite: exclude; padding: 1px; pointer-events: none; position: absolute; }
.ps-plan small { font-size: 13px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; }
.ps-plan .ps-price { align-items: baseline; display: flex; font-family: "Inter Tight", sans-serif; font-size: 72px; font-weight: 800; gap: 8px; letter-spacing: -.05em; line-height: 1; margin: 22px 0 8px; }
.ps-plan .ps-price span { font-family: "Inter", sans-serif; font-size: 16px; font-weight: 500; letter-spacing: 0; opacity: .6; }
.ps-plan > p { color: var(--muted); }
.ps-plan.is-premium > p { color: rgba(255,255,255,.66); }
.ps-plan ul { display: grid; gap: 14px; margin: 34px 0 40px; }
.ps-plan li { align-items: center; display: flex; font-weight: 500; gap: 12px; }
.ps-plan li i { color: #07a877; }
.ps-plan.is-premium li i { color: var(--mint); }
.ps-plan .ps-btn { margin-top: auto; width: 100%; }
.ps-plan-note { color: var(--muted); display: block; font-size: 13px; margin-top: 14px; text-align: center; }
.ps-plan.is-premium .ps-plan-note { color: rgba(255,255,255,.5); }

/* preguntas */
.ps-faq { display: grid; gap: 80px; grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); }
.ps-faq details { border-bottom: 1px solid var(--line); }
.ps-faq summary { align-items: center; cursor: pointer; display: flex; font-family: "Inter Tight", sans-serif; font-size: 22px; font-weight: 700; gap: 20px; justify-content: space-between; letter-spacing: -.02em; list-style: none; padding: 28px 0; }
.ps-faq summary::-webkit-details-marker { display: none; }
.ps-faq summary i { flex-shrink: 0; font-size: 22px; transition: transform .25s ease; }
.ps-faq details[open] summary i { transform: rotate(45deg); }
.ps-faq details p { color: var(--muted); font-size: 17px; max-width: 700px; padding: 0 0 28px; }

/* enlaces internos */
.ps-links { display: flex; flex-wrap: wrap; gap: 12px; }
.ps-links a { align-items: center; border: 1px solid var(--line); border-radius: 999px; color: var(--ink) !important; display: inline-flex; font-size: 15px; font-weight: 600; gap: 10px; padding: 14px 22px; transition: background-color .2s ease, color .2s ease, border-color .2s ease; }
.ps-links a:hover { background: var(--ink); border-color: var(--ink); color: #fff !important; }

/* llamado final */
.ps-final { background: var(--accent); color: var(--accent-ink); overflow: hidden; padding: 150px 0; position: relative; text-align: center; }
.ps--ink .ps-final, .ps--light .ps-final, .ps--green .ps-final { background: var(--violet); color: #fff; }
.ps--violet .ps-final { background: var(--ink); color: #fff; }
.ps--yellow .ps-final { background: var(--yellow); color: var(--ink); }
.ps--navy .ps-final { background: var(--navy); color: #fff; }
.ps--mint .ps-final { background: var(--mint); color: #04130d; }
.ps-final h2 { font-size: clamp(34px, 4.4vw, 64px); margin: 0 auto; max-width: 900px; }
.ps-final p { font-size: 20px; margin: 26px auto 44px; max-width: 620px; opacity: .8; }
.ps-final .ps-actions { justify-content: center; }
.ps-final .ps-btn-accent { background: #fff; box-shadow: 0 24px 50px -24px rgba(0,0,0,.4); color: var(--ink) !important; }
.ps--yellow .ps-final .ps-btn-accent, .ps--mint .ps-final .ps-btn-accent { background: var(--ink); color: #fff !important; }
.ps-final-rings { inset: 0; pointer-events: none; position: absolute; }
.ps-final-rings i { border: 1px solid currentColor; border-radius: 50%; left: 50%; opacity: .12; position: absolute; top: 50%; transform: translate(-50%, -50%); }
.ps-final-rings i:nth-child(1) { height: 520px; width: 520px; }
.ps-final-rings i:nth-child(2) { height: 820px; width: 820px; }
.ps-final-rings i:nth-child(3) { height: 1140px; width: 1140px; }

/* tipos de amortización (simulador) */
.ps-amort { display: grid; gap: 20px; grid-template-columns: repeat(4, minmax(0, 1fr)); }
.ps-amort article { background: #fff; border: 1px solid var(--line); border-radius: var(--radius); padding: 30px 28px; }
.ps-amort svg { display: block; height: 90px; margin-bottom: 26px; width: 100%; }
.ps-amort h3 { font-size: 22px; letter-spacing: -.02em; }
.ps-amort p { color: var(--muted); font-size: 15px; margin-top: 10px; }

/* =========================================================================
   Maquetas de producto (HTML/SVG)
   ========================================================================= */
.ui-window { background: #fff; border-radius: 18px; box-shadow: 0 50px 100px -40px rgba(0,0,0,.6), 0 0 0 1px rgba(255,255,255,.08); color: #0e1017; font-family: "Inter", sans-serif; overflow: hidden; position: relative; text-align: left; width: 100%; }
.ui-window > header { align-items: center; background: #f4f5f8; border-bottom: 1px solid #e6e8ee; display: flex; gap: 14px; padding: 12px 16px; }
.ui-dots { display: flex; gap: 6px; }
.ui-dots i { background: #d6d9e0; border-radius: 50%; height: 10px; width: 10px; }
.ui-dots i:nth-child(1) { background: #ff5f57; } .ui-dots i:nth-child(2) { background: #febc2e; } .ui-dots i:nth-child(3) { background: #28c840; }
.ui-url { background: #fff; border: 1px solid #e3e5eb; border-radius: 8px; color: #8b8f9c; flex: 1; font-size: 11px; max-width: 320px; padding: 5px 12px; }
.ui-live { align-items: center; background: #e7f9f1; border-radius: 999px; color: #07905f; display: flex; font-size: 10px; font-weight: 700; gap: 6px; letter-spacing: .06em; margin-left: auto; padding: 4px 10px; }
.ui-live::before { animation: ps-pulse 1.6s ease-in-out infinite; background: #12c98c; border-radius: 50%; content: ""; height: 6px; width: 6px; }
.ui-body { display: grid; gap: 14px; padding: 20px; }
.ui-kpis { display: grid; gap: 12px; grid-template-columns: 1.3fr 1fr 1fr; }
.ui-kpi { background: #f6f7fa; border-radius: 12px; padding: 14px 16px; }
.ui-kpi.is-main { background: linear-gradient(135deg, #17162f, #2d25a6); color: #fff; }
.ui-kpi span { color: #7c808d; display: block; font-size: 10px; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; }
.ui-kpi.is-main span { color: rgba(255,255,255,.7); }
.ui-kpi b { display: block; font-family: "Inter Tight", sans-serif; font-size: 22px; font-weight: 800; letter-spacing: -.03em; margin-top: 4px; }
.ui-kpi.is-main b { font-size: 28px; }
.ui-kpi small { color: #07905f; display: block; font-size: 10px; font-weight: 600; margin-top: 2px; }
.ui-kpi.is-warn small { color: #c97a00; }
.ui-kpi.is-main small { color: #9df3cf; }
.ui-row2 { display: grid; gap: 12px; grid-template-columns: 1.4fr 1fr; }
.ui-panel { border: 1px solid #eceef3; border-radius: 12px; padding: 14px 16px; }
.ui-panel > header { align-items: center; display: flex; font-size: 11px; font-weight: 700; justify-content: space-between; margin-bottom: 10px; }
.ui-panel > header span { color: #9094a1; font-size: 10px; font-weight: 500; }
.ui-chart { display: block; height: 130px; width: 100%; }
.ui-chart .area { fill: url(#psArea); opacity: 0; transition: opacity 1s ease .8s; }
.ui-chart .line { fill: none; stroke: #5b4dff; stroke-dasharray: 800; stroke-dashoffset: 800; stroke-linecap: round; stroke-width: 3; transition: stroke-dashoffset 2s cubic-bezier(.3,.7,.2,1); }
.ui-chart .dot { fill: #fff; opacity: 0; stroke: #5b4dff; stroke-width: 3; transition: opacity .4s ease 1.9s; }
.is-visible .ui-chart .line { stroke-dashoffset: 0; }
.is-visible .ui-chart .area, .is-visible .ui-chart .dot { opacity: 1; }
.ui-list p { align-items: center; border-bottom: 1px solid #f0f1f5; display: grid; font-size: 11px; gap: 10px; grid-template-columns: 28px 1fr auto; padding: 8px 0; }
.ui-list p:last-child { border-bottom: 0; }
.ui-avatar { align-items: center; background: #ecebff; border-radius: 50%; color: #4a3de0; display: inline-flex; font-size: 10px; font-weight: 700; height: 28px; justify-content: center; width: 28px; }
.ui-list b { display: block; font-size: 11px; }
.ui-list small { color: #9094a1; display: block; font-size: 10px; }
.ui-list strong { font-size: 11px; }
.ui-tag { border-radius: 999px; display: inline-block; font-size: 9px; font-weight: 700; padding: 3px 8px; }
.ui-tag.is-ok { background: #e7f9f1; color: #07905f; }
.ui-tag.is-late { background: #ffe9ed; color: #d6284b; }
.ui-tag.is-today { background: #fff3dc; color: #b56b00; }
.ui-tag.is-next { background: #ecebff; color: #4a3de0; }

/* notificaciones flotantes */
.ui-toast { align-items: center; animation: ps-float 6s ease-in-out infinite; background: #fff; border-radius: 16px; box-shadow: 0 24px 50px -20px rgba(0,0,0,.45); color: #0e1017; display: flex; gap: 12px; padding: 14px 18px; position: absolute; z-index: 3; }
.ui-toast i { align-items: center; border-radius: 12px; display: inline-flex; flex-shrink: 0; font-size: 18px; height: 40px; justify-content: center; width: 40px; }
.ui-toast b { display: block; font-size: 13px; }
.ui-toast span { color: #7c808d; display: block; font-size: 12px; }
.ui-toast.is-ok i { background: #e7f9f1; color: #07905f; }
.ui-toast.is-violet i { background: #ecebff; color: #4a3de0; }
.ui-toast.is-wa i { background: #25d366; color: #fff; }
.ui-toast.t1 { left: -44px; top: 50%; }
.ui-toast.t2 { animation-delay: -3s; bottom: -26px; right: 6%; }
.ui-toast.t3 { animation-delay: -1.5s; right: 8%; top: -26px; }
.ps-hero-stage .ui-toast { opacity: 0; transform: translateY(16px) scale(.96); transition: opacity .6s ease, transform .6s ease; }
.ps-hero-stage.is-visible .ui-toast { opacity: 1; transform: none; }
.ps-hero-stage.is-visible .ui-toast.t1 { transition-delay: .9s; }
.ps-hero-stage.is-visible .ui-toast.t2 { transition-delay: 1.4s; }
.ps-hero-stage.is-visible .ui-toast.t3 { transition-delay: 1.9s; }

/* teléfono */
.ui-phone { background: #0b0c12; border-radius: 46px; box-shadow: 0 60px 120px -40px rgba(0,0,0,.7), inset 0 0 0 2px rgba(255,255,255,.14), 0 0 0 10px #16171f; color: #0e1017; flex-shrink: 0; font-family: "Inter", sans-serif; padding: 12px; position: relative; text-align: left; width: 300px; }
.ui-phone::before { background: #0b0c12; border-radius: 0 0 16px 16px; content: ""; height: 26px; left: 50%; position: absolute; top: 12px; transform: translateX(-50%); width: 110px; z-index: 2; }
.ui-screen { background: #f6f7fb; border-radius: 36px; height: 600px; overflow: hidden; position: relative; }
.ui-app-top { background: linear-gradient(160deg, #1b1741, #5b4dff); color: #fff; padding: 46px 20px 22px; }
.ui-app-top small { display: block; font-size: 11px; font-weight: 600; letter-spacing: .08em; opacity: .75; text-transform: uppercase; }
.ui-app-top b { display: block; font-family: "Inter Tight", sans-serif; font-size: 30px; font-weight: 800; letter-spacing: -.03em; margin-top: 4px; }
.ui-app-top .ui-progress { background: rgba(255,255,255,.2); border-radius: 999px; height: 6px; margin-top: 14px; overflow: hidden; }
.ui-app-top .ui-progress i { animation: ps-progress 5s ease-in-out infinite; background: #9df3cf; border-radius: 999px; display: block; height: 100%; width: 62%; }
.ui-app-top p { display: flex; font-size: 11px; justify-content: space-between; margin-top: 8px; opacity: .85; }
.ui-app-list { display: grid; gap: 10px; padding: 16px; }
.ui-app-item { align-items: center; background: #fff; border-radius: 16px; box-shadow: 0 6px 16px -10px rgba(7,8,13,.2); display: grid; gap: 10px; grid-template-columns: 34px 1fr auto; padding: 12px; }
.ui-app-item .ui-avatar { height: 34px; width: 34px; }
.ui-app-item b { display: block; font-size: 12px; }
.ui-app-item small { color: #8a8e9b; display: block; font-size: 10px; }
.ui-app-item strong { display: block; font-size: 12px; text-align: right; }
.ui-app-item .ui-tag { margin-top: 3px; }
.ui-app-item.is-paying { animation: ps-pay 6s ease-in-out infinite; }
.ui-app-item.is-paying .ui-tag { position: relative; }
.ui-app-item.is-paying .ui-tag::after { animation: ps-pay-tag 6s steps(1) infinite; background: #e7f9f1; border-radius: 999px; color: #07905f; content: "Pagada"; inset: 0; padding: 3px 8px; position: absolute; }
.ui-app-cta { background: #0e1017; border-radius: 16px; bottom: 16px; color: #fff; display: flex; font-size: 13px; font-weight: 700; justify-content: center; left: 16px; padding: 14px; position: absolute; right: 16px; }
.ui-phones { align-items: flex-end; display: flex; gap: 0; justify-content: center; position: relative; }
.ui-phones .ui-phone:nth-child(2) { margin-left: -70px; transform: translateY(40px) rotate(4deg); z-index: 2; }
.ui-phones .ui-phone:nth-child(1) { transform: rotate(-4deg); }

/* whatsapp */
.ui-wa { background: #0b141a; border-radius: 36px; height: 600px; overflow: hidden; position: relative; }
.ui-wa > header { align-items: center; background: #1f2c33; color: #e9edef; display: flex; gap: 10px; padding: 44px 16px 12px; }
.ui-wa > header .ui-avatar { background: #5b4dff; color: #fff; }
.ui-wa > header b { display: block; font-size: 13px; }
.ui-wa > header small { color: #8696a0; display: block; font-size: 10px; }
.ui-wa-body { background: radial-gradient(circle at 20% 20%, rgba(255,255,255,.03), transparent 40%), #0b141a; display: grid; gap: 10px; padding: 16px; }
.ui-bubble { background: #005c4b; border-radius: 12px 12px 4px 12px; color: #e9edef; font-size: 12px; justify-self: end; line-height: 1.45; max-width: 88%; opacity: 0; padding: 10px 12px 18px; position: relative; transform: translateY(10px); transition: opacity .5s ease, transform .5s ease; }
.ui-bubble.is-in { background: #1f2c33; border-radius: 12px 12px 12px 4px; justify-self: start; }
.ui-bubble small { bottom: 4px; color: #8fc1b4; font-size: 9px; position: absolute; right: 10px; }
.ui-bubble small i { color: #53bdeb; }
.ui-bubble a { color: #53bdeb !important; word-break: break-all; }
.is-visible .ui-bubble { opacity: 1; transform: none; }
.is-visible .ui-bubble:nth-child(2) { transition-delay: .8s; }
.is-visible .ui-bubble:nth-child(3) { transition-delay: 1.8s; }
.ui-typing { background: #1f2c33; border-radius: 12px; display: flex; gap: 4px; justify-self: start; padding: 12px 14px; }
.ui-typing i { animation: ps-typing 1.2s ease-in-out infinite; background: #8696a0; border-radius: 50%; height: 6px; width: 6px; }
.ui-typing i:nth-child(2) { animation-delay: .15s; } .ui-typing i:nth-child(3) { animation-delay: .3s; }

/* plan de pagos */
.ui-schedule .ui-body { gap: 16px; }
.ui-sum { display: grid; gap: 10px; grid-template-columns: repeat(3, 1fr); }
.ui-sum div { background: #f6f7fa; border-radius: 12px; padding: 12px 14px; }
.ui-sum span { color: #7c808d; display: block; font-size: 10px; font-weight: 600; text-transform: uppercase; }
.ui-sum b { display: block; font-family: "Inter Tight", sans-serif; font-size: 18px; font-weight: 800; margin-top: 2px; }
.ui-table { border: 1px solid #eceef3; border-radius: 12px; font-size: 11px; overflow: hidden; }
.ui-table > div { display: grid; grid-template-columns: .7fr 1fr 1fr 1fr .9fr; padding: 10px 14px; }
.ui-table > div:first-child { background: #f6f7fa; color: #7c808d; font-size: 9px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; }
.ui-table > div + div { border-top: 1px solid #f0f1f5; }
.ui-table > div.is-now { animation: ps-row 4s ease-in-out infinite; background: #f3f2ff; }
.ui-select { align-items: center; display: flex; gap: 8px; }
.ui-select span { background: #f6f7fa; border: 1px solid #e6e8ee; border-radius: 8px; font-size: 11px; font-weight: 600; padding: 7px 10px; }
.ui-select span.is-on { background: #0e1017; border-color: #0e1017; color: #fff; }

/* caja del cobrador */
.ui-cash { background: #fff; border-radius: 24px; box-shadow: 0 50px 100px -40px rgba(0,0,0,.6); color: #0e1017; max-width: 420px; padding: 26px; position: relative; text-align: left; width: 100%; }
.ui-cash > header { align-items: center; display: flex; justify-content: space-between; }
.ui-cash > header b { font-size: 14px; }
.ui-cash > header small { color: #8a8e9b; display: block; font-size: 11px; }
.ui-cash-total { border-bottom: 1px dashed #e0e2e8; margin: 18px 0; padding-bottom: 18px; }
.ui-cash-total span { color: #7c808d; display: block; font-size: 11px; font-weight: 600; text-transform: uppercase; }
.ui-cash-total b { display: block; font-family: "Inter Tight", sans-serif; font-size: 40px; font-weight: 800; letter-spacing: -.04em; }
.ui-cash-row { align-items: center; display: flex; font-size: 13px; justify-content: space-between; padding: 8px 0; }
.ui-cash-row span { align-items: center; color: #4a4e5b; display: flex; gap: 8px; }
.ui-cash-row i { border-radius: 50%; display: inline-block; height: 8px; width: 8px; }
.ui-bar { background: #eef0f5; border-radius: 999px; display: flex; height: 10px; margin: 12px 0 18px; overflow: hidden; }
.ui-bar i { height: 100%; transform: scaleX(0); transform-origin: left; transition: transform 1.4s cubic-bezier(.2,.8,.2,1); }
.is-visible .ui-bar i { transform: scaleX(1); }
.ui-cash-people { border-top: 1px solid #eef0f5; display: grid; gap: 10px; margin-top: 10px; padding-top: 16px; }
.ui-cash-people p { align-items: center; display: grid; font-size: 12px; gap: 10px; grid-template-columns: 28px 1fr auto; }
.ui-cash-people p em { color: #07905f; font-size: 11px; font-weight: 700; }
.ui-cash-btn { background: #0e1017; border-radius: 14px; color: #fff; display: block; font-size: 13px; font-weight: 700; margin-top: 18px; padding: 14px; text-align: center; }

/* contrato */
.ui-paper { background: #fff; border-radius: 6px; box-shadow: 0 50px 100px -40px rgba(0,0,0,.6); color: #1c1e26; font-family: Georgia, "Times New Roman", serif; max-width: 430px; padding: 34px 34px 30px; position: relative; text-align: left; transform: rotate(-2deg); width: 100%; }
.ui-paper::before { background: #fff; border-radius: 6px; box-shadow: 0 20px 40px -20px rgba(0,0,0,.4); content: ""; inset: 10px -10px -10px 10px; position: absolute; transform: rotate(4deg); z-index: -1; }
.ui-paper h4 { font-family: Georgia, serif; font-size: 13px; font-weight: 700; letter-spacing: .12em; text-align: center; text-transform: uppercase; }
.ui-paper small { color: #8a8e9b; display: block; font-family: "Inter", sans-serif; font-size: 10px; text-align: center; }
.ui-lines { display: grid; gap: 7px; margin: 20px 0; }
.ui-lines i { background: #e6e8ee; border-radius: 3px; display: block; height: 6px; }
.ui-lines i:nth-child(3n) { width: 82%; } .ui-lines i:nth-child(4n) { width: 64%; }
.ui-paper-grid { display: grid; gap: 10px; grid-template-columns: 1fr 1fr; margin: 16px 0; }
.ui-paper-grid div { border: 1px solid #eceef3; border-radius: 6px; font-family: "Inter", sans-serif; font-size: 10px; padding: 10px; }
.ui-paper-grid b { display: block; font-size: 12px; margin-top: 2px; }
.ui-sign { display: grid; gap: 22px; grid-template-columns: 1fr 1fr; margin-top: 30px; }
.ui-sign div { border-top: 1px solid #1c1e26; font-family: "Inter", sans-serif; font-size: 9px; padding-top: 6px; text-align: center; }
.ui-sign svg { display: block; height: 34px; margin: -40px auto 6px; width: 110px; }
.ui-sign path { fill: none; stroke: #2d25a6; stroke-dasharray: 300; stroke-dashoffset: 300; stroke-linecap: round; stroke-width: 2; transition: stroke-dashoffset 2.2s ease .6s; }
.is-visible .ui-sign path { stroke-dashoffset: 0; }
.ui-pdf { align-items: center; background: #ff4d4d; border-radius: 12px; bottom: -18px; box-shadow: 0 16px 30px -12px rgba(255,77,77,.6); color: #fff; display: flex; font-family: "Inter", sans-serif; font-size: 12px; font-weight: 800; gap: 8px; padding: 10px 14px; position: absolute; right: -18px; transform: rotate(2deg); }

/* portal del cliente */
.ui-portal { background: linear-gradient(180deg, #e9ecf5, #f6f7fb); border-radius: 36px; height: 600px; overflow: hidden; padding: 44px 16px 16px; position: relative; }
.ui-portal-hero { background: linear-gradient(135deg, #0b1f3a, #1d4ed8); border-radius: 20px; color: #fff; padding: 18px; }
.ui-portal-hero small { display: block; font-size: 10px; letter-spacing: .08em; opacity: .7; text-transform: uppercase; }
.ui-portal-hero b { display: block; font-size: 15px; margin-top: 4px; }
.ui-portal-hero strong { display: block; font-family: "Inter Tight", sans-serif; font-size: 30px; font-weight: 800; letter-spacing: -.03em; margin-top: 14px; }
.ui-portal-hero .ui-progress { background: rgba(255,255,255,.2); border-radius: 999px; height: 6px; margin-top: 12px; overflow: hidden; }
.ui-portal-hero .ui-progress i { background: linear-gradient(90deg, #7dd3fc, #fff); border-radius: 999px; display: block; height: 100%; transform: scaleX(0); transform-origin: left; transition: transform 1.6s ease .3s; width: 58%; }
.is-visible .ui-portal-hero .ui-progress i { transform: scaleX(1); }
.ui-portal-card { background: rgba(255,255,255,.85); border: 1px solid rgba(255,255,255,.9); border-radius: 18px; box-shadow: 0 10px 24px -16px rgba(7,8,13,.3); margin-top: 12px; padding: 14px 16px; }
.ui-portal-card span { color: #7c808d; display: block; font-size: 10px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; }
.ui-portal-card b { display: block; font-family: "Inter Tight", sans-serif; font-size: 22px; font-weight: 800; margin-top: 2px; }
.ui-portal-card small { color: #4a4e5b; display: block; font-size: 11px; }
.ui-portal-rows { display: grid; gap: 8px; margin-top: 10px; }
.ui-portal-rows p { align-items: center; display: flex; font-size: 11px; justify-content: space-between; }

/* excel contra prestami */
.ui-vs { display: grid; gap: 18px; grid-template-columns: 1fr 1fr; max-width: 640px; position: relative; width: 100%; }
.ui-xls { background: #fff; border-radius: 14px; box-shadow: 0 40px 80px -40px rgba(0,0,0,.5); font-family: "Inter", sans-serif; font-size: 9px; overflow: hidden; transform: rotate(-3deg); }
.ui-xls > header { background: #1e7145; color: #fff; font-size: 10px; font-weight: 700; padding: 8px 10px; }
.ui-xls-grid { display: grid; grid-template-columns: 22px repeat(4, 1fr); }
.ui-xls-grid span { border-bottom: 1px solid #e3e5eb; border-right: 1px solid #e3e5eb; color: #4a4e5b; min-height: 22px; overflow: hidden; padding: 5px; white-space: nowrap; }
.ui-xls-grid span.h { background: #f2f3f5; color: #8a8e9b; font-weight: 700; text-align: center; }
.ui-xls-grid span.err { background: #ffe9ed; color: #d6284b; font-weight: 700; }
.ui-xls-grid span.warn { background: #fff7d6; }
.ui-vs .ui-window { transform: rotate(2deg) translateY(30px); }
.ui-vs-arrow { align-items: center; background: #0f9d58; border-radius: 50%; box-shadow: 0 16px 30px -12px rgba(15,157,88,.7); color: #fff; display: flex; font-size: 22px; height: 56px; justify-content: center; left: 50%; position: absolute; top: 45%; transform: translate(-50%, -50%); width: 56px; z-index: 3; }

/* $0 */
.ui-zero { background: #fff; border-radius: 36px; box-shadow: 0 60px 120px -40px rgba(20,10,120,.7); color: var(--ink); max-width: 460px; overflow: hidden; position: relative; width: 100%; }
.ui-zero-top { padding: 34px 34px 10px; }
.ui-zero-top small { color: var(--violet); font-size: 12px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; }
.ui-zero-top b { display: block; font-family: "Inter Tight", sans-serif; font-size: 150px; font-weight: 800; letter-spacing: -.07em; line-height: .9; margin-top: 10px; }
.ui-zero-top b span { font-size: 40px; letter-spacing: -.02em; }
.ui-zero-top p { color: var(--muted); font-size: 14px; margin-top: 8px; }
.ui-zero ul { display: grid; gap: 12px; padding: 22px 34px 34px; }
.ui-zero li { align-items: center; display: flex; font-size: 15px; font-weight: 600; gap: 12px; }
.ui-zero li i { color: #07a877; }
.ui-zero-stamp { align-items: center; animation: ps-spin 18s linear infinite; background: var(--lime); border-radius: 50%; color: var(--ink); display: flex; font-size: 11px; font-weight: 800; height: 110px; justify-content: center; letter-spacing: .08em; line-height: 1.2; position: absolute; right: 22px; text-align: center; text-transform: uppercase; top: 22px; width: 110px; }

/* reportes */
.ui-report .ui-body { gap: 16px; }
.ui-report-big span { color: #7c808d; display: block; font-size: 11px; font-weight: 600; text-transform: uppercase; }
.ui-report-big b { display: block; font-family: "Inter Tight", sans-serif; font-size: 36px; font-weight: 800; letter-spacing: -.04em; }
.ui-hbars { display: grid; gap: 12px; }
.ui-hbars p { align-items: center; display: grid; font-size: 11px; gap: 12px; grid-template-columns: 110px 1fr 60px; }
.ui-hbars p > span:nth-child(2) { background: #eef0f5; border-radius: 999px; display: block; height: 10px; overflow: hidden; }
.ui-hbars p > span:nth-child(2) i { background: var(--bar-color, #5b4dff); border-radius: 999px; display: block; height: 100%; transform: scaleX(0); transform-origin: left; transition: transform 1.4s cubic-bezier(.2,.8,.2,1); width: var(--w); }
.is-visible .ui-hbars i { transform: scaleX(1) !important; }
.ui-hbars p > b { text-align: right; }
.ui-cols { align-items: flex-end; display: flex; gap: 8px; height: 110px; }
.ui-cols i { background: linear-gradient(180deg, #8a7dff, #5b4dff); border-radius: 6px 6px 3px 3px; flex: 1; height: var(--h); transform: scaleY(0); transform-origin: bottom; transition: transform 1s cubic-bezier(.2,.8,.2,1); }
.ui-cols i:last-child { background: linear-gradient(180deg, #34e3ad, #12b886); }
.is-visible .ui-cols i { transform: scaleY(1); }
.is-visible .ui-cols i:nth-child(2) { transition-delay: .08s; } .is-visible .ui-cols i:nth-child(3) { transition-delay: .16s; }
.is-visible .ui-cols i:nth-child(4) { transition-delay: .24s; } .is-visible .ui-cols i:nth-child(5) { transition-delay: .32s; }
.is-visible .ui-cols i:nth-child(6) { transition-delay: .4s; } .is-visible .ui-cols i:nth-child(7) { transition-delay: .48s; }

/* simulador */
.ps-calc { background: #fff; border-radius: 32px; box-shadow: 0 50px 100px -50px rgba(40,30,160,.45), 0 0 0 1px rgba(7,8,13,.06); color: var(--ink); overflow: hidden; }
.ps-calc-form { display: grid; gap: 16px; grid-template-columns: repeat(2, minmax(0, 1fr)); padding: 30px; }
.ps-calc-form label { display: block; font-size: 13px; font-weight: 700; margin-bottom: 7px; }
.ps-calc-form input, .ps-calc-form select { background: #f6f7fa; border: 1px solid #e3e5eb; border-radius: 14px; color: var(--ink); font: inherit; font-size: 16px; font-weight: 600; height: 52px; padding: 0 16px; width: 100%; }
.ps-calc-form input:focus, .ps-calc-form select:focus { background: #fff; border-color: var(--violet); box-shadow: 0 0 0 4px rgba(91,77,255,.14); outline: none; }
.ps-calc-full { grid-column: 1 / -1; }
.ps-calc-types { display: grid; gap: 8px; grid-template-columns: repeat(4, 1fr); }
.ps-calc-types label { margin: 0; }
.ps-calc-types input { position: absolute; opacity: 0; pointer-events: none; }
.ps-calc-types span { align-items: center; background: #f6f7fa; border: 1px solid #e3e5eb; border-radius: 12px; cursor: pointer; display: flex; font-size: 13px; font-weight: 700; height: 48px; justify-content: center; text-align: center; transition: all .15s ease; }
.ps-calc-types input:checked + span { background: var(--ink); border-color: var(--ink); color: #fff; }
.ps-calc-types input:focus-visible + span { box-shadow: 0 0 0 3px rgba(91,77,255,.3); }
.ps-calc-result { background: linear-gradient(135deg, #0f0c2e, #3a2fd0); color: #fff; display: grid; gap: 18px; grid-template-columns: 1.3fr 1fr 1fr; padding: 26px 30px; }
.ps-calc-result span { display: block; font-size: 12px; font-weight: 600; letter-spacing: .06em; opacity: .7; text-transform: uppercase; }
.ps-calc-result b { display: block; font-family: "Inter Tight", sans-serif; font-size: 26px; font-weight: 800; letter-spacing: -.03em; margin-top: 4px; }
.ps-calc-result div:first-child b { font-size: 36px; }
.ps-calc-table { max-height: 360px; overflow: auto; }
.ps-calc-table table { border-collapse: collapse; font-size: 14px; width: 100%; }
.ps-calc-table th { background: #f6f7fa; color: var(--muted); font-size: 11px; font-weight: 700; letter-spacing: .06em; padding: 12px 16px; position: sticky; text-align: right; text-transform: uppercase; top: 0; }
.ps-calc-table th:first-child, .ps-calc-table td:first-child { text-align: left; }
.ps-calc-table td { border-top: 1px solid #f0f1f5; font-variant-numeric: tabular-nums; padding: 11px 16px; text-align: right; }
.ps-calc-cta { align-items: center; border-top: 1px solid #f0f1f5; display: flex; flex-wrap: wrap; gap: 14px; justify-content: space-between; padding: 22px 30px; }
.ps-calc-cta p { color: var(--muted); font-size: 14px; max-width: 360px; }

/* aparición al hacer scroll */
[data-reveal] { opacity: 0; transform: translateY(34px); transition: opacity .9s cubic-bezier(.2,.8,.2,1), transform .9s cubic-bezier(.2,.8,.2,1); }
[data-reveal].is-visible { opacity: 1; transform: none; }
[data-reveal-delay="1"] { transition-delay: .1s; } [data-reveal-delay="2"] { transition-delay: .2s; } [data-reveal-delay="3"] { transition-delay: .3s; }

/* animaciones */
.ps-hero-copy > * { animation: ps-rise .8s cubic-bezier(.2,.8,.2,1) both; }
.ps-hero-copy > :nth-child(2) { animation-delay: .06s; } .ps-hero-copy > :nth-child(3) { animation-delay: .14s; } .ps-hero-copy > :nth-child(n+4) { animation-delay: .22s; }
@keyframes ps-rise { from { opacity: 0; transform: translateY(24px); } }
@keyframes ps-drift { to { transform: translate(-60px, 40px) scale(1.08); } }
@keyframes ps-float { 0%, 100% { translate: 0 0; } 50% { translate: 0 -10px; } }
@keyframes ps-pulse { 0%, 100% { opacity: 1; } 50% { opacity: .35; } }
@keyframes ps-marquee { to { transform: translateX(-50%); } }
@keyframes ps-spin { to { transform: rotate(360deg); } }
@keyframes ps-typing { 0%, 60%, 100% { opacity: .35; transform: translateY(0); } 30% { opacity: 1; transform: translateY(-3px); } }
@keyframes ps-progress { 0%, 100% { width: 58%; } 50% { width: 71%; } }
@keyframes ps-row { 0%, 100% { background: #f3f2ff; } 50% { background: #e4e1ff; } }
@keyframes ps-pay { 0%, 40% { box-shadow: 0 6px 16px -10px rgba(7,8,13,.2); transform: none; } 45% { box-shadow: 0 0 0 2px #12c98c, 0 12px 26px -12px rgba(18,201,140,.6); transform: scale(1.03); } 55%, 100% { box-shadow: 0 6px 16px -10px rgba(7,8,13,.2); transform: none; } }
@keyframes ps-pay-tag { 0%, 44% { opacity: 0; } 45%, 95% { opacity: 1; } 100% { opacity: 0; } }

/* ---------- mosaico de funciones (fragmentos de la interfaz en vez de iconos) ---------- */
.ps-bento { display: grid; gap: 16px; grid-template-columns: repeat(6, minmax(0, 1fr)); }
.ps-tile { --tile-bg: #fff; --tile-ink: var(--ink); --tile-muted: var(--muted); --tile-line: var(--line); --tile-chip: rgba(7,8,13,.05); background: var(--tile-bg); border: 1px solid var(--tile-line); border-radius: var(--radius); color: var(--tile-ink); display: flex; flex-direction: column; gap: 34px; grid-column: span var(--span, 2); isolation: isolate; min-height: 300px; overflow: hidden; padding: 34px; position: relative; transition: transform .45s cubic-bezier(.2,.8,.2,1), box-shadow .45s ease; }
.ps-tile::after { background: radial-gradient(420px circle at var(--mx, 80%) var(--my, 0%), color-mix(in srgb, var(--accent) 16%, transparent), transparent 60%); content: ""; inset: 0; opacity: 0; pointer-events: none; position: absolute; transition: opacity .4s ease; z-index: -1; }
.ps-tile:hover { box-shadow: 0 40px 70px -40px rgba(7,8,13,.45); transform: translateY(-6px); }
.ps-tile:hover::after { opacity: 1; }
.ps-tile.is-wide { align-items: stretch; flex-direction: row; gap: 40px; justify-content: space-between; }
.ps-tile.is-wide .ps-tile-demo { align-self: flex-end; }
.ps-tile.is-wide .ps-tile-copy { max-width: 46%; }
.ps-tile.is-wide .ps-tile-demo { flex: 0 1 46%; }
.ps-tile.is-ink { --tile-bg: var(--ink); --tile-ink: #fff; --tile-muted: rgba(255,255,255,.62); --tile-line: rgba(255,255,255,.1); --tile-chip: rgba(255,255,255,.08); }
.ps-tile.is-accent { --tile-bg: var(--tile-accent, var(--violet)); --tile-ink: var(--tile-accent-ink, #fff); --tile-muted: color-mix(in srgb, var(--tile-accent-ink, #fff) 74%, transparent); --tile-line: transparent; --tile-chip: color-mix(in srgb, var(--tile-accent-ink, #fff) 14%, transparent); }
.ps-tile.is-soft { --tile-bg: color-mix(in srgb, var(--tile-accent, var(--violet)) 9%, #fff); --tile-line: transparent; }
.ps-section.is-cloud .ps-tile:not(.is-ink):not(.is-accent):not(.is-soft) { border-color: transparent; }
.ps--yellow { --tile-accent: var(--yellow); --tile-accent-ink: var(--ink); }
.ps--mint { --tile-accent: var(--mint); --tile-accent-ink: #04130d; }
.ps--navy { --tile-accent: var(--navy); }
.ps--green { --tile-accent: #0f9d58; }
.ps-tile h3 { font-size: 24px; letter-spacing: -.025em; line-height: 1.15; }
.ps-tile p { color: var(--tile-muted); font-size: 15.5px; line-height: 1.55; margin-top: 12px; max-width: 42ch; }
.ps-tile-demo { margin-top: auto; transition: transform .45s cubic-bezier(.2,.8,.2,1); }
.ps-tile:hover .ps-tile-demo { transform: translateY(-4px); }
.ps-demo-pills { display: flex; flex-wrap: wrap; gap: 8px; }
.ps-demo-pills span { background: var(--tile-chip); border-radius: 999px; font-size: 13px; font-weight: 600; padding: 9px 15px; }
.ps-demo-pills span.is-on { background: var(--tile-ink); color: var(--tile-bg); }
.ps-demo-figure { align-items: baseline; border-top: 1px solid var(--tile-line); display: flex; gap: 14px; justify-content: space-between; padding-top: 20px; }
.ps-tile.is-accent .ps-demo-figure, .ps-tile.is-soft .ps-demo-figure { border-top-color: color-mix(in srgb, var(--tile-ink) 16%, transparent); }
.ps-demo-figure b { font-family: "Inter Tight", sans-serif; font-size: clamp(36px, 3.4vw, 48px); font-weight: 800; letter-spacing: -.045em; line-height: 1; }
.ps-demo-figure span { background: color-mix(in srgb, var(--mint) 18%, transparent); border-radius: 999px; color: #07905f; font-size: 12px; font-weight: 700; padding: 6px 12px; white-space: nowrap; }
.ps-tile.is-ink .ps-demo-figure span, .ps-tile.is-accent .ps-demo-figure span { background: var(--tile-chip); color: inherit; }
.ps-demo-rows { background: var(--tile-chip); border-radius: 18px; padding: 4px 16px; }
.ps-demo-rows div { align-items: center; display: flex; font-size: 13.5px; gap: 12px; justify-content: space-between; padding: 12px 0; }
.ps-demo-rows div + div { border-top: 1px solid color-mix(in srgb, var(--tile-ink) 10%, transparent); }
.ps-demo-rows span { color: var(--tile-muted); }
.ps-demo-rows b { font-weight: 700; text-align: right; }
.ps-demo-bar div { display: flex; font-size: 13.5px; justify-content: space-between; margin-bottom: 12px; }
.ps-demo-bar span { color: var(--tile-muted); }
.ps-demo-bar b { font-family: "Inter Tight", sans-serif; font-size: 20px; font-weight: 800; letter-spacing: -.02em; }
.ps-demo-bar i { background: var(--tile-chip); border-radius: 999px; display: block; height: 10px; overflow: hidden; }
.ps-demo-bar em { background: linear-gradient(90deg, var(--mint), color-mix(in srgb, var(--mint) 60%, var(--violet))); border-radius: inherit; display: block; height: 100%; transform: scaleX(0); transform-origin: left; transition: transform 1.4s cubic-bezier(.2,.8,.2,1) .3s; width: var(--w); }
.ps-tile.is-visible .ps-demo-bar em { transform: scaleX(1); }
.ps-demo-quote { background: var(--tile-chip); border-radius: 18px 18px 18px 6px; font-size: 14px; line-height: 1.45; max-width: 320px; padding: 14px 16px; }
.ps-links-title { font-size: 22px; letter-spacing: -.02em; margin-bottom: 22px; }

/* ---------- secciones insertadas en la portada (finance_landing): toman la tipografía y el color de la portada ---------- */
.fin-home .ps-embed { --violet: var(--fin-accent, #5955ff); --accent: var(--fin-accent, #5955ff); --cloud: var(--fin-cloud, #f2f3f5); font-family: "DM Sans", "Inter", sans-serif; }
.fin-home .ps-embed :where(h2, h3) { font-family: "Barlow Condensed", "Arial Narrow", sans-serif; letter-spacing: -.02em; }
.fin-home .ps-embed .ps-h2, .fin-home .ps-embed .ps-split-copy .ps-h2 { font-size: clamp(36px, 3.7vw, 48px); line-height: 1.02; }
.fin-home .ps-embed .ps-audience h3 { font-size: 32px; }
.fin-home .ps-embed .ps-lead { font-size: 17px; margin-top: 20px; }
.fin-home .ps-embed .ps-audience p { margin-top: 12px; }
.fin-home .ps-embed .ps-section { padding: 105px 0; }
.fin-home .ps-embed .ps-container { max-width: 1140px; padding: 0 12px; }
@media (max-width: 1199px) { .fin-home .ps-embed .ps-container { max-width: 960px; } }
@media (max-width: 991px) { .fin-home .ps-embed .ps-container { max-width: 720px; } }
@media (max-width: 767px) { .fin-home .ps-embed .ps-container { max-width: 540px; } }
@media (max-width: 575px) { .fin-home .ps-embed .ps-container { max-width: none; padding: 0 16px; } }

/* ---------- responsive ---------- */
@media (max-width: 1100px) {
  .ps-audiences,   .ps-steps { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ps-stats { grid-template-columns: repeat(2, 1fr); row-gap: 48px; }
  .ps-stat:nth-child(3) { border-left: 0; padding-left: 0; }
}
@media (max-width: 991px) {
  .ps-hero { padding: 130px 0 80px; }
  .ps-hero-layout, .ps-hero--block .ps-hero-layout, .ps-hero--price .ps-hero-layout, .ps-hero--phones .ps-hero-layout, .ps-hero--calculator .ps-hero-layout, .ps-hero--split .ps-hero-layout { grid-template-columns: minmax(0, 1fr) !important; }
  .ps-split { gap: 48px; grid-template-columns: minmax(0, 1fr); }
  .ps-split.is-reverse .ps-split-copy { order: 0; }
    .ps-faq { gap: 32px; grid-template-columns: minmax(0, 1fr); }
  .ps-tile { grid-column: span 3; }
  .ps-tile.is-wide { flex-direction: column; grid-column: span 6; }
  .ps-tile.is-wide .ps-tile-copy, .ps-tile.is-wide .ps-tile-demo { align-self: stretch; flex: none; max-width: none; }
  .ps-timeline { gap: 34px; grid-template-columns: repeat(2, 1fr); }
  .ps-timeline::before, .ps-timeline::after { display: none; }
  .ps-section { padding: 90px 0; }
  .ui-toast.t1 { left: 0; } .ui-toast.t2 { right: 0; }
}
@media (max-width: 640px) {
  .ps { font-size: 16px; }
  .ps-container { padding: 0 16px; }
  .ps-hero { padding: 116px 0 64px; }
  .ps-btn { height: 54px; padding: 0 24px; width: 100%; }
  .ps-actions { width: 100%; }
  .ps-section, .ps-statement, .fin-home .ps-embed .ps-section { padding: 72px 0; }
  .ps-heading { margin-bottom: 40px; }
    .ps-stats { grid-template-columns: minmax(0, 1fr); }
  .ps-stat { border-left: 0; padding-left: 0; }
  .ps-compare-row { grid-template-columns: minmax(0, 1fr); }
  .ps-compare-row > div { padding: 12px 18px; }
  .ps-compare-row > div:nth-child(1) { background: var(--cloud); border-top: 1px solid var(--line); }
  .ps-compare-row > div:nth-child(2), .ps-compare-row > div:nth-child(3) { border-top: 0; }
  .ps-compare-row.is-head { display: none; }
  .ps-stage { min-height: 0; padding: 36px 16px; border-radius: 28px; }
  .ps-honest { border-radius: 28px; padding: 40px 24px; }
  .ps-honest p { font-size: 18px; }
  .ps-plan { padding: 32px 24px; }
  .ps-bento { grid-template-columns: minmax(0, 1fr); }
  .ps-tile, .ps-tile.is-wide { grid-column: auto; min-height: 0; padding: 28px 24px; }
  .ps-final { padding: 96px 0; }
  .ui-phone { width: 270px; }
  .ui-screen, .ui-wa, .ui-portal { height: 540px; }
  .ui-phones .ui-phone:nth-child(2) { display: none; }
  .ui-kpis { grid-template-columns: 1fr 1fr; }
  .ui-kpi.is-main { grid-column: 1 / -1; }
  .ui-row2 { grid-template-columns: minmax(0, 1fr); }
  .ui-toast { display: none; }
  .ui-vs { grid-template-columns: minmax(0, 1fr); }
  .ui-vs .ui-xls { display: none; }
  .ui-vs-arrow { display: none; }
  .ui-vs .ui-window { transform: none; }
  .ui-zero-top b { font-size: 110px; }
  .ps-calc-form { grid-template-columns: minmax(0, 1fr); padding: 22px; }
  .ps-calc-types { grid-template-columns: repeat(2, 1fr); }
  .ps-calc-result { grid-template-columns: minmax(0, 1fr); padding: 22px; }
  .ps-calc-cta { padding: 20px 22px; }
  .ps-calc-table th, .ps-calc-table td { padding: 10px; }
  .ui-table > div { grid-template-columns: .7fr 1fr 1fr .9fr; }
  .ui-table > div > span:nth-child(3) { display: none; }
  .ui-paper { transform: none; }
}

@media (prefers-reduced-motion: reduce) {
  .ps *, .ps *::before, .ps *::after { animation: none !important; transition: none !important; }
  [data-reveal] { opacity: 1; transform: none; }
  .ui-chart .line { stroke-dashoffset: 0; }
  .ui-chart .area, .ui-chart .dot, .ui-bubble { opacity: 1; transform: none; }
  .ui-bar i, .ui-hbars i, .ui-cols i, .ui-portal-hero .ui-progress i { transform: none !important; }
  .ui-sign path { stroke-dashoffset: 0; }
  .ps-demo-bar em { transform: none !important; }
  .ps-hero-stage .ui-toast { opacity: 1; transform: none; }
}