/* COCUYO — Páginas públicas de los juegos (/es/juegos/, /en/games/), 10-oct-2026.
   Se apoya en seo-estudio.css (familia, secciones y preguntas) y juegos.css
   (los propios juegos). Aquí solo va lo de la página: un título más corto que
   el de las fichas para que el juego quede a la vista en el móvil, y las
   tarjetas de «Más juegos». Colores siempre de los tokens. */
.jgp-hero { padding-top: clamp(16px, 0.75rem + 2vw, 48px); }
.jgp-hero h1 { font-size: clamp(2rem, 1.4rem + 2.4vw, 3.25rem); margin-bottom: var(--f-e-4, 16px); }
.jgp-hero .lead { margin-bottom: var(--f-e-6, 24px); }
.jgp-juego { padding: 16px 0 8px; margin-bottom: 24px; border-radius: 24px; --jg-lado-arriba: 88px; }
.jgp-juego [data-juego] { min-height: 360px; }
/* En el móvil y la tableta el juego va centrado en una columna cómoda; en el
   ordenador (juegos.css, container query) se ensancha y sale el panel lateral. */
.jgp-juego .jg-juego { max-width: 680px; }
@container jgraiz (min-width: 860px) { .jgp-juego .jg-juego { max-width: 900px; } }
/* Dentro de <main> la familia pone margen 0 a los párrafos: se respeta, y
   los botones de los juegos no heredan el subrayado ni el color de los enlaces. */
.jgp-juego button { font-family: inherit; }

/* Índice y «Más juegos»: la misma sala que en el estudio (tarjetas con
   miniatura de juegos.css). 11-oct-2026: las tarjetas suben justo debajo
   del titular, sin el hueco de sección que dejaba media pantalla vacía. */
.jgp-indice { padding-top: 0; margin-top: calc(var(--f-e-2, 8px) * -1); }
.jgp-sala .jg-tarjeta { color: var(--blanco-luz); }
.jgp-sala .jg-sala-continuar { margin-bottom: 14px; }
.jgp-sala-otros { margin-top: var(--f-e-6, 24px); }
@media (prefers-reduced-motion: reduce) { .jgp-sala .jg-tarjeta { transition: none; } }

/* ---------- Teléfono, índice de juegos: el modelo de la app (dueño, 11-oct-2026) ----------
   «Todo compacto y perfecto en la app», como las pantallas de Crear: el
   nombre («Juegos») va en la cabecera (familia.css, desde las migas) y
   arriba quedan los juegos, en una rejilla de tres con su miniatura
   pequeña y el nombre debajo (la frase de cada juego, en el ordenador y en
   su página). El título grande y su frase (lo que lee Google) bajan al
   final, en pequeño: siguen a la vista. Solo el índice; las páginas de
   cada juego no cambian. */
@media (max-width: 767px) {
  main:has(> .jgp-indice) { display: flex; flex-direction: column; }
  main:has(> .jgp-indice) > .jgp-hero { order: 1; padding-top: var(--f-e-10, 40px); }
  main:has(> .jgp-indice) > .jgp-hero .eyebrow { margin-bottom: var(--f-e-2, 8px); font-size: .6875rem; }
  main:has(> .jgp-indice) > .jgp-hero h1 { margin-bottom: var(--f-e-2, 8px); font-size: 1.125rem; font-weight: 600; line-height: 1.3; letter-spacing: -.01em; }
  main:has(> .jgp-indice) > .jgp-hero .lead { margin-bottom: 0; font-size: .8125rem; line-height: 1.5; }
  main > .jgp-indice { margin-top: 0; padding-top: var(--f-e-3, 12px); }
  main:has(> .jgp-indice) > .faq h2, main:has(> .jgp-indice) > .credit-strip h2 { font-size: 1rem; font-weight: 600; line-height: 1.3; letter-spacing: -.01em; }
  main:has(> .jgp-indice) > .faq { gap: var(--f-e-3, 12px); }
  main:has(> .jgp-indice) > .faq summary { min-height: 48px; padding-block: 10px; font-size: .9375rem; }
  main:has(> .jgp-indice) > .faq details p { font-size: .875rem; }
  /* Sobre el fondo de Crear, la tarjeta un punto más clara para que se vea su caja. */
  main:has(> .jgp-indice) > .credit-strip { gap: var(--f-e-3, 12px); padding: var(--f-e-5, 20px); border-radius: var(--f-r-media, 16px); background: var(--f-sup-2); }
  main:has(> .jgp-indice) > .credit-strip .eyebrow { margin-bottom: var(--f-e-2, 8px); font-size: .6875rem; }
  main:has(> .jgp-indice) > .credit-strip p:last-child { font-size: .875rem; line-height: 1.5; }
  main:has(> .jgp-indice) > .credit-strip .cta { min-height: 40px; padding: 8px 16px; font-size: .875rem; }
  .jgp-sala .jg-rejilla { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px 10px; }
  .jgp-sala .jg-tarjeta { min-height: 0; gap: 0; padding: 0; border: 0; border-radius: 14px; background: none; }
  .jgp-sala .jg-tarjeta:hover, .jgp-sala .jg-tarjeta:focus-visible { border-color: transparent; box-shadow: none; transform: none; }
  .jgp-sala .jg-tarjeta:focus-visible .jg-mini { outline: 2px solid var(--f-lima, var(--verde-cocuyo)); outline-offset: 2px; }
  .jgp-sala .jg-tarjeta .jg-mini { aspect-ratio: 1; margin-bottom: 6px; border-radius: 14px; }
  .jgp-sala .jg-tarjeta strong { margin: 0; padding: 0; font-size: 13px; font-weight: 500; line-height: 1.3; overflow-wrap: anywhere; hyphens: auto; -webkit-hyphens: auto; }
  .jgp-sala .jg-tarjeta .jg-tarjeta-pie { display: none; }
  /* La frase de cada juego no se ve, pero se sigue leyendo (lector de pantalla). */
  .jgp-sala .jg-tarjeta .jg-tarjeta-texto { position: absolute; inline-size: 1px; block-size: 1px; margin: 0; padding: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
  /* «Del día» / «Reto del día», bajo el nombre: encima de la miniatura
     tapaba la primera fila y en inglés se salía de la tarjeta. */
  .jgp-sala .jg-tarjeta .jg-insignia { order: 1; position: static; align-self: flex-start; max-inline-size: 100%; margin: 4px 0 0; padding: 2px 6px; font-size: 10px; line-height: 14px; white-space: normal; box-shadow: none; }
}