/* Portada · Proyectos en marcha: carrusel infinito de tarjetas pequeñas (Juanan 25-oct) */
.w5-proy { padding: 100px 0 90px; background: var(--papel); overflow: hidden; }
.w5-cab { display: flex; justify-content: space-between; align-items: flex-end; gap: 24px; flex-wrap: wrap; margin-bottom: 36px; }
.w5-cab h2 { margin-top: 14px; }
.w5-cifra { display: flex; align-items: baseline; gap: 10px; }
.w5-cifra b { font-size: 44px; line-height: 1; font-weight: 700; color: var(--azul); font-variant-numeric: tabular-nums; }
.w5-cifra span { font-size: 14px; color: var(--sec); max-width: 18ch; line-height: 19px; }

/* Bucle: la cinta lleva las tarjetas dos veces y se desplaza la mitad de su ancho */
.w5-pista { position: relative; -webkit-mask-image: linear-gradient(90deg, transparent, #000 5%, #000 95%, transparent); mask-image: linear-gradient(90deg, transparent, #000 5%, #000 95%, transparent); }
.w5-cinta { display: flex; gap: 16px; width: max-content; padding: 6px 0 12px; animation: w5-bucle 60s linear infinite; }
.w5-pista:hover .w5-cinta, .w5-pista:focus-within .w5-cinta { animation-play-state: paused; }
/* Con JS la cinta la mueve proyectos.js y se arrastra con el ratón o el dedo */
.w5-js { cursor: grab; touch-action: pan-y; user-select: none; -webkit-user-select: none; }
.w5-js .w5-cinta { animation: none; will-change: transform; }
.w5-js.w5-agarrado { cursor: grabbing; }
.w5-js.w5-agarrado .w5-t { transform: none; }
@keyframes w5-bucle { to { transform: translateX(calc(-50% - 8px)); } }

.w5-t { width: 250px; flex: none; background: #fff; border: 1px solid var(--linea); border-radius: 16px; overflow: hidden; display: grid; grid-template-rows: auto auto 1fr; transition: transform .25s var(--ease), box-shadow .25s; }
.w5-t:hover { transform: translateY(-4px); box-shadow: var(--sombra); }
.w5-img { position: relative; aspect-ratio: 16/10; overflow: hidden; }
.w5-img img { width: 100%; height: 100%; object-fit: cover; }
.w5-est { position: absolute; left: 10px; top: 10px; font-size: 11.5px; font-weight: 700; padding: 4px 10px; border-radius: 999px; }
.w5-uso { background: var(--ok-bg); color: var(--ok); }
.w5-imp { background: var(--azul-suave); color: var(--azul); }
.w5-des { background: #FFF4D6; color: #805600; }
.w5-t small { padding: 12px 16px 0; font-size: 11.5px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--sec); }
.w5-t p { padding: 4px 16px 16px; font-size: 15px; line-height: 21px; color: var(--tinta); font-weight: 500; }

@media (max-width: 720px) {
  .w5-proy { padding: 72px 0 64px; }
  .w5-t { width: 220px; }
  .w5-cinta { animation-duration: 50s; }
}
/* Sin movimiento: la cinta se convierte en una fila que se desliza a mano */
@media (prefers-reduced-motion: reduce) {
  .w5-pista { overflow-x: auto; -webkit-mask-image: none; mask-image: none; }
  .w5-cinta { animation: none; padding-left: 20px; }
  .w5-t[aria-hidden="true"] { display: none; }
}