
:root{
  --gzc-curva:cubic-bezier(.16,.84,.3,1);
  --gzc-vf:2.25;
  --gzc-lift:-18px;
  --gzc-fan:25deg;
}

/* ===== TARJETA MADRE GUMZUX CLUBS ===== */
.gzc-master-card{
  display:block;
  width:min(340px,88vw);
  margin:0 auto;
  border-radius:22px;
  overflow:hidden;
  background:#fff;
  border:1px solid rgba(16,16,18,.1);
  text-decoration:none;
  color:#101012;
  transform:translate3d(0,0,0);
  transition:
    transform calc(.6s*var(--gzc-vf)) var(--gzc-curva),
    box-shadow calc(.6s*var(--gzc-vf)) var(--gzc-curva);
  -webkit-tap-highlight-color:transparent;
}
.gzc-master-cover{
  position:relative;
  display:flex;
  flex-direction:column;
  aspect-ratio:1/1;
  overflow:hidden;
  padding:8%;
  color:#fff;
  background:linear-gradient(135deg,var(--g1) 0%,var(--g2) 48%,var(--g3) 100%);
}
.gzc-master-cover::before{
  content:"";
  position:absolute;inset:0;z-index:4;pointer-events:none;
  background-image:url("../cards/gzc-card-grain.png");
  opacity:.075;
  mix-blend-mode:soft-light;
}
.gzc-master-cover::after{
  content:"";
  position:absolute;inset:0;z-index:4;pointer-events:none;
  background:linear-gradient(90deg,rgba(16,16,18,.14),transparent 48%,rgba(255,255,255,.04));
}
.gzc-master-tx{position:static;width:auto}
.gzc-master-code{
  position:absolute;left:8%;bottom:7%;z-index:3;
  display:block;font-size:10px;font-weight:800;letter-spacing:.16em;opacity:.72
}
.gzc-master-area{
  position:absolute;right:8%;top:8.5%;z-index:3;
  display:block;background:#101012;color:#fff;
  padding:7px 13px;border-radius:999px;
  font-size:11.5px;font-weight:780;letter-spacing:-.03em
}
.gzc-master-title{
  position:absolute;left:8%;top:7.5%;width:78%;z-index:3;
  display:block;margin:0;
  font-size:29px;line-height:.9;letter-spacing:-.055em;font-weight:780;
  text-shadow:0 2px 8px rgba(0,0,0,.45),0 1px 22px rgba(0,0,0,.3)
}
.gzc-master-obj{
  position:absolute;z-index:2;
  width:137%;right:-14.1%;bottom:-11.5%;
  filter:drop-shadow(0 18px 22px rgba(0,0,0,.22));
  transform:translate3d(16%,20%,0) scale(.94);
  opacity:0;
  transition:
    transform calc(1s*var(--gzc-vf)) var(--gzc-curva),
    opacity calc(.8s*var(--gzc-vf)) var(--gzc-curva),
    filter calc(.9s*var(--gzc-vf)) var(--gzc-curva);
  will-change:transform,opacity,filter;
}
.gzc-master-card.is-seen .gzc-master-obj{transform:none;opacity:1}

