/* ===== Frame con SOLO el borde girando (interior fijo) ===== */
#th-home .th-card { --ring-width: 6px; --radius: 24px; --speed: 6s;
  position: relative; width: 100%; aspect-ratio: 4/3; border-radius: var(--radius);
}

/* Anillo multicolor: visible sólo el borde gracias a mask */
#th-home .th-ring {
  position: absolute; inset: 0; border-radius: inherit;
  background: conic-gradient(#00c2ff, #7cf6a6, #ffd166, #ff6b6b, #8b5cf6, #00c2ff);
  animation: th_spin var(--speed) linear infinite;
  /* mostramos sólo el borde */
  -webkit-mask:
    radial-gradient(closest-side, transparent calc(100% - var(--ring-width) - 1px), #000 calc(100% - var(--ring-width)));
          mask:
    radial-gradient(closest-side, transparent calc(100% - var(--ring-width) - 1px), #000 calc(100% - var(--ring-width)));
  filter: saturate(115%);
}

/* Hue “respira” suavemente (opcional) */
#th-home .th-ring { animation: th_spin var(--speed) linear infinite, th_hue calc(var(--speed)*3) linear infinite; }

/* Contenido interno: SIEMPRE fijo */
#th-home .th-inner {
  position: absolute; inset: var(--ring-width); border-radius: calc(var(--radius) - var(--ring-width));
  overflow: hidden; border: 1px solid rgba(255,255,255,.10);
  background:
    radial-gradient(900px 600px at 70% 30%, rgba(0,194,255,.10), transparent 60%),
    radial-gradient(700px 480px at 30% 70%, rgba(124,246,166,.10), transparent 60%),
    linear-gradient(160deg, #0f1a3e, #0b132b);
}

/* Sutilezas internas (no rotan) */
#th-home .th-sweep{
  position:absolute; inset:0; mix-blend-mode:screen;
  background:linear-gradient(120deg, transparent 35%, rgba(255,255,255,.06) 50%, transparent 65%);
  background-size:220% 100%; animation: th_sweep 12s linear infinite;
}
#th-home .th-dot{position:absolute;border-radius:50%; filter:blur(10px); opacity:.28}

/* Animaciones base */
@keyframes th_spin { to { transform: rotate(360deg); } }
@keyframes th_hue  { to { filter: hue-rotate(360deg); } }
@keyframes th_sweep{ 0%{background-position:-200% 0}100%{background-position:200% 0} }

/* Texto “el futuro” más pro (desplazamiento sutil + glow muy controlado) */
@keyframes th_gradShift { to { background-position: 200% 0; } }
#th-home .futuro{
  background: linear-gradient(90deg,#00C2FF,#47E3D6,#7CF6A6,#B2F08B,#7CF6A6,#47E3D6,#00C2FF);
  background-size: 200% 100%;
  -webkit-background-clip: text; background-clip: text; color: transparent;
  animation: th_gradShift 10s linear infinite;
  text-shadow: 0 0 0 transparent; /* sin glow exagerado */
}