/* Magie Promociones: tarjeta dentro del artículo, con el branding de Las Cartas de Magie.
   Magenta solo en el botón (que destaque); durazno de fondo; fuentes que el blog ya carga. */

.mp-espacio[hidden] { display: none; }
.mp-espacio { margin: 2.25rem 0; }
.mp-espacio-portada { width: calc(100% - 40px); max-width: var(--responsive--aligndefault-width, 610px); margin: 3rem auto !important; }
.mp-espacio .mp-pieza { margin-left: auto; margin-right: auto; }

.mp-pieza {
  --mp-magenta: #e0115f;
  --mp-magenta-oscuro: #b30d4b;
  --mp-durazno: #ffefe7;
  --mp-tinta: #28211d;
  --mp-suave: #6b5d55;
  max-width: 640px;
  text-align: left;
  margin: 0 auto;
  background: var(--mp-durazno);
  border-radius: 14px;
  overflow: hidden;
  box-shadow: 0 8px 24px rgba(40, 33, 29, .08);
}

.mp-enlace, .mp-enlace:hover, .mp-enlace:focus, .mp-enlace:visited {
  display: block;
  color: var(--mp-tinta);
  text-decoration: none;
}
.mp-enlace:focus-visible { outline: 3px solid var(--mp-magenta); outline-offset: 3px; border-radius: 14px; }

.mp-img { display: block; width: 100%; height: auto; aspect-ratio: 3 / 2; object-fit: cover; margin: 0; }

.mp-cuerpo { padding: 1.1rem 1.15rem 1.25rem; }
.mp-etiqueta {
  margin: 0 0 .5rem;
  font: 600 .72rem/1.3 "Inter", system-ui, sans-serif;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--mp-magenta);
}
.mp-dolor {
  margin: 0 0 .6rem;
  font: 600 1.2rem/1.35 "Source Serif Pro", Georgia, serif;
  text-wrap: balance;
}
.mp-amarre {
  margin: 0 0 .75rem;
  font: 400 1.02rem/1.5 "Source Serif Pro", Georgia, serif;
  text-wrap: pretty;
}
.mp-frase {
  margin: 0 0 1rem;
  font: italic 1.02rem/1.5 "Source Serif Pro", Georgia, serif;
  color: var(--mp-suave);
  text-wrap: pretty;
}
.mp-fuente { display: block; margin-top: .3rem; font: 600 .78rem/1.3 "Inter", system-ui, sans-serif; font-style: normal; color: var(--mp-suave); }
.mp-libro { display: flex; align-items: center; gap: .85rem; }
.mp-portada { width: 56px; height: auto; flex: none; border-radius: 2px; box-shadow: 0 4px 10px rgba(40, 33, 29, .2); margin: 0; }
.mp-libro-datos { display: flex; flex-direction: column; gap: .45rem; min-width: 0; flex: 1; }
.mp-libro-nombre { font: 600 .92rem/1.3 "Inter", system-ui, sans-serif; }
.mp-boton {
  align-self: flex-start;
  background: var(--mp-magenta);
  color: #fff;
  font: 600 .95rem/1 "Inter", system-ui, sans-serif;
  padding: .8rem 1.2rem;
  border-radius: 999px;
}
.mp-enlace:hover .mp-boton, .mp-enlace:focus-visible .mp-boton { background: var(--mp-magenta-oscuro); }

@media (min-width: 760px) {
  .mp-dolor { font-size: 1.35rem; }
}