/* Animación del CRM y el seguimiento (cabecera de implementación de CRM), 2 oct 2026 */
.crmf{position:relative;width:100%;max-width:560px;margin-left:auto;border-radius:28px;padding:22px 22px 18px;color:#fff;
  background:linear-gradient(135deg,rgba(255,255,255,.11),rgba(255,255,255,.03));border:1px solid rgba(255,255,255,.16);
  -webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);box-shadow:inset 0 1px 0 rgba(255,255,255,.18),0 30px 60px rgba(0,0,0,.35)}
.crmf__top{display:flex;align-items:center;justify-content:space-between;margin-bottom:16px;font-size:13px;color:rgba(255,255,255,.7)}
.crmf__src{display:inline-flex;align-items:center;gap:8px;padding:6px 12px;border-radius:999px;background:rgba(193,215,46,.14);color:#C1D72E;font-weight:700;transition:opacity .3s}
.crmf__src i{width:8px;height:8px;border-radius:50%;background:#C1D72E;box-shadow:0 0 0 0 rgba(193,215,46,.6);animation:crmPing 1.6s infinite}
@keyframes crmPing{0%{box-shadow:0 0 0 0 rgba(193,215,46,.6)}100%{box-shadow:0 0 0 10px rgba(193,215,46,0)}}
.crmf__cols{position:relative;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px;height:150px}
.crmf__col{border-radius:16px;background:rgba(255,255,255,.05);border:1px dashed rgba(255,255,255,.14);padding:10px 8px;transition:background .4s,border-color .4s}
.crmf__col.is-on{background:rgba(193,215,46,.10);border:1px solid rgba(193,215,46,.45)}
.crmf__col span{display:block;font-size:11.5px;font-weight:700;letter-spacing:.02em;color:rgba(255,255,255,.75)}
.crmf__col small{display:block;font-size:11px;color:rgba(255,255,255,.45);margin-top:2px}
.crmf__card{position:absolute;top:52px;left:0;width:calc(25% - 6px);padding:9px 10px;border-radius:12px;background:#fff;color:#001744;
  box-shadow:0 12px 26px rgba(0,0,0,.35);transition:transform .9s cubic-bezier(.65,0,.35,1);font-size:12px;line-height:1.3}
.crmf__card b{display:block;font-size:13px}
.crmf__card em{font-style:normal;display:inline-block;margin-top:4px;padding:2px 7px;border-radius:999px;background:#EEF2DA;color:#4b5a00;font-size:10.5px;font-weight:700}
.crmf__log{list-style:none;margin:16px 0 0;padding:0;display:flex;flex-direction:column;gap:7px;min-height:212px}
.crmf__log li{display:grid;grid-template-columns:54px 22px 1fr;align-items:center;font-size:13.5px;opacity:0;transform:translateY(8px);transition:opacity .4s,transform .4s}
.crmf__log li.is-on{opacity:1;transform:none}
.crmf__log time{font-size:11.5px;color:rgba(255,255,255,.55);font-variant-numeric:tabular-nums}
.crmf__log .ok{width:16px;height:16px;border-radius:50%;background:#C1D72E;position:relative}
.crmf__log .ok::after{content:"";position:absolute;left:5px;top:3px;width:4px;height:8px;border:solid #001744;border-width:0 2px 2px 0;transform:rotate(45deg)}
.crmf__note{margin:12px 0 0;font-size:12px;color:rgba(255,255,255,.5)}
@media (max-width:900px){.crmf{margin:0 auto}.crmf__cols{height:140px}.crmf__log li{font-size:12.5px}}
@media (prefers-reduced-motion:reduce){.crmf__card,.crmf__log li{transition:none}}
@media (max-width:480px){.crmf__cols{height:175px}}