Refine active section highlight

frontend/src/styles.css

@@ -1793,7 +1793,18 @@ textarea {
     inset 0 0 0 1px #dfe9f3;
   animation: sectionIn 0.35s ease both;
   animation-delay: calc(var(--section-order, 1) * 25ms);
-  transition: border-color 0.18s ease, box-shadow 0.18s ease;
+  transition: border-color 0.18s ease, box-shadow 0.18s ease, filter 0.18s ease, opacity 0.18s ease, transform 0.18s ease;
+}
+
+.elaboracao-layout[data-current-section-step] .workflow-section {
+  opacity: 0.84;
+  filter: saturate(0.9) brightness(0.97);
+}
+
+.elaboracao-layout[data-current-section-step] .workflow-section:hover,
+.elaboracao-layout[data-current-section-step] .workflow-section:focus-within {
+  opacity: 0.94;
+  filter: saturate(0.96) brightness(0.99);
 }
 
 .elaboracao-layout[data-current-section-step="1"] .workflow-section[data-section-step="1"],
@@ -1815,10 +1826,15 @@ textarea {
 .elaboracao-layout[data-current-section-step="17"] .workflow-section[data-section-step="17"],
 .elaboracao-layout[data-current-section-step="18"] .workflow-section[data-section-step="18"],
 .elaboracao-layout[data-current-section-step="19"] .workflow-section[data-section-step="19"] {
-  border-color: #111820;
+  opacity: 1;
+  filter: none;
+  transform: translateY(-1px);
+  border-color: #d58a32;
   box-shadow:
-    0 8px 22px rgba(20, 28, 36, 0.1),
-    inset 0 0 0 1px #dfe9f3;
+    0 16px 34px rgba(155, 87, 13, 0.14),
+    0 3px 10px rgba(155, 87, 13, 0.08),
+    inset 0 3px 0 #d06f00,
+    inset 0 0 0 1px #f4d0a5;
 }
 
 .section-head {