.cc{--vis:5;--gap:16px;--rad:20px;--ih:120px;--bg:#efefed;--bgh:#0e2a1f;--lime:#d4f76a;--ox:4px;--oy:4px;--tc:#1b1f1c;--tch:#fff;--sc:#8a8f89;--sch:#b9c4bd;--bz:40px;--bi:18px;--bbg:#d4f76a;--bbgh:#ecffa8;--bic:#10231a;--nz:44px;--ng:22px;--nw:140px;--nh:4px;--nc:#5b6b7a;--np:#b8862b;--nt:#dbe3ec;position:relative;width:100%}
.cc *{box-sizing:border-box}
.cc-view{overflow:hidden;padding:16px 10px 12px;margin:-16px -10px -12px}
.cc-track{display:flex;gap:var(--gap);transition:transform .55s cubic-bezier(.2,.7,.2,1);will-change:transform}
.cc-item{position:relative;flex:0 0 calc((100% - var(--gap)*(var(--vis) - 1))/var(--vis));min-width:0}
/* capa verde claro que sobresale detrás */
.cc-item::before{content:"";position:absolute;inset:0;border-radius:var(--rad);background:var(--lime);opacity:0;transform:translate(0,0);transition:transform .5s cubic-bezier(.2,.7,.2,1),opacity .3s}
.cc-item:hover::before{opacity:1;transform:translate(var(--ox),calc(var(--oy) * -1))}
.cc-card{position:relative;z-index:1;height:100%;display:flex;flex-direction:column;background:var(--bg);border-radius:var(--rad);overflow:hidden}
/* fondo hover que se expande desde el botón */
.cc-card::before{content:"";position:absolute;inset:0;background:var(--bgh);clip-path:circle(0 at 88% 90%);transition:clip-path .65s cubic-bezier(.2,.7,.2,1);z-index:0}
.cc-item:hover .cc-card::before{clip-path:circle(150% at 88% 90%)}
.cc-card>*{position:relative;z-index:1}
.cc-img{position:relative;height:var(--ih);display:flex;justify-content:center;align-items:center;margin-bottom:18px}
.cc-img img{max-width:100%;max-height:100%;object-fit:contain;position:relative;z-index:1;filter:drop-shadow(0 12px 8px rgba(0,0,0,.28));transition:transform .5s}
.cc-item:hover .cc-img img{transform:scale(1.05)}
.cc-img::after{content:"";position:absolute;left:10%;right:10%;bottom:-6px;height:12px;background:radial-gradient(ellipse at center,rgba(0,0,0,.35),transparent 70%);filter:blur(3px)}
.cc-info{padding-right:calc(var(--bz) + 10px)}
.cc-t{margin:0 0 3px;font-size:16px;font-weight:600;color:var(--tc);transition:color .4s}
.cc-s{margin:0;font-size:12px;color:var(--sc);transition:color .4s}
.cc-item:hover .cc-t{color:var(--tch)}.cc-item:hover .cc-s{color:var(--sch)}
.cc-btn{position:absolute!important;right:14px;bottom:14px;z-index:2;width:var(--bz);height:var(--bz);display:grid;place-items:center;border-radius:50%;background:var(--bbg);color:var(--bic);text-decoration:none;overflow:hidden;isolation:isolate;opacity:0;transform:scale(.4) rotate(-45deg);transition:opacity .3s,transform .5s cubic-bezier(.2,.9,.3,1.3)}
.cc-item:hover .cc-btn{opacity:1;transform:none}
.cc-btn::before{content:"";position:absolute;inset:0;background:var(--bbgh);border-radius:inherit;transform:translateX(-101%);transition:transform .45s cubic-bezier(.2,.7,.2,1);z-index:-1}
.cc-btn:hover::before{transform:none}
.cc-btn svg{width:var(--bi);height:var(--bi);transition:transform .35s}.cc-btn:hover svg{transform:translateX(3px)}
.cc-nav{display:flex;align-items:center;justify-content:center;gap:var(--ng);margin-top:28px}
.cc-nav button{width:var(--nz);height:var(--nz);border-radius:50%;border:1px solid var(--nc);background:transparent;color:var(--nc);cursor:pointer;font-size:calc(var(--nz)*.5);line-height:1;padding:0;display:grid;place-items:center;transition:all .25s}
.cc-nav button:hover{background:var(--nc);color:#fff}
.cc-bar{position:relative;width:var(--nw);height:var(--nh);background:var(--nt);border-radius:9px;overflow:hidden}
.cc-bar i{position:absolute;top:0;bottom:0;background:var(--np);border-radius:9px;transition:left .55s cubic-bezier(.2,.7,.2,1),width .55s}
@media(hover:none){.cc-btn{opacity:1;transform:none}}