/* ═══════════════════════════════════════════════════════════
   Popper · estilos del frontend
   Los colores llegan como variables CSS desde la campaña, nunca
   como CSS inyectado: por eso no hay riesgo de inyección.
   ═══════════════════════════════════════════════════════════ */

.popper-root{
    --pp-bg:#fff; --pp-text:#111827; --pp-muted:#6b7280;
    --pp-accent:#4f46e5; --pp-accent-text:#fff;
    --pp-overlay:rgba(15,23,42,.7);
    --pp-radius:16px; --pp-width:560px;

    position:fixed; inset:0; z-index:999990;
    display:flex; align-items:center; justify-content:center;
    opacity:0; visibility:hidden;
    transition:opacity .25s ease, visibility .25s;
    font-family:inherit; line-height:1.5;
}
.popper-root.is-open{opacity:1; visibility:visible}

html.popper-locked{overflow:hidden}

.popper-overlay{position:absolute; inset:0; background:var(--pp-overlay); cursor:pointer}

/* ── Caja ── */
.popper-box{
    position:relative; z-index:1;
    display:flex; overflow:hidden;
    width:min(var(--pp-width), calc(100vw - 32px));
    max-height:calc(100vh - 48px);
    background:var(--pp-bg); color:var(--pp-text);
    border-radius:var(--pp-radius);
    transform:translateY(14px) scale(.97);
    transition:transform .3s cubic-bezier(.34,1.4,.64,1);
}
.popper-root.is-shadow .popper-box{box-shadow:0 30px 70px -20px rgba(0,0,0,.5)}
.popper-root.is-open .popper-box{transform:none}

.popper-root.anim-fade .popper-box{transform:none}
.popper-root.anim-slide-up .popper-box{transform:translateY(40px)}
.popper-root.anim-slide-side .popper-box{transform:translateX(40px)}
.popper-root.is-open.anim-slide-up .popper-box,
.popper-root.is-open.anim-slide-side .popper-box{transform:none}

.popper-body{
    flex:1; min-width:0;
    padding:34px 34px 30px;
    overflow-y:auto;
}

