/* =================================================================
   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. Los de Drigo son iconos de trazo sin texto —los mismos que usa el
   prefooter de drigo.pe—, así que el nombre se escribe debajo. */
.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 Drigo tiene 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; }
}