/* =================================================================
   CTA AMARILLO
   ================================================================= */
.jri-cta-bar { background: var(--brand-yellow); }
.jri-cta-bar .jri-container {
  padding-block: var(--space-4);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-8);
  flex-wrap: wrap;
}
.jri-cta-text {
  font-size: 20px;
  font-weight: 700;
  text-transform: uppercase;
  color: var(--near-black);
  letter-spacing: .5px;
}
.jri-cta-badges { display: flex; align-items: center; gap: var(--space-7); }
.jri-cta-badges img { height: 72px; width: auto; object-fit: contain; }


/* --- responsive --- */
/* Los tres distintivos, **en una sola fila**. Con `flex` y alto fijo sumaban
   402 px de ancho sobre los 358 disponibles y el tercero se descolgaba a una
   segunda fila, que además dejaba la barra con un hueco raro a la derecha.
   La rejilla de tres columnas iguales reparte el ancho que haya y es la imagen
   la que se ajusta dentro: no hay tamaño que recalcular al cambiar de móvil. */
@media (max-width: 767px) {
  .jri-cta-badges {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    align-items: center;
    gap: var(--space-3);
    width: 100%;
  }
  /* Altura de caja igual para los tres —así quedan alineados aunque sus
     proporciones no coincidan— y `contain` para que cada logo entre entero. */
  .jri-cta-badges img { width: 100%; height: 42px; object-fit: contain; }
  .jri-cta-bar .jri-container { gap: var(--space-4); }
}

@media (max-width: 500px) {
  .jri-cta-text { font-size: 16px; }
  .jri-cta-badges { gap: var(--space-2); }
  .jri-cta-badges img { height: 36px; }
}