/* ============================================================================
   PixelClub — Gratis ahora
   ============================================================================
   Un destacado grande y una rejilla de tarjetas. Todo con las variables del
   sistema de diseño: aquí no hay ni un color suelto, así que si mañana cambia
   la paleta esta pantalla cambia con ella.
   ========================================================================== */

/* ── Cabecera ───────────────────────────────────────────────────────────── */

/* El titular NO lleva tamaño propio, y es a propósito.
   Lo tuvo durante un rato: lo subí a 36 px inspirándome en las referencias, y
   solo en esta pantalla. Capturando las dieciséis de golpe se vio el resultado
   —«Gratis ahora» al doble que «Juegos», «Películas» y «Series»— y eso no es
   un titular grande, son dos jerarquías conviviendo.
   Si algún día crecen los titulares, crecen todos a la vez y desde `pages.css`. */

.gratis-cab {
  display: flex;
  align-items: center;
  gap: var(--space-md);
  flex-wrap: wrap;
  margin-bottom: var(--space-xs);
}

/* ── EL RADAR (c-03) ────────────────────────────────────────────────────────
   El bloque que convierte la sección en producto: la cifra viva, el pulso
   («se comprueba cuatro veces al día · última: hace 2 h») y el botón de
   avisos, juntos y arriba — antes ese pulso vivía en el pie de página.
   Superficie del sistema (--pc-capa-1 + filo), no una tarjeta más. */
.gratis-radar {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: var(--space-lg);
  background: var(--pc-capa-1);
  border: 1px solid var(--pc-filo);
  border-left: 4px solid var(--pixel-green);
  border-radius: var(--radius-md);
  padding: var(--space-md) var(--space-lg);
  margin: var(--space-sm) 0 var(--space-md);
}

.gratis-radar-cifra {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
}

/* La cifra es EL dato de la página: tamaño de titular, verde de «gratis». */
.gratis-radar-num {
  font-family: var(--font-pixel);
  font-size: var(--pixel-3xl);
  line-height: 1;
  color: var(--pixel-green);
  text-shadow: 0 0 16px currentColor;
}

.gratis-radar-que {
  font-family: var(--font-pixel);
  font-size: var(--pixel-xs);
  line-height: 1.8;
  color: var(--text-secondary);
  letter-spacing: .04em;
}

.gratis-radar-vida {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
  font-size: var(--text-base);
  line-height: 1.4;
  color: var(--text-secondary);
}

.gratis-radar-linea .ico { color: var(--accent-games); }
.gratis-radar-linea.es-cierre { color: var(--text-primary); }
.gratis-radar-linea.es-cierre .ico { color: var(--accent-danger); }
.gratis-radar-linea.es-fuentes { color: var(--text-muted); font-size: var(--text-sm); }

.gratis-radar-aviso {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 5px;
  text-align: right;
}

.gratis-avisos-btn { white-space: nowrap; }

.gratis-avisos-nota {
  font-size: var(--text-sm);
  color: var(--text-muted);
  max-width: 30ch;
}
.gratis-avisos-nota.es-error { color: var(--accent-danger); }

/* ── La bandera de categoría (c-03) ────────────────────────────────────────
   QUÉ es cada cosa, de un vistazo y sin leer: te lo quedas / siempre gratis /
   solo prueba / próximamente. Cada categoría fija `--cat` (colores de la
   paleta existente, ninguno nuevo) y con él se tiñen su bandera Y el filo
   superior de la tarjeta — el color de la TIENDA baja a rótulo pequeño: de
   dónde viene importa menos que qué te llevas. */
.es-conservar  { --cat: var(--pixel-green); }
.es-permanente { --cat: var(--accent-games); }
.es-prueba     { --cat: var(--accent-series); }
.es-proxima    { --cat: var(--accent-hover-texto); }

.gratis-cat {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-family: var(--font-pixel);
  font-size: var(--pixel-xs);
  letter-spacing: .04em;
  color: var(--cat, var(--text-secondary));
  background: rgba(10, 10, 15, .9);
  border: 1px solid currentColor;
  padding: 5px 8px;
  border-radius: var(--radius-sm);
  white-space: nowrap;
}

/* En la tarjeta va sobre el arte, esquina opuesta al chip de plazo. */
.gratis-card-arte .gratis-cat {
  position: absolute;
  top: 7px;
  left: 7px;
  backdrop-filter: blur(3px);
}

.gratis-sec {
  font-family: var(--font-pixel);
  font-size: var(--pixel-base);
  color: var(--text-secondary);
  letter-spacing: .06em;
  margin: var(--space-xl) 0 var(--space-xs);
}

