/* ==========================================================
   BILHETES: frases escritas à caneta em post-its, num carrossel
   ========================================================== */

.bilhetes {
  --cartao: min(78vw, 320px);
  display: flex;
  gap: 1.4rem;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  padding: 1.6rem calc(50% - var(--cartao) / 2) 2rem;
  scrollbar-width: none;
  outline: none;
}

.bilhetes::-webkit-scrollbar { display: none; }

.bilhete {
  position: relative;
  flex: 0 0 var(--cartao);
  min-height: 15rem;
  margin: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  scroll-snap-align: center;
  transform: rotate(var(--r, 0deg));
}

.bilhete .washi { top: -12px; left: 50%; margin-left: -46px; --r: -4deg; }
.bilhete:nth-child(even) .washi { --r: 5deg; }

.bilhete blockquote {
  margin: 0;
  font-size: clamp(1.02rem, 4.6vw, 1.18rem);
  line-height: 1.85;
}

.bilhete__num {
  position: absolute;
  right: 1rem;
  bottom: .7rem;
  font-family: var(--fonte-ui);
  font-size: .78rem;
  color: rgba(58, 39, 49, .45);
}

/* bilhete em papel de caderno arrancado */
.bilhete--pautado {
  padding: 1.6rem 1.3rem 1.8rem 2.2rem;
  background:
    linear-gradient(90deg, transparent 1.45rem, var(--margem) 1.45rem calc(1.45rem + 2px), transparent calc(1.45rem + 2px)),
    repeating-linear-gradient(180deg, transparent 0 calc(1.85em - 1px), var(--pauta) calc(1.85em - 1px) 1.85em),
    #fffefb;
  box-shadow: 0 1px 1px rgba(0, 0, 0, .06), 0 16px 18px -16px rgba(58, 39, 49, .55);
}

.bilhetes__pontos {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: .25rem;
}

.bilhetes__ponto {
  width: 26px;
  height: 26px;
  display: grid;
  place-items: center;
}

.bilhetes__ponto::before {
  content: '';
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: rgba(74, 51, 32, .3);
  transition: transform .2s ease, background .2s ease;
}

.bilhetes__ponto[aria-current='true']::before { background: var(--batom); transform: scale(1.35); }

.bilhetes__seta {
  width: 44px;
  height: 36px;
  display: grid;
  place-items: center;
  color: #4a3320;
  transition: opacity .2s ease;
}

.bilhetes__seta svg { width: 30px; }
.bilhetes__seta--voltar svg { transform: scaleX(-1); }
.bilhetes__seta:disabled { opacity: .25; cursor: default; }