From 86e3876dfe6aceb5599e719973372ca9123cf90a Mon Sep 17 00:00:00 2001
From: FranGuh <pedicles62900@gmail.com>
Date: Sun, 14 Jun 2026 14:00:31 -0600
Subject: [PATCH 1/6] feat: per-page h1 architecture, /compare sitemap, .js
 util rename

- seo: add /compare route to sitemap.xml
- chore: rename convertToSpecs/matchLaptopClass .jsx -> .js (pure JS modules)
- a11y/seo: demote global brand h1 to a home link so each page owns a
  descriptive h1 (Landing hero, Compare, NotFound, quiz + results views);
  add .sr-only utility and section heading for Landing features
---
 public/sitemap.xml                                  |  5 +++++
 src/App.css                                         |  7 ++++++-
 src/App.jsx                                         |  6 ++++--
 src/components/Recommendation/Recommendation.jsx    |  3 +++
 src/index.css                                       | 13 +++++++++++++
 src/pages/Compare/Compare.css                       |  2 +-
 src/pages/Compare/Compare.jsx                       |  4 ++--
 src/pages/Landing/Landing.jsx                       |  7 ++++---
 src/pages/NotFound/NotFound.jsx                     |  2 +-
 src/utils/{convertToSpecs.jsx => convertToSpecs.js} |  0
 .../{matchLaptopClass.jsx => matchLaptopClass.js}   |  0
 11 files changed, 39 insertions(+), 10 deletions(-)
 rename src/utils/{convertToSpecs.jsx => convertToSpecs.js} (100%)
 rename src/utils/{matchLaptopClass.jsx => matchLaptopClass.js} (100%)

diff --git a/public/sitemap.xml b/public/sitemap.xml
index 51d2f37..5c86ef8 100644
--- a/public/sitemap.xml
+++ b/public/sitemap.xml
@@ -10,4 +10,9 @@
     <changefreq>monthly</changefreq>
     <priority>0.9</priority>
   </url>
+  <url>
+    <loc>https://computerselectorhelper.vercel.app/compare</loc>
+    <changefreq>monthly</changefreq>
+    <priority>0.9</priority>
+  </url>
 </urlset>
diff --git a/src/App.css b/src/App.css
index bce9645..d834ecf 100644
--- a/src/App.css
+++ b/src/App.css
@@ -48,10 +48,15 @@ body {
   width: 100%;
 }
 
