/* Motion del sitio (15-oct-2026) — referencias PayPal y Klarna que pasó el founder. Lo mueve motion.js.
   Regla: el estado por defecto es el FINAL (sin JS o con «reducir movimiento» todo se ve completo y quieto);
   html.js-motion activa los contenedores altos con sticky y los estados intermedios. */
:root { --m-ease: cubic-bezier(0.23, 1, 0.32, 1); --navh: 76px; }

/* ── Héroe centrado (PayPal): el título arriba y la foto debajo ─────────────────────────────────────────────────── */
.hero-c { padding: clamp(36px, 6vw, 84px) 0 clamp(20px, 3vw, 36px); text-align: center; overflow: visible; }
.hero-c .wrap { display: block; }
.hero-c .hero-copy { align-items: center; max-width: 980px; margin: 0 auto; gap: 22px; }
.hero-c h1 { font-size: clamp(42px, 7.2vw, 96px); line-height: 1; letter-spacing: -.04em; max-width: 14ch; }
.hero-c .lead { max-width: 56ch; margin: 0 auto; }
.hero-c .hero-actions, .hero-c .hero-rubros { justify-content: center; }
.hero-c .tagline { justify-content: center; }

/* ── 1. Foto que crece ───────────────────────────────────────────────────────────────────────────────────────── */
.xp { position: relative; }
.xp-sticky { position: relative; height: 88vh; min-height: 520px; overflow: hidden; }
html.js-motion .xp { height: 260vh; }
html.js-motion .xp-sticky { position: sticky; top: 0; height: 100vh; height: 100svh; }
.xp-media { position: absolute; inset: 0; background: var(--qp-blue-50); }
.xp-media img { width: 100%; height: 100%; object-fit: cover; transform-origin: 50% 50%; }
.xp-tint { position: absolute; inset: 0; pointer-events: none; opacity: .9;
  background: linear-gradient(180deg, rgba(8,20,42,.34) 0%, rgba(8,20,42,0) 30%, rgba(8,20,42,0) 62%, rgba(8,20,42,.42) 100%); }
