/* ====================================================================
 * EL DIRECTORIO COMO DOS MARQUESINAS CRUZADAS
 * PHP: inc/cintas-directorio.php
 * ==================================================================== */

/*
 * Dos filas de fichas desplazandose en sentidos opuestos: negocios hacia un
 * lado, ayuda gratuita hacia el otro. La lista se imprime DOS VECES y la
 * animacion recorre exactamente la mitad, asi que el bucle no tiene costura.
 *
 * LA SECCION VA SOBRE FONDO CLARO. Se monto primero sobre el fondo noche y el
 * conjunto se leia como una franja oscura de media pantalla: entre el video del
 * hero, esta seccion y la galeria, la portada acumulaba tres bloques oscuros
 * casi seguidos. Sobre claro, las tarjetas negras destacan mas y la seccion
 * respira con el resto.
 */

.lt-cintas {
  /* A sangre: las filas tienen que salirse por los dos lados o se leen como una
     tira metida en una caja. */
  overflow: hidden;
  padding-block: clamp(48px, 7vw, 84px);
}

.lt-cintas__cabeza { margin-bottom: var(--e-4, 32px); }

.lt-cintas__titulo {
  margin: 6px 0 0;
  font-family: var(--fuente-titulo);
  font-weight: var(--peso-titulo, 700);
  font-size: clamp(2rem, 4vw, 3.2rem);
  line-height: 1.05;
  color: var(--tinta);
  max-width: 16ch;
}

.lt-cintas__bajada {
  margin: 12px 0 0;
  max-width: 54ch;
  color: var(--tinta-suave, #55617A);
  line-height: 1.6;
}

.lt-cintas__acciones {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--e-3, 20px);
  flex-wrap: wrap;
  margin-top: var(--e-3, 20px);
}

