/* ============================================================================
   comunidad.css — «Sigue a Pásala» al final del catálogo.  v1.0 (2026-09-24, #0655)

   Qué es: el bloque con el grupo de WhatsApp y el otro catálogo del socio, y la
   invitación al grupo que aparece a los 20 s (`arreglando 67.txt`).

   Colores (ATLAS 2.6 §B): SOLO tokens de la hoja base — --card, --text, --muted,
   --accent, --line, --bg —; ningún hex suelto. Parejas ya medidas en
   PALETA_PASALA.md: --text/--card 13,98:1 · --muted/--card 5,71:1 ·
   --accent/--card 8,76:1 · --bg/--accent 10,69:1.
   Fondos OPACOS propios: se lee igual con la piel de cristal encendida o apagada
   (no toca tienda-cristal.css, ANC-117). Sin animaciones.
   ========================================================================= */

.com-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
    gap: 0.75rem;
}
.com-tarjeta {
    display: flex;
    flex-direction: column;
    gap: 0.3rem;
    padding: 1rem 1.1rem;
    border: 1px solid var(--line);
    border-radius: 1rem;
    background: var(--card);
    color: var(--text);
    text-decoration: none;
    min-width: 0;
}
.com-tarjeta:hover,
.com-tarjeta:focus-visible { border-color: var(--accent); }
.com-tarjeta-titulo { font-weight: 800; font-size: 1.02rem; }
.com-tarjeta-sub { color: var(--muted); font-size: 0.88rem; overflow-wrap: anywhere; }
.com-tarjeta-accion {
    margin-top: 0.35rem;
    color: var(--accent);
    font-weight: 700;
    text-decoration: underline;
    text-underline-offset: 0.18em;
}

/* --- Invitación a los 20 s -------------------------------------------------
   Mismo sitio que la burbuja de opinión (#0529): abajo a la derecha en
   escritorio; en teléfono, ancho completo pero por ENCIMA del botón del
   asistente (abajo a la izquierda), para no taparlo. */
.com-invita {
    position: fixed;
    right: max(1rem, env(safe-area-inset-right));
    bottom: max(1rem, env(safe-area-inset-bottom));
    z-index: 40;
    width: min(20rem, calc(100vw - 2rem));
    padding: 1rem 1.1rem;
    border: 1px solid var(--line);
    border-radius: 1rem;
    background: var(--card);
    color: var(--text);
    box-shadow: 0 18px 50px rgba(0, 0, 0, 0.45);
}
.com-invita[hidden] { display: none; }
.com-invita-cerrar {
    position: absolute;
    top: 0.25rem;
    right: 0.25rem;
    width: 2.5rem;
    height: 2.5rem;
    border: 0;
    background: transparent;
    color: var(--muted);
    font-size: 1.4rem;
    line-height: 1;
    cursor: pointer;
}
.com-invita-cerrar:hover,
.com-invita-cerrar:focus-visible { color: var(--text); }
.com-invita-titulo { margin: 0 2rem 0.35rem 0; font-weight: 800; }
.com-invita-texto { margin: 0 0 0.8rem; color: var(--muted); font-size: 0.9rem; }
.com-invita-boton {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 2.75rem;
    border-radius: 999px;
    background: var(--accent);
    color: var(--bg);
    font-weight: 800;
    text-decoration: none;
}
.com-invita-boton:focus-visible { outline: 2px solid var(--text); outline-offset: 2px; }

@media (max-width: 640px) {
    .com-invita {
        left: max(0.75rem, env(safe-area-inset-left));
        right: max(0.75rem, env(safe-area-inset-right));
        bottom: calc(max(0.75rem, env(safe-area-inset-bottom)) + 3.6rem);
        width: auto;
    }
}