/* =====================================================================
   CLIENTES — marquesina de logos entre Casos y Equipo
   ---------------------------------------------------------------------
   Sin titular en Unbounded, pero con el aire de una sección completa
   (el padding de .sec): pegada a la banda de Casos con alto reducido
   se leía como un apéndice de esa banda, no como prueba propia. Su
   único trabajo es decir "ya nos confiaron marcas grandes".

   Tres decisiones que sostienen el archivo:

   1 · SE MUEVE SOLA. Con siete logos y un rótulo al lado, la fila
       estática se pasaba de ancho y saltaba a un segundo renglón —
       justo lo que una franja de confianza no puede hacer. La cinta
       resuelve el ancho y además reconoce que la lista sigue: un riel
       que corre lee como "hay más", una fila cortada lee como error.

   2 · EL BUCLE ES GEOMÉTRICO, NO UN TIMER. La pista lleva DOS filas
       idénticas, cada una con el mismo padding-right. Trasladar la
       pista -50% deja la fila 2 exactamente donde estaba la fila 1, así
       que el salto del keyframe es invisible. Si se agrega o se saca un
       logo hay que tocarlo en las DOS filas o el empalme se rompe.

   3 · ALTO POR LOGO, NO COMÚN (--h). Los siete PNG vienen a 96px de
       alto pero con relaciones de aspecto que van de 1:1 (Bayer) a
       5.7:1 (Santander). Igualar píxeles hace que la marca cuadrada se
       vea diminuta al lado de la denominativa. Lo que se iguala es el
       peso óptico, y por eso cada logo trae su --h en el marcado.
   ===================================================================== */

/* Costura con Casos. El selector .sec + .sec no alcanza acá porque
   .casos tiene clase propia y no es .sec: sin esta regla el salto de
   --ground-deep a --ground-base queda como un corte seco entre dos
   azules casi iguales, que lee como error de render. */
.casos + .sec:not(.cta-band){box-shadow:inset 0 1px 0 rgba(255,255,255,.055)}

.clients{
  /* padding-block: el de .sec (css/v2.css). */
  --clients-scale:1.4;                    /* sobre el --h de cada logo */
  --clients-gap:clamp(56px, 6.5vw, 112px); /* separación entre logos */
  --clients-dur:38s;                      /* una vuelta completa */
}

/* La cabecera es .sec__head (css/v2.css), como todas.

   Antes el rótulo iba al costado de la cinta, en una columna de 16ch:
   quedaba en cinco renglones cortados y era la única sección de la
   página con el encabezado a la izquierda. Sigue siendo un respiro —
   por eso lleva píldora y una línea, sin declaración en Unbounded —
   pero respira sobre el mismo eje que el resto. */
.clients__head{margin-bottom:clamp(40px, 4.6vw, 64px)}
.clients__head .lead{color:var(--paper-mute)}

/* Más ancha que el contenedor (1200px), pero no de borde a borde. */
.clients__inner{
  display:flex;align-items:center;
  max-width:var(--container-wide);margin-inline:auto;
  padding-inline:var(--container-pad);
}

/* La ventana. min-width:0 es obligatorio: sin él un hijo flex con
   contenido más ancho que la caja se niega a encogerse y la cinta
   empuja el rótulo fuera de pantalla. */
.clients__viewport{
  flex:1 1 auto;min-width:0;
  overflow:hidden;
  /* Los bordes se desvanecen en vez de cortar. Un logo cortado al medio
     por un borde duro lee como bug de layout, no como movimiento. */
  -webkit-mask-image:linear-gradient(90deg, transparent 0, #000 10%, #000 90%, transparent 100%);
          mask-image:linear-gradient(90deg, transparent 0, #000 10%, #000 90%, transparent 100%);
}

.clients__track{
  display:flex;width:max-content;
  animation:clients-slide var(--clients-dur) linear infinite;
  will-change:transform;
}
/* Cortesía mínima: si alguien quiere mirar un logo, la cinta lo espera. */
.clients__viewport:hover .clients__track{animation-play-state:paused}

.clients__row{
  flex:0 0 auto;
  display:flex;align-items:center;
  gap:var(--clients-gap);
  padding-right:var(--clients-gap);
}

.clients__row img{
  height:calc(var(--h, 32px) * var(--clients-scale));width:auto;
  /* Normalizados a blanco: si no, cada marca mete su propia paleta y la
     franja deja de leerse como una unidad. */
  filter:brightness(0) invert(1);
  opacity:.6;
  transition:opacity 220ms var(--ease-standard);
}
.clients__row img:hover{opacity:.95}

@keyframes clients-slide{
  from{transform:translate3d(0,0,0)}
  to  {transform:translate3d(-50%,0,0)}
}

/* =====================================================================
   RESPONSIVE
   ===================================================================== */
@media (max-width:860px){
  .clients__viewport{width:100%}
  .clients{--clients-scale:1.1;--clients-gap:clamp(40px, 8vw, 64px);--clients-dur:26s}
}

/* =====================================================================
   ACCESIBILIDAD
   ===================================================================== */
@media (prefers-reduced-motion: reduce){
  /* Sin movimiento la cinta vuelve a ser una fila: se apaga la copia,
     se saca el ancho de contenido y los logos se reparten y envuelven.
     Dejar la pista quieta mostraría siete logos y medio cortados. */
  .clients__track{animation:none;width:100%}
  .clients__row[aria-hidden="true"]{display:none}
  .clients__row{
    flex:1 1 auto;flex-wrap:wrap;justify-content:space-between;
    padding-right:0;gap:clamp(20px, 2.6vw, 36px);
  }
  .clients__viewport{-webkit-mask-image:none;mask-image:none}
}
@media (prefers-contrast: more){
  .clients__row img{opacity:.85}
}