/* 26 · sección «De WhatsApp a lead perfilado»: título centrado y la ventana (chat + Ficha del prospecto)
 * apoyada en una placa de luz morada y azul con grano. */
.s3 { border-top: 0; }
.s3-cab { text-align: center; max-width: 720px; margin: 0 auto 56px; }
.s3-cab h2 { font-size: clamp(34px, 4.4vw, 60px); letter-spacing: -.04em; line-height: 1.02; }
.s3-cab .desc { margin-top: 18px; font-size: 17.5px; text-wrap: balance; }
.s3-placa { position: relative; padding: 64px 64px 0; border-radius: 22px; overflow: hidden; isolation: isolate; background: var(--k0f0e16); border: 1px solid var(--line); }
.s3-placa::before { content: ""; position: absolute; inset: -30%; z-index: -2; filter: blur(60px);
  background: radial-gradient(28% 38% at 26% 34%, var(--k8b3dff-5), transparent 70%), radial-gradient(30% 40% at 76% 30%, var(--k5a8dff-32), transparent 70%),
    radial-gradient(40% 40% at 55% 90%, var(--k6c5cff-28), transparent 70%), var(--k100e1c); opacity: 1; }
.s3-placa::after { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none; opacity: .14; mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 1.4 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); }
/* escena: teléfono de WhatsApp y Ficha del prospecto flotando sobre la luz, sin ventana alrededor */
.s3-placa { padding: 72px 64px 72px; }
.s3-esc { display: grid; grid-template-columns: 290px minmax(0, 470px); justify-content: center; align-items: center; gap: 56px; }
.s3-tel { width: 290px; aspect-ratio: 9 / 17.5; padding: 10px; border-radius: 54px; position: relative;
  background: linear-gradient(145deg, var(--k4a4b52), var(--k1b1c20) 30%, var(--k2c2d33) 70%, var(--k0f1013)); box-shadow: inset 0 0 0 1.5px var(--kffffff-14), 0 50px 100px -25px var(--k000000-85), 0 20px 40px -20px var(--k000000-6); }
.s3-tel::before, .s3-tel::after { content: ""; position: absolute; width: 3px; border-radius: 2px; background: var(--k2a2b30); }
.s3-tel::before { left: -3px; top: 120px; height: 56px; box-shadow: 0 70px 0 var(--k2a2b30); } .s3-tel::after { right: -3px; top: 150px; height: 84px; }
.s3-pant { position: relative; height: 100%; border-radius: 44px; overflow: hidden; display: flex; flex-direction: column; background: var(--k0b141a); }
.s3-isla { position: absolute; top: 11px; left: 50%; width: 98px; height: 29px; margin-left: -49px; border-radius: 20px; background: var(--k000000); z-index: 2; }
.s3-st { display: flex; justify-content: space-between; align-items: center; padding: 15px 28px 6px 34px; background: var(--k1f2c34); font-size: 14px; }
.s3-st b { font-weight: 600; }
.s3-st-i { display: flex; align-items: flex-end; gap: 2px; } .s3-st-i i { width: 3px; background: var(--ke9edef); border-radius: 1px; }
.s3-st-i i:nth-child(1) { height: 4px } .s3-st-i i:nth-child(2) { height: 6px } .s3-st-i i:nth-child(3) { height: 8px } .s3-st-i i:nth-child(4) { height: 10px }
.s3-st-i em { width: 22px; height: 11px; margin-left: 6px; border: 1.2px solid var(--ke9edef-55); border-radius: 3px; background: linear-gradient(90deg, var(--ke9edef) 75%, transparent 75%) content-box; padding: 1.5px; }
.s3-tel-h { display: flex; align-items: center; gap: 8px; padding: 6px 12px 10px 8px; background: var(--k1f2c34); }
.s3-q { flex: 1; } .s3-tel-h b { display: block; font-size: 15px; font-weight: 600; } .s3-tel-h small { display: block; font-size: 11.5px; color: var(--k8696a0); }
.s3-atras { width: 22px; height: 22px; fill: none; stroke: var(--ke9edef); stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.s3-hi { width: 21px; height: 21px; fill: none; stroke: var(--kaebac1); stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; margin-left: 10px; flex: none; }
.s3-av { width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center; font-weight: 700; font-size: 14px; background: var(--k6a7175); color: var(--ke9edef); }
.s3-tel .th-b { padding: 12px 10px; background-color: var(--k0b141a); background-image: radial-gradient(var(--kffffff-03) 1.1px, transparent 1.2px); background-size: 18px 18px; }
.s3-tel .tb { font-size: 13.5px; line-height: 1.38; border-radius: 8px; box-shadow: 0 1px .5px var(--k000000-3); }
.s3-tel .tb-in { border-top-left-radius: 0; } .s3-tel .tb-gu { border-top-right-radius: 0; }
.s3-tel .tb-sys { background: var(--k182229); color: var(--k8696a0); border-radius: 7px; font-size: 11.5px; }
.s3-tel-in { display: flex; align-items: center; gap: 4px; padding: 8px 10px 26px; background: var(--k0b141a); }
.s3-tel-in .s3-hi { margin: 0 4px; }
.s3-tel-in span { flex: 1; padding: 9px 14px; border-radius: 999px; background: var(--k1f2c34); color: var(--k8696a0); font-size: 14px; }
.s3-home { position: absolute; bottom: 8px; left: 50%; width: 120px; height: 4px; margin-left: -60px; border-radius: 3px; background: var(--kffffff-55); }
.s3-ficha { padding: 26px 28px; border-radius: 20px; background: var(--k0e0e14-78); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); border: 1px solid var(--kffffff-1); box-shadow: 0 40px 90px -30px var(--k000000-7); }
.s3-f-h { display: flex; align-items: center; gap: 12px; }
.s3-f-h b { display: block; font-size: 18px; font-weight: 700; } .s3-f-h small { display: block; color: var(--muted); font-size: 13px; margin-top: 2px; }
.s3-f-t { margin: 24px 0 8px; font-size: 13.5px; font-weight: 600; color: var(--muted); }
.s3-dl { margin: 0; }
.s3-dl .pf-f { display: flex; justify-content: space-between; align-items: baseline; gap: 16px; padding: 11px 0; background: none; border: 0; border-bottom: 1px solid var(--kffffff-07); border-radius: 0; box-shadow: none; }
.s3-dl .pf-f:last-child { border-bottom: 0; }
.s3-dl dt { color: var(--muted); font-size: 14.5px; } .s3-dl dd { margin: 0; text-align: right; }
.s3-dl b { font-size: 15px; font-weight: 600; color: var(--k4b4e57); margin: 0; white-space: nowrap; }
.s3-dl .pf-f.nuevo { border-color: var(--kffffff-07); box-shadow: none; } .s3-dl .pf-f.nuevo b { color: var(--kc9c4ff); }
.s3 .pf-prop { border-radius: 12px; background: var(--kffffff-04); border-color: var(--kffffff-08); }
@media (max-width: 900px) { .s3-placa { padding: 28px 14px; border-radius: 16px; } .s3-cab { margin-bottom: 36px; } .s3-esc { grid-template-columns: minmax(0, 1fr); gap: 28px; } .s3-tel { width: min(280px, 100%); margin: 0 auto; } .s3-ficha { padding: 22px 18px; } }

