/* =================================================================
   BANNERS DOBLES
   ================================================================= */
/* Sin aire arriba porque en JR Implementos esta fila va pegada a la anterior.
   Con encabezado propio («Línea Corporativa», justo bajo el hero) no: el título
   quedaba a 0 px del banner. Ahí recupera el `padding` normal de sección. */
.jri-banners-double:not(:has(.jri-banners-head)) { padding-top: 0; }
.jri-banners-grid {
  display: grid;
  /* La plantilla manda las columnas proporcionales a cada imagen (misma altura);
     sin medidas, mitad y mitad. */
  grid-template-columns: var(--jri-banners-cols, 1fr 1fr);
  gap: var(--space-5);
}
/* La proporción la manda la plantilla, tomada de la imagen subida; el 750/300
   se queda como red por si no hay medidas. Fijo recortaba todo lo que no midiera
   exactamente 2,5:1, y sin avisar. */
.jri-banner-card {
  display: block;
  border-radius: var(--radius-2xl);
  overflow: hidden;
  box-shadow: var(--shadow-card);
  aspect-ratio: var(--jri-banner-ar, 750 / 300);
}

/* --- Tres por fila ---
   `minmax(0, 1fr)` y no `1fr`: `1fr` equivale a `minmax(auto, 1fr)`, así que
   una celda cuyo contenido no cabe hace crecer su columna y la rejilla
   desborda su contenedor. Es lo que sacó los tres cuadros del panel lateral
   de Drigo 53 px por la derecha.

   Y la proporción **no puede ser la fija de 750/300**: una fila de tres es
   mucho más estrecha que una de dos, y `cover` recortaría media imagen. La
   manda la plantilla, tomada de la imagen que se subió. */
.jri-banners-triple .jri-banners-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
/* La proporción ya la pone la regla de arriba desde la plantilla. */
/* Con segunda imagen para móvil el marcado es `<picture>`, en línea por
   defecto: sin esto no ocupa la tarjeta. */
.jri-banner-card picture, .jri-banner-wide picture { display: block; width: 100%; height: 100%; }
.jri-banner-card img { width: 100%; height: 100%; object-fit: cover; transition: transform .4s; }
.jri-banner-card:hover img { transform: scale(1.04); }

/* La proporción de móvil la manda la plantilla, tomada de la imagen subida.
   Sin ella se queda la de siempre. */
@media (max-width: 767px) {
  /* Sin imagen de móvil, la proporción REAL de la de escritorio, no la fija de 2,5:1:
     en savihome el banner de SaviWork (0,8:1) se recortaba hasta perder el logo. */
  .jri-banner-card { aspect-ratio: var(--jri-banner-ar-movil, var(--jri-banner-ar, 750 / 300)); }
}

/* =================================================================
   BANNERS SECUNDARIOS
   ================================================================= */
.jri-banners-secondary .jri-container { display: flex; flex-direction: column; gap: var(--space-5); }
.jri-banner-wide { display: block; border-radius: var(--radius-2xl); overflow: hidden; box-shadow: var(--shadow-card); }
.jri-banner-wide img { width: 100%; height: auto; }


/* --- responsive (del bloque común del diseño) --- */
@media (max-width: 767px) {
  .jri-banners-grid,
  .jri-banners-triple .jri-banners-grid { grid-template-columns: 1fr; }
}


/* =================================================================
   RÓTULO SOBRE LA IMAGEN Y ENCABEZADO DE FILA (SaviHome, 14/10/2026)
   Lo que en savihome.pe hacían los módulos CTA de Divi: el nombre en una
   franja clara arriba y un «Ver más» debajo, en texto y no dibujado en la
   foto. Solo existe si el banner tiene rótulo o botón.
   ================================================================= */
.jri-banners-head { margin-bottom: var(--space-6); text-align: center; }
.jri-banners-head .jri-section-title { margin-bottom: var(--space-2); }
.jri-banners-sub { margin: 0; color: var(--text-muted-2); font-size: 15px; }

.jri-banner--con-rotulo { position: relative; }
.jri-banner-rotulo {
  position: absolute;
  top: 7%;
  left: 50%;
  transform: translateX(-50%);
  width: max-content;
  max-width: 86%;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-4);
  pointer-events: none;
}
.jri-banner-rotulo-texto {
  background: rgba(250, 250, 250, .9);
  color: var(--near-black);
  padding: var(--space-3) var(--space-5);
  font-size: 20px;
  line-height: 1.2;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: .5px;
  text-align: center;
}
/* El salvia es fondo: letra oscura encima (7,95:1). La blanca del sitio
   viejo daba 2,49:1. */
.jri-banner-rotulo-boton {
  background: var(--brand-yellow);
  color: var(--near-black);
  padding: 8px 16px;
  border-radius: var(--radius-sm);
  font-size: 13px;
  line-height: 1;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .5px;
  transition: background .2s;
}
.jri-banner--con-rotulo:hover .jri-banner-rotulo-boton { background: var(--brand-sage-light); }

@media (max-width: 767px) {
  .jri-banner-rotulo-texto { font-size: 16px; padding: var(--space-2) var(--space-4); }
}