/* ==========================================================================
   Clientes y resultados: tira de logos en movimiento, cifras, certificaciones y partners.
   ========================================================================== */

.proof {
  padding-block: 0 clamp(72px, 9vw, 120px);
}
.marquee {
  overflow: hidden;
  -webkit-mask: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
  mask: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
}
.m-track {
  display: flex;
  align-items: center;
  gap: 56px;
  width: max-content;
  animation: marq 48s linear infinite;
}
.m-track img {
  height: 30px;
  width: auto;
  max-width: 132px;
  object-fit: contain;
  filter: var(--logo-filter);
  opacity: var(--logo-op);
}
@media (hover: hover) {
  .marquee:hover .m-track {
    animation-play-state: paused;
  }
}
.stat b {
  display: block;
  color: var(--brand-lime);
  font: 700 clamp(2.25rem, 1.4rem + 2.8vw, 3.5rem)/1 var(--f-display);
  letter-spacing: -0.03em;
  font-variant-numeric: tabular-nums;
}
.creds {
  display: grid;
  gap: 10px;
  margin-top: 28px;
  padding-top: 17px;
  border-top: 1px solid var(--line);
}
.creds-row {
  grid-template-columns: 132px minmax(0, 1fr);
}
.creds-h {
  font: 500 0.6875rem/1.3 var(--f-body);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ink-3);
  margin: 0;
}
.cred svg {
  width: 16px;
  height: 16px;
  flex: none;
  fill: none;
  stroke: var(--ink-3);
  stroke-width: 1.3;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.cred b {
  display: block;
  font: 600 0.75rem/1.2 var(--f-display);
  color: var(--ink);
}
.cred small {
  display: block;
  font-size: 0.625rem;
  color: var(--ink-3);
  margin-top: 1px;
}
@media (max-width: 760px) {
  .creds-row {
    grid-template-columns: minmax(0, 1fr);
  }
}
.cred-gp a {
  display: block;
  border-radius: 6px;
  transition: transform 200ms var(--ease-out);
}
.cred-gp a:hover {
  transform: translateY(-2px);
}
.cred .cl-mk {
  width: 14px;
  height: 14px;
  flex: none;
  fill: var(--ink);
  stroke: none;
}
.cred .cl-wm {
  height: 14px;
  width: 70px;
  flex: none;
  color: var(--ink);
  stroke: none;
}
.cl-wm path:not([fill]),
.cl-sg path {
  fill: currentColor;
}
.cred .cl-ci {
  height: 12px;
  width: 83px;
}
.creds-list {
  gap: 7px 22px;
  display: flex;
  padding: 0;
  margin: 0;
  list-style: none;
  flex-wrap: wrap;
  align-items: center;
}
.cred-gp img {
  height: auto;
  width: 49px;
  display: block;
  filter: grayscale(1) sepia(0.18) hue-rotate(185deg) saturate(1.4) brightness(0.96);
  opacity: 0.85;
  transition:
    filter 300ms ease,
    opacity 300ms ease;
}
.cred-gp a:hover img,
.cred-gp a:focus-visible img {
  filter: none;
  opacity: 1;
}
.stats {
  padding: clamp(28px, 4vw, 44px) clamp(20px, 3vw, 40px);
  margin-top: clamp(56px, 7vw, 88px);
  border-radius: var(--r-card);
  background: var(--panel);
  gap: 32px;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  display: grid;
  text-align: center;
}
.stat p {
  color: var(--panel-muted);
  margin-top: 14px;
  max-width: 26ch;
  margin-inline: auto;
}
.creds-row {
  gap: 6px 11px;
  align-items: center;
  display: grid;
  grid-template-columns: auto auto;
  justify-content: center;
}
@media (max-width: 760px) {
  .creds-row {
    grid-template-columns: minmax(0, 1fr);
    justify-items: center;
    text-align: center;
  }
  .creds-list {
    gap: 10px 20px;
    justify-content: center;
  }
}
.cred {
  gap: 6px;
  align-items: center;
  display: flex;
  transition: transform 200ms var(--ease-out);
}
.cred .cl-mk,
.cred .cl-wm {
  transition:
    fill 250ms ease,
    color 250ms ease,
    filter 250ms ease;
}
.cl-sg .sg-ic {
  fill: currentColor;
  transition: fill 250ms ease;
}
@media (hover: hover) {
  .cred:hover {
    transform: translateY(-2px);
  }
  .cr-tt:hover .cl-mk {
    fill: #000;
    filter: drop-shadow(-1.2px -1px 0 #25f4ee) drop-shadow(1.2px 1px 0 #fe2c55);
  }
  .cr-mt:hover .cl-mk {
    fill: #0866ff;
  }
  .cr-hs:hover .cl-mk {
    fill: #ff5c35;
  }
  .cr-sg:hover .sg-ic {
    fill: #3088f4;
  }
  .cr-ci:hover .cl-ci {
    color: #7131ff;
  }
}
@media (max-width: 640px) {
  .stats {
    grid-template-columns: minmax(0, 1fr);
    gap: 28px;
  }
}
@media (prefers-reduced-motion: reduce) {
  .m-track {
    flex-wrap: wrap;
    width: auto;
    justify-content: center;
    gap: 28px 48px;
  }
  .m-track [aria-hidden='true'] {
    display: none;
  }
  .marquee {
    -webkit-mask: none;
    mask: none;
  }
}
@keyframes marq {
  to {
    transform: translateX(calc(-50% - 28px));
  }
}