/* =================================================================
   FOOTER
   ================================================================= */
.jri-site-footer {
  background: var(--dark-2);
  color: var(--text-on-dark);
  padding-block: var(--space-9) var(--space-7);
}
/* El rótulo va encima y la tira debajo, alineada a la izquierda (referencia del
   Figma `temp/240.jpg`). Antes eran una sola fila con el rótulo al lado y
   `space-between`: los nueve logos se repartían los 1368 px del pie y salían a
   100 px, que es lo que se veía desproporcionado. */
.jri-footer-allies {
  padding-bottom: var(--space-5);
  border-bottom: 1px solid rgba(255,255,255,.18);
  margin-bottom: var(--space-8);
}
.jri-footer-allies-title {
  /* Poco aire a propósito: los ficheros de logo son lienzos cuadrados con la
     marca centrada, así que traen su propio margen en blanco encima. */
  margin: 0 0 var(--space-4);
  font-size: 15px;
  font-weight: 700;
  line-height: 1.3;
  letter-spacing: .3px;
  text-transform: uppercase;
  color: var(--white);
}
.jri-footer-allies-logos {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: var(--space-4) var(--space-6);
  flex-wrap: wrap;
}
/* Los logos vienen en color sobre fondo claro: sobre el gris del pie hay que
   pasarlos a blanco. `brightness(0)` los aplana a negro y `invert(1)` los sube
   a blanco conservando la silueta. */
/* El tamaño lo manda el ANCHO, no la altura: los ficheros son lienzos cuadrados
   con la marca a todo el ancho y centrada en vertical, así que con `max-height`
   uno plano como SKECHERS se queda diminuto y PUMA ocupa el doble. */
.jri-footer-allies-logos img { width: 80px; height: auto; object-fit: contain; filter: brightness(0) invert(1); }

.jri-footer-main {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
  gap: var(--space-8) var(--space-7);
  align-items: start;
}

.jri-footer-col h6 {
  font-size: 15px;
  font-weight: 700;
  letter-spacing: .3px;
  text-transform: uppercase;
  color: var(--white);
  margin-bottom: var(--space-4);
}
.jri-footer-col ul { display: flex; flex-direction: column; gap: var(--space-3); }
.jri-footer-col a { color: var(--text-on-dark); font-size: 15px; text-decoration: underline; text-underline-offset: 3px; }
.jri-footer-col a:hover { color: var(--brand-yellow); }
.jri-footer-label { color: var(--text-on-dark); font-size: 15px; }
/* El correo es una palabra sin espacios más ancha que la columna en cuanto la
   rejilla baja de 5 pistas holgadas (~1024 px): sin esto se sale del pie. */
.jri-footer-contact li { overflow-wrap: anywhere; }

/* --- libro de reclamaciones y tienda minorista: cuelgan de una columna ---
   Los dos van dentro de `.jri-footer-col`, así que sus selectores tienen que
   ganar a `.jri-footer-col a` (0,1,1) o heredan el subrayado de los enlaces. */
.jri-footer-col .jri-footer-libro { display: inline-block; margin-top: var(--space-8); text-decoration: none; }
.jri-footer-libro img { width: 130px; height: auto; }

.jri-footer-tienda { margin-top: var(--space-8); }
.jri-footer-tienda h6 { margin-bottom: var(--space-5); }
.jri-footer-col .jri-footer-tienda-btn {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  border: 1px solid rgba(255,255,255,.7);
  border-radius: var(--radius-sm);
  padding: 12px 20px;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: .3px;
  text-transform: uppercase;
  color: var(--white);
  text-decoration: none;
  transition: all .2s;
}
.jri-footer-col .jri-footer-tienda-btn:hover { background: var(--brand-yellow); border-color: var(--brand-yellow); color: var(--near-black); }

/* --- socios: columna propia, logos apilados y EN COLOR (son sellos) --- */
.jri-footer-socios-logos { display: flex; flex-direction: column; align-items: flex-start; gap: var(--space-4); }
/* `max-width` en píxeles desbordaba la columna en tablet, donde mide 172 px:
   el sello RNP/OSCE se salía del contenedor. Va relativo a la columna. */
.jri-footer-socios-logos img { max-width: 100%; max-height: 80px; width: auto; height: auto; object-fit: contain; }

.jri-footer-social { display: flex; gap: var(--space-2); margin-top: var(--space-5); }
.jri-footer-social a {
  width: 28px; height: 28px;
  border-radius: var(--radius-sm);
  border: 1px solid rgba(255,255,255,.45);
  display: grid;
  place-items: center;
  color: var(--white);
  text-decoration: none;
  transition: all .2s;
}
.jri-footer-social a:hover { background: var(--brand-yellow); color: var(--near-black); border-color: var(--brand-yellow); }

.jri-footer-copy {
  text-align: center;
  font-size: 12px;
  color: var(--text-muted);
  margin-top: var(--space-9);
  padding-top: var(--space-5);
  border-top: 1px solid rgba(255,255,255,.12);
}

/* =================================================================
   WHATSAPP FLOTANTE
   ================================================================= */
/* La insignia la pone la imagen (`assets/img/whatsapp.png`), que ya trae su
   aro blanco y su círculo verde sobre esquinas transparentes.

   Por eso aquí **no van `background` ni `border`**: los llevaba cuando el
   icono era un SVG monocromo, y con esta imagen encima salían dos aros
   concéntricos y un halo verde asomando por las esquinas.

   La sombra sí se queda: es lo que despega el botón de la página. Va con
   `filter: drop-shadow` y no con `box-shadow` porque el elemento es un
   cuadrado transparente — un `box-shadow` dibujaría la sombra del cuadrado,
   no la del círculo. */
.jri-wa-float {
  position: fixed;
  right: 20px;
  bottom: 20px;
  z-index: 200;
  width: 60px;
  height: 60px;
  filter: drop-shadow(0 4px 8px rgba(0,0,0,.35));
  transition: transform .2s;
}
.jri-wa-float img { width: 100%; height: 100%; object-fit: contain; }
.jri-wa-float:hover { transform: scale(1.1); }


/* --- responsive (extraído del bloque común del diseño) --- */

/* Por debajo de ~1100 px los nueve a 80 px ya no caben en una fila y el último
   se descolgaba solo. La tira pasa a rejilla de columnas automáticas: caben las
   que quepan y el ancho lo reparte la propia rejilla, así que no hay ningún
   tamaño que recalcular por tramo. En un móvil de 390 salen las cinco por fila
   del Figma; antes era un carril desplazable con los logos al 45 % del ancho,
   dos por pantalla, que es lo que abultaba. */
@media (max-width: 1100px) {
  .jri-footer-allies-logos {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(56px, 1fr));
    gap: var(--space-3) var(--space-4);
  }
  .jri-footer-allies-logos img { width: 100%; }
}

@media (max-width: 767px) {
  .jri-footer-main { grid-template-columns: 1fr; gap: var(--space-8); }

  /* Botón y sellos a todo el ancho de la columna, como en el original. */
  .jri-footer-col .jri-footer-tienda-btn { display: flex; justify-content: center; width: 100%; }
  .jri-footer-social a { width: 34px; height: 34px; }
}