@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@400;600;700&display=swap');
body { 
    font-family: 'Poppins', sans-serif; 
    background-image: url('../imagenes/fondo.jpg');
    background-size: cover;
    background-position: center;
    transition: background-color 0.5s ease;
}

/* --- TEMAS DINÁMICOS --- */
body.theme-classic { background-color: #111827; }
body.theme-rompehielos { background-color: #0e7490; }
body.theme-sinfiltro { background-color: #881337; }
body.theme-prohibido { background-color: #450a0a; }

.card-bg { background-color: rgba(17, 24, 39, 0.9); backdrop-filter: blur(12px); border: 1px solid rgba(255, 255, 255, 0.1); }
.fade-in { animation: fadeIn 0.5s ease-in-out; }
@keyframes fadeIn { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } }
.hidden { display: none; }
.screen-transition-out { animation: fadeOut 0.3s ease-in-out forwards; }
@keyframes fadeOut { from { opacity: 1; transform: scale(1); } to { opacity: 0; transform: scale(0.95); } }

/* --- ANIMACIÓN DE CARTAS --- */
.card-flip-container { perspective: 1000px; }
.card-flipper { transition: transform 0.6s; transform-style: preserve-3d; }
.card-flip-container.flipped .card-flipper { transform: rotateY(180deg); }
.card-front, .card-back { backface-visibility: hidden; position: absolute; top: 0; left: 0; width: 100%; height: 100%; }
.card-back { transform: rotateY(180deg); }