.mp-pie{
  margin-top:var(--mp-e7);
  border-top:1px solid var(--mp-tinta);
  background:var(--mp-papel);
}
.mp-pie__int{
  display:grid;
  grid-template-columns:1fr;
  gap:var(--mp-e4);
  padding-block:var(--mp-e5);
}
@media (min-width:640px){ .mp-pie__int{ grid-template-columns:repeat(2,1fr) } }
@media (min-width:1024px){ .mp-pie__int{ grid-template-columns:1.4fr 1fr 1fr 1.2fr; gap:var(--mp-e5) } }

.mp-pie__logo{
  font-size:.875rem; font-weight:500;
  letter-spacing:.28em; text-transform:uppercase;
  margin-bottom:.75rem;
}
.mp-pie__tit{ color:var(--mp-tinta); margin:0 0 .9rem; font-size:.6875rem }
.mp-pie__lista{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:.55rem }
.mp-pie__lista a{ font-size:var(--mp-t-menor); color:var(--mp-tinta-2); transition:color var(--mp-rapido) var(--mp-easing) }
.mp-pie__dir{ font-style:normal; line-height:1.85 }
.mp-pie__dir span{ color:var(--mp-tinta-3) }

.mp-pie__cierre{ border-top:1px solid var(--mp-hilo) }
.mp-pie__cierre-int{
  display:flex; justify-content:space-between; align-items:center;
  gap:var(--mp-e2); flex-wrap:wrap; padding-block:var(--mp-e2);
  color:var(--mp-tinta-3);
}
.mp-pie__legal{ list-style:none; margin:0; padding:0; display:flex; gap:1.25rem; flex-wrap:wrap }

/* ── medios de pago ──
   Monocromos y a la misma altura óptica. El truco es que TODOS los logotipos midan lo
   mismo de alto de tinta, no de caja: si no, Visa se ve el doble que Mastercard porque
   su trazo llena el viewBox de otra manera. */
/* Los logotipos apretados a la izquierda dejaban todo el ancho vacío a la derecha y
   el bloque quedaba pegado al borde de abajo. Ahora es una fila que SÍ usa el ancho:
   el rótulo y la letra chica a un lado, los logotipos al otro. */
.mp-pie__pagos{
  padding-block:var(--mp-e3);
  border-top:1px solid var(--mp-hilo);
}
.mp-pagos{
  display:flex; flex-wrap:wrap; align-items:center;
  justify-content:space-between; gap:var(--mp-e2);
}
.mp-pagos__texto{ flex:1 1 20rem; min-width:0 }
.mp-pagos__eti{ display:block; color:var(--mp-tinta-2); margin-bottom:.35rem }

.mp-pagos__lista{
  list-style:none; margin:0; padding:0;
  display:flex; flex-wrap:wrap; align-items:center; gap:.5rem .9rem;
}
.mp-pagos__item{
  display:flex; align-items:center; justify-content:center;
  height:34px; padding:0 .7rem;
  background:var(--mp-papel); border:1px solid var(--mp-hilo);
  color:var(--mp-tinta-2);
}
.mp-pagos__item svg{ width:26px; height:26px; display:block }
/* Peso óptico, no tamaño de caja: el de American Express es un rectángulo MACIZO con
   las letras caladas, así que a igual tamaño mancha el doble que el trazo de Visa. Se
   le baja la intensidad para que los cuatro pesen parejo. Mismo criterio que con los
   íconos de la cabecera. */
.mp-pagos__item svg[aria-hidden]{ opacity:.9 }
.mp-pagos__item:nth-child(4) svg{ opacity:.7; width:24px; height:24px }
/* el de Webpay es un mapa de bits a color: se apaga, pero no tanto que desaparezca */
.mp-pagos__item--webpay img{
  width:auto; height:15px; display:block;
  filter:grayscale(1) contrast(.9); opacity:.9;
}
.mp-pagos__nota{ margin:0; color:var(--mp-tinta-2); max-width:46ch }
.mp-pagos__lista{ flex:0 0 auto }

@media (max-width:639px){
  .mp-pagos{ justify-content:flex-start }
  .mp-pagos__lista{ gap:.45rem }
  .mp-pagos__item{ height:30px; padding:0 .55rem }
  .mp-pagos__item svg{ width:22px; height:22px }
  .mp-pagos__item--webpay img{ height:13px }
}