.lmw-title-wrapper { width: 100%; }

.lmw-title {
    margin: 0;
}

/* ── Texto diferente no mobile ──
   Os dois textos sempre renderizam no HTML (o servidor não sabe a largura da tela) — o CSS só
   esconde um dos dois por media query, igual ao padrão já usado pra mobile-scroll/carrossel em
   outros widgets do plugin. */
.lmw-title__mobile-text { display: none; }

@media (max-width: 768px) {
    .lmw-title__desktop-text { display: none; }
    .lmw-title__mobile-text { display: inline; }
}

/* ── Animação de entrada ──
   Mesma técnica do Product Box/Depoimentos (opacity + transform, IntersectionObserver via JS
   adiciona .is-visible) — sem overflow-x/y no wrapper, então não corre o risco do BUG-014
   (scrollbar acidental durante a animação por causa de overflow-x sem overflow-y). */
.lmw-title[data-lmw-title-anim="1"] {
    opacity: 0;
    transition: opacity var(--lmw-title-anim-duration, 0.8s) cubic-bezier(0.16, 1, 0.3, 1) var(--lmw-title-anim-delay, 0s),
                transform var(--lmw-title-anim-duration, 0.8s) cubic-bezier(0.16, 1, 0.3, 1) var(--lmw-title-anim-delay, 0s);
}

.lmw-title--anim-fade-up { transform: translateY(24px); }
.lmw-title--anim-fade-down { transform: translateY(-24px); }
.lmw-title--anim-fade-left { transform: translateX(24px); }
.lmw-title--anim-fade-right { transform: translateX(-24px); }
.lmw-title--anim-zoom-in { transform: scale(0.85); }
.lmw-title--anim-zoom-out { transform: scale(1.15); }

.lmw-title.is-visible {
    opacity: 1;
    transform: translate(0, 0) scale(1);
}