/* --- CSS FINAL --- */

.clientes-loop {
  background: #ebe7dc;
  padding: 4rem 5rem;
  overflow: hidden;
}

.grid-clientes {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  grid-template-rows: repeat(2, 1fr);
  gap: 1rem;
  height: 60vh;
  align-items: center;
  justify-items: center;
  position: relative;
}

/* Logo grande destacado */
.logo-destacado {
  grid-column: 1 / span 2;
  grid-row: 1 / span 2;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1rem;
}

.logo-destacado img {
  width: 100%;
  height: auto;
  max-width: 350px;
  min-height: 350px;
  object-fit: contain;
  filter: grayscale(100%);
  transition: opacity 0.4s ease-in-out, transform 0.4s ease-in-out;
}

.logo-destacado img.is-changing {
  opacity: 0;
  transform: scale(0.95);
}

/* Contenedor de logos pequeños */
.logo-pos {
  transition: opacity 0.4s ease-in-out;
}
.logo-pos.is-moving {
  opacity: 0;
}

/* ✨ NUEVA CLASE para ocultar el div del logo que está destacado */
.logo-pos.is-hidden {
  display: none;
}
.logo-pos img {
  width: 90px;
  filter: grayscale(100%);
  opacity: 0.7;
  transition: transform 0.3s ease;
}
.logo-pos img:hover {
  opacity: 1;
  transform: scale(1.1);
}

/* ✨ LAS 8 POSICIONES VISIBLES DEL CÍRCULO */
.paso-1 { grid-column: 6; grid-row: 1; } /* Arriba derecha */
.paso-2 { grid-column: 5; grid-row: 1; }
.paso-3 { grid-column: 4; grid-row: 1; }
.paso-4 { grid-column: 3; grid-row: 1; } /* Arriba izquierda */
.paso-5 { grid-column: 3; grid-row: 2; } /* Abajo izquierda */
.paso-6 { grid-column: 4; grid-row: 2; }
.paso-7 { grid-column: 5; grid-row: 2; }
.paso-8 { grid-column: 6; grid-row: 2; } /* Abajo derecha */


/* --- Media Query para móviles (sin cambios) --- */
@media (max-width: 768px) {
  .grid-clientes {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.1rem;
    height: auto;
    margin: 0 !important;
    padding: 0 !important;
  }

  .logo-destacado {
    order: 2;
    padding: 0;
    margin: 0;
  }

  .logo-destacado img {
    width: 160px;
    margin: 0;
    padding: 0;
    min-height: auto; /* Anula el min-height de escritorio */
  }

  .logo-pos {
    display: none;
  }

  .paso-1,
  .paso-6 {
    display: flex;
    justify-content: center;
    width: 100%;
    margin: 0;
    padding: 0;
  }

  .paso-1 {
    order: 1;
    margin-bottom: 0.1rem;
  }

  .paso-6 {
    order: 3;
    margin-top: 0.1rem;
  }

  .logo-pos img {
    width: 40px;
    margin: 0;
    padding: 0;
    min-height: auto;
  }
}