.gratis-sec-menor {
  font-size: var(--pixel-sm);
  margin-top: var(--space-lg);
}

.gratis-nota,
.gratis-pie {
  margin: 0 0 var(--space-md);
  font-size: var(--text-base);
  line-height: 1.5;
  color: var(--text-muted);
}
/* Más aire arriba desde t-04: aquí había un separador de guiones (a Rubén no
   le gustan) que daba 44 px; sin él quedaban 24 y el pie se pegaba a la
   última sección. Los márgenes verticales se colapsan (manda el mayor, y la
   sección de encima ya trae 24), así que el pie pide el ritmo corto del
   sistema: el hueco queda en 32, el mismo que dejan Ranking y Recomendados
   al quitar el suyo. */
.gratis-pie { margin: var(--pc-ritmo-corto) 0 0; }
.gratis-pie a { color: var(--text-secondary); text-decoration: underline; }

.gratis-sin-arte {
  display: grid;
  place-items: center;
  font-size: 2.6rem;
  background: var(--bg-secondary);
}

/* ── El plazo, que es el dato que hace volver ───────────────────────────── */

.gratis-plazo {
  font-family: var(--font-pixel);
  font-size: var(--pixel-xs);
  color: var(--text-secondary);
  border: 2px solid currentColor;
  padding: 5px 10px;
  border-radius: var(--radius-sm);
  white-space: nowrap;
}

/* Abajo a la derecha (c-03): arriba a la izquierda vive la bandera de
   categoría, y con las dos en la misma franja se pisaban en cuanto la
   tarjeta bajaba de ~300px. En esquinas opuestas cada una tiene su sitio a
   cualquier anchura. */
.gratis-plazo-sm {
  position: absolute;
  bottom: 7px;
  right: 7px;
  border-width: 1px;
  border-color: rgba(255, 255, 255, .22);
  color: var(--text-primary);
  background: rgba(10, 10, 15, .9);
  backdrop-filter: blur(3px);
}

/* Menos de 48 horas. Sin esto la pantalla informa; con esto, avisa. */
@keyframes gratis-latido {
  to { transform: scale(1.05); text-shadow: 0 0 18px currentColor; }
}
.gratis-urge {
  color: var(--accent-danger);
  border-color: var(--accent-danger);
  text-shadow: 0 0 10px currentColor;
  /* Late para llevar el ojo directo a la urgencia. A saltos, como el pixel-art;
     se desactiva en prefers-reduced-motion (al final del archivo). */
  animation: gratis-latido 1s steps(2) infinite alternate;
  transform-origin: center;
}

/* ── El destacado ───────────────────────────────────────────────────────── */

/* Cinematográfico: la portada del juego estrella es el FONDO a sangre del
   bloque, con el texto encima sobre un degradado. Se lee como un póster de
   tienda en vez de una miniatura encajada. El borde y el halo heredan el color
   de la tienda (--c), igual que ya hacen las tarjetas. */
.gratis-hero {
  position: relative;
  display: flex;
  align-items: flex-end;
  min-height: 340px;
  background: var(--bg-card);
  /* El marco también habla en el idioma de la categoría (c-03): el verde de
     «te lo quedas» enmarca al destacado igual que tiñe el filo de su
     tarjeta pequeña. La tienda se lee dentro, en su rótulo. */
  border: 3px solid var(--cat, var(--c, var(--accent-games)));
  box-shadow: 0 0 0 3px var(--bg-primary),
              0 0 34px color-mix(in srgb, var(--cat, var(--c, var(--accent-games))) 30%, transparent);
  border-radius: var(--radius-lg);
  overflow: hidden;
  margin: var(--space-lg) 0 var(--space-xs);
}

.gratis-hero-arte { position: absolute; inset: 0; overflow: hidden; }
.gratis-hero-img  { width: 100%; height: 100%; object-fit: cover; display: block; }

/* Líneas de barrido. Es lo que hace que esto se lea como una pantalla y no
   como una tarjeta grande, y es coherente con la intro CRT de la web. */
.gratis-hero-arte::after {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: repeating-linear-gradient(0deg, rgba(0,0,0,.32) 0 1px, transparent 1px 3px);
  mix-blend-mode: multiply;
}

.gratis-hero-txt {
  position: relative;
  z-index: 1;
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
  padding: var(--space-2xl) var(--space-lg) var(--space-lg);
  /* El texto va sobre la portada: un degradado de abajo a arriba lo mantiene
     legible sin tapar la imagen. */
  background: linear-gradient(to top,
              rgba(10, 10, 15, .97) 22%,
              rgba(10, 10, 15, .80) 55%,
              rgba(10, 10, 15, .15) 90%,
              transparent);
}

