/* ============================================================
   GLASSMORPHISM SYSTEM — Design Reyes
   Superficies translúcidas con blur profundo,
   bordes de luz blanca, sombras orgánicas mínimas.
   ============================================================ */

/* ── Override de variables de superficie ── */
:root {
  /* Superficies glass — muy translúcidas para que el fondo viva */
  --glass: rgba(255, 255, 255, 0.04);
  --glass-hover: rgba(255, 255, 255, 0.07);
  --glass-strong: rgba(255, 255, 255, 0.06);
  --glass-input: rgba(255, 255, 255, 0.03);

  /* Bordes de luz — blancos translúcidos, NO neón morado */
  --glass-border: rgba(255, 255, 255, 0.09);
  --glass-border-hover: rgba(255, 255, 255, 0.18);
  --glass-border-faint: rgba(255, 255, 255, 0.05);

  /* Sombra glass — sutil, da profundidad sin brutalidad */
  --glass-shadow: 0 4px 24px rgba(0, 0, 0, 0.08);
  --glass-shadow-hover: 0 8px 32px rgba(0, 0, 0, 0.12);

  /* Blur */
  --glass-blur: blur(24px);
  --glass-blur-sm: blur(16px);
  --glass-blur-lg: blur(32px);

  /* Easing */
  --glass-ease: cubic-bezier(0.4, 0, 0.2, 1);
  --glass-duration: 0.35s;
}

/* ── Clase utilitaria: Glass Card ── */
.glass-card {
  background: var(--glass);
  backdrop-filter: var(--glass-blur);
  -webkit-backdrop-filter: var(--glass-blur);
  border: 1px solid var(--glass-border);
  border-radius: 16px;
  transition:
    background var(--glass-duration) var(--glass-ease),
    border-color var(--glass-duration) var(--glass-ease);
}

.glass-card:hover {
  background: var(--glass-hover);
  border-color: var(--glass-border-hover);
}

/* ── Clase utilitaria: Glass Panel ── */
.glass-panel {
  background: var(--glass-strong);
  backdrop-filter: var(--glass-blur-lg);
  -webkit-backdrop-filter: var(--glass-blur-lg);
  border: 1px solid var(--glass-border);
  border-radius: 20px;
  transition:
    background var(--glass-duration) var(--glass-ease),
    border-color var(--glass-duration) var(--glass-ease);
}

.glass-panel:hover {
  border-color: var(--glass-border-hover);
}

/* ── Clase utilitaria: Glass Input ── */
.glass-input {
  background: var(--glass-input);
  backdrop-filter: var(--glass-blur-sm);
  -webkit-backdrop-filter: var(--glass-blur-sm);
  border: 1px solid var(--glass-border);
  border-radius: 12px;
  color: var(--text);
  outline: none;
  transition: border-color var(--glass-duration) var(--glass-ease);
}

.glass-input:focus {
  border-color: var(--glass-border-hover);
}

/* ── Clase utilitaria: Glass Pill ── */
.glass-pill {
  background: rgba(255, 255, 255, 0.05);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 1px solid var(--glass-border-faint);
  border-radius: 999px;
  transition:
    background 0.25s var(--glass-ease),
    border-color 0.25s var(--glass-ease);
}

.glass-pill:hover {
  background: rgba(255, 255, 255, 0.08);
  border-color: var(--glass-border);
}

/* ── Línea de reflejo superior en paneles ── */
.glass-shine::before {
  content: '';
  position: absolute;
  top: 0;
  left: 5%;
  right: 5%;
  height: 1px;
  background: linear-gradient(90deg,
      transparent,
      rgba(255, 255, 255, 0.12) 30%,
      rgba(255, 255, 255, 0.06) 70%,
      transparent);
  pointer-events: none;
  border-radius: inherit;
}

/* ── Animaciones de Iconos Lucide ── */
.lucide-icon {
  stroke-width: 1.5px;
  filter: drop-shadow(0 0 6px var(--accent-glow));
}

@keyframes floatIcon {
  0% {
    transform: translateY(0px);
  }

  50% {
    transform: translateY(-4px);
  }

  100% {
    transform: translateY(0px);
  }
}

@keyframes pulseIcon {
  0% {
    transform: scale(1);
    filter: drop-shadow(0 0 4px var(--accent-glow));
  }

  50% {
    transform: scale(1.1);
    filter: drop-shadow(0 0 10px rgba(180, 75, 240, 0.6));
  }

  100% {
    transform: scale(1);
    filter: drop-shadow(0 0 4px var(--accent-glow));
  }
}

.anim-float {
  animation: floatIcon 3s ease-in-out infinite;
}

.anim-float-delay {
  animation: floatIcon 3s ease-in-out infinite;
  animation-delay: 1.5s;
}

.anim-pulse {
  animation: pulseIcon 4s ease-in-out infinite;
}