/* Pop-ups de campaña (class-popups.php): ventana en escritorio, panel desde abajo en móvil */

.inv-pu { --tinta: #20142e; --azul: #505dc3; --menta: #00e2b5; --gris: #5b546c; position: fixed; inset: 0; z-index: 99990; display: flex; align-items: center; justify-content: center; padding: 24px; font-family: var(--e-global-typography-text-font-family, "Plus Jakarta Sans"), system-ui, sans-serif; }
.inv-pu[hidden] { display: none; }
.inv-pu * { box-sizing: border-box; }
.inv-pu-fondo { position: absolute; inset: 0; background: rgba(32, 20, 46, .55); opacity: 0; transition: opacity .25s; }
.inv-pu-caja {
    position: relative; display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); width: min(760px, 100%); max-height: calc(100vh - 48px);
    overflow: hidden; border-radius: 24px; background: #fff; color: var(--tinta); opacity: 0; transform: translateY(12px) scale(.98); transition: opacity .25s, transform .25s;
}
.inv-pu.is-in .inv-pu-fondo { opacity: 1; }
.inv-pu.is-in .inv-pu-caja { opacity: 1; transform: none; }
.inv-pu-img { position: relative; min-height: 100%; background: #eeedf8; }
.inv-pu-img img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.inv-pu-txt { display: flex; flex-direction: column; align-items: flex-start; gap: 10px; padding: 32px 28px 28px; min-width: 0; }
.inv-pu-mk { margin: 0; font-size: 11px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--azul); }
.inv-pu-t { margin: 0 !important; color: var(--tinta) !important; font-family: var(--e-global-typography-primary-font-family, "Clash Display"), sans-serif !important; font-size: 26px !important; font-weight: 600 !important; line-height: 1.1 !important; text-wrap: balance; }
.inv-pu-x { margin: 0; color: var(--gris); font-size: 15px; line-height: 1.45; display: -webkit-box; -webkit-line-clamp: 4; -webkit-box-orient: vertical; overflow: hidden; }
.inv-pu .inv-pr-fin { display: inline-flex; align-items: center; gap: 5px; padding: 3px 9px; border-radius: 999px; background: #eeedf8; color: var(--tinta); font-size: 12px; font-weight: 600; }
.inv-pu .inv-pr-fin svg { width: 13px; height: 13px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; }
.inv-pu .inv-pr-fin.is-ya { background: var(--menta); }
.inv-pu-b {
    display: inline-flex; align-items: center; gap: 8px; margin-top: auto; min-height: 48px; padding: 0 22px; border-radius: 999px;
    background: var(--menta); color: var(--tinta) !important; font-size: 15px; font-weight: 700; text-decoration: none !important; transition: background .15s;
}
.inv-pu-b:hover { background: #2debc6; }
.inv-pu-b:focus-visible, .inv-pu-cerrar:focus-visible { outline: 2px solid var(--azul); outline-offset: 3px; }
/* !important: los estilos globales de botón del kit de Elementor lo pintaban de verde */
.inv-pu .inv-pu-cerrar {
    position: absolute; top: 10px; right: 10px; z-index: 2; display: grid; place-items: center; width: 40px; height: 40px; min-height: 0 !important; padding: 0 !important;
    border: 0 !important; border-radius: 50% !important; background: rgba(255, 255, 255, .92) !important; color: var(--tinta) !important; box-shadow: none !important; cursor: pointer;
}
.inv-pu-cerrar::after { content: ""; position: absolute; inset: -4px; }   /* 48 px de zona táctil */
.inv-pu-cerrar svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; }
.inv-pu .inv-pu-cerrar:hover { background: #eeedf8 !important; }
.inv-pu .screen-reader-text { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* Móvil: panel desde abajo, sin tapar la página entera */
@media (max-width: 767px) {
    .inv-pu { align-items: flex-end; padding: 0; }
    .inv-pu-caja { grid-template-columns: 1fr; width: 100%; max-height: 82vh; border-radius: 20px 20px 0 0; transform: translateY(100%); }
    .inv-pu.is-in .inv-pu-caja { transform: none; }
    .inv-pu-img { min-height: 0; aspect-ratio: 16 / 10; max-height: 34vh; }
    .inv-pu-txt { gap: 8px; padding: 18px 20px calc(20px + env(safe-area-inset-bottom)); }
    .inv-pu-t { font-size: 22px !important; }
    .inv-pu-x { font-size: 14.5px; -webkit-line-clamp: 3; }
    .inv-pu-b { width: 100%; justify-content: center; margin-top: 6px; }
}
@media (prefers-reduced-motion: reduce) {
    .inv-pu-fondo, .inv-pu-caja { transition: none; }
}