/* MM Inspo Grid — módulo CSS (requiere mmb-shared.css) */

.mmig-section-root {
    width: 100%; max-width: 100%;
    margin: 0 auto; padding: 40px var(--mmb-page-margin);
}
.mmig-section-h2 {
    text-align: center;
    font-size: clamp(1.5rem,3vw,2.2rem);
    color: var(--mmb-primary);
    font-weight: 700; line-height: 1.3; margin: 0 0 36px;
}
.mmig-grid {
    display: grid;
    grid-template-columns: repeat(4,1fr);
    gap: 20px; align-items: stretch;
}
.mmig-card {
    background: #fff; border-radius: var(--mmb-radius-md);
    overflow: hidden; box-shadow: var(--mmb-shadow-sm);
    transition: transform .3s ease, box-shadow .3s ease;
    display: flex; flex-direction: column; height: 100%;
}
.mmig-card:hover { transform: translateY(-5px); box-shadow: 0 8px 20px rgba(0,0,0,.13); }
.mmig-card img { width: 100%; height: 200px; object-fit: cover; display: block; flex-shrink: 0; }
.mmig-card__content {
    padding: 18px 16px; text-align: center;
    flex-grow: 1; display: flex; flex-direction: column; gap: 10px;
}
.mmig-card__title { font-size: 1rem; font-weight: 700; color: var(--mmb-primary); line-height: 1.35; margin: 0; }
.mmig-card__desc  { font-size: .9rem; color: #555; line-height: 1.6; margin: 0; flex-grow: 1; }
.mmig-card__desc strong { color: var(--mmb-primary); }

@media (max-width: 900px) {
    .mmig-grid { grid-template-columns: repeat(2,1fr); }
    .mmig-card img { height: 180px; }
    .mmig-card__title { font-size: .95rem; }
}
@media (max-width: 600px) {
    .mmig-section-root { padding: 28px 0; }
    .mmig-section-h2 { padding: 0 16px; font-size: 1.35rem; margin-bottom: 20px; }
    .mmig-grid {
        display: flex; flex-direction: row; flex-wrap: nowrap;
        overflow-x: auto; gap: 12px; padding: 4px 16px 16px;
        scroll-snap-type: x mandatory; -webkit-overflow-scrolling: touch; scrollbar-width: none;
    }
    .mmig-grid::-webkit-scrollbar { display: none; }
    .mmig-card { flex: 0 0 72vw; max-width: 280px; scroll-snap-align: start; }
    .mmig-card img { height: 160px; }
    .mmig-card__title { font-size: .95rem; }
    .mmig-card__desc  { font-size: .85rem; }
}

/* ── Dots indicadores (solo móvil, gestionados por JS) ── */
.mmig-dots {
    display: flex;
    justify-content: center;
    gap: 6px;
    padding: 8px 0 4px;
}
.mmig-dot {
    width: 7px; height: 7px;
    border-radius: 50%;
    background: rgba(58,57,113,.25);
    cursor: pointer;
    transition: background .2s, transform .2s;
}
.mmig-dot.is-active {
    background: var(--mmb-primary);
    transform: scale(1.3);
}
@media (prefers-reduced-motion: reduce) {
    .mmig-card, .mmig-dot { transition: none !important; }
}