/* Gradientes CSS - Generado automáticamente Phase 1.b */
/* Uso: bg-gradient-mobile-1, bg-gradient-desktop-1, etc. */

/* === MOBILE GRADIENTS === */
.bg-gradient-mobile-1 {
  background: linear-gradient(135deg, #FF6B9D 0%, #4ECDC4 100%);
  background-image: url('/gradients/grad1-mobile.svg');
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

.bg-gradient-mobile-2 {
  background: linear-gradient(45deg, #A8E6CF 0%, #FFB6C1 100%);
  background-image: url('/gradients/grad2-mobile.svg');
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

.bg-gradient-mobile-3 {
  background: linear-gradient(90deg, #FFE5B4 0%, #FFCCCB 100%);
  background-image: url('/gradients/grad3-mobile.svg');
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

/* === DESKTOP GRADIENTS === */
.bg-gradient-desktop-1 {
  background: linear-gradient(135deg, #FF6B9D 0%, #4ECDC4 50%, #A8E6CF 100%);
  background-image: url('/gradients/grad1-desktop.svg');
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  /* Parallax-ready */
  background-attachment: fixed;
}

.bg-gradient-desktop-2 {
  background: linear-gradient(45deg, #A8E6CF 0%, #FFB6C1 50%, #E6E6FA 100%);
  background-image: url('/gradients/grad2-desktop.svg');
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  background-attachment: fixed;
}

.bg-gradient-desktop-3 {
  background: linear-gradient(90deg, #FFE5B4 0%, #FFCCCB 50%, #F0E68C 100%);
  background-image: url('/gradients/grad3-desktop.svg');
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  background-attachment: fixed;
}

/* === RESPONSIVE HELPERS === */
@media (max-width: 768px) {
  .bg-gradient-responsive-1 { @apply bg-gradient-mobile-1; }
  .bg-gradient-responsive-2 { @apply bg-gradient-mobile-2; }
  .bg-gradient-responsive-3 { @apply bg-gradient-mobile-3; }
}

@media (min-width: 769px) {
  .bg-gradient-responsive-1 { @apply bg-gradient-desktop-1; }
  .bg-gradient-responsive-2 { @apply bg-gradient-desktop-2; }
  .bg-gradient-responsive-3 { @apply bg-gradient-desktop-3; }
}