/* Sortivara — las insignias de las tiendas y sus QR (js/core/insignias.js).
 *
 * Una hoja aparte porque la usan dos páginas que no comparten estilos: el
 * muro del juego (los dos temas) y la portada del sitio. Todo cuelga de
 * `.tiendas-app` y los colores salen del sitio donde se pinta (currentColor),
 * así que en el pergamino y en la noche se lee igual.
 *
 * LO QUE PIDEN APPLE Y GOOGLE: la insignia sin alterar, 40 px de alto o más,
 * y un aire alrededor de al menos un cuarto de su alto (~11 px): de ahí el
 * hueco de 16 px. La de Google trae su propio margen transparente dentro del
 * PNG; por eso va más alta y con margen negativo, para que las dos se vean
 * del mismo tamaño (igual que en RobiLab y LunaCuentos). */
.tiendas-app { margin: 18px 0 6px; }
.tiendas-app .tiendas-titulo {
  margin: 0 0 12px; font-size: 0.8rem; letter-spacing: 0.08em; text-transform: uppercase; font-weight: 600;
}
.tiendas-app .insignias { display: flex; flex-wrap: wrap; align-items: flex-start; gap: 16px; }
#pantalla-plan .tiendas-app .insignias,
#pantalla-plan .tiendas-app .qr-tienda { justify-content: center; }
.tiendas-app .insignia { display: flex; flex-direction: column; align-items: center; gap: 4px; }
.tiendas-app .tienda-oficial { display: inline-flex; align-items: center; min-height: 44px; border-radius: 8px; }
.tiendas-app a.tienda-oficial:focus-visible { outline: 2px solid currentColor; outline-offset: 3px; }
.tiendas-app .insignia-apple { display: block; height: 44px; width: auto; }
.tiendas-app .insignia-google { display: block; height: 58px; width: auto; margin: -7px 0; }
/* Mientras la app no está: el rótulo debajo, con el mismo color del texto
   que lo rodea (sin transparencia: el contraste tiene que seguir en 4,5:1). */
.tiendas-app .proximamente {
  font-size: 0.78rem; letter-spacing: 0.06em; text-transform: uppercase; font-weight: 600;
  padding: 1px 8px; border: 1px dashed currentColor; border-radius: 999px;
}
.tiendas-app .qr-tienda { display: flex; flex-wrap: wrap; align-items: center; gap: 14px; margin-top: 16px; }
.tiendas-app .qr-tienda figure { margin: 0; text-align: center; }
.tiendas-app .qr-tienda svg { display: block; border-radius: 8px; }
.tiendas-app .qr-tienda figcaption { font-size: 0.8rem; margin-top: 4px; }
.tiendas-app .qr-nota { margin: 0; flex: 1 1 220px; font-size: 0.9rem; line-height: 1.4; text-align: left; }
/* En un teléfono el QR no sirve: ya está en el teléfono. */
@media (max-width: 700px), (pointer: coarse) { .tiendas-app .qr-tienda { display: none; } }