.tecnofranja {
  width: 100%;
  height: var(--tf-h, 40px);
  background: linear-gradient(90deg, var(--tf-bg1, #1f2937), var(--tf-bg2, #4b5563));
  color: var(--tf-fg, #fff);
  font-size: 14px;
  line-height: 1.2;
  overflow: hidden;
}
.tecnofranja__inner {
  display: flex;
  align-items: center;
  gap: .6em;
  height: 100%;
  min-width: 0;
  padding: 0 16px 0 var(--tf-left, 20px);
  color: inherit;
  text-decoration: none;
  white-space: nowrap;
}
a.tecnofranja__inner:hover { color: inherit; text-decoration: none; }
a.tecnofranja__inner:hover .tf-text { text-decoration: underline; }
.tecnofranja--center .tecnofranja__inner { justify-content: center; padding-left: 16px; }

.tf-icon {
  display: inline-flex; align-items: center; justify-content: center; flex: 0 0 auto;
  width: 1.9em; height: 1.9em; border-radius: 50%;
  background: rgba(255, 255, 255, .16); font-size: .95em;
}
.tf-text { flex: 0 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.tf-before { flex-shrink: 0; }
.tf-num { font-weight: 700; font-variant-numeric: tabular-nums; }
.tf-done { font-weight: 600; }

.tf-cd { display: inline-flex; gap: .35em; flex: 0 0 auto; }
.tf-u {
  display: inline-flex; align-items: baseline; gap: 1px;
  padding: .15em .45em; border-radius: 6px;
  background: rgba(255, 255, 255, .16); font-variant-numeric: tabular-nums;
}
.tf-u b { font-weight: 700; }
.tf-u i { font-style: normal; font-size: .75em; opacity: .85; }

@media (max-width: 575px) {
  .tecnofranja { font-size: 12px; }
  .tecnofranja__inner { gap: .4em; padding-left: min(var(--tf-left, 20px), 16px); padding-right: 10px; }
  .tf-u { padding: .1em .3em; }
}
/* ---------- Rotación de varias franjas ---------- */
.tf-rot { display: grid; grid-template-columns: 100%; grid-template-rows: 100%; }
.tf-rot .tf-slide { grid-area: 1 / 1; opacity: 0; visibility: hidden; transition: opacity .45s ease, visibility .45s; }
.tf-rot .tf-slide.is-on { opacity: 1; visibility: visible; }

/* ---------- Animaciones de entrada (solo si el visitante no pidió reducir movimiento) ---------- */
@media (prefers-reduced-motion: no-preference) {
  .tf-icon { animation: tf-pulse 2.4s ease-in-out infinite; }

  .tf-a-fade { --tf-an: tf-fade; }
  .tf-a-left { --tf-an: tf-left; }
  .tf-a-up   { --tf-an: tf-up; }
  .tf-a-zoom { --tf-an: tf-zoom; }
  .tf-a-type { --tf-an: tf-fade; }

  .tf-a .tecnofranja__inner > * {
    animation: var(--tf-an) .65s cubic-bezier(.2, .8, .2, 1) both;
    animation-delay: calc(var(--tf-i, 0) * .14s);
  }
  .tf-a .tecnofranja__inner > :nth-child(2) { --tf-i: 1; }
  .tf-a .tecnofranja__inner > :nth-child(3) { --tf-i: 2; }
  .tf-a .tecnofranja__inner > :nth-child(4) { --tf-i: 3; }
  .tf-a .tecnofranja__inner > :nth-child(5) { --tf-i: 4; }

  /* el ícono entra y después sigue con su latido */
  .tf-a .tf-icon {
    animation: var(--tf-an) .65s cubic-bezier(.2, .8, .2, 1) both,
               tf-pulse 2.4s ease-in-out 1.4s infinite;
  }

  /* máquina de escribir: el texto se va revelando de izquierda a derecha */
  .tf-a-type .tf-text {
    animation: tf-type min(calc(var(--tf-ch, 20) * .045s), 2.4s) steps(var(--tf-ch, 20), end) both;
    animation-delay: calc(var(--tf-i, 0) * .14s + .2s);
  }

  /* en la rotación, la animación de entrada se repite cada vez que una franja pasa a verse */
  .tf-a.tf-rot .tf-slide:not(.is-on) * { animation: none !important; }

  /* espera a que la franja se vea en pantalla para arrancar (si el JS no carga, arranca igual) */
  .tf-a.tf-js:not(.tf-in) .tecnofranja__inner > *,
  .tf-a.tf-js:not(.tf-in) .tf-text { animation-play-state: paused; }
}

@keyframes tf-pulse { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.12); } }
@keyframes tf-fade  { from { opacity: 0; } to { opacity: 1; } }
@keyframes tf-left  { from { opacity: 0; transform: translateX(-26px); } to { opacity: 1; transform: none; } }
@keyframes tf-up    { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
@keyframes tf-zoom  { 0% { opacity: 0; transform: scale(.55); } 60% { opacity: 1; transform: scale(1.08); } 100% { opacity: 1; transform: scale(1); } }
@keyframes tf-type  { from { clip-path: inset(0 100% 0 0); } to { clip-path: inset(0 0 0 0); } }