/* Tarjeta "Captacion de leads": historia en 3 actos en bucle de 12 s (cualifica, contacta, entrega a ventas).
   Todo va con .anim, asi que solo se mueve mientras la tarjeta esta en pantalla (.live). */
.st-leads.frag { padding: 0; }
.st-leads .ld-stage { position: absolute; inset: 0; }
.st-leads .ld-act { position: absolute; inset: 0; display: grid; place-items: center; padding: 22px; }
.st-leads .ld-act > .card-ui { position: relative; }

/* ---- acto 1: cualifica (0-4 s) ---- */
.st-leads .ld-a.anim { animation: ld-a 12s var(--ease) infinite; }
@keyframes ld-a { 0% { opacity: 0; transform: translateX(0) scale(.98); } 3%, 33% { opacity: 1; transform: none; } 38%, 100% { opacity: 0; transform: translateX(-40px); } }
.st-leads .leads-ui li.anim { animation: ld-row 12s ease infinite; animation-delay: 0s; }
.st-leads .leads-ui li:first-child.anim { animation-name: ld-row-top; }
@keyframes ld-row { 0%, 100% { background: transparent; } }
@keyframes ld-row-top { 0%, 20% { background: transparent; } 24%, 36% { background: var(--accent-soft); } 40%, 100% { background: transparent; } }
.st-leads .leads-ui .score i.anim { animation: ld-score 12s var(--ease) infinite; animation-delay: var(--dd); }
@keyframes ld-score { 0%, 2% { transform: scaleX(0); } 10%, 100% { transform: scaleX(1); } }
.st-leads .leads-ui li { position: relative; }
.st-leads .ld-fit { position: absolute; right: 6px; top: 50%; translate: 0 -50%; display: inline-flex; align-items: center; gap: 4px; padding: 3px 8px; border-radius: 999px; background: var(--ok); color: #fff; font-size: 11px; font-weight: 600; opacity: 0; }
.st-leads .ld-fit.anim { animation: ld-fit 12s var(--ease) infinite; }
@keyframes ld-fit { 0%, 23% { opacity: 0; transform: scale(.6); } 26%, 35% { opacity: 1; transform: scale(1); } 38%, 100% { opacity: 0; transform: scale(1); } }

/* ---- acto 2: contacta (4-8 s) ---- */
.st-leads .ld-b { opacity: 0; }
.st-leads .ld-b.anim { animation: ld-b 12s var(--ease) infinite; }
@keyframes ld-b { 0%, 34% { opacity: 0; transform: translateX(40px); } 38%, 64% { opacity: 1; transform: none; } 68%, 100% { opacity: 0; transform: translateX(-40px); } }
.st-leads .mail-ui .row { display: flex; gap: 8px; align-items: baseline; padding: 7px 2px; border-bottom: 1px solid var(--ground); font-size: 13px; }
.st-leads .mail-ui .row b { color: var(--muted); font-weight: 500; min-width: 46px; }
.st-leads .mail-ui .to small { color: var(--muted); }
.st-leads .mail-ui .subj span { display: inline-block; max-width: 100%; overflow: hidden; white-space: nowrap; vertical-align: bottom; width: 0; font-weight: 600; }
.st-leads .mail-ui .subj span.anim { animation: ld-type 12s steps(34) infinite; }
@keyframes ld-type { 0%, 39% { width: 0; } 46%, 100% { width: 100%; } }
.st-leads .mail-ui .body { padding: 10px 2px 4px; display: grid; gap: 6px; color: var(--ink); font-size: 13px; line-height: 1.45; }
.st-leads .mail-ui .body p { opacity: 0; margin: 0; }
.st-leads .mail-ui .body p.anim { animation: ld-line 12s ease infinite; animation-delay: var(--dd); }
@keyframes ld-line { 0%, 46% { opacity: 0; transform: translateY(4px); } 49%, 100% { opacity: 1; transform: none; } }
.st-leads .mail-ui .send { margin-top: 10px; display: flex; justify-content: flex-end; align-items: center; gap: 10px; position: relative; }
.st-leads .mail-ui .btn-send { padding: 7px 14px; border-radius: 999px; background: var(--accent); color: #fff; font-weight: 600; font-size: 12.5px; }
.st-leads .mail-ui .btn-send.anim { animation: ld-press 12s ease infinite; }
@keyframes ld-press { 0%, 52.5% { transform: none; } 54% { transform: scale(.9); } 55.5%, 100% { transform: none; } }
.st-leads .mail-ui .sent { color: var(--ok); font-weight: 600; font-size: 12.5px; opacity: 0; }
.st-leads .mail-ui .sent.anim { animation: ld-sent 12s ease infinite; }
@keyframes ld-sent { 0%, 54.5% { opacity: 0; } 56%, 100% { opacity: 1; } }
.st-leads .mail-ui .plane { position: absolute; right: 18px; top: 2px; width: 18px; height: 18px; opacity: 0; color: var(--accent); }
.st-leads .mail-ui .plane.anim { animation: ld-plane 12s ease-in infinite; }
@keyframes ld-plane { 0%, 54.5% { opacity: 0; transform: none; } 55.5% { opacity: 1; transform: none; } 62% { opacity: 0; transform: translate(60px, -70px) rotate(-12deg); } 100% { opacity: 0; } }

/* ---- acto 3: entrega a ventas (8-12 s) ---- */
.st-leads .ld-c { opacity: 0; }
.st-leads .ld-c.anim { animation: ld-c 12s var(--ease) infinite; }
@keyframes ld-c { 0%, 65% { opacity: 0; transform: translateX(40px); } 69%, 95% { opacity: 1; transform: none; } 100% { opacity: 0; transform: none; } }
.st-leads .deal-ui { display: grid; gap: 10px; background: transparent; box-shadow: none; padding: 0; }
.st-leads .deal-ui .bubble { justify-self: start; max-width: 88%; background: #fff; border-radius: 14px 14px 14px 4px; padding: 10px 12px; box-shadow: 0 14px 30px -18px rgba(11,15,26,.35); font-size: 13px; line-height: 1.45; opacity: 0; }
.st-leads .deal-ui .bubble small { display: block; color: var(--muted); font-size: 11.5px; margin-bottom: 2px; }
.st-leads .deal-ui .chip { justify-self: start; display: inline-flex; align-items: center; gap: 6px; padding: 6px 12px; border-radius: 999px; background: var(--ok-soft); color: var(--ok); font-weight: 600; font-size: 12.5px; opacity: 0; }
.st-leads .deal-ui .chip svg { width: 14px; height: 14px; }
.st-leads .deal-ui .opp { display: grid; grid-template-columns: 30px 1fr auto; gap: 10px; align-items: center; background: #fff; border-radius: 14px; padding: 12px; box-shadow: 0 14px 30px -18px rgba(11,15,26,.35); font-size: 13px; opacity: 0; }
.st-leads .deal-ui .opp img { width: 26px; height: 26px; }
.st-leads .deal-ui .opp small { display: block; color: var(--muted); font-size: 12px; }
.st-leads .deal-ui .opp .pill { padding: 3px 9px; border-radius: 999px; background: var(--ok); color: #fff; font-weight: 700; font-size: 12px; }
.st-leads .deal-ui .pop.anim { animation: ld-pop 12s var(--ease) infinite; animation-delay: var(--dd); }
@keyframes ld-pop { 0%, 69% { opacity: 0; transform: translateY(8px) scale(.97); } 72%, 100% { opacity: 1; transform: none; } }

@media (max-width: 760px) {
  .st-leads .ld-act { padding: 16px; }
  .st-leads .mail-ui .row, .st-leads .mail-ui .body { font-size: 12.5px; }
}
@media (prefers-reduced-motion: reduce) {
  .st-leads .ld-a, .st-leads .ld-a.anim { animation: none; opacity: 1; transform: none; }
  .st-leads .ld-b, .st-leads .ld-c { display: none; }
  .st-leads .leads-ui .score i.anim { animation: none; transform: none; }
}

/* ===== Tarjeta "Chatbot inteligente": una conversacion de WhatsApp en bucle de 12 s (atiende, resuelve, vende) ===== */
.st-chat { --off: 0s; }
.st-chat .wa-ui { display: flex; flex-direction: column; padding: 0; overflow: hidden; }
.st-chat .wa-hd { display: grid; grid-template-columns: 30px 1fr auto; gap: 10px; align-items: center; padding: 10px 12px; border-bottom: 1px solid var(--ground); }
.st-chat .wa-av { width: 30px; height: 30px; border-radius: 50%; background: #25d366; color: #fff; display: grid; place-items: center; font-weight: 700; font-size: 13px; }
.st-chat .wa-hd b { font-weight: 600; font-size: 13px; display: block; }
.st-chat .wa-hd small { color: var(--ok); font-size: 11.5px; }
.st-chat .wa-hd time { color: var(--muted); font-size: 12px; }
.st-chat .wa-body { height: 218px; padding: 6px 12px 12px; display: flex; flex-direction: column; justify-content: flex-end; overflow: hidden; }
.st-chat .wa-body.anim { animation: wa-body 12s linear infinite; animation-delay: var(--off); }
@keyframes wa-body { 0% { opacity: 0; } 1.5%, 95% { opacity: 1; } 99%, 100% { opacity: 0; } }
.st-chat .wa-it { flex: none; overflow: hidden; opacity: 0; max-height: 0; margin-top: 0; }
.st-chat .wa-it.anim { animation-duration: 12s; animation-iteration-count: infinite; animation-timing-function: var(--ease); animation-delay: var(--off); }
.st-chat .msg { max-width: 84%; }
.st-chat .wa-it.msg.in { align-self: flex-start; }
.st-chat .wa-it.msg.out, .st-chat .wa-it.right { align-self: flex-end; }
.st-chat .typing { align-self: flex-end; }
.st-chat .typing i.anim { animation: blink 1s ease infinite; }
.st-chat .typing i:nth-child(2) { animation-delay: .15s; }
.st-chat .typing i:nth-child(3) { animation-delay: .3s; }
.st-chat .pdf { display: flex; align-items: center; gap: 10px; padding: 9px 12px; border-radius: 14px; border-bottom-right-radius: 4px; background: var(--ink); color: #fff; font-size: 12.5px; }
.st-chat .pdf i { width: 26px; height: 30px; border-radius: 5px; background: #e5484d; color: #fff; display: grid; place-items: center; font-style: normal; font-size: 9px; font-weight: 700; }
.st-chat .pdf small { display: block; opacity: .65; font-size: 11px; }
.st-chat .qr { display: flex; gap: 6px; }
.st-chat .qr span { padding: 6px 11px; border-radius: 999px; border: 1px solid #d9d6f5; color: var(--accent); font-weight: 600; font-size: 12px; background: #fff; }
.st-chat .qr span.pick.anim { animation: wa-pick 12s ease infinite; animation-delay: var(--off); }
@keyframes wa-pick { 0%, 49% { background: #fff; color: var(--accent); } 51%, 99% { background: var(--accent); color: #fff; } 100% { background: #fff; color: var(--accent); } }
.st-chat .conf { padding: 10px 12px; border-radius: 14px; border-bottom-right-radius: 4px; background: var(--ink); color: #fff; font-size: 12.5px; line-height: 1.4; }
.st-chat .conf b { display: block; color: #7ee2b8; font-weight: 600; }
.st-chat .chip { display: inline-flex; align-items: center; gap: 6px; padding: 5px 11px; border-radius: 999px; background: var(--ok-soft); color: var(--ok); font-weight: 600; font-size: 12px; }

@keyframes wa-1 { 0%, 1.67% { opacity: 0; max-height: 0; margin-top: 0; transform: translateY(6px); } 3.87%, 99.9% { opacity: 1; max-height: 140px; margin-top: 7px; transform: none; } 100% { opacity: 0; max-height: 0; margin-top: 0; } }
.st-chat .wa-1.anim { animation-name: wa-1; }
@keyframes wa-t1 { 0%, 7.5% { opacity: 0; max-height: 0; margin-top: 0; } 9.0%, 15.0% { opacity: 1; max-height: 40px; margin-top: 7px; } 16.2%, 100% { opacity: 0; max-height: 0; margin-top: 0; } }
.st-chat .wa-t1.anim { animation-name: wa-t1; }
@keyframes wa-2 { 0%, 15.0% { opacity: 0; max-height: 0; margin-top: 0; transform: translateY(6px); } 17.2%, 99.9% { opacity: 1; max-height: 140px; margin-top: 7px; transform: none; } 100% { opacity: 0; max-height: 0; margin-top: 0; } }
.st-chat .wa-2.anim { animation-name: wa-2; }
@keyframes wa-3 { 0%, 33.33% { opacity: 0; max-height: 0; margin-top: 0; transform: translateY(6px); } 35.53%, 99.9% { opacity: 1; max-height: 140px; margin-top: 7px; transform: none; } 100% { opacity: 0; max-height: 0; margin-top: 0; } }
.st-chat .wa-3.anim { animation-name: wa-3; }
@keyframes wa-4 { 0%, 38.33% { opacity: 0; max-height: 0; margin-top: 0; transform: translateY(6px); } 40.53%, 99.9% { opacity: 1; max-height: 140px; margin-top: 7px; transform: none; } 100% { opacity: 0; max-height: 0; margin-top: 0; } }
.st-chat .wa-4.anim { animation-name: wa-4; }
@keyframes wa-5 { 0%, 53.33% { opacity: 0; max-height: 0; margin-top: 0; transform: translateY(6px); } 55.53%, 99.9% { opacity: 1; max-height: 140px; margin-top: 7px; transform: none; } 100% { opacity: 0; max-height: 0; margin-top: 0; } }
.st-chat .wa-5.anim { animation-name: wa-5; }
@keyframes wa-t2 { 0%, 57.5% { opacity: 0; max-height: 0; margin-top: 0; } 59.0%, 65.83% { opacity: 1; max-height: 40px; margin-top: 7px; } 67.03%, 100% { opacity: 0; max-height: 0; margin-top: 0; } }
.st-chat .wa-t2.anim { animation-name: wa-t2; }
@keyframes wa-6 { 0%, 65.83% { opacity: 0; max-height: 0; margin-top: 0; transform: translateY(6px); } 68.03%, 99.9% { opacity: 1; max-height: 140px; margin-top: 7px; transform: none; } 100% { opacity: 0; max-height: 0; margin-top: 0; } }
.st-chat .wa-6.anim { animation-name: wa-6; }
@keyframes wa-7 { 0%, 74.17% { opacity: 0; max-height: 0; margin-top: 0; transform: translateY(6px); } 76.37%, 99.9% { opacity: 1; max-height: 140px; margin-top: 7px; transform: none; } 100% { opacity: 0; max-height: 0; margin-top: 0; } }
.st-chat .wa-7.anim { animation-name: wa-7; }

/* ===== Tarjeta "Cobro de impagos": una factura de principio a fin, bucle de 12 s (recuerda, negocia, cobra) ===== */
.st-collect { --off: 0s; }
.st-collect .bill-ui { display: flex; flex-direction: column; gap: 10px; }
.st-collect .steps { position: relative; display: grid; grid-template-columns: repeat(4, 1fr); text-align: center; font-size: 10.5px; color: var(--muted); padding-top: 14px; }
.st-collect .steps::before { content: ""; position: absolute; left: 12.5%; right: 12.5%; top: 4px; height: 3px; border-radius: 3px; background: var(--ground); }
.st-collect .steps .bar { position: absolute; left: 12.5%; top: 4px; height: 3px; border-radius: 3px; background: var(--ok); width: 0; }
.st-collect .steps .bar.anim { animation: bl-bar 12s var(--ease) infinite; animation-delay: var(--off); }
@keyframes bl-bar { 0%, 6% { width: 0; } 9%, 55% { width: 25%; } 58%, 72% { width: 50%; } 75%, 99% { width: 75%; } 100% { width: 0; } }
.st-collect .steps span { position: relative; }
.st-collect .steps span i { position: absolute; left: 50%; top: -14px; width: 11px; height: 11px; margin-left: -5.5px; border-radius: 50%; background: #fff; box-shadow: 0 0 0 2px var(--ground); }
.st-collect .steps span.s1 i { background: #e5484d; box-shadow: 0 0 0 2px #fbe4dc; }
.st-collect .steps span.s2 i.anim { animation: bl-d2 12s ease infinite; animation-delay: var(--off); }
.st-collect .steps span.s3 i.anim { animation: bl-d3 12s ease infinite; animation-delay: var(--off); }
.st-collect .steps span.s4 i.anim { animation: bl-d4 12s ease infinite; animation-delay: var(--off); }
@keyframes bl-d2 { 0%, 8% { background: #fff; box-shadow: 0 0 0 2px var(--ground); } 10%, 99% { background: var(--ok); box-shadow: 0 0 0 2px var(--ok-soft); } }
@keyframes bl-d3 { 0%, 57% { background: #fff; box-shadow: 0 0 0 2px var(--ground); } 59%, 99% { background: var(--ok); box-shadow: 0 0 0 2px var(--ok-soft); } }
@keyframes bl-d4 { 0%, 74% { background: #fff; box-shadow: 0 0 0 2px var(--ground); } 76%, 99% { background: var(--ok); box-shadow: 0 0 0 2px var(--ok-soft); } }
.st-collect .bill { display: grid; grid-template-columns: 1fr auto; gap: 8px 10px; align-items: center; padding: 10px 2px; border-top: 1px solid var(--ground); border-bottom: 1px solid var(--ground); }
.st-collect .bill small { display: block; color: var(--muted); font-size: 12.5px; }
.st-collect .bill b { font-weight: 600; font-variant-numeric: tabular-nums; text-align: right; }
.st-collect .pill { position: relative; height: 22px; min-width: 128px; }
.st-collect .pill span { position: absolute; inset: 0; display: grid; place-items: center; border-radius: 999px; font-size: 11.5px; font-weight: 600; white-space: nowrap; opacity: 0; }
.st-collect .pill .p1 { background: #fbe4dc; color: #a2310d; }
.st-collect .pill .p2 { background: #fff1d6; color: #a45c00; }
.st-collect .pill .p3 { background: var(--ok-soft); color: var(--ok); }
.st-collect .pill span.anim { animation-duration: 12s; animation-iteration-count: infinite; animation-delay: var(--off); }
.st-collect .pill .p1.anim { animation-name: bl-p1; } .st-collect .pill .p2.anim { animation-name: bl-p2; } .st-collect .pill .p3.anim { animation-name: bl-p3; }
@keyframes bl-p1 { 0%, 56% { opacity: 1; } 58%, 100% { opacity: 0; } }
@keyframes bl-p2 { 0%, 56% { opacity: 0; } 58%, 74% { opacity: 1; } 76%, 100% { opacity: 0; } }
@keyframes bl-p3 { 0%, 74% { opacity: 0; } 76%, 99% { opacity: 1; } 100% { opacity: 0; } }
.st-collect .stage { position: relative; height: 128px; }
.st-collect .act { position: absolute; inset: 0; display: flex; flex-direction: column; justify-content: flex-end; gap: 6px; opacity: 0; }
.st-collect .act.anim { animation-duration: 12s; animation-iteration-count: infinite; animation-timing-function: var(--ease); animation-delay: var(--off); }
.st-collect .a1.anim { animation-name: bl-a1; } .st-collect .a2.anim { animation-name: bl-a2; } .st-collect .a3.anim { animation-name: bl-a3; }
@keyframes bl-a1 { 0%, 3% { opacity: 0; transform: translateY(8px); } 6%, 30% { opacity: 1; transform: none; } 33%, 100% { opacity: 0; transform: translateY(-8px); } }
@keyframes bl-a2 { 0%, 33% { opacity: 0; } 35%, 62% { opacity: 1; } 65%, 100% { opacity: 0; } }
@keyframes bl-a3 { 0%, 65% { opacity: 0; transform: translateY(8px); } 68%, 96% { opacity: 1; transform: none; } 99%, 100% { opacity: 0; } }
.st-collect .msg { font-size: 12.5px; padding: 8px 11px; max-width: 90%; }
.st-collect .msg .pay { display: inline-block; margin-top: 6px; padding: 4px 10px; border-radius: 999px; background: #fff; color: var(--ink); font-weight: 600; font-size: 11.5px; }
.st-collect .a2 > * { opacity: 0; }
.st-collect .a2 > *.anim { animation-duration: 12s; animation-iteration-count: infinite; animation-delay: var(--off); }
.st-collect .a2 .b1.anim { animation-name: bl-b1; } .st-collect .a2 .b2.anim { animation-name: bl-b2; } .st-collect .a2 .b3.anim { animation-name: bl-b3; } .st-collect .a2 .b4.anim { animation-name: bl-b4; }
@keyframes bl-b1 { 0%, 35% { opacity: 0; transform: translateY(6px); } 37%, 100% { opacity: 1; transform: none; } }
@keyframes bl-b2 { 0%, 43% { opacity: 0; transform: translateY(6px); } 45%, 100% { opacity: 1; transform: none; } }
@keyframes bl-b3 { 0%, 46% { opacity: 0; } 48%, 100% { opacity: 1; } }
@keyframes bl-b4 { 0%, 52% { opacity: 0; transform: translateY(6px); } 54%, 100% { opacity: 1; transform: none; } }
.st-collect .rule { align-self: flex-end; font-size: 10.5px; color: var(--muted); margin-top: -2px; }
.st-collect .row { display: flex; align-items: center; gap: 8px; padding: 9px 11px; border-radius: 12px; font-size: 12.5px; }
.st-collect .row.ok { background: var(--ok-soft); color: var(--ok); font-weight: 600; }
.st-collect .row.next { background: var(--ground); color: var(--ink); }
.st-collect .a3 .row { opacity: 0; }
.st-collect .a3 .row.anim { animation-duration: 12s; animation-iteration-count: infinite; animation-delay: var(--off); }
.st-collect .a3 .r1.anim { animation-name: bl-r1; } .st-collect .a3 .r2.anim { animation-name: bl-r2; }
@keyframes bl-r1 { 0%, 67% { opacity: 0; transform: translateY(6px); } 69.5%, 100% { opacity: 1; transform: none; } }
@keyframes bl-r2 { 0%, 72% { opacity: 0; transform: translateY(6px); } 74.5%, 100% { opacity: 1; transform: none; } }
.st-collect .total { display: flex; justify-content: space-between; align-items: baseline; padding: 2px 2px 0; }
.st-collect .total small { color: var(--muted); font-size: 12.5px; }
.st-collect .amt { position: relative; height: 26px; min-width: 96px; text-align: right; }
.st-collect .amt b { position: absolute; right: 0; top: 0; font-size: 20px; letter-spacing: -.03em; font-weight: 600; font-variant-numeric: tabular-nums; }
.st-collect .amt .v2 { opacity: 0; }
.st-collect .amt .plus { position: absolute; right: calc(100% + 2px); top: 5px; font-size: 12px; font-weight: 700; color: var(--ok); opacity: 0; }
.st-collect .amt .anim { animation-duration: 12s; animation-iteration-count: infinite; animation-delay: var(--off); }
.st-collect .amt .v1.anim { animation-name: bl-v1; } .st-collect .amt .v2.anim { animation-name: bl-v2; } .st-collect .amt .plus.anim { animation-name: bl-plus; }
@keyframes bl-v1 { 0%, 76% { opacity: 1; transform: none; } 79%, 100% { opacity: 0; transform: translateY(-6px); } }
@keyframes bl-v2 { 0%, 76% { opacity: 0; transform: translateY(6px); } 79%, 99% { opacity: 1; transform: none; } 100% { opacity: 0; } }
@keyframes bl-plus { 0%, 74% { opacity: 0; transform: none; } 76% { opacity: 1; transform: translateY(-4px); } 84%, 100% { opacity: 0; transform: translateY(-22px); } }

/* en la home las tres tarjetas van desfasadas para que no cambien a la vez */
.t-chat .st-chat { --off: -10.5s; }
.t-collect .st-collect { --off: -9s; }

@media (prefers-reduced-motion: reduce) {
  .st-chat .wa-it, .st-chat .wa-body { opacity: 1 !important; max-height: none !important; margin-top: 7px; animation: none !important; }
  .st-chat .typing { display: none; }
  .st-collect .act, .st-collect .act * { animation: none !important; }
  .st-collect .a1, .st-collect .a2 { display: none; }
  .st-collect .a3, .st-collect .a3 .row, .st-collect .pill .p3, .st-collect .amt .v2 { opacity: 1 !important; animation: none !important; }
  .st-collect .pill .p1, .st-collect .amt .v1, .st-collect .amt .plus { opacity: 0 !important; animation: none !important; }
  .st-collect .steps .bar { width: 75%; animation: none; } .st-collect .steps span i { background: var(--ok); animation: none !important; }
}

/* ===== Tarjeta "Prevision de demanda": grafica, tiendas y pedido, bucle de 12 s (anticipa, por tienda, compra mejor) ===== */
.st-fc { --off: 0s; }
.st-fc.frag { padding: 0; }
.st-fc .act { position: absolute; inset: 0; display: grid; place-items: center; padding: 22px; opacity: 0; }
.st-fc .act > .card-ui { position: relative; }
.st-fc .anim { animation-duration: 12s; animation-iteration-count: infinite; animation-delay: var(--off); animation-timing-function: var(--ease); }
.st-fc .fa.anim { animation-name: fc-a; } .st-fc .fb.anim { animation-name: fc-b; } .st-fc .fcc.anim { animation-name: fc-c; }
@keyframes fc-a { 0% { opacity: 0; } 3%, 32% { opacity: 1; transform: none; } 36%, 100% { opacity: 0; transform: translateX(-40px); } }
@keyframes fc-b { 0%, 33% { opacity: 0; transform: translateX(40px); } 37%, 62% { opacity: 1; transform: none; } 66%, 100% { opacity: 0; transform: translateX(-40px); } }
@keyframes fc-c { 0%, 63% { opacity: 0; transform: translateX(40px); } 67%, 95% { opacity: 1; transform: none; } 99%, 100% { opacity: 0; } }
.st-fc .fc svg { height: 118px; }
.st-fc .fc .actual.anim { stroke-dasharray: 520; animation-name: fc-draw; animation-timing-function: ease-out; }
@keyframes fc-draw { 0%, 2% { stroke-dashoffset: 520; } 13%, 100% { stroke-dashoffset: 0; } }
.st-fc .fc .pred.anim, .st-fc .fc .band.anim { animation-name: fc-pred; }
@keyframes fc-pred { 0%, 12% { opacity: 0; } 17%, 100% { opacity: 1; } }
.st-fc .peak { position: absolute; right: 18px; top: 44px; padding: 4px 9px; border-radius: 8px; background: var(--ink); color: #fff; font-size: 11px; font-weight: 600; white-space: nowrap; opacity: 0; }
.st-fc .peak.anim { animation-name: fc-peak; }
@keyframes fc-peak { 0%, 23% { opacity: 0; transform: translateY(6px); } 26%, 100% { opacity: 1; transform: none; } }
.st-fc .drivers { display: flex; gap: 6px; margin-top: 8px; flex-wrap: wrap; }
.st-fc .drivers span { padding: 3px 9px; border-radius: 999px; background: var(--ground); color: var(--muted); font-size: 11.5px; font-weight: 500; }
.st-fc .drivers span.anim { animation-name: fc-drv; }
@keyframes fc-drv { 0%, 14% { background: var(--ground); color: var(--muted); } 16%, 100% { background: var(--accent-soft); color: var(--accent); } }
.st-fc .stores .st { display: grid; grid-template-columns: 104px 1fr; gap: 10px; align-items: center; padding: 7px 2px; font-size: 13px; }
.st-fc .stores .st + .st { box-shadow: 0 -1px 0 var(--ground); }
.st-fc .stores .tr { position: relative; height: 9px; border-radius: 9px; background: var(--ground); }
.st-fc .stores .tr i { position: absolute; left: 0; top: 0; bottom: 0; width: var(--w); border-radius: 9px; background: var(--ok); transform-origin: left; }
.st-fc .stores .tr i.anim { animation-name: fc-bar; }
@keyframes fc-bar { 0%, 37% { transform: scaleX(0); } 44%, 100% { transform: scaleX(1); } }
.st-fc .stores .tr b { position: absolute; top: -4px; bottom: -4px; left: var(--d); width: 2px; border-radius: 2px; background: var(--ink); }
.st-fc .stores .bad i.anim { animation-name: fc-bar-bad; }
@keyframes fc-bar-bad { 0%, 37% { transform: scaleX(0); background: var(--ok); } 44%, 48% { transform: scaleX(1); background: var(--ok); } 51%, 100% { transform: scaleX(1); background: #e5484d; } }
.st-fc .stores .warn { grid-column: 2; grid-row: 2; justify-self: start; margin-top: 2px; white-space: nowrap; padding: 2px 8px; border-radius: 999px; background: #fbe4dc; color: #a2310d; font-size: 11.5px; font-weight: 600; opacity: 0; }
.st-fc .stores .warn.anim { animation-name: fc-warn; }
@keyframes fc-warn { 0%, 50% { opacity: 0; transform: translateY(-3px); } 53%, 100% { opacity: 1; transform: none; } }
.st-fc .stores .key { display: flex; gap: 14px; margin-top: 8px; font-size: 11.5px; color: var(--muted); }
.st-fc .stores .key i { display: inline-block; width: 12px; height: 6px; border-radius: 3px; background: var(--ok); margin-right: 5px; vertical-align: middle; }
.st-fc .stores .key i.d { width: 2px; height: 10px; background: var(--ink); }
.st-fc .po .ln { display: flex; justify-content: space-between; gap: 10px; padding: 7px 2px; font-size: 13px; }
.st-fc .po .ln + .ln { box-shadow: 0 -1px 0 var(--ground); }
.st-fc .po .ln span { color: var(--muted); }
.st-fc .po .ln b { font-weight: 600; text-align: right; }
.st-fc .po .act-row { margin-top: 10px; display: flex; justify-content: flex-end; align-items: center; gap: 10px; }
.st-fc .po .btn { padding: 7px 14px; border-radius: 999px; background: var(--accent); color: #fff; font-weight: 600; font-size: 12.5px; }
.st-fc .po .btn.anim { animation-name: fc-press; animation-timing-function: ease; }
@keyframes fc-press { 0%, 74% { transform: none; } 75.5% { transform: scale(.9); } 77%, 100% { transform: none; } }
.st-fc .po .done { color: var(--ok); font-weight: 600; font-size: 12.5px; opacity: 0; }
.st-fc .po .done.anim { animation-name: fc-done; }
@keyframes fc-done { 0%, 76.5% { opacity: 0; } 78%, 100% { opacity: 1; } }
.st-fc .po .saved { margin-top: 10px; display: inline-flex; align-items: center; gap: 6px; padding: 5px 11px; border-radius: 999px; background: var(--ok-soft); color: var(--ok); font-weight: 600; font-size: 12px; opacity: 0; }
.st-fc .po .saved.anim { animation-name: fc-saved; }
@keyframes fc-saved { 0%, 82% { opacity: 0; transform: translateY(6px); } 85%, 100% { opacity: 1; transform: none; } }

/* ===== Tarjeta "Base de conocimiento": pregunta, busqueda en documentos y respuesta citada, bucle de 12 s ===== */
.st-kb { --off: 0s; }
.st-kb .anim { animation-duration: 12s; animation-iteration-count: infinite; animation-delay: var(--off); animation-timing-function: var(--ease); }
.st-kb .kb-ui { display: flex; flex-direction: column; gap: 10px; }
.st-kb .kb-q .typed { max-width: 0; }
.st-kb .kb-q .typed.anim { animation-name: kb-type; animation-timing-function: steps(34); }
@keyframes kb-type { 0%, 2% { max-width: 0; } 20%, 99% { max-width: 100%; } 100% { max-width: 0; } }
.st-kb .stage { position: relative; height: 196px; }
.st-kb .docs, .st-kb .ans { position: absolute; inset: 0; opacity: 0; }
.st-kb .docs.anim { animation-name: kb-docs; }
@keyframes kb-docs { 0%, 21% { opacity: 0; } 24%, 62% { opacity: 1; transform: none; } 66%, 100% { opacity: 0; transform: translateY(-8px); } }
.st-kb .ans.anim { animation-name: kb-ans2; }
@keyframes kb-ans2 { 0%, 64% { opacity: 0; transform: translateY(8px); } 68%, 96% { opacity: 1; transform: none; } 99%, 100% { opacity: 0; } }
.st-kb .lbl { font-size: 11.5px; color: var(--muted); margin-bottom: 6px; }
.st-kb .doc { position: relative; display: grid; grid-template-columns: 22px 1fr auto; gap: 9px; align-items: center; padding: 8px 10px; border-radius: 10px; background: #fff; box-shadow: inset 0 0 0 1px #ecebe6; font-size: 12.5px; overflow: hidden; opacity: 0; }
.st-kb .doc + .doc { margin-top: 6px; }
.st-kb .doc svg { width: 18px; height: 18px; color: var(--muted); }
.st-kb .doc small { display: block; color: var(--muted); font-size: 11px; }
.st-kb .doc.d1.anim { animation-name: kb-d1; } .st-kb .doc.d2.anim { animation-name: kb-d2; } .st-kb .doc.d3.anim { animation-name: kb-d3; }
@keyframes kb-d1 { 0%, 25% { opacity: 0; transform: translateY(6px); } 27%, 100% { opacity: 1; transform: none; } }
@keyframes kb-d2 { 0%, 28% { opacity: 0; transform: translateY(6px); } 30%, 100% { opacity: 1; transform: none; } }
@keyframes kb-d3 { 0%, 31% { opacity: 0; transform: translateY(6px); } 33%, 49% { opacity: 1; transform: none; } 52%, 100% { opacity: .5; transform: none; } }
.st-kb .doc::after { content: ""; position: absolute; top: 0; bottom: 0; width: 40%; left: -40%; background: linear-gradient(90deg, rgba(91,69,224,0), rgba(91,69,224,.14), rgba(91,69,224,0)); }
.st-kb .doc.anim::after { animation: kb-scan 12s linear infinite; animation-delay: calc(var(--off) + var(--sd)); }
@keyframes kb-scan { 0%, 34% { left: -40%; } 41%, 100% { left: 110%; } }
.st-kb .mk { font-size: 11px; font-weight: 600; padding: 2px 8px; border-radius: 999px; opacity: 0; white-space: nowrap; }
.st-kb .mk.ok { background: var(--ok-soft); color: var(--ok); }
.st-kb .mk.no { background: #fbe4dc; color: #a2310d; }
.st-kb .mk.m1.anim { animation-name: kb-m1; } .st-kb .mk.m2.anim { animation-name: kb-m2; } .st-kb .mk.m3.anim { animation-name: kb-m3; }
@keyframes kb-m1 { 0%, 42% { opacity: 0; transform: scale(.7); } 44.5%, 100% { opacity: 1; transform: none; } }
@keyframes kb-m2 { 0%, 46% { opacity: 0; transform: scale(.7); } 48.5%, 100% { opacity: 1; transform: none; } }
@keyframes kb-m3 { 0%, 50% { opacity: 0; transform: scale(.7); } 52.5%, 100% { opacity: 1; transform: none; } }
.st-kb .d3 .t { position: relative; }
.st-kb .d3 .t::after { content: ""; position: absolute; left: 0; right: 0; top: 50%; height: 1.5px; background: #a2310d; transform: scaleX(0); transform-origin: left; }
.st-kb .d3.anim .t::after { animation: kb-strike 12s ease infinite; animation-delay: var(--off); }
@keyframes kb-strike { 0%, 50% { transform: scaleX(0); } 53%, 100% { transform: scaleX(1); } }
.st-kb .ans .a { padding: 12px; border-radius: 11px; background: #fff; box-shadow: inset 0 0 0 1px #ecebe6; line-height: 1.5; font-size: 13px; color: var(--ink-2); }
.st-kb .ans .a sup { color: var(--accent); font-weight: 700; font-size: 10px; margin-left: 1px; }
.st-kb .ans .src span b { color: var(--accent); margin-right: 4px; }
.st-kb .ans .meta { margin-top: 8px; font-size: 11.5px; color: var(--ok); font-weight: 600; opacity: 0; }
.st-kb .ans .meta.anim { animation-name: kb-meta; }
@keyframes kb-meta { 0%, 76% { opacity: 0; } 79%, 100% { opacity: 1; } }

/* desfase en la home entre las seis tarjetas */
.t-forecast .st-fc { --off: -7.5s; }
.t-kb .st-kb { --off: -4.5s; }

@media (prefers-reduced-motion: reduce) {
  .st-fc .act, .st-fc .act *, .st-kb .anim, .st-kb .doc::after { animation: none !important; }
  .st-fc .fb, .st-fc .fcc { display: none; } .st-fc .fa, .st-fc .peak, .st-fc .fc .pred, .st-fc .fc .band { opacity: 1 !important; }
  .st-kb .kb-q .typed { max-width: 100%; } .st-kb .docs { display: none; } .st-kb .ans, .st-kb .ans .meta { opacity: 1 !important; }
}
/* los graficos y la pregunta tenian su propio ritmo en pages.css: aqui manda el bucle de 12 s */
.st-fc .fc .anim, .st-kb .kb-q .anim { animation-duration: 12s; animation-iteration-count: infinite; animation-delay: var(--off); }

.st-kb.frag, .st-fc.frag .act { grid-template-columns: minmax(0, 1fr); }
.st-kb .card-ui, .st-fc .card-ui { min-width: 0; }
.st-kb .kb-q { min-width: 0; overflow: hidden; }
.st-kb .kb-q .typed { min-width: 0; }
.st-kb .doc > span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* ===== Tarjeta "Infraestructura de IA a medida": cada capa se enciende y explica que hace, bucle de 12 s ===== */
.st-infra { --off: 0s; position: absolute; inset: 0; container-type: inline-size; }
.st-infra .anim { animation-duration: 12s; animation-iteration-count: infinite; animation-delay: var(--off); animation-timing-function: var(--ease); }
.tile.t-infra .st-infra .stack { transform: scale(.5) translate(-215px, 140px); }
.st-infra .plane:nth-child(2) { transform: translateZ(88px); } .st-infra .plane:nth-child(3) { transform: translateZ(176px); } .st-infra .plane:nth-child(4) { transform: translateZ(264px); }
/* paquete de luz que sube por la pila */
.st-infra .packet { position: absolute; left: 50%; top: 50%; width: 54px; height: 54px; margin: -27px 0 0 -27px; border-radius: 50%; background: radial-gradient(circle, #fff 0 16%, rgba(175,165,255,.95) 30%, rgba(143,132,245,0) 70%); opacity: 0; transform: translateZ(4px); }
.st-infra .packet.anim { animation-name: in-packet; }
@keyframes in-packet {
  0%, 2% { opacity: 0; transform: translateZ(4px) scale(.4); }
  5%, 21% { opacity: 1; transform: translateZ(4px) scale(1); }
  26%, 44% { opacity: 1; transform: translateZ(92px); }
  49%, 70% { opacity: 1; transform: translateZ(180px); }
  75%, 89% { opacity: 1; transform: translateZ(268px); }
  93%, 100% { opacity: 0; transform: translateZ(320px) scale(1.6); } }
.st-infra .plane.g1.anim { animation-name: in-g1, stack-breathe; animation-duration: 12s, 6s; }
.st-infra .plane.g2.anim { animation-name: in-g2, stack-breathe; animation-duration: 12s, 6s; animation-delay: var(--off), -.4s; }
.st-infra .plane.g3.anim { animation-name: in-g3, stack-breathe; animation-duration: 12s, 6s; animation-delay: var(--off), -.8s; }
.st-infra .plane.g4.anim { animation-name: in-g4, stack-breathe; animation-duration: 12s, 6s; animation-delay: var(--off), -1.2s; }
.st-infra .plane.anim { animation-timing-function: ease, ease-in-out; animation-iteration-count: infinite; }
@keyframes in-g1 { 0%, 4% { background: rgba(255,255,255,.07); } 8%, 20% { background: rgba(143,132,245,.5); } 26%, 100% { background: rgba(255,255,255,.07); } }
@keyframes in-g2 { 0%, 24% { background: rgba(255,255,255,.1); } 28%, 42% { background: rgba(143,132,245,.55); } 48%, 100% { background: rgba(255,255,255,.1); } }
@keyframes in-g3 { 0%, 46% { background: rgba(255,255,255,.13); } 50%, 68% { background: rgba(143,132,245,.6); } 74%, 100% { background: rgba(255,255,255,.13); } }
@keyframes in-g4 { 0%, 72% { box-shadow: 0 0 0 1px rgba(255,255,255,.2); } 76%, 90% { box-shadow: 0 0 0 1px rgba(255,255,255,.5), 0 0 70px 8px rgba(143,132,245,.8); } 95%, 100% { box-shadow: 0 0 0 1px rgba(255,255,255,.2); } }
/* etiquetas a la altura de cada capa */
.st-infra .tag { padding-left: 26px; position: absolute; left: var(--lx, calc(50% + 46px)); top: var(--y); translate: 0 -50%; display: grid; gap: 1px; padding-left: 22px; max-width: calc(100% - var(--lx, calc(50% + 46px)) - 14px); color: #c9ccd4; font-size: 13.5px; line-height: 1.35; opacity: .28; white-space: nowrap; }
.st-infra .tag::before { content: ""; position: absolute; left: 0; top: 50%; width: 16px; height: 1.5px; background: rgba(255,255,255,.35); }
.st-infra .tag b { font-weight: 600; color: #fff; font-size: 15px; }
.st-infra .tag span { color: #9ea3b0; }
.st-infra .tag.anim { animation-timing-function: ease; }
.st-infra .t1.anim { animation-name: in-t1; } .st-infra .t2.anim { animation-name: in-t2; } .st-infra .t3.anim { animation-name: in-t3; } .st-infra .t4.anim { animation-name: in-t4; }
@keyframes in-t1 { 0%, 4% { opacity: .28; transform: none; } 7%, 23% { opacity: 1; transform: translateX(4px); } 27%, 97% { opacity: .7; transform: none; } 100% { opacity: .28; } }
@keyframes in-t2 { 0%, 25% { opacity: .28; transform: none; } 28%, 45% { opacity: 1; transform: translateX(4px); } 49%, 97% { opacity: .7; transform: none; } 100% { opacity: .28; } }
@keyframes in-t3 { 0%, 48% { opacity: .28; transform: none; } 51%, 71% { opacity: 1; transform: translateX(4px); } 75%, 97% { opacity: .7; transform: none; } 100% { opacity: .28; } }
@keyframes in-t4 { 0%, 73% { opacity: .28; transform: none; } 76%, 97% { opacity: 1; transform: translateX(4px); } 100% { opacity: .28; } }
.t-infra .st-infra .t1 { --y: 250px; } .t-infra .st-infra .t2 { --y: 200px; } .t-infra .st-infra .t3 { --y: 146px; } .t-infra .st-infra .t4 { --y: 87px; }
/* leyenda de una linea para tarjetas estrechas */
.st-infra .cap { position: absolute; left: 16px; right: 16px; bottom: 14px; height: 20px; display: none; }
.st-infra .cap > span { position: absolute; inset: 0; text-align: center; color: #c9ccd4; font-size: 12px; opacity: 0; }
.st-infra .cap span b { color: #fff; font-weight: 600; }
.st-infra .cap .k1.anim { animation-name: in-k1; } .st-infra .cap .k2.anim { animation-name: in-k2; } .st-infra .cap .k3.anim { animation-name: in-k3; } .st-infra .cap .k4.anim { animation-name: in-k4; }
@keyframes in-k1 { 0%, 4% { opacity: 0; } 7%, 23% { opacity: 1; } 26%, 100% { opacity: 0; } }
@keyframes in-k2 { 0%, 25% { opacity: 0; } 28%, 45% { opacity: 1; } 48%, 100% { opacity: 0; } }
@keyframes in-k3 { 0%, 48% { opacity: 0; } 51%, 71% { opacity: 1; } 74%, 100% { opacity: 0; } }
@keyframes in-k4 { 0%, 73% { opacity: 0; } 76%, 85% { opacity: 1; } 87%, 100% { opacity: 0; } }
/* cierre: el sistema funcionando y el KPI */
.st-infra .stats { position: absolute; left: calc(50% + 46px); bottom: 24px; color: #7ee2b8; font-size: 12px; font-weight: 600; opacity: 0; }
.st-infra .stats.anim { animation-name: in-stats; }
@keyframes in-stats { 0%, 87% { opacity: 0; transform: translateY(-4px); } 90%, 98% { opacity: 1; transform: none; } 100% { opacity: 0; } }
.st-infra .kpi { position: absolute; left: 24px; bottom: 18px; display: inline-flex; align-items: center; gap: 6px; padding: 6px 12px; border-radius: 999px; background: rgba(47,191,134,.16); color: #7ee2b8; font-size: 12px; font-weight: 600; opacity: 0; white-space: nowrap; }
.st-infra .kpi.anim { animation-name: in-kpi; }
@keyframes in-kpi { 0%, 85% { opacity: 0; transform: translateY(6px); } 88%, 98% { opacity: 1; transform: none; } 100% { opacity: 0; } }
.st-infra .kpi s { opacity: .65; }
@container (max-width: 520px) {
  .tile.t-infra .st-infra .stack { transform: scale(.5) translateY(-36px); }
  .st-infra .tag { display: none; }
  .st-infra .cap { display: block; }
  .st-infra .kpi { left: 50%; translate: -50% 0; bottom: 40px; font-size: 11.5px; }
  .st-infra .stats { left: 24px; top: 42px; bottom: auto; font-size: 11.5px; }
}
@media (prefers-reduced-motion: reduce) {
  .st-infra .anim { animation: none !important; }
  .st-infra .packet { display: none; } .st-infra .tag { opacity: 1; }
}
/* misma historia en /soluciones (panel oscuro grande) */
.sol-art .st-infra .stack { transform: scale(.6) translate(-197px, 170px); }
.sol-art .st-infra .stack-label { z-index: 2; }
.sol-art .st-infra .t1 { --y: 365px; } .sol-art .st-infra .t2 { --y: 312px; } .sol-art .st-infra .t3 { --y: 258px; } .sol-art .st-infra .t4 { --y: 200px; }
.sol-art .st-infra .tag { --lx: calc(50% + 40px); }
.sol-art .st-infra .stats { left: calc(50% + 40px); }
@container (max-width: 520px) { .sol-art .st-infra .stack { transform: scale(.55) translateY(90px); } }
@container (max-width: 520px) { .sol-art .st-infra .stats { left: 24px; } }