/* Título con Barras · Z Digital */
.zdbt {
  --zdbt-space: 10px;
  text-align: left;
}
.zdbt-title {
  margin: 0;
  padding: 0;
  color: #1b1f5e;
  font-weight: 800;
  font-size: 40px;
  line-height: 1.15;
  letter-spacing: -0.01em;
  overflow-wrap: break-word;
}
.zdbt-title a {
  color: inherit;
  text-decoration: none;
}
.zdbt-accent { color: #c8237f; }

.zdbt-bars {
  --zdbt-h: 6px;
  --zdbt-scale: 1;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  justify-content: left;
  line-height: 0;
}
.zdbt--below .zdbt-bars { margin-top: var(--zdbt-space); }
.zdbt--above .zdbt-bars { margin-bottom: var(--zdbt-space); }

.zdbt-bar {
  display: block;
  flex: 0 0 auto;
  width: calc(var(--zdbt-w, 42px) * var(--zdbt-scale, 1));
  max-width: 100%;
  height: var(--zdbt-h);
  border-radius: 10px;
  background: #c8237f;
  transform-origin: left center;
}
.zdbt-sub { margin: 14px 0 0; color: #4a4f6a; }

/* ---- Animations: hidden state only once the JS marked the widget ready,
        so the editor / no-JS always shows the bars. ---- */
.zdbt-ready.zdbt-anim .zdbt-bar {
  transition: transform .7s cubic-bezier(.22, 1, .36, 1), opacity .5s ease;
  transition-delay: calc(var(--zdbt-i, 0) * 120ms + 150ms);
}
.zdbt-ready.zdbt-anim-grow:not(.zdbt-in) .zdbt-bar { transform: scaleX(0); }
.zdbt-ready.zdbt-anim-center .zdbt-bar { transform-origin: center; }
.zdbt-ready.zdbt-anim-center:not(.zdbt-in) .zdbt-bar { transform: scaleX(0); }
.zdbt-ready.zdbt-anim-pop .zdbt-bar { transition-timing-function: cubic-bezier(.34, 1.56, .64, 1); }
.zdbt-ready.zdbt-anim-pop:not(.zdbt-in) .zdbt-bar { transform: scale(0); opacity: 0; }
.zdbt-ready.zdbt-anim-slide:not(.zdbt-in) .zdbt-bar { transform: translateX(-24px); opacity: 0; }

.zdbt-ready.zdbt-anim-title .zdbt-title {
  transition: transform .7s cubic-bezier(.22, 1, .36, 1), opacity .6s ease;
}
.zdbt-ready.zdbt-anim-title:not(.zdbt-in) .zdbt-title { transform: translateY(14px); opacity: 0; }

@media (max-width: 767px) {
  .zdbt-title { font-size: 30px; }
}
@media (prefers-reduced-motion: reduce) {
  .zdbt-ready.zdbt-anim .zdbt-bar,
  .zdbt-ready.zdbt-anim-title .zdbt-title { transition: none !important; transform: none !important; opacity: 1 !important; }
}