diff --git a/frontend/components/MetodologiaDrawer.tsx b/frontend/components/MetodologiaDrawer.tsx
index b2bff33..c3c3933 100644
--- a/frontend/components/MetodologiaDrawer.tsx
+++ b/frontend/components/MetodologiaDrawer.tsx
@@ -4,6 +4,7 @@ import {
   X, ShieldCheck, Database, RefreshCw, Tag, BarChart3,
   ArrowRight, BadgeCheck, Download, ArrowLeftRight, Layers
 } from 'lucide-react';
+import { useTranslation } from 'react-i18next';
 import type { AnalysisData, HeatmapDataPoint } from '../types';
 
 interface MetodologiaDrawerProps {
@@ -36,12 +37,12 @@ interface DataSummary {
 
 // ========== SUBSECCIONES ==========
 
-function DataSummarySection({ data }: { data: DataSummary }) {
+function DataSummarySection({ data, t }: { data: DataSummary; t: any }) {
   return (
     <div className="bg-slate-50 rounded-lg p-5">
       <h3 className="text-lg font-semibold mb-4 flex items-center gap-2">
         <Database className="w-5 h-5 text-blue-600" />
-        Datos Procesados
+        {t('methodology.dataProcessed')}
       </h3>
 
       <div className="grid grid-cols-3 gap-4">
@@ -49,55 +50,55 @@ function DataSummarySection({ data }: { data: DataSummary }) {
           <div className="text-3xl font-bold text-blue-600">
             {data.totalRegistros.toLocaleString('es-ES')}
           </div>
-          <div className="text-sm text-gray-600">Registros analizados</div>
+          <div className="text-sm text-gray-600">{t('methodology.recordsAnalyzed')}</div>
         </div>
 
         <div className="bg-white rounded-lg p-4 text-center shadow-sm">
           <div className="text-3xl font-bold text-blue-600">
             {data.mesesHistorico}
           </div>
-          <div className="text-sm text-gray-600">Meses de histórico</div>
+          <div className="text-sm text-gray-600">{t('methodology.monthsHistory')}</div>
         </div>
 
         <div className="bg-white rounded-lg p-4 text-center shadow-sm">
           <div className="text-2xl font-bold text-blue-600">
             {data.fuente}
           </div>
-          <div className="text-sm text-gray-600">Sistema origen</div>
+          <div className="text-sm text-gray-600">{t('methodology.sourceSystem')}</div>
         </div>
       </div>
 
       <p className="text-xs text-slate-500 mt-3 text-center">
-        Periodo: {data.periodo}
+        {t('methodology.periodRange', { period: data.periodo })}
       </p>
     </div>
   );
 }
 
-function PipelineSection() {
+function PipelineSection({ t }: { t: any }) {
   const steps = [
     {
       layer: 'Layer 0',
-      name: 'Raw Data',
-      desc: 'Ingesta y Normalización',
+      name: t('methodology.pipeline.layer1'),
+      desc: t('methodology.pipeline.layer1Desc'),
       color: 'bg-gray-100 border-gray-300'
     },
     {
       layer: 'Layer 1',
-      name: 'Trusted Data',
-      desc: 'Higiene y Clasificación',
+      name: t('methodology.pipeline.layer2'),
+      desc: t('methodology.pipeline.layer2Desc'),
       color: 'bg-yellow-50 border-yellow-300'
     },
     {
       layer: 'Layer 2',
-      name: 'Business Insights',
-      desc: 'Enriquecimiento',
+      name: t('methodology.pipeline.layer3'),
+      desc: t('methodology.pipeline.layer3Desc'),
       color: 'bg-green-50 border-green-300'
     },
     {
       layer: 'Output',
-      name: 'Dashboard',
-      desc: 'Visualización',
+      name: t('methodology.pipeline.layer4'),
+      desc: t('methodology.pipeline.layer4Desc'),
       color: 'bg-blue-50 border-blue-300'
     }
   ];
@@ -106,7 +107,7 @@ function PipelineSection() {
     <div>
       <h3 className="text-lg font-semibold mb-4 flex items-center gap-2">
         <RefreshCw className="w-5 h-5 text-purple-600" />
-        Pipeline de Transformación
+        {t('methodology.pipeline.title')}
       </h3>
 
       <div className="flex items-center justify-between">
@@ -125,42 +126,42 @@ function PipelineSection() {
       </div>
 
       <p className="text-xs text-gray-500 mt-3 italic">
-        Arquitectura modular de 3 capas para garantizar trazabilidad y escalabilidad.
+        {t('methodology.pipeline.description')}
       </p>
     </div>
   );
 }
 
-function TaxonomySection({ data }: { data: DataSummary['taxonomia'] }) {
+function TaxonomySection({ data, t }: { data: DataSummary['taxonomia']; t: any }) {
   const rows = [
     {
-      status: 'VALID',
+      status: t('methodology.taxonomy.valid'),
       pct: data.valid,
-      def: 'Duración 10s - 3h. Interacciones reales.',
+      def: t('methodology.taxonomy.validDef'),
       costes: true,
       aht: true,
       bgClass: 'bg-green-100 text-green-800'
     },
     {
-      status: 'NOISE',
+      status: t('methodology.taxonomy.noise'),
       pct: data.noise,
-      def: 'Duración <10s (no abandono). Ruido técnico.',
+      def: t('methodology.taxonomy.noiseDef'),
       costes: true,
       aht: false,
       bgClass: 'bg-yellow-100 text-yellow-800'
     },
     {
-      status: 'ZOMBIE',
+      status: t('methodology.taxonomy.zombie'),
       pct: data.zombie,
-      def: 'Duración >3h. Error de sistema.',
+      def: t('methodology.taxonomy.zombieDef'),
       costes: true,
       aht: false,
       bgClass: 'bg-red-100 text-red-800'
     },
     {
-      status: 'ABANDON',
+      status: t('methodology.taxonomy.abandon'),
       pct: data.abandon,
-      def: 'Desconexión externa + Talk ≤5s.',
+      def: t('methodology.taxonomy.abandonDef'),
       costes: false,
       aht: false,
       bgClass: 'bg-gray-100 text-gray-800'
@@ -171,23 +172,22 @@ function TaxonomySection({ data }: { data: DataSummary['taxonomia'] }) {
     <div>
       <h3 className="text-lg font-semibold mb-4 flex items-center gap-2">
         <Tag className="w-5 h-5 text-orange-600" />
-        Taxonomía de Calidad de Datos
+        {t('methodology.taxonomy.title')}
       </h3>
 
       <p className="text-sm text-gray-600 mb-4">
-        En lugar de eliminar registros, aplicamos "Soft Delete" con etiquetado de calidad
-        para permitir doble visión: financiera (todos los costes) y operativa (KPIs limpios).
+        {t('methodology.taxonomy.description')}
       </p>
 
       <div className="overflow-hidden rounded-lg border border-slate-200">
         <table className="w-full text-sm">
           <thead className="bg-gray-50">
             <tr>
-              <th className="px-3 py-2 text-left font-semibold">Estado</th>
-              <th className="px-3 py-2 text-right font-semibold">%</th>
-              <th className="px-3 py-2 text-left font-semibold">Definición</th>
-              <th className="px-3 py-2 text-center font-semibold">Costes</th>
-              <th className="px-3 py-2 text-center font-semibold">AHT</th>
+              <th className="px-3 py-2 text-left font-semibold">{t('methodology.taxonomy.state')}</th>
+              <th className="px-3 py-2 text-right font-semibold">{t('methodology.taxonomy.percentage')}</th>
+              <th className="px-3 py-2 text-left font-semibold">{t('methodology.taxonomy.definition')}</th>
+              <th className="px-3 py-2 text-center font-semibold">{t('methodology.taxonomy.costs')}</th>
+              <th className="px-3 py-2 text-center font-semibold">{t('methodology.taxonomy.aht')}</th>
             </tr>
           </thead>
           <tbody className="divide-y divide-slate-100">
@@ -202,16 +202,16 @@ function TaxonomySection({ data }: { data: DataSummary['taxonomia'] }) {
                 <td className="px-3 py-2 text-xs text-gray-600">{row.def}</td>
                 <td className="px-3 py-2 text-center">
                   {row.costes ? (
-                    <span className="text-green-600">✓ Suma</span>
+                    <span className="text-green-600">{t('methodology.taxonomy.sumYes')}</span>
                   ) : (
-                    <span className="text-red-600">✗ No</span>
+                    <span className="text-red-600">{t('methodology.taxonomy.sumNo')}</span>
                   )}
                 </td>
                 <td className="px-3 py-2 text-center">
                   {row.aht ? (
-                    <span className="text-green-600">✓ Promedio</span>
+                    <span className="text-green-600">{t('methodology.taxonomy.avgYes')}</span>
                   ) : (
-                    <span className="text-red-600">✗ Excluye</span>
+                    <span className="text-red-600">{t('methodology.taxonomy.avgExclude')}</span>
                   )}
                 </td>
               </tr>
@@ -223,7 +223,7 @@ function TaxonomySection({ data }: { data: DataSummary['taxonomia'] }) {
   );
 }
 
-function KPIRedefinitionSection({ kpis }: { kpis: DataSummary['kpis'] }) {
+function KPIRedefinitionSection({ kpis, t }: { kpis: DataSummary['kpis']; t: any }) {
   const formatTime = (seconds: number): string => {
     const mins = Math.floor(seconds / 60);
     const secs = seconds % 60;
@@ -234,11 +234,11 @@ function KPIRedefinitionSection({ kpis }: { kpis: DataSummary['kpis'] }) {
     <div>
       <h3 className="text-lg font-semibold mb-4 flex items-center gap-2">
         <BarChart3 className="w-5 h-5 text-indigo-600" />
-        KPIs Redefinidos
+        {t('methodology.kpis.title')}
       </h3>
 
       <p className="text-sm text-gray-600 mb-4">
-        Hemos redefinido los KPIs para eliminar los "puntos ciegos" de las métricas tradicionales.
+        {t('methodology.kpis.description')}
       </p>
 
       <div className="space-y-3">
@@ -246,25 +246,25 @@ function KPIRedefinitionSection({ kpis }: { kpis: DataSummary['kpis'] }) {
         <div className="bg-red-50 border border-red-200 rounded-lg p-4">
           <div className="flex justify-between items-start">
             <div>
-              <h4 className="font-semibold text-red-800">FCR Real vs FCR Técnico</h4>
+              <h4 className="font-semibold text-red-800">{t('methodology.kpis.fcrTitle')}</h4>
               <p className="text-xs text-red-700 mt-1">
-                El hallazgo más crítico del diagnóstico.
+                {t('methodology.kpis.fcrSubtitle')}
               </p>
             </div>
             <span className="text-2xl font-bold text-red-600">{kpis.fcrReal}%</span>
           </div>
           <div className="mt-3 text-xs">
             <div className="flex justify-between py-1 border-b border-red-200">
-              <span className="text-gray-600">FCR Técnico (sin transferencia):</span>
+              <span className="text-gray-600">{t('methodology.kpis.fcrTechnical')}</span>
               <span className="font-medium">~{kpis.fcrTecnico}%</span>
             </div>
             <div className="flex justify-between py-1">
-              <span className="text-gray-600">FCR Real (sin recontacto 7 días):</span>
+              <span className="text-gray-600">{t('methodology.kpis.fcrReal')}</span>
               <span className="font-medium text-red-600">{kpis.fcrReal}%</span>
             </div>
           </div>
           <p className="text-[10px] text-red-600 mt-2 italic">
-            💡 ~{kpis.fcrTecnico - kpis.fcrReal}% de "casos resueltos" generan segunda llamada, disparando costes ocultos.
+            💡 {t('methodology.kpis.fcrGap', { diff: kpis.fcrTecnico - kpis.fcrReal })}
           </p>
         </div>
 
@@ -272,15 +272,15 @@ function KPIRedefinitionSection({ kpis }: { kpis: DataSummary['kpis'] }) {
         <div className="bg-yellow-50 border border-yellow-200 rounded-lg p-4">
           <div className="flex justify-between items-start">
             <div>
-              <h4 className="font-semibold text-yellow-800">Tasa de Abandono Real</h4>
+              <h4 className="font-semibold text-yellow-800">{t('methodology.kpis.abandonTitle')}</h4>
               <p className="text-xs text-yellow-700 mt-1">
-                Fórmula: Desconexión Externa + Talk ≤5 segundos
+                {t('methodology.kpis.abandonFormula')}
               </p>
             </div>
             <span className="text-2xl font-bold text-yellow-600">{kpis.abandonoReal.toFixed(1)}%</span>
           </div>
           <p className="text-[10px] text-yellow-600 mt-2 italic">
-            💡 El umbral de 5s captura al cliente que cuelga al escuchar la locución o en el timbre.
+            💡 {t('methodology.kpis.abandonDesc')}
           </p>
         </div>
 
@@ -288,15 +288,15 @@ function KPIRedefinitionSection({ kpis }: { kpis: DataSummary['kpis'] }) {
         <div className="bg-blue-50 border border-blue-200 rounded-lg p-4">
           <div className="flex justify-between items-start">
             <div>
-              <h4 className="font-semibold text-blue-800">AHT Limpio</h4>
+              <h4 className="font-semibold text-blue-800">{t('methodology.kpis.ahtTitle')}</h4>
               <p className="text-xs text-blue-700 mt-1">
-                Excluye NOISE (&lt;10s) y ZOMBIE (&gt;3h) del promedio.
+                {t('methodology.kpis.ahtDesc')}
               </p>
             </div>
             <span className="text-2xl font-bold text-blue-600">{formatTime(kpis.ahtLimpio)}</span>
           </div>
           <p className="text-[10px] text-blue-600 mt-2 italic">
-            💡 El AHT sin filtrar estaba distorsionado por errores de sistema.
+            💡 {t('methodology.kpis.ahtNote')}
           </p>
         </div>
       </div>
@@ -304,7 +304,7 @@ function KPIRedefinitionSection({ kpis }: { kpis: DataSummary['kpis'] }) {
   );
 }
 
-function CPICalculationSection({ totalCost, totalVolume, costPerHour = 20 }: { totalCost: number; totalVolume: number; costPerHour?: number }) {
+function CPICalculationSection({ totalCost, totalVolume, costPerHour = 20, t }: { totalCost: number; totalVolume: number; costPerHour?: number; t: any }) {
   // Productivity factor: agents are ~70% productive (rest is breaks, training, after-call work, etc.)
   const effectiveProductivity = 0.70;
 
@@ -316,128 +316,124 @@ function CPICalculationSection({ totalCost, totalVolume, costPerHour = 20 }: { t
     <div>
       <h3 className="text-lg font-semibold mb-4 flex items-center gap-2">
         <BarChart3 className="w-5 h-5 text-emerald-600" />
-        Coste por Interacción (CPI)
+        {t('methodology.kpis.cpiTitle')}
       </h3>
 
       <p className="text-sm text-gray-600 mb-4">
-        El CPI se calcula dividiendo el <strong>coste total</strong> entre el <strong>volumen de interacciones</strong>.
-        El coste total incluye <em>todas</em> las interacciones (noise, zombie y válidas) porque todas se facturan,
-        y aplica un factor de productividad del {(effectiveProductivity * 100).toFixed(0)}%.
+        {t('methodology.cpi.description', { productivity: (effectiveProductivity * 100).toFixed(0) })}
       </p>
 
       {/* Fórmula visual */}
       <div className="bg-emerald-50 border border-emerald-200 rounded-lg p-4 mb-4">
         <div className="text-center mb-3">
-          <span className="text-xs text-emerald-700 uppercase tracking-wider font-medium">Fórmula de Cálculo</span>
+          <span className="text-xs text-emerald-700 uppercase tracking-wider font-medium">{t('methodology.kpis.cpiFormulaTitle')}</span>
         </div>
         <div className="flex items-center justify-center gap-2 text-lg font-mono flex-wrap">
-          <span className="px-3 py-1 bg-white rounded border border-emerald-300">CPI</span>
+          <span className="px-3 py-1 bg-white rounded border border-emerald-300">{t('methodology.kpis.cpiLabel')}</span>
           <span className="text-emerald-600">=</span>
-          <span className="px-2 py-1 bg-blue-100 rounded text-blue-800 text-sm">Coste Total</span>
-          <span className="text-emerald-600">÷</span>
-          <span className="px-2 py-1 bg-amber-100 rounded text-amber-800 text-sm">Volumen Total</span>
+          <span className="px-2 py-1 bg-blue-100 rounded text-blue-800 text-sm">{t('methodology.kpis.totalCost')}</span>
+          <span className="text-emerald-600">{t('methodology.kpis.divide')}</span>
+          <span className="px-2 py-1 bg-amber-100 rounded text-amber-800 text-sm">{t('methodology.kpis.totalVolume')}</span>
         </div>
         <p className="text-[10px] text-center text-emerald-600 mt-2">
-          El coste total usa (AHT segundos ÷ 3600) × coste/hora × volumen ÷ productividad
+          {t('methodology.kpis.cpiNote')}
         </p>
       </div>
 
       {/* Cómo se calcula el coste total */}
       <div className="bg-slate-50 border border-slate-200 rounded-lg p-4 mb-4">
-        <div className="text-sm font-semibold text-slate-700 mb-2">¿Cómo se calcula el Coste Total?</div>
+        <div className="text-sm font-semibold text-slate-700 mb-2">{t('methodology.kpis.howCalculate')}</div>
         <div className="bg-white rounded p-3 mb-3">
           <div className="flex items-center justify-center gap-2 text-sm font-mono flex-wrap">
-            <span className="text-slate-600">Coste =</span>
+            <span className="text-slate-600">{t('methodology.kpis.costEquals')}</span>
             <span className="px-2 py-1 bg-blue-100 rounded text-blue-800 text-xs">(AHT seg ÷ 3600)</span>
             <span className="text-slate-400">×</span>
             <span className="px-2 py-1 bg-amber-100 rounded text-amber-800 text-xs">€{costPerHour}/h</span>
             <span className="text-slate-400">×</span>
-            <span className="px-2 py-1 bg-gray-100 rounded text-gray-800 text-xs">Volumen</span>
+            <span className="px-2 py-1 bg-gray-100 rounded text-gray-800 text-xs">{t('methodology.cpi.volume')}</span>
             <span className="text-slate-400">÷</span>
             <span className="px-2 py-1 bg-purple-100 rounded text-purple-800 text-xs">{(effectiveProductivity * 100).toFixed(0)}%</span>
           </div>
         </div>
         <p className="text-xs text-slate-600">
-          El <strong>AHT</strong> está en segundos, se convierte a horas dividiendo por 3600.
-          Incluye todas las interacciones que generan coste (noise + zombie + válidas).
-          Solo se excluyen los abandonos porque no consumen tiempo de agente.
+          {t('methodology.cpi.ahtExplanation')}
         </p>
       </div>
 
       {/* Componentes del coste horario */}
       <div className="bg-amber-50 border border-amber-200 rounded-lg p-4">
         <div className="flex items-center justify-between mb-2">
-          <div className="text-sm font-semibold text-amber-800">Coste por Hora del Agente (Fully Loaded)</div>
+          <div className="text-sm font-semibold text-amber-800">{t('methodology.cpi.hourlyRate')}</div>
           <span className="text-xs bg-amber-200 text-amber-800 px-2 py-0.5 rounded-full font-medium">
-            Valor introducido: €{costPerHour.toFixed(2)}/h
+            {t('methodology.cpi.configuredValue', { value: costPerHour.toFixed(2) })}
           </span>
         </div>
         <p className="text-xs text-amber-700 mb-3">
-          Este valor fue configurado en la pantalla de entrada de datos y debe incluir todos los costes asociados al agente:
+          {t('methodology.cpi.includesAllCosts')}
         </p>
         <div className="grid grid-cols-2 gap-2 text-xs">
           <div className="flex items-center gap-2">
             <span className="text-amber-500">•</span>
-            <span className="text-amber-700">Salario bruto del agente</span>
+            <span className="text-amber-700">{t('methodology.cpi.cost1')}</span>
           </div>
           <div className="flex items-center gap-2">
             <span className="text-amber-500">•</span>
-            <span className="text-amber-700">Costes de seguridad social</span>
+            <span className="text-amber-700">{t('methodology.cpi.cost2')}</span>
           </div>
           <div className="flex items-center gap-2">
             <span className="text-amber-500">•</span>
-            <span className="text-amber-700">Licencias de software</span>
+            <span className="text-amber-700">{t('methodology.cpi.cost3')}</span>
           </div>
           <div className="flex items-center gap-2">
             <span className="text-amber-500">•</span>
-            <span className="text-amber-700">Infraestructura y puesto</span>
+            <span className="text-amber-700">{t('methodology.cpi.cost4')}</span>
           </div>
           <div className="flex items-center gap-2">
             <span className="text-amber-500">•</span>
-            <span className="text-amber-700">Supervisión y QA</span>
+            <span className="text-amber-700">{t('methodology.cpi.cost5')}</span>
           </div>
           <div className="flex items-center gap-2">
             <span className="text-amber-500">•</span>
-            <span className="text-amber-700">Formación y overhead</span>
+            <span className="text-amber-700">{t('methodology.cpi.cost6')}</span>
           </div>
         </div>
         <p className="text-[10px] text-amber-600 mt-3 italic">
-          💡 Si necesita ajustar este valor, puede volver a la pantalla de entrada de datos y modificarlo.
+          💡 {t('methodology.cpi.adjustNote')}
         </p>
       </div>
     </div>
   );
 }
 
-function BeforeAfterSection({ kpis }: { kpis: DataSummary['kpis'] }) {
+function BeforeAfterSection({ kpis, t }: { kpis: DataSummary['kpis']; t: any }) {
   const rows = [
     {
-      metric: 'FCR',
+      metric: t('methodology.impact.fcr'),
       tradicional: `${kpis.fcrTecnico}%`,
       beyond: `${kpis.fcrReal}%`,
       beyondClass: 'text-red-600',
-      impacto: 'Revela demanda fallida oculta'
+      impacto: t('methodology.impact.revealsDemand')
     },
     {
-      metric: 'Abandono',
+      metric: t('methodology.impact.abandon'),
       tradicional: `~${kpis.abandonoTradicional}%`,
       beyond: `${kpis.abandonoReal.toFixed(1)}%`,
       beyondClass: 'text-yellow-600',
-      impacto: 'Detecta frustración cliente real'
+      impacto: t('methodology.impact.detectsFrustration')
     },
     {
-      metric: 'Skills',
-      tradicional: `${kpis.skillsTecnicos} técnicos`,
-      beyond: `${kpis.skillsNegocio} líneas negocio`,
+      metric: t('methodology.impact.skills'),
+      tradicional: t('methodology.impact.technicalSkills', { count: kpis.skillsTecnicos }),
+      beyond: t('methodology.impact.businessLines', { count: kpis.skillsNegocio }),
       beyondClass: 'text-blue-600',
-      impacto: 'Visión ejecutiva accionable'
+      impacto: t('methodology.impact.executiveVision')
     },
     {
-      metric: 'AHT',
-      tradicional: 'Distorsionado',
-      beyond: 'Limpio',
+      metric: t('methodology.impact.aht'),
+      tradicional: t('methodology.impact.distorted'),
+      beyond: t('methodology.impact.clean'),
       beyondClass: 'text-green-600',
-      impacto: 'KPIs reflejan desempeño real'
+      impacto: t('methodology.impact.reflectsPerformance')
     }
   ];
 
@@ -445,17 +441,17 @@ function BeforeAfterSection({ kpis }: { kpis: DataSummary['kpis'] }) {
     <div>
       <h3 className="text-lg font-semibold mb-4 flex items-center gap-2">
         <ArrowLeftRight className="w-5 h-5 text-teal-600" />
-        Impacto de la Transformación
+        {t('methodology.impact.title')}
       </h3>
 
       <div className="overflow-hidden rounded-lg border border-slate-200">
         <table className="w-full text-sm">
           <thead className="bg-gray-50">
             <tr>
-              <th className="px-3 py-2 text-left font-semibold">Métrica</th>
-              <th className="px-3 py-2 text-center font-semibold">Visión Tradicional</th>
-              <th className="px-3 py-2 text-center font-semibold">Visión Beyond</th>
-              <th className="px-3 py-2 text-left font-semibold">Impacto</th>
+              <th className="px-3 py-2 text-left font-semibold">{t('methodology.impact.metric')}</th>
+              <th className="px-3 py-2 text-center font-semibold">{t('methodology.impact.traditional')}</th>
+              <th className="px-3 py-2 text-center font-semibold">{t('methodology.impact.beyond')}</th>
+              <th className="px-3 py-2 text-left font-semibold">{t('methodology.impact.impact')}</th>
             </tr>
           </thead>
           <tbody className="divide-y divide-slate-100">
@@ -473,53 +469,52 @@ function BeforeAfterSection({ kpis }: { kpis: DataSummary['kpis'] }) {
 
       <div className="mt-4 p-3 bg-indigo-50 border border-indigo-200 rounded-lg">
         <p className="text-xs text-indigo-800">
-          <strong>💡 Sin esta transformación,</strong> las decisiones de automatización
-          se basarían en datos incorrectos, generando inversiones en los procesos equivocados.
+          <strong>💡 {t('methodology.impact.withoutTransformation')}</strong> {t('methodology.impact.wrongInvestments')}
         </p>
       </div>
     </div>
   );
 }
 
-function SkillsMappingSection({ numSkillsNegocio }: { numSkillsNegocio: number }) {
+function SkillsMappingSection({ numSkillsNegocio, t }: { numSkillsNegocio: number; t: any }) {
   const mappings = [
     {
-      lineaNegocio: 'Baggage & Handling',
+      lineaNegocio: t('methodology.skillMapping.baggage'),
       keywords: 'HANDLING, EQUIPAJE, AHL (Lost & Found), DPR (Daños)',
       color: 'bg-amber-100 text-amber-800'
     },
     {
-      lineaNegocio: 'Sales & Booking',
+      lineaNegocio: t('methodology.skillMapping.sales'),
       keywords: 'COMPRA, VENTA, RESERVA, PAGO',
       color: 'bg-blue-100 text-blue-800'
     },
     {
-      lineaNegocio: 'Loyalty (SUMA)',
+      lineaNegocio: t('methodology.skillMapping.loyalty'),
       keywords: 'SUMA (Programa de Fidelización)',
       color: 'bg-purple-100 text-purple-800'
     },
     {
-      lineaNegocio: 'B2B & Agencies',
+      lineaNegocio: t('methodology.skillMapping.b2b'),
       keywords: 'AGENCIAS, AAVV, EMPRESAS, AVORIS, TOUROPERACION',
       color: 'bg-cyan-100 text-cyan-800'
     },
     {
-      lineaNegocio: 'Changes & Post-Sales',
+      lineaNegocio: t('methodology.skillMapping.changes'),
       keywords: 'MODIFICACION, CAMBIO, POSTVENTA, REFUND, REEMBOLSO',
       color: 'bg-orange-100 text-orange-800'
     },
     {
-      lineaNegocio: 'Digital Support',
+      lineaNegocio: t('methodology.skillMapping.digital'),
       keywords: 'WEB (Soporte a navegación)',
       color: 'bg-indigo-100 text-indigo-800'
     },
     {
-      lineaNegocio: 'Customer Service',
+      lineaNegocio: t('methodology.skillMapping.customer'),
       keywords: 'ATENCION, INFO, OTROS, GENERAL, PREMIUM',
       color: 'bg-green-100 text-green-800'
     },
     {
-      lineaNegocio: 'Internal / Backoffice',
+      lineaNegocio: t('methodology.skillMapping.internal'),
       keywords: 'COORD, BO_, HELPDESK, BACKOFFICE',
       color: 'bg-slate-100 text-slate-800'
     }
@@ -529,13 +524,13 @@ function SkillsMappingSection({ numSkillsNegocio }: { numSkillsNegocio: number }
     <div>
       <h3 className="text-lg font-semibold mb-4 flex items-center gap-2">
         <Layers className="w-5 h-5 text-violet-600" />
-        Mapeo de Skills a Líneas de Negocio
+        {t('methodology.skillMapping.title')}
       </h3>
 
       {/* Resumen del mapeo */}
       <div className="bg-violet-50 border border-violet-200 rounded-lg p-4 mb-4">
         <div className="flex items-center justify-between mb-2">
-          <span className="text-sm font-medium text-violet-800">Simplificación aplicada</span>
+          <span className="text-sm font-medium text-violet-800">{t('methodology.skillMapping.simplificationApplied')}</span>
           <div className="flex items-center gap-2">
             <span className="text-2xl font-bold text-violet-600">980</span>
             <ArrowRight className="w-4 h-4 text-violet-400" />
@@ -543,8 +538,7 @@ function SkillsMappingSection({ numSkillsNegocio }: { numSkillsNegocio: number }
           </div>
         </div>
         <p className="text-xs text-violet-700">
-          Se redujo la complejidad de <strong>980 skills técnicos</strong> a <strong>{numSkillsNegocio} Líneas de Negocio</strong>.
-          Esta simplificación es vital para la visualización ejecutiva y la toma de decisiones estratégicas.
+          {t('methodology.skillMapping.reductionDesc', { count: numSkillsNegocio })}
         </p>
       </div>
 
@@ -553,8 +547,8 @@ function SkillsMappingSection({ numSkillsNegocio }: { numSkillsNegocio: number }
         <table className="w-full text-sm">
           <thead className="bg-gray-50">
             <tr>
-              <th className="px-3 py-2 text-left font-semibold">Línea de Negocio</th>
-              <th className="px-3 py-2 text-left font-semibold">Keywords Detectadas (Lógica Fuzzy)</th>
+              <th className="px-3 py-2 text-left font-semibold">{t('methodology.skillMapping.businessLine')}</th>
+              <th className="px-3 py-2 text-left font-semibold">{t('methodology.skillMapping.keywords')}</th>
             </tr>
           </thead>
           <tbody className="divide-y divide-slate-100">
@@ -575,34 +569,33 @@ function SkillsMappingSection({ numSkillsNegocio }: { numSkillsNegocio: number }
       </div>
 
       <p className="text-xs text-gray-500 mt-3 italic">
-        💡 El mapeo utiliza lógica fuzzy para clasificar automáticamente cada skill técnico
-        según las keywords detectadas en su nombre. Los skills no clasificados se asignan a "Customer Service".
+        💡 {t('methodology.skillMapping.fuzzyLogicNote')}
       </p>
     </div>
   );
 }
 
-function GuaranteesSection() {
+function GuaranteesSection({ t }: { t: any }) {
   const guarantees = [
     {
       icon: '✓',
-      title: '100% Trazabilidad',
-      desc: 'Todos los registros conservados (soft delete)'
+      title: t('methodology.quality.traceability'),
+      desc: t('methodology.quality.traceabilityDesc')
     },
     {
       icon: '✓',
-      title: 'Fórmulas Documentadas',
-      desc: 'Cada KPI tiene metodología auditable'
+      title: t('methodology.quality.formulas'),
+      desc: t('methodology.quality.formulasDesc')
     },
     {
       icon: '✓',
-      title: 'Reconciliación Financiera',
-      desc: 'Dataset original disponible para auditoría'
+      title: t('methodology.quality.reconciliation'),
+      desc: t('methodology.quality.reconciliationDesc')
     },
     {
       icon: '✓',
-      title: 'Metodología Replicable',
-      desc: 'Proceso reproducible para actualizaciones'
+      title: t('methodology.quality.replicable'),
+      desc: t('methodology.quality.replicableDesc')
     }
   ];
 
@@ -610,7 +603,7 @@ function GuaranteesSection() {
     <div>
       <h3 className="text-lg font-semibold mb-4 flex items-center gap-2">
         <BadgeCheck className="w-5 h-5 text-green-600" />
-        Garantías de Calidad
+        {t('methodology.quality.title')}
       </h3>
 
       <div className="grid grid-cols-2 gap-3">
@@ -631,6 +624,8 @@ function GuaranteesSection() {
 // ========== COMPONENTE PRINCIPAL ==========
 
 export function MetodologiaDrawer({ isOpen, onClose, data }: MetodologiaDrawerProps) {
+  const { t } = useTranslation();
+
   // Calcular datos del resumen desde AnalysisData
   const totalRegistros = data.heatmapData?.reduce((sum, h) => sum + h.volume, 0) || 0;
   const totalCost = data.heatmapData?.reduce((sum, h) => sum + (h.annual_cost || 0), 0) || 0;
@@ -665,8 +660,8 @@ export function MetodologiaDrawer({ isOpen, onClose, data }: MetodologiaDrawerPr
     mesesHistorico,
     periodo: data.dateRange
       ? `${data.dateRange.min} - ${data.dateRange.max}`
-      : 'Enero - Diciembre 2025',
-    fuente: data.source === 'backend' ? 'Genesys Cloud CX' : 'Dataset cargado',
+      : t('methodology.defaultPeriod'),
+    fuente: data.source === 'backend' ? t('methodology.sourceGenesys') : t('methodology.sourceDataset'),
     taxonomia: {
       valid: 94.2,
       noise: 3.1,
@@ -686,17 +681,14 @@ export function MetodologiaDrawer({ isOpen, onClose, data }: MetodologiaDrawerPr
 
   const handleDownloadPDF = () => {
     // Por ahora, abrir una URL placeholder o mostrar alert
-    alert('Funcionalidad de descarga PDF en desarrollo. El documento estará disponible próximamente.');
+    alert(t('methodology.pdfDevelopment'));
     // En producción: window.open('/documents/Beyond_Diagnostic_Protocolo_Datos.pdf', '_blank');
   };
 
   const formatDate = (): string => {
     const now = new Date();
-    const months = [
-      'Enero', 'Febrero', 'Marzo', 'Abril', 'Mayo', 'Junio',
-      'Julio', 'Agosto', 'Septiembre', 'Octubre', 'Noviembre', 'Diciembre'
-    ];
-    return `${months[now.getMonth()]} ${now.getFullYear()}`;
+    const monthKey = `methodology.months.${['january', 'february', 'march', 'april', 'may', 'june', 'july', 'august', 'september', 'october', 'november', 'december'][now.getMonth()]}`;
+    return `${t(monthKey)} ${now.getFullYear()}`;
   };
 
   return (
@@ -724,7 +716,7 @@ export function MetodologiaDrawer({ isOpen, onClose, data }: MetodologiaDrawerPr
             <div className="sticky top-0 bg-white border-b border-slate-200 px-6 py-4 flex justify-between items-center flex-shrink-0">
               <div className="flex items-center gap-2">
                 <ShieldCheck className="text-green-600 w-6 h-6" />
-                <h2 className="text-lg font-bold text-slate-800">Metodología de Transformación de Datos</h2>
+                <h2 className="text-lg font-bold text-slate-800">{t('methodology.fullTitle')}</h2>
               </div>
               <button
                 onClick={onClose}
@@ -736,18 +728,19 @@ export function MetodologiaDrawer({ isOpen, onClose, data }: MetodologiaDrawerPr
 
             {/* Body - Scrollable */}
             <div className="flex-1 overflow-y-auto p-6 space-y-6">
-              <DataSummarySection data={dataSummary} />
-              <PipelineSection />
-              <SkillsMappingSection numSkillsNegocio={dataSummary.kpis.skillsNegocio} />
-              <TaxonomySection data={dataSummary.taxonomia} />
-              <KPIRedefinitionSection kpis={dataSummary.kpis} />
+              <DataSummarySection data={dataSummary} t={t} />
+              <PipelineSection t={t} />
+              <SkillsMappingSection numSkillsNegocio={dataSummary.kpis.skillsNegocio} t={t} />
+              <TaxonomySection data={dataSummary.taxonomia} t={t} />
+              <KPIRedefinitionSection kpis={dataSummary.kpis} t={t} />
               <CPICalculationSection
                 totalCost={totalCost}
                 totalVolume={totalCostVolume}
                 costPerHour={data.staticConfig?.cost_per_hour || 20}
+                t={t}
               />
-              <BeforeAfterSection kpis={dataSummary.kpis} />
-              <GuaranteesSection />
+              <BeforeAfterSection kpis={dataSummary.kpis} t={t} />
+              <GuaranteesSection t={t} />
             </div>
 
             {/* Footer */}
@@ -758,10 +751,10 @@ export function MetodologiaDrawer({ isOpen, onClose, data }: MetodologiaDrawerPr
                   className="flex items-center gap-2 px-4 py-2 bg-[#6D84E3] text-white rounded-lg hover:bg-[#5A70C7] transition-colors text-sm font-medium"
                 >
                   <Download className="w-4 h-4" />
-                  Descargar Protocolo Completo (PDF)
+                  {t('methodology.downloadProtocol')}
                 </button>
                 <span className="text-xs text-gray-500">
-                  Beyond Diagnosis - Data Strategy Unit │ Certificado: {formatDate()}
+                  {t('methodology.certificate', { date: formatDate() })}
                 </span>
               </div>
             </div>
diff --git a/frontend/locales/en.json b/frontend/locales/en.json
index ff3ebbc..0461a4f 100644
--- a/frontend/locales/en.json
+++ b/frontend/locales/en.json
@@ -713,6 +713,10 @@
     "monthsHistory": "Months of history",
     "sourceSystem": "Source system",
     "periodRange": "Period: {{period}}",
+    "defaultPeriod": "January - December 2025",
+    "sourceGenesys": "Genesys Cloud CX",
+    "sourceDataset": "Loaded dataset",
+    "pdfDevelopment": "PDF download functionality under development. The document will be available soon.",
     "pipeline": {
       "title": "Transformation Pipeline",
       "description": "Modular 3-layer architecture to ensure traceability and scalability.",
@@ -771,6 +775,21 @@
       "howCalculate": "How is Total Cost calculated?",
       "costEquals": "Cost ="
     },
+    "cpi": {
+      "description": "CPI is calculated by dividing <strong>total cost</strong> by <strong>interaction volume</strong>. Total cost includes <em>all</em> interactions (noise, zombie, and valid) because all are billed, and applies a productivity factor of {{productivity}}%.",
+      "volume": "Volume",
+      "ahtExplanation": "The <strong>AHT</strong> is in seconds, converted to hours by dividing by 3600. Includes all interactions that generate cost (noise + zombie + valid). Only abandons are excluded because they don't consume agent time.",
+      "hourlyRate": "Agent Hourly Rate (Fully Loaded)",
+      "configuredValue": "Configured value: €{{value}}/h",
+      "includesAllCosts": "This value was configured in the data input screen and should include all costs associated with the agent:",
+      "cost1": "Agent gross salary",
+      "cost2": "Social security costs",
+      "cost3": "Software licenses",
+      "cost4": "Infrastructure and workstation",
+      "cost5": "Supervision and QA",
+      "cost6": "Training and overhead",
+      "adjustNote": "If you need to adjust this value, you can return to the data input screen and modify it."
+    },
     "impact": {
       "title": "Transformation Impact",
       "metric": "Metric",
@@ -784,12 +803,18 @@
       "revealsDemand": "Reveals hidden failed demand",
       "detectsFrustration": "Detects real customer frustration",
       "executiveVision": "Actionable executive vision",
-      "reflectsPerformance": "KPIs reflect real performance"
+      "reflectsPerformance": "KPIs reflect real performance",
+      "technicalSkills": "{{count}} technical",
+      "businessLines": "{{count}} business lines",
+      "distorted": "Distorted",
+      "clean": "Clean",
+      "withoutTransformation": "Without this transformation,",
+      "wrongInvestments": "automation decisions would be based on incorrect data, generating investments in the wrong processes."
     },
     "skillMapping": {
       "title": "Skills to Business Lines Mapping",
       "simplificationApplied": "Simplification applied",
-      "reductionDesc": "Reduced complexity from 980 technical skills to {{count}} actionable Business Lines using fuzzy keyword logic.",
+      "reductionDesc": "Reduced complexity from 980 technical skills to {{count}} Business Lines. This simplification is vital for executive visualization and strategic decision making.",
       "businessLine": "Business Line",
       "keywords": "Detected Keywords (Fuzzy Logic)",
       "baggage": "Baggage & Handling",
@@ -799,7 +824,8 @@
       "changes": "Changes & Post-Sales",
       "digital": "Digital Support",
       "customer": "Customer Service",
-      "internal": "Internal / Backoffice"
+      "internal": "Internal / Backoffice",
+      "fuzzyLogicNote": "The mapping uses fuzzy logic to automatically classify each technical skill based on keywords detected in its name. Unclassified skills are assigned to \"Customer Service\"."
     },
     "quality": {
       "title": "Quality Guarantees",
diff --git a/frontend/locales/es.json b/frontend/locales/es.json
index 6ffce26..3f8147d 100644
--- a/frontend/locales/es.json
+++ b/frontend/locales/es.json
@@ -713,6 +713,10 @@
     "monthsHistory": "Meses de histórico",
     "sourceSystem": "Sistema origen",
     "periodRange": "Periodo: {{period}}",
+    "defaultPeriod": "Enero - Diciembre 2025",
+    "sourceGenesys": "Genesys Cloud CX",
+    "sourceDataset": "Dataset cargado",
+    "pdfDevelopment": "Funcionalidad de descarga PDF en desarrollo. El documento estará disponible próximamente.",
     "pipeline": {
       "title": "Pipeline de Transformación",
       "description": "Arquitectura modular de 3 capas para garantizar trazabilidad y escalabilidad.",
@@ -771,6 +775,21 @@
       "howCalculate": "¿Cómo se calcula el Coste Total?",
       "costEquals": "Coste ="
     },
+    "cpi": {
+      "description": "El CPI se calcula dividiendo el <strong>coste total</strong> entre el <strong>volumen de interacciones</strong>. El coste total incluye <em>todas</em> las interacciones (noise, zombie y válidas) porque todas se facturan, y aplica un factor de productividad del {{productivity}}%.",
+      "volume": "Volumen",
+      "ahtExplanation": "El <strong>AHT</strong> está en segundos, se convierte a horas dividiendo por 3600. Incluye todas las interacciones que generan coste (noise + zombie + válidas). Solo se excluyen los abandonos porque no consumen tiempo de agente.",
+      "hourlyRate": "Coste por Hora del Agente (Fully Loaded)",
+      "configuredValue": "Valor introducido: €{{value}}/h",
+      "includesAllCosts": "Este valor fue configurado en la pantalla de entrada de datos y debe incluir todos los costes asociados al agente:",
+      "cost1": "Salario bruto del agente",
+      "cost2": "Costes de seguridad social",
+      "cost3": "Licencias de software",
+      "cost4": "Infraestructura y puesto",
+      "cost5": "Supervisión y QA",
+      "cost6": "Formación y overhead",
+      "adjustNote": "Si necesita ajustar este valor, puede volver a la pantalla de entrada de datos y modificarlo."
+    },
     "impact": {
       "title": "Impacto de la Transformación",
       "metric": "Métrica",
@@ -784,12 +803,18 @@
       "revealsDemand": "Revela demanda fallida oculta",
       "detectsFrustration": "Detecta frustración cliente real",
       "executiveVision": "Visión ejecutiva accionable",
-      "reflectsPerformance": "KPIs reflejan desempeño real"
+      "reflectsPerformance": "KPIs reflejan desempeño real",
+      "technicalSkills": "{{count}} técnicos",
+      "businessLines": "{{count}} líneas negocio",
+      "distorted": "Distorsionado",
+      "clean": "Limpio",
+      "withoutTransformation": "Sin esta transformación,",
+      "wrongInvestments": "las decisiones de automatización se basarían en datos incorrectos, generando inversiones en los procesos equivocados."
     },
     "skillMapping": {
       "title": "Mapeo de Skills a Líneas de Negocio",
       "simplificationApplied": "Simplificación aplicada",
-      "reductionDesc": "Se redujo la complejidad de 980 skills técnicos a {{count}} Líneas de Negocio accionables mediante lógica fuzzy de palabras clave.",
+      "reductionDesc": "Se redujo la complejidad de 980 skills técnicos a {{count}} Líneas de Negocio. Esta simplificación es vital para la visualización ejecutiva y la toma de decisiones estratégicas.",
       "businessLine": "Línea de Negocio",
       "keywords": "Keywords Detectadas (Lógica Fuzzy)",
       "baggage": "Baggage & Handling",
@@ -799,7 +824,8 @@
       "changes": "Changes & Post-Sales",
       "digital": "Digital Support",
       "customer": "Customer Service",
-      "internal": "Internal / Backoffice"
+      "internal": "Internal / Backoffice",
+      "fuzzyLogicNote": "El mapeo utiliza lógica fuzzy para clasificar automáticamente cada skill técnico según las keywords detectadas en su nombre. Los skills no clasificados se asignan a \"Customer Service\"."
     },
     "quality": {
       "title": "Garantías de Calidad",