/* `/product/whats-next` (WHATS-NEXT-1, 22-10-2026): la sección de lo que viene, contada con pantallas animadas. La especificación es la maqueta v2 de Fable
   `docs/diseno/maquetas/whats-next/whats-next-2026-10-22.html`: tres bandas a todo lo ancho (una por feature, con su carrusel de escenas) y una grilla
   «Also on the road» con seis tarjetas. El CSS es el de la maqueta, con tres cambios de plomería: cada selector va bajo `.sf-prox` (las clases genéricas
   `.band`, `.scene`, `.stage`… no chocan con nada), los tokens locales son los `--sf-*` de la casa y los colores literales de la maqueta son tokens.
   SIN SCRIPTS: las escenas se cruzan con `@keyframes` y los puntos son radios; marcar un punto para el ciclo y fija su escena (`.car:has(input:checked)`).
   Con `prefers-reduced-motion` todo queda quieto en el cuadro final (la escena 1 de cada carrusel) y aparece una casilla «Play anyway» que lo enciende
   (`body:has(#play:checked)`). ANIMACIONES-PIE-1: la casilla es la misma elección que el interruptor «Animations» del pie (`sf.animaciones`), y con el interruptor
   apagado (`html[data-animaciones="off"]`) todo queda quieto aunque el sistema no pida reducir. Los contratos de la maqueta son `.n3`/`.n2` (escenas del carrusel) y `.d1`/`.d2`/`.d3` (los radios). */
