/* ==========================================================
   IFRAME + FALDÓN (sin cambios relevantes)
   ========================================================== */

/* ---- Contenedor ---- */
.pg-wrapper{
  position:relative;
  display:block;
  margin-bottom:85px;
  box-shadow:0 2px 8px #049EC5 !important;
}
.pg-wrapper iframe{
  width:100%;
  height:var(--pg-height,640px);
  display:block;
  border:0;
}

/* ---- Capa inicial ---- */
.pg-overlay{
  position:absolute;
  inset:0;
  background:rgba(108,117,125,.85);
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:1rem;
  z-index:10;
  transition:opacity .25s ease;
}
.pg-overlay.pg-hidden{
  opacity:0;
  pointer-events:none;
}

/* ---- Banner fijo inferior ---- */
.pg-banner{
  position:absolute;
  left:0;
  right:0;
  bottom:-65px;
  background:#fff;
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:.5rem 1rem;
  gap:.75rem;
  z-index:11;
  border:1px solid #049EC5;
  box-shadow:0 2px 8px #049EC5 !important;
}
.pg-logo{max-height:34px;width:auto;}

/* ---- Botones ---- */
.pg-btn{
  cursor:pointer;
  font-weight:600;
  font-size:1rem;
  text-align:center;
  text-decoration:none;
  padding:1rem 2.5rem;
  border-radius:0;
  color:#fff;
  user-select:none;
  border:1px solid #fff;
  min-width:230px;
}
.pg-free{background:#000;border:1px solid #ccc;border-radius: 8px; }
.pg-real{    background: #00E08C;    color: #000;    border-radius: 8px;    border: 1px solid #3FBF53;}
.pg-free:hover{background:#888;border:1px solid #ccc;}
.pg-real:hover{background:#000;border:1px solid #3FBF53;color: #fff}
.pg-btn:hover{filter:brightness(1.1);}

/* ---- Responsivo ---- */
@media(max-width:640px){
  .pg-btn{font-size:.875rem;padding:.5rem 1rem;}
  .pg-logo{max-height:28px;}
  .pg-banner{bottom:-55px;}
}


/* ==========================================================
   GRID DE JUEGOS
   ========================================================== */

/* ---------- Grid contenedor ---------- */
.pg-grid{
  display:grid;
  grid-template-columns:repeat(auto-fill,minmax(20%,1fr));
  gap:1% 1%;
  margin-bottom: 4rem;
}
@media(max-width:1024px){
  .pg-grid{grid-template-columns:repeat(auto-fill,minmax(31%,1fr));margin-bottom:6rem;}
}
@media(max-width:640px){
  .pg-grid{grid-template-columns:repeat(auto-fill,minmax(48%,1fr));margin-bottom:8rem;}
}

/* ---------- Tarjeta ---------- */
.pg-card{
  position:relative;
  cursor:pointer;
  display:flex;
  flex-direction:column;
  /* 1️⃣  Elimina overflow:hidden para que se vea el footer */
  border-radius:8px;
  background:#111;
  box-shadow:0 2px 8px #049EC5 !important;
}

/* ---------- Miniatura ---------- */
.pg-thumb{                       /* nuevo contenedor de imagen + overlay */
  position:relative;
  overflow:hidden;               /* 2️⃣  El recorte lo hace aquí */
  border-radius:8px 8px 0 0;     /* solo esquinas superiores */
}
.pg-thumb img{
  width:100%;
  aspect-ratio:1/1;
  object-fit:cover;
  display:block;
  transition:transform .3s ease, filter .3s ease;
}
.pg-card:hover .pg-thumb img{
  transform:scale(1.06);
  filter:brightness(.45);
}

/* ---------- Overlay “Jugar” ---------- */
.pg-overlay-play{
  position:absolute;
  inset:0;
  background:rgba(0,0,0,.55);
  display:flex;
  align-items:center;
  justify-content:center;
  opacity:0;
  transition:opacity .25s ease;
}
.pg-overlay-play .pg-btn{
  padding:.75rem 2.25rem;
  border-radius:22px;
  min-width:auto;
}
.pg-card:hover .pg-overlay-play{opacity:1;}
@media(max-width:640px){
  .pg-overlay-play{opacity:1;}
}

/* ---------- Footer ---------- */
.pg-card-footer{
  padding:.75rem;
  background:#111;              /* 3️⃣  Fondo sólido para contraste */
  color:#fff;
}
.pg-card-title{
  font-weight:600;
  font-size:1rem;
  line-height:1.25;
  color:#fff;
  text-decoration:none;
}