:root {
  --card-radius: 14px;
}

/* body background agora controlado por --bs-body-bg em tokens.css (design system v5) */

.card {
  border-radius: var(--card-radius);
}

.badge-status {
  font-size: .75rem;
}

.thumb {
  width: 100%;
  height: 160px;
  object-fit: cover;
  border-top-left-radius: var(--card-radius);
  border-top-right-radius: var(--card-radius);
}

/* .flip-card{ perspective:1200px; }
.flip-card-inner{ position:relative; width:100%; transform-style:preserve-3d; transition:transform .6s; min-height:240px; } */
/* .flip-front,.flip-back{ backface-visibility:hidden; position:absolute; inset:0; } */




.flip-card {
  perspective: 1200px;
  position: relative;
}

.flip-card-inner {
  position: relative;
  width: 100%;
  transform-style: preserve-3d;
  transition: transform .6s;
  min-height: 380px;
  /* era 240px -> causava sobreposição */
}

.flip-front,
.flip-back {
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
}


.flip-card.flipped .flip-card-inner {
  transform: rotateY(180deg);
}

.flip-back {
  transform: rotateY(180deg);
}

.progress-story {
  height: 4px;
}

.story-indicator {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  z-index: 5;
  pointer-events: none;
  /* não bloqueia swipe */
}

.carousel {
  touch-action: pan-y;
  /* permite swipe horizontal sem travar scroll vertical */
}

.carousel-item {
  transition: transform .75s ease-in-out;
}

.story-indicator {
  pointer-events: none;
}

/* não bloquear swipe */

.story-bars {
  display: flex;
  gap: 6px;
  padding: 10px 10px 0 10px;
}

.story-bar {
  flex: 1;
  height: 3px;
  background: rgba(255, 255, 255, .35);
  border-radius: 999px;
  overflow: hidden;
}

.story-bar span {
  display: block;
  height: 100%;
  width: 0%;
  background: #fff;
  border-radius: 999px;
}