/* ====================================================================
 * EL MURO DE CLIENTES — 37 logos en cinta
 * PHP: inc/clientes.php   ·   JS del boton: assets/js/tema.js (pausas)
 * ==================================================================== */

.cm-clientes {
  padding-block: clamp(40px, 6vw, 72px);
  overflow: hidden;
}

.cm-clientes__cabeza {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: clamp(20px, 3vw, 36px);
}

.cm-clientes__cabeza .cm-etiqueta { margin: 0; }

/* --- La cinta -------------------------------------------------------- */

.cm-clientes__pista {
  display: flex;
  width: max-content;
}

.cm-clientes__grupo {
  display: flex;
  align-items: center;
  gap: clamp(36px, 5vw, 72px);
  margin: 0;
  padding: 0 clamp(18px, 2.5vw, 36px);
  list-style: none;
}

.cm-clientes__casilla { flex: none; }

/*
 * A COLOR Y GRANDES — leccion repetida del dueno: «que esten mas grandes y que
 * no esten en blanco y negro». Nada de filter: grayscale aqui.
 */
/*
 * MAS GRANDES TODAVIA — segunda vuelta, pedida por el dueno.
 *
 * Estaban en 52-72 px y seguian leyendose como una cenefa decorativa. No lo
 * son: son los CLIENTES, y la mitad de estos logotipos llevan el nombre de la
 * marca escrito dentro (OGTAXEXPERT, Adriana Alarcon, Chiki Sweets). Por debajo
 * de ~90 px ese nombre no se lee, y un logotipo que no se lee no demuestra
 * nada.
 *
 * 96-140 px: casi el doble de superficie. La cinta sigue cabiendo porque es una
 * fila que se desplaza, no una rejilla que tenga que cerrar filas.
 */
.cm-clientes__logo {
  display: block;
  height: clamp(96px, 9vw, 140px);
  width: auto;
  max-width: 300px;
  object-fit: contain;
}

/* --- El movimiento --------------------------------------------------- */

@keyframes cm-clientes-pasar {
  from { transform: translateX(0); }
  /* La pista esta duplicada: la mitad exacta es una copia entera y el bucle
     no tiene costura. */
  to   { transform: translateX(-50%); }
}

@media (prefers-reduced-motion: no-preference) {
  /* Lenta: 37 logos son muchos metros de cinta; mas rapido, ninguno se ve. */
  .cm-clientes__pista { animation: cm-clientes-pasar 75s linear infinite; }

  /*
   * SOLO EL BOTON LA PARA. Nada de pausar por :hover: en una pantalla tactil
   * el navegador emula el hover al tocar y la cinta se quedaria congelada sin
   * forma visible de reanudarla.
   */
  .cm-cinta--quieta .cm-clientes__pista { animation-play-state: paused; }
}

/*
 * SIN MOVIMIENTO SI EL SISTEMA LO PIDE. La cinta quieta mide varias pantallas:
 * se convierte en una tira que se arrastra con el dedo y la copia se esconde
 * para no repetir los 37 dos veces.
 */
@media (prefers-reduced-motion: reduce) {
  .cm-clientes__pista {
    animation: none;
    width: auto;
    overflow-x: auto;
    scrollbar-width: none;
  }

  .cm-clientes__pista::-webkit-scrollbar { display: none; }

  .cm-clientes__grupo[aria-hidden='true'] { display: none; }

  .cm-clientes__pausa { display: none; }
}

/* --- El boton de pausa ----------------------------------------------- */

.cm-clientes__pausa {
  position: relative;
  flex: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  padding: 0;
  border: 1px solid rgba(255, 255, 255, .25);
  border-radius: 50%;
  background: transparent;
  color: var(--hueso, #F2EEE6);
  cursor: pointer;
}

.cm-clientes__pausa:hover { border-color: var(--ambar, #F7AD06); }

.cm-clientes__pausa:focus-visible {
  outline: 2px solid var(--ambar, #F7AD06);
  outline-offset: 2px;
}

/* Area pulsable de 44px sin engordar el dibujo. */
.cm-clientes__pausa::after {
  content: '';
  position: absolute;
  left: 50%;
  top: 50%;
  width: 44px;
  height: 44px;
  transform: translate(-50%, -50%);
}

.cm-clientes__icono-pausa,
.cm-clientes__icono-play {
  width: 12px;
  height: 12px;
  fill: currentColor;
}

.cm-clientes__icono-play { display: none; }
.cm-clientes__pausa[aria-pressed='true'] .cm-clientes__icono-pausa { display: none; }
.cm-clientes__pausa[aria-pressed='true'] .cm-clientes__icono-play { display: block; }


/*
 * LA ZONA PULSABLE DEL BOTÓN DE PAUSA, A 44.
 *
 * Medía 32x32 y es el único control de toda la cinta: quien quiera parar 37
 * logos en movimiento tiene que acertarle. El CÍRCULO VISIBLE se queda en 32
 * —dibujado con un ::before, para no engordar un botón que en la cabecera es
 * un detalle— y lo que crece es el área que responde al dedo.
 *
 * Va aquí y no en portada.css porque esta hoja se encola DESPUÉS y con la misma
 * especificidad ganaría la de aquí: el arreglo tiene que vivir junto a la regla
 * que corrige.
 */
@media (max-width: 900px) {
  .cm-clientes__pausa {
    width: 44px;
    height: 44px;
    border-color: transparent;
  }

  .cm-clientes__pausa::before {
    content: "";
    position: absolute;
    inset: 6px;
    border: 1px solid rgba(255, 255, 255, .25);
    border-radius: 50%;
    pointer-events: none;
  }

  .cm-clientes__pausa:hover::before { border-color: var(--ambar, #F7AD06); }
}