-.AppHeader__brand h1 {
+.AppHeader__brand a.AppHeader__brandLink {
+  display: inline-block;
   margin: 0;
   font-size: clamp(1.8rem, 4vw, 2.5rem);
+  font-weight: 700;
+  line-height: 1.2;
   text-align: center;
+  color: var(--color-text);
+  text-decoration: none;
 }
 
 .AppNav {
diff --git a/src/App.jsx b/src/App.jsx
index 4a2dbd7..df33f1e 100644
--- a/src/App.jsx
+++ b/src/App.jsx
@@ -1,5 +1,5 @@
 import './App.css'
-import { BrowserRouter, NavLink } from 'react-router-dom'
+import { BrowserRouter, NavLink, Link } from 'react-router-dom'
 import { HelmetProvider } from 'react-helmet-async'
 import AppRoutes from './routes/AppRoutes'
 import { Analytics } from "@vercel/analytics/react"
@@ -11,7 +11,9 @@ function App() {
       <BrowserRouter>
         <header className="AppHeader">
           <div className="AppHeader__brand">
-            <h1>Computer Selector <span className='title__alter'>Helper</span></h1>
+            <Link to="/" className="AppHeader__brandLink" aria-label="Computer Selector Helper — Inicio">
+              Computer Selector <span className='title__alter'>Helper</span>
+            </Link>
           </div>
           <nav className="AppNav" aria-label="Navegación principal">
             <NavLink to="/" end className={({ isActive }) => isActive ? 'AppNav__link active' : 'AppNav__link'}>Inicio</NavLink>
diff --git a/src/components/Recommendation/Recommendation.jsx b/src/components/Recommendation/Recommendation.jsx
index c8a8ecc..1fafca7 100644
--- a/src/components/Recommendation/Recommendation.jsx
+++ b/src/components/Recommendation/Recommendation.jsx
@@ -178,6 +178,8 @@ function Recommendation() {
                     <meta property="og:description" content={`Te recomendamos: ${result.processor}, ${result.ram} RAM, ${result.gpu}.`} />
                 </Helmet>
 
+                <h1 className="sr-only">Tu recomendación de laptop</h1>
+
                 {/* FEATURE: banner shown when viewing a shared link */}
                 {isSharedView && (
                     <div className="SharedViewBanner" role="note">
@@ -460,6 +462,7 @@ function Recommendation() {
 
     return (
         <div className='Question'>
+                <h1 className="sr-only">Encontrá tu laptop ideal</h1>
                 <div className="QuizProgress">
                     <div className="QuizProgressBar" role="progressbar" aria-valuenow={step + 1} aria-valuemin={0} aria-valuemax={questions.length} aria-label={`Pregunta ${step + 1} de ${questions.length}`}>
                     <div className="QuizProgressFill" style={{ width: `${((step + 1) / questions.length) * 100}%` }} />
diff --git a/src/index.css b/src/index.css
index d0a5479..2806f1f 100644
--- a/src/index.css
+++ b/src/index.css
@@ -45,6 +45,19 @@
   box-sizing: border-box;
 }
 
+/* Accessibility: visually hidden but available to screen readers */
+.sr-only {
+  position: absolute;
+  width: 1px;
+  height: 1px;
+  padding: 0;
+  margin: -1px;
+  overflow: hidden;
+  clip: rect(0, 0, 0, 0);
+  white-space: nowrap;
+  border: 0;
+}
+
 body {
   margin: 0;
   font-family: var(--font-family);
diff --git a/src/pages/Compare/Compare.css b/src/pages/Compare/Compare.css
index 32ca1b1..825f910 100644
--- a/src/pages/Compare/Compare.css
+++ b/src/pages/Compare/Compare.css
@@ -43,7 +43,7 @@
   transform: translateX(-2px);
 }
 
-.CompareHeader h2 {
+.CompareHeader h1 {
   font-size: var(--font-size-2xl, 1.5rem);
   color: var(--color-text, #1e293b);
   margin: 0 0 var(--spacing-xs) 0;
diff --git a/src/pages/Compare/Compare.jsx b/src/pages/Compare/Compare.jsx
index 5479a85..6d66a66 100644
--- a/src/pages/Compare/Compare.jsx
+++ b/src/pages/Compare/Compare.jsx
@@ -170,7 +170,7 @@ function Compare() {
         <button className="CompareBackBtn" onClick={() => navigate(-1)} aria-label="Volver">
           <FaArrowLeft aria-hidden="true" /> <span className="CompareBackBtn__text">Volver</span>
         </button>
-        <h2>Comparar laptops</h2>
+        <h1>Comparar laptops</h1>
         <p className="CompareSubtitle">
           Seleccioná hasta {MAX_COMPARE} laptops para comparar sus especificaciones
         </p>
@@ -313,7 +313,7 @@ function Compare() {
       {/* Comparison table — only when 2+ selected */}
       {selectedModels.length >= 2 && (
         <div className="CompareTableSection" ref={tableRef}>
-          <h3>Comparación de especificaciones</h3>
+          <h2>Comparación de especificaciones</h2>
           <div className="CompareTableWrapper">
             <table className="CompareTable" aria-label="Tabla comparativa de laptops">
               <thead>
diff --git a/src/pages/Landing/Landing.jsx b/src/pages/Landing/Landing.jsx
index ef7bf45..8837fba 100644
--- a/src/pages/Landing/Landing.jsx
+++ b/src/pages/Landing/Landing.jsx
@@ -19,10 +19,10 @@ const Landing = () => {
         <section className="LandingHero">
           <div className="LandingHero__content">
             <div className="Badge">Asistente Inteligente</div>
-            <h2 className="LandingHero__title">
+            <h1 className="LandingHero__title">
               No compres por marca. <br />
               <span className="text-gradient">Elegí por rendimiento.</span>
-            </h2>
+            </h1>
             <p className="LandingHero__subtitle">
               Respondé unas preguntas simples y nuestro algoritmo te recomendará exactamente la laptop que necesitás. Sin tecnicismos ni gastar de más.
             </p>
@@ -46,7 +46,8 @@ const Landing = () => {
         </section>
 
         {/* Features Grid */}
-        <section className="LandingFeatures">
+        <section className="LandingFeatures" aria-labelledby="landing-features-title">
+          <h2 id="landing-features-title" className="sr-only">Por qué elegir Computer Selector Helper</h2>
           <div className="FeatureCard">
             <div className="FeatureCard__icon"><FaMicrochip /></div>
             <h3>Análisis Técnico</h3>
diff --git a/src/pages/NotFound/NotFound.jsx b/src/pages/NotFound/NotFound.jsx
index 407f068..e09af6d 100644
--- a/src/pages/NotFound/NotFound.jsx
+++ b/src/pages/NotFound/NotFound.jsx
@@ -14,7 +14,7 @@ const NotFound = () => {
       </Helmet>
       <div className="NotFound">
         <FaLaptop className="NotFound__icon" aria-hidden="true" />
-        <h2>404 — Página no encontrada</h2>
+        <h1>404 — Página no encontrada</h1>
         <p>El link que seguiste no existe o fue movido.</p>
         <button className="NotFound__btn" onClick={() => navigate('/')}>
           Volver al inicio
diff --git a/src/utils/convertToSpecs.jsx b/src/utils/convertToSpecs.js
similarity index 100%
rename from src/utils/convertToSpecs.jsx
rename to src/utils/convertToSpecs.js
diff --git a/src/utils/matchLaptopClass.jsx b/src/utils/matchLaptopClass.js
similarity index 100%
rename from src/utils/matchLaptopClass.jsx
rename to src/utils/matchLaptopClass.js

From 8046dc48817e67d8b1228e1081414a80a172021d Mon Sep 17 00:00:00 2001
From: FranGuh <pedicles62900@gmail.com>
Date: Sun, 14 Jun 2026 14:09:48 -0600
Subject: [PATCH 2/6] feat: premium budget bucket + technical-level result mode

- INF-02: add premium budget bucket (>$25k MXN); bound high to $12k-$25k
  and cap matching so premium models no longer leak into the high bucket;
  relaxed premium enforces an $18k floor
- INF-01: add technical-level quiz question; technical users get the
  rationale expanded and all warnings, non-technical users see only
  critical (warning-prefixed) warnings and a collapsed rationale
- tests: +11 (premium/high boundaries, relaxed floor, isTechnical flag,
  technical vs simple rendering); refactor Recommendation quiz-completion
  helper to be question-count agnostic
---
 src/__tests__/Recommendation.test.jsx         | 108 ++++++++----------
 src/__tests__/convertToSpecs.test.jsx         |  35 ++++++
 src/__tests__/matchLaptopClass.test.jsx       |  48 +++++++-
 .../Recommendation/Recommendation.jsx         |  13 ++-
 src/constants/questions.js                    |  13 ++-
 src/utils/convertToSpecs.js                   |   4 +-
 src/utils/matchLaptopClass.js                 |  12 +-
 7 files changed, 160 insertions(+), 73 deletions(-)

diff --git a/src/__tests__/Recommendation.test.jsx b/src/__tests__/Recommendation.test.jsx
index 6edee90..42b74f2 100644
--- a/src/__tests__/Recommendation.test.jsx
+++ b/src/__tests__/Recommendation.test.jsx
@@ -2,6 +2,7 @@ import { describe, it, expect, vi, beforeEach } from 'vitest'
 import { render, screen, fireEvent } from '@testing-library/react'
 import { MemoryRouter } from 'react-router-dom'
 import Recommendation from '../components/Recommendation/Recommendation'
+import questions from '../constants/questions'
 
 beforeEach(() => {
   localStorage.clear()
@@ -13,6 +14,25 @@ const renderWithRouter = () => render(
   </MemoryRouter>
 )
 
+// Walks the full quiz, picking the first option for every question.
+// For the technical-level question (INF-01) it picks "yes" or "no" on demand.
+const completeQuiz = ({ technical = true } = {}) => {
+  for (let i = 0; i < questions.length; i++) {
+    const q = questions[i]
+    const checkboxes = screen.queryAllByRole('checkbox')
+    const radios = screen.queryAllByRole('radio')
+    if (q.id === 'isTechnical') {
+      fireEvent.click(radios[technical ? 0 : 1])
+    } else if (checkboxes.length > 0) {
+      fireEvent.click(checkboxes[0])
+    } else if (radios.length > 0) {
+      fireEvent.click(radios[0])
+    }
+    const nextButton = screen.getByRole('button', { name: /siguiente|ver resultados/i })
+    fireEvent.click(nextButton)
+  }
+}
+
 vi.mock('../utils/convertToSpecs', () => ({
   default: vi.fn((answers) => ({
     processor: 'Intel i5 / Ryzen 5',
@@ -24,8 +44,9 @@ vi.mock('../utils/convertToSpecs', () => ({
     touchscreen: false,
     portability: 'Media o baja',
     battery: 'Media (4-7h)',
-    warnings: [],
+    warnings: ['⚠️ Advertencia crítica de prueba', 'Nota informativa de prueba'],
     rationale: ['Test rationale'],
+    flags: { isTechnical: answers.isTechnical === 'yes' },
     laptopClass: [
       {
         id: 'test-1',
@@ -92,18 +113,7 @@ describe('Recommendation — Quiz flow', () => {
 
   it('completes quiz and shows results', () => {
     renderWithRouter()
-    // Answer all questions with first option
-    for (let i = 0; i < 10; i++) {
-      const checkboxes = screen.queryAllByRole('checkbox')
-      const radios = screen.queryAllByRole('radio')
-      if (checkboxes.length > 0) {
-        fireEvent.click(checkboxes[0])
-      } else if (radios.length > 0) {
-        fireEvent.click(radios[0])
-      }
-      const nextButton = screen.getByRole('button', { name: /siguiente|ver resultados/i })
-      fireEvent.click(nextButton)
-    }
+    completeQuiz()
     // Should show results — component renders "Especificaciones Recomendadas" heading
     expect(screen.getByText(/especificaciones recomendadas/i)).toBeInTheDocument()
   })
@@ -112,37 +122,14 @@ describe('Recommendation — Quiz flow', () => {
 describe('Recommendation — Results page', () => {
   it('shows laptop cards after quiz completion', () => {
     renderWithRouter()
-    // Answer all questions
-    for (let i = 0; i < 10; i++) {
-      const checkboxes = screen.queryAllByRole('checkbox')
-      const radios = screen.queryAllByRole('radio')
-      if (checkboxes.length > 0) {
-        fireEvent.click(checkboxes[0])
-      } else if (radios.length > 0) {
-        fireEvent.click(radios[0])
-      }
-      const nextButton = screen.getByRole('button', { name: /siguiente|ver resultados/i })
-      fireEvent.click(nextButton)
-    }
-    // Should show laptop cards
+    completeQuiz()
     expect(screen.getByText('Test Laptop 1')).toBeInTheDocument()
     expect(screen.getByText('Test Laptop 2')).toBeInTheDocument()
   })
 
   it('shows spec cards on results page', () => {
     renderWithRouter()
-    // Answer all questions
-    for (let i = 0; i < 10; i++) {
-      const checkboxes = screen.queryAllByRole('checkbox')
-      const radios = screen.queryAllByRole('radio')
-      if (checkboxes.length > 0) {
-        fireEvent.click(checkboxes[0])
-      } else if (radios.length > 0) {
-        fireEvent.click(radios[0])
-      }
-      const nextButton = screen.getByRole('button', { name: /siguiente|ver resultados/i })
-      fireEvent.click(nextButton)
-    }
+    completeQuiz()
     expect(screen.getByText('Procesador')).toBeInTheDocument()
     expect(screen.getByText('RAM')).toBeInTheDocument()
     expect(screen.getByText('Almacenamiento')).toBeInTheDocument()
@@ -151,36 +138,13 @@ describe('Recommendation — Results page', () => {
 
   it('shows reset button on results page', () => {
     renderWithRouter()
-    // Answer all questions
-    for (let i = 0; i < 10; i++) {
-      const checkboxes = screen.queryAllByRole('checkbox')
-      const radios = screen.queryAllByRole('radio')
-      if (checkboxes.length > 0) {
-        fireEvent.click(checkboxes[0])
-      } else if (radios.length > 0) {
-        fireEvent.click(radios[0])
-      }
-      const nextButton = screen.getByRole('button', { name: /siguiente|ver resultados/i })
-      fireEvent.click(nextButton)
-    }
+    completeQuiz()
     expect(screen.getByRole('button', { name: /reiniciar/i })).toBeInTheDocument()
   })
 
   it('resets quiz when reset button is clicked', () => {
     renderWithRouter()
-    // Answer all questions
-    for (let i = 0; i < 10; i++) {
-      const checkboxes = screen.queryAllByRole('checkbox')
-      const radios = screen.queryAllByRole('radio')
-      if (checkboxes.length > 0) {
-        fireEvent.click(checkboxes[0])
-      } else if (radios.length > 0) {
-        fireEvent.click(radios[0])
-      }
-      const nextButton = screen.getByRole('button', { name: /siguiente|ver resultados/i })
-      fireEvent.click(nextButton)
-    }
-    // Click reset
+    completeQuiz()
     const resetButton = screen.getByRole('button', { name: /reiniciar/i })
     fireEvent.click(resetButton)
     // Should be back to first question
@@ -188,3 +152,21 @@ describe('Recommendation — Results page', () => {
     expect(screen.queryByText(/especificaciones recomendadas/i)).not.toBeInTheDocument()
   })
 })
+
+describe('Recommendation — Technical level (INF-01)', () => {
+  it('technical user sees the rationale expanded and all warnings', () => {
+    renderWithRouter()
+    completeQuiz({ technical: true })
+    expect(screen.getByText('Test rationale')).toBeInTheDocument()
+    expect(screen.getByText(/advertencia crítica de prueba/i)).toBeInTheDocument()
+    expect(screen.getByText(/nota informativa de prueba/i)).toBeInTheDocument()
+  })
+
+  it('non-technical user sees a collapsed rationale and only critical warnings', () => {
+    renderWithRouter()
+    completeQuiz({ technical: false })
+    expect(screen.queryByText('Test rationale')).not.toBeInTheDocument()
+    expect(screen.getByText(/advertencia crítica de prueba/i)).toBeInTheDocument()
+    expect(screen.queryByText(/nota informativa de prueba/i)).not.toBeInTheDocument()
+  })
+})
diff --git a/src/__tests__/convertToSpecs.test.jsx b/src/__tests__/convertToSpecs.test.jsx
index 796178f..e5bd3aa 100644
--- a/src/__tests__/convertToSpecs.test.jsx
+++ b/src/__tests__/convertToSpecs.test.jsx
@@ -343,3 +343,38 @@ describe('convertToSpecs — RAM comparison edge cases', () => {
     expect(specs.ram).toBe('12 GB')
   })
 })
+
+describe('convertToSpecs — Technical level (INF-01)', () => {
+  it('sets flags.isTechnical true for a technical user', () => {
+    const specs = convertToSpecs({ ...baseAnswers, isTechnical: 'yes' })
+    expect(specs.flags?.isTechnical).toBe(true)
+  })
+
+  it('sets flags.isTechnical false for a non-technical user', () => {
+    const specs = convertToSpecs({ ...baseAnswers, isTechnical: 'no' })
+    expect(specs.flags?.isTechnical).toBe(false)
+  })
+
+  it('defaults flags.isTechnical to false when the question is unanswered', () => {
+    const specs = convertToSpecs({ ...baseAnswers })
+    expect(specs.flags?.isTechnical).toBe(false)
+  })
+})
+
+describe('convertToSpecs — Premium budget (INF-02)', () => {
+  it('stores premium budget from answers', () => {
+    const specs = convertToSpecs({ ...baseAnswers, budget: 'premium' })
+    expect(specs.budget).toBe('premium')
+  })
+
+  it('does not warn about a low budget for premium + demanding use', () => {
+    const specs = convertToSpecs({
+      ...baseAnswers,
+      budget: 'premium',
+      mainUse: ['gaming', 'creating'],
+      gamesType: 'complex',
+    })
+    expect(specs.warnings.every(w => !w.toLowerCase().includes('presupuesto bajo'))).toBe(true)
+    expect(specs.warnings.every(w => !w.toLowerCase().includes('rtx requiere'))).toBe(true)
+  })
+})
diff --git a/src/__tests__/matchLaptopClass.test.jsx b/src/__tests__/matchLaptopClass.test.jsx
index 6545d58..a2f06eb 100644
--- a/src/__tests__/matchLaptopClass.test.jsx
+++ b/src/__tests__/matchLaptopClass.test.jsx
@@ -1,5 +1,7 @@
 import { describe, it, expect, test } from 'vitest'
-import matchLaptopClass from '../utils/matchLaptopClass'
+import matchLaptopClass, { matchLaptopClassRelaxed } from '../utils/matchLaptopClass'
+
+const priceOf = (model) => parseInt(model.price.replace(/[^\d]/g, ''), 10)
 
 const baseSpecs = {
   processor: 'Intel i5 / Ryzen 5',
@@ -292,3 +294,47 @@ describe('matchLaptopClass — Results are sorted by score', () => {
     }
   })
 })
+
+describe('matchLaptopClass — Premium budget bucket (INF-02)', () => {
+  // High-end specs so premium-priced models score into the top results
+  const demandingSpecs = {
+    ...baseSpecs,
+    processor: 'Intel i7 / Ryzen 7',
+    ram: '16 GB',
+    gpu: 'NVIDIA RTX 3050 o superior',
+  }
+
+  it('premium budget returns only models priced above $25,000', () => {
+    const results = matchLaptopClass({ ...baseSpecs, budget: 'premium' })
+    expect(results.length).toBeGreaterThan(0)
+    results.forEach(model => {
+      expect(priceOf(model)).toBeGreaterThan(25000)
+    })
+  })
+
+  it('premium budget surfaces high-end demanding models above $25,000', () => {
+    const results = matchLaptopClass({ ...demandingSpecs, budget: 'premium' })
+    expect(results.length).toBeGreaterThan(0)
+    results.forEach(model => {
+      expect(priceOf(model)).toBeGreaterThan(25000)
+    })
+  })
+
+  it('high budget now excludes premium models (caps around $25,000)', () => {
+    // Under the old unbounded "high" rule, premium-priced RTX models leaked in here.
+    const results = matchLaptopClass({ ...demandingSpecs, budget: 'high' })
+    expect(results.length).toBeGreaterThan(0)
+    results.forEach(model => {
+      expect(priceOf(model)).toBeLessThanOrEqual(26000)
+      expect(priceOf(model)).toBeGreaterThanOrEqual(13000)
+    })
+  })
+
+  it('relaxed premium matching enforces an $18,000 floor', () => {
+    const results = matchLaptopClassRelaxed({ ...baseSpecs, budget: 'premium' })
+    expect(results.length).toBeGreaterThan(0)
+    results.forEach(model => {
+      expect(priceOf(model)).toBeGreaterThanOrEqual(18000)
+    })
+  })
+})
diff --git a/src/components/Recommendation/Recommendation.jsx b/src/components/Recommendation/Recommendation.jsx
index 1fafca7..f7f2cde 100644
--- a/src/components/Recommendation/Recommendation.jsx
+++ b/src/components/Recommendation/Recommendation.jsx
@@ -64,6 +64,11 @@ function Recommendation() {
         if (result) window.scrollTo({ top: 0, behavior: 'smooth' })
     }, [result])
 
+    // INF-01: technical users get the rationale expanded by default
+    useEffect(() => {
+        if (result) setShowRationale(!!result.flags?.isTechnical)
+    }, [result])
+
     // FEATURE: read shared plan from ?plan= URL param on mount
     useEffect(() => {
         const params = new URLSearchParams(window.location.search)
@@ -169,6 +174,10 @@ function Recommendation() {
     if (result) {
         const shareUrl = `${window.location.origin}/quiz?plan=${encodeAnswers(answers)}`
         const waText = buildWhatsAppText(result, shareUrl)
+        // INF-01: non-technical users only see critical (⚠️) warnings
+        const visibleWarnings = result.flags?.isTechnical
+            ? result.warnings
+            : result.warnings.filter(w => w.includes('⚠️'))
         return (
             <div className="ResultContainer">
                 <Helmet>
@@ -294,14 +303,14 @@ function Recommendation() {
                 </div>
 
 
-                {result.warnings.length > 0 && (
+                {visibleWarnings.length > 0 && (
                     <>
                         <button onClick={() => setShowWarnings(!showWarnings)} className="ToggleSection" aria-expanded={showWarnings} aria-controls="warnings-panel">
                             {showWarnings ? '▲' : '▼'} Advertencias importantes
                         </button>
                         {showWarnings && (
                             <div id="warnings-panel" className="WarningGrid">
-                                {result.warnings.map((warning, index) => (
+                                {visibleWarnings.map((warning, index) => (
                                     <div key={index} className="WarningCard">
                                         <FaExclamationTriangle className="WarningIcon" />
                                         <p className="WarningText">{warning}</p>
diff --git a/src/constants/questions.js b/src/constants/questions.js
index 3d78993..91b46c2 100644
--- a/src/constants/questions.js
+++ b/src/constants/questions.js
@@ -18,6 +18,16 @@ const questions = [
       value: "full_use",
     },
   },
+  {
+    id: "isTechnical",
+    type: "radio",
+    question: "¿Qué tanto sabés de computadoras?",
+    info: "Define si te mostramos todos los detalles técnicos o una versión simple.",
+    options: [
+      { value: "yes", label: "Me manejo bien, mostrame todos los detalles" },
+      { value: "no", label: "Prefiero una recomendación simple y clara" },
+    ],
+  },
   {
     id: "system",
     type: "radio",
@@ -110,7 +120,8 @@ const questions = [
     options: [
       { value: "low", label: "Menos de $5,000 MXN" },
       { value: "medium", label: "Entre $5,000 y $12,000 MXN" },
-      { value: "high", label: "Más de $12,000 MXN" },
+      { value: "high", label: "Entre $12,000 y $25,000 MXN" },
+      { value: "premium", label: "Más de $25,000 MXN" },
     ],
   },
 ];
diff --git a/src/utils/convertToSpecs.js b/src/utils/convertToSpecs.js
index 8214259..2c00ffa 100644
--- a/src/utils/convertToSpecs.js
+++ b/src/utils/convertToSpecs.js
@@ -411,7 +411,9 @@ const convertToSpecs = (answers) => {
     prioritizePortability: answers.importance === 'portability',
     prioritizeSecurity: answers.importance === 'security',
     prioritizeGaming: answers.gamesType === 'complex' || uses.includes('gaming'),
-    prioritizeScreenQuality: answers.importance === 'screen'
+    prioritizeScreenQuality: answers.importance === 'screen',
+    // INF-01: display-only flag — controls technical vs simplified result view
+    isTechnical: answers.isTechnical === 'yes'
   }
 
 
diff --git a/src/utils/matchLaptopClass.js b/src/utils/matchLaptopClass.js
index 63c9939..d33872d 100644
--- a/src/utils/matchLaptopClass.js
+++ b/src/utils/matchLaptopClass.js
@@ -93,13 +93,14 @@ const matchLaptopClass = (specs) => {
       !modelSpecs.includes('i7') && !modelSpecs.includes('ryzen 7')
     ) return false
 
-    // DT-01: Budget thresholds include a small tolerance above the quiz labels.
-    // Quiz labels: low=<$5k, medium=$5k-$12k, high=>$12k.
-    // Matcher allows low up to $6k and medium up to $13k to capture edge pricing.
+    // DT-01 / INF-02: Budget thresholds include a small tolerance above the quiz labels.
+    // Quiz labels: low=<$5k, medium=$5k-$12k, high=$12k-$25k, premium=>$25k.
+    // Matcher allows ~$1k tolerance on each upper edge to capture edge pricing.
     const price = parsePrice(model.price)
     if (specs.budget === 'low' && price > 6000) return false
     if (specs.budget === 'medium' && price > 13000) return false
-    if (specs.budget === 'high' && price < 13000) return false
+    if (specs.budget === 'high' && (price < 13000 || price > 26000)) return false
+    if (specs.budget === 'premium' && price < 25000) return false
 
     return true
   })
@@ -162,7 +163,8 @@ export const matchLaptopClassRelaxed = (specs) => {
     const price = parsePrice(model.price)
     const budgetLimit = specs.budget === 'low' ? 7800 : specs.budget === 'medium' ? 16900 : Infinity
     if (specs.budget === 'high' && price < 10000) return false
-    if (specs.budget !== 'high' && price > budgetLimit) return false
+    if (specs.budget === 'premium' && price < 18000) return false
+    if (specs.budget !== 'high' && specs.budget !== 'premium' && price > budgetLimit) return false
     return true
   })
 

From a3a5312295b4e5f7835669c0e93037318fd54d6b Mon Sep 17 00:00:00 2001
From: FranGuh <pedicles62900@gmail.com>
Date: Sun, 14 Jun 2026 14:13:43 -0600
Subject: [PATCH 3/6] feat: recent-results history on Landing + compare
 deep-link hardening

- F-02: persist the last 3 completed quizzes to localStorage via a new
  historyStore util; Landing shows recent-result cards that reopen the
  recommendation through ?plan=, plus a clear button. History persists
  across resets and is only wiped via the explicit clear action.
- compare: cap the handleCompare deep-link at 3 model ids at the source
- tests: +13 (historyStore unit coverage, Landing history UI)
---
 src/__tests__/Landing.test.jsx                | 56 ++++++++++++
 src/__tests__/historyStore.test.js            | 79 ++++++++++++++++
 .../Recommendation/Recommendation.jsx         | 16 +++-
 src/pages/Landing/Landing.css                 | 90 +++++++++++++++++++
 src/pages/Landing/Landing.jsx                 | 59 +++++++++++-
 src/utils/historyStore.js                     | 59 ++++++++++++
 6 files changed, 354 insertions(+), 5 deletions(-)
 create mode 100644 src/__tests__/Landing.test.jsx
 create mode 100644 src/__tests__/historyStore.test.js
 create mode 100644 src/utils/historyStore.js

diff --git a/src/__tests__/Landing.test.jsx b/src/__tests__/Landing.test.jsx
new file mode 100644
index 0000000..5abf191
--- /dev/null
+++ b/src/__tests__/Landing.test.jsx
@@ -0,0 +1,56 @@
+import { describe, it, expect, beforeEach } from 'vitest'
+import { render, screen, fireEvent } from '@testing-library/react'
+import { MemoryRouter } from 'react-router-dom'
+import { HelmetProvider } from 'react-helmet-async'
+import Landing from '../pages/Landing/Landing'
+import { addEntry } from '../utils/historyStore'
+
+beforeEach(() => {
+  localStorage.clear()
+})
+
+const renderLanding = () => render(
+  <HelmetProvider>
+    <MemoryRouter>
+      <Landing />
+    </MemoryRouter>
+  </HelmetProvider>
+)
+
+describe('Landing — recent history (F-02)', () => {
+  it('does not render the history section when there is no history', () => {
+    renderLanding()
+    expect(screen.queryByText(/tus consultas recientes/i)).not.toBeInTheDocument()
+  })
+
+  it('renders history cards from localStorage', () => {
+    addEntry({
+      encodedAnswers: 'abc',
+      summary: { processor: 'Intel i7', ram: '16 GB', gpu: 'RTX 4050', budget: 'high' },
+    })
+    renderLanding()
+    expect(screen.getByText(/tus consultas recientes/i)).toBeInTheDocument()
+    expect(screen.getByText(/intel i7/i)).toBeInTheDocument()
+    expect(screen.getByText(/presupuesto/i)).toBeInTheDocument()
+  })
+
+  it('links each history card back to the quiz with its encoded plan', () => {
+    addEntry({
+      encodedAnswers: 'plan123',
+      summary: { processor: 'Intel i5', ram: '8 GB', gpu: 'Iris Xe', budget: 'low' },
+    })
+    renderLanding()
+    const link = screen.getByRole('link', { name: /intel i5/i })
+    expect(link).toHaveAttribute('href', '/quiz?plan=plan123')
+  })
+
+  it('clears history when the clear button is clicked', () => {
+    addEntry({
+      encodedAnswers: 'abc',
+      summary: { processor: 'Intel i7', ram: '16 GB', gpu: 'RTX 4050', budget: 'high' },
+    })
+    renderLanding()
+    fireEvent.click(screen.getByRole('button', { name: /limpiar/i }))
+    expect(screen.queryByText(/tus consultas recientes/i)).not.toBeInTheDocument()
+  })
+})
diff --git a/src/__tests__/historyStore.test.js b/src/__tests__/historyStore.test.js
new file mode 100644
index 0000000..e1dfc1e
--- /dev/null
+++ b/src/__tests__/historyStore.test.js
@@ -0,0 +1,79 @@
+import { describe, it, expect, beforeEach } from 'vitest'
+import { getHistory, addEntry, clearHistory } from '../utils/historyStore'
+
+beforeEach(() => {
+  localStorage.clear()
+})
+
+const sampleSummary = (overrides = {}) => ({
+  processor: 'Intel i5 / Ryzen 5',
+  ram: '12 GB',
+  gpu: 'Intel Iris Xe',
+  budget: 'medium',
+  ...overrides,
+})
+
+describe('historyStore', () => {
+  it('returns an empty array when there is no history', () => {
+    expect(getHistory()).toEqual([])
+  })
+
+  it('stores an entry with summary, encoded answers, id and timestamp', () => {
+    addEntry({ encodedAnswers: 'abc123', summary: sampleSummary() })
+    const history = getHistory()
+    expect(history).toHaveLength(1)
+    expect(history[0]).toMatchObject({
+      encodedAnswers: 'abc123',
+      summary: sampleSummary(),
+    })
+    expect(history[0].id).toBeTruthy()
+    expect(history[0].timestamp).toBeTruthy()
+  })
+
+  it('returns entries newest-first', () => {
+    addEntry({ encodedAnswers: 'one', summary: sampleSummary({ ram: '8 GB' }) })
+    addEntry({ encodedAnswers: 'two', summary: sampleSummary({ ram: '16 GB' }) })
+    const history = getHistory()
+    expect(history[0].encodedAnswers).toBe('two')
+    expect(history[1].encodedAnswers).toBe('one')
+  })
+
+  it('caps history at 3 entries, evicting the oldest', () => {
+    addEntry({ encodedAnswers: 'a', summary: sampleSummary() })
+    addEntry({ encodedAnswers: 'b', summary: sampleSummary() })
+    addEntry({ encodedAnswers: 'c', summary: sampleSummary() })
+    addEntry({ encodedAnswers: 'd', summary: sampleSummary() })
+    const history = getHistory()
+    expect(history).toHaveLength(3)
+    expect(history.map(e => e.encodedAnswers)).toEqual(['d', 'c', 'b'])
+  })
+
+  it('deduplicates entries with the same encoded answers', () => {
+    addEntry({ encodedAnswers: 'same', summary: sampleSummary({ ram: '8 GB' }) })
+    addEntry({ encodedAnswers: 'same', summary: sampleSummary({ ram: '16 GB' }) })
+    const history = getHistory()
+    expect(history).toHaveLength(1)
+    expect(history[0].summary.ram).toBe('16 GB')
+  })
+
+  it('is a no-op when no summary is provided', () => {
+    addEntry({ encodedAnswers: 'x' })
+    expect(getHistory()).toEqual([])
+  })
+
+  it('clears all history', () => {
+    addEntry({ encodedAnswers: 'a', summary: sampleSummary() })
+    clearHistory()
+    expect(getHistory()).toEqual([])
+  })
+
+  it('ignores malformed stored data', () => {
+    localStorage.setItem('csh_quiz_history', 'not-json')
+    expect(getHistory()).toEqual([])
+  })
+
+  it('filters out entries missing a summary', () => {
+    localStorage.setItem('csh_quiz_history', JSON.stringify([{ id: '1' }, { id: '2', summary: sampleSummary() }]))
+    expect(getHistory()).toHaveLength(1)
+  })
+})
diff --git a/src/components/Recommendation/Recommendation.jsx b/src/components/Recommendation/Recommendation.jsx
index f7f2cde..4bc3a74 100644
--- a/src/components/Recommendation/Recommendation.jsx
+++ b/src/components/Recommendation/Recommendation.jsx
@@ -4,6 +4,7 @@ import { useNavigate } from 'react-router-dom'
 import questions from '../../constants/questions'
 import convertToSpecs from '../../utils/convertToSpecs'
 import { encodeAnswers, decodeAnswers, buildWhatsAppText } from '../../utils/shareUtils'
+import { addEntry } from '../../utils/historyStore'
 import './Recommendation.css'
 import LaptopCard from '../LaptopCard/LaptopCard'
 
@@ -125,7 +126,18 @@ function Recommendation() {
         if (step < questions.length - 1) {
             setStep(prev => prev + 1)
         } else {
-            setResult(convertToSpecs(answers))
+            const specs = convertToSpecs(answers)
+            setResult(specs)
+            // F-02: persist this completed quiz to the Landing history
+            addEntry({
+                encodedAnswers: encodeAnswers(answers),
+                summary: {
+                    processor: specs.processor,
+                    ram: specs.ram,
+                    gpu: specs.gpu,
+                    budget: specs.budget,
+                },
+            })
         }
     }
 
@@ -165,7 +177,7 @@ function Recommendation() {
 
     const handleCompare = () => {
         if (!result || !result.laptopClass) return
-        const ids = result.laptopClass.filter(m => !m.isGeneric).map(m => m.id).join(',')
+        const ids = result.laptopClass.filter(m => !m.isGeneric).map(m => m.id).slice(0, 3).join(',')
         if (ids) {
             navigate(`/compare?models=${ids}`)
         }
diff --git a/src/pages/Landing/Landing.css b/src/pages/Landing/Landing.css
index 4dc8253..b4a820b 100644
--- a/src/pages/Landing/Landing.css
+++ b/src/pages/Landing/Landing.css
@@ -159,6 +159,96 @@
   margin: 0;
 }
 
+/* F-02: Recent quiz results history */
+.LandingHistory {
+  display: flex;
+  flex-direction: column;
+  gap: 1.5rem;
+}
+
+.LandingHistory__header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 1rem;
+  flex-wrap: wrap;
+}
+
+.LandingHistory__title {
+  display: inline-flex;
+  align-items: center;
+  gap: 0.6rem;
+  font-size: 1.5rem;
+  color: #0f172a;
+  margin: 0;
+}
+
+.LandingHistory__clear {
+  display: inline-flex;
+  align-items: center;
+  gap: 0.4rem;
+  background: transparent;
+  color: #64748b;
+  border: 1px solid #e2e8f0;
+  padding: 0.5rem 1rem;
+  border-radius: 999px;
+  font-size: 0.9rem;
+  font-weight: 600;
+  cursor: pointer;
+  transition: all 0.2s ease;
+}
+.LandingHistory__clear:hover {
+  color: #ef4444;
+  border-color: #fecaca;
+  background: #fef2f2;
+}
+
+.LandingHistory__grid {
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
+  gap: 1.5rem;
+}
+
+.HistoryCard {
+  display: flex;
+  flex-direction: column;
+  gap: 0.5rem;
+  background: white;
+  padding: 1.5rem;
+  border-radius: 1.5rem;
+  box-shadow: 0 4px 6px -1px rgba(0,0,0,0.05), 0 2px 4px -2px rgba(0,0,0,0.05);
+  border: 1px solid #f1f5f9;
+  color: #0f172a;
+  text-decoration: none;
+  transition: transform 0.3s ease, box-shadow 0.3s ease;
+}
+.HistoryCard:hover {
+  transform: translateY(-5px);
+  box-shadow: 0 20px 25px -5px rgba(0,0,0,0.1), 0 8px 10px -6px rgba(0,0,0,0.1);
+  color: #0f172a;
+}
+
+.HistoryCard__specs {
+  font-weight: 700;
+  font-size: 1.05rem;
+  line-height: 1.4;
+}
+
+.HistoryCard__budget {
+  color: #64748b;
+  font-size: 0.9rem;
+}
+
+.HistoryCard__cta {
+  display: inline-flex;
+  align-items: center;
+  gap: 0.4rem;
+  margin-top: 0.5rem;
+  color: #2563eb;
+  font-weight: 600;
+  font-size: 0.9rem;
+}
+
 @keyframes float {
   0% { transform: translateY(0px); }
   50% { transform: translateY(-20px); }
diff --git a/src/pages/Landing/Landing.jsx b/src/pages/Landing/Landing.jsx
index 8837fba..a97700f 100644
--- a/src/pages/Landing/Landing.jsx
+++ b/src/pages/Landing/Landing.jsx
@@ -1,11 +1,29 @@
-import React from 'react'
-import { useNavigate } from 'react-router-dom'
+import React, { useState, useEffect } from 'react'
+import { useNavigate, Link } from 'react-router-dom'
 import { Helmet } from 'react-helmet-async'
-import { FaLaptopCode, FaCheckCircle, FaArrowRight, FaShieldAlt, FaBolt, FaMicrochip } from 'react-icons/fa'
+import { FaLaptopCode, FaCheckCircle, FaArrowRight, FaShieldAlt, FaBolt, FaMicrochip, FaHistory, FaTrashAlt } from 'react-icons/fa'
+import { getHistory, clearHistory } from '../../utils/historyStore'
 import './Landing.css'
 
+const BUDGET_LABELS = {
+  low: 'Menos de $5,000',
+  medium: '$5,000–$12,000',
+  high: '$12,000–$25,000',
+  premium: 'Más de $25,000',
+}
+
 const Landing = () => {
   const navigate = useNavigate()
+  const [history, setHistory] = useState([])
+
+  useEffect(() => {
+    setHistory(getHistory())
+  }, [])
+
+  const handleClearHistory = () => {
+    clearHistory()
+    setHistory([])
+  }
 
   return (
     <>
@@ -64,6 +82,41 @@ const Landing = () => {
             <p>Desde estudiantes y gamers hasta programadores y editores de video profesionales.</p>
           </div>
         </section>
+
+        {/* F-02: recent quiz results */}
+        {history.length > 0 && (
+          <section className="LandingHistory" aria-labelledby="landing-history-title">
+            <div className="LandingHistory__header">
+              <h2 id="landing-history-title" className="LandingHistory__title">
+                <FaHistory aria-hidden="true" /> Tus consultas recientes
+              </h2>
+              <button type="button" className="LandingHistory__clear" onClick={handleClearHistory}>
+                <FaTrashAlt aria-hidden="true" /> Limpiar
+              </button>
+            </div>
+            <div className="LandingHistory__grid">
+              {history.map((entry) => (
+                <Link
+                  key={entry.id}
+                  to={`/quiz?plan=${entry.encodedAnswers}`}
+                  className="HistoryCard"
+                >
+                  <span className="HistoryCard__specs">
+                    {[entry.summary.processor, entry.summary.ram, entry.summary.gpu]
+                      .filter(Boolean)
+                      .join(' · ')}
+                  </span>
+                  {entry.summary.budget && (
+                    <span className="HistoryCard__budget">
+                      Presupuesto: {BUDGET_LABELS[entry.summary.budget] || entry.summary.budget} MXN
+                    </span>
+                  )}
+                  <span className="HistoryCard__cta">Ver de nuevo <FaArrowRight aria-hidden="true" /></span>
+                </Link>
+              ))}
+            </div>
+          </section>
+        )}
       </div>
     </>
   )
diff --git a/src/utils/historyStore.js b/src/utils/historyStore.js
new file mode 100644
index 0000000..b9138d7
--- /dev/null
+++ b/src/utils/historyStore.js
@@ -0,0 +1,59 @@
+/*
+ * F-02: Quiz results history.
+ * Stores the last few completed quiz results in localStorage so the Landing
+ * page can offer quick access back to them. Pure module — no React.
+ */
+
+const STORAGE_KEY = 'csh_quiz_history'
+const MAX_ENTRIES = 3
+
+const isValidEntry = (entry) => Boolean(entry && entry.summary)
+
+export const getHistory = () => {
+  try {
+    const raw = localStorage.getItem(STORAGE_KEY)
+    if (!raw) return []
+    const parsed = JSON.parse(raw)
+    if (!Array.isArray(parsed)) return []
+    return parsed.filter(isValidEntry)
+  } catch {
+    return []
+  }
+}
+
+// Adds a completed-quiz entry. Newest-first, capped, deduped by encodedAnswers.
+export const addEntry = ({ encodedAnswers = '', summary } = {}) => {
+  if (!summary) return getHistory()
+
+  const entry = {
+    id: `${Date.now()}-${Math.random().toString(36).slice(2, 8)}`,
+    timestamp: new Date().toISOString(),
+    encodedAnswers,
+    summary: {
+      processor: summary.processor || '',
+      ram: summary.ram || '',
+      gpu: summary.gpu || '',
+      budget: summary.budget || '',
+    },
+  }
+
+  const previous = getHistory().filter(
+    (e) => !encodedAnswers || e.encodedAnswers !== encodedAnswers
+  )
+  const next = [entry, ...previous].slice(0, MAX_ENTRIES)
+
+  try {
+    localStorage.setItem(STORAGE_KEY, JSON.stringify(next))
+  } catch {
+    // storage full or unavailable — keep the in-memory result
+  }
+  return next
+}
+
+export const clearHistory = () => {
+  try {
+    localStorage.removeItem(STORAGE_KEY)
+  } catch {
+    // ignore
+  }
+}

From 6894ea9ea565a795bf415e3f4b2624b0c01583dc Mon Sep 17 00:00:00 2001
From: FranGuh <pedicles62900@gmail.com>
Date: Sun, 14 Jun 2026 14:17:11 -0600
Subject: [PATCH 4/6] feat: proportional spec bars in the comparison table

- compare-viz: add SpecBar component + getBarWidth helper; render pure-CSS
  proportional bars for the RAM, storage and GPU rows (no charting dep)
- tests: +8 (getBarWidth boundaries, SpecBar rendering and a11y)
---
 src/__tests__/SpecBar.test.jsx     | 48 ++++++++++++++++++++++++++++++
 src/components/SpecBar/SpecBar.css | 27 +++++++++++++++++
 src/components/SpecBar/SpecBar.jsx | 19 ++++++++++++
 src/pages/Compare/Compare.jsx      |  9 ++++++
 src/utils/parseSpecs.js            | 11 +++++++
 5 files changed, 114 insertions(+)
 create mode 100644 src/__tests__/SpecBar.test.jsx
 create mode 100644 src/components/SpecBar/SpecBar.css
 create mode 100644 src/components/SpecBar/SpecBar.jsx

diff --git a/src/__tests__/SpecBar.test.jsx b/src/__tests__/SpecBar.test.jsx
new file mode 100644
index 0000000..fd50984
--- /dev/null
+++ b/src/__tests__/SpecBar.test.jsx
@@ -0,0 +1,48 @@
+import { describe, it, expect } from 'vitest'
+import { render } from '@testing-library/react'
+import SpecBar from '../components/SpecBar/SpecBar'
+import { getBarWidth } from '../utils/parseSpecs'
+
+describe('getBarWidth', () => {
+  it('returns 50 for half of the max', () => {
+    expect(getBarWidth(8, 16)).toBe(50)
+  })
+
+  it('returns 100 for the max value', () => {
+    expect(getBarWidth(16, 16)).toBe(100)
+  })
+
+  it('returns 0 for zero or invalid inputs', () => {
+    expect(getBarWidth(0, 16)).toBe(0)
+    expect(getBarWidth(8, 0)).toBe(0)
+    expect(getBarWidth(8, undefined)).toBe(0)
+  })
+
+  it('never exceeds 100', () => {
+    expect(getBarWidth(20, 16)).toBe(100)
+  })
+})
+
+describe('SpecBar component', () => {
+  it('renders a fill with the proportional width', () => {
+    const { container } = render(<SpecBar value={8} max={16} metric="ram" ariaLabel="8 GB" />)
+    const fill = container.querySelector('.SpecBar__fill')
+    expect(fill).toBeTruthy()
+    expect(fill.style.width).toBe('50%')
+  })
+
+  it('applies the metric-specific class', () => {
+    const { container } = render(<SpecBar value={8} max={16} metric="storage" ariaLabel="x" />)
+    expect(container.querySelector('.SpecBar--storage')).toBeTruthy()
+  })
+
+  it('exposes an accessible label', () => {
+    const { getByRole } = render(<SpecBar value={8} max={16} metric="ram" ariaLabel="8 GB de RAM" />)
+    expect(getByRole('img', { name: '8 GB de RAM' })).toBeTruthy()
+  })
+
+  it('renders an empty fill for a zero value', () => {
+    const { container } = render(<SpecBar value={0} max={16} metric="ram" ariaLabel="N/A" />)
+    expect(container.querySelector('.SpecBar__fill').style.width).toBe('0%')
+  })
+})
diff --git a/src/components/SpecBar/SpecBar.css b/src/components/SpecBar/SpecBar.css
new file mode 100644
index 0000000..4a077fb
--- /dev/null
+++ b/src/components/SpecBar/SpecBar.css
@@ -0,0 +1,27 @@
+.SpecBar {
+  width: 100%;
+  height: 6px;
+  margin-top: 0.4rem;
+  background: var(--color-border, #e2e8f0);
+  border-radius: 999px;
+  overflow: hidden;
+}
+
+.SpecBar__fill {
+  height: 100%;
+  border-radius: 999px;
+  transition: width 0.4s ease;
+}
+
+/* Metric-specific colors — distinct hues, each WCAG-AA against the track */
+.SpecBar--ram .SpecBar__fill {
+  background: #2563eb;
+}
+
+.SpecBar--storage .SpecBar__fill {
+  background: #059669;
+}
+
+.SpecBar--gpu .SpecBar__fill {
+  background: #7c3aed;
+}
diff --git a/src/components/SpecBar/SpecBar.jsx b/src/components/SpecBar/SpecBar.jsx
new file mode 100644
index 0000000..d32d608
--- /dev/null
+++ b/src/components/SpecBar/SpecBar.jsx
@@ -0,0 +1,19 @@
+import React from 'react'
+import { getBarWidth } from '../../utils/parseSpecs'
+import './SpecBar.css'
+
+/**
+ * Proportional spec bar for the comparison table.
+ * Pure CSS, no charting dependency. The numeric value is shown in the cell
+ * itself, so the bar is an `img` with a descriptive label for assistive tech.
+ */
+const SpecBar = ({ value, max, metric = 'ram', ariaLabel }) => {
+  const width = getBarWidth(value, max)
+  return (
+    <div className={`SpecBar SpecBar--${metric}`} role="img" aria-label={ariaLabel}>
+      <div className="SpecBar__fill" style={{ width: `${width}%` }} />
+    </div>
+  )
+}
+
+export default SpecBar
diff --git a/src/pages/Compare/Compare.jsx b/src/pages/Compare/Compare.jsx
index 6d66a66..15b9b74 100644
--- a/src/pages/Compare/Compare.jsx
+++ b/src/pages/Compare/Compare.jsx
@@ -3,6 +3,7 @@ import { Helmet } from 'react-helmet-async'
 import { useNavigate } from 'react-router-dom'
 import laptopModels from '../../utils/laptopModels'
 import { parseModelSpecs, getBestIndices } from '../../utils/parseSpecs'
+import SpecBar from '../../components/SpecBar/SpecBar'
 import './Compare.css'
 import { FaPlus, FaTimes, FaSearch, FaArrowLeft, FaChevronUp, FaChevronDown } from 'react-icons/fa'
 
@@ -149,6 +150,11 @@ function Compare() {
   const bestStorage = getBestIndices(parsedModels.map(p => p.storageGB), true)
   const bestGPU = getBestIndices(parsedModels.map(p => p.gpuTier), true)
 
+  // compare-viz: per-row maxima for proportional spec bars
+  const maxRam = Math.max(0, ...parsedModels.map(p => p.ram))
+  const maxStorage = Math.max(0, ...parsedModels.map(p => p.storageGB))
+  const maxGpuTier = Math.max(0, ...parsedModels.map(p => p.gpuTier))
+
   const handleShare = () => {
     const url = `${window.location.origin}/compare?models=${selectedIds.join(',')}`
     navigator.clipboard?.writeText(url)
@@ -357,6 +363,7 @@ function Compare() {
                     <td key={selectedModels[i].id} className={`CompareTable__cell${bestRam[i] ? ' best' : ''}`}>
                       {p.ram > 0 ? `${p.ram} GB` : 'N/A'}
                       {bestRam[i] && <span className="BestBadge">Mayor RAM</span>}
+                      {p.ram > 0 && <SpecBar value={p.ram} max={maxRam} metric="ram" ariaLabel={`${p.ram} GB de RAM`} />}
                     </td>
                   ))}
                 </tr>
@@ -367,6 +374,7 @@ function Compare() {
                     <td key={selectedModels[i].id} className={`CompareTable__cell${bestStorage[i] ? ' best' : ''}`}>
                       {p.storageLabel}
                       {bestStorage[i] && <span className="BestBadge">Mayor storage</span>}
+                      {p.storageGB > 0 && <SpecBar value={p.storageGB} max={maxStorage} metric="storage" ariaLabel={`${p.storageLabel} de almacenamiento`} />}
                     </td>
                   ))}
                 </tr>
@@ -377,6 +385,7 @@ function Compare() {
                     <td key={m.id} className={`CompareTable__cell${bestGPU[i] ? ' best' : ''}`}>
                       {m.gpu}
                       {bestGPU[i] && <span className="BestBadge">Mejor GPU</span>}
+                      {parsedModels[i].gpuTier > 0 && <SpecBar value={parsedModels[i].gpuTier} max={maxGpuTier} metric="gpu" ariaLabel={`GPU nivel ${parsedModels[i].gpuTier} de ${maxGpuTier}`} />}
                     </td>
                   ))}
                 </tr>
diff --git a/src/utils/parseSpecs.js b/src/utils/parseSpecs.js
index 05b2133..f41bdb5 100644
--- a/src/utils/parseSpecs.js
+++ b/src/utils/parseSpecs.js
@@ -100,3 +100,14 @@ export const getBestIndices = (values, higherIsBetter = true) => {
   const best = higherIsBetter ? Math.max(...valid) : Math.min(...valid)
   return values.map(v => v === best && v > 0)
 }
+
+/**
+ * Returns a clamped 0–100 percentage of value relative to max, for spec bars.
+ * @param {number} value
+ * @param {number} max
+ * @returns {number}
+ */
+export const getBarWidth = (value, max) => {
+  if (!value || !max || value <= 0 || max <= 0) return 0
+  return Math.min(100, Math.round((value / max) * 100))
+}

From 5577b2e348d24a8aa004a7b01a875ecb4fdb692a Mon Sep 17 00:00:00 2001
From: FranGuh <pedicles62900@gmail.com>
Date: Sun, 14 Jun 2026 14:26:54 -0600
Subject: [PATCH 5/6] feat: dark mode with system detection and manual toggle

- add useTheme hook (csh-theme localStorage key, prefers-color-scheme
  fallback, follows the system until the user toggles manually) and an
  accessible ThemeToggle button in the header
- add :root[data-theme="dark"] token palette in index.css; make
  App/Landing/Recommendation/Compare/SpecBar/Quiz theme-aware via dark
  overrides while keeping light mode visually unchanged
- tests: +13 (useTheme behaviour, ThemeToggle)
---
 src/App.css                                   |  39 +++++
 src/App.jsx                                   |  14 +-
 src/__tests__/ThemeToggle.test.jsx            |  71 +++++++++
 src/__tests__/useTheme.test.jsx               | 146 ++++++++++++++++++
 .../Recommendation/Recommendation.css         |  95 +++++++++++-
 src/components/SpecBar/SpecBar.css            |  17 ++
 src/components/ThemeToggle/ThemeToggle.css    |  58 +++++++
 src/components/ThemeToggle/ThemeToggle.jsx    |  29 ++++
 src/hooks/useTheme.js                         | 105 +++++++++++++
 src/index.css                                 |  26 ++++
 src/pages/Compare/Compare.css                 |  42 +++++
 src/pages/Landing/Landing.css                 |  53 +++++++
 src/pages/Quiz/Quiz.css                       |  11 ++
 13 files changed, 694 insertions(+), 12 deletions(-)
 create mode 100644 src/__tests__/ThemeToggle.test.jsx
 create mode 100644 src/__tests__/useTheme.test.jsx
 create mode 100644 src/components/ThemeToggle/ThemeToggle.css
 create mode 100644 src/components/ThemeToggle/ThemeToggle.jsx
 create mode 100644 src/hooks/useTheme.js

diff --git a/src/App.css b/src/App.css
index d834ecf..2873cd2 100644
--- a/src/App.css
+++ b/src/App.css
@@ -59,6 +59,14 @@ body {
   text-decoration: none;
 }
 
+.AppHeader__actions {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  flex-wrap: wrap;
+  gap: 0.75rem;
+}
+
 .AppNav {
   display: inline-flex;
   align-items: center;
@@ -161,4 +169,35 @@ h1 {
   .App button {
     background-color: #f9f9f9;
   }
+}
+
+/* ---------------------------------------------------------------------------
+   Dark theme overrides
+   The light gradient, the translucent-white nav glass and the hard-coded link
+   colours are remapped for dark mode. Light mode is left untouched.
+   --------------------------------------------------------------------------- */
+:root[data-theme='dark'] #root {
+  background: var(--color-background);
+  background: linear-gradient(189deg, #0b1220 0%, #1e293b 100%);
+}
+
+:root[data-theme='dark'] .AppNav {
+  background: rgba(30, 41, 59, 0.6);
+  border-color: rgba(148, 163, 184, 0.2);
+  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.4);
+}
+
+:root[data-theme='dark'] .AppNav__link {
+  color: var(--color-text-muted);
+}
+
+:root[data-theme='dark'] .AppNav__link:hover {
+  background: rgba(59, 130, 246, 0.18);
+  color: var(--color-primary-hover);
+}
+
+:root[data-theme='dark'] .AppNav__link.active {
+  background: var(--color-primary);
+  color: #ffffff;
+  box-shadow: 0 2px 8px rgba(59, 130, 246, 0.4);
 }
\ No newline at end of file
diff --git a/src/App.jsx b/src/App.jsx
index df33f1e..cace31a 100644
--- a/src/App.jsx
+++ b/src/App.jsx
@@ -4,6 +4,7 @@ import { HelmetProvider } from 'react-helmet-async'
 import AppRoutes from './routes/AppRoutes'
 import { Analytics } from "@vercel/analytics/react"
 import ErrorBoundary from './components/ErrorBoundary/ErrorBoundary'
+import ThemeToggle from './components/ThemeToggle/ThemeToggle'
 
 function App() {
   return (
@@ -15,11 +16,14 @@ function App() {
               Computer Selector <span className='title__alter'>Helper</span>
             </Link>
           </div>
-          <nav className="AppNav" aria-label="Navegación principal">
-            <NavLink to="/" end className={({ isActive }) => isActive ? 'AppNav__link active' : 'AppNav__link'}>Inicio</NavLink>
-            <NavLink to="/quiz" className={({ isActive }) => isActive ? 'AppNav__link active' : 'AppNav__link'}>Quiz</NavLink>
-            <NavLink to="/compare" className={({ isActive }) => isActive ? 'AppNav__link active' : 'AppNav__link'}>Comparar</NavLink>
-          </nav>
+          <div className="AppHeader__actions">
+            <nav className="AppNav" aria-label="Navegación principal">
+              <NavLink to="/" end className={({ isActive }) => isActive ? 'AppNav__link active' : 'AppNav__link'}>Inicio</NavLink>
+              <NavLink to="/quiz" className={({ isActive }) => isActive ? 'AppNav__link active' : 'AppNav__link'}>Quiz</NavLink>
+              <NavLink to="/compare" className={({ isActive }) => isActive ? 'AppNav__link active' : 'AppNav__link'}>Comparar</NavLink>
+            </nav>
+            <ThemeToggle />
+          </div>
         </header>
         <main>
           <ErrorBoundary>
diff --git a/src/__tests__/ThemeToggle.test.jsx b/src/__tests__/ThemeToggle.test.jsx
new file mode 100644
index 0000000..0702fdd
--- /dev/null
+++ b/src/__tests__/ThemeToggle.test.jsx
@@ -0,0 +1,71 @@
+import { describe, it, expect, beforeEach, afterEach, vi } from 'vitest'
+import { render, screen, fireEvent } from '@testing-library/react'
+import ThemeToggle from '../components/ThemeToggle/ThemeToggle'
+
+function mockMatchMedia({ matches = false } = {}) {
+  const mql = {
+    matches,
+    media: '(prefers-color-scheme: dark)',
+    addEventListener: () => {},
+    removeEventListener: () => {},
+    addListener: () => {},
+    removeListener: () => {},
+  }
+  Object.defineProperty(window, 'matchMedia', {
+    configurable: true,
+    writable: true,
+    value: vi.fn(() => mql),
+  })
+}
+
+beforeEach(() => {
+  localStorage.clear()
+  document.documentElement.removeAttribute('data-theme')
+  mockMatchMedia({ matches: false })
+})
+
+afterEach(() => {
+  vi.restoreAllMocks()
+  localStorage.clear()
+  document.documentElement.removeAttribute('data-theme')
+  delete window.matchMedia
+})
+
+describe('ThemeToggle', () => {
+  it('renders a button', () => {
+    render(<ThemeToggle />)
+    expect(screen.getByRole('button')).toBeInTheDocument()
+  })
+
+  it('has an accessible name', () => {
+    render(<ThemeToggle />)
+    expect(screen.getByRole('button')).toHaveAccessibleName()
+  })
+
+  it('toggles the data-theme attribute on click', () => {
+    localStorage.setItem('csh-theme', 'light')
+    render(<ThemeToggle />)
+    expect(document.documentElement.getAttribute('data-theme')).toBe('light')
+
+    fireEvent.click(screen.getByRole('button'))
+
+    expect(document.documentElement.getAttribute('data-theme')).toBe('dark')
+  })
+
+  it('updates the accessible name to reflect the next action', () => {
+    localStorage.setItem('csh-theme', 'light')
+    render(<ThemeToggle />)
+
+    // In light mode the action is to activate dark mode.
+    expect(
+      screen.getByRole('button', { name: /modo oscuro/i }),
+    ).toBeInTheDocument()
+
+    fireEvent.click(screen.getByRole('button'))
+
+    // In dark mode the action is to activate light mode.
+    expect(
+      screen.getByRole('button', { name: /modo claro/i }),
+    ).toBeInTheDocument()
+  })
+})
diff --git a/src/__tests__/useTheme.test.jsx b/src/__tests__/useTheme.test.jsx
new file mode 100644
index 0000000..fe49aa6
--- /dev/null
+++ b/src/__tests__/useTheme.test.jsx
@@ -0,0 +1,146 @@
+import { describe, it, expect, beforeEach, afterEach, vi } from 'vitest'
+import { renderHook, act } from '@testing-library/react'
+import useTheme from '../hooks/useTheme'
+
+const STORAGE_KEY = 'csh-theme'
+
+/**
+ * Builds a controllable matchMedia mock so tests can drive the
+ * system colour-scheme preference and its change events.
+ */
+function mockMatchMedia({ matches = false } = {}) {
+  const listeners = new Set()
+  const mql = {
+    matches,
+    media: '(prefers-color-scheme: dark)',
+    addEventListener: (_event, cb) => listeners.add(cb),
+    removeEventListener: (_event, cb) => listeners.delete(cb),
+    // Legacy API some code paths still rely on.
+    addListener: (cb) => listeners.add(cb),
+    removeListener: (cb) => listeners.delete(cb),
+    dispatch: (next) => {
+      mql.matches = next
+      listeners.forEach((cb) => cb({ matches: next }))
+    },
+  }
+  const fn = vi.fn(() => mql)
+  Object.defineProperty(window, 'matchMedia', {
+    configurable: true,
+    writable: true,
+    value: fn,
+  })
+  return mql
+}
+
+beforeEach(() => {
+  localStorage.clear()
+  document.documentElement.removeAttribute('data-theme')
+})
+
+afterEach(() => {
+  vi.restoreAllMocks()
+  localStorage.clear()
+  document.documentElement.removeAttribute('data-theme')
+  delete window.matchMedia
+})
+
+describe('useTheme', () => {
+  it('initialises from a stored preference', () => {
+    localStorage.setItem(STORAGE_KEY, 'dark')
+    mockMatchMedia({ matches: false })
+
+    const { result } = renderHook(() => useTheme())
+
+    expect(result.current.theme).toBe('dark')
+  })
+
+  it('reflects the stored theme on documentElement', () => {
+    localStorage.setItem(STORAGE_KEY, 'dark')
+    mockMatchMedia({ matches: false })
+
+    renderHook(() => useTheme())
+
+    expect(document.documentElement.getAttribute('data-theme')).toBe('dark')
+  })
+
+  it('falls back to matchMedia when there is no stored value', () => {
+    mockMatchMedia({ matches: true })
+
+    const { result } = renderHook(() => useTheme())
+
+    expect(result.current.theme).toBe('dark')
+  })
+
+  it('defaults to light when no stored value and system prefers light', () => {
+    mockMatchMedia({ matches: false })
+
+    const { result } = renderHook(() => useTheme())
+
+    expect(result.current.theme).toBe('light')
+  })
+
+  it('toggleTheme flips the theme and updates documentElement', () => {
+    localStorage.setItem(STORAGE_KEY, 'light')
+    mockMatchMedia({ matches: false })
+
+    const { result } = renderHook(() => useTheme())
+    expect(result.current.theme).toBe('light')
+
+    act(() => {
+      result.current.toggleTheme()
+    })
+
+    expect(result.current.theme).toBe('dark')
+    expect(document.documentElement.getAttribute('data-theme')).toBe('dark')
+  })
+
+  it('persists the theme to localStorage on toggle', () => {
+    localStorage.setItem(STORAGE_KEY, 'light')
+    mockMatchMedia({ matches: false })
+
+    const { result } = renderHook(() => useTheme())
+
+    act(() => {
+      result.current.toggleTheme()
+    })
+
+    expect(localStorage.getItem(STORAGE_KEY)).toBe('dark')
+  })
+
+  it('follows system changes while there is no stored preference', () => {
+    const mql = mockMatchMedia({ matches: false })
+
+    const { result } = renderHook(() => useTheme())
+    expect(result.current.theme).toBe('light')
+
+    act(() => {
+      mql.dispatch(true)
+    })
+
+    expect(result.current.theme).toBe('dark')
+  })
+
+  it('stops following the system once the user toggles manually', () => {
+    const mql = mockMatchMedia({ matches: false })
+
+    const { result } = renderHook(() => useTheme())
+
+    act(() => {
+      result.current.toggleTheme()
+    })
+    expect(result.current.theme).toBe('dark')
+
+    // System now switches to light, but the manual preference must win.
+    act(() => {
+      mql.dispatch(false)
+    })
+
+    expect(result.current.theme).toBe('dark')
+  })
+
+  it('does not throw when matchMedia is unavailable', () => {
+    delete window.matchMedia
+
+    expect(() => renderHook(() => useTheme())).not.toThrow()
+  })
+})
diff --git a/src/components/Recommendation/Recommendation.css b/src/components/Recommendation/Recommendation.css
index 219d398..794d506 100644
--- a/src/components/Recommendation/Recommendation.css
+++ b/src/components/Recommendation/Recommendation.css
@@ -1,11 +1,16 @@
+/*
+ * Local aliases map onto the global design tokens so they automatically
+ * follow the active theme (light/dark). Light-mode values are identical to
+ * the previous hard-coded hexes, so light mode is unchanged.
+ */
 :root {
-  --primary-color: #2563eb;
-  --primary-hover: #1d4ed8;
-  --light-bg: #f8fafc;
-  --border-color: #e2e8f0;
-  --text-dark: #1e293b;
-  --text-muted: #64748b;
-  --card-bg: #ffffff;
+  --primary-color: var(--color-primary);
+  --primary-hover: var(--color-primary-hover);
+  --light-bg: var(--color-background);
+  --border-color: var(--color-border);
+  --text-dark: var(--color-text);
+  --text-muted: var(--color-text-muted);
+  --card-bg: var(--color-surface);
 }
 
 
@@ -789,3 +794,79 @@
 .SharedViewBannerLink:hover {
   color: #1d4ed8;
 }
+
+/* ---------------------------------------------------------------------------
+   Dark theme overrides
+   Semantic tint cards (warning=red, rationale=green, no-results=amber,
+   info=blue) keep their meaning but switch to dark surfaces with lighter
+   accent text for contrast. Light mode is left untouched.
+   --------------------------------------------------------------------------- */
+
+/* Selected / hovered quiz option — blue tint */
+:root[data-theme='dark'] .Question__label:hover,
+:root[data-theme='dark'] .Question__label:has(.Question__input:checked) {
+  background-color: rgba(59, 130, 246, 0.15);
+}
+
+/* Warning card — red */
+:root[data-theme='dark'] .WarningCard {
+  background-color: rgba(248, 113, 113, 0.1);
+  border-color: rgba(248, 113, 113, 0.35);
+}
+:root[data-theme='dark'] .WarningIcon {
+  color: #f87171;
+}
+:root[data-theme='dark'] .WarningText {
+  color: #fca5a5;
+}
+
+/* Rationale card — green */
+:root[data-theme='dark'] .RationaleCard {
+  background-color: rgba(52, 211, 153, 0.1);
+  border-color: rgba(52, 211, 153, 0.3);
+}
+:root[data-theme='dark'] .RationaleIcon {
+  color: #34d399;
+}
+:root[data-theme='dark'] .RationaleText {
+  color: #6ee7b7;
+}
+
+/* No-results card — amber */
+:root[data-theme='dark'] .NoResults {
+  background: rgba(251, 191, 36, 0.1);
+  border-color: rgba(251, 191, 36, 0.3);
+}
+:root[data-theme='dark'] .NoResultsIcon {
+  color: #fbbf24;
+}
+:root[data-theme='dark'] .NoResults h4 {
+  color: #fcd34d;
+}
+:root[data-theme='dark'] .NoResults p {
+  color: #fde68a;
+}
+
+/* Compare CTA — dashed primary tint */
+:root[data-theme='dark'] .CompareModelsBtn--ingrid {
+  background: rgba(59, 130, 246, 0.08);
+  border-color: rgba(59, 130, 246, 0.4);
+}
+:root[data-theme='dark'] .CompareModelsBtn--ingrid:hover {
+  background: rgba(59, 130, 246, 0.16);
+  border-color: var(--color-primary);
+}
+
+/* Shared-view banner — blue */
+:root[data-theme='dark'] .SharedViewBanner {
+  background: rgba(59, 130, 246, 0.12);
+  border-color: rgba(59, 130, 246, 0.35);
+  color: #bfdbfe;
+}
+:root[data-theme='dark'] .SharedViewBannerIcon,
+:root[data-theme='dark'] .SharedViewBannerLink {
+  color: var(--color-primary-hover);
+}
+:root[data-theme='dark'] .SharedViewBannerLink:hover {
+  color: #93c5fd;
+}
diff --git a/src/components/SpecBar/SpecBar.css b/src/components/SpecBar/SpecBar.css
index 4a077fb..4344fc3 100644
--- a/src/components/SpecBar/SpecBar.css
+++ b/src/components/SpecBar/SpecBar.css
@@ -25,3 +25,20 @@
 .SpecBar--gpu .SpecBar__fill {
   background: #7c3aed;
 }
+
+/* ---------------------------------------------------------------------------
+   Dark theme overrides
+   The track darkens via --color-border, so the metric fills are lightened to
+   keep WCAG-AA contrast against it. Light mode is left untouched.
+   --------------------------------------------------------------------------- */
+:root[data-theme='dark'] .SpecBar--ram .SpecBar__fill {
+  background: #60a5fa;
+}
+
+:root[data-theme='dark'] .SpecBar--storage .SpecBar__fill {
+  background: #34d399;
+}
+
+:root[data-theme='dark'] .SpecBar--gpu .SpecBar__fill {
+  background: #a78bfa;
+}
diff --git a/src/components/ThemeToggle/ThemeToggle.css b/src/components/ThemeToggle/ThemeToggle.css
new file mode 100644
index 0000000..9a7df9b
--- /dev/null
+++ b/src/components/ThemeToggle/ThemeToggle.css
@@ -0,0 +1,58 @@
+.ThemeToggle {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 2.5rem;
+  height: 2.5rem;
+  padding: 0;
+  border: 1px solid var(--color-border);
+  border-radius: 999px;
+  background: var(--color-surface);
+  color: var(--color-text);
+  font-size: 1.1rem;
+  line-height: 1;
+  box-shadow: var(--shadow-sm);
+  transition:
+    background-color 0.2s ease,
+    border-color 0.2s ease,
+    color 0.2s ease,
+    transform 0.2s ease;
+}
+
+.ThemeToggle:hover {
+  border-color: var(--color-primary);
+  color: var(--color-primary);
+  transform: translateY(-1px);
+}
+
+.ThemeToggle:active {
+  transform: translateY(0);
+}
+
+.ThemeToggle__icon {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  transition:
+    transform 0.3s ease,
+    opacity 0.3s ease;
+}
+
+.ThemeToggle:hover .ThemeToggle__icon {
+  transform: rotate(15deg);
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .ThemeToggle,
+  .ThemeToggle__icon {
+    transition: none;
+  }
+
+  .ThemeToggle:hover {
+    transform: none;
+  }
+
+  .ThemeToggle:hover .ThemeToggle__icon {
+    transform: none;
+  }
+}
diff --git a/src/components/ThemeToggle/ThemeToggle.jsx b/src/components/ThemeToggle/ThemeToggle.jsx
new file mode 100644
index 0000000..9482ddd
--- /dev/null
+++ b/src/components/ThemeToggle/ThemeToggle.jsx
@@ -0,0 +1,29 @@
+import { FaMoon, FaSun } from 'react-icons/fa'
+import useTheme from '../../hooks/useTheme'
+import './ThemeToggle.css'
+
+/**
+ * Light/dark theme toggle button.
+ *
+ * Renders an accessible <button> whose label reflects the action it performs
+ * (activating the opposite theme). The icon cross-fades between sun and moon.
+ */
+export default function ThemeToggle() {
+  const { theme, toggleTheme } = useTheme()
+  const isDark = theme === 'dark'
+  const label = isDark ? 'Activar modo claro' : 'Activar modo oscuro'
+
+  return (
+    <button
+      type="button"
+      className="ThemeToggle"
+      onClick={toggleTheme}
+      aria-label={label}
+      title={label}
+    >
+      <span className="ThemeToggle__icon" aria-hidden="true">
+        {isDark ? <FaSun /> : <FaMoon />}
+      </span>
+    </button>
+  )
+}
diff --git a/src/hooks/useTheme.js b/src/hooks/useTheme.js
new file mode 100644
index 0000000..0b28bca
--- /dev/null
+++ b/src/hooks/useTheme.js
@@ -0,0 +1,105 @@
+import { useCallback, useEffect, useState } from 'react'
+
+const STORAGE_KEY = 'csh-theme'
+const DARK_QUERY = '(prefers-color-scheme: dark)'
+
+/**
+ * Safely reads the persisted theme preference.
+ * Returns null when nothing is stored or storage is unavailable.
+ */
+function readStoredTheme() {
+  try {
+    const value = window.localStorage.getItem(STORAGE_KEY)
+    return value === 'light' || value === 'dark' ? value : null
+  } catch {
+    return null
+  }
+}
+
+/**
+ * Safely persists the theme preference. No-ops when storage is unavailable.
+ */
+function persistTheme(theme) {
+  try {
+    window.localStorage.setItem(STORAGE_KEY, theme)
+  } catch {
+    // Ignore: private mode / disabled storage must never break theming.
+  }
+}
+
+/**
+ * Returns the matchMedia query list for the dark colour scheme, or null
+ * when matchMedia is not implemented (e.g. older jsdom).
+ */
+function getDarkMediaQuery() {
+  try {
+    if (typeof window.matchMedia !== 'function') return null
+    return window.matchMedia(DARK_QUERY)
+  } catch {
+    return null
+  }
+}
+
+/**
+ * Resolves the initial theme: a stored preference wins; otherwise the
+ * system colour-scheme preference; otherwise light.
+ */
+function resolveInitialTheme() {
+  const stored = readStoredTheme()
+  if (stored) return stored
+  const mql = getDarkMediaQuery()
+  return mql && mql.matches ? 'dark' : 'light'
+}
+
+/**
+ * Theme hook with light/dark support.
+ *
+ * - Persists an explicit user choice under the `csh-theme` localStorage key.
+ * - Without an explicit choice, it follows the OS colour-scheme preference
+ *   live; once the user toggles manually, the manual choice wins and the
+ *   system is no longer followed.
+ * - Applies the active theme to <html data-theme="...">.
+ */
+export default function useTheme() {
+  const [theme, setTheme] = useState(resolveInitialTheme)
+  // True until the user makes (or has previously made) an explicit choice.
+  const [followSystem, setFollowSystem] = useState(() => readStoredTheme() === null)
+
+  // Reflect the active theme on the document root for CSS to consume.
+  useEffect(() => {
+    document.documentElement.setAttribute('data-theme', theme)
+  }, [theme])
+
+  // While following the system, mirror live OS preference changes.
+  useEffect(() => {
+    if (!followSystem) return undefined
+    const mql = getDarkMediaQuery()
+    if (!mql) return undefined
+
+    const handleChange = (event) => {
+      setTheme(event.matches ? 'dark' : 'light')
+    }
+
+    if (typeof mql.addEventListener === 'function') {
+      mql.addEventListener('change', handleChange)
+      return () => mql.removeEventListener('change', handleChange)
+    }
+    // Legacy Safari fallback.
+    if (typeof mql.addListener === 'function') {
+      mql.addListener(handleChange)
+      return () => mql.removeListener(handleChange)
+    }
+    return undefined
+  }, [followSystem])
+
+  const toggleTheme = useCallback(() => {
+    setFollowSystem(false)
+    setTheme((current) => {
+      const next = current === 'dark' ? 'light' : 'dark'
+      persistTheme(next)
+      return next
+    })
+  }, [])
+
+  return { theme, toggleTheme }
+}
diff --git a/src/index.css b/src/index.css
index 2806f1f..a267514 100644
--- a/src/index.css
+++ b/src/index.css
@@ -12,6 +12,8 @@
   --color-warning: #f59e0b;
   --color-error: #ef4444;
 
+  color-scheme: light;
+
   /* Spacing */
   --spacing-xs: 0.25rem;
   --spacing-sm: 0.5rem;
@@ -41,6 +43,23 @@
   --radius-xl: 1rem;
 }
 
+/* Dark theme — overrides the base tokens when <html data-theme="dark"> is set. */
+:root[data-theme='dark'] {
+  --color-primary: #3b82f6;
+  --color-primary-hover: #60a5fa;
+  --color-secondary: #94a3b8;
+  --color-background: #0f172a;
+  --color-surface: #1e293b;
+  --color-text: #e2e8f0;
+  --color-text-muted: #94a3b8;
+  --color-border: #334155;
+  --color-success: #34d399;
+  --color-warning: #fbbf24;
+  --color-error: #f87171;
+
+  color-scheme: dark;
+}
+
 * {
   box-sizing: border-box;
 }
@@ -67,6 +86,13 @@ body {
   background-color: var(--color-background);
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
+  transition: background-color 0.3s ease, color 0.3s ease;
+}
+
+@media (prefers-reduced-motion: reduce) {
+  body {
+    transition: none;
+  }
 }
 
 a {
diff --git a/src/pages/Compare/Compare.css b/src/pages/Compare/Compare.css
index 825f910..aac3b68 100644
--- a/src/pages/Compare/Compare.css
+++ b/src/pages/Compare/Compare.css
@@ -523,3 +523,45 @@
     font-size: 0.8rem;
   }
 }
+
+/* ---------------------------------------------------------------------------
+   Dark theme overrides
+   White input/card/image backgrounds become the surface token; blue/green
+   highlight tints get dark-friendly equivalents. Light mode is left untouched.
+   --------------------------------------------------------------------------- */
+:root[data-theme='dark'] .CompareSearchInput,
+:root[data-theme='dark'] .CompareSelect,
+:root[data-theme='dark'] .CompareModelCard,
+:root[data-theme='dark'] .CompareSelectedChip__img,
+:root[data-theme='dark'] .CompareTable__modelImg {
+  background: var(--color-surface);
+}
+
+:root[data-theme='dark'] .CompareGridToggleBtn:hover {
+  background: rgba(59, 130, 246, 0.15);
+}
+
+:root[data-theme='dark'] .CompareSelectedChip {
+  background: rgba(59, 130, 246, 0.15);
+  border-color: rgba(59, 130, 246, 0.35);
+}
+
+:root[data-theme='dark'] .CompareSelectedChip__remove {
+  background: rgba(59, 130, 246, 0.35);
+  color: #bfdbfe;
+}
+:root[data-theme='dark'] .CompareSelectedChip__remove:hover {
+  background: rgba(59, 130, 246, 0.5);
+}
+
+:root[data-theme='dark'] .CompareModelCard.selected {
+  background: rgba(59, 130, 246, 0.15);
+}
+
+:root[data-theme='dark'] .CompareTable__cell.best {
+  background: rgba(52, 211, 153, 0.12);
+}
+
+:root[data-theme='dark'] .BestBadge {
+  color: #34d399;
+}
diff --git a/src/pages/Landing/Landing.css b/src/pages/Landing/Landing.css
index b4a820b..a8836a9 100644
--- a/src/pages/Landing/Landing.css
+++ b/src/pages/Landing/Landing.css
@@ -267,3 +267,56 @@
   }
   .FloatingCard { display: none; /* Hide complex floating elements on mobile */ }
 }
+
+/* ---------------------------------------------------------------------------
+   Dark theme overrides
+   Light mode is left untouched; only hard-coded colours that don't already
+   resolve through a design token are remapped here.
+   --------------------------------------------------------------------------- */
+:root[data-theme='dark'] .LandingHero__title,
+:root[data-theme='dark'] .FeatureCard h3,
+:root[data-theme='dark'] .LandingHistory__title,
+:root[data-theme='dark'] .HistoryCard,
+:root[data-theme='dark'] .HistoryCard:hover {
+  color: var(--color-text);
+}
+
+:root[data-theme='dark'] .LandingHero__subtitle,
+:root[data-theme='dark'] .FeatureCard p,
+:root[data-theme='dark'] .HistoryCard__budget {
+  color: var(--color-text-muted);
+}
+
+:root[data-theme='dark'] .FloatingCard {
+  background: rgba(30, 41, 59, 0.55);
+  border-color: rgba(148, 163, 184, 0.25);
+  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.4);
+  color: var(--color-text);
+}
+
+:root[data-theme='dark'] .FeatureCard,
+:root[data-theme='dark'] .HistoryCard {
+  background: var(--color-surface);
+  border-color: var(--color-border);
+}
+
+:root[data-theme='dark'] .FeatureCard__icon {
+  background: rgba(59, 130, 246, 0.15);
+  color: var(--color-primary);
+}
+
+:root[data-theme='dark'] .HistoryCard__cta {
+  color: var(--color-primary);
+}
+
+:root[data-theme='dark'] .Badge {
+  background: rgba(59, 130, 246, 0.18);
+  color: var(--color-primary);
+  border-color: rgba(59, 130, 246, 0.35);
+}
+
+:root[data-theme='dark'] .LandingHistory__clear:hover {
+  color: var(--color-error);
+  border-color: rgba(248, 113, 113, 0.4);
+  background: rgba(248, 113, 113, 0.12);
+}
diff --git a/src/pages/Quiz/Quiz.css b/src/pages/Quiz/Quiz.css
index 570d5a0..7b22c15 100644
--- a/src/pages/Quiz/Quiz.css
+++ b/src/pages/Quiz/Quiz.css
@@ -20,4 +20,15 @@
     align-items: center;
     justify-content: center;
     margin-bottom: var(--spacing-sm);
+}
+
+/* ---------------------------------------------------------------------------
+   Dark theme overrides
+   The translucent-white glass card would read as a bright blob on the dark
+   background, so it switches to dark glass. Light mode is left untouched.
+   --------------------------------------------------------------------------- */
+:root[data-theme='dark'] .Quiz {
+    background: rgba(30, 41, 59, 0.6);
+    border-color: rgba(148, 163, 184, 0.2);
+    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.4);
 }
\ No newline at end of file

From 6937274f74a245afa674a3134e856808616d19d6 Mon Sep 17 00:00:00 2001
From: FranGuh <pedicles62900@gmail.com>
Date: Sun, 14 Jun 2026 14:42:55 -0600
Subject: [PATCH 6/6] fix: address adversarial review findings

- a11y: fix the h1->h4 heading-level jump in the results view; renumber to
  a clean h1->h2->h3 outline and make the results h1 visible; update the
  matching CSS selectors (NoResults/Fallback/Approximate/ActionCard)
- fix(rationale): set the technical-user rationale default when the result
  is created (handleNext + shared-plan load) instead of in a [result]
  effect, so the user's manual toggle is no longer overwritten
- ux: add an inline pre-paint theme script in index.html to prevent a
  dark-mode flash (FOUC) on cold load
- dark: brighten the compare chip remove glyph for clearer contrast
- chore: ignore coverage/ in the eslint config
- tests: cover the compare deep-link 3-model cap and generic exclusion;
  assert real localStorage clearing and full summary fields on Landing
---
 eslint.config.js                              |  2 +-
 index.html                                    | 13 +++++
 src/__tests__/Landing.test.jsx                |  7 ++-
 src/__tests__/Recommendation.test.jsx         | 19 +++++++
 .../Recommendation/Recommendation.css         | 19 ++++---
 .../Recommendation/Recommendation.jsx         | 54 +++++++++----------
 src/pages/Compare/Compare.css                 |  2 +-
 7 files changed, 79 insertions(+), 37 deletions(-)

diff --git a/eslint.config.js b/eslint.config.js
index ec2b712..f3a84bc 100644
--- a/eslint.config.js
+++ b/eslint.config.js
@@ -4,7 +4,7 @@ import reactHooks from 'eslint-plugin-react-hooks'
 import reactRefresh from 'eslint-plugin-react-refresh'
 
 export default [
-  { ignores: ['dist'] },
+  { ignores: ['dist', 'coverage'] },
   {
     files: ['**/*.{js,jsx}'],
     languageOptions: {
diff --git a/index.html b/index.html
index cc684e0..c5e007a 100644
--- a/index.html
+++ b/index.html
@@ -5,6 +5,19 @@
     <link rel="icon" type="image/svg+xml" href="/help.svg" />
     <meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover" />
     <title>Computer Selector Helper</title>
+    <script>
+      // Apply the saved/system theme before first paint to avoid a flash (FOUC).
+      // Mirrors the logic in src/hooks/useTheme.js (localStorage key 'csh-theme').
+      (function () {
+        try {
+          var stored = localStorage.getItem('csh-theme');
+          var theme = stored === 'light' || stored === 'dark'
+            ? stored
+            : (window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light');
+          document.documentElement.setAttribute('data-theme', theme);
+        } catch (e) { /* private mode / no storage — fall back to light */ }
+      })();
+    </script>
     <script type="application/ld+json">
     {
       "@context": "https://schema.org",
diff --git a/src/__tests__/Landing.test.jsx b/src/__tests__/Landing.test.jsx
index 5abf191..5cd36b4 100644
--- a/src/__tests__/Landing.test.jsx
+++ b/src/__tests__/Landing.test.jsx
@@ -3,7 +3,7 @@ import { render, screen, fireEvent } from '@testing-library/react'
 import { MemoryRouter } from 'react-router-dom'
 import { HelmetProvider } from 'react-helmet-async'
 import Landing from '../pages/Landing/Landing'
-import { addEntry } from '../utils/historyStore'
+import { addEntry, getHistory } from '../utils/historyStore'
 
 beforeEach(() => {
   localStorage.clear()
@@ -31,7 +31,9 @@ describe('Landing — recent history (F-02)', () => {
     renderLanding()
     expect(screen.getByText(/tus consultas recientes/i)).toBeInTheDocument()
     expect(screen.getByText(/intel i7/i)).toBeInTheDocument()
-    expect(screen.getByText(/presupuesto/i)).toBeInTheDocument()
+    expect(screen.getByText(/16 GB/)).toBeInTheDocument()
+    expect(screen.getByText(/RTX 4050/)).toBeInTheDocument()
+    expect(screen.getByText(/\$12,000/)).toBeInTheDocument()
   })
 
   it('links each history card back to the quiz with its encoded plan', () => {
@@ -52,5 +54,6 @@ describe('Landing — recent history (F-02)', () => {
     renderLanding()
     fireEvent.click(screen.getByRole('button', { name: /limpiar/i }))
     expect(screen.queryByText(/tus consultas recientes/i)).not.toBeInTheDocument()
+    expect(getHistory()).toHaveLength(0)
   })
 })
diff --git a/src/__tests__/Recommendation.test.jsx b/src/__tests__/Recommendation.test.jsx
index 42b74f2..8ba6beb 100644
--- a/src/__tests__/Recommendation.test.jsx
+++ b/src/__tests__/Recommendation.test.jsx
@@ -4,8 +4,15 @@ import { MemoryRouter } from 'react-router-dom'
 import Recommendation from '../components/Recommendation/Recommendation'
 import questions from '../constants/questions'
 
+const mockNavigate = vi.fn()
+vi.mock('react-router-dom', async (importOriginal) => {
+  const actual = await importOriginal()
+  return { ...actual, useNavigate: () => mockNavigate }
+})
+
 beforeEach(() => {
   localStorage.clear()
+  mockNavigate.mockClear()
 })
 
 const renderWithRouter = () => render(
@@ -70,6 +77,9 @@ vi.mock('../utils/convertToSpecs', () => ({
         image: 'https://example.com/2.jpg',
         link: 'https://example.com/2',
       },
+      { id: 'test-3', name: 'Test Laptop 3', use: 'X', specs: 'i5', gpu: 'Iris Xe', price: '$11,000 MXN', portability: 'Media', image: '', link: '' },
+      { id: 'test-4', name: 'Test Laptop 4', use: 'X', specs: 'i5', gpu: 'Iris Xe', price: '$12,000 MXN', portability: 'Media', image: '', link: '' },
+      { id: 'generic-1', name: 'Clase genérica', isGeneric: true, use: 'X', specs: 'i5', gpu: 'Iris Xe', price: 'Consultar precio', portability: 'Media', image: '', link: '' },
     ],
   })),
 }))
@@ -170,3 +180,12 @@ describe('Recommendation — Technical level (INF-01)', () => {
     expect(screen.queryByText(/nota informativa de prueba/i)).not.toBeInTheDocument()
   })
 })
+
+describe('Recommendation — compare deep-link', () => {
+  it('caps the compare deep-link at 3 non-generic models and excludes generics', () => {
+    renderWithRouter()
+    completeQuiz()
+    fireEvent.click(screen.getByRole('button', { name: /comparar/i }))
+    expect(mockNavigate).toHaveBeenCalledWith('/compare?models=test-1,test-2,test-3')
+  })
+})
diff --git a/src/components/Recommendation/Recommendation.css b/src/components/Recommendation/Recommendation.css
index 794d506..17d4e47 100644
--- a/src/components/Recommendation/Recommendation.css
+++ b/src/components/Recommendation/Recommendation.css
@@ -208,6 +208,13 @@
   color: var(--text-dark);
 }
 
+.ResultTitle {
+  font-size: var(--font-size-3xl, 1.875rem);
+  text-align: center;
+  color: var(--color-text);
+  margin: 0 0 var(--spacing-xl, 2rem);
+}
+
 .ResultIntro {
   text-align: left;
 }
@@ -525,7 +532,7 @@
   box-shadow: var(--shadow-sm, 0 1px 2px 0 rgb(0 0 0 / 0.05));
 }
 
-.ActionCard h5 {
+.ActionCard h2 {
   font-size: var(--font-size-lg, 1.125rem);
   margin: 0 0 var(--spacing-xs, 0.25rem);
   color: var(--text-dark);
@@ -645,7 +652,7 @@
   text-align: center;
 }
 .NoResultsIcon { font-size: 40px; color: #f59e0b; }
-.NoResults h4 { color: #92400e; margin: 0; font-size: var(--font-size-lg); }
+.NoResults h2 { color: #92400e; margin: 0; font-size: var(--font-size-lg); }
 .NoResults p { color: #78350f; max-width: 500px; }
 .NoResultsButton {
   display: inline-flex;
@@ -679,7 +686,7 @@
   margin-bottom: var(--spacing-lg);
 }
 .FallbackIcon { font-size: 24px; color: var(--color-warning); }
-.FallbackHeader h4 { margin: 0; color: var(--color-text); }
+.FallbackHeader h2 { margin: 0; color: var(--color-text); font-size: var(--font-size-xl); }
 .FallbackChoice {
   display: grid;
   grid-template-columns: 1fr 1fr;
@@ -692,7 +699,7 @@
   border: 1px solid var(--color-border);
   text-align: center;
 }
-.FallbackCard h5 { margin: 0 0 var(--spacing-sm); font-size: var(--font-size-lg); }
+.FallbackCard h3 { margin: 0 0 var(--spacing-sm); font-size: var(--font-size-lg); }
 .FallbackCard p { color: var(--color-text-muted); font-size: var(--font-size-sm); margin-bottom: var(--spacing-md); }
 /* BUG-04 FIX: merged two split .FallbackButton blocks into one */
 .FallbackButton {
@@ -729,7 +736,7 @@
   padding-top: var(--spacing-lg);
   border-top: 1px solid var(--color-border);
 }
-.ApproximateSection h5 {
+.ApproximateSection h3 {
   text-align: center;
   color: var(--color-text-muted);
   margin-bottom: var(--spacing-lg);
@@ -840,7 +847,7 @@
 :root[data-theme='dark'] .NoResultsIcon {
   color: #fbbf24;
 }
-:root[data-theme='dark'] .NoResults h4 {
+:root[data-theme='dark'] .NoResults h2 {
   color: #fcd34d;
 }
 :root[data-theme='dark'] .NoResults p {
diff --git a/src/components/Recommendation/Recommendation.jsx b/src/components/Recommendation/Recommendation.jsx
index 4bc3a74..328314e 100644
--- a/src/components/Recommendation/Recommendation.jsx
+++ b/src/components/Recommendation/Recommendation.jsx
@@ -65,11 +65,6 @@ function Recommendation() {
         if (result) window.scrollTo({ top: 0, behavior: 'smooth' })
     }, [result])
 
-    // INF-01: technical users get the rationale expanded by default
-    useEffect(() => {
-        if (result) setShowRationale(!!result.flags?.isTechnical)
-    }, [result])
-
     // FEATURE: read shared plan from ?plan= URL param on mount
     useEffect(() => {
         const params = new URLSearchParams(window.location.search)
@@ -77,8 +72,10 @@ function Recommendation() {
         if (plan) {
             const decoded = decodeAnswers(plan)
             if (decoded) {
+                const decodedSpecs = convertToSpecs(decoded)
                 setAnswers(decoded)
-                setResult(convertToSpecs(decoded))
+                setResult(decodedSpecs)
+                setShowRationale(!!decodedSpecs.flags?.isTechnical)
                 setIsSharedView(true)
             }
         }
@@ -128,6 +125,9 @@ function Recommendation() {
         } else {
             const specs = convertToSpecs(answers)
             setResult(specs)
+            // INF-01: technical users get the rationale expanded by default
+            // (set once when the result is created so manual toggles persist)
+            setShowRationale(!!specs.flags?.isTechnical)
             // F-02: persist this completed quiz to the Landing history
             addEntry({
                 encodedAnswers: encodeAnswers(answers),
@@ -199,7 +199,7 @@ function Recommendation() {
                     <meta property="og:description" content={`Te recomendamos: ${result.processor}, ${result.ram} RAM, ${result.gpu}.`} />
                 </Helmet>
 
-                <h1 className="sr-only">Tu recomendación de laptop</h1>
+                <h1 className="ResultTitle">Tu recomendación de laptop</h1>
 
                 {/* FEATURE: banner shown when viewing a shared link */}
                 {isSharedView && (
@@ -215,7 +215,7 @@ function Recommendation() {
                     <div className="InfoCard">
                         <div className="InfoCardHeader">
                             <FaCheckCircle className="InfoIcon" />
-                            <h4 className="InfoLabel">Usos seleccionados</h4>
+                            <h2 className="InfoLabel">Usos seleccionados</h2>
                         </div>
                         <p>
                             {answers.mainUse === 'full_use'
@@ -231,7 +231,7 @@ function Recommendation() {
                     <div className="InfoCard2">
                         <div className="InfoCardHeader">
                             <FaClipboardList className="InfoIcon" />
-                            <h4 className="InfoLabel">Tus respuestas</h4>
+                            <h2 className="InfoLabel">Tus respuestas</h2>
                         </div>
                         <div className="InfoTable">
                             {questions.map((q, index) => {
@@ -266,50 +266,50 @@ function Recommendation() {
                     </div>
                 </div>
 
-                <h4>Especificaciones Recomendadas</h4>
+                <h2>Especificaciones Recomendadas</h2>
                 <div className="SpecGrid">
                     <div className="SpecCard">
                         <FaMicrochip className="SpecIcon" />
-                        <h5 className="SpecLabel">Procesador</h5>
+                        <h3 className="SpecLabel">Procesador</h3>
                         <p className="SpecTitle">{result.processor}</p>
                     </div>
                     <div className="SpecCard">
                         <FaLaptop className="SpecIcon" />
-                        <h5 className="SpecLabel">Gráficos</h5>
+                        <h3 className="SpecLabel">Gráficos</h3>
                         <p className="SpecTitle">{result.gpu}</p>
                     </div>
                     <div className="SpecCard">
                         <FaMemory className="SpecIcon" />
-                        <h5 className="SpecLabel">RAM</h5>
+                        <h3 className="SpecLabel">RAM</h3>
                         <p className="SpecTitle">{result.ram}</p>
                     </div>
                     <div className="SpecCard">
                         <FaHdd className="SpecIcon" />
-                        <h5 className="SpecLabel">Almacenamiento</h5>
+                        <h3 className="SpecLabel">Almacenamiento</h3>
                         <p className="SpecTitle">{result.storage}</p>
                     </div>
                 </div>
 
-                <h4>Especificaciones Extra</h4>
+                <h2>Especificaciones Extra</h2>
                 <div className="SpecGrid">
                     <div className="SpecCard">
                         <FaRegHandPointer className="SpecIcon" />
-                        <h5 className="SpecLabel">Pantalla táctil</h5>
+                        <h3 className="SpecLabel">Pantalla táctil</h3>
                         <p className="SpecTitle">{result.touchscreen ? 'Sí' : 'No'}</p>
                     </div>
                     <div className="SpecCard">
                         <FaSuitcase className="SpecIcon" />
-                        <h5 className="SpecLabel">Portabilidad</h5>
+                        <h3 className="SpecLabel">Portabilidad</h3>
                         <p className="SpecTitle">{result.portability}</p>
                     </div>
                     <div className="SpecCard">
                         <FaWindows className="SpecIcon" />
-                        <h5 className="SpecLabel">Sistema operativo</h5>
+                        <h3 className="SpecLabel">Sistema operativo</h3>
                         <p className="SpecTitle">{result.os}</p>
                     </div>
                     <div className="SpecCard">
                         <FaBatteryFull className="SpecIcon" />
-                        <h5 className="SpecLabel">Batería</h5>
+                        <h3 className="SpecLabel">Batería</h3>
                         <p className="SpecTitle">{result.battery}</p>
                     </div>
                 </div>
@@ -356,12 +356,12 @@ function Recommendation() {
                   <div className="FallbackOptions">
                     <div className="FallbackHeader">
                       <FaExclamationTriangle className="FallbackIcon" />
-                      <h4>No encontramos matches exactos para tus necesidades</h4>
+                      <h2>No encontramos matches exactos para tus necesidades</h2>
                     </div>
 
                     <div className="FallbackChoice">
                       <div className="FallbackCard">
-                        <h5>Usá las specs como guía de compra</h5>
+                        <h3>Usá las specs como guía de compra</h3>
                         <p>Revisá las especificaciones recomendadas de arriba y usalas como referencia al buscar en tiendas.</p>
                         <a
                           href={`https://www.google.com/search?q=${encodeURIComponent(`laptop ${result.processor} ${result.ram} RAM ${result.gpu} ${result.storage}`)}`}
@@ -374,7 +374,7 @@ function Recommendation() {
                       </div>
 
                       <div className="FallbackCard">
-                        <h5>Ver equipos aproximados</h5>
+                        <h3>Ver equipos aproximados</h3>
                         <p>Estos modelos se acercan a lo que necesitás, aunque no cumplen todos los requisitos.</p>
                         <button onClick={() => setShowApproximate(!showApproximate)} className="FallbackButton FallbackButtonSecondary">
                           {showApproximate ? 'Ocultar modelos' : 'Ver modelos aproximados'}
@@ -384,7 +384,7 @@ function Recommendation() {
 
                     {showApproximate && (
                       <div className="ApproximateSection">
-                        <h5>Modelos aproximados (pueden no cumplir todos tus requisitos)</h5>
+                        <h3>Modelos aproximados (pueden no cumplir todos tus requisitos)</h3>
                         <div className="SuggestedModelsGrid">
                           {result.approximateClass.map((model, index) => (
                             <div key={model.id || index} className="LaptopCardWrapper Approximate">
@@ -401,7 +401,7 @@ function Recommendation() {
                 {(!result.laptopClass || result.laptopClass.length === 0) && (!result.approximateClass || result.approximateClass.length === 0) && (
                   <div className="NoResults">
                     <FaExclamationTriangle className="NoResultsIcon" />
-                    <h4>Por el momento no se encuentra un equipo con las especificaciones recomendadas</h4>
+                    <h2>Por el momento no se encuentra un equipo con las especificaciones recomendadas</h2>
                     <p>Usá las especificaciones de arriba como guía al buscar en tiendas.</p>
                     <a
                       href={`https://www.google.com/search?q=${encodeURIComponent(`laptop ${result.processor} ${result.ram} RAM ${result.gpu} ${result.storage}`)}`}
@@ -416,7 +416,7 @@ function Recommendation() {
 
                 {result.laptopClass && Array.isArray(result.laptopClass) && (
                     <>
-                        <h4>Modelos sugeridos (referencia):</h4>
+                        <h2>Modelos sugeridos (referencia):</h2>
                         <div className="SuggestedModelsGrid">
                             {result.laptopClass.map((model, index) => (
                                 <LaptopCard key={model.id || index} model={model} />
@@ -440,7 +440,7 @@ function Recommendation() {
 
                 <div className="FinalActionsGrid">
                     <div className="ActionCard">
-                        <h5>Compartir recomendación</h5>
+                        <h2>Compartir recomendación</h2>
                         <p>Guardá este link o envialo a alguien.</p>
                         <div className="ActionCard__buttons">
                             <button
@@ -467,7 +467,7 @@ function Recommendation() {
                     </div>
                     
                     <div className="ActionCard">
-                        <h5>Volver a empezar</h5>
+                        <h2>Volver a empezar</h2>
                         <p>Probá otra combinación de respuestas.</p>
                         <div className="ActionCard__buttons">
                             <button onClick={handleReset} className="ActionBtn RestartBtn">
diff --git a/src/pages/Compare/Compare.css b/src/pages/Compare/Compare.css
index aac3b68..76a0057 100644
--- a/src/pages/Compare/Compare.css
+++ b/src/pages/Compare/Compare.css
@@ -548,7 +548,7 @@
 
 :root[data-theme='dark'] .CompareSelectedChip__remove {
   background: rgba(59, 130, 246, 0.35);
-  color: #bfdbfe;
+  color: var(--color-text);
 }
 :root[data-theme='dark'] .CompareSelectedChip__remove:hover {
   background: rgba(59, 130, 246, 0.5);