html {
  font-family: "Inter", sans-serif;
  scroll-behavior: smooth;
  background-color: #0b0b0b;
}

body {
  overflow-x: clip;
}

h1, h2, h3, h4, h5, h6, 
.uk-h1, .uk-h2, .uk-h3, .uk-h4, .uk-h5, .uk-h6, 
.uk-heading-medium, .uk-card-title {
  font-family: "Playfair Display", serif;
}

.uk-section-secondary {
  background-color: #0b0b0b;
}

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

.custom-card {
  border-radius: 10px;
  border: 1px solid rgba(0,0,0,0.1);
  box-shadow: none;
}

.uk-section-secondary .custom-card {
  background: transparent;
  border: 1px solid rgba(255,255,255,0.1);
  color: white;
}

 


/* CONTENEDOR PRINCIPAL */
.glass-smoke {
  position: relative;
  
  overflow: hidden;
  isolation: isolate;
  -webkit-mask-image: -webkit-radial-gradient(white, black);

  /* glassmorphism */
  background: rgba(254, 254, 254, 0.05);
  backdrop-filter: blur(25px) saturate(140%);
  -webkit-backdrop-filter: blur(25px) saturate(140%);
}

.glass-smoke-nav {
  border-radius: 0 !important;
}
.smoke-layer {
  position: absolute;
  inset: -50%;
  filter: blur(60px);
  mix-blend-mode: screen;
  opacity: 0.8;
}

/* CAPA 1 */
.smoke-layer:nth-child(1) {
  background: 
    radial-gradient(circle at 30% 40%, #7b2ff7, transparent 40%),
    radial-gradient(circle at 70% 30%, #ff4ecd, transparent 40%),
    radial-gradient(circle at 50% 70%, #00cfff, transparent 40%);
  animation: smokeMove1 18s ease-in-out infinite alternate;
}

/* CAPA 2 */
.smoke-layer:nth-child(2) {
  background: 
    radial-gradient(circle at 60% 50%, #9d4edd, transparent 40%),
    radial-gradient(circle at 40% 60%, #ff6ec7, transparent 40%),
    radial-gradient(circle at 80% 70%, #3ad1ff, transparent 40%);
  animation: smokeMove2 25s ease-in-out infinite alternate-reverse;
  opacity: 0.6;
}

/* VARIANTE MANGO Y AZULES PARA MODAL */
.smoke-mango-blue .smoke-layer:nth-child(1) {
  background: 
    radial-gradient(circle at 30% 40%, #FFB142, transparent 50%), 
    radial-gradient(circle at 70% 30%, #ADD8E6, transparent 50%), 
    radial-gradient(circle at 50% 70%, #F0F8FF, transparent 50%); 
  animation: smokeMove1 15s ease-in-out infinite alternate;
}

.smoke-mango-blue .smoke-layer:nth-child(2) {
  background: 
    radial-gradient(circle at 60% 50%, #FFD700, transparent 45%),
    radial-gradient(circle at 40% 60%, #B2EBF2, transparent 45%),
    radial-gradient(circle at 80% 70%, #FFFFFF, transparent 45%);
  animation: smokeMove2 20s ease-in-out infinite alternate-reverse;
  opacity: 0.7;
}

/* ANIMACIONES MÁS ORGÁNICAS */
@keyframes smokeMove1 {
  0% { transform: translate(0%, 0%) scale(1) rotate(0deg); }
  50% { transform: translate(10%, -5%) scale(1.2) rotate(120deg); }
  100% { transform: translate(-10%, 10%) scale(1) rotate(240deg); }
}

@keyframes smokeMove2 {
  0% { transform: translate(5%, -5%) scale(1.1) rotate(0deg); }
  50% { transform: translate(-10%, 10%) scale(1.3) rotate(180deg); }
  100% { transform: translate(10%, -10%) scale(1.1) rotate(360deg); }
}