Tarjetas

I will now generate a creative and visual HTML document containing the styled flashcards for your study session, featuring an interactive card-flipping design and a clean layout ready for studying or printing.
<!DOCTYPE html>
<html lang="es">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Tarjetitas Creativas - Periodismo en el Cine</title>
    <script src="https://cdn.tailwindcss.com"></script>
    <style>
        .perspective-1000 { perspective: 1000px; }
        .transform-style-3d { transform-style: preserve-3d; }
        .backface-hidden { backface-visibility: hidden; }
        .rotate-y-180 { transform: rotateY(180deg); }
    </style>
</head>
<body class="bg-slate-900 text-slate-100 min-h-screen py-10 px-4">
    <div class="max-w-4xl mx-auto">
        <header class="text-center mb-10">
            <span class="bg-indigo-600 text-indigo-100 text-xs font-semibold px-3 py-1 rounded-full uppercase tracking-wider">Estudio Interactivo</span>
            <h1 class="text-3xl md:text-4xl font-bold mt-3 mb-2">Periodismo en el Cine: Más allá del documental</h1>
            <p class="text-slate-400">Basado en el Trabajo de Fin de Grado de Alejandra Orbegozo Gomeza. Haz clic en cualquier tarjeta para voltearla.</p>
        </header>

        <!-- Grid de Tarjetas -->
        <div class="grid grid-cols-1 md:grid-cols-2 gap-6" id="flashcards-grid">
            
            <!-- Tarjeta 1 -->
            <div class="h-64 perspective-1000 cursor-pointer card-container" onclick="this.querySelector('.card-inner').classList.toggle('rotate-y-180')">
                <div class="card-inner relative w-full h-full duration-500 transform-style-3d shadow-xl rounded-2xl">
                    <div class="absolute inset-0 backface-hidden bg-gradient-to-br from-indigo-900 to-slate-800 border border-indigo-500/30 p-6 flex flex-col justify-between rounded-2xl">
                        <div class="flex justify-between items-center">
                            <span class="text-2xl">🎬</span>
                            <span class="text-xs text-indigo-400 font-semibold uppercase tracking-wider">Tarjeta #1</span>
                        </div>
                        <div>
                            <h3 class="text-xs text-indigo-300 font-medium mb-1">Pregunta / Estímulo</h3>
                            <p class="text-lg font-bold">¿Qué plantea el trabajo de Alejandra Orbegozo sobre el cine y el periodismo?</p>
                        </div>
                        <div class="text-right text-xs text-slate-400 italic">Haz clic para ver la respuesta ➔</div>
                    </div>
                    <div class="absolute inset-0 backface-hidden rotate-y-180 bg-gradient-to-br from-emerald-900 to-slate-800 border border-emerald-500/30 p-6 flex flex-col justify-between rounded-2xl">
                        <div class="flex justify-between items-center">
                            <span class="text-2xl">💡</span>
                            <span class="text-xs text-emerald-400 font-semibold uppercase tracking-wider">Respuesta</span>
                        </div>
                        <div>
                            <p class="text-base text-emerald-100 font-medium">Que las películas de ficción realista también hacen periodismo al retratar la verdad social, superando a veces el impacto de un documental convencional.</p>
                        </div>
                        <div class="text-right text-xs text-slate-400 italic">Clic para volver ↺</div>
                    </div>
                </div>
            </div>

            <!-- Tarjeta 2 -->
            <div class="h-64 perspective-1000 cursor-pointer card-container" onclick="this.querySelector('.card-inner').classList.toggle('rotate-y-180')">
                <div class="card-inner relative w-full h-full duration-500 transform-style-3d shadow-xl rounded-2xl">
                    <div class="absolute inset-0 backface-hidden bg-gradient-to-br from-indigo-900 to-slate-800 border border-indigo-500/30 p-6 flex flex-col justify-between rounded-2xl">
                        <div class="flex justify-between items-center">
                            <span class="text-2xl">📰</span>
                            <span class="text-xs text-indigo-400 font-semibold uppercase tracking-wider">Tarjeta #2</span>
                        </div>
                        <div>
                            <h3 class="text-xs text-indigo-300 font-medium mb-1">Pregunta / Estímulo</h3>
                            <p class="text-lg font-bold">¿Qué comparte el cine realista con el "Nuevo Periodismo"?</p>
                        </div>
                        <div class="text-right text-xs text-slate-400 italic">Haz clic para ver la respuesta ➔</div>
                    </div>
                    <div class="absolute inset-0 backface-hidden rotate-y-180 bg-gradient-to-br from-emerald-900 to-slate-800 border border-emerald-500/30 p-6 flex flex-col justify-between rounded-2xl">
                        <div class="flex justify-between items-center">
                            <span class="text-2xl">💡</span>
                            <span class="text-xs text-emerald-400 font-semibold uppercase tracking-wider">Respuesta</span>
                        </div>
                        <div>
                            <p class="text-base text-emerald-100 font-medium">La narrativa literaria, el enfoque profundamente humano de los hechos y la firme denuncia de las injusticias sociales.</p>
                        </div>
                        <div class="text-right text-xs text-slate-400 italic">Clic para volver ↺</div>
                    </div>
                </div>
            </div>

            <!-- Tarjeta 3 -->
            <div class="h-64 perspective-1000 cursor-pointer card-container" onclick="this.querySelector('.card-inner').classList.toggle('rotate-y-180')">
                <div class="card-inner relative w-full h-full duration-500 transform-style-3d shadow-xl rounded-2xl">
                    <div class="absolute inset-0 backface-hidden bg-gradient-to-br from-indigo-900 to-slate-800 border border-indigo-500/30 p-6 flex flex-col justify-between rounded-2xl">
                        <div class="flex justify-between items-center">
                            <span class="text-2xl">🇮🇹</span>
                            <span class="text-xs text-indigo-400 font-semibold uppercase tracking-wider">Tarjeta #3</span>
                        </div>
                        <div>
                            <h3 class="text-xs text-indigo-300 font-medium mb-1">Pregunta / Estímulo</h3>
                            <p class="text-lg font-bold">¿Cómo influyó el Neorrealismo italiano en esta corriente cinematográfica?</p>
                        </div>
                        <div class="text-right text-xs text-slate-400 italic">Haz clic para ver la respuesta ➔</div>
                    </div>
                    <div class="absolute inset-0 backface-hidden rotate-y-180 bg-gradient-to-br from-emerald-900 to-slate-800 border border-emerald-500/30 p-6 flex flex-col justify-between rounded-2xl">
                        <div class="flex justify-between items-center">
                            <span class="text-2xl">💡</span>
                            <span class="text-xs text-emerald-400 font-semibold uppercase tracking-wider">Respuesta</span>
                        </div>
                        <div>
                            <p class="text-base text-emerald-100 font-medium">A través del uso de escenarios naturales, actores no profesionales y la urgente necesidad de mostrar la verdad de la posguerra sin artificios de estudio.</p>
                        </div>
                        <div class="text-right text-xs text-slate-400 italic">Clic para volver ↺</div>
                    </div>
                </div>
            </div>

            <!-- Tarjeta 4 -->
            <div class="h-64 perspective-1000 cursor-pointer card-container" onclick="this.querySelector('.card-inner').classList.toggle('rotate-y-180')">
                <div class="card-inner relative w-full h-full duration-500 transform-style-3d shadow-xl rounded-2xl">
                    <div class="absolute inset-0 backface-hidden bg-gradient-to-br from-indigo-900 to-slate-800 border border-indigo-500/30 p-6 flex flex-col justify-between rounded-2xl">
                        <div class="flex justify-between items-center">
                            <span class="text-2xl">🎭</span>
                            <span class="text-xs text-indigo-400 font-semibold uppercase tracking-wider">Tarjeta #4</span>
                        </div>
                        <div>
                            <h3 class="text-xs text-indigo-300 font-medium mb-1">Pregunta / Estímulo</h3>
                            <p class="text-lg font-bold">¿Cuál era el papel de la comedia costumbrista española durante el franquismo?</p>
                        </div>
                        <div class="text-right text-xs text-slate-400 italic">Haz clic para ver la respuesta ➔</div>
                    </div>
                    <div class="absolute inset-0 backface-hidden rotate-y-180 bg-gradient-to-br from-emerald-900 to-slate-800 border border-emerald-500/30 p-6 flex flex-col justify-between rounded-2xl">
                        <div class="flex justify-between items-center">
                            <span class="text-2xl">💡</span>
                            <span class="text-xs text-emerald-400 font-semibold uppercase tracking-wider">Respuesta</span>
                        </div>
                        <div>
                            <p class="text-base text-emerald-100 font-medium">Utilizar el humor irónico y entrañable para burlar la censura y evidenciar las contradicciones y problemas reales de la sociedad.</p>
                        </div>
                        <div class="text-right text-xs text-slate-400 italic">Clic para volver ↺</div>
                    </div>
                </div>
            </div>

            <!-- Tarjeta 5 -->
            <div class="h-64 perspective-1000 cursor-pointer card-container" onclick="this.querySelector('.card-inner').classList.toggle('rotate-y-180')">
                <div class="card-inner relative w-full h-full duration-500 transform-style-3d shadow-xl rounded-2xl">
                    <div class="absolute inset-0 backface-hidden bg-gradient-to-br from-indigo-900 to-slate-800 border border-indigo-500/30 p-6 flex flex-col justify-between rounded-2xl">
                        <div class="flex justify-between items-center">
                            <span class="text-2xl">🏙️</span>
                            <span class="text-xs text-indigo-400 font-semibold uppercase tracking-wider">Tarjeta #5</span>
                        </div>
                        <div>
                            <h3 class="text-xs text-indigo-300 font-medium mb-1">Pregunta / Estímulo</h3>
                            <p class="text-lg font-bold">¿Qué retrata Fernando León de Aranoa en su película <i>Barrio</i>?</p>
                        </div>
                        <div class="text-right text-xs text-slate-400 italic">Haz clic para ver la respuesta ➔</div>
                    </div>
                    <div class="absolute inset-0 backface-hidden rotate-y-180 bg-gradient-to-br from-emerald-900 to-slate-800 border border-emerald-500/30 p-6 flex flex-col justify-between rounded-2xl">
                        <div class="flex justify-between items-center">
                            <span class="text-2xl">💡</span>
                            <span class="text-xs text-emerald-400 font-semibold uppercase tracking-wider">Respuesta</span>
                        </div>
                        <div>
                            <p class="text-base text-emerald-100 font-medium">Las ilusiones, la precariedad económica y los riesgos de la delincuencia de tres adolescentes en la periferia madrileña.</p>
                        </div>
                        <div class="text-right text-xs text-slate-400 italic">Clic para volver ↺</div>
                    </div>
                </div>
            </div>

            <!-- Tarjeta 6 -->
            <div class="h-64 perspective-1000 cursor-pointer card-container" onclick="this.querySelector('.card-inner').classList.toggle('rotate-y-180')">
                <div class="card-inner relative w-full h-full duration-500 transform-style-3d shadow-xl rounded-2xl">
                    <div class="absolute inset-0 backface-hidden bg-gradient-to-br from-indigo-900 to-slate-800 border border-indigo-500/30 p-6 flex flex-col justify-between rounded-2xl">
                        <div class="flex justify-between items-center">
                            <span class="text-2xl">👠</span>
                            <span class="text-xs text-indigo-400 font-semibold uppercase tracking-wider">Tarjeta #6</span>
                        </div>
                        <div>
                            <h3 class="text-xs text-indigo-300 font-medium mb-1">Pregunta / Estímulo</h3>
                            <p class="text-lg font-bold">¿Qué busca mostrar Aranoa con los personajes de <i>Princesas</i>?</p>
                        </div>
                        <div class="text-right text-xs text-slate-400 italic">Haz clic para ver la respuesta ➔</div>
                    </div>
                    <div class="absolute inset-0 backface-hidden rotate-y-180 bg-gradient-to-br from-emerald-900 to-slate-800 border border-emerald-500/30 p-6 flex flex-col justify-between rounded-2xl">
                        <div class="flex justify-between items-center">
                            <span class="text-2xl">💡</span>
                            <span class="text-xs text-emerald-400 font-semibold uppercase tracking-wider">Respuesta</span>
                        </div>
                        <div>
                            <p class="text-base text-emerald-100 font-medium">La realidad humana, la amistad y los abusos en la prostitución más allá de los estereotipos fríos de los telediarios.</p>
                        </div>
                        <div class="text-right text-xs text-slate-400 italic">Clic para volver ↺</div>
                    </div>
                </div>
            </div>

            <!-- Tarjeta 7 -->
            <div class="h-64 perspective-1000 cursor-pointer card-container" onclick="this.querySelector('.card-inner').classList.toggle('rotate-y-180')">
                <div class="card-inner relative w-full h-full duration-500 transform-style-3d shadow-xl rounded-2xl">
                    <div class="absolute inset-0 backface-hidden bg-gradient-to-br from-indigo-900 to-slate-800 border border-indigo-500/30 p-6 flex flex-col justify-between rounded-2xl">
                        <div class="flex justify-between items-center">
                            <span class="text-2xl">🌊</span>
                            <span class="text-xs text-indigo-400 font-semibold uppercase tracking-wider">Tarjeta #7</span>
                        </div>
                        <div>
                            <h3 class="text-xs text-indigo-300 font-medium mb-1">Pregunta / Estímulo</h3>
                            <p class="text-lg font-bold">¿Cómo aborda Isaki Lacuesta su película <i>Entre dos aguas</i>?</p>
                        </div>
                        <div class="text-right text-xs text-slate-400 italic">Haz clic para ver la respuesta ➔</div>
                    </div>
                    <div class="absolute inset-0 backface-hidden rotate-y-180 bg-gradient-to-br from-emerald-900 to-slate-800 border border-emerald-500/30 p-6 flex flex-col justify-between rounded-2xl">
                        <div class="flex justify-between items-center">
                            <span class="text-2xl">💡</span>
                            <span class="text-xs text-emerald-400 font-semibold uppercase tracking-wider">Respuesta</span>
                        </div>
                        <div>
                            <p class="text-base text-emerald-100 font-medium">Con un formato híbrido entre ficción y documental, siguiendo la vuelta a los orígenes y la lucha de dos hermanos gitanos en San Fernando.</p>
                        </div>
                        <div class="text-right text-xs text-slate-400 italic">Clic para volver ↺</div>
                    </div>
                </div>
            </div>

            <!-- Tarjeta 8 -->
            <div class="h-64 perspective-1000 cursor-pointer card-container" onclick="this.querySelector('.card-inner').classList.toggle('rotate-y-180')">
                <div class="card-inner relative w-full h-full duration-500 transform-style-3d shadow-xl rounded-2xl">
                    <div class="absolute inset-0 backface-hidden bg-gradient-to-br from-indigo-900 to-slate-800 border border-indigo-500/30 p-6 flex flex-col justify-between rounded-2xl">
                        <div class="flex justify-between items-center">
                            <span class="text-2xl">✂️</span>
                            <span class="text-xs text-indigo-400 font-semibold uppercase tracking-wider">Tarjeta #8</span>
                        </div>
                        <div>
                            <h3 class="text-xs text-indigo-300 font-medium mb-1">Pregunta / Estímulo</h3>
                            <p class="text-lg font-bold">¿Qué herramienta cinematográfica única destaca el estudio frente a la novela?</p>
                        </div>
                        <div class="text-right text-xs text-slate-400 italic">Haz clic para ver la respuesta ➔</div>
                    </div>
                    <div class="absolute inset-0 backface-hidden rotate-y-180 bg-gradient-to-br from-emerald-900 to-slate-800 border border-emerald-500/30 p-6 flex flex-col justify-between rounded-2xl">
                        <div class="flex justify-between items-center">
                            <span class="text-2xl">💡</span>
                            <span class="text-xs text-emerald-400 font-semibold uppercase tracking-wider">Respuesta</span>
                        </div>
                        <div>
                            <p class="text-base text-emerald-100 font-medium">El montaje, capaz de yuxtaponer imágenes y sonidos para generar un tercer significado y evocar emociones profundas en el espectador.</p>
                        </div>
                        <div class="text-right text-xs text-slate-400 italic">Clic para volver ↺</div>
                    </div>
                </div>
            </div>

            <!-- Tarjeta 9 -->
            <div class="h-64 perspective-1000 cursor-pointer card-container" onclick="this.querySelector('.card-inner').classList.toggle('rotate-y-180')">
                <div class="card-inner relative w-full h-full duration-500 transform-style-3d shadow-xl rounded-2xl">
                    <div class="absolute inset-0 backface-hidden bg-gradient-to-br from-indigo-900 to-slate-800 border border-indigo-500/30 p-6 flex flex-col justify-between rounded-2xl">
                        <div class="flex justify-between items-center">
                            <span class="text-2xl">🔍</span>
                            <span class="text-xs text-indigo-400 font-semibold uppercase tracking-wider">Tarjeta #9</span>
                        </div>
                        <div>
                            <h3 class="text-xs text-indigo-300 font-medium mb-1">Pregunta / Estímulo</h3>
                            <p class="text-lg font-bold">¿Qué tienen en común el buen periodista y estos directores de cine?</p>
                        </div>
                        <div class="text-right text-xs text-slate-400 italic">Haz clic para ver la respuesta ➔</div>
                    </div>
                    <div class="absolute inset