body {
            font-family: 'Nunito', 'Noto Sans JP', sans-serif;
            background-color: #f4f4f4; /* Gris muy claro para resaltar las tarjetas blancas */
            background-image: radial-gradient(#e5e7eb 1px, transparent 1px);
            background-size: 20px 20px;
        }

        /* Colores temáticos Supeindou (Rojo España, Negro, Blanco, toques dorados) */
        .text-spain-red { color: #c60b1e; }
        .bg-spain-red { background-color: #c60b1e; }
        .border-spain-red { border-color: #c60b1e; }
        
        .text-spain-gold { color: #ffc400; }
        .bg-spain-gold { background-color: #ffc400; }
        
        .text-spain-black { color: #1a1a1a; }

        /* Estilo de las tarjetas (Glassmorphism sutil) */
        .app-card {
            background: #ffffff;
            border: 1px solid rgba(0, 0, 0, 0.05);
            box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.05), 0 2px 4px -1px rgba(0, 0, 0, 0.03);
            transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
        }
        
        .app-card:hover {
            transform: translateY(-4px);
            box-shadow: 0 10px 15px -3px rgba(198, 11, 30, 0.1), 0 4px 6px -2px rgba(198, 11, 30, 0.05);
            border-color: rgba(198, 11, 30, 0.2);
        }

        .arrow-icon {
            opacity: 0;
            transform: translateX(-10px);
        }

        .app-card:hover .arrow-icon {
            opacity: 1;
            transform: translateX(0);
            color: #c60b1e;
        }

        .gradient-bg {
            background: linear-gradient(135deg, #ffffff 0%, #fef2f2 100%);
        }

            /* Estilos inyectados desde JS para las lecciones */
        .lesson-html-content p { margin-bottom: 1rem; line-height: 1.7; }
        .lesson-html-content strong { color: #1a1a1a; font-weight: 900; }

         /* Hover específico por materia */
        .quiz-grama:hover { border-color: rgba(79, 70, 229, 0.3); } /* Indigo */
        .quiz-grama:hover .icon-container { background-color: #4f46e5; color: #ffffff; }
        .quiz-grama:hover .arrow-icon { color: #4f46e5; }
        .quiz-grama:hover .title-text { color: #4f46e5; }

        .quiz-vocab:hover { border-color: rgba(249, 115, 22, 0.3); } /* Orange */
        .quiz-vocab:hover .icon-container { background-color: #f97316; color: #ffffff; }
        .quiz-vocab:hover .arrow-icon { color: #f97316; }
        .quiz-vocab:hover .title-text { color: #f97316; }

        .icon-container { transition: all 0.4s ease; }
        .arrow-icon { opacity: 0; transform: translateX(-10px); transition: all 0.3s ease; }
        .app-card:hover .arrow-icon { opacity: 1; transform: translateX(0); }
        .title-text { transition: color 0.3s ease; }

        
/* Firma */
/* Contenedor para que respire un poco en el footer */
.contenedor-firma {
    display: flex;
    justify-content: center; /* Centra la firma */
    margin-top: 15px;        /* Un poco de espacio por arriba */
}

/* Estilos del enlace */
.firma-jinjo {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    text-decoration: none;
    color: #555;
    font-family: sans-serif;
    font-size: 13px;
    opacity: 0.6;
    transition: opacity 0.3s ease, color 0.3s ease;
}

.firma-jinjo:hover {
    opacity: 1;
    color: #000;
}