.ipi-banner-wrapper{
  position:relative;
  margin:16px 0;
}
.ipi-close{
  position:absolute;
  top:4px;
  right:6px;
  border:none;
  background:rgba(0,0,0,.55);
  color:#fff;
  width:24px;
  height:24px;
  border-radius:50%;
  cursor:pointer;
  font-size:16px;
  line-height:1;
  z-index:2;
}
.ipi-close:hover{
  background:rgba(0,0,0,.8);
}

.ipi-banner{display:block;position:relative}
.ipi-banner--dual{
  display:flex;
  gap:4px; /* más pegadas, pequeña separación */
  justify-content:center;
  align-items:flex-start;
  flex-wrap:wrap;
}
.ipi-banner--dual .ipi-banner-item{
  flex:1 1 280px;
  max-width:50%;
}
@media (max-width:768px){
  .ipi-banner--dual .ipi-banner-item{
    max-width:100%;
  }
}

.ipi-overlay-text{
  position:absolute;
  left:50%;
  top:12px;
  transform:translateX(-50%);
  text-align:center;
  padding:6px 12px;
  border-radius:999px;
  color:#fff;
  max-width:90%;
}
.ipi-overlay-title{
  margin-bottom:2px;
}
.ipi-overlay-subtitle{
}

.ipi-banner-buttons{
  margin-top:8px;
  display:flex;
  gap:8px;
  flex-wrap:wrap;
  justify-content:flex-end;
}
.ipi-btn{
  padding:4px 10px;
  border-radius:999px;
  font-size:12px;
  text-decoration:none;
  display:inline-flex;
  align-items:center;
  justify-content:center;
}
.ipi-btn-help{
  background:#1565c0;
  color:#fff;
}
.ipi-btn-help:hover{
  background:#0d47a1;
  color:#fff;
}
.ipi-btn-panic{
  background:#f5f5f5;
  color:#333;
  border:1px solid #ccc;
}
.ipi-btn-panic:hover{
  background:#eeeeee;
  color:#111;
}

.ipi-fixed{position:fixed;left:0;right:0;z-index:9999;padding:8px 10px;display:flex;justify-content:center;pointer-events:none}
.ipi-fixed .ipi-banner-wrapper{pointer-events:auto}
.ipi-fixed-top{top:0}
.ipi-fixed-bottom{bottom:0}

.ipi-backdrop{
  position:fixed;
  inset:0;
  background:rgba(0,0,0,.4);
  z-index:9998;
}

/* Media base */
.ipi-banner .ipi-banner-media,
.ipi-fixed .ipi-banner .ipi-banner-media{
  max-width:100%;
  height:auto;
}
.ipi-video-wrap video{
  max-width:100%;
  height:auto;
  border-radius:inherit;
}


/* Badges por banner (modo doble) */
.ipi-banner--dual .ipi-banner-item{ position:relative; }
.ipi-badge{
  position:absolute;
  z-index:3;
  line-height:1.2;
  letter-spacing:.2px;
  user-select:none;
}
.ipi-badge--tl{ top:10px; left:10px; }
.ipi-badge--tr{ top:10px; right:10px; }
.ipi-badge--bl{ bottom:10px; left:10px; }
.ipi-badge--br{ bottom:10px; right:10px; }

.ipi-badge--tc{ top:10px; left:50%; transform:translateX(-50%); }
.ipi-badge--bc{ bottom:10px; left:50%; transform:translateX(-50%); }
.ipi-badge--mc{ top:50%; left:50%; transform:translate(-50%,-50%); }

.ipi-badge--ml{ top:50%; left:10px; transform:translateY(-50%); }
.ipi-badge--mr{ top:50%; right:10px; transform:translateY(-50%); }


/* Animaciones de badges */
@keyframes ipiBadgeFadeIn{
  from{ opacity:0; transform:translateY(-4px); }
  to{ opacity:1; transform:translateY(0); }
}
@keyframes ipiBadgeSlideIn{
  from{ opacity:0; transform:translateY(-10px); }
  to{ opacity:1; transform:translateY(0); }
}
.ipi-badge--anim-fade{ animation-name:ipiBadgeFadeIn; animation-timing-function:ease; animation-fill-mode:both; }
.ipi-badge--anim-slide{ animation-name:ipiBadgeSlideIn; animation-timing-function:ease; animation-fill-mode:both; }

.ipi-badge-icon{ margin-right:6px; display:inline-block; }
.ipi-badge-text{ display:inline-block; }