/* ===== VARIABLES ===== */
:root {
  --bg-deep:    #060d1f;
  --bg-mid:     #0d1b3e;
  --bg-card:    rgba(255,255,255,0.06);
  --star-color: #ffffff;
  --accent1:    #4fc3f7; /* cyan */
  --accent2:    #f48fb1; /* pink */
  --accent3:    #81c784; /* green */
  --accent4:    #ffb74d; /* orange */
  --accent5:    #ce93d8; /* purple */
  --text-main:  #e8f4ff;
  --text-muted: #90a4b7;
  --nav-h:      calc(100px + 5mm);
  --radius-lg:  20px;
  --radius-xl:  28px;
  --shadow-glow: 0 0 40px rgba(79,195,247,0.18);
  /* Glosario — globo de definición */
  --bubble-bg:     #f0f8ff;
  --bubble-border: #2979d4;
  --bubble-text:   #1a2a4a;
}

/* ===== RESET ===== */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
body {
  font-family: 'Nunito', sans-serif;
  background: var(--bg-deep) url('../assets/images/Fondo.png') center/cover no-repeat fixed;
  color: var(--text-main);
  overflow-x: hidden;
  min-height: 100vh;
}

/* ===== STAR CANVAS ===== */
#stars-canvas {
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
}

/* ===== DOVE PARTICLES ===== */
.dove {
  position: fixed;
  font-size: 1.4rem;
  opacity: 0;
  pointer-events: none;
  z-index: 1;
  animation: doveFloat linear infinite;
  filter: drop-shadow(0 0 6px rgba(255,255,255,0.5));
}
@keyframes doveFloat {
  0%   { transform: translateX(0) translateY(0) rotate(-10deg); opacity: 0; }
  10%  { opacity: 0.7; }
  50%  { transform: translateX(60px) translateY(-120px) rotate(10deg); }
  90%  { opacity: 0.4; }
  100% { transform: translateX(100px) translateY(-260px) rotate(-5deg); opacity: 0; }
}

@keyframes fadeUp {
  to { opacity: 1; transform: translateY(0); }
}
@keyframes pulse {
  0%   { transform: scale(1); opacity: .7; }
  100% { transform: scale(2.4); opacity: 0; }
}
@keyframes spin { to { transform: rotate(360deg); } }