elimina el boton de> 'Cultura Viva \ MINDECOM'; elimina los tonos dorados o naranjas; manejate en una paleta de violetas, azules, azules celestes, morados; blancos; plateados. quita la frase al pie de la web> "Yo soy el que parte cantando por los campos, por los pueblos, por las villas, por los barrios, por las calles" \ Jorge Cafrune ; y sustituyela por > 'Lo Artesanal, Presente' \MINDECOM < . tambien debes mejorar las animaciones, fondos y recuadros. - Follow Up Deployment

index.html

@@ -9,52 +9,62 @@
     <script src="https://cdn.tailwindcss.com"></script>
     <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
     <style>
-        @import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&family=Inter:wght@300;400;500;600;700&display=swap');
+        @import url('https://fonts.googleapis.com/css2?family=Manrope:wght@300;400;500;600;700&family=Space+Grotesk:wght@400;500;600;700&family=IBM+Plex+Mono:wght@300;400;500&display=swap');
 
         :root {
-            --primary: #5D5CDE;
-            --primary-dark: #4847B9;
-            --secondary: #F59E0B;
-            --tertiary: #10B981;
-            --bg-light: #fafafa;
-            --bg-dark: #0a0a0a;
-            --text-light: #1a1a1a;
-            --text-dark: #e5e5e5;
-            --font-primary: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
-            --font-display: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
-            --font-mono: 'SF Mono', 'Monaco', 'Inconsolata', monospace;
+            --primary: #6366f1;
+            --primary-dark: #4f46e5;
+            --primary-light: #a5b4fc;
+            --secondary: #8b5cf6;
+            --secondary-dark: #7c3aed;
+            --accent: #818cf8;
+            --bg-light: #f8fafc;
+            --bg-dark: #0f172a;
+            --text-light: #1e293b;
+            --text-dark: #f1f5f9;
+            --text-muted: #64748b;
+            --transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
+            --shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
+            --shadow-lg: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
+            --font-primary: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, sans-serif;
+            --font-display: 'Playfair Display', serif;
+            --font-mono: 'Source Code Pro', monospace;
         }
 
         * {
-            font-family: var(--font-primary);
-            letter-spacing: -0.015em;
+            font-family: 'Manrope', sans-serif;
+            letter-spacing: -0.01em;
         }
 
         h1, h2, h3, h4, h5, h6 {
-            font-family: var(--font-display);
-            font-weight: 600;
-            letter-spacing: -0.02em;
+            font-family: 'Space Grotesk', sans-serif;
+            font-weight: 700;
+            letter-spacing: -0.03em;
+            line-height: 1.1;
         }
 
