/* AI Popular — Página de Teo: galería de estados. */
/* Galería de estados de Teo */
.galeria { display: grid; gap: 12px; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); margin-top: 32px; list-style: none; padding: 0; }
.galeria button {
  width: 100%; padding: 14px 10px 12px; border-radius: 18px; border: 1px solid var(--borde);
  background: var(--vidrio); color: var(--texto); cursor: pointer; display: grid; justify-items: center; gap: 6px;
  font: 700 .95rem/1.2 var(--texto-fuente);
  transition: transform var(--dur-corta) var(--ease-gelatina), background var(--dur-corta) var(--ease-suave);
}
.galeria button:hover, .galeria button:focus-visible, .galeria button[aria-pressed="true"] { transform: translateY(-3px); background: var(--vidrio-fuerte); }
.galeria .teo-mini { height: 54px; display: grid; place-items: center; }
.galeria-pie { display: block; font-weight: 600; font-size: .8rem; color: var(--texto-2); }
.galeria-escena { margin-top: 24px; padding: 28px; display: grid; gap: 12px; place-items: center; text-align: center; min-height: 240px; }
.galeria-escena .teo { --teo-w: 150px; }
.galeria-escena p { margin: 0; color: var(--texto-2); }

/* Gestos y colores de la página de Teo */
.gestos { display: grid; gap: 14px; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); margin-top: 28px; }
.gesto-tarjeta { margin: 0; padding: 22px 16px; display: grid; justify-items: center; gap: 10px; text-align: center; }
.gesto-tarjeta .teo { --teo-w: 96px; }
.gesto-tarjeta figcaption { color: var(--texto-2); font-weight: 600; }
.dificultad { display: grid; gap: 22px; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); margin-top: 28px; }
.dificultad .teo { --teo-w: 120px; }

/* Celular: galería de dos columnas */
@media (max-width: 560px) { .galeria { grid-template-columns: repeat(2, 1fr); } }