/* Clientes: capa de comportamiento, sin modificar la maqueta existente. */
#clientes { display:flex; align-items:center; padding:60px 0; }
#clientes .contmax { width:100%; }
/* Dos SVG por cliente: gris por defecto, color al activarse. */
#clientes .logos .client-logo .client-logo-images {
  position:relative; display:block; width:78%; height:72%;
}
#clientes .logos .client-logo .client-logo-images img {
  position:absolute; inset:0; width:100%; height:100%;
  max-width:none; max-height:none; object-fit:contain;
  transition:opacity .65s ease;
}
#clientes .logos .client-logo .client-logo-gray { opacity:1; }
#clientes .logos .client-logo .client-logo-color { opacity:0; }
#clientes .logos .client-logo:hover .client-logo-gray,
#clientes .logos .client-logo.is-color .client-logo-gray,
#clientes .logos .client-logo:focus-within .client-logo-gray { opacity:0; }
#clientes .logos .client-logo:hover .client-logo-color,
#clientes .logos .client-logo.is-color .client-logo-color,
#clientes .logos .client-logo:focus-within .client-logo-color { opacity:1; }
/* Cinco columnas: la alternancia impar/par ya produce damero. */
@media (min-width:1200px) {
  #clientes .logos { grid-template-columns:repeat(5,minmax(0,1fr)); }
  #clientes .logos .client-logo:nth-child(odd) { background:#e0e0e0; }
  #clientes .logos .client-logo:nth-child(even) { background:#f5f5f5; }
  #clientes .logos .client-logo:nth-child(n+21) { display:none; }
}
/* Cuatro columnas: invertir el patrón en cada fila. */
@media (max-width:1199px) {
  #clientes .logos { grid-template-columns:repeat(4,minmax(0,1fr)); }
  #clientes .logos .client-logo { background:#f5f5f5; }
  #clientes .logos .client-logo:nth-child(8n+1),
  #clientes .logos .client-logo:nth-child(8n+3),
  #clientes .logos .client-logo:nth-child(8n+6),
  #clientes .logos .client-logo:nth-child(8n+8) { background:#e0e0e0; }
}
@media (min-width:990px) and (max-width:1199px) {
  #clientes .logos .client-logo:nth-child(n+21) { display:none; }
}
@media (max-width:989px) {
  #clientes .logos .client-logo:nth-child(n+13) { display:none; }
}
#clientes .logos .client-logo.is-changing img { opacity:0; }
#clientes .logos .client-logo.is-changing .client-logo-images { opacity:0; transition:opacity .45s ease; }
#clientes .logos .client-logo .client-logo-images { transition:opacity .45s ease; }
@media (prefers-reduced-motion:reduce) {
  #clientes .logos .client-logo .client-logo-images,
  #clientes .logos .client-logo .client-logo-images img { transition:none; }
}

/* Pantalla completa SOLO en mobile. Desktop conserva su diseño anterior. */
@media (max-width:989px) {
  #clientes { display:flex; align-items:stretch; padding:0; box-sizing:border-box; }
  #clientes .contmax {
    width:100%; min-height:calc(100svh - var(--head-h));
    display:flex; flex-direction:column; align-items:stretch;
    justify-content:center; box-sizing:border-box; padding-block:12px;
  }
  #clientes .testimonios { display:none !important; }
  #clientes .logos {
    width:100%; flex:0 0 auto; display:grid; gap:0;
    height:var(--clientes-grid-h,auto); min-width:0;
  }
  #clientes .logos .client-logo {
    min-width:0; min-height:0; display:flex;
    justify-content:center; align-items:center;
    overflow:hidden; box-sizing:border-box;
  }
  #clientes .logos .client-logo a {
    display:flex; align-items:center; justify-content:center;
    width:100%; height:100%; min-width:0; min-height:0;
  }
  #clientes .logos .client-logo .client-logo-images {
    width:78%; height:72%;
  }

  #clientes .contmax { min-height:calc(100svh - var(--head-h)); padding-block:12px; }
  #clientes .confian { margin-bottom:10px; }
  #clientes .logos {
    grid-template-columns:repeat(4,minmax(0,1fr));
    grid-template-rows:repeat(var(--clientes-filas,4),minmax(0,1fr));
  }
  /* Especificidad suficiente para reemplazar odd/even del CSS anterior. */
  #clientes .logos .client-logo:nth-child(n) { background:#f5f5f5; }
  #clientes .logos .client-logo:nth-child(8n+1),
  #clientes .logos .client-logo:nth-child(8n+3),
  #clientes .logos .client-logo:nth-child(8n+6),
  #clientes .logos .client-logo:nth-child(8n+8) { background:#e0e0e0; }
  #clientes .logos .client-logo:nth-child(n+13) { display:flex; }
  #clientes .logos .client-logo:nth-child(n+17) { display:none; }
  #clientes[data-clientes-filas="3"] .logos .client-logo:nth-child(n+13) { display:none; }
  #clientes[data-clientes-filas="5"] .logos .client-logo:nth-child(n+17) { display:flex; }
}
/* Recuperar la altura de las celdas en desktop */
@media (min-width: 990px) {
    #clientes .logos .client-logo {
        aspect-ratio: 1 / 1;
        display: flex;
        align-items: center;
        justify-content: center;
    }
}

/* Desktop: filas visibles definidas por altura útil, sin alterar el recambio JS. */
@media (min-width:990px) {
  #clientes .logos .client-logo:nth-child(n) { display:flex; }
  #clientes[data-clientes-filas="3"][style*="--clientes-columnas: 5"] .logos .client-logo:nth-child(n+16) { display:none; }
  #clientes[data-clientes-filas="3"][style*="--clientes-columnas: 4"] .logos .client-logo:nth-child(n+13) { display:none; }
  #clientes[data-clientes-filas="4"][style*="--clientes-columnas: 4"] .logos .client-logo:nth-child(n+17) { display:none; }
}
/* Desktop de poca altura: reducir los espacios sin afectar pantallas altas. */
@media (min-width:990px) and (max-height:850px) {
  #clientes { padding-block:20px; }
  #clientes .testimonios { min-width:0; }
  #clientes .testimonios .testimonio .int {
    box-sizing:border-box;
    max-width:min(490px,calc(100% - 90px));
    padding:38px 0 0 42px;
    background-size:65px auto;
    font-size:clamp(17px,1.3vw,20px);
    line-height:1.18;
  }
  #clientes .testimonios .testimonio .int .nombre {
    font-size:23px; margin:18px 0 6px;
  }
  #clientes .testimonios .testimonio .int .empresa {
    font-size:31px; padding:7px;
  }
  #clientes .testimonios .testimonio .int .puesto {
    font-size:13px; margin-top:6px;
  }
  #clientes .testimonios .slick-dots { bottom:-30px; }
  #clientes .testimonios .slick-dots button { width:16px; height:16px; }
}
@media (min-width:990px) and (max-height:680px) {
  #clientes .testimonios .testimonio .int {
    padding-top:28px; font-size:16px; line-height:1.13;
    background-size:52px auto;
  }
  #clientes .testimonios .testimonio .int .nombre { font-size:20px; margin-top:12px; }
  #clientes .testimonios .testimonio .int .empresa { font-size:27px; }
  #clientes .testimonios .slick-dots { bottom:-24px; }
}