:root {
  /* Colores claros y suaves */
  --azul-pastel-1: #e6f4f9;
  --azul-pastel-2: #d1ebf5;
  --azul-pastel-3: #b8e3f0;
  --agua-pastel-1: #d5f5f3;
  --agua-pastel-2: #b3ede9;
  --agua-pastel-3: #99e5df;
}

/* Gradiente diagonal suave - Azul claro */
.bg-gradient-light-01 {
  background: linear-gradient(135deg, 
    #e0f2fe 0%,
    #bae6fd 50%, 
    #7dd3fc 100%);
}

/* Gradiente vertical muy suave */
.bg-gradient-light-02 {
  background: linear-gradient(180deg,
    #f0f9ff 0%,
    #e0f2fe 50%,
    #bae6fd 100%);
}

/* Gradiente radial desde esquina superior */
.bg-gradient-light-03 {
  background:
    radial-gradient(circle at 20% 20%,
      rgba(125, 211, 252, 0.3) 0%,
      rgba(186, 230, 253, 0.2) 40%,
      rgba(240, 249, 255, 0) 70%),
    linear-gradient(135deg,
      #f0f9ff 0%,
      #e0f2fe 100%);
}

/* Gradiente con brillo sutil */
.bg-gradient-light-04 {
  background:
    radial-gradient(circle at 80% 20%,
      rgba(255, 255, 255, 0.8) 0%,
      rgba(255, 255, 255, 0) 50%),
    radial-gradient(circle at 20% 80%,
      rgba(125, 211, 252, 0.25) 0%,
      rgba(125, 211, 252, 0) 50%),
    linear-gradient(135deg,
      #e0f2fe 0%,
      #dbeafe 50%,
      #e0f2fe 100%);
  background-blend-mode: normal, normal, normal;
}

/* Gradiente agua clara */
.bg-gradient-light-05 {
  background: linear-gradient(135deg,
    #ecfeff 0%,
    #cffafe 40%,
    #a5f3fc 80%,
    #67e8f9 100%);
}

/* Gradiente con múltiples tonos claros */
.bg-gradient-light-06 {
  background:
    radial-gradient(circle at 70% 30%,
      rgba(186, 230, 253, 0.4) 0%,
      rgba(186, 230, 253, 0) 45%),
    radial-gradient(circle at 30% 70%,
      rgba(165, 243, 252, 0.35) 0%,
      rgba(165, 243, 252, 0) 45%),
    linear-gradient(160deg,
      #f0f9ff 0%,
      #e0f2fe 30%,
      #bae6fd 70%,
      #7dd3fc 100%);
}

/* Gradiente diagonal invertido suave */
.bg-gradient-light-07 {
  background: linear-gradient(225deg,
    #cffafe 0%,
    #e0f2fe 50%,
    #f0f9ff 100%);
}

/* Gradiente con efecto de vidrio esmerilado */
.bg-gradient-light-08 {
  background:
    radial-gradient(circle at 50% 0%,
      rgba(186, 230, 253, 0.5) 0%,
      rgba(240, 249, 255, 0.3) 50%,
      rgba(255, 255, 255, 0) 100%),
    linear-gradient(180deg,
      #f8fafc 0%,
      #f0f9ff 50%,
      #e0f2fe 100%);
}

/* Gradiente horizontal suave */
.bg-gradient-light-09 {
  background: linear-gradient(90deg,
    #f0f9ff 0%,
    #e0f2fe 33%,
    #cffafe 66%,
    #bae6fd 100%);
}

/* Gradiente con acento en el centro */
.bg-gradient-light-10 {
  background:
    radial-gradient(ellipse at 50% 50%,
      rgba(125, 211, 252, 0.3) 0%,
      rgba(186, 230, 253, 0.2) 30%,
      rgba(224, 242, 254, 0.1) 60%,
      rgba(240, 249, 255, 0) 100%),
    #f0f9ff;
}