/* Pop-up del webinar (home): diseño original del pop-up de Joule. Todo va bajo .mwp-* para no tocar el resto del sitio. */
.mwp-ov{position:fixed;inset:0;z-index:99999;background:rgba(14,40,70,.55);display:none;align-items:center;justify-content:center;padding:16px;font-family:Nunito,system-ui,sans-serif;-webkit-font-smoothing:antialiased}
.mwp-ov.on{display:flex;animation:mwpf .25s ease}
@keyframes mwpf{from{opacity:0}to{opacity:1}}
@keyframes mwpu{from{transform:translateY(16px);opacity:0}to{transform:none;opacity:1}}
.mwp{position:relative;width:780px;max-width:100%;max-height:calc(100vh - 32px);overflow:auto;background:#FFF;border-radius:20px;box-shadow:0 30px 80px rgba(0,0,0,.3);display:flex;animation:mwpu .3s ease}
.mwp *{box-sizing:border-box}
.mwp-x{position:absolute;top:12px;right:12px;width:36px;height:36px;border-radius:18px;border:0;background:#F0F4F8;color:#3A4A5A;font-size:20px;line-height:36px;cursor:pointer;z-index:2}
.mwp-x:hover{background:#E1E8EF}
.mwp-l{flex:0 0 330px;background:linear-gradient(150deg,#F7FAFD 0%,#E3EDF7 100%);padding:34px 30px;display:flex;flex-direction:column}
.mwp-k{font-size:13px;font-weight:800;letter-spacing:2px;color:#F5A623}
.mwp-t{margin:10px 0 0;font-size:30px;line-height:1.1;font-weight:800;color:#0E4C7E;letter-spacing:-.5px}
.mwp-t span{color:#1971B8}
.mwp-s{margin:14px 0 0;font-size:15px;line-height:1.45;color:#3A4A5A}
.mwp-ev{display:flex;align-items:center;gap:14px;margin-top:24px}
.mwp-tile{flex:none;width:62px;height:68px;border-radius:12px;background:#FFF;overflow:hidden;box-shadow:0 8px 18px rgba(14,76,126,.15);text-align:center}
.mwp-tile b{display:block;height:22px;line-height:22px;background:#1971B8;color:#FFF;font-size:12px;letter-spacing:2px}
.mwp-tile i{display:block;font-style:normal;height:46px;line-height:46px;color:#0E4C7E;font-size:30px;font-weight:800}
.mwp-d{font-size:17px;font-weight:800;color:#0E4C7E;line-height:1.2}
.mwp-h{font-size:14px;color:#3A4A5A;margin-top:2px}
.mwp-logos{margin-top:auto;padding-top:22px;display:flex;align-items:center;gap:12px}
.mwp-logos img{display:block;height:28px;width:auto}
.mwp-logos img.av{height:24px}
.mwp-logos span{width:2px;height:26px;background:#CDD6DF}
.mwp-r{flex:1;padding:34px 30px 28px}
.mwp-r h3{margin:0 0 4px;font-size:22px;font-weight:800;color:#0E4C7E}
.mwp-r p.mwp-sub{margin:0 0 16px;font-size:14px;color:#556B82}
.mwp-f{margin-bottom:11px}
.mwp-f input,.mwp-f select{width:100%;height:44px;border:1.5px solid #CBD6E2;border-radius:10px;padding:0 13px;font:16px Nunito,system-ui,sans-serif;color:#22303E;outline:none;background:#FFF}
.mwp-f select{appearance:none;-webkit-appearance:none;padding-right:38px;background:#FFF url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23556B82' stroke-width='2.4' stroke-linecap='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E") no-repeat right 13px center}
.mwp-f select:invalid,.mwp-f select.ph{color:#8A99A8}
.mwp-f input:focus,.mwp-f select:focus{border-color:#1971B8;box-shadow:0 0 0 3px rgba(25,113,184,.15)}
.mwp-f.e input,.mwp-f.e select{border-color:#C0392B}
.mwp-f small{display:none;color:#C0392B;font-size:12px;margin-top:4px}
.mwp-f.e small{display:block}
.mwp-c{display:flex;gap:9px;align-items:flex-start;font-size:12px;line-height:1.4;color:#556B82;margin:4px 0 14px;cursor:pointer}
.mwp-c input{flex:none;width:17px;height:17px;margin:1px 0 0;accent-color:#1971B8}
.mwp-c a{color:#1971B8}
.mwp-c.e span{color:#C0392B}
.mwp-b{width:100%;border:0;border-radius:30px;background:#F5A623;color:#222;font:800 17px Nunito,system-ui,sans-serif;padding:14px 0;cursor:pointer}
.mwp-b:hover{filter:brightness(1.04)}
.mwp-b[disabled]{opacity:.7;cursor:default}
.mwp-n{text-align:center;font-size:12px;color:#7A8A9A;margin-top:10px}
.mwp-ok{display:none;text-align:center;padding:40px 6px}
.mwp-ok div{width:62px;height:62px;border-radius:31px;background:#1971B8;margin:0 auto 16px;display:flex;align-items:center;justify-content:center}
.mwp-ok h3{margin:0;font-size:22px;color:#0E4C7E}
.mwp-ok p{margin:10px 0 0;font-size:15px;line-height:1.5;color:#3A4A5A}
.mwp.done form{display:none}.mwp.done .mwp-ok{display:block}
.mwp-tab{position:fixed;right:20px;bottom:20px;z-index:99998;display:none;align-items:center;gap:10px;border:0;border-radius:30px;background:#0E4C7E;color:#FFF;font:800 15px Nunito,system-ui,sans-serif;padding:13px 20px;box-shadow:0 10px 26px rgba(14,76,126,.35);cursor:pointer}
.mwp-tab.on{display:inline-flex}

@media(max-width:700px){.mwp{flex-direction:column}.mwp-l{flex:none;padding:26px 22px 20px}.mwp-t{font-size:24px;padding-right:30px}.mwp-s,.mwp-logos{display:none}.mwp-ev{margin-top:16px}.mwp-r{padding:22px}}

.mwp-j{display:flex;align-items:center;gap:18px}
.mwp-jl{position:relative;width:46px;height:46px;flex:none}
.mwp-jl .ic{position:absolute;inset:0;border-radius:13px;background:linear-gradient(135deg,#5D36FF,#A100C2);display:flex;align-items:center;justify-content:center;box-shadow:0 8px 20px rgba(93,54,255,.35);animation:mwpPop .7s cubic-bezier(.2,1.4,.4,1) both .15s}
.mwp-jl .ic svg{animation:mwpSpin 6s ease-in-out infinite 1s}
.mwp-jl .ring{position:absolute;inset:0;border-radius:13px;border:2px solid #7B55FF;opacity:0;animation:mwpRing 2.4s ease-out infinite 1s}
.mwp-jl .ring.r2{animation-delay:2.2s}
.mwp-jl .tw{position:absolute;width:10px;height:10px;opacity:0;animation:mwpTw 2.8s ease-in-out infinite}
.mwp-jl .tw.a{top:-8px;right:-10px;animation-delay:1.2s}.mwp-jl .tw.b{bottom:-6px;left:-12px;animation-delay:2.1s;width:7px;height:7px}
.mwp-jt{font-size:13px;line-height:1.25;color:#3A4A5A}.mwp-jt b{display:block;font-size:15px;color:#5D36FF}
@keyframes mwpPop{from{transform:scale(.2) rotate(-25deg);opacity:0}to{transform:none;opacity:1}}
@keyframes mwpSpin{0%,70%{transform:rotate(0) scale(1)}80%{transform:rotate(90deg) scale(1.15)}90%,100%{transform:rotate(90deg) scale(1)}}
@keyframes mwpRing{0%{transform:scale(1);opacity:.7}100%{transform:scale(1.8);opacity:0}}
@keyframes mwpTw{0%,100%{opacity:0;transform:scale(.3)}40%{opacity:1;transform:scale(1) rotate(45deg)}70%{opacity:0;transform:scale(.4)}}
.mwp-chat{margin-top:20px;background:#FFF;border-radius:14px;box-shadow:0 10px 26px rgba(14,76,126,.12);padding:12px;display:flex;flex-direction:column;justify-content:flex-end;gap:8px;height:206px;overflow:hidden;-webkit-mask-image:linear-gradient(to bottom,transparent 0,#000 34px);mask-image:linear-gradient(to bottom,transparent 0,#000 34px)}
.mwp-chat>*{flex:none;display:none}
.mwp-okc{align-self:stretch;opacity:0;background:#EAF3FB;border:1.5px solid #B9D6EE;border-radius:12px;padding:9px 11px;font-size:13px;line-height:1.3;color:#0E4C7E;align-items:center;gap:10px}
.mwp-okc .ck{flex:none;width:26px;height:26px;border-radius:13px;background:#1971B8;display:flex;align-items:center;justify-content:center}
.mwp-okc b{display:block;font-size:14px}
.mwp-q,.mwp-a,.mwp-dots{font-size:13px;line-height:1.35;padding:8px 11px;border-radius:12px;max-width:88%;opacity:0}
.mwp-q{align-self:flex-end;background:#EEF3F9;color:#1D2D3E;border-bottom-right-radius:3px}
.mwp-a{align-self:flex-start;background:#F3EFFF;color:#1D2D3E;border-bottom-left-radius:3px}
.mwp-dots{align-self:flex-start;background:#F3EFFF;gap:4px;padding:11px 12px}
.mwp-dots i{width:6px;height:6px;border-radius:3px;background:#7B55FF;animation:mwpDot 1s infinite}
.mwp-dots i:nth-child(2){animation-delay:.15s}.mwp-dots i:nth-child(3){animation-delay:.3s}
@keyframes mwpDot{0%,80%,100%{opacity:.25;transform:translateY(0)}40%{opacity:1;transform:translateY(-3px)}}
.mwp-in{animation:mwpIn .35s ease forwards}
@keyframes mwpIn{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
.mwp-tab .jt{display:inline-flex;width:22px;height:22px;border-radius:7px;background:linear-gradient(135deg,#5D36FF,#A100C2);align-items:center;justify-content:center;animation:mwpSpin 4s ease-in-out infinite}
@media(prefers-reduced-motion:reduce){.mwp-ov *,.mwp-tab *{animation:none!important}.mwp-jl .ic,.mwp-q,.mwp-a,.mwp-okc{opacity:1}}
@media(max-width:700px){.mwp-chat{display:none}}

/* En el sitio el botón flotante del chat (MethBot) ocupa la esquina derecha: el del webinar va a la izquierda. */
.mwp-tab{right:auto;left:20px}
@media(max-width:700px){.mwp-tab{left:12px;bottom:16px;font-size:13.5px;padding:11px 16px}}
.mwp-hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.mwp-err{margin:10px 0 0;font-size:13.5px;color:#C0392B;text-align:center}

/* ---------- celular: más compacto, la cruz siempre a mano y sin que la página de atrás se mueva ---------- */
@media(max-width:700px){
  .mwp-ov{padding:12px}
  .mwp{max-height:calc(100vh - 24px);max-height:calc(100dvh - 24px);border-radius:16px;overscroll-behavior:contain;-webkit-overflow-scrolling:touch}
  /* La cruz acompaña al pop-up y queda pegada arriba aunque se desplace el contenido. */
  .mwp-x{position:sticky;top:10px;flex:none;align-self:flex-end;margin:10px 10px -48px 0;width:38px;height:38px;line-height:38px;background:#FFF;box-shadow:0 2px 10px rgba(14,40,70,.18)}
  .mwp-l{padding:18px 20px 14px}
  .mwp-k{font-size:12px;letter-spacing:1.6px;margin-top:12px!important}
  .mwp-t{font-size:22px;margin-top:6px;padding-right:40px}
  .mwp-ev{margin-top:12px;gap:12px}
  .mwp-tile{width:50px;height:56px;border-radius:10px}
  .mwp-tile b{height:18px;line-height:18px;font-size:11px}
  .mwp-tile i{height:38px;line-height:38px;font-size:24px}
  .mwp-d{font-size:16px}
  .mwp-h{font-size:13.5px}
  .mwp-r{padding:18px 20px 20px}
  .mwp-r h3{font-size:20px}
  .mwp-r p.mwp-sub{font-size:13.5px;margin-bottom:12px}
  .mwp-f{margin-bottom:8px}
  .mwp-c{margin:6px 0 12px;padding:4px 0}
  .mwp-c input{width:20px;height:20px}
  .mwp-n{margin-top:8px}
  html.mwp-abierto,html.mwp-abierto body{overflow:hidden}
}
/* Teléfonos bajos (por ejemplo iPhone SE): el sello de Joule se esconde para que el formulario entre en pantalla. */
@media(max-width:700px) and (max-height:760px){
  .mwp-j{display:none}
  .mwp-k{margin-top:0!important}
}
/* Pantallas angostas: el botón flotante dice solo "Webinar 10/12", así no se pisa con el de MethBot. */
@media(max-width:400px){ .mwp-tab-x{display:none} }