/* Conexia — Typewriter effect
   Uso: <h1>... <span data-cx-tw="Texto a tipear">Texto a tipear</span> ...</h1>
   El JS sustituye el contenido y anima carácter a carácter con caret blinking. */

.cx-tw-target {
  /* Mientras se anima, queremos evitar que el text reflowee y mueva el resto */
  white-space: nowrap;
}
.cx-tw-target__char {
  opacity: 0;
  display: inline-block;
}
.cx-tw-target__char.is-in {
  opacity: 1;
}
.cx-tw-caret {
  display: inline-block;
  width: 0.06em;
  height: 0.95em;
  background: currentColor;
  vertical-align: text-bottom;
  margin-left: 2px;
  animation: cx-tw-blink 700ms steps(2) infinite;
  border-radius: 1px;
  opacity: 0.85;
}
.cx-tw-caret.is-fading {
  animation: cx-tw-fade 1.4s ease forwards;
}
@keyframes cx-tw-blink {
  50% { opacity: 0; }
}
@keyframes cx-tw-fade {
  0%   { opacity: 0.85; }
  60%  { opacity: 0.85; }
  100% { opacity: 0; }
}

/* Si el navegador reduce motion: revelar todo de golpe */
@media (prefers-reduced-motion: reduce) {
  .cx-tw-target__char { opacity: 1 !important; }
  .cx-tw-caret { display: none; }
}