/* ===========================
   CLIENTES: NUEVAS CARDS (aislado)
   No rompe .card global
=========================== */

.clients-grid{
  align-items: stretch;
}

/* Card efecto borde animado */
.client-card{
  position: relative;
  overflow: hidden;
  border-radius: 20px;

  /* sobreescribe la card vieja solo aquí */
  background: transparent;
  border: 0;
  padding: 0;

  min-height: 260px; /* para que no se vean “chiquitas” */
  box-shadow: 0 18px 60px rgba(0,0,0,.45);
}

/* Barra giratoria (como tu ref) */
.client-card::before{
  content:"";
  position:absolute;
  width: 140px;
  height: 170%;
  left: 50%;
  top: 50%;
  transform: translate(-50%,-50%);
  background-image: linear-gradient(180deg, rgb(0, 183, 255), rgb(255, 48, 255));
  animation: clientRot 3.2s linear infinite;
  opacity: .95;
}

/* Fondo interior (tapa) */
.client-card::after{
  content:"";
  position:absolute;
  inset: 3px;
  border-radius: 16px;
  background: #07182E; /* tu color */
  border: 1px solid rgba(255,255,255,.10);
}

/* Contenido */
.client-card__inner{
  position: relative;
  z-index: 2;
  height: 100%;
  padding: 18px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

/* Textos */
.client-title{
  margin: 2px 0 0;
  font-weight: 950;
  letter-spacing: .2px;
  font-size: 1.05rem;

  background: linear-gradient(90deg, var(--blue), var(--purple), var(--pink), var(--blue));
  background-size: 250% 100%;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  text-shadow: 0 0 18px rgba(74,163,255,.18), 0 0 26px rgba(255,79,216,.12);
  animation: neonMove 4.5s ease-in-out infinite;
}

.client-desc{
  margin: 0;
  color: rgba(234,240,255,.75);
  line-height: 1.55;
  font-size: .98rem;
}

/* Badge más limpio */
.client-badge{
  background: rgba(0,0,0,.18);
  border: 1px solid rgba(255,255,255,.14);
}

/* Botones al fondo */
.client-actions{
  margin-top: auto;
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}

.client-btn{
  padding: 11px 15px;
}

/* Animación */
@keyframes clientRot{
  from { transform: translate(-50%,-50%) rotate(0deg); }
  to   { transform: translate(-50%,-50%) rotate(360deg); }
}

/* Mobile: que se vea grande y respirable */
@media (max-width: 980px){
  .client-card{
    min-height: 240px;
  }
}

/* ====== CLIENTES: aire antes del footer ====== */
.section{
  padding-bottom: 110px; /* súbele/bájale a gusto */
}

/* por si algún panel o grid es el último y queda pegado */
.section .clients-grid{
  margin-bottom: 26px;
}

/* opcional: separa el footer sí o sí */
.footer{
  margin-top: 24px;
}