.gratis-hero-alto { display: flex; align-items: center; gap: var(--space-xs); flex-wrap: wrap; }

.gratis-hero-tienda {
  font-family: var(--font-pixel);
  font-size: var(--pixel-xs);
  color: var(--text-inverse);
  background: var(--c);
  padding: 6px 10px;
  border-radius: var(--radius-sm);
}

/* El título manda (c-03): es el juego que te llevas, y estaba al tamaño de
   un rótulo de tarjeta mientras la descripción —que además llega en el
   idioma de la tienda— ocupaba tres líneas grandes. Se invierte: título de
   escaparate, descripción de apoyo a dos líneas. */
.gratis-hero-tit {
  font-family: var(--font-pixel);
  font-size: var(--pixel-2xl);
  color: var(--text-primary);
  line-height: 1.35;
  margin: 2px 0;
  text-shadow: 0 2px 0 rgba(0, 0, 0, .6);
}

.gratis-hero-desc {
  margin: 0;
  font-size: var(--text-base);
  line-height: 1.35;
  color: var(--text-secondary);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  max-width: 72ch;
}

.gratis-hero-pie {
  display: flex;
  align-items: center;
  gap: var(--space-md);
  flex-wrap: wrap;
  margin-top: auto;
  padding-top: var(--space-xs);
}
.gratis-hero-pie s { color: var(--text-muted); font-size: var(--text-lg); }

/* Metadatos de confianza: UNA línea apagada (c-03). Antes eran hasta siete
   cajitas con borde que pesaban más que el título al que acompañaban. */
.gratis-meta {
  margin: 0;
  color: var(--text-muted);
  font-size: var(--text-sm);
  line-height: 1.45;
}

.gratis-meta-sep { opacity: .5; }

.gratis-free-lg {
  font-family: var(--font-pixel);
  font-size: var(--pixel-base);
  color: var(--pixel-green);
  text-shadow: 0 0 14px currentColor;
}

/* El botón es el del sistema (`pixel-btn pixel-btn-primary`): de contorno, no
   un bloque relleno. Aquí solo se coloca y se redondea — el aspecto lo pone
   `pixel-effects.css`, que es lo que hace que se parezca al resto de la web. */
.gratis-hero-btn {
  margin-left: auto;
  padding: var(--space-md) var(--space-xl);
  border-radius: var(--radius-md);
}

/* ── La rejilla ─────────────────────────────────────────────────────────── */

.gratis-rejilla {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
  gap: var(--space-md);
  margin-bottom: var(--space-lg);
}

.gratis-card {
  display: flex;
  flex-direction: column;
  background: var(--bg-card);
  border: 2px solid rgba(255, 255, 255, .09);
  /* La franja de color pasa de la TIENDA a la CATEGORÍA (c-03): «te lo
     quedas» en verde y «solo prueba» en ámbar ordenan la página sin leer
     nada; de qué tienda viene lo dice el rótulo pequeño de dentro. Si una
     tarjeta no trae categoría (no debería), cae al color de tienda. */
  border-top: 4px solid var(--cat, var(--c));
  border-radius: var(--radius-md);
  overflow: hidden;
  transition: transform .15s ease, border-color .15s ease;
}
.gratis-card:hover { transform: translateY(-3px); border-color: rgba(255, 255, 255, .2); }

.gratis-card-arte { position: relative; aspect-ratio: 16 / 9; overflow: hidden; }
.gratis-card-img  { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .2s steps(4); }
/* Zoom sutil al pasar el ratón: escaparate premium sin cambiar el tamaño de la
   caja. Se desactiva en prefers-reduced-motion (al final). */
.gratis-card:hover .gratis-card-img { transform: scale(1.06); }
/* Dos penumbras, una por esquina habitada (c-03): arriba la bandera de
   categoría, abajo el chip de plazo. Así los dos se leen caiga la portada
   que caiga, y el centro del arte queda limpio. */
.gratis-card-arte::after {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    linear-gradient(to bottom, rgba(10, 10, 15, .6), transparent 42%),
    linear-gradient(to top, rgba(10, 10, 15, .65), transparent 42%);
}

.gratis-card-txt {
  display: flex;
  flex-direction: column;
  gap: var(--space-xs);
  padding: var(--space-sm) var(--space-sm) var(--space-sm);
  flex: 1;
}

/* El nombre de la tienda hereda su color de marca (`--c`), pero como LETRA de
   8 px algunos no llegan al 4,5:1 (el morado de GOG medía 2,9:1 sobre la
   tarjeta). `--c-texto` es la variante legible que pone Gratis.js solo para
   esas tiendas; el resto cae al propio `--c` y no cambia nada. */
