/* ===================================================================
   KUBO · Sitio 2026 — estilos base + animaciones + utilidades de hover
   Identidad: paleta Joya · Familjen Grotesk / Hanken Grotesk / Space Mono
   =================================================================== */

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  background: #f2efe8;
  color: #1a191e;
  font-family: 'Hanken Grotesk', system-ui, sans-serif;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
::selection { background: #10b981; color: #03130d; }
button { font-family: inherit; }
input { font-family: inherit; }

/* ---------- animaciones ---------- */
@keyframes auraFloat { 0%,100% { transform: translate(0,0) scale(1); } 50% { transform: translate(2%, -2%) scale(1.06); } }
@keyframes orbit { to { transform: rotate(360deg); } }
@keyframes orbitRev { to { transform: rotate(-360deg); } }
@keyframes bob { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-7px); } }
@keyframes popIn { from { opacity: 0; transform: translateY(16px) scale(0.97); } to { opacity: 1; transform: none; } }
@keyframes riseIn { from { opacity: 0; transform: translateY(22px); } to { opacity: 1; transform: none; } }
@keyframes floodIn { from { transform: scale(0); opacity: 0.9; } 60% { opacity: 0.85; } to { transform: scale(26); opacity: 0; } }
@keyframes rectIn { from { opacity: 0; transform: scale(0.1); } to { opacity: 1; transform: scale(1); } }
@keyframes corePulse { 0%,100% { transform: scale(1); opacity: 0.5; } 50% { transform: scale(1.18); opacity: 0.9; } }
@keyframes ringSpin { to { transform: rotate(360deg); } }
@keyframes hueShift { 0%,100% { filter: hue-rotate(0deg); } 50% { filter: hue-rotate(8deg); } }
@keyframes dashFlow { to { stroke-dashoffset: -200; } }
@keyframes streamX { to { background-position: 16px 0; } }
@keyframes streamXrev { to { background-position: -16px 0; } }
@keyframes drift { 0%,100% { transform: translateY(0) rotate(0deg); } 50% { transform: translateY(-20px) rotate(4deg); } }
@keyframes drift2 { 0%,100% { transform: translateY(0) rotate(0deg); } 50% { transform: translateY(16px) rotate(-5deg); } }

/* ---------- utilidades de hover (color dinámico vía variables CSS) ---------- */
.j-t   { transition: transform 0.18s ease, border-color 0.18s ease, background 0.18s ease, color 0.18s ease; }
.j-lift:hover    { transform: translateY(-3px); }
.j-lift-sm:hover { transform: translateY(-2px); }
.j-bord:hover    { border-color: var(--hc) !important; }
.j-bg:hover      { background: var(--hbg) !important; }
.j-tx:hover      { color: var(--htx) !important; }

/* enlaces de texto subrayados (botones-link) */
.j-link { background: none; border: none; cursor: pointer; padding: 0; text-decoration: underline; }

/* inputs */
.j-input:focus { border-color: var(--hc, #b8b0a0) !important; }

/* ---------- accesibilidad: respeta reduce-motion ---------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
}

/* ---------- ajustes responsive finos ---------- */
@media (max-width: 560px) {
  .j-size-grid { gap: 8px !important; }
  .j-size-grid button { padding: 18px 8px !important; }
}

/* ---------- KuboConnect: flujo vertical en pantallas chicas ---------- */
@keyframes streamY { to { background-position: 0 16px; } }

@media (max-width: 860px) {
  .kc-flow { flex-direction: column !important; align-items: stretch !important; gap: 4px !important; }
  .kc-flow .kc-node { width: 100% !important; max-width: 360px; margin-left: auto !important; margin-right: auto !important; }
  .kc-conn { flex: none !important; width: auto !important; min-width: 0 !important; padding: 4px 0 !important; }
  .kc-line {
    width: 3px !important; height: 42px !important;
    background: repeating-linear-gradient(180deg, rgba(109,40,217,0.55) 0 8px, transparent 8px 16px) !important;
    background-size: 3px 16px !important;
    animation: streamY 0.55s linear infinite !important;
  }
  .kc-ar { display: inline-block; transform: rotate(90deg); }
}