/* Showcase del producto — sticky + 3 estados */
.showcase{position:relative;height:340vh;background:rgba(11,12,16,.8);border-top:1px solid var(--border-subtle)}
.showcase-sticky{position:sticky;top:68px;height:calc(100vh - 68px);display:flex;align-items:center;overflow:hidden}
.showcase-grid{display:grid;grid-template-columns:minmax(0,.86fr) minmax(300px,.9fr) minmax(0,1fr);gap:clamp(1.5rem,3.4vw,3.5rem);align-items:center;width:100%}

/* cards en cola */
.showcase-stack{display:flex;flex-direction:column;gap:var(--space-md)}
.fcard{display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:flex-start;gap:var(--space-md);width:100%;text-align:left;padding:var(--space-xl);border-radius:var(--radius-lg);background:var(--surface);border:1px solid var(--border-subtle);box-shadow:var(--shadow-card);cursor:pointer;font-family:var(--font-ui);transition:transform var(--dur-slow) var(--ease-out),opacity var(--dur-slow) var(--ease-out),border-color var(--dur-slow) var(--ease-out),box-shadow var(--dur-slow) var(--ease-out),padding var(--dur-slow) var(--ease-out)}
.fcard:focus-visible{outline:2px solid var(--mint-500);outline-offset:2px}
.fcard.is-active{border-color:rgba(26,231,176,.42);box-shadow:0 0 0 1px rgba(26,231,176,.12),0 18px 44px rgba(26,231,176,.10);opacity:1}
.fcard.is-past{opacity:.42;transform:scale(.93) translateY(calc(var(--rel) * 6px));padding:var(--space-md) var(--space-xl);border-color:rgba(255,255,255,.06);box-shadow:none}
.fcard.is-next{opacity:.5;transform:scale(.95);padding:var(--space-md) var(--space-xl)}
.fcard.is-past .fcard-text,.fcard.is-next .fcard-text{display:none}
.fcard-icon{display:inline-flex;align-items:center;justify-content:center;width:38px;height:38px;flex:none;border-radius:var(--radius-full);background:var(--carbon-800);transition:background-color var(--dur-slow) var(--ease-out)}
.fcard.is-active .fcard-icon{background:var(--mint-soft)}
.fcard-body{display:flex;flex-direction:column;gap:var(--space-xs);min-width:0}
.fcard-tag{font-size:var(--fs-label);font-weight:var(--weight-ui-bold);letter-spacing:var(--ls-nav);text-transform:uppercase;color:var(--text-primary)}
.fcard.is-past .fcard-tag,.fcard.is-next .fcard-tag{color:var(--text-secondary)}
.fcard-text{font-size:var(--fs-body-lg);line-height:var(--lh-body);color:var(--text-secondary)}
.fcard-num{font-family:var(--font-display);font-size:var(--fs-label);letter-spacing:var(--ls-display);color:var(--text-on-dark-low);font-variant-numeric:tabular-nums}
.fcard.is-active .fcard-num{color:var(--mint-500)}

