/* =====================================================================
   GANADORES: barra de mes, dias y tarjetas (plugin "Premios" de
   WordPress + los retoques de su CSS adicional: titulo en blanco,
   tarjetas de 280px centradas, marco blanco en la imagen).
   ===================================================================== */

/* Ancho del contenedor del tema (1222 px con 15 px a cada lado = 1192 px
   utiles): ahi entran justo 4 tarjetas de 280 px con 24 px entre ellas,
   como en WordPress. Con 1200 px menos el margen solo entraban 3. */
.ganadores-wrap{padding-bottom:30px;overflow-anchor:none}
.g-header{text-align:center;margin:0 0 10px}
.g-header h3{font-weight:400;color:#fff;margin:0;font-size:22px}
@media (max-width:768px){.g-header h3{font-size:14px}}

.g-month-bar{display:flex;align-items:center;justify-content:center;gap:12px;margin:10px 0}
.g-prev,.g-next{cursor:pointer;border:0;border-radius:10px;padding:10px 14px;background:#eaeaea;font-size:18px;line-height:1}
.g-prev:disabled,.g-next:disabled{opacity:.4;cursor:not-allowed}
.g-month-pill{background:#3b82f6;color:#fff;font:800 15px/1.2 var(--fuente);border-radius:12px;padding:10px 16px;min-width:220px;border:0;cursor:pointer}

/* ---- Chips de dias ---- */
.g-days{display:flex;gap:28px;justify-content:center;flex-wrap:wrap;margin:12px 0 24px;overflow:visible}
/* La rayita gris entre dia y dia; en el celular no va (rompe los 4 por fila) */
.g-day-sep{width:1px;height:36px;background:#ccc;align-self:center}
.g-day-chip{position:relative;display:flex;flex-direction:column;align-items:center;gap:4px;padding:10px 14px;border:2px solid transparent;border-radius:12px;background:#fff;cursor:pointer;font:inherit;color:inherit}
.g-day-chip:hover{border-color:#cbd5e1}
.g-day-chip .dow{font-size:12px;line-height:1;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:#6b7280}
.g-day-chip .num{font-size:28px;line-height:1;font-weight:800;color:#111}
.g-day-chip.activo{background:linear-gradient(90deg,#d6ffb0,#a8ffdb);border-color:transparent}
.g-day-chip.activo::after{content:"";position:absolute;left:50%;bottom:-8px;width:18px;height:18px;background:linear-gradient(90deg,#d6ffb0,#a8ffdb);transform:translateX(-50%) rotate(45deg);border-radius:4px}
@media (max-width:520px){
  .g-days{gap:10px}
  .g-day-sep{display:none}
  .g-day-chip{flex:0 0 calc((100% - 30px) / 4);max-width:calc((100% - 30px) / 4);padding:8px 6px;gap:2px;border-radius:10px}
  .g-day-chip .num{font-size:22px}
  .g-day-chip .dow{font-size:10px;letter-spacing:.08em}
}
@media (max-width:360px){.g-day-chip{flex-basis:calc((100% - 20px) / 3);max-width:calc((100% - 20px) / 3)}}
.g-vacio{text-align:center;color:#fff;opacity:.85;padding:30px 0}

/* ---- Tarjetas: 280px centradas en PC, 2 columnas en celular ---- */
.g-grid{--colw:280px;display:grid;grid-template-columns:repeat(auto-fit,minmax(var(--colw),var(--colw)));justify-content:center;gap:24px}
@media (min-width:992px) and (max-width:1199px){.g-grid{--colw:260px}}
@media (min-width:768px) and (max-width:991px){.g-grid{--colw:300px}}
@media (max-width:640px){
  .g-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}
  .g-grid > .g-card:only-child{grid-column:1/-1;justify-self:center;width:calc((100% - 14px) / 2)}
}
.g-card{position:relative;background:#f0f2f5;border-radius:15px;overflow:hidden;box-shadow:0 6px 16px rgba(0,0,0,.12);margin-bottom:20px}
/* La foto con la forma de las de los premios, --premio-foto (sitio.css:
   1000 x 900), y sus CUATRO esquinas redondeadas (11px, como en Premios),
   dentro de un marco blanco de 7px por los cuatro lados (debajo esta el
   gris de la tarjeta: sin marco abajo, las esquinas de abajo dejarian ver
   el blanco). Esa forma es la del espacio dentro del marco (::after lo
   reserva, haya foto o no). Una foto de otra forma (las de antes, 4:3) lo
   llena recortada por el centro. En PC y en el celular. */
.g-card .img{position:relative;width:100%;padding:7px;background:#fff;border-radius:12px 12px 0 0;line-height:0}
.g-card .img::after{content:"";display:block;aspect-ratio:var(--premio-foto)}
.g-card .img::before{content:"";position:absolute;inset:7px;background:#f6f6f6;border-radius:11px}
.g-card .img img{position:absolute;top:7px;left:7px;width:calc(100% - 14px);height:calc(100% - 14px);object-fit:cover;display:block;border-radius:11px}
.g-badge{position:absolute;background:#ffd100;color:#111;font-weight:800;top:85px;left:-42px;transform:rotate(-45deg);transform-origin:0 0;padding:4px 50px;font-size:12px;text-align:center;z-index:10;box-shadow:0 2px 6px rgba(0,0,0,.4)}
.g-badge::before{content:"\1F3C6";display:inline-block;font-size:1.1em;line-height:1;filter:grayscale(100%) brightness(.7) contrast(1.05)}
@media (max-width:680px){.g-badge{font-size:10px;padding:3px 34px;top:65px;left:-30px}}
.g-body{padding:6px 14px 14px;text-align:center}
/* En WordPress es un div: toma la letra del cuerpo (Lato), no la de los titulos. */
.g-product{margin:2px 0 8px;font-family:var(--fuente);font-weight:800;font-size:clamp(12px,calc(10px + 1.2vw),18px);line-height:1.25;color:#222;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.g-sep{height:1px;background:#e5e7eb;margin:8px 0}
.g-foot{display:flex;flex-direction:column;gap:6px;align-items:center}
.g-name{font-family:"Segoe UI",Tahoma,Arial,sans-serif;font-size:13px;font-weight:500;color:#7c7676;line-height:1.3}
/* Rayita entre el nombre y el codigo (o el boton "Ver todos") */
.g-name-sep{height:1px;background:#e5e7eb;margin:4px 0;width:100%}
.g-code-row,.g-actions-row{display:flex;align-items:center;justify-content:center;gap:8px}
.g-code{background:#8b3fff;color:#fff;border-radius:999px;font-weight:600;padding:4px 10px;font-size:11px}
.g-vertodos{border:1.5px solid rgba(0,0,0,.55);background:#fff;padding:8px 14px;border-radius:999px;font:800 13px/1.2 var(--fuente);cursor:pointer}
.g-vertodos:hover{background:rgba(0,0,0,.04)}
@media (max-width:480px){.g-vertodos{padding:3px 14px;font-size:12px;font-weight:700;border-width:1px}}
.g-play-btn{width:26px;height:26px;border-radius:999px;background:#8b3fff;border:0;display:inline-flex;align-items:center;justify-content:center;color:#fff;text-decoration:none;transition:background .2s,transform .15s;flex-shrink:0}
.g-play-btn:hover{background:#4a26e0;transform:scale(1.08)}
.g-play-btn svg{width:11px;height:11px;fill:currentColor;margin-left:1px}

/* ---- Ventana "Ver todos" ---- */
.g-wm{position:fixed;inset:0;display:none;align-items:center;justify-content:center;z-index:100001}
.g-wm[aria-hidden="false"]{display:flex}
.g-wm-backdrop{position:absolute;inset:0;background:rgba(0,0,0,.55);backdrop-filter:blur(2px)}
.g-wm-dialog{position:relative;width:min(92vw,520px);max-height:84vh;overflow:hidden;background:#fff;border-radius:22px;box-shadow:0 18px 50px rgba(0,0,0,.35);display:flex;flex-direction:column;color:#111}
.g-wm-close{position:absolute;right:12px;top:10px;width:38px;height:38px;border-radius:999px;border:0;background:#181717;color:#fff;font-size:22px;cursor:pointer;font-weight:900}
.g-wm-head{padding:18px 18px 10px;border-bottom:1px solid rgba(0,0,0,.08);text-align:center}
.g-wm-title{font-size:18px;font-weight:900;letter-spacing:.5px}
.g-wm-sub{margin-top:6px;font-weight:800;opacity:.75}
.g-wm-list{display:flex;flex-direction:column;gap:8px;padding:12px 14px 14px;overflow-y:auto;scrollbar-width:thin;scrollbar-color:rgba(91,52,255,.3) transparent}
.g-wm-foot{padding:0 14px 12px;text-align:center}