/* 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 {
  /* Los chars se crean TODOS desde t=0 (solo se anima opacity), así que el
     layout ya está reservado y permitir wrap NO provoca reflow al tipear.
     `nowrap` causaba que frases largas del hero se desbordaran (bajo la imagen
     en desktop / fuera del viewport en móvil). normal = responsive. */
  white-space: normal;
}
.cx-tw-target__char {
  opacity: 0;
  /* inline (no inline-block): mantiene oportunidades de salto de línea en los
     espacios para que el texto haga wrap de forma natural. El reveal por opacity
     funciona igual en inline. SIN overflow-wrap: con los spans por-carácter,
     break-word rompía a mitad de palabra; los espacios reales ya son puntos de
     corte suficientes para wrap por palabra. */
  display: inline;
}
/* Cada palabra envuelta por el JS no se parte por dentro; el wrap ocurre solo
   en los espacios entre palabras (evita "reservas, r / euniones"). */
.cx-tw-target__word { white-space: nowrap; }
.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; }
}