/* Grilla de Productos – v2.0.0 */
.gpe-grid{
  --gpe-accent:#f59e0b;--gpe-card:#fff;--gpe-ring:#fff;--gpe-line:#e8eaee;
  --gpe-badge-bg:#1f2026;--gpe-badge-ico:#f59e0b;
  --gpe-title:#1b1d24;--gpe-desc:#656b78;
  --gpe-btn-bg:#1f2026;--gpe-btn-ink:#fff;--gpe-btn-hover-bg:#f59e0b;--gpe-btn-hover-ink:#16171b;
  display:grid;gap:22px;grid-template-columns:repeat(3,1fr);
}
.gpe-grid *{box-sizing:border-box}
.gpe-card{position:relative;background:var(--gpe-card);border:1px solid var(--gpe-line);border-radius:22px;padding:10px;
  box-shadow:0 1px 2px rgba(20,25,35,.05),0 8px 24px -12px rgba(20,25,35,.12);
  transition:transform .5s cubic-bezier(.2,.8,.2,1),box-shadow .5s cubic-bezier(.2,.8,.2,1),border-color .4s}
.gpe-wrap{position:relative}
.gpe-media{position:relative;border-radius:14px;overflow:hidden;aspect-ratio:4/3;isolation:isolate;margin:0}
.gpe-media img.gpe-img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block;transition:transform 1.1s cubic-bezier(.2,.8,.2,1)}
.gpe-media::after{content:"";position:absolute;inset:0;z-index:2;pointer-events:none;
  background:linear-gradient(115deg,transparent 35%,rgba(255,255,255,.28) 50%,transparent 65%);transform:translateX(-120%)}

/* Insignia */
.gpe-badge{position:absolute;top:-2px;z-index:3;width:68px;height:68px;border-radius:50%;background:var(--gpe-badge-bg);color:var(--gpe-badge-ico);
  display:grid;place-items:center;border:7px solid var(--gpe-ring);font-size:26px;line-height:1;
  transition:transform .55s cubic-bezier(.3,1.4,.4,1),box-shadow .5s}
.gpe-badge i,.gpe-badge svg{width:1em;height:1em;font-size:inherit;color:inherit;fill:currentColor;display:block;
  transition:transform .55s cubic-bezier(.3,1.4,.4,1)}
.gpe-badge-left .gpe-badge{left:-2px}
.gpe-badge-right .gpe-badge{right:-2px}

/* Cuerpo */
.gpe-body{display:flex;flex-direction:column;gap:8px;padding:18px 10px 10px}
.gpe-title{font-size:18px;font-weight:800;letter-spacing:-.015em;line-height:1.25;margin:0;color:var(--gpe-title)}
.gpe-desc{font-size:14px;line-height:1.55;margin:0;color:var(--gpe-desc)}

/* Botón */
.gpe-btn{margin-top:10px;display:flex;align-items:center;justify-content:center;gap:10px;width:100%;padding:13px 18px;border-radius:14px;
  background:var(--gpe-btn-bg);color:var(--gpe-btn-ink);font-size:14.5px;font-weight:700;text-decoration:none;position:relative;overflow:hidden;
  border:0;transition:color .35s,box-shadow .35s,transform .2s}
.gpe-btn::before{content:"";position:absolute;inset:0;background:var(--gpe-btn-hover-bg);transform:translateY(101%);transition:transform .45s cubic-bezier(.2,.8,.2,1)}
.gpe-btn>*{position:relative;z-index:1}
.gpe-btn:active{transform:scale(.98)}
.gpe-btn:focus-visible{outline:2px solid var(--gpe-accent);outline-offset:2px}
.gpe-btn .lbl{flex:1;text-align:center}
.gpe-btn .gpe-ico{display:inline-flex;font-size:18px;line-height:1;transition:transform .4s cubic-bezier(.3,1.4,.4,1)}
.gpe-btn .gpe-ico i,.gpe-btn .gpe-ico svg{width:1em;height:1em;font-size:inherit;fill:currentColor;display:block}
.gpe-btn .gpe-arrow{width:18px;height:18px;flex:none;transition:transform .4s cubic-bezier(.2,.8,.2,1)}
.gpe-ico-left .gpe-btn,.gpe-ico-right .gpe-btn{justify-content:space-between}
.gpe-ico-left .gpe-btn .lbl{text-align:left}
.gpe-ico-right .gpe-btn .gpe-ico{order:3}
.gpe-ico-right .gpe-btn .gpe-arrow{order:4}
.gpe-ico-none .gpe-btn .gpe-ico{display:none}

/* Hover premium */
.gpe-fx .gpe-card:hover{transform:translateY(-7px);border-color:color-mix(in srgb,var(--gpe-accent) 45%,var(--gpe-line));
  box-shadow:0 2px 4px rgba(20,25,35,.06),0 28px 48px -20px rgba(20,25,35,.35)}
.gpe-fx .gpe-card:hover .gpe-img{transform:scale(1.07)}
.gpe-fx .gpe-card:hover .gpe-media::after{transform:translateX(120%);transition:transform 1s ease}
.gpe-fx .gpe-card:hover .gpe-badge{transform:rotate(-8deg) scale(1.1);
  box-shadow:0 0 0 1px color-mix(in srgb,var(--gpe-accent) 60%,transparent),0 10px 24px -6px color-mix(in srgb,var(--gpe-accent) 60%,transparent)}
.gpe-fx .gpe-card:hover .gpe-badge i,.gpe-fx .gpe-card:hover .gpe-badge svg{transform:rotate(8deg)}
.gpe-fx .gpe-card:hover .gpe-btn::before,.gpe-fx .gpe-btn:hover::before{transform:translateY(0)}
.gpe-fx .gpe-card:hover .gpe-btn,.gpe-fx .gpe-btn:hover{color:var(--gpe-btn-hover-ink);box-shadow:0 12px 24px -10px color-mix(in srgb,var(--gpe-btn-hover-bg) 80%,transparent)}
.gpe-fx .gpe-card:hover .gpe-arrow{transform:translateX(5px)}
.gpe-fx .gpe-card:hover .gpe-btn .gpe-ico{transform:scale(1.15) rotate(-6deg)}

@media (prefers-reduced-motion:reduce){
  .gpe-card,.gpe-img,.gpe-badge,.gpe-badge i,.gpe-badge svg,.gpe-btn,.gpe-btn::before,.gpe-arrow,.gpe-ico{transition:none!important}
  .gpe-fx .gpe-card:hover,.gpe-fx .gpe-card:hover .gpe-img{transform:none}
  .gpe-media::after{display:none}
}