.sf-prox .hero{padding:72px 0 40px}
.sf-prox .hero h1{font-size:44px;line-height:1.06;letter-spacing:-.9px;max-width:18ch;margin-top:12px}
.sf-prox .hero .lead{font-size:19px;color:var(--sf-mut);max-width:58ch;margin-top:16px}
.sf-prox .hero .rule{font-size:14px;color:var(--sf-mut);margin-top:12px}
.sf-prox .play{display:none;align-items:center;gap:8px;font-size:13.5px;color:var(--sf-mut);margin-top:14px}
.sf-prox .play input{width:16px;height:16px}
/* una banda por feature */
.sf-prox .band{padding:88px 0}
.sf-prox .band.soft{background:var(--sf-soft)}
.sf-prox .band .wrap{display:grid;grid-template-columns:5fr 7fr;gap:56px;align-items:center}
.sf-prox .band.flip .wrap>.copy{order:2}
.sf-prox .copy{display:grid;gap:14px;max-width:46ch}
.sf-prox .copy h2{font-size:32px;line-height:1.12;letter-spacing:-.6px}
.sf-prox .copy .lead{font-size:17px;color:var(--sf-mut)}
.sf-prox .copy ul{margin:4px 0 0;padding:0;list-style:none;display:grid;gap:8px}
.sf-prox .copy li{display:grid;grid-template-columns:14px 1fr;gap:10px;font-size:15px;color:var(--sf-ink)}
.sf-prox .copy li i{width:9px;height:9px;border-radius:999px;background:var(--sf-brand);margin-top:8px}
.sf-prox .copy .foot{display:flex;flex-wrap:wrap;gap:8px 18px;align-items:center;font-size:14px;color:var(--sf-mut);margin-top:6px}
.sf-prox .copy .foot a{color:var(--sf-brand-700);font-weight:600;text-decoration:none}
/* el carrusel: escenas apiladas, crossfade por CSS, puntos sincronizados; un punto marcado fija su escena */
.sf-prox .car{display:grid;gap:14px;min-width:0}
.sf-prox .stage{position:relative;aspect-ratio:16/10;background:var(--sf-paper);border:1px solid var(--sf-line);border-radius:22px;box-shadow:var(--sf-sombra-flota);overflow:hidden}
.sf-prox .band.soft .stage{background:var(--sf-paper)}
.sf-prox .band:not(.soft) .stage{background:var(--sf-soft)}
.sf-prox .scene{position:absolute;inset:0;display:grid;place-items:center;padding:28px;opacity:0}
.sf-prox .scene .cap{position:absolute;left:0;right:0;bottom:0;padding:12px 18px;font-size:13.5px;color:var(--sf-mut);text-align:center;background:linear-gradient(180deg,transparent,var(--sf-paper) 55%)}
.sf-prox .band:not(.soft) .scene .cap{background:linear-gradient(180deg,transparent,var(--sf-soft) 55%)}
.sf-prox .dots{display:flex;gap:10px;justify-content:center;align-items:center}
.sf-prox .dots label{width:8px;height:8px;border-radius:999px;background:var(--sf-line);cursor:pointer;position:relative;transition:transform .2s}
.sf-prox .dots label:hover{transform:scale(1.4)}
.sf-prox .dots input{position:absolute;opacity:0;width:0;height:0}
/* tres escenas: ciclo 15 s (5 s cada una, 0,6 s de cruce) */
.sf-prox .n3 .scene:nth-child(1){animation:sf-prox-s3a 15s infinite}
.sf-prox .n3 .scene:nth-child(2){animation:sf-prox-s3b 15s infinite}
.sf-prox .n3 .scene:nth-child(3){animation:sf-prox-s3c 15s infinite}
@keyframes sf-prox-s3a{0%{opacity:1}30%{opacity:1}34%{opacity:0}96%{opacity:0}100%{opacity:1}}
@keyframes sf-prox-s3b{0%{opacity:0}30%{opacity:0}34%{opacity:1}63%{opacity:1}67%{opacity:0}100%{opacity:0}}
@keyframes sf-prox-s3c{0%{opacity:0}63%{opacity:0}67%{opacity:1}96%{opacity:1}100%{opacity:0}}
.sf-prox .n3 .dots label:nth-child(1){animation:sf-prox-d3a 15s infinite}
.sf-prox .n3 .dots label:nth-child(2){animation:sf-prox-d3b 15s infinite}
.sf-prox .n3 .dots label:nth-child(3){animation:sf-prox-d3c 15s infinite}
@keyframes sf-prox-d3a{0%{background:var(--sf-brand)}33%{background:var(--sf-brand)}34%{background:var(--sf-line)}99%{background:var(--sf-line)}100%{background:var(--sf-brand)}}
@keyframes sf-prox-d3b{0%{background:var(--sf-line)}33%{background:var(--sf-line)}34%{background:var(--sf-brand)}66%{background:var(--sf-brand)}67%{background:var(--sf-line)}100%{background:var(--sf-line)}}
@keyframes sf-prox-d3c{0%{background:var(--sf-line)}66%{background:var(--sf-line)}67%{background:var(--sf-brand)}99%{background:var(--sf-brand)}100%{background:var(--sf-line)}}
/* dos escenas: ciclo 12 s */
.sf-prox .n2 .scene:nth-child(1){animation:sf-prox-s2a 12s infinite}
.sf-prox .n2 .scene:nth-child(2){animation:sf-prox-s2b 12s infinite}
@keyframes sf-prox-s2a{0%{opacity:1}46%{opacity:1}50%{opacity:0}96%{opacity:0}100%{opacity:1}}
@keyframes sf-prox-s2b{0%{opacity:0}46%{opacity:0}50%{opacity:1}96%{opacity:1}100%{opacity:0}}
.sf-prox .n2 .dots label:nth-child(1){animation:sf-prox-d2a 12s infinite}
.sf-prox .n2 .dots label:nth-child(2){animation:sf-prox-d2b 12s infinite}
@keyframes sf-prox-d2a{0%{background:var(--sf-brand)}49%{background:var(--sf-brand)}50%{background:var(--sf-line)}99%{background:var(--sf-line)}100%{background:var(--sf-brand)}}
@keyframes sf-prox-d2b{0%{background:var(--sf-line)}49%{background:var(--sf-line)}50%{background:var(--sf-brand)}99%{background:var(--sf-brand)}100%{background:var(--sf-line)}}
/* un punto marcado: se para el ciclo y se fija esa escena */
.sf-prox .car:has(input:checked) .scene,.sf-prox .car:has(input:checked) .dots label{animation:none}
.sf-prox .car:has(input:checked) .scene{opacity:0}
.sf-prox .car:has(input:checked) .dots label{background:var(--sf-line)}
.sf-prox .car:has(input:checked) .dots label:has(input:checked){background:var(--sf-brand)}
.sf-prox .car:has(.d1:checked) .scene:nth-child(1),.sf-prox .car:has(.d2:checked) .scene:nth-child(2),.sf-prox .car:has(.d3:checked) .scene:nth-child(3){opacity:1}
/* ===== dibujos ===== */
.sf-prox .scr{background:var(--sf-paper);border:1px solid var(--sf-line);border-radius:14px;box-shadow:var(--sf-sombra-2);overflow:hidden;width:100%;max-width:560px;font-size:13px}
.sf-prox .bar{display:flex;align-items:center;gap:10px;padding:10px 14px;border-bottom:1px solid var(--sf-line);font-size:12.5px;color:var(--sf-mut)}
.sf-prox .bar b{color:var(--sf-ink);font-size:13.5px}
.sf-prox .bar .sp{flex:1}
.sf-prox .btn{display:inline-block;border-radius:999px;padding:6px 13px;font-weight:700;font-size:12.5px;border:1.5px solid var(--sf-ink);color:var(--sf-ink);background:var(--sf-paper)}
.sf-prox .btn.p{background:var(--sf-ink);color:var(--sf-paper)}
.sf-prox .ok{display:inline-block;background:var(--sf-ok-50);color:var(--sf-ok);border-radius:999px;padding:3px 10px;font-size:12px;font-weight:700}
.sf-prox .sheet{background:var(--sf-paper);border:1px solid var(--sf-line);box-shadow:var(--sf-sombra-1);padding:12px 10px;font-size:10px;color:var(--sf-mut);line-height:1.55;position:relative}
.sf-prox .sheet b{display:block;color:var(--sf-ink);font-size:11px;margin-bottom:4px}
.sf-prox .spot{display:block;border:1px dashed var(--sf-acc);padding:4px 6px;color:var(--sf-acc-700);font-size:10px;font-weight:600;margin-top:8px}
.sf-prox .spot.alt{border-color:var(--sf-info);color:var(--sf-info)}
/* 1 · el constructor */
.sf-prox .b1 .body{display:grid;grid-template-columns:1fr 150px;gap:14px;padding:14px;height:300px}
.sf-prox .b1 .lane{position:relative}
.sf-prox .b1 .person{position:absolute;left:0;right:0;height:50px;border:1px solid var(--sf-line);border-radius:12px;background:var(--sf-paper);display:grid;grid-template-columns:30px 1fr auto;align-items:center;gap:10px;padding:0 12px;font-size:12.5px}
.sf-prox .b1 .person i{width:26px;height:26px;border-radius:999px;display:grid;place-items:center;color:var(--sf-paper);font-style:normal;font-weight:700;font-size:10px;background:var(--sf-brand)}
.sf-prox .b1 .person b{display:block;font-size:13px}
.sf-prox .b1 .person small{color:var(--sf-mut);font-size:11px}
.sf-prox .b1 .role{font-size:10px;letter-spacing:.06em;text-transform:uppercase;font-weight:700;color:var(--sf-brand-700);background:var(--sf-brand-50);border-radius:999px;padding:2px 8px}
.sf-prox .b1 .role.rev{color:var(--sf-info);background:var(--sf-info-50)}
.sf-prox .b1 .p1{top:0}
.sf-prox .b1 .p2{top:64px}
.sf-prox .b1 .p3{top:128px}
.sf-prox .b1 .p4{top:192px}
.sf-prox .b1 .link{position:absolute;left:24px;width:2px;background:var(--sf-line)}
.sf-prox .b1 .l1{top:50px;height:14px}
.sf-prox .b1 .l2{top:114px;height:14px}
.sf-prox .b1 .l3{top:178px;height:14px}
.sf-prox .b1 .quorum{position:absolute;left:0;top:250px;font-size:11.5px;font-weight:700;color:var(--sf-acc-700);background:var(--sf-paper);border:1px dashed var(--sf-acc);border-radius:999px;padding:4px 10px}
.sf-prox .b1 .hint{position:absolute;right:0;top:250px;font-size:11px;color:var(--sf-mut)}
/* escena 1: la gente entra deslizándose */
.sf-prox .b1 .sc1 .p1{animation:sf-prox-in 5s infinite .3s}
.sf-prox .b1 .sc1 .p2{animation:sf-prox-in 5s infinite 1.1s}
.sf-prox .b1 .sc1 .p3{animation:sf-prox-in 5s infinite 1.9s}
.sf-prox .b1 .sc1 .l1{animation:sf-prox-on 5s infinite 1.5s}
.sf-prox .b1 .sc1 .l2{animation:sf-prox-on 5s infinite 2.3s}
@keyframes sf-prox-in{0%{opacity:0;transform:translateX(-28px)}12%{opacity:1;transform:none}100%{opacity:1;transform:none}}
@keyframes sf-prox-on{0%{opacity:0}10%{opacity:1}100%{opacity:1}}
/* escena 2: la regla: el revisor entra en el paso 2 y aparece el quórum */
.sf-prox .b1 .sc2 .p3{animation:sf-prox-in 5s infinite .6s}
.sf-prox .b1 .sc2 .l2{animation:sf-prox-on 5s infinite 1.2s}
.sf-prox .b1 .sc2 .quorum{animation:sf-prox-pop 5s infinite 2.2s}
@keyframes sf-prox-pop{0%{opacity:0;transform:scale(.8)}12%{opacity:1;transform:scale(1.06)}18%{transform:scale(1)}100%{opacity:1;transform:scale(1)}}
/* escena 3: los lugares siguen y Send se enciende */
.sf-prox .b1 .sc3 .s1{animation:sf-prox-up 5s infinite .5s}
.sf-prox .b1 .sc3 .s2{animation:sf-prox-up 5s infinite 1.3s}
.sf-prox .b1 .sc3 .send{animation:sf-prox-pop 5s infinite 2.4s}
@keyframes sf-prox-up{0%{opacity:0;transform:translateY(8px)}12%{opacity:1;transform:none}100%{opacity:1;transform:none}}
.sf-prox .b1 .sc3 .send{position:absolute;right:14px;bottom:14px}
/* WHATS-NEXT-3 (22-10-2026): la banda cuenta lo que falta (condiciones, ramas, plantillas de flujo) con las mismas tarjetas y la misma cinta; sólo estas reglas, con tokens y los @keyframes de arriba.
   Un lugar que existe por una condición (borde punteado), dos caminos lado a lado (el que corrió, en el color de la casa; el otro, gris) y los documentos que entran en la cinta. */
