/* AI Popular — Comunidad. */
/* Comunidad */
.comunidad-grid { display: grid; gap: 40px; grid-template-columns: 1.1fr .9fr; align-items: start; }
.comunidad-lista { margin: 18px 0 26px; padding-left: 0; list-style: none; display: grid; gap: 8px; }
.comunidad-lista li::before { content: "✓ "; color: var(--cian); font-weight: 700; }
.redes { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 18px; }
.redes a { padding: 10px 14px; border-radius: 999px; border: 1px solid var(--borde); background: var(--vidrio); color: var(--texto); text-decoration: none; font-weight: 600; }
.redes a[hidden] { display: none; }
.comunidad-tarjeta { padding: 28px; }


/* Varios Teos pequeños tomados de la mano (una línea de unión) */
.grupo-teos { position: relative; display: grid; grid-template-columns: repeat(3, auto); gap: 18px; justify-content: center; align-items: end; min-height: 200px; }
.grupo-teos::before {
  content: ""; position: absolute; left: 10%; right: 10%; top: 58%; height: 2px;
  background: linear-gradient(90deg, transparent, var(--cian), var(--violeta), transparent); opacity: .6;
}
.grupo-teos .teo { --teo-w: 92px; position: relative; }
.grupo-teos > :nth-child(2) .teo { --teo-w: 116px; }
.grupo-teos > :nth-child(3) .teo[data-estado="saludar"] .teo-cuerpo { animation-delay: .4s; }

/* En celular, las columnas se apilan (esta hoja se carga después de base.css) */
@media (max-width: 960px) { .comunidad-grid { grid-template-columns: 1fr; } }

/* Celular: los tres Teos se encogen para caber en 360 px */
.grupo-teos { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.grupo-teos .teo { --teo-w: min(92px, 26vw); }
.grupo-teos > :nth-child(2) .teo { --teo-w: min(116px, 32vw); }