/* ==========================================================================
   CONTENEDOR TRANSPARENTE
   ========================================================================== */
.mmc-footer-badges-container {
    width: 100%;
    background: transparent;
    padding: 25px 20px;
    box-sizing: border-box;
    overflow: hidden; /* recorta si el carrusel llega a arrastrarse fuera del borde */
}

.mmc-footer-badges-swiper-init {
    max-width: 1200px;
    margin: 0 auto;
    position: relative;
}

/* ==========================================================================
   GRILLA DE BASE (siempre presente, sin JS): 4 columnas en escritorio.
   Si el JS activa el carrusel (ver footer-badges.js), agrega la clase
   swiper-wrapper y .swiper-css se encarga del layout en su lugar (ver abajo).
   ========================================================================== */
.mmc-footer-badges-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 20px;
    align-items: start;
}

.mmc-badge-col {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    text-align: center !important;
    padding: 0 10px;
    min-width: 0; /* el texto se ajusta al ancho de su columna en vez de desbordarla */
    box-sizing: border-box;
}

.mmc-badge-icon-wrapper {
    width: 100%;
    height: 50px;
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    margin-bottom: 15px !important;
    overflow: hidden; /* tope de seguridad: nunca deja que el icono se vea más grande que esto */
}

/* Estilos del icono con !important: el tema/otros plugins traen reglas globales de <img> que
   sin esto le ganan por orden de carga y el icono termina saliendo a su tamaño real (gigante). */
.mmc-badge-icon {
    width: 35px !important;
    max-width: 35px !important;
    height: auto !important;
    max-height: 35px !important;
    object-fit: contain !important;
    filter: brightness(0) invert(1) !important; /* icono en blanco */
}

/* ==========================================================================
   TEXTOS EN BLANCO
   ========================================================================== */
.mmc-badge-title {
    font-size: 14px !important;
    font-weight: 700 !important;
    color: #ffffff !important;
    text-transform: uppercase;
    margin: 0 0 8px 0 !important;
    letter-spacing: 1.5px;
}

.mmc-badge-text {
    font-size: 13px !important;
    color: #ffffff !important;
    opacity: 0.9;
    line-height: 1.4 !important;
    margin: 0 !important;
    max-width: 100%;
}

/* ==========================================================================
   MOBILE / TABLET: 2 columnas. Por debajo de 768px el JS además activa Swiper
   (autoplay 4s + arrastre) sobre esta misma grilla — ver footer-badges.js.
   ========================================================================== */
@media (max-width: 768px) {
    .mmc-footer-badges-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 28px 16px;
    }
    .mmc-badge-title { font-size: 12px !important; }
    .mmc-badge-text { font-size: 11px !important; }
}

/* ==========================================================================
   MODO CARRUSEL (activado por JS solo <768px): el JS agrega estas clases de
   Swiper — mientras no estén presentes, la grilla de arriba manda siempre.
   ========================================================================== */
.mmc-footer-badges-grid.swiper-wrapper {
    display: flex !important; /* Swiper controla el ancho/posición real de cada slide vía JS */
    gap: 0 !important; /* el "gap" de la grilla mobile (línea de arriba) se sumaba al spaceBetween
                           de Swiper, desbordando el contenedor — Swiper es la única fuente de
                           espacio entre slides cuando el carrusel está activo. */
}
.mmc-footer-badges-grid.swiper-wrapper .mmc-badge-col.swiper-slide {
    flex-shrink: 0; /* el ancho lo pone Swiper inline — nada de "width" fijo acá, competía con su cálculo */
}

.mmc-footer-dots {
    display: none; /* solo debe verse en modo carrusel (<=768px) — ver media query abajo. Swiper
                       no siempre limpia sus bullets al destruirse, así que esto lo garantiza por CSS
                       sin depender de eso. */
    position: relative;
    margin-top: 14px;
    text-align: center;
    line-height: 1;
}
@media (max-width: 768px) {
    .mmc-footer-dots { display: block; }
}
.mmc-footer-dots .swiper-pagination-bullet {
    background: #ffffff;
    opacity: 0.4;
}
.mmc-footer-dots .swiper-pagination-bullet-active {
    opacity: 1;
}