.sf-prox .b1 .person.new{border-style:dashed;border-color:var(--sf-acc)}
.sf-prox .b1 .person.new i{background:var(--sf-acc-700)}
.sf-prox .b1 .person.half.a{right:calc(50% + 6px)}
.sf-prox .b1 .person.half.b{left:calc(50% + 6px)}
.sf-prox .b1 .person.half{grid-template-columns:26px minmax(0,1fr)}
.sf-prox .b1 .person.half small{display:block}
.sf-prox .b1 .person.new b{white-space:normal;line-height:1.25}
@media (max-width:900px){
  /* con la columna del teléfono cada camino tiene unos 100 px: sin el círculo, el nombre y su línea entran */
  .sf-prox .b1 .person.half{grid-template-columns:minmax(0,1fr);padding:0 8px}
  .sf-prox .b1 .person.half i{display:none}
  /* cuatro tarjetas y la etiqueta de la condición no entraban en los 270 px del teléfono: el cuerpo de la pantalla del constructor mide lo que dibuja */
  .sf-prox .b1 .scene .body{height:326px}
  /* la condición cuelga de su tarjeta (debajo, a la izquierda del círculo), no al pie del lienzo */
  .sf-prox .b1 .scene.sc1 .quorum{top:100px;left:44px;right:auto}
}
.sf-prox .b1 .person.off{background:var(--sf-soft);color:var(--sf-mut)}
.sf-prox .b1 .person.off i{background:var(--sf-mut)}
.sf-prox .b1 .link.on{background:var(--sf-brand)}
.sf-prox .b1 .link.r{left:calc(75% + 6px)}
.sf-prox .b1 .link.on{left:calc(25% - 6px)}
.sf-prox .b1 .sc1 .p4{animation:sf-prox-in 5s infinite 2.7s}
.sf-prox .b1 .sc1 .l3{animation:sf-prox-on 5s infinite 3.1s}
.sf-prox .b1 .sc1 .quorum{animation:sf-prox-pop 5s infinite 1.7s;top:78px;left:auto;right:10px;font-size:10.5px;padding:3px 8px}
.sf-prox .b1 .sc3 .p2{animation:sf-prox-in 5s infinite 1.1s}
.sf-prox .b1 .sc3 .p3{animation:sf-prox-in 5s infinite 1.9s}
.sf-prox .b1 .sc3 .p4{animation:sf-prox-in 5s infinite 2.7s}
.sf-prox .b1 .sc3 .l1{animation:sf-prox-on 5s infinite .8s}
.sf-prox .b1 .sc3 .l2{animation:sf-prox-on 5s infinite 1.6s}
.sf-prox .b1 .sc3 .l3{animation:sf-prox-on 5s infinite 2.4s}
/* 2 · la billetera */
.sf-prox .phone{width:280px;height:400px;border:2px solid var(--sf-ink);border-radius:34px;background:var(--sf-paper);position:relative;overflow:hidden;padding:24px 18px;box-shadow:var(--sf-sombra-flota);font-size:14px}
.sf-prox .phone .tit{font-weight:700;font-size:17px}
.sf-prox .phone .sub2{font-size:13px;color:var(--sf-mut);margin-bottom:16px}
.sf-prox .phone .ask{border:1px dashed var(--sf-mut);border-radius:14px;padding:12px;font-size:13px;color:var(--sf-mut)}
.sf-prox .phone .wallet{position:absolute;left:14px;right:14px;bottom:-230px;height:230px;border-radius:18px 18px 0 0;background:var(--sf-brand);color:var(--sf-paper);padding:16px;font-size:13px;box-shadow:var(--sf-sombra-flota)}
.sf-prox .phone .wallet b{display:block;font-size:14px;margin-bottom:10px}
.sf-prox .phone .wallet .row{display:flex;justify-content:space-between;border-top:1px solid var(--sf-blanco-34);padding:8px 0}
.sf-prox .phone .wallet .share{margin-top:12px;background:var(--sf-paper);color:var(--sf-brand-700);border-radius:999px;padding:9px;text-align:center;font-weight:700}
.sf-prox .phone .btn{font-size:13.5px;padding:8px 16px}
.sf-prox .b2 .sc2 .wallet{animation:sf-prox-slide 5s infinite}
@keyframes sf-prox-slide{0%{bottom:-230px}20%{bottom:0}100%{bottom:0}}
.sf-prox .b2 .sc3 .done{animation:sf-prox-up 5s infinite .4s}
.sf-prox .b2 .done p{font-size:11.5px;color:var(--sf-mut);margin-top:8px}
.sf-prox .b2 .done .btn{margin-top:12px}
.sf-prox .b2 .two{display:grid;grid-template-columns:auto 1fr;gap:22px;align-items:center;max-width:560px}
.sf-prox .b2 .ev{background:var(--sf-paper);border:1px solid var(--sf-line);border-radius:12px;padding:12px 14px;font-size:12px;min-width:0}
.sf-prox .b2 .ev b{display:block;font-size:12.5px;margin-bottom:6px}
.sf-prox .b2 .ev .row{display:grid;grid-template-columns:52px 1fr;gap:8px;padding:5px 0;border-top:1px solid var(--sf-line);color:var(--sf-mut)}
.sf-prox .b2 .ev .row span:first-child{font-variant-numeric:tabular-nums}
.sf-prox .b2 .ev .row.new{color:var(--sf-ink);font-weight:600;animation:sf-prox-up 5s infinite 1.2s}
/* 3 · la firma presencial */
.sf-prox .tablet{width:min(100%,400px);aspect-ratio:3/2;border:2px solid var(--sf-ink);border-radius:20px;background:var(--sf-paper);position:relative;overflow:hidden;box-shadow:var(--sf-sombra-flota)}
.sf-prox .tablet .side{position:absolute;inset:0;padding:18px 22px}
.sf-prox .tablet .tit{font-weight:700;font-size:16px}
.sf-prox .tablet .sub3{font-size:12.5px;color:var(--sf-mut)}
.sf-prox .tablet .hand{margin-top:22px;border:1px solid var(--sf-line);border-radius:12px;padding:16px;font-size:13px;text-align:center}
.sf-prox .tablet .hand b{display:block;font-size:14px;margin-bottom:4px}
.sf-prox .tablet .canvas{margin-top:14px;height:42%;border:1px dashed var(--sf-mut);border-radius:10px;position:relative}
.sf-prox .tablet .stroke{position:absolute;inset:6%;width:88%;height:88%;overflow:visible}
.sf-prox .tablet .stroke path{fill:none;stroke:var(--sf-ink);stroke-width:2.6;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:1;stroke-dashoffset:1}
.sf-prox .tablet .customer{transform:rotate(180deg)}
.sf-prox .b3 .sc1 .tablet{animation:sf-prox-flip 5s infinite}
.sf-prox .b3 .sc1 .sender{animation:sf-prox-fade-out 5s infinite}
.sf-prox .b3 .sc1 .customer{animation:sf-prox-fade-in 5s infinite}
@keyframes sf-prox-flip{0%{transform:rotate(0)}22%{transform:rotate(0)}48%{transform:rotate(180deg)}100%{transform:rotate(180deg)}}
@keyframes sf-prox-fade-out{0%{opacity:1}24%{opacity:1}34%{opacity:0}100%{opacity:0}}
@keyframes sf-prox-fade-in{0%{opacity:0}40%{opacity:0}50%{opacity:1}100%{opacity:1}}
.sf-prox .b3 .sc2 .tablet{transform:rotate(180deg)}
.sf-prox .b3 .sc2 .sender{opacity:0}
.sf-prox .b3 .sc2 .stroke .p1{animation:sf-prox-draw-1 5s cubic-bezier(.4,0,.6,1) infinite .6s}
.sf-prox .b3 .sc2 .stroke .p2{animation:sf-prox-draw-2 5s cubic-bezier(.4,0,.6,1) infinite .6s}
.sf-prox .b3 .sc2 .stroke .p3{animation:sf-prox-draw-3 5s cubic-bezier(.4,0,.6,1) infinite .6s}
/* tres trazos de una firma, uno tras otro, cada uno en proporción a su largo (291, 300 y 261 en el viewBox), con 60 ms entre ellos; los tres terminan al 40 % del ciclo */
@keyframes sf-prox-draw-1{0%{stroke-dashoffset:1}12.85%{stroke-dashoffset:0}100%{stroke-dashoffset:0}}
@keyframes sf-prox-draw-2{0%,14.05%{stroke-dashoffset:1}27.27%{stroke-dashoffset:0}100%{stroke-dashoffset:0}}
@keyframes sf-prox-draw-3{0%,28.47%{stroke-dashoffset:1}40%{stroke-dashoffset:0}100%{stroke-dashoffset:0}}
.sf-prox .b3 .sc2 .signed{position:absolute;right:16px;bottom:14px;animation:sf-prox-up 5s infinite 2.6s}
/* reducir movimiento: todo quieto en su cuadro final, salvo «Play anyway» */
@media (prefers-reduced-motion:reduce){
.sf-prox .play{display:flex}
body:not(:has(#play:checked)) :is(.scene,.dots label,.b1 .person,.b1 .link,.b1 .quorum,.b1 .spot,.b1 .send,.phone .wallet,.b2 .done,.b2 .ev .row,.b3 .tablet,.b3 .sender,.b3 .customer,.b3 .stroke path,.b3 .signed){animation:none}
body:not(:has(#play:checked)) .car:not(:has(input:checked)) .scene:nth-child(1){opacity:1}
body:not(:has(#play:checked)) .car:not(:has(input:checked)) .dots label:nth-child(1){background:var(--sf-brand)}
body:not(:has(#play:checked)) :is(.b1 .person,.b1 .link,.b1 .quorum,.b1 .spot,.b1 .send,.b2 .done,.b2 .ev .row){opacity:1;transform:none}
body:not(:has(#play:checked)) .b2 .sc2 .wallet{bottom:0}
body:not(:has(#play:checked)) .b3 .sc1 .tablet{transform:rotate(180deg)}
body:not(:has(#play:checked)) .b3 .sc1 .sender{opacity:0}
body:not(:has(#play:checked)) .b3 .sc1 .customer{opacity:1}
body:not(:has(#play:checked)) .b3 .stroke path{stroke-dashoffset:0}
}
/* apagado con el interruptor «Animations» del pie (ANIMACIONES-PIE-1): lo mismo, pida lo que pida el sistema. La casilla de arriba sólo refleja el interruptor y lo escribe (`animaciones.js`). */
html[data-animaciones="off"] body :is(.scene,.dots label,.b1 .person,.b1 .link,.b1 .quorum,.b1 .spot,.b1 .send,.phone .wallet,.b2 .done,.b2 .ev .row,.b3 .tablet,.b3 .sender,.b3 .customer,.b3 .stroke path,.b3 .signed){animation:none}
html[data-animaciones="off"] body .car:not(:has(input:checked)) .scene:nth-child(1){opacity:1}
html[data-animaciones="off"] body .car:not(:has(input:checked)) .dots label:nth-child(1){background:var(--sf-brand)}
html[data-animaciones="off"] body :is(.b1 .person,.b1 .link,.b1 .quorum,.b1 .spot,.b1 .send,.b2 .done,.b2 .ev .row){opacity:1;transform:none}
html[data-animaciones="off"] body .b2 .sc2 .wallet{bottom:0}
html[data-animaciones="off"] body .b3 .sc1 .tablet{transform:rotate(180deg)}
html[data-animaciones="off"] body .b3 .sc1 .sender{opacity:0}
html[data-animaciones="off"] body .b3 .sc1 .customer{opacity:1}
html[data-animaciones="off"] body .b3 .stroke path{stroke-dashoffset:0}
/* ===== la grilla de abajo: tres por fila, una escena quieta por tarjeta ===== */
.sf-prox .grid-band{padding:72px 0 96px}
.sf-prox .grid-band .wrap{display:block}
.sf-prox .grid-band .head{display:grid;gap:8px;max-width:60ch;margin-bottom:28px}
.sf-prox .grid-band .head h2{font-size:28px;letter-spacing:-.5px}
.sf-prox .grid-band .head p{font-size:16px;color:var(--sf-mut)}
.sf-prox .mini{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:24px}
.sf-prox .m{background:var(--sf-paper);border:1px solid var(--sf-line);border-radius:18px;overflow:hidden;display:grid;grid-template-rows:auto 1fr auto;min-width:0}
.sf-prox .m .pic{background:var(--sf-soft);padding:18px;display:grid;place-items:center;min-height:190px}
.sf-prox .m .scr{max-width:260px;font-size:11.5px;box-shadow:var(--sf-sombra-1)}
.sf-prox .m .bar{padding:7px 10px;font-size:11px}
.sf-prox .m .bar b{font-size:11.5px}
.sf-prox .m .bd{padding:10px 12px;display:grid;gap:6px}
.sf-prox .m .row{display:flex;justify-content:space-between;gap:8px;align-items:center;font-size:11px;padding:5px 0;border-bottom:1px solid var(--sf-line)}
.sf-prox .m .row:last-child{border-bottom:0}
.sf-prox .m .tx{padding:16px 18px 6px;display:grid;gap:6px}
.sf-prox .m .tx h3{font-size:17px;letter-spacing:-.2px}
.sf-prox .m .tx p{font-size:13.5px;color:var(--sf-mut)}
.sf-prox .m .ft{padding:8px 18px 16px;display:flex;justify-content:space-between;gap:8px;font-size:12.5px;color:var(--sf-mut)}
.sf-prox .m .ft a{color:var(--sf-brand-700);font-weight:600;text-decoration:none}
.sf-prox .m .tag{display:inline-block;justify-self:start;font-size:10px;letter-spacing:.06em;text-transform:uppercase;font-weight:700;color:var(--sf-brand-700);background:var(--sf-brand-50);border-radius:999px;padding:2px 8px}
.sf-prox .m .ghost{border:1px dashed var(--sf-acc);color:var(--sf-acc-700);border-radius:8px;padding:6px 8px;font-size:11px;text-align:center}
.sf-prox .m .folder{width:120px;height:84px;border:1.5px solid var(--sf-ink);border-radius:8px;position:relative;background:var(--sf-paper)}
.sf-prox .m .folder:before{content:"";position:absolute;left:-1.5px;top:-10px;width:44px;height:10px;border:1.5px solid var(--sf-ink);border-bottom:0;border-radius:6px 6px 0 0;background:var(--sf-paper)}
.sf-prox .m .folder .pdf{position:absolute;left:14px;top:14px;width:40px;height:52px;background:var(--sf-paper);border:1px solid var(--sf-line);box-shadow:var(--sf-sombra-1);font-size:9px;color:var(--sf-mut);padding:5px}
.sf-prox .m .folder .pdf.out{left:62px;top:18px;border-color:var(--sf-ok)}
.sf-prox .m .card-id{width:150px;height:94px;border-radius:10px;background:linear-gradient(135deg,var(--sf-brand),var(--sf-brand-700));color:var(--sf-paper);padding:10px;font-size:10px;position:relative}
.sf-prox .m .card-id b{display:block;font-size:11px;margin-bottom:14px}
.sf-prox .m .card-id .chip{position:absolute;left:10px;top:30px;width:26px;height:20px;border-radius:4px;background:var(--sf-dot)}
.sf-prox .m .reader{width:46px;height:70px;border:1.5px solid var(--sf-ink);border-radius:6px;position:relative;margin-left:-6px}
.sf-prox .m .reader:after{content:"";position:absolute;left:10px;right:10px;top:12px;height:3px;background:var(--sf-ink);border-radius:2px}
@media (max-width:900px){
.sf-prox .mini{grid-template-columns:1fr}
}
@media (max-width:900px){
.sf-prox .band{padding:56px 0}
.sf-prox .band .wrap{grid-template-columns:1fr;gap:28px}
.sf-prox .band.flip .wrap>.copy{order:0}
.sf-prox .hero h1{font-size:32px}
.sf-prox .copy h2{font-size:26px}
.sf-prox .scene{padding:16px}
.sf-prox .b1 .body{grid-template-columns:1fr 110px;height:270px}
.sf-prox .b2 .two{grid-template-columns:1fr}
}
.sf-portal-main:has(> .sf-prox){padding-top:0;padding-bottom:0}
.sf-prox,.sf-prox *{box-sizing:border-box}
.sf-prox{display:block;font-size:16px;line-height:1.55;color:var(--sf-ink)}
.sf-prox h1,.sf-prox h2,.sf-prox h3,.sf-prox p{margin:0}
.sf-prox .kicker{font-size:var(--sf-fs-11);letter-spacing:.09em;text-transform:uppercase;font-weight:700;color:var(--sf-acc)}
.sf-prox .wrap{margin:0 auto}
/* Las bandas salen a todo el ancho de la ventana sin ensanchar la página (la misma técnica que `/product`: sombra y recorte). */
.sf-prox .hero,.sf-prox .band,.sf-prox .grid-band{background:var(--sf-paper);box-shadow:0 0 0 100vmax var(--sf-paper);clip-path:inset(0 -100vmax)}
.sf-prox .band.soft{background:var(--sf-soft);box-shadow:0 0 0 100vmax var(--sf-soft)}
.sf-prox .dots label:has(input:focus-visible){outline:2px solid var(--brand,var(--sf-brand));outline-offset:3px}
/* Lo que la maqueta escribía en `style=""`: clases. */
.sf-prox .b1 .body.rel{position:relative}
.sf-prox .mt14{margin-top:14px}
.sf-prox .mt8{margin:8px 0 0}
.sf-prox .btn.sm{font-size:10px;padding:3px 8px}
.sf-prox .btn.p.sm{padding:4px 9px}
.sf-prox .ghost.sm{padding:3px 8px}
.sf-prox .ghost.fl{flex:1}
.sf-prox .mut{color:var(--sf-mut)}
.sf-prox .okt{color:var(--sf-ok);font-weight:600}
.sf-prox .emb{border:1px solid var(--sf-line);border-radius:8px;padding:8px;font-size:11px}
.sf-prox .embt{font-weight:700;margin-bottom:4px}
.sf-prox .fl-row{display:flex;gap:18px;align-items:center}
.sf-prox .fl-note{font-size:11px;color:var(--sf-mut);max-width:90px}
.sf-prox .card-row{display:flex;align-items:center;gap:6px}
.sf-prox .card-name{position:absolute;left:10px;bottom:10px}
/* Cambio de plomería respecto de la maqueta: la columna del sitio es de 1000 px (la de la maqueta, 1120) y a 390 el escenario de 16:10 quedaba bajo el
   teléfono; el escenario tiene un alto fijo que lo deja entero (con spect-ratio y min-height el navegador le exigía un ancho mínimo de 704 px) y, en el teléfono, un alto fijo con el aparato más chico. */
.sf-prox .stage{aspect-ratio:auto;height:540px}
/* CI-1: la tableta de #in-person GIRA 180 grados y a medio giro su caja rotada mide (ancho + alto) × 0,71: con 520 px (y el escenario de 500) pasaba el escenario
   y el borde le cortaba las esquinas; a 400 px (280 a ≤900 px) la caja rotada entra en el escenario en cada instante del giro. */
/* El pie de la escena (44 px) no tapa el aparato: la escena deja ese espacio abajo y centra el contenido en lo que queda. */
.sf-prox .scene{padding-bottom:72px}
.sf-prox .b1 .person span{min-width:0}
.sf-prox .b1 .person b,.sf-prox .b1 .person small{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
@media (max-width:900px){
  .sf-prox .stage{aspect-ratio:auto;height:560px}
  .sf-prox .tablet{width:min(100%,280px)}
  /* Con una fuente de respaldo ancha el registro de evidencia pasa a más renglones: el teléfono de la escena 3 (apilado sobre el registro) baja a 300 px para que el conjunto entre. */
  .sf-prox .b2 .two .phone{height:300px}
  .sf-prox .scene{padding-bottom:64px}
  .sf-prox .b1 .body{grid-template-columns:minmax(0,1fr) 72px;gap:10px}
  .sf-prox .b1 .person{grid-template-columns:26px minmax(0,1fr) auto;gap:8px;padding:0 10px}
  .sf-prox .b1 .person i{width:24px;height:24px}
  .sf-prox .b1 .role{padding:2px 7px}
  .sf-prox .phone{width:240px;height:340px;padding:20px 16px}
  .sf-prox .phone .tit{font-size:16px}
  .sf-prox .b2 .two{gap:12px}
}
.sf-prox .m .tag{align-self:start}
/* La escena 3 de la billetera (teléfono y registro de evidencia, lado a lado) no entraba en la columna del sitio: el teléfono achica y el registro toma el resto. */
@media (min-width:901px){
  /* La banda del medio va al revés: la escena (7) a la izquierda y el texto (5) a la derecha; la maqueta dejaba a la escena con los 5. */
  .sf-prox .band.flip .wrap{grid-template-columns:7fr 5fr}
  .sf-prox .b2 .scene{grid-template-columns:minmax(0,1fr)}
  .sf-prox .b2 .two{width:100%;grid-template-columns:auto minmax(0,1fr);gap:16px}
  .sf-prox .b2 .two .phone{width:230px;height:350px}
}

/* WHATS-NEXT-2 (22-10-2026): seis tarjetas más con la misma huella: escena quieta (sin animación), tag, título, una línea, pie. */
.sf-prox .m .twin{display:flex;align-items:flex-start;gap:14px;position:relative}
.sf-prox .m .twin .sheet{width:104px;min-height:96px}
.sf-prox .m .blk{height:52px;margin-top:4px;background:var(--sf-soft);border:1px solid var(--sf-line)}
.sf-prox .m .clip{position:absolute;left:50%;top:-6px;width:10px;height:26px;margin-left:-5px;border:2px solid var(--sf-ink);border-radius:6px}
.sf-prox .m .chk{display:inline-block;width:11px;height:11px;border:1.5px solid var(--sf-ink);border-radius:3px;vertical-align:-1px;margin-right:4px}
.sf-prox .m .chk.on{background:var(--sf-ink)}
.sf-prox .m .dev{display:flex;align-items:center;gap:12px}
.sf-prox .m .dev .scr{width:150px}
.sf-prox .m .code{font-size:20px;font-weight:700;letter-spacing:.12em;text-align:center;padding:10px 0}
.sf-prox .m .mphone{width:58px;height:100px;border:2px solid var(--sf-ink);border-radius:14px;background:var(--sf-paper);display:grid;place-items:center;text-align:center;padding:4px}