/* Pequenauta — las piezas del sitio: el botón de sitio, la tarjeta de juego,
   el panel de texto y el pie.

   El material es el mismo del Tesoro: vidrio esmerilado sobre el mar, borde
   claro, esquinas redondas y sombra suave; lo que se pulsa y es la acción
   principal va en oro macizo. Usar la misma receta es lo que hace que la home
   y el juego se lean como un solo sitio y no como dos webs pegadas.

   Esta hoja la enlazan todas las páginas, el juego incluido: aquí solo hay
   piezas, ningún body, así que no pisa nada de tesoro-tablas/css/. Ninguna
   clase de aquí se llama como una del juego. */

/* Botón de sitio --------------------------------------------------------- */

/* No es .boton-grande: aquel es `display: block; width: 100%`, que en la
   columna estrecha del juego está bien y en una rejilla deja botones
   estirados de lado a lado. Este ocupa lo que mide su texto. */
.boton-sitio {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--e2);
  min-height: 3rem;
  padding: var(--e2) var(--e5);
  border: none;
  border-radius: var(--radio-g);
  background: linear-gradient(135deg, var(--oro), var(--oro-claro));
  color: var(--texto-invertido);
  font-family: var(--tipo-titulo);
  font-weight: 600;
  font-size: 1.1rem;
  text-decoration: none;
  box-shadow: var(--sombra-oro);
  cursor: pointer;
  transition: transform var(--rapido) ease, box-shadow var(--rapido) ease;
}

.boton-sitio:active {
  transform: translateY(0.125rem);
  box-shadow: 0 0.125rem 0.375rem rgba(0, 0, 0, 0.25);
}

/* Tarjeta de juego ------------------------------------------------------- */

/* Una columna en el teléfono, dos en la tablet, tres en el monitor. El ancho
   máximo lo pone main (sitio.css): las tarjetas no se estiran en un 1920. */
.rejilla-juegos {
  list-style: none;
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--e5);
}

