/* =========================================================
   MUGUI — Popup del Home (editable desde el panel: Popups del Home)
   Imagen a la izquierda, texto a la derecha, botón debajo del texto.
   ========================================================= */
.mp-overlay{
  position:fixed; inset:0; z-index:9000;
  display:flex; align-items:center; justify-content:center;
  padding:1.2rem;
  background:rgba(0,0,0,.62);
  -webkit-backdrop-filter:blur(3px); backdrop-filter:blur(3px);
  opacity:0; visibility:hidden;
  transition:opacity .35s ease, visibility 0s linear .35s;
}
.mp-overlay.is-open{ opacity:1; visibility:visible; transition:opacity .35s ease; }

.mp-modal{
  position:relative;
  display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1.08fr);
  width:min(900px,100%); max-height:calc(100vh - 2.4rem);
  background:#fff; color:#000;
  border-radius:0; overflow:hidden;
  box-shadow:0 30px 80px rgba(0,0,0,.45);
  transform:translateY(18px) scale(.985);
  transition:transform .45s cubic-bezier(.22,1,.36,1);
}
.mp-overlay.is-open .mp-modal{ transform:none; }

.mp-media{ position:relative; min-height:400px; background:#000; }
.mp-media img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; display:block; }

.mp-body{
  display:flex; flex-direction:column; justify-content:center; align-items:flex-start;
  padding:clamp(1.7rem,4vw,3rem);
  overflow-y:auto;
}
.mp-label{
  display:inline-flex; align-items:center; gap:.6rem;
  font-family:var(--f-body, 'Montserrat', sans-serif);
  font-size:.74rem; font-weight:600; letter-spacing:.22em; text-transform:uppercase;
}
.mp-label::before{
  content:""; width:8px; height:8px; background:#ffc200; flex:none;
  box-shadow:10px -6px 0 -1px #ffc200, 19px -12px 0 -2px #ffc200;
  margin-right:18px;
}
.mp-title{
  font-family:var(--f-display, 'Playfair Display', Georgia, serif);
  font-size:clamp(1.55rem,2.7vw,2.1rem); line-height:1.15; font-weight:600; letter-spacing:-.01em;
  margin:1rem 0 .85rem; color:#000;
}
.mp-text{
  font-family:var(--f-body, 'Montserrat', sans-serif);
  font-size:.98rem; line-height:1.65; color:rgba(0,0,0,.72); margin:0;
}
.mp-text strong{ color:#000; font-weight:600; }
.mp-btn{
  display:inline-flex; align-items:center; gap:.6rem;
  margin-top:1.7rem; padding:.95rem 1.5rem;
  background:#000; color:#fff;
  border:1px solid #000; border-radius:0;
  font-family:var(--f-body, 'Montserrat', sans-serif); font-size:.9rem; font-weight:600; letter-spacing:.01em;
  text-decoration:none; cursor:pointer;
  transition:background .25s ease, color .25s ease, border-color .25s ease, transform .25s ease;
}
.mp-btn:hover{ background:#ffc200; border-color:#ffc200; color:#000; transform:translateY(-1px); }
.mp-btn .mp-arrow{ transition:transform .25s ease; }
.mp-btn:hover .mp-arrow{ transform:translateX(3px); }

.mp-close{
  position:absolute; top:.85rem; right:.85rem; z-index:2;
  width:38px; height:38px; border-radius:0;
  display:inline-flex; align-items:center; justify-content:center;
  background:rgba(255,255,255,.92); color:#000;
  border:1px solid rgba(0,0,0,.12); cursor:pointer; padding:0;
  transition:background .2s ease, transform .2s ease;
}
.mp-close:hover{ background:#ffc200; }
.mp-modal:focus{ outline:none; }
.mp-close:focus-visible, .mp-btn:focus-visible{ outline:2px solid #ffc200; outline-offset:3px; }
.mp-close svg{ width:16px; height:16px; }

/* Sin imagen: una sola columna, más angosto */
.mp-modal.no-img{ grid-template-columns:1fr; width:min(540px,100%); }
.mp-modal.no-img .mp-media{ display:none; }

body.mp-lock{ overflow:hidden; }

@media (max-width:760px){
  .mp-modal{ grid-template-columns:1fr; overflow-y:auto; }
  .mp-media{ min-height:0; height:200px; }
  .mp-body{ overflow:visible; }
}
@media (prefers-reduced-motion:reduce){
  .mp-overlay, .mp-modal, .mp-btn, .mp-close{ transition:none !important; }
}