/* Catálogo de juegos online (/juegos-de-logica/). Reutiliza la cabecera, el
   hero y el pie de la portada (style.css + home-v2.css) y la insignia de
   «resuelto» de css/progress.css; aquí solo está lo propio del catálogo. */

.home-v2.games-page{background:#f3efe5}
/* Mismo ancho que el texto del hero (.container): cuatro miniaturas por fila
   con buen tamaño, sin que crezcan en pantallas muy anchas. */
.games-wide{width:min(1180px,calc(100% - 80px));margin:0 auto}

/* ---------- Hero compacto: el catálogo empieza enseguida ----------
   La ilustración ocupa el alto del hero bajo la cabecera (no se recorta el tablero) y
   a su izquierda continúa el mismo color de papel de la imagen. */
.home-v2.games-page .games-hero .hero-art{background:linear-gradient(90deg,rgba(243,239,229,.85) 0%,rgba(243,239,229,.4) 36%,rgba(243,239,229,0) 52%),url('../img/juegos%20de%20logica/juegos%20de%20logica%20hero.webp') right bottom/auto calc(100% - 84px) no-repeat,#f8e6cb}
.home-v2.games-page .games-hero .hero-content{min-height:0;padding-top:138px;padding-bottom:44px}
.home-v2.games-page .games-hero .hero-copy{width:min(50%,600px);max-width:600px}
.home-v2.games-page .games-hero h1{max-width:none;margin:0 0 14px;color:#931d30;font-size:clamp(38px,3.9vw,56px);line-height:1}
.home-v2.games-page .games-hero .hero-copy>p:not(.home-kicker){max-width:520px;margin:0 0 6px;color:#2f2a24;font:400 17.5px/1.5 var(--sans)}
.home-v2.games-page .games-hero .hero-copy>p:nth-of-type(2){color:#284333;font:400 clamp(20px,1.7vw,24px)/1.25 var(--serif)}

/* ---------- Filtros, contador y barra ---------- */
.games-catalog{padding:34px 0 44px}
/* Modalidad | dificultad | resultados: los dos grupos de filtros juntos y el
   contador a la derecha. */
.games-toolbar{display:flex;flex-wrap:wrap;align-items:flex-end;gap:16px 30px;margin-bottom:28px;padding-bottom:22px;border-bottom:1px solid rgba(118,95,72,.2)}
.games-filter-label{margin:0 0 8px;color:#765f48;font:600 12px/1.2 var(--sans);letter-spacing:.06em;text-transform:uppercase}
.games-filter-options{display:flex;flex-wrap:wrap;gap:8px}
.games-filter-button{display:inline-flex;align-items:center;gap:7px;min-height:38px;padding:7px 14px;border:1px solid rgba(118,95,72,.38);border-radius:999px;background:#fbf6ec;color:#1e1e1b;font:400 15.5px/1.1 var(--serif);cursor:pointer;transition:background .18s ease,border-color .18s ease,color .18s ease}
.games-filter-button:hover{border-color:rgba(64,80,68,.7);background:#f4ecdc}
.games-filter-button:focus-visible{outline:3px solid #931d30;outline-offset:2px}
.games-filter-button[aria-pressed="true"]{border-color:#405044;background:#405044;color:#f8f2e7}
.games-filter-count{min-width:18px;color:#765f48;font:600 12px/1 var(--sans);font-variant-numeric:tabular-nums;text-align:center}
.games-filter-button[aria-pressed="true"] .games-filter-count{color:rgba(248,242,231,.82)}
.games-summary{display:grid;justify-items:end;gap:6px;margin-left:auto}
.games-summary-text,.games-summary-static{margin:0;color:#765f48;font:500 14px/1.3 var(--sans);font-variant-numeric:tabular-nums}
.games-summary-static{margin-bottom:24px}
.games-summary-bar{display:block;width:190px;height:3px;border-radius:2px;background:rgba(118,95,72,.16);overflow:hidden}
.games-summary-bar[hidden]{display:none}
.games-summary-bar i{display:block;width:0;height:100%;border-radius:inherit;background:#405044;transition:width .25s ease}

/* ---------- Grupos por modalidad ---------- */
.games-group+.games-group{margin-top:36px}
.games-group[hidden]{display:none}
.games-group-title{display:flex;flex-wrap:wrap;align-items:baseline;gap:.3em;margin:0 0 16px;color:#1e1e1b;font:400 clamp(24px,2.2vw,30px)/1.1 var(--serif);text-transform:uppercase;letter-spacing:.02em}
.games-group-title span{color:#931d30}
.games-group-title small{color:#765f48;font:500 14px/1 var(--sans);letter-spacing:0;text-transform:none}

/* ---------- Miniaturas ---------- */
.games-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:18px;margin:0;padding:0;list-style:none}
.game-thumb[hidden]{display:none}
.game-thumb a{position:relative;display:block;aspect-ratio:4/3;overflow:hidden;border:1px solid rgba(118,95,72,.2);border-radius:7px;background:#e7dfcf;box-shadow:0 2px 8px rgba(60,40,20,.08);transition:transform .2s ease,box-shadow .2s ease}
.game-thumb img{display:block;width:100%;height:100%;object-fit:cover;object-position:center}
/* Las portadas de ajedrez son casi cuadradas: se encuadra la pieza y los libros. */
.game-thumb[data-modality="ajedrez"] img{object-position:50% 62%}
.game-thumb a:hover{box-shadow:0 8px 18px rgba(60,40,20,.18);transform:translateY(-2px)}
.game-thumb a:focus-visible{outline:3px solid #931d30;outline-offset:3px}
.game-thumb-number{position:absolute;top:8px;left:8px;z-index:2;display:grid;place-items:center;min-width:28px;height:28px;padding:0 8px;border-radius:999px;background:rgba(251,246,236,.94);box-shadow:0 1px 3px rgba(40,25,10,.25);color:#931d30;font:400 16px/1 var(--serif);font-variant-numeric:tabular-nums}
.game-thumb .case-solved-badge{position:absolute;top:8px;right:8px;z-index:2;display:grid;place-items:center;width:26px;height:26px;border-radius:50%;background:#405044;box-shadow:0 1px 3px rgba(20,30,20,.3);pointer-events:none}
.game-thumb .case-solved-badge svg{width:19px;height:19px}
/* Nombre del juego al pasar el ratón o con el foco (el enlace ya lo anuncia). */
.game-thumb-title{position:absolute;right:0;bottom:0;left:0;z-index:1;padding:26px 12px 10px;background:linear-gradient(180deg,rgba(28,20,12,0),rgba(28,20,12,.82));color:#f8f2e7;font:400 17px/1.2 var(--serif);opacity:0;transform:translateY(6px);transition:opacity .2s ease,transform .2s ease}
.game-thumb a:hover .game-thumb-title,.game-thumb a:focus-visible .game-thumb-title{opacity:1;transform:none}

.games-empty{margin:10px 0 0;padding:28px 20px;border:1px dashed rgba(118,95,72,.4);border-radius:7px;color:#5b4a38;font:400 18px/1.4 var(--serif);text-align:center}
.games-empty[hidden]{display:none}

/* ---------- Juego aleatorio: el pergamino de la web ---------- */
.games-random{padding:0 0 72px}
.games-random[hidden]{display:none}
.games-random-paper{max-width:760px;margin:0 auto;padding:26px 40px 32px;border:38px solid transparent;border-image:url('../img/fondo%20papel.webp?v=20260927-2') 64 fill / 38px stretch;filter:drop-shadow(0 8px 14px rgba(60,40,20,.13));text-align:center}
.games-random-paper h2{margin:0 0 10px;color:#931d30;font:400 clamp(28px,2.6vw,38px)/1.1 var(--serif);text-wrap:balance}
.games-random-paper p{margin:0 auto;max-width:44ch;color:#2f2a24;font:400 17.5px/1.5 var(--sans)}
.games-random-paper .button{margin-top:20px;padding:13px 26px;font-size:18px;border:0;cursor:pointer}
.games-random-paper .button:focus-visible{outline:3px solid #931d30;outline-offset:3px}
.games-random-paper .button:disabled{opacity:.45;cursor:not-allowed;transform:none}
.games-random-note{margin-top:10px!important;color:#765f48!important;font-size:15px!important}
.games-random-note[hidden]{display:none}

/* ---------- Tablet ---------- */
@media (max-width:1100px){
  .games-grid{grid-template-columns:repeat(3,minmax(0,1fr))}
  /* Tablet: como la portada y «Sobre Katadoku», la ilustración ocupa todo el
     hero y un degradado horizontal deja el texto sobre papel. */
  .home-v2.games-page .games-hero .hero-art{background:linear-gradient(90deg,rgba(243,239,229,.98) 0%,rgba(243,239,229,.95) 52%,rgba(243,239,229,.55) 68%,transparent 84%),url('../img/juegos%20de%20logica/juegos%20de%20logica%20hero.webp') right center/cover,#f8e6cb}
  .home-v2.games-page .games-hero .hero-content{min-height:470px}
  .home-v2.games-page .games-hero .hero-copy{width:min(52%,500px)}
}

/* ---------- Móvil ---------- */
@media (max-width:720px){
  .games-wide{width:calc(100% - 34px)}
  /* Móvil: degradado vertical como en la portada; el texto queda arriba y el
     tablero asoma por la parte inferior del hero. */
  .home-v2.games-page .games-hero .hero-art{background:linear-gradient(180deg,rgba(243,239,229,.98) 0%,rgba(243,239,229,.93) 50%,rgba(243,239,229,.35) 74%,transparent 100%),url('../img/juegos%20de%20logica/juegos%20de%20logica%20hero.webp') 74% center/cover,#f8e6cb}
  .home-v2.games-page .games-hero .hero-copy{width:100%}
  .home-v2.games-page .games-hero .hero-content{min-height:560px;padding-top:56px}
  .home-v2.games-page .games-hero h1{font-size:clamp(32px,9vw,42px)}
  .home-v2.games-page .games-hero .hero-copy>p:not(.home-kicker){font-size:16.5px}
  .games-catalog{padding:26px 0 48px}
  .games-toolbar{flex-direction:column;align-items:stretch;gap:16px;margin-bottom:24px}
  .games-summary{justify-items:start;margin-left:0}
  .games-filter-button{min-height:40px;padding:8px 13px;font-size:15px}
  .games-group+.games-group{margin-top:32px}
  .game-thumb-number{top:6px;left:6px;min-width:24px;height:24px;padding:0 7px;font-size:14px}
  .game-thumb .case-solved-badge{top:6px;right:6px;width:23px;height:23px}
  .game-thumb .case-solved-badge svg{width:17px;height:17px}
  .game-thumb-title{display:none}
  .games-random{padding-bottom:52px}
  .games-random-paper{padding:14px 10px 20px;border-width:26px;border-image-width:26px}
  .games-random-paper .button{width:100%;justify-content:center;padding:13px 14px;font-size:17px}
  .home-v2.games-page .footer a{display:inline-block;margin:-12px 0;padding:12px 0}
}

/* Móvil: dos columnas. */
@media (max-width:600px){
  .games-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
}