/* Popup de salida de MOBO. Lo carga el snippet "MOBO - Popup de salida".
   Paleta tomada del tema (Flatsome): tinta #0b0b0f y oro #f0b13d, tipografia
   Karla, que ya la carga el tema. */

/* El boton de WhatsApp (Click to Chat) usa z-index 99999999 y se montaba
   encima del popup en celular, justo sobre el texto legal. Hay que ganarle. */
.mp2{position:fixed;inset:0;z-index:2147483000;display:none;align-items:center;justify-content:center;padding:20px}
.mp2.abierto{display:flex}
.mp2-fondo{position:absolute;inset:0;background:rgba(8,8,12,.72);backdrop-filter:blur(3px)}
.mp2-caja{position:relative;display:grid;grid-template-columns:1fr 340px;width:min(880px,100%);max-height:min(620px,92vh);background:#fff;border-radius:18px;overflow:hidden;box-shadow:0 24px 70px rgba(0,0,0,.4);font-family:Karla,sans-serif;animation:mp2sube .28s cubic-bezier(.2,.8,.3,1)}
@keyframes mp2sube{from{opacity:0;transform:translateY(14px) scale(.98)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){.mp2-caja{animation:none}}

/* --- izquierda: la oferta y el formulario --- */
.mp2-form{padding:44px 42px;display:flex;flex-direction:column;justify-content:center;overflow-y:auto}
/* El archivo del logo del header es la version BLANCA ("Invertir-colores"),
   asi que sobre el panel claro hay que volver a invertirlo o no se ve. */
.mp2-form::before{content:"";display:block;width:96px;height:38px;margin-bottom:22px;background:url(https://mobo.com.ar/wp-content/uploads/2026/07/Invertir-colores-de-la-imagen-1024x400.png) left center/contain no-repeat;filter:invert(1)}
.mp2-form h3{margin:0 0 6px;font-size:30px;line-height:1.15;font-weight:800;color:#0b0b0f;letter-spacing:-.02em;text-wrap:balance}
.mp2-off{color:#f0b13d}
.mp2-baja{margin:0 0 4px;font-size:15px;color:#5b6068}
.mp2-detalle{margin:0 0 22px;font-size:13px;color:#8b9099}
.mp2-form input[type=email]{width:100%;padding:15px 16px;font-size:15px;font-family:inherit;border:1.5px solid #dfe2e7;border-radius:10px;background:#fff;color:#0b0b0f}
.mp2-form input[type=email]:focus{outline:none;border-color:#0b0b0f;box-shadow:0 0 0 3px rgba(11,11,15,.08)}
.mp2-form input.mp2-mal{border-color:#c9372c}
.mp2-enviar{width:100%;margin-top:12px;padding:16px;border:0;border-radius:10px;background:#0b0b0f;color:#fff;font-family:inherit;font-size:15px;font-weight:700;letter-spacing:.04em;cursor:pointer}
.mp2-enviar:hover{background:#23232c}
.mp2-enviar[disabled]{opacity:.55;cursor:default}
.mp2-no{display:block;margin-top:16px;text-align:center;font-size:13px;color:#9aa0a8;background:0;border:0;width:100%;cursor:pointer;font-family:inherit;text-decoration:underline}
.mp2-error{margin:10px 0 0;font-size:13px;color:#c9372c;min-height:18px}
.mp2-legal{margin:14px 0 0;font-size:11px;line-height:1.5;color:#a8adb5}

/* --- derecha: la foto --- */
.mp2-foto{position:relative;background:#0b0b0f center/cover no-repeat}
.mp2-foto::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(11,11,15,.55) 0%,rgba(11,11,15,0) 32%,rgba(11,11,15,.1) 55%,rgba(11,11,15,.88) 100%)}
.mp2-chip{position:absolute;top:20px;left:20px;z-index:2;padding:7px 13px;border-radius:999px;background:rgba(11,11,15,.82);color:#f0b13d;font-size:10px;font-weight:800;letter-spacing:.13em}
.mp2-pie{position:absolute;left:22px;right:22px;bottom:22px;z-index:2;color:#fff}
.mp2-pie strong{display:block;font-size:19px;line-height:1.25;font-weight:800;text-wrap:balance}
.mp2-pie span{display:block;margin-top:7px;font-size:12.5px;line-height:1.5;color:rgba(255,255,255,.82)}

/* --- estado 2: el codigo --- */
.mp2-ok{display:none;text-align:center}
.mp2-listo .mp2-ok{display:block}
.mp2-listo .mp2-paso1{display:none}
.mp2-ok h3{font-size:26px;margin-bottom:8px}
.mp2-codigo{margin:18px 0 6px;padding:16px;border:2px dashed #0b0b0f;border-radius:12px;font-size:25px;font-weight:800;letter-spacing:3px;color:#0b0b0f;text-transform:uppercase;cursor:pointer;background:#fbfbfc}
.mp2-copiado{font-size:12.5px;color:#2e7d43;min-height:18px;margin:0 0 12px}

@media (max-width:760px){
	.mp2{padding:0;align-items:flex-end}
	.mp2-caja{grid-template-columns:1fr;max-height:94vh;border-radius:18px 18px 0 0}
	.mp2-foto{order:-1;min-height:190px}
	.mp2-pie strong{font-size:17px}
	.mp2-form{padding:26px 24px 30px}
	.mp2-form h3{font-size:25px}
	.mp2-form::before{width:80px;height:32px;margin-bottom:14px}
}