Con la marca incorporada primera versión

app/globals.css

@@ -2,18 +2,27 @@
 
 /* ── Tokens ── */
 :root {
+  /* ── Marca RE ── */
+  --color-re-teal:           #43BBC8;
+  --color-re-dark:           #494F4F;
+  --color-re-orange:         #F8AD13;
+  --color-re-orange-intense: #EE761A;
+  --color-re-light:          #E7E6E5;
+  --color-re-white:          #FFFFFF;
+
+  /* ── Sistema (primario = teal RE) ── */
   --color-bg: #f9fafb;
   --color-surface: #ffffff;
   --color-text: #111827;
   --color-text-muted: #6b7280;
-  --color-primary: #1d4ed8;
-  --color-primary-hover: #1e40af;
-  --color-primary-light: #dbeafe;
-  --color-accent: #2563eb;
+  --color-primary: #43BBC8;
+  --color-primary-hover: #3DAAB6;
+  --color-primary-light: #e8f8fa;
+  --color-accent: #43BBC8;
   --color-error: #b91c1c;
   --color-error-bg: #fef2f2;
   --color-border: #d1d5db;
-  --color-border-focus: #2563eb;
+  --color-border-focus: #43BBC8;
   --color-sensitive: #fef3c7;
   --color-sensitive-border: #f59e0b;
   --radius: 8px;
@@ -494,6 +503,46 @@ body {
   .btn { width: 100%; }
 }
 
+/* ── Survey header (marca RE) ── */
+.survey-header-bar {
+  display: flex;
+  align-items: center;
+  gap: 14px;
+  padding: 16px 24px;
+  position: sticky;
+  top: 0;
+  z-index: 20;
+}
+.survey-header-logo { display: block; height: 48px; width: auto; flex-shrink: 0; }
+.survey-header-title {
+  color: var(--color-re-white);
+  font-weight: 700;
+  font-size: 1rem;
+  letter-spacing: 0.08em;
+  text-transform: uppercase;
+  line-height: 1.2;
+}
+
+/* ── Survey footer ── */
+.survey-footer-bar {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  padding: 12px 24px;
+  margin-top: 40px;
+}
+.survey-footer-group {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+}
+.survey-footer-label {
+  color: rgba(255,255,255,0.7);
+  font-size: 0.75rem;
+  white-space: nowrap;
+}
+.survey-footer-logo { height: 32px; width: auto; display: block; }
+
 /* ── Reduced motion ── */
 @media (prefers-reduced-motion: reduce) {
   *, *::before, *::after { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; }