/* ============================================================
   ORTODONCIA EXPERIENCE 2026 — Carrossel de Mentores
   Dobra: Frame 3109 (node 978-2261)
   Cards em arco (285×374) com glow roxo + gradiente inferior
   ============================================================ */

.oe-mentores {
  /* Tokens da dobra — ajuste aqui se precisar */
  --oe-card-w: 285px;
  --oe-card-h: 374px;
  --oe-card-gap: 8.3px;
  --oe-bg-card: #18042b;
  --oe-glow: 155, 84, 160; /* roxo do glow (rgba) */

  position: relative;
  width: 100%;
  overflow: hidden;
  padding: 48px 0 120px;
}

/* Fades laterais para o loop infinito não "cortar seco" (opcional) */
.oe-mentores::before,
.oe-mentores::after {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  width: clamp(24px, 6vw, 90px);
  z-index: 2;
  pointer-events: none;
}
.oe-mentores::before {
  left: 0;
  background: linear-gradient(to right, #000000, rgba(24, 4, 43, 0));
}
.oe-mentores::after {
  right: 0;
  background: linear-gradient(to left, #000000, rgba(24, 4, 43, 0));
}

/* ---------- Trilho ---------- */
.oe-mentores__track {
  display: flex;
  align-items: center;
  gap: var(--oe-card-gap);
  width: max-content;
  will-change: transform;
  cursor: grab;
  user-select: none;
  -webkit-user-select: none;
  touch-action: pan-y;
}
.oe-mentores__track.is-dragging {
  cursor: grabbing;
}

/* ---------- Card ---------- */
.oe-card {
  position: relative;
  flex: 0 0 auto;
  width: var(--oe-card-w);
  height: var(--oe-card-h);
  overflow: hidden;
  background: var(--oe-bg-card);
  /* Arco: raio superior = metade da largura → topo em semicírculo */
  border-radius: 20px 20px;
}

.oe-card__foto {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center top;
  pointer-events: none;
  -webkit-user-drag: none;
  user-drag: none;
}

/* Gradiente inferior: transparente até ~34% e fecha no roxo do card */
.oe-card::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(
    to bottom,
    rgba(24, 4, 43, 0) 34.4%,
    var(--oe-bg-card) 100%
  );
  pointer-events: none;
}

/* ---------- Info do doutor ---------- */
.oe-card__info {
  position: absolute;
  left: 50%;
  bottom: 24px;
  transform: translateX(-50%);
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8.7px;
  width: 208px;
  text-align: center;
  color: #fff;
  font-family: Arial, Helvetica, sans-serif;
}

.oe-card__handle-row {
  display: flex;
  align-items: center;
  gap: 2.5px;
  margin-bottom: -5px;
}

.oe-card__handle {
  font-size: 14.6px;
  line-height: 25px;
  font-weight: 400;
  white-space: nowrap;
}

.oe-card__verificado {
  width: 16.2px;
  height: 16.2px;
  flex: 0 0 auto;
}

.oe-card__nome {
  font-size: 19.9px;
  line-height: 18.7px;
  font-weight: 700;
  white-space: nowrap;
  margin: 0;
}

/* Chip da bandeira */
.oe-card__bandeira {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 50.5px;
  height: 33.7px;
  padding: 5px;
  background: rgba(255, 255, 255, 0.49);
}
.oe-card__bandeira img {
  width: 35.7px;
  height: 24px;
  object-fit: cover;
  display: block;
  pointer-events: none;
}

/* ---------- Responsivo ---------- */
@media (max-width: 640px) {
  .oe-mentores {
    --oe-card-w: 240px;
    --oe-card-h: 315px;
    padding: 32px 0 96px;
  }
  .oe-card__info {
    bottom: 18px;
    transform: translateX(-50%) scale(0.88);
    transform-origin: bottom center;
  }
}

/* Acessibilidade: sem autoplay para quem prefere menos movimento */
@media (prefers-reduced-motion: reduce) {
  .oe-mentores__track {
    cursor: default;
  }
}