/* ====================================================================
 * EL CARRETE — la marquesina de fotos de la portada
 * PHP: inc/portafolio-mosaico.php (seccion_carrete) · JS: assets/js/carrete.js
 *
 * Sustituye al mosaico quieto en la portada (2026-08-26): el dueño pidió
 * «una marquesina con las fotos, como la de Latinos en Texas, que es
 * magnética y para con el dedo». La base es la misma mecánica que la cinta
 * de clientes —pista con el contenido DUPLICADO que viaja un -50 % y vuelve
 * a empezar donde nadie lo nota— con las fotos a altura fija y ancho libre:
 * la biblioteca es casi toda vertical (72 de 76), así que la fila queda
 * pareja sin recortar ninguna toma.
 *
 * El ARRASTRE no vive aquí: assets/js/carrete.js apaga esta animación y
 * mueve la pista él mismo. Este CSS es la versión sin JavaScript — y la
 * de siempre hasta que el guion la releva.
 * ==================================================================== */

.cm-carrete {
  padding-block: var(--e-7);
  background: var(--hueso, #F5F3EF);
  overflow: hidden;
}

.cm-carrete__cabeza {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--e-3);
  margin-bottom: var(--e-5);
}

/* La etiqueta de serie es ambar — sobre hueso son 2.1:1, el contraste
   prohibido por tokens.css. Sobre claro, el acento es el terracota. */
.cm-carrete .cm-etiqueta { color: var(--brasa-texto); }

.cm-carrete__titulo {
  margin: 0 0 var(--e-2);
  color: var(--tinta);
}

.cm-carrete__bajada {
  margin: 0;
  max-width: 52ch;
  color: var(--apagado);
}

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

/*
 * `--cinta-duracion` no es decorado: carrete.js la lee para calcular su
 * velocidad en píxeles por segundo, de modo que el relevo de CSS a
 * JavaScript no cambie el ritmo ni un pelo.
 */
.cm-carrete__cinta {
  --cinta-duracion: 100s;
  overflow: hidden;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 5%, #000 95%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 5%, #000 95%, transparent);
}

.cm-carrete__pista {
  display: flex;
  width: max-content;
  animation: cm-carrete-pasar var(--cinta-duracion) linear infinite;
}

.cm-cinta--quieta .cm-carrete__pista { animation-play-state: paused; }

/*
 * EL EMPALME INVISIBLE ES ARITMÉTICA: cada grupo lleva el mismo hueco a su
 * derecha (padding-right) que el que separa sus casillas por dentro. Así
 * grupo + hueco = exactamente la mitad de la pista, y el salto de -50 % a 0
 * cae sobre una imagen idéntica.
 */
.cm-carrete__grupo {
  display: flex;
  gap: var(--e-2);
  padding: 0 var(--e-2) 0 0;
  margin: 0;
  list-style: none;
}

.cm-carrete__casilla {
  flex: none;
  height: clamp(300px, 34vw, 460px);
}

.cm-carrete__foto {
  display: block;
  height: 100%;
  width: auto;
  object-fit: cover;
  /* El arrastre es de la cinta, no de la foto: sin fantasma nativo del
     navegador (carrete.js tambien lo previene) ni seleccion azul a mitad
     de gesto. */
  -webkit-user-drag: none;
  user-select: none;
}

@keyframes cm-carrete-pasar {
  to { transform: translateX(-50%); }
}

/* --- El botón de pausa (el contrato [data-cm-pausa] de tema.js) -------- */

.cm-carrete__pausa {
  position: relative;
  flex: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  padding: 0;
  border: 1.5px solid rgba(18, 17, 16, 0.3);
  border-radius: 50%;
  background: transparent;
  color: var(--tinta);
  cursor: pointer;
}

.cm-carrete__pausa:hover { border-color: var(--brasa-texto); }

.cm-carrete__pausa:focus-visible {
  outline: 3px solid var(--brasa-texto);
  outline-offset: 3px;
}

.cm-carrete__icono-pausa,
.cm-carrete__icono-play {
  width: 18px;
  height: 18px;
  fill: currentColor;
}

/*
 * CON !important, Y NO ES CAPRICHO — 2026-08-27. En produccion los dos
 * iconos salian a la vez: medido con el inspector, estas reglas aparecian
 * como aplicables y aun asi el <svg> computaba `display: block`, empujado
 * por una hoja de un plugin de Elementor que el hosting carga en todas las
 * paginas. El !important zanja la pelea sin depender de en que orden
 * cargue cada hoja.
 */
.cm-carrete__icono-play { display: none !important; }

.cm-carrete__pausa[aria-pressed='true'] .cm-carrete__icono-pausa { display: none !important; }
.cm-carrete__pausa[aria-pressed='true'] .cm-carrete__icono-play { display: block !important; }

/* --- Menos movimiento: fila quieta que se desplaza a mano -------------- */

@media (prefers-reduced-motion: reduce) {
  .cm-carrete__pista { animation: none; }

  .cm-carrete__cinta {
    overflow-x: auto;
    -webkit-mask-image: none;
    mask-image: none;
  }

  /* La copia del bucle sobra cuando no hay bucle. */
  .cm-carrete__grupo[aria-hidden='true'] { display: none; }

  /* Y no hay movimiento que pausar. */
  .cm-carrete__pausa { display: none; }
}

/* --- El teléfono ------------------------------------------------------- */

@media (max-width: 700px) {
  .cm-carrete { padding-block: var(--e-6); }
  .cm-carrete__casilla { height: clamp(240px, 62vw, 320px); }
}