<!DOCTYPE html>
<html lang="es">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Bitácora Visual: Fauvismo vs Expresionismo</title>
    <script src="https://cdn.tailwindcss.com"></script>
    <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css" rel="stylesheet">
    <style>
        @import url('https://fonts.googleapis.com/css2?family=Cinzel:wght@700&family=Montserrat:wght@300;400;600;800&family=Playfair+Display:ital,wght@0,700;1,400&display=swap');

        /* Fauvism Styling - Bright, Warm, Expressive, Flat */
        .fauvism-theme {
            background-color: #fff9f0;
            color: #1a1a1a;
            font-family: 'Montserrat', sans-serif;
        }
        .fauvism-title {
            font-family: 'Playfair Display', serif;
            color: #d9381e; /* Bold Orange/Red */
        }
        .fauvism-accent-bg {
            background-color: #f4a261;
        }
        .fauvism-card {
            background-color: #ffffff;
            border: 3px solid #e76f51;
            box-shadow: 6px 6px 0px #2a9d8f;
        }
        .fauvism-tag {
            background-color: #e9c46a;
            color: #1d3557;
            font-weight: bold;
        }

        /* Expressionism Styling - Dark, Dramatic, Angular, Moody */
        .expressionism-theme {
            background-color: #121212;
            color: #e0e0e0;
            font-family: 'Montserrat', sans-serif;
        }
        .expressionism-title {
            font-family: 'Cinzel', serif;
            color: #4a90e2; /* Deep Blue/Electric */
            letter-spacing: 2px;
        }
        .expressionism-accent-bg {
            background-color: #2b2d42;
        }
        .expressionism-card {
            background-color: #1e1e24;
            border: 2px solid #4a90e2;
            box-shadow: 5px 5px 15px rgba(0, 0, 0, 0.7);
        }
        .expressionism-tag {
            background-color: #d62828;
            color: #ffffff;
            font-weight: bold;
        }

        /* Custom scrollbar */
        ::-webkit-scrollbar {
            width: 8px;
        }
        ::-webkit-scrollbar-track {
            background: #1a1a1a;
        }
        ::-webkit-scrollbar-thumb {
            background: #e76f51;
            border-radius: 4px;
        }
    </style>