.gzc-master-page{
  position:absolute;z-index:1;
  width:56%;right:-2%;bottom:-6%;
  aspect-ratio:3/4;border-radius:6px;
  background:#ece7da;
  box-shadow:0 2px 0 rgba(0,0,0,.08) inset;
  opacity:0;
  transform:translate3d(0,0,0) rotate(0deg);
  transform-origin:85% 95%;
  transition:
    transform calc(.65s*var(--gzc-vf)) var(--gzc-curva),
    opacity calc(.5s*var(--gzc-vf)) var(--gzc-curva);
  will-change:transform,opacity;
}
.gzc-master-page::after{
  content:"";position:absolute;left:12%;top:12%;right:14%;height:4%;
  background:rgba(16,16,18,.35);
  box-shadow:0 190% 0 rgba(16,16,18,.14),0 320% 0 rgba(16,16,18,.14),0 450% 0 rgba(16,16,18,.14)
}
.gzc-master-page.p2{background:#f4f0e5}
.gzc-master-card.is-seen .gzc-master-page{opacity:1}
.gzc-master-card.is-active{
  transform:translate3d(0,var(--gzc-lift),0);
  box-shadow:0 28px 54px rgba(16,16,18,.16)
}
.gzc-master-card.is-seen.is-active .gzc-master-page.p1{
  transform:translate3d(-9%,1%,0) rotate(calc(var(--gzc-fan)*-1))
}
.gzc-master-card.is-seen.is-active .gzc-master-page.p2{
  transform:translate3d(-4.5%,.5%,0) rotate(calc(var(--gzc-fan)*-.45))
}
.gzc-master-card.is-seen.is-active .gzc-master-obj{
  transform:translate3d(0,-4px,0) rotate(1.6deg);
  filter:drop-shadow(0 26px 32px rgba(0,0,0,.3))
}
.gzc-master-body{
  display:flex;flex-direction:column;gap:7px;
  padding:18px;position:relative;z-index:5;background:#fff
}
.gzc-master-h{font-size:16.5px;font-weight:640;line-height:1.24;letter-spacing:-.012em}
.gzc-master-p{font-size:13.5px;line-height:1.45;color:rgba(16,16,18,.62);margin:0}
.gzc-master-e{display:inline-flex;align-items:center;gap:6px;margin-top:10px;background:var(--g2);color:#fff;padding:9px 15px;border-radius:999px;font-size:13px;font-weight:800;letter-spacing:0;width:-moz-fit-content;width:fit-content}

/* ===== HOME: mockup aislado de la tarjeta, SIN textos ===== */
.gzc-feature-mockup{
  position:relative;
  width:min(660px,96%);
  aspect-ratio:1/1;
  margin:auto;
  overflow:visible;
}
.gzc-feature-mockup .gzc-feature-page{
  position:absolute;z-index:1;
  width:34%;right:22%;bottom:13%;
  aspect-ratio:3/4;border-radius:8px;
  background:#ece7da;
  box-shadow:0 2px 0 rgba(0,0,0,.08) inset;
  opacity:0;
  transform-origin:85% 95%;
  transform:translate3d(0,0,0) rotate(0deg);
  transition:
    transform calc(.65s*var(--gzc-vf)) var(--gzc-curva),
    opacity calc(.5s*var(--gzc-vf)) var(--gzc-curva);
}
.gzc-feature-mockup .gzc-feature-page::after{
  content:"";position:absolute;left:12%;top:12%;right:14%;height:4%;
  background:rgba(16,16,18,.30);
  box-shadow:0 190% 0 rgba(16,16,18,.12),0 320% 0 rgba(16,16,18,.12),0 450% 0 rgba(16,16,18,.12)
}
.gzc-feature-mockup .gzc-feature-page.p2{background:#f4f0e5}
.gzc-feature-book{
  position:absolute;z-index:2;
  width:137%;right:-14.1%;bottom:-11.5%;
  opacity:0;
  transform:translate3d(16%,20%,0) scale(.94);
  filter:drop-shadow(0 24px 28px rgba(0,0,0,.24));
  transition:
    transform calc(1s*var(--gzc-vf)) var(--gzc-curva),
    opacity calc(.8s*var(--gzc-vf)) var(--gzc-curva),
    filter calc(.9s*var(--gzc-vf)) var(--gzc-curva);
  will-change:transform,opacity,filter;
}
.gzc-feature-mockup.is-seen .gzc-feature-book{opacity:1;transform:none}
.gzc-feature-mockup.is-seen .gzc-feature-page{opacity:1}
.gzc-feature-mockup.is-active .gzc-feature-page.p1{
  transform:translate3d(-9%,1%,0) rotate(calc(var(--gzc-fan)*-1))
}
.gzc-feature-mockup.is-active .gzc-feature-page.p2{
  transform:translate3d(-4.5%,.5%,0) rotate(calc(var(--gzc-fan)*-.45))
}
.gzc-feature-mockup.is-active .gzc-feature-book{
  transform:translate3d(0,-4px,0) rotate(1.6deg);
  filter:drop-shadow(0 32px 40px rgba(0,0,0,.30))
}

/* ===== HOME: carrusel ===== */
.gzc-catalog-track{
  display:flex;gap:24px;overflow-x:auto;scroll-snap-type:x mandatory;
  padding:46px max(24px,calc((100vw - 1180px)/2 + 24px)) 58px;
  scrollbar-width:none
}
.gzc-catalog-track::-webkit-scrollbar{display:none}
.gzc-catalog-unit{flex:0 0 min(340px,82vw);scroll-snap-align:center}
.gzc-catalog-actions{
  display:flex;align-items:center;gap:12px;flex-wrap:wrap;
  padding:14px 5px 0
}
.gzc-catalog-actions a{
  min-height:42px;display:inline-flex;align-items:center;
  color:#101012;font-size:12px;font-weight:850;
}
.gzc-catalog-actions .more{
  text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:5px
}
.gzc-catalog-actions .notify{
  padding:0 13px;border-radius:12px;background:#101012;color:#fff;text-decoration:none
}

/* ===== FICHAS: tarjeta completa a la derecha ===== */
.gzc-product-card-stage{
  min-width:0;
  display:flex;
  justify-content:center;
  align-items:flex-start;
  position:sticky;
  top:112px;
  padding:18px 0 28px;
}
.product-grid:has(.gzc-product-card-stage){align-items:start}
.gzc-product-card-stage .gzc-master-card{width:min(340px,100%)}

/* La antigua cubierta editorial deja de imponer caja */
.product-grid .gzc-product-card-stage.product-cover{
  min-height:0;padding:18px 0;border:0;border-radius:0;overflow:visible;background:transparent
}

@media(max-width:820px){
  .gzc-feature-mockup{width:min(520px,96%)}
  .gzc-catalog-track{gap:18px;padding-left:8vw;padding-right:8vw}
  .gzc-catalog-unit{flex-basis:min(340px,84vw)}
  .gzc-master-card.is-active{transform:translate3d(0,-10px,0)}
}
@media(max-width:760px){
  .gzc-product-card-stage{position:relative;top:auto;padding-top:6px}
  .product-grid:has(.gzc-product-card-stage){grid-template-columns:1fr}
}
@media(prefers-reduced-motion:reduce){
  .gzc-master-card,.gzc-master-obj,.gzc-master-page,
  .gzc-feature-book,.gzc-feature-page{
    transition:none!important;animation:none!important
  }
  .gzc-master-card,.gzc-master-card.is-active{transform:none!important}
  .gzc-master-obj,.gzc-feature-book{transform:none!important;opacity:1!important}
  .gzc-master-page,.gzc-feature-page{opacity:0!important;transform:none!important}
}


/* Blindaje V4: neutraliza la animación heredada del preview anterior
   únicamente para el nuevo mockup de libro. */
.gz-feature-product .gz-feature-visual .gzc-feature-mockup .gzc-feature-book{
  position:absolute;
  z-index:2;
  width:137%;
  max-width:none;
  height:auto;
  right:-14.1%;
  bottom:-11.5%;
  opacity:0;
  transform:translate3d(16%,20%,0) scale(.94);
  filter:drop-shadow(0 24px 28px rgba(0,0,0,.24));
  transition:
    transform calc(1s*var(--gzc-vf)) var(--gzc-curva),
    opacity calc(.8s*var(--gzc-vf)) var(--gzc-curva),
    filter calc(.9s*var(--gzc-vf)) var(--gzc-curva);
}
.gz-feature-product .gz-feature-visual .gzc-feature-mockup.is-seen .gzc-feature-book{
  opacity:1;
  transform:none;
}
.gz-feature-product.is-active .gz-feature-visual .gzc-feature-mockup.is-active .gzc-feature-book,
.gz-feature-product .gz-feature-visual .gzc-feature-mockup.is-active .gzc-feature-book{
  opacity:1;
  transform:translate3d(0,-4px,0) rotate(1.6deg);
  filter:drop-shadow(0 32px 40px rgba(0,0,0,.30));
}
@media(max-width:820px){
  .gz-feature-product .gz-feature-visual .gzc-feature-mockup .gzc-feature-book{
    width:137%;
    max-width:none;
  }
}
@media(prefers-reduced-motion:reduce){
  .gz-feature-product .gz-feature-visual .gzc-feature-mockup .gzc-feature-book{
    transform:none!important;
    opacity:1!important;
  }
}


/* ===== V6 · CARRUSEL UX ===== */
.gzc-slider-shell{
  position:relative;
  width:100%;
  overflow:hidden;
}
.gzc-slider-shell .gzc-catalog-track{
  scroll-behavior:smooth;
  overscroll-behavior-inline:contain;
  -webkit-overflow-scrolling:touch;
}
.gzc-slider-arrow{
  position:absolute;
  top:50%;
  z-index:12;
  width:48px;
  height:48px;
  border:0;
  border-radius:14px;
  display:flex;
  align-items:center;
  justify-content:center;
  background:#101012;
  color:#fff;
  font-size:22px;
  font-weight:800;
  line-height:1;
  cursor:pointer;
  transform:translateY(-50%);
  box-shadow:0 12px 28px rgba(16,16,18,.18);
  transition:transform .18s ease, opacity .18s ease, background .18s ease;
}
.gzc-slider-arrow:hover{
  transform:translateY(-50%) scale(1.06);
  background:#262629;
}
.gzc-slider-arrow:focus-visible{
  outline:2px solid #101012;
  outline-offset:4px;
}
.gzc-slider-prev{left:18px}
.gzc-slider-next{right:18px}
.gzc-slider-live{
  position:absolute!important;
  width:1px!important;
  height:1px!important;
  padding:0!important;
  margin:-1px!important;
  overflow:hidden!important;
  clip:rect(0,0,0,0)!important;
  white-space:nowrap!important;
  border:0!important;
}
@media(max-width:860px){
  .gzc-slider-arrow{display:none}
  .gzc-slider-shell .gzc-catalog-track{
    touch-action:pan-x pan-y;
  }
}
@media(prefers-reduced-motion:reduce){
  .gzc-slider-shell .gzc-catalog-track{scroll-behavior:auto}
  .gzc-slider-arrow{transition:none}
}


/* ===== V6.1 · AUTOPLAY VISIBLE ===== */
@media(min-width:861px){
  .gzc-slider-shell[data-gzc-auto-running] .gzc-slider-next{
    animation:gzcAutoHint 1.8s ease-in-out infinite;
  }
}
@keyframes gzcAutoHint{
  0%,100%{transform:translateY(-50%) translateX(0)}
  50%{transform:translateY(-50%) translateX(3px)}
}
@media(prefers-reduced-motion:reduce){
  .gzc-slider-shell[data-gzc-auto-running] .gzc-slider-next{
    animation:none!important;
  }
}

/* == gancho + numero (integracion tarjetas) == */
.gzc-master-hook{font-size:14px;font-weight:640;line-height:1.34;letter-spacing:-.01em;color:#101012}
.gzc-master-p{color:rgba(16,16,18,.6)}
.gzc-master-foot{display:flex;align-items:center;justify-content:space-between;margin-top:11px}
.gzc-master-foot .gzc-master-e{margin-top:0}
.gzc-master-num{font-size:20px;font-weight:800;letter-spacing:-.03em;line-height:1;color:rgba(16,16,18,.24)}