.gratis-card-tienda { font-family: var(--font-pixel); font-size: var(--pixel-xs); color: var(--c-texto, var(--c)); }

.gratis-card-tit {
  font-family: var(--font-pixel);
  font-size: var(--pixel-sm);
  color: var(--text-primary);
  line-height: 1.5;
  margin: 0;
  flex: 1;
}

.gratis-card-pie { display: flex; align-items: center; justify-content: space-between; gap: var(--space-xs); }
.gratis-card-pie s { color: var(--text-muted); font-size: var(--text-base); }
.gratis-card-precio { display: inline-flex; align-items: center; gap: 5px; flex-wrap: wrap; }

.gratis-free {
  font-family: var(--font-pixel);
  font-size: var(--pixel-xs);
  color: var(--pixel-green);
  text-shadow: 0 0 9px currentColor;
}

.gratis-card-btn {
  margin-top: auto;
  width: 100%;
  border-radius: var(--radius-md);
}

.gratis-acciones {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-xs);
  width: 100%;
}

.gratis-hero-pie .gratis-acciones {
  width: auto;
  margin-left: auto;
}

.gratis-hero-pie .gratis-hero-btn { margin-left: 0; }

/* ── Compartir una oferta (a-03) ───────────────────────────────────────── */
/*
   El botón es deliberadamente menor que el de RECLAMAR: compartir es la
   acción secundaria. El menú solo existe donde no hay Web Share API
   (escritorio): posición absoluta sobre su propio contenedor para no
   empujar la tarjeta al abrirse.
*/
.gratis-compartir {
  position: relative;
  display: inline-block;
}

.gratis-btn-compartir {
  font-size: var(--pixel-xs, 8px);
  padding: 6px 10px;
  opacity: .85;
}

.gratis-btn-compartir:hover { opacity: 1; }

