rf desafios+soluciones

css/styles.css

@@ -342,6 +342,9 @@ p, li, .lead-text, .text-body, .text-muted {
     color-mix(in srgb, var(--ide-accent) 10%, transparent) 100%
   );
 }
+.bg7 {
+  background: radial-gradient(circle at 50% 0%, var(--ide-accent-soft) 0%, transparent 60%), var(--bg-body);
+}
 .herobg-1{
     background-image: 
     linear-gradient(
@@ -1397,6 +1400,59 @@ p, li, .lead-text, .text-body, .text-muted {
   }
 }
 
+/* Colapso progresivo de los grids de 2, 3, 4 y 6 columnas */
+@media (max-width: 992px) {
+  .grid-3 {
+    grid-template-columns: repeat(2, 1fr);
+  }
+
+  .grid-4 {
+    grid-template-columns: repeat(2, 1fr);
+  }
+
+  .grid-6 {
+    grid-template-columns: repeat(3, 1fr);
+  }
+}
+
+@media (max-width: 640px) {
+  .grid-2,
+  .grid-3,
+  .grid-4 {
+    grid-template-columns: 1fr;
+  }
+
+  .grid-6 {
+    grid-template-columns: repeat(2, 1fr);
+  }
+}
+
+/* Layout reutilizable de 2 columnas (texto + media) */
+.split-2 {
+  display: grid;
+  grid-template-columns: 1fr 1fr;
+  gap: 4rem;
+  align-items: center;
+}
+
+.split-2__img {
+  width: 100%;
+  max-width: 500px;
+  margin-left: 5rem;
+}
+
+@media (max-width: 900px) {
+  .split-2 {
+    grid-template-columns: 1fr;
+    gap: 2rem;
+  }
+
+  .split-2__img {
+    margin-left: 0;
+    margin-inline: auto;
+  }
+}
+
 /* --- 8. Hero: La Doble Entrada (Home) --- */
 
 .hero-grid {
@@ -1406,6 +1462,13 @@ p, li, .lead-text, .text-body, .text-muted {
   align-items: center;
 }
 
+@media (max-width: 900px) {
+  .hero-grid {
+    grid-template-columns: 1fr;
+    gap: 2rem;
+  }
+}
+
 .hero-doble-entrada {
   display: grid;
   grid-template-columns: 1fr 1fr;