/* ==========================================
   KINET OS - MASTER MOTION STYLES (ÁGIL Y RÁPIDO)
   ========================================== */

/* Fondo cibernético base */
.bg-cyber-pattern {
  background-color: #080A0C;
  background-image: radial-gradient(circle at 50% 0%, rgba(0, 255, 102, 0.15) 0%, transparent 60%);
}

/* Tarjetas con efecto Glassmorphism */
.glass-card {
  background: rgba(19, 23, 29, 0.75);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px); /* Soporte para Safari en móviles */
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 1.5rem; /* Asegura el redondeo exacto (equivalente a rounded-3xl) */
  overflow: hidden;      /* Evita que el contenido interior cuadrada rompa las esquinas en móvil */
  transition: transform 0.25s cubic-bezier(0.175, 0.885, 0.32, 1.275), 
              border-color 0.25s ease, 
              box-shadow 0.25s ease !important;
}

/* ==========================================
   ANIMACIONES RÁPIDAS (0.35s / 0.25s)
   ========================================== */

/* Rebote sutil y rápido tipo gota (0.35s) */
@keyframes liquidBounce {
  0% {
    opacity: 0;
    transform: scale(0.92) translateY(15px);
  }
  60% {
    opacity: 1;
    transform: scale(1.02) translateY(-3px);
  }
  100% {
    opacity: 1;
    transform: scale(1) translateY(0);
  }
}

.card-liquid-transition {
  animation: liquidBounce 0.35s cubic-bezier(0.175, 0.885, 0.32, 1.275) forwards;
  transform-origin: center;
}

/* Transición de salida de página rápida (0.25s) */
@keyframes pageExit {
  0% {
    opacity: 1;
    transform: scale(1);
  }
  100% {
    opacity: 0;
    transform: scale(0.96) translateY(-10px);
  }
}

.page-exit {
  animation: pageExit 0.25s cubic-bezier(0.4, 0, 0.2, 1) forwards;
}

/* ==========================================
   RESPONSIVIDAD MÓVIL (< 768px)
   ========================================== */
@media screen and (max-width: 768px) {
  body {
    align-items: flex-start !important;
    padding: 8px !important;
  }
  .main-box, 
  .relative.w-full.max-w-3xl, 
  .relative.w-full.max-w-4xl {
    width: 100% !important;
    max-width: 100% !important;
    border-radius: 20px !important;
    padding: 16px !important;
  }
}
/* Animación rápida para pasos internos dentro del mismo archivo HTML */
@keyframes stepEnter {
  0% {
    opacity: 0;
    transform: scale(0.96) translateY(12px);
  }
  70% {
    opacity: 1;
    transform: scale(1.01) translateY(-2px);
  }
  100% {
    opacity: 1;
    transform: scale(1) translateY(0);
  }
}

.step-liquid-enter {
  animation: stepEnter 0.25s cubic-bezier(0.175, 0.885, 0.32, 1.275) forwards;
}
html {
  scroll-behavior: smooth;
  scroll-padding-top: 100px; /* Esto evita que la barra superior tape los cuadros */
}