/* ============================================================
   FORUMS-PUBLIC.CSS
   Estilos para la sección pública de foros (Podcast, Webinar,
   Multimedia). Diseño accesible y atractivo para todo público.
   ============================================================ */

/* ── Tarjetas de foro ────────────────────────────────────────── */
.forum-card {
    transition: transform 0.35s cubic-bezier(0.4, 0, 0.2, 1),
                box-shadow  0.35s cubic-bezier(0.4, 0, 0.2, 1),
                border-color 0.25s ease;
}

/* ── Imagen de portada ───────────────────────────────────────── */
.forum-card .cover-img {
    transition: transform 0.6s cubic-bezier(0.4, 0, 0.2, 1);
}
.forum-card:hover .cover-img {
    transform: scale(1.07);
}

/* ── Botón ingresar ──────────────────────────────────────────── */
.forum-cta-btn {
    transition: transform 0.25s ease, box-shadow 0.25s ease, filter 0.25s ease;
}
.forum-cta-btn:hover {
    transform: translateY(-2px);
    filter: brightness(1.08);
    box-shadow: 0 8px 28px rgba(0, 0, 0, 0.22) !important;
}

/* ── Chips de filtro del hero ────────────────────────────────── */
.filter-chip {
    transition: background 0.2s ease, transform 0.2s ease, border-color 0.2s ease;
}
.filter-chip:hover {
    background: rgba(255, 255, 255, 0.22) !important;
    transform: translateY(-1px);
}

/* ── Tarjetas de categoría (vista "todos") ───────────────────── */
.category-portal {
    transition: transform 0.35s cubic-bezier(0.4, 0, 0.2, 1),
                box-shadow  0.35s cubic-bezier(0.4, 0, 0.2, 1);
}
.category-portal:hover {
    transform: translateY(-8px);
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.25) !important;
}
.category-portal .cat-icon {
    transition: transform 0.3s ease;
}
.category-portal:hover .cat-icon {
    transform: scale(1.15) rotate(-3deg);
}

/* ── Buscador ────────────────────────────────────────────────── */
.forums-search {
    font-size: 16px; /* Evita zoom automático en iOS */
    transition: border-color 0.25s ease, box-shadow 0.25s ease;
}

/* ── Paginación ──────────────────────────────────────────────── */
.page-chip {
    transition: background 0.2s ease, border-color 0.2s ease, transform 0.2s ease;
}
.page-chip:hover {
    transform: translateY(-1px);
}

/* ── Ola decorativa del hero ─────────────────────────────────── */
.hero-wave {
    position: absolute;
    bottom: -1px;
    left: 0;
    right: 0;
    line-height: 0;
}

/* ── Accesibilidad: reducir movimiento ───────────────────────── */
@media (prefers-reduced-motion: reduce) {
    .forum-card,
    .forum-card .cover-img,
    .forum-cta-btn,
    .filter-chip,
    .category-portal,
    .category-portal .cat-icon,
    .page-chip {
        transition: none !important;
        transform: none !important;
    }
}