/* DB Insta Hotspot Carousel - Frontend */
.dbihc-carousel{
  --bg:#f6f7fb;
  --card:#ffffff;
  --stroke: rgba(20,20,30,.12);
  --text: rgba(15,15,18,.92);
  --muted: rgba(15,15,18,.62);
  --shadow: 0 14px 42px rgba(18, 20, 30, .10);
  --radius: 18px;

  --tip-bg: rgba(255,255,255,.95);
  --tip-border: rgba(20,20,30,.14);
  --tip-shadow: 0 18px 40px rgba(18, 20, 30, .18);

  --hotspot-ring: rgba(20,20,30,.50);
  --hotspot-dot: rgba(20,20,30,.92);
  --hotspot-glow: rgba(20,20,30,.10);

  width: 100%;
}

.dbihc-carousel.is-dark{
  --bg:#0b0b0c;
  --card:#121214;
  --stroke: rgba(255,255,255,.12);
  --text: rgba(255,255,255,.92);
  --muted: rgba(255,255,255,.65);
  --shadow: 0 14px 42px rgba(0,0,0,.30);

  --tip-bg: rgba(10,10,12,.88);
  --tip-border: rgba(255,255,255,.16);
  --tip-shadow: 0 18px 40px rgba(0,0,0,.35);

  --hotspot-ring: rgba(255,255,255,.75);
  --hotspot-dot: rgba(255,255,255,.92);
  --hotspot-glow: rgba(255,255,255,.10);
}

.dbihc-shell{
  position: relative;
  /*background: rgba(255,255,255,.60);
  border: 1px solid var(--stroke);
  border-radius: var(--radius);*/
  overflow: hidden;
  /*box-shadow: var(--shadow);*/
}
.dbihc-carousel.is-dark .dbihc-shell{ background: rgba(255,255,255,.02); }

.dbihc-viewport{ overflow:hidden; width:100%; touch-action: pan-y; }
.dbihc-track{ display:flex; will-change: transform; transition: transform .35s ease; }
.dbihc-slide{ flex: 0 0 auto; width: 100%; padding: 10px; }

.dbihc-card{
  position:relative;
  border-radius: calc(var(--radius) - 6px);
  overflow:hidden;
  background: var(--card);
  border: 1px solid rgba(20,20,30,.08);
  aspect-ratio: var(--dbihc-card-ar, 1/1);
  user-select:none;
}
.dbihc-carousel.is-dark .dbihc-card{ border-color: rgba(255,255,255,.08); }
.dbihc-card img{ width:100%; height:100%; object-fit: cover; display:block; transform: scale(1.001); }

/* Hotspot */
.dbihc-hotspot{
  position:absolute;

  /* ✅ robusto: si falta --sx/--sy, cae a --x/--y, y si faltan, cae a 0 */
  left: calc(var(--sx, var(--x, 0)) * 1%);
  top:  calc(var(--sy, var(--y, 0)) * 1%);

  transform: translate(-50%, -50%);
  width: 18px;
  height: 18px;
  border-radius: 999px;
  border: 1px solid #fff;
  background: rgba(255,255,255,.35);
  display:grid;
  place-items:center;
  cursor:pointer;
  padding:0;
  outline:none;
  -webkit-tap-highlight-color: transparent;
}
.dbihc-carousel.is-dark .dbihc-hotspot{ background: rgba(0,0,0,.25); }

.dbihc-hotspot::before{
  content:"";
  width: 7px; height: 7px;
  border-radius: 999px;
  background: #fff;
  box-shadow: 0 0 0 6px var(--hotspot-glow);
  animation: dbihcPulse 1.8s ease-in-out infinite;
}
@keyframes dbihcPulse{
  0%,100%{ box-shadow:0 0 0 6px var(--hotspot-glow); }
  50%{ box-shadow:0 0 0 10px rgba(20,20,30,.06); }
}

