/* 学员案例：无缝循环焦点轮播（首页 / 减重夏令营 页共用） */
:root{--case-grad:linear-gradient(135deg,#f67c29,#e0561b);}
.cases-wrap{position:relative;max-width:1440px;margin:0 auto;}
.cases{position:relative;height:520px;overflow:hidden;perspective:1400px;}
.case{position:absolute;top:50%;left:50%;width:400px;background:#fff;border-radius:var(--radius);padding:22px;box-shadow:0 26px 60px -20px rgba(246,124,41,.45);border:1px solid var(--border);text-align:center;transform-origin:center;transition:transform .6s cubic-bezier(.22,.61,.36,1),opacity .6s,filter .6s;will-change:transform,opacity;cursor:pointer;}
.case:not(.is-active){filter:saturate(.72) brightness(.96);}
.case .compare{position:relative;aspect-ratio:1/1;border-radius:12px;overflow:hidden;background:#eee;margin-bottom:16px;}
.case .compare .before,.case .compare .after{position:absolute;inset:0;background-size:cover;background-position:center;}
.case .compare .before{background-color:#f0e7de;}
.case .compare .after{width:0;background-color:#f67c29;}
.case .change{display:inline-block;background:var(--case-grad);color:#fff;font-size:14px;font-weight:700;padding:4px 14px;border-radius:999px;margin-bottom:10px;}
.case h4{font-size:16px;margin-bottom:6px;}
.case p{font-size:13px;color:var(--text-light);}
.case-arrow{position:absolute;top:50%;transform:translateY(-50%);width:54px;height:54px;border-radius:50%;border:none;background:#fff;color:var(--primary);font-size:28px;line-height:1;box-shadow:0 10px 26px rgba(0,0,0,.16);cursor:pointer;z-index:8;transition:background .3s,color .3s,transform .3s;display:flex;align-items:center;justify-content:center;}
.case-arrow:hover{background:var(--primary);color:#fff;transform:translateY(-50%) scale(1.08);}
.case-arrow.prev{left:20px;}
.case-arrow.next{right:20px;}
.case-dots{display:flex;justify-content:center;gap:8px;margin-top:22px;}
.case-dots span{width:9px;height:9px;border-radius:999px;background:#ffd9b8;cursor:pointer;transition:all .35s;}
.case-dots span.on{width:30px;background:var(--primary);}
@media(max-width:900px){
  .cases{height:460px;}
  .case{width:340px;}
}
@media(max-width:768px){
  .cases{height:420px;}
  .case{width:300px;padding:16px;}
  .case-arrow{width:44px;height:44px;font-size:22px;}
  .case-arrow.prev{left:6px;}
  .case-arrow.next{right:6px;}
}
