/**
 * La puerta a /llaveros-para-equipos.
 *
 * Aparece al pie del listado de la categoría 11 y en la ficha del 787, las dos
 * sobre fondo blanco. Por eso es un marco azul sobre fondo claro y no una banda
 * oscura: destaca lo suficiente para verse sin apagar la rejilla de productos
 * que tiene encima.
 *
 * Todas las reglas llevan .mch-pu delante porque el tema impone su propio radio,
 * altura y tipografía a cualquier enlace con pinta de botón.
 */
.mch-pu{
  border:2px solid #0068ae; border-radius:16px; background:#f7fbfe;
  /* Margen abajo también: en la categoría, justo debajo viene la descripción
     SEO, y sin aire el marco azul se pega al texto. */
  padding:22px 26px; margin:26px 0 32px;
  display:flex; align-items:center; gap:28px; flex-wrap:wrap;
}
.mch-pu .mch-pu-cabeza{ flex:1; min-width:230px; }
.mch-pu .mch-pu-etiqueta{
  display:inline-block; font-size:.72rem; font-weight:800; letter-spacing:.08em; text-transform:uppercase;
  background:#0068ae; color:#fff; border-radius:999px; padding:3px 11px; margin:0 0 8px;
}
.mch-pu b.mch-pu-titulo{
  display:block; font-size:1.25rem; color:#00365a; letter-spacing:-.02em; margin:0 0 4px; line-height:1.3;
}
.mch-pu p{ margin:0; color:#54636f; font-size:.92rem; line-height:1.5; }
.mch-pu a.mch-pu-bt{
  display:inline-flex; align-items:center; justify-content:center; gap:9px;
  height:48px; padding:0 24px; border-radius:999px; text-decoration:none; white-space:nowrap;
  background:#0068ae; color:#fff; font-weight:800; font-size:1rem;
  box-shadow:0 3px 10px rgba(0,104,174,.28);
}
.mch-pu a.mch-pu-bt:hover,
.mch-pu a.mch-pu-bt:focus{ background:#004776; color:#fff; text-decoration:none; }
.mch-pu a.mch-pu-bt .mch-pu-flecha{ font-size:1.1em; line-height:1; }

@media (max-width:767px){
  .mch-pu{ gap:18px; padding:20px; }
  .mch-pu a.mch-pu-bt{ width:100%; }
}