/* ================= versión «lectura → ficha» (sh): fase 1 el mensaje se enciende; fase 2 sus frases vuelan a la ficha ================= */
.sh { padding-bottom: 0; --lila: var(--kc9c4ff); }
.sh .s3-cab { margin-bottom: 0; }
/* 20 oct 2026: de 420vh/330vh a 260vh/220vh, y la página la recorre sola al entrar (sh.js, «scroll automático»):
   antes había que «darle varias veces» y se sentía trabada. */
.sh-alto { position: relative; height: 260vh; }
.sh-pin { position: sticky; top: 0; height: 100vh; height: 100svh; display: grid; place-items: center; overflow: hidden; }
@media (max-width: 700px) { .sh-alto { height: 220vh; } } /* en el celular la sección se recorre con menos scroll */
.sh-pin::before { content: ""; position: absolute; inset: 10% 15%; z-index: -1; filter: blur(70px); opacity: var(--luz, 0); will-change: opacity;
  background: radial-gradient(40% 50% at 40% 50%, var(--k8b3dff-22), transparent 70%), radial-gradient(35% 45% at 65% 45%, var(--k5a8dff-14), transparent 70%); }
.sh-q { grid-area: 1 / 1; margin: 0; padding: 0 16px; max-width: 20ch; text-align: center; font-family: var(--disp); font-weight: 800; letter-spacing: -.035em; line-height: 1.3; font-size: clamp(30px, 4.6vw, 64px); }
.sh-q .w { color: var(--k34363d); transition: color .25s; }
.sh-q .w.on { color: var(--ke9e9ee); }
.sh-q .dato.on { color: var(--lila); }
.sh-q .dato { position: relative; display: inline-block; white-space: nowrap; }
.sh-q .dato::after { content: attr(data-l); position: absolute; left: 0; top: 100%; margin-top: -4px; font-family: var(--sans); font-size: 14px; font-weight: 600; letter-spacing: 0; color: var(--lila); white-space: nowrap; opacity: 0; transition: opacity .3s; }
.sh-q .dato.on::after { opacity: var(--etq, .9); }
.sh-ficha { grid-area: 1 / 1; width: min(560px, calc(100vw - 32px)); opacity: 0; will-change: transform, opacity; } /* sin tarjeta: solo líneas horizontales, como la cuadrícula de los principios */
.sh-who { display: flex; align-items: center; gap: 12px; padding-bottom: 18px; border-bottom: 1px solid var(--line2); }
.sh-av { width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center; font-weight: 700; background: var(--brand); flex: none; }
.sh-who b { display: block; font-family: var(--disp); font-size: 22px; font-weight: 800; letter-spacing: -.02em; } .sh-who small { color: var(--muted); font-size: 13px; }
.sh-f { display: flex; justify-content: space-between; gap: 16px; padding: 14px 0; border-bottom: 1px solid var(--line); font-size: 16px; }
.sh-f span { color: var(--muted); }
.sh-f b { font-weight: 600; text-align: right; opacity: 0; }
.sh-f b.w { color: var(--muted); }
.sh-vuela { position: absolute; left: 0; top: 0; margin: 0; white-space: nowrap; transform-origin: 0 0; pointer-events: none; font-family: var(--disp); font-weight: 800; letter-spacing: -.035em; color: var(--lila); will-change: transform, opacity; opacity: 0; }
.sh-pie { position: absolute; left: 0; right: 0; bottom: 9vh; margin: 0; text-align: center; color: var(--muted); font-size: 15px; display: grid; }
.sh-pie span { grid-area: 1 / 1; transition: opacity .4s; } .sh-pie .b { color: var(--fg); font-weight: 600; opacity: 0; }
.sh.fin .sh-pie .a { opacity: 0; } .sh.fin .sh-pie .b { opacity: 1; }
@media (prefers-reduced-motion: reduce) { .sh-alto { height: auto; } .sh-pin { position: static; height: auto; padding: 48px 0 120px; } .sh-q { display: none; } .sh-ficha, .sh-f b { opacity: 1; } .sh-pie { position: static; margin-top: 24px; } .sh-vuela { display: none; } }