</head>
<body class="bg-black text-gray-100 min-h-screen">

    <!-- HEADER / BANNER -->
    <header class="text-center py-10 px-4 bg-gradient-to-r from-red-600 via-purple-800 to-blue-900 border-b-4 border-yellow-500">
        <p class="text-xs md:text-sm font-semibold tracking-widest text-yellow-300 uppercase mb-2">Universidad de Mendoza — Cultura del Diseño II</p>
        <h1 class="text-4xl md:text-6xl font-extrabold tracking-tight text-white mb-2">BITÁCORA VISUAL DE VANGUARDIAS</h1>
        <p class="text-lg md:text-xl font-light text-gray-200 max-w-3xl mx-auto italic">El camino a la abstracción: De la explosión del color a la angustia de la forma.</p>
        <div class="mt-4 inline-block bg-black/50 backdrop-blur-md px-6 py-2 rounded-full border border-white/20 text-sm">
            <span class="text-amber-400 font-bold">1905 - 1930</span> | Primeras Vanguardias del Siglo XX
        </div>
    </header>

    <!-- TIMELINE SUMMARY -->
    <section class="max-w-7xl mx-auto my-8 p-6 bg-zinc-900 rounded-xl border border-zinc-800 shadow-2xl">
        <h2 class="text-xl font-bold text-center text-yellow-500 mb-4 uppercase tracking-wider"><i class="fa-solid fa-clock-rotate-left mr-2"></i>Línea Temporal Contextual</h2>
        <div class="flex flex-wrap justify-between items-center text-xs md:text-sm text-gray-300 gap-2 border-t border-b border-zinc-700 py-3">
            <div class="text-center p-2"><span class="block text-yellow-400 font-bold">1905</span>Fauvismo (París)</div>
            <div class="text-center p-2"><span class="block text-blue-400 font-bold">1905</span>Expresionismo (Alemania)</div>
            <div class="text-center p-2"><span class="block text-gray-400 font-bold">1907</span>Cubismo</div>
            <div class="text-center p-2"><span class="block text-gray-400 font-bold">1909</span>Futurismo</div>
            <div class="text-center p-2"><span class="block text-red-500 font-bold">1914-1918</span>1ª Guerra Mundial</div>
            <div class="text-center p-2"><span class="block text-purple-400 font-bold">1916</span>Dadaísmo / De Stijl</div>
            <div class="text-center p-2"><span class="block text-cyan-400 font-bold">1919</span>Bauhaus</div>
            <div class="text-center p-2"><span class="block text-pink-400 font-bold">1924</span>Surrealismo</div>
        </div>
    </section>

    <!-- MAIN COMPARATIVE CONTAINER (SPLIT SCREEN) -->
    <div class="max-w-7xl mx-auto grid grid-cols-1 md:grid-cols-2 gap-0 border-4 border-zinc-800 rounded-2xl overflow-hidden shadow-2xl mb-12">

        <!-- ==========================================
             LEFT COLUMN: FAUVISMO
        ========================================== -->
        <div class="fauvism-theme p-6 md:p-8 border-b-4 md:border-b-0 md:border-r-4 border-zinc-800">
            
            <!-- HEADER FAUVISMO -->
            <div class="text-center mb-10 pb-6 border-b-2 border-orange-300">
                <span class="fauvism-tag px-3 py-1 rounded-full text-xs uppercase tracking-wider">París, Francia (1905 - 1909)</span>
                <h2 class="fauvism-title text-4xl md:text-5xl font-black mt-3">FAUVISMO</h2>
                <p class="italic text-amber-800 text-sm mt-2">"Liberar el color con respecto al dibujo"</p>
            </div>

            <!-- CONCEPTO CLAVE -->
            <div class="fauvism-card p-5 rounded-lg mb-8">
                <h3 class="font-bold text-lg text-orange-700 mb-2 border-b border-orange-200 pb-1"><i class="fa-solid fa-palette mr-2"></i>Concepto & Filosofía</h3>
                <p class="text-sm leading-relaxed text-gray-800">
                    Es la <strong>primera vanguardia</strong>. Nace del inconformismo frente a la herencia pictórica. Busca ignorar los claroscuros y perspectivas tradicionales para expresar sentimientos a través de la alegría y vitalidad.
                </p>
                <ul class="text-xs mt-3 space-y-1 font-semibold text-gray-700">
                    <li>• Color puro directo del tubo (sin mímesis).</li>
                    <li>• Pinceladas rápidas, vigorosas y espontáneas.</li>
                    <li>• Niega el volumen, la profundidad y la perspectiva renacentista.</li>
                </ul>
            </div>

            <!-- ANTECEDENTES -->
            <div class="fauvism-card p-5 rounded-lg mb-8">
                <h3 class="font-bold text-lg text-orange-700 mb-2 border-b border-orange-200 pb-1"><i class="fa-solid fa-seedling mr-2"></i>Antecedentes (Salón de Otoño 1905)</h3>
                <p class="text-xs text-gray-700 mb-3">Matisse, Derain y Vlaminck rescatan influencias clave:</p>
                <div class="grid grid-cols-2 gap-2 text-xs">
                    <div class="bg-amber-100 p-2 rounded"><strong>Van Gogh:</strong> La expresión violenta del trazo.</div>
                    <div class="bg-amber-100 p-2 rounded"><strong>Gauguin:</strong> Uso decorativo y plano del color.</div>
                    <div class="bg-amber-100 p-2 rounded"><strong>Cézanne:</strong> Estructura compositiva.</div>
                    <div class="bg-amber-100 p-2 rounded"><strong>Neo-impresionismo:</strong> Liberación de la pincelada.</div>
                </div>
            </div>

            <!-- GALERÍA DE OBRAS FAUVISMO -->
            <h3 class="fauvism-title text-2xl font-bold mb-6 text-center border-b-2 border-orange-400 pb-2">Obras & Análisis Pictórico</h3>

            <!-- Obra 1 -->
            <div class="fauvism-card rounded-lg overflow-hidden mb-8">
                <img src="https://upload.wikimedia.org/wikipedia/commons/f/f8/Henri_Matisse%2C_1905%2C_The_Green_Line_%28La_Ligne_Verte%29_Portrait_of_Madame_Matisse%2C_oil_and_tempera_on_canvas%2C_40.5_x_32.5_cm%2C_Statens_Museum_for_Kunst%2C_Copenhagen.jpg" alt="La línea verde - Matisse" class="w-full h-64 object-cover object-top">
                <div class="p-4">
                    <span class="text-xs font-bold text-orange-600">HENRI MATISSE (1905)</span>
                    <h4 class="font-bold text-lg text-gray-900">La Línea Verde (Mme. Matisse)</h4>
                    <p class="text-xs text-gray-600 mt-2"><strong>Análisis visual:</strong> Retrato simplificado mediante bloques de color. La línea verde divide el rostro eliminando la sombra tradicional. Pincelada suelta y marcada negación de la perspectiva.</p>
                </div>
            </div>

            <!-- Obra 2 -->
            <div class="fauvism-card rounded-lg overflow-hidden mb-8">
                <img src="https://upload.wikimedia.org/wikipedia/en/7/73/Matisse_-_Music.jpg" alt="La Musique - Matisse" class="w-full h-64 object-cover">
                <div class="p-4">
                    <span class="text-xs font-bold text-orange-600">HENRI MATISSE (1939)</span>
                    <h4 class="font-bold text-lg text-gray-900">La Música (La Musique)</h4>
                    <p class="text-xs text-gray-600 mt-2"><strong>Análisis visual:</strong> Superficies planas y colores intensos brillantes. Fuerza del color puro para transmitir alegría. Rompe con el dibujo académico y elimina el volumen.</p>
                </div>
            </div>

            <!-- Obra 3 -->
            <div class="fauvism-card rounded-lg overflow-hidden mb-8">
                <img src="https://upload.wikimedia.org/wikipedia/en/7/77/Matisse-Purple-Robe.jpg" alt="Mujer con abrigo púrpura - Matisse" class="w-full h-64 object-cover">
                <div class="p-4">
                    <span class="text-xs font-bold text-orange-600">HENRI MATISSE</span>
                    <h4 class="font-bold text-lg text-gray-900">Mujer con abrigo púrpura</h4>
                    <p class="text-xs text-gray-600 mt-2"><strong>Análisis visual:</strong> Fuerte presencia de elementos decorativos en fondos y telas. Negación explícita de la perspectiva clásica y énfasis en la línea contorneada.</p>
                </div>
            </div>

            <!-- Obra 4 -->
            <div class="fauvism-card rounded-lg overflow-hidden mb-8">
                <img src="https://upload.wikimedia.org/wikipedia/en/1/1f/Matisse_The_Red_Room.jpg" alt="Armonía en rojo - Matisse" class="w-full h-64 object-cover">
                <div class="p-4">
                    <span class="text-xs font-bold text-orange-600">HENRI MATISSE (1908)</span>
                    <h4 class="font-bold text-lg text-gray-900">Armonía en Rojo</h4>
                    <p class="text-xs text-gray-600 mt-2"><strong>Análisis visual:</strong> El mantel y el muro se fusionan en un plano rojo continuo. Abstracción, simplificación, desproporción e influencias decorativas del arte marroquí.</p>
                </div>
            </div>

            <!-- Obra 5 -->
            <div class="fauvism-card rounded-lg overflow-hidden mb-8">
                <img src="https://upload.wikimedia.org/wikipedia/en/1/1e/Matisse_-_Dance_I.jpg" alt="La Danza - Matisse" class="w-full h-64 object-cover">
                <div class="p-4">
                    <span class="text-xs font-bold text-orange-600">HENRI MATISSE (1910)</span>
                    <h4 class="font-bold text-lg text-gray-900">La Danza</h4>
                    <p class="text-xs text-gray-600 mt-2"><strong>Análisis visual:</strong> Regreso a la época mítica sin preocupaciones. Colores planos y puros (azul, verde, rojo), negación del claroscuro, sintesis extrema, torsión exagerada y fascinación por el arte primitivo.</p>
                </div>
            </div>

            <!-- Obra 6 -->
            <div class="fauvism-card rounded-lg overflow-hidden mb-8">
                <img src="https://upload.wikimedia.org/wikipedia/commons/e/eb/Derain_La_Charing_Cross_Bridge.jpg" alt="Curva en el camino - Derain" class="w-full h-64 object-cover">
                <div class="p-4">
                    <span class="text-xs font-bold text-orange-600">ANDRÉ DERAIN (1906)</span>
                    <h4 class="font-bold text-lg text-gray-900">Curva en el camino</h4>
                    <p class="text-xs text-gray-600 mt-2"><strong>Análisis visual:</strong> Paisaje con colores totalmente radicales y antinaturales. Expresión pura mediante la vibración cromática que transmite exaltación y dinamismo.</p>
                </div>
            </div>

        </div>


        <!-- ==========================================
             RIGHT COLUMN: EXPRESIONISMO
        ========================================== -->
        <div class="expressionism-theme p-6 md:p-8">
            
            <!-- HEADER EXPRESIONISMO -->
            <div class="text-center mb-10 pb-6 border-b-2 border-blue-500">
                <span class="expressionism-tag px-3 py-1 rounded-full text-xs uppercase tracking-wider">Alemania (1905 - 1930)</span>
                <h2 class="expressionism-title text-4xl md:text-5xl font-black mt-3">EXPRESIONISMO</h2>
                <p class="italic text-blue-300 text-sm mt-2">"Plasmar la angustia, el sufrimiento y la soledad interior"</p>
            </div>

            <!-- CONCEPTO CLAVE -->
            <div class="expressionism-card p-5 rounded-lg mb-8">
                <h3 class="font-bold text-lg text-blue-400 mb-2 border-b border-gray-700 pb-1"><i class="fa-solid fa-skull mr-2"></i>Concepto & Filosofía</h3>
                <p class="text-sm leading-relaxed text-gray-300">
                    Movimiento extenso (artes plásticas, cine, teatro, gráfica) marcado por el <strong>Existencialismo</strong> (Nietzsche, Kierkegaard, Freud) y el contexto bélico.
                </p>
                <ul class="text-xs mt-3 space-y-1 text-gray-400">
                    <li>• Estética cruda, angulosa, trágica y pesimista.</li>
                    <li>• Pincelada emotiva, dinámica, trazo rápido y gestual.</li>
                    <li>• Deformación expresiva de la figura y uso de símbolos.</li>
                </ul>
            </div>

            <!-- TRES ETAPAS DEL EXPRESIONISMO -->
            <div class="expressionism-card p-5 rounded-lg mb-8">
                <h3 class="font-bold text-lg text-blue-400 mb-3 border-b border-gray-700 pb-1"><i class="fa-solid fa-sitemap mr-2"></i>Las 3 Etapas Expresionistas</h3>
                <div class="space-y-3 text-xs">
                    <div class="bg-zinc-800 p-2.5 rounded border-l-4 border-red-500">
                        <span class="font-bold text-red-400 uppercase">1. Pioneros (1895-1905):</span> Munch, Ensor, Nolde. Enfocados en lo trágico, sórdido y existencial.
                    </div>
                    <div class="bg-zinc-800 p-2.5 rounded border-l-4 border-yellow-500">
                        <span class="font-bold text-yellow-400 uppercase">2. Die Brücke "El Puente" (1905-1913):</span> Kirchner, Heckel, Schmidt-Rottluff. Crítica social, angustia, deformación y reivindicación de la xilografía.
                    </div>
                    <div class="bg-zinc-800 p-2.5 rounded border-l-4 border-cyan-500">
                        <span class="font-bold text-cyan-400 uppercase">3. Der Blaue Reiter "El Jinete Azul" (1911-1930):</span> Kandinsky, Marc, Klee. Búsqueda de lo espiritual, lirismo, abstracción y teoría del color.
                    </div>
                </div>
            </div>

            <!-- GALERÍA DE OBRAS EXPRESIONISMO -->
            <h3 class="expressionism-title text-2xl font-bold mb-6 text-center border-b-2 border-blue-500 pb-2">Obras, Gráfica & Cine</h3>

            <!-- Obra 1: Munch El Grito -->
            <div class="expressionism-card rounded-lg overflow-hidden mb-8">
                <img src="https://upload.wikimedia.org/wikipedia/commons/thumb/c/c5/Edvard_Munch%2C_1893%2C_The_Scream%2C_oil%2C_tempera_and_pastel_on_cardboard%2C_91_x_73.5_cm%2C_National_Gallery_of_Norway.jpg/800px-Edvard_Munch%2C_1893%2C_The_Scream%2C_oil%2C_tempera_and_pastel_on_cardboard%2C_91_x_73.5_cm%2C_National_Gallery_of_Norway.jpg" alt="El Grito - Munch" class="w-full h-64 object-cover">
                <div class="p-4">
                    <span class="text-xs font-bold text-blue-400">EDVARD MUNCH (1893) — Pioneros</span>
                    <h4 class="font-bold text-lg text-gray-100">El Grito</h4>
                    <p class="text-xs text-gray-400 mt-2"><strong>Análisis visual:</strong> Retrata el horror, la angustia existencial y la soledad del hombre moderno. Lineas sinuosas continuas, alargamiento andrógino de la figura y encuadre fotográfico.</p>
                </div>
            </div>

            <!-- Obra 2: Munch El Beso y Autorretrato -->
            <div class="expressionism-card rounded-lg overflow-hidden mb-8">
                <div class="grid grid-cols-2 gap-1 bg-black">
                    <img src="https://upload.wikimedia.org/wikipedia/commons/2/22/Edvard_Munch_-_The_Kiss_-_Google_Art_Project.jpg" alt="El Beso - Munch" class="w-full h-48 object-cover">
                    <img src="https://upload.wikimedia.org/wikipedia/commons/e/eb/Edvard_Munch_-_Self-Portrait._Between_the_Clock_and_the_Bed_%281940-1943%29.jpg" alt="Autorretrato - Munch" class="w-full h-48 object-cover">
                </div>
                <div class="p-4">
                    <span class="text-xs font-bold text-blue-400">EDVARD MUNCH — Pioneros</span>
                    <h4 class="font-bold text-lg text-gray-100">El Beso (1897) / Autorretrato entre el reloj y la cama (1943)</h4>
                    <p class="text-xs text-gray-400 mt-2"><strong>Análisis visual:</strong> Simbolismo de dos cuerpos que se fusionan borrando sus identidades (El Beso). En su autorretrato final, retrata la soledad y la inminencia de la muerte.</p>
                </div>
            </div>

            <!-- Obra 3: Ensor -->
            <div class="expressionism-card rounded-lg overflow-hidden mb-8">
                <img src="https://upload.wikimedia.org/wikipedia/commons/1/1e/James_Ensor_-_The_Bad_Doctors_%281892%29.jpg" alt="La muerte y las máscaras - Ensor" class="w-full h-64 object-cover">
                <div class="p-4">
                    <span class="text-xs font-bold text-blue-400">JAMES ENSOR (1893) — Pioneros</span>
                    <h4 class="font-bold text-lg text-gray-100">La muerte y las máscaras</h4>
                    <p class="text-xs text-gray-400 mt-2"><strong>Análisis visual:</strong> Crítica social satírica mediante el uso de máscaras grotescas y esqueletos. Uso dramático y estridente del color con mixtura técnica.</p>
                </div>
            </div>

            <!-- Obra 4: Kirchner / Die Brücke -->
            <div class="expressionism-card rounded-lg overflow-hidden mb-8">
                <img src="https://upload.wikimedia.org/wikipedia/commons/0/07/Ernst_Ludwig_Kirchner_-_Potsdamer_Platz.jpg" alt="Potsdamer Platz - Kirchner" class="w-full h-64 object-cover">
                <div class="p-4">
                    <span class="text-xs font-bold text-blue-400">ERNST LUDWIG KIRCHNER (1914) — Die Brücke</span>
                    <h4 class="font-bold text-lg text-gray-100">Potsdamer Platz / Paisaje (1913)</h4>
                    <p class="text-xs text-gray-400 mt-2"><strong>Análisis visual:</strong> Figuras alargadas y angulosas que reflejan alienación urbana. Perspectivas bruscas, contornos negros acentuados y simplificación primitivista.</p>
                </div>
            </div>

            <!-- Obra 5: Nolde Fealdad Premeditada -->
            <div class="expressionism-card rounded-lg overflow-hidden mb-8">
                <img src="https://upload.wikimedia.org/wikipedia/commons/c/c5/Emil_Nolde_-_Masks_1911.jpg" alt="Naturaleza muerta de máscaras - Nolde" class="w-full h-64 object-cover">
                <div class="p-4">
                    <span class="text-xs font-bold text-blue-400">EMIL NOLDE (1911-1912) — Fealdad Premeditada</span>
                    <h4 class="font-bold text-lg text-gray-100">Naturaleza muerta de máscaras III / Crucifixión</h4>
                    <p class="text-xs text-gray-400 mt-2"><strong>Análisis visual:</strong> Exploración intencional de la fealdad para potenciar el contenido espiritual/emocional. Colores primarios violently confrontados e influencia del arte tribal.</p>
                </div>
            </div>

            <!-- Obra 6: Gráfica y Xilografía (Die Brücke) -->
            <div class="expressionism-card rounded-lg overflow-hidden mb-8">
                <div class="grid grid-cols-2 gap-1 bg-black p-2">
                    <img src="https://upload.wikimedia.org/wikipedia/commons/e/e0/Kirchner_-_KG_Br%C3%BCcke_1910.jpg" alt="Poster Expo Die Brücke" class="w-full h-48 object-contain">
                    <img src="https://upload.wikimedia.org/wikipedia/commons/a/a2/Kirchner_-_MUIM_poster_1911.jpg" alt="Poster MUIM Kirchner" class="w-full h-48 object-contain">
                </div>
                <div class="p-4">
                    <span class="text-xs font-bold text-blue-400">GRÁFICA EXPRESIONISTA (1910-1911)</span>
                    <h4 class="font-bold text-lg text-gray-100">Posters para "Die Brücke" y "MUIM"</h4>
                    <p class="text-xs text-gray-400 mt-2"><strong>Análisis de Diseño:</strong> Grabado en madera (Xilografía). Tipografía tallada a mano, integrada grotescamente a la imagen. Pioneros en la autoedición y manifiestos visuales de protesta.</p>
                </div>
            </div>

            <!-- Obra 7: Afiches de Cine Expresionista -->
            <div class="expressionism-card rounded-lg overflow-hidden mb-8">
                <div class="grid grid-cols-2 gap-1 bg-black p-2">
                    <img src="https://upload.wikimedia.org/wikipedia/commons/2/2f/El_Gabinete_del_Dr._Caligari_%281920%29.jpg" alt="El gabinete del Dr. Caligari" class="w-full h-48 object-contain">
                    <img src="https://upload.wikimedia.org/wikipedia/commons/a/ae/Der_Golem_wie_er_in_die_Welt_kam.jpg" alt="El Golem" class="w-full h-48 object-contain">
                </div>
                <div class="p-4">
                    <span class="text-xs font-bold text-blue-400">CINE EXPRESIONISTA (1920)</span>
                    <h4 class="font-bold text-lg text-gray-100">El gabinete del Dr. Caligari / El Golem</h4>
                    <p class="text-xs text-gray-400 mt-2"><strong>Análisis de Diseño:</strong> Marcadísima distorsión arquitectónica, sombras diagonales profundas y tipografía inestable que representa la locura y el sonambulismo psíquico.</p>
                </div>
            </div>

            <!-- Obra 8: Der Blaue Reiter / Marc y Kandinsky -->
            <div class="expressionism-card rounded-lg overflow-hidden mb-8">
                <div class="grid grid-cols-2 gap-1 bg-black">
                    <img src="https://upload.wikimedia.org/wikipedia/commons/d/d4/Franz_Marc_007.jpg" alt="Blaues Pferd - Franz Marc" class="w-full h-48 object-cover">
                    <img src="https://upload.wikimedia.org/wikipedia/commons/b/b4/Vassily_Kandinsky%2C_1911_-_Composition_IV.jpg" alt="Composition IV - Kandinsky" class="w-full h-48 object-cover">
                </div>
                <div class="p-4">
                    <span class="text-xs font-bold text-blue-400">DER BLAUE REITER (1911)</span>
                    <h4 class="font-bold text-lg text-gray-100">Blaues Pferd (Marc) / Composition IV (Kandinsky)</h4>
                    <p class="text-xs text-gray-400 mt-2"><strong>Análisis visual:</strong> El azul como símbolo de espiritualidad e infinito. Búsqueda de abstracción, liberación del espíritu de lo preconcebido y lírica de color pura.</p>
                </div>
            </div>

        </div>

    </div>

    <!-- COMPARATIVE TABLE SUMMARY -->
    <section class="max-w-7xl mx-auto mb-16 p-6 bg-zinc-900 border border-zinc-800 rounded-2xl shadow-2xl">
        <h3 class="text-2xl font-bold text-center text-white mb-6 uppercase tracking-wider">Cuadro Comparativo Resumen</h3>
        <div class="overflow-x-auto">
            <table class="w-full text-left text-xs md:text-sm text-gray-300">
                <thead class="bg-zinc-800 text-yellow-500 uppercase font-bold border-b border-zinc-700">
                    <tr>
                        <th class="p-3">Criterio</th>
                        <th class="p-3 text-orange-400">Fauvismo</th>
                        <th class="p-3 text-blue-400">Expresionismo</th>
                    </tr>
                </thead>
                <tbody class="divide-y divide-zinc-800">
                    <tr>
                        <td class="p-3 font-bold text-white">Origen</td>
                        <td class="p-3">Francia / París (1905)</td>
                        <td class="p-3">Alemania (1905)</td>
                    </tr>
                    <tr>
                        <td class="p-3 font-bold text-white">Emoción Dominante</td>
                        <td class="p-3">Alegría, vitalidad, espontaneidad, hedonismo.</td>
                        <td class="p-3">Angustia, soledad, pesimismo, crítica social.</td>
                    </tr>
                    <tr>
                        <td class="p-3 font-bold text-white">Uso del Color</td>
                        <td class="p-3">Puro, directo del tubo, decorativo, plano, brillante.</td>
                        <td class="p-3">Simbólico, estridente, contrastante, vehículo del dolor.</td>
                    </tr>
                    <tr>
                        <td class="p-3 font-bold text-white">Técnica Dominante</td>
                        <td class="p-3">Pintura al óleo, pincelada suelta en bloques.</td>
                        <td class="p-3">Óleo, Xilografía (grabado en madera), gráfica, cine.</td>
                    </tr>
                    <tr>
                        <td class="p-3 font-bold text-white">Artistas Clave</td>
                        <td class="p-3">Henri Matisse, André Derain, Maurice de Vlaminck.</td>
                        <td class="p-3">Munch, Ensor, Kirchner, Nolde, Kandinsky, Marc.</td>
                    </tr>
                </tbody>
            </table>
        </div>
    </section>

    <!-- FOOTER -->
    <footer class="text-center py-6 text-xs text-gray-500 border-t border-zinc-800">
        <p>Bitácora desarrollada para el análisis gráfico-curricular de la materia Cultura del Diseño II (Universidad de Mendoza).</p>
    </footer>