/* Tooltip */
.dbihc-tooltip{
  position:absolute;
  z-index: 10;
  display:none;
  opacity: 0;
  transform: translate3d(0,0,0) scale(.98);
  transition: opacity .12s ease, transform .12s ease;
  background: var(--tip-bg);
  border: 1px solid var(--tip-border);
  border-radius: 8px;
  padding: 8px 12px;
  white-space: nowrap;
  box-shadow: var(--tip-shadow);
  backdrop-filter: blur(10px);
  pointer-events: auto;
  color: var(--text);
}
.dbihc-tooltip.is-open{ display:block; opacity:1; transform: translate3d(0,0,0) scale(1); }
.dbihc-tooltip a{ color: var(--text); text-decoration:none; font-size: 12px; letter-spacing:.2px; }

.dbihc-tooltip::after{ content:""; position:absolute; width:0; height:0; border:8px solid transparent; }
.dbihc-tooltip[data-place="top"]::after{
  left: var(--arrow-x,50%); top:100%; transform: translateX(-50%);
  border-top-color: var(--tip-bg);
  filter: drop-shadow(0 2px 0 rgba(20,20,30,.10));
}
.dbihc-tooltip[data-place="bottom"]::after{
  left: var(--arrow-x,50%); bottom:100%; transform: translateX(-50%);
  border-bottom-color: var(--tip-bg);
  filter: drop-shadow(0 -2px 0 rgba(20,20,30,.10));
}
.dbihc-tooltip[data-place="left"]::after{
  top: var(--arrow-y,50%); left:100%; transform: translateY(-50%);
  border-left-color: var(--tip-bg);
  filter: drop-shadow(2px 0 0 rgba(20,20,30,.10));
}
.dbihc-tooltip[data-place="right"]::after{
  top: var(--arrow-y,50%); right:100%; transform: translateY(-50%);
  border-right-color: var(--tip-bg);
  filter: drop-shadow(-2px 0 0 rgba(20,20,30,.10));
}

/* Nav */
.dbihc-nav{
  position:absolute; top:50%; transform: translateY(-50%);
  width:40px; height:40px; border-radius:999px;
  border:1px solid rgba(20,20,30,.14);
  background: rgba(255,255,255,.75);
  color: var(--text);
  display:grid; place-items:center;
  cursor:pointer;
  backdrop-filter: blur(10px);
  box-shadow: 0 10px 25px rgba(18,20,30,.12);
  transition: opacity .2s ease, transform .2s ease;
  z-index:5;
}
.dbihc-carousel.is-dark .dbihc-nav{
  background: rgba(0,0,0,.25);
  border-color: rgba(255,255,255,.14);
  box-shadow: 0 10px 25px rgba(0,0,0,.25);
}
.dbihc-nav:hover{ transform: translateY(-50%) scale(1.03); }
.dbihc-nav:disabled{ opacity:.35; cursor:not-allowed; }
.dbihc-prev{ left:10px; } .dbihc-next{ right:10px; }
.dbihc-nav svg{ width:18px; height:18px; }

/* Dots */
.dbihc-dots{ display:flex; gap:6px; justify-content:center; padding: 10px 12px 14px; }
.dbihc-dot{ width:6px; height:6px; border-radius:999px; background: rgba(20,20,30,.20); transition: transform .2s ease, background .2s ease; }
.dbihc-carousel.is-dark .dbihc-dot{ background: rgba(255,255,255,.22); }
.dbihc-dot.active{ background: rgba(20,20,30,.55); transform: scale(1.25); }
.dbihc-carousel.is-dark .dbihc-dot.active{ background: rgba(255,255,255,.75); }

@media (max-width:520px){
  .dbihc-slide{ padding:8px; }
  .dbihc-nav{ width:38px; height:38px; }
}
/* Fallback visible (cuando JS no ha calculado widths aún, ej: Elementor editor) */
.dbihc-track { transform: translate3d(0,0,0); }
.dbihc-slide {
  box-sizing: border-box;
  width: calc(100% / var(--dbihc-perview, 1));
}
.dbihc-viewport { min-height: 220px; } /* evita colapso visual en editor */