/* ── Imagen ── */
.popper-box.has-image{align-items:stretch}
.popper-media{flex:0 0 42%; background:#f1f5f9; overflow:hidden}
.popper-media img{width:100%; height:100%; object-fit:cover; display:block}
.popper-box.img-right{flex-direction:row-reverse}
.popper-box.img-top{flex-direction:column}
.popper-box.img-bottom{flex-direction:column-reverse}
.popper-box.img-top .popper-media,
.popper-box.img-bottom .popper-media{flex:0 0 190px; width:100%}

/* ── Cerrar ── */
.popper-close{
    position:absolute; top:12px; right:12px; z-index:3;
    width:24px; height:34px; display:flex; align-items:center; justify-content:center;
    border:none; border-radius:50%; cursor:pointer;
    background:rgba(127,127,127,.14); color:currentColor;
    transition:background .2s, transform .15s;
}
.popper-close:hover{background:rgba(127,127,127,.28);}
.popper-close:focus-visible{outline:2px solid var(--pp-accent); outline-offset:2px}

/* ── Texto ── */
.popper-eyebrow{
    margin:0 0 8px; font-size:.72rem; font-weight:800;
    letter-spacing:.09em; text-transform:uppercase; color:var(--pp-accent);
}
.popper-title{margin:0 0 10px; font-size:1.55rem; line-height:1.2; font-weight:800; color:var(--pp-text)}
.popper-subtitle{margin:0 0 18px; font-size:.95rem; color:var(--pp-muted)}
.popper-rich{margin:0 0 18px; font-size:.95rem; color:var(--pp-muted)}
.popper-rich p:last-child{margin-bottom:0}
.popper-footnote{margin-top:14px; font-size:.74rem; color:var(--pp-muted); opacity:.85}
.popper-footnote a{color:inherit}

/* ── Cupón ── */
.popper-coupon{
    display:flex; align-items:center; gap:10px; margin:0 0 18px;
    padding:12px 14px; border:2px dashed var(--pp-accent); border-radius:10px;
}
.popper-coupon-code{
    flex:1; font-family:ui-monospace,SFMono-Regular,Menlo,monospace;
    font-size:1.1rem; font-weight:800; letter-spacing:.08em; color:var(--pp-accent);
}
.popper-coupon-copy{
    border:none; background:var(--pp-accent); color:var(--pp-accent-text);
    padding:7px 13px; border-radius:7px; font-size:.78rem; font-weight:700; cursor:pointer;
}

/* ── Cuenta regresiva ── */
.popper-countdown{display:flex; gap:8px; margin:0 0 20px}
.popper-cd-cell{
    flex:1; min-width:0; text-align:center; padding:10px 4px; border-radius:10px;
    background:color-mix(in srgb, var(--pp-accent) 14%, transparent);
}
.popper-cd-num{display:block; font-size:1.5rem; font-weight:800; color:var(--pp-accent); line-height:1}
.popper-cd-label{display:block; margin-top:3px; font-size:.66rem; text-transform:uppercase; letter-spacing:.06em; color:var(--pp-muted)}
.popper-countdown.is-done{opacity:.45}

/* ── Vídeo ── */
.popper-video{position:relative; aspect-ratio:16/9; margin:0 0 18px; border-radius:10px; overflow:hidden; background:#000}
.popper-video iframe,
.popper-video video{position:absolute; inset:0; width:100%; height:100%; border:0}

/* ── Formulario ── */
.popper-field{margin-bottom:12px}
.popper-field label{display:block; font-size:.8rem; font-weight:600; margin-bottom:5px; color:var(--pp-text)}
.popper-field input[type=text],
.popper-field input[type=email],
.popper-field input[type=tel],
.popper-field textarea,
.popper-field select{
    width:100%; box-sizing:border-box;
    padding:11px 13px; font-size:.92rem; font-family:inherit;
    color:var(--pp-text); background:color-mix(in srgb, var(--pp-text) 4%, var(--pp-bg));
    border:1px solid color-mix(in srgb, var(--pp-text) 18%, transparent);
    border-radius:9px; transition:border-color .2s, box-shadow .2s;
}
.popper-field input:focus,
.popper-field textarea:focus,
.popper-field select:focus{
    outline:none; border-color:var(--pp-accent);
    box-shadow:0 0 0 3px color-mix(in srgb, var(--pp-accent) 22%, transparent);
}
.popper-field.has-error input,
.popper-field.has-error select,
.popper-field.has-error textarea{border-color:#ef4444}
.popper-error{display:block; margin-top:4px; font-size:.74rem; color:#ef4444}
.popper-check{display:flex; align-items:flex-start; gap:8px; font-size:.82rem; font-weight:500; color:var(--pp-muted)}
.popper-check input{margin-top:2px; accent-color:var(--pp-accent)}

/* ── Botones ── */
.popper-actions{display:flex; flex-direction:column; gap:9px}
.popper-btn{
    display:block; width:100%; box-sizing:border-box;
    padding:13px 20px; border:none; border-radius:10px;
    font-size:.95rem; font-weight:700; font-family:inherit; cursor:pointer;
    transition:transform .15s, box-shadow .2s, opacity .2s;
}
.popper-btn-primary{
    background:var(--pp-accent); color:var(--pp-accent-text);
    box-shadow:0 10px 24px -10px color-mix(in srgb, var(--pp-accent) 80%, transparent);
}
.popper-btn-primary:hover{transform:translateY(-2px)}
.popper-btn-primary:disabled{opacity:.6; cursor:wait; transform:none}
.popper-btn-ghost{
    margin-top:6px; background:transparent; color:var(--pp-muted);
    font-size:.83rem; font-weight:600; padding:8px;
}
.popper-btn-ghost:hover{color:var(--pp-text)}
.popper-btn:focus-visible{outline:2px solid var(--pp-accent); outline-offset:3px}
.popper-form .popper-btn{margin-top:6px}

/* ── Mensajes ── */
.popper-msg{margin-top:10px; font-size:.82rem; min-height:1em}
.popper-msg.is-error{color:#ef4444}
.popper-msg.is-ok{color:#10b981}

/* ── Éxito ── */
.popper-success{text-align:center; padding:12px 0}
.popper-success-ico{
    width:56px; height:56px; margin:0 auto 16px;
    display:flex; align-items:center; justify-content:center;
    border-radius:50%; font-size:1.7rem; font-weight:800;
    background:color-mix(in srgb, var(--pp-accent) 15%, transparent); color:var(--pp-accent);
}

/* ═══ Formatos ═══ */

/* Pantalla completa */
.popper-fullscreen .popper-box{
    width:100vw; max-width:none; height:100vh; max-height:none;
    border-radius:0; align-items:center; justify-content:center;
}
.popper-fullscreen .popper-body{max-width:640px; text-align:center; padding:40px}
.popper-fullscreen .popper-title{font-size:2.1rem}

/* Barra */
.popper-bar{align-items:flex-start; pointer-events:none}
.popper-bar.pos-bottom{align-items:flex-end}
.popper-bar .popper-box{
    pointer-events:auto;
    width:100%; max-width:none; border-radius:0;
    max-height:none; box-shadow:0 6px 24px -12px rgba(0,0,0,.4);
}
.popper-bar .popper-body{
    display:flex; align-items:center; justify-content:center; gap:20px; flex-wrap:wrap;
    padding:13px 54px 13px 20px;
}
.popper-bar .popper-title{font-size:.98rem; margin:0; font-weight:700}
.popper-bar .popper-eyebrow,
.popper-bar .popper-subtitle{margin:0}
.popper-bar .popper-actions{flex-direction:row; width:auto; gap:8px}
.popper-bar .popper-btn{width:auto; padding:9px 20px; font-size:.85rem; white-space:nowrap}
.popper-bar .popper-close{top:50%; right:10px; transform:translateY(-50%)}
.popper-bar .popper-close:hover{transform:translateY(-50%) rotate(90deg)}

/* Slide-in */
.popper-slidein{pointer-events:none; padding:20px}
.popper-slidein .popper-box{pointer-events:auto; max-height:calc(100vh - 40px)}
.popper-slidein.pos-bottom-right{align-items:flex-end; justify-content:flex-end}
.popper-slidein.pos-bottom-left{align-items:flex-end; justify-content:flex-start}
.popper-slidein.pos-top-right{align-items:flex-start; justify-content:flex-end}
.popper-slidein.pos-top-left{align-items:flex-start; justify-content:flex-start}
.popper-slidein .popper-body{padding:24px 26px}
.popper-slidein .popper-title{font-size:1.15rem}

/* Inline (shortcode) */
.popper-root.is-inline{position:relative; inset:auto; display:block; opacity:1; visibility:visible}
.popper-root.is-inline .popper-overlay{display:none}
.popper-root.is-inline .popper-box{width:100%; max-height:none; transform:none; margin:0 auto}

/* Posición del lightbox */
.popper-lightbox.pos-top{align-items:flex-start; padding-top:60px}
.popper-lightbox.pos-bottom{align-items:flex-end; padding-bottom:40px}

/* ── Responsive ── */
@media (max-width:700px){
    .popper-box.has-image{flex-direction:column}
    .popper-box.has-image .popper-media{flex:0 0 150px; width:100%}
    .popper-body{padding:26px 22px 24px}
    .popper-title{font-size:1.3rem}
    .popper-fullscreen .popper-title{font-size:1.6rem}
    .popper-bar .popper-body{flex-direction:column; gap:10px; padding:14px 44px 14px 16px}
    .popper-slidein{padding:0}
    .popper-slidein .popper-box{width:100%; border-bottom-left-radius:0; border-bottom-right-radius:0}
    .popper-slidein{align-items:flex-end !important; justify-content:center !important}
}

@media (prefers-reduced-motion:reduce){
    .popper-root,.popper-root *{transition:none !important; animation:none !important}
    .popper-box{transform:none !important}
}

/* ── Solo imagen ──
   La pieza gráfica ocupa el popup entero y conserva su proporción natural:
   nada de recortes, que suelen mutilar el arte que manda el cliente. */
.popper-box.is-media-only{background:transparent}
.popper-box.is-media-only .popper-media{
    flex:1 1 auto; width:100%; min-height:0; background:transparent;
}
.popper-box.is-media-only .popper-media img{
    width:100%; height:auto; max-height:calc(100vh - 48px);
    object-fit:contain; display:block;
}
.popper-media-link{display:block; line-height:0}
.popper-media-link:focus-visible{outline:3px solid var(--pp-accent); outline-offset:3px}
.popper-box.is-media-only .popper-close{
    background:rgba(0,0,0,.45); color:#fff;
}
.popper-box.is-media-only .popper-close:hover{background:rgba(0,0,0,.7)}