</body>
</html>
```eof

He creado la bitácora interactiva en un archivo HTML responsivo. 

### ¿Qué incluye esta bitácora?
* **Diseño dual temático:** Un lado estilizado para el **Fauvismo** (tonos cálidos, llamativos y luminosos) y otro para el **Expresionismo** (tonos oscuros, fríos, contrastados y dramáticos).
* **Todas las obras recopiladas de los dos PDF:**
  * **Fauvismo:** *La línea verde*, *La Musique*, *Mujer con abrigo púrpura*, *Armonía en rojo*, *La danza* (Henri Matisse) y *Curva en el camino* (André Derain).
  * **Expresionismo:** *El Grito*, *El Beso*, *Autorretrato entre el reloj y la cama* (Munch); *La muerte y las máscaras* (Ensor); *Potsdamer Platz* (Kirchner); *Naturaleza muerta de máscaras III* y *Crucifixión* (Nolde); *Blaues Pferd* (Marc); *Composition IV* (Kandinsky).
* **Secciones de Gráfica y Cine Expresionista:** Postales y afiches como los de *Die Brücke*, *MUIM*, *El gabinete del Dr. Caligari* y *El Golem*.
* **Análisis contextual y comparativo:** Incluye líneas de tiempo, referentes teóricos/filosóficos (Nietzsche, Freud, Existencialismo) y un cuadro comparativo final.