@media (min-width: 600px) {
  .rejilla-juegos {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (min-width: 900px) {
  .rejilla-juegos {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

/* La tarjeta entera es el enlace: en una tablet, el título solo es un objetivo
   demasiado pequeño para un dedo de siete años. La receta de vidrio es la de
   .panel-perfil y .articulo del Tesoro. */
.tarjeta-juego {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--e2);
  height: 100%;
  min-height: 3rem;
  padding: var(--e5) var(--e4);
  border-radius: var(--radio-g);
  background: var(--vidrio);
  backdrop-filter: var(--desenfoque);
  border: 0.0625rem solid var(--vidrio-borde);
  box-shadow: var(--sombra-panel);
  color: inherit;
  text-align: center;
  text-decoration: none;
  transition: transform var(--rapido) ease, border-color var(--rapido) ease;
}

.tarjeta-juego:hover,
.tarjeta-juego:focus-visible {
  transform: translateY(-0.25rem);
  border-color: var(--oro-claro);
}

.tarjeta-juego:active {
  transform: translateY(0);
}

/* El dibujo es para el niño; el texto, para el adulto. El dibujo es decorativo
   (aria-hidden): el título ya dice qué juego es. */
.tarjeta-dibujo {
  width: clamp(5rem, 30vw, 7rem);
  height: auto;
  margin-bottom: var(--e2);
  filter: drop-shadow(0 0.25rem 0.5rem rgba(0, 0, 0, 0.3));
}

.tarjeta-practica {
  font-size: 1.05rem;
  font-weight: 600;
  color: var(--cielo-calido);
}

.tarjeta-edad {
  font-size: 0.9rem;
  font-weight: 700;
  color: var(--apagado);
}

/* Próximamente: el juego se anuncia pero no está. Se apaga como un artículo
   caro de la tienda, y sin href, para que no sea pulsable ni alcanzable con
   el tabulador. */
.tarjeta-juego.proximamente {
  opacity: 0.55;
  filter: saturate(0.6);
  cursor: default;
}

.tarjeta-juego.proximamente:hover {
  transform: none;
  border-color: var(--vidrio-borde);
}

.tarjeta-etiqueta {
  margin-top: var(--e1);
  padding: var(--e1) var(--e3);
  border-radius: var(--radio-g);
  background: var(--vidrio-oscuro);
  font-family: var(--tipo-titulo);
  font-weight: 600;
  font-size: 0.85rem;
  letter-spacing: 0.02em;
  color: var(--arena-clara);
}

/* Panel de texto ---------------------------------------------------------- */

/* Para lo que se lee de corrido: las páginas legales. La misma receta de
   vidrio que la tarjeta, pero alineado a la izquierda y con las piezas de un
   texto largo: títulos, párrafos, listas y una tabla. Todo acotado al panel,
   para no tocar los h2 del resto del sitio. */
.panel-texto {
  padding: var(--e5) var(--e4);
  border-radius: var(--radio-g);
  background: var(--vidrio);
  backdrop-filter: var(--desenfoque);
  border: 0.0625rem solid var(--vidrio-borde);
  box-shadow: var(--sombra-panel);
  text-align: left;
  font-size: 1.05rem;
}

@media (min-width: 600px) {
  .panel-texto {
    padding: var(--e6) var(--e7);
  }
}

.panel-texto h2 {
  margin: var(--e6) 0 var(--e3);
}

.panel-texto h2:first-child {
  margin-top: 0;
}

.panel-texto h3 {
  margin: var(--e5) 0 var(--e2);
  font-family: var(--tipo-titulo);
  font-weight: 600;
  font-size: 1.15rem;
  color: var(--oro-claro);
}

.panel-texto p,
.panel-texto ul,
.panel-texto ol {
  margin-bottom: var(--e3);
}

.panel-texto ul,
.panel-texto ol {
  padding-left: var(--e5);
}

.panel-texto li {
  margin-bottom: var(--e1);
}

.panel-texto a {
  text-decoration: underline;
  text-underline-offset: 0.2em;
}

.panel-texto a:hover {
  color: var(--oro-claro);
}

.panel-texto code {
  padding: 0 var(--e1);
  border-radius: var(--radio-s);
  background: var(--vidrio-oscuro);
  font-size: 0.9em;
}

/* La tabla de cookies es más ancha que un teléfono: se desplaza dentro de su
   caja y la página no. */
.tabla-desplazable {
  overflow-x: auto;
  margin-bottom: var(--e3);
}

.panel-texto table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.95rem;
}

.panel-texto th,
.panel-texto td {
  padding: var(--e2) var(--e3);
  border: 0.0625rem solid var(--vidrio-borde);
  text-align: left;
  vertical-align: top;
}

.panel-texto th {
  background: var(--vidrio-oscuro);
  font-family: var(--tipo-titulo);
  font-weight: 600;
}

.panel-texto .boton-sitio {
  margin-top: var(--e5);
}

/* Fecha de última actualización y avisos parecidos, en pequeño. */
.panel-texto .nota {
  font-size: 0.9rem;
  color: var(--apagado);
}

/* Pie ------------------------------------------------------------------- */

/* El pie es para el adulto: cuatro enlaces pequeños pero con un objetivo de
   44 px, que un dedo también los pulsa. Lo llevan todas las páginas, la del
   juego incluida, y por eso vive aquí y no en sitio.css: el juego enlaza esta
   hoja y no aquella. Va sobre el decorado, como la cabecera y el main. */
.pie-sitio {
  position: relative;
  z-index: var(--z-hud);
  width: 100%;
  max-width: 64rem;
  margin: 0 auto;
  padding: var(--e5) var(--e4) var(--e7);
  text-align: center;
  font-size: 0.9rem;
  color: var(--apagado);
}

.pie-sitio ul {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0 var(--e2);
}

.pie-sitio a {
  display: inline-flex;
  align-items: center;
  min-height: 2.75rem;
  padding: 0 var(--e2);
  color: inherit;
  text-decoration: underline;
  text-underline-offset: 0.2em;
  border-radius: var(--radio-s);
}

.pie-sitio a:hover {
  color: var(--texto);
}