#carrousel-certificados {
    position: relative;
    display: flex;
    justify-content: center;
  
    .carousel-wrapper {
      position: relative;
      width: 100%;
      max-width: 1400px;
      /* Aquí las flechas estarán fuera de la máscara */
    }
  
  
    .container {
      position: relative;
      overflow: hidden;
      width: 100%;
  
      /* Corte cortante: 40px fijos de degradado (antes 20% del ancho,
         demasiado progresivo) */
      mask-image: linear-gradient(to right,rgba(0,0,0,0),rgba(0,0,0,1) calc(50% - 40px),rgba(0,0,0,1) calc(50% + 40px),rgba(0,0,0,0));
      z-index: 1;
    }
  
    .slider {
      display: flex;
      width: max-content;
      gap: 20px;
      will-change: transform;
    }
  
    .certificados {
      display: flex;
      align-items: center;
      gap: 20px;
      margin-block: 80px;
    }
  
    .certificados img {
      height: auto;
      object-fit: cover;
      transition: transform 0.3s ease-in-out, filter 0.3s ease-in-out;
    }
  
    /* Fallback (sin soporte de :has): efecto solo en la fila hovered */
    .certificados:hover img {
      filter: grayscale(100%);
    }

    .certificados img:hover {
      transform: scale(1.1);
      filter: grayscale(0%);
    }

    /* Efecto global: al pasar por cualquier certificado (fila original o
       cualquiera de las copias de repeats) TODAS las filas del slider se
       ponen en B/N y solo el hovered recupera color + zoom. Sin esto,
       :hover solo aplicaba a la propia fila (.certificados) y las copias
       seguían en color. */
    .slider:has(.certificados a:hover) img {
      filter: grayscale(100%);
    }

    .slider:has(.certificados a:hover) .certificados a:hover img {
      transform: scale(1.1);
      filter: grayscale(0%);
    }
  
    @media (max-width: 768px) {
      .certificados img {
        width: 80px;
      }
    }
  
    /* Flechas de navegación (solo tablet/escritorio; en móvil se ocultan) */
    .arrow-strip {
      position: absolute;
      top: 0;
      bottom: 0;
      min-height: 100%;
      display: flex;
      align-items: center;
      justify-content: center;
      width: 100px;
      /* Por encima de .container (z-index 1): sin esto las flechas
         quedaban bajo las imágenes e inclickeables */
      z-index: 20;
    }

    .arrow-strip-left {
      left: 0;
    }

    .arrow-strip-right {
      right: 0;
    }

    .arrow {
      box-sizing: border-box;
      width: 100%;
      height: 100%;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 24px;
      color: grey;
      padding: 10px;
      cursor: pointer;
      user-select: none;
      transition: color 0.3s;
      /* Reset de <button>: mismo aspecto que el antiguo <div> */
      background: none;
      border: 0;
      line-height: 1;
      appearance: none;
    }

    .arrow:hover {
      color: black;
    }

    .arrow svg {
      display: block;
      pointer-events: none;
    }

    /* Móvil: sin flechas; desplazamiento por dedo (touch en JS) */
    @media (max-width: 768px) {
      .arrow-strip,
      .arrow {
        display: none;
      }
    }
  }
  /** Estilo para sumutua**/
#block-bootstrap-barrio-subtheme-carruseldecertificadosconsumer{
  background-color: white;
  #carrousel-certificados{
    padding-block: 40px;
    img{
      scale: 0.85;
    }
  }
}
#block-rincondelasalud-carruseldecertificadosconsumer{
  width: 100%;
}