/* POPUP MAKER */
  #popmake-524 {
    background: #F5F2EF;
    box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.2);
    padding: 40px 40px 40px 20px;
    overflow: hidden;
  }

  .pum-close {
    position: absolute;
    height: auto !important;
    width: auto !important;
    top: 10px !important;
    right: 10px !important;
    background: var(--c-primario) !important;
    color: white !important;
    border: none;
    padding: 5px 10px !important;
    cursor: pointer;
    font-size: 16px;
    border-radius: 0 !important;
  }

  

  #popmake-524 .popup-row {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
  }
  
  #popmake-524 .popup-row .popup-col {
    flex: 0 0 70%;
  }

  #popmake-524 .popup-row .popup-col:first-child {
    flex: 0 0 30%;
  }

  .pum-container.pum-responsive img {
    max-width: 90%;
    transform: scale(1) rotate(0deg);
    height: auto;
    position: absolute;
    top: 47px;
    left: 22px;
}


#popup-fondo, #popup  {
  display: none;
}

@media (max-width: 768px) {

  #popmake-524 .popup-row .popup-col {
    flex: 0 0 100%;
  }

  .popup-col:first-child {
    display: none;
  }
}
/* Estilos del pop-up 
#popup-fondo {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.5);
  display: none;
  z-index: 999999998; 
}

#popup {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 850px;
  max-width: 90%;
  background: #F5F2EF;
  box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.2);
  display: none;
  z-index: 999999999;

  padding: 30px;
 
  overflow: hidden;
}

.popup-contenido {
  display: flex;
  flex-direction: row;
  width: 100%; 
}


.popup-columna.izquierda img {
  max-width: 100%;
  height: auto;
  transform: scale(0.5);
  position: absolute;
  top: -60px;
  right: -120px;

}

.popup-columna.derecha {
  background: #F5F2EF;
  width: 100%;
  padding: 20px;
  padding-left: 40px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  border: 1px solid var(--c-primario);
}

.popup-columna.derecha h3 {
  width: 80%;
  padding-bottom: 30px;
}

p.descuento {
  padding-top: 20px;
  font-size: 18px;
  max-width: 80%;
}



.cerrar-popup {
  position: absolute;
  top: 45px;
  right: 45px;
  background: var(--c-primario);
  color: white;
  border: none;
  padding: 5px 10px;
  cursor: pointer;
  font-size: 16px;
  
}


<div id="popup-fondo"></div> 
<div id="popup">
	
    <button class="cerrar-popup" onclick="cerrarPopup()">X</button>
    <div class="popup-contenido">
        <div class="popup-columna izquierda">
            <img src="/wp-content/uploads/2025/02/PISTOLAS_transp-Photoroom.png" alt="Imagen">
        </div>
        <div class="popup-columna derecha">
            <h3>Apúntate a nuestra newsletter</h3>
            [contact-form-7 id="105b0d0" title="Newsletter"]
            <p class="descuento">Obtén un 50% en la entrada de uno de nuestros eventos.</p>
        </div>
    </div>
</div>
  */