/* General Container */
#news-widget {
    position: absolute;
    bottom: 5rem;
    width: 48vw;
    max-width: 865px;
    min-width: 655px;
    height: 130px;
    border-radius: 13px;
    backdrop-filter: blur(15px);
    background-color: rgba(35,35,39,0.2);
    overflow: hidden;
}

/* Header */
#news-widget .widget-header {
  background: transparent;
}
#news-widget .widget-header .text-secondary {
  font-size: 13px;
  font-weight: 600;
  color: #7f7f7f;
  padding-bottom: 10px;
}

/* Carousel indicators */
#news-widget .carousel-indicators {
  position: static;
  display: flex;
  gap: .2rem;
  margin: 0;
}
#news-widget .carousel-indicators button {
  width: 16px;
  height: 2px;
  padding: 0;
  background-color: rgba(255,255,255,.3);
  border-radius: 4px;
  opacity: .5;
  transition: background-color .3s, opacity .3s;
}
#news-widget .carousel-indicators .active {
  background-color: #ffee59;
  opacity: 1;
}

/* Carousel */
#news-widget .carousel-inner {
  background: transparent;
  height: calc(100% - 53px);
}
#news-widget .carousel-item .row {
  height: 100%;
}
#news-widget .carousel-item .col-6:nth-child(1) {
  padding-right: 1.5rem;
}
#news-widget .carousel-item .col-6:nth-child(2) {
  border-left: 1px solid rgba(255,255,255,.3);
  padding-left: 1.5rem;
}
#news-widget.carousel .carousel-item {
  transition: transform 0.6s ease-out !important;
}

/* Link style */
#news-widget .carousel-item a {
  color: #fff;
  text-decoration: none;
  font-size: .75rem;
  line-height: 1.2;
}
#news-widget .carousel-item a:hover {
  text-decoration: underline;
}
#news-widget .carousel-item a .news-text {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;       
  line-clamp: 3;
}

/* Icon circle container */
#news-widget .carousel-item a .icon-circle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 35px;
  height: 35px;
  border-radius: 50%;
  background-color: transparent;
  transition: background-color .3s, color .5s;
  flex-shrink: 0;
}

/* SVG icon */
#news-widget .carousel-item a .icon-circle svg {
  width: 20px;
  height: 20px;
  color: #e73393;
}

/* Icon Hover*/
#news-widget .carousel-item a:hover .icon-circle {
  background-color: #E73393;
}
#news-widget .carousel-item a:hover .icon-circle svg {
  color: #232327;
}

/* Shimmer Placeholder */
.shimmer-line {
  width: 100%;
  height: 1em;
  margin-bottom: .5rem;
  background: linear-gradient(
    90deg,
    rgba(255,255,255,.1) 25%,
    rgba(255,255,255,.2) 50%,
    rgba(255,255,255,.1) 75%
  );
  background-size: 200% 100%;
  animation: shimmer 1.5s infinite;
  border-radius: 4px;
}
.shimmer-circle {
  width: 35px;
  height: 35px;
  border-radius: 50%;
  background: linear-gradient(
    90deg,
    rgba(255,255,255,.1) 25%,
    rgba(255,255,255,.2) 50%,
    rgba(255,255,255,.1) 75%
  );
  background-size: 200% 100%;
  animation: shimmer 1.5s infinite;
  margin-bottom: 10px;
}

@keyframes shimmer {
  from { background-position: -200% 0 }
  to   { background-position: 200% 0 }
}


/* =============== Carousel FIX for #news-widget ==================== */
#news-widget.carousel .carousel-item {
  position:relative;
  float:left;
  width:100%;
  margin-right:-100%;
  backface-visibility:hidden;
  transition: background-color .3s, opacity .3s;
}

/* los tres que participan del movimiento deben verse */
#news-widget.carousel .carousel-item.active,
#news-widget.carousel .carousel-item-next,
#news-widget.carousel .carousel-item-prev{
  /* display:block !important; */
}

/* --- posiciones durante la animación --- */
#news-widget.carousel .carousel-item-next:not(.carousel-item-start),
#news-widget.carousel .active.carousel-item-end{
  transform:translateX(100%) !important;
}

#news-widget.carousel .carousel-item-prev:not(.carousel-item-end),
#news-widget.carousel .active.carousel-item-start{
  transform:translateX(-100%) !important;
}
/* ==================================================================== */