.gratis-compartir-menu {
  position: absolute;
  bottom: calc(100% + 4px);
  right: 0;
  z-index: 5;
  display: flex;
  flex-direction: column;
  min-width: 150px;
  background: var(--bg-card, #14141f);
  border: 2px solid var(--border-color, #2a2a3a);
  box-shadow: 0 6px 18px rgba(0, 0, 0, .55);
}

.gratis-compartir-menu [role="menuitem"] {
  display: block;
  padding: 8px 10px;
  font-family: inherit;
  font-size: var(--pixel-xs, 8px);
  text-align: left;
  color: var(--text-primary, #eee);
  background: none;
  border: 0;
  border-bottom: 1px solid var(--border-color, #2a2a3a);
  text-decoration: none;
  cursor: pointer;
}

.gratis-compartir-menu [role="menuitem"]:last-child { border-bottom: 0; }

.gratis-compartir-menu [role="menuitem"]:hover,
.gratis-compartir-menu [role="menuitem"]:focus-visible {
  background: rgba(255, 255, 255, .06);
  color: var(--accent-info, #4dd7ff);
}

.gratis-vacio {
  margin: var(--space-md) 0 var(--space-lg);
  padding: var(--space-lg);
}

/* Los anunciados se ven, pero no compiten con lo que se puede pillar hoy. */
.gratis-card-prox { opacity: .8; }
/* Los anunciados usan el `pixel-btn` sin `-primary`: mismo botón, sin el
   turquesa, para que no compitan con lo que se puede pillar hoy. */

/* ── Ahorro, barra de tiempo y frescura (extensiones aditivas) ──────────── */

/* Cada juego de pago, una micro-oferta: «-100%» + «Ahorras <precio>». Solo se
   pinta cuando hay precioNormal (los free-to-play no lo llevan). */
.gratis-descuento {
  font-family: var(--font-pixel);
  font-size: var(--pixel-xs);
  color: var(--accent-danger);
  border: 2px solid currentColor;
  padding: 3px 7px;
  border-radius: var(--radius-sm);
  text-shadow: 0 0 8px currentColor;
}
.gratis-ahorro {
  font-family: var(--font-pixel);
  font-size: var(--pixel-xs);
  color: var(--pixel-green);
  text-shadow: 0 0 8px currentColor;
}

/* Barra que se agota: escasez que se capta de reojo. Verde con margen, roja
   cuando queda poco. Es una anchura fija calculada al pintar, no anima nada. */
.gratis-barra {
  width: 100%;
  height: 5px;
  background: rgba(255, 255, 255, .1);
  border-radius: var(--radius-full);
  overflow: hidden;
  margin-top: 4px;
}
.gratis-barra span { display: block; height: 100%; background: var(--pixel-green); }
.gratis-barra-urge span { background: var(--accent-danger); }


/* ── Móvil ──────────────────────────────────────────────────────────────── */

@media (max-width: 860px) {
  .gratis-hero { grid-template-columns: 1fr; min-height: 300px; }
  .gratis-hero-arte { min-height: 0; aspect-ratio: 16 / 9; }
  .gratis-hero-btn { margin-left: 0; width: 100%; text-align: center; }
  .gratis-hero-tit { font-size: var(--pixel-lg); }
  .gratis-hero-pie .gratis-acciones { width: 100%; margin-left: 0; }

  /* El radar se apila: cifra arriba, pulso en medio, botón a lo ancho. */
  .gratis-radar {
    grid-template-columns: 1fr;
    gap: var(--space-sm);
    padding: var(--space-md);
  }
  .gratis-radar-aviso { align-items: stretch; text-align: left; }
  .gratis-avisos-btn { width: 100%; text-align: center; white-space: normal; }
  .gratis-avisos-nota { max-width: none; }
}

@media (max-width: 560px) {
  .gratis-rejilla { grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: var(--space-sm); }
  .gratis-cab { gap: var(--space-xs); }
  .gratis-meta { font-size: var(--text-xs); }
  .gratis-radar-num { font-size: var(--pixel-2xl); }
}

/* Quien haya pedido menos movimiento en el sistema, que no lo tenga. */
@media (prefers-reduced-motion: reduce) {
  .gratis-card, .gratis-hero-btn, .gratis-card-img { transition: none; }
  .gratis-card:hover { transform: none; }
  .gratis-card:hover .gratis-card-img { transform: none; }
  .gratis-hero-btn:hover { transform: none; }
  /* El plazo urgente deja de latir: se queda fijo, sin movimiento. */
  .gratis-urge { animation: none; transform: none; }
}

/* ── Los iconos ─────────────────────────────────────────────────────────── */
/*
   Se alinean con el texto que llevan al lado. `currentColor` ya está en el SVG,
   así que el color lo pone quien los contenga: el mismo icono sale turquesa en
   una tarjeta de Epic y rojo con brillo en un plazo que se acaba.
*/
.ico {
  display: inline-block;
  vertical-align: -0.15em;
  /* Sin esto el navegador los suaviza al escalarlos y se pierde el píxel, que
     es exactamente lo que los hacía encajar con la tipografía. */
  image-rendering: pixelated;
  shape-rendering: crispEdges;
  flex-shrink: 0;
}

.gratis-sin-arte .ico { opacity: .35; }

/* ── El archivo mensual, /gratis/AAAA-MM (t-08) ───────────────────────────
   Solo clases nuevas: nada de lo de arriba se toca. Reutiliza .gratis-sec,
   .gratis-nota, .gratis-rejilla y .gratis-pie tal cual (misma jerarquía
   visual que /gratis). */

/* El enlace a los meses, al final de /gratis. */
.gratis-meses {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-sm);
  margin: 0 0 var(--space-md);
}
.gratis-meses a {
  font-size: var(--text-sm);
  color: var(--text-secondary);
  text-decoration: underline;
  text-transform: capitalize;
}

/* «Ya terminaron»: lista, no rejilla de tarjetas — son registro, no reclamo. */
.gratis-mes-lista {
  list-style: none;
  margin: 0 0 var(--space-md);
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-xs);
}
.gratis-mes-fin {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-xs) var(--space-sm);
  padding: var(--space-xs) 0;
  border-bottom: 1px solid var(--border-color, #2a2a3a);
  font-size: var(--text-sm);
}
.gratis-mes-fin a { color: inherit; text-decoration: none; }
.gratis-mes-fin a:hover strong { text-decoration: underline; }
.gratis-mes-tienda { color: var(--text-secondary); }
.gratis-mes-plazo { color: var(--text-muted); white-space: nowrap; }

.gratis-mes-resumen {
  font-size: var(--text-sm);
  color: var(--text-muted);
  margin: 0 0 var(--space-md);
}

/* Navegación entre meses: anterior, /gratis y siguiente, en la misma fila. */
.gratis-mes-nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-sm);
  margin: var(--space-lg) 0;
  padding-top: var(--space-md);
  border-top: 1px solid var(--border-color, #2a2a3a);
  font-size: var(--text-sm);
}
.gratis-mes-nav a { color: var(--text-secondary); text-decoration: underline; text-transform: capitalize; }
.gratis-mes-nav a:nth-child(2) { text-transform: none; }

@media (max-width: 480px) {
  .gratis-mes-nav { font-size: var(--text-xs); }
}