/* =================================================================
   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: flex-start; gap: var(--space-7); }

/* En JR Implementos el distintivo era una imagen con el rótulo dibujado
   dentro. Aquí se asume lo contrario —iconos de trazo sin texto—, así que el
   nombre se escribe debajo. Si algún día los distintivos llegan con el rótulo
   dibujado dentro, saldría dos veces y habría que ocultar el `<span>`. */
.jri-cta-badge {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-1);
  color: var(--near-black);
  text-align: center;
}
.jri-cta-badges img { height: 52px; width: auto; object-fit: contain; }
.jri-cta-badge-nombre {
  font-size: 14px;
  font-weight: 700;
  line-height: 1.25;
  letter-spacing: .2px;
}


/* --- responsive --- */
/* Los distintivos, **en una sola fila**. Con `flex` y alto fijo sumaban 402 px
   de ancho sobre los 358 disponibles y el último se descolgaba a una segunda
   fila, que además dejaba la barra con un hueco raro a la derecha. La rejilla
   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.
   `grid-auto-flow: column` en vez de un `repeat(N, …)` fijo: JR Implementos
   tenía tres distintivos y aquí son cuatro, y la rejilla no debería
   depender de cuántos haya cargados en el administrador. */
@media (max-width: 767px) {
  .jri-cta-badges {
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: minmax(0, 1fr);
    align-items: start;
    gap: var(--space-3);
    width: 100%;
  }
  /* Altura de caja igual para todos —así quedan alineados aunque sus
     proporciones no coincidan— y `contain` para que cada icono entre entero. */
  .jri-cta-badges img { width: 100%; height: 40px; object-fit: contain; }
  .jri-cta-badge { padding-inline: var(--space-1); }
  /* `minmax(0, 1fr)` deja que la columna encoja, pero una palabra que no cabe
     **se sale igual**: «Personalización» invadía la columna vecina. `hyphens`
     y no `overflow-wrap: anywhere`, que parte por donde le viene y dejaba
     «COTIZACIÓ / N». */
  .jri-cta-badge-nombre {
    font-size: 12px;
    hyphens: auto;
    overflow-wrap: break-word;
  }
  .jri-cta-bar .jri-container { gap: var(--space-4); }
}

/* Por debajo de 500 px la fila de cuatro no da: la columna queda en 87 px y
   «Personalización» mide 95, así que se sale sobre la vecina —`hyphens: auto`
   tampoco la parte, no todos los motores traen el diccionario de español—.
   Dos filas de dos: cada rótulo tiene 180 px y ninguno necesita partirse. */
@media (max-width: 500px) {
  .jri-cta-text { font-size: 16px; }
  .jri-cta-badges {
    grid-auto-flow: row;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: var(--space-2);
    row-gap: var(--space-4);
  }
  .jri-cta-badges img { height: 38px; }
  .jri-cta-badge-nombre { font-size: 12px; }
}