/* =================================================================
   JRI Core — banner del término
   Imagen ancha bajo la ruta de navegación, en categorías y marcas.
   ================================================================= */

.jri-term-banner { margin-bottom: var(--space-6); }

.jri-term-banner .jri-container { max-width: var(--container); }

.jri-term-banner-img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: var(--radius-lg);
}

.jri-term-banner-enlace { display: block; }

/* El banner es lo primero que se ve: sin proporción reservada, la página da un
   salto cuando la imagen carga. 900×250 es la del diseño; `object-fit` evita
   deformarla si el cliente sube otra distinta. */
@supports (aspect-ratio: 1) {
  .jri-term-banner-img {
    aspect-ratio: 900 / 250;
    object-fit: cover;
  }
}

@media (max-width: 767px) {
  .jri-term-banner { margin-bottom: var(--space-5); }
  .jri-term-banner-img { border-radius: var(--radius-md); }
}