/* Carrusel de noticias del Home (patterns/organisms/carousels/news.php) */

/* Tarjetas de igual alto: Slick ya hace flex el track y las slides; se estira la cadena interna.
   El !important vence el display: inline-block que Slick pone inline en cada article. */
/* Sin el margen lateral de Pattern Lab, la separación entre tarjetas queda en el padding de la slide (20px en vez de 40px) */
.carrusel-igual-alto .slick-slide > div {
  display: flex;
  width: 100%;
  margin-left: 0;
  margin-right: 0;
}

.carrusel-igual-alto .slick-slide article {
  display: flex !important;
}

.carrusel-igual-alto .modulo-relacionado {
  flex: 1;
}

/* Marcadores de las slides que js/lazy-carousel.js completa desde wp-json */
.slide-skeleton__img,
.slide-skeleton__text {
  border-radius: 4px;
  background: linear-gradient(90deg, #ececec 25%, #f6f6f6 50%, #ececec 75%);
  background-size: 200% 100%;
  animation: slide-skeleton-shimmer 1.4s ease-in-out infinite;
}

/* La proporción viene inline desde el servidor; el margen replica el de la imagen de la tarjeta */
.slide-skeleton__img {
  display: block;
  margin-bottom: 5px;
}

/* El texto real ocupa la misma altura que en la tarjeta, pero solo se ven las barras */
.slide-skeleton__text {
  color: transparent;
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
}

@keyframes slide-skeleton-shimmer {
  from { background-position: 100% 0; }
  to { background-position: -100% 0; }
}

@media (prefers-reduced-motion: reduce) {
  .slide-skeleton__img,
  .slide-skeleton__text {
    animation: none;
  }
}