/* Ventana emergente. Los colores llegan por variables desde el panel. */

.mp-pop{ position:fixed; inset:0; z-index:200; display:flex; align-items:center; justify-content:center; padding:1rem }
.mp-pop[hidden]{ display:none }

.mp-pop__fondo{
  position:absolute; inset:0; background:rgba(30,27,25,.45);
  opacity:0; transition:opacity .22s cubic-bezier(.165,.84,.44,1);
}
.mp-pop.is-abierta .mp-pop__fondo{ opacity:1 }

.mp-pop__caja{
  position:relative; width:100%; max-width:var(--mp-pop-ancho,420px);
  background:var(--mp-pop-fondo,#FBFAF7); color:var(--mp-pop-tinta,#1E1B19);
  box-shadow:0 30px 60px -30px rgba(30,27,25,.5);
  max-height:calc(100vh - 2rem); overflow-y:auto;
  opacity:0; transform:translateY(10px) scale(.98);
  transition:opacity .22s cubic-bezier(.165,.84,.44,1), transform .22s cubic-bezier(.165,.84,.44,1);
}
.mp-pop.is-abierta .mp-pop__caja{ opacity:1; transform:none }

/* en la esquina: no tapa la pantalla, sirve para avisos que no exigen respuesta */
.mp-pop--esquina{ align-items:flex-end; justify-content:flex-end; padding:1.25rem }
.mp-pop--esquina .mp-pop__fondo{ display:none }
.mp-pop--esquina .mp-pop__caja{ max-width:min(var(--mp-pop-ancho,420px), 22rem) }

.mp-pop__x{
  position:absolute; top:.5rem; right:.5rem; z-index:2;
  width:34px; height:34px; display:flex; align-items:center; justify-content:center;
  background:transparent; border:0; cursor:pointer; color:currentColor; opacity:.55;
}
.mp-pop__x:hover{ opacity:1 }

.mp-pop__cuerpo{ padding:2rem 1.75rem 1.75rem; display:grid; gap:.9rem }
.mp-pop__img{ margin:-2rem -1.75rem .4rem }
.mp-pop__img img{ width:100%; height:auto; display:block }

.mp-pop__tit{ margin:0; font-size:1.5rem; line-height:1.2 }
.mp-pop__txt{ margin:0; color:color-mix(in srgb, currentColor 78%, transparent) }
.mp-pop__nota{ margin:0; font-size:.75rem; color:color-mix(in srgb, currentColor 55%, transparent) }

.mp-pop__cupon{ display:flex; align-items:stretch; gap:.5rem }
.mp-pop__cupon code{
  flex:1; display:flex; align-items:center; justify-content:center;
  border:1px dashed color-mix(in srgb, currentColor 35%, transparent);
  padding:.75rem 1rem; font-size:1rem; letter-spacing:.14em; font-weight:600;
}
.mp-pop__copiar{
  border:1px solid currentColor; background:transparent; color:inherit; cursor:pointer;
  padding:0 1rem; font-size:.75rem; letter-spacing:.1em; text-transform:uppercase;
}
.mp-pop__copiar:hover{ background:var(--mp-pop-acento,#73293C); border-color:var(--mp-pop-acento,#73293C); color:#fff }

.mp-pop__form{ display:grid; gap:.5rem }
.mp-pop__lbl{ font-size:.8125rem; opacity:.75 }
.mp-pop__form input[type=email]{
  /* 16px o iOS hace zoom al enfocar */
  font-size:16px; padding:.75rem .85rem; border:1px solid color-mix(in srgb, currentColor 25%, transparent);
  background:transparent; color:inherit; width:100%; box-sizing:border-box;
}
.mp-pop__form input[type=email]:focus{ outline:2px solid transparent; outline-offset:2px; border-color:currentColor }

.mp-pop__boton{
  display:inline-flex; align-items:center; justify-content:center; text-align:center;
  padding:.85rem 1.4rem; background:var(--mp-pop-tinta,#1E1B19); color:var(--mp-pop-fondo,#FBFAF7);
  border:1px solid var(--mp-pop-tinta,#1E1B19); cursor:pointer; text-decoration:none;
  font-size:.8125rem; letter-spacing:.1em; text-transform:uppercase;
  transition:background-color .18s cubic-bezier(.165,.84,.44,1), border-color .18s cubic-bezier(.165,.84,.44,1);
}
.mp-pop__boton:hover{ background:var(--mp-pop-acento,#73293C); border-color:var(--mp-pop-acento,#73293C); color:#fff }
.mp-pop__boton--wa{ background:#25D366; border-color:#25D366; color:#0b2e17 }
.mp-pop__boton--wa:hover{ background:#1ebe5a; border-color:#1ebe5a; color:#0b2e17 }

.mp-pop__gracias{ margin:0; font-weight:500 }
.mp-pop__acepta{ display:flex; gap:.55rem; align-items:flex-start; font-size:.75rem; line-height:1.45; cursor:pointer;
  color:color-mix(in srgb, currentColor 72%, transparent) }
.mp-pop__acepta input{ margin:.15rem 0 0; width:16px; height:16px; flex:none; accent-color:var(--mp-pop-acento,#73293C) }
.mp-pop__acepta a{ color:inherit; text-decoration:underline; text-underline-offset:2px }
.mp-pop__acepta[hidden], .mp-pop__cupon[hidden], .mp-pop__boton[hidden]{ display:none }
.mp-pop__error{ margin:0; font-size:.8125rem; color:var(--mp-pop-acento,#73293C) }

/* en el teléfono sube desde abajo: es donde llega el pulgar y no tapa el contenido */
@media (max-width:640px){
  .mp-pop{ align-items:flex-end; padding:0 }
  .mp-pop__caja{ max-width:none; max-height:88vh; transform:translateY(24px) }
  .mp-pop--esquina{ padding:0 }
  .mp-pop--esquina .mp-pop__caja{ max-width:none }
  .mp-pop__cuerpo{ padding:1.75rem 1.25rem 1.5rem }
  .mp-pop__img{ margin:-1.75rem -1.25rem .4rem }
}

@media (prefers-reduced-motion:reduce){
  .mp-pop__fondo, .mp-pop__caja{ transition:none }
}

/* La vista previa del panel no necesita reglas propias: va dentro de un iframe, que ya
   es una pantalla, y se pinta con estas mismas reglas. */