Match countdown label width to section eyebrow

ai/tasks/done/TASK-244-match-countdown-label-width-to-section-eyebrow.md

@@ -0,0 +1,63 @@
+---
+id: TASK-244
+title: Match countdown label width to section eyebrow
+status: done
+type: frontend
+team: Frontend Senior
+supporting_teams:
+  - Experto en interfaz
+roadmap_item: foundation
+priority: low
+---
+
+# TASK-244 - Match countdown label width to section eyebrow
+
+## Goal
+
+Make the countdown label capsule keep the section eyebrow appearance without stretching to full width.
+
+## Context
+
+The countdown text already reused the same visual component as `SERVIDORES PUBLICOS`, but its wrapper was still stretching across the full width of the countdown container because the parent is a vertical flex layout.
+
+## Steps
+
+1. Reviewed the countdown wrapper and the section eyebrow pattern.
+2. Constrained the countdown label wrapper to its content width.
+3. Rechecked that the counter remains below the label and no duplicate title returns.
+
+## Files to Read First
+
+- `AGENTS.md`
+- `ai/architecture-index.md`
+- `ai/repo-context.md`
+- `frontend/index.html`
+- `frontend/assets/css/styles.css`
+
+## Expected Files to Modify
+
+- `frontend/assets/css/styles.css`
+
+## Constraints
+
+- No backend changes.
+- No asset or image changes.
+- No countdown logic changes.
+- No navigation changes.
+
+## Validation
+
+- Confirm the label no longer uses full-width layout.
+- Confirm it still uses the same section eyebrow pattern.
+- Confirm `Objetivo:` does not return.
+- Confirm the counter stays below the label.
+- Review `git diff --name-only`.
+
+## Outcome
+
+- The countdown label wrapper now uses left-aligned content width instead of stretching across the panel.
+- The visible capsule remains the same shared eyebrow component as the `SERVIDORES PUBLICOS` section.
+
+## Change Budget
+
+- One CSS-only adjustment plus task documentation.

frontend/assets/css/styles.css

@@ -633,18 +633,13 @@ h2 {
 }
 
 .release-countdown__copy {
+  align-self: flex-start;
   min-width: 0;
-  padding: 11px 16px;
-  border: 1px solid rgba(168, 199, 109, 0.3);
-  border-radius: 999px;
-  background: rgba(62, 88, 43, 0.62);
+  max-width: 100%;
 }
 
-.release-countdown__copy h3 {
-  margin: 0;
-  color: var(--text-main);
-  font-size: clamp(0.95rem, 1.45vw, 1.12rem);
-  line-height: 1.25;
+.release-countdown__copy .eyebrow--section {
+  margin-bottom: 0;
 }
 
 .release-countdown__units {