/* ================================================================
   LOGOS SLIDER  (modo automático cuando hay > 6 logos)
   ================================================================ */

.logos-slider {
  overflow: hidden;
  container-type: inline-size;
  touch-action: pan-y;
  /* Fade en los bordes para ocultar el corte del loop */
  -webkit-mask-image: linear-gradient(
    to right,
    transparent 0%,
    #000 7%,
    #000 93%,
    transparent 100%
  );
  mask-image: linear-gradient(
    to right,
    transparent 0%,
    #000 7%,
    #000 93%,
    transparent 100%
  );
}

/* Override: dentro del slider la grilla se convierte en flex track animado */
.logos-slider .logos-grid {
  display:       flex;
  width:         max-content;
  background:    transparent;
  border:        none;
  border-radius: 0;
  gap:           0;
  animation:     logos-scroll var(--logos-duration, 30s) linear infinite;
  will-change:   transform;
}

@media (hover: hover) {
  .logos-slider .logos-grid:hover {
    animation-play-state: paused;
  }
}

/* Modo JS: el transform lo controla logos-slider.js (auto + arrastre) */
.logos-slider--js {
  cursor: grab;
  user-select: none;
  -webkit-user-select: none;
}

.logos-slider--js.is-dragging {
  cursor: grabbing;
}

.logos-slider--js .logos-grid {
  animation: none;
}

.logos-slider--js .logos-grid__img {
  -webkit-user-drag: none;
}

.logos-slider .logos-grid__item {
  /* Sin border ni gap: todos los items tienen exactamente el mismo ancho
     para que translateX(-50%) aterrice sin salto. El separador visual
     usa inset box-shadow, que no afecta al layout. */
  flex:       0 0 calc(100cqw / var(--logos-visible, 6));
  box-shadow: inset -1px 0 0 rgba(21, 7, 31, 0.14);
}

.logos-slider .logos-grid__img {
  max-width:  88%;
  max-height: clamp(5.5rem, 8vw, 8rem);
}

@keyframes logos-scroll {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}

/* Móvil: 2 logos visibles siempre */
@container (max-width: 640px) {
  .logos-slider .logos-grid__item {
    flex: 0 0 calc(100cqw / 2);
  }
}

/* Respeto por prefers-reduced-motion */
@media (prefers-reduced-motion: reduce) {
  .logos-slider .logos-grid {
    animation: none;
  }
}


/* ================================================================
   LOGOS GRID ESTÁTICA  (≤ 6 logos, sin slider)
   ================================================================ */

.logos-grid {
  --logos-cols:    5;
  --logos-cell-bg: var(--nexo-bg);
  --logos-line:    rgba(21, 7, 31, 0.14);

  display:               grid;
  grid-template-columns: repeat(var(--logos-cols), minmax(0, 1fr));
  gap:                   1px;
  background:            var(--logos-line);
  border:                1px solid var(--logos-line);
  border-radius:         6px;
  overflow:              hidden;
}

.logos-grid__item {
  display:     grid;
  place-items: center;
  min-height:  clamp(6.5rem, 8vw, 8.5rem);
  padding:     clamp(var(--space-3), 1.4vw, var(--space-5));
  background:  var(--logos-cell-bg);
}

.logos-grid__link {
  display:     grid;
  place-items: center;
  width:       100%;
  height:      100%;
}

.logos-grid__img {
  width:      auto;
  height:     auto;
  max-width:  82%;
  max-height: clamp(4rem, 5.5vw, 6rem);
  object-fit: contain;
}

/* ================================================================
   LOGOS GRID ALIADOS  (variante siempre estática, filas que envuelven)
   ================================================================ */

.logos-grid--aliados {
  --logos-cell-bg: transparent;
  --logos-line:    #E6E6E6;

  gap:           0;
  background:    transparent;
  border:        0;
  border-radius: 0;
}

@media (min-width: 641px) {
  .logos-grid--aliados .logos-grid__item {
    --line-top:    inset  0    0   0 0 transparent;
    --line-left:   inset  0    0   0 0 transparent;
    --line-right:  inset -1px  0   0 0 var(--logos-line);
    --line-bottom: inset  0   -1px 0 0 var(--logos-line);

    box-shadow: var(--line-top), var(--line-left), var(--line-right), var(--line-bottom);
  }
}

@media (min-width: 641px) and (max-width: 1024px) {
  .logos-grid--aliados {
    grid-template-columns: repeat(3, 1fr);
  }
  .logos-grid--aliados .logos-grid__item:nth-child(-n+3) {
    --line-top: inset 0 1px 0 0 var(--logos-line);
  }
  .logos-grid--aliados .logos-grid__item:nth-child(3n+1) {
    --line-left: inset 1px 0 0 0 var(--logos-line);
  }
}

@media (min-width: 1025px) {
  .logos-grid--aliados {
    grid-template-columns: repeat(5, 1fr);
  }
  .logos-grid--aliados .logos-grid__item:nth-child(-n+5) {
    --line-top: inset 0 1px 0 0 var(--logos-line);
  }
  .logos-grid--aliados .logos-grid__item:nth-child(5n+1) {
    --line-left: inset 1px 0 0 0 var(--logos-line);
  }
}


@media (max-width: 640px) {
  /* Móvil: dos columnas. Sin gap; cada celda dibuja sus propias líneas con
     box-shadow. Quitamos el borde del contenedor: si no, su rectángulo
     dibujaría el borde derecho/inferior alrededor de la celda sobrante
     (recuento impar). Sin ese borde, la celda vacía no tiene elemento y por
     tanto no recibe ninguna línea: queda sin borde, sólo con el fondo. El
     resto de celdas dibujan sus bordes externos (derecha/abajo) por sí mismas. */
  .logos-grid {
    grid-template-columns: repeat(2, 1fr);
    gap:           0;
    background:    var(--logos-cell-bg);
    border:        0;
    border-radius: 0;
  }
  /* Para que las líneas no se desalineen 1px, TODAS se dibujan igual: cada
     horizontal es el borde inferior de su celda, cada vertical el borde derecho.
     Así el divisor de una fila queda a la misma altura en ambas columnas (lo
     dibuja siempre la celda de arriba, no a veces la de abajo). Cada lado es una
     variable independiente para que las reglas no se pisen entre sí. */
  .logos-grid__item {
    --line-top:    inset  0    0   0 0 transparent;
    --line-left:   inset  0    0   0 0 transparent;
    --line-right:  inset -1px  0   0 0 var(--logos-line);
    --line-bottom: inset  0   -1px 0 0 var(--logos-line);

    min-height: clamp(6rem, 30vw, 8rem);
    box-shadow: var(--line-top), var(--line-left), var(--line-right), var(--line-bottom);
  }
  /* Primera fila: borde superior de la grilla. */
  .logos-grid__item:nth-child(-n+2) {
    --line-top: inset 0 1px 0 0 var(--logos-line);
  }
  /* Primera columna: borde izquierdo de la grilla. */
  .logos-grid__item:nth-child(odd) {
    --line-left: inset 1px 0 0 0 var(--logos-line);
  }
}