:root {
    /* 1. Opción solicitada: Verde a Verde Claro */
    --gradient-green: linear-gradient(to right, #1b5e20, #81c784);
    
    /* 2. Opción alternativa: Azul Océano */
    --gradient-blue: linear-gradient(to right, #0d47a1, #64b5f6);
    
    /* 3. Opción alternativa: Puesta de Sol (Cálido) */
    --gradient-sunset: linear-gradient(to right, #b71c1c, #ffb74d);
    
    /* 4. Opción alternativa: Púrpura Eléctrico (Moderno) */
    --gradient-purple: linear-gradient(to right, #4a148c, #ba68c8);
     /* 1. Aurora Boreal (Tonos mágicos y tecnológicos) */
     --gradient-aurora: linear-gradient(to right, #0052d4, #4364f7, #6fb1fc);
    
    /* 2. Cítrico Energético (Muy vivo y veraniego) */
    --gradient-citrus: linear-gradient(to right, #f12711, #f5af19);
    
    /* 3. Cyberpunk / Neón (Moderno y nocturno) */
    --gradient-cyber: linear-gradient(to right, #f80759, #bc4e9c);
    
    /* 4. Mar Profundo (Elegante y relajante) */
    --gradient-ocean: linear-gradient(to right, #061161, #78ffd6);
    
    /* 5. Oro Rosado / Pastel Elegante (Suave y premium) */
    --gradient-rose: linear-gradient(to right, #e1eec3, #f05053);
    
    /* 6. Bosque Místico (Sofisticado y natural) */
    --gradient-forest: linear-gradient(to right, #11998e, #38ef7d);
    
    /* 7. Gris Espacial / Minimalista (Profesional y serio) */
    --gradient-tech: linear-gradient(to right, #232526, #414345);
    
    /* 8. Algodón de Azúcar (Pastel divertido) */
    --gradient-candy: linear-gradient(to right, #ff9a9e, #fecfef);

    /* Variable activa: Cambia esta variable para alternar el color del contenedor */
    --gradient-activo: var(--gradient-aurora);
}

.colab-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: .75rem;
}
@media (min-width: 600px) { .colab-grid { grid-template-columns: repeat(3, 1fr); } }

.colab-card {
  background: #fff;
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 1.2rem 1.1rem 1.1rem;
  border-top: 4px solid var(--clr-accent);
  display: flex;
  flex-direction: column;
  gap: .5rem;
  transition: transform var(--t), box-shadow var(--t);
}
.colab-card:hover {
  transform: translateY(-3px);
  box-shadow: var(--shadow-lg);
}
.colab-card--dark {
  background: var(--clr-dark);
  border-top-color: var(--clr-accent);
}
.colab-card--dark .colab-card__title { color: #fff; }
.colab-card--dark .colab-card__desc  { color: rgba(255,255,255,.5); }

.colab-card__icon {
  font-size: 1.75rem;
  line-height: 1;
}
.colab-card__title {
  font-family: var(--font-display);
  font-size: .95rem;
  font-weight: 800;
  font-style: italic;
  text-transform: uppercase;
  letter-spacing: .05em;
  color: var(--clr-dark);
  margin: 0;
}
.colab-card__desc {
  font-family: var(--font-body);
  font-size: .82rem;
  color: var(--clr-muted);
  line-height: 1.55;
  margin: 0;
  flex: 1;
}
.colab-card__btn {
  display: inline-block;
  font-family: var(--font-display);
  font-size: .75rem;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  background: var(--clr-accent);
  color: var(--clr-dark);
  border-radius: 6px;
  padding: .38rem .9rem;
  text-decoration: none;
  align-self: flex-start;
  margin-top: .25rem;
  transition: background var(--t), transform var(--t);
}
.colab-card__btn:hover {
  background: #d4a004;
  transform: translateY(-1px);
}
.colab-card__cta {
  font-family: var(--font-display);
  font-size: .78rem;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--clr-accent);
  margin-top: .25rem;
}
.caja-degradada {
    /* Aplicamos la variable activa */
    background: var(--gradient-purple); 
    
    /* Estilos de estructura y diseño */
    padding: 20px;
    border-radius: 12px;
    /*max-width: 500px;
    margin: 40px auto;*/
    color: #ffffff; 
    font-family: Arial, sans-serif;
    line-height: 1.6;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.15);
    transition: background 0.3s ease; /* Transición suave al cambiar de color */
}