:root {
  --prism-cyan: 0, 242, 255;
  --prism-purple: 112, 0, 255;
  --prism-pink: 255, 0, 122;
}

body {
  font-family: "Plus Jakarta Sans", sans-serif;
  background-color: #ffffff;
  color: #0f172a;
  overflow-x: hidden;
}

/* AURA PRISMATICA */
#prism-aura {
  position: fixed;
  top: 0;
  left: 0;
  width: 640px;
  height: 640px;
  background: radial-gradient(
    circle,
    rgba(var(--prism-cyan), 0.18) 0%,
    rgba(var(--prism-purple), 0.14) 28%,
    rgba(var(--prism-pink), 0.1) 52%,
    transparent 70%
  );
  transform: translate(-50%, -50%);
  pointer-events: none;
  z-index: 90;
  mix-blend-mode: multiply;
  filter: blur(50px);
  opacity: 0.95;
  will-change: transform;
}

@media (max-width: 768px) {
  #prism-aura {
    width: 360px;
    height: 360px;
    filter: blur(34px);
  }
}

#physics-hero {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 0;
}

.hero-overlay {
  pointer-events: none;
}

.hero-overlay > * {
  pointer-events: auto;
}

.reveal {
  opacity: 1;
  transform: none;
  filter: none;
}

.reveal-left {
  opacity: 1;
  transform: none;
}

.reveal-right {
  opacity: 1;
  transform: none;
}

/* HUB & ORBIT */
.orbit-ring {
  position: absolute;
  border: 1px dashed #e2e8f0;
  border-radius: 50%;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

.orbit-item {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background: white;
  border: 1px solid #f1f5f9;
  box-shadow: 0 10px 20px rgba(0, 0, 0, 0.03);
  z-index: 10;
}

/* BENTO GRID RESPONSIVE */
.bento-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.5rem;
}

@media (min-width: 768px) {
  .bento-grid {
    grid-template-columns: repeat(4, 1fr);
    grid-auto-rows: minmax(180px, auto);
  }
}

.bento-card {
  background: #fff;
  border: 1px solid #f1f5f9;
  border-radius: 2rem;
  padding: 2rem;
  transition: all 0.5s cubic-bezier(0.16, 1, 0.3, 1);
  position: relative;
  overflow: hidden;
}

@media (min-width: 768px) {
  .bento-card {
    padding: 2.5rem;
    border-radius: 2.5rem;
  }
}

.bento-card:hover {
  border-color: #e2e8f0;
  transform: translateY(-8px);
  box-shadow: 0 30px 60px -15px rgba(0, 0, 0, 0.05);
}

/* DEGRADADOS Y TEXTOS */
.footer-mega-text {
  font-size: 14vw;
  font-weight: 900;
  color: #000;
  line-height: 0.8;
  letter-spacing: -0.06em;
}

.text-gradient-prism {
  background: linear-gradient(90deg, #00f2ff, #7000ff, #ff007a);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

.text-gradient-caos {
  background: linear-gradient(135deg, #ff007a, #7000ff);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

.cursor {
  display: inline-block;
  width: 2px;
  background-color: #7000ff;
  margin-left: 2px;
  animation: blink 0.7s infinite;
}

@keyframes blink {
  50% {
    opacity: 0;
  }
}

/* Tailwind v2 compatibility additions for v3-style classes used in template */
.scroll-smooth {
  scroll-behavior: smooth;
}

.backdrop-blur-md {
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
}

.z-\[100\] {
  z-index: 100;
}

.text-\[10px\] {
  font-size: 10px;
}

.text-\[9px\] {
  font-size: 9px;
}

.tracking-\[0\.2em\] {
  letter-spacing: 0.2em;
}

.tracking-\[0\.3em\] {
  letter-spacing: 0.3em;
}

.leading-\[0\.85\] {
  line-height: 0.85;
}

.blur-\[60px\] {
  filter: blur(60px);
}

.rounded-\[100\%\] {
  border-radius: 100%;
}

.rounded-\[2rem\] {
  border-radius: 2rem;
}

.shadow-\[0_25px_60px_rgba\(0\,0\,0\,0\.1\)\] {
  box-shadow: 0 25px 60px rgba(0, 0, 0, 0.1);
}

.h-\[400px\] {
  height: 400px;
}

.h-\[240px\] {
  height: 240px;
}

.h-\[300px\] {
  height: 300px;
}

.h-\[380px\] {
  height: 380px;
}

.w-\[240px\] {
  width: 240px;
}

.w-\[300px\] {
  width: 300px;
}

.w-\[380px\] {
  width: 380px;
}

.bg-slate-50 {
  background-color: #f8fafc;
}

.bg-slate-100 {
  background-color: #f1f5f9;
}

.bg-slate-200 {
  background-color: #e2e8f0;
}

.bg-slate-200\/40 {
  background-color: rgba(226, 232, 240, 0.4);
}

.bg-slate-900 {
  background-color: #0f172a;
}

.text-slate-300 {
  color: #cbd5e1;
}

.text-slate-400 {
  color: #94a3b8;
}

.text-slate-500 {
  color: #64748b;
}

.text-slate-700 {
  color: #334155;
}

.text-slate-900 {
  color: #0f172a;
}

.border-slate-50 {
  border-color: #f8fafc;
}

.border-slate-100 {
  border-color: #f1f5f9;
}

.border-slate-200 {
  border-color: #e2e8f0;
}

.hover\:bg-slate-800:hover {
  background-color: #1e293b;
}

@media (min-width: 768px) {
  .md\:text-\[10px\] {
    font-size: 10px;
  }

  .md\:rounded-\[4rem\] {
    border-radius: 4rem;
  }

  .md\:h-\[100px\] {
    height: 100px;
  }

  .md\:h-\[320px\] {
    height: 320px;
  }

  .md\:h-\[520px\] {
    height: 520px;
  }

  .md\:h-\[600px\] {
    height: 600px;
  }

  .md\:w-\[320px\] {
    width: 320px;
  }

  .md\:w-\[400px\] {
    width: 400px;
  }

  .md\:w-\[520px\] {
    width: 520px;
  }
}