/* Disco Ball — sección "Explore collectibles" + carrusel de dispersión.
   El verde de marca queda reservado a acentos: eyebrow, filete, meta, punto
   activo y hover de controles. El color lo ponen los propios coleccionables. */

.col-section{position:relative;overflow:hidden;background:#070908;
  border-top:1px solid rgba(255,255,255,.05);border-bottom:1px solid rgba(255,255,255,.05);
  padding-block:clamp(4.5rem,9vw,8rem)}
.col-section-glow{position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(circle at 50% 38%,rgba(26,231,176,.07),transparent 42%)}

.col-head{position:relative;max-width:760px;margin:0 auto;text-align:center;
  display:flex;flex-direction:column;align-items:center;gap:var(--space-xl)}
.col-eyebrow{color:var(--mint-500)}
.col-head .wp-lead{max-width:620px}

.col-carousel{position:relative;margin-top:clamp(2.5rem,5vw,4rem);
  height:clamp(660px,80vh,820px)}

/* ---------- carrusel ---------- */
.dc-root{position:relative;height:100%;display:flex;flex-direction:column;
  align-items:center;justify-content:center;gap:clamp(24px,3vw,38px)}
.dc-glow{position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(circle at center,rgba(26,231,176,.10) 0%,rgba(26,231,176,.03) 30%,transparent 62%)}

/* overflow visible a propósito: si se recorta, las esquirlas desaparecen
   antes de tiempo y se pierde justo el efecto que da carácter a la sección */
.dc-viewport{position:relative;display:grid;place-items:center;overflow:visible;
  transform-origin:center center}
.dc-stage{position:relative;width:min(86vw,420px);height:var(--dc-card-h,560px);
  overflow:visible}
.dc-active,.dc-ghost{position:absolute;inset:0}
.dc-shard{position:absolute;inset:0;will-change:transform,opacity}

/* Las esquirlas son copias de la tarjeta, y cada copia arrastraba el glow de
   95px, el drop-shadow de la imagen y los backdrop-filter de las etiquetas: 40
   efectos caros animándose a la vez. backdrop-filter además obliga a releer el
   fondo en cada frame. Son piezas que vuelan 0.5s; nada de eso se percibe, así
   que se apaga. Es lo que hacía que la transición se arrastrara en móvil. */
.dc-shard .col-card-glow{display:none}
.dc-shard .col-card{box-shadow:none}
.dc-shard .col-tag{backdrop-filter:none;-webkit-backdrop-filter:none}
.dc-shard .col-card-media img{filter:none;transition:none}
.dc-active{will-change:transform,opacity}

/* ---------- tarjeta ---------- */
.col-card{position:relative;width:100%;height:100%;overflow:hidden;
  border-radius:28px;border:1px solid rgba(255,255,255,.09);background:#0A0D0C;
  box-shadow:0 30px 70px rgba(0,0,0,.55)}
.col-card-glow{position:absolute;left:50%;top:42%;width:330px;height:330px;
  transform:translate(-50%,-50%);border-radius:50%;pointer-events:none;
  background:rgba(26,231,176,.10);filter:blur(95px)}
.col-card-depth{position:absolute;inset:0;pointer-events:none;opacity:.4;
  background:radial-gradient(circle at 50% 35%,rgba(255,255,255,.05),transparent 45%)}

.col-card-head{position:absolute;left:0;right:0;top:0;z-index:3;
  display:flex;align-items:center;justify-content:space-between;padding:22px}
.col-tag{border-radius:var(--radius-full);border:1px solid rgba(255,255,255,.10);
  background:rgba(0,0,0,.30);padding:6px 12px;font-size:10px;font-weight:600;
  text-transform:uppercase;letter-spacing:.16em;color:rgba(255,255,255,.60);
  backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);white-space:nowrap}
.col-tag-accent{border-color:rgba(26,231,176,.22);background:rgba(7,17,14,.6);
  color:var(--mint-500);letter-spacing:.14em}

/* object-contain: la pieza es la protagonista y nunca se recorta */
.col-card-media{position:absolute;inset:66px 24px 168px;z-index:2;
  display:flex;align-items:center;justify-content:center}
.col-card-media img{max-width:100%;max-height:100%;width:auto;height:auto;
  object-fit:contain;display:block;
  filter:drop-shadow(0 30px 40px rgba(0,0,0,.55));
  transform:rotate(var(--col-rot,0deg)) scale(1);
  transition:transform .7s var(--ease-out)}
/* rotación y hover se componen en la misma transform: si el hover fuese un
   transform aparte con !important, borraría la inclinación de golpe */
.col-card:hover .col-card-media img{transform:rotate(var(--col-rot,0deg)) scale(1.035)}

.col-card-veil{position:absolute;left:0;right:0;bottom:0;height:230px;z-index:2;
  pointer-events:none;
  background:linear-gradient(to top,#080A09 0%,rgba(8,10,9,.95) 45%,transparent 100%)}

.col-card-body{position:absolute;left:0;right:0;bottom:0;z-index:3;padding:26px}
.col-rule{display:block;width:40px;height:2px;border-radius:2px;
  background:var(--mint-500);margin-bottom:16px}
.col-card-title{font-size:clamp(30px,4.4vw,40px);line-height:.95;
  letter-spacing:-.04em;color:#fff;margin:0}
.col-card-meta{margin:12px 0 0;font-size:11px;font-weight:600;text-transform:uppercase;
  letter-spacing:.12em;color:var(--mint-500)}
.col-card-text{margin:12px 0 0;max-width:310px;font-size:13px;line-height:1.45;
  color:rgba(255,255,255,.50)}

/* ---------- controles ---------- */
.dc-controls{position:relative;z-index:4;display:flex;align-items:center;
  gap:clamp(16px,2.4vw,26px)}
.dc-arrow{display:flex;align-items:center;justify-content:center;width:48px;height:48px;
  border-radius:50%;border:1px solid rgba(255,255,255,.10);background:rgba(255,255,255,.04);
  color:#fff;cursor:pointer;backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);
  transition:transform .3s var(--ease-out),background .3s var(--ease-out),
             border-color .3s var(--ease-out),color .3s var(--ease-out)}
.dc-arrow:hover{transform:scale(1.1);background:var(--mint-500);
  border-color:var(--mint-500);color:#06110E}
.dc-arrow:active{transform:scale(.95)}
.dc-arrow:focus-visible{outline:2px solid rgba(26,231,176,.5);outline-offset:3px}

.dc-dots{display:flex;align-items:center;gap:8px}
.dc-dot{width:12px;height:6px;border-radius:var(--radius-full);border:0;padding:0;
  background:rgba(255,255,255,.15);cursor:pointer;
  transition:width .35s var(--ease-out),background .35s var(--ease-out),box-shadow .35s var(--ease-out)}
.dc-dot:hover{background:rgba(255,255,255,.30)}
.dc-dot.is-active{width:40px;background:var(--mint-500);
  box-shadow:0 0 18px rgba(26,231,176,.30)}
.dc-dot:focus-visible{outline:2px solid rgba(26,231,176,.5);outline-offset:3px}

@media (max-width:720px){
  .col-carousel{height:auto;padding-block:8px}
  .dc-root{gap:26px}
  .dc-stage{width:min(84vw,380px);height:min(var(--dc-card-h,560px),74vh)}
  .col-card-media{inset:60px 18px 152px}
  .col-card-body{padding:22px}
  .col-card-text{font-size:12.5px}
  .dc-arrow{width:44px;height:44px}
}

@media (prefers-reduced-motion:reduce){
  .col-card-media img{transition:none}
  .dc-dot,.dc-arrow{transition:none}
}