/* iPhone */
.phone{position:relative;justify-self:center;width:100%;max-width:340px}
.phone-glow{position:absolute;inset:-14% -22%;pointer-events:none;background:radial-gradient(46% 42% at 50% 40%,rgba(26,231,176,.16),transparent 70%),radial-gradient(58% 58% at 52% 74%,rgba(137,53,255,.20),transparent 74%);filter:blur(14px)}
.phone-body{position:relative;aspect-ratio:390/800;border-radius:46px;padding:9px;background:linear-gradient(150deg,#3a3d47,#14161c 42%,#2b2e37);box-shadow:0 40px 90px rgba(0,0,0,.65),inset 0 0 0 1px rgba(255,255,255,.08)}
.phone-notch{position:absolute;top:20px;left:50%;transform:translateX(-50%);width:84px;height:22px;border-radius:var(--radius-full);background:#05060a;z-index:3}
.phone-viewport{position:relative;width:100%;height:100%;border-radius:38px;overflow:hidden;background:#05060a}
.phone-slide{position:absolute;inset:0;opacity:0;transform:scale(1.03);transition:opacity 520ms var(--ease-out),transform 620ms var(--ease-out);pointer-events:none}
.phone-slide.is-active{opacity:1;transform:none}
.phone-slide.is-past{opacity:0;transform:scale(.97)}

/* pantallas */
.pscreen{position:absolute;inset:0;font-family:var(--font-ui);overflow:hidden;text-align:left}
.pscreen-dark{background:#05060a;display:flex;flex-direction:column}
.pscreen-shot{width:100%;height:100%;object-fit:cover;object-position:top center;display:block}
/* subastas */
.pauc-stream{position:relative;flex:1;min-height:0;background:radial-gradient(70% 60% at 50% 30%,#1d1430,#07080d)}
.pauc-lot{position:absolute;top:16%;left:50%;transform:translateX(-50%) rotate(-4deg);width:52%;filter:drop-shadow(0 22px 40px rgba(0,0,0,.7))}
.pauc-top{position:absolute;top:44px;left:12px;right:12px;display:flex;gap:6px}
.pauc-chat{position:absolute;left:12px;right:12px;bottom:12px;display:flex;flex-direction:column;gap:5px;font-size:10px;color:var(--text-on-dark-medium)}
.pauc-chat b{color:var(--text-primary);font-weight:var(--weight-ui-semibold)}
.pauc-panel{padding:14px 14px 22px;background:var(--overlay-card);backdrop-filter:var(--blur-glass);border-top:1px solid var(--border-subtle)}
.pauc-meta{display:flex;font-size:9px;letter-spacing:var(--ls-nav);text-transform:uppercase;color:var(--text-on-dark-medium)}
.pauc-time{margin-left:auto;color:var(--hype-red);font-weight:var(--weight-ui-bold);font-variant-numeric:tabular-nums}
.pauc-bid{display:flex;align-items:baseline;gap:8px;margin-top:4px}
.pauc-price{font-family:var(--font-display);font-size:34px;font-weight:800;letter-spacing:var(--ls-display);color:var(--text-primary);line-height:1;font-variant-numeric:tabular-nums}
.pauc-bids{font-size:10px;color:var(--text-secondary)}
.pauc-cta{display:flex;align-items:center;justify-content:center;gap:6px;margin-top:10px;padding:11px;border-radius:var(--radius-action);background:var(--mint-500);color:var(--text-on-accent);font-size:12px;font-weight:var(--weight-ui-bold);letter-spacing:var(--ls-nav);text-transform:uppercase}
/* drops */
.pdrop-head{display:flex;align-items:center;justify-content:space-between;padding:52px 14px 10px}
.pdrop-title{font-family:var(--font-display);font-size:19px;font-weight:800;letter-spacing:var(--ls-display);color:var(--text-primary)}
.pdrop-hero{position:relative;margin:0 14px;aspect-ratio:16/13;border-radius:var(--radius-lg);overflow:hidden;background:radial-gradient(60% 70% at 50% 30%,#1d1430,#07080d);display:grid;place-items:center;padding:12px 12px 40px}
.pdrop-hero img{max-width:50%;max-height:100%;width:auto;height:auto;object-fit:contain;filter:drop-shadow(0 16px 30px rgba(0,0,0,.6))}
.pdrop-hero-info{position:absolute;inset:auto 0 0 0;padding:10px;display:flex;flex-direction:column;gap:2px;background:var(--gradient-card-image);font-size:10px;color:var(--text-on-dark-medium)}
.pdrop-hero-info b{color:var(--mint-500);font-size:11px}
.pdrop-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;padding:12px 14px}
.pdrop-item{display:flex;flex-direction:column;gap:3px;padding:8px;border-radius:var(--radius-md);background:var(--surface);border:1px solid var(--border-subtle)}
.pdrop-item img{width:100%;height:58px;object-fit:contain}
.pdrop-item span{font-size:7px;letter-spacing:var(--ls-nav);text-transform:uppercase;color:var(--text-secondary)}
.pdrop-item b{font-size:11px;color:var(--text-primary);font-variant-numeric:tabular-nums}
.pdrop-tabs{margin-top:auto;display:grid;grid-template-columns:repeat(5,1fr);gap:4px;padding:10px 14px 22px;border-top:1px solid var(--border-subtle);background:var(--overlay-card);backdrop-filter:var(--blur-glass)}
.pdrop-tabs span{display:flex;flex-direction:column;align-items:center;gap:3px;font-size:7px;letter-spacing:var(--ls-nav);text-transform:uppercase;color:var(--text-on-dark-low)}
.pdrop-tabs span.is-on{color:var(--mint-500)}
.pdrop-tabs i{width:14px;height:14px;border-radius:4px;background:currentColor;opacity:.7;display:block}

/* copy derecho */
.showcase-copy{display:flex;flex-direction:column;gap:var(--space-xl);min-width:0}
.showcase-copy-slides{position:relative;display:grid}
.showcase-slide{grid-area:1/1;opacity:0;transform:translateY(10px);transition:opacity 420ms var(--ease-out),transform 420ms var(--ease-out);pointer-events:none}
.showcase-slide:not(:first-child){position:relative;inset:auto}
.showcase-slide.is-active{opacity:1;transform:none;pointer-events:auto}
.showcase-slide .wp-lead{margin-top:var(--space-lg);max-width:420px}
.showcase-dots{display:flex;gap:var(--space-sm);margin-top:var(--space-xl)}
.showcase-dot{width:26px;height:3px;border:0;padding:0;border-radius:var(--radius-full);background:rgba(255,255,255,.16);cursor:pointer;transition:background-color var(--dur-slow) var(--ease-out),width var(--dur-slow) var(--ease-out)}
.showcase-dot.is-active{width:44px;background:var(--mint-500)}
.showcase-dot:focus-visible{outline:2px solid var(--mint-500);outline-offset:3px}

@media(max-width:1180px){
 .showcase-grid{grid-template-columns:minmax(0,.9fr) minmax(260px,.8fr) minmax(0,1fr);gap:var(--space-2xl)}
 .phone{max-width:290px}
 .fcard{padding:var(--space-lg)}
}
@media(max-width:960px){
 .showcase{height:auto}
 /* overflow:visible es imprescindible: un ancestro con overflow:hidden anula
    position:sticky en todos sus descendientes */
 .showcase-sticky{position:static;height:auto;overflow:visible;padding-block:var(--space-section)}
 /* flex en columna y no grid: el bloque de contención de un grid item es su
    propia celda, así que el sticky no tendría recorrido donde pegarse */
 .showcase-grid{display:flex;flex-direction:column;align-items:center;
   gap:var(--space-2xl);text-align:center}

 .showcase-copy{order:1;align-items:center;max-width:520px}
 .showcase-stack{order:2;width:100%;max-width:520px}
 .phone{order:3;max-width:300px}

 /* tira de tabs fija y compacta bajo el nav */
 .showcase-stack{position:sticky;top:68px;z-index:6;
   flex-direction:row;gap:6px;padding:10px 0;
   background:rgba(11,12,16,.94);
   backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px)}
 .fcard{grid-template-columns:auto minmax(0,1fr);gap:7px;padding:9px 10px;
   align-items:center;text-align:left;flex:1 1 0;min-width:0}
 .fcard-text,.fcard-num{display:none}
 .fcard-icon{width:24px;height:24px}
 .fcard-tag{font-size:10px;letter-spacing:.04em;white-space:nowrap;
   overflow:hidden;text-overflow:ellipsis}
 .fcard.is-past,.fcard.is-next{transform:none;opacity:.55}

 .showcase-copy-slides{width:100%}
 .showcase-slide:not(:first-child){position:relative;inset:auto}
 .showcase-slide{display:none}
 .showcase-slide.is-active{display:block}
 .showcase-slide .wp-lead{margin-inline:auto}
 /* los puntos sobran: las tabs fijas ya hacen de navegación */
 .showcase-dots{display:none}
}

/* En pantallas de móvil real (360-430px) cada pastilla se queda en ~110px y el
   icono junto a su hueco se come 31 de los ~75 útiles: "Live shows" pedía 62px
   con 44 disponibles y salía cortado, igual que "Subastas". Apilando el icono
   sobre el texto, el ancho completo de la pastilla queda para la etiqueta. */
@media(max-width:560px){
 .fcard{grid-template-columns:minmax(0,1fr);justify-items:center;
   gap:5px;padding:9px 6px;text-align:center}
 .fcard-body{align-items:center;width:100%}
 .fcard-icon{width:22px;height:22px}
 .fcard-tag{font-size:9.5px;letter-spacing:.03em}
}
@media(prefers-reduced-motion:reduce){
 .phone-slide,.showcase-slide,.fcard{transition-duration:1ms}
}