/* ===== Tutorial · parte 2: Firma · Factura · Cierre ===== */

const TOTAL = 55680, ANTICIPO = 27840, ANT_SUB = 24000, ANT_IVA = 3840;

/* ---------- PASO 3 · ENVÍO Y FIRMA (94 – 126) ---------- */
function PasoFirma({ T, CUES }) {
  const s = CUES.Firma;
  const o = MO.enter(s, 0.45)(T);

  const chat = MO.enter(s + 2.2, 0.6)(T);
  const doc = MO.pop(s + 3.4, 0.5)(T);
  const leido = T > s + 6.2;
  const vistaCliente = MO.draw(s + 7.6, s + 8.8)(T);   // 0 contratista → 1 cliente
  const firma = MO.draw(s + 14.4, s + 16.8)(T);
  const sello = MO.pop(s + 17.6, 0.6)(T);
  const regreso = MO.draw(s + 21.6, s + 22.8)(T);      // vuelve al contratista
  const notif = MO.pop(s + 23.4, 0.55)(T);
  const estado = MO.enter(s + 26.4, 0.6)(T);

  const capaCliente = vistaCliente * (1 - regreso);

  return (
    <div style={{ position: 'absolute', inset: 0, opacity: o, overflow: 'hidden' }}>
      <Fondo />
      <BarraEstado /><Pasos activo={3} />

      {/* ── Capa A: WhatsApp del contratista ── */}
      <Lienzo>
        <div style={{ position: 'absolute', inset: 0, transform: `translateX(${-capaCliente * 1080}px)` }}>
          <div style={{ height: 108, background: '#075E54', display: 'flex', alignItems: 'center', gap: 20, padding: '0 44px' }}>
            <div style={{ fontSize: 38, color: '#fff', fontWeight: 300 }}>‹</div>
            <div style={{ width: 66, height: 66, borderRadius: '50%', background: `linear-gradient(135deg, ${TC.blue}, ${TC.orange})`, color: '#fff', display: 'grid', placeItems: 'center', fontFamily: TF.d, fontWeight: 800, fontSize: 26 }}>RM</div>
            <div>
              <div style={{ fontFamily: TF.b, fontWeight: 700, fontSize: 32, color: '#fff' }}>Rocío Mendoza</div>
              <div style={{ fontFamily: TF.m, fontSize: 20, color: 'rgba(255,255,255,0.6)', marginTop: 3 }}>en línea</div>
            </div>
          </div>
          <div style={{ position: 'absolute', top: 108, left: 0, right: 0, bottom: 0, background: '#ECE5DD', padding: '36px 44px' }}>
            <div style={{ marginLeft: 'auto', width: 'fit-content', maxWidth: 820, background: '#DCF8C6', borderRadius: '26px 26px 8px 26px', padding: '24px 28px', fontFamily: TF.b, fontSize: 32, color: TC.ink, opacity: chat }}>
              Buen día Rocío, le mando la cotización del baño 👋
            </div>
            <div style={{ marginLeft: 'auto', marginTop: 18, width: 'fit-content', maxWidth: 860, background: '#DCF8C6', borderRadius: '26px 26px 8px 26px', padding: 22, opacity: doc, transform: `scale(${0.95 + doc * 0.05})` }}>
              <div style={{ background: '#fff', borderRadius: 18, padding: '26px 28px', display: 'flex', alignItems: 'center', gap: 22, minWidth: 660 }}>
                <div style={{ width: 84, height: 84, borderRadius: 18, background: TC.red, color: '#fff', display: 'grid', placeItems: 'center', fontFamily: TF.d, fontWeight: 800, fontSize: 25 }}>PDF</div>
                <div>
                  <div style={{ fontFamily: TF.b, fontWeight: 700, fontSize: 31, color: TC.ink }}>Cotización COT-0001</div>
                  <div style={{ fontFamily: TF.m, fontSize: 23, color: TC.ink3, marginTop: 7 }}>Remodelación de baño · {mx(TOTAL)}</div>
                </div>
              </div>
              <div style={{ marginTop: 14, background: '#fff', borderRadius: 14, padding: '18px 24px', fontFamily: TF.b, fontWeight: 700, fontSize: 29, color: TC.blue, textAlign: 'center' }}>Abrir para revisar y firmar →</div>
              <div style={{ textAlign: 'right', fontFamily: TF.m, fontSize: 21, color: leido ? '#34B7F1' : TC.ink3, marginTop: 12 }}>14:08 {leido ? '✓✓ leído' : '✓✓'}</div>
            </div>
          </div>
        </div>

        {/* ── Capa B: lo que ve Rocío ── */}
        <div style={{ position: 'absolute', inset: 0, transform: `translateX(${(1 - capaCliente) * 1080}px)`, background: TC.cream }}>
          <div style={{ height: 108, background: TC.blueDeep, display: 'flex', alignItems: 'center', justifyContent: 'center', gap: 16 }}>
            <span style={{ fontFamily: TF.m, fontSize: 23, letterSpacing: '0.12em', color: 'rgba(255,255,255,0.72)' }}>LO QUE VE TU CLIENTE</span>
          </div>
          <div style={{ padding: '38px 52px 0' }}>
            <div style={{ fontFamily: TF.m, fontSize: 22, letterSpacing: '0.1em', color: TC.ink3 }}>COT-0001 · 18 SEP 2026</div>
            <div style={{ fontFamily: TF.d, fontWeight: 800, fontSize: 62, letterSpacing: '-0.03em', color: TC.ink, marginTop: 10, lineHeight: 1.02 }}>Remodelación<br />de baño</div>
            <div style={{ marginTop: 28 }}>
              <Tarjeta estilo={{ padding: '26px 30px' }}>
                {PARTIDAS.slice(0, 4).map((p) => (
                  <div key={p[0]} style={{ display: 'flex', justifyContent: 'space-between', gap: 20, padding: '11px 0', fontFamily: TF.b, fontSize: 28, color: TC.ink2 }}>
                    <span style={{ minWidth: 0, overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap' }}>{p[0]}</span>
                    <span style={{ fontFamily: TF.m, whiteSpace: 'nowrap' }}>{mx(p[2])}</span>
                  </div>
                ))}
                <div style={{ fontFamily: TF.m, fontSize: 24, color: TC.ink3, padding: '11px 0' }}>+ 2 partidas más</div>
                <div style={{ height: 2, background: TC.line, margin: '12px 0' }} />
                <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center' }}>
                  <span style={{ fontFamily: TF.b, fontWeight: 700, fontSize: 32 }}>Total con IVA</span>
                  <span style={{ fontFamily: TF.d, fontWeight: 800, fontSize: 52, letterSpacing: '-0.03em' }}>{mx(TOTAL)}</span>
                </div>
              </Tarjeta>
            </div>
            {/* Firma */}
            <div style={{ marginTop: 26 }}>
              <div style={{ fontFamily: TF.m, fontSize: 22, letterSpacing: '0.09em', color: TC.ink3, marginBottom: 12 }}>FIRMA AQUÍ</div>
              <div style={{ background: '#fff', border: `3px solid ${firma > 0 ? TC.green : TC.line}`, borderRadius: 24, height: 240, position: 'relative', overflow: 'hidden' }}>
                <svg viewBox="0 0 900 240" style={{ position: 'absolute', inset: 0, width: '100%', height: '100%' }}>
                  <path d="M90 170 C 150 60, 200 60, 230 150 C 255 220, 300 200, 330 120 C 355 55, 400 70, 410 160 C 470 110, 520 105, 560 140 C 600 175, 650 150, 690 95 C 720 55, 780 70, 810 130"
                    fill="none" stroke={TC.ink} strokeWidth="9" strokeLinecap="round" strokeLinejoin="round"
                    pathLength="1" strokeDasharray="1" strokeDashoffset={1 - firma} />
                </svg>
              </div>
            </div>
            <div style={{ marginTop: 24, opacity: firma > 0.9 ? 1 : 0.35 }}><Boton tono="verde">Aceptar y firmar</Boton></div>
            {sello > 0 ? (
              <div style={{ marginTop: 22, opacity: sello, transform: `scale(${0.94 + sello * 0.06})`, background: TC.greenSoft, border: `2px solid ${TC.green}`, borderRadius: 24, padding: '24px 28px', display: 'flex', alignItems: 'center', gap: 20 }}>
                <span style={{ width: 62, height: 62, borderRadius: '50%', background: TC.green, color: '#fff', display: 'grid', placeItems: 'center', fontSize: 34, fontWeight: 800, flexShrink: 0 }}>✓</span>
                <div>
                  <div style={{ fontFamily: TF.b, fontWeight: 700, fontSize: 31, color: TC.ink }}>Aceptada por Rocío Mendoza</div>
                  <div style={{ fontFamily: TF.m, fontSize: 22, color: TC.ink2, marginTop: 6 }}>18 SEP 2026 · 14:32 · CON FECHA Y HORA</div>
                </div>
              </div>
            ) : null}
          </div>
        </div>

        {/* Notificación de regreso + estado */}
        {notif > 0 ? (
          <div style={{ position: 'absolute', left: 44, right: 44, top: 150, zIndex: 52, opacity: notif, transform: `translateY(${(1 - notif) * -40}px)` }}>
            <div style={{ background: TC.green, borderRadius: 28, padding: '26px 30px', display: 'flex', alignItems: 'center', gap: 22, boxShadow: '0 22px 50px rgba(16,185,129,0.4)' }}>
              <div style={{ width: 72, height: 72, borderRadius: '50%', background: 'rgba(255,255,255,0.25)', color: '#fff', display: 'grid', placeItems: 'center', fontFamily: TF.d, fontWeight: 800, fontSize: 27, flexShrink: 0 }}>RM</div>
              <div>
                <div style={{ fontFamily: TF.m, fontSize: 20, letterSpacing: '0.09em', color: 'rgba(255,255,255,0.8)' }}>EASY PROJECT · AHORA</div>
                <div style={{ fontFamily: TF.d, fontWeight: 800, fontSize: 36, color: '#fff', marginTop: 6, letterSpacing: '-0.02em' }}>Rocío firmó tu cotización</div>
              </div>
            </div>
          </div>
        ) : null}

        {estado > 0 ? (
          <div style={{ position: 'absolute', inset: 0, zIndex: 51 }}>
          <div style={{ position: 'absolute', inset: 0, background: 'rgba(15,20,25,0.5)', opacity: estado }} />
          <div style={{ position: 'absolute', left: 52, right: 52, top: 470, opacity: estado, transform: `translateY(${(1 - estado) * 24}px)` }}>
            <Tarjeta estilo={{ padding: '30px 34px' }}>
              <div style={{ display: 'flex', alignItems: 'center', gap: 16, marginBottom: 20 }}>
                <span style={{ fontFamily: TF.m, fontSize: 21, letterSpacing: '0.1em', color: TC.ink3 }}>COT-0001</span>
                <span style={{ background: TC.green, color: '#fff', borderRadius: 999, padding: '8px 20px', fontFamily: TF.m, fontSize: 21, fontWeight: 500, letterSpacing: '0.06em' }}>ACEPTADA</span>
              </div>
              <Renglon izq="Contrato firmado" der={mx(TOTAL)} sub="REMODELACIÓN DE BAÑO" />
              <div style={{ height: 2, background: TC.line, margin: '10px 0' }} />
              <Renglon izq="Anticipo por cobrar" der={mx(ANTICIPO)} sub="50 % PARA ARRANCAR" fuerte color={TC.orange} />
              <div style={{ marginTop: 22 }}><Boton tono="oscuro">Facturar el anticipo</Boton></div>
            </Tarjeta>
          </div>
          </div>
        ) : null}
      </Lienzo>

      <Dedo T={T} at={s + 6.9} x={700} y={790} />
      <Dedo T={T} at={s + 17.2} x={540} y={1480} />
      <Dedo T={T} at={s + 30.4} x={540} y={1260} />
    </div>
  );
}

/* ---------- PASO 4 · FACTURA CFDI (126 – 164) ---------- */
function PasoFactura({ T, CUES }) {
  const s = CUES.Factura;
  const o = MO.enter(s, 0.45)(T);

  const pre = MO.enter(s + 1.4, 0.6)(T);
  const resalte = T > s + 3.0 && T < s + 8.5;
  const forma = T > s + 11.2;
  const metodo = T > s + 14.2;
  const scroll = MO.draw(s + 12.0, s + 18.0)(T) * 420;
  const timbrando = T >= s + 19.6 && T < s + 22.4;
  const timbrado = MO.pop(s + 22.6, 0.6)(T);
  const archivos = MO.enter(s + 26.4, 0.6)(T);
  const entregado = MO.enter(s + 30.4, 0.6)(T);

  const fiscales = [
    ['RFC', 'MEGR850412H12'],
    ['Razón social', 'Rocío Mendoza García'],
    ['Régimen fiscal', '626 · Simplificado de Confianza'],
    ['CP fiscal', '44100'],
    ['Uso del CFDI', 'G03 · Gastos en general'],
  ];

  return (
    <div style={{ position: 'absolute', inset: 0, opacity: o, overflow: 'hidden' }}>
      <Fondo />
      <BarraEstado /><Pasos activo={4} />
      <Lienzo>
        <AppBar titulo="Factura del anticipo" accion="CFDI 4.0" />
        <div style={{ position: 'absolute', left: 0, right: 0, top: 108, bottom: 0, overflow: 'hidden' }}>
          <div style={{ padding: '30px 52px 0', transform: `translateY(${-scroll}px)` }}>
            <div style={{ opacity: pre }}>
              <div style={{ display: 'flex', alignItems: 'center', gap: 14, marginBottom: 16 }}>
                <div style={{ fontFamily: TF.m, fontSize: 22, letterSpacing: '0.12em', color: TC.orange, fontWeight: 500 }}>RECEPTOR</div>
                <div style={{ fontFamily: TF.m, fontSize: 20, color: TC.green, background: TC.greenSoft, border: `1.5px solid ${TC.green}`, borderRadius: 999, padding: '7px 16px' }}>ya venían del alta ✓</div>
              </div>
              <Tarjeta estilo={{ padding: '10px 30px', borderColor: resalte ? TC.green : TC.line, background: resalte ? TC.greenSoft : '#fff' }}>
                {fiscales.map((f) => (
                  <div key={f[0]} style={{ display: 'flex', justifyContent: 'space-between', gap: 22, padding: '17px 0', borderBottom: `1px solid ${TC.line}` }}>
                    <span style={{ fontFamily: TF.b, fontSize: 28, color: TC.ink3 }}>{f[0]}</span>
                    <span style={{ fontFamily: TF.m, fontSize: 27, color: TC.ink, fontWeight: 500, textAlign: 'right' }}>{f[1]}</span>
                  </div>
                ))}
              </Tarjeta>
            </div>

            <div style={{ fontFamily: TF.m, fontSize: 22, letterSpacing: '0.12em', color: TC.orange, fontWeight: 500, margin: '32px 0 16px' }}>PAGO</div>
            <div style={{ display: 'grid', gap: 16 }}>
              <div style={{ background: '#fff', border: `${T >= s + 10.2 && T < s + 11.6 ? 3 : 2}px solid ${T >= s + 10.2 && T < s + 11.6 ? TC.orange : TC.line}`, borderRadius: 20, padding: '24px 28px', display: 'flex', alignItems: 'center', gap: 14 }}>
                <span style={{ fontFamily: TF.b, fontSize: 27, color: TC.ink3 }}>Forma de pago</span>
                <span style={{ marginLeft: 'auto', fontFamily: TF.m, fontSize: 28, fontWeight: 500, color: forma ? TC.ink : TC.ink3 }}>{forma ? '03 · Transferencia' : 'Elige'}</span>
                <span style={{ color: forma ? TC.green : TC.ink3, fontSize: 28, fontWeight: 800 }}>{forma ? '✓' : '▾'}</span>
              </div>
              <div style={{ background: '#fff', border: `${T >= s + 13.2 && T < s + 14.6 ? 3 : 2}px solid ${T >= s + 13.2 && T < s + 14.6 ? TC.orange : TC.line}`, borderRadius: 20, padding: '24px 28px', display: 'flex', alignItems: 'center', gap: 14 }}>
                <span style={{ fontFamily: TF.b, fontSize: 27, color: TC.ink3 }}>Método de pago</span>
                <span style={{ marginLeft: 'auto', fontFamily: TF.m, fontSize: 28, fontWeight: 500, color: metodo ? TC.ink : TC.ink3 }}>{metodo ? 'PUE · una exhibición' : 'Elige'}</span>
                <span style={{ color: metodo ? TC.green : TC.ink3, fontSize: 28, fontWeight: 800 }}>{metodo ? '✓' : '▾'}</span>
              </div>
            </div>

            <div style={{ fontFamily: TF.m, fontSize: 22, letterSpacing: '0.12em', color: TC.orange, fontWeight: 500, margin: '32px 0 16px' }}>CONCEPTO</div>
            <Tarjeta estilo={{ padding: '24px 30px' }}>
              <Renglon izq="Anticipo · remodelación de baño" der={mx(ANT_SUB)} sub="50 % DEL CONTRATO COT-0001" />
              <div style={{ height: 2, background: TC.line, margin: '10px 0' }} />
              <div style={{ display: 'flex', justifyContent: 'space-between', fontFamily: TF.b, fontSize: 28, color: TC.ink3, padding: '9px 0' }}><span>IVA 16 %</span><span style={{ fontFamily: TF.m }}>{mx(ANT_IVA)}</span></div>
              <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', paddingTop: 8 }}>
                <span style={{ fontFamily: TF.b, fontWeight: 700, fontSize: 32 }}>Total a facturar</span>
                <span style={{ fontFamily: TF.d, fontWeight: 800, fontSize: 52, letterSpacing: '-0.03em' }}>{mx(ANTICIPO)}</span>
              </div>
            </Tarjeta>

            <div style={{ marginTop: 26 }}><Boton tono="primario">Timbrar ante el SAT</Boton></div>
            <div style={{ height: 200 }} />
          </div>
        </div>

        {/* Timbrando */}
        {timbrando ? (
          <div style={{ position: 'absolute', inset: 0, background: 'rgba(15,20,25,0.62)', display: 'flex', flexDirection: 'column', alignItems: 'center', justifyContent: 'center', gap: 34, zIndex: 54 }}>
            <div style={{ width: 130, height: 130, borderRadius: '50%', border: `10px solid rgba(255,255,255,0.22)`, borderTopColor: TC.orange, transform: `rotate(${(T - (s + 19.6)) * 520}deg)` }} />
            <div style={{ fontFamily: TF.d, fontWeight: 800, fontSize: 48, color: '#fff', letterSpacing: '-0.025em' }}>Enviando al SAT…</div>
          </div>
        ) : null}

        {/* Timbrada */}
        {timbrado > 0 ? (
          <div style={{ position: 'absolute', left: 44, right: 44, top: 250, zIndex: 53, opacity: timbrado, transform: `translateY(${(1 - timbrado) * 26}px)` }}>
            <Tarjeta estilo={{ borderColor: TC.green, padding: '36px 34px', boxShadow: '0 30px 70px rgba(15,20,25,0.2)' }}>
              <div style={{ display: 'flex', alignItems: 'center', gap: 20, marginBottom: 26 }}>
                <span style={{ width: 82, height: 82, borderRadius: '50%', background: TC.green, color: '#fff', display: 'grid', placeItems: 'center', fontSize: 44, fontWeight: 800 }}>✓</span>
                <div>
                  <div style={{ fontFamily: TF.d, fontWeight: 800, fontSize: 46, letterSpacing: '-0.025em', color: TC.ink }}>Factura timbrada</div>
                  <div style={{ fontFamily: TF.m, fontSize: 22, color: TC.ink3, marginTop: 6 }}>SERIE A · FOLIO 0001</div>
                </div>
              </div>
              {[['Folio fiscal (UUID)', 'A4F27C10-8B3E-4D91-A0C6-5E2B7D94F118'], ['Sello digital SAT', '||Hk9d+Qm3… (verificado)'], ['Fecha de timbrado', '18/09/2026 14:41:07'], ['Total timbrado', mx(ANTICIPO)]].map((r) => (
                <div key={r[0]} style={{ padding: '15px 0', borderTop: `1px solid ${TC.line}` }}>
                  <div style={{ fontFamily: TF.m, fontSize: 20, letterSpacing: '0.08em', color: TC.ink3 }}>{r[0].toUpperCase()}</div>
                  <div style={{ fontFamily: TF.m, fontSize: 25, color: TC.ink, marginTop: 6, wordBreak: 'break-all' }}>{r[1]}</div>
                </div>
              ))}
              {archivos > 0 ? (
                <div style={{ display: 'flex', gap: 16, marginTop: 24, opacity: archivos }}>
                  {[['PDF', TC.red], ['XML', TC.blue]].map((a) => (
                    <div key={a[0]} style={{ flex: 1, border: `2px solid ${TC.line}`, borderRadius: 22, padding: '22px 20px', display: 'flex', alignItems: 'center', gap: 16 }}>
                      <span style={{ width: 62, height: 62, borderRadius: 14, background: a[1], color: '#fff', display: 'grid', placeItems: 'center', fontFamily: TF.d, fontWeight: 800, fontSize: 21 }}>{a[0]}</span>
                      <span style={{ fontFamily: TF.b, fontWeight: 700, fontSize: 27, color: TC.ink }}>Listo</span>
                    </div>
                  ))}
                </div>
              ) : null}
              {entregado > 0 ? (
                <div style={{ marginTop: 22, opacity: entregado, display: 'grid', gap: 14 }}>
                  <div style={{ background: '#25D366', borderRadius: 20, padding: '20px 26px', display: 'flex', alignItems: 'center', gap: 16 }}>
                    <span style={{ color: '#fff', fontSize: 28, fontWeight: 800 }}>✓</span>
                    <span style={{ fontFamily: TF.b, fontWeight: 700, fontSize: 28, color: '#fff' }}>Enviada a Rocío por WhatsApp</span>
                  </div>
                  <div style={{ background: TC.cream2, borderRadius: 20, padding: '20px 26px', display: 'flex', alignItems: 'center', gap: 16 }}>
                    <span style={{ color: TC.ink2, fontSize: 28, fontWeight: 800 }}>✓</span>
                    <span style={{ fontFamily: TF.b, fontWeight: 700, fontSize: 28, color: TC.ink2 }}>Guardada en el expediente de la obra</span>
                  </div>
                </div>
              ) : null}
            </Tarjeta>
          </div>
        ) : null}
      </Lienzo>

      <Dedo T={T} at={s + 10.4} x={540} y={1150} />
      <Dedo T={T} at={s + 13.4} x={540} y={1265} />
      <Dedo T={T} at={s + 19.2} x={540} y={1420} />
    </div>
  );
}

/* ---------- CIERRE (164 – 180) ---------- */
function Cierre({ T, CUES }) {
  const s = CUES.Cierre;
  const o = MO.enter(s, 0.6)(T);
  const pasos = [
    ['01', 'Diste de alta a tu cliente', 'con sus datos fiscales, una sola vez'],
    ['02', 'Armaste la cotización', 'seis partidas, IVA y anticipo calculados solos'],
    ['03', 'Tu cliente firmó', 'desde su celular, con fecha y hora'],
    ['04', 'Facturaste y timbraste', 'PDF y XML entregados al instante'],
  ];
  const cta = MO.pop(s + 11.4, 0.6)(T);
  return (
    <div style={{ position: 'absolute', inset: 0, opacity: o, overflow: 'hidden' }}>
      <Fondo tono="azul" />
      <div style={{ position: 'absolute', bottom: -200, left: -140, width: 620, height: 620, borderRadius: '50%', background: `radial-gradient(circle, ${TC.orange}, transparent 66%)`, opacity: 0.3, filter: 'blur(20px)' }} />
      <div style={{ position: 'absolute', inset: 0, padding: '0 82px', display: 'flex', flexDirection: 'column', justifyContent: 'center', zIndex: 2 }}>
        <div style={{ fontFamily: TF.m, fontSize: 25, letterSpacing: '0.14em', color: TC.orange, marginBottom: 24, opacity: MO.enter(s + 0.3)(T) }}>ESO FUE TODO</div>
        <div style={{ fontFamily: TF.d, fontWeight: 800, fontSize: 96, letterSpacing: '-0.04em', lineHeight: 0.98, color: '#fff', marginBottom: 56, opacity: MO.enter(s + 0.6)(T) }}>
          De cliente nuevo<br />a factura timbrada
        </div>
        <div style={{ display: 'flex', flexDirection: 'column', gap: 22 }}>
          {pasos.map((p, i) => {
            const op = MO.enter(s + 1.8 + i * 1.6, 0.6)(T);
            return (
              <div key={p[0]} style={{ display: 'flex', gap: 24, alignItems: 'flex-start', opacity: op, transform: `translateX(${(1 - op) * 32}px)` }}>
                <div style={{ width: 62, height: 62, borderRadius: '50%', background: TC.green, color: '#fff', display: 'grid', placeItems: 'center', fontSize: 32, fontWeight: 800, flexShrink: 0 }}>✓</div>
                <div>
                  <div style={{ fontFamily: TF.d, fontWeight: 700, fontSize: 44, letterSpacing: '-0.02em', color: '#fff' }}>{p[1]}</div>
                  <div style={{ fontFamily: TF.b, fontSize: 28, color: 'rgba(255,255,255,0.62)', marginTop: 6 }}>{p[2]}</div>
                </div>
              </div>
            );
          })}
        </div>
        <div style={{ marginTop: 68, opacity: cta, transform: `scale(${0.92 + cta * 0.08})` }}>
          <Boton tono="primario">Empieza dando de alta tu primer cliente</Boton>
          <div style={{ textAlign: 'center', fontFamily: TF.m, fontSize: 24, color: 'rgba(255,255,255,0.55)', marginTop: 26, letterSpacing: '0.08em' }}>TE TOMA MENOS DE DOS MINUTOS</div>
        </div>
      </div>
    </div>
  );
}

Object.assign(window, { PasoFirma, PasoFactura, Cierre, TOTAL, ANTICIPO });