rf-v4.10-ecosistema50%

css/styles.css

@@ -138,6 +138,7 @@
 
 html {
   scroll-behavior: smooth;
+  scroll-padding-top: 80px;
   font-size: 16px;
 }
 
@@ -191,7 +192,7 @@ button, input, select, textarea {
 h1 {
   font-family: 'Barlow Semi Condensed', sans-serif;
   font-weight: 700;
-  font-size: clamp(2.2rem, 5vw, 4.5rem);
+  font-size: clamp(2.1rem, 4.5vw, 4.2rem);
   line-height: 1.15;
   color: var(--text-main);
   letter-spacing: -0.02em;
@@ -229,6 +230,35 @@ p, li, .lead-text, .text-body, .text-muted {
 .bg-subtle-section{
   background-color: var(--bg-subtle);
 }
+/* 1. Gradiente corporativo profundo - Ideal para Hero sections, cabeceras o footers */
+.bgl1 {
+  background: linear-gradient(135deg, var(--ide-primary-dark) 0%, var(--ide-primary) 100%);
+  color: #ffffff;
+}
+
+/* 2. Resplandor central (Radial) - Excelente para destacar un producto, un mockup o una métrica central */
+.bgl2 {
+  background: radial-gradient(circle at 80% 50%, var(--bg-surface) 0%, var(--ide-primary-dark) 100%);
+  color: #ffffff;
+}
+
+/* 3. Transición de marca (Azul a Verde) - Perfecto para secciones divisorias o franjas de características */
+.bgl3 {
+  background: linear-gradient(135deg, var(--ide-primary) 0%, var(--ide-accent-dark) 100%);
+  color: #ffffff;
+}
+
+/* 4. Vibrante y fresco (Solo acentos) - Recomendado para "Call to Actions" (llamados a la acción) o tarjetas de precios */
+.bgl4 {
+  background: linear-gradient(135deg, var(--ide-accent) 0%, var(--ide-accent-ligth) 100%);
+  color: #ffffff; /* O un color oscuro dependiendo de la tipografía */
+}
+
+/* 5. Gradiente angular suave a 3 tonos - Un fondo moderno y dinámico para secciones de contenido extenso */
+.bgl5 {
+  background: linear-gradient(109.6deg, var(--ide-primary-dark) 11.2%, var(--ide-primary) 51.2%, var(--ide-primary-light) 98.6%);
+  color: #ffffff;
+}
 .lead-text {
   font-size: 1.15rem;
   color: var(--text-muted);