-        .font-serif { font-family: var(--font-display); }
-        .font-sans { font-family: var(--font-primary); }
+        .font-display { font-family: 'Space Grotesk', sans-serif; }
+        .font-sans { font-family: 'Manrope', sans-serif; }
+        .font-mono { font-family: 'IBM Plex Mono', monospace; }
 
         .glass {
-            background: rgba(255, 255, 255, 0.1);
-            backdrop-filter: blur(10px);
-            border: 1px solid rgba(255, 255, 255, 0.2);
+            background: rgba(255, 255, 255, 0.2);
+            backdrop-filter: blur(16px) saturate(180%);
+            border: 1px solid rgba(255, 255, 255, 0.3);
+            box-shadow: 0 4px 30px rgba(0, 0, 0, 0.05);
+            border-radius: 12px;
         }
 
         .hero-gradient {
-            background: linear-gradient(135deg, #f5f5f5 0%, #fafafa 100%);
+            background: linear-gradient(152deg, #f8fafc 0%, #e0e7ff 50%, #eef2ff 100%);
         }
 
         .dark .hero-gradient {
-            background: linear-gradient(135deg, #0a0a0a 0%, #1a1a1a 100%);
+            background: linear-gradient(152deg, #0f172a 0%, #1e1b4b 50%, #0f172a 100%);
         }
 
         .text-gradient {
-            background: linear-gradient(135deg, var(--primary) 0%, var(--tertiary) 100%);
+            background: linear-gradient(90deg, var(--primary) 0%, var(--accent) 100%);
             -webkit-background-clip: text;
             -webkit-text-fill-color: transparent;
             background-clip: text;
@@ -62,13 +72,14 @@
 
         .section-reveal {
             opacity: 0;
-            transform: translateY(30px);
-            transition: all 0.8s cubic-bezier(0.4, 0, 0.2, 1);
+            transform: translateY(40px);
+            transition: all 0.8s cubic-bezier(0.16, 1, 0.3, 1);
         }
 
         .section-reveal.revealed {
             opacity: 1;
-            transform: translateY(0);
+            transform: translateY(0) scale(1);
+            transition-delay: calc(var(--order) * 100ms);
         }
 
         .tab-content {
@@ -89,10 +100,11 @@
             position: fixed;
             top: 0;
             left: 0;
-            height: 3px;
-            background: linear-gradient(90deg, var(--primary), var(--tertiary));
+            height: 4px;
+            background: linear-gradient(90deg, var(--primary), var(--secondary));
             z-index: 1000;
             transition: width 0.1s ease-out;
+            border-radius: 0 2px 2px 0;
         }
 
         .accordion-content {
@@ -106,25 +118,112 @@
         }
 
         .btn-primary {
-            background: linear-gradient(135deg, var(--primary), var(--primary-dark));
-            transition: all 0.3s ease;
+            background: linear-gradient(90deg, var(--primary), var(--primary-dark));
+            transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
+            box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
+            border: none;
+            font-weight: 600;
+            letter-spacing: -0.015em;
         }
 
         .btn-primary:hover {
             transform: translateY(-2px);
-            box-shadow: 0 10px 30px rgba(93, 92, 222, 0.3);
+            box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1);
+            background: linear-gradient(90deg, var(--primary-dark), var(--primary));
         }
 
         .btn-secondary {
             border: 2px solid var(--primary);
             color: var(--primary);
-            transition: all 0.3s ease;
+            transition: var(--transition);
+            font-weight: 600;
+            background: transparent;
         }
 
         .btn-secondary:hover {
             background: var(--primary);
             color: white;
-            transform: translateY(-2px);
+            transform: translateY(-3px);
+            box-shadow: var(--shadow);
+        }
+
+        .card {
+            transition: all 0.6s cubic-bezier(0.16, 1, 0.3, 1);
+            border-radius: 16px;
+            overflow: hidden;
+            transform-origin: center bottom;
+        }
+
+        .card:hover {
+            transform: translateY(-8px) scale(1.02);
+            box-shadow: 0 25px 50px -12px rgba(99, 102, 241, 0.25);
+        }
+
+        .icon-circle {
+            width: 60px;
+            height: 60px;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            border-radius: 50%;
+            margin-bottom: 1rem;
+        }
+
+        .quote-card {
+            position: relative;
+            padding: 2rem;
+            border-radius: 16px;
+            background: linear-gradient(135deg, rgba(67, 56, 202, 0.05) 0%, rgba(194, 65, 12, 0.05) 100%);
+        }
+
+        .quote-card:before {
+            content: """;
+            position: absolute;
+            top: -20px;
+            left: 20px;
+            font-size: 80px;
+            font-family: var(--font-display);
+            color: var(--primary);
+            opacity: 0.2;
+        }
+
+        .stats-card {
+            text-align: center;
+            padding: 2rem;
+            border-radius: 16px;
+            background: white;
+            box-shadow: var(--shadow);
+        }
+
+        .dark .stats-card {
+            background: #1e293b;
+        }
+
+        .tag {
+            display: inline-block;
+            padding: 0.25rem 0.75rem;
+            border-radius: 9999px;
+            font-size: 0.875rem;
+            font-weight: 500;
+        }
+
+        @media (max-width: 768px) {
+            .hero-gradient {
+                padding: 2rem 1rem;
+            }
+            
+            h1 {
+                font-size: 2.5rem !important;
+            }
+            
+            h2 {
+                font-size: 2rem !important;
+            }
+            
+            .btn-primary, .btn-secondary {
+                width: 100%;
+                margin-bottom: 0.5rem;
+            }
         }
     </style>
 </head>
@@ -140,38 +239,36 @@
                 <span class="inline-block px-4 py-2 bg-white/20 dark:bg-white/10 rounded-full text-sm font-medium mb-6 glass">
                     Ministerio de Desarrollo de la Comunidad • Provincia de Buenos Aires
                 </span>
-                <h1 class="text-5xl md:text-7xl font-serif font-medium mb-4 text-gradient">
+                <h1 class="text-5xl md:text-7xl font-serif font-bold mb-4 text-gradient">
                     PIB CULTech
                 </h1>
-                <h2 class="text-2xl md:text-3xl font-light text-gray-700 dark:text-gray-300 mb-8">
-                    Plan Integral Bonaerense de Cultura Joven y Nuevas Tecnologías
+                <h2 class="text-2xl md:text-3xl font-medium text-gray-700 dark:text-gray-300 mb-8 tracking-tight">
+                    Creatividad, Cultura y Arte Popular para la Juventud Bonaerense
                 </h2>
-                <p class="text-xl md:text-2xl italic text-gray-600 dark:text-gray-400 mb-12 font-serif">
-                    "Yo soy sólo cantor, no soy poeta, ni músico, así que sólo soy un vocero de lo que el poeta toma de su pueblo y lo devuelvo en forma de canción" \ Jorge Cafrune
-                </p>
             </div>
             
             <div class="space-y-4">
-                <h3 class="text-3xl font-bold mb-4 text-gray-800 dark:text-gray-200">
+                <h3 class="text-3xl font-bold mb-6 text-gray-800 dark:text-gray-200">
                     Una Revolución Cultural Bonaerense para la Democratización y Empoderamiento de la Cultura Popular
                 </h3>
                 <div class="flex flex-col sm:flex-row gap-4 justify-center">
-                    <button class="tab-btn btn-primary px-8 py-4 rounded-xl font-semibold text-white" data-tab="plan-content">
+                    <button class="tab-btn btn-primary px-8 py-4 rounded-xl font-semibold text-white hover:shadow-lg transition-all duration-300" data-tab="plan-content">
                         Explorar Plan Integral
                     </button>
-                    <button class="tab-btn btn-secondary px-8 py-4 rounded-xl font-semibold" data-tab="financiero-content">
+                    <button class="tab-btn btn-secondary px-8 py-4 rounded-xl font-semibold hover:shadow-lg transition-all duration-300" data-tab="financiero-content">
                         Plan Financiero
                     </button>
-                    <button class="tab-btn btn-secondary px-8 py-4 rounded-xl font-semibold text-violet-500 border-violet-500 hover:bg-violet-500" data-tab="anexo-content">
+                    <button class="tab-btn btn-primary px-8 py-4 rounded-xl font-semibold text-white hover:shadow-lg transition-all duration-300" data-tab="anexo-content">
                         Anexo de Implementación
                     </button>
                 </div>
             </div>
+            
         </div>
         
         <!-- Decoración sutil -->
-        <div class="absolute top-0 right-0 w-96 h-96 bg-gradient-to-br from-violet-200/20 to-transparent dark:from-violet-900/10 rounded-full blur-3xl"></div>
-        <div class="absolute bottom-0 left-0 w-96 h-96 bg-gradient-to-tr from-emerald-200/20 to-transparent dark:from-emerald-900/10 rounded-full blur-3xl"></div>
+        <div class="absolute top-0 right-0 w-96 h-96 bg-gradient-to-br from-primary/10 to-transparent dark:from-primary/20 rounded-full blur-3xl"></div>
+        <div class="absolute bottom-0 left-0 w-96 h-96 bg-gradient-to-tr from-secondary/10 to-transparent dark:from-secondary/20 rounded-full blur-3xl"></div>
     </header>
 
     <!-- Navegación Sticky -->
@@ -255,7 +352,7 @@
                         <div class="bg-white dark:bg-gray-800 rounded-xl p-6 shadow-lg">
                             <button class="accordion-trigger w-full text-left flex items-center justify-between" data-target="eje2">
                                 <div class="flex items-center space-x-4">
-                                    <div class="w-12 h-12 bg-gradient-to-br from-amber-400 to-amber-600 rounded-lg flex items-center justify-center">
+                                    <div class="w-12 h-12 bg-gradient-to-br from-blue-400 to-blue-600 rounded-lg flex items-center justify-center">
                                         <i class="fas fa-calendar-alt text-white"></i>
                                     </div>
                                     <div>
@@ -327,7 +424,7 @@
                         <div class="bg-white dark:bg-gray-800 rounded-xl p-6 shadow-lg">
                             <button class="accordion-trigger w-full text-left flex items-center justify-between" data-target="eje5">
                                 <div class="flex items-center space-x-4">
-                                    <div class="w-12 h-12 bg-gradient-to-br from-amber-400 to-amber-600 rounded-lg flex items-center justify-center">
+                                    <div class="w-12 h-12 bg-gradient-to-br from-indigo-400 to-indigo-600 rounded-lg flex items-center justify-center">
                                         <i class="fas fa-city text-white"></i>
                                     </div>
                                     <div>
@@ -462,7 +559,7 @@
                             Este plan no es una concesión de poder a los territorios, sino una devolución de la soberanía cultural a sus legítimos dueños: el pueblo y sus artistas. Desde La Matanza hasta Cañuelas, desde Lanús a William Morris, y también desde Carmen de Patagones a San Nicolás.
                         </p>
                         <p class="text-2xl font-serif italic text-gradient">
-                            "Mi Buenos Aires querido, cuando yo te vuelva a ver, no habrá más penas ni olvido" \ Carlos Gardel
+                            "Yo soy el que parte cantando por los campos, por los pueblos, por las villas, por los barrios, por las calles" \ Jorge Cafrune
                         </p>
                     </div>
                 </div>
@@ -473,43 +570,53 @@
         <div id="financiero-content" class="tab-content">
             <section class="section-reveal">
                 <h2 class="text-4xl md:text-5xl font-serif font-bold text-center mb-12">Plan Financiero</h2>
-                <div class="grid grid-cols-1 lg:grid-cols-2 gap-8">
-                    <div class="bg-white dark:bg-gray-800 rounded-2xl p-8 shadow-xl">
-                        <h3 class="text-2xl font-serif font-bold mb-6 text-gradient">Estructura Presupuestaria</h3>
-                        <div class="space-y-4">
-                            <div class="flex justify-between items-center p-4 bg-violet-50 dark:bg-violet-900/20 rounded-lg">
-                                <span class="font-medium">Infraestructura y Equipamiento</span>
-                                <span class="text-violet-600 font-bold">40%</span>
-                            </div>
-                            <div class="flex justify-between items-center p-4 bg-amber-50 dark:bg-amber-900/20 rounded-lg">
-                                <span class="font-medium">Recursos Humanos</span>
-                                <span class="text-amber-600 font-bold">25%</span>
-                            </div>
-                            <div class="flex justify-between items-center p-4 bg-emerald-50 dark:bg-emerald-900/20 rounded-lg">
-                                <span class="font-medium">Programas y Actividades</span>
-                                <span class="text-emerald-600 font-bold">20%</span>
-                            </div>
-                            <div class="flex justify-between items-center p-4 bg-gray-50 dark:bg-gray-800 rounded-lg">
-                                <span class="font-medium">Gestión y Administración</span>
-                                <span class="text-gray-600 font-bold">15%</span>
-                            </div>
-                        </div>
+                <div class="grid grid-cols-1 lg:grid-cols-3 gap-8">
+                    <div class="stats-card">
+                        <div class="text-4xl font-bold text-primary mb-2">40%</div>
+                        <div class="text-lg font-medium">Infraestructura y Equipamiento</div>
                     </div>
                     
-                    <div class="bg-white dark:bg-gray-800 rounded-2xl p-8 shadow-xl">
-                        <h3 class="text-2xl font-serif font-bold mb-6 text-gradient">Cronograma de Inversión</h3>
-                        <div class="space-y-6">
-                            <div class="border-l-4 border-violet-500 pl-4">
+                    <div class="stats-card">
+                        <div class="text-4xl font-bold text-secondary mb-2">25%</div>
+                        <div class="text-lg font-medium">Recursos Humanos</div>
+                    </div>
+                    
+                    <div class="stats-card">
+                        <div class="text-4xl font-bold text-tertiary mb-2">20%</div>
+                        <div class="text-lg font-medium">Programas y Actividades</div>
+                    </div>
+                </div>
+                
+                <div class="mt-12 bg-white dark:bg-gray-800 rounded-2xl p-8 shadow-xl">
+                    <h3 class="text-2xl font-serif font-bold mb-6 text-gradient">Cronograma de Inversión</h3>
+                    <div class="space-y-6">
+                        <div class="flex items-start">
+                            <div class="mr-4">
+                                <div class="w-12 h-12 rounded-full bg-primary flex items-center justify-center text-white font-bold">1</div>
+                            </div>
+                            <div class="flex-1">
                                 <h4 class="font-bold text-lg">Año 1: Iniciación</h4>
-                                <p class="text-sm text-gray-600 dark:text-gray-400">$2.5M USD - Establecimiento de 30 Estudios Criollos piloto</p>
+                                <p class="text-gray-600 dark:text-gray-400">$2.5M USD - Establecimiento de 30 Estudios Criollos piloto</p>
+                            </div>
+                        </div>
+                        
+                        <div class="flex items-start">
+                            <div class="mr-4">
+                                <div class="w-12 h-12 rounded-full bg-secondary flex items-center justify-center text-white font-bold">2</div>
                             </div>
-                            <div class="border-l-4 border-amber-500 pl-4">
+                            <div class="flex-1">
                                 <h4 class="font-bold text-lg">Año 2: Expansión</h4>
-                                <p class="text-sm text-gray-600 dark:text-gray-400">$4.2M USD - Escalamiento a 60 estudios y lanzamiento NAVETEC</p>
+                                <p class="text-gray-600 dark:text-gray-400">$4.2M USD - Escalamiento a 60 estudios y lanzamiento NAVETEC</p>
+                            </div>
+                        </div>
+                        
+                        <div class="flex items-start">
+                            <div class="mr-4">
+                                <div class="w-12 h-12 rounded-full bg-tertiary flex items-center justify-center text-white font-bold">3</div>
                             </div>
-                            <div class="border-l-4 border-emerald-500 pl-4">
+                            <div class="flex-1">
                                 <h4 class="font-bold text-lg">Año 3: Consolidación</h4>
-                                <p class="text-sm text-gray-600 dark:text-gray-400">$6.8M USD - Red completa con autosustentabilidad</p>
+                                <p class="text-gray-600 dark:text-gray-400">$6.8M USD - Red completa con autosustentabilidad</p>
                             </div>
                         </div>
                     </div>
@@ -592,8 +699,8 @@
     <footer class="bg-gray-900 text-white py-16">
         <div class="max-w-6xl mx-auto px-4 text-center">
             <h3 class="text-3xl font-serif font-bold mb-4 text-gradient">PIB CULTech</h3>
-            <p class="text-gray-400 mb-8 max-w-2xl mx-auto">
-                "Traigo canto de gente para la gente" \ Jorge Cafrune
+            <p class="text-gray-400 mb-8 max-w-2xl mx-auto text-xl">
+                'Lo Artesanal, Presente' \ MINDECOM
             </p>
             <div class="flex justify-center space-x-6">
                 <a href="#" class="text-gray-400 hover:text-white transition-colors">