.lt-cintas__todo {
  color: var(--azul, #1D4ED8);
  font-weight: var(--peso-medio, 600);
  letter-spacing: .04em;
  text-transform: uppercase;
  font-size: var(--fs-chico, .875rem);
}

/* --- Las filas ----------------------------------------------------- */

.lt-cintas__fila {
  display: flex;
  width: max-content;
  gap: var(--e-3, 20px);
}

.lt-cintas__fila + .lt-cintas__fila { margin-top: var(--e-3, 20px); }

.lt-cintas__pista {
  display: flex;
  gap: var(--e-3, 20px);
  margin: 0;
  padding: 0;
  list-style: none;
}

.lt-cintas__casilla {
  flex: none;
  /* Ancho fijo: en una fila que se desplaza, tarjetas de anchos distintos hacen
     que el ritmo del movimiento parezca irregular aunque la velocidad sea
     constante. */
  width: clamp(270px, 26vw, 330px);
}

/*
 * -------------------------------------------------------------------------
 * DOS PIELES: NEGOCIOS EN NEGRO, AYUDA EN BLANCO
 * -------------------------------------------------------------------------
 * No es decoracion: es la distincion que este sitio no puede permitirse perder.
 * Un negocio se paga y una ayuda es gratuita, y en esta comunidad mucha gente
 * busca justo lo segundo. Con dos filas del mismo color habria que leer cada
 * tarjeta para saber cual es cual.
 *
 * El color hace ese trabajo de un vistazo y el sentido del movimiento lo
 * refuerza. Pero NO es la unica senal: cada ficha de ayuda lleva ademas su sello
 * «Gratis» escrito. Si el color fuera lo unico, quien no distingue colores se
 * quedaria sin la informacion — que es exactamente lo que prohibe el punto 1.4.1
 * de la norma.
 *
 * SE ESTILA POR ANCESTRO —`.lt-cintas__fila--negocios .lt-tarjeta`— y no con una
 * clase nueva en el marcado: la misma tarjeta se usa en cinco sitios mas y no
 * puede depender de quien la pinta. Aqui cambia de piel; en el archivo del
 * directorio sigue siendo la de siempre.
 */

.lt-cintas .lt-tarjeta {
  height: 100%;
  border-radius: var(--radio, 12px);
  transition: border-color 180ms ease, transform 180ms ease, background 180ms ease;
}

.lt-cintas .lt-tarjeta:hover { transform: translateY(-3px); }

/* --- Negocios: negro ----------------------------------------------- */

.lt-cintas__fila--negocios .lt-tarjeta {
  background: #0B1220;
  border: 1px solid rgba(255, 255, 255, .10);
}

.lt-cintas__fila--negocios .lt-tarjeta:hover {
  background: #131C31;
  border-color: var(--cielo, #4EA8DE);
}

.lt-cintas__fila--negocios .lt-tarjeta__titulo,
.lt-cintas__fila--negocios .lt-tarjeta__titulo a { color: var(--blanco, #FFF); }

.lt-cintas__fila--negocios .lt-tarjeta__datos,
.lt-cintas__fila--negocios .lt-tarjeta__texto,
.lt-cintas__fila--negocios .lt-tarjeta p { color: rgba(255, 255, 255, .70); }

.lt-cintas__fila--negocios .lt-sello {
  background: rgba(255, 255, 255, .10);
  color: rgba(255, 255, 255, .88);
  border-color: rgba(255, 255, 255, .18);
}

.lt-cintas__fila--negocios .lt-tarjeta__simbolo { color: var(--cielo, #4EA8DE); }

/*
 * Los botones, azul claro con tinta oscura: es el par de mayor contraste de la
 * paleta y el unico que aguanta sobre negro. El azul de marca sobre #0B1220 da
 * menos de 3:1 y se lee apagado, como un boton desactivado.
 */
.lt-cintas__fila--negocios .lt-btn--principal,
.lt-cintas__fila--negocios .lt-btn--whatsapp {
  background: var(--cielo, #4EA8DE);
  border-color: var(--cielo, #4EA8DE);
  color: #0B1220;
}

.lt-cintas__fila--negocios .lt-btn--principal:hover,
.lt-cintas__fila--negocios .lt-btn--whatsapp:hover {
  background: var(--blanco, #FFF);
  border-color: var(--blanco, #FFF);
}

.lt-cintas__fila--negocios .lt-btn:not(.lt-btn--principal):not(.lt-btn--whatsapp) {
  border-color: rgba(255, 255, 255, .30);
  color: var(--blanco, #FFF);
  background: transparent;
}

/* --- Ayuda: blanco con detalles azules ----------------------------- */

.lt-cintas__fila--ayudas .lt-tarjeta {
  position: relative;
  overflow: hidden;
  background: var(--blanco, #FFF);
  border: 1px solid rgba(11, 18, 32, .10);
}

.lt-cintas__fila--ayudas .lt-tarjeta:hover {
  border-color: var(--cielo, #4EA8DE);
  box-shadow: 0 10px 30px rgba(4, 10, 24, .10);
}

/* El filete superior en azul: es «el detalle azul», la senal de que esta fila
   es otra cosa, sin gritar. */
.lt-cintas__fila--ayudas .lt-tarjeta::before {
  content: '';
  position: absolute;
  inset: 0 0 auto;
  height: 3px;
  background: var(--cielo, #4EA8DE);
}

.lt-cintas__fila--ayudas .lt-tarjeta__titulo,
.lt-cintas__fila--ayudas .lt-tarjeta__titulo a { color: var(--tinta); }

.lt-cintas__fila--ayudas .lt-tarjeta__simbolo { color: var(--azul, #1D4ED8); }

/* El sello «Gratis» en azul: es lo que esta fila viene a decir. */
.lt-cintas__fila--ayudas .lt-sello--gratis {
  background: var(--cielo, #4EA8DE);
  border-color: var(--cielo, #4EA8DE);
  color: #0B1220;
}

/*
 * EL PICTOGRAMA DE LA CATEGORIA, VISIBLE.
 *
 * En la tarjeta normal vive al fondo al 6 % — es una marca de agua. Aqui sube a
 * primer plano: dice de que va la ficha antes de que nadie lea la categoria.
 */
.lt-cintas .lt-tarjeta__simbolo {
  position: static;
  width: 30px;
  height: 30px;
  margin-bottom: 10px;
  opacity: .9;
}

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

/*
 * `-50%` y no otro valor: la pista esta duplicada, asi que la mitad del ancho
 * total es exactamente una copia entera. Cualquier otro numero deja la costura
 * a la vista.
 */
@keyframes lt-cintas-ida {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}

@keyframes lt-cintas-vuelta {
  from { transform: translateX(-50%); }
  to   { transform: translateX(0); }
}

@media (prefers-reduced-motion: no-preference) {
  /* Lentas a proposito: dentro hay telefonos que la gente tiene que poder leer.
     Ritmos distintos para que las dos filas no vuelvan a coincidir nunca. */
  .lt-cintas__fila--ida    { animation: lt-cintas-ida 90s linear infinite; }
  .lt-cintas__fila--vuelta { animation: lt-cintas-vuelta 105s linear infinite; }

  /*
   * NO SE PARAN AL TOCARLAS. Y ESTO SE MONTO AL REVES PRIMERO.
   *
   * La version anterior las paraba con `:hover`, con el argumento de que
   * perseguir un boton en movimiento es hostil. El argumento sigue siendo
   * cierto; la solucion era peor en tactil. Un movil no tiene «pasar por
   * encima», asi que el navegador EMULA el hover al tocar: bastaba rozar una
   * tarjeta al desplazar la pagina para que la cinta se quedara congelada hasta
   * tocar en otro sitio. Parecia rota.
   *
   * Se retira el hover y quedan las dos paradas que si funcionan en todos los
   * dispositivos: el boton de pausa —que es lo que exige el punto 2.2.2 de la
   * WCAG— y el foco del teclado, aqui abajo.
   */

  /*
   * CON EL TECLADO SI SE PARA, y no es una excepcion caprichosa: quien tabula
   * hacia un boton de llamar necesita que siga donde estaba al pulsar. Aqui no
   * hay emulacion que valga — el foco solo llega si alguien lo manda.
   */
  .lt-cintas:focus-within .lt-cintas__fila { animation-play-state: paused; }

  .lt-cinta--quieta .lt-cintas__fila { animation-play-state: paused; }
}

/*
 * SIN MOVIMIENTO SIGUE SIENDO UN DIRECTORIO.
 *
 * Con la preferencia de menos movimiento, las filas se quedan quietas y se
 * arrastran a mano. La copia se retira: duplicaria la lista al desplazar.
 */
@media (prefers-reduced-motion: reduce) {
  .lt-cintas { overflow: visible; }

  .lt-cintas__fila {
    width: auto;
    overflow-x: auto;
    scrollbar-width: none;
    scroll-snap-type: x proximity;
    padding-inline: var(--canal);
    margin-inline: calc(var(--canal) * -1);
  }

  .lt-cintas__fila::-webkit-scrollbar { display: none; }

  .lt-cintas__pista[aria-hidden="true"] { display: none; }

  .lt-cintas__casilla { scroll-snap-align: start; }

  .lt-cintas .lt-tarjeta { transition: none; }
  .lt-cintas .lt-tarjeta:hover { transform: none; }
}

/*
 * EN MOVIL LAS TARJETAS SE ESTRECHAN, NO SE APILAN.
 *
 * Una marquesina que en telefono pasa a columna deja de ser una marquesina. Se
 * estrechan hasta el 78 % de la pantalla: se ve la que viene, que es la senal de
 * que hay mas.
 */
@media (max-width: 600px) {
  .lt-cintas__casilla { width: 78vw; }
  .lt-cintas__fila--ida    { animation-duration: 70s; }
  .lt-cintas__fila--vuelta { animation-duration: 82s; }
}