/* =================================================================
   Pie de Savi Safety — portada de `savisafety-design-v3-3` (11/09/2026)

   Hoja SUSTITUIDA: el bloque FOOTER de `styles.css` de v3 con sus clases
   traducidas a `jri-`. En px. Tokens en `base.css`.

   Medidas de la referencia: franja amarilla 4 columnas, icono ≈46×52 sobre
   `h4` de 18 px, todo centrado · menús a 5 columnas con 56 px arriba y abajo ·
   redes en círculos de 38 px con 10 px de hueco · barra legal con 32 px.
   ================================================================= */

/* franja de garantías */
.jri-garantias { background: var(--c-amarillo); color: var(--c-negro); }
.jri-garantias__inner {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--space-5);
  /* Simétrico: el sitio lleva 45/75 px y queda descentrado 30 px (deuda que
     v3 apunta y corrige). */
  padding-block: var(--space-6);
}
.jri-garantia {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--space-3);
  text-align: center;
}
.jri-garantia img { width: auto; height: 52px; object-fit: contain; }
.jri-garantia h4 { font-size: var(--fs-h4); color: inherit; }
@media (max-width: 860px) {
  .jri-garantias__inner { grid-template-columns: repeat(2, 1fr); padding-block: var(--space-5); }
}

/* menús */
.jri-site-footer { background: var(--c-blanco); }
.jri-site-footer__menus {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: var(--space-7);
  padding-block: var(--space-8);
}
.jri-columna-footer summary {
  display: block;
  margin-bottom: var(--space-4);
  font-size: var(--fs-h5);
  font-weight: var(--fw-semibold);
  letter-spacing: .75px;
  list-style: none;
  cursor: default;
}
.jri-columna-footer summary::-webkit-details-marker { display: none; }
@media (min-width: 861px) {
  /* En escritorio el `<details>` no se puede plegar: es solo el marcado del
     acordeón de móvil. */
  .jri-columna-footer details { pointer-events: none; }
  .jri-columna-footer details ul { pointer-events: auto; }
}
.jri-columna-footer li + li { margin-top: var(--space-2); }
.jri-columna-footer a { font-size: var(--fs-body); color: var(--c-texto); transition: color var(--t-base); }
.jri-columna-footer a:hover { color: var(--c-mute); }

.jri-footer-contacto { display: grid; gap: var(--space-4); align-content: start; font-size: var(--fs-body); }
.jri-footer-contacto p { margin: 0; }
.jri-footer-contacto a:hover { color: var(--c-mute); }
.jri-footer-libro { width: 180px; height: 100px; object-fit: contain; }
.jri-redes { display: flex; gap: 10px; }
.jri-redes a {
  width: 38px;
  height: 38px;
  display: grid;
  place-items: center;
  border-radius: var(--radius-full);
  border: var(--border) solid var(--c-hairline);
  transition: background-color var(--t-base), color var(--t-base);
}
.jri-redes a:hover { background: var(--c-negro); color: var(--c-blanco); }

/* barra legal */
.jri-site-footer__legal {
  border-top: var(--border) solid var(--c-borde);
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-4);
  justify-content: space-between;
  align-items: center;
  padding-block: var(--space-6);
  font-size: var(--fs-body);
  color: var(--c-mute);
}
.jri-site-footer__legal p { margin: 0; }
.jri-metodos-pago { display: flex; gap: var(--space-2); align-items: center; }
.jri-metodos-pago img { height: 22px; width: auto; }

/* móvil: acordeón nativo */
@media (max-width: 860px) {
  .jri-site-footer__menus { grid-template-columns: 1fr; gap: 0; padding-block: var(--space-5); }
  .jri-columna-footer { border-bottom: var(--border) solid #E6E6E6; }
  .jri-columna-footer details summary {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 0;
    padding: var(--space-4) 0;
    cursor: pointer;
  }
  .jri-columna-footer details summary::after { content: "+"; font-size: 20px; line-height: 1; }
  .jri-columna-footer details[open] summary::after { content: "–"; }
  .jri-columna-footer details ul { padding-bottom: var(--space-4); }
  .jri-footer-contacto { padding-top: var(--space-5); }
  .jri-site-footer__legal { flex-direction: column; text-align: center; }
}

/* WhatsApp flotante: el logo oficial en imagen (60×61), sin círculo dibujado detrás —la
   imagen ya lo trae—. Sustituye al botón de Joinchat desde el 11/09/2026. */
.jri-whatsapp {
  position: fixed;
  right: 20px;
  bottom: 20px;
  z-index: 90;
  width: 60px;
  height: 61px;
  display: block;
  border-radius: var(--radius-full);
  filter: drop-shadow(1px 6px 12px rgba(7, 94, 84, .24));
  transition: transform var(--t-base);
}
.jri-whatsapp img { width: 60px; height: 61px; display: block; }
.jri-whatsapp:hover { transform: scale(1.06); }
@media (max-width: 767px) {
  .jri-whatsapp { right: 15px; bottom: 15px; }
}