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
e1b9ccf
verified
| <html lang="es" class="scroll-smooth"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>PIB CULTech – Plan Integral Bonaerense de Cultura Joven</title> | |
| <meta name="description" content="Plan Integral Bonaerense de Cultura Joven y Nuevas Tecnologías\Democratizando el acceso a la cultura desde los territorios"> | |
| <meta name="keywords" content="cultura, juventud, tecnología, Buenos Aires, arte popular, creatividad"> | |
| <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=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: #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: 'Manrope', sans-serif; | |
| letter-spacing: -0.01em; | |
| } | |
| h1, h2, h3, h4, h5, h6 { | |
| font-family: 'Space Grotesk', sans-serif; | |
| font-weight: 700; | |
| letter-spacing: -0.03em; | |
| line-height: 1.1; | |
| } | |
| .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.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(152deg, #f8fafc 0%, #e0e7ff 50%, #eef2ff 100%); | |
| } | |
| .dark .hero-gradient { | |
| background: linear-gradient(152deg, #0f172a 0%, #1e1b4b 50%, #0f172a 100%); | |
| } | |
| .text-gradient { | |
| background: linear-gradient(90deg, var(--primary) 0%, var(--accent) 100%); | |
| -webkit-background-clip: text; | |
| -webkit-text-fill-color: transparent; | |
| background-clip: text; | |
| } | |
| .section-reveal { | |
| opacity: 0; | |
| transform: translateY(40px); | |
| transition: all 0.8s cubic-bezier(0.16, 1, 0.3, 1); | |
| } | |
| .section-reveal.revealed { | |
| opacity: 1; | |
| transform: translateY(0) scale(1); | |
| transition-delay: calc(var(--order) * 100ms); | |
| } | |
| .tab-content { | |
| display: none; | |
| } | |
| .tab-content.active { | |
| display: block; | |
| animation: fadeIn 0.6s ease-out; | |
| } | |
| @keyframes fadeIn { | |
| from { opacity: 0; transform: translateY(20px); } | |
| to { opacity: 1; transform: translateY(0); } | |
| } | |
| .scroll-indicator { | |
| position: fixed; | |
| top: 0; | |
| left: 0; | |
| 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 { | |
| max-height: 0; | |
| overflow: hidden; | |
| transition: max-height 0.4s ease-out, padding 0.3s ease; | |
| } | |
| .accordion-content.active { | |
| max-height: 2000px; | |
| } | |
| .btn-primary { | |
| 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 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: var(--transition); | |
| font-weight: 600; | |
| background: transparent; | |
| } | |
| .btn-secondary:hover { | |
| background: var(--primary); | |
| color: white; | |
| 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> | |
| <body class="font-sans bg-gray-50 dark:bg-gray-900 text-gray-900 dark:text-gray-100 transition-colors duration-300"> | |
| <!-- Scroll Indicator --> | |
| <div class="scroll-indicator" id="scrollIndicator"></div> | |
| <!-- Hero Minimalista --> | |
| <header class="hero-gradient min-h-screen flex items-center justify-center relative overflow-hidden"> | |
| <div class="max-w-4xl mx-auto px-4 text-center relative z-10"> | |
| <div class="mb-8"> | |
| <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-bold mb-4 text-gradient"> | |
| PIB CULTech | |
| </h1> | |
| <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> | |
| </div> | |
| <div class="space-y-4"> | |
| <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 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 hover:shadow-lg transition-all duration-300" data-tab="financiero-content"> | |
| Plan Financiero | |
| </button> | |
| <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-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 --> | |
| <nav class="sticky top-0 z-50 bg-white/80 dark:bg-gray-900/80 backdrop-blur-sm border-b border-gray-200 dark:border-gray-700"> | |
| <div class="max-w-6xl mx-auto px-4 py-4"> | |
| <div class="flex items-center justify-between"> | |
| <a href="#" class="text-xl font-bold text-gradient">PIB CULTech</a> | |
| <div class="hidden md:flex space-x-1"> | |
| <button class="tab-btn px-6 py-2 rounded-lg text-sm font-medium active" data-tab="plan-content">Plan Integral</button> | |
| <button class="tab-btn px-6 py-2 rounded-lg text-sm font-medium text-gray-600 dark:text-gray-400 hover:text-primary" data-tab="financiero-content">Plan Financiero</button> | |
| <button class="tab-btn px-6 py-2 rounded-lg text-sm font-medium text-gray-600 dark:text-gray-400 hover:text-violet-500" data-tab="anexo-content">Anexo</button> | |
| </div> | |
| </div> | |
| </div> | |
| </nav> | |
| <!-- Contenido Principal --> | |
| <main class="max-w-6xl mx-auto px-4 py-16"> | |
| <!-- Plan Integral --> | |
| <div id="plan-content" class="tab-content active"> | |
| <section class="section-reveal"> | |
| <div class="mb-16"> | |
| <h2 class="text-4xl md:text-5xl font-serif font-bold mb-6 text-center"> | |
| PIB CULTech \ Cultura Joven y Nuevas Tecnologías | |
| </h2> | |
| <p class="text-xl text-center text-gray-600 dark:text-gray-400 max-w-3xl mx-auto mb-12"> | |
| Un ecosistema integral que combina tradición y tecnología, donde artistas independientes, comunidades barriales y nuevas generaciones de creadores trabajan juntos para democratizar el acceso a la cultura y potenciar el talento bonaerense. | |
| </p> | |
| </div> | |
| <!-- Introducción Expandida --> | |
| <div class="section-reveal mb-16"> | |
| <div class="bg-white dark:bg-gray-800 rounded-2xl p-8 md:p-12 shadow-xl"> | |
| <h3 class="text-2xl font-serif font-bold mb-6 text-gradient">Introducción Filosófica</h3> | |
| <div class="prose prose-lg max-w-none"> | |
| <p class="mb-6 text-gray-700 dark:text-gray-300 leading-relaxed"> | |
| La cultura es un derecho fundamental y una herramienta de transformación social. En la Provincia de Buenos Aires, cuna de movimientos culturales que han marcado la identidad nacional, es momento de dar un salto cualitativo hacia un modelo que ponga a los jóvenes creadores en el centro de la escena. | |
| </p> | |
| <p class="mb-6 text-gray-700 dark:text-gray-300 leading-relaxed"> | |
| Este plan abandona los modelos verticales de gestión cultural para construir una red horizontal y participativa. Desde los estudios creativos territoriales hasta las plataformas digitales colaborativas, cada componente está diseñado para que la cultura florezca desde los barrios hacia el mundo. | |
| </p> | |
| <div class="bg-gradient-to-r from-violet-50 to-emerald-50 dark:from-violet-900/20 dark:to-emerald-900/20 p-6 rounded-xl"> | |
| <p class="italic text-lg text-center"> | |
| "Donde hay una necesidad, hay un derecho" \ Eva Perón | |
| </p> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Los 8 Ejes Expandidos --> | |
| <div class="section-reveal mb-16"> | |
| <h3 class="text-3xl font-serif font-bold text-center mb-8">Los 8 Ejes Transformadores</h3> | |
| <div class="space-y-4"> | |
| <!-- Eje 1 --> | |
| <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="eje1"> | |
| <div class="flex items-center space-x-4"> | |
| <div class="w-12 h-12 bg-gradient-to-br from-violet-400 to-violet-600 rounded-lg flex items-center justify-center"> | |
| <i class="fas fa-paint-brush text-white"></i> | |
| </div> | |
| <div> | |
| <h4 class="font-bold text-lg">1. Estudios Criollos \ Red de Talleres de Creación</h4> | |
| <p class="text-sm text-gray-600 dark:text-gray-400">Fábricas vivas de arte popular territorial</p> | |
| </div> | |
| </div> | |
| <i class="fas fa-chevron-down transition-transform"></i> | |
| </button> | |
| <div id="eje1" class="accordion-content mt-4 pl-16"> | |
| <p class="mb-4">Laboratorios territoriales donde lo analógico y lo digital convergen. Cada estudio cuenta con:</p> | |
| <ul class="space-y-2 text-sm"> | |
| <li>• Taller 5.0 con tecnología de última generación</li> | |
| <li>• Programa de mentores artísticos consagrados</li> | |
| <li>• Especialización según identidad territorial</li> | |
| </ul> | |
| </div> | |
| </div> | |
| <!-- Eje 2 --> | |
| <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-blue-400 to-blue-600 rounded-lg flex items-center justify-center"> | |
| <i class="fas fa-calendar-alt text-white"></i> | |
| </div> | |
| <div> | |
| <h4 class="font-bold text-lg">2. NAVETEC \ Centro Cultural Macroferial</h4> | |
| <p class="text-sm text-gray-600 dark:text-gray-400">Epicentro cultural permanente del ecosistema</p> | |
| </div> | |
| </div> | |
| <i class="fas fa-chevron-down transition-transform"></i> | |
| </button> | |
| <div id="eje2" class="accordion-content mt-4 pl-16"> | |
| <p class="mb-4">Un espacio macroferial en terrenos recuperados con:</p> | |
| <ul class="space-y-2 text-sm"> | |
| <li>• Estructuras móviles para eventos dinámicos</li> | |
| <li>• Museo InteractVivo con realidad aumentada</li> | |
| <li>• Laboratorios NGC para desarrollo tecnológico</li> | |
| </ul> | |
| </div> | |
| </div> | |
| <!-- Eje 3 --> | |
| <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="eje3"> | |
| <div class="flex items-center space-x-4"> | |
| <div class="w-12 h-12 bg-gradient-to-br from-emerald-400 to-emerald-600 rounded-lg flex items-center justify-center"> | |
| <i class="fas fa-handshake text-white"></i> | |
| </div> | |
| <div> | |
| <h4 class="font-bold text-lg">3. Territorios Creativos \ Residencias Artísticas</h4> | |
| <p class="text-sm text-gray-600 dark:text-gray-400">Intercambios horizontales entre artistas y comunidades</p> | |
| </div> | |
| </div> | |
| <i class="fas fa-chevron-down transition-transform"></i> | |
| </button> | |
| <div id="eje3" class="accordion-content mt-4 pl-16"> | |
| <p class="mb-4">Programa que supera la lógica colonial con:</p> | |
| <ul class="space-y-2 text-sm"> | |
| <li>• Residencias comunitarias de 1-6 meses</li> | |
| <li>• Intercambios latinoamericanos</li> | |
| <li>• Becas Confluencers para dúos artísticos</li> | |
| </ul> | |
| </div> | |
| </div> | |
| <!-- Eje 4 --> | |
| <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="eje4"> | |
| <div class="flex items-center space-x-4"> | |
| <div class="w-12 h-12 bg-gradient-to-br from-violet-400 to-violet-600 rounded-lg flex items-center justify-center"> | |
| <i class="fas fa-cloud text-white"></i> | |
| </div> | |
| <div> | |
| <h4 class="font-bold text-lg">4. Minga Digital \ Plataforma Cultural</h4> | |
| <p class="text-sm text-gray-600 dark:text-gray-400">Ecosistema digital soberano</p> | |
| </div> | |
| </div> | |
| <i class="fas fa-chevron-down transition-transform"></i> | |
| </button> | |
| <div id="eje4" class="accordion-content mt-4 pl-16"> | |
| <p class="mb-4">Plataforma que conecta, visibiliza y monetiza la producción cultural con:</p> | |
| <ul class="space-y-2 text-sm"> | |
| <li>• Streaming Criollo con algoritmos territoriales</li> | |
| <li>• Marketplace cultural con criptomonedas locales</li> | |
| <li>• Archivo InteractVivo de memoria cultural</li> | |
| </ul> | |
| </div> | |
| </div> | |
| <!-- Eje 5 --> | |
| <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-indigo-400 to-indigo-600 rounded-lg flex items-center justify-center"> | |
| <i class="fas fa-city text-white"></i> | |
| </div> | |
| <div> | |
| <h4 class="font-bold text-lg">5. Malón Cultural \ Transformación del Espacio Público</h4> | |
| <p class="text-sm text-gray-600 dark:text-gray-400">Intervenciones artísticas participativas</p> | |
| </div> | |
| </div> | |
| <i class="fas fa-chevron-down transition-transform"></i> | |
| </button> | |
| <div id="eje5" class="accordion-content mt-4 pl-16"> | |
| <p class="mb-4">Transformación de espacios urbanos con arte comunitario:</p> | |
| <ul class="space-y-2 text-sm"> | |
| <li>• Murales interactivos con AR</li> | |
| <li>• Plazas sonoras permanentes</li> | |
| <li>• Jardines creativos diseñados colaborativamente</li> | |
| </ul> | |
| </div> | |
| </div> | |
| <!-- Eje 6 --> | |
| <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="eje6"> | |
| <div class="flex items-center space-x-4"> | |
| <div class="w-12 h-12 bg-gradient-to-br from-emerald-400 to-emerald-600 rounded-lg flex items-center justify-center"> | |
| <i class="fas fa-seedling text-white"></i> | |
| </div> | |
| <div> | |
| <h4 class="font-bold text-lg">6. Semillero Criollo \ Nueva Generación Cultural</h4> | |
| <p class="text-sm text-gray-600 dark:text-gray-400">Formación integral de jóvenes creadores</p> | |
| </div> | |
| </div> | |
| <i class="fas fa-chevron-down transition-transform"></i> | |
| </button> | |
| <div id="eje6" class="accordion-content mt-4 pl-16"> | |
| <p class="mb-4">Programa integral para jóvenes de 13-25 años:</p> | |
| <ul class="space-y-2 text-sm"> | |
| <li>• Escuelas de oficios creativos</li> | |
| <li>• Incubadora de proyectos culturales</li> | |
| <li>• Red de mentores artísticos</li> | |
| </ul> | |
| </div> | |
| </div> | |
| <!-- Eje 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="eje7"> | |
| <div class="flex items-center space-x-4"> | |
| <div class="w-12 h-12 bg-gradient-to-br from-violet-400 to-violet-600 rounded-lg flex items-center justify-center"> | |
| <i class="fas fa-balance-scale text-white"></i> | |
| </div> | |
| <div> | |
| <h4 class="font-bold text-lg">7. Al Pueblo lo que es del Pueblo \ Marco Legal</h4> | |
| <p class="text-sm text-gray-600 dark:text-gray-400">Gobernanza cultural democrática</p> | |
| </div> | |
| </div> | |
| <i class="fas fa-chevron-down transition-transform"></i> | |
| </button> | |
| <div id="eje7" class="accordion-content mt-4 pl-16"> | |
| <p class="mb-4">Nuevo paradigma de gestión cultural:</p> | |
| <ul class="space-y-2 text-sm"> | |
| <li>• Ley de Mecenazgo Popular participativo</li> | |
| <li>• Presupuesto cultural con asambleas territoriales</li> | |
| <li>• Contraloría artística popular independiente</li> | |
| </ul> | |
| </div> | |
| </div> | |
| <!-- Eje 8 --> | |
| <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="eje8"> | |
| <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"> | |
| <i class="fas fa-code text-white"></i> | |
| </div> | |
| <div> | |
| <h4 class="font-bold text-lg">8. Código Abierto \ Metodología Replicable</h4> | |
| <p class="text-sm text-gray-600 dark:text-gray-400">Documentación y mejora continua</p> | |
| </div> | |
| </div> | |
| <i class="fas fa-chevron-down transition-transform"></i> | |
| </button> | |
| <div id="eje8" class="accordion-content mt-4 pl-16"> | |
| <p class="mb-4">Sistema de transmisión y mejora:</p> | |
| <ul class="space-y-2 text-sm"> | |
| <li>• Repositorio open source de metodologías</li> | |
| <li>• Encuentro Trinchera anual rotativo</li> | |
| <li>• Escuela de Gestión Cultural Insurgente</li> | |
| </ul> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Metodología de Implementación Expandida --> | |
| <div class="section-reveal mb-16"> | |
| <div class="bg-white dark:bg-gray-800 rounded-2xl p-8 md:p-12 shadow-xl"> | |
| <h3 class="text-2xl font-serif font-bold mb-6 text-gradient">Metodología de Implementación</h3> | |
| <div class="grid grid-cols-1 md:grid-cols-2 gap-8"> | |
| <div> | |
| <h4 class="font-bold text-lg mb-4">Fase de Diagnóstico Participativo</h4> | |
| <p class="text-sm text-gray-600 dark:text-gray-400 mb-4"> | |
| Proceso de escucha activa y co-creación con cada comunidad: | |
| </p> | |
| <ul class="space-y-2 text-sm"> | |
| <li>• Asambleas territoriales abiertas</li> | |
| <li>• Mapeo de actores y recursos culturales</li> | |
| <li>• Diagnóstico participativo de necesidades</li> | |
| <li>• Diseño colaborativo de cada componente</li> | |
| </ul> | |
| </div> | |
| <div> | |
| <h4 class="font-bold text-lg mb-4">Fase de Implementación Progresiva</h4> | |
| <p class="text-sm text-gray-600 dark:text-gray-400 mb-4"> | |
| Despliegue escalonado con aprendizaje continuo: | |
| </p> | |
| <ul class="space-y-2 text-sm"> | |
| <li>• Pilotaje en 5 territorios clave</li> | |
| <li>• Iteración basada en feedback comunitario</li> | |
| <li>• Escalamiento gradual por regiones</li> | |
| <li>• Evaluación participativa trimestral</li> | |
| </ul> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Conclusión --> | |
| <div class="section-reveal"> | |
| <div class="bg-gradient-to-br from-violet-50 to-emerald-50 dark:from-violet-900/20 dark:to-emerald-900/20 rounded-2xl p-8 md:p-12 text-center"> | |
| <h3 class="text-3xl font-serif font-bold mb-6">Soberanía Cultural Bonaerense</h3> | |
| <p class="text-xl mb-6 leading-relaxed"> | |
| 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"> | |
| "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> | |
| </section> | |
| </div> | |
| <!-- Plan Financiero --> | |
| <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-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="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-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="flex-1"> | |
| <h4 class="font-bold text-lg">Año 2: Expansión</h4> | |
| <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="flex-1"> | |
| <h4 class="font-bold text-lg">Año 3: Consolidación</h4> | |
| <p class="text-gray-600 dark:text-gray-400">$6.8M USD - Red completa con autosustentabilidad</p> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| </div> | |
| <!-- Anexo de Implementación --> | |
| <div id="anexo-content" class="tab-content"> | |
| <section class="section-reveal"> | |
| <h2 class="text-4xl md:text-5xl font-serif font-bold text-center mb-12">Anexo de Implementación</h2> | |
| <div class="grid grid-cols-1 md:grid-cols-2 gap-8 mb-12"> | |
| <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">Fase 1: Diagnóstico Participativo</h3> | |
| <ul class="space-y-4"> | |
| <li class="flex items-start space-x-3"> | |
| <div class="w-2 h-2 bg-violet-500 rounded-full mt-2"></div> | |
| <div> | |
| <h4 class="font-semibold">Mapeo Territorial Profundo</h4> | |
| <p class="text-sm text-gray-600 dark:text-gray-400">Recorrido sistemático de cada barrio identificando actores, espacios y dinámicas culturales existentes.</p> | |
| </div> | |
| </li> | |
| <li class="flex items-start space-x-3"> | |
| <div class="w-2 h-2 bg-violet-500 rounded-full mt-2"></div> | |
| <div> | |
| <h4 class="font-semibold">Asambleas Abiertas</h4> | |
| <p class="text-sm text-gray-600 dark:text-gray-400">Espacios de diálogo donde la comunidad define sus prioridades y visiones culturales.</p> | |
| </div> | |
| </li> | |
| <li class="flex items-start space-x-3"> | |
| <div class="w-2 h-2 bg-violet-500 rounded-full mt-2"></div> | |
| <div> | |
| <h4 class="font-semibold">Diagnóstico Participativo</h4> | |
| <p class="text-sm text-gray-600 dark:text-gray-400">Herramientas de investigación-acción donde jóvenes investigadores locales documentan necesidades y potenciales.</p> | |
| </div> | |
| </li> | |
| </ul> | |
| </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">Fase 2: Implementación Ágil</h3> | |
| <ul class="space-y-4"> | |
| <li class="flex items-start space-x-3"> | |
| <div class="w-2 h-2 bg-emerald-500 rounded-full mt-2"></div> | |
| <div> | |
| <h4 class="font-semibold">Pilotaje Comunitario</h4> | |
| <p class="text-sm text-gray-600 dark:text-gray-400">Implementación inicial en 5 territorios con aprendizaje colectivo y ajustes inmediatos.</p> | |
| </div> | |
| </li> | |
| <li class="flex items-start space-x-3"> | |
| <div class="w-2 h-2 bg-emerald-500 rounded-full mt-2"></div> | |
| <div> | |
| <h4 class="font-semibold">Escalamiento Horizontal</h4> | |
| <p class="text-sm text-gray-600 dark:text-gray-400">Expansión gradual liderada por referentes locales formados en la primera fase.</p> | |
| </div> | |
| </li> | |
| <li class="flex items-start space-x-3"> | |
| <div class="w-2 h-2 bg-emerald-500 rounded-full mt-2"></div> | |
| <div> | |
| <h4 class="font-semibold">Evaluación Continua</h4> | |
| <p class="text-sm text-gray-600 dark:text-gray-400">Sistema de métricas cualitativas y cuantitativas construido y revisado por las propias comunidades.</p> | |
| </div> | |
| </li> | |
| </ul> | |
| </div> | |
| </div> | |
| <div class="bg-gradient-to-br from-violet-50 to-emerald-50 dark:from-violet-900/20 dark:to-emerald-900/20 rounded-2xl p-8 text-center"> | |
| <h3 class="text-2xl font-serif font-bold mb-4">Sistema de Monitoreo Participativo</h3> | |
| <p class="text-lg mb-6"> | |
| Cada territorio cuenta con observatorios culturales autogestionados que miden el impacto real en términos de empoderamiento comunitario, desarrollo de talentos locales y transformación social, generando información que retroalimenta constantemente la mejora del programa. | |
| </p> | |
| </div> | |
| </section> | |
| </div> | |
| </main> | |
| <!-- Footer --> | |
| <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 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"> | |
| <i class="fab fa-facebook text-xl"></i> | |
| </a> | |
| <a href="#" class="text-gray-400 hover:text-white transition-colors"> | |
| <i class="fab fa-twitter text-xl"></i> | |
| </a> | |
| <a href="#" class="text-gray-400 hover:text-white transition-colors"> | |
| <i class="fab fa-instagram text-xl"></i> | |
| </a> | |
| </div> | |
| </div> | |
| </footer> | |
| <script> | |
| // Scroll indicator | |
| const scrollIndicator = document.getElementById('scrollIndicator'); | |
| window.addEventListener('scroll', () => { | |
| const scrollTop = window.pageYOffset; | |
| const docHeight = document.body.scrollHeight - window.innerHeight; | |
| const scrollPercent = (scrollTop / docHeight) * 100; | |
| scrollIndicator.style.width = scrollPercent + '%'; | |
| }); | |
| // Tab switching | |
| const tabButtons = document.querySelectorAll('.tab-btn'); | |
| const tabContents = document.querySelectorAll('.tab-content'); | |
| tabButtons.forEach(button => { | |
| button.addEventListener('click', () => { | |
| const target = button.getAttribute('data-tab'); | |
| // Hide all contents | |
| tabContents.forEach(content => content.classList.remove('active')); | |
| // Remove active from all buttons | |
| tabButtons.forEach(btn => btn.classList.remove('active')); | |
| // Show target content | |
| document.getElementById(target).classList.add('active'); | |
| // Add active to clicked button | |
| button.classList.add('active'); | |
| }); | |
| }); | |
| // Accordion functionality | |
| const accordionTriggers = document.querySelectorAll('.accordion-trigger'); | |
| accordionTriggers.forEach(trigger => { | |
| trigger.addEventListener('click', () => { | |
| const target = trigger.getAttribute('data-target'); | |
| const content = document.getElementById(target); | |
| const icon = trigger.querySelector('i'); | |
| // Close all accordions | |
| document.querySelectorAll('.accordion-content').forEach(acc => { | |
| if (acc !== content) { | |
| acc.style.maxHeight = '0'; | |
| acc.classList.remove('active'); | |
| } | |
| }); | |
| // Toggle current accordion | |
| if (content.style.maxHeight === '0px' || !content.style.maxHeight) { | |
| content.style.maxHeight = content.scrollHeight + 'px'; | |
| content.classList.add('active'); | |
| icon.style.transform = 'rotate(180deg)'; | |
| } else { | |
| content.style.maxHeight = '0'; | |
| content.classList.remove('active'); | |
| icon.style.transform = 'rotate(0deg)'; | |
| } | |
| }); | |
| }); | |
| // Reveal animations on scroll | |
| const reveals = document.querySelectorAll('.section-reveal'); | |
| const revealObserver = new IntersectionObserver((entries) => { | |
| entries.forEach(entry => { | |
| if (entry.isIntersecting) { | |
| entry.target.classList.add('revealed'); | |
| } | |
| }); | |
| }, { threshold: 0.1 }); | |
| reveals.forEach(reveal => revealObserver.observe(reveal)); | |
| // Set first tab as active | |
| document.querySelector('.tab-btn[data-tab="plan-content"]').classList.add('active'); | |
| </script> | |
| <p style="border-radius: 8px; text-align: center; font-size: 12px; color: #fff; margin-top: 16px;position: fixed; left: 8px; bottom: 8px; z-index: 10; background: rgba(0, 0, 0, 0.8); padding: 4px 8px;">Made with <img src="https://enzostvs-deepsite.hf.space/logo.svg" alt="DeepSite Logo" style="width: 16px; height: 16px; vertical-align: middle;display:inline-block;margin-right:3px;filter:brightness(0) invert(1);"><a href="https://enzostvs-deepsite.hf.space" style="color: #fff;text-decoration: underline;" target="_blank" >DeepSite</a> - 🧬 <a href="https://enzostvs-deepsite.hf.space?remix=QwanYin/cultech" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body> | |
| </html> |