.xp-words { position: absolute; inset: 0; margin: 0; pointer-events: none; }
.xp-w1, .xp-w2 { position: absolute; font: 800 min(13.5vw, 210px, calc(90vw / var(--em, 6)))/.86 var(--font-display); letter-spacing: -.05em; color: #fff; white-space: nowrap; text-shadow: 0 4px 40px rgba(8,20,42,.18); will-change: transform; }
.xp-w1 { left: 4vw; top: calc(var(--navh) + 3vh); }
.xp-w2 { right: 4vw; bottom: 5vh; }
.xp-float { position: absolute; margin: 0; right: 7vw; top: calc(var(--navh) + 22vh); width: clamp(170px, 17vw, 250px); will-change: transform; }
.xp-float .shot { border-radius: 22px; aspect-ratio: 984 / 1310; box-shadow: 0 30px 60px -20px rgba(8,20,42,.5); }
.xp-float .sim-tel { --p: .6px; box-shadow: 0 30px 60px -18px rgba(8,20,42,.55); }
.xp-cap { position: absolute; left: 4vw; bottom: 2vh; margin: 0; font-size: 12px; color: rgba(255,255,255,.82); }
@media (max-width: 700px) {
  .xp-w1, .xp-w2 { font-size: min(19vw, calc(92vw / var(--em, 6))); }
  .xp-w1 { top: calc(var(--navh) + 2vh); }
  .xp-w2 { bottom: 7vh; }
  .xp-float { right: 5vw; top: auto; bottom: 24vh; width: 38vw; }
  .xp-float .sim-tel { --p: .42px; }
}

/* ── 2. Pasos que avanzan con el scroll ──────────────────────────────────────────────────────────────────────── */
.story { position: relative; background: var(--surface-page); }
.story-sticky { padding: clamp(56px, 8vw, 104px) 0; }
html.js-motion .story { height: calc(var(--n) * 80vh + 100vh); }
html.js-motion .story-sticky { position: sticky; top: var(--navh); height: calc(100vh - var(--navh)); height: calc(100svh - var(--navh)); padding: 0; display: flex; align-items: center; overflow: hidden; }
.story-grid { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: clamp(32px, 6vw, 96px); align-items: center; width: min(var(--container), calc(100% - 40px)); margin: 0 auto; }
.story-copy { display: flex; flex-direction: column; gap: 16px; }
.story-copy h2 { max-width: 16ch; }
.story-copy .lead { font-size: 17px; }
.story-list { position: relative; display: flex; gap: 22px; margin-top: 10px; }
.story-bar { flex: none; width: 3px; border-radius: 3px; background: var(--qp-ink-100); overflow: hidden; }
.story-bar i { display: block; width: 100%; height: 100%; background: var(--qp-blue-primary); transform-origin: 50% 0; transform: scaleY(1); }
html.js-motion .story-bar i { transform: scaleY(0); }
.story-list ol { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.story-step { display: block; width: 100%; text-align: left; background: none; border: 0; padding: 8px 0; cursor: pointer; font: inherit; color: inherit; }
.story-step b { display: block; font: 700 clamp(21px, 2.3vw, 30px)/1.15 var(--font-display); letter-spacing: -.02em; color: var(--text-primary); transition: color 300ms var(--m-ease); }
.story-desc { display: grid; grid-template-rows: 1fr; transition: grid-template-rows 450ms var(--m-ease), opacity 300ms var(--m-ease); }
.story-desc > p { overflow: hidden; margin: 0; padding-top: 6px; color: var(--text-secondary); font-size: 16.5px; max-width: 44ch; }
html.js-motion .story-step b { color: var(--qp-ink-300); }
html.js-motion .story-step.on b { color: var(--text-primary); }
html.js-motion .story-step .story-desc { grid-template-rows: 0fr; opacity: 0; }
html.js-motion .story-step.on .story-desc { grid-template-rows: 1fr; opacity: 1; }
.story-step:focus-visible { border-radius: 12px; }
.story-copy .more { margin-top: 8px; }
/* Teléfono con capturas de la página de pago */
.story-device { position: relative; width: clamp(250px, 24vw, 330px); aspect-ratio: 984 / 1500; border-radius: 34px; background: #fff; box-shadow: 0 40px 80px -30px rgba(20,47,87,.45), 0 0 0 1px rgba(20,47,87,.06); overflow: hidden; }
.story-shot { position: absolute; inset: 0; }
.story-shot img { width: 100%; height: 100%; object-fit: cover; object-position: top center; }
html.js-motion .story-shot { opacity: 0; transform: translate3d(0, 6%, 0) scale(.98); transition: opacity 450ms var(--m-ease), transform 600ms var(--m-ease); }
html.js-motion .story-shot.on { opacity: 1; transform: none; }
html.js-motion .story-shot.pasado { transform: translate3d(0, -6%, 0) scale(.98); }
.story-device + .story-note, .story-note { margin: 12px 0 0; font-size: 12.5px; color: var(--text-tertiary); text-align: center; }
/* Teléfono del simulador (personas) */
.story-sim { --p: .82px; }
.story-sim .sim-s { transition: opacity 450ms var(--m-ease), visibility 450ms; }
@media (max-width: 900px) {
  html.js-motion .story { height: calc(var(--n) * 70vh + 100vh); }
  .story-grid { grid-template-columns: 1fr; gap: 16px; justify-items: center; text-align: left; }
  .story-copy { width: 100%; order: 2; gap: 8px; }
  .story-copy .eyebrow, .story-copy .lead, .story-copy .more { display: none; }
  .story-copy h2 { font-size: 24px; max-width: none; }
  .story-step { padding: 4px 0; }
  .story-step b { font-size: 18px; }
  .story-desc > p { font-size: 14.5px; }
  .story-list { margin-top: 2px; gap: 14px; }
  .story-device { width: min(44vw, 210px); border-radius: 24px; }
  .story-sim { --p: .44px; }
  html:not(.js-motion) .story-copy .eyebrow, html:not(.js-motion) .story-copy .lead { display: flex; }
}
@media (max-width: 900px) and (max-height: 720px) { .story-device { width: min(38vw, 170px); } .story-sim { --p: .38px; } }

/* ── 3. Lista de palabras grandes ────────────────────────────────────────────────────────────────────────────── */
.wheel { position: relative; background: #fff; }
.wheel-sticky { padding: clamp(56px, 8vw, 104px) 0; }
html.js-motion .wheel { height: calc(var(--n) * 55vh + 100vh); }
html.js-motion .wheel-sticky { position: sticky; top: var(--navh); height: calc(100vh - var(--navh)); height: calc(100svh - var(--navh)); padding: clamp(24px, 5vh, 56px) 0 0; display: flex; overflow: hidden; }
.wheel-in { display: flex; flex-direction: column; align-items: center; text-align: center; width: min(var(--container), calc(100% - 40px)); margin: 0 auto; }
.wheel-in .section-head { align-items: center; margin-bottom: 8px; }
.wheel-in .section-head h2 { max-width: 20ch; }
.wheel-view { position: relative; width: 100%; }
html.js-motion .wheel-view { flex: 1; overflow: hidden; -webkit-mask-image: linear-gradient(180deg, transparent 0, #000 22%, #000 78%, transparent 100%); mask-image: linear-gradient(180deg, transparent 0, #000 22%, #000 78%, transparent 100%); }
.wheel-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: clamp(14px, 3vh, 30px); }
html.js-motion .wheel-list { transition: transform 650ms var(--m-ease); will-change: transform; }
.wheel-item h3 { font: 800 clamp(32px, 5vw, 68px)/1.02 var(--font-display); letter-spacing: -.035em; color: var(--text-primary); transition: color 350ms var(--m-ease); }
.wheel-pill { display: inline-flex; margin-bottom: 8px; padding: 4px 12px; border-radius: var(--radius-pill); background: #e7f8ee; color: #0f7a3f; font-weight: 700; font-size: 12px; letter-spacing: .04em; }
.wheel-desc { display: grid; grid-template-rows: 1fr; transition: grid-template-rows 450ms var(--m-ease), opacity 300ms var(--m-ease); }
.wheel-desc > div { overflow: hidden; display: flex; flex-direction: column; align-items: center; gap: 14px; }
.wheel-desc p { margin: 12px auto 0; max-width: 52ch; color: var(--text-secondary); font-size: 17px; }
.wheel-desc .btn { margin-bottom: 4px; }
html.js-motion .wheel-item h3 { color: var(--qp-ink-200); }
html.js-motion .wheel-item.on h3 { color: var(--text-primary); }
html.js-motion .wheel-item .wheel-pill { opacity: .35; transition: opacity 300ms; }
html.js-motion .wheel-item.on .wheel-pill { opacity: 1; }
html.js-motion .wheel-item .wheel-desc { grid-template-rows: 0fr; opacity: 0; }
html.js-motion .wheel-item.on .wheel-desc { grid-template-rows: 1fr; opacity: 1; }
@media (max-width: 700px) { .wheel-desc p { font-size: 15.5px; } .wheel-in .section-head .lead { display: none; } }

/* ── 4. Tarjetas que se apilan ───────────────────────────────────────────────────────────────────────────────── */
.stack-sec { background: #fff; padding: clamp(56px, 8vw, 104px) 0 clamp(40px, 6vw, 80px); }
.stack { display: flex; flex-direction: column; gap: 6vh; }
.stack-card { position: sticky; top: calc(var(--navh) + 20px + var(--i) * 10px); }
.stack-in { position: relative; display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); min-height: min(520px, calc(100vh - var(--navh) - 80px)); border-radius: 32px; overflow: hidden; transform-origin: 50% 0; background: #fff; box-shadow: 0 -10px 40px -12px rgba(20,47,87,.18); will-change: transform; }
.stack-in::after { content: ""; position: absolute; inset: 0; background: #08142a; opacity: var(--sombra, 0); pointer-events: none; }
.stack-txt { display: flex; flex-direction: column; gap: 16px; padding: clamp(28px, 4vw, 56px); }
.stack-txt .use-ic { width: 52px; height: 52px; border-radius: 16px; }
.stack-txt h3 { font: 800 clamp(30px, 3.6vw, 50px)/1.02 var(--font-display); letter-spacing: -.035em; color: inherit; }
.stack-txt p { font-size: 17px; line-height: 1.5; max-width: 46ch; }
.stack-txt .tags { display: flex; flex-wrap: wrap; gap: 8px; }
.stack-txt .tags span { padding: 6px 12px; border-radius: var(--radius-pill); font-size: 13px; font-weight: 600; }
.stack-txt .btn { margin-top: auto; align-self: flex-start; }
.stack-pic { position: relative; min-height: 240px; }
.stack-pic img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.stack-vis { display: grid; place-items: center; padding: 32px; }
/* Colores (design system): azul de marca, azul noche, azul claro y blanco, en ese orden. */
.stack-card.t-blue .stack-in { background: var(--gradient-brand); color: #fff; }
.stack-card.t-navy .stack-in { background: var(--qp-blue-900); color: #fff; }
.stack-card.t-sky .stack-in { background: var(--qp-blue-50); color: var(--text-primary); }
.stack-card.t-white .stack-in { background: #fff; color: var(--text-primary); box-shadow: 0 -10px 40px -12px rgba(20,47,87,.18), inset 0 0 0 1px var(--border-default); }
.t-blue .stack-txt p, .t-navy .stack-txt p { color: rgba(255,255,255,.86); }
.t-sky .stack-txt p, .t-white .stack-txt p { color: var(--text-secondary); }
.t-blue .use-ic, .t-navy .use-ic { background: rgba(255,255,255,.14); color: #fff; }
.t-blue .tags span, .t-navy .tags span { background: rgba(255,255,255,.14); color: #fff; }
.t-sky .tags span, .t-white .tags span { background: #fff; color: var(--qp-blue-700); box-shadow: inset 0 0 0 1px var(--qp-blue-100); }
.t-sky .use-ic { background: #fff; }
.t-blue .btn-secondary, .t-navy .btn-secondary { background: transparent; color: #fff; border-color: rgba(255,255,255,.6); box-shadow: none; }
.t-blue .btn-secondary:hover, .t-navy .btn-secondary:hover { background: rgba(255,255,255,.12); border-color: #fff; }
.stack-end { margin-top: clamp(32px, 5vw, 56px); display: flex; flex-direction: column; align-items: center; gap: 14px; text-align: center; color: var(--text-secondary); }
@media (max-width: 800px) {
  .stack { gap: 3vh; }
  .stack-card { top: calc(var(--navh) + 12px + var(--i) * 6px); }
  .stack-in { grid-template-columns: 1fr; min-height: 0; border-radius: 26px; }
  .stack-pic { order: -1; min-height: 0; height: 30vh; max-height: 220px; }
  .stack-txt { gap: 12px; padding: 22px; }
  .stack-txt p { font-size: 15.5px; }
}

/* ── 5. Pie gigante ──────────────────────────────────────────────────────────────────────────────────────────── */
.giant { overflow: hidden; margin: 24px 0 -4px; }
.giant-wm { display: block; font-family: "Baloo 2", var(--font-display); font-weight: 800; font-size: min(calc((100vw - 40px) / 3.9), 307px); line-height: .8; letter-spacing: -.045em; text-align: center; color: var(--text-primary); text-transform: lowercase; user-select: none; will-change: transform; padding-bottom: .06em; }
.giant-wm b { font-weight: 800; color: var(--qp-blue-primary); }

/* ── 6. Aparecer al entrar ───────────────────────────────────────────────────────────────────────────────────── */
html.js-motion [data-rv] { opacity: 0; transform: translate3d(0, 26px, 0); transition: opacity 700ms var(--m-ease), transform 900ms var(--m-ease); }
html.js-motion [data-rv].rv-in { opacity: 1; transform: none; }
html.js-motion [data-rv-kids] > * { opacity: 0; transform: translate3d(0, 22px, 0); transition: opacity 600ms var(--m-ease), transform 800ms var(--m-ease); }
html.js-motion [data-rv-kids].rv-in > * { opacity: 1; transform: none; }
[data-rv-kids] > :nth-child(2) { transition-delay: 70ms; } [data-rv-kids] > :nth-child(3) { transition-delay: 140ms; }
[data-rv-kids] > :nth-child(4) { transition-delay: 210ms; } [data-rv-kids] > :nth-child(5) { transition-delay: 280ms; } [data-rv-kids] > :nth-child(6) { transition-delay: 350ms; }

@media (prefers-reduced-motion: reduce) {
  html.js-motion [data-rv], html.js-motion [data-rv-kids] > * { opacity: 1; transform: none; transition: none; }
}

/* Visuales de las tarjetas de /personas/ (sin foto). */
.vis-wa { width: min(220px, 60%); height: auto; color: rgba(255,255,255,.95); }
.vis-chips { display: flex; flex-wrap: wrap; gap: 12px; justify-content: center; align-content: center; }
.vis-chips span { display: inline-flex; align-items: center; gap: 10px; padding: 14px 22px; border-radius: var(--radius-pill); background: rgba(255,255,255,.12); color: #fff; font: 700 clamp(18px, 2vw, 24px) var(--font-display); }
.vis-chips svg { width: 24px; height: 24px; }
.vis-banco { position: relative; }
.vis-banco svg { width: clamp(120px, 14vw, 180px); height: auto; color: var(--qp-blue-primary); stroke-width: 1.4; }
.vis-banco .flag { position: absolute; right: 22%; bottom: 22%; font-size: clamp(40px, 5vw, 64px); }
.vis-carrier .carrier { width: min(420px, 100%); }
@media (max-width: 800px) { .stack-vis { order: -1; padding: 22px; min-height: 140px; } .vis-wa { width: 110px; } .vis-banco svg { width: 96px; } }
.vis-carrier .carrier { display: flex; flex-direction: column; justify-content: center; align-items: flex-start; gap: 16px; background: #fff; border-radius: var(--radius-md); padding: 22px 24px; box-shadow: var(--shadow-sm); }
.vis-carrier .carrier img { height: 34px; width: auto; flex: none; }
.vis-carrier .carrier-opts { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.vis-carrier .carrier-opts small { font-size: 12px; font-weight: 600; color: var(--text-tertiary); margin-right: 2px; }
.vis-carrier .carrier-opts span { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; font-weight: 600; color: var(--qp-blue-700); background: var(--qp-blue-50); padding: 6px 11px; border-radius: var(--radius-pill); white-space: nowrap; }
.vis-carrier .carrier-opts svg { width: 14px; height: 14px; }
.t-white .stack-vis { background: var(--qp-blue-50); }
/* Personas: el teléfono flotante va más abajo para no tapar «envía y paga». */
.xp-float-tel { top: calc(var(--navh) + 30vh); }
@media (max-width: 900px) { .story-grid > div:last-child { display: flex; flex-direction: column; align-items: center; } }
@media (max-width: 700px) { .xp-float-tel { top: auto; bottom: 22vh; } }

/* ═══ Ronda 2 (15-oct, founder: «título mucho más corto… dividir izquierda/derecha… un pedacito de la imagen») ═══ */
/* Héroe partido: título a la izquierda; una línea y los botones a la derecha. Debajo asoma la foto. */
.hero-s { padding: clamp(28px, 4.5vw, 64px) 0 0; background: #fff; }
.hero-s .wrap { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: clamp(24px, 5vw, 80px); align-items: end; }
.hero-s .hs-izq { display: flex; flex-direction: column; gap: 18px; align-items: flex-start; }
.hero-s h1 { font-size: clamp(38px, 5.2vw, 72px); line-height: 1.02; letter-spacing: -.04em; max-width: 13ch; }
.hero-s .hs-der { display: flex; flex-direction: column; gap: 20px; padding-bottom: 6px; }
.hero-s .hs-der .lead { font-size: clamp(16px, 1.35vw, 19px); max-width: 40ch; }
.hero-s .hero-actions { gap: 10px; }
.hero-s .hs-nota { display: inline-flex; align-items: center; gap: 8px; font-size: 14px; color: var(--text-tertiary); }
.hero-s .hs-nota svg { width: 16px; height: 16px; color: var(--qp-blue-primary); }
.hero-s .hs-nota .flag { font-size: 16px; }
.hero-personas.hero-s .hs-nota { color: var(--qp-whatsapp-dark); font-weight: 600; }
@media (max-width: 860px) {
  .hero-s .wrap { grid-template-columns: 1fr; gap: 16px; align-items: start; }
  .hero-s h1 { font-size: clamp(34px, 9vw, 46px); }
  .hero-s .hero-actions .btn { flex: 1 1 auto; }
}
/* El héroe nuevo deja asomar la tarjeta: menos aire arriba de la foto. */
html.js-motion .hero-s + .xp { margin-top: -2vh; }

/* ── Tarjetas que suben una encima de otra (Klarna) ── */
.kl-sec { background: #fff; padding-top: clamp(56px, 8vw, 104px); }
.kl-sec > .wrap > .section-head { align-items: center; text-align: center; margin: 0 auto; }
.kl { position: relative; }
.kl-sticky { padding: 32px 0 clamp(56px, 8vw, 96px); }
html.js-motion .kl { height: calc(var(--n) * 75vh + 60vh); }
html.js-motion .kl-sticky { position: sticky; top: var(--navh); height: calc(100vh - var(--navh)); height: calc(100svh - var(--navh)); padding: 0; display: flex; align-items: center; }
.kl-grid { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: clamp(32px, 6vw, 96px); align-items: center; width: min(1080px, calc(100% - 40px)); margin: 0 auto; }
.kl-cards { position: relative; width: clamp(280px, 30vw, 420px); aspect-ratio: 4 / 5; max-height: calc(100vh - var(--navh) - 64px); }
.kl-card { position: absolute; inset: 0; will-change: transform; }
html.js-motion .kl-card + .kl-card { transform: translate3d(0, 112%, 0); }
.kl-in { width: 100%; height: 100%; border-radius: 28px; overflow: hidden; display: grid; place-items: center; transform-origin: 50% 0; box-shadow: 0 30px 60px -30px rgba(20,47,87,.45); }
.kl-in .sim-tel { --p: .74px; box-shadow: 0 30px 50px -20px rgba(8,20,42,.45); }
.kc-a { background: linear-gradient(160deg, #3d8bf5 0%, #1975f1 55%, #1b54a3 100%); }
.kc-b { background: linear-gradient(160deg, #eaf2fe 0%, #d3e4fd 100%); }
.kc-c { background: linear-gradient(160deg, #1b54a3 0%, #142f57 100%); }
.kc-wa1 { background: linear-gradient(160deg, #3ddc84 0%, #25d366 50%, #128c4a 100%); }
.kc-wa2 { background: linear-gradient(160deg, #e3f9ec 0%, #c6f0d7 100%); }
.kc-wa3 { background: linear-gradient(160deg, #1fa855 0%, #0e5f33 100%); }
.kl-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 4px; }
.kl-step { display: block; width: 100%; text-align: left; background: none; border: 0; padding: 10px 0; cursor: pointer; font: inherit; color: inherit; }
.kl-step b { display: block; font: 700 clamp(24px, 2.8vw, 38px)/1.1 var(--font-display); letter-spacing: -.03em; color: var(--text-primary); transition: color 300ms var(--m-ease); }
.kl-step .story-desc > p { font-size: 17px; }
html.js-motion .kl-step b { color: var(--qp-ink-200); }
html.js-motion .kl-step.on b { color: var(--text-primary); }
html.js-motion .kl-step .story-desc { grid-template-rows: 0fr; opacity: 0; }
html.js-motion .kl-step.on .story-desc { grid-template-rows: 1fr; opacity: 1; }
.kl-pie { margin-top: 18px; display: flex; flex-direction: column; gap: 6px; }
.kl-pie small { color: var(--text-tertiary); font-size: 12.5px; }
@media (max-width: 860px) {
  html.js-motion .kl { height: calc(var(--n) * 70vh + 60vh); }
  .kl-grid { grid-template-columns: 1fr; gap: 18px; justify-items: center; }
  .kl-cards { width: min(64vw, 270px); max-height: 50vh; }
  .kl-in .sim-tel { --p: .46px; }
  .kl-step { padding: 4px 0; }
  .kl-step b { font-size: 20px; }
  .kl-step .story-desc > p { font-size: 14.5px; }
  .kl-pie { display: none; }
  html:not(.js-motion) .kl-pie { display: flex; }
}
@media (max-width: 860px) and (max-height: 740px) { .kl-cards { width: min(52vw, 220px); } .kl-in .sim-tel { --p: .38px; } }

/* ── Azul noche: palabras a la izquierda, foto a la derecha (PayPal «Send / Receive / Pool») ── */
.pp { position: relative; background: var(--qp-blue-900); color: #fff; }
.pp-sticky { padding: clamp(56px, 8vw, 104px) 0; }
html.js-motion .pp { height: calc(var(--n) * 55vh + 100vh); }
html.js-motion .pp-sticky { position: sticky; top: var(--navh); height: calc(100vh - var(--navh)); height: calc(100svh - var(--navh)); padding: 0; display: flex; align-items: center; overflow: hidden; }
.pp-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(32px, 6vw, 96px); align-items: center; width: min(var(--container), calc(100% - 40px)); margin: 0 auto; }
.pp-copy { display: flex; flex-direction: column; gap: 14px; }
.pp-copy .eyebrow { background: rgba(255,255,255,.12); color: #fff; }
.pp-copy h2 { color: #fff; font-size: clamp(26px, 2.8vw, 38px); max-width: 18ch; }
.pp-words { list-style: none; margin: 10px 0 0; padding: 0; display: flex; flex-direction: column; }
.pp-w { display: block; text-align: left; background: none; border: 0; padding: 0; cursor: pointer; font: 800 clamp(30px, 4vw, 56px)/1.08 var(--font-display); letter-spacing: -.035em; color: #fff; }
.pp-w small { display: inline-flex; vertical-align: middle; margin-left: 10px; padding: 3px 10px; border-radius: var(--radius-pill); background: rgba(37,211,102,.18); color: #7ef0ad; font: 700 11px/1.4 var(--font-body); letter-spacing: .04em; text-transform: uppercase; }
html.js-motion .pp-w { color: rgba(255,255,255,.28); transition: color 350ms var(--m-ease); }
html.js-motion .pp-w.on { color: #fff; }
.pp-descs { position: relative; margin-top: 12px; }
.pp-desc { display: flex; flex-direction: column; gap: 14px; align-items: flex-start; }
.pp-desc + .pp-desc { margin-top: 18px; }
.pp-desc p { margin: 0; color: rgba(255,255,255,.82); font-size: 17px; max-width: 46ch; }
.pp-desc .btn { background: transparent; color: #fff; border: 1px solid rgba(255,255,255,.55); box-shadow: none; }
.pp-desc .btn:hover { background: rgba(255,255,255,.1); border-color: #fff; }
html.js-motion .pp-descs { min-height: 150px; }
html.js-motion .pp-desc { position: absolute; inset: 0 0 auto 0; margin: 0; opacity: 0; transform: translate3d(0, 12px, 0); transition: opacity 350ms var(--m-ease), transform 500ms var(--m-ease); pointer-events: none; }
html.js-motion .pp-desc.on { opacity: 1; transform: none; pointer-events: auto; }
.pp-vis { position: relative; justify-self: center; width: min(100%, 440px); aspect-ratio: 4 / 5; max-height: calc(100vh - var(--navh) - 64px); }
.pp-card { position: absolute; inset: 0; border-radius: 30px; overflow: hidden; background: var(--qp-blue-700); }
.pp-card + .pp-card { display: none; }
html.js-motion .pp-card + .pp-card { display: block; }
html.js-motion .pp-card { opacity: 0; transform: translate3d(0, 8%, 0) scale(.97); transition: opacity 500ms var(--m-ease), transform 700ms var(--m-ease); }
html.js-motion .pp-card.on { opacity: 1; transform: none; }
html.js-motion .pp-card.pasado { transform: translate3d(0, -6%, 0) scale(.97); }
.pp-card img { width: 100%; height: 100%; object-fit: cover; }
/* Tarjeta translúcida sobre la foto (el «frosted app card» de PayPal) */
.pp-glass { position: absolute; left: 50%; bottom: 7%; transform: translateX(-50%); width: min(78%, 300px); padding: 18px 20px; border-radius: 24px; background: rgba(12,24,48,.42); -webkit-backdrop-filter: blur(16px) saturate(140%); backdrop-filter: blur(16px) saturate(140%); color: #fff; display: flex; flex-direction: column; gap: 6px; box-shadow: 0 20px 40px -20px rgba(0,0,0,.5); }
.pp-glass .gi { width: 40px; height: 40px; border-radius: 12px; background: rgba(255,255,255,.18); display: grid; place-items: center; }
.pp-glass .gi svg { width: 22px; height: 22px; }
.pp-glass b { font: 700 19px/1.2 var(--font-display); letter-spacing: -.02em; }
.pp-glass span { font-size: 13.5px; color: rgba(255,255,255,.82); }
.pp-glass.wa .gi { background: #25d366; }
@media (max-width: 860px) {
  html.js-motion .pp { height: calc(var(--n) * 50vh + 100vh); }
  .pp-grid { grid-template-columns: 1fr; gap: 14px; }
  .pp-vis { order: -1; width: min(70vw, 280px); max-height: 38vh; }
  .pp-copy h2, .pp-copy .eyebrow { display: none; }
  .pp-w { font-size: 24px; }
  .pp-desc p { font-size: 14.5px; }
  html.js-motion .pp-descs { min-height: 120px; }
  .pp-glass { padding: 12px 14px; } .pp-glass b { font-size: 15px; } .pp-glass span { font-size: 12px; }
  html:not(.js-motion) .pp-copy h2 { display: block; }
}

/* Tarjeta verde para lo que es WhatsApp (founder: «hablas de WhatsApp y no lo muestras en verde»). */
.stack-card.t-green .stack-in { background: linear-gradient(150deg, #25d366 0%, #128c4a 100%); color: #fff; }
.t-green .stack-txt p { color: rgba(255,255,255,.9); }
.t-green .use-ic, .t-green .tags span { background: rgba(255,255,255,.18); color: #fff; }
.t-green .btn-secondary { background: #fff; color: #0f7a3d; border-color: #fff; }

/* Cifras en vivo con el número resaltado (el «Millones» marcado de Klarna). */
.proof .num { position: relative; }
.mark-hl { background: linear-gradient(transparent 58%, rgba(37,211,102,.35) 58%); padding: 0 .08em; }

/* Pie gigante: el punto de la «i» se cortaba (founder, 15-oct). Se recorta sólo de lado, nunca arriba. */
.giant { overflow: visible; overflow-x: clip; padding-top: .12em; }
.giant-wm { line-height: .9; }
/* Pie en el teléfono (founder: «exageradamente extenso, desordenado»): sin la lista de rubros (están en el menú),
   dos columnas cortas y letra más chica. */
@media (max-width: 760px) {
  footer { padding: 32px 0 22px; }
  .foot { grid-template-columns: 1fr 1fr; gap: 22px 16px; }
  .foot > div:first-child { grid-column: 1 / -1; }
  .foot > div:nth-child(3) { display: none; }
  .foot h4 { margin-bottom: 8px; }
  .foot ul { gap: 6px; }
  .foot a { font-size: 14px; }
  .foot p { font-size: 13.5px; }
  .foot-bottom { margin-top: 18px; font-size: 12px; }
}
html.js-motion .kl-sticky { overflow: hidden; }
.kl-cards { overflow: hidden; border-radius: 28px; } .kl-in { box-shadow: none; } .kl-cards { box-shadow: 0 30px 60px -30px rgba(20,47,87,.45); }

/* ═══ Escala de texto (15-oct, founder: «los textos están muy grandes»). Medido con Chromium a 1440 px: PayPal usa
   título 99 px en 2 líneas, secciones 55–67 px, texto 18–21 px, menú y botones 16 px. Lo que pesaba aquí no era el
   tamaño sino el bloque: título en 3 líneas, Poppins 800 (muy ancha) y botones grandes en otra columna. ⇒ héroe
   centrado en 2 líneas, peso 700, botones de 16 px; los títulos de sección bajan un punto. ═══ */
.hero-s { padding: clamp(36px, 5vw, 72px) 0 clamp(8px, 1.5vw, 20px); text-align: center; }
.hero-s .wrap { grid-template-columns: 1fr; gap: 18px; justify-items: center; align-items: center; }
.hero-s .hs-izq { align-items: center; gap: 16px; }
.hero-s h1 { font-size: clamp(36px, 4.3vw, 62px); font-weight: 700; line-height: 1.06; letter-spacing: -.035em; max-width: 20ch; }
.hero-s .hs-der { align-items: center; gap: 16px; padding: 0; }
.hero-s .hs-der .lead { font-size: 18px; max-width: 54ch; margin: 0 auto; }
.hero-s .hero-actions { justify-content: center; }
.hero-s .hero-actions .btn-lg { min-height: 50px; padding: 0 24px; font-size: 16px; }
.hero-s .hs-nota { font-size: 13.5px; }
h2 { font-size: clamp(28px, 3vw, 42px); }
.stack-txt h3 { font-size: clamp(26px, 2.6vw, 38px); font-weight: 700; }
.pp-w { font-size: clamp(28px, 3.1vw, 46px); font-weight: 700; }
.kl-step b { font-size: clamp(21px, 2vw, 30px); }
@media (max-width: 860px) {
  .hero-s { text-align: left; }
  .hero-s .wrap, .hero-s .hs-izq, .hero-s .hs-der { justify-items: start; align-items: flex-start; }
  .hero-s h1 { font-size: clamp(32px, 8.4vw, 42px); }
  .hero-s .hs-der .lead { font-size: 16px; margin: 0; }
  .hero-s .hero-actions { justify-content: flex-start; }
}
/* La píldora va centrada sobre el título (founder, 15-oct; una regla vieja de .hero-personas la mandaba a la izquierda). */
.hero-s .eyebrow, .hero-personas.hero-s .eyebrow { align-self: center; }
@media (max-width: 860px) { .hero-s .eyebrow, .hero-personas.hero-s .eyebrow { align-self: flex-start; } }
/* La sombra de las tarjetas de Klarna caía sobre la sección azul de abajo. */
.kl-cards { box-shadow: 0 18px 36px -22px rgba(20,47,87,.35); }
/* Sección azul: el título va ARRIBA, fuera de la parte fija, para que nunca se corte bajo el menú. */
.pp-head { padding: clamp(56px, 7vw, 96px) 0 0; }
.pp-head .section-head { margin-bottom: 0; }
.pp-head .eyebrow { background: rgba(255,255,255,.12); color: #fff; }
.pp-head h2 { color: #fff; max-width: 22ch; }
@media (max-width: 860px) { .pp-head .lead { display: none; } }
/* Pasos (Klarna): el texto se veía chico frente al blanco alrededor (founder, 15-oct). Más grande y la tarjeta también. */
.kl-grid { width: min(1200px, calc(100% - 40px)); }
.kl-cards { width: clamp(300px, 31vw, 460px); }
.kl-in .sim-tel { --p: .8px; }
.kl-step b { font-size: clamp(26px, 2.9vw, 42px); }
.kl-step .story-desc > p { font-size: clamp(17px, 1.4vw, 21px); max-width: 34ch; }
.kl-pie .more { font-size: 17px; }
@media (max-width: 860px) { .kl-cards { width: min(64vw, 270px); } .kl-in .sim-tel { --p: .46px; } .kl-step b { font-size: 20px; } .kl-step .story-desc > p { font-size: 14.5px; } }
/* El teléfono no toca los bordes de la tarjeta (founder, 15-oct): mide el 78 % del alto de la tarjeta, sea cual sea. */
.kl-in { container-type: size; }
.kl-in .sim-tel, .kl-in .sim-tel { --p: calc(78cqh / 640); }
@media (max-width: 860px) { .kl-in .sim-tel { --p: calc(80cqh / 640); } }
.kl-step b { text-wrap: balance; font-size: clamp(26px, 2.7vw, 40px); }

/* ═══ Teléfono y tableta (15-oct, founder: «en responsive se debe ver más perfecto todavía») ═══ */
/* Franja de 4 datos: cuatro tarjetas, no una línea de texto suelto. */
.facts-strip ul { gap: 12px; }
.facts-strip li { background: #fff; border: 1px solid var(--border-subtle); border-radius: 18px; padding: 14px 16px; box-shadow: 0 1px 2px rgba(20,47,87,.04); }
.facts-strip li svg { flex: none; width: 36px; height: 36px; padding: 8px; border-radius: 12px; background: var(--qp-blue-50); color: var(--qp-blue-primary); }
@media (max-width: 860px) {
  .facts-strip ul { grid-template-columns: 1fr 1fr !important; gap: 10px; }
  .facts-strip li { flex-direction: column; align-items: center; text-align: center; gap: 8px; padding: 16px 12px; }
  .facts-strip li span { font-size: 14px; line-height: 1.35; }
}

@media (max-width: 860px) {
  /* Héroe centrado */
  .hero-s { text-align: center; }
  .hero-s .wrap, .hero-s .hs-izq, .hero-s .hs-der { justify-items: center; align-items: center; }
  .hero-s .eyebrow, .hero-personas.hero-s .eyebrow { align-self: center; }
  .hero-s .hs-der .lead { margin: 0 auto; }
  .hero-s .hero-actions { justify-content: center; width: 100%; }
  .hero-s .hero-actions .btn { flex: 1 1 100%; max-width: 360px; }
  .section-head { align-items: center; text-align: center; margin-left: auto; margin-right: auto; }
  .pp-head .section-head { align-items: center; }

  /* Pasos (Klarna): tarjeta grande y selector giratorio debajo */
  .kl-grid { gap: 14px; height: 100%; grid-template-rows: auto 1fr; align-content: start; padding-top: 14px; }
  .kl-cards { width: auto; height: calc((100svh - var(--navh)) * .6); max-height: none; aspect-ratio: 4 / 5; }
  .kl-in .sim-tel { --p: calc(80cqh / 640); }
  .kl-grid > div:last-child { width: 100%; max-width: 440px; height: 100%; overflow: hidden; position: relative;
    -webkit-mask-image: linear-gradient(180deg, #000 62%, transparent 100%); mask-image: linear-gradient(180deg, #000 62%, transparent 100%); }
  .kl-list { transition: transform 550ms var(--m-ease); text-align: center; gap: 10px; }
  .kl-step { text-align: center; padding: 2px 0; }
  .kl-step b { font-size: clamp(22px, 6vw, 28px); }
  .kl-step .story-desc > p { margin: 0 auto; font-size: 15.5px; }
  html.js-motion .kl-step:not(.on) b { color: var(--qp-ink-300); }

  /* Sección azul: foto con alto fijo según la pantalla y palabras en selector giratorio */
  .pp-grid { gap: 16px; text-align: center; justify-items: center; }
  .pp-vis { order: -1; width: auto; height: calc((100svh - var(--navh)) * .44); max-height: none; aspect-ratio: 4 / 5; }
  .pp-copy { width: 100%; align-items: center; gap: 8px; }
  html.js-motion .pp-wv { width: 100%; height: calc(clamp(26px, 7vw, 32px) * 1.08 * 1.75); overflow: hidden;
    -webkit-mask-image: linear-gradient(180deg, #000 55%, transparent 100%); mask-image: linear-gradient(180deg, #000 55%, transparent 100%); }
  html.js-motion .pp-words { margin: 0; transition: transform 550ms var(--m-ease); }
  .pp-w { font-size: clamp(26px, 7vw, 32px); text-align: center; width: 100%; }
  .pp-w small { display: none; }
  .pp-descs { width: 100%; }
  html.js-motion .pp-descs { min-height: 140px; }
  .pp-desc { align-items: center; text-align: center; }
  .pp-desc p { margin: 0 auto; }

  /* Modal «Ver cómo funciona»: el teléfono se ajusta al alto real de la pantalla */
  .sim-modal .sim-panel { --p: clamp(.4px, calc((100dvh - 300px) / 640), .74px); }
}
/* Ventana angosta pero alta (tableta, laptop en ventana chica): la sección azul no debe pasar del alto disponible */
@media (min-width: 861px) and (max-height: 820px) { .pp-w { font-size: clamp(26px, 2.6vw, 38px); } .pp-vis { max-height: calc(100vh - var(--navh) - 80px); } }
@media (max-width: 860px) {
  /* En el selector giratorio la descripción abre y cierra sin animar alto: así la posición de cada paso se mide bien
     y lo que se mueve es la lista entera (el giro). */
  .kl-step .story-desc { transition: opacity 300ms var(--m-ease); }
  .sim-modal .sim-panel { --p: clamp(.38px, calc((100dvh - 330px) / 640), .74px); }
}
.pp-words, .kl-list { position: relative; }
@media (min-width: 1181px) {
  .facts-strip li { padding: 12px 14px; gap: 10px; }
  .facts-strip li svg { width: 32px; height: 32px; padding: 7px; }
  .facts-strip li span { white-space: nowrap; font-size: 14.5px; }
}
/* Teléfono: la foto de la sección azul a todo el ancho y rectangular; la tarjeta translúcida en una fila, ícono a la
   izquierda y texto a la derecha (founder, 15-oct). */
@media (max-width: 860px) {
  .pp-vis { width: 100%; max-width: 560px; aspect-ratio: auto; height: calc((100svh - var(--navh)) * .38); border-radius: 26px; }
  .pp-card { border-radius: 26px; }
  .pp-card img { object-position: center 30%; }
  .pp-glass { flex-direction: row; align-items: center; gap: 12px; left: 12px; right: 12px; bottom: 12px; width: auto; transform: none; padding: 10px 14px 10px 10px; border-radius: 18px; text-align: left; }
  .pp-glass .gi { flex: none; width: 38px; height: 38px; }
  .pp-glass b { font-size: 16px; }
  .pp-glass span:not(.gi) { display: none; }
}
/* ═══ Sección azul en el teléfono, rehecha tras ver el video del iPhone (15-oct): la foto era una franja delgada, sobraba
   azul abajo y la palabra siguiente asomando confundía. ⇒ foto alta, una sola palabra, puntos de avance y todo el
   bloque centrado. ═══ */
.pp-dots { display: none; }
@media (max-width: 860px) {
  html.js-motion .pp-sticky { align-items: center; }
  .pp-grid { gap: 14px; align-content: center; }
  .pp-vis { height: calc((100svh - var(--navh)) * .47); max-height: 420px; }
  .pp-card img { object-position: center 35%; }
  .pp-dots { display: flex; justify-content: center; gap: 6px; margin: 2px 0 2px; }
  .pp-dots i { width: 7px; height: 7px; border-radius: 999px; background: rgba(255,255,255,.28); transition: width 300ms var(--m-ease), background 300ms; }
  .pp-dots i.on { width: 22px; background: #fff; }
  html.js-motion .pp-wv { height: calc(clamp(26px, 7vw, 32px) * 1.15); -webkit-mask-image: none; mask-image: none; }
  .pp-desc p { font-size: 15px; line-height: 1.45; }
  .pp-desc .btn { min-height: 40px; padding: 0 18px; font-size: 14.5px; }
  html.js-motion .pp-descs { min-height: 150px; }
}
@media (max-width: 860px) and (max-height: 700px) { .pp-vis { height: calc((100svh - var(--navh)) * .4); } html.js-motion .pp-descs { min-height: 130px; } .pp-desc p { font-size: 14px; } }
@media (max-width: 860px) {
  /* Las tildes de la palabra siguiente asomaban en el visor: más separación entre palabras. */
  .pp-words li { padding-bottom: .5em; }
  .pp-w { line-height: 1.15; }
}
/* Al final de la página Safari «rebota» y pintaba blanco debajo del pie (founder, 15-oct). El fondo base toma el color
   del pie y se desactiva el rebote vertical: la página termina en «Hecho con ♥ desde Venezuela». */
html { background: var(--surface-page); overscroll-behavior-y: none; }
body { overscroll-behavior-y: none; }
/* El wordmark gigante, mientras sube, sobresalía por debajo y Safari alargaba la página (founder, 15-oct): se recorta
   dentro de su caja, y el pie termina justo después de «Hecho con ♥ desde Venezuela». */
.giant { overflow: hidden; }
footer { padding-bottom: 18px; }
.foot-bottom { padding-bottom: 0; margin-bottom: 0; }
/* Tarjetas de soluciones en el teléfono: sin etiquetas (el texto ya lo dice) y más compactas, para que el botón no
   quede tapado por la tarjeta siguiente (founder, 15-oct). */
@media (max-width: 800px) {
  .stack-txt .tags { display: none; }
  .stack-txt h3 { font-size: 24px; }
  .stack-txt { gap: 10px; padding: 18px 20px 20px; }
  .stack-txt .use-ic { width: 42px; height: 42px; border-radius: 13px; }
  .stack-txt .btn { min-height: 44px; padding: 0 18px; font-size: 15px; }
  .stack-pic { height: 26vh; max-height: 200px; }
}
.pp-card picture { display: block; width: 100%; height: 100%; }
@media (max-width: 860px) { .pp-card img { object-position: center center; } }
@media (max-width: 860px) { .pp-vis { height: auto; aspect-ratio: 5 / 4; max-height: calc((100svh - var(--navh)) * .46); } }
/* Teléfono: cada tarjeta se lee completa (con su botón) antes de que la siguiente la tape. */
@media (max-width: 800px) { .stack { gap: 0; } .stack-card { padding-bottom: 46vh; } .stack-card:last-child { padding-bottom: 0; } }
/* Apilado como PayPal (founder, 15-oct, video del iPhone): cada tarjeta se detiene un poco más abajo que la anterior, así
   de cada una queda visible una franja arriba y se ven apiladas, no una tapando del todo a la otra. El espacio entre
   tarjetas va como «gap» (no como relleno de la tarjeta): con relleno, al final se despegaban y quedaban separadas. */
.stack-card { top: calc(var(--navh) + 16px + var(--i) * 16px); }
@media (max-width: 800px) {
  .stack { gap: 30vh; }
  .stack-card { padding-bottom: 0; top: calc(var(--navh) + 10px + var(--i) * 12px); }
}
.xp-media picture { display: block; width: 100%; height: 100%; }
@media (max-width: 700px) { .xp-media img { object-position: 50% 40%; } }

/* «Pagar a comercios» con el mismo lenguaje del resto (founder, 15-oct): teléfono dentro de una tarjeta verde como los
   pasos, y los cuatro puntos como tarjetas, igual que la franja de datos. */
.cobro-p .cobro-tel { padding: clamp(28px, 4vw, 48px) 0; border-radius: 32px; background: linear-gradient(160deg, #e3f9ec 0%, #c6f0d7 100%); overflow: hidden; }
.cobro-p .checks { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.cobro-p .checks li { flex-direction: column; gap: 8px; background: #fff; border: 1px solid var(--border-subtle); border-radius: 18px; padding: 14px 16px; font-size: 15px; line-height: 1.35; }
.cobro-p .checks li svg { width: 32px; height: 32px; padding: 6px; border-radius: 10px; background: #e3f9ec; color: var(--qp-whatsapp-dark); margin: 0; }
@media (max-width: 900px) {
  .cobro-p .copy { align-items: center; text-align: center; }
  .cobro-p h2 { font-size: clamp(26px, 7vw, 32px); }
  .cobro-p .lead { font-size: 16px; margin: 0 auto; }
  .cobro-p .checks li { align-items: center; text-align: center; font-size: 14px; padding: 14px 10px; }
  .cobro-p .cobro-tel { --p: .62px; order: -1; }
  .cobro-p .split { gap: 22px; }
  .cobro-biz { justify-content: center; flex-wrap: wrap; font-size: 14.5px; }
}
/* Tarjeta translúcida sobre la foto, también en computadora: una fila, ícono a la izquierda y texto a la derecha, sin
   aire de más (founder, 15-oct). */
.pp-glass { flex-direction: row; align-items: center; gap: 12px; left: 16px; right: 16px; bottom: 16px; width: auto; transform: none; padding: 10px 16px 10px 10px; border-radius: 18px; text-align: left; }
.pp-glass .gi { flex: none; width: 40px; height: 40px; }
.pp-glass b { font-size: 17px; line-height: 1.2; }
.pp-glass span:not(.gi) { display: none; }