/* ===== Centrar avatares en el medio de la tarjeta (desktop) ===== */
.section-our-ingredients .container-images .card-customers .images-customers{
    position: relative;
    width: 100%;
    height: 56px;                /* altura de la franja de avatares */
}

.section-our-ingredients .container-images .card-customers .images-customers img,
.section-our-ingredients .container-images .card-customers .images-customers span{
    position: absolute;
    bottom: 0;                   /* alineados a la parte baja de la tarjeta */
}

/* Tamaño del avatar (consistente con lo que ya ajustaste) */
.section-our-ingredients .container-images .card-customers .images-customers img{
    width: 36px !important;
    height: 36px !important;
    border-radius: 999px;
}

/* Centro del grupo: ancho total ~ 90px (36 + 18 + 18 + 18) -> mitad = 45px */
.section-our-ingredients .container-images .card-customers .images-customers img:nth-child(1){ left: calc(50% - 45px) !important; }
.section-our-ingredients .container-images .card-customers .images-customers img:nth-child(2){ left: calc(50% - 27px) !important; }
.section-our-ingredients .container-images .card-customers .images-customers img:nth-child(3){ left: calc(50% - 9px)  !important; }

/* El “+” al final del grupo */
.section-our-ingredients .container-images .card-customers .images-customers span{
    width: 36px !important;
    height: 36px !important;
    left: calc(50% + 9px) !important;
}
.section-our-ingredients .container-images .card-customers .images-customers span i{
    font-size: 14px !important;
}

/* ===== Móvil: todo centrado con tamaño menor ===== */
@media (max-width: 768px){
    .section-our-ingredients .container-images .card-customers .images-customers{
        height: 48px;
    }
    .section-our-ingredients .container-images .card-customers .images-customers img{
        width: 30px !important;
        height: 30px !important;
    }
    /* grupo total ~ 75px -> mitad = 37.5px */
    .section-our-ingredients .container-images .card-customers .images-customers img:nth-child(1){ left: calc(50% - 37.5px) !important; }
    .section-our-ingredients .container-images .card-customers .images-customers img:nth-child(2){ left: calc(50% - 22.5px) !important; }
    .section-our-ingredients .container-images .card-customers .images-customers img:nth-child(3){ left: calc(50% - 7.5px)  !important; }

    .section-our-ingredients .container-images .card-customers .images-customers span{
        width: 30px !important;
        height: 30px !important;
        left: calc(50% + 7.5px) !important;
    }
    .section-our-ingredients .container-images .card-customers .images-customers span i{
        font-size: 12px !important;
    }
}

/* Quitar que la tarjeta tape al equipo (desktop) */
@media (min-width: 992px){
    .section-our-ingredients .container-images .card-customers{
        left: clamp(24px, 8vw, 140px) !important; /* más hacia la izquierda */
        bottom: 24px !important;                  /* un poco más abajo */
        width: 300px !important;                  /* más angosta */
        max-width: 34% !important;
        padding: 16px !important;                 /* menos alto visual */
    }

    /* Texto un pelín más compacto para que baje la altura */
    .section-our-ingredients .container-images .card-customers p{
        font-size: 16px !important;
        line-height: 1.25 !important;
    }
}

/* Tablet (por si también molesta ahí) */
@media (min-width: 768px) and (max-width: 991.98px){
    .section-our-ingredients .container-images .card-customers{
        left: clamp(16px, 6vw, 80px) !important;
        bottom: 16px !important;
        width: 60% !important;
        max-width: 380px !important;
    }
}

/* ===== Teléfonos: hacer más pequeño el cuadro ===== */
@media (max-width: 576px){
    .section-our-ingredients .container-images .card-customers{
    width: 72% !important;            /* más pequeño que en 768px */
    max-width: 300px !important;
    padding: 12px 14px !important;
    border-radius: 12px !important;
    gap: 12px !important;
    bottom: 6px !important;
    }
    .section-our-ingredients .container-images .card-customers p{
    font-size: 14px !important;
    line-height: 1.25 !important;
    }

  /* Avatares más pequeños y centrados para el nuevo ancho */
    .section-our-ingredients .container-images .card-customers .images-customers{
    height: 44px !important;
    }
    .section-our-ingredients .container-images .card-customers .images-customers img{
    width: 26px !important;
    height: 26px !important;
    }
  /* grupo total ≈ 65px → mitad 32.5px */
    .section-our-ingredients .container-images .card-customers .images-customers img:nth-child(1){ left: calc(50% - 32.5px) !important; }
    .section-our-ingredients .container-images .card-customers .images-customers img:nth-child(2){ left: calc(50% - 19.5px) !important; }
    .section-our-ingredients .container-images .card-customers .images-customers img:nth-child(3){ left: calc(50% - 6.5px)  !important; }

    .section-our-ingredients .container-images .card-customers .images-customers span{
    width: 26px !important;
    height: 26px !important;
    left: calc(50% + 6.5px) !important;
    }
    .section-our-ingredients .container-images .card-customers .images-customers span i{
    font-size: 12px !important;
    }
}